chore: bump version to 0.9.12 and update dependencies

* docs: update readme Install and use

* feat: add docker

* feat: add nginx.conf

* fix: change Traditional Chinese to Simplified Chinese

.dockerignore

@@ -0,0 +1,8 @@
+/node_modules
+/.git
+/.gitignore
+/.vscode
+/.DS_Store
+/*.md
+/dist
+

.env

@@ -1,20 +1,26 @@
 # 项目根目录
-VITE_BASE_URL=/
+VITE_BASE_URL = /
+
 # 项目名称
-VITE_APP_NAME=Nova - Admin
-# 路由模式
+VITE_APP_NAME = Nova - Admin
+
+# 路由模式 web ｜ hash
 VITE_ROUTE_MODE = web
-# 权限路由模式: static ｜ dynamic
-VITE_AUTH_ROUTE_MODE=dynamic
+
+# 路由加载模式 static ｜ dynamic
+VITE_ROUTE_LOAD_MODE = static
 
 # 设置登陆后跳转地址
 VITE_HOME_PATH = /dashboard/workbench
 
 # 本地存储前缀
-VITE_STORAGE_PREFIX=
+VITE_STORAGE_PREFIX =
 
 # 版权信息
-VITE_COPYRIGHT_INFO= Copyright © 2024 chansee97
+VITE_COPYRIGHT_INFO = Copyright © 2024 chansee97
 
 # 自动刷新token
-VITE_AUTO_REFRESH_TOKEN=Y
+VITE_AUTO_REFRESH_TOKEN = Y
+
+# 默认多语言 enUS | zhCN
+VITE_DEFAULT_LANG = enUS

.github/FUNDING.yml

@@ -1 +0,0 @@
-custom: ['https://cdn.jsdelivr.net/gh/chansee97/static/sponsor-wechat.png', 'https://cdn.jsdelivr.net/gh/chansee97/static/sponsor-alipay.png']

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -36,7 +36,7 @@ body:
       options:
         - label: Ensure this issue not a bug proposal.
           required: true
-        - label: Read the [docs](https://nova-admin-docs.netlify.app/).
+        - label: Read the [docs](https://nova-admin-docs.pages.dev/).
           required: true
         - label: Check that there isn't [already an issue](https://github.com/chansee97/nova-admin/issues) that descript the same thing to avoid creating a duplicate.
           required: true

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -39,7 +39,7 @@ body:
       options:
         - label: Ensure this issue not a feature proposal.
           required: true
-        - label: Read the [docs](https://nova-admin-docs.netlify.app/).
+        - label: Read the [docs](https://nova-admin-docs.pages.dev/).
           required: true
         - label: Check that there isn't [already an issue](https://github.com/chansee97/nova-admin/issues) that descript the same thing to avoid creating a duplicate.
           required: true

.github/ISSUE_TEMPLATE/others.yml

@@ -25,7 +25,7 @@ body:
       options:
         - label: Ensure this issue neither a bug report nor a feature proposal.
           required: true
-        - label: Read the [docs](https://nova-admin-docs.netlify.app/).
+        - label: Read the [docs](https://nova-admin-docs.pages.dev/).
           required: true
         - label: Check that there isn't [already an issue](https://github.com/chansee97/nova-admin/issues) that descript the same thing to avoid creating a duplicate.
           required: true

.gitignore

@@ -27,3 +27,6 @@ stats.html
 
 components.d.ts
 auto-imports.d.ts
+
+# Lock files
+*-lock.yaml

.vscode/settings.json

@@ -1,6 +1,4 @@
 {
-  // Enable the ESlint flat config support
-  "eslint.experimental.useFlatConfig": true,
   // Disable the default formatter, use eslint instead
   "prettier.enable": false,
   "editor.formatOnSave": false,
@@ -11,46 +9,16 @@
   },
   // Silent the stylistic rules in you IDE, but still auto fix them
   "eslint.rules.customizations": [
-    {
-      "rule": "style/*",
-      "severity": "off"
-    },
-    {
-      "rule": "format/*",
-      "severity": "off"
-    },
-    {
-      "rule": "*-indent",
-      "severity": "off"
-    },
-    {
-      "rule": "*-spacing",
-      "severity": "off"
-    },
-    {
-      "rule": "*-spaces",
-      "severity": "off"
-    },
-    {
-      "rule": "*-order",
-      "severity": "off"
-    },
-    {
-      "rule": "*-dangle",
-      "severity": "off"
-    },
-    {
-      "rule": "*-newline",
-      "severity": "off"
-    },
-    {
-      "rule": "*quotes",
-      "severity": "off"
-    },
-    {
-      "rule": "*semi",
-      "severity": "off"
-    }
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "format/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
   ],
   // Enable eslint for all supported languages
   "eslint.validate": [
@@ -64,7 +32,16 @@
     "json",
     "jsonc",
     "yaml",
-    "toml"
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro",
+    "css",
+    "less",
+    "scss",
+    "pcss",
+    "postcss"
   ],
   "i18n-ally.sourceLanguage": "zh_CN",
   "i18n-ally.displayLanguage": "zh_CN",
@@ -74,5 +51,16 @@
   "i18n-ally.localesPaths": [
     "locales"
   ],
-  "commentTranslate.source": "Google"
+  // File collapse
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.expand": false,
+  "explorer.fileNesting.patterns": {
+    "*.ts": "$(capture).test.ts, $(capture).test.tsx, $(capture).spec.ts, $(capture).spec.tsx, $(capture).d.ts",
+    "*.tsx": "$(capture).test.ts, $(capture).test.tsx, $(capture).spec.ts, $(capture).spec.tsx,$(capture).d.ts",
+    "*.env": "$(capture).env.*",
+    "README.md": "README*,CHANGELOG*,LICENSE,CNAME",
+    "package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,.gitattributes,.gitignore,.gitpod.yml,.npmrc,.browserslistrc,.node-version,.git*,.tazerc.json",
+    "eslint.config.js": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,stylelint.config.*,.lintstagedrc.mjs,cspell.json",
+    "docker-compose.product.yml": ".dockerignore,nginx.conf"
+  }
 }

README.md

@@ -19,8 +19,8 @@
 
 [Nova-admin](https://github.com/chansee97/nova-admin) is a clean and concise back-end management template based on Vue3, Vite5, Typescript, and Naive UI. It implements complete functionality in a simple way, while also considering code standards, readability, and avoiding excessive encapsulation to facilitate secondary development.
 
-- [Nova-Admin preview](https://nova-admin-site.netlify.app/)
-- [Nova-Admin docs](https://nova-admin-docs.netlify.app/)
+- [Nova-Admin preview](https://nova-admin.pages.dev/)
+- [Nova-Admin docs](https://nova-admin-docs.pages.dev/)
 
 ## Features
 
@@ -51,7 +51,7 @@
 ## Interface document
 
 This project uses ApiFox for interface mock, check the online documentation for more interface details
-[online aipfox docs](https://apifox.com/apidoc/shared-2b1abeb5-6e78-425e-a4ff-d7277ae83bf0)
+[online aipfox docs](https://nova-admin.apifox.cn)
 
 ## Install and use
 
@@ -71,6 +71,13 @@ pnpm build
 
 ```
 
+You can deploy **nova-admin** in a production environment using docker-compose.
+```bash
+# Build product
+docker compose -f docker-compose.product.yml up --build -d
+```
+> The nginx.conf provided is for reference only. You can adjust it according to your own needs.
+
 ## Related projects
 
 - [Nova-admin-nest](https://github.com/chansee97/nove-admin-nest) (under development) Nova-Admin supporting background project based on TS, NestJs, typeorm
@@ -79,11 +86,11 @@ pnpm build
 
 Nova-Admin is a completely open-source and free project. It is still being optimized and iterated. It is designed to help developers more conveniently develop medium and large management systems. If you have any questions, please ask questions in the QQ exchange group.
 
-| Q-Group | wechat-Group |wechat |
-| :--: |:--: |:--: |
-| <img src="https://cdn.jsdelivr.net/gh/chansee97/static/nova-admin/q-group.png" width=170> | <img src="https://cdn.jsdelivr.net/gh/chansee97/static/nova-admin/wx-group.png" width=170>|<img src="https://cdn.jsdelivr.net/gh/chansee97/static/wechat.png" width=170>|
+| Q-Group | wechat-Group |
+| :--: |:--: |
+| <img src="https://cdn.jsdelivr.net/gh/chansee97/static/nova-admin/q-group.png" width=170> |<img src="https://cdn.jsdelivr.net/gh/chansee97/static/wechat.png" width=170>|
 
-> The WeChat group QR code is invalid, please add me as a friend.
+> Please indicate the purpose of adding WeChat.
 
 ## Contribution
 

README.zh-CN.md

@@ -19,8 +19,8 @@
 
 [Nova-admin](https://github.com/chansee97/nova-admin)是一个基于Vue3、Vite5、Typescript、Naive UI, 简洁干净后台管理模板，用简单的方式实现完整功能，并尽可能的考虑代码规范，易读易理解无过度封装，方便二次开发。
 
-- [Nova-Admin 预览](https://nova-admin-site.netlify.app/)
-- [Nova-Admin 文档](https://nova-admin-docs.netlify.app/)
+- [Nova-Admin 预览](https://nova-admin.pages.dev/)
+- [Nova-Admin 文档](https://nova-admin-docs.pages.dev/)
 
 ## 特性
 
@@ -51,7 +51,7 @@
 ## 接口文档
 
 本项目使用ApiFox进行接口mock，查看在线文档以了解更多接口详情
-[在线apifox文档](https://apifox.com/apidoc/shared-2b1abeb5-6e78-425e-a4ff-d7277ae83bf0)
+[在线apifox文档](https://nova-admin.apifox.cn)
 
 ## 安装使用
 
@@ -71,6 +71,13 @@ pnpm build
 
 ```
 
+在生产环境也可以使用 docker-compose 部署 **nova-admin**
+```bash
+# Build product
+docker compose -f docker-compose.product.yml up --build -d
+```
+> 关于 nginx.conf 只供参考，你可以根据自己的需求进行调整。
+
 ## 相关项目
 
 - [Nova-admin-nest](https://github.com/chansee97/nove-admin-nest) (开发中)基于TS, NestJs, typeorm的Nova-Admin配套后台项目
@@ -79,11 +86,11 @@ pnpm build
 
 Nova-Admin 是完全开源免费的项目，目前仍然在优化迭代中，旨在帮助开发者更方便地进行中大型管理系统开发，有使用问题欢迎在交流群内提问。
 
-| Q群 | 微信群 | 个人微信 |
-| :--: |:--: |:--: |
-| <img src="https://cdn.jsdelivr.net/gh/chansee97/static/nova-admin/q-group.png" width=170> | <img src="https://cdn.jsdelivr.net/gh/chansee97/static/nova-admin/wx-group.png" width=170>|<img src="https://cdn.jsdelivr.net/gh/chansee97/static/wechat.png" width=170>|
+| Q群 | 微信群 |
+| :--: |:--: |
+| <img src="https://cdn.jsdelivr.net/gh/chansee97/static/nova-admin/q-group.png" width=170> |<img src="https://cdn.jsdelivr.net/gh/chansee97/static/wechat.png" width=170>|
 
-> 微信群二维码失效请加我为好友
+> 添加微信请注明来意
 
 ## 贡献
 

build/plugins.ts

@@ -1,16 +1,16 @@
 import UnoCSS from '@unocss/vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
-import VueDevTools from 'vite-plugin-vue-devtools'
-import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
-import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
-import viteCompression from 'vite-plugin-compression'
-import Icons from 'unplugin-icons/vite'
 import { FileSystemIconLoader } from 'unplugin-icons/loaders'
-
 // https://github.com/antfu/unplugin-icons
 import IconsResolver from 'unplugin-icons/resolver'
+import Icons from 'unplugin-icons/vite'
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
+import Components from 'unplugin-vue-components/vite'
+import viteCompression from 'vite-plugin-compression'
+
+import VueDevTools from 'vite-plugin-vue-devtools'
 
 /**
  * @description: 设置vite插件配置

docker-compose.product.yml

@@ -0,0 +1,8 @@
+services:
+  nove-admin:
+    build:
+      context: .
+      dockerfile: ./docker/dockerfile.product
+    container_name: nove-admin
+    ports:
+      - 80:80

docker/dockerfile.product

@@ -0,0 +1,23 @@
+FROM node:20-slim AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+COPY . /app
+WORKDIR /app
+
+FROM base AS prod-deps
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
+
+FROM base AS builder
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+RUN pnpm run build
+
+FROM nginx:1.23.1-alpine
+
+WORKDIR /www
+
+COPY --from=builder /app/dist/ .
+
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80

eslint.config.js

@@ -2,4 +2,21 @@
 import antfu from '@antfu/eslint-config'
 
 // https://github.com/antfu/eslint-config
-export default antfu()
+export default antfu(
+  {
+    typescript: {
+      overrides: {
+        'perfectionist/sort-exports': 'off',
+        'perfectionist/sort-imports': 'off',
+        'ts/no-unused-expressions': ['error', { allowShortCircuit: true }],
+      },
+    },
+    vue: {
+      overrides: {
+        'vue/no-unused-refs': 'off', // 暂时关闭，等待vue-lint的分支合并
+        'vue/no-reserved-component-names': 'off',
+        'vue/component-definition-name-casing': 'off',
+      },
+    },
+  },
+)

locales/en_US.json

@@ -14,7 +14,7 @@
     "loginOutContent": "Confirm to log out of current account?",
     "loginOutTitle": "Sign out",
     "userCenter": "Personal center",
-    "lignt": "Light",
+    "light": "Light",
     "dark": "Dark",
     "system": "System",
     "backTop": "Back to top",
@@ -42,6 +42,7 @@
     "themeSetting": "Theme settings",
     "todos": "Todos",
     "toggleFullScreen": "Toggle full screen",
+    "togglContentFullScreen": "Toggle content full screen",
     "topProgress": "Top progress",
     "transitionFadeBottom": "Bottom fade",
     "transitionFadeScale": "Scale fade",
@@ -59,7 +60,8 @@
     "getRouteError": "Failed to obtain route, please try again later.",
     "layoutSetting": "Layout settings",
     "leftMenu": "Left menu",
-    "topMenu": "Top menu"
+    "topMenu": "Top menu",
+    "mixMenu": "Mix menu"
   },
   "login": {
     "signInTitle": "Login",
@@ -87,17 +89,18 @@
   "route": {
     "appRoot": "Home",
     "cardList": "Card list",
+    "draggableList": "Draggable list",
     "commonList": "Common list",
     "dashboard": "Dashboard",
     "demo": "Function example",
     "fetch": "Request example",
     "list": "List",
     "monitor": "Monitoring",
-    "test": "Multi-level menu",
-    "test2": "Multi-level menu subpage",
-    "test2Detail": "Details page of multi-level menu",
-    "test3": "multi-level menu",
-    "test4": "Multi-level menu 3-1",
+    "multi": "Multi-level menu",
+    "multi2": "Multi-level menu subpage",
+    "multi2Detail": "Details page of multi-level menu",
+    "multi3": "multi-level menu",
+    "multi4": "Multi-level menu 3-1",
     "workbench": "Workbench",
     "QRCode": "QR code",
     "about": "About",
@@ -106,10 +109,11 @@
     "demo404": "404",
     "demo500": "500",
     "dictionarySetting": "Dictionary settings",
-    "docments": "Document",
-    "docmentsVite": "Vite",
-    "docmentsVue": "Vue",
-    "docmentsVueuse": "VueUse (external link)",
+    "documents": "Document",
+    "documentsVite": "Vite",
+    "documentsVue": "Vue",
+    "documentsVueuse": "VueUse (external link)",
+    "documentsNova": "Nova docs",
     "echarts": "Echarts",
     "editor": "Editor",
     "editorMd": "MarkDown editor",
@@ -124,7 +128,8 @@
     "setting": "System settings",
     "userCenter": "Personal Center",
     "accountSetting": "User settings",
-    "cascader": "Administrative region selection"
+    "cascader": "Administrative region selection",
+    "dict": "Dictionary example"
   },
   "http": {
     "400": "Syntax error in the request",
@@ -147,6 +152,12 @@
       "searchPlaceholder": "Search icon",
       "clearIcon": "Clear icon",
       "selectorTitle": "Icon selection"
+    },
+    "copyText": {
+      "message": "Copied successfully",
+      "tooltip": "Copy",
+      "unsupportedError": "Your browser does not support Clipboard API",
+      "unpermittedError": "Crrently not permitted to use Clipboard API"
     }
   }
 }

locales/zh_CN.json

@@ -14,12 +14,13 @@
     "loginOutTitle": "退出登录",
     "loginOutContent": "确认退出当前账号？",
     "userCenter": "个人中心",
-    "lignt": "浅色",
+    "light": "浅色",
     "dark": "深色",
     "system": "跟随系统",
     "backTop": "返回顶部",
     "toggleSider": "切换侧边栏",
     "toggleFullScreen": "切换全屏",
+    "togglContentFullScreen": "切换内容全屏",
     "notificationsTips": "消息通知",
     "notifications": "通知",
     "messages": "消息",
@@ -59,7 +60,8 @@
     "getRouteError": "获取路由失败，请稍后再试",
     "layoutSetting": "布局设置",
     "leftMenu": "左侧菜单",
-    "topMenu": "顶部菜单"
+    "topMenu": "顶部菜单",
+    "mixMenu": "混合菜单"
   },
   "http": {
     "400": "请求出现语法错误",
@@ -82,6 +84,12 @@
       "inputPlaceholder": "选择目标图标",
       "searchPlaceholder": "搜索图标",
       "clearIcon": "清除图标"
+    },
+    "copyText": {
+      "tooltip": "复制",
+      "message": "复制成功",
+      "unsupportedError": "您的浏览器不支持剪贴板API",
+      "unpermittedError": "目前不允许使用剪贴板API"
     }
   },
   "login": {
@@ -112,14 +120,15 @@
     "dashboard": "仪表盘",
     "workbench": "工作台",
     "monitor": "监控页",
-    "test": "多级菜单演示",
-    "test2": "多级菜单子页",
-    "test2Detail": "多级菜单的详情页",
-    "test3": "多级菜单",
-    "test4": "多级菜单3-1",
+    "multi": "多级菜单演示",
+    "multi2": "多级菜单子页",
+    "multi2Detail": "多级菜单的详情页",
+    "multi3": "多级菜单",
+    "multi4": "多级菜单3-1",
     "list": "列表页",
     "commonList": "常用列表",
     "cardList": "卡片列表",
+    "draggableList": "拖拽列表",
     "demo": "功能示例",
     "fetch": "请求示例",
     "echarts": "Echarts示例",
@@ -130,10 +139,11 @@
     "clipboard": "剪贴板",
     "icons": "图标",
     "QRCode": "二维码",
-    "docments": "文档",
-    "docmentsVue": "Vue",
-    "docmentsVite": "Vite",
-    "docmentsVueuse": "VueUse（外链）",
+    "documents": "文档",
+    "documentsVue": "Vue",
+    "documentsVite": "Vite",
+    "documentsVueuse": "VueUse（外链）",
+    "documentsNova": "Nova 文档",
     "permission": "权限",
     "permissionDemo": "权限示例",
     "justSuper": "super可见",
@@ -147,6 +157,7 @@
     "menuSetting": "菜单设置",
     "userCenter": "个人中心",
     "about": "关于",
-    "cascader": "省市区联动"
+    "cascader": "省市区联动",
+    "dict": "字典示例"
   }
 }

nginx.conf

@@ -0,0 +1,66 @@
+server {
+    listen 80;
+    listen [::]:80;
+
+    # 启用 gzip 压缩
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 10240;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml application/javascript;
+    gzip_disable "MSIE [1-6]\.";
+
+    # 设定 MIME types
+    include /etc/nginx/mime.types;
+
+    # 基本安全设定
+    add_header X-Frame-Options "SAMEORIGIN";
+    add_header X-XSS-Protection "1; mode=block";
+    add_header X-Content-Type-Options "nosniff";
+
+    # 增加伺服器效能的配置
+    client_max_body_size 100M;
+    client_body_buffer_size 128k;
+    proxy_connect_timeout 90;
+    proxy_send_timeout 90;
+    proxy_read_timeout 90;
+    proxy_buffer_size 4k;
+    proxy_buffers 4 32k;
+    proxy_busy_buffers_size 64k;
+
+    location / {
+        root /www;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+
+        # 设定快取控制
+        location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
+            expires 30d;
+            add_header Cache-Control "public, no-transform";
+        }
+
+        # 动态内容不快取
+        location = /index.html {
+            add_header Cache-Control "no-store, no-cache, must-revalidate";
+            add_header Pragma "no-cache";
+            expires -1;
+        }
+
+        # 错误处理
+        proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
+        proxy_intercept_errors on;
+
+        # 基本的代理设定
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    # 禁止访问隐藏文件
+    location ~ /\. {
+        deny all;
+        access_log off;
+        log_not_found off;
+    }
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nova-admin",
   "type": "module",
-  "version": "0.9.4",
+  "version": "0.9.12",
   "private": true,
   "description": "a clean and concise back-end management template based on Vue3, Vite5, Typescript, and Naive UI.",
   "author": {
@@ -40,52 +40,52 @@
     "dev": "vite --mode dev --port 9980",
     "dev:test": "vite --mode test",
     "dev:prod": "vite --mode prod",
-    "build": "vue-tsc --noEmit && vite build --mode prod",
-    "build:dev": "vue-tsc --noEmit && vite build --mode dev",
-    "build:test": "vue-tsc --noEmit && vite build --mode test",
+    "build": "vite build --mode prod",
+    "build:dev": "vite build --mode dev",
+    "build:test": "vite build --mode test",
     "preview": "vite preview --port 9981",
-    "lint": "eslint .",
+    "lint": "eslint . && vue-tsc --noEmit",
     "lint:fix": "eslint . --fix",
     "lint:check": "npx @eslint/config-inspector",
     "sizecheck": "npx vite-bundle-visualizer"
   },
   "dependencies": {
-    "@alova/scene-vue": "^1.5.0",
-    "@vueuse/core": "^10.9.0",
-    "alova": "^2.20.5",
+    "@vueuse/core": "^13.0.0",
+    "alova": "^3.2.10",
     "colord": "^2.9.3",
-    "echarts": "^5.5.0",
-    "md-editor-v3": "^4.15.2",
-    "pinia": "^2.1.7",
-    "pinia-plugin-persist": "^1.0.0",
-    "quill": "^2.0.2",
+    "echarts": "^5.6.0",
+    "md-editor-v3": "^5.4.5",
+    "pinia": "^3.0.1",
+    "pinia-plugin-persistedstate": "^4.2.0",
+    "quill": "^2.0.3",
     "radash": "^12.1.0",
-    "vue": "^3.4.27",
-    "vue-i18n": "^9.13.1",
-    "vue-router": "^4.3.2"
+    "vue": "^3.5.13",
+    "vue-draggable-plus": "^0.6.0",
+    "vue-i18n": "^11.1.2",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.18.1",
-    "@iconify-json/icon-park-outline": "^1.1.15",
-    "@iconify/vue": "^4.1.2",
-    "@types/node": "^20.12.12",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vitejs/plugin-vue-jsx": "^3.1.0",
-    "eslint": "^9.3.0",
-    "lint-staged": "^15.2.4",
-    "naive-ui": "^2.38.2",
-    "sass": "^1.77.2",
-    "simple-git-hooks": "^2.11.1",
-    "typescript": "^5.4.5",
-    "unocss": "^0.60.3",
-    "unplugin-auto-import": "^0.17.6",
-    "unplugin-icons": "^0.19.0",
-    "unplugin-vue-components": "^0.27.0",
-    "vite": "^5.2.11",
+    "@antfu/eslint-config": "^4.11.0",
+    "@iconify-json/icon-park-outline": "^1.2.2",
+    "@iconify/vue": "^4.3.0",
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "eslint": "^9.24.0",
+    "lint-staged": "^15.5.0",
+    "naive-ui": "^2.41.0",
+    "sass": "^1.86.3",
+    "simple-git-hooks": "^2.12.1",
+    "typescript": "^5.8.3",
+    "unocss": "^0.65.4",
+    "unplugin-auto-import": "^19.1.2",
+    "unplugin-icons": "^22.1.0",
+    "unplugin-vue-components": "^28.4.1",
+    "vite": "^6.2.5",
     "vite-bundle-visualizer": "^1.2.1",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-vue-devtools": "7.2.1",
-    "vue-tsc": "^2.0.19"
+    "vite-plugin-vue-devtools": "7.7.2",
+    "vue-tsc": "^2.2.8"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"

src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { naiveI18nOptions } from '@/utils'
 import { darkTheme } from 'naive-ui'
 import { useAppStore } from './store'
-import { naiveI18nOptions } from '@/utils'
 
 const appStore = useAppStore()
 

src/components/common/DarkModeSwitch.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { NFlex } from 'naive-ui'
 import { useAppStore } from '@/store'
-import IconSun from '~icons/icon-park-outline/sun-one'
-import IconMoon from '~icons/icon-park-outline/moon'
 import IconAuto from '~icons/icon-park-outline/laptop-computer'
+import IconMoon from '~icons/icon-park-outline/moon'
+import IconSun from '~icons/icon-park-outline/sun-one'
+import { NFlex } from 'naive-ui'
 
 const { t } = useI18n()
 
@@ -12,7 +12,7 @@ const appStore = useAppStore()
 const options = computed(() => {
   return [
     {
-      label: t('app.lignt'),
+      label: t('app.light'),
       value: 'light',
       icon: IconSun,
     },

src/components/common/HelpInfo.vue

@@ -3,14 +3,14 @@ interface Props {
   message: string
 }
 
-const props = defineProps<Props>()
+const { message } = defineProps<Props>()
 </script>
 
 <template>
   <n-tooltip :show-arrow="false" trigger="hover">
     <template #trigger>
-      <icon-park-outline-help />
+      <icon-park-outline-help class="op-50 cursor-help" />
     </template>
-    {{ props.message }}
+    {{ message }}
   </n-tooltip>
 </template>

src/components/common/IconSelect.vue

@@ -5,9 +5,9 @@ interface Props {
   disabled?: boolean
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  disabled: false,
-})
+const {
+  disabled = false,
+} = defineProps<Props>()
 
 interface IconList {
   prefix: string
@@ -39,6 +39,16 @@ async function fetchIconAllList(nameList: string[]) {
     return i
   })
 }
+// 获取svg文件名
+function getSvgName(path: string) {
+  const regex = /\/([^/]+)\.svg$/
+  const match = path.match(regex)
+  if (match) {
+    const fileName = match[1]
+    return fileName
+  }
+  return path
+}
 
 // 获取所有本地图标
 function generateLocalIconList() {
@@ -48,15 +58,6 @@ function generateLocalIconList() {
     eager: true,
   })
 
-  function getSvgName(path: string) {
-    const regex = /\/([^/]+)\.svg$/
-    const match = path.match(regex)
-    if (match) {
-      const fileName = match[1]
-      return fileName
-    }
-    return path
-  }
   return mapEntries(localSvgList, (key, value) => {
     return [getSvgName(key), value]
   })
@@ -103,9 +104,8 @@ const icons = computed(() => {
 
 // 符合搜索条件的图标列表
 const visibleIcons = computed(() => {
-  return icons.value
-    ?.filter(i => i.includes(searchValue.value))
-    ?.slice((currentPage.value - 1) * 200, (currentPage.value) * 200)
+  return icons.value?.filter(i => i
+    .includes(searchValue.value))?.slice((currentPage.value - 1) * 200, (currentPage.value) * 200)
 })
 
 const showModal = ref(false)
@@ -125,13 +125,13 @@ function clearIcon() {
 
 <template>
   <n-input-group disabled>
-    <n-button v-if="value" :disabled="props.disabled" type="primary">
+    <n-button v-if="value" :disabled="disabled" type="primary">
       <template #icon>
         <nova-icon :icon="value" />
       </template>
     </n-button>
     <n-input :value="value" readonly :placeholder="$t('components.iconSelector.inputPlaceholder')" />
-    <n-button type="primary" ghost :disabled="props.disabled" @click="showModal = true">
+    <n-button type="primary" ghost :disabled="disabled" @click="showModal = true">
       {{ $t('common.choose') }}
     </n-button>
   </n-input-group>

src/components/common/NovaIcon.vue

@@ -11,42 +11,36 @@ interface iconPorps {
   /* 图标深度 */
   depth?: 1 | 2 | 3 | 4 | 5
 }
-const props = withDefaults(defineProps<iconPorps>(), {
-  size: 18,
-  isLocal: false,
-})
+const { size = 18, icon } = defineProps<iconPorps>()
 
 const isLocal = computed(() => {
-  return props.icon && props.icon.startsWith('local:')
+  return icon && icon.startsWith('local:')
 })
 
 function getLocalIcon(icon: string) {
   const svgName = icon.replace('local:', '')
-  const svg = import.meta.glob('@/assets/svg-icons/*.svg', {
+  const svg = import.meta.glob<string>('@/assets/svg-icons/*.svg', {
     query: '?raw',
     import: 'default',
     eager: true,
   })
+
   return svg[`/src/assets/svg-icons/${svgName}.svg`]
 }
 </script>
 
 <template>
   <n-icon
-    v-if="icon && !isLocal"
+    v-if="icon"
     :size="size"
     :depth="depth"
     :color="color"
   >
-    <Icon :icon="icon" />
+    <template v-if="isLocal">
+      <i v-html="getLocalIcon(icon)" />
+    </template>
+    <template v-else>
+      <Icon :icon="icon" />
+    </template>
   </n-icon>
-  <n-icon
-    v-if="icon && isLocal"
-    :size="size"
-    :depth="depth"
-    :color="color"
-    v-html="getLocalIcon(icon)"
-  />
 </template>
-
-<style scoped></style>

src/components/common/Pagination.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-const props = defineProps({
-  count: {
-    type: Number,
-    default: 0,
-  },
-})
+interface Props {
+  count?: number
+}
+const {
+  count = 0,
+} = defineProps<Props>()
 
 const emit = defineEmits<{
   change: [page: number, pageSize: number] // 具名元组语法
@@ -21,11 +21,11 @@ function changePage() {
 
 <template>
   <n-pagination
-    v-if="props.count > 0"
+    v-if="count > 0"
     v-model:page="page"
     v-model:page-size="pageSize"
     :page-sizes="[10, 20, 30, 50]"
-    :item-count="props.count"
+    :item-count="count"
     :display-order="displayOrder"
     show-size-picker
     @update-page="changePage"

src/components/common/Watermark.vue

@@ -3,16 +3,15 @@ interface Props {
   showWatermark: boolean
   text?: string
 }
-const props = withDefaults(defineProps<Props>(), {
-  showWatermark: false,
-  text: 'Watermark',
-})
+const {
+  text = 'Watermark',
+} = defineProps<Props>()
 </script>
 
 <template>
   <n-watermark
-    v-if="props.showWatermark"
-    :content="props.text"
+    v-if="showWatermark"
+    :content="text"
     cross
     fullscreen
     :font-size="16"

src/components/custom/CopyText.vue

@@ -1,17 +1,23 @@
 <script setup lang="ts">
-const props = defineProps<{
+interface Props {
   maxLength?: string
-}>()
+}
+const { maxLength } = defineProps<Props>()
 const modelValue = defineModel<string>('value')
 </script>
 
 <template>
   <div v-if="modelValue" class="inline-flex items-center gap-0.5em">
-    <n-ellipsis :style="{ 'max-width': props.maxLength || '12em' }">
+    <n-ellipsis :style="{ 'max-width': maxLength || '12em' }">
       {{ modelValue }}
     </n-ellipsis>
-    <span v-copy="modelValue" class="cursor-pointer">
-      <icon-park-outline-copy />
-    </span>
+    <n-tooltip trigger="hover">
+      <template #trigger>
+        <span v-copy="modelValue" class="cursor-pointer">
+          <icon-park-outline-copy />
+        </span>
+      </template>
+      {{ $t('components.copyText.tooltip') }}
+    </n-tooltip>
   </div>
 </template>

src/components/custom/Editor/MarkDownEditor/index.vue

@@ -1,26 +1,16 @@
 <script setup lang="ts">
 import type { ToolbarNames } from 'md-editor-v3'
 
-import { MdEditor } from 'md-editor-v3'
-
-// https://imzbf.github.io/md-editor-v3/zh-CN/docs
-import 'md-editor-v3/lib/style.css'
 import { useAppStore } from '@/store'
 
-const props = defineProps<{
-  modelValue: string
-}>()
+import { MdEditor } from 'md-editor-v3'
+// https://imzbf.github.io/md-editor-v3/zh-CN/docs
+import 'md-editor-v3/lib/style.css'
 
-const emit = defineEmits(['update:modelValue'])
+const model = defineModel<string>()
 
 const appStore = useAppStore()
 
-const data = useVModel(props, 'modelValue', emit)
-
-const theme = computed(() => {
-  return appStore.colorMode ? 'dark' : 'light'
-})
-
 const toolbarsExclude: ToolbarNames[] = [
   'mermaid',
   'katex',
@@ -32,7 +22,7 @@ const toolbarsExclude: ToolbarNames[] = [
 
 <template>
   <MdEditor
-    v-model="data" :theme="theme" :toolbars-exclude="toolbarsExclude"
+    v-model="model" :theme="appStore.colorMode" :toolbars-exclude="toolbarsExclude"
   />
 </template>
 

src/components/custom/Editor/RichTextEditor/index.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import Quill from 'quill'
+import { useTemplateRef } from 'vue'
 import 'quill/dist/quill.snow.css'
 
 defineOptions({
   name: 'RichTextEditor',
 })
 
-const props = defineProps<{
+const { disabled } = defineProps<Props>()
+interface Props {
   disabled?: boolean
-}>()
-
-const model = defineModel()
+}
+const model = defineModel<string>()
 
 let editorInst = null
 
@@ -20,7 +21,7 @@ onMounted(() => {
   initEditor()
 })
 
-const editorRef = ref()
+const editorRef = useTemplateRef<HTMLElement>('editorRef')
 function initEditor() {
   const options = {
     modules: {
@@ -52,28 +53,33 @@ function initEditor() {
     placeholder: 'Insert text here ...',
     theme: 'snow',
   }
-  const quill = new Quill(editorRef.value, options)
+  const quill = new Quill(editorRef.value!, options)
 
   quill.on('text-change', (_delta, _oldDelta, _source) => {
     editorModel.value = quill.getSemanticHTML()
   })
 
-  if (props.disabled)
+  if (disabled)
     quill.enable(false)
 
   editorInst = quill
+
+  if (model.value)
+    setContents(model.value)
+}
+
+function setContents(html: string) {
+  editorInst!.setContents(editorInst!.clipboard.convert({ html }))
 }
 
 watch(
   () => model.value,
   (newValue, _oldValue) => {
     if (newValue && newValue !== editorModel.value) {
-      editorInst!.setContents(editorInst!.clipboard.convert({
-        html: newValue,
-      }))
+      setContents(newValue)
     }
     else if (!newValue) {
-      editorInst!.setContents([])
+      setContents('')
     }
   },
 )
@@ -87,7 +93,7 @@ watch(editorModel, (newValue, oldValue) => {
 })
 
 watch(
-  () => props.disabled,
+  () => disabled,
   (newValue, _oldValue) => {
     editorInst!.enable(!newValue)
   },

src/directives/copy.ts

@@ -1,4 +1,5 @@
 import type { App, Directive } from 'vue'
+import { $t } from '@/utils'
 
 interface CopyHTMLElement extends HTMLElement {
   _copyText: string
@@ -10,12 +11,12 @@ export function install(app: App) {
 
   function clipboardEnable() {
     if (!isSupported.value) {
-      window.$message.error('Your browser does not support Clipboard API')
+      window.$message.error($t('components.copyText.unsupportedError'))
       return false
     }
 
     if (permissionWrite.value !== 'granted') {
-      window.$message.error('Currently not permitted to use Clipboard API')
+      window.$message.error($t('components.copyText.unpermittedError'))
       return false
     }
     return true
@@ -25,7 +26,7 @@ export function install(app: App) {
     if (!clipboardEnable())
       return
     copy(this._copyText)
-    window.$message.success('复制成功')
+    window.$message.success($t('components.copyText.message'))
   }
 
   function updataClipboard(el: CopyHTMLElement, text: string) {

src/hooks/useEcharts.ts

@@ -1,6 +1,3 @@
-import * as echarts from 'echarts/core'
-import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts'
-
 // 系列类型的定义后缀都为 SeriesOption
 import type {
   BarSeriesOption,
@@ -8,7 +5,6 @@ import type {
   PieSeriesOption,
   RadarSeriesOption,
 } from 'echarts/charts'
-
 // 组件类型的定义后缀都为 ComponentOption
 import type {
   DatasetComponentOption,
@@ -18,6 +14,9 @@ import type {
   ToolboxComponentOption,
   TooltipComponentOption,
 } from 'echarts/components'
+import { useAppStore } from '@/store'
+import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts'
+
 import {
   DatasetComponent, // 数据集组件
   GridComponent,
@@ -27,10 +26,11 @@ import {
   TooltipComponent,
   TransformComponent, // 内置数据转换器组件 (filter, sort)
 } from 'echarts/components'
+import * as echarts from 'echarts/core'
 
 import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
-import { useAppStore } from '@/store'
+import { useTemplateRef } from 'vue'
 
 // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
 export type ECOption = echarts.ComposeOption<
@@ -68,16 +68,22 @@ echarts.use([
  * Echarts hooks函数
  * @description 按需引入图表组件，没注册的组件需要先引入
  */
-export function useEcharts(el: Ref<HTMLElement | null>, chartOptions: Ref<ECOption>) {
+export function useEcharts(ref: string, chartOptions: Ref<ECOption>) {
+  const el = useTemplateRef<HTMLLIElement>(ref)
+
   const appStore = useAppStore()
 
   let chart: echarts.ECharts | null = null
 
   const { width, height } = useElementSize(el)
 
-  const isRendered = computed(() => Boolean(el && chart))
+  const isRendered = () => Boolean(el && chart)
 
   async function render() {
+    // 宽或高不存在时不渲染
+    if (!width || !height)
+      return
+
     const chartTheme = appStore.colorMode ? 'dark' : 'light'
     await nextTick()
     if (el) {
@@ -86,9 +92,10 @@ export function useEcharts(el: Ref<HTMLElement | null>, chartOptions: Ref<ECOpti
     }
   }
 
-  function update(updateOptions: ECOption) {
-    if (isRendered.value)
-      chart!.setOption({ ...updateOptions, backgroundColor: 'transparent' })
+  async function update(updateOptions: ECOption) {
+    if (isRendered()) {
+      chart!.setOption({ backgroundColor: 'transparent', ...updateOptions })
+    }
   }
 
   function destroy() {
@@ -97,7 +104,7 @@ export function useEcharts(el: Ref<HTMLElement | null>, chartOptions: Ref<ECOpti
   }
 
   watch([width, height], async ([newWidth, newHeight]) => {
-    if (isRendered.value && newWidth && newHeight)
+    if (isRendered() && newWidth && newHeight)
       chart?.resize()
   })
 

src/hooks/usePermission.ts

@@ -1,4 +1,3 @@
-import { isArray, isString } from 'radash'
 import { useAuthStore } from '@/store'
 
 /** 权限判断 */
@@ -6,7 +5,7 @@ export function usePermission() {
   const authStore = useAuthStore()
 
   function hasPermission(
-    permission: Entity.RoleType | Entity.RoleType[] | undefined,
+    permission?: Entity.RoleType[],
   ) {
     if (!permission)
       return true
@@ -15,13 +14,9 @@ export function usePermission() {
       return false
     const { role } = authStore.userInfo
 
-    let has = role === 'super'
+    let has = role.includes('super')
     if (!has) {
-      if (isArray(permission))
-        has = permission.includes(role)
-
-      if (isString(permission))
-        has = permission === role
+      has = permission.every(i => role.includes(i))
     }
     return has
   }

src/hooks/useTableDrag.ts

@@ -0,0 +1,35 @@
+import type { NDataTable } from 'naive-ui'
+import { useDraggable } from 'vue-draggable-plus'
+
+export function useTableDrag<T = unknown>(params: {
+  tableRef: Ref<InstanceType<typeof NDataTable> | undefined>
+  data: Ref<T[]>
+  onRowDrag: (rows: T[]) => void
+}) {
+  const tableEl = computed(() => params.tableRef?.value?.$el as HTMLElement)
+  const tableBodyRef = ref<HTMLElement | undefined>(undefined)
+
+  const { start } = useDraggable(tableBodyRef, params.data, {
+    immediate: false,
+    animation: 150,
+    handle: '.drag-handle',
+    onEnd: (event) => {
+      const { oldIndex, newIndex } = event
+      const start = Math.min(oldIndex!, newIndex!)
+      const end = Math.max(oldIndex!, newIndex!) - start + 1
+      const changedRows = [...params.data.value].splice(start, end)
+      params.onRowDrag(unref([...changedRows]))
+    },
+  })
+
+  onMounted(async () => {
+    while (!tableBodyRef.value) {
+      tableBodyRef.value = tableEl.value?.querySelector('tbody') || undefined
+      await new Promise(resolve => setTimeout(resolve, 100))
+    }
+  })
+
+  watchOnce(() => tableBodyRef.value, (el) => {
+    el && start()
+  })
+}

src/layouts/components/common/LayoutSelector.vue

@@ -12,11 +12,10 @@ const value = defineModel<LayoutMode>('value', { required: true })
           :class="{
             'outline outline-2': value === 'leftMenu',
           }"
-          class="grid grid-cols-[20%_1fr] grid-rows-[20%_1fr] outline-[var(--primary-color)] hover:(outline outline-2) cursor-pointer"
+          class="grid grid-cols-[20%_1fr] outline-[var(--primary-color)] hover:(outline outline-2) cursor-pointer"
           @click="value = 'leftMenu'"
         >
-          <div class="bg-[var(--primary-color)] row-span-2" />
-          <div class="bg-[var(--primary-color-suppl)]" />
+          <div class="bg-[var(--primary-color)]" />
           <div class="bg-[var(--divider-color)]" />
         </n-el>
       </template>
@@ -29,7 +28,7 @@ const value = defineModel<LayoutMode>('value', { required: true })
           :class="{
             'outline outline-2': value === 'topMenu',
           }"
-          class="grid  grid-rows-[30%_1fr] outline-[var(--primary-color)] hover:(outline outline-2) cursor-pointer"
+          class="grid grid-rows-[30%_1fr] outline-[var(--primary-color)] hover:(outline outline-2) cursor-pointer"
           @click="value = 'topMenu'"
         >
           <div class="bg-[var(--primary-color)]" />
@@ -38,6 +37,23 @@ const value = defineModel<LayoutMode>('value', { required: true })
       </template>
       <span> {{ $t('app.topMenu') }} </span>
     </n-tooltip>
+
+    <n-tooltip placement="bottom" trigger="hover">
+      <template #trigger>
+        <n-el
+          :class="{
+            'outline outline-2': value === 'mixMenu',
+          }"
+          class="grid grid-cols-[20%_1fr] grid-rows-[20%_1fr] outline-[var(--primary-color)] hover:(outline outline-2) cursor-pointer"
+          @click="value = 'mixMenu'"
+        >
+          <div class="bg-[var(--primary-color)] row-span-2" />
+          <div class="bg-[var(--primary-color)]" />
+          <div class="bg-[var(--divider-color)]" />
+        </n-el>
+      </template>
+      <span> {{ $t('app.mixMenu') }} </span>
+    </n-tooltip>
   </div>
 </template>
 

src/layouts/components/common/NoticeList.vue

@@ -2,7 +2,7 @@
 interface Props {
   list?: Entity.Message[]
 }
-const props = defineProps<Props>()
+const { list } = defineProps<Props>()
 
 const emit = defineEmits<Emits>()
 interface Emits {
@@ -13,7 +13,7 @@ interface Emits {
 <template>
   <n-scrollbar style="height: 400px">
     <n-list hoverable clickable>
-      <n-list-item v-for="(item) in props.list" :key="item.id" @click="emit('read', item.id)">
+      <n-list-item v-for="(item) in list" :key="item.id" @click="emit('read', item.id)">
         <n-thing content-indented :class="{ 'opacity-30': item.isRead }">
           <template #header>
             <n-ellipsis :line-clamp="1">

src/layouts/components/common/SettingDrawer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import LayoutSelector from './LayoutSelector.vue'
 import { useAppStore } from '@/store'
+import LayoutSelector from './LayoutSelector.vue'
 
 const appStore = useAppStore()
 

src/layouts/components/header/FullScreen.vue

@@ -18,8 +18,8 @@ useMagicKeys({
   <n-tooltip placement="bottom" trigger="hover">
     <template #trigger>
       <CommonWrapper @click="appStore.toggleFullScreen">
-        <icon-park-outline-off-screen-two v-if="appStore.fullScreen" />
-        <icon-park-outline-full-screen-two v-else />
+        <icon-park-outline-off-screen v-if="appStore.fullScreen" />
+        <icon-park-outline-full-screen v-else />
       </CommonWrapper>
     </template>
     <span>{{ $t('app.toggleFullScreen') }}</span>

src/layouts/components/header/Search.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useRouteStore } from '@/store'
 import { useBoolean } from '@/hooks'
+import { useRouteStore } from '@/store'
 
 const routeStore = useRouteStore()
 

src/layouts/components/header/UserCenter.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { renderIcon } from '@/utils/icon'
 import { useAuthStore } from '@/store'
-import IconGithub from '~icons/icon-park-outline/github'
-import IconUser from '~icons/icon-park-outline/user'
-import IconLogout from '~icons/icon-park-outline/logout'
+import { renderIcon } from '@/utils/icon'
 import IconBookOpen from '~icons/icon-park-outline/book-open'
+import IconGithub from '~icons/icon-park-outline/github'
+import IconLogout from '~icons/icon-park-outline/logout'
+import IconUser from '~icons/icon-park-outline/user'
 
 const { t } = useI18n()
 
@@ -70,7 +70,7 @@ function handleSelect(key: string | number) {
     window.open('https://gitee.com/chansee97/nova-admin')
 
   if (key === 'docs')
-    window.open('https://nova-admin-docs.netlify.app/')
+    window.open('https://nova-admin-docs.pages.dev/')
 }
 </script>
 
@@ -82,7 +82,7 @@ function handleSelect(key: string | number) {
   >
     <n-avatar
       round
-
+      class="cursor-pointer"
       :src="userInfo?.avatar"
     >
       <template #fallback>

src/layouts/components/index.ts

@@ -1,30 +1,30 @@
-import Logo from './sider/Logo.vue'
-import Menu from './sider/Menu.vue'
+import BackTop from './common/BackTop.vue'
+import Setting from './common/Setting.vue'
+import SettingDrawer from './common/SettingDrawer.vue'
 
 import Breadcrumb from './header/Breadcrumb.vue'
 import CollapaseButton from './header/CollapaseButton.vue'
 import FullScreen from './header/FullScreen.vue'
 import Notices from './header/Notices.vue'
-import UserCenter from './header/UserCenter.vue'
 import Search from './header/Search.vue'
+import UserCenter from './header/UserCenter.vue'
+
+import Logo from './sider/Logo.vue'
+import Menu from './sider/Menu.vue'
 
 import TabBar from './tab/TabBar.vue'
 
-import BackTop from './common/BackTop.vue'
-import Setting from './common/Setting.vue'
-import SettingDrawer from './common/SettingDrawer.vue'
-
 export {
+  BackTop,
   Breadcrumb,
   CollapaseButton,
-  Menu,
-  Logo,
   FullScreen,
+  Logo,
+  Menu,
+  Notices,
+  Search,
   Setting,
   SettingDrawer,
-  Notices,
-  UserCenter,
-  Search,
   TabBar,
-  BackTop,
+  UserCenter,
 }

src/layouts/components/sider/Menu.vue

@@ -4,13 +4,13 @@ import { useAppStore, useRouteStore } from '@/store'
 
 const route = useRoute()
 const appStore = useAppStore()
-const routesStore = useRouteStore()
+const routeStore = useRouteStore()
 
 const menuInstRef = ref<MenuInst | null>(null)
 watch(
   () => route.path,
   () => {
-    menuInstRef.value?.showOption(routesStore.activeMenu as string)
+    menuInstRef.value?.showOption(routeStore.activeMenu as string)
   },
   { immediate: true },
 )
@@ -22,7 +22,7 @@ watch(
     :collapsed="appStore.collapsed"
     :indent="20"
     :collapsed-width="64"
-    :options="routesStore.menus"
-    :value="routesStore.activeMenu"
+    :options="routeStore.menus"
+    :value="routeStore.activeMenu"
   />
 </template>

src/layouts/components/tab/ContentFullScreen.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useAppStore } from '@/store'
+
+const appStore = useAppStore()
+</script>
+
+<template>
+  <n-tooltip placement="bottom" trigger="hover">
+    <template #trigger>
+      <CommonWrapper @click="appStore.contentFullScreen = !appStore.contentFullScreen">
+        <icon-park-outline-off-screen-one v-if="appStore.contentFullScreen" />
+        <icon-park-outline-full-screen-one v-else />
+      </CommonWrapper>
+    </template>
+    <span>{{ $t('app.togglContentFullScreen') }}</span>
+  </n-tooltip>
+</template>

src/layouts/components/tab/TabBar.vue

@@ -1,24 +1,24 @@
 <script setup lang="ts">
 import type { RouteLocationNormalized } from 'vue-router'
-import Reload from './Reload.vue'
-import DropTabs from './DropTabs.vue'
 import { useAppStore, useTabStore } from '@/store'
-import IconRedo from '~icons/icon-park-outline/redo'
+import { useDraggable } from 'vue-draggable-plus'
 import IconClose from '~icons/icon-park-outline/close'
 import IconDelete from '~icons/icon-park-outline/delete-four'
+import IconFullwith from '~icons/icon-park-outline/fullwidth'
+import IconRedo from '~icons/icon-park-outline/redo'
 import IconLeft from '~icons/icon-park-outline/to-left'
 import IconRight from '~icons/icon-park-outline/to-right'
-import IconFullwith from '~icons/icon-park-outline/fullwidth'
+import ContentFullScreen from './ContentFullScreen.vue'
+import DropTabs from './DropTabs.vue'
+import Reload from './Reload.vue'
+import TabBarItem from './TabBarItem.vue'
 
 const tabStore = useTabStore()
 const appStore = useAppStore()
 
 const router = useRouter()
 function handleTab(route: RouteLocationNormalized) {
-  router.push(route.path)
-}
-function handleClose(path: string) {
-  tabStore.closeTab(path)
+  router.push(route.fullPath)
 }
 const { t } = useI18n()
 const options = computed(() => {
@@ -70,16 +70,16 @@ function handleSelect(key: string) {
       appStore.reloadPage()
     },
     closeCurrent() {
-      tabStore.closeTab(currentRoute.value.path)
+      tabStore.closeTab(currentRoute.value.fullPath)
     },
     closeOther() {
-      tabStore.closeOtherTabs(currentRoute.value.path)
+      tabStore.closeOtherTabs(currentRoute.value.fullPath)
     },
     closeLeft() {
-      tabStore.closeLeftTabs(currentRoute.value.path)
+      tabStore.closeLeftTabs(currentRoute.value.fullPath)
     },
     closeRight() {
-      tabStore.closeRightTabs(currentRoute.value.path)
+      tabStore.closeRightTabs(currentRoute.value.fullPath)
     },
     closeAll() {
       tabStore.closeAllTabs()
@@ -100,53 +100,49 @@ function handleContextMenu(e: MouseEvent, route: RouteLocationNormalized) {
 function onClickoutside() {
   showDropdown.value = false
 }
+
+// const [DefineTabItem, ReuseTabItem] = createReusableTemplate<{ route: RouteLocationNormalized }>()
+
+const el = ref()
+
+useDraggable(el, tabStore.tabs, {
+  animation: 150,
+  ghostClass: 'ghost',
+})
 </script>
 
 <template>
-  <div class="wh-full flex items-end">
-    <n-tabs
-      type="card"
-      size="small"
-      :tabs-padding="10"
-      :value="tabStore.currentTabPath"
-      @close="handleClose"
-    >
-      <n-tab
-        v-for="item in tabStore.pinTabs"
-        :key="item.path"
-        :name="item.path"
-        @click="router.push(item.path)"
-      >
-        <div class="flex-x-center gap-2">
-          <nova-icon :icon="item.meta.icon" /> {{ $t(`route.${String(item.name)}`, item.meta.title) }}
-        </div>
-      </n-tab>
-      <n-tab
-        v-for="item in tabStore.tabs"
-        :key="item.path"
-        closable
-        :name="item.path"
+  <div class="p-l-2 flex w-full relative">
+    <div class="flex items-end">
+      <TabBarItem
+        v-for="item in tabStore.pinTabs" :key="item.fullPath" :value="tabStore.currentTabPath" :route="item"
+        @click="handleTab(item)"
+      />
+    </div>
+    <div ref="el" class="flex items-end flex-1">
+      <TabBarItem
+        v-for="item in tabStore.tabs" :key="item.fullPath" :value="tabStore.currentTabPath" :route="item" closable
+        @close="tabStore.closeTab"
         @click="handleTab(item)"
         @contextmenu="handleContextMenu($event, item)"
-      >
-        <div class="flex-x-center gap-2">
-          <nova-icon :icon="item.meta.icon" /> {{ $t(`route.${String(item.name)}`, item.meta.title) }}
-        </div>
-      </n-tab>
-      <template #suffix>
-        <Reload />
-        <DropTabs />
-      </template>
-    </n-tabs>
-    <n-dropdown
-      placement="bottom-start"
-      trigger="manual"
-      :x="x"
-      :y="y"
-      :options="options"
-      :show="showDropdown"
-      :on-clickoutside="onClickoutside"
-      @select="handleSelect"
-    />
+      />
+      <n-dropdown
+        placement="bottom-start" trigger="manual" :x="x" :y="y" :options="options" :show="showDropdown"
+        :on-clickoutside="onClickoutside" @select="handleSelect"
+      />
+    </div>
+    <!-- <span class="m-l-auto" /> -->
+    <n-el class="absolute right-0 flex items-center gap-1 bg-[var(--base-color)] h-full">
+      <Reload />
+      <ContentFullScreen />
+      <DropTabs />
+    </n-el>
   </div>
 </template>
+
+<style scoped>
+.ghost {
+  opacity: 0.5;
+  background: #c4f6d5;
+}
+</style>

src/layouts/components/tab/TabBarItem.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { RouteLocationNormalized } from 'vue-router'
+
+const { route, value, closable = false } = defineProps<{
+  route: RouteLocationNormalized
+  value: string
+  closable?: boolean
+}>()
+
+const emit = defineEmits<{
+  close: [string]
+}>()
+</script>
+
+<template>
+  <n-el
+    class="cursor-pointer p-x-4 p-y-2 m-x-2px b b-[--divider-color] b-b-[#0000] rounded-[--border-radius]"
+    :class="[
+      value === route.fullPath ? 'c-[--primary-color]' : 'c-[--text-color-2]',
+      value === route.fullPath ? 'bg-[#0000]' : 'bg-[--tab-color]',
+      closable && 'p-r-2',
+    ]"
+    style="transition: box-shadow .3s var(--n-bezier), color .3s var(--n-bezier), background-color .3s var(--n-bezier), border-color .3s var(--n-bezier);"
+  >
+    <div class="flex-center gap-2 text-nowrap">
+      <nova-icon :icon="route.meta.icon" />
+      <span>{{ $t(`route.${String(route.name)}`, route.meta.title) }}</span>
+      <button
+        v-if="closable"
+        type="button"
+        class="bg-transparent h-18px w-18px flex-center text-[var(--close-icon-color)] hover:bg-[var(--close-color-hover)] rounded-3px"
+        style="transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier);"
+        @click.stop="emit('close', route.fullPath)"
+      >
+        <n-icon size="14">
+          <svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="currentColor" fill-rule="nonzero"><path d="M2.08859116,2.2156945 L2.14644661,2.14644661 C2.32001296,1.97288026 2.58943736,1.95359511 2.7843055,2.08859116 L2.85355339,2.14644661 L6,5.293 L9.14644661,2.14644661 C9.34170876,1.95118446 9.65829124,1.95118446 9.85355339,2.14644661 C10.0488155,2.34170876 10.0488155,2.65829124 9.85355339,2.85355339 L6.707,6 L9.85355339,9.14644661 C10.0271197,9.32001296 10.0464049,9.58943736 9.91140884,9.7843055 L9.85355339,9.85355339 C9.67998704,10.0271197 9.41056264,10.0464049 9.2156945,9.91140884 L9.14644661,9.85355339 L6,6.707 L2.85355339,9.85355339 C2.65829124,10.0488155 2.34170876,10.0488155 2.14644661,9.85355339 C1.95118446,9.65829124 1.95118446,9.34170876 2.14644661,9.14644661 L5.293,6 L2.14644661,2.85355339 C1.97288026,2.67998704 1.95359511,2.41056264 2.08859116,2.2156945 L2.14644661,2.14644661 L2.08859116,2.2156945 Z" /></g></g></svg>
+        </n-icon>
+      </button>
+    </div>
+  </n-el>
+</template>

src/layouts/index.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import leftMenu from './leftMenu.layout.vue'
-import topMenu from './topMenu.layout.vue'
-import { SettingDrawer } from './components'
 import { useAppStore } from '@/store/app'
+import { SettingDrawer } from './components'
+import leftMenu from './leftMenu.layout.vue'
+import mixMenu from './mixMenu.layout.vue'
+import topMenu from './topMenu.layout.vue'
 
 const appStore = useAppStore()
 const layoutMap = {
   leftMenu,
   topMenu,
+  mixMenu,
 }
 </script>
 

src/layouts/leftMenu.layout.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useAppStore, useRouteStore } from '@/store'
 import {
   BackTop,
   Breadcrumb,
@@ -12,7 +13,6 @@ import {
   TabBar,
   UserCenter,
 } from './components'
-import { useAppStore, useRouteStore } from '@/store'
 
 const routeStore = useRouteStore()
 const appStore = useAppStore()
@@ -25,6 +25,7 @@ const appStore = useAppStore()
     embedded
   >
     <n-layout-sider
+      v-if="!appStore.contentFullScreen"
       bordered
       :collapsed="appStore.collapsed"
       collapse-mode="width"
@@ -43,8 +44,8 @@ const appStore = useAppStore()
       embedded
       :native-scrollbar="false"
     >
-      <n-layout-header bordered position="absolute" class="z-1">
-        <div class="h-60px flex-y-center justify-between">
+      <n-layout-header bordered position="absolute" class="z-999">
+        <div v-if="!appStore.contentFullScreen" class="h-60px flex-y-center justify-between">
           <div class="flex-y-center h-full">
             <CollapaseButton />
             <Breadcrumb />
@@ -61,9 +62,17 @@ const appStore = useAppStore()
         </div>
         <TabBar v-if="appStore.showTabs" class="h-45px" />
       </n-layout-header>
-      <div class="flex-1 p-16px flex flex-col">
-        <div class="h-60px" />
-        <div v-if="appStore.showTabs" class="h-45px" />
+      <!-- 121 = 16 + 45 + 60 45是面包屑高度 60是标签栏高度 -->
+      <!-- 56 = 16 + 40 40是页脚高度 -->
+      <div
+        class="flex-1 p-16px flex flex-col"
+        :class="{
+          'p-t-121px': appStore.showTabs,
+          'p-b-56px': appStore.showFooter && !appStore.contentFullScreen,
+          'p-t-76px': !appStore.showTabs,
+          'p-t-61px': appStore.contentFullScreen,
+        }"
+      >
         <router-view v-slot="{ Component, route }" class="flex-1">
           <transition
             :name="appStore.transitionAnimation"
@@ -78,10 +87,9 @@ const appStore = useAppStore()
             </keep-alive>
           </transition>
         </router-view>
-        <div v-if="appStore.showFooter" class="h-40px" />
       </div>
       <n-layout-footer
-        v-if="appStore.showFooter"
+        v-if="appStore.showFooter && !appStore.contentFullScreen"
         bordered
         position="absolute"
         class="h-40px flex-center"

src/layouts/mixMenu.layout.vue

@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import type { MenuInst, MenuOption } from 'naive-ui'
+import { useAppStore, useRouteStore } from '@/store'
+import {
+  BackTop,
+  CollapaseButton,
+  FullScreen,
+  Logo,
+  Notices,
+  Search,
+  Setting,
+  TabBar,
+  UserCenter,
+} from './components'
+
+const routeStore = useRouteStore()
+const appStore = useAppStore()
+const pageRoute = useRoute()
+const router = useRouter()
+
+const menuInstRef = ref<MenuInst | null>(null)
+
+watch(
+  () => pageRoute.path,
+  () => {
+    menuInstRef.value?.showOption(routeStore.activeMenu as string)
+  },
+  { immediate: true },
+)
+
+const topMenu = ref<MenuOption[]>([])
+const activeTopMenu = ref<string>('')
+function handleTopMenu(rowMenu: MenuOption[]) {
+  topMenu.value = rowMenu.map((i) => {
+    const { icon, label, key } = i
+    return {
+      icon,
+      label,
+      key,
+    }
+  })
+}
+
+onMounted(() => {
+  handleTopMenu(routeStore.menus)
+
+  // 根据当前页面获取选中菜单和对应侧边菜单
+  const currentMenuKey = pageRoute.matched[1].path
+  handleSideMenu(currentMenuKey)
+  activeTopMenu.value = currentMenuKey
+})
+
+const sideMenu = ref<MenuOption[]>([])
+function handleSideMenu(key: string) {
+  const routeMenu = routeStore.menus as MenuOption[]
+  const targetMenu = routeMenu.find(i => i.key === key)
+  if (targetMenu) {
+    sideMenu.value = targetMenu.children ? targetMenu.children : [targetMenu]
+  }
+}
+
+function updateTopMenu(key: string) {
+  handleSideMenu(key)
+  activeTopMenu.value = key
+  router.push(key)
+}
+</script>
+
+<template>
+  <n-layout
+    has-sider
+    class="wh-full"
+    embedded
+  >
+    <n-layout-sider
+      v-if="!appStore.contentFullScreen"
+      bordered
+      :collapsed="appStore.collapsed"
+      collapse-mode="width"
+      :collapsed-width="64"
+      :width="240"
+      content-style="display: flex;flex-direction: column;min-height:100%;"
+    >
+      <Logo v-if="appStore.showLogo" />
+      <n-scrollbar class="flex-1">
+        <n-menu
+          ref="menuInstRef"
+          :collapsed="appStore.collapsed"
+          :indent="20"
+          :collapsed-width="64"
+          :options="sideMenu"
+          :value="routeStore.activeMenu"
+        />
+      </n-scrollbar>
+    </n-layout-sider>
+    <n-layout
+      class="h-full flex flex-col"
+      content-style="display: flex;flex-direction: column;min-height:100%;"
+      embedded
+      :native-scrollbar="false"
+    >
+      <n-layout-header bordered position="absolute" class="z-999">
+        <div v-if="!appStore.contentFullScreen" class="h-60px flex-y-center justify-between">
+          <CollapaseButton />
+          <n-menu
+            ref="menuInstRef"
+            mode="horizontal"
+            responsive
+            :options="topMenu"
+            :value="activeTopMenu"
+            @update:value="updateTopMenu"
+          />
+          <div class="flex-y-center gap-1 h-full p-x-xl">
+            <Search />
+            <Notices />
+            <FullScreen />
+            <DarkModeSwitch />
+            <LangsSwitch />
+            <Setting />
+            <UserCenter />
+          </div>
+        </div>
+        <TabBar v-if="appStore.showTabs" class="h-45px" />
+      </n-layout-header>
+      <div
+        class="flex-1 p-16px flex flex-col"
+        :class="{
+          'p-t-121px': appStore.showTabs,
+          'p-b-56px': appStore.showFooter && !appStore.contentFullScreen,
+          'p-t-76px': !appStore.showTabs,
+          'p-t-61px': appStore.contentFullScreen,
+        }"
+      >
+        <router-view v-slot="{ Component, route }" class="flex-1">
+          <transition
+            :name="appStore.transitionAnimation"
+            mode="out-in"
+          >
+            <keep-alive :include="routeStore.cacheRoutes">
+              <component
+                :is="Component"
+                v-if="appStore.loadFlag"
+                :key="route.fullPath"
+              />
+            </keep-alive>
+          </transition>
+        </router-view>
+      </div>
+      <n-layout-footer
+        v-if="appStore.showFooter && !appStore.contentFullScreen"
+        bordered
+        position="absolute"
+        class="h-40px flex-center"
+      >
+        {{ appStore.footerText }}
+      </n-layout-footer>
+      <BackTop />
+    </n-layout>
+  </n-layout>
+</template>

src/layouts/topMenu.layout.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useAppStore, useRouteStore } from '@/store'
 import {
   BackTop,
   FullScreen,
@@ -10,7 +11,6 @@ import {
   TabBar,
   UserCenter,
 } from './components'
-import { useAppStore, useRouteStore } from '@/store'
 
 const routeStore = useRouteStore()
 const appStore = useAppStore()
@@ -22,8 +22,8 @@ const appStore = useAppStore()
       class="h-full flex flex-col" content-style="display: flex;flex-direction: column;min-height:100%;"
       embedded :native-scrollbar="false"
     >
-      <n-layout-header bordered position="absolute" class="z-1">
-        <div class="h-60px flex-y-center justify-between shrink-0">
+      <n-layout-header bordered position="absolute" class="z-999">
+        <div v-if="!appStore.contentFullScreen" class="h-60px flex-y-center justify-between shrink-0">
           <Logo v-if="appStore.showLogo" />
           <Menu mode="horizontal" responsive />
           <div class="flex-y-center gap-1 h-full p-x-xl">
@@ -38,9 +38,15 @@ const appStore = useAppStore()
         </div>
         <TabBar v-if="appStore.showTabs" class="h-45px" />
       </n-layout-header>
-      <div class="flex-1 p-16px flex flex-col">
-        <div class="h-60px" />
-        <div v-if="appStore.showTabs" class="h-45px" />
+      <div
+        class="flex-1 p-16px flex flex-col"
+        :class="{
+          'p-t-121px': appStore.showTabs,
+          'p-b-56px': appStore.showFooter && !appStore.contentFullScreen,
+          'p-t-76px': !appStore.showTabs,
+          'p-t-61px': appStore.contentFullScreen,
+        }"
+      >
         <router-view v-slot="{ Component, route }" class="flex-1">
           <transition :name="appStore.transitionAnimation" mode="out-in">
             <keep-alive :include="routeStore.cacheRoutes">
@@ -48,9 +54,11 @@ const appStore = useAppStore()
             </keep-alive>
           </transition>
         </router-view>
-        <div v-if="appStore.showFooter" class="h-40px" />
       </div>
-      <n-layout-footer v-if="appStore.showFooter" bordered position="absolute" class="h-40px flex-center">
+      <n-layout-footer
+        v-if="appStore.showFooter && !appStore.contentFullScreen"
+        bordered position="absolute" class="h-40px flex-center"
+      >
         {{ appStore.footerText }}
       </n-layout-footer>
       <BackTop />

src/main.ts

@@ -1,8 +1,8 @@
 import type { App } from 'vue'
-import AppVue from './App.vue'
-import AppLoading from './components/common/AppLoading.vue'
 import { installRouter } from '@/router'
 import { installPinia } from '@/store'
+import AppVue from './App.vue'
+import AppLoading from './components/common/AppLoading.vue'
 
 async function setupApp() {
   // 载入全局loading加载状态

src/modules/i18n.ts

@@ -1,17 +1,24 @@
-import { createI18n } from 'vue-i18n'
 import type { App } from 'vue'
+import { local } from '@/utils'
+import { createI18n } from 'vue-i18n'
 import enUS from '../../locales/en_US.json'
 import zhCN from '../../locales/zh_CN.json'
-import { local } from '@/utils'
+
+const { VITE_DEFAULT_LANG } = import.meta.env
 
 export const i18n = createI18n({
   legacy: false,
-  locale: local.get('lang') || 'enUS', // 默认显示语言
-  fallbackLocale: 'enUS',
+  locale: local.get('lang') || VITE_DEFAULT_LANG, // 默认显示语言
+  fallbackLocale: VITE_DEFAULT_LANG,
   messages: {
     zhCN,
     enUS,
   },
+  // 缺失国际化键警告
+  // missingWarn: false,
+
+  // 缺失回退内容警告
+  fallbackWarn: false,
 })
 
 export function install(app: App) {

src/router/guard.ts

@@ -61,7 +61,7 @@ export function setupRouterGuard(router: Router) {
     // 添加tabs
     tabStore.addTab(to)
     // 设置高亮标签;
-    tabStore.setCurrentTab(to.path as string)
+    tabStore.setCurrentTab(to.fullPath as string)
   })
 
   router.afterEach((to) => {

src/router/index.ts

@@ -1,7 +1,7 @@
 import type { App } from 'vue'
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
-import { routes } from './routes.inner'
 import { setupRouterGuard } from './guard'
+import { routes } from './routes.inner'
 
 const { VITE_ROUTE_MODE = 'hash', VITE_BASE_URL } = import.meta.env
 export const router = createRouter({

src/router/routes.static.ts

@@ -34,8 +34,8 @@ export const staticRoutes: AppRoute.RowRoute[] = [
     pid: 1,
   },
   {
-    name: 'test',
-    path: '/test',
+    name: 'multi',
+    path: '/multi',
     title: '多级菜单演示',
     requiresAuth: true,
     icon: 'icon-park-outline:list',
@@ -45,32 +45,32 @@ export const staticRoutes: AppRoute.RowRoute[] = [
     pid: null,
   },
   {
-    name: 'test2',
-    path: '/test/test2',
+    name: 'multi2',
+    path: '/multi/multi2',
     title: '多级菜单子页',
     requiresAuth: true,
     icon: 'icon-park-outline:list',
     menuType: 'page',
-    componentPath: '/test/test2/index.vue',
+    componentPath: '/demo/multi/multi2/index.vue',
     id: 6,
     pid: 4,
   },
   {
-    name: 'test2Detail',
-    path: '/test/test2/detail',
-    title: '多级菜单的详情页',
+    name: 'multi2Detail',
+    path: '/multi/multi2/detail',
+    title: '菜单详情页',
     requiresAuth: true,
     icon: 'icon-park-outline:list',
     hide: true,
-    activeMenu: '/test/test2',
+    activeMenu: '/multi/multi2',
     menuType: 'page',
-    componentPath: '/test/test2/detail/index.vue',
+    componentPath: '/demo/multi/multi2/detail/index.vue',
     id: 7,
     pid: 4,
   },
   {
-    name: 'test3',
-    path: '/test/test3',
+    name: 'multi3',
+    path: '/multi/multi3',
     title: '多级菜单',
     requiresAuth: true,
     icon: 'icon-park-outline:list',
@@ -80,12 +80,12 @@ export const staticRoutes: AppRoute.RowRoute[] = [
     pid: 4,
   },
   {
-    name: 'test4',
-    path: '/test/test3/test4',
+    name: 'multi4',
+    path: '/multi/multi3/multi4',
     title: '多级菜单3-1',
     requiresAuth: true,
     icon: 'icon-park-outline:list',
-    componentPath: '/test/test3/test4/index.vue',
+    componentPath: '/demo/multi/multi3/multi4/index.vue',
     id: 9,
     pid: 8,
   },
@@ -106,7 +106,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [
     title: '常用列表',
     requiresAuth: true,
     icon: 'icon-park-outline:list-view',
-    componentPath: '/list/commonList/index.vue',
+    componentPath: '/demo/list/commonList/index.vue',
     id: 11,
     pid: 10,
   },
@@ -116,7 +116,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [
     title: '卡片列表',
     requiresAuth: true,
     icon: 'icon-park-outline:view-grid-list',
-    componentPath: '/list/cardList/index.vue',
+    componentPath: '/demo/list/cardList/index.vue',
     id: 12,
     pid: 10,
   },
@@ -224,8 +224,8 @@ export const staticRoutes: AppRoute.RowRoute[] = [
     pid: 13,
   },
   {
-    name: 'docments',
-    path: '/docments',
+    name: 'documents',
+    path: '/documents',
     title: '外链文档',
     requiresAuth: true,
     icon: 'icon-park-outline:file-doc',
@@ -235,28 +235,28 @@ export const staticRoutes: AppRoute.RowRoute[] = [
     pid: null,
   },
   {
-    name: 'docmentsVue',
-    path: '/docments/vue',
+    name: 'documentsVue',
+    path: '/documents/vue',
     title: 'Vue',
     requiresAuth: true,
     icon: 'logos:vue',
-    componentPath: '/docments/vue/index.vue',
+    componentPath: '/demo/documents/vue/index.vue',
     id: 25,
     pid: 24,
   },
   {
-    name: 'docmentsVite',
-    path: '/docments/vite',
+    name: 'documentsVite',
+    path: '/documents/vite',
     title: 'Vite',
     requiresAuth: true,
     icon: 'logos:vitejs',
-    componentPath: '/docments/vite/index.vue',
+    componentPath: '/demo/documents/vite/index.vue',
     id: 26,
     pid: 24,
   },
   {
-    name: 'docmentsVueuse',
-    path: '/docments/vueuse',
+    name: 'documentsVueuse',
+    path: '/documents/vueuse',
     title: 'VueUse（外链）',
     requiresAuth: true,
     icon: 'logos:vueuse',
@@ -282,7 +282,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [
     title: '权限示例',
     requiresAuth: true,
     icon: 'icon-park-outline:right-user',
-    componentPath: '/permission/permission/index.vue',
+    componentPath: '/demo/permission/permission/index.vue',
     id: 29,
     pid: 28,
   },
@@ -295,7 +295,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [
       'super',
     ],
     icon: 'icon-park-outline:wrong-user',
-    componentPath: '/permission/justSuper/index.vue',
+    componentPath: '/demo/permission/justSuper/index.vue',
     id: 30,
     pid: 28,
   },
@@ -390,7 +390,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [
     title: '个人中心',
     requiresAuth: true,
     icon: 'carbon:user-avatar-filled-alt',
-    componentPath: '/userCenter/index.vue',
+    componentPath: '/demo/userCenter/index.vue',
     id: 39,
     pid: null,
   },
@@ -400,8 +400,49 @@ export const staticRoutes: AppRoute.RowRoute[] = [
     title: '关于',
     requiresAuth: true,
     icon: 'icon-park-outline:info',
-    componentPath: '/about/index.vue',
+    componentPath: '/demo/about/index.vue',
     id: 40,
     pid: null,
   },
+  {
+    name: 'cascader',
+    path: '/demo/cascader',
+    title: '省市区联动',
+    requiresAuth: true,
+    icon: 'icon-park-outline:add-subset',
+    componentPath: '/demo/cascader/index.vue',
+    id: 41,
+    pid: 13,
+  },
+  {
+    name: 'documentsNova',
+    path: '/documents/nova',
+    title: 'Nova docs',
+    requiresAuth: true,
+    icon: 'local:logo',
+    href: 'https://nova-admin-docs.netlify.app/',
+    componentPath: '2333333',
+    id: 42,
+    pid: 24,
+  },
+  {
+    name: 'dict',
+    path: '/demo/dict',
+    title: '字典示例',
+    requiresAuth: true,
+    icon: 'icon-park-outline:book-one',
+    componentPath: '/demo/dict/index.vue',
+    id: 43,
+    pid: 13,
+  },
+  {
+    name: 'draggableList',
+    path: '/list/draggableList',
+    title: '拖拽列表',
+    requiresAuth: true,
+    icon: 'icon-park-outline:menu-fold',
+    componentPath: '/demo/list/draggableList/index.vue',
+    id: 44,
+    pid: 10,
+  },
 ]

src/service/api/login.ts

@@ -5,8 +5,8 @@ interface Ilogin {
   password: string
 }
 
-export function fetchLogin(params: Ilogin) {
-  const methodInstance = request.Post<Service.ResponseResult<Api.Login.Info>>('/login', params)
+export function fetchLogin(data: Ilogin) {
+  const methodInstance = request.Post<Service.ResponseResult<Api.Login.Info>>('/login', data)
   methodInstance.meta = {
     authRole: null,
   }

src/service/api/system.ts

@@ -2,14 +2,25 @@ import { request } from '../http'
 
 // 获取所有路由信息
 export function fetchAllRoutes() {
-  return request.Get<Service.ResponseResult<AppRoute.RowRoute[]> >('/getUserRoutes')
+  return request.Get<Service.ResponseResult<AppRoute.RowRoute[]>>('/getUserRoutes')
 }
 
 // 获取所有用户信息
 export function fetchUserPage() {
-  return request.Get<Service.ResponseResult<Entity.User[]> >('/userPage')
+  return request.Get<Service.ResponseResult<Entity.User[]>>('/userPage')
 }
 // 获取所有角色列表
 export function fetchRoleList() {
-  return request.Get<Service.ResponseResult<Entity.Role[]> >('/role/list')
+  return request.Get<Service.ResponseResult<Entity.Role[]>>('/role/list')
+}
+
+/**
+ * 请求获取字典列表
+ *
+ * @param code - 字典编码，用于筛选特定的字典列表
+ * @returns 返回的字典列表数据
+ */
+export function fetchDictList(code?: string) {
+  const params = { code }
+  return request.Get<Service.ResponseResult<Entity.Dict[]>>('/dict/list', { params })
 }

src/service/api/test.ts

@@ -36,7 +36,7 @@ export function withoutToken() {
 /* 接口数据转换 */
 export function dictData() {
   return request.Get('/getDictData', {
-    transformData(rawData, _headers) {
+    transform(rawData, _headers) {
       const response = rawData as any
       return {
         ...response,
@@ -61,10 +61,7 @@ export function getBlob(url: string) {
 
 /* 带进度的下载文件 */
 export function downloadFile(url: string) {
-  const methodInstance = blankInstance.Get<Blob>(url, {
-    // 开启下载进度
-    enableDownload: true,
-  })
+  const methodInstance = blankInstance.Get<Blob>(url)
   methodInstance.meta = {
     // 标识为blob数据
     isBlob: true,

src/service/http/alova.ts

@@ -1,20 +1,20 @@
+import { local } from '@/utils'
 import { createAlova } from 'alova'
-import VueHook from 'alova/vue'
-import GlobalFetch from 'alova/GlobalFetch'
-import { createServerTokenAuthentication } from '@alova/scene-vue'
+import { createServerTokenAuthentication } from 'alova/client'
+import adapterFetch from 'alova/fetch'
+import VueHook, { type VueHookType } from 'alova/vue'
+import {
+  DEFAULT_ALOVA_OPTIONS,
+  DEFAULT_BACKEND_OPTIONS,
+} from './config'
 import {
   handleBusinessError,
   handleRefreshToken,
   handleResponseError,
   handleServiceResult,
 } from './handle'
-import {
-  DEFAULT_ALOVA_OPTIONS,
-  DEFAULT_BACKEND_OPTIONS,
-} from './config'
-import { local } from '@/utils'
 
-const { onAuthRequired, onResponseRefreshToken } = createServerTokenAuthentication({
+const { onAuthRequired, onResponseRefreshToken } = createServerTokenAuthentication<VueHookType>({
   // 服务端判定token过期
   refreshTokenOnSuccess: {
     // 当服务端返回401时，表示token过期
@@ -50,8 +50,8 @@ export function createAlovaInstance(
 
   return createAlova({
     statesHook: VueHook,
-    requestAdapter: GlobalFetch(),
-    localCache: null,
+    requestAdapter: adapterFetch(),
+    cacheFor: null,
     baseURL: _alovaConfig.baseURL,
     timeout: _alovaConfig.timeout,
 

src/service/http/handle.ts

@@ -1,10 +1,10 @@
+import { fetchUpdateToken } from '@/service'
+import { useAuthStore } from '@/store'
+import { local } from '@/utils'
 import {
   ERROR_NO_TIP_STATUS,
   ERROR_STATUS,
 } from './config'
-import { useAuthStore } from '@/store'
-import { fetchUpdateToken } from '@/service'
-import { local } from '@/utils'
 
 type ErrorStatus = keyof typeof ERROR_STATUS
 

src/service/http/index.ts

@@ -1,6 +1,6 @@
-import { createAlovaInstance } from './alova'
-import { serviceConfig } from '@/../service.config'
 import { generateProxyPattern } from '@/../build/proxy'
+import { serviceConfig } from '@/../service.config'
+import { createAlovaInstance } from './alova'
 
 const isHttpProxy = import.meta.env.DEV && import.meta.env.VITE_HTTP_PROXY === 'Y'
 

src/service/index.ts

@@ -1,4 +1,4 @@
-export * from './api/system'
-export * from './api/login'
 export * from './api/list'
+export * from './api/login'
+export * from './api/system'
 export * from './api/test'

src/store/app/index.ts

@@ -1,11 +1,13 @@
 import type { GlobalThemeOverrides } from 'naive-ui'
+import { local, setLocale } from '@/utils'
 import { colord } from 'colord'
 import { set } from 'radash'
 import themeConfig from './theme.json'
-import { local, setLocale } from '@/utils'
 
-type TransitionAnimation = '' | 'fade-slide' | 'fade-bottom' | 'fade-scale' | 'zoom-fade' | 'zoom-out'
-export type LayoutMode = 'leftMenu' | 'topMenu'
+export type TransitionAnimation = '' | 'fade-slide' | 'fade-bottom' | 'fade-scale' | 'zoom-fade' | 'zoom-out'
+export type LayoutMode = 'leftMenu' | 'topMenu' | 'mixMenu'
+
+const { VITE_DEFAULT_LANG, VITE_COPYRIGHT_INFO } = import.meta.env
 
 const docEle = ref(document.documentElement)
 
@@ -18,8 +20,8 @@ const { system, store } = useColorMode({
 export const useAppStore = defineStore('app-store', {
   state: () => {
     return {
-      footerText: import.meta.env.VITE_COPYRIGHT_INFO,
-      lang: 'enUS' as App.lang,
+      footerText: VITE_COPYRIGHT_INFO,
+      lang: VITE_DEFAULT_LANG,
       theme: themeConfig as GlobalThemeOverrides,
       primaryColor: themeConfig.common.primaryColor,
       collapsed: false,
@@ -36,6 +38,7 @@ export const useAppStore = defineStore('app-store', {
       showSetting: false,
       transitionAnimation: 'fade-slide' as TransitionAnimation,
       layoutMode: 'leftMenu' as LayoutMode,
+      contentFullScreen: false,
     }
   },
   getters: {
@@ -66,6 +69,7 @@ export const useAppStore = defineStore('app-store', {
       this.showWatermark = false
       this.transitionAnimation = 'fade-slide'
       this.layoutMode = 'leftMenu'
+      this.contentFullScreen = false
 
       // 重置所有配色
       this.setPrimaryColor(this.primaryColor)
@@ -124,11 +128,6 @@ export const useAppStore = defineStore('app-store', {
     },
   },
   persist: {
-    enabled: true,
-    strategies: [
-      {
-        storage: localStorage,
-      },
-    ],
+    storage: localStorage,
   },
 })

src/store/auth.ts

@@ -1,8 +1,8 @@
+import { router } from '@/router'
+import { fetchLogin } from '@/service'
+import { local } from '@/utils'
 import { useRouteStore } from './router'
 import { useTabStore } from './tab'
-import { fetchLogin } from '@/service'
-import { router } from '@/router'
-import { local } from '@/utils'
 
 interface AuthStatus {
   userInfo: Api.Login.Info | null
@@ -62,6 +62,7 @@ export const useAuthStore = defineStore('auth-store', {
         await this.handleLoginInfo(data)
       }
       catch (e) {
+        console.warn('[Login Error]:', e)
       }
     },
 

src/store/dict.ts

@@ -0,0 +1,58 @@
+import { fetchDictList } from '@/service'
+import { session } from '@/utils'
+
+export const useDictStore = defineStore('dict-store', {
+  state: () => {
+    return {
+      dictMap: {} as DictMap,
+      isInitDict: false,
+    }
+  },
+  actions: {
+    async dict(code: string) {
+      // 调用前初始化
+      if (!this.dictMap) {
+        this.initDict()
+      }
+
+      const targetDict = await this.getDict(code)
+
+      return {
+        data: () => targetDict,
+        enum: () => Object.fromEntries(targetDict.map(({ value, label }) => [value, label])),
+        valueMap: () => Object.fromEntries(targetDict.map(({ value, ...data }) => [value, data])),
+        labelMap: () => Object.fromEntries(targetDict.map(({ label, ...data }) => [label, data])),
+      }
+    },
+    async getDict(code: string) {
+      const isExist = Reflect.has(this.dictMap, code)
+
+      if (isExist) {
+        return this.dictMap[code]
+      }
+      else {
+        return await this.getDictByNet(code)
+      }
+    },
+
+    async getDictByNet(code: string) {
+      const { data, isSuccess } = await fetchDictList(code)
+      if (isSuccess) {
+        Reflect.set(this.dictMap, code, data)
+        // 同步至session
+        session.set('dict', this.dictMap)
+        return data
+      }
+      else {
+        throw new Error(`Failed to get ${code} dictionary from network, check ${code} field or network`)
+      }
+    },
+    initDict() {
+      const dict = session.get('dict')
+      if (dict) {
+        Object.assign(this.dictMap, dict)
+      }
+      this.isInitDict = true
+    },
+  },
+})

src/store/index.ts

@@ -1,14 +1,15 @@
 import type { App } from 'vue'
-import piniaPluginPersist from 'pinia-plugin-persist'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 export * from './app/index'
 export * from './auth'
+export * from './dict'
 export * from './router'
 export * from './tab'
 
 // 安装pinia全局状态库
 export function installPinia(app: App) {
   const pinia = createPinia()
-  pinia.use(piniaPluginPersist)
+  pinia.use(piniaPluginPersistedstate)
   app.use(pinia)
 }

src/store/router/helper.ts

@@ -1,10 +1,10 @@
-import { clone, min, omit, pick } from 'radash'
-import type { RouteRecordRaw } from 'vue-router'
 import type { MenuOption } from 'naive-ui'
-import { RouterLink } from 'vue-router'
-import Layout from '@/layouts/index.vue'
+import type { RouteRecordRaw } from 'vue-router'
 import { usePermission } from '@/hooks'
+import Layout from '@/layouts/index.vue'
 import { $t, arrayToTree, renderIcon } from '@/utils'
+import { clone, min, omit, pick } from 'radash'
+import { RouterLink } from 'vue-router'
 
 const metaFields: AppRoute.MetaKeys[]
   = ['title', 'icon', 'requiresAuth', 'roles', 'keepAlive', 'hide', 'order', 'href', 'activeMenu', 'withoutTab', 'pinTab', 'menuType']
@@ -104,8 +104,9 @@ export function createMenus(userRoutes: AppRoute.RowRoute[]) {
 // render the returned routing table as a sidebar
 function transformAuthRoutesToMenus(userRoutes: AppRoute.Route[]) {
   const { hasPermission } = usePermission()
-  // Filter out side menus without permission
-  return userRoutes.filter(i => hasPermission(i.meta.roles))
+  return userRoutes
+    // Filter out side menus without permission
+    .filter(i => hasPermission(i.meta.roles))
     //  Sort the menu according to the order size
     .sort((a, b) => {
       if (a.meta && a.meta.order && b.meta && b.meta.order)
@@ -116,7 +117,6 @@ function transformAuthRoutesToMenus(userRoutes: AppRoute.Route[]) {
         return 1
       else return 0
     })
-
     // Convert to side menu data structure
     .map((item) => {
       const target: MenuOption = {

src/store/router/index.ts

@@ -1,13 +1,14 @@
-import { createMenus, createRoutes, generateCacheRoutes } from './helper'
-import { $t, local } from '@/utils'
+import type { MenuOption } from 'naive-ui'
 import { router } from '@/router'
-import { fetchUserRoutes } from '@/service'
 import { staticRoutes } from '@/router/routes.static'
+import { fetchUserRoutes } from '@/service'
 import { useAuthStore } from '@/store/auth'
+import { $t, local } from '@/utils'
+import { createMenus, createRoutes, generateCacheRoutes } from './helper'
 
 interface RoutesStatus {
   isInitAuthRoute: boolean
-  menus: AppRoute.Route[]
+  menus: MenuOption[]
   rowRoutes: AppRoute.RowRoute[]
   activeMenu: string | null
   cacheRoutes: string[]
@@ -37,7 +38,7 @@ export const useRouteStore = defineStore('route-store', {
     },
 
     async initRouteInfo() {
-      if (import.meta.env.VITE_AUTH_ROUTE_MODE === 'dynamic') {
+      if (import.meta.env.VITE_ROUTE_LOAD_MODE === 'dynamic') {
         const userInfo = local.get('userInfo')
 
         if (!userInfo || !userInfo.id) {

src/store/tab.ts

@@ -24,7 +24,7 @@ export const useTabStore = defineStore('tab-store', {
         return
 
       // 如果标签名称已存在则不添加
-      if (this.hasExistTab(route.path as string))
+      if (this.hasExistTab(route.fullPath as string))
         return
 
       // 根据meta.pinTab传递到不同的分组中
@@ -33,42 +33,42 @@ export const useTabStore = defineStore('tab-store', {
       else
         this.tabs.push(route)
     },
-    async closeTab(path: string) {
+    async closeTab(fullPath: string) {
       const tabsLength = this.tabs.length
       // 如果动态标签大于一个,才会标签跳转
       if (this.tabs.length > 1) {
         // 获取关闭的标签索引
-        const index = this.getTabIndex(path)
+        const index = this.getTabIndex(fullPath)
         const isLast = index + 1 === tabsLength
         // 如果是关闭的当前页面，路由跳转到原先标签的后一个标签
-        if (this.currentTabPath === path && !isLast) {
+        if (this.currentTabPath === fullPath && !isLast) {
           // 跳转到后一个标签
-          router.push(this.tabs[index + 1].path)
+          router.push(this.tabs[index + 1].fullPath)
         }
-        else if (this.currentTabPath === path && isLast) {
+        else if (this.currentTabPath === fullPath && isLast) {
           // 已经是最后一个了，就跳转前一个
-          router.push(this.tabs[index - 1].path)
+          router.push(this.tabs[index - 1].fullPath)
         }
       }
       // 删除标签
       this.tabs = this.tabs.filter((item) => {
-        return item.path !== path
+        return item.fullPath !== fullPath
       })
       // 删除后如果清空了，就跳转到默认首页
       if (tabsLength - 1 === 0)
         router.push('/')
     },
 
-    closeOtherTabs(path: string) {
-      const index = this.getTabIndex(path)
+    closeOtherTabs(fullPath: string) {
+      const index = this.getTabIndex(fullPath)
       this.tabs = this.tabs.filter((item, i) => i === index)
     },
-    closeLeftTabs(path: string) {
-      const index = this.getTabIndex(path)
+    closeLeftTabs(fullPath: string) {
+      const index = this.getTabIndex(fullPath)
       this.tabs = this.tabs.filter((item, i) => i >= index)
     },
-    closeRightTabs(path: string) {
-      const index = this.getTabIndex(path)
+    closeRightTabs(fullPath: string) {
+      const index = this.getTabIndex(fullPath)
       this.tabs = this.tabs.filter((item, i) => i <= index)
     },
     clearAllTabs() {
@@ -80,28 +80,27 @@ export const useTabStore = defineStore('tab-store', {
       router.push('/')
     },
 
-    hasExistTab(path: string) {
+    hasExistTab(fullPath: string) {
       const _tabs = [...this.tabs, ...this.pinTabs]
       return _tabs.some((item) => {
-        return item.path === path
+        return item.fullPath === fullPath
       })
     },
     /* 设置当前激活的标签 */
-    setCurrentTab(path: string) {
-      this.currentTabPath = path
+    setCurrentTab(fullPath: string) {
+      this.currentTabPath = fullPath
     },
-    getTabIndex(path: string) {
+    getTabIndex(fullPath: string) {
       return this.tabs.findIndex((item) => {
-        return item.path === path
+        return item.fullPath === fullPath
       })
     },
+    modifyTab(fullPath: string, modifyFn: (route: RouteLocationNormalized) => void) {
+      const index = this.getTabIndex(fullPath)
+      modifyFn(this.tabs[index])
+    },
   },
   persist: {
-    enabled: true,
-    strategies: [
-      {
-        storage: sessionStorage,
-      },
-    ],
+    storage: sessionStorage,
   },
 })

src/styles/index.css

@@ -14,3 +14,7 @@ body,
 .gray-mode {
   filter: grayscale(100%);
 }
+
+.drag-handle {
+  cursor: move;
+}

src/styles/naive.css

@@ -6,3 +6,9 @@
 .v-x-scroll {
   height: 100%;
 }
+
+/* 解决二维码尺寸问题 */
+.n-qr-code{
+  height: unset !important;
+  width: unset !important;;
+}

src/typings/api/login.d.ts

@@ -7,7 +7,7 @@ namespace Api {
       /** 用户id */
       id: number
       /** 用户角色类型 */
-      role: Entity.RoleType
+      role: Entity.RoleType[]
       /** 访问toekn */
       accessToken: string
       /** 刷新toekn */

src/typings/entities/demoList.d.ts

@@ -1,15 +0,0 @@
-/// <reference path="../global.d.ts"/>
-
-/* 角色数据库表字段 */
-namespace Entity {
-  interface DemoList {
-    id: number
-    name: string
-    age: number
-    gender: '0' | '1' | null
-    email: string
-    address: string
-    role: Entity.RoleType
-    disabled: boolean
-  }
-}

src/typings/entities/dict.d.ts

@@ -0,0 +1,13 @@
+/// <reference path="../global.d.ts"/>
+
+/* 字典数据库表字段 */
+namespace Entity {
+
+  interface Dict {
+    id?: number
+    isRoot?: 0 | 1
+    code: string
+    label: string
+    value?: number
+  }
+}

src/typings/env.d.ts

@@ -21,17 +21,18 @@ interface ImportMetaEnv {
     | 'brotliCompress'
     | 'deflate'
     | 'deflateRaw'
-  /** hash路由模式 */
+  /** 路由模式 */
   readonly VITE_ROUTE_MODE?: 'hash' | 'web'
   /** 路由加载模式 */
-  readonly VITE_AUTH_ROUTE_MODE: 'static' | 'dynamic'
+  readonly VITE_ROUTE_LOAD_MODE: 'static' | 'dynamic'
   /** 首次加载页面 */
   readonly VITE_HOME_PATH: string
   /** 版权信息 */
   readonly VITE_COPYRIGHT_INFO: string
   /** 是否自动刷新token */
   readonly VITE_AUTO_REFRESH_TOKEN: 'Y' | 'N'
-
+  /** 默认语言 */
+  readonly VITE_DEFAULT_LANG: App.lang
   /** 后端服务的环境类型 */
   readonly MODE: ServiceEnvType
 }

src/typings/global.d.ts

@@ -30,7 +30,7 @@ declare namespace NaiveUI {
 
 declare namespace Storage {
   interface Session {
-    demoKey: string
+    dict: DictMap
   }
 
   interface Local {
@@ -50,3 +50,7 @@ declare namespace Storage {
 declare namespace App {
   type lang = 'zhCN' | 'enUS'
 }
+
+interface DictMap {
+  [key: string]: Entity.Dict[]
+}

src/utils/array.ts

@@ -1,20 +1,37 @@
+/**
+ * 将给定的数组转换为树形结构。
+ * @param arr - 原始数组，其中每个元素包含id和pid属性，pid表示父级id。
+ * @returns 返回转换后的树形结构数组。
+ */
 export function arrayToTree(arr: any[]) {
+  // 初始化结果数组
   const res: any = []
+  // 使用Map存储数组元素，以id为键，元素本身为值
   const map = new Map()
+
+  // 遍历数组，将每个元素以id为键存储到Map中
   arr.forEach((item) => {
     map.set(item.id, item)
   })
+
+  // 再次遍历数组，根据pid将元素组织成树形结构
   arr.forEach((item) => {
+    // 获取当前元素的父级元素
     const parent = item.pid && map.get(item.pid)
+    // 如果有父级元素
     if (parent) {
+      // 如果父级元素已有子元素，则将当前元素追加到子元素数组中
       if (parent?.children)
         parent.children.push(item)
+      // 如果父级元素没有子元素，则创建子元素数组，并将当前元素作为第一个元素
       else
         parent.children = [item]
     }
+    // 如果没有父级元素，则将当前元素直接添加到结果数组中
     else {
       res.push(item)
     }
   })
+  // 返回组织好的树形结构数组
   return res
 }

src/utils/i18n.ts

@@ -1,6 +1,6 @@
 import type { NDateLocale, NLocale } from 'naive-ui'
-import { dateZhCN, zhCN } from 'naive-ui'
 import { i18n } from '@/modules/i18n'
+import { dateZhCN, zhCN } from 'naive-ui'
 
 export function setLocale(locale: App.lang) {
   i18n.global.locale.value = locale

src/utils/index.ts

@@ -1,4 +1,4 @@
-export * from './icon'
 export * from './storage'
 export * from './array'
 export * from './i18n'
+export * from './icon'

src/utils/storage.ts

@@ -39,9 +39,8 @@ function createLocalStorage<T extends Storage.Local>() {
     window.localStorage.removeItem(`${STORAGE_PREFIX}${String(key)}`)
   }
 
-  function clear() {
-    window.localStorage.clear()
-  }
+  const clear = window.localStorage.clear
+
   return {
     set,
     get,
@@ -73,9 +72,7 @@ function createSessionStorage<T extends Storage.Session>() {
   function remove(key: keyof T) {
     window.sessionStorage.removeItem(`${STORAGE_PREFIX}${String(key)}`)
   }
-  function clear() {
-    window.sessionStorage.clear()
-  }
+  const clear = window.sessionStorage.clear
 
   return {
     set,

src/views/dashboard/monitor/components/chart.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { graphic } from 'echarts'
 import { type ECOption, useEcharts } from '@/hooks'
+import { graphic } from 'echarts'
 
 const lineOptions = ref<ECOption>({
   tooltip: {
@@ -114,8 +114,7 @@ const lineOptions = ref<ECOption>({
   }],
 }) as Ref<ECOption>
 
-const lineRef = ref<HTMLElement | null>(null)
-useEcharts(lineRef, lineOptions)
+useEcharts('lineRef', lineOptions)
 </script>
 
 <template>

src/views/dashboard/monitor/components/chart2.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { graphic } from 'echarts'
 import { type ECOption, useEcharts } from '@/hooks'
+import { graphic } from 'echarts'
 
 const chartData = [
   { name: '1', value: 300 },
@@ -91,8 +91,7 @@ const option = ref<ECOption>({
   }],
 }) as Ref<ECOption>
 
-const lineRef = ref<HTMLElement | null>(null)
-useEcharts(lineRef, option)
+useEcharts('lineRef', option)
 </script>
 
 <template>

src/views/dashboard/monitor/components/chart3.vue

@@ -50,8 +50,7 @@ const option = ref<ECOption>({
   },
   ],
 }) as Ref<ECOption>
-const lineRef = ref<HTMLElement | null>(null)
-useEcharts(lineRef, option)
+useEcharts('lineRef', option)
 </script>
 
 <template>

src/views/dashboard/workbench/components/chart.vue

@@ -99,8 +99,7 @@ const lineOptions = ref<ECOption>({
     },
   ],
 }) as Ref<ECOption>
-const lineRef = ref<HTMLElement | null>(null)
-useEcharts(lineRef, lineOptions)
+useEcharts('lineRef', lineOptions)
 </script>
 
 <template>

src/views/dashboard/workbench/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Chart from './components/chart.vue'
 import { useAuthStore } from '@/store'
+import Chart from './components/chart.vue'
 
 const { userInfo } = useAuthStore()
 </script>

src/views/demo/cascader/index.vue

@@ -33,19 +33,19 @@ function handleValidateClick() {
 
     <div>
       <n-h2>回调value</n-h2>
-      <pre class="bg-#eee">
+      <pre class="bg-#eee:30">
       {{ cbValue }}
     </pre>
     </div>
     <div>
       <n-h2>回调option</n-h2>
-      <pre class="bg-#eee">
+      <pre class="bg-#eee:30">
       {{ cbOption }}
     </pre>
     </div>
     <div>
       <n-h2>回调pathValues</n-h2>
-      <pre class="bg-#eee">
+      <pre class="bg-#eee:30">
       {{ cbPathValues }}
     </pre>
     </div>

src/views/demo/dict/index.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { fetchDictList } from '@/service'
+import { useDictStore } from '@/store'
+
+const { dict } = useDictStore()
+
+const dictKey = ref('')
+const options = ref()
+const subOptions = ref()
+const currentDict = ref()
+
+async function getAlldict() {
+  const { data, isSuccess } = await fetchDictList()
+  if (isSuccess) {
+    options.value = data.map((item) => {
+      return {
+        label: item.label,
+        value: item.code,
+      }
+    })
+  }
+}
+function changeSelect(v: string) {
+  dict(v).then((data) => {
+    currentDict.value = data
+    subOptions.value = data.data()
+  })
+}
+
+onMounted(() => {
+  getAlldict()
+})
+
+const data = ref()
+async function getDict() {
+  data.value = currentDict.value.data()
+}
+
+async function getEnum() {
+  data.value = currentDict.value.enum()
+}
+
+async function getValueMap() {
+  data.value = currentDict.value.valueMap()
+}
+
+async function getLabelMap() {
+  data.value = currentDict.value.labelMap()
+}
+
+const dictValue = ref()
+
+const dictLabel = computed(() => {
+  if (data.value && data.value[dictValue.value]) {
+    return data.value[dictValue.value].label
+  }
+  return '--'
+})
+
+const enumValue = ref()
+
+const enumLabel = computed(() => {
+  if (data.value && data.value[enumValue.value]) {
+    return data.value[enumValue.value]
+  }
+  return '--'
+})
+</script>
+
+<template>
+  <n-card title="字典示例">
+    <n-flex vertical>
+      <n-flex>
+        <n-select v-model:value="dictKey" class="w-1/3" :options="options" @update:value="changeSelect" />
+        子字典下拉框
+        <n-select class="w-1/3" :options="subOptions" />
+      </n-flex>
+      <n-flex>
+        <n-button @click="getDict">
+          获取当前字典数据
+        </n-button>
+        <n-button @click="getEnum">
+          获取当前字典枚举
+        </n-button>
+        <n-button @click="getValueMap">
+          获取当前字典ValueMap
+        </n-button>
+        <n-button @click="getLabelMap">
+          获取当前字典LabelMap
+        </n-button>
+      </n-flex>
+
+      <pre class="bg-#eee:30">
+          {{ data }}
+        </pre>
+
+      <n-flex align="center">
+        <n-input-number v-model:value="dictValue" :min="0" />
+        <n-text type="info">
+          Map回显结果 {{ dictLabel }}
+        </n-text>
+      </n-flex>
+      <n-flex align="center">
+        <n-input-number v-model:value="enumValue" :min="0" />
+        <n-text type="info">
+          Enum回显结果 {{ enumLabel }}
+        </n-text>
+      </n-flex>
+    </n-flex>
+  </n-card>
+</template>
+
+<style scoped></style>

src/views/demo/echarts/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { graphic } from 'echarts'
 import { type ECOption, useEcharts } from '@/hooks'
+import { graphic } from 'echarts'
 
 // 饼状图
 const pieOptions = ref<ECOption>({
@@ -53,9 +53,28 @@ const pieOptions = ref<ECOption>({
       ],
     },
   ],
-}) as Ref<ECOption>
-const pieRef = ref<HTMLElement | null>(null)
-useEcharts(pieRef, pieOptions)
+})
+const { update } = useEcharts('pieRef', pieOptions)
+
+const randomValue = () => Math.round(Math.random() * 100)
+function updatePieChart() {
+  pieOptions.value.series = [
+    {
+      data: [
+        { value: randomValue(), name: 'rose1' },
+        { value: randomValue(), name: 'rose2' },
+        { value: randomValue(), name: 'rose3' },
+        { value: randomValue(), name: 'rose4' },
+        { value: randomValue(), name: 'rose5' },
+        { value: randomValue(), name: 'rose6' },
+        { value: randomValue(), name: 'rose7' },
+        { value: randomValue(), name: 'rose8' },
+      ],
+    },
+  ]
+
+  update(pieOptions.value)
+}
 
 // 折线图
 const lineOptions = ref<ECOption>({
@@ -245,9 +264,8 @@ const lineOptions = ref<ECOption>({
       data: [820, 932, 901, 934, 1290, 1330, 1320],
     },
   ],
-}) as Ref<ECOption>
-const lineRef = ref<HTMLElement | null>(null)
-useEcharts(lineRef, lineOptions)
+})
+useEcharts('lineRef', lineOptions)
 
 // 柱状图
 const barOptions = ref<ECOption>({
@@ -386,9 +404,8 @@ const barOptions = ref<ECOption>({
       data: [200, 382, 102, 267, 186, 315, 316],
     },
   ],
-}) as Ref<ECOption>
-const barRef = ref<HTMLElement | null>(null)
-useEcharts(barRef, barOptions)
+})
+useEcharts('barRef', barOptions)
 
 // 雷达图
 const radarOptions = ref<ECOption>({
@@ -480,9 +497,8 @@ const radarOptions = ref<ECOption>({
       ],
     },
   ],
-}) as Ref<ECOption>
-const radarRef = ref<HTMLElement | null>(null)
-useEcharts(radarRef, radarOptions)
+})
+useEcharts('radarRef', radarOptions)
 </script>
 
 <template>
@@ -491,6 +507,9 @@ useEcharts(radarRef, radarOptions)
     :size="16"
   >
     <n-card>
+      <n-button @click="updatePieChart">
+        手动更新图表
+      </n-button>
       <div
         ref="pieRef"
         class="h-400px"

src/views/demo/fetch/components/DownLoadWithProgress.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useRequest } from 'alova'
 import {
   downloadFile,
 } from '@/service'
+import { useRequest } from 'alova/client'
 
 const emit = defineEmits<{
   update: [data: any]

src/views/demo/fetch/components/TokenExpiration.vue

@@ -15,6 +15,7 @@ async function expiredToken() {
 
 <template>
   <n-card title="Token Expiration" size="small">
+    注意观察第二次的请求，token已刷新
     <n-button type="error" @click="expiredToken">
       click
     </n-button>

src/views/demo/fetch/components/UseRequest.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { useRequest } from 'alova'
 import {
   fetchGet,
 } from '@/service'
 
+import { useRequest } from 'alova/client'
+
 const emit = defineEmits<{
   update: [data: any] // 具名元组语法
 }>()

src/views/demo/fetch/index.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import Env from './components/Env.vue'
-import Get from './components/Get.vue'
-import Post from './components/Post.vue'
-import FormPost from './components/FormPost.vue'
 import Delete from './components/Delete.vue'
-import Put from './components/Put.vue'
-import UseRequest from './components/UseRequest.vue'
-import NoToken from './components/NoToken.vue'
 import DownLoad from './components/DownLoad.vue'
 import DownLoadWithProgress from './components/DownLoadWithProgress.vue'
+import Env from './components/Env.vue'
 import FailedRequest from './components/FailedRequest.vue'
 import FailedResponse from './components/FailedResponse.vue'
 import FailedResponseWithoutTip from './components/FailedResponseWithoutTip.vue'
-import Transform from './components/Transform.vue'
+import FormPost from './components/FormPost.vue'
+import Get from './components/Get.vue'
+import NoToken from './components/NoToken.vue'
+import Post from './components/Post.vue'
+import Put from './components/Put.vue'
 import RefreshToken from './components/RefreshToken.vue'
 import TokenExpiration from './components/TokenExpiration.vue'
+import Transform from './components/Transform.vue'
+import UseRequest from './components/UseRequest.vue'
 
 const msg = ref()
 function handleUpdate(data: any) {
@@ -46,7 +46,7 @@ function handleUpdate(data: any) {
         </div>
       </template>
       <template #2>
-        <pre class="bg-#eee">
+        <pre class="bg-#eee:30">
       {{ msg }}
       </pre>
       </template>

src/views/demo/icons/index.vue

@@ -24,6 +24,9 @@
       <div>
         大大大：<svg-icons-cool class="text-4em" />
       </div>
+      <div>
+        nova-icon组件加载：<nova-icon icon="local:cool" />
+      </div>
     </n-card>
   </n-space>
 </template>

src/views/demo/list/commonList/components/TableModal.vue

@@ -1,33 +1,31 @@
 <script setup lang="ts">
-type FormModel = Pick<Entity.DemoList, 'name' | 'age' | 'gender' | 'address' | 'email' | 'role' | 'disabled'>
-const props = withDefaults(defineProps<Props>(), {
-  type: 'add',
-  modalData: null,
-})
-const emit = defineEmits<Emits>()
-const defaultFormModal: FormModel = {
-  name: '',
-  age: 0,
-  gender: null,
-  email: '',
-  address: '',
-  role: 'user',
-  disabled: true,
-}
-const formModel = ref({ ...defaultFormModal })
-
 interface Props {
   visible: boolean
   type?: ModalType
   modalData?: any
 }
+const {
+  visible,
+  type = 'add',
+  modalData = null,
+} = defineProps<Props>()
+
+const emit = defineEmits<Emits>()
+const defaultFormModal: Entity.User = {
+  userName: '',
+  gender: 0,
+  email: '',
+  role: [],
+}
+const formModel = ref({ ...defaultFormModal })
+
 interface Emits {
   (e: 'update:visible', visible: boolean): void
 }
 
 const modalVisible = computed({
   get() {
-    return props.visible
+    return visible
   },
   set(visible) {
     closeModal(visible)
@@ -42,7 +40,7 @@ const title = computed(() => {
     add: '添加用户',
     edit: '编辑用户',
   }
-  return titles[props.type]
+  return titles[type]
 })
 
 function UpdateFormModelByModalType() {
@@ -51,14 +49,14 @@ function UpdateFormModelByModalType() {
       formModel.value = { ...defaultFormModal }
     },
     edit: () => {
-      if (props.modalData)
-        formModel.value = { ...props.modalData }
+      if (modalData)
+        formModel.value = { ...modalData }
     },
   }
-  handlers[props.type]()
+  handlers[type]()
 }
 watch(
-  () => props.visible,
+  () => visible,
   (newValue) => {
     if (newValue)
       UpdateFormModelByModalType()
@@ -81,26 +79,26 @@ watch(
     <n-form label-placement="left" :model="formModel" label-align="left" :label-width="80">
       <n-grid :cols="24" :x-gap="18">
         <n-form-item-grid-item :span="12" label="用户名" path="name">
-          <n-input v-model:value="formModel.name" />
+          <n-input v-model:value="formModel.userName" />
         </n-form-item-grid-item>
         <n-form-item-grid-item :span="12" label="年龄" path="age">
-          <n-input-number v-model:value="formModel.age" />
+          <n-input-number v-model:value="formModel.gender" />
         </n-form-item-grid-item>
         <n-form-item-grid-item :span="12" label="性别" path="gender">
-          <n-input v-model:value="formModel.gender" />
+          <n-radio-group v-model:value="formModel.gender">
+            <n-space>
+              <n-radio :value="1">
+                男
+              </n-radio>
+              <n-radio :value="0">
+                女
+              </n-radio>
+            </n-space>
+          </n-radio-group>
         </n-form-item-grid-item>
         <n-form-item-grid-item :span="12" label="邮箱" path="email">
           <n-input v-model:value="formModel.email" />
         </n-form-item-grid-item>
-        <n-form-item-grid-item :span="12" label="地址" path="address">
-          <n-input v-model:value="formModel.address" />
-        </n-form-item-grid-item>
-        <n-form-item-grid-item :span="12" label="角色" path="role">
-          <n-input v-model:value="formModel.role" />
-        </n-form-item-grid-item>
-        <n-form-item-grid-item :span="12" label="状态" path="disabled">
-          <n-switch v-model:value="formModel.disabled" />
-        </n-form-item-grid-item>
       </n-grid>
     </n-form>
     <template #action>

src/views/demo/list/commonList/index.vue

@@ -1,10 +1,10 @@
 <script setup lang="tsx">
 import type { DataTableColumns, FormInst } from 'naive-ui'
+import { Gender } from '@/constants'
+import { useBoolean } from '@/hooks'
+import { fetchUserPage } from '@/service'
 import { NButton, NPopconfirm, NSpace, NSwitch, NTag } from 'naive-ui'
 import TableModal from './components/TableModal.vue'
-import { fetchUserList } from '@/service'
-import { useBoolean } from '@/hooks'
-import { Gender } from '@/constants'
 
 const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean(false)
 const { bool: visible, setTrue: openModal } = useBoolean(false)
@@ -18,14 +18,14 @@ const initialModel = {
 const model = ref({ ...initialModel })
 
 const formRef = ref<FormInst | null>()
-function sendMail(id: number) {
+function sendMail(id?: number) {
   window.$message.success(`删除用户id:${id}`)
 }
-const columns: DataTableColumns<Entity.DemoList> = [
+const columns: DataTableColumns<Entity.User> = [
   {
     title: '姓名',
     align: 'center',
-    key: 'name',
+    key: 'userName',
   },
   {
     title: '年龄',
@@ -55,34 +55,18 @@ const columns: DataTableColumns<Entity.DemoList> = [
     align: 'center',
     key: 'email',
   },
-  {
-    title: '地址',
-    align: 'center',
-    key: 'address',
-  },
-  {
-    title: '角色',
-    align: 'center',
-    key: 'role',
-    render: (row) => {
-      const tagType: Record<Entity.RoleType, NaiveUI.ThemeColor> = {
-        super: 'primary',
-        admin: 'warning',
-        user: 'success',
-      }
-      return <NTag type={tagType[row.role]}>{row.role}</NTag>
-    },
-  },
   {
     title: '状态',
     align: 'center',
-    key: 'disabled',
+    key: 'status',
     render: (row) => {
       return (
         <NSwitch
-          value={row.disabled}
-          onUpdateValue={disabled =>
-            handleUpdateDisabled(disabled, row.id)}
+          value={row.status}
+          checked-value={1}
+          unchecked-value={0}
+          onUpdateValue={(value: 0 | 1) =>
+            handleUpdateDisabled(value, row.id!)}
         >
           {{ checked: () => '启用', unchecked: () => '禁用' }}
         </NSwitch>
@@ -114,11 +98,11 @@ const columns: DataTableColumns<Entity.DemoList> = [
   },
 ]
 
-const listData = ref<Entity.DemoList[]>([])
-function handleUpdateDisabled(disabled: boolean, id: number) {
+const listData = ref<Entity.User[]>([])
+function handleUpdateDisabled(value: 0 | 1, id: number) {
   const index = listData.value.findIndex(item => item.id === id)
   if (index > -1)
-    listData.value[index].disabled = disabled
+    listData.value[index].status = value
 }
 
 onMounted(() => {
@@ -126,7 +110,7 @@ onMounted(() => {
 })
 async function getUserList() {
   startLoading()
-  await fetchUserList().then((res: any) => {
+  await fetchUserPage().then((res: any) => {
     listData.value = res.data.list
     endLoading()
   })
@@ -144,12 +128,12 @@ function setModalType(type: ModalType) {
   modalType.value = type
 }
 
-const editData = ref<Entity.DemoList | null>(null)
-function setEditData(data: Entity.DemoList | null) {
+const editData = ref<Entity.User | null>(null)
+function setEditData(data: Entity.User | null) {
   editData.value = data
 }
 
-function handleEditTable(row: Entity.DemoList) {
+function handleEditTable(row: Entity.User) {
   setEditData(row)
   setModalType('edit')
   openModal()

src/views/demo/list/draggableList/index.vue

@@ -0,0 +1,170 @@
+<script setup lang="tsx">
+import type { DataTableColumns, FormInst, NDataTable } from 'naive-ui'
+import { Gender } from '@/constants'
+import { useBoolean } from '@/hooks'
+import { useTableDrag } from '@/hooks/useTableDrag'
+import { fetchUserPage } from '@/service'
+import { NButton, NPopconfirm, NSpace, NSwitch, NTag } from 'naive-ui'
+
+const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean(false)
+
+const initialModel = {
+  condition_1: '',
+  condition_2: '',
+  condition_3: '',
+  condition_4: '',
+}
+const model = ref({ ...initialModel })
+
+const formRef = ref<FormInst | null>()
+function sendMail(id?: number) {
+  window.$message.success(`删除用户id:${id}`)
+}
+const columns: DataTableColumns<Entity.User> = [
+  {
+    title: '姓名',
+    align: 'center',
+    key: 'userName',
+  },
+  {
+    title: '年龄',
+    align: 'center',
+    key: 'age',
+  },
+  {
+    title: '性别',
+    align: 'center',
+    key: 'gender',
+    render: (row) => {
+      const tagType = {
+        0: 'primary',
+        1: 'success',
+      } as const
+      if (row.gender) {
+        return (
+          <NTag type={tagType[row.gender]}>
+            {Gender[row.gender]}
+          </NTag>
+        )
+      }
+    },
+  },
+  {
+    title: '邮箱',
+    align: 'center',
+    key: 'email',
+  },
+  {
+    title: '状态',
+    align: 'center',
+    key: 'status',
+    render: (row) => {
+      return (
+        <NSwitch
+          value={row.status}
+          checked-value={1}
+          unchecked-value={0}
+          onUpdateValue={(value: 0 | 1) =>
+            handleUpdateDisabled(value, row.id!)}
+        >
+          {{ checked: () => '启用', unchecked: () => '禁用' }}
+        </NSwitch>
+      )
+    },
+  },
+  {
+    title: '操作',
+    align: 'center',
+    key: 'actions',
+    render: (row) => {
+      return (
+        <NSpace justify="center">
+          <NPopconfirm onPositiveClick={() => sendMail(row.id)}>
+            {{
+              default: () => '确认删除',
+              trigger: () => <NButton size="small">删除</NButton>,
+            }}
+          </NPopconfirm>
+        </NSpace>
+      )
+    },
+  },
+]
+
+const listData = ref<Entity.User[]>([])
+function handleUpdateDisabled(value: 0 | 1, id: number) {
+  const index = listData.value.findIndex(item => item.id === id)
+  if (index > -1)
+    listData.value[index].status = value
+}
+
+const tableRef = ref<InstanceType<typeof NDataTable>>()
+useTableDrag({
+  tableRef,
+  data: listData,
+  onRowDrag(data) {
+    const target = data[data.length - 1]
+    window.$message.success(`拖拽数据 id: ${target.id} name: ${target.userName}`)
+  },
+})
+
+onMounted(() => {
+  getUserList()
+})
+async function getUserList() {
+  startLoading()
+  await fetchUserPage().then((res: any) => {
+    listData.value = res.data.list
+    endLoading()
+  })
+}
+function changePage(page: number, size: number) {
+  window.$message.success(`分页器:${page},${size}`)
+}
+function handleResetSearch() {
+  model.value = { ...initialModel }
+}
+</script>
+
+<template>
+  <NSpace vertical size="large">
+    <n-card>
+      <n-form ref="formRef" :model="model" label-placement="left" inline :show-feedback="false">
+        <n-flex>
+          <n-form-item label="姓名" path="condition_1">
+            <n-input v-model:value="model.condition_1" placeholder="请输入" />
+          </n-form-item>
+          <n-form-item label="年龄" path="condition_2">
+            <n-input v-model:value="model.condition_2" placeholder="请输入" />
+          </n-form-item>
+          <n-form-item label="性别" path="condition_3">
+            <n-input v-model:value="model.condition_3" placeholder="请输入" />
+          </n-form-item>
+          <n-form-item label="地址" path="condition_4">
+            <n-input v-model:value="model.condition_4" placeholder="请输入" />
+          </n-form-item>
+          <n-flex class="ml-auto">
+            <NButton type="primary" @click="getUserList">
+              <template #icon>
+                <icon-park-outline-search />
+              </template>
+              搜索
+            </NButton>
+            <NButton strong secondary @click="handleResetSearch">
+              <template #icon>
+                <icon-park-outline-redo />
+              </template>
+              重置
+            </NButton>
+          </n-flex>
+        </n-flex>
+      </n-form>
+    </n-card>
+    <n-card>
+      <NSpace vertical size="large">
+        <n-data-table ref="tableRef" row-class-name="drag-handle" :columns="columns" :data="listData" :loading="loading" />
+        <Pagination :count="100" @change="changePage" />
+      </NSpace>
+    </n-card>
+  </NSpace>
+</template>

src/views/demo/map/index.vue

@@ -6,20 +6,20 @@ import AMap from './components/AMap.vue'
 import BMap from './components/BMap.vue'
 
 defineOptions({
-  name: 'PluginMap',
+  name: 'map',
 })
 
 const maps = [
-  {
-    id: 'AMap',
-    label: '高德地图',
-    component: AMap,
-  },
   {
     id: 'BMap',
     label: '百度地图',
     component: BMap,
   },
+  {
+    id: 'AMap',
+    label: '高德地图',
+    component: AMap,
+  },
 ]
 </script>
 

src/views/demo/multi/multi2/detail/index.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useTabStore } from '@/store'
+
+const { modifyTab } = useTabStore()
+
+const { fullPath, query } = useRoute()
+
+modifyTab(fullPath, (target) => {
+  target.meta.title = `详情页${query.id}`
+})
+</script>
+
+<template>
+  <n-space vertical>
+    <n-alert title="目前可公开的情报" type="warning">
+      这是详情子页，他不会出现在侧边栏,他其实是上个页面的同级，并不是下级，这个要注意
+    </n-alert>
+
+    <n-h2>
+      详情页id:{{ query.id }}
+    </n-h2>
+  </n-space>
+</template>
+
+<style scoped></style>