修复：项目配置 空白，多标签背景色 bug

docs: README.md 技术站->技术栈

.eslintignore

@@ -1,4 +1,3 @@
-
 *.sh
 node_modules
 *.md
@@ -13,3 +12,5 @@ dist
 .local
 /bin
 Dockerfile
+components.d.ts
+components.d.ts

.eslintrc.js

@@ -22,9 +22,9 @@ module.exports = defineConfig({
     'plugin:@typescript-eslint/recommended',
     'prettier',
     'plugin:prettier/recommended',
-    'plugin:jest/recommended',
   ],
   rules: {
+    'vue/script-setup-uses-vars': 'error',
     '@typescript-eslint/ban-ts-ignore': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
@@ -61,7 +61,6 @@ module.exports = defineConfig({
     'vue/singleline-html-element-content-newline': 'off',
     'vue/attribute-hyphenation': 'off',
     'vue/require-default-prop': 'off',
-    'vue/script-setup-uses-vars': 'off',
     'vue/html-self-closing': [
       'error',
       {

.gitignore

@@ -23,3 +23,5 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+/components.d.ts
+/components.d.ts

CHANGELOG.md

@@ -1,4 +1,85 @@
-# 1.5.1 (2021-08-07)
+# CHANGELOG
+
+## 1.6.1 (2022-01-06)
+
+### 🐛 Bug Fixes
+- 修复 `项目配置` 打开空白
+- 修复 `多标签` 背景和字体色变量丢失
+
+- ### ✨ Features
+- 依赖升级
+
+## 1.6.0 (2021-12-24)
+
+### 🐛 Bug Fixes
+- 修复 `低版本浏览器` 报 globalThis 未定义
+- 修复 `Axios` api地址拼接异常
+- 修复 `createStorage存在prefixKey` 会出bug
+
+- ### ✨ Features
+- 破坏 `Axios` 取消默认导出 `http` 可支持多个请求导出
+- 搜索 `import http from '@/utils/http/axios'` 替换为 `import { http } from '@/utils/http/axios`
+- 新增 `Axios` 多项配置 `urlPrefix`，`joinTime`，`ignoreCancelToken`，`withToken`，`uploadFile方法`
+- 依赖升级
+
+## 1.5.5 (2021-08-14)
+
+### 🐛 Bug Fixes
+- 修复路由只存在一个子路由，图标不显示问题
+- UI样式美化
+
+- ### ✨ Features
+- 支持 Vue 3.2.x 
+- 代码全部按 `script setup` 语法重写（完成80%）  
+- 新增 `回到顶部` 功能  
+- 新增 `拖拽` 示例页面
+- 新增 `富文本` 组件
+- 新增 `路由切换动画` 可在项目设置切换  
+- 依赖升级
+
+# CHANGELOG
+
+## 1.5.4 (2021-08-10)
+
+### 🐛 Bug Fixes
+
+- `暗色模式下多页签背景问题 ` 合并 [#23](https://github.com/jekip/naive-ui-admin/pull/23) 感谢 [@Dishone](https://github.com/Dishone)
+- `表格设置列，重复添加action列样式错乱问题` 合并 [#24](https://github.com/jekip/naive-ui-admin/pull/24) 感谢 [@CasbaL](https://github.com/CasbaL)
+
+- ### ✨ Features
+- 新增 `路由支持（内联外部地址）`配置
+- 新增 `顶部菜单` logo展示
+-（破坏性更新）
+- 优化 `动态路由配置` 取消`constantRouterComponents.ts`，中组件映射配置，更名为 `router-icons.ts`
+- 优化 `admin_info接口结构`，roles 更名为：permissions，roles.roleName，更名为：label
+- 优化 多级路由，当没有配置`redirect`时，默认为第一个子路由，配置则优先按配置
+- 依赖升级
+
+# 1.5.3 (2021-08-09)
+### 🐛 Bug Fixes
+- 修复顶部菜单，选中联动
+- 修复混合菜单模式，切换其他模式菜单未重置
+- 实例基础列表，和表格组件实例，开启横向滚动特性
+- `naiveui` 升级成最新版
+
+- ### ✨ Features
+- table组件，默认开启 `ellipsis` 特性
+
+
+
+# 1.5.2 (2021-08-06)
+### 🐛 Bug Fixes
+- 修复已知bug
+
+- ### ✨ Features
+- 新增 `混合菜单模式`
+- 新增 `根路由`
+- 新增 `关于` 根路由示例页面
+- 文档同步更新，组件和示例
+
+
+
+# 1.5.1 (2021-08-05)
 ### 🐛 Bug Fixes
 - 修复windows系统获取项目换行符问题
 - 修复表格分页计算问题 [@Chika99](https://github.com/Chika99)
@@ -6,8 +87,6 @@
 - 依赖 dayjs 移除，用date-fns，和UI框架底层保持一致
 - 修复已知bug 
 
-
-
 - ### ✨ Features
 - 新增 `baseForm` 组件，和`基础`，`useForm`使用方式
 - 新增 `baseModal`，组件，和 `useForm`使用方式  

README.md

@@ -1,24 +1,51 @@
+## 留步
+少侠留步，早知如此绊人心，何如当初莫相识，右上角免费的 `Star` 点一点，帮我们突破一下 `2k`，谢谢！O(∩_∩)O
+
 ## 简介
 
-[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/) 的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目，相信不管是从新技术使用还是其他方面，都能帮助到你。
+[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 等前端前沿技术开发
-- **TypeScript**: 应用程序级 JavaScript 的语言
-- **主题**：可配置的主题
-- **Mock 数据** 内置 Mock 数据方案
-- **权限** 内置完善的动态路由权限生成方案
-- **组件** 二次封装了多个常用的组件
+- 二次封装实用高扩展性组件
+- 响应式、多主题，多配置，快速集成，开箱即用
+- 最新技术栈，使用 `Vue3`、`Typescript`、`Pinia`、`Vite` 等前端前沿技术
+- 强大的鉴权系统，对路由、菜单、功能点等支持`三种鉴权模式`，满足不同的业务鉴权需求
+- 持续更新，实用性页面模板功能和交互，随意搭配组合，让构建页面变得简单化
 
 
-## 在线预览
-- [naive-ui-admin](https://jekip.github.io)
+## 预览
+- [naive-ui-admin](https://naive-ui-admin.vercel.app)
 
 账号：admin，密码：123456（随意）
 
+## 提示
+
+如果这个版本的功能和组件，并不能满足您的需求，不妨看看，我们全新 `NaiveAdmin v2` 他或许能让您眼前一亮O(∩_∩)O哈哈~
+
+[NaiveAdmin 官网](https://www.naiveadmin.com)
+
+[NaiveAdmin v2 预览](https://pro.naiveadmin.com)
+
+[NaiveAdmin v2 变更日志](https://www.naiveadmin.com/guide/changelog)
+
+## 新品
+
+### Antd vue
+
+千呼万唤 `Naive Admin Antd` 也迎来了第一个版本，同时具备 `Naive Ui Admin` 优点，如果您选的技术栈是 `Antd` 的话，不妨看看。
+
+[NaiveAdmin Antd 预览](https://antd.naiveadmin.com)
+
+### Arco vue
+
+新产品，新生态，智能设计体系，连接轻盈体验，一如既往、开箱即用，欢迎前往查看。
+
+[NaiveAdmin Arco 预览](https://arco.naiveadmin.com)
+
+
 ## 文档
 
-[文档地址](https://jekip.github.io/docs/) 
+[v1文档地址](https://naive-ui-admin-docs.vercel.app) 
 
 ## 准备
 
@@ -31,7 +58,7 @@
 - [Naive-ui-admin](https://www.naiveui.com/) - ui 基本使用
 - [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法
 
-## 安装使用
+## 使用
 
 - 获取项目代码
 
@@ -64,9 +91,6 @@ yarn build
 
 [CHANGELOG](./CHANGELOG.md)
 
-## 感谢
-[@Vben](https://github.com/anncwb/vue-vben-admin) 借鉴 vue-vben-admin 实现的骨架，同时也使用作者开发的 vite 插件，再次感谢作者。
-
 
 ## 如何贡献
 
@@ -113,7 +137,11 @@ yarn build
 
 ## 交流
 
-`Naive Ui Admin` 是完全开源免费的项目，在帮助开发者更方便地进行中大型管理系统开发，同时也提供 QQ 交流群使用问题欢迎在群内提问。
+`Naive Ui Admin` 在帮助开发者更方便地进行中大型管理系统开发，同时也提供 QQ 交流群使用问题欢迎在群内提问。
 
 - QQ 群 `328347666`
 
+## 赞助
+#### 如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励 🍹。
+
+![donate](https://jekip.github.io/docs/images/sponsor.png)

build/vite/plugin/index.ts

@@ -1,4 +1,6 @@
 import type { Plugin } from 'vite';
+import Components from 'unplugin-vue-components/vite';
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
 
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
@@ -15,6 +17,12 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, prodMock)
     vue(),
     // have to
     vueJsx(),
+
+    // 按需引入NaiveUi且自动创建组件声明
+    Components({
+      dts: true,
+      resolvers: [NaiveUiResolver()],
+    }),
   ];
 
   // vite-plugin-html

commitlint.config.js

@@ -14,7 +14,7 @@ module.exports = {
         'fixed',
         'resolve',
         'resolves',
-        'resolved'
+        'resolved',
       ],
       issuePrefixes: ['#'],
       noteKeywords: ['BREAKING CHANGE'],
@@ -23,8 +23,8 @@ module.exports = {
       revertCorrespondence: ['header', 'hash'],
       warn() {},
       mergePattern: null,
-      mergeCorrespondence: null
-    }
+      mergeCorrespondence: null,
+    },
   },
   rules: {
     'body-leading-blank': [2, 'always'],
@@ -50,8 +50,8 @@ module.exports = {
         'wip',
         'workflow',
         'types',
-        'release'
-      ]
-    ]
-  }
-}
+        'release',
+      ],
+    ],
+  },
+};

index.html

@@ -1,26 +1,122 @@
 <!DOCTYPE html>
-<html lang="zh-cmn-Hans">
+<html lang="zh-cmn-Hans" id="htmlRoot" data-theme="light">
 <head>
   <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
-  <meta name="renderer" content="webkit"/>
+  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
+  <meta content="webkit" name="renderer"/>
   <meta
-    name="viewport"
     content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+    name="viewport"
   />
-  <link rel="icon" href="/favicon.ico"/>
+  <link href="/favicon.ico" rel="icon"/>
   <title><%= title %></title>
-  <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">
-        <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+  <style>
+    .first-loading-wrap {
+      display: flex;
+      width: 100%;
+      height: 100vh;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+    }
+
+    .first-loading-wrap > h1 {
+      font-size: 128px
+    }
+
+    .first-loading-wrap .loading-wrap {
+      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>
+  <div class="first-loading-wrap">
+    <div class="loading-wrap">
+      <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
     </div>
   </div>
 </div>
-<script type="module" src="/src/main.ts"></script>
+<script>var globalThis = window;</script>
+<script src="/src/main.ts" type="module"></script>
 </body>
 </html>

mock/user/menus.ts

@@ -4,7 +4,7 @@ const menusList = [
   {
     path: '/dashboard',
     name: 'Dashboard',
-    component: 'Layout',
+    component: 'LAYOUT',
     redirect: '/dashboard/console',
     meta: {
       icon: 'DashboardOutlined',
@@ -14,7 +14,7 @@ const menusList = [
       {
         path: 'console',
         name: 'dashboard_console',
-        component: 'DashboardConsole',
+        component: '/dashboard/console/console',
         meta: {
           title: '主控台',
         },
@@ -22,7 +22,7 @@ const menusList = [
       {
         path: 'monitor',
         name: 'dashboard_monitor',
-        component: 'DashboardMonitor',
+        component: '/dashboard/monitor/monitor',
         meta: {
           title: '监控页',
         },
@@ -30,7 +30,7 @@ const menusList = [
       {
         path: 'workplace',
         name: 'dashboard_workplace',
-        component: 'DashboardWorkplace',
+        component: '/dashboard/workplace/workplace',
         meta: {
           hidden: true,
           title: '工作台',

mock/user/user.ts

@@ -13,25 +13,25 @@ const adminInfo = {
   desc: 'manager',
   password: Random.string('upper', 4, 16),
   token,
-  roles: [
+  permissions: [
     {
-      roleName: '主控台',
+      label: '主控台',
       value: 'dashboard_console',
     },
     {
-      roleName: '监控页',
+      label: '监控页',
       value: 'dashboard_monitor',
     },
     {
-      roleName: '工作台',
+      label: '工作台',
       value: 'dashboard_workplace',
     },
     {
-      roleName: '基础列表',
+      label: '基础列表',
       value: 'basic_list',
     },
     {
-      roleName: '基础列表删除',
+      label: '基础列表删除',
       value: 'basic_list_delete',
     },
   ],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui-admin",
-  "version": "1.5.1",
+  "version": "1.6.1",
   "author": {
     "name": "Ahjung",
     "email": "735878602@qq.com",
@@ -27,6 +27,7 @@
   "dependencies": {
     "@vicons/antd": "^0.10.0",
     "@vicons/ionicons5": "^0.10.0",
+    "@vueup/vue-quill": "^1.0.0-beta.7",
     "@vueuse/core": "^5.0.3",
     "axios": "^0.21.1",
     "blueimp-md5": "^2.18.0",
@@ -38,37 +39,36 @@
     "makeit-captcha": "^1.2.5",
     "mitt": "^2.1.0",
     "mockjs": "^1.1.0",
-    "naive-ui": "^2.16.0",
-    "pinia": "^2.0.0-beta.3",
+    "naive-ui": "^2.23.2",
+    "pinia": "^2.0.0-rc.4",
     "qs": "^6.10.1",
     "vfonts": "^0.1.0",
-    "vue": "^3.1.2",
-    "vue-router": "^4.0.10",
-    "vue-types": "^4.0.0",
-    "vuedraggable": "^4.0.3",
-    "vuex": "^4.0.2"
+    "vue": "^3.2.16",
+    "vue-router": "^4.0.11",
+    "vue-types": "^4.1.0",
+    "vuedraggable": "^4.0.3"
   },
   "devDependencies": {
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-conventional": "^12.1.4",
     "@types/lodash": "^4.14.170",
     "@types/node": "^15.12.2",
-    "@typescript-eslint/eslint-plugin": "^4.26.1",
-    "@typescript-eslint/parser": "^4.26.1",
-    "@vitejs/plugin-vue": "^1.2.3",
-    "@vitejs/plugin-vue-jsx": "^1.1.5",
-    "@vue/compiler-sfc": "3.1.1",
+    "@typescript-eslint/eslint-plugin": "^4.31.2",
+    "@typescript-eslint/parser": "^4.31.2",
+    "@vitejs/plugin-vue": "^1.9.1",
+    "@vitejs/plugin-vue-jsx": "^1.1.8",
+    "@vue/compiler-sfc": "^3.2.16",
     "@vue/eslint-config-typescript": "^7.0.0",
     "autoprefixer": "^10.3.1",
     "commitizen": "^4.2.4",
     "core-js": "^3.14.0",
     "dotenv": "^10.0.0",
-    "eslint": "^7.28.0",
+    "eslint": "^7.32.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",
+    "eslint-plugin-vue": "^7.18.0",
     "esno": "^0.7.3",
     "gh-pages": "^3.2.0",
     "husky": "^6.0.0",
@@ -86,13 +86,14 @@
     "stylelint-order": "^4.1.0",
     "stylelint-scss": "^3.19.0",
     "tailwindcss": "^2.2.7",
-    "typescript": "^4.3.5",
-    "vite": "2.3.6",
+    "typescript": "^4.4.3",
+    "unplugin-vue-components": "^0.17.2",
+    "vite": "^2.5.10",
     "vite-plugin-compression": "^0.3.1",
     "vite-plugin-html": "^2.0.7",
     "vite-plugin-mock": "^2.9.3",
     "vite-plugin-style-import": "^1.0.1",
-    "vue-eslint-parser": "^7.8.0"
+    "vue-eslint-parser": "^7.11.0"
   },
   "lint-staged": {
     "*.{vue,js,ts,tsx}": "eslint --fix"

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/App.vue

@@ -16,8 +16,8 @@
   </transition>
 </template>
 
-<script lang="ts">
-  import { defineComponent, computed, onMounted, onUnmounted } from 'vue';
+<script lang="ts" setup>
+  import { 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';
@@ -26,86 +26,61 @@
   import { useDesignSettingStore } from '@/store/modules/designSetting';
   import { lighten } from '@/utils/index';
 
-  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 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(() => {
-        const appTheme = designStore.appTheme;
-        const lightenStr = lighten(designStore.appTheme, 6);
-        return {
-          common: {
-            primaryColor: appTheme,
-            primaryColorHover: lightenStr,
-            primaryColorPressed: lightenStr,
-          },
-          LoadingBar: {
-            colorLoading: appTheme,
-          },
-        };
-      });
+  /**
+   * @type import('naive-ui').GlobalThemeOverrides
+   */
+  const getThemeOverrides = computed(() => {
+    const appTheme = designStore.appTheme;
+    const lightenStr = lighten(designStore.appTheme, 6);
+    return {
+      common: {
+        primaryColor: appTheme,
+        primaryColorHover: lightenStr,
+        primaryColorPressed: lightenStr,
+      },
+      LoadingBar: {
+        colorLoading: appTheme,
+      },
+    };
+  });
 
-      const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined));
+  const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined));
 
-      let timer;
+  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);
-      };
+  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);
-      });
+  onMounted(() => {
+    document.addEventListener('mousedown', timekeeping);
+  });
 
-      onUnmounted(() => {
-        document.removeEventListener('mousedown', timekeeping);
-      });
-
-      return {
-        darkTheme: createTheme([inputDark, datePickerDark]),
-        getDarkTheme,
-        zhCN,
-        dateZhCN,
-        isLock,
-        getThemeOverrides,
-      };
-    },
+  onUnmounted(() => {
+    document.removeEventListener('mousedown', timekeeping);
   });
 </script>
 
 <style lang="less">
-  @import 'styles/common.less';
-
-  .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%);
-  }
+  @import 'styles/index.less';
 </style>

src/api/dashboard/console.ts

@@ -1,4 +1,4 @@
-import http from '@/utils/http/axios';
+import { http } from '@/utils/http/axios';
 
 //获取主控台信息
 export function getConsoleInfo() {

src/api/system/menu.ts

@@ -1,4 +1,4 @@
-import http from '@/utils/http/axios';
+import { http } from '@/utils/http/axios';
 
 /**
  * @description: 根据用户id获取用户菜单

src/api/system/role.ts

@@ -1,4 +1,4 @@
-import http from '@/utils/http/axios';
+import { http } from '@/utils/http/axios';
 
 /**
  * @description: 角色列表

src/api/system/user.ts

@@ -1,4 +1,4 @@
-import http from '@/utils/http/axios';
+import { http } from '@/utils/http/axios';
 
 export interface BasicResponseModel<T = any> {
   code: number;

src/api/table/list.ts

@@ -1,4 +1,4 @@
-import http from '@/utils/http/axios';
+import { http } from '@/utils/http/axios';
 
 //获取table
 export function getTableList(params) {

src/assets/images/nav-horizontal-mix.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="52px" height="45px" viewBox="0 0 52 45" enable-background="new 0 0 52 45" xml:space="preserve">  <image id="image0" width="52" height="45" x="0" y="0"
+    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAtCAMAAADWf7iKAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
+AAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAAdVBMVEX///8AAABkbnc9RVY7
+QE9fY3GIiJZjbHk9QFOCi5QAAAA9QlZfZHMAAAA4QFEAAADt7/Lf5OTt7/KChoYAAADu8PTf3+Nw
+c3MAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAyNUkyOEn////w8vWhURXFAAAAI3RS
+TlMAAE/2/uZJUP45AvfkBP4F9LrwPwP0vUkOAREsNjk0JwYHCLrjEiIAAAABYktHRACIBR1IAAAA
+CXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5QgGAhE5kB5L+gAAAIZJREFUSMft1rsSgjAQhWEW
+FTUYIopKlPui7/+IZqFhbMxmhm7//qvPiaKgAOIN+rbdJQCE9qO3cR2OhFTKMYgn5ZDmGcy0Q4aJ
+0AhaoPdPnz8JEiRIkKCV0DkE5YQ0D12uBQ01B93uj9LSJdDPV1V71rRlMf0Iq7p+8Kw3aj4fAJYR
+TCigL0lMJ5P4y7LRAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTA4LTA2VDAyOjE3OjU2KzAwOjAw
+Kbo8/wAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wOC0wNlQwMjoxNzo1NiswMDowMFjnhEMAAAAA
+SUVORK5CYII=" />
+</svg>

src/components/Form/src/BasicForm.vue

@@ -102,11 +102,7 @@
             type="primary"
             text
             icon-placement="right"
-            v-if="
-              isInline &&
-              getSchema.length > (getProps.gridProps?.cols || 0) &&
-              getProps.showAdvancedButton
-            "
+            v-if="isInline && getProps.showAdvancedButton"
             @click="unfoldToggle"
           >
             <template #icon>
@@ -212,6 +208,7 @@
         return {
           ...gridProps,
           collapsed: isInline.value ? gridCollapsed.value : false,
+          responsive: 'screen',
         };
       });
 

src/components/Form/src/hooks/useForm.ts

@@ -1,5 +1,4 @@
 import type { FormProps, FormActionType, UseFormReturnType } from '../types/form';
-// @ts-ignore
 import type { DynamicProps } from '/#/utils';
 
 import { ref, onUnmounted, unref, nextTick, watch } from 'vue';

src/components/Lockscreen/Lockscreen.vue

@@ -49,6 +49,7 @@
           type="password"
           autofocus
           v-model:value="loginParams.password"
+          @keyup.enter="onLogin"
           placeholder="请输入登录密码"
         >
           <template #suffix>

src/components/Modal/src/basicModal.vue

@@ -20,104 +20,94 @@
   </n-modal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import {
-    defineComponent,
     getCurrentInstance,
     ref,
     nextTick,
     unref,
-    toRefs,
-    reactive,
     computed,
+    useAttrs,
+    defineEmits,
+    defineProps,
   } from 'vue';
   import { basicProps } from './props';
   import startDrag from '@/utils/Drag';
   import { deepMerge } from '@/utils';
   import { FormProps } from '@/components/Form';
-  export default defineComponent({
-    name: 'BasicModal',
-    components: {},
-    props: {
-      ...basicProps,
-    },
-    emits: ['on-close', 'on-ok', 'register'],
-    setup(props, { emit, attrs }) {
-      const propsRef = ref<Partial>({});
+  import { ModalProps, ModalMethods } from './type';
 
-      const state = reactive({
-        isModal: false,
-        subLoading: false,
-      });
+  const attrs = useAttrs();
+  const props = defineProps({ ...basicProps });
+  const emit = defineEmits(['on-close', 'on-ok', 'register']);
 
-      const getProps = computed((): FormProps => {
-        const modalProps = { ...props, ...unref(propsRef) };
-        return { ...modalProps };
-      });
+  const propsRef = ref(<Partial<ModalProps> | null>null);
 
-      async function setProps(modalProps: Partial): Promise<void> {
-        propsRef.value = deepMerge(unref(propsRef) || {}, modalProps);
-      }
+  const isModal = ref(false);
+  const subLoading = ref(false);
 
-      const getBindValue = computed(() => {
-        return {
-          ...attrs,
-          ...unref(getProps),
-        };
-      });
-
-      function setSubLoading(status: boolean) {
-        state.subLoading = status;
-      }
-
-      function openModal() {
-        state.isModal = true;
-        nextTick(() => {
-          const oBox = document.getElementById('basic-modal');
-          const oBar = document.getElementById('basic-modal-bar');
-          startDrag(oBar, oBox);
-        });
-      }
-
-      function closeModal() {
-        state.isModal = false;
-        state.subLoading = false;
-        emit('on-close');
-      }
-
-      function onCloseModal() {
-        state.isModal = false;
-        emit('on-close');
-      }
-
-      function handleSubmit() {
-        state.subLoading = true;
-        emit('on-ok');
-      }
-
-      const modalMethods: ModalMethods = {
-        setProps,
-        openModal,
-        closeModal,
-        setSubLoading,
-      };
-
-      const instance = getCurrentInstance();
-      if (instance) {
-        emit('register', modalMethods);
-      }
-
-      return {
-        ...toRefs(state),
-        getBindValue,
-        openModal,
-        closeModal,
-        onCloseModal,
-        handleSubmit,
-        setProps,
-      };
-    },
+  const getProps = computed((): FormProps => {
+    return { ...props, ...(unref(propsRef) as any) };
   });
+
+  const subBtuText = computed(() => {
+    const { subBtuText } = propsRef.value as any;
+    return subBtuText || props.subBtuText;
+  });
+
+  async function setProps(modalProps: Partial<ModalProps>): Promise<void> {
+    propsRef.value = deepMerge(unref(propsRef) || ({} as any), modalProps);
+  }
+
+  const getBindValue = computed(() => {
+    return {
+      ...attrs,
+      ...unref(getProps),
+      ...unref(propsRef),
+    };
+  });
+
+  function setSubLoading(status: boolean) {
+    subLoading.value = status;
+  }
+
+  function openModal() {
+    isModal.value = true;
+    nextTick(() => {
+      const oBox = document.getElementById('basic-modal');
+      const oBar = document.getElementById('basic-modal-bar');
+      startDrag(oBar, oBox);
+    });
+  }
+
+  function closeModal() {
+    isModal.value = false;
+    subLoading.value = false;
+    emit('on-close');
+  }
+
+  function onCloseModal() {
+    isModal.value = false;
+    emit('on-close');
+  }
+
+  function handleSubmit() {
+    subLoading.value = true;
+    console.log(subLoading.value)
+    emit('on-ok');
+  }
+
+  const modalMethods: ModalMethods = {
+    setProps,
+    openModal,
+    closeModal,
+    setSubLoading,
+  };
+
+  const instance = getCurrentInstance();
+  if (instance) {
+    emit('register', modalMethods);
+  }
 </script>
 
 <style lang="less">

src/components/Modal/src/hooks/useModal.ts

@@ -1,46 +1,43 @@
-import { ref, onUnmounted, unref, getCurrentInstance, watch } from 'vue';
+import { ref, onUnmounted, unref, getCurrentInstance, watch, nextTick } from 'vue';
 import { isProdMode } from '@/utils/env';
-import { UseModalReturnType, ModalMethods } from './type';
+import { ModalMethods, UseModalReturnType } from '../type';
 import { getDynamicProps } from '@/utils';
-export function useModal(props?: Props): UseModalReturnType {
-  const modal = ref<Nullable<ModalMethods>>(null);
-  const loaded = ref<Nullable<boolean>>(false);
+import { tryOnUnmounted } from '@vueuse/core';
+export function useModal(props): UseModalReturnType {
 
-  function register(modalMethod: ModalMethods) {
-    if (!getCurrentInstance()) {
-      throw new Error('useModal() can only be used inside setup() or functional components!');
+  const modalRef = ref<Nullable<ModalMethods>>(null);
+  const currentInstance = getCurrentInstance();
+
+  const getInstance = () => {
+    const instance = unref(modalRef.value);
+    if (!instance) {
+      console.error('useModal instance is undefined!');
     }
+    return instance;
+  };
+
+  const register = (modalInstance: ModalMethods) => {
     isProdMode() &&
-      onUnmounted(() => {
-        modal.value = null;
-        loaded.value = false;
+      tryOnUnmounted(() => {
+        modalRef.value = null;
       });
-    if (unref(loaded) && isProdMode() && modalMethod === unref(modal)) return;
-    modal.value = modalMethod;
+    modalRef.value = modalInstance;
+    currentInstance?.emit('register', modalInstance);
 
     watch(
       () => props,
       () => {
-        const { setProps } = modal.value;
-        props && setProps(getDynamicProps(props));
+        props && modalInstance.setProps(getDynamicProps(props));
       },
       {
         immediate: true,
         deep: true,
       }
     );
-  }
-
-  const getInstance = () => {
-    const instance = unref(modal);
-    if (!instance) {
-      error('useModal instance is undefined!');
-    }
-    return instance;
   };
 
-  const methods: ReturnMethods = {
-    setProps: (props: Partial<ModalProps>): void => {
+  const methods: ModalMethods = {
+    setProps: (props): void => {
       getInstance()?.setProps(props);
     },
     openModal: () => {
@@ -49,9 +46,10 @@ export function useModal(props?: Props): UseModalReturnType {
     closeModal: () => {
       getInstance()?.closeModal();
     },
-    setSubLoading: () => {
-      getInstance()?.setSubLoading();
+    setSubLoading: (status) => {
+      getInstance()?.setSubLoading(status);
     },
   };
+
   return [register, methods];
 }

src/components/Modal/src/type/index.ts

@@ -1,12 +1,19 @@
-export interface ModalProps {
-  subBtuText?: string;
-}
-
+import type { DialogOptions } from 'naive-ui/lib/dialog';
 /**
  * @description: 弹窗对外暴露的方法
  */
 export interface ModalMethods {
-  setProps: (props: Partial<ModalProps>) => void;
+  setProps: (props) => void;
   openModal: () => void;
   closeModal: () => void;
+  setSubLoading: (status) => void;
 }
+
+/**
+ * 支持修改，DialogOptions 參數
+ */
+export interface ModalProps extends DialogOptions { }
+
+export type RegisterFn = (ModalInstance: ModalMethods) => void;
+
+export type UseModalReturnType = [RegisterFn, ModalMethods];

src/components/Table/src/Table.vue

@@ -7,7 +7,7 @@
           {{ title }}
           <n-tooltip trigger="hover" v-if="titleTooltip">
             <template #trigger>
-              <n-icon size="18" class="ml-1 cursor-pointer text-gray-400">
+              <n-icon size="18" class="ml-1 text-gray-400 cursor-pointer">
                 <QuestionCircleOutlined />
               </n-icon>
             </template>
@@ -156,7 +156,7 @@
 
       const { getPaginationInfo, setPagination } = usePagination(getProps);
 
-      const { getDataSourceRef, getRowKey, reload } = useDataSource(
+      const { getDataSourceRef, getDataSource, getRowKey, reload } = useDataSource(
         getProps,
         {
           getPaginationInfo,
@@ -171,7 +171,7 @@
         useColumns(getProps);
 
       const state = reactive({
-        tableSize: 'medium',
+        tableSize: unref(getProps as any).size || 'medium',
         isColumnSetting: false,
       });
 
@@ -233,9 +233,6 @@
         getCacheColumns,
         setCacheColumnsField,
         emit,
-        getSize: () => {
-          return unref(getBindValues).size;
-        },
       };
 
       const getCanResize = computed(() => {
@@ -283,12 +280,12 @@
         ...toRefs(state),
         tableElRef,
         getBindValues,
+        getDataSource,
         densityOptions,
         reload,
         densitySelect,
         updatePage,
         updatePageSize,
-        updateCheckedRowKeys,
         pagination,
         tableAction,
       };

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

@@ -7,23 +7,25 @@
       </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-content-comp">
+        <CellComponent
+          v-bind="getComponentProps"
+          :component="getComponent"
+          :style="getWrapperStyle"
+          :popoverVisible="getRuleVisible"
+          :ruleMessage="ruleMessage"
+          :rule="getRule"
+          :class="getWrapperClass"
+          ref="elRef"
+          @options-change="handleOptionsChange"
+          @pressEnter="handleEnter"
+        />
+      </div>
       <div class="editable-cell-action" v-if="!getRowEditable">
-        <n-icon class="cursor-pointer mx-2">
+        <n-icon class="mx-2 cursor-pointer">
           <CheckOutlined @click="handleSubmit" />
         </n-icon>
-        <n-icon class="cursor-pointer mx-2">
+        <n-icon class="mx-2 cursor-pointer">
           <CloseOutlined @click="handleCancel" />
         </n-icon>
       </div>
@@ -49,7 +51,7 @@
   import { set, omit } from 'lodash-es';
   import { EventEnum } from '@/components/Table/src/componentMap';
 
-  import { milliseconds } from 'date-fns';
+  import { milliseconds, format } from 'date-fns';
 
   export default defineComponent({
     name: 'EditableCell',
@@ -92,7 +94,7 @@
 
       const getIsCheckComp = computed(() => {
         const component = unref(getComponent);
-        return ['NCheckbox', 'NSwitch'].includes(component);
+        return ['NCheckbox', 'NRadio'].includes(component);
       });
 
       const getComponentProps = computed(() => {
@@ -196,12 +198,9 @@
           currentValueRef.value = e;
         }
 
-        //TODO 这里组件参数格式，和dayjs格式不一致
+        //TODO 根据组件格式化值
         // if (component === 'NDatePicker') {
-        //   let format = (props.column.editComponentProps?.format)
-        //     .replace(/yyyy/g, 'YYYY')
-        //     .replace(/dd/g, 'DD');
-        //   currentValueRef.value = dayjs(currentValueRef.value).format(format);
+        //   currentValueRef.value = format(currentValueRef.value,'yyyy-MM-dd HH:mm:ss');
         // }
 
         const onChange = props.column?.editComponentProps?.onChange;
@@ -377,6 +376,10 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 
+  &-comp{
+    flex: 1;
+  }
+
   .edit-icon {
    font-size: 14px;
    //position: absolute;

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

@@ -88,7 +88,6 @@
     VerticalRightOutlined,
     VerticalLeftOutlined,
   } from '@vicons/antd';
-  // @ts-ignore
   import Draggable from 'vuedraggable/src/vuedraggable';
   import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
 

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

@@ -48,10 +48,11 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
     const columns = cloneDeep(pageColumns);
     return columns
       .filter((column) => {
-        // @ts-ignore
-        return hasPermission(column.auth) && isIfShow(column);
+        return hasPermission(column.auth as string[]) && isIfShow(column);
       })
       .map((column) => {
+        //默认 ellipsis 为true
+        column.ellipsis = typeof column.ellipsis === 'undefined' ? { tooltip: true } : false;
         const { edit } = column;
         if (edit) {
           column.render = renderEditCell(column);
@@ -91,10 +92,10 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
   function handleActionColumn(propsRef: ComputedRef<BasicTableProps>, columns: BasicColumn[]) {
     const { actionColumn } = unref(propsRef);
     if (!actionColumn) return;
-    // @ts-ignore
-    columns.push({
-      ...actionColumn,
-    });
+    !columns.find((col) => col.key === 'action') &&
+      columns.push({
+        ...(actionColumn as any),
+      });
   }
 
   //设置
@@ -127,7 +128,7 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
   }
 
   //获取
-  function getColumns() {
+  function getColumns(): BasicColumn[] {
     const columns = toRaw(unref(getColumnsRef));
     return columns.map((item) => {
       return { ...item, title: item.title, key: item.key, fixed: item.fixed || undefined };

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

@@ -9,7 +9,7 @@ export function useDataSource(
   { getPaginationInfo, setPagination, setLoading, tableData },
   emit
 ) {
-  const dataSourceRef = ref([]);
+  const dataSourceRef = ref<Recordable[]>([]);
 
   watchEffect(() => {
     tableData.value = unref(dataSourceRef);
@@ -47,6 +47,7 @@ export function useDataSource(
     try {
       setLoading(true);
       const { request, pagination }: any = unref(propsRef);
+      if (!request) return;
       //组装分页信息
       const pageField = APISETTING.pageField;
       const sizeField = APISETTING.sizeField;

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

@@ -3,7 +3,7 @@ import type { BasicTableProps } from '../types/table';
 import { computed, unref, ref, ComputedRef } from 'vue';
 
 import { isBoolean } from '@/utils/is';
-import { DEFAULTPAGESIZE, PAGESIZES } from '../const';
+import { APISETTING, DEFAULTPAGESIZE, PAGESIZES } from '../const';
 
 export function usePagination(refProps: ComputedRef<BasicTableProps>) {
   const configRef = ref<PaginationProps>({});
@@ -14,6 +14,7 @@ export function usePagination(refProps: ComputedRef<BasicTableProps>) {
     if (!unref(show) || (isBoolean(pagination) && !pagination)) {
       return false;
     }
+    const { totalField } = APISETTING;
     return {
       pageSize: DEFAULTPAGESIZE,
       pageSizes: PAGESIZES,
@@ -21,6 +22,7 @@ export function usePagination(refProps: ComputedRef<BasicTableProps>) {
       showQuickJumper: true,
       ...(isBoolean(pagination) ? {} : pagination),
       ...unref(configRef),
+      pageCount: unref(configRef)[totalField],
     };
   });
 

src/components/Table/src/props.ts

@@ -16,7 +16,7 @@ export const basicProps = {
     type: String,
     default: 'medium',
   },
-  tableData: {
+  dataSource: {
     type: [Object],
     default: () => [],
   },
@@ -28,7 +28,6 @@ export const basicProps = {
   request: {
     type: Function as PropType<(...arg: any[]) => Promise<any>>,
     default: null,
-    required: true,
   },
   rowKey: {
     type: [String, Function] as PropType<string | ((record) => string)>,

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

@@ -1,7 +1,5 @@
-// @ts-ignore
 import { NButton } from 'naive-ui';
-import { RoleEnum } from '@/enums/roleEnum';
-// @ts-ignore
+import { PermissionsEnum } from '@/enums/permissionsEnum';
 export interface ActionItem extends NButton.props {
   onClick?: Fn;
   label?: string;
@@ -11,7 +9,7 @@ export interface ActionItem extends NButton.props {
   disabled?: boolean;
   divider?: boolean;
   // 权限编码控制是否显示
-  auth?: RoleEnum | RoleEnum[] | string | string[];
+  auth?: PermissionsEnum | PermissionsEnum[] | string | string[];
   // 业务控制是否显示
   ifShow?: boolean | ((action: ActionItem) => boolean);
 }

src/components/Upload/src/BasicUpload.vue

@@ -101,8 +101,8 @@
       const state = reactive({
         showModal: false,
         previewUrl: '',
-        originalImgList: [],
-        imgList: [],
+        originalImgList: [] as string[],
+        imgList: [] as string[],
       });
 
       //赋值默认图片显示
@@ -176,7 +176,7 @@
         const result = res[infoField];
         //成功
         if (code === ResultEnum.SUCCESS) {
-          let imgUrl = getImgUrl(result.photo);
+          let imgUrl: string = getImgUrl(result.photo);
           state.imgList.push(imgUrl);
           state.originalImgList.push(result.photo);
           emit('uploadChange', state.originalImgList);
@@ -220,6 +220,7 @@
 
         &:hover {
           background: 0 0;
+
           .upload-card-item-info::before {
             opacity: 1;
           }

src/hooks/setting/useProjectSetting.ts

@@ -20,6 +20,10 @@ export function useProjectSetting() {
 
   const getShowFooter = computed(() => projectStore.showFooter);
 
+  const getIsPageAnimate = computed(() => projectStore.isPageAnimate);
+
+  const getPageAnimateType = computed(() => projectStore.pageAnimateType);
+
   return {
     getNavMode,
     getNavTheme,
@@ -29,5 +33,7 @@ export function useProjectSetting() {
     getCrumbsSetting,
     getPermissionMode,
     getShowFooter,
+    getIsPageAnimate,
+    getPageAnimateType,
   };
 }

src/hooks/web/usePermission.ts

@@ -7,8 +7,8 @@ export function usePermission() {
    * 检查权限
    * @param accesses
    */
-  function _someRoles(accesses: string[]) {
-    return userStore.getRoles.some((item) => {
+  function _somePermissions(accesses: string[]) {
+    return userStore.getPermissions.some((item) => {
       const { value }: any = item;
       return accesses.includes(value);
     });
@@ -20,7 +20,7 @@ export function usePermission() {
    * */
   function hasPermission(accesses: string[]): boolean {
     if (!accesses || !accesses.length) return true;
-    return _someRoles(accesses);
+    return _somePermissions(accesses);
   }
 
   /**
@@ -28,9 +28,9 @@ export function usePermission() {
    * @param accesses
    */
   function hasEveryPermission(accesses: string[]): boolean {
-    const rolesList = userStore.getRoles;
+    const permissionsList = userStore.getPermissions;
     if (Array.isArray(accesses)) {
-      return accesses.every((access) => !!rolesList[access]);
+      return permissionsList.every((access: any) => accesses.includes(access.value));
     }
     throw new Error(`[hasEveryPermission]: ${accesses} should be a array !`);
   }
@@ -41,9 +41,9 @@ export function usePermission() {
    * @param accessMap
    */
   function hasSomePermission(accesses: string[]): boolean {
-    const rolesList = userStore.getRoles;
+    const permissionsList = userStore.getPermissions;
     if (Array.isArray(accesses)) {
-      return accesses.some((access) => !!rolesList[access]);
+      return permissionsList.some((access: any) => accesses.includes(access.value));
     }
     throw new Error(`[hasSomePermission]: ${accesses} should be a array !`);
   }

src/layout/components/Header/ProjectSetting.vue

@@ -1,10 +1,10 @@
 <template>
-  <n-drawer v-model:show="isDrawer" :width="width" :placement="placement" :native-scrollbar="false">
-    <n-drawer-content :title="title">
+  <n-drawer v-model:show="isDrawer" :width="width" :placement="placement">
+    <n-drawer-content :title="title" :native-scrollbar="false">
       <div class="drawer">
         <n-divider title-placement="center">主题</n-divider>
 
-        <div class="drawer-setting-item justify-center dark-switch">
+        <div class="justify-center drawer-setting-item dark-switch">
           <n-tooltip placement="bottom">
             <template #trigger>
               <n-switch v-model:value="designStore.darkTheme" class="dark-theme-switch">
@@ -20,7 +20,7 @@
                 </template>
               </n-switch>
             </template>
-            <span>深色主题</span>
+            <span>{{ designStore.darkTheme ? '深' : '浅' }}色主题</span>
           </n-tooltip>
         </div>
 
@@ -46,7 +46,11 @@
           <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')"
+                  alt="左侧菜单模式"
+                />
               </template>
               <span>左侧菜单模式</span>
             </n-tooltip>
@@ -56,12 +60,30 @@
           <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"
+                  alt="顶部菜单模式"
+                  @click="togNavMode('horizontal')"
+                />
               </template>
               <span>顶部菜单模式</span>
             </n-tooltip>
             <n-badge dot color="#19be6b" v-show="settingStore.navMode === 'horizontal'" />
           </div>
+
+          <div class="drawer-setting-item-style">
+            <n-tooltip placement="top">
+              <template #trigger>
+                <img
+                  src="~@/assets/images/nav-horizontal-mix.svg"
+                  @click="togNavMode('horizontal-mix')"
+                  alt="顶部菜单混合模式"
+                />
+              </template>
+              <span>顶部菜单混合模式</span>
+            </n-tooltip>
+            <n-badge dot color="#19be6b" v-show="settingStore.navMode === 'horizontal-mix'" />
+          </div>
         </div>
 
         <n-divider title-placement="center">导航栏风格</n-divider>
@@ -70,7 +92,11 @@
           <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"
+                  alt="暗色侧边栏"
+                  @click="togNavTheme('dark')"
+                />
               </template>
               <span>暗色侧边栏</span>
             </n-tooltip>
@@ -80,21 +106,24 @@
           <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"
+                  alt="白色侧边栏"
+                  @click="togNavTheme('light')"
+                />
               </template>
               <span>白色侧边栏</span>
             </n-tooltip>
             <n-badge dot color="#19be6b" v-if="settingStore.navTheme === 'light'" />
           </div>
-        </div>
 
-        <div class="drawer-setting-item align-items-top">
           <div class="drawer-setting-item-style">
             <n-tooltip placement="top">
               <template #trigger>
                 <img
                   src="~@/assets/images/header-theme-dark.svg"
                   @click="togNavTheme('header-dark')"
+                  alt="暗色顶栏"
                 />
               </template>
               <span>暗色顶栏</span>
@@ -102,9 +131,18 @@
             <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-action">
+            <n-switch
+              :disabled="settingStore.navMode !== 'horizontal-mix'"
+              v-model:value="settingStore.menuSetting.mixMenu"
+            />
+          </div>
+        </div>
+
         <div class="drawer-setting-item">
           <div class="drawer-setting-item-title"> 固定顶栏 </div>
           <div class="drawer-setting-item-action">
@@ -165,6 +203,22 @@
         <!--          </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-action">
+            <n-switch v-model:value="settingStore.isPageAnimate" />
+          </div>
+        </div>
+
+        <div class="drawer-setting-item">
+          <div class="drawer-setting-item-title"> 动画类型 </div>
+          <div class="drawer-setting-item-select">
+            <n-select v-model:value="settingStore.pageAnimateType" :options="animateOptions" />
+          </div>
+        </div>
+
         <div class="drawer-setting-item">
           <n-alert type="warning" :showIcon="false">
             <p>{{ alertText }}</p>
@@ -176,12 +230,13 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, reactive, toRefs, watch } from 'vue';
+  import { defineComponent, reactive, toRefs, unref, watch, computed } 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';
+  import { animates as animateOptions } from '@/settings/animateSetting';
 
   export default defineComponent({
     name: 'ProjectSetting',
@@ -216,6 +271,10 @@
         }
       );
 
+      const directionsOptions = computed(() => {
+        return animateOptions.find((item) => item.value == unref(settingStore.pageAnimateType));
+      });
+
       function openDrawer() {
         state.isDrawer = true;
       }
@@ -237,11 +296,7 @@
 
       function togNavMode(mode) {
         settingStore.navMode = mode;
-        // if (mode === 'header-dark') {
-        //   settingStore.setNavTheme('dark');
-        // } else {
-        //   settingStore.setNavTheme('light');
-        // }
+        settingStore.menuSetting.mixMenu = false;
       }
 
       return {
@@ -254,6 +309,8 @@
         darkTheme,
         openDrawer,
         closeDrawer,
+        animateOptions,
+        directionsOptions,
       };
     },
   });
@@ -288,6 +345,10 @@
         flex: 0 0 auto;
       }
 
+      &-select {
+        flex: 1;
+      }
+
       .theme-item {
         width: 20px;
         min-width: 20px;
@@ -297,7 +358,7 @@
         border-radius: 2px;
         margin: 0 5px 5px 0;
         text-align: center;
-
+        line-height: 14px;
         .n-icon {
           color: #fff;
         }
@@ -312,6 +373,7 @@
     .justify-center {
       justify-content: center;
     }
+
     .dark-switch .n-switch {
       ::v-deep(.n-switch__rail) {
         background-color: #000e1c;

src/layout/components/Header/index.vue

@@ -1,8 +1,20 @@
 <template>
   <div class="layout-header">
     <!--顶部菜单-->
-    <div class="layout-header-left" v-if="navMode === 'horizontal'">
-      <AsideMenu v-model:collapsed="collapsed" :inverted="getInverted" mode="horizontal" />
+    <div
+      class="layout-header-left"
+      v-if="navMode === 'horizontal' || (navMode === 'horizontal-mix' && mixMenu)"
+    >
+      <div class="logo" v-if="navMode === 'horizontal'">
+        <img src="~@/assets/images/logo.png" alt="" />
+        <h2 v-show="!collapsed" class="title">NaiveUiAdmin</h2>
+      </div>
+      <AsideMenu
+        v-model:collapsed="collapsed"
+        v-model:location="getMenuLocation"
+        :inverted="getInverted"
+        mode="horizontal"
+      />
     </div>
     <!--左侧菜单-->
     <div class="layout-header-left" v-else>
@@ -161,6 +173,10 @@
         return ['light', 'header-dark'].includes(navTheme) ? props.inverted : !props.inverted;
       });
 
+      const mixMenu = computed(() => {
+        return unref(getMenuSetting).mixMenu;
+      });
+
       const getChangeStyle = computed(() => {
         const { collapsed } = props;
         const { minMenuWidth, menuWidth }: any = unref(getMenuSetting);
@@ -170,6 +186,10 @@
         };
       });
 
+      const getMenuLocation = computed(() => {
+        return 'header';
+      });
+
       const router = useRouter();
       const route = useRoute();
 
@@ -314,6 +334,8 @@
         drawerSetting,
         openSetting,
         getInverted,
+        getMenuLocation,
+        mixMenu,
       };
     },
   });
@@ -330,22 +352,34 @@
     transition: all 0.2s ease-in-out;
     width: 100%;
     z-index: 11;
-    //color: #fff;
-
-    //.n-icon {
-    //  color: #fff
-    //}
 
     &-left {
       display: flex;
       align-items: center;
 
-      ::v-deep(.ant-breadcrumb span:last-child .link-text) {
-        color: #515a6e;
+      .logo {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 64px;
+        line-height: 64px;
+        overflow: hidden;
+        white-space: nowrap;
+        padding-left: 10px;
+
+        img {
+          width: auto;
+          height: 32px;
+          margin-right: 10px;
+        }
+
+        .title {
+          margin-bottom: 0;
+        }
       }
 
-      ::v-deep(.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link) {
-        color: #fff;
+      ::v-deep(.ant-breadcrumb span:last-child .link-text) {
+        color: #515a6e;
       }
 
       .n-breadcrumb {

src/layout/components/Logo/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="logo">
-    <img src="~@/assets/images/logo.png" alt="" />
-    <h2 v-show="!collapsed" class="title">&nbsp;NaiveUiAdmin</h2>
+    <img src="~@/assets/images/logo.png" alt="" :class="{ 'mr-2': !collapsed }" />
+    <h2 v-show="!collapsed" class="title">NaiveUiAdmin</h2>
   </div>
 </template>
 
@@ -32,7 +32,6 @@
     }
 
     .title {
-      color: white;
       margin-bottom: 0;
     }
   }

src/layout/components/Main/index.vue

@@ -1,7 +1,7 @@
 <template>
   <RouterView>
     <template #default="{ Component, route }">
-      <transition name="zoom-fade" mode="out-in" appear>
+      <transition :name="getTransitionName" mode="out-in" appear>
         <keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
           <component :is="Component" :key="route.fullPath" />
         </keep-alive>
@@ -12,8 +12,9 @@
 </template>
 
 <script>
-  import { defineComponent, computed } from 'vue';
+  import { defineComponent, computed, unref } from 'vue';
   import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
+  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
 
   export default defineComponent({
     name: 'MainView',
@@ -29,11 +30,18 @@
       },
     },
     setup() {
+      const { getIsPageAnimate, getPageAnimateType } = useProjectSetting();
       const asyncRouteStore = useAsyncRouteStore();
       // 需要缓存的路由组件
       const keepAliveComponents = computed(() => asyncRouteStore.keepAliveComponents);
+
+      const getTransitionName = computed(() => {
+        return unref(getIsPageAnimate) ? unref(getPageAnimateType) : '';
+      });
+
       return {
         keepAliveComponents,
+        getTransitionName,
       };
     },
   });

src/layout/components/Menu/index.vue

@@ -8,18 +8,19 @@
     :collapsed-icon-size="20"
     :indent="24"
     :expanded-keys="openKeys"
-    v-model:value="selectedKeys"
+    :value="getSelectedKeys"
     @update:value="clickMenuItem"
     @update:expanded-keys="menuExpanded"
   />
 </template>
 
 <script lang="ts">
-  import { defineComponent, reactive, computed, watch, toRefs, unref } from 'vue';
+  import { defineComponent, ref, onMounted, reactive, computed, watch, toRefs, unref } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
-  import { generatorMenu } from '@/utils';
+  import { generatorMenu, generatorMenuMix } from '@/utils';
   import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
 
   export default defineComponent({
     name: 'Menu',
@@ -34,13 +35,26 @@
         // 侧边栏菜单是否收起
         type: Boolean,
       },
+      //位置
+      location: {
+        type: String,
+        default: 'left',
+      },
     },
-    setup(props) {
+    emits: ['update:collapsed'],
+    setup(props, { emit }) {
       // 当前路由
       const currentRoute = useRoute();
       const router = useRouter();
       const asyncRouteStore = useAsyncRouteStore();
       const settingStore = useProjectSettingStore();
+      const menus = ref<any[]>([]);
+      const selectedKeys = ref<string>(currentRoute.name as string);
+      const headerMenuSelectKey = ref<string>('');
+
+      const { getNavMode } = useProjectSetting();
+
+      const navMode = getNavMode;
 
       // 获取当前打开的子菜单
       const matched = currentRoute.matched;
@@ -49,36 +63,61 @@
 
       const state = reactive({
         openKeys: getOpenKeys,
-        selectedKeys: currentRoute.name,
       });
 
       const inverted = computed(() => {
         return ['dark', 'header-dark'].includes(settingStore.navTheme);
       });
 
-      const menus = computed(() => {
-        return generatorMenu(asyncRouteStore.getMenus);
+      const getSelectedKeys = computed(() => {
+        let location = props.location;
+        return location === 'left' || (location === 'header' && unref(navMode) === 'horizontal')
+          ? unref(selectedKeys)
+          : unref(headerMenuSelectKey);
       });
 
-      // 监听菜单收缩状态
+      // 监听分割菜单
       watch(
-        () => props.collapsed,
-        (newVal) => {
-          state.openKeys = newVal ? [] : getOpenKeys;
-          state.selectedKeys = currentRoute.name;
+        () => settingStore.menuSetting.mixMenu,
+        () => {
+          updateMenu();
+          if (props.collapsed) {
+            emit('update:collapsed', !props.collapsed);
+          }
         }
       );
 
+      // 监听菜单收缩状态
+      // watch(
+      //   () => props.collapsed,
+      //   (newVal) => {
+      //   }
+      // );
+
       // 跟随页面路由变化，切换菜单选中状态
       watch(
         () => currentRoute.fullPath,
         () => {
+          updateMenu();
           const matched = currentRoute.matched;
           state.openKeys = matched.map((item) => item.name);
-          state.selectedKeys = currentRoute.name;
+          const activeMenu: string = (currentRoute.meta?.activeMenu as string) || '';
+          selectedKeys.value = activeMenu ? (activeMenu as string) : (currentRoute.name as string);
         }
       );
 
+      function updateMenu() {
+        if (!settingStore.menuSetting.mixMenu) {
+          menus.value = generatorMenu(asyncRouteStore.getMenus);
+        } else {
+          //混合菜单
+          const firstRouteName: string = (currentRoute.matched[0].name as string) || '';
+          menus.value = generatorMenuMix(asyncRouteStore.getMenus, firstRouteName, props.location);
+          const activeMenu: string = currentRoute?.matched[0].meta?.activeMenu as string;
+          headerMenuSelectKey.value = (activeMenu ? activeMenu : firstRouteName) || '';
+        }
+      }
+
       // 点击菜单
       function clickMenuItem(key: string) {
         if (/http(s)?:/.test(key)) {
@@ -101,17 +140,24 @@
         if (!key) return false;
         const subRouteChildren: string[] = [];
         for (const { children, key } of unref(menus)) {
-          if (children && children.length > 0) {
+          if (children && children.length) {
             subRouteChildren.push(key as string);
           }
         }
         return subRouteChildren.includes(key);
       }
 
+      onMounted(() => {
+        updateMenu();
+      });
+
       return {
         ...toRefs(state),
         inverted,
         menus,
+        selectedKeys,
+        headerMenuSelectKey,
+        getSelectedKeys,
         clickMenuItem,
         menuExpanded,
       };

src/layout/components/TagsView/index.vue

@@ -5,6 +5,7 @@
       'tabs-view-fix': multiTabsSetting.fixed,
       'tabs-view-fixed-header': isMultiHeaderFixed,
       'tabs-view-default-background': getDarkTheme === false,
+      'tabs-view-dark-background': getDarkTheme === true,
     }"
     :style="getChangeStyle"
   >
@@ -29,27 +30,26 @@
           </n-icon>
         </span>
         <div ref="navScroll" class="tabs-card-scroll">
-          <div ref="navRef" class="tabs-card-nav" :style="getNavStyle">
-            <Draggable :list="tabsList" animation="300" item-key="fullPath" class="flex">
-              <template #item="{ element }">
-                <div
-                  class="tabs-card-scroll-item"
-                  :class="{ 'active-item': activeKey === element.path }"
-                  @click.stop="goPage(element)"
-                  @contextmenu="handleContextMenu($event, element)"
+          <Draggable :list="tabsList" animation="300" item-key="fullPath" class="flex">
+            <template #item="{ element }">
+              <div
+                :id="`tag${element.fullPath.split('/').join('\/')}`"
+                class="tabs-card-scroll-item"
+                :class="{ 'active-item': activeKey === element.path }"
+                @click.stop="goPage(element)"
+                @contextmenu="handleContextMenu($event, element)"
+              >
+                <span>{{ element.meta.title }}</span>
+                <n-icon
+                  size="14"
+                  @click.stop="closeTabItem(element)"
+                  v-if="element.path !== baseHome"
                 >
-                  <span>{{ element.meta.title }}</span>
-                  <n-icon
-                    size="14"
-                    @click.stop="closeTabItem(element)"
-                    v-if="element.path != baseHome"
-                  >
-                    <CloseOutlined />
-                  </n-icon>
-                </div>
-              </template>
-            </Draggable>
-          </div>
+                  <CloseOutlined />
+                </n-icon>
+              </div>
+            </template>
+          </Draggable>
         </div>
       </div>
       <div class="tabs-close">
@@ -59,7 +59,7 @@
           placement="bottom-end"
           :options="TabsMenuOptions"
         >
-          <div class="tabs-close-btn" @click.prevent>
+          <div class="tabs-close-btn">
             <n-icon size="16" color="#515a6e">
               <DownOutlined />
             </n-icon>
@@ -86,7 +86,6 @@
     computed,
     ref,
     toRefs,
-    toRaw,
     unref,
     provide,
     watch,
@@ -101,8 +100,7 @@
   import { RouteItem } from '@/store/modules/tabsView';
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
   import { useMessage } from 'naive-ui';
-  // @ts-ignore
-  import Draggable from 'vuedraggable/src/vuedraggable';
+  import Draggable from 'vuedraggable';
   import { PageEnum } from '@/enums/pageEnum';
   import {
     DownOutlined,
@@ -113,9 +111,11 @@
     LeftOutlined,
     RightOutlined,
   } from '@vicons/antd';
-  import { renderIcon } from '@/utils/index';
+  import { renderIcon } from '@/utils';
   import elementResizeDetectorMaker from 'element-resize-detector';
   import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+  import { useThemeVars } from 'naive-ui';
 
   export default defineComponent({
     name: 'TabsView',
@@ -132,26 +132,33 @@
       },
     },
     setup(props) {
-      const { getDarkTheme } = useDesignSetting();
+      const { getDarkTheme, getAppTheme } = useDesignSetting();
       const { getNavMode, getHeaderSetting, getMenuSetting, getMultiTabsSetting } =
         useProjectSetting();
+      const settingStore = useProjectSettingStore();
 
       const message = useMessage();
       const route = useRoute();
       const router = useRouter();
       const tabsViewStore = useTabsViewStore();
       const asyncRouteStore = useAsyncRouteStore();
-      const navRef: any = ref(null);
       const navScroll: any = ref(null);
       const navWrap: any = ref(null);
       const isCurrent = ref(false);
 
+      const themeVars = useThemeVars();
+
+      const getCardColor = computed(() => {
+        return themeVars.value.cardColor;
+      });
+
+      const getBaseColor = computed(() => {
+        return themeVars.value.textColor1;
+      });
+
       const state = reactive({
         activeKey: route.fullPath,
         scrollable: false,
-        navStyle: {
-          transform: '',
-        },
         dropdownX: 0,
         dropdownY: 0,
         showDropdown: false,
@@ -165,6 +172,14 @@
         return { fullPath, hash, meta, name, params, path, query };
       };
 
+      const isMixMenuNoneSub = computed(() => {
+        const mixMenu = settingStore.menuSetting.mixMenu;
+        const currentRoute = useRoute();
+        const navMode = unref(getNavMode);
+        if (unref(navMode) != 'horizontal-mix') return true;
+        return !(unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot);
+      });
+
       //动态组装样式 菜单缩进
       const getChangeStyle = computed(() => {
         const { collapsed } = props;
@@ -172,7 +187,11 @@
         const { minMenuWidth, menuWidth }: any = unref(getMenuSetting);
         const { fixed }: any = unref(getMultiTabsSetting);
         let lenNum =
-          navMode === 'horizontal' ? '0px' : collapsed ? `${minMenuWidth}px` : `${menuWidth}px`;
+          navMode === 'horizontal' || !isMixMenuNoneSub.value
+            ? '0px'
+            : collapsed
+            ? `${minMenuWidth}px`
+            : `${menuWidth}px`;
         return {
           left: lenNum,
           width: `calc(100% - ${!fixed ? '0px' : lenNum})`,
@@ -181,7 +200,7 @@
 
       //tags 右侧下拉菜单
       const TabsMenuOptions = computed(() => {
-        const isDisabled = unref(tabsList).length <= 1 ? true : false;
+        const isDisabled = unref(tabsList).length <= 1;
         return [
           {
             label: '刷新当前',
@@ -209,17 +228,27 @@
         ];
       });
 
-      let routes: RouteItem[] = [];
-
+      let cacheRoutes: RouteItem[] = [];
+      const simpleRoute = getSimpleRoute(route);
       try {
         const routesStr = storage.get(TABS_ROUTES) as string | null | undefined;
-        routes = routesStr ? JSON.parse(routesStr) : [getSimpleRoute(route)];
+        cacheRoutes = routesStr ? JSON.parse(routesStr) : [simpleRoute];
       } catch (e) {
-        routes = [getSimpleRoute(route)];
+        cacheRoutes = [simpleRoute];
       }
 
+      // 将最新的路由信息同步到 localStorage 中
+      const routes = router.getRoutes();
+      cacheRoutes.forEach((cacheRoute) => {
+        const route = routes.find((route) => route.path === cacheRoute.path);
+        if (route) {
+          cacheRoute.meta = route.meta || cacheRoute.meta;
+          cacheRoute.name = (route.name || cacheRoute.name) as string;
+        }
+      });
+
       // 初始化标签页
-      tabsViewStore.initTabs(routes);
+      tabsViewStore.initTabs(cacheRoutes);
 
       //监听滚动条
       function onScroll(e) {
@@ -228,11 +257,11 @@
           document.documentElement.scrollTop ||
           window.pageYOffset ||
           document.body.scrollTop; // 滚动条偏移量
-        if (!getHeaderSetting.fixed && getMultiTabsSetting.fixed && scrollTop >= 64) {
-          state.isMultiHeaderFixed = true;
-        } else {
-          state.isMultiHeaderFixed = false;
-        }
+        state.isMultiHeaderFixed = !!(
+          !getHeaderSetting.fixed &&
+          getMultiTabsSetting.fixed &&
+          scrollTop >= 64
+        );
       }
 
       window.addEventListener('scroll', onScroll, true);
@@ -264,7 +293,7 @@
           if (whiteList.includes(route.name as string)) return;
           state.activeKey = to;
           tabsViewStore.addTabs(getSimpleRoute(route));
-          updateNavScroll();
+          updateNavScroll(true);
         },
         { immediate: true }
       );
@@ -354,66 +383,76 @@
             break;
         }
         updateNavScroll();
+        state.showDropdown = false;
       };
 
-      function getCurrentScrollOffset() {
-        const { navStyle } = state;
-        const transform: any = toRaw(navStyle.transform);
-        return transform ? Number(transform.match(/translateX\(-(\d+(\.\d+)*)px\)/)[1]) : 0;
-      }
-
-      function setOffset(value) {
-        state.navStyle.transform = `translateX(-${value}px)`;
+      /**
+       * @param value 要滚动到的位置
+       * @param amplitude 每次滚动的长度
+       */
+      function scrollTo(value: number, amplitude: number) {
+        const currentScroll = navScroll.value.scrollLeft;
+        const scrollWidth =
+          (amplitude > 0 && currentScroll + amplitude >= value) ||
+          (amplitude < 0 && currentScroll + amplitude <= value)
+            ? value
+            : currentScroll + amplitude;
+        navScroll.value && navScroll.value.scrollTo(scrollWidth, 0);
+        if (scrollWidth === value) return;
+        return window.requestAnimationFrame(() => scrollTo(value, amplitude));
       }
 
       function scrollPrev() {
         const containerWidth = navScroll.value.offsetWidth;
-        const currentOffset = getCurrentScrollOffset();
-        if (!currentOffset) return;
-        let newOffset = currentOffset > containerWidth ? currentOffset - containerWidth : 0;
-        setOffset(newOffset);
+        const currentScroll = navScroll.value.scrollLeft;
+
+        if (!currentScroll) return;
+        const scrollLeft = currentScroll > containerWidth ? currentScroll - containerWidth : 0;
+        scrollTo(scrollLeft, (scrollLeft - currentScroll) / 20);
       }
 
       function scrollNext() {
-        const navWidth = navRef.value.scrollWidth;
         const containerWidth = navScroll.value.offsetWidth;
-        const currentOffset = getCurrentScrollOffset();
-        if (navWidth - currentOffset <= containerWidth) return;
+        const navWidth = navScroll.value.scrollWidth;
+        const currentScroll = navScroll.value.scrollLeft;
 
-        let newOffset =
-          navWidth - currentOffset > containerWidth * 2
-            ? currentOffset + containerWidth
+        if (navWidth - currentScroll <= containerWidth) return;
+        const scrollLeft =
+          navWidth - currentScroll > containerWidth * 2
+            ? currentScroll + containerWidth
             : navWidth - containerWidth;
-
-        setOffset(newOffset);
+        scrollTo(scrollLeft, (scrollLeft - currentScroll) / 20);
       }
 
-      function updateNavScroll() {
-        if (!navRef.value) return;
-        let navWidth = navRef.value.scrollWidth;
-        let containerWidth = navScroll.value.offsetWidth;
-        const currentOffset = getCurrentScrollOffset();
+      /**
+       * @param autoScroll 是否开启自动滚动功能
+       */
+      async function updateNavScroll(autoScroll?: boolean) {
+        await nextTick();
+        if (!navScroll.value) return;
+        const containerWidth = navScroll.value.offsetWidth;
+        const navWidth = navScroll.value.scrollWidth;
+
         if (containerWidth < navWidth) {
           state.scrollable = true;
-          if (navWidth - currentOffset < containerWidth) {
-            setOffset(navWidth - containerWidth);
+          if (autoScroll) {
+            let tagList = navScroll.value.querySelectorAll('.tabs-card-scroll-item') || [];
+            [...tagList].forEach((tag: HTMLElement) => {
+              // fix SyntaxError
+              if (tag.id === `tag${state.activeKey.split('/').join('\/')}`) {
+                tag.scrollIntoView && tag.scrollIntoView();
+              }
+            });
           }
         } else {
           state.scrollable = false;
-          if (currentOffset > 0) {
-            setOffset(0);
-          }
         }
       }
 
       function handleResize() {
-        updateNavScroll();
+        updateNavScroll(true);
       }
 
-      const getNavStyle = computed(() => {
-        return state.navStyle;
-      });
-
       function handleContextMenu(e, item) {
         e.preventDefault();
         isCurrent.value = PageEnum.BASE_HOME_REDIRECT === item.path;
@@ -457,7 +496,6 @@
       return {
         ...toRefs(state),
         navWrap,
-        navRef,
         navScroll,
         route,
         tabsList,
@@ -474,10 +512,12 @@
         closeHandleSelect,
         scrollNext,
         scrollPrev,
-        getNavStyle,
         handleContextMenu,
         onClickOutside,
         getDarkTheme,
+        getAppTheme,
+        getCardColor,
+        getBaseColor,
       };
     },
   });
@@ -534,22 +574,12 @@
         }
 
         &-scroll {
-          overflow: hidden;
           white-space: nowrap;
-
-          .tabs-card-nav {
-            padding-left: 0;
-            margin: 0;
-            float: left;
-            list-style: none;
-            box-sizing: border-box;
-            position: relative;
-            transition: transform 0.5s ease-in-out;
-          }
+          overflow: hidden;
 
           &-item {
-            background: var(--color);
-            color: var(--text-color);
+            background: v-bind(getCardColor);
+            color: v-bind(getBaseColor);
             height: 32px;
             padding: 6px 16px 4px;
             border-radius: 3px;
@@ -589,7 +619,7 @@
           }
 
           .active-item {
-            color: #2d8cf0;
+            color: v-bind(getAppTheme);
           }
         }
       }
@@ -625,6 +655,10 @@
     background: #f5f7f9;
   }
 
+  .tabs-view-dark-background {
+    background: #101014;
+  }
+
   .tabs-view-fix {
     position: fixed;
     z-index: 5;

src/layout/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <NLayout class="layout" :position="fixedMenu" has-sider>
-    <NLayoutSider
-      v-if="navMode === 'vertical'"
-      show-trigger
+  <n-layout class="layout" :position="fixedMenu" has-sider>
+    <n-layout-sider
+      v-if="isMixMenuNoneSub && (navMode === 'vertical' || navMode === 'horizontal-mix')"
+      show-trigger="bar"
       @collapse="collapsed = true"
       :position="fixedMenu"
       @expand="collapsed = false"
@@ -15,15 +15,15 @@
       class="layout-sider"
     >
       <Logo :collapsed="collapsed" />
-      <AsideMenu v-model:collapsed="collapsed" />
-    </NLayoutSider>
+      <AsideMenu v-model:collapsed="collapsed" v-model:location="getMenuLocation" />
+    </n-layout-sider>
 
-    <NLayout :inverted="inverted">
-      <NLayoutHeader :inverted="getHeaderInverted" :position="fixedHeader">
+    <n-layout :inverted="inverted">
+      <n-layout-header :inverted="getHeaderInverted" :position="fixedHeader">
         <PageHeader v-model:collapsed="collapsed" :inverted="inverted" />
-      </NLayoutHeader>
+      </n-layout-header>
 
-      <NLayoutContent
+      <n-layout-content
         class="layout-content"
         :class="{ 'layout-default-background': getDarkTheme === false }"
       >
@@ -50,13 +50,14 @@
         <!--        <NLayoutFooter v-if="getShowFooter">-->
         <!--          <PageFooter />-->
         <!--        </NLayoutFooter>-->
-      </NLayoutContent>
-    </NLayout>
-  </NLayout>
+      </n-layout-content>
+      <n-back-top :right="100" />
+    </n-layout>
+  </n-layout>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref, unref, computed, onMounted } from 'vue';
+<script lang="ts" setup>
+  import { ref, unref, computed, onMounted } from 'vue';
   import { Logo } from './components/Logo';
   import { TabsView } from './components/TagsView';
   import { MainView } from './components/Main';
@@ -65,100 +66,90 @@
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
   import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
   import { useLoadingBar } from 'naive-ui';
+  import { useRoute } from 'vue-router';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
 
-  export default defineComponent({
-    name: 'Layout',
-    components: {
-      TabsView,
-      MainView,
-      PageHeader,
-      AsideMenu,
-      Logo,
-    },
-    setup() {
-      const { getDarkTheme } = useDesignSetting();
+  const { getDarkTheme } = useDesignSetting();
+  const {
+    getShowFooter,
+    getNavMode,
+    getNavTheme,
+    getHeaderSetting,
+    getMenuSetting,
+    getMultiTabsSetting,
+  } = useProjectSetting();
 
-      const {
-        getShowFooter,
-        getNavMode,
-        getNavTheme,
-        getHeaderSetting,
-        getMenuSetting,
-        getMultiTabsSetting,
-      } = useProjectSetting();
+  const settingStore = useProjectSettingStore();
 
-      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 isMixMenuNoneSub = computed(() => {
+    const mixMenu = settingStore.menuSetting.mixMenu;
+    const currentRoute = useRoute();
+    if (unref(navMode) != 'horizontal-mix') return true;
+    if (unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot) {
+      return false;
+    }
+    return true;
+  });
 
-      const isMultiTabs = computed(() => {
-        return unref(getMultiTabsSetting).show;
-      });
+  const fixedMenu = computed(() => {
+    const { fixed } = unref(getHeaderSetting);
+    return fixed ? 'absolute' : 'static';
+  });
 
-      const fixedMulti = computed(() => {
-        return unref(getMultiTabsSetting).fixed;
-      });
+  const isMultiTabs = computed(() => {
+    return unref(getMultiTabsSetting).show;
+  });
 
-      const inverted = computed(() => {
-        return ['dark', 'header-dark'].includes(unref(getNavTheme));
-      });
+  const fixedMulti = computed(() => {
+    return unref(getMultiTabsSetting).fixed;
+  });
 
-      const getHeaderInverted = computed(() => {
-        const navTheme = unref(getNavTheme);
-        return ['light', 'header-dark'].includes(navTheme) ? unref(inverted) : !unref(inverted);
-      });
+  const inverted = computed(() => {
+    return ['dark', 'header-dark'].includes(unref(getNavTheme));
+  });
 
-      const leftMenuWidth = computed(() => {
-        const { minMenuWidth, menuWidth } = unref(getMenuSetting);
-        return collapsed.value ? minMenuWidth : menuWidth;
-      });
+  const getHeaderInverted = computed(() => {
+    const navTheme = unref(getNavTheme);
+    return ['light', 'header-dark'].includes(navTheme) ? unref(inverted) : !unref(inverted);
+  });
 
-      const getChangeStyle = computed(() => {
-        const { minMenuWidth, menuWidth } = unref(getMenuSetting);
-        return {
-          'padding-left': collapsed.value ? `${minMenuWidth}px` : `${menuWidth}px`,
-        };
-      });
+  const leftMenuWidth = computed(() => {
+    const { minMenuWidth, menuWidth } = unref(getMenuSetting);
+    return collapsed.value ? minMenuWidth : menuWidth;
+  });
 
-      function watchWidth() {
-        const Width = document.body.clientWidth;
-        if (Width <= 950) {
-          collapsed.value = true;
-        } else collapsed.value = false;
-      }
+  const getChangeStyle = computed(() => {
+    const { minMenuWidth, menuWidth } = unref(getMenuSetting);
+    return {
+      'padding-left': collapsed.value ? `${minMenuWidth}px` : `${menuWidth}px`,
+    };
+  });
 
-      onMounted(() => {
-        window.addEventListener('resize', watchWidth);
-        //挂载在 window 方便与在js中使用
-        window['$loading'] = useLoadingBar();
-        window['$loading'].finish();
-      });
+  const getMenuLocation = computed(() => {
+    return 'left';
+  });
 
-      return {
-        fixedMenu,
-        fixedMulti,
-        fixedHeader,
-        collapsed,
-        inverted,
-        isMultiTabs,
-        leftMenuWidth,
-        getChangeStyle,
-        navMode,
-        getShowFooter,
-        getDarkTheme,
-        getHeaderInverted,
-      };
-    },
+  const watchWidth = () => {
+    const Width = document.body.clientWidth;
+    if (Width <= 950) {
+      collapsed.value = true;
+    } else collapsed.value = false;
+  };
+
+  onMounted(() => {
+    window.addEventListener('resize', watchWidth);
+    //挂载在 window 方便与在js中使用
+    window['$loading'] = useLoadingBar();
+    window['$loading'].finish();
   });
 </script>
 

src/plugins/naive.ts

@@ -65,6 +65,7 @@ import {
   NSpin,
   NTimePicker,
   NBackTop,
+  NSkeleton,
 } from 'naive-ui';
 
 const naive = create({
@@ -133,6 +134,7 @@ const naive = create({
     NSpin,
     NTimePicker,
     NBackTop,
+    NSkeleton,
   ],
 });
 

src/router/base.ts

@@ -13,7 +13,7 @@ export const ErrorPageRoute: AppRouteRecordRaw = {
   children: [
     {
       path: '/:path(.*)*',
-      name: 'ErrorPage',
+      name: 'ErrorPageSon',
       component: ErrorPage,
       meta: {
         title: 'ErrorPage',

src/router/constantRouterComponents.ts

@@ -1,16 +0,0 @@
-import { renderIcon } from '@/utils/index';
-import { DashboardOutlined } from '@vicons/antd';
-// import { RouterTransition } from '@/components/transition'
-
-//前端路由映射表
-export const constantRouterComponents = {
-  Layout: () => import('@/layout/index.vue'), //布局
-  DashboardConsole: () => import('@/views/dashboard/console/console.vue'), // 主控台
-  DashboardMonitor: () => import('@/views/dashboard/monitor/monitor.vue'), // 监控页
-  DashboardWorkplace: () => import('@/views/dashboard/workplace/workplace.vue'), // 工作台
-};
-
-//前端路由图标映射表
-export const constantRouterIcon = {
-  DashboardOutlined: renderIcon(DashboardOutlined),
-};

src/router/generator-routers.ts

@@ -1,12 +1,17 @@
 import { adminMenus } from '@/api/system/menu';
-import { constantRouterComponents, constantRouterIcon } from './constantRouterComponents';
-import router from '@/router/index';
-import { constantRouter } from '@/router/index';
+import { constantRouterIcon } from './router-icons';
 import { RouteRecordRaw } from 'vue-router';
+import { Layout, ParentLayout } from '@/router/constant';
+import type { AppRouteRecordRaw } from '@/router/types';
+
+const Iframe = () => import('@/views/iframe/index.vue');
+const LayoutMap = new Map<string, () => Promise<typeof import('*.vue')>>();
+
+LayoutMap.set('LAYOUT', Layout);
+LayoutMap.set('IFRAME', Iframe);
 
 /**
  * 格式化 后端 结构信息并递归生成层级路由表
- *
  * @param routerMap
  * @param parent
  * @returns {*}
@@ -19,21 +24,24 @@ export const routerGenerator = (routerMap, parent?): any[] => {
       // 路由名称，建议唯一
       name: item.name || '',
       // 该路由对应页面的 组件
-      component: constantRouterComponents[item.component],
+      component: item.component,
       // meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)
       meta: {
         ...item.meta,
         label: item.meta.title,
         icon: constantRouterIcon[item.meta.icon] || null,
-        permission: item.meta.permission || null,
+        permissions: item.meta.permissions || null,
       },
     };
+
     // 为了防止出现后端返回结果不规范，处理有可能出现拼接出两个 反斜杠
     currentRouter.path = currentRouter.path.replace('//', '/');
     // 重定向
     item.redirect && (currentRouter.redirect = item.redirect);
     // 是否有子菜单，并递归处理
     if (item.children && item.children.length > 0) {
+      //如果未定义 redirect 默认第一个子路由为 redirect
+      !item.redirect && (currentRouter.redirect = `${item.path}/${item.children[0].path}`);
       // Recursion
       currentRouter.children = routerGenerator(item.children, currentRouter);
     }
@@ -43,7 +51,6 @@ export const routerGenerator = (routerMap, parent?): any[] => {
 
 /**
  * 动态生成菜单
- * @param token
  * @returns {Promise<Router>}
  */
 export const generatorDynamicRouter = (): Promise<RouteRecordRaw[]> => {
@@ -51,14 +58,65 @@ export const generatorDynamicRouter = (): Promise<RouteRecordRaw[]> => {
     adminMenus()
       .then((result) => {
         const routeList = routerGenerator(result);
-        const asyncRoutesList = [...constantRouter, ...routeList];
-        asyncRoutesList.forEach((item) => {
-          router.addRoute(item);
-        });
-        resolve(asyncRoutesList);
+        asyncImportRoute(routeList);
+
+        resolve(routeList);
       })
       .catch((err) => {
         reject(err);
       });
   });
 };
+
+/**
+ * 查找views中对应的组件文件
+ * */
+let viewsModules: Record<string, () => Promise<Recordable>>;
+export const asyncImportRoute = (routes: AppRouteRecordRaw[] | undefined): void => {
+  viewsModules = viewsModules || import.meta.glob('../views/**/*.{vue,tsx}');
+  if (!routes) return;
+  routes.forEach((item) => {
+    if (!item.component && item.meta?.frameSrc) {
+      item.component = 'IFRAME';
+    }
+    const { component, name } = item;
+    const { children } = item;
+    if (component) {
+      const layoutFound = LayoutMap.get(component as string);
+      if (layoutFound) {
+        item.component = layoutFound;
+      } else {
+        item.component = dynamicImport(viewsModules, component as string);
+      }
+    } else if (name) {
+      item.component = ParentLayout;
+    }
+    children && asyncImportRoute(children);
+  });
+};
+
+/**
+ * 动态导入
+ * */
+export const dynamicImport = (
+  viewsModules: Record<string, () => Promise<Recordable>>,
+  component: string
+) => {
+  const keys = Object.keys(viewsModules);
+  const matchKeys = keys.filter((key) => {
+    let k = key.replace('../views', '');
+    const lastIndex = k.lastIndexOf('.');
+    k = k.substring(0, lastIndex);
+    return k === component;
+  });
+  if (matchKeys?.length === 1) {
+    const matchKey = matchKeys[0];
+    return viewsModules[matchKey];
+  }
+  if (matchKeys?.length > 1) {
+    console.warn(
+      'Please do not create `.vue` and `.TSX` files with the same file name in the same hierarchical directory under the views folder. This will cause dynamic introduction failure'
+    );
+    return;
+  }
+};

src/router/index.ts

@@ -1,10 +1,9 @@
 import { App } from 'vue';
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
-import { ErrorPageRoute, RedirectRoute } from '@/router/base';
+import { RedirectRoute } from '@/router/base';
 import { PageEnum } from '@/enums/pageEnum';
 import { createRouterGuards } from './router-guards';
 
-// @ts-ignore
 const modules = import.meta.globEager('./modules/**/*.ts');
 
 const routeModuleList: RouteRecordRaw[] = [];
@@ -40,7 +39,7 @@ export const LoginRoute: RouteRecordRaw = {
 };
 
 //需要验证权限
-export const asyncRoutes = [ErrorPageRoute, ...routeModuleList];
+export const asyncRoutes = [...routeModuleList];
 
 //普通路由 无需验证权限
 export const constantRouter: any[] = [LoginRoute, RootRoute, RedirectRoute];

src/router/modules/about.ts

@@ -0,0 +1,32 @@
+import { RouteRecordRaw } from 'vue-router';
+import { Layout } from '@/router/constant';
+import { ProjectOutlined } from '@vicons/antd';
+import { renderIcon, renderNew } from '@/utils/index';
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/about',
+    name: 'about',
+    component: Layout,
+    meta: {
+      sort: 10,
+      isRoot: true,
+      activeMenu: 'about_index',
+      icon: renderIcon(ProjectOutlined),
+    },
+    children: [
+      {
+        path: 'index',
+        name: `about_index`,
+        meta: {
+          title: '关于',
+          extra: renderNew(),
+          activeMenu: 'about_index',
+        },
+        component: () => import('@/views/about/index.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;

src/router/modules/comp.ts

@@ -1,7 +1,7 @@
 import { RouteRecordRaw } from 'vue-router';
 import { Layout, ParentLayout } from '@/router/constant';
 import { WalletOutlined } from '@vicons/antd';
-import { renderIcon } from '@/utils/index';
+import { renderIcon, renderNew } from '@/utils';
 
 const routeName = 'comp';
 
@@ -106,6 +106,24 @@ const routes: Array<RouteRecordRaw> = [
         },
         component: () => import('@/views/comp/modal/index.vue'),
       },
+      {
+        path: 'richtext',
+        name: `richtext`,
+        meta: {
+          title: '富文本',
+          extra: renderNew(),
+        },
+        component: () => import('@/views/comp/richtext/vue-quill.vue'),
+      },
+      {
+        path: 'drag',
+        name: `Drag`,
+        meta: {
+          title: '拖拽',
+          extra: renderNew(),
+        },
+        component: () => import('@/views/comp/drag/index.vue'),
+      },
     ],
   },
 ];

src/router/modules/dashboard.ts

@@ -24,7 +24,7 @@ const routes: Array<RouteRecordRaw> = [
     meta: {
       title: 'Dashboard',
       icon: renderIcon(DashboardOutlined),
-      permission: ['dashboard_console', 'dashboard_console', 'dashboard_workplace'],
+      permissions: ['dashboard_console', 'dashboard_console', 'dashboard_workplace'],
       sort: 0,
     },
     children: [
@@ -33,7 +33,7 @@ const routes: Array<RouteRecordRaw> = [
         name: `${routeName}_console`,
         meta: {
           title: '主控台',
-          permission: ['dashboard_console'],
+          permissions: ['dashboard_console'],
         },
         component: () => import('@/views/dashboard/console/console.vue'),
       },
@@ -42,7 +42,7 @@ const routes: Array<RouteRecordRaw> = [
       //   name: `${ routeName }_monitor`,
       //   meta: {
       //     title: '监控页',
-      //     permission: ['dashboard_monitor']
+      //     permissions: ['dashboard_monitor']
       //   },
       //   component: () => import('@/views/dashboard/monitor/monitor.vue')
       // },
@@ -52,7 +52,7 @@ const routes: Array<RouteRecordRaw> = [
         meta: {
           title: '工作台',
           keepAlive: true,
-          permission: ['dashboard_workplace'],
+          permissions: ['dashboard_workplace'],
         },
         component: () => import('@/views/dashboard/workplace/workplace.vue'),
       },

src/router/modules/docs.ts

@@ -1,18 +1,17 @@
 import { RouteRecordRaw } from 'vue-router';
 import { Layout } from '@/router/constant';
 import { DocumentTextOutline } from '@vicons/ionicons5';
-import { renderIcon, renderNew } from '@/utils/index';
+import { renderIcon } from '@/utils/index';
 
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/external',
-    name: 'https://jekip.github.io/docs/',
+    name: 'https://naive-ui-admin-docs.vercel.app',
     component: Layout,
     meta: {
       title: '项目文档',
       icon: renderIcon(DocumentTextOutline),
-      sort: 8,
-      extra: renderNew(),
+      sort: 9,
     },
   },
 ];

src/router/modules/frame.ts

@@ -0,0 +1,42 @@
+import { RouteRecordRaw } from 'vue-router';
+import { Layout } from '@/router/constant';
+import { DesktopOutline } from '@vicons/ionicons5';
+import { renderIcon } from '@/utils/index';
+
+const IFrame = () => import('@/views/iframe/index.vue');
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/frame',
+    name: 'Frame',
+    redirect: '/frame/docs',
+    component: Layout,
+    meta: {
+      title: '外部页面',
+      sort: 8,
+      icon: renderIcon(DesktopOutline),
+    },
+    children: [
+      {
+        path: 'docs',
+        name: 'frame-docs',
+        meta: {
+          title: '项目文档(内嵌)',
+          frameSrc: 'https://naive-ui-admin-docs.vercel.app',
+        },
+        component: IFrame,
+      },
+      {
+        path: 'naive',
+        name: 'frame-naive',
+        meta: {
+          title: 'NaiveUi(内嵌)',
+          frameSrc: 'https://www.naiveui.com',
+        },
+        component: IFrame,
+      },
+    ],
+  },
+];
+
+export default routes;

src/router/modules/list.ts

@@ -1,7 +1,7 @@
 import { RouteRecordRaw } from 'vue-router';
 import { Layout } from '@/router/constant';
 import { TableOutlined } from '@vicons/antd';
-import { renderIcon, renderNew } from '@/utils/index';
+import { renderIcon } from '@/utils/index';
 
 /**
  * @param name 路由名称, 必须设置,且不能重名
@@ -31,7 +31,6 @@ const routes: Array<RouteRecordRaw> = [
         name: 'basic-list',
         meta: {
           title: '基础列表',
-          extra: renderNew(),
         },
         component: () => import('@/views/list/basicList/index.vue'),
       },
@@ -41,6 +40,7 @@ const routes: Array<RouteRecordRaw> = [
         meta: {
           title: '基础详情',
           hidden: true,
+          activeMenu: 'basic-list',
         },
         component: () => import('@/views/list/basicList/info.vue'),
       },

src/router/router-guards.ts

@@ -1,9 +1,11 @@
+import type { RouteRecordRaw } from 'vue-router';
 import { isNavigationFailure, Router } from 'vue-router';
 import { useUserStoreWidthOut } from '@/store/modules/user';
 import { useAsyncRouteStoreWidthOut } from '@/store/modules/asyncRoute';
 import { ACCESS_TOKEN } from '@/store/mutation-types';
 import { storage } from '@/utils/Storage';
 import { PageEnum } from '@/enums/pageEnum';
+import { ErrorPageRoute } from '@/router/base';
 
 const LOGIN_PATH = PageEnum.BASE_LOGIN;
 
@@ -29,7 +31,7 @@ export function createRouterGuards(router: Router) {
     const token = storage.get(ACCESS_TOKEN);
 
     if (!token) {
-      // You can access without permission. You need to set the routing meta.ignoreAuth to true
+      // You can access without permissions. You need to set the routing meta.ignoreAuth to true
       if (to.meta.ignoreAuth) {
         next();
         return;
@@ -60,9 +62,15 @@ export function createRouterGuards(router: Router) {
 
     // 动态添加可访问路由表
     routes.forEach((item) => {
-      router.addRoute(item);
+      router.addRoute(item as unknown as RouteRecordRaw);
     });
 
+    //添加404
+    const isErrorPage = router.getRoutes().findIndex((item) => item.name === ErrorPageRoute.name);
+    if (isErrorPage === -1) {
+      router.addRoute(ErrorPageRoute as unknown as RouteRecordRaw);
+    }
+
     const redirectPath = (from.query.redirect || to.path) as string;
     const redirect = decodeURIComponent(redirectPath);
     const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };

src/router/router-icons.ts

@@ -0,0 +1,7 @@
+import { renderIcon } from '@/utils/index';
+import { DashboardOutlined } from '@vicons/antd';
+
+//前端路由图标映射表
+export const constantRouterIcon = {
+  DashboardOutlined: renderIcon(DashboardOutlined),
+};

src/router/types.ts

@@ -1,13 +1,11 @@
 import type { RouteRecordRaw, RouteMeta } from 'vue-router';
 import { defineComponent } from 'vue';
-import { RoleEnum } from '@/enums/roleEnum';
 
 export type Component<T extends any = any> =
   | ReturnType<typeof defineComponent>
   | (() => Promise<typeof import('*.vue')>)
   | (() => Promise<T>);
 
-// @ts-ignore
 export interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
   name: string;
   meta: RouteMeta;
@@ -23,7 +21,7 @@ export interface Meta {
   title: string;
   // 是否忽略权限
   ignoreAuth?: boolean;
-  roles?: RoleEnum[];
+  permissions?: string[];
   // 是否不缓存
   noKeepAlive?: boolean;
   // 是否固定在tab上
@@ -34,4 +32,24 @@ export interface Meta {
   frameSrc?: string;
   // 外链跳转地址
   externalLink?: string;
+  //隐藏
+  hidden?: boolean;
+}
+
+export interface Menu {
+  title: string;
+  label: string;
+  key: string;
+  meta: RouteMeta;
+  name: string;
+  component?: Component | string;
+  components?: Component;
+  children?: AppRouteRecordRaw[];
+  props?: Recordable;
+  fullPath?: string;
+  icon?: any;
+  path: string;
+  permissions?: string[];
+  redirect?: string;
+  sort?: number;
 }

src/settings/animateSetting.ts

@@ -0,0 +1,8 @@
+export const animates = [
+  { value: 'zoom-fade', label: '渐变' },
+  { value: 'zoom-out', label: '闪现' },
+  { value: 'fade-slide', label: '滑动' },
+  { value: 'fade', label: '消退' },
+  { value: 'fade-bottom', label: '底部消退' },
+  { value: 'fade-scale', label: '缩放消退' },
+];

src/settings/projectSetting.ts

@@ -31,6 +31,8 @@ const setting = {
     menuWidth: 200,
     //固定菜单
     fixed: true,
+    //分割菜单
+    mixMenu: false,
   },
   //面包屑
   crumbsSetting: {
@@ -39,7 +41,11 @@ const setting = {
     //显示图标
     showIcon: false,
   },
-  //菜单权限模式 ROLE 前端固定角色  BACK 动态获取
-  permissionMode: 'ROLE',
+  //菜单权限模式 FIXED 前端固定路由  BACK 动态获取
+  permissionMode: 'FIXED',
+  //是否开启路由动画
+  isPageAnimate: true,
+  //路由动画类型
+  pageAnimateType: 'zoom-fade',
 };
 export default setting;

src/store/modules/asyncRoute.ts

@@ -88,12 +88,12 @@ export const useAsyncRouteStore = defineStore({
     },
     async generateRoutes(data) {
       let accessedRouters;
-      const roleList = data.roles || [];
+      const permissionsList = data.permissions || [];
       const routeFilter = (route) => {
         const { meta } = route;
-        const { permission } = meta || {};
-        if (!permission) return true;
-        return roleList.some((role) => permission.includes(role.value));
+        const { permissions } = meta || {};
+        if (!permissions) return true;
+        return permissionsList.some((item) => permissions.includes(item.value));
       };
       const { getPermissionMode } = useProjectSetting();
       const permissionMode = unref(getPermissionMode);
@@ -107,7 +107,7 @@ export const useAsyncRouteStore = defineStore({
       } else {
         try {
           //过滤账户是否拥有某一个权限，并将菜单从加载列表移除
-          accessedRouters = filter([...asyncRoutes, ...constantRouter], routeFilter);
+          accessedRouters = filter(asyncRoutes, routeFilter);
         } catch (error) {
           console.log(error);
         }

src/store/modules/projectSetting.ts

@@ -12,6 +12,8 @@ const {
   multiTabsSetting,
   crumbsSetting,
   permissionMode,
+  isPageAnimate,
+  pageAnimateType,
 } = projectSetting;
 
 interface ProjectSettingState {
@@ -23,6 +25,8 @@ interface ProjectSettingState {
   multiTabsSetting: ImultiTabsSetting; //多标签
   crumbsSetting: IcrumbsSetting; //面包屑
   permissionMode: string; //权限模式
+  isPageAnimate: boolean; //是否开启路由动画
+  pageAnimateType: string; //路由动画类型
 }
 
 export const useProjectSettingStore = defineStore({
@@ -36,6 +40,8 @@ export const useProjectSettingStore = defineStore({
     multiTabsSetting,
     crumbsSetting,
     permissionMode,
+    isPageAnimate,
+    pageAnimateType,
   }),
   getters: {
     getNavMode(): string {
@@ -62,6 +68,12 @@ export const useProjectSettingStore = defineStore({
     getPermissionMode(): string {
       return this.permissionMode;
     },
+    getIsPageAnimate(): boolean {
+      return this.isPageAnimate;
+    },
+    getPageAnimateType(): string {
+      return this.pageAnimateType;
+    },
   },
   actions: {
     setNavTheme(value: string): void {

src/store/modules/user.ts

@@ -13,7 +13,7 @@ export interface IUserState {
   username: string;
   welcome: string;
   avatar: string;
-  roles: any[];
+  permissions: any[];
   info: any;
 }
 
@@ -24,7 +24,7 @@ export const useUserStore = defineStore({
     username: '',
     welcome: '',
     avatar: '',
-    roles: [],
+    permissions: [],
     info: Storage.get(CURRENT_USER, {}),
   }),
   getters: {
@@ -37,8 +37,8 @@ export const useUserStore = defineStore({
     getNickname(): string {
       return this.username;
     },
-    getRoles(): [any][] {
-      return this.roles;
+    getPermissions(): [any][] {
+      return this.permissions;
     },
     getUserInfo(): object {
       return this.info;
@@ -51,8 +51,8 @@ export const useUserStore = defineStore({
     setAvatar(avatar: string) {
       this.avatar = avatar;
     },
-    setRoles(roles) {
-      this.roles = roles;
+    setPermissions(permissions) {
+      this.permissions = permissions;
     },
     setUserInfo(info) {
       this.info = info;
@@ -83,12 +83,12 @@ export const useUserStore = defineStore({
         getUserInfo()
           .then((res) => {
             const result = res;
-            if (result.roles && result.roles.length) {
-              const roles = result.roles;
-              that.setRoles(roles);
+            if (result.permissions && result.permissions.length) {
+              const permissionsList = result.permissions;
+              that.setPermissions(permissionsList);
               that.setUserInfo(result);
             } else {
-              reject(new Error('getInfo: roles must be a non-null array !'));
+              reject(new Error('getInfo: permissionsList must be a non-null array !'));
             }
             that.setAvatar(result.avatar);
             resolve(res);
@@ -101,7 +101,7 @@ export const useUserStore = defineStore({
 
     // 登出
     async logout() {
-      this.setRoles([]);
+      this.setPermissions([]);
       this.setUserInfo('');
       storage.remove(ACCESS_TOKEN);
       storage.remove(CURRENT_USER);

src/store/mutation-types.ts

@@ -1,4 +1,4 @@
-export const ACCESS_TOKEN = 'Access-Token'; // 用户token
-export const CURRENT_USER = 'Current-User'; // 当前用户信息
-export const IS_LOCKSCREEN = 'Is-Lockscreen'; // 是否锁屏
-export const TABS_ROUTES = 'Tabs-Routes'; // 标签页
+export const ACCESS_TOKEN = 'ACCESS-TOKEN'; // 用户token
+export const CURRENT_USER = 'CURRENT-USER'; // 当前用户信息
+export const IS_LOCKSCREEN = 'IS-LOCKSCREEN'; // 是否锁屏
+export const TABS_ROUTES = 'TABS-ROUTES'; // 标签页

src/styles/common.less

@@ -45,7 +45,7 @@ a:active, a:hover {
   text-decoration: none;
 }
 
-/*滚动条凹槽的颜色，还可以设置边框属性 */
+/* 滚动条凹槽的颜色，还可以设置边框属性 */
 *::-webkit-scrollbar-track-piece {
   background-color: #f8f8f8;
   -webkit-border-radius: 2em;
@@ -53,22 +53,22 @@ a:active, a:hover {
   border-radius: 2em;
 }
 
-/*滚动条的宽度*/
+/* 滚动条的宽度 */
 *::-webkit-scrollbar {
   width: 9px;
   height: 9px;
 }
 
-/*滚动条的设置*/
+/* 滚动条的设置 */
 *::-webkit-scrollbar-thumb {
-  background-color: #dddddd;
+  background-color: #ddd;
   background-clip: padding-box;
   -webkit-border-radius: 2em;
   -moz-border-radius: 2em;
   border-radius: 2em;
 }
 
-/*滚动条鼠标移上去*/
+/* 滚动条鼠标移上去 */
 *::-webkit-scrollbar-thumb:hover {
   background-color: #bbb;
 }

src/styles/index.less

@@ -0,0 +1,3 @@
+@import 'transition/index.less';
+@import './var.less';
+@import './common.less';

src/styles/transition/base.less

@@ -0,0 +1,18 @@
+.transition-default() {
+  &-enter-active,
+  &-leave-active {
+    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
+  }
+
+  &-move {
+    transition: transform 0.4s;
+  }
+}
+
+.expand-transition {
+  .transition-default();
+}
+
+.expand-x-transition {
+  .transition-default();
+}

src/styles/transition/fade.less

@@ -0,0 +1,81 @@
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* fade-slide */
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+// ///////////////////////////////////////////////
+// Fade Bottom
+// ///////////////////////////////////////////////
+
+// Speed: 1x
+.fade-bottom-enter-active,
+.fade-bottom-leave-active {
+  transition: opacity 0.25s, transform 0.3s;
+}
+
+.fade-bottom-enter-from {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+
+.fade-bottom-leave-to {
+  opacity: 0;
+  transform: translateY(10%);
+}
+
+// fade-scale
+.fade-scale-leave-active,
+.fade-scale-enter-active {
+  transition: all 0.28s;
+}
+
+.fade-scale-enter-from {
+  opacity: 0;
+  transform: scale(1.2);
+}
+
+.fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+// ///////////////////////////////////////////////
+// Fade Top
+// ///////////////////////////////////////////////
+
+// Speed: 1x
+.fade-top-enter-active,
+.fade-top-leave-active {
+  transition: opacity 0.2s, transform 0.25s;
+}
+
+.fade-top-enter-from {
+  opacity: 0;
+  transform: translateY(8%);
+}
+
+.fade-top-leave-to {
+  opacity: 0;
+  transform: translateY(-8%);
+}

src/styles/transition/index.less

@@ -0,0 +1,10 @@
+@import './base.less';
+@import './fade.less';
+@import './scale.less';
+@import './slide.less';
+@import './scroll.less';
+@import './zoom.less';
+
+.collapse-transition {
+  transition: 0.2s height ease-in-out, 0.2s padding-top ease-in-out, 0.2s padding-bottom ease-in-out;
+}

src/styles/transition/scale.less

@@ -0,0 +1,21 @@
+.scale-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave,
+  &-leave-to {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+
+.scale-rotate-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave,
+  &-leave-to {
+    opacity: 0;
+    transform: scale(0) rotate(-45deg);
+  }
+}

src/styles/transition/scroll.less

@@ -0,0 +1,67 @@
+.scroll-y-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateY(-15px);
+  }
+
+  &-leave-to {
+    transform: translateY(15px);
+  }
+}
+
+.scroll-y-reverse-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateY(15px);
+  }
+
+  &-leave-to {
+    transform: translateY(-15px);
+  }
+}
+
+.scroll-x-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateX(-15px);
+  }
+
+  &-leave-to {
+    transform: translateX(15px);
+  }
+}
+
+.scroll-x-reverse-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateX(15px);
+  }
+
+  &-leave-to {
+    transform: translateX(-15px);
+  }
+}

src/styles/transition/slide.less

@@ -0,0 +1,39 @@
+.slide-y-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
+}
+
+.slide-y-reverse-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+}
+
+.slide-x-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateX(-15px);
+  }
+}
+
+.slide-x-reverse-transition {
+  .transition-default();
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateX(15px);
+  }
+}

src/styles/transition/zoom.less

@@ -0,0 +1,27 @@
+// zoom-out
+.zoom-out-enter-active,
+.zoom-out-leave-active {
+  transition: opacity 0.1 ease-in-out, transform 0.15s ease-out;
+}
+
+.zoom-out-enter-from,
+.zoom-out-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+
+// zoom-fade
+.zoom-fade-enter-active,
+.zoom-fade-leave-active {
+  transition: transform 0.2s, opacity 0.3s ease-out;
+}
+
+.zoom-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.92);
+}
+
+.zoom-fade-leave-to {
+  opacity: 0;
+  transform: scale(1.06);
+}

src/utils/Drag.ts

@@ -2,7 +2,7 @@
 const getCss = function (o, key) {
   return o.currentStyle
     ? o.currentStyle[key]
-    : document.defaultView.getComputedStyle(o, false)[key];
+    : document.defaultView?.getComputedStyle(o, null)[key];
 };
 
 const params = {
@@ -13,7 +13,7 @@ const params = {
   flag: false,
 };
 
-const startDrag = function (bar, target, callback) {
+const startDrag = function (bar, target, callback?) {
   const screenWidth = document.body.clientWidth; // body当前宽度
   const screenHeight = document.documentElement.clientHeight; // 可见区域高度
 
@@ -57,7 +57,7 @@ const startDrag = function (bar, target, callback) {
     }
   };
   document.onmousemove = function (event) {
-    const e = event ? event : window.event;
+    const e: any = event ? event : window.event;
     if (params.flag) {
       const nowX = e.clientX,
         nowY = e.clientY;

src/utils/Storage.ts

@@ -48,7 +48,7 @@ export const createStorage = ({ prefixKey = '', storage = localStorage } = {}) =
           if (expire === null || expire >= Date.now()) {
             return value;
           }
-          this.remove(this.getKey(key));
+          this.remove(key);
         } catch (e) {
           return def;
         }

src/utils/http/axios/Axios.ts

@@ -5,8 +5,8 @@ import { AxiosCanceler } from './axiosCancel';
 import { isFunction } from '@/utils/is';
 import { cloneDeep } from 'lodash-es';
 
-import type { RequestOptions, CreateAxiosOptions, Result } from './types';
-// import { ContentTypeEnum } from '/@/enums/httpEnum';
+import type { RequestOptions, CreateAxiosOptions, Result, UploadFileParams } from './types';
+import { ContentTypeEnum } from '@/enums/httpEnum';
 
 export * from './axiosTransform';
 
@@ -23,18 +23,6 @@ export class VAxios {
     this.setupInterceptors();
   }
 
-  /**
-   * @description:  创建axios实例
-   */
-  private createAxios(config: CreateAxiosOptions): void {
-    this.axiosInstance = axios.create(config);
-  }
-
-  private getTransform() {
-    const { transform } = this.options;
-    return transform;
-  }
-
   getAxios(): AxiosInstance {
     return this.axiosInstance;
   }
@@ -59,6 +47,103 @@ export class VAxios {
     Object.assign(this.axiosInstance.defaults.headers, headers);
   }
 
+  /**
+   * @description:   请求方法
+   */
+  request<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    let conf: AxiosRequestConfig = cloneDeep(config);
+    const transform = this.getTransform();
+
+    const { requestOptions } = this.options;
+
+    const opt: RequestOptions = Object.assign({}, requestOptions, options);
+
+    const { beforeRequestHook, requestCatch, transformRequestData } = transform || {};
+    if (beforeRequestHook && isFunction(beforeRequestHook)) {
+      conf = beforeRequestHook(conf, opt);
+    }
+
+    //这里重新 赋值成最新的配置
+    // @ts-ignore
+    conf.requestOptions = opt;
+
+    return new Promise((resolve, reject) => {
+      this.axiosInstance
+        .request<any, AxiosResponse<Result>>(conf)
+        .then((res: AxiosResponse<Result>) => {
+          // 请求是否被取消
+          const isCancel = axios.isCancel(res);
+          if (transformRequestData && isFunction(transformRequestData) && !isCancel) {
+            try {
+              const ret = transformRequestData(res, opt);
+              resolve(ret);
+            } catch (err) {
+              reject(err || new Error('request error!'));
+            }
+            return;
+          }
+          resolve(res as unknown as Promise<T>);
+        })
+        .catch((e: Error) => {
+          if (requestCatch && isFunction(requestCatch)) {
+            reject(requestCatch(e));
+            return;
+          }
+          reject(e);
+        });
+    });
+  }
+
+  /**
+   * @description:  创建axios实例
+   */
+  private createAxios(config: CreateAxiosOptions): void {
+    this.axiosInstance = axios.create(config);
+  }
+
+  private getTransform() {
+    const { transform } = this.options;
+    return transform;
+  }
+
+  /**
+   * @description:  文件上传
+   */
+  uploadFile<T = any>(config: AxiosRequestConfig, params: UploadFileParams) {
+    const formData = new window.FormData();
+    const customFilename = params.name || 'file';
+
+    if (params.filename) {
+      formData.append(customFilename, params.file, params.filename);
+    } else {
+      formData.append(customFilename, params.file);
+    }
+
+    if (params.data) {
+      Object.keys(params.data).forEach((key) => {
+        const value = params.data![key];
+        if (Array.isArray(value)) {
+          value.forEach((item) => {
+            formData.append(`${key}[]`, item);
+          });
+          return;
+        }
+
+        formData.append(key, params.data![key]);
+      });
+    }
+
+    return this.axiosInstance.request<T>({
+      method: 'POST',
+      data: formData,
+      headers: {
+        'Content-type': ContentTypeEnum.FORM_DATA,
+        ignoreCancelToken: true,
+      },
+      ...config,
+    });
+  }
+
   /**
    * @description: 拦截器配置
    */
@@ -78,10 +163,17 @@ export class VAxios {
 
     // 请求拦截器配置处理
     this.axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {
-      const { headers: { ignoreCancelToken } = { ignoreCancelToken: false } } = config;
-      !ignoreCancelToken && axiosCanceler.addPending(config);
+      const {
+        headers: { ignoreCancelToken },
+      } = config;
+      const ignoreCancel =
+        ignoreCancelToken !== undefined
+          ? ignoreCancelToken
+          : this.options.requestOptions?.ignoreCancelToken;
+
+      !ignoreCancel && axiosCanceler.addPending(config);
       if (requestInterceptors && isFunction(requestInterceptors)) {
-        config = requestInterceptors(config);
+        config = requestInterceptors(config, this.options);
       }
       return config;
     }, undefined);
@@ -105,62 +197,4 @@ export class VAxios {
       isFunction(responseInterceptorsCatch) &&
       this.axiosInstance.interceptors.response.use(undefined, responseInterceptorsCatch);
   }
-
-  // /**
-  //  * @description:  文件上传
-  //  */
-  // uploadFiles(config: AxiosRequestConfig, params: File[]) {
-  //   const formData = new FormData();
-
-  //   Object.keys(params).forEach((key) => {
-  //     formData.append(key, params[key as any]);
-  //   });
-
-  //   return this.request({
-  //     ...config,
-  //     method: 'POST',
-  //     data: formData,
-  //     headers: {
-  //       'Content-type': ContentTypeEnum.FORM_DATA,
-  //     },
-  //   });
-  // }
-
-  /**
-   * @description:   请求方法
-   */
-  request<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
-    let conf: AxiosRequestConfig = cloneDeep(config);
-    const transform = this.getTransform();
-
-    const { requestOptions } = this.options;
-
-    const opt: RequestOptions = Object.assign({}, requestOptions, options);
-
-    const { beforeRequestHook, requestCatch, transformRequestData } = transform || {};
-    if (beforeRequestHook && isFunction(beforeRequestHook)) {
-      conf = beforeRequestHook(conf, opt);
-    }
-    return new Promise((resolve, reject) => {
-      this.axiosInstance
-        .request<any, AxiosResponse<Result>>(conf)
-        .then((res: AxiosResponse<Result>) => {
-          // 请求是否被取消
-          const isCancel = axios.isCancel(res);
-          if (transformRequestData && isFunction(transformRequestData) && !isCancel) {
-            const ret = transformRequestData(res, opt);
-            // ret !== undefined ? resolve(ret) : reject(new Error('request error!'));
-            return resolve(ret);
-          }
-          reject(res as unknown as Promise<T>);
-        })
-        .catch((e: Error) => {
-          if (requestCatch && isFunction(requestCatch)) {
-            reject(requestCatch(e));
-            return;
-          }
-          reject(e);
-        });
-    });
-  }
 }

src/utils/http/axios/axiosTransform.ts

@@ -4,6 +4,12 @@
 import type { AxiosRequestConfig, AxiosResponse } from 'axios';
 import type { RequestOptions, Result } from './types';
 
+export interface CreateAxiosOptions extends AxiosRequestConfig {
+  authenticationScheme?: string;
+  transform?: AxiosTransform;
+  requestOptions?: RequestOptions;
+}
+
 export abstract class AxiosTransform {
   /**
    * @description: 请求之前处理配置
@@ -24,7 +30,10 @@ export abstract class AxiosTransform {
   /**
    * @description: 请求之前的拦截器
    */
-  requestInterceptors?: (config: AxiosRequestConfig) => AxiosRequestConfig;
+  requestInterceptors?: (
+    config: AxiosRequestConfig,
+    options: CreateAxiosOptions
+  ) => AxiosRequestConfig;
 
   /**
    * @description: 请求之后的拦截器

src/utils/http/axios/checkStatus.ts

@@ -1,46 +1,47 @@
-export function checkStatus(status: number, msg: string, message: any): void {
+export function checkStatus(status: number, msg: string): void {
+  const $message = window['$message'];
   switch (status) {
     case 400:
-      message.error(`${msg}`);
+      $message.error(msg);
       break;
     // 401: 未登录
     // 未登录则跳转登录页面，并携带当前页面的路径
     // 在登录成功后返回当前页面，这一步需要在登录页操作。
     case 401:
-      message.error('用户没有权限（令牌、用户名、密码错误）!');
+      $message.error('用户没有权限（令牌、用户名、密码错误）!');
       break;
     case 403:
-      message.error('用户得到授权，但是访问是被禁止的。!');
+      $message.error('用户得到授权，但是访问是被禁止的。!');
       break;
     // 404请求不存在
     case 404:
-      message.error('网络请求错误,未找到该资源!');
+      $message.error('网络请求错误，未找到该资源!');
       break;
     case 405:
-      message.error('网络请求错误,请求方法未允许!');
+      $message.error('网络请求错误，请求方法未允许!');
       break;
     case 408:
-      message.error('网络请求超时!');
+      $message.error('网络请求超时');
       break;
     case 500:
-      message.error('服务器错误,请联系管理员!');
+      $message.error('服务器错误,请联系管理员!');
       break;
     case 501:
-      message.error('网络未实现!');
+      $message.error('网络未实现');
       break;
     case 502:
-      message.error('网络错误!');
+      $message.error('网络错误');
       break;
     case 503:
-      message.error('服务不可用，服务器暂时过载或维护!');
+      $message.error('服务不可用，服务器暂时过载或维护!');
       break;
     case 504:
-      message.error('网络超时!');
+      $message.error('网络超时');
       break;
     case 505:
-      message.error('http版本不支持该请求!');
+      $message.error('http版本不支持该请求!');
       break;
     default:
-      message.error(msg);
+      $message.error(msg);
   }
 }

src/utils/http/axios/helper.ts

@@ -36,7 +36,7 @@ export function formatRequestDate(params: Recordable) {
         try {
           params[key] = isString(value) ? value.trim() : value;
         } catch (error) {
-          throw new Error(error);
+          throw new Error(error as any);
         }
       }
     }

src/utils/http/axios/index.ts

@@ -5,13 +5,15 @@ import axios, { AxiosResponse } from 'axios';
 import { checkStatus } from './checkStatus';
 import { joinTimestamp, formatRequestDate } from './helper';
 import { RequestEnum, ResultEnum, ContentTypeEnum } from '@/enums/httpEnum';
+import { PageEnum } from '@/enums/pageEnum';
 
 import { useGlobSetting } from '@/hooks/setting';
 
 import { isString } from '@/utils/is/';
+import { deepMerge, isUrl } from '@/utils';
 import { setObjToUrlParams } from '@/utils/urlUtils';
 
-import { RequestOptions, Result } from './types';
+import { RequestOptions, Result, CreateAxiosOptions } from './types';
 
 import { useUserStoreWidthOut } from '@/store/modules/user';
 
@@ -29,7 +31,6 @@ const transform: AxiosTransform = {
    * @description: 处理请求数据
    */
   transformRequestData: (res: AxiosResponse<Result>, options: RequestOptions) => {
-    const { $message: Message, $dialog: Modal } = window;
     const {
       isShowMessage = true,
       isShowErrorMessage,
@@ -50,15 +51,16 @@ const transform: AxiosTransform = {
       return res.data;
     }
 
-    const reject = Promise.reject;
-
     const { data } = res;
 
+    const $dialog = window['$dialog'];
+    const $message = window['$message'];
+
     if (!data) {
       // return '[HTTP] Request has no return value';
-      return reject(data);
+      throw new Error('请求出错，请稍候重试');
     }
-    //  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
+    //  这里 code，result，message为 后台统一的字段，需要修改为项目自己的接口返回格式
     const { code, result, message } = data;
     // 请求成功
     const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS;
@@ -66,13 +68,16 @@ const transform: AxiosTransform = {
     if (isShowMessage) {
       if (hasSuccess && (successMessageText || isShowSuccessMessage)) {
         // 是否显示自定义信息提示
-        Message.success(successMessageText || message || '操作成功！');
+        $dialog.success({
+          type: 'success',
+          content: successMessageText || message || '操作成功！',
+        });
       } else if (!hasSuccess && (errorMessageText || isShowErrorMessage)) {
         // 是否显示自定义信息提示
-        Message.error(message || errorMessageText || '操作失败！');
+        $message.error(message || errorMessageText || '操作失败！');
       } else if (!hasSuccess && options.errorMessageMode === 'modal') {
         // errorMessageMode=‘custom-modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误
-        Modal.info({
+        $dialog.info({
           title: '提示',
           content: message,
           positiveText: '确定',
@@ -85,63 +90,53 @@ const transform: AxiosTransform = {
     if (code === ResultEnum.SUCCESS) {
       return result;
     }
-    // 接口请求错误，统一提示错误信息
-    if (code === ResultEnum.ERROR) {
-      if (message) {
-        Message.error(data.message);
-        Promise.reject(new Error(message));
-      } else {
-        const msg = '操作失败,系统异常!';
-        Message.error(msg);
-        Promise.reject(new Error(msg));
-      }
-      return reject();
+    // 接口请求错误，统一提示错误信息 这里逻辑可以根据项目进行修改
+    let errorMsg = message;
+    switch (code) {
+      // 请求失败
+      case ResultEnum.ERROR:
+        $message.error(errorMsg);
+        break;
+      // 登录超时
+      case ResultEnum.TIMEOUT:
+        const LoginName = PageEnum.BASE_LOGIN_NAME;
+        const LoginPath = PageEnum.BASE_LOGIN;
+        if (router.currentRoute.value?.name === LoginName) return;
+        // 到登录页
+        errorMsg = '登录超时，请重新登录!';
+        $dialog.warning({
+          title: '提示',
+          content: '登录身份已失效，请重新登录!',
+          positiveText: '确定',
+          //negativeText: '取消',
+          closable: false,
+          maskClosable: false,
+          onPositiveClick: () => {
+            storage.clear();
+            window.location.href = LoginPath;
+          },
+          onNegativeClick: () => {},
+        });
+        break;
     }
-
-    // 登录超时
-    if (code === ResultEnum.TIMEOUT) {
-      if (router.currentRoute.value.name == 'login') return;
-      // 到登录页
-      const timeoutMsg = '登录超时,请重新登录!';
-      Modal.warning({
-        title: '提示',
-        content: '登录身份已失效，请重新登录!',
-        positiveText: '确定',
-        negativeText: '取消',
-        onPositiveClick: () => {
-          storage.clear();
-          router.replace({
-            name: 'login',
-            query: {
-              redirect: router.currentRoute.value.fullPath,
-            },
-          });
-        },
-        onNegativeClick: () => {},
-      });
-      return reject(new Error(timeoutMsg));
-    }
-
-    // 这里逻辑可以根据项目进行修改
-    if (!hasSuccess) {
-      return reject(new Error(message));
-    }
-
-    return data;
+    throw new Error(errorMsg);
   },
 
   // 请求之前处理config
   beforeRequestHook: (config, options) => {
-    const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true } = options;
+    const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true, urlPrefix } = options;
 
-    if (joinPrefix) {
+    const isUrlStr = isUrl(config.url as string);
+
+    if (!isUrlStr && joinPrefix) {
       config.url = `${urlPrefix}${config.url}`;
     }
 
-    if (apiUrl && isString(apiUrl)) {
+    if (!isUrlStr && apiUrl && isString(apiUrl)) {
       config.url = `${apiUrl}${config.url}`;
     }
     const params = config.params || {};
+    const data = config.data || false;
     if (config.method?.toUpperCase() === RequestEnum.GET) {
       if (!isString(params)) {
         // 给 get 请求加上时间戳参数，避免从缓存中拿数据。
@@ -154,10 +149,18 @@ const transform: AxiosTransform = {
     } else {
       if (!isString(params)) {
         formatDate && formatRequestDate(params);
-        config.data = params;
-        config.params = undefined;
+        if (Reflect.has(config, 'data') && config.data && Object.keys(config.data).length > 0) {
+          config.data = data;
+          config.params = params;
+        } else {
+          config.data = params;
+          config.params = undefined;
+        }
         if (joinParamsToUrl) {
-          config.url = setObjToUrlParams(config.url as string, config.data);
+          config.url = setObjToUrlParams(
+            config.url as string,
+            Object.assign({}, config.params, config.data)
+          );
         }
       } else {
         // 兼容restful风格
@@ -171,13 +174,15 @@ const transform: AxiosTransform = {
   /**
    * @description: 请求拦截器处理
    */
-  requestInterceptors: (config) => {
+  requestInterceptors: (config, options) => {
     // 请求之前处理config
     const userStore = useUserStoreWidthOut();
     const token = userStore.getToken;
-    if (token) {
+    if (token && (config as Recordable)?.requestOptions?.withToken !== false) {
       // jwt token
-      config.headers.token = token;
+      (config as Recordable).headers.Authorization = options.authenticationScheme
+        ? `${options.authenticationScheme} ${token}`
+        : token;
     }
     return config;
   },
@@ -186,7 +191,8 @@ const transform: AxiosTransform = {
    * @description: 响应错误处理
    */
   responseInterceptorsCatch: (error: any) => {
-    const { $message: Message, $dialog: Modal } = window;
+    const $dialog = window['$dialog'];
+    const $message = window['$message'];
     const { response, code, message } = error || {};
     // TODO 此处要根据后端接口返回格式修改
     const msg: string =
@@ -194,57 +200,88 @@ const transform: AxiosTransform = {
     const err: string = error.toString();
     try {
       if (code === 'ECONNABORTED' && message.indexOf('timeout') !== -1) {
-        Message.error('接口请求超时,请刷新页面重试!');
+        $message.error('接口请求超时，请刷新页面重试!');
         return;
       }
       if (err && err.includes('Network Error')) {
-        Modal.info({
+        $dialog.info({
           title: '网络异常',
-          content: '请检查您的网络连接是否正常!',
+          content: '请检查您的网络连接是否正常',
           positiveText: '确定',
+          //negativeText: '取消',
+          closable: false,
+          maskClosable: false,
           onPositiveClick: () => {},
+          onNegativeClick: () => {},
         });
-        return;
+        return Promise.reject(error);
       }
     } catch (error) {
-      throw new Error(error);
+      throw new Error(error as any);
     }
     // 请求是否被取消
     const isCancel = axios.isCancel(error);
     if (!isCancel) {
-      checkStatus(error.response && error.response.status, msg, Message);
+      checkStatus(error.response && error.response.status, msg);
     } else {
       console.warn(error, '请求被取消！');
     }
-    return error;
+    //return Promise.reject(error);
+    return Promise.reject(response?.data);
   },
 };
 
-const Axios = new VAxios({
-  timeout: 10 * 1000,
-  // 接口前缀
-  prefixUrl: urlPrefix,
-  headers: { 'Content-Type': ContentTypeEnum.JSON },
-  // 数据处理方式
-  transform,
-  // 配置项，下面的选项都可以在独立的接口请求中覆盖
-  requestOptions: {
-    // 默认将prefix 添加到url
-    joinPrefix: true,
-    // 是否返回原生响应头 比如：需要获取响应头时使用该属性
-    isReturnNativeResponse: false,
-    // 需要对返回数据进行处理
-    isTransformResponse: true,
-    // post请求的时候添加参数到url
-    joinParamsToUrl: false,
-    // 格式化提交参数时间
-    formatDate: true,
-    // 消息提示类型
-    errorMessageMode: 'none',
-    // 接口地址
-    apiUrl: globSetting.apiUrl as string,
-  },
-  withCredentials: false,
-});
+function createAxios(opt?: Partial<CreateAxiosOptions>) {
+  return new VAxios(
+    deepMerge(
+      {
+        timeout: 10 * 1000,
+        authenticationScheme: '',
+        // 接口前缀
+        prefixUrl: urlPrefix,
+        headers: { 'Content-Type': ContentTypeEnum.JSON },
+        // 数据处理方式
+        transform,
+        // 配置项，下面的选项都可以在独立的接口请求中覆盖
+        requestOptions: {
+          // 默认将prefix 添加到url
+          joinPrefix: true,
+          // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+          isReturnNativeResponse: false,
+          // 需要对返回数据进行处理
+          isTransformResponse: true,
+          // post请求的时候添加参数到url
+          joinParamsToUrl: false,
+          // 格式化提交参数时间
+          formatDate: true,
+          // 消息提示类型
+          errorMessageMode: 'none',
+          // 接口地址
+          apiUrl: globSetting.apiUrl,
+          // 接口拼接地址
+          urlPrefix: urlPrefix,
+          //  是否加入时间戳
+          joinTime: true,
+          // 忽略重复请求
+          ignoreCancelToken: true,
+          // 是否携带token
+          withToken: true,
+        },
+        withCredentials: false,
+      },
+      opt || {}
+    )
+  );
+}
 
-export default Axios;
+export const http = createAxios();
+
+// 项目，多个不同 api 地址，直接在这里导出多个
+// src/api ts 里面接口，就可以单独使用这个请求，
+// import { httpTwo } from '@/utils/http/axios'
+// export const httpTwo = createAxios({
+//   requestOptions: {
+//     apiUrl: 'http://localhost:9001',
+//     urlPrefix: 'api',
+//   },
+// });

src/utils/http/axios/types.ts

@@ -2,9 +2,22 @@ import { AxiosRequestConfig } from 'axios';
 import { AxiosTransform } from './axiosTransform';
 
 export interface CreateAxiosOptions extends AxiosRequestConfig {
-  prefixUrl?: string;
   transform?: AxiosTransform;
   requestOptions?: RequestOptions;
+  authenticationScheme?: string;
+}
+
+// 上传文件
+export interface UploadFileParams {
+  // 其他参数
+  data?: Recordable;
+  // 文件参数接口字段名
+  name?: string;
+  // 文件
+  file: File | Blob;
+  // 文件名称
+  filename?: string;
+  [key: string]: any;
 }
 
 export interface RequestOptions {
@@ -12,8 +25,6 @@ export interface RequestOptions {
   joinParamsToUrl?: boolean;
   // 格式化请求参数时间
   formatDate?: boolean;
-  //  是否处理请求结果
-  isTransformResponse?: boolean;
   // 是否显示提示信息
   isShowMessage?: boolean;
   // 是否解析成JSON
@@ -30,6 +41,8 @@ export interface RequestOptions {
   joinPrefix?: boolean;
   // 接口地址， 不填则使用默认apiUrl
   apiUrl?: string;
+  // 请求拼接路径
+  urlPrefix?: string;
   // 错误消息提示类型
   errorMessageMode?: 'none' | 'modal';
   // 是否添加时间戳
@@ -38,6 +51,10 @@ export interface RequestOptions {
   isTransformResponse?: boolean;
   // 是否返回原生响应头
   isReturnNativeResponse?: boolean;
+  //忽略重复请求
+  ignoreCancelToken?: boolean;
+  // 是否携带token
+  withToken?: boolean;
 }
 
 export interface Result<T = any> {

src/utils/index.ts

@@ -3,7 +3,7 @@ import type { App, Plugin } from 'vue';
 import { NIcon, NTag } from 'naive-ui';
 import { PageEnum } from '@/enums/pageEnum';
 import { isObject } from './is/index';
-
+import { cloneDeep } from 'lodash-es';
 /**
  * render 图标
  * */
@@ -33,29 +33,90 @@ export function renderNew(type = 'warning', text = 'New', color: object = newTag
  * 递归组装菜单格式
  */
 export function generatorMenu(routerMap: Array<any>) {
-  return routerMap
-    .filter((item) => {
-      return (
-        (item.meta?.hidden || false) != true &&
-        !['/:path(.*)*', '/', PageEnum.REDIRECT, PageEnum.BASE_LOGIN].includes(item.path)
-      );
-    })
-    .map((item) => {
-      const info =
-        item.meta?.alwaysShow != true && item.children?.length === 1 ? item.children[0] : item;
+  return filterRouter(routerMap).map((item) => {
+    const isRoot = isRootRouter(item);
+    const info = isRoot ? item.children[0] : item;
+    const currentMenu = {
+      ...info,
+      ...info.meta,
+      label: info.meta?.title,
+      key: info.name,
+      icon: isRoot ? item.meta?.icon : info.meta?.icon,
+    };
+    // 是否有子菜单，并递归处理
+    if (info.children && info.children.length > 0) {
+      // Recursion
+      currentMenu.children = generatorMenu(info.children);
+    }
+    return currentMenu;
+  });
+}
+
+/**
+ * 混合菜单
+ * */
+export function generatorMenuMix(routerMap: Array<any>, routerName: string, location: string) {
+  const cloneRouterMap = cloneDeep(routerMap);
+  const newRouter = filterRouter(cloneRouterMap);
+  if (location === 'header') {
+    const firstRouter: any[] = [];
+    newRouter.forEach((item) => {
+      const isRoot = isRootRouter(item);
+      const info = isRoot ? item.children[0] : item;
+      info.children = undefined;
       const currentMenu = {
         ...info,
         ...info.meta,
         label: info.meta?.title,
         key: info.name,
       };
-      // 是否有子菜单，并递归处理
-      if (info.children && info.children.length > 0) {
-        // Recursion
-        currentMenu.children = generatorMenu(info.children);
-      }
-      return currentMenu;
+      firstRouter.push(currentMenu);
     });
+    return firstRouter;
+  } else {
+    return getChildrenRouter(newRouter.filter((item) => item.name === routerName));
+  }
+}
+
+/**
+ * 递归组装子菜单
+ * */
+export function getChildrenRouter(routerMap: Array<any>) {
+  return filterRouter(routerMap).map((item) => {
+    const isRoot = isRootRouter(item);
+    const info = isRoot ? item.children[0] : item;
+    const currentMenu = {
+      ...info,
+      ...info.meta,
+      label: info.meta?.title,
+      key: info.name,
+    };
+    // 是否有子菜单，并递归处理
+    if (info.children && info.children.length > 0) {
+      // Recursion
+      currentMenu.children = getChildrenRouter(info.children);
+    }
+    return currentMenu;
+  });
+}
+
+/**
+ * 判断根路由 Router
+ * */
+export function isRootRouter(item) {
+  return item.meta?.alwaysShow != true && item.children?.length === 1;
+}
+
+/**
+ * 排除Router
+ * */
+export function filterRouter(routerMap: Array<any>) {
+  return routerMap.filter((item) => {
+    return (
+      (item.meta?.hidden || false) != true &&
+      !['/:path(.*)*', '/', PageEnum.REDIRECT, PageEnum.BASE_LOGIN].includes(item.path)
+    );
+  });
 }
 
 export const withInstall = <T>(component: T, alias?: string) => {
@@ -145,3 +206,10 @@ export function lighten(color: string, amount: number) {
     amount
   )}${addLight(color.substring(4, 6), amount)}`;
 }
+
+/**
+ * 判断是否 url
+ * */
+export function isUrl(url: string) {
+  return /(^http|https:\/\/)/g.test(url);
+}

src/views/about/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="关于">
+        {{ name }} 是一个基于 vue3，vite2，TypeScript
+        的中后台解决方案，它可以帮助你快速搭建企业级中后台项目，相信不管是从新技术使用还是其他方面，都能帮助到你，持续更新中。
+      </n-card>
+    </div>
+    <n-card
+      :bordered="false"
+      title="项目信息"
+      class="mt-4 proCard"
+      size="small"
+      :segmented="{ content: 'hard' }"
+    >
+      <n-descriptions bordered label-placement="left" class="py-2">
+        <n-descriptions-item label="版本">
+          <n-tag type="info"> {{ version }} </n-tag>
+        </n-descriptions-item>
+        <n-descriptions-item label="最后编译时间">
+          <n-tag type="info"> {{ lastBuildTime }} </n-tag>
+        </n-descriptions-item>
+        <n-descriptions-item label="文档地址">
+          <div class="flex items-center">
+            <a href="https://naive-ui-admin-docs.vercel.app" class="py-2" target="_blank"
+              >查看文档地址</a
+            >
+          </div>
+        </n-descriptions-item>
+        <n-descriptions-item label="预览地址">
+          <div class="flex items-center">
+            <a href="https://naive-ui-admin.vercel.app" class="py-2" target="_blank"
+              >查看预览地址</a
+            >
+          </div>
+        </n-descriptions-item>
+        <n-descriptions-item label="Github">
+          <div class="flex items-center">
+            <a href="https://github.com/jekip/naive-ui-admin" class="py-2" target="_blank"
+              >查看Github地址</a
+            >
+          </div>
+        </n-descriptions-item>
+        <n-descriptions-item label="QQ交流群">
+          <div class="flex items-center">
+            <a href="https://jq.qq.com/?_wv=1027&k=xib9dU4C" class="py-2" target="_blank"
+              >点击链接加入群聊【Naive Admin】</a
+            >
+          </div>
+        </n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+
+    <n-card
+      :bordered="false"
+      title="开发环境依赖"
+      class="mt-4 proCard"
+      size="small"
+      :segmented="{ content: 'hard' }"
+    >
+      <n-descriptions bordered label-placement="left" class="py-2">
+        <n-descriptions-item v-for="item in devSchema" :key="item.field" :label="item.field">
+          {{ item.label }}
+        </n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+
+    <n-card
+      :bordered="false"
+      title="生产环境依赖"
+      class="mt-4 proCard"
+      size="small"
+      :segmented="{ content: 'hard' }"
+    >
+      <n-descriptions bordered label-placement="left" class="py-2">
+        <n-descriptions-item v-for="item in schema" :key="item.field" :label="item.field">
+          {{ item.label }}
+        </n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  export interface schemaItem {
+    field: string;
+    label: string;
+  }
+
+  const { pkg, lastBuildTime } = __APP_INFO__;
+  const { dependencies, devDependencies, name, version } = pkg;
+
+  const schema: schemaItem[] = [];
+  const devSchema: schemaItem[] = [];
+
+  Object.keys(dependencies).forEach((key) => {
+    schema.push({ field: key, label: dependencies[key] });
+  });
+
+  Object.keys(devDependencies).forEach((key) => {
+    devSchema.push({ field: key, label: devDependencies[key] });
+  });
+</script>
+
+<style lang="less" scoped></style>

src/views/comp/drag/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="拖拽"> 常用于卡片，事项，预约，流程，计划等， </n-card>
+    </div>
+
+    <n-alert title="花式拖拽演示" type="info" class="mt-4">
+      每个卡片，都可以上下拖拽顺序，另外不同卡片，也可以拖拽过去，拖拽过来，都不在话下呢，快试试O(∩_∩)O哈哈~
+    </n-alert>
+
+    <n-grid
+      cols="1 s:2 m:3 l:4 xl:4 2xl:4"
+      class="mt-4 proCard"
+      responsive="screen"
+      :x-gap="12"
+      :y-gap="8"
+    >
+      <n-grid-item>
+        <NCard
+          title="需求池"
+          :segmented="{ content: 'hard', footer: 'hard' }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="info">月</n-tag>
+          </template>
+
+          <Draggable
+            class="draggable-ul"
+            animation="300"
+            :list="demandList"
+            group="people"
+            itemKey="name"
+          >
+            <template #item="{ element }">
+              <div class="cursor-move draggable-li">
+                <n-tag type="info">需求</n-tag><span class="ml-2">{{ element.name }}</span>
+              </div>
+            </template>
+          </Draggable>
+        </NCard>
+      </n-grid-item>
+
+      <n-grid-item>
+        <NCard
+          title="开发中"
+          :segmented="{ content: 'hard', footer: 'hard' }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="info">月</n-tag>
+          </template>
+
+          <Draggable
+            class="draggable-ul"
+            animation="300"
+            :list="exploitList"
+            group="people"
+            itemKey="name"
+          >
+            <template #item="{ element }">
+              <div class="cursor-move draggable-li">
+                <n-tag type="warning">开发中</n-tag><span class="ml-2">{{ element.name }}</span>
+              </div>
+            </template>
+          </Draggable>
+        </NCard>
+      </n-grid-item>
+
+      <n-grid-item>
+        <NCard
+          title="已完成"
+          :segmented="{ content: 'hard', footer: 'hard' }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="info">月</n-tag>
+          </template>
+          <Draggable
+            class="draggable-ul"
+            animation="300"
+            :list="completeList"
+            group="people"
+            itemKey="name"
+          >
+            <template #item="{ element }">
+              <div class="cursor-move draggable-li">
+                <n-tag type="error">已完成</n-tag><span class="ml-2">{{ element.name }}</span>
+              </div>
+            </template>
+          </Draggable>
+        </NCard>
+      </n-grid-item>
+
+      <n-grid-item>
+        <NCard
+          title="已验收"
+          :segmented="{ content: 'hard', footer: 'hard' }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="info">月</n-tag>
+          </template>
+          <Draggable
+            class="draggable-ul"
+            animation="300"
+            :list="approvedList"
+            group="people"
+            itemKey="name"
+          >
+            <template #item="{ element }">
+              <div class="cursor-move draggable-li">
+                <n-tag type="success">已验收</n-tag><span class="ml-2">{{ element.name }}</span>
+              </div>
+            </template>
+          </Draggable>
+        </NCard>
+      </n-grid-item>
+    </n-grid>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import Draggable from 'vuedraggable';
+
+  const demandList = reactive([
+    { name: '预约表单页面，能填写预约相关信息', id: 1 },
+    { name: '促销活动页面，包含促销广告展示', id: 2 },
+    { name: '商品列表，需要一个到货提醒功能', id: 3 },
+    { name: '商品需要一个评价功能', id: 4 },
+    { name: '商品图片需要提供放大镜', id: 5 },
+    { name: '订单需要提供删除到回收站', id: 6 },
+    { name: '用户头像上传，需要支持裁剪', id: 7 },
+    { name: '据说Vue3.2发布了，setup啥时候支持？', id: 8 },
+  ]);
+
+  const exploitList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);
+
+  const completeList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);
+
+  const approvedList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);
+</script>
+
+<style lang="less" scoped>
+  .draggable-ul {
+    width: 100%;
+    overflow: hidden;
+    margin-top: -16px;
+
+    .draggable-li {
+      width: 100%;
+      padding: 16px 10px;
+      color: #333;
+      border-bottom: 1px solid #efeff5;
+    }
+  }
+</style>

src/views/comp/form/basic.vue

@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="基础表单"> 基础表单，用于向用户收集表单信息 </n-card>
+    </div>
+    <n-card :bordered="false" class="mt-4 proCard">
+      <div class="BasicForm">
+        <BasicForm
+          submitButtonText="提交预约"
+          layout="horizontal"
+          :gridProps="{ cols: 1 }"
+          :schemas="schemas"
+          @submit="handleSubmit"
+          @reset="handleReset"
+        >
+          <template #statusSlot="{ model, field }">
+            <n-input v-model:value="model[field]" />
+          </template>
+        </BasicForm>
+      </div>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { BasicForm } from '@/components/Form/index';
+  import { useMessage } from 'naive-ui';
+
+  const schemas = [
+    {
+      field: 'name',
+      component: 'NInput',
+      label: '姓名',
+      labelMessage: '这是一个提示',
+      componentProps: {
+        placeholder: '请输入姓名',
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+      rules: [{ required: true, message: '请输入姓名', trigger: ['blur'] }],
+    },
+    {
+      field: 'mobile',
+      component: 'NInputNumber',
+      label: '手机',
+      componentProps: {
+        placeholder: '请输入手机号码',
+        showButton: false,
+        onInput: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'type',
+      component: 'NSelect',
+      label: '类型',
+      componentProps: {
+        placeholder: '请选择类型',
+        options: [
+          {
+            label: '舒适性',
+            value: 1,
+          },
+          {
+            label: '经济性',
+            value: 2,
+          },
+        ],
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'makeDate',
+      component: 'NDatePicker',
+      label: '预约时间',
+      defaultValue: 1183135260000,
+      componentProps: {
+        type: 'date',
+        clearable: true,
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'makeTime',
+      component: 'NTimePicker',
+      label: '停留时间',
+      componentProps: {
+        clearable: true,
+        onUpdateValue: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'makeProject',
+      component: 'NCheckbox',
+      label: '预约项目',
+      componentProps: {
+        placeholder: '请选择预约项目',
+        options: [
+          {
+            label: '种牙',
+            value: 1,
+          },
+          {
+            label: '补牙',
+            value: 2,
+          },
+          {
+            label: '根管',
+            value: 3,
+          },
+        ],
+        onUpdateChecked: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'makeSource',
+      component: 'NRadioGroup',
+      label: '来源',
+      componentProps: {
+        options: [
+          {
+            label: '网上',
+            value: 1,
+          },
+          {
+            label: '门店',
+            value: 2,
+          },
+        ],
+        onUpdateChecked: (e: any) => {
+          console.log(e);
+        },
+      },
+    },
+    {
+      field: 'status',
+      label: '状态',
+      //插槽
+      slot: 'statusSlot',
+    },
+  ];
+
+  const message = useMessage();
+
+  function handleSubmit(values: Recordable) {
+    console.log(values);
+    message.success(JSON.stringify(values));
+  }
+
+  function handleReset(values: Recordable) {
+    console.log(values);
+  }
+</script>
+
+<style lang="less" scoped>
+  .BasicForm {
+    width: 550px;
+    margin: 0 auto;
+    overflow: hidden;
+    padding-top: 20px;
+  }
+</style>

src/views/comp/form/useForm.vue

@@ -3,7 +3,7 @@
     <div class="n-layout-page-header">
       <n-card :bordered="false" title="基础表单"> useForm 表单，用于向用户收集表单信息 </n-card>
     </div>
-    <n-card :bordered="false" class="proCard mt-4">
+    <n-card :bordered="false" class="mt-4 proCard">
       <div class="BasicForm">
         <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
           <template #statusSlot="{ model, field }">
@@ -15,12 +15,11 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
+<script lang="ts" setup>
+  import { BasicForm, useForm } from '@/components/Form/index';
   import { useMessage } from 'naive-ui';
 
-  const schemas: FormSchema[] = [
+  const schemas = [
     {
       field: 'name',
       component: 'NInput',
@@ -80,10 +79,10 @@
       giProps: {
         //span: 24,
       },
+      defaultValue: 1183135260000,
       componentProps: {
         type: 'date',
         clearable: true,
-        defaultValue: 1183135260000,
         onUpdateValue: (e: any) => {
           console.log(e);
         },
@@ -165,43 +164,25 @@
     },
   ];
 
-  export default defineComponent({
-    components: { BasicForm },
-    setup() {
-      const formRef: any = ref(null);
-      const message = useMessage();
+  const message = useMessage();
 
-      const [register, { setFieldsValue }] = useForm({
-        gridProps: { cols: 1 },
-        collapsedRows: 3,
-        labelWidth: 120,
-        layout: 'horizontal',
-        submitButtonText: '提交预约',
-        schemas,
-      });
-
-      function setName() {
-        setFieldsValue({ name: '小马哥' });
-      }
-
-      function handleSubmit(values: Recordable) {
-        console.log(values);
-        message.success(JSON.stringify(values));
-      }
-
-      function handleReset(values: Recordable) {
-        console.log(values);
-      }
-
-      return {
-        register,
-        formRef,
-        handleSubmit,
-        handleReset,
-        setName,
-      };
-    },
+  const [register, {}] = useForm({
+    gridProps: { cols: 1 },
+    collapsedRows: 3,
+    labelWidth: 120,
+    layout: 'horizontal',
+    submitButtonText: '提交预约',
+    schemas,
   });
+
+  function handleSubmit(values: Recordable) {
+    console.log(values);
+    message.success(JSON.stringify(values));
+  }
+
+  function handleReset(values: Recordable) {
+    console.log(values);
+  }
 </script>
 
 <style lang="less" scoped>

src/views/comp/modal/index.vue

@@ -120,10 +120,10 @@
       giProps: {
         //span: 24,
       },
+      defaultValue: 1183135260000,
       componentProps: {
         type: 'date',
         clearable: true,
-        defaultValue: 1183135260000,
         onUpdateValue: (e: any) => {
           console.log(e);
         },

src/views/comp/richtext/vue-quill.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="富文本">
+        富文本，用于展示图文信息，比如商品详情，文章详情等...
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="mt-4 proCard">
+      <QuillEditor
+        ref="quillEditor"
+        :options="options"
+        v-model:content="myContent"
+        style="height: 350px"
+        @ready="readyQuill"
+        class="quillEditor"
+      />
+      <template #footer>
+        <n-space>
+          <n-button @click="addText">增加文本</n-button>
+          <n-button @click="addImg">增加图片</n-button>
+          <n-button @click="getHtml">获取HTML</n-button>
+        </n-space>
+      </template>
+    </n-card>
+    <n-card :bordered="false" class="mt-4 proCard" title="HTML 内容">
+      <n-input
+        v-model:value="myContentHtml"
+        type="textarea"
+        placeholder="html"
+        :autosize="{
+          minRows: 3,
+          maxRows: 6,
+        }"
+      />
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { QuillEditor } from '@vueup/vue-quill';
+  import '@vueup/vue-quill/dist/vue-quill.snow.css';
+  const quillEditor = ref();
+  const myContent = ref(
+    '<h4>Naive Ui Admin 是一个基于 vue3,vite2,TypeScript 的中后台解决方案</h4>'
+  );
+  const myContentHtml = ref(
+    '<h4>Naive Ui Admin 是一个基于 vue3,vite2,TypeScript 的中后台解决方案</h4>'
+  );
+
+  const options = reactive({
+    modules: {
+      toolbar: [
+        ['bold', 'italic', 'underline', 'strike'], // toggled buttons
+        ['blockquote', 'code-block'],
+
+        [{ header: 1 }, { header: 2 }], // custom button values
+        [{ list: 'ordered' }, { list: 'bullet' }],
+        [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
+        [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
+        [{ direction: 'rtl' }], // text direction
+
+        [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
+        [{ header: [1, 2, 3, 4, 5, 6, false] }],
+
+        [{ color: [] }, { background: [] }], // dropdown with defaults from theme
+        [{ font: [] }],
+        [{ align: [] }],
+        ['clean'],
+        ['image'],
+      ],
+    },
+    theme: 'snow',
+    placeholder: '输入您喜欢的内容吧！',
+  });
+
+  function readyQuill() {
+    console.log('Quill准备好了');
+  }
+
+  function getHtml() {
+    myContentHtml.value = getHtmlVal();
+  }
+
+  function addText() {
+    const html = getHtmlVal() + '新增加的内容';
+    quillEditor.value.setHTML(html);
+  }
+
+  function addImg() {
+    const html =
+      getHtmlVal() +
+      '<img style="width:100px" src="https://www.baidu.com/img/flexible/logo/pc/result.png"/>';
+    quillEditor.value.setHTML(html);
+  }
+
+  function getHtmlVal() {
+    return quillEditor.value.getHTML();
+  }
+</script>
+
+<style lang="less">
+  .ql-toolbar.ql-snow {
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-bottom: 1px solid #eee;
+    margin-top: -10px;
+  }
+
+  .ql-container.ql-snow {
+    border: none;
+  }
+</style>

src/views/comp/table/CellColumns.ts

@@ -5,10 +5,12 @@ export const columns = [
   {
     title: 'id',
     key: 'id',
+    width: 100,
   },
   {
     title: '编码',
     key: 'no',
+    width: 100,
   },
   {
     title: '名称',
@@ -22,6 +24,7 @@ export const columns = [
   {
     title: '头像',
     key: 'avatar',
+    width: 100,
     render(row) {
       return h(NAvatar, {
         size: 48,
@@ -47,29 +50,33 @@ export const columns = [
     },
     edit: true,
     width: 200,
+    ellipsis: false,
   },
   {
     title: '开始日期',
     key: 'beginTime',
     edit: true,
-    width: 250,
+    width: 160,
     editComponent: 'NDatePicker',
     editComponentProps: {
       type: 'datetime',
       format: 'yyyy-MM-dd HH:mm:ss',
     },
+    ellipsis: false,
   },
   {
     title: '结束日期',
     key: 'endTime',
-    width: 200,
+    width: 160,
   },
   {
     title: '创建时间',
     key: 'date',
+    width: 160,
   },
   {
     title: '停留时间',
     key: 'time',
+    width: 80,
   },
 ];

src/views/comp/table/basic.vue

@@ -8,6 +8,7 @@
       :row-key="(row) => row.id"
       ref="actionRef"
       :actionColumn="actionColumn"
+      :scroll-x="1360"
       @update:checked-row-keys="onCheckedRow"
     >
       <template #toolbar>
@@ -17,105 +18,90 @@
   </n-card>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, toRefs, ref, h } from 'vue';
+<script lang="ts" setup>
+  import { reactive, ref, h } from 'vue';
   import { BasicTable, TableAction } from '@/components/Table';
   import { getTableList } from '@/api/table/list';
   import { columns } from './basicColumns';
   import { useDialog, useMessage } from 'naive-ui';
 
-  export default defineComponent({
-    components: { BasicTable },
-    setup() {
-      const message = useMessage();
-      const dialog = useDialog();
-      const actionRef = ref();
-      const state = reactive({
-        params: {
-          pageSize: 5,
-          name: 'xiaoMa',
-        },
-        actionColumn: {
-          width: 150,
-          title: '操作',
-          key: 'action',
-          fixed: 'right',
-          align: 'center',
-          render(record) {
-            return h(TableAction, {
-              style: 'button',
-              actions: createActions(record),
-            });
-          },
-        },
+  const message = useMessage();
+  const dialog = useDialog();
+  const actionRef = ref();
+
+  const params = reactive({
+    pageSize: 5,
+    name: 'xiaoMa',
+  });
+
+  const actionColumn = reactive({
+    width: 150,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    align: 'center',
+    render(record) {
+      return h(TableAction, {
+        style: 'button',
+        actions: createActions(record),
       });
-
-      function createActions(record) {
-        return [
-          {
-            label: '删除',
-            icon: 'ic:outline-delete-outline',
-            onClick: handleDelete.bind(null, record),
-            // 根据业务控制是否显示 isShow 和 auth 是并且关系
-            ifShow: () => {
-              return true;
-            },
-            // 根据权限控制是否显示: 有权限，会显示，支持多个
-            auth: ['basic_list'],
-          },
-          {
-            label: '编辑',
-            onClick: handleEdit.bind(null, record),
-            ifShow: () => {
-              return true;
-            },
-            auth: ['basic_list'],
-          },
-        ];
-      }
-
-      const loadDataTable = async (params) => {
-        const data = await getTableList(params);
-        return data;
-      };
-
-      function onCheckedRow(rowKeys) {
-        console.log(rowKeys);
-      }
-
-      function reloadTable() {
-        actionRef.value.reload();
-      }
-
-      function handleDelete(record) {
-        console.log(record);
-        dialog.info({
-          title: '提示',
-          content: `您想删除${record.name}`,
-          positiveText: '确定',
-          negativeText: '取消',
-          onPositiveClick: () => {
-            message.success('删除成功');
-          },
-          onNegativeClick: () => {},
-        });
-      }
-
-      function handleEdit(record) {
-        console.log(record);
-        message.success('您点击了编辑按钮');
-      }
-
-      return {
-        ...toRefs(state),
-        columns,
-        actionRef,
-        loadDataTable,
-        onCheckedRow,
-        reloadTable,
-      };
     },
   });
+
+  function createActions(record) {
+    return [
+      {
+        label: '删除',
+        icon: 'ic:outline-delete-outline',
+        onClick: handleDelete.bind(null, record),
+        // 根据业务控制是否显示 isShow 和 auth 是并且关系
+        ifShow: () => {
+          return true;
+        },
+        // 根据权限控制是否显示: 有权限，会显示，支持多个
+        auth: ['basic_list'],
+      },
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+        ifShow: () => {
+          return true;
+        },
+        auth: ['basic_list'],
+      },
+    ];
+  }
+
+  const loadDataTable = async (res) => {
+    return await getTableList({ ...params, ...res });
+  };
+
+  function onCheckedRow(rowKeys) {
+    console.log(rowKeys);
+  }
+
+  function reloadTable() {
+    actionRef.value.reload();
+  }
+
+  function handleDelete(record) {
+    console.log(record);
+    dialog.info({
+      title: '提示',
+      content: `您想删除${record.name}`,
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        message.success('删除成功');
+      },
+      onNegativeClick: () => {},
+    });
+  }
+
+  function handleEdit(record) {
+    console.log(record);
+    message.success('您点击了编辑按钮');
+  }
 </script>
 
 <style lang="less" scoped></style>

src/views/comp/table/basicColumns.ts

@@ -5,19 +5,22 @@ export const columns = [
   {
     title: 'id',
     key: 'id',
+    width: 100,
   },
   {
     title: '编码',
     key: 'no',
+    width: 100,
   },
   {
     title: '名称',
     key: 'name',
-    width: 200,
+    width: 100,
   },
   {
     title: '头像',
     key: 'avatar',
+    width: 100,
     render(row) {
       return h(NAvatar, {
         size: 48,
@@ -28,21 +31,22 @@ export const columns = [
   {
     title: '地址',
     key: 'address',
-    width: 200,
+    width: 150,
   },
   {
     title: '开始日期',
     key: 'beginTime',
-    width: 200,
+    width: 160,
   },
   {
     title: '结束日期',
     key: 'endTime',
-    width: 200,
+    width: 160,
   },
   {
     title: '状态',
     key: 'status',
+    width: 100,
     render(row) {
       return h(
         NTag,
@@ -58,9 +62,11 @@ export const columns = [
   {
     title: '创建时间',
     key: 'date',
+    width: 160,
   },
   {
     title: '停留时间',
     key: 'time',
+    width: 80,
   },
 ];

src/views/comp/table/editCell.vue

@@ -7,10 +7,10 @@
       :request="loadDataTable"
       :row-key="(row) => row.id"
       ref="actionRef"
-      :actionColumn="actionColumn"
       @edit-end="editEnd"
       @edit-change="onEditChange"
       @update:checked-row-keys="onCheckedRow"
+      :scroll-x="1360"
     >
       <template #toolbar>
         <n-button type="primary" @click="reloadTable">刷新数据</n-button>
@@ -19,113 +19,41 @@
   </n-card>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, toRefs, ref, h } from 'vue';
-  import { BasicTable, TableAction } from '@/components/Table';
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
+  import { BasicTable } from '@/components/Table';
   import { getTableList } from '@/api/table/list';
   import { columns } from './CellColumns';
 
-  export default defineComponent({
-    components: { BasicTable },
-    setup() {
-      const actionRef = ref();
-      const currentEditKeyRef = ref('');
-      const state = reactive({
-        params: {
-          pageSize: 5,
-          name: 'xiaoMa',
-        },
-        actionColumn: {
-          width: 150,
-          title: '操作',
-          key: 'action',
-          fixed: 'right',
-          align: 'center',
-          render(record) {
-            return h(TableAction, {
-              style: 'button',
-              actions: createActions(record),
-            });
-          },
-        },
-      });
-
-      function handleEdit(record) {
-        currentEditKeyRef.value = record.key;
-        record.onEdit?.(true);
-      }
-
-      function handleCancel(record: EditRecordRow) {
-        currentEditKeyRef.value = '';
-        record.onEdit?.(false, false);
-      }
-
-      function onEditChange({ column, value, record }) {
-        if (column.key === 'id') {
-          record.editValueRefs.name4.value = `${value}`;
-        }
-        console.log(column, value, record);
-      }
-
-      async function handleSave(record: EditRecordRow) {
-        const pass = await record.onEdit?.(false, true);
-        if (pass) {
-          currentEditKeyRef.value = '';
-        }
-      }
-
-      function createActions(record) {
-        if (!record.editable) {
-          return [
-            {
-              label: '编辑',
-              onClick: handleEdit.bind(null, record),
-            },
-          ];
-        } else {
-          return [
-            {
-              label: '保存',
-              onClick: handleSave.bind(null, record),
-            },
-            {
-              label: '取消',
-              onClick: handleCancel.bind(null, record),
-            },
-          ];
-        }
-      }
-
-      const loadDataTable = async (params) => {
-        const data = await getTableList(params);
-        return data;
-      };
-
-      function onCheckedRow(rowKeys) {
-        console.log(rowKeys);
-      }
-
-      function reloadTable() {
-        console.log(actionRef.value);
-        actionRef.value.reload();
-      }
-
-      function editEnd({ record, index, key, value }) {
-        console.log(value);
-      }
-
-      return {
-        ...toRefs(state),
-        columns,
-        actionRef,
-        loadDataTable,
-        onCheckedRow,
-        reloadTable,
-        editEnd,
-        onEditChange,
-      };
-    },
+  const actionRef = ref();
+  const params = reactive({
+    pageSize: 5,
+    name: 'xiaoMa',
   });
+
+  function onEditChange({ column, value, record }) {
+    if (column.key === 'id') {
+      record.editValueRefs.name4.value = `${value}`;
+    }
+    console.log(column, value, record);
+  }
+
+  const loadDataTable = async (res) => {
+    return await getTableList({ ...params, ...res });
+  };
+
+  function onCheckedRow(rowKeys) {
+    console.log(rowKeys);
+  }
+
+  function reloadTable() {
+    console.log(actionRef.value);
+    actionRef.value.reload();
+  }
+
+  function editEnd({ record, index, key, value }) {
+    console.log(value);
+  }
 </script>
 
 <style lang="less" scoped></style>

src/views/comp/table/editRow.vue

@@ -11,6 +11,7 @@
       @edit-end="editEnd"
       @edit-change="onEditChange"
       @update:checked-row-keys="onCheckedRow"
+      :scroll-x="1590"
     >
       <template #toolbar>
         <n-button type="primary" @click="reloadTable">刷新数据</n-button>
@@ -19,113 +20,95 @@
   </n-card>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, toRefs, ref, h } from 'vue';
+<script lang="ts" setup>
+  import { reactive, ref, h } from 'vue';
   import { BasicTable, TableAction } from '@/components/Table';
   import { getTableList } from '@/api/table/list';
   import { columns } from './rowColumns';
 
-  export default defineComponent({
-    components: { BasicTable },
-    setup() {
-      const actionRef = ref();
-      const currentEditKeyRef = ref('');
-      const state = reactive({
-        params: {
-          pageSize: 5,
-          name: 'xiaoMa',
-        },
-        actionColumn: {
-          width: 150,
-          title: '操作',
-          key: 'action',
-          fixed: 'right',
-          align: 'center',
-          render(record) {
-            return h(TableAction, {
-              style: 'button',
-              actions: createActions(record),
-            });
-          },
-        },
+  const actionRef = ref();
+  const currentEditKeyRef = ref('');
+  const params = reactive({
+    pageSize: 5,
+    name: 'xiaoMa',
+  });
+
+  const actionColumn = reactive({
+    width: 150,
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    align: 'center',
+    render(record) {
+      return h(TableAction, {
+        style: 'button',
+        actions: createActions(record),
       });
-
-      function handleEdit(record) {
-        currentEditKeyRef.value = record.key;
-        record.onEdit?.(true);
-      }
-
-      function handleCancel(record: EditRecordRow) {
-        currentEditKeyRef.value = '';
-        record.onEdit?.(false, false);
-      }
-
-      function onEditChange({ column, value, record }) {
-        if (column.key === 'id') {
-          record.editValueRefs.name4.value = `${value}`;
-        }
-        console.log(column, value, record);
-      }
-
-      async function handleSave(record: EditRecordRow) {
-        const pass = await record.onEdit?.(false, true);
-        if (pass) {
-          currentEditKeyRef.value = '';
-        }
-      }
-
-      function createActions(record) {
-        if (!record.editable) {
-          return [
-            {
-              label: '编辑',
-              onClick: handleEdit.bind(null, record),
-            },
-          ];
-        } else {
-          return [
-            {
-              label: '保存',
-              onClick: handleSave.bind(null, record),
-            },
-            {
-              label: '取消',
-              onClick: handleCancel.bind(null, record),
-            },
-          ];
-        }
-      }
-
-      const loadDataTable = async (params) => {
-        const data = await getTableList(params);
-        return data;
-      };
-
-      function onCheckedRow(rowKeys) {
-        console.log(rowKeys);
-      }
-
-      function reloadTable() {
-        console.log(actionRef.value);
-        actionRef.value.reload();
-      }
-
-      function editEnd({ record, index, key, value }) {
-        console.log(value);
-      }
-
-      return {
-        ...toRefs(state),
-        columns,
-        actionRef,
-        loadDataTable,
-        onCheckedRow,
-        reloadTable,
-        editEnd,
-        onEditChange,
-      };
     },
   });
+
+  function handleEdit(record) {
+    currentEditKeyRef.value = record.key;
+    record.onEdit?.(true);
+  }
+
+  function handleCancel(record) {
+    currentEditKeyRef.value = '';
+    record.onEdit?.(false, false);
+  }
+
+  function onEditChange({ column, value, record }) {
+    if (column.key === 'id') {
+      record.editValueRefs.name4.value = `${value}`;
+    }
+    console.log(column, value, record);
+  }
+
+  async function handleSave(record) {
+    const pass = await record.onEdit?.(false, true);
+    if (pass) {
+      currentEditKeyRef.value = '';
+    }
+  }
+
+  function createActions(record) {
+    if (!record.editable) {
+      return [
+        {
+          label: '编辑',
+          onClick: handleEdit.bind(null, record),
+        },
+      ];
+    } else {
+      return [
+        {
+          label: '保存',
+          onClick: handleSave.bind(null, record),
+        },
+        {
+          label: '取消',
+          onClick: handleCancel.bind(null, record),
+        },
+      ];
+    }
+  }
+
+  const loadDataTable = async (res) => {
+    return await getTableList({ ...params, ...res });
+  };
+
+  function onCheckedRow(rowKeys) {
+    console.log(rowKeys);
+  }
+
+  function reloadTable() {
+    console.log(actionRef.value);
+    actionRef.value.reload();
+  }
+
+  function editEnd({ record, index, key, value }) {
+    console.log(value);
+  }
 </script>
 
 <style lang="less" scoped></style>

src/views/comp/table/rowColumns.ts

@@ -5,10 +5,12 @@ export const columns = [
   {
     title: 'id',
     key: 'id',
+    width: 100,
   },
   {
     title: '编码',
     key: 'no',
+    width: 100,
   },
   {
     title: '名称',
@@ -23,6 +25,7 @@ export const columns = [
   {
     title: '头像',
     key: 'avatar',
+    width: 100,
     render(row) {
       return h(NAvatar, {
         size: 48,
@@ -49,23 +52,25 @@ export const columns = [
     },
     edit: true,
     width: 200,
+    ellipsis: false,
   },
   {
     title: '开始日期',
     key: 'beginTime',
     editRow: true,
     edit: true,
-    width: 250,
+    width: 240,
     editComponent: 'NDatePicker',
     editComponentProps: {
       type: 'datetime',
       format: 'yyyy-MM-dd HH:mm:ss',
     },
+    ellipsis: false,
   },
   {
     title: '结束日期',
     key: 'endTime',
-    width: 200,
+    width: 160,
   },
   {
     title: '状态',
@@ -81,9 +86,11 @@ export const columns = [
   {
     title: '创建时间',
     key: 'date',
+    width: 160,
   },
   {
     title: '停留时间',
     key: 'time',
+    width: 80,
   },
 ];

src/views/comp/upload/index.vue

@@ -3,7 +3,7 @@
     <div class="n-layout-page-header">
       <n-card :bordered="false" title="上传图片"> 上传图片，用于向用户收集图片信息 </n-card>
     </div>
-    <n-card :bordered="false" class="proCard mt-4">
+    <n-card :bordered="false" class="mt-4 proCard">
       <n-grid cols="2 s:1 m:3 l:3 xl:3 2xl:3" responsive="screen">
         <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
           <n-form
@@ -47,8 +47,8 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref, unref, reactive, toRefs } from 'vue';
+<script lang="ts" setup>
+  import { ref, unref, reactive } from 'vue';
   import { useMessage } from 'naive-ui';
   import { BasicUpload } from '@/components/Upload';
   import { useGlobSetting } from '@/hooks/setting';
@@ -74,54 +74,38 @@
     },
   };
 
-  export default defineComponent({
-    components: { BasicUpload },
-    setup() {
-      const formRef: any = ref(null);
-      const message = useMessage();
-      const { uploadUrl } = globSetting;
+  const formRef: any = ref(null);
+  const message = useMessage();
+  const { uploadUrl } = globSetting;
 
-      const state = reactive({
-        formValue: {
-          name: '',
-          mobile: '',
-          //图片列表 通常查看和编辑使用 绝对路径 | 相对路径都可以
-          images: ['https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'],
-        },
-        uploadHeaders: {
-          platform: 'miniPrograms',
-          timestamp: new Date().getTime(),
-          token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
-        },
-      });
-
-      function formSubmit() {
-        formRef.value.validate((errors) => {
-          if (!errors) {
-            message.success('验证成功');
-          } else {
-            message.error('验证失败，请填写完整信息');
-          }
-        });
-      }
-
-      function resetForm() {
-        formRef.value.restoreValidation();
-      }
-
-      function uploadChange(list: string[]) {
-        state.formValue.images = unref(list);
-      }
-
-      return {
-        ...toRefs(state),
-        formRef,
-        uploadUrl,
-        rules,
-        formSubmit,
-        resetForm,
-        uploadChange,
-      };
-    },
+  const formValue = reactive({
+    name: '',
+    mobile: '',
+    //图片列表 通常查看和编辑使用 绝对路径 | 相对路径都可以
+    images: ['https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'],
   });
+
+  const uploadHeaders = reactive({
+    platform: 'miniPrograms',
+    timestamp: new Date().getTime(),
+    token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
+  });
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        message.success('验证成功');
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  function resetForm() {
+    formRef.value.restoreValidation();
+  }
+
+  function uploadChange(list: string[]) {
+    formValue.images = unref(list);
+  }
 </script>

src/views/dashboard/console/console.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="console">
     <!--数据卡片-->
-    <n-grid cols="1 s:2 m:3 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12" :y-gap="8" :cols="4">
+    <n-grid cols="1 s:2 m:3 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12" :y-gap="8">
       <n-grid-item>
         <NCard
           title="访问量"
@@ -13,30 +13,40 @@
             <n-tag type="success">日</n-tag>
           </template>
           <div class="py-1 px-1 flex justify-between">
-            <CountTo :startVal="1" :endVal="visits.dayVisits" class="text-3xl" />
+            <n-skeleton v-if="loading" :width="100" size="medium" />
+            <CountTo v-else :startVal="1" :endVal="visits.dayVisits" class="text-3xl" />
           </div>
           <div class="py-1 px-1 flex justify-between">
             <div class="text-sn">
-              日同比
-              <CountTo :startVal="1" suffix="%" :endVal="visits.rise" />
-              <n-icon size="12" style="color: #00ff6f">
-                <component is="CaretUpOutlined" />
-              </n-icon>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                日同比
+                <CountTo :startVal="1" suffix="%" :endVal="visits.rise" />
+                <n-icon size="12" color="#00ff6f">
+                  <CaretUpOutlined />
+                </n-icon>
+              </template>
             </div>
             <div class="text-sn">
-              周同比
-              <CountTo :startVal="1" suffix="%" :endVal="visits.decline" />
-              <n-icon size="12" style="color: #ffde66">
-                <component is="CaretDownOutlined" />
-              </n-icon>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                周同比
+                <CountTo :startVal="1" suffix="%" :endVal="visits.decline" />
+                <n-icon size="12" color="#ffde66">
+                  <CaretDownOutlined />
+                </n-icon>
+              </template>
             </div>
           </div>
           <template #footer>
             <div class="flex justify-between">
-              <div class="text-sn"> 总访问量： </div>
-              <div class="text-sn">
-                <CountTo :startVal="1" :endVal="visits.amount" />
-              </div>
+              <n-skeleton v-if="loading" text :repeat="2" />
+              <template v-else>
+                <div class="text-sn"> 总访问量： </div>
+                <div class="text-sn">
+                  <CountTo :startVal="1" :endVal="visits.amount" />
+                </div>
+              </template>
             </div>
           </template>
         </NCard>
@@ -52,7 +62,14 @@
             <n-tag type="info">周</n-tag>
           </template>
           <div class="py-1 px-1 flex justify-between">
-            <CountTo prefix="￥" :startVal="1" :endVal="saleroom.weekSaleroom" class="text-3xl" />
+            <n-skeleton v-if="loading" :width="100" size="medium" />
+            <CountTo
+              v-else
+              prefix="￥"
+              :startVal="1"
+              :endVal="saleroom.weekSaleroom"
+              class="text-3xl"
+            />
           </div>
           <div class="py-2 px-2 flex justify-between">
             <div class="text-sn flex-1">
@@ -66,10 +83,13 @@
           </div>
           <template #footer>
             <div class="flex justify-between">
-              <div class="text-sn"> 总销售额： </div>
-              <div class="text-sn">
-                <CountTo prefix="￥" :startVal="1" :endVal="saleroom.amount" />
-              </div>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                <div class="text-sn"> 总销售额： </div>
+                <div class="text-sn">
+                  <CountTo prefix="￥" :startVal="1" :endVal="saleroom.amount" />
+                </div>
+              </template>
             </div>
           </template>
         </NCard>
@@ -85,30 +105,40 @@
             <n-tag type="warning">周</n-tag>
           </template>
           <div class="py-1 px-1 flex justify-between">
-            <CountTo :startVal="1" :endVal="orderLarge.weekLarge" class="text-3xl" />
+            <n-skeleton v-if="loading" :width="100" size="medium" />
+            <CountTo v-else :startVal="1" :endVal="orderLarge.weekLarge" class="text-3xl" />
           </div>
           <div class="py-1 px-1 flex justify-between">
             <div class="text-sn">
-              日同比
-              <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
-              <n-icon size="12" style="color: #00ff6f">
-                <component is="CaretUpOutlined" />
-              </n-icon>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                日同比
+                <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
+                <n-icon size="12" color="#00ff6f">
+                  <CaretUpOutlined />
+                </n-icon>
+              </template>
             </div>
             <div class="text-sn">
-              周同比
-              <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
-              <n-icon size="12" style="color: #ffde66">
-                <component is="CaretDownOutlined" />
-              </n-icon>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                周同比
+                <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
+                <n-icon size="12" color="#ffde66">
+                  <CaretDownOutlined />
+                </n-icon>
+              </template>
             </div>
           </div>
           <template #footer>
             <div class="flex justify-between">
-              <div class="text-sn"> 转化率： </div>
-              <div class="text-sn">
-                <CountTo :startVal="1" suffix="%" :endVal="orderLarge.amount" />
-              </div>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                <div class="text-sn"> 转化率： </div>
+                <div class="text-sn">
+                  <CountTo :startVal="1" suffix="%" :endVal="orderLarge.amount" />
+                </div>
+              </template>
             </div>
           </template>
         </NCard>
@@ -124,30 +154,40 @@
             <n-tag type="error">月</n-tag>
           </template>
           <div class="py-1 px-1 flex justify-between">
-            <CountTo prefix="￥" :startVal="1" :endVal="volume.weekLarge" class="text-3xl" />
+            <n-skeleton v-if="loading" :width="100" size="medium" />
+            <CountTo v-else prefix="￥" :startVal="1" :endVal="volume.weekLarge" class="text-3xl" />
           </div>
           <div class="py-1 px-1 flex justify-between">
             <div class="text-sn">
-              月同比
-              <CountTo :startVal="1" suffix="%" :endVal="volume.rise" />
-              <n-icon size="12" style="color: #00ff6f">
-                <component is="CaretUpOutlined" />
-              </n-icon>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                月同比
+                <CountTo :startVal="1" suffix="%" :endVal="volume.rise" />
+                <n-icon size="12" color="#00ff6f">
+                  <CaretUpOutlined />
+                </n-icon>
+              </template>
             </div>
             <div class="text-sn">
-              月同比
-              <CountTo :startVal="1" suffix="%" :endVal="volume.decline" />
-              <n-icon size="12" style="color: #ffde66">
-                <component is="CaretDownOutlined" />
-              </n-icon>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                月同比
+                <CountTo :startVal="1" suffix="%" :endVal="volume.decline" />
+                <n-icon size="12" color="#ffde66">
+                  <CaretDownOutlined />
+                </n-icon>
+              </template>
             </div>
           </div>
           <template #footer>
             <div class="flex justify-between">
-              <div class="text-sn"> 总成交额： </div>
-              <div class="text-sn">
-                <CountTo prefix="￥" :startVal="1" :endVal="volume.amount" />
-              </div>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                <div class="text-sn"> 总成交额： </div>
+                <div class="text-sn">
+                  <CountTo prefix="￥" :startVal="1" :endVal="volume.amount" />
+                </div>
+              </template>
             </div>
           </template>
         </NCard>
@@ -156,14 +196,15 @@
 
     <!--导航卡片-->
     <div class="mt-4">
-      <n-grid cols="1 s:2 m:3 l:8 xl:8 2xl:8" responsive="screen" :x-gap="16" :y-gap="8" :cols="8">
+      <n-grid cols="1 s:2 m:3 l:8 xl:8 2xl:8" responsive="screen" :x-gap="16" :y-gap="8">
         <n-grid-item v-for="(item, index) in iconList" :key="index">
           <NCard content-style="padding-top: 0;" size="small" :bordered="false">
             <template #footer>
-              <div class="cursor-pointer">
+              <n-skeleton v-if="loading" size="medium" />
+              <div class="cursor-pointer" v-else>
                 <p class="flex justify-center">
                   <span>
-                    <n-icon :size="item.size" class="flex-1" :style="{ color: `${item.color}` }">
+                    <n-icon :size="item.size" class="flex-1" :color="item.color">
                       <component :is="item.icon" v-on="item.eventObject || {}" />
                     </n-icon>
                   </span>
@@ -182,113 +223,113 @@
     <VisiTab />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, onMounted, reactive, toRefs } from 'vue';
-  import Icons from './components/Icons';
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import { getConsoleInfo } from '@/api/dashboard/console';
   import VisiTab from './components/VisiTab.vue';
   import { CountTo } from '@/components/CountTo/index';
-  import { getConsoleInfo } from '@/api/dashboard/console';
+  import {
+    CaretUpOutlined,
+    CaretDownOutlined,
+    UsergroupAddOutlined,
+    BarChartOutlined,
+    ShoppingCartOutlined,
+    AccountBookOutlined,
+    CreditCardOutlined,
+    MailOutlined,
+    TagsOutlined,
+    SettingOutlined,
+  } from '@vicons/antd';
 
-  export default defineComponent({
-    components: { ...Icons, VisiTab, CountTo },
-    setup() {
-      const state = reactive({
-        cardHeaderStyle: {
-          'border-bottom': '1px solid #eee',
-          'font-size': '16px',
-        },
-        visits: {},
-        saleroom: {},
-        orderLarge: {},
-        volume: {},
-      });
-      // 图标列表
-      const iconList = [
-        {
-          icon: 'UsergroupAddOutlined',
-          size: '32',
-          title: '用户',
-          color: '#69c0ff',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'BarChartOutlined',
-          size: '32',
-          title: '分析',
-          color: '#69c0ff',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'ShoppingCartOutlined',
-          size: '32',
-          title: '商品',
-          color: '#ff9c6e',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'AccountBookOutlined',
-          size: '32',
-          title: '订单',
-          color: '#b37feb',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'CreditCardOutlined',
-          size: '32',
-          title: '票据',
-          color: '#ffd666',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'MailOutlined',
-          size: '32',
-          title: '消息',
-          color: '#5cdbd3',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'TagsOutlined',
-          size: '32',
-          title: '标签',
-          color: '#ff85c0',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'SettingOutlined',
-          size: '32',
-          title: '配置',
-          color: '#ffc069',
-          eventObject: {
-            click: () => {},
-          },
-        },
-      ];
-      onMounted(async () => {
-        const { visits, saleroom, orderLarge, volume } = await getConsoleInfo();
-        state.visits = visits;
-        state.saleroom = saleroom;
-        state.orderLarge = orderLarge;
-        state.volume = volume;
-      });
-      return {
-        ...toRefs(state),
-        iconList,
-      };
+  const loading = ref(true);
+  const visits = ref<any>({});
+  const saleroom = ref<any>({});
+  const orderLarge = ref<any>({});
+  const volume = ref({});
+
+  // 图标列表
+  const iconList = [
+    {
+      icon: UsergroupAddOutlined,
+      size: '32',
+      title: '用户',
+      color: '#69c0ff',
+      eventObject: {
+        click: () => {},
+      },
     },
+    {
+      icon: BarChartOutlined,
+      size: '32',
+      title: '分析',
+      color: '#69c0ff',
+      eventObject: {
+        click: () => {},
+      },
+    },
+    {
+      icon: ShoppingCartOutlined,
+      size: '32',
+      title: '商品',
+      color: '#ff9c6e',
+      eventObject: {
+        click: () => {},
+      },
+    },
+    {
+      icon: AccountBookOutlined,
+      size: '32',
+      title: '订单',
+      color: '#b37feb',
+      eventObject: {
+        click: () => {},
+      },
+    },
+    {
+      icon: CreditCardOutlined,
+      size: '32',
+      title: '票据',
+      color: '#ffd666',
+      eventObject: {
+        click: () => {},
+      },
+    },
+    {
+      icon: MailOutlined,
+      size: '32',
+      title: '消息',
+      color: '#5cdbd3',
+      eventObject: {
+        click: () => {},
+      },
+    },
+    {
+      icon: TagsOutlined,
+      size: '32',
+      title: '标签',
+      color: '#ff85c0',
+      eventObject: {
+        click: () => {},
+      },
+    },
+    {
+      icon: SettingOutlined,
+      size: '32',
+      title: '配置',
+      color: '#ffc069',
+      eventObject: {
+        click: () => {},
+      },
+    },
+  ];
+
+  onMounted(async () => {
+    const { visits, saleroom, orderLarge, volume } = await getConsoleInfo();
+    visits.value = visits;
+    saleroom.value = saleroom;
+    orderLarge.value = orderLarge;
+    volume.value = volume;
+    loading.value = false;
   });
 </script>
 

src/views/dashboard/monitor/monitor.vue

@@ -2,15 +2,6 @@
   <div>监控台</div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {},
-    setup() {
-      return {};
-    },
-  });
-</script>
+<script lang="ts" setup></script>
 
 <style lang="less" scoped></style>

src/views/dashboard/workplace/workplace.vue

@@ -33,14 +33,7 @@
         </n-grid>
       </n-card>
     </div>
-    <n-grid
-      class="mt-4"
-      cols="2 s:1 m:1 l:2 xl:2 2xl:2"
-      responsive="screen"
-      :x-gap="12"
-      :y-gap="9"
-      :cols="2"
-    >
+    <n-grid class="mt-4" cols="2 s:1 m:1 l:2 xl:2 2xl:2" responsive="screen" :x-gap="12" :y-gap="9">
       <n-gi>
         <n-card
           :segmented="{ content: 'hard' }"
@@ -75,7 +68,7 @@
             >
               <div class="flex">
                 <span>
-                  <n-icon size="30" style="color: #42b983">
+                  <n-icon size="30" color="#42b983">
                     <LogoVue />
                   </n-icon>
                 </span>
@@ -91,7 +84,7 @@
             >
               <div class="flex">
                 <span>
-                  <n-icon size="30" style="color: #e44c27">
+                  <n-icon size="30" color="#e44c27">
                     <Html5Outlined />
                   </n-icon>
                 </span>
@@ -107,7 +100,7 @@
             >
               <div class="flex">
                 <span>
-                  <n-icon size="30" style="color: #dd0031">
+                  <n-icon size="30" color="#dd0031">
                     <LogoAngular />
                   </n-icon>
                 </span>
@@ -123,7 +116,7 @@
             >
               <div class="flex">
                 <span>
-                  <n-icon size="30" style="color: #61dafb">
+                  <n-icon size="30" color="#61dafb">
                     <LogoReact />
                   </n-icon>
                 </span>
@@ -238,7 +231,7 @@
             <n-card size="small" class="cursor-pointer project-card-item" hoverable>
               <div class="flex flex-col justify-center text-gray-500">
                 <span class="text-center">
-                  <n-icon size="30" style="color: #68c755">
+                  <n-icon size="30" color="#68c755">
                     <DashboardOutlined />
                   </n-icon>
                 </span>
@@ -248,7 +241,7 @@
             <n-card size="small" class="cursor-pointer project-card-item" hoverable>
               <div class="flex flex-col justify-center text-gray-500">
                 <span class="text-center">
-                  <n-icon size="30" style="color: #fab251">
+                  <n-icon size="30" color="#fab251">
                     <ProfileOutlined />
                   </n-icon>
                 </span>
@@ -258,7 +251,7 @@
             <n-card size="small" class="cursor-pointer project-card-item" hoverable>
               <div class="flex flex-col justify-center text-gray-500">
                 <span class="text-center">
-                  <n-icon size="30" style="color: #1890ff">
+                  <n-icon size="30" color="#1890ff">
                     <FileProtectOutlined />
                   </n-icon>
                 </span>
@@ -268,7 +261,7 @@
             <n-card size="small" class="cursor-pointer project-card-item" hoverable>
               <div class="flex flex-col justify-center text-gray-500">
                 <span class="text-center">
-                  <n-icon size="30" style="color: #f06b96">
+                  <n-icon size="30" color="#f06b96">
                     <ApartmentOutlined />
                   </n-icon>
                 </span>
@@ -278,7 +271,7 @@
             <n-card size="small" class="cursor-pointer project-card-item" hoverable>
               <div class="flex flex-col justify-center text-gray-500">
                 <span class="text-center">
-                  <n-icon size="30" style="color: #7238d1">
+                  <n-icon size="30" color="#7238d1">
                     <SettingOutlined />
                   </n-icon>
                 </span>
@@ -305,7 +298,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import schoolboy from '@/assets/images/schoolboy.png';
   import {
     GithubOutlined,
@@ -317,30 +310,6 @@
     Html5Outlined,
   } from '@vicons/antd';
   import { LogoVue, LogoAngular, LogoReact, LogoJavascript } from '@vicons/ionicons5';
-
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'DashboardWorkplace',
-    components: {
-      GithubOutlined,
-      LogoVue,
-      DashboardOutlined,
-      ProfileOutlined,
-      FileProtectOutlined,
-      SettingOutlined,
-      ApartmentOutlined,
-      Html5Outlined,
-      LogoAngular,
-      LogoReact,
-      LogoJavascript,
-    },
-    setup() {
-      return {
-        schoolboy,
-      };
-    },
-  });
 </script>
 
 <style lang="less" scoped>

src/views/exception/403.vue

@@ -10,28 +10,20 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { useRouter } from 'vue-router';
-
-  export default defineComponent({
-    setup() {
-      const router = useRouter();
-      return {
-        goHome() {
-          router.push('/');
-        },
-      };
-    },
-  });
+  const router = useRouter();
+  function goHome() {
+    router.push('/');
+  }
 </script>
 
 <style lang="less" scoped>
   .page-container {
     width: 100%;
-    background-color: white;
     border-radius: 4px;
     padding: 50px 0;
+    height: 100vh;
 
     .text-center {
       h1 {

src/views/exception/404.vue

@@ -10,28 +10,20 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { useRouter } from 'vue-router';
-
-  export default defineComponent({
-    setup() {
-      const router = useRouter();
-      return {
-        goHome() {
-          router.push('/');
-        },
-      };
-    },
-  });
+  const router = useRouter();
+  function goHome() {
+    router.push('/');
+  }
 </script>
 
 <style lang="less" scoped>
   .page-container {
     width: 100%;
-    background-color: white;
     border-radius: 4px;
     padding: 50px 0;
+    height: 100vh;
 
     .text-center {
       h1 {