style(project): 项目代码风格格式化

.eslintignore

@@ -1,14 +0,0 @@
-*.sh
-node_modules
-lib
-*.md
-*.woff
-*.ttf
-.vscode
-.idea
-/dist/
-/public
-/docs
-.vscode
-.local
-components.d.ts

.eslintrc.js

@@ -1,64 +1,65 @@
 module.exports = {
-  //https://eslint.org/docs/latest/
-  root: true,
-  // 环境变量 https://eslint.org/docs/latest/user-guide/configuring/language-options#specifying-environments
-  env: {
-    browser: true, //浏览器全局变量。
-    node: true, // Node.js 全局变量和 Node.js 范围。
-    es2021: true, // 所有的ECMAScript6的特性除了模块
-  },
-  // 全局变量
-  globals: {},
-  // 指定解析器与解析器配置
-  parser: 'vue-eslint-parser',
-  parserOptions: {
-    ecmaVersion: 12,
-    parser: '@typescript-eslint/parser',
-    sourceType: 'module',
-  },
-  // 想要Linting规则的插件 https://eslint.org/docs/latest/user-guide/configuring/plugins
-  plugins: ['vue', '@typescript-eslint'],
-  // 指定扩展的配置，配置支持递归扩展，支持规则的覆盖和聚合。
-  extends: [
-    'eslint:recommended',
-    'plugin:vue/vue3-recommended',
-    '@vue/eslint-config-typescript/recommended',
-    '@vue/typescript/recommended',
-  ],
-  overrides: [
-    {
-      files: ['*.vue'],
-      parser: 'vue-eslint-parser',
-      parserOptions: {
-        parser: '@typescript-eslint/parser'
-      },
-      rules: {
-        'no-undef': 'off'
+  extends: '@antfu',
+  // //https://eslint.org/docs/latest/
+  // root: true,
+  // // 环境变量 https://eslint.org/docs/latest/user-guide/configuring/language-options#specifying-environments
+  // env: {
+  //   browser: true, //浏览器全局变量。
+  //   node: true, // Node.js 全局变量和 Node.js 范围。
+  //   es2021: true, // 所有的ECMAScript6的特性除了模块
+  // },
+  // // 全局变量
+  // globals: {},
+  // // 指定解析器与解析器配置
+  // parser: 'vue-eslint-parser',
+  // parserOptions: {
+  //   ecmaVersion: 12,
+  //   parser: '@typescript-eslint/parser',
+  //   sourceType: 'module',
+  // },
+  // // 想要Linting规则的插件 https://eslint.org/docs/latest/user-guide/configuring/plugins
+  // plugins: ['vue', '@typescript-eslint'],
+  // // 指定扩展的配置，配置支持递归扩展，支持规则的覆盖和聚合。
+  // extends: [
+  //   'eslint:recommended',
+  //   'plugin:vue/vue3-recommended',
+  //   '@vue/eslint-config-typescript/recommended',
+  //   '@vue/typescript/recommended',
+  // ],
+  // overrides: [
+  //   {
+  //     files: ['*.vue'],
+  //     parser: 'vue-eslint-parser',
+  //     parserOptions: {
+  //       parser: '@typescript-eslint/parser'
+  //     },
+  //     rules: {
+  //       'no-undef': 'off'
 
-      }
-    },
-    {
-      files: ['*.html'],
-      rules: {
-        'vue/comment-directive': 'off'
-      }
-    }
-  ],
-  rules: {
-    // TSESLint docs https://typescript-eslint.io/rules/
-    'no-var': 'error', // 禁止使用var
-    'no-unused-vars': 'off', // 允许声明不使用的值
-    'no-console': 'off', // 允许出现console
-    'no-debugger': 'off', // 关闭debugger警告
-    'vue/multi-word-component-names': 0, // 关闭文件名多单词
-    // 'import/no-unresolved': ['error', { ignore: ['~icons/*'] }],
-    "@typescript-eslint/no-explicit-any": ["off"], // 允许使用any
-    "@typescript-eslint/no-empty-function": 'off', // 允许空函数
-    '@typescript-eslint/no-empty-interface': [
-      'error',
-      {
-        allowSingleExtends: true
-      }
-    ],
-  },
-};
+  //     }
+  //   },
+  //   {
+  //     files: ['*.html'],
+  //     rules: {
+  //       'vue/comment-directive': 'off'
+  //     }
+  //   }
+  // ],
+  // rules: {
+  //   // TSESLint docs https://typescript-eslint.io/rules/
+  //   'no-var': 'error', // 禁止使用var
+  //   'no-unused-vars': 'off', // 允许声明不使用的值
+  //   'no-console': 'off', // 允许出现console
+  //   'no-debugger': 'off', // 关闭debugger警告
+  //   'vue/multi-word-component-names': 0, // 关闭文件名多单词
+  //   // 'import/no-unresolved': ['error', { ignore: ['~icons/*'] }],
+  //   "@typescript-eslint/no-explicit-any": ["off"], // 允许使用any
+  //   "@typescript-eslint/no-empty-function": 'off', // 允许空函数
+  //   '@typescript-eslint/no-empty-interface': [
+  //     'error',
+  //     {
+  //       allowSingleExtends: true
+  //     }
+  //   ],
+  // },
+}

.vscode/settings.json

@@ -1,10 +1,10 @@
 {
-	"editor.tabSize": 2,
-	"editor.formatOnSave": false,
-	"eslint.format.enable": false,
-	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": true
-	},
-	"eslint.validate": ["typescript", "javascript", "vue", "html"],
-	"eslint.options": { "configFile": ".eslintrc.js" },
+  "editor.tabSize": 2,
+  "editor.formatOnSave": false,
+  "eslint.format.enable": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "eslint.validate": ["typescript", "javascript", "vue", "html"],
+  "eslint.options": { "configFile": ".eslintrc.js" }
 }

build/config/index.ts

@@ -1 +1 @@
-export * from './proxy';
+export * from './proxy'

build/config/proxy.ts

@@ -1,21 +1,21 @@
-import type { ProxyOptions } from 'vite';
+import type { ProxyOptions } from 'vite'
 /**
  * @description: 生成vite代理字段
  * @param {*} env - 环境变量配置
  */
 export function createViteProxy(envConfig: ServiceEnvConfig) {
-	const proxy: Record<string, string | ProxyOptions> = {
-		[envConfig.urlPattern]: {
-			target: envConfig.url,
-			changeOrigin: true,
-			rewrite: (path) => path.replace(new RegExp(`^${envConfig.urlPattern}`), ''),
-		},
-		[envConfig.secondUrlPattern]: {
-			target: envConfig.secondUrl,
-			changeOrigin: true,
-			rewrite: (path) => path.replace(new RegExp(`^${envConfig.secondUrlPattern}`), ''),
-		},
-	};
+  const proxy: Record<string, string | ProxyOptions> = {
+    [envConfig.urlPattern]: {
+      target: envConfig.url,
+      changeOrigin: true,
+      rewrite: path => path.replace(new RegExp(`^${envConfig.urlPattern}`), ''),
+    },
+    [envConfig.secondUrlPattern]: {
+      target: envConfig.secondUrl,
+      changeOrigin: true,
+      rewrite: path => path.replace(new RegExp(`^${envConfig.secondUrlPattern}`), ''),
+    },
+  }
 
-	return proxy;
+  return proxy
 }

build/index.ts

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

build/plugins/compress.ts

@@ -1,9 +1,9 @@
-import viteCompression from 'vite-plugin-compression'; //https://github.com/vbenjs/vite-plugin-compression/blob/main/README.zh_CN.md
+import viteCompression from 'vite-plugin-compression' // https://github.com/vbenjs/vite-plugin-compression/blob/main/README.zh_CN.md
 
 export default (env: ImportMetaEnv) => {
   // 默认使用gzip压缩
-  const { VITE_COMPRESS_TYPE = 'gzip' } = env;
+  const { VITE_COMPRESS_TYPE = 'gzip' } = env
   return viteCompression({
     algorithm: VITE_COMPRESS_TYPE, // 压缩算法
-  });
-};
+  })
+}

build/plugins/index.ts

@@ -1,10 +1,11 @@
-import type { PluginOption } from 'vite';
-import vue from './vue';
-import compress from './compress';
-import unocss from '@unocss/vite';
-import visualizer from './visualizer';
-import unplugin from './unplugin';
-import mock from './mock';
+import type { PluginOption } from 'vite'
+import unocss from '@unocss/vite'
+import vueSetupExtend from 'vite-plugin-vue-setup-extend'
+import vue from './vue'
+import compress from './compress'
+import visualizer from './visualizer'
+import unplugin from './unplugin'
+import mock from './mock'
 
 /**
  * @description: 设置vite插件配置
@@ -12,14 +13,14 @@ import mock from './mock';
  * @return {*}
  */
 export function setVitePlugins(env: ImportMetaEnv) {
-  const plugins = [...vue, unocss(), ...unplugin, mock];
+  const plugins = [...vue, unocss(), ...unplugin, mock, vueSetupExtend()]
   // 是否压缩
-  if (env.VITE_COMPRESS_OPEN) {
-    plugins.push(compress(env));
-  }
+  if (env.VITE_COMPRESS_OPEN)
+    plugins.push(compress(env))
+
   // 是否依赖分析
-  if (env.VITE_VISUALIZER) {
-    plugins.push(visualizer as PluginOption);
-  }
-  return plugins;
+  if (env.VITE_VISUALIZER)
+    plugins.push(visualizer as PluginOption)
+
+  return plugins
 }

build/plugins/mock.ts

@@ -1,9 +1,6 @@
-import { viteMockServe } from 'vite-plugin-mock'; // https://github.com/vbenjs/vite-plugin-mock/blob/main/README.zh_CN.md
+import { viteMockServe } from 'vite-plugin-mock' // https://github.com/vbenjs/vite-plugin-mock/blob/main/README.zh_CN.md
 
 export default viteMockServe({
   mockPath: 'mock',
-  injectCode: `
-		import { setupMockServer } from '../mock';
-		setupMockServer();
-	`,
-});
+  injectCode: 'import { setupMockServer } from \'../mock\';setupMockServer();',
+})

build/plugins/unplugin.ts

@@ -1,9 +1,9 @@
-import Components from 'unplugin-vue-components/vite';
-import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
-import Icons from 'unplugin-icons/vite'; // https://github.com/antfu/unplugin-icons
-import IconsResolver from 'unplugin-icons/resolver';
-import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'; // https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.zh_CN.md
-import path from 'path';
+import path from 'node:path'
+import Components from 'unplugin-vue-components/vite'
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
+import Icons from 'unplugin-icons/vite' // https://github.com/antfu/unplugin-icons
+import IconsResolver from 'unplugin-icons/resolver'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.zh_CN.md
 
 export default [
   Components({
@@ -23,4 +23,4 @@ export default [
     // inject: 'body-last',
     // customDomId: '__svg__icons__dom__',
   }),
-];
+]

build/plugins/visualizer.ts

@@ -1,6 +1,6 @@
-import { visualizer } from 'rollup-plugin-visualizer'; // https://github.com/btd/rollup-plugin-visualizer
+import { visualizer } from 'rollup-plugin-visualizer' // https://github.com/btd/rollup-plugin-visualizer
 export default visualizer({
   gzipSize: true,
   brotliSize: true,
   open: true,
-});
+})

build/plugins/vue.ts

@@ -1,6 +1,6 @@
-import vue from '@vitejs/plugin-vue';
-import vueJsx from '@vitejs/plugin-vue-jsx'; // https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx' // https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx
 
-const plugins = [vue(), vueJsx()];
+const plugins = [vue(), vueJsx()]
 
-export default plugins;
+export default plugins

commitlint.config.js

@@ -1 +1 @@
-module.exports = { extends: ['@commitlint/config-conventional'] };
+module.exports = { extends: ['@commitlint/config-conventional'] }

mock/index.ts

@@ -1,6 +1,6 @@
-import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
-import api from './module';
+import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
+import api from './module'
 
 export function setupMockServer() {
-  createProdMockServer(api);
+  createProdMockServer(api)
 }

mock/module/index.ts

@@ -1,3 +1,3 @@
-import user from './user';
+import user from './user'
 
-export default [...user];
+export default [...user]

mock/module/list.ts

@@ -1,20 +1,20 @@
-import { mock } from 'mockjs';
-import { resultSuccess } from '../utils';
+import { mock } from 'mockjs'
+import { resultSuccess } from '../utils'
 
 const userList = mock({
   'list|20': [
     {
-      id: '@id',
-      name: '@cname',
+      'id': '@id',
+      'name': '@cname',
       'age|20-36': 36,
       'gender|1': ['0', '1', null],
-      email: '@email("qq.com")',
-      address: '@county(true)	',
+      'email': '@email("qq.com")',
+      'address': '@county(true)',
       'role|1': ['super', 'admin', 'user'],
       'disabled|1': true,
     },
   ],
-});
+})
 
 export default [
   {
@@ -22,7 +22,7 @@ export default [
     timeout: 1000,
     method: 'get',
     response: () => {
-      return resultSuccess(userList.list);
+      return resultSuccess(userList.list)
     },
   },
-];
+]

mock/module/user.ts

@@ -1,494 +1,493 @@
-import Mock from 'mockjs';
-import { resultSuccess, resultFailed } from '../utils';
+import Mock from 'mockjs'
+import { resultFailed, resultSuccess } from '../utils'
 
-const Random = Mock.Random;
+const Random = Mock.Random
 
-const token = () => Random.string('upper', 32, 32);
+const token = () => Random.string('upper', 32, 32)
 
 const userData = [
-	{
-		userId: 1,
-		userName: 'super',
-		password: '123456',
-		nickName: '超级管理员大人',
-		avatar: 'https://z3.ax1x.com/2021/10/29/5jnWgf.jpg',
-		role: 'super',
-	},
-	{
-		userId: 2,
-		userName: 'admin',
-		password: '123456',
-		nickName: '管理员大人',
-		avatar: 'https://z3.ax1x.com/2021/10/29/5jnWgf.jpg',
-		role: 'admin',
-	},
-	{
-		userId: 3,
-		userName: 'user',
-		password: '123456',
-		nickName: '用户大人',
-		avatar: 'https://z3.ax1x.com/2021/10/29/5jnWgf.jpg',
-		role: 'user',
-	},
-];
+  {
+    userId: 1,
+    userName: 'super',
+    password: '123456',
+    nickName: '超级管理员大人',
+    avatar: 'https://z3.ax1x.com/2021/10/29/5jnWgf.jpg',
+    role: 'super',
+  },
+  {
+    userId: 2,
+    userName: 'admin',
+    password: '123456',
+    nickName: '管理员大人',
+    avatar: 'https://z3.ax1x.com/2021/10/29/5jnWgf.jpg',
+    role: 'admin',
+  },
+  {
+    userId: 3,
+    userName: 'user',
+    password: '123456',
+    nickName: '用户大人',
+    avatar: 'https://z3.ax1x.com/2021/10/29/5jnWgf.jpg',
+    role: 'user',
+  },
+]
 const userRoutes = [
-	{
-		name: 'dashboard',
-		path: '/dashboard',
-		meta: {
-			title: '仪表盘',
-			requiresAuth: true,
-			icon: 'icon-park-outline:analysis',
-		},
-		children: [
-			{
-				name: 'dashboard_workbench',
-				path: '/dashboard/workbench',
-				meta: {
-					title: '工作台',
-					requiresAuth: true,
-					icon: 'icon-park-outline:alarm',
-				},
-			},
-			{
-				name: 'dashboard_monitor',
-				path: '/dashboard/monitor',
-				meta: {
-					title: '监控页',
-					requiresAuth: true,
-					icon: 'icon-park-outline:anchor',
-				},
-			},
-		],
-	},
-	{
-		name: 'test',
-		path: '/test',
-		meta: {
-			title: '多级菜单演示',
-			requiresAuth: true,
-			icon: 'icon-park-outline:list',
-		},
-		children: [
-			{
-				name: 'test1',
-				path: '/test/test1',
-				meta: {
-					title: '接口功能测试',
-					requiresAuth: true,
-					icon: 'icon-park-outline:list',
-				},
-			},
-			{
-				name: 'test2',
-				path: '/test/test2',
-				meta: {
-					title: '多级菜单子页',
-					requiresAuth: true,
-					icon: 'icon-park-outline:list',
-				},
-				children: [
-					{
-						name: 'test2_detail',
-						path: '/test/test2/detail',
-						meta: {
-							title: '多级菜单的详情页',
-							requiresAuth: true,
-							icon: 'icon-park-outline:list',
-							hide: true,
-							activeMenu: '/test/test2',
-						},
-					},
-				],
-			},
-			{
-				name: 'test3',
-				path: '/test/test3',
-				meta: {
-					title: '多级菜单',
-					requiresAuth: true,
-					icon: 'icon-park-outline:list',
-				},
-				children: [
-					{
-						name: 'test4',
-						path: '/test/test3/test4',
-						meta: {
-							title: '多级菜单3-1',
-							requiresAuth: true,
-							icon: 'icon-park-outline:list',
-						},
-					},
-				],
-			},
-		],
-	},
-	{
-		name: 'list',
-		path: '/list',
-		meta: {
-			title: '列表页',
-			requiresAuth: true,
-			icon: 'icon-park-outline:list-two',
-		},
-		children: [
-			{
-				name: 'list_commonList',
-				path: '/list/commonList',
-				meta: {
-					title: '常用列表',
-					requiresAuth: true,
-					icon: 'icon-park-outline:list-view',
-				},
-			},
-			{
-				name: 'list_cardList',
-				path: '/list/cardList',
-				meta: {
-					title: '卡片列表',
-					requiresAuth: true,
-					icon: 'icon-park-outline:view-grid-list',
-				},
-			},
-		],
-	},
-	{
-		name: 'plugin',
-		path: '/plugin',
-		meta: {
-			title: '组件示例',
-			requiresAuth: true,
-			icon: 'icon-park-outline:application-one',
-		},
-		children: [
-			{
-				name: 'plugin_charts',
-				path: '/plugin/charts',
-				meta: {
-					title: '图表',
-					requiresAuth: true,
-					icon: 'icon-park-outline:chart-line',
-				},
-				children: [
-					{
-						name: 'plugin_echarts',
-						path: '/plugin/charts/echarts',
-						meta: {
-							title: 'ECharts',
-							requiresAuth: true,
-							icon: 'icon-park-outline:chart-proportion',
-						},
-					},
-					{
-						name: 'plugin_antV',
-						path: '/plugin/charts/antV',
-						meta: {
-							title: 'antV',
-							requiresAuth: true,
-							icon: 'ant-design:ant-design-outlined',
-						},
-					},
-				],
-			},
-			{
-				name: 'plugin_map',
-				path: '/plugin/map',
-				meta: {
-					title: '地图',
-					requiresAuth: true,
-					icon: 'carbon:map',
-					keepAlive: true,
-				},
-			},
-			{
-				name: 'plugin_editor',
-				path: '/plugin/editor',
-				meta: {
-					title: '编辑器',
-					requiresAuth: true,
-					icon: 'icon-park-outline:editor',
-				},
-				children: [
-					{
-						name: 'plugin_md',
-						path: '/plugin/editor/md',
-						meta: {
-							title: 'MarkDown',
-							requiresAuth: true,
-							icon: 'ri:markdown-line',
-						},
-					},
-					{
-						name: 'plugin_rich',
-						path: '/plugin/editor/rich',
-						meta: {
-							title: '富文本',
-							requiresAuth: true,
-							icon: 'icon-park-outline:edit-one',
-						},
-					},
-				],
-			},
-			{
-				name: 'plugin_clipboard',
-				path: '/plugin/clipboard',
-				meta: {
-					title: '剪贴板',
-					requiresAuth: true,
-					icon: 'icon-park-outline:clipboard',
-				},
-			},
-			{
-				name: 'plugin_icons',
-				path: '/plugin/icons',
-				meta: {
-					title: '图标',
-					requiresAuth: true,
-					icon: 'icon-park-outline:winking-face-with-open-eyes',
-				},
-			},
-			{
-				name: 'plugin_QRCode',
-				path: '/plugin/QRCode',
-				meta: {
-					title: '二维码',
-					requiresAuth: true,
-					icon: 'icon-park-outline:two-dimensional-code',
-				},
-			},
-		],
-	},
-	{
-		name: 'docments',
-		path: '/docments',
-		meta: {
-			title: '外链文档',
-			requiresAuth: true,
-			icon: 'icon-park-outline:file-doc',
-		},
-		children: [
-			{
-				name: 'docments_vue',
-				path: '/docments/vue',
-				meta: {
-					title: 'vue',
-					requiresAuth: true,
-					icon: 'logos:vue',
-				},
-			},
-			{
-				name: 'docments_vite',
-				path: '/docments/vite',
-				meta: {
-					title: 'vite',
-					requiresAuth: true,
-					icon: 'logos:vitejs',
-				},
-			},
-			{
-				name: 'docments_vueuse',
-				path: '/docments/vueuse',
-				meta: {
-					title: 'VueUse（外链）',
-					requiresAuth: true,
-					icon: 'logos:vueuse',
-					herf: 'https://vueuse.org/guide/',
-				},
-			},
-		],
-	},
-	{
-		name: 'permission',
-		path: '/permission',
-		meta: {
-			title: '权限示例',
-			requiresAuth: true,
-			icon: 'icon-park-outline:people-safe',
-		},
-		children: [
-			{
-				name: 'permission_permission',
-				path: '/permission/permission',
-				meta: {
-					title: '权限示例',
-					requiresAuth: true,
-					icon: 'icon-park-outline:right-user',
-				},
-			},
-			{
-				name: 'permission_justSuper',
-				path: '/permission/justSuper',
-				meta: {
-					title: '超管super可见',
-					requiresAuth: true,
-					roles: ['super'],
-					icon: 'icon-park-outline:wrong-user',
-				},
-			},
-		],
-	},
-	{
-		name: 'error',
-		path: '/error',
-		meta: {
-			title: '异常页',
-			requiresAuth: true,
-			icon: 'icon-park-outline:error-computer',
-		},
-		children: [
-			{
-				name: '403',
-				path: '/error/403',
-				meta: {
-					title: '403页',
-					requiresAuth: true,
-					icon: 'carbon:error',
-					order: 3,
-				},
-			},
-			{
-				name: '404',
-				path: '/error/404',
-				meta: {
-					title: '404页',
-					requiresAuth: true,
-					icon: 'icon-park-outline:error',
-					order: 2,
-				},
-			},
-			{
-				name: '500',
-				path: '/error/500',
-				meta: {
-					title: '500页',
-					requiresAuth: true,
-					icon: 'carbon:data-error',
-					order: 1,
-				},
-			},
-		],
-	},
-	{
-		name: 'setting',
-		path: '/setting',
-		meta: {
-			title: '系统设置',
-			requiresAuth: true,
-			icon: 'icon-park-outline:setting',
-		},
-		children: [
-			{
-				name: 'setting_account',
-				path: '/setting/account',
-				meta: {
-					title: '用户设置',
-					requiresAuth: true,
-					icon: 'icon-park-outline:every-user',
-				},
-			},
-			{
-				name: 'setting_dictionary',
-				path: '/setting/dictionary',
-				meta: {
-					title: '字典设置',
-					requiresAuth: true,
-					icon: 'icon-park-outline:book-one',
-				},
-			},
-			{
-				name: 'setting_menu',
-				path: '/setting/menu',
-				meta: {
-					title: '菜单设置',
-					requiresAuth: true,
-					icon: 'icon-park-outline:application-menu',
-				},
-			},
-			{
-				name: 'setting_system',
-				path: '/setting/system',
-				meta: {
-					title: '系统配置',
-					requiresAuth: true,
-					icon: 'icon-park-outline:coordinate-system',
-				},
-			},
-		],
-	},
-	{
-		name: 'userCenter',
-		path: '/userCenter',
-		meta: {
-			title: '个人中心',
-			requiresAuth: true,
-			icon: 'carbon:user-avatar-filled-alt',
-		},
-	},
-	{
-		name: 'about',
-		path: '/about',
-		meta: {
-			title: '关于',
-			requiresAuth: true,
-			icon: 'icon-park-outline:info',
-		},
-	},
-];
+  {
+    name: 'dashboard',
+    path: '/dashboard',
+    meta: {
+      title: '仪表盘',
+      requiresAuth: true,
+      icon: 'icon-park-outline:analysis',
+    },
+    children: [
+      {
+        name: 'dashboard_workbench',
+        path: '/dashboard/workbench',
+        meta: {
+          title: '工作台',
+          requiresAuth: true,
+          icon: 'icon-park-outline:alarm',
+        },
+      },
+      {
+        name: 'dashboard_monitor',
+        path: '/dashboard/monitor',
+        meta: {
+          title: '监控页',
+          requiresAuth: true,
+          icon: 'icon-park-outline:anchor',
+        },
+      },
+    ],
+  },
+  {
+    name: 'test',
+    path: '/test',
+    meta: {
+      title: '多级菜单演示',
+      requiresAuth: true,
+      icon: 'icon-park-outline:list',
+    },
+    children: [
+      {
+        name: 'test1',
+        path: '/test/test1',
+        meta: {
+          title: '接口功能测试',
+          requiresAuth: true,
+          icon: 'icon-park-outline:list',
+        },
+      },
+      {
+        name: 'test2',
+        path: '/test/test2',
+        meta: {
+          title: '多级菜单子页',
+          requiresAuth: true,
+          icon: 'icon-park-outline:list',
+        },
+        children: [
+          {
+            name: 'test2_detail',
+            path: '/test/test2/detail',
+            meta: {
+              title: '多级菜单的详情页',
+              requiresAuth: true,
+              icon: 'icon-park-outline:list',
+              hide: true,
+              activeMenu: '/test/test2',
+            },
+          },
+        ],
+      },
+      {
+        name: 'test3',
+        path: '/test/test3',
+        meta: {
+          title: '多级菜单',
+          requiresAuth: true,
+          icon: 'icon-park-outline:list',
+        },
+        children: [
+          {
+            name: 'test4',
+            path: '/test/test3/test4',
+            meta: {
+              title: '多级菜单3-1',
+              requiresAuth: true,
+              icon: 'icon-park-outline:list',
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'list',
+    path: '/list',
+    meta: {
+      title: '列表页',
+      requiresAuth: true,
+      icon: 'icon-park-outline:list-two',
+    },
+    children: [
+      {
+        name: 'list_commonList',
+        path: '/list/commonList',
+        meta: {
+          title: '常用列表',
+          requiresAuth: true,
+          icon: 'icon-park-outline:list-view',
+        },
+      },
+      {
+        name: 'list_cardList',
+        path: '/list/cardList',
+        meta: {
+          title: '卡片列表',
+          requiresAuth: true,
+          icon: 'icon-park-outline:view-grid-list',
+        },
+      },
+    ],
+  },
+  {
+    name: 'plugin',
+    path: '/plugin',
+    meta: {
+      title: '组件示例',
+      requiresAuth: true,
+      icon: 'icon-park-outline:application-one',
+    },
+    children: [
+      {
+        name: 'plugin_charts',
+        path: '/plugin/charts',
+        meta: {
+          title: '图表',
+          requiresAuth: true,
+          icon: 'icon-park-outline:chart-line',
+        },
+        children: [
+          {
+            name: 'plugin_echarts',
+            path: '/plugin/charts/echarts',
+            meta: {
+              title: 'ECharts',
+              requiresAuth: true,
+              icon: 'icon-park-outline:chart-proportion',
+            },
+          },
+          {
+            name: 'plugin_antV',
+            path: '/plugin/charts/antV',
+            meta: {
+              title: 'antV',
+              requiresAuth: true,
+              icon: 'ant-design:ant-design-outlined',
+            },
+          },
+        ],
+      },
+      {
+        name: 'plugin_map',
+        path: '/plugin/map',
+        meta: {
+          title: '地图',
+          requiresAuth: true,
+          icon: 'carbon:map',
+          keepAlive: true,
+        },
+      },
+      {
+        name: 'plugin_editor',
+        path: '/plugin/editor',
+        meta: {
+          title: '编辑器',
+          requiresAuth: true,
+          icon: 'icon-park-outline:editor',
+        },
+        children: [
+          {
+            name: 'plugin_md',
+            path: '/plugin/editor/md',
+            meta: {
+              title: 'MarkDown',
+              requiresAuth: true,
+              icon: 'ri:markdown-line',
+            },
+          },
+          {
+            name: 'plugin_rich',
+            path: '/plugin/editor/rich',
+            meta: {
+              title: '富文本',
+              requiresAuth: true,
+              icon: 'icon-park-outline:edit-one',
+            },
+          },
+        ],
+      },
+      {
+        name: 'plugin_clipboard',
+        path: '/plugin/clipboard',
+        meta: {
+          title: '剪贴板',
+          requiresAuth: true,
+          icon: 'icon-park-outline:clipboard',
+        },
+      },
+      {
+        name: 'plugin_icons',
+        path: '/plugin/icons',
+        meta: {
+          title: '图标',
+          requiresAuth: true,
+          icon: 'icon-park-outline:winking-face-with-open-eyes',
+        },
+      },
+      {
+        name: 'plugin_QRCode',
+        path: '/plugin/QRCode',
+        meta: {
+          title: '二维码',
+          requiresAuth: true,
+          icon: 'icon-park-outline:two-dimensional-code',
+        },
+      },
+    ],
+  },
+  {
+    name: 'docments',
+    path: '/docments',
+    meta: {
+      title: '外链文档',
+      requiresAuth: true,
+      icon: 'icon-park-outline:file-doc',
+    },
+    children: [
+      {
+        name: 'docments_vue',
+        path: '/docments/vue',
+        meta: {
+          title: 'vue',
+          requiresAuth: true,
+          icon: 'logos:vue',
+        },
+      },
+      {
+        name: 'docments_vite',
+        path: '/docments/vite',
+        meta: {
+          title: 'vite',
+          requiresAuth: true,
+          icon: 'logos:vitejs',
+        },
+      },
+      {
+        name: 'docments_vueuse',
+        path: '/docments/vueuse',
+        meta: {
+          title: 'VueUse（外链）',
+          requiresAuth: true,
+          icon: 'logos:vueuse',
+          herf: 'https://vueuse.org/guide/',
+        },
+      },
+    ],
+  },
+  {
+    name: 'permission',
+    path: '/permission',
+    meta: {
+      title: '权限示例',
+      requiresAuth: true,
+      icon: 'icon-park-outline:people-safe',
+    },
+    children: [
+      {
+        name: 'permission_permission',
+        path: '/permission/permission',
+        meta: {
+          title: '权限示例',
+          requiresAuth: true,
+          icon: 'icon-park-outline:right-user',
+        },
+      },
+      {
+        name: 'permission_justSuper',
+        path: '/permission/justSuper',
+        meta: {
+          title: '超管super可见',
+          requiresAuth: true,
+          roles: ['super'],
+          icon: 'icon-park-outline:wrong-user',
+        },
+      },
+    ],
+  },
+  {
+    name: 'error',
+    path: '/error',
+    meta: {
+      title: '异常页',
+      requiresAuth: true,
+      icon: 'icon-park-outline:error-computer',
+    },
+    children: [
+      {
+        name: '403',
+        path: '/error/403',
+        meta: {
+          title: '403页',
+          requiresAuth: true,
+          icon: 'carbon:error',
+          order: 3,
+        },
+      },
+      {
+        name: '404',
+        path: '/error/404',
+        meta: {
+          title: '404页',
+          requiresAuth: true,
+          icon: 'icon-park-outline:error',
+          order: 2,
+        },
+      },
+      {
+        name: '500',
+        path: '/error/500',
+        meta: {
+          title: '500页',
+          requiresAuth: true,
+          icon: 'carbon:data-error',
+          order: 1,
+        },
+      },
+    ],
+  },
+  {
+    name: 'setting',
+    path: '/setting',
+    meta: {
+      title: '系统设置',
+      requiresAuth: true,
+      icon: 'icon-park-outline:setting',
+    },
+    children: [
+      {
+        name: 'setting_account',
+        path: '/setting/account',
+        meta: {
+          title: '用户设置',
+          requiresAuth: true,
+          icon: 'icon-park-outline:every-user',
+        },
+      },
+      {
+        name: 'setting_dictionary',
+        path: '/setting/dictionary',
+        meta: {
+          title: '字典设置',
+          requiresAuth: true,
+          icon: 'icon-park-outline:book-one',
+        },
+      },
+      {
+        name: 'setting_menu',
+        path: '/setting/menu',
+        meta: {
+          title: '菜单设置',
+          requiresAuth: true,
+          icon: 'icon-park-outline:application-menu',
+        },
+      },
+      {
+        name: 'setting_system',
+        path: '/setting/system',
+        meta: {
+          title: '系统配置',
+          requiresAuth: true,
+          icon: 'icon-park-outline:coordinate-system',
+        },
+      },
+    ],
+  },
+  {
+    name: 'userCenter',
+    path: '/userCenter',
+    meta: {
+      title: '个人中心',
+      requiresAuth: true,
+      icon: 'carbon:user-avatar-filled-alt',
+    },
+  },
+  {
+    name: 'about',
+    path: '/about',
+    meta: {
+      title: '关于',
+      requiresAuth: true,
+      icon: 'icon-park-outline:info',
+    },
+  },
+]
 
 export default [
-	{
-		url: '/mock/login',
-		method: 'post',
-		response: (options: any) => {
-			const { userName = undefined, password = undefined } = options.body;
+  {
+    url: '/mock/login',
+    method: 'post',
+    response: (options: any) => {
+      const { userName = undefined, password = undefined } = options.body
 
-			if (!userName || !password) {
-				return resultFailed(null, '账号密码不全');
-			}
+      if (!userName || !password)
+        return resultFailed(null, '账号密码不全')
 
-			const userInfo = userData.find((item) => item.userName === userName && item.password === password);
+      const userInfo = userData.find(item => item.userName === userName && item.password === password)
 
-			if (userInfo) {
-				return {
-					code: 200,
-					message: 'ok',
-					data: {
-						userId: userInfo.userId,
-						token: token(),
-						refreshToken: token(),
-					},
-				};
-			}
-			return resultFailed(null, '账号密码错误');
-		},
-	},
-	{
-		url: '/mock/updateToken',
-		method: 'post',
-		response: () => {
-			return resultSuccess({ token: token(), refreshToken: token() });
-		},
-	},
-	{
-		url: '/mock/getUserInfo',
-		method: 'get',
-		response: (options: any) => {
-			const { userId = undefined } = options.query;
-			if (!userId) {
-				return resultFailed(null, '未传入用户id！');
-			}
-			const userInfo = userData.find((item) => item.userId == userId);
-			if (userInfo) {
-				return resultSuccess(userInfo);
-			}
-			return resultFailed(null, '未找到用户信息，请检查提交参数');
-		},
-	},
-	{
-		url: '/mock/getUserRoutes',
-		method: 'post',
-		response: () => {
-			return resultSuccess(userRoutes);
-		},
-	},
-];
+      if (userInfo) {
+        return {
+          code: 200,
+          message: 'ok',
+          data: {
+            userId: userInfo.userId,
+            token: token(),
+            refreshToken: token(),
+          },
+        }
+      }
+      return resultFailed(null, '账号密码错误')
+    },
+  },
+  {
+    url: '/mock/updateToken',
+    method: 'post',
+    response: () => {
+      return resultSuccess({ token: token(), refreshToken: token() })
+    },
+  },
+  {
+    url: '/mock/getUserInfo',
+    method: 'get',
+    response: (options: any) => {
+      const { userId = undefined } = options.query
+      if (!userId)
+        return resultFailed(null, '未传入用户id！')
+
+      const userInfo = userData.find(item => item.userId === userId)
+      if (userInfo)
+        return resultSuccess(userInfo)
+
+      return resultFailed(null, '未找到用户信息，请检查提交参数')
+    },
+  },
+  {
+    url: '/mock/getUserRoutes',
+    method: 'post',
+    response: () => {
+      return resultSuccess(userRoutes)
+    },
+  },
+]

mock/utils.ts

@@ -1,16 +1,16 @@
-import Mock from 'mockjs';
+import Mock from 'mockjs'
 
-export function resultSuccess(data: any, msg?:string ) {
+export function resultSuccess(data: any, msg?: string) {
   return Mock.mock({
     code: 200,
     data,
     msg: msg || 'success',
-  });
+  })
 }
-export function resultFailed(data: any, msg?: string ) {
+export function resultFailed(data: any, msg?: string) {
   return Mock.mock({
     code: 500,
     data,
     msg: msg || 'failed',
-  });
+  })
 }

package.json

@@ -1,87 +1,89 @@
 {
-	"name": "ench-admin",
-	"private": true,
-	"version": "0.0.1",
-	"description": "",
-	"author": "iam-see <chen.dev@foxmail.com> (https://github.com/iam-see/)",
-	"license": "MIT",
-	"homepage": "https://github.com/iam-see/Ench-admin",
-	"keywords": [
-		"Vue",
-		"Vue3",
-		"admin"
-	],
-	"scripts": {
-		"dev": "vite",
-		"dev:test": "vite --mode test",
-		"dev:prod": "vite --mode production",
-		"build": "vue-tsc --noEmit && vite build",
-		"preview": "vite preview",
-		"lint": "eslint . --fix",
-		"prepare": "husky install",
-		"commit": "cz",
-		"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md"
-	},
-	"config": {
-		"commitizen": {
-			"path": "./node_modules/cz-customizable"
-		}
-	},
-	"lint-staged": {
-		"*.{vue,js,jsx,ts,tsx,json}": "eslint --fix"
-	},
-	"dependencies": {
-		"@vueuse/core": "^9.13.0",
-		"@wangeditor/editor": "^5.1.23",
-		"@wangeditor/editor-for-vue": "^5.1.12",
-		"axios": "^1.3.4",
-		"crypto-js": "^4.1.1",
-		"echarts": "^5.4.1",
-		"md-editor-v3": "^2.9.3",
-		"pinia": "^2.0.33",
-		"pinia-plugin-persist": "^1.0.0",
-		"qs": "^6.11.1",
-		"vue": "^3.2.47",
-		"vue-qr": "^4.0.9",
-		"vue-router": "^4.1.6"
-	},
-	"devDependencies": {
-		"@commitlint/cli": "^17.4.1",
-		"@commitlint/config-conventional": "^17.4.0",
-		"@iconify-json/icon-park-outline": "^1.1.9",
-		"@iconify/vue": "^4.0.2",
-		"@types/crypto-js": "^4.1.1",
-		"@types/mockjs": "^1.0.7",
-		"@types/node": "^18.15.3",
-		"@types/qs": "^6.9.7",
-		"@typescript-eslint/eslint-plugin": "^5.55.0",
-		"@typescript-eslint/parser": "^5.55.0",
-		"@unocss/preset-attributify": "^0.50.4",
-		"@unocss/preset-uno": "^0.50.4",
-		"@unocss/vite": "^0.50.4",
-		"@vitejs/plugin-vue": "^4.0.0",
-		"@vitejs/plugin-vue-jsx": "^3.0.0",
-		"@vue/eslint-config-typescript": "^11.0.2",
-		"commitizen": "^4.2.6",
-		"cz-conventional-changelog": "^3.3.0",
-		"cz-customizable": "^7.0.0",
-		"eslint": "^8.31.0",
-		"eslint-import-resolver-alias": "^1.1.2",
-		"eslint-plugin-import": "^2.27.5",
-		"eslint-plugin-vue": "^9.9.0",
-		"husky": "^8.0.3",
-		"less": "^4.1.3",
-		"lint-staged": "^13.1.0",
-		"mockjs": "^1.1.0",
-		"naive-ui": "^2.34.3",
-		"rollup-plugin-visualizer": "^5.9.0",
-		"typescript": "^5.0.2",
-		"unplugin-icons": "^0.15.3",
-		"unplugin-vue-components": "^0.24.1",
-		"vite": "^4.2.1",
-		"vite-plugin-compression": "^0.5.1",
-		"vite-plugin-mock": "^2.9.6",
-		"vite-plugin-svg-icons": "^2.0.1",
-		"vue-tsc": "^1.2.0"
-	}
+  "name": "ench-admin",
+  "version": "0.0.1",
+  "private": true,
+  "description": "",
+  "author": "iam-see <chen.dev@foxmail.com> (https://github.com/iam-see/)",
+  "license": "MIT",
+  "homepage": "https://github.com/iam-see/Ench-admin",
+  "keywords": [
+    "Vue",
+    "Vue3",
+    "admin"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "dev:test": "vite --mode test",
+    "dev:prod": "vite --mode production",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --fix",
+    "prepare": "husky install",
+    "commit": "cz",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-customizable"
+    }
+  },
+  "dependencies": {
+    "@vueuse/core": "^9.13.0",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^5.1.12",
+    "axios": "^1.3.4",
+    "crypto-js": "^4.1.1",
+    "echarts": "^5.4.1",
+    "md-editor-v3": "^2.9.3",
+    "pinia": "^2.0.33",
+    "pinia-plugin-persist": "^1.0.0",
+    "qs": "^6.11.1",
+    "vue": "^3.2.47",
+    "vue-qr": "^4.0.9",
+    "vue-router": "^4.1.6"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^0.37.0",
+    "@commitlint/cli": "^17.4.1",
+    "@commitlint/config-conventional": "^17.4.0",
+    "@iconify-json/icon-park-outline": "^1.1.9",
+    "@iconify/vue": "^4.0.2",
+    "@types/crypto-js": "^4.1.1",
+    "@types/mockjs": "^1.0.7",
+    "@types/node": "^18.15.3",
+    "@types/qs": "^6.9.7",
+    "@typescript-eslint/eslint-plugin": "^5.55.0",
+    "@typescript-eslint/parser": "^5.55.0",
+    "@unocss/preset-attributify": "^0.50.4",
+    "@unocss/preset-uno": "^0.50.4",
+    "@unocss/vite": "^0.50.4",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vue/eslint-config-typescript": "^11.0.2",
+    "commitizen": "^4.2.6",
+    "cz-conventional-changelog": "^3.3.0",
+    "cz-customizable": "^7.0.0",
+    "eslint": "^8.36.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-vue": "^9.9.0",
+    "husky": "^8.0.3",
+    "less": "^4.1.3",
+    "lint-staged": "^13.1.0",
+    "mockjs": "^1.1.0",
+    "naive-ui": "^2.34.3",
+    "rollup-plugin-visualizer": "^5.9.0",
+    "typescript": "^5.0.2",
+    "unplugin-icons": "^0.15.3",
+    "unplugin-vue-components": "^0.24.1",
+    "vite": "^4.2.1",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-mock": "^2.9.6",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vue-tsc": "^1.2.0"
+  },
+  "lint-staged": {
+    "*.{vue,js,jsx,ts,tsx,json}": "eslint --fix"
+  }
 }

src/App.vue

@@ -1,3 +1,19 @@
+<script setup lang="ts">
+import type { GlobalThemeOverrides } from 'naive-ui'
+import { dateZhCN, useOsTheme, zhCN } from 'naive-ui'
+import { useAppStore } from './store'
+// import themeConfig from './theme.json';
+
+const locale = zhCN
+const dateLocale = dateZhCN
+const appStore = useAppStore()
+
+const osThemeRef = useOsTheme()
+appStore.setDarkMode(osThemeRef.value === 'dark')
+
+const themeOverrides: GlobalThemeOverrides = {}
+</script>
+
 <template>
   <n-config-provider
     class="wh-full"
@@ -10,19 +26,4 @@
   </n-config-provider>
 </template>
 
-<script setup lang="ts">
-import { useAppStore } from './store';
-import { zhCN, dateZhCN, GlobalThemeOverrides, useOsTheme } from 'naive-ui';
-// import themeConfig from './theme.json';
-
-const locale = zhCN;
-const dateLocale = dateZhCN;
-const appStore = useAppStore();
-
-const osThemeRef = useOsTheme();
-appStore.setDarkMode(osThemeRef.value === 'dark');
-
-const themeOverrides: GlobalThemeOverrides = {};
-</script>
-
 <style scoped></style>

src/components/common/DarkModeSwitch.vue

@@ -1,3 +1,8 @@
+<script setup lang="ts">
+import { useAppStore } from '@/store'
+const appStore = useAppStore()
+</script>
+
 <template>
   <div
     class="cursor-pointer"
@@ -8,9 +13,4 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { useAppStore } from '@/store';
-const appStore = useAppStore();
-</script>
-
 <style scoped></style>

src/components/common/ErrorTip.vue

@@ -1,3 +1,14 @@
+<script setup lang="ts">
+import { useAppRouter } from '@/hooks'
+
+type TipType = '403' | '404' | '500'
+defineProps<{
+  /** 异常类型 403 404 500 */
+  type: TipType
+}>()
+const { toRoot } = useAppRouter()
+</script>
+
 <template>
   <div class="flex-col-center h-full">
     <img
@@ -27,15 +38,4 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { useAppRouter } from '@/hooks';
-
-type TipType = '403' | '404' | '500';
-defineProps<{
-	/** 异常类型 403 404 500 */
-	type: TipType;
-}>();
-const { toRoot } = useAppRouter();
-</script>
-
 <style lang="scss" scoped></style>

src/components/common/NaiveProvider.vue

@@ -1,37 +1,37 @@
+<script setup lang="ts">
+import { useDialog, useLoadingBar, useMessage, useNotification } from 'naive-ui'
+import { defineComponent, h } from 'vue'
+
+// 挂载naive组件的方法至window, 以便在路由钩子函数和请求函数里面调用
+function registerNaiveTools() {
+  window.$loadingBar = useLoadingBar()
+  window.$dialog = useDialog()
+  window.$message = useMessage()
+  window.$notification = useNotification()
+}
+
+const NaiveProviderContent = defineComponent({
+  name: 'NaiveProviderContent',
+  setup() {
+    registerNaiveTools()
+  },
+  render() {
+    return h('div')
+  },
+})
+</script>
+
 <template>
   <n-loading-bar-provider>
     <n-dialog-provider>
       <n-notification-provider>
         <n-message-provider>
-          <slot></slot>
-          <naive-provider-content />
+          <slot />
+          <NaiveProviderContent />
         </n-message-provider>
       </n-notification-provider>
     </n-dialog-provider>
   </n-loading-bar-provider>
 </template>
 
-<script setup lang="ts">
-import { useLoadingBar, useDialog, useMessage, useNotification } from 'naive-ui';
-import { defineComponent, h } from 'vue';
-
-// 挂载naive组件的方法至window, 以便在路由钩子函数和请求函数里面调用
-function registerNaiveTools() {
-  window.$loadingBar = useLoadingBar();
-  window.$dialog = useDialog();
-  window.$message = useMessage();
-  window.$notification = useNotification();
-}
-
-const NaiveProviderContent = defineComponent({
-  name: 'NaiveProviderContent',
-  setup() {
-    registerNaiveTools();
-  },
-  render() {
-    return h('div');
-  },
-});
-</script>
-
 <style scoped></style>

src/components/common/appLoading.vue

@@ -1,3 +1,8 @@
+<script setup lang="ts">
+import { useAppInfo } from '@/hooks'
+const { title } = useAppInfo()
+</script>
+
 <template>
   <div id="loading-container">
     <div class="boxes">
@@ -32,209 +37,204 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { useAppInfo } from '@/hooks';
-const { title } = useAppInfo();
-</script>
-
 <style scoped>
-#loading-container {
-	width: 100vw;
-	height: 100vh;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-direction: column;
-	gap: 15vh;
-	position: fixed;
-	background-color: aliceblue;
-	z-index: 1;
-}
-.boxes {
-	--size: 48px;
-	--duration: 800ms;
-	height: calc(var(--size) * 2);
-	width: calc(var(--size) * 3);
-	position: relative;
-	transform-style: preserve-3d;
-	transform-origin: 50% 50%;
-	margin-top: calc(var(--size) * 1.5 * -1);
-	transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
-}
+  #loading-container {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 15vh;
+    position: fixed;
+    background-color: aliceblue;
+    z-index: 1;
+  }
+  .boxes {
+    --size: 48px;
+    --duration: 800ms;
+    height: calc(var(--size) * 2);
+    width: calc(var(--size) * 3);
+    position: relative;
+    transform-style: preserve-3d;
+    transform-origin: 50% 50%;
+    margin-top: calc(var(--size) * 1.5 * -1);
+    transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
+  }
 
-.boxes .box {
-	width: var(--size);
-	height: var(--size);
-	top: 0;
-	left: 0;
-	position: absolute;
-	transform-style: preserve-3d;
-}
+  .boxes .box {
+    width: var(--size);
+    height: var(--size);
+    top: 0;
+    left: 0;
+    position: absolute;
+    transform-style: preserve-3d;
+  }
 
-.boxes .box:nth-child(1) {
-	transform: translate(100%, 0);
-	-webkit-animation: box1 var(--duration) linear infinite;
-	animation: box1 var(--duration) linear infinite;
-}
+  .boxes .box:nth-child(1) {
+    transform: translate(100%, 0);
+    -webkit-animation: box1 var(--duration) linear infinite;
+    animation: box1 var(--duration) linear infinite;
+  }
 
-.boxes .box:nth-child(2) {
-	transform: translate(0, 100%);
-	-webkit-animation: box2 var(--duration) linear infinite;
-	animation: box2 var(--duration) linear infinite;
-}
+  .boxes .box:nth-child(2) {
+    transform: translate(0, 100%);
+    -webkit-animation: box2 var(--duration) linear infinite;
+    animation: box2 var(--duration) linear infinite;
+  }
 
-.boxes .box:nth-child(3) {
-	transform: translate(100%, 100%);
-	-webkit-animation: box3 var(--duration) linear infinite;
-	animation: box3 var(--duration) linear infinite;
-}
+  .boxes .box:nth-child(3) {
+    transform: translate(100%, 100%);
+    -webkit-animation: box3 var(--duration) linear infinite;
+    animation: box3 var(--duration) linear infinite;
+  }
 
-.boxes .box:nth-child(4) {
-	transform: translate(200%, 0);
-	-webkit-animation: box4 var(--duration) linear infinite;
-	animation: box4 var(--duration) linear infinite;
-}
+  .boxes .box:nth-child(4) {
+    transform: translate(200%, 0);
+    -webkit-animation: box4 var(--duration) linear infinite;
+    animation: box4 var(--duration) linear infinite;
+  }
 
-.boxes .box > div {
-	--background: #5c8df6;
-	--top: auto;
-	--right: auto;
-	--bottom: auto;
-	--left: auto;
-	--translateZ: calc(var(--size) / 2);
-	--rotateY: 0deg;
-	--rotateX: 0deg;
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	background: var(--background);
-	top: var(--top);
-	right: var(--right);
-	bottom: var(--bottom);
-	left: var(--left);
-	transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
-}
+  .boxes .box > div {
+    --background: #5c8df6;
+    --top: auto;
+    --right: auto;
+    --bottom: auto;
+    --left: auto;
+    --translateZ: calc(var(--size) / 2);
+    --rotateY: 0deg;
+    --rotateX: 0deg;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: var(--background);
+    top: var(--top);
+    right: var(--right);
+    bottom: var(--bottom);
+    left: var(--left);
+    transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
+  }
 
-.boxes .box > div:nth-child(1) {
-	--top: 0;
-	--left: 0;
-}
+  .boxes .box > div:nth-child(1) {
+    --top: 0;
+    --left: 0;
+  }
 
-.boxes .box > div:nth-child(2) {
-	--background: #145af2;
-	--right: 0;
-	--rotateY: 90deg;
-}
+  .boxes .box > div:nth-child(2) {
+    --background: #145af2;
+    --right: 0;
+    --rotateY: 90deg;
+  }
 
-.boxes .box > div:nth-child(3) {
-	--background: #447cf5;
-	--rotateX: -90deg;
-}
+  .boxes .box > div:nth-child(3) {
+    --background: #447cf5;
+    --rotateX: -90deg;
+  }
 
-.boxes .box > div:nth-child(4) {
-	--background: #dbe3f4;
-	--top: 0;
-	--left: 0;
-	--translateZ: calc(var(--size) * 3 * -1);
-}
+  .boxes .box > div:nth-child(4) {
+    --background: #dbe3f4;
+    --top: 0;
+    --left: 0;
+    --translateZ: calc(var(--size) * 3 * -1);
+  }
 
-@-webkit-keyframes box1 {
-	0%,
-	50% {
-		transform: translate(100%, 0);
-	}
+  @-webkit-keyframes box1 {
+    0%,
+    50% {
+      transform: translate(100%, 0);
+    }
 
-	100% {
-		transform: translate(200%, 0);
-	}
-}
+    100% {
+      transform: translate(200%, 0);
+    }
+  }
 
-@keyframes box1 {
-	0%,
-	50% {
-		transform: translate(100%, 0);
-	}
+  @keyframes box1 {
+    0%,
+    50% {
+      transform: translate(100%, 0);
+    }
 
-	100% {
-		transform: translate(200%, 0);
-	}
-}
+    100% {
+      transform: translate(200%, 0);
+    }
+  }
 
-@-webkit-keyframes box2 {
-	0% {
-		transform: translate(0, 100%);
-	}
+  @-webkit-keyframes box2 {
+    0% {
+      transform: translate(0, 100%);
+    }
 
-	50% {
-		transform: translate(0, 0);
-	}
+    50% {
+      transform: translate(0, 0);
+    }
 
-	100% {
-		transform: translate(100%, 0);
-	}
-}
+    100% {
+      transform: translate(100%, 0);
+    }
+  }
 
-@keyframes box2 {
-	0% {
-		transform: translate(0, 100%);
-	}
+  @keyframes box2 {
+    0% {
+      transform: translate(0, 100%);
+    }
 
-	50% {
-		transform: translate(0, 0);
-	}
+    50% {
+      transform: translate(0, 0);
+    }
 
-	100% {
-		transform: translate(100%, 0);
-	}
-}
+    100% {
+      transform: translate(100%, 0);
+    }
+  }
 
-@-webkit-keyframes box3 {
-	0%,
-	50% {
-		transform: translate(100%, 100%);
-	}
+  @-webkit-keyframes box3 {
+    0%,
+    50% {
+      transform: translate(100%, 100%);
+    }
 
-	100% {
-		transform: translate(0, 100%);
-	}
-}
+    100% {
+      transform: translate(0, 100%);
+    }
+  }
 
-@keyframes box3 {
-	0%,
-	50% {
-		transform: translate(100%, 100%);
-	}
+  @keyframes box3 {
+    0%,
+    50% {
+      transform: translate(100%, 100%);
+    }
 
-	100% {
-		transform: translate(0, 100%);
-	}
-}
+    100% {
+      transform: translate(0, 100%);
+    }
+  }
 
-@-webkit-keyframes box4 {
-	0% {
-		transform: translate(200%, 0);
-	}
+  @-webkit-keyframes box4 {
+    0% {
+      transform: translate(200%, 0);
+    }
 
-	50% {
-		transform: translate(200%, 100%);
-	}
+    50% {
+      transform: translate(200%, 100%);
+    }
 
-	100% {
-		transform: translate(100%, 100%);
-	}
-}
+    100% {
+      transform: translate(100%, 100%);
+    }
+  }
 
-@keyframes box4 {
-	0% {
-		transform: translate(200%, 0);
-	}
+  @keyframes box4 {
+    0% {
+      transform: translate(200%, 0);
+    }
 
-	50% {
-		transform: translate(200%, 100%);
-	}
+    50% {
+      transform: translate(200%, 100%);
+    }
 
-	100% {
-		transform: translate(100%, 100%);
-	}
-}
+    100% {
+      transform: translate(100%, 100%);
+    }
+  }
 </style>

src/components/custom/EIcon.vue

@@ -1,3 +1,18 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+
+interface iconPorps {
+  icon?: string
+  color?: string
+  size?: number
+  depth?: 1 | 2 | 3 | 4 | 5
+}
+const props = withDefaults(defineProps<iconPorps>(), {
+  size: 18,
+  icon: 'icon-park-outline:baby-feet',
+})
+</script>
+
 <template>
   <n-icon
     :size="props.size"
@@ -8,19 +23,4 @@
   </n-icon>
 </template>
 
-<script setup lang="ts">
-import { Icon } from '@iconify/vue';
-
-interface iconPorps {
-	icon?: string;
-	color?: string;
-	size?: number;
-	depth?: 1 | 2 | 3 | 4 | 5;
-}
-const props = withDefaults(defineProps<iconPorps>(), {
-	size: 18,
-	icon: 'icon-park-outline:baby-feet',
-});
-</script>
-
 <style scoped></style>

src/components/custom/IconSelect/icons.ts

@@ -32,4 +32,4 @@ export const icons: string[] = [
   'ic:baseline-filter-8',
   'ic:baseline-filter-9',
   'ic:baseline-filter-9-plus',
-];
+]

src/components/custom/IconSelect/index.vue

@@ -1,8 +1,26 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { icons } from './icons'
+
+const currentIcon = ref('')
+const searchValue = ref('')
+const showPopover = ref(false)
+
+const iconList = computed(() => icons.filter(item => item.includes(searchValue.value)))
+
+function handleSelectIcon(icon: string) {
+  currentIcon.value = icon
+  showPopover.value = false
+}
+</script>
+
 <template>
   <n-popover v-model:show="showPopover" placement="bottom" trigger="click">
     <template #trigger>
       <n-input v-model:value="currentIcon" readonly placeholder="选择目标图标">
-        <template #suffix><e-icon :icon="currentIcon || 'icon-park-outline:all-application'" /></template>
+        <template #suffix>
+          <e-icon :icon="currentIcon || 'icon-park-outline:all-application'" />
+        </template>
       </n-input>
     </template>
     <template #header>
@@ -24,20 +42,4 @@
   </n-popover>
 </template>
 
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { icons } from './icons';
-
-const currentIcon = ref('');
-const searchValue = ref('');
-const showPopover = ref(false);
-
-const iconList = computed(() => icons.filter((item) => item.includes(searchValue.value)));
-
-function handleSelectIcon(icon: string) {
-  currentIcon.value = icon;
-  showPopover.value = false;
-}
-</script>
-
 <style scoped></style>

src/components/custom/Pagination.vue

@@ -1,29 +1,15 @@
-<template>
-  <n-pagination
-    v-if="props.count > 0"
-    v-model:page="page"
-    v-model:page-size="pageSize"
-    :item-count="props.count"
-    :display-order="displayOrder"
-    show-size-picker
-    :page-sizes="pageSizes"
-    @update-page="changePage"
-    @update-page-size="changePage"
-  />
-</template>
-
 <script setup lang="ts">
-import { ref } from 'vue';
-const emit = defineEmits(['change']);
+import { ref } from 'vue'
 const props = defineProps({
   count: {
     type: Number,
     default: 0,
   },
-});
-const page = ref(1);
-const pageSize = ref(10);
-const displayOrder: Array<'pages' | 'size-picker' | 'quick-jumper'> = ['size-picker', 'pages'];
+})
+const emit = defineEmits(['change'])
+const page = ref(1)
+const pageSize = ref(10)
+const displayOrder: Array<'pages' | 'size-picker' | 'quick-jumper'> = ['size-picker', 'pages']
 const pageSizes = [
   {
     label: '10 每页',
@@ -41,11 +27,25 @@ const pageSizes = [
     label: '50 每页',
     value: 50,
   },
-];
+]
 
 function changePage() {
-  emit('change', page.value, pageSize.value);
+  emit('change', page.value, pageSize.value)
 }
 </script>
 
+<template>
+  <n-pagination
+    v-if="props.count > 0"
+    v-model:page="page"
+    v-model:page-size="pageSize"
+    :item-count="props.count"
+    :display-order="displayOrder"
+    show-size-picker
+    :page-sizes="pageSizes"
+    @update-page="changePage"
+    @update-page-size="changePage"
+  />
+</template>
+
 <style scoped></style>

src/components/custom/QRCode.vue

@@ -1,21 +1,21 @@
-<template>
-  <div>
-    <vue-qr v-if="props.text" :text="props.text" qid="testid" :size="props.size" :correct-level="1"></vue-qr>
-  </div>
-</template>
-
 <script setup lang="ts">
-import vueQr from 'vue-qr/src/packages/vue-qr.vue'; //https://www.npmjs.com/package/vue-qr
+import vueQr from 'vue-qr/src/packages/vue-qr.vue' // https://www.npmjs.com/package/vue-qr
 const props = withDefaults(
   defineProps<{
-    text?: string;
-    size?: number;
+    text?: string
+    size?: number
   }>(),
   {
     text: '',
     size: 300,
   },
-);
+)
 </script>
 
+<template>
+  <div>
+    <vue-qr v-if="props.text" :text="props.text" qid="testid" :size="props.size" :correct-level="1" />
+  </div>
+</template>
+
 <style scoped></style>

src/components/custom/SvgIcon.vue

@@ -1,3 +1,22 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+const props = defineProps({
+  prefix: {
+    type: String,
+    default: 'icon',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  size: {
+    type: Number,
+    default: 18,
+  },
+})
+const symbolId = computed(() => `#${props.prefix}-${props.name}`)
+</script>
+
 <template>
   <svg
     aria-hidden="true"
@@ -11,22 +30,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-const props = defineProps({
-	prefix: {
-		type: String,
-		default: 'icon',
-	},
-	name: {
-		type: String,
-		required: true,
-	},
-	size: {
-		type: Number,
-		default: 18,
-	},
-});
-const symbolId = computed(() => `#${props.prefix}-${props.name}`);
-</script>

src/config/env.ts

@@ -1,21 +1,21 @@
 /** 不同请求服务的环境配置 */
 export const proxyConfig: Record<ServiceEnvType, ServiceEnvConfig> = {
-	development: {
-		url: 'https://mock.mengxuegu.com/mock/61e4df7c17249f68847fc191/api',
-		urlPattern: '/url-pattern',
-		secondUrl: 'http://localhost:8081',
-		secondUrlPattern: '/second-url-pattern',
-	},
-	test: {
-		url: 'http://localhost:8080',
-		urlPattern: '/url-pattern',
-		secondUrl: 'http://localhost:8081',
-		secondUrlPattern: '/second-url-pattern',
-	},
-	production: {
-		url: 'http://localhost:8080',
-		urlPattern: '/url-pattern',
-		secondUrl: 'http://localhost:8081',
-		secondUrlPattern: '/second-url-pattern',
-	},
-};
+  development: {
+    url: 'https://mock.mengxuegu.com/mock/61e4df7c17249f68847fc191/api',
+    urlPattern: '/url-pattern',
+    secondUrl: 'http://localhost:8081',
+    secondUrlPattern: '/second-url-pattern',
+  },
+  test: {
+    url: 'http://localhost:8080',
+    urlPattern: '/url-pattern',
+    secondUrl: 'http://localhost:8081',
+    secondUrlPattern: '/second-url-pattern',
+  },
+  production: {
+    url: 'http://localhost:8080',
+    urlPattern: '/url-pattern',
+    secondUrl: 'http://localhost:8081',
+    secondUrlPattern: '/second-url-pattern',
+  },
+}

src/config/index.ts

@@ -1,4 +1,4 @@
-export * from './sdk';
-export * from './service';
-export * from './env';
-export * from './system';
+export * from './sdk'
+export * from './service'
+export * from './env'
+export * from './system'

src/config/sdk.ts

@@ -1,5 +1,5 @@
 /* 高德地图开发SDk */
-export const GAODE_MAP_SDK_URL = 'https://webapi.amap.com/maps?v=2.0&key=85e62187c6f8e51c797c87b1f36f787a';
+export const GAODE_MAP_SDK_URL = 'https://webapi.amap.com/maps?v=2.0&key=85e62187c6f8e51c797c87b1f36f787a'
 /* 百度地图开发SDk */
-export const BAIDU_MAP_SDK_URL =
-  'https://api.map.baidu.com/getscript?v=3.0&ak=MwqQwPxa5ipusyNmH1WT62y5DKhYxIgb&services=&t=20220816154130';
+export const BAIDU_MAP_SDK_URL
+  = 'https://api.map.baidu.com/getscript?v=3.0&ak=MwqQwPxa5ipusyNmH1WT62y5DKhYxIgb&services=&t=20220816154130'

src/config/service.ts

@@ -1,58 +1,58 @@
 /** 默认实例的Aixos配置 */
-import type { AxiosRequestConfig } from 'axios';
+import type { AxiosRequestConfig } from 'axios'
 export const DEFAULT_AXIOS_OPTIONS: AxiosRequestConfig = {
-	// 请求超时时间,默认15秒
-	timeout: 15 * 1000,
-};
+  // 请求超时时间,默认15秒
+  timeout: 15 * 1000,
+}
 
 /** 默认实例的后端字段配置 */
 export const DEFAULT_BACKEND_OPTIONS = {
-	codeKey: 'code',
-	dataKey: 'data',
-	msgKey: 'msg',
-	successCode: 200,
-};
+  codeKey: 'code',
+  dataKey: 'data',
+  msgKey: 'msg',
+  successCode: 200,
+}
 
 /** 错误信息的显示时间 */
-export const ERROR_MSG_DURATION = 3 * 1000;
+export const ERROR_MSG_DURATION = 3 * 1000
 
 /** 默认的请求错误code */
-export const DEFAULT_REQUEST_ERROR_CODE = 'DEFAULT';
+export const DEFAULT_REQUEST_ERROR_CODE = 'DEFAULT'
 
 /** 默认的请求错误文本 */
-export const DEFAULT_REQUEST_ERROR_MSG = '请求错误~';
+export const DEFAULT_REQUEST_ERROR_MSG = '请求错误~'
 
 /** 请求超时的错误code */
-export const REQUEST_TIMEOUT_CODE = 'TIME_OUT';
+export const REQUEST_TIMEOUT_CODE = 'TIME_OUT'
 
 /** 请求超时的错误文本 */
-export const REQUEST_TIMEOUT_MSG = '请求超时~';
+export const REQUEST_TIMEOUT_MSG = '请求超时~'
 
 /** 默认的请求错误code */
-export const NETWORK_ERROR_CODE = 'NETWORK_ERROR';
+export const NETWORK_ERROR_CODE = 'NETWORK_ERROR'
 
 /** 默认的请求错误文本 */
-export const NETWORK_ERROR_MSG = '网络错误';
+export const NETWORK_ERROR_MSG = '网络错误'
 
 /** 请求不成功各种状态的错误 */
 export const ERROR_STATUS = {
-	400: '400: 请求出现语法错误~',
-	401: '401: 用户未授权~',
-	403: '403: 服务器拒绝访问~',
-	404: '404: 请求的资源不存在~',
-	405: '405: 请求方法未允许~',
-	408: '408: 网络请求超时~',
-	500: '500: 服务器内部错误~',
-	501: '501: 服务器未实现请求功能~',
-	502: '502: 错误网关~',
-	503: '503: 服务不可用~',
-	504: '504: 网关超时~',
-	505: '505: http版本不支持该请求~',
-	[DEFAULT_REQUEST_ERROR_CODE]: DEFAULT_REQUEST_ERROR_MSG,
-};
+  400: '400: 请求出现语法错误~',
+  401: '401: 用户未授权~',
+  403: '403: 服务器拒绝访问~',
+  404: '404: 请求的资源不存在~',
+  405: '405: 请求方法未允许~',
+  408: '408: 网络请求超时~',
+  500: '500: 服务器内部错误~',
+  501: '501: 服务器未实现请求功能~',
+  502: '502: 错误网关~',
+  503: '503: 服务不可用~',
+  504: '504: 网关超时~',
+  505: '505: http版本不支持该请求~',
+  [DEFAULT_REQUEST_ERROR_CODE]: DEFAULT_REQUEST_ERROR_MSG,
+}
 
 /** token刷新的code */
-export const REFRESH_TOKEN_CODE = [888, 999];
+export const REFRESH_TOKEN_CODE = [888, 999]
 
 /** 没有错误提示的code */
-export const ERROR_NO_TIP_STATUS = [10000];
+export const ERROR_NO_TIP_STATUS = [10000]

src/config/system.ts

@@ -1,8 +1,8 @@
 /** 本地存储前缀 */
-export const STORAGE_PREFIX = '';
+export const STORAGE_PREFIX = ''
 
 /** 本地存储加密密钥 */
-export const STORAGE_ENCRYPT_SECRET = '__CryptoJS_Secret__';
+export const STORAGE_ENCRYPT_SECRET = '__CryptoJS_Secret__'
 
 /** 本地存储缓存时长 */
-export const STORAGE_DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;
+export const STORAGE_DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7

src/constants/business.ts

@@ -1,5 +1,5 @@
 /** 用户性别 */
 export const genderLabels: Record<NonNullable<CommonList.GenderType>, string> = {
   0: '女',
-  1: '男'
-};
+  1: '男',
+}

src/directive/index.ts

@@ -1,6 +1,6 @@
-import type { App } from 'vue';
+import type { App } from 'vue'
 import { setupPermission } from './permission'
 
 export function setupDirectives(app: App) {
-  setupPermission(app);
+  setupPermission(app)
 }

src/directive/permission.ts

@@ -1,17 +1,15 @@
-import type { App, Directive } from 'vue';
-import { usePermission } from '@/hooks';
-
+import type { App, Directive } from 'vue'
+import { usePermission } from '@/hooks'
 
 export function setupPermission(app: App) {
-  const { hasPermission } = usePermission();
+  const { hasPermission } = usePermission()
 
   function updatapermission(el: HTMLElement, permission: Auth.RoleType | Auth.RoleType[]) {
-    if (!permission) {
-      throw new Error(`v-permissson Directive with no explicit role attached`);
-    }
-    if (!hasPermission(permission)) {
-      el.parentElement?.removeChild(el);
-    }
+    if (!permission)
+      throw new Error('v-permissson Directive with no explicit role attached')
+
+    if (!hasPermission(permission))
+      el.parentElement?.removeChild(el)
   }
 
   const permissionDirective: Directive<HTMLElement, Auth.RoleType | Auth.RoleType[]> = {
@@ -20,7 +18,7 @@ export function setupPermission(app: App) {
     },
     updated(el, binding) {
       updatapermission(el, binding.value)
-    }
+    },
   }
   app.directive('permission', permissionDirective)
 }

src/hooks/index.ts

@@ -1,6 +1,6 @@
-export * from './useAppRouter';
-export * from './useBoolean';
-export * from './useLoading';
-export * from './useEcharts';
-export * from './useClipBoard';
-export * from './useSystem';
+export * from './useAppRouter'
+export * from './useBoolean'
+export * from './useLoading'
+export * from './useEcharts'
+export * from './useClipBoard'
+export * from './useSystem'

src/hooks/useAppRouter.ts

@@ -1,5 +1,6 @@
-import { useRouter, RouteLocationRaw } from 'vue-router';
-import { router as gobalRouter } from '@/router';
+import type { RouteLocationRaw } from 'vue-router'
+import { useRouter } from 'vue-router'
+import { router as gobalRouter } from '@/router'
 
 /**
  * @description: 全局路由方法，vue-router自带的useRouter，在根目录下不能用
@@ -7,45 +8,44 @@ import { router as gobalRouter } from '@/router';
  * @return {*}
  */
 export function useAppRouter(isSetup = true) {
-  const router = isSetup ? useRouter() : gobalRouter;
-  const route = router.currentRoute;
+  const router = isSetup ? useRouter() : gobalRouter
+  const route = router.currentRoute
 
   /* 路由跳转方法 */
   function routerPush(to: RouteLocationRaw) {
-    router.push(to);
+    router.push(to)
   }
 
   /* 路由跳转方法 */
   function routerReplace(to: RouteLocationRaw) {
-    router.replace(to);
+    router.replace(to)
   }
 
   /* 前进后退方法 */
   function routerGo(delta: number) {
-    router.go(delta);
+    router.go(delta)
   }
 
   /* 跳转根页方法 */
   function toRoot() {
-    routerPush({ path: '/appRoot' });
+    routerPush({ path: '/appRoot' })
   }
   /* 跳转至登录页 */
   function toLogin(redirectUrl?: string) {
-    const redirect = redirectUrl || route.value.fullPath;
+    const redirect = redirectUrl || route.value.fullPath
     const targetUrl = {
       name: 'login',
       query: { redirect },
-    };
-    routerPush(targetUrl);
+    }
+    routerPush(targetUrl)
   }
   /* 跳转重定向方法 */
   function toLoginRedirect() {
-    const { query } = route.value;
-    if (query?.redirect) {
-      routerPush(query.redirect as string);
-    } else {
-      toRoot();
-    }
+    const { query } = route.value
+    if (query?.redirect)
+      routerPush(query.redirect as string)
+    else
+      toRoot()
   }
 
   return {
@@ -55,5 +55,5 @@ export function useAppRouter(isSetup = true) {
     toRoot,
     toLogin,
     toLoginRedirect,
-  };
+  }
 }

src/hooks/useBoolean.ts

@@ -1,23 +1,23 @@
-import { ref } from 'vue';
+import { ref } from 'vue'
 
 /**
  * boolean组合式函数
  * @param initValue 初始值
  */
 export function useBoolean(initValue = false) {
-  const bool = ref(initValue);
+  const bool = ref(initValue)
 
   function setBool(value: boolean) {
-    bool.value = value;
+    bool.value = value
   }
   function setTrue() {
-    setBool(true);
+    setBool(true)
   }
   function setFalse() {
-    setBool(false);
+    setBool(false)
   }
   function toggle() {
-    setBool(!bool.value);
+    setBool(!bool.value)
   }
 
   return {
@@ -26,5 +26,5 @@ export function useBoolean(initValue = false) {
     setTrue,
     setFalse,
     toggle,
-  };
+  }
 }

src/hooks/useClipBoard.ts

@@ -1,26 +1,26 @@
 export function useClipBoard() {
   function isSupport() {
-    return !navigator.clipboard;
+    return !navigator.clipboard
   }
   async function copy(text: string) {
-    if (isSupport()) {
-      return window.$message?.error('当前浏览器不支持复制！');
-    }
+    if (isSupport())
+      return window.$message?.error('当前浏览器不支持复制！')
+
     if (!text) {
-      window.$message?.error('请输入要复制的内容');
-      return;
+      window.$message?.error('请输入要复制的内容')
+      return
     }
     navigator.clipboard.writeText(text).then(
       () => {
-        window.$message?.success(`复制成功：${text}`);
+        window.$message?.success(`复制成功：${text}`)
       },
       () => {
-        window.$message?.error('复制失败');
+        window.$message?.error('复制失败')
       },
-    );
+    )
   }
 
   return {
     copy,
-  };
+  }
 }

src/hooks/useEcharts.ts

@@ -1,71 +1,71 @@
-import * as echarts from 'echarts/core';
-import { nextTick, ref, onUnmounted, watch } from 'vue';
-import type { Ref } from 'vue';
+import * as echarts from 'echarts/core'
+import { nextTick, onUnmounted, ref, watch } from 'vue'
+import type { Ref } from 'vue'
 
-import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
+import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts'
 // 系列类型的定义后缀都为 SeriesOption
 import type {
-	BarSeriesOption,
-	LineSeriesOption,
-	PieSeriesOption,
-	RadarSeriesOption,
-} from 'echarts/charts';
+  BarSeriesOption,
+  LineSeriesOption,
+  PieSeriesOption,
+  RadarSeriesOption,
+} from 'echarts/charts'
 
 // 组件类型的定义后缀都为 ComponentOption
 import type {
-	TitleComponentOption,
-	TooltipComponentOption,
-	GridComponentOption,
-	LegendComponentOption,
-	DatasetComponentOption,
-	ToolboxComponentOption,
-} from 'echarts/components';
+  DatasetComponentOption,
+  GridComponentOption,
+  LegendComponentOption,
+  TitleComponentOption,
+  ToolboxComponentOption,
+  TooltipComponentOption,
+} from 'echarts/components'
 import {
-	TitleComponent,
-	TooltipComponent,
-	GridComponent,
-	LegendComponent,
-	DatasetComponent, // 数据集组件
-	TransformComponent, // 内置数据转换器组件 (filter, sort)
-	ToolboxComponent,
-} from 'echarts/components';
+  DatasetComponent, // 数据集组件
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  TransformComponent, // 内置数据转换器组件 (filter, sort)
+} from 'echarts/components'
 
-import { LabelLayout, UniversalTransition } from 'echarts/features';
-import { CanvasRenderer } from 'echarts/renderers';
-import { useAppStore } from '@/store';
-import { useElementSize } from '@vueuse/core';
+import { LabelLayout, UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+import { useElementSize } from '@vueuse/core'
+import { useAppStore } from '@/store'
 
 // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
 export type ECOption = echarts.ComposeOption<
-	| BarSeriesOption
-	| PieSeriesOption
-	| LineSeriesOption
-	| TitleComponentOption
-	| TooltipComponentOption
-	| GridComponentOption
-	| LegendComponentOption
-	| DatasetComponentOption
-	| ToolboxComponentOption
-	| RadarSeriesOption
->;
+  | BarSeriesOption
+  | PieSeriesOption
+  | LineSeriesOption
+  | TitleComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | LegendComponentOption
+  | DatasetComponentOption
+  | ToolboxComponentOption
+  | RadarSeriesOption
+>
 
 // 注册必须的组件
 echarts.use([
-	TitleComponent,
-	TooltipComponent,
-	GridComponent,
-	LegendComponent,
-	DatasetComponent,
-	TransformComponent,
-	BarChart,
-	PieChart,
-	LineChart,
-	LabelLayout,
-	UniversalTransition,
-	CanvasRenderer,
-	ToolboxComponent,
-	RadarChart,
-]);
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  DatasetComponent,
+  TransformComponent,
+  BarChart,
+  PieChart,
+  LineChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+  ToolboxComponent,
+  RadarChart,
+])
 
 /**
  * Echarts hooks函数
@@ -73,72 +73,69 @@ echarts.use([
  * @description 按需引入图表组件，没注册的组件需要先引入
  */
 export function useEcharts(options: Ref<ECOption>) {
-	const appStore = useAppStore();
+  const appStore = useAppStore()
 
-	const domRef = ref<HTMLElement>();
+  const domRef = ref<HTMLElement>()
 
-	let chart: echarts.ECharts | null = null;
+  let chart: echarts.ECharts | null = null
 
-	const initialSize = { width: 0, height: 0 };
-	const { width, height } = useElementSize(domRef, initialSize);
+  const initialSize = { width: 0, height: 0 }
+  const { width, height } = useElementSize(domRef, initialSize)
 
-	function canRender() {
-		return initialSize.width > 0 && initialSize.height > 0;
-	}
+  function canRender() {
+    return initialSize.width > 0 && initialSize.height > 0
+  }
 
-	function isRendered() {
-		return Boolean(domRef.value && chart);
-	}
-	async function render() {
-		const chartTheme = appStore.darkMode ? 'dark' : 'light';
-		await nextTick();
-		if (domRef.value) {
-			chart = echarts.init(domRef.value, chartTheme);
-			update(options.value);
-		}
-	}
+  function isRendered() {
+    return Boolean(domRef.value && chart)
+  }
+  async function render() {
+    const chartTheme = appStore.darkMode ? 'dark' : 'light'
+    await nextTick()
+    if (domRef.value) {
+      chart = echarts.init(domRef.value, chartTheme)
+      update(options.value)
+    }
+  }
 
-	function update(updateOptions: ECOption) {
-		if (isRendered()) {
-			chart!.setOption({ ...updateOptions, backgroundColor: 'transparent' });
-		}
-	}
+  function update(updateOptions: ECOption) {
+    if (isRendered())
+      chart!.setOption({ ...updateOptions, backgroundColor: 'transparent' })
+  }
 
-	function resize() {
-		chart?.resize();
-	}
+  function resize() {
+    chart?.resize()
+  }
 
-	function destroy() {
-		chart?.dispose();
-		chart = null;
-	}
-	const sizeWatch = watch([width, height], ([newWidth, newHeight]) => {
-		initialSize.width = newWidth;
-		initialSize.height = newHeight;
-		if (newWidth === 0 && newHeight === 0) {
-			// 节点被删除 将chart置为空
-			chart = null;
-		}
-		if (!canRender()) return;
-		if (isRendered()) {
-			resize();
-		} else {
-			render();
-		}
-	});
+  function destroy() {
+    chart?.dispose()
+    chart = null
+  }
+  const sizeWatch = watch([width, height], ([newWidth, newHeight]) => {
+    initialSize.width = newWidth
+    initialSize.height = newHeight
+    if (newWidth === 0 && newHeight === 0) {
+      // 节点被删除 将chart置为空
+      chart = null
+    }
+    if (!canRender())
+      return
+    if (isRendered())
+      resize()
+    else render()
+  })
 
-	const OptionWatch = watch(options, (newValue) => {
-		console.log(newValue);
-		update(newValue);
-	});
+  const OptionWatch = watch(options, (newValue) => {
+    update(newValue)
+  })
 
-	onUnmounted(() => {
-		sizeWatch();
-		OptionWatch();
-		destroy();
-	});
+  onUnmounted(() => {
+    sizeWatch()
+    OptionWatch()
+    destroy()
+  })
 
-	return {
-		domRef,
-	};
+  return {
+    domRef,
+  }
 }

src/hooks/useLoading.ts

@@ -1,11 +1,15 @@
-import { useBoolean } from './useBoolean';
+import { useBoolean } from './useBoolean'
 
 export function useLoading(initValue = false) {
-  const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean();
+  const {
+    bool: loading,
+    setTrue: startLoading,
+    setFalse: endLoading,
+  } = useBoolean(initValue)
 
   return {
     loading,
     startLoading,
     endLoading,
-  };
+  }
 }

src/hooks/useSystem.ts

@@ -1,56 +1,54 @@
-import { useAuthStore } from '@/store';
-import { isArray, isString } from '@/utils';
-
+import { useAuthStore } from '@/store'
+import { isArray, isString } from '@/utils'
 
 interface AppInfo {
-	/** 项目名称 */
-	name: string;
-	/** 项目标题 */
-	title: string;
-	/** 项目描述 */
-	desc: string;
+  /** 项目名称 */
+  name: string
+  /** 项目标题 */
+  title: string
+  /** 项目描述 */
+  desc: string
 }
 
 /** 项目信息 */
 export function useAppInfo(): AppInfo {
-	const {
-		VITE_APP_NAME: name,
-		VITE_APP_TITLE: title,
-		VITE_APP_DESC: desc,
-	} = import.meta.env;
+  const {
+    VITE_APP_NAME: name,
+    VITE_APP_TITLE: title,
+    VITE_APP_DESC: desc,
+  } = import.meta.env
 
-	return {
-		name,
-		title,
-		desc,
-	};
+  return {
+    name,
+    title,
+    desc,
+  }
 }
 
 /** 权限判断 */
 export function usePermission() {
-	const authStore = useAuthStore()
+  const authStore = useAuthStore()
 
-	function hasPermission(permission: Auth.RoleType | Auth.RoleType[] | undefined) {
+  function hasPermission(permission: Auth.RoleType | Auth.RoleType[] | undefined) {
+    if (!permission)
+      return true
 
-		if (!permission) return true
+    if (!authStore.userInfo)
+      return false
+    const { role } = authStore.userInfo
 
-		if (!authStore.userInfo) return false
-		const { role } = authStore.userInfo
+    let has = role === 'super'
+    if (!has) {
+      if (isArray(permission))
+        has = (permission as Auth.RoleType[]).includes(role)
 
-		let has = role === 'super';
-		if (!has) {
-			if (isArray(permission)) {
-				has = (permission as Auth.RoleType[]).includes(role);
-			}
-			if (isString(permission)) {
-				has = (permission as Auth.RoleType) === role;
-			}
-		}
-		return has;
-	}
+      if (isString(permission))
+        has = (permission as Auth.RoleType) === role
+    }
+    return has
+  }
 
-	return {
-		hasPermission
-	};
+  return {
+    hasPermission,
+  }
 }
-

src/layouts/BasicLayout/index.vue

@@ -1,3 +1,27 @@
+<script lang="ts" setup>
+import {
+  BackTop,
+  Breadcrumb,
+  CollapaseButton,
+  DarkMode,
+  FullScreen,
+  Github,
+  Logo,
+  Menu,
+  Notices,
+  Reload,
+  Search,
+  Setting,
+  TabBar,
+  UserCenter,
+  Watermark,
+} from '../components'
+import { useAppStore, useRouteStore } from '@/store'
+
+const routeStore = useRouteStore()
+const appStore = useAppStore()
+</script>
+
 <template>
   <n-layout
     has-sider
@@ -83,35 +107,11 @@
   </n-layout>
 </template>
 
-<script lang="ts" setup>
-import {
-	Breadcrumb,
-	CollapaseButton,
-	Menu,
-	Logo,
-	FullScreen,
-	DarkMode,
-	Setting,
-	Github,
-	Notices,
-	UserCenter,
-	Search,
-	Reload,
-	TabBar,
-	BackTop,
-	Watermark,
-} from '../components';
-import { useAppStore, useRouteStore } from '@/store';
-
-const routeStore = useRouteStore();
-const appStore = useAppStore();
-</script>
-
 <style scoped>
-.n-layout-sider {
-	box-shadow: 2px 0 8px #1d23290d;
-}
-.n-layout-header {
-	box-shadow: 0 1px 2px #00152914;
-}
+  .n-layout-sider {
+    box-shadow: 2px 0 8px #1d23290d;
+  }
+  .n-layout-header {
+    box-shadow: 0 1px 2px #00152914;
+  }
 </style>

src/layouts/components/common/BackTop.vue

@@ -1,3 +1,5 @@
+<script setup lang="ts"></script>
+
 <template>
   <n-back-top :bottom="80" :visibility-height="300">
     <n-tooltip placement="left" trigger="hover">
@@ -11,6 +13,4 @@
   </n-back-top>
 </template>
 
-<script setup lang="ts"></script>
-
 <style scoped></style>

src/layouts/components/common/HeaderButton.vue

@@ -1,3 +1,5 @@
+<script setup lang="ts"></script>
+
 <template>
   <n-el
     tag="div"
@@ -12,16 +14,14 @@
   </n-el>
 </template>
 
-<script setup lang="ts"></script>
-
 <style scoped>
-.el {
-	color: var(--n-text-color);
-	background-color: var(--n-color);
-	transition: 0.3s var(--cubic-bezier-ease-in-out);
-}
-.el:hover {
-	background-color: var(--button-color-2-hover);
-	color: var(--n-text-color-hover);
-}
+  .el {
+    color: var(--n-text-color);
+    background-color: var(--n-color);
+    transition: 0.3s var(--cubic-bezier-ease-in-out);
+  }
+  .el:hover {
+    background-color: var(--button-color-2-hover);
+    color: var(--n-text-color-hover);
+  }
 </style>

src/layouts/components/common/NoticeList.vue

@@ -1,3 +1,18 @@
+<script setup lang="ts">
+interface Props {
+  list?: Message.List[]
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<Emits>()
+interface Emits {
+  (e: 'read', val: number): void
+}
+function handleRead(index: number) {
+  emit('read', index)
+}
+</script>
+
 <template>
   <n-scrollbar style="height: 400px">
     <n-list hoverable clickable>
@@ -12,34 +27,22 @@
             <e-icon :icon="item.icon" :size="30" class="c-primary" />
           </template>
           <template v-if="item.tagTitle" #header-extra>
-            <n-tag :bordered="false" :type="item.tagType" size="small">{{ item.tagTitle }}</n-tag>
+            <n-tag :bordered="false" :type="item.tagType" size="small">
+              {{ item.tagTitle }}
+            </n-tag>
           </template>
           <template v-if="item.description" #description>
             <n-ellipsis :line-clamp="2">
               {{ item.description }}
             </n-ellipsis>
           </template>
-          <template #footer>{{ item.date }}</template>
+          <template #footer>
+            {{ item.date }}
+          </template>
         </n-thing>
       </n-list-item>
     </n-list>
   </n-scrollbar>
 </template>
 
-<script setup lang="ts">
-interface Props {
-  list?: Message.List[];
-}
-const props = defineProps<Props>();
-
-interface Emits {
-  (e: 'read', val: number): void;
-}
-const emit = defineEmits<Emits>();
-
-function handleRead(index: number) {
-  emit('read', index);
-}
-</script>
-
 <style scoped></style>

src/layouts/components/common/Watermark.vue

@@ -1,3 +1,12 @@
+<script setup lang="ts">
+interface Props {
+  showWatermark: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  showWatermark: false,
+})
+</script>
+
 <template>
   <n-watermark
     v-if="props.showWatermark"
@@ -13,12 +22,3 @@
     :rotate="-15"
   />
 </template>
-
-<script setup lang="ts">
-interface Props {
-	showWatermark: boolean;
-}
-const props = withDefaults(defineProps<Props>(), {
-	showWatermark: false,
-});
-</script>

src/layouts/components/header/Breadcrumb.vue

@@ -1,3 +1,17 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useRouteStore } from '@/store'
+import { useAppRouter } from '@/hooks'
+
+const router = useRouter()
+const routeStore = useRouteStore()
+const { routerPush } = useAppRouter()
+const routes = computed(() => {
+  return routeStore.createBreadcrumbFromRoutes(router.currentRoute.value.name as string)
+})
+</script>
+
 <template>
   <n-breadcrumb class="px-4">
     <n-breadcrumb-item
@@ -11,18 +25,4 @@
   </n-breadcrumb>
 </template>
 
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useRouter } from 'vue-router';
-import { useRouteStore } from '@/store';
-import { useAppRouter } from '@/hooks';
-
-const router = useRouter();
-const routeStore = useRouteStore();
-const { routerPush } = useAppRouter();
-const routes = computed(() => {
-  return routeStore.createBreadcrumbFromRoutes(router.currentRoute.value.name as string);
-});
-</script>
-
 <style scoped></style>

src/layouts/components/header/CollapaseButton.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+import HeaderButton from '../common/HeaderButton.vue'
+import { useAppStore } from '@/store'
+
+const appStore = useAppStore()
+</script>
+
 <template>
   <n-tooltip placement="bottom" trigger="hover">
     <template #trigger>
@@ -10,11 +17,4 @@
   </n-tooltip>
 </template>
 
-<script setup lang="ts">
-import { useAppStore } from '@/store';
-import HeaderButton from '../common/HeaderButton.vue';
-
-const appStore = useAppStore();
-</script>
-
 <style scoped></style>

src/layouts/components/header/DarkMode.vue

@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import HeaderButton from '../common/HeaderButton.vue'
+</script>
+
 <template>
   <n-tooltip
     placement="bottom"
@@ -12,8 +16,4 @@
   </n-tooltip>
 </template>
 
-<script setup lang="ts">
-import HeaderButton from '../common/HeaderButton.vue';
-</script>
-
 <style scoped></style>

src/layouts/components/header/FullScreen.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import HeaderButton from '../common/HeaderButton.vue'
+import { useAppStore } from '@/store'
+const appStore = useAppStore()
+</script>
+
 <template>
   <n-tooltip placement="bottom" trigger="hover">
     <template #trigger>
@@ -10,10 +16,4 @@
   </n-tooltip>
 </template>
 
-<script setup lang="ts">
-import HeaderButton from '../common/HeaderButton.vue';
-import { useAppStore } from '@/store';
-const appStore = useAppStore();
-</script>
-
 <style scoped></style>

src/layouts/components/header/Github.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+import HeaderButton from '../common/HeaderButton.vue'
+const toMyGithub = () => {
+  window.open('https://github.com/iam-see')
+}
+</script>
+
 <template>
   <n-tooltip placement="bottom" trigger="hover">
     <template #trigger>
@@ -9,11 +16,4 @@
   </n-tooltip>
 </template>
 
-<script setup lang="ts">
-import HeaderButton from '../common/HeaderButton.vue';
-const toMyGithub = () => {
-  window.open('https://github.com/iam-see');
-};
-</script>
-
 <style scoped></style>

src/layouts/components/header/Notices.vue

@@ -1,35 +1,7 @@
-<template>
-  <n-popover placement="bottom" trigger="click" arrow-point-to-center class="!p-0">
-    <template #trigger>
-      <n-tooltip placement="bottom" trigger="hover">
-        <template #trigger>
-          <HeaderButton>
-            <n-badge :value="massageCount" :max="99" style="color: unset">
-              <i-icon-park-outline-remind />
-            </n-badge>
-          </HeaderButton>
-        </template>
-        <span>消息通知</span>
-      </n-tooltip>
-    </template>
-    <n-tabs v-model:value="currentTab" type="line" animated justify-content="space-evenly" class="w-390px">
-      <n-tab-pane v-for="item in MassageData" :key="item.key" :name="item.key">
-        <template #tab>
-          <n-space class="w-130px" justify="center">
-            {{ item.name }}
-            <n-badge v-bind="item.badgeProps" :value="item.list.filter((item) => !item.isRead).length" :max="99" />
-          </n-space>
-        </template>
-        <NoticeList :list="item.list" @read="handleRead" />
-      </n-tab-pane>
-    </n-tabs>
-  </n-popover>
-</template>
-
 <script setup lang="ts">
-import HeaderButton from '../common/HeaderButton.vue';
-import NoticeList from '../common/NoticeList.vue';
-import { ref, computed } from 'vue';
+import { computed, ref } from 'vue'
+import HeaderButton from '../common/HeaderButton.vue'
+import NoticeList from '../common/NoticeList.vue'
 
 const MassageData = ref<Message.Tab[]>([
   {
@@ -120,16 +92,44 @@ const MassageData = ref<Message.Tab[]>([
       },
     ],
   },
-]);
-const currentTab = ref(0);
+])
+const currentTab = ref(0)
 function handleRead(index: number) {
-  MassageData.value[currentTab.value].list[index].isRead = true;
+  MassageData.value[currentTab.value].list[index].isRead = true
 }
 const massageCount = computed(() => {
   return MassageData.value.reduce((pre, cur) => {
-    return pre + cur.list.filter((item) => !item.isRead).length;
-  }, 0);
-});
+    return pre + cur.list.filter(item => !item.isRead).length
+  }, 0)
+})
 </script>
 
+<template>
+  <n-popover placement="bottom" trigger="click" arrow-point-to-center class="!p-0">
+    <template #trigger>
+      <n-tooltip placement="bottom" trigger="hover">
+        <template #trigger>
+          <HeaderButton>
+            <n-badge :value="massageCount" :max="99" style="color: unset">
+              <i-icon-park-outline-remind />
+            </n-badge>
+          </HeaderButton>
+        </template>
+        <span>消息通知</span>
+      </n-tooltip>
+    </template>
+    <n-tabs v-model:value="currentTab" type="line" animated justify-content="space-evenly" class="w-390px">
+      <n-tab-pane v-for="item in MassageData" :key="item.key" :name="item.key">
+        <template #tab>
+          <n-space class="w-130px" justify="center">
+            {{ item.name }}
+            <n-badge v-bind="item.badgeProps" :value="item.list.filter((item) => !item.isRead).length" :max="99" />
+          </n-space>
+        </template>
+        <NoticeList :list="item.list" @read="handleRead" />
+      </n-tab-pane>
+    </n-tabs>
+  </n-popover>
+</template>
+
 <style scoped></style>

src/layouts/components/header/Reload.vue

@@ -1,3 +1,20 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import HeaderButton from '../common/HeaderButton.vue'
+import { useAppStore } from '@/store'
+const appStore = useAppStore()
+
+const loading = ref(false)
+
+const handleReload = () => {
+  loading.value = true
+  appStore.reloadPage()
+  setTimeout(() => {
+    loading.value = false
+  }, 800)
+}
+</script>
+
 <template>
   <n-tooltip placement="bottom" trigger="hover">
     <template #trigger>
@@ -9,21 +26,4 @@
   </n-tooltip>
 </template>
 
-<script setup lang="ts">
-import HeaderButton from '../common/HeaderButton.vue';
-import { useAppStore } from '@/store';
-import { ref } from 'vue';
-const appStore = useAppStore();
-
-const loading = ref(false);
-
-const handleReload = () => {
-  loading.value = true;
-  appStore.reloadPage();
-  setTimeout(() => {
-    loading.value = false;
-  }, 800);
-};
-</script>
-
 <style scoped></style>

src/layouts/components/header/Search.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+import HeaderButton from '../common/HeaderButton.vue'
+const handleSearch = () => {
+  window.$message.success('施工中...')
+}
+</script>
+
 <template>
   <n-tooltip
     placement="bottom"
@@ -12,11 +19,4 @@
   </n-tooltip>
 </template>
 
-<script setup lang="ts">
-import HeaderButton from '../common/HeaderButton.vue';
-const handleSearch = () => {
-  window.$message.success('施工中...')
-};
-</script>
-
 <style scoped></style>

src/layouts/components/header/Setting.vue

@@ -1,3 +1,15 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import HeaderButton from '../common/HeaderButton.vue'
+import { useAppStore } from '@/store'
+const appStore = useAppStore()
+
+const drawerActive = ref(false)
+const openSetting = () => {
+  drawerActive.value = !drawerActive.value
+}
+</script>
+
 <template>
   <n-tooltip
     placement="bottom"
@@ -97,16 +109,4 @@
   </n-tooltip>
 </template>
 
-<script setup lang="ts">
-import HeaderButton from '../common/HeaderButton.vue';
-import { ref } from 'vue';
-import { useAppStore } from '@/store';
-const appStore = useAppStore();
-
-const drawerActive = ref(false);
-const openSetting = () => {
-	drawerActive.value = !drawerActive.value;
-};
-</script>
-
 <style scoped></style>

src/layouts/components/header/UserCenter.vue

@@ -1,3 +1,45 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import HeaderButton from '../common/HeaderButton.vue'
+import { renderIcon } from '@/utils/icon'
+import { useAuthStore } from '@/store'
+
+const { userInfo, resetAuthStore } = useAuthStore()
+const router = useRouter()
+
+const options = [
+  {
+    label: '个人中心',
+    key: 'userCenter',
+    icon: renderIcon('carbon:user-avatar-filled-alt'),
+  },
+  {
+    type: 'divider',
+    key: 'd1',
+  },
+  {
+    label: '退出登录',
+    key: 'loginOut',
+    icon: renderIcon('icon-park-outline:logout'),
+  },
+]
+const handleSelect = (key: string | number) => {
+  if (key === 'loginOut') {
+    window.$dialog.info({
+      title: '退出登录',
+      content: '确认退出当前账号？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        resetAuthStore()
+      },
+    })
+  }
+  if (key === 'userCenter')
+    router.push('/userCenter')
+}
+</script>
+
 <template>
   <n-dropdown
     trigger="click"
@@ -15,47 +57,4 @@
   </n-dropdown>
 </template>
 
-<script setup lang="ts">
-	import HeaderButton from '../common/HeaderButton.vue';
-	import { renderIcon } from '@/utils/icon';
-	import { useAuthStore } from '@/store';
-	import { useRouter } from 'vue-router';
-
-const { userInfo, resetAuthStore } = useAuthStore();
-	const router = useRouter()
-
-	const options = [
-		{
-			label: '个人中心',
-			key: 'userCenter',
-			icon: renderIcon('carbon:user-avatar-filled-alt'),
-		},
-		{
-			type: 'divider',
-			key: 'd1',
-		},
-		{
-			label: '退出登录',
-			key: 'loginOut',
-			icon: renderIcon('icon-park-outline:logout'),
-		},
-	];
-	const handleSelect = (key: string | number) => {
-		if (key === 'loginOut') {
-			window.$dialog.info({
-          title: '退出登录',
-          content: '确认退出当前账号？',
-          positiveText: '确定',
-          negativeText: '取消',
-          onPositiveClick: () => {
-						resetAuthStore();
-          },
-        })
-		}
-		if (key === 'userCenter') {
-			router.push('/userCenter')
-		}
-	};
-</script>
-
 <style scoped></style>

src/layouts/components/index.ts

@@ -1,41 +1,41 @@
 /* 侧边栏组件 */
-import Logo from './sider/Logo.vue';
-import Menu from './sider/Menu.vue';
+import Logo from './sider/Logo.vue'
+import Menu from './sider/Menu.vue'
 
 /* 头部栏组件 */
-import Breadcrumb from './header/Breadcrumb.vue';
-import CollapaseButton from './header/CollapaseButton.vue';
-import FullScreen from './header/FullScreen.vue';
-import DarkMode from './header/DarkMode.vue';
-import Setting from './header/Setting.vue';
-import Github from './header/Github.vue';
-import Notices from './header/Notices.vue';
-import UserCenter from './header/UserCenter.vue';
-import Search from './header/Search.vue';
-import Reload from './header/Reload.vue';
+import Breadcrumb from './header/Breadcrumb.vue'
+import CollapaseButton from './header/CollapaseButton.vue'
+import FullScreen from './header/FullScreen.vue'
+import DarkMode from './header/DarkMode.vue'
+import Setting from './header/Setting.vue'
+import Github from './header/Github.vue'
+import Notices from './header/Notices.vue'
+import UserCenter from './header/UserCenter.vue'
+import Search from './header/Search.vue'
+import Reload from './header/Reload.vue'
 
 /* 标签栏组件  */
-import TabBar from './tab/TabBar.vue';
+import TabBar from './tab/TabBar.vue'
 
 /* 其他组件 */
 // 返回顶部
-import BackTop from './common/BackTop.vue';
-import Watermark from './common/Watermark.vue';
+import BackTop from './common/BackTop.vue'
+import Watermark from './common/Watermark.vue'
 
 export {
-	Breadcrumb,
-	CollapaseButton,
-	Menu,
-	Logo,
-	FullScreen,
-	DarkMode,
-	Setting,
-	Github,
-	Notices,
-	UserCenter,
-	Search,
-	Reload,
-	TabBar,
-	BackTop,
-	Watermark,
-};
+  Breadcrumb,
+  CollapaseButton,
+  Menu,
+  Logo,
+  FullScreen,
+  DarkMode,
+  Setting,
+  Github,
+  Notices,
+  UserCenter,
+  Search,
+  Reload,
+  TabBar,
+  BackTop,
+  Watermark,
+}

src/layouts/components/sider/Logo.vue

@@ -1,3 +1,11 @@
+<script setup lang="ts">
+import { useAppStore } from '@/store'
+import { useAppInfo, useAppRouter } from '@/hooks'
+const { name } = useAppInfo()
+const { toRoot } = useAppRouter()
+const appStore = useAppStore()
+</script>
+
 <template>
   <div
     class="h-60px text-2xl flex-center overflow-hidden cursor-pointer"
@@ -14,13 +22,4 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { useAppStore } from '@/store';
-import { useAppRouter } from '@/hooks';
-import { useAppInfo } from '@/hooks';
-const { name } = useAppInfo();
-const { toRoot } = useAppRouter();
-const appStore = useAppStore();
-</script>
-
 <style scoped></style>

src/layouts/components/sider/Menu.vue

@@ -1,3 +1,11 @@
+<script setup lang="ts">
+import { useAppStore } from '@/store'
+import { useRouteStore } from '~/src/store/modules/route'
+
+const appStore = useAppStore()
+const routesStore = useRouteStore()
+</script>
+
 <template>
   <n-menu
     :collapsed="appStore.collapsed"
@@ -9,13 +17,4 @@
   />
 </template>
 
-<script setup lang="ts">
-import { useAppStore } from '@/store';
-import { useRouteStore } from '~/src/store/modules/route';
-
-const appStore = useAppStore();
-const routesStore = useRouteStore();
-
-</script>
-
 <style scoped></style>

src/layouts/components/tab/TabBar.vue

@@ -1,3 +1,100 @@
+<script setup lang="ts">
+import type { RouteLocationNormalized } from 'vue-router'
+import { nextTick, ref } from 'vue'
+import { useAppStore, useTabStore } from '@/store'
+import { useAppRouter } from '@/hooks'
+import { renderIcon } from '@/utils'
+
+const tabStore = useTabStore()
+const appStore = useAppStore()
+
+const { routerPush, toRoot } = useAppRouter()
+
+function handleTab(route: RouteLocationNormalized) {
+  routerPush(route.path)
+}
+function handleClose(name: string) {
+  tabStore.closeTab(name)
+}
+const options = [
+  {
+    label: '刷新',
+    key: 'reload',
+    icon: renderIcon('icon-park-outline:redo'),
+  },
+  {
+    label: '关闭',
+    key: 'closeCurrent',
+    icon: renderIcon('icon-park-outline:close'),
+  },
+  {
+    label: '关闭其他',
+    key: 'closeOther',
+    icon: renderIcon('icon-park-outline:delete-four'),
+  },
+  {
+    label: '关闭左侧',
+    key: 'closeLeft',
+    icon: renderIcon('icon-park-outline:to-left'),
+  },
+  {
+    label: '关闭右侧',
+    key: 'closeRight',
+    icon: renderIcon('icon-park-outline:to-right'),
+  },
+  {
+    label: '全部关闭',
+    key: 'closeAll',
+    icon: renderIcon('icon-park-outline:fullwidth'),
+  },
+]
+const showDropdown = ref(false)
+const x = ref(0)
+const y = ref(0)
+const currentRoute = ref()
+
+function handleSelect(key: string) {
+  showDropdown.value = false
+  interface HandleFn {
+    [key: string]: any
+  }
+  const handleFn: HandleFn = {
+    reload() {
+      appStore.reloadPage()
+    },
+    closeCurrent() {
+      tabStore.closeTab(currentRoute.value.name)
+    },
+    closeOther() {
+      tabStore.closeOtherTabs(currentRoute.value.name)
+    },
+    closeLeft() {
+      tabStore.closeLeftTabs(currentRoute.value.name)
+    },
+    closeRight() {
+      tabStore.closeRightTabs(currentRoute.value.name)
+    },
+    closeAll() {
+      tabStore.closeAllTabs()
+    },
+  }
+  handleFn[key]()
+}
+function handleContextMenu(e: MouseEvent, route: RouteLocationNormalized) {
+  e.preventDefault()
+  currentRoute.value = route
+  showDropdown.value = false
+  nextTick().then(() => {
+    showDropdown.value = true
+    x.value = e.clientX
+    y.value = e.clientY
+  })
+}
+function onClickoutside() {
+  showDropdown.value = false
+}
+</script>
+
 <template>
   <div class="wh-full flex items-end">
     <n-tabs
@@ -41,101 +138,4 @@
   </div>
 </template>
 
-<script setup lang="ts">
-	import { useTabStore, useAppStore } from '@/store';
-	import { useAppRouter } from '@/hooks';
-	import { RouteLocationNormalized } from 'vue-router';
-	import { ref, nextTick } from 'vue';
-	import { renderIcon } from '@/utils';
-
-	const tabStore = useTabStore();
-	const appStore = useAppStore();
-
-	const { routerPush, toRoot } = useAppRouter();
-
-	function handleTab(route: RouteLocationNormalized) {
-		routerPush(route.path);
-	}
-	function handleClose(name: string) {
-		tabStore.closeTab(name);
-	}
-	const options = [
-		{
-			label: '刷新',
-			key: 'reload',
-			icon: renderIcon('icon-park-outline:redo'),
-		},
-		{
-			label: '关闭',
-			key: 'closeCurrent',
-			icon: renderIcon('icon-park-outline:close'),
-		},
-		{
-			label: '关闭其他',
-			key: 'closeOther',
-			icon: renderIcon('icon-park-outline:delete-four'),
-		},
-		{
-			label: '关闭左侧',
-			key: 'closeLeft',
-			icon: renderIcon('icon-park-outline:to-left'),
-		},
-		{
-			label: '关闭右侧',
-			key: 'closeRight',
-			icon: renderIcon('icon-park-outline:to-right'),
-		},
-		{
-			label: '全部关闭',
-			key: 'closeAll',
-			icon: renderIcon('icon-park-outline:fullwidth'),
-		},
-	];
-	const showDropdown = ref(false);
-	const x = ref(0);
-	const y = ref(0);
-	const currentRoute = ref();
-
-	function handleSelect(key: string) {
-		showDropdown.value = false;
-		type HandleFn = {
-			[key: string]: any;
-		};
-		const handleFn: HandleFn = {
-			reload() {
-				appStore.reloadPage();
-			},
-			closeCurrent() {
-				tabStore.closeTab(currentRoute.value.name);
-			},
-			closeOther() {
-				tabStore.closeOtherTabs(currentRoute.value.name);
-			},
-			closeLeft() {
-				tabStore.closeLeftTabs(currentRoute.value.name);
-			},
-			closeRight() {
-				tabStore.closeRightTabs(currentRoute.value.name);
-			},
-			closeAll() {
-				tabStore.closeAllTabs();
-			},
-		};
-		handleFn[key]();
-	}
-	function handleContextMenu(e: MouseEvent, route: RouteLocationNormalized) {
-		e.preventDefault();
-		currentRoute.value = route;
-		showDropdown.value = false;
-		nextTick().then(() => {
-			showDropdown.value = true;
-			x.value = e.clientX;
-			y.value = e.clientY;
-		});
-	}
-	function onClickoutside() {
-		showDropdown.value = false;
-	}
-</script>
-
 <style scoped></style>

src/layouts/index.ts

@@ -1,3 +1,3 @@
-const BasicLayout = () => import('./BasicLayout/index.vue');
+const BasicLayout = () => import('./BasicLayout/index.vue')
 
-export { BasicLayout };
+export { BasicLayout }

src/main.ts

@@ -1,29 +1,29 @@
-import { createApp } from 'vue';
-import App from './App.vue';
-import AppLoading from './components/common/appLoading.vue';
-import { setupRouter } from './router';
-import { setupAssets } from './plugins';
-import { setupStore } from './store';
+import { createApp } from 'vue'
+import App from './App.vue'
+import AppLoading from './components/common/appLoading.vue'
+import { setupRouter } from './router'
+import { setupAssets } from './plugins'
+import { setupStore } from './store'
 import { setupDirectives } from './directive'
 
 async function setupApp() {
-	// 引入静态资源
-	setupAssets();
-	// 载入全局loading加载状态
-	const appLoading = createApp(AppLoading);
-	appLoading.mount('#appLoading');
+  // 引入静态资源
+  setupAssets()
+  // 载入全局loading加载状态
+  const appLoading = createApp(AppLoading)
+  appLoading.mount('#appLoading')
 
-	// 创建vue实例
-	const app = createApp(App);
-	// 安装pinia全局状态库
-	setupStore(app);
-	// 安装自定义指令
-	setupDirectives(app)
-	// 安装router
-	await setupRouter(app);
-	// 挂载
-	await app.mount('#app');
-	// 卸载载入动画
-	appLoading.unmount();
+  // 创建vue实例
+  const app = createApp(App)
+  // 安装pinia全局状态库
+  setupStore(app)
+  // 安装自定义指令
+  setupDirectives(app)
+  // 安装router
+  await setupRouter(app)
+  // 挂载
+  await app.mount('#app')
+  // 卸载载入动画
+  appLoading.unmount()
 }
-setupApp();
+setupApp()

src/plugins/assets.ts

@@ -1,6 +1,6 @@
 // 全局引入的静态资源
-import 'uno.css';
-import '@/styles/css/index.css';
-import 'virtual:svg-icons-register';
+import 'uno.css'
+import '@/styles/css/index.css'
+import 'virtual:svg-icons-register'
 
 export default function setupAssets() {}

src/plugins/index.ts

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

src/router/guard/dynamic.ts

@@ -1,86 +1,87 @@
-import { RouteRecordRaw } from 'vue-router';
-import { BasicLayout } from '@/layouts/index';
-import { useRouteStore } from '@/store';
-import { usePermission } from '@/hooks';
+import type { RouteRecordRaw } from 'vue-router'
+import { BasicLayout } from '@/layouts/index'
+import { useRouteStore } from '@/store'
+import { usePermission } from '@/hooks'
 
 // 引入所有页面
-const modules = import.meta.glob('../../views/**/*.vue');
+const modules = import.meta.glob('../../views/**/*.vue')
 
 /* 含有子级的路由重定向到第一个子级 */
 function setRedirect(routes: AppRoute.Route[]) {
-	routes.forEach((route) => {
-		if (route.children) {
-			const nonHiddenChild = route.children.find((child) => !child.meta || !child.meta.hide);
-			if (nonHiddenChild) {
-				route.redirect = nonHiddenChild.path;
-			}
-			setRedirect(route.children);
-		}
-	});
+  routes.forEach((route) => {
+    if (route.children) {
+      const nonHiddenChild = route.children.find(child => !child.meta || !child.meta.hide)
+      if (nonHiddenChild)
+        route.redirect = nonHiddenChild.path
+
+      setRedirect(route.children)
+    }
+  })
 }
 /* 路由树转换成一维数组 */
 function FlatAuthRoutes(routes: AppRoute.Route[]) {
-	let result: AppRoute.Route[] = [];
-	routes.forEach((item: AppRoute.Route) => {
-		if (item.children) {
-			const temp = item.children || [];
-			delete item.children;
-			result.push(item);
-			result = [...result, ...FlatAuthRoutes(temp)];
-		} else {
-			result.push(item);
-		}
-	});
-	return result;
+  let result: AppRoute.Route[] = []
+  routes.forEach((item: AppRoute.Route) => {
+    if (item.children) {
+      const temp = item.children || []
+      delete item.children
+      result.push(item)
+      result = [...result, ...FlatAuthRoutes(temp)]
+    }
+    else {
+      result.push(item)
+    }
+  })
+  return result
 }
 /* 路由无权限过滤 */
 function filterPermissionRoutes(routes: AppRoute.Route[]) {
-	const { hasPermission } = usePermission();
-	return routes.filter((route) => {
-		return hasPermission(route.meta.roles);
-	});
+  const { hasPermission } = usePermission()
+  return routes.filter((route) => {
+    return hasPermission(route.meta.roles)
+  })
 }
 
 function createCatheRoutes(routes: AppRoute.Route[]) {
-	return routes
-		.filter((item) => {
-			return item.meta.keepAlive;
-		})
-		.map((item) => item.name);
+  return routes
+    .filter((item) => {
+      return item.meta.keepAlive
+    })
+    .map(item => item.name)
 }
 export async function createDynamicRoutes(routes: AppRoute.Route[]) {
-	/* 复制一层 */
-	let resultRouter = JSON.parse(JSON.stringify(routes));
-	/* 设置路由重定向到子级第一个 */
-	setRedirect(resultRouter);
-	// 数组降维成一维数组,然后删除所有的childen
-	resultRouter = FlatAuthRoutes(resultRouter);
-	/* 路由权限过滤 */
-	resultRouter = filterPermissionRoutes(resultRouter);
-	// 过滤需要缓存的路由name数组
-	const routeStore = useRouteStore();
-	routeStore.cacheRoutes = createCatheRoutes(resultRouter);
-	// 生成路由，有redirect的不需要引入文件
-	resultRouter = resultRouter.map((item: any) => {
-		if (!item.redirect) {
-			// 动态加载对应页面
-			item['component'] = modules[`../../views${item.path}/index.vue`];
-		}
-		return item;
-	});
+  /* 复制一层 */
+  let resultRouter = JSON.parse(JSON.stringify(routes))
+  /* 设置路由重定向到子级第一个 */
+  setRedirect(resultRouter)
+  // 数组降维成一维数组,然后删除所有的childen
+  resultRouter = FlatAuthRoutes(resultRouter)
+  /* 路由权限过滤 */
+  resultRouter = filterPermissionRoutes(resultRouter)
+  // 过滤需要缓存的路由name数组
+  const routeStore = useRouteStore()
+  routeStore.cacheRoutes = createCatheRoutes(resultRouter)
+  // 生成路由，有redirect的不需要引入文件
+  resultRouter = resultRouter.map((item: any) => {
+    if (!item.redirect) {
+      // 动态加载对应页面
+      item.component = modules[`../../views${item.path}/index.vue`]
+    }
+    return item
+  })
 
-	const appRootRoute: RouteRecordRaw = {
-		path: '/appRoot',
-		name: 'appRoot',
-		redirect: '/dashboard/workbench',
-		component: BasicLayout,
-		meta: {
-			title: '首页',
-			icon: 'icon-park-outline:home',
-		},
-		children: [],
-	};
-	// 根据角色过滤后的插入根路由中
-	appRootRoute.children = resultRouter as unknown as RouteRecordRaw[];
-	return appRootRoute;
+  const appRootRoute: RouteRecordRaw = {
+    path: '/appRoot',
+    name: 'appRoot',
+    redirect: '/dashboard/workbench',
+    component: BasicLayout,
+    meta: {
+      title: '首页',
+      icon: 'icon-park-outline:home',
+    },
+    children: [],
+  }
+  // 根据角色过滤后的插入根路由中
+  appRootRoute.children = resultRouter as unknown as RouteRecordRaw[]
+  return appRootRoute
 }

src/router/guard/index.ts

@@ -1,39 +1,38 @@
-import type { Router } from 'vue-router';
-import { createPermissionGuard } from './permission';
-import { useAppInfo } from '@/hooks';
-import { useRouteStore, useTabStore } from '@/store';
-
-const { title } = useAppInfo();
+import type { Router } from 'vue-router'
+import { createPermissionGuard } from './permission'
+import { useAppInfo } from '@/hooks'
+import { useRouteStore, useTabStore } from '@/store'
 
+const { title } = useAppInfo()
 
 export function setupRouterGuard(router: Router) {
-	router.beforeEach(async (to, from, next) => {
-		// 判断是否是外链，如果是直接打开网页并拦截跳转
-		if (to.meta.herf) {
-			window.open(to.meta.herf);
-			return false;
-		}
-		// 开始 loadingBar
-		window.$loadingBar?.start();
-		// 权限操作
-		await createPermissionGuard(to, from, next);
-	});
+  router.beforeEach(async (to, from, next) => {
+    // 判断是否是外链，如果是直接打开网页并拦截跳转
+    if (to.meta.herf) {
+      window.open(to.meta.herf)
+      return false
+    }
+    // 开始 loadingBar
+    window.$loadingBar?.start()
+    // 权限操作
+    await createPermissionGuard(to, from, next)
+  })
 
-	router.beforeResolve(async (to) => {
-		const routeStore = useRouteStore();
-		const tabStore = useTabStore();
-		// 设置菜单高亮
-		routeStore.setActiveMenu(to.meta.activeMenu ?? to.fullPath);
-		// 添加tabs
-		tabStore.addTab(to);
-		// 设置高亮标签;
-		tabStore.setCurrentTab(to.name as string);
-	})
+  router.beforeResolve(async (to) => {
+    const routeStore = useRouteStore()
+    const tabStore = useTabStore()
+    // 设置菜单高亮
+    routeStore.setActiveMenu(to.meta.activeMenu ?? to.fullPath)
+    // 添加tabs
+    tabStore.addTab(to)
+    // 设置高亮标签;
+    tabStore.setCurrentTab(to.name as string)
+  })
 
-	router.afterEach((to) => {
-		// 修改网页标题
-		document.title = `${to.meta.title} - ${title}`;
-		// 结束 loadingBar
-		window.$loadingBar?.finish();
-	});
+  router.afterEach((to) => {
+    // 修改网页标题
+    document.title = `${to.meta.title} - ${title}`
+    // 结束 loadingBar
+    window.$loadingBar?.finish()
+  })
 }

src/router/guard/permission.ts

@@ -1,36 +1,36 @@
-import { RouteLocationNormalized, NavigationGuardNext } from 'vue-router';
-import { local } from '@/utils';
-import { useRouteStore } from '@/store';
+import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
+import { local } from '@/utils'
+import { useRouteStore } from '@/store'
 
 export async function createPermissionGuard(
   to: RouteLocationNormalized,
   from: RouteLocationNormalized,
-  next: NavigationGuardNext
+  next: NavigationGuardNext,
 ) {
-  const routeStore = useRouteStore();
+  const routeStore = useRouteStore()
 
   // 判断有无TOKEN,登录鉴权
-  const isLogin = Boolean(local.get('token'));
+  const isLogin = Boolean(local.get('token'))
   if (!isLogin) {
-    if (to.name == 'login') {
+    if (to.name === 'login')
       next()
-    }
+
     if (to.name !== 'login') {
-      const redirect = to.name === '404' ? undefined : to.fullPath;
-      next({ path: '/login', query: { redirect } });
+      const redirect = to.name === '404' ? undefined : to.fullPath
+      next({ path: '/login', query: { redirect } })
     }
     return false
   }
 
   // 判断路由有无进行初始化
   if (!routeStore.isInitAuthRoute) {
-    await routeStore.initAuthRoute();
+    await routeStore.initAuthRoute()
     // 动态路由加载完回到根路由
     if (to.name === '404' && to.redirectedFrom) {
       // 等待权限路由加载好了，回到之前的路由,否则404
-      const path = to.redirectedFrom?.fullPath;
-      next({ path, replace: true, query: to.query, hash: to.hash });
-      return false;
+      const path = to.redirectedFrom?.fullPath
+      next({ path, replace: true, query: to.query, hash: to.hash })
+      return false
     }
   }
 
@@ -43,7 +43,7 @@ export async function createPermissionGuard(
   // 判断当前页是否在login,则定位去首页
   if (to.name === 'login') {
     next({ path: '/appRoot' })
-    return false;
+    return false
   }
 
   next()

src/router/index.ts

@@ -1,17 +1,17 @@
-import type { App } from 'vue';
-import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router';
-import { setupRouterGuard } from './guard';
-import { routes } from './routes';
+import type { App } from 'vue'
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import { setupRouterGuard } from './guard'
+import { routes } from './routes'
 
-const { VITE_ROUTE_MODE = 'hash', VITE_BASE_URL } = import.meta.env;
+const { VITE_ROUTE_MODE = 'hash', VITE_BASE_URL } = import.meta.env
 export const router = createRouter({
-	history: VITE_ROUTE_MODE === 'hash' ? createWebHashHistory(VITE_BASE_URL) : createWebHistory(VITE_BASE_URL),
-	routes,
-});
+  history: VITE_ROUTE_MODE === 'hash' ? createWebHashHistory(VITE_BASE_URL) : createWebHistory(VITE_BASE_URL),
+  routes,
+})
 // 安装vue路由
 export async function setupRouter(app: App) {
   // 添加路由守卫
-  setupRouterGuard(router);
-  app.use(router);
-  await router.isReady(); //https://router.vuejs.org/zh/api/index.html#isready
+  setupRouterGuard(router)
+  app.use(router)
+  await router.isReady() // https://router.vuejs.org/zh/api/index.html#isready
 }

src/router/modules/dashboard.ts

@@ -27,4 +27,4 @@ export const dashboard = {
       },
     },
   ],
-};
+}

src/router/modules/index.ts

@@ -1,4 +1,4 @@
-import { dashboard } from './dashboard';
-import { test } from './test';
+import { dashboard } from './dashboard'
+import { test } from './test'
 
-export const staticRoutes = [dashboard, test];
+export const staticRoutes = [dashboard, test]

src/router/modules/test.ts

@@ -60,4 +60,4 @@ export const test = {
       ],
     },
   ],
-};
+}

src/router/routes/index.ts

@@ -1,5 +1,5 @@
-import { RouteRecordRaw } from 'vue-router';
-import { BasicLayout } from '@/layouts/index';
+import type { RouteRecordRaw } from 'vue-router'
+import { BasicLayout } from '@/layouts/index'
 
 /* 页面中的一些固定路由，错误页等 */
 export const routes: RouteRecordRaw[] = [
@@ -51,4 +51,4 @@ export const routes: RouteRecordRaw[] = [
     redirect: '/404',
   },
 
-];
+]

src/service/api/login.ts

@@ -1,19 +1,19 @@
-import { mockRequest } from '../http';
+import { mockRequest } from '../http'
 
 interface Ilogin {
-	userName: string;
-	password: string;
+  userName: string
+  password: string
 }
 
 export function fetchLogin(params: Ilogin) {
-	return mockRequest.post<any>('/login', params);
+  return mockRequest.post<any>('/login', params)
 }
 export function fetchUpdateToken(params: any) {
-	return mockRequest.post<ApiAuth.loginToken>('/updateToken', params);
+  return mockRequest.post<ApiAuth.loginToken>('/updateToken', params)
 }
-export function fetchUserInfo(params:any) {
-	return mockRequest.get<Auth.UserInfo>('/getUserInfo',{params});
+export function fetchUserInfo(params: any) {
+  return mockRequest.get<Auth.UserInfo>('/getUserInfo', { params })
 }
 export function fetchUserRoutes(params: { userId: number }) {
-	return mockRequest.post<any>('/getUserRoutes', params);
+  return mockRequest.post<any>('/getUserRoutes', params)
 }

src/service/api/mock.ts

@@ -1,5 +1,5 @@
-import { mockRequest } from '../http';
+import { mockRequest } from '../http'
 
 export function fetchUserList() {
-  return mockRequest.get('/userList');
+  return mockRequest.get('/userList')
 }

src/service/api/test.ts

@@ -1,46 +1,45 @@
-import { request } from '../http';
-import { mockRequest } from '../http';
+import { mockRequest, request } from '../http'
 
 /* get方法测试 */
-export function fetachGet(params?:any) {
-	return request.get('/getAPI', { params });
+export function fetachGet(params?: any) {
+  return request.get('/getAPI', { params })
 }
 /* post方法测试 */
 export function fetachPost(data: any) {
-	return request.post('/postAPI', data);
+  return request.post('/postAPI', data)
 }
 /* formPost方法测试 */
 export function fetachFormPost(data: any) {
-	return request.formPost('/postAPI', data);
+  return request.formPost('/postAPI', data)
 }
 /* delete方法测试 */
 export function fetachDelete() {
-	return request.delete('/deleteAPI');
+  return request.delete('/deleteAPI')
 }
 /* put方法测试 */
 export function fetachPut(data: any) {
-	return request.put('/putAPI', data);
+  return request.put('/putAPI', data)
 }
 
 /* 测试状态码500失败 */
 export function testFailedRequest() {
-	return request.get('/filedRequest');
+  return request.get('/filedRequest')
 }
 
 /* 测试业务码500失败 */
 export function testFailedResponse() {
-	return request.get('/filedResponse');
+  return request.get('/filedResponse')
 }
 /* 测试token刷新接口 */
 export function testUpdataToken() {
-	return request.get('/updataToken');
+  return request.get('/updataToken')
 }
 /* 测试token刷新接口 */
 export function testFailedResponse_NT() {
-	return request.get('/failedResponse_NT');
+  return request.get('/failedResponse_NT')
 }
 
 /* mock方法测试 */
 export function fetchMock() {
-	return mockRequest.post('/login');
+  return mockRequest.post('/login')
 }

src/service/http/handle.ts

@@ -1,19 +1,19 @@
-import type { AxiosResponse, AxiosError, AxiosRequestConfig } from 'axios';
+import type { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'
+import { showError } from './utils'
 import {
-	DEFAULT_REQUEST_ERROR_CODE,
-	DEFAULT_REQUEST_ERROR_MSG,
-	NETWORK_ERROR_CODE,
-	NETWORK_ERROR_MSG,
-	REQUEST_TIMEOUT_CODE,
-	REQUEST_TIMEOUT_MSG,
-	ERROR_STATUS,
-} from '@/config';
-import { useAuthStore } from '@/store';
-import { fetchUpdateToken } from '@/service';
-import { local } from '@/utils';
-import { showError } from './utils';
+  DEFAULT_REQUEST_ERROR_CODE,
+  DEFAULT_REQUEST_ERROR_MSG,
+  ERROR_STATUS,
+  NETWORK_ERROR_CODE,
+  NETWORK_ERROR_MSG,
+  REQUEST_TIMEOUT_CODE,
+  REQUEST_TIMEOUT_MSG,
+} from '@/config'
+import { useAuthStore } from '@/store'
+import { fetchUpdateToken } from '@/service'
+import { local } from '@/utils'
 
-type ErrorStatus = keyof typeof ERROR_STATUS;
+type ErrorStatus = keyof typeof ERROR_STATUS
 
 /**
  * @description: 处理axios或http错误
@@ -21,32 +21,32 @@ type ErrorStatus = keyof typeof ERROR_STATUS;
  * @return {*}
  */
 export function handleAxiosError(err: AxiosError) {
-	const error: Service.RequestError = {
-		type: 'Axios',
-		code: DEFAULT_REQUEST_ERROR_CODE,
-		msg: DEFAULT_REQUEST_ERROR_MSG,
-	};
-	// 网络错误
-	if (!window.navigator.onLine || err.message === 'Network Error') {
-		Object.assign(error, { code: NETWORK_ERROR_CODE, msg: NETWORK_ERROR_MSG });
-	}
-	// 超时错误
-	if (err.code === REQUEST_TIMEOUT_CODE && err.message.includes('timeout')) {
-		Object.assign(error, {
-			code: REQUEST_TIMEOUT_CODE,
-			msg: REQUEST_TIMEOUT_MSG,
-		});
-	}
-	// 请求错误
-	if (err.response) {
-		const errorCode: ErrorStatus = (err.response?.status as ErrorStatus) || 'DEFAULT';
-		const msg = ERROR_STATUS[errorCode];
-		Object.assign(error, { code: errorCode, msg });
-	}
+  const error: Service.RequestError = {
+    type: 'Axios',
+    code: DEFAULT_REQUEST_ERROR_CODE,
+    msg: DEFAULT_REQUEST_ERROR_MSG,
+  }
+  // 网络错误
+  if (!window.navigator.onLine || err.message === 'Network Error')
+    Object.assign(error, { code: NETWORK_ERROR_CODE, msg: NETWORK_ERROR_MSG })
 
-	showError(error);
+  // 超时错误
+  if (err.code === REQUEST_TIMEOUT_CODE && err.message.includes('timeout')) {
+    Object.assign(error, {
+      code: REQUEST_TIMEOUT_CODE,
+      msg: REQUEST_TIMEOUT_MSG,
+    })
+  }
+  // 请求错误
+  if (err.response) {
+    const errorCode: ErrorStatus = (err.response?.status as ErrorStatus) || 'DEFAULT'
+    const msg = ERROR_STATUS[errorCode]
+    Object.assign(error, { code: errorCode, msg })
+  }
 
-	return error;
+  showError(error)
+
+  return error
 }
 
 /**
@@ -55,25 +55,26 @@ export function handleAxiosError(err: AxiosError) {
  * @return {*}
  */
 export function handleResponseError(response: AxiosResponse) {
-	const error: Service.RequestError = {
-		type: 'Axios',
-		code: DEFAULT_REQUEST_ERROR_CODE,
-		msg: DEFAULT_REQUEST_ERROR_MSG,
-	};
+  const error: Service.RequestError = {
+    type: 'Axios',
+    code: DEFAULT_REQUEST_ERROR_CODE,
+    msg: DEFAULT_REQUEST_ERROR_MSG,
+  }
 
-	if (!window.navigator.onLine) {
-		// 网路错误
-		Object.assign(error, { code: NETWORK_ERROR_CODE, msg: NETWORK_ERROR_MSG });
-	} else {
-		// 请求成功的状态码非200的错误
-		const errorCode: ErrorStatus = response.status as ErrorStatus;
-		const msg = ERROR_STATUS[errorCode] || DEFAULT_REQUEST_ERROR_MSG;
-		Object.assign(error, { type: 'Response', code: errorCode, msg });
-	}
+  if (!window.navigator.onLine) {
+    // 网路错误
+    Object.assign(error, { code: NETWORK_ERROR_CODE, msg: NETWORK_ERROR_MSG })
+  }
+  else {
+    // 请求成功的状态码非200的错误
+    const errorCode: ErrorStatus = response.status as ErrorStatus
+    const msg = ERROR_STATUS[errorCode] || DEFAULT_REQUEST_ERROR_MSG
+    Object.assign(error, { type: 'Response', code: errorCode, msg })
+  }
 
-	showError(error);
+  showError(error)
 
-	return error;
+  return error
 }
 
 /**
@@ -83,16 +84,16 @@ export function handleResponseError(response: AxiosResponse) {
  * @return {*}
  */
 export function handleBusinessError(data: Record<string, any>, config: Service.BackendResultConfig) {
-	const { codeKey, msgKey } = config;
-	const error: Service.RequestError = {
-		type: 'Business',
-		code: data[codeKey],
-		msg: data[msgKey],
-	};
+  const { codeKey, msgKey } = config
+  const error: Service.RequestError = {
+    type: 'Business',
+    code: data[codeKey],
+    msg: data[msgKey],
+  }
 
-	showError(error);
+  showError(error)
 
-	return error;
+  return error
 }
 
 /**
@@ -102,18 +103,18 @@ export function handleBusinessError(data: Record<string, any>, config: Service.B
  * @return {*} result
  */
 export async function handleServiceResult<T = any>(data: any, error: Service.RequestError | null) {
-	if (error) {
-		const fail: Service.FailedResult = {
-			error,
-			data: null,
-		};
-		return fail;
-	}
-	const success: Service.SuccessResult<T> = {
-		error: null,
-		data,
-	};
-	return success;
+  if (error) {
+    const fail: Service.FailedResult = {
+      error,
+      data: null,
+    }
+    return fail
+  }
+  const success: Service.SuccessResult<T> = {
+    error: null,
+    data,
+  }
+  return success
 }
 
 /**
@@ -122,20 +123,19 @@ export async function handleServiceResult<T = any>(data: any, error: Service.Req
  * @return {*}
  */
 export async function handleRefreshToken(config: AxiosRequestConfig) {
-	const { resetAuthStore } = useAuthStore();
-	const refreshToken = local.get('refreshToken');
-	const { data } = await fetchUpdateToken(refreshToken);
-	if (data) {
-		local.set('refreshToken', data.token, )
-		local.set('token', data.refreshToken)
+  const { resetAuthStore } = useAuthStore()
+  const refreshToken = local.get('refreshToken')
+  const { data } = await fetchUpdateToken(refreshToken)
+  if (data) {
+    local.set('refreshToken', data.token)
+    local.set('token', data.refreshToken)
 
-		// 设置token
-		if (config.headers) {
-			typeof config.headers.set === 'function' && config.headers.set('Authorization', `Bearer ${data.token || ''}`);
-		}
+    // 设置token
+    if (config.headers)
+      typeof config.headers.set === 'function' && config.headers.set('Authorization', `Bearer ${data.token || ''}`)
 
-		return config;
-	}
-	resetAuthStore();
-	return null;
+    return config
+  }
+  resetAuthStore()
+  return null
 }

src/service/http/index.ts

@@ -1,11 +1,11 @@
-import { proxyConfig } from '@/config';
-import { createRequest } from './request';
+import { createRequest } from './request'
+import { proxyConfig } from '@/config'
 
-const { url, urlPattern } = proxyConfig[import.meta.env.MODE];
+const { url, urlPattern } = proxyConfig[import.meta.env.MODE]
 
-const isHttpProxy = import.meta.env.VITE_HTTP_PROXY || false;
+const isHttpProxy = import.meta.env.VITE_HTTP_PROXY || false
 
-export const request = createRequest({ baseURL: isHttpProxy ? urlPattern : url });
+export const request = createRequest({ baseURL: isHttpProxy ? urlPattern : url })
 
 // export const secondRequest = createRequest({ baseURL: isHttpProxy ? secondUrlPattern : secondUrl });
-export const mockRequest = createRequest({ baseURL: '/mock' });
+export const mockRequest = createRequest({ baseURL: '/mock' })

src/service/http/instance.ts

@@ -1,89 +1,87 @@
-import axios from 'axios';
-import type { AxiosInstance, AxiosRequestConfig, AxiosError } from 'axios';
-import { local } from '@/utils';
-import { REFRESH_TOKEN_CODE } from '@/config';
+import axios from 'axios'
+import type { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios'
 import {
-	handleAxiosError,
-	handleResponseError,
-	handleBusinessError,
-	handleServiceResult,
-	handleRefreshToken,
-} from './handle';
-import { transformRequestData, clearInvalidParameters } from './utils';
-
-import { DEFAULT_AXIOS_OPTIONS, DEFAULT_BACKEND_OPTIONS } from '@/config';
+  handleAxiosError,
+  handleBusinessError,
+  handleRefreshToken,
+  handleResponseError,
+  handleServiceResult,
+} from './handle'
+import { clearInvalidParameters, transformRequestData } from './utils'
+import { local } from '@/utils'
+import { DEFAULT_AXIOS_OPTIONS, DEFAULT_BACKEND_OPTIONS, REFRESH_TOKEN_CODE } from '@/config'
 
 /**
  * @description: 封装axios请求类
  */
-export default class createAxiosInstance {
-	// axios 实例
-	instance: AxiosInstance;
-	// 后台字段配置
-	backendConfig: Service.BackendResultConfig;
-	// 基础配置
-	axiosConfig: AxiosRequestConfig = {};
+export default class CreateAxiosInstance {
+  // axios 实例
+  instance: AxiosInstance
+  // 后台字段配置
+  backendConfig: Service.BackendResultConfig
+  // 基础配置
+  axiosConfig: AxiosRequestConfig = {}
 
-	constructor(axiosConfig: AxiosRequestConfig, backendConfig: Service.BackendResultConfig = DEFAULT_BACKEND_OPTIONS) {
-		// 设置了axios实例上的一些默认配置,新配置会覆盖默认配置
-		this.backendConfig = { ...DEFAULT_BACKEND_OPTIONS, ...backendConfig };
-		this.instance = axios.create({ ...DEFAULT_AXIOS_OPTIONS, ...axiosConfig });
-		this.setInterceptor();
-	}
-	// 设置类拦截器的函数
-	setInterceptor() {
-		this.instance.interceptors.request.use(
-			async (config) => {
-				const handleConfig = { ...config };
-				if (handleConfig.headers) {
-					// 清除无效字段
-					handleConfig.data = clearInvalidParameters(handleConfig.data)
-					// 数据格式转换
-					const contentType = handleConfig.headers.getContentType() as unknown as UnionKey.ContentType
-					if (contentType) {
-						handleConfig.data = await transformRequestData(handleConfig.data, contentType);
-					}					
-					// 设置token
-					handleConfig.headers.setAuthorization(`Bearer ${local.get('token') || ''}`)
-				}
-				return handleConfig;
-			},
-			(error: AxiosError) => {
-				const errorResult = handleAxiosError(error);
-				return handleServiceResult(null, errorResult);
-			}
-		);
-		this.instance.interceptors.response.use(
-			async (response): Promise<any> => {
-				const { status } = response;
-				if (status === 200) {
-					// 获取返回的数据
-					const apiData = response.data;
-					const { codeKey, successCode, dataKey } = this.backendConfig;
-					// 请求成功
-					if (apiData[codeKey] == successCode) {
-						return handleServiceResult(apiData[dataKey], null);
-					}
-					// token失效, 刷新token
-					if (REFRESH_TOKEN_CODE.includes(apiData[codeKey])) {
-						const config = await handleRefreshToken(response.config);
-						if (config) {
-							return this.instance.request(config);
-						}
-					}
-					// 业务请求失败
-					const errorResult = handleBusinessError(apiData, this.backendConfig);
-					return handleServiceResult(null, errorResult);
-				}
-				// 接口请求失败
-				const errorResult = handleResponseError(response);
-				return handleServiceResult(null, errorResult);
-			},
-			(error: AxiosError) => {
-				// 处理http常见错误，进行全局提示等
-				const errorResult = handleAxiosError(error);
-				return handleServiceResult(null, errorResult);
-			}
-		);
-	}
+  constructor(axiosConfig: AxiosRequestConfig, backendConfig: Service.BackendResultConfig = DEFAULT_BACKEND_OPTIONS) {
+    // 设置了axios实例上的一些默认配置,新配置会覆盖默认配置
+    this.backendConfig = { ...DEFAULT_BACKEND_OPTIONS, ...backendConfig }
+    this.instance = axios.create({ ...DEFAULT_AXIOS_OPTIONS, ...axiosConfig })
+    this.setInterceptor()
+  }
+
+  // 设置类拦截器的函数
+  setInterceptor() {
+    this.instance.interceptors.request.use(
+      async (config) => {
+        const handleConfig = { ...config }
+        if (handleConfig.headers) {
+          // 清除无效字段
+          handleConfig.data = clearInvalidParameters(handleConfig.data)
+          // 数据格式转换
+          const contentType = handleConfig.headers.getContentType() as unknown as UnionKey.ContentType
+          if (contentType)
+            handleConfig.data = await transformRequestData(handleConfig.data, contentType)
+
+          // 设置token
+          handleConfig.headers.setAuthorization(`Bearer ${local.get('token') || ''}`)
+        }
+        return handleConfig
+      },
+      (error: AxiosError) => {
+        const errorResult = handleAxiosError(error)
+        return handleServiceResult(null, errorResult)
+      },
+    )
+    this.instance.interceptors.response.use(
+      async (response): Promise<any> => {
+        const { status } = response
+        if (status === 200) {
+          // 获取返回的数据
+          const apiData = response.data
+          const { codeKey, successCode, dataKey } = this.backendConfig
+          // 请求成功
+          if (apiData[codeKey] === successCode)
+            return handleServiceResult(apiData[dataKey], null)
+
+          // token失效, 刷新token
+          if (REFRESH_TOKEN_CODE.includes(apiData[codeKey])) {
+            const config = await handleRefreshToken(response.config)
+            if (config)
+              return this.instance.request(config)
+          }
+          // 业务请求失败
+          const errorResult = handleBusinessError(apiData, this.backendConfig)
+          return handleServiceResult(null, errorResult)
+        }
+        // 接口请求失败
+        const errorResult = handleResponseError(response)
+        return handleServiceResult(null, errorResult)
+      },
+      (error: AxiosError) => {
+        // 处理http常见错误，进行全局提示等
+        const errorResult = handleAxiosError(error)
+        return handleServiceResult(null, errorResult)
+      },
+    )
+  }
 }

src/service/http/request.ts

@@ -1,30 +1,29 @@
-import type { AxiosRequestConfig, AxiosInstance } from 'axios';
-import createAxiosInstance from './instance';
+import type { AxiosInstance, AxiosRequestConfig } from 'axios'
+import CreateAxiosInstance from './instance'
 
-type RequestMethod = 'get' | 'post' | 'put' | 'delete' | 'patch';
+type RequestMethod = 'get' | 'post' | 'put' | 'delete' | 'patch'
 interface RequestParam {
-	url: string;
-	method?: RequestMethod;
-	data?: any;
-	config?: AxiosRequestConfig;
+  url: string
+  method?: RequestMethod
+  data?: any
+  config?: AxiosRequestConfig
 }
 
 async function getRequestResponse(options: {
-	instance: AxiosInstance;
-	method: RequestMethod;
-	url: string;
-	data?: any;
-	config?: AxiosRequestConfig;
+  instance: AxiosInstance
+  method: RequestMethod
+  url: string
+  data?: any
+  config?: AxiosRequestConfig
 }) {
-	const { instance, method, url, data, config } = options;
+  const { instance, method, url, data, config } = options
 
-	let res: any;
-	if (method === 'get' || method === 'delete') {
-		res = await instance[method](url, config);
-	} else {
-		res = await instance[method](url, data, config);
-	}
-	return res;
+  let res: any
+  if (method === 'get' || method === 'delete')
+    res = await instance[method](url, config)
+  else res = await instance[method](url, data, config)
+
+  return res
 }
 
 /**
@@ -33,82 +32,95 @@ async function getRequestResponse(options: {
  * @param {Service} backendConfig - 后台字段配置
  * @return {*}
  */
-export function createRequest(axiosConfig: AxiosRequestConfig, backendConfig?: Service.BackendResultConfig) {
-	const axiosInstance = new createAxiosInstance(axiosConfig, backendConfig);
-	/**
-	 * 异步promise请求
-	 * @param param - 请求参数
-	 * - url: 请求地址
-	 * - method: 请求方法(默认get)
-	 * - data: 请求的body的data
-	 * - config: axios配置
-	 */
-	async function asyncRequest<T>(param: RequestParam): Promise<Service.RequestResult<T>> {
-		const { url, method = 'get', data, config } = param;
-		const { instance } = axiosInstance;
-		const res = (await getRequestResponse({
-			instance,
-			method,
-			url,
-			data,
-			config,
-		})) as Service.RequestResult<T>;
-		return res;
-	}
-	/**
-	 * get请求
-	 * @param url - 请求地址
-	 * @param config - axios配置
-	 */
-	function get<T>(url: string, config?: AxiosRequestConfig) {
-		return asyncRequest<T>({ url, config: config });
-	}
+export function createRequest(
+  axiosConfig: AxiosRequestConfig,
+  backendConfig?: Service.BackendResultConfig,
+) {
+  const axiosInstance = new CreateAxiosInstance(axiosConfig, backendConfig)
+  /**
+   * 异步promise请求
+   * @param param - 请求参数
+   * - url: 请求地址
+   * - method: 请求方法(默认get)
+   * - data: 请求的body的data
+   * - config: axios配置
+   */
+  async function asyncRequest<T>(
+    param: RequestParam,
+  ): Promise<Service.RequestResult<T>> {
+    const { url, method = 'get', data, config } = param
+    const { instance } = axiosInstance
+    const res = (await getRequestResponse({
+      instance,
+      method,
+      url,
+      data,
+      config,
+    })) as Service.RequestResult<T>
+    return res
+  }
+  /**
+   * get请求
+   * @param url - 请求地址
+   * @param config - axios配置
+   */
+  function get<T>(url: string, config?: AxiosRequestConfig) {
+    return asyncRequest<T>({ url, config })
+  }
 
-	/**
-	 * post请求
-	 * @param url - 请求地址
-	 * @param data - 请求的body的data
-	 * @param config - axios配置
-	 */
-	function post<T>(url: string, data?: any, config?: AxiosRequestConfig) {
-		return asyncRequest<T>({ url, method: 'post', data, config: config });
-	}
+  /**
+   * post请求
+   * @param url - 请求地址
+   * @param data - 请求的body的data
+   * @param config - axios配置
+   */
+  function post<T>(url: string, data?: any, config?: AxiosRequestConfig) {
+    return asyncRequest<T>({ url, method: 'post', data, config })
+  }
 
-	/**
- * post请求-form参数形式
- * @param url - 请求地址
- * @param data - 请求的body的data
- * @param config - axios配置
- */
-	function formPost<T>(url: string, data?: any, config: AxiosRequestConfig = {}) {
-		config.headers = { 'Content-Type': 'application/x-www-form-urlencoded' }
-		return asyncRequest<T>({ url, method: 'post', data, config: config });
-	}
+  /**
+   * post请求-form参数形式
+   * @param url - 请求地址
+   * @param data - 请求的body的data
+   * @param config - axios配置
+   */
+  function formPost<T>(
+    url: string,
+    data?: any,
+    config: AxiosRequestConfig = {},
+  ) {
+    config.headers = { 'Content-Type': 'application/x-www-form-urlencoded' }
+    return asyncRequest<T>({ url, method: 'post', data, config })
+  }
 
-	/**
-	 * delete请求
-	 * @param url - 请求地址
-	 * @param config - axios配置
-	 */
-	function handleDelete<T>(url: string, params?: any, config?: AxiosRequestConfig) {
-		return asyncRequest<T>({ url, method: 'delete', config: config });
-	}
+  /**
+   * delete请求
+   * @param url - 请求地址
+   * @param config - axios配置
+   */
+  function handleDelete<T>(
+    url: string,
+    params?: any,
+    config?: AxiosRequestConfig,
+  ) {
+    return asyncRequest<T>({ url, method: 'delete', config })
+  }
 
-	/**
-	 * put请求
-	 * @param url - 请求地址
-	 * @param data - 请求的body的data
-	 * @param config - axios配置
-	 */
-	function put<T>(url: string, data?: any, config?: AxiosRequestConfig) {
-		return asyncRequest<T>({ url, method: 'put', data, config: config });
-	}
+  /**
+   * put请求
+   * @param url - 请求地址
+   * @param data - 请求的body的data
+   * @param config - axios配置
+   */
+  function put<T>(url: string, data?: any, config?: AxiosRequestConfig) {
+    return asyncRequest<T>({ url, method: 'put', data, config })
+  }
 
-	return {
-		get,
-		post,
-		formPost,
-		put,
-		delete: handleDelete,
-	};
+  return {
+    get,
+    post,
+    formPost,
+    put,
+    delete: handleDelete,
+  }
 }

src/service/http/utils.ts

@@ -1,52 +1,53 @@
-import { ERROR_MSG_DURATION, ERROR_NO_TIP_STATUS } from '@/config';
-import { isArray, isFile, isEmpty, isNullOrUnDef } from '@/utils';
-import qs from 'qs';
+import qs from 'qs'
+import { ERROR_MSG_DURATION, ERROR_NO_TIP_STATUS } from '@/config'
+import { isArray, isEmpty, isFile, isNullOrUnDef } from '@/utils'
 
 export function showError(error: Service.RequestError) {
-	// 如果error不需要提示,则跳过
-	const code = Number(error.code);
-	if (ERROR_NO_TIP_STATUS.includes(code)) return;
+  // 如果error不需要提示,则跳过
+  const code = Number(error.code)
+  if (ERROR_NO_TIP_STATUS.includes(code))
+    return
 
-	window.console.warn(error.code, error.msg);
-	window.$message?.error(error.msg, { duration: ERROR_MSG_DURATION });
+  window.console.warn(error.code, error.msg)
+  window.$message?.error(error.msg, { duration: ERROR_MSG_DURATION })
 }
 /**
  * 请求数据的转换
  * @param requestData - 请求数据
  * @param contentType - 请求头的Content-Type
  */
-export async function transformRequestData(requestData: any, contentType?: UnionKey.ContentType) {
-	// application/json类型不处理,清除发送参数的无效字段
-	let data: any = clearInvalidParameters(requestData);
+export async function transformRequestData(
+  requestData: any,
+  contentType?: UnionKey.ContentType,
+) {
+  // application/json类型不处理,清除发送参数的无效字段
+  let data: any = clearInvalidParameters(requestData)
 
-	// form类型转换
-	if (contentType === 'application/x-www-form-urlencoded') {
-		data = qs.stringify(data);
-	}
-	// form-data类型转换
-	if (contentType === 'multipart/form-data') {
-		data = await handleFormData(data);
-	}
+  // form类型转换
+  if (contentType === 'application/x-www-form-urlencoded')
+    data = qs.stringify(data)
 
-	return data;
+  // form-data类型转换
+  if (contentType === 'multipart/form-data')
+    data = await handleFormData(data)
+
+  return data
 }
 
 async function handleFormData(data: Record<string, any>) {
-	const formData = new FormData();
-	const entries = Object.entries(data);
+  const formData = new FormData()
+  const entries = Object.entries(data)
 
-	entries.forEach(async ([key, value]) => {
-		const isFileType = isFile(value) || (isArray(value) && value.length && isFile(value[0]));
+  entries.forEach(async ([key, value]) => {
+    const isFileType
+      = isFile(value) || (isArray(value) && value.length && isFile(value[0]))
 
-		if (isFileType && isArray(value)) {
-			value.forEach((item) => formData.append(key, item))
+    if (isFileType && isArray(value))
+      value.forEach(item => formData.append(key, item))
+    else formData.append(key, value)
+  })
 
-		} else {
-			formData.append(key, value);
-		}
-	});
-
-	return formData;
+  return formData
 }
 
 /**
@@ -54,10 +55,11 @@ async function handleFormData(data: Record<string, any>) {
  * @param requestData -接口提交的参数
  */
 export function clearInvalidParameters(requestData: Record<string, any>) {
-	const result: Record<string, any> = {};
-	for (const key in requestData) {
-		if (isEmpty(requestData[key]) || isNullOrUnDef(requestData[key])) continue;
-		result[key] = requestData[key];
-	}
-	return result;
+  const result: Record<string, any> = {}
+  for (const key in requestData) {
+    if (isEmpty(requestData[key]) || isNullOrUnDef(requestData[key]))
+      continue
+    result[key] = requestData[key]
+  }
+  return result
 }

src/service/index.ts

@@ -1,3 +1,3 @@
-export * from './api/test';
-export * from './api/login';
-export * from './api/mock';
+export * from './api/test'
+export * from './api/login'
+export * from './api/mock'

src/store/index.ts

@@ -1,10 +1,10 @@
-import { createPinia } from 'pinia';
-import piniaPluginPersist from 'pinia-plugin-persist';
-import type { App } from 'vue';
+import { createPinia } from 'pinia'
+import piniaPluginPersist from 'pinia-plugin-persist'
+import type { App } from 'vue'
 
 export function setupStore(app: App) {
-  const store = createPinia();
-  store.use(piniaPluginPersist);
-  app.use(store);
+  const store = createPinia()
+  store.use(piniaPluginPersist)
+  app.use(store)
 }
-export * from './modules';
+export * from './modules'

src/store/modules/app.ts

@@ -1,134 +1,136 @@
-import { defineStore } from 'pinia';
-import { nextTick } from 'vue';
-import { darkTheme, GlobalTheme } from 'naive-ui';
+import { defineStore } from 'pinia'
+import { nextTick } from 'vue'
+import type { GlobalTheme } from 'naive-ui'
+import { darkTheme } from 'naive-ui'
 
 interface AppStatus {
-	readonly footerText: string;
-	collapsed: boolean;
-	fullScreen: boolean;
-	darkMode: boolean;
-	grayMode: boolean;
-	colorWeak: boolean;
-	darkTheme: GlobalTheme | null;
-	loadFlag: boolean;
-	showLogo: boolean;
-	showTabs: boolean;
-	showBreadcrumb: boolean;
-	fixedHeader: boolean;
-	invertedSider: boolean;
-	invertedHeader: boolean;
-	showWatermark: boolean;
+  readonly footerText: string
+  collapsed: boolean
+  fullScreen: boolean
+  darkMode: boolean
+  grayMode: boolean
+  colorWeak: boolean
+  darkTheme: GlobalTheme | null
+  loadFlag: boolean
+  showLogo: boolean
+  showTabs: boolean
+  showBreadcrumb: boolean
+  fixedHeader: boolean
+  invertedSider: boolean
+  invertedHeader: boolean
+  showWatermark: boolean
 }
 
-const docEle = document.documentElement;
+const docEle = document.documentElement
 
 export const useAppStore = defineStore('app-store', {
-	state: (): AppStatus => {
-		return {
-			footerText: 'Copyright ©2023 Ench Admin',
-			collapsed: false,
-			fullScreen: false,
-			darkMode: false,
-			grayMode: false,
-			colorWeak: false,
-			darkTheme: null,
-			loadFlag: true,
-			showLogo: true,
-			showTabs: true,
-			showBreadcrumb: true,
-			fixedHeader: false,
-			invertedSider: false,
-			invertedHeader: false,
-			showWatermark: false,
-		};
-	},
-	actions: {
-		/* 切换侧边栏收缩 */
-		toggleCollapse() {
-			this.collapsed = !this.collapsed;
-		},
-		/* 切换全屏 */
-		toggleFullScreen() {
-			if (!document.fullscreenElement) {
-				this.fullScreen = true;
-				document.documentElement.requestFullscreen();
-			} else if (document.exitFullscreen) {
-				this.fullScreen = false;
-				document.exitFullscreen();
-			}
-		},
-		/* 切换主题 亮/深色 */
-		toggleDarkMode() {
-			this.darkMode = !this.darkMode;
-			if (this.darkMode) {
-				this.darkTheme = darkTheme;
-			} else {
-				this.darkTheme = null;
-			}
-		},
-		/* 设置主题深色 */
-		setDarkMode(mode: boolean) {
-			if (mode) {
-				this.darkMode = true;
-				this.darkTheme = darkTheme;
-			} else {
-				this.darkMode = false;
-				this.darkTheme = null;
-			}
-		},
-		/**
-		 * @description: 页面内容重载
-		 * @param {number} delay - 延迟毫秒数
-		 * @return {*}
-		 */
-		async reloadPage(delay = 600) {
-			this.loadFlag = false;
-			await nextTick();
-			if (delay) {
-				setTimeout(() => {
-					this.loadFlag = true;
-				}, delay);
-			} else {
-				this.loadFlag = true;
-			}
-		},
-		/* 切换色弱模式 */
-		toggleColorWeak() {
-			docEle.classList.toggle('color-weak');
-			this.colorWeak = docEle.classList.contains('color-weak');
-		},
-		/* 切换灰色模式 */
-		toggleGrayMode() {
-			docEle.classList.toggle('gray-mode');
-			this.grayMode = docEle.classList.contains('gray-mode');
-		},
-		/* 切换显示logo */
-		toggleShowLogo() {
-			this.showLogo = !this.showLogo;
-		},
-		/* 切换显示多页签 */
-		toggleShowTabs() {
-			this.showTabs = !this.showTabs;
-		},
-		/* 切换显示多页签 */
-		toggleShowBreadcrumb() {
-			this.showBreadcrumb = !this.showBreadcrumb;
-		},
-		/* 切换固定头部和标签页 */
-		toggleFixedHeader() {
-			this.fixedHeader = !this.fixedHeader;
-		},
-		/* 切换固定底部 */
-		toggleInvertedSider() {
-			this.invertedSider = !this.invertedSider;
-		},
-		/* 切换固定底部 */
-		toggleInvertedHeader() {
-			this.invertedHeader = !this.invertedHeader;
-		},
-		/* 切换固定底部 */
-		toggleShowWatermark() {
-			this.showWatermark = !this.showWatermark;
-		},
-	},
-});
+  state: (): AppStatus => {
+    return {
+      footerText: 'Copyright ©2023 Ench Admin',
+      collapsed: false,
+      fullScreen: false,
+      darkMode: false,
+      grayMode: false,
+      colorWeak: false,
+      darkTheme: null,
+      loadFlag: true,
+      showLogo: true,
+      showTabs: true,
+      showBreadcrumb: true,
+      fixedHeader: false,
+      invertedSider: false,
+      invertedHeader: false,
+      showWatermark: false,
+    }
+  },
+  actions: {
+    /* 切换侧边栏收缩 */
+    toggleCollapse() {
+      this.collapsed = !this.collapsed
+    },
+    /* 切换全屏 */
+    toggleFullScreen() {
+      if (!document.fullscreenElement) {
+        this.fullScreen = true
+        document.documentElement.requestFullscreen()
+      }
+      else if (document.exitFullscreen) {
+        this.fullScreen = false
+        document.exitFullscreen()
+      }
+    },
+    /* 切换主题 亮/深色 */
+    toggleDarkMode() {
+      this.darkMode = !this.darkMode
+      if (this.darkMode)
+        this.darkTheme = darkTheme
+      else this.darkTheme = null
+    },
+    /* 设置主题深色 */
+    setDarkMode(mode: boolean) {
+      if (mode) {
+        this.darkMode = true
+        this.darkTheme = darkTheme
+      }
+      else {
+        this.darkMode = false
+        this.darkTheme = null
+      }
+    },
+    /**
+     * @description: 页面内容重载
+     * @param {number} delay - 延迟毫秒数
+     * @return {*}
+     */
+    async reloadPage(delay = 600) {
+      this.loadFlag = false
+      await nextTick()
+      if (delay) {
+        setTimeout(() => {
+          this.loadFlag = true
+        }, delay)
+      }
+      else {
+        this.loadFlag = true
+      }
+    },
+    /* 切换色弱模式 */
+    toggleColorWeak() {
+      docEle.classList.toggle('color-weak')
+      this.colorWeak = docEle.classList.contains('color-weak')
+    },
+    /* 切换灰色模式 */
+    toggleGrayMode() {
+      docEle.classList.toggle('gray-mode')
+      this.grayMode = docEle.classList.contains('gray-mode')
+    },
+    /* 切换显示logo */
+    toggleShowLogo() {
+      this.showLogo = !this.showLogo
+    },
+    /* 切换显示多页签 */
+    toggleShowTabs() {
+      this.showTabs = !this.showTabs
+    },
+    /* 切换显示多页签 */
+    toggleShowBreadcrumb() {
+      this.showBreadcrumb = !this.showBreadcrumb
+    },
+    /* 切换固定头部和标签页 */
+    toggleFixedHeader() {
+      this.fixedHeader = !this.fixedHeader
+    },
+    /* 切换固定底部 */
+    toggleInvertedSider() {
+      this.invertedSider = !this.invertedSider
+    },
+    /* 切换固定底部 */
+    toggleInvertedHeader() {
+      this.invertedHeader = !this.invertedHeader
+    },
+    /* 切换固定底部 */
+    toggleShowWatermark() {
+      this.showWatermark = !this.showWatermark
+    },
+  },
+})

src/store/modules/auth.ts

@@ -1,117 +1,116 @@
-import { defineStore } from 'pinia';
-import { fetchLogin, fetchUserInfo } from '@/service';
-import { router } from '@/router';
-import { useAppRouter } from '@/hooks';
-import { unref } from 'vue';
-import { useRouteStore } from './route';
-import { local } from '@/utils';
+import { defineStore } from 'pinia'
+import { unref } from 'vue'
+import { useRouteStore } from './route'
+import { fetchLogin, fetchUserInfo } from '@/service'
+import { router } from '@/router'
+import { useAppRouter } from '@/hooks'
+import { local } from '@/utils'
 
 const emptyInfo: Auth.UserInfo = {
-	userId: 0,
-	userName: '',
-	nickName: '',
-	avatar: '',
-	role: 'user',
-};
+  userId: 0,
+  userName: '',
+  nickName: '',
+  avatar: '',
+  role: 'user',
+}
 export const useAuthStore = defineStore('auth-store', {
-	state: () => {
-		return {
-			userInfo: local.get('userInfo') || emptyInfo,
-			token: local.get('token') || '',
-			refreshToken: local.get('refreshToken') || '',
-			loginLoading: false,
-		};
-	},
-	getters: {
-		/** 是否登录 */
-		isLogin(state) {
-			return Boolean(state.token);
-		},
-	},
-	actions: {
-		/* 登录退出，重置用户信息等 */
-		resetAuthStore() {
-			const route = unref(router.currentRoute);
-			const { toLogin } = useAppRouter(false);
-			const { resetRouteStore } = useRouteStore();
-			// 清除本地缓存
-			this.clearAuthStorage();
-			// 清空路由、菜单等数据
-			resetRouteStore();
-			this.$reset();
-			if (route.meta.requiresAuth) {
-				toLogin();
-			}
-		},
-		clearAuthStorage() {
-			local.remove('token');
-			local.remove('refreshToken');
-			local.remove('userInfo');
-		},
+  state: () => {
+    return {
+      userInfo: local.get('userInfo') || emptyInfo,
+      token: local.get('token') || '',
+      refreshToken: local.get('refreshToken') || '',
+      loginLoading: false,
+    }
+  },
+  getters: {
+    /** 是否登录 */
+    isLogin(state) {
+      return Boolean(state.token)
+    },
+  },
+  actions: {
+    /* 登录退出，重置用户信息等 */
+    resetAuthStore() {
+      const route = unref(router.currentRoute)
+      const { toLogin } = useAppRouter(false)
+      const { resetRouteStore } = useRouteStore()
+      // 清除本地缓存
+      this.clearAuthStorage()
+      // 清空路由、菜单等数据
+      resetRouteStore()
+      this.$reset()
+      if (route.meta.requiresAuth)
+        toLogin()
+    },
+    clearAuthStorage() {
+      local.remove('token')
+      local.remove('refreshToken')
+      local.remove('userInfo')
+    },
 
-		/* 用户登录 */
-		async login(userName: string, password: string) {
-			this.loginLoading = true;
-			const { error, data } = await fetchLogin({ userName, password });
-			if (error) {
-				this.loginLoading = false;
-				return;
-			}
-			// 处理登录信息
-			await this.handleAfterLogin(data);
+    /* 用户登录 */
+    async login(userName: string, password: string) {
+      this.loginLoading = true
+      const { error, data } = await fetchLogin({ userName, password })
+      if (error) {
+        this.loginLoading = false
+        return
+      }
+      // 处理登录信息
+      await this.handleAfterLogin(data)
 
-			this.loginLoading = false;
-		},
+      this.loginLoading = false
+    },
 
-		/* 登录后的处理函数 */
-		async handleAfterLogin(data: ApiAuth.loginToken) {
-			// 将token和userInfo保存下来
-			const catchSuccess = await this.catchUserInfo(data);
+    /* 登录后的处理函数 */
+    async handleAfterLogin(data: ApiAuth.loginToken) {
+      // 将token和userInfo保存下来
+      const catchSuccess = await this.catchUserInfo(data)
 
-			// 添加路由和菜单
-			const { initAuthRoute } = useRouteStore();
-			await initAuthRoute();
+      // 添加路由和菜单
+      const { initAuthRoute } = useRouteStore()
+      await initAuthRoute()
 
-			// 登录写入信息成功
-			if (catchSuccess) {
-				// 进行重定向跳转
-				const { toLoginRedirect } = useAppRouter(false);
-				toLoginRedirect();
+      // 登录写入信息成功
+      if (catchSuccess) {
+        // 进行重定向跳转
+        const { toLoginRedirect } = useAppRouter(false)
+        toLoginRedirect()
 
-				// 触发用户提示
-				window.$notification?.success({
-					title: '登录成功!',
-					content: `欢迎回来😊，${this.userInfo.nickName}!`,
-					duration: 3000,
-				});
-				return;
-			}
-			// 如果不成功则重置存储
-			this.resetAuthStore();
-		},
+        // 触发用户提示
+        window.$notification?.success({
+          title: '登录成功!',
+          content: `欢迎回来😊，${this.userInfo.nickName}!`,
+          duration: 3000,
+        })
+        return
+      }
+      // 如果不成功则重置存储
+      this.resetAuthStore()
+    },
 
-		/* 缓存用户信息 */
-		async catchUserInfo(userToken: ApiAuth.loginToken) {
-			let catchSuccess = false;
-			const { token, refreshToken, userId } = userToken;
-			const { error, data } = await fetchUserInfo({ userId });
-			if (error) {
-				return catchSuccess;
-			}
-			// 先存储token
-			local.set('token', token);
-			local.set('refreshToken', refreshToken);
-			this.token = token;
-			this.refreshToken = refreshToken;
-			// 请求/存储用户信息
-			local.set('userInfo', data);
-			this.userInfo = data;
-			catchSuccess = true;
+    /* 缓存用户信息 */
+    async catchUserInfo(userToken: ApiAuth.loginToken) {
+      let catchSuccess = false
+      const { token, refreshToken, userId } = userToken
+      const { error, data } = await fetchUserInfo({ userId })
+      if (error)
+        return catchSuccess
 
-			return catchSuccess;
-		},
-		toggleUserRole(role: Auth.RoleType) {
-			this.login(role, '123456');
-		},
-	},
-});
+      // 先存储token
+      local.set('token', token)
+      local.set('refreshToken', refreshToken)
+      this.token = token
+      this.refreshToken = refreshToken
+      // 请求/存储用户信息
+      local.set('userInfo', data)
+      this.userInfo = data
+      catchSuccess = true
+
+      return catchSuccess
+    },
+    toggleUserRole(role: Auth.RoleType) {
+      this.login(role, '123456')
+    },
+  },
+})

src/store/modules/index.ts

@@ -1,4 +1,4 @@
-export * from './app';
-export * from './auth';
-export * from './route';
-export * from './tab';
+export * from './app'
+export * from './auth'
+export * from './route'
+export * from './tab'

src/store/modules/route.ts

@@ -1,188 +1,186 @@
-import { defineStore } from 'pinia';
-import { renderIcon, local } from '@/utils';
-import { MenuOption } from 'naive-ui';
-import { createDynamicRoutes } from '@/router/guard/dynamic';
-import { router } from '@/router';
-import { fetchUserRoutes } from '@/service';
-import { staticRoutes } from '@/router/modules';
-import { RouterLink } from 'vue-router';
-import { usePermission } from '@/hooks';
-import { h } from 'vue';
+import { defineStore } from 'pinia'
+import type { MenuOption } from 'naive-ui'
+import { RouterLink } from 'vue-router'
+import { h } from 'vue'
+import { local, renderIcon } from '@/utils'
+import { createDynamicRoutes } from '@/router/guard/dynamic'
+import { router } from '@/router'
+import { fetchUserRoutes } from '@/service'
+import { staticRoutes } from '@/router/modules'
+import { usePermission } from '@/hooks'
 
 interface RoutesStatus {
-	isInitAuthRoute: boolean;
-	menus: any;
-	userRoutes: AppRoute.Route[];
-	activeMenu: string | null;
-	authRouteMode: ImportMetaEnv['VITE_AUTH_ROUTE_MODE'];
-	cacheRoutes: string[];
+  isInitAuthRoute: boolean
+  menus: any
+  userRoutes: AppRoute.Route[]
+  activeMenu: string | null
+  authRouteMode: ImportMetaEnv['VITE_AUTH_ROUTE_MODE']
+  cacheRoutes: string[]
 }
 export const useRouteStore = defineStore('route-store', {
-	state: (): RoutesStatus => {
-		return {
-			userRoutes: [],
-			isInitAuthRoute: false,
-			menus: [],
-			activeMenu: null,
-			authRouteMode: import.meta.env.VITE_AUTH_ROUTE_MODE,
-			cacheRoutes: [],
-		};
-	},
-	actions: {
-		resetRouteStore() {
-			this.resetRoutes();
-			this.$reset();
-		},
-		resetRoutes() {
-			/* 删除后面添加的路由 */
-			router.removeRoute('appRoot');
-		},
-		/* 根据当前路由的name生成面包屑数据 */
-		createBreadcrumbFromRoutes(routeName = '/') {
-			const path: AppRoute.Route[] = [];
-			// 筛选所有包含目标的各级路由组合成一维数组
-			const getPathfromRoutes = (routeName: string, userRoutes: AppRoute.Route[]) => {
-				userRoutes.forEach((item) => {
-					if (this.hasPathinAllPath(routeName, item)) {
-						path.push(item);
-						if (item.children && item.children.length !== 0) {
-							getPathfromRoutes(routeName, item.children);
-						}
-					}
-				});
-			};
-			getPathfromRoutes(routeName, this.userRoutes);
-			return path;
-		},
-		/* 判断当前路由和子路由中是否存在为routeName的路由 */
-		hasPathinAllPath(routeName: string, userRoutes: AppRoute.Route) {
-			if (userRoutes.name === routeName) {
-				return true;
-			}
-			if (userRoutes.children && userRoutes.children.length !== 0) {
-				const arr: boolean[] = [];
-				userRoutes.children.forEach((item) => {
-					arr.push(this.hasPathinAllPath(routeName, item));
-				});
-				return arr.some((item) => {
-					return item;
-				});
-			}
-			return false;
-		},
-		/* 设置当前高亮的菜单key */
-		setActiveMenu(key: string) {
-			this.activeMenu = key;
-		},
-		/* 生成侧边菜单的数据 */
-		createMenus(userRoutes: AppRoute.Route[]) {
-			this.userRoutes = userRoutes;
+  state: (): RoutesStatus => {
+    return {
+      userRoutes: [],
+      isInitAuthRoute: false,
+      menus: [],
+      activeMenu: null,
+      authRouteMode: import.meta.env.VITE_AUTH_ROUTE_MODE,
+      cacheRoutes: [],
+    }
+  },
+  actions: {
+    resetRouteStore() {
+      this.resetRoutes()
+      this.$reset()
+    },
+    resetRoutes() {
+      /* 删除后面添加的路由 */
+      router.removeRoute('appRoot')
+    },
+    /* 根据当前路由的name生成面包屑数据 */
+    createBreadcrumbFromRoutes(routeName = '/') {
+      const path: AppRoute.Route[] = []
+      // 筛选所有包含目标的各级路由组合成一维数组
+      const getPathfromRoutes = (
+        routeName: string,
+        userRoutes: AppRoute.Route[],
+      ) => {
+        userRoutes.forEach((item) => {
+          if (this.hasPathinAllPath(routeName, item)) {
+            path.push(item)
+            if (item.children && item.children.length !== 0)
+              getPathfromRoutes(routeName, item.children)
+          }
+        })
+      }
+      getPathfromRoutes(routeName, this.userRoutes)
+      return path
+    },
+    /* 判断当前路由和子路由中是否存在为routeName的路由 */
+    hasPathinAllPath(routeName: string, userRoutes: AppRoute.Route) {
+      if (userRoutes.name === routeName)
+        return true
 
-			let resultMenus = JSON.parse(JSON.stringify(userRoutes));
-			resultMenus = this.removeHiddenRoutes(resultMenus);
-			this.menus = this.transformAuthRoutesToMenus(resultMenus);
-		},
-		/** 过滤不需要显示的菜单 */
-		removeHiddenRoutes(routes: AppRoute.Route[]) {
-			return routes.filter((route) => {
-				if (route.meta && route.meta.hide) {
-					return false;
-				} else if (route.children) {
-					route.children = this.removeHiddenRoutes(route.children);
-				}
-				return true;
-			});
-		},
+      if (userRoutes.children && userRoutes.children.length !== 0) {
+        const arr: boolean[] = []
+        userRoutes.children.forEach((item) => {
+          arr.push(this.hasPathinAllPath(routeName, item))
+        })
+        return arr.some((item) => {
+          return item
+        })
+      }
+      return false
+    },
+    /* 设置当前高亮的菜单key */
+    setActiveMenu(key: string) {
+      this.activeMenu = key
+    },
+    /* 生成侧边菜单的数据 */
+    createMenus(userRoutes: AppRoute.Route[]) {
+      this.userRoutes = userRoutes
 
-		//* 将返回的路由表渲染成侧边栏 */
-		transformAuthRoutesToMenus(userRoutes: AppRoute.Route[]): MenuOption[] {
-			return (
-				userRoutes
-					/** 过滤没有权限的侧边菜单 */
-					.filter((item: AppRoute.Route) => {
-						const { hasPermission } = usePermission();
-						return hasPermission(item.meta.roles);
-					})
-					/** 根据order大小菜单排序  */
-					.sort((a, b) => {
-						if (a.meta && a.meta.order && b.meta && b.meta.order) {
-							return a.meta.order - b.meta.order;
-						} else if (a.meta && a.meta.order) {
-							return -1;
-						} else if (b.meta && b.meta.order) {
-							return 1;
-						} else {
-							return 0;
-						}
-					})
-					/** 转换为侧边菜单数据结构 */
-					.map((item) => {
-						const target: MenuOption = {
-							label:
-								!item.children || item.children.length == 0
-									? () =>
-											h(
-												RouterLink,
-												{
-													to: {
-														path: item.path,
-													},
-												},
-												{ default: () => item.meta.title }
-											)
-									: item.meta.title,
-							key: item.path,
-							icon: renderIcon(item.meta.icon),
-						};
-						/** 判断子元素 */
-						if (item.children) {
-							const children = this.transformAuthRoutesToMenus(item.children);
-							// 只有子元素有且不为空时才添加
-							if (children.length !== 0) {
-								target.children = children;
-							} else {
-								target.children = undefined;
-							}
-						}
-						return target;
-					})
-			);
-		},
-		/* 初始化动态路由 */
-		async initDynamicRoute() {
-			// 根据用户id来获取用户的路由
-			const userInfo = local.get('userInfo');
+      let resultMenus = JSON.parse(JSON.stringify(userRoutes))
+      resultMenus = this.removeHiddenRoutes(resultMenus)
+      this.menus = this.transformAuthRoutesToMenus(resultMenus)
+    },
+    /** 过滤不需要显示的菜单 */
+    removeHiddenRoutes(routes: AppRoute.Route[]) {
+      return routes.filter((route) => {
+        if (route.meta && route.meta.hide)
+          return false
+        else if (route.children)
+          route.children = this.removeHiddenRoutes(route.children)
 
-			if (!userInfo || !userInfo.userId) {
-				return;
-			}
+        return true
+      })
+    },
 
-			const { data: routes } = await fetchUserRoutes({ userId: userInfo.userId });
-			// 根据用户返回的路由表来生成真实路由
-			const appRoutes = await createDynamicRoutes(routes);
-			// 生成侧边菜单
-			this.createMenus(routes);
-			// 插入路由表
-			router.addRoute(appRoutes);
-		},
-		/* 初始化静态路由 */
-		async initStaticRoute() {
-			// 根据静态路由表来生成真实路由
-			const appRoutes = await createDynamicRoutes(staticRoutes);
-			// 生成侧边菜单
-			this.createMenus(staticRoutes);
-			// 插入路由表
-			router.addRoute(appRoutes);
-		},
+    //* 将返回的路由表渲染成侧边栏 */
+    transformAuthRoutesToMenus(userRoutes: AppRoute.Route[]): MenuOption[] {
+      return (
+        userRoutes
+          /** 过滤没有权限的侧边菜单 */
+          .filter((item: AppRoute.Route) => {
+            const { hasPermission } = usePermission()
+            return hasPermission(item.meta.roles)
+          })
+          /** 根据order大小菜单排序  */
+          .sort((a, b) => {
+            if (a.meta && a.meta.order && b.meta && b.meta.order)
+              return a.meta.order - b.meta.order
+            else if (a.meta && a.meta.order)
+              return -1
+            else if (b.meta && b.meta.order)
+              return 1
+            else return 0
+          })
+          /** 转换为侧边菜单数据结构 */
+          .map((item) => {
+            const target: MenuOption = {
+              label:
+                (!item.children || item.children.length === 0)
+                  ? () =>
+                      h(
+                        RouterLink,
+                        {
+                          to: {
+                            path: item.path,
+                          },
+                        },
+                        { default: () => item.meta.title },
+                      )
+                  : item.meta.title,
+              key: item.path,
+              icon: renderIcon(item.meta.icon),
+            }
+            /** 判断子元素 */
+            if (item.children) {
+              const children = this.transformAuthRoutesToMenus(item.children)
+              // 只有子元素有且不为空时才添加
+              if (children.length !== 0)
+                target.children = children
+              else target.children = undefined
+            }
+            return target
+          })
+      )
+    },
+    /* 初始化动态路由 */
+    async initDynamicRoute() {
+      // 根据用户id来获取用户的路由
+      const userInfo = local.get('userInfo')
 
-		async initAuthRoute() {
-			this.isInitAuthRoute = false;
-			if (this.authRouteMode === 'dynamic') {
-				await this.initDynamicRoute();
-			} else {
-				await this.initStaticRoute();
-			}
-			this.isInitAuthRoute = true;
-		},
-	},
-});
+      if (!userInfo || !userInfo.userId)
+        return
+
+      const { data: routes } = await fetchUserRoutes({
+        userId: userInfo.userId,
+      })
+      // 根据用户返回的路由表来生成真实路由
+      const appRoutes = await createDynamicRoutes(routes)
+      // 生成侧边菜单
+      this.createMenus(routes)
+      // 插入路由表
+      router.addRoute(appRoutes)
+    },
+    /* 初始化静态路由 */
+    async initStaticRoute() {
+      // 根据静态路由表来生成真实路由
+      const appRoutes = await createDynamicRoutes(staticRoutes)
+      // 生成侧边菜单
+      this.createMenus(staticRoutes)
+      // 插入路由表
+      router.addRoute(appRoutes)
+    },
+
+    async initAuthRoute() {
+      this.isInitAuthRoute = false
+      if (this.authRouteMode === 'dynamic')
+        await this.initDynamicRoute()
+      else await this.initStaticRoute()
+
+      this.isInitAuthRoute = true
+    },
+  },
+})

src/store/modules/tab.ts

@@ -1,16 +1,16 @@
-import { defineStore } from 'pinia';
-import { RouteLocationNormalized } from 'vue-router';
-import { useAppRouter } from '@/hooks';
+import { defineStore } from 'pinia'
+import type { RouteLocationNormalized } from 'vue-router'
+import { useAppRouter } from '@/hooks'
 
 interface TabState {
   inherentTab: {
-    name: string;
-    title: string;
-    path: string;
-  }[];
-  tabs: RouteLocationNormalized[];
-  tabWhiteList: string[];
-  currentTab: string;
+    name: string
+    title: string
+    path: string
+  }[]
+  tabs: RouteLocationNormalized[]
+  tabWhiteList: string[]
+  currentTab: string
 }
 export const useTabStore = defineStore('tab-store', {
   state: (): TabState => {
@@ -25,92 +25,92 @@ export const useTabStore = defineStore('tab-store', {
       tabs: [],
       tabWhiteList: ['404', '403', '500', 'login'],
       currentTab: 'dashboard_workbench',
-    };
+    }
   },
   getters: {
     inherentTabName(): string[] {
       return this.inherentTab.map((item) => {
-        return item.name;
-      });
+        return item.name
+      })
     },
   },
   actions: {
     addTab(route: RouteLocationNormalized) {
       // 如果已经在固有标签里则不添加
-      if (this.inherentTabName.includes(route.name as string)) {
-        return;
-      }
+      if (this.inherentTabName.includes(route.name as string))
+        return
+
       // 如果标签名称已存在则不添加
-      if (this.hasExistTab(route.name as string)) {
-        return;
-      }
+      if (this.hasExistTab(route.name as string))
+        return
+
       // 如果在白名单内则不添加,错误页等
-      if (this.tabWhiteList.includes(route.name as string)) {
-        return;
-      }
-      this.tabs.push(route);
+      if (this.tabWhiteList.includes(route.name as string))
+        return
+
+      this.tabs.push(route)
     },
     closeTab(name: string) {
-      const { routerPush, toRoot } = useAppRouter(false);
-      const tabsLength = this.tabs.length;
+      const { routerPush, toRoot } = useAppRouter(false)
+      const tabsLength = this.tabs.length
       // 如果动态标签大于一个,才会标签跳转
       if (this.tabs.length > 1) {
         // 获取关闭的标签索引
-        const index = this.getTabIndex(name);
-        const isLast = index + 1 === tabsLength;
+        const index = this.getTabIndex(name)
+        const isLast = index + 1 === tabsLength
         // 如果是关闭的当前页面，路由跳转到原先标签的后一个标签
         if (this.currentTab === name && !isLast) {
           // 跳转到后一个标签
-          routerPush(this.tabs[index + 1].path);
-        } else if (this.currentTab === name && isLast) {
+          routerPush(this.tabs[index + 1].path)
+        }
+        else if (this.currentTab === name && isLast) {
           // 已经是最后一个了，就跳转前一个
-          routerPush(this.tabs[index - 1].path);
+          routerPush(this.tabs[index - 1].path)
         }
       }
       // 删除标签
       this.tabs = this.tabs.filter((item) => {
-        return item.name !== name;
-      });
+        return item.name !== name
+      })
       // 删除后如果清空了，就跳转到默认首页
-      if (tabsLength - 1 === 0) {
-        toRoot();
-      }
+      if (tabsLength - 1 === 0)
+        toRoot()
     },
 
     closeOtherTabs(name: string) {
-      const index = this.getTabIndex(name);
-      this.tabs = this.tabs.filter((item, i) => i === index);
+      const index = this.getTabIndex(name)
+      this.tabs = this.tabs.filter((item, i) => i === index)
     },
     closeLeftTabs(name: string) {
-      const index = this.getTabIndex(name);
-      this.tabs = this.tabs.filter((item, i) => i >= index);
+      const index = this.getTabIndex(name)
+      this.tabs = this.tabs.filter((item, i) => i >= index)
     },
     closeRightTabs(name: string) {
-      const index = this.getTabIndex(name);
-      this.tabs = this.tabs.filter((item, i) => i <= index);
+      const index = this.getTabIndex(name)
+      this.tabs = this.tabs.filter((item, i) => i <= index)
     },
     closeAllTabs() {
-      const { toRoot } = useAppRouter(false);
-      this.tabs.length = 0;
-      toRoot();
+      const { toRoot } = useAppRouter(false)
+      this.tabs.length = 0
+      toRoot()
     },
 
     hasExistTab(name: string) {
       return this.tabs.some((item) => {
-        return item.name === name;
-      });
+        return item.name === name
+      })
     },
     /* 设置当前激活的标签 */
     setCurrentTab(name: string) {
-      this.currentTab = name;
+      this.currentTab = name
     },
     getTabIndex(name: string) {
       return this.tabs.findIndex((item) => {
-        return item.name === name;
-      });
+        return item.name === name
+      })
     },
   },
   persist: {
     enabled: true,
   },
-});
+})

src/utils/crypto.ts

@@ -1,25 +1,23 @@
-import CryptoJS from 'crypto-js';
-import { isObject } from './is';
+import CryptoJS from 'crypto-js'
+import { isObject } from './is'
+import { STORAGE_ENCRYPT_SECRET } from '@/config'
 
-const { VITE_STORAGE_ENCRYPT } = import.meta.env;
-import { STORAGE_ENCRYPT_SECRET } from '@/config';
+const { VITE_STORAGE_ENCRYPT } = import.meta.env
 
 /**
  * 加密数据
  * @param data - 数据
  */
 export function encrypto(data: any) {
-	let newData = data;
+  let newData = data
 
-	if (isObject(data)) {
-		newData = JSON.stringify(data);
-	}
+  if (isObject(data))
+    newData = JSON.stringify(data)
 
-	if (VITE_STORAGE_ENCRYPT) {
-		return newData;
-	}
+  if (VITE_STORAGE_ENCRYPT)
+    return newData
 
-	return CryptoJS.AES.encrypt(newData, STORAGE_ENCRYPT_SECRET).toString();
+  return CryptoJS.AES.encrypt(newData, STORAGE_ENCRYPT_SECRET).toString()
 }
 
 /**
@@ -27,16 +25,14 @@ export function encrypto(data: any) {
  * @param cipherText - 密文
  */
 export function decrypto(cipherText: string) {
-	if (!VITE_STORAGE_ENCRYPT) {
-		return JSON.parse(cipherText);
-	}
+  if (!VITE_STORAGE_ENCRYPT)
+    return JSON.parse(cipherText)
 
-	const bytes = CryptoJS.AES.decrypt(cipherText, STORAGE_ENCRYPT_SECRET);
-	const originalText = bytes.toString(CryptoJS.enc.Utf8);
+  const bytes = CryptoJS.AES.decrypt(cipherText, STORAGE_ENCRYPT_SECRET)
+  const originalText = bytes.toString(CryptoJS.enc.Utf8)
 
-	if (originalText) {
-		return JSON.parse(originalText);
-	}
+  if (originalText)
+    return JSON.parse(originalText)
 
-	return null;
+  return null
 }

src/utils/icon.ts

@@ -1,10 +1,10 @@
-import { h } from 'vue';
-import { Icon } from '@iconify/vue';
-import { NIcon } from 'naive-ui';
+import { h } from 'vue'
+import { Icon } from '@iconify/vue'
+import { NIcon } from 'naive-ui'
 
 export function renderIcon(icon?: string) {
-  if (!icon) {
+  if (!icon)
     return undefined
-  }
-  return () => h(NIcon, null, { default: () => h(Icon, { icon }) });
+
+  return () => h(NIcon, null, { default: () => h(Icon, { icon }) })
 }

src/utils/index.ts

@@ -1,3 +1,3 @@
-export * from './icon';
-export * from './is';
-export * from './storage';
+export * from './icon'
+export * from './is'
+export * from './storage'

src/utils/is.ts

@@ -1,99 +1,97 @@
-/* eslint-disable */
-const toString = Object.prototype.toString;
+const toString = Object.prototype.toString
 
 export function is(val: unknown, type: string) {
-	return toString.call(val) === `[object ${type}]`;
+  return toString.call(val) === `[object ${type}]`
 }
 
 export function isString(val: unknown): val is string {
-	return is(val, 'String');
+  return is(val, 'String')
 }
 
 export function isNumber(val: unknown): val is number {
-	return is(val, 'Number');
+  return is(val, 'Number')
 }
 
 export function isBoolean(val: unknown): val is boolean {
-	return is(val, 'Boolean');
+  return is(val, 'Boolean')
 }
 
 export function isNull(val: unknown): val is null {
-	return val === null;
+  return val === null
 }
 
 export function isUnDef<T = unknown>(val?: T): val is T {
-	return !isDef(val);
+  return !isDef(val)
 }
 
 export function isDef<T = unknown>(val?: T): val is T {
-	return typeof val !== 'undefined';
+  return typeof val !== 'undefined'
 }
 
 export function isNullOrUnDef(val: unknown): val is null | undefined {
-	return isUnDef(val) || isNull(val);
+  return isUnDef(val) || isNull(val)
 }
 
 export function isObject(val: any): val is Record<any, any> {
-	return val !== null && is(val, 'Object');
+  return val !== null && is(val, 'Object')
 }
 
 export function isArray(val: any): val is Array<any> {
-	return val && Array.isArray(val);
+  return val && Array.isArray(val)
 }
 
 export function isEmpty<T = unknown>(val: T): val is T {
-	if (isArray(val) || isString(val)) {
-		return val.length === 0;
-	}
+  if (isArray(val) || isString(val))
+    return val.length === 0
 
-	if (val instanceof Map || val instanceof Set) {
-		return val.size === 0;
-	}
+  if (val instanceof Map || val instanceof Set)
+    return val.size === 0
 
-	if (isObject(val)) {
-		return Object.keys(val).length === 0;
-	}
+  if (isObject(val))
+    return Object.keys(val).length === 0
 
-	return false;
+  return false
 }
 
 export function isDate(val: unknown): val is Date {
-	return is(val, 'Date');
+  return is(val, 'Date')
 }
 
-
 export function isPromise<T = any>(val: unknown): val is Promise<T> {
-	return is(val, 'Promise') && isObject(val) && isFunction(val.then) && isFunction(val.catch);
+  return (
+    is(val, 'Promise')
+    && isObject(val)
+    && isFunction(val.then)
+    && isFunction(val.catch)
+  )
 }
 
-
 export function isFunction(val: unknown): val is Function {
-	return typeof val === 'function';
+  return typeof val === 'function'
 }
 
 export function isFile<T extends File>(val: T | unknown): val is T {
-	return is(val, 'File');
+  return is(val, 'File')
 }
 
-
 export function isRegExp(val: unknown): val is RegExp {
-	return is(val, 'RegExp');
+  return is(val, 'RegExp')
 }
 
 export function isWindow(val: any): val is Window {
-	return typeof window !== 'undefined' && is(val, 'Window');
+  return typeof window !== 'undefined' && is(val, 'Window')
 }
 
 export function isElement(val: unknown): val is Element {
-	return isObject(val) && !!val.tagName;
+  return isObject(val) && !!val.tagName
 }
 
-export const isServer = typeof window === 'undefined';
+export const isServer = typeof window === 'undefined'
 
-export const isClient = !isServer;
+export const isClient = !isServer
 
 export function isUrl(path: string): boolean {
-	const reg =
-		/(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
-	return reg.test(path);
+  const reg
+    = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/
+  return reg.test(path)
 }

src/utils/storage.ts

@@ -1,100 +1,103 @@
-import { encrypto, decrypto } from './crypto';
+import { decrypto, encrypto } from './crypto'
 // 读取缓存前缀
-import { STORAGE_PREFIX, STORAGE_DEFAULT_CACHE_TIME } from '@/config';
+import { STORAGE_DEFAULT_CACHE_TIME, STORAGE_PREFIX } from '@/config'
 
 interface StorageData<T> {
-	value: T;
-	expire: number | null;
+  value: T
+  expire: number | null
 }
 /**
  * LocalStorage部分操作
  */
 function createLocalStorage<T extends Storage.Local>() {
-	// 默认缓存期限为7天
+  // 默认缓存期限为7天
 
-	function set<K extends keyof T>(key: K, value: T[K], expire: number = STORAGE_DEFAULT_CACHE_TIME) {
-		const storageData: StorageData<T[K]> = {
-			value,
-			expire: new Date().getTime() + expire * 1000,
-		};
-		const json = encrypto(storageData);
-		window.localStorage.setItem(`${STORAGE_PREFIX}${String(key)}`, json);
-	}
+  function set<K extends keyof T>(key: K, value: T[K], expire: number = STORAGE_DEFAULT_CACHE_TIME) {
+    const storageData: StorageData<T[K]> = {
+      value,
+      expire: new Date().getTime() + expire * 1000,
+    }
+    const json = encrypto(storageData)
+    window.localStorage.setItem(`${STORAGE_PREFIX}${String(key)}`, json)
+  }
 
-	function get<K extends keyof T>(key: K) {
-		const json = window.localStorage.getItem(`${STORAGE_PREFIX}${String(key)}`);
-		if (!json) return null;
+  function get<K extends keyof T>(key: K) {
+    const json = window.localStorage.getItem(`${STORAGE_PREFIX}${String(key)}`)
+    if (!json)
+      return null
 
-		let storageData: StorageData<T[K]> | null = null;
-		try {
-			storageData = decrypto(json);
-		} catch {
-			// 防止解析失败
-		}
+    let storageData: StorageData<T[K]> | null = null
+    try {
+      storageData = decrypto(json)
+    }
+    catch {
+      // 防止解析失败
+    }
 
-		if (storageData) {
-			const { value, expire } = storageData;
-			if (expire === null || expire >= Date.now()) {
-				return value;
-			}
-		}
-		remove(key);
-		return null;
-	}
+    if (storageData) {
+      const { value, expire } = storageData
+      if (expire === null || expire >= Date.now())
+        return value
+    }
+    remove(key)
+    return null
+  }
 
-	function remove(key: keyof T) {
-		window.localStorage.removeItem(`${STORAGE_PREFIX}${String(key)}`);
-	}
+  function remove(key: keyof T) {
+    window.localStorage.removeItem(`${STORAGE_PREFIX}${String(key)}`)
+  }
 
-	function clear() {
-		window.localStorage.clear();
-	}
-	return {
-		set,
-		get,
-		remove,
-		clear,
-	};
+  function clear() {
+    window.localStorage.clear()
+  }
+  return {
+    set,
+    get,
+    remove,
+    clear,
+  }
 }
 /**
  * sessionStorage部分操作
  */
 
 function createSessionStorage<T extends Storage.Session>() {
-	function set<K extends keyof T>(key: K, value: T[K]) {
-		const json = encrypto(value);
-		window.sessionStorage.setItem(`${STORAGE_PREFIX}${String(key)}`, json);
-	}
-	function get<K extends keyof T>(key: K) {
-		const json = sessionStorage.getItem(`${STORAGE_PREFIX}${String(key)}`);
-		if (!json) return null;
+  function set<K extends keyof T>(key: K, value: T[K]) {
+    const json = encrypto(value)
+    window.sessionStorage.setItem(`${STORAGE_PREFIX}${String(key)}`, json)
+  }
+  function get<K extends keyof T>(key: K) {
+    const json = sessionStorage.getItem(`${STORAGE_PREFIX}${String(key)}`)
+    if (!json)
+      return null
 
-		let storageData: T[K] | null = null;
-		try {
-			storageData = decrypto(json);
-		} catch {
-			// 防止解析失败
-		}
+    let storageData: T[K] | null = null
+    try {
+      storageData = decrypto(json)
+    }
+    catch {
+      // 防止解析失败
+    }
 
-		if (storageData) {
-			return storageData;
-		}
-		return null;
-	}
-	function remove(key: keyof T) {
-		window.sessionStorage.removeItem(`${STORAGE_PREFIX}${String(key)}`);
-	}
-	function clear() {
-		window.sessionStorage.clear();
-	}
+    if (storageData)
+      return storageData
 
-	return {
-		set,
-		get,
-		remove,
-		clear,
-	};
+    return null
+  }
+  function remove(key: keyof T) {
+    window.sessionStorage.removeItem(`${STORAGE_PREFIX}${String(key)}`)
+  }
+  function clear() {
+    window.sessionStorage.clear()
+  }
+
+  return {
+    set,
+    get,
+    remove,
+    clear,
+  }
 }
 
-export const local = createLocalStorage();
-export const session = createSessionStorage();
+export const local = createLocalStorage()
+export const session = createSessionStorage()

src/views/about/index.vue

@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import lib from '~/package.json'
+</script>
+
 <template>
   <n-space vertical>
     <n-card title="关于">
@@ -72,8 +76,4 @@
   </n-space>
 </template>
 
-<script setup lang="ts">
-import lib from '~/package.json';
-</script>
-
 <style scoped></style>

src/views/dashboard/monitor/index.vue

@@ -1,3 +1,32 @@
+<script setup lang="ts">
+const tableData = [
+  {
+    id: 0,
+    name: '商品名称1',
+    start: '2022-02-02',
+    end: '2022-02-02',
+    prograss: '100',
+    status: '已完成',
+  },
+  {
+    id: 0,
+    name: '商品名称2',
+    start: '2022-02-02',
+    end: '2022-02-02',
+    prograss: '50',
+    status: '交易中',
+  },
+  {
+    id: 0,
+    name: '商品名称3',
+    start: '2022-02-02',
+    end: '2022-02-02',
+    prograss: '100',
+    status: '已完成',
+  },
+]
+</script>
+
 <template>
   <div>
     <n-grid
@@ -12,7 +41,6 @@
           >
             <n-statistic label="访问量">
               <n-number-animation
-                ref="numberAnimationInstRef"
                 :from="0"
                 :to="12039"
                 show-separator
@@ -29,7 +57,6 @@
             <n-space justify="space-between">
               <span>累计访问数</span>
               <span><n-number-animation
-                ref="numberAnimationInstRef"
                 :from="0"
                 :to="322039"
                 show-separator
@@ -46,7 +73,6 @@
           >
             <n-statistic label="下载量">
               <n-number-animation
-                ref="numberAnimationInstRef"
                 :from="0"
                 :to="12039"
                 show-separator
@@ -63,7 +89,6 @@
             <n-space justify="space-between">
               <span>累计下载量</span>
               <span><n-number-animation
-                ref="numberAnimationInstRef"
                 :from="0"
                 :to="322039"
                 show-separator
@@ -80,7 +105,6 @@
           >
             <n-statistic label="浏览量">
               <n-number-animation
-                ref="numberAnimationInstRef"
                 :from="0"
                 :to="12039"
                 show-separator
@@ -97,7 +121,6 @@
             <n-space justify="space-between">
               <span>累计浏览量</span>
               <span><n-number-animation
-                ref="numberAnimationInstRef"
                 :from="0"
                 :to="322039"
                 show-separator
@@ -114,7 +137,6 @@
           >
             <n-statistic label="注册量">
               <n-number-animation
-                ref="numberAnimationInstRef"
                 :from="0"
                 :to="12039"
                 show-separator
@@ -131,7 +153,6 @@
             <n-space justify="space-between">
               <span>累计注册量</span>
               <span><n-number-animation
-                ref="numberAnimationInstRef"
                 :from="0"
                 :to="322039"
                 show-separator
@@ -221,33 +242,4 @@
   </div>
 </template>
 
-<script setup lang="ts">
-const tableData = [
-	{
-		id: 0,
-		name: '商品名称1',
-		start: '2022-02-02',
-		end: '2022-02-02',
-		prograss: '100',
-		status: '已完成',
-	},
-	{
-		id: 0,
-		name: '商品名称2',
-		start: '2022-02-02',
-		end: '2022-02-02',
-		prograss: '50',
-		status: '交易中',
-	},
-	{
-		id: 0,
-		name: '商品名称3',
-		start: '2022-02-02',
-		end: '2022-02-02',
-		prograss: '100',
-		status: '已完成',
-	},
-];
-</script>
-
 <style scoped></style>

src/views/dashboard/workbench/index.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import { useAuthStore } from '@/store'
+
+const { userInfo } = useAuthStore()
+</script>
+
 <template>
   <n-grid
     :x-gap="16"
@@ -364,10 +370,4 @@
   </n-grid>
 </template>
 
-<script setup lang="ts">
-import { useAuthStore } from '@/store';
-
-const { userInfo } = useAuthStore();
-</script>
-
 <style scoped></style>

src/views/docments/vite/index.vue

@@ -1,9 +1,9 @@
+<script setup lang="ts"></script>
+
 <template>
   <div class="h-full">
-    <iframe src="https://cn.vitejs.dev/guide/" frameborder="0" class="wh-full"></iframe>
+    <iframe src="https://cn.vitejs.dev/guide/" frameborder="0" class="wh-full" />
   </div>
 </template>
 
-<script setup lang="ts"></script>
-
 <style scoped></style>