diff --git a/src/App.vue b/src/App.vue
index 619ed5c0..4a7caa6a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,55 +1,191 @@
 <template>
   <div id="app">
-    <a-space class="logos" style="float: left;">
-      <img src="./assets/logo.png">
-      <img src="./assets/hi.png">
+    <a-space class="logos" style="float: left">
+      <img src="./assets/logo.png" />
+      <img src="./assets/hi.png" />
       <div>期待大家的参与😁</div>
     </a-space>
     <a-row type="flex" class="menus">
       <a-button-group>
         <template v-for="demo in demoList">
-          <a-button :type="demo.name === curDemo ? 'primary' : 'info'" @click="curDemo = demo.name" :key="demo.name">
+          <a-button
+            :type="demo.name === curDemo ? 'primary' : 'info'"
+            @click="curDemo = demo.name"
+            :key="demo.name"
+          >
             {{ demo.title }}
           </a-button>
         </template>
       </a-button-group>
-      <div style="margin-left: 20px"/>
-      <a-button style="width:30vw;font-size: 16px;" :type="'templates' === curDemo ? 'primary' : 'info'"
-                icon="file-search"
-                @click="curDemo = 'templates'">
+      <div style="margin-left: 20px" />
+      <a-button
+        style="width: 200px; font-size: 16px"
+        :type="'templates' === curDemo ? 'primary' : 'info'"
+        icon="file-search"
+        @click="curDemo = 'templates'"
+      >
         模 板 中 心
       </a-button>
+      <div style="margin-left: 20px"></div>
+      <a-select
+        v-if="curDemo == 'printDesign'"
+        ref="verSelect"
+        v-model="version"
+        :options="versions"
+        @change="handleVerChange"
+        style="width: 160px"
+      >
+      </a-select>
+      <div style="margin-left: 20px"></div>
+      <a-select
+        v-if="i18nSupport"
+        ref="i18nSelect"
+        v-model="lang"
+        :options="languages"
+        @change="handleLangChange"
+        style="width: 160px"
+      >
+      </a-select>
     </a-row>
     <!-- 动态渲染组件，懒得去弄路由了 -->
     <keep-alive>
-      <component :is="curDemo"/>
+      <component :is="curDemo" />
     </keep-alive>
   </div>
 </template>
 
 <script>
-
-import printDesign from '@/demo/design/index'
-import printCustom from '@/demo/custom/index'
-import printTasks from '@/demo/tasks/index'
-import printPanels from '@/demo/panels/index'
-import templates from '@/demo/templates/index'
+import printDesign from "@/demo/design/index";
+import printCustom from "@/demo/custom/index";
+import printTasks from "@/demo/tasks/index";
+import printPanels from "@/demo/panels/index";
+import templates from "@/demo/templates/index";
+import { decodeVer } from "@/utils";
 
 export default {
-  name: 'App',
-  components: {printDesign, printCustom, printTasks, printPanels, templates},
+  name: "App",
+  components: {
+    printDesign,
+    printCustom,
+    printTasks,
+    printPanels,
+    templates,
+  },
   data() {
     return {
-      curDemo: 'printDesign',
+      curDemo: "printDesign",
       demoList: [
-        {name: 'printDesign', title: '默认拖拽设计'},
-        {name: 'printCustom', title: '自定义设计'},
-        {name: 'printTasks', title: '队列/批量打印'},
-        {name: 'printPanels', title: '多面板设计'}
-      ]
-    }
+        { name: "printDesign", title: "默认拖拽设计" },
+        { name: "printCustom", title: "自定义设计" },
+        { name: "printTasks", title: "队列/批量打印" },
+        { name: "printPanels", title: "多面板设计" },
+      ],
+      // npm 信息
+      npmInfo: {},
+      versions: [],
+      lang: "cn",
+      languages: [
+        {
+          label: "简体中文-cn",
+          value: "cn",
+        },
+        {
+          label: "英语-en",
+          value: "en",
+        },
+        {
+          label: "德语-de",
+          value: "de",
+        },
+        {
+          label: "西班牙语-es",
+          value: "es",
+        },
+        {
+          label: "法语-fr",
+          value: "fr",
+        },
+        {
+          label: "意大利语-it",
+          value: "it",
+        },
+        {
+          label: "日语-ja",
+          value: "ja",
+        },
+        {
+          label: "俄语-ru",
+          value: "ru",
+        },
+        {
+          label: "繁体中文-cn_tw",
+          value: "cn_tw",
+        },
+      ],
+      // 选择版本
+      version: undefined,
+    };
   },
-}
+  computed: {
+    i18nSupport() {
+      console.log(this.version, decodeVer(this.version))
+      return (
+        this.version == "development" || decodeVer(this.version).verVal >= 55.8
+      );
+    },
+  },
+  created() {
+    this.version = sessionStorage.getItem("version");
+    this.lang = sessionStorage.getItem("lang") || "cn";
+    this.getVersion();
+  },
+  methods: {
+    /**
+     * @description: 通过 jsdelivr 获取所有 npm 信息
+     * @return {*}
+     */
+    getVersion() {
+      const xhr = new XMLHttpRequest();
+      xhr.open(
+        "GET",
+        "https://data.jsdelivr.com/v1/packages/npm/vue-plugin-hiprint"
+      );
+      xhr.onload = () => {
+        if (xhr.status === 200) {
+          this.npmInfo = JSON.parse(xhr.responseText);
+          this.versions = this.npmInfo.versions.map(({ version }) => ({
+            label: version,
+            value: version,
+          }));
+          if (process.env.NODE_ENV === "development") {
+            this.versions.unshift({
+              label: "development",
+              value: "development",
+            });
+          }
+          this.version ??= this.versions[0].value;
+        }
+      };
+      xhr.send();
+    },
+    /**
+     * @description: 版本切换事件
+     * @param {String} val
+     */
+    handleVerChange(val) {
+      sessionStorage.setItem("version", val);
+      location.reload();
+    },
+    /**
+     * @description: 语言切换事件
+     * @param {String} val
+     */
+    handleLangChange(val) {
+      sessionStorage.setItem("lang", val);
+      location.reload();
+    },
+  },
+};
 </script>
 
 <style lang="less">
@@ -77,11 +213,13 @@ export default {
 }
 
 // 修改 页眉/页脚线 样式
-.hiprint-headerLine, .hiprint-footerLine {
+.hiprint-headerLine,
+.hiprint-footerLine {
   border-color: red !important;
 }
 
-.hiprint-headerLine:hover, .hiprint-footerLine:hover {
+.hiprint-headerLine:hover,
+.hiprint-footerLine:hover {
   border-top: 3px dashed red !important;
 }
 
@@ -89,7 +227,7 @@ export default {
   content: "页眉线";
   left: calc(50% - 18px);
   position: relative;
-  background: #FFFF;
+  background: #ffff;
   top: -12px;
   color: red;
   font-size: 12px;
@@ -100,7 +238,7 @@ export default {
   left: calc(50% - 18px);
   position: relative;
   color: red;
-  background: #FFFF;
+  background: #ffff;
   top: -12px;
   font-size: 12px;
 }
diff --git a/src/demo/design/index.vue b/src/demo/design/index.vue
index b53f6182..ef99377d 100644
--- a/src/demo/design/index.vue
+++ b/src/demo/design/index.vue
@@ -258,7 +258,7 @@
                   </div>
                 </a-col>
               </a-row>
-              <a-row style="height: 100px;">
+              <a-row v-if="currVerInfo.verVal >= 55.3" style="height: 100px;">
                 <a-col :span="12" class="drag_item_box">
                   <div>
                     <a class="ep-draggable-item" tid="defaultModule.barcode">
@@ -298,16 +298,18 @@
   </a-card>
 </template>
 
-<script>
-import {defaultElementTypeProvider, hiprint} from '../../index'
-import panel from './panel'
+<script defer>
+// import {defaultElementTypeProvider, hiprint} from '../../index'
+import * as vuePluginHiprint from '../../index'
+// import panel from './panel'
 import printData from './print-data'
 import printPreview from './preview'
 import jsonView from "../json-view.vue";
 import fontSize from "./font-size.js";
 import scale from "./scale.js";
+import { decodeVer } from '@/utils'
 // disAutoConnect();
-
+var hiprint, defaultElementTypeProvider, panel;
 let hiprintTemplate;
 
 export default {
@@ -372,15 +374,87 @@ export default {
         }
       }
       return type
+    },
+    /**
+     * @description: 当前版本信息，用于 demo 页面根据版本控制功能
+     * @return {Object}
+     */    
+    currVerInfo() {
+      if (this.$parent.version && this.$parent.version != "development") {
+        return decodeVer(this.$parent.version)
+      } else if (hiprint?.version) {
+        return decodeVer(hiprint.version)
+      } else {
+        return {
+          verVal: 9999
+        }
+      }
     }
   },
   mounted() {
-    this.init()
+    this.getPanel()
+    // 存在一个固定版本号，并且不是开发版本
+    if (this.$parent.version && this.$parent.version != "development") {
+      // 加载对应版本的 hiprint
+      this.getVersion(this.$parent.version)
+    }
+    // 不存在固定版本，加载当前代码中的 hiprint
+    else {
+      hiprint = vuePluginHiprint.hiprint
+      defaultElementTypeProvider = vuePluginHiprint.defaultElementTypeProvider
+      this.init()
+    }
   },
   methods: {
+    /**
+     * @description: 加载 panel
+     */
+    getPanel() {
+      // 加载所有 panel
+      const panels = require.context('./', true, /panel.*\.js$/)
+      // 对所有 panel 进行版本解析
+      var panelInfos = panels.keys().map(key => ({
+        ...decodeVer(key.replace(/(\.\/panel-?)|(\.js)/g, '')),
+        key
+      }))
+      // 存在一个固定版本号，并且不是开发版本
+      if (this.$parent.version && this.$parent.version != "development") {
+        // 解析对应版本信息
+        var currVerInfo = decodeVer(this.$parent.version)
+        // 查找小于等于当前版本的 panel
+        var newVers = panelInfos.filter(({verVal}) => verVal <= currVerInfo.verVal)
+          // 对版本号进行倒叙
+          .sort((acc, curr) => curr.verVal - acc.verVal)
+        // 获取最大版本号面板 json
+        panel = panels(newVers[0].key).default
+      }
+      // 不存在固定版本，加载默认面板 json
+      else {
+        panel = panels('./panel.js').default
+      }
+    },
+    /**
+     * @description: 加载版本
+     * @param {string} version 版本号
+     */    
+    getVersion(version) {
+      const script = document.createElement("script");
+      script.setAttribute("type", "text/javascript");
+      script.setAttribute(
+        "src",
+        `https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@${version}/dist/vue-plugin-hiprint.js`
+      );
+      script.addEventListener("load", () => {
+        hiprint = window['vue-plugin-hiprint'].hiprint
+        defaultElementTypeProvider = window['vue-plugin-hiprint'].defaultElementTypeProvider
+        this.init()
+      })
+      document.body.append(script)
+    },
     init() {
       hiprint.init({
-        providers: [new defaultElementTypeProvider()]
+        providers: [new defaultElementTypeProvider()],
+        lang: this.$parent.lang
       });
       // 还原配置
       hiprint.setConfig()
diff --git a/src/demo/design/panel-0.0.55-beta3.js b/src/demo/design/panel-0.0.55-beta3.js
new file mode 100644
index 00000000..8321df34
--- /dev/null
+++ b/src/demo/design/panel-0.0.55-beta3.js
@@ -0,0 +1,340 @@
+export default {
+  "panels": [{
+    "index": 0,
+    "height": 297,
+    "width": 210,
+    "paperHeader": 49.5,
+    "paperFooter": 780,
+    "watermarkOptions": {
+      "content": "vue-plugin-hiprint",
+      "rotate": 25,
+      "timestamp": true,
+      "format": "YYYY-MM-DD HH:mm"
+    },
+    "printElements": [{
+      "options": {
+        "left": 175.5,
+        "top": 10.5,
+        "height": 27,
+        "width": 259,
+        "title": "HiPrint自定义模块打印插件",
+        "fontSize": 19,
+        "fontWeight": "600",
+        "textAlign": "center",
+        "lineHeight": 26,
+        "coordinateSync": true,
+        "widthHeightSync": true,
+        "draggable": false,
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 60, "top": 27, "height": 13, "width": 52, "title": "页眉线", "textAlign": "center"},
+      "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 25.5, "top": 57, "height": 705, "width": 9, "fixed": true, "borderStyle": "dotted"},
+      "printElementType": {"type": "vline"}
+    }, {
+      "options": {"left": 60, "top": 61.5, "height": 48, "width": 87, "src": "", "fit": "contain"},
+      "printElementType": {"title": "图片", "type": "image"}
+    }, {
+      "options": {
+        "left": 153,
+        "top": 64.5,
+        "height": 39,
+        "width": 276,
+        "title": "二维码以及条形码均采用svg格式打印。不同打印机打印不会造成失真。图片打印：不同DPI打印可能会导致失真，",
+        "fontFamily": "微软雅黑",
+        "textAlign": "center",
+        "lineHeight": 18
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 457.5,
+        "top": 79.5,
+        "height": 13,
+        "width": 120,
+        "title": "姓名",
+        "field": "name",
+        "testData": "古力娜扎",
+        "color": "#f00808",
+        "textDecoration": "underline",
+        "textAlign": "center",
+        "fields": [{"text":'id',"field":'id'},{"text":'姓名',"field":'name'},{"text":'性别',"field":'gender'},{"text":'数量',"field":'count'}],
+      }, "printElementType": {"title": "文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 483,
+        "top": 124.5,
+        "height": 43,
+        "width": 51,
+        "title": "123456789",
+        "textType": "qrcode"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 285,
+        "top": 130.5,
+        "height": 34,
+        "width": 175,
+        "title": "123456789",
+        "fontFamily": "微软雅黑",
+        "textAlign": "center",
+        "textType": "barcode"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 60,
+        "top": 110,
+        "height": 19,
+        "width": 213,
+        "title": "所有打印元素都可已拖拽的方式来改变元素大小",
+        "fontFamily": "微软雅黑",
+        "textAlign": "center",
+        "lineHeight": 18
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 60,
+        "top": 130,
+        "height": 40,
+        "width": 40,
+        "title": "qrcode",
+        "field": "qrcode",
+        "testData": "qrcode",
+      },
+      "printElementType": {
+        "title": "二维码",
+        "type": "qrcode",
+      }
+    }, {
+      "options": {
+        "left": 160,
+        "top": 130,
+        "height": 40,
+        "width": 80,
+        "title": "barcode",
+        "field": "barcode",
+        "testData": "barcode",
+      },
+      "printElementType": {
+        "title": "条形码",
+        "type": "barcode",
+      }
+    }, {
+      "options": {
+        "left": 153,
+        "top": 189,
+        "height": 13,
+        "width": 238,
+        "title": "单击元素，右侧可自定义元素属性",
+        "textAlign": "center",
+        "fontFamily": "微软雅黑"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 60, "top": 190.5, "height": 13, "width": 51, "title": "横线", "textAlign": "center"},
+      "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 415.5,
+        "top": 190.5,
+        "height": 13,
+        "width": 164,
+        "title": "可以配置各属性的默认值",
+        "textAlign": "center",
+        "fontFamily": "微软雅黑"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 60, "top": 214.5, "height": 10, "width": 475.5},
+      "printElementType": {"title": "横线", "type": "hline"}
+    }, {
+      "options": {
+        "left": 235.5,
+        "top": 220.5,
+        "height": 32,
+        "width": 342,
+        "title": "自定义表格：用户可左键选中表头，右键查看可操作项，操作类似Excel，双击表头单元格可进行编辑。内容：title#field",
+        "fontFamily": "微软雅黑",
+        "textAlign": "center",
+        "lineHeight": 15
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 156,
+        "top": 265.5,
+        "height": 13,
+        "width": 94,
+        "title": "表头列大小可拖动",
+        "fontFamily": "微软雅黑",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 60,
+        "top": 265.5,
+        "height": 13,
+        "width": 90,
+        "title": "红色区域可拖动",
+        "fontFamily": "微软雅黑",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 60,
+        "top": 285,
+        "height": 56,
+        "width": 511.5,
+        "field": "table",
+        "tableFooterRepeat": "",
+        "tableBorder": "noBorder",
+        "tableHeaderBorder": "topBorder",
+        "tableHeaderCellBorder": "border",
+        "tableBodyRowBorder": "topBorder",
+        "tableFooterBorder": "topBorder",
+        "fields": [{"text":'id',"field":'id'},{"text":'姓名',"field":'name'},{"text":'性别',"field":'gender'},{"text":'数量',"field":'count'}],
+        "columns": [[{"width": 85.25, "colspan": 1, "rowspan": 1, "checked": true}, {
+          "title": "性别",
+          "field": "gender",
+          "width": 85.25,
+          "colspan": 1,
+          "rowspan": 1,
+          "checked": false
+        }, {
+          "title": "姓名",
+          "field": "name",
+          "width": 85.25,
+          "align": "center",
+          "colspan": 1,
+          "rowspan": 1,
+          "checked": true,
+          "tableSummary": "count"
+        }, {
+          "title": "数量",
+          "field": "count",
+          "width": 85.25,
+          "align": "center",
+          "colspan": 1,
+          "rowspan": 1,
+          "checked": true,
+          "tableSummary": "sum"
+		    }, {
+          "width": 85.25,
+          "colspan": 1,
+          "rowspan": 1,
+          "checked": true
+        }, {"width": 85.25, "colspan": 1, "rowspan": 1, "checked": true}]]
+      }, "printElementType": {
+        "title": "表格", "type": "table",
+        // editable: true,
+        // columnDisplayEditable: true,//列显示是否能编辑
+        // columnDisplayIndexEditable: true,//列顺序显示是否能编辑
+        // columnTitleEditable: true,//列标题是否能编辑
+        // columnResizable: true, //列宽是否能调整
+        // columnAlignEditable: true,//列对齐是否调整
+        // isEnableEditField: true, //编辑字段
+        // isEnableContextMenu: true, //开启右键菜单 默认true
+        // isEnableInsertRow: true, //插入行
+        // isEnableDeleteRow: true, //删除行
+        // isEnableInsertColumn: true, //插入列
+        // isEnableDeleteColumn: true, //删除列
+        // isEnableMergeCell: true, //合并单元格
+      }
+    }, {
+      "options": {
+        "left": 21,
+        "top": 346.5,
+        "height": 61.5,
+        "width": 15,
+        "title": "装订线",
+        "lineHeight": 18,
+        "fixed": true,
+        "contentPaddingTop": 3.75,
+        "backgroundColor": "#ffffff"
+      }, "printElementType": {"type": "text"}
+    }, {
+      "options": {
+        "left": 225,
+        "top": 355,
+        "height": 13,
+        "width": 346.5,
+        "title": "自定义模块：主要为开发人员设计，能够快速，简单，实现自己功能",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 60, "top": 370.5, "height": 18, "width": 79, "title": "配置项表格", "textAlign": "center"},
+      "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 225,
+        "top": 385.5,
+        "height": 38,
+        "width": 346.5,
+        "title": "配置模块：主要为客户使用，开发人员可以配置属性，字段，标题等，客户直接使用，配置模块请参考实例2",
+        "fontFamily": "微软雅黑",
+        "lineHeight": 15,
+        "textAlign": "center",
+        "color": "#d93838"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 60,
+        "top": 487.5,
+        "height": 13,
+        "width": 123,
+        "title": "长文本会自动分页",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 60, "top": 507, "height": 40, "width": 511.5, "field": "longText"},
+      "printElementType": {"title": "长文", "type": "longText"}
+    }, {
+      "options": {"left": 475.5, "top": 565.5, "height": 100, "width": 100},
+      "printElementType": {"title": "矩形", "type": "rect"}
+    }, {
+      "options": {"left": 174, "top": 568.5, "height": 13, "width": 90, "title": "竖线", "textAlign": "center"},
+      "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 60, "top": 574.5, "height": 100, "width": 10},
+      "printElementType": {"title": "竖线", "type": "vline"}
+    }, {
+      "options": {"left": 210, "top": 604.5, "height": 13, "width": 120, "title": "横线", "textAlign": "center"},
+      "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 130.5, "top": 625.5, "height": 10, "width": 277},
+      "printElementType": {"title": "横线", "type": "hline"}
+    }, {
+      "options": {
+        "left": 364.5,
+        "top": 649.5,
+        "height": 13,
+        "width": 101,
+        "title": "矩形",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 525, "top": 784.5, "height": 13, "width": 63, "title": "页尾线", "textAlign": "center"},
+      "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {"left": 12, "top": 786, "height": 49, "width": 49},
+      "printElementType": {"title": "html", "type": "html"}
+    }, {
+      "options": {
+        "left": 75,
+        "top": 790.5,
+        "height": 13,
+        "width": 137,
+        "title": "红色原型是自动定义的Html",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }, {
+      "options": {
+        "left": 334.5,
+        "top": 810,
+        "height": 13,
+        "width": 205,
+        "title": "页眉线已上。页尾下以下每页都会重复打印",
+        "textAlign": "center"
+      }, "printElementType": {"title": "自定义文本", "type": "text"}
+    }],
+    "paperNumberLeft": 565.5,
+    "paperNumberTop": 819
+  }]
+}
diff --git a/src/demo/design/panel.js b/src/demo/design/panel.js
index 8321df34..c17727ec 100644
--- a/src/demo/design/panel.js
+++ b/src/demo/design/panel.js
@@ -91,34 +91,6 @@ export default {
         "textAlign": "center",
         "lineHeight": 18
       }, "printElementType": {"title": "自定义文本", "type": "text"}
-    }, {
-      "options": {
-        "left": 60,
-        "top": 130,
-        "height": 40,
-        "width": 40,
-        "title": "qrcode",
-        "field": "qrcode",
-        "testData": "qrcode",
-      },
-      "printElementType": {
-        "title": "二维码",
-        "type": "qrcode",
-      }
-    }, {
-      "options": {
-        "left": 160,
-        "top": 130,
-        "height": 40,
-        "width": 80,
-        "title": "barcode",
-        "field": "barcode",
-        "testData": "barcode",
-      },
-      "printElementType": {
-        "title": "条形码",
-        "type": "barcode",
-      }
     }, {
       "options": {
         "left": 153,
diff --git a/src/index.js b/src/index.js
index d38412a5..fb463bae 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,6 +7,8 @@ import "./hiprint/hiprint.config";
 import "./hiprint/css/hiprint.css"
 import "./hiprint/css/print-lock.css"
 
+import {version} from '../package.json'
+
 /**
  * 自动连接 / 连接
  * cb: 连接回调， (status, msg) {
@@ -72,6 +74,8 @@ let hiPrintPlugin = {
   }
 }
 
+hiprint.version = version
+
 window.hiprint = hiprint;
 export {
   autoConnect,
diff --git a/src/utils/index.js b/src/utils/index.js
new file mode 100644
index 00000000..bc1a721f
--- /dev/null
+++ b/src/utils/index.js
@@ -0,0 +1,26 @@
+/*
+ * @Date: 2023-09-14 23:11:39
+ * @LastEditors: admin@54xavier.cn
+ * @LastEditTime: 2023-09-15 01:14:13
+ * @FilePath: /vue-plugin-hiprint/src/utils/index.js
+ */
+/**
+ * @description: 解析版本号信息
+ * @param {String} ver 版本号
+ * @return {Object} 解析后的版本号信息
+ */
+export function decodeVer(ver) {
+  var matchObj =
+    ver.match(
+      /(?<range>\^|~)?(?<version>(?<mainver>\d+(\.\d+){0,2})(?<appendver>-\w+)?)?/
+    )?.groups || {};
+  matchObj = { ...matchObj, ver };
+  matchObj.mainVal =
+    matchObj.mainver
+      ?.split(".")
+      ?.map((v, i) => v * Math.pow(10, 6 - i * 3))
+      ?.reduce((acc, curr) => acc + curr, 0) || 0;
+  matchObj.appendVal = (matchObj.appendver?.match(/[0-9]+/) || 0) * 1;
+  matchObj.verVal = `${matchObj.mainVal}.${matchObj.appendVal}` * 1;
+  return matchObj;
+}
\ No newline at end of file