chore(release): 0.9.6

feat(projects): 本地svg动态渲染图标
ISSUES CLOSED: #61
2025-10-11 20:33:41 +08:00 · 2022-06-16 01:18:18 +08:00 · 2022-06-16 01:17:31 +08:00 · 2022-06-15 23:44:46 +08:00 · 2022-06-14 16:54:03 +08:00 · 2022-06-14 16:09:33 +08:00
226 changed files with 8953 additions and 4078 deletions
--- a/.env
+++ b/.env
@@ -9,4 +9,5 @@ VITE_APP_DESC=SoybeanAdmin是一个中后台管理系统模版
 # 权限路由模式: static ｜ dynamic
 VITE_AUTH_ROUTE_MODE=dynamic

-VITE_VISUALIZER=false
+# 路由首页(根路由重定向), 用于static模式的权限路由，dynamic模式取决于后端返回的路由首页
+VITE_ROUTE_HOME_PATH=/dashboard/analysis
--- a/.env-config.ts
+++ b/.env-config.ts
@@ -1,13 +1,5 @@
 /** 请求环境配置 */
-type ServiceEnv = Record<
-  EnvType,
-  {
-    /** 请求地址 */
-    url: string;
-    /** 代理地址 */
-    proxy: string;
-  }
->;
+type ServiceEnv = Record<EnvType, EnvConfig>;

 /** 环境配置 */
 const serviceEnvConfig: ServiceEnv = {
@@ -31,8 +23,8 @@ const serviceEnvConfig: ServiceEnv = {
 */
 export function getEnvConfig(env: ImportMetaEnv) {
  const { VITE_ENV_TYPE = 'dev' } = env;
-  const envConfig = {
-    http: serviceEnvConfig[VITE_ENV_TYPE]
-  };
+
+  const envConfig = serviceEnvConfig[VITE_ENV_TYPE];
+
  return envConfig;
 }
--- a/.env.production
+++ b/.env.production
@@ -1 +1,6 @@
+VITE_VISUALIZER=false

+VITE_COMPRESS=false
+
+# gzip | brotliCompress | deflate | deflateRaw
+VITE_COMPRESS_TYPE=gzip
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -26,9 +26,47 @@ module.exports = {
    '@vue/eslint-config-prettier',
    '@vue/typescript/recommended'
  ],
+  overrides: [
+    {
+      files: ['*.vue'],
+      rules: {
+        'no-undef': 'off'
+      }
+    },
+    {
+      files: ['*.html'],
+      rules: {
+        'vue/comment-directive': 'off'
+      }
+    }
+  ],
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [
+          ['~', '.'],
+          ['@', './src']
+        ],
+        extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx', '.d.ts']
+      },
+      node: {
+        extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx', '.d.ts']
+      }
+    }
+  },
  rules: {
-    'import/extensions': 'off',
-    'import/no-extraneous-dependencies': 'off',
+    'import/extensions': [
+      'warn',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        mjs: 'never',
+        ts: 'never',
+        tsx: 'never'
+      }
+    ],
+    'import/no-extraneous-dependencies': ['error', { devDependencies: true, peerDependencies: true }],
    'import/order': [
      'error',
      {
@@ -55,12 +93,11 @@ module.exports = {
            group: 'external',
            position: 'before'
          },
-          // ui framework, such as "naive-ui"
-          // {
-          //   pattern: 'naive-ui',
-          //   group: 'external',
-          //   position: 'before'
-          // },
+          {
+            pattern: 'naive-ui',
+            group: 'external',
+            position: 'before'
+          },
          {
            pattern: '@/config',
            group: 'internal',
@@ -142,16 +179,10 @@ module.exports = {
            position: 'before'
          }
        ],
-        pathGroupsExcludedImportTypes: [
-          'vue',
-          'vue-router',
-          'vuex',
-          'pinia'
-          // 'naive-ui'
-        ]
+        pathGroupsExcludedImportTypes: ['vue', 'vue-router', 'vuex', 'pinia', 'naive-ui']
      }
    ],
-    'import/no-unresolved': 'off',
+    'import/no-unresolved': ['error', { ignore: ['uno.css', '~icons/*', 'virtual:svg-icons-register'] }],
    'import/prefer-default-export': 'off',
    'max-classes-per-file': 'off',
    'no-param-reassign': [
@@ -161,7 +192,6 @@ module.exports = {
        ignorePropertyModificationsFor: ['state', 'acc', 'e']
      }
    ],
-    'no-plusplus': 'off',
    'no-shadow': 'off',
    'no-unused-vars': 'off',
    'no-use-before-define': 'off',
@@ -171,17 +201,6 @@ module.exports = {
        ignores: ['index']
      }
    ],
-    '@typescript-eslint/ban-types': [
-      'error',
-      {
-        types: {
-          '{}': {
-            message: 'Use object instead',
-            fixWith: 'object'
-          }
-        }
-      }
-    ],
    '@typescript-eslint/no-empty-interface': [
      'error',
      {
@@ -193,19 +212,5 @@ module.exports = {
    '@typescript-eslint/no-shadow': 'error',
    '@typescript-eslint/no-unused-vars': ['warn', { ignoreRestSiblings: true, varsIgnorePattern: '^_' }],
    '@typescript-eslint/no-use-before-define': ['error', { classes: true, functions: false, typedefs: false }]
-  },
-  overrides: [
-    {
-      files: ['*.vue'],
-      rules: {
-        'no-undef': 'off'
-      }
-    },
-    {
-      files: ['*.html'],
-      rules: {
-        'vue/comment-directive': 'off'
-      }
-    }
-  ]
+  }
 };
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,5 @@ stats.html
 *.njsproj
 *.sln
 *.sw?
+
+/src/typings/components.d.ts
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1,3 @@
+registry=https://registry.npmmirror.com/
+shamefully-hoist=true
+strict-peer-dependencies=false
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,36 +1,26 @@
 {
 	"recommendations": [
-		"formulahendry.auto-close-tag",
-		"formulahendry.auto-complete-tag",
-		"steoates.autoimport",
-		"formulahendry.auto-rename-tag",
-		"coenraads.bracket-pair-colorizer-2",
-		"naumovs.color-highlight",
-		"pranaygp.vscode-css-peek",
-		"mikestead.dotenv",
-		"editorconfig.editorconfig",
-		"dsznajder.es7-react-js-snippets",
-		"dbaeumer.vscode-eslint",
-		"miguelsolorio.fluent-icons",
-		"mhutchie.git-graph",
-		"eamodio.gitlens",
-		"lokalise.i18n-ally",
 		"afzalsayed96.icones",
 		"antfu.iconify",
-		"kisstkondoros.vscode-gutter-preview",
-		"xabikos.javascriptsnippets",
-		"whtouche.vscode-js-console-utils",
-		"ritwickdey.liveserver",
-		"yzhang.markdown-all-in-one",
-		"pkief.material-icon-theme",
-		"zhuangtongfa.material-theme",
-		"jimdong.naive-ui-snippets",
+		"antfu.unocss",
 		"christian-kohler.path-intellisense",
+		"dbaeumer.vscode-eslint",
+		"eamodio.gitlens",
+		"editorconfig.editorconfig",
 		"esbenp.prettier-vscode",
-		"johnsoncodehk.volar",
-		"johnsoncodehk.vscode-typescript-vue-plugin",
-		"dariofuzinato.vue-peek",
-		"wscats.vue",
-		"voorjaar.windicss-intellisense"
+		"formulahendry.auto-complete-tag",
+		"formulahendry.auto-close-tag",
+		"formulahendry.auto-rename-tag",
+		"kisstkondoros.vscode-gutter-preview",
+		"lokalise.i18n-ally",
+		"mhutchie.git-graph",
+		"mikestead.dotenv",
+		"naumovs.color-highlight",
+		"pkief.material-icon-theme",
+		"steoates.autoimport",
+		"vue.volar",
+		"vue.vscode-typescript-vue-plugin",
+		"whtouche.vscode-js-console-utils",
+		"zhuangtongfa.material-theme"
 	]
 }
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,63 +1,22 @@
 {
-	"editor.quickSuggestions": {
-		"strings": true
-	},
-	"workbench.iconTheme": "material-icon-theme",
-	"workbench.colorTheme": "One Dark Pro",
-	"editor.tabSize": 2,
-	"editor.fontLigatures": true,
 	"editor.codeActionsOnSave": {
 		"source.fixAll.eslint": true
 	},
-	"editor.bracketPairColorization.enabled": true,
+	"editor.fontLigatures": true,
+	"editor.formatOnSave": false,
 	"editor.guides.bracketPairs": "active",
-	"git.enableSmartCommit": true,
-	"path-intellisense.mappings": {
-		"@": "${workspaceFolder}/src",
-		"~@": "${workspaceFolder}/src",
+	"editor.quickSuggestions": {
+		"strings": true
 	},
+	"editor.tabSize": 2,
+	"files.associations": {
+		"*.env.*": "dotenv"
+	},
+	"git.enableSmartCommit": true,
 	"gutterpreview.paths": {
 		"@": "/src",
 		"~@": "/src"
 	},
-	"terminal.integrated.cursorStyle": "line",
-	"files.associations": {
-		"*.env.*": "dotenv"
-	},
-	"[jsonc]": {
-		"editor.defaultFormatter": "vscode.json-language-features"
-	},
-	"[json]": {
-		"editor.defaultFormatter": "vscode.json-language-features"
-	},
-	"[javascript]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
-	},
-	"javascript.updateImportsOnFileMove.enabled": "always",
-	"[javascriptreact]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
-	},
-	"terminal.integrated.fontSize": 14,
-	"terminal.integrated.fontWeight": 500,
-	"i18n-ally.displayLanguage": "zh",
-	"[html]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
-	},
-	"[typescript]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
-	},
-	"[vue]": {
-		"editor.defaultFormatter": "johnsoncodehk.volar"
-	},
-	"terminal.integrated.tabs.enabled": true,
-	"[typescriptreact]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
-	},
-	"[markdown]": {
-		"editor.defaultFormatter": "yzhang.markdown-all-in-one"
-	},
-	"vue3snippets.enable-compile-vue-file-on-did-save-code": false,
-	"editor.formatOnSave": false,
 	"material-icon-theme.activeIconPack": "angular",
 	"material-icon-theme.files.associations": {},
 	"material-icon-theme.folders.associations": {
@@ -72,5 +31,43 @@
 		"business": "core",
 		"request": "api",
 		"adapter": "middleware"
+	},
+	"path-intellisense.mappings": {
+		"@": "${workspaceFolder}/src",
+		"~@": "${workspaceFolder}/src",
+	},
+	"terminal.integrated.cursorStyle": "line",
+	"terminal.integrated.fontSize": 14,
+	"terminal.integrated.fontWeight": 500,
+	"terminal.integrated.tabs.enabled": true,
+	"unocss.root": "src",
+	"workbench.iconTheme": "material-icon-theme",
+	"workbench.colorTheme": "One Dark Pro",
+	"[html]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[json]": {
+		"editor.defaultFormatter": "vscode.json-language-features"
+	},
+	"[jsonc]": {
+		"editor.defaultFormatter": "vscode.json-language-features"
+	},
+	"[javascript]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[javascriptreact]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[markdown]": {
+		"editor.defaultFormatter": "yzhang.markdown-all-in-one"
+	},
+	"[typescript]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[typescriptreact]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[vue]": {
+		"editor.defaultFormatter": "Vue.volar"
 	}
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,77 @@

 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

+### [0.9.6](https://github.com/honghuangdc/soybean-admin/compare/v0.9.5...v0.9.6) (2022-06-15)
+
+
+### Features
+
+* **projects:** 本地svg动态渲染图标 ([c3c975e](https://github.com/honghuangdc/soybean-admin/commit/c3c975ee1142987b7ded0107bf91d0080d5651fe)), closes [#61](https://github.com/honghuangdc/soybean-admin/issues/61)
+* **projects:** 上下结构，菜单支持横向滚动 ([808051b](https://github.com/honghuangdc/soybean-admin/commit/808051b29dd682e1cbcf0e211774efb9cc12713a))
+* **projects:** 新增Antv G2图表示例 ([2d64a2e](https://github.com/honghuangdc/soybean-admin/commit/2d64a2e57c8d83c8d06f210eeefef8f31b3abeb9))
+* **projects:** 增加设置当前Tab页签名称功能 ([487213b](https://github.com/honghuangdc/soybean-admin/commit/487213b64853765e2bd186474e4607572624a33e))
+
+
+### Bug Fixes
+
+* **projects:** 设置tab标题导致meta属性丢失 ([efcfa57](https://github.com/honghuangdc/soybean-admin/commit/efcfa576d52a7eab644f3b4c65af153442887fab))
+* **projects:** 修复顶部菜单的位置失效问题 ([4ee0d94](https://github.com/honghuangdc/soybean-admin/commit/4ee0d94f1bde83c788fc0dcb084402359c04fb1b))
+
+### [0.9.5](https://github.com/honghuangdc/soybean-admin/compare/v0.9.4...v0.9.5) (2022-06-06)
+
+
+### Features
+
+* **projects:** 支持同一路由根据不同query和hash同时显示不同Tab ([4122685](https://github.com/honghuangdc/soybean-admin/commit/4122685803f8a0a485682d16cec74e27945adc47)), closes [#64](https://github.com/honghuangdc/soybean-admin/issues/64)
+* **projects:** 动态路由根路由重定向只需取决于后端返回的路由首页 ([434ab1c](https://github.com/honghuangdc/soybean-admin/commit/434ab1c560b260f8a19895405eb1d3c3313052d7))
+* **projects:** 补充更多的ECharts示例 ([c776249](https://github.com/honghuangdc/soybean-admin/commit/c7762490def77695bedf179ffc63e3e95d15e14d))
+* **projects:** 添加百度地图、升级依赖 ([39854a4](https://github.com/honghuangdc/soybean-admin/commit/39854a492b9cce71e0c7ed52af9985cb4abd6a97))
+* **projects:** 添加插件页面：图表 ([0a46ea0](https://github.com/honghuangdc/soybean-admin/commit/0a46ea08443f6b879434e925d440cf07e9494fcb))
+* **projects:** 添加自动跟随系统主题设置 ([ba07b69](https://github.com/honghuangdc/soybean-admin/commit/ba07b695dd9dc5d3f8ebf57d0f2e69d624994962))
+* **projects:** 添加antv g2图表示例 ([44b022a](https://github.com/honghuangdc/soybean-admin/commit/44b022aefd7dbb4c34886814cf04767450dec026))
+* **projects:** 引入echarts替换antvG2plot ([e7ad086](https://github.com/honghuangdc/soybean-admin/commit/e7ad08685e8ac52a8906fc94e656192275f9764c))
+* **route:** 路由meta新增activeMenu属性 ([ebd16a4](https://github.com/honghuangdc/soybean-admin/commit/ebd16a4d1ab1a95a27838a2d4f20cc1d1e7309ae))
+
+
+### Bug Fixes
+
+* **projects:** 修复@antv/g2生产环境报错 ([4558c24](https://github.com/honghuangdc/soybean-admin/commit/4558c24d1c1e1faa3326650fc16e6baf384509ac))
+* **projects:** 修复插件不存在的错误提示 ([7165282](https://github.com/honghuangdc/soybean-admin/commit/716528206e9f63e873607d0afd59d83f6984e3fe))
+* **projects:** 修复权限切换路由数据未更新的问题 ([60f9125](https://github.com/honghuangdc/soybean-admin/commit/60f912508b0e685957fb22ef0ed1f83272847263))
+* **projects:** 修复页面切换时导致的溢出滚动条 ([e023306](https://github.com/honghuangdc/soybean-admin/commit/e0233061d3bca236b4c4bb462ce00f7ca186b9fa))
+* **route:** 当为左侧混合菜单时activeMenu无效情况 ([3e4f9e2](https://github.com/honghuangdc/soybean-admin/commit/3e4f9e282442073447c5c24c33d65bc6130978ee))
+
+### [0.9.4](https://github.com/honghuangdc/soybean-admin/compare/v0.9.3...v0.9.4) (2022-04-28)
+
+
+### Features
+
+* **layouts:** 添加侧边栏/头部的反转模式来增加对比度 ([861c8b9](https://github.com/honghuangdc/soybean-admin/commit/861c8b9852e0097a1f6b79ac2c10d19add123bde))
+* **layouts:** 添加侧边栏/头部的反转模式来增加对比度 ([3c8dd77](https://github.com/honghuangdc/soybean-admin/commit/3c8dd772f89d2b656a42c4f7164e581acdb2b1a5))
+* **projects:** 插件方式按需引入naiveUI ([6bed9ea](https://github.com/honghuangdc/soybean-admin/commit/6bed9ead38af6d58f6cd9e520db848ae5cbfa4db))
+* **projects:** 登录页背景图片位置适配移动端 ([24010d0](https://github.com/honghuangdc/soybean-admin/commit/24010d05fb1ff51cb5e5d94ffe310206a9638711))
+* **projects:** 登录页面适配移动端 ([ec0776e](https://github.com/honghuangdc/soybean-admin/commit/ec0776e268cd3d1031e9ecd794abce271a675793))
+* **projects:** 权限完善及权限示例页面 ([807448a](https://github.com/honghuangdc/soybean-admin/commit/807448aec5b041535fe4fbac90eca1138b2f439c))
+* **projects:** 添加请求适配器的请求示例 ([bed4292](https://github.com/honghuangdc/soybean-admin/commit/bed4292ed380e77ac428ab057abc42eceb72af53))
+* **projects:** 新增静态路由 ([ca2dfa6](https://github.com/honghuangdc/soybean-admin/commit/ca2dfa6185aa7a4e58184bcfef2a1246a52f88fd))
+* **projects:** 引入unocss替换windicss ([c9d3e5a](https://github.com/honghuangdc/soybean-admin/commit/c9d3e5a3fdf59179dcfc122ab8369c492ea7832e))
+* **projects:** HTML lang 修改为 zh-cmn-Hans ([b9c5c34](https://github.com/honghuangdc/soybean-admin/commit/b9c5c349790b1e83a7acd1f2c53a86c9221944ff))
+* **projects:** HTML lang 修改为 zh-cmn-Hans ([dbeb595](https://github.com/honghuangdc/soybean-admin/commit/dbeb595c0b9fc11e7d166a7684af37cc971f1a11))
+* **projects:** mock添加权限过滤 ([7f4350a](https://github.com/honghuangdc/soybean-admin/commit/7f4350aeb673dab59192584177a897aacebe4b28))
+
+
+### Bug Fixes
+
+* **projects:** 去除从环境文件引入端口号导致的错误 ([2d6d179](https://github.com/honghuangdc/soybean-admin/commit/2d6d179d669ea71cca3fe97ac840e4856bff4051))
+* **projects:** 全局搜索弹窗弹出时动画闪屏问题 ([bb1bbf2](https://github.com/honghuangdc/soybean-admin/commit/bb1bbf272438f4ed440735118c6a9ec04c7d109f))
+* **projects:** 添加.npmrc修复无法获取自动引入的全局组件声明类型 ([e8488e4](https://github.com/honghuangdc/soybean-admin/commit/e8488e4d5237e5e03ec07ff07d03115389d5b1ef))
+* **projects:** 添加获取路由组件文件未找到时的错误提示 ([219f87f](https://github.com/honghuangdc/soybean-admin/commit/219f87f46758f328f26697f66d8583f49c0d41de))
+* **projects:** 修复获取vite环境变量的方式 ([46e1ae7](https://github.com/honghuangdc/soybean-admin/commit/46e1ae7825b2b204ce3cdd63b3c64f39bff096d0))
+* **projects:** 修复路由守卫的动态路由逻辑 ([e6c26fc](https://github.com/honghuangdc/soybean-admin/commit/e6c26fcb4ae085f9fd7d7eb9183ddba020d0b5da))
+* **projects:** 修复样式 ([e899914](https://github.com/honghuangdc/soybean-admin/commit/e8999144266761b3b701442975c3c00251240d53))
+* **projects:** 修复在新版vite下环境变量获取不到的问题 ([3fb13ca](https://github.com/honghuangdc/soybean-admin/commit/3fb13ca9e710549d2ddeb774fe08fabd27d5ae11))
+* **projects:** 修复vite alias ([cd7ca8f](https://github.com/honghuangdc/soybean-admin/commit/cd7ca8f4c77ac8c753b753ba698a9573d6c37bf9))
+
 ### [0.9.3](https://github.com/honghuangdc/soybean-admin/compare/v0.9.2...v0.9.3) (2022-03-12)


--- a/README.md
+++ b/README.md
@@ -7,16 +7,16 @@

 ## 简介

-Soybean Admin  是一个基于 Vue3、Vite、TypeScript、Naive UI 的免费中后台模版，它使用了最新的前端技术栈，内置丰富的主题配置，有着极高的代码规范，基于mock实现的动态权限路由，开箱即用的中后台前端解决方案，也可用于学习参考。
+Soybean Admin 是一个基于 Vue3、Vite、TypeScript、Naive UI 的免费中后台模版，它使用了最新的前端技术栈，内置丰富的主题配置，有着极高的代码规范，基于mock实现的动态权限路由，开箱即用的中后台前端解决方案，也可用于学习参考。

 ## 特性

 - **最新技术栈**：使用 Vue3/vite2 等前端前沿技术开发, 使用高效率的npm包管理器pnpm
- **TypeScript**: 应用程序级 JavaScript 的语言
- **主题**：丰富可配置的主题、暗黑模式，基于windicss的动态主题颜色
+- **TypeScript**：应用程序级 JavaScript 的语言
+- **主题**：丰富可配置的主题、暗黑模式，基于原子css - unocss的动态主题颜色
 - **代码规范**：丰富的规范插件及极高的代码规范
 - **权限路由**：简易的路由配置、基于mock的动态路由能快速实现后端动态路由
- **请求函数**：基于axios的完善的请求函数封装，提供Promise和hooks两种请求函数
+- **请求函数**：基于axios的完善的请求函数封装，提供Promise和hooks两种请求函数，加入请求结果数据转换的适配器

 ## 预览

@@ -32,41 +32,65 @@ Soybean Admin  是一个基于 Vue3、Vite、TypeScript、Naive UI 的免费中

 - [gitee](https://gitee.com/honghuangdc/soybean-admin)

+## 更新日志
+[CHANGELOG](./CHANGELOG.md)
+
+## 后端服务
+
+- [soybean-admin-java(开发中)](https://github.com/honghuangdc/soybean-admin-java)
+
+- [soybean-admin-go(开发中)](https://github.com/honghuangdc/soybean-admin-go)
+
+- [soybean-admin-nestjs(开发中)](https://github.com/honghuangdc/soybean-admin-nestjs)
+
 ## 项目示例图

-![](https://s2.loli.net/2022/01/24/ovK6Oyqr7gIMu2n.png)
+![](https://s2.loli.net/2022/05/16/keOtgFH27r9nqYS.png)

-![](https://s2.loli.net/2022/01/24/O8loxYhMySHwGfJ.png)
+![](https://s2.loli.net/2022/05/18/bW7mftiQexkvSTG.png)

-![](https://s2.loli.net/2022/01/24/HKwpJ7Ab6j8fVvk.png)
+![](https://s2.loli.net/2022/05/16/uV5nzjb3gYptAEl.png)
+
+![](https://s2.loli.net/2022/05/16/rSnNHLdpuvkKxWq.png)
+
+![](https://s2.loli.net/2022/05/18/Mt6YZqmDxO8v4uR.png)
+
+![](https://s2.loli.net/2022/05/16/ktH5dcG3fuFOoKA.png)
+
+![](https://s2.loli.net/2022/05/16/VPl6Ru1iCAhLcS4.png)
+
+![](https://s2.loli.net/2022/05/16/bRlAKuHW7ZVh9DT.png)
+
+![](https://s2.loli.net/2022/06/07/rY8TyAftM5dxspv.png)
+
+![](https://s2.loli.net/2022/06/07/5GNBAd31IzQVjLP.png)
+
+![](https://s2.loli.net/2022/06/07/rRSG6mEZpujOACT.png)

-![](https://s2.loli.net/2022/01/24/bqJRSDZHBv3jsif.png)

-![](https://s2.loli.net/2022/01/24/wXpHeau6UrSTWdF.png)

-![](https://s2.loli.net/2022/02/16/pBwF2gaxXnKZe3D.png)

-![](https://s2.loli.net/2022/02/16/pfuxVEPsTJIXw5n.png)

 ## 开发计划

- [x] 添加前端静态路由
- [ ] 集成unocss替换windicss(新分支unocss)
- [ ] 用户角色切换示例、按钮级别权限指令
- [ ] 最近功能的有关文档更新
- [ ] 引入ECharts替换AntV G2Plot
- [ ] 性能优化(优化递归函数)
- [ ] 精简版(新分支thin)
- [ ] 表单、表格示例
+- [x] 引入ECharts替换AntV G2Plot
+- [x] 图表示例：ECharts、AntV G2
+- [x] 多页签：支持query、hash等参数，同一页面支持多个Tab
+- [ ] 缓存主题配置
 - [ ] 添加锁屏组件、全局Iframe组件
 - [ ] 示例页面完善
- [ ] 其他UI版本
+- [ ] 表单、表格示例
+- [ ] 性能优化(优化递归函数)
+- [ ] 精简版(新分支thin)
+- [ ] 文档完善
+- [ ] i18n国际化
 - [ ] element-plus版本
+- [ ] 其他UI版本
 - [ ] soybean-admin cli工具(选择不同UI)
- [ ] 前端可视化创建路由页面
 - [ ] soybean-admin 后台服务java版: [soybean-admin-java](https://github.com/honghuangdc/soybean-admin-java)
 - [ ] soybean-admin 后台服务go版: [soybean-admin-go](https://github.com/honghuangdc/soybean-admin-go)
 - [ ] soybean-admin 后台服务nodejs版: [soybean-admin-nestjs](https://github.com/honghuangdc/soybean-admin-nestjs)
+- [ ] 前端可视化创建路由页面

 ## 安装使用

@@ -94,11 +118,8 @@ pnpm dev
 pnpm build
 ```

-::: warning 注意
-
 **本地环境需要安装 pnpm 6.x 、Node.js 14.x 和 Git**

-:::

 ## 如何贡献

@@ -128,14 +149,19 @@ pnpm i -g commitizen

 [@Soybean](https://github.com/honghuangdc)

+## 捐赠
+如果你觉得这个项目对你有帮助，可以请Soybean喝杯饮料表示支持，Soybean开源的动力离不开各位的支持和鼓励。
+![赞助](https://s2.loli.net/2022/01/24/i9cpq7lTCrKUoFf.png)
+
 ## 交流

 `Soybean Admin` 是完全开源免费的项目，在帮助开发者更方便地进行中大型管理系统开发，同时也提供微信和QQ交流群，使用问题欢迎在群内提问。

- 本人微信号：honghuangdc，欢迎来技术交流，业务咨询。
+- 微信交流群（添加本人微信拉进群），欢迎来技术交流，业务咨询。

- 微信交流群：
-  **微信群的人数已经满200个了，无法扫码，可以添加本人的微信再邀请进入**
+  <div style="text-align:left">
+    <img src="https://s2.loli.net/2022/05/16/3YGBgXnVPJdslk8.jpg" style="width:200px" />
+  </div>

 - QQ交流群 `711301266`

--- a/build/config/index.ts
+++ b/build/config/index.ts
@@ -1,3 +1,2 @@
-export * from './path';
 export * from './define';
 export * from './proxy';
--- a/build/config/path.ts
+++ b/build/config/path.ts
@@ -1,15 +0,0 @@
-import { fileURLToPath } from 'url';
-
-/**
- * 解析路径
- * @param basePath - 基础路径
- */
-export function resolvePath(rootPath: string, basePath: string) {
-  const root = fileURLToPath(new URL(rootPath, basePath));
-  const src = `${root}src`;
-
-  return {
-    root,
-    src
-  };
-}
--- a/build/config/proxy.ts
+++ b/build/config/proxy.ts
@@ -1,21 +1,18 @@
 import type { ProxyOptions } from 'vite';
-import { getEnvConfig } from '../../.env-config';

 /**
 * 设置网络代理
- * @param viteEnv - vite环境描述
+ * @param isOpenProxy - 是否开启代理
+ * @param envConfig - env环境配置
 */
-export function createViteProxy(viteEnv: ImportMetaEnv) {
-  const isOpenProxy = viteEnv.VITE_HTTP_PROXY === 'true';
+export function createViteProxy(isOpenProxy: boolean, envConfig: EnvConfig) {
  if (!isOpenProxy) return undefined;

-  const { http } = getEnvConfig(viteEnv);
-
  const proxy: Record<string, string | ProxyOptions> = {
-    [http.proxy]: {
-      target: http.url,
+    [envConfig.proxy]: {
+      target: envConfig.url,
      changeOrigin: true,
-      rewrite: path => path.replace(new RegExp(`^${http.proxy}`), '')
+      rewrite: path => path.replace(new RegExp(`^${envConfig.proxy}`), '')
    }
  };

--- a/build/index.ts
+++ b/build/index.ts
@@ -1,2 +1,3 @@
 export * from './plugins';
 export * from './config';
+export * from './utils';
--- a/build/plugins/auto-import.ts
+++ b/build/plugins/auto-import.ts
@@ -1,22 +0,0 @@
-import Icons from 'unplugin-icons/vite';
-import IconsResolver from 'unplugin-icons/resolver';
-import Components from 'unplugin-vue-components/vite';
-import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
-import { FileSystemIconLoader } from 'unplugin-icons/loaders';
-
-export default (srcPath: string) => {
-  return [
-    Icons({
-      compiler: 'vue3',
-      customCollections: {
-        custom: FileSystemIconLoader(`${srcPath}/assets/svg`)
-      },
-      scale: 1,
-      defaultClass: 'inline-block'
-    }),
-    Components({
-      dts: true,
-      resolvers: [NaiveUiResolver(), IconsResolver({ customCollections: ['custom'], componentPrefix: 'icon' })]
-    })
-  ];
-};
--- a/build/plugins/compress.ts
+++ b/build/plugins/compress.ts
@@ -0,0 +1,6 @@
+import ViteCompression from 'vite-plugin-compression';
+
+export default (viteEnv: ImportMetaEnv) => {
+  const { VITE_COMPRESS_TYPE = 'gzip' } = viteEnv;
+  return ViteCompression({ algorithm: VITE_COMPRESS_TYPE });
+};
--- a/build/plugins/html.ts
+++ b/build/plugins/html.ts
@@ -1,10 +1,7 @@
-import { loadEnv } from 'vite';
-import type { ConfigEnv, PluginOption } from 'vite';
+import type { PluginOption } from 'vite';
 import { createHtmlPlugin } from 'vite-plugin-html';

-export default (config: ConfigEnv): PluginOption[] => {
-  const viteEnv = loadEnv(config.mode, process.cwd());
-
+export default (viteEnv: ImportMetaEnv): PluginOption[] => {
  return createHtmlPlugin({
    minify: true,
    inject: {
--- a/build/plugins/index.ts
+++ b/build/plugins/index.ts
@@ -1,27 +1,25 @@
-import type { ConfigEnv, PluginOption } from 'vite';
+import type { PluginOption } from 'vite';
 import vue from './vue';
 import html from './html';
-import autoImport from './auto-import';
-import windicss from './windicss';
+import unplugin from './unplugin';
+import unocss from './unocss';
 import mock from './mock';
 import visualizer from './visualizer';
+import compress from './compress';

 /**
- *	vite插件
- * @param configEnv - 环境
- * @param srcPath - src路径
+ * vite插件
 * @param viteEnv - 环境变量配置
 */
-export function setupVitePlugins(
-  configEnv: ConfigEnv,
-  srcPath: string,
-  viteEnv: ImportMetaEnv
-): (PluginOption | PluginOption[])[] {
-  const plugins = [vue, html(configEnv), ...autoImport(srcPath), windicss, mock];
+export function setupVitePlugins(viteEnv: ImportMetaEnv): (PluginOption | PluginOption[])[] {
+  const plugins = [...vue, html(viteEnv), ...unplugin, unocss, mock];

-  if (configEnv.command === 'build' && viteEnv.VITE_VISUALIZER === 'true') {
+  if (viteEnv.VITE_VISUALIZER === 'true') {
    plugins.push(visualizer);
  }
+  if (viteEnv.VITE_COMPRESS === 'true') {
+    plugins.push(compress(viteEnv));
+  }

  return plugins;
 }
--- a/build/plugins/unocss.ts
+++ b/build/plugins/unocss.ts
@@ -0,0 +1,3 @@
+import unocss from 'unocss/vite';
+
+export default unocss();
--- a/build/plugins/unplugin.ts
+++ b/build/plugins/unplugin.ts
@@ -0,0 +1,35 @@
+import DefineOptions from 'unplugin-vue-define-options/vite';
+import Icons from 'unplugin-icons/vite';
+import IconsResolver from 'unplugin-icons/resolver';
+import Components from 'unplugin-vue-components/vite';
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
+import { FileSystemIconLoader } from 'unplugin-icons/loaders';
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
+import { getSrcPath } from '../utils';
+
+const srcPath = getSrcPath();
+
+const customIconPath = `${srcPath}/assets/svg`;
+
+export default [
+  DefineOptions(),
+  Icons({
+    compiler: 'vue3',
+    customCollections: {
+      custom: FileSystemIconLoader(customIconPath)
+    },
+    scale: 1,
+    defaultClass: 'inline-block'
+  }),
+  Components({
+    dts: 'src/typings/components.d.ts',
+    types: [{ from: 'vue-router', names: ['RouterLink', 'RouterView'] }],
+    resolvers: [NaiveUiResolver(), IconsResolver({ customCollections: ['custom'], componentPrefix: 'icon' })]
+  }),
+  createSvgIconsPlugin({
+    iconDirs: [customIconPath],
+    symbolId: 'icon-custom-[dir]-[name]',
+    inject: 'body-last',
+    customDomId: '__CUSTOM_SVG_ICON__'
+  })
+];
--- a/build/plugins/visualizer.ts
+++ b/build/plugins/visualizer.ts
@@ -2,5 +2,6 @@ import { visualizer } from 'rollup-plugin-visualizer';

 export default visualizer({
  gzipSize: true,
-  brotliSize: true
+  brotliSize: true,
+  open: true
 });
--- a/build/plugins/vue.ts
+++ b/build/plugins/vue.ts
@@ -1,3 +1,6 @@
 import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';

-export default vue({});
+const plugins = [vue(), vueJsx()];
+
+export default plugins;
--- a/build/plugins/windicss.ts
+++ b/build/plugins/windicss.ts
@@ -1,3 +0,0 @@
-import windiCSS from 'vite-plugin-windicss';
-
-export default windiCSS();
--- a/build/utils/index.ts
+++ b/build/utils/index.ts
@@ -0,0 +1,20 @@
+import path from 'path';
+
+/**
+ * 获取项目根路径
+ * @descrition 结尾不带斜杠
+ */
+export function getRootPath() {
+  return path.resolve(process.cwd());
+}
+
+/**
+ * 获取项目src路径
+ * @param srcName - src目录名称(默认: "src")
+ * @descrition 结尾不带斜杠
+ */
+export function getSrcPath(srcName = 'src') {
+  const rootPath = getRootPath();
+
+  return `${rootPath}/${srcName}`;
+}
--- a/components.d.ts
+++ b/components.d.ts
@@ -1,100 +0,0 @@
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
-// Read more: https://github.com/vuejs/vue-next/pull/3399
-
-declare module 'vue' {
-  export interface GlobalComponents {
-    BetterScroll: typeof import('./src/components/custom/BetterScroll.vue')['default']
-    CountTo: typeof import('./src/components/custom/CountTo.vue')['default']
-    DarkModeContainer: typeof import('./src/components/common/DarkModeContainer.vue')['default']
-    DarkModeSwitch: typeof import('./src/components/common/DarkModeSwitch.vue')['default']
-    GithubLink: typeof import('./src/components/custom/GithubLink.vue')['default']
-    HoverContainer: typeof import('./src/components/common/HoverContainer.vue')['default']
-    IconAntDesignCloseOutlined: typeof import('~icons/ant-design/close-outlined')['default']
-    IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']
-    IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']
-    IconCustomActivity: typeof import('~icons/custom/activity')['default']
-    IconCustomAvatar: typeof import('~icons/custom/avatar')['default']
-    IconCustomBanner: typeof import('~icons/custom/banner')['default']
-    IconCustomCast: typeof import('~icons/custom/cast')['default']
-    IconCustomEmptyData: typeof import('~icons/custom/empty-data')['default']
-    IconCustomLogo: typeof import('~icons/custom/logo')['default']
-    IconCustomLogoFill: typeof import('~icons/custom/logo-fill')['default']
-    IconCustomNetworkError: typeof import('~icons/custom/network-error')['default']
-    IconCustomNoPermission: typeof import('~icons/custom/no-permission')['default']
-    IconCustomNotFound: typeof import('~icons/custom/not-found')['default']
-    IconCustomServiceError: typeof import('~icons/custom/service-error')['default']
-    IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
-    IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
-    IconIcOutlineCheck: typeof import('~icons/ic/outline-check')['default']
-    IconLineMdMenuFoldLeft: typeof import('~icons/line-md/menu-fold-left')['default']
-    IconLineMdMenuUnfoldLeft: typeof import('~icons/line-md/menu-unfold-left')['default']
-    IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
-    IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
-    IconMdiClose: typeof import('~icons/mdi/close')['default']
-    IconMdiGithub: typeof import('~icons/mdi/github')['default']
-    IconMdiMoonWaningCrescent: typeof import('~icons/mdi/moon-waning-crescent')['default']
-    IconMdiPin: typeof import('~icons/mdi/pin')['default']
-    IconMdiPinOff: typeof import('~icons/mdi/pin-off')['default']
-    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
-    IconMdiWechat: typeof import('~icons/mdi/wechat')['default']
-    IconMdiWhiteBalanceSunny: typeof import('~icons/mdi/white-balance-sunny')['default']
-    IconPhCaretDoubleLeftBold: typeof import('~icons/ph/caret-double-left-bold')['default']
-    IconPhCaretDoubleRightBold: typeof import('~icons/ph/caret-double-right-bold')['default']
-    IconSelect: typeof import('./src/components/custom/IconSelect.vue')['default']
-    IconUilSearch: typeof import('~icons/uil/search')['default']
-    ImageVerify: typeof import('./src/components/custom/ImageVerify.vue')['default']
-    LoadingEmptyWrapper: typeof import('./src/components/business/LoadingEmptyWrapper.vue')['default']
-    LoginAgreement: typeof import('./src/components/business/LoginAgreement.vue')['default']
-    NaiveProvider: typeof import('./src/components/common/NaiveProvider.vue')['default']
-    NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
-    NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
-    NButton: typeof import('naive-ui')['NButton']
-    NCard: typeof import('naive-ui')['NCard']
-    NCheckbox: typeof import('naive-ui')['NCheckbox']
-    NColorPicker: typeof import('naive-ui')['NColorPicker']
-    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
-    NDataTable: typeof import('naive-ui')['NDataTable']
-    NDescriptions: typeof import('naive-ui')['NDescriptions']
-    NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
-    NDialogProvider: typeof import('naive-ui')['NDialogProvider']
-    NDivider: typeof import('naive-ui')['NDivider']
-    NDrawer: typeof import('naive-ui')['NDrawer']
-    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
-    NDropdown: typeof import('naive-ui')['NDropdown']
-    NEmpty: typeof import('naive-ui')['NEmpty']
-    NForm: typeof import('naive-ui')['NForm']
-    NFormItem: typeof import('naive-ui')['NFormItem']
-    NGradientText: typeof import('naive-ui')['NGradientText']
-    NGrid: typeof import('naive-ui')['NGrid']
-    NGridItem: typeof import('naive-ui')['NGridItem']
-    NInput: typeof import('naive-ui')['NInput']
-    NInputGroup: typeof import('naive-ui')['NInputGroup']
-    NInputNumber: typeof import('naive-ui')['NInputNumber']
-    NList: typeof import('naive-ui')['NList']
-    NListItem: typeof import('naive-ui')['NListItem']
-    NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
-    NMenu: typeof import('naive-ui')['NMenu']
-    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
-    NModal: typeof import('naive-ui')['NModal']
-    NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
-    NPopover: typeof import('naive-ui')['NPopover']
-    NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NSelect: typeof import('naive-ui')['NSelect']
-    NSpace: typeof import('naive-ui')['NSpace']
-    NSpin: typeof import('naive-ui')['NSpin']
-    NStatistic: typeof import('naive-ui')['NStatistic']
-    NSwitch: typeof import('naive-ui')['NSwitch']
-    NTabPane: typeof import('naive-ui')['NTabPane']
-    NTabs: typeof import('naive-ui')['NTabs']
-    NTag: typeof import('naive-ui')['NTag']
-    NThing: typeof import('naive-ui')['NThing']
-    NTimeline: typeof import('naive-ui')['NTimeline']
-    NTimelineItem: typeof import('naive-ui')['NTimelineItem']
-    NTooltip: typeof import('naive-ui')['NTooltip']
-    SystemLogo: typeof import('./src/components/common/SystemLogo.vue')['default']
-    WebSiteLink: typeof import('./src/components/custom/WebSiteLink.vue')['default']
-  }
-}
-
-export { }
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
            <div class="right-0 bottom-0 loading-spin-item loading-delay-1500"></div>
          </div>
        </div>
-        <h2 class="loading-title"><%= appTitle %></h2>
+        <div class="loading-title"><%= appTitle %></div>
      </div>
      <script src="/resource/loading.js"></script>
    </div>
--- a/mock/api/auth.ts
+++ b/mock/api/auth.ts
@@ -1,9 +1,10 @@
 import type { MockMethod } from 'vite-plugin-mock';
+import { userModel } from '../model';

-const token: ApiAuth.Token = {
-  token: '__TEMP_TOKEN__',
-  refreshToken: '__TEMP_REFRESH_TOKEN__'
-};
+/** 参数错误的状态码 */
+const ERROR_PARAM_CODE = 10000;
+
+const ERROR_PARAM_MSG = '参数校验失败！';

 const apis: MockMethod[] = [
  // 获取验证码
@@ -18,73 +19,107 @@ const apis: MockMethod[] = [
      };
    }
  },
-  // 密码登录
+  // 用户+密码 登录
  {
-    url: '/mock/loginByPwd',
+    url: '/mock/login',
    method: 'post',
-    response: (): Service.MockServiceResult<ApiAuth.Token> => {
-      return {
-        code: 200,
-        message: 'ok',
-        data: token
-      };
-    }
-  },
-  // 验证码登录
-  {
-    url: '/mock/loginByCode',
-    method: 'post',
-    response: (): Service.MockServiceResult<ApiAuth.Token> => {
-      return {
-        code: 200,
-        message: 'ok',
-        data: token
-      };
-    }
-  },
-  // 获取用户信息(请求头携带token)
-  {
-    url: '/mock/getUserInfo',
-    method: 'get',
-    response: (): Service.MockServiceResult<ApiAuth.UserInfo> => {
-      return {
-        code: 200,
-        message: 'ok',
-        data: {
-          userId: '0',
-          userName: 'Soybean',
-          userPhone: '15170283876',
-          userRole: 'super'
-        }
-      };
-    }
-  },
-  {
-    url: '/mock/testToken',
-    method: 'post',
-    response: (option: any): Service.MockServiceResult<true | null> => {
-      if (option.headers?.authorization !== token.token) {
+    response: (options: Service.MockOption): Service.MockServiceResult<ApiAuth.Token | null> => {
+      const { userName = undefined, password = undefined } = options.body;
+
+      if (!userName || !password) {
        return {
-          code: 66666,
-          message: 'token 失效',
+          code: ERROR_PARAM_CODE,
+          message: ERROR_PARAM_MSG,
          data: null
        };
      }
+
+      const findItem = userModel.find(item => item.userName === userName && item.password === password);
+
+      if (findItem) {
+        return {
+          code: 200,
+          message: 'ok',
+          data: {
+            token: findItem.token,
+            refreshToken: findItem.refreshToken
+          }
+        };
+      }
      return {
-        code: 200,
-        message: 'ok',
-        data: true
+        code: 1000,
+        message: '用户名或密码错误！',
+        data: null
+      };
+    }
+  },
+  // 获取用户信息(请求头携带token, 根据token获取用户信息)
+  {
+    url: '/mock/getUserInfo',
+    method: 'get',
+    response: (options: Service.MockOption): Service.MockServiceResult<ApiAuth.UserInfo | null> => {
+      // 这里的mock插件得到的字段是authorization, 前端传递的是Authorization字段
+      const { authorization = '' } = options.headers;
+      const REFRESH_TOKEN_CODE = 66666;
+
+      if (!authorization) {
+        return {
+          code: REFRESH_TOKEN_CODE,
+          message: '用户已失效或不存在！',
+          data: null
+        };
+      }
+      const userInfo: Auth.UserInfo = {
+        userId: '',
+        userName: '',
+        userRole: 'user'
+      };
+      const isInUser = userModel.some(item => {
+        const flag = item.token === authorization;
+        if (flag) {
+          const { userId: itemUserId, userName, userRole } = item;
+          Object.assign(userInfo, { userId: itemUserId, userName, userRole });
+        }
+        return flag;
+      });
+
+      if (isInUser) {
+        return {
+          code: 200,
+          message: 'ok',
+          data: userInfo
+        };
+      }
+
+      return {
+        code: REFRESH_TOKEN_CODE,
+        message: '用户信息异常！',
+        data: null
      };
    }
  },
  {
    url: '/mock/updateToken',
    method: 'post',
-    response: (): Service.MockServiceResult<ApiAuth.Token> => {
+    response: (options: Service.MockOption): Service.MockServiceResult<ApiAuth.Token | null> => {
+      const { refreshToken = '' } = options.body;
+
+      const findItem = userModel.find(item => item.refreshToken === refreshToken);
+
+      if (findItem) {
+        return {
+          code: 200,
+          message: 'ok',
+          data: {
+            token: findItem.token,
+            refreshToken: findItem.refreshToken
+          }
+        };
+      }
      return {
-        code: 200,
-        message: 'ok',
-        data: token
+        code: 3000,
+        message: '用户已失效或不存在！',
+        data: null
      };
    }
  }
--- a/mock/api/route.ts
+++ b/mock/api/route.ts
@@ -1,369 +1,26 @@
 import type { MockMethod } from 'vite-plugin-mock';
-
-const routes: AuthRoute.Route[] = [
-  {
-    name: 'dashboard',
-    path: '/dashboard',
-    component: 'basic',
-    children: [
-      {
-        name: 'dashboard_analysis',
-        path: '/dashboard/analysis',
-        component: 'self',
-        meta: {
-          title: '分析页',
-          requiresAuth: true,
-          icon: 'icon-park-outline:analysis'
-        }
-      },
-      {
-        name: 'dashboard_workbench',
-        path: '/dashboard/workbench',
-        component: 'self',
-        meta: {
-          title: '工作台',
-          requiresAuth: true,
-          permissions: ['super', 'admin'],
-          icon: 'icon-park-outline:workbench'
-        }
-      }
-    ],
-    meta: {
-      title: '仪表盘',
-      icon: 'carbon:dashboard',
-      order: 1
-    }
-  },
-  {
-    name: 'document',
-    path: '/document',
-    component: 'basic',
-    children: [
-      {
-        name: 'document_vue',
-        path: '/document/vue',
-        component: 'self',
-        meta: {
-          title: 'vue文档',
-          requiresAuth: true,
-          icon: 'mdi:vuejs'
-        }
-      },
-      {
-        name: 'document_vue-new',
-        path: '/document/vue-new',
-        component: 'self',
-        meta: {
-          title: 'vue文档(新版)',
-          requiresAuth: true,
-          icon: 'mdi:vuejs'
-        }
-      },
-      {
-        name: 'document_vite',
-        path: '/document/vite',
-        component: 'self',
-        meta: {
-          title: 'vite文档',
-          requiresAuth: true,
-          icon: 'simple-icons:vite'
-        }
-      },
-      {
-        name: 'document_project',
-        path: '/document/project',
-        meta: {
-          title: '项目文档(外链)',
-          requiresAuth: true,
-          icon: 'mdi:file-link-outline',
-          href: 'https://docs.soybean.pro/'
-        }
-      }
-    ],
-    meta: {
-      title: '文档',
-      icon: 'carbon:document',
-      order: 2
-    }
-  },
-  {
-    name: 'component',
-    path: '/component',
-    component: 'basic',
-    children: [
-      {
-        name: 'component_button',
-        path: '/component/button',
-        component: 'self',
-        meta: {
-          title: '按钮',
-          requiresAuth: true,
-          icon: 'ic:baseline-radio-button-checked'
-        }
-      },
-      {
-        name: 'component_card',
-        path: '/component/card',
-        component: 'self',
-        meta: {
-          title: '卡片',
-          requiresAuth: true,
-          icon: 'mdi:card-outline'
-        }
-      },
-      {
-        name: 'component_table',
-        path: '/component/table',
-        component: 'self',
-        meta: {
-          title: '表格',
-          requiresAuth: true,
-          icon: 'mdi:table-large'
-        }
-      }
-    ],
-    meta: {
-      title: '组件示例',
-      icon: 'fluent:app-store-24-regular',
-      order: 3
-    }
-  },
-  {
-    name: 'plugin',
-    path: '/plugin',
-    component: 'basic',
-    children: [
-      {
-        name: 'plugin_map',
-        path: '/plugin/map',
-        component: 'self',
-        meta: {
-          title: '地图',
-          requiresAuth: true,
-          icon: 'mdi:map'
-        }
-      },
-      {
-        name: 'plugin_video',
-        path: '/plugin/video',
-        component: 'self',
-        meta: {
-          title: '视频',
-          requiresAuth: true,
-          icon: 'mdi:video'
-        }
-      },
-      {
-        name: 'plugin_editor',
-        path: '/plugin/editor',
-        component: 'multi',
-        children: [
-          {
-            name: 'plugin_editor_quill',
-            path: '/plugin/editor/quill',
-            component: 'self',
-            meta: {
-              title: '富文本编辑器',
-              requiresAuth: true,
-              icon: 'mdi:file-document-edit-outline'
-            }
-          },
-          {
-            name: 'plugin_editor_markdown',
-            path: '/plugin/editor/markdown',
-            component: 'self',
-            meta: {
-              title: 'markdown编辑器',
-              requiresAuth: true,
-              icon: 'ri:markdown-line'
-            }
-          }
-        ],
-        meta: {
-          title: '编辑器',
-          icon: 'icon-park-outline:editor'
-        }
-      },
-      {
-        name: 'plugin_swiper',
-        path: '/plugin/swiper',
-        component: 'self',
-        meta: {
-          title: 'Swiper插件',
-          requiresAuth: true,
-          icon: 'simple-icons:swiper'
-        }
-      },
-      {
-        name: 'plugin_copy',
-        path: '/plugin/copy',
-        component: 'self',
-        meta: {
-          title: '剪贴板',
-          requiresAuth: true,
-          icon: 'mdi:clipboard-outline'
-        }
-      },
-      {
-        name: 'plugin_icon',
-        path: '/plugin/icon',
-        component: 'self',
-        meta: {
-          title: '图标',
-          requiresAuth: true,
-          icon: 'ic:baseline-insert-emoticon'
-        }
-      },
-      {
-        name: 'plugin_print',
-        path: '/plugin/print',
-        component: 'self',
-        meta: {
-          title: '打印',
-          requiresAuth: true,
-          icon: 'ic:baseline-local-printshop'
-        }
-      }
-    ],
-    meta: {
-      title: '插件示例',
-      icon: 'clarity:plugin-line',
-      order: 4
-    }
-  },
-  {
-    name: 'exception',
-    path: '/exception',
-    component: 'basic',
-    children: [
-      {
-        name: 'exception_403',
-        path: '/exception/403',
-        component: 'self',
-        meta: {
-          title: '异常页403',
-          requiresAuth: true,
-          icon: 'ic:baseline-block'
-        }
-      },
-      {
-        name: 'exception_404',
-        path: '/exception/404',
-        component: 'self',
-        meta: {
-          title: '异常页404',
-          requiresAuth: true,
-          icon: 'ic:baseline-web-asset-off'
-        }
-      },
-      {
-        name: 'exception_500',
-        path: '/exception/500',
-        component: 'self',
-        meta: {
-          title: '异常页500',
-          requiresAuth: true,
-          icon: 'ic:baseline-wifi-off'
-        }
-      }
-    ],
-    meta: {
-      title: '异常页',
-      icon: 'ant-design:exception-outlined',
-      order: 5
-    }
-  },
-  {
-    name: 'multi-menu',
-    path: '/multi-menu',
-    component: 'basic',
-    children: [
-      {
-        name: 'multi-menu_first',
-        path: '/multi-menu/first',
-        component: 'multi',
-        children: [
-          {
-            name: 'multi-menu_first_second',
-            path: '/multi-menu/first/second',
-            component: 'self',
-            meta: {
-              title: '二级菜单',
-              requiresAuth: true,
-              icon: 'ic:outline-menu'
-            }
-          },
-          {
-            name: 'multi-menu_first_second-new',
-            path: '/multi-menu/first/second-new',
-            component: 'multi',
-            children: [
-              {
-                name: 'multi-menu_first_second-new_third',
-                path: '/multi-menu/first/second-new/third',
-                component: 'self',
-                meta: {
-                  title: '三级菜单',
-                  requiresAuth: true,
-                  icon: 'ic:outline-menu'
-                }
-              }
-            ],
-            meta: {
-              title: '二级菜单(有子菜单)',
-              icon: 'ic:outline-menu'
-            }
-          }
-        ],
-        meta: {
-          title: '一级菜单',
-          icon: 'ic:outline-menu'
-        }
-      }
-    ],
-    meta: {
-      title: '多级菜单',
-      icon: 'carbon:menu',
-      order: 6
-    }
-  },
-  {
-    name: 'about',
-    path: '/about',
-    component: 'self',
-    meta: {
-      title: '关于',
-      requiresAuth: true,
-      singleLayout: 'basic',
-      permissions: ['super', 'admin', 'test'],
-      icon: 'fluent:book-information-24-regular',
-      order: 7
-    }
-  }
-];
-
-function dataMiddleware(data: AuthRoute.Route[]): ApiRoute.Route {
-  const routeHomeName: AuthRoute.RouteKey = 'dashboard_analysis';
-
-  function sortRoutes(sorts: AuthRoute.Route[]) {
-    return sorts.sort((next, pre) => Number(next.meta?.order) - Number(pre.meta?.order));
-  }
-
-  return {
-    routes: sortRoutes(data),
-    home: routeHomeName
-  };
-}
+import { userModel, routeModel } from '../model';

 const apis: MockMethod[] = [
  {
    url: '/mock/getUserRoutes',
    method: 'post',
-    response: (): Service.MockServiceResult => {
+    response: (options: Service.MockOption): Service.MockServiceResult => {
+      const { userId = undefined } = options.body;
+
+      const routeHomeName: AuthRoute.RouteKey = 'dashboard_analysis';
+
+      const role = userModel.find(item => item.userId === userId)?.userRole || 'user';
+
+      const filterRoutes = routeModel[role];
+
      return {
        code: 200,
        message: 'ok',
-        data: dataMiddleware(routes)
+        data: {
+          routes: filterRoutes,
+          home: routeHomeName
+        }
      };
    }
  }
--- a/mock/model/auth.ts
+++ b/mock/model/auth.ts
@@ -0,0 +1,40 @@
+interface UserModel extends Auth.UserInfo {
+  token: string;
+  refreshToken: string;
+  password: string;
+}
+
+export const userModel: UserModel[] = [
+  {
+    token: '__TOKEN_SOYBEAN__',
+    refreshToken: '__REFRESH_TOKEN_SOYBEAN__',
+    userId: '0',
+    userName: 'Soybean',
+    userRole: 'super',
+    password: 'soybean123'
+  },
+  {
+    token: '__TOKEN_SUPER__',
+    refreshToken: '__REFRESH_TOKEN_SUPER__',
+    userId: '1',
+    userName: 'Super',
+    userRole: 'super',
+    password: 'super123'
+  },
+  {
+    token: '__TOKEN_ADMIN__',
+    refreshToken: '__REFRESH_TOKEN_ADMIN__',
+    userId: '2',
+    userName: 'Admin',
+    userRole: 'admin',
+    password: 'admin123'
+  },
+  {
+    token: '__TOKEN_USER01__',
+    refreshToken: '__REFRESH_TOKEN_USER01__',
+    userId: '3',
+    userName: 'User01',
+    userRole: 'user',
+    password: 'user01123'
+  }
+];
--- a/mock/model/index.ts
+++ b/mock/model/index.ts
@@ -0,0 +1,2 @@
+export * from './auth';
+export * from './route';
--- a/mock/model/route.ts
+++ b/mock/model/route.ts
--- a/package.json
+++ b/package.json
@@ -1,6 +1,11 @@
 {
  "name": "soybean-admin",
-  "version": "0.9.3",
+  "version": "0.9.6",
+  "author": {
+    "name": "Soybean",
+    "email": "honghuangdc@gmail.com",
+    "url": "https://github.com/honghuangdc"
+  },
  "scripts": {
    "dev": "cross-env VITE_ENV_TYPE=dev vite",
    "dev:test": "cross-env VITE_ENV_TYPE=test vite",
@@ -9,7 +14,7 @@
    "build:dev": "npm run typecheck && cross-env VITE_ENV_TYPE=dev vite build",
    "build:test": "npm run typecheck && cross-env VITE_ENV_TYPE=test vite build",
    "build:vercel": "cross-env VITE_HASH_ROUTE=true vite build",
-    "preview": "vite preview --port 5050",
+    "preview": "vite preview",
    "typecheck": "vue-tsc --noEmit",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
    "prepare": "husky install",
@@ -26,75 +31,88 @@
    }
  },
  "dependencies": {
-    "@antv/g2plot": "^2.4.15",
+    "@antv/data-set": "^0.11.8",
+    "@antv/g2": "^4.2.3",
    "@better-scroll/core": "^2.4.2",
-    "@vueuse/core": "^8.3.1",
-    "axios": "^0.26.1",
-    "clipboard": "^2.0.10",
+    "@soybeanjs/vue-admin-layout": "^1.0.4",
+    "@soybeanjs/vue-admin-tab": "^1.0.2",
+    "@vueuse/core": "^8.6.0",
+    "axios": "^0.27.2",
+    "clipboard": "^2.0.11",
    "colord": "^2.9.2",
    "crypto-js": "^4.1.1",
-    "dayjs": "^1.11.1",
+    "dayjs": "^1.11.3",
+    "echarts": "^5.3.3",
    "form-data": "^4.0.0",
    "lodash-es": "^4.17.21",
-    "naive-ui": "^2.28.2",
-    "pinia": "^2.0.13",
+    "naive-ui": "^2.30.4",
+    "pinia": "^2.0.14",
    "print-js": "^1.6.0",
-    "qs": "^6.10.3",
-    "soybean-admin-layout": "^1.0.4",
-    "soybean-admin-tab": "^1.2.3",
-    "swiper": "^8.1.3",
+    "qs": "^6.10.5",
+    "swiper": "^8.2.4",
    "ua-parser-js": "^1.0.2",
-    "vditor": "^3.8.13",
-    "vue": "3.2.33",
-    "vue-router": "^4.0.14",
+    "vditor": "^3.8.15",
+    "vue": "3.2.37",
+    "vue-router": "^4.0.16",
    "wangeditor": "^4.7.15",
    "xgplayer": "^2.31.6"
  },
  "devDependencies": {
    "@amap/amap-jsapi-types": "^0.0.8",
-    "@commitlint/cli": "^16.2.3",
-    "@commitlint/config-conventional": "^16.2.1",
-    "@iconify/json": "^2.1.30",
+    "@commitlint/cli": "^17.0.2",
+    "@commitlint/config-conventional": "^17.0.2",
+    "@iconify/json": "^2.1.62",
    "@iconify/vue": "^3.2.1",
    "@types/bmapgl": "^0.0.5",
    "@types/crypto-js": "^4.1.1",
-    "@types/node": "^17.0.25",
+    "@types/node": "^17.0.44",
    "@types/qs": "^6.9.7",
    "@types/ua-parser-js": "^0.7.36",
-    "@typescript-eslint/eslint-plugin": "^5.20.0",
-    "@typescript-eslint/parser": "^5.20.0",
-    "@vitejs/plugin-vue": "^2.3.1",
+    "@typescript-eslint/eslint-plugin": "^5.28.0",
+    "@typescript-eslint/parser": "^5.28.0",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
    "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/eslint-config-typescript": "^10.0.0",
-    "@vue/tsconfig": "^0.1.3",
+    "@vue/eslint-config-typescript": "^11.0.0",
    "commitizen": "^4.2.4",
    "cross-env": "^7.0.3",
    "cz-conventional-changelog": "^3.3.0",
    "cz-customizable": "^6.3.0",
-    "eslint": "^8.13.0",
+    "eslint": "^8.17.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.6.0",
-    "husky": "^7.0.4",
-    "lint-staged": "^12.4.0",
+    "eslint-plugin-vue": "9.1.1",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.1",
    "mockjs": "^1.1.0",
    "patch-package": "^6.4.7",
    "postinstall-postinstall": "^2.1.0",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.0",
    "rollup-plugin-visualizer": "^5.6.0",
-    "sass": "^1.50.1",
-    "typescript": "^4.6.3",
-    "unplugin-icons": "^0.14.1",
-    "unplugin-vue-components": "0.18.5",
-    "vite": "^2.9.5",
+    "sass": "^1.52.3",
+    "standard-version": "^9.5.0",
+    "typescript": "^4.7.3",
+    "unocss": "^0.39.0",
+    "unplugin-icons": "^0.14.3",
+    "unplugin-vue-components": "0.19.6",
+    "unplugin-vue-define-options": "^0.6.1",
+    "vite": "^2.9.12",
+    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-html": "^3.2.0",
-    "vite-plugin-html-template": "^1.1.2",
    "vite-plugin-mock": "^2.9.6",
-    "vite-plugin-windicss": "^1.8.4",
-    "vue-tsc": "^0.34.9",
-    "vueuc": "^0.4.32",
-    "windicss": "^3.5.1"
-  }
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vue-eslint-parser": "^9.0.2",
+    "vue-tsc": "^0.37.8"
+  },
+  "homepage": "https://github.com/honghuangdc/soybean-admin",
+  "repository": {
+    "url": "https://github.com/honghuangdc/soybean-admin.git"
+  },
+  "bugs": {
+    "url": "https://github.com/honghuangdc/soybean-admin/issues"
+  },
+  "license": "MIT"
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,7 +13,6 @@
 </template>

 <script setup lang="ts">
-import { RouterView } from 'vue-router';
 import { zhCN, dateZhCN } from 'naive-ui';
 import { useThemeStore, subscribeStore } from '@/store';

@@ -21,4 +20,5 @@ const theme = useThemeStore();

 subscribeStore();
 </script>
+
 <style scoped></style>
--- a/src/assets/svg/custom-icon.svg
+++ b/src/assets/svg/custom-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M19 10c0 1.38-2.12 2.5-3.5 2.5s-2.75-1.12-2.75-2.5h-1.5c0 1.38-1.37 2.5-2.75 2.5S5 11.38 5 10h-.75c-.16.64-.25 1.31-.25 2a8 8 0 0 0 8 8a8 8 0 0 0 8-8c0-.69-.09-1.36-.25-2H19m-7-6C9.04 4 6.45 5.61 5.07 8h13.86C17.55 5.61 14.96 4 12 4m10 8a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2a10 10 0 0 1 10 10m-10 5.23c-1.75 0-3.29-.73-4.19-1.81L9.23 14c.45.72 1.52 1.23 2.77 1.23s2.32-.51 2.77-1.23l1.42 1.42c-.9 1.08-2.44 1.81-4.19 1.81Z"></path></svg>
--- a/src/components/business/LoadingEmptyWrapper.vue
+++ b/src/components/business/LoadingEmptyWrapper.vue
@@ -91,4 +91,5 @@ onUnmounted(() => {
  stopHandle();
 });
 </script>
+
 <style scoped></style>
--- a/src/components/business/LoginAgreement.vue
+++ b/src/components/business/LoginAgreement.vue
@@ -44,4 +44,5 @@ function handleClickPolicy() {
  emit('click-policy');
 }
 </script>
+
 <style scoped></style>
--- a/src/components/common/DarkModeContainer.vue
+++ b/src/components/common/DarkModeContainer.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="dark:(bg-[#18181c] text-white text-opacity-82) transition-all duration-300 ease-in-out"
+    class="dark:bg-[#18181c] dark:text-white dark:text-opacity-82 transition-all duration-300 ease-in-out"
    :class="inverted ? 'bg-[#001428] text-white' : 'bg-white text-[#333639]'"
  >
    <slot></slot>
@@ -15,4 +15,5 @@ withDefaults(defineProps<Props>(), {
  inverted: false
 });
 </script>
+
 <style scoped></style>
--- a/src/components/common/DarkModeSwitch.vue
+++ b/src/components/common/DarkModeSwitch.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-center text-18px hover:text-primary cursor-pointer" @click="handleSwitch">
+  <div class="flex-center text-18px cursor-pointer" @click="handleSwitch">
    <icon-mdi-moon-waning-crescent v-if="darkMode" />
    <icon-mdi-white-balance-sunny v-else />
  </div>
@@ -36,4 +36,5 @@ function handleSwitch() {
  darkMode.value = !darkMode.value;
 }
 </script>
+
 <style scoped></style>
--- a/src/views/system-view/components/ExceptionBase.vue
+++ b/src/views/system-view/components/ExceptionBase.vue
@@ -12,7 +12,6 @@
 </template>

 <script lang="ts" setup>
-import { RouterLink } from 'vue-router';
 import { routeName } from '@/router';

 type ExceptionType = '403' | '404' | '500';
@@ -26,4 +25,5 @@ defineProps<Props>();

 const routeHomePath = routeName('root');
 </script>
+
 <style scoped></style>
--- a/src/components/common/HoverContainer.vue
+++ b/src/components/common/HoverContainer.vue
@@ -2,36 +2,44 @@
  <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]" :class="contentClass">
+        <div class="flex-center h-full cursor-pointer dark:hover:bg-[#333]" :class="contentClassName">
          <slot></slot>
        </div>
      </template>
      {{ tooltipContent }}
    </n-tooltip>
  </div>
-  <div v-else class="flex-center cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]" :class="contentClass">
+  <div v-else class="flex-center cursor-pointer dark:hover:bg-[#333]" :class="contentClassName">
    <slot></slot>
  </div>
 </template>

 <script lang="ts" setup>
 import { computed } from 'vue';
-import type { FollowerPlacement } from 'vueuc';
+import type { PopoverPlacement } from 'naive-ui';

 interface Props {
  /** tooltip显示文本 */
  tooltipContent?: string;
  /** tooltip的位置 */
-  placement?: FollowerPlacement;
+  placement?: PopoverPlacement;
  /** class类 */
  contentClass?: string;
+  /** 反转模式下 */
+  inverted?: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
  tooltipContent: '',
  placement: 'bottom',
-  contentClass: ''
+  contentClass: '',
+  inverted: false
 });

 const showTooltip = computed(() => Boolean(props.tooltipContent));
+
+const contentClassName = computed(
+  () => `${props.contentClass} ${props.inverted ? 'hover:bg-primary' : 'hover:bg-[#f6f6f6]'}`
+);
 </script>
+
 <style scoped></style>
--- a/src/components/common/SystemLogo.vue
+++ b/src/components/common/SystemLogo.vue
@@ -13,4 +13,5 @@ withDefaults(defineProps<Props>(), {
  fill: false
 });
 </script>
+
 <style scoped></style>
--- a/src/components/custom/BetterScroll.vue
+++ b/src/components/custom/BetterScroll.vue
@@ -44,4 +44,5 @@ onMounted(() => {

 defineExpose({ instance });
 </script>
+
 <style scoped></style>
--- a/src/components/custom/CountTo.vue
+++ b/src/components/custom/CountTo.vue
@@ -106,3 +106,5 @@ onMounted(() => {
  }
 });
 </script>
+
+<style scoped></style>
--- a/src/components/custom/IconSelect.vue
+++ b/src/components/custom/IconSelect.vue
@@ -66,6 +66,7 @@ function handleChange(iconItem: string) {
  modelValue.value = iconItem;
 }
 </script>
+
 <style lang="scss" scoped>
 :deep(.n-input-wrapper) {
  padding-right: 0;
--- a/src/components/custom/ImageVerify.vue
+++ b/src/components/custom/ImageVerify.vue
@@ -36,4 +36,5 @@ watch(imgCode, newValue => {

 defineExpose({ getImgCode });
 </script>
+
 <style scoped></style>
--- a/src/components/custom/SvgIcon.vue
+++ b/src/components/custom/SvgIcon.vue
@@ -0,0 +1,24 @@
+<template>
+  <svg aria-hidden="true" width="1em" height="1em" class="inline-block">
+    <use :xlink:href="symbolId" fill="currentColor" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  /** 前缀 */
+  prefix?: string;
+  /** 图标名称(图片的文件名) */
+  icon: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  prefix: 'icon-custom'
+});
+
+const symbolId = computed(() => `#${props.prefix}-${props.icon}`);
+</script>
+
+<style scoped></style>
--- a/src/components/custom/WebSiteLink.vue
+++ b/src/components/custom/WebSiteLink.vue
@@ -17,4 +17,5 @@ interface Props {

 defineProps<Props>();
 </script>
+
 <style scoped></style>
--- a/src/composables/echarts.ts
+++ b/src/composables/echarts.ts
@@ -0,0 +1,163 @@
+import { ref, watch, nextTick, onUnmounted } from 'vue';
+import type { Ref, ComputedRef } from 'vue';
+import * as echarts from 'echarts/core';
+import { BarChart, LineChart, PieChart, ScatterChart, PictorialBarChart, RadarChart, GaugeChart } from 'echarts/charts';
+import type {
+  BarSeriesOption,
+  LineSeriesOption,
+  PieSeriesOption,
+  ScatterSeriesOption,
+  PictorialBarSeriesOption,
+  RadarSeriesOption,
+  GaugeSeriesOption
+} from 'echarts/charts';
+import {
+  TitleComponent,
+  LegendComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  ToolboxComponent
+} from 'echarts/components';
+import type {
+  TitleComponentOption,
+  LegendComponentOption,
+  TooltipComponentOption,
+  GridComponentOption,
+  ToolboxComponentOption,
+  DatasetComponentOption
+} from 'echarts/components';
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+import { useElementSize } from '@vueuse/core';
+import { useThemeStore } from '@/store';
+
+export type ECOption = echarts.ComposeOption<
+  | BarSeriesOption
+  | LineSeriesOption
+  | PieSeriesOption
+  | ScatterSeriesOption
+  | PictorialBarSeriesOption
+  | RadarSeriesOption
+  | GaugeSeriesOption
+  | TitleComponentOption
+  | LegendComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | ToolboxComponentOption
+  | DatasetComponentOption
+>;
+
+echarts.use([
+  TitleComponent,
+  LegendComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  ToolboxComponent,
+  BarChart,
+  LineChart,
+  PieChart,
+  ScatterChart,
+  PictorialBarChart,
+  RadarChart,
+  GaugeChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer
+]);
+
+/**
+ * Echarts hooks函数
+ * @param options - 图表配置
+ * @param renderFun - 图表渲染函数(例如：图表监听函数)
+ * @description 按需引入图表组件，没注册的组件需要先引入
+ */
+export function useEcharts(
+  options: Ref<ECOption> | ComputedRef<ECOption>,
+  renderFun?: (chartInstance: echarts.ECharts) => void
+) {
+  const theme = useThemeStore();
+
+  const domRef = ref<HTMLElement | null>(null);
+
+  const initialSize = { width: 0, height: 0 };
+  const { width, height } = useElementSize(domRef, initialSize);
+
+  let chart: echarts.ECharts | null = null;
+
+  function canRender() {
+    return initialSize.width > 0 && initialSize.height > 0;
+  }
+
+  function isRendered() {
+    return Boolean(domRef.value && chart);
+  }
+
+  function update(updateOptions: ECOption) {
+    if (isRendered()) {
+      chart!.setOption({ ...updateOptions, backgroundColor: 'transparent' });
+    }
+  }
+
+  async function render() {
+    if (domRef.value) {
+      const chartTheme = theme.darkMode ? 'dark' : 'light';
+      await nextTick();
+      chart = echarts.init(domRef.value, chartTheme);
+      if (renderFun) {
+        renderFun(chart);
+      }
+      update(options.value);
+    }
+  }
+
+  function resize() {
+    chart?.resize();
+  }
+
+  function destroy() {
+    chart?.dispose();
+  }
+
+  function updateTheme() {
+    destroy();
+    render();
+  }
+
+  const stopSizeWatch = watch([width, height], ([newWidth, newHeight]) => {
+    initialSize.width = newWidth;
+    initialSize.height = newHeight;
+    if (canRender()) {
+      if (!isRendered()) {
+        render();
+      } else {
+        resize();
+      }
+    }
+  });
+
+  const stopOptionWatch = watch(options, newValue => {
+    update(newValue);
+  });
+
+  const stopDarkModeWatch = watch(
+    () => theme.darkMode,
+    () => {
+      updateTheme();
+    }
+  );
+
+  onUnmounted(() => {
+    destroy();
+    stopSizeWatch();
+    stopOptionWatch();
+    stopDarkModeWatch();
+  });
+
+  return {
+    domRef
+  };
+}
--- a/src/composables/index.ts
+++ b/src/composables/index.ts
@@ -1,3 +1,4 @@
 export * from './system';
 export * from './router';
 export * from './layout';
+export * from './echarts';
--- a/src/composables/layout.ts
+++ b/src/composables/layout.ts
@@ -1,13 +1,13 @@
 import { computed } from 'vue';
 import { useAppStore, useThemeStore } from '@/store';

+type LayoutMode = 'vertical' | 'horizontal';
 type LayoutHeaderProps = Record<EnumType.ThemeLayoutMode, GlobalHeaderProps>;

 export function useBasicLayout() {
  const app = useAppStore();
  const theme = useThemeStore();

-  type LayoutMode = 'vertical' | 'horizontal';
  const mode = computed(() => {
    const vertical: LayoutMode = 'vertical';
    const horizontal: LayoutMode = 'horizontal';
--- a/src/composables/system.ts
+++ b/src/composables/system.ts
@@ -1,4 +1,6 @@
 import UAParser from 'ua-parser-js';
+import { useAuthStore } from '@/store';
+import { isArray, isString } from '@/utils';

 interface AppInfo {
  /** 项目名称 */
@@ -26,3 +28,27 @@ export function useDeviceInfo() {
  const result = parser.getResult();
  return result;
 }
+
+/** 权限判断 */
+export function usePermission() {
+  const auth = useAuthStore();
+
+  function hasPermission(permission: Auth.RoleType | Auth.RoleType[]) {
+    const { userRole } = auth.userInfo;
+
+    let has = userRole === 'super';
+    if (!has) {
+      if (isArray(permission)) {
+        has = (permission as Auth.RoleType[]).includes(userRole);
+      }
+      if (isString(permission)) {
+        has = (permission as Auth.RoleType) === userRole;
+      }
+    }
+    return has;
+  }
+
+  return {
+    hasPermission
+  };
+}
--- a/src/config/map-sdk.ts
+++ b/src/config/map-sdk.ts
@@ -1,6 +1,5 @@
 /** 百度地图sdk地址 */
-export const BAIDU_MAP_SDK_URL =
-  'https://api.map.baidu.com/getscript?v=3.0&ak=KSezYymXPth1DIGILRX3oYN9PxbOQQmU&services=&t=20210201100830&s=1';
+export const BAIDU_MAP_SDK_URL = `https://api.map.baidu.com/getscript?v=3.0&ak=KSezYymXPth1DIGILRX3oYN9PxbOQQmU&services=&t=20210201100830&s=1`;

 /** 高德地图sdk地址 */
 export const GAODE_MAP_SDK_URL = 'https://webapi.amap.com/maps?v=2.0&key=e7bd02bd504062087e6563daf4d6721d';
--- a/src/config/regexp.ts
+++ b/src/config/regexp.ts
@@ -5,9 +5,9 @@ export const REGEXP_PHONE =
 /** 邮箱正则 */
 export const REGEXP_EMAIL = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

-/** 密码正则(密码为8-18位数字/字符/符号的组合) */
+/** 密码正则(密码为6-18位数字/字符/符号的组合) */
 export const REGEXP_PWD =
-  /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/;
+  /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){6,18}$/;

 /** 6位数字验证码正则 */
 export const REGEXP_CODE_SIX = /^\d{6}$/;
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -1,9 +1,11 @@
 import type { App } from 'vue';
 import setupNetworkDirective from './network';
 import setupLoginDirective from './login';
+import setupPermissionDirective from './permission';

 /** setup custom vue directives. - [安装自定义的vue指令] */
 export function setupDirectives(app: App) {
  setupNetworkDirective(app);
  setupLoginDirective(app);
+  setupPermissionDirective(app);
 }
--- a/src/directives/permission.ts
+++ b/src/directives/permission.ts
@@ -1,16 +1,26 @@
 import type { App, Directive } from 'vue';
-import { useAuthStore } from '@/store';
+import { usePermission } from '@/composables';

-export default function setupLoginDirective(app: App) {
-  const auth = useAuthStore();
+export default function setupPermissionDirective(app: App) {
+  const { hasPermission } = usePermission();

-  const loginDirective: Directive<HTMLElement, Auth.RoleType | undefined> = {
-    mounted(el: HTMLElement, binding) {
-      if (binding.value !== auth.userInfo.userRole) {
-        el.remove();
-      }
+  function updateElVisible(el: HTMLElement, permission: Auth.RoleType | Auth.RoleType[]) {
+    if (!permission) {
+      throw new Error(`need roles: like v-permission="'admin'", v-permission="['admin', 'test]"`);
+    }
+    if (!hasPermission(permission)) {
+      el.parentElement?.removeChild(el);
+    }
+  }
+
+  const permissionDirective: Directive<HTMLElement, Auth.RoleType | Auth.RoleType[]> = {
+    mounted(el, binding) {
+      updateElVisible(el, binding.value);
+    },
+    beforeUpdate(el, binding) {
+      updateElVisible(el, binding.value);
    }
  };

-  app.directive('login', loginDirective);
+  app.directive('permission', permissionDirective);
 }
--- a/src/enum/business.ts
+++ b/src/enum/business.ts
@@ -1,3 +1,10 @@
+/** 用户角色 */
+export enum EnumUserRole {
+  super = '超级管理员',
+  admin = '管理员',
+  user = '普通用户'
+}
+
 /** 登录模块 */
 export enum EnumLoginModule {
  'pwd-login' = '账密登录',
--- a/src/enum/common.ts
+++ b/src/enum/common.ts
@@ -16,7 +16,7 @@ export enum EnumStorageKey {
  /** 用户信息 */
  'user-info' = '__USER_INFO__',
  /** 多页签路由信息 */
-  'tab-routes' = '__TAB_ROUTES__'
+  'multi-tab-routes' = '__MULTI_TAB_ROUTES__'
 }

 /** 数据类型 */
@@ -31,5 +31,6 @@ export enum EnumDataType {
  date = '[object Date]',
  regexp = '[object RegExp]',
  set = '[object Set]',
-  map = '[object Map]'
+  map = '[object Map]',
+  file = '[object File]'
 }
--- a/src/hooks/business/useImageVerify.ts
+++ b/src/hooks/business/useImageVerify.ts
@@ -52,6 +52,7 @@ function draw(dom: HTMLCanvasElement, width: number, height: number) {

  ctx.fillStyle = randomColor(180, 230);
  ctx.fillRect(0, 0, width, height);
+
  for (let i = 0; i < 4; i += 1) {
    const text = NUMBER_STRING[randomNum(0, NUMBER_STRING.length)];
    imgCode += text;
@@ -81,5 +82,6 @@ function draw(dom: HTMLCanvasElement, width: number, height: number) {
    ctx.fillStyle = randomColor(150, 200);
    ctx.fill();
  }
+
  return imgCode;
 }
--- a/src/hooks/business/useSmsCode.ts
+++ b/src/hooks/business/useSmsCode.ts
@@ -7,6 +7,7 @@ import useCountDown from './useCountDown';
 export default function useSmsCode() {
  const { loading, startLoading, endLoading } = useLoading();
  const { counts, start, isCounting } = useCountDown(60);
+
  const initLabel = '获取验证码';
  const countingLabel = (second: number) => `${second}秒后重新获取`;
  const label = computed(() => {
@@ -40,6 +41,7 @@ export default function useSmsCode() {
  async function getSmsCode(phone: string) {
    const valid = isPhoneValid(phone);
    if (!valid || loading.value) return;
+
    startLoading();
    const { data } = await fetchSmsCode(phone);
    if (data) {
--- a/src/hooks/common/index.ts
+++ b/src/hooks/common/index.ts
@@ -3,7 +3,5 @@ import useBoolean from './useBoolean';
 import useLoading from './useLoading';
 import useLoadingEmpty from './useLoadingEmpty';
 import useReload from './useReload';
-import useBodyScroll from './useBodyScroll';
-import useModalVisible from './useModalVisible';

-export { useContext, useBoolean, useLoading, useLoadingEmpty, useReload, useBodyScroll, useModalVisible };
+export { useContext, useBoolean, useLoading, useLoadingEmpty, useReload };
--- a/src/hooks/common/useBodyScroll.ts
+++ b/src/hooks/common/useBodyScroll.ts
@@ -1,47 +0,0 @@
-interface ScrollBodyStyle {
-  overflow: string;
-  paddingRight: string;
-}
-
-/**
- * body标签滚动
- * @param duration - 显示滚动条的延迟时间
- */
-export default function useBodyScroll(duration = 300) {
-  const defaultStyle: ScrollBodyStyle = {
-    overflow: '',
-    paddingRight: ''
-  };
-  function getInitBodyStyle() {
-    const { overflow, paddingRight } = document.body.style;
-    Object.assign(defaultStyle, { overflow, paddingRight });
-  }
-  function setScrollBodyStyle() {
-    document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`;
-    document.body.style.overflow = 'hidden';
-  }
-  function resetScrollBodyStyle() {
-    document.body.style.overflow = defaultStyle.overflow;
-    document.body.style.paddingRight = defaultStyle.paddingRight;
-  }
-
-  /**
-   * 处理body的滚动条
-   * @param hideScroll - 禁止滚动
-   */
-  function scrollBodyHandler(hideScroll: boolean) {
-    if (hideScroll) {
-      setScrollBodyStyle();
-    } else {
-      setTimeout(() => {
-        resetScrollBodyStyle();
-      }, duration);
-    }
-  }
-
-  getInitBodyStyle();
-
-  return {
-    scrollBodyHandler
-  };
-}
--- a/src/hooks/common/useModalVisible.ts
+++ b/src/hooks/common/useModalVisible.ts
@@ -1,33 +0,0 @@
-import { watch, onUnmounted } from 'vue';
-import useBoolean from './useBoolean';
-import useBodyScroll from './useBodyScroll';
-
-/**
- * 使用弹窗
- * @param hideScroll - 关闭html滚动条
- */
-export default function useModalVisible(hideScroll = true) {
-  const { bool: visible, setTrue: openModal, setFalse: closeModal, toggle: toggleModal } = useBoolean();
-  const { scrollBodyHandler } = useBodyScroll();
-
-  function modalVisibleWatcher() {
-    const stopHandle = watch(visible, async newValue => {
-      scrollBodyHandler(newValue);
-    });
-
-    onUnmounted(() => {
-      stopHandle();
-    });
-  }
-
-  if (hideScroll) {
-    modalVisibleWatcher();
-  }
-
-  return {
-    visible,
-    openModal,
-    closeModal,
-    toggleModal
-  };
-}
--- a/src/hooks/common/useReload.ts
+++ b/src/hooks/common/useReload.ts
@@ -13,9 +13,12 @@ export default function useReload() {
  async function handleReload(duration = 0) {
    setFalse();
    await nextTick();
-    setTimeout(() => {
-      setTrue();
-    }, duration);
+
+    if (duration > 0) {
+      setTimeout(() => {
+        setTrue();
+      }, duration);
+    }
  }

  return {
--- a/src/layouts/BasicLayout/index.vue
+++ b/src/layouts/BasicLayout/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <soybean-admin-layout
+  <admin-layout
    :mode="mode"
    :min-width="theme.layout.minWidth"
    :fixed-header-and-tab="theme.fixedHeaderAndTab"
@@ -10,6 +10,7 @@
    :sider-width="siderWidth"
    :sider-collapsed-width="siderCollapsedWidth"
    :sider-collapse="app.siderCollapse"
+    :add-main-overflow-hidden="addMainOverflowHidden"
    :fixed-footer="theme.footer.fixed"
  >
    <template #header>
@@ -21,23 +22,27 @@
    <template #sider>
      <global-sider />
    </template>
-    <global-content />
+    <global-content @hide-main-overflow="setAddMainOverflowHidden" />
    <template #footer>
      <global-footer />
    </template>
-  </soybean-admin-layout>
+  </admin-layout>
  <setting-drawer />
 </template>

 <script setup lang="ts">
-import SoybeanAdminLayout from 'soybean-admin-layout';
+import AdminLayout from '@soybeanjs/vue-admin-layout';
 import { useAppStore, useThemeStore } from '@/store';
 import { useBasicLayout } from '@/composables';
+import { useBoolean } from '@/hooks';
 import { SettingDrawer, GlobalHeader, GlobalTab, GlobalSider, GlobalContent, GlobalFooter } from '../common';

 const app = useAppStore();
 const theme = useThemeStore();

 const { mode, headerProps, siderVisible, siderWidth, siderCollapsedWidth } = useBasicLayout();
+
+const { bool: addMainOverflowHidden, setBool: setAddMainOverflowHidden } = useBoolean();
 </script>
+
 <style scoped></style>
--- a/src/layouts/BlankLayout/index.vue
+++ b/src/layouts/BlankLayout/index.vue
@@ -5,4 +5,5 @@
 <script setup lang="ts">
 import { GlobalContent } from '../common';
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/GlobalContent/index.vue
+++ b/src/layouts/common/GlobalContent/index.vue
@@ -4,9 +4,15 @@
    class="h-full bg-[#f6f9f8] dark:bg-[#101014] transition duration-300 ease-in-out"
  >
    <router-view v-slot="{ Component, route }">
-      <transition :name="theme.page.animate ? theme.page.animateMode : undefined" mode="out-in" appear>
+      <transition
+        :name="theme.pageAnimateMode"
+        mode="out-in"
+        :appear="true"
+        @before-leave="handleBeforeLeave"
+        @after-enter="handleAfterEnter"
+      >
        <keep-alive :include="routeStore.cacheRoutes">
-          <component :is="Component" v-if="app.reloadFlag" :key="route.path" />
+          <component :is="Component" v-if="app.reloadFlag" :key="route.fullPath" />
        </keep-alive>
      </transition>
    </router-view>
@@ -14,7 +20,6 @@
 </template>

 <script setup lang="ts">
-import { RouterView } from 'vue-router';
 import { useAppStore, useThemeStore, useRouteStore } from '@/store';

 interface Props {
@@ -22,12 +27,27 @@ interface Props {
  showPadding?: boolean;
 }

+interface Emits {
+  /** 禁止主体溢出 */
+  (e: 'hide-main-overflow', hidden: boolean): void;
+}
+
 withDefaults(defineProps<Props>(), {
  showPadding: true
 });

+const emit = defineEmits<Emits>();
+
 const app = useAppStore();
 const theme = useThemeStore();
 const routeStore = useRouteStore();
+
+function handleBeforeLeave() {
+  emit('hide-main-overflow', true);
+}
+function handleAfterEnter() {
+  emit('hide-main-overflow', false);
+}
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/GlobalFooter/index.vue
+++ b/src/layouts/common/GlobalFooter/index.vue
@@ -5,4 +5,5 @@
 </template>

 <script setup lang="ts"></script>
+
 <style scoped></style>
--- a/src/layouts/common/GlobalHeader/components/FullScreen.vue
+++ b/src/layouts/common/GlobalHeader/components/FullScreen.vue
@@ -1,5 +1,5 @@
 <template>
-  <hover-container class="w-40px h-full" tooltip-content="全屏" content-class="hover:text-primary" @click="toggle">
+  <hover-container class="w-40px h-full" tooltip-content="全屏" :inverted="theme.header.inverted" @click="toggle">
    <icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-18px" />
    <icon-gridicons-fullscreen v-else class="text-18px" />
  </hover-container>
@@ -7,7 +7,10 @@

 <script lang="ts" setup>
 import { useFullscreen } from '@vueuse/core';
+import { useThemeStore } from '@/store';

 const { isFullscreen, toggle } = useFullscreen();
+const theme = useThemeStore();
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/GlobalHeader/components/GithubSite.vue
+++ b/src/layouts/common/GlobalHeader/components/GithubSite.vue
@@ -1,10 +1,21 @@
 <template>
-  <hover-container tooltip-content="github" class="w-40px h-full" content-class="hover:text-primary">
-    <a href="https://github.com/honghuangdc/soybean-admin" target="_blank" class="flex-center">
-      <icon-mdi-github class="text-20px" />
-    </a>
+  <hover-container
+    tooltip-content="github"
+    class="w-40px h-full"
+    :inverted="theme.header.inverted"
+    @click="handleClickLink"
+  >
+    <icon-mdi-github class="text-20px" />
  </hover-container>
 </template>

-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { useThemeStore } from '@/store';
+
+const theme = useThemeStore();
+function handleClickLink() {
+  window.open('https://github.com/honghuangdc/soybean-admin', '_blank');
+}
+</script>
+
 <style scoped></style>
--- a/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue
+++ b/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue
@@ -17,8 +17,9 @@
            :is="breadcrumb.icon"
            v-if="theme.header.crumb.showIcon"
            class="inline-block align-text-bottom mr-4px text-16px"
+            :class="{ 'text-#BBBBBB': theme.header.inverted }"
          />
-          <span>{{ breadcrumb.label }}</span>
+          <span :class="{ 'text-#BBBBBB': theme.header.inverted }">{{ breadcrumb.label }}</span>
        </template>
      </n-breadcrumb-item>
    </template>
@@ -46,4 +47,5 @@ function dropdownSelect(key: string) {
  routerPush({ name: key });
 }
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/GlobalHeader/components/HeaderMenu.vue
+++ b/src/layouts/common/GlobalHeader/components/HeaderMenu.vue
@@ -1,11 +1,17 @@
 <template>
-  <n-menu
-    :value="activeKey"
-    mode="horizontal"
-    :options="menus"
-    :inverted="theme.header.inverted"
-    @update:value="handleUpdateMenu"
-  />
+  <div class="flex-1-hidden h-full px-10px">
+    <n-scrollbar :x-scrollable="true" class="flex-1-hidden h-full" content-class="h-full">
+      <div class="flex-y-center h-full" :style="{ justifyContent: theme.menu.horizontalPosition }">
+        <n-menu
+          :value="activeKey"
+          mode="horizontal"
+          :options="menus"
+          :inverted="theme.header.inverted"
+          @update:value="handleUpdateMenu"
+        />
+      </div>
+    </n-scrollbar>
+  </div>
 </template>

 <script setup lang="ts">
@@ -21,11 +27,16 @@ const theme = useThemeStore();
 const { routerPush } = useRouterPush();

 const menus = computed(() => routeStore.menus as GlobalMenuOption[]);
-const activeKey = computed(() => route.name as string);
+const activeKey = computed(() => (route.meta?.activeMenu ? route.meta.activeMenu : route.name) as string);

 function handleUpdateMenu(_key: string, item: MenuOption) {
  const menuItem = item as GlobalMenuOption;
  routerPush(menuItem.routePath);
 }
 </script>
-<style scoped></style>
+
+<style scoped>
+:deep(.n-menu-item-content-header) {
+  overflow: inherit !important;
+}
+</style>
--- a/src/layouts/common/GlobalHeader/components/MenuCollapse.vue
+++ b/src/layouts/common/GlobalHeader/components/MenuCollapse.vue
@@ -1,13 +1,15 @@
 <template>
-  <hover-container class="w-40px h-full" @click="app.toggleSiderCollapse">
+  <hover-container class="w-40px h-full" :inverted="theme.header.inverted" @click="app.toggleSiderCollapse">
    <icon-line-md-menu-unfold-left v-if="app.siderCollapse" class="text-16px" />
    <icon-line-md-menu-fold-left v-else class="text-16px" />
  </hover-container>
 </template>

 <script lang="ts" setup>
-import { useAppStore } from '@/store';
+import { useAppStore, useThemeStore } from '@/store';

 const app = useAppStore();
+const theme = useThemeStore();
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/GlobalHeader/components/ThemeMode.vue
+++ b/src/layouts/common/GlobalHeader/components/ThemeMode.vue
@@ -1,5 +1,5 @@
 <template>
-  <hover-container class="w-40px" content-class="hover:text-primary" tooltip-content="主题模式">
+  <hover-container class="w-40px" :inverted="theme.header.inverted" tooltip-content="主题模式">
    <dark-mode-switch :dark="theme.darkMode" class="wh-full" @update:dark="theme.setDarkMode" />
  </hover-container>
 </template>
@@ -9,4 +9,5 @@ import { useThemeStore } from '@/store';

 const theme = useThemeStore();
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/GlobalHeader/components/UserAvatar.vue
+++ b/src/layouts/common/GlobalHeader/components/UserAvatar.vue
@@ -1,6 +1,6 @@
 <template>
  <n-dropdown :options="options" @select="handleDropdown">
-    <hover-container class="px-12px" content-class="hover:text-primary">
+    <hover-container class="px-12px" :inverted="theme.header.inverted">
      <icon-custom-avatar class="text-32px" />
      <span class="pl-8px text-16px font-medium">{{ auth.userInfo.userName }}</span>
    </hover-container>
@@ -8,12 +8,13 @@
 </template>

 <script lang="ts" setup>
-import { useAuthStore } from '@/store';
+import { useAuthStore, useThemeStore } from '@/store';
 import { iconifyRender } from '@/utils';

 type DropdownKey = 'user-center' | 'logout';

 const auth = useAuthStore();
+const theme = useThemeStore();

 const options = [
  {
@@ -47,4 +48,5 @@ function handleDropdown(optionKey: string) {
  }
 }
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/GlobalHeader/index.vue
+++ b/src/layouts/common/GlobalHeader/index.vue
@@ -5,9 +5,7 @@
      <menu-collapse v-if="showMenuCollapse" />
      <global-breadcrumb v-if="theme.header.crumb.visible" />
    </div>
-    <div v-else class="flex-1-hidden flex-y-center h-full" :style="{ justifyContent: theme.menu.horizontalPosition }">
-      <header-menu />
-    </div>
+    <header-menu v-else />
    <div class="flex justify-end h-full">
      <global-search />
      <github-site />
@@ -45,6 +43,7 @@ defineProps<Props>();

 const theme = useThemeStore();
 </script>
+
 <style scoped>
 .global-header {
  box-shadow: 0 1px 2px rgb(0 21 41 / 8%);
--- a/src/layouts/common/GlobalLogo/index.vue
+++ b/src/layouts/common/GlobalLogo/index.vue
@@ -8,7 +8,6 @@
 </template>

 <script setup lang="ts">
-import { RouterLink } from 'vue-router';
 import { routePath } from '@/router';
 import { useAppInfo } from '@/composables';

@@ -22,4 +21,5 @@ defineProps<Props>();
 const { title } = useAppInfo();
 const routeHomePath = routePath('root');
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/GlobalSearch/components/SearchFooter.vue
+++ b/src/layouts/common/GlobalSearch/components/SearchFooter.vue
@@ -17,6 +17,7 @@
 </template>

 <script lang="ts" setup></script>
+
 <style lang="scss" scoped>
 .icon {
  box-shadow: inset 0 -2px #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px #1e235a66;
--- a/src/layouts/common/GlobalSearch/components/SearchModal.vue
+++ b/src/layouts/common/GlobalSearch/components/SearchModal.vue
@@ -134,4 +134,5 @@ onKeyStroke('Enter', handleEnter);
 onKeyStroke('ArrowUp', handleUp);
 onKeyStroke('ArrowDown', handleDown);
 </script>
+
 <style lang="scss" scoped></style>
--- a/src/layouts/common/GlobalSearch/components/SearchResult.vue
+++ b/src/layouts/common/GlobalSearch/components/SearchResult.vue
@@ -59,4 +59,5 @@ function handleTo() {
  emit('enter');
 }
 </script>
+
 <style lang="scss" scoped></style>
--- a/src/layouts/common/GlobalSearch/index.vue
+++ b/src/layouts/common/GlobalSearch/index.vue
@@ -3,7 +3,7 @@
    <hover-container
      class="w-40px h-full"
      tooltip-content="搜索"
-      content-class="hover:text-primary"
+      :inverted="theme.header.inverted"
      @click="handleSearch"
    >
      <icon-uil-search class="text-20px" />
@@ -13,13 +13,16 @@
 </template>

 <script lang="ts" setup>
+import { useThemeStore } from '@/store';
 import { useBoolean } from '@/hooks';
 import { SearchModal } from './components';

 const { bool: show, toggle } = useBoolean();
+const theme = useThemeStore();

 function handleSearch() {
  toggle();
 }
 </script>
+
 <style lang="scss" scoped></style>
--- a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuCollapse.vue
+++ b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuCollapse.vue
@@ -10,4 +10,5 @@ import { useAppStore } from '@/store';

 const app = useAppStore();
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDetail.vue
+++ b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDetail.vue
@@ -2,12 +2,12 @@
  <div class="mb-6px px-4px cursor-pointer" @mouseenter="setTrue" @mouseleave="setFalse">
    <div
      class="flex-center flex-col py-12px rounded-2px bg-transparent transition-colors duration-300 ease-in-out"
-      :class="{ 'text-primary !bg-primary-active': isActive, 'text-primary': isHover }"
+      :class="{ 'text-primary !bg-primary_active': isActive, 'text-primary': isHover }"
    >
      <component :is="icon" :class="[isMini ? 'text-16px' : 'text-20px']" />
      <p
-        class="pt-8px text-12px overflow-hidden transition-height duration-300 ease-in-out"
-        :class="[isMini ? 'h-0 pt-0' : 'h-20px pt-8px']"
+        class="text-12px overflow-hidden transition-height duration-300 ease-in-out"
+        :class="[isMini ? 'h-0 pt-0' : 'h-24px pt-4px']"
      >
        {{ label }}
      </p>
@@ -42,4 +42,5 @@ const { bool: isHover, setTrue, setFalse } = useBoolean();

 const isActive = computed(() => props.routeName === props.activeRouteName);
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue
+++ b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue
@@ -53,7 +53,7 @@ const { title } = useAppInfo();

 const showDrawer = computed(() => (props.visible && props.menus.length) || app.mixSiderFixed);

-const activeKey = computed(() => route.name as string);
+const activeKey = computed(() => (route.meta?.activeMenu ? route.meta.activeMenu : route.name) as string);
 const expandedKeys = ref<string[]>([]);

 function handleUpdateMenu(_key: string, item: MenuOption) {
@@ -73,6 +73,7 @@ watch(
  { immediate: true }
 );
 </script>
+
 <style scoped>
 .drawer-shadow {
  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
--- a/src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue
+++ b/src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue
@@ -58,7 +58,7 @@ const firstDegreeMenus = computed(() =>

 function getActiveParentRouteName() {
  firstDegreeMenus.value.some(item => {
-    const routeName = route.name as string;
+    const routeName = (route.meta?.activeMenu ? route.meta.activeMenu : route.name) as string;
    const flag = routeName?.includes(item.routeName);
    if (flag) {
      setActiveParentRouteName(item.routeName);
@@ -101,4 +101,5 @@ watch(
  { immediate: true }
 );
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue
+++ b/src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue
@@ -29,7 +29,7 @@ const theme = useThemeStore();
 const routeStore = useRouteStore();
 const { routerPush } = useRouterPush();

-const activeKey = computed(() => route.name as string);
+const activeKey = computed(() => (route.meta?.activeMenu ? route.meta.activeMenu : route.name) as string);
 const expandedKeys = ref<string[]>([]);

 function handleUpdateMenu(_key: string, item: MenuOption) {
@@ -49,4 +49,5 @@ watch(
  { immediate: true }
 );
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/GlobalSider/components/VerticalSider/index.vue
+++ b/src/layouts/common/GlobalSider/components/VerticalSider/index.vue
@@ -17,4 +17,5 @@ const theme = useThemeStore();
 const isHorizontalMix = computed(() => theme.layout.mode === 'horizontal-mix');
 const showTitle = computed(() => !app.siderCollapse && theme.layout.mode !== 'vertical-mix');
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/GlobalSider/index.vue
+++ b/src/layouts/common/GlobalSider/index.vue
@@ -12,6 +12,7 @@ const theme = useThemeStore();

 const isVerticalMix = computed(() => theme.layout.mode === 'vertical-mix');
 </script>
+
 <style scoped>
 .global-sider {
  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
--- a/src/layouts/common/GlobalTab/components/ReloadButton/index.vue
+++ b/src/layouts/common/GlobalTab/components/ReloadButton/index.vue
@@ -19,4 +19,5 @@ function handleRefresh() {
  }, 1000);
 }
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/GlobalTab/components/TabDetail/components/ContextMenu.vue
+++ b/src/layouts/common/GlobalTab/components/TabDetail/components/ContextMenu.vue
@@ -69,7 +69,7 @@ const options = computed<Option[]>(() => [
  {
    label: '关闭',
    key: 'close-current',
-    disabled: props.currentPath === tab.homeTab.path,
+    disabled: props.currentPath === tab.homeTab.fullPath,
    icon: iconifyRender('ant-design:close-outlined')
  },
  {
@@ -131,4 +131,5 @@ function handleDropdown(optionKey: string) {
  hide();
 }
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/GlobalTab/components/TabDetail/index.vue
+++ b/src/layouts/common/GlobalTab/components/TabDetail/index.vue
@@ -3,15 +3,15 @@
    <component
      :is="activeComponent"
      v-for="(item, index) in tab.tabs"
-      :key="item.path"
-      :is-active="tab.activeTab === item.path"
+      :key="item.fullPath"
+      :is-active="tab.activeTab === item.fullPath"
      :primary-color="theme.themeColor"
-      :closable="item.path !== tab.homeTab.path"
+      :closable="item.name !== tab.homeTab.name"
      :dark-mode="theme.darkMode"
      :class="{ '!mr-0': isChromeMode && index === tab.tabs.length - 1, 'mr-10px': !isChromeMode }"
-      @click="tab.handleClickTab(item.path)"
-      @close="tab.removeTab(item.path)"
-      @contextmenu="handleContextMenu($event, item.path)"
+      @click="tab.handleClickTab(item.fullPath)"
+      @close="tab.removeTab(item.fullPath)"
+      @contextmenu="handleContextMenu($event, item.fullPath)"
    >
      <Icon v-if="item.meta.icon" :icon="item.meta.icon" class="inline-block align-text-bottom mr-4px text-16px" />
      {{ item.meta.title }}
@@ -28,7 +28,7 @@
 <script setup lang="ts">
 import { ref, reactive, computed, nextTick, watch } from 'vue';
 import { useEventListener } from '@vueuse/core';
-import { ChromeTab, ButtonTab } from 'soybean-admin-tab';
+import { ChromeTab, ButtonTab } from '@soybeanjs/vue-admin-tab';
 import { Icon } from '@iconify/vue';
 import { useThemeStore, useTabStore } from '@/store';
 import { setTabRoutes } from '@/utils';
@@ -50,7 +50,7 @@ const activeComponent = computed(() => (isChromeMode.value ? ChromeTab : ButtonT
 const tabRef = ref<HTMLElement>();
 async function getActiveTabClientX() {
  await nextTick();
-  if (tabRef.value) {
+  if (tabRef.value && tabRef.value.children.length && tabRef.value.children[tab.activeTabIndex]) {
    const activeTabElement = tabRef.value.children[tab.activeTabIndex];
    const { x, width } = activeTabElement.getBoundingClientRect();
    const clientX = x + width / 2;
@@ -77,11 +77,11 @@ function setDropdown(x: number, y: number, currentPath: string) {
 }

 /** 点击右键菜单 */
-async function handleContextMenu(e: MouseEvent, path: string) {
+async function handleContextMenu(e: MouseEvent, fullPath: string) {
  e.preventDefault();
  const { clientX, clientY } = e;
  hideDropdown();
-  setDropdown(clientX, clientY, path);
+  setDropdown(clientX, clientY, fullPath);
  await nextTick();
  showDropdown();
 }
@@ -101,4 +101,5 @@ useEventListener(window, 'beforeunload', () => {
  setTabRoutes(tab.tabs);
 });
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/GlobalTab/index.vue
+++ b/src/layouts/common/GlobalTab/index.vue
@@ -45,16 +45,17 @@ function init() {
 }

 watch(
-  () => route.path,
+  () => route.fullPath,
  () => {
    tab.addTab(route);
-    tab.setActiveTab(route.path);
+    tab.setActiveTab(route.fullPath);
  }
 );

 // 初始化
 init();
 </script>
+
 <style scoped>
 .global-tab {
  box-shadow: 0 1px 2px rgb(0 21 41 / 8%);
--- a/src/layouts/common/SettingDrawer/components/DarkMode/index.vue
+++ b/src/layouts/common/SettingDrawer/components/DarkMode/index.vue
@@ -1,19 +1,32 @@
 <template>
-  <n-divider title-placement="center">深色主题</n-divider>
-  <div class="flex-center">
-    <n-switch :value="theme.darkMode" @update:value="theme.setDarkMode">
-      <template #checked>
-        <icon-mdi-white-balance-sunny class="text-14px text-primary" />
-      </template>
-      <template #unchecked>
-        <icon-mdi-moon-waning-crescent class="text-14px text-primary" />
-      </template>
-    </n-switch>
-  </div>
+  <n-divider title-placement="center">主题模式</n-divider>
+  <n-space vertical size="large">
+    <setting-menu label="深色主题">
+      <n-switch :value="theme.darkMode" @update:value="theme.setDarkMode">
+        <template #checked>
+          <icon-mdi-white-balance-sunny class="text-14px text-primary" />
+        </template>
+        <template #unchecked>
+          <icon-mdi-moon-waning-crescent class="text-14px text-primary" />
+        </template>
+      </n-switch>
+    </setting-menu>
+    <setting-menu label="跟随系统">
+      <n-switch :value="theme.followSystemTheme" @update:value="theme.setFollowSystemTheme">
+        <template #checked>
+          <icon-ic-baseline-do-not-disturb class="text-14px text-primary" />
+        </template>
+        <template #unchecked>
+          <icon-ic-round-hdr-auto class="text-14px text-primary" />
+        </template>
+      </n-switch>
+    </setting-menu>
+  </n-space>
 </template>

 <script lang="ts" setup>
 import { useThemeStore } from '@/store';
+import SettingMenu from '../SettingMenu/index.vue';

 const theme = useThemeStore();
 </script>
--- a/src/layouts/common/SettingDrawer/components/DrawerButton/index.vue
+++ b/src/layouts/common/SettingDrawer/components/DrawerButton/index.vue
@@ -15,4 +15,5 @@ import { useAppStore } from '@/store';

 const app = useAppStore();
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/SettingDrawer/components/LayoutMode/components/LayoutCheckbox.vue
+++ b/src/layouts/common/SettingDrawer/components/LayoutMode/components/LayoutCheckbox.vue
@@ -17,7 +17,7 @@

 <script setup lang="ts">
 import { computed } from 'vue';
-import type { FollowerPlacement } from 'vueuc';
+import type { PopoverPlacement } from 'naive-ui';
 import type { EnumThemeLayoutMode } from '@/enum';

 interface Props {
@@ -34,7 +34,7 @@ const props = defineProps<Props>();
 type LayoutConfig = Record<
  EnumType.ThemeLayoutMode,
  {
-    placement: FollowerPlacement;
+    placement: PopoverPlacement;
    menuClass: string;
    mainClass: string;
  }
@@ -65,6 +65,7 @@ const layoutConfig: LayoutConfig = {

 const activeConfig = computed(() => layoutConfig[props.mode]);
 </script>
+
 <style scoped>
 .layout-checkbox__shadow {
  box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.18);
--- a/src/layouts/common/SettingDrawer/components/LayoutMode/index.vue
+++ b/src/layouts/common/SettingDrawer/components/LayoutMode/index.vue
@@ -18,4 +18,5 @@ import { LayoutCheckbox } from './components';

 const theme = useThemeStore();
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/SettingDrawer/components/PageFunc/index.vue
+++ b/src/layouts/common/SettingDrawer/components/PageFunc/index.vue
@@ -70,4 +70,5 @@ import SettingMenu from '../SettingMenu/index.vue';

 const theme = useThemeStore();
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/SettingDrawer/components/PageView/index.vue
+++ b/src/layouts/common/SettingDrawer/components/PageView/index.vue
@@ -40,4 +40,5 @@ import SettingMenu from '../SettingMenu/index.vue';

 const theme = useThemeStore();
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/SettingDrawer/components/SettingMenu/index.vue
+++ b/src/layouts/common/SettingDrawer/components/SettingMenu/index.vue
@@ -13,4 +13,5 @@ interface Props {

 defineProps<Props>();
 </script>
+
 <style scoped></style>
--- a/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorCheckbox.vue
+++ b/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorCheckbox.vue
@@ -23,4 +23,5 @@ const props = withDefaults(defineProps<Props>(), {
 const whiteColors = ['#ffffff', '#fff', 'rgb(255,255,255)'];
 const isWhite = computed(() => whiteColors.includes(props.color));
 </script>
+
 <style scoped></style>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Soybean	65c21812bb	chore(release): 0.9.6	2022-06-16 01:18:18 +08:00
Soybean	c3c975ee11	feat(projects): 本地svg动态渲染图标 ISSUES CLOSED: #61	2022-06-16 01:17:31 +08:00
Soybean	833018a831	build(deps): update deps	2022-06-15 23:44:46 +08:00
Soybean	3eb7f6f593	Merge pull request #102 from yanbowe/main feat(projects): 增加设置当前Tab页签名称功能	2022-06-14 16:54:03 +08:00
燕博文	efcfa576d5	fix(projects): 设置tab标题导致meta属性丢失	2022-06-14 16:09:33 +08:00
燕博文	487213b648	feat(projects): 增加设置当前Tab页签名称功能	2022-06-14 15:42:59 +08:00
Soybean	4ee0d94f1b	fix(projects): 修复顶部菜单的位置失效问题	2022-06-11 15:27:19 +08:00
Soybean	5fa822f4d4	refactor(projects): 代码优化	2022-06-11 13:37:52 +08:00
Soybean	8e6e787543	build(projects): update deps, update config	2022-06-11 13:30:25 +08:00
Soybean	9917b5e53c	build(deps): update deps	2022-06-10 01:02:50 +08:00
Soybean	8f3e855f41	refactor(projects): 优化菜单支持横向滚动 ISSUES CLOSED: #76	2022-06-10 01:02:50 +08:00
tanminglin	808051b29d	feat(projects): 上下结构，菜单支持横向滚动	2022-06-10 01:02:24 +08:00
Soybean	906aed5e75	build(deps): update deps	2022-06-08 00:08:16 +08:00
Soybean	2d64a2e57c	feat(projects): 新增Antv G2图表示例	2022-06-07 23:58:47 +08:00
Soybean	0c70a9e083	docs(projects): update README.md	2022-06-07 23:49:02 +08:00
Soybean	08d83ecbea	chore(release): 0.9.5	2022-06-07 01:55:57 +08:00
Soybean	4122685803	feat(projects): 支持同一路由根据不同query和hash同时显示不同Tab ISSUES CLOSED: #64	2022-06-07 01:51:40 +08:00
Soybean	434ab1c560	feat(projects): 动态路由根路由重定向只需取决于后端返回的路由首页 ISSUES CLOSED: \	2022-06-06 22:47:46 +08:00
Soybean	ae99e57c52	docs(projects): update README.md	2022-06-06 18:37:27 +08:00
Soybean	e3c4a6ece6	build(deps): 依赖升级	2022-06-06 12:14:19 +08:00
Soybean	c8717c25b8	build(projects): 配置更改	2022-06-06 12:11:01 +08:00
Soybean	e9656c6e76	docs(projects): update docs	2022-06-04 12:04:44 +08:00
Soybean	fd78791229	build(projects): 配置优化	2022-06-04 11:48:24 +08:00
Soybean	de09f82586	build(projects): 代码优化 ISSUES CLOSED: \	2022-06-02 02:39:26 +08:00
Soybean	c7762490de	feat(projects): 补充更多的ECharts示例 ISSUES CLOSED: \	2022-06-01 00:27:28 +08:00
Soybean	4558c24d1c	fix(projects): 修复@antv/g2生产环境报错 ISSUES CLOSED: \	2022-05-31 23:02:24 +08:00
Soybean	d9ac7e4de0	refactor(projects): 代码优化 ISSUES CLOSED: \	2022-05-31 00:26:52 +08:00
Soybean	6a5a357f50	build(deps): update deps ISSUES CLOSED: \	2022-05-30 22:53:44 +08:00
Soybean	44b022aefd	feat(projects): 添加antv g2图表示例 ISSUES CLOSED: \	2022-05-30 22:39:44 +08:00
Soybean	0a46ea0844	feat(projects): 添加插件页面：图表 ISSUES CLOSED: \	2022-05-29 23:44:47 +08:00
Soybean	39854a492b	feat(projects): 添加百度地图、升级依赖 ISSUES CLOSED: \	2022-05-29 22:39:07 +08:00
Soybean	4c2f535a9b	refactor(projects): 代码优化 ISSUES CLOSED: \	2022-05-28 20:26:29 +08:00
Soybean	be45d83766	build(deps): update deps ISSUES CLOSED: \	2022-05-28 17:06:55 +08:00
Soybean	d28b9039bb	refactor(projects): 代码优化 ISSUES CLOSED: \	2022-05-28 13:33:09 +08:00
Soybean	8f6d6ce3cb	refactor(styles): 代码格式 ISSUES CLOSED: \	2022-05-28 12:30:17 +08:00
Soybean	07baac7cf8	build(other): update cz config	2022-05-27 09:53:40 +08:00
Soybean	7487ab79b3	chore(deps): update deps ISSUES CLOSED: \	2022-05-27 00:54:13 +08:00
Soybean	a70e4161be	chore(deps): update deps ISSUES CLOSED: \	2022-05-19 23:51:28 +08:00
Soybean	095c432363	refactor(projects): 代码优化 ISSUES CLOSED: \	2022-05-19 00:15:37 +08:00
Soybean	028096e53f	build(deps): update deps ISSUES CLOSED: \	2022-05-19 00:00:47 +08:00
Soybean	44ab55d594	refactor(projects): 代码优化 ISSUES CLOSED: \	2022-05-18 23:43:41 +08:00
Soybean	4b80a66114	docs(projects): update README.md ISSUES CLOSED: \	2022-05-18 23:23:04 +08:00
Soybean	cc0bb088ec	Merge pull request #91 from yanbowe/main 路由meta新增activeMenu属性	2022-05-17 19:09:05 +08:00
燕博文	3e4f9e2824	fix(route): 当为左侧混合菜单时activeMenu无效情况	2022-05-17 14:06:20 +08:00
燕博文	ebd16a4d1a	feat(route): 路由meta新增activeMenu属性	2022-05-17 13:54:48 +08:00
Soybean	84cb07baec	docs(projects): update README.md ISSUES CLOSED: \	2022-05-16 22:17:01 +08:00
Soybean	0811ffa5ae	docs(projects): update README.md	2022-05-16 20:09:07 +08:00
Soybean	3f822a7d76	build(deps): update deps ISSUES CLOSED: \	2022-05-14 00:57:23 +08:00
Soybean	a1c7e10574	refactor(projects): 代码优化	2022-05-11 00:18:36 +08:00
Soybean	50d7ccd82d	build(deps): update deps	2022-05-10 23:53:56 +08:00
Soybean	e0233061d3	fix(projects): 修复页面切换时导致的溢出滚动条	2022-05-10 23:22:24 +08:00
Soybean	a0c405dadd	build(projects): update config	2022-05-10 22:07:53 +08:00
Soybean	60f912508b	fix(projects): 修复权限切换路由数据未更新的问题	2022-05-09 23:53:09 +08:00
Soybean	3590b65e22	refactor(projects): 代码优化	2022-05-09 20:52:43 +08:00
Soybean	92b8406444	build(deps): update deps	2022-05-07 01:01:46 +08:00
Soybean	e7ad08685e	feat(projects): 引入echarts替换antvG2plot	2022-05-07 00:58:24 +08:00
Soybean	14c145eef1	refactor(projects): 代码优化	2022-05-05 18:42:29 +08:00
Soybean	518f7eed28	build(deps): update deps	2022-05-05 13:11:16 +08:00
Soybean	21e63998d0	docs(projects): update README.md	2022-05-05 12:50:14 +08:00
Soybean	38ee2a62cd	Merge pull request #86 from dxxzst/patch-1 fix(projects): 修复插件不存在的错误提示	2022-05-04 21:14:17 +08:00
Grazing Wind	716528206e	fix(projects): 修复插件不存在的错误提示已经改成小写	2022-05-04 09:35:19 +08:00
Soybean	b81143e55e	Merge pull request #84 from tclyjy/main refactor(layouts): layout/header 反转色样式补充	2022-04-29 20:59:59 +08:00
Eric_Yuan	0243b27505	style(GlobalBreadcrumb): 代码格式fix	2022-04-29 19:19:10 +08:00
Soybean	909c12d3c6	Merge pull request #83 from toolvcn/相思 feat(projects): 添加自动跟随系统主题设置	2022-04-29 17:56:27 +08:00
元家怿	01d0bcbfd0	refactor(layouts): layout/header 反转色样式补充	2022-04-29 15:53:12 +08:00
相思	ba07b695dd	feat(projects): 添加自动跟随系统主题设置	2022-04-29 15:02:51 +08:00
Soybean	3d8befa376	docs(projects): update README.md	2022-04-29 02:05:00 +08:00
Soybean	97c92626cc	chore(release): 0.9.4	2022-04-29 02:02:52 +08:00
Soybean	55ddc9cab0	refactor(projects): 动态路由权限完善	2022-04-29 02:00:51 +08:00
Soybean	401f0c748d	build(projects): 细节调整	2022-04-28 01:02:41 +08:00
Soybean	d5c751153c	docs(projects): update README.md	2022-04-28 00:54:40 +08:00
Soybean	69d51318ff	refactor(projects): merge branch unocss to main	2022-04-28 00:50:22 +08:00
Soybean	de5fb84215	refactor(projects): layout和tab组件依赖名称变更、样式修复	2022-04-27 22:51:28 +08:00
Soybean	c275f2632c	refactor(projects): 细节优化	2022-04-27 22:27:46 +08:00
Soybean	e899914426	fix(projects): 修复样式	2022-04-27 19:31:40 +08:00
元家怿	861c8b9852	feat(layouts): 添加侧边栏/头部的反转模式来增加对比度	2022-04-27 19:15:23 +08:00
Soybean	a782461453	refactor(projects): 代码优化	2022-04-27 19:05:58 +08:00
Soybean	e8488e4d52	fix(projects): 添加.npmrc修复无法获取自动引入的全局组件声明类型	2022-04-27 18:08:39 +08:00
Soybean	251b5b9664	refactor(projects): 代码优化	2022-04-27 07:47:26 +08:00
Soybean	41e46a5d80	refactor(projects): mock权限相关数据优化	2022-04-26 00:12:20 +08:00
Soybean	5c75e9d958	build(deps): update deps	2022-04-24 00:23:45 +08:00
Soybean	7f4350aeb6	feat(projects): mock添加权限过滤	2022-04-23 12:31:06 +08:00
Soybean	807448aec5	feat(projects): 权限完善及权限示例页面	2022-04-23 02:21:02 +08:00
相思	b9c5c34979	feat(projects): HTML lang 修改为 zh-cmn-Hans	2022-04-22 13:35:22 +08:00
Soybean	c9d3e5a3fd	feat(projects): 引入unocss替换windicss	2022-04-22 12:29:22 +08:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M19 10c0 1.38-2.12 2.5-3.5 2.5s-2.75-1.12-2.75-2.5h-1.5c0 1.38-1.37 2.5-2.75 2.5S5 11.38 5 10h-.75c-.16.64-.25 1.31-.25 2a8 8 0 0 0 8 8a8 8 0 0 0 8-8c0-.69-.09-1.36-.25-2H19m-7-6C9.04 4 6.45 5.61 5.07 8h13.86C17.55 5.61 14.96 4 12 4m10 8a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2a10 10 0 0 1 10 10m-10 5.23c-1.75 0-3.29-.73-4.19-1.81L9.23 14c.45.72 1.52 1.23 2.77 1.23s2.32-.51 2.77-1.23l1.42 1.42c-.9 1.08-2.44 1.81-4.19 1.81Z"></path></svg>