fix Bug or add docs

.editorconfig

@@ -0,0 +1,19 @@
+root = true
+
+[*]
+charset=utf-8
+end_of_line=LF
+insert_final_newline=true
+indent_style=space
+indent_size=2
+max_line_length = 100
+
+[*.{yml,yaml,json}]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

.env.development

@@ -13,14 +13,18 @@ VITE_BASE_URL = /
 # 是否删除console
 VITE_DROP_CONSOLE = true
 
+# 跨域代理，可以配置多个，请注意不要换行
+#VITE_PROXY = [["/appApi","http://localhost:8001"],["/upload","http://localhost:8001/upload"]]
+# VITE_PROXY=[["/api","https://naive-ui-admin"]]
+
 # API 接口地址
-VITE_APP_API_URL = /
+VITE_GLOB_API_URL =
 
 # 图片上传地址
-VITE_GLOB_UPLOAD_URL= /
+VITE_GLOB_UPLOAD_URL=
 
 # 图片前缀地址
-VITE_GLOB_IMG_URL= /
+VITE_GLOB_IMG_URL=
 
 # 接口前缀
 VITE_GLOB_API_URL_PREFIX = /api

.env.production

@@ -11,13 +11,21 @@ VITE_BASE_URL = /
 VITE_DROP_CONSOLE = true
 
 # API
-VITE_APP_API_URL = /
+VITE_GLOB_API_URL =
 
 # 图片上传地址
-VITE_GLOB_UPLOAD_URL= /
+VITE_GLOB_UPLOAD_URL=
 
 # 图片前缀地址
-VITE_GLOB_IMG_URL= /
+VITE_GLOB_IMG_URL=
 
 # 接口前缀
 VITE_GLOB_API_URL_PREFIX = /api
+
+# 是否启用gzip压缩或brotli压缩
+# 可选: gzip | brotli | none
+# 如果你需要多种形式，你可以用','来分隔
+VITE_BUILD_COMPRESS = 'none'
+
+# 使用压缩时是否删除原始文件，默认为false
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false

.eslintrc.js

@@ -1,9 +1,11 @@
-module.exports = {
+// @ts-check
+const { defineConfig } = require('eslint-define-config');
+module.exports = defineConfig({
   root: true,
   env: {
     browser: true,
     node: true,
-    es6: true
+    es6: true,
   },
   parser: 'vue-eslint-parser',
   parserOptions: {
@@ -12,21 +14,46 @@ module.exports = {
     sourceType: 'module',
     jsxPragma: 'React',
     ecmaFeatures: {
-      jsx: true
-    }
+      jsx: true,
+    },
   },
   extends: [
     'plugin:vue/vue3-recommended',
     'plugin:@typescript-eslint/recommended',
     'prettier',
-    'plugin:prettier/recommended'
+    'plugin:prettier/recommended',
+    'plugin:jest/recommended',
   ],
   rules: {
-    'vue/no-unused-components': 'off',
-    'vue/no-unused-vars': 'off',
-    'vue/no-v-for-template-key-on-child': 'off',
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
     'vue/custom-event-name-casing': 'off',
-    // 'vue/attributes-order': 'off',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+      },
+    ],
+    'no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+      },
+    ],
+    'space-before-function-paren': 'off',
+
+    'vue/attributes-order': 'off',
     'vue/one-component-per-file': 'off',
     'vue/html-closing-bracket-newline': 'off',
     'vue/max-attributes-per-line': 'off',
@@ -34,34 +61,17 @@ module.exports = {
     'vue/singleline-html-element-content-newline': 'off',
     'vue/attribute-hyphenation': 'off',
     'vue/require-default-prop': 'off',
-
-    'space-before-function-paren': 'off',
-
-    '@typescript-eslint/camelcase': 'off',
-    '@typescript-eslint/ban-ts-ignore': 'off',
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-var-requires': 'off',
-    '@typescript-eslint/no-empty-function': 'off',
-    'no-use-before-define': 'off',
-    '@typescript-eslint/no-use-before-define': 'off',
-    '@typescript-eslint/ban-ts-comment': 'off',
-    '@typescript-eslint/ban-types': 'off',
-    '@typescript-eslint/no-non-null-assertion': 'off',
-    '@typescript-eslint/explicit-module-boundary-types': 'off',
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'vue/html-self-closing': [
       'error',
       {
         html: {
           void: 'always',
           normal: 'never',
-          component: 'always'
+          component: 'always',
         },
         svg: 'always',
-        math: 'always'
-      }
-    ]
-  }
-}
+        math: 'always',
+      },
+    ],
+  },
+});

CHANGELOG.md

@@ -1,3 +1,32 @@
+# 1.5 (2021-07-30)
+### 🐛 Bug Fixes
+- 修复表格列配置，拖拽时最后的操作列重复增加
+- 多标签页交互优化
+
+- ### ✨ Features
+- `项目文档`已上线
+- `Application`组件加载机制优化，解决路由守卫，Axios中可使用，Dialog，Message 等之类组件
+- `BasicTable` 组件新增`高度自适应`，`单元格编辑`，`整行编辑` 特性
+- `nprogress` 移除，用 `Loading Bar`代替
+- 打包支持`gzip`，`brotli` 压缩
+- 新增代理`VITE_PROXY`配置
+- 路由菜单，支持多级菜单
+- 依赖升级
+- 本次更新，有破坏性更新，涉及文件重命名，增删调整
+
+
+# 1.4 (2021-07-21)
+### 🐛 Bug Fixes
+- vite降至2.3.6
+- 多标签页交互优化
+
+- ### ✨ Features
+- 新增 `TableAction` 组件
+- 新增 `菜单权限管理` 示例
+- 新增 `角色权限管理` 示例
+- 持续更新更多实用组件及示例，感谢Star
+
+
 # 1.3 (2021-07-19)
 ### 🐛 Bug Fixes
 - 修复多标签页左右切换按钮自适应展示

README.md

@@ -1,6 +1,6 @@
 ## 简介
 
-Naive Ui Admin 是一个免费开源的中后台模版，使用了最新的`vue3`,`vite2`,`TypeScript`等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
+[Naive Ui Admin](https://github.com/jekip/naive-ui-admin) 是一个基于 [Vue3.0](https://github.com/vuejs/vue-next)、[Vite](https://github.com/vitejs/vite)、 [Naive UI](https://www.naiveui.com/)、[TypeScript](https://www.typescriptlang.org/) 的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目，该项目使用最新的前端技术栈，相信不管是从新技术使用还是其他方面，都能帮助到你。
 
 ## 特性
 - **最新技术栈**：使用 Vue3/vite2 等前端前沿技术开发
@@ -10,32 +10,15 @@ Naive Ui Admin 是一个免费开源的中后台模版，使用了最新的`vue3
 - **权限** 内置完善的动态路由权限生成方案
 - **组件** 二次封装了多个常用的组件
 
-### 页面功能
-#### 系统看板
-- [x] 主控台
-- [ ] 监控页
-- [x] 工作台
-- [x] 表单页面
-- [x] 列表页面
-- [x] 异常页面
-- [x] 结果页面
-- [x] 设置页面
-
-### 页面组件
-#### ProTable
-- [x] 基础表格
-- [x] 上传图片
-- [x] 滑块验证码  
-- 持续开发中...
 
 ## 在线预览
 - [naive-ui-admin](https://jekip.github.io)
 
-账号：admin，密码：123456
+账号：admin，密码：123456（随意）
 
 ## 文档
 
-[文档地址](https://github.com/jekip/naive-ui-admin) - 待完善
+[文档地址](https://jekip.github.io/docs/) 
 
 ## 准备
 
@@ -82,7 +65,7 @@ yarn build
 [CHANGELOG](./CHANGELOG.md)
 
 ## 感谢
-[@Vben](https://github.com/anncwb/vue-vben-admin) 借鉴 vue-vben-admin 实现的骨架，同时也使用作者开发的 vite 插件，非常感谢作者。
+[@Vben](https://github.com/anncwb/vue-vben-admin) 借鉴 vue-vben-admin 实现的骨架，同时也使用作者开发的 vite 插件，再次感谢作者。
 
 
 ## 如何贡献

build/utils.ts

@@ -31,8 +31,7 @@ export function wrapperEnv(envConf: Recordable): ViteEnv {
     if (envName === 'VITE_PROXY') {
       try {
         realName = JSON.parse(realName);
-      } catch (error) {
-      }
+      } catch (error) {}
     }
     ret[envName] = realName;
     process.env[envName] = realName;
@@ -51,12 +50,11 @@ export function getEnvConfig(match = 'VITE_GLOB_', confFiles = ['.env', '.env.pr
     try {
       const env = dotenv.parse(fs.readFileSync(path.resolve(process.cwd(), item)));
       envConfig = { ...envConfig, ...env };
-    } catch (error) {
-    }
+    } catch (error) {}
   });
 
   Object.keys(envConfig).forEach((key) => {
-    const reg = new RegExp(`^(${ match })`);
+    const reg = new RegExp(`^(${match})`);
     if (!reg.test(key)) {
       Reflect.deleteProperty(envConfig, key);
     }

build/vite/plugin/compress.ts

@@ -0,0 +1,35 @@
+/**
+ * Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
+ * https://github.com/anncwb/vite-plugin-compression
+ */
+import type { Plugin } from 'vite';
+
+import compressPlugin from 'vite-plugin-compression';
+
+export function configCompressPlugin(
+  compress: 'gzip' | 'brotli' | 'none',
+  deleteOriginFile = false
+): Plugin | Plugin[] {
+  const compressList = compress.split(',');
+
+  const plugins: Plugin[] = [];
+
+  if (compressList.includes('gzip')) {
+    plugins.push(
+      compressPlugin({
+        ext: '.gz',
+        deleteOriginFile,
+      })
+    );
+  }
+  if (compressList.includes('brotli')) {
+    plugins.push(
+      compressPlugin({
+        ext: '.br',
+        algorithm: 'brotliCompress',
+        deleteOriginFile,
+      })
+    );
+  }
+  return plugins;
+}

build/vite/plugin/index.ts

@@ -5,9 +5,10 @@ import vueJsx from '@vitejs/plugin-vue-jsx';
 
 import { configHtmlPlugin } from './html';
 import { configMockPlugin } from './mock';
+import { configCompressPlugin } from './compress';
 
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, prodMock) {
-  const { VITE_USE_MOCK } = viteEnv;
+  const { VITE_USE_MOCK, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv;
 
   const vitePlugins: (Plugin | Plugin[])[] = [
     // have to
@@ -22,5 +23,12 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, prodMock)
   // vite-plugin-mock
   VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild, prodMock));
 
+  if (isBuild) {
+    // rollup-plugin-gzip
+    vitePlugins.push(
+      configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE)
+    );
+  }
+
   return vitePlugins;
 }

build/vite/proxy.ts

@@ -0,0 +1,34 @@
+/**
+ * Used to parse the .env.development proxy configuration
+ */
+import type { ProxyOptions } from 'vite';
+
+type ProxyItem = [string, string];
+
+type ProxyList = ProxyItem[];
+
+type ProxyTargetList = Record<string, ProxyOptions & { rewrite: (path: string) => string }>;
+
+const httpsRE = /^https:\/\//;
+
+/**
+ * Generate proxy
+ * @param list
+ */
+export function createProxy(list: ProxyList = []) {
+  const ret: ProxyTargetList = {};
+  for (const [prefix, target] of list) {
+    const isHttps = httpsRE.test(target);
+
+    // https://github.com/http-party/node-http-proxy#options
+    ret[prefix] = {
+      target: target,
+      changeOrigin: true,
+      ws: true,
+      rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''),
+      // https is require secure=false
+      ...(isHttps ? { secure: false } : {}),
+    };
+  }
+  return ret;
+}

index.html

@@ -13,6 +13,7 @@
   <style>.first-loading-wrp{display:flex;justify-content:center;align-items:center;flex-direction:column;min-height:420px;height:100%}.first-loading-wrp>h1{font-size:128px}.first-loading-wrp .loading-wrp{padding:98px;display:flex;justify-content:center;align-items:center}.dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:32px;width:32px;height:32px;box-sizing:border-box}.dot i{width:14px;height:14px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.dot i:nth-child(1){top:0;left:0}.dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
 </head>
 <body>
+<div id="appProvider" style="display: none"></div>
 <div id="app">
   <div class="first-loading-wrp">
     <div class="loading-wrp">

mock/_createProductionServer.ts

@@ -1,18 +1,18 @@
-import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
-
-const modules = import.meta.globEager('./**/*.ts');
-
-const mockModules: any[] = [];
-Object.keys(modules).forEach((key) => {
-  if (key.includes('/_')) {
-    return;
-  }
-  mockModules.push(...modules[key].default);
-});
-
-/**
- * Used in a production environment. Need to manually import all modules
- */
-export function setupProdMockServer() {
-  createProdMockServer(mockModules);
-}
+import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
+
+const modules = import.meta.globEager('./**/*.ts');
+
+const mockModules: any[] = [];
+Object.keys(modules).forEach((key) => {
+  if (key.includes('/_')) {
+    return;
+  }
+  mockModules.push(...modules[key].default);
+});
+
+/**
+ * Used in a production environment. Need to manually import all modules
+ */
+export function setupProdMockServer() {
+  createProdMockServer(mockModules);
+}

mock/_util.ts

@@ -1,4 +1,4 @@
-import Mock from 'mockjs'
+import Mock from 'mockjs';
 
 export function resultSuccess(result, { message = 'ok' } = {}) {
   return Mock.mock({
@@ -50,10 +50,10 @@ export function pagination<T = any>(pageNo: number, pageSize: number, array: T[]
  * @param {Number} times 回调函数需要执行的次数
  * @param {Function} callback 回调函数
  */
-export function doCustomTimes (times:number, callback:any) {
-  let i = -1
+export function doCustomTimes(times: number, callback: any) {
+  let i = -1;
   while (++i < times) {
-    callback(i)
+    callback(i);
   }
 }
 

mock/dashboard/console.ts

@@ -1,36 +1,35 @@
-import { Random } from 'mockjs'
-import { resultSuccess } from '../_util'
+import { Random } from 'mockjs';
+import { resultSuccess } from '../_util';
 
 const consoleInfo = {
   //访问量
-  visits:{
-    dayVisits:Random.float(10000,99999,2,2),
-    rise:Random.float(10,99),
-    decline:Random.float(10,99),
-    amount:Random.float(99999,999999,3,5),
+  visits: {
+    dayVisits: Random.float(10000, 99999, 2, 2),
+    rise: Random.float(10, 99),
+    decline: Random.float(10, 99),
+    amount: Random.float(99999, 999999, 3, 5),
   },
   //销售额
-  saleroom:{
-    weekSaleroom:Random.float(10000,99999,2,2),
-    amount:Random.float(99999,999999,2,2),
-    degree:Random.float(10,99)
+  saleroom: {
+    weekSaleroom: Random.float(10000, 99999, 2, 2),
+    amount: Random.float(99999, 999999, 2, 2),
+    degree: Random.float(10, 99),
   },
   //订单量
-  orderLarge:{
-    weekLarge:Random.float(10000,99999,2,2),
-    rise:Random.float(10,99),
-    decline:Random.float(10,99),
-    amount:Random.float(99999,999999,2,2),
+  orderLarge: {
+    weekLarge: Random.float(10000, 99999, 2, 2),
+    rise: Random.float(10, 99),
+    decline: Random.float(10, 99),
+    amount: Random.float(99999, 999999, 2, 2),
   },
   //成交额度
-  volume:{
-    weekLarge:Random.float(10000,99999,2,2),
-    rise:Random.float(10,99),
-    decline:Random.float(10,99),
-    amount:Random.float(99999,999999,2,2)
+  volume: {
+    weekLarge: Random.float(10000, 99999, 2, 2),
+    rise: Random.float(10, 99),
+    decline: Random.float(10, 99),
+    amount: Random.float(99999, 999999, 2, 2),
   },
-}
-
+};
 
 export default [
   //主控台 卡片数据
@@ -41,7 +40,5 @@ export default [
     response: () => {
       return resultSuccess(consoleInfo);
     },
-  }
-]
-
-
+  },
+];

mock/system/menu.ts

@@ -0,0 +1,89 @@
+import { resultSuccess } from '../_util';
+
+const menuList = () => {
+  const result: any[] = [
+    {
+      label: 'Dashboard',
+      key: 'dashboard',
+      type: 1,
+      subtitle: 'dashboard',
+      openType: 1,
+      auth: 'dashboard',
+      path: '/dashboard',
+      children: [
+        {
+          label: '主控台',
+          key: 'console',
+          type: 1,
+          subtitle: 'console',
+          openType: 1,
+          auth: 'console',
+          path: '/dashboard/console',
+        },
+        {
+          label: '工作台',
+          key: 'workplace',
+          type: 1,
+          subtitle: 'workplace',
+          openType: 1,
+          auth: 'workplace',
+          path: '/dashboard/workplace',
+        },
+      ],
+    },
+    {
+      label: '表单管理',
+      key: 'form',
+      type: 1,
+      subtitle: 'form',
+      openType: 1,
+      auth: 'form',
+      path: '/form',
+      children: [
+        {
+          label: '基础表单',
+          key: 'basic-form',
+          type: 1,
+          subtitle: 'basic-form',
+          openType: 1,
+          auth: 'basic-form',
+          path: '/form/basic-form',
+        },
+        {
+          label: '分步表单',
+          key: 'step-form',
+          type: 1,
+          subtitle: 'step-form',
+          openType: 1,
+          auth: 'step-form',
+          path: '/form/step-form',
+        },
+        {
+          label: '表单详情',
+          key: 'detail',
+          type: 1,
+          subtitle: 'detail',
+          openType: 1,
+          auth: 'detail',
+          path: '/form/detail',
+        },
+      ],
+    },
+  ];
+
+  return result;
+};
+
+export default [
+  {
+    url: '/api/menu/list',
+    timeout: 1000,
+    method: 'get',
+    response: () => {
+      const list = menuList();
+      return resultSuccess({
+        list,
+      });
+    },
+  },
+];

mock/system/role.ts

@@ -0,0 +1,45 @@
+import { resultSuccess, doCustomTimes } from '../_util';
+
+function getMenuKeys() {
+  const keys = ['dashboard', 'console', 'workplace', 'basic-form', 'step-form', 'detail'];
+  const newKeys = [];
+  doCustomTimes(parseInt(Math.random() * 6), () => {
+    const key = keys[Math.floor(Math.random() * keys.length)];
+    newKeys.push(key);
+  });
+  return Array.from(new Set(newKeys));
+}
+
+const roleList = (pageSize) => {
+  const result: any[] = [];
+  doCustomTimes(pageSize, () => {
+    result.push({
+      id: '@integer(10,100)',
+      name: '@cname()',
+      explain: '@cname()',
+      isDefault: '@boolean()',
+      menu_keys: getMenuKeys(),
+      create_date: `@date('yyyy-MM-dd hh:mm:ss')`,
+      'status|1': ['normal', 'enable', 'disable'],
+    });
+  });
+  return result;
+};
+
+export default [
+  {
+    url: '/api/role/list',
+    timeout: 1000,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 10 } = query;
+      const list = roleList(Number(pageSize));
+      return resultSuccess({
+        page: Number(page),
+        pageSize: Number(pageSize),
+        pageCount: 60,
+        list,
+      });
+    },
+  },
+];

mock/table/list.ts

@@ -1,9 +1,9 @@
-import { Random } from 'mockjs'
-import { resultSuccess, doCustomTimes, resultPageSuccess } from '../_util'
+import { Random } from 'mockjs';
+import { resultSuccess, doCustomTimes } from '../_util';
 
-const tableList = ((pageSize) => {
-  const result:any[] = []
-  doCustomTimes(pageSize,()=> {
+const tableList = (pageSize) => {
+  const result: any[] = [];
+  doCustomTimes(pageSize, () => {
     result.push({
       id: '@integer(10,100)',
       beginTime: '@datetime',
@@ -14,12 +14,11 @@ const tableList = ((pageSize) => {
       date: `@date('yyyy-MM-dd')`,
       time: `@time('HH:mm')`,
       'no|100000-10000000': 100000,
-      'status|1': ['normal', 'enable', 'disable'],
+      'status|1': [true, false],
     });
-  })
-  return result
-});
-
+  });
+  return result;
+};
 
 export default [
   //表格数据列表
@@ -29,16 +28,13 @@ export default [
     method: 'get',
     response: ({ query }) => {
       const { page = 1, pageSize = 10 } = query;
-      const list = tableList(Number(pageSize))
+      const list = tableList(Number(pageSize));
       return resultSuccess({
-        page:Number(page),
-        pageSize:Number(pageSize),
+        page: Number(page),
+        pageSize: Number(pageSize),
         pageCount: 60,
-        list
-      }
-      );
+        list,
+      });
     },
-  }
-]
-
-
+  },
+];

mock/user/menus.ts

@@ -1,53 +1,52 @@
-import { MockMethod } from 'vite-plugin-mock'
-import { resultSuccess, getRequestToken } from '../_util'
-
-const menusList = [
-    {
-        path: '/dashboard',
-        name: 'Dashboard',
-        component: 'Layout',
-        redirect: '/dashboard/console',
-        meta: {
-            icon: 'DashboardOutlined',
-            title: 'Dashboard',
-        },
-        children: [
-            {
-                path: 'console',
-                name: 'dashboard_console',
-                component: 'DashboardConsole',
-                meta: {
-                    title: '主控台',
-                }
-            },
-            {
-                path: 'monitor',
-                name: 'dashboard_monitor',
-                component: 'DashboardMonitor',
-                meta: {
-                    title: '监控页',
-                }
-            },
-            {
-                path: 'workplace',
-                name: 'dashboard_workplace',
-                component: 'DashboardWorkplace',
-                meta: {
-                    hidden: true,
-                    title: '工作台',
-                }
-            },
-        ],
-    }
-]
-
-export default [
-    {
-        url: '/api/menus',
-        timeout: 1000,
-        method: 'get',
-        response: () => {
-            return resultSuccess(menusList);
-        },
-    }
-]
+import { resultSuccess } from '../_util';
+
+const menusList = [
+  {
+    path: '/dashboard',
+    name: 'Dashboard',
+    component: 'Layout',
+    redirect: '/dashboard/console',
+    meta: {
+      icon: 'DashboardOutlined',
+      title: 'Dashboard',
+    },
+    children: [
+      {
+        path: 'console',
+        name: 'dashboard_console',
+        component: 'DashboardConsole',
+        meta: {
+          title: '主控台',
+        },
+      },
+      {
+        path: 'monitor',
+        name: 'dashboard_monitor',
+        component: 'DashboardMonitor',
+        meta: {
+          title: '监控页',
+        },
+      },
+      {
+        path: 'workplace',
+        name: 'dashboard_workplace',
+        component: 'DashboardWorkplace',
+        meta: {
+          hidden: true,
+          title: '工作台',
+        },
+      },
+    ],
+  },
+];
+
+export default [
+  {
+    url: '/api/menus',
+    timeout: 1000,
+    method: 'get',
+    response: () => {
+      return resultSuccess(menusList);
+    },
+  },
+];

mock/user/user.ts

@@ -1,9 +1,9 @@
-import Mock from 'mockjs'
-import { resultSuccess, getRequestToken } from '../_util'
+import Mock from 'mockjs';
+import { resultSuccess } from '../_util';
 
-const Random = Mock.Random
+const Random = Mock.Random;
 
-const token = Random.string('upper', 32, 32)
+const token = Random.string('upper', 32, 32);
 
 const adminInfo = {
   userId: '1',
@@ -25,9 +25,17 @@ const adminInfo = {
     {
       roleName: '工作台',
       value: 'dashboard_workplace',
-    }
+    },
+    {
+      roleName: '基础列表',
+      value: 'basic_list',
+    },
+    {
+      roleName: '基础列表删除',
+      value: 'basic_list_delete',
+    },
   ],
-}
+};
 
 export default [
   {
@@ -48,4 +56,4 @@ export default [
       return resultSuccess(adminInfo);
     },
   },
-]
+];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui-admin",
-  "version": "1.2",
+  "version": "1.5",
   "author": {
     "name": "Ahjung",
     "email": "735878602@qq.com",
@@ -8,8 +8,12 @@
   },
   "private": true,
   "scripts": {
+    "bootstrap": "yarn install",
+    "serve": "npm run dev",
     "dev": "vite",
     "build": "vite build && esno ./build/script/postBuild.ts",
+    "build:no-cache": "yarn clean:cache && npm run build",
+    "report": "cross-env REPORT=true npm run build",
     "preview": "vite preview",
     "build typecheck": "vuedx-typecheck . && vite build",
     "deploy": "gh-pages -d dist",
@@ -34,8 +38,7 @@
     "makeit-captcha": "^1.2.5",
     "mitt": "^2.1.0",
     "mockjs": "^1.1.0",
-    "naive-ui": "^2.15.5",
-    "nprogress": "^1.0.0-1",
+    "naive-ui": "^2.15.11",
     "pinia": "^2.0.0-beta.3",
     "qs": "^6.10.1",
     "vfonts": "^0.1.0",
@@ -62,27 +65,32 @@
     "dotenv": "^10.0.0",
     "eslint": "^7.28.0",
     "eslint-config-prettier": "^8.3.0",
+    "eslint-define-config": "^1.0.9",
+    "eslint-plugin-jest": "^24.4.0",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-vue": "^7.11.1",
     "esno": "^0.7.3",
     "gh-pages": "^3.2.0",
     "husky": "^6.0.0",
+    "jest": "^27.0.6",
     "less": "^4.1.1",
     "less-loader": "^9.0.0",
     "lint-staged": "^11.0.0",
     "postcss": "^8.3.5",
     "prettier": "^2.3.1",
     "pretty-quick": "^3.1.0",
+    "rimraf": "^3.0.2",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^22.0.0",
     "stylelint-order": "^4.1.0",
     "stylelint-scss": "^3.19.0",
-    "tailwindcss": "^2.2.4",
-    "typescript": "^4.3.2",
-    "vite": "^2.4.2",
+    "tailwindcss": "^2.2.7",
+    "typescript": "^4.3.5",
+    "vite": "2.3.6",
+    "vite-plugin-compression": "^0.3.1",
     "vite-plugin-html": "^2.0.7",
-    "vite-plugin-mock": "^2.9.1",
+    "vite-plugin-mock": "^2.9.3",
     "vite-plugin-style-import": "^1.0.1",
     "vue-eslint-parser": "^7.8.0"
   },

src/App.vue

@@ -1,105 +1,101 @@
 <template>
   <NConfigProvider
-      v-if="!isLock"
-      :locale="zhCN"
-      :theme="getDarkTheme"
-      :theme-overrides="getThemeOverrides"
-      :date-locale="dateZhCN"
+    v-if="!isLock"
+    :locale="zhCN"
+    :theme="getDarkTheme"
+    :theme-overrides="getThemeOverrides"
+    :date-locale="dateZhCN"
   >
     <AppProvider>
-      <RouterView/>
+      <RouterView />
     </AppProvider>
   </NConfigProvider>
 
-  <transition v-if="isLock && $route.name != 'login'" name="slide-up">
-    <LockScreen/>
+  <transition v-if="isLock && $route.name !== 'login'" name="slide-up">
+    <LockScreen />
   </transition>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, onMounted, onUnmounted } from 'vue'
-import { zhCN, dateZhCN, createTheme, inputDark, datePickerDark, darkTheme } from 'naive-ui'
-import { LockScreen } from '@/components/Lockscreen'
-import { AppProvider } from '@/components/Application'
-import { useLockscreenStore } from '@/store/modules/lockscreen'
-import { useRoute } from 'vue-router'
-import { useDesignSettingStore } from '@/store/modules/designSetting'
+  import { defineComponent, computed, onMounted, onUnmounted } from 'vue';
+  import { zhCN, dateZhCN, createTheme, inputDark, datePickerDark, darkTheme } from 'naive-ui';
+  import { LockScreen } from '@/components/Lockscreen';
+  import { AppProvider } from '@/components/Application';
+  import { useLockscreenStore } from '@/store/modules/lockscreen';
+  import { useRoute } from 'vue-router';
+  import { useDesignSettingStore } from '@/store/modules/designSetting';
+
+  export default defineComponent({
+    name: 'App',
+    components: { LockScreen, AppProvider },
+    setup() {
+      const route = useRoute();
+      const useLockscreen = useLockscreenStore();
+      const designStore = useDesignSettingStore();
+      const isLock = computed(() => useLockscreen.isLock);
+      const lockTime = computed(() => useLockscreen.lockTime);
+
+      const getThemeOverrides = computed(() => {
+        return {
+          common: {
+            primaryColor: designStore.appTheme,
+            primaryColorHover: '#57a3f3',
+          },
+        };
+      });
+
+      const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined));
+
+      let timer;
+
+      const timekeeping = () => {
+        clearInterval(timer);
+        if (route.name == 'login' || isLock.value) return;
+        // 设置不锁屏
+        useLockscreen.setLock(false);
+        // 重置锁屏时间
+        useLockscreen.setLockTime();
+        timer = setInterval(() => {
+          // 锁屏倒计时递减
+          useLockscreen.setLockTime(lockTime.value - 1);
+          if (lockTime.value <= 0) {
+            // 设置锁屏
+            useLockscreen.setLock(true);
+            return clearInterval(timer);
+          }
+        }, 1000);
+      };
+
+      onMounted(() => {
+        document.addEventListener('mousedown', timekeeping);
+      });
+
+      onUnmounted(() => {
+        document.removeEventListener('mousedown', timekeeping);
+      });
 
-export default defineComponent({
-  name: 'App',
-  components: { LockScreen, AppProvider },
-  setup() {
-    const route = useRoute()
-    const useLockscreen = useLockscreenStore()
-    const designStore = useDesignSettingStore()
-    const isLock = computed(() => useLockscreen.isLock)
-    const lockTime = computed(() => useLockscreen.lockTime)
-    /**
-     * @type import('naive-ui').GlobalThemeOverrides
-     */
-    const getThemeOverrides = computed(() => {
       return {
-        common: {
-          primaryColor: designStore.appTheme,
-          primaryColorHover: '#57a3f3'
-        }
-      }
-    })
-
-    const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined))
-
-    let timer
-
-    const timekeeping = () => {
-      clearInterval(timer)
-      if (route.name == 'login' || isLock.value) return
-      // 设置不锁屏
-      useLockscreen.setLock(false)
-      // 重置锁屏时间
-      useLockscreen.setLockTime()
-      timer = setInterval(() => {
-        // 锁屏倒计时递减
-        useLockscreen.setLockTime(lockTime.value - 1)
-        if (lockTime.value <= 0) {
-          // 设置锁屏
-          useLockscreen.setLock(true)
-          return clearInterval(timer)
-        }
-      }, 1000)
-    }
-
-    onMounted(() => {
-      document.addEventListener('mousedown', timekeeping)
-    })
-
-    onUnmounted(() => {
-      document.removeEventListener('mousedown', timekeeping)
-    })
-
-    return {
-      darkTheme: createTheme([inputDark, datePickerDark]),
-      getDarkTheme,
-      zhCN,
-      dateZhCN,
-      isLock,
-      getThemeOverrides
-    }
-  }
-})
+        darkTheme: createTheme([inputDark, datePickerDark]),
+        getDarkTheme,
+        zhCN,
+        dateZhCN,
+        isLock,
+        getThemeOverrides,
+      };
+    },
+  });
 </script>
 
 <style lang="less">
-@import 'styles/global.less';
-@import 'styles/common.less';
-@import 'styles/override.less';
+  @import 'styles/common.less';
 
-.slide-up-enter-active,
-.slide-up-leave-active {
-  transition: transform 0.35s ease-in;
-}
+  .slide-up-enter-active,
+  .slide-up-leave-active {
+    transition: transform 0.35s ease-in;
+  }
 
-.slide-up-enter-form,
-.slide-up-leave-to {
-  transform: translateY(-100%);
-}
+  .slide-up-enter-form,
+  .slide-up-leave-to {
+    transform: translateY(-100%);
+  }
 </style>

src/api/dashboard/console.ts

@@ -1,11 +1,9 @@
-import http from '@/utils/http/axios'
+import http from '@/utils/http/axios';
 
 //获取主控台信息
 export function getConsoleInfo() {
-    return http.request(
-        {
-            url: '/dashboard/console',
-            method: 'get'
-        }
-    )
+  return http.request({
+    url: '/dashboard/console',
+    method: 'get',
+  });
 }

src/api/system/menu.ts

@@ -1,33 +1,23 @@
-import http from '@/utils/http/axios'
-import {
-    GetByUserIdParams,
-    GetMenuListByUserIdResult,
-    GetAuthCodeByUserIdResult
-} from './model/menuModel'
-
-enum Api {
-    adminMenus = '/menus',
-    GetBtnCodeListByUserId = '/getBtnCodeListByUserId'
-}
+import http from '@/utils/http/axios';
 
 /**
  * @description: 根据用户id获取用户菜单
  */
 export function adminMenus() {
-    return http.request<GetMenuListByUserIdResult>({
-        url: Api.adminMenus,
-        method: 'GET'
-    })
+  return http.request({
+    url: '/menus',
+    method: 'GET',
+  });
 }
 
 /**
- * 根据用户Id获取权限编码
+ * 获取tree菜单列表
  * @param params
  */
-export function getBtnCodeListByUserId(params: GetByUserIdParams) {
-    return http.request<GetAuthCodeByUserIdResult>({
-        url: Api.GetBtnCodeListByUserId,
-        method: 'GET',
-        params
-    })
+export function getMenuList(params?) {
+  return http.request({
+    url: '/menu/list',
+    method: 'GET',
+    params,
+  });
 }

src/api/system/role.ts

@@ -0,0 +1,11 @@
+import http from '@/utils/http/axios';
+
+/**
+ * @description: 角色列表
+ */
+export function getRoleList() {
+  return http.request({
+    url: '/role/list',
+    method: 'GET',
+  });
+}

src/api/system/user.ts

@@ -1,68 +1,66 @@
-import http from '@/utils/http/axios'
+import http from '@/utils/http/axios';
 
 export interface BasicResponseModel<T = any> {
-    code: number
-    message: string
-    result: T
+  code: number;
+  message: string;
+  result: T;
 }
 
 export interface BasicPageParams {
-    pageNumber: number
-    pageSize: number
-    total: number
+  pageNumber: number;
+  pageSize: number;
+  total: number;
 }
 
 /**
  * @description: 获取用户信息
  */
 export function getUserInfo() {
-    return http.request(
-        {
-            url: '/admin_info',
-            method: 'get'
-        }
-    )
+  return http.request({
+    url: '/admin_info',
+    method: 'get',
+  });
 }
 
 /**
  * @description: 用户登录
  */
 export function login(params) {
-    return http.request<BasicResponseModel>(
-        {
-            url: '/login',
-            method: 'POST',
-            params
-        },
-        {
-            isTransformRequestResult: false
-        }
-    )
+  return http.request<BasicResponseModel>(
+    {
+      url: '/login',
+      method: 'POST',
+      params,
+    },
+    {
+      isTransformResponse: false,
+    }
+  );
 }
 
 /**
  * @description: 用户修改密码
  */
 export function changePassword(params, uid) {
-    return http.request(
-        {
-            url: `/user/u${ uid }/changepw`,
-            method: 'POST',
-            params
-        },
-        {
-            isTransformRequestResult: false
-        }
-    )
+  return http.request(
+    {
+      url: `/user/u${uid}/changepw`,
+      method: 'POST',
+      params,
+    },
+    {
+      isTransformResponse: false,
+    }
+  );
 }
 
 /**
  * @description: 用户登出
  */
 export function logout(params) {
-    return http.request({
-        url: '/login/logout',
-        method: 'POST',
-        params
-    })
+  return http.request({
+    url: '/login/logout',
+    method: 'POST',
+    params,
+  });
 }

src/api/table/list.ts

@@ -1,12 +1,10 @@
-import http from '@/utils/http/axios'
+import http from '@/utils/http/axios';
 
 //获取table
 export function getTableList(params) {
-    return http.request(
-        {
-            url: '/table/list',
-            method: 'get',
-            params
-        }
-    )
+  return http.request({
+    url: '/table/list',
+    method: 'get',
+    params,
+  });
 }

src/components/Application/Application.vue

@@ -1,25 +1,43 @@
 <template>
-  <n-dialog-provider>
-    <DialogContent/>
-    <n-notification-provider>
-      <n-message-provider>
-        <MessageContent/>
-        <slot slot="default"></slot>
-      </n-message-provider>
-    </n-notification-provider>
-  </n-dialog-provider>
+  <n-loading-bar-provider>
+    <LoadingContent />
+    <n-dialog-provider>
+      <DialogContent />
+      <n-notification-provider>
+        <n-message-provider>
+          <MessageContent />
+          <slot slot="default"></slot>
+        </n-message-provider>
+      </n-notification-provider>
+    </n-dialog-provider>
+  </n-loading-bar-provider>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import { MessageContent } from '@/components/MessageContent'
-import { DialogContent } from '@/components/DialogContent'
+  import { defineComponent } from 'vue';
+  import {
+    NDialogProvider,
+    NNotificationProvider,
+    NMessageProvider,
+    NLoadingBarProvider,
+  } from 'naive-ui';
+  import { LoadingContent } from '@/components/LoadingContent';
+  import { MessageContent } from '@/components/MessageContent';
+  import { DialogContent } from '@/components/DialogContent';
 
-export default defineComponent({
-  name: 'Application',
-  components: { MessageContent, DialogContent },
-  setup() {
-    return {}
-  }
-})
+  export default defineComponent({
+    name: 'Application',
+    components: {
+      NDialogProvider,
+      NNotificationProvider,
+      NMessageProvider,
+      NLoadingBarProvider,
+      LoadingContent,
+      MessageContent,
+      DialogContent,
+    },
+    setup() {
+      return {};
+    },
+  });
 </script>

src/components/Application/index.ts

@@ -1,3 +1,3 @@
-import AppProvider from './Application.vue'
+import AppProvider from './Application.vue';
 
-export { AppProvider }
+export { AppProvider };

src/components/CountTo/CountTo.vue

@@ -4,107 +4,107 @@
   </span>
 </template>
 <script lang="ts">
-import { defineComponent, ref, computed, watchEffect, unref, onMounted, watch } from 'vue';
-import { useTransition, TransitionPresets } from '@vueuse/core';
-import { isNumber } from '@/utils/is';
+  import { defineComponent, ref, computed, watchEffect, unref, onMounted, watch } from 'vue';
+  import { useTransition, TransitionPresets } from '@vueuse/core';
+  import { isNumber } from '@/utils/is';
 
-const props = {
-  startVal: { type: Number, default: 0 },
-  endVal: { type: Number, default: 2021 },
-  duration: { type: Number, default: 1500 },
-  autoplay: { type: Boolean, default: true },
-  decimals: {
-    type: Number,
-    default: 0,
-    validator(value: number) {
-      return value >= 0;
+  const props = {
+    startVal: { type: Number, default: 0 },
+    endVal: { type: Number, default: 2021 },
+    duration: { type: Number, default: 1500 },
+    autoplay: { type: Boolean, default: true },
+    decimals: {
+      type: Number,
+      default: 0,
+      validator(value: number) {
+        return value >= 0;
+      },
     },
-  },
-  prefix: { type: String, default: '' },
-  suffix: { type: String, default: '' },
-  separator: { type: String, default: ',' },
-  decimal: { type: String, default: '.' },
-  /**
-   * font color
-   */
-  color: { type: String },
-  /**
-   * Turn on digital animation
-   */
-  useEasing: { type: Boolean, default: true },
-  /**
-   * Digital animation
-   */
-  transition: { type: String, default: 'linear' },
-};
+    prefix: { type: String, default: '' },
+    suffix: { type: String, default: '' },
+    separator: { type: String, default: ',' },
+    decimal: { type: String, default: '.' },
+    /**
+     * font color
+     */
+    color: { type: String },
+    /**
+     * Turn on digital animation
+     */
+    useEasing: { type: Boolean, default: true },
+    /**
+     * Digital animation
+     */
+    transition: { type: String, default: 'linear' },
+  };
 
-export default defineComponent({
-  name: 'CountTo',
-  props,
-  emits: ['onStarted', 'onFinished'],
-  setup(props, { emit }) {
-    const source = ref(props.startVal);
-    const disabled = ref(false);
-    let outputValue = useTransition(source);
+  export default defineComponent({
+    name: 'CountTo',
+    props,
+    emits: ['onStarted', 'onFinished'],
+    setup(props, { emit }) {
+      const source = ref(props.startVal);
+      const disabled = ref(false);
+      let outputValue = useTransition(source);
 
-    const value = computed(() => formatNumber(unref(outputValue)));
+      const value = computed(() => formatNumber(unref(outputValue)));
 
-    watchEffect(() => {
-      source.value = props.startVal;
-    });
-
-    watch([() => props.startVal, () => props.endVal], () => {
-      if (props.autoplay) {
-        start();
-      }
-    });
-
-    onMounted(() => {
-      props.autoplay && start();
-    });
-
-    function start() {
-      run();
-      source.value = props.endVal;
-    }
-
-    function reset() {
-      source.value = props.startVal;
-      run();
-    }
-
-    function run() {
-      outputValue = useTransition(source, {
-        disabled,
-        duration: props.duration,
-        onFinished: () => emit('onFinished'),
-        onStarted: () => emit('onStarted'),
-        ...(props.useEasing ? { transition: TransitionPresets[props.transition] } : {}),
+      watchEffect(() => {
+        source.value = props.startVal;
       });
-    }
 
-    function formatNumber(num: number | string) {
-      if (!num) {
-        return '';
-      }
-      const { decimals, decimal, separator, suffix, prefix } = props;
-      num = Number(num).toFixed(decimals);
-      num += '';
-
-      const x = num.split('.');
-      let x1 = x[0];
-      const x2 = x.length > 1 ? decimal + x[1] : '';
-
-      const rgx = /(\d+)(\d{3})/;
-      if (separator && !isNumber(separator)) {
-        while (rgx.test(x1)) {
-          x1 = x1.replace(rgx, '$1' + separator + '$2');
+      watch([() => props.startVal, () => props.endVal], () => {
+        if (props.autoplay) {
+          start();
         }
-      }
-      return prefix + x1 + x2 + suffix;
-    }
+      });
 
-    return { value, start, reset };
-  },
-});
+      onMounted(() => {
+        props.autoplay && start();
+      });
+
+      function start() {
+        run();
+        source.value = props.endVal;
+      }
+
+      function reset() {
+        source.value = props.startVal;
+        run();
+      }
+
+      function run() {
+        outputValue = useTransition(source, {
+          disabled,
+          duration: props.duration,
+          onFinished: () => emit('onFinished'),
+          onStarted: () => emit('onStarted'),
+          ...(props.useEasing ? { transition: TransitionPresets[props.transition] } : {}),
+        });
+      }
+
+      function formatNumber(num: number | string) {
+        if (!num) {
+          return '';
+        }
+        const { decimals, decimal, separator, suffix, prefix } = props;
+        num = Number(num).toFixed(decimals);
+        num += '';
+
+        const x = num.split('.');
+        let x1 = x[0];
+        const x2 = x.length > 1 ? decimal + x[1] : '';
+
+        const rgx = /(\d+)(\d{3})/;
+        if (separator && !isNumber(separator)) {
+          while (rgx.test(x1)) {
+            x1 = x1.replace(rgx, '$1' + separator + '$2');
+          }
+        }
+        return prefix + x1 + x2 + suffix;
+      }
+
+      return { value, start, reset };
+    },
+  });
 </script>

src/components/DialogContent/index.ts

@@ -1,3 +1,3 @@
-import DialogContent from './index.vue'
+import DialogContent from './index.vue';
 
-export { DialogContent }
+export { DialogContent };

src/components/DialogContent/index.vue

@@ -1,12 +1,12 @@
 <template></template>
 <script lang="ts">
-import { useDialog } from 'naive-ui'
+  import { useDialog } from 'naive-ui';
 
-export default {
-  name: 'DialogContent',
-  setup() {
-    //挂载在 window 方便与在js中使用
-    window.$dialog = useDialog()
-  }
-}
+  export default {
+    name: 'DialogContent',
+    setup() {
+      //挂载在 window 方便与在js中使用
+      window['$dialog'] = useDialog();
+    },
+  };
 </script>

src/components/LoadingContent/index.ts

@@ -0,0 +1,3 @@
+import LoadingContent from './index.vue';
+
+export { LoadingContent };

src/components/LoadingContent/index.vue

@@ -0,0 +1,12 @@
+<template></template>
+<script lang="ts">
+  import { useLoadingBar } from 'naive-ui';
+
+  export default {
+    name: 'LoadingContent',
+    setup() {
+      //挂载在 window 方便与在js中使用
+      window['$loading'] = useLoadingBar();
+    },
+  };
+</script>

src/components/Lockscreen/Lockscreen.vue

@@ -1,29 +1,27 @@
 <template>
   <div
-      :class="{ onLockLogin: showLogin }"
-      class="lockscreen"
-      @keyup="onLockLogin(true)"
-      @mousedown.stop
-      @contextmenu.prevent
+    :class="{ onLockLogin: showLogin }"
+    class="lockscreen"
+    @keyup="onLockLogin(true)"
+    @mousedown.stop
+    @contextmenu.prevent
   >
     <template v-if="!showLogin">
-
       <div class="lock-box">
         <div class="lock">
           <span class="lock-icon" title="解锁屏幕" @click="onLockLogin(true)">
             <n-icon>
-              <lock-outlined/>
+              <lock-outlined />
             </n-icon>
           </span>
         </div>
-
       </div>
       <!--充电-->
       <recharge
-          :battery="battery"
-          :battery-status="batteryStatus"
-          :calc-discharging-time="calcDischargingTime"
-      ></recharge>
+        :battery="battery"
+        :battery-status="batteryStatus"
+        :calc-discharging-time="calcDischargingTime"
+      />
 
       <div class="local-time">
         <div class="time">{{ hour }}:{{ minute }}</div>
@@ -31,9 +29,9 @@
       </div>
       <div class="computer-status">
         <span :class="{ offline: !online }" class="network">
-          <wifi-outlined class="network"/>
+          <wifi-outlined class="network" />
         </span>
-        <api-outlined/>
+        <api-outlined />
       </div>
     </template>
 
@@ -42,19 +40,20 @@
       <div class="login-box">
         <n-avatar :size="128">
           <n-icon>
-            <user-outlined/>
+            <user-outlined />
           </n-icon>
         </n-avatar>
         <div class="username">{{ loginParams.username }}</div>
         <n-input
-            type="password"
-            autofocus
-            v-model:value="loginParams.password"
-            placeholder="请输入登录密码">
+          type="password"
+          autofocus
+          v-model:value="loginParams.password"
+          placeholder="请输入登录密码"
+        >
           <template #suffix>
-            <n-icon @click="onLogin" style="cursor: pointer;">
-              <LoadingOutlined v-if="loginLoading"/>
-              <arrow-right-outlined v-else/>
+            <n-icon @click="onLogin" style="cursor: pointer">
+              <LoadingOutlined v-if="loginLoading" />
+              <arrow-right-outlined v-else />
             </n-icon>
           </template>
         </n-input>
@@ -64,241 +63,239 @@
         </div>
 
         <div class="w-full mt-1 flex justify-around">
-          <div><a @click="showLogin=false">返回</a></div>
+          <div><a @click="showLogin = false">返回</a></div>
           <div><a @click="goLogin">重新登录</a></div>
           <div><a @click="onLogin">进入系统</a></div>
         </div>
-
       </div>
     </template>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, reactive, toRefs, computed } from 'vue'
-import { ResultEnum } from '@/enums/httpEnum'
-import recharge from './Recharge.vue'
-import {
-  LockOutlined,
-  LoadingOutlined,
-  UnlockOutlined,
-  UserOutlined,
-  ApiOutlined,
-  ArrowRightOutlined,
-  WifiOutlined,
-} from '@vicons/antd'
-
-import { useRouter, useRoute } from 'vue-router'
-import { useOnline } from '@/hooks/useOnline'
-import { useTime } from '@/hooks/useTime'
-import { useBattery } from '@/hooks/useBattery'
-import { useLockscreenStore } from '@/store/modules/lockscreen'
-import { useUserStore } from '@/store/modules/user'
-
-export default defineComponent({
-  name: 'Lockscreen',
-  components: {
+  import { defineComponent, reactive, toRefs } from 'vue';
+  import { ResultEnum } from '@/enums/httpEnum';
+  import recharge from './Recharge.vue';
+  import {
     LockOutlined,
     LoadingOutlined,
-    UnlockOutlined,
     UserOutlined,
-    ArrowRightOutlined,
     ApiOutlined,
+    ArrowRightOutlined,
     WifiOutlined,
-    recharge,
-  },
-  setup(props, { emit }) {
-    const useLockscreen = useLockscreenStore()
-    const userStore = useUserStore();
+  } from '@vicons/antd';
 
-    // 获取时间
-    const { month, day, hour, minute, second, week } = useTime()
-    const { online } = useOnline()
+  import { useRouter, useRoute } from 'vue-router';
+  import { useOnline } from '@/hooks/useOnline';
+  import { useTime } from '@/hooks/useTime';
+  import { useBattery } from '@/hooks/useBattery';
+  import { useLockscreenStore } from '@/store/modules/lockscreen';
+  import { useUserStore } from '@/store/modules/user';
 
-    const router = useRouter()
-    const route = useRoute()
+  export default defineComponent({
+    name: 'Lockscreen',
+    components: {
+      LockOutlined,
+      LoadingOutlined,
+      UserOutlined,
+      ArrowRightOutlined,
+      ApiOutlined,
+      WifiOutlined,
+      recharge,
+    },
+    setup() {
+      const useLockscreen = useLockscreenStore();
+      const userStore = useUserStore();
 
-    const { battery, batteryStatus, calcDischargingTime } = useBattery()
-    const { username } = userStore.getUserInfo || {}
-    const state = reactive({
-      showLogin: false,
-      loginLoading: false, // 正在登录
-      isLoginError: false, //密码错误
-      errorMsg: '密码错误',
-      loginParams: {
-        username: username || '',
-        password: ''
-      }
-    })
+      // 获取时间
+      const { month, day, hour, minute, second, week } = useTime();
+      const { online } = useOnline();
 
-    // 解锁登录
-    const onLockLogin = (value: boolean) => (state.showLogin = value)
+      const router = useRouter();
+      const route = useRoute();
 
-    // 登录
-    const onLogin = async () => {
-      if (!state.loginParams.password.trim()) {
-        return
-      }
-      const params = {
-        isLock: true,
-        ...state.loginParams
-      }
-      state.loginLoading = true
-      const { code, result, message } = await userStore.login(params)
-      if (code === ResultEnum.SUCCESS) {
-        onLockLogin(false)
-        useLockscreen.setLock(false)
-      } else {
-        state.errorMsg = message
-        state.isLoginError = true
-      }
-      state.loginLoading = false
-    }
+      const { battery, batteryStatus, calcDischargingTime } = useBattery();
+      const userInfo: object = userStore.getUserInfo || {};
+      const username = userInfo['username'] || '';
+      const state = reactive({
+        showLogin: false,
+        loginLoading: false, // 正在登录
+        isLoginError: false, //密码错误
+        errorMsg: '密码错误',
+        loginParams: {
+          username: username || '',
+          password: '',
+        },
+      });
 
-    //重新登录
-    const goLogin = () => {
-      onLockLogin(false)
-      useLockscreen.setLock(false)
-      router.replace({
-        path: '/login',
-        query: {
-          redirect: route.fullPath
+      // 解锁登录
+      const onLockLogin = (value: boolean) => (state.showLogin = value);
+
+      // 登录
+      const onLogin = async () => {
+        if (!state.loginParams.password.trim()) {
+          return;
         }
-      })
-    }
+        const params = {
+          isLock: true,
+          ...state.loginParams,
+        };
+        state.loginLoading = true;
+        const { code, message } = await userStore.login(params);
+        if (code === ResultEnum.SUCCESS) {
+          onLockLogin(false);
+          useLockscreen.setLock(false);
+        } else {
+          state.errorMsg = message;
+          state.isLoginError = true;
+        }
+        state.loginLoading = false;
+      };
 
-    return {
-      ...toRefs(state),
-      online,
-      month,
-      day,
-      hour,
-      minute,
-      second,
-      week,
-      battery,
-      batteryStatus,
-      calcDischargingTime,
-      onLockLogin,
-      onLogin,
-      goLogin
-    }
-  }
-})
+      //重新登录
+      const goLogin = () => {
+        onLockLogin(false);
+        useLockscreen.setLock(false);
+        router.replace({
+          path: '/login',
+          query: {
+            redirect: route.fullPath,
+          },
+        });
+      };
+
+      return {
+        ...toRefs(state),
+        online,
+        month,
+        day,
+        hour,
+        minute,
+        second,
+        week,
+        battery,
+        batteryStatus,
+        calcDischargingTime,
+        onLockLogin,
+        onLogin,
+        goLogin,
+      };
+    },
+  });
 </script>
 
 <style lang="less" scoped>
-.lockscreen {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  background: #000;
-  color: white;
-  overflow: hidden;
-  z-index: 9999;
-
-  &.onLockLogin {
-    background-color: rgba(25, 28, 34, 0.88);
-    backdrop-filter: blur(7px);
-  }
-
-  .login-box {
-    position: absolute;
-    top: 45%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  .lockscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+    background: #000;
+    color: white;
+    overflow: hidden;
+    z-index: 9999;
 
-    > * {
-      margin-bottom: 14px;
+    &.onLockLogin {
+      background-color: rgba(25, 28, 34, 0.88);
+      backdrop-filter: blur(7px);
     }
 
-    .username {
-      font-size: 30px;
-    }
-  }
-
-  .lock-box {
-    position: absolute;
-    top: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: 34px;
-    z-index: 100;
-
-    .tips {
-      color: white;
-      cursor: text;
-    }
-
-    .lock {
+    .login-box {
+      position: absolute;
+      top: 45%;
+      left: 50%;
+      transform: translate(-50%, -50%);
       display: flex;
+      flex-direction: column;
       justify-content: center;
+      align-items: center;
 
-      .lock-icon {
-        cursor: pointer;
+      > * {
+        margin-bottom: 14px;
+      }
 
-        .anticon-unlock {
-          display: none;
+      .username {
+        font-size: 30px;
+      }
+    }
+
+    .lock-box {
+      position: absolute;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 34px;
+      z-index: 100;
+
+      .tips {
+        color: white;
+        cursor: text;
+      }
+
+      .lock {
+        display: flex;
+        justify-content: center;
+
+        .lock-icon {
+          cursor: pointer;
+
+          .anticon-unlock {
+            display: none;
+          }
+
+          &:hover .anticon-unlock {
+            display: initial;
+          }
+
+          &:hover .anticon-lock {
+            display: none;
+          }
         }
+      }
+    }
 
-        &:hover .anticon-unlock {
-          display: initial;
-        }
+    .local-time {
+      position: absolute;
+      bottom: 60px;
+      left: 60px;
+      font-family: helvetica;
 
-        &:hover .anticon-lock {
-          display: none;
+      .time {
+        font-size: 70px;
+      }
+
+      .date {
+        font-size: 40px;
+      }
+    }
+
+    .computer-status {
+      position: absolute;
+      bottom: 60px;
+      right: 60px;
+      font-size: 24px;
+
+      > * {
+        margin-left: 14px;
+      }
+
+      .network {
+        position: relative;
+
+        &.offline::before {
+          content: '';
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          width: 2px;
+          height: 28px;
+          transform: translate(-50%, -50%) rotate(45deg);
+          background-color: red;
+          z-index: 10;
         }
       }
     }
   }
-
-  .local-time {
-    position: absolute;
-    bottom: 60px;
-    left: 60px;
-    font-family: helvetica;
-
-    .time {
-      font-size: 70px;
-    }
-
-    .date {
-      font-size: 40px;
-    }
-  }
-
-  .computer-status {
-    position: absolute;
-    bottom: 60px;
-    right: 60px;
-    font-size: 24px;
-
-    > * {
-      margin-left: 14px;
-    }
-
-    .network {
-      position: relative;
-
-      &.offline::before {
-        content: '';
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        width: 2px;
-        height: 28px;
-        transform: translate(-50%, -50%) rotate(45deg);
-        background-color: red;
-        z-index: 10;
-      }
-    }
-  }
-}
 </style>

src/components/Lockscreen/Recharge.vue

@@ -20,120 +20,120 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+  import { defineComponent } from 'vue';
 
-export default defineComponent({
-  name: 'HuaweiCharge',
-  // props: ['batteryStatus', 'battery', 'calcDischargingTime'],
-  props: {
-    battery: {
-      // 电池对象
-      type: Object,
-      default: () => ({})
+  export default defineComponent({
+    name: 'HuaweiCharge',
+    // props: ['batteryStatus', 'battery', 'calcDischargingTime'],
+    props: {
+      battery: {
+        // 电池对象
+        type: Object,
+        default: () => ({}),
+      },
+      calcDischargingTime: {
+        // 电池剩余时间可用时间
+        type: String,
+        default: '',
+      },
+      batteryStatus: {
+        // 电池状态
+        type: String,
+        validator: (val: string) => ['充电中', '已充满', '已断开电源'].includes(val),
+      },
     },
-    calcDischargingTime: {
-      // 电池剩余时间可用时间
-      type: String,
-      default: ''
-    },
-    batteryStatus: {
-      // 电池状态
-      type: String,
-      validator: (val: string) => ['充电中', '已充满', '已断开电源'].includes(val)
-    }
-  }
-})
+  });
 </script>
 
 <style lang="less" scoped>
-.container {
-  position: absolute;
-  bottom: 20vh;
-  left: 50vw;
-  width: 300px;
-  height: 400px;
-  transform: translateX(-50%);
-
-  .number {
+  .container {
     position: absolute;
-    top: 27%;
-    z-index: 10;
-    width: 300px;
-    font-size: 32px;
-    color: #fff;
-    text-align: center;
-  }
-
-  .contrast {
+    bottom: 20vh;
+    left: 50vw;
     width: 300px;
     height: 400px;
-    overflow: hidden;
-    background-color: #000;
-    filter: contrast(15) hue-rotate(0);
-    animation: hueRotate 10s infinite linear;
+    transform: translateX(-50%);
 
-    .circle {
-      position: relative;
-      width: 300px;
-      height: 300px;
-      filter: blur(8px);
-      box-sizing: border-box;
-
-      &::after {
-        position: absolute;
-        top: 40%;
-        left: 50%;
-        width: 200px;
-        height: 200px;
-        background-color: #00ff6f;
-        border-radius: 42% 38% 62% 49% / 45%;
-        content: '';
-        transform: translate(-50%, -50%) rotate(0);
-        animation: rotate 10s infinite linear;
-      }
-
-      &::before {
-        position: absolute;
-        top: 40%;
-        left: 50%;
-        z-index: 10;
-        width: 176px;
-        height: 176px;
-        background-color: #000;
-        border-radius: 50%;
-        content: '';
-        transform: translate(-50%, -50%);
-      }
-    }
-
-    .bubbles {
+    .number {
       position: absolute;
-      bottom: 0;
-      left: 50%;
-      width: 100px;
-      height: 40px;
-      background-color: #00ff6f;
-      border-radius: 100px 100px 0 0;
-      filter: blur(5px);
-      transform: translate(-50%, 0);
+      top: 27%;
+      z-index: 10;
+      width: 300px;
+      font-size: 32px;
+      color: #fff;
+      text-align: center;
+    }
 
-      li {
-        position: absolute;
-        background: #00ff6f;
-        border-radius: 50%;
+    .contrast {
+      width: 300px;
+      height: 400px;
+      overflow: hidden;
+      background-color: #000;
+      filter: contrast(15) hue-rotate(0);
+      animation: hueRotate 10s infinite linear;
+
+      .circle {
+        position: relative;
+        width: 300px;
+        height: 300px;
+        filter: blur(8px);
+        box-sizing: border-box;
+
+        &::after {
+          position: absolute;
+          top: 40%;
+          left: 50%;
+          width: 200px;
+          height: 200px;
+          background-color: #00ff6f;
+          border-radius: 42% 38% 62% 49% / 45%;
+          content: '';
+          transform: translate(-50%, -50%) rotate(0);
+          animation: rotate 10s infinite linear;
+        }
+
+        &::before {
+          position: absolute;
+          top: 40%;
+          left: 50%;
+          z-index: 10;
+          width: 176px;
+          height: 176px;
+          background-color: #000;
+          border-radius: 50%;
+          content: '';
+          transform: translate(-50%, -50%);
+        }
       }
+
+      .bubbles {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        width: 100px;
+        height: 40px;
+        background-color: #00ff6f;
+        border-radius: 100px 100px 0 0;
+        filter: blur(5px);
+        transform: translate(-50%, 0);
+
+        li {
+          position: absolute;
+          background: #00ff6f;
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .charging {
+      font-size: 20px;
+      text-align: center;
     }
   }
 
-  .charging {
-    font-size: 20px;
-    text-align: center;
-  }
-}
-
-@width: ~`Math.round(Math.random() * 100)` px;
-@left: calc(15px + `Math.round(Math.random(70))`);
-each(range(15), {
+  @width: ~`Math.round(Math.random() * 100) ` px;
+  @left: calc(15px + `Math.round(Math.random(70)) `);
+  each(range(15), {
   .xiaoma-@{value} {
     height: (@value * 50px);
   }
@@ -147,31 +147,30 @@ each(range(15), {
   }
 });
 
+  @keyframes rotate {
+    50% {
+      border-radius: 45% / 42% 38% 58% 49%;
+    }
 
-@keyframes rotate {
-  50% {
-    border-radius: 45% / 42% 38% 58% 49%;
+    100% {
+      transform: translate(-50%, -50%) rotate(720deg);
+    }
   }
 
-  100% {
-    transform: translate(-50%, -50%) rotate(720deg);
-  }
-}
+  @keyframes moveToTop {
+    90% {
+      opacity: 1;
+    }
 
-@keyframes moveToTop {
-  90% {
-    opacity: 1;
+    100% {
+      opacity: 0.1;
+      transform: translate(-50%, -180px);
+    }
   }
 
-  100% {
-    opacity: 0.1;
-    transform: translate(-50%, -180px);
+  @keyframes hueRotate {
+    100% {
+      filter: contrast(15) hue-rotate(360deg);
+    }
   }
-}
-
-@keyframes hueRotate {
-  100% {
-    filter: contrast(15) hue-rotate(360deg);
-  }
-}
 </style>

src/components/Lockscreen/index.ts

@@ -1,3 +1,3 @@
-import LockScreen from './Lockscreen.vue'
+import LockScreen from './Lockscreen.vue';
 
-export { LockScreen }
+export { LockScreen };

src/components/MessageContent/index.ts

@@ -1,3 +1,3 @@
-import MessageContent from './index.vue'
+import MessageContent from './index.vue';
 
-export { MessageContent }
+export { MessageContent };

src/components/MessageContent/index.vue

@@ -1,12 +1,12 @@
 <template></template>
 <script lang="ts">
-import { useMessage } from 'naive-ui'
+  import { useMessage } from 'naive-ui';
 
-export default {
-  name: 'MessageContent',
-  setup() {
-    //挂载在 window 方便与在js中使用
-    window.$message = useMessage()
-  }
-}
+  export default {
+    name: 'MessageContent',
+    setup() {
+      //挂载在 window 方便与在js中使用
+      window['$message'] = useMessage();
+    },
+  };
 </script>

src/components/Table/README.md

@@ -1,91 +0,0 @@
-BasicTable 重封装组件说明
-====
-
-封装说明
-----
-
-> 基础的使用方式与 API 与 [官方版(data-table)](https://www.naiveui.com/zh-CN/os-theme/components/data-table#tree) 本一致，在其基础上，封装了加载数据的方法。
->
-> 你无需在你是用表格的页面进行分页逻辑处理，仅需向 BasicTable 组件传递绑定 `:api="Promise"` 对象即可
->
-> 例子1
-----
-（基础使用）
-
-```vue
-
-<template>
-    <BasicTable
-      title="表格列表"
-      :columns="columns"
-      :api="loadDataTable"
-      :row-key="row => row.id"
-      @update:checked-row-keys="onCheckedRow"
-    >
-      <template #toolbar>
-        <n-button type="primary">添加会员</n-button>
-      </template>
-    </BasicTable>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { BasicTable } from '@/components/Table'
-import { getTableList } from '@/api/table/list'
-const columns = [
-    {
-      title: 'id',
-      key: 'id'
-    },
-    {
-      title: '名称',
-      key: 'name'
-    },
-    {
-      title: '地址',
-      key: 'address'
-    },
-    {
-      title: '日期',
-      key: 'date'
-    },
-]
-export default defineComponent({
-  components: { BasicTable },
-  setup() {
-      const loadDataTable = async (params) => {
-        const data = await getTableList(params);
-        return data
-      }
-    return {
-      columns,
-      loadDataTable
-    }
-  }
-})
-</script>
-```
-
-API
-----
-BasicTable 在 NaiveUi 的 data-table 上进行了一层封装，支持了一些预设，并且封装了一些行为。这里只列出与 data-table 不同的 api。
-
-> request：Promise 参考上面例子写法
-> ref：可绑定ref 调用组件内部方法（data-table本身的方法和参数）
-
-Methods
-----
-> reload：actionRef.value.reload()
-
-> 其余方法，请打印查看
-
-Slots
-----
-> 名称：tableTitle | 表格顶部左侧区域                          
-> 名称：toolbar | 表格顶部右侧区域
-
-
-更新时间
-----
-
-该文档最后更新于： 2021-07-12 PM 10:13

src/components/Table/index.ts

@@ -1 +1,4 @@
 export { default as BasicTable } from './src/Table.vue';
+export { default as TableAction } from './src/components/TableAction.vue';
+export * from './src/types/table';
+export * from './src/types/tableAction';

src/components/Table/src/Table.vue

@@ -1,15 +1,14 @@
 <template>
   <div class="table-toolbar">
-
     <!--顶部左侧区域-->
-    <div class="flex items-center table-toolbar-left ">
+    <div class="flex items-center table-toolbar-left">
       <template v-if="title">
         <div class="table-toolbar-left-title">
           {{ title }}
           <n-tooltip trigger="hover" v-if="titleTooltip">
             <template #trigger>
               <n-icon size="18" class="ml-1 cursor-pointer text-gray-400">
-                <QuestionCircleOutlined/>
+                <QuestionCircleOutlined />
               </n-icon>
             </template>
             {{ titleTooltip }}
@@ -20,7 +19,6 @@
     </div>
 
     <div class="flex items-center table-toolbar-right">
-
       <!--顶部右侧区域-->
       <slot name="toolbar"></slot>
 
@@ -29,7 +27,7 @@
         <template #trigger>
           <div class="table-toolbar-right-icon" @click="reload">
             <n-icon size="18">
-              <ReloadOutlined/>
+              <ReloadOutlined />
             </n-icon>
           </div>
         </template>
@@ -40,9 +38,14 @@
       <n-tooltip trigger="hover">
         <template #trigger>
           <div class="table-toolbar-right-icon">
-            <n-dropdown @select="densitySelect" trigger="click" :options="densityOptions" v-model:value="tableSize">
+            <n-dropdown
+              @select="densitySelect"
+              trigger="click"
+              :options="densityOptions"
+              v-model:value="tableSize"
+            >
               <n-icon size="18">
-                <ColumnHeightOutlined/>
+                <ColumnHeightOutlined />
               </n-icon>
             </n-dropdown>
           </div>
@@ -51,17 +54,16 @@
       </n-tooltip>
 
       <!--表格设置单独抽离成组件-->
-      <ColumnSetting></ColumnSetting>
-
+      <ColumnSetting />
     </div>
-
   </div>
   <div class="s-table">
     <n-data-table
-        v-bind="getBindValues"
-        :pagination="pagination"
-        @update:page="updatePage"
-        @update:page-size="updatePageSize"
+      ref="tableElRef"
+      v-bind="getBindValues"
+      :pagination="pagination"
+      @update:page="updatePage"
+      @update:page-size="updatePageSize"
     >
       <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
         <slot :name="item" v-bind="data"></slot>
@@ -71,226 +73,270 @@
 </template>
 
 <script lang="ts">
-import { NDataTable } from 'naive-ui'
-import { ref, defineComponent, reactive, unref, onMounted, toRaw, onBeforeMount, computed, toRefs, watch } from "vue"
-import { ReloadOutlined, ColumnHeightOutlined, SettingOutlined, DragOutlined, QuestionCircleOutlined } from '@vicons/antd'
-import { createTableContext } from './hooks/useTableContext';
+  import { NDataTable } from 'naive-ui';
+  import {
+    ref,
+    defineComponent,
+    reactive,
+    unref,
+    toRaw,
+    computed,
+    toRefs,
+    onMounted,
+    nextTick,
+  } from 'vue';
+  import { ReloadOutlined, ColumnHeightOutlined, QuestionCircleOutlined } from '@vicons/antd';
+  import { createTableContext } from './hooks/useTableContext';
 
-import ColumnSetting from './components/settings/ColumnSetting.vue'
+  import ColumnSetting from './components/settings/ColumnSetting.vue';
 
-import { useLoading } from './hooks/useLoading';
-import { useColumns } from './hooks/useColumns';
-import { useDataSource } from './hooks/useDataSource';
-import { usePagination } from './hooks/usePagination';
+  import { useLoading } from './hooks/useLoading';
+  import { useColumns } from './hooks/useColumns';
+  import { useDataSource } from './hooks/useDataSource';
+  import { usePagination } from './hooks/usePagination';
 
-import { basicProps } from './props'
+  import { basicProps } from './props';
 
-import { BasicTableProps } from './types/table'
+  import { BasicTableProps } from './types/table';
 
+  import { getViewportOffset } from '@/utils/domUtils';
+  import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn';
+  import { isBoolean } from '@/utils/is';
 
-const densityOptions = [
-  {
-    type: "menu",
-    label: '紧凑',
-    key: 'small',
-  },
-  {
-    type: "menu",
-    label: '默认',
-    key: "medium"
-  },
-  {
-    type: "menu",
-    label: '宽松',
-    key: 'large'
-  }
-]
+  const densityOptions = [
+    {
+      type: 'menu',
+      label: '紧凑',
+      key: 'small',
+    },
+    {
+      type: 'menu',
+      label: '默认',
+      key: 'medium',
+    },
+    {
+      type: 'menu',
+      label: '宽松',
+      key: 'large',
+    },
+  ];
 
-export default defineComponent({
-  components: {
-    ReloadOutlined, ColumnHeightOutlined, SettingOutlined, DragOutlined, ColumnSetting, QuestionCircleOutlined
-  },
-  props: {
-    ...NDataTable.props, // 这里继承原 UI 组件的 props
-    ...basicProps
-  },
-  emits: [
-    'fetch-success',
-    'fetch-error',
-    'update:checked-row-keys'
-  ],
-  setup(props, { emit }) {
+  export default defineComponent({
+    components: {
+      ReloadOutlined,
+      ColumnHeightOutlined,
+      ColumnSetting,
+      QuestionCircleOutlined,
+    },
+    props: {
+      ...NDataTable.props, // 这里继承原 UI 组件的 props
+      ...basicProps,
+    },
+    emits: [
+      'fetch-success',
+      'fetch-error',
+      'update:checked-row-keys',
+      'edit-end',
+      'edit-cancel',
+      'edit-row-end',
+      'edit-change',
+    ],
+    setup(props, { emit }) {
+      const deviceHeight = ref(150);
+      const tableElRef = ref<ComponentRef>(null);
+      const wrapRef = ref<Nullable<HTMLDivElement>>(null);
+      let paginationEl: HTMLElement | null;
 
-    const wrapRef = ref<Nullable<HTMLDivElement>>(null);
+      const tableData = ref<Recordable[]>([]);
+      const innerPropsRef = ref<Partial<BasicTableProps>>();
 
-    const tableData = ref<Recordable[]>([]);
-    const innerPropsRef = ref<Partial<BasicTableProps>>();
+      const getProps = computed(() => {
+        return { ...props, ...unref(innerPropsRef) } as BasicTableProps;
+      });
 
-    const getProps = computed(() => {
-      return { ...props, ...unref(innerPropsRef) } as BasicTableProps;
-    });
+      const { getLoading, setLoading } = useLoading(getProps);
 
-    const { getLoading, setLoading } = useLoading(getProps);
+      const { getPaginationInfo, setPagination } = usePagination(getProps);
 
-    const {
-      getPaginationInfo,
-      getPagination,
-      setPagination,
-      setShowPagination,
-      getShowPagination,
-    } = usePagination(getProps)
-
-    const { getDataSourceRef, getRowKey, getDataSource, setDataSource, reload } = useDataSource(
-        getProps, {
+      const { getDataSourceRef, getRowKey, reload } = useDataSource(
+        getProps,
+        {
           getPaginationInfo,
           setPagination,
           tableData,
-          setLoading
-        }, emit
-    )
+          setLoading,
+        },
+        emit
+      );
 
-    const {
-      getPageColumns,
-      setColumns,
-      getColumns,
-      getCacheColumns,
-      setCacheColumnsField,
-      getColumnsRef
-    } = useColumns(getProps)
+      const { getPageColumns, setColumns, getColumns, getCacheColumns, setCacheColumnsField } =
+        useColumns(getProps);
 
-    const state = reactive({
-      tableSize: 'medium',
-      isColumnSetting: false
-    })
+      const state = reactive({
+        tableSize: 'medium',
+        isColumnSetting: false,
+      });
 
-    //页码切换
-    function updatePage(page) {
-      setPagination({ page: page, });
-      reload()
-    }
-
-    //分页数量切换
-    function updatePageSize(size) {
-      setPagination({ page: 1, pageSize: size, });
-      reload()
-    }
-
-    //密度切换
-    function densitySelect(e) {
-      state.tableSize = e
-    }
-
-    //选中行
-    function updateCheckedRowKeys(rowKeys) {
-      emit('update:checked-row-keys', rowKeys)
-    }
-
-    //重置 Columns
-    const resetColumns = () => {
-      columns.map(item => {
-        item.isShow = true
-      })
-    }
-
-    //获取表格大小
-    const getTableSize = computed(() => state.tableSize)
-
-    //组装表格信息
-    const getBindValues = computed(() => {
-      const tableData = unref(getDataSourceRef);
-      let propsData = {
-        ...unref(getProps),
-        loading: unref(getLoading),
-        columns: toRaw(unref(getPageColumns)),
-        rowKey: unref(getRowKey),
-        data: tableData,
-        size: unref(getTableSize),
-        remote: true
+      //页码切换
+      function updatePage(page) {
+        setPagination({ page: page });
+        reload();
       }
-      return propsData
-    })
 
-    //获取分页信息
-    const pagination = computed(() => toRaw(unref(getPaginationInfo)))
+      //分页数量切换
+      function updatePageSize(size) {
+        setPagination({ page: 1, pageSize: size });
+        reload();
+      }
 
-    function setProps(props: Partial<BasicTableProps>) {
-      innerPropsRef.value = { ...unref(innerPropsRef), ...props };
-    }
+      //密度切换
+      function densitySelect(e) {
+        state.tableSize = e;
+      }
 
-    const tableAction: TableActionType = {
-      reload,
-      setColumns,
-      setLoading,
-      setProps,
-      getColumns,
-      getPageColumns,
-      getCacheColumns,
-      setCacheColumnsField,
-      emit,
-      getSize: () => {
-        return unref(getBindValues).size as SizeType;
-      },
-    };
+      //选中行
+      function updateCheckedRowKeys(rowKeys) {
+        emit('update:checked-row-keys', rowKeys);
+      }
 
-    createTableContext({ ...tableAction, wrapRef, getBindValues });
+      //获取表格大小
+      const getTableSize = computed(() => state.tableSize);
 
-    return {
-      ...toRefs(state),
-      getBindValues,
-      densityOptions,
-      reload,
-      densitySelect,
-      updatePage,
-      updatePageSize,
-      updateCheckedRowKeys,
-      pagination,
-      resetColumns,
-      tableAction
-    }
-  }
-})
+      //组装表格信息
+      const getBindValues = computed(() => {
+        const tableData = unref(getDataSourceRef);
+        const maxHeight = tableData.length ? `${unref(deviceHeight)}px` : 'auto';
+        return {
+          ...unref(getProps),
+          loading: unref(getLoading),
+          columns: toRaw(unref(getPageColumns)),
+          rowKey: unref(getRowKey),
+          data: tableData,
+          size: unref(getTableSize),
+          remote: true,
+          'max-height': maxHeight,
+        };
+      });
 
+      //获取分页信息
+      const pagination = computed(() => toRaw(unref(getPaginationInfo)));
+
+      function setProps(props: Partial<BasicTableProps>) {
+        innerPropsRef.value = { ...unref(innerPropsRef), ...props };
+      }
+
+      const tableAction = {
+        reload,
+        setColumns,
+        setLoading,
+        setProps,
+        getColumns,
+        getPageColumns,
+        getCacheColumns,
+        setCacheColumnsField,
+        emit,
+        getSize: () => {
+          return unref(getBindValues).size;
+        },
+      };
+
+      const getCanResize = computed(() => {
+        const { canResize } = unref(getProps);
+        return canResize;
+      });
+
+      async function computeTableHeight() {
+        const table = unref(tableElRef);
+        if (!table) return;
+        if (!unref(getCanResize)) return;
+        const tableEl: any = table?.$el;
+        const headEl = tableEl.querySelector('.n-data-table-thead ');
+        const { bottomIncludeBody } = getViewportOffset(headEl);
+        const headerH = 64;
+        let paginationH = 2;
+        let marginH = 24;
+        if (!isBoolean(pagination)) {
+          paginationEl = tableEl.querySelector('.n-data-table__pagination') as HTMLElement;
+          if (paginationEl) {
+            const offsetHeight = paginationEl.offsetHeight;
+            paginationH += offsetHeight || 0;
+          } else {
+            paginationH += 28;
+          }
+        }
+        let height =
+          bottomIncludeBody - (headerH + paginationH + marginH + (props.resizeHeightOffset || 0));
+        const maxHeight = props.maxHeight;
+        height = maxHeight && maxHeight < height ? maxHeight : height;
+        deviceHeight.value = height;
+      }
+
+      useWindowSizeFn(computeTableHeight, 280);
+
+      onMounted(() => {
+        nextTick(() => {
+          computeTableHeight();
+        });
+      });
+
+      createTableContext({ ...tableAction, wrapRef, getBindValues });
+
+      return {
+        ...toRefs(state),
+        tableElRef,
+        getBindValues,
+        densityOptions,
+        reload,
+        densitySelect,
+        updatePage,
+        updatePageSize,
+        updateCheckedRowKeys,
+        pagination,
+        tableAction,
+      };
+    },
+  });
 </script>
-<style lang='less' scoped>
-.table-toolbar {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 0 16px 0;
-
-  &-left {
+<style lang="less" scoped>
+  .table-toolbar {
     display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    flex: 1;
+    justify-content: space-between;
+    padding: 0 0 16px 0;
 
-    &-title {
+    &-left {
       display: flex;
       align-items: center;
       justify-content: flex-start;
-      font-size: 16px;
-      font-weight: 600;
+      flex: 1;
+
+      &-title {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        font-size: 16px;
+        font-weight: 600;
+      }
     }
-  }
 
-  &-right {
-    display: flex;
-    justify-content: flex-end;
-    flex: 1;
+    &-right {
+      display: flex;
+      justify-content: flex-end;
+      flex: 1;
 
-    &-icon {
-      margin-left: 12px;
-      font-size: 16px;
-      cursor: pointer;
-      color: var(--text-color);
+      &-icon {
+        margin-left: 12px;
+        font-size: 16px;
+        cursor: pointer;
+        color: var(--text-color);
 
-      :hover {
-        color: #1890ff;
+        :hover {
+          color: #1890ff;
+        }
       }
     }
   }
-}
 
-.table-toolbar-inner-popover-title {
-  padding: 2px 0;
-}
+  .table-toolbar-inner-popover-title {
+    padding: 2px 0;
+  }
 </style>

src/components/Table/src/componentMap.ts

@@ -0,0 +1,41 @@
+import type { Component } from 'vue';
+import {
+  NInput,
+  NSelect,
+  NCheckbox,
+  NInputNumber,
+  NSwitch,
+  NDatePicker,
+  NTimePicker,
+} from 'naive-ui';
+import type { ComponentType } from './types/componentType';
+
+export enum EventEnum {
+  NInput = 'on-input',
+  NInputNumber = 'on-input',
+  NSelect = 'on-update:value',
+  NSwitch = 'on-update:value',
+  NCheckbox = 'on-update:value',
+  NDatePicker = 'on-update:value',
+  NTimePicker = 'on-update:value',
+}
+
+const componentMap = new Map<ComponentType, Component>();
+
+componentMap.set('NInput', NInput);
+componentMap.set('NInputNumber', NInputNumber);
+componentMap.set('NSelect', NSelect);
+componentMap.set('NSwitch', NSwitch);
+componentMap.set('NCheckbox', NCheckbox);
+componentMap.set('NDatePicker', NDatePicker);
+componentMap.set('NTimePicker', NTimePicker);
+
+export function add(compName: ComponentType, component: Component) {
+  componentMap.set(compName, component);
+}
+
+export function del(compName: ComponentType) {
+  componentMap.delete(compName);
+}
+
+export { componentMap };

src/components/Table/src/components/TableAction.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="tableAction">
+    <div class="flex items-center justify-center">
+      <template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
+        <n-button v-bind="action" class="mx-2">{{ action.label }}</n-button>
+      </template>
+      <n-dropdown
+        v-if="dropDownActions && getDropdownList.length"
+        trigger="hover"
+        :options="getDropdownList"
+        @select="select"
+      >
+        <slot name="more"></slot>
+        <n-button v-bind="getMoreProps" class="mx-2" v-if="!$slots.more" icon-placement="right">
+          <div class="flex items-center">
+            <span>更多</span>
+            <n-icon size="14" class="ml-1">
+              <DownOutlined />
+            </n-icon>
+          </div>
+          <!--          <template #icon>-->
+          <!--            -->
+          <!--          </template>-->
+        </n-button>
+      </n-dropdown>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, PropType, computed, toRaw } from 'vue';
+  import { ActionItem } from '@/components/Table';
+  import { usePermission } from '@/hooks/web/usePermission';
+  import { isBoolean, isFunction } from '@/utils/is';
+  import { DownOutlined } from '@vicons/antd';
+
+  export default defineComponent({
+    name: 'TableAction',
+    components: { DownOutlined },
+    props: {
+      actions: {
+        type: Array as PropType<ActionItem[]>,
+        default: null,
+        required: true,
+      },
+      dropDownActions: {
+        type: Array as PropType<ActionItem[]>,
+        default: null,
+      },
+      style: {
+        type: String as PropType<String>,
+        default: 'button',
+      },
+      select: {
+        type: Function as PropType<Function>,
+        default: () => {},
+      },
+    },
+    setup(props) {
+      const { hasPermission } = usePermission();
+
+      const actionType =
+        props.style === 'button' ? 'default' : props.style === 'text' ? 'primary' : 'default';
+      const actionText =
+        props.style === 'button' ? undefined : props.style === 'text' ? true : undefined;
+
+      const getMoreProps = computed(() => {
+        return {
+          text: actionText,
+          type: actionType,
+          size: 'small',
+        };
+      });
+
+      const getDropdownList = computed(() => {
+        return (toRaw(props.dropDownActions) || [])
+          .filter((action) => {
+            return hasPermission(action.auth) && isIfShow(action);
+          })
+          .map((action) => {
+            const { popConfirm } = action;
+            return {
+              size: 'small',
+              text: actionText,
+              type: actionType,
+              ...action,
+              ...popConfirm,
+              onConfirm: popConfirm?.confirm,
+              onCancel: popConfirm?.cancel,
+            };
+          });
+      });
+
+      function isIfShow(action: ActionItem): boolean {
+        const ifShow = action.ifShow;
+
+        let isIfShow = true;
+
+        if (isBoolean(ifShow)) {
+          isIfShow = ifShow;
+        }
+        if (isFunction(ifShow)) {
+          isIfShow = ifShow(action);
+        }
+        return isIfShow;
+      }
+
+      const getActions = computed(() => {
+        return (toRaw(props.actions) || [])
+          .filter((action) => {
+            return hasPermission(action.auth) && isIfShow(action);
+          })
+          .map((action) => {
+            const { popConfirm } = action;
+            //需要展示什么风格，自己修改一下参数
+            return {
+              size: 'small',
+              text: actionText,
+              type: actionType,
+              ...action,
+              ...(popConfirm || {}),
+              onConfirm: popConfirm?.confirm,
+              onCancel: popConfirm?.cancel,
+              enable: !!popConfirm,
+            };
+          });
+      });
+
+      return {
+        getActions,
+        getDropdownList,
+        getMoreProps,
+      };
+    },
+  });
+</script>

src/components/Table/src/components/editable/CellComponent.ts

@@ -0,0 +1,47 @@
+import type { FunctionalComponent, defineComponent } from 'vue';
+import type { ComponentType } from '../../types/componentType';
+import { componentMap } from '@/components/Table/src/componentMap';
+
+import { h } from 'vue';
+
+import { NPopover } from 'naive-ui';
+
+export interface ComponentProps {
+  component: ComponentType;
+  rule: boolean;
+  popoverVisible: boolean;
+  ruleMessage: string;
+}
+
+export const CellComponent: FunctionalComponent = (
+  { component = 'NInput', rule = true, ruleMessage, popoverVisible }: ComponentProps,
+  { attrs }
+) => {
+  const Comp = componentMap.get(component) as typeof defineComponent;
+
+  const DefaultComp = h(Comp, attrs);
+  if (!rule) {
+    return DefaultComp;
+  }
+  return h(
+    NPopover,
+    { 'display-directive': 'show', show: !!popoverVisible, manual: 'manual' },
+    {
+      trigger: () => DefaultComp,
+      default: () =>
+        h(
+          'span',
+          {
+            style: {
+              color: 'red',
+              width: '90px',
+              display: 'inline-block',
+            },
+          },
+          {
+            default: () => ruleMessage,
+          }
+        ),
+    }
+  );
+};

src/components/Table/src/components/editable/EditableCell.vue

@@ -0,0 +1,402 @@
+<template>
+  <div class="editable-cell">
+    <div v-show="!isEdit" class="editable-cell-content" @click="handleEdit">
+      {{ getValues }}
+      <n-icon class="edit-icon" v-if="!column.editRow">
+        <FormOutlined />
+      </n-icon>
+    </div>
+    <div class="flex editable-cell-content" v-show="isEdit" v-click-outside="onClickOutside">
+      <CellComponent
+        v-bind="getComponentProps"
+        :component="getComponent"
+        :style="getWrapperStyle"
+        :popoverVisible="getRuleVisible"
+        :ruleMessage="ruleMessage"
+        :rule="getRule"
+        :class="getWrapperClass"
+        ref="elRef"
+        @options-change="handleOptionsChange"
+        @pressEnter="handleEnter"
+      />
+      <div class="editable-cell-action" v-if="!getRowEditable">
+        <n-icon class="cursor-pointer mx-2">
+          <CheckOutlined @click="handleSubmit" />
+        </n-icon>
+        <n-icon class="cursor-pointer mx-2">
+          <CloseOutlined @click="handleCancel" />
+        </n-icon>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import type { CSSProperties, PropType } from 'vue';
+  import type { BasicColumn } from '../../types/table';
+  import type { EditRecordRow } from './index';
+
+  import { defineComponent, ref, unref, nextTick, computed, watchEffect, toRaw } from 'vue';
+  import { FormOutlined, CloseOutlined, CheckOutlined } from '@vicons/antd';
+  import { CellComponent } from './CellComponent';
+
+  import { useTableContext } from '../../hooks/useTableContext';
+
+  import clickOutside from '@/directives/clickOutside';
+
+  import { propTypes } from '@/utils/propTypes';
+  import { isString, isBoolean, isFunction, isNumber, isArray } from '@/utils/is';
+  import { createPlaceholderMessage } from './helper';
+  import { set, omit } from 'lodash-es';
+  import { EventEnum } from '@/components/Table/src/componentMap';
+
+  import dayjs from 'dayjs';
+
+  export default defineComponent({
+    name: 'EditableCell',
+    components: { FormOutlined, CloseOutlined, CheckOutlined, CellComponent },
+    directives: {
+      clickOutside,
+    },
+    props: {
+      value: {
+        type: [String, Number, Boolean, Object] as PropType<string | number | boolean | Recordable>,
+        default: '',
+      },
+      record: {
+        type: Object as PropType<EditRecordRow>,
+      },
+      column: {
+        type: Object as PropType<BasicColumn>,
+        default: () => ({}),
+      },
+      index: propTypes.number,
+    },
+    setup(props) {
+      const table = useTableContext();
+      const isEdit = ref(false);
+      const elRef = ref();
+      const ruleVisible = ref(false);
+      const ruleMessage = ref('');
+      const optionsRef = ref<LabelValueOptions>([]);
+      const currentValueRef = ref<any>(props.value);
+      const defaultValueRef = ref<any>(props.value);
+
+      // const { prefixCls } = useDesign('editable-cell');
+
+      const getComponent = computed(() => props.column?.editComponent || 'NInput');
+      const getRule = computed(() => props.column?.editRule);
+
+      const getRuleVisible = computed(() => {
+        return unref(ruleMessage) && unref(ruleVisible);
+      });
+
+      const getIsCheckComp = computed(() => {
+        const component = unref(getComponent);
+        return ['NCheckbox', 'NSwitch'].includes(component);
+      });
+
+      const getComponentProps = computed(() => {
+        const compProps = props.column?.editComponentProps ?? {};
+        const editComponent = props.column?.editComponent ?? null;
+        const component = unref(getComponent);
+        const apiSelectProps: Recordable = {};
+
+        const isCheckValue = unref(getIsCheckComp);
+
+        const valueField = isCheckValue ? 'checked' : 'value';
+        const val = unref(currentValueRef);
+
+        let value = isCheckValue ? (isNumber(val) && isBoolean(val) ? val : !!val) : val;
+
+        if (component === 'NDatePicker') {
+          value = dayjs(value).valueOf();
+        }
+
+        const onEvent: any = editComponent ? EventEnum[editComponent] : undefined;
+
+        return {
+          placeholder: createPlaceholderMessage(unref(getComponent)),
+          ...apiSelectProps,
+          ...omit(compProps, 'onChange'),
+          [onEvent]: handleChange,
+          [valueField]: value,
+        };
+      });
+
+      const getValues = computed(() => {
+        const { editComponentProps, editValueMap } = props.column;
+
+        const value = unref(currentValueRef);
+
+        if (editValueMap && isFunction(editValueMap)) {
+          return editValueMap(value);
+        }
+
+        const component = unref(getComponent);
+        if (!component.includes('NSelect')) {
+          return value;
+        }
+
+        const options: LabelValueOptions = editComponentProps?.options ?? (unref(optionsRef) || []);
+        const option = options.find((item) => `${item.value}` === `${value}`);
+
+        return option?.label ?? value;
+      });
+
+      const getWrapperStyle = computed((): CSSProperties => {
+        // if (unref(getIsCheckComp) || unref(getRowEditable)) {
+        //   return {};
+        // }
+        return {
+          width: 'calc(100% - 48px)',
+        };
+      });
+
+      const getWrapperClass = computed(() => {
+        const { align = 'center' } = props.column;
+        return `edit-cell-align-${align}`;
+      });
+
+      const getRowEditable = computed(() => {
+        const { editable } = props.record || {};
+        return !!editable;
+      });
+
+      watchEffect(() => {
+        defaultValueRef.value = props.value;
+      });
+
+      watchEffect(() => {
+        const { editable } = props.column;
+        if (isBoolean(editable) || isBoolean(unref(getRowEditable))) {
+          isEdit.value = !!editable || unref(getRowEditable);
+        }
+      });
+
+      function handleEdit() {
+        if (unref(getRowEditable) || unref(props.column?.editRow)) return;
+        ruleMessage.value = '';
+        isEdit.value = true;
+        nextTick(() => {
+          const el = unref(elRef);
+          el?.focus?.();
+        });
+      }
+
+      async function handleChange(e: any) {
+        const component = unref(getComponent);
+        if (!e) {
+          currentValueRef.value = e;
+        } else if (e?.target && Reflect.has(e.target, 'value')) {
+          currentValueRef.value = (e as ChangeEvent).target.value;
+        } else if (component === 'NCheckbox') {
+          currentValueRef.value = (e as ChangeEvent).target.checked;
+        } else if (isString(e) || isBoolean(e) || isNumber(e)) {
+          currentValueRef.value = e;
+        }
+
+        //TODO 这里组件参数格式，和dayjs格式不一致
+        if (component === 'NDatePicker') {
+          let format = (props.column.editComponentProps?.format)
+            .replace(/yyyy/g, 'YYYY')
+            .replace(/dd/g, 'DD');
+          currentValueRef.value = dayjs(currentValueRef.value).format(format);
+        }
+
+        const onChange = props.column?.editComponentProps?.onChange;
+        if (onChange && isFunction(onChange)) onChange(...arguments);
+
+        table.emit?.('edit-change', {
+          column: props.column,
+          value: unref(currentValueRef),
+          record: toRaw(props.record),
+        });
+        await handleSubmiRule();
+      }
+
+      async function handleSubmiRule() {
+        const { column, record } = props;
+        const { editRule } = column;
+        const currentValue = unref(currentValueRef);
+
+        if (editRule) {
+          if (isBoolean(editRule) && !currentValue && !isNumber(currentValue)) {
+            ruleVisible.value = true;
+            const component = unref(getComponent);
+            ruleMessage.value = createPlaceholderMessage(component);
+            return false;
+          }
+          if (isFunction(editRule)) {
+            const res = await editRule(currentValue, record as Recordable);
+            if (!!res) {
+              ruleMessage.value = res;
+              ruleVisible.value = true;
+              return false;
+            } else {
+              ruleMessage.value = '';
+              return true;
+            }
+          }
+        }
+        ruleMessage.value = '';
+        return true;
+      }
+
+      async function handleSubmit(needEmit = true, valid = true) {
+        if (valid) {
+          const isPass = await handleSubmiRule();
+          if (!isPass) return false;
+        }
+
+        const { column, index, record } = props;
+        if (!record) return false;
+        const { key } = column;
+        const value = unref(currentValueRef);
+        if (!key) return;
+
+        const dataKey = key as string;
+
+        set(record, dataKey, value);
+        //const record = await table.updateTableData(index, dataKey, value);
+        needEmit && table.emit?.('edit-end', { record, index, key, value });
+        isEdit.value = false;
+      }
+
+      async function handleEnter() {
+        if (props.column?.editRow) {
+          return;
+        }
+        await handleSubmit();
+      }
+
+      function handleCancel() {
+        isEdit.value = false;
+        currentValueRef.value = defaultValueRef.value;
+        const { column, index, record } = props;
+        const { key } = column;
+        ruleVisible.value = true;
+        ruleMessage.value = '';
+        table.emit?.('edit-cancel', {
+          record,
+          index,
+          key: key,
+          value: unref(currentValueRef),
+        });
+      }
+
+      function onClickOutside() {
+        if (props.column?.editable || unref(getRowEditable)) {
+          return;
+        }
+        const component = unref(getComponent);
+
+        if (component.includes('NInput')) {
+          handleCancel();
+        }
+      }
+
+      // only ApiSelect
+      function handleOptionsChange(options: LabelValueOptions) {
+        optionsRef.value = options;
+      }
+
+      function initCbs(cbs: 'submitCbs' | 'validCbs' | 'cancelCbs', handle: Fn) {
+        if (props.record) {
+          /* eslint-disable  */
+      isArray(props.record[cbs])
+         ? props.record[cbs]?.push(handle)
+         : (props.record[cbs] = [handle]);
+     }
+    }
+
+    if (props.record) {
+     initCbs('submitCbs', handleSubmit);
+     initCbs('validCbs', handleSubmiRule);
+     initCbs('cancelCbs', handleCancel);
+
+     if (props.column.key) {
+      if (!props.record.editValueRefs) props.record.editValueRefs = {};
+      props.record.editValueRefs[props.column.key] = currentValueRef;
+     }
+     /* eslint-disable  */
+     props.record.onCancelEdit = () => {
+      isArray(props.record?.cancelCbs) && props.record?.cancelCbs.forEach((fn) => fn());
+     };
+     /* eslint-disable */
+     props.record.onSubmitEdit = async() => {
+      if (isArray(props.record?.submitCbs)) {
+       const validFns = (props.record?.validCbs || []).map((fn) => fn());
+
+       const res = await Promise.all(validFns);
+
+       const pass = res.every((item) => !!item);
+
+       if (!pass) return;
+       const submitFns = props.record?.submitCbs || [];
+       submitFns.forEach((fn) => fn(false, false));
+       table.emit?.('edit-row-end');
+       return true;
+      }
+     };
+    }
+
+    return {
+     isEdit,
+     handleEdit,
+     currentValueRef,
+     handleSubmit,
+     handleChange,
+     handleCancel,
+     elRef,
+     getComponent,
+     getRule,
+     onClickOutside,
+     ruleMessage,
+     getRuleVisible,
+     getComponentProps,
+     handleOptionsChange,
+     getWrapperStyle,
+     getWrapperClass,
+     getRowEditable,
+     getValues,
+     handleEnter,
+     // getSize,
+    };
+   },
+  });
+</script>
+
+<style lang="less">
+.editable-cell {
+ &-content {
+  position: relative;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  .edit-icon {
+   font-size: 14px;
+   //position: absolute;
+   //top: 4px;
+   //right: 0;
+   display: none;
+   width: 20px;
+   cursor: pointer;
+  }
+
+  &:hover {
+   .edit-icon {
+    display: inline-block;
+   }
+  }
+ }
+
+ &-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+ }
+}
+</style>

src/components/Table/src/components/editable/helper.ts

@@ -0,0 +1,15 @@
+import { ComponentType } from '../../types/componentType';
+
+/**
+ * @description: 生成placeholder
+ */
+export function createPlaceholderMessage(component: ComponentType) {
+  if (component === 'NInput') return '请输入';
+  if (
+    ['NPicker', 'NSelect', 'NCheckbox', 'NRadio', 'NSwitch', 'NDatePicker', 'NTimePicker'].includes(
+      component
+    )
+  )
+    return '请选择';
+  return '';
+}

src/components/Table/src/components/editable/index.ts

@@ -0,0 +1,49 @@
+import type { BasicColumn } from '@/components/Table/src/types/table';
+import { h, Ref } from 'vue';
+
+import EditableCell from './EditableCell.vue';
+
+export function renderEditCell(column: BasicColumn) {
+  return (record, index) => {
+    const _key = column.key;
+    const value = record[_key];
+    record.onEdit = async (edit: boolean, submit = false) => {
+      if (!submit) {
+        record.editable = edit;
+      }
+
+      if (!edit && submit) {
+        const res = await record.onSubmitEdit?.();
+        if (res) {
+          record.editable = false;
+          return true;
+        }
+        return false;
+      }
+      // cancel
+      if (!edit && !submit) {
+        record.onCancelEdit?.();
+      }
+      return true;
+    };
+    return h(EditableCell, {
+      value,
+      record,
+      column,
+      index,
+    });
+  };
+}
+
+export type EditRecordRow<T = Recordable> = Partial<
+  {
+    onEdit: (editable: boolean, submit?: boolean) => Promise<boolean>;
+    editable: boolean;
+    onCancel: Fn;
+    onSubmit: Fn;
+    submitCbs: Fn[];
+    cancelCbs: Fn[];
+    validCbs: Fn[];
+    editValueRefs: Recordable<Ref>;
+  } & T
+>;

src/components/Table/src/components/settings/ColumnSetting.vue

@@ -5,46 +5,62 @@
         <n-popover trigger="click" :width="230" class="toolbar-popover" placement="bottom-end">
           <template #trigger>
             <n-icon size="18">
-              <SettingOutlined/>
+              <SettingOutlined />
             </n-icon>
           </template>
           <template #header>
             <div class="table-toolbar-inner-popover-title">
               <n-space>
-                <n-checkbox v-model:checked="checkAll" @update:checked="onCheckAll">列展示</n-checkbox>
-                <n-checkbox v-model:checked="selection" @update:checked="onSelection">勾选列</n-checkbox>
-                <n-button text type="info" size="small" class="mt-1" @click="resetColumns">重置</n-button>
+                <n-checkbox v-model:checked="checkAll" @update:checked="onCheckAll"
+                  >列展示</n-checkbox
+                >
+                <n-checkbox v-model:checked="selection" @update:checked="onSelection"
+                  >勾选列</n-checkbox
+                >
+                <n-button text type="info" size="small" class="mt-1" @click="resetColumns"
+                  >重置</n-button
+                >
               </n-space>
             </div>
           </template>
           <div class="table-toolbar-inner">
             <n-checkbox-group v-model:value="checkList" @update:value="onChange">
               <Draggable v-model="columnsList" animation="300" item-key="key" @end="draggableEnd">
-                <template #item="{element, index}">
-                  <div class="table-toolbar-inner-checkbox"
-                       :class="{'table-toolbar-inner-checkbox-dark':getDarkTheme === true}">
+                <template #item="{ element }">
+                  <div
+                    class="table-toolbar-inner-checkbox"
+                    :class="{ 'table-toolbar-inner-checkbox-dark': getDarkTheme === true }"
+                  >
                     <span class="drag-icon">
                       <n-icon size="18">
-                        <DragOutlined/>
+                        <DragOutlined />
                       </n-icon>
                     </span>
-                    <n-checkbox :value="element.key" :label="element.title"/>
+                    <n-checkbox :value="element.key" :label="element.title" />
                     <div class="fixed-item">
                       <n-tooltip trigger="hover" placement="bottom">
                         <template #trigger>
-                          <n-icon size="18" :color="element.fixed === 'left' ? '#2080f0':undefined"
-                                  class="cursor-pointer" @click="fixedColumn(element,'left')">
-                            <VerticalRightOutlined/>
+                          <n-icon
+                            size="18"
+                            :color="element.fixed === 'left' ? '#2080f0' : undefined"
+                            class="cursor-pointer"
+                            @click="fixedColumn(element, 'left')"
+                          >
+                            <VerticalRightOutlined />
                           </n-icon>
                         </template>
                         <span>固定到左侧</span>
                       </n-tooltip>
-                      <n-divider vertical/>
+                      <n-divider vertical />
                       <n-tooltip trigger="hover" placement="bottom">
                         <template #trigger>
-                          <n-icon size="18" :color="element.fixed === 'right' ? '#2080f0':undefined"
-                                  class="cursor-pointer" @click="fixedColumn(element,'right')">
-                            <VerticalLeftOutlined/>
+                          <n-icon
+                            size="18"
+                            :color="element.fixed === 'right' ? '#2080f0' : undefined"
+                            class="cursor-pointer"
+                            @click="fixedColumn(element, 'right')"
+                          >
+                            <VerticalLeftOutlined />
                           </n-icon>
                         </template>
                         <span>固定到右侧</span>
@@ -63,221 +79,226 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, reactive, unref, toRaw, computed, toRefs, watchEffect } from "vue"
-import { useTableContext } from '../../hooks/useTableContext';
-import { ReloadOutlined, ColumnHeightOutlined, SettingOutlined, DragOutlined, VerticalRightOutlined, VerticalLeftOutlined } from '@vicons/antd'
-import Draggable from 'vuedraggable/src/vuedraggable'
-import { useDesignSetting } from "@/hooks/setting/useDesignSetting";
+  import { ref, defineComponent, reactive, unref, toRaw, computed, toRefs, watchEffect } from 'vue';
+  import { useTableContext } from '../../hooks/useTableContext';
+  import {
+    SettingOutlined,
+    DragOutlined,
+    VerticalRightOutlined,
+    VerticalLeftOutlined,
+  } from '@vicons/antd';
+  import Draggable from 'vuedraggable/src/vuedraggable';
+  import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
 
-interface Options {
-  title: string;
-  key: string;
-  fixed?: boolean | 'left' | 'right';
-}
-
-export default defineComponent({
-  name: 'ColumnSetting',
-  components: {
-    ReloadOutlined, ColumnHeightOutlined, SettingOutlined, DragOutlined, Draggable,
-    VerticalRightOutlined, VerticalLeftOutlined
-  },
-  setup(props, { emit }) {
-    const { getDarkTheme } = useDesignSetting()
-    const table = useTableContext();
-    const columnsList = ref<Options[]>([]);
-    const cacheColumnsList = ref<Options[]>([]);
-
-    const state = reactive({
-      selection: false,
-      checkAll: true,
-      checkList: [],
-      defaultCheckList: []
-    })
-
-    const getSelection = computed(() => {
-      return state.selection
-    })
-
-    watchEffect(() => {
-      const columns = table.getColumns();
-      if (columns.length) {
-        init();
-      }
-    });
-
-    //初始化
-    function init() {
-      const columns = getColumns();
-      const checkList = columns.map(item => item.key)
-      state.checkList = checkList
-      state.defaultCheckList = checkList
-      columnsList.value = columns
-      cacheColumnsList.value = columns
-    }
-
-    //切换
-    function onChange(checkList) {
-      if (state.selection) {
-        checkList.unshift('selection')
-      }
-      setColumns(checkList)
-    }
-
-    //设置
-    function setColumns(columns) {
-      table.setColumns(columns)
-    }
-
-    //获取
-    function getColumns() {
-      let newRet = []
-      table.getColumns().forEach(item => {
-        newRet.push({ ...item })
-      })
-      return newRet
-    }
-
-    //重置
-    function resetColumns() {
-      state.checkList = [...state.defaultCheckList]
-      state.checkAll = true;
-      let cacheColumnsKeys: any[] = table.getCacheColumns()
-      let newColumns = cacheColumnsKeys.map(item => {
-        return {
-          ...item,
-          fixed: undefined
-        }
-      })
-      setColumns(newColumns);
-      columnsList.value = newColumns
-    }
-
-    //全选
-    function onCheckAll(e) {
-      let checkList = table.getCacheColumns(true)
-      if (e) {
-        setColumns(checkList);
-        state.checkList = checkList
-      } else {
-        setColumns([]);
-        state.checkList = []
-      }
-    }
-
-    //拖拽排序
-    function draggableEnd() {
-      const newColumns = toRaw(unref(columnsList))
-      columnsList.value = newColumns
-      setColumns(newColumns);
-    }
-
-    //勾选列
-    function onSelection(e) {
-      let checkList = table.getCacheColumns()
-      if (e) {
-        checkList.unshift({ type: 'selection', key: 'selection' })
-        setColumns(checkList);
-      } else {
-        checkList.splice(0, 1)
-        setColumns(checkList);
-      }
-    }
-
-    //固定
-    function fixedColumn(item, fixed) {
-      console.log('item：', item)
-      if (!state.checkList.includes(item.key)) return;
-      let columns = getColumns();
-      const isFixed = item.fixed === fixed ? undefined : fixed
-      let index = columns.findIndex(res => res.key === item.key)
-      console.log('index：', index)
-      if (index !== -1) {
-        columns[index].fixed = isFixed;
-      }
-      table.setCacheColumnsField(item.key, { fixed: isFixed })
-      columnsList.value[index].fixed = isFixed
-      console.log('columnsList：', columnsList.value)
-      setColumns(columns);
-    }
-
-    return {
-      ...toRefs(state),
-      columnsList,
-      getDarkTheme,
-      onChange,
-      onCheckAll,
-      onSelection,
-      resetColumns,
-      fixedColumn,
-      draggableEnd,
-      getSelection
-    }
+  interface Options {
+    title: string;
+    key: string;
+    fixed?: boolean | 'left' | 'right';
   }
-})
+
+  export default defineComponent({
+    name: 'ColumnSetting',
+    components: {
+      SettingOutlined,
+      DragOutlined,
+      Draggable,
+      VerticalRightOutlined,
+      VerticalLeftOutlined,
+    },
+    setup() {
+      const { getDarkTheme } = useDesignSetting();
+      const table = useTableContext();
+      const columnsList = ref<Options[]>([]);
+      const cacheColumnsList = ref<Options[]>([]);
+
+      const state = reactive({
+        selection: false,
+        checkAll: true,
+        checkList: [],
+        defaultCheckList: [],
+      });
+
+      const getSelection = computed(() => {
+        return state.selection;
+      });
+
+      watchEffect(() => {
+        const columns = table.getColumns();
+        if (columns.length) {
+          init();
+        }
+      });
+
+      //初始化
+      function init() {
+        const columns: any[] = getColumns();
+        const checkList: any = columns.map((item) => item.key);
+        state.checkList = checkList;
+        state.defaultCheckList = checkList;
+        columnsList.value = columns;
+        cacheColumnsList.value = columns;
+      }
+
+      //切换
+      function onChange(checkList) {
+        if (state.selection) {
+          checkList.unshift('selection');
+        }
+        setColumns(checkList);
+      }
+
+      //设置
+      function setColumns(columns) {
+        table.setColumns(columns);
+      }
+
+      //获取
+      function getColumns() {
+        let newRet = [];
+        table.getColumns().forEach((item) => {
+          newRet.push({ ...item });
+        });
+        return newRet.filter((item) => item.key != 'action' && item.title != '操作');
+      }
+
+      //重置
+      function resetColumns() {
+        state.checkList = [...state.defaultCheckList];
+        state.checkAll = true;
+        let cacheColumnsKeys: any[] = table.getCacheColumns();
+        let newColumns = cacheColumnsKeys.map((item) => {
+          return {
+            ...item,
+            fixed: undefined,
+          };
+        });
+        setColumns(newColumns);
+        columnsList.value = newColumns;
+      }
+
+      //全选
+      function onCheckAll(e) {
+        let checkList = table.getCacheColumns(true);
+        if (e) {
+          setColumns(checkList);
+          state.checkList = checkList;
+        } else {
+          setColumns([]);
+          state.checkList = [];
+        }
+      }
+
+      //拖拽排序
+      function draggableEnd() {
+        const newColumns = toRaw(unref(columnsList));
+        columnsList.value = newColumns;
+        setColumns(newColumns);
+      }
+
+      //勾选列
+      function onSelection(e) {
+        let checkList = table.getCacheColumns();
+        if (e) {
+          checkList.unshift({ type: 'selection', key: 'selection' });
+          setColumns(checkList);
+        } else {
+          checkList.splice(0, 1);
+          setColumns(checkList);
+        }
+      }
+
+      //固定
+      function fixedColumn(item, fixed) {
+        if (!state.checkList.includes(item.key)) return;
+        let columns = getColumns();
+        const isFixed = item.fixed === fixed ? undefined : fixed;
+        let index = columns.findIndex((res) => res.key === item.key);
+        if (index !== -1) {
+          columns[index].fixed = isFixed;
+        }
+        table.setCacheColumnsField(item.key, { fixed: isFixed });
+        columnsList.value[index].fixed = isFixed;
+        setColumns(columns);
+      }
+
+      return {
+        ...toRefs(state),
+        columnsList,
+        getDarkTheme,
+        onChange,
+        onCheckAll,
+        onSelection,
+        resetColumns,
+        fixedColumn,
+        draggableEnd,
+        getSelection,
+      };
+    },
+  });
 </script>
 
 <style lang="less">
-.table-toolbar {
-  &-inner-popover-title {
-    padding: 3px 0;
-  }
+  .table-toolbar {
+    &-inner-popover-title {
+      padding: 3px 0;
+    }
 
-  &-right {
-    &-icon {
-      margin-left: 12px;
-      font-size: 16px;
-      color: var(--text-color);
-      cursor: pointer;
+    &-right {
+      &-icon {
+        margin-left: 12px;
+        font-size: 16px;
+        color: var(--text-color);
+        cursor: pointer;
 
-      :hover {
-        color: #1890ff;
+        :hover {
+          color: #1890ff;
+        }
       }
     }
   }
-}
 
-.table-toolbar-inner {
-  &-checkbox {
-    display: flex;
-    align-items: center;
-    padding: 10px 14px;
-
-    &:hover {
-      background: #e6f7ff;
-    }
-
-    .drag-icon {
-      display: inline-flex;
-      margin-right: 8px;
-      cursor: move;
-    }
-
-    .fixed-item {
+  .table-toolbar-inner {
+    &-checkbox {
       display: flex;
       align-items: center;
-      justify-content: flex-end;
-      margin-left: auto;
-    }
-
-    .ant-checkbox-wrapper {
-      flex: 1;
+      padding: 10px 14px;
 
       &:hover {
-        color: #1890ff !important;
+        background: #e6f7ff;
+      }
+
+      .drag-icon {
+        display: inline-flex;
+        margin-right: 8px;
+        cursor: move;
+      }
+
+      .fixed-item {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        margin-left: auto;
+      }
+
+      .ant-checkbox-wrapper {
+        flex: 1;
+
+        &:hover {
+          color: #1890ff !important;
+        }
+      }
+    }
+
+    &-checkbox-dark {
+      &:hover {
+        background: hsla(0, 0%, 100%, 0.08);
       }
     }
   }
 
-  &-checkbox-dark {
-    &:hover {
-      background: hsla(0, 0%, 100%, .08);
+  .toolbar-popover {
+    .n-popover__content {
+      padding: 0;
     }
   }
-}
-
-.toolbar-popover {
-  .n-popover__content {
-    padding: 0;
-  }
-}
 </style>

src/components/Table/src/const.ts

@@ -1,6 +1,6 @@
-import componentSetting from '@/settings/componentSetting'
+import componentSetting from '@/settings/componentSetting';
 
-const { table } = componentSetting
+const { table } = componentSetting;
 
 const { apiSetting, defaultPageSize, pageSizes } = table;
 
@@ -9,7 +9,3 @@ export const DEFAULTPAGESIZE = defaultPageSize;
 export const APISETTING = apiSetting;
 
 export const PAGESIZES = pageSizes;
-
-
-
-

src/components/Table/src/hooks/useColumns.ts

@@ -1,95 +1,163 @@
-import { ref, Ref, ComputedRef, unref, computed, watch, toRaw } from 'vue';
+import { ref, Ref, ComputedRef, unref, computed, watch, toRaw, h } from 'vue';
 import type { BasicColumn, BasicTableProps } from '../types/table';
 import { isEqual, cloneDeep } from 'lodash-es';
-import { isArray, isString } from '@/utils/is';
+import { isArray, isString, isBoolean, isFunction } from '@/utils/is';
+import { usePermission } from '@/hooks/web/usePermission';
+import { ActionItem } from '@/components/Table';
+import { renderEditCell } from '../components/editable';
+import { NTooltip, NIcon } from 'naive-ui';
+import { FormOutlined } from '@vicons/antd';
 
 export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
-    const columnsRef = ref(unref(propsRef).columns) as unknown as Ref<BasicColumn[]>;
-    let cacheColumns = unref(propsRef).columns;
+  const columnsRef = ref(unref(propsRef).columns) as unknown as Ref<BasicColumn[]>;
+  let cacheColumns = unref(propsRef).columns;
 
-    const getColumnsRef = computed(() => {
-        const columns = cloneDeep(unref(columnsRef));
-        return columns;
-    })
+  const getColumnsRef = computed(() => {
+    const columns = cloneDeep(unref(columnsRef));
 
-    const getPageColumns = computed(() => {
-        const pageColumns = unref(getColumnsRef);
-        const columns = cloneDeep(pageColumns);
-        return columns
-    })
+    handleActionColumn(propsRef, columns);
+    if (!columns) return [];
+    return columns;
+  });
 
-    watch(
-        () => unref(propsRef).columns,
-        (columns) => {
-            columnsRef.value = columns;
-            cacheColumns = columns;
-        }
-    );
+  const { hasPermission } = usePermission();
 
+  function isIfShow(action: ActionItem): boolean {
+    const ifShow = action.ifShow;
 
-    //设置
-    function setColumns(columnList: string[]) {
-        const columns: any[] = cloneDeep(columnList);
-        if (!isArray(columns)) return;
+    let isIfShow = true;
 
-        if (!columns.length) {
-            columnsRef.value = [];
-            return;
-        }
-        const cacheKeys = cacheColumns.map((item) => item.key);
-        //针对拖拽排序
-        if (!isString(columns[0])) {
-            columnsRef.value = columns;
-        } else {
-            const newColumns: any[] = []
-            cacheColumns.forEach(item => {
-                if (columnList.includes(item.key)) {
-                    newColumns.push({ ...item })
-                }
-            })
-            if (!isEqual(cacheKeys, columns)) {
-                newColumns.sort((prev, next) => {
-                    return (
-                        cacheKeys.indexOf(prev.key) - cacheKeys.indexOf(next.key)
-                    );
-                });
-            }
-            columnsRef.value = newColumns
-        }
+    if (isBoolean(ifShow)) {
+      isIfShow = ifShow;
     }
-
-    //获取
-    function getColumns() {
-        let columns = toRaw(unref(getColumnsRef));
-        return columns.map(item => {
-            return { ...item, title: item.title, key: item.key, fixed: item.fixed || undefined }
-        })
+    if (isFunction(ifShow)) {
+      isIfShow = ifShow(action);
     }
+    return isIfShow;
+  }
 
-    //获取原始
-    function getCacheColumns(isKey?: boolean): any[] {
-        return isKey ? cacheColumns.map(item => item.key) : cacheColumns;
-    }
+  const renderTooltip = (trigger, content) => {
+    return h(NTooltip, null, {
+      trigger: () => trigger,
+      default: () => content,
+    });
+  };
 
-    //更新原始数据单个字段
-    function setCacheColumnsField(dataIndex: string | undefined, value: Partial<BasicColumn>) {
-        if (!dataIndex || !value) {
-            return;
+  const getPageColumns = computed(() => {
+    const pageColumns = unref(getColumnsRef);
+    const columns = cloneDeep(pageColumns);
+    return columns
+      .filter((column) => {
+        // @ts-ignore
+        return hasPermission(column.auth) && isIfShow(column);
+      })
+      .map((column) => {
+        const { edit, editRow } = column;
+        if (edit) {
+          column.render = renderEditCell(column);
+          if (edit) {
+            const title: any = column.title;
+            column.title = () => {
+              return renderTooltip(
+                h('span', {}, [
+                  h('span', { style: { 'margin-right': '5px' } }, title),
+                  h(
+                    NIcon,
+                    {
+                      size: 14,
+                    },
+                    {
+                      default: () => h(FormOutlined),
+                    }
+                  ),
+                ]),
+                '该列可编辑'
+              );
+            };
+          }
         }
-        cacheColumns.forEach((item) => {
-            if (item.key === dataIndex) {
-                Object.assign(item, value);
-                return;
-            }
+        return column;
+      });
+  });
+
+  watch(
+    () => unref(propsRef).columns,
+    (columns) => {
+      columnsRef.value = columns;
+      cacheColumns = columns;
+    }
+  );
+
+  function handleActionColumn(propsRef: ComputedRef<BasicTableProps>, columns: BasicColumn[]) {
+    const { actionColumn } = unref(propsRef);
+    if (!actionColumn) return;
+    // @ts-ignore
+    columns.push({
+      ...actionColumn,
+    });
+  }
+
+  //设置
+  function setColumns(columnList: string[]) {
+    const columns: any[] = cloneDeep(columnList);
+    if (!isArray(columns)) return;
+
+    if (!columns.length) {
+      columnsRef.value = [];
+      return;
+    }
+    const cacheKeys = cacheColumns.map((item) => item.key);
+    //针对拖拽排序
+    if (!isString(columns[0])) {
+      columnsRef.value = columns;
+    } else {
+      const newColumns: any[] = [];
+      cacheColumns.forEach((item) => {
+        if (columnList.includes(item.key)) {
+          newColumns.push({ ...item });
+        }
+      });
+      if (!isEqual(cacheKeys, columns)) {
+        newColumns.sort((prev, next) => {
+          return cacheKeys.indexOf(prev.key) - cacheKeys.indexOf(next.key);
         });
+      }
+      columnsRef.value = newColumns;
     }
+  }
 
-    return {
-        getColumnsRef,
-        getCacheColumns,
-        setCacheColumnsField,
-        setColumns,
-        getColumns,
-        getPageColumns
-    };
+  //获取
+  function getColumns() {
+    const columns = toRaw(unref(getColumnsRef));
+    return columns.map((item) => {
+      return { ...item, title: item.title, key: item.key, fixed: item.fixed || undefined };
+    });
+  }
+
+  //获取原始
+  function getCacheColumns(isKey?: boolean): any[] {
+    return isKey ? cacheColumns.map((item) => item.key) : cacheColumns;
+  }
+
+  //更新原始数据单个字段
+  function setCacheColumnsField(dataIndex: string | undefined, value: Partial<BasicColumn>) {
+    if (!dataIndex || !value) {
+      return;
+    }
+    cacheColumns.forEach((item) => {
+      if (item.key === dataIndex) {
+        Object.assign(item, value);
+        return;
+      }
+    });
+  }
+
+  return {
+    getColumnsRef,
+    getCacheColumns,
+    setCacheColumnsField,
+    setColumns,
+    getColumns,
+    getPageColumns,
+  };
 }

src/components/Table/src/hooks/useDataSource.ts

@@ -5,137 +5,134 @@ import { isBoolean } from '@/utils/is';
 import { APISETTING } from '../const';
 
 export function useDataSource(
-    propsRef: ComputedRef<BasicTableProps>,
-    {
-        getPaginationInfo,
-        setPagination,
-        setLoading,
-        tableData
-    },
-    emit
+  propsRef: ComputedRef<BasicTableProps>,
+  { getPaginationInfo, setPagination, setLoading, tableData },
+  emit
 ) {
-    const dataSourceRef = ref([]);
+  const dataSourceRef = ref([]);
 
-    watchEffect(() => {
-        tableData.value = unref(dataSourceRef);
-    });
+  watchEffect(() => {
+    tableData.value = unref(dataSourceRef);
+  });
 
-    watch(
-        () => unref(propsRef).dataSource,
-        () => {
-            const { dataSource }: any = unref(propsRef);
-            dataSource && (dataSourceRef.value = dataSource);
-        },
-        {
-            immediate: true,
-        }
-    );
+  watch(
+    () => unref(propsRef).dataSource,
+    () => {
+      const { dataSource }: any = unref(propsRef);
+      dataSource && (dataSourceRef.value = dataSource);
+    },
+    {
+      immediate: true,
+    }
+  );
 
-    const getRowKey = computed(() => {
-        const { rowKey }: any = unref(propsRef);
-        return rowKey ? rowKey : () => {
-            return 'key'
+  const getRowKey = computed(() => {
+    const { rowKey }: any = unref(propsRef);
+    return rowKey
+      ? rowKey
+      : () => {
+          return 'key';
         };
-    });
+  });
 
-    const getDataSourceRef = computed(() => {
-        const dataSource = unref(dataSourceRef);
-        if (!dataSource || dataSource.length === 0) {
-            return unref(dataSourceRef);
-        }
-        return unref(dataSourceRef);
-    });
-
-    async function fetch(opt?) {
-        try {
-            setLoading(true);
-            const { request, pagination }: any = unref(propsRef);
-
-            //组装分页信息
-            const pageField = APISETTING.pageField
-            const sizeField = APISETTING.sizeField
-            const totalField = APISETTING.totalField
-            const listField = APISETTING.listField
-
-            let pageParams = {};
-            const { page = 1, pageSize = 10 } = unref(getPaginationInfo) as PaginationProps;
-
-            if ((isBoolean(pagination) && !pagination) || isBoolean(getPaginationInfo)) {
-                pageParams = {};
-            } else {
-                pageParams[pageField] = (opt && opt[pageField]) || page;
-                pageParams[sizeField] = pageSize;
-            }
-
-            let params = {
-                ...pageParams,
-            }
-            const res = await request(params);
-
-            const resultTotal = res[totalField] || 0
-            const currentPage = res[pageField]
-
-            // 如果数据异常，需获取正确的页码再次执行
-            if (resultTotal) {
-                const currentTotalPage = Math.ceil(resultTotal / pageSize);
-                if (page > currentTotalPage) {
-                    setPagination({
-                        [pageField]: currentTotalPage,
-                    });
-                    fetch(opt);
-                }
-            }
-            let resultInfo = res[listField] ? res[listField] : []
-            dataSourceRef.value = resultInfo;
-            setPagination({
-                [pageField]: currentPage,
-                [totalField]: resultTotal,
-            });
-            if (opt && opt[pageField]) {
-                setPagination({
-                    [pageField]: opt[pageField] || 1,
-                });
-            }
-            emit('fetch-success', {
-                items: unref(resultInfo),
-                resultTotal
-            });
-        } catch (error) {
-            console.error(error)
-            emit('fetch-error', error);
-            dataSourceRef.value = [];
-            // setPagination({
-            //   pageCount: 0,
-            // });
-        } finally {
-            setLoading(false);
+  const getDataSourceRef = computed(() => {
+    const dataSource = unref(dataSourceRef);
+    if (!dataSource || dataSource.length === 0) {
+      return unref(dataSourceRef);
+    }
+    return unref(dataSourceRef);
+  });
+
+  async function fetch(opt?) {
+    try {
+      setLoading(true);
+      const { request, pagination }: any = unref(propsRef);
+
+      //组装分页信息
+      const pageField = APISETTING.pageField;
+      const sizeField = APISETTING.sizeField;
+      const totalField = APISETTING.totalField;
+      const listField = APISETTING.listField;
+
+      let pageParams = {};
+      const { page = 1, pageSize = 10 } = unref(getPaginationInfo) as PaginationProps;
+
+      if ((isBoolean(pagination) && !pagination) || isBoolean(getPaginationInfo)) {
+        pageParams = {};
+      } else {
+        pageParams[pageField] = (opt && opt[pageField]) || page;
+        pageParams[sizeField] = pageSize;
+      }
+
+      const params = {
+        ...pageParams,
+      };
+      const res = await request(params);
+
+      const resultTotal = res[totalField] || 0;
+      const currentPage = res[pageField];
+
+      // 如果数据异常，需获取正确的页码再次执行
+      if (resultTotal) {
+        const currentTotalPage = Math.ceil(resultTotal / pageSize);
+        if (page > currentTotalPage) {
+          setPagination({
+            [pageField]: currentTotalPage,
+          });
+          fetch(opt);
         }
+      }
+      const resultInfo = res[listField] ? res[listField] : [];
+      dataSourceRef.value = resultInfo;
+      setPagination({
+        [pageField]: currentPage,
+        [totalField]: resultTotal,
+      });
+      if (opt && opt[pageField]) {
+        setPagination({
+          [pageField]: opt[pageField] || 1,
+        });
+      }
+      emit('fetch-success', {
+        items: unref(resultInfo),
+        resultTotal,
+      });
+    } catch (error) {
+      console.error(error);
+      emit('fetch-error', error);
+      dataSourceRef.value = [];
+      // setPagination({
+      //   pageCount: 0,
+      // });
+    } finally {
+      setLoading(false);
     }
+  }
 
-    onMounted(() => {
-        setTimeout(() => {
-            fetch();
-        }, 16)
-    });
+  onMounted(() => {
+    setTimeout(() => {
+      fetch();
+    }, 16);
+  });
 
-    function setTableData(values) {
-        dataSourceRef.value = values;
-    }
+  function setTableData(values) {
+    dataSourceRef.value = values;
+  }
 
-    function getDataSource(): any[] {
-        return getDataSourceRef.value;
-    }
+  function getDataSource(): any[] {
+    return getDataSourceRef.value;
+  }
 
-    async function reload(opt?) {
-        await fetch(opt);
-    }
+  async function reload(opt?) {
+    await fetch(opt);
+  }
 
-    return {
-        fetch,
-        getRowKey,
-        getDataSourceRef,
-        getDataSource,
-        setTableData,
-        reload
-    }
+  return {
+    fetch,
+    getRowKey,
+    getDataSourceRef,
+    getDataSource,
+    setTableData,
+    reload,
+  };
 }

src/components/Table/src/hooks/useLoading.ts

@@ -2,20 +2,20 @@ import { ref, ComputedRef, unref, computed, watch } from 'vue';
 import type { BasicTableProps } from '../types/table';
 
 export function useLoading(props: ComputedRef<BasicTableProps>) {
-    const loadingRef = ref(unref(props).loading);
+  const loadingRef = ref(unref(props).loading);
 
-    watch(
-        () => unref(props).loading,
-        (loading) => {
-            loadingRef.value = loading;
-        }
-    );
-
-    const getLoading = computed(() => unref(loadingRef));
-
-    function setLoading(loading: boolean) {
-        loadingRef.value = loading;
+  watch(
+    () => unref(props).loading,
+    (loading) => {
+      loadingRef.value = loading;
     }
+  );
 
-    return { getLoading, setLoading };
+  const getLoading = computed(() => unref(loadingRef));
+
+  function setLoading(loading: boolean) {
+    loadingRef.value = loading;
+  }
+
+  return { getLoading, setLoading };
 }

src/components/Table/src/hooks/usePagination.ts

@@ -6,43 +6,43 @@ import { isBoolean } from '@/utils/is';
 import { DEFAULTPAGESIZE, PAGESIZES } from '../const';
 
 export function usePagination(refProps: ComputedRef<BasicTableProps>) {
-    const configRef = ref<PaginationProps>({});
-    const show = ref(true);
+  const configRef = ref<PaginationProps>({});
+  const show = ref(true);
 
-    const getPaginationInfo = computed((): PaginationProps | boolean => {
-        const { pagination } = unref(refProps);
-        if (!unref(show) || (isBoolean(pagination) && !pagination)) {
-            return false;
-        }
-        return {
-            pageSize: DEFAULTPAGESIZE,
-            pageSizes: PAGESIZES,
-            showSizePicker: true,
-            showQuickJumper: true,
-            ...(isBoolean(pagination) ? {} : pagination),
-            ...unref(configRef),
-        };
-    });
-
-    function setPagination(info: Partial<PaginationProps>) {
-        const paginationInfo = unref(getPaginationInfo);
-        configRef.value = {
-            ...(!isBoolean(paginationInfo) ? paginationInfo : {}),
-            ...info,
-        };
+  const getPaginationInfo = computed((): PaginationProps | boolean => {
+    const { pagination } = unref(refProps);
+    if (!unref(show) || (isBoolean(pagination) && !pagination)) {
+      return false;
     }
+    return {
+      pageSize: DEFAULTPAGESIZE,
+      pageSizes: PAGESIZES,
+      showSizePicker: true,
+      showQuickJumper: true,
+      ...(isBoolean(pagination) ? {} : pagination),
+      ...unref(configRef),
+    };
+  });
 
-    function getPagination() {
-        return unref(getPaginationInfo);
-    }
+  function setPagination(info: Partial<PaginationProps>) {
+    const paginationInfo = unref(getPaginationInfo);
+    configRef.value = {
+      ...(!isBoolean(paginationInfo) ? paginationInfo : {}),
+      ...info,
+    };
+  }
 
-    function getShowPagination() {
-        return unref(show);
-    }
+  function getPagination() {
+    return unref(getPaginationInfo);
+  }
 
-    async function setShowPagination(flag: boolean) {
-        show.value = flag;
-    }
+  function getShowPagination() {
+    return unref(show);
+  }
 
-    return { getPagination, getPaginationInfo, setShowPagination, getShowPagination, setPagination };
+  async function setShowPagination(flag: boolean) {
+    show.value = flag;
+  }
+
+  return { getPagination, getPaginationInfo, setShowPagination, getShowPagination, setPagination };
 }

src/components/Table/src/hooks/useTableContext.ts

@@ -5,18 +5,18 @@ import { provide, inject, ComputedRef } from 'vue';
 const key = Symbol('s-table');
 
 type Instance = TableActionType & {
-    wrapRef: Ref<Nullable<HTMLElement>>;
-    getBindValues: ComputedRef<Recordable>;
+  wrapRef: Ref<Nullable<HTMLElement>>;
+  getBindValues: ComputedRef<Recordable>;
 };
 
 type RetInstance = Omit<Instance, 'getBindValues'> & {
-    getBindValues: ComputedRef<BasicTableProps>;
+  getBindValues: ComputedRef<BasicTableProps>;
 };
 
 export function createTableContext(instance: Instance) {
-    provide(key, instance);
+  provide(key, instance);
 }
 
 export function useTableContext(): RetInstance {
-    return inject(key) as RetInstance;
+  return inject(key) as RetInstance;
 }

src/components/Table/src/props.ts

@@ -1,45 +1,51 @@
-import type { PropType } from 'vue'
-import { BasicColumn } from './types/table'
+import type { PropType } from 'vue';
+import { propTypes } from '@/utils/propTypes';
+import { BasicColumn } from './types/table';
 
 export const basicProps = {
-    title: {
-        type: String,
-        default: null,
-    },
-    titleTooltip: {
-        type: String,
-        default: null,
-    },
-    size: {
-        type: String,
-        default: 'medium',
-    },
-    tableData: {
-        type: [Object],
-        default: () => {
-        },
-    },
-    columns: {
-        type: [Array] as PropType<BasicColumn[]>,
-        default: () => [],
-        required: true,
-    },
-    request: {
-        type: Function as PropType<(...arg: any[]) => Promise<any>>,
-        default: null,
-        required: true
-    },
-    rowKey: {
-        type: [String, Function] as PropType<string | ((record) => string)>,
-        default: undefined,
-    },
-    pagination: {
-        type: [Object, Boolean],
-        default: () => {
-        }
-    },
-    showPagination: {
-        type: [String, Boolean],
-        default: 'auto'
-    }
-}
+  title: {
+    type: String,
+    default: null,
+  },
+  titleTooltip: {
+    type: String,
+    default: null,
+  },
+  size: {
+    type: String,
+    default: 'medium',
+  },
+  tableData: {
+    type: [Object],
+    default: () => [],
+  },
+  columns: {
+    type: [Array] as PropType<BasicColumn[]>,
+    default: () => [],
+    required: true,
+  },
+  request: {
+    type: Function as PropType<(...arg: any[]) => Promise<any>>,
+    default: null,
+    required: true,
+  },
+  rowKey: {
+    type: [String, Function] as PropType<string | ((record) => string)>,
+    default: undefined,
+  },
+  pagination: {
+    type: [Object, Boolean],
+    default: () => {},
+  },
+  //废弃
+  showPagination: {
+    type: [String, Boolean],
+    default: 'auto',
+  },
+  actionColumn: {
+    type: Object as PropType<BasicColumn>,
+    default: null,
+  },
+  canResize: propTypes.bool.def(true),
+  resizeHeightOffset: propTypes.number.def(0),
+};

src/components/Table/src/types/componentType.ts

@@ -0,0 +1,8 @@
+export type ComponentType =
+  | 'NInput'
+  | 'NInputNumber'
+  | 'NSelect'
+  | 'NCheckbox'
+  | 'NSwitch'
+  | 'NDatePicker'
+  | 'NTimePicker';

src/components/Table/src/types/pagination.ts

@@ -1,11 +1,8 @@
-import Pagination from 'naive-ui/lib/pagination';
-import { VNodeChild } from 'vue';
-
 export interface PaginationProps {
-    page?: number;
-    pageCount?: number,
-    pageSize?: number,
-    pageSizes?: number[],
-    showSizePicker?: boolean,
-    showQuickJumper?: boolean,
+  page?: number;
+  pageCount?: number;
+  pageSize?: number;
+  pageSizes?: number[];
+  showSizePicker?: boolean;
+  showQuickJumper?: boolean;
 }

src/components/Table/src/types/table.ts

@@ -1,22 +1,35 @@
-import type {
-    TableBaseColumn,
-} from 'naive-ui/lib/data-table/src/interface';
-
+import type { TableBaseColumn } from 'naive-ui/lib/data-table/src/interface';
+import { ComponentType } from './componentType';
 export interface BasicColumn extends TableBaseColumn {
-
+  //编辑表格
+  edit?: boolean;
+  editRow?: boolean;
+  editable?: boolean;
+  editComponent?: ComponentType;
+  editComponentProps?: Recordable;
+  editRule?: boolean | ((text: string, record: Recordable) => Promise<string>);
+  editValueMap?: (value: any) => string;
+  onEditRow?: () => void;
+  // 权限编码控制是否显示
+  auth?: RoleEnum | RoleEnum[] | string | string[];
+  // 业务控制是否显示
+  ifShow?: boolean | ((column: BasicColumn) => boolean);
 }
 
 export interface TableActionType {
-    reload: (opt) => Promise<void>;
-    emit?: any;
-    getColumns: (opt) => BasicColumn[];
-    setColumns: (columns: BasicColumn[] | string[]) => void;
+  reload: (opt) => Promise<void>;
+  emit?: any;
+  getColumns: (opt?) => BasicColumn[];
+  setColumns: (columns: BasicColumn[] | string[]) => void;
 }
 
-export interface BasicTableProps<T = any> {
-    title?: string,
-    dataSource: Function,
-    columns: any[],
-    pagination: object,
-    showPagination: boolean
+export interface BasicTableProps {
+  title?: string;
+  dataSource: Function;
+  columns: any[];
+  pagination: object;
+  showPagination: boolean;
+  actionColumn: any[];
+  canResize: boolean;
+  resizeHeightOffset: number;
 }

src/components/Table/src/types/tableAction.ts

@@ -0,0 +1,26 @@
+// @ts-ignore
+import { NButton } from 'naive-ui';
+import { RoleEnum } from '@/enums/roleEnum';
+// @ts-ignore
+export interface ActionItem extends NButton.props {
+  onClick?: Fn;
+  label?: string;
+  color?: 'success' | 'error' | 'warning';
+  icon?: string;
+  popConfirm?: PopConfirm;
+  disabled?: boolean;
+  divider?: boolean;
+  // 权限编码控制是否显示
+  auth?: RoleEnum | RoleEnum[] | string | string[];
+  // 业务控制是否显示
+  ifShow?: boolean | ((action: ActionItem) => boolean);
+}
+
+export interface PopConfirm {
+  title: string;
+  okText?: string;
+  cancelText?: string;
+  confirm: Fn;
+  cancel?: Fn;
+  icon?: string;
+}

src/components/Upload/src/BasicUpload.vue

@@ -2,42 +2,48 @@
   <div class="w-full">
     <div class="upload">
       <div class="upload-card">
-
         <!--图片列表-->
-        <div class="upload-card-item" :style="getCSSProperties" v-for="(item,index) in imgList">
+        <div
+          class="upload-card-item"
+          :style="getCSSProperties"
+          v-for="(item, index) in imgList"
+          :key="`img_${index}`"
+        >
           <div class="upload-card-item-info">
             <div class="img-box">
-              <img :src="item"/>
+              <img :src="item" />
             </div>
             <div class="img-box-actions">
               <n-icon size="18" class="action-icon mx-2" @click="preview(item)">
-                <EyeOutlined/>
+                <EyeOutlined />
               </n-icon>
               <n-icon size="18" class="action-icon mx-2" @click="remove(index)">
-                <DeleteOutlined/>
+                <DeleteOutlined />
               </n-icon>
             </div>
           </div>
         </div>
 
         <!--上传图片-->
-        <div class="upload-card-item upload-card-item-select-picture" :style="getCSSProperties"
-             v-if="imgList.length < maxNumber">
+        <div
+          class="upload-card-item upload-card-item-select-picture"
+          :style="getCSSProperties"
+          v-if="imgList.length < maxNumber"
+        >
           <n-upload
-              v-bind="$props"
-              :file-list-style="{ display:'none'}"
-              @before-upload="beforeUpload"
-              @finish="finish"
+            v-bind="$props"
+            :file-list-style="{ display: 'none' }"
+            @before-upload="beforeUpload"
+            @finish="finish"
           >
             <div class="flex justify-center flex-col">
               <n-icon size="18" class="m-auto">
-                <PlusOutlined/>
+                <PlusOutlined />
               </n-icon>
               <span class="upload-title">上传图片</span>
             </div>
           </n-upload>
         </div>
-
       </div>
     </div>
 
@@ -47,267 +53,254 @@
         {{ helpText }}
       </n-alert>
     </n-space>
-
   </div>
 
   <!--预览图片-->
   <n-modal
-      v-model:show="showModal"
-      preset="card"
-      title="预览"
-      :bordered="false"
-      :style="{width: '520px'}"
+    v-model:show="showModal"
+    preset="card"
+    title="预览"
+    :bordered="false"
+    :style="{ width: '520px' }"
   >
-    <img :src="previewUrl"/>
+    <img :src="previewUrl" />
   </n-modal>
 </template>
 
 <script lang="ts">
-import { defineComponent, toRefs, reactive, computed } from "vue";
-import { EyeOutlined, DeleteOutlined, PlusOutlined } from "@vicons/antd";
-import { NUpload } from 'naive-ui'
-import { basicProps } from "./props";
-import { useMessage, useDialog } from 'naive-ui'
-import { ResultEnum } from '@/enums/httpEnum'
-import componentSetting from '@/settings/componentSetting'
-import { useGlobSetting } from '@/hooks/setting'
-import { isString } from '@/utils/is'
+  import { defineComponent, toRefs, reactive, computed } from 'vue';
+  import { EyeOutlined, DeleteOutlined, PlusOutlined } from '@vicons/antd';
+  import { NUpload } from 'naive-ui';
+  import { basicProps } from './props';
+  import { useMessage, useDialog } from 'naive-ui';
+  import { ResultEnum } from '@/enums/httpEnum';
+  import componentSetting from '@/settings/componentSetting';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { isString } from '@/utils/is';
 
-const globSetting = useGlobSetting()
+  const globSetting = useGlobSetting();
 
-export default defineComponent({
-  name: 'BasicUpload',
+  export default defineComponent({
+    name: 'BasicUpload',
 
-  components: { EyeOutlined, DeleteOutlined, PlusOutlined },
-  props: {
-    ...NUpload.props, // 这里继承原 UI 组件的 props
-    ...basicProps
-  },
-  emits: ['uploadChange', 'delete'],
-  setup(props, { emit }) {
-    const { value, width, height } = props
+    components: { EyeOutlined, DeleteOutlined, PlusOutlined },
+    props: {
+      ...NUpload.props, // 这里继承原 UI 组件的 props
+      ...basicProps,
+    },
+    emits: ['uploadChange', 'delete'],
+    setup(props, { emit }) {
+      const getCSSProperties = computed(() => {
+        return {
+          width: `${props.width}px`,
+          height: `${props.height}px`,
+        };
+      });
 
-    const getCSSProperties = computed(() => {
-      return {
-        width: `${ width }px`,
-        height: `${ height }px`,
+      const message = useMessage();
+      const dialog = useDialog();
+
+      const state = reactive({
+        showModal: false,
+        previewUrl: '',
+        originalImgList: [],
+        imgList: [],
+      });
+
+      //赋值默认图片显示
+      if (props.value.length) {
+        state.imgList = props.value.map((item) => {
+          return getImgUrl(item);
+        });
       }
-    })
 
-    const message = useMessage()
-    const dialog = useDialog()
+      //预览
+      function preview(url: string) {
+        state.showModal = true;
+        state.previewUrl = url;
+      }
 
-    const state = reactive({
-      showModal: false,
-      previewUrl: '',
-      originalImgList: [],
-      imgList: []
-    })
+      //删除
+      function remove(index: number) {
+        dialog.info({
+          title: '提示',
+          content: '你确定要删除吗？',
+          positiveText: '确定',
+          negativeText: '取消',
+          onPositiveClick: () => {
+            state.imgList.splice(index, 1);
+            state.originalImgList.splice(index, 1);
+            emit('uploadChange', state.originalImgList);
+            emit('delete', state.originalImgList);
+          },
+          onNegativeClick: () => {},
+        });
+      }
 
-    //赋值默认图片显示
-    if (value.length) {
-      state.imgList = value.map(item => {
-        return getImgUrl(item)
-      })
-    }
+      //组装完整图片地址
+      function getImgUrl(url: string): string {
+        const { imgUrl } = globSetting;
+        return /(^http|https:\/\/)/g.test(url) ? url : `${imgUrl}${url}`;
+      }
 
-    //预览
-    function preview(url: string) {
-      state.showModal = true
-      state.previewUrl = url
-    }
+      function checkFileType(fileType: string) {
+        return componentSetting.upload.fileType.includes(fileType);
+      }
 
-    //删除
-    function remove(index: number) {
-      dialog.info({
-        title: '提示',
-        content: '你确定要删除吗？',
-        positiveText: '确定',
-        negativeText: '取消',
-        onPositiveClick: () => {
-          state.imgList.splice(index, 1)
-          state.originalImgList.splice(index, 1)
-          emit('uploadChange', state.originalImgList)
-          emit('delete', state.originalImgList)
-        },
-        onNegativeClick: () => {
+      //上传之前
+      function beforeUpload({ file }) {
+        const fileInfo = file.file;
+        const { maxSize, accept } = props;
+        const acceptRef = (isString(accept) && accept.split(',')) || [];
 
+        // 设置最大值，则判断
+        if (maxSize && fileInfo.size / 1024 / 1024 >= maxSize) {
+          message.error(`上传文件最大值不能超过${maxSize}M`);
+          return false;
         }
-      })
-    }
 
-    //组装完整图片地址
-    function getImgUrl(url: string) {
-      const { imgUrl } = globSetting
-      return (/(^http|https:\/\/)/g).test(url) ? url : `${ imgUrl }${ url }`
-    }
+        // 设置类型,则判断
+        const fileType = componentSetting.upload.fileType;
+        if (acceptRef.length > 0 && !checkFileType(fileInfo.type)) {
+          message.error(`只能上传文件类型为${fileType.join(',')}`);
+          return false;
+        }
 
-
-    function checkFileType(fileType: string) {
-      return componentSetting.upload.fileType.includes(fileType)
-    }
-
-    //上传之前
-    function beforeUpload({ file, fileList }) {
-      const fileInfo = file.file;
-      const { maxSize, accept, maxNumber } = props;
-      const acceptRef = (isString(accept) && accept.split(',')) || [];
-
-      // 设置最大值，则判断
-      if (maxSize && fileInfo.size / 1024 / 1024 >= maxSize) {
-        message.error(`上传文件最大值不能超过${ maxSize }M`);
-        return false;
+        return true;
       }
 
-      // 设置类型,则判断
-      const fileType = componentSetting.upload.fileType
-      if (acceptRef.length > 0 && !checkFileType(fileInfo.type)) {
-        message.error(`只能上传文件类型为${ fileType.join(',') }`);
-        return false;
+      //上传结束
+      function finish({ event: Event }) {
+        const res = eval('(' + Event.target.response + ')');
+        const infoField = componentSetting.upload.apiSetting.infoField;
+        const { code } = res;
+        const message = res.msg || res.message || '上传失败';
+        const result = res[infoField];
+        //成功
+        if (code === ResultEnum.SUCCESS) {
+          let imgUrl = getImgUrl(result.photo);
+          state.imgList.push(imgUrl);
+          state.originalImgList.push(result.photo);
+          emit('uploadChange', state.originalImgList);
+        } else message.error(message);
       }
 
-      return true
-    }
-
-    //上传结束
-    function finish({ event: Event }) {
-      const res = eval('(' + Event.target.response + ')');
-      const infoField = componentSetting.upload.apiSetting.infoField
-      const { code } = res
-      const message = (res.msg || res.message) || '上传失败'
-      const result = res[infoField]
-      //成功
-      if (code === ResultEnum.SUCCESS) {
-        let imgUrl: string = getImgUrl(result.photo)
-        state.imgList.push(imgUrl)
-        state.originalImgList.push(result.photo)
-        emit('uploadChange', state.originalImgList)
-      } else message.error(message)
-    }
-
-    return {
-      ...toRefs(state),
-      finish,
-      preview,
-      remove,
-      beforeUpload,
-      getCSSProperties
-    }
-  }
-})
+      return {
+        ...toRefs(state),
+        finish,
+        preview,
+        remove,
+        beforeUpload,
+        getCSSProperties,
+      };
+    },
+  });
 </script>
 
 <style lang="less">
+  .upload {
+    width: 100%;
+    overflow: hidden;
 
-.upload {
-  width: 100%;
-  overflow: hidden;
-
-  &-card {
-    width: auto;
-    height: auto;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-
-    &-item {
-      margin: 0 8px 8px 0;
-      position: relative;
-      padding: 8px;
-      border: 1px solid #d9d9d9;
-      border-radius: 2px;
+    &-card {
+      width: auto;
+      height: auto;
       display: flex;
-      justify-content: center;
-      flex-direction: column;
+      flex-wrap: wrap;
       align-items: center;
 
-      &:hover {
-        background: 0 0;
-
-        &-info::before {
-          opacity: 1
-        }
-      }
-
-      &-info {
+      &-item {
+        margin: 0 8px 8px 0;
         position: relative;
-        height: 100%;
-        padding: 0;
-        overflow: hidden;
+        padding: 8px;
+        border: 1px solid #d9d9d9;
+        border-radius: 2px;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
 
         &:hover {
-          .img-box-actions {
+          background: 0 0;
+          .upload-card-item-info::before {
+            opacity: 1;
+          }
+
+          &-info::before {
             opacity: 1;
           }
         }
 
-        &::before {
-          position: absolute;
-          z-index: 1;
-          width: 100%;
-          height: 100%;
-          background-color: rgba(0, 0, 0, .5);
-          opacity: 0;
-          transition: all .3s;
-          content: ' ';
-        }
-
-        .img-box {
+        &-info {
           position: relative;
-          //padding: 8px;
-          //border: 1px solid #d9d9d9;
-          border-radius: 2px;
-        }
-
-        .img-box-actions {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          z-index: 10;
-          white-space: nowrap;
-          transform: translate(-50%, -50%);
-          opacity: 0;
-          transition: all .3s;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
+          height: 100%;
+          padding: 0;
+          overflow: hidden;
 
           &:hover {
-            background: 0 0;
+            .img-box-actions {
+              opacity: 1;
+            }
           }
 
-          .action-icon {
-            color: rgba(255, 255, 255, .85);
+          &::before {
+            position: absolute;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            opacity: 0;
+            transition: all 0.3s;
+            content: ' ';
+          }
+
+          .img-box {
+            position: relative;
+            //padding: 8px;
+            //border: 1px solid #d9d9d9;
+            border-radius: 2px;
+          }
+
+          .img-box-actions {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            z-index: 10;
+            white-space: nowrap;
+            transform: translate(-50%, -50%);
+            opacity: 0;
+            transition: all 0.3s;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
 
             &:hover {
-              cursor: pointer;
-              color: #fff
+              background: 0 0;
+            }
+
+            .action-icon {
+              color: rgba(255, 255, 255, 0.85);
+
+              &:hover {
+                cursor: pointer;
+                color: #fff;
+              }
             }
           }
         }
       }
 
-    }
-
-    &-item-select-picture {
-      border: 1px dashed #d9d9d9;
-      border-radius: 2px;
-      cursor: pointer;
-      background: #fafafa;
-      color: #666;
-
-      .upload-title {
+      &-item-select-picture {
+        border: 1px dashed #d9d9d9;
+        border-radius: 2px;
+        cursor: pointer;
+        background: #fafafa;
         color: #666;
-      }
-    }
 
-    &-item:hover {
-      background: 0 0;
-
-      .upload-card-item-info::before {
-        opacity: 1
+        .upload-title {
+          color: #666;
+        }
       }
     }
   }
-}
 </style>

src/components/Upload/src/props.ts

@@ -1,34 +1,34 @@
-import type { PropType } from 'vue'
-import { NUpload } from 'naive-ui'
+import type { PropType } from 'vue';
+import { NUpload } from 'naive-ui';
 
 export const basicProps = {
-    ...NUpload.props,
-    accept: {
-        type: String,
-        default: '.jpg,.png,.jpeg,.svg,.gif',
-    },
-    helpText: {
-        type: String as PropType<string>,
-        default: '',
-    },
-    maxSize: {
-        type: Number as PropType<number>,
-        default: 2
-    },
-    maxNumber: {
-        type: Number as PropType<number>,
-        default: Infinity
-    },
-    value: {
-        type: Array as PropType<string[]>,
-        default: () => []
-    },
-    width: {
-        type: Number as PropType<number>,
-        default: 104
-    },
-    height: {
-        type: Number as PropType<number>,
-        default: 104 //建议不小于这个尺寸 太小页面可能显示有异常
-    },
-}
+  ...NUpload.props,
+  accept: {
+    type: String,
+    default: '.jpg,.png,.jpeg,.svg,.gif',
+  },
+  helpText: {
+    type: String as PropType<string>,
+    default: '',
+  },
+  maxSize: {
+    type: Number as PropType<number>,
+    default: 2,
+  },
+  maxNumber: {
+    type: Number as PropType<number>,
+    default: Infinity,
+  },
+  value: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  width: {
+    type: Number as PropType<number>,
+    default: 104,
+  },
+  height: {
+    type: Number as PropType<number>,
+    default: 104, //建议不小于这个尺寸 太小页面可能显示有异常
+  },
+};

src/components/Upload/src/type/index.ts

@@ -1,7 +1,7 @@
-export interface BasicProps<T = any> {
-    title?: string,
-    dataSource: Function,
-    columns: any[],
-    pagination: object,
-    showPagination: boolean
+export interface BasicProps {
+  title?: string;
+  dataSource: Function;
+  columns: any[];
+  pagination: object;
+  showPagination: boolean;
 }

src/directives/clickOutside.ts

@@ -0,0 +1,86 @@
+import { on } from '@/utils/domUtils';
+import { isServer } from '@/utils/is';
+import type { ComponentPublicInstance, DirectiveBinding, ObjectDirective } from 'vue';
+
+type DocumentHandler = <T extends MouseEvent>(mouseup: T, mousedown: T) => void;
+
+type FlushList = Map<
+  HTMLElement,
+  {
+    documentHandler: DocumentHandler;
+    bindingFn: (...args: unknown[]) => unknown;
+  }
+>;
+
+const nodeList: FlushList = new Map();
+
+let startClick: MouseEvent;
+
+if (!isServer) {
+  on(document, 'mousedown', (e: MouseEvent) => (startClick = e));
+  on(document, 'mouseup', (e: MouseEvent) => {
+    for (const { documentHandler } of nodeList.values()) {
+      documentHandler(e, startClick);
+    }
+  });
+}
+
+function createDocumentHandler(el: HTMLElement, binding: DirectiveBinding): DocumentHandler {
+  let excludes: HTMLElement[] = [];
+  if (Array.isArray(binding.arg)) {
+    excludes = binding.arg;
+  } else {
+    // due to current implementation on binding type is wrong the type casting is necessary here
+    excludes.push(binding.arg as unknown as HTMLElement);
+  }
+  return function (mouseup, mousedown) {
+    const popperRef = (
+      binding.instance as ComponentPublicInstance<{
+        popperRef: Nullable<HTMLElement>;
+      }>
+    ).popperRef;
+    const mouseUpTarget = mouseup.target as Node;
+    const mouseDownTarget = mousedown.target as Node;
+    const isBound = !binding || !binding.instance;
+    const isTargetExists = !mouseUpTarget || !mouseDownTarget;
+    const isContainedByEl = el.contains(mouseUpTarget) || el.contains(mouseDownTarget);
+    const isSelf = el === mouseUpTarget;
+
+    const isTargetExcluded =
+      (excludes.length && excludes.some((item) => item?.contains(mouseUpTarget))) ||
+      (excludes.length && excludes.includes(mouseDownTarget as HTMLElement));
+    const isContainedByPopper =
+      popperRef && (popperRef.contains(mouseUpTarget) || popperRef.contains(mouseDownTarget));
+    if (
+      isBound ||
+      isTargetExists ||
+      isContainedByEl ||
+      isSelf ||
+      isTargetExcluded ||
+      isContainedByPopper
+    ) {
+      return;
+    }
+    binding.value();
+  };
+}
+
+const ClickOutside: ObjectDirective = {
+  beforeMount(el, binding) {
+    nodeList.set(el, {
+      documentHandler: createDocumentHandler(el, binding),
+      bindingFn: binding.value,
+    });
+  },
+  updated(el, binding) {
+    nodeList.set(el, {
+      documentHandler: createDocumentHandler(el, binding),
+      bindingFn: binding.value,
+    });
+  },
+  unmounted(el) {
+    nodeList.delete(el);
+  },
+};
+
+export default ClickOutside;

src/directives/permission.ts

@@ -1,19 +1,19 @@
-import { ObjectDirective } from 'vue'
-import { usePermission } from "@/hooks/web/usePermission";
+import { ObjectDirective } from 'vue';
+import { usePermission } from '@/hooks/web/usePermission';
 
 export const permission: ObjectDirective = {
-    mounted(el: HTMLButtonElement, binding, vnode) {
-        if (binding.value == undefined) return
-        const { action, effect } = binding.value
-        const { hasPermission } = usePermission()
-        if (!hasPermission(action)) {
-            if (effect == 'disabled') {
-                el.disabled = true
-                el.style["disabled"] = 'disabled'
-                el.classList.add("n-button--disabled")
-            } else {
-                el.remove()
-            }
-        }
+  mounted(el: HTMLButtonElement, binding) {
+    if (binding.value == undefined) return;
+    const { action, effect } = binding.value;
+    const { hasPermission } = usePermission();
+    if (!hasPermission(action)) {
+      if (effect == 'disabled') {
+        el.disabled = true;
+        el.style['disabled'] = 'disabled';
+        el.classList.add('n-button--disabled');
+      } else {
+        el.remove();
+      }
     }
-}
+  },
+};

src/enums/breakpointEnum.ts

@@ -1,19 +1,19 @@
 export enum sizeEnum {
-    XS = 'XS',
-    SM = 'SM',
-    MD = 'MD',
-    LG = 'LG',
-    XL = 'XL',
-    XXL = 'XXL',
+  XS = 'XS',
+  SM = 'SM',
+  MD = 'MD',
+  LG = 'LG',
+  XL = 'XL',
+  XXL = 'XXL',
 }
 
 export enum screenEnum {
-    XS = 480,
-    SM = 576,
-    MD = 768,
-    LG = 992,
-    XL = 1200,
-    XXL = 1600,
+  XS = 480,
+  SM = 576,
+  MD = 768,
+  LG = 992,
+  XL = 1200,
+  XXL = 1600,
 }
 
 const screenMap = new Map<sizeEnum, number>();

src/enums/cacheEnum.ts

@@ -1,20 +1,20 @@
 // token key
-export const TOKEN_KEY = 'TOKEN'
+export const TOKEN_KEY = 'TOKEN';
 
 // user info key
-export const USER_INFO_KEY = 'USER__INFO__'
+export const USER_INFO_KEY = 'USER__INFO__';
 
 // role info key
-export const ROLES_KEY = 'ROLES__KEY__'
+export const ROLES_KEY = 'ROLES__KEY__';
 
 // project config key
-export const PROJ_CFG_KEY = 'PROJ__CFG__KEY__'
+export const PROJ_CFG_KEY = 'PROJ__CFG__KEY__';
 
 // lock info
-export const LOCK_INFO_KEY = 'LOCK__INFO__KEY__'
+export const LOCK_INFO_KEY = 'LOCK__INFO__KEY__';
 
 // base global local key
-export const BASE_LOCAL_CACHE_KEY = 'LOCAL__CACHE__KEY__'
+export const BASE_LOCAL_CACHE_KEY = 'LOCAL__CACHE__KEY__';
 
 // base global session key
-export const BASE_SESSION_CACHE_KEY = 'SESSION__CACHE__KEY__'
+export const BASE_SESSION_CACHE_KEY = 'SESSION__CACHE__KEY__';

src/enums/httpEnum.ts

@@ -2,33 +2,33 @@
  * @description: 请求结果集
  */
 export enum ResultEnum {
-    SUCCESS = 200,
-    ERROR = -1,
-    TIMEOUT = 10042,
-    TYPE = 'success'
+  SUCCESS = 200,
+  ERROR = -1,
+  TIMEOUT = 10042,
+  TYPE = 'success',
 }
 
 /**
  * @description: 请求方法
  */
 export enum RequestEnum {
-    GET = 'GET',
-    POST = 'POST',
-    PATCH = 'PATCH',
-    PUT = 'PUT',
-    DELETE = 'DELETE'
+  GET = 'GET',
+  POST = 'POST',
+  PATCH = 'PATCH',
+  PUT = 'PUT',
+  DELETE = 'DELETE',
 }
 
 /**
  * @description:  常用的contentTyp类型
  */
 export enum ContentTypeEnum {
-    // json
-    JSON = 'application/json;charset=UTF-8',
-    // json
-    TEXT = 'text/plain;charset=UTF-8',
-    // form-data 一般配合qs
-    FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
-    // form-data  上传
-    FORM_DATA = 'multipart/form-data;charset=UTF-8'
+  // json
+  JSON = 'application/json;charset=UTF-8',
+  // json
+  TEXT = 'text/plain;charset=UTF-8',
+  // form-data 一般配合qs
+  FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
+  // form-data  上传
+  FORM_DATA = 'multipart/form-data;charset=UTF-8',
 }

src/enums/pageEnum.ts

@@ -1,12 +1,14 @@
 export enum PageEnum {
-    // 登录
-    BASE_LOGIN = '/login',
-    BASE_LOGIN_NAME = 'Login',
-    //重定向
-    REDIRECT = '/redirect',
-    REDIRECT_NAME = 'Redirect',
-    // 首页
-    BASE_HOME = '/dashboard',
-    // 错误
-    ERROR_PAGE_NAME = 'ErrorPage',
+  // 登录
+  BASE_LOGIN = '/login',
+  BASE_LOGIN_NAME = 'Login',
+  //重定向
+  REDIRECT = '/redirect',
+  REDIRECT_NAME = 'Redirect',
+  // 首页
+  BASE_HOME = '/dashboard',
+  //首页跳转默认路由
+  BASE_HOME_REDIRECT = '/dashboard/console',
+  // 错误
+  ERROR_PAGE_NAME = 'ErrorPage',
 }

src/enums/roleEnum.ts

@@ -1,7 +1,7 @@
 export enum RoleEnum {
-    // 管理员
-    ADMIN = 'admin',
+  // 管理员
+  ADMIN = 'admin',
 
-    // 普通用户
-    NORMAL = 'normal'
+  // 普通用户
+  NORMAL = 'normal',
 }

src/hooks/core/useTimeout.ts

@@ -3,45 +3,45 @@ import { tryOnUnmounted } from '@vueuse/core';
 import { isFunction } from '@/utils/is';
 
 export function useTimeoutFn(handle: Fn<any>, wait: number, native = false) {
-    if (!isFunction(handle)) {
-        throw new Error('handle is not Function!');
-    }
+  if (!isFunction(handle)) {
+    throw new Error('handle is not Function!');
+  }
 
-    const { readyRef, stop, start } = useTimeoutRef(wait);
-    if (native) {
-        handle();
-    } else {
-        watch(
-            readyRef,
-            (maturity) => {
-                maturity && handle();
-            },
-            { immediate: false }
-        );
-    }
-    return { readyRef, stop, start };
+  const { readyRef, stop, start } = useTimeoutRef(wait);
+  if (native) {
+    handle();
+  } else {
+    watch(
+      readyRef,
+      (maturity) => {
+        maturity && handle();
+      },
+      { immediate: false }
+    );
+  }
+  return { readyRef, stop, start };
 }
 
 export function useTimeoutRef(wait: number) {
-    const readyRef = ref(false);
+  const readyRef = ref(false);
 
-    let timer: TimeoutHandle;
+  let timer: TimeoutHandle;
 
-    function stop(): void {
-        readyRef.value = false;
-        timer && window.clearTimeout(timer);
-    }
+  function stop(): void {
+    readyRef.value = false;
+    timer && window.clearTimeout(timer);
+  }
 
-    function start(): void {
-        stop();
-        timer = setTimeout(() => {
-            readyRef.value = true;
-        }, wait);
-    }
+  function start(): void {
+    stop();
+    timer = setTimeout(() => {
+      readyRef.value = true;
+    }, wait);
+  }
 
-    start();
+  start();
 
-    tryOnUnmounted(stop);
+  tryOnUnmounted(stop);
 
-    return { readyRef, stop, start };
+  return { readyRef, stop, start };
 }

src/hooks/event/useBreakpoint.ts

@@ -7,83 +7,83 @@ let globalWidthRef: ComputedRef<number>;
 let globalRealWidthRef: ComputedRef<number>;
 
 export interface CreateCallbackParams {
-    screen: ComputedRef<sizeEnum | undefined>;
-    width: ComputedRef<number>;
-    realWidth: ComputedRef<number>;
-    screenEnum: typeof screenEnum;
-    screenMap: Map<sizeEnum, number>;
-    sizeEnum: typeof sizeEnum;
+  screen: ComputedRef<sizeEnum | undefined>;
+  width: ComputedRef<number>;
+  realWidth: ComputedRef<number>;
+  screenEnum: typeof screenEnum;
+  screenMap: Map<sizeEnum, number>;
+  sizeEnum: typeof sizeEnum;
 }
 
 export function useBreakpoint() {
-    return {
-        screenRef: computed(() => unref(globalScreenRef)),
-        widthRef: globalWidthRef,
-        screenEnum,
-        realWidthRef: globalRealWidthRef,
-    };
+  return {
+    screenRef: computed(() => unref(globalScreenRef)),
+    widthRef: globalWidthRef,
+    screenEnum,
+    realWidthRef: globalRealWidthRef,
+  };
 }
 
 // Just call it once
 export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void) {
-    const screenRef = ref<sizeEnum>(sizeEnum.XL);
-    const realWidthRef = ref(window.innerWidth);
+  const screenRef = ref<sizeEnum>(sizeEnum.XL);
+  const realWidthRef = ref(window.innerWidth);
 
-    function getWindowWidth() {
-        const width = document.body.clientWidth;
-        const xs = screenMap.get(sizeEnum.XS)!;
-        const sm = screenMap.get(sizeEnum.SM)!;
-        const md = screenMap.get(sizeEnum.MD)!;
-        const lg = screenMap.get(sizeEnum.LG)!;
-        const xl = screenMap.get(sizeEnum.XL)!;
-        if (width < xs) {
-            screenRef.value = sizeEnum.XS;
-        } else if (width < sm) {
-            screenRef.value = sizeEnum.SM;
-        } else if (width < md) {
-            screenRef.value = sizeEnum.MD;
-        } else if (width < lg) {
-            screenRef.value = sizeEnum.LG;
-        } else if (width < xl) {
-            screenRef.value = sizeEnum.XL;
-        } else {
-            screenRef.value = sizeEnum.XXL;
-        }
-        realWidthRef.value = width;
+  function getWindowWidth() {
+    const width = document.body.clientWidth;
+    const xs = screenMap.get(sizeEnum.XS)!;
+    const sm = screenMap.get(sizeEnum.SM)!;
+    const md = screenMap.get(sizeEnum.MD)!;
+    const lg = screenMap.get(sizeEnum.LG)!;
+    const xl = screenMap.get(sizeEnum.XL)!;
+    if (width < xs) {
+      screenRef.value = sizeEnum.XS;
+    } else if (width < sm) {
+      screenRef.value = sizeEnum.SM;
+    } else if (width < md) {
+      screenRef.value = sizeEnum.MD;
+    } else if (width < lg) {
+      screenRef.value = sizeEnum.LG;
+    } else if (width < xl) {
+      screenRef.value = sizeEnum.XL;
+    } else {
+      screenRef.value = sizeEnum.XXL;
     }
+    realWidthRef.value = width;
+  }
 
-    useEventListener({
-        el: window,
-        name: 'resize',
+  useEventListener({
+    el: window,
+    name: 'resize',
 
-        listener: () => {
-            getWindowWidth();
-            resizeFn();
-        },
-        // wait: 100,
+    listener: () => {
+      getWindowWidth();
+      resizeFn();
+    },
+    // wait: 100,
+  });
+
+  getWindowWidth();
+  globalScreenRef = computed(() => unref(screenRef));
+  globalWidthRef = computed((): number => screenMap.get(unref(screenRef)!)!);
+  globalRealWidthRef = computed((): number => unref(realWidthRef));
+
+  function resizeFn() {
+    fn?.({
+      screen: globalScreenRef,
+      width: globalWidthRef,
+      realWidth: globalRealWidthRef,
+      screenEnum,
+      screenMap,
+      sizeEnum,
     });
+  }
 
-    getWindowWidth();
-    globalScreenRef = computed(() => unref(screenRef));
-    globalWidthRef = computed((): number => screenMap.get(unref(screenRef)!)!);
-    globalRealWidthRef = computed((): number => unref(realWidthRef));
-
-    function resizeFn() {
-        fn?.({
-            screen: globalScreenRef,
-            width: globalWidthRef,
-            realWidth: globalRealWidthRef,
-            screenEnum,
-            screenMap,
-            sizeEnum,
-        });
-    }
-
-    resizeFn();
-    return {
-        screenRef: globalScreenRef,
-        screenEnum,
-        widthRef: globalWidthRef,
-        realWidthRef: globalRealWidthRef,
-    };
+  resizeFn();
+  return {
+    screenRef: globalScreenRef,
+    screenEnum,
+    widthRef: globalWidthRef,
+    realWidthRef: globalRealWidthRef,
+  };
 }

src/hooks/event/useEventListener.ts

@@ -6,57 +6,57 @@ import { useThrottleFn, useDebounceFn } from '@vueuse/core';
 export type RemoveEventFn = () => void;
 
 export interface UseEventParams {
-    el?: Element | Ref<Element | undefined> | Window | any;
-    name: string;
-    listener: EventListener;
-    options?: boolean | AddEventListenerOptions;
-    autoRemove?: boolean;
-    isDebounce?: boolean;
-    wait?: number;
+  el?: Element | Ref<Element | undefined> | Window | any;
+  name: string;
+  listener: EventListener;
+  options?: boolean | AddEventListenerOptions;
+  autoRemove?: boolean;
+  isDebounce?: boolean;
+  wait?: number;
 }
 
 export function useEventListener({
-                                     el = window,
-                                     name,
-                                     listener,
-                                     options,
-                                     autoRemove = true,
-                                     isDebounce = true,
-                                     wait = 80,
-                                 }: UseEventParams): { removeEvent: RemoveEventFn } {
-    /* eslint-disable-next-line */
+  el = window,
+  name,
+  listener,
+  options,
+  autoRemove = true,
+  isDebounce = true,
+  wait = 80,
+}: UseEventParams): { removeEvent: RemoveEventFn } {
+  /* eslint-disable-next-line */
     let remove: RemoveEventFn = () => {
     };
-    const isAddRef = ref(false);
+  const isAddRef = ref(false);
 
-    if (el) {
-        const element: Ref<Element> = ref(el as Element);
+  if (el) {
+    const element: Ref<Element> = ref(el as Element);
 
-        const handler = isDebounce ? useDebounceFn(listener, wait) : useThrottleFn(listener, wait);
-        const realHandler = wait ? handler : listener;
-        const removeEventListener = (e: Element) => {
-            isAddRef.value = true;
-            e.removeEventListener(name, realHandler, options);
-        };
-        const addEventListener = (e: Element) => e.addEventListener(name, realHandler, options);
+    const handler = isDebounce ? useDebounceFn(listener, wait) : useThrottleFn(listener, wait);
+    const realHandler = wait ? handler : listener;
+    const removeEventListener = (e: Element) => {
+      isAddRef.value = true;
+      e.removeEventListener(name, realHandler, options);
+    };
+    const addEventListener = (e: Element) => e.addEventListener(name, realHandler, options);
 
-        const removeWatch = watch(
-            element,
-            (v, _ov, cleanUp) => {
-                if (v) {
-                    !unref(isAddRef) && addEventListener(v);
-                    cleanUp(() => {
-                        autoRemove && removeEventListener(v);
-                    });
-                }
-            },
-            { immediate: true }
-        );
+    const removeWatch = watch(
+      element,
+      (v, _ov, cleanUp) => {
+        if (v) {
+          !unref(isAddRef) && addEventListener(v);
+          cleanUp(() => {
+            autoRemove && removeEventListener(v);
+          });
+        }
+      },
+      { immediate: true }
+    );
 
-        remove = () => {
-            removeEventListener(element.value);
-            removeWatch();
-        };
-    }
-    return { removeEvent: remove };
+    remove = () => {
+      removeEventListener(element.value);
+      removeWatch();
+    };
+  }
+  return { removeEvent: remove };
 }

src/hooks/event/useWindowSizeFn.ts

@@ -0,0 +1,36 @@
+import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';
+import { useDebounceFn } from '@vueuse/core';
+
+interface WindowSizeOptions {
+  once?: boolean;
+  immediate?: boolean;
+  listenerOptions?: AddEventListenerOptions | boolean;
+}
+
+export function useWindowSizeFn<T>(fn: Fn<T>, wait = 150, options?: WindowSizeOptions) {
+  let handler = () => {
+    fn();
+  };
+  const handleSize = useDebounceFn(handler, wait);
+  handler = handleSize;
+
+  const start = () => {
+    if (options && options.immediate) {
+      handler();
+    }
+    window.addEventListener('resize', handler);
+  };
+
+  const stop = () => {
+    window.removeEventListener('resize', handler);
+  };
+
+  tryOnMounted(() => {
+    start();
+  });
+
+  tryOnUnmounted(() => {
+    stop();
+  });
+  return [start, stop];
+}

src/hooks/index.ts

@@ -1,3 +1,3 @@
-import { useAsync } from './use-async'
+import { useAsync } from './use-async';
 
-export { useAsync }
+export { useAsync };

src/hooks/setting/index.ts

@@ -4,32 +4,31 @@ import { warn } from '@/utils/log';
 import { getAppEnvConfig } from '@/utils/env';
 
 export const useGlobSetting = (): Readonly<GlobConfig> => {
-    const {
-        VITE_GLOB_APP_TITLE,
-        VITE_GLOB_API_URL,
-        VITE_GLOB_APP_SHORT_NAME,
-        VITE_GLOB_API_URL_PREFIX,
-        VITE_GLOB_UPLOAD_URL,
-        VITE_GLOB_PROD_MOCK,
-        VITE_GLOB_IMG_URL
-    } = getAppEnvConfig();
+  const {
+    VITE_GLOB_APP_TITLE,
+    VITE_GLOB_API_URL,
+    VITE_GLOB_APP_SHORT_NAME,
+    VITE_GLOB_API_URL_PREFIX,
+    VITE_GLOB_UPLOAD_URL,
+    VITE_GLOB_PROD_MOCK,
+    VITE_GLOB_IMG_URL,
+  } = getAppEnvConfig();
 
-    if (!/[a-zA-Z\_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
-        warn(
-            `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
-        );
-    }
+  if (!/[a-zA-Z\_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
+    warn(
+      `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
+    );
+  }
 
-    // Take global configuration
-    const glob: Readonly<GlobConfig> = {
-        title: VITE_GLOB_APP_TITLE,
-        apiUrl: VITE_GLOB_API_URL,
-        shortName: VITE_GLOB_APP_SHORT_NAME,
-        urlPrefix: VITE_GLOB_API_URL_PREFIX,
-        uploadUrl: VITE_GLOB_UPLOAD_URL,
-        prodMock: VITE_GLOB_PROD_MOCK,
-        imgUrl: VITE_GLOB_IMG_URL
-
-    };
-    return glob as Readonly<GlobConfig>;
+  // Take global configuration
+  const glob: Readonly<GlobConfig> = {
+    title: VITE_GLOB_APP_TITLE,
+    apiUrl: VITE_GLOB_API_URL,
+    shortName: VITE_GLOB_APP_SHORT_NAME,
+    urlPrefix: VITE_GLOB_API_URL_PREFIX,
+    uploadUrl: VITE_GLOB_UPLOAD_URL,
+    prodMock: VITE_GLOB_PROD_MOCK,
+    imgUrl: VITE_GLOB_IMG_URL,
+  };
+  return glob as Readonly<GlobConfig>;
 };

src/hooks/setting/useDesignSetting.ts

@@ -2,18 +2,17 @@ import { computed } from 'vue';
 import { useDesignSettingStore } from '@/store/modules/designSetting';
 
 export function useDesignSetting() {
-    const designStore = useDesignSettingStore();
+  const designStore = useDesignSettingStore();
 
-    const getDarkTheme = computed(() => designStore.darkTheme);
+  const getDarkTheme = computed(() => designStore.darkTheme);
 
-    const getAppTheme = computed(() => designStore.appTheme);
+  const getAppTheme = computed(() => designStore.appTheme);
 
-    const getAppThemeList = computed(() => designStore.appThemeList);
-
-    return {
-        getDarkTheme,
-        getAppTheme,
-        getAppThemeList
-    }
+  const getAppThemeList = computed(() => designStore.appThemeList);
 
+  return {
+    getDarkTheme,
+    getAppTheme,
+    getAppThemeList,
+  };
 }

src/hooks/setting/useProjectSetting.ts

@@ -2,33 +2,32 @@ import { computed } from 'vue';
 import { useProjectSettingStore } from '@/store/modules/projectSetting';
 
 export function useProjectSetting() {
+  const projectStore = useProjectSettingStore();
 
-    const projectStore = useProjectSettingStore();
+  const getNavMode = computed(() => projectStore.navMode);
 
-    const getNavMode = computed(() => projectStore.navMode);
+  const getNavTheme = computed(() => projectStore.navTheme);
 
-    const getNavTheme = computed(() => projectStore.navTheme);
+  const getHeaderSetting = computed(() => projectStore.headerSetting);
 
-    const getHeaderSetting = computed(() => projectStore.headerSetting);
+  const getMultiTabsSetting = computed(() => projectStore.multiTabsSetting);
 
-    const getMultiTabsSetting = computed(() => projectStore.multiTabsSetting);
+  const getMenuSetting = computed(() => projectStore.menuSetting);
 
-    const getMenuSetting = computed(() => projectStore.menuSetting);
+  const getCrumbsSetting = computed(() => projectStore.crumbsSetting);
 
-    const getCrumbsSetting = computed(() => projectStore.crumbsSetting);
+  const getPermissionMode = computed(() => projectStore.permissionMode);
 
-    const getPermissionMode = computed(() => projectStore.permissionMode);
+  const getShowFooter = computed(() => projectStore.showFooter);
 
-    const getShowFooter = computed(() => projectStore.showFooter);
-
-    return {
-        getNavMode,
-        getNavTheme,
-        getHeaderSetting,
-        getMultiTabsSetting,
-        getMenuSetting,
-        getCrumbsSetting,
-        getPermissionMode,
-        getShowFooter
-    }
+  return {
+    getNavMode,
+    getNavTheme,
+    getHeaderSetting,
+    getMultiTabsSetting,
+    getMenuSetting,
+    getCrumbsSetting,
+    getPermissionMode,
+    getShowFooter,
+  };
 }

src/hooks/use-async.ts

@@ -1,15 +1,15 @@
-import { Ref, isReactive, isRef } from 'vue'
+import { isReactive, isRef } from 'vue';
 
 function setLoading(loading, val) {
-    if (loading != undefined && isRef(loading)) {
-        loading.value = val
-    } else if (loading != undefined && isReactive(loading)) {
-        loading.loading = val
-    }
+  if (loading != undefined && isRef(loading)) {
+    loading.value = val;
+  } else if (loading != undefined && isReactive(loading)) {
+    loading.loading = val;
+  }
 }
 
 export const useAsync = async (func: Promise<any>, loading: any): Promise<any> => {
-    setLoading(loading, true)
+  setLoading(loading, true);
 
-    return await func.finally(() => setLoading(loading, false))
-}
+  return await func.finally(() => setLoading(loading, false));
+};

src/hooks/useBattery.ts

@@ -1,84 +1,84 @@
-import { computed, onMounted, reactive, toRefs } from 'vue'
+import { computed, onMounted, reactive, toRefs } from 'vue';
 
 interface Battery {
-    charging: boolean // 当前电池是否正在充电
-    chargingTime: number // 距离充电完毕还需多少秒，如果为0则充电完毕
-    dischargingTime: number // 代表距离电池耗电至空且挂起需要多少秒
-    level: number // 代表电量的放大等级，这个值在 0.0 至 1.0 之间
-    [key: string]: any
+  charging: boolean; // 当前电池是否正在充电
+  chargingTime: number; // 距离充电完毕还需多少秒，如果为0则充电完毕
+  dischargingTime: number; // 代表距离电池耗电至空且挂起需要多少秒
+  level: number; // 代表电量的放大等级，这个值在 0.0 至 1.0 之间
+  [key: string]: any;
 }
 
 export const useBattery = () => {
-    const state = reactive({
-        battery: {
-            charging: false,
-            chargingTime: 0,
-            dischargingTime: 0,
-            level: 100
-        }
-    })
+  const state = reactive({
+    battery: {
+      charging: false,
+      chargingTime: 0,
+      dischargingTime: 0,
+      level: 100,
+    },
+  });
 
-    // 更新电池使用状态
-    const updateBattery = (target) => {
-        for (const key in state.battery) {
-            state.battery[key] = target[key]
-        }
-        state.battery.level = state.battery.level * 100
+  // 更新电池使用状态
+  const updateBattery = (target) => {
+    for (const key in state.battery) {
+      state.battery[key] = target[key];
     }
+    state.battery.level = state.battery.level * 100;
+  };
 
-    // 计算电池剩余可用时间
-    const calcDischargingTime = computed(() => {
-        const hour = state.battery.dischargingTime / 3600
-        const minute = (state.battery.dischargingTime / 60) % 60
-        return `${ ~~hour }小时${ ~~minute }分钟`
-    })
+  // 计算电池剩余可用时间
+  const calcDischargingTime = computed(() => {
+    const hour = state.battery.dischargingTime / 3600;
+    const minute = (state.battery.dischargingTime / 60) % 60;
+    return `${~~hour}小时${~~minute}分钟`;
+  });
 
-    // 电池状态
-    const batteryStatus = computed(() => {
-        if (state.battery.charging && state.battery.level >= 100) {
-            return '已充满'
-        } else if (state.battery.charging) {
-            return '充电中'
-        } else {
-            return '已断开电源'
-        }
-    })
-
-    onMounted(async () => {
-        const BatteryManager: Battery = await (window.navigator as any).getBattery()
-        updateBattery(BatteryManager)
-
-        // 电池充电状态更新时被调用
-        BatteryManager.onchargingchange = ({ target }) => {
-            updateBattery(target)
-        }
-        // 电池充电时间更新时被调用
-        BatteryManager.onchargingtimechange = ({ target }) => {
-            updateBattery(target)
-        }
-        // 电池断开充电时间更新时被调用
-        BatteryManager.ondischargingtimechange = ({ target }) => {
-            updateBattery(target)
-        }
-        // 电池电量更新时被调用
-        BatteryManager.onlevelchange = ({ target }) => {
-            updateBattery(target)
-        }
-
-        // new Intl.DateTimeFormat('zh', {
-        //   year: 'numeric',
-        //   month: '2-digit',
-        //   day: '2-digit',
-        //   hour: '2-digit',
-        //   minute: '2-digit',
-        //   second: '2-digit',
-        //   hour12: false
-        // }).format(new Date())
-    })
-
-    return {
-        ...toRefs(state),
-        batteryStatus,
-        calcDischargingTime
+  // 电池状态
+  const batteryStatus = computed(() => {
+    if (state.battery.charging && state.battery.level >= 100) {
+      return '已充满';
+    } else if (state.battery.charging) {
+      return '充电中';
+    } else {
+      return '已断开电源';
     }
-}
+  });
+
+  onMounted(async () => {
+    const BatteryManager: Battery = await (window.navigator as any).getBattery();
+    updateBattery(BatteryManager);
+
+    // 电池充电状态更新时被调用
+    BatteryManager.onchargingchange = ({ target }) => {
+      updateBattery(target);
+    };
+    // 电池充电时间更新时被调用
+    BatteryManager.onchargingtimechange = ({ target }) => {
+      updateBattery(target);
+    };
+    // 电池断开充电时间更新时被调用
+    BatteryManager.ondischargingtimechange = ({ target }) => {
+      updateBattery(target);
+    };
+    // 电池电量更新时被调用
+    BatteryManager.onlevelchange = ({ target }) => {
+      updateBattery(target);
+    };
+
+    // new Intl.DateTimeFormat('zh', {
+    //   year: 'numeric',
+    //   month: '2-digit',
+    //   day: '2-digit',
+    //   hour: '2-digit',
+    //   minute: '2-digit',
+    //   second: '2-digit',
+    //   hour12: false
+    // }).format(new Date())
+  });
+
+  return {
+    ...toRefs(state),
+    batteryStatus,
+    calcDischargingTime,
+  };
+};

src/hooks/useDomWidth.ts

@@ -1,23 +1,23 @@
-import { ref, onMounted, onUnmounted } from 'vue'
-import { debounce } from 'lodash'
+import { ref, onMounted, onUnmounted } from 'vue';
+import { debounce } from 'lodash';
 
 /**
  * description: 获取页面宽度
  */
 
 export function useDomWidth() {
-    const domWidth = ref(window.innerWidth)
+  const domWidth = ref(window.innerWidth);
 
-    function resize() {
-        domWidth.value = document.body.clientWidth
-    }
+  function resize() {
+    domWidth.value = document.body.clientWidth;
+  }
 
-    onMounted(() => {
-        window.addEventListener('resize', debounce(resize, 80))
-    })
-    onUnmounted(() => {
-        window.removeEventListener('resize', resize)
-    })
+  onMounted(() => {
+    window.addEventListener('resize', debounce(resize, 80));
+  });
+  onUnmounted(() => {
+    window.removeEventListener('resize', resize);
+  });
 
-    return domWidth
+  return domWidth;
 }

src/hooks/useOnline.ts

@@ -1,30 +1,30 @@
-import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue';
 
 /**
  * @description 用户网络是否可用
  * */
 export function useOnline() {
-    const online = ref(true)
+  const online = ref(true);
 
-    const showStatus = (val) => {
-        online.value = typeof val == 'boolean' ? val : val.target.online
-    }
+  const showStatus = (val) => {
+    online.value = typeof val == 'boolean' ? val : val.target.online;
+  };
 
-    // 在页面加载后，设置正确的网络状态
-    navigator.onLine ? showStatus(true) : showStatus(false)
+  // 在页面加载后，设置正确的网络状态
+  navigator.onLine ? showStatus(true) : showStatus(false);
 
-    onMounted(() => {
-        // 开始监听网络状态的变化
-        window.addEventListener('online', showStatus)
+  onMounted(() => {
+    // 开始监听网络状态的变化
+    window.addEventListener('online', showStatus);
 
-        window.addEventListener('offline', showStatus)
-    })
-    onUnmounted(() => {
-        // 移除监听网络状态的变化
-        window.removeEventListener('online', showStatus)
+    window.addEventListener('offline', showStatus);
+  });
+  onUnmounted(() => {
+    // 移除监听网络状态的变化
+    window.removeEventListener('online', showStatus);
 
-        window.removeEventListener('offline', showStatus)
-    })
+    window.removeEventListener('offline', showStatus);
+  });
 
-    return { online }
+  return { online };
 }

src/hooks/useTime.ts

@@ -1,55 +1,55 @@
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue';
 
 /**
  * @description 获取本地时间
  */
 export function useTime() {
-    let timer // 定时器
-    const year = ref(0) // 年份
-    const month = ref(0) // 月份
-    const week = ref('') // 星期几
-    const day = ref(0) // 天数
-    const hour = ref<number | string>(0) // 小时
-    const minute = ref<number | string>(0) // 分钟
-    const second = ref(0) // 秒
+  let timer; // 定时器
+  const year = ref(0); // 年份
+  const month = ref(0); // 月份
+  const week = ref(''); // 星期几
+  const day = ref(0); // 天数
+  const hour = ref<number | string>(0); // 小时
+  const minute = ref<number | string>(0); // 分钟
+  const second = ref(0); // 秒
 
-    // 更新时间
-    const updateTime = () => {
-        const date = new Date()
-        year.value = date.getFullYear()
-        month.value = date.getMonth() + 1
-        week.value = '日一二三四五六'.charAt(date.getDay())
-        day.value = date.getDate()
-        hour.value =
-            (date.getHours() + '')?.padStart(2, '0') ||
-            new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getHours())
-        minute.value =
-            (date.getMinutes() + '')?.padStart(2, '0') ||
-            new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getMinutes())
-        second.value = date.getSeconds()
-    }
+  // 更新时间
+  const updateTime = () => {
+    const date = new Date();
+    year.value = date.getFullYear();
+    month.value = date.getMonth() + 1;
+    week.value = '日一二三四五六'.charAt(date.getDay());
+    day.value = date.getDate();
+    hour.value =
+      (date.getHours() + '')?.padStart(2, '0') ||
+      new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getHours());
+    minute.value =
+      (date.getMinutes() + '')?.padStart(2, '0') ||
+      new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getMinutes());
+    second.value = date.getSeconds();
+  };
 
-    // 原生时间格式化
-    // new Intl.DateTimeFormat('zh', {
-    //     year: 'numeric',
-    //     month: '2-digit',
-    //     day: '2-digit',
-    //     hour: '2-digit',
-    //     minute: '2-digit',
-    //     second: '2-digit',
-    //     hour12: false
-    // }).format(new Date())
+  // 原生时间格式化
+  // new Intl.DateTimeFormat('zh', {
+  //     year: 'numeric',
+  //     month: '2-digit',
+  //     day: '2-digit',
+  //     hour: '2-digit',
+  //     minute: '2-digit',
+  //     second: '2-digit',
+  //     hour12: false
+  // }).format(new Date())
 
-    updateTime()
+  updateTime();
 
-    onMounted(() => {
-        clearInterval(timer)
-        timer = setInterval(() => updateTime(), 1000)
-    })
+  onMounted(() => {
+    clearInterval(timer);
+    timer = setInterval(() => updateTime(), 1000);
+  });
 
-    onUnmounted(() => {
-        clearInterval(timer)
-    })
+  onUnmounted(() => {
+    clearInterval(timer);
+  });
 
-    return { month, day, hour, minute, second, week }
+  return { month, day, hour, minute, second, week };
 }

src/hooks/web/useECharts.ts

@@ -12,107 +12,105 @@ import echarts from '@/utils/lib/echarts';
 
 // import { useRootSetting } from '@/hooks/setting/useRootSetting';
 
-
 export function useECharts(
-    elRef: Ref<HTMLDivElement>,
-    theme: 'light' | 'dark' | 'default' = 'light'
+  elRef: Ref<HTMLDivElement>,
+  theme: 'light' | 'dark' | 'default' = 'light'
 ) {
-    // const { getDarkMode } = useRootSetting();
-    const getDarkMode = 'light'
-    let chartInstance: echarts.ECharts | null = null;
-    let resizeFn: Fn = resize;
-    const cacheOptions = ref<EChartsOption>({});
-    let removeResizeFn: Fn = () => {
-    };
+  // const { getDarkMode } = useRootSetting();
+  const getDarkMode = 'light';
+  let chartInstance: echarts.ECharts | null = null;
+  let resizeFn: Fn = resize;
+  const cacheOptions = ref<EChartsOption>({});
+  let removeResizeFn: Fn = () => {};
 
-    resizeFn = useDebounceFn(resize, 200);
+  resizeFn = useDebounceFn(resize, 200);
 
-    const getOptions = computed((): EChartsOption => {
-        if (getDarkMode !== 'dark') {
-            return cacheOptions.value;
-        }
-        return {
-            backgroundColor: 'transparent',
-            ...cacheOptions.value,
-        };
-    });
-
-    function initCharts(t = theme) {
-        const el = unref(elRef);
-        if (!el || !unref(el)) {
-            return;
-        }
-
-        chartInstance = echarts.init(el, t);
-        const { removeEvent } = useEventListener({
-            el: window,
-            name: 'resize',
-            listener: resizeFn,
-        });
-        removeResizeFn = removeEvent;
-        const { widthRef, screenEnum } = useBreakpoint();
-        if (unref(widthRef) <= screenEnum.MD || el.offsetHeight === 0) {
-            useTimeoutFn(() => {
-                resizeFn();
-            }, 30);
-        }
+  const getOptions = computed((): EChartsOption => {
+    if (getDarkMode !== 'dark') {
+      return cacheOptions.value;
     }
-
-    function setOptions(options: EChartsOption, clear = true) {
-        cacheOptions.value = options;
-        if (unref(elRef)?.offsetHeight === 0) {
-            useTimeoutFn(() => {
-                setOptions(unref(getOptions));
-            }, 30);
-            return;
-        }
-        nextTick(() => {
-            useTimeoutFn(() => {
-                if (!chartInstance) {
-                    initCharts(getDarkMode.value as 'default');
-
-                    if (!chartInstance) return;
-                }
-                clear && chartInstance?.clear();
-
-                chartInstance?.setOption(unref(getOptions));
-            }, 30);
-        });
-    }
-
-    function resize() {
-        chartInstance?.resize();
-    }
-
-    watch(
-        () => getDarkMode.value,
-        (theme) => {
-            if (chartInstance) {
-                chartInstance.dispose();
-                initCharts(theme as 'default');
-                setOptions(cacheOptions.value);
-            }
-        }
-    );
-
-    tryOnUnmounted(() => {
-        if (!chartInstance) return;
-        removeResizeFn();
-        chartInstance.dispose();
-        chartInstance = null;
-    });
-
-    function getInstance(): echarts.ECharts | null {
-        if (!chartInstance) {
-            initCharts(getDarkMode.value as 'default');
-        }
-        return chartInstance;
-    }
-
     return {
-        setOptions,
-        resize,
-        echarts,
-        getInstance,
+      backgroundColor: 'transparent',
+      ...cacheOptions.value,
     };
+  });
+
+  function initCharts(t = theme) {
+    const el = unref(elRef);
+    if (!el || !unref(el)) {
+      return;
+    }
+
+    chartInstance = echarts.init(el, t);
+    const { removeEvent } = useEventListener({
+      el: window,
+      name: 'resize',
+      listener: resizeFn,
+    });
+    removeResizeFn = removeEvent;
+    const { widthRef, screenEnum } = useBreakpoint();
+    if (unref(widthRef) <= screenEnum.MD || el.offsetHeight === 0) {
+      useTimeoutFn(() => {
+        resizeFn();
+      }, 30);
+    }
+  }
+
+  function setOptions(options: EChartsOption, clear = true) {
+    cacheOptions.value = options;
+    if (unref(elRef)?.offsetHeight === 0) {
+      useTimeoutFn(() => {
+        setOptions(unref(getOptions));
+      }, 30);
+      return;
+    }
+    nextTick(() => {
+      useTimeoutFn(() => {
+        if (!chartInstance) {
+          initCharts(getDarkMode.value as 'default');
+
+          if (!chartInstance) return;
+        }
+        clear && chartInstance?.clear();
+
+        chartInstance?.setOption(unref(getOptions));
+      }, 30);
+    });
+  }
+
+  function resize() {
+    chartInstance?.resize();
+  }
+
+  watch(
+    () => getDarkMode.value,
+    (theme) => {
+      if (chartInstance) {
+        chartInstance.dispose();
+        initCharts(theme as 'default');
+        setOptions(cacheOptions.value);
+      }
+    }
+  );
+
+  tryOnUnmounted(() => {
+    if (!chartInstance) return;
+    removeResizeFn();
+    chartInstance.dispose();
+    chartInstance = null;
+  });
+
+  function getInstance(): echarts.ECharts | null {
+    if (!chartInstance) {
+      initCharts(getDarkMode.value as 'default');
+    }
+    return chartInstance;
+  }
+
+  return {
+    setOptions,
+    resize,
+    echarts,
+    getInstance,
+  };
 }

src/hooks/web/usePermission.ts

@@ -1,52 +1,52 @@
-import { useUserStore } from '@/store/modules/user'
+import { useUserStore } from '@/store/modules/user';
 
 export function usePermission() {
-    const userStore = useUserStore();
+  const userStore = useUserStore();
 
-    /**
-     * 检查权限
-     * @param accesses
-     */
-    function _someRoles(accesses: string[]) {
-        return userStore.getRoles.some(item => {
-            const { value }: any = item
-            return accesses.includes(value)
-        })
+  /**
+   * 检查权限
+   * @param accesses
+   */
+  function _someRoles(accesses: string[]) {
+    return userStore.getRoles.some((item) => {
+      const { value }: any = item;
+      return accesses.includes(value);
+    });
+  }
+
+  /**
+   * 判断是否存在权限
+   * 可用于 v-if 显示逻辑
+   * */
+  function hasPermission(accesses: string[]): boolean {
+    if (!accesses || !accesses.length) return true;
+    return _someRoles(accesses);
+  }
+
+  /**
+   * 是否包含指定的所有权限
+   * @param accesses
+   */
+  function hasEveryPermission(accesses: string[]): boolean {
+    const rolesList = userStore.getRoles;
+    if (Array.isArray(accesses)) {
+      return accesses.every((access) => !!rolesList[access]);
     }
+    throw new Error(`[hasEveryPermission]: ${accesses} should be a array !`);
+  }
 
-    /**
-     * 判断是否存在权限
-     * 可用于 v-if 显示逻辑
-     * */
-    function hasPermission(accesses: string[]): boolean {
-        if (!accesses.length) return true
-        return _someRoles(accesses)
+  /**
+   * 是否包含其中某个权限
+   * @param accesses
+   * @param accessMap
+   */
+  function hasSomePermission(accesses: string[]): boolean {
+    const rolesList = userStore.getRoles;
+    if (Array.isArray(accesses)) {
+      return accesses.some((access) => !!rolesList[access]);
     }
+    throw new Error(`[hasSomePermission]: ${accesses} should be a array !`);
+  }
 
-    /**
-     * 是否包含指定的所有权限
-     * @param accesses
-     */
-    function hasEveryPermission(accesses: string[]): boolean {
-        const rolesList = userStore.getRoles
-        if (Array.isArray(accesses)) {
-            return accesses.every((access) => !!rolesList[access])
-        }
-        throw new Error(`[hasEveryPermission]: ${ accesses } should be a array !`)
-    }
-
-    /**
-     * 是否包含其中某个权限
-     * @param accesses
-     * @param accessMap
-     */
-    function hasSomePermission(accesses: string[]): boolean {
-        const rolesList = userStore.getRoles
-        if (Array.isArray(accesses)) {
-            return accesses.some((access) => !!rolesList[access])
-        }
-        throw new Error(`[hasSomePermission]: ${ accesses } should be a array !`)
-    }
-
-    return { hasPermission, hasEveryPermission, hasSomePermission };
+  return { hasPermission, hasEveryPermission, hasSomePermission };
 }

src/layout/components/Footer/index.ts

@@ -1,3 +1,3 @@
-import PageFooter from './index.vue'
+import PageFooter from './index.vue';
 
-export { PageFooter }
+export { PageFooter };

src/layout/components/Footer/index.vue

@@ -1,67 +1,56 @@
 <template>
   <div class="page-footer">
     <div class="page-footer-link">
-      <a href="https://github.com/jekip/naive-ui-admin" target="_blank">
-        官网
-      </a>
-      <a href="https://github.com/jekip/naive-ui-admin" target="_blank">
-        社区
-      </a>
-      <a href="https://github.com/jekip/naive-ui-admin/issues" target="_blank">
-        交流
-      </a>
-    </div>
-    <div class="copyright">
-      naive-ui-admin 1.3 · Made by Ah jung
+      <a href="https://github.com/jekip/naive-ui-admin" target="_blank"> 官网 </a>
+      <a href="https://github.com/jekip/naive-ui-admin" target="_blank"> 社区 </a>
+      <a href="https://github.com/jekip/naive-ui-admin/issues" target="_blank"> 交流 </a>
     </div>
+    <div class="copyright"> naive-ui-admin 1.4 · Made by Ah jung </div>
   </div>
-
 </template>
 
 <script>
-import { GithubOutlined, CopyrightOutlined } from '@vicons/antd'
-
-export default {
-  name: 'PageFooter',
-  components: { GithubOutlined, CopyrightOutlined },
-  props: {
-    collapsed: {
-      type: Boolean
-    }
-  }
-}
+  export default {
+    name: 'PageFooter',
+    components: {},
+    props: {
+      collapsed: {
+        type: Boolean,
+      },
+    },
+  };
 </script>
 
 <style lang="less" scoped>
-.page-footer {
-  margin: 48px 0 24px 0;
-  padding: 0 16px;
-  text-align: center;
+  .page-footer {
+    //margin: 28px 0 24px 0;
+    padding: 0 16px;
+    text-align: center;
 
-  a {
-    font-size: 14px;
-    color: #808695;
-    -webkit-transition: all .2s ease-in-out;
-    transition: all .2s ease-in-out;
+    a {
+      font-size: 14px;
+      color: #808695;
+      -webkit-transition: all 0.2s ease-in-out;
+      transition: all 0.2s ease-in-out;
 
-    &:hover {
-      color: #515a6e;
+      &:hover {
+        color: #515a6e;
+      }
+    }
+
+    &-link {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 8px;
+
+      a:not(:last-child) {
+        margin-right: 40px;
+      }
+    }
+
+    .copyright {
+      color: #808695;
+      font-size: 14px;
     }
   }
-
-  &-link {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 8px;
-
-    a:not(:last-child) {
-      margin-right: 40px;
-    }
-  }
-
-  .copyright {
-    color: #808695;
-    font-size: 14px;
-  }
-}
 </style>

src/layout/components/Header/ProjectSetting.vue

@@ -7,24 +7,35 @@
         <div class="drawer-setting-item justify-center dark-switch">
           <n-tooltip placement="bottom">
             <template #trigger>
-              <n-switch v-model:value="designStore.darkTheme"/>
+              <n-switch v-model:value="designStore.darkTheme" class="dark-theme-switch">
+                <template #checked>
+                  <n-icon size="14" color="#ffd93b">
+                    <SunnySharp />
+                  </n-icon>
+                </template>
+                <template #unchecked>
+                  <n-icon size="14" color="#ffd93b">
+                    <Moon />
+                  </n-icon>
+                </template>
+              </n-switch>
             </template>
             <span>深色主题</span>
           </n-tooltip>
-
         </div>
 
         <n-divider title-placement="center">系统主题</n-divider>
 
         <div class="drawer-setting-item align-items-top">
-          <span class="theme-item"
-                v-for="(item, index) in appThemeList"
-                :key="index"
-                :style="{'background-color':item}"
-                @click="togTheme(item)"
+          <span
+            class="theme-item"
+            v-for="(item, index) in appThemeList"
+            :key="index"
+            :style="{ 'background-color': item }"
+            @click="togTheme(item)"
           >
             <n-icon size="12" v-if="item === designStore.appTheme">
-              <CheckOutlined/>
+              <CheckOutlined />
             </n-icon>
           </span>
         </div>
@@ -35,46 +46,45 @@
           <div class="drawer-setting-item-style align-items-top">
             <n-tooltip placement="top">
               <template #trigger>
-                <img src="~@/assets/images/nav-theme-dark.svg" @click="togNavMode('vertical')"/>
+                <img src="~@/assets/images/nav-theme-dark.svg" @click="togNavMode('vertical')" />
               </template>
               <span>左侧菜单模式</span>
             </n-tooltip>
-            <n-badge dot color="#19be6b" v-show="settingStore.navMode === 'vertical'"/>
+            <n-badge dot color="#19be6b" v-show="settingStore.navMode === 'vertical'" />
           </div>
 
           <div class="drawer-setting-item-style">
             <n-tooltip placement="top">
               <template #trigger>
-                <img src="~@/assets/images/nav-horizontal.svg" @click="togNavMode('horizontal')"/>
+                <img src="~@/assets/images/nav-horizontal.svg" @click="togNavMode('horizontal')" />
               </template>
               <span>顶部菜单模式</span>
             </n-tooltip>
-            <n-badge dot color="#19be6b" v-show="settingStore.navMode === 'horizontal'"/>
+            <n-badge dot color="#19be6b" v-show="settingStore.navMode === 'horizontal'" />
           </div>
         </div>
 
-
         <n-divider title-placement="center">导航栏风格</n-divider>
 
         <div class="drawer-setting-item align-items-top">
           <div class="drawer-setting-item-style align-items-top">
             <n-tooltip placement="top">
               <template #trigger>
-                <img src="~@/assets/images/nav-theme-dark.svg" @click="togNavTheme('dark')"/>
+                <img src="~@/assets/images/nav-theme-dark.svg" @click="togNavTheme('dark')" />
               </template>
               <span>暗色侧边栏</span>
             </n-tooltip>
-            <n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'dark'"/>
+            <n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'dark'" />
           </div>
 
           <div class="drawer-setting-item-style">
             <n-tooltip placement="top">
               <template #trigger>
-                <img src="~@/assets/images/nav-theme-light.svg" @click="togNavTheme('light')"/>
+                <img src="~@/assets/images/nav-theme-light.svg" @click="togNavTheme('light')" />
               </template>
               <span>白色侧边栏</span>
             </n-tooltip>
-            <n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'light'"/>
+            <n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'light'" />
           </div>
         </div>
 
@@ -82,22 +92,23 @@
           <div class="drawer-setting-item-style">
             <n-tooltip placement="top">
               <template #trigger>
-                <img src="~@/assets/images/header-theme-dark.svg" @click="togNavTheme('header-dark')"/>
+                <img
+                  src="~@/assets/images/header-theme-dark.svg"
+                  @click="togNavTheme('header-dark')"
+                />
               </template>
               <span>暗色顶栏</span>
             </n-tooltip>
-            <n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'header-dark'"/>
+            <n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'header-dark'" />
           </div>
         </div>
 
         <n-divider title-placement="center">界面功能</n-divider>
 
         <div class="drawer-setting-item">
-          <div class="drawer-setting-item-title">
-            固定顶栏
-          </div>
+          <div class="drawer-setting-item-title"> 固定顶栏 </div>
           <div class="drawer-setting-item-action">
-            <n-switch v-model:value="settingStore.headerSetting.fixed"/>
+            <n-switch v-model:value="settingStore.headerSetting.fixed" />
           </div>
         </div>
 
@@ -111,214 +122,200 @@
         <!--        </div>-->
 
         <div class="drawer-setting-item">
-          <div class="drawer-setting-item-title">
-            固定多页签
-          </div>
+          <div class="drawer-setting-item-title"> 固定多页签 </div>
           <div class="drawer-setting-item-action">
-            <n-switch v-model:value="settingStore.multiTabsSetting.fixed"/>
+            <n-switch v-model:value="settingStore.multiTabsSetting.fixed" />
           </div>
         </div>
 
         <n-divider title-placement="center">界面显示</n-divider>
 
         <div class="drawer-setting-item">
-          <div class="drawer-setting-item-title">
-            显示重载页面按钮
-          </div>
+          <div class="drawer-setting-item-title"> 显示重载页面按钮 </div>
           <div class="drawer-setting-item-action">
-            <n-switch v-model:value="settingStore.headerSetting.isReload"/>
+            <n-switch v-model:value="settingStore.headerSetting.isReload" />
           </div>
         </div>
 
         <div class="drawer-setting-item">
-          <div class="drawer-setting-item-title">
-            显示面包屑导航
-          </div>
+          <div class="drawer-setting-item-title"> 显示面包屑导航 </div>
           <div class="drawer-setting-item-action">
-            <n-switch v-model:value="settingStore.crumbsSetting.show"/>
+            <n-switch v-model:value="settingStore.crumbsSetting.show" />
           </div>
         </div>
 
         <div class="drawer-setting-item">
-          <div class="drawer-setting-item-title">
-            显示面包屑显示图标
-          </div>
+          <div class="drawer-setting-item-title"> 显示面包屑显示图标 </div>
           <div class="drawer-setting-item-action">
-            <n-switch v-model:value="settingStore.crumbsSetting.showIcon"/>
+            <n-switch v-model:value="settingStore.crumbsSetting.showIcon" />
           </div>
         </div>
 
         <div class="drawer-setting-item">
-          <div class="drawer-setting-item-title">
-            显示多页签
-          </div>
+          <div class="drawer-setting-item-title"> 显示多页签 </div>
           <div class="drawer-setting-item-action">
-            <n-switch v-model:value="settingStore.multiTabsSetting.show"/>
+            <n-switch v-model:value="settingStore.multiTabsSetting.show" />
           </div>
         </div>
-
-        <div class="drawer-setting-item">
-          <div class="drawer-setting-item-title">
-            显示页脚
-          </div>
-          <div class="drawer-setting-item-action">
-            <n-switch v-model:value="settingStore.showFooter"/>
-          </div>
-        </div>
-
+        <!--1.15废弃，没啥用，占用操作空间-->
+        <!--        <div class="drawer-setting-item">-->
+        <!--          <div class="drawer-setting-item-title"> 显示页脚 </div>-->
+        <!--          <div class="drawer-setting-item-action">-->
+        <!--            <n-switch v-model:value="settingStore.showFooter" />-->
+        <!--          </div>-->
+        <!--        </div>-->
 
         <div class="drawer-setting-item">
           <n-alert type="warning" :showIcon="false">
             <p>{{ alertText }}</p>
           </n-alert>
         </div>
-
       </div>
     </n-drawer-content>
   </n-drawer>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, watch, createVNode, computed, unref } from 'vue'
-import { useProjectSettingStore } from "@/store/modules/projectSetting";
-import { useDesignSettingStore } from "@/store/modules/designSetting";
-import { CheckOutlined } from '@vicons/antd'
-import { darkTheme } from 'naive-ui'
+  import { defineComponent, reactive, toRefs, watch } from 'vue';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useDesignSettingStore } from '@/store/modules/designSetting';
+  import { CheckOutlined } from '@vicons/antd';
+  import { Moon, SunnySharp } from '@vicons/ionicons5';
+  import { darkTheme } from 'naive-ui';
 
-export default defineComponent({
-  name: 'ProjectSetting',
-  props: {
-    title: {
-      type: String,
-      default: '项目配置'
+  export default defineComponent({
+    name: 'ProjectSetting',
+    components: { CheckOutlined, Moon, SunnySharp },
+    props: {
+      title: {
+        type: String,
+        default: '项目配置',
+      },
+      width: {
+        type: Number,
+        default: 280,
+      },
     },
-    width: {
-      type: Number,
-      default: 280
-    },
-  },
-  components: { CheckOutlined },
-  setup(props, { emit }) {
-    const settingStore = useProjectSettingStore()
-    const designStore = useDesignSettingStore()
-    const { width, title } = props
-    const state = reactive({
-      width,
-      title,
-      isDrawer: false,
-      placement: "right",
-      alertText: '该功能主要实时预览各种布局效果，更多完整配置在 projectSetting.ts 中设置，建议在生产环境关闭该布局预览功能。',
-      appThemeList: designStore.appThemeList
-    })
+    setup(props) {
+      const settingStore = useProjectSettingStore();
+      const designStore = useDesignSettingStore();
+      const state = reactive({
+        width: props.width,
+        title: props.title,
+        isDrawer: false,
+        placement: 'right',
+        alertText:
+          '该功能主要实时预览各种布局效果，更多完整配置在 projectSetting.ts 中设置，建议在生产环境关闭该布局预览功能。',
+        appThemeList: designStore.appThemeList,
+      });
 
-    watch(
+      watch(
         () => designStore.darkTheme,
         (to) => {
-          settingStore.navTheme = to ? 'header-dark' : 'dark'
+          settingStore.navTheme = to ? 'header-dark' : 'dark';
         }
-    )
+      );
 
-    function openDrawer(isDrawer) {
-      state.isDrawer = true
-    }
-
-    function closeDrawer() {
-      state.isDrawer = false
-    }
-
-    function togNavTheme(theme) {
-      settingStore.navTheme = theme
-      if (settingStore.navMode === 'horizontal' && theme === 'light') {
-        designStore.navTheme = 'dark'
+      function openDrawer() {
+        state.isDrawer = true;
       }
-    }
 
-    function togTheme(color) {
-      designStore.appTheme = color
-    }
-
-    function togNavMode(mode) {
-      settingStore.navMode = mode
-      if (mode === 'horizontal') {
-        settingStore.setNavTheme('light')
-      } else {
-        settingStore.setNavTheme('dark')
+      function closeDrawer() {
+        state.isDrawer = false;
       }
-    }
 
-    return {
-      ...toRefs(state),
-      settingStore,
-      designStore,
-      togNavTheme,
-      togNavMode,
-      togTheme,
-      darkTheme,
-      openDrawer,
-      closeDrawer,
-    }
-  }
-})
+      function togNavTheme(theme) {
+        settingStore.navTheme = theme;
+        if (settingStore.navMode === 'horizontal' && theme === 'light') {
+          settingStore.navTheme = 'dark';
+        }
+      }
+
+      function togTheme(color) {
+        designStore.appTheme = color;
+      }
+
+      function togNavMode(mode) {
+        settingStore.navMode = mode;
+        if (mode === 'horizontal') {
+          settingStore.setNavTheme('light');
+        } else {
+          settingStore.setNavTheme('dark');
+        }
+      }
+
+      return {
+        ...toRefs(state),
+        settingStore,
+        designStore,
+        togNavTheme,
+        togNavMode,
+        togTheme,
+        darkTheme,
+        openDrawer,
+        closeDrawer,
+      };
+    },
+  });
 </script>
 
 <style lang="less" scoped>
-.drawer {
-  .n-divider:not(.n-divider--vertical) {
-    margin: 10px 0;
-  }
-
-  &-setting-item {
-    display: flex;
-    align-items: center;
-    padding: 12px 0;
-    flex-wrap: wrap;
-
-    &-style {
-      display: inline-block;
-      position: relative;
-      margin-right: 16px;
-      cursor: pointer;
-      text-align: center;
+  .drawer {
+    .n-divider:not(.n-divider--vertical) {
+      margin: 10px 0;
     }
 
-    &-title {
-      flex: 1 1;
-      font-size: 14px;
+    &-setting-item {
+      display: flex;
+      align-items: center;
+      padding: 12px 0;
+      flex-wrap: wrap;
+
+      &-style {
+        display: inline-block;
+        position: relative;
+        margin-right: 16px;
+        cursor: pointer;
+        text-align: center;
+      }
+
+      &-title {
+        flex: 1 1;
+        font-size: 14px;
+      }
+
+      &-action {
+        flex: 0 0 auto;
+      }
+
+      .theme-item {
+        width: 20px;
+        min-width: 20px;
+        height: 20px;
+        cursor: pointer;
+        border: 1px solid #eee;
+        border-radius: 2px;
+        margin: 0 5px 5px 0;
+        text-align: center;
+
+        .n-icon {
+          color: #fff;
+        }
+      }
     }
 
-    &-action {
-      flex: 0 0 auto;
+    .align-items-top {
+      align-items: flex-start;
+      padding: 2px 0;
     }
 
-    .theme-item {
-      width: 20px;
-      min-width: 20px;
-      height: 20px;
-      cursor: pointer;
-      border: 1px solid #eee;
-      border-radius: 2px;
-      margin: 0 5px 5px 0;
-      text-align: center;
-
-      .n-icon {
-        color: #fff
+    .justify-center {
+      justify-content: center;
+    }
+    .dark-switch .n-switch {
+      ::v-deep(.n-switch__rail) {
+        background-color: #000e1c;
       }
     }
   }
-
-  .align-items-top {
-    align-items: flex-start;
-    padding: 2px 0;
-  }
-
-  .justify-center {
-    justify-content: center;
-  }
-
-  .dark-switch .n-switch--active {
-    ::v-deep(.n-switch__rail) {
-      background-color: #000e1c;
-    }
-  }
-}
 </style>

src/layout/components/Header/components.ts

@@ -1,31 +1,31 @@
 import {
-    SettingOutlined,
-    SearchOutlined,
-    MenuFoldOutlined,
-    MenuUnfoldOutlined,
-    FullscreenOutlined,
-    FullscreenExitOutlined,
-    PoweroffOutlined,
-    GithubOutlined,
-    LockOutlined,
-    ReloadOutlined,
-    LogoutOutlined,
-    UserOutlined,
-    CheckOutlined
-} from '@vicons/antd'
+  SettingOutlined,
+  SearchOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  FullscreenOutlined,
+  FullscreenExitOutlined,
+  PoweroffOutlined,
+  GithubOutlined,
+  LockOutlined,
+  ReloadOutlined,
+  LogoutOutlined,
+  UserOutlined,
+  CheckOutlined,
+} from '@vicons/antd';
 
 export default {
-    SettingOutlined,
-    LockOutlined,
-    GithubOutlined,
-    SearchOutlined,
-    MenuFoldOutlined,
-    MenuUnfoldOutlined,
-    FullscreenOutlined,
-    FullscreenExitOutlined,
-    PoweroffOutlined,
-    ReloadOutlined,
-    LogoutOutlined,
-    UserOutlined,
-    CheckOutlined
-}
+  SettingOutlined,
+  LockOutlined,
+  GithubOutlined,
+  SearchOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  FullscreenOutlined,
+  FullscreenExitOutlined,
+  PoweroffOutlined,
+  ReloadOutlined,
+  LogoutOutlined,
+  UserOutlined,
+  CheckOutlined,
+};

src/layout/components/Header/index.ts

@@ -1,3 +1,3 @@
-import PageHeader from './index.vue'
+import PageHeader from './index.vue';
 
-export { PageHeader }
+export { PageHeader };

src/layout/components/Header/index.vue

@@ -1,26 +1,31 @@
 <template>
-  <div class="layout-header" :class="{'layout-header-light':!(navTheme == 'header-dark')}">
+  <div class="layout-header" :class="{ 'layout-header-light': !(navTheme == 'header-dark') }">
     <!--顶部菜单-->
-    <div class="layout-header-left" v-if="navMode==='horizontal'">
-      <AsideMenu v-model:collapsed="collapsed" mode="horizontal" class="n-menu-horizontal-light"/>
+    <div class="layout-header-left" v-if="navMode === 'horizontal'">
+      <AsideMenu v-model:collapsed="collapsed" mode="horizontal" class="n-menu-horizontal-light" />
     </div>
     <!--左侧菜单-->
     <div class="layout-header-left" v-else>
       <!-- 菜单收起 -->
-      <div class="ml-1 layout-header-trigger layout-header-trigger-min"
-           @click="() => $emit('update:collapsed', !collapsed)">
+      <div
+        class="ml-1 layout-header-trigger layout-header-trigger-min"
+        @click="() => $emit('update:collapsed', !collapsed)"
+      >
         <n-icon size="18" v-if="collapsed">
-          <MenuUnfoldOutlined/>
+          <MenuUnfoldOutlined />
         </n-icon>
         <n-icon size="18" v-else>
-          <MenuFoldOutlined/>
+          <MenuFoldOutlined />
         </n-icon>
       </div>
       <!-- 刷新 -->
-      <div class="mr-1 layout-header-trigger layout-header-trigger-min" v-if="headerSetting.isReload"
-           @click="reloadPage">
+      <div
+        class="mr-1 layout-header-trigger layout-header-trigger-min"
+        v-if="headerSetting.isReload"
+        @click="reloadPage"
+      >
         <n-icon size="18">
-          <ReloadOutlined/>
+          <ReloadOutlined />
         </n-icon>
       </div>
       <!-- 面包屑 -->
@@ -28,29 +33,39 @@
         <template v-for="routeItem in breadcrumbList" :key="routeItem.name">
           <n-breadcrumb-item>
             <n-dropdown
-                v-if="routeItem.children.length"
-                :options="routeItem.children"
-                @select="dropdownSelect"
+              v-if="routeItem.children.length"
+              :options="routeItem.children"
+              @select="dropdownSelect"
             >
-                <span class="link-text">
-                  <component v-if="crumbsSetting.showIcon && routeItem.meta.icon" :is="routeItem.meta.icon"></component>
-                  {{ routeItem.meta.title }}
-                </span>
-            </n-dropdown>
-            <span class="link-text" v-else>
-                <component v-if="crumbsSetting.showIcon && routeItem.meta.icon" :is="routeItem.meta.icon"></component>
+              <span class="link-text">
+                <component
+                  v-if="crumbsSetting.showIcon && routeItem.meta.icon"
+                  :is="routeItem.meta.icon"
+                />
                 {{ routeItem.meta.title }}
               </span>
+            </n-dropdown>
+            <span class="link-text" v-else>
+              <component
+                v-if="crumbsSetting.showIcon && routeItem.meta.icon"
+                :is="routeItem.meta.icon"
+              />
+              {{ routeItem.meta.title }}
+            </span>
           </n-breadcrumb-item>
         </template>
       </n-breadcrumb>
     </div>
     <div class="layout-header-right">
-      <div class="layout-header-trigger layout-header-trigger-min" v-for="item in iconList" :key="item.icon.name">
+      <div
+        class="layout-header-trigger layout-header-trigger-min"
+        v-for="item in iconList"
+        :key="item.icon.name"
+      >
         <n-tooltip placement="bottom">
           <template #trigger>
             <n-icon size="18">
-              <component :is="item.icon" v-on="item.eventObject || {}"/>
+              <component :is="item.icon" v-on="item.eventObject || {}" />
             </n-icon>
           </template>
           <span>{{ item.tips }}</span>
@@ -61,7 +76,7 @@
         <n-tooltip placement="bottom">
           <template #trigger>
             <n-icon size="18">
-              <component :is="fullscreenIcon" @click="toggleFullScreen"/>
+              <component :is="fullscreenIcon" @click="toggleFullScreen" />
             </n-icon>
           </template>
           <span>全屏</span>
@@ -71,10 +86,10 @@
       <div class="layout-header-trigger layout-header-trigger-min">
         <n-dropdown trigger="hover" @select="avatarSelect" :options="avatarOptions">
           <div class="avatar">
-            <n-avatar>
+            <n-avatar round>
               {{ username }}
               <template #icon>
-                <UserOutlined/>
+                <UserOutlined />
               </template>
             </n-avatar>
           </div>
@@ -85,7 +100,7 @@
         <n-tooltip placement="bottom-end">
           <template #trigger>
             <n-icon size="18" style="font-weight: bold">
-              <SettingOutlined/>
+              <SettingOutlined />
             </n-icon>
           </template>
           <span>项目配置</span>
@@ -94,330 +109,322 @@
     </div>
   </div>
   <!--项目配置-->
-  <ProjectSetting ref="drawerSetting"/>
+  <ProjectSetting ref="drawerSetting" />
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, ref, computed, unref } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import components from './components'
-import { NDialogProvider, useDialog, useMessage, useNotification } from 'naive-ui'
-import { TABS_ROUTES } from '@/store/mutation-types'
-import { useUserStore } from '@/store/modules/user'
-import { useLockscreenStore } from '@/store/modules/lockscreen'
-import ProjectSetting from './ProjectSetting.vue'
-import { AsideMenu } from '@/layout/components/Menu'
-import { useProjectSetting } from "@/hooks/setting/useProjectSetting";
+  import { defineComponent, reactive, toRefs, ref, computed, unref } from 'vue';
+  import { useRouter, useRoute } from 'vue-router';
+  import components from './components';
+  import { NDialogProvider, useDialog, useMessage } from 'naive-ui';
+  import { TABS_ROUTES } from '@/store/mutation-types';
+  import { useUserStore } from '@/store/modules/user';
+  import { useLockscreenStore } from '@/store/modules/lockscreen';
+  import ProjectSetting from './ProjectSetting.vue';
+  import { AsideMenu } from '@/layout/components/Menu';
+  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
 
-export default defineComponent({
-  name: 'PageHeader',
-  components: { ...components, NDialogProvider, ProjectSetting, AsideMenu },
-  props: {
-    collapsed: {
-      type: Boolean
-    }
-  },
-  setup(props) {
-    const userStore = useUserStore()
-    const useLockscreen = useLockscreenStore()
-    const message = useMessage()
-    const notification = useNotification()
-    const dialog = useDialog()
-    const {
-      getNavMode,
-      getNavTheme,
-      getHeaderSetting,
-      getMenuSetting,
-      getCrumbsSetting
-    } = useProjectSetting()
+  export default defineComponent({
+    name: 'PageHeader',
+    components: { ...components, NDialogProvider, ProjectSetting, AsideMenu },
+    props: {
+      collapsed: {
+        type: Boolean,
+      },
+    },
+    setup(props) {
+      const userStore = useUserStore();
+      const useLockscreen = useLockscreenStore();
+      const message = useMessage();
+      const dialog = useDialog();
+      const { getNavMode, getNavTheme, getHeaderSetting, getMenuSetting, getCrumbsSetting } =
+        useProjectSetting();
 
-    const { username } = userStore?.info || {}
+      const { username } = userStore?.info || {};
 
-    const drawerSetting = ref()
+      const drawerSetting = ref();
 
-    const state = reactive({
-      username: username || '',
-      fullscreenIcon: 'FullscreenOutlined',
-      navMode: getNavMode,
-      navTheme: getNavTheme,
-      headerSetting: getHeaderSetting,
-      crumbsSetting: getCrumbsSetting,
-    })
+      const state = reactive({
+        username: username || '',
+        fullscreenIcon: 'FullscreenOutlined',
+        navMode: getNavMode,
+        navTheme: getNavTheme,
+        headerSetting: getHeaderSetting,
+        crumbsSetting: getCrumbsSetting,
+      });
 
-    const getChangeStyle = computed(() => {
-      const { collapsed } = props
-      const { minMenuWidth, menuWidth }: any = unref(getMenuSetting)
-      return {
-        'left': collapsed ? `${ minMenuWidth }px` : `${ menuWidth }px`,
-        'width': `calc(100% - ${ collapsed ? `${ minMenuWidth }px` : `${ menuWidth }px` })`
-      }
-    })
+      const getChangeStyle = computed(() => {
+        const { collapsed } = props;
+        const { minMenuWidth, menuWidth }: any = unref(getMenuSetting);
+        return {
+          left: collapsed ? `${minMenuWidth}px` : `${menuWidth}px`,
+          width: `calc(100% - ${collapsed ? `${minMenuWidth}px` : `${menuWidth}px`})`,
+        };
+      });
 
-    const router = useRouter()
-    const route = useRoute()
+      const router = useRouter();
+      const route = useRoute();
 
-    const generator: any = (routerMap, parent) => {
-      return routerMap.map((item, key) => {
-        const currentMenu = {
-          ...item,
-          label: item.meta.title,
-          key: item.name,
-          disabled: item.path === '/',
-        }
-        // 是否有子菜单，并递归处理
-        if (item.children && item.children.length > 0) {
-          // Recursion
-          currentMenu.children = generator(item.children, currentMenu)
-        }
-        return currentMenu
-      })
-    }
+      const generator: any = (routerMap) => {
+        return routerMap.map((item) => {
+          const currentMenu = {
+            ...item,
+            label: item.meta.title,
+            key: item.name,
+            disabled: item.path === '/',
+          };
+          // 是否有子菜单，并递归处理
+          if (item.children && item.children.length > 0) {
+            // Recursion
+            currentMenu.children = generator(item.children, currentMenu);
+          }
+          return currentMenu;
+        });
+      };
 
-    const breadcrumbList = computed(() => {
-      return generator(route.matched)
-    })
+      const breadcrumbList = computed(() => {
+        return generator(route.matched);
+      });
 
-    const dropdownSelect = (key) => {
-      router.push({ name: key })
-    }
+      const dropdownSelect = (key) => {
+        router.push({ name: key });
+      };
 
-    // 刷新页面
-    const reloadPage = () => {
-      router.push({
-        path: '/redirect' + unref(route).fullPath
-      })
-    }
+      // 刷新页面
+      const reloadPage = () => {
+        router.push({
+          path: '/redirect' + unref(route).fullPath,
+        });
+      };
 
-    // 退出登录
-    const doLogout = () => {
-      dialog.info({
-        title: '提示',
-        content: '您确定要退出登录吗',
-        positiveText: '确定',
-        negativeText: '取消',
-        onPositiveClick: () => {
-          userStore.logout().then((res) => {
-            message.success('成功退出登录')
-            // 移除标签页
-            localStorage.removeItem(TABS_ROUTES)
-            router
+      // 退出登录
+      const doLogout = () => {
+        dialog.info({
+          title: '提示',
+          content: '您确定要退出登录吗',
+          positiveText: '确定',
+          negativeText: '取消',
+          onPositiveClick: () => {
+            userStore.logout().then(() => {
+              message.success('成功退出登录');
+              // 移除标签页
+              localStorage.removeItem(TABS_ROUTES);
+              router
                 .replace({
                   name: 'Login',
                   query: {
-                    redirect: route.fullPath
-                  }
+                    redirect: route.fullPath,
+                  },
                 })
-                .finally(() => location.reload())
-          })
-        },
-        onNegativeClick: () => {
+                .finally(() => location.reload());
+            });
+          },
+          onNegativeClick: () => {},
+        });
+      };
 
-        }
-      })
-    }
-
-    // 切换全屏图标
-    const toggleFullscreenIcon = () =>
+      // 切换全屏图标
+      const toggleFullscreenIcon = () =>
         (state.fullscreenIcon =
-            document.fullscreenElement !== null ? 'FullscreenExitOutlined' : 'FullscreenOutlined')
+          document.fullscreenElement !== null ? 'FullscreenExitOutlined' : 'FullscreenOutlined');
 
-    // 监听全屏切换事件
-    document.addEventListener('fullscreenchange', toggleFullscreenIcon)
+      // 监听全屏切换事件
+      document.addEventListener('fullscreenchange', toggleFullscreenIcon);
 
-    // 全屏切换
-    const toggleFullScreen = () => {
-      if (!document.fullscreenElement) {
-        document.documentElement.requestFullscreen()
-      } else {
-        if (document.exitFullscreen) {
-          document.exitFullscreen()
+      // 全屏切换
+      const toggleFullScreen = () => {
+        if (!document.fullscreenElement) {
+          document.documentElement.requestFullscreen();
+        } else {
+          if (document.exitFullscreen) {
+            document.exitFullscreen();
+          }
         }
-      }
-    }
+      };
 
-    // 图标列表
-    const iconList = [
-      {
-        icon: 'SearchOutlined',
-        tips: '搜索'
-      },
-      {
-        icon: 'GithubOutlined',
-        tips: 'github',
-        eventObject: {
-          click: () => window.open('https://github.com/jekip/naive-ui-admin')
-        }
-      },
-      {
-        icon: 'LockOutlined',
-        tips: '锁屏',
-        eventObject: {
-          click: () => useLockscreen.setLock(true)
+      // 图标列表
+      const iconList = [
+        {
+          icon: 'SearchOutlined',
+          tips: '搜索',
+        },
+        {
+          icon: 'GithubOutlined',
+          tips: 'github',
+          eventObject: {
+            click: () => window.open('https://github.com/jekip/naive-ui-admin'),
+          },
+        },
+        {
+          icon: 'LockOutlined',
+          tips: '锁屏',
+          eventObject: {
+            click: () => useLockscreen.setLock(true),
+          },
+        },
+      ];
+      const avatarOptions = [
+        {
+          label: '个人设置',
+          key: 1,
+        },
+        {
+          label: '退出登录',
+          key: 2,
+        },
+      ];
+
+      //头像下拉菜单
+      const avatarSelect = (key) => {
+        switch (key) {
+          case 1:
+            router.push({ name: 'Setting' });
+            break;
+          case 2:
+            doLogout();
+            break;
         }
+      };
+
+      function openSetting() {
+        const { openDrawer } = drawerSetting.value;
+        openDrawer();
       }
-    ]
-    const avatarOptions = [
-      {
-        label: '个人设置',
-        key: 1
-      },
-      {
-        label: '退出登录',
-        key: 2
-      },
-    ]
 
-    //头像下拉菜单
-    const avatarSelect = (key) => {
-      switch (key) {
-        case 1:
-          router.push({ name: 'Setting' })
-          break;
-        case 2:
-          doLogout()
-          break;
-      }
-    }
-
-    function openSetting() {
-      const { openDrawer } = drawerSetting.value
-      openDrawer()
-    }
-
-    return {
-      ...toRefs(state),
-      iconList,
-      toggleFullScreen,
-      doLogout,
-      route,
-      dropdownSelect,
-      avatarOptions,
-      getChangeStyle,
-      avatarSelect,
-      breadcrumbList,
-      reloadPage,
-      drawerSetting,
-      openSetting,
-    }
-  }
-})
+      return {
+        ...toRefs(state),
+        iconList,
+        toggleFullScreen,
+        doLogout,
+        route,
+        dropdownSelect,
+        avatarOptions,
+        getChangeStyle,
+        avatarSelect,
+        breadcrumbList,
+        reloadPage,
+        drawerSetting,
+        openSetting,
+      };
+    },
+  });
 </script>
 
 <style lang="less" scoped>
-.layout-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0;
-  height: @header-height;
-  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
-  transition: all .2s ease-in-out;
-  width: 100%;
-  z-index: 11;
-  //color: #fff;
-
-  //.n-icon {
-  //  color: #fff
-  //}
-
-  &-left {
+  .layout-header {
     display: flex;
+    justify-content: space-between;
     align-items: center;
+    padding: 0;
+    height: @header-height;
+    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+    transition: all 0.2s ease-in-out;
+    width: 100%;
+    z-index: 11;
+    //color: #fff;
 
-    ::v-deep(.ant-breadcrumb span:last-child .link-text) {
-      color: #515a6e;
-    }
+    //.n-icon {
+    //  color: #fff
+    //}
 
-    ::v-deep(.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link) {
-      color: #fff;
-    }
-
-    .n-breadcrumb {
-      display: inline-block;
-    }
-  }
-
-  &-right {
-    display: flex;
-    align-items: center;
-    margin-right: 20px;
-
-    .avatar {
+    &-left {
       display: flex;
       align-items: center;
-      height: 64px;
+
+      ::v-deep(.ant-breadcrumb span:last-child .link-text) {
+        color: #515a6e;
+      }
+
+      ::v-deep(.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link) {
+        color: #fff;
+      }
+
+      .n-breadcrumb {
+        display: inline-block;
+      }
     }
 
-    > * {
+    &-right {
+      display: flex;
+      align-items: center;
+      margin-right: 20px;
+
+      .avatar {
+        display: flex;
+        align-items: center;
+        height: 64px;
+      }
+
+      > * {
+        cursor: pointer;
+      }
+    }
+
+    &-trigger {
+      display: inline-block;
+      width: 64px;
+      height: 64px;
+      text-align: center;
       cursor: pointer;
+      transition: all 0.2s ease-in-out;
+
+      .n-icon {
+        display: flex;
+        align-items: center;
+        height: 64px;
+        line-height: 64px;
+      }
+
+      &:hover {
+        background: hsla(0, 0%, 100%, 0.08);
+      }
+
+      .anticon {
+        font-size: 16px;
+        color: #515a6e;
+      }
+    }
+
+    &-trigger-min {
+      width: auto;
+      padding: 0 12px;
     }
   }
 
-  &-trigger {
-    display: inline-block;
-    width: 64px;
-    height: 64px;
-    text-align: center;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
+  .layout-header-light {
+    background: #fff;
+    color: #515a6e;
 
     .n-icon {
-      display: flex;
-      align-items: center;
-      height: 64px;
-      line-height: 64px;
-    }
-
-    &:hover {
-      background: hsla(0, 0%, 100%, .08);
-    }
-
-    .anticon {
-      font-size: 16px;
       color: #515a6e;
     }
-  }
 
-  &-trigger-min {
-    width: auto;
-    padding: 0 12px;
-  }
-}
+    .layout-header-left {
+      ::v-deep(.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link) {
+        color: #515a6e;
+      }
+    }
 
-.layout-header-light {
-  background: #fff;
-  color: #515a6e;
-
-  .n-icon {
-    color: #515a6e
-  }
-
-  .layout-header-left {
-    ::v-deep(.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link) {
-      color: #515a6e;
+    .layout-header-trigger {
+      &:hover {
+        background: #f8f8f9;
+      }
     }
   }
 
-  .layout-header-trigger {
-    &:hover {
-      background: #f8f8f9;
-    }
+  .layout-header-fix {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 200px;
+    z-index: 11;
   }
-}
 
-.layout-header-fix {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 200px;
-  z-index: 11;
-}
-
-//::v-deep(.menu-router-link) {
-//  color: #515a6e;
-//
-//  &:hover {
-//    color: #1890ff;
-//  }
-//}
+  //::v-deep(.menu-router-link) {
+  //  color: #515a6e;
+  //
+  //  &:hover {
+  //    color: #1890ff;
+  //  }
+  //}
 </style>

src/layout/components/Logo/index.ts

@@ -1,3 +1,3 @@
-import Logo from './index.vue'
+import Logo from './index.vue';
 
-export { Logo }
+export { Logo };

src/layout/components/Logo/index.vue

@@ -1,39 +1,39 @@
 <template>
   <div class="logo">
-    <img src="~@/assets/images/logo.png" alt=""/>
+    <img src="~@/assets/images/logo.png" alt="" />
     <h2 v-show="!collapsed" class="title">&nbsp;NaiveUiAdmin</h2>
   </div>
 </template>
 
 <script>
-export default {
-  name: 'Index',
-  props: {
-    collapsed: {
-      type: Boolean
-    }
-  }
-}
+  export default {
+    name: 'Index',
+    props: {
+      collapsed: {
+        type: Boolean,
+      },
+    },
+  };
 </script>
 
 <style lang="less" scoped>
-.logo {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 64px;
-  line-height: 64px;
-  overflow: hidden;
-  white-space: nowrap;
+  .logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 64px;
+    line-height: 64px;
+    overflow: hidden;
+    white-space: nowrap;
 
-  img {
-    width: auto;
-    height: 32px;
-  }
+    img {
+      width: auto;
+      height: 32px;
+    }
 
-  .title {
-    color: white;
-    margin-bottom: 0;
+    .title {
+      color: white;
+      margin-bottom: 0;
+    }
   }
-}
 </style>

src/layout/components/Main/index.ts

@@ -1,3 +1,3 @@
-import MainView from './index.vue'
+import MainView from './index.vue';
 
-export { MainView }
+export { MainView };

src/layout/components/Main/index.vue

@@ -3,41 +3,40 @@
     <template #default="{ Component, route }">
       <transition name="zoom-fade" mode="out-in" appear>
         <keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
-          <component :is="Component" :key="route.fullPath"/>
+          <component :is="Component" :key="route.fullPath" />
         </keep-alive>
-        <component v-else :is="Component" :key="route.fullPath"/>
+        <component v-else :is="Component" :key="route.fullPath" />
       </transition>
     </template>
   </RouterView>
 </template>
 
 <script>
-import { defineComponent, computed } from 'vue'
-import { useAsyncRouteStore } from '@/store/modules/asyncRoute'
+  import { defineComponent, computed } from 'vue';
+  import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
 
-export default defineComponent({
-  name: 'MainView',
-  components: {},
-  props: {
-    notNeedKey: {
-      type: Boolean,
-      default: false
+  export default defineComponent({
+    name: 'MainView',
+    components: {},
+    props: {
+      notNeedKey: {
+        type: Boolean,
+        default: false,
+      },
+      animate: {
+        type: Boolean,
+        default: true,
+      },
     },
-    animate: {
-      type: Boolean,
-      default: true
-    }
-  },
-  setup() {
-    const asyncRouteStore = useAsyncRouteStore()
-    // 需要缓存的路由组件
-    const keepAliveComponents = computed(() => asyncRouteStore.keepAliveComponents)
-    return {
-      keepAliveComponents
-    }
-  }
-})
+    setup() {
+      const asyncRouteStore = useAsyncRouteStore();
+      // 需要缓存的路由组件
+      const keepAliveComponents = computed(() => asyncRouteStore.keepAliveComponents);
+      return {
+        keepAliveComponents,
+      };
+    },
+  });
 </script>
 
-<style lang="less" scoped>
-</style>
+<style lang="less" scoped></style>

src/layout/components/Menu/index.ts

@@ -1,3 +1,3 @@
-import AsideMenu from './index.vue'
+import AsideMenu from './index.vue';
 
-export { AsideMenu }
+export { AsideMenu };

src/layout/components/Menu/index.vue

@@ -1,111 +1,120 @@
 <template>
   <NMenu
-      :options="menus"
-      :inverted="inverted"
-      :mode="mode"
-      :collapsed="collapsed"
-      :collapsed-width="64"
-      :collapsed-icon-size="20"
-      :expanded-keys="openKeys"
-      v-model:value="selectedKeys"
-      @update:value="clickMenuItem"
-      @update:expanded-keys="menuExpanded"
-  >
-  </NMenu>
+    :options="menus"
+    :inverted="inverted"
+    :mode="mode"
+    :collapsed="collapsed"
+    :collapsed-width="64"
+    :collapsed-icon-size="20"
+    :indent="28"
+    :expanded-keys="openKeys"
+    v-model:value="selectedKeys"
+    @update:value="clickMenuItem"
+    @update:expanded-keys="menuExpanded"
+  />
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, computed, watch, toRefs, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useAsyncRouteStore } from '@/store/modules/asyncRoute'
-import { generatorMenu } from '@/utils/index'
-import { useProjectSettingStore } from "@/store/modules/projectSetting";
+  import { defineComponent, reactive, computed, watch, toRefs, unref } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
+  import { generatorMenu } from '@/utils/index';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
 
-export default defineComponent({
-  name: 'Menu',
-  components: {},
-  props: {
-    mode: {
-      // 菜单模式
-      type: String,
-      default: 'vertical'
+  export default defineComponent({
+    name: 'Menu',
+    components: {},
+    props: {
+      mode: {
+        // 菜单模式
+        type: String,
+        default: 'vertical',
+      },
+      collapsed: {
+        // 侧边栏菜单是否收起
+        type: Boolean,
+      },
     },
-    collapsed: {
-      // 侧边栏菜单是否收起
-      type: Boolean
-    }
-  },
-  setup(props) {
-    // 当前路由
-    const currentRoute = useRoute()
-    const router = useRouter()
-    const asyncRouteStore = useAsyncRouteStore()
-    const settingStore = useProjectSettingStore()
-    const { mode } = props
+    setup(props) {
+      // 当前路由
+      const currentRoute = useRoute();
+      const router = useRouter();
+      const asyncRouteStore = useAsyncRouteStore();
+      const settingStore = useProjectSettingStore();
 
-    // 获取当前打开的子菜单
-    const matched = currentRoute.matched
+      // 获取当前打开的子菜单
+      const matched = currentRoute.matched;
 
-    const getOpenKeys = matched && matched.length ? [matched[0]?.name] : []
+      const getOpenKeys = matched && matched.length ? matched.map((item) => item.name) : [];
 
-    const state = reactive({
-      openKeys: getOpenKeys,
-      selectedKeys: currentRoute.name,
-    })
+      const state = reactive({
+        openKeys: getOpenKeys,
+        selectedKeys: currentRoute.name,
+      });
 
-    const inverted = computed(() => {
-      return ['dark', 'header-dark'].includes(settingStore.navTheme)
-    })
+      const inverted = computed(() => {
+        return ['dark', 'header-dark'].includes(settingStore.navTheme);
+      });
 
-    const menus = computed(() => {
-      return generatorMenu(asyncRouteStore.getMenus)
-    })
+      const menus = computed(() => {
+        return generatorMenu(asyncRouteStore.getMenus);
+      });
 
-    // 监听菜单收缩状态
-    watch(
+      // 监听菜单收缩状态
+      watch(
         () => props.collapsed,
         (newVal) => {
-          state.openKeys = newVal ? [] : getOpenKeys
-          state.selectedKeys = currentRoute.name
+          state.openKeys = newVal ? [] : getOpenKeys;
+          state.selectedKeys = currentRoute.name;
         }
-    )
+      );
 
-    // 跟随页面路由变化，切换菜单选中状态
-    watch(
+      // 跟随页面路由变化，切换菜单选中状态
+      watch(
         () => currentRoute.fullPath,
         () => {
-          const matched = currentRoute.matched
-          const getOpenKeys = matched && matched.length ? [matched[0]?.name] : []
-          state.openKeys = getOpenKeys
-          state.selectedKeys = currentRoute.name
+          const matched = currentRoute.matched;
+          state.openKeys = matched.map((item) => item.name);
+          state.selectedKeys = currentRoute.name;
         }
-    )
+      );
 
-    // 点击菜单
-    function clickMenuItem(key: string) {
-      if (/http(s)?:/.test(key)) {
-        window.open(key)
-      } else {
-        router.push({ name: key })
+      // 点击菜单
+      function clickMenuItem(key: string) {
+        if (/http(s)?:/.test(key)) {
+          window.open(key);
+        } else {
+          router.push({ name: key });
+        }
       }
-    }
 
-    //展开菜单
-    function menuExpanded(openKeys: string[]) {
-      console.log(openKeys)
-      if (!openKeys) return
-      const latestOpenKey = openKeys.pop();
-      state.openKeys = latestOpenKey ? [latestOpenKey] : []
-    }
+      //展开菜单
+      function menuExpanded(openKeys: string[]) {
+        if (!openKeys) return;
+        const latestOpenKey = openKeys.find((key) => state.openKeys.indexOf(key) === -1);
+        const isExistChildren = findChildrenLen(latestOpenKey as string);
+        state.openKeys = isExistChildren ? (latestOpenKey ? [latestOpenKey] : []) : openKeys;
+      }
 
-    return {
-      ...toRefs(state),
-      inverted,
-      menus,
-      mode,
-      clickMenuItem,
-      menuExpanded
-    }
-  }
-})
+      //查找是否存在子路由
+      function findChildrenLen(key: string) {
+        if (!key) return false;
+        const subRouteChildren: string[] = [];
+        for (const { children, key } of unref(menus)) {
+          if (children && children.length > 0) {
+            subRouteChildren.push(key as string);
+          }
+        }
+        return subRouteChildren.includes(key);
+      }
+
+      return {
+        ...toRefs(state),
+        inverted,
+        menus,
+        clickMenuItem,
+        menuExpanded,
+      };
+    },
+  });
 </script>

src/layout/components/TagsView/components.ts

@@ -1,24 +1,24 @@
 import {
-    DownOutlined,
-    ReloadOutlined,
-    CloseOutlined,
-    VerticalRightOutlined,
-    VerticalLeftOutlined,
-    ColumnWidthOutlined,
-    MinusOutlined
-} from '@ant-design/icons-vue'
-import { Dropdown, Tabs, Card } from 'ant-design-vue'
+  DownOutlined,
+  ReloadOutlined,
+  CloseOutlined,
+  VerticalRightOutlined,
+  VerticalLeftOutlined,
+  ColumnWidthOutlined,
+  MinusOutlined,
+} from '@ant-design/icons-vue';
+import { Dropdown, Tabs, Card } from 'ant-design-vue';
 
 export default {
-    [Tabs.name]: Tabs,
-    [Tabs.TabPane.name]: Tabs.TabPane,
-    [Dropdown.name]: Dropdown,
-    [Card.name]: Card,
-    MinusOutlined,
-    DownOutlined,
-    ReloadOutlined,
-    CloseOutlined,
-    VerticalRightOutlined,
-    VerticalLeftOutlined,
-    ColumnWidthOutlined
-}
+  [Tabs.name]: Tabs,
+  [Tabs.TabPane.name]: Tabs.TabPane,
+  [Dropdown.name]: Dropdown,
+  [Card.name]: Card,
+  MinusOutlined,
+  DownOutlined,
+  ReloadOutlined,
+  CloseOutlined,
+  VerticalRightOutlined,
+  VerticalLeftOutlined,
+  ColumnWidthOutlined,
+};

src/layout/components/TagsView/index.ts

@@ -1,3 +1,3 @@
-import TabsView from './index.vue'
+import TabsView from './index.vue';
 
-export { TabsView }
+export { TabsView };

src/layout/index.vue

@@ -1,217 +1,227 @@
 <template>
   <NLayout class="layout" :position="fixedMenu" has-sider>
-
     <NLayoutSider
-        v-if="navMode ==='vertical'"
-        show-trigger
-        @collapse="collapsed = true"
-        :position="fixedMenu"
-        @expand="collapsed = false"
-        :collapsed="collapsed"
-        collapse-mode="width"
-        :collapsed-width="64"
-        :width="leftMenuWidth"
-        :native-scrollbar="false"
-        :inverted="inverted" class="layout-sider">
-      <Logo :collapsed="collapsed"/>
-      <AsideMenu v-model:collapsed="collapsed"/>
+      v-if="navMode === 'vertical'"
+      show-trigger
+      @collapse="collapsed = true"
+      :position="fixedMenu"
+      @expand="collapsed = false"
+      :collapsed="collapsed"
+      collapse-mode="width"
+      :collapsed-width="64"
+      :width="leftMenuWidth"
+      :native-scrollbar="false"
+      :inverted="inverted"
+      class="layout-sider"
+    >
+      <Logo :collapsed="collapsed" />
+      <AsideMenu v-model:collapsed="collapsed" />
     </NLayoutSider>
 
     <NLayout :inverted="inverted">
-
       <NLayoutHeader :inverted="inverted" :position="fixedHeader">
-        <PageHeader v-model:collapsed="collapsed"/>
+        <PageHeader v-model:collapsed="collapsed" />
       </NLayoutHeader>
 
-      <NLayoutContent class="layout-content" :class="{'layout-default-background':getDarkTheme === false}">
-
-        <div class="layout-content-main"
-             :class="{'layout-content-main-fix':fixedMulti,'fluid-header':fixedHeader === 'static'}">
-          <TabsView v-if="isMultiTabs" v-model:collapsed="collapsed"/>
-          <div class="main-view" :class="{'main-view-fix':fixedMulti,'noMultiTabs':!isMultiTabs,'mt-3':!isMultiTabs}">
-            <MainView/>
+      <NLayoutContent
+        class="layout-content"
+        :class="{ 'layout-default-background': getDarkTheme === false }"
+      >
+        <div
+          class="layout-content-main"
+          :class="{
+            'layout-content-main-fix': fixedMulti,
+            'fluid-header': fixedHeader === 'static',
+          }"
+        >
+          <TabsView v-if="isMultiTabs" v-model:collapsed="collapsed" />
+          <div
+            class="main-view"
+            :class="{
+              'main-view-fix': fixedMulti,
+              noMultiTabs: !isMultiTabs,
+              'mt-3': !isMultiTabs,
+            }"
+          >
+            <MainView />
           </div>
         </div>
-
-        <NLayoutFooter v-if="getShowFooter">
-          <PageFooter/>
-        </NLayoutFooter>
-
+        <!--1.15废弃，没啥用，占用操作空间-->
+        <!--        <NLayoutFooter v-if="getShowFooter">-->
+        <!--          <PageFooter />-->
+        <!--        </NLayoutFooter>-->
       </NLayoutContent>
-
     </NLayout>
-
   </NLayout>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, unref, h, watch, computed, onMounted } from 'vue'
-import { Logo } from './components/Logo'
-import { TabsView } from './components/TagsView'
-import { MainView } from './components/Main'
-import { AsideMenu } from './components/Menu'
-import { PageHeader } from './components/Header'
-import { PageFooter } from './components/Footer'
-import { useProjectSetting } from "@/hooks/setting/useProjectSetting";
-import { useDesignSetting } from "@/hooks/setting/useDesignSetting";
+  import { defineComponent, ref, unref, computed, onMounted } from 'vue';
+  import { Logo } from './components/Logo';
+  import { TabsView } from './components/TagsView';
+  import { MainView } from './components/Main';
+  import { AsideMenu } from './components/Menu';
+  import { PageHeader } from './components/Header';
+  import { PageFooter } from './components/Footer';
+  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+  import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
 
-export default defineComponent({
-  name: 'Layout',
-  components: {
-    TabsView,
-    MainView,
-    PageHeader,
-    AsideMenu,
-    Logo,
-    PageFooter
-  },
-  setup() {
-    const { getDarkTheme } = useDesignSetting()
+  export default defineComponent({
+    name: 'Layout',
+    components: {
+      TabsView,
+      MainView,
+      PageHeader,
+      AsideMenu,
+      Logo,
+      PageFooter,
+    },
+    setup() {
+      const { getDarkTheme } = useDesignSetting();
 
-    const {
-      getShowFooter,
-      getNavMode,
-      getNavTheme,
-      getHeaderSetting,
-      getMenuSetting,
-      getMultiTabsSetting
-    } = useProjectSetting()
+      const {
+        getShowFooter,
+        getNavMode,
+        getNavTheme,
+        getHeaderSetting,
+        getMenuSetting,
+        getMultiTabsSetting,
+      } = useProjectSetting();
 
-    const navMode = getNavMode
+      const navMode = getNavMode;
 
-    const collapsed = ref<boolean>(false)
+      const collapsed = ref<boolean>(false);
 
-    const fixedHeader = computed(() => {
-      const { fixed } = unref(getHeaderSetting)
-      return fixed ? 'absolute' : 'static'
-    })
+      const fixedHeader = computed(() => {
+        const { fixed } = unref(getHeaderSetting);
+        return fixed ? 'absolute' : 'static';
+      });
 
-    const fixedMenu = computed(() => {
-      const { fixed } = unref(getHeaderSetting)
-      return fixed ? 'absolute' : 'static'
-    })
+      const fixedMenu = computed(() => {
+        const { fixed } = unref(getHeaderSetting);
+        return fixed ? 'absolute' : 'static';
+      });
 
-    const isMultiTabs = computed(() => {
-      return unref(getMultiTabsSetting).show
-    })
+      const isMultiTabs = computed(() => {
+        return unref(getMultiTabsSetting).show;
+      });
 
-    const fixedMulti = computed(() => {
-      return unref(getMultiTabsSetting).fixed
-    })
+      const fixedMulti = computed(() => {
+        return unref(getMultiTabsSetting).fixed;
+      });
 
-    const inverted = computed(() => {
-      return ['dark', 'header-dark'].includes(unref(getNavTheme))
-    })
+      const inverted = computed(() => {
+        return ['dark', 'header-dark'].includes(unref(getNavTheme));
+      });
 
-    const leftMenuWidth = computed(() => {
-      const { minMenuWidth, menuWidth } = unref(getMenuSetting)
-      return collapsed.value ? minMenuWidth : menuWidth
-    })
+      const leftMenuWidth = computed(() => {
+        const { minMenuWidth, menuWidth } = unref(getMenuSetting);
+        return collapsed.value ? minMenuWidth : menuWidth;
+      });
 
-    const getChangeStyle = computed(() => {
-      const { minMenuWidth, menuWidth } = unref(getMenuSetting)
-      return {
-        'padding-left': collapsed.value ? `${ minMenuWidth }px` : `${ menuWidth }px`
+      const getChangeStyle = computed(() => {
+        const { minMenuWidth, menuWidth } = unref(getMenuSetting);
+        return {
+          'padding-left': collapsed.value ? `${minMenuWidth}px` : `${menuWidth}px`,
+        };
+      });
+
+      function watchWidth() {
+        const Width = document.body.clientWidth;
+        if (Width <= 950) {
+          collapsed.value = true;
+        } else collapsed.value = false;
       }
-    })
 
-    function watchWidth() {
-      const Width = document.body.clientWidth
-      if (Width <= 950) {
-        collapsed.value = true
-      } else collapsed.value = false
-    }
+      onMounted(() => {
+        window.addEventListener('resize', watchWidth);
+      });
 
-    onMounted(() => {
-      window.addEventListener('resize', watchWidth);
-    })
-
-    return {
-      fixedMenu,
-      fixedMulti,
-      fixedHeader,
-      collapsed,
-      inverted,
-      isMultiTabs,
-      leftMenuWidth,
-      getChangeStyle,
-      navMode,
-      getShowFooter,
-      getDarkTheme
-    }
-  }
-})
+      return {
+        fixedMenu,
+        fixedMulti,
+        fixedHeader,
+        collapsed,
+        inverted,
+        isMultiTabs,
+        leftMenuWidth,
+        getChangeStyle,
+        navMode,
+        getShowFooter,
+        getDarkTheme,
+      };
+    },
+  });
 </script>
 
 <style lang="less" scoped>
-.layout {
-  display: flex;
-  flex-direction: row;
-  flex: auto;
-
-  &-default-background {
-    background: #f5f7f9;
-  }
-
-  .layout-sider {
-    min-height: 100vh;
-    box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
-    position: relative;
-    z-index: 13;
-    transition: all .2s ease-in-out;
-  }
-
-  .layout-sider-fix {
-    position: fixed;
-    top: 0;
-    left: 0;
-  }
-
-  .ant-layout {
-    overflow: hidden;
-  }
-
-  .layout-right-fix {
-    overflow-x: hidden;
-    padding-left: 200px;
-    min-height: 100vh;
-    transition: all 0.2s ease-in-out;
-  }
-
-  .layout-content {
+  .layout {
+    display: flex;
+    flex-direction: row;
     flex: auto;
-    min-height: 100vh;
+
+    &-default-background {
+      background: #f5f7f9;
+    }
+
+    .layout-sider {
+      min-height: 100vh;
+      box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+      position: relative;
+      z-index: 13;
+      transition: all 0.2s ease-in-out;
+    }
+
+    .layout-sider-fix {
+      position: fixed;
+      top: 0;
+      left: 0;
+    }
+
+    .ant-layout {
+      overflow: hidden;
+    }
+
+    .layout-right-fix {
+      overflow-x: hidden;
+      padding-left: 200px;
+      min-height: 100vh;
+      transition: all 0.2s ease-in-out;
+    }
+
+    .layout-content {
+      flex: auto;
+      min-height: 100vh;
+    }
+
+    .n-layout-header.n-layout-header--absolute-positioned {
+      z-index: 11;
+    }
+
+    .n-layout-footer {
+      background: none;
+    }
   }
 
-  .n-layout-header.n-layout-header--absolute-positioned {
-    z-index: 11;
+  .layout-content-main {
+    margin: 0 10px 10px;
+    position: relative;
+    padding-top: 64px;
   }
 
-  .n-layout-footer {
-    background: none;
+  .layout-content-main-fix {
+    padding-top: 64px;
   }
-}
 
+  .fluid-header {
+    padding-top: 0px;
+  }
 
-.layout-content-main {
-  margin: 0 10px 10px;
-  position: relative;
-  padding-top: 64px;
-}
+  .main-view-fix {
+    padding-top: 44px;
+  }
 
-.layout-content-main-fix {
-  padding-top: 64px;
-}
-
-.fluid-header {
-  padding-top: 0px;
-}
-
-.main-view-fix {
-  padding-top: 44px;
-}
-
-.noMultiTabs {
-  padding-top: 0;
-}
+  .noMultiTabs {
+    padding-top: 0;
+  }
 </style>