release: update 3.5.0

chore: update
feat: 添加cssnano，打包时压缩css体积
2025-11-03 13:44:47 +08:00 · 2022-09-10 21:44:17 +08:00 · 2022-09-09 00:02:15 +08:00 · 2022-09-08 17:23:48 +08:00 · 2022-09-07 21:59:03 +08:00 · 2022-09-07 16:55:49 +08:00
104 changed files with 2003 additions and 2005 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -2,3 +2,9 @@ public
 dist
 *.d.ts
 package.json
+.eslintrc.js
+.prettierrc.js
+commitlint.config.js
+postcss.config.js
+tailwind.config.js
+stylelint.config.js
--- a/.github/workflows/gitee.yml
+++ b/.github/workflows/gitee.yml
@@ -0,0 +1,39 @@
+name: Build and Deploy
+permissions:
+  contents: write
+on:
+  push:
+    branches:
+      - gitee
+jobs:
+  deploy:
+    concurrency: ci-${{ github.ref }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: "16"
+          registry-url: https://registry.npmjs.com/
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+
+      - name: Deploy 🔧
+        run: |
+          pnpm install
+          sed -i "s#VITE_PUBLIC_PATH = /#VITE_PUBLIC_PATH = /vue-pure-admin/#g" $(pwd)/.env.production
+          pnpm build
+          cd dist
+          touch README.md .nojekyll
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: dist
+          clean: true
--- a/.husky/lintstagedrc.js
+++ b/.husky/lintstagedrc.js
@@ -1,6 +1,6 @@
 module.exports = {
  "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
-  "{!(package)*.json,.!(browserslist)*rc}": ["prettier --write--parser json"],
+  "{!(package)*.json}": ["prettier --write--parser json"],
  "package.json": ["prettier --write"],
  "*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],
  "*.{vue,css,scss,postcss,less}": ["stylelint --fix", "prettier --write"],
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1,3 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
+shell-emulator=true
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -3,13 +3,13 @@
    "vscode-icons-team.vscode-icons",
    "davidanson.vscode-markdownlint",
    "stylelint.vscode-stylelint",
+    "bradlc.vscode-tailwindcss",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "lokalise.i18n-ally",
    "mikestead.dotenv",
    "eamodio.gitlens",
    "antfu.iconify",
-    "antfu.unocss",
    "Vue.volar"
  ]
 }
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,6 +6,7 @@
  },
  "editor.tabSize": 2,
  "editor.formatOnPaste": true,
+  "editor.guides.bracketPairs": "active",
  "files.autoSave": "afterDelay",
  "git.confirmSync": false,
  "workbench.startupEditor": "newUntitledFile",
--- a/CHANGELOG.en_US.md
+++ b/CHANGELOG.en_US.md
@@ -1,3 +1,45 @@
+# 3.5.0 (2022-9-10)
+
+### 🎫 Feat
+
+- Add `cssnano` to compress the size of `css` when packaging
+- Add `element-plus` seamless scrolling `Table` page demo
+- Open `vscode` bracket pair guide
+
+### ✔️ refactor
+
+- Replace `unocss` with `tailwindcss`, add `tailwindcss` [documentation](https://xiaoxian521.github.io/pure-admin-doc/pages/39156f/)
+
+### 🐞 Bug fixes
+
+- `token` expires, refresh the infinite loop
+
+### 🍏 Perf
+
+- When resetting the route, clear the cached page
+
+# 3.4.6 (2022-8-23)
+
+### 🐞 Bug fixes
+
+- `process` is not defined in path
+- Fixed an error when dynamic routing `children` is an empty array
+- Fixed `iframe` loading failure
+
+# 3.4.5 (2022-8-22)
+
+### 🐞 Bug fixes
+
+- Fix local responsive storage object setting issue
+
+# 3.4.0 (2022-8-22)
+
+### 🍏 Perf
+
+- Optimized routing
+- Optimized for mobile compatibility
+- Optimized routing parameters (`query`, `params` way to refresh the page does not need to open the tab page cache, the parameters can be retained on the `url` and `tab page`)
+
 # 3.3.5 (2022-8-19)

 ### 🎫 Feat
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,45 @@
+# 3.5.0 (2022-9-10)
+
+### 🎫 Feat
+
+- Add `cssnano` to compress the size of `css` when packaging
+- Add `element-plus` seamless scrolling `Table` page demo
+- Open `vscode` bracket pair guide
+
+### ✔️ refactor
+
+- Replace `unocss` with `tailwindcss`, add `tailwindcss` [documentation](https://xiaoxian521.github.io/pure-admin-doc/pages/39156f/)
+
+### 🐞 Bug fixes
+
+- `token` expires, refresh the infinite loop
+
+### 🍏 Perf
+
+- When resetting the route, clear the cached page
+
+# 3.4.6 (2022-8-23)
+
+### 🐞 Bug fixes
+
+- `process` is not defined in path
+- Fixed an error when dynamic routing `children` is an empty array
+- Fixed `iframe` loading failure
+
+# 3.4.5 (2022-8-22)
+
+### 🐞 Bug fixes
+
+- Fix local responsive storage object setting issue
+
+# 3.4.0 (2022-8-22)
+
+### 🍏 Perf
+
+- Optimized routing
+- Optimized for mobile compatibility
+- Optimized routing parameters (`query`, `params` way to refresh the page does not need to open the tab page cache, the parameters can be retained on the `url` and `tab page`)
+
 # 3.3.5 (2022-8-19)

 ### 🎫 Feat
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,3 +1,45 @@
+# 3.5.0 (2022-9-10)
+
+### 🎫 Feat
+
+- 添加 `cssnano` ，打包时压缩 `css` 体积
+- 添加 `element-plus` 无缝滚动 `Table` 页面 demo
+- 开启 `vscode` 括号对指南
+
+### ✔️ refactor
+
+- 使用 `tailwindcss` 替换 `unocss`，新增 `tailwindcss` [使用文档](http://yiming_chang.gitee.io/pure-admin-doc/pages/39156f/)
+
+### 🐞 Bug fixes
+
+- `token` 过期，刷新死循环
+
+### 🍏 Perf
+
+- 重置路由时，清空缓存页面
+
+# 3.4.6 (2022-8-23)
+
+### 🐞 Bug fixes
+
+- `process` is not defined in path
+- 修复动态路由`children`为空数组时报错
+- 修复`iframe`加载失败
+
+# 3.4.5 (2022-8-22)
+
+### 🐞 Bug fixes
+
+- 修复本地响应式存储对象设置问题
+
+# 3.4.0 (2022-8-22)
+
+### 🍏 Perf
+
+- 优化路由
+- 优化移动端兼容性
+- 优化路由传参（`query`、`params` 方式刷新页面不需要再开启标签页缓存也能保留参数在`url`和`标签页`上）
+
 # 3.3.5 (2022-8-19)

 ### 🎫 Feat
@@ -7,7 +49,7 @@
 - 将平台的大部分工具以及 hooks 都集中到[@pureadmin/utils](https://pure-admin-utils-docs.vercel.app/)，并删除集中到这个库里的代码，减少平台体积
 - 添加[unplugin-vue-define-options](https://www.npmjs.com/package/unplugin-vue-define-options)插件，页面可直接写 `defineOptions({name: 自定义名称})`
 - 添加项目文件、语言分析工具 [cloc](https://www.npmjs.com/package/cloc)
- 添加登陆页国际化
+- 添加登录页国际化
 - 添加完整路由配置表类型声明
 - 添加虚拟列表页面 demo
 - 添加 `PDF` 预览页面 demo
--- a/README.en-US.md
+++ b/README.en-US.md
@@ -17,7 +17,9 @@ vue-pure-admin is a free and open source middle and back-end template. Using the

 ## Docs

- [Click Watch Docs](https://pure-admin-doc.vercel.app)
+- [Click me to view the domestic documentation site](http://yiming_chang.gitee.io/pure-admin-doc)
+- [Click me to view foreign document site 1](https://xiaoxian521.github.io/pure-admin-doc)
+- [Click me to view foreign document site 2](https://pure-admin-doc.vercel.app)

 ## Thin

@@ -29,7 +31,9 @@ vue-pure-admin is a free and open source middle and back-end template. Using the

 ## Preview

- [vue-pure-admin](https://vue-pure-admin.vercel.app)
+- [Click me to view the domestic preview station](http://yiming_chang.gitee.io/vue-pure-admin)
+- [Click me to view foreign preview site 1](https://xiaoxian521.github.io/vue-pure-admin)
+- [Click me to view foreign preview station 2](https://vue-pure-admin.vercel.app)

 - PC
 <p align="center">
--- a/README.md
+++ b/README.md
@@ -17,7 +17,9 @@ vue-pure-admin 是一个免费开源的中后台模版。使用了最新的`vue3

 ## 配套文档

- [点我查看文档](https://pure-admin-doc.vercel.app)
+- [点我查看国内文档站](http://yiming_chang.gitee.io/pure-admin-doc)
+- [点我查看国外文档站 1](https://xiaoxian521.github.io/pure-admin-doc)
+- [点我查看国外文档站 2](https://pure-admin-doc.vercel.app)

 ## 精简版

@@ -29,7 +31,9 @@ vue-pure-admin 是一个免费开源的中后台模版。使用了最新的`vue3

 ## 预览

- [vue-pure-admin](https://vue-pure-admin.vercel.app)
+- [点我查看国内预览站](http://yiming_chang.gitee.io/vue-pure-admin)
+- [点我查看国外预览站 1](https://xiaoxian521.github.io/vue-pure-admin)
+- [点我查看国外预览站 2](https://vue-pure-admin.vercel.app)

 - PC 端
 <p align="center">
@@ -141,7 +145,7 @@ pnpm build

 一群已满，下面是二群，群里严禁`黄`、`赌`、`毒`、`vpn`等违法行为！

-<img src="https://pure-admin-doc.vercel.app/img/support/qq.png" width="150px" height="225px" />
+<img src="http://yiming_chang.gitee.io/pure-admin-doc/img/support/qq.png" width="150px" height="225px" />

 ## 许可证

--- a/build/plugins.ts
+++ b/build/plugins.ts
@@ -1,5 +1,4 @@
 import { resolve } from "path";
-import Unocss from "unocss/vite";
 import vue from "@vitejs/plugin-vue";
 import { viteBuildInfo } from "./info";
 import svgLoader from "vite-svg-loader";
@@ -26,7 +25,6 @@ export function getPluginsList(command, VITE_LEGACY) {
    }),
    // jsx、tsx语法支持
    vueJsx(),
-    Unocss(),
    DefineOptions(),
    // 线上环境删除console
    removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),
--- a/index.html
+++ b/index.html
@@ -2,9 +2,14 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+    />
    <title>vue-pure-admin</title>
+    <link rel="icon" href="/favicon.ico" />
    <script>
      window.process = {};
    </script>
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -86,6 +86,7 @@ menus:
  hsVirtualList: Virtual List
  hsPdf: PDF Preview
  hsExecl: Export Excel
+  hsInfiniteScroll: Table Infinite Scroll
 status:
  hsLoad: Loading...
 login:
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -86,6 +86,7 @@ menus:
  hsVirtualList: 虚拟列表
  hsPdf: PDF预览
  hsExecl: 导出Excel
+  hsInfiniteScroll: 表格无限滚动
 status:
  hsLoad: 加载中...
 login:
--- a/mock/asyncRoutes.ts
+++ b/mock/asyncRoutes.ts
@@ -4,8 +4,6 @@ import { MockMethod } from "vite-plugin-mock";
 // http://mockjs.com/examples.html#Object
 const systemRouter = {
  path: "/system",
-  name: "User",
-  redirect: "/system/user/index",
  meta: {
    icon: "setting",
    title: "menus.hssysManagement",
@@ -51,8 +49,6 @@ const systemRouter = {

 const permissionRouter = {
  path: "/permission",
-  redirect: "/permission/page/index",
-  name: "PermissionPage",
  meta: {
    title: "menus.permission",
    icon: "lollipop",
@@ -79,8 +75,6 @@ const permissionRouter = {

 const frameRouter = {
  path: "/iframe",
-  name: "FramePure",
-  redirect: "/iframe/pure",
  meta: {
    icon: "monitor",
    title: "menus.hsExternalPage",
@@ -92,12 +86,12 @@ const frameRouter = {
      name: "FramePure",
      meta: {
        title: "menus.hsPureDocument",
-        frameSrc: "https://pure-admin-doc.vercel.app"
+        frameSrc: "http://yiming_chang.gitee.io/pure-admin-doc"
      }
    },
    {
      path: "/external",
-      name: "https://pure-admin-doc.vercel.app",
+      name: "http://yiming_chang.gitee.io/pure-admin-doc",
      meta: {
        title: "menus.externalLink"
      }
@@ -115,8 +109,6 @@ const frameRouter = {

 const tabsRouter = {
  path: "/tabs",
-  redirect: "/tabs/index",
-  name: "Tabs",
  meta: {
    icon: "IF-team-icontabs",
    title: "menus.hstabs",
@@ -131,13 +123,19 @@ const tabsRouter = {
      }
    },
    {
-      path: "/tabs/detail",
-      name: "TabDetail",
+      path: "/tabs/query-detail",
+      name: "TabQueryDetail",
      meta: {
-        title: "",
-        showLink: false,
-        dynamicLevel: 3,
-        refreshRedirect: "/tabs/index"
+        // 不在menu菜单中显示
+        showLink: false
+      }
+    },
+    {
+      path: "/tabs/params-detail/:id",
+      component: "params-detail",
+      name: "TabParamsDetail",
+      meta: {
+        showLink: false
      }
    }
  ]
--- a/package.json
+++ b/package.json
@@ -1,20 +1,20 @@
 {
  "name": "vue-pure-admin",
-  "version": "3.3.5",
+  "version": "3.5.0",
  "private": true,
  "scripts": {
-    "dev": "cross-env --max_old_space_size=4096 vite",
+    "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
    "serve": "pnpm dev",
-    "build": "rimraf dist && cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build",
-    "build:staging": "rimraf dist && cross-env vite build --mode staging",
-    "report": "rimraf dist && cross-env vite build",
+    "build": "rimraf dist && NODE_OPTIONS=--max-old-space-size=8192 vite build",
+    "build:staging": "rimraf dist && vite build --mode staging",
+    "report": "rimraf dist && vite build",
    "preview": "vite preview",
    "preview:build": "pnpm build && vite preview",
    "typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck",
-    "cloc": "cross-env --max_old_space_size=4096 cloc . --exclude-dir=node_modules --exclude-lang=YAML",
+    "cloc": "NODE_OPTIONS=--max-old-space-size=4096 cloc . --exclude-dir=node_modules --exclude-lang=YAML",
    "clean:cache": "rm -rf node_modules && rm -rf .eslintcache && pnpm install",
-    "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
-    "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
+    "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix",
+    "lint:prettier": "prettier --write  \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
    "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,css,scss,postcss,less}\" --cache --cache-location node_modules/.cache/stylelint/",
    "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
    "lint:pretty": "pretty-quick --staged",
@@ -36,20 +36,20 @@
    "@pureadmin/descriptions": "^1.1.0",
    "@pureadmin/table": "^1.2.0",
    "@pureadmin/utils": "^0.1.1",
-    "@vueuse/core": "^9.1.0",
+    "@vueuse/core": "^9.1.1",
    "@vueuse/motion": "^2.0.0-beta.12",
-    "@vueuse/shared": "^9.1.0",
+    "@vueuse/shared": "^9.1.1",
    "@wangeditor/editor": "^5.1.14",
    "@wangeditor/editor-for-vue": "^5.1.12",
    "animate.css": "^4.1.1",
    "axios": "^0.27.2",
    "china-area-data": "^5.0.1",
    "cropperjs": "^1.5.12",
-    "css-color-function": "^1.3.3",
    "dayjs": "^1.11.4",
    "driver.js": "^0.9.8",
    "echarts": "^5.3.3",
-    "element-plus": "^2.2.13",
+    "el-table-infinite-scroll": "^3.0.1",
+    "element-plus": "^2.2.16",
    "element-resize-detector": "^1.2.3",
    "js-cookie": "^3.0.1",
    "jsbarcode": "^3.11.5",
@@ -60,25 +60,24 @@
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
    "path": "^0.12.7",
-    "pinia": "^2.0.19",
+    "pinia": "^2.0.21",
    "qrcode": "^1.5.1",
    "qs": "^6.11.0",
    "resize-observer-polyfill": "^1.5.1",
    "responsive-storage": "^2.1.0",
-    "rgb-hex": "^4.0.0",
    "sortablejs": "^1.15.0",
    "swiper": "^8.3.2",
    "v-contextmenu": "3.0.0",
-    "vue": "^3.2.37",
+    "vue": "^3.2.39",
    "vue-form-create2": "^1.2.8",
    "vue-i18n": "^9.2.2",
    "vue-json-pretty": "^2.1.1",
    "vue-pdf-embed": "^1.1.4",
-    "vue-router": "^4.1.3",
+    "vue-router": "^4.1.5",
    "vue-types": "^4.2.1",
    "vue-virtual-scroller": "^2.0.0-alpha.1",
    "vuedraggable": "^4.1.0",
-    "vxe-table": "^4.3.0-beta.5",
+    "vxe-table": "^4.3.2",
    "xe-utils": "^3.5.6",
    "xgplayer": "^2.31.7",
    "xlsx": "^0.18.5"
@@ -110,15 +109,15 @@
    "@types/sortablejs": "^1.13.0",
    "@typescript-eslint/eslint-plugin": "^5.10.2",
    "@typescript-eslint/parser": "^5.10.2",
-    "@vitejs/plugin-legacy": "^2.0.0",
-    "@vitejs/plugin-vue": "^3.0.1",
-    "@vitejs/plugin-vue-jsx": "^2.0.0",
+    "@vitejs/plugin-legacy": "^2.1.0",
+    "@vitejs/plugin-vue": "^3.1.0",
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
-    "@vue/runtime-core": "^3.2.37",
+    "@vue/runtime-core": "^3.2.39",
    "autoprefixer": "^10.4.8",
    "cloc": "^2.10.0",
-    "cross-env": "7.0.3",
+    "cssnano": "^5.1.13",
    "eslint": "^8.8.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.4.1",
@@ -128,12 +127,12 @@
    "picocolors": "^1.0.0",
    "postcss": "^8.4.16",
    "postcss-html": "^1.5.0",
-    "postcss-import": "^14.1.0",
+    "postcss-import": "^15.0.0",
    "postcss-scss": "^4.0.4",
    "prettier": "^2.5.1",
    "pretty-quick": "3.1.1",
    "rimraf": "3.0.2",
-    "rollup-plugin-visualizer": "^5.7.1",
+    "rollup-plugin-visualizer": "^5.8.1",
    "sass": "^1.53.0",
    "sass-loader": "^13.0.2",
    "stylelint": "^14.3.0",
@@ -142,21 +141,21 @@
    "stylelint-config-recommended": "^6.0.0",
    "stylelint-config-standard": "^24.0.0",
    "stylelint-order": "^5.0.0",
+    "tailwindcss": "^3.1.8",
+    "terser": "^5.15.0",
    "typescript": "^4.7.4",
-    "unocss": "^0.45.8",
-    "unplugin-vue-define-options": "^0.7.3",
-    "vite": "^3.0.8",
+    "unplugin-vue-define-options": "0.7.3",
+    "vite": "^3.1.0",
    "vite-plugin-mock": "^2.9.6",
    "vite-plugin-remove-console": "^1.1.0",
    "vite-svg-loader": "^3.4.0",
    "vue-eslint-parser": "^8.2.0",
-    "vue-tsc": "^0.40.1"
+    "vue-tsc": "^0.40.7"
  },
  "pnpm": {
    "peerDependencyRules": {
      "ignoreMissing": [
        "rollup",
-        "terser",
        "webpack"
      ]
    }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,3 +1,8 @@
 module.exports = {
-  plugins: [require("autoprefixer"), require("postcss-import")]
+  plugins: {
+    "postcss-import": {},
+    tailwindcss: {},
+    autoprefixer: {},
+    ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {})
+  }
 };
--- a/public/serverConfig.json
+++ b/public/serverConfig.json
@@ -1,5 +1,5 @@
 {
-  "Version": "3.3.5",
+  "Version": "3.5.0",
  "Title": "PureAdmin",
  "FixedHeader": true,
  "HiddenSideBar": false,
--- a/src/components/ReFlowChart/src/Control.vue
+++ b/src/components/ReFlowChart/src/Control.vue
@@ -102,7 +102,7 @@ onMounted(() => {
        v-for="(item, key) in titleLists"
        :key="key"
        :title="item.text"
-        class="dark:color-bg_color"
+        class="dark:text-bg_color"
        @mouseenter.prevent="onEnter(key)"
        @mouseleave.prevent="focusIndex = -1"
      >
--- a/src/components/ReFlowChart/src/NodePanel.vue
+++ b/src/components/ReFlowChart/src/NodePanel.vue
@@ -35,7 +35,7 @@ const nodeDragNode = item => {
  <!-- 左侧bpmn元素选择器 -->
  <div class="node-panel">
    <div
-      class="node-item dark:color-bg_color"
+      class="node-item dark:text-bg_color"
      v-for="item in props.nodeList"
      :key="item.text"
      @mousedown="nodeDragNode(item)"
--- a/src/components/ReIcon/src/Select.vue
+++ b/src/components/ReIcon/src/Select.vue
@@ -118,7 +118,7 @@ watch(
 </script>

 <template>
-  <div class="selector w-350px">
+  <div class="selector w-[350px]">
    <el-input v-model="inputValue" disabled>
      <template #append>
        <el-popover
@@ -132,7 +132,7 @@ watch(
        >
          <template #reference>
            <div
-              class="w-40px h-32px cursor-pointer flex justify-center items-center"
+              class="w-[40px] h-[32px] cursor-pointer flex justify-center items-center"
              @click="visible = !visible"
            >
              <IconifyIconOnline :icon="currentActiveType + icon" />
@@ -161,7 +161,7 @@ watch(
                    v-for="(item, key) in pageList"
                    :key="key"
                    :title="item"
-                    class="icon-item p-2 w-1/10 cursor-pointer mr-2 mt-1 flex justify-center items-center border border-solid"
+                    class="icon-item p-2 w-[1/10] cursor-pointer mr-2 mt-1 flex justify-center items-center border border-solid"
                    :style="iconItemStyle(item)"
                    @click="onChangeIcon(item)"
                  >
--- a/src/components/ReQrcode/src/index.tsx
+++ b/src/components/ReQrcode/src/index.tsx
@@ -78,7 +78,7 @@ export default defineComponent({
        const _width: number = await getOriginWidth(unref(renderText), options);
        options.scale =
          props.width === 0 ? undefined : (props.width / _width) * 4;
-        const canvasRef: HTMLCanvasElement = await toCanvas(
+        const canvasRef: any = await toCanvas(
          unref(wrapRef) as HTMLCanvasElement,
          unref(renderText),
          options
--- a/src/components/ReSeamlessScroll/src/index.vue
+++ b/src/components/ReSeamlessScroll/src/index.vue
@@ -166,7 +166,7 @@ let autoPlay = computed(() => {
 });

 let scrollSwitch = computed(() => {
-  // 从 props 解构出来的 属性 不再具有相应性.
+  // 从 props 解构出来的 属性 不再具有响应性.
  return (props.data as any).length >= unref(options).limitMoveNum;
 });

@@ -428,7 +428,7 @@ function scrollInitMove() {
      if (timer) clearTimeout(timer);
      copyHtml.value = unref(slotList).innerHTML;
      setTimeout(() => {
-        realBoxHeight.value = unref(realBox).offsetHeight;
+        realBoxHeight.value = unref(realBox)?.offsetHeight;
        scrollMove();
      }, 0);
    } else {
@@ -454,7 +454,6 @@ function scrollStopMove() {

 // 鼠标滚轮事件
 function wheel(e) {
-  e.preventDefault();
  if (
    unref(options).direction === "left" ||
    unref(options).direction === "right"
@@ -517,10 +516,10 @@ defineExpose({
      :style="pos"
      @mouseenter="enter"
      @mouseleave="leave"
-      @touchstart="touchStart"
-      @touchmove="touchMove"
+      @touchstart.passive="touchStart"
+      @touchmove.passive="touchMove"
      @touchend="touchEnd"
-      @mousewheel="wheel"
+      @mousewheel.passive="wheel"
    >
      <div :ref="'slotList' + classOption['key']" :style="float">
        <slot />
--- a/src/components/ReTable/src/bar.tsx
+++ b/src/components/ReTable/src/bar.tsx
@@ -117,12 +117,12 @@ export default defineComponent({
      <>
        <div
          {...attrs}
-          class="w-99/100 mt-6 p-2 bg-white dark:bg-dark"
+          class="w-[99/100] mt-6 p-2 bg-white dark:bg-dark"
          v-loading={props.loading}
          element-loading-svg={loadingSvg}
          element-loading-svg-view-box="-10, -10, 50, 50"
        >
-          <div class="flex justify-between w-full h-60px p-4">
+          <div class="flex justify-between w-full h-[60px] p-4">
            <p class="font-bold truncate">{props.title}</p>
            <div class="flex items-center justify-around">
              <div class="flex mr-4">{slots?.buttons()}</div>
--- a/src/layout/components/navbar.vue
+++ b/src/layout/components/navbar.vue
@@ -55,13 +55,13 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
      <!-- 国际化 -->
      <el-dropdown id="header-translation" trigger="click">
        <globalization
-          class="navbar-bg-hover w-40px h-48px p-11px cursor-pointer outline-none"
+          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
        />
        <template #dropdown>
          <el-dropdown-menu class="translation">
            <el-dropdown-item
              :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
              @click="translationCh"
            >
              <IconifyIconOffline
@@ -73,7 +73,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
            </el-dropdown-item>
            <el-dropdown-item
              :style="getDropdownItemStyle(locale, 'en')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
              @click="translationEn"
            >
              <span class="check-en" v-show="locale === 'en'">
@@ -88,7 +88,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
      <el-dropdown trigger="click">
        <span class="el-dropdown-link navbar-bg-hover">
          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
-          <p v-if="username" class="dark:color-white">{{ username }}</p>
+          <p v-if="username" class="dark:text-white">{{ username }}</p>
        </span>
        <template #dropdown>
          <el-dropdown-menu class="logout">
--- a/src/layout/components/notice/noticeItem.vue
+++ b/src/layout/components/notice/noticeItem.vue
@@ -45,7 +45,7 @@ function hoverDescription(event, description) {

 <template>
  <div
-    class="notice-container border-b-1 border-[#f0f0f0] dark:border-[#303030]"
+    class="notice-container border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]"
  >
    <el-avatar
      v-if="props.noticeItem.avatar"
@@ -54,7 +54,7 @@ function hoverDescription(event, description) {
      class="notice-container-avatar"
    />
    <div class="notice-container-text">
-      <div class="notice-text-title color-[#000000d9] dark:color-white">
+      <div class="notice-text-title text-[#000000d9] dark:text-white">
        <el-tooltip
          popper-class="notice-title-popper"
          :disabled="!titleTooltip"
@@ -93,7 +93,7 @@ function hoverDescription(event, description) {
          {{ props.noticeItem.description }}
        </div>
      </el-tooltip>
-      <div class="notice-text-datetime color-[#00000073] dark:color-white">
+      <div class="notice-text-datetime text-[#00000073] dark:text-white">
        {{ props.noticeItem.datetime }}
      </div>
    </div>
--- a/src/layout/components/panel/index.vue
+++ b/src/layout/components/panel/index.vue
@@ -21,12 +21,14 @@ emitter.on("openPanel", () => {
    <div ref="target" class="right-panel bg-white dark:bg-dark">
      <div class="right-panel-items">
        <div class="project-configuration">
-          <h3>项目配置</h3>
+          <h3 class="dark:text-white">项目配置</h3>
          <el-icon title="关闭配置" class="el-icon-close" @click="show = !show">
            <IconifyIconOffline icon="close" />
          </el-icon>
        </div>
-        <div class="border-b-1 border-[#dcdfe6] dark:border-[#303030]" />
+        <div
+          class="border-b-[1px] border-solid border-[#dcdfe6] dark:border-[#303030]"
+        />
        <slot />
      </div>
    </div>
--- a/src/layout/components/screenfull/index.vue
+++ b/src/layout/components/screenfull/index.vue
@@ -8,7 +8,7 @@ const { isFullscreen, toggle } = useFullscreen();

 <template>
  <div
-    class="screen-full w-36px h-48px flex-ac cursor-pointer navbar-bg-hover"
+    class="screen-full w-[36px] h-[48px] flex-ac cursor-pointer navbar-bg-hover"
    @click="toggle"
  >
    <FontIcon
--- a/src/layout/components/search/components/SearchFooter.vue
+++ b/src/layout/components/search/components/SearchFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="search-footer color-[#333] dark:color-white">
+  <div class="search-footer text-[#333] dark:text-white">
    <span class="search-footer-item">
      <enterOutlined class="icon" />
      确认
--- a/src/layout/components/search/index.vue
+++ b/src/layout/components/search/index.vue
@@ -9,7 +9,7 @@ function handleSearch() {

 <template>
  <div
-    class="search-container w-40px h-48px flex-c cursor-pointer navbar-bg-hover"
+    class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
    @click="handleSearch"
  >
    <IconifyIconOffline icon="search" />
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -12,6 +12,7 @@ import { getConfig } from "/@/config";
 import { useRouter } from "vue-router";
 import panel from "../panel/index.vue";
 import { emitter } from "/@/utils/mitt";
+import { resetRouter } from "/@/router";
 import { templateRef } from "@vueuse/core";
 import { routerArrays } from "/@/layout/types";
 import { useNav } from "/@/layout/hooks/useNav";
@@ -140,6 +141,7 @@ function onReset() {
  useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
  storageLocal.clear();
  storageSession.clear();
+  resetRouter();
 }

 function onChange(label) {
@@ -209,8 +211,9 @@ function setLayoutModel(layout: string) {
  $storage.layout = {
    layout,
    theme: layoutTheme.value.theme,
-    darkMode: $storage.layout.darkMode,
-    sidebarStatus: $storage.layout.sidebarStatus
+    darkMode: $storage.layout?.darkMode,
+    sidebarStatus: $storage.layout?.sidebarStatus,
+    epThemeColor: $storage.layout?.epThemeColor
  };
  useAppStoreHook().setLayout(layout);
 }
@@ -306,7 +309,7 @@ nextTick(() => {
    <el-divider>界面显示</el-divider>
    <ul class="setting">
      <li>
-        <span>灰色模式</span>
+        <span class="dark:text-white">灰色模式</span>
        <el-switch
          v-model="settings.greyVal"
          inline-prompt
@@ -317,7 +320,7 @@ nextTick(() => {
        />
      </li>
      <li>
-        <span>色弱模式</span>
+        <span class="dark:text-white">色弱模式</span>
        <el-switch
          v-model="settings.weakVal"
          inline-prompt
@@ -328,7 +331,7 @@ nextTick(() => {
        />
      </li>
      <li>
-        <span>隐藏标签页</span>
+        <span class="dark:text-white">隐藏标签页</span>
        <el-switch
          v-model="settings.tabsVal"
          inline-prompt
@@ -339,7 +342,7 @@ nextTick(() => {
        />
      </li>
      <li>
-        <span>侧边栏Logo</span>
+        <span class="dark:text-white">侧边栏Logo</span>
        <el-switch
          v-model="logoVal"
          inline-prompt
@@ -352,7 +355,7 @@ nextTick(() => {
        />
      </li>
      <li>
-        <span>标签页持久化</span>
+        <span class="dark:text-white">标签页持久化</span>
        <el-switch
          v-model="settings.multiTagsCache"
          inline-prompt
@@ -364,7 +367,7 @@ nextTick(() => {
      </li>

      <li>
-        <span>标签风格</span>
+        <span class="dark:text-white">标签风格</span>
        <el-radio-group v-model="markValue" size="small" @change="onChange">
          <el-radio label="card">卡片</el-radio>
          <el-radio label="smart">灵动</el-radio>
--- a/src/layout/components/sidebar/breadCrumb.vue
+++ b/src/layout/components/sidebar/breadCrumb.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
 import { isEqual } from "lodash-unified";
 import { transformI18n } from "/@/plugins/i18n";
+import { ref, watch, onMounted, toRaw } from "vue";
 import { getParentPaths, findRouteByPath } from "/@/router/utils";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
@@ -14,19 +14,24 @@ const multiTags: any = useMultiTagsStoreHook().multiTags;

 const isDashboard = (route: RouteLocationMatched): boolean | string => {
  const name = route && (route.name as string);
-  if (!name) {
-    return false;
-  }
+  if (!name) return false;
  return name.trim().toLocaleLowerCase() === "Welcome".toLocaleLowerCase();
 };

 const getBreadcrumb = (): void => {
  // 当前路由信息
  let currentRoute;
+
  if (Object.keys(route.query).length > 0) {
    multiTags.forEach(item => {
      if (isEqual(route.query, item?.query)) {
-        currentRoute = item;
+        currentRoute = toRaw(item);
+      }
+    });
+  } else if (Object.keys(route.params).length > 0) {
+    multiTags.forEach(item => {
+      if (isEqual(route.params, item?.params)) {
+        currentRoute = toRaw(item);
      }
    });
  } else {
@@ -38,29 +43,12 @@ const getBreadcrumb = (): void => {
  let matched = [];
  // 获取每个父级路径对应的路由信息
  parentRoutes.forEach(path => {
-    if (path !== "/") {
-      matched.push(findRouteByPath(path, routes));
-    }
+    if (path !== "/") matched.push(findRouteByPath(path, routes));
  });
-  if (router.currentRoute.value.meta?.refreshRedirect) {
-    matched.unshift(
-      findRouteByPath(
-        router.currentRoute.value.meta.refreshRedirect as string,
-        routes
-      )
-    );
-  } else {
-    // 过滤与子级相同标题的父级路由
-    matched = matched.filter(item => {
-      return !item.redirect || (item.redirect && item.children.length !== 1);
-    });
-  }
-  if (currentRoute?.path !== "/welcome") {
-    matched.push(currentRoute);
-  }

-  const first = matched[0];
-  if (!isDashboard(first)) {
+  if (currentRoute?.path !== "/welcome") matched.push(currentRoute);
+
+  if (!isDashboard(matched[0])) {
    matched = [
      {
        path: "/welcome",
@@ -70,60 +58,51 @@ const getBreadcrumb = (): void => {
    ].concat(matched);
  }

+  matched.forEach((item, index) => {
+    if (currentRoute?.query || currentRoute?.params) return;
+    if (item?.children) {
+      item.children.forEach(v => {
+        if (v?.meta?.title === item?.meta?.title) {
+          matched.splice(index, 1);
+        }
+      });
+    }
+  });
+
  levelList.value = matched.filter(
    item => item?.meta && item?.meta.title !== false
  );
 };

-getBreadcrumb();
+const handleLink = (item: RouteLocationMatched): void => {
+  const { redirect, path } = item;
+  if (redirect) {
+    router.push(redirect as any);
+  } else {
+    router.push(path);
+  }
+};
+
+onMounted(() => {
+  getBreadcrumb();
+});

 watch(
  () => route.path,
-  () => getBreadcrumb()
-);
-
-watch(
-  () => route.query,
-  () => getBreadcrumb()
-);
-
-const handleLink = (item: RouteLocationMatched): any => {
-  const { redirect, path } = item;
-  if (redirect) {
-    router.push(redirect.toString());
-    return;
+  () => {
+    getBreadcrumb();
  }
-  router.push(path);
-};
+);
 </script>

 <template>
-  <el-breadcrumb class="app-breadcrumb select-none" separator="/">
+  <el-breadcrumb class="!leading-[50px] select-none" separator="/">
    <transition-group appear name="breadcrumb">
-      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
-        <span
-          v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
-          class="no-redirect"
-        >
-          {{ transformI18n(item.meta.title) }}
-        </span>
-        <a v-else @click.prevent="handleLink(item)">
+      <el-breadcrumb-item v-for="item in levelList" :key="item.path">
+        <a @click.prevent="handleLink(item)">
          {{ transformI18n(item.meta.title) }}
        </a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
 </template>
-
-<style lang="scss" scoped>
-.app-breadcrumb.el-breadcrumb {
-  display: inline-block;
-  font-size: 14px;
-  line-height: 50px;
-
-  .no-redirect {
-    color: #97a8be;
-    cursor: text;
-  }
-}
-</style>
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref, watch } from "vue";
 import Search from "../search/index.vue";
 import Notice from "../notice/index.vue";
 import SidebarItem from "./sidebarItem.vue";
@@ -9,7 +10,6 @@ import { deviceDetection } from "@pureadmin/utils";
 import { useTranslationLang } from "../../hooks/useTranslationLang";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import globalization from "/@/assets/svg/globalization.svg?component";
-import { ref, watch, nextTick, onMounted, onBeforeUnmount } from "vue";

 const menuRef = ref();

@@ -21,7 +21,6 @@ const {
  logout,
  backHome,
  onPanel,
-  handleResize,
  menuSelect,
  username,
  avatarsStyle,
@@ -29,20 +28,6 @@ const {
  getDropdownItemClass
 } = useNav();

-function onResizeMenu() {
-  nextTick(() => {
-    handleResize(menuRef.value);
-  });
-}
-
-onMounted(() => {
-  window.addEventListener("resize", onResizeMenu);
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener("resize", onResizeMenu);
-});
-
 watch(
  () => route.path,
  () => {
@@ -82,13 +67,13 @@ watch(
      <!-- 国际化 -->
      <el-dropdown id="header-translation" trigger="click">
        <globalization
-          class="navbar-bg-hover w-40px h-48px p-11px cursor-pointer outline-none"
+          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
        />
        <template #dropdown>
          <el-dropdown-menu class="translation">
            <el-dropdown-item
              :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
              @click="translationCh"
            >
              <span class="check-zh" v-show="locale === 'zh'">
@@ -98,7 +83,7 @@ watch(
            </el-dropdown-item>
            <el-dropdown-item
              :style="getDropdownItemStyle(locale, 'en')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
              @click="translationEn"
            >
              <span class="check-en" v-show="locale === 'en'">
@@ -113,7 +98,7 @@ watch(
      <el-dropdown trigger="click">
        <span class="el-dropdown-link navbar-bg-hover">
          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
-          <p v-if="username" class="dark:color-white">{{ username }}</p>
+          <p v-if="username" class="dark:text-white">{{ username }}</p>
        </span>
        <template #dropdown>
          <el-dropdown-menu class="logout">
--- a/src/layout/components/sidebar/leftCollapse.vue
+++ b/src/layout/components/sidebar/leftCollapse.vue
@@ -28,7 +28,7 @@ const toggleClick = () => {
    >
      <IconifyIconOffline
        :icon="props.isActive ? 'menu-fold' : 'menu-unfold'"
-        class="cursor-pointer inline-block align-middle color-primary hover:color-primary !dark:hover:color-white w-16px h-16px ml-4 mb-1"
+        class="cursor-pointer inline-block align-middle text-primary hover:text-primary dark:hover:!text-white w-[16px] h-[16px] ml-4 mb-1"
        @click="toggleClick"
      />
    </el-tooltip>
--- a/src/layout/components/sidebar/mixNav.vue
+++ b/src/layout/components/sidebar/mixNav.vue
@@ -6,12 +6,12 @@ import { useNav } from "/@/layout/hooks/useNav";
 import { transformI18n } from "/@/plugins/i18n";
 import screenfull from "../screenfull/index.vue";
 import { deviceDetection } from "@pureadmin/utils";
+import { ref, toRaw, watch, onMounted } from "vue";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 import { getParentPaths, findRouteByPath } from "/@/router/utils";
 import { useTranslationLang } from "../../hooks/useTranslationLang";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import globalization from "/@/assets/svg/globalization.svg?component";
-import { ref, toRaw, watch, nextTick, onMounted, onBeforeUnmount } from "vue";

 const menuRef = ref();
 let defaultActive = ref(null);
@@ -23,7 +23,6 @@ const {
  routers,
  logout,
  onPanel,
-  handleResize,
  menuSelect,
  resolvePath,
  username,
@@ -42,19 +41,8 @@ function getDefaultActive(routePath) {
  )?.children[0]?.path;
 }

-function onResizeMenu() {
-  nextTick(() => {
-    handleResize(menuRef.value);
-  });
-}
-
 onMounted(() => {
  getDefaultActive(route.path);
-  window.addEventListener("resize", onResizeMenu);
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener("resize", onResizeMenu);
 });

 watch(
@@ -111,13 +99,13 @@ watch(
      <!-- 国际化 -->
      <el-dropdown id="header-translation" trigger="click">
        <globalization
-          class="navbar-bg-hover w-40px h-48px p-11px cursor-pointer outline-none"
+          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
        />
        <template #dropdown>
          <el-dropdown-menu class="translation">
            <el-dropdown-item
              :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
              @click="translationCh"
            >
              <span class="check-zh" v-show="locale === 'zh'">
@@ -127,7 +115,7 @@ watch(
            </el-dropdown-item>
            <el-dropdown-item
              :style="getDropdownItemStyle(locale, 'en')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
              @click="translationEn"
            >
              <span class="check-en" v-show="locale === 'en'">
@@ -142,7 +130,7 @@ watch(
      <el-dropdown trigger="click">
        <span class="el-dropdown-link navbar-bg-hover">
          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
-          <p v-if="username" class="dark:color-white">{{ username }}</p>
+          <p v-if="username" class="dark:text-white">{{ username }}</p>
        </span>
        <template #dropdown>
          <el-dropdown-menu class="logout">
--- a/src/layout/components/sidebar/topCollapse.vue
+++ b/src/layout/components/sidebar/topCollapse.vue
@@ -24,7 +24,7 @@ const toggleClick = () => {
  >
    <IconifyIconOffline
      :icon="props.isActive ? 'menu-fold' : 'menu-unfold'"
-      class="inline-block align-middle hover:color-primary !dark:hover:color-white"
+      class="inline-block align-middle hover:text-primary dark:hover:!text-white"
    />
  </div>
 </template>
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -1,123 +1,52 @@
 <script setup lang="ts">
-import {
-  ref,
-  watch,
-  unref,
-  toRaw,
-  reactive,
-  nextTick,
-  computed,
-  ComputedRef,
-  CSSProperties,
-  onBeforeMount,
-  getCurrentInstance
-} from "vue";
-
-import close from "/@/assets/svg/close.svg?component";
-import refresh from "/@/assets/svg/refresh.svg?component";
-import closeAll from "/@/assets/svg/close_all.svg?component";
-import closeLeft from "/@/assets/svg/close_left.svg?component";
-import closeOther from "/@/assets/svg/close_other.svg?component";
-import closeRight from "/@/assets/svg/close_right.svg?component";
-
-import { useI18n } from "vue-i18n";
 import { emitter } from "/@/utils/mitt";
-import type { StorageConfigs } from "/#/index";
+import { RouteConfigs } from "../../types";
+import { useTags } from "../../hooks/useTag";
 import { routerArrays } from "/@/layout/types";
-import { useRoute, useRouter } from "vue-router";
 import { isEqual, isEmpty } from "lodash-unified";
-import { transformI18n, $t } from "/@/plugins/i18n";
-import { RouteConfigs, tagsViewsType } from "../../types";
+import { toggleClass, removeClass } from "@pureadmin/utils";
+import { useResizeObserver, useDebounceFn } from "@vueuse/core";
 import { useSettingStoreHook } from "/@/store/modules/settings";
 import { handleAliveRoute, delAliveRoutes } from "/@/router/utils";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
-import { usePermissionStoreHook } from "/@/store/modules/permission";
-import { templateRef, useResizeObserver, useDebounceFn } from "@vueuse/core";
-import {
-  toggleClass,
-  removeClass,
-  hasClass,
-  storageLocal
-} from "@pureadmin/utils";
+import { ref, watch, unref, toRaw, nextTick, onBeforeMount } from "vue";

-const { t } = useI18n();
-const route = useRoute();
-const router = useRouter();
-const translateX = ref<number>(0);
-const activeIndex = ref<number>(-1);
-let refreshButton = "refresh-button";
-const instance = getCurrentInstance();
-const pureSetting = useSettingStoreHook();
-const tabDom = templateRef<HTMLElement | null>("tabDom", null);
-const containerDom = templateRef<HTMLElement | null>("containerDom", null);
-const scrollbarDom = templateRef<HTMLElement | null>("scrollbarDom", null);
-const showTags =
-  ref(storageLocal.getItem<StorageConfigs>("responsive-configure").hideTabs) ??
-  "false";
-// @ts-expect-error
-let multiTags: ComputedRef<Array<RouteConfigs>> = computed(() => {
-  return useMultiTagsStoreHook()?.multiTags;
-});
+const {
+  route,
+  router,
+  visible,
+  showTags,
+  instance,
+  multiTags,
+  tagsViews,
+  buttonTop,
+  buttonLeft,
+  showModel,
+  translateX,
+  activeIndex,
+  getTabStyle,
+  iconIsActive,
+  linkIsActive,
+  currentSelect,
+  scheduleIsActive,
+  getContextMenuStyle,
+  closeMenu,
+  onMounted,
+  onMouseenter,
+  onMouseleave,
+  transformI18n
+} = useTags();

-const linkIsActive = computed(() => {
-  return item => {
-    if (Object.keys(route.query).length === 0) {
-      if (route.path === item.path) {
-        return "is-active";
-      } else {
-        return "";
-      }
-    } else {
-      if (isEqual(route?.query, item?.query)) {
-        return "is-active";
-      } else {
-        return "";
-      }
-    }
-  };
-});
-
-const scheduleIsActive = computed(() => {
-  return item => {
-    if (Object.keys(route.query).length === 0) {
-      if (route.path === item.path) {
-        return "schedule-active";
-      } else {
-        return "";
-      }
-    } else {
-      if (isEqual(route?.query, item?.query)) {
-        return "schedule-active";
-      } else {
-        return "";
-      }
-    }
-  };
-});
-
-const iconIsActive = computed(() => {
-  return (item, index) => {
-    if (index === 0) return;
-    if (Object.keys(route.query).length === 0) {
-      if (route.path === item.path) {
-        return true;
-      } else {
-        return false;
-      }
-    } else {
-      if (isEqual(route?.query, item?.query)) {
-        return true;
-      } else {
-        return false;
-      }
-    }
-  };
-});
+const tabDom = ref();
+const containerDom = ref();
+const scrollbarDom = ref();

 const dynamicTagView = () => {
  const index = multiTags.value.findIndex(item => {
-    if (item?.query) {
-      return isEqual(route?.query, item?.query);
+    if (item.query) {
+      return isEqual(route.query, item.query);
+    } else if (item.params) {
+      return isEqual(route.params, item.params);
    } else {
      return item.path === route.path;
    }
@@ -125,23 +54,9 @@ const dynamicTagView = () => {
  moveToView(index);
 };

-watch([route], () => {
-  activeIndex.value = -1;
-  dynamicTagView();
-});
-
-useResizeObserver(
-  scrollbarDom,
-  useDebounceFn(() => {
-    dynamicTagView();
-  }, 200)
-);
-
-const tabNavPadding = 10;
 const moveToView = (index: number): void => {
-  if (!instance.refs["dynamic" + index]) {
-    return;
-  }
+  const tabNavPadding = 10;
+  if (!instance.refs["dynamic" + index]) return;
  const tabItemEl = instance.refs["dynamic" + index][0];
  const tabItemElOffsetLeft = (tabItemEl as HTMLElement)?.offsetLeft;
  const tabItemOffsetWidth = (tabItemEl as HTMLElement)?.offsetWidth;
@@ -151,7 +66,6 @@ const moveToView = (index: number): void => {
    : 0;
  // 已有标签页总长度（包含溢出部分）
  const tabDomWidth = tabDom.value ? tabDom.value?.offsetWidth : 0;
-
  if (tabDomWidth < scrollbarDomWidth || tabItemElOffsetLeft === 0) {
    translateX.value = 0;
  } else if (tabItemElOffsetLeft < -translateX.value) {
@@ -200,71 +114,6 @@ const handleScroll = (offset: number): void => {
  }
 };

-const tagsViews = reactive<Array<tagsViewsType>>([
-  {
-    icon: refresh,
-    text: $t("buttons.hsreload"),
-    divided: false,
-    disabled: false,
-    show: true
-  },
-  {
-    icon: close,
-    text: $t("buttons.hscloseCurrentTab"),
-    divided: false,
-    disabled: multiTags.value.length > 1 ? false : true,
-    show: true
-  },
-  {
-    icon: closeLeft,
-    text: $t("buttons.hscloseLeftTabs"),
-    divided: true,
-    disabled: multiTags.value.length > 1 ? false : true,
-    show: true
-  },
-  {
-    icon: closeRight,
-    text: $t("buttons.hscloseRightTabs"),
-    divided: false,
-    disabled: multiTags.value.length > 1 ? false : true,
-    show: true
-  },
-  {
-    icon: closeOther,
-    text: $t("buttons.hscloseOtherTabs"),
-    divided: true,
-    disabled: multiTags.value.length > 2 ? false : true,
-    show: true
-  },
-  {
-    icon: closeAll,
-    text: $t("buttons.hscloseAllTabs"),
-    divided: false,
-    disabled: multiTags.value.length > 1 ? false : true,
-    show: true
-  }
-]);
-
-// 显示模式，默认灵动模式显示
-const showModel = ref(
-  storageLocal.getItem<StorageConfigs>("responsive-configure")?.showModel ||
-    "smart"
-);
-if (!showModel.value) {
-  const configure = storageLocal.getItem<StorageConfigs>(
-    "responsive-configure"
-  );
-  configure.showModel = "card";
-  storageLocal.setItem("responsive-configure", configure);
-}
-
-let visible = ref(false);
-let buttonLeft = ref(0);
-let buttonTop = ref(0);
-
-// 当前右键选中的路由信息
-let currentSelect = ref({});
-
 function dynamicRouteTag(value: string, parentPath: string): void {
  const hasValue = multiTags.value.some(item => {
    return item.path === value;
@@ -292,8 +141,9 @@ function dynamicRouteTag(value: string, parentPath: string): void {
  concatPath(router.options.routes as any, value, parentPath);
 }

-// 重新加载
+/** 刷新路由 */
 function onFresh() {
+  const refreshButton = "refresh-button";
  toggleClass(true, refreshButton, document.querySelector(".rotate"));
  const { fullPath, query } = unref(route);
  router.replace({
@@ -313,6 +163,10 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
      if (item.path === obj.path) {
        return item.query === obj.query;
      }
+    } else if (item.params) {
+      if (item.path === obj.path) {
+        return item.params === obj.params;
+      }
    } else {
      return item.path === obj.path;
    }
@@ -351,24 +205,25 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
      : handleAliveRoute(route.matched, "delete");
    // 如果删除当前激活tag就自动切换到最后一个tag
    if (tag === "left") return;
-    nextTick(() => {
-      router.push({
-        path: newRoute[0].path,
-        query: newRoute[0].query
-      });
-    });
+    if (newRoute[0]?.query) {
+      router.push({ name: newRoute[0].name, query: newRoute[0].query });
+    } else if (newRoute[0]?.params) {
+      router.push({ name: newRoute[0].name, params: newRoute[0].params });
+    } else {
+      router.push({ path: newRoute[0].path });
+    }
  } else {
    // 删除缓存路由
    tag ? delAliveRoutes(delAliveRouteList) : delAliveRoutes([obj]);
    if (!multiTags.value.length) return;
-    let isHasActiveTag = multiTags.value.some(item => {
-      return item.path === route.path;
-    });
-    !isHasActiveTag &&
-      router.push({
-        path: newRoute[0].path,
-        query: newRoute[0].query
-      });
+    if (multiTags.value.some(item => item.path === route.path)) return;
+    if (newRoute[0]?.query) {
+      router.push({ name: newRoute[0].name, query: newRoute[0].query });
+    } else if (newRoute[0]?.params) {
+      router.push({ name: newRoute[0].name, params: newRoute[0].params });
+    } else {
+      router.push({ path: newRoute[0].path });
+    }
  }
 }

@@ -385,7 +240,8 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
      path: selectRoute.path,
      meta: selectRoute.meta,
      name: selectRoute.name,
-      query: selectRoute.query
+      query: selectRoute?.query,
+      params: selectRoute?.params
    };
  } else {
    selectTagRoute = { path: route.path, meta: route.meta };
@@ -394,7 +250,7 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
  // 当前路由信息
  switch (key) {
    case 0:
-      // 重新加载
+      // 刷新路由
      onFresh();
      break;
    case 1:
@@ -419,7 +275,6 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
        startIndex: 1,
        length: multiTags.value.length
      });
-      usePermissionStoreHook().clearAllCachePage();
      router.push("/welcome");
      break;
  }
@@ -433,15 +288,11 @@ function handleCommand(command: any) {
  onClickDrop(key, item);
 }

-// 触发右键中菜单的点击事件
+/** 触发右键中菜单的点击事件 */
 function selectTag(key, item) {
  onClickDrop(key, item, currentSelect.value);
 }

-function closeMenu() {
-  visible.value = false;
-}
-
 function showMenus(value: boolean) {
  Array.of(1, 2, 3, 4, 5).forEach(v => {
    tagsViews[v].show = value;
@@ -454,7 +305,7 @@ function disabledMenus(value: boolean) {
  });
 }

-// 检查当前右键的菜单两边是否存在别的菜单，如果左侧的菜单是首页，则不显示关闭左侧标签页，如果右侧没有菜单，则不显示关闭右侧标签页
+/** 检查当前右键的菜单两边是否存在别的菜单，如果左侧的菜单是首页，则不显示关闭左侧标签页，如果右侧没有菜单，则不显示关闭右侧标签页 */
 function showMenuModel(
  currentPath: string,
  query: object = {},
@@ -514,7 +365,7 @@ function openMenu(tag, e) {
    // 右键菜单为首页，只显示刷新
    showMenus(false);
    tagsViews[0].show = true;
-  } else if (route.path !== tag.path) {
+  } else if (route.path !== tag.path && route.name !== tag.name) {
    // 右键菜单不匹配当前路由，隐藏刷新
    tagsViews[0].show = false;
    showMenuModel(tag.path, tag.query);
@@ -542,63 +393,36 @@ function openMenu(tag, e) {
  } else {
    buttonLeft.value = left;
  }
-  pureSetting.hiddenSideBar
+  useSettingStoreHook().hiddenSideBar
    ? (buttonTop.value = e.clientY)
    : (buttonTop.value = e.clientY - 40);
-  setTimeout(() => {
+  nextTick(() => {
    visible.value = true;
-  }, 10);
-}
-
-// 触发tags标签切换
-function tagOnClick(item) {
-  router.push({
-    path: item?.path,
-    query: item?.query
  });
-  showMenuModel(item?.path, item?.query);
 }

-// 鼠标移入
-function onMouseenter(index) {
-  if (index) activeIndex.value = index;
-  if (unref(showModel) === "smart") {
-    if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
-      return;
-    toggleClass(true, "schedule-in", instance.refs["schedule" + index][0]);
-    toggleClass(false, "schedule-out", instance.refs["schedule" + index][0]);
-  } else {
-    if (hasClass(instance.refs["dynamic" + index][0], "card-active")) return;
-    toggleClass(true, "card-in", instance.refs["dynamic" + index][0]);
-    toggleClass(false, "card-out", instance.refs["dynamic" + index][0]);
-  }
-}
-
-// 鼠标移出
-function onMouseleave(index) {
-  activeIndex.value = -1;
-  if (unref(showModel) === "smart") {
-    if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
-      return;
-    toggleClass(false, "schedule-in", instance.refs["schedule" + index][0]);
-    toggleClass(true, "schedule-out", instance.refs["schedule" + index][0]);
-  } else {
-    if (hasClass(instance.refs["dynamic" + index][0], "card-active")) return;
-    toggleClass(false, "card-in", instance.refs["dynamic" + index][0]);
-    toggleClass(true, "card-out", instance.refs["dynamic" + index][0]);
-  }
-}
-
-watch(
-  () => visible.value,
-  val => {
-    if (val) {
-      document.body.addEventListener("click", closeMenu);
+/** 触发tags标签切换 */
+function tagOnClick(item) {
+  const { name, path } = item;
+  if (name) {
+    if (item.query) {
+      router.push({
+        name,
+        query: item.query
+      });
+    } else if (item.params) {
+      router.push({
+        name,
+        params: item.params
+      });
    } else {
-      document.body.removeEventListener("click", closeMenu);
+      router.push({ name });
    }
+  } else {
+    router.push({ path });
  }
-);
+  // showMenuModel(item?.path, item?.query);
+}

 onBeforeMount(() => {
  if (!instance) return;
@@ -626,14 +450,18 @@ onBeforeMount(() => {
  });
 });

-const getTabStyle = computed((): CSSProperties => {
-  return {
-    transform: `translateX(${translateX.value}px)`
-  };
+watch([route], () => {
+  activeIndex.value = -1;
+  dynamicTagView();
 });

-const getContextMenuStyle = computed((): CSSProperties => {
-  return { left: buttonLeft.value + "px", top: buttonTop.value + "px" };
+onMounted(() => {
+  useResizeObserver(
+    scrollbarDom,
+    useDebounceFn(() => {
+      dynamicTagView();
+    }, 200)
+  );
 });
 </script>

@@ -662,7 +490,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
        >
          <router-link
            :to="item.path"
-            class="!dark:color-text_color_primary !dark:hover:color-primary"
+            class="dark:!text-text_color_primary dark:hover:!text-primary"
          >
            {{ transformI18n(item.meta.title) }}
          </router-link>
@@ -705,7 +533,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
        >
          <li v-if="item.show" @click="selectTag(key, item)">
            <component :is="toRaw(item.icon)" :key="key" />
-            {{ t(item.text) }}
+            {{ transformI18n(item.text) }}
          </li>
        </div>
      </ul>
@@ -714,7 +542,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
    <ul class="right-button">
      <li>
        <span
-          :title="t('buttons.hsrefreshRoute')"
+          :title="transformI18n('buttons.hsrefreshRoute')"
          class="el-icon-refresh-right rotate"
          @click="onFresh"
        >
@@ -727,7 +555,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
          placement="bottom-end"
          @command="handleCommand"
        >
-          <IconifyIconOffline icon="arrow-down" class="dark:color-white" />
+          <IconifyIconOffline icon="arrow-down" class="dark:text-white" />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
@@ -742,7 +570,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
                  :key="key"
                  style="margin-right: 6px"
                />
-                {{ t(item.text) }}
+                {{ transformI18n(item.text) }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
--- a/src/layout/hooks/useDataThemeChange.ts
+++ b/src/layout/hooks/useDataThemeChange.ts
@@ -13,7 +13,7 @@ import {
 } from "@pureadmin/theme/dist/browser-utils";

 export function useDataThemeChange() {
-  const { layoutTheme } = useLayout();
+  const { layoutTheme, layout } = useLayout();
  const themeColors = ref<Array<themeColorsType>>([
    /* 道奇蓝（默认） */
    { color: "#1b2a47", themeColor: "default" },
@@ -36,7 +36,7 @@ export function useDataThemeChange() {
  ]);

  const { $storage } = useGlobal<GlobalPropertiesApi>();
-
+  const dataTheme = ref<boolean>($storage?.layout?.darkMode);
  const body = document.documentElement as HTMLElement;

  /** 设置导航主题色 */
@@ -45,8 +45,13 @@ export function useDataThemeChange() {
    toggleTheme({
      scopeName: `layout-theme-${theme}`
    });
-    $storage.layout.theme = theme;
-    $storage.layout.darkMode = dataTheme.value;
+    $storage.layout = {
+      layout: layout.value,
+      theme,
+      darkMode: dataTheme.value,
+      sidebarStatus: $storage.layout?.sidebarStatus,
+      epThemeColor: $storage.layout?.epThemeColor
+    };

    if (theme === "default" || theme === "light") {
      setEpThemeColor(getConfig().EpThemeColor);
@@ -82,7 +87,6 @@ export function useDataThemeChange() {
      );
    }
  };
-  const dataTheme = ref<boolean>($storage?.layout?.darkMode);

  /** 日间、夜间主题切换 */
  function dataThemeChange() {
@@ -94,10 +98,8 @@ export function useDataThemeChange() {
    }

    if (dataTheme.value) {
-      $storage.layout.darkMode = true;
      document.documentElement.classList.add("dark");
    } else {
-      $storage.layout.darkMode = false;
      document.documentElement.classList.remove("dark");
    }
  }
--- a/src/layout/hooks/useNav.ts
+++ b/src/layout/hooks/useNav.ts
@@ -35,7 +35,7 @@ export function useNav() {

  const getDropdownItemClass = computed(() => {
    return (locale, t) => {
-      return locale === t ? "" : "!dark:hover:color-primary";
+      return locale === t ? "" : "dark:hover:!text-primary";
    };
  });

--- a/src/layout/hooks/useTag.ts
+++ b/src/layout/hooks/useTag.ts
@@ -0,0 +1,218 @@
+import {
+  ref,
+  unref,
+  watch,
+  computed,
+  reactive,
+  onMounted,
+  CSSProperties,
+  getCurrentInstance
+} from "vue";
+import { tagsViewsType } from "../types";
+import { isEqual } from "lodash-unified";
+import type { StorageConfigs } from "/#/index";
+import { useEventListener } from "@vueuse/core";
+import { useRoute, useRouter } from "vue-router";
+import { transformI18n, $t } from "/@/plugins/i18n";
+import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
+import { storageLocal, toggleClass, hasClass } from "@pureadmin/utils";
+
+import close from "/@/assets/svg/close.svg?component";
+import refresh from "/@/assets/svg/refresh.svg?component";
+import closeAll from "/@/assets/svg/close_all.svg?component";
+import closeLeft from "/@/assets/svg/close_left.svg?component";
+import closeOther from "/@/assets/svg/close_other.svg?component";
+import closeRight from "/@/assets/svg/close_right.svg?component";
+
+export function useTags() {
+  const route = useRoute();
+  const router = useRouter();
+  const instance = getCurrentInstance();
+
+  const buttonTop = ref(0);
+  const buttonLeft = ref(0);
+  const translateX = ref(0);
+  const visible = ref(false);
+  const activeIndex = ref(-1);
+  // 当前右键选中的路由信息
+  const currentSelect = ref({});
+
+  /** 显示模式，默认灵动模式 */
+  const showModel = ref(
+    storageLocal.getItem<StorageConfigs>("responsive-configure")?.showModel ||
+      "smart"
+  );
+  /** 是否隐藏标签页，默认显示 */
+  const showTags =
+    ref(
+      storageLocal.getItem<StorageConfigs>("responsive-configure").hideTabs
+    ) ?? ref("false");
+  const multiTags: any = computed(() => {
+    return useMultiTagsStoreHook().multiTags;
+  });
+
+  const tagsViews = reactive<Array<tagsViewsType>>([
+    {
+      icon: refresh,
+      text: $t("buttons.hsreload"),
+      divided: false,
+      disabled: false,
+      show: true
+    },
+    {
+      icon: close,
+      text: $t("buttons.hscloseCurrentTab"),
+      divided: false,
+      disabled: multiTags.value.length > 1 ? false : true,
+      show: true
+    },
+    {
+      icon: closeLeft,
+      text: $t("buttons.hscloseLeftTabs"),
+      divided: true,
+      disabled: multiTags.value.length > 1 ? false : true,
+      show: true
+    },
+    {
+      icon: closeRight,
+      text: $t("buttons.hscloseRightTabs"),
+      divided: false,
+      disabled: multiTags.value.length > 1 ? false : true,
+      show: true
+    },
+    {
+      icon: closeOther,
+      text: $t("buttons.hscloseOtherTabs"),
+      divided: true,
+      disabled: multiTags.value.length > 2 ? false : true,
+      show: true
+    },
+    {
+      icon: closeAll,
+      text: $t("buttons.hscloseAllTabs"),
+      divided: false,
+      disabled: multiTags.value.length > 1 ? false : true,
+      show: true
+    }
+  ]);
+
+  function conditionHandle(item, previous, next) {
+    if (
+      Object.keys(route.query).length === 0 &&
+      Object.keys(route.params).length === 0
+    ) {
+      return route.path === item.path ? previous : next;
+    } else if (Object.keys(route.query).length > 0) {
+      return isEqual(route.query, item.query) ? previous : next;
+    } else {
+      return isEqual(route.params, item.params) ? previous : next;
+    }
+  }
+
+  const iconIsActive = computed(() => {
+    return (item, index) => {
+      if (index === 0) return;
+      return conditionHandle(item, true, false);
+    };
+  });
+
+  const linkIsActive = computed(() => {
+    return item => {
+      return conditionHandle(item, "is-active", "");
+    };
+  });
+
+  const scheduleIsActive = computed(() => {
+    return item => {
+      return conditionHandle(item, "schedule-active", "");
+    };
+  });
+
+  const getTabStyle = computed((): CSSProperties => {
+    return {
+      transform: `translateX(${translateX.value}px)`
+    };
+  });
+
+  const getContextMenuStyle = computed((): CSSProperties => {
+    return { left: buttonLeft.value + "px", top: buttonTop.value + "px" };
+  });
+
+  const closeMenu = () => {
+    visible.value = false;
+  };
+
+  /** 鼠标移入添加激活样式 */
+  function onMouseenter(index) {
+    if (index) activeIndex.value = index;
+    if (unref(showModel) === "smart") {
+      if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
+        return;
+      toggleClass(true, "schedule-in", instance.refs["schedule" + index][0]);
+      toggleClass(false, "schedule-out", instance.refs["schedule" + index][0]);
+    } else {
+      if (hasClass(instance.refs["dynamic" + index][0], "card-active")) return;
+      toggleClass(true, "card-in", instance.refs["dynamic" + index][0]);
+      toggleClass(false, "card-out", instance.refs["dynamic" + index][0]);
+    }
+  }
+
+  /** 鼠标移出恢复默认样式 */
+  function onMouseleave(index) {
+    activeIndex.value = -1;
+    if (unref(showModel) === "smart") {
+      if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
+        return;
+      toggleClass(false, "schedule-in", instance.refs["schedule" + index][0]);
+      toggleClass(true, "schedule-out", instance.refs["schedule" + index][0]);
+    } else {
+      if (hasClass(instance.refs["dynamic" + index][0], "card-active")) return;
+      toggleClass(false, "card-in", instance.refs["dynamic" + index][0]);
+      toggleClass(true, "card-out", instance.refs["dynamic" + index][0]);
+    }
+  }
+
+  onMounted(() => {
+    if (!showModel.value) {
+      const configure = storageLocal.getItem<StorageConfigs>(
+        "responsive-configure"
+      );
+      configure.showModel = "card";
+      storageLocal.setItem("responsive-configure", configure);
+    }
+  });
+
+  watch(
+    () => visible.value,
+    () => {
+      useEventListener(document, "click", closeMenu);
+    }
+  );
+
+  return {
+    route,
+    router,
+    visible,
+    showTags,
+    instance,
+    multiTags,
+    showModel,
+    tagsViews,
+    buttonTop,
+    buttonLeft,
+    translateX,
+    activeIndex,
+    getTabStyle,
+    iconIsActive,
+    linkIsActive,
+    currentSelect,
+    scheduleIsActive,
+    getContextMenuStyle,
+    $t,
+    closeMenu,
+    onMounted,
+    onMouseenter,
+    onMouseleave,
+    transformI18n
+  };
+}
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -144,8 +144,8 @@ const layoutHeader = defineComponent({
                  {
                    default: () => [
                      !pureSetting.hiddenSideBar
-                        ? h(fullScreen, { class: "dark:color-white" })
-                        : h(exitScreen, { class: "dark:color-white" })
+                        ? h(fullScreen, { class: "dark:text-white" })
+                        : h(exitScreen, { class: "dark:text-white" })
                    ]
                  }
                )
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -22,6 +22,7 @@ export type RouteConfigs = {
  path?: string;
  parentPath?: string;
  query?: object;
+  params?: object;
  meta?: routeMetaType;
  children?: RouteConfigs[];
  name?: string;
--- a/src/main.ts
+++ b/src/main.ts
@@ -14,7 +14,6 @@ import { injectResponsiveStorage } from "/@/utils/responsive";
 import Table from "@pureadmin/table";
 import PureDescriptions from "@pureadmin/descriptions";

-import "uno.css";
 import "animate.css";
 // 引入重置样式
 import "./style/reset.scss";
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -8,17 +8,14 @@ import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import {
  Router,
-  RouteMeta,
  createRouter,
  RouteRecordRaw,
-  RouteComponent,
-  RouteRecordName
+  RouteComponent
 } from "vue-router";
 import {
  ascending,
  initRouter,
  getHistoryMode,
-  getParentPaths,
  findRouteByPath,
  handleAliveRoute,
  formatTwoStageRoutes,
@@ -109,6 +106,7 @@ export function resetRouter() {
      );
    }
  });
+  usePermissionStoreHook().clearAllCachePage();
 }

 // 路由白名单
@@ -148,69 +146,22 @@ router.beforeEach((to: toRouteType, _from, next) => {
      if (usePermissionStoreHook().wholeMenus.length === 0)
        initRouter(name.username).then((router: Router) => {
          if (!useMultiTagsStoreHook().getMultiTagsCache) {
-            const handTag = (
-              path: string,
-              parentPath: string,
-              name: RouteRecordName,
-              meta: RouteMeta
-            ): void => {
+            const { path } = to;
+            const index = findIndex(remainingRouter, v => {
+              return v.path == path;
+            });
+            const routes: any =
+              index === -1
+                ? router.options.routes[0].children
+                : router.options.routes;
+            const route = findRouteByPath(path, routes);
+            // query、params模式路由传参数的标签页不在此处处理
+            if (route && route.meta?.title) {
              useMultiTagsStoreHook().handleTags("push", {
-                path,
-                parentPath,
-                name,
-                meta
+                path: route.path,
+                name: route.name,
+                meta: route.meta
              });
-            };
-            // 未开启标签页缓存，刷新页面重定向到顶级路由（参考标签页操作例子，只针对静态路由）
-            if (to.meta?.refreshRedirect) {
-              const routes: any = router.options.routes;
-              const { refreshRedirect } = to.meta;
-              const { name, meta } = findRouteByPath(refreshRedirect, routes);
-              handTag(
-                refreshRedirect,
-                getParentPaths(refreshRedirect, routes)[1],
-                name,
-                meta
-              );
-              return router.push(refreshRedirect);
-            } else {
-              const { path } = to;
-              const index = findIndex(remainingRouter, v => {
-                return v.path == path;
-              });
-              const routes: any =
-                index === -1
-                  ? router.options.routes[0].children
-                  : router.options.routes;
-              const route = findRouteByPath(path, routes);
-              const routePartent = getParentPaths(path, routes);
-              // 未开启标签页缓存，刷新页面重定向到顶级路由（参考标签页操作例子，只针对动态路由）
-              if (
-                path !== routes[0].path &&
-                route?.meta?.rank !== 0 &&
-                routePartent.length === 0
-              ) {
-                if (!route?.meta?.refreshRedirect) return;
-                const { name, meta } = findRouteByPath(
-                  route.meta.refreshRedirect,
-                  routes
-                );
-                handTag(
-                  route.meta?.refreshRedirect,
-                  getParentPaths(route.meta?.refreshRedirect, routes)[0],
-                  name,
-                  meta
-                );
-                return router.push(route.meta?.refreshRedirect);
-              } else {
-                handTag(
-                  route.path,
-                  routePartent[routePartent.length - 1],
-                  route.name,
-                  route.meta
-                );
-                return router.push(path);
-              }
            }
          }
          router.push(to.fullPath);
--- a/src/router/modules/able.ts
+++ b/src/router/modules/able.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const ableRouter: RouteConfigsTable = {
  path: "/able",
-  component: Layout,
  redirect: "/able/watermark",
  meta: {
    icon: "ubuntu-fill",
@@ -147,6 +145,14 @@ const ableRouter: RouteConfigsTable = {
      meta: {
        title: $t("menus.hsExecl")
      }
+    },
+    {
+      path: "/able/infiniteScroll",
+      name: "InfiniteScroll",
+      component: () => import("/@/views/able/infinite-scroll.vue"),
+      meta: {
+        title: $t("menus.hsInfiniteScroll")
+      }
    }
  ]
 };
--- a/src/router/modules/about.ts
+++ b/src/router/modules/about.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const aboutRouter: RouteConfigsTable = {
  path: "/about",
-  component: Layout,
  redirect: "/about/index",
  meta: {
    // icon: "question-line",
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const componentsRouter: RouteConfigsTable = {
  path: "/components",
-  component: Layout,
  redirect: "/components/video",
  meta: {
    icon: "menu",
--- a/src/router/modules/editor.ts
+++ b/src/router/modules/editor.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const editorRouter: RouteConfigsTable = {
  path: "/editor",
-  component: Layout,
  redirect: "/editor/index",
  meta: {
    icon: "edit",
--- a/src/router/modules/error.ts
+++ b/src/router/modules/error.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const errorRouter: RouteConfigsTable = {
  path: "/error",
-  component: Layout,
  redirect: "/error/403",
  meta: {
    icon: "information-line",
--- a/src/router/modules/flowchart.ts
+++ b/src/router/modules/flowchart.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const flowChartRouter: RouteConfigsTable = {
  path: "/flowChart",
-  component: Layout,
  redirect: "/flowChart/index",
  meta: {
    icon: "set-up",
--- a/src/router/modules/formdesign.ts
+++ b/src/router/modules/formdesign.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const formDesignRouter: RouteConfigsTable = {
  path: "/formDesign",
-  component: Layout,
  redirect: "/formDesign/index",
  meta: {
    icon: "terminal-window-line",
--- a/src/router/modules/guide.ts
+++ b/src/router/modules/guide.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const guideRouter: RouteConfigsTable = {
  path: "/guide",
-  component: Layout,
  redirect: "/guide/index",
  meta: {
    icon: "guide",
--- a/src/router/modules/list.ts
+++ b/src/router/modules/list.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const ableRouter: RouteConfigsTable = {
  path: "/list",
-  component: Layout,
  redirect: "/list/card",
  meta: {
    icon: "list-check",
--- a/src/router/modules/nested.ts
+++ b/src/router/modules/nested.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const nestedRouter: RouteConfigsTable = {
  path: "/nested",
-  component: Layout,
  redirect: "/nested/menu1/menu1-1",
  meta: {
    title: $t("menus.hsmenus"),
--- a/src/router/modules/ppt.ts
+++ b/src/router/modules/ppt.ts
@@ -1,10 +1,8 @@
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");
 const IFrame = () => import("/@/layout/frameView.vue");

 const pptRouter: RouteConfigsTable = {
  path: "/ppt",
-  component: Layout,
  redirect: "/ppt/index",
  meta: {
    icon: "ppt",
--- a/src/router/modules/result.ts
+++ b/src/router/modules/result.ts
@@ -1,10 +1,8 @@
 import { $t } from "/@/plugins/i18n";
 import type { RouteConfigsTable } from "/#/index";
-const Layout = () => import("/@/layout/index.vue");

 const resultRouter: RouteConfigsTable = {
  path: "/result",
-  component: Layout,
  redirect: "/result/success",
  meta: {
    icon: "checkbox-circle-line",
--- a/src/router/types.ts
+++ b/src/router/types.ts
@@ -3,7 +3,6 @@ import { RouteLocationNormalized } from "vue-router";
 export interface toRouteType extends RouteLocationNormalized {
  meta: {
    keepAlive?: boolean;
-    refreshRedirect: string;
    dynamicLevel?: string;
  };
 }
--- a/src/router/utils.ts
+++ b/src/router/utils.ts
@@ -7,13 +7,13 @@ import {
  RouteRecordNormalized
 } from "vue-router";
 import { router } from "./index";
+import { isProxy, toRaw } from "vue";
 import { loadEnv } from "../../build";
 import { cloneDeep } from "lodash-unified";
 import { useTimeoutFn } from "@vueuse/core";
 import { RouteConfigs } from "/@/layout/types";
 import { buildHierarchyTree } from "@pureadmin/utils";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
-const Layout = () => import("/@/layout/index.vue");
 const IFrame = () => import("/@/layout/frameView.vue");
 // https://cn.vitejs.dev/guide/features.html#glob-import
 const modulesRoutes = import.meta.glob("/src/views/**/*.{vue,tsx}");
@@ -87,7 +87,7 @@ function getParentPaths(path: string, routes: RouteRecordRaw[]) {
 function findRouteByPath(path: string, routes: RouteRecordRaw[]) {
  let res = routes.find((item: { path: string }) => item.path == path);
  if (res) {
-    return res;
+    return isProxy(res) ? toRaw(res) : res;
  } else {
    for (let i = 0; i < routes.length; i++) {
      if (
@@ -96,7 +96,7 @@ function findRouteByPath(path: string, routes: RouteRecordRaw[]) {
      ) {
        res = findRouteByPath(path, routes[i].children);
        if (res) {
-          return res;
+          return isProxy(res) ? toRaw(res) : res;
        }
      }
    }
@@ -229,18 +229,22 @@ function addAsyncRoutes(arrRoutes: Array<RouteRecordRaw>) {
  arrRoutes.forEach((v: RouteRecordRaw) => {
    // 将backstage属性加入meta，标识此路由为后端返回路由
    v.meta.backstage = true;
-    if (v.redirect) {
-      v.component = Layout;
-    } else if (v.meta?.frameSrc) {
+    // 父级的redirect属性取值：如果子级存在且父级的redirect属性不存在，默认取第一个子级的path；如果子级存在且父级的redirect属性存在，取存在的redirect属性，会覆盖默认值
+    if (v?.children && v.children.length && !v.redirect)
+      v.redirect = v.children[0].path;
+    // 父级的name属性取值：如果子级存在且父级的name属性不存在，默认取第一个子级的name；如果子级存在且父级的name属性存在，取存在的name属性，会覆盖默认值
+    if (v?.children && v.children.length && !v.name)
+      v.name = v.children[0].name;
+    if (v.meta?.frameSrc) {
      v.component = IFrame;
    } else {
-      // 对后端传component组件路径和不传做兼容（如果后端传component组件路径，那么path可以随便写，如果不传，component组件路径会根path保持一致）
+      // 对后端传component组件路径和不传做兼容（如果后端传component组件路径，那么path可以随便写，如果不传，component组件路径会跟path保持一致）
      const index = v?.component
        ? modulesRoutesKeys.findIndex(ev => ev.includes(v.component as any))
        : modulesRoutesKeys.findIndex(ev => ev.includes(v.path));
      v.component = modulesRoutes[modulesRoutesKeys[index]];
    }
-    if (v.children) {
+    if (v?.children && v.children.length) {
      addAsyncRoutes(v.children);
    }
  });
--- a/src/store/modules/multiTags.ts
+++ b/src/store/modules/multiTags.ts
@@ -48,9 +48,13 @@ export const useMultiTagsStore = defineStore({
        case "push":
          {
            const tagVal = value as multiType;
+            // 不添加到标签页
+            if (tagVal?.meta?.hiddenTag) return;
+            // 如果是外链无需添加信息到标签页
            if (isUrl(tagVal?.name)) return;
+            // 如果title为空拒绝添加空信息到标签页
            if (tagVal?.meta?.title.length === 0) return;
-            const tagPath = tagVal?.path;
+            const tagPath = tagVal.path;
            // 判断tag是否已存在
            const tagHasExits = this.multiTags.some(tag => {
              return tag.path === tagPath;
@@ -58,20 +62,24 @@ export const useMultiTagsStore = defineStore({

            // 判断tag中的query键值是否相等
            const tagQueryHasExits = this.multiTags.some(tag => {
-              return isEqual(tag.query, tagVal?.query);
+              return isEqual(tag?.query, tagVal?.query);
            });

-            if (tagHasExits && tagQueryHasExits) return;
+            // 判断tag中的params键值是否相等
+            const tagParamsHasExits = this.multiTags.some(tag => {
+              return isEqual(tag?.params, tagVal?.params);
+            });

+            if (tagHasExits && tagQueryHasExits && tagParamsHasExits) return;
+
+            // 动态路由可打开的最大数量
            const dynamicLevel = tagVal?.meta?.dynamicLevel ?? -1;
            if (dynamicLevel > 0) {
-              // dynamicLevel动态路由可打开的数量
-              // 获取到已经打开的动态路由数, 判断是否大于dynamicLevel
              if (
                this.multiTags.filter(e => e?.path === tagPath).length >=
                dynamicLevel
              ) {
-                // 关闭第一个
+                // 如果当前已打开的动态路由数大于dynamicLevel，替换第一个动态路由标签
                const index = this.multiTags.findIndex(
                  item => item?.path === tagPath
                );
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -63,6 +63,9 @@ export const usePermissionStore = defineStore({
    },
    // 清空缓存页面
    clearAllCachePage() {
+      this.wholeMenus = [];
+      this.menusTree = [];
+      this.buttonAuth = [];
      this.cachePageList = [];
    }
  }
--- a/src/store/modules/types.ts
+++ b/src/store/modules/types.ts
@@ -27,6 +27,7 @@ export type multiType = {
  name: string;
  meta: any;
  query?: object;
+  params?: object;
 };

 export type setType = {
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -68,6 +68,7 @@ export const useUserStore = defineStore({
    },
    // 刷新token
    async refreshToken(data) {
+      removeToken();
      return refreshToken(data).then(data => {
        if (data) {
          setToken(data);
--- a/src/style/dark.scss
+++ b/src/style/dark.scss
@@ -129,7 +129,8 @@ html.dark {
  }

  .vxe-modal--title,
-  .vxe-button--content {
+  .vxe-button--content,
+  .vxe-modal--header-title {
    color: var(--el-text-color-primary);
  }

@@ -137,6 +138,10 @@ html.dark {
    background: var(--el-color-primary) !important;
  }

+  .vxe-button {
+    background-color: transparent;
+  }
+
  /* 项目配置面板 */
  .right-panel-items {
    .el-divider__text {
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -3,6 +3,7 @@
@import "./element-plus.scss";
@import "./sidebar.scss";
@import "./dark.scss";
+@import "./tailwind.css";

 :root {
  --pure-transition-duration: 0.016s;
--- a/src/style/reset.scss
+++ b/src/style/reset.scss
@@ -182,7 +182,6 @@ button,
 [type="reset"],
 [type="submit"] {
  -webkit-appearance: button; /* 1 */
-  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
 }

--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -229,7 +229,7 @@
      .screen-full,
      /* 国际化 */
      .globalization,
-      /* 登陆名 */
+      /* 登录名 */
      .el-dropdown-link,
      /* 设置 */
      .el-icon-setting {
@@ -592,7 +592,7 @@ body[layout="vertical"] {
  .screen-full,
  /* 国际化 */
  .globalization,
-  /* 登陆名 */
+  /* 登录名 */
  .el-dropdown-link,
  /* 设置 */
  .el-icon-setting {
--- a/src/style/tailwind.css
+++ b/src/style/tailwind.css
@@ -0,0 +1,29 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .bg-dark {
+    @apply bg-bg_color;
+  }
+
+  .wh-full {
+    @apply w-full h-full;
+  }
+
+  .flex-c {
+    @apply flex justify-center items-center;
+  }
+
+  .flex-ac {
+    @apply flex justify-around items-center;
+  }
+
+  .flex-bc {
+    @apply flex justify-between items-center;
+  }
+
+  .navbar-bg-hover {
+    @apply dark:text-white dark:hover:!bg-[#242424];
+  }
+}
--- a/src/views/able/ant-anchor.vue
+++ b/src/views/able/ant-anchor.vue
@@ -37,8 +37,8 @@ function handleAnchorClick(e, link) {
        </span>
      </div>
    </template>
-    <div class="w-400px">
-      <Anchor class="float-left mt-200px" @click="handleAnchorClick">
+    <div class="w-[400px]">
+      <Anchor class="float-left mt-[200px]" @click="handleAnchorClick">
        <AnchorLink href="one" title="测试one" />
        <AnchorLink href="two" title="测试two" />
        <AnchorLink href="three" title="测试three" />
@@ -47,21 +47,21 @@ function handleAnchorClick(e, link) {
      <el-scrollbar class="float-right overflow-auto" height="600px">
        <header
          id="one"
-          class="w-200px h-600px text-cyan-50 flex justify-center items-center text-4xl"
+          class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
          style="background: #409eff"
        >
          测试one
        </header>
        <header
          id="two"
-          class="w-200px h-600px text-cyan-50 flex justify-center items-center text-4xl"
+          class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
          style="background: #67c23a"
        >
          测试two
        </header>
        <header
          id="three"
-          class="w-200px h-600px text-cyan-50 flex justify-center items-center text-4xl"
+          class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
          style="background: #f56c6c"
        >
          测试three
--- a/src/views/able/ant-treeSelect.vue
+++ b/src/views/able/ant-treeSelect.vue
@@ -149,7 +149,7 @@ const onLoadData = treeNode => {
      <div>
        <span>线性样式：</span>
        <TreeSelect
-          class="w-200px"
+          class="w-[200px]"
          v-model:value="value1"
          show-search
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
@@ -169,7 +169,7 @@ const onLoadData = treeNode => {
      <div>
        <span>虚拟滚动：</span>
        <TreeSelect
-          class="w-200px mt-6"
+          class="w-[200px] mt-6"
          v-model:value="checkedKeys"
          tree-checkable
          tree-default-expand-all
@@ -190,7 +190,7 @@ const onLoadData = treeNode => {
      <div>
        <span>可勾选：</span>
        <TreeSelect
-          class="w-200px"
+          class="w-[200px]"
          v-model:value="value2"
          :tree-data="treeData2"
          tree-checkable
@@ -203,7 +203,7 @@ const onLoadData = treeNode => {
      <div>
        <span>异步加载：</span>
        <TreeSelect
-          class="w-200px"
+          class="w-[200px]"
          v-model:value="value3"
          tree-data-simple-mode
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
--- a/src/views/able/execl.vue
+++ b/src/views/able/execl.vue
@@ -84,7 +84,7 @@ const exportExcel = () => {
      </div>
    </template>
    <el-button type="primary" @click="exportExcel">导出Excel </el-button>
-    <div class="h-100 mt-3">
+    <div class="h-[25rem] mt-3">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <el-table-v2
--- a/src/views/able/infinite-scroll.vue
+++ b/src/views/able/infinite-scroll.vue
@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";
+
+defineOptions({
+  name: "InfiniteScroll"
+});
+
+const dataTemplate = new Array(10).fill({
+  date: "2022-08-24",
+  name: "RealityBoy",
+  age: "18"
+});
+
+const data = ref([]);
+const disabled = ref(false);
+const page = ref(0);
+const total = ref(10);
+
+const load = () => {
+  if (disabled.value) return;
+
+  page.value++;
+  if (page.value <= total.value) {
+    data.value = data.value.concat(dataTemplate);
+  }
+
+  if (page.value === total.value) {
+    disabled.value = true;
+  }
+};
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="font-medium">
+        表格无限滚动（
+        <el-link
+          href="https://github.com/yujinpan/el-table-infinite-scroll"
+          target="_blank"
+          style="font-size: 16px; margin: 0 5px 4px 0"
+        >
+          github地址
+        </el-link>
+        ）
+      </div>
+    </template>
+    <div>
+      <p class="mb-2">
+        <span>loaded page(total: {{ total }}): {{ page }}, </span>
+        disabled:
+        <el-switch v-model="disabled" :disabled="page >= total" />
+      </p>
+      <el-table
+        v-el-table-infinite-scroll="load"
+        :data="data"
+        :infinite-scroll-disabled="disabled"
+        height="435px"
+      >
+        <el-table-column type="index" />
+        <el-table-column prop="date" label="date" />
+        <el-table-column prop="name" label="name" />
+        <el-table-column prop="age" label="age" />
+      </el-table>
+    </div>
+  </el-card>
+</template>
--- a/src/views/able/line-tree.vue
+++ b/src/views/able/line-tree.vue
@@ -30,14 +30,14 @@ let dataProps = {
    </template>

    <el-row :gutter="24">
-      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-20px">
+      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-[20px]">
        <el-card>
          <template #header>
            <div class="card-header">
              <span class="font-medium"> 普通树结构 </span>
            </div>
          </template>
-          <div class="max-h-550px overflow-y-auto">
+          <div class="max-h-[550px] overflow-y-auto">
            <el-tree
              :data="menusData"
              :props="dataProps"
@@ -66,7 +66,7 @@ let dataProps = {
              <span class="font-medium"> 虚拟树结构 </span>
            </div>
          </template>
-          <div class="max-h-550px overflow-y-auto">
+          <div class="max-h-[550px] overflow-y-auto">
            <el-tree-v2
              :data="menusData"
              :props="dataProps"
--- a/src/views/able/pdf.vue
+++ b/src/views/able/pdf.vue
@@ -22,7 +22,7 @@ let showAllPages = ref(false);
 const rotations = [0, 90, 180, 270];

 const source =
-  "https://pure-admin-doc.vercel.app/pdf/Cookie%E5%92%8CSession%E5%8C%BA%E5%88%AB%E7%94%A8%E6%B3%95.pdf";
+  "https://xiaoxian521.github.io/pure-admin-doc/pdf/Cookie%E5%92%8CSession%E5%8C%BA%E5%88%AB%E7%94%A8%E6%B3%95.pdf";

 const handleDocumentRender = () => {
  loading.value = false;
@@ -73,7 +73,7 @@ const onPrint = () => {
            {{ currentPage }} / {{ pageCount }}
          </el-pagination>
        </div>
-        <div class="w-170px flex-bc">
+        <div class="w-[170px] flex-bc">
          <el-checkbox v-model="showAllPages" @change="showAllPagesChange">
            显示所有页面
          </el-checkbox>
--- a/src/views/able/print.vue
+++ b/src/views/able/print.vue
@@ -194,11 +194,10 @@ const tableData: User[] = [
      >
        <p class="font-medium pt-1">Element-Plus Table</p>
        <el-table
-          class="el-table"
-          :data="tableData"
          border
-          style="margin: 40px auto; width: 100%"
+          :data="tableData"
          :row-class-name="tableRowClassName"
+          class="el-table w-full mt-[40px] mr-[40px]"
        >
          <el-table-column prop="date" label="Date" width="180" />
          <el-table-column prop="name" label="Name" width="180" />
--- a/src/views/able/qrcode.vue
+++ b/src/views/able/qrcode.vue
@@ -40,19 +40,19 @@ const disabledClick = () => {
      </template>
      <el-row :gutter="20" justify="space-between">
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-10px text-center">
+          <el-card shadow="hover" class="mb-[10px] text-center">
            <div class="font-bold">基础用法</div>
            <ReQrcode :text="qrcodeText" />
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-10px text-center">
+          <el-card shadow="hover" class="mb-[10px] text-center">
            <div class="font-bold">img标签</div>
            <ReQrcode :text="qrcodeText" tag="img" />
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-10px text-center">
+          <el-card shadow="hover" class="mb-[10px] text-center">
            <div class="font-bold">样式配置</div>
            <ReQrcode
              :text="qrcodeText"
@@ -66,19 +66,19 @@ const disabledClick = () => {
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-10px text-center">
+          <el-card shadow="hover" class="mb-[10px] text-center">
            <div class="font-bold">点击事件</div>
            <ReQrcode :text="qrcodeText" @click="codeClick" />
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-10px text-center">
+          <el-card shadow="hover" class="mb-[10px] text-center">
            <div class="font-bold">异步内容</div>
            <ReQrcode :text="asyncTitle" />
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-10px text-center">
+          <el-card shadow="hover" class="mb-[10px] text-center">
            <div class="font-bold">失效</div>
            <ReQrcode
              :text="qrcodeText"
@@ -88,13 +88,13 @@ const disabledClick = () => {
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-10px text-center">
+          <el-card shadow="hover" class="mb-[10px] text-center">
            <div class="font-bold">logo配置</div>
            <ReQrcode :text="qrcodeText" :logo="avatars" />
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-10px text-center">
+          <el-card shadow="hover" class="mb-[10px] text-center">
            <div class="font-bold">logo样式</div>
            <ReQrcode
              :text="qrcodeText"
@@ -109,7 +109,7 @@ const disabledClick = () => {
          </el-card>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-10px text-center">
+          <el-card shadow="hover" class="mb-[10px] text-center">
            <div class="font-bold">大小配置</div>
            <ReQrcode :text="qrcodeText" :width="100" />
          </el-card>
--- a/src/views/able/swiper.vue
+++ b/src/views/able/swiper.vue
@@ -119,11 +119,11 @@ const swiperExample: SwiperExample[] = [
    </template>
    <el-row :gutter="10">
      <el-col v-for="item in swiperExample" :key="item.id" :span="12">
-        <h3 class="py-24px text-24px font-bold">{{ item.label }}</h3>
+        <h3 class="py-[24px] text-[24px] font-bold">{{ item.label }}</h3>
        <swiper v-bind="item.options">
          <swiper-slide v-for="i in 5" :key="i">
            <div
-              class="flex justify-center items-center h-240px border-1px border-[#999] text-18px font-bold"
+              class="flex justify-center items-center h-[240px] border-[1px] border-[#999] text-[18px] font-bold"
            >
              Slide{{ i }}
            </div>
--- a/src/views/able/virtual-list/horizontal.vue
+++ b/src/views/able/virtual-list/horizontal.vue
@@ -29,7 +29,7 @@ function changeMessage(message) {
  <div class="dynamic-scroller-demo">
    <div class="flex justify-around mb-4">
      <el-input
-        class="mr-2 !w-1/1.5"
+        class="mr-2 !w-[1/1.5]"
        clearable
        v-model="search"
        placeholder="Filter..."
--- a/src/views/able/virtual-list/index.vue
+++ b/src/views/able/virtual-list/index.vue
@@ -23,8 +23,8 @@ defineOptions({
      </div>
    </template>
    <div class="w-full flex justify-around flex-wrap">
-      <vertical-list class="h-500px w-500px" />
-      <horizontal-list class="h-500px w-500px" />
+      <vertical-list class="h-[500px] w-[500px]" />
+      <horizontal-list class="h-[500px] w-[500px]" />
    </div>
  </el-card>
 </template>
--- a/src/views/able/virtual-list/vertical.vue
+++ b/src/views/able/virtual-list/vertical.vue
@@ -33,7 +33,7 @@ function onResize() {
  <div class="dynamic-scroller-demo">
    <div class="flex justify-around mb-4">
      <el-input
-        class="mr-2 !w-1/1.5"
+        class="mr-2 !w-[1/1.5]"
        clearable
        v-model="search"
        placeholder="Filter..."
--- a/src/views/about/columns.tsx
+++ b/src/views/about/columns.tsx
@@ -18,7 +18,7 @@ export function useColumns() {
      label: "文档地址",
      cellRenderer: () => {
        return (
-          <a href="https://pure-admin-doc.vercel.app" target="_blank">
+          <a href="http://yiming_chang.gitee.io/pure-admin-doc" target="_blank">
            <span style="color: var(--el-color-primary)">文档地址</span>
          </a>
        );
@@ -28,7 +28,7 @@ export function useColumns() {
      label: "预览地址",
      cellRenderer: () => {
        return (
-          <a href="https://vue-pure-admin.vercel.app" target="_blank">
+          <a href="http://yiming_chang.gitee.io/vue-pure-admin" target="_blank">
            <span style="color: var(--el-color-primary)">预览地址</span>
          </a>
        );
@@ -51,7 +51,7 @@ export function useColumns() {
      label: "QQ交流群",
      cellRenderer: () => {
        return (
-          <a href="https://jq.qq.com/?_wv=1027&k=HntMx0dt" target="_blank">
+          <a href="https://jq.qq.com/?_wv=1027&k=E9fwmFGr" target="_blank">
            <span style="color: var(--el-color-primary)">
              点击链接加入群聊【Pure Admin】
            </span>
--- a/src/views/components/button/index.vue
+++ b/src/views/components/button/index.vue
@@ -18,7 +18,7 @@ const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
        <span class="font-medium">通过iframe引入按钮页面</span>
      </div>
    </template>
-    <iframe :src="url" frameborder="0" class="iframe w-full h-60vh" />
+    <iframe :src="url" frameborder="0" class="iframe w-full h-[60vh]" />
  </el-card>
 </template>

--- a/src/views/empty/index.vue
+++ b/src/views/empty/index.vue
@@ -8,7 +8,7 @@ defineOptions({

 <template>
  <div class="back" title="返回上一页" @click="$router.go(-1)">
-    <back class="w-80px h-80px" />
+    <back class="w-[80px] h-[80px]" />
  </div>
 </template>

--- a/src/views/error/403.vue
+++ b/src/views/error/403.vue
@@ -7,7 +7,7 @@ defineOptions({
 </script>

 <template>
-  <div class="flex justify-center items-center h-screen-sm">
+  <div class="flex justify-center items-center h-[640px]">
    <noAccess />
    <div class="ml-12">
      <p
--- a/src/views/error/404.vue
+++ b/src/views/error/404.vue
@@ -7,7 +7,7 @@ defineOptions({
 </script>

 <template>
-  <div class="flex justify-center items-center h-screen-sm">
+  <div class="flex justify-center items-center h-[640px]">
    <noExist />
    <div class="ml-12">
      <p
--- a/src/views/error/500.vue
+++ b/src/views/error/500.vue
@@ -7,7 +7,7 @@ defineOptions({
 </script>

 <template>
-  <div class="flex justify-center items-center h-screen-sm">
+  <div class="flex justify-center items-center h-[640px]">
    <noServer />
    <div class="ml-12">
      <p
--- a/src/views/list/card/components/Card.vue
+++ b/src/views/list/card/components/Card.vue
@@ -46,7 +46,7 @@ const cardLogoClass = computed(() => [

 <template>
  <div :class="cardClass">
-    <div class="list-card-item_detail !bg-white !dark:bg-dark">
+    <div class="list-card-item_detail bg-white dark:bg-dark">
      <el-row justify="space-between">
        <div :class="cardLogoClass">
          <shopIcon v-if="product.type === 1" />
@@ -68,7 +68,7 @@ const cardLogoClass = computed(() => [
            :disabled="!product.isSetup"
            max-height="2"
          >
-            <IconifyIconOffline icon="more-vertical" class="text-size-24px" />
+            <IconifyIconOffline icon="more-vertical" class="text-[24px]" />
            <template #dropdown>
              <el-dropdown-menu :disabled="!product.isSetup">
                <el-dropdown-item @click="handleClickManage(product)">
@@ -82,10 +82,10 @@ const cardLogoClass = computed(() => [
          </el-dropdown>
        </div>
      </el-row>
-      <p class="list-card-item_detail--name color-text_color_primary">
+      <p class="list-card-item_detail--name text-text_color_primary">
        {{ product.name }}
      </p>
-      <p class="list-card-item_detail--desc color-text_color_regular">
+      <p class="list-card-item_detail--desc text-text_color_regular">
        {{ product.description }}
      </p>
    </div>
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -102,13 +102,13 @@ dataThemeChange();
      <!-- 国际化 -->
      <el-dropdown trigger="click">
        <globalization
-          class="hover:color-primary !hover:bg-transparent w-20px h-20px ml-1.5 cursor-pointer outline-none duration-300"
+          class="hover:text-primary hover:!bg-[transparent] w-[20px] h-[20px] ml-1.5 cursor-pointer outline-none duration-300"
        />
        <template #dropdown>
          <el-dropdown-menu class="translation">
            <el-dropdown-item
              :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
              @click="translationCh"
            >
              <IconifyIconOffline
@@ -120,7 +120,7 @@ dataThemeChange();
            </el-dropdown-item>
            <el-dropdown-item
              :style="getDropdownItemStyle(locale, 'en')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
              @click="translationEn"
            >
              <span class="check-en" v-show="locale === 'en'">
@@ -202,7 +202,7 @@ dataThemeChange();

            <Motion :delay="250">
              <el-form-item>
-                <div class="w-full h-20px flex justify-between items-center">
+                <div class="w-full h-[20px] flex justify-between items-center">
                  <el-checkbox v-model="checked">
                    {{ t("login.remember") }}
                  </el-checkbox>
@@ -228,7 +228,7 @@ dataThemeChange();

            <Motion :delay="300">
              <el-form-item>
-                <div class="w-full h-20px flex justify-between items-center">
+                <div class="w-full h-[20px] flex justify-between items-center">
                  <el-button
                    v-for="(item, index) in operates"
                    :key="index"
--- a/src/views/result/success.vue
+++ b/src/views/result/success.vue
@@ -57,7 +57,7 @@ const columns = [
              <span
                role="img"
                aria-label="dingding"
-                class="anticon anticon-dingding cursor-pointer flex items-center cursor-pointer"
+                class="anticon anticon-dingding flex items-center cursor-pointer"
                style="color: rgb(0, 160, 233); margin-left: 8px"
              >
                <svg
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -60,7 +60,7 @@ onMounted(() => {
      ref="formRef"
      :inline="true"
      :model="form"
-      class="bg-white dark:bg-dark w-99/100 pl-8 pt-4"
+      class="bg-white dark:bg-dark w-[99/100] pl-8 pt-4"
    >
      <el-form-item label="部门名称：" prop="user">
        <el-input v-model="form.user" placeholder="请输入部门名称" clearable />
--- a/src/views/system/dict/config.vue
+++ b/src/views/system/dict/config.vue
@@ -88,7 +88,7 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
      size="680px"
    >
      <template #header>
-        <span class="color-black dark:color-white">{{ drawTitle }}</span>
+        <span class="text-black dark:text-white">{{ drawTitle }}</span>
      </template>
      <el-divider />
      <!-- 列表 -->
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -224,10 +224,10 @@ function onHide() {
    <!-- 工具栏 -->
    <vxe-toolbar class="dark:bg-dark">
      <template #buttons>
-        <div class="ml-20px">
-          <label>字典名称：</label>
+        <div class="ml-[20px]">
+          <label class="dark:text-text_color_regular">字典名称： </label>
          <el-input
-            class="!w-200px"
+            class="!w-[200px]"
            v-model="dictData.filterName"
            :placeholder="t('buttons.hssearch')"
            @keyup.prevent="searchEvent"
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -77,7 +77,7 @@ onMounted(() => {
      ref="formRef"
      :inline="true"
      :model="form"
-      class="bg-white dark:bg-dark w-99/100 pl-8 pt-4"
+      class="bg-white dark:bg-dark w-[99/100] pl-8 pt-4"
    >
      <el-form-item label="角色名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入角色名称" clearable />
@@ -175,7 +175,7 @@ onMounted(() => {
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <el-button
-                      class="reset-margin !h-20px !text-gray-500"
+                      class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                      link
                      type="primary"
                      :size="size"
@@ -186,7 +186,7 @@ onMounted(() => {
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button
-                      class="reset-margin !h-20px !text-gray-500"
+                      class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                      link
                      type="primary"
                      :size="size"
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -79,7 +79,7 @@ onMounted(() => {
        ref="formRef"
        :inline="true"
        :model="form"
-        class="bg-white dark:bg-dark w-99/100 pl-8 pt-4"
+        class="bg-white dark:bg-dark w-[99/100] pl-8 pt-4"
      >
        <el-form-item label="用户名称：" prop="username">
          <el-input
@@ -187,7 +187,7 @@ onMounted(() => {
                  <el-dropdown-menu>
                    <el-dropdown-item>
                      <el-button
-                        class="reset-margin !h-20px !text-gray-500"
+                        class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                        link
                        type="primary"
                        :size="size"
@@ -198,7 +198,7 @@ onMounted(() => {
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-button
-                        class="reset-margin !h-20px !text-gray-500"
+                        class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                        link
                        type="primary"
                        :size="size"
--- a/src/views/system/user/tree.vue
+++ b/src/views/system/user/tree.vue
@@ -69,8 +69,8 @@ onMounted(async () => {
 </script>

 <template>
-  <div class="max-w-260px h-full min-h-780px bg-white dark:bg-dark">
-    <div class="flex items-center h-34px">
+  <div class="max-w-[260px] h-full min-h-[780px] bg-white dark:bg-dark">
+    <div class="flex items-center h-[34px]">
      <p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
        部门列表
      </p>
@@ -92,7 +92,7 @@ onMounted(async () => {
      </el-input>
      <el-dropdown>
        <IconifyIconOffline
-          class="w-28px cursor-pointer"
+          class="w-[28px] cursor-pointer"
          width="18px"
          icon="more-vertical"
        />
@@ -100,7 +100,7 @@ onMounted(async () => {
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-button
-                class="reset-margin !h-20px !text-gray-500 !dark:hover:color-primary"
+                class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                link
                type="primary"
                :icon="useRenderIcon('expand')"
@@ -111,7 +111,7 @@ onMounted(async () => {
            </el-dropdown-item>
            <el-dropdown-item>
              <el-button
-                class="reset-margin !h-20px !text-gray-500 !dark:hover:color-primary"
+                class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                link
                type="primary"
                :icon="useRenderIcon('unExpand')"
@@ -122,7 +122,7 @@ onMounted(async () => {
            </el-dropdown-item>
            <el-dropdown-item>
              <el-button
-                class="reset-margin !h-20px !text-gray-500 !dark:hover:color-primary"
+                class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                link
                type="primary"
                :icon="useRenderIcon('reset')"
@@ -159,7 +159,7 @@ onMounted(async () => {
            searchValue.trim().length > 0 &&
              node.label.includes(searchValue) &&
              'text-red-500',
-            highlightMap[node.id]?.highlight ? 'dark:color-primary' : ''
+            highlightMap[node.id]?.highlight ? 'dark:text-primary' : ''
          ]"
          :style="{
            background: highlightMap[node.id]?.highlight
--- a/src/views/tabs/hooks.ts
+++ b/src/views/tabs/hooks.ts
@@ -5,26 +5,48 @@ import { onBeforeMount } from "vue";
 export function useDetail() {
  const route = useRoute();
  const router = useRouter();
-  const id = route.query?.id ?? -1;
+  const id = route.query?.id ? route.query?.id : route.params?.id;

-  function toDetail(index: number | string | string[] | number[]) {
-    useMultiTagsStoreHook().handleTags("push", {
-      path: `/tabs/detail`,
-      parentPath: route.matched[0].path,
-      name: "TabDetail",
-      query: { id: String(index) },
-      meta: {
-        title: { zh: `No.${index} - 详情信息`, en: `No.${index} - DetailInfo` },
-        showLink: false,
-        dynamicLevel: 3
-      }
-    });
-    router.push({ name: "TabDetail", query: { id: String(index) } });
+  function toDetail(
+    index: number | string | string[] | number[],
+    model: string
+  ) {
+    if (model === "query") {
+      // 保存信息到标签页
+      useMultiTagsStoreHook().handleTags("push", {
+        path: `/tabs/query-detail`,
+        name: "TabQueryDetail",
+        query: { id: String(index) },
+        meta: {
+          title: {
+            zh: `No.${index} - 详情信息`,
+            en: `No.${index} - DetailInfo`
+          },
+          // 最大打开标签数
+          dynamicLevel: 3
+        }
+      });
+      // 路由跳转
+      router.push({ name: "TabQueryDetail", query: { id: String(index) } });
+    } else {
+      useMultiTagsStoreHook().handleTags("push", {
+        path: `/tabs/params-detail/:id`,
+        name: "TabParamsDetail",
+        params: { id: String(index) },
+        meta: {
+          title: {
+            zh: `No.${index} - 详情信息`,
+            en: `No.${index} - DetailInfo`
+          }
+        }
+      });
+      router.push({ name: "TabParamsDetail", params: { id: String(index) } });
+    }
  }

-  function initToDetail() {
+  function initToDetail(model) {
    onBeforeMount(() => {
-      if (id) toDetail(id);
+      if (id) toDetail(id, model);
    });
  }

--- a/src/views/tabs/index.vue
+++ b/src/views/tabs/index.vue
@@ -6,8 +6,8 @@ import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import {
  deleteChildren,
-  appendFieldByUniqueId,
-  getNodeByUniqueId
+  getNodeByUniqueId,
+  appendFieldByUniqueId
 } from "@pureadmin/utils";
 import { useDetail } from "./hooks";

@@ -50,12 +50,35 @@ function onCloseTags() {
    <template #header>
      <div>标签页复用，超出限制自动关闭（使用场景: 动态路由）</div>
    </template>
-    <el-button v-for="index in 6" :key="index" @click="toDetail(index)">
-      打开{{ index }}详情页
-    </el-button>
+    <div class="flex flex-wrap items-center">
+      <p>query传参模式：</p>
+      <el-button
+        class="m-2"
+        v-for="index in 6"
+        :key="index"
+        @click="toDetail(index, 'query')"
+      >
+        打开{{ index }}详情页
+      </el-button>
+    </div>
+
+    <el-divider />
+
+    <div class="flex flex-wrap items-center">
+      <p>params传参模式：</p>
+      <el-button
+        class="m-2"
+        v-for="index in 6"
+        :key="index"
+        @click="toDetail(index, 'params')"
+      >
+        打开{{ index }}详情页
+      </el-button>
+    </div>
+
    <el-divider />
    <TreeSelect
-      class="w-300px"
+      class="w-[300px]"
      v-model:value="value"
      show-search
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
@@ -71,7 +94,7 @@ function onCloseTags() {
      :tree-data="treeData"
    >
      <template #tagRender="{ closable, onClose, option }">
-        <el-tag class="mr-3px" :closable="closable" @close="onClose">
+        <el-tag class="mr-[3px]" :closable="closable" @close="onClose">
          {{ transformI18n(option.meta.title) }}
        </el-tag>
      </template>
@@ -80,19 +103,27 @@ function onCloseTags() {
        <span>{{ transformI18n(data.meta.title) }}</span>
      </template>
    </TreeSelect>
-    <el-button class="ml-2" @click="onCloseTags">关闭标签</el-button>
-    <br />
-    <p class="mt-4">
-      注意：此demo并未开启标签页缓存，如果需要在
-      <span class="text-red-500">刷新页面</span>
-      的时候同时
-      <span class="text-red-500">保留标签页的显示</span>
-      或者
-      <span class="text-red-500">保留url的参数</span>
-      ，那么就需要开启标签页持久化。
-      <br />
-      开启方式：在页面最右上角有个设置的小图标，点进去，会看到项目配置面板，找到标签页持久化开启即可。
-    </p>
+    <el-button class="m-2" @click="onCloseTags">关闭标签</el-button>
+
+    <el-divider />
+    <el-button @click="$router.push({ name: 'Menu1-2-2' })">
+      跳转页内菜单（传name对象，优先推荐）
+    </el-button>
+    <el-button @click="$router.push('/nested/menu1/menu1-2/menu1-2-2')">
+      跳转页内菜单（直接传要跳转的路径）
+    </el-button>
+    <el-button
+      @click="$router.push({ path: '/nested/menu1/menu1-2/menu1-2-2' })"
+    >
+      跳转页内菜单（传path对象）
+    </el-button>
+    <el-link
+      class="ml-4"
+      href="https://router.vuejs.org/zh/guide/essentials/navigation.html#%E5%AF%BC%E8%88%AA%E5%88%B0%E4%B8%8D%E5%90%8C%E7%9A%84%E4%BD%8D%E7%BD%AE"
+      target="_blank"
+    >
+      点击查看更多跳转方式
+    </el-link>

    <el-divider />
    <el-button @click="$router.push({ name: 'Empty' })">
--- a/src/views/tabs/params-detail.vue
+++ b/src/views/tabs/params-detail.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useDetail } from "./hooks";
+
+defineOptions({
+  name: "TabParamsDetail"
+});
+
+const { initToDetail, id } = useDetail();
+initToDetail("params");
+</script>
+
+<template>
+  <div>{{ id }} - 详情页内容在此（params传参）</div>
+</template>
--- a/src/views/tabs/query-detail.vue
+++ b/src/views/tabs/query-detail.vue
@@ -2,13 +2,13 @@
 import { useDetail } from "./hooks";

 defineOptions({
-  name: "TabDetail"
+  name: "TabQueryDetail"
 });

 const { initToDetail, id } = useDetail();
-initToDetail();
+initToDetail("query");
 </script>

 <template>
-  <div>{{ id }} - 详情页内容在此</div>
+  <div>{{ id }} - 详情页内容在此（query传参）</div>
 </template>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
xiaoxian521	ad6ced45cc	release: update `3.5.0`	2022-09-10 21:44:17 +08:00
xiaoxian521	3d96b9acd4	chore: update	2022-09-09 00:02:15 +08:00
xiaoxian521	594f9b98ab	feat: 添加`cssnano`，打包时压缩`css`体积	2022-09-08 17:23:48 +08:00
xiaoxian521	392105e820	chore: use pnpm `shell-emulator` instead of `cross-env`	2022-09-07 21:59:03 +08:00
xiaoxian521	f629663641	chore: update	2022-09-07 16:55:49 +08:00
RealityBoy	3683bd46a4	refactor: use `tailwindcss` replace `unocss` (#342 ) * refactor: use `tailwindcss` replace `unocss` * fix: update	2022-09-07 15:07:01 +08:00
Yalin	4dfde1bea6	docs：注释文案修正 (#344 )	2022-09-07 14:09:54 +08:00
xiaoxian521	4e506555ad	fix: token过期，刷新死循环	2022-09-06 23:22:06 +08:00
xiaoxian521	45f912c2f5	chore: update	2022-09-05 22:21:10 +08:00
xiaoxian521	d44b35937b	chore: update	2022-09-04 12:34:43 +08:00
xiaoxian521	594abd7372	chore: update	2022-09-03 13:56:30 +08:00
xiaoxian521	869964ea7e	chore: update	2022-08-31 11:37:18 +08:00
xiaoxian521	4c26318126	docs: update	2022-08-31 11:19:27 +08:00
xiaoxian521	ab3468b758	chore: update	2022-08-31 11:01:36 +08:00
xiaoxian521	1dbd29735e	docs: update	2022-08-31 01:39:09 +08:00
xiaoxian521	2def54c775	workflow: add gitee Deploy	2022-08-31 00:40:03 +08:00
xiaoxian521	67e8532d37	chore: update	2022-08-29 17:14:25 +08:00
一万	fb2c016ebe	feat: add el-table-infinite-scroll demo (#335 )	2022-08-24 23:25:00 +08:00
xiaoxian521	3056527701	perf: 重置路由时，清空缓存页面	2022-08-24 16:08:05 +08:00
xiaoxian521	cef79dfca0	chore: `window.process`定义在`index.html`中，防止低版本浏览器报错	2022-08-24 09:46:19 +08:00
xiaoxian521	769410efdf	chore: 开启`vscode`括号对指南	2022-08-23 20:47:35 +08:00
xiaoxian521	c7dbb07858	chore: update `unocss`	2022-08-23 17:59:38 +08:00
xiaoxian521	cc92b3e51e	style: reset.scss	2022-08-23 16:58:52 +08:00
xiaoxian521	88bba7555b	release: update 3.4.6	2022-08-23 10:31:44 +08:00
xiaoxian521	30c682bd24	fix: 修复`iframe`加载失败	2022-08-23 10:24:40 +08:00
SampsonYe(叶飞)	3baffa11e4	fix: 修复动态路由子级长度为0时抛出异常 (#333 )	2022-08-23 10:10:49 +08:00
xiaoxian521	1ed598c5f2	fix: process is not defined in path	2022-08-23 09:55:23 +08:00
xiaoxian521	185d779c8d	release: update 3.4.5	2022-08-22 20:21:53 +08:00
xiaoxian521	241fc618b8	fix: 修复本地响应式存储对象设置问题	2022-08-22 20:17:50 +08:00
xiaoxian521	3a0b2e04d4	release: update 3.4.0	2022-08-22 17:21:18 +08:00
xiaoxian521	cec867297d	chore: update	2022-08-22 16:16:17 +08:00
RealityBoy	cbe539c727	Refactor/tags (#332 ) * refactor: tags * chore: update * chore: update * chore: update * chore: update	2022-08-22 15:49:29 +08:00
xiaoxian521	7c84d9eb70	perf: router	2022-08-22 10:19:10 +08:00
xiaoxian521	5a7187d22f	perf: 移动端优化	2022-08-21 10:49:27 +08:00
xiaoxian521	a7e8249ae6	chore: update	2022-08-21 10:26:09 +08:00
xiaoxian521	d81ab81fb0	chore: update	2022-08-21 07:31:59 +08:00
xiaoxian521	846e7350fb	chore: update	2022-08-19 23:01:45 +08:00
xiaoxian521	102f27fe30	chore: update `element-plus@2.2.14` and perf menu	2022-08-19 21:41:49 +08:00
newives	0e76bd4aac	perf: 清空缓存并返回登录页时添加重置路由 (#329 ) Co-authored-by: xiaoxian521 <1923740402@qq.com>	2022-08-19 15:56:39 +08:00