代码优化，增加 vueuse 库，页面布局调整

package.json

@@ -19,21 +19,21 @@
     "dependencies": {
         "@element-plus/icons-vue": "^0.2.4",
         "@tinymce/tinymce-vue": "^4.0.5",
+        "@vueuse/core": "^7.5.3",
+        "@vueuse/integrations": "^7.5.3",
         "axios": "^0.24.0",
         "dayjs": "^1.10.7",
-        "element-plus": "^1.3.0-beta.1",
+        "element-plus": "^1.3.0-beta.3",
         "hotkeys-js": "^3.8.7",
         "js-cookie": "^3.0.1",
         "mavon-editor": "^3.0.0-beta",
         "mitt": "^3.0.0",
         "mockjs": "^1.1.0",
         "naming-style": "^1.0.1",
-        "nprogress": "^0.2.0",
         "path-browserify": "^1.0.1",
         "path-to-regexp": "^6.2.0",
         "pinia": "^2.0.9",
         "qs": "^6.10.2",
-        "screenfull": "^6.0.0",
         "tinymce": "^5.10.2",
         "vue": "^3.2.26",
         "vue-router": "^4.0.12"
@@ -45,11 +45,11 @@
         "eslint-plugin-vue": "^8.2.0",
         "http-server": "^14.0.0",
         "husky": "^7.0.4",
-        "lint-staged": "^12.1.4",
+        "lint-staged": "^12.1.7",
         "plop": "^3.0.5",
         "postcss-html": "^1.3.0",
         "postcss-scss": "^4.0.2",
-        "sass": "^1.45.2",
+        "sass": "^1.47.0",
         "stylelint": "^14.2.0",
         "stylelint-config-html": "^1.0.0",
         "stylelint-config-recommended": "^6.0.0",
@@ -61,11 +61,11 @@
         "unplugin-auto-import": "^0.5.5",
         "unplugin-vue-components": "^0.17.11",
         "vite": "^2.7.10",
-        "vite-plugin-banner": "^0.1.3",
+        "vite-plugin-banner": "^0.2.0",
         "vite-plugin-compression": "^0.4.0",
         "vite-plugin-html": "^2.1.2",
         "vite-plugin-mock": "^2.9.6",
-        "vite-plugin-restart": "^0.0.2",
+        "vite-plugin-restart": "^0.1.0",
         "vite-plugin-spritesmith": "^0.1.1",
         "vite-plugin-svg-icons": "^1.1.0",
         "vite-plugin-vue-setup-extend": "^0.3.0",

pnpm-lock.yaml

@@ -5,21 +5,22 @@ specifiers:
   '@tinymce/tinymce-vue': ^4.0.5
   '@vitejs/plugin-vue': ^2.0.1
   '@vue/compiler-sfc': ^3.2.26
+  '@vueuse/core': ^7.5.3
+  '@vueuse/integrations': ^7.5.3
   axios: ^0.24.0
   dayjs: ^1.10.7
-  element-plus: ^1.3.0-beta.1
+  element-plus: ^1.3.0-beta.3
   eslint: ^8.6.0
   eslint-plugin-vue: ^8.2.0
   hotkeys-js: ^3.8.7
   http-server: ^14.0.0
   husky: ^7.0.4
   js-cookie: ^3.0.1
-  lint-staged: ^12.1.4
+  lint-staged: ^12.1.7
   mavon-editor: ^3.0.0-beta
   mitt: ^3.0.0
   mockjs: ^1.1.0
   naming-style: ^1.0.1
-  nprogress: ^0.2.0
   path-browserify: ^1.0.1
   path-to-regexp: ^6.2.0
   pinia: ^2.0.9
@@ -27,8 +28,7 @@ specifiers:
   postcss-html: ^1.3.0
   postcss-scss: ^4.0.2
   qs: ^6.10.2
-  sass: ^1.45.2
-  screenfull: ^6.0.0
+  sass: ^1.47.0
   stylelint: ^14.2.0
   stylelint-config-html: ^1.0.0
   stylelint-config-recommended: ^6.0.0
@@ -41,11 +41,11 @@ specifiers:
   unplugin-auto-import: ^0.5.5
   unplugin-vue-components: ^0.17.11
   vite: ^2.7.10
-  vite-plugin-banner: ^0.1.3
+  vite-plugin-banner: ^0.2.0
   vite-plugin-compression: ^0.4.0
   vite-plugin-html: ^2.1.2
   vite-plugin-mock: ^2.9.6
-  vite-plugin-restart: ^0.0.2
+  vite-plugin-restart: ^0.1.0
   vite-plugin-spritesmith: ^0.1.1
   vite-plugin-svg-icons: ^1.1.0
   vite-plugin-vue-setup-extend: ^0.3.0
@@ -56,21 +56,21 @@ specifiers:
 dependencies:
   '@element-plus/icons-vue': 0.2.4_vue@3.2.26
   '@tinymce/tinymce-vue': 4.0.5_vue@3.2.26
+  '@vueuse/core': 7.5.3_vue@3.2.26
+  '@vueuse/integrations': 7.5.3_vue@3.2.26
   axios: 0.24.0
   dayjs: 1.10.7
-  element-plus: 1.3.0-beta.1_vue@3.2.26
+  element-plus: 1.3.0-beta.3_vue@3.2.26
   hotkeys-js: 3.8.7
   js-cookie: 3.0.1
   mavon-editor: 3.0.0-beta
   mitt: 3.0.0
   mockjs: 1.1.0
   naming-style: 1.0.1
-  nprogress: 0.2.0
   path-browserify: 1.0.1
   path-to-regexp: 6.2.0
   pinia: 2.0.9_vue@3.2.26
   qs: 6.10.2
-  screenfull: 6.0.0
   tinymce: 5.10.2
   vue: 3.2.26
   vue-router: 4.0.12_vue@3.2.26
@@ -82,11 +82,11 @@ devDependencies:
   eslint-plugin-vue: 8.2.0_eslint@8.6.0
   http-server: 14.0.0
   husky: 7.0.4
-  lint-staged: 12.1.4
+  lint-staged: 12.1.7
   plop: 3.0.5
   postcss-html: 1.3.0
   postcss-scss: 4.0.2
-  sass: 1.45.2
+  sass: 1.47.0
   stylelint: 14.2.0
   stylelint-config-html: 1.0.0_2d1bcf73d0f2e8e613ccd6d821b0344f
   stylelint-config-recommended: 6.0.0_stylelint@14.2.0
@@ -95,14 +95,14 @@ devDependencies:
   stylelint-config-standard: 24.0.0_stylelint@14.2.0
   stylelint-scss: 4.1.0_stylelint@14.2.0
   svgo: 2.8.0
-  unplugin-auto-import: 0.5.5_vite@2.7.10
+  unplugin-auto-import: 0.5.5_@vueuse+core@7.5.3+vite@2.7.10
   unplugin-vue-components: 0.17.11_vite@2.7.10+vue@3.2.26
-  vite: 2.7.10_sass@1.45.2
-  vite-plugin-banner: 0.1.3
+  vite: 2.7.10_sass@1.47.0
+  vite-plugin-banner: 0.2.0
   vite-plugin-compression: 0.4.0_vite@2.7.10
   vite-plugin-html: 2.1.2_vite@2.7.10
   vite-plugin-mock: 2.9.6_mockjs@1.1.0+vite@2.7.10
-  vite-plugin-restart: 0.0.2_vite@2.7.10
+  vite-plugin-restart: 0.1.0_vite@2.7.10
   vite-plugin-spritesmith: 0.1.1
   vite-plugin-svg-icons: 1.1.0_vite@2.7.10
   vite-plugin-vue-setup-extend: 0.3.0_vite@2.7.10
@@ -147,6 +147,13 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
+  /@drauu/core/0.2.1:
+    resolution: {integrity: sha1-clmg/od6n2AChmMqFlTKA/hWdKA=, tarball: '@drauu/core/download/@drauu/core-0.2.1.tgz'}
+    dependencies:
+      perfect-freehand: 1.0.16
+    dev: false
+    optional: true
+
   /@element-plus/icons-vue/0.2.4_vue@3.2.26:
     resolution: {integrity: sha512-RsJNyL58rwxtsjeMy34o8txkL6UlME1stWsUlRpTac6UE9Bx9gdJvnDXbIKhOJqBLX17fBjmposdrn6VTqim2w==, tarball: '@element-plus/icons-vue/download/@element-plus/icons-vue-0.2.4.tgz'}
     peerDependencies:
@@ -234,7 +241,7 @@ packages:
     dependencies:
       '@types/estree': 0.0.39
       estree-walker: 1.0.1
-      picomatch: 2.3.0
+      picomatch: 2.3.1
     dev: true
 
   /@rollup/pluginutils/4.1.1:
@@ -242,7 +249,7 @@ packages:
     engines: {node: '>= 8.0.0'}
     dependencies:
       estree-walker: 2.0.2
-      picomatch: 2.3.0
+      picomatch: 2.3.1
     dev: true
 
   /@rollup/pluginutils/4.1.2:
@@ -250,7 +257,7 @@ packages:
     engines: {node: '>= 8.0.0'}
     dependencies:
       estree-walker: 2.0.2
-      picomatch: 2.3.0
+      picomatch: 2.3.1
     dev: true
 
   /@tinymce/tinymce-vue/4.0.5_vue@3.2.26:
@@ -267,6 +274,11 @@ packages:
     engines: {node: '>=10.13.0'}
     dev: true
 
+  /@types/cookie/0.3.3:
+    resolution: {integrity: sha1-hbx0ungvt6o6UU0RdngysOO8aAM=, tarball: '@types/cookie/download/@types/cookie-0.3.3.tgz'}
+    dev: false
+    optional: true
+
   /@types/estree/0.0.39:
     resolution: {integrity: sha1-4Xfmme4bjCLSMXTKqnQiZEOJUJ8=, tarball: '@types/estree/download/@types/estree-0.0.39.tgz'}
     dev: true
@@ -342,7 +354,7 @@ packages:
       vite: ^2.5.10
       vue: ^3.2.25
     dependencies:
-      vite: 2.7.10_sass@1.45.2
+      vite: 2.7.10_sass@1.47.0
       vue: 3.2.26
     dev: true
 
@@ -431,8 +443,8 @@ packages:
   /@vue/shared/3.2.26:
     resolution: {integrity: sha512-vPV6Cq+NIWbH5pZu+V+2QHE9y1qfuTq49uNWw4f7FDEeZaDU2H2cx5jcUZOAKW7qTrUS4k6qZPbMy1x4N96nbA==, tarball: '@vue/shared/download/@vue/shared-3.2.26.tgz'}
 
-  /@vueuse/core/7.5.1_vue@3.2.26:
-    resolution: {integrity: sha512-GczfdTWqH483zkUHdDYiLm0Tn51OtsQXYc+eBKKIeolh0mgn682KbSYmkrjNytaF7qGc74YxMDAYjkPBW6V2Pg==, tarball: '@vueuse/core/download/@vueuse/core-7.5.1.tgz'}
+  /@vueuse/core/7.5.3_vue@3.2.26:
+    resolution: {integrity: sha512-D9j5ymHFMFRXQqCp0yZJkf/bvBGiz0MrKUa364p+L8dMyd5zyq2K1JmHyvoBd4xbTFRfmQ1h878u6YE5LCkDVQ==, tarball: '@vueuse/core/download/@vueuse/core-7.5.3.tgz'}
     peerDependencies:
       '@vue/composition-api': ^1.1.0
       vue: ^2.6.0 || ^3.2.0
@@ -442,13 +454,34 @@ packages:
       vue:
         optional: true
     dependencies:
-      '@vueuse/shared': 7.5.1_vue@3.2.26
+      '@vueuse/shared': 7.5.3_vue@3.2.26
       vue: 3.2.26
       vue-demi: 0.12.1_vue@3.2.26
     dev: false
 
-  /@vueuse/shared/7.5.1_vue@3.2.26:
-    resolution: {integrity: sha512-zMQEuYJyTmr5Hj2rYgSbb4H/cSI8mdaa9dUuw20j6rPV+xLV11y7vCyIkxo31uODDr0p77FMlProKzNDiK9rAA==, tarball: '@vueuse/shared/download/@vueuse/shared-7.5.1.tgz'}
+  /@vueuse/integrations/7.5.3_vue@3.2.26:
+    resolution: {integrity: sha512-1GCIHKrGzS14uq2UDX7Bu6kNZEgQ/GslF62ZaEQF9HzRf6Eg0BCuwPBzUbm2eUdRMdCLpZypcODwRw+ZEDA0hA==, tarball: '@vueuse/integrations/download/@vueuse/integrations-7.5.3.tgz'}
+    dependencies:
+      '@vueuse/core': 7.5.3_vue@3.2.26
+      '@vueuse/shared': 7.5.3_vue@3.2.26
+      vue-demi: 0.12.1_vue@3.2.26
+    optionalDependencies:
+      axios: 0.24.0
+      drauu: 0.2.1
+      focus-trap: 6.7.1
+      fuse.js: 6.5.3
+      jwt-decode: 3.1.2
+      nprogress: 0.2.0
+      qrcode: 1.5.0
+      universal-cookie: 4.0.4
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - debug
+      - vue
+    dev: false
+
+  /@vueuse/shared/7.5.3_vue@3.2.26:
+    resolution: {integrity: sha512-BJ71cxHN5VByW1S58Gl85NFJaQu93F7Vs7K/MuAKsIIuHm9PBbkR5Vxkg9ko9cBdiKVt+FNoo13BhdbA+Vwycg==, tarball: '@vueuse/shared/download/@vueuse/shared-7.5.3.tgz'}
     peerDependencies:
       '@vue/composition-api': ^1.1.0
       vue: ^2.6.0 || ^3.2.0
@@ -522,7 +555,6 @@ packages:
   /ansi-regex/5.0.1:
     resolution: {integrity: sha1-CCyyyJyf6GWaMRpTvWpNxTAdswQ=, tarball: ansi-regex/download/ansi-regex-5.0.1.tgz}
     engines: {node: '>=8'}
-    dev: true
 
   /ansi-regex/6.0.1:
     resolution: {integrity: sha1-MYPjj66aZdfLXlOUXNWJfQJgoGo=, tarball: ansi-regex/download/ansi-regex-6.0.1.tgz}
@@ -546,7 +578,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       color-convert: 2.0.1
-    dev: true
 
   /ansi-styles/6.1.0:
     resolution: {integrity: sha1-hzE8ECuBGKvVc3GvqzRhi/c1DtM=, tarball: ansi-styles/download/ansi-styles-6.1.0.tgz}
@@ -558,7 +589,7 @@ packages:
     engines: {node: '>= 8'}
     dependencies:
       normalize-path: 3.0.0
-      picomatch: 2.3.0
+      picomatch: 2.3.1
     dev: true
 
   /argparse/2.0.1:
@@ -833,7 +864,6 @@ packages:
   /camelcase/5.3.1:
     resolution: {integrity: sha1-48mzFWnhBoEd8kL3FXJaH0xJQyA=, tarball: camelcase/download/camelcase-5.3.1.tgz?cache=0&sync_timestamp=1632825560555&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fcamelcase%2Fdownload%2Fcamelcase-5.3.1.tgz}
     engines: {node: '>=6'}
-    dev: true
 
   /capital-case/1.0.4:
     resolution: {integrity: sha1-nRMCkjU8kkn2sA+lhSvuOKcX5mk=, tarball: capital-case/download/capital-case-1.0.4.tgz}
@@ -978,6 +1008,15 @@ packages:
     engines: {node: '>= 10'}
     dev: true
 
+  /cliui/6.0.0:
+    resolution: {integrity: sha1-UR1wLAxOQcoVbX0OlgIfI+EyJbE=, tarball: cliui/download/cliui-6.0.0.tgz}
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 6.2.0
+    dev: false
+    optional: true
+
   /clone-regexp/2.2.0:
     resolution: {integrity: sha1-fWXgCIXNh5ZAXDWnN+eoa3Qp428=, tarball: clone-regexp/download/clone-regexp-2.2.0.tgz}
     engines: {node: '>=6'}
@@ -1018,7 +1057,6 @@ packages:
     engines: {node: '>=7.0.0'}
     dependencies:
       color-name: 1.1.4
-    dev: true
 
   /color-name/1.1.3:
     resolution: {integrity: sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=, tarball: color-name/download/color-name-1.1.3.tgz}
@@ -1026,7 +1064,6 @@ packages:
 
   /color-name/1.1.4:
     resolution: {integrity: sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=, tarball: color-name/download/color-name-1.1.4.tgz}
-    dev: true
 
   /colord/2.9.2:
     resolution: {integrity: sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==, tarball: colord/download/colord-2.9.2.tgz}
@@ -1103,6 +1140,12 @@ packages:
       readable-stream: 1.0.34
     dev: true
 
+  /cookie/0.4.1:
+    resolution: {integrity: sha1-r9cT/ibr0hupXOth+agRblClN9E=, tarball: cookie/download/cookie-0.4.1.tgz}
+    engines: {node: '>= 0.6'}
+    dev: false
+    optional: true
+
   /copy-descriptor/0.1.1:
     resolution: {integrity: sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=, tarball: copy-descriptor/download/copy-descriptor-0.1.1.tgz}
     engines: {node: '>=0.10.0'}
@@ -1269,7 +1312,6 @@ packages:
   /decamelize/1.2.0:
     resolution: {integrity: sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=, tarball: decamelize/download/decamelize-1.2.0.tgz}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /decode-uri-component/0.2.0:
     resolution: {integrity: sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=, tarball: decode-uri-component/download/decode-uri-component-0.2.0.tgz}
@@ -1337,6 +1379,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /dijkstrajs/1.0.2:
+    resolution: {integrity: sha1-LkjA07glRir+datK1egpyOzjYlc=, tarball: dijkstrajs/download/dijkstrajs-1.0.2.tgz}
+    dev: false
+    optional: true
+
   /dir-glob/3.0.1:
     resolution: {integrity: sha1-Vtv3PZkqSpO6FYT0U0Bj/S5BcX8=, tarball: dir-glob/download/dir-glob-3.0.1.tgz}
     engines: {node: '>=8'}
@@ -1418,6 +1465,14 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /drauu/0.2.1:
+    resolution: {integrity: sha1-p/Komf4uHAONwp2DBIjIDXYZs8k=, tarball: drauu/download/drauu-0.2.1.tgz}
+    requiresBuild: true
+    dependencies:
+      '@drauu/core': 0.2.1
+    dev: false
+    optional: true
+
   /ecc-jsbn/0.1.2:
     resolution: {integrity: sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=, tarball: ecc-jsbn/download/ecc-jsbn-0.1.2.tgz}
     dependencies:
@@ -1437,15 +1492,15 @@ packages:
       jake: 10.8.2
     dev: true
 
-  /element-plus/1.3.0-beta.1_vue@3.2.26:
-    resolution: {integrity: sha512-q3vMaKElPpuSTeIF7kuDmMOE+N1YVCCIG3fshXpz6qgjnxPbgZumVM0qGfhr8DTu9JxRbBoDok49dqtX/BWn3w==, tarball: element-plus/download/element-plus-1.3.0-beta.1.tgz}
+  /element-plus/1.3.0-beta.3_vue@3.2.26:
+    resolution: {integrity: sha512-OeSAfuXpZJAdakC9hsQkcBrQEib+uVzzTZ52EiZZxQ1ArktxdfONkQyZ/KTR20pfr+3gla2guhWseg60md1sLA==, tarball: element-plus/download/element-plus-1.3.0-beta.3.tgz}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
       '@ctrl/tinycolor': 3.4.0
       '@element-plus/icons-vue': 0.2.4_vue@3.2.26
       '@popperjs/core': 2.11.0
-      '@vueuse/core': 7.5.1_vue@3.2.26
+      '@vueuse/core': 7.5.3_vue@3.2.26
       async-validator: 4.0.7
       dayjs: 1.10.7
       lodash: 4.17.21
@@ -1458,7 +1513,6 @@ packages:
 
   /emoji-regex/8.0.0:
     resolution: {integrity: sha1-6Bj9ac5cz8tARZT4QpY79TFkzDc=, tarball: emoji-regex/download/emoji-regex-8.0.0.tgz}
-    dev: true
 
   /emoji-regex/9.2.2:
     resolution: {integrity: sha1-hAyIA7DYBH9P8M+WMXazLU7z7XI=, tarball: emoji-regex/download/emoji-regex-9.2.2.tgz}
@@ -1469,6 +1523,11 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
+  /encode-utf8/1.0.3:
+    resolution: {integrity: sha1-8w/dMdoH+1lvKBvrL2sCeFGZTNo=, tarball: encode-utf8/download/encode-utf8-1.0.3.tgz}
+    dev: false
+    optional: true
+
   /encodeurl/1.0.2:
     resolution: {integrity: sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=, tarball: encodeurl/download/encodeurl-1.0.2.tgz}
     engines: {node: '>= 0.8'}
@@ -2015,7 +2074,6 @@ packages:
     dependencies:
       locate-path: 5.0.0
       path-exists: 4.0.0
-    dev: true
 
   /findup-sync/5.0.0:
     resolution: {integrity: sha1-VDgK2WWn7coAzI9jETVZqtxUG9I=, tarball: findup-sync/download/findup-sync-5.0.0.tgz}
@@ -2060,6 +2118,14 @@ packages:
     resolution: {integrity: sha1-ZL/tXLaP48p4s+shStl7Y77c5WE=, tarball: flatted/download/flatted-3.2.2.tgz}
     dev: true
 
+  /focus-trap/6.7.1:
+    resolution: {integrity: sha1-1HT4bbrzx/vw1TzwsSKV9PQGjRA=, tarball: focus-trap/download/focus-trap-6.7.1.tgz}
+    requiresBuild: true
+    dependencies:
+      tabbable: 5.2.1
+    dev: false
+    optional: true
+
   /for-in/1.0.2:
     resolution: {integrity: sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=, tarball: for-in/download/for-in-1.0.2.tgz}
     engines: {node: '>=0.10.0'}
@@ -2119,6 +2185,13 @@ packages:
     resolution: {integrity: sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=, tarball: functional-red-black-tree/download/functional-red-black-tree-1.0.1.tgz}
     dev: true
 
+  /fuse.js/6.5.3:
+    resolution: {integrity: sha512-sA5etGE7yD/pOqivZRBvUBd/NaL2sjAu6QuSaFoe1H2BrJSkH/T/UXAJ8CdXdw7DvY3Hs8CXKYkDWX7RiP5KOg==, tarball: fuse.js/download/fuse.js-6.5.3.tgz}
+    engines: {node: '>=10'}
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /gaze/1.1.3:
     resolution: {integrity: sha1-xEFzPhO5J6yMD/C0w7Az8ogSkko=, tarball: gaze/download/gaze-1.1.3.tgz}
     engines: {node: '>= 4.0.0'}
@@ -2126,6 +2199,12 @@ packages:
       globule: 1.3.3
     dev: true
 
+  /get-caller-file/2.0.5:
+    resolution: {integrity: sha1-T5RBKoLbMvNuOwuXQfipf+sDH34=, tarball: get-caller-file/download/get-caller-file-2.0.5.tgz}
+    engines: {node: 6.* || 8.* || >= 10.*}
+    dev: false
+    optional: true
+
   /get-intrinsic/1.1.1:
     resolution: {integrity: sha1-FfWfN2+FXERpY5SPDSTNNje0q8Y=, tarball: get-intrinsic/download/get-intrinsic-1.1.1.tgz}
     dependencies:
@@ -2730,7 +2809,6 @@ packages:
   /is-fullwidth-code-point/3.0.0:
     resolution: {integrity: sha1-8Rb4Bk/pCz94RKOJl8C3UFEmnx0=, tarball: is-fullwidth-code-point/download/is-fullwidth-code-point-3.0.0.tgz}
     engines: {node: '>=8'}
-    dev: true
 
   /is-fullwidth-code-point/4.0.0:
     resolution: {integrity: sha1-+uMWfHKedGP4RhzlErCApJJoqog=, tarball: is-fullwidth-code-point/download/is-fullwidth-code-point-4.0.0.tgz}
@@ -2969,6 +3047,12 @@ packages:
       verror: 1.10.0
     dev: true
 
+  /jwt-decode/3.1.2:
+    resolution: {integrity: sha1-P7MZ82daLfDCiVyPXp+ktnsE7Vk=, tarball: jwt-decode/download/jwt-decode-3.1.2.tgz}
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /kind-of/3.2.2:
     resolution: {integrity: sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=, tarball: kind-of/download/kind-of-3.2.2.tgz}
     engines: {node: '>=0.10.0'}
@@ -3035,8 +3119,8 @@ packages:
     resolution: {integrity: sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=, tarball: lines-and-columns/download/lines-and-columns-1.1.6.tgz}
     dev: true
 
-  /lint-staged/12.1.4:
-    resolution: {integrity: sha512-RgDz9nsFsE0/5eL9Vat0AvCuk0+j5mEuzBIVfrRH5FRtt5wibYe8zTjZs2nuqLFrLAGQGYnj8+HJxolcj08i/A==, tarball: lint-staged/download/lint-staged-12.1.4.tgz}
+  /lint-staged/12.1.7:
+    resolution: {integrity: sha512-bltv/ejiLWtowExpjU+s5z8j1Byjg9AlmaAjMmqNbIicY69u6sYIwXGg0dCn0TlkrrY2CphtHIXAkbZ+1VoWQQ==, tarball: lint-staged/download/lint-staged-12.1.7.tgz}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     hasBin: true
     dependencies:
@@ -3097,7 +3181,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       p-locate: 4.1.0
-    dev: true
 
   /lodash.get/4.4.2:
     resolution: {integrity: sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=, tarball: lodash.get/download/lodash.get-4.4.2.tgz}
@@ -3265,7 +3348,7 @@ packages:
     engines: {node: '>=8.6'}
     dependencies:
       braces: 3.0.2
-      picomatch: 2.3.0
+      picomatch: 2.3.1
     dev: true
 
   /mime-db/1.50.0:
@@ -3481,8 +3564,10 @@ packages:
     dev: true
 
   /nprogress/0.2.0:
-    resolution: {integrity: sha1-y480xTIT2JVyP8urkH6UIq28r7E=, tarball: nprogress/download/nprogress-0.2.0.tgz}
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==, tarball: nprogress/download/nprogress-0.2.0.tgz}
+    requiresBuild: true
     dev: false
+    optional: true
 
   /nth-check/2.0.1:
     resolution: {integrity: sha1-Lv4WL1w9oGoolZ+9PbddvuqfD8I=, tarball: nth-check/download/nth-check-2.0.1.tgz}
@@ -3623,14 +3708,12 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       p-try: 2.2.0
-    dev: true
 
   /p-locate/4.1.0:
     resolution: {integrity: sha1-o0KLtwiLOmApL2aRkni3wpetTwc=, tarball: p-locate/download/p-locate-4.1.0.tgz}
     engines: {node: '>=8'}
     dependencies:
       p-limit: 2.3.0
-    dev: true
 
   /p-map/4.0.0:
     resolution: {integrity: sha1-uy+Vpe2i7BaOySdOBqdHw+KQTSs=, tarball: p-map/download/p-map-4.0.0.tgz}
@@ -3642,7 +3725,6 @@ packages:
   /p-try/2.2.0:
     resolution: {integrity: sha1-yyhoVA4xPWHeWPr741zpAE1VQOY=, tarball: p-try/download/p-try-2.2.0.tgz}
     engines: {node: '>=6'}
-    dev: true
 
   /param-case/3.0.4:
     resolution: {integrity: sha1-fRf+SqEr3jTUp32RrPtiGcqtAcU=, tarball: param-case/download/param-case-3.0.4.tgz}
@@ -3719,7 +3801,6 @@ packages:
   /path-exists/4.0.0:
     resolution: {integrity: sha1-UTvb4tO5XXdi6METfvoZXGxhtbM=, tarball: path-exists/download/path-exists-4.0.0.tgz}
     engines: {node: '>=8'}
-    dev: true
 
   /path-is-absolute/1.0.1:
     resolution: {integrity: sha1-F0uSaHNVNP+8es5r9TpanhtcX18=, tarball: path-is-absolute/download/path-is-absolute-1.0.1.tgz}
@@ -3755,6 +3836,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /perfect-freehand/1.0.16:
+    resolution: {integrity: sha1-OFde+Ub/UTuclAV8djysADtQQCA=, tarball: perfect-freehand/download/perfect-freehand-1.0.16.tgz}
+    dev: false
+    optional: true
+
   /performance-now/2.1.0:
     resolution: {integrity: sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=, tarball: performance-now/download/performance-now-2.1.0.tgz}
     dev: true
@@ -3766,8 +3852,8 @@ packages:
     resolution: {integrity: sha1-y1vcdP8/UYkiNur3nWi8RFZKuBw=, tarball: picocolors/download/picocolors-1.0.0.tgz}
     dev: true
 
-  /picomatch/2.3.0:
-    resolution: {integrity: sha1-8fBh3o9qS/AiiS4tEoI0+5gwKXI=, tarball: picomatch/download/picomatch-2.3.0.tgz}
+  /picomatch/2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==, tarball: picomatch/download/picomatch-2.3.1.tgz}
     engines: {node: '>=8.6'}
     dev: true
 
@@ -3827,6 +3913,12 @@ packages:
     engines: {node: '>=4.0.0'}
     dev: true
 
+  /pngjs/5.0.0:
+    resolution: {integrity: sha1-553SshV2f9nARWHAEjbflgvOf7s=, tarball: pngjs/download/pngjs-5.0.0.tgz}
+    engines: {node: '>=10.13.0'}
+    dev: false
+    optional: true
+
   /posix-character-classes/0.1.1:
     resolution: {integrity: sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=, tarball: posix-character-classes/download/posix-character-classes-0.1.1.tgz}
     engines: {node: '>=0.10.0'}
@@ -3999,6 +4091,19 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /qrcode/1.5.0:
+    resolution: {integrity: sha512-9MgRpgVc+/+47dFvQeD6U2s0Z92EsKzcHogtum4QB+UNd025WOJSHvn/hjk9xmzj7Stj95CyUAs31mrjxliEsQ==, tarball: qrcode/download/qrcode-1.5.0.tgz}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      dijkstrajs: 1.0.2
+      encode-utf8: 1.0.3
+      pngjs: 5.0.0
+      yargs: 15.4.1
+    dev: false
+    optional: true
+
   /qs/6.10.2:
     resolution: {integrity: sha512-mSIdjzqznWgfd4pMii7sHtaYF8rx8861hBO80SraY5GT0XQibWZWJSid0avzHGkDIZLImux2S5mXO0Hfct2QCw==, tarball: qs/download/qs-6.10.2.tgz}
     engines: {node: '>=0.6'}
@@ -4100,7 +4205,7 @@ packages:
     resolution: {integrity: sha1-dKNwvYVxFuJFspzJc0DNQxoCpsc=, tarball: readdirp/download/readdirp-3.6.0.tgz}
     engines: {node: '>=8.10.0'}
     dependencies:
-      picomatch: 2.3.0
+      picomatch: 2.3.1
     dev: true
 
   /rechoir/0.8.0:
@@ -4178,11 +4283,22 @@ packages:
       uuid: 3.4.0
     dev: true
 
+  /require-directory/2.1.1:
+    resolution: {integrity: sha1-jGStX9MNqxyXbiNE/+f3kqam30I=, tarball: require-directory/download/require-directory-2.1.1.tgz}
+    engines: {node: '>=0.10.0'}
+    dev: false
+    optional: true
+
   /require-from-string/2.0.2:
     resolution: {integrity: sha1-iaf92TgmEmcxjq/hT5wy5ZjDaQk=, tarball: require-from-string/download/require-from-string-2.0.2.tgz}
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /require-main-filename/2.0.0:
+    resolution: {integrity: sha1-0LMp7MfMD2Fkn2IhW+aa9UqomJs=, tarball: require-main-filename/download/require-main-filename-2.0.0.tgz}
+    dev: false
+    optional: true
+
   /resolve-dir/1.0.1:
     resolution: {integrity: sha1-eaQGRMNivoLybv/nOcm7U4IEb0M=, tarball: resolve-dir/download/resolve-dir-1.0.1.tgz}
     engines: {node: '>=0.10.0'}
@@ -4293,8 +4409,8 @@ packages:
     resolution: {integrity: sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo=, tarball: safer-buffer/download/safer-buffer-2.1.2.tgz}
     dev: true
 
-  /sass/1.45.2:
-    resolution: {integrity: sha512-cKfs+F9AMPAFlbbTXNsbGvg3y58nV0mXA3E94jqaySKcC8Kq3/8983zVKQ0TLMUrHw7hF9Tnd3Bz9z5Xgtrl9g==, tarball: sass/download/sass-1.45.2.tgz}
+  /sass/1.47.0:
+    resolution: {integrity: sha512-GtXwvwgD7/6MLUZPnlA5/8cdRgC9SzT5kAnnJMRmEZQFRE3J56Foswig4NyyyQGsnmNvg6EUM/FP0Pe9Y2zywQ==, tarball: sass/download/sass-1.47.0.tgz}
     engines: {node: '>=8.9.0'}
     hasBin: true
     dependencies:
@@ -4315,11 +4431,6 @@ packages:
       through: 2.3.8
     dev: true
 
-  /screenfull/6.0.0:
-    resolution: {integrity: sha1-b383v+GcXuUJMaxDjB/jgNW1/0Q=, tarball: screenfull/download/screenfull-6.0.0.tgz}
-    engines: {node: ^14.13.1 || >=16.0.0}
-    dev: false
-
   /secure-compare/3.0.1:
     resolution: {integrity: sha1-8aAymzCLIh+uN7mXTz1XjQypmeM=, tarball: secure-compare/download/secure-compare-3.0.1.tgz}
     dev: true
@@ -4350,6 +4461,11 @@ packages:
       upper-case-first: 2.0.2
     dev: true
 
+  /set-blocking/2.0.0:
+    resolution: {integrity: sha1-BF+XgtARrppoA93TgrJDkrPYkPc=, tarball: set-blocking/download/set-blocking-2.0.0.tgz}
+    dev: false
+    optional: true
+
   /set-value/2.0.1:
     resolution: {integrity: sha1-oY1AUw5vB95CKMfe/kInr4ytAFs=, tarball: set-value/download/set-value-2.0.1.tgz}
     engines: {node: '>=0.10.0'}
@@ -4617,7 +4733,6 @@ packages:
       emoji-regex: 8.0.0
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
-    dev: true
 
   /string-width/5.0.1:
     resolution: {integrity: sha1-DYFYM1ps/Y65Xam2smLOMUoDb/0=, tarball: string-width/download/string-width-5.0.1.tgz}
@@ -4656,7 +4771,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       ansi-regex: 5.0.1
-    dev: true
 
   /strip-ansi/7.0.1:
     resolution: {integrity: sha1-YXQKCM42th5Q5lZT8HBg0ACXX7I=, tarball: strip-ansi/download/strip-ansi-7.0.1.tgz?cache=0&sync_timestamp=1632883295900&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fstrip-ansi%2Fdownload%2Fstrip-ansi-7.0.1.tgz}
@@ -4883,6 +4997,11 @@ packages:
       stable: 0.1.8
     dev: true
 
+  /tabbable/5.2.1:
+    resolution: {integrity: sha1-4/2nNn3bsXLc2p+HHA/bNtHEzZw=, tarball: tabbable/download/tabbable-5.2.1.tgz}
+    dev: false
+    optional: true
+
   /table/6.7.5:
     resolution: {integrity: sha512-LFNeryOqiQHqCVKzhkymKwt6ozeRhlm8IL1mE8rNUurkir4heF6PzMyRgaTa4tlyPTGGgXuvVOF/OLWiH09Lqw==, tarball: table/download/table-6.7.5.tgz}
     engines: {node: '>=10.0.0'}
@@ -5083,6 +5202,15 @@ packages:
     resolution: {integrity: sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=, tarball: uniq/download/uniq-1.0.1.tgz}
     dev: true
 
+  /universal-cookie/4.0.4:
+    resolution: {integrity: sha1-BuizYlv5rwSVae+XEJtLsiateY0=, tarball: universal-cookie/download/universal-cookie-4.0.4.tgz}
+    requiresBuild: true
+    dependencies:
+      '@types/cookie': 0.3.3
+      cookie: 0.4.1
+    dev: false
+    optional: true
+
   /universalify/2.0.0:
     resolution: {integrity: sha1-daSYTv7cSwiXXFrrc/Uw0C3yVxc=, tarball: universalify/download/universalify-2.0.0.tgz}
     engines: {node: '>= 10.0.0'}
@@ -5093,7 +5221,7 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /unplugin-auto-import/0.5.5_vite@2.7.10:
+  /unplugin-auto-import/0.5.5_@vueuse+core@7.5.3+vite@2.7.10:
     resolution: {integrity: sha512-PAP/6WdqWtGhlQBvlVZ7qmhHbLcTYSsARtFSbY/jaUx/SaQkRT7SvronHIKEvx4bPmS+l4erQ9gQKSBBPzvUnQ==, tarball: unplugin-auto-import/download/unplugin-auto-import-0.5.5.tgz}
     engines: {node: '>=14'}
     peerDependencies:
@@ -5104,6 +5232,7 @@ packages:
     dependencies:
       '@antfu/utils': 0.3.0
       '@rollup/pluginutils': 4.1.2
+      '@vueuse/core': 7.5.3_vue@3.2.26
       local-pkg: 0.4.0
       magic-string: 0.25.7
       resolve: 1.20.0
@@ -5159,7 +5288,7 @@ packages:
       webpack:
         optional: true
     dependencies:
-      vite: 2.7.10_sass@1.45.2
+      vite: 2.7.10_sass@1.47.0
       webpack-virtual-modules: 0.4.3
     dev: true
 
@@ -5263,8 +5392,8 @@ packages:
       replace-ext: 0.0.1
     dev: true
 
-  /vite-plugin-banner/0.1.3:
-    resolution: {integrity: sha1-09To4oSt3tNf6qVKuMonOp0zSeA=, tarball: vite-plugin-banner/download/vite-plugin-banner-0.1.3.tgz}
+  /vite-plugin-banner/0.2.0:
+    resolution: {integrity: sha512-IBRYVK6v92ihchBYxl6yhT57hr2cRnSX4RX6CJp84vNeWAg/Hht4B5Ywe0jwKA26Kkx/Yx4SGbMp8YLvAqm2pg==, tarball: vite-plugin-banner/download/vite-plugin-banner-0.2.0.tgz}
     dev: true
 
   /vite-plugin-compression/0.4.0_vite@2.7.10:
@@ -5275,7 +5404,7 @@ packages:
       chalk: 4.1.2
       debug: 4.3.3
       fs-extra: 10.0.0
-      vite: 2.7.10_sass@1.45.2
+      vite: 2.7.10_sass@1.47.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -5291,7 +5420,7 @@ packages:
       ejs: 3.1.6
       fs-extra: 10.0.0
       html-minifier-terser: 6.1.0
-      vite: 2.7.10_sass@1.45.2
+      vite: 2.7.10_sass@1.47.0
     transitivePeerDependencies:
       - acorn
     dev: true
@@ -5313,20 +5442,19 @@ packages:
       fast-glob: 3.2.7
       mockjs: 1.1.0
       path-to-regexp: 6.2.0
-      vite: 2.7.10_sass@1.45.2
+      vite: 2.7.10_sass@1.47.0
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: true
 
-  /vite-plugin-restart/0.0.2_vite@2.7.10:
-    resolution: {integrity: sha1-EByTLpw8TV/2BuFaTzLOduHuTdc=, tarball: vite-plugin-restart/download/vite-plugin-restart-0.0.2.tgz}
+  /vite-plugin-restart/0.1.0_vite@2.7.10:
+    resolution: {integrity: sha512-WR+GFzEN+30/zeTbUbMaMSzqxBaQ/FkoulZE5YNQ+JBqYCJEtKCoUSHA8o2BE6c8dKjzdlo9r3rRK9bozEjo1w==, tarball: vite-plugin-restart/download/vite-plugin-restart-0.1.0.tgz}
     peerDependencies:
-      vite: ^2.0.0-beta.69
+      vite: ^2.0.0
     dependencies:
-      chalk: 4.1.2
       micromatch: 4.0.4
-      vite: 2.7.10_sass@1.45.2
+      vite: 2.7.10_sass@1.47.0
     dev: true
 
   /vite-plugin-spritesmith/0.1.1:
@@ -5352,7 +5480,7 @@ packages:
       fs-extra: 10.0.0
       svg-baker: 1.7.0
       svgo: 2.8.0
-      vite: 2.7.10_sass@1.45.2
+      vite: 2.7.10_sass@1.47.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -5364,10 +5492,10 @@ packages:
     dependencies:
       '@vue/compiler-sfc': 3.2.26
       magic-string: 0.25.7
-      vite: 2.7.10_sass@1.45.2
+      vite: 2.7.10_sass@1.47.0
     dev: true
 
-  /vite/2.7.10_sass@1.45.2:
+  /vite/2.7.10_sass@1.47.0:
     resolution: {integrity: sha512-KEY96ntXUid1/xJihJbgmLZx7QSC2D4Tui0FdS0Old5OokYzFclcofhtxtjDdGOk/fFpPbHv9yw88+rB93Tb8w==, tarball: vite/download/vite-2.7.10.tgz}
     engines: {node: '>=12.2.0'}
     hasBin: true
@@ -5387,7 +5515,7 @@ packages:
       postcss: 8.4.5
       resolve: 1.20.0
       rollup: 2.60.2
-      sass: 1.45.2
+      sass: 1.47.0
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
@@ -5454,6 +5582,11 @@ packages:
     resolution: {integrity: sha1-zVl8bVHVpey0c+6hmDpY+ooX3tk=, tarball: webpack-virtual-modules/download/webpack-virtual-modules-0.4.3.tgz}
     dev: true
 
+  /which-module/2.0.0:
+    resolution: {integrity: sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=, tarball: which-module/download/which-module-2.0.0.tgz}
+    dev: false
+    optional: true
+
   /which/1.3.1:
     resolution: {integrity: sha1-pFBD1U9YBTFtqNYvn1CRjT2nCwo=, tarball: which/download/which-1.3.1.tgz}
     hasBin: true
@@ -5485,7 +5618,6 @@ packages:
       ansi-styles: 4.3.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
-    dev: true
 
   /wrap-ansi/7.0.0:
     resolution: {integrity: sha1-Z+FFz/UQpqaYS98RUpEdadLrnkM=, tarball: wrap-ansi/download/wrap-ansi-7.0.0.tgz}
@@ -5523,6 +5655,11 @@ packages:
     engines: {node: '>=0.4'}
     dev: true
 
+  /y18n/4.0.3:
+    resolution: {integrity: sha1-tfJZyCzW4zaSHv17/Yv1YN6e7t8=, tarball: y18n/download/y18n-4.0.3.tgz}
+    dev: false
+    optional: true
+
   /yallist/4.0.0:
     resolution: {integrity: sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=, tarball: yallist/download/yallist-4.0.0.tgz}
     dev: true
@@ -5532,11 +5669,38 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
+  /yargs-parser/18.1.3:
+    resolution: {integrity: sha1-vmjEl1xrKr9GkjawyHA2L6sJp7A=, tarball: yargs-parser/download/yargs-parser-18.1.3.tgz?cache=0&sync_timestamp=1637031489825&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fyargs-parser%2Fdownload%2Fyargs-parser-18.1.3.tgz}
+    engines: {node: '>=6'}
+    dependencies:
+      camelcase: 5.3.1
+      decamelize: 1.2.0
+    dev: false
+    optional: true
+
   /yargs-parser/20.2.9:
     resolution: {integrity: sha1-LrfcOwKJcY/ClfNidThFxBoMlO4=, tarball: yargs-parser/download/yargs-parser-20.2.9.tgz?cache=0&sync_timestamp=1634135116887&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fyargs-parser%2Fdownload%2Fyargs-parser-20.2.9.tgz}
     engines: {node: '>=10'}
     dev: true
 
+  /yargs/15.4.1:
+    resolution: {integrity: sha1-DYehbeAa7p2L7Cv7909nhRcw9Pg=, tarball: yargs/download/yargs-15.4.1.tgz}
+    engines: {node: '>=8'}
+    dependencies:
+      cliui: 6.0.0
+      decamelize: 1.2.0
+      find-up: 4.1.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      require-main-filename: 2.0.0
+      set-blocking: 2.0.0
+      string-width: 4.2.3
+      which-module: 2.0.0
+      y18n: 4.0.3
+      yargs-parser: 18.1.3
+    dev: false
+    optional: true
+
   registry.nlark.com/async/0.9.2:
     resolution: {integrity: sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/async/download/async-0.9.2.tgz}
     name: async

src/layout/components/Header/index.vue

@@ -14,7 +14,7 @@
                         </template>
                     </div>
                 </div>
-                <UserMenu />
+                <Tools />
             </div>
         </header>
     </transition>
@@ -22,7 +22,7 @@
 
 <script setup>
 import Logo from '../Logo/index.vue'
-import UserMenu from '../UserMenu/index.vue'
+import Tools from '../Tools/index.vue'
 
 import { useSettingsStore } from '@/store/modules/settings'
 const settingsStore = useSettingsStore()
@@ -119,7 +119,7 @@ header {
             }
         }
     }
-    :deep(.user) {
+    :deep(.tools) {
         padding: 0;
         .user-container {
             font-size: 16px;

src/layout/components/Search/index.vue

@@ -1,52 +1,54 @@
 <template>
-    <div id="search" :class="{'searching': isShow}" @click="isShow && $eventBus.emit('global-search-toggle')">
-        <div class="container">
-            <div class="search-box" @click.stop>
-                <el-input ref="input" v-model="searchInput" prefix-icon="el-icon-search" placeholder="搜索页面，支持标题、URL模糊查询" clearable @keydown.esc="$eventBus.emit('global-search-toggle')" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter" />
-                <div v-if="settingsStore.mode === 'pc'" class="tips">
-                    <div class="tip">
-                        <span>Alt</span>+<span>S</span>
-                        唤醒搜索面板
-                    </div>
-                    <div class="tip">
-                        <span><svg-icon name="search-up" /></span>
-                        <span><svg-icon name="search-down" /></span>
-                        切换搜索结果
-                    </div>
-                    <div class="tip">
-                        <span><svg-icon name="search-enter" /></span>
-                        访问页面
-                    </div>
-                    <div class="tip">
-                        <span>ESC</span>
-                        退出
+    <teleport to="#app">
+        <div id="search" :class="{'searching': isShow}" @click="isShow && $eventBus.emit('global-search-toggle')">
+            <div class="container">
+                <div class="search-box" @click.stop>
+                    <el-input ref="input" v-model="searchInput" prefix-icon="el-icon-search" placeholder="搜索页面，支持标题、URL模糊查询" clearable @keydown.esc="$eventBus.emit('global-search-toggle')" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter" />
+                    <div v-if="settingsStore.mode === 'pc'" class="tips">
+                        <div class="tip">
+                            <span>Alt</span>+<span>S</span>
+                            唤醒搜索面板
+                        </div>
+                        <div class="tip">
+                            <span><svg-icon name="search-up" /></span>
+                            <span><svg-icon name="search-down" /></span>
+                            切换搜索结果
+                        </div>
+                        <div class="tip">
+                            <span><svg-icon name="search-enter" /></span>
+                            访问页面
+                        </div>
+                        <div class="tip">
+                            <span>ESC</span>
+                            退出
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div ref="search" class="result" :class="{'mobile': settingsStore.mode === 'mobile'}">
-                <router-link v-for="(item, index) in resultList" :key="item.path" v-slot="{ href, navigate }" custom :to="isShow ? item.path : ''">
-                    <a :ref="`search-item-${index}`" :href="isExternalLink(item.path) ? item.path : href" class="item" :class="{'actived': index === actived}" :target="isExternalLink(item.path) ? '_blank' : '_self'" @click="navigate" @mouseover="actived = index">
-                        <div class="icon">
-                            <svg-icon v-if="item.icon" :name="item.icon" />
-                        </div>
-                        <div class="info">
-                            <div class="title">
-                                {{ item.title }}
-                                <svg-icon v-if="item.isExternalLink" name="external-link" />
+                <div ref="search" class="result" :class="{'mobile': settingsStore.mode === 'mobile'}">
+                    <router-link v-for="(item, index) in resultList" :key="item.path" v-slot="{ href, navigate }" custom :to="isShow ? item.path : ''">
+                        <a :ref="`search-item-${index}`" :href="isExternalLink(item.path) ? item.path : href" class="item" :class="{'actived': index === actived}" :target="isExternalLink(item.path) ? '_blank' : '_self'" @click="navigate" @mouseover="actived = index">
+                            <div class="icon">
+                                <svg-icon v-if="item.icon" :name="item.icon" />
                             </div>
-                            <div class="breadcrumb">
-                                <span v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex">
-                                    {{ bc }}
-                                    <svg-icon name="el-icon-arrow-right" />
-                                </span>
+                            <div class="info">
+                                <div class="title">
+                                    {{ item.title }}
+                                    <svg-icon v-if="item.isExternalLink" name="external-link" />
+                                </div>
+                                <div class="breadcrumb">
+                                    <span v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex">
+                                        {{ bc }}
+                                        <svg-icon name="el-icon-arrow-right" />
+                                    </span>
+                                </div>
+                                <div class="path">{{ item.path }}</div>
                             </div>
-                            <div class="path">{{ item.path }}</div>
-                        </div>
-                    </a>
-                </router-link>
+                        </a>
+                    </router-link>
+                </div>
             </div>
         </div>
-    </div>
+    </teleport>
 </template>
 
 <script setup>
@@ -178,7 +180,7 @@ function keyUp() {
         if (actived.value < 0) {
             actived.value = resultList.value.length - 1
         }
-        scrollTo(proxy.$refs[`search-item-${actived.value}`].offsetTop)
+        scrollTo(proxy.$refs[`search-item-${actived.value}`][0].offsetTop)
     }
 }
 function keyDown() {
@@ -187,19 +189,19 @@ function keyDown() {
         if (actived.value > resultList.value.length - 1) {
             actived.value = 0
         }
-        scrollTo(proxy.$refs[`search-item-${actived.value}`].offsetTop)
+        scrollTo(proxy.$refs[`search-item-${actived.value}`][0].offsetTop)
     }
 }
 function keyEnter() {
     if (actived.value !== -1) {
-        proxy.$refs[`search-item-${actived.value}`].click()
+        proxy.$refs[`search-item-${actived.value}`][0].click()
     }
 }
 function scrollTo(offsetTop) {
     if (actived.value !== -1) {
         if (
-            offsetTop + proxy.$refs[`search-item-${actived.value}`].clientHeight > proxy.$refs['search'].scrollTop + proxy.$refs['search'].clientHeight ||
-            offsetTop + proxy.$refs[`search-item-${actived.value}`].clientHeight <= proxy.$refs['search'].scrollTop
+            offsetTop + proxy.$refs[`search-item-${actived.value}`][0].clientHeight > proxy.$refs['search'].scrollTop + proxy.$refs['search'].clientHeight ||
+            offsetTop + proxy.$refs[`search-item-${actived.value}`][0].clientHeight <= proxy.$refs['search'].scrollTop
         ) {
             proxy.$refs['search'].scrollTo({
                 top: offsetTop,

src/layout/components/ThemeSetting/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <teleport to="#app">
         <el-drawer v-model="isShow" title="主题配置" direction="rtl" :size="300">
             <el-alert title="主题配置可实时预览效果，更多设置请在 src/settings.js 中进行设置，建议在生产环境隐藏主题配置功能" type="error" :closable="false" />
             <el-divider v-if="settingsStore.mode === 'pc'">导航栏模式</el-divider>
@@ -49,12 +49,7 @@
             </div>
             <el-divider>顶栏</el-divider>
             <div class="setting-item">
-                <div class="label">
-                    顶栏固定
-                    <el-tooltip content="包含顶部导航栏和标签栏" placement="top" :append-to-body="false">
-                        <svg-icon name="el-icon-question-filled" />
-                    </el-tooltip>
-                </div>
+                <div class="label">顶栏固定</div>
                 <el-switch v-model="topbarFixed" />
             </div>
             <div v-if="settingsStore.mode === 'pc'" class="setting-item">
@@ -135,7 +130,7 @@
                 <el-switch v-model="enableDashboard" />
             </div>
         </el-drawer>
-    </div>
+    </teleport>
 </template>
 
 <script setup>
@@ -310,13 +305,6 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-:deep(.el-drawer__body) {
-    padding: 0 15px 20px;
-    overflow: auto;
-}
-:deep(.el-input) {
-    width: 150px;
-}
 .menu-mode {
     display: flex;
     align-items: center;
@@ -428,5 +416,8 @@ onMounted(() => {
             cursor: help;
         }
     }
+    .el-switch {
+        height: auto;
+    }
 }
 </style>

src/layout/components/Tools/index.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="user">
-        <div class="tools">
+    <div class="tools">
+        <div class="buttons">
             <span v-if="settingsStore.mode == 'pc'" class="item item-pro" @click="pro">
                 <svg-icon name="pro" />
                 <span class="title">查看专业版</span>
@@ -8,7 +8,7 @@
             <span v-if="settingsStore.enableNavSearch" class="item" @click="$eventBus.emit('global-search-toggle')">
                 <svg-icon name="search" />
             </span>
-            <span v-if="settingsStore.mode === 'pc' && isFullscreenEnable && settingsStore.enableFullscreen" class="item" @click="fullscreen">
+            <span v-if="settingsStore.mode === 'pc' && settingsStore.enableFullscreen" class="item" @click="toggle">
                 <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
             </span>
             <span v-if="settingsStore.enablePageReload" class="item" @click="reload()">
@@ -38,8 +38,6 @@
 </template>
 
 <script setup>
-import screenfull from 'screenfull'
-
 const reload = inject('reload')
 const router = useRouter()
 
@@ -48,26 +46,9 @@ const settingsStore = useSettingsStore()
 import { useUserStore } from '@/store/modules/user'
 const userStore = useUserStore()
 
-const isFullscreenEnable = computed(() => screenfull.isEnabled)
-const isFullscreen = ref(false)
+import { useFullscreen } from '@vueuse/core'
+const { isFullscreen, toggle } = useFullscreen()
 
-onMounted(() => {
-    if (isFullscreenEnable.value) {
-        screenfull.on('change', fullscreenChange)
-    }
-})
-onBeforeUnmount(() => {
-    if (isFullscreenEnable.value) {
-        screenfull.off('change', fullscreenChange)
-    }
-})
-
-function fullscreen() {
-    screenfull.toggle()
-}
-function fullscreenChange() {
-    isFullscreen.value = screenfull.isFullscreen
-}
 function userCommand(command) {
     switch (command) {
         case 'dashboard':
@@ -95,58 +76,58 @@ function pro() {
 </script>
 
 <style lang="scss" scoped>
-.user {
+.tools {
     display: flex;
     align-items: center;
     padding: 0 20px;
     white-space: nowrap;
-}
-.tools {
-    margin-right: 20px;
-    .item {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        height: 24px;
-        width: 34px;
-        cursor: pointer;
-        vertical-align: middle;
-        transition: all 0.3s;
-    }
-    .item-pro {
-        display: inline-block;
-        width: auto;
-        padding: 0 10px;
-        transform-origin: right center;
-        animation: pro-text 3s ease-out infinite;
-        @keyframes pro-text {
-            0%,
-            20% {
-                transform: scale(1);
-            }
-            50%,
-            70% {
-                transform: scale(1.2);
-            }
-            100% {
-                transform: scale(1);
-            }
+    .buttons {
+        margin-right: 20px;
+        .item {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            height: 24px;
+            width: 34px;
+            cursor: pointer;
+            vertical-align: middle;
+            transition: all 0.3s;
         }
-        .title {
-            padding-left: 5px;
-            font-weight: bold;
-            font-size: 14px;
-            background-image: linear-gradient(to right, #ffa237, #fc455d);
-            /* stylelint-disable-next-line property-no-vendor-prefix */
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
+        .item-pro {
+            display: inline-block;
+            width: auto;
+            padding: 0 10px;
+            transform-origin: right center;
+            animation: pro-text 3s ease-out infinite;
+            @keyframes pro-text {
+                0%,
+                20% {
+                    transform: scale(1);
+                }
+                50%,
+                70% {
+                    transform: scale(1.2);
+                }
+                100% {
+                    transform: scale(1);
+                }
+            }
+            .title {
+                padding-left: 5px;
+                font-weight: bold;
+                font-size: 14px;
+                background-image: linear-gradient(to right, #ffa237, #fc455d);
+                /* stylelint-disable-next-line property-no-vendor-prefix */
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+            }
         }
     }
 }
 :deep(.user-container) {
     display: inline-block;
-    height: 50px;
-    line-height: 50px;
+    height: 24px;
+    line-height: 24px;
     cursor: pointer;
     .user-wrapper {
         .el-avatar {

src/layout/components/Topbar/index.vue

@@ -22,14 +22,14 @@
                 </transition-group>
             </el-breadcrumb>
         </div>
-        <UserMenu />
+        <Tools />
     </div>
 </template>
 
 <script setup>
 import { compile } from 'path-to-regexp'
 import { deepClone } from '@/util'
-import UserMenu from '../UserMenu/index.vue'
+import Tools from '../Tools/index.vue'
 
 const route = useRoute()
 

src/layout/index.vue

@@ -203,7 +203,7 @@ header + .wrapper {
     .main-container {
         .topbar-container {
             top: $g-header-height;
-            :deep(.user) {
+            :deep(.tools) {
                 display: none;
             }
         }

src/router/index.js

@@ -1,11 +1,13 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import NProgress from 'nprogress'
-import 'nprogress/nprogress.css' // progress bar style
 import { useSettingsOutsideStore } from '@/store/modules/settings'
 import { useKeepAliveOutsideStore } from '@/store/modules/keepAlive'
 import { useUserOutsideStore } from '@/store/modules/user'
 import { useMenuOutsideStore } from '@/store/modules/menu'
 
+import './nprogress.css'
+import { useNProgress } from '@vueuse/integrations/useNProgress'
+const { isLoading } = useNProgress()
+
 // 固定路由
 const constantRoutes = [
     {
@@ -140,7 +142,7 @@ router.beforeEach(async(to, from, next) => {
     const settingsOutsideStore = useSettingsOutsideStore()
     const userOutsideStore = useUserOutsideStore()
     const menuOutsideStore = useMenuOutsideStore()
-    settingsOutsideStore.enableProgress && NProgress.start()
+    settingsOutsideStore.enableProgress && (isLoading.value = true)
     // 是否已登录
     if (userOutsideStore.isLogin) {
         // 是否已根据权限动态生成并挂载路由
@@ -212,7 +214,7 @@ router.beforeEach(async(to, from, next) => {
 router.afterEach((to, from) => {
     const settingsOutsideStore = useSettingsOutsideStore()
     const keepAliveOutsideStore = useKeepAliveOutsideStore()
-    settingsOutsideStore.enableProgress && NProgress.done()
+    settingsOutsideStore.enableProgress && (isLoading.value = false)
     // 设置页面 title
     to.meta.title && settingsOutsideStore.setTitle(typeof to.meta.title === 'function' ? to.meta.title() : to.meta.title)
     // 判断当前页面是否开启缓存，如果开启，则将当前页面的 name 信息存入 keep-alive 全局状态

src/router/nprogress.css

@@ -0,0 +1,41 @@
+/* Make clicks pass-through */
+#nprogress {
+    pointer-events: none;
+}
+#nprogress .bar {
+    background: #29d;
+    position: fixed;
+    z-index: 1031;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+    display: block;
+    position: absolute;
+    right: 0;
+    width: 100px;
+    height: 100%;
+    box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+    opacity: 1;
+    transform: rotate(3deg) translate(0, -4px);
+}
+.nprogress-custom-parent {
+    overflow: hidden;
+    position: relative;
+}
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+    position: absolute;
+}
+@keyframes nprogress-spinner {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}

src/settings.js

@@ -24,7 +24,7 @@ let globalSettings = {
     switchSidebarAndPageJump: false,
     // 侧边栏只保持一个子菜单的展开
     sidebarUniqueOpened: true,
-    // 顶栏（顶部导航栏和标签栏）是否固定
+    // 顶栏是否固定
     topbarFixed: true,
     // 是否开启面包屑导航
     enableBreadcrumb: true,

src/views/index.vue

@@ -96,111 +96,6 @@
                 </page-main>
             </el-col>
         </el-row>
-        <page-main>
-            <el-row :gutter="20">
-                <el-col :md="8">
-                    <el-card shadow="hover" class="cube-card">
-                        <template #header>
-                            <div class="header">
-                                访客数据魔方
-                                <el-select v-model="type" size="mini" placeholder="请选择">
-                                    <el-option label="今天 - 昨天" :value="1" />
-                                    <el-option label="本周 - 上周" :value="2" />
-                                    <el-option label="本月 - 上月" :value="3" />
-                                    <el-option label="今年 - 去年" :value="4" />
-                                </el-select>
-                            </div>
-                        </template>
-                        <el-row :gutter="10">
-                            <el-col :span="10">
-                                <div class="today">123</div>
-                                <div class="sub-title">{{ titlePrefix[0] }}访问量（单位：PV）</div>
-                            </el-col>
-                            <el-col :span="10">
-                                <div class="yesterday">123</div>
-                                <div class="sub-title">{{ titlePrefix[1] }}访问量（单位：PV）</div>
-                            </el-col>
-                            <el-col :span="4">
-                                <div class="contrast">12</div>
-                                <div class="sub-title">对比</div>
-                            </el-col>
-                        </el-row>
-                        <el-row :gutter="10">
-                            <el-col :span="10">
-                                <div class="today">123</div>
-                                <div class="sub-title">{{ titlePrefix[0] }}访问量（单位：UV）</div>
-                            </el-col>
-                            <el-col :span="10">
-                                <div class="yesterday">123</div>
-                                <div class="sub-title">{{ titlePrefix[1] }}访问量（单位：UV）</div>
-                            </el-col>
-                            <el-col :span="4">
-                                <div class="contrast">12</div>
-                                <div class="sub-title">对比</div>
-                            </el-col>
-                        </el-row>
-                    </el-card>
-                </el-col>
-                <el-col :md="8">
-                    <el-card shadow="hover" class="cube-card">
-                        <template #header>
-                            <div class="header">
-                                下载数据魔方
-                                <el-select v-model="type" size="mini" placeholder="请选择">
-                                    <el-option label="今天 - 昨天" :value="1" />
-                                    <el-option label="本周 - 上周" :value="2" />
-                                    <el-option label="本月 - 上月" :value="3" />
-                                    <el-option label="今年 - 去年" :value="4" />
-                                </el-select>
-                            </div>
-                        </template>
-                        <el-row :gutter="10">
-                            <el-col :span="10">
-                                <div class="today">123</div>
-                                <div class="sub-title">{{ titlePrefix[0] }}下载量（单位：次）</div>
-                            </el-col>
-                            <el-col :span="10">
-                                <div class="yesterday">123</div>
-                                <div class="sub-title">{{ titlePrefix[1] }}下载量（单位：次）</div>
-                            </el-col>
-                            <el-col :span="4">
-                                <div class="contrast">12</div>
-                                <div class="sub-title">对比</div>
-                            </el-col>
-                        </el-row>
-                    </el-card>
-                </el-col>
-                <el-col :md="8">
-                    <el-card shadow="hover" class="cube-card">
-                        <template #header>
-                            <div class="header">
-                                销售数据魔方
-                                <el-select v-model="type" size="mini" placeholder="请选择">
-                                    <el-option label="今天 - 昨天" :value="1" />
-                                    <el-option label="本周 - 上周" :value="2" />
-                                    <el-option label="本月 - 上月" :value="3" />
-                                    <el-option label="今年 - 去年" :value="4" />
-                                </el-select>
-                            </div>
-                        </template>
-                        <el-row :gutter="10">
-                            <el-col :span="10">
-                                <div class="today">123</div>
-                                <div class="sub-title">{{ titlePrefix[0] }}销售总金额（单位：人民币）</div>
-                            </el-col>
-                            <el-col :span="10">
-                                <div class="yesterday">123</div>
-                                <div class="sub-title">{{ titlePrefix[1] }}销售总金额（单位：人民币）</div>
-                            </el-col>
-                            <el-col :span="4">
-                                <div class="contrast">12</div>
-                                <div class="sub-title">对比</div>
-                            </el-col>
-                        </el-row>
-                    </el-card>
-                </el-col>
-            </el-row>
-        </page-main>
     </div>
 </template>
 
@@ -355,39 +250,4 @@ export default {
         font-size: 14px;
     }
 }
-.cube-card {
-    :deep(.el-col) {
-        margin-top: 10px;
-        margin-bottom: 20px;
-    }
-    .header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .el-select {
-            width: 120px;
-        }
-    }
-    .today,
-    .yesterday,
-    .contrast {
-        font-size: 24px;
-        line-height: 30px;
-    }
-    .today {
-        font-weight: bold;
-        color: #9d8254;
-    }
-    .yesterday {
-        color: #666;
-    }
-    .contrast::after {
-        content: "%";
-    }
-    .sub-title {
-        font-size: 12px;
-        line-height: 18px;
-        color: #98a4b0;
-    }
-}
 </style>