release: update 4.4.0

* perf: 页面切换性能优化

* fix: 修复刷新页面时`router.beforeEach`调用两次的问题

.dockerignore

@@ -0,0 +1,21 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+.eslintcache
+report.html
+
+yarn.lock
+npm-debug.log*
+.pnpm-error.log*
+.pnpm-debug.log
+tests/**/coverage/
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+tsconfig.tsbuildinfo

.env.staging

@@ -1,6 +1,6 @@
 # 预发布也需要生产环境的行为
 # https://cn.vitejs.dev/guide/env-and-mode.html#modes
-NODE_ENV=production
+# NODE_ENV = development
 
 VITE_PUBLIC_PATH = /
 

.github/workflows/gitee.yml

@@ -1,39 +0,0 @@
-name: Build and Deploy
-permissions:
-  contents: write
-on:
-  push:
-    branches:
-      - master
-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 --no-frozen-lockfile
-          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

.vscode/extensions.json

@@ -3,6 +3,7 @@
     "christian-kohler.path-intellisense",
     "vscode-icons-team.vscode-icons",
     "davidanson.vscode-markdownlint",
+    "ms-azuretools.vscode-docker",
     "stylelint.vscode-stylelint",
     "bradlc.vscode-tailwindcss",
     "dbaeumer.vscode-eslint",

.vscode/vue3.0.code-snippets

@@ -1,19 +1,19 @@
 {
   "Vue3.0快速生成模板": {
+    "scope": "vue",
     "prefix": "Vue3.0",
     "body": [
       "<template>",
-      "\t<div>\n",
+      "\t<div>test</div>",
-      "\t</div>",
       "</template>\n",
       "<script lang='ts'>",
       "export default {",
-      "\tsetup(){",
+      "\tsetup() {",
-      "\t\treturn{\n\n\t\t}",
+      "\t\treturn {}",
-      "\t},",
+      "\t}",
       "}",
       "</script>\n",
-      "<style scoped>\n",
+      "<style lang='scss' scoped>\n",
       "</style>",
       "$2"
     ],

.vscode/vue3.2.code-snippets

@@ -1,14 +1,14 @@
 {
   "Vue3.2+快速生成模板": {
+    "scope": "vue",
     "prefix": "Vue3.2+",
     "body": [
       "<script setup lang='ts'>",
       "</script>\n",
       "<template>",
-      "\t<div>\n",
+      "\t<div>test</div>",
-      "\t</div>",
       "</template>\n",
-      "<style scoped>\n",
+      "<style lang='scss' scoped>\n",
       "</style>",
       "$2"
     ],

.vscode/vue3.3.code-snippets

@@ -0,0 +1,20 @@
+{
+  "Vue3.3+defineOptions快速生成模板": {
+    "scope": "vue",
+    "prefix": "Vue3.3+",
+    "body": [
+      "<script setup lang='ts'>",
+      "defineOptions({",
+      "\tname: ''",
+      "})",
+      "</script>\n",
+      "<template>",
+      "\t<div>test</div>",
+      "</template>\n",
+      "<style lang='scss' scoped>\n",
+      "</style>",
+      "$2"
+    ],
+    "description": "Vue3.3+defineOptions快速生成模板"
+  }
+}

CHANGELOG.en_US.md

@@ -1,3 +1,57 @@
+# 4.4.0 (2023-06-14)
+
+### 🎫 Feat
+
+- Route `meta` adds `activePath` attribute, which can activate a menu (mainly used for routes that pass parameters through `query` or `params`, when they are not displayed in the menu after configuring `showLink: false`, they will be There will be no menu highlighting, but you can get highlighting by setting `activePath` to specify the active menu, `activePath` is the `path` of the specified active menu [View details](https://github.com/pure-admin/vue-pure-admin/commit/58cafbc73ffa27253446ee93077e1e382519ce8a#commitcomment-117834411))
+- Example of advanced usage of `pure-admin-table` to add adaptive content area height
+- Add anti-shake, throttling and text copy instructions and standardize the prompts when custom instructions are used incorrectly and add usage examples
+- Add `el-empty` component when the `notice` message prompts the component to have empty data
+- Example code of functional popup window adding subcomponent `prop` as `primitive` type example
+- Add `vscode-docker` plugin
+
+### 🐞 Bug fixes
+
+- Fix internationalization switch to English mode and refresh will return to Chinese mode
+- Fixed the problem that the pop-up mask of the search menu function did not cover the left menu
+
+### 🍏 Perf
+
+- Page switching performance optimization, regardless of the network, the speed of page switching logic is almost `3-4` times faster than before [View optimization details](https://github.com/pure-admin/vue-pure-admin/pull/600#issuecomment-1586094078)
+-Optimized tab page operation-routing parameter transfer mode usage
+- All tables in the system management are changed to adaptive content area height, need to upgrade `@pureadmin/table` to the latest version
+- Use the `useResizeObserver` function of `vueuse` to replace the `v-resize` custom directive, and the performance will be better from the performance after testing
+- For unbound public events, unbind when the page is destroyed
+
+# 4.3.0 (2023-06-04)
+
+### 🎫 Feat
+
+- Add `docker` support
+- Add project version real-time update detection function
+- Improve system management - role management page
+- Waterfall component adds infinite scrolling
+- Add `updateDialog` to the functional bullet box to change the property value of the bullet box itself
+- `wangeditor` rich text add multiple rich text and custom image upload examples
+- Advanced usage of `pure-table` table added keep checked `CheckBox` option example
+- Added `title` slot to `RePureTableBar` component
+
+### 🐞 Bug fixes
+
+- Fixed the problem that the countdown to obtain the verification code will be disabled with a delay of `1s`
+- Fixed the problem that the icon selector did not initialize the preview correctly
+- Fixed dynamic routing redirection causing duplicate content on tabs
+- Fix the problem that the `getTopMenu()` function cannot get `path` and report an error when the page is forced to refresh
+- Fix the problem that the left menu does not display as a whole due to the sudden pull up after the left menu is folded
+- Fixed `RePureTableBar` scrollbar issue in `windows` after turning off column settings
+
+### 🍏 Perf
+
+-Optimized tab page operation-routing parameter transfer mode usage
+
+- Optimize menu search function and style
+- Update `vscode` code snippets
+- Optimize the initialization call timing of `dataThemeChange` theme setting
+
 # 4.2.0 (2023-05-15)
 
 ### 🎫 Feat

CHANGELOG.md

@@ -1,3 +1,57 @@
+# 4.4.0 (2023-06-14)
+
+### 🎫 Feat
+
+- Route `meta` adds `activePath` attribute, which can activate a menu (mainly used for routes that pass parameters through `query` or `params`, when they are not displayed in the menu after configuring `showLink: false`, they will be There will be no menu highlighting, but you can get highlighting by setting `activePath` to specify the active menu, `activePath` is the `path` of the specified active menu [View details](https://github.com/pure-admin/vue-pure-admin/commit/58cafbc73ffa27253446ee93077e1e382519ce8a#commitcomment-117834411))
+- Example of advanced usage of `pure-admin-table` to add adaptive content area height
+- Add anti-shake, throttling and text copy instructions and standardize the prompts when custom instructions are used incorrectly and add usage examples
+- Add `el-empty` component when the `notice` message prompts the component to have empty data
+- Example code of functional popup window adding subcomponent `prop` as `primitive` type example
+- Add `vscode-docker` plugin
+
+### 🐞 Bug fixes
+
+- Fix internationalization switch to English mode and refresh will return to Chinese mode
+- Fixed the problem that the pop-up mask of the search menu function did not cover the left menu
+
+### 🍏 Perf
+
+- Page switching performance optimization, regardless of the network, the speed of page switching logic is almost `3-4` times faster than before [View optimization details](https://github.com/pure-admin/vue-pure-admin/pull/600#issuecomment-1586094078)
+-Optimized tab page operation-routing parameter transfer mode usage
+- All tables in the system management are changed to adaptive content area height, need to upgrade `@pureadmin/table` to the latest version
+- Use the `useResizeObserver` function of `vueuse` to replace the `v-resize` custom directive, and the performance will be better from the performance after testing
+- For unbound public events, unbind when the page is destroyed
+
+# 4.3.0 (2023-06-04)
+
+### 🎫 Feat
+
+- Add `docker` support
+- Add project version real-time update detection function
+- Improve system management - role management page
+- Waterfall component adds infinite scrolling
+- Add `updateDialog` to the functional bullet box to change the property value of the bullet box itself
+- `wangeditor` rich text add multiple rich text and custom image upload examples
+- Advanced usage of `pure-table` table added keep checked `CheckBox` option example
+- Added `title` slot to `RePureTableBar` component
+
+### 🐞 Bug fixes
+
+- Fixed the problem that the countdown to obtain the verification code will be disabled with a delay of `1s`
+- Fixed the problem that the icon selector did not initialize the preview correctly
+- Fixed dynamic routing redirection causing duplicate content on tabs
+- Fix the problem that the `getTopMenu()` function cannot get `path` and report an error when the page is forced to refresh
+- Fix the problem that the left menu does not display as a whole due to the sudden pull up after the left menu is folded
+- Fixed `RePureTableBar` scrollbar issue in `windows` after turning off column settings
+
+### 🍏 Perf
+
+-Optimized tab page operation-routing parameter transfer mode usage
+
+- Optimize menu search function and style
+- Update `vscode` code snippets
+- Optimize the initialization call timing of `dataThemeChange` theme setting
+
 # 4.2.0 (2023-05-15)
 
 ### 🎫 Feat

CHANGELOG.zh_CN.md

@@ -1,3 +1,56 @@
+# 4.4.0 (2023-06-14)
+
+### 🎫 Feat
+
+- 路由 `meta` 添加 `activePath` 属性，可将某个菜单激活（主要用于通过 `query` 或 `params` 传参的路由，当它们通过配置 `showLink: false` 后不在菜单中显示，就不会有任何菜单高亮，而通过设置 `activePath` 指定激活菜单即可获得高亮，`activePath` 为指定激活菜单的 `path` [查看详情](https://github.com/pure-admin/vue-pure-admin/commit/58cafbc73ffa27253446ee93077e1e382519ce8a#commitcomment-117834411)）
+- `pure-admin-table` 高级用法添加自适应内容区高度示例
+- 添加防抖、节流和文本复制指令并规范自定义指令用法错误时的提示以及添加使用示例
+- `notice` 消息提示组件空数据时添加 `el-empty` 组件
+- 函数式弹窗示例代码添加子组件 `prop` 为 `primitive` 类型的示例
+- 添加 `vscode-docker` 插件
+
+### 🐞 Bug fixes
+
+- 修复国际化切换到英文模式刷新会回到中文模式
+- 修复搜索菜单功能的弹框遮罩未覆盖左侧菜单的问题
+
+### 🍏 Perf
+
+- 页面切换性能优化，不考虑网络的情况下，页面切换逻辑的速度差不多比之前快 `3-4` 倍 [查看优化详情](https://github.com/pure-admin/vue-pure-admin/pull/600#issuecomment-1586094078)
+- 优化标签页操作-路由传参模式用法
+- 系统管理中表格均改为自适应内容区高度，需将 `@pureadmin/table` 升级到最新版
+- 使用 `vueuse` 的 `useResizeObserver` 函数替换 `v-resize` 自定义指令，从测试后的表现来看性能会更好
+- 对未解绑的公共事件，在页面销毁时解绑
+
+# 4.3.0 (2023-06-04)
+
+### 🎫 Feat
+
+- 添加 `docker` 支持
+- 添加项目版本实时更新检测功能
+- 完善系统管理-角色管理页面
+- 瀑布流组件添加无限滚动
+- 函数式弹框添加 `updateDialog` 更改弹框自身属性值方法
+- `wangeditor` 富文本添加多个富文本和自定义图片上传示例
+- `pure-table` 表格高级用法添加保留已选中的 `CheckBox` 选项示例
+- `RePureTableBar` 组件添加 `title` 插槽
+
+### 🐞 Bug fixes
+
+- 修复获取验证码倒计时会有 `1s` 延时禁用的问题
+- 修复图标选择器未正确初始化预览问题
+- 修复动态路由重定向造成标签页出现重复内容
+- 修复强制刷新页面 `getTopMenu()` 函数获取不到 `path` 报错的问题
+- 修复左侧菜单折叠后突然拉升造成左侧菜单整体不显示的问题
+- 修复 `RePureTableBar` 关闭列设置后在 `windows` 出现滚动条的问题
+
+### 🍏 Perf
+
+- 优化标签页操作-路由传参模式用法
+- 优化菜单搜索功能和样式
+- 更新 `vscode` 代码片段
+- 优化 `dataThemeChange` 主题设置的初始化调用时机
+
 # 4.2.0 (2023-05-15)
 
 ### 🎫 Feat

Dockerfile

@@ -0,0 +1,20 @@
+FROM node:16-alpine as build-stage
+
+WORKDIR /app
+RUN corepack enable
+RUN corepack prepare pnpm@7.32.1 --activate
+
+RUN npm config set registry https://registry.npmmirror.com
+
+COPY .npmrc package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile
+
+COPY . .
+RUN pnpm build
+
+FROM nginx:stable-alpine as production-stage
+
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

README.en-US.md

@@ -22,10 +22,9 @@ The simplified version is based on the shelf extracted from [vue-pure-admin](htt
 - [Click Watch Tutorial](https://www.bilibili.com/video/BV1kg411v7QT)
 - [Click Watch UI Design](https://www.bilibili.com/video/BV17g411T7rq)
 
-## Docs (support `PWA` fast, offline access)
+## Docs
 
-- [Click me to view the domestic documentation site](https://yiming_chang.gitee.io/pure-admin-doc)
+- [documentation site](https://yiming_chang.gitee.io/pure-admin-doc)
-- [Click me to view foreign document site](https://pure-admin.github.io/pure-admin-doc)
 
 ## Tauri
 
@@ -37,8 +36,7 @@ The simplified version is based on the shelf extracted from [vue-pure-admin](htt
 
 ## Preview
 
-- [Click me to view the domestic preview station](https://yiming_chang.gitee.io/vue-pure-admin)
+- [preview station](https://yiming_chang.gitee.io/vue-pure-admin)
-- [Click me to view foreign preview site](https://pure-admin.github.io/vue-pure-admin)
 
 - PC
 <p align="center">
@@ -92,6 +90,28 @@ pnpm serve
 pnpm build
 ```
 
+## Docker support
+
+1. Customize the image named `vue-pure-admin` (please note that there is a dot `.` at the end of the command below, indicating that the `Dockerfile` file in the current path is used, and the path can be specified according to the actual situation)
+
+```bash
+docker build -t vue-pure-admin .
+```
+
+2. Port mapping and start the `docker` container (`8080:80`: indicates that the `80` port is used in the container, and the port is forwarded to the `8080` port of the host; `pure-admin`: indicates a custom container name; `vue-pure-admin`: indicates the custom image name)
+
+```bash
+docker run -dp 8080:80  --name pure-admin vue-pure-admin
+```
+
+After operating the above two commands, open `http://localhost:8080` in the browser to preview
+
+Of course, you can also operate the `docker` project through the [Docker Desktop](https://www.docker.com/products/docker-desktop/) visual interface, as shown below
+
+<p align="center">
+  <img alt="docker" width="100%" src="https://yiming_chang.gitee.io/pure-admin-doc/img/docker/1.jpg">
+</p>
+
 ## Change Log
 
 [CHANGELOG](./CHANGELOG.en_US.md)
@@ -140,34 +160,12 @@ Support modern browsers, not IE
 
 [xiaoxian521](https://github.com/xiaoxian521)、[Ten-K](https://github.com/Ten-K)
 
-## Donate
-
-If you think this project is helpful to you, you can help the author buy a glass of juice 🍹 Show your support
-
-<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f69bf13c5b854ed5b699807cafa0e3ce~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp?" width="150px" height="150px" />
-
 ## License
 
-In principle, no fees and copyrights are charged, and you can use it with confidence, but if you need secondary open source, please contact the author for permission!
+In principle, no fees and copyrights are charged, and it is commercially available, but if you need secondary open source (such as using this platform for secondary development and open source, the front-end code must be open source and free), please contact the author for permission! (Free, just take a record)
 
 [MIT © 2020-present, pure-admin](./LICENSE)
 
-## Backers
-
-Thank you very much for your support, I believe the project will get better and better :heart:
-
-|                                                                xueyuheng                                                                 |                                                                taolei1990                                                                 |                                                                hang-kim                                                                 |                                                               madwolfcrazy                                                                |                                                                limuen                                                                 |                                                                BenLakes                                                                 |
-| :--------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------: |
-| <a href="https://github.com/xueyuheng"><img src="https://avatars.githubusercontent.com/u/48202935?v=4" width="60px" height="60px" /></a> | <a href="https://github.com/taolei1990"><img src="https://avatars.githubusercontent.com/u/23173640?v=4" width="60px" height="60px" /></a> | <a href="https://github.com/hang-kim"><img src="https://avatars.githubusercontent.com/u/52914259?v=4" width="60px" height="60px" /></a> | <a href="https://github.com/madwolfcrazy"><img src="https://avatars.githubusercontent.com/u/223671?v=4" width="60px" height="60px" /></a> | <a href="https://github.com/limuen"><img src="https://avatars.githubusercontent.com/u/31790606?v=4" width="60px" height="60px" /></a> | <a href="https://github.com/BenLakes"><img src="https://avatars.githubusercontent.com/u/15206046?v=4" width="60px" height="60px" /></a> |
-|                                                                mollerzhu                                                                 |                                                                  TLovers                                                                  |                                                                  cnyyk                                                                  |                                                                                                                                           |                                                                                                                                       |                                                                                                                                         |
-| <a href="https://github.com/mollerzhu"><img src="https://avatars.githubusercontent.com/u/49627902?v=4" width="60px" height="60px" /></a> |  <a href="https://github.com/TLovers"><img src="https://avatars.githubusercontent.com/u/26561694?v=4" width="60px" height="60px" /></a>   |   <a href="https://github.com/cnyyk"><img src="https://avatars.githubusercontent.com/u/275233?v=4" width="60px" height="60px" /></a>    |                                                                                                                                           |                                                                                                                                       |                                                                                                                                         |
-
-## Contributors
-
-Thanks to all the people who contribute :heart:
-
-<a href="https://github.com/pure-admin/vue-pure-admin/graphs/contributors"><img src="https://contrib.rocks/image?repo=pure-admin/vue-pure-admin" /></a>
-
 ## `Star`
 
 Many thanks to the kind individuals who leave a star. Your support is much appreciated :heart:

README.md

@@ -22,10 +22,9 @@
 - [点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)
 - [点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)
 
-## 配套保姆级文档（支持 `PWA` 快速、离线访问）
+## 配套保姆级文档
 
-- [点我查看国内文档站](https://yiming_chang.gitee.io/pure-admin-doc)
+- [查看文档](https://yiming_chang.gitee.io/pure-admin-doc)
-- [点我查看国外文档站](https://pure-admin.github.io/pure-admin-doc)
 
 ## `Tauri` 版
 
@@ -37,8 +36,7 @@
 
 ## 预览
 
-- [点我查看国内预览站](https://yiming_chang.gitee.io/vue-pure-admin)
+- [查看预览](https://yiming_chang.gitee.io/vue-pure-admin)
-- [点我查看国外预览站](https://pure-admin.github.io/vue-pure-admin)
 
 - PC 端
 <p align="center">
@@ -92,6 +90,28 @@ pnpm serve
 pnpm build
 ```
 
+## Docker 支持
+
+1. 自定义镜像名为 `vue-pure-admin` 的镜像（请注意下面命令末尾有一个点 `.` 表示使用当前路径下的 `Dockerfile` 文件，可根据实际情况指定路径）
+
+```bash
+docker build -t vue-pure-admin .
+```
+
+2. 端口映射并启动 `docker` 容器（`8080:80`：表示在容器中使用 `80` 端口，并将该端口转发到主机的 `8080` 端口；`pure-admin`：表示自定义容器名；`vue-pure-admin`：表示自定义镜像名）
+
+```bash
+docker run -dp 8080:80  --name pure-admin vue-pure-admin
+```
+
+操作完上面两个命令后，在浏览器打开 `http://localhost:8080` 即可预览
+
+当然也可以通过 [Docker Desktop](https://www.docker.com/products/docker-desktop/) 可视化界面去操作 `docker` 项目，如下图
+
+<p align="center">
+  <img alt="docker" width="100%" src="https://yiming_chang.gitee.io/pure-admin-doc/img/docker/1.jpg">
+</p>
+
 ## 更新日志
 
 [CHANGELOG](./CHANGELOG.zh_CN.md)
@@ -140,38 +160,12 @@ pnpm build
 
 [xiaoxian521](https://github.com/xiaoxian521)、[Ten-K](https://github.com/Ten-K)
 
-## 支持
-
-如果您觉得这个项目对您有帮助，可以帮作者买一杯果汁 🍹 表示支持
-
-<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f69bf13c5b854ed5b699807cafa0e3ce~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp?" width="150px" height="150px" />
-
-## `QQ` 交流群
-
-[点击去加入](https://yiming_chang.gitee.io/pure-admin-doc/pages/support/#qq-%E4%BA%A4%E6%B5%81%E7%BE%A4)
-
 ## 许可证
 
-原则上不收取任何费用及版权，可以放心使用，不过如需二次开源（比如用此平台二次开发并开源）请联系作者获取许可！
+原则上不收取任何费用及版权，可商用，不过如需二次开源（比如用此平台二次开发并开源，要求前端代码必须开源免费）请联系作者获取许可！（免费，走个记录而已）
 
 [MIT © 2020-present, pure-admin](./LICENSE)
 
-## 支持者
-
-非常感谢您们的支持，相信项目会越来越好 :heart:
-
-|                                                                xueyuheng                                                                 |                                                                taolei1990                                                                 |                                                                hang-kim                                                                 |                                                               madwolfcrazy                                                                |                                                                limuen                                                                 |                                                                BenLakes                                                                 |
-| :--------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------: |
-| <a href="https://github.com/xueyuheng"><img src="https://avatars.githubusercontent.com/u/48202935?v=4" width="60px" height="60px" /></a> | <a href="https://github.com/taolei1990"><img src="https://avatars.githubusercontent.com/u/23173640?v=4" width="60px" height="60px" /></a> | <a href="https://github.com/hang-kim"><img src="https://avatars.githubusercontent.com/u/52914259?v=4" width="60px" height="60px" /></a> | <a href="https://github.com/madwolfcrazy"><img src="https://avatars.githubusercontent.com/u/223671?v=4" width="60px" height="60px" /></a> | <a href="https://github.com/limuen"><img src="https://avatars.githubusercontent.com/u/31790606?v=4" width="60px" height="60px" /></a> | <a href="https://github.com/BenLakes"><img src="https://avatars.githubusercontent.com/u/15206046?v=4" width="60px" height="60px" /></a> |
-|                                                                mollerzhu                                                                 |                                                                  TLovers                                                                  |                                                                  cnyyk                                                                  |                                                                                                                                           |                                                                                                                                       |                                                                                                                                         |
-| <a href="https://github.com/mollerzhu"><img src="https://avatars.githubusercontent.com/u/49627902?v=4" width="60px" height="60px" /></a> |  <a href="https://github.com/TLovers"><img src="https://avatars.githubusercontent.com/u/26561694?v=4" width="60px" height="60px" /></a>   |   <a href="https://github.com/cnyyk"><img src="https://avatars.githubusercontent.com/u/275233?v=4" width="60px" height="60px" /></a>    |                                                                                                                                           |                                                                                                                                       |                                                                                                                                         |
-
-## 贡献者
-
-感谢所有做出贡献的人 :heart:
-
-<a href="https://github.com/pure-admin/vue-pure-admin/graphs/contributors"><img src="https://contrib.rocks/image?repo=pure-admin/vue-pure-admin" /></a>
-
 ## `Star`
 
 非常感谢留下星星的好心人，感谢您的支持 :heart:

build/optimize.ts

@@ -33,7 +33,6 @@ const include = [
   "@howdyjs/mouse-menu",
   "@logicflow/extension",
   "vue-virtual-scroller",
-  "element-resize-detector",
   "@amap/amap-jsapi-loader",
   "el-table-infinite-scroll",
   "vue-waterfall-plugin-next",

locales/en.yaml

@@ -68,6 +68,7 @@ menus:
   hsguide: Guide
   hsAble: Able
   hsMenuTree: Menu Tree
+  hsOptimize: Debounce、Throttle、Copy Directives
   hsWatermark: Water Mark
   hsPrint: Print
   hsDownload: Download

locales/zh-CN.yaml

@@ -40,7 +40,7 @@ menus:
   hsmessage: 消息提示组件
   hsvideo: 视频组件
   hssegmented: 分段控制器组件
-  hswaterfall: 瀑布流组件
+  hswaterfall: 瀑布流无限滚动组件
   hsmap: 地图组件
   hsdraggable: 拖拽组件
   hssplitPane: 切割面板
@@ -68,6 +68,7 @@ menus:
   hsguide: 引导页
   hsAble: 功能
   hsMenuTree: 菜单树结构
+  hsOptimize: 防抖、截流、复制指令
   hsWatermark: 水印
   hsPrint: 打印
   hsDownload: 下载
@@ -101,7 +102,7 @@ menus:
   hsInfiniteScroll: 表格无限滚动
   hsdanmaku: 弹幕组件
   hsPureTableBase: 基础用法（23个示例）
-  hsPureTableHigh: 高级用法（10个示例）
+  hsPureTableHigh: 高级用法（11个示例）
   hsTree: 大数据树业务组件
   hsMenuoverflow: 目录超出显示 Tooltip 文字提示
   hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示

mock/asyncRoutes.ts

@@ -179,6 +179,7 @@ const tabsRouter = {
       meta: {
         // 不在menu菜单中显示
         showLink: false,
+        activePath: "/tabs/index",
         roles: ["admin", "common"]
       }
     },
@@ -190,6 +191,7 @@ const tabsRouter = {
       meta: {
         // 不在menu菜单中显示
         showLink: false,
+        activePath: "/tabs/index",
         roles: ["admin", "common"]
       }
     }

mock/list.ts

@@ -451,5 +451,219 @@ export default [
         }
       };
     }
+  },
+  {
+    // https://api.github.com/repos/pure-admin/vue-pure-admin/releases?per_page=100
+    url: "/releases",
+    method: "get",
+    response: () => {
+      return {
+        success: true,
+        data: {
+          list: [
+            {
+              created_at: "2023-06-04T04:11:51Z",
+              published_at: "2023-06-04T04:13:24Z",
+              body: "# 4.3.0 (2023-06-04)\r\n\r\n### 🎫 Feat\r\n\r\n- 添加 `docker` 支持\r\n- 添加项目版本实时更新检测功能\r\n- 完善系统管理-角色管理页面\r\n- 瀑布流组件添加无限滚动\r\n- 函数式弹框添加 `updateDialog` 更改弹框自身属性值方法\r\n- `wangeditor` 富文本添加多个富文本和自定义图片上传示例\r\n- `pure-table` 表格高级用法添加保留已选中的 `CheckBox` 选项示例\r\n- `RePureTableBar` 组件添加 `title` 插槽\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复获取验证码倒计时会有 `1s` 延时禁用的问题\r\n- 修复图标选择器未正确初始化预览问题\r\n- 修复动态路由重定向造成标签页出现重复内容\r\n- 修复强制刷新页面 `getTopMenu()` 函数获取不到 `path` 报错的问题\r\n- 修复左侧菜单折叠后突然拉升造成左侧菜单整体不显示的问题\r\n- 修复 `RePureTableBar` 关闭列设置后在 `windows` 出现滚动条的问题\r\n\r\n### 🍏 Perf\r\n\r\n- 优化标签页操作-路由传参模式用法\r\n- 优化菜单搜索功能和样式\r\n- 更新 `vscode` 代码片段\r\n- 优化 `dataThemeChange` 主题设置的初始化调用时机"
+            },
+            {
+              created_at: "2023-05-15T07:03:57Z",
+              published_at: "2023-05-15T07:04:54Z",
+              body: "# 4.2.0 (2023-05-15)\r\n\r\n### 🎫 Feat\r\n\r\n- 新增分段控制器组件并适配暗黑模式\r\n- 静态路由支持配置数组格式\r\n- 函数式弹框组件添加全屏、退出全屏操作按钮\r\n- 新增组件-瀑布流 `demo`\r\n- 添加 `Exclusive` 类型互斥语法糖\r\n\r\n### 🍏 Perf\r\n\r\n- 规范 `template` 模版中路由写法，不再使用 `$route` 和 `$router`，此写法 `vue-tsc` 编译不通过"
+            },
+            {
+              created_at: "2023-05-11T17:45:43Z",
+              published_at: "2023-05-11T17:47:10Z",
+              body: "# 4.1.0 (2023-05-12)\r\n\r\n### 🎫 Feat\r\n\r\n- 函数式弹框组件添加结合 `Form` 的 `demo` 示例\r\n- 封装 `element-plus` 的 `el-col` 组件\r\n- 函数式弹框组件添加 `beforeCancel` 和 `beforeSure` 回调，可暂停弹框的关闭\r\n- 完善 `系统管理-部门管理` 页面\r\n- 优化 `PureTableBar` 组件，列展示添加拖拽功能\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复开启 `keepAlive` 后点击标签页的重新加载，页面缓存还存在的问题\r\n- 修复混合模式菜单下刷新页签后左侧菜单会闪烁一下的问题\r\n\r\n### 🍏 Perf\r\n\r\n- 优化首页布局\r\n- 依赖更新到 `vue3.3+` 以及删除 `unplugin-vue-define-options` 插件"
+            },
+            {
+              created_at: "2023-05-09T08:11:28Z",
+              published_at: "2023-05-09T08:14:55Z",
+              body: '# 4.0.0 (2023-05-09)\r\n\r\n[查看 4.0.0 版本优化细节](https://github.com/pure-admin/vue-pure-admin/issues/428#issuecomment-1422191158)\r\n\r\n### ✔️ refactor\r\n\r\n- 采用 `css` 伪类 `before` 写法重构菜单的激活背景，类似于 [ant.design-menu](https://ant.design/components/menu-cn#components-menu-demo-inline-collapsed)\r\n\r\n### 🎫 Feat\r\n\r\n- 优化菜单名称右侧的额外图标，使其支持更多图标渲染模式\r\n- 可配置首页菜单显示与隐藏\r\n- 将本地响应式存储的命名空间提升到全局配置中\r\n- 新增函数式弹框组件以及 `demo` 示例，使用更便捷\r\n- `PureTableBar` 组件添加列展示功能\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复当菜单折叠或展开时首页 `echarts` 图表未自适应容器\r\n- 修复当只有一个子菜单时，搜索功能搜索不到该子菜单问题\r\n- 修复全局配置 `Theme` 为 `light` 清空缓存重新登录主题配置不生效的问题\r\n- 修复菜单搜索功能弹框打开后搜索框未自动聚集的问题\r\n- 修复按 `ESC` 退出全屏后，工具栏按钮文案展示问题\r\n- 修复移动端通知栏 `tooltip` 点击穿透问题\r\n- 修复当左侧菜单收起后，切换到 `horizontal` 导航模式时文字不展示的问题\r\n- 修复导航 `tab` 关闭其他标签页无法重置状态问题\r\n- 修复 `getHistoryMode` 函数中环境变量未初始化带来的页面热更新报错\r\n- 修复导航 `tab` 过多导致关闭左侧标签页无法正常显示\r\n- 修复点击内容区全屏报错问题\r\n- 修复混合导航下打开 `showLink:false` 页面并刷新后，左侧导航栏一直处于加载状态的问题\r\n- 修复混合模式导航下调用 `initRouter` 函数导致左侧导航内存溢出问题\r\n- 修复关闭左侧、右侧、其他、全部标签页操作时缓存页面并没有销毁问题\r\n- 修复路由通过 `query` 或 `params` 传参，开启缓存后关闭标签页缓存失效问题\r\n- 修复 `params` 路由传参模式下，面包屑无法找到父级路径问题\r\n\r\n### 🍏 Perf\r\n\r\n- 优化 `RePureTableBar` 组件的 `buttons` 具名插槽\r\n- 优化导航样式以及菜单折叠动画\r\n- 优化菜单名称右侧的额外图标，使其支持更多图标渲染模式\r\n- 优化 `logo` 图和文字布局以及统一配置\r\n- 路由信息 `showLink` 设置成 `false` 后，当前路由信息不添加到标签页\r\n- 导出 `addPathMatch` 函数\r\n- `pinia` 中所有 `getters` 改为官方推荐写法，`this` 改成 `state` 可自动推导类型\r\n- 适配最新版 `pure-table` 的 `api`\r\n- 忽略 `sourcemap-codec` 和 `stable` 依赖包的 `deprecation` 警告\r\n- 从 `tsconfig.json` 文件中移除 `"incremental": true`\r\n- 更新 `stylelint` 以及相关配置至最新，强化样式校验\r\n- 面包屑去首页化，根据选择的菜单对应显示，首页不在固定到面包屑里，并优化面包屑页面的路由监听'
+            },
+            {
+              created_at: "2022-12-26T06:31:04Z",
+              published_at: "2022-12-26T06:32:38Z",
+              body: "# 3.9.7 (2022-12-26)\r\n\r\n### 🍏 Perf\r\n\r\n- 使用 `path.posix.resolve` 替代 `path.resolve` 避免 `windows` 环境下使用 `electron` 出现盘符问题\r\n- 默认关闭 `CachingAsyncRoutes` 动态路由缓存本地，使其在开发环境下调试更方便，不用每次修改动态路由都要先清空本地缓存的动态路由，更推荐在生产环境开启"
+            },
+            {
+              created_at: "2022-12-19T04:14:18Z",
+              published_at: "2022-12-19T04:15:41Z",
+              body: "# 3.9.6 (2022-12-19)\r\n\r\n### 🎫 Chores\r\n\r\n- 升级 `vite4` 版本\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复 `tailwind.css` 错误的引入方式导致 `vite` 的 `hmr` 慢的问题\r\n\r\n### 🍏 Perf\r\n\r\n- 更新 [@pureadmin/theme](https://github.com/pure-admin/pure-admin-theme) 至最新版，带来更友好的类型提示\r\n- 优化 [PureTableBar](https://github.com/xiaoxian521/vue-pure-admin/tree/main/src/components/RePureTableBar) 组件\r\n- 优化系统管理页面业务代码，带来更好的代码参考"
+            },
+            {
+              created_at: "2022-12-13T06:19:31Z",
+              published_at: "2022-12-13T06:20:30Z",
+              body: "# 3.9.5 (2022-12-13)\r\n\r\n### ✔️ refactor\r\n\r\n- 完全移除了 `lodash` 和其相关库\r\n  [点击此处查看为什么移除？如何自行集成？](https://yiming_chang.gitee.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-5-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-lodash-%E5%92%8C%E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%93-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)\r\n\r\n### 🎫 Feat\r\n\r\n- 添加 `@pureadmin/table` 表格动态列示例\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复动态路由 `rank` 问题\r\n- 修复暗黑主题样式问题\r\n\r\n### 🍏 Perf\r\n\r\n- 优化路由 `rank` ，当 `rank` 不存在时，根据顺序自动创建，首页路由永远在第一位"
+            },
+            {
+              created_at: "2022-12-05T05:59:54Z",
+              published_at: "2022-12-05T06:04:01Z",
+              body: "# 3.9.4 (2022-12-05)\r\n\r\n### ✔️ refactor\r\n\r\n- 完全移除了 `vxe-table`，移除后，完整版整体打包大小减少 `1.82MB`，首启动时长基本和精简版持平 🐮\r\n  [点击此处查看为什么移除？如何自行集成？](https://yiming_chang.gitee.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-4-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-vxe-table-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)\r\n\r\n### 🎫 Feat\r\n\r\n- 添加 `@pureadmin/table` 表格选择器（单选、多选）示例"
+            },
+            {
+              created_at: "2022-12-04T08:45:47Z",
+              published_at: "2022-12-04T08:46:59Z",
+              body: "# 3.9.3 (2022-12-04)\r\n\r\n### 🎫 Feat\r\n\r\n- 添加 `@pureadmin/table` 分页和加载动画示例\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复开启 `CachingAsyncRoutes` 后，存入本地存储的动态路由改变造成刷新页面空白的问题\r\n- 修复菜单折叠后 `Tooltip` 显示异常\r\n\r\n### 🍏 Perf\r\n\r\n- 扩展本地图标使用方式，完整版首启动再次减少 `13` 个请求\r\n- 当菜单加载慢时，添加 `loading` 动画，优化用户体验\r\n- 主题初始化放在 `onBeforeMount` 里，避免初始化页面闪烁"
+            },
+            {
+              created_at: "2022-12-03T07:02:17Z",
+              published_at: "2022-12-03T07:03:09Z",
+              body: "# 3.9.2 (2022-12-03)\r\n\r\n### 🍏 Perf\r\n\r\n- 全局覆盖 `element-plus` 的 `el-dialog`、`el-drawer`、`el-message-box`、`el-notification` 组件右上角关闭图标的样式，使其表现更鲜明 [具体代码修改记录](https://github.com/xiaoxian521/vue-pure-admin/commit/c80818d792276666aaea4b18413a0f08777f2ed1)\r\n- 打包输出信息兼容不同打包输出路径\r\n- 优化一些动画"
+            },
+            {
+              created_at: "2022-12-02T11:32:48Z",
+              published_at: "2022-12-02T11:33:45Z",
+              body: "# 3.9.1 (2022-12-02)\r\n\r\n### 🎫 Feat\r\n\r\n- 添加 `CachingAsyncRoutes` 是否开启动态路由缓存本地的全局配置，默认 `true`\r\n- 添加 `TooltipEffect` 全局配置，可配置平台主体所有 `el-tooltip` 的 `effect` 属性，默认 `light`，不影响业务代码\r\n- 添加目录、菜单文字超出显示 `Tooltip` 文字提示演示\r\n\r\n### 🍏 Perf\r\n\r\n- 优化 `initRouter` 方法，兼容 `sso` 场景\r\n- 面包屑动画样式优化"
+            },
+            {
+              created_at: "2022-11-30T06:11:08Z",
+              published_at: "2022-11-30T06:12:32Z",
+              body: "# 3.9.0 (2022-11-30)\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复退出全屏时文字过长导致页面出现滚动条后带来的抖动问题\r\n- 修复一些类型错误\r\n\r\n### 🍏 Perf\r\n\r\n- perf: 首屏加载大优化，对比 `3.9.0` 之前版本，首屏请求减少 `71` 个，首屏加载资源减少 `4.1 MB`"
+            },
+            {
+              created_at: "2022-11-27T17:25:43Z",
+              published_at: "2022-11-27T17:27:59Z",
+              body: "# 3.8.7 (2022-11-28)\r\n\r\n### 🍏 Perf\r\n\r\n- perf: 打包大优化，请务必升级！使用 `unplugin-vue-define-options` 替换 `unplugin-vue-macros` ，打包速度提升数倍，使用 `unplugin-vue-macros` 以性能中等偏上的 `mac` 为例完整版打包时长为 `6` 分钟 😭，使用 `unplugin-vue-define-options` 替换后，相同电脑下打包时长为 `50` 秒 ☺️"
+            },
+            {
+              created_at: "2022-11-27T08:34:46Z",
+              published_at: "2022-11-27T08:35:49Z",
+              body: "# 3.8.6 (2022-11-27)\r\n\r\n### 🎫 Feat\r\n\r\n- 添加 `message` 消息提示函数，兼容 `Element Plus` 和 `Ant Design` 两种 `Message` 样式风格，使用和打包大小成本极低并适配暗黑模式，真香 😂\r\n\r\n### 🍏 Perf\r\n\r\n- perf: 无需安装 `@vue/runtime-core` ，兼容所有 `element-plus` 组件的 `volar` 提示"
+            },
+            {
+              created_at: "2022-11-26T16:03:19Z",
+              published_at: "2022-11-26T16:04:41Z",
+              body: "# 3.8.5 (2022-11-26)\r\n\r\n### 🍏 Perf\r\n\r\n- 大优化，移除 `@pureadmin/components` 并采用兼容写法，平台打包大小在未启用压缩前对比优化前减少 `0.4` MB , 首屏请求减少 `2.3` MB 的资源，这对于 [精简版](https://github.com/xiaoxian521/pure-admin-thin) 来说是非常大的优化，精简版已经同步代码"
+            },
+            {
+              created_at: "2022-11-26T07:07:07Z",
+              published_at: "2022-11-26T07:08:11Z",
+              body: "# 3.8.0 (2022-11-26)\r\n\r\n### 🎫 Feat\r\n\r\n- 添加 `@pureadmin/table` 多种数据格式（深层结构）示例\r\n- 添加 `@pureadmin/table` 图像预览示例\r\n- 添加 `@pureadmin/table` 行、列拖拽示例\r\n- 添加 `@pureadmin/table` 右键菜单示例\r\n- 添加 `@pureadmin/table` 导出 `Excel` 示例\r\n- 添加 `@pureadmin/table` 编辑单元格示例\r\n- 添加 `@pureadmin/table` 水印示例\r\n- 添加 `@pureadmin/table` 打印示例\r\n- 添加 `@pureadmin/table` 内嵌 `echarts` 图表示例\r\n- 添加 `svgo` 压缩平台所有 `svg` 文件，减少体积\r\n\r\n### 🍏 Perf\r\n\r\n- 静态路由平台自动导入，无需手动引入\r\n- 更完善的全局类型提示\r\n- 优化 `vite` 依赖预构建在平台里的配置，页面切换加载速度显著加快"
+            },
+            {
+              created_at: "2022-11-21T17:00:04Z",
+              published_at: "2022-11-21T17:00:42Z",
+              body: "# 3.7.1 (2022-11-22)\r\n\r\n### 🔥 hotfix\r\n\r\n- 修复在未开启标签页缓存时退出登录，可能存在标签页未重置的问题"
+            },
+            {
+              created_at: "2022-11-21T09:14:22Z",
+              published_at: "2022-11-21T09:15:24Z",
+              body: "# 3.7.0 (2022-11-21)\r\n\r\n### ✔️ refactor\r\n\r\n- 使用 `intro.js` 替换 `driver.js`\r\n\r\n### 🎫 Feat\r\n\r\n- 添加前端单点登录，测试地址 https://yiming_chang.gitee.io/vue-pure-admin/#/pure-table/index?username=sso&roles=admin&accessToken=eyJhbGciOiJIUzUxMiJ9.admin\r\n- 为 [@pureadmin/table](https://github.com/xiaoxian521/pure-admin-table) 添加更多的示例和 `element-plus` 的 [table](https://element-plus.org/zh-CN/component/table.html) 示例保持一致\r\n- 丰富水印功能页面（支持自定义各种颜色、阴影、文字、额外属性、设置不可删除水印以及给指定元素设置水印）\r\n- 优化菜单，添加 `MenuArrowIconNoTransition` 全局配置，在 `public/serverConfig.json` 中配置即可，对于出现左侧菜单模式，菜单展开卡顿的可设置 `MenuArrowIconNoTransition: true` 即可解决\r\n- 更换表单设计器组件演示\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复页内菜单带参互相跳转，标签没有选中高亮\r\n\r\n### 🍏 Perf\r\n\r\n- 删除已废弃的 `$baseUrl`\r\n- 兼容引入某个库导致 `global is not defined` 报错，将 `src/utils/globalPolyfills.ts` 文件引入 `src/main.ts` 即可解决\r\n- 删除 `@vitejs/plugin-legacy`，`vue3` 无法通过任何工具使其支持 `ie`"
+            },
+            {
+              created_at: "2022-11-10T04:17:05Z",
+              published_at: "2022-11-10T04:18:18Z",
+              body: "# 3.6.4 (2022-11-10)\r\n\r\n### 🎫 Feat\r\n\r\n- 菜单图标 `icon` 支持使用在线图标\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复 `vxe-button` 鼠标覆盖后字体颜色问题以及一些别的样式问题\r\n\r\n### 🍏 Perf\r\n\r\n- 优化路由守卫，如果已经登录并存在登录信息后不能跳转到路由白名单，而是继续保持在当前页面\r\n- 将 `baseURL` 和全局环境代理删除，可直接在 `vite.config.ts` 编写，即方便又支持多个代理地址"
+            },
+            {
+              created_at: "2022-11-01T08:18:12Z",
+              published_at: "2022-11-01T08:19:22Z",
+              body: "# 3.6.3 (2022-11-01)\r\n\r\n### 🎫 Feat\r\n\r\n- 静态资源分类打包\r\n- 添加弹幕组件 `demo`\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复 `tailwindcss` 最新版新增的 `collapse` 属性与平台 `class` 类名冲突\r\n- 修复当 `token` 过期后，如果页面有多个请求会重复刷新 `token`"
+            },
+            {
+              created_at: "2022-10-27T04:58:44Z",
+              published_at: "2022-10-27T04:59:32Z",
+              body: "# 3.6.2 (2022-10-27)\r\n\r\n### ✔️ refactor\r\n\r\n- 使用`@/`别名替换`/@/`别名"
+            },
+            {
+              created_at: "2022-10-26T18:42:33Z",
+              published_at: "2022-10-26T18:43:31Z",
+              body: "# 3.6.1 (2022-10-27)\r\n\r\n### 🎫 Feat\r\n\r\n- 添加打包是否启动`cdn`替换本地库配置，默认`false`不启动\r\n- 添加打包构建可选`gzip`与`brotli`压缩模式\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复`title`过长显示样式问题\r\n- 修复路由中父级`name`不应和子级`name`重复，会造成重定向跳转`404`问题\r\n\r\n### 🍏 Perf\r\n\r\n- 升级`axios`至最新版"
+            },
+            {
+              created_at: "2022-10-25T05:07:18Z",
+              published_at: "2022-10-25T05:08:18Z",
+              body: "# 3.6.0 (2022-10-25)\r\n\r\n### 🎫 Feat\r\n\r\n- 添加文件下载`demo`\r\n- 添加打字机组件`demo`\r\n- 添加`json`编辑器`demo`\r\n\r\n### ✔️ refactor\r\n\r\n- 重构权限模块，采用目前最常用的`RBAC`（Role-Based Access List）: 基于角色的权限控制（ 用户 -> 角色 -> 权限 ），并更新页面权限和按钮权限`demo`示例，按钮权限支持三种操作模式（组件方式判断权限、函数方式判断权限、指令方式判断权限）\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复清空缓存并返回登录页时未清空主题\r\n- 修复`horizontal`模式下`menu`在生产环境显示问题\r\n- 修复`mix`混合模式导航在生产环境左侧菜单一定机率不显示的问题\r\n- `token`过期后调用刷新`token`接口会无限循环的问题\r\n\r\n### 🍏 Perf\r\n\r\n- 从`tailwind.css`中移除不常用的`@apply`\r\n- 使用`/** */`替换`//`注释，对编辑器的智能提示更友好\r\n- 优化登录回车事件\r\n- 简化了一些函数，剔除了无用函数，优化了页面加载速度"
+            },
+            {
+              created_at: "2022-09-10T13:44:17Z",
+              published_at: "2022-09-10T13:46:11Z",
+              body: "# 3.5.0 (2022-9-10)\r\n\r\n### 🎫 Feat\r\n\r\n- 添加 `cssnano` ，打包时压缩 `css` 体积\r\n- 添加 `element-plus` 无缝滚动 `Table` 页面 demo\r\n- 开启 `vscode` 括号对指南\r\n\r\n### ✔️ refactor\r\n\r\n- 使用 `tailwindcss` 替换 `unocss`，新增 `tailwindcss` [使用文档](http://yiming_chang.gitee.io/pure-admin-doc/pages/39156f/)\r\n\r\n### 🐞 Bug fixes\r\n\r\n- `token` 过期，刷新死循环\r\n\r\n### 🍏 Perf\r\n\r\n- 重置路由时，清空缓存页面"
+            },
+            {
+              created_at: "2022-08-23T02:31:44Z",
+              published_at: "2022-08-23T02:32:49Z",
+              body: "# 3.4.6 (2022-8-23)\r\n\r\n### 🐞 Bug fixes\r\n\r\n- `process` is not defined in path\r\n- 修复动态路由`children`为空数组时报错\r\n- 修复`iframe`加载失败"
+            },
+            {
+              created_at: "2022-08-22T12:21:53Z",
+              published_at: "2022-08-22T12:23:21Z",
+              body: "# 3.4.5 (2022-8-22)\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复本地响应式存储对象设置问题"
+            },
+            {
+              created_at: "2022-08-22T09:21:18Z",
+              published_at: "2022-08-22T09:22:26Z",
+              body: "# 3.4.0 (2022-8-22)\r\n\r\n### 🍏 Perf\r\n\r\n- 优化路由\r\n- 优化移动端兼容性\r\n- 优化路由传参（`query`、`params` 方式刷新页面不需要再开启标签页缓存也能保留参数在`url`和`标签页`上）"
+            },
+            {
+              created_at: "2022-08-19T07:29:06Z",
+              published_at: "2022-08-19T07:31:08Z",
+              body: "# 3.3.5 (2022-8-19)\r\n\r\n### 🎫 Feat\r\n\r\n- 将 `element-plus` 的 `Table` 二次封装到[@pureadmin/table](https://github.com/xiaoxian521/pure-admin-table)，提供灵活的配置项并集成到平台里\r\n- 将 `element-plus` 的 `Descriptions` 二次封装到[@pureadmin/descriptions](https://github.com/xiaoxian521/pure-admin-descriptions)，提供灵活的配置项并集成到平台里\r\n- 将平台的大部分工具以及 hooks 都集中到[@pureadmin/utils](https://pure-admin-utils-docs.vercel.app/)，并删除集中到这个库里的代码，减少平台体积\r\n- 添加[unplugin-vue-define-options](https://www.npmjs.com/package/unplugin-vue-define-options)插件，页面可直接写 `defineOptions({name: 自定义名称})`\r\n- 添加项目文件、语言分析工具 [cloc](https://www.npmjs.com/package/cloc)\r\n- 添加登陆页国际化\r\n- 添加完整路由配置表类型声明\r\n- 添加虚拟列表页面 demo\r\n- 添加 `PDF` 预览页面 demo\r\n- 添加导出 `execl` 页面 demo\r\n- 添加无 `Layout` 的空白页面 demo\r\n\r\n### ✔️ refactor\r\n\r\n- 重构主题色，适配 `element-plus` 暗黑模式（同时也解决了 `3.3.0` 及更低版本中同样的元素 `css` 被多次覆盖，导致样式不好调试的问题）\r\n- 重构路由重置功能\r\n\r\n### 🍏 Perf\r\n\r\n- 兼容项目存放目录以中文命名，但我们真心不推荐中文命名，因为可能某个库没有对中文路径做转义处理，导致项目奔溃\r\n- 优化接口类型\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复路由 `showlink` 为 `false` 的异步路由，刷新后不显示\r\n- 修复当没有 `icon` 时，垂直导航菜单折叠后文字被隐藏"
+            },
+            {
+              created_at: "2022-05-11T07:51:38Z",
+              published_at: "2022-05-11T07:52:31Z",
+              body: "# 3.3.0 (2022-5-11)\r\n\r\n### 🎫 Feat\r\n\r\n- 添加用户管理页面 demo\r\n- 添加角色管理页面 demo\r\n- 添加部门管理页面 demo\r\n- 添加卡片列表页面 demo\r\n- 集成表单设计器\r\n- 新增`PPT`demo\r\n- 在功能菜单中新增防抖截流 demo\r\n- 升级`wangeditorV5`（并支持国际化和自定义主题）\r\n- 集成`tauri`版本\r\n- 新增条形码功能\r\n- 新增二维码功能\r\n- 使用`element-plus`中的`Cascader`级联选择器编写中国省市区三级、二级联动 demo\r\n- 集成`Swiper`插件\r\n- 路由支持传`component`，代表组件路径\r\n- 添加预发布打包模式\r\n- 添加关闭某个标签的[hooks](https://github.com/xiaoxian521/vue-pure-admin/commit/5e8723a031923e79f507e5a17151d3bd88a51523)\r\n\r\n### ✔️ refactor\r\n\r\n- 重构登陆页，更偏向实际业务场景\r\n- 使用`unocss`替换`windicss`，`unocss`开发环境下性能更好，没有内存泄露，而且`api`使用上兼容`windicss`\r\n\r\n### 🍏 Perf\r\n\r\n- 优化平台的`split-pane`组件样式\r\n- 优化国际化，路由不再传`i18n`字段，平台自动读取根目录`locales`文件夹下文件进行国际化匹配\r\n- 优化图标选择器\r\n- 优化`layout`显示用户信息[commit](https://github.com/xiaoxian521/vue-pure-admin/commit/56f9dc85e7fbe0637605c43577c794de9f8968aa)\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复路由初始化问题（Cannot access 'constantRoutes' before initialization）"
+            },
+            {
+              created_at: "2022-03-21T16:25:55Z",
+              published_at: "2022-03-21T16:27:00Z",
+              body: "# 3.2.0 (2022-3-22)\r\n\r\n### 🎫 Feat\r\n\r\n- 图标选择组件\r\n- 菜单搜索功能\r\n- 添加结果页面\r\n- 扩展`element-plus`时间线组件\r\n- 扩展`element-plus`树组件，支持连接线\r\n- 添加树形选择器，支持单选和多选\r\n\r\n### 🍏 Perf\r\n\r\n- 优化错误页面 UI\r\n- 优化国际化功能\r\n- 优化路由`rank`排序，兼容路由`meta`中`rank`字段值为`null`的情况\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复菜单展开折叠在部分电脑出现卡顿的情况"
+            },
+            {
+              created_at: "2022-03-03T14:57:11Z",
+              published_at: "2022-03-03T14:57:55Z",
+              body: "# 3.1.0 (2022-3-3)\r\n\r\n### 🎫 Feat\r\n\r\n- iframe 支持动态加载\r\n- 水印示例\r\n- 打印示例（图片、表格、echarts）\r\n- 添加运行、打包信息, 使用`lodash-unified`替换`lodash-es`,`lodash-unified`支持`ESM`同时兼容`CJS`\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复在一个菜单页面内单独跳转到另一个菜单页面，路由页面跳转了但是标签页不显示的情况\r\n- 修复后台返回动态三级及以上的路由，出现菜单与页面不对应的情况"
+            },
+            {
+              created_at: "2022-02-14T15:19:32Z",
+              published_at: "2022-02-14T15:20:32Z",
+              body: "# 3.0 (2022-2-14)\r\n\r\n### 🎫 Feat\r\n\r\n- 添加混合导航\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复标签页 bug"
+            },
+            {
+              created_at: "2022-02-05T09:36:21Z",
+              published_at: "2022-02-05T09:38:09Z",
+              body: "# 2.9.0(2022-2-5)\r\n\r\n### 🎫 Feat\r\n\r\n- 添加打包大小分析，命令`pnpm report`\r\n\r\n### 🍏 Perf\r\n\r\n- 采用`iconify`按需引入图标，优化图标大小，减少网络请求\r\n- 优化路由，路由可不传`showLink: true`，默认显示"
+            },
+            {
+              created_at: "2022-01-21T08:46:48Z",
+              published_at: "2022-01-21T08:49:38Z",
+              body: "# 2.8.5(2022-1-21)\r\n\r\n### 🎫 Feat\r\n\r\n- 添加 `WindiCSS` 支持\r\n- 添加线上环境删 console 插件`vite-plugin-remove-console`\r\n\r\n### ✔️ refactor\r\n\r\n- 使用`@iconify-icons/ep`替换`@element-plus/icons-vue`"
+            },
+            {
+              created_at: "2022-01-04T11:52:05Z",
+              published_at: "2022-01-04T11:53:17Z",
+              body: "# 2.8.0(2022-1-4)\r\n\r\n### 🎫 Feat\r\n\r\n- 添加暗黑主题\r\n- 添加 element-plus 自定义主题\r\n- 添加引导页\r\n\r\n### 🍏 Perf\r\n\r\n- 优化国际化，兼容 vscode 插件 i18n Ally 智能提醒\r\n- 优化后端返回路由结构\r\n- 优化本地存储，内置四个键`responsive-configure`、`responsive-locale`、`responsive-layout`、`responsive-tags`，分别为基本配置、国际化配置、布局配置、标签页持久化配置"
+            },
+            {
+              created_at: "2021-12-18T05:56:21Z",
+              published_at: "2021-12-18T05:57:55Z",
+              body: "# 2.7.0(2021-12-18)\r\n\r\n### 🎫 Feat\r\n\r\n- 新增标签页复用\r\n- 新增消息提醒模版\r\n- 新增前端菜单树结构例子\r\n- 重构路由，优化权限模块，带来更方便的体验\r\n- 重构 env 环境和 http 请求，带来更方便的体验\r\n- 目前平台的标签页强制关联了本地存储，下一步标签页默认放到内存中并支持可配置持久化标签页\r\n- 导航菜单图标支持 fontawesome、iconfont、remixicon、element-plus/icons、自定义 svg\r\n- 更新 font-awesome 到 5.0 版本，因为 5.0 以下的版本官方不再维护，但平台依旧会兼容 font-awesome4 版本\r\n\r\n### 🍏 Perf\r\n\r\n- 优化标签页，带来更好的交互体验\r\n- 路由 title 支持直接写中文，可脱离国际化\r\n- 路由历史模式从 env 读取并支持 base 参数\r\n- 打包后的文件提供传统浏览器兼容性支持，配置 VITE_LEGACY 为 true"
+            },
+            {
+              created_at: "2021-11-10T05:30:48Z",
+              published_at: "2021-11-10T05:33:37Z",
+              body: "# 2.6.0(2021-11-10)\r\n\r\n### 🎫 Feat\r\n\r\n- 重构导航主题色，支持多种配色\r\n- 重构登录页，插画风格\r\n\r\n### 🍏 Perf\r\n\r\n- 优化导航样式\r\n- 剔除导航强依赖 vxe-table\r\n- 同步更新 element-plus，使用 SVG Icon 替换 Font Icon"
+            },
+            {
+              created_at: "2021-10-14T09:50:03Z",
+              published_at: "2021-10-14T09:52:01Z",
+              body: "# 2.1.0(2021-10-14)\r\n\r\n### 🎫 Feat\r\n\r\n- 路由动画（每个路由都可添加不同动画）\r\n- 额外图标（比如这个是新加的页面，路由菜单右上角显示个新图标）\r\n- 抽离默认配置选项\r\n- 完善类型文件\r\n\r\n### 🐞 Bug fixes\r\n\r\n- 修复 element-plus 国际化使用问题\r\n- 修复路由问题\r\n- 修复导航适配问题"
+            },
+            {
+              created_at: "2021-09-28T18:32:30Z",
+              published_at: "2021-09-28T18:35:41Z",
+              body: "# 2.0.1(2021-9-29)\r\n\r\n### 🎫 Feat\r\n\r\n- 添加 horizontal 水平模式导航"
+            },
+            {
+              created_at: "2021-04-13T10:53:29Z",
+              published_at: "2021-04-13T10:57:50Z",
+              body: "# 2.0.0(2021-4-13)\r\n\r\n### 🎫 Chores\r\n\r\n- 发布 2.0.0 版本"
+            }
+          ]
+        }
+      };
+    }
   }
 ] as MockMethod[];

mock/system.ts

@@ -1,9 +1,9 @@
 import { MockMethod } from "vite-plugin-mock";
 
 export default [
-  // 角色
+  // 用户
   {
-    url: "/role",
+    url: "/user",
     method: "post",
     response: () => {
       return {
@@ -11,58 +11,114 @@ export default [
         data: {
           list: [
             {
-              createTime: 1605456000000,
+              username: "admin",
-              updateTime: 1645477701000,
+              nickname: "admin",
-              creator: "admin",
+              remark: "管理员",
-              updater: "",
+              deptId: 103,
-              deleted: false,
+              postIds: [1],
-              tenantId: 1,
+              mobile: "15888888888",
+              sex: 0,
               id: 1,
-              name: "超级管理员",
-              code: "super_admin",
-              sort: 1,
               status: 0,
-              type: 1,
+              createTime: 1605456000000,
-              remark: "超级管理员",
+              dept: {
-              dataScope: 1,
+                id: 103,
-              dataScopeDeptIds: null
+                name: "研发部门"
+              }
             },
             {
+              username: "pure",
+              nickname: "pure",
+              remark: "不要吓我",
+              deptId: 104,
+              postIds: [1],
+              mobile: "15888888888",
+              sex: 0,
+              id: 100,
+              status: 1,
               createTime: 1605456000000,
-              updateTime: 1645477700000,
+              dept: {
-              creator: "admin",
+                id: 104,
-              updater: "",
+                name: "市场部门"
-              deleted: false,
+              }
-              tenantId: 1,
-              id: 2,
-              name: "普通角色",
-              code: "common",
-              sort: 2,
-              status: 0,
-              type: 1,
-              remark: "普通角色",
-              dataScope: 2,
-              dataScopeDeptIds: null
             },
             {
+              username: "小姐姐",
+              nickname: "girl",
+              remark: null,
+              deptId: 106,
+              postIds: null,
+              mobile: "15888888888",
+              sex: 1,
+              id: 103,
+              status: 1,
               createTime: 1605456000000,
-              updateTime: 1647698441000,
+              dept: {
-              creator: "",
+                id: 106,
-              updater: "1",
+                name: "财务部门"
-              deleted: false,
+              }
-              tenantId: 1,
+            },
-              id: 101,
+            {
-              name: "测试账号",
+              username: "小哥哥",
-              code: "test",
+              nickname: "boy",
-              sort: 0,
+              remark: null,
+              deptId: 107,
+              postIds: [],
+              mobile: "15888888888",
+              sex: 0,
+              id: 104,
               status: 0,
-              type: 2,
+              createTime: 1605456000000,
-              remark: "132",
+              dept: {
-              dataScope: 1,
+                id: 107,
-              dataScopeDeptIds: []
+                name: "运维部门"
+              }
             }
           ],
-          total: 3
+          total: 4
+        }
+      };
+    }
+  },
+  // 角色
+  {
+    url: "/role",
+    method: "post",
+    response: ({ body }) => {
+      let list = [
+        {
+          createTime: 1605456000000, // 时间戳（毫秒ms）
+          updateTime: 1684512000000,
+          creator: "admin",
+          id: 1,
+          name: "超级管理员",
+          code: "admin",
+          status: 1, // 状态 1 启用 0 停用
+          remark: "超级管理员拥有最高权限"
+        },
+        {
+          createTime: 1605456000000,
+          updateTime: 1684512000000,
+          creator: "admin",
+          id: 2,
+          name: "普通角色",
+          code: "common",
+          status: 1,
+          remark: "普通角色拥有部分权限"
+        }
+      ];
+      list = list.filter(item => item.name.includes(body?.name));
+      list = list.filter(item =>
+        String(item.status).includes(String(body?.status))
+      );
+      if (body.code) list = list.filter(item => item.code === body.code);
+      return {
+        success: true,
+        data: {
+          list,
+          total: list.length, // 总条目数
+          pageSize: 10, // 每页显示条目个数
+          currentPage: 1 // 当前页数
         }
       };
     }
@@ -83,7 +139,7 @@ export default [
             phone: "15888888888",
             principal: "@cname()",
             email: "@email",
-            status: 1,
+            status: 1, // 状态 1 启用 0 停用
             type: 1, // 1 公司 2 分公司 3 部门
             createTime: 1605456000000,
             remark: "@cparagraph(1, 3)"
@@ -208,84 +264,5 @@ export default [
         ]
       };
     }
-  },
-  // 用户
-  {
-    url: "/user",
-    method: "post",
-    response: () => {
-      return {
-        success: true,
-        data: {
-          list: [
-            {
-              username: "admin",
-              nickname: "admin",
-              remark: "管理员",
-              deptId: 103,
-              postIds: [1],
-              mobile: "15888888888",
-              sex: 0,
-              id: 1,
-              status: 0,
-              createTime: 1605456000000,
-              dept: {
-                id: 103,
-                name: "研发部门"
-              }
-            },
-            {
-              username: "pure",
-              nickname: "pure",
-              remark: "不要吓我",
-              deptId: 104,
-              postIds: [1],
-              mobile: "15888888888",
-              sex: 0,
-              id: 100,
-              status: 1,
-              createTime: 1605456000000,
-              dept: {
-                id: 104,
-                name: "市场部门"
-              }
-            },
-            {
-              username: "小姐姐",
-              nickname: "girl",
-              remark: null,
-              deptId: 106,
-              postIds: null,
-              mobile: "15888888888",
-              sex: 1,
-              id: 103,
-              status: 1,
-              createTime: 1605456000000,
-              dept: {
-                id: 106,
-                name: "财务部门"
-              }
-            },
-            {
-              username: "小哥哥",
-              nickname: "boy",
-              remark: null,
-              deptId: 107,
-              postIds: [],
-              mobile: "15888888888",
-              sex: 0,
-              id: 104,
-              status: 0,
-              createTime: 1605456000000,
-              dept: {
-                id: 107,
-                name: "运维部门"
-              }
-            }
-          ],
-          total: 4
-        }
-      };
-    }
   }
 ] as MockMethod[];

package.json

@@ -1,11 +1,11 @@
 {
   "name": "vue-pure-admin",
-  "version": "4.2.0",
+  "version": "4.4.0",
   "private": true,
   "scripts": {
     "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
     "serve": "pnpm dev",
-    "build": "rimraf dist && NODE_OPTIONS=--max-old-space-size=8192 vite build",
+    "build": "rimraf dist && NODE_OPTIONS=--max-old-space-size=8192 vite build && generate-version-file",
     "build:staging": "rimraf dist && vite build --mode staging",
     "report": "rimraf dist && vite build",
     "preview": "vite preview",
@@ -13,7 +13,7 @@
     "typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck",
     "svgo": "svgo -f src/assets/svg -o src/assets/svg",
     "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",
+    "clean:cache": "rimraf node_modules && rimraf .eslintcache && pnpm install",
     "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix",
     "lint:prettier": "prettier --write  \"src/**/*.{js,ts,json,tsx,css,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint --cache --fix \"**/*.{html,vue,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
@@ -31,24 +31,23 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@howdyjs/mouse-menu": "^2.0.7",
-    "@logicflow/core": "^1.2.6",
+    "@logicflow/core": "^1.2.8",
-    "@logicflow/extension": "^1.2.6",
+    "@logicflow/extension": "^1.2.8",
     "@pureadmin/descriptions": "^1.1.1",
-    "@pureadmin/table": "^2.1.0",
+    "@pureadmin/table": "^2.3.2",
-    "@pureadmin/utils": "^1.8.9",
+    "@pureadmin/utils": "^1.9.3",
     "@vueuse/core": "^10.1.2",
-    "@vueuse/motion": "2.0.0-beta.12",
+    "@vueuse/motion": "^2.0.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "animate.css": "^4.1.1",
     "axios": "^1.4.0",
     "china-area-data": "^5.0.1",
     "cropperjs": "^1.5.13",
-    "dayjs": "^1.11.7",
+    "dayjs": "^1.11.8",
     "echarts": "^5.4.2",
     "el-table-infinite-scroll": "^3.0.1",
-    "element-plus": "^2.3.4",
+    "element-plus": "^2.3.6",
-    "element-resize-detector": "^1.2.4",
     "intro.js": "^7.0.1",
     "js-cookie": "^3.0.5",
     "jsbarcode": "^3.11.5",
@@ -57,46 +56,47 @@
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "path": "^0.12.7",
-    "pinia": "^2.0.36",
+    "pinia": "^2.1.3",
     "qrcode": "^1.5.3",
-    "qs": "^6.11.1",
+    "qs": "^6.11.2",
     "responsive-storage": "^2.2.0",
     "sortablejs": "^1.15.0",
-    "swiper": "^9.3.1",
+    "swiper": "^9.4.0",
     "typeit": "^8.7.1",
     "v-contextmenu": "3.0.0",
-    "vue": "^3.3.2",
+    "v3-infinite-loading": "^1.2.2",
+    "version-rocket": "^1.6.7",
+    "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
     "vue-json-pretty": "^2.2.4",
     "vue-pdf-embed": "^1.1.6",
-    "vue-router": "^4.2.0",
+    "vue-router": "^4.2.2",
-    "vue-types": "^5.0.2",
+    "vue-types": "^5.0.3",
     "vue-virtual-scroller": "2.0.0-beta.7",
     "vue-waterfall-plugin-next": "^2.2.1",
-    "vue3-danmaku": "1.4.0-beta.1",
+    "vue3-danmaku": "^1.4.0",
     "vuedraggable": "^4.1.0",
-    "xgplayer": "^3.0.2",
+    "xgplayer": "^3.0.4",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.6.3",
+    "@commitlint/cli": "^17.6.5",
-    "@commitlint/config-conventional": "^17.6.3",
+    "@commitlint/config-conventional": "^17.6.5",
     "@iconify-icons/ep": "^1.2.11",
-    "@iconify-icons/ri": "^1.2.7",
+    "@iconify-icons/ri": "^1.2.8",
     "@iconify/vue": "^4.1.1",
-    "@intlify/unplugin-vue-i18n": "^0.10.0",
+    "@intlify/unplugin-vue-i18n": "^0.11.0",
     "@pureadmin/theme": "^3.0.0",
-    "@types/element-resize-detector": "1.1.3",
     "@types/intro.js": "^5.1.1",
     "@types/js-cookie": "^3.0.3",
     "@types/mockjs": "^1.0.7",
-    "@types/node": "^18.15.12",
+    "@types/node": "^18.16.18",
     "@types/nprogress": "0.2.0",
     "@types/qrcode": "^1.5.0",
     "@types/qs": "^6.9.7",
     "@types/sortablejs": "^1.15.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.11",
-    "@typescript-eslint/parser": "^5.59.5",
+    "@typescript-eslint/parser": "^5.59.11",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/eslint-config-prettier": "^7.1.0",
@@ -104,44 +104,44 @@
     "autoprefixer": "^10.4.14",
     "cloc": "^2.11.0",
     "cssnano": "^6.0.1",
-    "eslint": "^8.40.0",
+    "eslint": "^8.42.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.12.0",
+    "eslint-plugin-vue": "^9.14.1",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
     "picocolors": "^1.0.0",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.24",
     "postcss-html": "^1.5.0",
     "postcss-import": "^15.1.0",
     "postcss-scss": "^4.0.6",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
-    "pretty-quick": "3.1.1",
+    "pretty-quick": "^3.1.3",
-    "rimraf": "^5.0.0",
+    "rimraf": "^5.0.1",
-    "rollup-plugin-visualizer": "^5.9.0",
+    "rollup-plugin-visualizer": "^5.9.2",
-    "sass": "^1.62.1",
+    "sass": "^1.63.3",
-    "sass-loader": "^13.2.2",
+    "sass-loader": "^13.3.2",
-    "stylelint": "^15.6.1",
+    "stylelint": "^15.7.0",
     "stylelint-config-html": "^1.1.0",
-    "stylelint-config-recess-order": "^4.0.0",
+    "stylelint-config-recess-order": "^4.2.0",
     "stylelint-config-recommended": "^12.0.0",
-    "stylelint-config-recommended-scss": "^11.0.0",
+    "stylelint-config-recommended-scss": "^12.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-config-standard": "^33.0.0",
     "stylelint-config-standard-scss": "^9.0.0",
     "stylelint-order": "^6.0.3",
     "stylelint-prettier": "^3.0.0",
-    "stylelint-scss": "^5.0.0",
+    "stylelint-scss": "^5.0.1",
     "svgo": "^3.0.2",
     "tailwindcss": "^3.3.2",
-    "terser": "^5.17.3",
+    "terser": "^5.18.0",
-    "typescript": "^5.0.4",
+    "typescript": "5.0.4",
-    "vite": "^4.3.5",
+    "vite": "^4.3.9",
     "vite-plugin-cdn-import": "^0.3.5",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-mock": "^2.9.6",
+    "vite-plugin-mock": "2.9.6",
     "vite-plugin-remove-console": "^2.1.1",
     "vite-svg-loader": "^4.0.0",
-    "vue-eslint-parser": "^9.3.0",
+    "vue-eslint-parser": "^9.3.1",
     "vue-tsc": "^1.6.5"
   },
   "pnpm": {
@@ -154,6 +154,7 @@
     },
     "allowedDeprecatedVersions": {
       "sourcemap-codec": "*",
+      "w3c-hr-time": "*",
       "stable": "*"
     }
   },

public/serverConfig.json

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

src/App.vue

@@ -7,10 +7,12 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { checkVersion } from "version-rocket";
 import { ElConfigProvider } from "element-plus";
-import zhCn from "element-plus/lib/locale/lang/zh-cn";
 import en from "element-plus/lib/locale/lang/en";
 import { ReDialog } from "@/components/ReDialog";
+import zhCn from "element-plus/lib/locale/lang/zh-cn";
+
 export default defineComponent({
   name: "app",
   components: {
@@ -21,6 +23,29 @@ export default defineComponent({
     currentLocale() {
       return this.$storage.locale?.locale === "zh" ? zhCn : en;
     }
+  },
+  beforeCreate() {
+    const { version, name: title } = __APP_INFO__.pkg;
+    const { VITE_PUBLIC_PATH, MODE } = import.meta.env;
+    // https://github.com/guMcrey/version-rocket/blob/main/README.zh-CN.md#api
+    if (MODE === "production") {
+      // 版本实时更新检测，只作用于线上环境
+      checkVersion(
+        // config
+        {
+          // 5分钟检测一次版本
+          pollingTime: 300000,
+          localPackageVersion: version,
+          originVersionFileUrl: `${location.origin}${VITE_PUBLIC_PATH}version.json`
+        },
+        // options
+        {
+          title,
+          description: "检测到新版本",
+          buttonText: "立即更新"
+        }
+      );
+    }
   }
 });
 </script>

src/api/list.ts

@@ -12,3 +12,8 @@ type Result = {
 export const getCardList = (data?: object) => {
   return http.request<Result>("post", "/getCardList", { data });
 };
+
+/** 版本日志 */
+export const getReleases = () => {
+  return http.request<Result>("get", "/releases");
+};

src/api/system.ts

@@ -5,8 +5,12 @@ type Result = {
   data?: {
     /** 列表数据 */
     list: Array<any>;
-    /** 总数 */
+    /** 总条目数 */
     total?: number;
+    /** 每页显示条目个数 */
+    pageSize?: number;
+    /** 当前页数 */
+    currentPage?: number;
   };
 };
 

src/components/ReDialog/index.ts

@@ -12,6 +12,7 @@ import type {
 
 const dialogStore = ref<Array<DialogOptions>>([]);
 
+/** 打开弹框 */
 const addDialog = (options: DialogOptions) => {
   const open = () =>
     dialogStore.value.push(Object.assign(options, { visible: true }));
@@ -24,16 +25,40 @@ const addDialog = (options: DialogOptions) => {
   }
 };
 
+/** 关闭弹框 */
 const closeDialog = (options: DialogOptions, index: number, args?: any) => {
   dialogStore.value.splice(index, 1);
   options.closeCallBack && options.closeCallBack({ options, index, args });
 };
 
+/**
+ * @description 更改弹框自身属性值
+ * @param value 属性值
+ * @param key 属性，默认`title`
+ * @param index 弹框索引（默认`0`，代表只有一个弹框，对于嵌套弹框要改哪个弹框的属性值就把该弹框索引赋给`index`）
+ */
+const updateDialog = (value: any, key = "title", index = 0) => {
+  dialogStore.value[index][key] = value;
+};
+
+/** 关闭所有弹框 */
 const closeAllDialog = () => {
   dialogStore.value = [];
 };
 
+/** 千万别忘了在下面这三处引入并注册下，放心注册，不使用`addDialog`调用就不会被挂载
+ * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L4
+ * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L13
+ * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L18
+ */
 const ReDialog = withInstall(reDialog);
 
 export type { EventType, ArgsType, DialogProps, ButtonProps, DialogOptions };
-export { ReDialog, dialogStore, addDialog, closeDialog, closeAllDialog };
+export {
+  ReDialog,
+  dialogStore,
+  addDialog,
+  closeDialog,
+  updateDialog,
+  closeAllDialog
+};

src/components/ReIcon/src/Select.vue

@@ -105,7 +105,8 @@ watch(
         props.modelValue.indexOf(":") + 1
       );
     }
-  }
+  },
+  { immediate: true }
 );
 watch(
   () => {
@@ -140,12 +141,11 @@ watch(
           </template>
 
           <el-input
-            class="p-2"
+            class="px-2 pt-2"
             v-model="filterValue"
             placeholder="搜索图标"
             clearable
           />
-          <el-divider border-style="dashed" />
 
           <el-tabs v-model="currentActiveType" @tab-click="handleClick">
             <el-tab-pane
@@ -154,24 +154,26 @@ watch(
               :label="pane.label"
               :name="pane.name"
             >
-              <el-divider class="tab-divider" border-style="dashed" />
               <el-scrollbar height="220px">
                 <ul class="flex flex-wrap px-2 ml-2">
                   <li
                     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 cursor-pointer mr-2 mt-1 flex justify-center items-center border border-solid"
                     :style="iconItemStyle(item)"
                     @click="onChangeIcon(item)"
                   >
-                    <IconifyIconOnline :icon="currentActiveType + item" />
+                    <IconifyIconOnline
+                      :icon="currentActiveType + item"
+                      width="20px"
+                      height="20px"
+                    />
                   </li>
                 </ul>
               </el-scrollbar>
             </el-tab-pane>
           </el-tabs>
-          <el-divider border-style="dashed" />
 
           <el-pagination
             small
@@ -190,14 +192,6 @@ watch(
 </template>
 
 <style lang="scss" scoped>
-.el-divider--horizontal {
-  margin: 1px auto !important;
-}
-
-.tab-divider.el-divider--horizontal {
-  margin: 0 !important;
-}
-
 .icon-item {
   &:hover {
     color: var(--el-color-primary);
@@ -234,5 +228,10 @@ watch(
 :deep(.el-tabs__nav-wrap) {
   position: static;
   margin: 0;
+  box-shadow: 0 2px 5px rgb(0 0 0 / 6%);
+}
+
+:deep(.el-tabs__content) {
+  margin-top: 4px;
 }
 </style>

src/components/RePureTableBar/src/bar.tsx

@@ -200,9 +200,13 @@ export default defineComponent({
 
     return () => (
       <>
-        <div {...attrs} class="w-[99/100] mt-6 p-2 bg-bg_color">
+        <div {...attrs} class="w-[99/100] mt-2 px-2 pb-2 bg-bg_color">
           <div class="flex justify-between w-full h-[60px] p-4">
-            <p class="font-bold truncate">{props.title}</p>
+            {slots?.title ? (
+              slots.title()
+            ) : (
+              <p class="font-bold truncate">{props.title}</p>
+            )}
             <div class="flex items-center justify-around">
               {slots?.buttons ? (
                 <div class="flex mr-4">{slots.buttons()}</div>
@@ -245,6 +249,7 @@ export default defineComponent({
 
               <el-popover
                 v-slots={reference}
+                placement="bottom-start"
                 popper-style={{ padding: 0 }}
                 width="160"
                 trigger="click"

src/components/ReSeamlessScroll/src/index.vue

@@ -51,20 +51,21 @@ let startPosX = null;
 let isHover = false;
 let ease = "ease-in";
 
-// eslint-disable-next-line vue/no-setup-props-destructure
+if (props.classOption["key"] === undefined) {
-const { classOption } = props;
+  // eslint-disable-next-line vue/no-mutating-props
-
+  props.classOption["key"] = 0;
-if (classOption["key"] === undefined) {
-  classOption["key"] = 0;
 }
 
-const wrap = templateRef<HTMLElement | null>(`wrap${classOption["key"]}`, null);
+const wrap = templateRef<HTMLElement | null>(
+  `wrap${props.classOption["key"]}`,
+  null
+);
 const slotList = templateRef<HTMLElement | null>(
-  `slotList${classOption["key"]}`,
+  `slotList${props.classOption["key"]}`,
   null
 );
 const realBox = templateRef<HTMLElement | null>(
-  `realBox${classOption["key"]}`,
+  `realBox${props.classOption["key"]}`,
   null
 );
 
@@ -107,7 +108,7 @@ const defaultOption = computed(() => {
 
 const options = computed(() => {
   // @ts-expect-error
-  return copyObj({}, unref(defaultOption), classOption);
+  return copyObj({}, unref(defaultOption), props.classOption);
 });
 
 const leftSwitchClass = computed(() => {
@@ -495,7 +496,7 @@ defineExpose({
 </script>
 
 <template>
-  <div :ref="'wrap' + classOption['key']">
+  <div :ref="'wrap' + props.classOption['key']">
     <div
       :style="leftSwitch"
       v-if="navigation"
@@ -513,7 +514,7 @@ defineExpose({
       <slot name="right-switch" />
     </div>
     <div
-      :ref="'realBox' + classOption['key']"
+      :ref="'realBox' + props.classOption['key']"
       :style="pos"
       @mouseenter="enter"
       @mouseleave="leave"
@@ -522,7 +523,7 @@ defineExpose({
       @touchend="touchEnd"
       @mousewheel.passive="wheel"
     >
-      <div :ref="'slotList' + classOption['key']" :style="float">
+      <div :ref="'slotList' + props.classOption['key']" :style="float">
         <slot />
       </div>
       <div v-html="copyHtml" :style="float" />

src/directives/auth/index.ts

@@ -7,7 +7,9 @@ export const auth: Directive = {
     if (value) {
       !hasAuth(value) && el.parentNode?.removeChild(el);
     } else {
-      throw new Error("need auths! Like v-auth=\"['btn.add','btn.edit']\"");
+      throw new Error(
+        "[Directive: auth]: need auths! Like v-auth=\"['btn.add','btn.edit']\""
+      );
     }
   }
 };

src/directives/copy/index.ts

@@ -0,0 +1,33 @@
+import { message } from "@/utils/message";
+import { useEventListener } from "@vueuse/core";
+import { copyTextToClipboard } from "@pureadmin/utils";
+import { Directive, type DirectiveBinding } from "vue";
+
+interface CopyEl extends HTMLElement {
+  copyValue: string;
+}
+
+/** 文本复制指令（默认双击复制） */
+export const copy: Directive = {
+  mounted(el: CopyEl, binding: DirectiveBinding) {
+    const { value } = binding;
+    if (value) {
+      el.copyValue = value;
+      const arg = binding.arg ?? "dblclick";
+      // Register using addEventListener on mounted, and removeEventListener automatically on unmounted
+      useEventListener(el, arg, () => {
+        const success = copyTextToClipboard(el.copyValue);
+        success
+          ? message("复制成功", { type: "success" })
+          : message("复制失败", { type: "error" });
+      });
+    } else {
+      throw new Error(
+        '[Directive: copy]: need value! Like v-copy="modelValue"'
+      );
+    }
+  },
+  updated(el: CopyEl, binding: DirectiveBinding) {
+    el.copyValue = binding.value;
+  }
+};

src/directives/elResizeDetector/index.ts

@@ -1,27 +0,0 @@
-import { Directive, type DirectiveBinding, type VNode } from "vue";
-import elementResizeDetectorMaker from "element-resize-detector";
-import type { Erd } from "element-resize-detector";
-import { emitter } from "@/utils/mitt";
-
-const erd: Erd = elementResizeDetectorMaker({
-  strategy: "scroll"
-});
-
-export const resize: Directive = {
-  mounted(el: HTMLElement, binding?: DirectiveBinding, vnode?: VNode) {
-    erd.listenTo(el, elem => {
-      const width = elem.offsetWidth;
-      const height = elem.offsetHeight;
-      if (binding?.instance) {
-        emitter.emit("resize", { detail: { width, height } });
-      } else {
-        vnode.el.dispatchEvent(
-          new CustomEvent("resize", { detail: { width, height } })
-        );
-      }
-    });
-  },
-  unmounted(el: HTMLElement) {
-    erd.uninstall(el);
-  }
-};

src/directives/index.ts

@@ -1,2 +1,3 @@
 export * from "./auth";
-export * from "./elResizeDetector";
+export * from "./copy";
+export * from "./optimize";

src/directives/optimize/index.ts

@@ -0,0 +1,55 @@
+import {
+  isFunction,
+  isObject,
+  isArray,
+  debounce,
+  throttle
+} from "@pureadmin/utils";
+import { useEventListener } from "@vueuse/core";
+import { Directive, type DirectiveBinding } from "vue";
+
+/** 防抖（v-optimize或v-optimize:debounce）、节流（v-optimize:throttle）指令 */
+export const optimize: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const { value } = binding;
+    const optimizeType = binding.arg ?? "debounce";
+    const type = ["debounce", "throttle"].find(t => t === optimizeType);
+    if (type) {
+      if (value && value.event && isFunction(value.fn)) {
+        let params = value?.params;
+        if (params) {
+          if (isArray(params) || isObject(params)) {
+            params = isObject(params) ? Array.of(params) : params;
+          } else {
+            throw new Error(
+              "[Directive: optimize]: `params` must be an array or object"
+            );
+          }
+        }
+        // Register using addEventListener on mounted, and removeEventListener automatically on unmounted
+        useEventListener(
+          el,
+          value.event,
+          type === "debounce"
+            ? debounce(
+                params ? () => value.fn(...params) : value.fn,
+                value?.timeout ?? 200,
+                value?.immediate ?? false
+              )
+            : throttle(
+                params ? () => value.fn(...params) : value.fn,
+                value?.timeout ?? 1000
+              )
+        );
+      } else {
+        throw new Error(
+          "[Directive: optimize]: `event` and `fn` are required, and `fn` must be a function"
+        );
+      }
+    } else {
+      throw new Error(
+        "[Directive: optimize]: only `debounce` and `throttle` are supported"
+      );
+    }
+  }
+};

src/layout/components/navbar.vue

@@ -18,6 +18,7 @@ const {
   onPanel,
   pureApp,
   username,
+  userAvatar,
   avatarsStyle,
   toggleSideBar,
   getDropdownItemStyle,
@@ -85,10 +86,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
       <!-- 退出登录 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover select-none">
-          <img
+          <img :src="userAvatar" :style="avatarsStyle" />
-            src="https://avatars.githubusercontent.com/u/44761321?v=4"
-            :style="avatarsStyle"
-          />
           <p v-if="username" class="dark:text-white">{{ username }}</p>
         </span>
         <template #dropdown>

src/layout/components/notice/index.vue

@@ -22,19 +22,31 @@ notices.value.map(v => (noticesNum.value += v.list.length));
     </span>
     <template #dropdown>
       <el-dropdown-menu>
-        <el-tabs :stretch="true" v-model="activeKey" class="dropdown-tabs">
+        <el-tabs
-          <template v-for="item in notices" :key="item.key">
+          :stretch="true"
-            <el-tab-pane
+          v-model="activeKey"
-              :label="`${item.name}(${item.list.length})`"
+          class="dropdown-tabs"
-              :name="`${item.key}`"
+          :style="{ width: notices.length === 0 ? '200px' : '330px' }"
-            >
+        >
-              <el-scrollbar max-height="330px">
+          <el-empty
-                <div class="noticeList-container">
+            v-if="notices.length === 0"
-                  <NoticeList :list="item.list" />
+            description="暂无消息"
-                </div>
+            :image-size="60"
-              </el-scrollbar>
+          />
-            </el-tab-pane>
+          <span v-else>
-          </template>
+            <template v-for="item in notices" :key="item.key">
+              <el-tab-pane
+                :label="`${item.name}(${item.list.length})`"
+                :name="`${item.key}`"
+              >
+                <el-scrollbar max-height="330px">
+                  <div class="noticeList-container">
+                    <NoticeList :list="item.list" />
+                  </div>
+                </el-scrollbar>
+              </el-tab-pane>
+            </template>
+          </span>
         </el-tabs>
       </el-dropdown-menu>
     </template>
@@ -46,8 +58,9 @@ notices.value.map(v => (noticesNum.value += v.list.length));
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 60px;
+  width: 40px;
   height: 48px;
+  margin-right: 10px;
   cursor: pointer;
 
   .header-notice-icon {
@@ -56,8 +69,6 @@ notices.value.map(v => (noticesNum.value += v.list.length));
 }
 
 .dropdown-tabs {
-  width: 330px;
-
   .noticeList-container {
     padding: 15px 24px 0;
   }

src/layout/components/panel/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
 import { emitter } from "@/utils/mitt";
 import { onClickOutside } from "@vueuse/core";
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
 import Close from "@iconify-icons/ep/close";
 
 const target = ref(null);
@@ -27,8 +27,15 @@ onClickOutside(target, (event: any) => {
   show.value = false;
 });
 
-emitter.on("openPanel", () => {
+onMounted(() => {
-  show.value = true;
+  emitter.on("openPanel", () => {
+    show.value = true;
+  });
+});
+
+onBeforeUnmount(() => {
+  // 解绑`openPanel`公共事件，防止多次触发
+  emitter.off("openPanel");
 });
 </script>
 

src/layout/components/search/components/SearchFooter.vue

@@ -1,3 +1,17 @@
+<script setup lang="ts">
+import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
+import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
+import { useNav } from "@/layout/hooks/useNav";
+import mdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component";
+import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
+
+const props = withDefaults(defineProps<{ total: number }>(), {
+  total: 0
+});
+
+const { device } = useNav();
+</script>
+
 <template>
   <div class="search-footer text-[#333] dark:text-white">
     <span class="search-footer-item">
@@ -13,16 +27,15 @@
       <mdiKeyboardEsc class="icon" />
       关闭
     </span>
+    <p
+      v-if="device !== 'mobile' && props.total > 0"
+      class="search-footer-total"
+    >
+      共{{ props.total }}项
+    </p>
   </div>
 </template>
 
-<script setup lang="ts">
-import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
-import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
-import mdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component";
-import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
-</script>
-
 <style lang="scss" scoped>
 .search-footer {
   display: flex;
@@ -40,5 +53,10 @@ import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
     box-shadow: inset 0 -2px #cdcde6, inset 0 0 1px 1px #fff,
       0 1px 2px 1px #1e235a66;
   }
+
+  .search-footer-total {
+    position: absolute;
+    right: 20px;
+  }
 }
 </style>

src/layout/components/search/components/SearchModal.vue

@@ -8,7 +8,7 @@ import { transformI18n } from "@/plugins/i18n";
 import { ref, computed, shallowRef } from "vue";
 import { useDebounceFn, onKeyStroke } from "@vueuse/core";
 import { usePermissionStoreHook } from "@/store/modules/permission";
-import Search from "@iconify-icons/ep/search";
+import Search from "@iconify-icons/ri/search-line";
 
 interface Props {
   /** 弹窗显隐 */
@@ -25,6 +25,8 @@ const props = withDefaults(defineProps<Props>(), {});
 const router = useRouter();
 
 const keyword = ref("");
+const scrollbarRef = ref();
+const resultRef = ref();
 const activePath = ref("");
 const inputRef = ref<HTMLInputElement | null>(null);
 const resultOptions = shallowRef([]);
@@ -83,6 +85,11 @@ function handleClose() {
   }, 200);
 }
 
+function scrollTo(index) {
+  const scrollTop = resultRef.value.handleScroll(index);
+  scrollbarRef.value.setScrollTop(scrollTop);
+}
+
 /** key up */
 function handleUp() {
   const { length } = resultOptions.value;
@@ -92,8 +99,10 @@ function handleUp() {
   );
   if (index === 0) {
     activePath.value = resultOptions.value[length - 1].path;
+    scrollTo(resultOptions.value.length - 1);
   } else {
     activePath.value = resultOptions.value[index - 1].path;
+    scrollTo(index - 1);
   }
 }
 
@@ -109,6 +118,7 @@ function handleDown() {
   } else {
     activePath.value = resultOptions.value[index + 1].path;
   }
+  scrollTo(index + 1);
 }
 
 /** key enter */
@@ -127,41 +137,56 @@ onKeyStroke("ArrowDown", handleDown);
 <template>
   <el-dialog
     top="5vh"
+    class="pure-search-dialog"
     v-model="show"
-    :width="device === 'mobile' ? '80vw' : '50vw'"
+    :show-close="false"
+    :width="device === 'mobile' ? '80vw' : '40vw'"
     :before-close="handleClose"
+    :style="{
+      borderRadius: '6px'
+    }"
+    append-to-body
     @opened="inputRef.focus()"
     @closed="inputRef.blur()"
   >
     <el-input
       ref="inputRef"
+      size="large"
       v-model="keyword"
       clearable
-      placeholder="请输入关键词搜索"
+      placeholder="搜索菜单"
       @input="handleSearch"
     >
       <template #prefix>
-        <span class="el-input__icon">
+        <IconifyIconOffline
-          <IconifyIconOffline :icon="Search" />
+          :icon="Search"
-        </span>
+          class="text-primary w-[24px] h-[24px]"
+        />
       </template>
     </el-input>
     <div class="search-result-container">
-      <el-empty v-if="resultOptions.length === 0" description="暂无搜索结果" />
+      <el-scrollbar ref="scrollbarRef" max-height="calc(90vh - 140px)">
-      <SearchResult
+        <el-empty
-        v-else
+          v-if="resultOptions.length === 0"
-        v-model:value="activePath"
+          description="暂无搜索结果"
-        :options="resultOptions"
+        />
-        @click="handleEnter"
+        <SearchResult
-      />
+          v-else
+          ref="resultRef"
+          v-model:value="activePath"
+          :options="resultOptions"
+          @click="handleEnter"
+        />
+      </el-scrollbar>
     </div>
     <template #footer>
-      <SearchFooter />
+      <SearchFooter :total="resultOptions.length" />
     </template>
   </el-dialog>
 </template>
+
 <style lang="scss" scoped>
 .search-result-container {
-  margin-top: 20px;
+  margin-top: 12px;
 }
 </style>

src/layout/components/search/components/SearchResult.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { computed } from "vue";
 import { useI18n } from "vue-i18n";
+import { useResizeObserver } from "@vueuse/core";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ref, computed, getCurrentInstance, onMounted } from "vue";
 import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
 import Bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
 
@@ -26,8 +27,11 @@ interface Emits {
   (e: "enter"): void;
 }
 
+const resultRef = ref();
+const innerHeight = ref();
 const props = withDefaults(defineProps<Props>(), {});
 const emit = defineEmits<Emits>();
+const instance = getCurrentInstance()!;
 
 const itemStyle = computed(() => {
   return item => {
@@ -57,22 +61,46 @@ async function handleMouse(item) {
 function handleTo() {
   emit("enter");
 }
+
+function resizeResult() {
+  // el-scrollbar max-height="calc(90vh - 140px)"
+  innerHeight.value = window.innerHeight - window.innerHeight / 10 - 140;
+}
+
+useResizeObserver(resultRef, () => {
+  resizeResult();
+});
+
+function handleScroll(index: number) {
+  const curInstance = instance?.proxy?.$refs[`resultItemRef${index}`];
+  if (!curInstance) return 0;
+  const curRef = curInstance[0] as ElRef;
+  const scrollTop = curRef.offsetTop + 128; // 128 两个result-item（56px+56px=112px）高度加上下margin（8px+8px=16px）
+  return scrollTop > innerHeight.value ? scrollTop - innerHeight.value : 0;
+}
+
+onMounted(() => {
+  resizeResult();
+});
+
+defineExpose({ handleScroll });
 </script>
 
 <template>
-  <div class="result">
+  <div ref="resultRef" class="result">
-    <template v-for="item in options" :key="item.path">
+    <div
-      <div
+      v-for="(item, index) in options"
-        class="result-item dark:bg-[#1d1d1d]"
+      :key="item.path"
-        :style="itemStyle(item)"
+      :ref="'resultItemRef' + index"
-        @click="handleTo"
+      class="result-item dark:bg-[#1d1d1d]"
-        @mouseenter="handleMouse(item)"
+      :style="itemStyle(item)"
-      >
+      @click="handleTo"
-        <component :is="useRenderIcon(item.meta?.icon ?? Bookmark2Line)" />
+      @mouseenter="handleMouse(item)"
-        <span class="result-item-title">{{ t(item.meta?.title) }}</span>
+    >
-        <enterOutlined />
+      <component :is="useRenderIcon(item.meta?.icon ?? Bookmark2Line)" />
-      </div>
+      <span class="result-item-title">{{ t(item.meta?.title) }}</span>
-    </template>
+      <enterOutlined />
+    </div>
   </div>
 </template>
 

src/layout/components/setting/index.vue

@@ -218,7 +218,6 @@ watch($storage, ({ layout }) => {
 });
 
 onBeforeMount(() => {
-  dataThemeChange();
   /* 初始化项目配置 */
   nextTick(() => {
     settings.greyVal &&

src/layout/components/sidebar/horizontal.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import Search from "../search/index.vue";
 import Notice from "../notice/index.vue";
-import { ref, watch, nextTick } from "vue";
 import SidebarItem from "./sidebarItem.vue";
+import { isAllEmpty } from "@pureadmin/utils";
+import { ref, nextTick, computed } from "vue";
 import { useNav } from "@/layout/hooks/useNav";
 import { useTranslationLang } from "../../hooks/useTranslationLang";
 import { usePermissionStoreHook } from "@/store/modules/permission";
@@ -17,27 +18,23 @@ const { t, route, locale, translationCh, translationEn } =
   useTranslationLang(menuRef);
 const {
   title,
-  routers,
   logout,
   backTopMenu,
   onPanel,
-  menuSelect,
   username,
+  userAvatar,
   avatarsStyle,
   getDropdownItemStyle,
   getDropdownItemClass
 } = useNav();
 
+const defaultActive = computed(() =>
+  !isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
+);
+
 nextTick(() => {
   menuRef.value?.handleResize();
 });
-
-watch(
-  () => route.path,
-  () => {
-    menuSelect(route.path, routers);
-  }
-);
 </script>
 
 <template>
@@ -54,8 +51,7 @@ watch(
       ref="menuRef"
       mode="horizontal"
       class="horizontal-header-menu"
-      :default-active="route.path"
+      :default-active="defaultActive"
-      @select="indexPath => menuSelect(indexPath, routers)"
     >
       <sidebar-item
         v-for="route in usePermissionStoreHook().wholeMenus"
@@ -102,10 +98,7 @@ watch(
       <!-- 退出登录 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover">
-          <img
+          <img :src="userAvatar" :style="avatarsStyle" />
-            src="https://avatars.githubusercontent.com/u/44761321?v=4"
-            :style="avatarsStyle"
-          />
           <p v-if="username" class="dark:text-white">{{ username }}</p>
         </span>
         <template #dropdown>

src/layout/components/sidebar/logo.vue

@@ -7,7 +7,6 @@ const props = defineProps({
 });
 
 const { title } = useNav();
-const topPath = getTopMenu().path;
 </script>
 
 <template>
@@ -18,7 +17,7 @@ const topPath = getTopMenu().path;
         key="props.collapse"
         :title="title"
         class="sidebar-logo-link"
-        :to="topPath"
+        :to="getTopMenu()?.path ?? '/'"
       >
         <img src="/logo.svg" alt="logo" />
         <span class="sidebar-title">{{ title }}</span>
@@ -28,7 +27,7 @@ const topPath = getTopMenu().path;
         key="expand"
         :title="title"
         class="sidebar-logo-link"
-        :to="topPath"
+        :to="getTopMenu()?.path ?? '/'"
       >
         <img src="/logo.svg" alt="logo" />
         <span class="sidebar-title">{{ title }}</span>

src/layout/components/sidebar/mixNav.vue

@@ -2,6 +2,7 @@
 import extraIcon from "./extraIcon.vue";
 import Search from "../search/index.vue";
 import Notice from "../notice/index.vue";
+import { isAllEmpty } from "@pureadmin/utils";
 import { useNav } from "@/layout/hooks/useNav";
 import { transformI18n } from "@/plugins/i18n";
 import { ref, toRaw, watch, onMounted, nextTick } from "vue";
@@ -21,12 +22,11 @@ const { t, route, locale, translationCh, translationEn } =
   useTranslationLang(menuRef);
 const {
   device,
-  routers,
   logout,
   onPanel,
-  menuSelect,
   resolvePath,
   username,
+  userAvatar,
   getDivStyle,
   avatarsStyle,
   getDropdownItemStyle,
@@ -37,10 +37,9 @@ function getDefaultActive(routePath) {
   const wholeMenus = usePermissionStoreHook().wholeMenus;
   /** 当前路由的父级路径 */
   const parentRoutes = getParentPaths(routePath, wholeMenus)[0];
-  defaultActive.value = findRouteByPath(
+  defaultActive.value = !isAllEmpty(route.meta?.activePath)
-    parentRoutes,
+    ? route.meta.activePath
-    wholeMenus
+    : findRouteByPath(parentRoutes, wholeMenus)?.children[0]?.path;
-  )?.children[0]?.path;
 }
 
 onMounted(() => {
@@ -71,7 +70,6 @@ watch(
       mode="horizontal"
       class="horizontal-header-menu"
       :default-active="defaultActive"
-      @select="indexPath => menuSelect(indexPath, routers)"
     >
       <el-menu-item
         v-for="route in usePermissionStoreHook().wholeMenus"
@@ -134,10 +132,7 @@ watch(
       <!-- 退出登录 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover select-none">
-          <img
+          <img :src="userAvatar" :style="avatarsStyle" />
-            src="https://avatars.githubusercontent.com/u/44761321?v=4"
-            :style="avatarsStyle"
-          />
           <p v-if="username" class="dark:text-white">{{ username }}</p>
         </span>
         <template #dropdown>

src/layout/components/sidebar/vertical.vue

@@ -5,11 +5,11 @@ import { emitter } from "@/utils/mitt";
 import SidebarItem from "./sidebarItem.vue";
 import leftCollapse from "./leftCollapse.vue";
 import { useNav } from "@/layout/hooks/useNav";
-import { storageLocal } from "@pureadmin/utils";
 import { responsiveStorageNameSpace } from "@/config";
-import { ref, computed, watch, onBeforeMount } from "vue";
+import { storageLocal, isAllEmpty } from "@pureadmin/utils";
 import { findRouteByPath, getParentPaths } from "@/router/utils";
 import { usePermissionStoreHook } from "@/store/modules/permission";
+import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
 
 const route = useRoute();
 const showLogo = ref(
@@ -18,8 +18,7 @@ const showLogo = ref(
   )?.showLogo ?? true
 );
 
-const { routers, device, pureApp, isCollapse, menuSelect, toggleSideBar } =
+const { device, pureApp, isCollapse, menuSelect, toggleSideBar } = useNav();
-  useNav();
 
 const subMenuData = ref([]);
 
@@ -33,7 +32,13 @@ const loading = computed(() =>
   pureApp.layout === "mix" ? false : menuData.value.length === 0 ? true : false
 );
 
-function getSubMenuData(path: string) {
+const defaultActive = computed(() =>
+  !isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
+);
+
+function getSubMenuData() {
+  let path = "";
+  path = defaultActive.value;
   subMenuData.value = [];
   // path的上级路由组成的数组
   const parentPathArr = getParentPaths(
@@ -49,22 +54,27 @@ function getSubMenuData(path: string) {
   subMenuData.value = parenetRoute?.children;
 }
 
-getSubMenuData(route.path);
+watch(
+  () => [route.path, usePermissionStoreHook().wholeMenus],
+  () => {
+    if (route.path.includes("/redirect")) return;
+    getSubMenuData();
+    menuSelect(route.path);
+  }
+);
+
+onMounted(() => {
+  getSubMenuData();
 
-onBeforeMount(() => {
   emitter.on("logoChange", key => {
     showLogo.value = key;
   });
 });
 
-watch(
+onBeforeUnmount(() => {
-  () => [route.path, usePermissionStoreHook().wholeMenus],
+  // 解绑`logoChange`公共事件，防止多次触发
-  () => {
+  emitter.off("logoChange");
-    if (route.path.includes("/redirect")) return;
+});
-    getSubMenuData(route.path);
-    menuSelect(route.path, routers);
-  }
-);
 </script>
 
 <template>
@@ -83,9 +93,8 @@ watch(
         mode="vertical"
         class="outer-most select-none"
         :collapse="isCollapse"
-        :default-active="route.path"
+        :default-active="defaultActive"
         :collapse-transition="false"
-        @select="indexPath => menuSelect(indexPath, routers)"
       >
         <sidebar-item
           v-for="routes in menuData"

src/layout/components/tag/index.vue

@@ -4,12 +4,12 @@ import { emitter } from "@/utils/mitt";
 import { RouteConfigs } from "../../types";
 import { useTags } from "../../hooks/useTag";
 import { routerArrays } from "@/layout/types";
-import { isEqual, isAllEmpty } from "@pureadmin/utils";
 import { handleAliveRoute, getTopMenu } from "@/router/utils";
 import { useSettingStoreHook } from "@/store/modules/settings";
+import { useResizeObserver, useFullscreen } from "@vueuse/core";
+import { isEqual, isAllEmpty, debounce } from "@pureadmin/utils";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
-import { ref, watch, unref, toRaw, nextTick, onBeforeMount } from "vue";
+import { ref, watch, unref, toRaw, nextTick, onBeforeUnmount } from "vue";
-import { useResizeObserver, useDebounceFn, useFullscreen } from "@vueuse/core";
 
 import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
 import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
@@ -50,24 +50,26 @@ const tabDom = ref();
 const containerDom = ref();
 const scrollbarDom = ref();
 const isShowArrow = ref(false);
-const topPath = getTopMenu().path;
+const topPath = getTopMenu()?.path;
 const { VITE_HIDE_HOME } = import.meta.env;
 const { isFullscreen, toggle } = useFullscreen();
 
-const dynamicTagView = () => {
+const dynamicTagView = async () => {
+  await nextTick();
   const index = multiTags.value.findIndex(item => {
-    if (item.query) {
+    if (!isAllEmpty(route.query)) {
       return isEqual(route.query, item.query);
-    } else if (item.params) {
+    } else if (!isAllEmpty(route.params)) {
       return isEqual(route.params, item.params);
     } else {
-      return item.path === route.path;
+      return route.path === item.path;
     }
   });
   moveToView(index);
 };
 
 const moveToView = async (index: number): Promise<void> => {
+  await nextTick();
   const tabNavPadding = 10;
   if (!instance.refs["dynamic" + index]) return;
   const tabItemEl = instance.refs["dynamic" + index][0];
@@ -78,9 +80,6 @@ const moveToView = async (index: number): Promise<void> => {
     ? scrollbarDom.value?.offsetWidth
     : 0;
 
-  // 获取视图更新后dom
-  await nextTick();
-
   // 已有标签页总长度（包含溢出部分）
   const tabDomWidth = tabDom.value ? tabDom.value?.offsetWidth : 0;
 
@@ -135,31 +134,29 @@ const handleScroll = (offset: number): void => {
   }
 };
 
-function dynamicRouteTag(value: string, parentPath: string): void {
+function dynamicRouteTag(value: string): void {
   const hasValue = multiTags.value.some(item => {
     return item.path === value;
   });
 
-  function concatPath(arr: object[], value: string, parentPath: string) {
+  function concatPath(arr: object[], value: string) {
     if (!hasValue) {
       arr.forEach((arrItem: any) => {
-        const pathConcat = parentPath + arrItem.path;
+        if (arrItem.path === value || arrItem.path === value) {
-        if (arrItem.path === value || pathConcat === value) {
           useMultiTagsStoreHook().handleTags("push", {
             path: value,
-            parentPath: `/${parentPath.split("/")[1]}`,
             meta: arrItem.meta,
             name: arrItem.name
           });
         } else {
           if (arrItem.children && arrItem.children.length > 0) {
-            concatPath(arrItem.children, value, parentPath);
+            concatPath(arrItem.children, value);
           }
         }
       });
     }
   }
-  concatPath(router.options.routes as any, value, parentPath);
+  concatPath(router.options.routes as any, value);
 }
 
 /** 刷新路由 */
@@ -169,7 +166,7 @@ function onFresh() {
     path: "/redirect" + fullPath,
     query
   });
-  handleAliveRoute(route as toRouteType, "refresh");
+  handleAliveRoute(route as ToRouteType, "refresh");
 }
 
 function deleteDynamicTag(obj: any, current: any, tag?: string) {
@@ -242,7 +239,7 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
 
 function deleteMenu(item, tag?: string) {
   deleteDynamicTag(item, item.path, tag);
-  handleAliveRoute(route as toRouteType);
+  handleAliveRoute(route as ToRouteType);
 }
 
 function onClickDrop(key, item, selectRoute?: RouteConfigs) {
@@ -290,7 +287,7 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
         length: multiTags.value.length
       });
       router.push(topPath);
-      handleAliveRoute(route as toRouteType);
+      handleAliveRoute(route as ToRouteType);
       break;
     case 6:
       // 整体页面全屏
@@ -465,7 +462,17 @@ function tagOnClick(item) {
   // showMenuModel(item?.path, item?.query);
 }
 
-onBeforeMount(() => {
+watch(route, () => {
+  activeIndex.value = -1;
+  dynamicTagView();
+});
+
+watch(isFullscreen, () => {
+  tagsViews[6].icon = Fullscreen;
+  tagsViews[6].text = $t("buttons.hswholeFullScreen");
+});
+
+onMounted(() => {
   if (!instance) return;
 
   // 根据当前路由初始化操作标签页的禁用状态
@@ -483,32 +490,25 @@ onBeforeMount(() => {
   });
 
   //  接收侧边栏切换传递过来的参数
-  emitter.on("changLayoutRoute", ({ indexPath, parentPath }) => {
+  emitter.on("changLayoutRoute", indexPath => {
-    dynamicRouteTag(indexPath, parentPath);
+    dynamicRouteTag(indexPath);
     setTimeout(() => {
       showMenuModel(indexPath);
     });
   });
-});
 
-watch([route], () => {
-  activeIndex.value = -1;
-  dynamicTagView();
-});
-
-watch(isFullscreen, () => {
-  tagsViews[6].icon = Fullscreen;
-  tagsViews[6].text = $t("buttons.hswholeFullScreen");
-});
-
-onMounted(() => {
   useResizeObserver(
     scrollbarDom,
-    useDebounceFn(() => {
+    debounce(() => dynamicTagView())
-      dynamicTagView();
-    }, 200)
   );
 });
+
+onBeforeUnmount(() => {
+  // 解绑`tagViewsChange`、`tagViewsShowModel`、`changLayoutRoute`公共事件，防止多次触发
+  emitter.off("tagViewsChange");
+  emitter.off("tagViewsShowModel");
+  emitter.off("changLayoutRoute");
+});
 </script>
 
 <template>

src/layout/hooks/useNav.ts

@@ -3,6 +3,7 @@ import { getConfig } from "@/config";
 import { useRouter } from "vue-router";
 import { emitter } from "@/utils/mitt";
 import { routeMetaType } from "../types";
+import userAvatar from "@/assets/user.jpg";
 import { getTopMenu } from "@/router/utils";
 import { useGlobal } from "@pureadmin/utils";
 import { transformI18n } from "@/plugins/i18n";
@@ -87,7 +88,7 @@ export function useNav() {
   }
 
   function backTopMenu() {
-    router.push(getTopMenu().path);
+    router.push(getTopMenu()?.path);
   }
 
   function onPanel() {
@@ -113,38 +114,13 @@ export function useNav() {
     }
   }
 
-  function menuSelect(indexPath: string, routers): void {
+  function menuSelect(indexPath: string) {
-    if (wholeMenus.value.length === 0) return;
+    if (wholeMenus.value.length === 0 || isRemaining(indexPath)) return;
-    if (isRemaining(indexPath)) return;
+    emitter.emit("changLayoutRoute", indexPath);
-    let parentPath = "";
-    const parentPathIndex = indexPath.lastIndexOf("/");
-    if (parentPathIndex > 0) {
-      parentPath = indexPath.slice(0, parentPathIndex);
-    }
-    /** 找到当前路由的信息 */
-    function findCurrentRoute(indexPath: string, routes) {
-      if (!routes) return console.error(errorInfo);
-      return routes.map(item => {
-        if (item.path === indexPath) {
-          if (item.redirect) {
-            findCurrentRoute(item.redirect, item.children);
-          } else {
-            /** 切换左侧菜单 通知标签页 */
-            emitter.emit("changLayoutRoute", {
-              indexPath,
-              parentPath
-            });
-          }
-        } else {
-          if (item.children) findCurrentRoute(indexPath, item.children);
-        }
-      });
-    }
-    findCurrentRoute(indexPath, routers);
   }
 
   /** 判断路径是否参与菜单 */
-  function isRemaining(path: string): boolean {
+  function isRemaining(path: string) {
     return remainingPaths.includes(path);
   }
 
@@ -166,6 +142,7 @@ export function useNav() {
     isCollapse,
     pureApp,
     username,
+    userAvatar,
     avatarsStyle,
     tooltipEffect,
     getDropdownItemStyle,

src/layout/hooks/useTranslationLang.ts

@@ -1,7 +1,7 @@
 import { useNav } from "./useNav";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
-import { watch, type Ref } from "vue";
+import { watch, onBeforeMount, type Ref } from "vue";
 
 export function useTranslationLang(ref?: Ref) {
   const { $storage, changeTitle, handleResize } = useNav();
@@ -27,6 +27,10 @@ export function useTranslationLang(ref?: Ref) {
     }
   );
 
+  onBeforeMount(() => {
+    locale.value = $storage.locale?.locale ?? "zh";
+  });
+
   return {
     t,
     route,

src/layout/index.vue

@@ -3,12 +3,21 @@ import "animate.css";
 // 引入 src/components/ReIcon/src/offlineIcon.ts 文件中所有使用addIcon添加过的本地图标
 import "@/components/ReIcon/src/offlineIcon";
 import { setType } from "./types";
-import { emitter } from "@/utils/mitt";
 import { useLayout } from "./hooks/useLayout";
+import { useResizeObserver } from "@vueuse/core";
 import { useAppStoreHook } from "@/store/modules/app";
 import { useSettingStoreHook } from "@/store/modules/settings";
 import { deviceDetection, useDark, useGlobal } from "@pureadmin/utils";
-import { h, reactive, computed, onMounted, defineComponent } from "vue";
+import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
+import {
+  h,
+  ref,
+  reactive,
+  computed,
+  onMounted,
+  onBeforeMount,
+  defineComponent
+} from "vue";
 
 import navbar from "./components/navbar.vue";
 import tag from "./components/tag/index.vue";
@@ -18,6 +27,7 @@ import Vertical from "./components/sidebar/vertical.vue";
 import Horizontal from "./components/sidebar/horizontal.vue";
 import backTop from "@/assets/svg/back_top.svg?component";
 
+const appWrapperRef = ref();
 const { isDark } = useDark();
 const { layout } = useLayout();
 const isMobile = deviceDetection();
@@ -70,10 +80,10 @@ function toggle(device: string, bool: boolean) {
 // 判断是否可自动关闭菜单栏
 let isAutoCloseSidebar = true;
 
-// 监听容器
+useResizeObserver(appWrapperRef, entries => {
-emitter.on("resize", ({ detail }) => {
   if (isMobile) return;
-  const { width } = detail;
+  const entry = entries[0];
+  const { width } = entry.contentRect;
   width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
   /** width app-wrapper类容器宽度
    * 0 < width <= 760 隐藏侧边栏
@@ -88,11 +98,12 @@ emitter.on("resize", ({ detail }) => {
       toggle("desktop", false);
       isAutoCloseSidebar = false;
     }
-  } else if (width > 990) {
+  } else if (width > 990 && !set.sidebar.isClickCollapse) {
-    if (!set.sidebar.isClickCollapse) {
+    toggle("desktop", true);
-      toggle("desktop", true);
+    isAutoCloseSidebar = true;
-      isAutoCloseSidebar = true;
+  } else {
-    }
+    toggle("desktop", false);
+    isAutoCloseSidebar = false;
   }
 });
 
@@ -102,6 +113,10 @@ onMounted(() => {
   }
 });
 
+onBeforeMount(() => {
+  useDataThemeChange().dataThemeChange();
+});
+
 const layoutHeader = defineComponent({
   render() {
     return h(
@@ -134,7 +149,7 @@ const layoutHeader = defineComponent({
 </script>
 
 <template>
-  <div :class="['app-wrapper', set.classes]" v-resize>
+  <div ref="appWrapperRef" :class="['app-wrapper', set.classes]">
     <div
       v-show="
         set.device === 'mobile' &&

src/layout/types.ts

@@ -6,7 +6,6 @@ export const routerArrays: Array<RouteConfigs> =
     ? [
         {
           path: "/welcome",
-          parentPath: "/",
           meta: {
             title: "menus.hshome",
             icon: "homeFilled"
@@ -25,7 +24,6 @@ export type routeMetaType = {
 
 export type RouteConfigs = {
   path?: string;
-  parentPath?: string;
   query?: object;
   params?: object;
   meta?: routeMetaType;

src/router/index.ts

@@ -23,7 +23,7 @@ import {
   formatFlatteningRoutes
 } from "./utils";
 import { buildHierarchyTree } from "@/utils/tree";
-import { isUrl, openLink, storageSession } from "@pureadmin/utils";
+import { isUrl, openLink, storageSession, isAllEmpty } from "@pureadmin/utils";
 
 import remainingRouter from "./modules/remaining";
 
@@ -101,7 +101,7 @@ const whiteList = ["/login"];
 
 const { VITE_HIDE_HOME } = import.meta.env;
 
-router.beforeEach((to: toRouteType, _from, next) => {
+router.beforeEach((to: ToRouteType, _from, next) => {
   if (to.meta?.keepAlive) {
     handleAliveRoute(to, "add");
     // 页面整体刷新和点击标签页刷新
@@ -158,14 +158,26 @@ router.beforeEach((to: toRouteType, _from, next) => {
             getTopMenu(true);
             // query、params模式路由传参数的标签页不在此处处理
             if (route && route.meta?.title) {
-              useMultiTagsStoreHook().handleTags("push", {
+              if (isAllEmpty(route.parentId) && route.meta?.backstage) {
-                path: route.path,
+                // 此处为动态顶级路由（目录）
-                name: route.name,
+                const { path, name, meta } = route.children[0];
-                meta: route.meta
+                useMultiTagsStoreHook().handleTags("push", {
-              });
+                  path,
+                  name,
+                  meta
+                });
+              } else {
+                const { path, name, meta } = route;
+                useMultiTagsStoreHook().handleTags("push", {
+                  path,
+                  name,
+                  meta
+                });
+              }
             }
           }
-          router.push(to.fullPath);
+          // 确保动态路由完全加入路由列表并且不影响静态路由（注意：动态路由刷新时router.beforeEach可能会触发两次，第一次触发动态路由还未完全添加，第二次动态路由才完全添加到路由列表，如果需要在router.beforeEach做一些判断可以在to.name存在的条件下去判断，这样就只会触发一次）
+          if (isAllEmpty(to.name)) router.push(to.fullPath);
         });
       }
       toCorrectRoute();

src/router/modules/able.ts

@@ -10,6 +10,15 @@ export default {
     rank: able
   },
   children: [
+    {
+      path: "/able/directives",
+      name: "Directives",
+      component: () => import("@/views/able/directives.vue"),
+      meta: {
+        title: $t("menus.hsOptimize"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
     {
       path: "/able/watermark",
       name: "WaterMark",

src/router/modules/components.ts

@@ -3,7 +3,7 @@ import { components } from "@/router/enums";
 
 export default {
   path: "/components",
-  redirect: "/components/video",
+  redirect: "/components/dialog",
   meta: {
     icon: "menu",
     title: $t("menus.hscomponents"),
@@ -12,7 +12,7 @@ export default {
   children: [
     {
       path: "/components/dialog",
-      name: "Dialog",
+      name: "DialogPage",
       component: () => import("@/views/components/dialog/index.vue"),
       meta: {
         title: $t("menus.hsdialog"),
@@ -51,7 +51,7 @@ export default {
     },
     {
       path: "/components/video",
-      name: "Video",
+      name: "VideoPage",
       component: () => import("@/views/components/video/index.vue"),
       meta: {
         title: $t("menus.hsvideo")
@@ -59,7 +59,7 @@ export default {
     },
     {
       path: "/components/map",
-      name: "Map",
+      name: "MapPage",
       component: () => import("@/views/components/map/index.vue"),
       meta: {
         title: $t("menus.hsmap"),
@@ -91,7 +91,7 @@ export default {
     },
     {
       path: "/components/button",
-      name: "Button",
+      name: "ButtonPage",
       component: () => import("@/views/components/button/index.vue"),
       meta: {
         title: $t("menus.hsbutton")

src/router/utils.ts

@@ -256,7 +256,7 @@ function formatTwoStageRoutes(routesList: RouteRecordRaw[]) {
 }
 
 /** 处理缓存路由（添加、删除、刷新） */
-function handleAliveRoute({ name }: toRouteType, mode?: string) {
+function handleAliveRoute({ name }: ToRouteType, mode?: string) {
   switch (mode) {
     case "add":
       usePermissionStoreHook().cacheOperate({

src/store/modules/types.ts

@@ -24,7 +24,6 @@ export type appType = {
 
 export type multiType = {
   path: string;
-  parentPath: string;
   name: string;
   meta: any;
   query?: object;

src/style/dark.scss

@@ -139,6 +139,23 @@ html.dark {
     }
   }
 
+  /* 自定义菜单搜索样式 */
+  .pure-search-dialog {
+    .el-dialog__footer {
+      box-shadow: 0 -1px 0 0 #555a64, 0 -3px 6px 0 rgb(69 98 155 / 12%);
+    }
+
+    .search-footer {
+      .search-footer-item {
+        color: rgb(235 235 235 / 60%);
+
+        .icon {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+
   /* ReSegmented 组件 */
   .pure-segmented {
     color: rgb(255 255 255 / 65%);

src/style/element-plus.scss

@@ -148,3 +148,24 @@
     }
   }
 }
+
+/* 自定义菜单搜索样式 */
+.pure-search-dialog {
+  .el-dialog__header {
+    display: none;
+  }
+
+  .el-dialog__body {
+    padding-top: 12px;
+    padding-bottom: 0;
+  }
+
+  .el-input__inner {
+    font-size: 1.2em;
+  }
+
+  .el-dialog__footer {
+    padding-bottom: 10px;
+    box-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgb(69 98 155 / 12%);
+  }
+}

src/utils/http/index.ts

@@ -63,7 +63,7 @@ class PureHttp {
       async (config: PureHttpRequestConfig): Promise<any> => {
         // 开启进度条动画
         NProgress.start();
-        // 优先判断post/get等方法是否传入回掉，否则执行初始化设置等回掉
+        // 优先判断post/get等方法是否传入回调，否则执行初始化设置等回调
         if (typeof config.beforeRequestCallback === "function") {
           config.beforeRequestCallback(config);
           return config;
@@ -123,7 +123,7 @@ class PureHttp {
         const $config = response.config;
         // 关闭进度条动画
         NProgress.done();
-        // 优先判断post/get等方法是否传入回掉，否则执行初始化设置等回掉
+        // 优先判断post/get等方法是否传入回调，否则执行初始化设置等回调
         if (typeof $config.beforeResponseCallback === "function") {
           $config.beforeResponseCallback(response);
           return response.data;
@@ -159,7 +159,7 @@ class PureHttp {
       ...axiosConfig
     } as PureHttpRequestConfig;
 
-    // 单独处理自定义请求/响应回掉
+    // 单独处理自定义请求/响应回调
     return new Promise((resolve, reject) => {
       PureHttp.axiosInstance
         .request(config)

src/utils/mitt.ts

@@ -1,21 +1,13 @@
 import type { Emitter } from "mitt";
 import mitt from "mitt";
 
+/** 全局公共事件需要在此处添加类型 */
 type Events = {
-  resize: {
-    detail: {
-      width: number;
-      height: number;
-    };
-  };
   openPanel: string;
   tagViewsChange: string;
   tagViewsShowModel: string;
   logoChange: boolean;
-  changLayoutRoute: {
+  changLayoutRoute: string;
-    indexPath: string;
-    parentPath: string;
-  };
 };
 
 export const emitter: Emitter<Events> = mitt<Events>();

src/views/able/directives.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { message } from "@/utils/message";
+
+defineOptions({
+  name: "Directives"
+});
+
+const search = ref("");
+const searchTwo = ref("");
+const searchThree = ref("");
+const searchFour = ref("");
+const searchFive = ref("");
+const searchSix = ref("copy");
+const text = ref("可复制的文本");
+
+function onInput() {
+  message(search.value);
+}
+function onInputTwo() {
+  message(searchTwo.value);
+}
+function onInputThree({ name, sex }) {
+  message(`${name}${sex}${searchThree.value}`);
+}
+
+function onInputFour() {
+  message(searchFour.value);
+}
+function onInputFive({ name, sex }) {
+  message(`${name}${sex}${searchFive.value}`);
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">自定义防抖、截流、文本复制指令</span>
+      </div>
+    </template>
+    <div class="mb-2">
+      防抖指令（连续输入，只会执行第一次点击事件，立即执行）
+      <el-input
+        v-optimize="{
+          event: 'input',
+          fn: onInput,
+          immediate: true,
+          timeout: 1000
+        }"
+        v-model="search"
+        class="!w-[200px]"
+        clearable
+        @clear="onInput"
+      />
+    </div>
+    <div class="mb-2">
+      防抖指令（连续输入，只会执行最后一次事件，延后执行）
+      <el-input
+        v-optimize="{ event: 'input', fn: onInputTwo, timeout: 400 }"
+        v-model="searchTwo"
+        class="!w-[200px]"
+        clearable
+      />
+    </div>
+    <div>
+      防抖指令（连续输入，只会执行最后一次事件，延后执行，传参用法）
+      <el-input
+        v-optimize="{
+          event: 'input',
+          fn: onInputThree,
+          timeout: 400,
+          params: { name: '小明', sex: '男' }
+        }"
+        v-model="searchThree"
+        class="!w-[200px]"
+        clearable
+      />
+    </div>
+
+    <el-divider />
+
+    <div class="mb-2">
+      节流指令（连续输入，每一秒只会执行一次事件）
+      <el-input
+        v-optimize:throttle="{ event: 'input', fn: onInputFour, timeout: 1000 }"
+        v-model="searchFour"
+        class="!w-[200px]"
+        clearable
+      />
+    </div>
+    <div>
+      节流指令（连续输入，每一秒只会执行一次事件，传参用法）
+      <el-input
+        v-optimize:throttle="{
+          event: 'input',
+          fn: onInputFive,
+          params: { name: '小明', sex: '男' }
+        }"
+        v-model="searchFive"
+        class="!w-[200px]"
+        clearable
+      />
+    </div>
+
+    <el-divider />
+
+    <div class="mb-2">
+      文本复制指令（双击输入框内容即可复制）
+      <el-input v-copy="searchSix" v-model="searchSix" class="!w-[200px]" />
+    </div>
+    <div>
+      文本复制指令（自定义触发事件，单击复制）
+      <span v-copy:click="text" class="text-sky-500">{{ text }}</span>
+    </div>
+  </el-card>
+</template>

src/views/about/columns.tsx

@@ -54,14 +54,14 @@ export function useColumns() {
       }
     },
     {
-      label: "QQ交流群",
+      label: "精简版",
       cellRenderer: () => {
         return (
           <a
-            href="https://yiming_chang.gitee.io/pure-admin-doc/pages/support/#qq-%E4%BA%A4%E6%B5%81%E7%BE%A4"
+            href="https://github.com/pure-admin/pure-admin-thin"
             target="_blank"
           >
-            <span style="color: var(--el-color-primary)">点击加群</span>
+            <span style="color: var(--el-color-primary)">精简版</span>
           </a>
         );
       }

src/views/components/button/index.vue

@@ -2,7 +2,7 @@
 import { ref } from "vue";
 
 defineOptions({
-  name: "Button"
+  name: "ButtonPage"
 });
 
 const { VITE_PUBLIC_PATH } = import.meta.env;

src/views/components/dialog/form.vue

@@ -15,8 +15,10 @@ const props = withDefaults(defineProps<FormProps>(), {
   formInline: () => ({ user: "", region: "" })
 });
 
-// vue 规定所有的 prop 都遵循着单向绑定原则，不能在子组件中更改 prop 值，该 form.vue 文件为子组件
+// vue 规定所有的 prop 都遵循着单向绑定原则，直接修改 prop 时，Vue 会抛出警告。此处的写法仅仅是为了消除警告。
-// 如果需要拿到初始化的 prop 值并使得组件变量可修改，则需要在子组件定义一个新的变量接受这个子组件的 prop
+// 因为对一个 reactive 对象执行 ref，返回 Ref 对象的 value 值仍为传入的 reactive 对象，
+// 即 newFormInline === props.formInline 为 true，所以此处代码的实际效果，仍是直接修改 props.formInline。
+// 但该写法仅适用于 props.formInline 是一个对象类型的情况，原始类型需抛出事件
 // 推荐阅读：https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
 const newFormInline = ref(props.formInline);
 </script>

src/views/components/dialog/formPrimitive.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useVModel } from "@vueuse/core";
+
+// 声明 props 类型
+export interface FormProps {
+  data: string;
+}
+
+// 声明 props 默认值
+// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
+const props = withDefaults(defineProps<FormProps>(), {
+  data: () => ""
+});
+
+// 使用 vueuse 的双向绑定工具
+const emit = defineEmits(["update:data"]);
+const data = useVModel(props, "data", emit);
+</script>
+
+<template>
+  <el-input class="!w-[220px]" v-model="data" placeholder="请输入内容" />
+</template>

src/views/components/dialog/index.vue

@@ -2,12 +2,18 @@
 import { useRouter } from "vue-router";
 import { h, createVNode, ref } from "vue";
 import { message } from "@/utils/message";
-import { cloneDeep } from "@pureadmin/utils";
 import forms, { type FormProps } from "./form.vue";
-import { addDialog, closeDialog, closeAllDialog } from "@/components/ReDialog";
+import formPrimitive from "./formPrimitive.vue";
+import { cloneDeep, debounce } from "@pureadmin/utils";
+import {
+  addDialog,
+  closeDialog,
+  updateDialog,
+  closeAllDialog
+} from "@/components/ReDialog";
 
 defineOptions({
-  name: "Dialog"
+  name: "DialogPage"
 });
 
 const router = useRouter();
@@ -60,13 +66,16 @@ function onStyleClick() {
   });
 }
 
-function onoOpenDelayClick() {
+// 添加 600ms 防抖
-  addDialog({
+const onoOpenDelayClick = debounce(
-    title: "延时2秒打开弹框",
+  () =>
-    openDelay: 2000,
+    addDialog({
-    contentRenderer: () => <p>弹框内容-延时2秒打开弹框</p>
+      title: "延时2秒打开弹框",
-  });
+      openDelay: 2000 - 600,
-}
+      contentRenderer: () => <p>弹框内容-延时2秒打开弹框</p>
+    }),
+  600
+);
 
 function onCloseDelayClick() {
   addDialog({
@@ -240,6 +249,35 @@ function onNestingClick() {
   });
 }
 
+// 满足在 contentRenderer 内容区更改弹框自身属性值的场景
+function onUpdateClick() {
+  const curPage = ref(1);
+  addDialog({
+    title: `第${curPage.value}页`,
+    contentRenderer: () => (
+      <>
+        <el-button
+          disabled={curPage.value > 1 ? false : true}
+          onClick={() => {
+            curPage.value -= 1;
+            updateDialog(`第${curPage.value}页`);
+          }}
+        >
+          上一页
+        </el-button>
+        <el-button
+          onClick={() => {
+            curPage.value += 1;
+            updateDialog(`第${curPage.value}页`);
+          }}
+        >
+          下一页
+        </el-button>
+      </>
+    )
+  });
+}
+
 // 结合Form表单（第一种方式，弹框关闭立刻恢复初始值）通过 props 属性接收子组件的 prop 并赋值
 function onFormOneClick() {
   addDialog({
@@ -279,7 +317,10 @@ function onFormTwoClick() {
   addDialog({
     width: "30%",
     title: "结合Form表单（第二种方式）",
-    contentRenderer: () => h(forms, { formInline: formInline.value }),
+    contentRenderer: () =>
+      h(forms, {
+        formInline: formInline.value
+      }),
     closeCallBack: () => {
       message(
         `当前表单数据为 姓名：${formInline.value.user} 城市：${formInline.value.region}`
@@ -301,7 +342,9 @@ function onFormThreeClick() {
     width: "30%",
     title: "结合Form表单（第三种方式）",
     contentRenderer: () =>
-      createVNode(forms, { formInline: formThreeInline.value }),
+      createVNode(forms, {
+        formInline: formThreeInline.value
+      }),
     closeCallBack: () => {
       message(
         `当前表单数据为 姓名：${formThreeInline.value.user} 城市：${formThreeInline.value.region}`
@@ -336,6 +379,26 @@ function onFormFourClick() {
   });
 }
 
+// 子组件 prop 为 primitive 类型的 demo
+const formPrimitiveParam = ref("Hello World");
+const resetFormPrimitiveParam = ref(formPrimitiveParam.value);
+function onFormPrimitiveFormClick() {
+  addDialog({
+    width: "30%",
+    title: "子组件 prop 为 primitive 类型 demo",
+    contentRenderer: () =>
+      h(formPrimitive, {
+        data: formPrimitiveParam.value,
+        "onUpdate:data": val => (formPrimitiveParam.value = val)
+      }),
+    closeCallBack: () => {
+      message(`当前表单内容：${formPrimitiveParam.value}`);
+      // 重置表单数据
+      formPrimitiveParam.value = resetFormPrimitiveParam.value;
+    }
+  });
+}
+
 function onBeforeCancelClick() {
   addDialog({
     title: "点击底部取消按钮的回调",
@@ -421,6 +484,7 @@ function onBeforeSureClick() {
       <el-button @click="onOpenClick"> 打开后的回调 </el-button>
       <el-button @click="onCloseCallBackClick"> 关闭后的回调 </el-button>
       <el-button @click="onNestingClick"> 嵌套的弹框 </el-button>
+      <el-button @click="onUpdateClick"> 更改弹框自身属性值 </el-button>
     </el-space>
     <el-divider />
     <el-space wrap>
@@ -436,6 +500,9 @@ function onBeforeSureClick() {
       <el-button @click="onFormFourClick">
         结合Form表单（第四种方式）
       </el-button>
+      <el-button @click="onFormPrimitiveFormClick">
+        子组件 prop 为 primitive 类型
+      </el-button>
     </el-space>
     <el-divider />
     <el-space wrap>

src/views/components/map/index.vue

@@ -2,7 +2,7 @@
 import { Amap } from "@/components/ReMap";
 
 defineOptions({
-  name: "Map"
+  name: "MapPage"
 });
 </script>
 

src/views/components/video/index.vue

@@ -8,7 +8,7 @@ import Player from "xgplayer";
 import "xgplayer/dist/index.min.css";
 
 defineOptions({
-  name: "Video"
+  name: "VideoPage"
 });
 
 onMounted(() => {

src/views/components/waterfall/index.vue

@@ -2,8 +2,10 @@
 import { getList } from "./api";
 import error from "./error.png";
 import loading from "./loading.png";
-import { onMounted, reactive, ref } from "vue";
+import { ElLoading } from "element-plus";
 import "vue-waterfall-plugin-next/dist/style.css";
+import InfiniteLoading from "v3-infinite-loading";
+import { onMounted, reactive, ref, nextTick } from "vue";
 import backTop from "@/assets/svg/back_top.svg?component";
 import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
 
@@ -31,8 +33,8 @@ const options = reactive({
       rowPerView: 2
     }
   },
-  // 动画效果
+  // 动画效果 https://animate.style/
-  animationEffect: "animate__fadeInUp",
+  animationEffect: "animate__zoomInUp",
   // 动画时间
   animationDuration: 1000,
   // 动画延迟
@@ -53,15 +55,26 @@ const options = reactive({
 const page = ref(1);
 const list = ref([]);
 const pageSize = ref();
+const loadingInstance = ref();
 
 /** 加载更多 */
 function handleLoadMore() {
+  loadingInstance.value = ElLoading.service({
+    target: ".content",
+    background: "transparent",
+    text: "加载中"
+  });
   getList({
     page: page.value,
     pageSize: pageSize.value
   }).then(res => {
-    list.value.push(...res);
+    setTimeout(() => {
-    page.value += 1;
+      list.value.push(...res);
+      page.value += 1;
+      nextTick(() => {
+        loadingInstance.value.close();
+      });
+    }, 500);
   });
 }
 
@@ -79,73 +92,60 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-card shadow="never" class="!h-[85vh]">
+  <el-scrollbar height="87vh" class="content">
-    <template #header>
+    <Waterfall :list="list" v-bind="options">
-      <div class="card-header">
+      <template #item="{ item, url, index }">
-        <span class="font-medium">
+        <div
-          瀑布流组件，采用开源的
+          class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-lg hover:shadow-gray-600 group"
-          <el-link
+          @click="handleClick(item)"
-            href="https://github.com/heikaimu/vue3-waterfall-plugin"
+        >
-            target="_blank"
+          <div class="overflow-hidden">
-            style="margin: 0 4px 5px; font-size: 16px"
+            <LazyImg
-          >
+              :url="url"
-            vue-waterfall-plugin-next
+              class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
-          </el-link>
+            />
-        </span>
+          </div>
-      </div>
+          <div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
-    </template>
+            <h4 class="pb-4 text-gray-50 group-hover:text-yellow-300">
-    <el-scrollbar height="78vh" class="content">
+              {{ item.name }}
-      <Waterfall :list="list" v-bind="options">
+            </h4>
-        <template #item="{ item, url, index }">
+            <div
-          <div
+              class="pt-3 flex justify-between items-center border-t border-t-gray-600 border-opacity-50"
-            class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-lg hover:shadow-gray-600 group"
+            >
-            @click="handleClick(item)"
+              <div class="text-gray-50">$ {{ item.price }}</div>
-          >
+              <div>
-            <div class="overflow-hidden">
+                <button
-              <LazyImg
+                  class="px-3 h-7 rounded-full bg-red-500 text-sm text-white shadow-lg transition-all duration-300 hover:bg-red-600"
-                :url="url"
+                  @click.stop="handleDelete(item, index)"
-                class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
+                >
-              />
+                  删除
-            </div>
+                </button>
-            <div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
-              <h4 class="pb-4 text-gray-50 group-hover:text-yellow-300">
-                {{ item.name }}
-              </h4>
-              <div
-                class="pt-3 flex justify-between items-center border-t border-t-gray-600 border-opacity-50"
-              >
-                <div class="text-gray-50">$ {{ item.price }}</div>
-                <div>
-                  <button
-                    class="px-3 h-7 rounded-full bg-red-500 text-sm text-white shadow-lg transition-all duration-300 hover:bg-red-600"
-                    @click.stop="handleDelete(item, index)"
-                  >
-                    删除
-                  </button>
-                </div>
               </div>
             </div>
           </div>
-        </template>
+        </div>
-      </Waterfall>
+      </template>
+    </Waterfall>
 
-      <div class="flex justify-center py-10">
+    <!-- <div class="flex justify-center py-10">
         <button
           class="px-5 py-2 rounded-full bg-gray-700 text-md text-white cursor-pointer hover:bg-gray-800 transition-all duration-300"
           @click="handleLoadMore"
         >
           加载更多
         </button>
-      </div>
+      </div> -->
 
-      <el-backtop
+    <el-backtop
-        title="回到顶部"
+      title="回到顶部"
-        :right="35"
+      :right="35"
-        :visibility-height="400"
+      :visibility-height="400"
-        target=".content .el-scrollbar__wrap"
+      target=".content .el-scrollbar__wrap"
-      >
+    >
-        <backTop />
+      <backTop />
-      </el-backtop>
+    </el-backtop>
-    </el-scrollbar>
+
-  </el-card>
+    <!-- 加载更多 -->
+    <InfiniteLoading :firstload="false" @infinite="handleLoadMore" />
+  </el-scrollbar>
 </template>

src/views/editor/components/base.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>

src/views/editor/components/index.ts

@@ -0,0 +1,9 @@
+import base from "./base.vue";
+import multi from "./multi.vue";
+import picUpload from "./picUpload.vue";
+
+const Base = base;
+const Multi = multi;
+const PicUpload = picUpload;
+
+export { Base, Multi, PicUpload };

src/views/editor/components/multi.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import ReCol from "@/components/ReCol";
+import { onBeforeUnmount, ref, shallowRef } from "vue";
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+
+defineOptions({
+  name: "MultiEditor"
+});
+
+// 模拟后端返回多个编辑器的数据
+const endEditorList = [
+  {
+    value: "<p>测试一</p>"
+  },
+  {
+    value: "<p>测试二</p>"
+  },
+  {
+    value: "<p>测试三</p>"
+  },
+  {
+    value: "<p>测试四</p>"
+  }
+];
+
+// 多个编辑器的情况下，前端必须进行处理，满足 Toolbar 组件的 editor 属性 所需的 shallowRef 格式
+const editorList = ref([]);
+endEditorList.forEach(edit => {
+  editorList.value.push({
+    value: edit.value,
+    // 编辑器实例，必须用 shallowRef
+    editorRef: shallowRef()
+  });
+});
+
+const mode = "default";
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = (editor, index) => {
+  // 记录 editor 实例，重要！
+  editorList.value[index].editorRef = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  return editorList.value.map(edit => {
+    if (edit.editorRef == null) return;
+    edit.editorRef.destroy();
+  });
+});
+</script>
+
+<template>
+  <el-row :gutter="30" justify="space-around">
+    <re-col :value="11" v-for="(edit, index) in editorList" :key="index">
+      <div class="wangeditor">
+        <Toolbar
+          :editor="edit.editorRef"
+          :defaultConfig="toolbarConfig"
+          :mode="mode"
+          style="border-bottom: 1px solid #ccc"
+        />
+        <Editor
+          v-model="edit.value"
+          :defaultConfig="editorConfig"
+          :mode="mode"
+          style="height: 300px; overflow-y: hidden"
+          @onCreated="editor => handleCreated(editor, index)"
+        />
+      </div>
+    </re-col>
+  </el-row>
+</template>

src/views/editor/components/picUpload.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref, shallowRef } from "vue";
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+
+defineOptions({
+  name: "picUpload"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref(
+  "<p>仅提供代码参考，暂不可上传图片，可根据实际业务改写</p>"
+);
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容...", MENU_CONF: {} };
+
+// 更多详细配置看 https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87
+editorConfig.MENU_CONF["uploadImage"] = {
+  // 服务端上传地址，根据实际业务改写
+  server: "",
+  // form-data 的 fieldName，根据实际业务改写
+  fieldName: "file",
+  // 选择文件时的类型限制，根据实际业务改写
+  allowedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
+  // 自定义插入图片
+  customInsert(res: any, insertFn) {
+    // res.data.url是后端返回的图片地址，根据实际业务改写
+    if (res.data.url) {
+      setTimeout(() => {
+        // insertFn插入图片进编辑器
+        insertFn(res.data.url);
+      }, 2000);
+    }
+  }
+};
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>

src/views/editor/index.vue

@@ -1,41 +1,12 @@
 <script setup lang="ts">
-import "@wangeditor/editor/dist/css/style.css"; // 引入 css
+import { ref } from "vue";
-import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { Base, Multi, PicUpload } from "./components";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
-import Edit from "@iconify-icons/ep/edit";
 
 defineOptions({
   name: "Editor"
 });
 
-const mode = "default";
+const activeNames = ref(["1"]);
-// 编辑器实例，必须用 shallowRef
-const editorRef = shallowRef();
-
-// 内容 HTML
-const valueHtml = ref("<p>hello</p>");
-
-// 模拟 ajax 异步获取内容
-onMounted(() => {
-  setTimeout(() => {
-    valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
-  }, 1500);
-});
-
-const toolbarConfig: any = { excludeKeys: "fullScreen" };
-const editorConfig = { placeholder: "请输入内容..." };
-
-// 组件销毁时，也及时销毁编辑器
-onBeforeUnmount(() => {
-  const editor = editorRef.value;
-  if (editor == null) return;
-  editor.destroy();
-});
-
-const handleCreated = editor => {
-  editorRef.value = editor; // 记录 editor 实例，重要！
-};
 </script>
 
 <template>
@@ -47,7 +18,6 @@ const handleCreated = editor => {
           <el-link
             href="https://www.wangeditor.com"
             target="_blank"
-            :icon="useRenderIcon(Edit)"
             style="margin: 0 4px 5px; font-size: 16px"
           >
             Wangeditor
@@ -55,20 +25,22 @@ const handleCreated = editor => {
         </span>
       </div>
     </template>
-    <div class="wangeditor">
+    <el-collapse v-model="activeNames" accordion>
-      <Toolbar
+      <el-collapse-item title="基础用法" name="1">
-        style="border-bottom: 1px solid #ccc"
+        <Base />
-        :editor="editorRef"
+      </el-collapse-item>
-        :defaultConfig="toolbarConfig"
+      <el-collapse-item title="多个富文本" name="2">
-        :mode="mode"
+        <Multi />
-      />
+      </el-collapse-item>
-      <Editor
+      <el-collapse-item title="自定义图片上传" name="3">
-        style="height: 500px; overflow-y: hidden"
+        <PicUpload />
-        v-model="valueHtml"
+      </el-collapse-item>
-        :defaultConfig="editorConfig"
+    </el-collapse>
-        :mode="mode"
-        @onCreated="handleCreated"
-      />
-    </div>
   </el-card>
 </template>
+
+<style lang="scss" scoped>
+:deep(.el-collapse-item__header) {
+  padding-left: 10px;
+}
+</style>

src/views/login/utils/rule.ts

@@ -12,7 +12,7 @@ export const REGEXP_PWD =
   /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/;
 
 /** 登录校验 */
-const loginRules = reactive(<FormRules>{
+const loginRules = reactive<FormRules>({
   password: [
     {
       validator: (rule, value, callback) => {
@@ -44,7 +44,7 @@ const loginRules = reactive(<FormRules>{
 });
 
 /** 手机登录校验 */
-const phoneRules = reactive(<FormRules>{
+const phoneRules = reactive<FormRules>({
   phone: [
     {
       validator: (rule, value, callback) => {
@@ -76,7 +76,7 @@ const phoneRules = reactive(<FormRules>{
 });
 
 /** 忘记密码校验 */
-const updateRules = reactive(<FormRules>{
+const updateRules = reactive<FormRules>({
   phone: [
     {
       validator: (rule, value, callback) => {

src/views/login/utils/verifyCode.ts

@@ -17,11 +17,12 @@ export const useVerifyCode = () => {
     await formEl.validateField(props, isValid => {
       if (isValid) {
         clearInterval(timer.value);
+        isDisabled.value = true;
+        text.value = `${time}`;
         timer.value = setInterval(() => {
           if (time > 0) {
-            text.value = `${time}`;
-            isDisabled.value = true;
             time -= 1;
+            text.value = `${time}`;
           } else {
             text.value = "";
             isDisabled.value = false;

src/views/pure-table/high/adaptive/columns.tsx

@@ -0,0 +1,105 @@
+import type {
+  LoadingConfig,
+  AdaptiveConfig,
+  PaginationProps
+} from "@pureadmin/table";
+import { tableData } from "../data";
+import { ref, onMounted, reactive } from "vue";
+import { clone, delay } from "@pureadmin/utils";
+
+export function useColumns() {
+  const dataList = ref([]);
+  const loading = ref(true);
+  const columns: TableColumnList = [
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ];
+
+  /** 分页配置 */
+  const pagination = reactive<PaginationProps>({
+    pageSize: 20,
+    currentPage: 1,
+    pageSizes: [20, 40, 60],
+    total: 0,
+    align: "right",
+    background: true,
+    small: false
+  });
+
+  /** 加载动画配置 */
+  const loadingConfig = reactive<LoadingConfig>({
+    text: "正在加载第一页...",
+    viewBox: "-10, -10, 50, 50",
+    spinner: `
+        <path class="path" d="
+          M 30 15
+          L 28 17
+          M 25.61 25.61
+          A 15 15, 0, 0, 1, 15 30
+          A 15 15, 0, 1, 1, 27.99 7.5
+          L 15 15
+        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
+      `
+    // svg: "",
+    // background: rgba()
+  });
+
+  /** 撑满内容区自适应高度相关配置 */
+  const adaptiveConfig: AdaptiveConfig = {
+    /** 表格距离页面底部的偏移量，默认值为 `96` */
+    offsetBottom: 110
+    /** 是否固定表头，默认值为 `true`（如果不想固定表头，fixHeader设置为false并且表格要设置table-layout="auto"） */
+    // fixHeader: true
+    /** 页面 `resize` 时的防抖时间，默认值为 `60` ms */
+    // timeout: 60
+    /** 表头的 `z-index`，默认值为 `100` */
+    // zIndex: 100
+  };
+
+  function onSizeChange(val) {
+    console.log("onSizeChange", val);
+  }
+
+  function onCurrentChange(val) {
+    loadingConfig.text = `正在加载第${val}页...`;
+    loading.value = true;
+    delay(600).then(() => {
+      loading.value = false;
+    });
+  }
+
+  onMounted(() => {
+    delay(600).then(() => {
+      const newList = [];
+      Array.from({ length: 6 }).forEach(() => {
+        newList.push(clone(tableData, true));
+      });
+      newList.flat(Infinity).forEach((item, index) => {
+        dataList.value.push({ id: index, ...item });
+      });
+      pagination.total = dataList.value.length;
+      loading.value = false;
+    });
+  });
+
+  return {
+    loading,
+    columns,
+    dataList,
+    pagination,
+    loadingConfig,
+    adaptiveConfig,
+    onSizeChange,
+    onCurrentChange
+  };
+}

src/views/pure-table/high/adaptive/index.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useColumns } from "./columns";
+
+const tableRef = ref();
+
+const {
+  loading,
+  columns,
+  dataList,
+  pagination,
+  loadingConfig,
+  adaptiveConfig,
+  onSizeChange,
+  onCurrentChange
+} = useColumns();
+</script>
+
+<template>
+  <pure-table
+    ref="tableRef"
+    border
+    adaptive
+    :adaptiveConfig="adaptiveConfig"
+    row-key="id"
+    alignWhole="center"
+    showOverflowTooltip
+    :loading="loading"
+    :loading-config="loadingConfig"
+    :data="
+      dataList.slice(
+        (pagination.currentPage - 1) * pagination.pageSize,
+        pagination.currentPage * pagination.pageSize
+      )
+    "
+    :columns="columns"
+    :pagination="pagination"
+    @page-size-change="onSizeChange"
+    @page-current-change="onCurrentChange"
+  />
+</template>

src/views/pure-table/high/list.tsx

@@ -1,3 +1,4 @@
+import Adaptive from "./adaptive/index.vue";
 import Page from "./page/index.vue";
 import RowDrag from "./drag/row/index.vue";
 import ColumnDrag from "./drag/column/index.vue";
@@ -13,6 +14,12 @@ const rendContent = (val: string) =>
   `代码位置：src/views/pure-table/high/${val}/index.vue`;
 
 export const list = [
+  {
+    key: "adaptive",
+    content: rendContent("adaptive"),
+    title: "自适应内容区高度",
+    component: Adaptive
+  },
   {
     key: "page",
     content: rendContent("page"),

src/views/pure-table/high/page/columns.tsx

@@ -6,11 +6,18 @@ import type { PaginationProps, LoadingConfig, Align } from "@pureadmin/table";
 export function useColumns() {
   const dataList = ref([]);
   const loading = ref(true);
+  const select = ref("no");
   const hideVal = ref("nohide");
   const tableSize = ref("default");
   const paginationSmall = ref(false);
   const paginationAlign = ref("right");
   const columns: TableColumnList = [
+    {
+      type: "selection",
+      align: "left",
+      reserveSelection: true,
+      hide: () => (select.value === "no" ? true : false)
+    },
     {
       label: "日期",
       prop: "date",
@@ -83,7 +90,9 @@ export function useColumns() {
       Array.from({ length: 6 }).forEach(() => {
         newList.push(clone(tableData, true));
       });
-      dataList.value = newList.flat(Infinity);
+      newList.flat(Infinity).forEach((item, index) => {
+        dataList.value.push({ id: index, ...item });
+      });
       pagination.total = dataList.value.length;
       loading.value = false;
     });
@@ -93,6 +102,7 @@ export function useColumns() {
     loading,
     columns,
     dataList,
+    select,
     hideVal,
     tableSize,
     pagination,

src/views/pure-table/high/page/index.vue

@@ -5,6 +5,7 @@ const {
   loading,
   columns,
   dataList,
+  select,
   hideVal,
   tableSize,
   pagination,
@@ -20,6 +21,12 @@ const {
 <template>
   <div>
     <el-space class="float-right mb-4">
+      <p class="text-sm">多选：</p>
+      <el-radio-group v-model="select" size="small">
+        <el-radio-button label="yes">是</el-radio-button>
+        <el-radio-button label="no">否</el-radio-button>
+      </el-radio-group>
+      <el-divider direction="vertical" />
       <p class="text-sm">动态列：</p>
       <el-radio-group v-model="hideVal" size="small">
         <el-radio-button label="nohide">不隐藏</el-radio-button>

src/views/system/dept/form.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { formRules } from "./rule";
-import { FormProps } from "./types";
 import ReCol from "@/components/ReCol";
+import { formRules } from "./utils/rule";
+import { FormProps } from "./utils/types";
 import { usePublicHooks } from "../hooks";
 
 const props = withDefaults(defineProps<FormProps>(), {

src/views/system/dept/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useDept } from "./hook";
+import { useDept } from "./utils/hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
@@ -35,7 +35,7 @@ const {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="bg-bg_color w-[99/100] pl-8 pt-4"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
     >
       <el-form-item label="部门名称：" prop="name">
         <el-input
@@ -90,6 +90,8 @@ const {
         <pure-table
           ref="tableRef"
           border
+          adaptive
+          :adaptiveConfig="{ offsetBottom: 32 }"
           align-whole="center"
           row-key="id"
           showOverflowTooltip
@@ -138,3 +140,11 @@ const {
     </PureTableBar>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
+</style>

src/views/system/dept/utils/hook.tsx

@@ -1,12 +1,12 @@
 import dayjs from "dayjs";
-import editForm from "./form.vue";
+import editForm from "../form.vue";
 import { handleTree } from "@/utils/tree";
-import { usePublicHooks } from "../hooks";
 import { message } from "@/utils/message";
 import { getDeptList } from "@/api/system";
-import { type FormItemProps } from "./types";
+import { usePublicHooks } from "../../hooks";
 import { addDialog } from "@/components/ReDialog";
 import { reactive, ref, onMounted, h } from "vue";
+import { type FormItemProps } from "../utils/types";
 import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
 
 export function useDept() {

src/views/system/role/form.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { formRules } from "./utils/rule";
+import { FormProps } from "./utils/types";
+
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({
+    name: "",
+    code: "",
+    remark: ""
+  })
+});
+
+const ruleFormRef = ref();
+const newFormInline = ref(props.formInline);
+
+function getRef() {
+  return ruleFormRef.value;
+}
+
+defineExpose({ getRef });
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="newFormInline"
+    :rules="formRules"
+    label-width="82px"
+  >
+    <el-form-item label="角色名称" prop="name">
+      <el-input
+        v-model="newFormInline.name"
+        clearable
+        placeholder="请输入角色名称"
+      />
+    </el-form-item>
+
+    <el-form-item label="角色标识" prop="code">
+      <el-input
+        v-model="newFormInline.code"
+        clearable
+        placeholder="请输入角色标识"
+      />
+    </el-form-item>
+
+    <el-form-item label="备注">
+      <el-input
+        v-model="newFormInline.remark"
+        placeholder="请输入备注信息"
+        type="textarea"
+      />
+    </el-form-item>
+  </el-form>
+</template>

src/views/system/role/index.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useRole } from "./hook";
+import { useRole } from "./utils/hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
-import Database from "@iconify-icons/ri/database-2-line";
+// import Database from "@iconify-icons/ri/database-2-line";
-import More from "@iconify-icons/ep/more-filled";
+// import More from "@iconify-icons/ep/more-filled";
 import Delete from "@iconify-icons/ep/delete";
 import EditPen from "@iconify-icons/ep/edit-pen";
 import Search from "@iconify-icons/ep/search";
@@ -24,11 +24,13 @@ const {
   columns,
   dataList,
   pagination,
-  buttonClass,
+  // buttonClass,
   onSearch,
   resetForm,
-  handleUpdate,
+  openDialog,
+  handleMenu,
   handleDelete,
+  // handleDatabase,
   handleSizeChange,
   handleCurrentChange,
   handleSelectionChange
@@ -41,7 +43,7 @@ const {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="bg-bg_color w-[99/100] pl-8 pt-4"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
     >
       <el-form-item label="角色名称：" prop="name">
         <el-input
@@ -66,8 +68,8 @@ const {
           clearable
           class="!w-[180px]"
         >
-          <el-option label="已开启" value="1" />
+          <el-option label="已启用" value="1" />
-          <el-option label="已关闭" value="0" />
+          <el-option label="已停用" value="0" />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -85,9 +87,17 @@ const {
       </el-form-item>
     </el-form>
 
-    <PureTableBar title="角色列表" :columns="columns" @refresh="onSearch">
+    <PureTableBar
+      title="角色列表（仅演示，操作后不生效）"
+      :columns="columns"
+      @refresh="onSearch"
+    >
       <template #buttons>
-        <el-button type="primary" :icon="useRenderIcon(AddFill)">
+        <el-button
+          type="primary"
+          :icon="useRenderIcon(AddFill)"
+          @click="openDialog()"
+        >
           新增角色
         </el-button>
       </template>
@@ -99,6 +109,7 @@ const {
           table-layout="auto"
           :loading="loading"
           :size="size"
+          adaptive
           :data="dataList"
           :columns="dynamicColumns"
           :pagination="pagination"
@@ -118,11 +129,24 @@ const {
               type="primary"
               :size="size"
               :icon="useRenderIcon(EditPen)"
-              @click="handleUpdate(row)"
+              @click="openDialog('编辑', row)"
             >
               修改
             </el-button>
-            <el-popconfirm title="是否确认删除?">
+            <el-button
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              :icon="useRenderIcon(Menu)"
+              @click="handleMenu"
+            >
+              菜单权限
+            </el-button>
+            <el-popconfirm
+              :title="`是否确认删除角色名称为${row.name}的这条数据`"
+              @confirm="handleDelete(row)"
+            >
               <template #reference>
                 <el-button
                   class="reset-margin"
@@ -130,20 +154,18 @@ const {
                   type="primary"
                   :size="size"
                   :icon="useRenderIcon(Delete)"
-                  @click="handleDelete(row)"
                 >
                   删除
                 </el-button>
               </template>
             </el-popconfirm>
-            <el-dropdown>
+            <!-- <el-dropdown>
               <el-button
                 class="ml-3 mt-[2px]"
                 link
                 type="primary"
                 :size="size"
                 :icon="useRenderIcon(More)"
-                @click="handleUpdate(row)"
               />
               <template #dropdown>
                 <el-dropdown-menu>
@@ -154,6 +176,7 @@ const {
                       type="primary"
                       :size="size"
                       :icon="useRenderIcon(Menu)"
+                      @click="handleMenu"
                     >
                       菜单权限
                     </el-button>
@@ -165,13 +188,14 @@ const {
                       type="primary"
                       :size="size"
                       :icon="useRenderIcon(Database)"
+                      @click="handleDatabase"
                     >
                       数据权限
                     </el-button>
                   </el-dropdown-item>
                 </el-dropdown-menu>
               </template>
-            </el-dropdown>
+            </el-dropdown> -->
           </template>
         </pure-table>
       </template>
@@ -183,4 +207,10 @@ const {
 :deep(.el-dropdown-menu__item i) {
   margin: 0;
 }
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
 </style>

src/views/system/role/utils/hook.tsx

@@ -1,9 +1,13 @@
 import dayjs from "dayjs";
+import editForm from "../form.vue";
 import { message } from "@/utils/message";
 import { getRoleList } from "@/api/system";
 import { ElMessageBox } from "element-plus";
+import { usePublicHooks } from "../../hooks";
+import { addDialog } from "@/components/ReDialog";
+import { type FormItemProps } from "../utils/types";
 import { type PaginationProps } from "@pureadmin/table";
-import { reactive, ref, computed, onMounted } from "vue";
+import { reactive, ref, onMounted, h, toRaw } from "vue";
 
 export function useRole() {
   const form = reactive({
@@ -11,9 +15,11 @@ export function useRole() {
     code: "",
     status: ""
   });
+  const formRef = ref();
   const dataList = ref([]);
   const loading = ref(true);
   const switchLoadMap = ref({});
+  const { switchStyle } = usePublicHooks();
   const pagination = reactive<PaginationProps>({
     total: 0,
     pageSize: 10,
@@ -21,19 +27,6 @@ export function useRole() {
     background: true
   });
   const columns: TableColumnList = [
-    // {
-    //   label: "勾选列", // 如果需要表格多选，此处label必须设置
-    //   type: "selection",
-    //   width: 55,
-    //   align: "left",
-    //   fixed: "left"
-    // },
-    {
-      label: "序号",
-      type: "index",
-      width: 70,
-      fixed: "left"
-    },
     {
       label: "角色编号",
       prop: "id",
@@ -49,25 +42,6 @@ export function useRole() {
       prop: "code",
       minWidth: 150
     },
-    {
-      label: "角色类型",
-      prop: "type",
-      minWidth: 150,
-      cellRenderer: ({ row, props }) => (
-        <el-tag
-          size={props.size}
-          type={row.type === 1 ? "danger" : ""}
-          effect="plain"
-        >
-          {row.type === 1 ? "内置" : "自定义"}
-        </el-tag>
-      )
-    },
-    {
-      label: "显示顺序",
-      prop: "sort",
-      minWidth: 100
-    },
     {
       label: "状态",
       minWidth: 130,
@@ -78,13 +52,19 @@ export function useRole() {
           v-model={scope.row.status}
           active-value={1}
           inactive-value={0}
-          active-text="已开启"
+          active-text="已启用"
-          inactive-text="已关闭"
+          inactive-text="已停用"
           inline-prompt
+          style={switchStyle.value}
           onChange={() => onChange(scope as any)}
         />
       )
     },
+    {
+      label: "备注",
+      prop: "remark",
+      minWidth: 150
+    },
     {
       label: "创建时间",
       minWidth: 180,
@@ -95,19 +75,19 @@ export function useRole() {
     {
       label: "操作",
       fixed: "right",
-      width: 180,
+      width: 240,
       slot: "operation"
     }
   ];
-  const buttonClass = computed(() => {
+  // const buttonClass = computed(() => {
-    return [
+  //   return [
-      "!h-[20px]",
+  //     "!h-[20px]",
-      "reset-margin",
+  //     "reset-margin",
-      "!text-gray-500",
+  //     "!text-gray-500",
-      "dark:!text-white",
+  //     "dark:!text-white",
-      "dark:hover:!text-primary"
+  //     "dark:hover:!text-primary"
-    ];
+  //   ];
-  });
+  // });
 
   function onChange({ row, index }) {
     ElMessageBox.confirm(
@@ -115,7 +95,7 @@ export function useRole() {
         row.status === 0 ? "停用" : "启用"
       }</strong><strong style='color:var(--el-color-primary)'>${
         row.name
-      }</strong>角色吗?`,
+      }</strong>吗?`,
       "系统提示",
       {
         confirmButtonText: "确定",
@@ -141,7 +121,7 @@ export function useRole() {
               loading: false
             }
           );
-          message("已成功修改角色状态", {
+          message(`已${row.status === 0 ? "停用" : "启用"}${row.name}`, {
             type: "success"
           });
         }, 300);
@@ -151,12 +131,9 @@ export function useRole() {
       });
   }
 
-  function handleUpdate(row) {
-    console.log(row);
-  }
-
   function handleDelete(row) {
-    console.log(row);
+    message(`您删除了角色名称为${row.name}的这条数据`, { type: "success" });
+    onSearch();
   }
 
   function handleSizeChange(val: number) {
@@ -173,9 +150,12 @@ export function useRole() {
 
   async function onSearch() {
     loading.value = true;
-    const { data } = await getRoleList();
+    const { data } = await getRoleList(toRaw(form));
     dataList.value = data.list;
     pagination.total = data.total;
+    pagination.pageSize = data.pageSize;
+    pagination.currentPage = data.currentPage;
+
     setTimeout(() => {
       loading.value = false;
     }, 500);
@@ -187,6 +167,56 @@ export function useRole() {
     onSearch();
   };
 
+  function openDialog(title = "新增", row?: FormItemProps) {
+    addDialog({
+      title: `${title}角色`,
+      props: {
+        formInline: {
+          name: row?.name ?? "",
+          code: row?.code ?? "",
+          remark: row?.remark ?? ""
+        }
+      },
+      width: "40%",
+      draggable: true,
+      fullscreenIcon: true,
+      closeOnClickModal: false,
+      contentRenderer: () => h(editForm, { ref: formRef }),
+      beforeSure: (done, { options }) => {
+        const FormRef = formRef.value.getRef();
+        const curData = options.props.formInline as FormItemProps;
+        function chores() {
+          message(`您${title}了角色名称为${curData.name}的这条数据`, {
+            type: "success"
+          });
+          done(); // 关闭弹框
+          onSearch(); // 刷新表格数据
+        }
+        FormRef.validate(valid => {
+          if (valid) {
+            console.log("curData", curData);
+            // 表单规则校验通过
+            if (title === "新增") {
+              // 实际开发先调用新增接口，再进行下面操作
+              chores();
+            } else {
+              // 实际开发先调用编辑接口，再进行下面操作
+              chores();
+            }
+          }
+        });
+      }
+    });
+  }
+
+  /** 菜单权限 */
+  function handleMenu() {
+    message("等菜单管理页面开发后完善");
+  }
+
+  /** 数据权限 可自行开发 */
+  // function handleDatabase() {}
+
   onMounted(() => {
     onSearch();
   });
@@ -197,11 +227,13 @@ export function useRole() {
     columns,
     dataList,
     pagination,
-    buttonClass,
+    // buttonClass,
     onSearch,
     resetForm,
-    handleUpdate,
+    openDialog,
+    handleMenu,
     handleDelete,
+    // handleDatabase,
     handleSizeChange,
     handleCurrentChange,
     handleSelectionChange

src/views/system/role/utils/rule.ts

@@ -0,0 +1,8 @@
+import { reactive } from "vue";
+import type { FormRules } from "element-plus";
+
+/** 自定义表单规则校验 */
+export const formRules = reactive(<FormRules>{
+  name: [{ required: true, message: "角色名称为必填项", trigger: "blur" }],
+  code: [{ required: true, message: "角色标识为必填项", trigger: "blur" }]
+});

src/views/system/role/utils/types.ts

@@ -0,0 +1,15 @@
+// 虽然字段很少 但是抽离出来 后续有扩展字段需求就很方便了
+
+interface FormItemProps {
+  /** 角色名称 */
+  name: string;
+  /** 角色编号 */
+  code: string;
+  /** 备注 */
+  remark: string;
+}
+interface FormProps {
+  formInline: FormItemProps;
+}
+
+export type { FormItemProps, FormProps };

src/views/system/user/index.vue

@@ -39,12 +39,12 @@ const {
 <template>
   <div class="main">
     <tree class="w-[17%] float-left" />
-    <div class="float-right w-[81%]">
+    <div class="float-right w-[82%]">
       <el-form
         ref="formRef"
         :inline="true"
         :model="form"
-        class="bg-bg_color w-[99/100] pl-8 pt-4"
+        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
       >
         <el-form-item label="用户名称：" prop="username">
           <el-input
@@ -97,6 +97,7 @@ const {
         <template v-slot="{ size, dynamicColumns }">
           <pure-table
             border
+            adaptive
             align-whole="center"
             table-layout="auto"
             :loading="loading"
@@ -186,4 +187,10 @@ const {
 :deep(.el-dropdown-menu__item i) {
   margin: 0;
 }
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
 </style>

src/views/system/user/tree.vue

@@ -87,7 +87,10 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="h-full min-h-[780px] bg-bg_color overflow-auto">
+  <div
+    class="h-full bg-bg_color overflow-auto"
+    :style="{ minHeight: `calc(100vh - 133px)` }"
+  >
     <div class="flex items-center h-[34px]">
       <p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
         部门列表

src/views/tabs/hooks.ts

@@ -1,54 +1,69 @@
+import { isString, isEmpty } from "@pureadmin/utils";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
-import { useRouter, useRoute } from "vue-router";
+import {
-import { onBeforeMount } from "vue";
+  useRouter,
+  useRoute,
+  type LocationQueryRaw,
+  type RouteParamsRaw
+} from "vue-router";
 
 export function useDetail() {
   const route = useRoute();
   const router = useRouter();
-  const id = route.query?.id ? route.query?.id : route.params?.id;
+  const getParameter = isEmpty(route.params) ? route.query : route.params;
 
   function toDetail(
-    index: number | string | string[] | number[],
+    parameter: LocationQueryRaw | RouteParamsRaw,
-    model: string
+    model: "query" | "params"
   ) {
+    // ⚠️ 这里要特别注意下，因为vue-router在解析路由参数的时候会自动转化成字符串类型，比如在使用useRoute().route.query或useRoute().route.params时，得到的参数都是字符串类型
+    // 所以在传参的时候，如果参数是数字类型，就需要在此处 toString() 一下，保证传参跟路由参数类型一致都是字符串，这是必不可少的环节！！！
+    Object.keys(parameter).forEach(param => {
+      if (!isString(parameter[param])) {
+        parameter[param] = parameter[param].toString();
+      }
+    });
     if (model === "query") {
       // 保存信息到标签页
       useMultiTagsStoreHook().handleTags("push", {
         path: `/tabs/query-detail`,
         name: "TabQueryDetail",
-        query: { id: String(index) },
+        query: parameter,
         meta: {
           title: {
-            zh: `No.${index} - 详情信息`,
+            zh: `No.${parameter.id} - 详情信息`,
-            en: `No.${index} - DetailInfo`
+            en: `No.${parameter.id} - DetailInfo`
           },
+          // 如果使用的是非国际化精简版title可以像下面这么写
+          // title: `No.${index} - 详情信息`,
           // 最大打开标签数
           dynamicLevel: 3
         }
       });
       // 路由跳转
-      router.push({ name: "TabQueryDetail", query: { id: String(index) } });
+      router.push({ name: "TabQueryDetail", query: parameter });
-    } else {
+    } else if (model === "params") {
       useMultiTagsStoreHook().handleTags("push", {
         path: `/tabs/params-detail/:id`,
         name: "TabParamsDetail",
-        params: { id: String(index) },
+        params: parameter,
         meta: {
           title: {
-            zh: `No.${index} - 详情信息`,
+            zh: `No.${parameter.id} - 详情信息`,
-            en: `No.${index} - DetailInfo`
+            en: `No.${parameter.id} - DetailInfo`
           }
+          // 如果使用的是非国际化精简版title可以像下面这么写
+          // title: `No.${index} - 详情信息`,
         }
       });
-      router.push({ name: "TabParamsDetail", params: { id: String(index) } });
+      router.push({ name: "TabParamsDetail", params: parameter });
     }
   }
 
-  function initToDetail(model) {
+  // 用于页面刷新，重新获取浏览器地址栏参数并保存到标签页
-    onBeforeMount(() => {
+  const initToDetail = (model: "query" | "params") => {
-      if (id) toDetail(id, model);
+    if (getParameter) toDetail(getParameter, model);
-    });
+  };
-  }
 
-  return { toDetail, initToDetail, id, router };
+  return { toDetail, initToDetail, getParameter, router };
 }

src/views/tabs/index.vue

@@ -56,10 +56,17 @@ function onCloseTags() {
         class="m-2"
         v-for="index in 6"
         :key="index"
-        @click="toDetail(index, 'query')"
+        @click="toDetail({ id: index }, 'query')"
       >
         打开{{ index }}详情页
       </el-button>
+      <el-button
+        @click="
+          toDetail({ id: 666, name: '小明', age: 18, job: '工程师' }, 'query')
+        "
+      >
+        多个参数
+      </el-button>
     </div>
 
     <el-divider />
@@ -70,7 +77,7 @@ function onCloseTags() {
         class="m-2"
         v-for="index in 6"
         :key="index"
-        @click="toDetail(index, 'params')"
+        @click="toDetail({ id: index }, 'params')"
       >
         打开{{ index }}详情页
       </el-button>

src/views/tabs/params-detail.vue

@@ -5,10 +5,13 @@ defineOptions({
   name: "TabParamsDetail"
 });
 
-const { initToDetail, id } = useDetail();
+const { initToDetail, getParameter } = useDetail();
 initToDetail("params");
 </script>
 
 <template>
-  <div>{{ id }} - 详情页内容在此（params传参）</div>
+  <div>
+    {{ getParameter.id }} - 详情页内容在此（params传参）
+    <p>当前页面参数为：{{ getParameter }}</p>
+  </div>
 </template>