2025-04-06 03:57:54 +08:00
111 changed files with 6412 additions and 1167 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -1,8 +0,0 @@
-/node_modules
-/.git
-/.gitignore
-/.vscode
-/.DS_Store
-/*.md
-/dist
-
--- a/.env
+++ b/.env
@ -1,26 +1,20 @@
 # 项目根目录
-VITE_BASE_URL = /
-
+VITE_BASE_URL=/
 # 项目名称
-VITE_APP_NAME = Nova - Admin
-
-# 路由模式 web ｜ hash
+VITE_APP_NAME=Nova - Admin
+# 路由模式
 VITE_ROUTE_MODE = web
-
-# 路由加载模式 static ｜ dynamic
-VITE_ROUTE_LOAD_MODE = static
+# 权限路由模式: static ｜ dynamic
+VITE_AUTH_ROUTE_MODE=dynamic

 # 设置登陆后跳转地址
 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
-
-# 默认多语言 enUS | zhCN
-VITE_DEFAULT_LANG = enUS
+VITE_AUTO_REFRESH_TOKEN=Y
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@ -0,0 +1 @@
+custom: ['https://cdn.jsdelivr.net/gh/chansee97/static/sponsor-wechat.png', 'https://cdn.jsdelivr.net/gh/chansee97/static/sponsor-alipay.png']
--- a/.github/ISSUE_TEMPLATE/bug-report.yml
+++ b/.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.pages.dev/).
+        - label: Read the [docs](https://nova-admin-docs.netlify.app/).
          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
--- a/.github/ISSUE_TEMPLATE/feature-request.yml
+++ b/.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.pages.dev/).
+        - label: Read the [docs](https://nova-admin-docs.netlify.app/).
          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
--- a/.github/ISSUE_TEMPLATE/others.yml
+++ b/.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.pages.dev/).
+        - label: Read the [docs](https://nova-admin-docs.netlify.app/).
          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
--- a/.gitignore
+++ b/.gitignore
@ -27,6 +27,3 @@ stats.html

 components.d.ts
 auto-imports.d.ts
-
-# Lock files
-*-lock.yaml
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -51,16 +51,5 @@
  "i18n-ally.localesPaths": [
    "locales"
  ],
-  // 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"
-  }
+  "commentTranslate.source": "Google"
 }
--- a/README.md
+++ b/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.pages.dev/)
- [Nova-Admin docs](https://nova-admin-docs.pages.dev/)
+- [Nova-Admin preview](https://nova-admin-site.netlify.app/)
+- [Nova-Admin docs](https://nova-admin-docs.netlify.app/)

 ## 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://nova-admin.apifox.cn)
+[online aipfox docs](https://apifox.com/apidoc/shared-2b1abeb5-6e78-425e-a4ff-d7277ae83bf0)

 ## Install and use

@ -71,13 +71,6 @@ 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
@ -86,11 +79,11 @@ docker compose -f docker-compose.product.yml up --build -d

 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 |
-| :--: |:--: |
-| <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>|
+| 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>|

-> Please indicate the purpose of adding WeChat.
+> The WeChat group QR code is invalid, please add me as a friend.

 ## Contribution

--- a/README.zh-CN.md
+++ b/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.pages.dev/)
- [Nova-Admin 文档](https://nova-admin-docs.pages.dev/)
+- [Nova-Admin 预览](https://nova-admin-site.netlify.app/)
+- [Nova-Admin 文档](https://nova-admin-docs.netlify.app/)

 ## 特性

@ -51,7 +51,7 @@
 ## 接口文档

 本项目使用ApiFox进行接口mock，查看在线文档以了解更多接口详情
-[在线apifox文档](https://nova-admin.apifox.cn)
+[在线apifox文档](https://apifox.com/apidoc/shared-2b1abeb5-6e78-425e-a4ff-d7277ae83bf0)

 ## 安装使用

@ -71,13 +71,6 @@ 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配套后台项目
@ -86,11 +79,11 @@ docker compose -f docker-compose.product.yml up --build -d

 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/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/nova-admin/wx-group.png" width=170>|<img src="https://cdn.jsdelivr.net/gh/chansee97/static/wechat.png" width=170>|

-> 添加微信请注明来意
+> 微信群二维码失效请加我为好友

 ## 贡献

--- a/build/plugins.ts
+++ b/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插件配置
--- a/docker-compose.product.yml
+++ b/docker-compose.product.yml
@ -1,8 +0,0 @@
-services:
-  nove-admin:
-    build:
-      context: .
-      dockerfile: ./docker/dockerfile.product
-    container_name: nove-admin
-    ports:
-      - 80:80
--- a/docker/dockerfile.product
+++ b/docker/dockerfile.product
@ -1,23 +0,0 @@
-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
--- a/eslint.config.js
+++ b/eslint.config.js
@ -2,21 +2,4 @@
 import antfu from '@antfu/eslint-config'

 // https://github.com/antfu/eslint-config
-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',
-      },
-    },
-  },
-)
+export default antfu()
--- a/locales/en_US.json
+++ b/locales/en_US.json
@ -14,7 +14,7 @@
    "loginOutContent": "Confirm to log out of current account?",
    "loginOutTitle": "Sign out",
    "userCenter": "Personal center",
-    "light": "Light",
+    "lignt": "Light",
    "dark": "Dark",
    "system": "System",
    "backTop": "Back to top",
@ -42,7 +42,6 @@
    "themeSetting": "Theme settings",
    "todos": "Todos",
    "toggleFullScreen": "Toggle full screen",
-    "togglContentFullScreen": "Toggle content full screen",
    "topProgress": "Top progress",
    "transitionFadeBottom": "Bottom fade",
    "transitionFadeScale": "Scale fade",
@ -89,18 +88,17 @@
  "route": {
    "appRoot": "Home",
    "cardList": "Card list",
-    "draggableList": "Draggable list",
    "commonList": "Common list",
    "dashboard": "Dashboard",
    "demo": "Function example",
    "fetch": "Request example",
    "list": "List",
    "monitor": "Monitoring",
-    "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",
+    "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",
    "workbench": "Workbench",
    "QRCode": "QR code",
    "about": "About",
@ -109,11 +107,10 @@
    "demo404": "404",
    "demo500": "500",
    "dictionarySetting": "Dictionary settings",
-    "documents": "Document",
-    "documentsVite": "Vite",
-    "documentsVue": "Vue",
-    "documentsVueuse": "VueUse (external link)",
-    "documentsNova": "Nova docs",
+    "docments": "Document",
+    "docmentsVite": "Vite",
+    "docmentsVue": "Vue",
+    "docmentsVueuse": "VueUse (external link)",
    "echarts": "Echarts",
    "editor": "Editor",
    "editorMd": "MarkDown editor",
@ -155,9 +152,7 @@
    },
    "copyText": {
      "message": "Copied successfully",
-      "tooltip": "Copy",
-      "unsupportedError": "Your browser does not support Clipboard API",
-      "unpermittedError": "Crrently not permitted to use Clipboard API"
+      "tooltip": "Copy"
    }
  }
 }
--- a/locales/zh_CN.json
+++ b/locales/zh_CN.json
@ -14,13 +14,12 @@
    "loginOutTitle": "退出登录",
    "loginOutContent": "确认退出当前账号？",
    "userCenter": "个人中心",
-    "light": "浅色",
+    "lignt": "浅色",
    "dark": "深色",
    "system": "跟随系统",
    "backTop": "返回顶部",
    "toggleSider": "切换侧边栏",
    "toggleFullScreen": "切换全屏",
-    "togglContentFullScreen": "切换内容全屏",
    "notificationsTips": "消息通知",
    "notifications": "通知",
    "messages": "消息",
@ -87,9 +86,7 @@
    },
    "copyText": {
      "tooltip": "复制",
-      "message": "复制成功",
-      "unsupportedError": "您的浏览器不支持剪贴板API",
-      "unpermittedError": "目前不允许使用剪贴板API"
+      "message": "复制成功"
    }
  },
  "login": {
@ -120,15 +117,14 @@
    "dashboard": "仪表盘",
    "workbench": "工作台",
    "monitor": "监控页",
-    "multi": "多级菜单演示",
-    "multi2": "多级菜单子页",
-    "multi2Detail": "多级菜单的详情页",
-    "multi3": "多级菜单",
-    "multi4": "多级菜单3-1",
+    "test": "多级菜单演示",
+    "test2": "多级菜单子页",
+    "test2Detail": "多级菜单的详情页",
+    "test3": "多级菜单",
+    "test4": "多级菜单3-1",
    "list": "列表页",
    "commonList": "常用列表",
    "cardList": "卡片列表",
-    "draggableList": "拖拽列表",
    "demo": "功能示例",
    "fetch": "请求示例",
    "echarts": "Echarts示例",
@ -139,11 +135,10 @@
    "clipboard": "剪贴板",
    "icons": "图标",
    "QRCode": "二维码",
-    "documents": "文档",
-    "documentsVue": "Vue",
-    "documentsVite": "Vite",
-    "documentsVueuse": "VueUse（外链）",
-    "documentsNova": "Nova 文档",
+    "docments": "文档",
+    "docmentsVue": "Vue",
+    "docmentsVite": "Vite",
+    "docmentsVueuse": "VueUse（外链）",
    "permission": "权限",
    "permissionDemo": "权限示例",
    "justSuper": "super可见",
--- a/nginx.conf
+++ b/nginx.conf
@ -1,66 +0,0 @@
-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;
-    }
-}
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "nova-admin",
  "type": "module",
-  "version": "0.9.12",
+  "version": "0.9.5",
  "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": "vite build --mode prod",
-    "build:dev": "vite build --mode dev",
-    "build:test": "vite build --mode test",
+    "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",
    "preview": "vite preview --port 9981",
-    "lint": "eslint . && vue-tsc --noEmit",
+    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "lint:check": "npx @eslint/config-inspector",
    "sizecheck": "npx vite-bundle-visualizer"
  },
  "dependencies": {
-    "@vueuse/core": "^13.0.0",
-    "alova": "^3.2.10",
+    "@alova/scene-vue": "^1.6.0",
+    "@vueuse/core": "^10.11.0",
+    "alova": "^2.21.3",
    "colord": "^2.9.3",
-    "echarts": "^5.6.0",
-    "md-editor-v3": "^5.4.5",
-    "pinia": "^3.0.1",
-    "pinia-plugin-persistedstate": "^4.2.0",
-    "quill": "^2.0.3",
+    "echarts": "^5.5.0",
+    "md-editor-v3": "^4.15.2",
+    "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "quill": "^2.0.2",
    "radash": "^12.1.0",
-    "vue": "^3.5.13",
-    "vue-draggable-plus": "^0.6.0",
-    "vue-i18n": "^11.1.2",
-    "vue-router": "^4.5.0"
+    "vue": "^3.4.29",
+    "vue-i18n": "^9.13.1",
+    "vue-router": "^4.3.3"
  },
  "devDependencies": {
-    "@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",
+    "@antfu/eslint-config": "^2.21.1",
+    "@iconify-json/icon-park-outline": "^1.1.15",
+    "@iconify/vue": "^4.1.2",
+    "@types/node": "^20.14.2",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "eslint": "^9.5.0",
+    "lint-staged": "^15.2.7",
+    "naive-ui": "^2.38.2",
+    "sass": "^1.77.5",
+    "simple-git-hooks": "^2.11.1",
+    "typescript": "^5.4.5",
+    "unocss": "^0.61.0",
+    "unplugin-auto-import": "^0.17.6",
+    "unplugin-icons": "^0.19.0",
+    "unplugin-vue-components": "^0.27.0",
+    "vite": "^5.3.1",
    "vite-bundle-visualizer": "^1.2.1",
    "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-vue-devtools": "7.7.2",
-    "vue-tsc": "^2.2.8"
+    "vite-plugin-vue-devtools": "7.3.4",
+    "vue-tsc": "^2.0.21"
  },
  "simple-git-hooks": {
    "pre-commit": "pnpm lint-staged"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.vue
+++ b/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()

--- a/src/components/common/DarkModeSwitch.vue
+++ b/src/components/common/DarkModeSwitch.vue
@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { useAppStore } from '@/store'
-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'
+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'

 const { t } = useI18n()

@ -12,7 +12,7 @@ const appStore = useAppStore()
 const options = computed(() => {
  return [
    {
-      label: t('app.light'),
+      label: t('app.lignt'),
      value: 'light',
      icon: IconSun,
    },
--- a/src/components/common/HelpInfo.vue
+++ b/src/components/common/HelpInfo.vue
@ -3,7 +3,7 @@ interface Props {
  message: string
 }

-const { message } = defineProps<Props>()
+const props = defineProps<Props>()
 </script>

 <template>
@ -11,6 +11,6 @@ const { message } = defineProps<Props>()
    <template #trigger>
      <icon-park-outline-help class="op-50 cursor-help" />
    </template>
-    {{ message }}
+    {{ props.message }}
  </n-tooltip>
 </template>
--- a/src/components/common/IconSelect.vue
+++ b/src/components/common/IconSelect.vue
@ -5,9 +5,9 @@ interface Props {
  disabled?: boolean
 }

-const {
-  disabled = false,
-} = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+})

 interface IconList {
  prefix: string
@ -39,16 +39,6 @@ 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() {
@ -58,6 +48,15 @@ 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]
  })
@ -104,8 +103,9 @@ 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="disabled" type="primary">
+    <n-button v-if="value" :disabled="props.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="disabled" @click="showModal = true">
+    <n-button type="primary" ghost :disabled="props.disabled" @click="showModal = true">
      {{ $t('common.choose') }}
    </n-button>
  </n-input-group>
--- a/src/components/common/NovaIcon.vue
+++ b/src/components/common/NovaIcon.vue
@ -11,10 +11,13 @@ interface iconPorps {
  /* 图标深度 */
  depth?: 1 | 2 | 3 | 4 | 5
 }
-const { size = 18, icon } = defineProps<iconPorps>()
+const props = withDefaults(defineProps<iconPorps>(), {
+  size: 18,
+  isLocal: false,
+})

 const isLocal = computed(() => {
-  return icon && icon.startsWith('local:')
+  return props.icon && props.icon.startsWith('local:')
 })

 function getLocalIcon(icon: string) {
@ -25,22 +28,25 @@ function getLocalIcon(icon: string) {
    eager: true,
  })

-  return svg[`/src/assets/svg-icons/${svgName}.svg`]
+  const domparser = new DOMParser()
+  return domparser.parseFromString(svg[`/src/assets/svg-icons/${svgName}.svg`], 'image/svg+xml')
 }
 </script>

 <template>
  <n-icon
-    v-if="icon"
+    v-if="icon && !isLocal"
    :size="size"
    :depth="depth"
    :color="color"
  >
    <template v-if="isLocal">
-      <i v-html="getLocalIcon(icon)" />
+      {{ getLocalIcon(icon) }}
    </template>
    <template v-else>
      <Icon :icon="icon" />
    </template>
  </n-icon>
 </template>
+
+<style scoped></style>
--- a/src/components/common/Pagination.vue
+++ b/src/components/common/Pagination.vue
@ -1,10 +1,10 @@
 <script setup lang="ts">
-interface Props {
-  count?: number
-}
-const {
-  count = 0,
-} = defineProps<Props>()
+const props = defineProps({
+  count: {
+    type: Number,
+    default: 0,
+  },
+})

 const emit = defineEmits<{
  change: [page: number, pageSize: number] // 具名元组语法
@ -21,11 +21,11 @@ function changePage() {

 <template>
  <n-pagination
-    v-if="count > 0"
+    v-if="props.count > 0"
    v-model:page="page"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 30, 50]"
-    :item-count="count"
+    :item-count="props.count"
    :display-order="displayOrder"
    show-size-picker
    @update-page="changePage"
--- a/src/components/common/Watermark.vue
+++ b/src/components/common/Watermark.vue
@ -3,15 +3,16 @@ interface Props {
  showWatermark: boolean
  text?: string
 }
-const {
-  text = 'Watermark',
-} = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  showWatermark: false,
+  text: 'Watermark',
+})
 </script>

 <template>
  <n-watermark
-    v-if="showWatermark"
-    :content="text"
+    v-if="props.showWatermark"
+    :content="props.text"
    cross
    fullscreen
    :font-size="16"
--- a/src/components/custom/CopyText.vue
+++ b/src/components/custom/CopyText.vue
@ -1,14 +1,13 @@
 <script setup lang="ts">
-interface Props {
+const props = defineProps<{
  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': maxLength || '12em' }">
+    <n-ellipsis :style="{ 'max-width': props.maxLength || '12em' }">
      {{ modelValue }}
    </n-ellipsis>
    <n-tooltip trigger="hover">
--- a/src/components/custom/Editor/MarkDownEditor/index.vue
+++ b/src/components/custom/Editor/MarkDownEditor/index.vue
@ -1,16 +1,26 @@
 <script setup lang="ts">
 import type { ToolbarNames } from 'md-editor-v3'

-import { useAppStore } from '@/store'
-
 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 model = defineModel<string>()
+const props = defineProps<{
+  modelValue: string
+}>()
+
+const emit = defineEmits(['update:modelValue'])

 const appStore = useAppStore()

+const data = useVModel(props, 'modelValue', emit)
+
+const theme = computed(() => {
+  return appStore.colorMode ? 'dark' : 'light'
+})
+
 const toolbarsExclude: ToolbarNames[] = [
  'mermaid',
  'katex',
@ -22,7 +32,7 @@ const toolbarsExclude: ToolbarNames[] = [

 <template>
  <MdEditor
-    v-model="model" :theme="appStore.colorMode" :toolbars-exclude="toolbarsExclude"
+    v-model="data" :theme="theme" :toolbars-exclude="toolbarsExclude"
  />
 </template>

--- a/src/components/custom/Editor/RichTextEditor/index.vue
+++ b/src/components/custom/Editor/RichTextEditor/index.vue
@ -1,16 +1,15 @@
 <script setup lang="ts">
 import Quill from 'quill'
-import { useTemplateRef } from 'vue'
 import 'quill/dist/quill.snow.css'

 defineOptions({
  name: 'RichTextEditor',
 })

-const { disabled } = defineProps<Props>()
-interface Props {
+const props = defineProps<{
  disabled?: boolean
-}
+}>()
+
 const model = defineModel<string>()

 let editorInst = null
@ -21,7 +20,7 @@ onMounted(() => {
  initEditor()
 })

-const editorRef = useTemplateRef<HTMLElement>('editorRef')
+const editorRef = ref()
 function initEditor() {
  const options = {
    modules: {
@ -53,13 +52,13 @@ 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 (disabled)
+  if (props.disabled)
    quill.enable(false)

  editorInst = quill
@ -93,7 +92,7 @@ watch(editorModel, (newValue, oldValue) => {
 })

 watch(
-  () => disabled,
+  () => props.disabled,
  (newValue, _oldValue) => {
    editorInst!.enable(!newValue)
  },
--- a/src/directives/copy.ts
+++ b/src/directives/copy.ts
@ -11,12 +11,12 @@ export function install(app: App) {

  function clipboardEnable() {
    if (!isSupported.value) {
-      window.$message.error($t('components.copyText.unsupportedError'))
+      window.$message.error('Your browser does not support Clipboard API')
      return false
    }

    if (permissionWrite.value !== 'granted') {
-      window.$message.error($t('components.copyText.unpermittedError'))
+      window.$message.error('Currently not permitted to use Clipboard API')
      return false
    }
    return true
--- a/src/hooks/useEcharts.ts
+++ b/src/hooks/useEcharts.ts
@ -1,3 +1,6 @@
+import * as echarts from 'echarts/core'
+import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts'
+
 // 系列类型的定义后缀都为 SeriesOption
 import type {
  BarSeriesOption,
@ -5,6 +8,7 @@ import type {
  PieSeriesOption,
  RadarSeriesOption,
 } from 'echarts/charts'
+
 // 组件类型的定义后缀都为 ComponentOption
 import type {
  DatasetComponentOption,
@ -14,9 +18,6 @@ import type {
  ToolboxComponentOption,
  TooltipComponentOption,
 } from 'echarts/components'
-import { useAppStore } from '@/store'
-import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts'
-
 import {
  DatasetComponent, // 数据集组件
  GridComponent,
@ -26,11 +27,10 @@ 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 { useTemplateRef } from 'vue'
+import { useAppStore } from '@/store'

 // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
 export type ECOption = echarts.ComposeOption<
@ -68,16 +68,14 @@ echarts.use([
 * Echarts hooks函数
 * @description 按需引入图表组件，没注册的组件需要先引入
 */
-export function useEcharts(ref: string, chartOptions: Ref<ECOption>) {
-  const el = useTemplateRef<HTMLLIElement>(ref)
-
+export function useEcharts(el: Ref<HTMLElement | null>, chartOptions: Ref<ECOption>) {
  const appStore = useAppStore()

  let chart: echarts.ECharts | null = null

  const { width, height } = useElementSize(el)

-  const isRendered = () => Boolean(el && chart)
+  const isRendered = computed(() => Boolean(el && chart))

  async function render() {
    // 宽或高不存在时不渲染
@ -92,10 +90,9 @@ export function useEcharts(ref: string, chartOptions: Ref<ECOption>) {
    }
  }

-  async function update(updateOptions: ECOption) {
-    if (isRendered()) {
-      chart!.setOption({ backgroundColor: 'transparent', ...updateOptions })
-    }
+  function update(updateOptions: ECOption) {
+    if (isRendered.value)
+      chart!.setOption({ ...updateOptions, backgroundColor: 'transparent' })
  }

  function destroy() {
@ -104,7 +101,7 @@ export function useEcharts(ref: string, chartOptions: Ref<ECOption>) {
  }

  watch([width, height], async ([newWidth, newHeight]) => {
-    if (isRendered() && newWidth && newHeight)
+    if (isRendered.value && newWidth && newHeight)
      chart?.resize()
  })

--- a/src/hooks/usePermission.ts
+++ b/src/hooks/usePermission.ts
@ -1,3 +1,4 @@
+import { isArray, isString } from 'radash'
 import { useAuthStore } from '@/store'

 /** 权限判断 */
@ -5,7 +6,7 @@ export function usePermission() {
  const authStore = useAuthStore()

  function hasPermission(
-    permission?: Entity.RoleType[],
+    permission: Entity.RoleType | Entity.RoleType[] | undefined,
  ) {
    if (!permission)
      return true
@ -14,9 +15,13 @@ export function usePermission() {
      return false
    const { role } = authStore.userInfo

-    let has = role.includes('super')
+    let has = role === 'super'
    if (!has) {
-      has = permission.every(i => role.includes(i))
+      if (isArray(permission))
+        has = permission.includes(role)
+
+      if (isString(permission))
+        has = permission === role
    }
    return has
  }
--- a/src/hooks/useTableDrag.ts
+++ b/src/hooks/useTableDrag.ts
@ -1,35 +0,0 @@
-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()
-  })
-}
--- a/src/layouts/components/common/NoticeList.vue
+++ b/src/layouts/components/common/NoticeList.vue
@ -2,7 +2,7 @@
 interface Props {
  list?: Entity.Message[]
 }
-const { list } = defineProps<Props>()
+const props = 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 list" :key="item.id" @click="emit('read', item.id)">
+      <n-list-item v-for="(item) in props.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">
--- a/src/layouts/components/common/SettingDrawer.vue
+++ b/src/layouts/components/common/SettingDrawer.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useAppStore } from '@/store'
 import LayoutSelector from './LayoutSelector.vue'
+import { useAppStore } from '@/store'

 const appStore = useAppStore()

--- a/src/layouts/components/header/FullScreen.vue
+++ b/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 v-if="appStore.fullScreen" />
-        <icon-park-outline-full-screen v-else />
+        <icon-park-outline-off-screen-two v-if="appStore.fullScreen" />
+        <icon-park-outline-full-screen-two v-else />
      </CommonWrapper>
    </template>
    <span>{{ $t('app.toggleFullScreen') }}</span>
--- a/src/layouts/components/header/Search.vue
+++ b/src/layouts/components/header/Search.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useBoolean } from '@/hooks'
 import { useRouteStore } from '@/store'
+import { useBoolean } from '@/hooks'

 const routeStore = useRouteStore()

--- a/src/layouts/components/header/UserCenter.vue
+++ b/src/layouts/components/header/UserCenter.vue
@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { useAuthStore } from '@/store'
 import { renderIcon } from '@/utils/icon'
-import IconBookOpen from '~icons/icon-park-outline/book-open'
+import { useAuthStore } from '@/store'
 import IconGithub from '~icons/icon-park-outline/github'
-import IconLogout from '~icons/icon-park-outline/logout'
 import IconUser from '~icons/icon-park-outline/user'
+import IconLogout from '~icons/icon-park-outline/logout'
+import IconBookOpen from '~icons/icon-park-outline/book-open'

 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.pages.dev/')
+    window.open('https://nova-admin-docs.netlify.app/')
 }
 </script>

@ -82,7 +82,7 @@ function handleSelect(key: string | number) {
  >
    <n-avatar
      round
-      class="cursor-pointer"
+
      :src="userInfo?.avatar"
    >
      <template #fallback>
--- a/src/layouts/components/index.ts
+++ b/src/layouts/components/index.ts
@ -1,30 +1,30 @@
-import BackTop from './common/BackTop.vue'
-import Setting from './common/Setting.vue'
-import SettingDrawer from './common/SettingDrawer.vue'
+import Logo from './sider/Logo.vue'
+import Menu from './sider/Menu.vue'

 import Breadcrumb from './header/Breadcrumb.vue'
 import CollapaseButton from './header/CollapaseButton.vue'
 import FullScreen from './header/FullScreen.vue'
 import Notices from './header/Notices.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 Search from './header/Search.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,
-  FullScreen,
-  Logo,
  Menu,
-  Notices,
-  Search,
+  Logo,
+  FullScreen,
  Setting,
  SettingDrawer,
-  TabBar,
+  Notices,
  UserCenter,
+  Search,
+  TabBar,
+  BackTop,
 }
--- a/src/layouts/components/tab/ContentFullScreen.vue
+++ b/src/layouts/components/tab/ContentFullScreen.vue
@ -1,17 +0,0 @@
-<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>
--- a/src/layouts/components/tab/TabBar.vue
+++ b/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 { useDraggable } from 'vue-draggable-plus'
+import IconRedo from '~icons/icon-park-outline/redo'
 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 ContentFullScreen from './ContentFullScreen.vue'
-import DropTabs from './DropTabs.vue'
-import Reload from './Reload.vue'
-import TabBarItem from './TabBarItem.vue'
+import IconFullwith from '~icons/icon-park-outline/fullwidth'

 const tabStore = useTabStore()
 const appStore = useAppStore()

 const router = useRouter()
 function handleTab(route: RouteLocationNormalized) {
-  router.push(route.fullPath)
+  router.push(route.path)
+}
+function handleClose(path: string) {
+  tabStore.closeTab(path)
 }
 const { t } = useI18n()
 const options = computed(() => {
@ -70,16 +70,16 @@ function handleSelect(key: string) {
      appStore.reloadPage()
    },
    closeCurrent() {
-      tabStore.closeTab(currentRoute.value.fullPath)
+      tabStore.closeTab(currentRoute.value.path)
    },
    closeOther() {
-      tabStore.closeOtherTabs(currentRoute.value.fullPath)
+      tabStore.closeOtherTabs(currentRoute.value.path)
    },
    closeLeft() {
-      tabStore.closeLeftTabs(currentRoute.value.fullPath)
+      tabStore.closeLeftTabs(currentRoute.value.path)
    },
    closeRight() {
-      tabStore.closeRightTabs(currentRoute.value.fullPath)
+      tabStore.closeRightTabs(currentRoute.value.path)
    },
    closeAll() {
      tabStore.closeAllTabs()
@ -100,49 +100,53 @@ 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="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"
+  <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"
        @click="handleTab(item)"
        @contextmenu="handleContextMenu($event, item)"
-      />
-      <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 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"
+    />
  </div>
 </template>
-
-<style scoped>
-.ghost {
-  opacity: 0.5;
-  background: #c4f6d5;
-}
-</style>
--- a/src/layouts/components/tab/TabBarItem.vue
+++ b/src/layouts/components/tab/TabBarItem.vue
@ -1,41 +0,0 @@
-<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>
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@ -1,9 +1,9 @@
 <script setup lang="ts">
-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'
+import mixMenu from './mixMenu.layout.vue'
+import { SettingDrawer } from './components'
+import { useAppStore } from '@/store/app'

 const appStore = useAppStore()
 const layoutMap = {
--- a/src/layouts/leftMenu.layout.vue
+++ b/src/layouts/leftMenu.layout.vue
@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { useAppStore, useRouteStore } from '@/store'
 import {
  BackTop,
  Breadcrumb,
@ -13,6 +12,7 @@ import {
  TabBar,
  UserCenter,
 } from './components'
+import { useAppStore, useRouteStore } from '@/store'

 const routeStore = useRouteStore()
 const appStore = useAppStore()
@ -25,7 +25,6 @@ const appStore = useAppStore()
    embedded
  >
    <n-layout-sider
-      v-if="!appStore.contentFullScreen"
      bordered
      :collapsed="appStore.collapsed"
      collapse-mode="width"
@ -44,8 +43,8 @@ const appStore = useAppStore()
      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">
+      <n-layout-header bordered position="absolute" class="z-1">
+        <div class="h-60px flex-y-center justify-between">
          <div class="flex-y-center h-full">
            <CollapaseButton />
            <Breadcrumb />
@ -62,17 +61,9 @@ const appStore = useAppStore()
        </div>
        <TabBar v-if="appStore.showTabs" class="h-45px" />
      </n-layout-header>
-      <!-- 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,
-        }"
-      >
+      <div class="flex-1 p-16px flex flex-col">
+        <div class="h-60px" />
+        <div v-if="appStore.showTabs" class="h-45px" />
        <router-view v-slot="{ Component, route }" class="flex-1">
          <transition
            :name="appStore.transitionAnimation"
@ -87,9 +78,10 @@ const appStore = useAppStore()
            </keep-alive>
          </transition>
        </router-view>
+        <div v-if="appStore.showFooter" class="h-40px" />
      </div>
      <n-layout-footer
-        v-if="appStore.showFooter && !appStore.contentFullScreen"
+        v-if="appStore.showFooter"
        bordered
        position="absolute"
        class="h-40px flex-center"
--- a/src/layouts/mixMenu.layout.vue
+++ b/src/layouts/mixMenu.layout.vue
@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { MenuInst, MenuOption } from 'naive-ui'
-import { useAppStore, useRouteStore } from '@/store'
 import {
  BackTop,
  CollapaseButton,
@ -12,6 +11,7 @@ import {
  TabBar,
  UserCenter,
 } from './components'
+import { useAppStore, useRouteStore } from '@/store'

 const routeStore = useRouteStore()
 const appStore = useAppStore()
@ -52,8 +52,8 @@ onMounted(() => {

 const sideMenu = ref<MenuOption[]>([])
 function handleSideMenu(key: string) {
-  const routeMenu = routeStore.menus as MenuOption[]
-  const targetMenu = routeMenu.find(i => i.key === key)
+  // @ts-expect-error no error at here
+  const targetMenu = routeStore.menus.find(i => i.key === key)
  if (targetMenu) {
    sideMenu.value = targetMenu.children ? targetMenu.children : [targetMenu]
  }
@ -73,7 +73,6 @@ function updateTopMenu(key: string) {
    embedded
  >
    <n-layout-sider
-      v-if="!appStore.contentFullScreen"
      bordered
      :collapsed="appStore.collapsed"
      collapse-mode="width"
@ -99,8 +98,8 @@ function updateTopMenu(key: string) {
      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">
+      <n-layout-header bordered position="absolute" class="z-1">
+        <div class="h-60px flex-y-center justify-between">
          <CollapaseButton />
          <n-menu
            ref="menuInstRef"
@ -122,15 +121,9 @@ function updateTopMenu(key: string) {
        </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,
-        }"
-      >
+      <div class="flex-1 p-16px flex flex-col">
+        <div class="h-60px" />
+        <div v-if="appStore.showTabs" class="h-45px" />
        <router-view v-slot="{ Component, route }" class="flex-1">
          <transition
            :name="appStore.transitionAnimation"
@ -145,9 +138,10 @@ function updateTopMenu(key: string) {
            </keep-alive>
          </transition>
        </router-view>
+        <div v-if="appStore.showFooter" class="h-40px" />
      </div>
      <n-layout-footer
-        v-if="appStore.showFooter && !appStore.contentFullScreen"
+        v-if="appStore.showFooter"
        bordered
        position="absolute"
        class="h-40px flex-center"
--- a/src/layouts/topMenu.layout.vue
+++ b/src/layouts/topMenu.layout.vue
@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { useAppStore, useRouteStore } from '@/store'
 import {
  BackTop,
  FullScreen,
@ -11,6 +10,7 @@ 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-999">
-        <div v-if="!appStore.contentFullScreen" class="h-60px flex-y-center justify-between shrink-0">
+      <n-layout-header bordered position="absolute" class="z-1">
+        <div 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,15 +38,9 @@ const appStore = useAppStore()
        </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,
-        }"
-      >
+      <div class="flex-1 p-16px flex flex-col">
+        <div class="h-60px" />
+        <div v-if="appStore.showTabs" class="h-45px" />
        <router-view v-slot="{ Component, route }" class="flex-1">
          <transition :name="appStore.transitionAnimation" mode="out-in">
            <keep-alive :include="routeStore.cacheRoutes">
@ -54,11 +48,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 && !appStore.contentFullScreen"
-        bordered position="absolute" class="h-40px flex-center"
-      >
+      <n-layout-footer v-if="appStore.showFooter" bordered position="absolute" class="h-40px flex-center">
        {{ appStore.footerText }}
      </n-layout-footer>
      <BackTop />
--- a/src/main.ts
+++ b/src/main.ts
@ -1,8 +1,8 @@
 import type { App } from 'vue'
-import { installRouter } from '@/router'
-import { installPinia } from '@/store'
 import AppVue from './App.vue'
 import AppLoading from './components/common/AppLoading.vue'
+import { installRouter } from '@/router'
+import { installPinia } from '@/store'

 async function setupApp() {
  // 载入全局loading加载状态
--- a/src/modules/i18n.ts
+++ b/src/modules/i18n.ts
@ -1,24 +1,17 @@
-import type { App } from 'vue'
-import { local } from '@/utils'
 import { createI18n } from 'vue-i18n'
+import type { App } from 'vue'
 import enUS from '../../locales/en_US.json'
 import zhCN from '../../locales/zh_CN.json'
-
-const { VITE_DEFAULT_LANG } = import.meta.env
+import { local } from '@/utils'

 export const i18n = createI18n({
  legacy: false,
-  locale: local.get('lang') || VITE_DEFAULT_LANG, // 默认显示语言
-  fallbackLocale: VITE_DEFAULT_LANG,
+  locale: local.get('lang') || 'enUS', // 默认显示语言
+  fallbackLocale: 'enUS',
  messages: {
    zhCN,
    enUS,
  },
-  // 缺失国际化键警告
-  // missingWarn: false,
-
-  // 缺失回退内容警告
-  fallbackWarn: false,
 })

 export function install(app: App) {
--- a/src/router/guard.ts
+++ b/src/router/guard.ts
@ -61,7 +61,7 @@ export function setupRouterGuard(router: Router) {
    // 添加tabs
    tabStore.addTab(to)
    // 设置高亮标签;
-    tabStore.setCurrentTab(to.fullPath as string)
+    tabStore.setCurrentTab(to.path as string)
  })

  router.afterEach((to) => {
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -1,7 +1,7 @@
 import type { App } from 'vue'
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
-import { setupRouterGuard } from './guard'
 import { routes } from './routes.inner'
+import { setupRouterGuard } from './guard'

 const { VITE_ROUTE_MODE = 'hash', VITE_BASE_URL } = import.meta.env
 export const router = createRouter({
--- a/src/router/routes.static.ts
+++ b/src/router/routes.static.ts
@ -34,8 +34,8 @@ export const staticRoutes: AppRoute.RowRoute[] = [
    pid: 1,
  },
  {
-    name: 'multi',
-    path: '/multi',
+    name: 'test',
+    path: '/test',
    title: '多级菜单演示',
    requiresAuth: true,
    icon: 'icon-park-outline:list',
@ -45,32 +45,32 @@ export const staticRoutes: AppRoute.RowRoute[] = [
    pid: null,
  },
  {
-    name: 'multi2',
-    path: '/multi/multi2',
+    name: 'test2',
+    path: '/test/test2',
    title: '多级菜单子页',
    requiresAuth: true,
    icon: 'icon-park-outline:list',
    menuType: 'page',
-    componentPath: '/demo/multi/multi2/index.vue',
+    componentPath: '/test/test2/index.vue',
    id: 6,
    pid: 4,
  },
  {
-    name: 'multi2Detail',
-    path: '/multi/multi2/detail',
-    title: '菜单详情页',
+    name: 'test2Detail',
+    path: '/test/test2/detail',
+    title: '多级菜单的详情页',
    requiresAuth: true,
    icon: 'icon-park-outline:list',
    hide: true,
-    activeMenu: '/multi/multi2',
+    activeMenu: '/test/test2',
    menuType: 'page',
-    componentPath: '/demo/multi/multi2/detail/index.vue',
+    componentPath: '/test/test2/detail/index.vue',
    id: 7,
    pid: 4,
  },
  {
-    name: 'multi3',
-    path: '/multi/multi3',
+    name: 'test3',
+    path: '/test/test3',
    title: '多级菜单',
    requiresAuth: true,
    icon: 'icon-park-outline:list',
@ -80,12 +80,12 @@ export const staticRoutes: AppRoute.RowRoute[] = [
    pid: 4,
  },
  {
-    name: 'multi4',
-    path: '/multi/multi3/multi4',
+    name: 'test4',
+    path: '/test/test3/test4',
    title: '多级菜单3-1',
    requiresAuth: true,
    icon: 'icon-park-outline:list',
-    componentPath: '/demo/multi/multi3/multi4/index.vue',
+    componentPath: '/test/test3/test4/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: '/demo/list/commonList/index.vue',
+    componentPath: '/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: '/demo/list/cardList/index.vue',
+    componentPath: '/list/cardList/index.vue',
    id: 12,
    pid: 10,
  },
@ -224,8 +224,8 @@ export const staticRoutes: AppRoute.RowRoute[] = [
    pid: 13,
  },
  {
-    name: 'documents',
-    path: '/documents',
+    name: 'docments',
+    path: '/docments',
    title: '外链文档',
    requiresAuth: true,
    icon: 'icon-park-outline:file-doc',
@ -235,28 +235,28 @@ export const staticRoutes: AppRoute.RowRoute[] = [
    pid: null,
  },
  {
-    name: 'documentsVue',
-    path: '/documents/vue',
+    name: 'docmentsVue',
+    path: '/docments/vue',
    title: 'Vue',
    requiresAuth: true,
    icon: 'logos:vue',
-    componentPath: '/demo/documents/vue/index.vue',
+    componentPath: '/docments/vue/index.vue',
    id: 25,
    pid: 24,
  },
  {
-    name: 'documentsVite',
-    path: '/documents/vite',
+    name: 'docmentsVite',
+    path: '/docments/vite',
    title: 'Vite',
    requiresAuth: true,
    icon: 'logos:vitejs',
-    componentPath: '/demo/documents/vite/index.vue',
+    componentPath: '/docments/vite/index.vue',
    id: 26,
    pid: 24,
  },
  {
-    name: 'documentsVueuse',
-    path: '/documents/vueuse',
+    name: 'docmentsVueuse',
+    path: '/docments/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: '/demo/permission/permission/index.vue',
+    componentPath: '/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: '/demo/permission/justSuper/index.vue',
+    componentPath: '/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: '/demo/userCenter/index.vue',
+    componentPath: '/userCenter/index.vue',
    id: 39,
    pid: null,
  },
@ -400,7 +400,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [
    title: '关于',
    requiresAuth: true,
    icon: 'icon-park-outline:info',
-    componentPath: '/demo/about/index.vue',
+    componentPath: '/about/index.vue',
    id: 40,
    pid: null,
  },
@ -415,8 +415,8 @@ export const staticRoutes: AppRoute.RowRoute[] = [
    pid: 13,
  },
  {
-    name: 'documentsNova',
-    path: '/documents/nova',
+    name: 'docmentsNova',
+    path: '/docments/nova',
    title: 'Nova docs',
    requiresAuth: true,
    icon: 'local:logo',
@ -435,14 +435,4 @@ export const staticRoutes: AppRoute.RowRoute[] = [
    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,
-  },
 ]
--- a/src/service/api/test.ts
+++ b/src/service/api/test.ts
@ -36,7 +36,7 @@ export function withoutToken() {
 /* 接口数据转换 */
 export function dictData() {
  return request.Get('/getDictData', {
-    transform(rawData, _headers) {
+    transformData(rawData, _headers) {
      const response = rawData as any
      return {
        ...response,
@ -61,7 +61,10 @@ export function getBlob(url: string) {

 /* 带进度的下载文件 */
 export function downloadFile(url: string) {
-  const methodInstance = blankInstance.Get<Blob>(url)
+  const methodInstance = blankInstance.Get<Blob>(url, {
+    // 开启下载进度
+    enableDownload: true,
+  })
  methodInstance.meta = {
    // 标识为blob数据
    isBlob: true,
--- a/src/service/http/alova.ts
+++ b/src/service/http/alova.ts
@ -1,20 +1,20 @@
-import { local } from '@/utils'
 import { createAlova } from 'alova'
-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 VueHook from 'alova/vue'
+import GlobalFetch from 'alova/GlobalFetch'
+import { createServerTokenAuthentication } from '@alova/scene-vue'
 import {
  handleBusinessError,
  handleRefreshToken,
  handleResponseError,
  handleServiceResult,
 } from './handle'
+import {
+  DEFAULT_ALOVA_OPTIONS,
+  DEFAULT_BACKEND_OPTIONS,
+} from './config'
+import { local } from '@/utils'

-const { onAuthRequired, onResponseRefreshToken } = createServerTokenAuthentication<VueHookType>({
+const { onAuthRequired, onResponseRefreshToken } = createServerTokenAuthentication({
  // 服务端判定token过期
  refreshTokenOnSuccess: {
    // 当服务端返回401时，表示token过期
@ -50,8 +50,8 @@ export function createAlovaInstance(

  return createAlova({
    statesHook: VueHook,
-    requestAdapter: adapterFetch(),
-    cacheFor: null,
+    requestAdapter: GlobalFetch(),
+    localCache: null,
    baseURL: _alovaConfig.baseURL,
    timeout: _alovaConfig.timeout,

--- a/src/service/http/handle.ts
+++ b/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

--- a/src/service/http/index.ts
+++ b/src/service/http/index.ts
@ -1,6 +1,6 @@
-import { generateProxyPattern } from '@/../build/proxy'
-import { serviceConfig } from '@/../service.config'
 import { createAlovaInstance } from './alova'
+import { serviceConfig } from '@/../service.config'
+import { generateProxyPattern } from '@/../build/proxy'

 const isHttpProxy = import.meta.env.DEV && import.meta.env.VITE_HTTP_PROXY === 'Y'

--- a/src/service/index.ts
+++ b/src/service/index.ts
@ -1,4 +1,4 @@
-export * from './api/list'
-export * from './api/login'
 export * from './api/system'
+export * from './api/login'
+export * from './api/list'
 export * from './api/test'
--- a/src/store/app/index.ts
+++ b/src/store/app/index.ts
@ -1,14 +1,12 @@
 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'

-export type TransitionAnimation = '' | 'fade-slide' | 'fade-bottom' | 'fade-scale' | 'zoom-fade' | 'zoom-out'
+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)

 const { isFullscreen, toggle } = useFullscreen(docEle)
@ -20,8 +18,8 @@ const { system, store } = useColorMode({
 export const useAppStore = defineStore('app-store', {
  state: () => {
    return {
-      footerText: VITE_COPYRIGHT_INFO,
-      lang: VITE_DEFAULT_LANG,
+      footerText: import.meta.env.VITE_COPYRIGHT_INFO,
+      lang: 'enUS' as App.lang,
      theme: themeConfig as GlobalThemeOverrides,
      primaryColor: themeConfig.common.primaryColor,
      collapsed: false,
@ -38,7 +36,6 @@ export const useAppStore = defineStore('app-store', {
      showSetting: false,
      transitionAnimation: 'fade-slide' as TransitionAnimation,
      layoutMode: 'leftMenu' as LayoutMode,
-      contentFullScreen: false,
    }
  },
  getters: {
@ -69,7 +66,6 @@ export const useAppStore = defineStore('app-store', {
      this.showWatermark = false
      this.transitionAnimation = 'fade-slide'
      this.layoutMode = 'leftMenu'
-      this.contentFullScreen = false

      // 重置所有配色
      this.setPrimaryColor(this.primaryColor)
--- a/src/store/auth.ts
+++ b/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,7 +62,6 @@ export const useAuthStore = defineStore('auth-store', {
        await this.handleLoginInfo(data)
      }
      catch (e) {
-        console.warn('[Login Error]:', e)
      }
    },

--- a/src/store/dict.ts
+++ b/src/store/dict.ts
@ -1,58 +1,47 @@
 import { fetchDictList } from '@/service'
-import { session } from '@/utils'
+
+interface DictState {
+  dict: { [key: string]: Entity.Dict[] }
+}

 export const useDictStore = defineStore('dict-store', {
-  state: () => {
+  state: (): DictState => {
    return {
-      dictMap: {} as DictMap,
-      isInitDict: false,
+      dict: {},
    }
  },
  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])),
+        list: () => targetDict,
+        mapByValue: () => Object.fromEntries(targetDict.map(({ value, ...data }) => [value, data])),
+        mapByLabel: () => Object.fromEntries(targetDict.map(({ label, ...data }) => [label, data])),
      }
    },
    async getDict(code: string) {
-      const isExist = Reflect.has(this.dictMap, code)
+      const isExist = Reflect.has(this.dict, code)

      if (isExist) {
-        return this.dictMap[code]
+        return this.dict[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)
+        Reflect.set(this.dict, code, data)
        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
-    },
+  },
+  persist: {
+    storage: sessionStorage,
  },
 })
--- a/src/store/index.ts
+++ b/src/store/index.ts
@ -3,9 +3,9 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

 export * from './app/index'
 export * from './auth'
-export * from './dict'
 export * from './router'
 export * from './tab'
+export * from './dict'

 // 安装pinia全局状态库
 export function installPinia(app: App) {
--- a/src/store/router/helper.ts
+++ b/src/store/router/helper.ts
@ -1,10 +1,10 @@
-import type { MenuOption } from 'naive-ui'
-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 type { RouteRecordRaw } from 'vue-router'
+import type { MenuOption } from 'naive-ui'
 import { RouterLink } from 'vue-router'
+import Layout from '@/layouts/index.vue'
+import { usePermission } from '@/hooks'
+import { $t, arrayToTree, renderIcon } from '@/utils'

 const metaFields: AppRoute.MetaKeys[]
  = ['title', 'icon', 'requiresAuth', 'roles', 'keepAlive', 'hide', 'order', 'href', 'activeMenu', 'withoutTab', 'pinTab', 'menuType']
@ -104,9 +104,8 @@ export function createMenus(userRoutes: AppRoute.RowRoute[]) {
 // render the returned routing table as a sidebar
 function transformAuthRoutesToMenus(userRoutes: AppRoute.Route[]) {
  const { hasPermission } = usePermission()
-  return userRoutes
-    // Filter out side menus without permission
-    .filter(i => hasPermission(i.meta.roles))
+  // Filter out side menus without permission
+  return userRoutes.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)
@ -117,6 +116,7 @@ function transformAuthRoutesToMenus(userRoutes: AppRoute.Route[]) {
        return 1
      else return 0
    })
+
    // Convert to side menu data structure
    .map((item) => {
      const target: MenuOption = {
--- a/src/store/router/index.ts
+++ b/src/store/router/index.ts
@ -1,10 +1,10 @@
 import type { MenuOption } from 'naive-ui'
-import { router } from '@/router'
-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'
+import { $t, local } from '@/utils'
+import { router } from '@/router'
+import { fetchUserRoutes } from '@/service'
+import { staticRoutes } from '@/router/routes.static'
+import { useAuthStore } from '@/store/auth'

 interface RoutesStatus {
  isInitAuthRoute: boolean
@ -38,7 +38,7 @@ export const useRouteStore = defineStore('route-store', {
    },

    async initRouteInfo() {
-      if (import.meta.env.VITE_ROUTE_LOAD_MODE === 'dynamic') {
+      if (import.meta.env.VITE_AUTH_ROUTE_MODE === 'dynamic') {
        const userInfo = local.get('userInfo')

        if (!userInfo || !userInfo.id) {
--- a/src/store/tab.ts
+++ b/src/store/tab.ts
@ -24,7 +24,7 @@ export const useTabStore = defineStore('tab-store', {
        return

      // 如果标签名称已存在则不添加
-      if (this.hasExistTab(route.fullPath as string))
+      if (this.hasExistTab(route.path as string))
        return

      // 根据meta.pinTab传递到不同的分组中
@ -33,42 +33,42 @@ export const useTabStore = defineStore('tab-store', {
      else
        this.tabs.push(route)
    },
-    async closeTab(fullPath: string) {
+    async closeTab(path: string) {
      const tabsLength = this.tabs.length
      // 如果动态标签大于一个,才会标签跳转
      if (this.tabs.length > 1) {
        // 获取关闭的标签索引
-        const index = this.getTabIndex(fullPath)
+        const index = this.getTabIndex(path)
        const isLast = index + 1 === tabsLength
        // 如果是关闭的当前页面，路由跳转到原先标签的后一个标签
-        if (this.currentTabPath === fullPath && !isLast) {
+        if (this.currentTabPath === path && !isLast) {
          // 跳转到后一个标签
-          router.push(this.tabs[index + 1].fullPath)
+          router.push(this.tabs[index + 1].path)
        }
-        else if (this.currentTabPath === fullPath && isLast) {
+        else if (this.currentTabPath === path && isLast) {
          // 已经是最后一个了，就跳转前一个
-          router.push(this.tabs[index - 1].fullPath)
+          router.push(this.tabs[index - 1].path)
        }
      }
      // 删除标签
      this.tabs = this.tabs.filter((item) => {
-        return item.fullPath !== fullPath
+        return item.path !== path
      })
      // 删除后如果清空了，就跳转到默认首页
      if (tabsLength - 1 === 0)
        router.push('/')
    },

-    closeOtherTabs(fullPath: string) {
-      const index = this.getTabIndex(fullPath)
+    closeOtherTabs(path: string) {
+      const index = this.getTabIndex(path)
      this.tabs = this.tabs.filter((item, i) => i === index)
    },
-    closeLeftTabs(fullPath: string) {
-      const index = this.getTabIndex(fullPath)
+    closeLeftTabs(path: string) {
+      const index = this.getTabIndex(path)
      this.tabs = this.tabs.filter((item, i) => i >= index)
    },
-    closeRightTabs(fullPath: string) {
-      const index = this.getTabIndex(fullPath)
+    closeRightTabs(path: string) {
+      const index = this.getTabIndex(path)
      this.tabs = this.tabs.filter((item, i) => i <= index)
    },
    clearAllTabs() {
@ -80,25 +80,21 @@ export const useTabStore = defineStore('tab-store', {
      router.push('/')
    },

-    hasExistTab(fullPath: string) {
+    hasExistTab(path: string) {
      const _tabs = [...this.tabs, ...this.pinTabs]
      return _tabs.some((item) => {
-        return item.fullPath === fullPath
+        return item.path === path
      })
    },
    /* 设置当前激活的标签 */
-    setCurrentTab(fullPath: string) {
-      this.currentTabPath = fullPath
+    setCurrentTab(path: string) {
+      this.currentTabPath = path
    },
-    getTabIndex(fullPath: string) {
+    getTabIndex(path: string) {
      return this.tabs.findIndex((item) => {
-        return item.fullPath === fullPath
+        return item.path === path
      })
    },
-    modifyTab(fullPath: string, modifyFn: (route: RouteLocationNormalized) => void) {
-      const index = this.getTabIndex(fullPath)
-      modifyFn(this.tabs[index])
-    },
  },
  persist: {
    storage: sessionStorage,
--- a/src/styles/index.css
+++ b/src/styles/index.css
@ -14,7 +14,3 @@ body,
 .gray-mode {
  filter: grayscale(100%);
 }
-
-.drag-handle {
-  cursor: move;
-}
--- a/src/styles/naive.css
+++ b/src/styles/naive.css
@ -6,9 +6,3 @@
 .v-x-scroll {
  height: 100%;
 }
-
-/* 解决二维码尺寸问题 */
-.n-qr-code{
-  height: unset !important;
-  width: unset !important;;
-}
--- a/src/typings/api/login.d.ts
+++ b/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 */
--- a/src/typings/entities/demoList.d.ts
+++ b/src/typings/entities/demoList.d.ts
@ -0,0 +1,15 @@
+/// <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
+  }
+}
--- a/src/typings/env.d.ts
+++ b/src/typings/env.d.ts
@ -21,18 +21,17 @@ interface ImportMetaEnv {
    | 'brotliCompress'
    | 'deflate'
    | 'deflateRaw'
-  /** 路由模式 */
+  /** hash路由模式 */
  readonly VITE_ROUTE_MODE?: 'hash' | 'web'
  /** 路由加载模式 */
-  readonly VITE_ROUTE_LOAD_MODE: 'static' | 'dynamic'
+  readonly VITE_AUTH_ROUTE_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
 }
--- a/src/typings/global.d.ts
+++ b/src/typings/global.d.ts
@ -30,7 +30,7 @@ declare namespace NaiveUI {

 declare namespace Storage {
  interface Session {
-    dict: DictMap
+    demoKey: string
  }

  interface Local {
@ -50,7 +50,3 @@ declare namespace Storage {
 declare namespace App {
  type lang = 'zhCN' | 'enUS'
 }
-
-interface DictMap {
-  [key: string]: Entity.Dict[]
-}
--- a/src/utils/array.ts
+++ b/src/utils/array.ts
@ -1,37 +1,20 @@
-/**
- * 将给定的数组转换为树形结构。
- * @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
 }
--- a/src/utils/i18n.ts
+++ b/src/utils/i18n.ts
@ -1,6 +1,6 @@
 import type { NDateLocale, NLocale } from 'naive-ui'
-import { i18n } from '@/modules/i18n'
 import { dateZhCN, zhCN } from 'naive-ui'
+import { i18n } from '@/modules/i18n'

 export function setLocale(locale: App.lang) {
  i18n.global.locale.value = locale
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@ -1,4 +1,4 @@
+export * from './icon'
 export * from './storage'
 export * from './array'
 export * from './i18n'
-export * from './icon'
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@ -39,8 +39,9 @@ function createLocalStorage<T extends Storage.Local>() {
    window.localStorage.removeItem(`${STORAGE_PREFIX}${String(key)}`)
  }

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

  return {
    set,
--- a/src/views/demo/about/index.vue
+++ b/src/views/demo/about/index.vue
--- a/src/views/dashboard/monitor/components/chart.vue
+++ b/src/views/dashboard/monitor/components/chart.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { type ECOption, useEcharts } from '@/hooks'
 import { graphic } from 'echarts'
+import { type ECOption, useEcharts } from '@/hooks'

 const lineOptions = ref<ECOption>({
  tooltip: {
@ -114,7 +114,8 @@ const lineOptions = ref<ECOption>({
  }],
 }) as Ref<ECOption>

-useEcharts('lineRef', lineOptions)
+const lineRef = ref<HTMLElement | null>(null)
+useEcharts(lineRef, lineOptions)
 </script>

 <template>
--- a/src/views/dashboard/monitor/components/chart2.vue
+++ b/src/views/dashboard/monitor/components/chart2.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { type ECOption, useEcharts } from '@/hooks'
 import { graphic } from 'echarts'
+import { type ECOption, useEcharts } from '@/hooks'

 const chartData = [
  { name: '1', value: 300 },
@ -91,7 +91,8 @@ const option = ref<ECOption>({
  }],
 }) as Ref<ECOption>

-useEcharts('lineRef', option)
+const lineRef = ref<HTMLElement | null>(null)
+useEcharts(lineRef, option)
 </script>

 <template>
--- a/src/views/dashboard/monitor/components/chart3.vue
+++ b/src/views/dashboard/monitor/components/chart3.vue
@ -50,7 +50,8 @@ const option = ref<ECOption>({
  },
  ],
 }) as Ref<ECOption>
-useEcharts('lineRef', option)
+const lineRef = ref<HTMLElement | null>(null)
+useEcharts(lineRef, option)
 </script>

 <template>
--- a/src/views/dashboard/workbench/components/chart.vue
+++ b/src/views/dashboard/workbench/components/chart.vue
@ -99,7 +99,8 @@ const lineOptions = ref<ECOption>({
    },
  ],
 }) as Ref<ECOption>
-useEcharts('lineRef', lineOptions)
+const lineRef = ref<HTMLElement | null>(null)
+useEcharts(lineRef, lineOptions)
 </script>

 <template>
--- a/src/views/dashboard/workbench/index.vue
+++ b/src/views/dashboard/workbench/index.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useAuthStore } from '@/store'
 import Chart from './components/chart.vue'
+import { useAuthStore } from '@/store'

 const { userInfo } = useAuthStore()
 </script>
--- a/src/views/demo/cascader/index.vue
+++ b/src/views/demo/cascader/index.vue
@ -33,19 +33,19 @@ function handleValidateClick() {

    <div>
      <n-h2>回调value</n-h2>
-      <pre class="bg-#eee:30">
+      <pre class="bg-#eee">
      {{ cbValue }}
    </pre>
    </div>
    <div>
      <n-h2>回调option</n-h2>
-      <pre class="bg-#eee:30">
+      <pre class="bg-#eee">
      {{ cbOption }}
    </pre>
    </div>
    <div>
      <n-h2>回调pathValues</n-h2>
-      <pre class="bg-#eee:30">
+      <pre class="bg-#eee">
      {{ cbPathValues }}
    </pre>
    </div>
--- a/src/views/demo/dict/index.vue
+++ b/src/views/demo/dict/index.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { fetchDictList } from '@/service'
 import { useDictStore } from '@/store'
+import { fetchDictList } from '@/service'

 const { dict } = useDictStore()

@ -8,7 +8,6 @@ const dictKey = ref('')
 const options = ref()
 const subOptions = ref()
 const currentDict = ref()
-
 async function getAlldict() {
  const { data, isSuccess } = await fetchDictList()
  if (isSuccess) {
@ -23,7 +22,7 @@ async function getAlldict() {
 function changeSelect(v: string) {
  dict(v).then((data) => {
    currentDict.value = data
-    subOptions.value = data.data()
+    subOptions.value = data.list()
  })
 }

@ -33,37 +32,23 @@ onMounted(() => {

 const data = ref()
 async function getDict() {
-  data.value = currentDict.value.data()
-}
-
-async function getEnum() {
-  data.value = currentDict.value.enum()
+  data.value = currentDict.value.list()
 }

 async function getValueMap() {
-  data.value = currentDict.value.valueMap()
+  data.value = currentDict.value.mapByValue()
 }
-
 async function getLabelMap() {
-  data.value = currentDict.value.labelMap()
+  data.value = currentDict.value.mapByLabel()
 }

 const dictValue = ref()

 const dictLabel = computed(() => {
-  if (data.value && data.value[dictValue.value]) {
+  if (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 '--'
+  return ''
 })
 </script>

@ -79,9 +64,6 @@ const enumLabel = computed(() => {
        <n-button @click="getDict">
          获取当前字典数据
        </n-button>
-        <n-button @click="getEnum">
-          获取当前字典枚举
-        </n-button>
        <n-button @click="getValueMap">
          获取当前字典ValueMap
        </n-button>
@ -90,20 +72,14 @@ const enumLabel = computed(() => {
        </n-button>
      </n-flex>

-      <pre class="bg-#eee:30">
+      <pre class="bg-#eee">
          {{ 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-input-number v-model:value="dictValue" />
+        <n-text v-if="data && dictValue" type="info">
+          回显结果 {{ dictLabel }}
        </n-text>
      </n-flex>
    </n-flex>
--- a/src/views/demo/echarts/index.vue
+++ b/src/views/demo/echarts/index.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { type ECOption, useEcharts } from '@/hooks'
 import { graphic } from 'echarts'
+import { type ECOption, useEcharts } from '@/hooks'

 // 饼状图
 const pieOptions = ref<ECOption>({
@ -53,28 +53,9 @@ const pieOptions = ref<ECOption>({
      ],
    },
  ],
-})
-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)
-}
+}) as Ref<ECOption>
+const pieRef = ref<HTMLElement | null>(null)
+useEcharts(pieRef, pieOptions)

 // 折线图
 const lineOptions = ref<ECOption>({
@ -264,8 +245,9 @@ const lineOptions = ref<ECOption>({
      data: [820, 932, 901, 934, 1290, 1330, 1320],
    },
  ],
-})
-useEcharts('lineRef', lineOptions)
+}) as Ref<ECOption>
+const lineRef = ref<HTMLElement | null>(null)
+useEcharts(lineRef, lineOptions)

 // 柱状图
 const barOptions = ref<ECOption>({
@ -404,8 +386,9 @@ const barOptions = ref<ECOption>({
      data: [200, 382, 102, 267, 186, 315, 316],
    },
  ],
-})
-useEcharts('barRef', barOptions)
+}) as Ref<ECOption>
+const barRef = ref<HTMLElement | null>(null)
+useEcharts(barRef, barOptions)

 // 雷达图
 const radarOptions = ref<ECOption>({
@ -497,8 +480,9 @@ const radarOptions = ref<ECOption>({
      ],
    },
  ],
-})
-useEcharts('radarRef', radarOptions)
+}) as Ref<ECOption>
+const radarRef = ref<HTMLElement | null>(null)
+useEcharts(radarRef, radarOptions)
 </script>

 <template>
@ -507,9 +491,6 @@ useEcharts('radarRef', radarOptions)
    :size="16"
  >
    <n-card>
-      <n-button @click="updatePieChart">
-        手动更新图表
-      </n-button>
      <div
        ref="pieRef"
        class="h-400px"
--- a/src/views/demo/fetch/components/DownLoadWithProgress.vue
+++ b/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]
--- a/src/views/demo/fetch/components/TokenExpiration.vue
+++ b/src/views/demo/fetch/components/TokenExpiration.vue
@ -15,7 +15,6 @@ async function expiredToken() {

 <template>
  <n-card title="Token Expiration" size="small">
-    注意观察第二次的请求，token已刷新
    <n-button type="error" @click="expiredToken">
      click
    </n-button>
--- a/src/views/demo/fetch/components/UseRequest.vue
+++ b/src/views/demo/fetch/components/UseRequest.vue
@ -1,10 +1,9 @@
 <script setup lang="ts">
+import { useRequest } from 'alova'
 import {
  fetchGet,
 } from '@/service'

-import { useRequest } from 'alova/client'
-
 const emit = defineEmits<{
  update: [data: any] // 具名元组语法
 }>()
--- a/src/views/demo/fetch/index.vue
+++ b/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 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 Transform from './components/Transform.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:30">
+        <pre class="bg-#eee">
      {{ msg }}
      </pre>
      </template>
--- a/src/views/demo/icons/index.vue
+++ b/src/views/demo/icons/index.vue
@ -24,9 +24,6 @@
      <div>
        大大大：<svg-icons-cool class="text-4em" />
      </div>
-      <div>
-        nova-icon组件加载：<nova-icon icon="local:cool" />
-      </div>
    </n-card>
  </n-space>
 </template>
--- a/src/views/demo/list/draggableList/index.vue
+++ b/src/views/demo/list/draggableList/index.vue
@ -1,170 +0,0 @@
-<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>
--- a/src/views/demo/map/index.vue
+++ b/src/views/demo/map/index.vue
@ -6,20 +6,20 @@ import AMap from './components/AMap.vue'
 import BMap from './components/BMap.vue'

 defineOptions({
-  name: 'map',
+  name: 'PluginMap',
 })

 const maps = [
-  {
-    id: 'BMap',
-    label: '百度地图',
-    component: BMap,
-  },
  {
    id: 'AMap',
    label: '高德地图',
    component: AMap,
  },
+  {
+    id: 'BMap',
+    label: '百度地图',
+    component: BMap,
+  },
 ]
 </script>

--- a/src/views/demo/multi/multi2/detail/index.vue
+++ b/src/views/demo/multi/multi2/detail/index.vue
@ -1,25 +0,0 @@
-<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>
--- a/src/views/demo/multi/multi2/index.vue
+++ b/src/views/demo/multi/multi2/index.vue
@ -1,20 +0,0 @@
-<script setup lang="ts">
-const router = useRouter()
-</script>
-
-<template>
-  <n-card class="h-130vh">
-    这个页面包含了一个不在侧边菜单的详情页面
-    <n-button @click="router.push({ path: '/multi/multi2/detail', query: { id: 1 } })">
-      跳转详情子页1
-    </n-button>
-    <n-button @click="router.push({ path: '/multi/multi2/detail', query: { id: 2 } })">
-      跳转详情子页2
-    </n-button>
-    <n-button @click="router.push({ path: '/multi/multi2/detail', query: { id: 3 } })">
-      跳转详情子页3
-    </n-button>
-  </n-card>
-</template>
-
-<style scoped></style>
--- a/src/views/demo/documents/vite/index.vue
+++ b/src/views/demo/documents/vite/index.vue
--- a/src/views/demo/documents/vue/index.vue
+++ b/src/views/demo/documents/vue/index.vue
--- a/src/views/demo/list/cardList/index.vue
+++ b/src/views/demo/list/cardList/index.vue
--- a/src/views/demo/list/commonList/components/TableModal.vue
+++ b/src/views/demo/list/commonList/components/TableModal.vue
@ -1,31 +1,33 @@
 <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 visible
+    return props.visible
  },
  set(visible) {
    closeModal(visible)
@ -40,7 +42,7 @@ const title = computed(() => {
    add: '添加用户',
    edit: '编辑用户',
  }
-  return titles[type]
+  return titles[props.type]
 })

 function UpdateFormModelByModalType() {
@ -49,14 +51,14 @@ function UpdateFormModelByModalType() {
      formModel.value = { ...defaultFormModal }
    },
    edit: () => {
-      if (modalData)
-        formModel.value = { ...modalData }
+      if (props.modalData)
+        formModel.value = { ...props.modalData }
    },
  }
-  handlers[type]()
+  handlers[props.type]()
 }
 watch(
-  () => visible,
+  () => props.visible,
  (newValue) => {
    if (newValue)
      UpdateFormModelByModalType()
@ -79,26 +81,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.userName" />
+          <n-input v-model:value="formModel.name" />
        </n-form-item-grid-item>
        <n-form-item-grid-item :span="12" label="年龄" path="age">
-          <n-input-number v-model:value="formModel.gender" />
+          <n-input-number v-model:value="formModel.age" />
        </n-form-item-grid-item>
        <n-form-item-grid-item :span="12" label="性别" path="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-input v-model:value="formModel.gender" />
        </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>
--- a/src/views/demo/list/commonList/index.vue
+++ b/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.User> = [
+const columns: DataTableColumns<Entity.DemoList> = [
  {
    title: '姓名',
    align: 'center',
-    key: 'userName',
+    key: 'name',
  },
  {
    title: '年龄',
@ -55,18 +55,34 @@ const columns: DataTableColumns<Entity.User> = [
    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: 'status',
+    key: 'disabled',
    render: (row) => {
      return (
        <NSwitch
-          value={row.status}
-          checked-value={1}
-          unchecked-value={0}
-          onUpdateValue={(value: 0 | 1) =>
-            handleUpdateDisabled(value, row.id!)}
+          value={row.disabled}
+          onUpdateValue={disabled =>
+            handleUpdateDisabled(disabled, row.id)}
        >
          {{ checked: () => '启用', unchecked: () => '禁用' }}
        </NSwitch>
@ -98,11 +114,11 @@ const columns: DataTableColumns<Entity.User> = [
  },
 ]

-const listData = ref<Entity.User[]>([])
-function handleUpdateDisabled(value: 0 | 1, id: number) {
+const listData = ref<Entity.DemoList[]>([])
+function handleUpdateDisabled(disabled: boolean, id: number) {
  const index = listData.value.findIndex(item => item.id === id)
  if (index > -1)
-    listData.value[index].status = value
+    listData.value[index].disabled = disabled
 }

 onMounted(() => {
@ -110,7 +126,7 @@ onMounted(() => {
 })
 async function getUserList() {
  startLoading()
-  await fetchUserPage().then((res: any) => {
+  await fetchUserList().then((res: any) => {
    listData.value = res.data.list
    endLoading()
  })
@ -128,12 +144,12 @@ function setModalType(type: ModalType) {
  modalType.value = type
 }

-const editData = ref<Entity.User | null>(null)
-function setEditData(data: Entity.User | null) {
+const editData = ref<Entity.DemoList | null>(null)
+function setEditData(data: Entity.DemoList | null) {
  editData.value = data
 }

-function handleEditTable(row: Entity.User) {
+function handleEditTable(row: Entity.DemoList) {
  setEditData(row)
  setModalType('edit')
  openModal()
--- a/src/views/login/components/Login/index.vue
+++ b/src/views/login/components/Login/index.vue
@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { FormInst } from 'naive-ui'
-import { useAuthStore } from '@/store'
 import { local } from '@/utils'
+import { useAuthStore } from '@/store'

 const emit = defineEmits(['update:modelValue'])

--- a/src/views/demo/permission/justSuper/index.vue
+++ b/src/views/demo/permission/justSuper/index.vue
--- a/src/views/demo/permission/permission/index.vue
+++ b/src/views/demo/permission/permission/index.vue
@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { usePermission } from '@/hooks'
 import { useAuthStore } from '@/store'
+import { usePermission } from '@/hooks'

 const authStore = useAuthStore()
 const { hasPermission } = usePermission()
-const { role } = authStore.userInfo
+const { role } = authStore.userInfo!

 const roleList: Entity.RoleType[] = ['super', 'admin', 'user']

@ -23,7 +23,7 @@ function toggleUserRole(role: Entity.RoleType) {
    </n-button-group>
    <n-h2>v-permission 指令用法</n-h2>
    <n-space>
-      <n-button v-permission="['super']">
+      <n-button v-permission="'super'">
        仅super可见
      </n-button>
      <n-button v-permission="['admin']">
@ -33,10 +33,10 @@ function toggleUserRole(role: Entity.RoleType) {

    <n-h2>usePermission 函数用法</n-h2>
    <n-space>
-      <n-button v-if="hasPermission(['super'])">
+      <n-button v-if="hasPermission('super')">
        super可见
      </n-button>
-      <n-button v-if="hasPermission(['admin'])">
+      <n-button v-if="hasPermission('admin')">
        admin可见
      </n-button>
      <n-button v-if="hasPermission(['admin', 'user'])">
@ -45,3 +45,5 @@ function toggleUserRole(role: Entity.RoleType) {
    </n-space>
  </n-card>
 </template>
+
+<style scoped></style>
--- a/src/views/setting/account/components/TableModal.vue
+++ b/src/views/setting/account/components/TableModal.vue
@ -6,9 +6,9 @@ interface Props {
  modalName?: string
 }

-const {
-  modalName = '',
-} = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  modalName: '',
+})

 const emit = defineEmits<{
  open: []
@ -36,7 +36,7 @@ const modalTitle = computed(() => {
    view: '查看',
    edit: '编辑',
  }
-  return `${titleMap[modalType.value]}${modalName}`
+  return `${titleMap[modalType.value]}${props.modalName}`
 })

 async function openModal(type: ModalType = 'add', data: any) {
@ -108,7 +108,7 @@ const rules = {
  },
 }

-const options = ref()
+const options = ref<Entity.Role[]>([])
 async function getRoleList() {
  const { data } = await fetchRoleList()
  options.value = data
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`custom: ['https://cdn.jsdelivr.net/gh/chansee97/static/sponsor-wechat.png', 'https://cdn.jsdelivr.net/gh/chansee97/static/sponsor-alipay.png']`