release: update 5.3.0

* refactor: 重构国际化文件命名规范以及演示页加上代码位置提示

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

.vscode/settings.json

@@ -35,5 +35,13 @@
   "i18n-ally.sourceLanguage": "en",
   "i18n-ally.displayLanguage": "zh-CN",
   "i18n-ally.enabledFrameworks": ["vue"],
-  "iconify.excludes": ["el"]
+  "iconify.excludes": ["el"],
+  "vsmqtt.brokerProfiles": [
+    {
+      "name": "broker.emqx.io",
+      "host": "broker.emqx.io/mqtt",
+      "port": 1883,
+      "clientId": "vsmqtt_client_db34"
+    }
+  ]
 }

CHANGELOG.en_US.md

@@ -1,3 +1,52 @@
+# 5.3.0 (2024-03-28)
+
+### ✔️ refactor
+
+- Reconstruct internationalized file naming conventions and demo pages with code location hints
+
+### 🎫 Feat
+
+- Add `MQTT` example
+- Added `docx` and `excel` file preview examples
+- The `ReSegmented` segmented controller has a new `size` attribute, which can set three sizes
+- The `RePureTableBar` component and `pure-admin-table` support international switching of table headers
+
+# 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

CHANGELOG.md

@@ -1,3 +1,52 @@
+# 5.3.0 (2024-03-28)
+
+### ✔️ refactor
+
+- Reconstruct internationalized file naming conventions and demo pages with code location hints
+
+### 🎫 Feat
+
+- Add `MQTT` example
+- Added `docx` and `excel` file preview examples
+- The `ReSegmented` segmented controller has a new `size` attribute, which can set three sizes
+- The `RePureTableBar` component and `pure-admin-table` support international switching of table headers
+
+# 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

CHANGELOG.zh_CN.md

@@ -1,3 +1,52 @@
+# 5.3.0 (2024-03-28)
+
+### ✔️ refactor
+
+- 重构国际化文件命名规范以及演示页加上代码位置提示
+
+### 🎫 Feat
+
+- 添加`MQTT`示例
+- 添加`docx`、`excel`文件预览示例
+- `ReSegmented`分段控制器新增`size`属性，可设置三种尺寸
+- `RePureTableBar`组件搭配`pure-admin-table`支持表头国际化切换
+
+# 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

README.en-US.md

@@ -10,6 +10,12 @@
 
 `vue-pure-admin` is an open source, free and out-of-the-box middle and backend management system template. Completely adopts `ECMAScript` module (`ESM`) specifications to write and organize code, using the latest `Vue3`, `Vite`, `Element-Plus`, `TypeScript`, `Pinia`, `Tailwindcss` and other mainstream technologies develop
 
+## Sponsors
+
+<a class="logo" href="https://ai-tools.cn/resume/start" target="_blank" rel="sponsored noopener">
+  <img src="./public/sponsors/aitools.svg" alt="aitools">
+</a>
+
 ## Thin version (offering non-internationalized and internationalized versions)
 
 The simplified version is based on the shelf extracted from [vue-pure-admin](https://github.com/pure-admin/vue-pure-admin), which contains main functions and is more suitable for actual project development. The packaged size is introduced globally [element-plus](https://element-plus.org) is still below `2.3MB`, and the full version of the code will be permanently synchronized. After enabling `brotli` compression and `cdn` to replace the local library mode, the package size is less than `350kb`
@@ -17,15 +23,19 @@ The simplified version is based on the shelf extracted from [vue-pure-admin](htt
 [Click to view the non-internationalized version](https://github.com/pure-admin/pure-admin-thin)  
 [Click to view Internationalization version](https://github.com/pure-admin/pure-admin-thin/tree/i18n)
 
-## Supporting Video
+## Supporting video
 
-[Click Watch Tutorial](https://www.bilibili.com/video/BV1kg411v7QT)  
-[Click Watch UI Design](https://www.bilibili.com/video/BV17g411T7rq)
+[Click me to view UI design](https://www.bilibili.com/video/BV17g411T7rq)  
+[Click me to view the rapid development tutorial](https://www.bilibili.com/video/BV1kg411v7QT)
 
-## Docs
+## Nanny-level documents
 
-[View vue-pure-admin documentation](https://yiming_chang.gitee.io/pure-admin-doc)  
-[View @pureadmin/utils documentation](https://pure-admin-utils.netlify.app)
+[Click me to view vue-pure-admin documentation](https://yiming_chang.gitee.io/pure-admin-doc)  
+[Click me to view @pureadmin/utils documentation](https://pure-admin-utils.netlify.app)
+
+## Quality service, software outsourcing, sponsorship support
+
+[Click me for details](https://yiming_chang.gitee.io/pure-admin-doc/pages/service/)
 
 ## Tauri
 
@@ -160,6 +170,20 @@ 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)    |
+|     [QFifteen](https://github.com/QFifteen)     |   [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=QFifteen)   |
+
 ## 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))

README.md

@@ -8,7 +8,14 @@
 
 ## 简介
 
-`vue-pure-admin` 是一款开源免费且开箱即用的中后台管理系统模版。完全采用 `ECMAScript` 模块（`ESM`）规范来编写和组织代码，使用了最新的 `Vue3`、`Vite`、`Element-Plus`、`TypeScript`、`Pinia`、`Tailwindcss` 等主流技术开发
+`vue-pure-admin` 是一款开源免费且开箱即用的中后台管理系统模版。完全采用 `ECMAScript` 模块（`ESM`）规范来编写和组织代码，使用了最新的 `Vue3`、
+`Vite`、`Element-Plus`、`TypeScript`、`Pinia`、`Tailwindcss` 等主流技术开发
+
+## 赞助商
+
+<a class="logo" href="https://ai-tools.cn/resume/start" target="_blank" rel="sponsored noopener">
+  <img src="./public/sponsors/aitools.svg" alt="aitools">
+</a>
 
 ## 精简版本（实际项目开发请用精简版本，提供 `非国际化` 、`国际化` 两个版本选择）
 
@@ -19,13 +26,17 @@
 
 ## 配套视频
 
-[点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)  
-[点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)
+[点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)  
+[点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)
 
 ## 配套保姆级文档
 
-[查看 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,20 @@ 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)    |
+|     [QFifteen](https://github.com/QFifteen)     |   [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=QFifteen)   |
+
 ## `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))

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 = {

build/optimize.ts

@@ -16,6 +16,7 @@ const include = [
   "qrcode",
   "intro.js",
   "vue-i18n",
+  "vxe-table",
   "vue-types",
   "js-cookie",
   "vue-tippy",
@@ -35,6 +36,8 @@ const include = [
   "vue-json-pretty",
   "@logicflow/core",
   "@pureadmin/utils",
+  "@vue-office/docx",
+  "@vue-office/excel",
   "@wangeditor/editor",
   "responsive-storage",
   "plus-pro-components",
@@ -44,6 +47,7 @@ const include = [
   "@amap/amap-jsapi-loader",
   "el-table-infinite-scroll",
   "vue-waterfall-plugin-next",
+  "@infectoone/vue-ganttastic",
   "@wangeditor/editor-for-vue",
   "vuedraggable/src/vuedraggable"
 ];

locales/en.yaml

@@ -1,172 +1,177 @@
 buttons:
-  hsLoginOut: LoginOut
-  hsfullscreen: FullScreen
-  hsexitfullscreen: ExitFullscreen
-  hsrefreshRoute: RefreshRoute
-  hslogin: Login
-  hsadd: Add
-  hsmark: Mark/Cancel
-  hssave: Save
-  hssearch: Search
-  hsexpendAll: Expand All
-  hscollapseAll: Collapse All
-  hssystemSet: Open ProjectConfig
-  hsdelete: Delete
-  hsreload: Reload
-  hscloseCurrentTab: Close CurrentTab
-  hscloseLeftTabs: Close LeftTabs
-  hscloseRightTabs: Close RightTabs
-  hscloseOtherTabs: Close OtherTabs
-  hscloseAllTabs: Close AllTabs
-  hswholeFullScreen: FullScreen
-  hswholeExitFullScreen: ExitFull
-  hscontentFullScreen: Content FullScreen
-  hscontentExitFullScreen: Content ExitFullScreen
+  pureLoginOut: LoginOut
+  pureLogin: Login
+  pureSystemSet: Open ProjectConfig
+  pureReload: Reload
+  pureCloseCurrentTab: Close CurrentTab
+  pureCloseLeftTabs: Close LeftTabs
+  pureCloseRightTabs: Close RightTabs
+  pureCloseOtherTabs: Close OtherTabs
+  pureCloseAllTabs: Close AllTabs
+  pureContentFullScreen: Content FullScreen
+  pureContentExitFullScreen: Content ExitFullScreen
 menus:
-  hshome: Home
-  hslogin: Login
-  hsempty: Empty Page
-  hssysManagement: System Manage
-  hsUser: User Manage
-  hsRole: Role Manage
-  hsSystemMenu: Menu Manage
-  hsDept: Dept Manage
-  hseditor: Editor
-  hsabnormal: Abnormal Page
-  hsfourZeroFour: "404"
-  hsfourZeroOne: "403"
-  hsFive: "500"
-  hscomponents: Components
-  hsdialog: Dialog
-  hsmessage: Message Tips
-  hsvideo: Video
-  hssegmented: Segmented
-  hswaterfall: Waterfall
-  hsmap: Map
-  hsdraggable: Draggable
-  hssplitPane: Split Pane
-  hsText: Text Ellipsis
-  hsElButton: Button
-  hsbutton: Button Animation
-  hsCheckButton: Check Button
-  hscropping: Picture Cropping
-  hsanimatecss: AnimateCss Selector
-  hscountTo: Digital Animation
-  hsselector: Scope Selector
-  hsflowChart: Flow Chart
-  hsseamless: Seamless Scroll
-  hscontextmenu: Context Menu
-  hstypeit: Typeit
-  hsjsoneditor: JSON Editor
-  hsColorPicker: Color Picker
-  hsDatePicker: Date Picker
-  hsDateTimePicker: DateTimePicker
-  hsTimePicker: TimePicker
-  hsTag: Tag
-  hsStatistic: Statistic
-  hsCollapse: Collapse
-  hsProgress: Progress
-  hsUpload: File Upload
-  hsCheckCard: CheckCard
-  hsmenus: MultiLevel Menu
-  hsmenu1: Menu1
-  hsmenu1-1: Menu1-1
-  hsmenu1-2: Menu1-2
-  hsmenu1-2-1: Menu1-2-1
-  hsmenu1-2-2: Menu1-2-2
-  hsmenu1-3: Menu1-3
-  hsmenu2: Menu2
-  permission: Permission Manage
-  permissionPage: Page Permission
-  permissionButton: Button Permission
-  hstabs: Tabs Operate
-  hsguide: Guide
-  hsAble: Able
-  hsMenuTree: Menu Tree
-  hsVideoFrame: Video Frame Capture
-  hsWavesurfer: Audio Visualization
-  hsOptimize: Debounce、Throttle、Copy、Longpress Directives
-  hsWatermark: Water Mark
-  hsPrint: Print
-  hsDownload: Download
-  hsExternalPage: External Page
-  hsExternalDoc: Docs External
-  hsEmbeddedDoc: Docs Embedded
-  externalLink: Vue-Pure-Admin
-  pureutilsLink: Pure-Admin-Utils
-  hsEpDocument: Element-Plus
-  hsTailwindcssDocument: Tailwindcss
-  hsVueDocument: Vue3
-  hsViteDocument: Vite
-  hsPiniaDocument: Pinia
-  hsRouterDocument: Vue-Router
-  hsAbout: About
-  hsResult: Result Page
-  hsSuccess: Success Page
-  hsFail: Fail Page
-  hsIconSelect: Icon Select
-  hsTimeline: Time Line
-  hsLineTree: LineTree
-  hsList: List Page
-  hsListCard: Card List Page
-  hsDebounce: Debounce & Throttle
-  hsFormDesign: Form Design
-  hsBarcode: Barcode
-  hsQrcode: Qrcode
-  hsCascader: Area Cascader
-  hsSwiper: Swiper Plugin
-  hsVirtualList: Virtual List
-  hsPdf: PDF Preview
-  hsExcel: Export Excel
-  hsInfiniteScroll: Table Infinite Scroll
-  hsSensitive: Sensitive Filter
-  hsPinyin: PinYin
-  hsdanmaku: Danmaku
-  hsPureTableBase: Base Usage
-  hsPureTableHigh: High Usage
-  hsboard: Paint Board
-  hsMenuoverflow: Menu Overflow Show Tooltip Text
-  hsChildMenuoverflow: Child Menu Overflow Show Tooltip Text
+  pureHome: Home
+  pureLogin: Login
+  pureEmpty: Empty Page
+  pureTable: Table
+  pureSysManagement: System Manage
+  pureUser: User Manage
+  pureRole: Role Manage
+  pureSystemMenu: Menu Manage
+  pureDept: Dept Manage
+  pureSysMonitor: System Monitor
+  pureOnlineUser: Online User
+  pureLoginLog: Login Log
+  pureOperationLog: Operation Log
+  pureSystemLog: System Log
+  pureEditor: Editor
+  pureAbnormal: Abnormal Page
+  pureFourZeroFour: "404"
+  pureFourZeroOne: "403"
+  pureFive: "500"
+  pureComponents: Components
+  pureDialog: Dialog
+  pureMessage: Message Tips
+  pureVideo: Video
+  pureSegmented: Segmented
+  pureWaterfall: Waterfall
+  pureMap: Map
+  pureDraggable: Draggable
+  pureSplitPane: Split Pane
+  pureText: Text Ellipsis
+  pureElButton: Button
+  pureButton: Button Animation
+  pureCheckButton: Check Button
+  pureCropping: Picture Cropping
+  pureAnimatecss: AnimateCss Selector
+  pureCountTo: Digital Animation
+  pureSelector: Scope Selector
+  pureFlowChart: Flow Chart
+  pureSeamless: Seamless Scroll
+  pureContextmenu: Context Menu
+  pureTypeit: Typeit
+  pureJsonEditor: JSON Editor
+  pureColorPicker: Color Picker
+  pureDatePicker: Date Picker
+  pureDateTimePicker: DateTimePicker
+  pureTimePicker: TimePicker
+  pureTag: Tag
+  pureStatistic: Statistic
+  pureCollapse: Collapse
+  pureGanttastic: Gantt Chart
+  pureProgress: Progress
+  pureUpload: File Upload
+  pureCheckCard: CheckCard
+  pureMenus: MultiLevel Menu
+  pureMenu1: Menu1
+  pureMenu1-1: Menu1-1
+  pureMenu1-2: Menu1-2
+  pureMenu1-2-1: Menu1-2-1
+  pureMenu1-2-2: Menu1-2-2
+  pureMenu1-3: Menu1-3
+  pureMenu2: Menu2
+  purePermission: Permission Manage
+  purePermissionPage: Page Permission
+  purePermissionButton: Button Permission
+  pureTabs: Tabs Operate
+  pureGuide: Guide
+  pureAble: Able
+  pureMenuTree: Menu Tree
+  pureVideoFrame: Video Frame Capture
+  pureWavesurfer: Audio Visualization
+  pureRipple: Ripple
+  pureMqtt: Mqtt Client
+  pureOptimize: Debounce、Throttle、Copy、Longpress Directives
+  pureVerify: Captcha
+  pureWatermark: Water Mark
+  purePrint: Print
+  pureDownload: Download
+  pureExternalPage: External Page
+  pureExternalDoc: Docs External
+  pureEmbeddedDoc: Docs Embedded
+  pureExternalLink: Vue-Pure-Admin
+  pureUtilsLink: Pure-Admin-Utils
+  pureColorHuntDoc: ColorHunt
+  pureUiGradients: UiGradients
+  pureEpDoc: Element-Plus
+  pureTailwindcssDoc: Tailwindcss
+  pureVueDoc: Vue3
+  pureViteDoc: Vite
+  purePiniaDoc: Pinia
+  pureRouterDoc: Vue-Router
+  pureAbout: About
+  pureResult: Result Page
+  pureSuccess: Success Page
+  pureFail: Fail Page
+  pureIconSelect: Icon Select
+  pureTimeline: Time Line
+  pureLineTree: LineTree
+  pureList: List Page
+  pureListCard: Card List Page
+  pureDebounce: Debounce & Throttle
+  pureFormDesign: Form Design
+  pureBarcode: Barcode
+  pureQrcode: Qrcode
+  pureCascader: Area Cascader
+  pureSwiper: Swiper Plugin
+  pureVirtualList: Virtual List
+  purePdf: PDF Preview
+  pureWord: Word Preview
+  pureExcels: Excel Preview
+  pureExcel: Export Excel
+  pureInfiniteScroll: Table Infinite Scroll
+  pureSensitive: Sensitive Filter
+  purePinyin: PinYin
+  pureDanmaku: Danmaku
+  pureSchemaForm: Form
+  pureTableBase: Base Usage
+  pureTableHigh: High Usage
+  pureTableEdit: Edit Usage
+  pureVxeTable: Virtual Usage
+  pureBoard: Paint Board
+  pureMenuOverflow: Menu Overflow Show Tooltip Text
+  pureChildMenuOverflow: Child Menu Overflow Show Tooltip Text
 status:
-  hsLoad: Loading...
+  pureLoad: Loading...
 login:
-  username: Username
-  password: Password
-  verifyCode: VerifyCode
-  remember: days no need to login
-  rememberInfo: After checking and logging in, will automatically log in to the system without entering your username and password within the specified number of days.
-  sure: Sure Password
-  forget: Forget Password?
-  login: Login
-  thirdLogin: Third Login
-  phoneLogin: Phone Login
-  qRCodeLogin: QRCode Login
-  register: Register
-  weChatLogin: WeChat Login
-  alipayLogin: Alipay Login
-  qqLogin: QQ Login
-  weiboLogin: Weibo Login
-  phone: Phone
-  smsVerifyCode: SMS VerifyCode
-  back: Back
-  test: Mock Test
-  tip: After scanning the code, click "Confirm" to complete the login
-  definite: Definite
-  loginSuccess: Login Success
-  registerSuccess: Regist Success
-  tickPrivacy: Please tick Privacy Policy
-  readAccept: I have read it carefully and accept
-  privacyPolicy: Privacy Policy
-  getVerifyCode: Get VerifyCode
-  info: Seconds
-  usernameReg: Please enter username
-  passwordReg: Please enter password
-  verifyCodeReg: Please enter verify code
-  verifyCodeCorrectReg: Please enter correct verify code
-  verifyCodeSixReg: Please enter a 6-digit verify code
-  phoneReg: Please enter the phone
-  phoneCorrectReg: Please enter the correct phone number format
-  passwordRuleReg: The password format should be any combination of 8-18 digits
-  passwordSureReg: Please enter confirm password
-  passwordDifferentReg: The two passwords do not match!
-  passwordUpdateReg: Password has been updated
+  pureUsername: Username
+  purePassword: Password
+  pureVerifyCode: VerifyCode
+  pureRemember: days no need to login
+  pureRememberInfo: After checking and logging in, will automatically log in to the system without entering your username and password within the specified number of days.
+  pureSure: Sure Password
+  pureForget: Forget Password?
+  pureLogin: Login
+  pureThirdLogin: Third Login
+  purePhoneLogin: Phone Login
+  pureQRCodeLogin: QRCode Login
+  pureRegister: Register
+  pureWeChatLogin: WeChat Login
+  pureAlipayLogin: Alipay Login
+  pureQQLogin: QQ Login
+  pureWeiBoLogin: Weibo Login
+  purePhone: Phone
+  pureSmsVerifyCode: SMS VerifyCode
+  pureBack: Back
+  pureTest: Mock Test
+  pureTip: After scanning the code, click "Confirm" to complete the login
+  pureDefinite: Definite
+  pureLoginSuccess: Login Success
+  pureRegisterSuccess: Regist Success
+  pureTickPrivacy: Please tick Privacy Policy
+  pureReadAccept: I have read it carefully and accept
+  purePrivacyPolicy: Privacy Policy
+  pureGetVerifyCode: Get VerifyCode
+  pureInfo: Seconds
+  pureUsernameReg: Please enter username
+  purePassWordReg: Please enter password
+  pureVerifyCodeReg: Please enter verify code
+  pureVerifyCodeCorrectReg: Please enter correct verify code
+  pureVerifyCodeSixReg: Please enter a 6-digit verify code
+  purePhoneReg: Please enter the phone
+  purePhoneCorrectReg: Please enter the correct phone number format
+  purePassWordRuleReg: The password format should be any combination of 8-18 digits
+  purePassWordSureReg: Please enter confirm password
+  purePassWordDifferentReg: The two passwords do not match!
+  purePassWordUpdateReg: Password has been updated

locales/zh-CN.yaml

@@ -1,172 +1,177 @@
 buttons:
-  hsLoginOut: 退出系统
-  hsfullscreen: 全屏
-  hsexitfullscreen: 退出全屏
-  hsrefreshRoute: 刷新路由
-  hslogin: 登录
-  hsadd: 新增
-  hsmark: 标记/取消
-  hssave: 保存
-  hssearch: 搜索
-  hsexpendAll: 全部展开
-  hscollapseAll: 全部折叠
-  hssystemSet: 打开项目配置
-  hsdelete: 删除
-  hsreload: 重新加载
-  hscloseCurrentTab: 关闭当前标签页
-  hscloseLeftTabs: 关闭左侧标签页
-  hscloseRightTabs: 关闭右侧标签页
-  hscloseOtherTabs: 关闭其他标签页
-  hscloseAllTabs: 关闭全部标签页
-  hswholeFullScreen: 全屏
-  hswholeExitFullScreen: 退出全屏
-  hscontentFullScreen: 内容区全屏
-  hscontentExitFullScreen: 内容区退出全屏
+  pureLoginOut: 退出系统
+  pureLogin: 登录
+  pureSystemSet: 打开项目配置
+  pureReload: 重新加载
+  pureCloseCurrentTab: 关闭当前标签页
+  pureCloseLeftTabs: 关闭左侧标签页
+  pureCloseRightTabs: 关闭右侧标签页
+  pureCloseOtherTabs: 关闭其他标签页
+  pureCloseAllTabs: 关闭全部标签页
+  pureContentFullScreen: 内容区全屏
+  pureContentExitFullScreen: 内容区退出全屏
 menus:
-  hshome: 首页
-  hslogin: 登录
-  hsempty: 无Layout页
-  hssysManagement: 系统管理
-  hsUser: 用户管理
-  hsRole: 角色管理
-  hsSystemMenu: 菜单管理
-  hsDept: 部门管理
-  hseditor: 编辑器
-  hsabnormal: 异常页面
-  hsfourZeroFour: "404"
-  hsfourZeroOne: "403"
-  hsFive: "500"
-  hscomponents: 组件
-  hsdialog: 函数式弹框
-  hsmessage: 消息提示
-  hsvideo: 视频
-  hssegmented: 分段控制器
-  hswaterfall: 瀑布流无限滚动
-  hsmap: 地图
-  hsdraggable: 拖拽
-  hssplitPane: 切割面板
-  hsText: 文本省略
-  hsElButton: 按钮
-  hsCheckButton: 可选按钮
-  hsbutton: 按钮动效
-  hscropping: 图片裁剪
-  hsanimatecss: animate.css选择器
-  hscountTo: 数字动画
-  hsselector: 范围选择器
-  hsflowChart: 流程图
-  hsseamless: 无缝滚动
-  hscontextmenu: 右键菜单
-  hstypeit: 打字机
-  hsjsoneditor: JSON编辑器
-  hsColorPicker: 颜色选择器
-  hsDatePicker: 日期选择器
-  hsDateTimePicker: 日期时间选择器
-  hsTimePicker: 时间选择器
-  hsTag: 标签
-  hsStatistic: 统计组件
-  hsCollapse: 折叠面板
-  hsProgress: 进度条
-  hsUpload: 文件上传
-  hsCheckCard: 多选卡片
-  hsmenus: 多级菜单
-  hsmenu1: 菜单1
-  hsmenu1-1: 菜单1-1
-  hsmenu1-2: 菜单1-2
-  hsmenu1-2-1: 菜单1-2-1
-  hsmenu1-2-2: 菜单1-2-2
-  hsmenu1-3: 菜单1-3
-  hsmenu2: 菜单2
-  permission: 权限管理
-  permissionPage: 页面权限
-  permissionButton: 按钮权限
-  hstabs: 标签页操作
-  hsguide: 引导页
-  hsAble: 功能
-  hsMenuTree: 菜单树结构
-  hsVideoFrame: 视频帧截取-wasm版
-  hsWavesurfer: 音频可视化
-  hsOptimize: 防抖、截流、复制、长按指令
-  hsWatermark: 水印
-  hsPrint: 打印
-  hsDownload: 下载
-  hsExternalPage: 外部页面
-  hsExternalDoc: 文档外链
-  hsEmbeddedDoc: 文档内嵌
-  externalLink: vue-pure-admin
-  pureutilsLink: pure-admin-utils
-  hsEpDocument: element-plus
-  hsTailwindcssDocument: tailwindcss
-  hsVueDocument: vue3
-  hsViteDocument: vite
-  hsPiniaDocument: pinia
-  hsRouterDocument: vue-router
-  hsAbout: 关于
-  hsResult: 结果页面
-  hsSuccess: 成功页面
-  hsFail: 失败页面
-  hsIconSelect: 图标选择器
-  hsTimeline: 时间线
-  hsLineTree: 树形连接线
-  hsList: 列表页
-  hsListCard: 卡片列表页
-  hsDebounce: 防抖节流
-  hsFormDesign: 表单设计器
-  hsBarcode: 条形码
-  hsQrcode: 二维码
-  hsCascader: 区域级联选择器
-  hsSwiper: Swiper插件
-  hsVirtualList: 虚拟列表
-  hsPdf: PDF预览
-  hsExcel: 导出Excel
-  hsInfiniteScroll: 表格无限滚动
-  hsSensitive: 敏感词过滤
-  hsPinyin: 汉语拼音
-  hsdanmaku: 弹幕
-  hsPureTableBase: 基础用法（23个示例）
-  hsPureTableHigh: 高级用法（11个示例）
-  hsboard: 艺术画板
-  hsMenuoverflow: 目录超出显示 Tooltip 文字提示
-  hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示
+  pureHome: 首页
+  pureLogin: 登录
+  pureEmpty: 无Layout页
+  pureTable: 表格
+  pureSysManagement: 系统管理
+  pureUser: 用户管理
+  pureRole: 角色管理
+  pureSystemMenu: 菜单管理
+  pureDept: 部门管理
+  pureSysMonitor: 系统监控
+  pureOnlineUser: 在线用户
+  pureLoginLog: 登录日志
+  pureOperationLog: 操作日志
+  pureSystemLog: 系统日志
+  pureEditor: 编辑器
+  pureAbnormal: 异常页面
+  pureFourZeroFour: "404"
+  pureFourZeroOne: "403"
+  pureFive: "500"
+  pureComponents: 组件
+  pureDialog: 函数式弹框
+  pureMessage: 消息提示
+  pureVideo: 视频
+  pureSegmented: 分段控制器
+  pureWaterfall: 瀑布流无限滚动
+  pureMap: 地图
+  pureDraggable: 拖拽
+  pureSplitPane: 切割面板
+  pureText: 文本省略
+  pureElButton: 按钮
+  pureCheckButton: 可选按钮
+  pureButton: 按钮动效
+  pureCropping: 图片裁剪
+  pureAnimatecss: animate.css选择器
+  pureCountTo: 数字动画
+  pureSelector: 范围选择器
+  pureFlowChart: 流程图
+  pureSeamless: 无缝滚动
+  pureContextmenu: 右键菜单
+  pureTypeit: 打字机
+  pureJsonEditor: JSON编辑器
+  pureColorPicker: 颜色选择器
+  pureDatePicker: 日期选择器
+  pureDateTimePicker: 日期时间选择器
+  pureTimePicker: 时间选择器
+  pureTag: 标签
+  pureStatistic: 统计组件
+  pureCollapse: 折叠面板
+  pureGanttastic: 甘特图
+  pureProgress: 进度条
+  pureUpload: 文件上传
+  pureCheckCard: 多选卡片
+  pureMenus: 多级菜单
+  pureMenu1: 菜单1
+  pureMenu1-1: 菜单1-1
+  pureMenu1-2: 菜单1-2
+  pureMenu1-2-1: 菜单1-2-1
+  pureMenu1-2-2: 菜单1-2-2
+  pureMenu1-3: 菜单1-3
+  pureMenu2: 菜单2
+  purePermission: 权限管理
+  purePermissionPage: 页面权限
+  purePermissionButton: 按钮权限
+  pureTabs: 标签页操作
+  pureGuide: 引导页
+  pureAble: 功能
+  pureMenuTree: 菜单树结构
+  pureVideoFrame: 视频帧截取-wasm版
+  pureWavesurfer: 音频可视化
+  pureRipple: 波纹(Ripple)
+  pureMqtt: MQTT客户端(mqtt)
+  pureOptimize: 防抖、截流、复制、长按指令
+  pureVerify: 图形验证码
+  pureWatermark: 水印
+  purePrint: 打印
+  pureDownload: 下载
+  pureExternalPage: 外部页面
+  pureExternalDoc: 文档外链
+  pureEmbeddedDoc: 文档内嵌
+  pureExternalLink: vue-pure-admin
+  pureUtilsLink: pure-admin-utils
+  pureColorHuntDoc: 调色板
+  pureUiGradients: 渐变色
+  pureEpDoc: element-plus
+  pureTailwindcssDoc: tailwindcss
+  pureVueDoc: vue3
+  pureViteDoc: vite
+  purePiniaDoc: pinia
+  pureRouterDoc: vue-router
+  pureAbout: 关于
+  pureResult: 结果页面
+  pureSuccess: 成功页面
+  pureFail: 失败页面
+  pureIconSelect: 图标选择器
+  pureTimeline: 时间线
+  pureLineTree: 树形连接线
+  pureList: 列表页面
+  pureListCard: 卡片列表页
+  pureDebounce: 防抖节流
+  pureFormDesign: 表单设计器
+  pureBarcode: 条形码
+  pureQrcode: 二维码
+  pureCascader: 区域级联选择器
+  pureSwiper: Swiper插件
+  pureVirtualList: 虚拟列表
+  purePdf: PDF预览
+  pureWord: Word预览
+  pureExcels: Excel预览
+  pureExcel: 导出Excel
+  pureInfiniteScroll: 表格无限滚动
+  pureSensitive: 敏感词过滤
+  purePinyin: 汉语拼音
+  pureDanmaku: 弹幕
+  pureSchemaForm: 表单
+  pureTableBase: 基础用法
+  pureTableHigh: 高级用法
+  pureTableEdit: 可编辑用法
+  pureVxeTable: 虚拟滚动
+  pureBoard: 艺术画板
+  pureMenuOverflow: 目录超出显示 Tooltip 文字提示
+  pureChildMenuOverflow: 菜单超出显示 Tooltip 文字提示
 status:
-  hsLoad: 加载中...
+  pureLoad: 加载中...
 login:
-  username: 账号
-  password: 密码
-  verifyCode: 验证码
-  remember: 天内免登录
-  rememberInfo: 勾选并登录后，规定天数内无需输入用户名和密码会自动登入系统
-  sure: 确认密码
-  forget: 忘记密码?
-  login: 登录
-  thirdLogin: 第三方登录
-  phoneLogin: 手机登录
-  qRCodeLogin: 二维码登录
-  register: 注册
-  weChatLogin: 微信登录
-  alipayLogin: 支付宝登录
-  qqLogin: QQ登录
-  weiboLogin: 微博登录
-  phone: 手机号码
-  smsVerifyCode: 短信验证码
-  back: 返回
-  test: 模拟测试
-  tip: 扫码后点击"确认"，即可完成登录
-  definite: 确定
-  loginSuccess: 登录成功
-  registerSuccess: 注册成功
-  tickPrivacy: 请勾选隐私政策
-  readAccept: 我已仔细阅读并接受
-  privacyPolicy: 《隐私政策》
-  getVerifyCode: 获取验证码
-  info: 秒后重新获取
-  usernameReg: 请输入账号
-  passwordReg: 请输入密码
-  verifyCodeReg: 请输入验证码
-  verifyCodeCorrectReg: 请输入正确的验证码
-  verifyCodeSixReg: 请输入6位数字验证码
-  phoneReg: 请输入手机号码
-  phoneCorrectReg: 请输入正确的手机号码格式
-  passwordRuleReg: 密码格式应为8-18位数字、字母、符号的任意两种组合
-  passwordSureReg: 请输入确认密码
-  passwordDifferentReg: 两次密码不一致!
-  passwordUpdateReg: 修改密码成功
+  pureUsername: 账号
+  purePassword: 密码
+  pureVerifyCode: 验证码
+  pureRemember: 天内免登录
+  pureRememberInfo: 勾选并登录后，规定天数内无需输入用户名和密码会自动登入系统
+  pureSure: 确认密码
+  pureForget: 忘记密码?
+  pureLogin: 登录
+  pureThirdLogin: 第三方登录
+  purePhoneLogin: 手机登录
+  pureQRCodeLogin: 二维码登录
+  pureRegister: 注册
+  pureWeChatLogin: 微信登录
+  pureAlipayLogin: 支付宝登录
+  pureQQLogin: QQ登录
+  pureWeiBoLogin: 微博登录
+  purePhone: 手机号码
+  pureSmsVerifyCode: 短信验证码
+  pureBack: 返回
+  pureTest: 模拟测试
+  pureTip: 扫码后点击"确认"，即可完成登录
+  pureDefinite: 确定
+  pureLoginSuccess: 登录成功
+  pureRegisterSuccess: 注册成功
+  pureTickPrivacy: 请勾选隐私政策
+  pureReadAccept: 我已仔细阅读并接受
+  purePrivacyPolicy: 《隐私政策》
+  pureGetVerifyCode: 获取验证码
+  pureInfo: 秒后重新获取
+  pureUsernameReg: 请输入账号
+  purePassWordReg: 请输入密码
+  pureVerifyCodeReg: 请输入验证码
+  pureVerifyCodeCorrectReg: 请输入正确的验证码
+  pureVerifyCodeSixReg: 请输入6位数字验证码
+  purePhoneReg: 请输入手机号码
+  purePhoneCorrectReg: 请输入正确的手机号码格式
+  purePassWordRuleReg: 密码格式应为8-18位数字、字母、符号的任意两种组合
+  purePassWordSureReg: 请输入确认密码
+  purePassWordDifferentReg: 两次密码不一致!
+  purePassWordUpdateReg: 修改密码成功

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,11 +8,11 @@ import { system, permission, frame, tabs } from "@/router/enums";
  * common：普通角色
  */
 
-const systemRouter = {
+const systemManagementRouter = {
   path: "/system",
   meta: {
     icon: "ri:settings-3-line",
-    title: "menus.hssysManagement",
+    title: "menus.pureSysManagement",
     rank: system
   },
   children: [
@@ -21,7 +21,7 @@ const systemRouter = {
       name: "SystemUser",
       meta: {
         icon: "ri:admin-line",
-        title: "menus.hsUser",
+        title: "menus.pureUser",
         roles: ["admin"]
       }
     },
@@ -30,7 +30,7 @@ const systemRouter = {
       name: "SystemRole",
       meta: {
         icon: "ri:admin-fill",
-        title: "menus.hsRole",
+        title: "menus.pureRole",
         roles: ["admin"]
       }
     },
@@ -39,7 +39,7 @@ const systemRouter = {
       name: "SystemMenu",
       meta: {
         icon: "ep:menu",
-        title: "menus.hsSystemMenu",
+        title: "menus.pureSystemMenu",
         roles: ["admin"]
       }
     },
@@ -48,7 +48,58 @@ const systemRouter = {
       name: "SystemDept",
       meta: {
         icon: "ri:git-branch-line",
-        title: "menus.hsDept",
+        title: "menus.pureDept",
+        roles: ["admin"]
+      }
+    }
+  ]
+};
+
+const systemMonitorRouter = {
+  path: "/monitor",
+  meta: {
+    icon: "ep:monitor",
+    title: "menus.pureSysMonitor",
+    rank: monitor
+  },
+  children: [
+    {
+      path: "/monitor/online-user",
+      component: "monitor/online/index",
+      name: "OnlineUser",
+      meta: {
+        icon: "ri:user-voice-line",
+        title: "menus.pureOnlineUser",
+        roles: ["admin"]
+      }
+    },
+    {
+      path: "/monitor/login-logs",
+      component: "monitor/logs/login/index",
+      name: "LoginLog",
+      meta: {
+        icon: "ri:window-line",
+        title: "menus.pureLoginLog",
+        roles: ["admin"]
+      }
+    },
+    {
+      path: "/monitor/operation-logs",
+      component: "monitor/logs/operation/index",
+      name: "OperationLog",
+      meta: {
+        icon: "ri:history-fill",
+        title: "menus.pureOperationLog",
+        roles: ["admin"]
+      }
+    },
+    {
+      path: "/monitor/system-logs",
+      component: "monitor/logs/system/index",
+      name: "SystemLog",
+      meta: {
+        icon: "ri:file-search-line",
+        title: "menus.pureSystemLog",
         roles: ["admin"]
       }
     }
@@ -58,7 +109,7 @@ const systemRouter = {
 const permissionRouter = {
   path: "/permission",
   meta: {
-    title: "menus.permission",
+    title: "menus.purePermission",
     icon: "ep:lollipop",
     rank: permission
   },
@@ -67,7 +118,7 @@ const permissionRouter = {
       path: "/permission/page/index",
       name: "PermissionPage",
       meta: {
-        title: "menus.permissionPage",
+        title: "menus.purePermissionPage",
         roles: ["admin", "common"]
       }
     },
@@ -75,7 +126,7 @@ const permissionRouter = {
       path: "/permission/button/index",
       name: "PermissionButton",
       meta: {
-        title: "menus.permissionButton",
+        title: "menus.purePermissionButton",
         roles: ["admin", "common"],
         auths: [
           "permission:btn:add",
@@ -90,30 +141,30 @@ const permissionRouter = {
 const frameRouter = {
   path: "/iframe",
   meta: {
-    icon: "ep:monitor",
-    title: "menus.hsExternalPage",
+    icon: "ri:links-fill",
+    title: "menus.pureExternalPage",
     rank: frame
   },
   children: [
     {
       path: "/iframe/external",
       meta: {
-        title: "menus.hsExternalDoc"
+        title: "menus.pureExternalDoc"
       },
       children: [
         {
           path: "/external",
           name: "https://yiming_chang.gitee.io/pure-admin-doc",
           meta: {
-            title: "menus.externalLink",
+            title: "menus.pureExternalLink",
             roles: ["admin", "common"]
           }
         },
         {
-          path: "/pureutilsLink",
+          path: "/pureUtilsLink",
           name: "https://pure-admin-utils.netlify.app/",
           meta: {
-            title: "menus.pureutilsLink",
+            title: "menus.pureUtilsLink",
             roles: ["admin", "common"]
           }
         }
@@ -122,14 +173,34 @@ const frameRouter = {
     {
       path: "/iframe/embedded",
       meta: {
-        title: "menus.hsEmbeddedDoc"
+        title: "menus.pureEmbeddedDoc"
       },
       children: [
+        {
+          path: "/iframe/colorhunt",
+          name: "FrameColorHunt",
+          meta: {
+            title: "menus.pureColorHuntDoc",
+            frameSrc: "https://colorhunt.co/",
+            keepAlive: true,
+            roles: ["admin", "common"]
+          }
+        },
+        {
+          path: "/iframe/uigradients",
+          name: "FrameUiGradients",
+          meta: {
+            title: "menus.pureUiGradients",
+            frameSrc: "https://uigradients.com/",
+            keepAlive: true,
+            roles: ["admin", "common"]
+          }
+        },
         {
           path: "/iframe/ep",
           name: "FrameEp",
           meta: {
-            title: "menus.hsEpDocument",
+            title: "menus.pureEpDoc",
             frameSrc: "https://element-plus.org/zh-CN/",
             keepAlive: true,
             roles: ["admin", "common"]
@@ -139,7 +210,7 @@ const frameRouter = {
           path: "/iframe/tailwindcss",
           name: "FrameTailwindcss",
           meta: {
-            title: "menus.hsTailwindcssDocument",
+            title: "menus.pureTailwindcssDoc",
             frameSrc: "https://tailwindcss.com/docs/installation",
             keepAlive: true,
             roles: ["admin", "common"]
@@ -149,7 +220,7 @@ const frameRouter = {
           path: "/iframe/vue3",
           name: "FrameVue",
           meta: {
-            title: "menus.hsVueDocument",
+            title: "menus.pureVueDoc",
             frameSrc: "https://cn.vuejs.org/",
             keepAlive: true,
             roles: ["admin", "common"]
@@ -159,7 +230,7 @@ const frameRouter = {
           path: "/iframe/vite",
           name: "FrameVite",
           meta: {
-            title: "menus.hsViteDocument",
+            title: "menus.pureViteDoc",
             frameSrc: "https://cn.vitejs.dev/",
             keepAlive: true,
             roles: ["admin", "common"]
@@ -169,7 +240,7 @@ const frameRouter = {
           path: "/iframe/pinia",
           name: "FramePinia",
           meta: {
-            title: "menus.hsPiniaDocument",
+            title: "menus.purePiniaDoc",
             frameSrc: "https://pinia.vuejs.org/zh/index.html",
             keepAlive: true,
             roles: ["admin", "common"]
@@ -179,7 +250,7 @@ const frameRouter = {
           path: "/iframe/vue-router",
           name: "FrameRouter",
           meta: {
-            title: "menus.hsRouterDocument",
+            title: "menus.pureRouterDoc",
             frameSrc: "https://router.vuejs.org/zh/",
             keepAlive: true,
             roles: ["admin", "common"]
@@ -194,7 +265,7 @@ const tabsRouter = {
   path: "/tabs",
   meta: {
     icon: "ri:bookmark-2-line",
-    title: "menus.hstabs",
+    title: "menus.pureTabs",
     rank: tabs
   },
   children: [
@@ -202,7 +273,7 @@ const tabsRouter = {
       path: "/tabs/index",
       name: "Tabs",
       meta: {
-        title: "menus.hstabs",
+        title: "menus.pureTabs",
         roles: ["admin", "common"]
       }
     },
@@ -239,7 +310,13 @@ export default defineFakeRoute([
     response: () => {
       return {
         success: true,
-        data: [systemRouter, permissionRouter, frameRouter, tabsRouter]
+        data: [
+          systemManagementRouter,
+          systemMonitorRouter,
+          permissionRouter,
+          frameRouter,
+          tabsRouter
+        ]
       };
     }
   }

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.pureExternalPage"
+          },
+          {
+            parentId: 100,
+            id: 101,
+            menuType: 0,
+            title: "menus.pureExternalDoc"
+          },
+          {
+            parentId: 101,
+            id: 102,
+            menuType: 2,
+            title: "menus.pureExternalLink"
+          },
+          {
+            parentId: 101,
+            id: 103,
+            menuType: 2,
+            title: "menus.pureUtilsLink"
+          },
+          {
+            parentId: 100,
+            id: 104,
+            menuType: 1,
+            title: "menus.pureEmbeddedDoc"
+          },
+          {
+            parentId: 104,
+            id: 105,
+            menuType: 1,
+            title: "menus.pureEpDoc"
+          },
+          {
+            parentId: 104,
+            id: 106,
+            menuType: 1,
+            title: "menus.pureTailwindcssDoc"
+          },
+          {
+            parentId: 104,
+            id: 107,
+            menuType: 1,
+            title: "menus.pureVueDoc"
+          },
+          {
+            parentId: 104,
+            id: 108,
+            menuType: 1,
+            title: "menus.pureViteDoc"
+          },
+          {
+            parentId: 104,
+            id: 109,
+            menuType: 1,
+            title: "menus.purePiniaDoc"
+          },
+          {
+            parentId: 104,
+            id: 110,
+            menuType: 1,
+            title: "menus.pureRouterDoc"
+          },
+          // 权限管理
+          {
+            parentId: 0,
+            id: 200,
+            menuType: 0,
+            title: "menus.purePermission"
+          },
+          {
+            parentId: 200,
+            id: 201,
+            menuType: 0,
+            title: "menus.purePermissionPage"
+          },
+          {
+            parentId: 200,
+            id: 202,
+            menuType: 0,
+            title: "menus.purePermissionButton"
+          },
+          {
+            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.pureSysManagement"
+          },
+          {
+            parentId: 300,
+            id: 301,
+            menuType: 0,
+            title: "menus.pureUser"
+          },
+          {
+            parentId: 300,
+            id: 302,
+            menuType: 0,
+            title: "menus.pureRole"
+          },
+          {
+            parentId: 300,
+            id: 303,
+            menuType: 0,
+            title: "menus.pureSystemMenu"
+          },
+          {
+            parentId: 300,
+            id: 304,
+            menuType: 0,
+            title: "menus.pureDept"
+          },
+          // 系统监控
+          {
+            parentId: 0,
+            id: 400,
+            menuType: 0,
+            title: "menus.pureSysMonitor"
+          },
+          {
+            parentId: 400,
+            id: 401,
+            menuType: 0,
+            title: "menus.pureOnlineUser"
+          },
+          {
+            parentId: 400,
+            id: 402,
+            menuType: 0,
+            title: "menus.pureLoginLog"
+          },
+          {
+            parentId: 400,
+            id: 403,
+            menuType: 0,
+            title: "menus.pureOperationLog"
+          },
+          {
+            parentId: 400,
+            id: 404,
+            menuType: 0,
+            title: "menus.pureSystemLog"
+          },
+          // 标签页操作
+          {
+            parentId: 0,
+            id: 500,
+            menuType: 0,
+            title: "menus.pureTabs"
+          },
+          {
+            parentId: 500,
+            id: 501,
+            menuType: 0,
+            title: "menus.pureTabs"
+          },
+          {
+            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",
@@ -153,13 +381,13 @@ export default defineFakeRoute([
             parentId: 0,
             id: 100,
             menuType: 0, // 菜单类型（0代表菜单、1代表iframe、2代表外链、3代表按钮）
-            title: "menus.hsExternalPage",
+            title: "menus.pureExternalPage",
             name: "PureIframe",
             path: "/iframe",
             component: "",
             rank: 7,
             redirect: "",
-            icon: "ep:monitor",
+            icon: "ri:links-fill",
             extraIcon: "",
             enterTransition: "",
             leaveTransition: "",
@@ -176,7 +404,7 @@ export default defineFakeRoute([
             parentId: 100,
             id: 101,
             menuType: 0,
-            title: "menus.hsExternalDoc",
+            title: "menus.pureExternalDoc",
             name: "PureIframeExternal",
             path: "/iframe/external",
             component: "",
@@ -199,7 +427,7 @@ export default defineFakeRoute([
             parentId: 101,
             id: 102,
             menuType: 2,
-            title: "menus.externalLink",
+            title: "menus.pureExternalLink",
             name: "https://yiming_chang.gitee.io/pure-admin-doc",
             path: "/external",
             component: "",
@@ -222,9 +450,9 @@ export default defineFakeRoute([
             parentId: 101,
             id: 103,
             menuType: 2,
-            title: "menus.pureutilsLink",
+            title: "menus.pureUtilsLink",
             name: "https://pure-admin-utils.netlify.app/",
-            path: "/pureutilsLink",
+            path: "/pureUtilsLink",
             component: "",
             rank: null,
             redirect: "",
@@ -245,7 +473,7 @@ export default defineFakeRoute([
             parentId: 100,
             id: 104,
             menuType: 1,
-            title: "menus.hsEmbeddedDoc",
+            title: "menus.pureEmbeddedDoc",
             name: "PureIframeEmbedded",
             path: "/iframe/embedded",
             component: "",
@@ -268,7 +496,7 @@ export default defineFakeRoute([
             parentId: 104,
             id: 105,
             menuType: 1,
-            title: "menus.hsEpDocument",
+            title: "menus.pureEpDoc",
             name: "FrameEp",
             path: "/iframe/ep",
             component: "",
@@ -291,7 +519,7 @@ export default defineFakeRoute([
             parentId: 104,
             id: 106,
             menuType: 1,
-            title: "menus.hsTailwindcssDocument",
+            title: "menus.pureTailwindcssDoc",
             name: "FrameTailwindcss",
             path: "/iframe/tailwindcss",
             component: "",
@@ -314,7 +542,7 @@ export default defineFakeRoute([
             parentId: 104,
             id: 107,
             menuType: 1,
-            title: "menus.hsVueDocument",
+            title: "menus.pureVueDoc",
             name: "FrameVue",
             path: "/iframe/vue3",
             component: "",
@@ -337,7 +565,7 @@ export default defineFakeRoute([
             parentId: 104,
             id: 108,
             menuType: 1,
-            title: "menus.hsViteDocument",
+            title: "menus.pureViteDoc",
             name: "FrameVite",
             path: "/iframe/vite",
             component: "",
@@ -360,7 +588,7 @@ export default defineFakeRoute([
             parentId: 104,
             id: 109,
             menuType: 1,
-            title: "menus.hsPiniaDocument",
+            title: "menus.purePiniaDoc",
             name: "FramePinia",
             path: "/iframe/pinia",
             component: "",
@@ -383,7 +611,7 @@ export default defineFakeRoute([
             parentId: 104,
             id: 110,
             menuType: 1,
-            title: "menus.hsRouterDocument",
+            title: "menus.pureRouterDoc",
             name: "FrameRouter",
             path: "/iframe/vue-router",
             component: "",
@@ -407,7 +635,7 @@ export default defineFakeRoute([
             parentId: 0,
             id: 200,
             menuType: 0,
-            title: "menus.permission",
+            title: "menus.purePermission",
             name: "PurePermission",
             path: "/permission",
             component: "",
@@ -430,7 +658,7 @@ export default defineFakeRoute([
             parentId: 200,
             id: 201,
             menuType: 0,
-            title: "menus.permissionPage",
+            title: "menus.purePermissionPage",
             name: "PermissionPage",
             path: "/permission/page/index",
             component: "",
@@ -453,7 +681,7 @@ export default defineFakeRoute([
             parentId: 200,
             id: 202,
             menuType: 0,
-            title: "menus.permissionButton",
+            title: "menus.purePermissionButton",
             name: "PermissionButton",
             path: "/permission/button/index",
             component: "",
@@ -546,7 +774,7 @@ export default defineFakeRoute([
             parentId: 0,
             id: 300,
             menuType: 0,
-            title: "menus.hssysManagement",
+            title: "menus.pureSysManagement",
             name: "PureSystem",
             path: "/system",
             component: "",
@@ -569,7 +797,7 @@ export default defineFakeRoute([
             parentId: 300,
             id: 301,
             menuType: 0,
-            title: "menus.hsUser",
+            title: "menus.pureUser",
             name: "SystemUser",
             path: "/system/user/index",
             component: "",
@@ -592,7 +820,7 @@ export default defineFakeRoute([
             parentId: 300,
             id: 302,
             menuType: 0,
-            title: "menus.hsRole",
+            title: "menus.pureRole",
             name: "SystemRole",
             path: "/system/role/index",
             component: "",
@@ -615,7 +843,7 @@ export default defineFakeRoute([
             parentId: 300,
             id: 303,
             menuType: 0,
-            title: "menus.hsSystemMenu",
+            title: "menus.pureSystemMenu",
             name: "SystemMenu",
             path: "/system/menu/index",
             component: "",
@@ -638,7 +866,7 @@ export default defineFakeRoute([
             parentId: 300,
             id: 304,
             menuType: 0,
-            title: "menus.hsDept",
+            title: "menus.pureDept",
             name: "SystemDept",
             path: "/system/dept/index",
             component: "",
@@ -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.pureSysMonitor",
+            name: "PureMonitor",
+            path: "/monitor",
             component: "",
             rank: 11,
             redirect: "",
-            icon: "ri:bookmark-2-line",
+            icon: "ep:monitor",
             extraIcon: "",
             enterTransition: "",
             leaveTransition: "",
@@ -685,7 +913,123 @@ export default defineFakeRoute([
             parentId: 400,
             id: 401,
             menuType: 0,
-            title: "menus.hstabs",
+            title: "menus.pureOnlineUser",
+            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.pureLoginLog",
+            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.pureOperationLog",
+            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.pureSystemLog",
+            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.pureTabs",
+            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.pureTabs",
             name: "Tabs",
             path: "/tabs/index",
             component: "",
@@ -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.pureSysMonitor",
+                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.pureOnlineUser",
+                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.pureLoginLog",
+                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.pureOperationLog",
+                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.pureSystemLog",
+                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()
+        };
+      }
+    }
   }
 ]);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-pure-admin",
-  "version": "5.1.0",
+  "version": "5.3.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -49,64 +49,72 @@
   },
   "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.5",
+    "@vue-office/docx": "^1.6.0",
+    "@vue-office/excel": "^1.7.2",
     "@vueuse/core": "^10.9.0",
     "@vueuse/motion": "^2.1.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "@zxcvbn-ts/core": "^3.0.4",
     "animate.css": "^4.1.1",
-    "axios": "^1.6.7",
+    "axios": "^1.6.8",
     "china-area-data": "^5.0.1",
     "cropperjs": "^1.6.1",
     "dayjs": "^1.11.10",
     "echarts": "^5.5.0",
     "el-table-infinite-scroll": "^3.0.3",
-    "element-plus": "^2.6.0",
+    "element-plus": "^2.6.2",
     "intro.js": "^7.2.0",
     "js-cookie": "^3.0.5",
     "jsbarcode": "^3.11.6",
     "localforage": "^1.10.0",
     "mint-filter": "^4.0.3",
     "mitt": "^3.0.1",
+    "mqtt": "4.3.7",
     "nprogress": "^0.2.0",
     "path": "^0.12.7",
     "pinia": "^2.1.7",
     "pinyin-pro": "^3.19.6",
-    "plus-pro-components": "^0.0.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 +122,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.4.0",
+    "@typescript-eslint/parser": "^7.4.0",
     "@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.2",
+    "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.24.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",
-    "stylelint": "^16.2.1",
-    "stylelint-config-recess-order": "^4.6.0",
+    "sass": "^1.72.0",
+    "stylelint": "^16.3.1",
+    "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.6",
     "vite-plugin-cdn-import": "^0.3.5",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-fake-server": "^2.1.1",

public/platform-config.json

@@ -1,5 +1,5 @@
 {
-  "Version": "5.1.0",
+  "Version": "5.3.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],

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() {

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

src/components/ReAnimateSelector/index.ts

@@ -1,5 +1,5 @@
-import reAnimateSelector from "./src/index.vue";
 import { withInstall } from "@pureadmin/utils";
+import reAnimateSelector from "./src/index.vue";
 
 /** [animate.css](https://animate.style/) 选择器组件 */
 export const ReAnimateSelector = withInstall(reAnimateSelector);

src/components/ReBarcode/index.ts

@@ -1,5 +1,5 @@
-import reBarcode from "./src/index.vue";
 import { withInstall } from "@pureadmin/utils";
+import reBarcode from "./src/index.vue";
 
 /** 条形码组件 */
 export const ReBarcode = withInstall(reBarcode);

src/components/ReCountTo/src/normal/index.tsx

@@ -1,10 +1,10 @@
 import {
-  defineComponent,
-  reactive,
-  computed,
   watch,
+  unref,
+  computed,
+  reactive,
   onMounted,
-  unref
+  defineComponent
 } from "vue";
 import { countToProps } from "./props";
 import { isNumber } from "@pureadmin/utils";

src/components/ReCountTo/src/normal/props.ts

@@ -1,5 +1,6 @@
 import type { PropType } from "vue";
 import propTypes from "@/utils/propTypes";
+
 export const countToProps = {
   startVal: propTypes.number.def(0),
   endVal: propTypes.number.def(2020),

src/components/ReCountTo/src/rebound/index.tsx

@@ -1,9 +1,9 @@
 import "./rebound.css";
 import {
-  defineComponent,
   ref,
   unref,
   onBeforeMount,
+  defineComponent,
   onBeforeUnmount
 } from "vue";
 import { reboundProps } from "./props";

src/components/ReCountTo/src/rebound/props.ts

@@ -1,5 +1,6 @@
 import type { PropType } from "vue";
 import propTypes from "@/utils/propTypes";
+
 export const reboundProps = {
   delay: propTypes.number.def(1),
   blur: propTypes.number.def(2),

src/components/ReCropper/src/index.tsx

@@ -6,10 +6,10 @@ import { useEventListener } from "@vueuse/core";
 import { longpress } from "@/directives/longpress";
 import { useTippy, directive as tippy } from "vue-tippy";
 import {
+  type PropType,
   ref,
   unref,
   computed,
-  type PropType,
   onMounted,
   onUnmounted,
   defineComponent

src/components/ReDialog/index.ts

@@ -51,8 +51,8 @@ const closeAllDialog = () => {
 
 /** 千万别忘了在下面这三处引入并注册下，放心注册，不使用`addDialog`调用就不会被挂载
  * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L4
- * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L13
- * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L20
+ * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L12
+ * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L22
  */
 const ReDialog = withInstall(reDialog);
 

src/components/ReDialog/index.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import {
-  closeDialog,
-  dialogStore,
   type EventType,
   type ButtonProps,
-  type DialogOptions
+  type DialogOptions,
+  closeDialog,
+  dialogStore
 } from "./index";
 import { ref, computed } from "vue";
 import { isFunction } from "@pureadmin/utils";
@@ -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"

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,

src/components/ReFlicker/index.ts

@@ -1,5 +1,5 @@
 import "./index.css";
-import { h, defineComponent, type Component } from "vue";
+import { type Component, h, defineComponent } from "vue";
 
 export interface attrsType {
   width?: string;

src/components/ReFlop/src/filpper.tsx

@@ -1,6 +1,6 @@
-import { defineComponent, ref } from "vue";
-import propTypes from "@/utils/propTypes";
 import "./filpper.css";
+import propTypes from "@/utils/propTypes";
+import { defineComponent, ref } from "vue";
 
 const props = {
   // front paper text

src/components/ReFlop/src/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, unref, nextTick, onUnmounted } from "vue";
 import flippers from "./filpper";
+import { ref, unref, nextTick, onUnmounted } from "vue";
 
 const timer = ref(null);
 const flipObjs = ref([]);

src/components/ReFlowChart/src/Control.vue

@@ -105,27 +105,24 @@ onMounted(() => {
         @mouseenter.prevent="onEnter(key)"
         @mouseleave.prevent="focusIndex = -1"
       >
-        <el-tooltip
-          :content="item.text"
-          :visible="focusIndex === key"
-          placement="right"
+        <button
+          :ref="'controlButton' + key"
+          v-tippy="{
+            content: item.text
+          }"
+          :disabled="item.disabled"
+          :style="{
+            cursor: item.disabled === false ? 'pointer' : 'not-allowed',
+            color: item.disabled === false ? '' : '#00000040',
+            background: 'transparent'
+          }"
+          @click="onControl(item, key)"
         >
-          <button
-            :ref="'controlButton' + key"
-            :disabled="item.disabled"
-            :style="{
-              cursor: item.disabled === false ? 'pointer' : 'not-allowed',
-              color: item.disabled === false ? '' : '#00000040',
-              background: 'transparent'
-            }"
-            @click="onControl(item, key)"
-          >
-            <span
-              :class="'iconfont ' + item.icon"
-              :style="{ fontSize: `${item.size}px` }"
-            />
-          </button>
-        </el-tooltip>
+          <span
+            :class="'iconfont ' + item.icon"
+            :style="{ fontSize: `${item.size}px` }"
+          />
+        </button>
       </li>
     </ul>
   </div>

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

src/components/RePureTableBar/src/bar.tsx

@@ -1,3 +1,5 @@
+import Sortable from "sortablejs";
+import { transformI18n } from "@/plugins/i18n";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { defineComponent, ref, computed, type PropType, nextTick } from "vue";
 import {
@@ -8,7 +10,6 @@ import {
   getKeyList
 } from "@pureadmin/utils";
 
-import Sortable from "sortablejs";
 import DragIcon from "./svg/drag.svg?component";
 import ExpandIcon from "./svg/expand.svg?component";
 import RefreshIcon from "./svg/refresh.svg?component";
@@ -118,6 +119,7 @@ export default defineComponent({
     }
 
     function handleCheckedColumnsChange(value: string[]) {
+      checkedColumns.value = value;
       const checkedCount = value.length;
       checkAll.value = checkedCount === checkColumnList.length;
       isIndeterminate.value =
@@ -125,7 +127,9 @@ export default defineComponent({
     }
 
     function handleCheckColumnListChange(val: boolean, label: string) {
-      dynamicColumns.value.filter(item => item.label === label)[0].hide = !val;
+      dynamicColumns.value.filter(
+        item => transformI18n(item.label) === transformI18n(label)
+      )[0].hide = !val;
     }
 
     async function onReset() {
@@ -198,7 +202,9 @@ export default defineComponent({
     };
 
     const isFixedColumn = (label: string) => {
-      return dynamicColumns.value.filter(item => item.label === label)[0].fixed
+      return dynamicColumns.value.filter(
+        item => transformI18n(item.label) === transformI18n(label)
+      )[0].fixed
         ? true
         : false;
     };
@@ -293,7 +299,7 @@ export default defineComponent({
                 <div class="pt-[6px] pl-[11px]">
                   <el-scrollbar max-height="36vh">
                     <el-checkbox-group
-                      v-model={checkedColumns.value}
+                      modelValue={checkedColumns.value}
                       onChange={value => handleCheckedColumnsChange(value)}
                     >
                       <el-space
@@ -301,7 +307,7 @@ export default defineComponent({
                         alignment="flex-start"
                         size={0}
                       >
-                        {checkColumnList.map(item => {
+                        {checkColumnList.map((item, index) => {
                           return (
                             <div class="flex items-center">
                               <DragIcon
@@ -316,17 +322,18 @@ export default defineComponent({
                                 }) => rowDrop(event)}
                               />
                               <el-checkbox
-                                key={item}
+                                key={index}
+                                label={item}
                                 value={item}
                                 onChange={value =>
                                   handleCheckColumnListChange(value, item)
                                 }
                               >
                                 <span
-                                  title={item}
+                                  title={transformI18n(item)}
                                   class="inline-block w-[120px] truncate hover:text-text_color_primary"
                                 >
-                                  {item}
+                                  {transformI18n(item)}
                                 </span>
                               </el-checkbox>
                             </div>

src/components/ReQrcode/src/index.tsx

@@ -1,10 +1,10 @@
 import {
+  type PropType,
   ref,
   unref,
   watch,
   nextTick,
   computed,
-  type PropType,
   defineComponent
 } from "vue";
 import "./index.scss";

src/components/ReSeamlessScroll/src/index.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
-import { computed, ref, unref, nextTick } from "vue";
-import type { CSSProperties, PropType } from "vue";
+import {
+  type PropType,
+  type CSSProperties,
+  ref,
+  unref,
+  nextTick,
+  computed
+} from "vue";
 import {
   tryOnMounted,
   tryOnUnmounted,

src/components/ReSegmented/src/index.css

@@ -1,11 +1,104 @@
 .pure-segmented {
+  --pure-control-padding-horizontal: 12px;
+  --pure-control-padding-horizontal-sm: 8px;
+  --pure-segmented-track-padding: 2px;
+  --pure-segmented-line-width: 1px;
+
+  --pure-segmented-border-radius-small: 4px;
+  --pure-segmented-border-radius-base: 6px;
+  --pure-segmented-border-radius-large: 8px;
+
   box-sizing: border-box;
   display: inline-block;
-  padding: 2px;
-  font-size: 14px;
+  padding: var(--pure-segmented-track-padding);
+  font-size: var(--el-font-size-base);
   color: rgba(0, 0, 0, 0.65);
   background-color: rgb(0 0 0 / 4%);
-  border-radius: 2px;
+  border-radius: var(--pure-segmented-border-radius-base);
+}
+
+.pure-segmented-block {
+  display: flex;
+}
+
+.pure-segmented-block .pure-segmented-item {
+  flex: 1;
+  min-width: 0;
+}
+
+.pure-segmented-block .pure-segmented-item > .pure-segmented-item-label > span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* small */
+.pure-segmented.pure-segmented--small {
+  border-radius: var(--pure-segmented-border-radius-small);
+}
+.pure-segmented.pure-segmented--small .pure-segmented-item {
+  border-radius: var(--el-border-radius-small);
+}
+.pure-segmented.pure-segmented--small .pure-segmented-item > div {
+  min-height: calc(
+    var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2
+  );
+  line-height: calc(
+    var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2
+  );
+  padding: 0
+    calc(
+      var(--pure-control-padding-horizontal-sm) -
+        var(--pure-segmented-line-width)
+    );
+}
+
+/* large */
+.pure-segmented.pure-segmented--large {
+  border-radius: var(--pure-segmented-border-radius-large);
+}
+.pure-segmented.pure-segmented--large .pure-segmented-item {
+  border-radius: calc(
+    var(--el-border-radius-base) + var(--el-border-radius-small)
+  );
+}
+.pure-segmented.pure-segmented--large .pure-segmented-item > div {
+  min-height: calc(
+    var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2
+  );
+  line-height: calc(
+    var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2
+  );
+  padding: 0
+    calc(
+      var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width)
+    );
+  font-size: var(--el-font-size-medium);
+}
+
+/* default */
+.pure-segmented-item {
+  position: relative;
+  text-align: center;
+  cursor: pointer;
+  border-radius: var(--el-border-radius-base);
+  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.pure-segmented .pure-segmented-item > div {
+  min-height: calc(
+    var(--el-component-size) - var(--pure-segmented-track-padding) * 2
+  );
+  line-height: calc(
+    var(--el-component-size) - var(--pure-segmented-track-padding) * 2
+  );
+  padding: 0
+    calc(
+      var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width)
+    );
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: 0.1s;
 }
 
 .pure-segmented-group {
@@ -37,23 +130,6 @@
   will-change: transform, width;
 }
 
-.pure-segmented-item {
-  position: relative;
-  text-align: center;
-  cursor: pointer;
-  border-radius: 4px;
-  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-
-.pure-segmented-item > div {
-  min-height: 28px;
-  line-height: 28px;
-  padding: 0 11px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
 .pure-segmented-item > input {
   position: absolute;
   inset-block-start: 0;
@@ -67,6 +143,7 @@
 .pure-segmented-item-label {
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 
 .pure-segmented-item-icon svg {

src/components/ReSegmented/src/index.tsx

@@ -1,5 +1,14 @@
 import "./index.css";
+import type { OptionsType } from "./type";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import {
+  useDark,
+  isNumber,
+  isFunction,
+  useResizeObserver
+} from "@pureadmin/utils";
+import {
+  type PropType,
   h,
   ref,
   toRef,
@@ -8,9 +17,6 @@ import {
   defineComponent,
   getCurrentInstance
 } from "vue";
-import type { OptionsType } from "./type";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { isFunction, isNumber, useDark } from "@pureadmin/utils";
 
 const props = {
   options: {
@@ -22,6 +28,15 @@ const props = {
     type: undefined,
     require: false,
     default: "0"
+  },
+  /** 将宽度调整为父元素宽度	 */
+  block: {
+    type: Boolean,
+    default: false
+  },
+  /** 控件尺寸	 */
+  size: {
+    type: String as PropType<"small" | "default" | "large">
   }
 };
 
@@ -71,12 +86,23 @@ export default defineComponent({
     function handleInit(index = curIndex.value) {
       nextTick(() => {
         const curLabelRef = instance?.proxy?.$refs[`labelRef${index}`] as ElRef;
+        if (!curLabelRef) return;
         width.value = curLabelRef.clientWidth;
         translateX.value = curLabelRef.offsetLeft;
         initStatus.value = true;
       });
     }
 
+    function handleResizeInit() {
+      useResizeObserver(".pure-segmented", () => {
+        nextTick(() => {
+          handleInit(curIndex.value);
+        });
+      });
+    }
+
+    props.block && handleResizeInit();
+
     watch(
       () => curIndex.value,
       index => {
@@ -85,11 +111,12 @@ export default defineComponent({
         });
       },
       {
-        deep: true,
         immediate: true
       }
     );
 
+    watch(() => props.size, handleResizeInit);
+
     const rendLabel = () => {
       return props.options.map((option, index) => {
         return (
@@ -148,7 +175,14 @@ export default defineComponent({
     };
 
     return () => (
-      <div class="pure-segmented">
+      <div
+        class={{
+          "pure-segmented": true,
+          "pure-segmented-block": props.block,
+          "pure-segmented--large": props.size === "large",
+          "pure-segmented--small": props.size === "small"
+        }}
+      >
         <div class="pure-segmented-group">
           <div
             class="pure-segmented-item-selected"

src/components/ReSelector/src/index.tsx

@@ -1,13 +1,13 @@
+import "./index.css";
 import {
-  defineComponent,
+  unref,
   computed,
   nextTick,
   onBeforeMount,
-  getCurrentInstance,
-  unref
+  defineComponent,
+  getCurrentInstance
 } from "vue";
 import { addClass, removeClass, toggleClass } from "@pureadmin/utils";
-import "./index.css";
 
 const stayClass = "stay"; //鼠标点击
 const activeClass = "hs-on"; //鼠标移动上去

src/components/ReSplitPane/index.tsx

@@ -1,6 +1,6 @@
-import { defineComponent, ref, unref, computed, type PropType } from "vue";
-import resizer from "./resizer";
 import "./index.css";
+import resizer from "./resizer";
+import { type PropType, defineComponent, ref, unref, computed } from "vue";
 
 export interface ContextProps {
   minPercent: number;

src/components/ReSplitPane/resizer.tsx

@@ -1,5 +1,5 @@
-import { computed, unref, defineComponent } from "vue";
 import "./resizer.css";
+import { computed, unref, defineComponent } from "vue";
 
 export default defineComponent({
   name: "Resizer",

src/components/ReText/src/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { h, onMounted, ref, useSlots } from "vue";
-import { useTippy, type TippyOptions } from "vue-tippy";
+import { type TippyOptions, useTippy } from "vue-tippy";
 
 const props = defineProps({
   // 行数

src/components/ReTreeLine/index.ts

@@ -1,8 +1,7 @@
 // 参考https://www.npmjs.com/package/element-tree-line (主要是替换需要通过函数传参的方式去注册组件，并添加更好的类型支持，并移除this.$scopedSlots，在3.x中,将所有this.$scopedSlots替换为this.$slots)
-import { isFunction } from "@pureadmin/utils";
-import { h, defineComponent } from "vue";
-import type { PropType } from "vue";
 import "./index.scss";
+import { isFunction } from "@pureadmin/utils";
+import { type PropType, h, defineComponent } from "vue";
 import type {
   TreeNode,
   TreeData,

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;
 

src/components/ReTypeit/src/index.tsx

@@ -1,6 +1,6 @@
 import type { El } from "typeit/dist/types";
-import TypeIt, { type TypeItOptions } from "typeit";
-import { ref, defineComponent, onMounted, type PropType } from "vue";
+import TypeIt, { type Options as TypeItOptions } from "typeit";
+import { type PropType, ref, defineComponent, onMounted } from "vue";
 
 // 打字机效果组件（配置项详情请查阅 https://www.typeitjs.com/docs/vanilla/usage#options）
 export default defineComponent({

src/config/index.ts

@@ -1,5 +1,5 @@
-import type { App } from "vue";
 import axios from "axios";
+import type { App } from "vue";
 
 let config: object = {};
 const { VITE_PUBLIC_PATH } = import.meta.env;

src/directives/index.ts

@@ -2,3 +2,4 @@ export * from "./auth";
 export * from "./copy";
 export * from "./longpress";
 export * from "./optimize";
+export * from "./ripple";

src/directives/optimize/index.ts

@@ -1,9 +1,9 @@
 import {
-  isFunction,
-  isObject,
   isArray,
+  throttle,
   debounce,
-  throttle
+  isObject,
+  isFunction
 } from "@pureadmin/utils";
 import { useEventListener } from "@vueuse/core";
 import type { Directive, DirectiveBinding } from "vue";

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

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

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

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">
@@ -94,14 +96,14 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
                 :icon="LogoutCircleRLine"
                 style="margin: 5px"
               />
-              {{ t("buttons.hsLoginOut") }}
+              {{ t("buttons.pureLoginOut") }}
             </el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
       <span
         class="set-icon navbar-bg-hover"
-        :title="t('buttons.hssystemSet')"
+        :title="t('buttons.pureSystemSet')"
         @click="onPanel"
       >
         <IconifyIconOffline :icon="Setting" />

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="useAppStoreHook().getViewportWidth > 1280">
+        <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-[var(--pure-border-color)]"
+          @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;
   }
 }

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>

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>

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">
@@ -110,14 +113,14 @@ nextTick(() => {
                 :icon="LogoutCircleRLine"
                 style="margin: 5px"
               />
-              {{ t("buttons.hsLoginOut") }}
+              {{ t("buttons.pureLoginOut") }}
             </el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
       <span
         class="set-icon navbar-bg-hover"
-        :title="t('buttons.hssystemSet')"
+        :title="t('buttons.pureSystemSet')"
         @click="onPanel"
       >
         <IconifyIconOffline :icon="Setting" />

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

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">
@@ -143,14 +146,14 @@ watch(
                 :icon="LogoutCircleRLine"
                 style="margin: 5px"
               />
-              {{ t("buttons.hsLoginOut") }}
+              {{ t("buttons.pureLoginOut") }}
             </el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
       <span
         class="set-icon navbar-bg-hover"
-        :title="t('buttons.hssystemSet')"
+        :title="t('buttons.pureSystemSet')"
         @click="onPanel"
       >
         <IconifyIconOffline :icon="Setting" />

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"

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.pureContentExitFullScreen");
         } else {
-          tagsViews[7].icon = Fullscreen;
-          tagsViews[7].text = $t("buttons.hscontentFullScreen");
+          tagsViews[6].icon = Fullscreen;
+          tagsViews[6].text = $t("buttons.pureContentFullScreen");
         }
       }, 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;
 

src/layout/frameView.vue

@@ -71,7 +71,7 @@ onMounted(() => {
   <div
     v-loading="loading"
     class="frame"
-    :element-loading-text="t('status.hsLoad')"
+    :element-loading-text="t('status.pureLoad')"
   >
     <iframe ref="frameRef" :src="frameSrc" class="frame-iframe" />
   </div>

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;
   }
 
   /** 设置导航主题色 */

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

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,

src/layout/hooks/useTag.ts

@@ -64,59 +64,52 @@ export function useTags() {
   const tagsViews = reactive<Array<tagsViewsType>>([
     {
       icon: RefreshRight,
-      text: $t("buttons.hsreload"),
+      text: $t("buttons.pureReload"),
       divided: false,
       disabled: false,
       show: true
     },
     {
       icon: Close,
-      text: $t("buttons.hscloseCurrentTab"),
+      text: $t("buttons.pureCloseCurrentTab"),
       divided: false,
       disabled: multiTags.value.length > 1 ? false : true,
       show: true
     },
     {
       icon: CloseLeftTags,
-      text: $t("buttons.hscloseLeftTabs"),
+      text: $t("buttons.pureCloseLeftTabs"),
       divided: true,
       disabled: multiTags.value.length > 1 ? false : true,
       show: true
     },
     {
       icon: CloseRightTags,
-      text: $t("buttons.hscloseRightTabs"),
+      text: $t("buttons.pureCloseRightTabs"),
       divided: false,
       disabled: multiTags.value.length > 1 ? false : true,
       show: true
     },
     {
       icon: CloseOtherTags,
-      text: $t("buttons.hscloseOtherTabs"),
+      text: $t("buttons.pureCloseOtherTabs"),
       divided: true,
       disabled: multiTags.value.length > 2 ? false : true,
       show: true
     },
     {
       icon: CloseAllTags,
-      text: $t("buttons.hscloseAllTabs"),
+      text: $t("buttons.pureCloseAllTabs"),
       divided: false,
       disabled: multiTags.value.length > 1 ? false : true,
       show: true
     },
     {
       icon: Fullscreen,
-      text: $t("buttons.hswholeFullScreen"),
+      text: $t("buttons.pureContentFullScreen"),
       divided: true,
       disabled: false,
       show: true
-    },
-    {
-      icon: Fullscreen,
-      text: $t("buttons.hscontentFullScreen"),
-      divided: false,
-      disabled: false,
-      show: true
     }
   ]);
 

src/layout/index.vue

@@ -89,7 +89,8 @@ let isAutoCloseSidebar = true;
 useResizeObserver(appWrapperRef, entries => {
   if (isMobile) return;
   const entry = entries[0];
-  const [{ inlineSize: width }] = entry.borderBoxSize;
+  const [{ inlineSize: width, blockSize: height }] = entry.borderBoxSize;
+  useAppStoreHook().setViewportSize({ width, height });
   width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
   /** width app-wrapper类容器宽度
    * 0 < width <= 760 隐藏侧边栏

src/layout/types.ts

@@ -7,7 +7,7 @@ export const routerArrays: Array<RouteConfigs> =
         {
           path: "/welcome",
           meta: {
-            title: "menus.hshome",
+            title: "menus.pureHome",
             icon: "ep:home-filled"
           }
         }

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

src/plugins/elementPlus.ts

@@ -10,6 +10,8 @@ import {
   ElAutocomplete,
   ElAutoResizer,
   ElAvatar,
+  ElAnchor,
+  ElAnchorLink,
   ElBacktop,
   ElBadge,
   ElBreadcrumb,
@@ -123,6 +125,8 @@ const components = [
   ElAutocomplete,
   ElAutoResizer,
   ElAvatar,
+  ElAnchor,
+  ElAnchorLink,
   ElBacktop,
   ElBadge,
   ElBreadcrumb,

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

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,

src/router/modules/able.ts

@@ -6,16 +6,33 @@ export default {
   redirect: "/able/watermark",
   meta: {
     icon: "ri:ubuntu-fill",
-    title: $t("menus.hsAble"),
+    title: $t("menus.pureAble"),
     rank: able
   },
   children: [
+    {
+      path: "/able/mqtt-client",
+      name: "MqttClient",
+      component: () => import("@/views/able/mqtt-client.vue"),
+      meta: {
+        title: $t("menus.pureMqtt"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
+    {
+      path: "/able/verify",
+      name: "Verify",
+      component: () => import("@/views/able/verify.vue"),
+      meta: {
+        title: $t("menus.pureVerify")
+      }
+    },
     {
       path: "/able/watermark",
       name: "WaterMark",
       component: () => import("@/views/able/watermark.vue"),
       meta: {
-        title: $t("menus.hsWatermark")
+        title: $t("menus.pureWatermark")
       }
     },
     {
@@ -23,7 +40,7 @@ export default {
       name: "Print",
       component: () => import("@/views/able/print/index.vue"),
       meta: {
-        title: $t("menus.hsPrint")
+        title: $t("menus.purePrint")
       }
     },
     {
@@ -31,7 +48,7 @@ export default {
       name: "Download",
       component: () => import("@/views/able/download.vue"),
       meta: {
-        title: $t("menus.hsDownload")
+        title: $t("menus.pureDownload")
       }
     },
     {
@@ -39,7 +56,15 @@ export default {
       name: "Excel",
       component: () => import("@/views/able/excel.vue"),
       meta: {
-        title: $t("menus.hsExcel")
+        title: $t("menus.pureExcel")
+      }
+    },
+    {
+      path: "/components/ripple",
+      name: "Ripple",
+      component: () => import("@/views/able/ripple.vue"),
+      meta: {
+        title: $t("menus.pureRipple")
       }
     },
     {
@@ -47,7 +72,7 @@ export default {
       name: "Debounce",
       component: () => import("@/views/able/debounce.vue"),
       meta: {
-        title: $t("menus.hsDebounce")
+        title: $t("menus.pureDebounce")
       }
     },
     {
@@ -55,7 +80,7 @@ export default {
       name: "Directives",
       component: () => import("@/views/able/directives.vue"),
       meta: {
-        title: $t("menus.hsOptimize")
+        title: $t("menus.pureOptimize")
       }
     },
     {
@@ -63,19 +88,35 @@ export default {
       name: "Draggable",
       component: () => import("@/views/able/draggable.vue"),
       meta: {
-        title: $t("menus.hsdraggable"),
+        title: $t("menus.pureDraggable"),
         transition: {
           enterTransition: "animate__zoomIn",
           leaveTransition: "animate__zoomOut"
         }
       }
     },
+    {
+      path: "/able/word",
+      name: "Word",
+      component: () => import("@/views/able/word.vue"),
+      meta: {
+        title: $t("menus.pureWord")
+      }
+    },
+    {
+      path: "/able/excels",
+      name: "Excels",
+      component: () => import("@/views/able/excels.vue"),
+      meta: {
+        title: $t("menus.pureExcels")
+      }
+    },
     {
       path: "/able/pdf",
       name: "Pdf",
       component: () => import("@/views/able/pdf.vue"),
       meta: {
-        title: $t("menus.hsPdf")
+        title: $t("menus.purePdf")
       }
     },
     {
@@ -83,7 +124,7 @@ export default {
       name: "BarCode",
       component: () => import("@/views/able/barcode.vue"),
       meta: {
-        title: $t("menus.hsBarcode")
+        title: $t("menus.pureBarcode")
       }
     },
     {
@@ -91,7 +132,7 @@ export default {
       name: "QrCode",
       component: () => import("@/views/able/qrcode.vue"),
       meta: {
-        title: $t("menus.hsQrcode")
+        title: $t("menus.pureQrcode")
       }
     },
     {
@@ -99,7 +140,7 @@ export default {
       name: "MapPage",
       component: () => import("@/views/able/map.vue"),
       meta: {
-        title: $t("menus.hsmap"),
+        title: $t("menus.pureMap"),
         keepAlive: true,
         transition: {
           name: "fade"
@@ -111,7 +152,7 @@ export default {
       name: "Wavesurfer",
       component: () => import("@/views/able/wavesurfer/index.vue"),
       meta: {
-        title: $t("menus.hsWavesurfer")
+        title: $t("menus.pureWavesurfer")
       }
     },
     {
@@ -119,7 +160,7 @@ export default {
       name: "VideoPage",
       component: () => import("@/views/able/video.vue"),
       meta: {
-        title: $t("menus.hsvideo")
+        title: $t("menus.pureVideo")
       }
     },
     {
@@ -127,7 +168,7 @@ export default {
       name: "VideoFrame",
       component: () => import("@/views/able/video-frame/index.vue"),
       meta: {
-        title: $t("menus.hsVideoFrame")
+        title: $t("menus.pureVideoFrame")
       }
     },
     {
@@ -135,7 +176,7 @@ export default {
       name: "Danmaku",
       component: () => import("@/views/able/danmaku/index.vue"),
       meta: {
-        title: $t("menus.hsdanmaku")
+        title: $t("menus.pureDanmaku")
       }
     },
     {
@@ -143,7 +184,7 @@ export default {
       name: "InfiniteScroll",
       component: () => import("@/views/able/infinite-scroll.vue"),
       meta: {
-        title: $t("menus.hsInfiniteScroll")
+        title: $t("menus.pureInfiniteScroll")
       }
     },
     {
@@ -151,7 +192,7 @@ export default {
       name: "MenuTree",
       component: () => import("@/views/able/menu-tree.vue"),
       meta: {
-        title: $t("menus.hsMenuTree")
+        title: $t("menus.pureMenuTree")
       }
     },
     {
@@ -159,7 +200,7 @@ export default {
       name: "LineTree",
       component: () => import("@/views/able/line-tree.vue"),
       meta: {
-        title: $t("menus.hsLineTree")
+        title: $t("menus.pureLineTree")
       }
     },
     {
@@ -167,7 +208,7 @@ export default {
       name: "Typeit",
       component: () => import("@/views/able/typeit.vue"),
       meta: {
-        title: $t("menus.hstypeit")
+        title: $t("menus.pureTypeit")
       }
     },
     {
@@ -175,7 +216,7 @@ export default {
       name: "Sensitive",
       component: () => import("@/views/able/sensitive.vue"),
       meta: {
-        title: $t("menus.hsSensitive")
+        title: $t("menus.pureSensitive")
       }
     },
     {
@@ -183,7 +224,7 @@ export default {
       name: "Pinyin",
       component: () => import("@/views/able/pinyin.vue"),
       meta: {
-        title: $t("menus.hsPinyin")
+        title: $t("menus.purePinyin")
       }
     }
   ]

src/router/modules/about.ts

@@ -6,7 +6,7 @@ export default {
   redirect: "/about/index",
   meta: {
     icon: "ri:file-info-line",
-    title: $t("menus.hsAbout"),
+    title: $t("menus.pureAbout"),
     rank: about
   },
   children: [
@@ -15,7 +15,7 @@ export default {
       name: "About",
       component: () => import("@/views/about/index.vue"),
       meta: {
-        title: $t("menus.hsAbout")
+        title: $t("menus.pureAbout")
       }
     }
   ]

src/router/modules/board.ts

@@ -7,7 +7,7 @@ export default {
   redirect: "/board/index",
   meta: {
     icon: "ri:artboard-line",
-    title: $t("menus.hsboard"),
+    title: $t("menus.pureBoard"),
     rank: board
   },
   children: [
@@ -16,7 +16,7 @@ export default {
       name: "FrameBoard",
       component: IFrame,
       meta: {
-        title: $t("menus.hsboard"),
+        title: $t("menus.pureBoard"),
         frameSrc: "https://songlh.top/paint-board/"
       }
     }

src/router/modules/components.ts

@@ -6,7 +6,7 @@ export default {
   redirect: "/components/dialog",
   meta: {
     icon: "ep:menu",
-    title: $t("menus.hscomponents"),
+    title: $t("menus.pureComponents"),
     rank: components
   },
   children: [
@@ -15,7 +15,7 @@ export default {
       name: "DialogPage",
       component: () => import("@/views/components/dialog/index.vue"),
       meta: {
-        title: $t("menus.hsdialog")
+        title: $t("menus.pureDialog")
       }
     },
     {
@@ -23,7 +23,7 @@ export default {
       name: "Message",
       component: () => import("@/views/components/message.vue"),
       meta: {
-        title: $t("menus.hsmessage")
+        title: $t("menus.pureMessage")
       }
     },
     {
@@ -31,7 +31,7 @@ export default {
       name: "PureUpload",
       component: () => import("@/views/components/upload/index.vue"),
       meta: {
-        title: $t("menus.hsUpload")
+        title: $t("menus.pureUpload")
       }
     },
     {
@@ -39,7 +39,7 @@ export default {
       name: "CheckCard",
       component: () => import("@/views/components/check-card.vue"),
       meta: {
-        title: $t("menus.hsCheckCard"),
+        title: $t("menus.pureCheckCard"),
         extraIcon: "IF-pure-iconfont-new svg"
       }
     },
@@ -48,7 +48,7 @@ export default {
       name: "DatePicker",
       component: () => import("@/views/components/date-picker.vue"),
       meta: {
-        title: $t("menus.hsDatePicker")
+        title: $t("menus.pureDatePicker")
       }
     },
     {
@@ -56,7 +56,7 @@ export default {
       name: "DateTimePicker",
       component: () => import("@/views/components/datetime-picker.vue"),
       meta: {
-        title: $t("menus.hsDateTimePicker")
+        title: $t("menus.pureDateTimePicker")
       }
     },
     {
@@ -64,7 +64,7 @@ export default {
       name: "TimePicker",
       component: () => import("@/views/components/time-picker.vue"),
       meta: {
-        title: $t("menus.hsTimePicker")
+        title: $t("menus.pureTimePicker")
       }
     },
     {
@@ -72,7 +72,7 @@ export default {
       name: "IconSelect",
       component: () => import("@/views/components/icon-select.vue"),
       meta: {
-        title: $t("menus.hsIconSelect")
+        title: $t("menus.pureIconSelect")
       }
     },
     {
@@ -80,7 +80,7 @@ export default {
       name: "AnimateCss",
       component: () => import("@/views/components/animatecss.vue"),
       meta: {
-        title: $t("menus.hsanimatecss")
+        title: $t("menus.pureAnimatecss")
       }
     },
     {
@@ -88,7 +88,7 @@ export default {
       name: "Cropping",
       component: () => import("@/views/components/cropping/index.vue"),
       meta: {
-        title: $t("menus.hscropping")
+        title: $t("menus.pureCropping")
       }
     },
     {
@@ -96,7 +96,7 @@ export default {
       name: "Segmented",
       component: () => import("@/views/components/segmented.vue"),
       meta: {
-        title: $t("menus.hssegmented")
+        title: $t("menus.pureSegmented")
       }
     },
     {
@@ -104,7 +104,7 @@ export default {
       name: "PureText",
       component: () => import("@/views/components/text.vue"),
       meta: {
-        title: $t("menus.hsText"),
+        title: $t("menus.pureText"),
         extraIcon: "IF-pure-iconfont-new svg"
       }
     },
@@ -113,7 +113,7 @@ export default {
       name: "PureButton",
       component: () => import("@/views/components/el-button.vue"),
       meta: {
-        title: $t("menus.hsElButton")
+        title: $t("menus.pureElButton")
       }
     },
     {
@@ -121,7 +121,7 @@ export default {
       name: "CheckButton",
       component: () => import("@/views/components/check-button.vue"),
       meta: {
-        title: $t("menus.hsCheckButton"),
+        title: $t("menus.pureCheckButton"),
         extraIcon: "IF-pure-iconfont-new svg"
       }
     },
@@ -130,7 +130,7 @@ export default {
       name: "ButtonPage",
       component: () => import("@/views/components/button.vue"),
       meta: {
-        title: $t("menus.hsbutton")
+        title: $t("menus.pureButton")
       }
     },
     {
@@ -138,7 +138,7 @@ export default {
       name: "PureProgress",
       component: () => import("@/views/components/progress.vue"),
       meta: {
-        title: $t("menus.hsProgress")
+        title: $t("menus.pureProgress")
       }
     },
     {
@@ -146,7 +146,7 @@ export default {
       name: "PureTag",
       component: () => import("@/views/components/tag.vue"),
       meta: {
-        title: $t("menus.hsTag")
+        title: $t("menus.pureTag")
       }
     },
     {
@@ -154,7 +154,7 @@ export default {
       name: "Statistic",
       component: () => import("@/views/components/statistic.vue"),
       meta: {
-        title: $t("menus.hsStatistic")
+        title: $t("menus.pureStatistic")
       }
     },
     {
@@ -162,7 +162,7 @@ export default {
       name: "Collapse",
       component: () => import("@/views/components/collapse.vue"),
       meta: {
-        title: $t("menus.hsCollapse")
+        title: $t("menus.pureCollapse")
       }
     },
     {
@@ -170,7 +170,7 @@ export default {
       name: "Cascader",
       component: () => import("@/views/components/cascader.vue"),
       meta: {
-        title: $t("menus.hsCascader")
+        title: $t("menus.pureCascader")
       }
     },
     {
@@ -178,7 +178,7 @@ export default {
       name: "ColorPicker",
       component: () => import("@/views/components/color-picker.vue"),
       meta: {
-        title: $t("menus.hsColorPicker")
+        title: $t("menus.pureColorPicker")
       }
     },
     {
@@ -186,7 +186,7 @@ export default {
       name: "Selector",
       component: () => import("@/views/components/selector.vue"),
       meta: {
-        title: $t("menus.hsselector")
+        title: $t("menus.pureSelector")
       }
     },
     {
@@ -194,7 +194,7 @@ export default {
       name: "Waterfall",
       component: () => import("@/views/components/waterfall/index.vue"),
       meta: {
-        title: $t("menus.hswaterfall")
+        title: $t("menus.pureWaterfall")
       }
     },
     {
@@ -202,7 +202,7 @@ export default {
       name: "SplitPane",
       component: () => import("@/views/components/split-pane.vue"),
       meta: {
-        title: $t("menus.hssplitPane")
+        title: $t("menus.pureSplitPane")
       }
     },
     {
@@ -210,7 +210,7 @@ export default {
       name: "Swiper",
       component: () => import("@/views/components/swiper.vue"),
       meta: {
-        title: $t("menus.hsSwiper")
+        title: $t("menus.pureSwiper")
       }
     },
     {
@@ -218,7 +218,7 @@ export default {
       name: "TimeLine",
       component: () => import("@/views/components/timeline.vue"),
       meta: {
-        title: $t("menus.hsTimeline")
+        title: $t("menus.pureTimeline")
       }
     },
     {
@@ -226,7 +226,7 @@ export default {
       name: "CountTo",
       component: () => import("@/views/components/count-to.vue"),
       meta: {
-        title: $t("menus.hscountTo")
+        title: $t("menus.pureCountTo")
       }
     },
     {
@@ -234,7 +234,7 @@ export default {
       name: "ContextMenu",
       component: () => import("@/views/components/contextmenu/index.vue"),
       meta: {
-        title: $t("menus.hscontextmenu")
+        title: $t("menus.pureContextmenu")
       }
     },
     {
@@ -242,7 +242,7 @@ export default {
       name: "JsonEditor",
       component: () => import("@/views/components/json-editor.vue"),
       meta: {
-        title: $t("menus.hsjsoneditor")
+        title: $t("menus.pureJsonEditor")
       }
     },
     {
@@ -250,7 +250,7 @@ export default {
       name: "SeamlessScroll",
       component: () => import("@/views/components/seamless-scroll.vue"),
       meta: {
-        title: $t("menus.hsseamless")
+        title: $t("menus.pureSeamless")
       }
     },
     {
@@ -258,7 +258,7 @@ export default {
       name: "VirtualList",
       component: () => import("@/views/components/virtual-list/index.vue"),
       meta: {
-        title: $t("menus.hsVirtualList")
+        title: $t("menus.pureVirtualList")
       }
     }
   ]

src/router/modules/editor.ts

@@ -6,7 +6,7 @@ export default {
   redirect: "/editor/index",
   meta: {
     icon: "ep:edit",
-    title: $t("menus.hseditor"),
+    title: $t("menus.pureEditor"),
     rank: editor
   },
   children: [
@@ -15,7 +15,7 @@ export default {
       name: "Editor",
       component: () => import("@/views/editor/index.vue"),
       meta: {
-        title: $t("menus.hseditor"),
+        title: $t("menus.pureEditor"),
         keepAlive: true
       }
     }

src/router/modules/error.ts

@@ -7,7 +7,7 @@ export default {
   meta: {
     icon: "ri:information-line",
     // showLink: false,
-    title: $t("menus.hsabnormal"),
+    title: $t("menus.pureAbnormal"),
     rank: error
   },
   children: [
@@ -16,7 +16,7 @@ export default {
       name: "403",
       component: () => import("@/views/error/403.vue"),
       meta: {
-        title: $t("menus.hsfourZeroOne")
+        title: $t("menus.pureFourZeroOne")
       }
     },
     {
@@ -24,7 +24,7 @@ export default {
       name: "404",
       component: () => import("@/views/error/404.vue"),
       meta: {
-        title: $t("menus.hsfourZeroFour")
+        title: $t("menus.pureFourZeroFour")
       }
     },
     {
@@ -32,7 +32,7 @@ export default {
       name: "500",
       component: () => import("@/views/error/500.vue"),
       meta: {
-        title: $t("menus.hsFive")
+        title: $t("menus.pureFive")
       }
     }
   ]

src/router/modules/flowchart.ts

@@ -6,7 +6,7 @@ export default {
   redirect: "/flow-chart/index",
   meta: {
     icon: "ep:set-up",
-    title: $t("menus.hsflowChart"),
+    title: $t("menus.pureFlowChart"),
     rank: flowchart
   },
   children: [
@@ -15,7 +15,7 @@ export default {
       name: "FlowChart",
       component: () => import("@/views/flow-chart/index.vue"),
       meta: {
-        title: $t("menus.hsflowChart")
+        title: $t("menus.pureFlowChart")
       }
     }
   ]

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.pureSchemaForm"),
+    rank: form
+  },
+  children: [
+    {
+      path: "/form/index",
+      name: "SchemaForm",
+      component: () => import("@/views/schema-form/index.vue"),
+      meta: {
+        title: $t("menus.pureSchemaForm"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;

src/router/modules/formdesign.ts

@@ -7,7 +7,7 @@ export default {
   redirect: "/form-design/index",
   meta: {
     icon: "ri:terminal-window-line",
-    title: $t("menus.hsFormDesign"),
+    title: $t("menus.pureFormDesign"),
     rank: formdesign
   },
   children: [
@@ -16,7 +16,7 @@ export default {
       name: "FormDesign",
       component: IFrame,
       meta: {
-        title: $t("menus.hsFormDesign"),
+        title: $t("menus.pureFormDesign"),
         frameSrc:
           "https://haixin-fang.github.io/vue-form-design/playground/index.html",
         frameLoading: false

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.pureGanttastic"),
+    rank: ganttastic
+  },
+  children: [
+    {
+      path: "/ganttastic/index",
+      name: "Ganttastic",
+      component: () => import("@/views/ganttastic/index.vue"),
+      meta: {
+        title: $t("menus.pureGanttastic"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;

src/router/modules/guide.ts

@@ -6,7 +6,7 @@ export default {
   redirect: "/guide/index",
   meta: {
     icon: "ep:guide",
-    title: $t("menus.hsguide"),
+    title: $t("menus.pureGuide"),
     rank: guide
   },
   children: [
@@ -15,7 +15,7 @@ export default {
       name: "Guide",
       component: () => import("@/views/guide/index.vue"),
       meta: {
-        title: $t("menus.hsguide")
+        title: $t("menus.pureGuide")
       }
     }
   ]

src/router/modules/home.ts

@@ -10,7 +10,7 @@ export default {
   redirect: "/welcome",
   meta: {
     icon: "ep:home-filled",
-    title: $t("menus.hshome"),
+    title: $t("menus.pureHome"),
     rank: home
   },
   children: [
@@ -19,7 +19,7 @@ export default {
       name: "Welcome",
       component: () => import("@/views/welcome/index.vue"),
       meta: {
-        title: $t("menus.hshome"),
+        title: $t("menus.pureHome"),
         showLink: VITE_HIDE_HOME === "true" ? false : true
       }
     }

src/router/modules/list.ts

@@ -6,7 +6,7 @@ export default {
   redirect: "/list/card",
   meta: {
     icon: "ri:list-check",
-    title: $t("menus.hsList"),
+    title: $t("menus.pureList"),
     rank: list
   },
   children: [
@@ -16,7 +16,7 @@ export default {
       component: () => import("@/views/list/card/index.vue"),
       meta: {
         icon: "ri:bank-card-line",
-        title: $t("menus.hsListCard"),
+        title: $t("menus.pureListCard"),
         showParent: true
       }
     }

src/router/modules/menuoverflow.ts

@@ -5,7 +5,7 @@ export default {
   path: "/menuoverflow",
   redirect: "/menuoverflow/index",
   meta: {
-    title: $t("menus.hsMenuoverflow"),
+    title: $t("menus.pureMenuOverflow"),
     rank: menuoverflow
   },
   children: [
@@ -14,7 +14,7 @@ export default {
       name: "MenuOverflow",
       component: () => import("@/views/menuoverflow/index.vue"),
       meta: {
-        title: $t("menus.hsChildMenuoverflow"),
+        title: $t("menus.pureChildMenuOverflow"),
         showParent: true
       }
     }

src/router/modules/nested.ts

@@ -5,7 +5,7 @@ export default {
   path: "/nested",
   redirect: "/nested/menu1/menu1-1",
   meta: {
-    title: $t("menus.hsmenus"),
+    title: $t("menus.pureMenus"),
     icon: "ep:histogram",
     rank: nested
   },
@@ -13,7 +13,7 @@ export default {
     {
       path: "/nested/menu1",
       meta: {
-        title: $t("menus.hsmenu1"),
+        title: $t("menus.pureMenu1"),
         keepAlive: true
       },
       redirect: "/nested/menu1/menu1-1",
@@ -23,7 +23,7 @@ export default {
           component: () => import("@/views/nested/menu1/menu1-1/index.vue"),
           name: "Menu1-1",
           meta: {
-            title: $t("menus.hsmenu1-1"),
+            title: $t("menus.pureMenu1-1"),
             keepAlive: true
           }
         },
@@ -31,7 +31,7 @@ export default {
           path: "/nested/menu1/menu1-2",
           redirect: "/nested/menu1/menu1-2/menu1-2-1",
           meta: {
-            title: $t("menus.hsmenu1-2"),
+            title: $t("menus.pureMenu1-2"),
             keepAlive: true
           },
           children: [
@@ -41,7 +41,7 @@ export default {
                 import("@/views/nested/menu1/menu1-2/menu1-2-1/index.vue"),
               name: "Menu1-2-1",
               meta: {
-                title: $t("menus.hsmenu1-2-1"),
+                title: $t("menus.pureMenu1-2-1"),
                 keepAlive: true
               }
             },
@@ -51,7 +51,7 @@ export default {
                 import("@/views/nested/menu1/menu1-2/menu1-2-2/index.vue"),
               name: "Menu1-2-2",
               meta: {
-                title: $t("menus.hsmenu1-2-2"),
+                title: $t("menus.pureMenu1-2-2"),
                 keepAlive: true
               }
             }
@@ -62,7 +62,7 @@ export default {
           component: () => import("@/views/nested/menu1/menu1-3/index.vue"),
           name: "Menu1-3",
           meta: {
-            title: $t("menus.hsmenu1-3"),
+            title: $t("menus.pureMenu1-3"),
             keepAlive: true
           }
         }
@@ -73,7 +73,7 @@ export default {
       name: "Menu2",
       component: () => import("@/views/nested/menu2/index.vue"),
       meta: {
-        title: $t("menus.hsmenu2"),
+        title: $t("menus.pureMenu2"),
         keepAlive: true
       }
     }

src/router/modules/remaining.ts

@@ -7,7 +7,7 @@ export default [
     name: "Login",
     component: () => import("@/views/login/index.vue"),
     meta: {
-      title: $t("menus.hslogin"),
+      title: $t("menus.pureLogin"),
       showLink: false,
       rank: 101
     }
@@ -16,7 +16,7 @@ export default [
     path: "/redirect",
     component: Layout,
     meta: {
-      title: $t("status.hsLoad"),
+      title: $t("status.pureLoad"),
       showLink: false,
       rank: 102
     },
@@ -34,7 +34,7 @@ export default [
     name: "Empty",
     component: () => import("@/views/empty/index.vue"),
     meta: {
-      title: $t("menus.hsempty"),
+      title: $t("menus.pureEmpty"),
       showLink: false,
       rank: 103
     }

src/router/modules/result.ts

@@ -6,7 +6,7 @@ export default {
   redirect: "/result/success",
   meta: {
     icon: "ri:checkbox-circle-line",
-    title: $t("menus.hsResult"),
+    title: $t("menus.pureResult"),
     rank: result
   },
   children: [
@@ -15,7 +15,7 @@ export default {
       name: "Success",
       component: () => import("@/views/result/success.vue"),
       meta: {
-        title: $t("menus.hsSuccess")
+        title: $t("menus.pureSuccess")
       }
     },
     {
@@ -23,7 +23,7 @@ export default {
       name: "Fail",
       component: () => import("@/views/result/fail.vue"),
       meta: {
-        title: $t("menus.hsFail")
+        title: $t("menus.pureFail")
       }
     }
   ]

src/router/modules/table.ts

@@ -2,28 +2,46 @@ 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.pureTable"),
     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")
+        title: $t("menus.pureTableBase")
       }
     },
     {
-      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")
+        title: $t("menus.pureTableHigh")
+      }
+    },
+    {
+      path: "/table/edit",
+      name: "PureTableEdit",
+      component: () => import("@/views/table/edit.vue"),
+      meta: {
+        title: $t("menus.pureTableEdit"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
+    {
+      path: "/table/virtual",
+      name: "VxeTable",
+      component: () => import("@/views/table/virtual.vue"),
+      meta: {
+        title: $t("menus.pureVxeTable"),
+        extraIcon: "IF-pure-iconfont-new svg"
       }
     }
   ]

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;

src/store/modules/app.ts

@@ -21,6 +21,11 @@ export const useAppStore = defineStore({
         `${responsiveStorageNameSpace()}layout`
       )?.layout ?? getConfig().Layout,
     device: deviceDetection() ? "mobile" : "desktop",
+    // 浏览器窗口的可视区域大小
+    viewportSize: {
+      width: document.documentElement.clientWidth,
+      height: document.documentElement.clientHeight
+    },
     // 作用于 src/views/components/draggable/index.vue 页面，当离开页面并不会销毁 new Swap()，sortablejs 官网也没有提供任何销毁的 api
     sortSwap: false
   }),
@@ -30,6 +35,12 @@ export const useAppStore = defineStore({
     },
     getDevice(state) {
       return state.device;
+    },
+    getViewportWidth(state) {
+      return state.viewportSize.width;
+    },
+    getViewportHeight(state) {
+      return state.viewportSize.height;
     }
   },
   actions: {
@@ -62,6 +73,9 @@ export const useAppStore = defineStore({
     setLayout(layout) {
       this.layout = layout;
     },
+    setViewportSize(size) {
+      this.viewportSize = size;
+    },
     setSortSwap(val) {
       this.sortSwap = val;
     }

src/store/modules/types.ts

@@ -19,6 +19,7 @@ export type appType = {
   };
   layout: string;
   device: string;
+  viewportSize: { width: number; height: number };
   sortSwap: boolean;
 };
 

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 {

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,

src/style/login.css

@@ -31,6 +31,7 @@
   display: flex;
   align-items: center;
   text-align: center;
+  overflow: hidden;
 }
 
 .login-form {

src/style/reset.scss

@@ -194,7 +194,6 @@ button,
   cursor: default;
 }
 
-img,
 svg,
 video,
 canvas,

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,
   /* 设置 */

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

src/views/able/barcode.vue

@@ -44,6 +44,13 @@ const barcodes = [
           </el-link>
           生成）
         </div>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/barcode.vue"
+          target="_blank"
+        >
+          代码位置 src/views/able/barcode.vue
+        </el-link>
       </template>
       <el-row :gutter="12">
         <template v-for="(item, index) in barcodes" :key="index">