From d6f5237c8c167314d578312dcad7505737f0b4c8 Mon Sep 17 00:00:00 2001
From: Soybean <2570172956@qq.com>
Date: Mon, 20 Sep 2021 18:55:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E6=B7=BB=E5=8A=A0=E5=A4=9A?=
 =?UTF-8?q?=E9=A1=B5=E7=AD=BE=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   5 +-
 pnpm-lock.yaml                                |  75 +++++------
 .../common/HoverContainer/index.vue           |  37 ++++++
 src/components/common/index.ts                |   3 +-
 src/components/index.ts                       |   2 +-
 src/context/app/useReloadContext.ts           |   6 +-
 src/context/index.ts                          |   2 -
 src/context/part/index.ts                     |   5 -
 src/context/part/useHoverIndexContext.ts      |  39 ------
 src/hooks/common/index.ts                     |   3 +-
 src/hooks/common/useLoading.ts                |  11 ++
 src/hooks/index.ts                            |  10 +-
 .../GlobalHeader/components/FullScreen.vue    |   6 +-
 .../GlobalHeader/components/GihubSite.vue     |   6 +-
 .../GlobalHeader/components/HeaderItem.vue    |   8 --
 .../GlobalHeader/components/MenuCollapse.vue  |   6 +-
 .../components/SettingDrawerButton.vue        |   6 +-
 .../GlobalHeader/components/UserAvatar.vue    |   6 +-
 .../GlobalHeader/components/index.ts          |   3 +-
 .../GlobalTab/components/ButtonTab/index.vue  |  32 +++--
 .../components/ContextMenu/index.vue          | 116 ++++++++++++++++++
 .../components/ReloadButton/index.vue         |  35 ++++++
 .../components/GlobalTab/components/index.ts  |   4 +-
 .../components/GlobalTab/index.vue            |  46 +++++--
 .../components/NavMode/components/NavType.vue |   5 +-
 src/layouts/BasicLayout/index.vue             |   6 +-
 src/layouts/composables/index.ts              |   1 -
 src/router/routes.ts                          |   2 +-
 src/settings/theme.ts                         |   2 +-
 src/store/modules/app/index.ts                |  18 ++-
 src/views/dashboard/analysis/index.vue        |  17 ++-
 src/views/dashboard/workbench/index.vue       |   5 +-
 windi.config.ts                               |   2 +-
 33 files changed, 362 insertions(+), 168 deletions(-)
 create mode 100644 src/components/common/HoverContainer/index.vue
 delete mode 100644 src/context/part/useHoverIndexContext.ts
 create mode 100644 src/hooks/common/useLoading.ts
 delete mode 100644 src/layouts/BasicLayout/components/GlobalHeader/components/HeaderItem.vue
 create mode 100644 src/layouts/BasicLayout/components/GlobalTab/components/ContextMenu/index.vue
 create mode 100644 src/layouts/BasicLayout/components/GlobalTab/components/ReloadButton/index.vue

diff --git a/package.json b/package.json
index d53ea965..3056b80f 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
   "devDependencies": {
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
-    "@iconify/json": "^1.1.403",
+    "@iconify/json": "^1.1.404",
     "@iconify/vue": "^3.0.0",
     "@types/chroma-js": "^2.1.3",
     "@types/qs": "^6.9.7",
@@ -46,7 +46,7 @@
     "@vicons/ionicons5": "^0.11.0",
     "@vicons/material": "^0.11.0",
     "@vicons/tabler": "^0.11.0",
-    "@vitejs/plugin-vue": "^1.8.0",
+    "@vitejs/plugin-vue": "^1.8.1",
     "@vue/compiler-sfc": "^3.2.12",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
@@ -73,6 +73,7 @@
     "vite-plugin-html": "^2.1.0",
     "vite-plugin-windicss": "^1.4.3",
     "vue-tsc": "^0.3.0",
+    "vueuc": "^0.4.10",
     "windicss": "^3.1.7"
   },
   "config": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c82d9620..84350003 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,7 +3,7 @@ lockfileVersion: 5.3
 specifiers:
   '@commitlint/cli': ^13.1.0
   '@commitlint/config-conventional': ^13.1.0
-  '@iconify/json': ^1.1.403
+  '@iconify/json': ^1.1.404
   '@iconify/vue': ^3.0.0
   '@types/chroma-js': ^2.1.3
   '@types/qs': ^6.9.7
@@ -17,7 +17,7 @@ specifiers:
   '@vicons/ionicons5': ^0.11.0
   '@vicons/material': ^0.11.0
   '@vicons/tabler': ^0.11.0
-  '@vitejs/plugin-vue': ^1.8.0
+  '@vitejs/plugin-vue': ^1.8.1
   '@vue/compiler-sfc': ^3.2.12
   '@vue/eslint-config-prettier': ^6.0.0
   '@vue/eslint-config-typescript': ^7.0.0
@@ -54,6 +54,7 @@ specifiers:
   vue: ^3.2.10
   vue-router: ^4.0.11
   vue-tsc: ^0.3.0
+  vueuc: ^0.4.10
   windicss: ^3.1.7
 
 dependencies:
@@ -71,7 +72,7 @@ dependencies:
 devDependencies:
   '@commitlint/cli': registry.nlark.com/@commitlint/cli/13.1.0
   '@commitlint/config-conventional': registry.nlark.com/@commitlint/config-conventional/13.1.0
-  '@iconify/json': registry.nlark.com/@iconify/json/1.1.403
+  '@iconify/json': registry.nlark.com/@iconify/json/1.1.404
   '@iconify/vue': registry.nlark.com/@iconify/vue/3.0.0_vue@3.2.10
   '@types/chroma-js': registry.nlark.com/@types/chroma-js/2.1.3
   '@types/qs': registry.nlark.com/@types/qs/6.9.7
@@ -85,7 +86,7 @@ devDependencies:
   '@vicons/ionicons5': registry.nlark.com/@vicons/ionicons5/0.11.0
   '@vicons/material': registry.nlark.com/@vicons/material/0.11.0
   '@vicons/tabler': registry.nlark.com/@vicons/tabler/0.11.0
-  '@vitejs/plugin-vue': registry.nlark.com/@vitejs/plugin-vue/1.8.0_ece4885f8f1ae7d2e7306f4ece6a44cf
+  '@vitejs/plugin-vue': registry.nlark.com/@vitejs/plugin-vue/1.8.1_ece4885f8f1ae7d2e7306f4ece6a44cf
   '@vue/compiler-sfc': registry.nlark.com/@vue/compiler-sfc/3.2.12
   '@vue/eslint-config-prettier': 6.0.0_07ea7830c059e0b322b8e6cb8d02712b
   '@vue/eslint-config-typescript': 7.0.0_8accd92160de6f0c5ceb40584f283975
@@ -106,12 +107,13 @@ devDependencies:
   prettier: registry.nlark.com/prettier/2.4.1
   sass: registry.nlark.com/sass/1.41.1
   typescript: registry.nlark.com/typescript/4.4.3
-  unplugin-icons: registry.nlark.com/unplugin-icons/0.11.1_bb95034bcf609147e95709faffdd4405
+  unplugin-icons: registry.nlark.com/unplugin-icons/0.11.1_4242227f15d365faebe5884deb26575d
   unplugin-vue-components: registry.nlark.com/unplugin-vue-components/0.15.1_vite@2.5.10+vue@3.2.10
   vite: registry.nlark.com/vite/2.5.10
   vite-plugin-html: registry.nlark.com/vite-plugin-html/2.1.0_vite@2.5.10
   vite-plugin-windicss: registry.nlark.com/vite-plugin-windicss/1.4.3_typescript@4.4.3+vite@2.5.10
   vue-tsc: registry.nlark.com/vue-tsc/0.3.0_typescript@4.4.3
+  vueuc: registry.nlark.com/vueuc/0.4.10_vue@3.2.10
   windicss: registry.nlark.com/windicss/3.1.7
 
 packages:
@@ -2067,7 +2069,6 @@ packages:
     resolution: {integrity: sha1-u7/2iXj+/b5ozLUzvIy+HRr7VBM=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@emotion/hash/download/@emotion/hash-0.8.0.tgz}
     name: '@emotion/hash'
     version: 0.8.0
-    dev: false
 
   registry.nlark.com/@eslint/eslintrc/0.4.3:
     resolution: {integrity: sha1-nkKYHvA1vrPdSa3ResuW6P9vOUw=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@eslint/eslintrc/download/@eslint/eslintrc-0.4.3.tgz}
@@ -2113,10 +2114,10 @@ packages:
     version: 1.0.10
     dev: true
 
-  registry.nlark.com/@iconify/json/1.1.403:
-    resolution: {integrity: sha1-uexHeSNI5vne5oWu108tboqLpKw=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@iconify/json/download/@iconify/json-1.1.403.tgz}
+  registry.nlark.com/@iconify/json/1.1.404:
+    resolution: {integrity: sha1-CR9URqoNaPhBWSPPmyHOlL2Nmt4=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@iconify/json/download/@iconify/json-1.1.404.tgz}
     name: '@iconify/json'
-    version: 1.1.403
+    version: 1.1.404
     dev: true
 
   registry.nlark.com/@iconify/vue/3.0.0_vue@3.2.10:
@@ -2141,7 +2142,6 @@ packages:
       '@types/node': registry.nlark.com/@types/node/16.6.2
       '@types/yargs': registry.nlark.com/@types/yargs/15.0.14
       chalk: registry.nlark.com/chalk/4.1.2
-    dev: false
 
   registry.nlark.com/@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha1-dhnC6yGyVIP20WdUi0z9WnSIw9U=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@nodelib/fs.scandir/download/@nodelib/fs.scandir-2.1.5.tgz?cache=0&sync_timestamp=1622793808741&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40nodelib%2Ffs.scandir%2Fdownload%2F%40nodelib%2Ffs.scandir-2.1.5.tgz}
@@ -2196,7 +2196,6 @@ packages:
     resolution: {integrity: sha1-S6jdtyAiH0MuRDvV+RF/0iz9R2I=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/istanbul-lib-coverage/download/@types/istanbul-lib-coverage-2.0.3.tgz}
     name: '@types/istanbul-lib-coverage'
     version: 2.0.3
-    dev: false
 
   registry.nlark.com/@types/istanbul-lib-report/3.0.0:
     resolution: {integrity: sha1-wUwk8Y6oGQwRjudWK3/5mjZVJoY=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/istanbul-lib-report/download/@types/istanbul-lib-report-3.0.0.tgz}
@@ -2204,7 +2203,6 @@ packages:
     version: 3.0.0
     dependencies:
       '@types/istanbul-lib-coverage': registry.nlark.com/@types/istanbul-lib-coverage/2.0.3
-    dev: false
 
   registry.nlark.com/@types/istanbul-reports/3.0.1:
     resolution: {integrity: sha1-kVP+mLuivVZaY63ZQ21vDX+EaP8=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/istanbul-reports/download/@types/istanbul-reports-3.0.1.tgz}
@@ -2212,7 +2210,6 @@ packages:
     version: 3.0.1
     dependencies:
       '@types/istanbul-lib-report': registry.nlark.com/@types/istanbul-lib-report/3.0.0
-    dev: false
 
   registry.nlark.com/@types/jest/26.0.24:
     resolution: {integrity: sha1-lD0Rl2sWc5GFkToZNuDeDEp9WVo=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/jest/download/@types/jest-26.0.24.tgz?cache=0&sync_timestamp=1631611929928&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fjest%2Fdownload%2F%40types%2Fjest-26.0.24.tgz}
@@ -2221,7 +2218,6 @@ packages:
     dependencies:
       jest-diff: registry.nlark.com/jest-diff/26.6.2
       pretty-format: registry.nlark.com/pretty-format/26.6.2
-    dev: false
 
   registry.nlark.com/@types/json-schema/7.0.9:
     resolution: {integrity: sha1-l+3JA36gw4WFMgsolk3eOznkZg0=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/json-schema/download/@types/json-schema-7.0.9.tgz}
@@ -2253,19 +2249,16 @@ packages:
     resolution: {integrity: sha1-7C37VWb/gU0GGu9+FBV1rtuiRc8=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/node/download/@types/node-14.14.45.tgz}
     name: '@types/node'
     version: 14.14.45
-    dev: false
 
   registry.nlark.com/@types/node/14.17.10:
     resolution: {integrity: sha1-k/Swla8nWgQnEUV5wQ7HqmlnKdc=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/node/download/@types/node-14.17.10.tgz}
     name: '@types/node'
     version: 14.17.10
-    dev: false
 
   registry.nlark.com/@types/node/16.6.2:
     resolution: {integrity: sha1-Mxt7n4YhxjgoR4fFVZQjgi/f/FA=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/node/download/@types/node-16.6.2.tgz}
     name: '@types/node'
     version: 16.6.2
-    dev: false
 
   registry.nlark.com/@types/normalize-package-data/2.4.1:
     resolution: {integrity: sha1-0zV0eaD9/dWQf+Z+F+CoXJBuEwE=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/normalize-package-data/download/@types/normalize-package-data-2.4.1.tgz}
@@ -2295,7 +2288,6 @@ packages:
     resolution: {integrity: sha1-O5ziSJkZ2eT+pDm3aRarw0st8Sk=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/yargs-parser/download/@types/yargs-parser-20.2.1.tgz}
     name: '@types/yargs-parser'
     version: 20.2.1
-    dev: false
 
   registry.nlark.com/@types/yargs/15.0.14:
     resolution: {integrity: sha1-Jtgh3biecEkhYLZtEKDrbfj2+wY=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/yargs/download/@types/yargs-15.0.14.tgz}
@@ -2303,7 +2295,6 @@ packages:
     version: 15.0.14
     dependencies:
       '@types/yargs-parser': registry.nlark.com/@types/yargs-parser/20.2.1
-    dev: false
 
   registry.nlark.com/@typescript-eslint/eslint-plugin/4.31.1_e2d3c88d378335c4183365c112128ce9:
     resolution: {integrity: sha1-6ThgOhNvAdyr7s4GnaX7LjMdRJg=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@typescript-eslint/eslint-plugin/download/@typescript-eslint/eslint-plugin-4.31.1.tgz?cache=0&sync_timestamp=1631554210620&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40typescript-eslint%2Feslint-plugin%2Fdownload%2F%40typescript-eslint%2Feslint-plugin-4.31.1.tgz}
@@ -2476,11 +2467,11 @@ packages:
     version: 0.11.0
     dev: true
 
-  registry.nlark.com/@vitejs/plugin-vue/1.8.0_ece4885f8f1ae7d2e7306f4ece6a44cf:
-    resolution: {integrity: sha1-QSsPKA7trU+tmCoLPxrntL0Siu4=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@vitejs/plugin-vue/download/@vitejs/plugin-vue-1.8.0.tgz}
-    id: registry.nlark.com/@vitejs/plugin-vue/1.8.0
+  registry.nlark.com/@vitejs/plugin-vue/1.8.1_ece4885f8f1ae7d2e7306f4ece6a44cf:
+    resolution: {integrity: sha1-bMKo39BCAePIaMI5CRqqiap1+IA=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@vitejs/plugin-vue/download/@vitejs/plugin-vue-1.8.1.tgz}
+    id: registry.nlark.com/@vitejs/plugin-vue/1.8.1
     name: '@vitejs/plugin-vue'
-    version: 1.8.0
+    version: 1.8.1
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@vue/compiler-sfc': ^3.2.6
@@ -2836,7 +2827,6 @@ packages:
     name: ansi-regex
     version: 5.0.0
     engines: {node: '>=8'}
-    dev: false
 
   registry.nlark.com/ansi-styles/3.2.1:
     resolution: {integrity: sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/ansi-styles/download/ansi-styles-3.2.1.tgz}
@@ -3223,7 +3213,6 @@ packages:
       '@emotion/hash': registry.nlark.com/@emotion/hash/0.8.0
       '@types/node': registry.nlark.com/@types/node/14.14.45
       csstype: registry.nlark.com/csstype/3.0.8
-    dev: false
 
   registry.nlark.com/cssesc/3.0.0:
     resolution: {integrity: sha1-N3QZGZA7hoVl4cCep0dEXNGJg+4=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/cssesc/download/cssesc-3.0.0.tgz}
@@ -3243,7 +3232,6 @@ packages:
     resolution: {integrity: sha1-0iZqeScp+yJ80hb7Vy9Dco4a00A=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/csstype/download/csstype-3.0.8.tgz}
     name: csstype
     version: 3.0.8
-    dev: false
 
   registry.nlark.com/cz-conventional-changelog/3.2.0:
     resolution: {integrity: sha1-au8fiS1kETND1+RVUpCJrJ8g5Hc=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/cz-conventional-changelog/download/cz-conventional-changelog-3.2.0.tgz}
@@ -3364,7 +3352,6 @@ packages:
     name: diff-sequences
     version: 26.6.2
     engines: {node: '>= 10.14.2'}
-    dev: false
 
   registry.nlark.com/doctypes/1.1.0:
     resolution: {integrity: sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/doctypes/download/doctypes-1.1.0.tgz}
@@ -3739,7 +3726,6 @@ packages:
     resolution: {integrity: sha1-vrvifhWu3B1cGLwmIN/JDyYHh8M=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/evtd/download/evtd-0.2.2.tgz}
     name: evtd
     version: 0.2.2
-    dev: false
 
   registry.nlark.com/execa/5.1.1:
     resolution: {integrity: sha1-+ArZy/Qpj3vR1MlVXCHpN0HEEd0=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/execa/download/execa-5.1.1.tgz?cache=0&sync_timestamp=1622875983744&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fexeca%2Fdownload%2Fexeca-5.1.1.tgz}
@@ -4363,14 +4349,12 @@ packages:
       diff-sequences: registry.nlark.com/diff-sequences/26.6.2
       jest-get-type: registry.nlark.com/jest-get-type/26.3.0
       pretty-format: registry.nlark.com/pretty-format/26.6.2
-    dev: false
 
   registry.nlark.com/jest-get-type/26.3.0:
     resolution: {integrity: sha1-6X3Dw/U8K0Bsp6+u1Ek7HQmRmeA=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/jest-get-type/download/jest-get-type-26.3.0.tgz}
     name: jest-get-type
     version: 26.3.0
     engines: {node: '>= 10.14.2'}
-    dev: false
 
   registry.nlark.com/jiti/1.12.0:
     resolution: {integrity: sha1-b24ZCPlCUHViZABpLwttkC2yYuQ=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/jiti/download/jiti-1.12.0.tgz?cache=0&sync_timestamp=1631530402093&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fjiti%2Fdownload%2Fjiti-1.12.0.tgz}
@@ -5086,7 +5070,6 @@ packages:
       ansi-regex: registry.nlark.com/ansi-regex/5.0.0
       ansi-styles: registry.nlark.com/ansi-styles/4.3.0
       react-is: registry.nlark.com/react-is/17.0.2
-    dev: false
 
   registry.nlark.com/promise/7.3.1:
     resolution: {integrity: sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/promise/download/promise-7.3.1.tgz}
@@ -5228,7 +5211,6 @@ packages:
     resolution: {integrity: sha1-5pHUqOnHiTZWVVOas3J2Kw77VPA=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/react-is/download/react-is-17.0.2.tgz}
     name: react-is
     version: 17.0.2
-    dev: false
 
   registry.nlark.com/read-pkg/3.0.0:
     resolution: {integrity: sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/read-pkg/download/read-pkg-3.0.0.tgz?cache=0&sync_timestamp=1628985520600&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fread-pkg%2Fdownload%2Fread-pkg-3.0.0.tgz}
@@ -5289,7 +5271,6 @@ packages:
     resolution: {integrity: sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz}
     name: resize-observer-polyfill
     version: 1.5.1
-    dev: false
 
   registry.nlark.com/resolve-from/5.0.0:
     resolution: {integrity: sha1-w1IlhD3493bfIcV1V7wIfp39/Gk=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/resolve-from/download/resolve-from-5.0.0.tgz}
@@ -5358,7 +5339,6 @@ packages:
     version: 0.3.1
     dependencies:
       '@types/jest': registry.nlark.com/@types/jest/26.0.24
-    dev: false
 
   registry.nlark.com/semver/6.3.0:
     resolution: {integrity: sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/semver/download/semver-6.3.0.tgz?cache=0&sync_timestamp=1631500167672&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsemver%2Fdownload%2Fsemver-6.3.0.tgz}
@@ -5706,7 +5686,7 @@ packages:
     hasBin: true
     dev: true
 
-  registry.nlark.com/unplugin-icons/0.11.1_bb95034bcf609147e95709faffdd4405:
+  registry.nlark.com/unplugin-icons/0.11.1_4242227f15d365faebe5884deb26575d:
     resolution: {integrity: sha1-nodRKlzdyx0RPsD6N+xtlR/IS8U=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/unplugin-icons/download/unplugin-icons-0.11.1.tgz}
     id: registry.nlark.com/unplugin-icons/0.11.1
     name: unplugin-icons
@@ -5728,7 +5708,7 @@ packages:
         optional: true
     dependencies:
       '@antfu/utils': registry.nlark.com/@antfu/utils/0.3.0
-      '@iconify/json': registry.nlark.com/@iconify/json/1.1.403
+      '@iconify/json': registry.nlark.com/@iconify/json/1.1.404
       '@iconify/json-tools': registry.nlark.com/@iconify/json-tools/1.0.10
       '@vue/compiler-sfc': registry.nlark.com/@vue/compiler-sfc/3.2.12
       has-pkg: registry.nlark.com/has-pkg/0.0.1
@@ -5811,7 +5791,6 @@ packages:
       '@types/node': registry.nlark.com/@types/node/14.17.10
       evtd: registry.nlark.com/evtd/0.2.2
       vue: registry.nlark.com/vue/3.2.10
-    dev: false
 
   registry.nlark.com/vfonts/0.1.0:
     resolution: {integrity: sha1-wWrzfKBEsnJa5VVTBJKA775iIqk=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/vfonts/download/vfonts-0.1.0.tgz}
@@ -5887,7 +5866,6 @@ packages:
     dependencies:
       evtd: registry.nlark.com/evtd/0.2.2
       vue: registry.nlark.com/vue/3.2.10
-    dev: false
 
   registry.nlark.com/vscode-css-languageservice/5.1.5:
     resolution: {integrity: sha1-QAsvY6T3PGD1sK/EjEeMGzJrJ8Y=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/vscode-css-languageservice/download/vscode-css-languageservice-5.1.5.tgz}
@@ -6047,9 +6025,6 @@ packages:
     peerDependencies:
       '@vue/composition-api': ^1.0.0-rc.1
       vue: ^3.0.0-0 || ^2.6.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
     dependencies:
       vue: registry.nlark.com/vue/3.2.10
     dev: false
@@ -6129,6 +6104,24 @@ packages:
       vue: registry.nlark.com/vue/3.2.10
     dev: false
 
+  registry.nlark.com/vueuc/0.4.10_vue@3.2.10:
+    resolution: {integrity: sha1-ria6dqCvFU+KE57zcYE1osat9nY=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/vueuc/download/vueuc-0.4.10.tgz}
+    id: registry.nlark.com/vueuc/0.4.10
+    name: vueuc
+    version: 0.4.10
+    peerDependencies:
+      '@css-render/vue3-ssr': ^0.15.3
+      vue: ^3.0.11
+    dependencies:
+      css-render: registry.nlark.com/css-render/0.15.6
+      evtd: registry.nlark.com/evtd/0.2.2
+      resize-observer-polyfill: registry.nlark.com/resize-observer-polyfill/1.5.1
+      seemly: registry.nlark.com/seemly/0.3.1
+      vdirs: registry.nlark.com/vdirs/0.1.4_vue@3.2.10
+      vooks: registry.nlark.com/vooks/0.2.8_vue@3.2.10
+      vue: registry.nlark.com/vue/3.2.10
+    dev: true
+
   registry.nlark.com/webpack-virtual-modules/0.4.3:
     resolution: {integrity: sha1-zVl8bVHVpey0c+6hmDpY+ooX3tk=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/webpack-virtual-modules/download/webpack-virtual-modules-0.4.3.tgz?cache=0&sync_timestamp=1620993523325&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwebpack-virtual-modules%2Fdownload%2Fwebpack-virtual-modules-0.4.3.tgz}
     name: webpack-virtual-modules
diff --git a/src/components/common/HoverContainer/index.vue b/src/components/common/HoverContainer/index.vue
new file mode 100644
index 00000000..980f5db2
--- /dev/null
+++ b/src/components/common/HoverContainer/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <div v-if="showTooltip">
+    <n-tooltip :placement="placement" trigger="hover">
+      <template #trigger>
+        <div class="flex-center h-full cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]">
+          <slot></slot>
+        </div>
+      </template>
+      {{ content }}
+    </n-tooltip>
+  </div>
+  <div v-else class="flex-center cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+import { NTooltip } from 'naive-ui';
+import type { FollowerPlacement } from 'vueuc';
+
+defineProps({
+  showTooltip: {
+    type: Boolean,
+    default: true
+  },
+  placement: {
+    type: String as PropType<FollowerPlacement>,
+    default: 'bottom'
+  },
+  content: {
+    type: String,
+    default: ''
+  }
+});
+</script>
+<style scoped></style>
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 5cc976be..3677b762 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -3,5 +3,6 @@ import SystemLogo from './SystemLogo/index.vue';
 import ExceptionSvg from './ExceptionSvg/index.vue';
 import LoginBg from './LoginBg/index.vue';
 import BannerSvg from './BannerSvg/index.vue';
+import HoverContainer from './HoverContainer/index.vue';
 
-export { AppProviderContent, SystemLogo, ExceptionSvg, LoginBg, BannerSvg };
+export { AppProviderContent, SystemLogo, ExceptionSvg, LoginBg, BannerSvg, HoverContainer };
diff --git a/src/components/index.ts b/src/components/index.ts
index 3becafa9..37ef6820 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,2 +1,2 @@
-export { AppProviderContent, SystemLogo, ExceptionSvg, LoginBg, BannerSvg } from './common';
+export { AppProviderContent, SystemLogo, ExceptionSvg, LoginBg, BannerSvg, HoverContainer } from './common';
 export { CountTo } from './custom';
diff --git a/src/context/app/useReloadContext.ts b/src/context/app/useReloadContext.ts
index 70670395..db4b3a14 100644
--- a/src/context/app/useReloadContext.ts
+++ b/src/context/app/useReloadContext.ts
@@ -14,16 +14,14 @@ export default function useReloadContext() {
   function handleReload() {
     reload.value = false;
     nextTick(() => {
-      nextTick(() => {
-        reload.value = true;
-      });
+      reload.value = true;
     });
   }
+
   const context: ReloadContext = {
     reload,
     handleReload
   };
-
   function useReloadProvide() {
     useProvide(context);
   }
diff --git a/src/context/index.ts b/src/context/index.ts
index 8ab09646..659c3605 100644
--- a/src/context/index.ts
+++ b/src/context/index.ts
@@ -1,3 +1 @@
 export { setupAppContext, useReloadInject } from './app';
-
-export { useHoverIndexProvide, useHoverIndexInject } from './part';
diff --git a/src/context/part/index.ts b/src/context/part/index.ts
index 3d5166fe..e69de29b 100644
--- a/src/context/part/index.ts
+++ b/src/context/part/index.ts
@@ -1,5 +0,0 @@
-import useHoverIndexContext from './useHoverIndexContext';
-
-const { useHoverIndexProvide, useHoverIndexInject } = useHoverIndexContext();
-
-export { useHoverIndexProvide, useHoverIndexInject };
diff --git a/src/context/part/useHoverIndexContext.ts b/src/context/part/useHoverIndexContext.ts
deleted file mode 100644
index 95d49b2e..00000000
--- a/src/context/part/useHoverIndexContext.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { ref } from 'vue';
-import type { Ref } from 'vue';
-import { useContext } from '@/hooks';
-
-interface HoverIndexContext {
-  /** 被悬浮元素索引 */
-  index: Ref<number>;
-  /** 设置索引 */
-  setHoverIndex(index: number): void;
-  /** 重置索引 */
-  resetHoverIndex(): void;
-}
-const { useProvide, useInject: useHoverIndexInject } = useContext<HoverIndexContext>();
-
-/** 获取被悬浮元素的索引上下文 */
-export default function useHoverIndexContext() {
-  const index = ref(-1);
-  function setHoverIndex(hIndex: number) {
-    index.value = hIndex;
-  }
-  function resetHoverIndex() {
-    index.value = -1;
-  }
-
-  const context: HoverIndexContext = {
-    index,
-    setHoverIndex,
-    resetHoverIndex
-  };
-  function useHoverIndexProvide() {
-    useProvide(context);
-  }
-
-  return {
-    context,
-    useHoverIndexProvide,
-    useHoverIndexInject
-  };
-}
diff --git a/src/hooks/common/index.ts b/src/hooks/common/index.ts
index 8a9b1829..22e574b5 100644
--- a/src/hooks/common/index.ts
+++ b/src/hooks/common/index.ts
@@ -4,5 +4,6 @@ import useRouterChange from './useRouterChange';
 import useRouteParam from './useRouteParam';
 import useRouteQuery from './useRouteQuery';
 import useBoolean from './useBoolean';
+import useLoading from './useLoading';
 
-export { useAppTitle, useContext, useRouterChange, useRouteParam, useRouteQuery, useBoolean };
+export { useAppTitle, useContext, useRouterChange, useRouteParam, useRouteQuery, useBoolean, useLoading };
diff --git a/src/hooks/common/useLoading.ts b/src/hooks/common/useLoading.ts
new file mode 100644
index 00000000..f6cabb88
--- /dev/null
+++ b/src/hooks/common/useLoading.ts
@@ -0,0 +1,11 @@
+import useBoolean from './useBoolean';
+
+export default function useLoading(initValue: boolean = false) {
+  const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean(initValue);
+
+  return {
+    loading,
+    startLoading,
+    endLoading
+  };
+}
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index ddd70158..d169464f 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,2 +1,10 @@
-export { useAppTitle, useContext, useRouterChange, useRouteParam, useRouteQuery, useBoolean } from './common';
+export {
+  useAppTitle,
+  useContext,
+  useRouterChange,
+  useRouteParam,
+  useRouteQuery,
+  useBoolean,
+  useLoading
+} from './common';
 export { useCountDown, useSmsCode } from './business';
diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/FullScreen.vue b/src/layouts/BasicLayout/components/GlobalHeader/components/FullScreen.vue
index 0d5deaf4..c35aa735 100644
--- a/src/layouts/BasicLayout/components/GlobalHeader/components/FullScreen.vue
+++ b/src/layouts/BasicLayout/components/GlobalHeader/components/FullScreen.vue
@@ -1,13 +1,13 @@
 <template>
-  <header-item class="w-40px h-full" @click="toggle">
+  <hover-container class="w-40px h-full" content="全屏" @click="toggle">
     <icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-16px" />
     <icon-gridicons-fullscreen v-else class="text-16px" />
-  </header-item>
+  </hover-container>
 </template>
 
 <script lang="ts" setup>
 import { useFullscreen } from '@vueuse/core';
-import HeaderItem from './HeaderItem.vue';
+import { HoverContainer } from '@/components';
 
 const { isFullscreen, toggle } = useFullscreen();
 </script>
diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/GihubSite.vue b/src/layouts/BasicLayout/components/GlobalHeader/components/GihubSite.vue
index a64a68c7..0964be09 100644
--- a/src/layouts/BasicLayout/components/GlobalHeader/components/GihubSite.vue
+++ b/src/layouts/BasicLayout/components/GlobalHeader/components/GihubSite.vue
@@ -1,12 +1,12 @@
 <template>
-  <header-item class="w-40px h-full">
+  <hover-container content="github" class="w-40px h-full">
     <a href="https://github.com/honghuangdc/soybean-admin" target="_blank" class="flex-center">
       <icon-mdi-github class="text-20px text-[#666]" />
     </a>
-  </header-item>
+  </hover-container>
 </template>
 
 <script lang="ts" setup>
-import HeaderItem from './HeaderItem.vue';
+import { HoverContainer } from '@/components';
 </script>
 <style scoped></style>
diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/HeaderItem.vue b/src/layouts/BasicLayout/components/GlobalHeader/components/HeaderItem.vue
deleted file mode 100644
index ccec0d10..00000000
--- a/src/layouts/BasicLayout/components/GlobalHeader/components/HeaderItem.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div class="flex-center cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]">
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts" setup></script>
-<style scoped></style>
diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/MenuCollapse.vue b/src/layouts/BasicLayout/components/GlobalHeader/components/MenuCollapse.vue
index a72f9c74..8c182dbc 100644
--- a/src/layouts/BasicLayout/components/GlobalHeader/components/MenuCollapse.vue
+++ b/src/layouts/BasicLayout/components/GlobalHeader/components/MenuCollapse.vue
@@ -1,13 +1,13 @@
 <template>
-  <header-item class="w-40px h-full" @click="toggleMenu">
+  <hover-container class="w-40px h-full" :show-tooltip="false" @click="toggleMenu">
     <icon-line-md-menu-unfold-left v-if="app.menu.collapsed" class="text-16px" />
     <icon-line-md-menu-fold-left v-else class="text-16px" />
-  </header-item>
+  </hover-container>
 </template>
 
 <script lang="ts" setup>
 import { useAppStore } from '@/store';
-import HeaderItem from './HeaderItem.vue';
+import { HoverContainer } from '@/components';
 
 const app = useAppStore();
 const { toggleMenu } = useAppStore();
diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/SettingDrawerButton.vue b/src/layouts/BasicLayout/components/GlobalHeader/components/SettingDrawerButton.vue
index 6a58efa7..d65c237e 100644
--- a/src/layouts/BasicLayout/components/GlobalHeader/components/SettingDrawerButton.vue
+++ b/src/layouts/BasicLayout/components/GlobalHeader/components/SettingDrawerButton.vue
@@ -1,12 +1,12 @@
 <template>
-  <header-item class="w-40px h-full" @click="openSettingDrawer">
+  <hover-container class="w-40px h-full" placement="bottom-end" content="项目配置" @click="openSettingDrawer">
     <icon-mdi-light-cog class="text-16px" />
-  </header-item>
+  </hover-container>
 </template>
 
 <script lang="ts" setup>
 import { useAppStore } from '@/store';
-import HeaderItem from './HeaderItem.vue';
+import { HoverContainer } from '@/components';
 
 const { openSettingDrawer } = useAppStore();
 </script>
diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/UserAvatar.vue b/src/layouts/BasicLayout/components/GlobalHeader/components/UserAvatar.vue
index 9e27be97..092807cd 100644
--- a/src/layouts/BasicLayout/components/GlobalHeader/components/UserAvatar.vue
+++ b/src/layouts/BasicLayout/components/GlobalHeader/components/UserAvatar.vue
@@ -1,9 +1,9 @@
 <template>
   <n-dropdown :options="options" @select="handleDropdown">
-    <header-item class="px-12px">
+    <hover-container class="px-12px" :show-tooltip="false">
       <n-avatar :src="avatar" size="small" :round="true" />
       <span class="pl-8px text-16px font-medium">Soybean</span>
-    </header-item>
+    </hover-container>
   </n-dropdown>
 </template>
 
@@ -11,7 +11,7 @@
 import { NDropdown, NAvatar } from 'naive-ui';
 import { UserAvatar, Logout } from '@vicons/carbon';
 import { dynamicIconRender, resetAuthStorage } from '@/utils';
-import HeaderItem from './HeaderItem.vue';
+import { HoverContainer } from '@/components';
 import avatar from '@/assets/img/common/logo-fill.png';
 
 type DropdownKey = 'user-center' | 'logout';
diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/index.ts b/src/layouts/BasicLayout/components/GlobalHeader/components/index.ts
index d86b6749..ef9b6715 100644
--- a/src/layouts/BasicLayout/components/GlobalHeader/components/index.ts
+++ b/src/layouts/BasicLayout/components/GlobalHeader/components/index.ts
@@ -4,6 +4,5 @@ import MenuCollapse from './MenuCollapse.vue';
 import FullScreen from './FullScreen.vue';
 import SettingDrawerButton from './SettingDrawerButton.vue';
 import GihubSite from './GihubSite.vue';
-import HeaderItem from './HeaderItem.vue';
 
-export { GlobalBreadcrumb, UserAvatar, MenuCollapse, FullScreen, SettingDrawerButton, GihubSite, HeaderItem };
+export { GlobalBreadcrumb, UserAvatar, MenuCollapse, FullScreen, SettingDrawerButton, GihubSite };
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/ButtonTab/index.vue b/src/layouts/BasicLayout/components/GlobalTab/components/ButtonTab/index.vue
index 723e1180..02aa85eb 100644
--- a/src/layouts/BasicLayout/components/GlobalTab/components/ButtonTab/index.vue
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/ButtonTab/index.vue
@@ -1,7 +1,6 @@
 <template>
   <div
     class="
-      button-tab
       inline-flex-center
       h-34px
       px-14px
@@ -9,20 +8,29 @@
       border-1px border-[#e5e7eb]
       rounded-2px
       cursor-pointer
-      hover:text-primary hover:border-primary
+      transition
+      duration-400
+      ease-in-out
     "
-    :class="{ 'text-primary bg-primary bg-opacity-10 !border-primary': active }"
+    :class="{ 'text-primary bg-primary bg-opacity-10 !border-primary': active, 'text-primary border-primary': isHover }"
+    @mouseenter="setTrue"
+    @mouseleave="setFalse"
   >
     <span>
       <slot></slot>
     </span>
-    <div v-if="closable" class="icon-close-container w-0 overflow-hidden">
+    <div
+      v-if="closable"
+      class="overflow-hidden transition-width duration-400 ease-in-out"
+      :class="[isHover ? 'w-18px' : 'w-0']"
+    >
       <icon-close :is-primary="true" @click="handleClose" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { useBoolean } from '@/hooks';
 import { IconClose } from '../common';
 
 defineProps({
@@ -37,21 +45,11 @@ defineProps({
 });
 const emit = defineEmits(['close']);
 
+const { bool: isHover, setTrue, setFalse } = useBoolean();
+
 function handleClose(e: MouseEvent) {
   e.stopPropagation();
   emit('close');
 }
 </script>
-<style scoped lang="scss">
-.button-tab {
-  transition: all 0.4s ease-out;
-  &:hover {
-    .icon-close-container {
-      width: 18px !important;
-    }
-  }
-  .icon-close-container {
-    transition: width 0.4s ease-out;
-  }
-}
-</style>
+<style scoped></style>
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/ContextMenu/index.vue b/src/layouts/BasicLayout/components/GlobalTab/components/ContextMenu/index.vue
new file mode 100644
index 00000000..770c9d56
--- /dev/null
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/ContextMenu/index.vue
@@ -0,0 +1,116 @@
+<template>
+  <n-dropdown
+    :show="dropdownVisible"
+    :options="options"
+    placement="bottom-start"
+    :x="x"
+    :y="y"
+    @clickoutside="hide"
+    @select="handleDropdown"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue';
+import { NDropdown } from 'naive-ui';
+import { CloseOutlined, ColumnWidthOutlined, MinusOutlined } from '@vicons/antd';
+import { useAppStore } from '@/store';
+import { useBoolean } from '@/hooks';
+import { ROUTE_HOME } from '@/router';
+import { dynamicIconRender } from '@/utils';
+
+type DropdownKey = 'close-current' | 'close-other' | 'close-all';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  isRouteHome: {
+    type: Boolean,
+    default: false
+  },
+  currentPath: {
+    type: String,
+    default: ''
+  },
+  x: {
+    type: Number,
+    required: true
+  },
+  y: {
+    type: Number,
+    required: true
+  }
+});
+
+const emit = defineEmits(['update:visible']);
+
+const app = useAppStore();
+const { removeMultiTab, clearMultiTab } = useAppStore();
+const { bool: dropdownVisible, setTrue: show, setFalse: hide } = useBoolean(props.visible);
+
+const options = computed(() => [
+  {
+    label: '关闭当前',
+    key: 'close-current',
+    disabled: props.currentPath === ROUTE_HOME.path,
+    icon: dynamicIconRender(CloseOutlined)
+  },
+  {
+    label: '关闭其他',
+    key: 'close-other',
+    icon: dynamicIconRender(ColumnWidthOutlined)
+  },
+  {
+    label: '关闭全部',
+    key: 'close-all',
+    icon: dynamicIconRender(MinusOutlined)
+  }
+]);
+
+const actionMap = new Map<DropdownKey, () => void>([
+  [
+    'close-current',
+    () => {
+      removeMultiTab(app.multiTab.activeRoute);
+    }
+  ],
+  [
+    'close-other',
+    () => {
+      clearMultiTab([props.currentPath]);
+    }
+  ],
+  [
+    'close-all',
+    () => {
+      clearMultiTab();
+    }
+  ]
+]);
+
+function handleDropdown(optionKey: string) {
+  const key = optionKey as DropdownKey;
+  const actionFunc = actionMap.get(key);
+  if (actionFunc) {
+    actionFunc();
+  }
+  hide();
+}
+
+watch(
+  () => props.visible,
+  newValue => {
+    if (newValue) {
+      show();
+    } else {
+      hide();
+    }
+  }
+);
+watch(dropdownVisible, newValue => {
+  emit('update:visible', newValue);
+});
+</script>
+<style scoped></style>
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/ReloadButton/index.vue b/src/layouts/BasicLayout/components/GlobalTab/components/ReloadButton/index.vue
new file mode 100644
index 00000000..2883922e
--- /dev/null
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/ReloadButton/index.vue
@@ -0,0 +1,35 @@
+<template>
+  <hover-container class="w-40px h-full" placement="bottom-end" content="刷新当页" @click="handleRefresh">
+    <icon-mdi-refresh class="text-16px" :class="{ 'reload-animation': loading }" />
+  </hover-container>
+</template>
+
+<script lang="ts" setup>
+import { HoverContainer } from '@/components';
+import { useReloadInject } from '@/context';
+import { useLoading } from '@/hooks';
+
+const { handleReload } = useReloadInject();
+const { loading, startLoading, endLoading } = useLoading();
+
+function handleRefresh() {
+  startLoading();
+  handleReload();
+  setTimeout(() => {
+    endLoading();
+  }, 1000);
+}
+</script>
+<style scoped>
+.reload-animation {
+  animation: rotate 1s;
+}
+@keyframes rotate {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/index.ts b/src/layouts/BasicLayout/components/GlobalTab/components/index.ts
index 55ad57b6..16e3a6ea 100644
--- a/src/layouts/BasicLayout/components/GlobalTab/components/index.ts
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/index.ts
@@ -1,4 +1,6 @@
 import ButtonTab from './ButtonTab/index.vue';
 import BrowserTab from './BrowserTab/index.vue';
+import ReloadButton from './ReloadButton/index.vue';
+import ContextMenu from './ContextMenu/index.vue';
 
-export { ButtonTab, BrowserTab };
+export { ButtonTab, BrowserTab, ReloadButton, ContextMenu };
diff --git a/src/layouts/BasicLayout/components/GlobalTab/index.vue b/src/layouts/BasicLayout/components/GlobalTab/index.vue
index c7b1ef4a..0a5438ee 100644
--- a/src/layouts/BasicLayout/components/GlobalTab/index.vue
+++ b/src/layouts/BasicLayout/components/GlobalTab/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div v-if="fixedHeaderAndTab && theme.navStyle.mode !== 'horizontal-mix'" class="multi-tab-height w-full"></div>
   <div
-    class="multi-tab-height flex-center justify-between w-full px-10px"
-    :class="{ 'multi-tab-top absolute': fixedHeaderAndTab, 'bg-[#18181c]': theme.darkMode }"
+    class="multi-tab flex-center justify-between w-full pl-10px"
+    :class="[theme.darkMode ? 'bg-[#18181c]' : 'bg-white', { 'multi-tab-top absolute': fixedHeaderAndTab }]"
     :style="{ zIndex }"
     :align="'center'"
     justify="space-between"
@@ -16,6 +16,7 @@
         :closable="item.name !== ROUTE_HOME.name"
         @click="handleClickTab(item.fullPath)"
         @close="removeMultiTab(item.fullPath)"
+        @contextmenu="handleContextMenu($event, item.fullPath)"
       >
         {{ item.meta?.title }}
       </button-tab>
@@ -34,20 +35,24 @@
         {{ item.meta?.title }}
       </browser-tab>
     </n-space>
-    <div class="flex-center w-32px h-32px bg-white cursor-pointer" @click="handleReload">
-      <icon-mdi-refresh class="text-16px" />
-    </div>
+    <reload-button />
+    <context-menu
+      :visible="dropdownVisible"
+      :current-path="dropdownConfig.currentPath"
+      :x="dropdownConfig.x"
+      :y="dropdownConfig.y"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
+import { computed, ref, reactive, watch, nextTick } from 'vue';
 import { useRoute } from 'vue-router';
 import { NSpace } from 'naive-ui';
 import { useThemeStore, useAppStore } from '@/store';
-import { useReloadInject } from '@/context';
 import { ROUTE_HOME } from '@/router';
-import { ButtonTab, BrowserTab } from './components';
+import { ButtonTab, BrowserTab, ReloadButton, ContextMenu } from './components';
+import { useBoolean } from '@/hooks';
 
 defineProps({
   zIndex: {
@@ -60,7 +65,7 @@ const route = useRoute();
 const theme = useThemeStore();
 const app = useAppStore();
 const { initMultiTab, addMultiTab, removeMultiTab, setActiveMultiTab, handleClickTab } = useAppStore();
-const { handleReload } = useReloadInject();
+const { bool: dropdownVisible, setTrue: showDropdown, setFalse: hideDropdown } = useBoolean();
 
 const hoverIndex = ref(NaN);
 
@@ -74,6 +79,25 @@ const headerHeight = computed(() => {
   return `${height}px`;
 });
 
+const dropdownConfig = reactive({
+  x: 0,
+  y: 0,
+  currentPath: ''
+});
+
+function setDropdownConfig(x: number, y: number, currentPath: string) {
+  Object.assign(dropdownConfig, { x, y, currentPath });
+}
+
+function handleContextMenu(e: MouseEvent, fullPath: string) {
+  e.preventDefault();
+  hideDropdown();
+  setDropdownConfig(e.clientX, e.clientY, fullPath);
+  nextTick(() => {
+    showDropdown();
+  });
+}
+
 function init() {
   initMultiTab();
 }
@@ -90,6 +114,10 @@ watch(
 init();
 </script>
 <style scoped>
+.multi-tab {
+  height: v-bind(multiTabHeight);
+  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+}
 .multi-tab-height {
   height: v-bind(multiTabHeight);
 }
diff --git a/src/layouts/BasicLayout/components/SettingDrawer/components/NavMode/components/NavType.vue b/src/layouts/BasicLayout/components/SettingDrawer/components/NavMode/components/NavType.vue
index c9f01db6..e377d2f1 100644
--- a/src/layouts/BasicLayout/components/SettingDrawer/components/NavMode/components/NavType.vue
+++ b/src/layouts/BasicLayout/components/SettingDrawer/components/NavMode/components/NavType.vue
@@ -17,8 +17,9 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { NTooltip } from 'naive-ui';
 import type { PropType } from 'vue';
+import { NTooltip } from 'naive-ui';
+import type { FollowerPlacement } from 'vueuc';
 import { EnumNavMode } from '@/enum';
 import type { NavMode } from '@/interface';
 
@@ -33,7 +34,7 @@ const props = defineProps({
   }
 });
 
-const config = new Map<NavMode, { placement: any; menuClass: string; mainClass: string }>([
+const config = new Map<NavMode, { placement: FollowerPlacement; menuClass: string; mainClass: string }>([
   ['vertical', { placement: 'bottom-start', menuClass: 'w-1/3 h-full', mainClass: 'w-2/3 h-3/4' }],
   ['vertical-mix', { placement: 'bottom', menuClass: 'w-1/4 h-full', mainClass: 'w-2/3 h-3/4' }],
   ['horizontal', { placement: 'bottom', menuClass: 'w-full h-1/4', mainClass: 'w-full h-3/4' }],
diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index c4536d5e..8e9db3e1 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/src/layouts/BasicLayout/index.vue
@@ -1,9 +1,9 @@
 <template>
   <n-layout class="h-full" has-sider>
-    <global-sider v-if="theme.isVerticalNav" :z-index="2" />
+    <global-sider v-if="theme.isVerticalNav" :z-index="3" />
     <global-header v-if="isHorizontalMix" :z-index="2" />
     <div class="flex-1-hidden flex h-full">
-      <global-sider v-if="isHorizontalMix" class="sider-margin" :z-index="1" />
+      <global-sider v-if="isHorizontalMix" class="sider-margin" :z-index="3" />
       <n-scrollbar
         ref="scrollbar"
         class="h-full"
@@ -14,7 +14,7 @@
           class="inline-flex-col-stretch w-full"
           :class="[{ 'content-padding': isHorizontalMix }, routeProps.fullPage ? 'h-full' : 'min-h-100vh']"
         >
-          <global-header v-if="!isHorizontalMix" :z-index="1" />
+          <global-header v-if="!isHorizontalMix" :z-index="2" />
           <global-tab v-if="theme.multiTabStyle.visible" :z-index="1" />
           <n-layout-content class="flex-auto p-10px" :class="{ 'bg-[#f5f7f9]': !theme.darkMode }">
             <router-view v-slot="{ Component }">
diff --git a/src/layouts/composables/index.ts b/src/layouts/composables/index.ts
index 0e7f4a4b..759ebb42 100644
--- a/src/layouts/composables/index.ts
+++ b/src/layouts/composables/index.ts
@@ -3,7 +3,6 @@ import { useRoute } from 'vue-router';
 
 export function useRouteProps() {
   const route = useRoute();
-
   const props = computed(() => {
     /** 路由名称 */
     const name = route.name as string;
diff --git a/src/router/routes.ts b/src/router/routes.ts
index fd51af3d..52791d18 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -88,6 +88,7 @@ export const ROUTE_HOME: CustomRoute = {
   path: EnumRoutePath['dashboard-analysis'],
   component: () => import('@/views/dashboard/analysis/index.vue'),
   meta: {
+    keepAlive: true,
     requiresAuth: true,
     title: EnumRouteTitle['dashboard-analysis']
   }
@@ -126,7 +127,6 @@ export const customRoutes: CustomRoute[] = [
     redirect: { name: RouteNameMap.get('dashboard-analysis') },
     meta: {
       title: EnumRouteTitle.dashboard,
-      keepAlive: true,
       icon: Dashboard
     },
     children: [
diff --git a/src/settings/theme.ts b/src/settings/theme.ts
index 894f22e1..de05820e 100644
--- a/src/settings/theme.ts
+++ b/src/settings/theme.ts
@@ -51,7 +51,7 @@ const themeSettings: ThemeSettings = {
     height: 48,
     visible: true,
     bgColor: '#fff',
-    mode: 'browser',
+    mode: 'button',
     modeList: [
       { value: 'button', label: EnumMultiTabMode.button },
       { value: 'browser', label: EnumMultiTabMode.browser }
diff --git a/src/store/modules/app/index.ts b/src/store/modules/app/index.ts
index f06acd29..17eb3a96 100644
--- a/src/store/modules/app/index.ts
+++ b/src/store/modules/app/index.ts
@@ -90,6 +90,19 @@ const appStore = defineStore({
         this.setActiveMultiTab(activePath);
       }
     },
+    /**
+     * 删除所有多页签只保留路由首页
+     * @param exclude - 保留的多页签
+     */
+    clearMultiTab(exclude: string[] = []) {
+      const remain = [ROUTE_HOME.path, ...exclude];
+      const { routes } = this.multiTab;
+      const updateRoutes = routes.filter(v => remain.includes(v.fullPath));
+      this.multiTab.routes = updateRoutes;
+      const activePath = updateRoutes[updateRoutes.length - 1].fullPath;
+      router.push(activePath);
+      this.setActiveMultiTab(activePath);
+    },
     /** 点击单个页签tab */
     handleClickTab(fullPath: string) {
       if (this.multiTab.activeRoute !== fullPath) {
@@ -102,8 +115,9 @@ const appStore = defineStore({
       this.multiTab.activeRoute = fullPath;
     },
     /** 获取路由首页信息 */
-    getHomeTabRoute(route: RouteLocationNormalizedLoaded, isHome: boolean) {
+    getHomeTabRoute(route: RouteLocationNormalizedLoaded) {
       const { name, path, meta } = ROUTE_HOME;
+      const isHome = route.name === ROUTE_HOME.name;
       const home: MultiTabRoute = {
         name,
         path,
@@ -119,7 +133,7 @@ const appStore = defineStore({
     initMultiTab() {
       const { currentRoute } = router;
       const isHome = currentRoute.value.name === ROUTE_HOME.name;
-      const home = this.getHomeTabRoute(currentRoute.value, isHome);
+      const home = this.getHomeTabRoute(currentRoute.value);
       const routes = [home];
       if (!isHome) {
         routes.push(currentRoute.value);
diff --git a/src/views/dashboard/analysis/index.vue b/src/views/dashboard/analysis/index.vue
index 05983d7e..c403da3a 100644
--- a/src/views/dashboard/analysis/index.vue
+++ b/src/views/dashboard/analysis/index.vue
@@ -6,13 +6,20 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { onActivated } from 'vue';
+import { useLoading } from '@/hooks';
 import { DataCard, NavCard } from './components';
 
-const loading = ref(true);
+const { loading, startLoading, endLoading } = useLoading(true);
 
-setTimeout(() => {
-  loading.value = false;
-}, 1500);
+function handleEndLoading() {
+  startLoading();
+  setTimeout(() => {
+    endLoading();
+  }, 1000);
+}
+onActivated(() => {
+  handleEndLoading();
+});
 </script>
 <style scoped></style>
diff --git a/src/views/dashboard/workbench/index.vue b/src/views/dashboard/workbench/index.vue
index dc32fd6e..339d8f27 100644
--- a/src/views/dashboard/workbench/index.vue
+++ b/src/views/dashboard/workbench/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="flex-y-center flex-col h-500px bg-white">
+    <n-spin class="flex-y-center flex-col h-500px bg-white" :show="loading">
       <n-gradient-text type="primary" size="32">工作台</n-gradient-text>
       <n-space>
         <n-button>Default</n-button>
@@ -10,8 +10,7 @@
         <n-button type="warning">Warning</n-button>
         <n-button type="error">Error</n-button>
       </n-space>
-      <n-spin v-show="loading" />
-    </div>
+    </n-spin>
   </div>
 </template>
 
diff --git a/windi.config.ts b/windi.config.ts
index 7f971585..47d23677 100644
--- a/windi.config.ts
+++ b/windi.config.ts
@@ -37,7 +37,7 @@ export default defineConfig({
         warning,
         error
       },
-      transitionProperty: ['width', 'height', 'background']
+      transitionProperty: ['width', 'height', 'background', 'background-color']
     }
   },
   variants: {},