diff --git a/.gitignore b/.gitignore
index 42bd71b..4f9e5dc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,4 @@
 node_modules
-dist
 out
 .DS_Store
 *.log*
diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
index 3240397..4f157be 100644
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@@ -2,14 +2,12 @@
   <code_scheme name="Project" version="173">
     <HTMLCodeStyleSettings>
       <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
-      <option name="HTML_QUOTE_STYLE" value="Single" />
       <option name="HTML_ENFORCE_QUOTES" value="true" />
     </HTMLCodeStyleSettings>
     <JSCodeStyleSettings version="0">
       <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
       <option name="FORCE_SEMICOLON_STYLE" value="true" />
       <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="USE_DOUBLE_QUOTES" value="false" />
       <option name="FORCE_QUOTE_STYlE" value="true" />
       <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
       <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000..3668dc8
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="FLOW" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/build/entitlements.mac.plist b/build/entitlements.mac.plist
deleted file mode 100644
index 38c887b..0000000
--- a/build/entitlements.mac.plist
+++ /dev/null
@@ -1,12 +0,0 @@
-<?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>
diff --git a/build/icon.icns b/build/icon.icns
deleted file mode 100644
index 28644aa..0000000
Binary files a/build/icon.icns and /dev/null differ
diff --git a/build/icon.ico b/build/icon.ico
deleted file mode 100644
index 72c391e..0000000
Binary files a/build/icon.ico and /dev/null differ
diff --git a/build/icon.png b/build/icon.png
deleted file mode 100644
index cf9e8b2..0000000
Binary files a/build/icon.png and /dev/null differ
diff --git a/electron-builder.yml b/electron-builder.yml
index ed8ccc0..0461944 100644
--- a/electron-builder.yml
+++ b/electron-builder.yml
@@ -1,44 +1,67 @@
+# 应用程序的唯一标识符
 appId: com.electron.app
-productName: gateway-ui
+# 应用程序的名称
+productName: 谷云工具
+# 定义构建资源和输出文件的目录
 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}'
+  - '!**/.vscode/*' # 排除VSCode配置文件
+  - '!src/*' # 排除源代码目录
+  - '!electron.vite.config.{js,ts,mjs,cjs}' # 排除Electron构建配置文件
+  - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}' # 排除开发和文档文件
+  - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}' # 排除环境和包管理配置文件
+# 定义需要解压的asar文件
 asarUnpack:
-  - resources/**
+  - resources/** # 解压资源目录下的所有文件
+# 针对Windows平台的配置
 win:
-  executableName: gateway-ui
+  icon: resources/icon.png # 应用程序图标的路径
+# 针对NSIS安装程序的配置
 nsis:
-  artifactName: ${name}-${version}-setup.${ext}
-  shortcutName: ${productName}
-  uninstallDisplayName: ${productName}
-  createDesktopShortcut: always
+  artifactName: ${productName}-${version}-setup.${ext} # 安装程序的文件名格式
+  shortcutName: ${productName} # 快捷方式的名称
+  uninstallDisplayName: ${productName} # 卸载程序显示的名称
+  createDesktopShortcut: always # 总是在桌面创建快捷方式
+  allowToChangeInstallationDirectory: true # 允许用户选择安装目录
+  oneClick: false # 设置为非一键安装
+  installerIcon: resources/icon.ico # 安装程序的图标
+  uninstallerIcon: resources/icon.ico # 卸载程序的图标
+  installerHeader: resources/icon.png # 安装程序头部的图像
+  installerHeaderIcon: resources/icon.png # 安装程序头部图标的路径
+# 针对macOS平台的配置
 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
+  entitlementsInherit: build/entitlements.mac.plist # 继承权限配置文件
+  extendInfo: # 添加macOS应用的元数据
+    - 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 # 是否进行苹果的公证
+  icon: resources/icon.png # 应用程序的图标路径
+  identity: null # 签名身份
+# 针对dmg安装包的配置
 dmg:
-  artifactName: ${name}-${version}.${ext}
+  artifactName: ${name}-${version}.${ext} # dmg文件的命名格式
+# 针对Linux平台的配置
 linux:
-  target:
+  target: # 目标包类型
     - AppImage
     - snap
     - deb
-  maintainer: electronjs.org
-  category: Utility
+  maintainer: electronjs.org # 维护者信息
+  category: Utility # 应用程序类别
+  icon: resources/icon.png # 应用程序图标路径
+# 针对AppImage包的配置
 appImage:
-  artifactName: ${name}-${version}.${ext}
+  artifactName: ${name}-${version}.${ext} # AppImage文件的命名格式
+# 是否在npm安装时重建asar包
 npmRebuild: false
+# 配置自动更新的信息
 publish:
-  provider: generic
-  url: https://example.com/auto-updates
+  provider: generic # 更新服务提供者
+  url: https://example.com/auto-updates # 更新信息的URL
+# 配置Electron下载的镜像地址
 electronDownload:
-  mirror: https://npmmirror.com/mirrors/electron/
+  mirror: https://npmmirror.com/mirrors/electron/ # Electron下载的镜像地址
diff --git a/package.json b/package.json
index 9bf03db..6ea79e5 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "gateway-ui",
+  "name": "gateway-app",
   "version": "1.0.0",
   "description": "An Electron application with Vue",
   "main": "./out/main/index.js",
@@ -21,6 +21,7 @@
     "@electron-toolkit/preload": "^3.0.1",
     "@electron-toolkit/utils": "^3.0.0",
     "axios": "^1.7.2",
+    "dayjs": "^1.11.11",
     "electron-updater": "^6.1.7",
     "element-plus": "^2.7.6",
     "pinia": "^2.1.7",
@@ -36,7 +37,9 @@
     "electron-vite": "^2.3.0",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.26.0",
+    "less": "^4.2.0",
     "prettier": "^3.3.2",
+    "sass": "^1.77.6",
     "vite": "^5.3.1",
     "vue": "^3.4.30"
   }
diff --git a/resources/icon.ico b/resources/icon.ico
new file mode 100644
index 0000000..d6be13c
Binary files /dev/null and b/resources/icon.ico differ
diff --git a/resources/icon.png b/resources/icon.png
index cf9e8b2..2967f12 100644
Binary files a/resources/icon.png and b/resources/icon.png differ
diff --git a/resources/plugin-test/config/config.yaml b/resources/plugin-test/config/config.yaml
new file mode 100644
index 0000000..fab3831
--- /dev/null
+++ b/resources/plugin-test/config/config.yaml
@@ -0,0 +1,35 @@
+server:
+  address:     ":8000"
+  openapiPath: "/api.json"
+  swaggerPath: "/swagger"
+
+logger:
+  level : "all"
+  stdout: true
+  path: "logs"
+
+
+# GRPC Server.
+grpc:
+  address: ""
+  name: "demo"
+  logPath: ""
+  logStdout: true
+  errorStack: true
+  errorLogEnabled: true
+  errorLogPattern: "error-{Ymd}.log"
+  accessLogEnabled: true
+  accessLogPattern: "access-{Ymd}.log"
+
+# Database.
+database:
+  logger:
+    level: "all"
+    stdout: true
+
+  default:
+    link: "mysql:root:12345678@tcp(127.0.0.1:3306)/test"
+    debug: true
+
+plugin:
+  path: "./plugins"
\ No newline at end of file
diff --git a/resources/plugin-test/plugins/gateway.exe b/resources/plugin-test/plugins/gateway.exe
new file mode 100644
index 0000000..36df104
Binary files /dev/null and b/resources/plugin-test/plugins/gateway.exe differ
diff --git a/resources/plugin-test/test_test_get b/resources/plugin-test/test_test_get
new file mode 100644
index 0000000..6823a22
--- /dev/null
+++ b/resources/plugin-test/test_test_get
@@ -0,0 +1,3 @@
+张三
+
+Written from plugin-test-grpc
\ No newline at end of file
diff --git a/src/main/index.js b/src/main/index.js
index 28f87f7..2ce4c67 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -1,19 +1,29 @@
-import { app, shell, BrowserWindow, ipcMain } from 'electron'
+import { app, shell, BrowserWindow, ipcMain, globalShortcut, dialog } from 'electron'
 import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
 
+app.commandLine.appendSwitch('disable-web-security');
 function createWindow() {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
-    width: 900,
-    height: 670,
+    width: 1100,
+    height: 700,
     show: false,
     autoHideMenuBar: true,
-    ...(process.platform === 'linux' ? { icon } : {}),
+    // ...(process.platform === 'linux' ? { icon } : {}),
+    icon,
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),
-      sandbox: false
+      sandbox: false,
+      nodeIntegration: true,
+      // 禁用同源策略，允许跨域请求
+      webSecurity: false,
+      contextIsolation: false,
+      csp: "default-src 'self'; connect-src 'self' http://127.0.0.1:8000 http://192.168.1.17:8000 ws://192.168.1.17:8000 ws://127.0.0.1:8000",
+      // 禁止build环境使用DevTool
+      // devTools: is.dev ? true : false
+      devTools: true
     }
   })
   //开启调试
@@ -26,7 +36,6 @@ function createWindow() {
     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']) {
@@ -34,42 +43,102 @@ function createWindow() {
   } else {
     mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
   }
+
+  // 设置DevTools快捷键
+  // 设置DevTools快捷键
+  globalShortcut.register('CommandOrControl+Shift+i', function () {
+    mainWindow.webContents.openDevTools()
+  })
+  return mainWindow
 }
 
-// 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')
+// 程序单例模式
+let myWindow = null
+const gotTheLock = app.requestSingleInstanceLock()
+if (!gotTheLock) {
+  // 如果已经有同样的该程序正在运行，则不启动
+  app.quit()
+} else {
+  // 如果检测到有同样的该程序正在试图启动...
+  app.on(
+    'second-instance',
+    (event, commandLine, workingDirectory, additionalData) => {
+      if (myWindow) {
+        // 弹出系统提示对话框
+        dialog.showMessageBox({
+          message: '此程序已经正在运行',
+        })
+        // 如果该程序窗口处于最小化状态，则恢复窗口
+        if (myWindow.isMinimized()) myWindow.restore()
+        // 将该程序窗口置为当前聚焦态
+        myWindow.focus()
+      }
+    }
+  )
 
-  // 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)
+  // 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(() => {
+
+    const { spawn } = require('child_process')
+    const fs = require('fs')
+    const path = require('path')
+
+    const logStream = fs.createWriteStream('app.log', { flags: 'a' }) // 日志文件
+    let exePath = path.resolve('./resources/app.asar.unpacked/resources/plugin-test')
+    if (process.env.NODE_ENV === 'development') {
+      exePath = path.resolve('./resources/plugin-test')
+    }
+
+    const child = spawn('./main.exe', [], { cwd: exePath, stdio: ['ignore', 'pipe', 'pipe'] })
+
+    child.stdout.on('data', (data) => {
+      console.log('stdout:', data.toString())
+      logStream.write(data)
+    })
+
+    child.stderr.on('data', (data) => {
+      console.error('stderr:', data.toString())
+      logStream.write(data)
+    })
+
+    child.on('close', (code) => {
+      console.log(`子进程已退出，退出码 ${code}`)
+      logStream.end()
+    })
+
+
+    // 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)
+    })
+
+    // IPC test
+    ipcMain.on('ping', () => console.log('pong'))
+
+    myWindow = 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()
+    })
   })
 
-  // IPC test
-  ipcMain.on('ping', () => console.log('pong'))
-
-  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()
+    }
   })
-})
-
-// 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.
diff --git a/src/preload/index.js b/src/preload/index.js
index 8d62cb9..77f3ef6 100644
--- a/src/preload/index.js
+++ b/src/preload/index.js
@@ -2,11 +2,13 @@ import { contextBridge } from 'electron'
 import { electronAPI } from '@electron-toolkit/preload'
 
 // Custom APIs for renderer
+// 自定义的主进程方法API
 const api = {}
 
 // Use `contextBridge` APIs to expose Electron APIs to
 // renderer only if context isolation is enabled, otherwise
 // just add to the DOM global.
+// 使用contextBridge将Electron API和自定义的主进程方法API暴露给渲染进程页面。
 if (process.contextIsolated) {
   try {
     contextBridge.exposeInMainWorld('electron', electronAPI)
diff --git a/src/renderer/index.html b/src/renderer/index.html
index f05fc87..a15912d 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -6,8 +6,9 @@
     <!-- 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'; img-src 'self' data:"
+      content="default-src 'self'; connect-src 'self' http://127.0.0.1:8000 http://192.168.1.17:8000 ws://192.168.1.17:8000 ws://127.0.0.1:8000; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
     />
+    <script src="/src/util/config.js"></script>
   </head>
 
   <body>
diff --git a/src/renderer/src/App.vue b/src/renderer/src/App.vue
index 0d20348..a4a8893 100644
--- a/src/renderer/src/App.vue
+++ b/src/renderer/src/App.vue
@@ -3,9 +3,23 @@ import { RouterView } from "vue-router"
 </script>
 
 <template>
-  <RouterView></RouterView>
+  <keep-alive :include="['switch', 'about', 'test']">
+    <router-view></router-view>
+  </keep-alive>
 </template>
 
-<script setup lang="ts">
+<style>
+::-webkit-scrollbar {
+  width: 5px;
+}
 
-</script>
\ No newline at end of file
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #ddd;
+}
+
+::-webkit-scrollbar-track{
+  width:5px;
+}
+</style>
diff --git a/src/renderer/src/assets/logo.png b/src/renderer/src/assets/logo.png
index 5793f1b..2967f12 100644
Binary files a/src/renderer/src/assets/logo.png and b/src/renderer/src/assets/logo.png differ
diff --git a/src/renderer/src/components/Aside.vue b/src/renderer/src/components/Aside.vue
index 8f5150f..78a549e 100644
--- a/src/renderer/src/components/Aside.vue
+++ b/src/renderer/src/components/Aside.vue
@@ -13,13 +13,13 @@ const settings = defineProps({
   <el-aside :width="settings.width">
     <el-scrollbar>
       <el-menu
-        :default-openeds="['1', '3']"
+        :default-openeds="['1']"
         :collapse="settings.collapse"
-        router="true"
+        :router="true"
       >
-        <el-menu-item index="/versions"><el-icon> <House /> </el-icon>首页</el-menu-item>
-        <el-menu-item index="/about"><el-icon> <Menu /> </el-icon>文章管理列表</el-menu-item>
-        <el-menu-item index="/test"><el-icon> <Menu /> </el-icon>测试</el-menu-item>
+        <el-menu-item index="/switch"><el-icon> <House /> </el-icon>断路器调试</el-menu-item>
+<!--        <el-menu-item index="/about"><el-icon> <Menu /> </el-icon>文章管理列表</el-menu-item>-->
+<!--        <el-menu-item index="/test"><el-icon> <Menu /> </el-icon>测试</el-menu-item>-->
       </el-menu>
     </el-scrollbar>
   </el-aside>
@@ -29,7 +29,22 @@ const settings = defineProps({
 .el-aside {
   height: 100vh;
   overflow: hidden;
-  box-shadow: var(--el-box-shadow-lighter);
+  border-right: 1px solid #e6e6e6;
+  background-color: #f6f6f6;
+  padding-top: 10px;
+}
+.el-menu{
+  background: #f6f6f6;
+}
+.el-menu-item{
+  padding: 0 10px;
+  border-radius: 10px;
+}
+.el-menu-item.is-active{
+  background: #c8cde4;
+  border-radius: 10px;
+  /*margin: 0 10px;*/
+  color: #0066cc;
 }
 
 .el-scrollbar {
diff --git a/src/renderer/src/components/Versions.vue b/src/renderer/src/components/Versions.vue
index 35136c0..0adc279 100644
--- a/src/renderer/src/components/Versions.vue
+++ b/src/renderer/src/components/Versions.vue
@@ -5,9 +5,5 @@ 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>
-  </ul>
+  view
 </template>
diff --git a/src/renderer/src/router/index.js b/src/renderer/src/router/index.js
index 3f8196c..3dfd0da 100644
--- a/src/renderer/src/router/index.js
+++ b/src/renderer/src/router/index.js
@@ -8,14 +8,14 @@ const router = createRouter({
       path: '/',
       name: 'home',
       component: HomeView,
-      redirect: {name: 'versions'},
+      redirect: {name: 'switch'},
       children:[
         {
-            path: 'versions',
-            name: 'versions',
-            component: () => import("@renderer/components/Versions.vue"),
+            path: 'switch',
+            name: 'switch',
+            component: () => import("@renderer/views/switch/index.vue"),
             meta: {
-                menu: 'versions',
+                menu: 'switch',
                 keepAlive: true,
             }
         },
diff --git a/src/renderer/src/util/config.js b/src/renderer/src/util/config.js
new file mode 100644
index 0000000..e6dd805
--- /dev/null
+++ b/src/renderer/src/util/config.js
@@ -0,0 +1,16 @@
+// // 手动配置的地址
+// window.config = {
+//   url: 'http://192.168.1.17:8000',
+//   wsUrl: 'ws://192.168.1.17:8000',
+// }
+
+// 手动配置的地址
+window.config = {
+  url: 'http://127.0.0.1:8000',
+  wsUrl: 'ws://127.0.0.1:8000',
+}
+
+export const config = {
+  url: 'http://127.0.0.1:8000',
+  wsUrl: 'ws://127.0.0.1:8000',
+}
diff --git a/src/renderer/src/util/socket.js b/src/renderer/src/util/socket.js
new file mode 100644
index 0000000..d18092f
--- /dev/null
+++ b/src/renderer/src/util/socket.js
@@ -0,0 +1,106 @@
+import { ElMessage as message } from 'element-plus'
+// import storage from 'store'
+import { config } from "@renderer/util/config.js"
+let receiveMessage = null;
+import { reactive } from 'vue';
+const socket = reactive({
+  websocket: null,
+  connectURL: config.wsUrl+'/ws/log',
+  // 开启标识
+  socket_open: false,
+  // 心跳timer
+  hearbeat_timer: null,
+  // 心跳发送频率
+  hearbeat_interval: 2 * 1000,
+  // 是否自动重连
+  is_reonnect: true,
+  // 重连次数
+  reconnect_count: 3,
+  // 已发起重连次数
+  reconnect_current: 1,
+  // 重连timer
+  reconnect_timer: null,
+  // 重连频率
+  reconnect_interval: 5 * 1000,
+  init: (overrideReceiveMessage) => {
+    if (overrideReceiveMessage) {
+      receiveMessage = overrideReceiveMessage;
+    }
+    if (!('WebSocket' in window)) {
+      message.warning('浏览器不支持WebSocket')
+      return null
+    }
+    socket.websocket = new WebSocket(socket.connectURL)
+    socket.websocket.onmessage = (e) => {
+      if (receiveMessage) {
+        receiveMessage(e)
+      }
+    }
+    socket.websocket.onclose = () => {
+      console.log("socket连接关闭----------------------")
+      socket.socket_open = false
+      // 需要重新连接
+      if (socket.is_reonnect) {
+        socket.reconnect_timer = setTimeout(() => {
+          // 超过重连次数
+          if (socket.reconnect_current > socket.reconnect_count) {
+            clearTimeout(socket.reconnect_timer)
+            socket.is_reonnect = false
+            return
+          }
+          console.log("socket重连次数：" + socket.reconnect_current)
+          // 记录重连次数
+          socket.reconnect_current++
+          socket.reconnect()
+        }, socket.reconnect_interval)
+      }
+    }
+    // 连接成功
+    socket.websocket.onopen = function () {
+      socket.socket_open = true
+      socket.is_reonnect = true
+      // 开启心跳
+      // socket.heartbeat()
+    }
+    // 连接发生错误
+    socket.websocket.onerror = function () { }
+  },
+  heartbeat: () => {
+    socket.hearbeat_timer && clearInterval(socket.hearbeat_timer)
+
+    socket.hearbeat_timer = setInterval(() => {
+      let data = {
+        // token: storage.get('token')
+      }
+      socket.send(data)
+    }, socket.hearbeat_interval)
+  },
+  send: (data, callback = null) => {
+    // 开启状态直接发送
+    if (socket.websocket.readyState === socket.websocket.OPEN) {
+      socket.websocket.send(JSON.stringify(data))
+      callback && callback()
+    } else {
+      clearInterval(socket.hearbeat_timer)
+      message({
+        type: 'warning',
+        message: 'socket链接已断开',
+        duration: 1000,
+      })
+    }
+  },
+  close: () => {
+    socket.is_reonnect = false
+    socket.websocket.close()
+  },
+  /**
+   * 重新连接
+   */
+  reconnect: () => {
+    if (socket.websocket && !socket.is_reonnect) {
+      socket.close()
+    }
+    socket.init(receiveMessage)
+  },
+})
+export default socket;
diff --git a/src/renderer/src/views/HomeView.vue b/src/renderer/src/views/HomeView.vue
index 8ca15e8..724c6d3 100644
--- a/src/renderer/src/views/HomeView.vue
+++ b/src/renderer/src/views/HomeView.vue
@@ -1,52 +1,24 @@
 <script setup>
-import { ref } from 'vue'
-
-
 // 组件注册
 import Header from '@renderer/components/Header.vue'
-
 import Aside from '@renderer/components/Aside.vue'
-
-
-
-const asideSettings = ref({
-    isCollapse:true,
-    width:'200'
-})
-
-// 给子组件绑定事件，通过子组件emit从而改变父组件的值
-const changeAside = ()=>{
-   asideSettings.value.isCollapse = !asideSettings.value.isCollapse
-   if(asideSettings.value.isCollapse){
-    asideSettings.value.width = "64"
-   }else{
-    asideSettings.value.width = "200"
-   }
-}
-
-
-
 </script>
 <template>
   <el-container direction="vertical" style="min-height: 100vh;min-width: 100vw;overflow: hidden;">
     <Header></Header>
     <el-container >
-      <Aside :width="200"></Aside>
+      <Aside width="120"></Aside>
       <el-main>
-        <RouterView/>
+        <router-view/>
       </el-main>
     </el-container>
   </el-container>
 </template>
-
-
-
 <style scoped>
 
 body{
   background-color: #eee;
   max-width: 100vw;
-  overflow: hidden;
 }
 
 .el-main {
@@ -54,6 +26,6 @@ body{
   padding: 0;
   height: 100vh;
   overflow-x: hidden;
+  background: #f6f6f6;
 }
-
 </style>
diff --git a/src/renderer/src/views/switch/index.vue b/src/renderer/src/views/switch/index.vue
new file mode 100644
index 0000000..6336db6
--- /dev/null
+++ b/src/renderer/src/views/switch/index.vue
@@ -0,0 +1,1049 @@
+<template>
+  <div id="switch-box">
+    <div class="switch-main">
+      <el-collapse v-model="activeFold" @change="foldChange">
+        <el-collapse-item title="Mqtt设置" name="1">
+          <el-form
+            ref="mqttFormRef"
+            :model="mqttForm"
+            status-icon
+            label-width="auto"
+            class="demo-mqttForm"
+            :rules="mqttRules"
+            style="padding: 20px; padding-bottom: 0"
+          >
+            <el-form-item label="Client ID" prop="clientId" required >
+              <el-input v-model="mqttForm.clientId" type="text" autocomplete="off"  :disabled="connectionState"/>
+            </el-form-item>
+            <el-form-item label="Host" prop="host" required>
+              <el-input v-model="mqttForm.host" type="text" autocomplete="off"  :disabled="connectionState"/>
+            </el-form-item>
+            <el-form-item label="Port" prop="port" required>
+              <el-input v-model="mqttForm.port" type="text" autocomplete="off"  :disabled="connectionState"/>
+            </el-form-item>
+            <el-form-item label="path" prop="path">
+              <el-input v-model="mqttForm.path" type="text" autocomplete="off"  :disabled="connectionState"/>
+            </el-form-item>
+            <el-form-item label="Username" prop="userName" required>
+              <el-input v-model="mqttForm.userName" type="text" autocomplete="off"  :disabled="connectionState"/>
+            </el-form-item>
+            <el-form-item label="Password" prop="passWord" required>
+              <el-input v-model="mqttForm.passWord" type="passWord" autocomplete="off"  :disabled="connectionState"/>
+            </el-form-item>
+            <el-form-item class="btn-box">
+              <el-button :disabled="!connectionState" type="danger" @click="disconnMqtt">断开</el-button>
+              <el-button :disabled="connectionState" @click="testMqtt(mqttFormRef)">测试</el-button>
+              <el-button :disabled="connectionState" type="primary" @click="runMqtt(mqttFormRef)">连接</el-button>
+            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+        <el-collapse-item title="设备信息" name="2">
+          <el-form
+            ref="gatewayFormRef"
+            :model="gatewayForm"
+            status-icon
+            label-width="auto"
+            class="demo-gatewayForm"
+            :rules="gatewayRules"
+            style="padding: 20px; padding-bottom: 0"
+          >
+            <el-form-item label="网关" prop="gateway" required>
+              <el-input v-model="gatewayForm.gateway" type="text" autocomplete="off" />
+            </el-form-item>
+            <el-form-item label="上行主题" prop="subscribeTopic" required>
+              <el-input v-model="gatewayForm.subscribeTopic" type="text" autocomplete="off" />
+            </el-form-item>
+            <el-form-item label="下行主题" prop="publishTopic" required>
+              <el-input v-model="gatewayForm.publishTopic" type="text" autocomplete="off" />
+            </el-form-item>
+            <el-form-item class="btn-box">
+              <el-button type="primary" @click="updateGateway(gatewayFormRef)">更新</el-button>
+            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+        <el-collapse-item title="属性操作" name="3">
+          <el-tabs type="border-card">
+            <el-tab-pane label="属性读取">
+              <el-form :model="attrReadForm" label-width="auto">
+                <el-row>
+                  <el-col :span="10">
+                    <el-form-item label="设备号">
+                      <el-input v-model="attrReadForm.deviceSN" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="10" class="text-center">
+                    <el-form-item label="属性">
+                      <el-select
+                        v-model="attrReadForm.attrName"
+                        multiple
+                        placeholder="选择属性"
+                        style="width: 240px"
+                        @change="attrReadChange"
+                      >
+                        <el-option
+                          v-for="(item, index) in attrList"
+                          :key="index"
+                          :label="item.name"
+                          :value="index"
+                        />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="4" style="text-align: right">
+                    <el-button type="primary" @click="addReadAttr">新增属性</el-button>
+                  </el-col>
+                </el-row>
+                <div class="attr-list">
+                  <el-row v-for="item in attrReadList" :key="item.id">
+                    <el-col :span="7">
+                      <el-form-item label="属性名">
+                        <el-input v-model="item.name" :disabled="item.disable" />
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="7">
+                      <el-form-item label="Addr">
+                        <el-input v-model="item.addr" />
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="7">
+                      <el-form-item label="Len">
+                        <el-input v-model="item.len" />
+                      </el-form-item>
+                    </el-col>
+                    <el-col v-if="!item.disable" :span="3" style="text-align: right">
+                      <el-button type="danger" @click="delReadAttr(item.id)">删除</el-button>
+                    </el-col>
+                  </el-row>
+                </div>
+                <el-form-item label="Data">
+                  <el-input v-model="attrReadTextrea" type="textarea" />
+                </el-form-item>
+                <el-form-item class="btn-box">
+                  <el-button type="primary" @click="readAttr(attrReadForm)">读取</el-button>
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
+            <el-tab-pane label="属性写入">
+              <el-form :model="attrWriteForm" label-width="auto">
+                <el-row>
+                  <el-col :span="10">
+                    <el-form-item label="设备号">
+                      <el-input v-model="attrWriteForm.deviceSN" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="10" class="text-center">
+                    <el-form-item label="属性">
+                      <el-select
+                        v-model="attrWriteForm.attrName"
+                        multiple
+                        placeholder="选择属性"
+                        style="width: 240px"
+                        @change="attrWriteChange"
+                      >
+                        <el-option
+                          v-for="(item, index) in attrList"
+                          :key="index"
+                          :label="item.name"
+                          :value="index"
+                        />
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="4" style="text-align: right">
+                    <el-button type="primary" @click="addWriteAttr">新增属性</el-button>
+                  </el-col>
+                </el-row>
+                <div class="attr-list">
+                  <el-row v-for="item in attrWriteList" :key="item.id">
+                    <el-col :span="5">
+                      <el-form-item label="属性名">
+                        <el-input v-model="item.name" :disabled="item.disable" />
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="5">
+                      <el-form-item label="Addr">
+                        <el-input v-model="item.addr" />
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="5">
+                      <el-form-item label="Len">
+                        <el-input v-model="item.len" />
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="5">
+                      <el-form-item label="data">
+                        <el-input v-model="item.data" />
+                      </el-form-item>
+                    </el-col>
+                    <el-col v-if="!item.disable" :span="3" style="text-align: right">
+                      <el-button type="danger" @click="delWriteAttr(item.id)">删除</el-button>
+                    </el-col>
+                  </el-row>
+                </div>
+                <el-form-item label="Data">
+                  <el-input v-model="attrWriteTextrea" type="textarea" />
+                </el-form-item>
+                <el-form-item class="btn-box">
+                  <el-button type="primary" @click="writeAttr(attrWriteForm)">写入</el-button>
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
+          </el-tabs>
+        </el-collapse-item>
+        <el-collapse-item title="功能操作" name="4">
+          <el-form :model="functionForm" label-width="auto" style="padding: 20px">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="设备号">
+                  <el-input v-model="functionForm.deviceSN" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12" class="text-center">
+                <el-form-item label="功能">
+                  <el-select
+                    v-model="functionForm.attrName"
+                    placeholder="选择功能"
+                    @change="functionChange"
+                  >
+                    <el-option
+                      v-for="(item, index) in functionList"
+                      :key="index"
+                      :label="item.name"
+                      :value="index"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <div v-if="functionForm.selectAttr.length > 0" class="attr-list">
+              <el-row>
+                <el-col :span="6">
+                  <el-form-item label="功能名">
+                    <el-input
+                      v-model="functionForm.selectAttr[0].name"
+                      :disabled="functionForm.selectAttr[0].disabled"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="Addr">
+                    <el-input v-model="functionForm.selectAttr[0].addr" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="Len">
+                    <el-input v-model="functionForm.selectAttr[0].len" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="data">
+                    <el-input v-model="functionForm.selectAttr[0].data" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+            <el-form-item label="Data">
+              <el-input v-model="functionTextrea" type="textarea" />
+            </el-form-item>
+            <el-form-item class="btn-box">
+              <el-button type="primary" @click="functionWrite(functionForm)">操作</el-button>
+            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <div class="log-box">
+      <div class="log-box-header">
+        <div class="log-box-title">日志</div>
+        <div class="log-box-operate">
+          <view class="log-box-operate-item">
+            <div>mqtt状态：</div>
+            <div v-if="connectionState" style="color: #00ff78;display:flex;alignItems:center">连接</div>
+            <div v-else  @click="runMqtt(mqttFormRef)" style="color: red;display:flex;alignItems:center">断连<el-icon><Refresh /></el-icon></div>
+          </view>
+          <view class="log-box-operate-item">
+            <div>日志状态：</div>
+            <div v-if="socketStatus" style="color: #00ff78;display:flex;alignItems:center">连接</div>
+            <div v-else  @click="initSocket" style="color: #ff0000;display:flex;alignItems:center">断连<el-icon><Refresh /></el-icon></div>
+          </view>
+          <view class="log-box-operate-item" @click="toggleIsScroll">
+            <el-tooltip
+              v-if="isScroll"
+              class="box-item"
+              effect="dark"
+              content="关闭滚动"
+              placement="bottom"
+            >
+              <el-icon><Unlock /></el-icon>
+            </el-tooltip>
+            <el-tooltip
+              v-else
+              class="box-item"
+              effect="dark"
+              content="开启滚动"
+              placement="bottom"
+            >
+              <el-icon><Lock /></el-icon>
+            </el-tooltip>
+          </view>
+          <view class="log-box-operate-item" @click="clearLog">
+            <el-icon><DeleteFilled /></el-icon>
+          </view>
+        </div>
+      </div>
+      <div class="log-box-main" id="log-box-main">
+        <div class="log-list">
+          <div v-for="(item, index) in logList" :key="index" class="log-item">
+            <p>{{ item.time }}</p>
+            <el-icon v-if="item.type == 'subscribe'"  style="color: #00ff78;font-weight: bold;margin-right: 8px"><Top /></el-icon>
+            <el-icon v-else-if="item.type == 'publish'" style="color: red;font-weight: bold;margin-right: 8px"><Bottom /></el-icon>
+            <el-icon v-else-if="item.type == 'system'" style="font-weight: bold;margin-right: 8px"><Message /></el-icon>
+            <p>{{item.msg}}</p>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              content="复制"
+              placement="bottom"
+            >
+              <el-icon style="font-weight: bold;cursor: pointer" @click="copyMsg(item.msg)"><DocumentCopy /></el-icon>
+            </el-tooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import axios from 'axios' // 引入axios
+import dayjs from 'dayjs';
+import { config } from "@renderer/util/config.js"
+
+import { reactive, ref, onMounted, computed, watch, onUnmounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import socket from '@renderer/util/socket.js'
+
+const activeFold = ref(['1'])
+const logList = ref([])
+//连接状态
+const connectionState = ref(false)
+
+const getGuid = () => {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    var r = (Math.random() * 16) | 0,
+      v = c == 'x' ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}
+const isScroll = ref(true)
+const mqttFormRef = ref()
+// const mqttForm = reactive({
+//   clientId: '',
+//   host: '',
+//   port: '',
+//   path: '',
+//   userName: '',
+//   passWord: '',
+// })
+const mqttForm = reactive({
+  clientId: 'mqtt_local',
+  host: '123.60.30.87',
+  port: '8017',
+  path: '',
+  userName: 'admin',
+  passWord: 'gy2024'
+})
+
+const mqttRules = reactive({
+  clientId: [{ required: true, message: 'clientId 不能为空', trigger: 'blur' }],
+  host: [{ required: true, message: 'host 不能为空', trigger: 'blur' }],
+  port: [{ required: true, message: 'port 不能为空', trigger: 'blur' }],
+  // path: [{ required: true, message: 'path 不能为空', trigger: 'blur' }],
+  userName: [{ required: true, message: 'userName 不能为空', trigger: 'blur' }],
+  passWord: [{ required: true, message: 'passWord 不能为空', trigger: 'blur' }]
+})
+
+const gatewayFormRef = ref()
+// const gatewayForm = reactive({
+//   gateway: '',
+//   subscribeTopic: '',
+//   publishTopic: ''
+// })
+const gatewayForm = reactive({
+  gateway: 'DF01a683a08cf140',
+  subscribeTopic: '/minternet/data',
+  publishTopic: '/minternet/DF01a683a08cf140'
+})
+const gatewayRules = reactive({
+  gateway: [{ required: true, message: '网关不能为空', trigger: 'blur' }],
+  subscribeTopic: [{ required: true, message: '上行主题不能为空', trigger: 'blur' }],
+  publishTopic: [{ required: true, message: '下行主题不能为空', trigger: 'blur' }]
+})
+
+
+// 设备属性
+const attrList = [
+  {
+    id: 1,
+    name: '芯片ID',
+    addr: '0',
+    len: '16',
+    data: ''
+  },
+  {
+    id: 2,
+    name: '设备序列号（SN）',
+    addr: '4',
+    len: '12',
+    data: ''
+  },
+  {
+    id: 3,
+    name: '产品主型号',
+    addr: '12',
+    len: '16',
+    data: ''
+  },
+  {
+    id: 4,
+    name: '产品次型号',
+    addr: '16',
+    len: '16',
+    data: ''
+  }
+]
+/* 属性读写 */
+const attrReadForm = reactive({
+  deviceSN: '',
+  attrName: [],
+  selectAttr: [],
+  addAttr: [],
+  textrea: ''
+})
+
+// 一个计算属性 ref
+const attrReadList = computed(() => {
+  let list = [...attrReadForm.selectAttr]
+  list.push(...attrReadForm.addAttr)
+  return list
+})
+
+const attrReadTextrea = computed(() => {
+  if (attrReadList.value.length > 0) {
+    let list = attrReadList.value.map((item) => {
+      return {
+        name: item.name,
+        addr: item.addr,
+        len: item.len
+      }
+    })
+    return JSON.stringify(list)
+  } else {
+    return '[]'
+  }
+})
+
+// 监听 attrReadList 的变化，以更新 textrea
+watch(
+  attrReadList,
+  () => {
+    attrReadForm.textrea = attrReadTextrea.value
+  },
+  { deep: true }
+)
+//属性写入
+const attrWriteForm = reactive({
+  deviceSN: '',
+  attrName: [],
+  selectAttr: [],
+  addAttr: []
+})
+
+// 一个计算属性 ref
+const attrWriteList = computed(() => {
+  let list = [...attrWriteForm.selectAttr]
+  list.push(...attrWriteForm.addAttr)
+  return list
+})
+
+const attrWriteTextrea = computed(() => {
+  if (attrWriteList.value.length > 0) {
+    let list = attrWriteList.value.map((item) => {
+      return {
+        name: item.name,
+        addr: item.addr,
+        len: item.len,
+        data: item.data
+      }
+    })
+    return JSON.stringify(list)
+  } else {
+    return '[]'
+  }
+})
+
+/*功能操作*/
+const functionList = [
+  {
+    id: 1,
+    name: '开闸',
+    addr: 10,
+    len: 2,
+    data: '00',
+    disabled: true
+  },
+  {
+    id: 2,
+    name: '合闸',
+    addr: 10,
+    len: 2,
+    data: '01',
+    disabled: true
+  },
+  {
+    id: 3,
+    name: '自定义',
+    addr: '',
+    len: '',
+    data: '',
+    disabled: false
+  }
+]
+
+const functionForm = reactive({
+  deviceSN: '',
+  attrName: null,
+  selectAttr: []
+})
+
+const functionTextrea = computed(() => {
+  if (functionForm.selectAttr.length > 0) {
+    let list = functionForm.selectAttr.map((item) => {
+      return {
+        name: item.name,
+        addr: item.addr,
+        len: item.len,
+        data: item.data
+      }
+    })
+    return JSON.stringify(list)
+  } else {
+    return '[]'
+  }
+})
+
+//折叠变化
+const foldChange = (val) => {
+  console.log(val)
+}
+
+/* mqtt设置 */
+//断开
+const disconnMqtt = () => {
+  axios
+    .get(config.url+'/mqtt/disconn', {
+      // 发起GET请求
+      params: {
+        clientId:mqttForm.clientId
+      }
+    })
+    .then((response) => {
+      // 成功响应后的处理
+      console.log(response) // 打印响应数据
+      if (response.data.code == 0) {
+        ElMessage.success('断开成功')
+        connectionState.value = false;
+      } else {
+        if(response.data.code == 60){
+          connectionState.value = false;
+        }
+        ElMessage.error(response.data.message)
+      }
+    })
+    .catch((error) => {
+      // 错误处理
+      console.error(error) // 打印错误信息
+      ElMessage.error(error)
+    })
+}
+
+//测试
+const testMqtt = (formEl) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    if (valid) {
+      axios
+        .get(config.url+'/mqtt/connTest', {
+          // 发起GET请求
+          params: mqttForm
+        })
+        .then((response) => {
+          // 成功响应后的处理
+          console.log(response) // 打印响应数据
+          if (response.data.code == 0) {
+            ElMessage.success('测试成功')
+          } else {
+            if(response.data.code == 60){
+              connectionState.value = false;
+            }
+            ElMessage.error(response.data.message)
+          }
+        })
+        .catch((error) => {
+          // 错误处理
+          console.error(error) // 打印错误信息
+          ElMessage.error(error)
+        })
+    } else {
+      console.log('error submit!')
+    }
+  })
+}
+//运行
+const runMqtt = (formEl) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    if (valid) {
+      axios
+        .get(config.url+'/mqtt/conn', {
+          // 发起GET请求
+          params: mqttForm
+        })
+        .then((response) => {
+          // 成功响应后的处理
+          console.log(response) // 打印响应数据
+          if (response.data.code == 0) {
+            ElMessage.success('连接成功')
+            connectionState.value = true;
+            activeFold.value = activeFold.value.filter(item => item !== '1')
+            if (!activeFold.value.includes('2')) {
+              // 如果没有，就在头部添加1
+              activeFold.value.unshift('2');
+            }
+          } else {
+            if(response.data.code == 60){
+              connectionState.value = false;
+            }
+            ElMessage.error(response.data.message)
+          }
+        })
+        .catch((error) => {
+          // 错误处理
+          console.error(error) // 打印错误信息
+          ElMessage.error(error)
+        })
+    } else {
+      console.log('error submit!')
+    }
+  })
+}
+
+//更新
+const updateGateway = (formEl) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    if (valid) {
+      console.log('submit!', gatewayForm)
+      axios
+        .get(config.url+'/updateListen', {
+          // 发起GET请求
+          params: gatewayForm
+        })
+        .then((response) => {
+          // 成功响应后的处理
+          console.log(response) // 打印响应数据
+          if (response.data.code == 0) {
+            ElMessage.success('更新成功')
+          } else {
+            if(response.data.code == 60){
+              connectionState.value = false;
+            }
+            ElMessage.error(response.data.message)
+          }
+        })
+        .catch((error) => {
+          // 错误处理
+          console.error(error) // 打印错误信息
+          ElMessage.error(error)
+        })
+    } else {
+      console.log('error submit!')
+    }
+  })
+}
+
+/*设备属性*/
+
+/*设备读取*/
+const attrReadChange = (selectedIndexs) => {
+  // 创建一个Set来存储已选择的属性名称
+  const selected = new Set(selectedIndexs.map((item) => attrList[item].name))
+  // 更新selectAttr，保留已选择的属性，移除未选择的属性
+  attrReadForm.selectAttr = attrReadForm.selectAttr.filter((attr) => selected.has(attr.name))
+  // 添加新选择的属性
+  attrList.forEach((attr) => {
+    if (selected.has(attr.name) && !attrReadForm.selectAttr.some((a) => a.name === attr.name)) {
+      attrReadForm.selectAttr.push({ ...attr, disable: true })
+    }
+  })
+}
+
+const addReadAttr = () => {
+  attrReadForm.addAttr.push({
+    id: getGuid(),
+    name: '',
+    addr: '',
+    len: '',
+    data: '',
+    disable: false
+  })
+}
+
+const delReadAttr = (id) => {
+  attrReadForm.addAttr.forEach((item, index) => {
+    if (item.id === id) {
+      attrReadForm.addAttr.splice(index, 1)
+    }
+  })
+}
+
+const readAttr = (from) => {
+  let flag = false
+  attrReadList.value.forEach((item) => {
+    if (!item.addr) {
+      flag = true
+    } else if (!item.len) {
+      flag = true
+    }
+  })
+  if (flag) {
+    ElMessage({
+      message: '请输入完整属性',
+      type: 'error'
+    })
+  } else if (!attrReadForm.deviceSN) {
+    ElMessage({
+      message: '请输入设备号',
+      type: 'error'
+    })
+  } else if (attrReadTextrea.value == '[]') {
+    ElMessage({
+      message: '请新增和选择属性',
+      type: 'error'
+    })
+  } else {
+    console.log('验证通过',JSON.parse(attrReadTextrea.value))
+    let params = {
+      deviceSN: attrReadForm.deviceSN,
+      data: JSON.parse(attrReadTextrea.value)
+    }
+    axios
+      .post(config.url+'/readParam', params)
+      .then((response) => {
+        // 成功响应后的处理
+        console.log(response) // 打印响应数据
+        if (response.data.code == 0) {
+          ElMessage.success('指令发送成功')
+        } else {
+          if(response.data.code == 60){
+            connectionState.value = false;
+          }
+          ElMessage.error(response.data.message)
+        }
+      })
+      .catch((error) => {
+        // 错误处理
+        console.error(error) // 打印错误信息
+        ElMessage.error(error)
+      })
+  }
+  console.log(from)
+}
+
+/*设备写入*/
+const attrWriteChange = (selectedIndexs) => {
+  // 创建一个Set来存储已选择的属性名称
+  const selected = new Set(selectedIndexs.map((item) => attrList[item].name))
+  // 更新selectAttr，保留已选择的属性，移除未选择的属性
+  attrWriteForm.selectAttr = attrWriteForm.selectAttr.filter((attr) => selected.has(attr.name))
+  // 添加新选择的属性
+  attrList.forEach((attr) => {
+    if (selected.has(attr.name) && !attrWriteForm.selectAttr.some((a) => a.name === attr.name)) {
+      attrWriteForm.selectAttr.push({ ...attr, disable: true })
+    }
+  })
+}
+
+const addWriteAttr = () => {
+  attrWriteForm.addAttr.push({
+    id: getGuid(),
+    name: '',
+    addr: '',
+    len: '',
+    data: '',
+    disable: false
+  })
+}
+
+const delWriteAttr = (id) => {
+  attrWriteForm.addAttr.forEach((item, index) => {
+    if (item.id === id) {
+      attrWriteForm.addAttr.splice(index, 1)
+    }
+  })
+}
+
+const writeAttr = (from) => {
+  let flag = false
+  attrWriteList.value.forEach((item) => {
+    if (!item.addr) {
+      flag = true
+    } else if (!item.len) {
+      flag = true
+    } else if (!item.data) {
+      flag = true
+    }
+  })
+  if (flag) {
+    ElMessage({
+      message: '请输入完整属性',
+      type: 'error'
+    })
+  } else if (!attrWriteForm.deviceSN) {
+    ElMessage({
+      message: '请输入设备号',
+      type: 'error'
+    })
+  } else if (attrWriteTextrea.value == '[]') {
+    ElMessage({
+      message: '请新增和选择属性',
+      type: 'error'
+    })
+  } else {
+    console.log('验证通过')
+    let params = {
+      deviceSN: attrWriteForm.deviceSN,
+      data: JSON.parse(attrWriteTextrea.value)
+    }
+    axios
+      .post(config.url+'/writeParam', params)
+      .then((response) => {
+        // 成功响应后的处理
+        if (response.data.code == 0) {
+          ElMessage.success('指令发送成功')
+        } else {
+          if(response.data.code == 60){
+            connectionState.value = false;
+          }
+          ElMessage.error(response.data.message)
+        }
+      })
+      .catch((error) => {
+        // 错误处理
+        console.error(error) // 打印错误信息
+        ElMessage.error(error)
+      })
+  }
+  console.log(from)
+}
+
+/*功能操作*/
+const functionChange = (index) => {
+  functionForm.selectAttr = [functionList[index]]
+}
+
+const functionWrite = (from) => {
+  let data = functionForm.selectAttr[0]
+
+  if (!functionForm.deviceSN) {
+    ElMessage({
+      message: '请输入设备号',
+      type: 'error'
+    })
+  } else if (functionTextrea.value == '[]') {
+    ElMessage({
+      message: '请新增和选择属性',
+      type: 'error'
+    })
+  } else if (!data.addr) {
+    ElMessage({
+      message: '请输入addr',
+      type: 'error'
+    })
+  } else if (!data.len) {
+    ElMessage({
+      message: '请输入len',
+      type: 'error'
+    })
+  } else if (!data.data) {
+    ElMessage({
+      message: '请输入data',
+      type: 'error'
+    })
+  } else {
+    console.log('验证通过',functionForm.selectAttr)
+    let params = {
+      deviceSN: attrReadForm.deviceSN,
+      data: functionForm.selectAttr
+    }
+    axios
+      .post(config.url+'/writeFunc',params)
+      .then((response) => {
+        // 成功响应后的处理
+        console.log(response) // 打印响应数据
+        if (response.data.code == 0) {
+          ElMessage.success('指令发送成功')
+        } else {
+          if(response.data.code == 60){
+            connectionState.value = false;
+          }
+          ElMessage.error(response.data.message)
+        }
+      })
+      .catch((error) => {
+        // 错误处理
+        console.error(error) // 打印错误信息
+        ElMessage.error(error)
+      })
+  }
+  console.log(from)
+}
+const clearLog = () => {
+  logList.value = []
+}
+
+const getSocketMeassage = (message) => {
+  let msg = JSON.parse(message.data);
+  if(msg.msgType != undefined){
+    logList.value.push({
+      time:dayjs().format('YYYY-MM-DD HH:mm:ss'),
+      msg: msg.data,
+      type: msg.msgType
+    })
+  }else{
+    logList.value.push({
+      time:dayjs().format('YYYY-MM-DD HH:mm:ss'),
+      msg,
+      type: null
+    })
+  }
+  if(isScroll.value){
+    setTimeout(()=>{
+      let div = document.querySelector('#log-box-main');
+      console.log("div.scrollHeight",div.scrollHeight)
+      div.scrollTop = div.scrollHeight;
+    },200)
+  }
+}
+
+const copyMsg = async (txt) => {
+  try {
+    // 将文本写入剪贴板
+    await navigator.clipboard.writeText(JSON.stringify(txt));
+    ElMessage.success('复制成功');
+  } catch (err) {
+    // 处理可能的错误，例如权限被拒绝
+    ElMessage.error('复制失败')
+  }
+};
+
+const toggleIsScroll = () => {
+  isScroll.value = !isScroll.value
+}
+
+const initSocket = () => {
+  socket.init(getSocketMeassage)
+}
+
+
+// socket连接状态
+const socketStatus = computed(() => {
+  return socket.socket_open;
+})
+
+// 生命周期钩子
+onMounted(() => {
+  initSocket()
+})
+
+onUnmounted(() => {
+  socket.close()
+})
+</script>
+
+<style scoped lang="less">
+/* 样式可以在这里定义 */
+#switch-box {
+  height: 100%;
+  position: relative;
+  .switch-main {
+    //padding: 10px;
+    height: calc(100% - 200px - 60px);
+    overflow-y: auto;
+  }
+
+  .log-box {
+    height: 200px;
+    background: #0066cc;
+    border: 1px solid #2d1ca9;
+    color: #fff;
+
+    .log-box-header {
+      height: 28px;
+      padding: 0 10px;
+      border-bottom: 1px solid #fff;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .log-box-header{
+        font-size: 18px;
+        font-weight: bold;
+        line-height: 28px;
+      }
+      .log-box-operate{
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        .log-box-operate-item{
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          margin-left: 15px;
+        }
+      }
+    }
+    .log-box-main {
+      padding: 10px;
+      height: 169px;
+      overflow-y: auto;
+      .log-item {
+        font-size: 13px;
+        user-select: text ;
+        //line-height: 18px;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        >p{
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+  /deep/.el-collapse-item__header {
+    background-color: #0066cc;
+    color: #fff;
+    font-size: 18px;
+    font-weight: bold;
+    text-indent: 10px;
+  }
+  /deep/.el-collapse-item__content {
+    padding-bottom: 0;
+  }
+  .btn-box {
+    /deep/.el-form-item__content {
+      justify-content: end;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/yarn.lock b/yarn.lock
index 85c9bff..b97d491 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -974,6 +974,14 @@ ansi-styles@^6.1.0:
   resolved "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
 
+anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 app-builder-bin@4.0.0:
   version "4.0.0"
   resolved "https://registry.npmmirror.com/app-builder-bin/-/app-builder-bin-4.0.0.tgz#1df8e654bd1395e4a319d82545c98667d7eed2f0"
@@ -1071,6 +1079,11 @@ base64-js@^1.3.1, base64-js@^1.5.1:
   resolved "https://registry.npmmirror.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
+binary-extensions@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
+  integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
+
 bluebird-lst@^1.0.9:
   version "1.0.9"
   resolved "https://registry.npmmirror.com/bluebird-lst/-/bluebird-lst-1.0.9.tgz#a64a0e4365658b9ab5fe875eb9dfb694189bb41c"
@@ -1108,6 +1121,13 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
+braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.npmmirror.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
 browserslist@^4.22.2:
   version "4.23.1"
   resolved "https://registry.npmmirror.com/browserslist/-/browserslist-4.23.1.tgz#ce4af0534b3d37db5c1a4ca98b9080f985041e96"
@@ -1221,6 +1241,21 @@ chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.6.0"
+  resolved "https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 chownr@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
@@ -1319,6 +1354,13 @@ convert-source-map@^2.0.0:
   resolved "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
   integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
+copy-anything@^2.0.1:
+  version "2.0.6"
+  resolved "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz#092454ea9584a7b7ad5573062b2a87f5900fc480"
+  integrity sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==
+  dependencies:
+    is-what "^3.14.1"
+
 core-util-is@1.0.2:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -1350,7 +1392,7 @@ csstype@^3.1.3:
   resolved "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
-dayjs@^1.11.3:
+dayjs@^1.11.11, dayjs@^1.11.3:
   version "1.11.11"
   resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.11.tgz#dfe0e9d54c5f8b68ccf8ca5f72ac603e7e5ed59e"
   integrity sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==
@@ -1595,6 +1637,13 @@ err-code@^2.0.2:
   resolved "https://registry.npmmirror.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
   integrity sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==
 
+errno@^0.1.1:
+  version "0.1.8"
+  resolved "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
+  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
+  dependencies:
+    prr "~1.0.1"
+
 es-define-property@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
@@ -1847,6 +1896,13 @@ filelist@^1.0.4:
   dependencies:
     minimatch "^5.0.1"
 
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.npmmirror.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
 find-up@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmmirror.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
@@ -1976,6 +2032,13 @@ glob-parent@^6.0.2:
   dependencies:
     is-glob "^4.0.3"
 
+glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob@^10.3.10:
   version "10.4.2"
   resolved "https://registry.npmmirror.com/glob/-/glob-10.4.2.tgz#bed6b95dade5c1f80b4434daced233aee76160e5"
@@ -2056,7 +2119,7 @@ got@^11.8.5:
     p-cancelable "^2.0.0"
     responselike "^2.0.0"
 
-graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   version "4.2.11"
   resolved "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -2145,7 +2208,7 @@ iconv-corefoundation@^1.1.7:
     cli-truncate "^2.1.0"
     node-addon-api "^1.6.3"
 
-iconv-lite@^0.6.2:
+iconv-lite@^0.6.2, iconv-lite@^0.6.3:
   version "0.6.3"
   resolved "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
   integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
@@ -2162,6 +2225,16 @@ ignore@^5.2.0:
   resolved "https://registry.npmmirror.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
   integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
 
+image-size@~0.5.0:
+  version "0.5.5"
+  resolved "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
+  integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
+
+immutable@^4.0.0:
+  version "4.3.6"
+  resolved "https://registry.npmmirror.com/immutable/-/immutable-4.3.6.tgz#6a05f7858213238e587fb83586ffa3b4b27f0447"
+  integrity sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==
+
 import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -2188,6 +2261,13 @@ inherits@2:
   resolved "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
 is-ci@^3.0.0:
   version "3.0.1"
   resolved "https://registry.npmmirror.com/is-ci/-/is-ci-3.0.1.tgz#db6ecbed1bd659c43dac0f45661e7674103d1867"
@@ -2205,18 +2285,28 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
-is-glob@^4.0.0, is-glob@^4.0.3:
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
   dependencies:
     is-extglob "^2.1.1"
 
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
 is-path-inside@^3.0.3:
   version "3.0.3"
   resolved "https://registry.npmmirror.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
+is-what@^3.14.1:
+  version "3.14.1"
+  resolved "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
+  integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
+
 isbinaryfile@^4.0.8:
   version "4.0.10"
   resolved "https://registry.npmmirror.com/isbinaryfile/-/isbinaryfile-4.0.10.tgz#0c5b5e30c2557a2f06febd37b7322946aaee42b3"
@@ -2321,6 +2411,23 @@ lazy-val@^1.0.4, lazy-val@^1.0.5:
   resolved "https://registry.npmmirror.com/lazy-val/-/lazy-val-1.0.5.tgz#6cf3b9f5bc31cee7ee3e369c0832b7583dcd923d"
   integrity sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q==
 
+less@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmmirror.com/less/-/less-4.2.0.tgz#cbefbfaa14a4cd388e2099b2b51f956e1465c450"
+  integrity sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==
+  dependencies:
+    copy-anything "^2.0.1"
+    parse-node-version "^1.0.1"
+    tslib "^2.3.0"
+  optionalDependencies:
+    errno "^0.1.1"
+    graceful-fs "^4.1.2"
+    image-size "~0.5.0"
+    make-dir "^2.1.0"
+    mime "^1.4.1"
+    needle "^3.1.0"
+    source-map "~0.6.0"
+
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.npmmirror.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -2397,6 +2504,14 @@ magic-string@^0.30.10:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
+make-dir@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
+  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
+  dependencies:
+    pify "^4.0.1"
+    semver "^5.6.0"
+
 matcher@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/matcher/-/matcher-3.0.0.tgz#bd9060f4c5b70aa8041ccc6f80368760994f30ca"
@@ -2421,6 +2536,11 @@ mime-types@^2.1.12:
   dependencies:
     mime-db "1.52.0"
 
+mime@^1.4.1:
+  version "1.6.0"
+  resolved "https://registry.npmmirror.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
 mime@^2.5.2:
   version "2.6.0"
   resolved "https://registry.npmmirror.com/mime/-/mime-2.6.0.tgz#a2a682a95cd4d0cb1d6257e28f83da7e35800367"
@@ -2507,6 +2627,14 @@ natural-compare@^1.4.0:
   resolved "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+needle@^3.1.0:
+  version "3.3.1"
+  resolved "https://registry.npmmirror.com/needle/-/needle-3.3.1.tgz#63f75aec580c2e77e209f3f324e2cdf3d29bd049"
+  integrity sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==
+  dependencies:
+    iconv-lite "^0.6.3"
+    sax "^1.2.4"
+
 node-addon-api@^1.6.3:
   version "1.7.2"
   resolved "https://registry.npmmirror.com/node-addon-api/-/node-addon-api-1.7.2.tgz#3df30b95720b53c24e59948b49532b662444f54d"
@@ -2517,6 +2645,11 @@ node-releases@^2.0.14:
   resolved "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
   integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
 
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
 normalize-url@^6.0.1:
   version "6.1.0"
   resolved "https://registry.npmmirror.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
@@ -2589,6 +2722,11 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse-node-version@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
+  integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
+
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -2622,6 +2760,16 @@ picocolors@^1.0.0, picocolors@^1.0.1:
   resolved "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
   integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
 
+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.3.1"
+  resolved "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+pify@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+
 pinia@^2.1.7:
   version "2.1.7"
   resolved "https://registry.npmmirror.com/pinia/-/pinia-2.1.7.tgz#4cf5420d9324ca00b7b4984d3fbf693222115bbc"
@@ -2691,6 +2839,11 @@ proxy-from-env@^1.1.0:
   resolved "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
   integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
 
+prr@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
+  integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
+
 pump@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
@@ -2726,6 +2879,13 @@ read-config-file@6.3.2:
     json5 "^2.2.0"
     lazy-val "^1.0.4"
 
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -2821,6 +2981,15 @@ sanitize-filename@^1.6.3:
   dependencies:
     truncate-utf8-bytes "^1.0.0"
 
+sass@^1.77.6:
+  version "1.77.6"
+  resolved "https://registry.npmmirror.com/sass/-/sass-1.77.6.tgz#898845c1348078c2e6d1b64f9ee06b3f8bd489e4"
+  integrity sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 sax@^1.2.4:
   version "1.4.1"
   resolved "https://registry.npmmirror.com/sax/-/sax-1.4.1.tgz#44cc8988377f126304d3b3fc1010c733b929ef0f"
@@ -2831,6 +3000,11 @@ semver-compare@^1.0.0:
   resolved "https://registry.npmmirror.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
   integrity sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==
 
+semver@^5.6.0:
+  version "5.7.2"
+  resolved "https://registry.npmmirror.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
+  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
+
 semver@^6.2.0, semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
@@ -2886,7 +3060,7 @@ smart-buffer@^4.0.2:
   resolved "https://registry.npmmirror.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
   integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
 
-source-map-js@^1.2.0:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
@@ -2899,7 +3073,7 @@ source-map-support@^0.5.19:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map@^0.6.0:
+source-map@^0.6.0, source-map@~0.6.0:
   version "0.6.1"
   resolved "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -3043,6 +3217,13 @@ to-fast-properties@^2.0.0:
   resolved "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
 
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
 truncate-utf8-bytes@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz#405923909592d56f78a5818434b0b78489ca5f2b"
@@ -3050,7 +3231,7 @@ truncate-utf8-bytes@^1.0.0:
   dependencies:
     utf8-byte-length "^1.0.1"
 
-tslib@^2.6.2:
+tslib@^2.3.0, tslib@^2.6.2:
   version "2.6.3"
   resolved "https://registry.npmmirror.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
   integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==