release: update 4.3.0

* perf: 优化菜单搜索弹窗高度

* chore: 优化键盘`up`、`down`事件

.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/vue3.0.code-snippets

@@ -1,19 +1,19 @@
 {
   "Vue3.0快速生成模板": {
+    "scope": "vue",
     "prefix": "Vue3.0",
     "body": [
       "<template>",
-      "\t<div>\n",
-      "\t</div>",
+      "\t<div>test</div>",
       "</template>\n",
       "<script lang='ts'>",
       "export default {",
-      "\tsetup(){",
-      "\t\treturn{\n\n\t\t}",
-      "\t},",
+      "\tsetup() {",
+      "\t\treturn {}",
+      "\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>",
+      "\t<div>test</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,67 @@
+# 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
+
+- Added segment controller component and adapted to dark mode
+- Static routing supports configuration array format
+- Functional bullet box component adds full screen and exit full screen operation buttons
+- New component - Waterfall `demo`
+- Add `Exclusive` type mutual exclusion syntactic sugar
+
+### 🍏 Perf
+
+- Standardize the way of writing routes in `template` template, no longer use `$route` and `$router`, this way of writing `vue-tsc` fails to compile
+
+# 4.1.0 (2023-05-12)
+
+### 🎫 Feat
+
+- Add a `demo` example combined with `Form` for the functional pop-up box component
+- wrapper `el-col` component of `element-plus`
+- Add `beforeCancel` and `beforeSure` callbacks to the functional popup component, which can suspend the closing of the popup
+- Improve `System Management-Department Management` page
+- Optimize `PureTableBar` component, add drag and drop function for column display
+
+### 🐞 Bug fixes
+
+- Fix the problem that the page cache still exists when you click the tab to reload after turning on `keepAlive`
+- Fix the problem that the left menu will flicker after refreshing the tab in the mixed mode menu
+
+### 🍏 Perf
+
+- Optimize home page layout
+- Dependency update to `vue3.3+` and remove `unplugin-vue-define-options` plugin
+
 # 4.0.0 (2023-05-09)
 
 [View 4.0.0 version optimization details](https://github.com/pure-admin/vue-pure-admin/issues/428#issuecomment-1422191158)

CHANGELOG.md

@@ -1,3 +1,67 @@
+# 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
+
+- Added segment controller component and adapted to dark mode
+- Static routing supports configuration array format
+- Functional bullet box component adds full screen and exit full screen operation buttons
+- New component - Waterfall `demo`
+- Add `Exclusive` type mutual exclusion syntactic sugar
+
+### 🍏 Perf
+
+- Standardize the way of writing routes in `template` template, no longer use `$route` and `$router`, this way of writing `vue-tsc` fails to compile
+
+# 4.1.0 (2023-05-12)
+
+### 🎫 Feat
+
+- Add a `demo` example combined with `Form` for the functional pop-up box component
+- wrapper `el-col` component of `element-plus`
+- Add `beforeCancel` and `beforeSure` callbacks to the functional popup component, which can suspend the closing of the popup
+- Improve `System Management-Department Management` page
+- Optimize `PureTableBar` component, add drag and drop function for column display
+
+### 🐞 Bug fixes
+
+- Fix the problem that the page cache still exists when you click the tab to reload after turning on `keepAlive`
+- Fix the problem that the left menu will flicker after refreshing the tab in the mixed mode menu
+
+### 🍏 Perf
+
+- Optimize home page layout
+- Dependency update to `vue3.3+` and remove `unplugin-vue-define-options` plugin
+
 # 4.0.0 (2023-05-09)
 
 [View 4.0.0 version optimization details](https://github.com/pure-admin/vue-pure-admin/issues/428#issuecomment-1422191158)

CHANGELOG.zh_CN.md

@@ -1,3 +1,66 @@
+# 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
+
+- 新增分段控制器组件并适配暗黑模式
+- 静态路由支持配置数组格式
+- 函数式弹框组件添加全屏、退出全屏操作按钮
+- 新增组件-瀑布流 `demo`
+- 添加 `Exclusive` 类型互斥语法糖
+
+### 🍏 Perf
+
+- 规范 `template` 模版中路由写法，不再使用 `$route` 和 `$router`，此写法 `vue-tsc` 编译不通过
+
+# 4.1.0 (2023-05-12)
+
+### 🎫 Feat
+
+- 函数式弹框组件添加结合 `Form` 的 `demo` 示例
+- 封装 `element-plus` 的 `el-col` 组件
+- 函数式弹框组件添加 `beforeCancel` 和 `beforeSure` 回调，可暂停弹框的关闭
+- 完善 `系统管理-部门管理` 页面
+- 优化 `PureTableBar` 组件，列展示添加拖拽功能
+
+### 🐞 Bug fixes
+
+- 修复开启 `keepAlive` 后点击标签页的重新加载，页面缓存还存在的问题
+- 修复混合模式菜单下刷新页签后左侧菜单会闪烁一下的问题
+
+### 🍏 Perf
+
+- 优化首页布局
+- 依赖更新到 `vue3.3+` 以及删除 `unplugin-vue-define-options` 插件
+
 # 4.0.0 (2023-05-09)
 
 [查看 4.0.0 版本优化细节](https://github.com/pure-admin/vue-pure-admin/issues/428#issuecomment-1422191158)

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)
-- [Click me to view foreign document site](https://pure-admin.github.io/pure-admin-doc)
+- [documentation site](https://yiming_chang.gitee.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)
-- [Click me to view foreign preview site](https://pure-admin.github.io/vue-pure-admin)
+- [preview station](https://yiming_chang.gitee.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://pure-admin.github.io/pure-admin-doc)
+- [查看文档](https://yiming_chang.gitee.io/pure-admin-doc)
 
 ## `Tauri` 版
 
@@ -37,8 +36,7 @@
 
 ## 预览
 
-- [点我查看国内预览站](https://yiming_chang.gitee.io/vue-pure-admin)
-- [点我查看国外预览站](https://pure-admin.github.io/vue-pure-admin)
+- [查看预览](https://yiming_chang.gitee.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

@@ -36,6 +36,7 @@ const include = [
   "element-resize-detector",
   "@amap/amap-jsapi-loader",
   "el-table-infinite-scroll",
+  "vue-waterfall-plugin-next",
   "@wangeditor/editor-for-vue",
   "vuedraggable/src/vuedraggable"
 ];

build/plugins.ts

@@ -10,7 +10,6 @@ import { visualizer } from "rollup-plugin-visualizer";
 import removeConsole from "vite-plugin-remove-console";
 import themePreprocessorPlugin from "@pureadmin/theme";
 import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
-import DefineOptions from "unplugin-vue-define-options/vite";
 import { genScssMultipleScopeVars } from "../src/layout/theme";
 
 export function getPluginsList(
@@ -31,7 +30,6 @@ export function getPluginsList(
     vueJsx(),
     VITE_CDN ? cdn : null,
     configCompressPlugin(VITE_COMPRESSION),
-    DefineOptions(),
     // 线上环境删除console
     removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),
     viteBuildInfo(),

locales/en.yaml

@@ -39,6 +39,8 @@ menus:
   hsdialog: Dialog Components
   hsmessage: Message Tips Components
   hsvideo: Video Components
+  hssegmented: Segmented Components
+  hswaterfall: Waterfall Components
   hsmap: Map Components
   hsdraggable: Draggable Components
   hssplitPane: Split Pane

locales/zh-CN.yaml

@@ -39,6 +39,8 @@ menus:
   hsdialog: 函数式弹框组件
   hsmessage: 消息提示组件
   hsvideo: 视频组件
+  hssegmented: 分段控制器组件
+  hswaterfall: 瀑布流无限滚动组件
   hsmap: 地图组件
   hsdraggable: 拖拽组件
   hssplitPane: 切割面板

mock/list.ts

@@ -451,5 +451,213 @@ export default [
         }
       };
     }
+  },
+  {
+    url: "/releases",
+    method: "get",
+    response: () => {
+      return {
+        success: true,
+        data: {
+          list: [
+            {
+              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,212 +1,7 @@
 import { MockMethod } from "vite-plugin-mock";
 
 export default [
-  {
-    url: "/role",
-    method: "post",
-    response: () => {
-      return {
-        success: true,
-        data: {
-          list: [
-            {
-              createTime: 1609837428000,
-              updateTime: 1645477701000,
-              creator: "admin",
-              updater: "",
-              deleted: false,
-              tenantId: 1,
-              id: 1,
-              name: "超级管理员",
-              code: "super_admin",
-              sort: 1,
-              status: 0,
-              type: 1,
-              remark: "超级管理员",
-              dataScope: 1,
-              dataScopeDeptIds: null
-            },
-            {
-              createTime: 1609837428000,
-              updateTime: 1645477700000,
-              creator: "admin",
-              updater: "",
-              deleted: false,
-              tenantId: 1,
-              id: 2,
-              name: "普通角色",
-              code: "common",
-              sort: 2,
-              status: 0,
-              type: 1,
-              remark: "普通角色",
-              dataScope: 2,
-              dataScopeDeptIds: null
-            },
-            {
-              createTime: 1609912175000,
-              updateTime: 1647698441000,
-              creator: "",
-              updater: "1",
-              deleted: false,
-              tenantId: 1,
-              id: 101,
-              name: "测试账号",
-              code: "test",
-              sort: 0,
-              status: 0,
-              type: 2,
-              remark: "132",
-              dataScope: 1,
-              dataScopeDeptIds: []
-            }
-          ],
-          total: 3
-        }
-      };
-    }
-  },
-  {
-    url: "/dept",
-    method: "post",
-    response: () => {
-      return {
-        success: true,
-        data: [
-          {
-            name: "杭州总公司",
-            type: 1, // 1 公司 2 分公司 3 部门
-            parentId: 0,
-            sort: 0,
-            leaderUserId: 1,
-            phone: "15888888888",
-            email: "ry@qq.com",
-            status: 0,
-            id: 100,
-            createTime: 1609837427000,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
-          },
-          {
-            name: "郑州分公司",
-            type: 2,
-            parentId: 100,
-            sort: 1,
-            leaderUserId: 104,
-            phone: "15888888888",
-            email: "ry@qq.com",
-            status: 0,
-            id: 101,
-            createTime: 1609837427000,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
-          },
-          {
-            name: "研发部门",
-            type: 3,
-            parentId: 101,
-            sort: 1,
-            leaderUserId: 104,
-            phone: "15888888888",
-            email: "ry@qq.com",
-            status: 0,
-            id: 103,
-            createTime: 1609837427000,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
-          },
-          {
-            name: "市场部门",
-            type: 3,
-            parentId: 102,
-            sort: 1,
-            leaderUserId: null,
-            phone: "15888888888",
-            email: "ry@qq.com",
-            status: 0,
-            id: 108,
-            createTime: 1609837427000,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
-          },
-          {
-            name: "深圳分公司",
-            type: 2,
-            parentId: 100,
-            sort: 2,
-            leaderUserId: null,
-            phone: "15888888888",
-            email: "ry@qq.com",
-            status: 0,
-            id: 102,
-            createTime: 1609837427000,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
-          },
-          {
-            name: "市场部门",
-            type: 3,
-            parentId: 101,
-            sort: 2,
-            leaderUserId: null,
-            phone: "15888888888",
-            email: "ry@qq.com",
-            status: 1,
-            id: 104,
-            createTime: 1609837427000,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
-          },
-          {
-            name: "财务部门",
-            type: 3,
-            parentId: 102,
-            sort: 2,
-            leaderUserId: null,
-            phone: "15888888888",
-            email: "ry@qq.com",
-            status: 0,
-            id: 109,
-            createTime: 1609837427000,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
-          },
-          {
-            name: "测试部门",
-            type: 3,
-            parentId: 101,
-            sort: 3,
-            leaderUserId: null,
-            phone: "15888888888",
-            email: "ry@qq.com",
-            status: 0,
-            id: 105,
-            createTime: 1609837427000,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
-          },
-          {
-            name: "财务部门",
-            type: 3,
-            parentId: 101,
-            sort: 4,
-            leaderUserId: 103,
-            phone: "15888888888",
-            email: "ry@qq.com",
-            status: 1,
-            id: 106,
-            createTime: 1609837427000,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
-          },
-          {
-            name: "运维部门",
-            type: 3,
-            parentId: 101,
-            sort: 5,
-            leaderUserId: null,
-            phone: "15888888888",
-            email: "ry@qq.com",
-            status: 0,
-            id: 107,
-            createTime: 1609837427000,
-            remark: "备注、备注、备注、备注、备注、备注、备注"
-          }
-        ]
-      };
-    }
-  },
+  // 用户
   {
     url: "/user",
     method: "post",
@@ -225,7 +20,7 @@ export default [
               sex: 0,
               id: 1,
               status: 0,
-              createTime: 1609837427000,
+              createTime: 1605456000000,
               dept: {
                 id: 103,
                 name: "研发部门"
@@ -241,7 +36,7 @@ export default [
               sex: 0,
               id: 100,
               status: 1,
-              createTime: 1609981637000,
+              createTime: 1605456000000,
               dept: {
                 id: 104,
                 name: "市场部门"
@@ -257,7 +52,7 @@ export default [
               sex: 1,
               id: 103,
               status: 1,
-              createTime: 1610553035000,
+              createTime: 1605456000000,
               dept: {
                 id: 106,
                 name: "财务部门"
@@ -273,7 +68,7 @@ export default [
               sex: 0,
               id: 104,
               status: 0,
-              createTime: 1611166433000,
+              createTime: 1605456000000,
               dept: {
                 id: 107,
                 name: "运维部门"
@@ -284,5 +79,190 @@ export default [
         }
       };
     }
+  },
+  // 角色
+  {
+    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 // 当前页数
+        }
+      };
+    }
+  },
+  // 部门
+  {
+    url: "/dept",
+    method: "post",
+    response: () => {
+      return {
+        success: true,
+        data: [
+          {
+            name: "杭州总公司",
+            parentId: 0,
+            id: 100,
+            sort: 0,
+            phone: "15888888888",
+            principal: "@cname()",
+            email: "@email",
+            status: 1, // 状态 1 启用 0 停用
+            type: 1, // 1 公司 2 分公司 3 部门
+            createTime: 1605456000000,
+            remark: "@cparagraph(1, 3)"
+          },
+          {
+            name: "郑州分公司",
+            parentId: 100,
+            id: 101,
+            sort: 1,
+            phone: "15888888888",
+            principal: "@cname()",
+            email: "@email",
+            status: 1,
+            type: 2,
+            createTime: 1605456000000,
+            remark: "@cparagraph(1, 3)"
+          },
+          {
+            name: "研发部门",
+            parentId: 101,
+            id: 103,
+            sort: 1,
+            phone: "15888888888",
+            principal: "@cname()",
+            email: "@email",
+            status: 1,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "@cparagraph(1, 3)"
+          },
+          {
+            name: "市场部门",
+            parentId: 102,
+            id: 108,
+            sort: 1,
+            phone: "15888888888",
+            principal: "@cname()",
+            email: "@email",
+            status: 1,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "@cparagraph(1, 3)"
+          },
+          {
+            name: "深圳分公司",
+            parentId: 100,
+            id: 102,
+            sort: 2,
+            phone: "15888888888",
+            principal: "@cname()",
+            email: "@email",
+            status: 1,
+            type: 2,
+            createTime: 1605456000000,
+            remark: "@cparagraph(1, 3)"
+          },
+          {
+            name: "市场部门",
+            parentId: 101,
+            id: 104,
+            sort: 2,
+            phone: "15888888888",
+            principal: "@cname()",
+            email: "@email",
+            status: 1,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "@cparagraph(1, 3)"
+          },
+          {
+            name: "财务部门",
+            parentId: 102,
+            id: 109,
+            sort: 2,
+            phone: "15888888888",
+            principal: "@cname()",
+            email: "@email",
+            status: 1,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "@cparagraph(1, 3)"
+          },
+          {
+            name: "测试部门",
+            parentId: 101,
+            id: 105,
+            sort: 3,
+            phone: "15888888888",
+            principal: "@cname()",
+            email: "@email",
+            status: 0,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "@cparagraph(1, 3)"
+          },
+          {
+            name: "财务部门",
+            parentId: 101,
+            id: 106,
+            sort: 4,
+            phone: "15888888888",
+            principal: "@cname()",
+            email: "@email",
+            status: 1,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "@cparagraph(1, 3)"
+          },
+          {
+            name: "运维部门",
+            parentId: 101,
+            id: 107,
+            sort: 5,
+            phone: "15888888888",
+            principal: "@cname()",
+            email: "@email",
+            status: 0,
+            type: 3,
+            createTime: 1605456000000,
+            remark: "@cparagraph(1, 3)"
+          }
+        ]
+      };
+    }
   }
 ] as MockMethod[];

package.json

@@ -1,11 +1,11 @@
 {
   "name": "vue-pure-admin",
-  "version": "4.0.0",
+  "version": "4.3.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,14 +31,14 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@howdyjs/mouse-menu": "^2.0.7",
-    "@logicflow/core": "^1.2.5",
-    "@logicflow/extension": "^1.2.5",
+    "@logicflow/core": "^1.2.7",
+    "@logicflow/extension": "^1.2.7",
     "@pureadmin/descriptions": "^1.1.1",
-    "@pureadmin/table": "^2.1.0",
-    "@pureadmin/utils": "^1.8.9",
+    "@pureadmin/table": "^2.2.0",
+    "@pureadmin/utils": "^1.9.2",
     "@vueuse/core": "^10.1.2",
-    "@vueuse/motion": "2.0.0-beta.12",
-    "@wangeditor/editor": "^5.1.21",
+    "@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",
@@ -47,7 +47,7 @@
     "dayjs": "^1.11.7",
     "echarts": "^5.4.2",
     "el-table-infinite-scroll": "^3.0.1",
-    "element-plus": "^2.3.4",
+    "element-plus": "^2.3.5",
     "element-resize-detector": "^1.2.4",
     "intro.js": "^7.0.1",
     "js-cookie": "^3.0.5",
@@ -57,22 +57,25 @@
     "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",
     "responsive-storage": "^2.2.0",
     "sortablejs": "^1.15.0",
-    "swiper": "^9.3.0",
+    "swiper": "^9.3.2",
     "typeit": "^8.7.1",
     "v-contextmenu": "3.0.0",
-    "vue": "^3.2.47",
+    "v3-infinite-loading": "^1.2.2",
+    "version-rocket": "^1.6.2",
+    "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
     "vue-json-pretty": "^2.2.4",
     "vue-pdf-embed": "^1.1.6",
-    "vue-router": "^4.1.6",
-    "vue-types": "^5.0.2",
+    "vue-router": "^4.2.1",
+    "vue-types": "^5.0.3",
     "vue-virtual-scroller": "2.0.0-beta.7",
-    "vue3-danmaku": "1.4.0-beta.1",
+    "vue-waterfall-plugin-next": "^2.2.1",
+    "vue3-danmaku": "^1.4.0",
     "vuedraggable": "^4.1.0",
     "xgplayer": "^3.0.2",
     "xlsx": "^0.18.5"
@@ -94,18 +97,18 @@
     "@types/qrcode": "^1.5.0",
     "@types/qs": "^6.9.7",
     "@types/sortablejs": "^1.15.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
-    "@vitejs/plugin-vue": "^4.2.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/parser": "^5.59.7",
+    "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.3",
     "autoprefixer": "^10.4.14",
     "cloc": "^2.11.0",
     "cssnano": "^6.0.1",
-    "eslint": "^8.40.0",
+    "eslint": "^8.41.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.11.1",
+    "eslint-plugin-vue": "^9.14.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
     "picocolors": "^1.0.0",
@@ -113,13 +116,13 @@
     "postcss-html": "^1.5.0",
     "postcss-import": "^15.1.0",
     "postcss-scss": "^4.0.6",
-    "prettier": "^2.8.7",
-    "pretty-quick": "3.1.1",
-    "rimraf": "^5.0.0",
+    "prettier": "^2.8.8",
+    "pretty-quick": "^3.1.3",
+    "rimraf": "^5.0.1",
     "rollup-plugin-visualizer": "^5.9.0",
     "sass": "^1.62.1",
-    "sass-loader": "^13.2.2",
-    "stylelint": "^15.6.1",
+    "sass-loader": "^13.3.0",
+    "stylelint": "^15.6.2",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-recess-order": "^4.0.0",
     "stylelint-config-recommended": "^12.0.0",
@@ -132,17 +135,16 @@
     "stylelint-scss": "^5.0.0",
     "svgo": "^3.0.2",
     "tailwindcss": "^3.3.2",
-    "terser": "^5.17.1",
+    "terser": "^5.17.6",
     "typescript": "^5.0.4",
-    "unplugin-vue-define-options": "1.1.6",
-    "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-remove-console": "^2.1.1",
     "vite-svg-loader": "^4.0.0",
-    "vue-eslint-parser": "^9.2.1",
-    "vue-tsc": "^1.2.0"
+    "vue-eslint-parser": "^9.3.0",
+    "vue-tsc": "^1.6.5"
   },
   "pnpm": {
     "peerDependencyRules": {
@@ -154,6 +156,7 @@
     },
     "allowedDeprecatedVersions": {
       "sourcemap-codec": "*",
+      "w3c-hr-time": "*",
       "stable": "*"
     }
   },

public/serverConfig.json

@@ -1,5 +1,5 @@
 {
-  "Version": "4.0.0",
+  "Version": "4.3.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/ReCol/index.ts

@@ -0,0 +1,29 @@
+import { ElCol } from "element-plus";
+import { h, defineComponent } from "vue";
+
+// 封装element-plus的el-col组件
+export default defineComponent({
+  name: "ReCol",
+  props: {
+    value: {
+      type: Number,
+      default: 24
+    }
+  },
+  render() {
+    const attrs = this.$attrs;
+    const val = this.value;
+    return h(
+      ElCol,
+      {
+        xs: val,
+        sm: val,
+        md: val,
+        lg: val,
+        xl: val,
+        ...attrs
+      },
+      { default: () => this.$slots.default() }
+    );
+  }
+});

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/ReDialog/index.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { isFunction } from "@pureadmin/utils";
 import {
-  type DialogOptions,
-  type ButtonProps,
-  type EventType,
+  closeDialog,
   dialogStore,
-  closeDialog
+  type EventType,
+  type ButtonProps,
+  type DialogOptions
 } from "./index";
+import { ref, computed } from "vue";
+import { isFunction } from "@pureadmin/utils";
+import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+
+const fullscreen = ref(false);
 
 const footerButtons = computed(() => {
   return (options: DialogOptions) => {
@@ -19,7 +23,13 @@ const footerButtons = computed(() => {
             text: true,
             bg: true,
             btnClick: ({ dialog: { options, index } }) => {
-              closeDialog(options, index, { command: "cancel" });
+              const done = () =>
+                closeDialog(options, index, { command: "cancel" });
+              if (options?.beforeCancel && isFunction(options?.beforeCancel)) {
+                options.beforeCancel(done, { options, index });
+              } else {
+                done();
+              }
             }
           },
           {
@@ -28,18 +38,35 @@ const footerButtons = computed(() => {
             text: true,
             bg: true,
             btnClick: ({ dialog: { options, index } }) => {
-              closeDialog(options, index, { command: "sure" });
+              const done = () =>
+                closeDialog(options, index, { command: "sure" });
+              if (options?.beforeSure && isFunction(options?.beforeSure)) {
+                options.beforeSure(done, { options, index });
+              } else {
+                done();
+              }
             }
           }
         ] as Array<ButtonProps>);
   };
 });
 
+const fullscreenClass = computed(() => {
+  return [
+    "el-icon",
+    "el-dialog__close",
+    "-translate-x-2",
+    "cursor-pointer",
+    "hover:!text-[red]"
+  ];
+});
+
 function eventsCallBack(
   event: EventType,
   options: DialogOptions,
   index: number
 ) {
+  fullscreen.value = options?.fullscreen ?? false;
   if (options?.[event] && isFunction(options?.[event])) {
     return options?.[event]({ options, index });
   }
@@ -57,25 +84,49 @@ function handleClose(
 
 <template>
   <el-dialog
+    class="pure-dialog"
     v-for="(options, index) in dialogStore"
     :key="index"
     v-bind="options"
     v-model="options.visible"
-    @opened="eventsCallBack('open', options, index)"
+    :fullscreen="fullscreen ? true : options?.fullscreen ? true : false"
     @close="handleClose(options, index)"
+    @opened="eventsCallBack('open', options, index)"
     @openAutoFocus="eventsCallBack('openAutoFocus', options, index)"
     @closeAutoFocus="eventsCallBack('closeAutoFocus', options, index)"
   >
     <!-- header -->
     <template
-      v-if="options?.headerRenderer"
+      v-if="options?.fullscreenIcon || options?.headerRenderer"
       #header="{ close, titleId, titleClass }"
     >
+      <div
+        v-if="options?.fullscreenIcon"
+        class="flex items-center justify-between"
+      >
+        <span :id="titleId" :class="titleClass">{{ options?.title }}</span>
+        <i
+          v-if="!options?.fullscreen"
+          :class="fullscreenClass"
+          @click="fullscreen = !fullscreen"
+        >
+          <IconifyIconOffline
+            class="pure-dialog-svg"
+            :icon="
+              options?.fullscreen
+                ? ExitFullscreen
+                : fullscreen
+                ? ExitFullscreen
+                : Fullscreen
+            "
+          />
+        </i>
+      </div>
       <component
+        v-else
         :is="options?.headerRenderer({ close, titleId, titleClass })"
       />
     </template>
-    <!-- default -->
     <component
       v-bind="options?.props"
       :is="options.contentRenderer({ options, index })"

src/components/ReDialog/type.ts

@@ -15,8 +15,10 @@ type DialogProps = {
   title?: string;
   /** `Dialog` 的宽度，默认 `50%` */
   width?: string | number;
-  /** 是否为全屏 `Dialog`，默认 `false` */
+  /** 是否为全屏 `Dialog`（会一直处于全屏状态，除非弹框关闭），默认 `false`，`fullscreen` 和 `fullscreenIcon` 都传时只有 `fullscreen` 会生效 */
   fullscreen?: boolean;
+  /** 是否显示全屏操作图标，默认 `false`，`fullscreen` 和 `fullscreenIcon` 都传时只有 `fullscreen` 会生效 */
+  fullscreenIcon?: boolean;
   /** `Dialog CSS` 中的 `margin-top` 值，默认 `15vh` */
   top?: string;
   /** 是否需要遮罩层，默认 `true` */
@@ -128,7 +130,7 @@ interface DialogOptions extends DialogProps {
     close: Function;
     titleId: string;
     titleClass: string;
-  }) => VNode;
+  }) => VNode | Component;
   /** 自定义内容渲染器 */
   contentRenderer?: ({
     options,
@@ -136,7 +138,7 @@ interface DialogOptions extends DialogProps {
   }: {
     options: DialogOptions;
     index: number;
-  }) => VNode;
+  }) => VNode | Component;
   /** 自定义按钮操作区的内容渲染器，会覆盖`footerButtons`以及默认的 `取消` 和 `确定` 按钮 */
   footerRenderer?: ({
     options,
@@ -144,7 +146,7 @@ interface DialogOptions extends DialogProps {
   }: {
     options: DialogOptions;
     index: number;
-  }) => VNode;
+  }) => VNode | Component;
   /** 自定义底部按钮操作 */
   footerButtons?: Array<ButtonProps>;
   /** `Dialog` 打开后的回调 */
@@ -189,6 +191,28 @@ interface DialogOptions extends DialogProps {
     options: DialogOptions;
     index: number;
   }) => void;
+  /** 点击底部取消按钮的回调，会暂停 `Dialog` 的关闭. 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
+  beforeCancel?: (
+    done: Function,
+    {
+      options,
+      index
+    }: {
+      options: DialogOptions;
+      index: number;
+    }
+  ) => void;
+  /** 点击底部确定按钮的回调，会暂停 `Dialog` 的关闭. 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
+  beforeSure?: (
+    done: Function,
+    {
+      options,
+      index
+    }: {
+      options: DialogOptions;
+      index: number;
+    }
+  ) => void;
 }
 
 export type { EventType, ArgsType, DialogProps, ButtonProps, DialogOptions };

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

@@ -1,6 +1,9 @@
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { delay, getKeyList, cloneDeep } from "@pureadmin/utils";
-import { defineComponent, ref, computed, type PropType } from "vue";
+import { defineComponent, ref, computed, type PropType, nextTick } from "vue";
+
+import Sortable from "sortablejs";
+import DragIcon from "./svg/drag.svg?component";
 import ExpandIcon from "./svg/expand.svg?component";
 import RefreshIcon from "./svg/refresh.svg?component";
 import SettingIcon from "./svg/settings.svg?component";
@@ -107,16 +110,17 @@ export default defineComponent({
         checkedCount > 0 && checkedCount < checkColumnList.length;
     }
 
-    function handleCheckColumnListChange(val: boolean, index: number) {
-      dynamicColumns.value[index].hide = !val;
+    function handleCheckColumnListChange(val: boolean, label: string) {
+      dynamicColumns.value.filter(item => item.label === label)[0].hide = !val;
     }
 
-    function onReset() {
+    async function onReset() {
       checkAll.value = true;
       isIndeterminate.value = false;
-      checkColumnList = getKeyList(cloneDeep(props?.columns), "label");
-      checkedColumns.value = checkColumnList;
       dynamicColumns.value = cloneDeep(props?.columns);
+      checkColumnList = [];
+      checkColumnList = await getKeyList(cloneDeep(props?.columns), "label");
+      checkedColumns.value = checkColumnList;
     }
 
     const dropdown = {
@@ -144,6 +148,47 @@ export default defineComponent({
       )
     };
 
+    /** 列展示拖拽排序 */
+    const rowDrop = (event: { preventDefault: () => void }) => {
+      event.preventDefault();
+      nextTick(() => {
+        const wrapper: HTMLElement = document.querySelector(
+          ".el-checkbox-group>div"
+        );
+        Sortable.create(wrapper, {
+          animation: 300,
+          handle: ".drag-btn",
+          onEnd: ({ newIndex, oldIndex, item }) => {
+            const targetThElem = item;
+            const wrapperElem = targetThElem.parentNode as HTMLElement;
+            const oldColumn = dynamicColumns.value[oldIndex];
+            const newColumn = dynamicColumns.value[newIndex];
+            if (oldColumn?.fixed || newColumn?.fixed) {
+              // 当前列存在fixed属性 则不可拖拽
+              const oldThElem = wrapperElem.children[oldIndex] as HTMLElement;
+              if (newIndex > oldIndex) {
+                wrapperElem.insertBefore(targetThElem, oldThElem);
+              } else {
+                wrapperElem.insertBefore(
+                  targetThElem,
+                  oldThElem ? oldThElem.nextElementSibling : oldThElem
+                );
+              }
+              return;
+            }
+            const currentRow = dynamicColumns.value.splice(oldIndex, 1)[0];
+            dynamicColumns.value.splice(newIndex, 0, currentRow);
+          }
+        });
+      });
+    };
+
+    const isFixedColumn = (label: string) => {
+      return dynamicColumns.value.filter(item => item.label === label)[0].fixed
+        ? true
+        : false;
+    };
+
     const reference = {
       reference: () => (
         <SettingIcon
@@ -155,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>
@@ -191,7 +240,6 @@ export default defineComponent({
                 />
               </el-tooltip>
               <el-divider direction="vertical" />
-
               <el-tooltip effect="dark" content="密度" placement="top">
                 <el-dropdown v-slots={dropdown} trigger="click">
                   <CollapseIcon class={["w-[16px]", iconClass.value]} />
@@ -201,6 +249,7 @@ export default defineComponent({
 
               <el-popover
                 v-slots={reference}
+                placement="bottom-start"
                 popper-style={{ padding: 0 }}
                 width="160"
                 trigger="click"
@@ -228,22 +277,35 @@ export default defineComponent({
                       alignment="flex-start"
                       size={0}
                     >
-                      {checkColumnList.map((item, index) => {
+                      {checkColumnList.map(item => {
                         return (
-                          <el-checkbox
-                            key={item}
-                            label={item}
-                            onChange={value =>
-                              handleCheckColumnListChange(value, index)
-                            }
-                          >
-                            <span
-                              title={item}
-                              class="inline-block w-[120px] truncate hover:text-text_color_primary"
+                          <div class="flex items-center">
+                            <DragIcon
+                              class={[
+                                "drag-btn w-[16px] mr-2",
+                                isFixedColumn(item)
+                                  ? "!cursor-no-drop"
+                                  : "!cursor-grab"
+                              ]}
+                              onMouseenter={(event: {
+                                preventDefault: () => void;
+                              }) => rowDrop(event)}
+                            />
+                            <el-checkbox
+                              key={item}
+                              label={item}
+                              onChange={value =>
+                                handleCheckColumnListChange(value, item)
+                              }
                             >
-                              {item}
-                            </span>
-                          </el-checkbox>
+                              <span
+                                title={item}
+                                class="inline-block w-[120px] truncate hover:text-text_color_primary"
+                              >
+                                {item}
+                              </span>
+                            </el-checkbox>
+                          </div>
                         );
                       })}
                     </el-space>

src/components/RePureTableBar/src/svg/drag.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" fill="currentColor" aria-hidden="true" data-icon="holder" viewBox="64 64 896 896"><path d="M300 276.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97zm0 284a56 56 0 1 0 56-97 56 56 0 0 0-56 97zM640 228a56 56 0 1 0 112 0 56 56 0 0 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 0 0-112 0zM300 844.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97zM640 796a56 56 0 1 0 112 0 56 56 0 0 0-112 0z"/></svg>

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
-const { classOption } = props;
-
-if (classOption["key"] === undefined) {
-  classOption["key"] = 0;
+if (props.classOption["key"] === undefined) {
+  // eslint-disable-next-line vue/no-mutating-props
+  props.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/components/ReSegmented/index.ts

@@ -0,0 +1,8 @@
+import reSegmented from "./src/index";
+import { withInstall } from "@pureadmin/utils";
+
+/** 分段控制器组件 */
+export const ReSegmented = withInstall(reSegmented);
+
+export default ReSegmented;
+export type { OptionsType } from "./src/type";

src/components/ReSegmented/src/index.css

@@ -0,0 +1,78 @@
+.pure-segmented {
+  box-sizing: border-box;
+  display: inline-block;
+  padding: 2px;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.65);
+  background-color: rgb(0 0 0 / 4%);
+  border-radius: 2px;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.pure-segmented-group {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  justify-items: flex-start;
+  width: 100%;
+}
+
+.pure-segmented-item-selected {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  display: none;
+  width: 0;
+  height: 100%;
+  padding: 4px 0;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px -2px rgb(0 0 0 / 5%), 0 1px 4px -1px rgb(0 0 0 / 7%),
+    0 0 1px rgb(0 0 0 / 7%);
+  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
+    width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
+  will-change: transform, width;
+}
+
+.pure-segmented-item {
+  position: relative;
+  text-align: center;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.pure-segmented-item > div {
+  min-height: 28px;
+  line-height: 28px;
+  padding: 0 11px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.pure-segmented-item > input {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.pure-segmented-item-label {
+  display: flex;
+  align-items: center;
+}
+
+.pure-segmented-item-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.pure-segmented-item-disabled {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}

src/components/ReSegmented/src/index.tsx

@@ -0,0 +1,150 @@
+import "./index.css";
+import {
+  h,
+  ref,
+  watch,
+  nextTick,
+  defineComponent,
+  getCurrentInstance
+} from "vue";
+import type { OptionsType } from "./type";
+import { isFunction, useDark } from "@pureadmin/utils";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+const props = {
+  options: {
+    type: Array<OptionsType>,
+    default: () => []
+  },
+  /** 默认选中，按照第一个索引为 `0` 的模式 */
+  defaultValue: {
+    type: Number,
+    default: 0
+  }
+};
+
+export default defineComponent({
+  name: "ReSegmented",
+  props,
+  emits: ["change"],
+  setup(props, { emit }) {
+    const width = ref(0);
+    const translateX = ref(0);
+    const { isDark } = useDark();
+    const initStatus = ref(false);
+    const curMouseActive = ref(-1);
+    const segmentedItembg = ref("");
+    const instance = getCurrentInstance()!;
+    const curIndex = ref(props.defaultValue);
+
+    function handleChange({ option, index }, event: Event) {
+      if (option.disabled) return;
+      event.preventDefault();
+      curIndex.value = index;
+      segmentedItembg.value = "";
+      emit("change", { index, option });
+    }
+
+    function handleMouseenter({ option, index }, event: Event) {
+      event.preventDefault();
+      curMouseActive.value = index;
+      if (option.disabled || curIndex.value === index) {
+        segmentedItembg.value = "";
+      } else {
+        segmentedItembg.value = isDark.value
+          ? "#1f1f1f"
+          : "rgba(0, 0, 0, 0.06)";
+      }
+    }
+
+    function handleMouseleave(_, event: Event) {
+      event.preventDefault();
+      curMouseActive.value = -1;
+    }
+
+    function handleInit(index = curIndex.value) {
+      nextTick(() => {
+        const curLabelRef = instance?.proxy?.$refs[`labelRef${index}`] as ElRef;
+        width.value = curLabelRef.clientWidth;
+        translateX.value = curLabelRef.offsetLeft;
+        initStatus.value = true;
+      });
+    }
+
+    watch(
+      () => curIndex.value,
+      index => {
+        nextTick(() => {
+          handleInit(index);
+        });
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+
+    const rendLabel = () => {
+      return props.options.map((option, index) => {
+        return (
+          <label
+            ref={`labelRef${index}`}
+            class={[
+              "pure-segmented-item",
+              option?.disabled && "pure-segmented-item-disabled"
+            ]}
+            style={{
+              background:
+                curMouseActive.value === index ? segmentedItembg.value : "",
+              color:
+                !option.disabled &&
+                (curIndex.value === index || curMouseActive.value === index)
+                  ? isDark.value
+                    ? "rgba(255, 255, 255, 0.85)"
+                    : "rgba(0,0,0,.88)"
+                  : ""
+            }}
+            onMouseenter={event => handleMouseenter({ option, index }, event)}
+            onMouseleave={event => handleMouseleave({ option, index }, event)}
+            onClick={event => handleChange({ option, index }, event)}
+          >
+            <input type="radio" name="segmented" />
+            <div class="pure-segmented-item-label">
+              {option.icon && !isFunction(option.label) ? (
+                <span
+                  class="pure-segmented-item-icon"
+                  style={{ marginRight: option.label ? "6px" : 0 }}
+                >
+                  {h(useRenderIcon(option.icon))}
+                </span>
+              ) : null}
+              {option.label ? (
+                isFunction(option.label) ? (
+                  h(option.label)
+                ) : (
+                  <span>{option.label}</span>
+                )
+              ) : null}
+            </div>
+          </label>
+        );
+      });
+    };
+
+    return () => (
+      <div class="pure-segmented">
+        <div class="pure-segmented-group">
+          <div
+            class="pure-segmented-item-selected"
+            style={{
+              width: `${width.value}px`,
+              transform: `translateX(${translateX.value}px)`,
+              display: initStatus.value ? "block" : "none"
+            }}
+          ></div>
+          {rendLabel()}
+        </div>
+      </div>
+    );
+  }
+});

src/components/ReSegmented/src/type.ts

@@ -0,0 +1,15 @@
+import type { VNode, Component } from "vue";
+
+export interface OptionsType {
+  /** 文字 */
+  label?: string | (() => VNode | Component);
+  /**
+   * @description 图标，采用平台内置的 `useRenderIcon` 函数渲染
+   * @see {@link 用法参考 https://yiming_chang.gitee.io/pure-admin-doc/pages/icon/#%E9%80%9A%E7%94%A8%E5%9B%BE%E6%A0%87-userendericon-hooks }
+   */
+  icon?: string | Component;
+  /** 值 */
+  value?: string | number;
+  /** 是否禁用 */
+  disabled?: boolean;
+}

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
-            src="https://avatars.githubusercontent.com/u/44761321?v=4"
-            :style="avatarsStyle"
-          />
+          <img :src="userAvatar" :style="avatarsStyle" />
           <p v-if="username" class="dark:text-white">{{ username }}</p>
         </span>
         <template #dropdown>

src/layout/components/notice/index.vue

@@ -46,8 +46,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 {

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,55 @@ 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'
+    }"
     @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 :icon="Search" />
-        </span>
+        <IconifyIconOffline
+          :icon="Search"
+          class="text-primary w-[24px] h-[24px]"
+        />
       </template>
     </el-input>
     <div class="search-result-container">
-      <el-empty v-if="resultOptions.length === 0" description="暂无搜索结果" />
-      <SearchResult
-        v-else
-        v-model:value="activePath"
-        :options="resultOptions"
-        @click="handleEnter"
-      />
+      <el-scrollbar ref="scrollbarRef" max-height="calc(90vh - 140px)">
+        <el-empty
+          v-if="resultOptions.length === 0"
+          description="暂无搜索结果"
+        />
+        <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">
-    <template v-for="item in options" :key="item.path">
-      <div
-        class="result-item dark:bg-[#1d1d1d]"
-        :style="itemStyle(item)"
-        @click="handleTo"
-        @mouseenter="handleMouse(item)"
-      >
-        <component :is="useRenderIcon(item.meta?.icon ?? Bookmark2Line)" />
-        <span class="result-item-title">{{ t(item.meta?.title) }}</span>
-        <enterOutlined />
-      </div>
-    </template>
+  <div ref="resultRef" class="result">
+    <div
+      v-for="(item, index) in options"
+      :key="item.path"
+      :ref="'resultItemRef' + index"
+      class="result-item dark:bg-[#1d1d1d]"
+      :style="itemStyle(item)"
+      @click="handleTo"
+      @mouseenter="handleMouse(item)"
+    >
+      <component :is="useRenderIcon(item.meta?.icon ?? Bookmark2Line)" />
+      <span class="result-item-title">{{ t(item.meta?.title) }}</span>
+      <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

@@ -23,6 +23,7 @@ const {
   onPanel,
   menuSelect,
   username,
+  userAvatar,
   avatarsStyle,
   getDropdownItemStyle,
   getDropdownItemClass
@@ -102,10 +103,7 @@ watch(
       <!-- 退出登录 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover">
-          <img
-            src="https://avatars.githubusercontent.com/u/44761321?v=4"
-            :style="avatarsStyle"
-          />
+          <img :src="userAvatar" :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

@@ -27,6 +27,7 @@ const {
   menuSelect,
   resolvePath,
   username,
+  userAvatar,
   getDivStyle,
   avatarsStyle,
   getDropdownItemStyle,
@@ -134,10 +135,7 @@ watch(
       <!-- 退出登录 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover select-none">
-          <img
-            src="https://avatars.githubusercontent.com/u/44761321?v=4"
-            :style="avatarsStyle"
-          />
+          <img :src="userAvatar" :style="avatarsStyle" />
           <p v-if="username" class="dark:text-white">{{ username }}</p>
         </span>
         <template #dropdown>

src/layout/components/sidebar/vertical.vue

@@ -60,6 +60,7 @@ onBeforeMount(() => {
 watch(
   () => [route.path, usePermissionStoreHook().wholeMenus],
   () => {
+    if (route.path.includes("/redirect")) return;
     getSubMenuData(route.path);
     menuSelect(route.path, routers);
   }

src/layout/components/tag/index.vue

@@ -50,7 +50,7 @@ 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();
 
@@ -169,6 +169,7 @@ function onFresh() {
     path: "/redirect" + fullPath,
     query
   });
+  handleAliveRoute(route as toRouteType, "refresh");
 }
 
 function deleteDynamicTag(obj: any, current: any, tag?: string) {
@@ -524,7 +525,7 @@ onMounted(() => {
           :class="[
             'scroll-item is-closable',
             linkIsActive(item),
-            $route.path === item.path && showModel === 'card'
+            route.path === item.path && showModel === 'card'
               ? 'card-active'
               : ''
           ]"

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() {
@@ -166,6 +167,7 @@ export function useNav() {
     isCollapse,
     pureApp,
     username,
+    userAvatar,
     avatarsStyle,
     tooltipEffect,
     getDropdownItemStyle,

src/layout/index.vue

@@ -8,7 +8,15 @@ import { useLayout } from "./hooks/useLayout";
 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,
+  reactive,
+  computed,
+  onMounted,
+  onBeforeMount,
+  defineComponent
+} from "vue";
 
 import navbar from "./components/navbar.vue";
 import tag from "./components/tag/index.vue";
@@ -88,11 +96,12 @@ emitter.on("resize", ({ detail }) => {
       toggle("desktop", false);
       isAutoCloseSidebar = false;
     }
-  } else if (width > 990) {
-    if (!set.sidebar.isClickCollapse) {
-      toggle("desktop", true);
-      isAutoCloseSidebar = true;
-    }
+  } else if (width > 990 && !set.sidebar.isClickCollapse) {
+    toggle("desktop", true);
+    isAutoCloseSidebar = true;
+  } else {
+    toggle("desktop", false);
+    isAutoCloseSidebar = false;
   }
 });
 
@@ -102,6 +111,10 @@ onMounted(() => {
   }
 });
 
+onBeforeMount(() => {
+  useDataThemeChange().dataThemeChange();
+});
+
 const layoutHeader = defineComponent({
   render() {
     return h(

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";
 
@@ -47,13 +47,13 @@ Object.keys(modules).forEach(key => {
 
 /** 导出处理后的静态路由（三级及以上的路由全部拍成二级） */
 export const constantRoutes: Array<RouteRecordRaw> = formatTwoStageRoutes(
-  formatFlatteningRoutes(buildHierarchyTree(ascending(routes)))
+  formatFlatteningRoutes(buildHierarchyTree(ascending(routes.flat(Infinity))))
 );
 
 /** 用于渲染菜单，保持原始层级 */
-export const constantMenus: Array<RouteComponent> = ascending(routes).concat(
-  ...remainingRouter
-);
+export const constantMenus: Array<RouteComponent> = ascending(
+  routes.flat(Infinity)
+).concat(...remainingRouter);
 
 /** 不参与菜单的路由 */
 export const remainingPaths = Object.keys(remainingRouter).map(v => {
@@ -87,7 +87,9 @@ export function resetRouter() {
     if (name && router.hasRoute(name) && meta?.backstage) {
       router.removeRoute(name);
       router.options.routes = formatTwoStageRoutes(
-        formatFlatteningRoutes(buildHierarchyTree(ascending(routes)))
+        formatFlatteningRoutes(
+          buildHierarchyTree(ascending(routes.flat(Infinity)))
+        )
       );
     }
   });
@@ -156,11 +158,22 @@ router.beforeEach((to: toRouteType, _from, next) => {
             getTopMenu(true);
             // query、params模式路由传参数的标签页不在此处处理
             if (route && route.meta?.title) {
-              useMultiTagsStoreHook().handleTags("push", {
-                path: route.path,
-                name: route.name,
-                meta: route.meta
-              });
+              if (isAllEmpty(route.parentId) && route.meta?.backstage) {
+                // 此处为动态顶级路由（目录）
+                const { path, name, meta } = route.children[0];
+                useMultiTagsStoreHook().handleTags("push", {
+                  path,
+                  name,
+                  meta
+                });
+              } else {
+                const { path, name, meta } = route;
+                useMultiTagsStoreHook().handleTags("push", {
+                  path,
+                  name,
+                  meta
+                });
+              }
             }
           }
           router.push(to.fullPath);

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"),
@@ -31,9 +31,27 @@ export default {
         title: $t("menus.hsmessage")
       }
     },
+    {
+      path: "/components/segmented",
+      name: "Segmented",
+      component: () => import("@/views/components/segmented/index.vue"),
+      meta: {
+        title: $t("menus.hssegmented"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
+    {
+      path: "/components/waterfall",
+      name: "Waterfall",
+      component: () => import("@/views/components/waterfall/index.vue"),
+      meta: {
+        title: $t("menus.hswaterfall"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
     {
       path: "/components/video",
-      name: "Video",
+      name: "VideoPage",
       component: () => import("@/views/components/video/index.vue"),
       meta: {
         title: $t("menus.hsvideo")
@@ -41,7 +59,7 @@ export default {
     },
     {
       path: "/components/map",
-      name: "Map",
+      name: "MapPage",
       component: () => import("@/views/components/map/index.vue"),
       meta: {
         title: $t("menus.hsmap"),
@@ -73,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

@@ -270,6 +270,12 @@ function handleAliveRoute({ name }: toRouteType, mode?: string) {
         name
       });
       break;
+    case "refresh":
+      usePermissionStoreHook().cacheOperate({
+        mode: "refresh",
+        name
+      });
+      break;
     default:
       usePermissionStoreHook().cacheOperate({
         mode: "delete",

src/store/modules/permission.ts

@@ -24,13 +24,15 @@ export const usePermissionStore = defineStore({
       );
     },
     cacheOperate({ mode, name }: cacheType) {
+      const delIndex = this.cachePageList.findIndex(v => v === name);
       switch (mode) {
+        case "refresh":
+          this.cachePageList = this.cachePageList.filter(v => v !== name);
+          break;
         case "add":
           this.cachePageList.push(name);
           break;
         case "delete":
-          // eslint-disable-next-line no-case-declarations
-          const delIndex = this.cachePageList.findIndex(v => v === name);
           delIndex !== -1 && this.cachePageList.splice(delIndex, 1);
           break;
       }

src/style/dark.scss

@@ -110,6 +110,10 @@ html.dark {
       &:hover {
         color: rgb(255 255 255 / 85%) !important;
         background-color: rgb(255 255 255 / 12%);
+
+        .pure-dialog-svg {
+          color: rgb(255 255 255 / 85%) !important;
+        }
       }
     }
   }
@@ -134,4 +138,35 @@ 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%);
+    background-color: #000;
+
+    .pure-segmented-item-selected {
+      background-color: #1f1f1f;
+    }
+
+    .pure-segmented-item-disabled {
+      color: rgb(255 255 255 / 25%);
+    }
+  }
 }

src/style/element-plus.scss

@@ -69,6 +69,19 @@
   }
 }
 
+.pure-dialog {
+  .pure-dialog-svg {
+    color: var(--el-color-info);
+  }
+
+  .el-dialog__headerbtn {
+    top: 20px;
+    right: 14px;
+    width: 24px;
+    height: 24px;
+  }
+}
+
 /* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明 */
 .el-dialog__headerbtn,
 .el-message-box__headerbtn {
@@ -94,6 +107,10 @@
       color: rgb(0 0 0 / 88%) !important;
       text-decoration: none;
       background-color: rgb(0 0 0 / 6%);
+
+      .pure-dialog-svg {
+        color: rgb(0 0 0 / 88%) !important;
+      }
     }
   }
 }
@@ -131,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/views/able/timeline.vue

@@ -70,7 +70,7 @@ const activities = [
           placement="bottom"
         >
           <div class="message">
-            vue-pure-admin是基于Vue3.0+TypeScript+Vite2.0+Element-Plus编写的一套后台管理系统
+            vue-pure-admin是基于Vue3.0+TypeScript+Vite+Element-Plus编写的一套后台管理系统
           </div>
         </el-timeline-item>
       </el-timeline>

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/about/index.vue

@@ -28,19 +28,19 @@ Object.keys(devDependencies).forEach(key => {
 
 <template>
   <div>
-    <el-card class="box-card mb-4" shadow="never">
+    <el-card class="mb-4 box-card" shadow="never">
       <template #header>
         <div class="card-header">
           <span class="font-medium">关于</span>
         </div>
       </template>
       <span style="font-size: 15px">
-        Pure-Admin 是一个基于Vue3、Vite2、TypeScript、Element-Plus
+        Pure-Admin 是一个基于Vue3、Vite、TypeScript、Element-Plus
         的中后台解决方案，它可以帮助您快速搭建企业级中后台，提供现成的开箱解决方案及丰富的示例。原则上不收取任何费用及版权，可以放心使用，不过如需二次开源（比如用此平台二次开发并开源）请联系作者获取许可！
       </span>
     </el-card>
 
-    <el-card class="box-card m-4" shadow="never">
+    <el-card class="m-4 box-card" shadow="never">
       <template #header>
         <div class="card-header">
           <span class="font-medium">项目信息</span>
@@ -49,7 +49,7 @@ Object.keys(devDependencies).forEach(key => {
       <PureDescriptions :columns="columns" border :column="3" align="left" />
     </el-card>
 
-    <el-card class="box-card m-4" shadow="never">
+    <el-card class="m-4 box-card" shadow="never">
       <template #header>
         <div class="card-header">
           <span class="font-medium">生产环境依赖</span>
@@ -73,7 +73,7 @@ Object.keys(devDependencies).forEach(key => {
       </el-descriptions>
     </el-card>
 
-    <el-card class="box-card m-4" shadow="never">
+    <el-card class="m-4 box-card" shadow="never">
       <template #header>
         <div class="card-header">
           <span class="font-medium">开发环境依赖</span>

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+// 声明 props 类型
+export interface FormProps {
+  formInline: {
+    user: string;
+    region: string;
+  };
+}
+
+// 声明 props 默认值
+// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({ user: "", region: "" })
+});
+
+// vue 规定所有的 prop 都遵循着单向绑定原则，不能在子组件中更改 prop 值，该 form.vue 文件为子组件
+// 如果需要拿到初始化的 prop 值并使得组件变量可修改，则需要在子组件定义一个新的变量接受这个子组件的 prop
+// 推荐阅读：https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
+const newFormInline = ref(props.formInline);
+</script>
+
+<template>
+  <el-form :model="newFormInline">
+    <el-form-item label="姓名">
+      <el-input
+        class="!w-[220px]"
+        v-model="newFormInline.user"
+        placeholder="请输入姓名"
+      />
+    </el-form-item>
+    <el-form-item label="城市">
+      <el-select
+        class="!w-[220px]"
+        v-model="newFormInline.region"
+        placeholder="请选择城市"
+      >
+        <el-option label="上海" value="上海" />
+        <el-option label="浙江" value="浙江" />
+        <el-option label="深圳" value="深圳" />
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>

src/views/components/dialog/index.vue

@@ -1,12 +1,22 @@
 <script setup lang="tsx">
-import { h, createVNode } from "vue";
+import { useRouter } from "vue-router";
+import { h, createVNode, ref } from "vue";
 import { message } from "@/utils/message";
-import { addDialog, closeDialog, closeAllDialog } from "@/components/ReDialog";
+import forms, { type FormProps } from "./form.vue";
+import { cloneDeep, debounce } from "@pureadmin/utils";
+import {
+  addDialog,
+  closeDialog,
+  updateDialog,
+  closeAllDialog
+} from "@/components/ReDialog";
 
 defineOptions({
-  name: "Dialog"
+  name: "DialogPage"
 });
 
+const router = useRouter();
+
 function onBaseClick() {
   addDialog({
     title: "基本使用",
@@ -30,6 +40,14 @@ function onFullscreenClick() {
   });
 }
 
+function onFullscreenIconClick() {
+  addDialog({
+    title: "全屏按钮",
+    fullscreenIcon: true,
+    contentRenderer: () => <p>弹框内容-全屏按钮</p>
+  });
+}
+
 function onModalClick() {
   addDialog({
     title: "无背景遮罩层",
@@ -47,13 +65,16 @@ function onStyleClick() {
   });
 }
 
-function onoOpenDelayClick() {
-  addDialog({
-    title: "延时2秒打开弹框",
-    openDelay: 2000,
-    contentRenderer: () => <p>弹框内容-延时2秒打开弹框</p>
-  });
-}
+// 添加 600ms 防抖
+const onoOpenDelayClick = debounce(
+  () =>
+    addDialog({
+      title: "延时2秒打开弹框",
+      openDelay: 2000 - 600,
+      contentRenderer: () => <p>弹框内容-延时2秒打开弹框</p>
+    }),
+  600
+);
 
 function onCloseDelayClick() {
   addDialog({
@@ -189,6 +210,7 @@ function onCloseCallBackClick() {
   });
 }
 
+// 这里为了演示方便，使用了嵌套写法，实际情况下最好把 addDialog 函数抽出来 套娃不可取
 function onNestingClick() {
   addDialog({
     title: "嵌套的弹框",
@@ -225,6 +247,169 @@ 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({
+    width: "30%",
+    title: "结合Form表单（第一种方式）",
+    contentRenderer: () => forms,
+    props: {
+      // 赋默认值
+      formInline: {
+        user: "菜虚鲲",
+        region: "浙江"
+      }
+    },
+    closeCallBack: ({ options, args }) => {
+      // options.props 是响应式的
+      const { formInline } = options.props as FormProps;
+      const text = `姓名：${formInline.user} 城市：${formInline.region}`;
+      if (args?.command === "cancel") {
+        // 您点击了取消按钮
+        message(`您点击了取消按钮，当前表单数据为 ${text}`);
+      } else if (args?.command === "sure") {
+        message(`您点击了确定按钮，当前表单数据为 ${text}`);
+      } else {
+        message(`您点击了右上角关闭按钮或者空白页，当前表单数据为 ${text}`);
+      }
+    }
+  });
+}
+
+// 结合Form表单（第二种方式）h 渲染函数 https://cn.vuejs.org/api/render-function.html#h
+const formInline = ref({
+  user: "菜虚鲲",
+  region: "浙江"
+});
+const resetFormInline = cloneDeep(formInline.value);
+function onFormTwoClick() {
+  addDialog({
+    width: "30%",
+    title: "结合Form表单（第二种方式）",
+    contentRenderer: () => h(forms, { formInline: formInline.value }),
+    closeCallBack: () => {
+      message(
+        `当前表单数据为 姓名：${formInline.value.user} 城市：${formInline.value.region}`
+      );
+      // 重置表单数据
+      formInline.value = cloneDeep(resetFormInline);
+    }
+  });
+}
+
+// 结合Form表单（第三种方式）createVNode 渲染函数 https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes
+const formThreeInline = ref({
+  user: "菜虚鲲",
+  region: "浙江"
+});
+const resetFormThreeInline = cloneDeep(formThreeInline.value);
+function onFormThreeClick() {
+  addDialog({
+    width: "30%",
+    title: "结合Form表单（第三种方式）",
+    contentRenderer: () =>
+      createVNode(forms, { formInline: formThreeInline.value }),
+    closeCallBack: () => {
+      message(
+        `当前表单数据为 姓名：${formThreeInline.value.user} 城市：${formThreeInline.value.region}`
+      );
+      // 重置表单数据
+      formThreeInline.value = cloneDeep(resetFormThreeInline);
+    }
+  });
+}
+
+// 结合Form表单（第四种方式）使用jsx语法
+// 需要注意的是如果 forms 没注册，这里 forms 注册了是因为上面 contentRenderer: () => forms、h(forms) 、createVNode(createVNode) 间接给注册了
+// 如果只使用了jsx语法，如下 `contentRenderer: () => <forms formInline={formFourInline.value} />` 是不会给 forms 组件进行注册的，需要在 `script` 中任意位置（最好是末尾）写上 forms 即可
+// 同理如果在 tsx 文件中，这么使用 `contentRenderer: () => <forms formInline={formFourInline.value} />`，也是不会给 forms 组件进行注册，需要在 return 中写上 forms
+const formFourInline = ref({
+  user: "菜虚鲲",
+  region: "浙江"
+});
+const resetFormFourInline = cloneDeep(formFourInline.value);
+function onFormFourClick() {
+  addDialog({
+    width: "30%",
+    title: "结合Form表单（第四种方式）",
+    contentRenderer: () => <forms formInline={formFourInline.value} />,
+    closeCallBack: () => {
+      message(
+        `当前表单数据为 姓名：${formFourInline.value.user} 城市：${formFourInline.value.region}`
+      );
+      // 重置表单数据
+      formFourInline.value = cloneDeep(resetFormFourInline);
+    }
+  });
+}
+
+function onBeforeCancelClick() {
+  addDialog({
+    title: "点击底部取消按钮的回调",
+    contentRenderer: () => (
+      <p>弹框内容-点击底部取消按钮的回调（会暂停弹框的关闭）</p>
+    ),
+    beforeCancel: (done, { options, index }) => {
+      console.log(
+        "%coptions, index===>>>: ",
+        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
+        options,
+        index
+      );
+      // done(); // 需要关闭把注释解开即可
+    }
+  });
+}
+
+function onBeforeSureClick() {
+  addDialog({
+    title: "点击底部确定按钮的回调",
+    contentRenderer: () => (
+      <p>
+        弹框内容-点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、编辑弹框内容后调用接口）
+      </p>
+    ),
+    beforeSure: (done, { options, index }) => {
+      console.log(
+        "%coptions, index===>>>: ",
+        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
+        options,
+        index
+      );
+      // done(); // 需要关闭把注释解开即可
+    }
+  });
+}
 </script>
 
 <template>
@@ -240,7 +425,13 @@ function onNestingClick() {
           >
             Dialog
           </el-link>
-          ，采用函数式调用弹框组件
+          ，采用函数式调用弹框组件（更多操作实例请参考
+          <span
+            class="cursor-pointer text-primary"
+            @click="router.push({ name: 'Dept' })"
+            >系统管理页面</span
+          >
+          ）
         </span>
       </div>
     </template>
@@ -248,6 +439,7 @@ function onNestingClick() {
       <el-button @click="onBaseClick"> 基本使用 </el-button>
       <el-button @click="onDraggableClick"> 可拖拽 </el-button>
       <el-button @click="onFullscreenClick"> 全屏 </el-button>
+      <el-button @click="onFullscreenIconClick"> 全屏按钮 </el-button>
       <el-button @click="onModalClick"> 无背景遮罩层 </el-button>
       <el-button @click="onStyleClick"> 自定义弹出位置 </el-button>
       <el-button @click="onoOpenDelayClick"> 延时2秒打开弹框 </el-button>
@@ -266,6 +458,31 @@ function onNestingClick() {
       <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>
+      <el-button @click="onFormOneClick">
+        结合Form表单（第一种方式）
+      </el-button>
+      <el-button @click="onFormTwoClick">
+        结合Form表单（第二种方式）
+      </el-button>
+      <el-button @click="onFormThreeClick">
+        结合Form表单（第三种方式）
+      </el-button>
+      <el-button @click="onFormFourClick">
+        结合Form表单（第四种方式）
+      </el-button>
+    </el-space>
+    <el-divider />
+    <el-space wrap>
+      <el-button @click="onBeforeCancelClick">
+        点击底部取消按钮的回调（会暂停弹框的关闭）
+      </el-button>
+      <el-button @click="onBeforeSureClick">
+        点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、编辑弹框内容后调用接口）
+      </el-button>
     </el-space>
   </el-card>
 </template>

src/views/components/map/index.vue

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

src/views/components/segmented/index.vue

@@ -0,0 +1,201 @@
+<script setup lang="tsx">
+import { h } from "vue";
+import { message } from "@/utils/message";
+import HomeFilled from "@iconify-icons/ep/home-filled";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Segmented, { type OptionsType } from "@/components/ReSegmented";
+
+defineOptions({
+  name: "Segmented"
+});
+
+/** 基础用法 */
+const optionsBasis: Array<OptionsType> = [
+  {
+    label: "周一",
+    value: 1
+  },
+  {
+    label: "周二",
+    value: 2
+  },
+  {
+    label: "周三",
+    value: 3
+  },
+  {
+    label: "周四",
+    value: 4
+  },
+  {
+    label: "周五",
+    value: 5
+  }
+];
+
+/** 禁用 */
+const optionsDisabled: Array<OptionsType> = [
+  {
+    label: "周一",
+    value: 1
+  },
+  {
+    label: "周二",
+    value: 2
+  },
+  {
+    label: "周三",
+    value: 3,
+    disabled: true
+  },
+  {
+    label: "周四",
+    value: 4
+  },
+  {
+    label: "周五",
+    value: 5,
+    disabled: true
+  }
+];
+
+/** 设置图标 */
+const optionsIcon: Array<OptionsType> = [
+  {
+    label: "周一",
+    value: 1,
+    icon: HomeFilled
+  },
+  {
+    label: "周二",
+    value: 2
+  },
+  {
+    label: "周三",
+    value: 3,
+    icon: "terminalWindowLine"
+  },
+  {
+    label: "周四",
+    value: 4,
+    icon: "streamline-emojis:airplane"
+  },
+  {
+    label: "周五",
+    value: 5,
+    icon: "streamline-emojis:2"
+  }
+];
+
+/** 只设置图标 */
+const optionsOnlyIcon: Array<OptionsType> = [
+  {
+    value: 1,
+    icon: HomeFilled
+  },
+  {
+    value: 2,
+    icon: "terminalWindowLine"
+  },
+  {
+    value: 3,
+    icon: "streamline-emojis:cow-face"
+  },
+  {
+    value: 4,
+    icon: "streamline-emojis:airplane"
+  },
+  {
+    value: 5,
+    icon: "streamline-emojis:2"
+  }
+];
+
+/** 自定义渲染 */
+const optionsLabel: Array<OptionsType> = [
+  {
+    label: () => (
+      <div>
+        {h(useRenderIcon(HomeFilled), {
+          class: "m-auto w-[20px] h-[20px]"
+        })}
+        <p>周一</p>
+      </div>
+    ),
+    value: 1
+  },
+  {
+    label: () => (
+      <div>
+        {h(useRenderIcon("terminalWindowLine"), {
+          class: "m-auto w-[20px] h-[20px]"
+        })}
+        <p>周二</p>
+      </div>
+    ),
+    value: 2
+  },
+  {
+    label: () => (
+      <div>
+        {h(useRenderIcon("streamline-emojis:cow-face"), {
+          class: "m-auto w-[20px] h-[20px]"
+        })}
+        <p>周三</p>
+      </div>
+    ),
+    value: 3
+  }
+];
+
+const optionsChange: Array<OptionsType> = [
+  {
+    label: "周一",
+    value: 1
+  },
+  {
+    label: "周二",
+    value: 2
+  },
+  {
+    label: "周三",
+    value: 3
+  }
+];
+
+/** change事件 */
+function onChange({ index, option }) {
+  const { label, value } = option;
+  message(`当前选中项索引为：${index}，名字为${label}，值为${value}`, {
+    type: "success"
+  });
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">分段控制器</span>
+      </div>
+    </template>
+    <p class="mb-2">基础用法</p>
+    <Segmented :options="optionsBasis" />
+    <el-divider />
+    <p class="mb-2">默认选中和禁用</p>
+    <Segmented :options="optionsDisabled" :defaultValue="2" />
+    <el-divider />
+    <p class="mb-2">设置图标</p>
+    <Segmented :options="optionsIcon" />
+    <el-divider />
+    <p class="mb-2">只设置图标</p>
+    <Segmented :options="optionsOnlyIcon" />
+    <el-divider />
+    <p class="mb-2">自定义渲染</p>
+    <Segmented :options="optionsLabel" />
+    <el-divider />
+    <p class="mb-2">change事件</p>
+    <Segmented :options="optionsChange" @change="onChange" />
+    <el-divider />
+  </el-card>
+</template>

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/api.ts

@@ -0,0 +1,38 @@
+export function randomID(length = 6) {
+  return Number(
+    Math.random().toString().substr(3, length) + Date.now()
+  ).toString(36);
+}
+
+const COLORS = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C", "#909399"];
+
+function getRandomNum(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function randomColor() {
+  return COLORS[getRandomNum(0, 4)];
+}
+
+const website = "https://www.getphotoblanket.com";
+
+export const getList = ({ page = 1, pageSize = 20 }) => {
+  const url = `${website}/products.json?page=${page}&limit=${pageSize}`;
+  return fetch(url)
+    .then(res => res.json())
+    .then(res => res.products)
+    .then(res => {
+      return res.map((item: any) => {
+        return {
+          id: randomID(),
+          star: false,
+          price: item.variants[0].price,
+          src: {
+            original: item.images[0].src
+          },
+          backgroundColor: randomColor(),
+          name: item.title
+        };
+      });
+    });
+};

src/views/components/waterfall/index.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { getList } from "./api";
+import error from "./error.png";
+import loading from "./loading.png";
+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";
+
+const options = reactive({
+  // 唯一key值
+  rowKey: "id",
+  // 卡片之间的间隙
+  gutter: 10,
+  // 是否有周围的gutter
+  hasAroundGutter: true,
+  // 卡片在PC上的宽度
+  width: 320,
+  // 自定义行显示个数，主要用于对移动端的适配
+  breakpoints: {
+    1200: {
+      // 当屏幕宽度小于等于1200
+      rowPerView: 4
+    },
+    800: {
+      // 当屏幕宽度小于等于800
+      rowPerView: 3
+    },
+    500: {
+      // 当屏幕宽度小于等于500
+      rowPerView: 2
+    }
+  },
+  // 动画效果 https://animate.style/
+  animationEffect: "animate__zoomInUp",
+  // 动画时间
+  animationDuration: 1000,
+  // 动画延迟
+  animationDelay: 300,
+  // 背景色
+  // backgroundColor: "#2C2E3A",
+  // 图片字段选择器，如果层级较深，使用 xxx.xxx.xxx 方式
+  imgSelector: "src.original",
+  // 加载配置
+  loadProps: {
+    loading,
+    error
+  },
+  // 是否懒加载
+  lazyload: true
+});
+
+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 => {
+    setTimeout(() => {
+      list.value.push(...res);
+      page.value += 1;
+      nextTick(() => {
+        loadingInstance.value.close();
+      });
+    }, 500);
+  });
+}
+
+function handleDelete(item, index) {
+  list.value.splice(index, 1);
+}
+
+function handleClick(item) {
+  console.log(item);
+}
+
+onMounted(() => {
+  handleLoadMore();
+});
+</script>
+
+<template>
+  <el-scrollbar height="87vh" class="content">
+    <Waterfall :list="list" v-bind="options">
+      <template #item="{ item, url, index }">
+        <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"
+          @click="handleClick(item)"
+        >
+          <div class="overflow-hidden">
+            <LazyImg
+              :url="url"
+              class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
+            />
+          </div>
+          <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>
+    </Waterfall>
+
+    <!-- <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> -->
+
+    <el-backtop
+      title="回到顶部"
+      :right="35"
+      :visibility-height="400"
+      target=".content .el-scrollbar__wrap"
+    >
+      <backTop />
+    </el-backtop>
+
+    <!-- 加载更多 -->
+    <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 { Editor, Toolbar } from "@wangeditor/editor-for-vue";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
-import Edit from "@iconify-icons/ep/edit";
+import { ref } from "vue";
+import { Base, Multi, PicUpload } from "./components";
 
 defineOptions({
   name: "Editor"
 });
 
-const mode = "default";
-// 编辑器实例，必须用 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 实例，重要！
-};
+const activeNames = ref(["1"]);
 </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">
-      <Toolbar
-        style="border-bottom: 1px solid #ccc"
-        :editor="editorRef"
-        :defaultConfig="toolbarConfig"
-        :mode="mode"
-      />
-      <Editor
-        style="height: 500px; overflow-y: hidden"
-        v-model="valueHtml"
-        :defaultConfig="editorConfig"
-        :mode="mode"
-        @onCreated="handleCreated"
-      />
-    </div>
+    <el-collapse v-model="activeNames" accordion>
+      <el-collapse-item title="基础用法" name="1">
+        <Base />
+      </el-collapse-item>
+      <el-collapse-item title="多个富文本" name="2">
+        <Multi />
+      </el-collapse-item>
+      <el-collapse-item title="自定义图片上传" name="3">
+        <PicUpload />
+      </el-collapse-item>
+    </el-collapse>
   </el-card>
 </template>
+
+<style lang="scss" scoped>
+:deep(.el-collapse-item__header) {
+  padding-left: 10px;
+}
+</style>

src/views/empty/index.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
+import { useRouter } from "vue-router";
 import back from "@/assets/svg/back.svg?component";
 
 defineOptions({
   name: "Empty"
 });
+
+const router = useRouter();
 </script>
 
 <template>
   <div class="w-full h-full text-center">
     <h1>业务内容模块</h1>
     <p>使用场景：需要外嵌平台某个页面，不需要展示菜单导航以及额外模块</p>
-    <div class="back" title="返回上一页" @click="$router.go(-1)">
+    <div class="back" title="返回上一页" @click="router.go(-1)">
       <back class="w-[80px] h-[80px]" />
     </div>
   </div>

src/views/error/403.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import { useRouter } from "vue-router";
 import noAccess from "@/assets/status/403.svg?component";
 
 defineOptions({
   name: "403"
 });
+
+const router = useRouter();
 </script>
 
 <template>
@@ -46,7 +49,7 @@ defineOptions({
       </p>
       <el-button
         type="primary"
-        @click="$router.push('/')"
+        @click="router.push('/')"
         v-motion
         :initial="{
           opacity: 0,

src/views/error/404.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import { useRouter } from "vue-router";
 import noExist from "@/assets/status/404.svg?component";
 
 defineOptions({
   name: "404"
 });
+
+const router = useRouter();
 </script>
 
 <template>
@@ -46,7 +49,7 @@ defineOptions({
       </p>
       <el-button
         type="primary"
-        @click="$router.push('/')"
+        @click="router.push('/')"
         v-motion
         :initial="{
           opacity: 0,

src/views/error/500.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import { useRouter } from "vue-router";
 import noServer from "@/assets/status/500.svg?component";
 
 defineOptions({
   name: "500"
 });
+
+const router = useRouter();
 </script>
 
 <template>
@@ -46,7 +49,7 @@ defineOptions({
       </p>
       <el-button
         type="primary"
-        @click="$router.push('/')"
+        @click="router.push('/')"
         v-motion
         :initial="{
           opacity: 0,

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

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import ReCol from "@/components/ReCol";
+import { formRules } from "./utils/rule";
+import { FormProps } from "./utils/types";
+import { usePublicHooks } from "../hooks";
+
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({
+    higherDeptOptions: [],
+    parentId: 0,
+    name: "",
+    principal: "",
+    phone: "",
+    email: "",
+    sort: 0,
+    status: 1,
+    remark: ""
+  })
+});
+
+const ruleFormRef = ref();
+const { switchStyle } = usePublicHooks();
+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-row :gutter="30">
+      <re-col>
+        <el-form-item label="上级部门">
+          <el-cascader
+            class="w-full"
+            v-model="newFormInline.parentId"
+            :options="newFormInline.higherDeptOptions"
+            :props="{
+              value: 'id',
+              label: 'name',
+              emitPath: false,
+              checkStrictly: true
+            }"
+            clearable
+            filterable
+            placeholder="请选择上级部门"
+          >
+            <template #default="{ node, data }">
+              <span>{{ data.name }}</span>
+              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+            </template>
+          </el-cascader>
+        </el-form-item>
+      </re-col>
+
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="部门名称" prop="name">
+          <el-input
+            v-model="newFormInline.name"
+            clearable
+            placeholder="请输入部门名称"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="部门负责人">
+          <el-input
+            v-model="newFormInline.principal"
+            clearable
+            placeholder="请输入部门负责人"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="手机号" prop="phone">
+          <el-input
+            v-model="newFormInline.phone"
+            clearable
+            placeholder="请输入手机号"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="邮箱" prop="email">
+          <el-input
+            v-model="newFormInline.email"
+            clearable
+            placeholder="请输入邮箱"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="排序">
+          <el-input-number
+            v-model="newFormInline.sort"
+            :min="0"
+            :max="9999"
+            controls-position="right"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="部门状态">
+          <el-switch
+            v-model="newFormInline.status"
+            inline-prompt
+            :active-value="1"
+            :inactive-value="0"
+            active-text="启用"
+            inactive-text="停用"
+            :style="switchStyle"
+          />
+        </el-form-item>
+      </re-col>
+
+      <re-col>
+        <el-form-item label="备注">
+          <el-input
+            v-model="newFormInline.remark"
+            placeholder="请输入备注信息"
+            type="textarea"
+          />
+        </el-form-item>
+      </re-col>
+    </el-row>
+  </el-form>
+</template>

src/views/system/dept/hook.tsx

@@ -1,107 +0,0 @@
-import dayjs from "dayjs";
-import { handleTree } from "@/utils/tree";
-import { getDeptList } from "@/api/system";
-import { reactive, ref, onMounted } from "vue";
-
-export function useDept() {
-  const form = reactive({
-    user: "",
-    status: ""
-  });
-  const dataList = ref([]);
-  const loading = ref(true);
-
-  const columns: TableColumnList = [
-    {
-      label: "序号",
-      type: "index",
-      minWidth: 70
-    },
-    {
-      label: "部门名称",
-      prop: "name",
-      width: 180,
-      align: "left"
-    },
-    {
-      label: "排序",
-      prop: "sort",
-      minWidth: 70
-    },
-    {
-      label: "状态",
-      prop: "status",
-      minWidth: 100,
-      cellRenderer: ({ row, props }) => (
-        <el-tag
-          size={props.size}
-          type={row.status === 1 ? "danger" : "success"}
-          effect="plain"
-        >
-          {row.status === 0 ? "关闭" : "开启"}
-        </el-tag>
-      )
-    },
-    {
-      label: "创建时间",
-      minWidth: 200,
-      prop: "createTime",
-      formatter: ({ createTime }) =>
-        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
-    },
-    {
-      label: "备注",
-      prop: "remark",
-      minWidth: 200
-    },
-    {
-      label: "操作",
-      fixed: "right",
-      width: 160,
-      slot: "operation"
-    }
-  ];
-
-  function handleUpdate(row) {
-    console.log(row);
-  }
-
-  function handleDelete(row) {
-    console.log(row);
-  }
-
-  function handleSelectionChange(val) {
-    console.log("handleSelectionChange", val);
-  }
-
-  function resetForm(formEl) {
-    if (!formEl) return;
-    formEl.resetFields();
-    onSearch();
-  }
-
-  async function onSearch() {
-    loading.value = true;
-    const { data } = await getDeptList();
-    dataList.value = handleTree(data);
-    setTimeout(() => {
-      loading.value = false;
-    }, 500);
-  }
-
-  onMounted(() => {
-    onSearch();
-  });
-
-  return {
-    form,
-    loading,
-    columns,
-    dataList,
-    onSearch,
-    resetForm,
-    handleUpdate,
-    handleDelete,
-    handleSelectionChange
-  };
-}

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";
 
@@ -23,7 +23,7 @@ const {
   dataList,
   onSearch,
   resetForm,
-  handleUpdate,
+  openDialog,
   handleDelete,
   handleSelectionChange
 } = useDept();
@@ -35,11 +35,11 @@ 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="user">
+      <el-form-item label="部门名称：" prop="name">
         <el-input
-          v-model="form.user"
+          v-model="form.name"
           placeholder="请输入部门名称"
           clearable
           class="!w-[200px]"
@@ -52,8 +52,8 @@ const {
           clearable
           class="!w-[180px]"
         >
-          <el-option label="开启" value="1" />
-          <el-option label="关闭" value="0" />
+          <el-option label="启用" :value="1" />
+          <el-option label="停用" :value="0" />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -72,13 +72,17 @@ const {
     </el-form>
 
     <PureTableBar
-      title="部门列表"
+      title="部门列表（仅演示，操作后不生效）"
       :columns="columns"
       :tableRef="tableRef?.getTableRef()"
       @refresh="onSearch"
     >
       <template #buttons>
-        <el-button type="primary" :icon="useRenderIcon(AddFill)">
+        <el-button
+          type="primary"
+          :icon="useRenderIcon(AddFill)"
+          @click="openDialog()"
+        >
           新增部门
         </el-button>
       </template>
@@ -107,12 +111,15 @@ const {
               link
               type="primary"
               :size="size"
-              @click="handleUpdate(row)"
               :icon="useRenderIcon(EditPen)"
+              @click="openDialog('编辑', row)"
             >
-              修改
+              编辑
             </el-button>
-            <el-popconfirm title="是否确认删除?">
+            <el-popconfirm
+              :title="`是否确认删除部门名称为${row.name}的这条数据`"
+              @confirm="handleDelete(row)"
+            >
               <template #reference>
                 <el-button
                   class="reset-margin"
@@ -120,7 +127,6 @@ const {
                   type="primary"
                   :size="size"
                   :icon="useRenderIcon(Delete)"
-                  @click="handleDelete(row)"
                 >
                   删除
                 </el-button>
@@ -132,3 +138,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

@@ -0,0 +1,177 @@
+import dayjs from "dayjs";
+import editForm from "../form.vue";
+import { handleTree } from "@/utils/tree";
+import { message } from "@/utils/message";
+import { getDeptList } from "@/api/system";
+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() {
+  const form = reactive({
+    name: "",
+    status: null
+  });
+
+  const formRef = ref();
+  const dataList = ref([]);
+  const loading = ref(true);
+  const { tagStyle } = usePublicHooks();
+
+  const columns: TableColumnList = [
+    {
+      label: "部门名称",
+      prop: "name",
+      width: 180,
+      align: "left"
+    },
+    {
+      label: "排序",
+      prop: "sort",
+      minWidth: 70
+    },
+    {
+      label: "状态",
+      prop: "status",
+      minWidth: 100,
+      cellRenderer: ({ row, props }) => (
+        <el-tag size={props.size} style={tagStyle.value(row.status)}>
+          {row.status === 1 ? "启用" : "停用"}
+        </el-tag>
+      )
+    },
+    {
+      label: "创建时间",
+      minWidth: 200,
+      prop: "createTime",
+      formatter: ({ createTime }) =>
+        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
+    },
+    {
+      label: "备注",
+      prop: "remark",
+      minWidth: 320
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 160,
+      slot: "operation"
+    }
+  ];
+
+  function handleSelectionChange(val) {
+    console.log("handleSelectionChange", val);
+  }
+
+  function resetForm(formEl) {
+    if (!formEl) return;
+    formEl.resetFields();
+    onSearch();
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    const { data } = await getDeptList(); // 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
+    let newData = data;
+    if (!isAllEmpty(form.name)) {
+      // 前端搜索部门名称
+      newData = newData.filter(item => item.name.includes(form.name));
+    }
+    if (!isAllEmpty(form.status)) {
+      // 前端搜索状态
+      newData = newData.filter(item => item.status === form.status);
+    }
+    dataList.value = handleTree(newData); // 处理成树结构
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+
+  function formatHigherDeptOptions(treeList) {
+    // 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
+    if (!treeList || !treeList.length) return;
+    const newTreeList = [];
+    for (let i = 0; i < treeList.length; i++) {
+      treeList[i].disabled = treeList[i].status === 0 ? true : false;
+      formatHigherDeptOptions(treeList[i].children);
+      newTreeList.push(treeList[i]);
+    }
+    return newTreeList;
+  }
+
+  function openDialog(title = "新增", row?: FormItemProps) {
+    addDialog({
+      title: `${title}部门`,
+      props: {
+        formInline: {
+          higherDeptOptions: formatHigherDeptOptions(cloneDeep(dataList.value)),
+          parentId: row?.parentId ?? 0,
+          name: row?.name ?? "",
+          principal: row?.principal ?? "",
+          phone: row?.phone ?? "",
+          email: row?.email ?? "",
+          sort: row?.sort ?? 0,
+          status: row?.status ?? 1,
+          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 handleDelete(row) {
+    message(`您删除了部门名称为${row.name}的这条数据`, { type: "success" });
+    onSearch();
+  }
+
+  onMounted(() => {
+    onSearch();
+  });
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    /** 搜索 */
+    onSearch,
+    /** 重置 */
+    resetForm,
+    /** 新增、编辑部门 */
+    openDialog,
+    /** 删除部门 */
+    handleDelete,
+    handleSelectionChange
+  };
+}

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

@@ -0,0 +1,37 @@
+import { reactive } from "vue";
+import type { FormRules } from "element-plus";
+import { isPhone, isEmail } from "@pureadmin/utils";
+
+/** 自定义表单规则校验 */
+export const formRules = reactive(<FormRules>{
+  name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
+  phone: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback();
+        } else if (!isPhone(value)) {
+          callback(new Error("请输入正确的手机号码格式"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+      // trigger: "click" // 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
+    }
+  ],
+  email: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback();
+        } else if (!isEmail(value)) {
+          callback(new Error("请输入正确的邮箱格式"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ]
+});

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

@@ -0,0 +1,16 @@
+interface FormItemProps {
+  higherDeptOptions: Record<string, unknown>[];
+  parentId: number;
+  name: string;
+  principal: string;
+  phone: string | number;
+  email: string;
+  sort: number;
+  status: number;
+  remark: string;
+}
+interface FormProps {
+  formInline: FormItemProps;
+}
+
+export type { FormItemProps, FormProps };

src/views/system/hooks.ts

@@ -0,0 +1,39 @@
+// 抽离可公用的工具函数等用于系统管理页面逻辑
+import { computed } from "vue";
+import { useDark } from "@pureadmin/utils";
+
+export function usePublicHooks() {
+  const { isDark } = useDark();
+
+  const switchStyle = computed(() => {
+    return {
+      "--el-switch-on-color": "#6abe39",
+      "--el-switch-off-color": "#e84749"
+    };
+  });
+
+  const tagStyle = computed(() => {
+    return (status: number) => {
+      return status === 1
+        ? {
+            "--el-tag-text-color": isDark.value ? "#6abe39" : "#389e0d",
+            "--el-tag-bg-color": isDark.value ? "#172412" : "#f6ffed",
+            "--el-tag-border-color": isDark.value ? "#274a17" : "#b7eb8f"
+          }
+        : {
+            "--el-tag-text-color": isDark.value ? "#e84749" : "#cf1322",
+            "--el-tag-bg-color": isDark.value ? "#2b1316" : "#fff1f0",
+            "--el-tag-border-color": isDark.value ? "#58191c" : "#ffa39e"
+          };
+    };
+  });
+
+  return {
+    /** 当前网页是否为`dark`模式 */
+    isDark,
+    /** 表现更鲜明的`el-switch`组件  */
+    switchStyle,
+    /** 表现更鲜明的`el-tag`组件  */
+    tagStyle
+  };
+}

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 More from "@iconify-icons/ep/more-filled";
+// import Database from "@iconify-icons/ri/database-2-line";
+// 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="0" />
+          <el-option label="已启用" value="1" />
+          <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>
@@ -118,11 +128,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 +153,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 +175,7 @@ const {
                       type="primary"
                       :size="size"
                       :icon="useRenderIcon(Menu)"
+                      @click="handleMenu"
                     >
                       菜单权限
                     </el-button>
@@ -165,13 +187,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 +206,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,17 +27,6 @@ export function useRole() {
     background: true
   });
   const columns: TableColumnList = [
-    {
-      label: "勾选列", // 如果需要表格多选，此处label必须设置
-      type: "selection",
-      width: 55,
-      align: "left"
-    },
-    {
-      label: "序号",
-      type: "index",
-      width: 70
-    },
     {
       label: "角色编号",
       prop: "id",
@@ -47,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,
@@ -76,13 +52,19 @@ export function useRole() {
           v-model={scope.row.status}
           active-value={1}
           inactive-value={0}
-          active-text="已开启"
-          inactive-text="已关闭"
+          active-text="已启用"
+          inactive-text="已停用"
           inline-prompt
+          style={switchStyle.value}
           onChange={() => onChange(scope as any)}
         />
       )
     },
+    {
+      label: "备注",
+      prop: "remark",
+      minWidth: 150
+    },
     {
       label: "创建时间",
       minWidth: 180,
@@ -93,19 +75,19 @@ export function useRole() {
     {
       label: "操作",
       fixed: "right",
-      width: 180,
+      width: 240,
       slot: "operation"
     }
   ];
-  const buttonClass = computed(() => {
-    return [
-      "!h-[20px]",
-      "reset-margin",
-      "!text-gray-500",
-      "dark:!text-white",
-      "dark:hover:!text-primary"
-    ];
-  });
+  // const buttonClass = computed(() => {
+  //   return [
+  //     "!h-[20px]",
+  //     "reset-margin",
+  //     "!text-gray-500",
+  //     "dark:!text-white",
+  //     "dark:hover:!text-primary"
+  //   ];
+  // });
 
   function onChange({ row, index }) {
     ElMessageBox.confirm(
@@ -113,7 +95,7 @@ export function useRole() {
         row.status === 0 ? "停用" : "启用"
       }</strong><strong style='color:var(--el-color-primary)'>${
         row.name
-      }</strong>角色吗?`,
+      }</strong>吗?`,
       "系统提示",
       {
         confirmButtonText: "确定",
@@ -139,7 +121,7 @@ export function useRole() {
               loading: false
             }
           );
-          message("已成功修改角色状态", {
+          message(`已${row.status === 0 ? "停用" : "启用"}${row.name}`, {
             type: "success"
           });
         }, 300);
@@ -149,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) {
@@ -171,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);
@@ -185,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();
   });
@@ -195,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/hook.tsx

@@ -24,7 +24,8 @@ export function useUser() {
     {
       label: "序号",
       type: "index",
-      width: 70
+      width: 70,
+      fixed: "left"
     },
     {
       label: "用户编号",

src/views/system/user/index.vue

@@ -44,7 +44,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="username">
           <el-input
@@ -186,4 +186,10 @@ const {
 :deep(.el-dropdown-menu__item i) {
   margin: 0;
 }
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
 </style>