Merge pull request #63 from Xavier9896/main

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,19 +213,21 @@ 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;
 }
 
 .hiprint-headerLine:hover:before {
   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;
 }

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()