引入vue重写主页、设置页，修复一些bug (#27)

* fix 使用 vue、element-ui 重写主页、设置页 // * add 首页添加插件版本、客户端版本，设置添加插件版本设置未完成功能已屏蔽相关代码 * fix 修复 start 脚本在 mac 报错 * fix 自启后最小化功能优化调整 CcSimple/vue-plugin-hiprint#118 * fix 设置模块校验优化，解决有值仍校验报错的问题
CcSimple · Apr 5, 2024 · e0a5391 · e0a5391
1 parent caad030
commit e0a5391
Show file tree

Hide file tree

Showing 18 changed files with 678 additions and 495 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # electron-hiprint
 
-这个项目是为 [vue-plugin-hiprint](https://github.com/CcSimple/vue-plugin-hiprint) 配套开发的不弹框静默打印方案，不过我们发现部分使用此项目的开发者有自己的设计器或渲染方案，也可能仅仅是需要将一段 HTML、一个 PDF 静默打印出来。如果你也是这样的需求，那么这个项目将能解决你的问题。
+这个项目是为 [vue-plugin-hiprint](https://github.com/CcSimple/vue-plugin-hiprint) 配套开发的不弹框静默打印方案，我们发现部分使用此项目的开发者有自己的设计器或渲染方案，也可能仅仅是需要将一段 HTML、一个 PDF 静默打印出来。如果你也是这样的需求，那么这个项目将能解决你的问题。
 
 ## 预览 <a href="https://ccsimple.gitee.io/vue-plugin-hiprint/">vue-plugin-hiprint</a> 打印设计 demo
 
@@ -12,17 +12,19 @@
 
 ## 调试/打包
 
-```console
+```shell
 git clone https://github.com/CcSimple/electron-hiprint.git
-// or
+# or
 git clone https://gitee.com/CcSimple/electron-hiprint.git
-// init
+
+# init
 cd electron-hiprint
-npm i
-// 调试预览
+npm install
+
+# 调试预览
 npm run start
-// 打包 win x64
-// 详情见package.json
+
+# 打包 win x64，其余平台版本详情见 package.json
 npm run build-w-64
 ```
 
@@ -32,21 +34,21 @@ npm run build-w-64
 
 ## 打印原理说明
 
-1. 连接客户端开启的 socket.io 服务 (默认端口 17521)
+1. WEB 连接客户端开启的 socket.io 服务 (默认端口 17521)
 
    - socket.io-client^4.x 连接 ("http://localhost:17521")
 
 2. 通过 socket.io-client^4.x 服务发送打印数据 (news)
 
    - socket.emit("news", { html, templateId, printer, pageSize });
-   - 主要参数 html: 即 html 字符串，templateId: 用于回调 successs/error 时的标识
+   - 主要参数 html: 即 html 字符串，templateId: 用于回调 successs / error 时的标识
    - printer: 打印机名称，pageSize: 打印纸张大小 (其他参数,见下面的示例)
 
 ## 打印端设置
 
-### v1.0.7 之后版本添加的设置功能
+### v1.0.7 后续版本添加的设置功能
 
-可在安装路径中修改 `config.json` 文件以修改设置，亦或者修改项目文件中默认值后重新打包自行发行自己的版本及设置。
+可安装后于安装目录找到 config.json 修改配置，亦或者修改项目文件中默认值后重新打包发行自己的版本及设置。
 
 也可以右键托盘，选择 `设置` 后在 `设置` 窗口中进行设置。
 

diff --git a/assets/print-lock.css → assets/css/print-lock.css b/assets/print-lock.css → assets/css/print-lock.css
diff --git a/assets/style.css → assets/css/style.css b/assets/style.css → assets/css/style.css
@@ -93,8 +93,8 @@ body {
   align-items: center;
 }
 
-#seticon {
-  display: none;
+.seticon {
+  display: none!important;
   cursor: pointer;
   font-size: 32px;
   line-height: 50px;
@@ -103,8 +103,8 @@ body {
   -webkit-animation: rotatiing 2s linear infinite;
 }
 
-.title:hover>#seticon {
-  display: inline-block;
+.title:hover>.seticon {
+  display: inline-block!important;
 }
 
 .message {

diff --git a/assets/fonts/element-icons.ttf → assets/element-ui/fonts/element-icons.ttf b/assets/fonts/element-icons.ttf → assets/element-ui/fonts/element-icons.ttf
diff --git a/assets/fonts/element-icons.woff → assets/element-ui/fonts/element-icons.woff b/assets/fonts/element-icons.woff → assets/element-ui/fonts/element-icons.woff
diff --git a/[email protected] → assets/element-ui/index.css b/[email protected] → assets/element-ui/index.css
diff --git a/assets/element-ui/index.js b/assets/element-ui/index.js
diff --git a/assets/index.html b/assets/index.html
@@ -1,100 +1,125 @@
 <!--
  * @Date: 2022-09-13 11:11:52
  * @LastEditors: [email protected]
- * @LastEditTime: 2023-12-19 16:28:47
+ * @LastEditTime: 2024-04-05 13:08:31
  * @FilePath: \electron-hiprint\assets\index.html
 -->
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8" />
     <title>Electron-hiprint</title>
-    <link rel="stylesheet" href="./style.css" />
+    <link rel="stylesheet" href="./css/style.css" />
     <link
       rel="stylesheet"
-      href="./element-ui@2.15.14.theme-chalk.index.min.css"
+      href="./element-ui/index.css"
     />
+    <script src="./js/vue.min.js"></script>
+    <script src="./element-ui/index.js"></script>
   </head>
 
   <body>
-    <div class="box">
+    <div id="app" class="box">
       <div class="background">
-        <div class="bg-primary active"></div>
-        <div class="bg-success"></div>
-        <div class="bg-warning"></div>
+        <div class="bg-primary" :class="{active: !transitActiveFlag}"></div>
+        <div
+          class="bg-success"
+          :class="{active: socketActiveNum || transitActiveFlag}"
+        ></div>
+        <div class="bg-warning" :class="{active: printing}"></div>
       </div>
       <div class="container">
         <div class="info">
           <div class="title">
-            打印服务已启动<i id="seticon" class="el-icon-setting"></i>
+            打印服务已启动<i class="el-icon-setting seticon" @click="openSetting"></i>
+          </div>
+          <div class="message row">
+            服务地址：<span @click="handleCopy">{{ ipAddress }}</span>
+          </div>
+          <div class="message row">
+            MAC地址：<span @click="handleCopy">{{ macAddress }}</span>
           </div>
-          <div class="message row">服务地址：<span id="ipAddress"></span></div>
-          <div class="message row">MAC地址：<span id="macAddress"></span></div>
         </div>
         <div class="status">
-          <div class="message" data-prop="transitStatus">
-            中转状态: <span id="transitStatus">未连接</span>
+          <div class="message">
+            中转状态: <span>{{ transitActiveFlag ? '已' : '未' }}连接</span>
           </div>
-          <div class="message" data-prop="connectionStatus">
-            本地连接：<span id="connectionStatus">未连接</span>
+          <div class="message">
+            本地连接：
+            <span>
+              {{ socketActiveNum ? `已建立 ${socketActiveNum} 条` : '未' }}连接
+            </span>
           </div>
-          <div class="message" data-prop="printedQueue">
-            打印状态：<span id="printedQueue">空闲</span>
+          <div class="message">
+            打印状态：<span>{{ printing ? "文档打印中" : "空闲" }}</span>
           </div>
-          <div class="message row">设备编号：<span id="deviceId"></span></div>
+          <div class="message row">设备编号：<span @click="handleCopy">{{ deviceId }}</span></div>
+          <!-- <div class="message">
+            插件版本：{{ pluginVersion }}
+          </div>
+          <div class="message">
+            客户端版本：{{ process.env.npm_package_version }}
+          </div> -->
         </div>
       </div>
     </div>
     <script type="text/javascript">
-      window.$ = window.jQuery = require("jquery");
       const { ipcRenderer, clipboard } = require("electron");
-
-      const Store = require('electron-store');
-
+      const Store = require("electron-store");
       const store = new Store();
 
       document.title = store.get("mainTitle") || "Electron-hiprint";
 
       let ipc = ipcRenderer;
-      $(document).ready(() => {
-        $("#seticon").click(() => {
-          ipc.send("openSetting");
-        });
-        $("#ipAddress,#macAddress,#deviceId").click((event) => {
-          clipboard.writeText(event.target.innerText);
-          ipc.send("notification", {
-            title: "复制成功",
-            body: "文本已成功复制到剪贴板中！",
+      new Vue({
+        el: "#app",
+        data: () => {
+          return {
+            macAddress: "",
+            ipAddress: "",
+            deviceId: "",
+            transitActiveFlag: false,
+            socketActiveNum: 0,
+            printing: false,
+            version: "1.0.10",
+            pluginVersion: store.get("pluginVersion") || "未指定",
+          };
+        },
+        created() {
+          ipc.send("getMachineId");
+          ipc.on("machineId", (event, arg) => {
+            this.deviceId = arg;
+          });
+          ipc.send("getAddress");
+          ipc.on("address", (event, arg) => {
+            this.ipAddress = `http://${arg.ip}:${arg.port || 17521}`;
+            this.macAddress = arg.mac;
+          });
+          ipc.on("serverConnection", this.socketActive);
+          ipc.on("printTask", (event, arg) => {
+            this.printing = arg;
           });
-        });
-        ipc.send("getMachineId");
-        ipc.on("machineId", (event, arg) => {
-          $("#deviceId").html(arg);
-        });
-        ipc.send("getAddress");
-        ipc.on("address", (event, arg) => {
-          $("#ipAddress").html(`http://${arg.ip}:${arg.port || 17521}`);
-          $("#macAddress").html(arg.mac);
-        });
-        ipc.on("serverConnection", socketActive);
-        ipc.on("printTask", (event, arg) => {
-          $("#printedQueue").html(arg ? "文档打印中" : "空闲");
-          $(".bg-warning")[arg ? "addClass" : "removeClass"]("active");
-        });
-        ipc.on("clientConnection", transitActive);
+          ipc.on("clientConnection", this.transitActive);
+        },
+        methods: {
+          openSetting() {
+            ipc.send("openSetting");
+          },
+          handleCopy(event) {
+            clipboard.writeText(event.target.innerText);
+            ipc.send("notification", {
+              title: "复制成功",
+              body: "文本已成功复制到剪贴板中！",
+            });
+          },
+          socketActive(evnet, arg) {
+            this.socketActiveNum = arg;
+          },
+          transitActive(event, arg) {
+            this.transitActiveFlag = arg;
+          },
+        },
       });
-      function socketActive(event, arg) {
-        console.log("socketActive", arg)
-        $("#connectionStatus").html(
-          `${arg ? "已建立 " + arg + " 条" : "未"}连接`
-        );
-        $(".bg-success")[arg ? "addClass" : "removeClass"]("active");
-      }
-      function transitActive(event, arg) {
-        console.log("transitActive", arg)
-        $("#transitStatus").html(`${arg ? "已" : "未"}连接`);
-        $(".bg-success")[arg ? "addClass" : "removeClass"]("active");
-      }
     </script>
   </body>
 </html>
diff --git a/assets/js/dayjs.min.js b/assets/js/dayjs.min.js