release: update 5.2.0

feat: 在左侧菜单右中侧再加一个折叠展开菜单的功能
chore(deps): update
2025-11-03 13:44:47 +08:00 · 2024-03-22 16:03:29 +08:00 · 2024-03-22 15:37:19 +08:00 · 2024-03-22 12:10:01 +08:00 · 2024-03-21 16:04:40 +08:00 · 2024-03-21 13:01:36 +08:00
173 changed files with 25298 additions and 1803 deletions
--- a/.lintstagedrc
+++ b/.lintstagedrc
@@ -7,10 +7,14 @@
    "prettier --cache --write--parser json"
  ],
  "package.json": ["prettier --cache --write"],
-  "*.vue": ["prettier --write", "eslint --cache --fix", "stylelint --fix"],
+  "*.vue": [
+    "prettier --write",
+    "eslint --cache --fix",
+    "stylelint --fix --allow-empty-input"
+  ],
  "*.{css,scss,html}": [
    "prettier --cache --ignore-unknown --write",
-    "stylelint --fix"
+    "stylelint --fix --allow-empty-input"
  ],
  "*.md": ["prettier --cache --ignore-unknown --write"]
 }
--- 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`
@@ -27,6 +33,10 @@ The simplified version is based on the shelf extracted from [vue-pure-admin](htt
 [View vue-pure-admin documentation](https://yiming_chang.gitee.io/pure-admin-doc)  
 [View @pureadmin/utils documentation](https://pure-admin-utils.netlify.app)

+## Quality service, software outsourcing, sponsorship support
+
+[Click me for details](https://yiming_chang.gitee.io/pure-admin-doc/pages/service/)
+
 ## Tauri

 [Click Watch Tauri](https://github.com/pure-admin/tauri-pure-admin)
@@ -160,6 +170,19 @@ You are very welcome to join！[Raise an issue](https://github.com/pure-admin/vu
 4. Push your branch: `git push origin feat/xxxx`
 5. submit`pull request`

+## Special code contributions
+
+Thank you very much for your in-depth understanding of the source code and your outstanding contributions to the `pure-admin` organization ❤️
+
+|                 **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)     |
+| [yj-liuzepeng](https://github.com/yj-liuzepeng) | [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=yj-liuzepeng) |
+|   [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)    |
+
 ## Git Contribution submission specification

 reference [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) specification ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
--- 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>

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

@@ -24,8 +31,12 @@

 ## 配套保姆级文档

-[查看 vue-pure-admin 文档](https://yiming_chang.gitee.io/pure-admin-doc)  
-[查看 @pureadmin/utils 文档](https://pure-admin-utils.netlify.app)
+[点我查看 vue-pure-admin 文档](https://yiming_chang.gitee.io/pure-admin-doc)  
+[点我查看 @pureadmin/utils 文档](https://pure-admin-utils.netlify.app)
+
+## 优质服务、软件外包、赞助支持
+
+[点我查看详情](https://yiming_chang.gitee.io/pure-admin-doc/pages/service/)

 ## `Tauri` 版本

@@ -37,7 +48,7 @@

 ## 预览

-[查看预览](https://yiming_chang.gitee.io/vue-pure-admin)
+[点我查看预览](https://yiming_chang.gitee.io/vue-pure-admin)

 `PC` 端

@@ -160,6 +171,19 @@ docker run -dp 8080:80  --name pure-admin vue-pure-admin
 4. 推送您的分支: `git push origin feat/xxxx`
 5. 提交`pull request`

+## 特别代码贡献
+
+非常感谢你们能深入了解源码并对 `pure-admin` 组织作出优秀贡献 ❤️
+
+|                   **贡献人**                    |                                   **具体代码**                                   |
+| :---------------------------------------------: | :------------------------------------------------------------------------------: |
+|       [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)     |
+| [yj-liuzepeng](https://github.com/yj-liuzepeng) | [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=yj-liuzepeng) |
+|   [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)    |
+
 ## `Git` 贡献提交规范

 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
--- 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! 欢迎使用 vue-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",
@@ -44,6 +45,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,11 +26,17 @@ menus:
  hshome: Home
  hslogin: Login
  hsempty: Empty Page
+  hstable: Table
  hssysManagement: System Manage
  hsUser: User Manage
  hsRole: Role Manage
  hsSystemMenu: Menu Manage
  hsDept: Dept Manage
+  hssysMonitor: System Monitor
+  hsOnlineUser: Online User
+  hsLoginLog: Login Log
+  hsOperationLog: Operation Log
+  hsSystemLog: System Log
  hseditor: Editor
  hsabnormal: Abnormal Page
  hsfourZeroFour: "404"
@@ -65,6 +71,7 @@ menus:
  hsTag: Tag
  hsStatistic: Statistic
  hsCollapse: Collapse
+  hsGanttastic: Gantt Chart
  hsProgress: Progress
  hsUpload: File Upload
  hsCheckCard: CheckCard
@@ -85,7 +92,9 @@ menus:
  hsMenuTree: Menu Tree
  hsVideoFrame: Video Frame Capture
  hsWavesurfer: Audio Visualization
+  hsRipple: Ripple
  hsOptimize: Debounce、Throttle、Copy、Longpress Directives
+  hsVerify: Captcha
  hsWatermark: Water Mark
  hsPrint: Print
  hsDownload: Download
@@ -122,8 +131,11 @@ menus:
  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
@@ -26,11 +26,17 @@ menus:
  hshome: 首页
  hslogin: 登录
  hsempty: 无Layout页
+  hstable: 表格
  hssysManagement: 系统管理
  hsUser: 用户管理
  hsRole: 角色管理
  hsSystemMenu: 菜单管理
  hsDept: 部门管理
+  hssysMonitor: 系统监控
+  hsOnlineUser: 在线用户
+  hsLoginLog: 登录日志
+  hsOperationLog: 操作日志
+  hsSystemLog: 系统日志
  hseditor: 编辑器
  hsabnormal: 异常页面
  hsfourZeroFour: "404"
@@ -65,6 +71,7 @@ menus:
  hsTag: 标签
  hsStatistic: 统计组件
  hsCollapse: 折叠面板
+  hsGanttastic: 甘特图
  hsProgress: 进度条
  hsUpload: 文件上传
  hsCheckCard: 多选卡片
@@ -85,7 +92,9 @@ menus:
  hsMenuTree: 菜单树结构
  hsVideoFrame: 视频帧截取-wasm版
  hsWavesurfer: 音频可视化
+  hsRipple: 波纹(Ripple)
  hsOptimize: 防抖、截流、复制、长按指令
+  hsVerify: 图形验证码
  hsWatermark: 水印
  hsPrint: 打印
  hsDownload: 下载
@@ -107,7 +116,7 @@ menus:
  hsIconSelect: 图标选择器
  hsTimeline: 时间线
  hsLineTree: 树形连接线
-  hsList: 列表页
+  hsList: 列表页面
  hsListCard: 卡片列表页
  hsDebounce: 防抖节流
  hsFormDesign: 表单设计器
@@ -122,8 +131,11 @@ menus:
  hsSensitive: 敏感词过滤
  hsPinyin: 汉语拼音
  hsdanmaku: 弹幕
-  hsPureTableBase: 基础用法（23个示例）
-  hsPureTableHigh: 高级用法（11个示例）
+  hsSchemaForm: 表单
+  hsPureTableBase: 基础用法
+  hsPureTableHigh: 高级用法
+  hsPureTableEdit: 可编辑用法
+  hsVxeTable: 虚拟滚动
  hsboard: 艺术画板
  hsMenuoverflow: 目录超出显示 Tooltip 文字提示
  hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示
--- a/mock/asyncRoutes.ts
+++ b/mock/asyncRoutes.ts
@@ -1,6 +1,6 @@
 // 模拟后端动态生成路由
 import { defineFakeRoute } from "vite-plugin-fake-server/client";
-import { system, permission, frame, tabs } from "@/router/enums";
+import { system, monitor, permission, frame, tabs } from "@/router/enums";

 /**
 * roles：页面级别权限，这里模拟二种 "admin"、"common"
@@ -8,7 +8,7 @@ import { system, permission, frame, tabs } from "@/router/enums";
 * common：普通角色
 */

-const systemRouter = {
+const systemManagementRouter = {
  path: "/system",
  meta: {
    icon: "ri:settings-3-line",
@@ -55,6 +55,57 @@ const systemRouter = {
  ]
 };

+const systemMonitorRouter = {
+  path: "/monitor",
+  meta: {
+    icon: "ep:monitor",
+    title: "menus.hssysMonitor",
+    rank: monitor
+  },
+  children: [
+    {
+      path: "/monitor/online-user",
+      component: "monitor/online/index",
+      name: "OnlineUser",
+      meta: {
+        icon: "ri:user-voice-line",
+        title: "menus.hsOnlineUser",
+        roles: ["admin"]
+      }
+    },
+    {
+      path: "/monitor/login-logs",
+      component: "monitor/logs/login/index",
+      name: "LoginLog",
+      meta: {
+        icon: "ri:window-line",
+        title: "menus.hsLoginLog",
+        roles: ["admin"]
+      }
+    },
+    {
+      path: "/monitor/operation-logs",
+      component: "monitor/logs/operation/index",
+      name: "OperationLog",
+      meta: {
+        icon: "ri:history-fill",
+        title: "menus.hsOperationLog",
+        roles: ["admin"]
+      }
+    },
+    {
+      path: "/monitor/system-logs",
+      component: "monitor/logs/system/index",
+      name: "SystemLog",
+      meta: {
+        icon: "ri:file-search-line",
+        title: "menus.hsSystemLog",
+        roles: ["admin"]
+      }
+    }
+  ]
+};
+
 const permissionRouter = {
  path: "/permission",
  meta: {
@@ -90,7 +141,7 @@ const permissionRouter = {
 const frameRouter = {
  path: "/iframe",
  meta: {
-    icon: "ep:monitor",
+    icon: "ri:links-fill",
    title: "menus.hsExternalPage",
    rank: frame
  },
@@ -239,7 +290,13 @@ export default defineFakeRoute([
    response: () => {
      return {
        success: true,
-        data: [systemRouter, permissionRouter, frameRouter, tabsRouter]
+        data: [
+          systemManagementRouter,
+          systemMonitorRouter,
+          permissionRouter,
+          frameRouter,
+          tabsRouter
+        ]
      };
    }
  }
--- a/mock/system.ts
+++ b/mock/system.ts
@@ -74,7 +74,7 @@ export default defineFakeRoute([
      };
    }
  },
-  // 用户管理-根据userId，获取对应角色id列表（userId：用户id）
+  // 用户管理-根据 userId 获取对应角色 id 列表（userId：用户id）
  {
    url: "/list-role-ids",
    method: "post",
@@ -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",
@@ -159,7 +387,7 @@ export default defineFakeRoute([
            component: "",
            rank: 7,
            redirect: "",
-            icon: "ep:monitor",
+            icon: "ri:links-fill",
            extraIcon: "",
            enterTransition: "",
            leaveTransition: "",
@@ -657,18 +885,18 @@ export default defineFakeRoute([
            showLink: true,
            showParent: false
          },
-          // 标签页操作
+          // 系统监控
          {
            parentId: 0,
            id: 400,
            menuType: 0,
-            title: "menus.hstabs",
-            name: "PureTabs",
-            path: "/tabs",
+            title: "menus.hssysMonitor",
+            name: "PureMonitor",
+            path: "/monitor",
            component: "",
            rank: 11,
            redirect: "",
-            icon: "ri:bookmark-2-line",
+            icon: "ep:monitor",
            extraIcon: "",
            enterTransition: "",
            leaveTransition: "",
@@ -685,6 +913,122 @@ export default defineFakeRoute([
            parentId: 400,
            id: 401,
            menuType: 0,
+            title: "menus.hsOnlineUser",
+            name: "OnlineUser",
+            path: "/monitor/online-user",
+            component: "monitor/online/index",
+            rank: null,
+            redirect: "",
+            icon: "ri:user-voice-line",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 400,
+            id: 402,
+            menuType: 0,
+            title: "menus.hsLoginLog",
+            name: "LoginLog",
+            path: "/monitor/login-logs",
+            component: "monitor/logs/login/index",
+            rank: null,
+            redirect: "",
+            icon: "ri:window-line",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 400,
+            id: 403,
+            menuType: 0,
+            title: "menus.hsOperationLog",
+            name: "OperationLog",
+            path: "/monitor/operation-logs",
+            component: "monitor/logs/operation/index",
+            rank: null,
+            redirect: "",
+            icon: "ri:history-fill",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 400,
+            id: 404,
+            menuType: 0,
+            title: "menus.hsSystemLog",
+            name: "SystemLog",
+            path: "/monitor/system-logs",
+            component: "monitor/logs/system/index",
+            rank: null,
+            redirect: "",
+            icon: "ri:file-search-line",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            showLink: true,
+            showParent: false
+          },
+          // 标签页操作
+          {
+            parentId: 0,
+            id: 500,
+            menuType: 0,
+            title: "menus.hstabs",
+            name: "PureTabs",
+            path: "/tabs",
+            component: "",
+            rank: 12,
+            redirect: "",
+            icon: "ri:bookmark-2-line",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 500,
+            id: 501,
+            menuType: 0,
            title: "menus.hstabs",
            name: "Tabs",
            path: "/tabs/index",
@@ -705,8 +1049,8 @@ export default defineFakeRoute([
            showParent: false
          },
          {
-            parentId: 400,
-            id: 402,
+            parentId: 500,
+            id: 502,
            menuType: 0,
            title: "query传参模式",
            name: "TabQueryDetail",
@@ -728,8 +1072,8 @@ export default defineFakeRoute([
            showParent: false
          },
          {
-            parentId: 400,
-            id: 403,
+            parentId: 500,
+            id: 503,
            menuType: 0,
            title: "params传参模式",
            name: "TabParamsDetail",
@@ -895,5 +1239,405 @@ export default defineFakeRoute([
        ]
      };
    }
+  },
+  // 在线用户
+  {
+    url: "/online-logs",
+    method: "post",
+    response: ({ body }) => {
+      let list = [
+        {
+          id: 1,
+          username: "admin",
+          ip: faker.internet.ipv4(),
+          address: "中国河南省信阳市",
+          system: "macOS",
+          browser: "Chrome",
+          loginTime: new Date()
+        },
+        {
+          id: 2,
+          username: "common",
+          ip: faker.internet.ipv4(),
+          address: "中国广东省深圳市",
+          system: "Windows",
+          browser: "Firefox",
+          loginTime: new Date()
+        }
+      ];
+      list = list.filter(item => item.username.includes(body?.username));
+      return {
+        success: true,
+        data: {
+          list,
+          total: list.length, // 总条目数
+          pageSize: 10, // 每页显示条目个数
+          currentPage: 1 // 当前页数
+        }
+      };
+    }
+  },
+  // 登录日志
+  {
+    url: "/login-logs",
+    method: "post",
+    response: ({ body }) => {
+      let list = [
+        {
+          id: 1,
+          username: "admin",
+          ip: faker.internet.ipv4(),
+          address: "中国河南省信阳市",
+          system: "macOS",
+          browser: "Chrome",
+          status: 1, // 登录状态 1 成功 0 失败
+          behavior: "账号登录",
+          loginTime: new Date()
+        },
+        {
+          id: 2,
+          username: "common",
+          ip: faker.internet.ipv4(),
+          address: "中国广东省深圳市",
+          system: "Windows",
+          browser: "Firefox",
+          status: 0,
+          behavior: "第三方登录",
+          loginTime: new Date()
+        }
+      ];
+      list = list.filter(item => item.username.includes(body?.username));
+      list = list.filter(item =>
+        String(item.status).includes(String(body?.status))
+      );
+      return {
+        success: true,
+        data: {
+          list,
+          total: list.length, // 总条目数
+          pageSize: 10, // 每页显示条目个数
+          currentPage: 1 // 当前页数
+        }
+      };
+    }
+  },
+  // 操作日志
+  {
+    url: "/operation-logs",
+    method: "post",
+    response: ({ body }) => {
+      let list = [
+        {
+          id: 1,
+          username: "admin",
+          ip: faker.internet.ipv4(),
+          address: "中国河南省信阳市",
+          system: "macOS",
+          browser: "Chrome",
+          status: 1, // 操作状态 1 成功 0 失败
+          summary: "菜单管理-添加菜单", // 操作概要
+          module: "系统管理", // 所属模块
+          operatingTime: new Date() // 操作时间
+        },
+        {
+          id: 2,
+          username: "common",
+          ip: faker.internet.ipv4(),
+          address: "中国广东省深圳市",
+          system: "Windows",
+          browser: "Firefox",
+          status: 0,
+          summary: "列表分页查询",
+          module: "在线用户",
+          operatingTime: new Date()
+        }
+      ];
+      list = list.filter(item => item.module.includes(body?.module));
+      list = list.filter(item =>
+        String(item.status).includes(String(body?.status))
+      );
+      return {
+        success: true,
+        data: {
+          list,
+          total: list.length, // 总条目数
+          pageSize: 10, // 每页显示条目个数
+          currentPage: 1 // 当前页数
+        }
+      };
+    }
+  },
+  // 系统日志
+  {
+    url: "/system-logs",
+    method: "post",
+    response: ({ body }) => {
+      let list = [
+        {
+          id: 1, // 日志ID
+          /**
+           * 日志级别
+           * 0 debug调试（最低级别的日志，用于调试和开发阶段）
+           * 1 info信息（默认级别，用于记录一般的信息）
+           * 2 warn警告（表示可能出现的问题或潜在的错误，但不会影响系统的正常运行）
+           * 3 error错误（表示发生了错误，但不会导致系统崩溃）
+           * 4 fatal致命（最高级别的日志，表示发生了严重错误，导致系统无法继续运行）
+           */
+          level: 1,
+          module: "菜单管理", // 所属模块
+          url: "/menu", // 请求接口
+          method: "post", // 请求方法
+          ip: faker.internet.ipv4(),
+          address: "中国河南省信阳市",
+          system: "macOS",
+          browser: "Chrome",
+          /**
+           * 请求耗时（单位：ms 毫秒）
+           * 正常耗时：一般认为在几百毫秒（0.1-0.5秒）范围内的请求耗时较为正常
+           * 较慢耗时：在1秒以上的耗时可以被认为是较慢的请求，但具体是否较慢还需要根据具体业务场景和性能要求来判断
+           */
+          takesTime: 10,
+          requestTime: new Date() // 请求时间
+        },
+        {
+          id: 2,
+          level: 0,
+          module: "地图",
+          url: "/get-map-info",
+          method: "get",
+          ip: faker.internet.ipv4(),
+          address: "中国广东省深圳市",
+          system: "Windows",
+          browser: "Firefox",
+          takesTime: 1200,
+          requestTime: new Date()
+        }
+      ];
+      list = list.filter(item => item.module.includes(body?.module));
+      return {
+        success: true,
+        data: {
+          list,
+          total: list.length, // 总条目数
+          pageSize: 10, // 每页显示条目个数
+          currentPage: 1 // 当前页数
+        }
+      };
+    }
+  },
+  // 系统日志-根据 id 查日志详情
+  {
+    url: "/system-logs-detail",
+    method: "post",
+    response: ({ body }) => {
+      if (body.id == 1) {
+        return {
+          id: 1,
+          level: 1,
+          module: "菜单管理",
+          url: "/menu",
+          method: "post",
+          ip: faker.internet.ipv4(),
+          address: "中国河南省信阳市",
+          system: "macOS",
+          browser: "Chrome",
+          takesTime: 10,
+          responseHeaders: {
+            traceId: "1495502411171032",
+            "Content-Type": "application/json",
+            Connection: "keep-alive",
+            "Keep-Alive": "timeout=5",
+            "Content-Length": 17019
+          },
+          responseBody: {
+            success: true,
+            data: [
+              {
+                parentId: 0,
+                id: 400,
+                menuType: 0,
+                title: "menus.hssysMonitor",
+                name: "PureMonitor",
+                path: "/monitor",
+                component: "",
+                rank: 11,
+                redirect: "",
+                icon: "ep:monitor",
+                extraIcon: "",
+                enterTransition: "",
+                leaveTransition: "",
+                activePath: "",
+                auths: "",
+                frameSrc: "",
+                frameLoading: true,
+                keepAlive: false,
+                hiddenTag: false,
+                showLink: true,
+                showParent: false
+              },
+              {
+                parentId: 400,
+                id: 401,
+                menuType: 0,
+                title: "menus.hsOnlineUser",
+                name: "OnlineUser",
+                path: "/monitor/online-user",
+                component: "monitor/online/index",
+                rank: null,
+                redirect: "",
+                icon: "ri:user-voice-line",
+                extraIcon: "",
+                enterTransition: "",
+                leaveTransition: "",
+                activePath: "",
+                auths: "",
+                frameSrc: "",
+                frameLoading: true,
+                keepAlive: false,
+                hiddenTag: false,
+                showLink: true,
+                showParent: false
+              },
+              {
+                parentId: 400,
+                id: 402,
+                menuType: 0,
+                title: "menus.hsLoginLog",
+                name: "LoginLog",
+                path: "/monitor/login-logs",
+                component: "monitor/logs/login/index",
+                rank: null,
+                redirect: "",
+                icon: "ri:window-line",
+                extraIcon: "",
+                enterTransition: "",
+                leaveTransition: "",
+                activePath: "",
+                auths: "",
+                frameSrc: "",
+                frameLoading: true,
+                keepAlive: false,
+                hiddenTag: false,
+                showLink: true,
+                showParent: false
+              },
+              {
+                parentId: 400,
+                id: 403,
+                menuType: 0,
+                title: "menus.hsOperationLog",
+                name: "OperationLog",
+                path: "/monitor/operation-logs",
+                component: "monitor/logs/operation/index",
+                rank: null,
+                redirect: "",
+                icon: "ri:history-fill",
+                extraIcon: "",
+                enterTransition: "",
+                leaveTransition: "",
+                activePath: "",
+                auths: "",
+                frameSrc: "",
+                frameLoading: true,
+                keepAlive: false,
+                hiddenTag: false,
+                showLink: true,
+                showParent: false
+              },
+              {
+                parentId: 400,
+                id: 404,
+                menuType: 0,
+                title: "menus.hsSystemLog",
+                name: "SystemLog",
+                path: "/monitor/system-logs",
+                component: "monitor/logs/system/index",
+                rank: null,
+                redirect: "",
+                icon: "ri:file-search-line",
+                extraIcon: "",
+                enterTransition: "",
+                leaveTransition: "",
+                activePath: "",
+                auths: "",
+                frameSrc: "",
+                frameLoading: true,
+                keepAlive: false,
+                hiddenTag: false,
+                showLink: true,
+                showParent: false
+              }
+            ]
+          },
+          requestHeaders: {
+            Accept: "application/json, text/plain, */*",
+            "Accept-Encoding": "gzip, deflate",
+            "Accept-Language": "zh-CN,zh;q=0.9,en;q=0.8,eo;q=0.7",
+            Authorization: "Bearer eyJhbGciOiJIUzUxMiJ9.admin",
+            Connection: "keep-alive",
+            "Content-Length": 0,
+            Cookie:
+              "_ga=GA1.1.231800979.1704562367; _ga_M74ZHEQ1M1=GS1.1.1709299375.7.1.1709299476.0.0.0; Hm_lvt_6a7dac00248d3b6ad8479d7249bb29c5=1709032753,1709359575; Hm_lvt_23a157b7d0d9867f7a51e42628f052f5=1708960489,1709485849,1709879672; authorized-token={%22accessToken%22:%22eyJhbGciOiJIUzUxMiJ9.admin%22%2C%22expires%22:1919520000000}; multiple-tabs=true",
+            Host: "192.168.2.121:8848",
+            Origin: "http://192.168.2.121:8848",
+            Referer: "http://192.168.2.121:8848/",
+            "User-Agent":
+              "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36",
+            "X-Requested-With": "XMLHttpRequest"
+          },
+          requestBody: {
+            title: "系统监控"
+          },
+          traceId: "1495502411171032",
+          requestTime: new Date()
+        };
+      } else if (body.id == 2) {
+        return {
+          id: 2,
+          level: 0,
+          module: "地图",
+          url: "/get-map-info?plateNumber=豫A59778U",
+          method: "get",
+          ip: faker.internet.ipv4(),
+          address: "中国广东省深圳市",
+          system: "Windows",
+          browser: "Firefox",
+          takesTime: 1200,
+          responseHeaders: {
+            traceId: "2280443117103208",
+            "Content-Type": "application/json",
+            Connection: "keep-alive",
+            "Keep-Alive": "timeout=5",
+            "Content-Length": 28693
+          },
+          responseBody: {
+            plateNumber: "豫A59778U",
+            driver: "子骞",
+            orientation: 289,
+            lng: 113.8564,
+            lat: 34.373
+          },
+          requestHeaders: {
+            Accept: "application/json, text/plain, */*",
+            "Accept-Encoding": "gzip, deflate",
+            "Accept-Language": "zh-CN,zh;q=0.9,en;q=0.8,eo;q=0.7",
+            Authorization: "Bearer eyJhbGciOiJIUzUxMiJ9.admin",
+            Connection: "keep-alive",
+            "Content-Length": 0,
+            Cookie:
+              "_ga=GA1.1.231800979.1704562367; _ga_M74ZHEQ1M1=GS1.1.1709299375.7.1.1709299476.0.0.0; Hm_lvt_6a7dac00248d3b6ad8479d7249bb29c5=1709032753,1709359575; Hm_lvt_23a157b7d0d9867f7a51e42628f052f5=1708960489,1709485849,1709879672; authorized-token={%22accessToken%22:%22eyJhbGciOiJIUzUxMiJ9.admin%22%2C%22expires%22:1919520000000}; multiple-tabs=true",
+            Host: "192.168.2.121:8848",
+            Origin: "http://192.168.2.121:8848",
+            Referer: "http://192.168.2.121:8848/",
+            "User-Agent":
+              "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36",
+            "X-Requested-With": "XMLHttpRequest"
+          },
+          requestBody: null,
+          traceId: "2280443117103208",
+          requestTime: new Date()
+        };
+      }
+    }
  }
 ]);
--- 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": {
@@ -49,25 +49,28 @@
  },
  "dependencies": {
    "@amap/amap-jsapi-loader": "^1.0.1",
-    "@howdyjs/mouse-menu": "2.0.9",
-    "@logicflow/core": "^1.2.22",
-    "@logicflow/extension": "^1.2.22",
-    "@pureadmin/descriptions": "^1.2.0",
-    "@pureadmin/table": "^3.1.0",
-    "@pureadmin/utils": "^2.4.4",
+    "@howdyjs/mouse-menu": "^2.1.3",
+    "@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.7",
+    "@vue-flow/background": "^1.3.0",
+    "@vue-flow/core": "^1.33.4",
    "@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.0",
+    "element-plus": "^2.6.1",
    "intro.js": "^7.2.0",
    "js-cookie": "^3.0.5",
    "jsbarcode": "^3.11.6",
@@ -78,35 +81,37 @@
    "path": "^0.12.7",
    "pinia": "^2.1.7",
    "pinyin-pro": "^3.19.6",
-    "plus-pro-components": "^0.0.1",
+    "plus-pro-components": "^0.0.5",
    "qrcode": "^1.5.3",
-    "qs": "^6.11.2",
+    "qs": "^6.12.0",
    "responsive-storage": "^2.2.0",
    "sortablejs": "^1.15.2",
    "swiper": "^11.0.7",
-    "typeit": "8.7.1",
+    "typeit": "^8.8.3",
    "v-contextmenu": "^3.2.0",
    "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": "1.2.1",
+    "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",
-    "wavesurfer.js": "^7.7.3",
-    "xgplayer": "^3.0.13",
+    "vxe-table": "^4.5.21",
+    "wavesurfer.js": "^7.7.5",
+    "xgplayer": "^3.0.14",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
-    "@commitlint/cli": "^18.6.1",
-    "@commitlint/config-conventional": "^18.6.2",
-    "@commitlint/types": "^18.6.1",
+    "@commitlint/cli": "^19.2.1",
+    "@commitlint/config-conventional": "^19.1.0",
+    "@commitlint/types": "^19.0.3",
    "@eslint/js": "^8.57.0",
    "@faker-js/faker": "^8.4.1",
    "@iconify-icons/ep": "^1.2.12",
@@ -114,47 +119,49 @@
    "@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.24",
+    "@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.1.0",
-    "@typescript-eslint/parser": "^7.1.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.17",
+    "autoprefixer": "^10.4.19",
    "boxen": "^7.1.1",
    "cloc": "^2.11.0",
-    "cssnano": "^6.0.5",
+    "cssnano": "^6.1.1",
+    "dagre": "^0.8.5",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-define-config": "^2.1.0",
    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.22.0",
+    "eslint-plugin-vue": "^9.23.0",
    "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",
    "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.71.1",
+    "sass": "^1.72.0",
    "stylelint": "^16.2.1",
-    "stylelint-config-recess-order": "^4.6.0",
+    "stylelint-config-recess-order": "^5.0.0",
    "stylelint-config-recommended-vue": "^1.5.0",
    "stylelint-config-standard-scss": "^13.0.0",
    "stylelint-prettier": "^5.0.0",
    "svgo": "^3.2.0",
    "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.4",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.2",
    "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,
@@ -14,6 +14,7 @@
  "Weak": false,
  "HideTabs": false,
  "HideFooter": false,
+  "Stretch": false,
  "SidebarStatus": true,
  "EpThemeColor": "#409EFF",
  "ShowLogo": true,
@@ -24,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
@@ -19,32 +19,67 @@ type ResultTable = {
  };
 };

-/** 获取用户管理列表 */
+/** 获取系统管理-用户管理列表 */
 export const getUserList = (data?: object) => {
  return http.request<ResultTable>("post", "/user", { data });
 };

-/** 用户管理-获取所有角色列表 */
+/** 系统管理-用户管理-获取所有角色列表 */
 export const getAllRoleList = () => {
  return http.request<Result>("get", "/list-all-role");
 };

-/** 用户管理-根据userId，获取对应角色id列表（userId：用户id） */
+/** 系统管理-用户管理-根据userId，获取对应角色id列表（userId：用户id） */
 export const getRoleIds = (data?: object) => {
  return http.request<Result>("post", "/list-role-ids", { data });
 };

-/** 获取角色管理列表 */
+/** 获取系统管理-角色管理列表 */
 export const getRoleList = (data?: object) => {
  return http.request<ResultTable>("post", "/role", { data });
 };

-/** 获取部门管理列表 */
+/** 获取系统管理-菜单管理列表 */
+export const getMenuList = (data?: object) => {
+  return http.request<Result>("post", "/menu", { data });
+};
+
+/** 获取系统管理-部门管理列表 */
 export const getDeptList = (data?: object) => {
  return http.request<Result>("post", "/dept", { data });
 };

-/** 获取菜单管理列表 */
-export const getMenuList = (data?: object) => {
-  return http.request<Result>("post", "/menu", { data });
+/** 获取系统监控-在线用户列表 */
+export const getOnlineLogsList = (data?: object) => {
+  return http.request<ResultTable>("post", "/online-logs", { data });
+};
+
+/** 获取系统监控-登录日志列表 */
+export const getLoginLogsList = (data?: object) => {
+  return http.request<ResultTable>("post", "/login-logs", { data });
+};
+
+/** 获取系统监控-操作日志列表 */
+export const getOperationLogsList = (data?: object) => {
+  return http.request<ResultTable>("post", "/operation-logs", { data });
+};
+
+/** 获取系统监控-系统日志列表 */
+export const getSystemLogsList = (data?: object) => {
+  return http.request<ResultTable>("post", "/system-logs", { data });
+};
+
+/** 获取系统监控-系统日志-根据 id 查日志详情 */
+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
@@ -27,12 +27,19 @@ import Role from "@iconify-icons/ri/admin-fill";
 import Info from "@iconify-icons/ri/file-info-line";
 import Dept from "@iconify-icons/ri/git-branch-line";
 import Table from "@iconify-icons/ri/table-line";
+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";
 import CheckboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
@@ -42,13 +49,20 @@ addIcon("ri:bank-card-line", Card);
 addIcon("ri:admin-fill", Role);
 addIcon("ri:file-info-line", Info);
 addIcon("ri:git-branch-line", Dept);
+addIcon("ri:links-fill", Links);
 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);
 addIcon("ri:checkbox-circle-line", CheckboxCircleLine);
--- a/src/components/ReSegmented/src/index.css
+++ b/src/components/ReSegmented/src/index.css
@@ -8,6 +8,21 @@
  border-radius: 2px;
 }

+.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;
+}
+
 .pure-segmented-group {
  position: relative;
  display: flex;
@@ -67,6 +82,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
@@ -10,7 +10,12 @@ import {
 } from "vue";
 import type { OptionsType } from "./type";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { isFunction, isNumber, useDark } from "@pureadmin/utils";
+import {
+  isFunction,
+  isNumber,
+  useDark,
+  useResizeObserver
+} from "@pureadmin/utils";

 const props = {
  options: {
@@ -22,6 +27,11 @@ const props = {
    type: undefined,
    require: false,
    default: "0"
+  },
+  /** 将宽度调整为父元素宽度	 */
+  block: {
+    type: Boolean,
+    default: false
  }
 };

@@ -77,6 +87,14 @@ export default defineComponent({
      });
    }

+    if (props.block) {
+      useResizeObserver(".pure-segmented", () => {
+        nextTick(() => {
+          handleInit(curIndex.value);
+        });
+      });
+    }
+
    watch(
      () => curIndex.value,
      index => {
@@ -148,7 +166,9 @@ export default defineComponent({
    };

    return () => (
-      <div class="pure-segmented">
+      <div
+        class={["pure-segmented", props.block ? "pure-segmented-block" : ""]}
+      >
        <div class="pure-segmented-group">
          <div
            class="pure-segmented-item-selected"
--- a/src/components/ReTypeit/index.ts
+++ b/src/components/ReTypeit/index.ts
@@ -1,5 +1,5 @@
 import typeIt from "./src/index";
-import type { TypeItOptions } from "typeit";
+import type { Options as TypeItOptions } from "typeit";

 const TypeIt = typeIt;

--- a/src/components/ReTypeit/src/index.tsx
+++ b/src/components/ReTypeit/src/index.tsx
@@ -1,5 +1,5 @@
 import type { El } from "typeit/dist/types";
-import TypeIt, { type TypeItOptions } from "typeit";
+import TypeIt, { type Options as TypeItOptions } from "typeit";
 import { ref, defineComponent, onMounted, type PropType } from "vue";

 // 打字机效果组件（配置项详情请查阅 https://www.typeitjs.com/docs/vanilla/usage#options）
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -2,3 +2,4 @@ export * from "./auth";
 export * from "./copy";
 export * from "./longpress";
 export * from "./optimize";
+export * from "./ripple";
--- a/src/directives/ripple/index.scss
+++ b/src/directives/ripple/index.scss
@@ -0,0 +1,48 @@
+/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
+$ripple-animation-transition-in:
+  transform 0.4s cubic-bezier(0, 0, 0.2, 1),
+  opacity 0.2s cubic-bezier(0, 0, 0.2, 1) !default;
+$ripple-animation-transition-out: opacity 0.5s cubic-bezier(0, 0, 0.2, 1) !default;
+$ripple-animation-visible-opacity: 0.25 !default;
+
+.v-ripple {
+  &__container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    pointer-events: none;
+    border-radius: inherit;
+    contain: strict;
+  }
+
+  &__animation {
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    pointer-events: none;
+    background: currentcolor;
+    border-radius: 50%;
+    opacity: 0;
+    will-change: transform, opacity;
+
+    &--enter {
+      opacity: 0;
+      transition: none;
+    }
+
+    &--in {
+      opacity: $ripple-animation-visible-opacity;
+      transition: $ripple-animation-transition-in;
+    }
+
+    &--out {
+      opacity: 0;
+      transition: $ripple-animation-transition-out;
+    }
+  }
+}
--- a/src/directives/ripple/index.ts
+++ b/src/directives/ripple/index.ts
@@ -0,0 +1,234 @@
+import "./index.scss";
+import { isObject } from "@pureadmin/utils";
+import type { Directive, DirectiveBinding } from "vue";
+
+interface RippleOptions {
+  class?: string;
+  center?: boolean;
+  circle?: boolean;
+}
+
+export interface RippleDirectiveBinding
+  extends Omit<DirectiveBinding, "modifiers" | "value"> {
+  value?: boolean | { class: string };
+  modifiers: {
+    center?: boolean;
+    circle?: boolean;
+  };
+}
+
+function transform(el: HTMLElement, value: string) {
+  el.style.transform = value;
+  el.style.webkitTransform = value;
+}
+
+const calculate = (
+  e: PointerEvent,
+  el: HTMLElement,
+  value: RippleOptions = {}
+) => {
+  const offset = el.getBoundingClientRect();
+
+  // 获取点击位置距离 el 的垂直和水平距离
+  let localX = e.clientX - offset.left;
+  let localY = e.clientY - offset.top;
+
+  let radius = 0;
+  let scale = 0.3;
+  // 计算点击位置到 el 顶点最远距离，即为圆的最大半径（勾股定理）
+  if (el._ripple?.circle) {
+    scale = 0.15;
+    radius = el.clientWidth / 2;
+    radius = value.center
+      ? radius
+      : radius + Math.sqrt((localX - radius) ** 2 + (localY - radius) ** 2) / 4;
+  } else {
+    radius = Math.sqrt(el.clientWidth ** 2 + el.clientHeight ** 2) / 2;
+  }
+
+  // 中心点坐标
+  const centerX = `${(el.clientWidth - radius * 2) / 2}px`;
+  const centerY = `${(el.clientHeight - radius * 2) / 2}px`;
+
+  // 点击位置坐标
+  const x = value.center ? centerX : `${localX - radius}px`;
+  const y = value.center ? centerY : `${localY - radius}px`;
+
+  return { radius, scale, x, y, centerX, centerY };
+};
+
+const ripples = {
+  show(e: PointerEvent, el: HTMLElement, value: RippleOptions = {}) {
+    if (!el?._ripple?.enabled) {
+      return;
+    }
+
+    // 创建 ripple 元素和 ripple 父元素
+    const container = document.createElement("span");
+    const animation = document.createElement("span");
+
+    container.appendChild(animation);
+    container.className = "v-ripple__container";
+
+    if (value.class) {
+      container.className += ` ${value.class}`;
+    }
+
+    const { radius, scale, x, y, centerX, centerY } = calculate(e, el, value);
+
+    // ripple 圆大小
+    const size = `${radius * 2}px`;
+
+    animation.className = "v-ripple__animation";
+    animation.style.width = size;
+    animation.style.height = size;
+
+    el.appendChild(container);
+
+    // 获取目标元素样式表
+    const computed = window.getComputedStyle(el);
+    // 防止 position 被覆盖导致 ripple 位置有问题
+    if (computed && computed.position === "static") {
+      el.style.position = "relative";
+      el.dataset.previousPosition = "static";
+    }
+
+    animation.classList.add("v-ripple__animation--enter");
+    animation.classList.add("v-ripple__animation--visible");
+    transform(
+      animation,
+      `translate(${x}, ${y}) scale3d(${scale},${scale},${scale})`
+    );
+    animation.dataset.activated = String(performance.now());
+
+    setTimeout(() => {
+      animation.classList.remove("v-ripple__animation--enter");
+      animation.classList.add("v-ripple__animation--in");
+      transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`);
+    }, 0);
+  },
+
+  hide(el: HTMLElement | null) {
+    if (!el?._ripple?.enabled) return;
+
+    const ripples = el.getElementsByClassName("v-ripple__animation");
+
+    if (ripples.length === 0) return;
+    const animation = ripples[ripples.length - 1] as HTMLElement;
+
+    if (animation.dataset.isHiding) return;
+    else animation.dataset.isHiding = "true";
+
+    const diff = performance.now() - Number(animation.dataset.activated);
+    const delay = Math.max(250 - diff, 0);
+
+    setTimeout(() => {
+      animation.classList.remove("v-ripple__animation--in");
+      animation.classList.add("v-ripple__animation--out");
+
+      setTimeout(() => {
+        const ripples = el.getElementsByClassName("v-ripple__animation");
+        if (ripples.length === 1 && el.dataset.previousPosition) {
+          el.style.position = el.dataset.previousPosition;
+          delete el.dataset.previousPosition;
+        }
+
+        if (animation.parentNode?.parentNode === el)
+          el.removeChild(animation.parentNode);
+      }, 300);
+    }, delay);
+  }
+};
+
+function isRippleEnabled(value: any): value is true {
+  return typeof value === "undefined" || !!value;
+}
+
+function rippleShow(e: PointerEvent) {
+  const value: RippleOptions = {};
+  const element = e.currentTarget as HTMLElement | undefined;
+
+  if (!element?._ripple || element._ripple.touched) return;
+
+  value.center = element._ripple.centered;
+  if (element._ripple.class) {
+    value.class = element._ripple.class;
+  }
+
+  ripples.show(e, element, value);
+}
+
+function rippleHide(e: Event) {
+  const element = e.currentTarget as HTMLElement | null;
+  if (!element?._ripple) return;
+
+  window.setTimeout(() => {
+    if (element._ripple) {
+      element._ripple.touched = false;
+    }
+  });
+  ripples.hide(element);
+}
+
+function updateRipple(
+  el: HTMLElement,
+  binding: RippleDirectiveBinding,
+  wasEnabled: boolean
+) {
+  const { value, modifiers } = binding;
+  const enabled = isRippleEnabled(value);
+  if (!enabled) {
+    ripples.hide(el);
+  }
+
+  el._ripple = el._ripple ?? {};
+  el._ripple.enabled = enabled;
+  el._ripple.centered = modifiers.center;
+  el._ripple.circle = modifiers.circle;
+  if (isObject(value) && value.class) {
+    el._ripple.class = value.class;
+  }
+
+  if (enabled && !wasEnabled) {
+    el.addEventListener("pointerdown", rippleShow);
+    el.addEventListener("pointerup", rippleHide);
+  } else if (!enabled && wasEnabled) {
+    removeListeners(el);
+  }
+}
+
+function removeListeners(el: HTMLElement) {
+  el.removeEventListener("pointerdown", rippleShow);
+  el.removeEventListener("pointerup", rippleHide);
+}
+
+function mounted(el: HTMLElement, binding: RippleDirectiveBinding) {
+  updateRipple(el, binding, false);
+}
+
+function unmounted(el: HTMLElement) {
+  delete el._ripple;
+  removeListeners(el);
+}
+
+function updated(el: HTMLElement, binding: RippleDirectiveBinding) {
+  if (binding.value === binding.oldValue) {
+    return;
+  }
+
+  const wasEnabled = isRippleEnabled(binding.oldValue);
+  updateRipple(el, binding, wasEnabled);
+}
+
+/**
+ * @description 指令 v-ripple
+ * @use 用法如下
+ * 1. v-ripple 代表启用基本的 ripple 功能
+ * 2. v-ripple="{ class: 'text-red' }" 代表自定义 ripple 颜色，支持 tailwindcss，生效样式是 color
+ * 3. v-ripple.center 代表从中心扩散
+ */
+export const Ripple: Directive = {
+  mounted,
+  unmounted,
+  updated
+};
--- a/src/layout/components/appMain.vue
+++ b/src/layout/components/appMain.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Footer from "./footer/index.vue";
-import { useGlobal } from "@pureadmin/utils";
+import { useGlobal, isNumber } from "@pureadmin/utils";
 import KeepAliveFrame from "./keepAliveFrame/index.vue";
 import backTop from "@/assets/svg/back_top.svg?component";
 import { h, computed, Transition, defineComponent } from "vue";
@@ -30,16 +30,28 @@ const hideFooter = computed(() => {
  return $storage?.configure.hideFooter;
 });

+const stretch = computed(() => {
+  return $storage?.configure.stretch;
+});
+
 const layout = computed(() => {
  return $storage?.layout.layout === "vertical";
 });

+const getMainWidth = computed(() => {
+  return isNumber(stretch.value)
+    ? stretch.value + "px"
+    : stretch.value
+      ? "1440px"
+      : "100%";
+});
+
 const getSectionStyle = computed(() => {
  return [
    hideTabs.value && layout ? "padding-top: 48px;" : "",
-    !hideTabs.value && layout ? "padding-top: 85px;" : "",
+    !hideTabs.value && layout ? "padding-top: 81px;" : "",
    hideTabs.value && !layout.value ? "padding-top: 48px;" : "",
-    !hideTabs.value && !layout.value ? "padding-top: 85px;" : "",
+    !hideTabs.value && !layout.value ? "padding-top: 81px;" : "",
    props.fixedHeader
      ? ""
      : `padding-top: 0;${
@@ -96,12 +108,15 @@ const transitionMain = defineComponent({
              v-if="props.fixedHeader"
              :wrap-style="{
                display: 'flex',
-                'flex-wrap': 'wrap'
+                'flex-wrap': 'wrap',
+                'max-width': getMainWidth,
+                margin: '0 auto',
+                transition: 'all 300ms cubic-bezier(0.4, 0, 0.2, 1)'
              }"
              :view-style="{
                display: 'flex',
                flex: 'auto',
-                overflow: 'auto',
+                overflow: 'hidden',
                'flex-direction': 'column'
              }"
            >
--- a/src/layout/components/navbar.vue
+++ b/src/layout/components/navbar.vue
@@ -3,6 +3,7 @@ import Search from "./search/index.vue";
 import Notice from "./notice/index.vue";
 import mixNav from "./sidebar/mixNav.vue";
 import { useNav } from "@/layout/hooks/useNav";
+import FullScreen from "./sidebar/fullScreen.vue";
 import Breadcrumb from "./sidebar/breadCrumb.vue";
 import topCollapse from "./sidebar/topCollapse.vue";
 import { useTranslationLang } from "../hooks/useTranslationLang";
@@ -10,7 +11,6 @@ import globalization from "@/assets/svg/globalization.svg?component";
 import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
 import Setting from "@iconify-icons/ri/settings-3-line";
 import Check from "@iconify-icons/ep/check";
-
 const {
  layout,
  device,
@@ -47,8 +47,6 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
    <div v-if="layout === 'vertical'" class="vertical-header-right">
      <!-- 菜单搜索 -->
      <Search id="header-search" />
-      <!-- 通知 -->
-      <Notice id="header-notice" />
      <!-- 国际化 -->
      <el-dropdown id="header-translation" trigger="click">
        <globalization
@@ -81,6 +79,10 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
          </el-dropdown-menu>
        </template>
      </el-dropdown>
+      <!-- 全屏 -->
+      <FullScreen id="full-screen" />
+      <!-- 消息通知 -->
+      <Notice id="header-notice" />
      <!-- 退出登录 -->
      <el-dropdown trigger="click">
        <span class="el-dropdown-link navbar-bg-hover select-none">
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -13,13 +13,15 @@ import panel from "../panel/index.vue";
 import { emitter } from "@/utils/mitt";
 import { useNav } from "@/layout/hooks/useNav";
 import { useAppStoreHook } from "@/store/modules/app";
-import { useDark, debounce, useGlobal } from "@pureadmin/utils";
 import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import Segmented, { type OptionsType } from "@/components/ReSegmented";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
+import { useDark, useGlobal, debounce, isNumber } from "@pureadmin/utils";

 import Check from "@iconify-icons/ep/check";
+import LeftArrow from "@iconify-icons/ri/arrow-left-s-line";
+import RightArrow from "@iconify-icons/ri/arrow-right-s-line";
 import dayIcon from "@/assets/svg/day.svg?component";
 import darkIcon from "@/assets/svg/dark.svg?component";
 import systemIcon from "@/assets/svg/system.svg?component";
@@ -64,7 +66,8 @@ const settings = reactive({
  showLogo: $storage.configure.showLogo,
  showModel: $storage.configure.showModel,
  hideFooter: $storage.configure.hideFooter,
-  multiTagsCache: $storage.configure.multiTagsCache
+  multiTagsCache: $storage.configure.multiTagsCache,
+  stretch: $storage.configure.stretch
 });

 const getThemeColorStyle = computed(() => {
@@ -88,17 +91,15 @@ function storageConfigureChange<T>(key: string, val: T): void {

 /** 灰色模式设置 */
 const greyChange = (value): void => {
-  toggleClass(settings.greyVal, "html-grey", document.querySelector("html"));
+  const htmlEl = document.querySelector("html");
+  toggleClass(settings.greyVal, "html-grey", htmlEl);
  storageConfigureChange("grey", value);
 };

 /** 色弱模式设置 */
 const weekChange = (value): void => {
-  toggleClass(
-    settings.weakVal,
-    "html-weakness",
-    document.querySelector("html")
-  );
+  const htmlEl = document.querySelector("html");
+  toggleClass(settings.weakVal, "html-weakness", htmlEl);
  storageConfigureChange("weak", value);
 };

@@ -143,6 +144,30 @@ function setFalse(Doms): any {
  });
 }

+/** 页宽 */
+const stretchTypeOptions: Array<OptionsType> = [
+  {
+    label: "固定",
+    tip: "紧凑页面，轻松找到所需信息",
+    value: "fixed"
+  },
+  {
+    label: "自定义",
+    tip: "最小1280、最大1600",
+    value: "custom"
+  }
+];
+
+const setStretch = value => {
+  settings.stretch = value;
+  storageConfigureChange("stretch", value);
+};
+
+const stretchTypeChange = ({ option }) => {
+  const { value } = option;
+  value === "custom" ? setStretch(1440) : setStretch(false);
+};
+
 /** 主题色 激活选择项 */
 const getThemeColor = computed(() => {
  return current => {
@@ -162,6 +187,10 @@ const getThemeColor = computed(() => {
  };
 });

+const pClass = computed(() => {
+  return ["mb-[12px]", "font-medium", "text-sm", "dark:text-white"];
+});
+
 const themeOptions = computed<Array<OptionsType>>(() => {
  return [
    {
@@ -266,9 +295,9 @@ onBeforeMount(() => {
  nextTick(() => {
    watchSystemThemeChange();
    settings.greyVal &&
-      document.querySelector("html")?.setAttribute("class", "html-grey");
+      document.querySelector("html")?.classList.add("html-grey");
    settings.weakVal &&
-      document.querySelector("html")?.setAttribute("class", "html-weakness");
+      document.querySelector("html")?.classList.add("html-weakness");
    settings.tabsVal && tagsChange();
    settings.hideFooter && hideFooterChange();
  });
@@ -279,8 +308,8 @@ onUnmounted(() => removeMatchMedia);

 <template>
  <panel>
-    <div class="p-6">
-      <p class="mb-3 font-medium text-sm dark:text-white">整体风格</p>
+    <div class="p-5">
+      <p :class="pClass">整体风格</p>
      <Segmented
        class="select-none"
        :modelValue="overallStyle === 'system' ? 2 : dataTheme ? 1 : 0"
@@ -297,7 +326,7 @@ onUnmounted(() => removeMatchMedia);
        "
      />

-      <p class="mt-5 mb-3 font-medium text-sm dark:text-white">主题色</p>
+      <p :class="['mt-5', pClass]">主题色</p>
      <ul class="theme-color">
        <li
          v-for="(item, index) in themeColors"
@@ -316,7 +345,7 @@ onUnmounted(() => removeMatchMedia);
        </li>
      </ul>

-      <p class="mt-5 mb-3 font-medium text-sm dark:text-white">导航模式</p>
+      <p :class="['mt-5', pClass]">导航模式</p>
      <ul class="pure-theme">
        <li
          ref="verticalRef"
@@ -358,7 +387,50 @@ onUnmounted(() => removeMatchMedia);
        </li>
      </ul>

-      <p class="mt-5 mb-3 font-medium text-base dark:text-white">页签风格</p>
+      <span v-if="device !== 'mobile'">
+        <p :class="['mt-5', pClass]">页宽</p>
+        <Segmented
+          class="mb-2 select-none"
+          :modelValue="isNumber(settings.stretch) ? 1 : 0"
+          :options="stretchTypeOptions"
+          @change="stretchTypeChange"
+        />
+        <el-input-number
+          v-if="isNumber(settings.stretch)"
+          v-model="settings.stretch as number"
+          :min="1280"
+          :max="1600"
+          controls-position="right"
+          @change="value => setStretch(value)"
+        />
+        <button
+          v-else
+          v-ripple="{ class: 'text-gray-300' }"
+          class="bg-transparent flex-c w-full h-20 rounded-md border border-gray-100"
+          @click="setStretch(!settings.stretch)"
+        >
+          <div
+            class="flex-bc transition-all duration-300"
+            :class="[settings.stretch ? 'w-[24%]' : 'w-[50%]']"
+            style="color: var(--el-color-primary)"
+          >
+            <IconifyIconOffline
+              :icon="settings.stretch ? RightArrow : LeftArrow"
+              height="20"
+            />
+            <div
+              class="flex-grow border-b border-dashed"
+              style="border-color: var(--el-color-primary)"
+            />
+            <IconifyIconOffline
+              :icon="settings.stretch ? LeftArrow : RightArrow"
+              height="20"
+            />
+          </div>
+        </button>
+      </span>
+
+      <p :class="['mt-4', pClass]">页签风格</p>
      <Segmented
        class="select-none"
        :modelValue="markValue === 'smart' ? 0 : 1"
@@ -366,7 +438,7 @@ onUnmounted(() => removeMatchMedia);
        @change="onChange"
      />

-      <p class="mt-5 mb-1 font-medium text-sm dark:text-white">界面显示</p>
+      <p class="mt-5 font-medium text-sm dark:text-white">界面显示</p>
      <ul class="setting">
        <li>
          <span class="dark:text-white">灰色模式</span>
@@ -545,7 +617,7 @@ onUnmounted(() => removeMatchMedia);
    display: flex;
    align-items: center;
    justify-content: space-between;
-    padding: 4px 0;
+    padding: 3px 0;
    font-size: 14px;
  }
 }
--- 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/fullScreen.vue
+++ b/src/layout/components/sidebar/fullScreen.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useNav } from "@/layout/hooks/useNav";
+
+const screenIcon = ref();
+const { toggle, isFullscreen, Fullscreen, ExitFullscreen } = useNav();
+
+isFullscreen.value = !!(
+  document.fullscreenElement ||
+  document.webkitFullscreenElement ||
+  document.mozFullScreenElement ||
+  document.msFullscreenElement
+);
+
+watch(
+  isFullscreen,
+  full => {
+    screenIcon.value = full ? ExitFullscreen : Fullscreen;
+  },
+  {
+    immediate: true
+  }
+);
+</script>
+
+<template>
+  <span class="fullscreen-icon navbar-bg-hover" @click="toggle">
+    <IconifyIconOffline :icon="screenIcon" />
+  </span>
+</template>
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Search from "../search/index.vue";
 import Notice from "../notice/index.vue";
+import FullScreen from "./fullScreen.vue";
 import SidebarItem from "./sidebarItem.vue";
 import { isAllEmpty } from "@pureadmin/utils";
 import { ref, nextTick, computed } from "vue";
@@ -65,8 +66,6 @@ nextTick(() => {
    <div class="horizontal-header-right">
      <!-- 菜单搜索 -->
      <Search id="header-search" />
-      <!-- 通知 -->
-      <Notice id="header-notice" />
      <!-- 国际化 -->
      <el-dropdown id="header-translation" trigger="click">
        <globalization
@@ -97,6 +96,10 @@ nextTick(() => {
          </el-dropdown-menu>
        </template>
      </el-dropdown>
+      <!-- 全屏 -->
+      <FullScreen id="full-screen" />
+      <!-- 消息通知 -->
+      <Notice id="header-notice" />
      <!-- 退出登录 -->
      <el-dropdown trigger="click">
        <span class="el-dropdown-link navbar-bg-hover">
--- 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/mixNav.vue
+++ b/src/layout/components/sidebar/mixNav.vue
@@ -2,6 +2,7 @@
 import extraIcon from "./extraIcon.vue";
 import Search from "../search/index.vue";
 import Notice from "../notice/index.vue";
+import FullScreen from "./fullScreen.vue";
 import { isAllEmpty } from "@pureadmin/utils";
 import { useNav } from "@/layout/hooks/useNav";
 import { transformI18n } from "@/plugins/i18n";
@@ -98,8 +99,6 @@ watch(
    <div class="horizontal-header-right">
      <!-- 菜单搜索 -->
      <Search id="header-search" />
-      <!-- 通知 -->
-      <Notice id="header-notice" />
      <!-- 国际化 -->
      <el-dropdown id="header-translation" trigger="click">
        <globalization
@@ -130,6 +129,10 @@ watch(
          </el-dropdown-menu>
        </template>
      </el-dropdown>
+      <!-- 全屏 -->
+      <FullScreen id="full-screen" />
+      <!-- 消息通知 -->
+      <Notice id="header-notice" />
      <!-- 退出登录 -->
      <el-dropdown trigger="click">
        <span class="el-dropdown-link navbar-bg-hover select-none">
--- 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/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -4,7 +4,7 @@ import { emitter } from "@/utils/mitt";
 import { RouteConfigs } from "../../types";
 import { useTags } from "../../hooks/useTag";
 import { routerArrays } from "@/layout/types";
-import { useFullscreen, onClickOutside } from "@vueuse/core";
+import { onClickOutside } from "@vueuse/core";
 import { handleAliveRoute, getTopMenu } from "@/router/utils";
 import { useSettingStoreHook } from "@/store/modules/settings";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
@@ -59,7 +59,6 @@ const contextmenuRef = ref();
 const isShowArrow = ref(false);
 const topPath = getTopMenu()?.path;
 const { VITE_HIDE_HOME } = import.meta.env;
-const { isFullscreen, toggle } = useFullscreen();

 const dynamicTagView = async () => {
  await nextTick();
@@ -329,28 +328,15 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
      handleAliveRoute(route as ToRouteType);
      break;
    case 6:
-      // 整体页面全屏
-      toggle();
-      setTimeout(() => {
-        if (isFullscreen.value) {
-          tagsViews[6].icon = ExitFullscreen;
-          tagsViews[6].text = $t("buttons.hswholeExitFullScreen");
-        } else {
-          tagsViews[6].icon = Fullscreen;
-          tagsViews[6].text = $t("buttons.hswholeFullScreen");
-        }
-      }, 100);
-      break;
-    case 7:
      // 内容区全屏
      onContentFullScreen();
      setTimeout(() => {
        if (pureSetting.hiddenSideBar) {
-          tagsViews[7].icon = ExitFullscreen;
-          tagsViews[7].text = $t("buttons.hscontentExitFullScreen");
+          tagsViews[6].icon = ExitFullscreen;
+          tagsViews[6].text = $t("buttons.hscontentExitFullScreen");
        } else {
-          tagsViews[7].icon = Fullscreen;
-          tagsViews[7].text = $t("buttons.hscontentFullScreen");
+          tagsViews[6].icon = Fullscreen;
+          tagsViews[6].text = $t("buttons.hscontentFullScreen");
        }
      }, 100);
      break;
@@ -511,11 +497,6 @@ watch(route, () => {
  dynamicTagView();
 });

-watch(isFullscreen, () => {
-  tagsViews[6].icon = Fullscreen;
-  tagsViews[6].text = $t("buttons.hswholeFullScreen");
-});
-
 onMounted(() => {
  if (!instance) return;

--- a/src/layout/hooks/useDataThemeChange.ts
+++ b/src/layout/hooks/useDataThemeChange.ts
@@ -45,7 +45,7 @@ export function useDataThemeChange() {
    const targetEl = target || document.body;
    let { className } = targetEl;
    className = className.replace(clsName, "").trim();
-    targetEl.className = flag ? `${className} ${clsName} ` : className;
+    targetEl.className = flag ? `${className} ${clsName}` : className;
  }

  /** 设置导航主题色 */
--- a/src/layout/hooks/useLayout.ts
+++ b/src/layout/hooks/useLayout.ts
@@ -41,7 +41,8 @@ export function useLayout() {
        hideFooter: $config.HideFooter ?? true,
        showLogo: $config?.ShowLogo ?? true,
        showModel: $config?.ShowModel ?? "smart",
-        multiTagsCache: $config?.MultiTagsCache ?? false
+        multiTagsCache: $config?.MultiTagsCache ?? false,
+        stretch: $config?.Stretch ?? false
      };
    }
  };
--- a/src/layout/hooks/useNav.ts
+++ b/src/layout/hooks/useNav.ts
@@ -4,6 +4,7 @@ import { useRouter } from "vue-router";
 import { emitter } from "@/utils/mitt";
 import userAvatar from "@/assets/user.jpg";
 import { getTopMenu } from "@/router/utils";
+import { useFullscreen } from "@vueuse/core";
 import { useGlobal } from "@pureadmin/utils";
 import type { routeMetaType } from "../types";
 import { transformI18n } from "@/plugins/i18n";
@@ -13,12 +14,15 @@ import { useAppStoreHook } from "@/store/modules/app";
 import { useUserStoreHook } from "@/store/modules/user";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { usePermissionStoreHook } from "@/store/modules/permission";
+import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+import Fullscreen from "@iconify-icons/ri/fullscreen-fill";

 const errorInfo = "当前路由配置不正确，请检查配置";

 export function useNav() {
  const pureApp = useAppStoreHook();
  const routers = useRouter().options.routes;
+  const { isFullscreen, toggle } = useFullscreen();
  const { wholeMenus } = storeToRefs(usePermissionStoreHook());
  /** 平台`layout`中所有`el-tooltip`的`effect`配置，默认`light` */
  const tooltipEffect = getConfig()?.TooltipEffect ?? "light";
@@ -136,6 +140,10 @@ export function useNav() {
    logout,
    routers,
    $storage,
+    isFullscreen,
+    Fullscreen,
+    ExitFullscreen,
+    toggle,
    backTopMenu,
    onPanel,
    getDivStyle,
--- a/src/layout/hooks/useTag.ts
+++ b/src/layout/hooks/useTag.ts
@@ -104,17 +104,10 @@ export function useTags() {
      disabled: multiTags.value.length > 1 ? false : true,
      show: true
    },
-    {
-      icon: Fullscreen,
-      text: $t("buttons.hswholeFullScreen"),
-      divided: true,
-      disabled: false,
-      show: true
-    },
    {
      icon: Fullscreen,
      text: $t("buttons.hscontentFullScreen"),
-      divided: false,
+      divided: true,
      disabled: false,
      show: true
    }
--- 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/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,31 +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,
-  tabs = 11,
-  about = 12,
-  editor = 13,
-  flowchart = 14,
-  formdesign = 15,
-  board = 16,
-  ppt = 17,
-  guide = 18,
-  menuoverflow = 19;
+  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,
@@ -33,6 +40,7 @@ export {
  nested,
  permission,
  system,
+  monitor,
  tabs,
  about,
  editor,
--- a/src/router/modules/able.ts
+++ b/src/router/modules/able.ts
@@ -10,6 +10,15 @@ export default {
    rank: able
  },
  children: [
+    {
+      path: "/able/verify",
+      name: "Verify",
+      component: () => import("@/views/able/verify.vue"),
+      meta: {
+        title: $t("menus.hsVerify"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
    {
      path: "/able/watermark",
      name: "WaterMark",
@@ -42,6 +51,15 @@ export default {
        title: $t("menus.hsExcel")
      }
    },
+    {
+      path: "/components/ripple",
+      name: "Ripple",
+      component: () => import("@/views/able/ripple.vue"),
+      meta: {
+        title: $t("menus.hsRipple"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
    {
      path: "/able/debounce",
      name: "Debounce",
--- 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/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,
@@ -96,15 +157,8 @@ html.dark {
    color: var(--el-color-primary);
  }

-  /* element-plus */
-  .el-table__cell {
-    background: var(--el-bg-color);
-  }
-
  .el-card {
    --el-card-bg-color: var(--el-bg-color);
-
-    // border: none !important;
  }

  .el-backtop {
--- a/src/style/element-plus.scss
+++ b/src/style/element-plus.scss
@@ -64,7 +64,7 @@
  }
 }

-/* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标和el-upload上传文件列表右侧关闭图标的样式，表现更鲜明 */
+/* 全局覆盖element-plus的el-tour、el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标和el-upload上传文件列表右侧关闭图标的样式，表现更鲜明 */
 .el-dialog__headerbtn,
 .el-message-box__headerbtn {
  &:hover {
@@ -75,6 +75,7 @@
 }

 .el-icon {
+  &.el-tour__close,
  &.el-dialog__close,
  &.el-drawer__close,
  &.el-message-box__close,
--- a/src/style/login.css
+++ b/src/style/login.css
@@ -31,6 +31,7 @@
  display: flex;
  align-items: center;
  text-align: center;
+  overflow: hidden;
 }

 .login-form {
--- a/src/style/reset.scss
+++ b/src/style/reset.scss
@@ -194,7 +194,6 @@ button,
  cursor: default;
 }

-img,
 svg,
 video,
 canvas,
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -35,7 +35,8 @@
    }
  }

-  .set-icon {
+  .set-icon,
+  .fullscreen-icon {
    display: flex;
    align-items: center;
    justify-content: center;
@@ -91,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);
@@ -460,10 +461,12 @@

      /* 搜索 */
      .search-container,
-      /* 告警 */
-      .dropdown-badge,
      /* 国际化 */
      .globalization,
+      /* 全屏 */
+      .fullscreen-icon,
+      /* 消息通知 */
+      .dropdown-badge,
      /* 用户名 */
      .el-dropdown-link,
      /* 设置 */
@@ -642,10 +645,12 @@ body[layout="vertical"] {

  /* 搜索 */
  .search-container,
-  /* 告警 */
-  .dropdown-badge,
  /* 国际化 */
  .globalization,
+  /* 全屏 */
+  .fullscreen-icon,
+  /* 消息通知 */
+  .dropdown-badge,
  /* 用户名 */
  .el-dropdown-link,
  /* 设置 */
--- a/src/utils/responsive.ts
+++ b/src/utils/responsive.ts
@@ -30,7 +30,8 @@ export const injectResponsiveStorage = (app: App, config: PlatformConfigs) => {
        hideFooter: config.HideFooter ?? true,
        showLogo: config.ShowLogo ?? true,
        showModel: config.ShowModel ?? "smart",
-        multiTagsCache: config.MultiTagsCache ?? false
+        multiTagsCache: config.MultiTagsCache ?? false,
+        stretch: config.Stretch ?? false
      }
    },
    config.MultiTagsCache
--- a/src/views/able/pdf.vue
+++ b/src/views/able/pdf.vue
@@ -21,7 +21,7 @@ const source =

 const handleDocumentRender = () => {
  loading.value = false;
-  pageCount.value = pdfRef.value.pageCount;
+  pageCount.value = pdfRef.value.doc.numPages;
 };

 const showAllPagesChange = () => {
@@ -29,6 +29,7 @@ const showAllPagesChange = () => {
 };

 const onPrint = () => {
+  // 如果在打印时，打印页面是本身的两倍，在打印配置 页面 设置 仅限页码为奇数的页面 即可
  pdfRef.value.print();
 };
 </script>
--- a/src/views/able/ripple.vue
+++ b/src/views/able/ripple.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+defineOptions({
+  name: "Ripple"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="font-medium">波纹(Ripple)</div>
+    </template>
+    <div class="mb-5">组件中的波纹</div>
+    <el-alert
+      title="v-ripple在某些组件中使用波纹特效会异常，这是因为v-ripple指令只能作用于当前元素，某些组件有多层元素嵌套，且目标元素没在顶层，所以会导致特效异常"
+      type="warning"
+      :closable="false"
+    />
+    <el-space wrap class="my-5">
+      <el-button v-ripple>Default</el-button>
+      <el-button v-ripple type="primary">Primary</el-button>
+      <el-button v-ripple type="success">Success</el-button>
+      <el-button v-ripple type="info">Info</el-button>
+      <el-button v-ripple type="warning">Warning</el-button>
+      <el-button v-ripple type="danger">Danger</el-button>
+    </el-space>
+    <el-card v-ripple class="mb-5 w-[510px] select-none" shadow="hover">
+      卡片
+    </el-card>
+
+    <div class="mb-5">
+      只要在组件或HTML元素上使用v-ripple指令，就可以启用基本的ripple功能
+    </div>
+    <div
+      v-ripple
+      class="mb-5 text-center shadow-md rounded-md p-8 text-lg select-none"
+    >
+      HTML元素
+    </div>
+    <span
+      v-ripple
+      class="inline-block shadow-md rounded-md p-8 text-lg select-none"
+    >
+      行内元素需要添加display: block或display: inline-block才能生效
+    </span>
+
+    <div class="my-5">
+      当使用v-ripple.center时，将始终从目标的中心处产生波纹
+    </div>
+    <div
+      v-ripple.center
+      class="mb-5 text-center shadow-md rounded-md p-8 text-lg select-none"
+    >
+      始终从中心触发波纹
+    </div>
+
+    <div class="mb-5">
+      使用v-ripple="{ class: '' }"添加类来自定义波纹颜色，支持tailwindcss
+    </div>
+    <el-alert
+      title="自定义样式生效为文字颜色，例如：color: 'red';"
+      type="warning"
+      :closable="false"
+    />
+    <div
+      v-ripple="{ class: 'text-red-500' }"
+      class="my-5 text-center shadow-md rounded-md p-4 text-lg select-none"
+    >
+      自定义波纹颜色
+    </div>
+  </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/about/columns.tsx
+++ b/src/views/about/columns.tsx
@@ -4,6 +4,7 @@ export function useColumns() {
  const columns = [
    {
      label: "当前版本",
+      minWidth: 100,
      cellRenderer: () => {
        return (
          <el-tag size="large" class="!text-base">
@@ -14,6 +15,7 @@ export function useColumns() {
    },
    {
      label: "最后编译时间",
+      minWidth: 120,
      cellRenderer: () => {
        return (
          <el-tag size="large" class="!text-base">
@@ -24,6 +26,7 @@ export function useColumns() {
    },
    {
      label: "推荐 node 版本",
+      minWidth: 140,
      cellRenderer: () => {
        return (
          <el-tag size="large" class="!text-base">
@@ -34,6 +37,7 @@ export function useColumns() {
    },
    {
      label: "推荐 pnpm 版本",
+      minWidth: 140,
      cellRenderer: () => {
        return (
          <el-tag size="large" class="!text-base">
@@ -44,6 +48,7 @@ export function useColumns() {
    },
    {
      label: "完整版代码地址",
+      minWidth: 140,
      className: "pure-version",
      cellRenderer: () => {
        return (
@@ -58,6 +63,7 @@ export function useColumns() {
    },
    {
      label: "精简版代码地址",
+      minWidth: 140,
      className: "pure-version",
      cellRenderer: () => {
        return (
@@ -72,6 +78,7 @@ export function useColumns() {
    },
    {
      label: "文档地址",
+      minWidth: 100,
      className: "pure-version",
      cellRenderer: () => {
        return (
@@ -86,6 +93,7 @@ export function useColumns() {
    },
    {
      label: "预览地址",
+      minWidth: 100,
      className: "pure-version",
      cellRenderer: () => {
        return (
--- a/src/views/about/index.vue
+++ b/src/views/about/index.vue
@@ -75,67 +75,79 @@ Object.keys(devDependencies).forEach(key => {
          <span class="font-medium">平台信息</span>
        </div>
      </template>
-      <PureDescriptions border :columns="columns" :column="4" />
+      <el-scrollbar>
+        <PureDescriptions border :columns="columns" :column="4" />
+      </el-scrollbar>
    </el-card>

    <el-card class="m-4 box-card" shadow="never">
      <template #header>
-        <div class="card-header">
+        <div class="card-header flex items-center">
          <span class="font-medium">生产环境依赖</span>
+          <el-tag type="primary" effect="dark" size="small" round class="ml-1">
+            {{ schema.length }}
+          </el-tag>
        </div>
      </template>
-      <el-descriptions border size="small" :column="6">
-        <el-descriptions-item
-          v-for="(item, index) in schema"
-          :key="index"
-          :label="item.label"
-          :label-class-name="getMainLabel(item.label)"
-          class-name="pure-version"
-          label-align="right"
-        >
-          <a
-            :href="'https://www.npmjs.com/package/' + item.label"
-            target="_blank"
+      <el-scrollbar>
+        <el-descriptions border size="small" :column="6">
+          <el-descriptions-item
+            v-for="(item, index) in schema"
+            :key="index"
+            :label="item.label"
+            :label-class-name="getMainLabel(item.label)"
+            class-name="pure-version"
+            label-align="right"
          >
-            <span
-              :class="getMainLabel(item.label)"
-              style="color: var(--el-color-primary)"
+            <a
+              :href="'https://www.npmjs.com/package/' + item.label"
+              target="_blank"
            >
-              {{ item.field }}
-            </span>
-          </a>
-        </el-descriptions-item>
-      </el-descriptions>
+              <span
+                :class="getMainLabel(item.label)"
+                style="color: var(--el-color-primary)"
+              >
+                {{ item.field }}
+              </span>
+            </a>
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-scrollbar>
    </el-card>

    <el-card class="m-4 box-card" shadow="never">
      <template #header>
-        <div class="card-header">
+        <div class="card-header flex items-center">
          <span class="font-medium">开发环境依赖</span>
+          <el-tag type="primary" effect="dark" size="small" round class="ml-1">
+            {{ devSchema.length }}
+          </el-tag>
        </div>
      </template>
-      <el-descriptions border size="small" :column="5">
-        <el-descriptions-item
-          v-for="(item, index) in devSchema"
-          :key="index"
-          :label="item.label"
-          :label-class-name="getMainLabel(item.label)"
-          class-name="pure-version"
-          label-align="right"
-        >
-          <a
-            :href="'https://www.npmjs.com/package/' + item.label"
-            target="_blank"
+      <el-scrollbar>
+        <el-descriptions border size="small" :column="5">
+          <el-descriptions-item
+            v-for="(item, index) in devSchema"
+            :key="index"
+            :label="item.label"
+            :label-class-name="getMainLabel(item.label)"
+            class-name="pure-version"
+            label-align="right"
          >
-            <span
-              :class="getMainLabel(item.label)"
-              style="color: var(--el-color-primary)"
+            <a
+              :href="'https://www.npmjs.com/package/' + item.label"
+              target="_blank"
            >
-              {{ item.field }}
-            </span>
-          </a>
-        </el-descriptions-item>
-      </el-descriptions>
+              <span
+                :class="getMainLabel(item.label)"
+                style="color: var(--el-color-primary)"
+              >
+                {{ item.field }}
+              </span>
+            </a>
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-scrollbar>
    </el-card>
  </div>
 </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
@@ -2,8 +2,8 @@
 import { useRouter } from "vue-router";
 import { h, createVNode, ref } from "vue";
 import { message } from "@/utils/message";
-import forms, { type FormProps } from "./form.vue";
 import formPrimitive from "./formPrimitive.vue";
+import forms, { type FormProps } from "./form.vue";
 import { cloneDeep, debounce } from "@pureadmin/utils";
 import {
  addDialog,
@@ -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/json-editor.vue
+++ b/src/views/components/json-editor.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, watch } from "vue";
-import VueJsonPretty from "vue-json-pretty";
 import "vue-json-pretty/lib/styles.css";
+import VueJsonPretty from "vue-json-pretty";

 defineOptions({
  name: "JsonEditor"
--- a/src/views/components/segmented.vue
+++ b/src/views/components/segmented.vue
@@ -75,6 +75,26 @@ const optionsDisabled: Array<OptionsType> = [
  }
 ];

+/** block */
+const optionsBlock: Array<OptionsType> = [
+  {
+    label: "周一"
+  },
+  {
+    label: "周二"
+  },
+  {
+    label: "周三"
+  },
+  {
+    label: "周四"
+  },
+  {
+    label: "周五喜悦，收尾归档，周末倒计时",
+    tip: "周五喜悦，收尾归档，周末倒计时"
+  }
+];
+
 /** 可设置图标 */
 const optionsIcon: Array<OptionsType> = [
  {
@@ -198,6 +218,9 @@ function onChange({ index, option }) {
      <p class="mb-2">禁用</p>
      <Segmented :options="optionsDisabled" />
      <el-divider />
+      <p class="mb-2">block 属性(将宽度调整为父元素宽度)</p>
+      <Segmented :options="optionsBlock" block />
+      <el-divider />
      <p class="mb-2">可设置图标</p>
      <Segmented :options="optionsIcon" />
      <el-divider />
--- 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/guide/index.vue
+++ b/src/views/guide/index.vue
@@ -1,63 +1,81 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import intro from "intro.js";
 import "intro.js/minified/introjs.min.css";

+type GuideStep = {
+  element: string | HTMLElement;
+  title: string;
+  intro: string;
+  position: "left" | "right" | "top" | "bottom";
+};
+
 defineOptions({
  name: "Guide"
 });

+const GUIDE_STEPS = [
+  {
+    element: document.querySelector(".sidebar-logo-container") as
+      | string
+      | HTMLElement,
+    title: "项目名称和Logo",
+    intro: "您可以在这里设置项目名称和Logo",
+    position: "left"
+  },
+  {
+    element: document.querySelector("#header-search") as string | HTMLElement,
+    title: "搜索菜单",
+    intro: "您可以在这里搜索想要查看的菜单",
+    position: "left"
+  },
+  {
+    element: document.querySelector("#header-translation") as
+      | string
+      | HTMLElement,
+    title: "国际化",
+    intro: "您可以在这里进行语言切换",
+    position: "left"
+  },
+  {
+    element: document.querySelector("#full-screen") as string | HTMLElement,
+    title: "全屏",
+    intro: "您可以在这里进行全屏切换",
+    position: "left"
+  },
+  {
+    element: document.querySelector("#header-notice") as string | HTMLElement,
+    title: "消息通知",
+    intro: "您可以在这里查看管理员发送的消息",
+    position: "left"
+  },
+  {
+    element: document.querySelector(".set-icon") as string | HTMLElement,
+    title: "项目配置",
+    intro: "您可以在这里查看项目配置",
+    position: "left"
+  },
+  {
+    element: document.querySelector(".tags-view") as string | HTMLElement,
+    title: "多标签页",
+    intro: "这里是您访问过的页面的历史",
+    position: "bottom"
+  }
+] as Partial<GuideStep>[];
+
+const tourOpen = ref(false);
+
 const onGuide = () => {
  intro()
    .setOptions({
-      steps: [
-        {
-          element: document.querySelector(".sidebar-logo-container") as
-            | string
-            | HTMLElement,
-          title: "项目名称和Logo",
-          intro: "您可以在这里设置项目名称和Logo",
-          position: "left"
-        },
-        {
-          element: document.querySelector("#header-search") as
-            | string
-            | HTMLElement,
-          title: "搜索菜单",
-          intro: "您可以在这里搜索想要查看的菜单",
-          position: "left"
-        },
-        {
-          element: document.querySelector("#header-notice") as
-            | string
-            | HTMLElement,
-          title: "消息通知",
-          intro: "您可以在这里查看管理员发送的消息",
-          position: "left"
-        },
-        {
-          element: document.querySelector("#header-translation") as
-            | string
-            | HTMLElement,
-          title: "国际化",
-          intro: "您可以在这里进行语言切换",
-          position: "left"
-        },
-        {
-          element: document.querySelector(".set-icon") as string | HTMLElement,
-          title: "项目配置",
-          intro: "您可以在这里查看项目配置",
-          position: "left"
-        },
-        {
-          element: document.querySelector(".tags-view") as string | HTMLElement,
-          title: "多标签页",
-          intro: "这里是您访问过的页面的历史",
-          position: "bottom"
-        }
-      ]
+      steps: GUIDE_STEPS
    })
    .start();
 };
+
+const onTour = () => {
+  tourOpen.value = true;
+};
 </script>

 <template>
@@ -69,6 +87,18 @@ const onGuide = () => {
        </span>
      </div>
    </template>
-    <el-button @click="onGuide"> 打开引导页 </el-button>
+    <el-button @click="onGuide"> 打开引导页 (intro.js) </el-button>
+    <el-button @click="onTour"> 打开引导页 (el-tour) </el-button>
+
+    <el-tour v-model="tourOpen">
+      <el-tour-step
+        v-for="step in GUIDE_STEPS"
+        :key="step.title"
+        :target="() => step.element"
+        :title="step.title"
+        :description="step.intro"
+        :placement="step.position"
+      />
+    </el-tour>
  </el-card>
 </template>
--- a/src/views/monitor/logs/login/hook.tsx
+++ b/src/views/monitor/logs/login/hook.tsx
@@ -0,0 +1,169 @@
+import dayjs from "dayjs";
+import { message } from "@/utils/message";
+import { getKeyList } from "@pureadmin/utils";
+import { getLoginLogsList } from "@/api/system";
+import { usePublicHooks } from "@/views/system/hooks";
+import type { PaginationProps } from "@pureadmin/table";
+import { type Ref, reactive, ref, onMounted, toRaw } from "vue";
+
+export function useRole(tableRef: Ref) {
+  const form = reactive({
+    username: "",
+    status: "",
+    loginTime: ""
+  });
+  const dataList = ref([]);
+  const loading = ref(true);
+  const selectedNum = ref(0);
+  const { tagStyle } = usePublicHooks();
+
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+  const columns: TableColumnList = [
+    {
+      label: "勾选列", // 如果需要表格多选，此处label必须设置
+      type: "selection",
+      fixed: "left",
+      reserveSelection: true // 数据刷新后保留选项
+    },
+    {
+      label: "序号",
+      prop: "id",
+      minWidth: 90
+    },
+    {
+      label: "用户名",
+      prop: "username",
+      minWidth: 100
+    },
+    {
+      label: "登录 IP",
+      prop: "ip",
+      minWidth: 140
+    },
+    {
+      label: "登录地点",
+      prop: "address",
+      minWidth: 140
+    },
+    {
+      label: "操作系统",
+      prop: "system",
+      minWidth: 100
+    },
+    {
+      label: "浏览器类型",
+      prop: "browser",
+      minWidth: 100
+    },
+    {
+      label: "登录状态",
+      prop: "status",
+      minWidth: 100,
+      cellRenderer: ({ row, props }) => (
+        <el-tag size={props.size} style={tagStyle.value(row.status)}>
+          {row.status === 1 ? "成功" : "失败"}
+        </el-tag>
+      )
+    },
+    {
+      label: "登录行为",
+      prop: "behavior",
+      minWidth: 100
+    },
+    {
+      label: "登录时间",
+      prop: "loginTime",
+      minWidth: 180,
+      formatter: ({ loginTime }) =>
+        dayjs(loginTime).format("YYYY-MM-DD HH:mm:ss")
+    }
+  ];
+
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+  }
+
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+  }
+
+  /** 当CheckBox选择项发生变化时会触发该事件 */
+  function handleSelectionChange(val) {
+    selectedNum.value = val.length;
+    // 重置表格高度
+    tableRef.value.setAdaptive();
+  }
+
+  /** 取消选择 */
+  function onSelectionCancel() {
+    selectedNum.value = 0;
+    // 用于多选表格，清空用户的选择
+    tableRef.value.getTableRef().clearSelection();
+  }
+
+  /** 批量删除 */
+  function onbatchDel() {
+    // 返回当前选中的行
+    const curSelected = tableRef.value.getTableRef().getSelectionRows();
+    // 接下来根据实际业务，通过选中行的某项数据，比如下面的id，调用接口进行批量删除
+    message(`已删除序号为 ${getKeyList(curSelected, "id")} 的数据`, {
+      type: "success"
+    });
+    tableRef.value.getTableRef().clearSelection();
+    onSearch();
+  }
+
+  /** 清空日志 */
+  function clearAll() {
+    // 根据实际业务，调用接口删除所有日志数据
+    message("已删除所有日志数据", {
+      type: "success"
+    });
+    onSearch();
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    const { data } = await getLoginLogsList(toRaw(form));
+    dataList.value = data.list;
+    pagination.total = data.total;
+    pagination.pageSize = data.pageSize;
+    pagination.currentPage = data.currentPage;
+
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+
+  const resetForm = formEl => {
+    if (!formEl) return;
+    formEl.resetFields();
+    onSearch();
+  };
+
+  onMounted(() => {
+    onSearch();
+  });
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    selectedNum,
+    onSearch,
+    clearAll,
+    resetForm,
+    onbatchDel,
+    handleSizeChange,
+    onSelectionCancel,
+    handleCurrentChange,
+    handleSelectionChange
+  };
+}
--- a/src/views/monitor/logs/login/index.vue
+++ b/src/views/monitor/logs/login/index.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRole } from "./hook";
+import { getPickerShortcuts } from "../../utils";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+import Delete from "@iconify-icons/ep/delete";
+import Refresh from "@iconify-icons/ep/refresh";
+
+defineOptions({
+  name: "LoginLog"
+});
+
+const formRef = ref();
+const tableRef = ref();
+
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  selectedNum,
+  onSearch,
+  clearAll,
+  resetForm,
+  onbatchDel,
+  handleSizeChange,
+  onSelectionCancel,
+  handleCurrentChange,
+  handleSelectionChange
+} = useRole(tableRef);
+</script>
+
+<template>
+  <div class="main">
+    <el-form
+      ref="formRef"
+      :inline="true"
+      :model="form"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
+    >
+      <el-form-item label="用户名" prop="username">
+        <el-input
+          v-model="form.username"
+          placeholder="请输入用户名"
+          clearable
+          class="!w-[150px]"
+        />
+      </el-form-item>
+      <el-form-item label="登录状态" prop="status">
+        <el-select
+          v-model="form.status"
+          placeholder="请选择"
+          clearable
+          class="!w-[150px]"
+        >
+          <el-option label="成功" value="1" />
+          <el-option label="失败" value="0" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="登录时间" prop="loginTime">
+        <el-date-picker
+          v-model="form.loginTime"
+          :shortcuts="getPickerShortcuts()"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期时间"
+          end-placeholder="结束日期时间"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon('ri:search-line')"
+          :loading="loading"
+          @click="onSearch"
+        >
+          搜索
+        </el-button>
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <PureTableBar
+      title="登录日志（仅演示，操作后不生效）"
+      :columns="columns"
+      @refresh="onSearch"
+    >
+      <template #buttons>
+        <el-popconfirm title="确定要删除所有日志数据吗？" @confirm="clearAll">
+          <template #reference>
+            <el-button type="danger" :icon="useRenderIcon(Delete)">
+              清空日志
+            </el-button>
+          </template>
+        </el-popconfirm>
+      </template>
+      <template v-slot="{ size, dynamicColumns }">
+        <div
+          v-if="selectedNum > 0"
+          v-motion-fade
+          class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
+        >
+          <div class="flex-auto">
+            <span
+              style="font-size: var(--el-font-size-base)"
+              class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
+            >
+              已选 {{ selectedNum }} 项
+            </span>
+            <el-button type="primary" text @click="onSelectionCancel">
+              取消选择
+            </el-button>
+          </div>
+          <el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
+            <template #reference>
+              <el-button type="danger" text class="mr-1"> 批量删除 </el-button>
+            </template>
+          </el-popconfirm>
+        </div>
+        <pure-table
+          ref="tableRef"
+          row-key="id"
+          align-whole="center"
+          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>
+    </PureTableBar>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+.main-content {
+  margin: 24px 24px 0 !important;
+}
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
+</style>
--- a/src/views/monitor/logs/operation/hook.tsx
+++ b/src/views/monitor/logs/operation/hook.tsx
@@ -0,0 +1,174 @@
+import dayjs from "dayjs";
+import { message } from "@/utils/message";
+import { getKeyList } from "@pureadmin/utils";
+import { getOperationLogsList } from "@/api/system";
+import { usePublicHooks } from "@/views/system/hooks";
+import type { PaginationProps } from "@pureadmin/table";
+import { type Ref, reactive, ref, onMounted, toRaw } from "vue";
+
+export function useRole(tableRef: Ref) {
+  const form = reactive({
+    module: "",
+    status: "",
+    operatingTime: ""
+  });
+  const dataList = ref([]);
+  const loading = ref(true);
+  const selectedNum = ref(0);
+  const { tagStyle } = usePublicHooks();
+
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+  const columns: TableColumnList = [
+    {
+      label: "勾选列", // 如果需要表格多选，此处label必须设置
+      type: "selection",
+      fixed: "left",
+      reserveSelection: true // 数据刷新后保留选项
+    },
+    {
+      label: "序号",
+      prop: "id",
+      minWidth: 90
+    },
+    {
+      label: "操作人员",
+      prop: "username",
+      minWidth: 100
+    },
+    {
+      label: "所属模块",
+      prop: "module",
+      minWidth: 140
+    },
+    {
+      label: "操作概要",
+      prop: "summary",
+      minWidth: 140
+    },
+    {
+      label: "操作 IP",
+      prop: "ip",
+      minWidth: 100
+    },
+    {
+      label: "操作地点",
+      prop: "address",
+      minWidth: 140
+    },
+    {
+      label: "操作系统",
+      prop: "system",
+      minWidth: 100
+    },
+    {
+      label: "浏览器类型",
+      prop: "browser",
+      minWidth: 100
+    },
+    {
+      label: "操作状态",
+      prop: "status",
+      minWidth: 100,
+      cellRenderer: ({ row, props }) => (
+        <el-tag size={props.size} style={tagStyle.value(row.status)}>
+          {row.status === 1 ? "成功" : "失败"}
+        </el-tag>
+      )
+    },
+    {
+      label: "操作时间",
+      prop: "operatingTime",
+      minWidth: 180,
+      formatter: ({ operatingTime }) =>
+        dayjs(operatingTime).format("YYYY-MM-DD HH:mm:ss")
+    }
+  ];
+
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+  }
+
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+  }
+
+  /** 当CheckBox选择项发生变化时会触发该事件 */
+  function handleSelectionChange(val) {
+    selectedNum.value = val.length;
+    // 重置表格高度
+    tableRef.value.setAdaptive();
+  }
+
+  /** 取消选择 */
+  function onSelectionCancel() {
+    selectedNum.value = 0;
+    // 用于多选表格，清空用户的选择
+    tableRef.value.getTableRef().clearSelection();
+  }
+
+  /** 批量删除 */
+  function onbatchDel() {
+    // 返回当前选中的行
+    const curSelected = tableRef.value.getTableRef().getSelectionRows();
+    // 接下来根据实际业务，通过选中行的某项数据，比如下面的id，调用接口进行批量删除
+    message(`已删除序号为 ${getKeyList(curSelected, "id")} 的数据`, {
+      type: "success"
+    });
+    tableRef.value.getTableRef().clearSelection();
+    onSearch();
+  }
+
+  /** 清空日志 */
+  function clearAll() {
+    // 根据实际业务，调用接口删除所有日志数据
+    message("已删除所有日志数据", {
+      type: "success"
+    });
+    onSearch();
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    const { data } = await getOperationLogsList(toRaw(form));
+    dataList.value = data.list;
+    pagination.total = data.total;
+    pagination.pageSize = data.pageSize;
+    pagination.currentPage = data.currentPage;
+
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+
+  const resetForm = formEl => {
+    if (!formEl) return;
+    formEl.resetFields();
+    onSearch();
+  };
+
+  onMounted(() => {
+    onSearch();
+  });
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    selectedNum,
+    onSearch,
+    clearAll,
+    resetForm,
+    onbatchDel,
+    handleSizeChange,
+    onSelectionCancel,
+    handleCurrentChange,
+    handleSelectionChange
+  };
+}
--- a/src/views/monitor/logs/operation/index.vue
+++ b/src/views/monitor/logs/operation/index.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRole } from "./hook";
+import { getPickerShortcuts } from "../../utils";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+import Delete from "@iconify-icons/ep/delete";
+import Refresh from "@iconify-icons/ep/refresh";
+
+defineOptions({
+  name: "OperationLog"
+});
+
+const formRef = ref();
+const tableRef = ref();
+
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  selectedNum,
+  onSearch,
+  clearAll,
+  resetForm,
+  onbatchDel,
+  handleSizeChange,
+  onSelectionCancel,
+  handleCurrentChange,
+  handleSelectionChange
+} = useRole(tableRef);
+</script>
+
+<template>
+  <div class="main">
+    <el-form
+      ref="formRef"
+      :inline="true"
+      :model="form"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
+    >
+      <el-form-item label="所属模块" prop="module">
+        <el-input
+          v-model="form.module"
+          placeholder="请输入所属模块"
+          clearable
+          class="!w-[170px]"
+        />
+      </el-form-item>
+      <el-form-item label="操作状态" prop="status">
+        <el-select
+          v-model="form.status"
+          placeholder="请选择"
+          clearable
+          class="!w-[150px]"
+        >
+          <el-option label="成功" value="1" />
+          <el-option label="失败" value="0" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="操作时间" prop="operatingTime">
+        <el-date-picker
+          v-model="form.operatingTime"
+          :shortcuts="getPickerShortcuts()"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期时间"
+          end-placeholder="结束日期时间"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon('ri:search-line')"
+          :loading="loading"
+          @click="onSearch"
+        >
+          搜索
+        </el-button>
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <PureTableBar
+      title="操作日志（仅演示，操作后不生效）"
+      :columns="columns"
+      @refresh="onSearch"
+    >
+      <template #buttons>
+        <el-popconfirm title="确定要删除所有日志数据吗？" @confirm="clearAll">
+          <template #reference>
+            <el-button type="danger" :icon="useRenderIcon(Delete)">
+              清空日志
+            </el-button>
+          </template>
+        </el-popconfirm>
+      </template>
+      <template v-slot="{ size, dynamicColumns }">
+        <div
+          v-if="selectedNum > 0"
+          v-motion-fade
+          class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
+        >
+          <div class="flex-auto">
+            <span
+              style="font-size: var(--el-font-size-base)"
+              class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
+            >
+              已选 {{ selectedNum }} 项
+            </span>
+            <el-button type="primary" text @click="onSelectionCancel">
+              取消选择
+            </el-button>
+          </div>
+          <el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
+            <template #reference>
+              <el-button type="danger" text class="mr-1"> 批量删除 </el-button>
+            </template>
+          </el-popconfirm>
+        </div>
+        <pure-table
+          ref="tableRef"
+          row-key="id"
+          align-whole="center"
+          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>
+    </PureTableBar>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+.main-content {
+  margin: 24px 24px 0 !important;
+}
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
+</style>
--- a/src/views/monitor/logs/system/detail.vue
+++ b/src/views/monitor/logs/system/detail.vue
@@ -0,0 +1,105 @@
+<script setup lang="tsx">
+import { ref } from "vue";
+import "vue-json-pretty/lib/styles.css";
+import VueJsonPretty from "vue-json-pretty";
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const columns = [
+  {
+    label: "IP 地址",
+    prop: "ip"
+  },
+  {
+    label: "地点",
+    prop: "address"
+  },
+  {
+    label: "操作系统",
+    prop: "system"
+  },
+  {
+    label: "浏览器类型",
+    prop: "browser"
+  },
+  {
+    label: "所属模块",
+    prop: "module"
+  },
+  {
+    label: "请求时间",
+    prop: "requestTime"
+  },
+  {
+    label: "请求方法",
+    prop: "method"
+  },
+  {
+    label: "请求耗时",
+    prop: "takesTime"
+  },
+  {
+    label: "请求接口",
+    prop: "url",
+    copy: true
+  },
+  {
+    label: "TraceId",
+    prop: "traceId",
+    copy: true
+  }
+];
+
+const dataList = ref([
+  {
+    title: "响应头",
+    name: "responseHeaders",
+    data: (props.data[0] as any).responseHeaders
+  },
+  {
+    title: "响应体",
+    name: "responseBody",
+    data: (props.data[0] as any).responseBody
+  },
+  {
+    title: "请求头",
+    name: "requestHeaders",
+    data: (props.data[0] as any).requestHeaders
+  },
+  {
+    title: "请求体",
+    name: "requestBody",
+    data: (props.data[0] as any).requestBody
+  }
+]);
+</script>
+
+<template>
+  <div>
+    <el-scrollbar>
+      <PureDescriptions
+        border
+        :data="props.data"
+        :columns="columns"
+        :column="5"
+      />
+    </el-scrollbar>
+    <el-tabs :modelValue="'responseBody'" type="border-card" class="mt-4">
+      <el-tab-pane
+        v-for="(item, index) in dataList"
+        :key="index"
+        :name="item.name"
+        :label="item.title"
+      >
+        <el-scrollbar max-height="calc(100vh - 240px)">
+          <vue-json-pretty v-model:data="item.data" />
+        </el-scrollbar>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
--- a/src/views/monitor/logs/system/hook.tsx
+++ b/src/views/monitor/logs/system/hook.tsx
@@ -0,0 +1,246 @@
+import dayjs from "dayjs";
+import Detail from "./detail.vue";
+import { message } from "@/utils/message";
+import { addDialog } from "@/components/ReDialog";
+import type { PaginationProps } from "@pureadmin/table";
+import { type Ref, reactive, ref, onMounted, toRaw } from "vue";
+import { getKeyList, useCopyToClipboard } from "@pureadmin/utils";
+import { getSystemLogsList, getSystemLogsDetail } from "@/api/system";
+import Info from "@iconify-icons/ri/question-line";
+
+export function useRole(tableRef: Ref) {
+  const form = reactive({
+    module: "",
+    requestTime: ""
+  });
+  const dataList = ref([]);
+  const loading = ref(true);
+  const selectedNum = ref(0);
+  const { copied, update } = useCopyToClipboard();
+
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+
+  // const getLevelType = (type, text = false) => {
+  //   switch (type) {
+  //     case 0:
+  //       return text ? "debug" : "primary";
+  //     case 1:
+  //       return text ? "info" : "success";
+  //     case 2:
+  //       return text ? "warn" : "info";
+  //     case 3:
+  //       return text ? "error" : "warning";
+  //     case 4:
+  //       return text ? "fatal" : "danger";
+  //   }
+  // };
+
+  const columns: TableColumnList = [
+    {
+      label: "勾选列", // 如果需要表格多选，此处label必须设置
+      type: "selection",
+      fixed: "left",
+      reserveSelection: true // 数据刷新后保留选项
+    },
+    {
+      label: "ID",
+      prop: "id",
+      minWidth: 90
+    },
+    {
+      label: "所属模块",
+      prop: "module",
+      minWidth: 100
+    },
+    {
+      headerRenderer: () => (
+        <span class="flex-c">
+          请求接口
+          <iconifyIconOffline
+            icon={Info}
+            class="ml-1 cursor-help"
+            v-tippy={{
+              content: "双击下面请求接口进行拷贝"
+            }}
+          />
+        </span>
+      ),
+      prop: "url",
+      minWidth: 140
+    },
+    {
+      label: "请求方法",
+      prop: "method",
+      minWidth: 140
+    },
+    {
+      label: "IP 地址",
+      prop: "ip",
+      minWidth: 100
+    },
+    {
+      label: "地点",
+      prop: "address",
+      minWidth: 140
+    },
+    {
+      label: "操作系统",
+      prop: "system",
+      minWidth: 100
+    },
+    {
+      label: "浏览器类型",
+      prop: "browser",
+      minWidth: 100
+    },
+    // {
+    //   label: "级别",
+    //   prop: "level",
+    //   minWidth: 90,
+    //   cellRenderer: ({ row, props }) => (
+    //     <el-tag size={props.size} type={getLevelType(row.level)} effect="plain">
+    //       {getLevelType(row.level, true)}
+    //     </el-tag>
+    //   )
+    // },
+    {
+      label: "请求耗时",
+      prop: "takesTime",
+      minWidth: 100,
+      cellRenderer: ({ row, props }) => (
+        <el-tag
+          size={props.size}
+          type={row.takesTime < 1000 ? "success" : "warning"}
+          effect="plain"
+        >
+          {row.takesTime} ms
+        </el-tag>
+      )
+    },
+    {
+      label: "请求时间",
+      prop: "requestTime",
+      minWidth: 180,
+      formatter: ({ requestTime }) =>
+        dayjs(requestTime).format("YYYY-MM-DD HH:mm:ss")
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      slot: "operation"
+    }
+  ];
+
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+  }
+
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+  }
+
+  /** 当CheckBox选择项发生变化时会触发该事件 */
+  function handleSelectionChange(val) {
+    selectedNum.value = val.length;
+    // 重置表格高度
+    tableRef.value.setAdaptive();
+  }
+
+  /** 取消选择 */
+  function onSelectionCancel() {
+    selectedNum.value = 0;
+    // 用于多选表格，清空用户的选择
+    tableRef.value.getTableRef().clearSelection();
+  }
+
+  /** 拷贝请求接口，表格单元格被双击时触发 */
+  function handleCellDblclick({ url }, { property }) {
+    if (property !== "url") return;
+    update(url);
+    copied.value
+      ? message(`${url} 已拷贝`, { type: "success" })
+      : message("拷贝失败", { type: "warning" });
+  }
+
+  /** 批量删除 */
+  function onbatchDel() {
+    // 返回当前选中的行
+    const curSelected = tableRef.value.getTableRef().getSelectionRows();
+    // 接下来根据实际业务，通过选中行的某项数据，比如下面的id，调用接口进行批量删除
+    message(`已删除序号为 ${getKeyList(curSelected, "id")} 的数据`, {
+      type: "success"
+    });
+    tableRef.value.getTableRef().clearSelection();
+    onSearch();
+  }
+
+  /** 清空日志 */
+  function clearAll() {
+    // 根据实际业务，调用接口删除所有日志数据
+    message("已删除所有日志数据", {
+      type: "success"
+    });
+    onSearch();
+  }
+
+  function onDetail(row) {
+    getSystemLogsDetail({ id: row.id }).then(res => {
+      addDialog({
+        title: "系统日志详情",
+        fullscreen: true,
+        hideFooter: true,
+        contentRenderer: () => Detail,
+        props: {
+          data: [res]
+        }
+      });
+    });
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    const { data } = await getSystemLogsList(toRaw(form));
+    dataList.value = data.list;
+    pagination.total = data.total;
+    pagination.pageSize = data.pageSize;
+    pagination.currentPage = data.currentPage;
+
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+
+  const resetForm = formEl => {
+    if (!formEl) return;
+    formEl.resetFields();
+    onSearch();
+  };
+
+  onMounted(() => {
+    onSearch();
+  });
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    selectedNum,
+    onSearch,
+    onDetail,
+    clearAll,
+    resetForm,
+    onbatchDel,
+    handleSizeChange,
+    onSelectionCancel,
+    handleCellDblclick,
+    handleCurrentChange,
+    handleSelectionChange
+  };
+}
--- a/src/views/monitor/logs/system/index.vue
+++ b/src/views/monitor/logs/system/index.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRole } from "./hook";
+import { getPickerShortcuts } from "../../utils";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+import View from "@iconify-icons/ep/view";
+import Delete from "@iconify-icons/ep/delete";
+import Refresh from "@iconify-icons/ep/refresh";
+
+defineOptions({
+  name: "SystemLog"
+});
+
+const formRef = ref();
+const tableRef = ref();
+
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  selectedNum,
+  onSearch,
+  onDetail,
+  clearAll,
+  resetForm,
+  onbatchDel,
+  handleSizeChange,
+  onSelectionCancel,
+  handleCellDblclick,
+  handleCurrentChange,
+  handleSelectionChange
+} = useRole(tableRef);
+</script>
+
+<template>
+  <div class="main">
+    <el-form
+      ref="formRef"
+      :inline="true"
+      :model="form"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
+    >
+      <el-form-item label="所属模块" prop="module">
+        <el-input
+          v-model="form.module"
+          placeholder="请输入所属模块"
+          clearable
+          class="!w-[170px]"
+        />
+      </el-form-item>
+      <el-form-item label="请求时间" prop="requestTime">
+        <el-date-picker
+          v-model="form.requestTime"
+          :shortcuts="getPickerShortcuts()"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期时间"
+          end-placeholder="结束日期时间"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon('ri:search-line')"
+          :loading="loading"
+          @click="onSearch"
+        >
+          搜索
+        </el-button>
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <PureTableBar
+      title="系统日志（仅演示，操作后不生效）"
+      :columns="columns"
+      @refresh="onSearch"
+    >
+      <template #buttons>
+        <el-popconfirm title="确定要删除所有日志数据吗？" @confirm="clearAll">
+          <template #reference>
+            <el-button type="danger" :icon="useRenderIcon(Delete)">
+              清空日志
+            </el-button>
+          </template>
+        </el-popconfirm>
+      </template>
+      <template v-slot="{ size, dynamicColumns }">
+        <div
+          v-if="selectedNum > 0"
+          v-motion-fade
+          class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
+        >
+          <div class="flex-auto">
+            <span
+              style="font-size: var(--el-font-size-base)"
+              class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
+            >
+              已选 {{ selectedNum }} 项
+            </span>
+            <el-button type="primary" text @click="onSelectionCancel">
+              取消选择
+            </el-button>
+          </div>
+          <el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
+            <template #reference>
+              <el-button type="danger" text class="mr-1"> 批量删除 </el-button>
+            </template>
+          </el-popconfirm>
+        </div>
+        <pure-table
+          ref="tableRef"
+          row-key="id"
+          align-whole="center"
+          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"
+          @cell-dblclick="handleCellDblclick"
+        >
+          <template #operation="{ row }">
+            <el-button
+              class="reset-margin !outline-none"
+              link
+              type="primary"
+              :size="size"
+              :icon="useRenderIcon(View)"
+              @click="onDetail(row)"
+            >
+              详情
+            </el-button>
+          </template>
+        </pure-table>
+      </template>
+    </PureTableBar>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+.main-content {
+  margin: 24px 24px 0 !important;
+}
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
+</style>
--- a/src/views/monitor/online/hook.tsx
+++ b/src/views/monitor/online/hook.tsx
@@ -0,0 +1,117 @@
+import dayjs from "dayjs";
+import { message } from "@/utils/message";
+import { getOnlineLogsList } from "@/api/system";
+import { reactive, ref, onMounted, toRaw } from "vue";
+import type { PaginationProps } from "@pureadmin/table";
+
+export function useRole() {
+  const form = reactive({
+    username: ""
+  });
+  const dataList = ref([]);
+  const loading = ref(true);
+  const pagination = reactive<PaginationProps>({
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  });
+  const columns: TableColumnList = [
+    {
+      label: "序号",
+      prop: "id",
+      minWidth: 60
+    },
+    {
+      label: "用户名",
+      prop: "username",
+      minWidth: 100
+    },
+    {
+      label: "登录 IP",
+      prop: "ip",
+      minWidth: 140
+    },
+    {
+      label: "登录地点",
+      prop: "address",
+      minWidth: 140
+    },
+    {
+      label: "操作系统",
+      prop: "system",
+      minWidth: 100
+    },
+    {
+      label: "浏览器类型",
+      prop: "browser",
+      minWidth: 100
+    },
+    {
+      label: "登录时间",
+      prop: "loginTime",
+      minWidth: 180,
+      formatter: ({ loginTime }) =>
+        dayjs(loginTime).format("YYYY-MM-DD HH:mm:ss")
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      slot: "operation"
+    }
+  ];
+
+  function handleSizeChange(val: number) {
+    console.log(`${val} items per page`);
+  }
+
+  function handleCurrentChange(val: number) {
+    console.log(`current page: ${val}`);
+  }
+
+  function handleSelectionChange(val) {
+    console.log("handleSelectionChange", val);
+  }
+
+  function handleOffline(row) {
+    message(`${row.username}已被强制下线`, { type: "success" });
+    onSearch();
+  }
+
+  async function onSearch() {
+    loading.value = true;
+    const { data } = await getOnlineLogsList(toRaw(form));
+    dataList.value = data.list;
+    pagination.total = data.total;
+    pagination.pageSize = data.pageSize;
+    pagination.currentPage = data.currentPage;
+
+    setTimeout(() => {
+      loading.value = false;
+    }, 500);
+  }
+
+  const resetForm = formEl => {
+    if (!formEl) return;
+    formEl.resetFields();
+    onSearch();
+  };
+
+  onMounted(() => {
+    onSearch();
+  });
+
+  return {
+    form,
+    loading,
+    columns,
+    dataList,
+    pagination,
+    onSearch,
+    resetForm,
+    handleOffline,
+    handleSizeChange,
+    handleCurrentChange,
+    handleSelectionChange
+  };
+}
--- a/src/views/monitor/online/index.vue
+++ b/src/views/monitor/online/index.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRole } from "./hook";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+import Plane from "@iconify-icons/ri/plane-line";
+import Refresh from "@iconify-icons/ep/refresh";
+
+defineOptions({
+  name: "OnlineUser"
+});
+
+const formRef = ref();
+const {
+  form,
+  loading,
+  columns,
+  dataList,
+  pagination,
+  onSearch,
+  resetForm,
+  handleOffline,
+  handleSizeChange,
+  handleCurrentChange,
+  handleSelectionChange
+} = useRole();
+</script>
+
+<template>
+  <div class="main">
+    <el-form
+      ref="formRef"
+      :inline="true"
+      :model="form"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
+    >
+      <el-form-item label="用户名" prop="username">
+        <el-input
+          v-model="form.username"
+          placeholder="请输入用户名"
+          clearable
+          class="!w-[180px]"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon('ri:search-line')"
+          :loading="loading"
+          @click="onSearch"
+        >
+          搜索
+        </el-button>
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <PureTableBar
+      title="在线用户（仅演示，操作后不生效）"
+      :columns="columns"
+      @refresh="onSearch"
+    >
+      <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-popconfirm
+              :title="`是否强制下线${row.username}`"
+              @confirm="handleOffline(row)"
+            >
+              <template #reference>
+                <el-button
+                  class="reset-margin"
+                  link
+                  type="primary"
+                  :size="size"
+                  :icon="useRenderIcon(Plane)"
+                >
+                  强退
+                </el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </pure-table>
+      </template>
+    </PureTableBar>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+.main-content {
+  margin: 24px 24px 0 !important;
+}
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
+</style>
--- a/src/views/monitor/utils.ts
+++ b/src/views/monitor/utils.ts
@@ -0,0 +1,129 @@
+/** 日期、时间选择器快捷选项，常搭配 [DatePicker](https://element-plus.org/zh-CN/component/date-picker.html) 和 [DateTimePicker](https://element-plus.org/zh-CN/component/datetime-picker.html) 的`shortcuts`属性使用 */
+export const getPickerShortcuts = (): Array<{
+  text: string;
+  value: Date | Function;
+}> => {
+  return [
+    {
+      text: "今天",
+      value: () => {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        const todayEnd = new Date();
+        todayEnd.setHours(23, 59, 59, 999);
+        return [today, todayEnd];
+      }
+    },
+    {
+      text: "昨天",
+      value: () => {
+        const yesterday = new Date();
+        yesterday.setDate(yesterday.getDate() - 1);
+        yesterday.setHours(0, 0, 0, 0);
+        const yesterdayEnd = new Date();
+        yesterdayEnd.setDate(yesterdayEnd.getDate() - 1);
+        yesterdayEnd.setHours(23, 59, 59, 999);
+        return [yesterday, yesterdayEnd];
+      }
+    },
+    {
+      text: "前天",
+      value: () => {
+        const beforeYesterday = new Date();
+        beforeYesterday.setDate(beforeYesterday.getDate() - 2);
+        beforeYesterday.setHours(0, 0, 0, 0);
+        const beforeYesterdayEnd = new Date();
+        beforeYesterdayEnd.setDate(beforeYesterdayEnd.getDate() - 2);
+        beforeYesterdayEnd.setHours(23, 59, 59, 999);
+        return [beforeYesterday, beforeYesterdayEnd];
+      }
+    },
+    {
+      text: "本周",
+      value: () => {
+        const today = new Date();
+        const startOfWeek = new Date(
+          today.getFullYear(),
+          today.getMonth(),
+          today.getDate() - today.getDay() + (today.getDay() === 0 ? -6 : 1)
+        );
+        startOfWeek.setHours(0, 0, 0, 0);
+        const endOfWeek = new Date(
+          startOfWeek.getTime() +
+            6 * 24 * 60 * 60 * 1000 +
+            23 * 60 * 60 * 1000 +
+            59 * 60 * 1000 +
+            59 * 1000 +
+            999
+        );
+        return [startOfWeek, endOfWeek];
+      }
+    },
+    {
+      text: "上周",
+      value: () => {
+        const today = new Date();
+        const startOfLastWeek = new Date(
+          today.getFullYear(),
+          today.getMonth(),
+          today.getDate() - today.getDay() - 7 + (today.getDay() === 0 ? -6 : 1)
+        );
+        startOfLastWeek.setHours(0, 0, 0, 0);
+        const endOfLastWeek = new Date(
+          startOfLastWeek.getTime() +
+            6 * 24 * 60 * 60 * 1000 +
+            23 * 60 * 60 * 1000 +
+            59 * 60 * 1000 +
+            59 * 1000 +
+            999
+        );
+        return [startOfLastWeek, endOfLastWeek];
+      }
+    },
+    {
+      text: "本月",
+      value: () => {
+        const today = new Date();
+        const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+        startOfMonth.setHours(0, 0, 0, 0);
+        const endOfMonth = new Date(
+          today.getFullYear(),
+          today.getMonth() + 1,
+          0
+        );
+        endOfMonth.setHours(23, 59, 59, 999);
+        return [startOfMonth, endOfMonth];
+      }
+    },
+    {
+      text: "上个月",
+      value: () => {
+        const today = new Date();
+        const startOfLastMonth = new Date(
+          today.getFullYear(),
+          today.getMonth() - 1,
+          1
+        );
+        startOfLastMonth.setHours(0, 0, 0, 0);
+        const endOfLastMonth = new Date(
+          today.getFullYear(),
+          today.getMonth(),
+          0
+        );
+        endOfLastMonth.setHours(23, 59, 59, 999);
+        return [startOfLastMonth, endOfLastMonth];
+      }
+    },
+    {
+      text: "本年",
+      value: () => {
+        const today = new Date();
+        const startOfYear = new Date(today.getFullYear(), 0, 1);
+        startOfYear.setHours(0, 0, 0, 0);
+        const endOfYear = new Date(today.getFullYear(), 11, 31);
+        endOfYear.setHours(23, 59, 59, 999);
+        return [startOfYear, endOfYear];
+      }
+    }
+  ];
+};
--- 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,
@@ -261,6 +266,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
      type: "success"
    });
    tableRef.value.getTableRef().clearSelection();
+    onSearch();
  }

  async function onSearch() {
@@ -321,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 }),
@@ -359,6 +366,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
      width: "40%",
      draggable: true,
      closeOnClickModal: false,
+      fullscreen: deviceDetection(),
      contentRenderer: () =>
        h(croppingUpload, {
          ref: cropRef,
@@ -388,6 +396,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
      width: "30%",
      draggable: true,
      closeOnClickModal: false,
+      fullscreen: deviceDetection(),
      contentRenderer: () => (
        <>
          <ElForm ref={ruleFormRef} model={pwdForm}>
@@ -470,6 +479,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
      },
      width: "400px",
      draggable: true,
+      fullscreen: deviceDetection(),
      fullscreenIcon: true,
      closeOnClickModal: false,
      contentRenderer: () => h(roleForm),
@@ -506,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/Show More
+++ b/Show More
Author	SHA1	Message	Date
xiaoxian521	3c8f855d86	release: update `5.2.0`	2024-03-22 16:03:29 +08:00
xiaoxian521	2ebb584ec8	feat: 在左侧菜单右中侧再加一个折叠展开菜单的功能	2024-03-22 15:37:19 +08:00
xiaoxian521	791224b381	chore(deps): update	2024-03-22 12:10:01 +08:00
xiaoming	9e0518319b	feat: 添加表单示例，可通过`JSON`格式配置生成 (#999 ) * feat: 添加表单示例，可通过`JSON`格式配置生成	2024-03-21 16:04:40 +08:00
xiaoxian521	2dac3f193b	chore: 添加企业赞助商	2024-03-21 13:01:36 +08:00
xiaoxian521	696a347b61	feat: 添加图形验证码示例	2024-03-21 00:10:16 +08:00
xiaoxian521	206df3828e	feat: 添加甘特图示例	2024-03-20 19:35:07 +08:00
xiaoming	2367eedc5d	feat: 添加虚拟表格示例 (#1007 ) * feat: 添加虚拟表格示例	2024-03-20 15:00:47 +08:00
xiaoming	f0a80c680e	feat: 添加`vue-flow`流程图示例 (#1001 ) * feat: 添加`vue-flow`流程图示例	2024-03-19 21:05:44 +08:00
Fifteen	bf128f183f	feat(components): `segmented`组件新增`block`属性，可使其适合父元素宽度 (#997 ) * feat: `segmented`组件新增`block`属性，可将宽度调整为父元素宽度	2024-03-19 16:46:01 +08:00
xiaoxian521	17d36f6b9a	chore: update	2024-03-19 16:22:59 +08:00
xiaoming	e46d3e57fe	feat: `pure-admin-table`添加单元格编辑表格的简易用法 (#992 ) * feat: `pure-admin-table`添加单元格编辑表格的简易用法	2024-03-18 16:13:26 +08:00
xiaoxian521	dbfd014209	feat: `ReDialog`组件添加全屏回调事件	2024-03-18 12:42:05 +08:00
xiaoxian521	d0d77bef21	feat: `pure-admin-table`添加单行编辑表格的简易用法	2024-03-17 22:54:32 +08:00
xiaoxian521	26a940c030	feat: `pure-admin-table`添加可编辑表格的简易用法	2024-03-17 14:16:30 +08:00
xiaoxian521	c0005b4bc9	perf: 系统管理、系统监控兼容移动端	2024-03-16 23:20:04 +08:00
xiaoming	6270ec712f	feat: 完善角色管理-菜单权限功能，新颖的交互体验 (#984 ) * feat: 完善角色管理-菜单权限功能，新颖的交互体验	2024-03-16 22:32:42 +08:00
xiaoxian521	e1432d7af8	chore(deps): update	2024-03-14 15:03:04 +08:00
Leet	9400fe3eaf	chore: update (#977 )	2024-03-14 11:20:06 +08:00
Leet	359ccdd85b	feat: 内容区添加全局`Stretch`配置，可自定义紧凑页面，轻松找到所需信息 (#968 ) * chore: 页面添加stretch配置	2024-03-14 10:09:51 +08:00
xiaoxian521	0be8c963ba	docs: 更新特别代码贡献名单	2024-03-13 21:33:54 +08:00
Leet	be5798987f	fix: 修复`windows`下页面切换，内容区会出现滚动条问题 (#976 )	2024-03-13 21:16:00 +08:00
xiaoming	e6302b0f38	feat: 系统日志添加查看详情 (#974 ) * feat: 系统日志添加查看详情	2024-03-13 20:46:37 +08:00
xiaoxian521	0b9fcaca4a	feat: 表格选择器添加默认回显	2024-03-13 14:34:16 +08:00
xiaoxian521	5e5169817c	docs: 添加特别代码贡献名单	2024-03-12 18:52:28 +08:00
xiaoming	d1f0a3fd36	chore: 将全屏按钮置于顶部，使其显眼且易于操作 (#969 ) * chore: 将全屏按钮置于顶部，使其显眼且易于操作	2024-03-12 14:36:45 +08:00
gc	593fc1bb26	style: 修复`windwos`下点击注册页面会出现滚动条问题 (#970 )	2024-03-12 11:58:25 +08:00
xiaoxian521	0a67d1ab76	chore: update	2024-03-10 09:22:32 +08:00
xiaoxian521	adae01fdc2	chore: 更新`typeit`依赖为最新，相关兼容处理	2024-03-06 18:16:46 +08:00
xiaoxian521	ac0d75cbdf	feat: 添加系统监控-系统日志	2024-03-06 16:20:58 +08:00
xiaoxian521	6288e81130	feat: 添加系统监控-操作日志	2024-03-06 12:05:05 +08:00
xiaoxian521	7a59999dc7	fix: 修复`pure-table`带状态表格在深色整体风格下状态样式消失的问题	2024-03-06 08:49:08 +08:00
xiaoxian521	5c4fd951bc	chore: 修复项目配置中开启灰色模式和深色整体风格，刷新页面整体风格异常	2024-03-06 00:46:07 +08:00
xiaoxian521	45a359017e	chore: revise typo	2024-03-05 22:33:27 +08:00
Leet	0f0fbdac51	feat: 新增v-ripple指令(水波纹效果) (#956 ) * feat: 新增v-ripple指令(水波纹效果) * feat: 新增波纹demo	2024-03-05 22:21:45 +08:00
wzc520pyfm	d83f28dbd3	feat: 添加基于`ElTour`实现的漫游式引导 (#958 ) * feat: 添加基于ElTour实现的引导	2024-03-05 22:20:41 +08:00
wzc520pyfm	ccf3a6f917	feat: 为关于页面的卡片信息添加内容超出显示滚动条 (#957 )	2024-03-05 20:26:05 +08:00
xiaoxian521	91bebdae94	chore: 更新依赖包，对应兼容处理	2024-03-05 15:36:07 +08:00
xiaoming	131d1e8ada	feat: 添加系统监控-在线用户、登录日志页面示例 (#951 ) * feat: 添加系统监控页面示例 * chore: 完成系统监控-在线用户 * chore: 完成登录日志	2024-03-04 16:44:30 +08:00
xiaoxian521	c4d5e3bfcd	docs: update `README`	2024-03-04 01:05:43 +08:00