feat(projects): 添加多页签风格：按钮和浏览器两种风格

2025-11-04 15:53:43 +08:00 · 2021-09-20 02:48:53 +08:00
parent 03ebd49c86
commit 3cfa0f103c
40 changed files with 601 additions and 167 deletions
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -7,13 +7,11 @@ module.exports = {
  proseWrap: 'preserve', // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  arrowParens: 'avoid', //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
-  // disableLanguages: ['vue'], // 不格式化vue文件，vue文件的格式化单独设置
  endOfLine: 'auto', // 结尾是 \n \r \n\r auto
  eslintIntegration: false, //不让prettier使用eslint的代码格式进行校验
  htmlWhitespaceSensitivity: 'ignore', // 指定HTML文件的全局空白区域敏感度 有效选项："css"- 遵守CSS display属性的默认值。"strict" - 空格被认为是敏感的。"ignore" - 空格被认为是不敏感的。html 中空格也会占位，影响布局，prettier 格式化的时候可能会将文本换行，造成布局错乱
  ignorePath: '.prettierignore', // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  jsxSingleQuote: false, // 在jsx中使用单引号代替双引号
-  // parser: 'babylon', // 格式化的解析器，默认是babylon
  requireConfig: false, // Require a 'prettierconfig' to format prettier
  stylelintIntegration: false, //不让prettier使用stylelint的代码格式进行校验
  trailingComma: 'none', // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
--- a/README.md
+++ b/README.md
@@ -85,7 +85,7 @@ soybean-admin
 │   ├── store                  //状态管理
 │   │   └── modules            //状态管理划分的模块
 │   ├── styles                 //样式
-│   ├── types                  //TS类型声明文件(*.d.ts)
+│   ├── typings                //TS类型声明文件(*.d.ts)
 │   ├── utils                  //全局工具函数
 │   │   ├── auth
 │   │   ├── common
--- a/build/plugins/index.ts
+++ b/build/plugins/index.ts
@@ -1,7 +1,8 @@
 import WindiCSS from 'vite-plugin-windicss';
+import vue from './vue';
 import html from './html';
 import iconify from './iconify';

-const plugins = [...html, ...iconify, WindiCSS()];
+const plugins = [vue(), ...html, ...iconify, WindiCSS()];

 export default plugins;
--- a/build/plugins/vue.ts
+++ b/build/plugins/vue.ts
@@ -0,0 +1,3 @@
+import vue from '@vitejs/plugin-vue';
+
+export default vue;
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
    "dev:prod": "vite --mode production",
    "dev:vercel": "vite --mode vercel",
    "build": "vue-tsc --noEmit --skipLibCheck && vite build",
-    "build:test": "vue-tsc --noEmit --skipLibCheck && vite build --mode development",
+    "build:dev": "vue-tsc --noEmit --skipLibCheck && vite build --mode development",
    "build:vercel": "vue-tsc --noEmit --skipLibCheck && vite build --mode vercel",
    "serve": "vite preview",
    "lint": "eslint ./src --ext .vue,.js,jsx,.ts,tsx",
@@ -23,7 +23,7 @@
    "chroma-js": "^2.1.2",
    "dayjs": "^1.10.7",
    "form-data": "^4.0.0",
-    "naive-ui": "^2.18.2",
+    "naive-ui": "^2.19.0",
    "pinia": "^2.0.0-rc.4",
    "qs": "^6.10.1",
    "vue": "^3.2.10",
@@ -35,9 +35,7 @@
    "@iconify/json": "^1.1.403",
    "@iconify/vue": "^3.0.0",
    "@types/chroma-js": "^2.1.3",
-    "@types/nprogress": "^0.2.0",
    "@types/qs": "^6.9.7",
-    "@types/smoothscroll-polyfill": "^0.3.1",
    "@typescript-eslint/eslint-plugin": "^4.31.1",
    "@typescript-eslint/parser": "^4.31.1",
    "@vicons/antd": "^0.11.0",
@@ -48,7 +46,7 @@
    "@vicons/ionicons5": "^0.11.0",
    "@vicons/material": "^0.11.0",
    "@vicons/tabler": "^0.11.0",
-    "@vitejs/plugin-vue": "^1.6.2",
+    "@vitejs/plugin-vue": "^1.8.0",
    "@vue/compiler-sfc": "^3.2.12",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
@@ -71,7 +69,7 @@
    "typescript": "^4.4.3",
    "unplugin-icons": "^0.11.1",
    "unplugin-vue-components": "^0.15.1",
-    "vite": "^2.5.8",
+    "vite": "^2.5.10",
    "vite-plugin-html": "^2.1.0",
    "vite-plugin-windicss": "^1.4.3",
    "vue-tsc": "^0.3.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,9 +6,7 @@ specifiers:
  '@iconify/json': ^1.1.403
  '@iconify/vue': ^3.0.0
  '@types/chroma-js': ^2.1.3
-  '@types/nprogress': ^0.2.0
  '@types/qs': ^6.9.7
-  '@types/smoothscroll-polyfill': ^0.3.1
  '@typescript-eslint/eslint-plugin': ^4.31.1
  '@typescript-eslint/parser': ^4.31.1
  '@vicons/antd': ^0.11.0
@@ -19,7 +17,7 @@ specifiers:
  '@vicons/ionicons5': ^0.11.0
  '@vicons/material': ^0.11.0
  '@vicons/tabler': ^0.11.0
-  '@vitejs/plugin-vue': ^1.6.2
+  '@vitejs/plugin-vue': ^1.8.0
  '@vue/compiler-sfc': ^3.2.12
  '@vue/eslint-config-prettier': ^6.0.0
  '@vue/eslint-config-typescript': ^7.0.0
@@ -40,7 +38,7 @@ specifiers:
  form-data: ^4.0.0
  husky: ^7.0.2
  lint-staged: ^11.1.2
-  naive-ui: ^2.18.2
+  naive-ui: ^2.19.0
  patch-package: ^6.4.7
  pinia: ^2.0.0-rc.4
  postinstall-postinstall: ^2.1.0
@@ -50,7 +48,7 @@ specifiers:
  typescript: ^4.4.3
  unplugin-icons: ^0.11.1
  unplugin-vue-components: ^0.15.1
-  vite: ^2.5.8
+  vite: ^2.5.10
  vite-plugin-html: ^2.1.0
  vite-plugin-windicss: ^1.4.3
  vue: ^3.2.10
@@ -64,7 +62,7 @@ dependencies:
  chroma-js: registry.nlark.com/chroma-js/2.1.2
  dayjs: registry.nlark.com/dayjs/1.10.7
  form-data: 4.0.0
-  naive-ui: registry.nlark.com/naive-ui/2.18.2_vue@3.2.10
+  naive-ui: registry.nlark.com/naive-ui/2.19.0_vue@3.2.10
  pinia: registry.nlark.com/pinia/2.0.0-rc.4_typescript@4.4.3+vue@3.2.10
  qs: 6.10.1
  vue: registry.nlark.com/vue/3.2.10
@@ -76,9 +74,7 @@ devDependencies:
  '@iconify/json': registry.nlark.com/@iconify/json/1.1.403
  '@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/nprogress': registry.nlark.com/@types/nprogress/0.2.0
  '@types/qs': registry.nlark.com/@types/qs/6.9.7
-  '@types/smoothscroll-polyfill': registry.nlark.com/@types/smoothscroll-polyfill/0.3.1
  '@typescript-eslint/eslint-plugin': registry.nlark.com/@typescript-eslint/eslint-plugin/4.31.1_e2d3c88d378335c4183365c112128ce9
  '@typescript-eslint/parser': registry.nlark.com/@typescript-eslint/parser/4.31.1_eslint@7.32.0+typescript@4.4.3
  '@vicons/antd': registry.nlark.com/@vicons/antd/0.11.0
@@ -89,7 +85,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.6.2_@vue+compiler-sfc@3.2.12
+  '@vitejs/plugin-vue': registry.nlark.com/@vitejs/plugin-vue/1.8.0_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
@@ -110,20 +106,16 @@ 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_fd5a4923c948631ae5dd6eea4a9dc450
-  unplugin-vue-components: registry.nlark.com/unplugin-vue-components/0.15.1_vite@2.5.8+vue@3.2.10
-  vite: registry.nlark.com/vite/2.5.8
-  vite-plugin-html: registry.nlark.com/vite-plugin-html/2.1.0_vite@2.5.8
-  vite-plugin-windicss: registry.nlark.com/vite-plugin-windicss/1.4.3_typescript@4.4.3+vite@2.5.8
+  unplugin-icons: registry.nlark.com/unplugin-icons/0.11.1_bb95034bcf609147e95709faffdd4405
+  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
  windicss: registry.nlark.com/windicss/3.1.7

 packages:

-  /@emotion/hash/0.8.0:
-    resolution: {integrity: sha1-u7/2iXj+/b5ozLUzvIy+HRr7VBM=, tarball: '@emotion/hash/download/@emotion/hash-0.8.0.tgz'}
-    dev: false
-
  /@types/json5/0.0.29:
    resolution: {integrity: sha1-7ihweulOEdK4J7y+UnC86n8+ce4=, tarball: '@types/json5/download/@types/json5-0.0.29.tgz'}
    dev: true
@@ -319,15 +311,6 @@ packages:
      color-name: registry.nlark.com/color-name/1.1.3
    dev: true

-  /color-convert/2.0.1:
-    resolution: {integrity: sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=, tarball: color-convert/download/color-convert-2.0.1.tgz}
-    engines: {node: '>=7.0.0'}
-    dependencies:
-      color-name: 1.1.4
-
-  /color-name/1.1.4:
-    resolution: {integrity: sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=, tarball: color-name/download/color-name-1.1.4.tgz}
-
  /combined-stream/1.0.8:
    resolution: {integrity: sha1-w9RaizT9cwYxoRCoolIGgrMdWn8=, tarball: combined-stream/download/combined-stream-1.0.8.tgz}
    engines: {node: '>= 0.8'}
@@ -978,10 +961,6 @@ packages:
      p-locate: 5.0.0
    dev: true

-  /lodash-es/4.17.21:
-    resolution: {integrity: sha1-Q+YmxG5lkbd1C+srUBFzkMYJ4+4=, tarball: lodash-es/download/lodash-es-4.17.21.tgz?cache=0&sync_timestamp=1613835893273&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash-es%2Fdownload%2Flodash-es-4.17.21.tgz}
-    dev: false
-
  /lodash.clonedeep/4.5.0:
    resolution: {integrity: sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=, tarball: lodash.clonedeep/download/lodash.clonedeep-4.5.0.tgz}
    dev: true
@@ -2044,7 +2023,7 @@ packages:
    dev: true

  registry.nlark.com/@css-render/plugin-bem/0.15.6:
-    resolution: {integrity: sha1-9/6kdN9PMmLvn7gBetocuXEs14o=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@css-render/plugin-bem/download/@css-render/plugin-bem-0.15.6.tgz}
+    resolution: {integrity: sha1-9/6kdN9PMmLvn7gBetocuXEs14o=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@css-render/plugin-bem/download/@css-render/plugin-bem-0.15.6.tgz}
    name: '@css-render/plugin-bem'
    version: 0.15.6
    dependencies:
@@ -2052,7 +2031,7 @@ packages:
    dev: false

  registry.nlark.com/@css-render/vue3-ssr/0.15.6_vue@3.2.10:
-    resolution: {integrity: sha1-TtwpS9p+bKIV9sfsniyDhWRQacM=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@css-render/vue3-ssr/download/@css-render/vue3-ssr-0.15.6.tgz}
+    resolution: {integrity: sha1-TtwpS9p+bKIV9sfsniyDhWRQacM=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@css-render/vue3-ssr/download/@css-render/vue3-ssr-0.15.6.tgz}
    id: registry.nlark.com/@css-render/vue3-ssr/0.15.6
    name: '@css-render/vue3-ssr'
    version: 0.15.6
@@ -2084,6 +2063,12 @@ packages:
    version: 1.0.0
    dev: true

+  registry.nlark.com/@emotion/hash/0.8.0:
+    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}
    name: '@eslint/eslintrc'
@@ -2146,7 +2131,7 @@ packages:
    dev: true

  registry.nlark.com/@jest/types/26.6.2:
-    resolution: {integrity: sha1-vvWlMgMOHYii9abZM/hOlyJu1I4=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@jest/types/download/@jest/types-26.6.2.tgz?cache=0&sync_timestamp=1631096097351&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40jest%2Ftypes%2Fdownload%2F%40jest%2Ftypes-26.6.2.tgz}
+    resolution: {integrity: sha1-vvWlMgMOHYii9abZM/hOlyJu1I4=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@jest/types/download/@jest/types-26.6.2.tgz}
    name: '@jest/types'
    version: 26.6.2
    engines: {node: '>= 10.14.2'}
@@ -2208,13 +2193,13 @@ packages:
    dev: true

  registry.nlark.com/@types/istanbul-lib-coverage/2.0.3:
-    resolution: {integrity: sha1-S6jdtyAiH0MuRDvV+RF/0iz9R2I=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/istanbul-lib-coverage/download/@types/istanbul-lib-coverage-2.0.3.tgz}
+    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: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/istanbul-lib-report/download/@types/istanbul-lib-report-3.0.0.tgz}
+    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}
    name: '@types/istanbul-lib-report'
    version: 3.0.0
    dependencies:
@@ -2222,7 +2207,7 @@ packages:
    dev: false

  registry.nlark.com/@types/istanbul-reports/3.0.1:
-    resolution: {integrity: sha1-kVP+mLuivVZaY63ZQ21vDX+EaP8=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/istanbul-reports/download/@types/istanbul-reports-3.0.1.tgz?cache=0&sync_timestamp=1629708283842&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fistanbul-reports%2Fdownload%2F%40types%2Fistanbul-reports-3.0.1.tgz}
+    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}
    name: '@types/istanbul-reports'
    version: 3.0.1
    dependencies:
@@ -2230,7 +2215,7 @@ packages:
    dev: false

  registry.nlark.com/@types/jest/26.0.24:
-    resolution: {integrity: sha1-lD0Rl2sWc5GFkToZNuDeDEp9WVo=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/jest/download/@types/jest-26.0.24.tgz?cache=0&sync_timestamp=1629708343794&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fjest%2Fdownload%2F%40types%2Fjest-26.0.24.tgz}
+    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}
    name: '@types/jest'
    version: 26.0.24
    dependencies:
@@ -2245,7 +2230,7 @@ packages:
    dev: true

  registry.nlark.com/@types/lodash-es/4.17.4:
-    resolution: {integrity: sha1-suRA0r+Kk1hKn9eYRS7El5hsm5c=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/lodash-es/download/@types/lodash-es-4.17.4.tgz}
+    resolution: {integrity: sha1-suRA0r+Kk1hKn9eYRS7El5hsm5c=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/lodash-es/download/@types/lodash-es-4.17.4.tgz}
    name: '@types/lodash-es'
    version: 4.17.4
    dependencies:
@@ -2253,7 +2238,7 @@ packages:
    dev: false

  registry.nlark.com/@types/lodash/4.14.172:
-    resolution: {integrity: sha1-qtd0wo57/Xpn3iVAjgPuWow9Aoo=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/lodash/download/@types/lodash-4.14.172.tgz?cache=0&sync_timestamp=1629708681735&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Flodash%2Fdownload%2F%40types%2Flodash-4.14.172.tgz}
+    resolution: {integrity: sha1-qtd0wo57/Xpn3iVAjgPuWow9Aoo=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/lodash/download/@types/lodash-4.14.172.tgz}
    name: '@types/lodash'
    version: 4.14.172
    dev: false
@@ -2265,19 +2250,19 @@ packages:
    dev: true

  registry.nlark.com/@types/node/14.14.45:
-    resolution: {integrity: sha1-7C37VWb/gU0GGu9+FBV1rtuiRc8=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/node/download/@types/node-14.14.45.tgz?cache=0&sync_timestamp=1631217901150&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fnode%2Fdownload%2F%40types%2Fnode-14.14.45.tgz}
+    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: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/node/download/@types/node-14.17.10.tgz?cache=0&sync_timestamp=1631217901150&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fnode%2Fdownload%2F%40types%2Fnode-14.17.10.tgz}
+    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: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/node/download/@types/node-16.6.2.tgz?cache=0&sync_timestamp=1631217901150&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fnode%2Fdownload%2F%40types%2Fnode-16.6.2.tgz}
+    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
@@ -2288,12 +2273,6 @@ packages:
    version: 2.4.1
    dev: true

-  registry.nlark.com/@types/nprogress/0.2.0:
-    resolution: {integrity: sha1-hsWTaC1BmSEqBQnMPE1WK7vW5F8=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/nprogress/download/@types/nprogress-0.2.0.tgz}
-    name: '@types/nprogress'
-    version: 0.2.0
-    dev: true
-
  registry.nlark.com/@types/parse-json/4.0.0:
    resolution: {integrity: sha1-L4u0QUNNFjs1+4/9zNcTiSf/uMA=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/parse-json/download/@types/parse-json-4.0.0.tgz?cache=0&sync_timestamp=1621242399300&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fparse-json%2Fdownload%2F%40types%2Fparse-json-4.0.0.tgz}
    name: '@types/parse-json'
@@ -2306,12 +2285,6 @@ packages:
    version: 6.9.7
    dev: true

-  registry.nlark.com/@types/smoothscroll-polyfill/0.3.1:
-    resolution: {integrity: sha1-d/s6bhFr2rSllZEi47jiASJNzUk=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/smoothscroll-polyfill/download/@types/smoothscroll-polyfill-0.3.1.tgz}
-    name: '@types/smoothscroll-polyfill'
-    version: 0.3.1
-    dev: true
-
  registry.nlark.com/@types/throttle-debounce/2.1.0:
    resolution: {integrity: sha1-HD32JL/Eti+ZLTASuExW1B6rN3Y=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/throttle-debounce/download/@types/throttle-debounce-2.1.0.tgz}
    name: '@types/throttle-debounce'
@@ -2319,13 +2292,13 @@ packages:
    dev: true

  registry.nlark.com/@types/yargs-parser/20.2.1:
-    resolution: {integrity: sha1-O5ziSJkZ2eT+pDm3aRarw0st8Sk=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/yargs-parser/download/@types/yargs-parser-20.2.1.tgz}
+    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: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/yargs/download/@types/yargs-15.0.14.tgz}
+    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}
    name: '@types/yargs'
    version: 15.0.14
    dependencies:
@@ -2503,16 +2476,18 @@ packages:
    version: 0.11.0
    dev: true

-  registry.nlark.com/@vitejs/plugin-vue/1.6.2_@vue+compiler-sfc@3.2.12:
-    resolution: {integrity: sha1-QN/jFM/2ENTdAnoLTqKpOiV/P8k=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@vitejs/plugin-vue/download/@vitejs/plugin-vue-1.6.2.tgz}
-    id: registry.nlark.com/@vitejs/plugin-vue/1.6.2
+  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
    name: '@vitejs/plugin-vue'
-    version: 1.6.2
+    version: 1.8.0
    engines: {node: '>=12.0.0'}
    peerDependencies:
      '@vue/compiler-sfc': ^3.2.6
+      vite: ^2.5.10
    dependencies:
      '@vue/compiler-sfc': registry.nlark.com/@vue/compiler-sfc/3.2.12
+      vite: registry.nlark.com/vite/2.5.10
    dev: true

  registry.nlark.com/@volar/code-gen/0.27.14:
@@ -2751,6 +2726,11 @@ packages:
    peerDependencies:
      '@vue/composition-api': ^1.1.0
      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
    dependencies:
      '@vueuse/shared': registry.nlark.com/@vueuse/shared/6.4.1_vue@3.2.10
      vue: registry.nlark.com/vue/3.2.10
@@ -2765,6 +2745,11 @@ packages:
    peerDependencies:
      '@vue/composition-api': ^1.1.0
      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
    dependencies:
      vue: registry.nlark.com/vue/3.2.10
      vue-demi: registry.nlark.com/vue-demi/0.11.4_vue@3.2.10
@@ -2847,7 +2832,7 @@ packages:
    dev: true

  registry.nlark.com/ansi-regex/5.0.0:
-    resolution: {integrity: sha1-OIU59VF5vzkznIGvMKZU1p+Hy3U=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/ansi-regex/download/ansi-regex-5.0.0.tgz?cache=0&sync_timestamp=1631305520732&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-regex%2Fdownload%2Fansi-regex-5.0.0.tgz}
+    resolution: {integrity: sha1-OIU59VF5vzkznIGvMKZU1p+Hy3U=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/ansi-regex/download/ansi-regex-5.0.0.tgz}
    name: ansi-regex
    version: 5.0.0
    engines: {node: '>=8'}
@@ -2863,12 +2848,12 @@ packages:
    dev: true

  registry.nlark.com/ansi-styles/4.3.0:
-    resolution: {integrity: sha1-7dgDYornHATIWuegkG7a00tkiTc=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz}
+    resolution: {integrity: sha1-7dgDYornHATIWuegkG7a00tkiTc=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz}
    name: ansi-styles
    version: 4.3.0
    engines: {node: '>=8'}
    dependencies:
-      color-convert: 2.0.1
+      color-convert: registry.nlark.com/color-convert/2.0.1

  registry.nlark.com/any-promise/1.3.0:
    resolution: {integrity: sha1-q8av7tzqUugJzcA3au0845Y10X8=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/any-promise/download/any-promise-1.3.0.tgz}
@@ -2912,7 +2897,7 @@ packages:
    dev: true

  registry.nlark.com/async-validator/4.0.2:
-    resolution: {integrity: sha1-+AiWKP+KlffIxY4bjTw82d4YaZY=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/async-validator/download/async-validator-4.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fasync-validator%2Fdownload%2Fasync-validator-4.0.2.tgz}
+    resolution: {integrity: sha1-+AiWKP+KlffIxY4bjTw82d4YaZY=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/async-validator/download/async-validator-4.0.2.tgz}
    name: async-validator
    version: 4.0.2
    dev: false
@@ -3117,14 +3102,27 @@ packages:
      string-width: 4.2.2
    dev: true

+  registry.nlark.com/color-convert/2.0.1:
+    resolution: {integrity: sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/color-convert/download/color-convert-2.0.1.tgz}
+    name: color-convert
+    version: 2.0.1
+    engines: {node: '>=7.0.0'}
+    dependencies:
+      color-name: registry.nlark.com/color-name/1.1.4
+
  registry.nlark.com/color-name/1.1.3:
    resolution: {integrity: sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/color-name/download/color-name-1.1.3.tgz}
    name: color-name
    version: 1.1.3
    dev: true

+  registry.nlark.com/color-name/1.1.4:
+    resolution: {integrity: sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/color-name/download/color-name-1.1.4.tgz}
+    name: color-name
+    version: 1.1.4
+
  registry.nlark.com/colorette/1.3.0:
-    resolution: {integrity: sha1-/0XS8O2yRAadO3cq3rBP7TjQoK8=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/colorette/download/colorette-1.3.0.tgz}
+    resolution: {integrity: sha1-/0XS8O2yRAadO3cq3rBP7TjQoK8=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/colorette/download/colorette-1.3.0.tgz}
    name: colorette
    version: 1.3.0
    dev: true
@@ -3218,11 +3216,11 @@ packages:
    dev: false

  registry.nlark.com/css-render/0.15.6:
-    resolution: {integrity: sha1-k7d4/8OBIPjNThNZQfDXbuTBt4M=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/css-render/download/css-render-0.15.6.tgz}
+    resolution: {integrity: sha1-k7d4/8OBIPjNThNZQfDXbuTBt4M=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/css-render/download/css-render-0.15.6.tgz}
    name: css-render
    version: 0.15.6
    dependencies:
-      '@emotion/hash': 0.8.0
+      '@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
@@ -3242,7 +3240,7 @@ packages:
    dev: false

  registry.nlark.com/csstype/3.0.8:
-    resolution: {integrity: sha1-0iZqeScp+yJ80hb7Vy9Dco4a00A=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/csstype/download/csstype-3.0.8.tgz}
+    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
@@ -3301,7 +3299,7 @@ packages:
    dev: true

  registry.nlark.com/date-fns-tz/1.1.6_date-fns@2.23.0:
-    resolution: {integrity: sha1-k8vzVOKuss0xL/oy5GLBlDzyCo4=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/date-fns-tz/download/date-fns-tz-1.1.6.tgz}
+    resolution: {integrity: sha1-k8vzVOKuss0xL/oy5GLBlDzyCo4=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/date-fns-tz/download/date-fns-tz-1.1.6.tgz}
    id: registry.nlark.com/date-fns-tz/1.1.6
    name: date-fns-tz
    version: 1.1.6
@@ -3312,7 +3310,7 @@ packages:
    dev: false

  registry.nlark.com/date-fns/2.23.0:
-    resolution: {integrity: sha1-TohslBZZrwz3sw+v3R6qN+iHiKk=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/date-fns/download/date-fns-2.23.0.tgz?cache=0&sync_timestamp=1627020299263&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdate-fns%2Fdownload%2Fdate-fns-2.23.0.tgz}
+    resolution: {integrity: sha1-TohslBZZrwz3sw+v3R6qN+iHiKk=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/date-fns/download/date-fns-2.23.0.tgz}
    name: date-fns
    version: 2.23.0
    engines: {node: '>=0.11'}
@@ -3362,7 +3360,7 @@ packages:
    dev: true

  registry.nlark.com/diff-sequences/26.6.2:
-    resolution: {integrity: sha1-SLqZFX3hkjQS7tQdtrbUqpynwLE=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/diff-sequences/download/diff-sequences-26.6.2.tgz?cache=0&sync_timestamp=1624900057366&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdiff-sequences%2Fdownload%2Fdiff-sequences-26.6.2.tgz}
+    resolution: {integrity: sha1-SLqZFX3hkjQS7tQdtrbUqpynwLE=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/diff-sequences/download/diff-sequences-26.6.2.tgz}
    name: diff-sequences
    version: 26.6.2
    engines: {node: '>= 10.14.2'}
@@ -3496,7 +3494,7 @@ packages:
    dev: true

  registry.nlark.com/esbuild/0.12.21:
-    resolution: {integrity: sha1-f/Mqmsc85DEPnLYepMPal1ZXDUY=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/esbuild/download/esbuild-0.12.21.tgz}
+    resolution: {integrity: sha1-f/Mqmsc85DEPnLYepMPal1ZXDUY=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/esbuild/download/esbuild-0.12.21.tgz}
    name: esbuild
    version: 0.12.21
    hasBin: true
@@ -3738,7 +3736,7 @@ packages:
    dev: true

  registry.nlark.com/evtd/0.2.2:
-    resolution: {integrity: sha1-vrvifhWu3B1cGLwmIN/JDyYHh8M=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/evtd/download/evtd-0.2.2.tgz}
+    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
@@ -3902,7 +3900,7 @@ packages:
    dev: true

  registry.nlark.com/fsevents/2.3.2:
-    resolution: {integrity: sha1-ilJveLj99GI7cJ4Ll1xSwkwC/Ro=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/fsevents/download/fsevents-2.3.2.tgz}
+    resolution: {integrity: sha1-ilJveLj99GI7cJ4Ll1xSwkwC/Ro=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/fsevents/download/fsevents-2.3.2.tgz}
    name: fsevents
    version: 2.3.2
    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -4067,7 +4065,7 @@ packages:
    dev: true

  registry.nlark.com/highlight.js/11.2.0:
-    resolution: {integrity: sha1-p+O4wf3E8FOLk7LcLd1TpAxqsPA=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/highlight.js/download/highlight.js-11.2.0.tgz}
+    resolution: {integrity: sha1-p+O4wf3E8FOLk7LcLd1TpAxqsPA=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/highlight.js/download/highlight.js-11.2.0.tgz}
    name: highlight.js
    version: 11.2.0
    engines: {node: '>=12.0.0'}
@@ -4356,7 +4354,7 @@ packages:
    dev: true

  registry.nlark.com/jest-diff/26.6.2:
-    resolution: {integrity: sha1-GqdGi1LDpo19XF/c381eSb0WQ5Q=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/jest-diff/download/jest-diff-26.6.2.tgz?cache=0&sync_timestamp=1631520428777&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fjest-diff%2Fdownload%2Fjest-diff-26.6.2.tgz}
+    resolution: {integrity: sha1-GqdGi1LDpo19XF/c381eSb0WQ5Q=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/jest-diff/download/jest-diff-26.6.2.tgz}
    name: jest-diff
    version: 26.6.2
    engines: {node: '>= 10.14.2'}
@@ -4368,7 +4366,7 @@ packages:
    dev: false

  registry.nlark.com/jest-get-type/26.3.0:
-    resolution: {integrity: sha1-6X3Dw/U8K0Bsp6+u1Ek7HQmRmeA=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/jest-get-type/download/jest-get-type-26.3.0.tgz?cache=0&sync_timestamp=1624900056951&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fjest-get-type%2Fdownload%2Fjest-get-type-26.3.0.tgz}
+    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'}
@@ -4520,6 +4518,12 @@ packages:
      path-exists: registry.nlark.com/path-exists/3.0.0
    dev: true

+  registry.nlark.com/lodash-es/4.17.21:
+    resolution: {integrity: sha1-Q+YmxG5lkbd1C+srUBFzkMYJ4+4=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/lodash-es/download/lodash-es-4.17.21.tgz}
+    name: lodash-es
+    version: 4.17.21
+    dev: false
+
  registry.nlark.com/lodash.camelcase/4.3.0:
    resolution: {integrity: sha1-soqmKIorn8ZRA1x3EfZathkDMaY=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/lodash.camelcase/download/lodash.camelcase-4.3.0.tgz}
    name: lodash.camelcase
@@ -4527,7 +4531,7 @@ packages:
    dev: true

  registry.nlark.com/lodash/4.17.21:
-    resolution: {integrity: sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/lodash/download/lodash-4.17.21.tgz?cache=0&sync_timestamp=1624543041613&other_urls=https%3A%2F%2Fregistry.nlark.com%2Flodash%2Fdownload%2Flodash-4.17.21.tgz}
+    resolution: {integrity: sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/lodash/download/lodash-4.17.21.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Flodash%2Fdownload%2Flodash-4.17.21.tgz}
    name: lodash
    version: 4.17.21
    dev: false
@@ -4656,11 +4660,11 @@ packages:
    version: 2.1.3
    dev: true

-  registry.nlark.com/naive-ui/2.18.2_vue@3.2.10:
-    resolution: {integrity: sha1-gpM7tR69RPQzB17ne847efqrYTk=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/naive-ui/download/naive-ui-2.18.2.tgz}
-    id: registry.nlark.com/naive-ui/2.18.2
+  registry.nlark.com/naive-ui/2.19.0_vue@3.2.10:
+    resolution: {integrity: sha1-z7H5IbVnI12j0HYn6RwNyvTNCm0=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/naive-ui/download/naive-ui-2.19.0.tgz}
+    id: registry.nlark.com/naive-ui/2.19.0
    name: naive-ui
-    version: 2.18.2
+    version: 2.19.0
    peerDependencies:
      vue: ^3.0.0
    dependencies:
@@ -4675,9 +4679,9 @@ packages:
      evtd: registry.nlark.com/evtd/0.2.2
      highlight.js: registry.nlark.com/highlight.js/11.2.0
      lodash: registry.nlark.com/lodash/4.17.21
-      lodash-es: 4.17.21
+      lodash-es: registry.nlark.com/lodash-es/4.17.21
      seemly: registry.nlark.com/seemly/0.3.1
-      treemate: registry.nlark.com/treemate/0.3.5
+      treemate: registry.nlark.com/treemate/0.3.8
      vdirs: registry.nlark.com/vdirs/0.1.4_vue@3.2.10
      vfonts: registry.nlark.com/vfonts/0.1.0
      vooks: registry.nlark.com/vooks/0.2.8_vue@3.2.10
@@ -4686,7 +4690,7 @@ packages:
    dev: false

  registry.nlark.com/nanoid/3.1.25:
-    resolution: {integrity: sha1-CcoydHwOVD8OGBS303k0d/nI4VI=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/nanoid/download/nanoid-3.1.25.tgz}
+    resolution: {integrity: sha1-CcoydHwOVD8OGBS303k0d/nI4VI=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/nanoid/download/nanoid-3.1.25.tgz}
    name: nanoid
    version: 3.1.25
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -5047,7 +5051,7 @@ packages:
    dev: true

  registry.nlark.com/postcss/8.3.6:
-    resolution: {integrity: sha1-JzDddql5afN/U7mmCWGXvjEcxOo=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/postcss/download/postcss-8.3.6.tgz}
+    resolution: {integrity: sha1-JzDddql5afN/U7mmCWGXvjEcxOo=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/postcss/download/postcss-8.3.6.tgz}
    name: postcss
    version: 8.3.6
    engines: {node: ^10 || ^12 || >=14}
@@ -5073,7 +5077,7 @@ packages:
    dev: true

  registry.nlark.com/pretty-format/26.6.2:
-    resolution: {integrity: sha1-41wnBfFMt/4v6U+geDRbREEg/JM=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/pretty-format/download/pretty-format-26.6.2.tgz?cache=0&sync_timestamp=1631520426763&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpretty-format%2Fdownload%2Fpretty-format-26.6.2.tgz}
+    resolution: {integrity: sha1-41wnBfFMt/4v6U+geDRbREEg/JM=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/pretty-format/download/pretty-format-26.6.2.tgz}
    name: pretty-format
    version: 26.6.2
    engines: {node: '>= 10'}
@@ -5221,7 +5225,7 @@ packages:
    dev: true

  registry.nlark.com/react-is/17.0.2:
-    resolution: {integrity: sha1-5pHUqOnHiTZWVVOas3J2Kw77VPA=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/react-is/download/react-is-17.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Freact-is%2Fdownload%2Freact-is-17.0.2.tgz}
+    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
@@ -5282,7 +5286,7 @@ packages:
    dev: true

  registry.nlark.com/resize-observer-polyfill/1.5.1:
-    resolution: {integrity: sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz}
+    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
@@ -5320,7 +5324,7 @@ packages:
    dev: true

  registry.nlark.com/rollup/2.56.2:
-    resolution: {integrity: sha1-oEX/P2r1PuAJtfUBbKPaAynlRw8=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/rollup/download/rollup-2.56.2.tgz}
+    resolution: {integrity: sha1-oEX/P2r1PuAJtfUBbKPaAynlRw8=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/rollup/download/rollup-2.56.2.tgz}
    name: rollup
    version: 2.56.2
    engines: {node: '>=10.0.0'}
@@ -5349,7 +5353,7 @@ packages:
    dev: true

  registry.nlark.com/seemly/0.3.1:
-    resolution: {integrity: sha1-vLQ51+OZp8xUbKhsMdJDKMw5RMo=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/seemly/download/seemly-0.3.1.tgz}
+    resolution: {integrity: sha1-vLQ51+OZp8xUbKhsMdJDKMw5RMo=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/seemly/download/seemly-0.3.1.tgz}
    name: seemly
    version: 0.3.1
    dependencies:
@@ -5400,7 +5404,7 @@ packages:
    dev: true

  registry.nlark.com/source-map-js/0.6.2:
-    resolution: {integrity: sha1-C7XeYxtBz72mz7qL0FqA79/SOF4=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/source-map-js/download/source-map-js-0.6.2.tgz}
+    resolution: {integrity: sha1-C7XeYxtBz72mz7qL0FqA79/SOF4=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/source-map-js/download/source-map-js-0.6.2.tgz}
    name: source-map-js
    version: 0.6.2
    engines: {node: '>=0.10.0'}
@@ -5583,10 +5587,10 @@ packages:
    hasBin: true
    dev: true

-  registry.nlark.com/treemate/0.3.5:
-    resolution: {integrity: sha1-b87O3Fh7iYFN4jaGwQwQ1oewGZ8=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/treemate/download/treemate-0.3.5.tgz}
+  registry.nlark.com/treemate/0.3.8:
+    resolution: {integrity: sha1-eRwM1urlvb0s0EATQpOF9TZv3/Q=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/treemate/download/treemate-0.3.8.tgz}
    name: treemate
-    version: 0.3.5
+    version: 0.3.8
    dev: false

  registry.nlark.com/trim-newlines/3.0.1:
@@ -5702,7 +5706,7 @@ packages:
    hasBin: true
    dev: true

-  registry.nlark.com/unplugin-icons/0.11.1_fd5a4923c948631ae5dd6eea4a9dc450:
+  registry.nlark.com/unplugin-icons/0.11.1_bb95034bcf609147e95709faffdd4405:
    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,14 +5732,14 @@ packages:
      '@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
-      unplugin: registry.nlark.com/unplugin/0.2.9_vite@2.5.8
+      unplugin: registry.nlark.com/unplugin/0.2.9_vite@2.5.10
    transitivePeerDependencies:
      - rollup
      - vite
      - webpack
    dev: true

-  registry.nlark.com/unplugin-vue-components/0.15.1_vite@2.5.8+vue@3.2.10:
+  registry.nlark.com/unplugin-vue-components/0.15.1_vite@2.5.10+vue@3.2.10:
    resolution: {integrity: sha1-YIM9+fVOXu3efZFsK6ZumiY3mKc=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/unplugin-vue-components/download/unplugin-vue-components-0.15.1.tgz?cache=0&sync_timestamp=1631586147989&other_urls=https%3A%2F%2Fregistry.nlark.com%2Funplugin-vue-components%2Fdownload%2Funplugin-vue-components-0.15.1.tgz}
    id: registry.nlark.com/unplugin-vue-components/0.15.1
    name: unplugin-vue-components
@@ -5752,7 +5756,7 @@ packages:
      magic-string: registry.nlark.com/magic-string/0.25.7
      minimatch: registry.nlark.com/minimatch/3.0.4
      resolve: 1.20.0
-      unplugin: registry.nlark.com/unplugin/0.2.9_vite@2.5.8
+      unplugin: registry.nlark.com/unplugin/0.2.9_vite@2.5.10
      vue: registry.nlark.com/vue/3.2.10
    transitivePeerDependencies:
      - rollup
@@ -5761,7 +5765,7 @@ packages:
      - webpack
    dev: true

-  registry.nlark.com/unplugin/0.2.9_vite@2.5.8:
+  registry.nlark.com/unplugin/0.2.9_vite@2.5.10:
    resolution: {integrity: sha1-iEYSEROpDfjqTveLFxzXOeNrAUM=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/unplugin/download/unplugin-0.2.9.tgz}
    id: registry.nlark.com/unplugin/0.2.9
    name: unplugin
@@ -5779,7 +5783,7 @@ packages:
        optional: true
    dependencies:
      upath: 2.0.1
-      vite: registry.nlark.com/vite/2.5.8
+      vite: registry.nlark.com/vite/2.5.10
      webpack-virtual-modules: registry.nlark.com/webpack-virtual-modules/0.4.3
    dev: true

@@ -5797,7 +5801,7 @@ packages:
    dev: true

  registry.nlark.com/vdirs/0.1.4_vue@3.2.10:
-    resolution: {integrity: sha1-xMD/hs9H/tA95fhp4mUxHvGIq3Q=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/vdirs/download/vdirs-0.1.4.tgz}
+    resolution: {integrity: sha1-xMD/hs9H/tA95fhp4mUxHvGIq3Q=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/vdirs/download/vdirs-0.1.4.tgz}
    id: registry.nlark.com/vdirs/0.1.4
    name: vdirs
    version: 0.1.4
@@ -5810,12 +5814,12 @@ packages:
    dev: false

  registry.nlark.com/vfonts/0.1.0:
-    resolution: {integrity: sha1-wWrzfKBEsnJa5VVTBJKA775iIqk=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/vfonts/download/vfonts-0.1.0.tgz}
+    resolution: {integrity: sha1-wWrzfKBEsnJa5VVTBJKA775iIqk=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/vfonts/download/vfonts-0.1.0.tgz}
    name: vfonts
    version: 0.1.0
    dev: false

-  registry.nlark.com/vite-plugin-html/2.1.0_vite@2.5.8:
+  registry.nlark.com/vite-plugin-html/2.1.0_vite@2.5.10:
    resolution: {integrity: sha1-d7buEdnNvfdmtXMf1Ba6zyZ0T84=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/vite-plugin-html/download/vite-plugin-html-2.1.0.tgz}
    id: registry.nlark.com/vite-plugin-html/2.1.0
    name: vite-plugin-html
@@ -5829,10 +5833,10 @@ packages:
      ejs: 3.1.6
      fs-extra: registry.nlark.com/fs-extra/10.0.0
      html-minifier-terser: 5.1.1
-      vite: registry.nlark.com/vite/2.5.8
+      vite: registry.nlark.com/vite/2.5.10
    dev: true

-  registry.nlark.com/vite-plugin-windicss/1.4.3_typescript@4.4.3+vite@2.5.8:
+  registry.nlark.com/vite-plugin-windicss/1.4.3_typescript@4.4.3+vite@2.5.10:
    resolution: {integrity: sha1-c1oeNeh7lSk9UrnnVw7KlsO3JFs=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/vite-plugin-windicss/download/vite-plugin-windicss-1.4.3.tgz}
    id: registry.nlark.com/vite-plugin-windicss/1.4.3
    name: vite-plugin-windicss
@@ -5843,7 +5847,7 @@ packages:
      '@windicss/plugin-utils': registry.nlark.com/@windicss/plugin-utils/1.4.3_typescript@4.4.3
      chalk: registry.nlark.com/chalk/4.1.2
      debug: registry.nlark.com/debug/4.3.2
-      vite: registry.nlark.com/vite/2.5.8
+      vite: registry.nlark.com/vite/2.5.10
      windicss: registry.nlark.com/windicss/3.1.7
    transitivePeerDependencies:
      - supports-color
@@ -5851,10 +5855,10 @@ packages:
      - typescript
    dev: true

-  registry.nlark.com/vite/2.5.8:
-    resolution: {integrity: sha1-4tohVAQR6RyxxKYuEzxlKnh88RY=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/vite/download/vite-2.5.8.tgz}
+  registry.nlark.com/vite/2.5.10:
+    resolution: {integrity: sha1-xZjjtafhlW/8Uus7NCDRd/wu0qU=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/vite/download/vite-2.5.10.tgz}
    name: vite
-    version: 2.5.8
+    version: 2.5.10
    engines: {node: '>=12.2.0'}
    hasBin: true
    dependencies:
@@ -5874,7 +5878,7 @@ packages:
    dev: true

  registry.nlark.com/vooks/0.2.8_vue@3.2.10:
-    resolution: {integrity: sha1-+tanjHLjlEPlYoUzewhDuq7tDz4=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/vooks/download/vooks-0.2.8.tgz}
+    resolution: {integrity: sha1-+tanjHLjlEPlYoUzewhDuq7tDz4=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/vooks/download/vooks-0.2.8.tgz}
    id: registry.nlark.com/vooks/0.2.8
    name: vooks
    version: 0.2.8
@@ -6033,7 +6037,7 @@ packages:
    dev: true

  registry.nlark.com/vue-demi/0.11.4_vue@3.2.10:
-    resolution: {integrity: sha1-YQGZL+RyTPVjQBihbpU/MFLpTio=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/vue-demi/download/vue-demi-0.11.4.tgz}
+    resolution: {integrity: sha1-YQGZL+RyTPVjQBihbpU/MFLpTio=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/vue-demi/download/vue-demi-0.11.4.tgz}
    id: registry.nlark.com/vue-demi/0.11.4
    name: vue-demi
    version: 0.11.4
@@ -6043,6 +6047,9 @@ 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
@@ -6104,7 +6111,7 @@ packages:
    dev: false

  registry.nlark.com/vueuc/0.4.10_49d369c5c8880c55ca42949e5b121458:
-    resolution: {integrity: sha1-ria6dqCvFU+KE57zcYE1osat9nY=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/vueuc/download/vueuc-0.4.10.tgz}
+    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
--- a/src/context/index.ts
+++ b/src/context/index.ts
@@ -1,3 +1,3 @@
-import { setupAppContext, useReloadInject } from './app';
+export { setupAppContext, useReloadInject } from './app';

-export { setupAppContext, useReloadInject };
+export { useHoverIndexProvide, useHoverIndexInject } from './part';
--- a/src/context/part/index.ts
+++ b/src/context/part/index.ts
@@ -0,0 +1,5 @@
+import useHoverIndexContext from './useHoverIndexContext';
+
+const { useHoverIndexProvide, useHoverIndexInject } = useHoverIndexContext();
+
+export { useHoverIndexProvide, useHoverIndexInject };
--- a/src/context/part/useHoverIndexContext.ts
+++ b/src/context/part/useHoverIndexContext.ts
@@ -0,0 +1,39 @@
+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
+  };
+}
--- a/src/enum/index.ts
+++ b/src/enum/index.ts
@@ -1,5 +1,5 @@
 export { ContentType, EnumDataType, EnumLoginModule } from './common';
 export { EnumAnimate } from './animate';
-export { EnumNavMode, EnumNavTheme } from './theme';
+export { EnumNavMode, EnumNavTheme, EnumMultiTabMode } from './theme';
 export { EnumRoutePath, EnumRouteTitle } from './route';
 export { EnumStorageKey } from './storage';
--- a/src/enum/theme.ts
+++ b/src/enum/theme.ts
@@ -12,3 +12,8 @@ export enum EnumNavTheme {
  'light' = '白色侧边栏',
  'header-dark' = '暗色的侧边栏和顶栏'
 }
+
+export enum EnumMultiTabMode {
+  'button' = '按钮风格',
+  'browser' = '浏览器风格'
+}
--- a/src/hooks/common/index.ts
+++ b/src/hooks/common/index.ts
@@ -3,5 +3,6 @@ import useContext from './useContext';
 import useRouterChange from './useRouterChange';
 import useRouteParam from './useRouteParam';
 import useRouteQuery from './useRouteQuery';
+import useBoolean from './useBoolean';

-export { useAppTitle, useContext, useRouterChange, useRouteParam, useRouteQuery };
+export { useAppTitle, useContext, useRouterChange, useRouteParam, useRouteQuery, useBoolean };
--- a/src/hooks/common/useBoolean.ts
+++ b/src/hooks/common/useBoolean.ts
@@ -0,0 +1,24 @@
+import { ref } from 'vue';
+
+export default function useBoolean(initValue: boolean = false) {
+  const bool = ref(initValue);
+
+  function setTrue() {
+    bool.value = true;
+  }
+
+  function setFalse() {
+    bool.value = false;
+  }
+
+  function toggle() {
+    bool.value = !bool.value;
+  }
+
+  return {
+    bool,
+    setTrue,
+    setFalse,
+    toggle
+  };
+}
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,2 +1,2 @@
-export { useAppTitle, useContext, useRouterChange, useRouteParam, useRouteQuery } from './common';
+export { useAppTitle, useContext, useRouterChange, useRouteParam, useRouteQuery, useBoolean } from './common';
 export { useCountDown, useSmsCode } from './business';
--- a/src/interface/index.ts
+++ b/src/interface/index.ts
@@ -1,3 +1,3 @@
 export { UserInfo } from './business';
-export { ThemeSettings, NavMode, AnimateType } from './theme';
+export { ThemeSettings, NavMode, MultiTabMode, AnimateType } from './theme';
 export { CustomRoute, RoutePathKey, GlobalMenuOption, LoginModuleType } from './common';
--- a/src/interface/theme.ts
+++ b/src/interface/theme.ts
@@ -1,4 +1,4 @@
-import { EnumAnimate, EnumNavMode, EnumNavTheme } from '@/enum';
+import { EnumAnimate, EnumNavMode, EnumNavTheme, EnumMultiTabMode } from '@/enum';

 export interface ThemeSettings {
  /** 深色模式 */
@@ -69,6 +69,13 @@ interface MenuStyle {
  splitMenu: boolean;
 }

+export type MultiTabMode = keyof typeof EnumMultiTabMode;
+
+interface MultiTabModeList {
+  value: MultiTabMode;
+  label: EnumMultiTabMode;
+}
+
 interface MultiTabStyle {
  /** 多页签高度 */
  height: number;
@@ -76,6 +83,10 @@ interface MultiTabStyle {
  visible: boolean;
  /** 背景颜色 */
  bgColor: string;
+  /** 多页签模式 */
+  mode: MultiTabMode;
+  /** 多页签模式列表 */
+  modeList: MultiTabModeList[];
 }

 interface CrumbsStyle {
--- a/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/LeftTabRadius.vue
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/LeftTabRadius.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="absolute bottom-0 -left-16px flex w-32px h-full bg-white">
+    <div class="relative w-1/2 h-full">
+      <div class="absolute-lt w-full h-full bg-white rounded-br-8px overflow-hidden z-2">
+        <div
+          class="w-full h-full transition-background duration-400 ease-in-out"
+          :class="{ 'bg-black bg-opacity-10': isLeftHover }"
+        ></div>
+      </div>
+      <div
+        class="absolute-lt w-full h-full transition-background duration-400 ease-in-out bg-opacity-10 z-1"
+        :class="{ 'bg-primary': isPrimary, 'bg-black': isHover && !isPrimary }"
+      ></div>
+    </div>
+    <div
+      class="relative w-1/2 h-full transition-background duration-400 ease-in-out"
+      :class="{ 'bg-black bg-opacity-10': isLeftHover }"
+    >
+      <div class="absolute-lt w-full h-full bg-white rounded-tl-8px overflow-hidden z-2">
+        <div
+          class="w-full h-full transition-background duration-400 ease-in-out bg-opacity-10"
+          :class="{ 'bg-primary': isPrimary, 'bg-black': isHover && !isPrimary }"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  isPrimary: {
+    type: Boolean,
+    default: false
+  },
+  isHover: {
+    type: Boolean,
+    default: false
+  },
+  isLeftHover: {
+    type: Boolean,
+    default: false
+  }
+});
+</script>
+<style scoped></style>
--- a/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/RightTabRadius.vue
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/RightTabRadius.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="absolute bottom-0 -right-16px flex w-32px h-full bg-white">
+    <div
+      class="relative w-1/2 h-full transition-background duration-400 ease-in-out"
+      :class="{ 'bg-black bg-opacity-10': isRightHover }"
+    >
+      <div class="absolute-lt w-full h-full bg-white rounded-tr-8px overflow-hidden z-2">
+        <div
+          class="w-full h-full transition-background duration-400 ease-in-out bg-opacity-10"
+          :class="{ 'bg-primary': isPrimary, 'bg-black': isHover && !isPrimary }"
+        ></div>
+      </div>
+    </div>
+    <div class="relative w-1/2 h-full">
+      <div class="absolute-lt w-full h-full bg-white rounded-bl-8px overflow-hidden z-2">
+        <div
+          class="w-full h-full transition-background duration-400 ease-in-out bg-opacity-10"
+          :class="[isRightHover ? 'bg-black' : 'bg-white']"
+        ></div>
+      </div>
+      <div
+        class="absolute-lt w-full h-full transition-background duration-400 ease-in-out bg-opacity-10 z-1"
+        :class="{ 'bg-primary': isPrimary, 'bg-black': isHover && !isPrimary }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  isPrimary: {
+    type: Boolean,
+    default: false
+  },
+  isHover: {
+    type: Boolean,
+    default: false
+  },
+  isRightHover: {
+    type: Boolean,
+    default: false
+  }
+});
+</script>
+<style scoped></style>
--- a/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/index.ts
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/index.ts
@@ -0,0 +1,4 @@
+import LeftTabRadius from './LeftTabRadius.vue';
+import RightTabRadius from './RightTabRadius.vue';
+
+export { LeftTabRadius, RightTabRadius };
--- a/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/index.vue
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/index.vue
@@ -0,0 +1,117 @@
+<template>
+  <div
+    class="
+      relative
+      inline-flex-center
+      h-34px
+      px-32px
+      transition-background
+      duration-400
+      ease-in-out
+      bg-opacity-10
+      cursor-pointer
+    "
+    :class="{ 'text-primary bg-primary z-3': active, 'bg-black z-2': isHover && !active }"
+    @mouseenter="handleMouseOnTab('enter')"
+    @mouseleave="handleMouseOnTab('leave')"
+  >
+    <span>
+      <slot></slot>
+    </span>
+    <div
+      v-if="closable"
+      class="transition-width duration-400 ease-in-out overflow-hidden"
+      :class="[isHover ? 'w-18px' : 'w-0']"
+    >
+      <icon-close :is-primary="active" @click="handleClose" />
+    </div>
+    <left-tab-radius
+      class="transition-opacity duration-400 ease-in-out"
+      :class="[showRadius ? 'opacity-100' : 'opacity-0']"
+      :is-primary="active"
+      :is-hover="isHover"
+      :is-left-hover="isLeftHover"
+    />
+    <right-tab-radius
+      class="transition-opacity duration-400 ease-out"
+      :class="[showRadius ? 'opacity-100' : 'opacity-0']"
+      :is-primary="active"
+      :is-hover="isHover"
+      :is-right-hover="isRightHover"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import { useBoolean } from '@/hooks';
+import { IconClose } from '../common';
+import { LeftTabRadius, RightTabRadius } from './components';
+
+const props = defineProps({
+  currentIndex: {
+    type: Number,
+    required: true
+  },
+  activeIndex: {
+    type: Number,
+    required: true
+  },
+  hoverIndex: {
+    type: Number,
+    default: NaN
+  },
+  closable: {
+    type: Boolean,
+    default: true
+  }
+});
+const emit = defineEmits(['close', 'update:hoverIndex']);
+
+const { bool: isHover, setTrue, setFalse } = useBoolean();
+
+const hoveredIndex = ref(props.hoverIndex);
+function setHoverIndex(index: number) {
+  hoveredIndex.value = index;
+}
+function resetHoverIndex() {
+  hoveredIndex.value = NaN;
+}
+
+const active = computed(() => props.currentIndex === props.activeIndex);
+const showRadius = computed(() => isHover.value || active.value);
+const isLeftHover = computed(() => active.value && props.activeIndex === hoveredIndex.value + 1);
+const isRightHover = computed(() => active.value && props.activeIndex === hoveredIndex.value - 1);
+
+function handleMouseOnTab(mode: 'enter' | 'leave') {
+  if (mode === 'enter') {
+    setTrue();
+    setHoverIndex(props.currentIndex);
+  } else {
+    setFalse();
+    resetHoverIndex();
+  }
+}
+
+function handleClose(e: MouseEvent) {
+  e.stopPropagation();
+  emit('close');
+}
+
+watch(
+  () => props.hoverIndex,
+  newValue => {
+    setHoverIndex(newValue);
+  }
+);
+watch(hoveredIndex, newValue => {
+  emit('update:hoverIndex', newValue);
+});
+watch(
+  () => props.activeIndex,
+  () => {
+    resetHoverIndex();
+  }
+);
+</script>
+<style scoped></style>
--- a/src/layouts/BasicLayout/components/GlobalTab/components/ButtonTab/index.vue
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/ButtonTab/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <div
+    class="
+      button-tab
+      inline-flex-center
+      h-34px
+      px-14px
+      bg-white
+      border-1px border-[#e5e7eb]
+      rounded-2px
+      cursor-pointer
+      hover:text-primary hover:border-primary
+    "
+    :class="{ 'text-primary bg-primary bg-opacity-10 !border-primary': active }"
+  >
+    <span>
+      <slot></slot>
+    </span>
+    <div v-if="closable" class="icon-close-container w-0 overflow-hidden">
+      <icon-close :is-primary="true" @click="handleClose" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { IconClose } from '../common';
+
+defineProps({
+  active: {
+    type: Boolean,
+    default: false
+  },
+  closable: {
+    type: Boolean,
+    default: true
+  }
+});
+const emit = defineEmits(['close']);
+
+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>
--- a/src/layouts/BasicLayout/components/GlobalTab/components/CardTab.vue
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/CardTab.vue
@@ -1,6 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script lang="ts" setup></script>
-<style scoped></style>
--- a/src/layouts/BasicLayout/components/GlobalTab/components/common/IconClose.vue
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/common/IconClose.vue
@@ -0,0 +1,27 @@
+<template>
+  <div
+    class="relative flex-center w-18px h-18px text-14px"
+    :class="{ 'text-primary': isPrimary }"
+    @mouseenter="setTrue"
+    @mouseleave="setFalse"
+  >
+    <transition name="transition-opacity">
+      <icon-carbon-close-filled v-if="isHover" key="hover" class="absolute" />
+      <icon-carbon-close v-else key="unhover" class="absolute" />
+    </transition>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useBoolean } from '@/hooks';
+
+defineProps({
+  isPrimary: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const { bool: isHover, setTrue, setFalse } = useBoolean();
+</script>
+<style scoped></style>
--- a/src/layouts/BasicLayout/components/GlobalTab/components/common/index.ts
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/common/index.ts
@@ -0,0 +1,3 @@
+import IconClose from './IconClose.vue';
+
+export { IconClose };
--- a/src/layouts/BasicLayout/components/GlobalTab/components/index.ts
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/index.ts
@@ -0,0 +1,4 @@
+import ButtonTab from './ButtonTab/index.vue';
+import BrowserTab from './BrowserTab/index.vue';
+
+export { ButtonTab, BrowserTab };
--- a/src/layouts/BasicLayout/components/GlobalTab/index.vue
+++ b/src/layouts/BasicLayout/components/GlobalTab/index.vue
@@ -1,25 +1,39 @@
 <template>
  <div v-if="fixedHeaderAndTab && theme.navStyle.mode !== 'horizontal-mix'" class="multi-tab-height w-full"></div>
  <div
-    class="multi-tab-height flex-y-center justify-between w-full px-10px"
-    :class="{ 'multi-tab-top absolute': fixedHeaderAndTab, 'bg-[#f5f7f9]': !theme.darkMode }"
+    class="multi-tab-height flex-center justify-between w-full px-10px"
+    :class="{ 'multi-tab-top absolute': fixedHeaderAndTab, 'bg-[#18181c]': theme.darkMode }"
    :style="{ zIndex }"
+    :align="'center'"
+    justify="space-between"
+    :item-style="{ paddingTop: '0px', paddingBottom: '0px' }"
  >
-    <n-space :align="'center'">
-      <n-tag
+    <n-space v-if="theme.multiTabStyle.mode === 'button'" :align="'center'" size="small" class="h-full">
+      <button-tab
        v-for="item in app.multiTab.routes"
        :key="item.path"
-        :type="app.multiTab.activeRoute === item.fullPath ? 'primary' : 'default'"
-        class="cursor-pointer"
+        :active="app.multiTab.activeRoute === item.fullPath"
        :closable="item.name !== ROUTE_HOME.name"
-        size="large"
        @click="handleClickTab(item.fullPath)"
-        @close.stop="removeMultiTab(item.fullPath)"
+        @close="removeMultiTab(item.fullPath)"
      >
        {{ item.meta?.title }}
-      </n-tag>
+      </button-tab>
+    </n-space>
+    <n-space v-if="theme.multiTabStyle.mode === 'browser'" :align="'flex-end'" :size="0" class="h-full px-16px">
+      <browser-tab
+        v-for="(item, index) in app.multiTab.routes"
+        :key="item.path"
+        v-model:hover-index="hoverIndex"
+        :current-index="index"
+        :active-index="app.activeMultiTabIndex"
+        :closable="item.name !== ROUTE_HOME.name"
+        @click="handleClickTab(item.fullPath)"
+        @close="removeMultiTab(item.fullPath)"
+      >
+        {{ item.meta?.title }}
+      </browser-tab>
    </n-space>
-    <h3>{{ reload }}</h3>
    <div class="flex-center w-32px h-32px bg-white cursor-pointer" @click="handleReload">
      <icon-mdi-refresh class="text-16px" />
    </div>
@@ -27,13 +41,13 @@
 </template>

 <script lang="ts" setup>
-import { computed, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { NSpace, NTag } from 'naive-ui';
+import { NSpace } from 'naive-ui';
 import { useThemeStore, useAppStore } from '@/store';
-// import { useRouterChange } from '@/hooks';
 import { useReloadInject } from '@/context';
 import { ROUTE_HOME } from '@/router';
+import { ButtonTab, BrowserTab } from './components';

 defineProps({
  zIndex: {
@@ -46,8 +60,9 @@ const route = useRoute();
 const theme = useThemeStore();
 const app = useAppStore();
 const { initMultiTab, addMultiTab, removeMultiTab, setActiveMultiTab, handleClickTab } = useAppStore();
-// const { toReload } = useRouterChange();
-const { reload, handleReload } = useReloadInject();
+const { handleReload } = useReloadInject();
+
+const hoverIndex = ref(NaN);

 const fixedHeaderAndTab = computed(() => theme.fixedHeaderAndTab || theme.navStyle.mode === 'horizontal-mix');
 const multiTabHeight = computed(() => {
@@ -59,10 +74,6 @@ const headerHeight = computed(() => {
  return `${height}px`;
 });

-// async function handleReload() {
-//   // toReload(route.fullPath);
-// }
-
 function init() {
  initMultiTab();
 }
--- a/src/layouts/BasicLayout/components/SettingDrawer/components/PageView/index.vue
+++ b/src/layouts/BasicLayout/components/SettingDrawer/components/PageView/index.vue
@@ -10,6 +10,15 @@
    <setting-menu-item label="多页签">
      <n-switch :value="theme.multiTabStyle.visible" @update:value="handleMultiTabVisible" />
    </setting-menu-item>
+    <setting-menu-item label="多页签风格">
+      <n-select
+        class="w-120px"
+        size="small"
+        :value="theme.multiTabStyle.mode"
+        :options="theme.multiTabStyle.modeList"
+        @update:value="handleMultiTabMode"
+      />
+    </setting-menu-item>
    <setting-menu-item label="页面切换动画">
      <n-switch :value="theme.pageStyle.animate" @update:value="handlePageAnimate" />
    </setting-menu-item>
@@ -35,6 +44,7 @@ const {
  handleCrumbsVisible,
  handleCrumbsIconVisible,
  handleMultiTabVisible,
+  handleMultiTabMode,
  handlePageAnimate,
  handlePageAnimateType
 } = useThemeStore();
--- a/src/layouts/BasicLayout/index.vue
+++ b/src/layouts/BasicLayout/index.vue
@@ -15,8 +15,8 @@
          :class="[{ 'content-padding': isHorizontalMix }, routeProps.fullPage ? 'h-full' : 'min-h-100vh']"
        >
          <global-header v-if="!isHorizontalMix" :z-index="1" />
-          <global-tab :z-index="1" />
-          <n-layout-content class="flex-auto" :class="{ 'bg-[#f5f7f9]': !theme.darkMode }">
+          <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 }">
              <keep-alive>
                <component :is="Component" v-if="routeProps.keepAlive && reload" :key="routeProps.name" />
--- a/src/settings/theme.ts
+++ b/src/settings/theme.ts
@@ -1,5 +1,5 @@
 import type { ThemeSettings } from '../interface';
-import { EnumAnimate } from '../enum';
+import { EnumAnimate, EnumMultiTabMode } from '../enum';

 const themeColorList = [
  '#409EFF',
@@ -48,9 +48,14 @@ const themeSettings: ThemeSettings = {
    bgColor: '#fff'
  },
  multiTabStyle: {
-    height: 44,
+    height: 48,
    visible: true,
-    bgColor: '#fff'
+    bgColor: '#fff',
+    mode: 'browser',
+    modeList: [
+      { value: 'button', label: EnumMultiTabMode.button },
+      { value: 'browser', label: EnumMultiTabMode.browser }
+    ]
  },
  crumbsStyle: {
    visible: true,
--- a/src/store/modules/app/index.ts
+++ b/src/store/modules/app/index.ts
@@ -51,6 +51,12 @@ const appStore = defineStore({
      visible: false
    }
  }),
+  getters: {
+    activeMultiTabIndex(state) {
+      const { routes, activeRoute } = state.multiTab;
+      return routes.findIndex(v => v.fullPath === activeRoute);
+    }
+  },
  actions: {
    /** 折叠/展开菜单 */
    handleMenuCollapse(collapsed: boolean) {
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import type { GlobalThemeOverrides } from 'naive-ui';
 import { themeSettings } from '@/settings';
 import { store } from '@/store';
-import type { ThemeSettings, NavMode, AnimateType } from '@/interface';
+import type { ThemeSettings, NavMode, MultiTabMode, AnimateType } from '@/interface';
 import { getHoverAndPressedColor } from './helpers';

 type ThemeState = ThemeSettings;
@@ -101,6 +101,10 @@ const themeStore = defineStore({
    handleMultiTabVisible(visible: boolean) {
      this.multiTabStyle.visible = visible;
    },
+    /** 设置多页签的显示 */
+    handleMultiTabMode(mode: MultiTabMode) {
+      this.multiTabStyle.mode = mode;
+    },
    /** 设置面包屑的显示 */
    handleCrumbsVisible(visible: boolean) {
      this.crumbsStyle.visible = visible;
--- a/src/styles/css/animation.css
+++ b/src/styles/css/animation.css
@@ -0,0 +1,9 @@
+/* opacity透明过度 */
+.transition-opacity-enter-active,
+.transition-opacity-enter-active {
+  transition: opacity 0.4s ease-out;
+}
+.transition-opacity-enter-from,
+.transition-opacity-leave-to {
+  opacity: 0;
+}
--- a/src/styles/css/global.css
+++ b/src/styles/css/global.css
@@ -1,4 +1,5 @@
@import './scrollbar.css';
+@import './animation.css';

 html,
 body,
--- a/src/typings/shims-vue.d.ts
+++ b/src/typings/shims-vue.d.ts
--- a/src/typings/vite-env.d.ts
+++ b/src/typings/vite-env.d.ts
--- a/src/typings/window.d.ts
+++ b/src/typings/window.d.ts
--- a/src/views/dashboard/analysis/index.vue
+++ b/src/views/dashboard/analysis/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="px-10px">
+  <div>
    <data-card :loading="loading" />
    <nav-card :loading="loading" />
  </div>
--- a/src/views/dashboard/workbench/index.vue
+++ b/src/views/dashboard/workbench/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="px-10px">
+  <div>
    <div class="flex-y-center flex-col h-500px bg-white">
      <n-gradient-text type="primary" size="32">工作台</n-gradient-text>
      <n-space>
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,5 +1,4 @@
 import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
 import path from 'path';
 import { viteEnv, plugins } from './build';

@@ -17,7 +16,7 @@ export default defineConfig({
      }
    }
  },
-  plugins: [vue(), ...plugins],
+  plugins,
  build: {
    brotliSize: false
  }
--- a/windi.config.ts
+++ b/windi.config.ts
@@ -36,7 +36,8 @@ export default defineConfig({
        success,
        warning,
        error
-      }
+      },
+      transitionProperty: ['width', 'height', 'background']
    }
  },
  variants: {},