fist commit Reservation

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+out
+.gitignore

.eslintrc.cjs

@@ -0,0 +1,15 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/vue3-recommended',
+    '@electron-toolkit',
+    '@vue/eslint-config-prettier'
+  ],
+  rules: {
+    'vue/require-default-prop': 'off',
+    'vue/multi-word-component-names': 'off'
+  }
+}

.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# local env files
+.env.local
+.env.*.local
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*.rar
+*.zip

.prettierignore

@@ -0,0 +1,6 @@
+out
+dist
+pnpm-lock.yaml
+LICENSE.md
+tsconfig.json
+tsconfig.*.json

.prettierrc.yaml

@@ -0,0 +1,4 @@
+singleQuote: true
+semi: false
+printWidth: 100
+trailingComma: none

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint"]
+}

README.md

@@ -1,3 +1,36 @@
 # Reservation
 
-預約系統電腦版
+預約系統電腦版
+
+An Electron application with Vue
+
+## Recommended IDE Setup
+
+- [VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+
+## Project Setup
+
+### Install
+
+```bash
+$ yarn
+```
+
+### Development
+
+```bash
+$ yarn dev
+```
+
+### Build
+
+```bash
+# For windows
+$ yarn build:win
+
+# For macOS
+$ yarn build:mac
+
+# For Linux
+$ yarn build:linux
+```

build/entitlements.mac.plist

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>com.apple.security.cs.allow-jit</key>
+    <true/>
+    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+    <true/>
+    <key>com.apple.security.cs.allow-dyld-environment-variables</key>
+    <true/>
+  </dict>
+</plist>

electron-builder.yml

@@ -0,0 +1,42 @@
+appId: com.electron.app
+productName: reservation
+directories:
+  buildResources: build
+files:
+  - '!**/.vscode/*'
+  - '!src/*'
+  - '!electron.vite.config.{js,ts,mjs,cjs}'
+  - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
+  - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
+asarUnpack:
+  - resources/**
+win:
+  executableName: reservation
+nsis:
+  artifactName: ${name}-${version}-setup.${ext}
+  shortcutName: ${productName}
+  uninstallDisplayName: ${productName}
+  createDesktopShortcut: always
+mac:
+  entitlementsInherit: build/entitlements.mac.plist
+  extendInfo:
+    - NSCameraUsageDescription: Application requests access to the device's camera.
+    - NSMicrophoneUsageDescription: Application requests access to the device's microphone.
+    - NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder.
+    - NSDownloadsFolderUsageDescription: Application requests access to the user's Downloads folder.
+  notarize: false
+dmg:
+  artifactName: ${name}-${version}.${ext}
+linux:
+  target:
+    - AppImage
+    - snap
+    - deb
+  maintainer: electronjs.org
+  category: Utility
+appImage:
+  artifactName: ${name}-${version}.${ext}
+npmRebuild: false
+publish:
+  provider: generic
+  url: https://example.com/auto-updates

electron.vite.config.js

@@ -0,0 +1,21 @@
+import { resolve } from 'path'
+import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  main: {
+    plugins: [externalizeDepsPlugin()]
+  },
+  preload: {
+    plugins: [externalizeDepsPlugin()]
+  },
+  renderer: {
+    resolve: {
+      alias: {
+        '@renderer': resolve('src/renderer/src'),
+        '@main': resolve('src/main')
+      }
+    },
+    plugins: [vue()]
+  }
+})

out/main/index.js

@@ -0,0 +1,423 @@
+"use strict";
+const electron = require("electron");
+const path = require("path");
+const utils = require("@electron-toolkit/utils");
+const axios = require("axios");
+const mqtt = require("mqtt");
+const events$1 = require("events");
+const dayjs = require("dayjs");
+const utc = require("dayjs/plugin/utc");
+const AsyncLock = require("async-lock");
+var client;
+const sub_topic1 = "20005000A0001";
+var lock = new AsyncLock();
+var em = new events$1.EventEmitter();
+function mqttClient(mqtt_address, mywindow, hmap2) {
+  const clientId = "mqttjs_giga" + Math.random().toString(16).substr(2, 8);
+  const host = "mqtt://" + mqtt_address;
+  console.log("=======>>>> MQTT Client Start " + host);
+  const options = {
+    keepalive: 30,
+    clientId,
+    protocolId: "MQTT",
+    protocolVersion: 4,
+    clean: true,
+    reconnectPeriod: 1e3,
+    connectTimeout: 30 * 1e3,
+    will: {
+      topic: "WillMsg",
+      payload: "Connection Closed abnormally..!",
+      qos: 0,
+      retain: false
+    },
+    rejectUnauthorized: false
+  };
+  console.log("start connecting mqtt client....");
+  client = mqtt.connect(host, options);
+  client.on("error", (err) => {
+    console.log("mqtt Connection error: ", err);
+    client.end();
+  });
+  client.on("reconnect", () => {
+    console.error("MQTT reconnect");
+  });
+  client.on("connect", () => {
+    console.log("MQTT Client connected : " + clientId + " OK");
+    client.subscribe(sub_topic1, {
+      qos: 2
+    });
+    var param = {
+      success: true,
+      action: "mqttconnect",
+      data: {
+        status: "0"
+      }
+    };
+    console.log("Send mqtt:connectReply");
+    mywindow.webContents.send("mqtt:connectReply", param);
+  });
+  client.on("offline", () => {
+    console.log("MQTT offline");
+    var param = {
+      success: false,
+      action: "mqttconnect",
+      data: {
+        status: "0"
+      }
+    };
+    console.log("Send mqtt:connectReply");
+    mywindow.webContents.send("mqtt:connectReply", param);
+  });
+  client.on("message", (topic, payload) => {
+    console.log("Received Message:", topic, payload.toString());
+    var obj = JSON.parse(payload.toString());
+    lock.acquire("hmap", () => {
+      var hobj = hmap2.get(obj.TimeStamp);
+      if (hobj !== void 0) {
+        hobj.data = payload.toString();
+        hobj.stat = 1;
+        hmap2.set(obj.TimeStamp, hobj);
+      }
+    }).then(function() {
+    });
+  });
+  electron.ipcMain.on("mqtt:publish", function(event, param) {
+    console.log("mqttclient(ipcMain) 接收到 mqtt:publish : " + JSON.stringify(param));
+    client.publish(param.topic, param.message, {
+      qos: 2,
+      retain: false
+    });
+  });
+  em.on("mqtt:publish", (param) => {
+    console.log("mqttclient(eventEmitter)  接收到 mqtt:publish : " + JSON.stringify(param));
+    client.publish(param.topic, param.message, {
+      qos: 2,
+      retain: false
+    });
+  });
+}
+function cmsHttpRequest(mywindow, hmap2) {
+  electron.ipcMain.on("cms:getMasterDeviceSN", function(event, param) {
+    console.log("cmsHttpRequest 接收到 cms:getMasterDeviceSN : " + JSON.stringify(param));
+    var url;
+    if (param.data.cid.slice(0, 6) == "886235")
+      url = "http://intercom.nxt.tw:8006";
+    else
+      url = "http://aws.gigatech.tw:8006";
+    axios.get(url + "/Common/CloudCMS/devices/devicelist.ashx?CID=" + param.data.cid).then((res) => {
+      if (res.status == 200 && res.data.success) {
+        res.data.data.every((element) => {
+          console.log(element);
+          var data = element.split(";");
+          if (data.length > 3) {
+            if (data[2] === "00000000-1") {
+              console.log("Master Device SN : " + data[0]);
+              return false;
+            }
+          }
+          return true;
+        });
+      }
+    });
+  });
+  electron.ipcMain.on("cms:loginVerify", function(event, param) {
+    console.log("cmsHttpRequest 接收到 cms:loginVerify : " + JSON.stringify(param));
+    setImmediate((param2, event2, hmap3, mywindow2) => {
+      em.emit("loginverify:Step1", param2, event2, hmap3, mywindow2);
+    }, param, event, hmap2, mywindow);
+  });
+}
+em.on("convertStep1", (param, num) => {
+  console.log("convertStep1...." + param.cid + " , " + param.userID + " , " + param.passwd);
+  console.log(num);
+});
+em.on("loginverify:Step1", (param, event, hmap2, mywindow) => {
+  var url;
+  if (param.data.cid.slice(0, 6) == "886235")
+    url = "http://intercom.nxt.tw:8006";
+  else
+    url = "http://aws.gigatech.tw:8006";
+  axios.get(url + "/Common/CloudCMS/devices/devicelist.ashx?CID=" + param.data.cid).then((res) => {
+    if (res.status == 200 && res.data.success) {
+      res.data.data.every((element) => {
+        console.log(element);
+        var data = element.split(";");
+        if (data.length > 3) {
+          if (data[2] === "00000000-1") {
+            console.log("Master Device SN : " + data[0]);
+            dayjs.extend(utc);
+            const ts = dayjs().utc().format("YYYY/MM/DD_HH:mm:ss").toString();
+            var querydata = {
+              topic: data[0],
+              message: '{"action":"mqttqueryMobileList","data":{"Command":"CID=' + param.data.cid + '&ID=00000000","SerialNo":"' + sub_topic1 + '","TimeStamp":"' + ts + '","Token":"FFFFFGIGATECH0529FFFFF"}}'
+            };
+            var cb_param = {
+              stat: 0,
+              data: ""
+            };
+            hmap2.set(ts, cb_param);
+            client.publish(querydata.topic, querydata.message, {
+              qos: 2,
+              retain: false
+            });
+            var inparam = {
+              ts,
+              retrycnt: 0,
+              cid: param.data.cid,
+              userID: param.data.userID,
+              vpasswd: param.data.vpasswd,
+              passwd: "",
+              topic: querydata.topic
+            };
+            var chkflg = setInterval(function(inparam2) {
+              lock.acquire("hmap", () => {
+                var hobj = hmap2.get(inparam2.ts);
+                if (hobj !== void 0) {
+                  if (hobj.stat == 1) {
+                    clearInterval(chkflg);
+                    var dobj = JSON.parse(hobj.data);
+                    console.log("===>>>" + dobj.data[0].Password);
+                    inparam2.passwd = dobj.data[0].Password;
+                    hmap2.delete(inparam2.ts);
+                    setImmediate((inparam3, event2, hmap3, mywindow2) => {
+                      em.emit("loginverify:Step2", inparam3, event2, hmap3, mywindow2);
+                    }, inparam2, event, hmap2, mywindow);
+                  } else {
+                    if (inparam2.retrycnt > 50) {
+                      clearInterval(chkflg);
+                      hmap2.delete(inparam2.ts);
+                      var lparam2 = {
+                        action: "loginVerifyReply",
+                        data: {
+                          code: 404,
+                          token: ""
+                        }
+                      };
+                      setImmediate((lparam3, event2, hmap3, mywindow2) => {
+                        em.emit("loginverify:Step3", lparam3, event2, hmap3, mywindow2);
+                      }, lparam2, event, hmap2, mywindow);
+                    } else
+                      inparam2.retrycnt++;
+                  }
+                } else {
+                  clearInterval(chkflg);
+                }
+              }).then(function() {
+              });
+            }, 100, inparam);
+            return false;
+          }
+        }
+        return true;
+      });
+    } else {
+      var lparam = {
+        action: "loginVerifyReply",
+        data: {
+          code: 404,
+          token: ""
+        }
+      };
+      setImmediate((lparam2, event2, hmap3, mywindow2) => {
+        em.emit("loginverify:Step3", lparam2, event2, hmap3, mywindow2);
+      }, lparam, event, hmap2, mywindow);
+    }
+  });
+});
+em.on("loginverify:Step2", (param, event, hmap2, mywindow) => {
+  console.log("loginverify:Step2 -> " + param.cid + " , " + param.userID + " , " + param.passwd);
+  dayjs.extend(utc);
+  const ts = dayjs().utc().format("YYYY/MM/DD_HH:mm:ss").toString();
+  var querydata = {
+    topic: param.topic,
+    message: '{"action":"mqttverifyRemoteKeyAccount","data":{"Command":"User=' + param.userID + "&Account=" + param.cid + "_" + param.userID + "&PassWord=" + param.passwd + "&WebPassword=" + param.vpasswd + '","SerialNo":"' + sub_topic1 + '","TimeStamp":"' + ts + '","Token":"FFFFFGIGATECH0529FFFFF"}}'
+  };
+  var cb_param = {
+    stat: 0,
+    data: ""
+  };
+  hmap2.set(ts, cb_param);
+  client.publish(querydata.topic, querydata.message, {
+    qos: 2,
+    retain: false
+  });
+  var inparam = {
+    ts,
+    retrycnt: 0,
+    cid: param.cid,
+    userID: param.userID,
+    vpasswd: param.vpasswd,
+    passwd: param.passwd,
+    topic: param.topic
+  };
+  var chkflg = setInterval(function(inparam2) {
+    lock.acquire("hmap", () => {
+      var hobj = hmap2.get(inparam2.ts);
+      if (hobj !== void 0) {
+        if (hobj.stat == 1) {
+          clearInterval(chkflg);
+          console.log(hobj.data);
+          var dobj = JSON.parse(hobj.data);
+          hmap2.delete(inparam2.ts);
+          var lparam = {
+            action: "loginVerifyReply",
+            data: {
+              code: 0,
+              token: ""
+            }
+          };
+          if (dobj.success && dobj.data.code == 200) {
+            lparam.data.code = dobj.data.code;
+            lparam.data.token = dobj.data.token;
+          } else {
+            lparam.data.code = dobj.data.code;
+          }
+          setImmediate((lparam2, event2, hmap3, mywindow2) => {
+            em.emit("loginverify:Step3", lparam2, event2, hmap3, mywindow2);
+          }, lparam, event, hmap2, mywindow);
+        } else {
+          if (inparam2.retrycnt > 50) {
+            clearInterval(chkflg);
+            hmap2.delete(lparam.ts);
+            var lparam = {
+              action: "loginVerifyReply",
+              data: {
+                code: 404,
+                token: ""
+              }
+            };
+            setImmediate((lparam2, event2, hmap3, mywindow2) => {
+              em.emit("loginverify:Step3", lparam2, event2, hmap3, mywindow2);
+            }, lparam, event, hmap2, mywindow);
+          } else
+            inparam2.retrycnt++;
+        }
+      } else {
+        clearInterval(chkflg);
+      }
+    }).then(function() {
+    });
+  }, 100, inparam);
+});
+em.on("loginverify:Step3", (param, event, hmap2, mywindow) => {
+  console.log("loginverify:Step3 -> ", param);
+  mywindow.webContents.send("cms:loginVerifyReply", param);
+});
+const events = require("events");
+var varmap = new Array();
+function varSubProc(mywindow) {
+  console.log("varSubProc run.....");
+  var em2 = new events.EventEmitter();
+  em2.on("em:setDate", function(cmd) {
+    console.log(cmd);
+    var index = cmd.data.name + "-" + cmd.data.user;
+    if (cmd.data.type == "Number") {
+      varmap[index] = parseInt(cmd.data.value);
+    } else if (cmd.data.type == "Float") {
+      varmap[index] = parseFloat(cmd.data.value);
+    } else {
+      varmap[index] = cmd.data.value;
+    }
+  });
+  em2.on("em:getDate", function(cmd) {
+    console.log(cmd);
+  });
+  electron.ipcMain.on("ipc:setData", function(event, cmd) {
+    console.log(cmd);
+    var index = cmd.data.name + "-" + cmd.data.user;
+    if (cmd.data.type == "Number") {
+      varmap[index] = parseInt(cmd.data.value);
+    } else if (cmd.data.type == "Float") {
+      varmap[index] = parseFloat(cmd.data.value);
+    } else {
+      varmap[index] = cmd.data.value;
+    }
+  });
+  electron.ipcMain.on("ipc:getData", function(event, cmd) {
+    var retv;
+    console.log(cmd);
+    var index = cmd.data.name + "-" + cmd.data.user;
+    if (varmap[index] == null) {
+      if (cmd.data.type == "Number") {
+        retv = 0;
+      } else {
+        retv = "";
+      }
+    } else {
+      retv = varmap[index];
+    }
+    var param = {
+      success: true,
+      action: "getData",
+      data: {
+        name: cmd.data.name,
+        user: cmd.data.user,
+        type: cmd.data.type,
+        value: retv
+      }
+    };
+    event.sender.send("ipc:getDataReply", param);
+  });
+}
+const icon = path.join(__dirname, "../../resources/icon.png");
+const remote = require("@electron/remote/main");
+const HashMap = require("hashmap");
+remote.initialize();
+var hmap = new HashMap();
+function createWindow() {
+  const mainWindow = new electron.BrowserWindow({
+    width: 900,
+    height: 670,
+    show: false,
+    autoHideMenuBar: true,
+    ...process.platform === "linux" ? { icon } : {},
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false,
+      enableRemoteModule: true,
+      preload: path.join(__dirname, "../preload/index.js"),
+      sandbox: false
+    }
+  });
+  mainWindow.on("ready-to-show", () => {
+    mainWindow.show();
+  });
+  mainWindow.webContents.setWindowOpenHandler((details) => {
+    electron.shell.openExternal(details.url);
+    return { action: "deny" };
+  });
+  if (utils.is.dev && process.env["ELECTRON_RENDERER_URL"]) {
+    mainWindow.loadURL(process.env["ELECTRON_RENDERER_URL"]);
+  } else {
+    mainWindow.loadFile(path.join(__dirname, "../renderer/index.html"));
+  }
+  remote.enable(mainWindow.webContents);
+  varSubProc();
+  cmsHttpRequest(mainWindow, hmap);
+  electron.ipcMain.on("debug-log", (event, message) => {
+    console.log(message);
+  });
+  electron.ipcMain.on("renderer:cmd", (event, message) => {
+    if (message === "onMounted") {
+      setTimeout(() => {
+        mqttClient("iotmqtt.gigatech.tw:1883", mainWindow, hmap);
+      }, "1000");
+    }
+  });
+}
+electron.app.whenReady().then(() => {
+  utils.electronApp.setAppUserModelId("com.electron");
+  electron.app.on("browser-window-created", (_, window) => {
+    utils.optimizer.watchWindowShortcuts(window);
+  });
+  createWindow();
+  electron.app.on("activate", function() {
+    if (electron.BrowserWindow.getAllWindows().length === 0)
+      createWindow();
+  });
+});
+electron.app.on("window-all-closed", () => {
+  if (process.platform !== "darwin") {
+    electron.app.quit();
+  }
+});

out/preload/index.js

@@ -0,0 +1,15 @@
+"use strict";
+const electron = require("electron");
+const preload = require("@electron-toolkit/preload");
+const api = {};
+if (process.contextIsolated) {
+  try {
+    electron.contextBridge.exposeInMainWorld("electron", preload.electronAPI);
+    electron.contextBridge.exposeInMainWorld("api", api);
+  } catch (error) {
+    console.error(error);
+  }
+} else {
+  window.electron = preload.electronAPI;
+  window.api = api;
+}

out/renderer/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Electron</title>
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
+    />
+    <script type="module" crossorigin src="./assets/index-e95a9740.js"></script>
+    <link rel="stylesheet" href="./assets/index-90535596.css">
+  </head>
+
+  <body>
+    <div id="app"></div>
+    
+  </body>
+</html>

package.json

@@ -0,0 +1,48 @@
+{
+  "name": "reservation",
+  "version": "1.0.0",
+  "description": "An Electron application with Vue",
+  "main": "./out/main/index.js",
+  "author": "example.com",
+  "homepage": "https://www.electronjs.org",
+  "scripts": {
+    "format": "prettier --write .",
+    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
+    "start": "electron-vite preview",
+    "dev": "electron-vite dev",
+    "build": "electron-vite build",
+    "postinstall": "electron-builder install-app-deps",
+    "build:win": "npm run build && electron-builder --win --config",
+    "build:mac": "npm run build && electron-builder --mac --config",
+    "build:linux": "npm run build && electron-builder --linux --config"
+  },
+  "dependencies": {
+    "@electron-toolkit/preload": "^2.0.0",
+    "@electron-toolkit/utils": "^2.0.0",
+    "@electron/remote": "^2.0.12",
+    "async-lock": "^1.4.0",
+    "axios": "^1.6.2",
+    "dayjs": "^1.11.7",
+    "element-plus": "^2.3.14",
+    "hashmap": "^2.4.0",
+    "mqtt": "^5.0.3",
+    "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "vue-router": "^4.0.0-0"
+  },
+  "devDependencies": {
+    "@electron-toolkit/eslint-config": "^1.0.1",
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@vitejs/plugin-vue": "^4.3.1",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "electron": "^25.6.0",
+    "electron-builder": "^24.6.3",
+    "electron-vite": "^1.0.27",
+    "eslint": "^8.47.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "less": "^4.2.0",
+    "prettier": "^3.0.2",
+    "vite": "^4.4.9",
+    "vue": "^3.3.4"
+  }
+}

set_utf8.bat

@@ -0,0 +1 @@
+chcp 65001

src/main/index.js

@@ -0,0 +1,101 @@
+import { app, shell, BrowserWindow, ipcMain } from 'electron'
+import { join } from 'path'
+import { electronApp, optimizer, is } from '@electron-toolkit/utils'
+import { mqttClient, cmsHttpRequest } from './utils/comm'
+import { varSubProc } from './utils/varsub'
+import icon from '../../resources/icon.png?asset'
+const remote = require("@electron/remote/main")
+const HashMap = require('hashmap')
+
+remote.initialize()
+var hmap = new HashMap()
+
+function createWindow() {
+  // Create the browser window.
+  const mainWindow = new BrowserWindow({
+    width: 900,
+    height: 670,
+    show: false,
+    autoHideMenuBar: true,
+    ...(process.platform === 'linux' ? { icon } : {}),
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false,
+      enableRemoteModule: true,      
+      preload: join(__dirname, '../preload/index.js'),
+      sandbox: false
+    }
+  })
+
+  mainWindow.on('ready-to-show', () => {
+    mainWindow.show()
+  })
+
+  mainWindow.webContents.setWindowOpenHandler((details) => {
+    shell.openExternal(details.url)
+    return { action: 'deny' }
+  })
+
+  // HMR for renderer base on electron-vite cli.
+  // Load the remote URL for development or the local html file for production.
+  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
+  } else {
+    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
+  }
+  remote.enable(mainWindow.webContents)
+
+  //mainWindow.webContents.openDevTools()
+
+  varSubProc(mainWindow)
+  cmsHttpRequest(mainWindow, hmap)
+
+  ipcMain.on('debug-log', (event, message) => {
+      console.log(message)
+  })  
+
+  ipcMain.on('renderer:cmd', (event, message) => {
+      if (message==='onMounted') {
+          setTimeout(() => {
+              // console.log("Delayed for 3 second.");
+              mqttClient('iotmqtt.gigatech.tw:1883', mainWindow, hmap)
+          }, "1000");
+      }
+  })  
+
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.whenReady().then(() => {
+  // Set app user model id for windows
+  electronApp.setAppUserModelId('com.electron')
+
+  // Default open or close DevTools by F12 in development
+  // and ignore CommandOrControl + R in production.
+  // see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
+  app.on('browser-window-created', (_, window) => {
+    optimizer.watchWindowShortcuts(window)
+  })
+
+  createWindow()
+
+  app.on('activate', function () {
+    // On macOS it's common to re-create a window in the app when the
+    // dock icon is clicked and there are no other windows open.
+    if (BrowserWindow.getAllWindows().length === 0) createWindow()
+  })
+})
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+// In this file you can include the rest of your app"s specific main process
+// code. You can also put them in separate files and require them here.

src/main/utils/comm.js

@@ -0,0 +1,456 @@
+import { ipcMain } from 'electron'
+import axios from 'axios';
+const mqtt = require('mqtt')
+const events = require('events');
+const dayjs = require('dayjs')
+const utc = require('dayjs/plugin/utc')
+const AsyncLock = require('async-lock')
+
+var contentFolder
+var fwdir
+var client
+var timeoutID
+const sub_topic1 = '20005000A0001'
+
+var lock = new AsyncLock()
+var em=new events.EventEmitter();
+
+export function mqttClient(mqtt_address, mywindow, hmap) {
+    const clientId = 'mqttjs_giga' + Math.random().toString(16).substr(2, 8);
+    const host = 'mqtt://'+mqtt_address;
+
+    console.log('=======>>>> MQTT Client Start '+host);
+
+    const options = {
+        keepalive: 30,
+        clientId: clientId,
+        protocolId: 'MQTT',
+        protocolVersion: 4,
+        clean: true,
+        reconnectPeriod: 1000,
+        connectTimeout: 30 * 1000,
+        will: {
+            topic: 'WillMsg',
+            payload: 'Connection Closed abnormally..!',
+            qos: 0,
+            retain: false,
+        },
+        rejectUnauthorized: false,
+    } 
+    console.log('start connecting mqtt client....');
+    client = mqtt.connect(host, options);
+
+    client.on('error', (err) => {
+        console.log('mqtt Connection error: ', err)
+        client.end()
+    });
+
+    client.on('reconnect', () => {
+        console.error('MQTT reconnect')
+        // console.log('mqtt Reconnecting....')
+        // var param = {
+        //     success: true,
+        //     action: 'mqttconnect',
+        //     data: {
+        //         status: '1'
+        //     }
+        // }        
+
+        // console.log('Send mqtt:connectReply')
+        // mywindow.webContents.send('mqtt:connectReply', param)        
+    });
+      
+    client.on('connect', () => {
+        console.log('MQTT Client connected : ' + clientId + ' OK')
+        client.subscribe(sub_topic1, {
+            qos: 2,
+        })
+        var param = {
+            success: true,
+            action: 'mqttconnect',
+            data: {
+                status: '0'
+            }
+        }        
+
+        console.log('Send mqtt:connectReply')
+        mywindow.webContents.send('mqtt:connectReply', param)
+    });
+
+    // client.on('close', () => {
+    //     console.log('MQTT close');
+    // });
+
+    // client.on('disconnect', () => {
+    //     console.log('MQTT disconnect');
+    // });    
+
+    client.on('offline', () => {
+        console.log('MQTT offline');
+        var param = {
+            success: false,
+            action: 'mqttconnect',
+            data: {
+                status: '0'
+            }
+        }        
+
+        console.log('Send mqtt:connectReply')
+        mywindow.webContents.send('mqtt:connectReply', param)        
+    });    
+
+    // client.on('end', () => {
+    //     console.log('MQTT end');
+    // });   
+
+    client.on('message', (topic, payload) => {
+        console.log('Received Message:', topic, payload.toString())
+        var obj = JSON.parse(payload.toString());
+        //console.log(obj.TimeStamp)
+
+        lock.acquire('hmap', ()=>{
+            // return value or promise
+            //console.log('get hmap lock');
+            var hobj = hmap.get(obj.TimeStamp)
+            if (hobj!==undefined) {
+                hobj.data = payload.toString()
+                hobj.stat = 1
+                hmap.set(obj.TimeStamp, hobj)
+            }
+        }).then(function() {
+            // lock released
+            //console.log('get hmap lock released');
+        });
+
+    })
+
+    ipcMain.on('mqtt:publish', function(event, param) {
+        console.log('mqttclient(ipcMain) 接收到 mqtt:publish : ' + JSON.stringify(param))
+        client.publish(param.topic, param.message, {
+            qos: 2,
+            retain: false,
+        })        
+    })
+
+    
+    em.on ('mqtt:publish',(param) => {
+        console.log('mqttclient(eventEmitter)  接收到 mqtt:publish : ' + JSON.stringify(param))
+        client.publish(param.topic, param.message, {
+            qos: 2,
+            retain: false,
+        })
+    })
+
+}
+
+export function cmsHttpRequest(mywindow, hmap) {
+    ipcMain.on('cms:getMasterDeviceSN', function(event, param) {
+        console.log('cmsHttpRequest 接收到 cms:getMasterDeviceSN : ' + JSON.stringify(param))
+        var url
+        if (param.data.cid.slice(0,6)=='886235') url='http://intercom.nxt.tw:8006'
+        else url = 'http://aws.gigatech.tw:8006'
+        axios.get(url+'/Common/CloudCMS/devices/devicelist.ashx?CID='+param.data.cid)
+        .then(res => {
+            if (res.status==200 && res.data.success) {
+                //console.log(res.data.data)
+                res.data.data.every((element) => {
+                    console.log(element)
+                    var data = element.split(';')
+                    if (data.length > 3) {
+                        if (data[2]==='00000000-1') {
+                            console.log('Master Device SN : '+data[0])
+                            return false
+                        }
+                    }
+                    return true
+                })
+            }
+            else {
+
+            }
+        })
+    })
+
+    ipcMain.on('cms:loginVerify', function(event, param) {
+        console.log('cmsHttpRequest 接收到 cms:loginVerify : ' + JSON.stringify(param))
+        setImmediate((param, event, hmap, mywindow)=> {
+            em.emit('loginverify:Step1', param, event, hmap, mywindow);
+        }, param, event, hmap, mywindow);
+        // var url
+        // if (param.data.cid.slice(0,6)=='886235') url='http://intercom.nxt.tw:8006'
+        // else url = 'http://aws.gigatech.tw:8006'
+        // axios.get(url+'/Common/CloudCMS/devices/devicelist.ashx?CID='+param.data.cid)
+        // .then(res => {
+        //     if (res.status==200 && res.data.success) {
+        //         //console.log(res.data.data)
+        //         res.data.data.every((element) => {
+        //             console.log(element)
+        //             var data = element.split(';')
+        //             if (data.length > 3) {
+        //                 if (data[2]==='00000000-1') {
+        //                     console.log('Master Device SN : '+data[0])
+        //                     dayjs.extend(utc)
+        //                     const ts = dayjs().utc().format("YYYY/MM/DD_HH:mm:ss").toString()
+        //                     var querydata = {
+        //                         topic: data[0],
+        //                         message:'{"action":"mqttqueryMobileList","data":{"Command":"CID='+param.data.cid+'&ID=00000000","SerialNo":"'+sub_topic1+'","TimeStamp":"'+ts+'","Token":"FFFFFGIGATECH0529FFFFF"}}'
+        //                     }
+
+        //                     var cb_param = {
+        //                         stat: 0,
+        //                         data: ''
+        //                     }
+        //                     hmap.set(ts, cb_param)
+        //                     client.publish(querydata.topic, querydata.message, {
+        //                         qos: 2,
+        //                         retain: false,
+        //                     })   
+
+        //                     var inparam = {
+        //                         ts: ts,
+        //                         cid: param.data.cid,
+        //                         userID: param.data.userID,
+        //                         passwd: ''
+        //                     }
+        //                     var chkflg = setInterval(function (inparam) {
+        //                         lock.acquire('hmap', ()=>{
+        //                             // return value or promise
+        //                             //console.log('get hmap lock');
+        //                             var hobj = hmap.get(inparam.ts)
+        //                             //console.log(hobj)
+        //                             if (hobj!==undefined) {
+        //                                 if (hobj.stat == 1) {
+        //                                     clearInterval(chkflg)
+        //                                     var dobj = JSON.parse(hobj.data);
+        //                                     console.log('===>>>'+dobj.data[0].Password)
+        //                                     inparam.passwd = dobj.data[0].Password
+        //                                     setImmediate((inparam)=> {
+        //                                         em.emit('convertStep1', inparam, 123);
+        //                                     }, inparam);
+        //                                 }
+        //                             }
+        //                             else {
+        //                                 clearInterval(chkflg)
+        //                             }
+        //                         }).then(function() {
+        //                             // lock released
+        //                             //console.log('get hmap lock released');
+        //                         });                                
+        //                     }, 100, inparam)       
+        //                     return false
+        //                 }
+        //             }
+        //             return true
+        //         })
+        //     }
+        //     else {
+
+        //     }
+        // })        
+    })
+}    
+
+
+em.on('convertStep1', (param, num) => {
+    console.log('convertStep1....'+param.cid+' , '+param.userID+' , '+param.passwd)
+    console.log(num)
+})
+
+
+em.on('loginverify:Step1', (param, event, hmap, mywindow)=>{
+    var url
+    if (param.data.cid.slice(0,6)=='886235') url='http://intercom.nxt.tw:8006'
+    else url = 'http://aws.gigatech.tw:8006'
+    axios.get(url+'/Common/CloudCMS/devices/devicelist.ashx?CID='+param.data.cid)
+    .then(res => {
+        if (res.status==200 && res.data.success) {
+            //console.log(res.data.data)
+            res.data.data.every((element) => {
+                console.log(element)
+                var data = element.split(';')
+                if (data.length > 3) {
+                    if (data[2]==='00000000-1') {
+                        console.log('Master Device SN : '+data[0])
+                        dayjs.extend(utc)
+                        const ts = dayjs().utc().format("YYYY/MM/DD_HH:mm:ss").toString()
+                        var querydata = {
+                            topic: data[0],
+                            message:'{"action":"mqttqueryMobileList","data":{"Command":"CID='+param.data.cid+'&ID=00000000","SerialNo":"'+sub_topic1+'","TimeStamp":"'+ts+'","Token":"FFFFFGIGATECH0529FFFFF"}}'
+                        }
+
+                        var cb_param = {
+                            stat: 0,
+                            data: ''
+                        }
+                        hmap.set(ts, cb_param)
+                        client.publish(querydata.topic, querydata.message, {
+                            qos: 2,
+                            retain: false,
+                        })   
+
+                        var inparam = {
+                            ts: ts,
+                            retrycnt: 0,
+                            cid: param.data.cid,
+                            userID: param.data.userID,
+                            vpasswd: param.data.vpasswd,
+                            passwd: '',
+                            topic: querydata.topic,
+                        }
+                        var chkflg = setInterval(function (inparam) {
+                            lock.acquire('hmap', ()=>{
+                                // return value or promise
+                                //console.log('get hmap lock');
+                                var hobj = hmap.get(inparam.ts)
+                                //console.log(hobj)
+                                if (hobj!==undefined) {
+                                    if (hobj.stat == 1) {
+                                        clearInterval(chkflg)
+                                        var dobj = JSON.parse(hobj.data);
+                                        console.log('===>>>'+dobj.data[0].Password)
+                                        inparam.passwd = dobj.data[0].Password
+                                        hmap.delete(inparam.ts);
+                                        setImmediate((inparam, event, hmap, mywindow)=> {
+                                            em.emit('loginverify:Step2', inparam, event, hmap, mywindow);
+                                        }, inparam, event, hmap, mywindow);
+                                    }
+                                    else {
+                                        if (inparam.retrycnt>50) {
+                                            // 大於 5 Sec沒有回應
+                                            clearInterval(chkflg)
+                                            hmap.delete(inparam.ts);
+                                            var lparam = {
+                                                action: 'loginVerifyReply',
+                                                data: {
+                                                    code: 404,
+                                                    token: ''
+                                                }
+                                            }  
+                                            setImmediate((lparam, event, hmap, mywindow)=> {
+                                                em.emit('loginverify:Step3', lparam, event, hmap, mywindow);
+                                            }, lparam, event, hmap, mywindow);                                                
+                                        }
+                                        else inparam.retrycnt++
+                                    }
+                                }
+                                else {
+                                    clearInterval(chkflg)
+                                }
+                            }).then(function() {
+                                // lock released
+                                //console.log('get hmap lock released');
+                            });                                
+                        }, 100, inparam)       
+                        return false
+                    }
+                }
+                return true
+            })
+        }
+        else {
+            var lparam = {
+                action: 'loginVerifyReply',
+                data: {
+                    code: 404,
+                    token: ''
+                }
+            }  
+            setImmediate((lparam, event, hmap, mywindow)=> {
+                em.emit('loginverify:Step3', lparam, event, hmap, mywindow);
+            }, lparam, event, hmap, mywindow);  
+        }
+    })        
+})
+
+
+em.on('loginverify:Step2', (param, event, hmap, mywindow)=>{
+    //console.log('loginverify:Step2')
+    console.log('loginverify:Step2 -> '+param.cid+' , '+param.userID+' , '+param.passwd)
+    dayjs.extend(utc)
+    const ts = dayjs().utc().format("YYYY/MM/DD_HH:mm:ss").toString()
+    var querydata = {
+        topic: param.topic,
+        message:'{"action":"mqttverifyRemoteKeyAccount","data":{"Command":"User='+param.userID+'&Account='+param.cid+'_'+param.userID+'&PassWord='+param.passwd+'&WebPassword='+param.vpasswd+'","SerialNo":"'+sub_topic1+'","TimeStamp":"'+ts+'","Token":"FFFFFGIGATECH0529FFFFF"}}'
+    }
+
+    var cb_param = {
+        stat: 0,
+        data: ''
+    }    
+    hmap.set(ts, cb_param)
+    client.publish(querydata.topic, querydata.message, {
+        qos: 2,
+        retain: false,
+    })      
+    var inparam = {
+        ts: ts,
+        retrycnt: 0,
+        cid: param.cid,
+        userID: param.userID,
+        vpasswd: param.vpasswd,
+        passwd: param.passwd,
+        topic: param.topic,
+    }
+    //console.log(inparam)
+    var chkflg = setInterval(function (inparam) {
+        lock.acquire('hmap', ()=>{
+            var hobj = hmap.get(inparam.ts)
+            if (hobj!==undefined) {
+                if (hobj.stat == 1) {
+                    clearInterval(chkflg)
+                    console.log(hobj.data)
+                    var dobj = JSON.parse(hobj.data);
+                    hmap.delete(inparam.ts);
+                    var lparam = {
+                        action: 'loginVerifyReply',
+                        data: {
+                            code: 0,
+                            token: ''
+                        }
+                    }
+                    if (dobj.success && dobj.data.code==200) {
+                        //console.log(dobj.data.token)
+                        lparam.data.code = dobj.data.code
+                        lparam.data.token = dobj.data.token
+                    }
+                    else {
+                        lparam.data.code = dobj.data.code
+                    }
+                    setImmediate((lparam, event, hmap, mywindow)=> {
+                        em.emit('loginverify:Step3', lparam, event, hmap, mywindow);
+                    }, lparam, event, hmap, mywindow);
+                }
+                else {
+                    if (inparam.retrycnt>50) {
+                        // 大於 5 Sec沒有回應
+                        clearInterval(chkflg)
+                        hmap.delete(lparam.ts);
+                        var lparam = {
+                            action: 'loginVerifyReply',
+                            data: {
+                                code: 404,
+                                token: ''
+                            }
+                        }  
+                        setImmediate((lparam, event, hmap, mywindow)=> {
+                            em.emit('loginverify:Step3', lparam, event, hmap, mywindow);
+                        }, lparam, event, hmap, mywindow);                      
+                    }
+                    else inparam.retrycnt++
+                }
+            }
+            else {
+                clearInterval(chkflg)
+            }
+        }).then(function() {
+            // lock released
+            //console.log('get hmap lock released');
+        }); 
+    }, 100, inparam)
+})
+
+
+em.on('loginverify:Step3', (param, event, hmap, mywindow)=>{
+    console.log('loginverify:Step3 -> ', param)
+    mywindow.webContents.send('cms:loginVerifyReply', param)  
+})

src/main/utils/varsub.js

@@ -0,0 +1,71 @@
+import { ipcMain } from 'electron'
+const events = require('events');
+
+var varmap = new Array();
+
+export function varSubProc (mywindow) {
+    console.log('varSubProc run.....');
+    var em=new events.EventEmitter();
+
+
+    em.on('em:setDate',function(cmd){
+        console.log(cmd);
+        var index = cmd.data.name+'-'+cmd.data.user;
+        if (cmd.data.type=="Number") {
+            varmap[index] = parseInt(cmd.data.value);
+        }
+        else if (cmd.data.type=="Float") {
+            varmap[index] = parseFloat(cmd.data.value);
+        }
+        else {
+            varmap[index] = cmd.data.value;
+        }          
+    });
+
+    em.on('em:getDate',function(cmd){
+        console.log(cmd);
+    });    
+
+    ipcMain.on('ipc:setData', function(event, cmd) {
+        console.log(cmd);
+        //event.sender.send('asynchronous-reply', 'pong');
+        var index = cmd.data.name+'-'+cmd.data.user;
+        if (cmd.data.type=="Number") {
+            varmap[index] = parseInt(cmd.data.value);
+        }
+        else if (cmd.data.type=="Float") {
+            varmap[index] = parseFloat(cmd.data.value);
+        }
+        else {
+            varmap[index] = cmd.data.value;
+        }        
+    });
+
+    ipcMain.on('ipc:getData', function(event, cmd) {
+        var retv;
+        console.log(cmd);
+        var index = cmd.data.name+'-'+cmd.data.user;
+        if (varmap[index]==null) {
+            if (cmd.data.type=='Number') {
+                retv = 0;
+            }
+            else{
+                retv = '';
+            }
+        }
+        else {
+            retv = varmap[index];
+        }
+        var param = {
+            success: true,
+            action: 'getData',
+            data: {
+                name: cmd.data.name,
+                user: cmd.data.user,
+                type: cmd.data.type,
+                value: retv
+            }
+        }
+        event.sender.send('ipc:getDataReply', param);
+    });
+}

src/preload/index.js

@@ -0,0 +1,20 @@
+import { contextBridge } from 'electron'
+import { electronAPI } from '@electron-toolkit/preload'
+
+// Custom APIs for renderer
+const api = {}
+
+// Use `contextBridge` APIs to expose Electron APIs to
+// renderer only if context isolation is enabled, otherwise
+// just add to the DOM global.
+if (process.contextIsolated) {
+  try {
+    contextBridge.exposeInMainWorld('electron', electronAPI)
+    contextBridge.exposeInMainWorld('api', api)
+  } catch (error) {
+    console.error(error)
+  }
+} else {
+  window.electron = electronAPI
+  window.api = api
+}

src/renderer/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Electron</title>
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
+    />
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

src/renderer/src/App.vue

@@ -0,0 +1,16 @@
+<script setup>
+import BackGround from './components/BackGround.vue'
+//import Reserv from './components/ReservMain.vue'
+//import Login from './components/LoginPage.vue'
+</script>
+
+<template>
+  <back-ground></back-ground>
+  <!-- <Reserv></Reserv> -->
+  <!-- <Login></Login> -->
+  <router-view></router-view>
+</template>
+
+<style lang="less">
+//@import './assets/css/styles.less';
+</style>

src/renderer/src/assets/css/styles.less

@@ -0,0 +1,205 @@
+body {
+  display: flex;
+  flex-direction: column;
+  font-family:
+    Roboto,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Helvetica Neue',
+    'Segoe UI',
+    'Oxygen',
+    'Ubuntu',
+    'Cantarell',
+    'Open Sans',
+    sans-serif;
+  color: #86a5b1;
+  background-color: #2f3241;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+ul {
+  list-style: none;
+}
+
+code {
+  font-weight: 600;
+  padding: 3px 5px;
+  border-radius: 2px;
+  background-color: #26282e;
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    SF Mono,
+    Menlo,
+    Consolas,
+    Liberation Mono,
+    monospace;
+  font-size: 85%;
+}
+
+a {
+  color: #9feaf9;
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: none;
+  outline: none;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+}
+
+#app {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  max-width: 840px;
+  margin: 0 auto;
+  padding: 15px 30px 0 30px;
+}
+
+.versions {
+  margin: 0 auto;
+  float: none;
+  clear: both;
+  overflow: hidden;
+  font-family: 'Menlo', 'Lucida Console', monospace;
+  color: #c2f5ff;
+  line-height: 1;
+  transition: all 0.3s;
+
+  li {
+    display: block;
+    float: left;
+    border-right: 1px solid rgba(194, 245, 255, 0.4);
+    padding: 0 20px;
+    font-size: 13px;
+    opacity: 0.8;
+
+    &:last-child {
+      border: none;
+    }
+  }
+}
+
+.hero-logo {
+  margin-top: -0.4rem;
+  transition: all 0.3s;
+}
+
+@media (max-width: 840px) {
+  .versions {
+    display: none;
+  }
+
+  .hero-logo {
+    margin-top: -1.5rem;
+  }
+}
+
+.hero-text {
+  font-weight: 400;
+  color: #c2f5ff;
+  text-align: center;
+  margin-top: -0.5rem;
+  margin-bottom: 10px;
+}
+
+@media (max-width: 660px) {
+  .hero-logo {
+    display: none;
+  }
+
+  .hero-text {
+    margin-top: 20px;
+  }
+}
+
+.hero-tagline {
+  text-align: center;
+  margin-bottom: 14px;
+}
+
+.links {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 24px;
+  font-size: 18px;
+  font-weight: 500;
+
+  a {
+    font-weight: 500;
+  }
+
+  .link-item {
+    padding: 0 4px;
+  }
+}
+
+.features {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -6px;
+
+  .feature-item {
+    width: 33.33%;
+    box-sizing: border-box;
+    padding: 6px;
+  }
+
+  article {
+    background-color: rgba(194, 245, 255, 0.1);
+    border-radius: 8px;
+    box-sizing: border-box;
+    padding: 12px;
+    height: 100%;
+  }
+
+  span {
+    color: #d4e8ef;
+    word-break: break-all;
+  }
+
+  .title {
+    font-size: 17px;
+    font-weight: 500;
+    color: #c2f5ff;
+    line-height: 22px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .detail {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 22px;
+    margin-top: 6px;
+  }
+}
+
+@media (max-width: 660px) {
+  .features .feature-item {
+    width: 50%;
+  }
+}
+
+@media (max-width: 480px) {
+  .links {
+    flex-direction: column;
+    line-height: 32px;
+
+    .link-dot {
+      display: none;
+    }
+  }
+
+  .features .feature-item {
+    width: 100%;
+  }
+}

src/renderer/src/assets/icons.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <symbol id="electron" viewBox="0 0 900 300">
+    <g fill="none" fill-rule="evenodd">
+      <g class="hero-apps" style="fill: #71abb7;">
+        <path d="M15 138l-4.9-.64L8 133l-2.1 4.36L1 138l3.6 3.26-.93 4.74L8 143.67l4.33 2.33-.93-4.74z"></path>
+        <path d="M897.2 114.0912l-5.2 3.63v-2.72c0-.55-.45-1-1-1h-8c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h8c.55 0 1-.45 1-1v-2.72l5.2 3.63c.33.23.8 0 .8-.41v-10c0-.41-.47-.64-.8-.41z"></path>
+        <path d="M65.4 188.625h-1.6c.88 0 1.6-.7313 1.6-1.625v-1.625c0-.8937-.72-1.625-1.6-1.625h-1.6c-.88 0-1.6.7313-1.6 1.625V187c0 .8937.72 1.625 1.6 1.625h-1.6c-.88 0-1.6.7313-1.6 1.625v3.25h1.6v4.875c0 .8937.72 1.625 1.6 1.625h1.6c.88 0 1.6-.7313 1.6-1.625V193.5H67v-3.25c0-.8937-.72-1.625-1.6-1.625zm-3.2-3.25h1.6V187h-1.6v-1.625zm3.2 6.5h-1.6v6.5h-1.6v-6.5h-1.6v-1.625h4.8v1.625zm3.344-5.6875c0-3.2175-2.576-5.8337-5.744-5.8337-3.168 0-5.744 2.6162-5.744 5.8337 0 .455.048.8937.144 1.3162v3.2175c-.976-1.2512-1.6-2.8112-1.6-4.55 0-4.03 3.232-7.3125 7.2-7.3125s7.2 3.2825 7.2 7.3125c0 1.7225-.624 3.2988-1.6 4.55v-3.2175c.096-.4387.144-.8612.144-1.3162zm6.256 0c0 4.68-2.608 8.7425-6.4 10.7738v-1.7063c2.976-1.885 4.944-5.2325 4.944-9.0675 0-5.915-4.72-10.7087-10.544-10.7087-5.824 0-10.544 4.7937-10.544 10.7087 0 3.835 1.968 7.1825 4.944 9.0675v1.7063c-3.792-2.0313-6.4-6.0938-6.4-10.7738C51 179.46 56.376 174 63 174s12 5.46 12 12.1875z"></path>
+        <path d="M830.7143 142.3333c-.8643 0-1.5714.7125-1.5714 1.5834v3.1666c0 .871.707 1.5834 1.5713 1.5834h12.5714c.8643 0 1.5714-.7125 1.5714-1.5834v-3.1666c0-.871-.707-1.5834-1.5713-1.5834h-12.5714zm12.5714 2.771l-1.9643 1.979h-2.357L837 145.1043l-1.9643 1.979h-2.357l-1.9644-1.979v-1.1876h1.1786l1.964 1.979 1.9644-1.979h2.3572l1.9643 1.979 1.964-1.979h1.1787v1.1875zm-9.4286 5.1457h6.286v1.5833h-6.286V150.25zM837 136c-6.0657 0-11 4.6075-11 10.2917v7.125c0 .8708.707 1.5833 1.5714 1.5833h18.8572c.8643 0 1.5714-.7125 1.5714-1.5833v-7.125C848 140.6075 843.0657 136 837 136zm9.4286 17.4167h-18.8572v-7.125c0-4.8925 4.1486-8.851 9.4286-8.851 5.28 0 9.4286 3.9585 9.4286 8.851v7.125z"></path>
+        <path d="M75 91.8065V96h4.1935L90.376 84.8174l-4.1934-4.1935L75 91.8064zm4.1935 2.7957h-2.7957v-2.7957h1.398v1.3978h1.3977v1.398zM93.591 81.6024l-1.817 1.817-4.1935-4.1934 1.817-1.817c.5453-.5453 1.426-.5453 1.971 0l2.2226 2.2224c.5453.5452.5453 1.4258 0 1.971z"></path>
+        <path d="M797 187h4v4h-4v-4zm12-1v19c0 1.1-.9 2-2 2h-20c-1.1 0-2-.9-2-2v-24c0-1.1.9-2 2-2h15l7 7zm-2 1l-6-6h-14v22l6-10 4 8 4-4 6 6v-16z"></path>
+        <path d="M138 125c-6.62 0-12 5-12 11 0 9.04 12 21 12 21s12-11.96 12-21c0-6-5.38-11-12-11zm0 29.1c-3.72-4.06-10-12.22-10-18.1 0-4.96 4.5-9 10-9 2.68 0 5.22.96 7.12 2.72 1.84 1.72 2.88 3.94 2.88 6.28 0 5.88-6.28 14.04-10 18.1zm4-18.1c0 2.22-1.78 4-4 4-2.22 0-4-1.78-4-4 0-2.22 1.78-4 4-4 2.22 0 4 1.78 4 4z"></path>
+        <path d="M771 82h8v2h-8v-2zm0 6h8v-2h-8v2zm0 4h8v-2h-8v2zm22-10h-8v2h8v-2zm0 4h-8v2h8v-2zm0 4h-8v2h8v-2zm4-12v18c0 1.1-.9 2-2 2h-11l-2 2-2-2h-11c-1.1 0-2-.9-2-2V78c0-1.1.9-2 2-2h11l2 2 2-2h11c1.1 0 2 .9 2 2zm-16 1l-1-1h-11v18h12V79zm14-1h-11l-1 1v17h12V78z"></path>
+        <path d="M176 203h-24c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4v7l7-7h13c1.1 0 2-.9 2-2v-16c0-1.1-.9-2-2-2zm0 18h-14l-4 4v-4h-6v-16h24v16z"></path>
+        <path d="M673 88.921c0 2.18-.9 4.18-2.34 5.66l-1.34-1.34c1.1-1.12 1.78-2.62 1.78-4.32 0-1.7-.68-3.22-1.78-4.32l1.34-1.34c1.44 1.44 2.34 3.44 2.34 5.66zm-8.56-11.48l-7.44 7.44h-4c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h4l7.44 7.44c.94.94 2.56.28 2.56-1.06v-20.76c0-1.34-1.62-2-2.56-1.06zm11.88.16l-1.34 1.34c2.56 2.56 4.12 6.06 4.12 9.96 0 3.88-1.56 7.4-4.12 9.96l1.34 1.34c2.9-2.9 4.68-6.9 4.68-11.32 0-4.44-1.78-8.44-4.68-11.32v.04zm-2.82 2.82l-1.38 1.34c1.84 1.84 2.96 4.38 2.96 7.16 0 2.78-1.12 5.32-2.96 7.12l1.38 1.34c2.16-2.16 3.5-5.16 3.5-8.46 0-3.3-1.34-6.32-3.5-8.5z"></path>
+        <path d="M226 79h-16c0-1.1-.9-2-2-2h-8c-1.1 0-2 .9-2 2-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h28c1.1 0 2-.9 2-2V81c0-1.1-.9-2-2-2zm-18 4h-8v-2h8v2zm9 14c-3.88 0-7-3.12-7-7s3.12-7 7-7 7 3.12 7 7-3.12 7-7 7zm5-7c0 2.76-2.26 5-5 5s-5-2.26-5-5 2.26-5 5-5 5 2.26 5 5z"></path>
+        <path d="M725.8393 157h-15.6498c-1.1807 0-1.1807-.82-1.1807-2 0-1.18 0-2 1.1807-2h15.6298C727 153 727 153.82 727 155c0 1.18 0 2-1.1807 2h.02zm-11.6473-10c-1.1807 0-1.1807-.82-1.1807-2 0-1.18 0-2 1.1807-2h11.6273C727 143 727 143.82 727 145c0 1.18 0 2-1.1807 2H714.192zM695 146.82l2.8218-2.6 3.182 3.18 8.185-8.4 2.8218 2.82-11.0068 11-6.0038-6zM710.1895 163h15.6298C727 163 727 163.82 727 165c0 1.18 0 2-1.1807 2h-15.6298c-1.1807 0-1.1807-.82-1.1807-2 0-1.18 0-2 1.1807-2z"></path>
+        <path d="M223 152v24c0 1.65 1.35 3 3 3h36c1.65 0 3-1.35 3-3v-24c0-1.65-1.35-3-3-3h-36c-1.65 0-3 1.35-3 3zm39 0l-18 15-18-15h36zm-36 4.5l12 9-12 9v-18zm3 19.5l10.5-9 4.5 4.5 4.5-4.5 10.5 9h-30zm33-1.5l-12-9 12-9v18z"></path>
+        <path d="M648 182h-3v4.5c0 .84-.66 1.5-1.5 1.5h-6c-.84 0-1.5-.66-1.5-1.5V182h-9v4.5c0 .84-.66 1.5-1.5 1.5h-6c-.84 0-1.5-.66-1.5-1.5V182h-3c-1.65 0-3 1.35-3 3v33c0 1.65 1.35 3 3 3h33c1.65 0 3-1.35 3-3v-33c0-1.65-1.35-3-3-3zm0 36h-33v-27h33v27zm-24-33h-3v-6h3v6zm18 0h-3v-6h3v6zm-15 12h-3v-3h3v3zm6 0h-3v-3h3v3zm6 0h-3v-3h3v3zm6 0h-3v-3h3v3zm-24 6h-3v-3h3v3zm6 0h-3v-3h3v3zm6 0h-3v-3h3v3zm6 0h-3v-3h3v3zm6 0h-3v-3h3v3zm-24 6h-3v-3h3v3zm6 0h-3v-3h3v3zm6 0h-3v-3h3v3zm6 0h-3v-3h3v3zm6 0h-3v-3h3v3zm-24 6h-3v-3h3v3zm6 0h-3v-3h3v3zm6 0h-3v-3h3v3zm6 0h-3v-3h3v3z"></path>
+      </g>
+      <g class="hero-icons" style="fill: #c2f5ff;">
+        <path d="M441.1132 69.724c7.681 0 13.9075-6.207 13.9075-13.8636 0-7.6565-6.2266-13.8634-13.9075-13.8634-7.681 0-13.9076 6.207-13.9076 13.8634 0 7.6566 6.2266 13.8635 13.9076 13.8635zm0-5.7932c-4.4713 0-8.096-3.6132-8.096-8.0704 0-4.457 3.6247-8.0703 8.096-8.0703 4.4712 0 8.096 3.6133 8.096 8.0704 0 4.4572-3.6248 8.0704-8.096 8.0704z"></path>
+        <path d="M354.8995 220.2693c7.681 0 13.9075-6.207 13.9075-13.8635s-6.2266-13.8634-13.9075-13.8634c-7.681 0-13.9075 6.207-13.9075 13.8634 0 7.6566 6.2266 13.8635 13.9075 13.8635zm0-5.793c-4.4713 0-8.096-3.6133-8.096-8.0705 0-4.457 3.6247-8.0703 8.096-8.0703s8.096 3.6132 8.096 8.0703c0 4.4572-3.6247 8.0704-8.096 8.0704z"></path>
+        <path d="M541.0343 206.4058c0-7.6565-6.2266-13.8634-13.9075-13.8634-7.681 0-13.9075 6.207-13.9075 13.8634 0 7.6566 6.2266 13.8635 13.9075 13.8635 7.681 0 13.9075-6.207 13.9075-13.8635zm-5.8115 0c0 4.4572-3.6247 8.0704-8.096 8.0704s-8.096-3.6132-8.096-8.0704c0-4.457 3.6247-8.0703 8.096-8.0703s8.096 3.6132 8.096 8.0703z"></path>
+        <path d="M397.6943 214.5258c9.7012 27.0033 25.5723 43.629 43.419 43.629 13.0157 0 25.0578-8.8443 34.4482-24.4154.827-1.371.3822-3.1507-.9932-3.975-1.3755-.824-3.1607-.3808-3.9876.9902-8.439 13.9938-18.8052 21.6072-29.4675 21.6072-14.8247 0-28.9803-14.8288-37.9476-39.7892-.541-1.506-2.2044-2.2897-3.7153-1.7504-1.511.5394-2.297 2.1975-1.756 3.7036z"></path>
+        <path d="M514.124 163.4733c18.5545-21.85 25.033-43.826 16.122-59.2117-6.557-11.321-20.419-17.2982-38.841-17.537-1.6047-.021-2.9225 1.259-2.9434 2.8586-.0208 1.5996 1.263 2.9132 2.8678 2.934 16.5683.2148 28.5106 5.3642 33.8836 14.641 7.4018 12.7797 1.6243 32.3774-15.5247 52.5722-1.037 1.221-.8844 3.0487.3405 4.0822 1.2248 1.0336 3.0584.8817 4.0952-.3393z"></path>
+        <path d="M411.5672 88.457c-28.3373-5.1448-50.7424.24-59.672 15.6575-6.6635 11.505-4.7588 26.7585 4.6193 43.0637.7982 1.3878 2.574 1.8678 3.966 1.072 1.3923-.7956 1.874-2.5656 1.0756-3.9534-8.4477-14.688-10.0915-27.8524-4.628-37.2857 7.418-12.8074 27.403-17.6105 53.5978-12.8546 1.579.2866 3.092-.7568 3.3794-2.3307.2876-1.5738-.7592-3.082-2.338-3.3687z"></path>
+        <path d="M486.3075 209.2436c5.022-15.998 7.7194-34.453 7.7194-53.6842 0-47.9875-16.849-89.3545-40.8478-99.977-1.4667-.649-3.1837.0098-3.835 1.472-.6512 1.462.01 3.1735 1.4766 3.8227 21.404 9.474 37.3945 48.7337 37.3945 94.6824 0 18.6574-2.612 36.5297-7.454 51.954-.4794 1.5268.3736 3.1518 1.9052 3.6295s3.1617-.3727 3.641-1.8994z"></path>
+        <path d="M466.439 89.4215c-16.7763 3.583-34.6332 10.5886-51.7827 20.4585-42.434 24.4216-70.1147 60.4323-66.2703 86.5432.233 1.5828 1.709 2.6776 3.297 2.4453 1.5877-.2323 2.686-1.7037 2.453-3.2865-3.4135-23.1838 22.825-57.3183 63.426-80.685 16.6365-9.5746 33.9267-16.3578 50.0946-19.811 1.5692-.335 2.5687-1.8748 2.2325-3.439-.336-1.5642-1.8807-2.5606-3.45-2.2255z"></path>
+        <path d="M371.2508 166.997c11.458 12.5516 26.3438 24.3243 43.3203 34.0947 41.106 23.6572 84.866 29.9805 106.4328 15.3217 1.326-.9013 1.668-2.7033.7638-4.025-.904-1.3217-2.712-1.6626-4.0378-.7614-19.302 13.1195-60.871 7.1128-100.253-15.5523-16.469-9.4783-30.8834-20.8782-41.9277-32.9767-1.08-1.1832-2.9178-1.2695-4.1048-.1928-1.187 1.0766-1.2735 2.9086-.1934 4.0918z"></path>
+        <path d="M443.2374 165.3634c-5.432 1.17-10.7838-2.2712-11.9598-7.686-1.1714-5.415 2.2785-10.7498 7.7106-11.922 5.432-1.17 10.7838 2.2712 11.9598 7.686 1.1737 5.415-2.2785 10.7498-7.7106 11.922z"></path>
+      </g>
+    </g>
+  </symbol>
+</svg>

src/renderer/src/components/BackGround.vue

@@ -0,0 +1,54 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup>
+    import { ref, reactive, onMounted } from 'vue'
+    import { ElMessage, ElMessageBox } from 'element-plus'
+    import { useReservStore } from '../stores/reservdata'
+    const { ipcRenderer } = window.require('electron')
+    const { dialog } = require('@electron/remote')
+    const currentWindow = require('@electron/remote').getCurrentWindow()
+    const fs = require('fs')
+
+    console.log('BackGround run ......')
+
+    const reservstore = useReservStore()
+
+    onMounted (()=> {
+        console.log('onMounted...')
+        ipcRenderer.send('renderer:cmd', 'onMounted'); 
+    })
+
+    const DebugLog = (item) => {
+        ipcRenderer.send('debug-log',item)
+    }         
+
+    ipcRenderer.on('mqtt:connectReply',async (event, param) => {
+        DebugLog('ReservMain  接收到 mqtt:connectReply : ' + JSON.stringify(param))
+        console.log('ReservMain  接收到 mqtt:connectReply : ' + JSON.stringify(param))
+        if (param.action=='mqttconnect') {
+            if (param.success) {
+                if (!reservstore.mqttstat) {
+                    ElMessage({
+                    type: 'success',
+                    message: 'MQTT連線 成功',
+                    })
+                    reservstore.mqttstat = true 
+                }            
+            }
+            else {
+                if (reservstore.mqttstat) {
+                    ElMessage.error('MQTT連線 失敗')
+                    reservstore.mqttstat = false
+                }
+            }
+        }
+    })      
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/renderer/src/components/LoginPage.vue

@@ -0,0 +1,141 @@
+<template>
+    <el-container class="main-container">
+        <el-col :span="8">
+            <el-card class="card-wrapper">
+                <el-form>
+                    <h1>預約系統登錄</h1>
+                    <el-form-item label="Username">
+                        <el-input v-model="username" placeholder="Enter your username"></el-input>
+                    </el-form-item>
+                    <el-form-item label="Password">
+                        <el-input v-model="password" placeholder="Enter your password" type="password" show-password></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" :disabled="!reservstore.mqttstat||loginStat!=0" @click="login">Login</el-button>
+                    </el-form-item>     
+                    <el-form-item class="submit-form-item">
+                        <div id="chkbox">
+                            <el-checkbox v-model="isSave" label="保存設置" size="large"/>
+                        </div>                          
+                    </el-form-item>               
+                </el-form>
+            </el-card>
+        </el-col>        
+    </el-container>        
+</template>
+
+<script setup>
+    import { ref, reactive, onMounted, watch } from 'vue'
+    import { ElMessage, ElMessageBox } from 'element-plus'
+    const { ipcRenderer } = window.require('electron')
+    import { useRouter } from 'vue-router'
+    import { useReservStore } from '../stores/reservdata'
+    import { useSaveStore } from '../stores/savedata'
+    const dayjs = require('dayjs')
+    const utc = require('dayjs/plugin/utc')
+
+    //首先在setup中定义
+    const router = useRouter()
+    const reservstore = useReservStore()
+    const savestore = useSaveStore()
+
+    // const username = ref('886235000025_1')
+    const username = ref('')
+    const password = ref('')
+    const loginStat = ref(0)
+    const isSave = ref(false)
+
+    const sub_topic = '20005000A0001'
+
+
+    onMounted(() => {
+        console.log('=====>>>>>> '+savestore.saveData.isSave)
+        isSave.value = savestore.saveData.isSave
+        if (isSave.value) {
+            username.value = savestore.saveData.userName
+            password.value = savestore.saveData.passWord
+        }
+    })
+
+
+    watch(isSave, (newValue, oldValue) => {
+        console.log(newValue, oldValue)
+        savestore.saveData.isSave = isSave.value
+        if (!isSave.value) {
+            savestore.saveData.userName = ''
+            savestore.saveData.passWord = ''        
+        }
+    })
+
+    const login = () => {
+        if (isSave.value) {
+            savestore.saveData.userName = username.value
+            savestore.saveData.passWord = password.value
+        }        
+        console.log(reservstore.mqttstat)
+        dayjs.extend(utc)
+        const ts = dayjs().utc().format("YYYY/MM/DD_HH:mm:ss").toString()
+        // var cmd1 = {
+        //     //topic:'2500120010004',
+        //     //message:'{"action":"mqttgetConfig","data":{"configName":"PDV5703Condition","SerialNo":"'+sub_topic+'","TimeStamp":"'+ts+'","Token":"FFFFFGIGATECH0529FFFFF"}}'
+        //     topic:'886235000025',
+        //     message:'{"action":"mqtthpgetSystem","data":{"Command":"","SerialNo":"'+sub_topic+'","TimeStamp":"'+ts+'","Token":"FFFFFGIGATECH0529FFFFF"}}'
+        // }
+        // ipcRenderer.send('mqtt:publish', cmd1);
+        var data = username.value.split('_')
+        if (data.length==2) {
+            var cmd2 = {
+                action: 'loginVerify',
+                data: {
+                    cid: data[0],
+                    userID: data[1],
+                    vpasswd: password.value,
+                }
+            }
+            loginStat.value = 1
+            ipcRenderer.send('cms:loginVerify', cmd2);
+            //router.push('reserv')
+        }
+    }
+
+    ipcRenderer.on('cms:loginVerifyReply', (event, param) => {
+        DebugLog('LoginPage  接收到 cms:loginVerifyReply : ' + JSON.stringify(param))
+        if (param.data.code==200) {
+            ElMessage({
+                type: 'success',
+                message: '登錄 成功',
+            })
+            reservstore.mqttToken = param.data.token
+            loginStat.value = 2
+            router.push('reserv')
+        }
+        else {
+            ElMessage.error('登錄 失敗')
+            loginStat.value = 0
+        }
+    })
+
+    const DebugLog = (item) => {
+        ipcRenderer.send('debug-log',item)
+    }
+
+</script>
+
+<style lang="less" scoped>
+.custom-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 90vh;
+}
+
+.main-container {
+    display: flex;
+    // 水平置中 
+    justify-content: center;    
+    // 垂直置中
+    align-content: center;      
+    flex-wrap: wrap;
+    margin-top: 70px;
+}
+</style>

src/renderer/src/components/ReservMain.vue

@@ -0,0 +1,114 @@
+
+<template>
+    <div>
+        <el-container>
+            <el-header class="header"> 
+                <img  class="qrimage" src="../assets/img/qttitle.png">
+                <h2>預約 QR Code</h2>
+            </el-header>
+            <el-main class="classtable">
+                <el-table :show-header="false" :data="tableData" stripe style="width: 100%" size="large" border @cell-click="presshandle">
+                    <el-table-column prop="classlabel" label="className" align="center"/>
+                </el-table>                
+            </el-main>
+            <el-footer>{{reservstore.vertext}}</el-footer>
+        </el-container>        
+    </div>
+</template>
+
+<script setup>
+    import { ref, reactive, onMounted } from 'vue'
+    import { ElMessage, ElMessageBox } from 'element-plus'
+    import { useReservStore } from '../stores/reservdata'
+    const { ipcRenderer } = window.require('electron')
+    const { dialog } = require('@electron/remote')
+    const currentWindow = require('@electron/remote').getCurrentWindow()
+    const fs = require('fs')
+    
+    const reservstore = useReservStore()
+
+    const tableData = [
+        {index: 0, classlabel: '3500000'},
+        {index: 1, classlabel: '三合建設'},
+        {index: 2, classlabel: '3502100'},
+        {index: 3, classlabel: '3502200'},
+        {index: 4, classlabel: '353教室'},
+        {index: 5, classlabel: '竹林電子'},
+        {index: 6, classlabel: '大洋興業'},
+        {index: 7, classlabel: '3504000'},
+        {index: 8, classlabel: '3504200'},
+        {index: 9, classlabel: '3505000'},
+    ]
+
+
+    onMounted(() => {
+        DebugLog('MQTT Token : ' + reservstore.mqttToken)
+    })
+
+    const presshandle = (row,column,cell,event) => {
+        console.log(row)
+        DebugLog('Press row: '+ row.index + ' , Class : '+row.classlabel)
+    }
+
+
+    const btnLogin = async(e)=>{
+        console.log('btn press');
+        reservstore.increment()
+        var cmd = {
+            action: 'setData',
+            data: {
+                name: 'mqttstat',
+                user: '',
+                type: 'Number',
+                value: '12345'					
+            }
+        }
+        ipcRenderer.send('ipc:setData', cmd);
+        
+        var cmd1 = {
+            action: 'getData',
+            data: {
+                name: 'mqttstat',
+                user: '',
+                type: 'Number',				
+            }
+        }    
+        ipcRenderer.send('ipc:getData', cmd1);    
+    }   
+
+    const DebugLog = (item) => {
+        ipcRenderer.send('debug-log',item)
+    }      
+
+    ipcRenderer.on('ipc:getDataReply',async (event, param) => {
+        DebugLog('ReservMain  接收到 ipc:getDataReply : ' + JSON.stringify(param))
+    })
+
+
+</script>
+
+<style lang="less" scoped>
+    .header {
+        display: flex;
+        // 水平置中 
+        justify-content: center;    
+        // 垂直置中
+        align-content: center;      
+        flex-wrap: wrap;
+        background-color: rgb(211,211,211);
+        border-radius: 4px 4px 0px 0px;
+        .qrimage {
+            width : 40px;
+            height : 40px;
+            margin-top: 16px;
+            margin-right: 4px;
+        }
+    }
+    .classtable {
+        padding-top: 0px;
+        padding-bottom: 0px;
+        padding-left: 0px;
+        padding-right: 0px;
+    }
+
+</style>

src/renderer/src/components/Versions.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { reactive } from 'vue'
+
+const versions = reactive({ ...window.electron.process.versions })
+</script>
+
+<template>
+  <ul class="versions">
+    <li class="electron-version">Electron v{{ versions.electron }}</li>
+    <li class="chrome-version">Chromium v{{ versions.chrome }}</li>
+    <li class="node-version">Node v{{ versions.node }}</li>
+    <li class="v8-version">V8 v{{ versions.v8 }}</li>
+  </ul>
+</template>

src/renderer/src/main.js

@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+import { router } from './router'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import App from './App.vue'
+
+createApp(App).use(createPinia().use(piniaPluginPersistedstate)).use(router).use(ElementPlus).mount('#app')

src/renderer/src/router/index.js

@@ -0,0 +1,13 @@
+import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
+
+import Login from '../components/LoginPage.vue'
+import ReservMain from '../components/ReservMain.vue'
+
+export const router = createRouter({
+    //history: createWebHistory(),
+    history: createWebHashHistory(),
+    routes: [
+        {path: '/', name: 'home', component: Login},
+        {path: '/reserv', name: 'reserv', component: ReservMain}
+    ],
+});

src/renderer/src/stores/reservdata.js

@@ -0,0 +1,15 @@
+import { ref, reactive, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useReservStore = defineStore ('reservdata', ()=> {
+    const count = ref(0)
+    const mqttstat = ref(false)
+    const mqttToken = ref('')
+    const vertext = ref('v1.0.00-1')
+
+    const doubleCount = computed(()=>count * 2)
+    function increment() {
+        count.value++
+    }
+    return { count, mqttstat, vertext, doubleCount, increment }
+})

src/renderer/src/stores/savedata.js

@@ -0,0 +1,14 @@
+import { ref, reactive, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useSaveStore = defineStore ('savedata', ()=> {
+    const saveData = reactive({
+        isSave: 'false',
+        userName: '',
+        passWord: ''
+    })
+
+    return { saveData }
+},{
+    persist: true,
+})