release: update 3.5.0

* refactor: use `tailwindcss` replace `unocss`

* fix: update

.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

.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

.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"],

.npmrc

@@ -0,0 +1,3 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
+shell-emulator=true

.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"
   ]
 }

.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",

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

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

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

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">

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" />
 
 ## 许可证
 

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"] }),

index.html

@@ -2,9 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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>

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:

locales/zh-CN.yaml

@@ -86,6 +86,7 @@ menus:
   hsVirtualList: 虚拟列表
   hsPdf: PDF预览
   hsExecl: 导出Excel
+  hsInfiniteScroll: 表格无限滚动
 status:
   hsLoad: 加载中...
 login:

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",
+      path: "/tabs/query-detail",
-      name: "TabDetail",
+      name: "TabQueryDetail",
       meta: {
-        title: "",
+        // 不在menu菜单中显示
-        showLink: false,
+        showLink: false
-        dynamicLevel: 3,
+      }
-        refreshRedirect: "/tabs/index"
+    },
+    {
+      path: "/tabs/params-detail/:id",
+      component: "params-detail",
+      name: "TabParamsDetail",
+      meta: {
+        showLink: false
       }
     }
   ]

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": "rimraf dist && NODE_OPTIONS=--max-old-space-size=8192 vite build",
-    "build:staging": "rimraf dist && cross-env vite build --mode staging",
+    "build:staging": "rimraf dist && vite build --mode staging",
-    "report": "rimraf dist && cross-env vite build",
+    "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:eslint": "eslint --cache --max-warnings 0  \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix",
-    "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
+    "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-legacy": "^2.1.0",
-    "@vitejs/plugin-vue": "^3.0.1",
+    "@vitejs/plugin-vue": "^3.1.0",
-    "@vitejs/plugin-vue-jsx": "^2.0.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",
-    "unplugin-vue-define-options": "^0.7.3",
+    "vite": "^3.1.0",
-    "vite": "^3.0.8",
     "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"
       ]
     }

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: {} } : {})
+  }
 };

public/serverConfig.json

@@ -1,5 +1,5 @@
 {
-  "Version": "3.3.5",
+  "Version": "3.5.0",
   "Title": "PureAdmin",
   "FixedHeader": true,
   "HiddenSideBar": false,

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"
       >

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)"

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)"
                   >

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

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"
+      @touchstart.passive="touchStart"
-      @touchmove="touchMove"
+      @touchmove.passive="touchMove"
       @touchend="touchEnd"
-      @mousewheel="wheel"
+      @mousewheel.passive="wheel"
     >
       <div :ref="'slotList' + classOption['key']" :style="float">
         <slot />

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>

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">

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>

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>

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

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" />
       确认

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" />

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,
+    darkMode: $storage.layout?.darkMode,
-    sidebarStatus: $storage.layout.sidebarStatus
+    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>

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) {
+  if (!name) return false;
-    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 !== "/") {
+    if (path !== "/") matched.push(findRouteByPath(path, routes));
-      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 (currentRoute?.path !== "/welcome") matched.push(currentRoute);
-  if (!isDashboard(first)) {
+
+  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
   );
 };
 
+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()
+  () => {
-);
+    getBreadcrumb();
-
-watch(
-  () => route.query,
-  () => getBreadcrumb()
-);
-
-const handleLink = (item: RouteLocationMatched): any => {
-  const { redirect, path } = item;
-  if (redirect) {
-    router.push(redirect.toString());
-    return;
   }
-  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">
+      <el-breadcrumb-item v-for="item in levelList" :key="item.path">
-        <span
+        <a @click.prevent="handleLink(item)">
-          v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
-          class="no-redirect"
-        >
-          {{ transformI18n(item.meta.title) }}
-        </span>
-        <a v-else @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>

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">

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>

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">

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>

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 { toggleClass, removeClass } from "@pureadmin/utils";
-import { RouteConfigs, tagsViewsType } from "../../types";
+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 { ref, watch, unref, toRaw, nextTick, onBeforeMount } from "vue";
-import { templateRef, useResizeObserver, useDebounceFn } from "@vueuse/core";
-import {
-  toggleClass,
-  removeClass,
-  hasClass,
-  storageLocal
-} from "@pureadmin/utils";
 
-const { t } = useI18n();
+const {
-const route = useRoute();
+  route,
-const router = useRouter();
+  router,
-const translateX = ref<number>(0);
+  visible,
-const activeIndex = ref<number>(-1);
+  showTags,
-let refreshButton = "refresh-button";
+  instance,
-const instance = getCurrentInstance();
+  multiTags,
-const pureSetting = useSettingStoreHook();
+  tagsViews,
-const tabDom = templateRef<HTMLElement | null>("tabDom", null);
+  buttonTop,
-const containerDom = templateRef<HTMLElement | null>("containerDom", null);
+  buttonLeft,
-const scrollbarDom = templateRef<HTMLElement | null>("scrollbarDom", null);
+  showModel,
-const showTags =
+  translateX,
-  ref(storageLocal.getItem<StorageConfigs>("responsive-configure").hideTabs) ??
+  activeIndex,
-  "false";
+  getTabStyle,
-// @ts-expect-error
+  iconIsActive,
-let multiTags: ComputedRef<Array<RouteConfigs>> = computed(() => {
+  linkIsActive,
-  return useMultiTagsStoreHook()?.multiTags;
+  currentSelect,
-});
+  scheduleIsActive,
+  getContextMenuStyle,
+  closeMenu,
+  onMounted,
+  onMouseenter,
+  onMouseleave,
+  transformI18n
+} = useTags();
 
-const linkIsActive = computed(() => {
+const tabDom = ref();
-  return item => {
+const containerDom = ref();
-    if (Object.keys(route.query).length === 0) {
+const scrollbarDom = ref();
-      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 dynamicTagView = () => {
   const index = multiTags.value.findIndex(item => {
-    if (item?.query) {
+    if (item.query) {
-      return isEqual(route?.query, 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]) {
+  const tabNavPadding = 10;
-    return;
+  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(() => {
+    if (newRoute[0]?.query) {
-      router.push({
+      router.push({ name: newRoute[0].name, query: newRoute[0].query });
-        path: newRoute[0].path,
+    } else if (newRoute[0]?.params) {
-        query: newRoute[0].query
+      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 => {
+    if (multiTags.value.some(item => item.path === route.path)) return;
-      return item.path === route.path;
+    if (newRoute[0]?.query) {
-    });
+      router.push({ name: newRoute[0].name, query: newRoute[0].query });
-    !isHasActiveTag &&
+    } else if (newRoute[0]?.params) {
-      router.push({
+      router.push({ name: newRoute[0].name, params: newRoute[0].params });
-        path: newRoute[0].path,
+    } else {
-        query: newRoute[0].query
+      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,64 +393,37 @@ 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);
 }
 
-// 鼠标移入
+/** 触发tags标签切换 */
-function onMouseenter(index) {
+function tagOnClick(item) {
-  if (index) activeIndex.value = index;
+  const { name, path } = item;
-  if (unref(showModel) === "smart") {
+  if (name) {
-    if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
+    if (item.query) {
-      return;
+      router.push({
-    toggleClass(true, "schedule-in", instance.refs["schedule" + index][0]);
+        name,
-    toggleClass(false, "schedule-out", instance.refs["schedule" + index][0]);
+        query: item.query
+      });
+    } else if (item.params) {
+      router.push({
+        name,
+        params: item.params
+      });
     } else {
-    if (hasClass(instance.refs["dynamic" + index][0], "card-active")) return;
+      router.push({ name });
-    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;
+    router.push({ path });
-    toggleClass(false, "card-in", instance.refs["dynamic" + index][0]);
-    toggleClass(true, "card-out", instance.refs["dynamic" + index][0]);
   }
+  // showMenuModel(item?.path, item?.query);
 }
 
-watch(
-  () => visible.value,
-  val => {
-    if (val) {
-      document.body.addEventListener("click", closeMenu);
-    } else {
-      document.body.removeEventListener("click", closeMenu);
-    }
-  }
-);
-
 onBeforeMount(() => {
   if (!instance) return;
 
@@ -626,14 +450,18 @@ onBeforeMount(() => {
   });
 });
 
-const getTabStyle = computed((): CSSProperties => {
+watch([route], () => {
-  return {
+  activeIndex.value = -1;
-    transform: `translateX(${translateX.value}px)`
+  dynamicTagView();
-  };
 });
 
-const getContextMenuStyle = computed((): CSSProperties => {
+onMounted(() => {
-  return { left: buttonLeft.value + "px", top: buttonTop.value + "px" };
+  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>

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 = {
-    $storage.layout.darkMode = dataTheme.value;
+      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");
     }
   }

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";
     };
   });
 

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
+  };
+}

src/layout/index.vue

@@ -144,8 +144,8 @@ const layoutHeader = defineComponent({
                   {
                     default: () => [
                       !pureSetting.hiddenSideBar
-                        ? h(fullScreen, { class: "dark:color-white" })
+                        ? h(fullScreen, { class: "dark:text-white" })
-                        : h(exitScreen, { class: "dark:color-white" })
+                        : h(exitScreen, { class: "dark:text-white" })
                     ]
                   }
                 )

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;

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";

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,
+  RouteComponent
-  RouteRecordName
 } from "vue-router";
 import {
   ascending,
   initRouter,
   getHistoryMode,
-  getParentPaths,
   findRouteByPath,
   handleAliveRoute,
   formatTwoStageRoutes,
@@ -109,6 +106,7 @@ export function resetRouter() {
       );
     }
   });
+  usePermissionStoreHook().clearAllCachePage();
 }
 
 // 路由白名单
@@ -148,32 +146,6 @@ 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 => {
-              useMultiTagsStoreHook().handleTags("push", {
-                path,
-                parentPath,
-                name,
-                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;
@@ -183,34 +155,13 @@ router.beforeEach((to: toRouteType, _from, next) => {
                 ? router.options.routes[0].children
                 : router.options.routes;
             const route = findRouteByPath(path, routes);
-              const routePartent = getParentPaths(path, routes);
+            // query、params模式路由传参数的标签页不在此处处理
-              // 未开启标签页缓存，刷新页面重定向到顶级路由（参考标签页操作例子，只针对动态路由）
+            if (route && route.meta?.title) {
-              if (
+              useMultiTagsStoreHook().handleTags("push", {
-                path !== routes[0].path &&
+                path: route.path,
-                route?.meta?.rank !== 0 &&
+                name: route.name,
-                routePartent.length === 0
+                meta: route.meta
-              ) {
+              });
-                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);

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")
+      }
     }
   ]
 };

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",

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",

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",

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",

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",

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",

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",

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",

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"),

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",

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",

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;
   };
 }

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) {
+    // 父级的redirect属性取值：如果子级存在且父级的redirect属性不存在，默认取第一个子级的path；如果子级存在且父级的redirect属性存在，取存在的redirect属性，会覆盖默认值
-      v.component = Layout;
+    if (v?.children && v.children.length && !v.redirect)
-    } else if (v.meta?.frameSrc) {
+      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);
     }
   });

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
                 );

src/store/modules/permission.ts

@@ -63,6 +63,9 @@ export const usePermissionStore = defineStore({
     },
     // 清空缓存页面
     clearAllCachePage() {
+      this.wholeMenus = [];
+      this.menusTree = [];
+      this.buttonAuth = [];
       this.cachePageList = [];
     }
   }

src/store/modules/types.ts

@@ -27,6 +27,7 @@ export type multiType = {
   name: string;
   meta: any;
   query?: object;
+  params?: object;
 };
 
 export type setType = {

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);

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 {

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;

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 */
 }
 

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 {

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];
+  }
+}

src/views/able/ant-anchor.vue

@@ -37,8 +37,8 @@ function handleAnchorClick(e, link) {
         </span>
       </div>
     </template>
-    <div class="w-400px">
+    <div class="w-[400px]">
-      <Anchor class="float-left mt-200px" @click="handleAnchorClick">
+      <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

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' }"

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

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>

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"

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>

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" />

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>

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>

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..."

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" />
+      <vertical-list class="h-[500px] w-[500px]" />
-      <horizontal-list class="h-500px w-500px" />
+      <horizontal-list class="h-[500px] w-[500px]" />
     </div>
   </el-card>
 </template>

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..."

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>

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>
 

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>
 

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

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

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

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>

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"

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

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 />

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 />
       <!-- 列表 -->

src/views/system/dict/index.vue

@@ -224,10 +224,10 @@ function onHide() {
     <!-- 工具栏 -->
     <vxe-toolbar class="dark:bg-dark">
       <template #buttons>
-        <div class="ml-20px">
+        <div class="ml-[20px]">
-          <label>字典名称：</label>
+          <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"

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"

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"

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="max-w-[260px] h-full min-h-[780px] bg-white dark:bg-dark">
-    <div class="flex items-center h-34px">
+    <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

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

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)">
+    <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>
+    <el-button class="m-2" @click="onCloseTags">关闭标签</el-button>
-    <br />
+
-    <p class="mt-4">
+    <el-divider />
-      注意：此demo并未开启标签页缓存，如果需要在
+    <el-button @click="$router.push({ name: 'Menu1-2-2' })">
-      <span class="text-red-500">刷新页面</span>
+      跳转页内菜单（传name对象，优先推荐）
-      的时候同时
+    </el-button>
-      <span class="text-red-500">保留标签页的显示</span>
+    <el-button @click="$router.push('/nested/menu1/menu1-2/menu1-2-2')">
-      或者
+      跳转页内菜单（直接传要跳转的路径）
-      <span class="text-red-500">保留url的参数</span>
+    </el-button>
-      ，那么就需要开启标签页持久化。
+    <el-button
-      <br />
+      @click="$router.push({ path: '/nested/menu1/menu1-2/menu1-2-2' })"
-      开启方式：在页面最右上角有个设置的小图标，点进去，会看到项目配置面板，找到标签页持久化开启即可。
+    >
-    </p>
+      跳转页内菜单（传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' })">

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>

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>