Merge branch 'main' of github.com:edgexie/vue-pure-admin into main

2025-06-08 01:17:23 +08:00 · 2024-03-26 07:31:14 +08:00 · 2024-03-26 07:31:14 +08:00 · 51a8a7528d
commit 51a8a7528d
parent 19f752e6e7 e38610ff67
148 changed files with 22539 additions and 1137 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -35,5 +35,13 @@
  "i18n-ally.sourceLanguage": "en",
  "i18n-ally.displayLanguage": "zh-CN",
  "i18n-ally.enabledFrameworks": ["vue"],
-  "iconify.excludes": ["el"]
+  "iconify.excludes": ["el"],
+  "vsmqtt.brokerProfiles": [
+    {
+      "name": "broker.emqx.io",
+      "host": "broker.emqx.io/mqtt",
+      "port": 1883,
+      "clientId": "vsmqtt_client_db34"
+    }
+  ]
 }
--- a/CHANGELOG.en_US.md
+++ b/CHANGELOG.en_US.md
@ -1,3 +1,39 @@
+# 5.2.0 (2024-03-22)
+
+### ✔️ refactor
+
+- Place the full screen button at the top to make it visible and easy to operate
+
+### 🎫 Feat
+
+- Added `v-ripple` command (water ripple effect)
+- Add global `Stretch` configuration to the content area to customize compact pages and easily find the required information
+- Added roaming guidance based on `ElTour`
+- Improve role management-menu permission function, novel interactive experience
+- Add system monitoring-online users
+- Add system monitoring-login log
+- Add system monitoring-operation log
+- Add system monitoring-system log
+- Add more more convenient `pure-admin-table` editable table examples (overall editing, single row editing, cell editing)
+- The `ReSegmented` component has a new `block` attribute to make it fit the width of the parent element
+- Add [vue-flow](https://vueflow.dev/) flow chart example
+- Add virtual table example
+- Added Gantt chart example
+- Add graphic verification code example
+- Add form examples, which can be generated through `JSON` format configuration (basic form, pop-up form, drawer form, step-by-step form, search form)
+- Add a folding and expanding menu function on the middle right side of the left menu
+
+### 🐞 Bug fixes
+
+- Fixed the scroll bar issue when clicking on the registration page under `windwos`
+- Fixed the problem of scroll bars appearing in the content area when switching pages under `windows`
+- Fixed the problem of status style disappearing in `pure-table` with status table under dark overall style
+- Fixed the problem of turning on the gray mode and dark overall style in the project configuration and refreshing the overall style of the page.
+
+### 🍏 Perf
+
+- All pages of system management and system monitoring are compatible with mobile terminals
+
 # 5.1.0 (2024-03-02)

 ### ✔️ refactor
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,39 @@
+# 5.2.0 (2024-03-22)
+
+### ✔️ refactor
+
+- Place the full screen button at the top to make it visible and easy to operate
+
+### 🎫 Feat
+
+- Added `v-ripple` command (water ripple effect)
+- Add global `Stretch` configuration to the content area to customize compact pages and easily find the required information
+- Added roaming guidance based on `ElTour`
+- Improve role management-menu permission function, novel interactive experience
+- Add system monitoring-online users
+- Add system monitoring-login log
+- Add system monitoring-operation log
+- Add system monitoring-system log
+- Add more more convenient `pure-admin-table` editable table examples (overall editing, single row editing, cell editing)
+- The `ReSegmented` component has a new `block` attribute to make it fit the width of the parent element
+- Add [vue-flow](https://vueflow.dev/) flow chart example
+- Add virtual table example
+- Added Gantt chart example
+- Add graphic verification code example
+- Add form examples, which can be generated through `JSON` format configuration (basic form, pop-up form, drawer form, step-by-step form, search form)
+- Add a folding and expanding menu function on the middle right side of the left menu
+
+### 🐞 Bug fixes
+
+- Fixed the scroll bar issue when clicking on the registration page under `windwos`
+- Fixed the problem of scroll bars appearing in the content area when switching pages under `windows`
+- Fixed the problem of status style disappearing in `pure-table` with status table under dark overall style
+- Fixed the problem of turning on the gray mode and dark overall style in the project configuration and refreshing the overall style of the page.
+
+### 🍏 Perf
+
+- All pages of system management and system monitoring are compatible with mobile terminals
+
 # 5.1.0 (2024-03-02)

 ### ✔️ refactor
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@ -1,3 +1,39 @@
+# 5.2.0 (2024-03-22)
+
+### ✔️ refactor
+
+- 将全屏按钮置于顶部，使其显眼且易于操作
+
+### 🎫 Feat
+
+- 新增`v-ripple`指令(水波纹效果)
+- 内容区添加全局`Stretch`配置，可自定义紧凑页面，轻松找到所需信息
+- 添加基于`ElTour`实现的漫游式引导
+- 完善角色管理-菜单权限功能，新颖的交互体验
+- 添加系统监控-在线用户
+- 添加系统监控-登录日志
+- 添加系统监控-操作日志
+- 添加系统监控-系统日志
+- 添加更多更方便的`pure-admin-table`可编辑表格示例（整体编辑、单行编辑、单元格编辑）
+- `ReSegmented`组件新增`block`属性，可使其适合父元素宽度
+- 添加 [vue-flow](https://vueflow.dev/) 流程图示例
+- 添加虚拟表格示例
+- 添加甘特图示例
+- 添加图形验证码示例
+- 添加表单示例，可通过`JSON`格式配置生成（基础表单、弹框表单、抽屉表单、分步表单、搜索表单）
+- 在左侧菜单右中侧再加一个折叠展开菜单的功能
+
+### 🐞 Bug fixes
+
+- 修复`windwos`下点击注册页面会出现滚动条问题
+- 修复`windows`下页面切换，内容区会出现滚动条问题
+- 修复`pure-table`带状态表格在深色整体风格下状态样式消失的问题
+- 修复项目配置中开启灰色模式和深色整体风格，刷新页面整体风格异常
+
+### 🍏 Perf
+
+- 系统管理、系统监控的所有页面兼容移动端
+
 # 5.1.0 (2024-03-02)

 ### ✔️ refactor
--- a/README.en-US.md
+++ b/README.en-US.md
@ -10,6 +10,12 @@

 `vue-pure-admin` is an open source, free and out-of-the-box middle and backend management system template. Completely adopts `ECMAScript` module (`ESM`) specifications to write and organize code, using the latest `Vue3`, `Vite`, `Element-Plus`, `TypeScript`, `Pinia`, `Tailwindcss` and other mainstream technologies develop

+## Sponsors
+
+<a class="logo" href="https://ai-tools.cn/resume/start" target="_blank" rel="sponsored noopener">
+  <img src="./public/sponsors/aitools.svg" alt="aitools">
+</a>
+
 ## Thin version (offering non-internationalized and internationalized versions)

 The simplified version is based on the shelf extracted from [vue-pure-admin](https://github.com/pure-admin/vue-pure-admin), which contains main functions and is more suitable for actual project development. The packaged size is introduced globally [element-plus](https://element-plus.org) is still below `2.3MB`, and the full version of the code will be permanently synchronized. After enabling `brotli` compression and `cdn` to replace the local library mode, the package size is less than `350kb`
@ -17,15 +23,16 @@ The simplified version is based on the shelf extracted from [vue-pure-admin](htt
 [Click to view the non-internationalized version](https://github.com/pure-admin/pure-admin-thin)  
 [Click to view Internationalization version](https://github.com/pure-admin/pure-admin-thin/tree/i18n)

-## Supporting Video
+## Supporting video

-[Click Watch Tutorial](https://www.bilibili.com/video/BV1kg411v7QT)  
-[Click Watch UI Design](https://www.bilibili.com/video/BV17g411T7rq)
+[Click me to view UI design](https://www.bilibili.com/video/BV17g411T7rq)  
+[Click me to view the rapid development tutorial](https://www.bilibili.com/video/BV1kg411v7QT)  
+[Click me to view all pages and function demonstrations of vue-pure-admin](https://www.bilibili.com/video/BV1Rx4y1U7Mv)

-## Docs
+## Nanny-level documents

-[View vue-pure-admin documentation](https://yiming_chang.gitee.io/pure-admin-doc)  
-[View @pureadmin/utils documentation](https://pure-admin-utils.netlify.app)
+[Click me to view vue-pure-admin documentation](https://yiming_chang.gitee.io/pure-admin-doc)  
+[Click me to view @pureadmin/utils documentation](https://pure-admin-utils.netlify.app)

 ## Quality service, software outsourcing, sponsorship support

@ -168,7 +175,7 @@ You are very welcome to join！[Raise an issue](https://github.com/pure-admin/vu

 Thank you very much for your in-depth understanding of the source code and your outstanding contributions to the `pure-admin` organization ❤️

-|                   **Contributor**                    |                                   **SpecificCode**                                   |
+|                 **Contributor**                 |                                 **SpecificCode**                                 |
 | :---------------------------------------------: | :------------------------------------------------------------------------------: |
 |       [hb0730](https://github.com/hb0730)       |    [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=hb0730)    |
 |         [o-cc](https://github.com/o-cc)         |     [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=o-cc)     |
@ -176,6 +183,7 @@ Thank you very much for your in-depth understanding of the source code and your
 |   [skyline523](https://github.com/skyline523)   |  [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=skyline523)  |
 | [shark-lajiao](https://github.com/shark-lajiao) | [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=shark-lajiao) |
 |      [WitMiao](https://github.com/WitMiao)      |   [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=WitMiao)    |
+|     [QFifteen](https://github.com/QFifteen)     |   [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=QFifteen)   |

 ## Git Contribution submission specification

--- a/README.md
+++ b/README.md
@ -8,7 +8,14 @@

 ## 简介

-`vue-pure-admin` 是一款开源免费且开箱即用的中后台管理系统模版。完全采用 `ECMAScript` 模块（`ESM`）规范来编写和组织代码，使用了最新的 `Vue3`、`Vite`、`Element-Plus`、`TypeScript`、`Pinia`、`Tailwindcss` 等主流技术开发
+`vue-pure-admin` 是一款开源免费且开箱即用的中后台管理系统模版。完全采用 `ECMAScript` 模块（`ESM`）规范来编写和组织代码，使用了最新的 `Vue3`、
+`Vite`、`Element-Plus`、`TypeScript`、`Pinia`、`Tailwindcss` 等主流技术开发
+
+## 赞助商
+
+<a class="logo" href="https://ai-tools.cn/resume/start" target="_blank" rel="sponsored noopener">
+  <img src="./public/sponsors/aitools.svg" alt="aitools">
+</a>

 ## 精简版本（实际项目开发请用精简版本，提供 `非国际化` 、`国际化` 两个版本选择）

@ -19,8 +26,9 @@

 ## 配套视频

-[点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)  
 [点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)  
+[点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)  
+[点我查看 vue-pure-admin 的所有页面、功能演示](https://www.bilibili.com/video/BV1Rx4y1U7Mv)

 ## 配套保姆级文档

@ -176,6 +184,7 @@ docker run -dp 8080:80  --name pure-admin vue-pure-admin
 |   [skyline523](https://github.com/skyline523)   |  [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=skyline523)  |
 | [shark-lajiao](https://github.com/shark-lajiao) | [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=shark-lajiao) |
 |      [WitMiao](https://github.com/WitMiao)      |   [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=WitMiao)    |
+|     [QFifteen](https://github.com/QFifteen)     |   [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=QFifteen)   |

 ## `Git` 贡献提交规范

--- a/build/info.ts
+++ b/build/info.ts
@ -7,7 +7,7 @@ import boxen, { type Options as BoxenOptions } from "boxen";
 dayjs.extend(duration);

 const welcomeMessage = gradientString("cyan", "magenta").multiline(
-  `Hello! 欢迎使用 pure-admin 开源项目\n我们为您精心准备了下面两个贴心的保姆级文档\nhttps://yiming_chang.gitee.io/pure-admin-doc\nhttps://pure-admin-utils.netlify.app`
+  `您好! 欢迎使用 pure-admin 开源项目\n我们为您精心准备了下面两个贴心的保姆级文档\nhttps://yiming_chang.gitee.io/pure-admin-doc\nhttps://pure-admin-utils.netlify.app`
 );

 const boxenOptions: BoxenOptions = {
--- a/build/optimize.ts
+++ b/build/optimize.ts
@ -16,6 +16,7 @@ const include = [
  "qrcode",
  "intro.js",
  "vue-i18n",
+  "vxe-table",
  "vue-types",
  "js-cookie",
  "vue-tippy",
@ -35,6 +36,8 @@ const include = [
  "vue-json-pretty",
  "@logicflow/core",
  "@pureadmin/utils",
+  "@vue-office/docx",
+  "@vue-office/excel",
  "@wangeditor/editor",
  "responsive-storage",
  "plus-pro-components",
@ -44,6 +47,7 @@ const include = [
  "@amap/amap-jsapi-loader",
  "el-table-infinite-scroll",
  "vue-waterfall-plugin-next",
+  "@infectoone/vue-ganttastic",
  "@wangeditor/editor-for-vue",
  "vuedraggable/src/vuedraggable"
 ];
--- a/locales/en.yaml
+++ b/locales/en.yaml
@ -26,6 +26,7 @@ menus:
  hshome: Home
  hslogin: Login
  hsempty: Empty Page
+  hstable: Table
  hssysManagement: System Manage
  hsUser: User Manage
  hsRole: Role Manage
@ -70,6 +71,7 @@ menus:
  hsTag: Tag
  hsStatistic: Statistic
  hsCollapse: Collapse
+  hsGanttastic: Gantt Chart
  hsProgress: Progress
  hsUpload: File Upload
  hsCheckCard: CheckCard
@ -91,7 +93,9 @@ menus:
  hsVideoFrame: Video Frame Capture
  hsWavesurfer: Audio Visualization
  hsRipple: Ripple
+  hsMqtt: Mqtt Client
  hsOptimize: Debounce、Throttle、Copy、Longpress Directives
+  hsVerify: Captcha
  hsWatermark: Water Mark
  hsPrint: Print
  hsDownload: Download
@ -123,13 +127,18 @@ menus:
  hsSwiper: Swiper Plugin
  hsVirtualList: Virtual List
  hsPdf: PDF Preview
+  hsWord: Word Preview
+  hsExcels: Excel Preview
  hsExcel: Export Excel
  hsInfiniteScroll: Table Infinite Scroll
  hsSensitive: Sensitive Filter
  hsPinyin: PinYin
  hsdanmaku: Danmaku
+  hsSchemaForm: Form
  hsPureTableBase: Base Usage
  hsPureTableHigh: High Usage
+  hsPureTableEdit: Edit Usage
+  hsVxeTable: Virtual Usage
  hsboard: Paint Board
  hsMenuoverflow: Menu Overflow Show Tooltip Text
  hsChildMenuoverflow: Child Menu Overflow Show Tooltip Text
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@ -27,6 +27,7 @@ menus:
  hshome: 首页
  hslogin: 登录
  hsempty: 无Layout页
+  hstable: 表格
  hssysManagement: 系统管理
  hsUser: 用户管理
  hsRole: 角色管理
@ -71,6 +72,7 @@ menus:
  hsTag: 标签
  hsStatistic: 统计组件
  hsCollapse: 折叠面板
+  hsGanttastic: 甘特图
  hsProgress: 进度条
  hsUpload: 文件上传
  hsCheckCard: 多选卡片
@ -92,7 +94,9 @@ menus:
  hsVideoFrame: 视频帧截取-wasm版
  hsWavesurfer: 音频可视化
  hsRipple: 波纹(Ripple)
+  hsMqtt: MQTT客户端(mqtt)
  hsOptimize: 防抖、截流、复制、长按指令
+  hsVerify: 图形验证码
  hsWatermark: 水印
  hsPrint: 打印
  hsDownload: 下载
@ -114,7 +118,7 @@ menus:
  hsIconSelect: 图标选择器
  hsTimeline: 时间线
  hsLineTree: 树形连接线
-  hsList: 列表页
+  hsList: 列表页面
  hsListCard: 卡片列表页
  hsDebounce: 防抖节流
  hsFormDesign: 表单设计器
@ -124,13 +128,18 @@ menus:
  hsSwiper: Swiper插件
  hsVirtualList: 虚拟列表
  hsPdf: PDF预览
+  hsWord: Word预览
+  hsExcels: Excel预览
  hsExcel: 导出Excel
  hsInfiniteScroll: 表格无限滚动
  hsSensitive: 敏感词过滤
  hsPinyin: 汉语拼音
  hsdanmaku: 弹幕
-  hsPureTableBase: 基础用法（23个示例）
-  hsPureTableHigh: 高级用法（11个示例）
+  hsSchemaForm: 表单
+  hsPureTableBase: 基础用法
+  hsPureTableHigh: 高级用法
+  hsPureTableEdit: 可编辑用法
+  hsVxeTable: 虚拟滚动
  hsboard: 艺术画板
  hsMenuoverflow: 目录超出显示 Tooltip 文字提示
  hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示
--- a/mock/system.ts
+++ b/mock/system.ts
@ -140,6 +140,234 @@ export default defineFakeRoute([
      };
    }
  },
+  // 角色管理-权限-菜单权限
+  {
+    url: "/role-menu",
+    method: "post",
+    response: () => {
+      return {
+        success: true,
+        data: [
+          // 外部页面
+          {
+            parentId: 0,
+            id: 100,
+            menuType: 0, // 菜单类型（0代表菜单、1代表iframe、2代表外链、3代表按钮）
+            title: "menus.hsExternalPage"
+          },
+          {
+            parentId: 100,
+            id: 101,
+            menuType: 0,
+            title: "menus.hsExternalDoc"
+          },
+          {
+            parentId: 101,
+            id: 102,
+            menuType: 2,
+            title: "menus.externalLink"
+          },
+          {
+            parentId: 101,
+            id: 103,
+            menuType: 2,
+            title: "menus.pureutilsLink"
+          },
+          {
+            parentId: 100,
+            id: 104,
+            menuType: 1,
+            title: "menus.hsEmbeddedDoc"
+          },
+          {
+            parentId: 104,
+            id: 105,
+            menuType: 1,
+            title: "menus.hsEpDocument"
+          },
+          {
+            parentId: 104,
+            id: 106,
+            menuType: 1,
+            title: "menus.hsTailwindcssDocument"
+          },
+          {
+            parentId: 104,
+            id: 107,
+            menuType: 1,
+            title: "menus.hsVueDocument"
+          },
+          {
+            parentId: 104,
+            id: 108,
+            menuType: 1,
+            title: "menus.hsViteDocument"
+          },
+          {
+            parentId: 104,
+            id: 109,
+            menuType: 1,
+            title: "menus.hsPiniaDocument"
+          },
+          {
+            parentId: 104,
+            id: 110,
+            menuType: 1,
+            title: "menus.hsRouterDocument"
+          },
+          // 权限管理
+          {
+            parentId: 0,
+            id: 200,
+            menuType: 0,
+            title: "menus.permission"
+          },
+          {
+            parentId: 200,
+            id: 201,
+            menuType: 0,
+            title: "menus.permissionPage"
+          },
+          {
+            parentId: 200,
+            id: 202,
+            menuType: 0,
+            title: "menus.permissionButton"
+          },
+          {
+            parentId: 202,
+            id: 203,
+            menuType: 3,
+            title: "添加"
+          },
+          {
+            parentId: 202,
+            id: 204,
+            menuType: 3,
+            title: "修改"
+          },
+          {
+            parentId: 202,
+            id: 205,
+            menuType: 3,
+            title: "删除"
+          },
+          // 系统管理
+          {
+            parentId: 0,
+            id: 300,
+            menuType: 0,
+            title: "menus.hssysManagement"
+          },
+          {
+            parentId: 300,
+            id: 301,
+            menuType: 0,
+            title: "menus.hsUser"
+          },
+          {
+            parentId: 300,
+            id: 302,
+            menuType: 0,
+            title: "menus.hsRole"
+          },
+          {
+            parentId: 300,
+            id: 303,
+            menuType: 0,
+            title: "menus.hsSystemMenu"
+          },
+          {
+            parentId: 300,
+            id: 304,
+            menuType: 0,
+            title: "menus.hsDept"
+          },
+          // 系统监控
+          {
+            parentId: 0,
+            id: 400,
+            menuType: 0,
+            title: "menus.hssysMonitor"
+          },
+          {
+            parentId: 400,
+            id: 401,
+            menuType: 0,
+            title: "menus.hsOnlineUser"
+          },
+          {
+            parentId: 400,
+            id: 402,
+            menuType: 0,
+            title: "menus.hsLoginLog"
+          },
+          {
+            parentId: 400,
+            id: 403,
+            menuType: 0,
+            title: "menus.hsOperationLog"
+          },
+          {
+            parentId: 400,
+            id: 404,
+            menuType: 0,
+            title: "menus.hsSystemLog"
+          },
+          // 标签页操作
+          {
+            parentId: 0,
+            id: 500,
+            menuType: 0,
+            title: "menus.hstabs"
+          },
+          {
+            parentId: 500,
+            id: 501,
+            menuType: 0,
+            title: "menus.hstabs"
+          },
+          {
+            parentId: 500,
+            id: 502,
+            menuType: 0,
+            title: "query传参模式"
+          },
+          {
+            parentId: 500,
+            id: 503,
+            menuType: 0,
+            title: "params传参模式"
+          }
+        ]
+      };
+    }
+  },
+  // 角色管理-权限-菜单权限-根据角色 id 查对应菜单
+  {
+    url: "/role-menu-ids",
+    method: "post",
+    response: ({ body }) => {
+      if (body.id == 1) {
+        return {
+          success: true,
+          data: [
+            100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 200, 201,
+            202, 203, 204, 205, 300, 301, 302, 303, 304, 400, 401, 402, 403,
+            404, 500, 501, 502, 503
+          ]
+        };
+      } else if (body.id == 2) {
+        return {
+          success: true,
+          data: [
+            100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 404, 500,
+            501, 502, 503
+          ]
+        };
+      }
+    }
+  },
  // 菜单管理
  {
    url: "/menu",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "vue-pure-admin",
-  "version": "5.1.0",
+  "version": "5.2.0",
  "private": true,
  "type": "module",
  "scripts": {
@ -50,35 +50,41 @@
  "dependencies": {
    "@amap/amap-jsapi-loader": "^1.0.1",
    "@howdyjs/mouse-menu": "^2.1.3",
-    "@logicflow/core": "^1.2.22",
-    "@logicflow/extension": "^1.2.22",
+    "@infectoone/vue-ganttastic": "^2.3.1",
+    "@logicflow/core": "^1.2.23",
+    "@logicflow/extension": "^1.2.23",
    "@pureadmin/descriptions": "^1.2.1",
    "@pureadmin/table": "^3.1.2",
-    "@pureadmin/utils": "^2.4.6",
+    "@pureadmin/utils": "^2.4.7",
+    "@vue-flow/background": "^1.3.0",
+    "@vue-flow/core": "^1.33.4",
+    "@vue-office/docx": "^1.6.0",
+    "@vue-office/excel": "^1.7.2",
    "@vueuse/core": "^10.9.0",
    "@vueuse/motion": "^2.1.0",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.12",
    "@zxcvbn-ts/core": "^3.0.4",
    "animate.css": "^4.1.1",
-    "axios": "^1.6.7",
+    "axios": "^1.6.8",
    "china-area-data": "^5.0.1",
    "cropperjs": "^1.6.1",
    "dayjs": "^1.11.10",
    "echarts": "^5.5.0",
    "el-table-infinite-scroll": "^3.0.3",
-    "element-plus": "^2.6.1",
+    "element-plus": "^2.6.2",
    "intro.js": "^7.2.0",
    "js-cookie": "^3.0.5",
    "jsbarcode": "^3.11.6",
    "localforage": "^1.10.0",
    "mint-filter": "^4.0.3",
    "mitt": "^3.0.1",
+    "mqtt": "4.3.7",
    "nprogress": "^0.2.0",
    "path": "^0.12.7",
    "pinia": "^2.1.7",
    "pinyin-pro": "^3.19.6",
-    "plus-pro-components": "^0.0.2",
+    "plus-pro-components": "^0.0.5",
    "qrcode": "^1.5.3",
    "qs": "^6.12.0",
    "responsive-storage": "^2.2.0",
@ -89,22 +95,24 @@
    "v3-infinite-loading": "^1.3.1",
    "version-rocket": "^1.7.1",
    "vue": "^3.4.21",
-    "vue-i18n": "^9.10.1",
-    "vue-json-pretty": "^2.3.0",
-    "vue-pdf-embed": "^2.0.2",
+    "vue-i18n": "^9.10.2",
+    "vue-json-pretty": "^2.4.0",
+    "vue-pdf-embed": "^2.0.3",
    "vue-router": "^4.3.0",
    "vue-tippy": "^6.4.1",
    "vue-types": "^5.1.1",
    "vue-virtual-scroller": "2.0.0-beta.8",
    "vue-waterfall-plugin-next": "^2.4.3",
    "vue3-danmaku": "^1.6.0",
+    "vue3-puzzle-vcode": "^1.1.7",
    "vuedraggable": "^4.1.0",
+    "vxe-table": "^4.5.21",
    "wavesurfer.js": "^7.7.5",
    "xgplayer": "^3.0.14",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
-    "@commitlint/cli": "^19.1.0",
+    "@commitlint/cli": "^19.2.1",
    "@commitlint/config-conventional": "^19.1.0",
    "@commitlint/types": "^19.0.3",
    "@eslint/js": "^8.57.0",
@ -114,22 +122,24 @@
    "@iconify/vue": "^4.1.1",
    "@intlify/unplugin-vue-i18n": "^2.0.0",
    "@pureadmin/theme": "^3.2.0",
+    "@types/dagre": "^0.7.52",
    "@types/gradient-string": "^1.1.5",
    "@types/intro.js": "^5.1.5",
    "@types/js-cookie": "^3.0.6",
-    "@types/node": "^20.11.27",
+    "@types/node": "^20.11.30",
    "@types/nprogress": "^0.2.3",
    "@types/qrcode": "^1.5.5",
-    "@types/qs": "^6.9.12",
+    "@types/qs": "^6.9.14",
    "@types/sortablejs": "^1.15.8",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vitejs/plugin-vue-jsx": "^3.1.0",
-    "autoprefixer": "^10.4.18",
+    "autoprefixer": "^10.4.19",
    "boxen": "^7.1.1",
    "cloc": "^2.11.0",
-    "cssnano": "^6.1.0",
+    "cssnano": "^6.1.1",
+    "dagre": "^0.8.5",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-define-config": "^2.1.0",
@ -138,9 +148,9 @@
    "gradient-string": "^2.0.2",
    "husky": "^9.0.11",
    "lint-staged": "^15.2.2",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
    "postcss-html": "^1.6.0",
-    "postcss-import": "^16.0.1",
+    "postcss-import": "^16.1.0",
    "postcss-scss": "^4.0.9",
    "prettier": "^3.2.5",
    "rimraf": "^5.0.5",
@ -153,8 +163,8 @@
    "stylelint-prettier": "^5.0.0",
    "svgo": "^3.2.0",
    "tailwindcss": "^3.4.1",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.6",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.3",
    "vite-plugin-cdn-import": "^0.3.5",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-fake-server": "^2.1.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/platform-config.json
+++ b/public/platform-config.json
@ -1,5 +1,5 @@
 {
-  "Version": "5.1.0",
+  "Version": "5.2.0",
  "Title": "PureAdmin",
  "FixedHeader": true,
  "HiddenSideBar": false,
@ -25,7 +25,7 @@
  "ResponsiveStorageNameSpace": "responsive-",
  "MenuSearchHistory": 6,
  "MapConfigure": {
-    "amapKey": "97b3248d1553172e81f168cf94ea667e",
+    "amapKey": "adc139d56406f3844c8f1cf1c6b65c41",
    "options": {
      "resizeEnable": true,
      "center": [113.6401, 34.72468],
--- a/public/sponsors/aitools.svg
+++ b/public/sponsors/aitools.svg
--- a/src/App.vue
+++ b/src/App.vue
@ -9,9 +9,11 @@
 import { defineComponent } from "vue";
 import { checkVersion } from "version-rocket";
 import { ElConfigProvider } from "element-plus";
-import en from "element-plus/dist/locale/en.mjs";
 import { ReDialog } from "@/components/ReDialog";
+import en from "element-plus/dist/locale/en.mjs";
 import zhCn from "element-plus/dist/locale/zh-cn.mjs";
+import plusEn from "plus-pro-components/locale/en.mjs";
+import plusZhCn from "plus-pro-components/locale/zh-cn.mjs";

 export default defineComponent({
  name: "app",
@ -21,7 +23,9 @@ export default defineComponent({
  },
  computed: {
    currentLocale() {
-      return this.$storage.locale?.locale === "zh" ? zhCn : en;
+      return this.$storage.locale?.locale === "zh"
+        ? { ...zhCn, ...plusZhCn }
+        : { ...en, ...plusEn };
    }
  },
  beforeCreate() {
--- a/src/api/system.ts
+++ b/src/api/system.ts
@ -73,3 +73,13 @@ export const getSystemLogsList = (data?: object) => {
 export const getSystemLogsDetail = (data?: object) => {
  return http.request<Result>("post", "/system-logs-detail", { data });
 };
+
+/** 获取角色管理-权限-菜单权限 */
+export const getRoleMenu = (data?: object) => {
+  return http.request<Result>("post", "/role-menu", { data });
+};
+
+/** 获取角色管理-权限-菜单权限-根据角色 id 查对应菜单 */
+export const getRoleMenuIds = (data?: object) => {
+  return http.request<Result>("post", "/role-menu-ids", { data });
+};
--- a/src/components/ReDialog/index.vue
+++ b/src/components/ReDialog/index.vue
@ -64,9 +64,10 @@ const fullscreenClass = computed(() => {
 function eventsCallBack(
  event: EventType,
  options: DialogOptions,
-  index: number
+  index: number,
+  isClickFullScreen = false
 ) {
-  fullscreen.value = options?.fullscreen ?? false;
+  if (!isClickFullScreen) fullscreen.value = options?.fullscreen ?? false;
  if (options?.[event] && isFunction(options?.[event])) {
    return options?.[event]({ options, index });
  }
@ -108,7 +109,17 @@ function handleClose(
        <i
          v-if="!options?.fullscreen"
          :class="fullscreenClass"
-          @click="fullscreen = !fullscreen"
+          @click="
+            () => {
+              fullscreen = !fullscreen;
+              eventsCallBack(
+                'fullscreenCallBack',
+                { ...options, fullscreen },
+                index,
+                true
+              );
+            }
+          "
        >
          <IconifyIconOffline
            class="pure-dialog-svg"
--- a/src/components/ReDialog/type.ts
+++ b/src/components/ReDialog/type.ts
@ -1,7 +1,12 @@
 import type { CSSProperties, VNode, Component } from "vue";

 type DoneFn = (cancel?: boolean) => void;
-type EventType = "open" | "close" | "openAutoFocus" | "closeAutoFocus";
+type EventType =
+  | "open"
+  | "close"
+  | "openAutoFocus"
+  | "closeAutoFocus"
+  | "fullscreenCallBack";
 type ArgsType = {
  /** `cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了esc键 */
  command: "cancel" | "sure" | "close";
@ -175,6 +180,14 @@ interface DialogOptions extends DialogProps {
    index: number;
    args: any;
  }) => void;
+  /** 点击全屏按钮时的回调 */
+  fullscreenCallBack?: ({
+    options,
+    index
+  }: {
+    options: DialogOptions;
+    index: number;
+  }) => void;
  /** 输入焦点聚焦在 `Dialog` 内容时的回调 */
  openAutoFocus?: ({
    options,
--- a/src/components/ReIcon/src/offlineIcon.ts
+++ b/src/components/ReIcon/src/offlineIcon.ts
@ -31,12 +31,14 @@ import Links from "@iconify-icons/ri/links-fill";
 import Search from "@iconify-icons/ri/search-line";
 import FlUser from "@iconify-icons/ri/admin-line";
 import Setting from "@iconify-icons/ri/settings-3-line";
+import BarChart from "@iconify-icons/ri/bar-chart-horizontal-line";
 import LoginLog from "@iconify-icons/ri/window-line";
 import Artboard from "@iconify-icons/ri/artboard-line";
 import SystemLog from "@iconify-icons/ri/file-search-line";
 import ListCheck from "@iconify-icons/ri/list-check";
 import UbuntuFill from "@iconify-icons/ri/ubuntu-fill";
 import OnlineUser from "@iconify-icons/ri/user-voice-line";
+import EditBoxLine from "@iconify-icons/ri/edit-box-line";
 import OperationLog from "@iconify-icons/ri/history-fill";
 import InformationLine from "@iconify-icons/ri/information-line";
 import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line";
@ -52,12 +54,14 @@ addIcon("ri:table-line", Table);
 addIcon("ri:search-line", Search);
 addIcon("ri:admin-line", FlUser);
 addIcon("ri:settings-3-line", Setting);
+addIcon("ri:bar-chart-horizontal-line", BarChart);
 addIcon("ri:window-line", LoginLog);
 addIcon("ri:file-search-line", SystemLog);
 addIcon("ri:artboard-line", Artboard);
 addIcon("ri:list-check", ListCheck);
 addIcon("ri:ubuntu-fill", UbuntuFill);
 addIcon("ri:user-voice-line", OnlineUser);
+addIcon("ri:edit-box-line", EditBoxLine);
 addIcon("ri:history-fill", OperationLog);
 addIcon("ri:information-line", InformationLine);
 addIcon("ri:terminal-window-line", TerminalWindowLine);
--- a/src/components/ReSegmented/src/index.css
+++ b/src/components/ReSegmented/src/index.css
@ -1,11 +1,104 @@
 .pure-segmented {
+  --pure-control-padding-horizontal: 12px;
+  --pure-control-padding-horizontal-sm: 8px;
+  --pure-segmented-track-padding: 2px;
+  --pure-segmented-line-width: 1px;
+
+  --pure-segmented-border-radius-small: 4px;
+  --pure-segmented-border-radius-base: 6px;
+  --pure-segmented-border-radius-large: 8px;
+
  box-sizing: border-box;
  display: inline-block;
-  padding: 2px;
-  font-size: 14px;
+  padding: var(--pure-segmented-track-padding);
+  font-size: var(--el-font-size-base);
  color: rgba(0, 0, 0, 0.65);
  background-color: rgb(0 0 0 / 4%);
-  border-radius: 2px;
+  border-radius: var(--pure-segmented-border-radius-base);
+}
+
+.pure-segmented-block {
+  display: flex;
+}
+
+.pure-segmented-block .pure-segmented-item {
+  flex: 1;
+  min-width: 0;
+}
+
+.pure-segmented-block .pure-segmented-item > .pure-segmented-item-label > span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* small */
+.pure-segmented.pure-segmented--small {
+  border-radius: var(--pure-segmented-border-radius-small);
+}
+.pure-segmented.pure-segmented--small .pure-segmented-item {
+  border-radius: var(--el-border-radius-small);
+}
+.pure-segmented.pure-segmented--small .pure-segmented-item > div {
+  min-height: calc(
+    var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2
+  );
+  line-height: calc(
+    var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2
+  );
+  padding: 0
+    calc(
+      var(--pure-control-padding-horizontal-sm) -
+        var(--pure-segmented-line-width)
+    );
+}
+
+/* large */
+.pure-segmented.pure-segmented--large {
+  border-radius: var(--pure-segmented-border-radius-large);
+}
+.pure-segmented.pure-segmented--large .pure-segmented-item {
+  border-radius: calc(
+    var(--el-border-radius-base) + var(--el-border-radius-small)
+  );
+}
+.pure-segmented.pure-segmented--large .pure-segmented-item > div {
+  min-height: calc(
+    var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2
+  );
+  line-height: calc(
+    var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2
+  );
+  padding: 0
+    calc(
+      var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width)
+    );
+  font-size: var(--el-font-size-medium);
+}
+
+/* default */
+.pure-segmented-item {
+  position: relative;
+  text-align: center;
+  cursor: pointer;
+  border-radius: var(--el-border-radius-base);
+  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.pure-segmented .pure-segmented-item > div {
+  min-height: calc(
+    var(--el-component-size) - var(--pure-segmented-track-padding) * 2
+  );
+  line-height: calc(
+    var(--el-component-size) - var(--pure-segmented-track-padding) * 2
+  );
+  padding: 0
+    calc(
+      var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width)
+    );
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: 0.1s;
 }

 .pure-segmented-group {
@ -37,23 +130,6 @@
  will-change: transform, width;
 }

-.pure-segmented-item {
-  position: relative;
-  text-align: center;
-  cursor: pointer;
-  border-radius: 4px;
-  transition: all 0.1s 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;
@ -67,6 +143,7 @@
 .pure-segmented-item-label {
  display: flex;
  align-items: center;
+  justify-content: center;
 }

 .pure-segmented-item-icon svg {
--- a/src/components/ReSegmented/src/index.tsx
+++ b/src/components/ReSegmented/src/index.tsx
@ -1,5 +1,14 @@
 import "./index.css";
+import type { OptionsType } from "./type";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import {
+  useDark,
+  isNumber,
+  isFunction,
+  useResizeObserver
+} from "@pureadmin/utils";
+import {
+  type PropType,
  h,
  ref,
  toRef,
@ -8,9 +17,6 @@ import {
  defineComponent,
  getCurrentInstance
 } from "vue";
-import type { OptionsType } from "./type";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { isFunction, isNumber, useDark } from "@pureadmin/utils";

 const props = {
  options: {
@ -22,6 +28,15 @@ const props = {
    type: undefined,
    require: false,
    default: "0"
+  },
+  /** 将宽度调整为父元素宽度	 */
+  block: {
+    type: Boolean,
+    default: false
+  },
+  /** 控件尺寸	 */
+  size: {
+    type: String as PropType<"small" | "default" | "large">
  }
 };

@ -71,12 +86,23 @@ export default defineComponent({
    function handleInit(index = curIndex.value) {
      nextTick(() => {
        const curLabelRef = instance?.proxy?.$refs[`labelRef${index}`] as ElRef;
+        if (!curLabelRef) return;
        width.value = curLabelRef.clientWidth;
        translateX.value = curLabelRef.offsetLeft;
        initStatus.value = true;
      });
    }

+    function handleResizeInit() {
+      useResizeObserver(".pure-segmented", () => {
+        nextTick(() => {
+          handleInit(curIndex.value);
+        });
+      });
+    }
+
+    props.block && handleResizeInit();
+
    watch(
      () => curIndex.value,
      index => {
@ -85,11 +111,12 @@ export default defineComponent({
        });
      },
      {
-        deep: true,
        immediate: true
      }
    );

+    watch(() => props.size, handleResizeInit);
+
    const rendLabel = () => {
      return props.options.map((option, index) => {
        return (
@ -148,7 +175,14 @@ export default defineComponent({
    };

    return () => (
-      <div class="pure-segmented">
+      <div
+        class={{
+          "pure-segmented": true,
+          "pure-segmented-block": props.block,
+          "pure-segmented--large": props.size === "large",
+          "pure-segmented--small": props.size === "small"
+        }}
+      >
        <div class="pure-segmented-group">
          <div
            class="pure-segmented-item-selected"
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@ -387,7 +387,7 @@ onUnmounted(() => removeMatchMedia);
        </li>
      </ul>

-      <span v-if="device !== 'mobile'">
+      <span v-if="useAppStoreHook().getViewportWidth > 1280">
        <p :class="['mt-5', pClass]">页宽</p>
        <Segmented
          class="mb-2 select-none"
@ -406,7 +406,7 @@ onUnmounted(() => removeMatchMedia);
        <button
          v-else
          v-ripple="{ class: 'text-gray-300' }"
-          class="bg-transparent flex-c w-full h-20 rounded-md border border-gray-100"
+          class="bg-transparent flex-c w-full h-20 rounded-md border border-[var(--pure-border-color)]"
          @click="setStretch(!settings.stretch)"
        >
          <div
--- a/src/layout/components/sidebar/centerCollapse.vue
+++ b/src/layout/components/sidebar/centerCollapse.vue
@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useGlobal } from "@pureadmin/utils";
+import { useNav } from "@/layout/hooks/useNav";
+
+import ArrowLeft from "@iconify-icons/ri/arrow-left-double-fill";
+
+interface Props {
+  isActive: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isActive: false
+});
+
+const { tooltipEffect } = useNav();
+
+const iconClass = computed(() => {
+  return ["w-[16px]", "h-[16px]"];
+});
+
+const { $storage } = useGlobal<GlobalPropertiesApi>();
+const themeColor = computed(() => $storage.layout?.themeColor);
+
+const emit = defineEmits<{
+  (e: "toggleClick"): void;
+}>();
+
+const toggleClick = () => {
+  emit("toggleClick");
+};
+</script>
+
+<template>
+  <div
+    v-tippy="{
+      content: props.isActive ? '点击折叠' : '点击展开',
+      theme: tooltipEffect,
+      hideOnClick: 'toggle',
+      placement: 'right'
+    }"
+    class="center-collapse"
+    @click="toggleClick"
+  >
+    <IconifyIconOffline
+      :icon="ArrowLeft"
+      :class="[iconClass, themeColor === 'light' ? '' : 'text-primary']"
+      :style="{ transform: props.isActive ? 'none' : 'rotateY(180deg)' }"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.center-collapse {
+  position: absolute;
+  top: 50%;
+  right: 2px;
+  z-index: 1002;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 34px;
+  cursor: pointer;
+  background: var(--el-bg-color);
+  border: 1px solid var(--pure-border-color);
+  border-radius: 4px;
+  transform: translate(12px, -50%);
+}
+</style>
--- a/src/layout/components/sidebar/leftCollapse.vue
+++ b/src/layout/components/sidebar/leftCollapse.vue
@ -41,7 +41,7 @@ const toggleClick = () => {
 </script>

 <template>
-  <div class="collapse-container">
+  <div class="left-collapse">
    <IconifyIconOffline
      v-tippy="{
        content: props.isActive ? '点击折叠' : '点击展开',
@ -58,7 +58,7 @@ const toggleClick = () => {
 </template>

 <style lang="scss" scoped>
-.collapse-container {
+.left-collapse {
  position: absolute;
  bottom: 0;
  width: 100%;
--- a/src/layout/components/sidebar/vertical.vue
+++ b/src/layout/components/sidebar/vertical.vue
@ -3,8 +3,9 @@ import Logo from "./logo.vue";
 import { useRoute } from "vue-router";
 import { emitter } from "@/utils/mitt";
 import SidebarItem from "./sidebarItem.vue";
-import leftCollapse from "./leftCollapse.vue";
+import LeftCollapse from "./leftCollapse.vue";
 import { useNav } from "@/layout/hooks/useNav";
+import CenterCollapse from "./centerCollapse.vue";
 import { responsiveStorageNameSpace } from "@/config";
 import { storageLocal, isAllEmpty } from "@pureadmin/utils";
 import { findRouteByPath, getParentPaths } from "@/router/utils";
@ -12,6 +13,7 @@ import { usePermissionStoreHook } from "@/store/modules/permission";
 import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";

 const route = useRoute();
+const isShow = ref(false);
 const showLogo = ref(
  storageLocal().getItem<StorageConfigs>(
    `${responsiveStorageNameSpace()}configure`
@ -88,6 +90,8 @@ onBeforeUnmount(() => {
  <div
    v-loading="loading"
    :class="['sidebar-container', showLogo ? 'has-logo' : 'no-logo']"
+    @mouseenter.prevent="isShow = true"
+    @mouseleave.prevent="isShow = false"
  >
    <Logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar
@ -114,7 +118,12 @@ onBeforeUnmount(() => {
        />
      </el-menu>
    </el-scrollbar>
-    <leftCollapse
+    <CenterCollapse
+      v-if="device !== 'mobile' && (isShow || isCollapse)"
+      :is-active="pureApp.sidebar.opened"
+      @toggleClick="toggleSideBar"
+    />
+    <LeftCollapse
      v-if="device !== 'mobile'"
      :is-active="pureApp.sidebar.opened"
      @toggleClick="toggleSideBar"
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@ -89,7 +89,8 @@ let isAutoCloseSidebar = true;
 useResizeObserver(appWrapperRef, entries => {
  if (isMobile) return;
  const entry = entries[0];
-  const [{ inlineSize: width }] = entry.borderBoxSize;
+  const [{ inlineSize: width, blockSize: height }] = entry.borderBoxSize;
+  useAppStoreHook().setViewportSize({ width, height });
  width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
  /** width app-wrapper类容器宽度
   * 0 < width <= 760 隐藏侧边栏
--- a/src/main.ts
+++ b/src/main.ts
@ -6,6 +6,7 @@ import { getPlatformConfig } from "./config";
 import { MotionPlugin } from "@vueuse/motion";
 import { useEcharts } from "@/plugins/echarts";
 import { createApp, type Directive } from "vue";
+import { useVxeTable } from "@/plugins/vxeTable";
 import { useElementPlus } from "@/plugins/elementPlus";
 import { injectResponsiveStorage } from "@/utils/responsive";

@ -61,6 +62,7 @@ getPlatformConfig(app).then(async config => {
    .use(useI18n)
    .use(useElementPlus)
    .use(Table)
+    .use(useVxeTable)
    .use(PureDescriptions)
    .use(useEcharts);
  app.mount("#app");
--- a/src/plugins/elementPlus.ts
+++ b/src/plugins/elementPlus.ts
@ -10,6 +10,8 @@ import {
  ElAutocomplete,
  ElAutoResizer,
  ElAvatar,
+  ElAnchor,
+  ElAnchorLink,
  ElBacktop,
  ElBadge,
  ElBreadcrumb,
@ -123,6 +125,8 @@ const components = [
  ElAutocomplete,
  ElAutoResizer,
  ElAvatar,
+  ElAnchor,
+  ElAnchorLink,
  ElBacktop,
  ElBadge,
  ElBreadcrumb,
--- a/src/plugins/vxeTable.ts
+++ b/src/plugins/vxeTable.ts
@ -0,0 +1,102 @@
+import "vxe-table/lib/style.css";
+// import "xe-utils";
+// import XEUtils from "xe-utils";
+import type { App } from "vue";
+// import { i18n } from "@/plugins/i18n";
+// import zh from "vxe-table/lib/locale/lang/zh-CN";
+// import en from "vxe-table/lib/locale/lang/en-US";
+
+import {
+  // 全局对象
+  VXETable,
+  // 表格功能
+  // Filter,
+  // Edit,
+  // Menu,
+  // Export,
+  // Keyboard,
+  // Validator,
+  // 可选组件
+  Icon,
+  Column,
+  // Colgroup,
+  // Grid,
+  // Tooltip,
+  // Toolbar,
+  // Pager,
+  // Form,
+  // FormItem,
+  // FormGather,
+  // Checkbox,
+  // CheckboxGroup,
+  // Radio,
+  // RadioGroup,
+  // RadioButton,
+  // Switch,
+  // Input,
+  // Select,
+  // Optgroup,
+  // Option,
+  // Textarea,
+  // Button,
+  // Modal,
+  // List,
+  // Pulldown,
+  // 表格
+  Table
+} from "vxe-table";
+
+// 全局默认参数
+VXETable.config({
+  // i18n: (key, args) => {
+  //   return unref(i18n.global.locale) === "zh"
+  //     ? XEUtils.toFormatString(XEUtils.get(zh, key), args)
+  //     : XEUtils.toFormatString(XEUtils.get(en, key), args);
+  // },
+  // translate(key) {
+  //   const NAMESPACED = ["el.", "buttons."];
+  //   if (key && NAMESPACED.findIndex(v => key.includes(v)) !== -1) {
+  //     return i18n.global.t.call(i18n.global.locale, key);
+  //   }
+  //   return key;
+  // }
+});
+
+export function useVxeTable(app: App) {
+  // 表格功能
+  // app.use(Filter)
+  // .use(Edit)
+  // .use(Menu)
+  // .use(Export)
+  // .use(Keyboard)
+  // .use(Validator)
+  // 可选组件
+  app
+    .use(Icon)
+    .use(Column)
+    // .use(Colgroup)
+    // .use(Grid)
+    // .use(Tooltip)
+    // .use(Toolbar)
+    // .use(Pager)
+    // .use(Form)
+    // .use(FormItem)
+    // .use(FormGather)
+    // .use(Checkbox)
+    // .use(CheckboxGroup)
+    // .use(Radio)
+    // .use(RadioGroup)
+    // .use(RadioButton)
+    // .use(Switch)
+    // .use(Input)
+    // .use(Select)
+    // .use(Optgroup)
+    // .use(Option)
+    // .use(Textarea)
+    // .use(Button)
+    // .use(Modal)
+    // .use(List)
+    // .use(Pulldown)
+    // 安装表格
+    .use(Table);
+}
--- a/src/router/enums.ts
+++ b/src/router/enums.ts
@ -1,32 +1,38 @@
 // 完整版菜单比较多，将 rank 抽离出来，在此方便维护

 const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以后端在返回 rank 的时候需要从非 0 开始
-  components = 1,
-  able = 2,
-  table = 3,
-  list = 4,
-  result = 5,
-  error = 6,
-  frame = 7,
-  nested = 8,
-  permission = 9,
-  system = 10,
-  monitor = 11,
-  tabs = 12,
-  about = 13,
-  editor = 14,
-  flowchart = 15,
-  formdesign = 16,
-  board = 17,
-  ppt = 18,
-  guide = 19,
-  menuoverflow = 20;
+  vueflow = 1,
+  ganttastic = 2,
+  components = 3,
+  able = 4,
+  table = 5,
+  form = 6,
+  list = 7,
+  result = 8,
+  error = 9,
+  frame = 10,
+  nested = 11,
+  permission = 12,
+  system = 13,
+  monitor = 14,
+  tabs = 15,
+  about = 16,
+  editor = 17,
+  flowchart = 18,
+  formdesign = 19,
+  board = 20,
+  ppt = 21,
+  guide = 22,
+  menuoverflow = 23;

 export {
  home,
+  vueflow,
+  ganttastic,
  components,
  able,
  table,
+  form,
  list,
  result,
  error,
--- a/src/router/modules/able.ts
+++ b/src/router/modules/able.ts
@ -10,6 +10,23 @@ export default {
    rank: able
  },
  children: [
+    {
+      path: "/components/mqtt-client",
+      name: "MqttClient",
+      component: () => import("@/views/able/mqtt-client.vue"),
+      meta: {
+        title: $t("menus.hsMqtt"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
+    {
+      path: "/able/verify",
+      name: "Verify",
+      component: () => import("@/views/able/verify.vue"),
+      meta: {
+        title: $t("menus.hsVerify")
+      }
+    },
    {
      path: "/able/watermark",
      name: "WaterMark",
@ -47,8 +64,7 @@ export default {
      name: "Ripple",
      component: () => import("@/views/able/ripple.vue"),
      meta: {
-        title: $t("menus.hsRipple"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.hsRipple")
      }
    },
    {
@ -79,6 +95,22 @@ export default {
        }
      }
    },
+    {
+      path: "/able/word",
+      name: "Word",
+      component: () => import("@/views/able/word.vue"),
+      meta: {
+        title: $t("menus.hsWord")
+      }
+    },
+    {
+      path: "/able/excels",
+      name: "Excels",
+      component: () => import("@/views/able/excels.vue"),
+      meta: {
+        title: $t("menus.hsExcels")
+      }
+    },
    {
      path: "/able/pdf",
      name: "Pdf",
--- a/src/router/modules/form.ts
+++ b/src/router/modules/form.ts
@ -0,0 +1,23 @@
+import { $t } from "@/plugins/i18n";
+import { form } from "@/router/enums";
+
+export default {
+  path: "/form",
+  redirect: "/form/index",
+  meta: {
+    icon: "ri:edit-box-line",
+    title: $t("menus.hsSchemaForm"),
+    rank: form
+  },
+  children: [
+    {
+      path: "/form/index",
+      name: "SchemaForm",
+      component: () => import("@/views/schema-form/index.vue"),
+      meta: {
+        title: $t("menus.hsSchemaForm"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
--- a/src/router/modules/ganttastic.ts
+++ b/src/router/modules/ganttastic.ts
@ -0,0 +1,23 @@
+import { $t } from "@/plugins/i18n";
+import { ganttastic } from "@/router/enums";
+
+export default {
+  path: "/ganttastic",
+  redirect: "/ganttastic/index",
+  meta: {
+    icon: "ri:bar-chart-horizontal-line",
+    title: $t("menus.hsGanttastic"),
+    rank: ganttastic
+  },
+  children: [
+    {
+      path: "/ganttastic/index",
+      name: "Ganttastic",
+      component: () => import("@/views/ganttastic/index.vue"),
+      meta: {
+        title: $t("menus.hsGanttastic"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
--- a/src/router/modules/table.ts
+++ b/src/router/modules/table.ts
@ -2,29 +2,47 @@ import { $t } from "@/plugins/i18n";
 import { table } from "@/router/enums";

 export default {
-  path: "/pure-table",
-  redirect: "/pure-table/index",
+  path: "/table",
+  redirect: "/table/index",
  meta: {
    icon: "ri:table-line",
-    title: "pure-admin-table",
+    title: $t("menus.hstable"),
    rank: table
  },
  children: [
    {
-      path: "/pure-table/index",
+      path: "/table/index",
      name: "PureTable",
-      component: () => import("@/views/pure-table/index.vue"),
+      component: () => import("@/views/table/index.vue"),
      meta: {
        title: $t("menus.hsPureTableBase")
      }
    },
    {
-      path: "/pure-table/high",
+      path: "/table/high",
      name: "PureTableHigh",
-      component: () => import("@/views/pure-table/high.vue"),
+      component: () => import("@/views/table/high.vue"),
      meta: {
        title: $t("menus.hsPureTableHigh")
      }
+    },
+    {
+      path: "/table/edit",
+      name: "PureTableEdit",
+      component: () => import("@/views/table/edit.vue"),
+      meta: {
+        title: $t("menus.hsPureTableEdit"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
+    {
+      path: "/table/virtual",
+      name: "VxeTable",
+      component: () => import("@/views/table/virtual.vue"),
+      meta: {
+        title: $t("menus.hsVxeTable"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
    }
  ]
 } satisfies RouteConfigsTable;
--- a/src/router/modules/vueflow.ts
+++ b/src/router/modules/vueflow.ts
@ -0,0 +1,22 @@
+import { vueflow } from "@/router/enums";
+
+export default {
+  path: "/vue-flow",
+  redirect: "/vue-flow/index",
+  meta: {
+    icon: "ep:set-up",
+    title: "vue-flow",
+    rank: vueflow
+  },
+  children: [
+    {
+      path: "/vue-flow/index",
+      name: "VueFlow",
+      component: () => import("@/views/vue-flow/layouting/index.vue"),
+      meta: {
+        title: "vue-flow",
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@ -21,6 +21,11 @@ export const useAppStore = defineStore({
        `${responsiveStorageNameSpace()}layout`
      )?.layout ?? getConfig().Layout,
    device: deviceDetection() ? "mobile" : "desktop",
+    // 浏览器窗口的可视区域大小
+    viewportSize: {
+      width: document.documentElement.clientWidth,
+      height: document.documentElement.clientHeight
+    },
    // 作用于 src/views/components/draggable/index.vue 页面，当离开页面并不会销毁 new Swap()，sortablejs 官网也没有提供任何销毁的 api
    sortSwap: false
  }),
@ -30,6 +35,12 @@ export const useAppStore = defineStore({
    },
    getDevice(state) {
      return state.device;
+    },
+    getViewportWidth(state) {
+      return state.viewportSize.width;
+    },
+    getViewportHeight(state) {
+      return state.viewportSize.height;
    }
  },
  actions: {
@ -62,6 +73,9 @@ export const useAppStore = defineStore({
    setLayout(layout) {
      this.layout = layout;
    },
+    setViewportSize(size) {
+      this.viewportSize = size;
+    },
    setSortSwap(val) {
      this.sortSwap = val;
    }
--- a/src/store/modules/types.ts
+++ b/src/store/modules/types.ts
@ -19,6 +19,7 @@ export type appType = {
  };
  layout: string;
  device: string;
+  viewportSize: { width: number; height: number };
  sortSwap: boolean;
 };

--- a/src/style/dark.scss
+++ b/src/style/dark.scss
@ -14,6 +14,67 @@ html.dark {
  /* switch关闭状态下的color 需要时可取用 */
  --pure-switch-off-color: #ffffff3f;

+  /* vxe-table */
+  --vxe-form-background-color: #151515;
+  --vxe-toolbar-background-color: #151515;
+  --vxe-pager-background-color: #151515;
+  --vxe-button-default-background-color: color.adjust(#151515, $lightness: 15%);
+  --vxe-table-header-background-color: color.adjust(#151515, $lightness: 5%);
+  --vxe-font-color: color.adjust(#c9d1d9, $lightness: -12%);
+  --vxe-table-header-font-color: #c9d1d9;
+  --vxe-table-footer-font-color: #c9d1d9;
+  --vxe-table-body-background-color: #151515;
+  --vxe-table-footer-background-color: #151515;
+  --vxe-table-row-striped-background-color: #1e1e1e;
+  --vxe-table-border-color: #303030;
+  --vxe-table-row-hover-background-color: #1e1e1e;
+  --vxe-table-row-hover-striped-background-color: color.adjust(
+    #1e1e1e,
+    $lightness: -10%
+  );
+  --vxe-table-row-current-background-color: fade(#1e1e1e, 20%);
+  --vxe-table-row-hover-current-background-color: fade(#1e1e1e, 20%);
+  --vxe-table-column-hover-background-color: fade(#1e1e1e, 20%);
+  --vxe-table-column-current-background-color: fade(#1e1e1e, 20%);
+  --vxe-table-row-checkbox-checked-background-color: fade(#1e1e1e, 15%);
+  --vxe-table-row-hover-checkbox-checked-background-color: fade(#1e1e1e, 20%);
+  --vxe-table-menu-background-color: color.adjust(#303133, $lightness: 10%);
+  --vxe-table-filter-panel-background-color: color.adjust(
+    #151515,
+    $lightness: 5%
+  );
+  --vxe-grid-maximize-background-color: #151515;
+  --vxe-pager-perfect-background-color: #151515;
+  --vxe-pager-perfect-button-background-color: color.adjust(
+    #151515,
+    $lightness: 15%
+  );
+  --vxe-input-background-color: #151515;
+  --vxe-input-border-color: #303030;
+  --vxe-select-panel-background-color: #151515;
+  --vxe-table-popup-border-color: #303030;
+  --vxe-select-option-hover-background-color: color.adjust(
+    #1e1e1e,
+    $lightness: 15%
+  );
+  --vxe-pulldown-panel-background-color: #151515;
+  --vxe-table-fixed-left-scrolling-box-shadow: 8px 0px 10px -5px #43464c;
+  --vxe-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px #43464c;
+  --vxe-loading-background-color: rgb(0 0 0 / 50%);
+  --vxe-tooltip-dark-background-color: color.adjust(#303133, $lightness: 25%);
+  --vxe-modal-header-background-color: #1e1e1e;
+  --vxe-modal-body-background-color: #303133;
+  --vxe-modal-border-color: #303030;
+  --vxe-toolbar-panel-background-color: #151515;
+  --vxe-input-disabled-color: color.adjust(#1e1e1e, $lightness: 20%);
+  --vxe-input-disabled-background-color: color.adjust(#1e1e1e, $lightness: 25%);
+  --vxe-checkbox-icon-background-color: color.adjust(#1e1e1e, $lightness: 15%);
+  --vxe-checkbox-checked-icon-border-color: #303030;
+  --vxe-checkbox-indeterminate-icon-background-color: color.adjust(
+    #1e1e1e,
+    $lightness: 15%
+  );
+
  .navbar,
  .tags-view,
  .contextmenu,
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@ -92,7 +92,7 @@
    z-index: 1001;
    width: $sideBarWidth !important;
    height: 100%;
-    overflow: hidden;
+    overflow: visible;
    font-size: 0;
    background: $menuBg;
    border-right: 1px solid var(--pure-border-color);
--- a/src/views/able/excels.vue
+++ b/src/views/able/excels.vue
@ -0,0 +1,27 @@
+<script setup lang="ts">
+import "@vue-office/excel/lib/index.css";
+import VueOfficeExcel from "@vue-office/excel";
+
+defineOptions({
+  name: "Excels"
+});
+
+const excel = "https://xiaoxian521.github.io/hyperlink/other/excel.xlsx";
+
+function renderedHandler() {
+  console.log("渲染完成");
+}
+
+function errorHandler() {
+  console.log("渲染失败");
+}
+</script>
+
+<template>
+  <vue-office-excel
+    :src="excel"
+    style="height: 100vh"
+    @rendered="renderedHandler"
+    @error="errorHandler"
+  />
+</template>
--- a/src/views/able/mqtt-client.vue
+++ b/src/views/able/mqtt-client.vue
@ -0,0 +1,392 @@
+<script setup lang="ts">
+// vue 3 + vite use MQTT.js refer to https://github.com/mqttjs/MQTT.js/issues/1269
+import * as mqtt from "mqtt/dist/mqtt.min";
+import { reactive, ref, onUnmounted } from "vue";
+
+const protocol = location.protocol === "https:" ? "wss" : "ws";
+const port = protocol === "wss" ? 8084 : 8083;
+
+// https://github.com/mqttjs/MQTT.js#qos
+const qosList = [0, 1, 2];
+
+const connection = reactive({
+  protocol,
+  host: "broker.emqx.io",
+  port,
+  clientId: "emqx_vue3_" + Math.random().toString(16).substring(2, 8),
+  username: "emqx_test",
+  password: "emqx_test",
+  clean: true,
+  connectTimeout: 30 * 1000, // ms
+  reconnectPeriod: 4000 // ms
+  // for more options and details, please refer to https://github.com/mqttjs/MQTT.js#mqttclientstreambuilder-options
+});
+
+// 订阅 topic/mqttx 主题
+const subscription = ref({
+  topic: "topic/mqttx",
+  qos: 0 as any
+});
+
+// 发布 topic/browser 主题
+const publish = ref({
+  topic: "topic/browser",
+  qos: 0 as any,
+  payload: '{ "msg": "Hello, I am browser." }'
+});
+
+let client = ref({
+  connected: false
+} as mqtt.MqttClient);
+
+const receivedMessages = ref("");
+const subscribedSuccess = ref(false);
+const btnLoadingType = ref("");
+const retryTimes = ref(0);
+
+const initData = () => {
+  client.value = {
+    connected: false
+  } as mqtt.MqttClient;
+  retryTimes.value = 0;
+  btnLoadingType.value = "";
+  subscribedSuccess.value = false;
+};
+
+const handleOnReConnect = () => {
+  retryTimes.value += 1;
+  if (retryTimes.value > 5) {
+    try {
+      client.value.end();
+      initData();
+      console.log("connection maxReconnectTimes limit, stop retry");
+    } catch (error) {
+      console.log("handleOnReConnect catch error:", error);
+    }
+  }
+};
+
+const createConnection = () => {
+  try {
+    btnLoadingType.value = "connect";
+    const { protocol, host, port, ...options } = connection;
+    const connectUrl = `${protocol}://${host}:${port}/mqtt`;
+    // 连接MQTT 服务器
+    client.value = mqtt.connect(connectUrl, options);
+
+    if (client.value.on) {
+      // https://github.com/mqttjs/MQTT.js#event-connect
+      client.value.on("connect", () => {
+        btnLoadingType.value = "";
+        console.log("connection successful");
+      });
+
+      // https://github.com/mqttjs/MQTT.js#event-reconnect
+      client.value.on("reconnect", handleOnReConnect);
+
+      // https://github.com/mqttjs/MQTT.js#event-error
+      client.value.on("error", error => {
+        console.log("connection error:", error);
+      });
+
+      // https://github.com/mqttjs/MQTT.js#event-message
+      client.value.on("message", (topic: string, message) => {
+        receivedMessages.value = receivedMessages.value.concat(
+          message.toString()
+        );
+        console.log(`received message: ${message} from topic: ${topic}`);
+      });
+    }
+  } catch (error) {
+    btnLoadingType.value = "";
+    console.log("mqtt.connect error:", error);
+  }
+};
+
+// subscribe topic
+// https://github.com/mqttjs/MQTT.js#mqttclientsubscribetopictopic-arraytopic-object-options-callback
+const doSubscribe = () => {
+  btnLoadingType.value = "subscribe";
+  const { topic, qos } = subscription.value;
+  client.value.subscribe(
+    topic,
+    { qos },
+    (error: Error, granted: mqtt.ISubscriptionGrant[]) => {
+      btnLoadingType.value = "";
+      if (error) {
+        console.log("subscribe error:", error);
+        return;
+      }
+      subscribedSuccess.value = true;
+      console.log("subscribe successfully:", granted);
+    }
+  );
+};
+
+// unsubscribe topic
+// https://github.com/mqttjs/MQTT.js#mqttclientunsubscribetopictopic-array-options-callback
+const doUnSubscribe = () => {
+  btnLoadingType.value = "unsubscribe";
+  const { topic, qos } = subscription.value;
+  client.value.unsubscribe(topic, { qos }, error => {
+    btnLoadingType.value = "";
+    subscribedSuccess.value = false;
+    if (error) {
+      console.log("unsubscribe error:", error);
+      return;
+    }
+    console.log(`unsubscribed topic: ${topic}`);
+  });
+};
+
+// publish message
+// https://github.com/mqttjs/MQTT.js#mqttclientpublishtopic-message-options-callback
+const doPublish = () => {
+  btnLoadingType.value = "publish";
+  const { topic, qos, payload } = publish.value;
+  client.value.publish(topic, payload, { qos }, error => {
+    btnLoadingType.value = "";
+    if (error) {
+      console.log("publish error:", error);
+      return;
+    }
+    console.log(`published message: ${payload}`);
+  });
+};
+
+// disconnect
+// https://github.com/mqttjs/MQTT.js#mqttclientendforce-options-callback
+const destroyConnection = () => {
+  if (client.value.connected) {
+    btnLoadingType.value = "disconnect";
+    try {
+      client.value.end(false, () => {
+        initData();
+        console.log("disconnected successfully");
+      });
+    } catch (error) {
+      btnLoadingType.value = "";
+      console.log("disconnect error:", error);
+    }
+  }
+};
+
+const handleProtocolChange = (value: string) => {
+  connection.port = value === "wss" ? 8084 : 8083;
+};
+
+onUnmounted(() => {
+  try {
+    if (client.value.end) {
+      client.value.end();
+      console.log("disconnected successfully");
+    }
+  } catch (error) {
+    console.log(error);
+  }
+});
+</script>
+
+<template>
+  <el-card shadow="never" :body-style="{ padding: '20px' }">
+    <template #header>
+      基于
+      <el-link
+        type="primary"
+        :underline="false"
+        href="https://github.com/mqttjs/MQTT.js"
+        target="_blank"
+      >
+        MQTT.js
+      </el-link>
+      和 免费的公共MQTT代理
+      <el-link
+        type="primary"
+        :underline="false"
+        href="broker.emqx.io"
+        target="_blank"
+      >
+        EMQX
+      </el-link>
+      实现的一套 MQTT 客户端。
+    </template>
+    <template #default>
+      <el-card shadow="never">
+        <h1>设置</h1>
+        <el-form label-position="top" :model="connection">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item prop="protocol" label="协议">
+                <el-select
+                  v-model="connection.protocol"
+                  @change="handleProtocolChange"
+                >
+                  <el-option label="ws://" value="ws" />
+                  <el-option label="wss://" value="wss" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="host" label="主机">
+                <el-input v-model="connection.host" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="port" label="端口">
+                <el-input
+                  v-model.number="connection.port"
+                  type="number"
+                  placeholder="8083/8084"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="clientId" label="客户端ID">
+                <el-input v-model="connection.clientId" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="username" label="用户名">
+                <el-input v-model="connection.username" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="password" label="密码">
+                <el-input v-model="connection.password" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="24">
+              <el-button
+                type="primary"
+                :disabled="client.connected"
+                :loading="btnLoadingType === 'connect'"
+                @click="createConnection"
+              >
+                {{ client.connected ? "已连接" : "连接" }}
+              </el-button>
+
+              <el-button
+                v-if="client.connected"
+                type="danger"
+                :loading="btnLoadingType === 'disconnect'"
+                @click="destroyConnection"
+              >
+                断开连接
+              </el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-card>
+      <el-card shadow="never" class="mt-4">
+        <h1>订阅</h1>
+        <el-form label-position="top" :model="subscription">
+          <el-row :gutter="20" :align="'middle'">
+            <el-col :span="8">
+              <el-form-item prop="topic" label="主题">
+                <el-input
+                  v-model="subscription.topic"
+                  :disabled="subscribedSuccess"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="qos" label="通信质量">
+                <el-select
+                  v-model="subscription.qos"
+                  :disabled="subscribedSuccess"
+                >
+                  <el-option
+                    v-for="qos in qosList"
+                    :key="qos"
+                    :label="qos"
+                    :value="qos"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <el-button
+                type="primary"
+                class="sub-btn"
+                :loading="btnLoadingType === 'subscribe'"
+                :disabled="!client.connected || subscribedSuccess"
+                @click="doSubscribe"
+              >
+                {{ subscribedSuccess ? "已订阅" : "订阅" }}
+              </el-button>
+              <el-button
+                v-if="subscribedSuccess"
+                type="primary"
+                class="sub-btn"
+                :loading="btnLoadingType === 'unsubscribe'"
+                :disabled="!client.connected"
+                @click="doUnSubscribe"
+              >
+                取消订阅
+              </el-button>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-card>
+      <el-card shadow="never" class="mt-4">
+        <h1>发布</h1>
+        <el-form label-position="top" :model="publish">
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item prop="topic">
+                <template #label>
+                  <span>主题</span>
+                  <el-text type="info" size="small">
+                    可将订阅主题设置为topic/browser，测试MQTT的自发自收。
+                  </el-text>
+                </template>
+                <el-input v-model="publish.topic" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="payload" label="有效载荷">
+                <el-input v-model="publish.payload" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="qos" label="通信质量">
+                <el-select v-model="publish.qos">
+                  <el-option
+                    v-for="qos in qosList"
+                    :key="qos"
+                    :label="qos"
+                    :value="qos"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-col :span="24">
+          <el-button
+            type="primary"
+            :loading="btnLoadingType === 'publish'"
+            :disabled="!client.connected"
+            @click="doPublish"
+          >
+            发布
+          </el-button>
+        </el-col>
+      </el-card>
+      <el-card shadow="never" class="mt-4">
+        <h1>接收</h1>
+        <el-col :span="24">
+          <el-input
+            v-model="receivedMessages"
+            type="textarea"
+            :rows="3"
+            readonly
+          />
+        </el-col>
+      </el-card>
+    </template>
+  </el-card>
+</template>
--- a/src/views/able/verify.vue
+++ b/src/views/able/verify.vue
@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Vcode from "vue3-puzzle-vcode";
+
+const isShow = ref(true);
+
+function onSuccess() {
+  console.log("验证成功");
+}
+
+function onFail() {
+  console.log("验证失败");
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="font-medium">
+        拼图人机验证、右滑拼图验证（
+        <el-link
+          href="https://github.com/javaLuo/vue-puzzle-vcode/tree/vue3"
+          target="_blank"
+          style="margin: 0 5px 4px 0; font-size: 16px"
+        >
+          github地址
+        </el-link>
+        ）
+      </div>
+    </template>
+    <div class="bg-[rgba(15,23,42,0.2)] p-6 w-[360px]">
+      <Vcode :show="isShow" type="inside" @fail="onFail" @success="onSuccess" />
+    </div>
+  </el-card>
+</template>
--- a/src/views/able/word.vue
+++ b/src/views/able/word.vue
@ -0,0 +1,18 @@
+<script setup lang="ts">
+import "@vue-office/docx/lib/index.css";
+import VueOfficeDocx from "@vue-office/docx";
+
+defineOptions({
+  name: "Word"
+});
+
+const docx = "https://xiaoxian521.github.io/hyperlink/other/word.docx";
+
+function rendered() {
+  console.log("渲染完成");
+}
+</script>
+
+<template>
+  <vue-office-docx :src="docx" @rendered="rendered" />
+</template>
--- a/src/views/components/check-card.vue
+++ b/src/views/components/check-card.vue
@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 // https://plus-pro-components.com/components/check-card-group.html
-import { PlusCheckCardGroup } from "plus-pro-components";
 import "plus-pro-components/es/components/check-card-group/style/css";
+import { PlusCheckCardGroup } from "plus-pro-components";

 defineOptions({
  name: "CheckCard"
--- a/src/views/components/dialog/index.vue
+++ b/src/views/components/dialog/index.vue
@ -43,9 +43,11 @@ function onFullscreenClick() {

 function onFullscreenIconClick() {
  addDialog({
-    title: "全屏按钮",
+    title: "全屏按钮和全屏事件",
    fullscreenIcon: true,
-    contentRenderer: () => <p>弹框内容-全屏按钮</p>
+    fullscreenCallBack: ({ options, index }) =>
+      message(options.fullscreen ? "全屏" : "非全屏"),
+    contentRenderer: () => <p>弹框内容-全屏按钮和全屏事件</p>
  });
 }

@ -468,7 +470,7 @@ function onBeforeSureClick() {
      <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="onFullscreenIconClick"> 全屏按钮和全屏事件 </el-button>
      <el-button @click="onModalClick"> 无背景遮罩层 </el-button>
      <el-button @click="onStyleClick"> 自定义弹出位置 </el-button>
      <el-button @click="onoOpenDelayClick"> 延时2秒打开弹框 </el-button>
--- a/src/views/components/segmented.vue
+++ b/src/views/components/segmented.vue
@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { h, ref } from "vue";
+import { h, ref, watch } from "vue";
 import { message } from "@/utils/message";
 import HomeFilled from "@iconify-icons/ep/home-filled";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
@ -11,6 +11,8 @@ defineOptions({

 /** 基础用法 */
 const value = ref(4); // 必须为number类型
+const size = ref("default");
+const dynamicSize = ref();

 const optionsBasis: Array<OptionsType> = [
  {
@ -75,6 +77,26 @@ const optionsDisabled: Array<OptionsType> = [
  }
 ];

+/** block */
+const optionsBlock: Array<OptionsType> = [
+  {
+    label: "周一"
+  },
+  {
+    label: "周二"
+  },
+  {
+    label: "周三"
+  },
+  {
+    label: "周四"
+  },
+  {
+    label: "周五喜悦，收尾归档，周末倒计时",
+    tip: "周五喜悦，收尾归档，周末倒计时"
+  }
+];
+
 /** 可设置图标 */
 const optionsIcon: Array<OptionsType> = [
  {
@ -172,13 +194,22 @@ function onChange({ index, option }) {
    type: "success"
  });
 }
+
+watch(size, val => (dynamicSize.value = size.value));
 </script>

 <template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
-        <span class="font-medium">分段控制器</span>
+        <el-space wrap :size="40">
+          <span style="font-size: 16px; font-weight: 800"> 分段控制器 </span>
+          <el-radio-group v-model="size" size="small">
+            <el-radio value="large">大尺寸</el-radio>
+            <el-radio value="default">默认尺寸</el-radio>
+            <el-radio value="small">小尺寸</el-radio>
+          </el-radio-group>
+        </el-space>
      </div>
    </template>
    <el-scrollbar>
@ -187,25 +218,32 @@ function onChange({ index, option }) {
          {{ optionsBasis[value].label }}
        </span>
      </p>
-      <Segmented v-model="value" :options="optionsBasis" />
+      <Segmented v-model="value" :options="optionsBasis" :size="dynamicSize" />
      <el-divider />
      <p class="mb-2">tooltip 提示</p>
-      <Segmented :options="optionsTooltip" />
+      <Segmented :options="optionsTooltip" :size="dynamicSize" />
      <el-divider />
      <p class="mb-2">change 事件</p>
-      <Segmented :options="optionsChange" @change="onChange" />
+      <Segmented
+        :options="optionsChange"
+        :size="dynamicSize"
+        @change="onChange"
+      />
      <el-divider />
      <p class="mb-2">禁用</p>
-      <Segmented :options="optionsDisabled" />
+      <Segmented :options="optionsDisabled" :size="dynamicSize" />
+      <el-divider />
+      <p class="mb-2">block 属性(将宽度调整为父元素宽度)</p>
+      <Segmented :options="optionsBlock" block :size="dynamicSize" />
      <el-divider />
      <p class="mb-2">可设置图标</p>
-      <Segmented :options="optionsIcon" />
+      <Segmented :options="optionsIcon" :size="dynamicSize" />
      <el-divider />
      <p class="mb-2">只设置图标</p>
-      <Segmented :options="optionsOnlyIcon" />
+      <Segmented :options="optionsOnlyIcon" :size="dynamicSize" />
      <el-divider />
      <p class="mb-2">自定义渲染</p>
-      <Segmented :options="optionsLabel" />
+      <Segmented :options="optionsLabel" :size="dynamicSize" />
    </el-scrollbar>
  </el-card>
 </template>
--- a/src/views/ganttastic/index.vue
+++ b/src/views/ganttastic/index.vue
@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// https://zunnzunn.github.io/vue-ganttastic/introduction.html
+import { GGanttChart, GGanttRow } from "@infectoone/vue-ganttastic";
+
+const context = ref([
+  [
+    {
+      week: "星期一",
+      beginDate: "06:00",
+      endDate: "22:00",
+      ganttBarConfig: {
+        id: "0",
+        hasHandles: true,
+        label: "需求收集和分析  负责人：小张",
+        style: {
+          background: "#e96560"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期二",
+      beginDate: "09:00",
+      endDate: "18:00",
+      ganttBarConfig: {
+        id: "1",
+        hasHandles: true,
+        label: "系统设计  负责人：小强",
+        style: {
+          background: "#5ccfa3"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期三",
+      beginDate: "07:00",
+      endDate: "20:00",
+      ganttBarConfig: {
+        id: "2",
+        hasHandles: true,
+        label: "编码实现  负责人：老李",
+        style: {
+          background: "#77d6fa"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期四",
+      beginDate: "06:00",
+      endDate: "21:00",
+      ganttBarConfig: {
+        id: "3",
+        hasHandles: true,
+        label: "编码实现  负责人：小明",
+        style: {
+          color: "#fff",
+          background: "#1b2a47"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期五",
+      beginDate: "05:00",
+      endDate: "19:00",
+      ganttBarConfig: {
+        id: "4",
+        hasHandles: true,
+        label: "内部测试  负责人：小雪",
+        style: {
+          background: "#5ccfa3"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期六",
+      beginDate: "10:00",
+      endDate: "22:00",
+      ganttBarConfig: {
+        id: "5",
+        hasHandles: true,
+        label: "系统优化和文档整理  负责人：小欣",
+        style: {
+          background: "#f8bc45"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期天",
+      beginDate: "04:00",
+      endDate: "23:59",
+      ganttBarConfig: {
+        id: "6",
+        immobile: false,
+        hasHandles: false,
+        label: "部署和上线  负责人：老王",
+        style: {
+          background: "#f3953d"
+        }
+      }
+    }
+  ]
+]);
+
+function getWeekRange() {
+  const today = new Date();
+  const dayOfWeek = today.getDay();
+
+  const startDate = new Date(today);
+  startDate.setDate(today.getDate() - dayOfWeek + 1);
+
+  const endDate = new Date(startDate);
+  endDate.setDate(startDate.getDate() + 6);
+
+  const formatDate = date => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  };
+
+  const currentWeekStart = formatDate(startDate);
+  const currentWeekEnd = formatDate(endDate);
+
+  return {
+    currentWeekStart,
+    currentWeekEnd
+  };
+}
+
+const weekRangeInChina = getWeekRange();
+</script>
+
+<template>
+  <g-gantt-chart
+    chart-start="00:00"
+    chart-end="23:59"
+    precision="hour"
+    date-format="HH:mm"
+    bar-start="beginDate"
+    bar-end="endDate"
+    grid
+  >
+    <template #upper-timeunit>
+      <h1>
+        {{
+          `${weekRangeInChina.currentWeekStart} / ${weekRangeInChina.currentWeekEnd}`
+        }}
+      </h1>
+    </template>
+    <g-gantt-row
+      v-for="(item, index) in context"
+      :key="index"
+      :bars="item"
+      :label="item[0].week"
+      highlight-on-hover
+    />
+  </g-gantt-chart>
+</template>
--- a/src/views/monitor/logs/login/index.vue
+++ b/src/views/monitor/logs/login/index.vue
@ -39,7 +39,7 @@ const {
      ref="formRef"
      :inline="true"
      :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
--- a/src/views/monitor/logs/operation/index.vue
+++ b/src/views/monitor/logs/operation/index.vue
@ -39,7 +39,7 @@ const {
      ref="formRef"
      :inline="true"
      :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item label="所属模块" prop="module">
        <el-input
--- a/src/views/monitor/logs/system/index.vue
+++ b/src/views/monitor/logs/system/index.vue
@ -42,7 +42,7 @@ const {
      ref="formRef"
      :inline="true"
      :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item label="所属模块" prop="module">
        <el-input
--- a/src/views/monitor/online/index.vue
+++ b/src/views/monitor/online/index.vue
@ -33,7 +33,7 @@ const {
      ref="formRef"
      :inline="true"
      :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
--- a/src/views/pure-table/high/edit/columns.tsx
+++ b/src/views/pure-table/high/edit/columns.tsx
@ -1,133 +0,0 @@
-import { tableDataEdit } from "../data";
-import { message } from "@/utils/message";
-import { ref, computed, Transition } from "vue";
-import { clone, delay } from "@pureadmin/utils";
-import EditPen from "@iconify-icons/ep/edit-pen";
-import Check from "@iconify-icons/ep/check";
-
-// 温馨提示：修改整行方法雷同，将cellRenderer后面渲染的组件抽出来做对应处理即可
-export function useColumns() {
-  // 修改值（可多个）
-  const inputValMap = ref({});
-  // 是否正处于修改状态（可多个）
-  const editStatus = ref({});
-  // 当前激活的单元格（唯一）
-  const activeIndex = ref(-1);
-  const dataList = ref(clone(tableDataEdit, true));
-
-  const comVal = computed(() => {
-    return index => {
-      return inputValMap.value[index]?.value;
-    };
-  });
-
-  const editing = computed(() => {
-    return index => {
-      return editStatus.value[index]?.editing;
-    };
-  });
-
-  const iconClass = computed(() => {
-    return (index, other = false) => {
-      return [
-        "cursor-pointer",
-        "ml-2",
-        "transition",
-        "delay-100",
-        other
-          ? ["hover:scale-110", "hover:text-red-500"]
-          : editing.value(index) && ["scale-150", "text-red-500"]
-      ];
-    };
-  });
-
-  const columns: TableColumnList = [
-    {
-      label: "ID（可修改）",
-      prop: "id",
-      // class="flex-bc" flex-bc 代表 flex justify-between items-center 具体看 src/style/tailwind.css 文件
-      cellRenderer: ({ row, index }) => (
-        <div
-          class="flex-bc w-full h-[32px]"
-          onMouseenter={() => (activeIndex.value = index)}
-          onMouseleave={() => onMouseleave(index)}
-        >
-          <p v-show={!editing.value(index)}>{row.id}</p>
-          <Transition enter-active-class="animate__animated animate__fadeInUp animate__faster">
-            <el-input
-              v-show={editing.value(index)}
-              modelValue={comVal.value(index)}
-              onInput={value => onChange(value, index)}
-            />
-          </Transition>
-          <iconify-icon-offline
-            v-show={editing.value(index)}
-            icon={Check}
-            class={iconClass.value(index)}
-            onClick={() => onSure(index)}
-          />
-          <iconify-icon-offline
-            v-show={activeIndex.value === index && !editing.value(index)}
-            icon={EditPen}
-            class={iconClass.value(index, true)}
-            onClick={() => onEdit(row, index)}
-          />
-        </div>
-      )
-    },
-    {
-      label: "日期",
-      prop: "date"
-    },
-    {
-      label: "姓名",
-      prop: "name"
-    },
-    {
-      label: "地址",
-      prop: "address"
-    }
-  ];
-
-  function onEdit({ id }, index) {
-    inputValMap.value[index] = Object.assign({}, inputValMap.value[index], {
-      value: id
-    });
-    // 处于修改状态
-    editStatus.value[index] = Object.assign({}, editStatus.value[index], {
-      editing: true
-    });
-  }
-
-  function onMouseleave(index) {
-    inputValMap.value[index]?.value
-      ? (activeIndex.value = index)
-      : (activeIndex.value = -1);
-  }
-
-  function onChange(value, index) {
-    inputValMap.value[index].value = value;
-  }
-
-  function onSure(index) {
-    dataList.value[index].id = inputValMap.value[index].value;
-    message(
-      `您修改了第 ${index + 1} 行，修改后数据为：${JSON.stringify(
-        dataList.value[index]
-      )}`,
-      {
-        type: "success"
-      }
-    );
-    // 修改状态关闭
-    editStatus.value[index] = Object.assign({}, editStatus.value[index], {
-      editing: false
-    });
-    delay().then(() => (inputValMap.value[index].value = null));
-  }
-
-  return {
-    columns,
-    dataList
-  };
-}
--- a/src/views/pure-table/high/edit/index.vue
+++ b/src/views/pure-table/high/edit/index.vue
@ -1,9 +0,0 @@
-<script setup lang="ts">
-import { useColumns } from "./columns";
-
-const { columns, dataList } = useColumns();
-</script>
-
-<template>
-  <pure-table row-key="id" border :data="dataList" :columns="columns" />
-</template>
--- a/src/views/schema-form/form/base.vue
+++ b/src/views/schema-form/form/base.vue
@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// https://plus-pro-components.com/components/form.html
+import "plus-pro-components/es/components/form/style/css";
+import {
+  type PlusColumn,
+  type FieldValues,
+  PlusForm
+} from "plus-pro-components";
+
+const state = ref<FieldValues>({
+  status: "1",
+  name: "",
+  rate: 4,
+  progress: 100,
+  switch: true,
+  time: new Date().toString(),
+  endTime: []
+});
+
+const rules = {
+  name: [
+    {
+      required: true,
+      message: "请输入名称"
+    }
+  ]
+};
+
+const columns: PlusColumn[] = [
+  {
+    label: "名称",
+    width: 120,
+    prop: "name",
+    valueType: "copy",
+    tooltip: "我是名称"
+  },
+  {
+    label: "状态",
+    width: 120,
+    prop: "status",
+    valueType: "select",
+    options: [
+      {
+        label: "未解决",
+        value: "0",
+        color: "red"
+      },
+      {
+        label: "已解决",
+        value: "1",
+        color: "blue"
+      },
+      {
+        label: "解决中",
+        value: "2",
+        color: "yellow"
+      },
+      {
+        label: "失败",
+        value: "3",
+        color: "red"
+      }
+    ]
+  },
+  {
+    label: "执行进度",
+    width: 200,
+    prop: "progress"
+  },
+  {
+    label: "评分",
+    width: 200,
+    prop: "rate",
+    valueType: "rate"
+  },
+  {
+    label: "是否显示",
+    width: 100,
+    prop: "switch",
+    valueType: "switch"
+  },
+  {
+    label: "时间",
+    prop: "time",
+    valueType: "date-picker"
+  },
+  {
+    label: "数量",
+    prop: "number",
+    valueType: "input-number",
+    fieldProps: { precision: 2, step: 2 }
+  },
+  {
+    label: "梦想",
+    prop: "gift",
+    valueType: "radio",
+    options: [
+      {
+        label: "诗",
+        value: "0"
+      },
+      {
+        label: "远方",
+        value: "1"
+      },
+      {
+        label: "美食",
+        value: "2"
+      }
+    ]
+  },
+  {
+    label: "到期时间",
+    prop: "endTime",
+    valueType: "date-picker",
+    fieldProps: {
+      type: "datetimerange",
+      startPlaceholder: "请选择开始时间",
+      endPlaceholder: "请选择结束时间"
+    }
+  },
+  {
+    label: "说明",
+    prop: "desc",
+    valueType: "textarea",
+    fieldProps: {
+      maxlength: 10,
+      showWordLimit: true,
+      // @ts-expect-error
+      autosize: { minRows: 2, maxRows: 4 }
+    }
+  }
+];
+
+const handleChange = (values: FieldValues, prop: PlusColumn) => {
+  console.log(values, prop, "change");
+};
+const handleSubmit = (values: FieldValues) => {
+  console.log(values, "Submit");
+};
+const handleSubmitError = (err: any) => {
+  console.log(err, "err");
+};
+const handleReset = () => {
+  console.log("handleReset");
+};
+</script>
+
+<template>
+  <PlusForm
+    v-model="state"
+    class="w-[450px] m-auto"
+    :columns="columns"
+    :rules="rules"
+    label-position="right"
+    @change="handleChange"
+    @submit="handleSubmit"
+    @submit-error="handleSubmitError"
+    @reset="handleReset"
+  />
+</template>
--- a/src/views/schema-form/form/dialog.vue
+++ b/src/views/schema-form/form/dialog.vue
@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// https://plus-pro-components.com/components/dialog-form.html
+import "plus-pro-components/es/components/dialog-form/style/css";
+import {
+  type PlusColumn,
+  type FieldValues,
+  PlusDialogForm
+} from "plus-pro-components";
+
+const columns: PlusColumn[] = [
+  {
+    label: "名称",
+    width: 120,
+    prop: "name",
+    valueType: "copy",
+    tooltip: "名称最多显示6个字符"
+  },
+  {
+    label: "状态",
+    width: 120,
+    prop: "status",
+    valueType: "select",
+    options: [
+      {
+        label: "未解决",
+        value: "0",
+        color: "red"
+      },
+      {
+        label: "已解决",
+        value: "1",
+        color: "blue"
+      },
+      {
+        label: "解决中",
+        value: "2",
+        color: "yellow"
+      },
+      {
+        label: "失败",
+        value: "3",
+        color: "red"
+      }
+    ]
+  },
+  {
+    label: "是否显示",
+    width: 100,
+    prop: "switch",
+    valueType: "switch"
+  },
+
+  {
+    label: "时间",
+    prop: "time",
+    valueType: "date-picker"
+  },
+  {
+    label: "数量",
+    prop: "number",
+    valueType: "input-number",
+    fieldProps: { precision: 2, step: 2 }
+  },
+  {
+    label: "城市",
+    prop: "city",
+    valueType: "cascader",
+    options: [
+      {
+        value: "0",
+        label: "陕西",
+        children: [
+          {
+            value: "0-0",
+            label: "西安",
+            children: [
+              {
+                value: "0-0-0",
+                label: "新城区"
+              },
+              {
+                value: "0-0-1",
+                label: "高新区"
+              },
+              {
+                value: "0-0-2",
+                label: "灞桥区"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        value: "1",
+        label: "山西",
+        children: [
+          {
+            value: "1-0",
+            label: "太原",
+            children: [
+              {
+                value: "1-0-0",
+                label: "小店区"
+              },
+              {
+                value: "1-0-1",
+                label: "古交市"
+              },
+              {
+                value: "1-0-2",
+                label: "万柏林区"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: "地区",
+    prop: "place",
+    tooltip: "请精确到门牌号",
+    fieldProps: {
+      placeholder: "请精确到门牌号"
+    }
+  },
+  {
+    label: "要求",
+    prop: "demand",
+    valueType: "checkbox",
+    options: [
+      {
+        label: "四六级",
+        value: "0"
+      },
+      {
+        label: "计算机二级证书",
+        value: "1"
+      },
+      {
+        label: "普通话证书",
+        value: "2"
+      }
+    ]
+  },
+  {
+    label: "梦想",
+    prop: "gift",
+    valueType: "radio",
+    options: [
+      {
+        label: "诗",
+        value: "0"
+      },
+      {
+        label: "远方",
+        value: "1"
+      },
+      {
+        label: "美食",
+        value: "2"
+      }
+    ]
+  },
+  {
+    label: "到期时间",
+    prop: "endTime",
+    valueType: "date-picker",
+    fieldProps: {
+      type: "datetimerange",
+      startPlaceholder: "请选择开始时间",
+      endPlaceholder: "请选择结束时间"
+    }
+  },
+  {
+    label: "说明",
+    prop: "desc",
+    valueType: "textarea",
+    fieldProps: {
+      maxlength: 10,
+      showWordLimit: true,
+      // @ts-expect-error
+      autosize: { minRows: 2, maxRows: 4 }
+    }
+  }
+];
+
+const visible = ref(false);
+const values = ref<FieldValues>({});
+
+const handleOpen = () => {
+  visible.value = true;
+};
+</script>
+
+<template>
+  <div>
+    <el-button @click="handleOpen">打开弹窗表单</el-button>
+    <PlusDialogForm
+      v-model:visible="visible"
+      v-model="values"
+      :form="{ columns }"
+    />
+  </div>
+</template>
--- a/src/views/schema-form/form/drawer.vue
+++ b/src/views/schema-form/form/drawer.vue
@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// https://plus-pro-components.com/components/drawer-form.html
+import "plus-pro-components/es/components/drawer-form/style/css";
+import {
+  type PlusColumn,
+  type FieldValues,
+  PlusDrawerForm
+} from "plus-pro-components";
+
+const columns: PlusColumn[] = [
+  {
+    label: "名称",
+    width: 120,
+    prop: "name",
+    valueType: "copy",
+    tooltip: "名称最多显示6个字符"
+  },
+  {
+    label: "状态",
+    width: 120,
+    prop: "status",
+    valueType: "select",
+    options: [
+      {
+        label: "未解决",
+        value: "0",
+        color: "red"
+      },
+      {
+        label: "已解决",
+        value: "1",
+        color: "blue"
+      },
+      {
+        label: "解决中",
+        value: "2",
+        color: "yellow"
+      },
+      {
+        label: "失败",
+        value: "3",
+        color: "red"
+      }
+    ]
+  },
+  {
+    label: "是否显示",
+    width: 100,
+    prop: "switch",
+    valueType: "switch"
+  },
+
+  {
+    label: "时间",
+    prop: "time",
+    valueType: "date-picker"
+  },
+  {
+    label: "数量",
+    prop: "number",
+    valueType: "input-number",
+    fieldProps: { precision: 2, step: 2 }
+  },
+  {
+    label: "城市",
+    prop: "city",
+    valueType: "cascader",
+    options: [
+      {
+        value: "0",
+        label: "陕西",
+        children: [
+          {
+            value: "0-0",
+            label: "西安",
+            children: [
+              {
+                value: "0-0-0",
+                label: "新城区"
+              },
+              {
+                value: "0-0-1",
+                label: "高新区"
+              },
+              {
+                value: "0-0-2",
+                label: "灞桥区"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        value: "1",
+        label: "山西",
+        children: [
+          {
+            value: "1-0",
+            label: "太原",
+            children: [
+              {
+                value: "1-0-0",
+                label: "小店区"
+              },
+              {
+                value: "1-0-1",
+                label: "古交市"
+              },
+              {
+                value: "1-0-2",
+                label: "万柏林区"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: "地区",
+    prop: "place",
+    tooltip: "请精确到门牌号",
+    fieldProps: {
+      placeholder: "请精确到门牌号"
+    }
+  },
+  {
+    label: "要求",
+    prop: "demand",
+    valueType: "checkbox",
+    options: [
+      {
+        label: "四六级",
+        value: "0"
+      },
+      {
+        label: "计算机二级证书",
+        value: "1"
+      },
+      {
+        label: "普通话证书",
+        value: "2"
+      }
+    ]
+  },
+  {
+    label: "梦想",
+    prop: "gift",
+    valueType: "radio",
+    options: [
+      {
+        label: "诗",
+        value: "0"
+      },
+      {
+        label: "远方",
+        value: "1"
+      },
+      {
+        label: "美食",
+        value: "2"
+      }
+    ]
+  },
+  {
+    label: "到期时间",
+    prop: "endTime",
+    valueType: "date-picker",
+    fieldProps: {
+      type: "datetimerange",
+      startPlaceholder: "请选择开始时间",
+      endPlaceholder: "请选择结束时间"
+    }
+  },
+  {
+    label: "说明",
+    prop: "desc",
+    valueType: "textarea",
+    fieldProps: {
+      maxlength: 10,
+      showWordLimit: true,
+      // @ts-expect-error
+      autosize: { minRows: 2, maxRows: 4 }
+    }
+  }
+];
+
+const visible = ref(false);
+const values = ref<FieldValues>({});
+
+const handleOpen = () => {
+  visible.value = true;
+};
+</script>
+
+<template>
+  <div>
+    <el-button @click="handleOpen">打开抽屉表单</el-button>
+    <PlusDrawerForm
+      v-model:visible="visible"
+      v-model="values"
+      :form="{ columns }"
+    />
+  </div>
+</template>
--- a/src/views/schema-form/form/search.vue
+++ b/src/views/schema-form/form/search.vue
@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// https://plus-pro-components.com/components/search.html
+import "plus-pro-components/es/components/search/style/css";
+import { type PlusColumn, PlusSearch } from "plus-pro-components";
+
+const state = ref({
+  status: "0",
+  time: new Date().toString()
+});
+
+const columns: PlusColumn[] = [
+  {
+    label: "名称",
+    prop: "name",
+    valueType: "copy",
+    tooltip: "名称最多显示6个字符"
+  },
+  {
+    label: "状态",
+    prop: "status",
+    valueType: "select",
+    options: [
+      {
+        label: "未解决",
+        value: "0",
+        color: "red"
+      },
+      {
+        label: "已解决",
+        value: "1",
+        color: "blue"
+      },
+      {
+        label: "解决中",
+        value: "2",
+        color: "yellow"
+      },
+      {
+        label: "失败",
+        value: "3",
+        color: "red"
+      }
+    ]
+  },
+  {
+    label: "时间",
+    prop: "time",
+    valueType: "date-picker"
+  },
+  {
+    label: "数量",
+    prop: "number",
+    valueType: "input-number",
+    fieldProps: { precision: 2, step: 2 }
+  },
+  {
+    label: "城市",
+    prop: "city",
+    valueType: "cascader",
+    options: [
+      {
+        value: "0",
+        label: "陕西",
+        children: [
+          {
+            value: "0-0",
+            label: "西安",
+            children: [
+              {
+                value: "0-0-0",
+                label: "新城区"
+              },
+              {
+                value: "0-0-1",
+                label: "高新区"
+              },
+              {
+                value: "0-0-2",
+                label: "灞桥区"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        value: "1",
+        label: "山西",
+        children: [
+          {
+            value: "1-0",
+            label: "太原",
+            children: [
+              {
+                value: "1-0-0",
+                label: "小店区"
+              },
+              {
+                value: "1-0-1",
+                label: "古交市"
+              },
+              {
+                value: "1-0-2",
+                label: "万柏林区"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: "地区",
+    prop: "place",
+    tooltip: "请精确到门牌号",
+    fieldProps: {
+      placeholder: "请精确到门牌号"
+    }
+  },
+  {
+    label: "到期时间",
+    prop: "endTime",
+    valueType: "date-picker",
+    fieldProps: {
+      type: "datetimerange",
+      startPlaceholder: "请选择",
+      endPlaceholder: "请选择"
+    }
+  },
+  {
+    label: "奖励",
+    prop: "price"
+  },
+  {
+    label: "提成",
+    prop: "percentage"
+  }
+];
+
+const handleChange = (values: any) => {
+  console.log(values, "change");
+};
+const handleSearch = (values: any) => {
+  console.log(values, "search");
+};
+const handleRest = () => {
+  console.log("handleRest");
+};
+</script>
+
+<template>
+  <PlusSearch
+    v-model="state"
+    :columns="columns"
+    :show-number="2"
+    label-width="80"
+    label-position="right"
+    @change="handleChange"
+    @search="handleSearch"
+    @reset="handleRest"
+  />
+</template>
--- a/src/views/schema-form/form/steps.vue
+++ b/src/views/schema-form/form/steps.vue
@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// https://plus-pro-components.com/components/steps-form.html
+import "plus-pro-components/es/components/steps-form/style/css";
+import { PlusStepsForm } from "plus-pro-components";
+
+const stepForm = ref([
+  {
+    title: "第一步",
+    form: {
+      labelPosition: "top",
+      style: {
+        width: "400px",
+        margin: "40px auto"
+      },
+      modelValue: {},
+      columns: [
+        {
+          label: "名称",
+          width: 120,
+          prop: "name",
+          valueType: "copy",
+          tooltip: "名称最多显示6个字符"
+        },
+        {
+          label: "状态",
+          width: 120,
+          prop: "status",
+          valueType: "select",
+          options: [
+            {
+              label: "未解决",
+              value: "0",
+              color: "red"
+            },
+            {
+              label: "已解决",
+              value: "1",
+              color: "blue"
+            },
+            {
+              label: "解决中",
+              value: "2",
+              color: "yellow"
+            },
+            {
+              label: "失败",
+              value: "3",
+              color: "red"
+            }
+          ]
+        }
+      ],
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入名称"
+          }
+        ]
+      }
+    }
+  },
+  {
+    title: "第二步",
+    form: {
+      labelPosition: "top",
+      style: {
+        width: "400px",
+        margin: "40px auto"
+      },
+      labelWidth: "100",
+      modelValue: {},
+      columns: [
+        {
+          label: "标签",
+          width: 120,
+          prop: "tag"
+        },
+        {
+          label: "执行进度",
+          width: 200,
+          prop: "progress"
+        },
+        {
+          label: "评分",
+          width: 200,
+          prop: "rate",
+          valueType: "rate"
+        },
+        {
+          label: "是否显示",
+          width: 100,
+          prop: "switch",
+          valueType: "switch"
+        }
+      ],
+      rules: {
+        tag: [
+          {
+            required: true,
+            message: "请输入标签"
+          }
+        ],
+        progress: [
+          {
+            required: true,
+            message: "请输入执行进度"
+          }
+        ]
+      }
+    }
+  },
+  {
+    title: "第三步",
+    form: {
+      labelPosition: "top",
+      style: {
+        width: "400px",
+        margin: "40px auto"
+      },
+      modelValue: {},
+      columns: [
+        {
+          label: "时间",
+          prop: "time",
+          valueType: "date-picker"
+        },
+        {
+          label: "要求",
+          prop: "demand",
+          valueType: "checkbox",
+          options: [
+            {
+              label: "四六级",
+              value: "0"
+            },
+            {
+              label: "计算机二级证书",
+              value: "1"
+            },
+            {
+              label: "普通话证书",
+              value: "2"
+            }
+          ]
+        },
+        {
+          label: "奖励",
+          prop: "price"
+        },
+        {
+          label: "提成",
+          prop: "percentage"
+        },
+        {
+          label: "说明",
+          prop: "desc",
+          valueType: "textarea",
+          fieldProps: {
+            maxlength: 10,
+            showWordLimit: true,
+            autosize: { minRows: 2, maxRows: 4 }
+          }
+        }
+      ],
+      rules: {
+        time: [
+          {
+            required: true,
+            trigger: "change",
+            message: "请选择时间"
+          }
+        ],
+        demand: [
+          {
+            required: true,
+            trigger: "change",
+            message: "请选择要求"
+          }
+        ]
+      }
+    }
+  }
+]);
+
+const active = ref(1);
+
+const next = (actives: number, values: any) => {
+  active.value = actives;
+  console.log(active, values, stepForm.value);
+};
+</script>
+
+<template>
+  <PlusStepsForm
+    v-model="active"
+    simple
+    class="w-[800px] m-auto"
+    :data="stepForm"
+    align-center
+    @next="next"
+  />
+</template>
--- a/src/views/schema-form/index.vue
+++ b/src/views/schema-form/index.vue
@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { list } from "./list";
+
+defineOptions({
+  name: "SchemaForm"
+});
+
+const selected = ref(0);
+
+function tabClick({ index }) {
+  selected.value = index;
+}
+</script>
+
+<template>
+  <el-card shadow="never" :body-style="{ height: 'calc(100vh - 180px)' }">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          JSON 格式配置表单，采用优秀开源的
+          <el-link
+            href="https://plus-pro-components.com/components/form.html"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            PlusProComponents
+          </el-link>
+          ，维护整体表单只需操作 columns 配置即可
+        </span>
+      </div>
+    </template>
+
+    <el-tabs @tab-click="tabClick">
+      <template v-for="(item, index) of list" :key="item.key">
+        <el-tab-pane :lazy="true">
+          <template #label>
+            <el-tooltip
+              :content="`（第 ${index + 1} 个示例）${item.content}`"
+              placement="top-end"
+            >
+              <span>{{ item.title }}</span>
+            </el-tooltip>
+          </template>
+          <component :is="item.component" v-if="selected == index" />
+        </el-tab-pane>
+      </template>
+    </el-tabs>
+  </el-card>
+</template>
+
+<style scoped>
+:deep(.el-tabs__nav-wrap)::after {
+  height: 1px;
+}
+
+:deep(.el-tabs__nav-next),
+:deep(.el-tabs__nav-prev) {
+  font-size: 16px;
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-tabs__nav-next.is-disabled),
+:deep(.el-tabs__nav-prev.is-disabled) {
+  opacity: 0.5;
+}
+</style>
--- a/src/views/schema-form/list.tsx
+++ b/src/views/schema-form/list.tsx
@ -0,0 +1,41 @@
+import Base from "./form/base.vue";
+import Dialog from "./form/dialog.vue";
+import Drawer from "./form/drawer.vue";
+import Steps from "./form/steps.vue";
+import Search from "./form/search.vue";
+
+const rendContent = (val: string) =>
+  `代码位置：src/views/schema-form/form/${val}.vue`;
+
+export const list = [
+  {
+    key: "base",
+    content: rendContent("base"),
+    title: "基础表单",
+    component: Base
+  },
+  {
+    key: "dialog",
+    content: rendContent("dialog"),
+    title: "弹框表单",
+    component: Dialog
+  },
+  {
+    key: "drawer",
+    content: rendContent("drawer"),
+    title: "抽屉表单",
+    component: Drawer
+  },
+  {
+    key: "steps",
+    content: rendContent("steps"),
+    title: "分步表单",
+    component: Steps
+  },
+  {
+    key: "search",
+    content: rendContent("search"),
+    title: "搜索表单",
+    component: Search
+  }
+];
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@ -34,7 +34,7 @@ const {
      ref="formRef"
      :inline="true"
      :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item label="部门名称：" prop="name">
        <el-input
--- a/src/views/system/dept/utils/hook.tsx
+++ b/src/views/system/dept/utils/hook.tsx
@ -7,7 +7,7 @@ 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";
+import { cloneDeep, isAllEmpty, deviceDetection } from "@pureadmin/utils";

 export function useDept() {
  const form = reactive({
@ -120,6 +120,7 @@ export function useDept() {
      },
      width: "40%",
      draggable: true,
+      fullscreen: deviceDetection(),
      fullscreenIcon: true,
      closeOnClickModal: false,
      contentRenderer: () => h(editForm, { ref: formRef }),
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@ -35,7 +35,7 @@ const {
      ref="formRef"
      :inline="true"
      :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item label="菜单名称：" prop="title">
        <el-input
--- a/src/views/system/menu/utils/hook.tsx
+++ b/src/views/system/menu/utils/hook.tsx
@ -6,8 +6,8 @@ import { transformI18n } from "@/plugins/i18n";
 import { addDialog } from "@/components/ReDialog";
 import { reactive, ref, onMounted, h } from "vue";
 import type { FormItemProps } from "../utils/types";
-import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { cloneDeep, isAllEmpty, deviceDetection } from "@pureadmin/utils";

 export function useMenu() {
  const form = reactive({
@ -161,6 +161,7 @@ export function useMenu() {
      },
      width: "45%",
      draggable: true,
+      fullscreen: deviceDetection(),
      fullscreenIcon: true,
      closeOnClickModal: false,
      contentRenderer: () => h(editForm, { ref: formRef }),
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@ -1,8 +1,14 @@
 <script setup lang="ts">
-import { ref } from "vue";
 import { useRole } from "./utils/hook";
+import { ref, computed, nextTick, onMounted } from "vue";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import {
+  delay,
+  subBefore,
+  deviceDetection,
+  useResizeObserver
+} from "@pureadmin/utils";

 // import Database from "@iconify-icons/ri/database-2-line";
 // import More from "@iconify-icons/ep/more-filled";
@ -11,29 +17,77 @@ import EditPen from "@iconify-icons/ep/edit-pen";
 import Refresh from "@iconify-icons/ep/refresh";
 import Menu from "@iconify-icons/ep/menu";
 import AddFill from "@iconify-icons/ri/add-circle-line";
+import Close from "@iconify-icons/ep/close";
+import Check from "@iconify-icons/ep/check";

 defineOptions({
  name: "SystemRole"
 });

+const iconClass = computed(() => {
+  return [
+    "w-[22px]",
+    "h-[22px]",
+    "flex",
+    "justify-center",
+    "items-center",
+    "outline-none",
+    "rounded-[4px]",
+    "cursor-pointer",
+    "transition-colors",
+    "hover:bg-[#0000000f]",
+    "dark:hover:bg-[#ffffff1f]",
+    "dark:hover:text-[#ffffffd9]"
+  ];
+});
+
+const treeRef = ref();
 const formRef = ref();
+const tableRef = ref();
+const contentRef = ref();
+const treeHeight = ref();
+
 const {
  form,
+  isShow,
+  curRow,
  loading,
  columns,
+  rowStyle,
  dataList,
+  treeData,
+  treeProps,
+  isLinkage,
  pagination,
+  isExpandAll,
+  isSelectAll,
+  treeSearchValue,
  // buttonClass,
  onSearch,
  resetForm,
  openDialog,
  handleMenu,
+  handleSave,
  handleDelete,
+  filterMethod,
+  transformI18n,
+  onQueryChanged,
  // handleDatabase,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange
-} = useRole();
+} = useRole(treeRef);
+
+onMounted(() => {
+  useResizeObserver(contentRef, async () => {
+    await nextTick();
+    delay(60).then(() => {
+      treeHeight.value = parseFloat(
+        subBefore(tableRef.value.getTableDoms().tableWrapper.style.height, "px")
+      );
+    });
+  });
+});
 </script>

 <template>
@ -42,7 +96,7 @@ const {
      ref="formRef"
      :inline="true"
      :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item label="角色名称：" prop="name">
        <el-input
@ -86,79 +140,87 @@ const {
      </el-form-item>
    </el-form>

-    <PureTableBar
-      title="角色管理（仅演示，操作后不生效）"
-      :columns="columns"
-      @refresh="onSearch"
+    <div
+      ref="contentRef"
+      :class="['flex', deviceDetection() ? 'flex-wrap' : '']"
    >
-      <template #buttons>
-        <el-button
-          type="primary"
-          :icon="useRenderIcon(AddFill)"
-          @click="openDialog()"
-        >
-          新增角色
-        </el-button>
-      </template>
-      <template v-slot="{ size, dynamicColumns }">
-        <pure-table
-          align-whole="center"
-          showOverflowTooltip
-          table-layout="auto"
-          :loading="loading"
-          :size="size"
-          adaptive
-          :adaptiveConfig="{ offsetBottom: 108 }"
-          :data="dataList"
-          :columns="dynamicColumns"
-          :pagination="pagination"
-          :paginationSmall="size === 'small' ? true : false"
-          :header-cell-style="{
-            background: 'var(--el-fill-color-light)',
-            color: 'var(--el-text-color-primary)'
-          }"
-          @selection-change="handleSelectionChange"
-          @page-size-change="handleSizeChange"
-          @page-current-change="handleCurrentChange"
-        >
-          <template #operation="{ row }">
-            <el-button
-              class="reset-margin"
-              link
-              type="primary"
-              :size="size"
-              :icon="useRenderIcon(EditPen)"
-              @click="openDialog('修改', row)"
-            >
-              修改
-            </el-button>
-            <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"
-                  link
-                  type="primary"
-                  :size="size"
-                  :icon="useRenderIcon(Delete)"
-                >
-                  删除
-                </el-button>
-              </template>
-            </el-popconfirm>
-            <!-- <el-dropdown>
+      <PureTableBar
+        :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
+        style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
+        title="角色管理（仅演示，操作后不生效）"
+        :columns="columns"
+        @refresh="onSearch"
+      >
+        <template #buttons>
+          <el-button
+            type="primary"
+            :icon="useRenderIcon(AddFill)"
+            @click="openDialog()"
+          >
+            新增角色
+          </el-button>
+        </template>
+        <template v-slot="{ size, dynamicColumns }">
+          <pure-table
+            ref="tableRef"
+            align-whole="center"
+            showOverflowTooltip
+            table-layout="auto"
+            :loading="loading"
+            :size="size"
+            adaptive
+            :row-style="rowStyle"
+            :adaptiveConfig="{ offsetBottom: 108 }"
+            :data="dataList"
+            :columns="dynamicColumns"
+            :pagination="pagination"
+            :paginationSmall="size === 'small' ? true : false"
+            :header-cell-style="{
+              background: 'var(--el-fill-color-light)',
+              color: 'var(--el-text-color-primary)'
+            }"
+            @selection-change="handleSelectionChange"
+            @page-size-change="handleSizeChange"
+            @page-current-change="handleCurrentChange"
+          >
+            <template #operation="{ row }">
+              <el-button
+                class="reset-margin"
+                link
+                type="primary"
+                :size="size"
+                :icon="useRenderIcon(EditPen)"
+                @click="openDialog('修改', row)"
+              >
+                修改
+              </el-button>
+              <el-popconfirm
+                :title="`是否确认删除角色名称为${row.name}的这条数据`"
+                @confirm="handleDelete(row)"
+              >
+                <template #reference>
+                  <el-button
+                    class="reset-margin"
+                    link
+                    type="primary"
+                    :size="size"
+                    :icon="useRenderIcon(Delete)"
+                  >
+                    删除
+                  </el-button>
+                </template>
+              </el-popconfirm>
+              <el-button
+                class="reset-margin"
+                link
+                type="primary"
+                :size="size"
+                :icon="useRenderIcon(Menu)"
+                @click="handleMenu(row)"
+              >
+                权限
+              </el-button>
+              <!-- <el-dropdown>
              <el-button
                class="ml-3 mt-[2px]"
                link
@ -195,10 +257,74 @@ const {
                </el-dropdown-menu>
              </template>
            </el-dropdown> -->
+            </template>
+          </pure-table>
+        </template>
+      </PureTableBar>
+
+      <div
+        v-if="isShow"
+        class="!min-w-[calc(100vw-60vw-268px)] mt-2 px-2 pb-2 bg-bg_color ml-2 overflow-auto"
+      >
+        <div class="flex justify-between w-full px-3 pt-5 pb-4">
+          <div class="flex">
+            <span :class="iconClass">
+              <IconifyIconOffline
+                v-tippy="{
+                  content: '关闭'
+                }"
+                class="dark:text-white"
+                width="18px"
+                height="18px"
+                :icon="Close"
+                @click="handleMenu"
+              />
+            </span>
+            <span :class="[iconClass, 'ml-2']">
+              <IconifyIconOffline
+                v-tippy="{
+                  content: '保存菜单权限'
+                }"
+                class="dark:text-white"
+                width="18px"
+                height="18px"
+                :icon="Check"
+                @click="handleSave"
+              />
+            </span>
+          </div>
+          <p class="font-bold truncate">
+            菜单权限
+            {{ `${curRow?.name ? `（${curRow.name}）` : ""}` }}
+          </p>
+        </div>
+        <el-input
+          v-model="treeSearchValue"
+          placeholder="请输入菜单进行搜索"
+          class="mb-1"
+          clearable
+          @input="onQueryChanged"
+        />
+        <div class="flex flex-wrap">
+          <el-checkbox v-model="isExpandAll" label="展开/折叠" />
+          <el-checkbox v-model="isSelectAll" label="全选/全不选" />
+          <el-checkbox v-model="isLinkage" label="父子联动" />
+        </div>
+        <el-tree-v2
+          ref="treeRef"
+          show-checkbox
+          :data="treeData"
+          :props="treeProps"
+          :height="treeHeight"
+          :check-strictly="!isLinkage"
+          :filter-method="filterMethod"
+        >
+          <template #default="{ node }">
+            <span>{{ transformI18n(node.label) }}</span>
          </template>
-        </pure-table>
-      </template>
-    </PureTableBar>
+        </el-tree-v2>
+      </div>
+    </div>
  </div>
 </template>

--- a/src/views/system/role/utils/hook.tsx
+++ b/src/views/system/role/utils/hook.tsx
@ -1,25 +1,41 @@
 import dayjs from "dayjs";
 import editForm from "../form.vue";
+import { handleTree } from "@/utils/tree";
 import { message } from "@/utils/message";
-import { getRoleList } from "@/api/system";
 import { ElMessageBox } from "element-plus";
 import { usePublicHooks } from "../../hooks";
+import { transformI18n } from "@/plugins/i18n";
 import { addDialog } from "@/components/ReDialog";
 import type { FormItemProps } from "../utils/types";
 import type { PaginationProps } from "@pureadmin/table";
-import { reactive, ref, onMounted, h, toRaw } from "vue";
+import { getKeyList, deviceDetection } from "@pureadmin/utils";
+import { getRoleList, getRoleMenu, getRoleMenuIds } from "@/api/system";
+import { type Ref, reactive, ref, onMounted, h, toRaw, watch } from "vue";

-export function useRole() {
+export function useRole(treeRef: Ref) {
  const form = reactive({
    name: "",
    code: "",
    status: ""
  });
+  const curRow = ref();
  const formRef = ref();
  const dataList = ref([]);
+  const treeIds = ref([]);
+  const treeData = ref([]);
+  const isShow = ref(false);
  const loading = ref(true);
+  const isLinkage = ref(false);
+  const treeSearchValue = ref();
  const switchLoadMap = ref({});
+  const isExpandAll = ref(false);
+  const isSelectAll = ref(false);
  const { switchStyle } = usePublicHooks();
+  const treeProps = {
+    value: "id",
+    label: "title",
+    children: "children"
+  };
  const pagination = reactive<PaginationProps>({
    total: 0,
    pageSize: 10,
@ -29,22 +45,18 @@ export function useRole() {
  const columns: TableColumnList = [
    {
      label: "角色编号",
-      prop: "id",
-      minWidth: 100
+      prop: "id"
    },
    {
      label: "角色名称",
-      prop: "name",
-      minWidth: 120
+      prop: "name"
    },
    {
      label: "角色标识",
-      prop: "code",
-      minWidth: 150
+      prop: "code"
    },
    {
      label: "状态",
-      minWidth: 130,
      cellRenderer: scope => (
        <el-switch
          size={scope.props.size === "small" ? "small" : "default"}
@ -58,24 +70,25 @@ export function useRole() {
          style={switchStyle.value}
          onChange={() => onChange(scope as any)}
        />
-      )
+      ),
+      minWidth: 90
    },
    {
      label: "备注",
      prop: "remark",
-      minWidth: 150
+      minWidth: 160
    },
    {
      label: "创建时间",
-      minWidth: 180,
      prop: "createTime",
+      minWidth: 160,
      formatter: ({ createTime }) =>
        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
    },
    {
      label: "操作",
      fixed: "right",
-      width: 240,
+      width: 210,
      slot: "operation"
    }
  ];
@ -179,6 +192,7 @@ export function useRole() {
      },
      width: "40%",
      draggable: true,
+      fullscreen: deviceDetection(),
      fullscreenIcon: true,
      closeOnClickModal: false,
      contentRenderer: () => h(editForm, { ref: formRef }),
@ -210,29 +224,92 @@ export function useRole() {
  }

  /** 菜单权限 */
-  function handleMenu() {
-    message("等菜单管理页面开发后完善");
+  async function handleMenu(row?: any) {
+    const { id } = row;
+    if (id) {
+      curRow.value = row;
+      isShow.value = true;
+      const { data } = await getRoleMenuIds({ id });
+      treeRef.value.setCheckedKeys(data);
+    } else {
+      curRow.value = null;
+      isShow.value = false;
+    }
+  }
+
+  /** 高亮当前权限选中行 */
+  function rowStyle({ row: { id } }) {
+    return {
+      cursor: "pointer",
+      background: id === curRow.value?.id ? "var(--el-fill-color-light)" : ""
+    };
+  }
+
+  /** 菜单权限-保存 */
+  function handleSave() {
+    const { id, name } = curRow.value;
+    // 根据用户 id 调用实际项目中菜单权限修改接口
+    console.log(id, treeRef.value.getCheckedKeys());
+    message(`角色名称为${name}的菜单权限修改成功`, {
+      type: "success"
+    });
  }

  /** 数据权限 可自行开发 */
  // function handleDatabase() {}

-  onMounted(() => {
+  const onQueryChanged = (query: string) => {
+    treeRef.value!.filter(query);
+  };
+
+  const filterMethod = (query: string, node) => {
+    return transformI18n(node.title)!.includes(query);
+  };
+
+  onMounted(async () => {
    onSearch();
+    const { data } = await getRoleMenu();
+    treeIds.value = getKeyList(data, "id");
+    treeData.value = handleTree(data);
+  });
+
+  watch(isExpandAll, val => {
+    val
+      ? treeRef.value.setExpandedKeys(treeIds.value)
+      : treeRef.value.setExpandedKeys([]);
+  });
+
+  watch(isSelectAll, val => {
+    val
+      ? treeRef.value.setCheckedKeys(treeIds.value)
+      : treeRef.value.setCheckedKeys([]);
  });

  return {
    form,
+    isShow,
+    curRow,
    loading,
    columns,
+    rowStyle,
    dataList,
+    treeData,
+    treeProps,
+    isLinkage,
    pagination,
+    isExpandAll,
+    isSelectAll,
+    treeSearchValue,
    // buttonClass,
    onSearch,
    resetForm,
    openDialog,
    handleMenu,
+    handleSave,
    handleDelete,
+    filterMethod,
+    transformI18n,
+    onQueryChanged,
    // handleDatabase,
    handleSizeChange,
    handleCurrentChange,
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@ -32,6 +32,7 @@ const {
  selectedNum,
  pagination,
  buttonClass,
+  deviceDetection,
  onSearch,
  resetForm,
  onbatchDel,
@ -50,20 +51,22 @@ const {
 </script>

 <template>
-  <div class="flex justify-between">
+  <div :class="['flex', 'justify-between', deviceDetection() && 'flex-wrap']">
    <tree
      ref="treeRef"
-      class="min-w-[200px] mr-2"
+      :class="['mr-2', deviceDetection() ? 'w-full' : 'min-w-[200px]']"
      :treeData="treeData"
      :treeLoading="treeLoading"
      @tree-select="onTreeSelect"
    />
-    <div class="w-[calc(100%-200px)]">
+    <div
+      :class="[deviceDetection() ? ['w-full', 'mt-2'] : 'w-[calc(100%-200px)]']"
+    >
      <el-form
        ref="formRef"
        :inline="true"
        :model="form"
-        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
      >
        <el-form-item label="用户名称：" prop="username">
          <el-input
--- a/src/views/system/user/tree.vue
+++ b/src/views/system/user/tree.vue
@ -36,8 +36,9 @@ const defaultProps = {
 const buttonClass = computed(() => {
  return [
    "!h-[20px]",
+    "!text-sm",
    "reset-margin",
-    "!text-gray-500",
+    "!text-[var(--el-text-color-regular)]",
    "dark:!text-white",
    "dark:hover:!text-primary"
  ];
@ -96,7 +97,7 @@ defineExpose({ onTreeReset });
  <div
    v-loading="props.treeLoading"
    class="h-full bg-bg_color overflow-auto"
-    :style="{ minHeight: `calc(100vh - 145px)` }"
+    :style="{ minHeight: `calc(100vh - 141px)` }"
  >
    <div class="flex items-center h-[34px]">
      <el-input
--- a/src/views/system/user/utils/hook.tsx
+++ b/src/views/system/user/utils/hook.tsx
@ -10,7 +10,12 @@ import { usePublicHooks } from "../../hooks";
 import { addDialog } from "@/components/ReDialog";
 import type { PaginationProps } from "@pureadmin/table";
 import type { FormItemProps, RoleFormItemProps } from "../utils/types";
-import { hideTextAtIndex, getKeyList, isAllEmpty } from "@pureadmin/utils";
+import {
+  getKeyList,
+  isAllEmpty,
+  hideTextAtIndex,
+  deviceDetection
+} from "@pureadmin/utils";
 import {
  getRoleIds,
  getDeptList,
@ -322,6 +327,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
      },
      width: "46%",
      draggable: true,
+      fullscreen: deviceDetection(),
      fullscreenIcon: true,
      closeOnClickModal: false,
      contentRenderer: () => h(editForm, { ref: formRef }),
@ -360,6 +366,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
      width: "40%",
      draggable: true,
      closeOnClickModal: false,
+      fullscreen: deviceDetection(),
      contentRenderer: () =>
        h(croppingUpload, {
          ref: cropRef,
@ -389,6 +396,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
      width: "30%",
      draggable: true,
      closeOnClickModal: false,
+      fullscreen: deviceDetection(),
      contentRenderer: () => (
        <>
          <ElForm ref={ruleFormRef} model={pwdForm}>
@ -471,6 +479,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
      },
      width: "400px",
      draggable: true,
+      fullscreen: deviceDetection(),
      fullscreenIcon: true,
      closeOnClickModal: false,
      contentRenderer: () => h(roleForm),
@ -507,6 +516,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
    selectedNum,
    pagination,
    buttonClass,
+    deviceDetection,
    onSearch,
    resetForm,
    onbatchDel,
--- a/src/views/pure-table/base/base.vue
+++ b/src/views/pure-table/base/base.vue
--- a/src/views/pure-table/base/border.vue
+++ b/src/views/pure-table/base/border.vue
--- a/src/views/pure-table/base/column-template/columns.tsx
+++ b/src/views/pure-table/base/column-template/columns.tsx
--- a/src/views/pure-table/base/column-template/index.vue
+++ b/src/views/pure-table/base/column-template/index.vue
--- a/src/views/pure-table/base/customIndex.vue
+++ b/src/views/pure-table/base/customIndex.vue
--- a/src/views/pure-table/base/data.ts
+++ b/src/views/pure-table/base/data.ts
--- a/src/views/pure-table/base/expand.vue
+++ b/src/views/pure-table/base/expand.vue
--- a/src/views/pure-table/base/filters.vue
+++ b/src/views/pure-table/base/filters.vue
--- a/src/views/pure-table/base/fixColumn.vue
+++ b/src/views/pure-table/base/fixColumn.vue
--- a/src/views/pure-table/base/fixHeader.vue
+++ b/src/views/pure-table/base/fixHeader.vue
--- a/src/views/pure-table/base/fluidHeight.vue
+++ b/src/views/pure-table/base/fluidHeight.vue
--- a/src/views/pure-table/base/groupHeader.vue
+++ b/src/views/pure-table/base/groupHeader.vue
--- a/src/views/pure-table/base/header-renderer/columns.tsx
+++ b/src/views/pure-table/base/header-renderer/columns.tsx
--- a/src/views/pure-table/base/header-renderer/index.vue
+++ b/src/views/pure-table/base/header-renderer/index.vue
--- a/src/views/pure-table/base/imgPreview.vue
+++ b/src/views/pure-table/base/imgPreview.vue
--- a/src/views/pure-table/base/layout.vue
+++ b/src/views/pure-table/base/layout.vue
--- a/src/views/pure-table/base/list.tsx
+++ b/src/views/pure-table/base/list.tsx
@ -22,7 +22,7 @@ import NestProp from "./nestProp.vue";
 import ImgPreview from "./imgPreview.vue";

 const rendContent = (val: string) =>
-  `代码位置：src/views/pure-table/base/${val}.vue`;
+  `代码位置：src/views/table/base/${val}.vue`;

 export const list = [
  {
--- a/src/views/pure-table/base/merge.vue
+++ b/src/views/pure-table/base/merge.vue
--- a/src/views/pure-table/base/multipleChoice.vue
+++ b/src/views/pure-table/base/multipleChoice.vue
--- a/src/views/pure-table/base/nestProp.vue
+++ b/src/views/pure-table/base/nestProp.vue
--- a/src/views/pure-table/base/radio.vue
+++ b/src/views/pure-table/base/radio.vue
--- a/src/views/pure-table/base/sortable.vue
+++ b/src/views/pure-table/base/sortable.vue
--- a/src/views/pure-table/base/status.vue
+++ b/src/views/pure-table/base/status.vue
--- a/src/views/pure-table/base/stripe.vue
+++ b/src/views/pure-table/base/stripe.vue
--- a/src/views/pure-table/base/totalRow.vue
+++ b/src/views/pure-table/base/totalRow.vue
--- a/src/views/pure-table/base/tree.vue
+++ b/src/views/pure-table/base/tree.vue
--- a/src/views/table/edit.vue
+++ b/src/views/table/edit.vue
@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { list } from "./edit/list";
+
+defineOptions({
+  name: "PureTableEdit"
+});
+
+const selected = ref(0);
+
+function tabClick({ index }) {
+  selected.value = index;
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          可编辑用法全部采用 tsx 语法，充分发挥
+          <el-link
+            href="https://github.com/pure-admin/pure-admin-table"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            @pureadmin/table
+          </el-link>
+          的灵活性，维护整体表格只需操作 columns 配置即可
+        </span>
+      </div>
+    </template>
+
+    <el-alert
+      title="可编辑用法中所有表格都设置了 row-key ，它是唯一值的字段，比如id。作用：1. 用来优化 Table
+      的渲染，尤其当字段在深层结构中；2. 防止拖拽后表格组件内部混乱（拖拽必须设置）"
+      type="info"
+      :closable="false"
+    />
+
+    <el-tabs @tab-click="tabClick">
+      <template v-for="(item, index) of list" :key="item.key">
+        <el-tab-pane :lazy="true">
+          <template #label>
+            <el-tooltip
+              :content="`（第 ${index + 1} 个示例）${item.content}`"
+              placement="top-end"
+            >
+              <span>{{ item.title }}</span>
+            </el-tooltip>
+          </template>
+          <component :is="item.component" v-if="selected == index" />
+        </el-tab-pane>
+      </template>
+    </el-tabs>
+  </el-card>
+</template>
+
+<style scoped>
+:deep(.el-tabs__nav-wrap)::after {
+  height: 1px;
+}
+
+:deep(.el-tabs__header) {
+  margin-top: 10px;
+}
+
+:deep(.el-alert__title) {
+  font-size: 16px;
+}
+
+:deep(.el-tabs__nav-next),
+:deep(.el-tabs__nav-prev) {
+  font-size: 16px;
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-tabs__nav-next.is-disabled),
+:deep(.el-tabs__nav-prev.is-disabled) {
+  opacity: 0.5;
+}
+</style>
--- a/src/views/table/edit/data.ts
+++ b/src/views/table/edit/data.ts
@ -0,0 +1,74 @@
+const tableData = [
+  {
+    id: 1,
+    name: "Tom",
+    sex: 0, // 0代表男 1代表女
+    hobby: 2,
+    date: "2024-03-17"
+  },
+  {
+    id: 2,
+    name: "Jack",
+    sex: 0,
+    hobby: 1,
+    date: "2024-03-18"
+  },
+  {
+    id: 3,
+    name: "Lily",
+    sex: 1,
+    hobby: 1,
+    date: "2024-03-19"
+  },
+  {
+    id: 4,
+    name: "Mia",
+    sex: 1,
+    hobby: 3,
+    date: "2024-03-20"
+  }
+];
+
+const options = [
+  {
+    value: 0,
+    label: "上午写代码"
+  },
+  {
+    value: 1,
+    label: "下午写代码"
+  },
+  {
+    value: 2,
+    label: "晚上写代码"
+  },
+  {
+    value: 3,
+    label: "凌晨休息了"
+  }
+];
+
+const tableDataEdit = [
+  {
+    id: 1,
+    name: "Tom",
+    address: "home"
+  },
+  {
+    id: 2,
+    name: "Jack",
+    address: "office"
+  },
+  {
+    id: 3,
+    name: "Lily",
+    address: "library"
+  },
+  {
+    id: 4,
+    name: "Mia",
+    address: "playground"
+  }
+];
+
+export { tableData, tableDataEdit, options };
--- a/src/views/table/edit/demo1/columns.tsx
+++ b/src/views/table/edit/demo1/columns.tsx
@ -0,0 +1,87 @@
+import { ref } from "vue";
+import { options } from "../data";
+
+export function useColumns() {
+  const dataList = ref([]);
+
+  const columns: TableColumnList = [
+    {
+      label: "姓名",
+      prop: "name",
+      cellRenderer: ({ row }) => <el-input v-model={row.name} />
+    },
+    {
+      label: "性别",
+      prop: "sex",
+      cellRenderer: ({ row }) => (
+        <el-switch
+          v-model={row.sex}
+          inline-prompt
+          active-value={0}
+          inactive-value={1}
+          active-text="男"
+          inactive-text="女"
+        />
+      )
+    },
+    {
+      label: "爱好",
+      prop: "hobby",
+      cellRenderer: ({ row }) => (
+        <el-select v-model={row.hobby} clearable placeholder="请选择爱好">
+          {options.map(item => {
+            return (
+              <el-option
+                key={item.value}
+                label={item.label}
+                value={item.value}
+              />
+            );
+          })}
+        </el-select>
+      )
+    },
+    {
+      label: "日期",
+      prop: "date",
+      cellRenderer: ({ row }) => (
+        <el-date-picker
+          v-model={row.date}
+          type="date"
+          format="YYYY/MM/DD"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择日期"
+        />
+      ),
+      minWidth: 110
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 90,
+      slot: "operation"
+    }
+  ];
+
+  function onAdd() {
+    dataList.value.push({
+      id: dataList.value.length + 1,
+      name: "",
+      sex: 0,
+      hobby: "",
+      date: ""
+    });
+  }
+
+  function onDel(row) {
+    const index = dataList.value.indexOf(row);
+    if (index !== -1) dataList.value.splice(index, 1);
+  }
+
+  return {
+    columns,
+    dataList,
+    onAdd,
+    onDel
+  };
+}
--- a/src/views/table/edit/demo1/index.vue
+++ b/src/views/table/edit/demo1/index.vue
@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+import Empty from "../empty.svg?component";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import AddFill from "@iconify-icons/ep/plus";
+import Delete from "@iconify-icons/ep/delete";
+
+const { columns, dataList, onAdd, onDel } = useColumns();
+</script>
+
+<template>
+  <div class="flex">
+    <el-scrollbar height="540px">
+      <code>
+        <pre class="w-[400px]"> {{ dataList }}</pre>
+      </code>
+    </el-scrollbar>
+    <pure-table
+      row-key="id"
+      align-whole="center"
+      :header-cell-style="{
+        background: 'var(--el-fill-color-light)',
+        color: 'var(--el-text-color-primary)'
+      }"
+      :data="dataList"
+      :columns="columns"
+    >
+      <template #empty>
+        <Empty fill="var(--el-svg-monochrome-grey)" class="m-auto" />
+      </template>
+      <template #append>
+        <el-button
+          plain
+          class="w-full my-2"
+          :icon="useRenderIcon(AddFill)"
+          @click="onAdd"
+        >
+          添加一行数据
+        </el-button>
+      </template>
+      <template #operation="{ row }">
+        <el-button
+          class="reset-margin"
+          link
+          type="primary"
+          :icon="useRenderIcon(Delete)"
+          @click="onDel(row)"
+        />
+      </template>
+    </pure-table>
+  </div>
+</template>
+
+<style scoped>
+:deep(.el-table__inner-wrapper::before) {
+  height: 0;
+}
+</style>
--- a/Show More
+++ b/Show More