Merge pull request #82 from tclyjy/main

feat(layouts): 添加侧边栏/头部的反转模式来增加对比度

.env

@@ -6,4 +6,7 @@ VITE_APP_TITLE=Soybean管理系统
 
 VITE_APP_DESC=SoybeanAdmin是一个中后台管理系统模版
 
-VITE_HTTP_PROXY=true
+# 权限路由模式: static ｜ dynamic
+VITE_AUTH_ROUTE_MODE=dynamic
+
+VITE_VISUALIZER=false

.env-config.ts

@@ -9,20 +9,20 @@ type ServiceEnv = Record<
   }
 >;
 
-/** 请求的环境 */
+/** 环境配置 */
 const serviceEnvConfig: ServiceEnv = {
   dev: {
     url: 'http://localhost:8080',
-    proxy: '/api',
+    proxy: '/api'
   },
   test: {
     url: 'http://localhost:8080',
-    proxy: '/api',
+    proxy: '/api'
   },
   prod: {
     url: 'http://localhost:8080',
-    proxy: '/api',
-  },
+    proxy: '/api'
+  }
 };
 
 /**
@@ -32,7 +32,7 @@ const serviceEnvConfig: ServiceEnv = {
 export function getEnvConfig(env: ImportMetaEnv) {
   const { VITE_ENV_TYPE = 'dev' } = env;
   const envConfig = {
-    http: serviceEnvConfig[VITE_ENV_TYPE],
+    http: serviceEnvConfig[VITE_ENV_TYPE]
   };
   return envConfig;
 }

.env.development

@@ -1,2 +1 @@
-# 是否开启打包文件大小结果分析
-VITE_VISUALIZER=false
+VITE_HTTP_PROXY=true

.env.production

@@ -0,0 +1 @@
+

.eslintignore

@@ -13,3 +13,4 @@ lib
 .local
 package.json
 !.env-config.ts
+components.d.ts

.eslintrc.js

@@ -2,19 +2,19 @@ module.exports = {
   env: {
     browser: true,
     es2021: true,
-    'vue/setup-compiler-macros': true,
+    'vue/setup-compiler-macros': true
   },
   globals: {
     PROJECT_BUILD_TIME: 'readonly',
     AMap: 'readonly',
     BMap: 'readonly',
-    TMap: 'readonly',
+    TMap: 'readonly'
   },
   parser: 'vue-eslint-parser',
   parserOptions: {
     ecmaVersion: 12,
     parser: '@typescript-eslint/parser',
-    sourceType: 'module',
+    sourceType: 'module'
   },
   plugins: ['vue', '@typescript-eslint'],
   extends: [
@@ -24,7 +24,7 @@ module.exports = {
     'plugin:prettier/recommended',
     '@vue/eslint-config-typescript/recommended',
     '@vue/eslint-config-prettier',
-    '@vue/typescript/recommended',
+    '@vue/typescript/recommended'
   ],
   rules: {
     'import/extensions': 'off',
@@ -38,22 +38,22 @@ module.exports = {
           {
             pattern: 'vue',
             group: 'external',
-            position: 'before',
+            position: 'before'
           },
           {
             pattern: 'vue-router',
             group: 'external',
-            position: 'before',
+            position: 'before'
           },
           {
             pattern: 'vuex',
             group: 'external',
-            position: 'before',
+            position: 'before'
           },
           {
             pattern: 'pinia',
             group: 'external',
-            position: 'before',
+            position: 'before'
           },
           // ui framework, such as "naive-ui"
           // {
@@ -64,92 +64,92 @@ module.exports = {
           {
             pattern: '@/config',
             group: 'internal',
-            position: 'before',
+            position: 'before'
           },
           {
             pattern: '@/settings',
             group: 'internal',
-            position: 'before',
+            position: 'before'
           },
           {
             pattern: '@/enum',
             group: 'internal',
-            position: 'before',
+            position: 'before'
           },
           {
             pattern: '@/plugins',
             group: 'internal',
-            position: 'before',
+            position: 'before'
           },
           {
             pattern: '@/layouts',
             group: 'internal',
-            position: 'before',
+            position: 'before'
           },
           {
             pattern: '@/views',
             group: 'internal',
-            position: 'before',
+            position: 'before'
           },
           {
             pattern: '@/components',
             group: 'internal',
-            position: 'before',
+            position: 'before'
           },
           {
             pattern: '@/router',
             group: 'internal',
-            position: 'before',
+            position: 'before'
           },
           {
             pattern: '@/store',
             group: 'internal',
-            position: 'before',
+            position: 'before'
           },
           {
             pattern: '@/composables',
             group: 'internal',
-            position: 'before',
+            position: 'before'
           },
           {
             pattern: '@/hooks',
             group: 'internal',
-            position: 'before',
+            position: 'before'
           },
           {
             pattern: '@/service',
             group: 'internal',
-            position: 'before',
+            position: 'before'
           },
           {
             pattern: '@/utils',
             group: 'internal',
-            position: 'before',
+            position: 'before'
           },
           {
             pattern: '@/assets',
             group: 'internal',
-            position: 'before',
+            position: 'before'
           },
           {
             pattern: '@/**',
             group: 'internal',
-            position: 'before',
+            position: 'before'
           },
           {
             pattern: '@/interface',
             group: 'internal',
-            position: 'before',
-          },
+            position: 'before'
+          }
         ],
         pathGroupsExcludedImportTypes: [
           'vue',
           'vue-router',
           'vuex',
-          'pinia',
+          'pinia'
           // 'naive-ui'
-        ],
-      },
+        ]
+      }
     ],
     'import/no-unresolved': 'off',
     'import/prefer-default-export': 'off',
@@ -158,8 +158,8 @@ module.exports = {
       'error',
       {
         props: true,
-        ignorePropertyModificationsFor: ['state', 'acc', 'e'],
-      },
+        ignorePropertyModificationsFor: ['state', 'acc', 'e']
+      }
     ],
     'no-plusplus': 'off',
     'no-shadow': 'off',
@@ -168,44 +168,44 @@ module.exports = {
     'vue/multi-word-component-names': [
       'error',
       {
-        ignores: ['index'],
-      },
+        ignores: ['index']
+      }
     ],
-
     '@typescript-eslint/ban-types': [
       'error',
       {
         types: {
           '{}': {
             message: 'Use object instead',
-            fixWith: 'object',
-          },
-        },
-      },
+            fixWith: 'object'
+          }
+        }
+      }
     ],
     '@typescript-eslint/no-empty-interface': [
       'error',
       {
-        allowSingleExtends: true,
-      },
+        allowSingleExtends: true
+      }
     ],
     '@typescript-eslint/no-explicit-any': 'off',
+    '@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': ['error', { classes: true, functions: false, typedefs: false }]
   },
   overrides: [
     {
       files: ['*.vue'],
       rules: {
-        'no-undef': 'off',
-      },
+        'no-undef': 'off'
+      }
     },
     {
       files: ['*.html'],
       rules: {
-        'vue/comment-directive': 'off',
-      },
-    },
-  ],
+        'vue/comment-directive': 'off'
+      }
+    }
+  ]
 };

.prettierrc.js

@@ -1,5 +1,5 @@
 module.exports = { // https://prettier.io/docs/en/options.html
-  arrowParens: 'always',
+  arrowParens: 'avoid',
   bracketSameLine: false,
   bracketSpacing: true,
   embeddedLanguageFormatting: 'auto',
@@ -13,7 +13,7 @@ module.exports = { // https://prettier.io/docs/en/options.html
   semi: true,
   singleQuote: true,
   tabWidth: 2,
-  trailingComma: 'es5',
+  trailingComma: 'none',
   useTabs: false,
   vueIndentScriptAndStyle: false,
   overrides: [

.vscode/settings.json

@@ -69,6 +69,8 @@
 		"composables": "hook",
 		"directive": "tools",
 		"directives": "tools",
-		"business": "core"
+		"business": "core",
+		"request": "api",
+		"adapter": "middleware"
 	}
 }

README.md

@@ -50,16 +50,23 @@ Soybean Admin  是一个基于 Vue3、Vite、TypeScript、Naive UI 的免费中
 
 ## 开发计划
 
-- [ ] 示例页面完善
+- [x] 添加前端静态路由
+- [ ] 集成unocss替换windicss(新分支unocss)
+- [ ] 用户角色切换示例、按钮级别权限指令
+- [ ] 最近功能的有关文档更新
+- [ ] 引入ECharts替换AntV G2Plot
+- [ ] 性能优化(优化递归函数)
+- [ ] 精简版(新分支thin)
 - [ ] 表单、表格示例
 - [ ] 添加锁屏组件、全局Iframe组件
-- [ ] 用户角色切换示例、按钮级别权限指令
-- [ ] 性能优化(优化递归函数)
-- [ ] element-plus版本
+- [ ] 示例页面完善
 - [ ] 其他UI版本
+- [ ] element-plus版本
 - [ ] soybean-admin cli工具(选择不同UI)
 - [ ] 前端可视化创建路由页面
-- [ ] soybean-admin 后台nodejs服务
+- [ ] soybean-admin 后台服务java版: [soybean-admin-java](https://github.com/honghuangdc/soybean-admin-java)
+- [ ] soybean-admin 后台服务go版: [soybean-admin-go](https://github.com/honghuangdc/soybean-admin-go)
+- [ ] soybean-admin 后台服务nodejs版: [soybean-admin-nestjs](https://github.com/honghuangdc/soybean-admin-nestjs)
 
 ## 安装使用
 
@@ -87,6 +94,12 @@ pnpm dev
 pnpm build
 ```
 
+::: warning 注意
+
+**本地环境需要安装 pnpm 6.x 、Node.js 14.x 和 Git**
+
+:::
+
 ## 如何贡献
 
 非常欢迎您的加入！[提一个 Issue](https://github.com/honghuangdc/soybean-admin/issues/new) 或者提交一个 Pull Request。
@@ -119,10 +132,10 @@ pnpm i -g commitizen
 
 `Soybean Admin` 是完全开源免费的项目，在帮助开发者更方便地进行中大型管理系统开发，同时也提供微信和QQ交流群，使用问题欢迎在群内提问。
 
+- 本人微信号：honghuangdc，欢迎来技术交流，业务咨询。
+
 - 微信交流群：
-  <div style="text-align:left">
-    <img src="https://s2.loli.net/2022/03/06/4wokvQ7R5B62Ei1.jpg" style="width:200px" />
-  </div>
+  **微信群的人数已经满200个了，无法扫码，可以添加本人的微信再邀请进入**
 
 - QQ交流群 `711301266`
 
@@ -130,8 +143,6 @@ pnpm i -g commitizen
     <img src="https://i.loli.net/2021/11/24/1J6REWXiHomU2kM.jpg" style="width:200px" />
   </div>
 
-- 本人微信号：honghuangdc，欢迎来技术交流，业务咨询。
-
 ## License
 
 [MIT © Soybean-2021](./LICENSE)

build/config/define.ts

@@ -3,6 +3,6 @@ import dayjs from 'dayjs';
 /** 项目构建时间 */
 const PROJECT_BUILD_TIME = JSON.stringify(dayjs().format('YYYY-MM-DD HH:mm:ss'));
 
-export const define = {
-  PROJECT_BUILD_TIME,
+export const viteDefine = {
+  PROJECT_BUILD_TIME
 };

build/config/index.ts

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

build/config/path.ts

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,23 @@
+import type { ProxyOptions } from 'vite';
+import { getEnvConfig } from '../../.env-config';
+
+/**
+ * 设置网络代理
+ * @param viteEnv - vite环境描述
+ */
+export function createViteProxy(viteEnv: ImportMetaEnv) {
+  const isOpenProxy = viteEnv.VITE_HTTP_PROXY === 'true';
+  if (!isOpenProxy) return undefined;
+
+  const { http } = getEnvConfig(viteEnv);
+
+  const proxy: Record<string, string | ProxyOptions> = {
+    [http.proxy]: {
+      target: http.url,
+      changeOrigin: true,
+      rewrite: path => path.replace(new RegExp(`^${http.proxy}`), '')
+    }
+  };
+
+  return proxy;
+}

build/index.ts

@@ -1,2 +1,2 @@
 export * from './plugins';
-export * from './define';
+export * from './config';

build/plugins/auto-import.ts

@@ -1,6 +1,7 @@
 import Icons from 'unplugin-icons/vite';
 import IconsResolver from 'unplugin-icons/resolver';
 import Components from 'unplugin-vue-components/vite';
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
 import { FileSystemIconLoader } from 'unplugin-icons/loaders';
 
 export default (srcPath: string) => {
@@ -8,14 +9,14 @@ export default (srcPath: string) => {
     Icons({
       compiler: 'vue3',
       customCollections: {
-        custom: FileSystemIconLoader(`${srcPath}/assets/svg`),
+        custom: FileSystemIconLoader(`${srcPath}/assets/svg`)
       },
       scale: 1,
-      defaultClass: 'inline-block',
+      defaultClass: 'inline-block'
     }),
     Components({
       dts: true,
-      resolvers: [IconsResolver({ customCollections: ['custom'], componentPrefix: 'icon' })],
-    }),
+      resolvers: [NaiveUiResolver(), IconsResolver({ customCollections: ['custom'], componentPrefix: 'icon' })]
+    })
   ];
 };

build/plugins/html.ts

@@ -1,17 +1,17 @@
 import { loadEnv } from 'vite';
 import type { ConfigEnv, PluginOption } from 'vite';
-import { createHtmlPlugin } from 'vite-plugin-html'; // html插件(使用变量、压缩)
+import { createHtmlPlugin } from 'vite-plugin-html';
 
 export default (config: ConfigEnv): PluginOption[] => {
-  const viteEnv = loadEnv(config.mode, `.env.${config.mode}`);
+  const viteEnv = loadEnv(config.mode, process.cwd());
 
   return createHtmlPlugin({
     minify: true,
     inject: {
       data: {
         appName: viteEnv.VITE_APP_NAME,
-        appTitle: viteEnv.VITE_APP_TITLE,
-      },
-    },
+        appTitle: viteEnv.VITE_APP_TITLE
+      }
+    }
   });
 };

build/plugins/mock.ts

@@ -5,5 +5,5 @@ export default viteMockServe({
   injectCode: `
 		import { setupMockServer } from '../mock';
 		setupMockServer();
-	`,
+	`
 });

build/plugins/visualizer.ts

@@ -2,5 +2,5 @@ import { visualizer } from 'rollup-plugin-visualizer';
 
 export default visualizer({
   gzipSize: true,
-  brotliSize: true,
+  brotliSize: true
 });

components.d.ts

@@ -4,45 +4,97 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
-    BetterScroll: typeof import('./src/components/custom/BetterScroll.vue')['default'];
-    CountTo: typeof import('./src/components/custom/CountTo.vue')['default'];
-    DarkModeContainer: typeof import('./src/components/common/DarkModeContainer.vue')['default'];
-    DarkModeSwitch: typeof import('./src/components/common/DarkModeSwitch.vue')['default'];
-    GithubLink: typeof import('./src/components/custom/GithubLink.vue')['default'];
-    HoverContainer: typeof import('./src/components/common/HoverContainer.vue')['default'];
-    IconAntDesignCloseOutlined: typeof import('~icons/ant-design/close-outlined')['default'];
-    IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default'];
-    IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default'];
-    IconCustomActivity: typeof import('~icons/custom/activity')['default'];
-    IconCustomAvatar: typeof import('~icons/custom/avatar')['default'];
-    IconCustomCast: typeof import('~icons/custom/cast')['default'];
-    IconCustomLogo: typeof import('~icons/custom/logo')['default'];
-    IconCustomLogoFill: typeof import('~icons/custom/logo-fill')['default'];
-    IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default'];
-    IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default'];
-    IconIcOutlineCheck: typeof import('~icons/ic/outline-check')['default'];
-    IconLineMdMenuFoldLeft: typeof import('~icons/line-md/menu-fold-left')['default'];
-    IconLineMdMenuUnfoldLeft: typeof import('~icons/line-md/menu-unfold-left')['default'];
-    IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default'];
-    IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default'];
-    IconMdiClose: typeof import('~icons/mdi/close')['default'];
-    IconMdiGithub: typeof import('~icons/mdi/github')['default'];
-    IconMdiMoonWaningCrescent: typeof import('~icons/mdi/moon-waning-crescent')['default'];
-    IconMdiPin: typeof import('~icons/mdi/pin')['default'];
-    IconMdiPinOff: typeof import('~icons/mdi/pin-off')['default'];
-    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default'];
-    IconMdiWhiteBalanceSunny: typeof import('~icons/mdi/white-balance-sunny')['default'];
-    IconPhCaretDoubleLeftBold: typeof import('~icons/ph/caret-double-left-bold')['default'];
-    IconPhCaretDoubleRightBold: typeof import('~icons/ph/caret-double-right-bold')['default'];
-    IconSelect: typeof import('./src/components/custom/IconSelect.vue')['default'];
-    IconUilSearch: typeof import('~icons/uil/search')['default'];
-    ImageVerify: typeof import('./src/components/custom/ImageVerify.vue')['default'];
-    LoadingEmptyWrapper: typeof import('./src/components/business/LoadingEmptyWrapper.vue')['default'];
-    LoginAgreement: typeof import('./src/components/business/LoginAgreement.vue')['default'];
-    NaiveProvider: typeof import('./src/components/common/NaiveProvider.vue')['default'];
-    SystemLogo: typeof import('./src/components/common/SystemLogo.vue')['default'];
-    WebSiteLink: typeof import('./src/components/custom/WebSiteLink.vue')['default'];
+    BetterScroll: typeof import('./src/components/custom/BetterScroll.vue')['default']
+    CountTo: typeof import('./src/components/custom/CountTo.vue')['default']
+    DarkModeContainer: typeof import('./src/components/common/DarkModeContainer.vue')['default']
+    DarkModeSwitch: typeof import('./src/components/common/DarkModeSwitch.vue')['default']
+    GithubLink: typeof import('./src/components/custom/GithubLink.vue')['default']
+    HoverContainer: typeof import('./src/components/common/HoverContainer.vue')['default']
+    IconAntDesignCloseOutlined: typeof import('~icons/ant-design/close-outlined')['default']
+    IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']
+    IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']
+    IconCustomActivity: typeof import('~icons/custom/activity')['default']
+    IconCustomAvatar: typeof import('~icons/custom/avatar')['default']
+    IconCustomBanner: typeof import('~icons/custom/banner')['default']
+    IconCustomCast: typeof import('~icons/custom/cast')['default']
+    IconCustomEmptyData: typeof import('~icons/custom/empty-data')['default']
+    IconCustomLogo: typeof import('~icons/custom/logo')['default']
+    IconCustomLogoFill: typeof import('~icons/custom/logo-fill')['default']
+    IconCustomNetworkError: typeof import('~icons/custom/network-error')['default']
+    IconCustomNoPermission: typeof import('~icons/custom/no-permission')['default']
+    IconCustomNotFound: typeof import('~icons/custom/not-found')['default']
+    IconCustomServiceError: typeof import('~icons/custom/service-error')['default']
+    IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
+    IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
+    IconIcOutlineCheck: typeof import('~icons/ic/outline-check')['default']
+    IconLineMdMenuFoldLeft: typeof import('~icons/line-md/menu-fold-left')['default']
+    IconLineMdMenuUnfoldLeft: typeof import('~icons/line-md/menu-unfold-left')['default']
+    IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
+    IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
+    IconMdiClose: typeof import('~icons/mdi/close')['default']
+    IconMdiGithub: typeof import('~icons/mdi/github')['default']
+    IconMdiMoonWaningCrescent: typeof import('~icons/mdi/moon-waning-crescent')['default']
+    IconMdiPin: typeof import('~icons/mdi/pin')['default']
+    IconMdiPinOff: typeof import('~icons/mdi/pin-off')['default']
+    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
+    IconMdiWechat: typeof import('~icons/mdi/wechat')['default']
+    IconMdiWhiteBalanceSunny: typeof import('~icons/mdi/white-balance-sunny')['default']
+    IconPhCaretDoubleLeftBold: typeof import('~icons/ph/caret-double-left-bold')['default']
+    IconPhCaretDoubleRightBold: typeof import('~icons/ph/caret-double-right-bold')['default']
+    IconSelect: typeof import('./src/components/custom/IconSelect.vue')['default']
+    IconUilSearch: typeof import('~icons/uil/search')['default']
+    ImageVerify: typeof import('./src/components/custom/ImageVerify.vue')['default']
+    LoadingEmptyWrapper: typeof import('./src/components/business/LoadingEmptyWrapper.vue')['default']
+    LoginAgreement: typeof import('./src/components/business/LoginAgreement.vue')['default']
+    NaiveProvider: typeof import('./src/components/common/NaiveProvider.vue')['default']
+    NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
+    NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
+    NButton: typeof import('naive-ui')['NButton']
+    NCard: typeof import('naive-ui')['NCard']
+    NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDataTable: typeof import('naive-ui')['NDataTable']
+    NDescriptions: typeof import('naive-ui')['NDescriptions']
+    NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
+    NDialogProvider: typeof import('naive-ui')['NDialogProvider']
+    NDivider: typeof import('naive-ui')['NDivider']
+    NDrawer: typeof import('naive-ui')['NDrawer']
+    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
+    NDropdown: typeof import('naive-ui')['NDropdown']
+    NEmpty: typeof import('naive-ui')['NEmpty']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
+    NGradientText: typeof import('naive-ui')['NGradientText']
+    NGrid: typeof import('naive-ui')['NGrid']
+    NGridItem: typeof import('naive-ui')['NGridItem']
+    NInput: typeof import('naive-ui')['NInput']
+    NInputGroup: typeof import('naive-ui')['NInputGroup']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
+    NList: typeof import('naive-ui')['NList']
+    NListItem: typeof import('naive-ui')['NListItem']
+    NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
+    NMenu: typeof import('naive-ui')['NMenu']
+    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+    NModal: typeof import('naive-ui')['NModal']
+    NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+    NPopover: typeof import('naive-ui')['NPopover']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSelect: typeof import('naive-ui')['NSelect']
+    NSpace: typeof import('naive-ui')['NSpace']
+    NSpin: typeof import('naive-ui')['NSpin']
+    NStatistic: typeof import('naive-ui')['NStatistic']
+    NSwitch: typeof import('naive-ui')['NSwitch']
+    NTabPane: typeof import('naive-ui')['NTabPane']
+    NTabs: typeof import('naive-ui')['NTabs']
+    NTag: typeof import('naive-ui')['NTag']
+    NThing: typeof import('naive-ui')['NThing']
+    NTimeline: typeof import('naive-ui')['NTimeline']
+    NTimelineItem: typeof import('naive-ui')['NTimelineItem']
+    NTooltip: typeof import('naive-ui')['NTooltip']
+    SystemLogo: typeof import('./src/components/common/SystemLogo.vue')['default']
+    WebSiteLink: typeof import('./src/components/custom/WebSiteLink.vue')['default']
   }
 }
 
-export {};
+export { }

index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-cmn-Hans">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />

mock/api/auth.ts

@@ -2,7 +2,7 @@ import type { MockMethod } from 'vite-plugin-mock';
 
 const token: ApiAuth.Token = {
   token: '__TEMP_TOKEN__',
-  refreshToken: '__TEMP_REFRESH_TOKEN__',
+  refreshToken: '__TEMP_REFRESH_TOKEN__'
 };
 
 const apis: MockMethod[] = [
@@ -14,9 +14,9 @@ const apis: MockMethod[] = [
       return {
         code: 200,
         message: 'ok',
-        data: true,
+        data: true
       };
-    },
+    }
   },
   // 密码登录
   {
@@ -26,9 +26,9 @@ const apis: MockMethod[] = [
       return {
         code: 200,
         message: 'ok',
-        data: token,
+        data: token
       };
-    },
+    }
   },
   // 验证码登录
   {
@@ -38,9 +38,9 @@ const apis: MockMethod[] = [
       return {
         code: 200,
         message: 'ok',
-        data: token,
+        data: token
       };
-    },
+    }
   },
   // 获取用户信息(请求头携带token)
   {
@@ -54,10 +54,10 @@ const apis: MockMethod[] = [
           userId: '0',
           userName: 'Soybean',
           userPhone: '15170283876',
-          userRole: 'super',
-        },
+          userRole: 'super'
+        }
       };
-    },
+    }
   },
   {
     url: '/mock/testToken',
@@ -67,15 +67,15 @@ const apis: MockMethod[] = [
         return {
           code: 66666,
           message: 'token 失效',
-          data: null,
+          data: null
         };
       }
       return {
         code: 200,
         message: 'ok',
-        data: true,
+        data: true
       };
-    },
+    }
   },
   {
     url: '/mock/updateToken',
@@ -84,10 +84,10 @@ const apis: MockMethod[] = [
       return {
         code: 200,
         message: 'ok',
-        data: token,
+        data: token
       };
-    },
-  },
+    }
+  }
 ];
 
 export default apis;

mock/api/demo.ts

@@ -0,0 +1,20 @@
+import type { MockMethod } from 'vite-plugin-mock';
+
+const apis: MockMethod[] = [
+  {
+    url: '/mock/apiDemoWithAdapter',
+    method: 'post',
+    response: (): Service.MockServiceResult<ApiDemo.DataWithAdapter> => {
+      return {
+        code: 200,
+        message: 'ok',
+        data: {
+          dataId: '123',
+          dataName: 'demoName'
+        }
+      };
+    }
+  }
+];
+
+export default apis;

mock/api/route.ts

@@ -13,8 +13,8 @@ const routes: AuthRoute.Route[] = [
         meta: {
           title: '分析页',
           requiresAuth: true,
-          icon: 'icon-park-outline:analysis',
-        },
+          icon: 'icon-park-outline:analysis'
+        }
       },
       {
         name: 'dashboard_workbench',
@@ -24,15 +24,15 @@ const routes: AuthRoute.Route[] = [
           title: '工作台',
           requiresAuth: true,
           permissions: ['super', 'admin'],
-          icon: 'icon-park-outline:workbench',
-        },
-      },
+          icon: 'icon-park-outline:workbench'
+        }
+      }
     ],
     meta: {
       title: '仪表盘',
       icon: 'carbon:dashboard',
-      order: 1,
-    },
+      order: 1
+    }
   },
   {
     name: 'document',
@@ -46,8 +46,8 @@ const routes: AuthRoute.Route[] = [
         meta: {
           title: 'vue文档',
           requiresAuth: true,
-          icon: 'mdi:vuejs',
-        },
+          icon: 'mdi:vuejs'
+        }
       },
       {
         name: 'document_vue-new',
@@ -56,8 +56,8 @@ const routes: AuthRoute.Route[] = [
         meta: {
           title: 'vue文档(新版)',
           requiresAuth: true,
-          icon: 'mdi:vuejs',
-        },
+          icon: 'mdi:vuejs'
+        }
       },
       {
         name: 'document_vite',
@@ -66,18 +66,8 @@ const routes: AuthRoute.Route[] = [
         meta: {
           title: 'vite文档',
           requiresAuth: true,
-          icon: 'simple-icons:vite',
-        },
-      },
-      {
-        name: 'document_naive',
-        path: '/document/naive',
-        component: 'self',
-        meta: {
-          title: 'naive文档',
-          requiresAuth: true,
-          icon: 'mdi:alpha-n-box-outline',
-        },
+          icon: 'simple-icons:vite'
+        }
       },
       {
         name: 'document_project',
@@ -86,15 +76,15 @@ const routes: AuthRoute.Route[] = [
           title: '项目文档(外链)',
           requiresAuth: true,
           icon: 'mdi:file-link-outline',
-          href: 'https://docs.soybean.pro/',
-        },
-      },
+          href: 'https://docs.soybean.pro/'
+        }
+      }
     ],
     meta: {
       title: '文档',
       icon: 'carbon:document',
-      order: 2,
-    },
+      order: 2
+    }
   },
   {
     name: 'component',
@@ -108,8 +98,8 @@ const routes: AuthRoute.Route[] = [
         meta: {
           title: '按钮',
           requiresAuth: true,
-          icon: 'ic:baseline-radio-button-checked',
-        },
+          icon: 'ic:baseline-radio-button-checked'
+        }
       },
       {
         name: 'component_card',
@@ -118,8 +108,8 @@ const routes: AuthRoute.Route[] = [
         meta: {
           title: '卡片',
           requiresAuth: true,
-          icon: 'mdi:card-outline',
-        },
+          icon: 'mdi:card-outline'
+        }
       },
       {
         name: 'component_table',
@@ -128,15 +118,15 @@ const routes: AuthRoute.Route[] = [
         meta: {
           title: '表格',
           requiresAuth: true,
-          icon: 'mdi:table-large',
-        },
-      },
+          icon: 'mdi:table-large'
+        }
+      }
     ],
     meta: {
       title: '组件示例',
       icon: 'fluent:app-store-24-regular',
-      order: 3,
-    },
+      order: 3
+    }
   },
   {
     name: 'plugin',
@@ -150,8 +140,8 @@ const routes: AuthRoute.Route[] = [
         meta: {
           title: '地图',
           requiresAuth: true,
-          icon: 'mdi:map',
-        },
+          icon: 'mdi:map'
+        }
       },
       {
         name: 'plugin_video',
@@ -160,8 +150,8 @@ const routes: AuthRoute.Route[] = [
         meta: {
           title: '视频',
           requiresAuth: true,
-          icon: 'mdi:video',
-        },
+          icon: 'mdi:video'
+        }
       },
       {
         name: 'plugin_editor',
@@ -175,8 +165,8 @@ const routes: AuthRoute.Route[] = [
             meta: {
               title: '富文本编辑器',
               requiresAuth: true,
-              icon: 'mdi:file-document-edit-outline',
-            },
+              icon: 'mdi:file-document-edit-outline'
+            }
           },
           {
             name: 'plugin_editor_markdown',
@@ -185,14 +175,14 @@ const routes: AuthRoute.Route[] = [
             meta: {
               title: 'markdown编辑器',
               requiresAuth: true,
-              icon: 'ri:markdown-line',
-            },
-          },
+              icon: 'ri:markdown-line'
+            }
+          }
         ],
         meta: {
           title: '编辑器',
-          icon: 'icon-park-outline:editor',
-        },
+          icon: 'icon-park-outline:editor'
+        }
       },
       {
         name: 'plugin_swiper',
@@ -201,8 +191,8 @@ const routes: AuthRoute.Route[] = [
         meta: {
           title: 'Swiper插件',
           requiresAuth: true,
-          icon: 'simple-icons:swiper',
-        },
+          icon: 'simple-icons:swiper'
+        }
       },
       {
         name: 'plugin_copy',
@@ -211,8 +201,8 @@ const routes: AuthRoute.Route[] = [
         meta: {
           title: '剪贴板',
           requiresAuth: true,
-          icon: 'mdi:clipboard-outline',
-        },
+          icon: 'mdi:clipboard-outline'
+        }
       },
       {
         name: 'plugin_icon',
@@ -221,8 +211,8 @@ const routes: AuthRoute.Route[] = [
         meta: {
           title: '图标',
           requiresAuth: true,
-          icon: 'ic:baseline-insert-emoticon',
-        },
+          icon: 'ic:baseline-insert-emoticon'
+        }
       },
       {
         name: 'plugin_print',
@@ -231,15 +221,15 @@ const routes: AuthRoute.Route[] = [
         meta: {
           title: '打印',
           requiresAuth: true,
-          icon: 'ic:baseline-local-printshop',
-        },
-      },
+          icon: 'ic:baseline-local-printshop'
+        }
+      }
     ],
     meta: {
       title: '插件示例',
       icon: 'clarity:plugin-line',
-      order: 4,
-    },
+      order: 4
+    }
   },
   {
     name: 'exception',
@@ -253,8 +243,8 @@ const routes: AuthRoute.Route[] = [
         meta: {
           title: '异常页403',
           requiresAuth: true,
-          icon: 'ic:baseline-block',
-        },
+          icon: 'ic:baseline-block'
+        }
       },
       {
         name: 'exception_404',
@@ -263,8 +253,8 @@ const routes: AuthRoute.Route[] = [
         meta: {
           title: '异常页404',
           requiresAuth: true,
-          icon: 'ic:baseline-web-asset-off',
-        },
+          icon: 'ic:baseline-web-asset-off'
+        }
       },
       {
         name: 'exception_500',
@@ -273,15 +263,15 @@ const routes: AuthRoute.Route[] = [
         meta: {
           title: '异常页500',
           requiresAuth: true,
-          icon: 'ic:baseline-wifi-off',
-        },
-      },
+          icon: 'ic:baseline-wifi-off'
+        }
+      }
     ],
     meta: {
       title: '异常页',
       icon: 'ant-design:exception-outlined',
-      order: 5,
-    },
+      order: 5
+    }
   },
   {
     name: 'multi-menu',
@@ -300,8 +290,8 @@ const routes: AuthRoute.Route[] = [
             meta: {
               title: '二级菜单',
               requiresAuth: true,
-              icon: 'ic:outline-menu',
-            },
+              icon: 'ic:outline-menu'
+            }
           },
           {
             name: 'multi-menu_first_second-new',
@@ -315,27 +305,27 @@ const routes: AuthRoute.Route[] = [
                 meta: {
                   title: '三级菜单',
                   requiresAuth: true,
-                  icon: 'ic:outline-menu',
-                },
-              },
+                  icon: 'ic:outline-menu'
+                }
+              }
             ],
             meta: {
               title: '二级菜单(有子菜单)',
-              icon: 'ic:outline-menu',
-            },
-          },
+              icon: 'ic:outline-menu'
+            }
+          }
         ],
         meta: {
           title: '一级菜单',
-          icon: 'ic:outline-menu',
-        },
-      },
+          icon: 'ic:outline-menu'
+        }
+      }
     ],
     meta: {
       title: '多级菜单',
       icon: 'carbon:menu',
-      order: 6,
-    },
+      order: 6
+    }
   },
   {
     name: 'about',
@@ -347,9 +337,9 @@ const routes: AuthRoute.Route[] = [
       singleLayout: 'basic',
       permissions: ['super', 'admin', 'test'],
       icon: 'fluent:book-information-24-regular',
-      order: 7,
-    },
-  },
+      order: 7
+    }
+  }
 ];
 
 function dataMiddleware(data: AuthRoute.Route[]): ApiRoute.Route {
@@ -361,7 +351,7 @@ function dataMiddleware(data: AuthRoute.Route[]): ApiRoute.Route {
 
   return {
     routes: sortRoutes(data),
-    home: routeHomeName,
+    home: routeHomeName
   };
 }
 
@@ -373,10 +363,10 @@ const apis: MockMethod[] = [
       return {
         code: 200,
         message: 'ok',
-        data: dataMiddleware(routes),
+        data: dataMiddleware(routes)
       };
-    },
-  },
+    }
+  }
 ];
 
 export default apis;

package.json

@@ -11,7 +11,7 @@
     "build:vercel": "cross-env VITE_HASH_ROUTE=true vite build",
     "preview": "vite preview --port 5050",
     "typecheck": "vue-tsc --noEmit",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
     "prepare": "husky install",
     "postinstall": "patch-package",
     "release": "standard-version",
@@ -26,44 +26,44 @@
     }
   },
   "dependencies": {
-    "@antv/g2plot": "^2.4.10",
+    "@antv/g2plot": "^2.4.15",
     "@better-scroll/core": "^2.4.2",
-    "@vueuse/core": "^8.0.0",
+    "@vueuse/core": "^8.3.1",
     "axios": "^0.26.1",
     "clipboard": "^2.0.10",
     "colord": "^2.9.2",
     "crypto-js": "^4.1.1",
-    "dayjs": "^1.10.8",
+    "dayjs": "^1.11.1",
     "form-data": "^4.0.0",
     "lodash-es": "^4.17.21",
-    "naive-ui": "^2.26.4",
-    "pinia": "^2.0.11",
+    "naive-ui": "^2.28.2",
+    "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.0.7",
+    "swiper": "^8.1.3",
     "ua-parser-js": "^1.0.2",
-    "vditor": "^3.8.12",
-    "vue": "^3.2.31",
+    "vditor": "^3.8.13",
+    "vue": "3.2.33",
     "vue-router": "^4.0.14",
-    "wangeditor": "^4.7.12",
-    "xgplayer": "^2.31.4"
+    "wangeditor": "^4.7.15",
+    "xgplayer": "^2.31.6"
   },
   "devDependencies": {
     "@amap/amap-jsapi-types": "^0.0.8",
-    "@commitlint/cli": "^16.2.1",
+    "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
-    "@iconify/json": "^2.1.14",
-    "@iconify/vue": "^3.1.4",
+    "@iconify/json": "^2.1.30",
+    "@iconify/vue": "^3.2.1",
     "@types/bmapgl": "^0.0.5",
     "@types/crypto-js": "^4.1.1",
-    "@types/node": "^17.0.21",
+    "@types/node": "^17.0.25",
     "@types/qs": "^6.9.7",
     "@types/ua-parser-js": "^0.7.36",
-    "@typescript-eslint/eslint-plugin": "^5.14.0",
-    "@typescript-eslint/parser": "^5.14.0",
-    "@vitejs/plugin-vue": "^2.2.4",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "@vitejs/plugin-vue": "^2.3.1",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "@vue/tsconfig": "^0.1.3",
@@ -71,29 +71,30 @@
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",
     "cz-customizable": "^6.3.0",
-    "eslint": "^8.11.0",
+    "eslint": "^8.13.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.5.0",
+    "eslint-plugin-vue": "^8.6.0",
     "husky": "^7.0.4",
-    "lint-staged": "^12.3.5",
+    "lint-staged": "^12.4.0",
     "mockjs": "^1.1.0",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.2",
     "rollup-plugin-visualizer": "^5.6.0",
-    "sass": "^1.49.9",
-    "typescript": "~4.6.2",
-    "unplugin-icons": "^0.13.3",
-    "unplugin-vue-components": "^0.18.0",
-    "vite": "2.8.6",
-    "vite-plugin-html": "^3.1.0",
+    "sass": "^1.50.1",
+    "typescript": "^4.6.3",
+    "unplugin-icons": "^0.14.1",
+    "unplugin-vue-components": "0.18.5",
+    "vite": "^2.9.5",
+    "vite-plugin-html": "^3.2.0",
+    "vite-plugin-html-template": "^1.1.2",
     "vite-plugin-mock": "^2.9.6",
-    "vite-plugin-windicss": "^1.8.3",
-    "vue-tsc": "^0.32.1",
-    "vueuc": "^0.4.27",
+    "vite-plugin-windicss": "^1.8.4",
+    "vue-tsc": "^0.34.9",
+    "vueuc": "^0.4.32",
     "windicss": "^3.5.1"
   }
 }

public/resource/loading.js

@@ -1,6 +1,6 @@
 /**
  * 初始化加载效果的svg格式logo
- * @param { string }id - 元素id
+ * @param {string} id - 元素id
  */
 function initSvgLogo(id) {
   const svgStr = `<svg width="128px" height="128px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
@@ -22,8 +22,7 @@ function initSvgLogo(id) {
 	<path style="fill:currentColor" d="M77.9,126.6c0,3.9-2.8,7.2-6.7,7.9c-7.8,1.5-14.8,5.9-19.7,12.2c-2.7,3.5-7.6,4.2-11.2,1.6
 	c-3.6-2.6-4.3-7.6-1.7-11.2c0.1-0.1,0.2-0.3,0.3-0.4c4.1-5.2,9.3-9.6,15.1-12.8c4.4-2.5,9.1-4.2,14-5.1
 	C73.3,117.7,77.9,121.3,77.9,126.6z" />
-</svg>
-`;
+	</svg>`;
   const appEl = document.querySelector(id);
   const div = document.createElement('div');
   div.innerHTML = svgStr;
@@ -34,11 +33,12 @@ function initSvgLogo(id) {
 
 function addThemeColorCssVars() {
   const key = '__THEME_COLOR__';
-  const themeColor = window.localStorage.getItem(key) || '#1890ff';
+  const defaultColor = '#1890ff';
+  const themeColor = window.localStorage.getItem(key) || defaultColor;
   const cssVars = `--primary-color: ${themeColor}`;
   document.documentElement.style.cssText = cssVars;
 }
 
-initSvgLogo('#loadingLogo');
-
 addThemeColorCssVars();
+
+initSvgLogo('#loadingLogo');

src/App.vue

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

src/components/business/LoadingEmptyWrapper.vue

@@ -53,7 +53,7 @@ const props = withDefaults(defineProps<Props>(), {
   emptyDesc: '暂无数据',
   iconClass: 'text-320px text-primary',
   descClass: 'text-16px text-[#666]',
-  showNetworkReload: false,
+  showNetworkReload: false
 });
 
 // 网络状态
@@ -79,7 +79,7 @@ function handleReload() {
 
 const stopHandle = watch(
   () => props.loading,
-  (newValue) => {
+  newValue => {
     // 结束加载判断一下网络状态
     if (!newValue) {
       setNetwork(window.navigator.onLine);

src/components/business/LoginAgreement.vue

@@ -23,7 +23,7 @@ interface Emits {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  value: true,
+  value: true
 });
 
 const emit = defineEmits<Emits>();
@@ -34,7 +34,7 @@ const checked = computed({
   },
   set(newValue: boolean) {
     emit('update:value', newValue);
-  },
+  }
 });
 
 function handleClickProtocol() {

src/components/common/DarkModeContainer.vue

@@ -1,10 +1,18 @@
 <template>
   <div
-    class="bg-white text-[#333639] dark:(bg-[#18181c] text-white text-opacity-82) transition-all duration-300 ease-in-out"
+    class="dark:(bg-[#18181c] text-white text-opacity-82) transition-all duration-300 ease-in-out"
+    :class="inverted ? 'bg-[#001428] text-white' : 'bg-white text-[#333639]'"
   >
     <slot></slot>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+interface Props {
+  inverted?: boolean;
+}
+withDefaults(defineProps<Props>(), {
+  inverted: false
+});
+</script>
 <style scoped></style>

src/components/common/DarkModeSwitch.vue

@@ -18,7 +18,7 @@ interface Emits {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  dark: false,
+  dark: false
 });
 
 const emit = defineEmits<Emits>();
@@ -29,7 +29,7 @@ const darkMode = computed({
   },
   set(newValue: boolean) {
     emit('update:dark', newValue);
-  },
+  }
 });
 
 function handleSwitch() {

src/components/common/HoverContainer.vue

@@ -29,7 +29,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   tooltipContent: '',
   placement: 'bottom',
-  contentClass: '',
+  contentClass: ''
 });
 
 const showTooltip = computed(() => Boolean(props.tooltipContent));

src/components/common/NaiveProvider.vue

@@ -29,7 +29,7 @@ const NaiveProviderContent = defineComponent({
   },
   render() {
     return h('div');
-  },
+  }
 });
 </script>
 <style scoped></style>

src/components/common/SystemLogo.vue

@@ -10,7 +10,7 @@ interface Props {
 }
 
 withDefaults(defineProps<Props>(), {
-  fill: false,
+  fill: false
 });
 </script>
 <style scoped></style>

src/components/custom/CountTo.vue

@@ -42,7 +42,7 @@ const props = withDefaults(defineProps<Props>(), {
   separator: ',',
   decimal: '.',
   useEasing: true,
-  transition: 'linear',
+  transition: 'linear'
 });
 
 const emit = defineEmits<{
@@ -61,7 +61,7 @@ function run() {
     duration: props.duration,
     onStarted: () => emit('on-started'),
     onFinished: () => emit('on-finished'),
-    ...(props.useEasing ? { transition: TransitionPresets[props.transition] } : {}),
+    ...(props.useEasing ? { transition: TransitionPresets[props.transition] } : {})
   });
 }
 

src/components/custom/IconSelect.vue

@@ -43,7 +43,7 @@ interface Emits {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  emptyIcon: 'mdi:apps',
+  emptyIcon: 'mdi:apps'
 });
 
 const emit = defineEmits<Emits>();
@@ -51,7 +51,7 @@ const emit = defineEmits<Emits>();
 const theme = useThemeStore();
 
 const searchValue = ref('');
-const iconsList = computed(() => props.icons.filter((v) => v.includes(searchValue.value)));
+const iconsList = computed(() => props.icons.filter(v => v.includes(searchValue.value)));
 
 const modelValue = computed({
   get() {
@@ -59,7 +59,7 @@ const modelValue = computed({
   },
   set(val: string) {
     emit('update:value', val);
-  },
+  }
 });
 
 function handleChange(iconItem: string) {

src/components/custom/ImageVerify.vue

@@ -17,7 +17,7 @@ interface Emits {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  code: '',
+  code: ''
 });
 
 const emit = defineEmits<Emits>();
@@ -26,11 +26,11 @@ const { domRef, imgCode, setImgCode, getImgCode } = useImageVerify();
 
 watch(
   () => props.code,
-  (newValue) => {
+  newValue => {
     setImgCode(newValue);
   }
 );
-watch(imgCode, (newValue) => {
+watch(imgCode, newValue => {
   emit('update:code', newValue);
 });
 

src/composables/layout.ts

@@ -18,23 +18,23 @@ export function useBasicLayout() {
     vertical: {
       showLogo: false,
       showHeaderMenu: false,
-      showMenuCollape: true,
+      showMenuCollapse: true
     },
     'vertical-mix': {
       showLogo: false,
       showHeaderMenu: false,
-      showMenuCollape: false,
+      showMenuCollapse: false
     },
     horizontal: {
       showLogo: true,
       showHeaderMenu: true,
-      showMenuCollape: false,
+      showMenuCollapse: false
     },
     'horizontal-mix': {
       showLogo: true,
       showHeaderMenu: false,
-      showMenuCollape: true,
-    },
+      showMenuCollapse: true
+    }
   };
 
   const headerProps = computed(() => layoutHeaderProps[theme.layout.mode]);
@@ -64,6 +64,6 @@ export function useBasicLayout() {
     headerProps,
     siderVisible,
     siderWidth,
-    siderCollapsedWidth,
+    siderCollapsedWidth
   };
 }

src/composables/router.ts

@@ -46,7 +46,7 @@ export function useRouterPush(inSetup = true) {
     const module: EnumType.LoginModuleKey = loginModule || 'pwd-login';
     const routeLocation: RouteLocationRaw = {
       name: routeName('login'),
-      params: { module },
+      params: { module }
     };
     const redirect = redirectUrl || route.value.fullPath;
     Object.assign(routeLocation, { query: { redirect } });
@@ -80,6 +80,6 @@ export function useRouterPush(inSetup = true) {
     toHome,
     toLogin,
     toLoginModule,
-    toLoginRedirect,
+    toLoginRedirect
   };
 }

src/composables/system.ts

@@ -16,7 +16,7 @@ export function useAppInfo(): AppInfo {
   return {
     name,
     title,
-    desc,
+    desc
   };
 }
 

src/config/service.ts

@@ -36,7 +36,7 @@ export const ERROR_STATUS = {
   503: '503: 服务不可用~',
   504: '504: 网关超时~',
   505: '505: http版本不支持该请求~',
-  [DEFAULT_REQUEST_ERROR_CODE]: DEFAULT_REQUEST_ERROR_MSG,
+  [DEFAULT_REQUEST_ERROR_CODE]: DEFAULT_REQUEST_ERROR_MSG
 };
 
 /** 不弹出错误信息的code */

src/directives/index.ts

@@ -2,6 +2,7 @@ import type { App } from 'vue';
 import setupNetworkDirective from './network';
 import setupLoginDirective from './login';
 
+/** setup custom vue directives. - [安装自定义的vue指令] */
 export function setupDirectives(app: App) {
   setupNetworkDirective(app);
   setupLoginDirective(app);

src/directives/login.ts

@@ -20,7 +20,7 @@ export default function setupLoginDirective(app: App) {
     unmounted(el: HTMLElement, binding) {
       if (binding.value === false) return;
       el.removeEventListener('click', listenerHandler);
-    },
+    }
   };
 
   app.directive('login', loginDirective);

src/directives/network.ts

@@ -18,7 +18,7 @@ export default function setupNetworkDirective(app: App) {
     unmounted(el: HTMLElement, binding) {
       if (binding.value === false) return;
       el.removeEventListener('click', listenerHandler);
-    },
+    }
   };
 
   app.directive('network', networkDirective);

src/directives/permission.ts

@@ -0,0 +1,16 @@
+import type { App, Directive } from 'vue';
+import { useAuthStore } from '@/store';
+
+export default function setupLoginDirective(app: App) {
+  const auth = useAuthStore();
+
+  const loginDirective: Directive<HTMLElement, Auth.RoleType | undefined> = {
+    mounted(el: HTMLElement, binding) {
+      if (binding.value !== auth.userInfo.userRole) {
+        el.remove();
+      }
+    }
+  };
+
+  app.directive('login', loginDirective);
+}

src/enum/business.ts

@@ -4,5 +4,5 @@ export enum EnumLoginModule {
   'code-login' = '手机验证码登录',
   'register' = '注册',
   'reset-pwd' = '重置密码',
-  'bind-wechat' = '微信绑定',
+  'bind-wechat' = '微信绑定'
 }

src/enum/common.ts

@@ -2,7 +2,7 @@
 export enum EnumContentType {
   json = 'application/json',
   formUrlencoded = 'application/x-www-form-urlencoded',
-  formData = 'multipart/form-data',
+  formData = 'multipart/form-data'
 }
 
 /** 缓存的key */
@@ -12,11 +12,11 @@ export enum EnumStorageKey {
   /** 用户token */
   'token' = '__TOKEN__',
   /** 用户刷新token */
-  'refresh-koken' = '__REFRESH_TOKEN__',
+  'refresh-token' = '__REFRESH_TOKEN__',
   /** 用户信息 */
   'user-info' = '__USER_INFO__',
   /** 多页签路由信息 */
-  'tab-routes' = '__TAB_ROUTES__',
+  'tab-routes' = '__TAB_ROUTES__'
 }
 
 /** 数据类型 */
@@ -31,5 +31,5 @@ export enum EnumDataType {
   date = '[object Date]',
   regexp = '[object RegExp]',
   set = '[object Set]',
-  map = '[object Map]',
+  map = '[object Map]'
 }

src/enum/system.ts

@@ -1,7 +1,7 @@
 /** 布局组件的名称 */
 export enum EnumLayoutComponentName {
   basic = 'basic-layout',
-  blank = 'blank-layout',
+  blank = 'blank-layout'
 }
 
 /** 布局模式 */
@@ -9,20 +9,20 @@ export enum EnumThemeLayoutMode {
   'vertical' = '左侧菜单模式',
   'horizontal' = '顶部菜单模式',
   'vertical-mix' = '左侧菜单混合模式',
-  'horizontal-mix' = '顶部菜单混合模式',
+  'horizontal-mix' = '顶部菜单混合模式'
 }
 
 /** 多页签风格 */
 export enum EnumThemeTabMode {
   'chrome' = '谷歌风格',
-  'button' = '按钮风格',
+  'button' = '按钮风格'
 }
 
 /** 水平模式的菜单位置 */
 export enum EnumThemeHorizontalMenuPosition {
   'flex-start' = '居左',
   'center' = '居中',
-  'flex-end' = '居右',
+  'flex-end' = '居右'
 }
 
 /** 过渡动画类型 */
@@ -32,5 +32,5 @@ export enum EnumThemeAnimateMode {
   'fade-slide' = '滑动',
   'fade' = '消退',
   'fade-bottom' = '底部消退',
-  'fade-scale' = '缩放消退',
+  'fade-scale' = '缩放消退'
 }

src/hooks/business/useCountDown.ts

@@ -47,6 +47,6 @@ export default function useCountDown(second: number) {
     isCounting,
     start,
     stop,
-    isComplete,
+    isComplete
   };
 }

src/hooks/business/useImageVerify.ts

@@ -26,7 +26,7 @@ export default function useImageVerify(width = 152, height = 40) {
     domRef,
     imgCode,
     setImgCode,
-    getImgCode,
+    getImgCode
   };
 }
 

src/hooks/business/useSmsCode.ts

@@ -54,6 +54,6 @@ export default function useSmsCode() {
     start,
     isCounting,
     getSmsCode,
-    loading,
+    loading
   };
 }

src/hooks/common/useBodyScroll.ts

@@ -10,7 +10,7 @@ interface ScrollBodyStyle {
 export default function useBodyScroll(duration = 300) {
   const defaultStyle: ScrollBodyStyle = {
     overflow: '',
-    paddingRight: '',
+    paddingRight: ''
   };
   function getInitBodyStyle() {
     const { overflow, paddingRight } = document.body.style;
@@ -42,6 +42,6 @@ export default function useBodyScroll(duration = 300) {
   getInitBodyStyle();
 
   return {
-    scrollBodyHandler,
+    scrollBodyHandler
   };
 }

src/hooks/common/useBoolean.ts

@@ -21,6 +21,6 @@ export default function useBoolean(initValue = false) {
     setBool,
     setTrue,
     setFalse,
-    toggle,
+    toggle
   };
 }

src/hooks/common/useContext.ts

@@ -15,6 +15,6 @@ export default function useContext<T>(contextName = 'context') {
 
   return {
     useProvide,
-    useInject,
+    useInject
   };
 }

src/hooks/common/useLoading.ts

@@ -6,6 +6,6 @@ export default function useLoading(initValue = false) {
   return {
     loading,
     startLoading,
-    endLoading,
+    endLoading
   };
 }

src/hooks/common/useLoadingEmpty.ts

@@ -9,6 +9,6 @@ export default function useLoadingEmpty(initLoading = false, initEmpty = false)
     startLoading,
     endLoading,
     empty,
-    setEmpty,
+    setEmpty
   };
 }

src/hooks/common/useModalVisible.ts

@@ -11,7 +11,7 @@ export default function useModalVisible(hideScroll = true) {
   const { scrollBodyHandler } = useBodyScroll();
 
   function modalVisibleWatcher() {
-    const stopHandle = watch(visible, async (newValue) => {
+    const stopHandle = watch(visible, async newValue => {
       scrollBodyHandler(newValue);
     });
 
@@ -28,6 +28,6 @@ export default function useModalVisible(hideScroll = true) {
     visible,
     openModal,
     closeModal,
-    toggleModal,
+    toggleModal
   };
 }

src/hooks/common/useReload.ts

@@ -13,17 +13,13 @@ export default function useReload() {
   async function handleReload(duration = 0) {
     setFalse();
     await nextTick();
-    if (duration) {
-      setTimeout(() => {
-        setTrue();
-      }, duration);
-    } else {
+    setTimeout(() => {
       setTrue();
-    }
+    }, duration);
   }
 
   return {
     reloadFlag,
-    handleReload,
+    handleReload
   };
 }

src/layouts/common/GlobalContent/index.vue

@@ -14,6 +14,7 @@
 </template>
 
 <script setup lang="ts">
+import { RouterView } from 'vue-router';
 import { useAppStore, useThemeStore, useRouteStore } from '@/store';
 
 interface Props {
@@ -22,7 +23,7 @@ interface Props {
 }
 
 withDefaults(defineProps<Props>(), {
-  showPadding: true,
+  showPadding: true
 });
 
 const app = useAppStore();

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

@@ -1,5 +1,5 @@
 <template>
-  <hover-container class="w-40px h-full" tooltip-content="全屏" @click="toggle">
+  <hover-container class="w-40px h-full" tooltip-content="全屏" content-class="hover:text-primary" @click="toggle">
     <icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-18px" />
     <icon-gridicons-fullscreen v-else class="text-18px" />
   </hover-container>

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

@@ -1,7 +1,7 @@
 <template>
-  <hover-container tooltip-content="github" class="w-40px h-full">
+  <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 text-[#666]" />
+      <icon-mdi-github class="text-20px" />
     </a>
   </hover-container>
 </template>

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

@@ -1,16 +1,23 @@
 <template>
-  <n-menu :value="activeKey" mode="horizontal" :options="menus" @update:value="handleUpdateMenu" />
+  <n-menu
+    :value="activeKey"
+    mode="horizontal"
+    :options="menus"
+    :inverted="theme.header.inverted"
+    @update:value="handleUpdateMenu"
+  />
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import type { MenuOption } from 'naive-ui';
-import { useRouteStore } from '@/store';
+import { useRouteStore, useThemeStore } from '@/store';
 import { useRouterPush } from '@/composables';
 
 const route = useRoute();
 const routeStore = useRouteStore();
+const theme = useThemeStore();
 const { routerPush } = useRouterPush();
 
 const menus = computed(() => routeStore.menus as GlobalMenuOption[]);

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

@@ -1,6 +1,6 @@
 <template>
   <n-dropdown :options="options" @select="handleDropdown">
-    <hover-container class="px-12px">
+    <hover-container class="px-12px" content-class="hover:text-primary">
       <icon-custom-avatar class="text-32px" />
       <span class="pl-8px text-16px font-medium">{{ auth.userInfo.userName }}</span>
     </hover-container>
@@ -19,17 +19,17 @@ const options = [
   {
     label: '用户中心',
     key: 'user-center',
-    icon: iconifyRender('carbon:user-avatar'),
+    icon: iconifyRender('carbon:user-avatar')
   },
   {
     type: 'divider',
-    key: 'divider',
+    key: 'divider'
   },
   {
     label: '退出登录',
     key: 'logout',
-    icon: iconifyRender('carbon:logout'),
-  },
+    icon: iconifyRender('carbon:logout')
+  }
 ];
 
 function handleDropdown(optionKey: string) {
@@ -42,7 +42,7 @@ function handleDropdown(optionKey: string) {
       negativeText: '取消',
       onPositiveClick: () => {
         auth.resetAuthStore();
-      },
+      }
     });
   }
 }

src/layouts/common/GlobalHeader/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <dark-mode-container class="global-header flex-y-center h-full">
+  <dark-mode-container class="global-header flex-y-center h-full" :inverted="theme.header.inverted">
     <global-logo v-if="showLogo" :show-title="true" class="h-full" :style="{ width: theme.sider.width + 'px' }" />
     <div v-if="!showHeaderMenu" class="flex-1-hidden flex-y-center h-full">
-      <menu-collapse v-if="showMenuCollape" />
+      <menu-collapse v-if="showMenuCollapse" />
       <global-breadcrumb v-if="theme.header.crumb.visible" />
     </div>
     <div v-else class="flex-1-hidden flex-y-center h-full" :style="{ justifyContent: theme.menu.horizontalPosition }">
@@ -29,7 +29,7 @@ import {
   GithubSite,
   FullScreen,
   ThemeMode,
-  UserAvatar,
+  UserAvatar
 } from './components';
 
 interface Props {
@@ -38,7 +38,7 @@ interface Props {
   /** 显示头部菜单 */
   showHeaderMenu: GlobalHeaderProps['showHeaderMenu'];
   /** 显示菜单折叠按钮 */
-  showMenuCollape: GlobalHeaderProps['showMenuCollape'];
+  showMenuCollapse: GlobalHeaderProps['showMenuCollapse'];
 }
 
 defineProps<Props>();

src/layouts/common/GlobalLogo/index.vue

@@ -8,6 +8,7 @@
 </template>
 
 <script setup lang="ts">
+import { RouterLink } from 'vue-router';
 import { routePath } from '@/router';
 import { useAppInfo } from '@/composables';
 

src/layouts/common/GlobalSearch/components/SearchModal.vue

@@ -5,7 +5,7 @@
     :closable="false"
     preset="card"
     footer-style="padding: 0; margin: 0"
-    class="w-630px fixed top-50px left-1/2 transform -translate-x-1/2"
+    class="w-630px fixed left-0 right-0 top-50px"
     @after-leave="handleClose"
   >
     <n-input ref="inputRef" v-model:value="keyword" clearable placeholder="请输入关键词搜索" @input="handleSearch">
@@ -60,10 +60,10 @@ const show = computed({
   },
   set(val: boolean) {
     emit('update:value', val);
-  },
+  }
 });
 
-watch(show, async (val) => {
+watch(show, async val => {
   if (val) {
     /** 自动聚焦 */
     await nextTick();
@@ -74,7 +74,7 @@ watch(show, async (val) => {
 /** 查询 */
 function search() {
   resultOptions.value = routeStore.searchMenus.filter(
-    (menu) => keyword.value && menu.meta?.title.toLocaleLowerCase().includes(keyword.value.toLocaleLowerCase().trim())
+    menu => keyword.value && menu.meta?.title.toLocaleLowerCase().includes(keyword.value.toLocaleLowerCase().trim())
   );
   if (resultOptions.value?.length > 0) {
     activePath.value = resultOptions.value[0].path;
@@ -96,7 +96,7 @@ function handleClose() {
 function handleUp() {
   const { length } = resultOptions.value;
   if (length === 0) return;
-  const index = resultOptions.value.findIndex((item) => item.path === activePath.value);
+  const index = resultOptions.value.findIndex(item => item.path === activePath.value);
   if (index === 0) {
     activePath.value = resultOptions.value[length - 1].path;
   } else {
@@ -108,7 +108,7 @@ function handleUp() {
 function handleDown() {
   const { length } = resultOptions.value;
   if (length === 0) return;
-  const index = resultOptions.value.findIndex((item) => item.path === activePath.value);
+  const index = resultOptions.value.findIndex(item => item.path === activePath.value);
   if (index + 1 === length) {
     activePath.value = resultOptions.value[0].path;
   } else {
@@ -120,7 +120,7 @@ function handleDown() {
 function handleEnter() {
   const { length } = resultOptions.value;
   if (length === 0 || activePath.value === '') return;
-  const routeItem = resultOptions.value.find((item) => item.path === activePath.value);
+  const routeItem = resultOptions.value.find(item => item.path === activePath.value);
   if (routeItem?.meta?.href) {
     window.open(activePath.value, '__blank');
   } else {

src/layouts/common/GlobalSearch/components/SearchResult.vue

@@ -6,7 +6,7 @@
           class="bg-[#e5e7eb] dark:bg-dark h-56px mt-8px px-14px rounded-4px cursor-pointer flex-y-center justify-between"
           :style="{
             background: item.path === active ? theme.themeColor : '',
-            color: item.path === active ? '#fff' : '',
+            color: item.path === active ? '#fff' : ''
           }"
           @click="handleTo"
           @mouseenter="handleMouse(item)"
@@ -47,7 +47,7 @@ const active = computed({
   },
   set(val: string) {
     emit('update:value', val);
-  },
+  }
 });
 
 /** 鼠标移入 */

src/layouts/common/GlobalSearch/index.vue

@@ -1,7 +1,12 @@
 <template>
   <div>
-    <hover-container tooltip-content="搜索" class="w-40px h-full" @click="handleSearch">
-      <icon-uil-search class="text-20px text-[#666]" />
+    <hover-container
+      class="w-40px h-full"
+      tooltip-content="搜索"
+      content-class="hover:text-primary"
+      @click="handleSearch"
+    >
+      <icon-uil-search class="text-20px" />
     </hover-container>
     <search-modal v-model:value="show" />
   </div>

src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDetail.vue

@@ -35,7 +35,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   icon: undefined,
-  isMini: false,
+  isMini: false
 });
 
 const { bool: isHover, setTrue, setFalse } = useBoolean();

src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue

@@ -49,9 +49,9 @@ const route = useRoute();
 const app = useAppStore();
 const theme = useThemeStore();
 const { routerPush } = useRouterPush();
+const { title } = useAppInfo();
 
 const showDrawer = computed(() => (props.visible && props.menus.length) || app.mixSiderFixed);
-const { title } = useAppInfo();
 
 const activeKey = computed(() => route.name as string);
 const expandedKeys = ref<string[]>([]);

src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <dark-mode-container class="flex h-full" @mouseleave="resetFirstDegreeMenus">
+  <dark-mode-container class="flex h-full" :inverted="theme.sider.inverted" @mouseleave="resetFirstDegreeMenus">
     <div class="flex-1 flex-col-stretch h-full">
       <global-logo :show-title="false" :style="{ height: theme.header.height + 'px' }" />
       <n-scrollbar class="flex-1-hidden">
@@ -42,7 +42,7 @@ function setActiveParentRouteName(routeName: string) {
 }
 
 const firstDegreeMenus = computed(() =>
-  routeStore.menus.map((item) => {
+  routeStore.menus.map(item => {
     const { routeName, label } = item;
     const icon = item?.icon;
     const hasChildren = Boolean(item.children && item.children.length);
@@ -51,13 +51,13 @@ const firstDegreeMenus = computed(() =>
       routeName,
       label,
       icon,
-      hasChildren,
+      hasChildren
     };
   })
 );
 
 function getActiveParentRouteName() {
-  firstDegreeMenus.value.some((item) => {
+  firstDegreeMenus.value.some(item => {
     const routeName = route.name as string;
     const flag = routeName?.includes(item.routeName);
     if (flag) {
@@ -83,7 +83,7 @@ function resetFirstDegreeMenus() {
 
 const activeChildMenus = computed(() => {
   const menus: GlobalMenuOption[] = [];
-  routeStore.menus.some((item) => {
+  routeStore.menus.some(item => {
     const flag = item.routeName === activeParentRouteName.value && Boolean(item.children?.length);
     if (flag) {
       menus.push(...(item.children || []));

src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue

@@ -8,6 +8,7 @@
       :options="routeStore.menus"
       :expanded-keys="expandedKeys"
       :indent="18"
+      :inverted="theme.sider.inverted"
       @update:value="handleUpdateMenu"
       @update:expanded-keys="handleUpdateExpandedKeys"
     />

src/layouts/common/GlobalSider/components/VerticalSider/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <dark-mode-container class="flex-col-stretch h-full">
+  <dark-mode-container class="flex-col-stretch h-full" :inverted="theme.sider.inverted">
     <global-logo v-if="!isHorizontalMix" :show-title="showTitle" :style="{ height: theme.header.height + 'px' }" />
     <vertical-menu />
   </dark-mode-container>

src/layouts/common/GlobalSider/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <vertical-sider v-if="!isVerticalMix" class="global-sider" />
-  <vertical-mix-sider v-else class="global-sider" />
+  <vertical-mix-sider v-if="isVerticalMix" class="global-sider" />
+  <vertical-sider v-else class="global-sider" />
 </template>
 
 <script setup lang="ts">

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

@@ -38,7 +38,7 @@ type Option = DropdownOption & {
 
 const props = withDefaults(defineProps<Props>(), {
   visible: false,
-  currentPath: '',
+  currentPath: ''
 });
 
 const emit = defineEmits<Emits>();
@@ -52,7 +52,7 @@ const dropdownVisible = computed({
   },
   set(visible: boolean) {
     emit('update:visible', visible);
-  },
+  }
 });
 
 function hide() {
@@ -64,29 +64,29 @@ const options = computed<Option[]>(() => [
     label: '重新加载',
     key: 'reload-current',
     disabled: props.currentPath !== tab.activeTab,
-    icon: iconifyRender('ant-design:reload-outlined'),
+    icon: iconifyRender('ant-design:reload-outlined')
   },
   {
     label: '关闭',
     key: 'close-current',
     disabled: props.currentPath === tab.homeTab.path,
-    icon: iconifyRender('ant-design:close-outlined'),
+    icon: iconifyRender('ant-design:close-outlined')
   },
   {
     label: '关闭其他',
     key: 'close-other',
-    icon: iconifyRender('ant-design:column-width-outlined'),
+    icon: iconifyRender('ant-design:column-width-outlined')
   },
   {
     label: '关闭左侧',
     key: 'close-left',
-    icon: iconifyRender('mdi:format-horizontal-align-left'),
+    icon: iconifyRender('mdi:format-horizontal-align-left')
   },
   {
     label: '关闭右侧',
     key: 'close-right',
-    icon: iconifyRender('mdi:format-horizontal-align-right'),
-  },
+    icon: iconifyRender('mdi:format-horizontal-align-right')
+  }
 ]);
 
 const actionMap = new Map<DropdownKey, () => void>([
@@ -94,32 +94,32 @@ const actionMap = new Map<DropdownKey, () => void>([
     'reload-current',
     () => {
       app.reloadPage();
-    },
+    }
   ],
   [
     'close-current',
     () => {
       tab.removeTab(props.currentPath);
-    },
+    }
   ],
   [
     'close-other',
     () => {
       tab.clearTab([props.currentPath]);
-    },
+    }
   ],
   [
     'close-left',
     () => {
       tab.clearLeftTab(props.currentPath);
-    },
+    }
   ],
   [
     'close-right',
     () => {
       tab.clearRightTab(props.currentPath);
-    },
-  ],
+    }
+  ]
 ]);
 
 function handleDropdown(optionKey: string) {

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

@@ -64,7 +64,7 @@ const dropdown = reactive({
   visible: false,
   x: 0,
   y: 0,
-  currentPath: '',
+  currentPath: ''
 });
 function showDropdown() {
   dropdown.visible = true;
@@ -92,7 +92,7 @@ watch(
     getActiveTabClientX();
   },
   {
-    immediate: true,
+    immediate: true
   }
 );
 

src/layouts/common/SettingDrawer/components/DrawerButton/index.vue

@@ -3,7 +3,7 @@
     type="primary"
     :class="[{ '!right-330px': app.settingDrawerVisible }, app.settingDrawerVisible ? 'ease-out' : 'ease-in']"
     class="fixed top-240px right-14px z-10000 w-42px h-42px !p-0 transition-all duration-300"
-    @click="app.toggleSettingdrawerVisible"
+    @click="app.toggleSettingDrawerVisible"
   >
     <icon-ant-design-close-outlined v-if="app.settingDrawerVisible" class="text-24px" />
     <icon-ant-design-setting-outlined v-else class="text-24px" />

src/layouts/common/SettingDrawer/components/LayoutMode/components/LayoutCheckbox.vue

@@ -44,23 +44,23 @@ const layoutConfig: LayoutConfig = {
   vertical: {
     placement: 'bottom-start',
     menuClass: 'w-1/3 h-full',
-    mainClass: 'w-2/3 h-3/4',
+    mainClass: 'w-2/3 h-3/4'
   },
   'vertical-mix': {
     placement: 'bottom',
     menuClass: 'w-1/4 h-full',
-    mainClass: 'w-2/3 h-3/4',
+    mainClass: 'w-2/3 h-3/4'
   },
   horizontal: {
     placement: 'bottom',
     menuClass: 'w-full h-1/4',
-    mainClass: 'w-full h-3/4',
+    mainClass: 'w-full h-3/4'
   },
   'horizontal-mix': {
     placement: 'bottom-end',
     menuClass: 'w-full h-1/4',
-    mainClass: 'w-2/3 h-3/4',
-  },
+    mainClass: 'w-2/3 h-3/4'
+  }
 };
 
 const activeConfig = computed(() => layoutConfig[props.mode]);

src/layouts/common/SettingDrawer/components/PageFunc/index.vue

@@ -1,6 +1,12 @@
 <template>
   <n-divider title-placement="center">界面功能</n-divider>
   <n-space vertical size="large">
+    <setting-menu label="侧边栏反转色">
+      <n-switch :value="theme.sider.inverted" @update:value="theme.setSiderInverted" />
+    </setting-menu>
+    <setting-menu label="头部反转色">
+      <n-switch :value="theme.header.inverted" @update:value="theme.setHeaderInverted" />
+    </setting-menu>
     <setting-menu label="固定头部和多页签">
       <n-switch :value="theme.fixedHeaderAndTab" @update:value="theme.setIsFixedHeaderAndTab" />
     </setting-menu>

src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorCheckbox.vue

@@ -17,7 +17,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  iconClass: 'text-14px',
+  iconClass: 'text-14px'
 });
 
 const whiteColors = ['#ffffff', '#fff', 'rgb(255,255,255)'];

src/layouts/common/SettingDrawer/components/ThemeConfig/index.vue

@@ -36,7 +36,7 @@ function clipboardEventListener() {
     window.$dialog?.success({
       title: '操作成功',
       content: '复制成功,请替换 src/settings/theme.json的内容！',
-      positiveText: '确定',
+      positiveText: '确定'
     });
   });
 }

src/main.ts

@@ -1,29 +1,21 @@
 import { createApp } from 'vue';
-import { setupAssets, setupNaiveUI } from '@/plugins';
-import { setupRouter } from '@/router';
-import { setupStore } from '@/store';
-import { setupDirectives } from '@/directives';
+import { setupImportAssets } from './plugins';
+import { setupStore } from './store';
+import { setupDirectives } from './directives';
+import { setupRouter } from './router';
 import App from './App.vue';
 
 async function setupApp() {
-  // 引入静态资源
-  setupAssets();
+  setupImportAssets();
 
   const app = createApp(App);
 
-  // 挂载pinia状态
   setupStore(app);
 
-  // 挂载自定义vue指令
   setupDirectives(app);
 
-  // 按需引入naiveUI
-  setupNaiveUI(app);
-
-  // 挂载路由
   await setupRouter(app);
 
-  // 路由准备就绪后挂载 App
   app.mount('#app');
 }
 

src/plugins/assets.ts

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

src/plugins/index.ts

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

src/plugins/naive.ts

@@ -1,103 +0,0 @@
-import type { App } from 'vue';
-import {
-  create,
-  NBreadcrumb,
-  NBreadcrumbItem,
-  NButton,
-  NCard,
-  NCheckbox,
-  NColorPicker,
-  NConfigProvider,
-  NDataTable,
-  NDescriptions,
-  NDescriptionsItem,
-  NDialogProvider,
-  NDivider,
-  NDrawer,
-  NDrawerContent,
-  NDropdown,
-  NEmpty,
-  NForm,
-  NFormItem,
-  NGradientText,
-  NGrid,
-  NGridItem,
-  NInput,
-  NInputGroup,
-  NInputNumber,
-  NList,
-  NListItem,
-  NLoadingBarProvider,
-  NModal,
-  NMenu,
-  NMessageProvider,
-  NNotificationProvider,
-  NPopover,
-  NScrollbar,
-  NSelect,
-  NSpace,
-  NStatistic,
-  NSwitch,
-  NSpin,
-  NTabs,
-  NTabPane,
-  NTag,
-  NThing,
-  NTimeline,
-  NTimelineItem,
-  NTooltip,
-} from 'naive-ui';
-
-/** 按需引入naiveUI */
-export default function setupNaiveUI(app: App) {
-  const naive = create({
-    components: [
-      NBreadcrumb,
-      NBreadcrumbItem,
-      NButton,
-      NCard,
-      NCheckbox,
-      NColorPicker,
-      NConfigProvider,
-      NDataTable,
-      NDescriptions,
-      NDescriptionsItem,
-      NDialogProvider,
-      NDivider,
-      NDrawer,
-      NDrawerContent,
-      NDropdown,
-      NEmpty,
-      NForm,
-      NFormItem,
-      NGradientText,
-      NGrid,
-      NGridItem,
-      NInput,
-      NInputGroup,
-      NInputNumber,
-      NList,
-      NListItem,
-      NLoadingBarProvider,
-      NModal,
-      NMenu,
-      NMessageProvider,
-      NNotificationProvider,
-      NPopover,
-      NScrollbar,
-      NSelect,
-      NSpace,
-      NStatistic,
-      NSwitch,
-      NSpin,
-      NTabs,
-      NTabPane,
-      NTag,
-      NThing,
-      NTimeline,
-      NTimelineItem,
-      NTooltip,
-    ],
-  });
-  app.use(naive);
-}

src/router/guard/dynamic.ts

@@ -15,9 +15,9 @@ export async function createDynamicRouteGuard(
   const route = useRouteStore();
   const isLogin = Boolean(getToken());
 
-  // 初始化动态路由
-  if (!route.isAddedDynamicRoute) {
-    // 未登录情况下直接回到登录页，登录成功后再加载动态路由
+  // 初始化权限路由
+  if (!route.isInitedAuthRoute) {
+    // 未登录情况下直接回到登录页，登录成功后再加载权限路由
     if (!isLogin) {
       if (to.name === routeName('login')) {
         next();
@@ -28,18 +28,19 @@ export async function createDynamicRouteGuard(
       return false;
     }
 
-    await route.initDynamicRoute(router);
+    await route.initAuthRoute(router);
 
     if (to.name === routeName('not-found-page')) {
-      // 动态路由没有加载导致被not-found-page路由捕获，等待动态路由加载好了，回到之前的路由
+      // 动态路由没有加载导致被not-found-page路由捕获，等待权限路由加载好了，回到之前的路由
       next({ path: to.fullPath, replace: true, query: to.query });
       return false;
     }
-    // 动态路由已经加载，仍然未找到，重定向到not-found
-    if (to.name === routeName('not-found-page')) {
-      next({ name: routeName('not-found'), replace: true });
-      return false;
-    }
+  }
+
+  // 权限路由已经加载，仍然未找到，重定向到not-found
+  if (to.name === routeName('not-found-page')) {
+    next({ name: routeName('not-found'), replace: true });
+    return false;
   }
 
   return true;

src/router/guard/index.ts

@@ -13,7 +13,7 @@ export function createRouterGuard(router: Router) {
     // 页面跳转权限处理
     await createPermissionGuard(to, from, next, router);
   });
-  router.afterEach((to) => {
+  router.afterEach(to => {
     // 设置document title
     useTitle(to.meta.title);
     // 结束 loadingBar

src/router/guard/permission.ts

@@ -34,14 +34,14 @@ export async function createPermissionGuard(
       isLogin && to.name === routeName('login'),
       () => {
         next({ name: routeName('root') });
-      },
+      }
     ],
     // 不需要登录权限的页面直接通行
     [
       !needLogin,
       () => {
         next();
-      },
+      }
     ],
     // 未登录状态进入需要登录权限的页面
     [
@@ -49,22 +49,22 @@ export async function createPermissionGuard(
       () => {
         const redirect = to.fullPath;
         next({ name: routeName('login'), query: { redirect } });
-      },
+      }
     ],
     // 登录状态进入需要登录权限的页面，有权限直接通行
     [
       isLogin && needLogin && hasPermission,
       () => {
         next();
-      },
+      }
     ],
     [
       // 登录状态进入需要登录权限的页面，无权限，重定向到无权限页面
       isLogin && needLogin && !hasPermission,
       () => {
         next({ name: routeName('no-permission') });
-      },
-    ],
+      }
+    ]
   ];
 
   exeStrategyActions(actions);

src/router/helpers/scroll.ts

@@ -2,20 +2,20 @@ import type { RouterScrollBehavior } from 'vue-router';
 import { useTabStore } from '@/store';
 
 export const scrollBehavior: RouterScrollBehavior = (to, from) => {
-  return new Promise((resolve) => {
+  return new Promise(resolve => {
     const tab = useTabStore();
 
     if (to.hash) {
       resolve({
         el: to.hash,
-        behavior: 'smooth',
+        behavior: 'smooth'
       });
     }
 
     const { left, top } = tab.getTabScrollPosition(to.path);
     const scrollPosition = {
       left,
-      top,
+      top
     };
     const { scrollLeft, scrollTop } = document.documentElement;
 

src/router/index.ts

@@ -6,14 +6,14 @@ import { scrollBehavior } from './helpers';
 import { createRouterGuard } from './guard';
 
 const { VITE_HASH_ROUTE = 'false', VITE_BASE_URL } = import.meta.env;
-const history = VITE_HASH_ROUTE === 'true' ? createWebHashHistory(VITE_BASE_URL) : createWebHistory(VITE_BASE_URL);
 
 export const router = createRouter({
-  history,
+  history: VITE_HASH_ROUTE === 'true' ? createWebHashHistory(VITE_BASE_URL) : createWebHistory(VITE_BASE_URL),
   routes: transformAuthRoutesToVueRoutes(constantRoutes),
-  scrollBehavior,
+  scrollBehavior
 });
 
+/** setup vue router. - [安装vue路由] */
 export async function setupRouter(app: App) {
   app.use(router);
   createRouterGuard(router);
@@ -21,3 +21,4 @@ export async function setupRouter(app: App) {
 }
 
 export * from './routes';
+export * from './modules';

src/router/modules/about.ts

@@ -0,0 +1,15 @@
+const about: AuthRoute.Route = {
+  name: 'about',
+  path: '/about',
+  component: 'self',
+  meta: {
+    title: '关于',
+    requiresAuth: true,
+    singleLayout: 'basic',
+    permissions: ['super', 'admin', 'test'],
+    icon: 'fluent:book-information-24-regular',
+    order: 7
+  }
+};
+
+export default about;

src/router/modules/component.ts

@@ -0,0 +1,44 @@
+const component: AuthRoute.Route = {
+  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
+  }
+};
+
+export default component;

src/router/modules/dashboard.ts

@@ -0,0 +1,35 @@
+const dashboard: 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
+  }
+};
+
+export default dashboard;

src/router/modules/document.ts

@@ -0,0 +1,54 @@
+const document: AuthRoute.Route = {
+  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
+  }
+};
+
+export default document;

src/router/modules/exception.ts

@@ -0,0 +1,44 @@
+const exception: AuthRoute.Route = {
+  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
+  }
+};
+
+export default exception;

src/router/modules/index.ts

@@ -0,0 +1,5 @@
+import { handleModuleRoutes } from '@/utils';
+
+const modules = import.meta.globEager('./**/*.ts') as AuthRoute.RouteModule;
+
+export const routes = handleModuleRoutes(modules);

src/router/modules/multi-menu.ts

@@ -0,0 +1,56 @@
+const multiMenu: AuthRoute.Route = {
+  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
+  }
+};
+
+export default multiMenu;

src/router/modules/plugin.ts

@@ -0,0 +1,105 @@
+const plugin: AuthRoute.Route = {
+  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
+  }
+};
+
+export default plugin;

src/router/routes/index.ts

@@ -7,24 +7,24 @@ export const constantRoutes: AuthRoute.Route[] = [
     path: '/',
     redirect: '/dashboard/analysis',
     meta: {
-      title: 'Root',
-    },
+      title: 'Root'
+    }
   },
   {
     name: 'login',
     path: '/login',
     component: 'self',
-    props: (route) => {
+    props: route => {
       const moduleType = (route.params.module as EnumType.LoginModuleKey) || 'pwd-login';
       return {
-        module: moduleType,
+        module: moduleType
       };
     },
     meta: {
       title: '登录',
       dynamicPath: `/login/:module(${getLoginModuleRegExp()})?`,
-      singleLayout: 'blank',
-    },
+      singleLayout: 'blank'
+    }
   },
   {
     name: 'no-permission',
@@ -32,8 +32,8 @@ export const constantRoutes: AuthRoute.Route[] = [
     component: 'self',
     meta: {
       title: '无权限',
-      singleLayout: 'blank',
-    },
+      singleLayout: 'blank'
+    }
   },
   {
     name: 'not-found',
@@ -41,8 +41,8 @@ export const constantRoutes: AuthRoute.Route[] = [
     component: 'self',
     meta: {
       title: '未找到',
-      singleLayout: 'blank',
-    },
+      singleLayout: 'blank'
+    }
   },
   {
     name: 'service-error',
@@ -50,8 +50,8 @@ export const constantRoutes: AuthRoute.Route[] = [
     component: 'self',
     meta: {
       title: '服务器错误',
-      singleLayout: 'blank',
-    },
+      singleLayout: 'blank'
+    }
   },
   // 匹配无效路径的路由
   {
@@ -60,9 +60,9 @@ export const constantRoutes: AuthRoute.Route[] = [
     component: 'blank',
     meta: {
       title: '未找到',
-      singleLayout: 'blank',
-    },
-  },
+      singleLayout: 'blank'
+    }
+  }
 ];
 
 /** 路由名称 */

src/service/adapter/index.ts

@@ -0,0 +1,10 @@
+export function adapterOfDataWithAdapter(res: Service.RequestResult<ApiDemo.DataWithAdapter>): Demo.DataWithAdapter {
+  const { dataId, dataName } = res.data!;
+
+  const result: Demo.DataWithAdapter = {
+    id: dataId,
+    name: dataName
+  };
+
+  return result;
+}