chore(release): 0.9.4

.env

@@ -9,4 +9,4 @@ VITE_APP_DESC=SoybeanAdmin是一个中后台管理系统模版
 # 权限路由模式: static ｜ dynamic
 VITE_AUTH_ROUTE_MODE=dynamic
 
-VITE_VISUALIZER=false
+VITE_ROUTE_HOME_PATH=/dashboard/analysis

.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;
 }

.env.production

@@ -1 +1,6 @@
+VITE_VISUALIZER=false
 
+VITE_COMPRESS=false
+
+# gzip | brotliCompress | deflate | deflateRaw
+VITE_COMPRESS_TYPE=gzip

.eslintrc.js

@@ -55,12 +55,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,13 +141,7 @@ module.exports = {
             position: 'before'
           }
         ],
-        pathGroupsExcludedImportTypes: [
-          'vue',
-          'vue-router',
-          'vuex',
-          'pinia'
-          // 'naive-ui'
-        ]
+        pathGroupsExcludedImportTypes: ['vue', 'vue-router', 'vuex', 'pinia', 'naive-ui']
       }
     ],
     'import/no-unresolved': 'off',
@@ -171,17 +164,7 @@ module.exports = {
         ignores: ['index']
       }
     ],
-    '@typescript-eslint/ban-types': [
-      'error',
-      {
-        types: {
-          '{}': {
-            message: 'Use object instead',
-            fixWith: 'object'
-          }
-        }
-      }
-    ],
+    '@typescript-eslint/ban-types': 'off',
     '@typescript-eslint/no-empty-interface': [
       'error',
       {
@@ -192,7 +175,7 @@ module.exports = {
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@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 }]
+    '@typescript-eslint/no-use-before-define': ['warn', { classes: true, functions: false, typedefs: false }]
   },
   overrides: [
     {

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

.vscode/extensions.json

@@ -31,6 +31,6 @@
 		"johnsoncodehk.vscode-typescript-vue-plugin",
 		"dariofuzinato.vue-peek",
 		"wscats.vue",
-		"voorjaar.windicss-intellisense"
+		"antfu.unocss"
 	]
 }

.vscode/settings.json

@@ -33,7 +33,6 @@
 	"[javascript]": {
 		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
-	"javascript.updateImportsOnFileMove.enabled": "always",
 	"[javascriptreact]": {
 		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
@@ -72,5 +71,6 @@
 		"business": "core",
 		"request": "api",
 		"adapter": "middleware"
-	}
+	},
+	"unocss.root": "src"
 }

CHANGELOG.md

@@ -2,6 +2,37 @@
 
 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.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)
 
 

README.md

@@ -13,10 +13,10 @@ Soybean Admin  是一个基于 Vue3、Vite、TypeScript、Naive UI 的免费中
 
 - **最新技术栈**：使用 Vue3/vite2 等前端前沿技术开发, 使用高效率的npm包管理器pnpm
 - **TypeScript**: 应用程序级 JavaScript 的语言
-- **主题**：丰富可配置的主题、暗黑模式，基于windicss的动态主题颜色
+- **主题**：丰富可配置的主题、暗黑模式，基于原子css - unocss的动态主题颜色
 - **代码规范**：丰富的规范插件及极高的代码规范
 - **权限路由**：简易的路由配置、基于mock的动态路由能快速实现后端动态路由
-- **请求函数**：基于axios的完善的请求函数封装，提供Promise和hooks两种请求函数
+- **请求函数**：基于axios的完善的请求函数封装，提供Promise和hooks两种请求函数，加入请求结果数据转换的适配器
 
 ## 预览
 
@@ -51,10 +51,10 @@ Soybean Admin  是一个基于 Vue3、Vite、TypeScript、Naive UI 的免费中
 ## 开发计划
 
 - [x] 添加前端静态路由
-- [ ] 集成unocss替换windicss(新分支unocss)
-- [ ] 用户角色切换示例、按钮级别权限指令
-- [ ] 最近功能的有关文档更新
+- [x] 集成unocss替换windicss
+- [x] 用户角色切换示例、按钮级别权限指令
 - [ ] 引入ECharts替换AntV G2Plot
+- [ ] 最近功能的有关文档更新
 - [ ] 性能优化(优化递归函数)
 - [ ] 精简版(新分支thin)
 - [ ] 表单、表格示例

build/config/index.ts

@@ -1,3 +1,2 @@
-export * from './path';
 export * from './define';
 export * from './proxy';

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
-  };
-}

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}`), '')
     }
   };
 

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 });
+};

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: {

build/plugins/index.ts

@@ -1,27 +1,26 @@
-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 - 环境变量配置
+ * @param srcPath - src路径
  */
-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, srcPath: string): (PluginOption | PluginOption[])[] {
+  const plugins = [...vue, html(viteEnv), ...unplugin(srcPath), 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;
 }

build/plugins/unocss.ts

@@ -0,0 +1,3 @@
+import unocss from 'unocss/vite';
+
+export default unocss();

build/plugins/unplugin.ts

@@ -1,3 +1,4 @@
+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';
@@ -6,6 +7,7 @@ import { FileSystemIconLoader } from 'unplugin-icons/loaders';
 
 export default (srcPath: string) => {
   return [
+    DefineOptions(),
     Icons({
       compiler: 'vue3',
       customCollections: {
@@ -15,7 +17,8 @@ export default (srcPath: string) => {
       defaultClass: 'inline-block'
     }),
     Components({
-      dts: true,
+      dts: 'src/typings/components.d.ts',
+      types: [{ from: 'vue-router', names: ['RouterLink', 'RouterView'] }],
       resolvers: [NaiveUiResolver(), IconsResolver({ customCollections: ['custom'], componentPrefix: 'icon' })]
     })
   ];

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
 });

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;

build/plugins/windicss.ts

@@ -1,3 +0,0 @@
-import windiCSS from 'vite-plugin-windicss';
-
-export default windiCSS();

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>

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
       };
     }
   }

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
+        }
       };
     }
   }

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'
+  }
+];

mock/model/index.ts

@@ -0,0 +1,2 @@
+export * from './auth';
+export * from './route';

mock/model/route.ts

@@ -0,0 +1,846 @@
+export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
+  super: [
+    {
+      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,
+            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: 'auth-demo',
+      path: '/auth-demo',
+      component: 'basic',
+      children: [
+        {
+          name: 'auth-demo_permission',
+          path: '/auth-demo/permission',
+          component: 'self',
+          meta: {
+            title: '权限切换',
+            requiresAuth: true,
+            icon: 'ic:round-construction'
+          }
+        },
+        {
+          name: 'auth-demo_super',
+          path: '/auth-demo/super',
+          component: 'self',
+          meta: {
+            title: '超级管理员可见',
+            requiresAuth: true,
+            icon: 'ic:round-supervisor-account'
+          }
+        }
+      ],
+      meta: {
+        title: '权限示例',
+        icon: 'ic:baseline-security',
+        order: 5
+      }
+    },
+    {
+      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: 6
+      }
+    },
+    {
+      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: 7
+      }
+    },
+    {
+      name: 'about',
+      path: '/about',
+      component: 'self',
+      meta: {
+        title: '关于',
+        requiresAuth: true,
+        singleLayout: 'basic',
+        icon: 'fluent:book-information-24-regular',
+        order: 8
+      }
+    }
+  ],
+  admin: [
+    {
+      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,
+            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: 'auth-demo',
+      path: '/auth-demo',
+      component: 'basic',
+      children: [
+        {
+          name: 'auth-demo_permission',
+          path: '/auth-demo/permission',
+          component: 'self',
+          meta: {
+            title: '权限切换',
+            requiresAuth: true,
+            icon: 'ic:round-construction'
+          }
+        }
+      ],
+      meta: {
+        title: '权限示例',
+        icon: 'ic:baseline-security',
+        order: 5
+      }
+    },
+    {
+      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: 6
+      }
+    },
+    {
+      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: 7
+      }
+    },
+    {
+      name: 'about',
+      path: '/about',
+      component: 'self',
+      meta: {
+        title: '关于',
+        requiresAuth: true,
+        singleLayout: 'basic',
+        icon: 'fluent:book-information-24-regular',
+        order: 8
+      }
+    }
+  ],
+  user: [
+    {
+      name: 'dashboard',
+      path: '/dashboard',
+      component: 'basic',
+      children: [
+        {
+          name: 'dashboard_analysis',
+          path: '/dashboard/analysis',
+          component: 'self',
+          meta: {
+            title: '分析页',
+            requiresAuth: true,
+            icon: 'icon-park-outline:analysis'
+          }
+        }
+      ],
+      meta: {
+        title: '仪表盘',
+        icon: 'carbon:dashboard',
+        order: 1
+      }
+    },
+    {
+      name: 'auth-demo',
+      path: '/auth-demo',
+      component: 'basic',
+      children: [
+        {
+          name: 'auth-demo_permission',
+          path: '/auth-demo/permission',
+          component: 'self',
+          meta: {
+            title: '权限切换',
+            requiresAuth: true,
+            icon: 'ic:round-construction'
+          }
+        }
+      ],
+      meta: {
+        title: '权限示例',
+        icon: 'ic:baseline-security',
+        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: 7
+      }
+    },
+    {
+      name: 'about',
+      path: '/about',
+      component: 'self',
+      meta: {
+        title: '关于',
+        requiresAuth: true,
+        singleLayout: 'basic',
+        icon: 'fluent:book-information-24-regular',
+        order: 8
+      }
+    }
+  ]
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "soybean-admin",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "scripts": {
     "dev": "cross-env VITE_ENV_TYPE=dev vite",
     "dev:test": "cross-env VITE_ENV_TYPE=test vite",
@@ -26,10 +26,12 @@
     }
   },
   "dependencies": {
-    "@antv/g2plot": "^2.4.15",
+    "@antv/g2plot": "^2.4.16",
     "@better-scroll/core": "^2.4.2",
+    "@soybeanjs/vue-admin-layout": "^1.0.3",
+    "@soybeanjs/vue-admin-tab": "^1.0.1",
     "@vueuse/core": "^8.3.1",
-    "axios": "^0.26.1",
+    "axios": "^0.27.2",
     "clipboard": "^2.0.10",
     "colord": "^2.9.2",
     "crypto-js": "^4.1.1",
@@ -40,9 +42,7 @@
     "pinia": "^2.0.13",
     "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",
+    "swiper": "^8.1.4",
     "ua-parser-js": "^1.0.2",
     "vditor": "^3.8.13",
     "vue": "3.2.33",
@@ -52,49 +52,50 @@
   },
   "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": "^16.2.4",
+    "@commitlint/config-conventional": "^16.2.4",
+    "@iconify/json": "^2.1.33",
     "@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.29",
     "@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",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/parser": "^5.21.0",
     "@vitejs/plugin-vue": "^2.3.1",
+    "@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",
     "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.14.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.6.0",
+    "eslint-plugin-vue": "^8.7.1",
     "husky": "^7.0.4",
-    "lint-staged": "^12.4.0",
+    "lint-staged": "^12.4.1",
     "mockjs": "^1.1.0",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.6.2",
     "rollup-plugin-visualizer": "^5.6.0",
-    "sass": "^1.50.1",
+    "sass": "^1.51.0",
+    "standard-version": "^9.3.2",
     "typescript": "^4.6.3",
+    "unocss": "^0.32.1",
     "unplugin-icons": "^0.14.1",
-    "unplugin-vue-components": "0.18.5",
-    "vite": "^2.9.5",
+    "unplugin-vue-components": "0.19.3",
+    "unplugin-vue-define-options": "^0.6.1",
+    "vite": "^2.9.6",
+    "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"
+    "vue-tsc": "^0.34.10",
+    "vueuc": "^0.4.32"
   }
 }

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';
 

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>

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
+  };
+}

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';

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}$/;

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);
 }

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);
 }

src/enum/business.ts

@@ -1,3 +1,11 @@
+/** 用户角色 */
+export enum EnumUserRole {
+  super = '超级管理员',
+  admin = '管理员',
+  user = '普通用户'
+  // custom = '自定义角色'
+}
+
 /** 登录模块 */
 export enum EnumLoginModule {
   'pwd-login' = '账密登录',

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"
@@ -25,12 +25,12 @@
     <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 { SettingDrawer, GlobalHeader, GlobalTab, GlobalSider, GlobalContent, GlobalFooter } from '../common';

src/layouts/common/GlobalHeader/components/GithubSite.vue

@@ -1,10 +1,17 @@
 <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"
+    content-class="hover:text-primary"
+    @click="handleClickLink"
+  >
+    <icon-mdi-github class="text-20px" />
   </hover-container>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+function handleClickLink() {
+  window.open('https://github.com/honghuangdc/soybean-admin', '_blank');
+}
+</script>
 <style scoped></style>

src/layouts/common/GlobalHeader/components/MenuCollapse.vue

@@ -1,5 +1,5 @@
 <template>
-  <hover-container class="w-40px h-full" @click="app.toggleSiderCollapse">
+  <hover-container class="w-40px h-full" content-class="hover:text-primary" @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>

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>

src/layouts/common/GlobalTab/components/TabDetail/index.vue

@@ -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;

src/main.ts

@@ -1,21 +1,26 @@
 import { createApp } from 'vue';
-import { setupImportAssets } from './plugins';
+import { setupAssets } from './plugins';
 import { setupStore } from './store';
 import { setupDirectives } from './directives';
 import { setupRouter } from './router';
 import App from './App.vue';
 
 async function setupApp() {
-  setupImportAssets();
+  // import assets: js、css
+  setupAssets();
 
   const app = createApp(App);
 
+  // store plugin: pinia
   setupStore(app);
 
+  // vue custom directives
   setupDirectives(app);
 
+  // vue router
   await setupRouter(app);
 
+  // mount app
   app.mount('#app');
 }
 

src/plugins/assets.ts

@@ -1,10 +1,10 @@
-import 'virtual:windi.css';
+import 'uno.css';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import '../styles/css/global.css';
 
 /** import static assets: css, js , font and so on. - [引入静态资源，css、js和字体文件等] */
-export default function setupImportAssets() {
+export default function setupAssets() {
   //
 }

src/plugins/index.ts

@@ -1,3 +1,3 @@
-import setupImportAssets from './assets';
+import setupAssets from './assets';
 
-export { setupImportAssets };
+export { setupAssets };

src/router/guard/dynamic.ts

@@ -16,7 +16,7 @@ export async function createDynamicRouteGuard(
   const isLogin = Boolean(getToken());
 
   // 初始化权限路由
-  if (!route.isInitedAuthRoute) {
+  if (!route.isInitAuthRoute) {
     // 未登录情况下直接回到登录页，登录成功后再加载权限路由
     if (!isLogin) {
       if (to.name === routeName('login')) {

src/router/index.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue';
 import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
-import { transformAuthRoutesToVueRoutes } from '@/utils';
+import { transformAuthRoutesToVueRoutes, transformRouteNameToRoutePath } from '@/utils';
 import { constantRoutes } from './routes';
 import { scrollBehavior } from './helpers';
 import { createRouterGuard } from './guard';
@@ -20,5 +20,10 @@ export async function setupRouter(app: App) {
   await router.isReady();
 }
 
+/** 路由名称 */
+export const routeName = (key: AuthRoute.RouteKey) => key;
+/** 路由路径 */
+export const routePath = (key: Exclude<AuthRoute.RouteKey, 'not-found-page'>) => transformRouteNameToRoutePath(key);
+
 export * from './routes';
 export * from './modules';

src/router/modules/about.ts

@@ -6,9 +6,9 @@ const about: AuthRoute.Route = {
     title: '关于',
     requiresAuth: true,
     singleLayout: 'basic',
-    permissions: ['super', 'admin', 'test'],
+    permissions: ['super', 'admin', 'user'],
     icon: 'fluent:book-information-24-regular',
-    order: 7
+    order: 8
   }
 };
 

src/router/modules/auth-demo.ts

@@ -0,0 +1,35 @@
+const authDemo: AuthRoute.Route = {
+  name: 'auth-demo',
+  path: '/auth-demo',
+  component: 'basic',
+  children: [
+    {
+      name: 'auth-demo_permission',
+      path: '/auth-demo/permission',
+      component: 'self',
+      meta: {
+        title: '权限切换',
+        requiresAuth: true,
+        icon: 'ic:round-construction'
+      }
+    },
+    {
+      name: 'auth-demo_super',
+      path: '/auth-demo/super',
+      component: 'self',
+      meta: {
+        title: '超级管理员可见',
+        requiresAuth: true,
+        permissions: ['super'],
+        icon: 'ic:round-supervisor-account'
+      }
+    }
+  ],
+  meta: {
+    title: '权限示例',
+    icon: 'ic:baseline-security',
+    order: 5
+  }
+};
+
+export default authDemo;

src/router/modules/exception.ts

@@ -37,7 +37,7 @@ const exception: AuthRoute.Route = {
   meta: {
     title: '异常页',
     icon: 'ant-design:exception-outlined',
-    order: 5
+    order: 6
   }
 };
 

src/router/routes/index.ts

@@ -5,7 +5,7 @@ export const constantRoutes: AuthRoute.Route[] = [
   {
     name: 'root',
     path: '/',
-    redirect: '/dashboard/analysis',
+    redirect: import.meta.env.VITE_ROUTE_HOME_PATH,
     meta: {
       title: 'Root'
     }
@@ -64,16 +64,3 @@ export const constantRoutes: AuthRoute.Route[] = [
     }
   }
 ];
-
-/** 路由名称 */
-export const routeName = (key: AuthRoute.RouteKey) => key;
-
-/** 路由路径 */
-export function routePath(key: Exclude<AuthRoute.RouteKey, 'not-found-page'>): AuthRoute.RoutePath {
-  const rootPath: AuthRoute.RoutePath = '/';
-  if (key === 'root') return rootPath;
-  const splitMark: AuthRoute.RouteSplitMark = '_';
-  const pathSplitMark = '/';
-  const path = key.split(splitMark).join(pathSplitMark);
-  return (pathSplitMark + path) as AuthRoute.RoutePath;
-}

src/service/adapter/index.ts

@@ -1,4 +1,6 @@
-export function adapterOfDataWithAdapter(res: Service.RequestResult<ApiDemo.DataWithAdapter>): Demo.DataWithAdapter {
+export function adapterOfFetchDataWithAdapter(
+  res: Service.RequestResult<ApiDemo.DataWithAdapter>
+): Demo.DataWithAdapter {
   const { dataId, dataName } = res.data!;
 
   const result: Demo.DataWithAdapter = {

src/service/api/auth.ts

@@ -11,15 +11,11 @@ export function fetchSmsCode(phone: string) {
 
 /**
  * 登录
- * @param phone - 手机号
- * @param pwdOrCode - 密码或验证码
- * @param type - 登录方式: pwd - 密码登录; sms - 验证码登录
+ * @param userName - 用户名
+ * @param password - 密码
  */
-export function fetchLogin(phone: string, pwdOrCode: string, type: 'pwd' | 'sms') {
-  if (type === 'pwd') {
-    return mockRequest.post<ApiAuth.Token>('/loginByPwd', { phone, pwd: pwdOrCode });
-  }
-  return mockRequest.post<ApiAuth.Token>('/loginByCode', { phone, code: pwdOrCode });
+export function fetchLogin(userName: string, password: string) {
+  return mockRequest.post<ApiAuth.Token>('/login', { userName, password });
 }
 
 /** 获取用户信息 */

src/service/api/demo.ts

@@ -1,9 +1,14 @@
-import { adapterOfServiceResult } from '@/utils';
-import { mockRequest } from '../request';
-import { adapterOfDataWithAdapter } from '../adapter';
+import { serviceAdapter } from '@/utils';
+import { request, mockRequest } from '../request';
+import { adapterOfFetchDataWithAdapter } from '../adapter';
 
 /** 带有适配器的请求(将请求结果进行数据处理) */
 export async function fetchDataWithAdapter() {
   const res = await mockRequest.post<ApiDemo.DataWithAdapter>('/apiDemoWithAdapter');
-  return adapterOfServiceResult(adapterOfDataWithAdapter, res);
+  return serviceAdapter(adapterOfFetchDataWithAdapter, res);
+}
+
+/** 测试代理后的请求 */
+export function testRequestWithProxy() {
+  return request.get('/test-proxy'); // 确保.env-config的url和当前地址组成的 `${url}/test-proxy` 是有效的后端接口
 }

src/service/request/index.ts

@@ -1,9 +1,9 @@
 import { createRequest } from './request';
 import { getEnvConfig } from '~/.env-config';
 
-const { http } = getEnvConfig(import.meta.env);
+const envConfig = getEnvConfig(import.meta.env);
 const isHttpProxy = import.meta.env.VITE_HTTP_PROXY === 'true';
 
-export const request = createRequest({ baseURL: isHttpProxy ? http.proxy : http.url });
+export const request = createRequest({ baseURL: isHttpProxy ? envConfig.proxy : envConfig.url });
 
 export const mockRequest = createRequest({ baseURL: '/mock' });

src/store/modules/auth/index.ts

@@ -1,9 +1,11 @@
-import { unref } from 'vue';
+import { unref, nextTick } from 'vue';
 import { defineStore } from 'pinia';
 import { router as globalRouter } from '@/router';
 import { useRouterPush } from '@/composables';
 import { fetchLogin, fetchUserInfo } from '@/service';
 import { getUserInfo, getToken, setUserInfo, setToken, setRefreshToken, clearAuthStorage } from '@/utils';
+import { useTabStore } from '../tab';
+import { useRouteStore } from '../route';
 
 interface AuthState {
   /** 用户信息 */
@@ -30,6 +32,8 @@ export const useAuthStore = defineStore('auth-store', {
     /** 重置auth状态 */
     resetAuthStore() {
       const { toLogin } = useRouterPush(false);
+      const { resetTabStore } = useTabStore();
+      const { resetRouteStore } = useRouteStore();
       const route = unref(globalRouter.currentRoute);
 
       clearAuthStorage();
@@ -38,6 +42,11 @@ export const useAuthStore = defineStore('auth-store', {
       if (route.meta.requiresAuth) {
         toLogin();
       }
+
+      nextTick(() => {
+        resetTabStore();
+        resetRouteStore();
+      });
     },
     /**
      * 根据token进行登录
@@ -46,7 +55,7 @@ export const useAuthStore = defineStore('auth-store', {
     async loginByToken(backendToken: ApiAuth.Token) {
       const { toLoginRedirect } = useRouterPush(false);
 
-      // 先把token存储到缓存中
+      // 先把token存储到缓存中(后面接口的请求头需要token)
       const { token, refreshToken } = backendToken;
       setToken(token);
       setRefreshToken(refreshToken);
@@ -76,17 +85,19 @@ export const useAuthStore = defineStore('auth-store', {
     },
     /**
      * 登录
-     * @param phone - 手机号
-     * @param pwdOrCode - 密码或验证码
-     * @param type - 登录方式: pwd - 密码登录; sms - 验证码登录
+     * @param userName - 用户名
+     * @param password - 密码
      */
-    async login(phone: string, pwdOrCode: string, type: 'pwd' | 'sms') {
+    async login(userName: string, password: string) {
       this.loginLoading = true;
-      const { data } = await fetchLogin(phone, pwdOrCode, type);
+      const { data } = await fetchLogin(userName, password);
       if (data) {
         await this.loginByToken(data);
       }
       this.loginLoading = false;
+    },
+    updateUserRole(userRole: Auth.RoleType) {
+      this.userInfo.userRole = userRole;
     }
   }
 });

src/store/modules/route/index.ts

@@ -7,8 +7,11 @@ import {
   transformAuthRouteToMenu,
   transformAuthRoutesToVueRoutes,
   transformAuthRoutesToSearchMenus,
-  getCacheRoutes
+  getCacheRoutes,
+  filterAuthRoutesByUserPermission,
+  transformRoutePathToRouteName
 } from '@/utils';
+import { useAuthStore } from '../auth';
 import { useTabStore } from '../tab';
 
 interface RouteState {
@@ -19,7 +22,7 @@ interface RouteState {
    */
   authRouteMode: ImportMetaEnv['VITE_AUTH_ROUTE_MODE'];
   /** 是否初始化了权限路由 */
-  isInitedAuthRoute: boolean;
+  isInitAuthRoute: boolean;
   /** 路由首页name(前端静态路由时生效，后端动态路由该值会被后端返回的值覆盖) */
   routeHomeName: AuthRoute.RouteKey;
   /** 菜单 */
@@ -33,13 +36,16 @@ interface RouteState {
 export const useRouteStore = defineStore('route-store', {
   state: (): RouteState => ({
     authRouteMode: import.meta.env.VITE_AUTH_ROUTE_MODE,
-    isInitedAuthRoute: false,
-    routeHomeName: 'dashboard_analysis',
+    isInitAuthRoute: false,
+    routeHomeName: transformRoutePathToRouteName(import.meta.env.VITE_ROUTE_HOME_PATH),
     menus: [],
     searchMenus: [],
     cacheRoutes: []
   }),
   actions: {
+    resetRouteStore() {
+      this.$reset();
+    },
     /**
      * 处理权限路由
      * @param routes - 权限路由
@@ -50,6 +56,7 @@ export const useRouteStore = defineStore('route-store', {
       this.searchMenus = transformAuthRoutesToSearchMenus(routes);
 
       const vueRoutes = transformAuthRoutesToVueRoutes(routes);
+
       vueRoutes.forEach(route => {
         router.addRoute(route);
       });
@@ -73,9 +80,9 @@ export const useRouteStore = defineStore('route-store', {
      * @param router - 路由实例
      */
     async initStaticRoute(router: Router) {
-      // 先根据用户权限过滤一下staticRoutes
-
-      this.handleAuthRoutes(staticRoutes, router);
+      const auth = useAuthStore();
+      const routes = filterAuthRoutesByUserPermission(staticRoutes, auth.userInfo.userRole);
+      this.handleAuthRoutes(routes, router);
     },
     /**
      * 初始化权限路由
@@ -84,6 +91,7 @@ export const useRouteStore = defineStore('route-store', {
     async initAuthRoute(router: Router) {
       const { initHomeTab } = useTabStore();
       const { userId } = getUserInfo();
+
       if (!userId) return;
 
       const isDynamicRoute = this.authRouteMode === 'dynamic';
@@ -94,7 +102,8 @@ export const useRouteStore = defineStore('route-store', {
       }
 
       initHomeTab(this.routeHomeName, router);
-      this.isInitedAuthRoute = true;
+
+      this.isInitAuthRoute = true;
     }
   }
 });

src/store/modules/tab/index.ts

@@ -1,7 +1,7 @@
 import type { Router, RouteLocationNormalizedLoaded } from 'vue-router';
 import { defineStore } from 'pinia';
 import { useRouterPush } from '@/composables';
-import { getTabRoutes } from '@/utils';
+import { getTabRoutes, clearTabRoutes } from '@/utils';
 import { useThemeStore } from '../theme';
 import { getTabRouteByVueRoute, isInTabRoutes, getIndexInTabRoutes } from './helpers';
 
@@ -21,7 +21,7 @@ export const useTabStore = defineStore('tab-store', {
       name: 'root',
       path: '/',
       meta: {
-        title: 'root'
+        title: 'Root'
       },
       scrollPosition: {
         left: 0,
@@ -38,6 +38,11 @@ export const useTabStore = defineStore('tab-store', {
     }
   },
   actions: {
+    /** 重置Tab状态 */
+    resetTabStore() {
+      clearTabRoutes();
+      this.$reset();
+    },
     /**
      * 设置当前路由对应的页签为激活状态
      * @param path - 路由path
@@ -53,7 +58,8 @@ export const useTabStore = defineStore('tab-store', {
     initHomeTab(routeHomeName: string, router: Router) {
       const routes = router.getRoutes();
       const findHome = routes.find(item => item.name === routeHomeName);
-      if (findHome) {
+      if (findHome && !findHome.children.length) {
+        // 有子路由的不能作为Tab
         this.homeTab = getTabRouteByVueRoute(findHome);
       }
     },
@@ -165,16 +171,20 @@ export const useTabStore = defineStore('tab-store', {
     iniTabStore(currentRoute: RouteLocationNormalizedLoaded) {
       const theme = useThemeStore();
 
-      const isHome = currentRoute.path === this.homeTab.path;
       const tabs: GlobalTabRoute[] = theme.tab.isCache ? getTabRoutes() : [];
+
       const hasHome = isInTabRoutes(tabs, this.homeTab.path);
-      const hasCurrent = isInTabRoutes(tabs, currentRoute.path);
-      if (!hasHome) {
+      if (!hasHome && this.homeTab.name !== 'root') {
         tabs.unshift(this.homeTab);
       }
+
+      const isHome = currentRoute.path === this.homeTab.path;
+      const hasCurrent = isInTabRoutes(tabs, currentRoute.path);
       if (!isHome && !hasCurrent) {
-        tabs.push(getTabRouteByVueRoute(currentRoute));
+        const currentTab = getTabRouteByVueRoute(currentRoute);
+        tabs.push(currentTab);
       }
+
       this.tabs = tabs;
       this.setActiveTab(currentRoute.path);
     }

src/store/modules/theme/helpers.ts

@@ -71,18 +71,3 @@ export function getNaiveThemeOverrides(colors: Record<ColorType, string>): Globa
     }
   };
 }
-
-/** windicss 暗黑模式 */
-export function handleWindicssDarkMode() {
-  const DARK_CLASS = 'dark';
-  function addDarkClass() {
-    document.documentElement.classList.add(DARK_CLASS);
-  }
-  function removeDarkClass() {
-    document.documentElement.classList.remove(DARK_CLASS);
-  }
-  return {
-    addDarkClass,
-    removeDarkClass
-  };
-}

src/store/subscribe/theme.ts

@@ -11,7 +11,7 @@ export default function subscribeThemeStore() {
   const theme = useThemeStore();
   const osTheme = useOsTheme();
   const { width } = useElementSize(document.documentElement);
-  const { addDarkClass, removeDarkClass } = handleWindicssDarkMode();
+  const { addDarkClass, removeDarkClass } = handleCssDarkMode();
 
   // 监听主题颜色
   const stopThemeColor = watch(
@@ -76,8 +76,8 @@ export default function subscribeThemeStore() {
   });
 }
 
-/** windicss 暗黑模式 */
-function handleWindicssDarkMode() {
+/** css 暗黑模式 */
+function handleCssDarkMode() {
   const DARK_CLASS = 'dark';
   function addDarkClass() {
     document.documentElement.classList.add(DARK_CLASS);

src/styles/css/global.css

@@ -1,4 +1,5 @@
 @import './transition.css';
+@import './reset.css';
 
 html, body, #app {
 	height: 100%;

src/styles/css/reset.css

@@ -0,0 +1,366 @@
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: currentColor; /* 2 */
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+*/
+
+html {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  tab-size: 4; /* 3 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button; /* 1 */
+  /* background-color: transparent; 2 */
+  background-image: none; /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/*
+Ensure the default browser behavior of the `hidden` attribute.
+*/
+
+[hidden] {
+  display: none;
+}
+
+.dark {
+  color-scheme: dark;
+}

src/typings/business.d.ts

@@ -4,10 +4,10 @@ declare namespace Auth {
    * 用户角色类型(前端静态路由用角色类型进行路由权限的控制)
    * - super: 超级管理员(该权限具有所有路由数据)
    * - admin: 管理员
-   * - test: 测试
-   * - normal: 普通用户
+   * - user: 用户
+   * - custom: 自定义角色
    */
-  type RoleType = 'super' | 'admin' | 'test' | 'normal';
+  type RoleType = keyof typeof import('@/enum').EnumUserRole;
 
   /** 用户信息 */
   interface UserInfo {
@@ -15,8 +15,6 @@ declare namespace Auth {
     userId: string;
     /** 用户名 */
     userName: string;
-    /** 用户手机号 */
-    userPhone: string;
     /** 用户角色类型 */
     userRole: RoleType;
   }

src/typings/components.d.ts

@@ -1,15 +1,16 @@
 // 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
+import '@vue/runtime-core'
 
-declare module 'vue' {
+declare module '@vue/runtime-core' {
   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']
+    BetterScroll: typeof import('./../components/custom/BetterScroll.vue')['default']
+    CountTo: typeof import('./../components/custom/CountTo.vue')['default']
+    DarkModeContainer: typeof import('./../components/common/DarkModeContainer.vue')['default']
+    DarkModeSwitch: typeof import('./../components/common/DarkModeSwitch.vue')['default']
+    GithubLink: typeof import('./../components/custom/GithubLink.vue')['default']
+    HoverContainer: typeof import('./../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']
@@ -41,12 +42,12 @@ declare module 'vue' {
     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']
+    IconSelect: typeof import('./../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']
+    ImageVerify: typeof import('./../components/custom/ImageVerify.vue')['default']
+    LoadingEmptyWrapper: typeof import('./../components/business/LoadingEmptyWrapper.vue')['default']
+    LoginAgreement: typeof import('./../components/business/LoginAgreement.vue')['default']
+    NaiveProvider: typeof import('./../components/common/NaiveProvider.vue')['default']
     NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
     NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
     NButton: typeof import('naive-ui')['NButton']
@@ -92,9 +93,11 @@ declare module 'vue' {
     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']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SystemLogo: typeof import('./../components/common/SystemLogo.vue')['default']
+    WebSiteLink: typeof import('./../components/custom/WebSiteLink.vue')['default']
   }
 }
 
-export { }
+export {}

src/typings/env.d.ts

@@ -1,12 +1,3 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import { DefineComponent } from 'vue';
-
-  const component: DefineComponent<object, object, any>;
-  export default component;
-}
-
 /**
  * env环境类型
  * - dev: 后台开发环境
@@ -15,6 +6,14 @@ declare module '*.vue' {
  */
 type EnvType = 'dev' | 'test' | 'prod';
 
+/** env环境配置 */
+interface EnvConfig {
+  /** 后端的请求地址 */
+  url: string;
+  /** 代理标识, 用于拦截地址转发代理(如："/api"，这个和后端路径有无 "/api" 路径没有任何关系) */
+  proxy: string;
+}
+
 interface ImportMetaEnv {
   /** 项目基本地址 */
   readonly VITE_BASE_URL: string;
@@ -27,14 +26,21 @@ interface ImportMetaEnv {
   /**
    * 权限路由模式:
    * - static - 前端声明的静态
-   * - dynamic - 后端返回的动态 */
+   * - dynamic - 后端返回的动态
+   */
   readonly VITE_AUTH_ROUTE_MODE: 'static' | 'dynamic';
+  /** 路由首页的路径 */
+  readonly VITE_ROUTE_HOME_PATH: Exclude<AuthRoute.RoutePath, '/not-found-page' | '/:pathMatch(.*)*'>;
   /** vite环境类型 */
   readonly VITE_ENV_TYPE?: EnvType;
   /** 开启请求代理 */
   readonly VITE_HTTP_PROXY?: 'true' | 'false';
   /** 是否开启打包文件大小结果分析 */
   readonly VITE_VISUALIZER?: 'true' | 'false';
+  /** 是否开启打包压缩 */
+  readonly VITE_COMPRESS?: 'true' | 'false';
+  /** 压缩算法类型 */
+  readonly VITE_COMPRESS_TYPE?: 'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw';
   /** hash路由模式 */
   readonly VITE_HASH_ROUTE?: 'true' | 'false';
 }

src/typings/expose.d.ts

@@ -1,6 +1,6 @@
 /** vue 的defineExpose导出的类型 */
 declare namespace Expose {
   interface BetterScroll {
-    instance: import('@better-scroll/core');
+    instance: import('@better-scroll/core').BScrollInstance;
   }
 }

src/typings/route.d.ts

@@ -36,6 +36,9 @@ declare namespace AuthRoute {
     | 'plugin_icon'
     | 'plugin_print'
     | 'plugin_swiper'
+    | 'auth-demo'
+    | 'auth-demo_permission'
+    | 'auth-demo_super'
     | 'exception'
     | 'exception_403'
     | 'exception_404'

src/typings/system.d.ts

@@ -84,6 +84,14 @@ declare namespace Service {
     /** 接口消息 */
     message: string;
   }
+
+  /** mock的响应option */
+  interface MockOption {
+    url: Record<string, any>;
+    body: Record<string, any>;
+    query: Record<string, any>;
+    headers: Record<string, any>;
+  }
 }
 
 /** 主题相关类型 */

src/utils/auth/user.ts

@@ -36,8 +36,7 @@ export function getUserInfo() {
   const emptyInfo: Auth.UserInfo = {
     userId: '',
     userName: '',
-    userPhone: '',
-    userRole: 'test'
+    userRole: 'user'
   };
   const userInfo: Auth.UserInfo = getLocal<Auth.UserInfo>(EnumStorageKey['user-info']) || emptyInfo;
   return userInfo;

src/utils/form/rule.ts

@@ -22,7 +22,7 @@ export const formRules: CustomFormRules = {
   ],
   pwd: [
     { required: true, message: '请输入密码' },
-    { pattern: REGEXP_PWD, message: '密码为8-18位数字/字符/符号，至少2种组合', trigger: 'input' }
+    { pattern: REGEXP_PWD, message: '密码为6-18位数字/字符/符号，至少2种组合', trigger: 'input' }
   ],
   code: [
     { required: true, message: '请输入验证码' },

src/utils/router/auth.ts

@@ -1,16 +1,10 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * 根据用户权限过滤路由
  * @param routes - 权限路由
  * @param permission - 权限
  */
 export function filterAuthRoutesByUserPermission(routes: AuthRoute.Route[], permission: Auth.RoleType) {
-  const filters: AuthRoute.Route[] = [];
-
-  routes.forEach(route => {
-    filterAuthRouteByUserPermission(route, permission);
-  });
-  return filters;
+  return routes.map(route => filterAuthRouteByUserPermission(route, permission)).flat(1);
 }
 
 /**
@@ -19,5 +13,12 @@ export function filterAuthRoutesByUserPermission(routes: AuthRoute.Route[], perm
  * @param permission - 权限
  */
 function filterAuthRouteByUserPermission(route: AuthRoute.Route, permission: Auth.RoleType): AuthRoute.Route[] {
-  return [];
+  const hasPermission =
+    !route.meta.permissions || permission === 'super' || route.meta.permissions.includes(permission);
+
+  if (route.children) {
+    const filterChildren = route.children.map(item => filterAuthRouteByUserPermission(item, permission)).flat(1);
+    Object.assign(route, { children: filterChildren });
+  }
+  return hasPermission ? [route] : [];
 }

src/utils/router/helpers.ts

@@ -31,6 +31,34 @@ export function transformAuthRoutesToSearchMenus(routes: AuthRoute.Route[], tree
   }, treeMap);
 }
 
+/** 将路由名字转换成路由路径 */
+export function transformRouteNameToRoutePath(
+  name: Exclude<AuthRoute.RouteKey, 'not-found-page'>
+): AuthRoute.RoutePath {
+  const rootPath: AuthRoute.RoutePath = '/';
+  if (name === 'root') return rootPath;
+
+  const splitMark: AuthRoute.RouteSplitMark = '_';
+  const pathSplitMark = '/';
+  const path = name.split(splitMark).join(pathSplitMark);
+
+  return (pathSplitMark + path) as AuthRoute.RoutePath;
+}
+
+/** 将路由路径转换成路由名字 */
+export function transformRoutePathToRouteName(
+  path: Exclude<AuthRoute.RoutePath, '/not-found-page' | '/:pathMatch(.*)*'>
+): AuthRoute.RouteKey {
+  if (path === '/') return 'root';
+
+  const pathSplitMark = '/';
+  const routeSplitMark: AuthRoute.RouteSplitMark = '_';
+
+  const name = path.split(pathSplitMark).slice(1).join(routeSplitMark) as AuthRoute.RouteKey;
+
+  return name;
+}
+
 /**
  * 将单个权限路由转换成vue路由
  * @param item - 单个权限路由

src/utils/router/index.ts

@@ -1,6 +1,7 @@
 export * from './module';
 export * from './helpers';
 export * from './cache';
+export * from './auth';
 export * from './menu';
 export * from './breadcrumb';
 export * from './tab';

src/utils/service/handler.ts

@@ -21,7 +21,7 @@ type Adapter<T = any> = (...args: Service.RequestResult[]) => T;
  * @param adapter - 适配器函数
  * @param args - 适配器函数的参数
  */
-export function adapterOfServiceResult<T extends Adapter>(adapter: T, ...args: TypeUtil.GetFunArgs<T>) {
+export function serviceAdapter<T extends Adapter>(adapter: T, ...args: TypeUtil.GetFunArgs<T>) {
   let result: Service.RequestResult | undefined;
 
   const hasError = args.some(item => {

src/views/about/components/DevDependency.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { pkgJson } from '../model';
+import { pkgJson } from './model';
 
 const { devDependencies } = pkgJson;
 </script>

src/views/about/components/ProDependency.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { pkgJson } from '../model';
+import { pkgJson } from './model';
 
 const { dependencies } = pkgJson;
 </script>

src/views/about/components/ProjectInfo.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { pkgJson } from '../model';
+import { pkgJson } from './model';
 
 const { version } = pkgJson;
 const latestBuildTime = PROJECT_BUILD_TIME;

src/views/about/components/ProjectIntroduction.vue

@@ -1,6 +1,6 @@
 <template>
   <n-card title="关于" :bordered="false" size="large" class="rounded-16px shadow-sm">
-    <p class="leading-24px">
+    <p class="leading-24px text-primary">
       Soybean Admin 是一个基于 Vue3、Vite、Naive UI、TypeScript
       的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目，相信不管是从新技术使用还是其他方面，都能帮助到你。
     </p>

src/views/auth-demo/permission/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="h-full">
+    <n-card title="权限切换" class="h-full shadow-sm rounded-16px">
+      <div class="pb-12px">
+        <n-gradient-text type="primary" :size="20">当前用户的权限：{{ auth.userInfo.userRole }}</n-gradient-text>
+      </div>
+      <n-select
+        :value="auth.userInfo.userRole"
+        class="w-120px"
+        size="small"
+        :options="options"
+        @update:value="auth.updateUserRole"
+      />
+      <div class="py-12px">
+        <n-gradient-text type="primary" :size="20">权限指令 v-permission</n-gradient-text>
+      </div>
+      <div>
+        <n-button v-permission="'super'" class="mr-12px">super可见</n-button>
+        <n-button v-permission="'admin'" class="mr-12px">admin可见</n-button>
+        <n-button v-permission="['admin', 'user']">admin和test可见</n-button>
+      </div>
+      <div class="py-12px">
+        <n-gradient-text type="primary" :size="20">权限函数 hasPermission</n-gradient-text>
+      </div>
+      <n-space>
+        <n-button v-if="hasPermission('super')">super可见</n-button>
+        <n-button v-if="hasPermission('admin')">admin可见</n-button>
+        <n-button v-if="hasPermission(['admin', 'user'])">admin和user可见</n-button>
+      </n-space>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue';
+import type { SelectOption } from 'naive-ui';
+import { EnumUserRole } from '@/enum';
+import { useAppStore, useAuthStore } from '@/store';
+import { usePermission } from '@/composables';
+
+const app = useAppStore();
+const auth = useAuthStore();
+const { hasPermission } = usePermission();
+
+interface RoleList {
+  label: string;
+  value: keyof typeof EnumUserRole;
+}
+
+const roleList: RoleList[] = [
+  { label: EnumUserRole.super, value: 'super' },
+  { label: EnumUserRole.admin, value: 'admin' },
+  { label: EnumUserRole.user, value: 'user' }
+];
+
+const options: SelectOption[] = roleList as unknown as SelectOption[];
+
+watch(
+  () => auth.userInfo.userRole,
+  async () => {
+    app.reloadPage();
+  }
+);
+</script>
+<style scoped></style>

src/views/auth-demo/super/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="h-full">
+    <n-card title="当前页面只有super才能看到" class="h-full shadow-sm rounded-16px"> </n-card>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+<style scoped></style>

src/views/dashboard/workbench/components/WorkbenchMain/index.vue

@@ -106,11 +106,11 @@ const technology: Technology[] = [
   },
   {
     id: 4,
-    name: 'WindiCSS',
+    name: 'UnoCSS',
     description: '下一代实用优先的CSS框架',
-    author: 'Windicss',
-    site: 'https://windicss.org/',
-    icon: 'file-icons:windi',
+    author: 'Anthony Fu',
+    site: 'https://uno.antfu.me/?s=',
+    icon: 'logos:unocss',
     iconColor: '#48b0f1'
   },
   {

src/views/plugin/map/components/GaodeMap.vue

@@ -14,12 +14,13 @@ const domRef = ref<HTMLDivElement>();
 async function renderBaiduMap() {
   if (!domRef.value) return;
   await load(true);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const map = new AMap.Map(domRef.value, {
     zoom: 11,
     center: [114.05834626586915, 22.546789983033168],
     viewMode: '3D'
   });
+  // eslint-disable-next-line no-console
+  console.log('map: ', map);
 }
 
 onMounted(() => {

src/views/plugin/map/components/TencentMap.vue

@@ -14,12 +14,13 @@ const domRef = ref<HTMLDivElement | null>(null);
 async function renderBaiduMap() {
   if (!domRef.value) return;
   await load(true);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const map = new TMap.Map(domRef.value, {
     center: new TMap.LatLng(39.98412, 116.307484),
     zoom: 11,
     viewMode: '3D'
   });
+  // eslint-disable-next-line no-console
+  console.log('map: ', map);
 }
 
 onMounted(() => {

src/views/plugin/print/index.vue

@@ -26,8 +26,8 @@ function printTable() {
 function printImage() {
   printJS({
     printable: [
-      'https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/qq_qrcode.JPG',
-      'https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/qq_qrcode.JPG'
+      'https://i.loli.net/2021/11/24/1J6REWXiHomU2kM.jpg',
+      'https://i.loli.net/2021/11/24/1J6REWXiHomU2kM.jpg'
     ],
     type: 'image',
     header: 'Multiple Images',

src/views/system-view/login/components/BindWechat/index.vue

@@ -50,9 +50,9 @@ function handleSubmit(e: MouseEvent) {
 
   formRef.value.validate(errors => {
     if (!errors) {
-      window.$message?.success('验证成功');
+      window.$message?.success('验证成功!');
     } else {
-      window.$message?.error('验证失败');
+      window.$message?.error('验证失败!');
     }
   });
 }

src/views/system-view/login/components/CodeLogin/index.vue

@@ -43,7 +43,6 @@ import { useSmsCode } from '@/hooks';
 import { formRules, getImgCodeRule } from '@/utils';
 
 const auth = useAuthStore();
-const { login } = useAuthStore();
 const { toLoginModule } = useRouterPush();
 const { label, isCounting, loading: smsLoading, getSmsCode } = useSmsCode();
 
@@ -70,8 +69,9 @@ function handleSubmit(e: MouseEvent) {
 
   formRef.value.validate(errors => {
     if (!errors) {
-      const { phone, code } = model;
-      login(phone, code, 'sms');
+      window.$message?.success('验证通过!');
+    } else {
+      window.$message?.error('验证失败');
     }
   });
 }

src/views/system-view/login/components/PwdLogin/components/OtherAccount.vue

@@ -0,0 +1,46 @@
+<template>
+  <n-space :vertical="true">
+    <n-divider class="!mb-0 text-14px text-[#666]">其他账户登录</n-divider>
+    <n-space justify="center">
+      <n-button
+        v-for="item in accounts"
+        :key="item.userName"
+        type="primary"
+        @click="login(item.userName, item.password)"
+      >
+        {{ item.label }}
+      </n-button>
+    </n-space>
+  </n-space>
+</template>
+
+<script lang="ts" setup>
+interface Emits {
+  (e: 'login', param: { userName: string; password: string }): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const accounts = [
+  {
+    label: '超级管理员',
+    userName: 'Super',
+    password: 'super123'
+  },
+  {
+    label: '管理员',
+    userName: 'Admin',
+    password: 'admin123'
+  },
+  {
+    label: '普通用户',
+    userName: 'User01',
+    password: 'user01123'
+  }
+];
+
+function login(userName: string, password: string) {
+  emit('login', { userName, password });
+}
+</script>
+<style scoped></style>

src/views/system-view/login/components/PwdLogin/components/index.ts

@@ -1,3 +1,4 @@
 import OtherLogin from './OtherLogin.vue';
+import OtherAccount from './OtherAccount.vue';
 
-export { OtherLogin };
+export { OtherLogin, OtherAccount };

src/views/system-view/login/components/PwdLogin/index.vue

@@ -1,10 +1,10 @@
 <template>
   <n-form ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
-    <n-form-item path="phone">
-      <n-input v-model:value="model.phone" placeholder="请输入手机号码" />
+    <n-form-item path="userName">
+      <n-input v-model:value="model.userName" placeholder="请输入用户名" />
     </n-form-item>
-    <n-form-item path="pwd">
-      <n-input v-model:value="model.pwd" type="password" show-password-on="click" placeholder="请输入密码" />
+    <n-form-item path="password">
+      <n-input v-model:value="model.password" type="password" show-password-on="click" placeholder="请输入密码" />
     </n-form-item>
     <n-space :vertical="true" :size="24">
       <div class="flex-y-center justify-between">
@@ -31,7 +31,7 @@
         </n-button>
       </div>
     </n-space>
-    <other-login />
+    <other-account @login="handleLoginOtherAccount" />
   </n-form>
 </template>
 
@@ -42,7 +42,7 @@ import { EnumLoginModule } from '@/enum';
 import { useAuthStore } from '@/store';
 import { useRouterPush } from '@/composables';
 import { formRules } from '@/utils';
-import { OtherLogin } from './components';
+import { OtherAccount } from './components';
 
 const auth = useAuthStore();
 const { login } = useAuthStore();
@@ -50,12 +50,11 @@ const { toLoginModule } = useRouterPush();
 
 const formRef = ref<(HTMLElement & FormInst) | null>(null);
 const model = reactive({
-  phone: '15170283876',
-  pwd: 'abc123456'
+  userName: 'Soybean',
+  password: 'soybean123'
 });
 const rules: FormRules = {
-  phone: formRules.phone,
-  pwd: formRules.pwd
+  password: formRules.pwd
 };
 const rememberMe = ref(false);
 
@@ -65,10 +64,15 @@ function handleSubmit(e: MouseEvent) {
 
   formRef.value.validate(errors => {
     if (!errors) {
-      const { phone, pwd } = model;
-      login(phone, pwd, 'pwd');
+      const { userName, password } = model;
+      login(userName, password);
     }
   });
 }
+
+function handleLoginOtherAccount(param: { userName: string; password: string }) {
+  const { userName, password } = param;
+  login(userName, password);
+}
 </script>
 <style scoped></style>

src/views/system-view/login/components/Register/index.vue

@@ -63,9 +63,9 @@ function handleSubmit(e: MouseEvent) {
   formRef.value.validate(errors => {
     if (!errors) {
       if (!agreement.value) return;
-      window.$message?.success('验证成功');
+      window.$message?.success('验证成功!');
     } else {
-      window.$message?.error('验证失败');
+      window.$message?.error('验证失败!');
     }
   });
 }

src/views/system-view/login/index.vue

@@ -6,7 +6,7 @@
       @update:dark="theme.setDarkMode"
     />
     <n-card :bordered="false" size="large" class="z-4 !w-auto rounded-20px shadow-sm">
-      <div class="w-360px <sm:w-300px">
+      <div class="w-300px sm:w-360px">
         <header class="flex-y-center justify-between">
           <div class="w-70px h-70px rounded-35px overflow-hidden">
             <system-logo class="text-70px text-primary" :fill="true" />

tsconfig.json

@@ -1,25 +1,28 @@
 {
-	"extends": "@vue/tsconfig/tsconfig.web.json",
-	"include": [
-		"src/typings/**/*.d.ts",
-		"src/**/*",
-		"src/**/*.vue",
-		"vite.config.*",
-		"build/**/*.ts",
-		"mock/**/*.ts",
-		".env-config.ts",
-		"components.d.ts"
-	],
-	"exclude": [
-		"/dist/**",
-		"node_modules"
-	],
 	"compilerOptions": {
 		"baseUrl": ".",
+    "module": "ESNext",
+    "target": "ESNext",
+    "lib": ["DOM", "ESNext"],
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noUnusedLocals": true,
+    "strictNullChecks": true,
+    "forceConsistentCasingInFileNames": true,
 		"paths": {
 			"@/*": ["./src/*"],
 			"~/*": ["./*"]
 		},
-		"types": ["node","unplugin-icons/types/vue","naive-ui/volar"]
-	}
+		"types": [
+			"vite/client",
+			"node",
+			"unplugin-icons/types/vue",
+			"naive-ui/volar"
+		]
+	},
+	"exclude": ["dist", "node_modules"],
 }

uno.config.ts

@@ -0,0 +1,79 @@
+import { defineConfig, presetMini } from 'unocss';
+
+export default defineConfig({
+  exclude: ['node_modules', '.git', './stats.html'],
+  presets: [presetMini({ dark: 'class' })],
+  shortcuts: {
+    'wh-full': 'w-full h-full',
+    'flex-center': 'flex justify-center items-center',
+    'flex-col-center': 'flex-center flex-col',
+    'flex-x-center': 'flex justify-center',
+    'flex-y-center': 'flex items-center',
+    'i-flex-center': 'inline-flex justify-center items-center',
+    'i-flex-x-center': 'inline-flex justify-center',
+    'i-flex-y-center': 'inline-flex items-center',
+    'flex-col': 'flex flex-col',
+    'flex-col-stretch': 'flex-col items-stretch',
+    'i-flex-col': 'inline-flex flex-col',
+    'i-flex-col-stretch': 'i-flex-col items-stretch',
+    'flex-1-hidden': 'flex-1 overflow-hidden',
+    'absolute-lt': 'absolute left-0 top-0',
+    'absolute-lb': 'absolute left-0 bottom-0',
+    'absolute-rt': 'absolute right-0 top-0',
+    'absolute-rb': 'absolute right-0 bottom-0',
+    'absolute-tl': 'absolute-lt',
+    'absolute-tr': 'absolute-rt',
+    'absolute-bl': 'absolute-lb',
+    'absolute-br': 'absolute-rb',
+    'absolute-center': 'absolute-lt flex-center wh-full',
+    'fixed-lt': 'fixed left-0 top-0',
+    'fixed-lb': 'fixed left-0 bottom-0',
+    'fixed-rt': 'fixed right-0 top-0',
+    'fixed-rb': 'fixed right-0 bottom-0',
+    'fixed-tl': 'fixed-lt',
+    'fixed-tr': 'fixed-rt',
+    'fixed-bl': 'fixed-lb',
+    'fixed-br': 'fixed-rb',
+    'fixed-center': 'fixed-lt flex-center wh-full',
+    'nowrap-hidden': 'whitespace-nowrap overflow-hidden',
+    'ellipsis-text': 'nowrap-hidden overflow-ellipsis',
+    'transition-base': 'transition-all duration-300 ease-in-out'
+  },
+  theme: {
+    colors: {
+      primary: 'var(--primary-color)',
+      primary_hover: 'var(--primary-color-hover)',
+      primary_pressed: 'var(--primary-color-pressed)',
+      primary_active: 'var(--primary-color-active)',
+      info: 'var(--info-color)',
+      info_hover: 'var(--info-color-hover)',
+      info_pressed: 'var(--info-color-pressed)',
+      info_active: 'var(--info-color-active)',
+      success: 'var(--success-color)',
+      success_hover: 'var(--success-color-hover)',
+      success_pressed: 'var(--success-color-pressed)',
+      success_active: 'var(--success-color-active)',
+      warning: 'var(--warning-color)',
+      warning_hover: 'var(--warning-color-hover)',
+      warning_pressed: 'var(--warning-color-pressed)',
+      warning_active: 'var(--warning-color-active)',
+      error: 'var(--error-color)',
+      error_hover: 'var(--error-color-hover)',
+      error_pressed: 'var(--error-color-pressed)',
+      error_active: 'var(--error-color-active)'
+    },
+    backgroundColor: {
+      dark: '#18181c'
+    },
+    transitionProperty: [
+      'width',
+      'height',
+      'background',
+      'background-color',
+      'padding-left',
+      'border-color',
+      'right',
+      'fill'
+    ]
+  }
+});

vite.config.ts

@@ -1,20 +1,27 @@
+import { fileURLToPath } from 'url';
 import { defineConfig, loadEnv } from 'vite';
-import { resolvePath, viteDefine, setupVitePlugins, createViteProxy } from './build';
+import { viteDefine, setupVitePlugins, createViteProxy } from './build';
+import { getEnvConfig } from './.env-config';
 
 export default defineConfig(configEnv => {
   const viteEnv = loadEnv(configEnv.mode, process.cwd()) as ImportMetaEnv;
-  const vitePath = resolvePath('./', import.meta.url);
+
+  const rootPath = fileURLToPath(new URL('./', import.meta.url));
+  const srcPath = `${rootPath}src`;
+
+  const isOpenProxy = viteEnv.VITE_HTTP_PROXY === 'true';
+  const envConfig = getEnvConfig(viteEnv);
 
   return {
     base: viteEnv.VITE_BASE_URL,
     resolve: {
       alias: {
-        '~': vitePath.root,
-        '@': vitePath.src
+        '~': rootPath,
+        '@': srcPath
       }
     },
     define: viteDefine,
-    plugins: setupVitePlugins(configEnv, vitePath.src, viteEnv),
+    plugins: setupVitePlugins(viteEnv, srcPath),
     css: {
       preprocessorOptions: {
         scss: {
@@ -26,7 +33,7 @@ export default defineConfig(configEnv => {
       host: '0.0.0.0',
       port: 3200,
       open: true,
-      proxy: createViteProxy(viteEnv)
+      proxy: createViteProxy(isOpenProxy, envConfig)
     },
     build: {
       brotliSize: false

windi.config.ts

@@ -1,91 +0,0 @@
-import { defineConfig } from 'windicss/helpers';
-
-export default defineConfig({
-  extract: {
-    include: ['src/**/*.{vue,html,jsx,tsx}', 'public/**/*.{html}', './*.html'],
-    exclude: ['node_modules', '.git', './stats.html']
-  },
-  darkMode: 'class',
-  shortcuts: {
-    'wh-full': 'w-full h-full',
-    'flex-center': 'flex justify-center items-center',
-    'flex-col-center': 'flex-center flex-col',
-    'flex-x-center': 'flex justify-center',
-    'flex-y-center': 'flex items-center',
-    'i-flex-center': 'inline-flex justify-center items-center',
-    'i-flex-x-center': 'inline-flex justify-center',
-    'i-flex-y-center': 'inline-flex items-center',
-    'b-flex-col': 'flex flex-col',
-    'flex-col-stretch': 'b-flex-col items-stretch',
-    'i-flex-col': 'inline-flex flex-col',
-    'i-flex-col-stretch': 'i-flex-col items-stretch',
-    'flex-1-hidden': 'flex-1 overflow-hidden',
-    'absolute-lt': 'absolute left-0 top-0',
-    'absolute-lb': 'absolute left-0 bottom-0',
-    'absolute-rt': 'absolute right-0 top-0',
-    'absolute-rb': 'absolute right-0 bottom-0',
-    'absolute-tl': 'absolute-lt',
-    'absolute-tr': 'absolute-rt',
-    'absolute-bl': 'absolute-lb',
-    'absolute-br': 'absolute-rb',
-    'absolute-center': 'absolute-lt flex-center wh-full',
-    'fixed-lt': 'fixed left-0 top-0',
-    'fixed-lb': 'fixed left-0 bottom-0',
-    'fixed-rt': 'fixed right-0 top-0',
-    'fixed-rb': 'fixed right-0 bottom-0',
-    'fixed-tl': 'fixed-lt',
-    'fixed-tr': 'fixed-rt',
-    'fixed-bl': 'fixed-lb',
-    'fixed-br': 'fixed-rb',
-    'fixed-center': 'fixed left-0 top-0 flex-center wh-full',
-    'nowrap-hidden': 'whitespace-nowrap overflow-hidden',
-    'ellipsis-text': 'nowrap-hidden overflow-ellipsis',
-    'transition-base': 'transition-all duration-300 ease-in-out'
-  },
-  theme: {
-    extend: {
-      colors: {
-        primary: 'var(--primary-color)',
-        'primary-hover': 'var(--primary-color-hover)',
-        'primary-pressed': 'var(--primary-color-pressed)',
-        'primary-active': 'var(--primary-color-active)',
-        info: 'var(--info-color)',
-        'info-hover': 'var(--info-color-hover)',
-        'info-pressed': 'var(--info-color-pressed)',
-        'info-active': 'var(--info-color-active)',
-        success: 'var(--success-color)',
-        'success-hover': 'var(--success-color-hover)',
-        'success-pressed': 'var(--success-color-pressed)',
-        'success-active': 'var(--success-color-active)',
-        warning: 'var(--warning-color)',
-        'warning-hover': 'var(--warning-color-hover)',
-        'warning-pressed': 'var(--warning-color-pressed)',
-        'warning-active': 'var(--warning-color-active)',
-        error: 'var(--error-color)',
-        'error-hover': 'var(--error-color-hover)',
-        'error-pressed': 'var(--error-color-pressed)',
-        'error-active': 'var(--error-color-active)'
-      },
-      backgroundColor: {
-        dark: '#18181c',
-        'dark-base': '#101014'
-      },
-      textColor: {
-        'black-base': '#333639',
-        'white-base': 'rgba(255, 255, 255, 0.82)'
-      },
-      transitionProperty: [
-        'width',
-        'height',
-        'background',
-        'background-color',
-        'padding-left',
-        'border-color',
-        'right',
-        'fill'
-      ]
-    }
-  },
-  variants: {},
-  plugins: []
-});