Merge branch 'main' into pages

* refactor: 升级`vite`至`v6`版本，升级`sass`至最新版，重构主题写法，删除`@pureadmin/theme`

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -32,7 +32,7 @@ body:
       label: 验证 (Verify)
       description: 在提交问题之前，请确保您执行以下操作 (Before submitting an issue, please ensure you do the following)
       options:
-        - label: 是否仔细阅读过 [文档](https://pure-admin.github.io/pure-admin-doc/) (Have you read [documentation](https://pure-admin.github.io/pure-admin-doc/) carefully)
+        - label: 是否仔细阅读过 [文档](https://pure-admin.cn/) (Have you read [documentation](https://pure-admin.cn/) carefully)
           required: true
         - label: 检查是否存在相同或类似的问题 [issues](https://github.com/pure-admin/vue-pure-admin/issues) (Check for the same or similar [issues](https://github.com/pure-admin/vue-pure-admin/issues))
           required: true

.gitignore

@@ -1,10 +1,9 @@
 node_modules
 .DS_Store
-dist
-dist-ssr
 *.local
 .eslintcache
 report.html
+dist
 vite.config.*.timestamp*
 
 yarn.lock

.husky/commit-msg

@@ -1,8 +0,0 @@
-#!/bin/sh
-
-# shellcheck source=./_/husky.sh
-. "$(dirname "$0")/_/husky.sh"
-
-PATH="/usr/local/bin:$PATH"
-
-npx --no-install commitlint --edit "$1"

.husky/common.sh

@@ -1,9 +0,0 @@
-#!/bin/sh
-command_exists () {
-  command -v "$1" >/dev/null 2>&1
-}
-
-# Workaround for Windows 10, Git Bash and Pnpm
-if command_exists winpty && test -t 1; then
-  exec < /dev/tty
-fi

.husky/pre-commit

@@ -1,10 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-. "$(dirname "$0")/common.sh"
-
-[ -n "$CI" ] && exit 0
-
-PATH="/usr/local/bin:$PATH"
-
-# Perform lint check on files in the staging area through .lintstagedrc configuration
-pnpm exec lint-staged

.nvmrc

@@ -1 +1 @@
-v20.15.0
+v22.14.0

CHANGELOG.en_US.md

@@ -1,3 +1,23 @@
+# 5.9.0 (2024-12-10)
+
+### ✔️Refactor
+
+- Upgrade `vite` to `v6` version, upgrade `sass` to the latest version, reconstruct the theme writing method, and deprecate [@pureadmin/theme](https://www.npmjs.com/package/@pureadmin/theme) , click to view [Related optimization point details](https://github.com/pure-admin/vue-pure-admin/pull/1188#issue-2630095115). For users who have the [Max version](https://pure-admin.cn/pages/max/), it is strongly recommended to upgrade. Subsequent Max version users will enjoy a more modern, beautiful and highly customized theme color
+- Use [code-inspector-plugin](https://www.npmjs.com/package/code-inspector-plugin) to replace [vite-plugin-vue-inspector](https://www.npmjs.com/package/vite-plugin-vue-inspector)
+
+### 🎫Feat
+
+- Added `ReDrawer` component
+- `pure-table` adds dynamic table header example
+
+### 🐞 Bug fixes
+
+- Fixed an issue where the height of the table does not automatically adapt when the full screen function is enabled or disabled after the table is expanded in the menu and department management
+
+### 🍏Perf
+
+- Optimize the layout of the department tree on the left side of user management
+
 # 5.8.0 (2024-08-19)
 
 ### 🎫 Feat
@@ -53,7 +73,7 @@
 
 The addresses of the document site and full version preview site have been changed!
 
-- The latest document site address: https://pure-admin.github.io/pure-admin-doc
+- The latest document site address: https://pure-admin.cn
 - The latest full version preview site address: https://pure-admin.github.io/vue-pure-admin
 
 ### ✔️ Refactor
@@ -454,7 +474,7 @@ Totally `ESM` version
 ### ✔️ Refactor
 
 - completely removed `lodash` and its related libraries
-  [Click here to see Why Removed? How to integrate it yourself? ](https://pure-admin.github.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-5-%E7 %89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-lodash-%E5%92%8C% E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%93-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9 %99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
+  [Click here to see Why Removed? How to integrate it yourself? ](https://pure-admin.cn/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-5-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-lodash-%E5%92%8C%E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%93-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
 
 ### 🎫 Feat
 
@@ -474,7 +494,7 @@ Totally `ESM` version
 ### ✔️ Refactor
 
 - Completely removed `vxe-table`, after removal, the overall package size of the full version is reduced by `1.82MB`, and the initial startup time is basically the same as the lite version 🐮
-  [Click here to see Why Removed? How to integrate it yourself?](https://pure-admin.github.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-4-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-vxe-table-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
+  [Click here to see Why Removed? How to integrate it yourself?](https://pure-admin.cn/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-4-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-vxe-table-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
 
 ### 🎫 Feat
 
@@ -687,7 +707,7 @@ Totally `ESM` version
 
 ### ✔️ Refactor
 
-- Replace `unocss` with `tailwindcss`, add `tailwindcss` [documentation](https://pure-admin.github.io/pure-admin-doc/pages/tailwindcss/)
+- Replace `unocss` with `tailwindcss`, add `tailwindcss` [documentation](https://pure-admin.cn/pages/tailwindcss/)
 
 ### 🐞 Bug fixes
 

CHANGELOG.md

@@ -1,3 +1,23 @@
+# 5.9.0 (2024-12-10)
+
+### ✔️Refactor
+
+- Upgrade `vite` to `v6` version, upgrade `sass` to the latest version, reconstruct the theme writing method, and deprecate [@pureadmin/theme](https://www.npmjs.com/package/@pureadmin/theme) , click to view [Related optimization point details](https://github.com/pure-admin/vue-pure-admin/pull/1188#issue-2630095115). For users who have the [Max version](https://pure-admin.cn/pages/max/), it is strongly recommended to upgrade. Subsequent Max version users will enjoy a more modern, beautiful and highly customized theme color
+- Use [code-inspector-plugin](https://www.npmjs.com/package/code-inspector-plugin) to replace [vite-plugin-vue-inspector](https://www.npmjs.com/package/vite-plugin-vue-inspector)
+
+### 🎫Feat
+
+- Added `ReDrawer` component
+- `pure-table` adds dynamic table header example
+
+### 🐞 Bug fixes
+
+- Fixed an issue where the height of the table does not automatically adapt when the full screen function is enabled or disabled after the table is expanded in the menu and department management
+
+### 🍏Perf
+
+- Optimize the layout of the department tree on the left side of user management
+
 # 5.8.0 (2024-08-19)
 
 ### 🎫 Feat
@@ -53,7 +73,7 @@
 
 The addresses of the document site and full version preview site have been changed!
 
-- The latest document site address: https://pure-admin.github.io/pure-admin-doc
+- The latest document site address: https://pure-admin.cn
 - The latest full version preview site address: https://pure-admin.github.io/vue-pure-admin
 
 ### ✔️ Refactor
@@ -454,7 +474,7 @@ Totally `ESM` version
 ### ✔️ Refactor
 
 - completely removed `lodash` and its related libraries
-  [Click here to see Why Removed? How to integrate it yourself? ](https://pure-admin.github.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-5-%E7 %89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-lodash-%E5%92%8C% E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%93-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9 %99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
+  [Click here to see Why Removed? How to integrate it yourself? ](https://pure-admin.cn/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-5-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-lodash-%E5%92%8C%E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%93-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
 
 ### 🎫 Feat
 
@@ -474,7 +494,7 @@ Totally `ESM` version
 ### ✔️ Refactor
 
 - Completely removed `vxe-table`, after removal, the overall package size of the full version is reduced by `1.82MB`, and the initial startup time is basically the same as the lite version 🐮
-  [Click here to see Why Removed? How to integrate it yourself?](https://pure-admin.github.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-4-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-vxe-table-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
+  [Click here to see Why Removed? How to integrate it yourself?](https://pure-admin.cn/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-4-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-vxe-table-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
 
 ### 🎫 Feat
 
@@ -687,7 +707,7 @@ Totally `ESM` version
 
 ### ✔️ Refactor
 
-- Replace `unocss` with `tailwindcss`, add `tailwindcss` [documentation](https://pure-admin.github.io/pure-admin-doc/pages/tailwindcss/)
+- Replace `unocss` with `tailwindcss`, add `tailwindcss` [documentation](https://pure-admin.cn/pages/tailwindcss/)
 
 ### 🐞 Bug fixes
 

CHANGELOG.zh_CN.md

@@ -1,3 +1,23 @@
+# 5.9.0 (2024-12-10)
+
+### ✔️ Refactor
+
+- 升级`vite`至`v6`版本，升级`sass`至最新版，重构主题写法，弃用 [@pureadmin/theme](https://www.npmjs.com/package/@pureadmin/theme)，点击查看 [相关优化点细节](https://github.com/pure-admin/vue-pure-admin/pull/1188#issue-2630095115)。对于拥有 [Max版本](https://pure-admin.cn/pages/max/) 的用户平台强烈建议升级，后续`Max版本用户`会享有一套更现代、美观且自定义程度高的主题色
+- 使用 [code-inspector-plugin](https://www.npmjs.com/package/code-inspector-plugin) 替换 [vite-plugin-vue-inspector](https://www.npmjs.com/package/vite-plugin-vue-inspector)
+
+### 🎫 Feat
+
+- 新增函数式抽屉组件
+- `pure-table`添加动态表头示例
+
+### 🐞 Bug fixes
+
+- 修复在菜单、部门管理中，表格展开后启用或关闭全屏功能时，表格高度未自动适应的问题
+
+### 🍏 Perf
+
+- 优化用户管理左侧部门树的布局
+
 # 5.8.0 (2024-08-19)
 
 ### 🎫 Feat
@@ -53,7 +73,7 @@
 
 文档站和完整版预览站地址更换！
 
-- 最新文档站地址：https://pure-admin.github.io/pure-admin-doc
+- 最新文档站地址：https://pure-admin.cn
 - 最新完整版预览站地址：https://pure-admin.github.io/vue-pure-admin
 
 ### ✔️ Refactor
@@ -453,7 +473,7 @@
 ### ✔️ Refactor
 
 - 完全移除了 `lodash` 和其相关库
-  [点击此处查看为什么移除？如何自行集成？](https://pure-admin.github.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-5-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-lodash-%E5%92%8C%E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%93-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
+  [点击此处查看为什么移除？如何自行集成？](https://pure-admin.cn/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-5-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-lodash-%E5%92%8C%E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%93-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
 
 ### 🎫 Feat
 
@@ -473,7 +493,7 @@
 ### ✔️ Refactor
 
 - 完全移除了 `vxe-table`，移除后，完整版整体打包大小减少 `1.82MB`，首启动时长基本和精简版持平 🐮
-  [点击此处查看为什么移除？如何自行集成？](https://pure-admin.github.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-4-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-vxe-table-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
+  [点击此处查看为什么移除？如何自行集成？](https://pure-admin.cn/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-4-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-vxe-table-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
 
 ### 🎫 Feat
 
@@ -686,7 +706,7 @@
 
 ### ✔️ Refactor
 
-- 使用 `tailwindcss` 替换 `unocss`，新增 `tailwindcss` [使用文档](https://pure-admin.github.io/pure-admin-doc/pages/tailwindcss/)
+- 使用 `tailwindcss` 替换 `unocss`，新增 `tailwindcss` [使用文档](https://pure-admin.cn/pages/tailwindcss/)
 
 ### 🐞 Bug fixes
 

README.en-US.md

@@ -28,20 +28,20 @@ The simplified version is based on the shelf extracted from [vue-pure-admin](htt
 
 ## Nanny-level documents
 
-[Click me to view vue-pure-admin documentation](https://pure-admin.github.io/pure-admin-doc)  
+[Click me to view vue-pure-admin documentation](https://pure-admin.cn/)  
 [Click me to view @pureadmin/utils documentation](https://pure-admin-utils.netlify.app)
 
 ## Quality service, software outsourcing, sponsorship support
 
-[Click me for details](https://pure-admin.github.io/pure-admin-doc/pages/service/)
+[Click me for details](https://pure-admin.cn/pages/service/)
 
 ## `js` version
 
-[Click me to view js version](https://pure-admin.github.io/pure-admin-doc/pages/js/)
+[Click me to view js version](https://pure-admin.cn/pages/js/)
 
 ## `max` version
 
-[Click me to view the max version](https://github.com/pure-admin/vue-pure-admin-max)
+[Click me to view the max version](https://pure-admin.cn/pages/max/)
 
 ## Tauri
 
@@ -191,6 +191,7 @@ Thank you very much for your in-depth understanding of the source code and your
 |     [QFifteen](https://github.com/QFifteen)     |   [code](https://github.com/pure-admin/vue-pure-admin/commits?author=QFifteen)   |
 |      [edgexie](https://github.com/edgexie)      |   [code](https://github.com/pure-admin/vue-pure-admin/commits?author=edgexie)    |
 |       [way-jm](https://github.com/way-jm)       |    [code](https://github.com/pure-admin/vue-pure-admin/commits?author=way-jm)    |
+|   [simple-hui](https://github.com/simple-hui)   |  [code](https://github.com/pure-admin/vue-pure-admin/commits?author=simple-hui)  |
 
 ## Git Contribution submission specification
 

README.md

@@ -29,20 +29,20 @@
 
 ## 配套保姆级文档
 
-[点我查看 vue-pure-admin 文档](https://pure-admin.github.io/pure-admin-doc)  
+[点我查看 vue-pure-admin 文档](https://pure-admin.cn/)  
 [点我查看 @pureadmin/utils 文档](https://pure-admin-utils.netlify.app)
 
 ## 优质服务、软件外包、赞助支持
 
-[点我查看详情](https://pure-admin.github.io/pure-admin-doc/pages/service/)
+[点我查看详情](https://pure-admin.cn/pages/service/)
 
 ## `js` 版本
 
-[点我查看 js 版本](https://pure-admin.github.io/pure-admin-doc/pages/js/)
+[点我查看 js 版本](https://pure-admin.cn/pages/js/)
 
 ## `max` 版本
 
-[点我查看 max 版本](https://github.com/pure-admin/vue-pure-admin-max)
+[点我查看 max 版本](https://pure-admin.cn/pages/max/)
 
 ## `Tauri` 版本
 
@@ -192,6 +192,7 @@ docker run -dp 8080:80  --name pure-admin vue-pure-admin
 |     [QFifteen](https://github.com/QFifteen)     |   [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=QFifteen)   |
 |      [edgexie](https://github.com/edgexie)      |   [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=edgexie)    |
 |       [way-jm](https://github.com/way-jm)       |    [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=way-jm)    |
+|   [simple-hui](https://github.com/simple-hui)   |  [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=simple-hui)  |
 
 ## `Git` 贡献提交规范
 

build/info.ts

@@ -1,13 +1,13 @@
 import type { Plugin } from "vite";
+import gradient from "gradient-string";
 import { getPackageSize } from "./utils";
 import dayjs, { type Dayjs } from "dayjs";
 import duration from "dayjs/plugin/duration";
-import gradientString from "gradient-string";
 import boxen, { type Options as BoxenOptions } from "boxen";
 dayjs.extend(duration);
 
-const welcomeMessage = gradientString("cyan", "magenta").multiline(
-  `您好! 欢迎使用 pure-admin 开源项目\n我们为您精心准备了下面两个贴心的保姆级文档\nhttps://pure-admin.github.io/pure-admin-doc\nhttps://pure-admin-utils.netlify.app`
+const welcomeMessage = gradient(["cyan", "magenta"]).multiline(
+  `您好! 欢迎使用 pure-admin 开源项目\n我们为您精心准备了下面两个贴心的保姆级文档\nhttps://pure-admin.cn\nhttps://pure-admin-utils.netlify.app`
 );
 
 const boxenOptions: BoxenOptions = {
@@ -41,7 +41,7 @@ export function viteBuildInfo(): Plugin {
           callback: (size: string) => {
             console.log(
               boxen(
-                gradientString("cyan", "magenta").multiline(
+                gradient(["cyan", "magenta"]).multiline(
                   `🎉 恭喜打包完成（总用时${dayjs
                     .duration(endTime.diff(startTime))
                     .format("mm分ss秒")}，打包后的大小为${size}）`

build/optimize.ts

@@ -11,21 +11,25 @@ const include = [
   "dayjs",
   "axios",
   "pinia",
+  "vditor",
   "typeit",
   "swiper",
   "qrcode",
   "intro.js",
   "vue-i18n",
+  "deep-chat",
   "vxe-table",
   "vue-types",
   "js-cookie",
   "vue-tippy",
   "cropperjs",
   "jsbarcode",
+  "codemirror",
   "pinyin-pro",
   "sortablejs",
   "swiper/vue",
   "mint-filter",
+  "highlight.js",
   "@vueuse/core",
   "vue3-danmaku",
   "v-contextmenu",
@@ -42,6 +46,7 @@ const include = [
   "@howdyjs/mouse-menu",
   "@logicflow/extension",
   "vue-virtual-scroller",
+  "codemirror-editor-vue3",
   "@amap/amap-jsapi-loader",
   "el-table-infinite-scroll",
   "vue-waterfall-plugin-next",
@@ -54,10 +59,6 @@ const include = [
  * 在预构建中强制排除的依赖项
  * 温馨提示：所有以 `@iconify-icons/` 开头引入的的本地图标模块，都应该加入到下面的 `exclude` 里，因为平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入，不需要预构建，直接让浏览器加载就好
  */
-const exclude = [
-  "@iconify-icons/ep",
-  "@iconify-icons/ri",
-  "@pureadmin/theme/dist/browser-utils"
-];
+const exclude = ["@iconify-icons/ep", "@iconify-icons/ri"];
 
 export { include, exclude };

build/plugins.ts

@@ -4,16 +4,13 @@ import { pathResolve } from "./utils";
 import { viteBuildInfo } from "./info";
 import svgLoader from "vite-svg-loader";
 import type { PluginOption } from "vite";
-import checker from "vite-plugin-checker";
 import vueJsx from "@vitejs/plugin-vue-jsx";
-import Inspector from "vite-plugin-vue-inspector";
 import { configCompressPlugin } from "./compress";
 import removeNoMatch from "vite-plugin-router-warn";
 import { visualizer } from "rollup-plugin-visualizer";
 import removeConsole from "vite-plugin-remove-console";
-import { themePreprocessorPlugin } from "@pureadmin/theme";
 import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
-import { genScssMultipleScopeVars } from "../src/layout/theme";
+import { codeInspectorPlugin } from "code-inspector-plugin";
 import { vitePluginFakeServer } from "vite-plugin-fake-server";
 
 export function getPluginsList(
@@ -22,25 +19,28 @@ export function getPluginsList(
 ): PluginOption[] {
   const lifecycle = process.env.npm_lifecycle_event;
   return [
-    vue(),
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: tag => tag === "deep-chat"
+        }
+      }
+    }),
     // jsx、tsx语法支持
     vueJsx(),
     VueI18nPlugin({
-      jitCompilation: false,
       include: [pathResolve("../locales/**")]
     }),
-    checker({
-      typescript: true,
-      vueTsc: true,
-      eslint: {
-        lintCommand: `eslint ${pathResolve("../{src,mock,build}/**/*.{vue,js,ts,tsx}")}`,
-        useFlatConfig: true
-      },
-      terminal: false,
-      enableBuild: false
+    /**
+     * 在页面上按住组合键时，鼠标在页面移动即会在 DOM 上出现遮罩层并显示相关信息，点击一下将自动打开 IDE 并将光标定位到元素对应的代码位置
+     * Mac 默认组合键 Option + Shift
+     * Windows 默认组合键 Alt + Shift
+     * 更多用法看 https://inspector.fe-dev.cn/guide/start.html
+     */
+    codeInspectorPlugin({
+      bundler: "vite",
+      hideConsole: true
     }),
-    // 按下Command(⌘)+Shift(⇧)，然后点击页面元素会自动打开本地IDE并跳转到对应的代码位置
-    Inspector(),
     viteBuildInfo(),
     /**
      * 开发环境下移除非必要的vue-router动态路由警告No match found for location with path
@@ -55,13 +55,6 @@ export function getPluginsList(
       infixName: false,
       enableProd: true
     }),
-    // 自定义主题
-    themePreprocessorPlugin({
-      scss: {
-        multipleScopeVars: genScssMultipleScopeVars(),
-        extract: true
-      }
-    }),
     // svg组件化支持
     svgLoader(),
     VITE_CDN ? cdn : null,

eslint.config.js

@@ -78,7 +78,8 @@ export default defineFlatConfig([
     languageOptions: {
       parser: parserTypeScript,
       parserOptions: {
-        sourceType: "module"
+        sourceType: "module",
+        warnOnUnsupportedTypeScriptVersion: false
       }
     },
     plugins: {
@@ -93,6 +94,8 @@ export default defineFlatConfig([
       "@typescript-eslint/prefer-as-const": "warn",
       "@typescript-eslint/no-empty-function": "off",
       "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/no-unused-expressions": "off",
+      "@typescript-eslint/no-unsafe-function-type": "off",
       "@typescript-eslint/no-import-type-side-effects": "error",
       "@typescript-eslint/explicit-module-boundary-types": "off",
       "@typescript-eslint/consistent-type-imports": [

index.html

@@ -1,87 +1,94 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta name="renderer" content="webkit" />
-    <meta
-      name="viewport"
-      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
-    />
-    <title>vue-pure-admin</title>
-    <link rel="icon" href="/favicon.ico" />
-    <script>
-      window.process = {};
-    </script>
-  </head>
 
-  <body>
-    <div id="app">
-      <style>
-        html,
-        body,
-        #app {
-          position: relative;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 100%;
-          height: 100%;
-          overflow: hidden;
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="renderer" content="webkit" />
+  <meta name="viewport"
+    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
+  <title>vue-pure-admin</title>
+  <link rel="icon" href="/favicon.ico" />
+  <script>
+    var _hmt = _hmt || [];
+    (function () {
+      var hm = document.createElement("script")
+      hm.src = "https://hm.baidu.com/hm.js?d3824e75ef2bf6d851035f74ae1aec68"
+      var s = document.getElementsByTagName("script")[0]
+      s.parentNode.insertBefore(hm, s)
+    })();
+  </script>
+</head>
+
+<body>
+  <div id="app">
+    <style>
+      html,
+      body,
+      #app {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      .loader,
+      .loader::before,
+      .loader::after {
+        width: 2.5em;
+        height: 2.5em;
+        border-radius: 50%;
+        animation: load-animation 1.8s infinite ease-in-out;
+        animation-fill-mode: both;
+      }
+
+      .loader {
+        position: relative;
+        top: 0;
+        margin: 80px auto;
+        font-size: 10px;
+        color: #406eeb;
+        text-indent: -9999em;
+        transform: translateZ(0);
+        transform: translate(-50%, 0);
+        animation-delay: -0.16s;
+      }
+
+      .loader::before,
+      .loader::after {
+        position: absolute;
+        top: 0;
+        content: "";
+      }
+
+      .loader::before {
+        left: -3.5em;
+        animation-delay: -0.32s;
+      }
+
+      .loader::after {
+        left: 3.5em;
+      }
+
+      @keyframes load-animation {
+
+        0%,
+        80%,
+        100% {
+          box-shadow: 0 2.5em 0 -1.3em;
         }
 
-        .loader,
-        .loader::before,
-        .loader::after {
-          width: 2.5em;
-          height: 2.5em;
-          border-radius: 50%;
-          animation: load-animation 1.8s infinite ease-in-out;
-          animation-fill-mode: both;
+        40% {
+          box-shadow: 0 2.5em 0 0;
         }
+      }
+    </style>
+    <div class="loader"></div>
+  </div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
 
-        .loader {
-          position: relative;
-          top: 0;
-          margin: 80px auto;
-          font-size: 10px;
-          color: #406eeb;
-          text-indent: -9999em;
-          transform: translateZ(0);
-          transform: translate(-50%, 0);
-          animation-delay: -0.16s;
-        }
-
-        .loader::before,
-        .loader::after {
-          position: absolute;
-          top: 0;
-          content: "";
-        }
-
-        .loader::before {
-          left: -3.5em;
-          animation-delay: -0.32s;
-        }
-
-        .loader::after {
-          left: 3.5em;
-        }
-
-        @keyframes load-animation {
-          0%,
-          80%,
-          100% {
-            box-shadow: 0 2.5em 0 -1.3em;
-          }
-
-          40% {
-            box-shadow: 0 2.5em 0 0;
-          }
-        }
-      </style>
-      <div class="loader"></div>
-    </div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
+</html>

locales/en.yaml

@@ -76,6 +76,8 @@ menus:
   pureLoginLog: Login Log
   pureOperationLog: Operation Log
   pureSystemLog: System Log
+  pureCodeMirror: CodeMirror
+  pureMarkdown: Markdown
   pureEditor: Editor
   pureAbnormal: Abnormal Page
   pureFourZeroFour: "404"
@@ -83,6 +85,7 @@ menus:
   pureFive: "500"
   pureComponents: Components
   pureDialog: Dialog
+  pureDrawer: Drawer
   pureMessage: Message Tips
   pureVideo: Video
   pureSegmented: Segmented
@@ -91,6 +94,7 @@ menus:
   pureDraggable: Draggable
   pureSplitPane: Split Pane
   pureText: Text Ellipsis
+  pureSlider: Slider
   pureElButton: Button
   pureButton: Button Animation
   pureCheckButton: Check Button

locales/zh-CN.yaml

@@ -76,6 +76,8 @@ menus:
   pureLoginLog: 登录日志
   pureOperationLog: 操作日志
   pureSystemLog: 系统日志
+  pureCodeMirror: 代码编辑器
+  pureMarkdown: Markdown
   pureEditor: 编辑器
   pureAbnormal: 异常页面
   pureFourZeroFour: "404"
@@ -83,6 +85,7 @@ menus:
   pureFive: "500"
   pureComponents: 组件
   pureDialog: 函数式弹框
+  pureDrawer: 函数式抽屉
   pureMessage: 消息提示
   pureVideo: 视频
   pureSegmented: 分段控制器
@@ -91,6 +94,7 @@ menus:
   pureDraggable: 拖拽
   pureSplitPane: 切割面板
   pureText: 文本省略
+  pureSlider: 滑块
   pureElButton: 按钮
   pureCheckButton: 可选按钮
   pureButton: 按钮动效
@@ -233,4 +237,4 @@ login:
   purePassWordRuleReg: 密码格式应为8-18位数字、字母、符号的任意两种组合
   purePassWordSureReg: 请输入确认密码
   purePassWordDifferentReg: 两次密码不一致!
-  purePassWordUpdateReg: 修改密码成功
+  purePassWordUpdateReg: 修改密码成功

mock/asyncRoutes.ts

@@ -259,7 +259,7 @@ const frameRouter = {
       children: [
         {
           path: "/external",
-          name: "https://pure-admin.github.io/pure-admin-doc",
+          name: "https://pure-admin.cn/",
           meta: {
             title: "menus.pureExternalLink",
             roles: ["admin", "common"]

mock/system.ts

@@ -430,7 +430,7 @@ export default defineFakeRoute([
             id: 102,
             menuType: 2,
             title: "menus.pureExternalLink",
-            name: "https://pure-admin.github.io/pure-admin-doc",
+            name: "https://pure-admin.cn/",
             path: "/external",
             component: "",
             rank: null,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-pure-admin",
-  "version": "5.8.0",
+  "version": "5.9.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -48,28 +48,32 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
-    "@howdyjs/mouse-menu": "^2.1.3",
+    "@howdyjs/mouse-menu": "^2.1.6",
     "@infectoone/vue-ganttastic": "^2.3.2",
     "@logicflow/core": "^1.2.28",
     "@logicflow/extension": "^1.2.28",
     "@pureadmin/descriptions": "^1.2.1",
-    "@pureadmin/table": "^3.2.0",
-    "@pureadmin/utils": "^2.4.8",
-    "@vue-flow/background": "^1.3.0",
-    "@vue-flow/core": "^1.39.3",
-    "@vueuse/core": "^10.11.1",
-    "@vueuse/motion": "^2.2.3",
+    "@pureadmin/table": "^3.2.1",
+    "@pureadmin/utils": "^2.5.0",
+    "@vue-flow/background": "^1.3.2",
+    "@vue-flow/core": "^1.42.1",
+    "@vueuse/core": "^12.5.0",
+    "@vueuse/motion": "^2.2.6",
     "@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.7.3",
+    "axios": "^1.7.9",
     "china-area-data": "^5.0.1",
+    "codemirror": "^5.65.18",
+    "codemirror-editor-vue3": "^2.8.0",
     "cropperjs": "^1.6.2",
-    "dayjs": "^1.11.12",
-    "echarts": "^5.5.1",
+    "dayjs": "^1.11.13",
+    "deep-chat": "^2.1.1",
+    "echarts": "^5.6.0",
     "el-table-infinite-scroll": "^3.0.6",
-    "element-plus": "^2.8.0",
+    "element-plus": "^2.9.4",
+    "highlight.js": "^11.11.1",
     "intro.js": "^7.2.0",
     "js-cookie": "^3.0.5",
     "jsbarcode": "^3.11.6",
@@ -78,102 +82,102 @@
     "mitt": "^3.0.1",
     "mqtt": "4.3.7",
     "nprogress": "^0.2.0",
-    "path": "^0.12.7",
-    "pinia": "^2.2.1",
-    "pinyin-pro": "^3.24.2",
-    "plus-pro-components": "^0.1.14",
+    "path-browserify": "^1.0.1",
+    "pinia": "^3.0.1",
+    "pinyin-pro": "^3.26.0",
+    "plus-pro-components": "^0.1.20",
     "qrcode": "^1.5.4",
-    "qs": "^6.13.0",
+    "qs": "^6.14.0",
     "responsive-storage": "^2.2.0",
-    "sortablejs": "^1.15.2",
-    "swiper": "^11.1.9",
-    "typeit": "^8.8.4",
+    "sortablejs": "^1.15.6",
+    "swiper": "^11.2.3",
+    "typeit": "^8.8.7",
     "v-contextmenu": "^3.2.0",
-    "v3-infinite-loading": "^1.3.1",
-    "version-rocket": "^1.7.2",
-    "vue": "^3.4.37",
-    "vue-i18n": "^9.13.1",
+    "v3-infinite-loading": "^1.3.2",
+    "vditor": "^3.10.9",
+    "version-rocket": "^1.7.4",
+    "vue": "^3.5.13",
+    "vue-i18n": "^11.1.1",
     "vue-json-pretty": "^2.4.0",
-    "vue-pdf-embed": "^2.1.0",
-    "vue-router": "^4.4.3",
-    "vue-tippy": "^6.4.4",
+    "vue-pdf-embed": "^2.1.2",
+    "vue-router": "^4.5.0",
+    "vue-tippy": "^6.6.0",
     "vue-types": "^5.1.3",
     "vue-virtual-scroller": "2.0.0-beta.8",
-    "vue-waterfall-plugin-next": "^2.4.3",
+    "vue-waterfall-plugin-next": "^2.6.5",
     "vue3-danmaku": "^1.6.1",
     "vue3-puzzle-vcode": "^1.1.7",
     "vuedraggable": "^4.1.0",
-    "vxe-table": "4.6.17",
-    "wavesurfer.js": "^7.8.3",
-    "xgplayer": "^3.0.19",
+    "vxe-table": "4.6.25",
+    "wavesurfer.js": "^7.9.1",
+    "xgplayer": "^3.0.20",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.4.0",
-    "@commitlint/config-conventional": "^19.2.2",
-    "@commitlint/types": "^19.0.3",
-    "@eslint/js": "^9.9.0",
-    "@faker-js/faker": "^8.4.1",
+    "@commitlint/cli": "^19.7.1",
+    "@commitlint/config-conventional": "^19.7.1",
+    "@commitlint/types": "^19.5.0",
+    "@eslint/js": "^9.20.0",
+    "@faker-js/faker": "^9.5.0",
     "@iconify-icons/ep": "^1.2.12",
     "@iconify-icons/ri": "^1.2.10",
-    "@iconify/vue": "^4.1.2",
-    "@intlify/unplugin-vue-i18n": "^4.0.0",
-    "@pureadmin/theme": "^3.2.0",
+    "@iconify/vue": "4.2.0",
+    "@intlify/unplugin-vue-i18n": "^6.0.3",
+    "@types/codemirror": "^5.60.15",
     "@types/dagre": "^0.7.52",
-    "@types/gradient-string": "^1.1.6",
     "@types/intro.js": "^5.1.5",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^20.14.15",
+    "@types/node": "^20.17.19",
     "@types/nprogress": "^0.2.3",
+    "@types/path-browserify": "^1.0.3",
     "@types/qrcode": "^1.5.5",
-    "@types/qs": "^6.9.15",
+    "@types/qs": "^6.9.18",
     "@types/sortablejs": "^1.15.8",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
-    "@vitejs/plugin-vue": "^5.1.2",
-    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.24.0",
+    "@typescript-eslint/parser": "^8.24.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
     "autoprefixer": "^10.4.20",
-    "boxen": "^7.1.1",
-    "cssnano": "^7.0.5",
+    "boxen": "^8.0.1",
+    "code-inspector-plugin": "^0.20.0",
+    "cssnano": "^7.0.6",
     "dagre": "^0.8.5",
-    "eslint": "^9.9.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint": "^9.20.1",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-define-config": "^2.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-vue": "^9.27.0",
-    "gradient-string": "^2.0.2",
-    "husky": "^9.1.4",
-    "lint-staged": "^15.2.8",
-    "postcss": "^8.4.41",
-    "postcss-html": "^1.7.0",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-vue": "^9.32.0",
+    "gradient-string": "^3.0.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.4.3",
+    "postcss": "^8.5.2",
+    "postcss-html": "^1.8.0",
     "postcss-import": "^16.1.0",
     "postcss-scss": "^4.0.9",
-    "prettier": "^3.3.3",
-    "rimraf": "^5.0.10",
-    "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.77.8",
-    "stylelint": "^16.8.1",
-    "stylelint-config-recess-order": "^5.0.1",
-    "stylelint-config-recommended-vue": "^1.5.0",
-    "stylelint-config-standard-scss": "^13.1.0",
-    "stylelint-prettier": "^5.0.2",
+    "prettier": "^3.5.1",
+    "rimraf": "^6.0.1",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "sass": "^1.85.0",
+    "stylelint": "^16.14.1",
+    "stylelint-config-recess-order": "^6.0.0",
+    "stylelint-config-recommended-vue": "^1.6.0",
+    "stylelint-config-standard-scss": "^14.0.0",
+    "stylelint-prettier": "^5.0.3",
     "svgo": "^3.3.2",
-    "tailwindcss": "^3.4.9",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.0",
+    "tailwindcss": "3.4.17",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.0",
     "vite-plugin-cdn-import": "^1.0.1",
-    "vite-plugin-checker": "^0.7.2",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-fake-server": "^2.1.1",
+    "vite-plugin-fake-server": "^2.2.0",
     "vite-plugin-remove-console": "^2.2.0",
     "vite-plugin-router-warn": "^1.0.0",
-    "vite-plugin-vue-inspector": "^5.1.3",
     "vite-svg-loader": "^5.1.0",
     "vue-eslint-parser": "^9.4.3",
-    "vue-tsc": "^2.0.29"
+    "vue-tsc": "^2.2.0"
   },
   "engines": {
-    "node": "^18.18.0 || ^20.9.0 || >=21.1.0",
+    "node": "^18.18.0 || ^20.9.0 || >=22.0.0",
     "pnpm": ">=9"
   },
   "pnpm": {
@@ -194,6 +198,14 @@
       "allowedVersions": {
         "eslint": "9"
       }
-    }
+    },
+    "onlyBuiltDependencies": [
+      "@parcel/watcher",
+      "core-js",
+      "es5-ext",
+      "esbuild",
+      "typeit",
+      "vue-demi"
+    ]
   }
-}
+}

public/platform-config.json

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

src/App.vue

@@ -2,6 +2,7 @@
   <el-config-provider :locale="currentLocale">
     <router-view />
     <ReDialog />
+    <ReDrawer />
   </el-config-provider>
 </template>
 
@@ -10,16 +11,19 @@ import { defineComponent } from "vue";
 import { checkVersion } from "version-rocket";
 import { ElConfigProvider } from "element-plus";
 import { ReDialog } from "@/components/ReDialog";
+import { ReDrawer } from "@/components/ReDrawer";
 import en from "element-plus/es/locale/lang/en";
 import zhCn from "element-plus/es/locale/lang/zh-cn";
 import plusEn from "plus-pro-components/es/locale/lang/en";
 import plusZhCn from "plus-pro-components/es/locale/lang/zh-cn";
+// import { ElNotification } from "element-plus";
 
 export default defineComponent({
   name: "app",
   components: {
     [ElConfigProvider.name]: ElConfigProvider,
-    ReDialog
+    ReDialog,
+    ReDrawer
   },
   computed: {
     currentLocale() {
@@ -51,5 +55,23 @@ export default defineComponent({
       );
     }
   }
+  // mounted() {
+  //   ElNotification({
+  //     title: "优惠活动即将结束",
+  //     duration: 0,
+  //     //@ts-expect-error
+  //     style: { width: "200px" },
+  //     position: "bottom-right",
+  //     dangerouslyUseHTMLString: true,
+  //     message: `
+  //       <a target='_blank' style='font-size: 16px' class='block text-center border mb-2 rounded hover:text-[red]' href='https://pure-admin.github.io/pure-admin-doc/pages/js/'>
+  //       JS版本
+  //       </a>
+  //       <a target='_blank' style='font-size: 16px' class='block text-center border mb-2 rounded hover:text-[red]' href='https://pure-admin.github.io/pure-admin-doc/pages/max/'>
+  //       Max版本
+  //       </a>
+  //       `
+  //   });
+  // }
 });
 </script>

src/assets/iconfont/iconfont.js

@@ -28,8 +28,7 @@
           c = document.createElement("div");
         (c.innerHTML = e._iconfont_svg_string_2208059),
           (c = c.getElementsByTagName("svg")[0]) &&
-            (c.setAttribute("aria-hidden", "true"),
-            (c.style.position = "absolute"),
+            ((c.style.position = "absolute"),
             (c.style.width = 0),
             (c.style.height = 0),
             (c.style.overflow = "hidden"),

src/assets/svg/enter_outlined.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" class="iconify iconify--ant-design" viewBox="0 0 1024 1024"><path fill="currentColor" d="M864 170h-60c-4.4 0-8 3.6-8 8v518H310v-73c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 0 0 0 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-75h498c35.3 0 64-28.7 64-64V178c0-4.4-3.6-8-8-8"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="iconify iconify--ant-design" viewBox="0 0 1024 1024"><path fill="currentColor" d="M864 170h-60c-4.4 0-8 3.6-8 8v518H310v-73c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 0 0 0 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-75h498c35.3 0 64-28.7 64-64V178c0-4.4-3.6-8-8-8"/></svg>

src/assets/svg/exit_screen.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3.5 4H1V3h2V1h1v2.5zM13 3V1h-1v2.5l.5.5H15V3zm-1 9.5V15h1v-2h2v-1h-2.5zM1 12v1h2v2h1v-2.5l-.5-.5zm11-1.5-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5zM10 7H6v2h4z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3.5 4H1V3h2V1h1v2.5zM13 3V1h-1v2.5l.5.5H15V3zm-1 9.5V15h1v-2h2v-1h-2.5zM1 12v1h2v2h1v-2.5l-.5-.5zm11-1.5-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5zM10 7H6v2h4z"/></svg>

src/assets/svg/full_screen.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3 12h10V4H3zm2-6h6v4H5zM2 6H1V2.5l.5-.5H5v1H2zm13-3.5V6h-1V3h-3V2h3.5zM14 10h1v3.5l-.5.5H11v-1h3zM2 13h3v1H1.5l-.5-.5V10h1z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3 12h10V4H3zm2-6h6v4H5zM2 6H1V2.5l.5-.5H5v1H2zm13-3.5V6h-1V3h-3V2h3.5zM14 10h1v3.5l-.5.5H11v-1h3zM2 13h3v1H1.5l-.5-.5V10h1z"/></svg>

src/assets/svg/globalization.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="globalization" viewBox="0 0 512 512"><path fill="currentColor" d="m478.33 433.6-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362 368 281.65 401.17 362zm-66.99-19.08a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73 39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93.92 1.19 1.83 2.35 2.74 3.51-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59 22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" class="globalization" viewBox="0 0 512 512"><path fill="currentColor" d="m478.33 433.6-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362 368 281.65 401.17 362zm-66.99-19.08a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73 39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93.92 1.19 1.83 2.35 2.74 3.51-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59 22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z"/></svg>

src/assets/svg/keyboard_esc.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" class="iconify iconify--mdi" viewBox="0 0 24 24"><path fill="currentColor" d="M1 7h6v2H3v2h4v2H3v2h4v2H1zm10 0h4v2h-4v2h2a2 2 0 0 1 2 2v2c0 1.11-.89 2-2 2H9v-2h4v-2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2m8 0h2a2 2 0 0 1 2 2v1h-2V9h-2v6h2v-1h2v1c0 1.11-.89 2-2 2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="iconify iconify--mdi" viewBox="0 0 24 24"><path fill="currentColor" d="M1 7h6v2H3v2h4v2H3v2h4v2H1zm10 0h4v2h-4v2h2a2 2 0 0 1 2 2v2c0 1.11-.89 2-2 2H9v-2h4v-2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2m8 0h2a2 2 0 0 1 2 2v1h-2V9h-2v6h2v-1h2v1c0 1.11-.89 2-2 2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2"/></svg>

src/assets/table-bar/drag.svg

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

src/components/ReDrawer/index.ts

@@ -0,0 +1,64 @@
+import { ref } from "vue";
+import reDrawer from "./index.vue";
+import { useTimeoutFn } from "@vueuse/core";
+import { withInstall } from "@pureadmin/utils";
+import type {
+  EventType,
+  ArgsType,
+  DrawerProps,
+  DrawerOptions,
+  ButtonProps
+} from "./type";
+
+const drawerStore = ref<Array<DrawerOptions>>([]);
+
+/** 打开抽屉 */
+const addDrawer = (options: DrawerOptions) => {
+  const open = () =>
+    drawerStore.value.push(Object.assign(options, { visible: true }));
+  if (options?.openDelay) {
+    useTimeoutFn(() => {
+      open();
+    }, options.openDelay);
+  } else {
+    open();
+  }
+};
+
+/** 关闭抽屉 */
+const closeDrawer = (options: DrawerOptions, index: number, args?: any) => {
+  drawerStore.value[index].visible = false;
+  options.closeCallBack && options.closeCallBack({ options, index, args });
+
+  const closeDelay = options?.closeDelay ?? 200;
+  useTimeoutFn(() => {
+    drawerStore.value.splice(index, 1);
+  }, closeDelay);
+};
+
+/**
+ * @description 更改抽屉自身属性值
+ * @param value 属性值
+ * @param key 属性，默认`title`
+ * @param index 弹框索引（默认`0`，代表只有一个弹框，对于嵌套弹框要改哪个弹框的属性值就把该弹框索引赋给`index`）
+ */
+const updateDrawer = (value: any, key = "title", index = 0) => {
+  drawerStore.value[index][key] = value;
+};
+
+/** 关闭所有弹框 */
+const closeAllDrawer = () => {
+  drawerStore.value = [];
+};
+
+const ReDrawer = withInstall(reDrawer);
+
+export type { EventType, ArgsType, DrawerOptions, DrawerProps, ButtonProps };
+export {
+  ReDrawer,
+  drawerStore,
+  addDrawer,
+  closeDrawer,
+  updateDrawer,
+  closeAllDrawer
+};

src/components/ReDrawer/index.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import {
+  type EventType,
+  type ButtonProps,
+  type DrawerOptions,
+  closeDrawer,
+  drawerStore
+} from "./index";
+import { computed, ref } from "vue";
+import { isFunction } from "@pureadmin/utils";
+
+defineOptions({
+  name: "ReDrawer"
+});
+
+const sureBtnMap = ref({});
+
+const footerButtons = computed(() => {
+  return (options: DrawerOptions) => {
+    return options?.footerButtons?.length > 0
+      ? options.footerButtons
+      : ([
+          {
+            label: "取消",
+            text: true,
+            bg: true,
+            btnClick: ({ drawer: { options, index } }) => {
+              const done = () =>
+                closeDrawer(options, index, { command: "cancel" });
+              if (options?.beforeCancel && isFunction(options?.beforeCancel)) {
+                options.beforeCancel(done, { options, index });
+              } else {
+                done();
+              }
+            }
+          },
+          {
+            label: "确定",
+            type: "primary",
+            text: true,
+            bg: true,
+            popConfirm: options?.popConfirm,
+            btnClick: ({ drawer: { options, index } }) => {
+              if (options?.sureBtnLoading) {
+                sureBtnMap.value[index] = Object.assign(
+                  {},
+                  sureBtnMap.value[index],
+                  {
+                    loading: true
+                  }
+                );
+              }
+              const closeLoading = () => {
+                if (options?.sureBtnLoading) {
+                  sureBtnMap.value[index].loading = false;
+                }
+              };
+              const done = () => {
+                closeLoading();
+                closeDrawer(options, index, { command: "sure" });
+              };
+              if (options?.beforeSure && isFunction(options?.beforeSure)) {
+                options.beforeSure(done, { options, index, closeLoading });
+              } else {
+                done();
+              }
+            }
+          }
+        ] as Array<ButtonProps>);
+  };
+});
+
+function eventsCallBack(
+  event: EventType,
+  options: DrawerOptions,
+  index: number
+) {
+  if (options?.[event] && isFunction(options?.[event])) {
+    return options?.[event]({ options, index });
+  }
+}
+
+/**
+ *
+ * @param {DrawerOptions} options - 包含抽屉相关配置的对象
+ * @param {number} index - 抽屉的索引
+ * @param {Object} args - 传递给关闭抽屉操作的参数对象，默认为 { command: 'close' }
+ * @returns {void} 这个函数不返回任何值
+ */
+function handleClose(
+  options: DrawerOptions,
+  index: number,
+  args = { command: "close" }
+) {
+  closeDrawer(options, index, args);
+  eventsCallBack("close", options, index);
+}
+</script>
+
+<template>
+  <el-drawer
+    v-for="(options, index) in drawerStore"
+    :key="index"
+    v-bind="options"
+    v-model="options.visible"
+    class="pure-drawer"
+    :append-to-body="!!options?.appendToBody"
+    :append-to="options?.appendTo ? options.appendTo : 'body'"
+    :destroy-on-close="!!options?.destroyOnClose"
+    :lock-scroll="!!options?.lockScroll"
+    @closed="handleClose(options, index)"
+    @opened="eventsCallBack('open', options, index)"
+    @open-auto-focus="eventsCallBack('openAutoFocus', options, index)"
+    @close-auto-focus="eventsCallBack('closeAutoFocus', options, index)"
+  >
+    <!-- header  -->
+    <template
+      v-if="options?.headerRenderer"
+      #header="{ close, titleId, titleClass }"
+    >
+      <component
+        :is="options?.headerRenderer({ close, titleId, titleClass })"
+      />
+    </template>
+    <!--  body  -->
+    <component
+      v-bind="options?.props"
+      :is="options.contentRenderer({ options, index })"
+      @close="args => handleClose(options, index, args)"
+    />
+    <!-- footer  -->
+    <template v-if="!options?.hideFooter" #footer>
+      <template v-if="options?.footerRenderer">
+        <component :is="options?.footerRenderer({ options, index })" />
+      </template>
+      <span v-else>
+        <template v-for="(btn, key) in footerButtons(options)" :key="key">
+          <el-popconfirm
+            v-if="btn.popConfirm"
+            v-bind="btn.popConfirm"
+            @confirm="
+              btn.btnClick({
+                drawer: { options, index },
+                button: { btn, index: key }
+              })
+            "
+          >
+            <template #reference>
+              <el-button v-bind="btn">{{ btn?.label }}</el-button>
+            </template>
+          </el-popconfirm>
+          <el-button
+            v-else
+            v-bind="btn"
+            :loading="key === 1 && sureBtnMap[index]?.loading"
+            @click="
+              btn.btnClick({
+                drawer: { options, index },
+                button: { btn, index: key }
+              })
+            "
+          >
+            {{ btn?.label }}
+          </el-button>
+        </template>
+      </span>
+    </template>
+  </el-drawer>
+</template>

src/components/ReDrawer/type.ts

@@ -0,0 +1,262 @@
+import type { CSSProperties, VNode, Component } from "vue";
+
+type DoneFn = (cancel?: boolean) => void;
+type EventType = "open" | "close" | "openAutoFocus" | "closeAutoFocus";
+type ArgsType = {
+  /** `cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了 `esc` 键 */
+  command: "cancel" | "sure" | "close";
+};
+
+type ButtonType =
+  | "primary"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info"
+  | "text";
+
+type DrawerProps = {
+  /** `Drawer` 的显示与隐藏 */
+  visible?: boolean;
+  /** `Drawer` 自身是否插入至 `body` 元素上。嵌套的 `Drawer` 必须指定该属性并赋值为 `true`，默认 `false` */
+  appendToBody?: boolean;
+  /** 挂载到哪个 `DOM` 元素 将覆盖 `appendToBody` */
+  appendTo?: string;
+  /** 是否在 `Drawer` 出现时将 `body` 滚动锁定，默认 `true` */
+  lockScroll?: boolean;
+  /** 关闭前的回调，会暂停 `Drawer` 的关闭 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
+  beforeClose?: (done: DoneFn) => void;
+  /** 是否可以通过点击 `modal` 关闭 `Drawer` ，默认 `true` */
+  closeOnClickModal?: boolean;
+  /** 是否可以通过按下 `ESC` 关闭 `Drawer` ，默认 `true` */
+  closeOnPressEscape?: boolean;
+  /** 是否显示关闭按钮，默认 `true` */
+  showClose?: boolean;
+  /** `Drawer` 打开的延时时间，单位毫秒，默认 `0` */
+  openDelay?: number;
+  /** `Drawer` 关闭的延时时间，单位毫秒，默认 `0` */
+  closeDelay?: number;
+  /** `Drawer` 自定义类名 */
+  class?: string;
+  /** `Drawer` 的自定义样式 */
+  style?: CSSProperties;
+  /** 控制是否在关闭 `Drawer` 之后将子元素全部销毁，默认 `false` */
+  destroyOnClose?: boolean;
+  /** 是否需要遮罩层，默认 `true` */
+  modal?: boolean;
+  /** `Drawer` 打开的方向，默认 `rtl` */
+  direction?: "rtl" | "ltr" | "ttb" | "btt";
+  /** `Drawer` 窗体的大小, 当使用 `number` 类型时, 以像素为单位, 当使用 `string` 类型时, 请传入 `'x%'`, 否则便会以 `number` 类型解释 */
+  size?: string | number;
+  /** `Drawer` 的标题 */
+  title?: string;
+  /** 控制是否显示 `header` 栏, 默认为 `true`, 当此项为 `false` 时, `title attribute` 和 `title slot` 均不生效 */
+  withHeader?: boolean;
+  /** 遮罩层的自定义类名 */
+  modalClass?: string;
+  /** 设置 `z-index` */
+  zIndex?: number;
+  /** `header` 的 `aria-level` 属性，默认 `2` */
+  headerAriaLevel?: string;
+};
+
+//element-plus.org/zh-CN/component/popConfirm.html#attributes
+type PopConfirm = {
+  /** 标题 */
+  title?: string;
+  /** 确认按钮文字 */
+  confirmButtonText?: string;
+  /** 取消按钮文字 */
+  cancelButtonText?: string;
+  /** 确认按钮类型，默认 `primary` */
+  confirmButtonType?: ButtonType;
+  /** 取消按钮类型，默认 `text` */
+  cancelButtonType?: ButtonType;
+  /** 自定义图标，默认 `QuestionFilled` */
+  icon?: string | Component;
+  /** `Icon` 颜色，默认 `#f90` */
+  iconColor?: string;
+  /** 是否隐藏 `Icon`，默认 `false` */
+  hideIcon?: boolean;
+  /** 关闭时的延迟，默认 `200` */
+  hideAfter?: number;
+  /** 是否将 `popover` 的下拉列表插入至 `body` 元素，默认 `true` */
+  teleported?: boolean;
+  /** 当 `popover` 组件长时间不触发且 `persistent` 属性设置为 `false` 时, `popover` 将会被删除，默认 `false` */
+  persistent?: boolean;
+  /** 弹层宽度，最小宽度 `150px`，默认 `150` */
+  width?: string | number;
+};
+
+type BtnClickDrawer = {
+  options?: DrawerOptions;
+  index?: number;
+};
+type BtnClickButton = {
+  btn?: ButtonProps;
+  index?: number;
+};
+/** https://element-plus.org/zh-CN/component/button.html#button-attributes */
+type ButtonProps = {
+  /** 按钮文字 */
+  label: string;
+  /** 按钮尺寸 */
+  size?: "large" | "default" | "small";
+  /** 按钮类型 */
+  type?: "primary" | "success" | "warning" | "danger" | "info";
+  /** 是否为朴素按钮，默认 `false` */
+  plain?: boolean;
+  /** 是否为文字按钮，默认 `false` */
+  text?: boolean;
+  /** 是否显示文字按钮背景颜色，默认 `false` */
+  bg?: boolean;
+  /** 是否为链接按钮，默认 `false` */
+  link?: boolean;
+  /** 是否为圆角按钮，默认 `false` */
+  round?: boolean;
+  /** 是否为圆形按钮，默认 `false` */
+  circle?: boolean;
+  /** 确认按钮的 `PopConfirm` 气泡确认框相关配置 */
+  popConfirm?: PopConfirm;
+  /** 是否为加载中状态，默认 `false` */
+  loading?: boolean;
+  /** 自定义加载中状态图标组件 */
+  loadingIcon?: string | Component;
+  /** 按钮是否为禁用状态，默认 `false` */
+  disabled?: boolean;
+  /** 图标组件 */
+  icon?: string | Component;
+  /** 是否开启原生 `autofocus` 属性，默认 `false` */
+  autofocus?: boolean;
+  /** 原生 `type` 属性，默认 `button` */
+  nativeType?: "button" | "submit" | "reset";
+  /** 自动在两个中文字符之间插入空格 */
+  autoInsertSpace?: boolean;
+  /** 自定义按钮颜色, 并自动计算 `hover` 和 `active` 触发后的颜色 */
+  color?: string;
+  /** `dark` 模式, 意味着自动设置 `color` 为 `dark` 模式的颜色，默认 `false` */
+  dark?: boolean;
+  /** 自定义元素标签 */
+  tag?: string | Component;
+  /** 点击按钮后触发的回调 */
+  btnClick?: ({
+    drawer,
+    button
+  }: {
+    /** 当前 `Drawer` 信息 */
+    drawer: BtnClickDrawer;
+    /** 当前 `button` 信息 */
+    button: BtnClickButton;
+  }) => void;
+};
+
+interface DrawerOptions extends DrawerProps {
+  /** 内容区组件的 `props`，可通过 `defineProps` 接收 */
+  props?: any;
+  /** 是否隐藏 `Drawer` 按钮操作区的内容 */
+  hideFooter?: boolean;
+  /** 确认按钮的 `PopConfirm` 气泡确认框相关配置 */
+  popConfirm?: PopConfirm;
+  /** 点击确定按钮后是否开启 `loading` 加载动画 */
+  sureBtnLoading?: boolean;
+  /**
+   * @description 自定义抽屉标题的内容渲染器
+   * @see {@link https://element-plus.org/zh-CN/component/drawer.html#%E6%8F%92%E6%A7%BD}
+   */
+  headerRenderer?: ({
+    close,
+    titleId,
+    titleClass
+  }: {
+    close: Function;
+    titleId: string;
+    titleClass: string;
+  }) => VNode | Component;
+  /** 自定义内容渲染器 */
+  contentRenderer?: ({
+    options,
+    index
+  }: {
+    options: DrawerOptions;
+    index: number;
+  }) => VNode | Component;
+  /** 自定义按钮操作区的内容渲染器，会覆盖`footerButtons`以及默认的 `取消` 和 `确定` 按钮 */
+  footerRenderer?: ({
+    options,
+    index
+  }: {
+    options: DrawerOptions;
+    index: number;
+  }) => VNode | Component;
+  /** 自定义底部按钮操作 */
+  footerButtons?: Array<ButtonProps>;
+  /** `Drawer` 打开后的回调 */
+  open?: ({
+    options,
+    index
+  }: {
+    options: DrawerOptions;
+    index: number;
+  }) => void;
+  /** `Drawer` 关闭后的回调（只有点击右上角关闭按钮或空白页或按下了esc键关闭页面时才会触发） */
+  close?: ({
+    options,
+    index
+  }: {
+    options: DrawerOptions;
+    index: number;
+  }) => void;
+  /** `Drawer` 关闭后的回调。 `args` 返回的 `command` 值解析：`cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了esc键  */
+  closeCallBack?: ({
+    options,
+    index,
+    args
+  }: {
+    options: DrawerOptions;
+    index: number;
+    args: any;
+  }) => void;
+  /** 输入焦点聚焦在 `Drawer` 内容时的回调 */
+  openAutoFocus?: ({
+    options,
+    index
+  }: {
+    options: DrawerOptions;
+    index: number;
+  }) => void;
+  /** 输入焦点从 `Drawer` 内容失焦时的回调 */
+  closeAutoFocus?: ({
+    options,
+    index
+  }: {
+    options: DrawerOptions;
+    index: number;
+  }) => void;
+
+  /** 点击底部取消按钮的回调，会暂停 `Drawer` 的关闭. 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
+  beforeCancel?: (
+    done: Function,
+    {
+      options,
+      index
+    }: {
+      options: DrawerOptions;
+      index: number;
+    }
+  ) => void;
+  /** 点击底部确定按钮的回调，会暂停 `Drawer` 的关闭. 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
+  beforeSure?: (
+    done: Function,
+    {
+      options,
+      index,
+      closeLoading
+    }: {
+      options: DrawerOptions;
+      index: number;
+      closeLoading: Function;
+    }
+  ) => void;
+}
+
+export type { ButtonProps, DrawerOptions, ArgsType, DrawerProps, EventType };

src/components/ReFlowChart/src/assets/iconfont/iconfont.js

@@ -28,8 +28,7 @@
     ((o = document.createElement("div")).innerHTML = i),
       (i = null),
       (e = o.getElementsByTagName("svg")[0]) &&
-        (e.setAttribute("aria-hidden", "true"),
-        (e.style.position = "absolute"),
+        ((e.style.position = "absolute"),
         (e.style.width = 0),
         (e.style.height = 0),
         (e.style.overflow = "hidden"),

src/components/ReIcon/src/Select.vue

@@ -219,8 +219,8 @@ watch(
   &:hover {
     color: var(--el-color-primary);
     border-color: var(--el-color-primary);
-    transition: all 0.4s;
     transform: scaleX(1.05);
+    transition: all 0.4s;
   }
 }
 

src/components/ReIcon/src/hooks.ts

@@ -4,7 +4,7 @@ import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
 
 /**
  * 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标
- * @see 点击查看文档图标篇 {@link https://pure-admin.github.io/pure-admin-doc/pages/icon/}
+ * @see 点击查看文档图标篇 {@link https://pure-admin.cn/pages/icon/}
  * @param icon 必传 图标
  * @param attrs 可选 iconType 属性
  * @returns Component

src/components/ReIcon/src/iconfont.ts

@@ -27,8 +27,7 @@ export default defineComponent({
       return h(
         "svg",
         {
-          class: "icon-svg",
-          "aria-hidden": true
+          class: "icon-svg"
         },
         {
           default: () => [

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -17,6 +17,7 @@ export default defineComponent({
       IconifyIcon,
       {
         icon: this.icon,
+        "aria-hidden": false,
         style: attrs?.style
           ? Object.assign(attrs.style, { outline: "none" })
           : { outline: "none" },

src/components/ReIcon/src/iconifyIconOnline.ts

@@ -17,6 +17,7 @@ export default defineComponent({
       IconifyIcon,
       {
         icon: `${this.icon}`,
+        "aria-hidden": false,
         style: attrs?.style
           ? Object.assign(attrs.style, { outline: "none" })
           : { outline: "none" },

src/components/RePureTableBar/src/bar.tsx

@@ -54,7 +54,7 @@ const props = {
 export default defineComponent({
   name: "PureTableBar",
   props,
-  emits: ["refresh"],
+  emits: ["refresh", "fullscreen"],
   setup(props, { emit, slots, attrs }) {
     const size = ref("default");
     const loading = ref(false);
@@ -117,6 +117,11 @@ export default defineComponent({
       toggleRowExpansionAll(props.tableRef.data, isExpandAll.value);
     }
 
+    function onFullscreen() {
+      isFullscreen.value = !isFullscreen.value;
+      emit("fullscreen", isFullscreen.value);
+    }
+
     function toggleRowExpansionAll(data, isExpansion) {
       data.forEach(item => {
         props.tableRef.toggleRowExpansion(item, isExpansion);
@@ -378,7 +383,7 @@ export default defineComponent({
                 class={["w-[16px]", iconClass.value]}
                 icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
                 v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
-                onClick={() => (isFullscreen.value = !isFullscreen.value)}
+                onClick={() => onFullscreen()}
               />
             </div>
           </div>

src/components/ReSegmented/src/type.ts

@@ -6,7 +6,7 @@ export interface OptionsType {
   label?: string | (() => VNode | Component);
   /**
    * @description 图标，采用平台内置的 `useRenderIcon` 函数渲染
-   * @see {@link 用法参考 https://pure-admin.github.io/pure-admin-doc/pages/icon/#%E9%80%9A%E7%94%A8%E5%9B%BE%E6%A0%87-userendericon-hooks }
+   * @see {@link 用法参考 https://pure-admin.cn/pages/icon/#%E9%80%9A%E7%94%A8%E5%9B%BE%E6%A0%87-userendericon-hooks }
    */
   icon?: string | Component;
   /** 图标属性、样式配置 */

src/components/ReSplitPane/iconfont/iconfont.js

@@ -39,8 +39,7 @@
     (t.innerHTML = i),
       (i = null),
       (t = t.getElementsByTagName("svg")[0]) &&
-        (t.setAttribute("aria-hidden", "true"),
-        (t.style.position = "absolute"),
+        ((t.style.position = "absolute"),
         (t.style.width = 0),
         (t.style.height = 0),
         (t.style.overflow = "hidden"),

src/components/ReText/src/index.vue

@@ -1,6 +1,6 @@
-<script lang="ts" setup>
-import { h, onMounted, ref, useSlots } from "vue";
-import { type TippyOptions, useTippy } from "vue-tippy";
+<script setup lang="ts">
+import { h, onMounted, ref } from "vue";
+import { type TippyOptions, type TippyContent, useTippy } from "vue-tippy";
 
 defineOptions({
   name: "ReText"
@@ -17,7 +17,10 @@ const props = defineProps({
   }
 });
 
-const $slots = useSlots();
+const slots = defineSlots<{
+  content: () => TippyContent;
+  default: () => any;
+}>();
 
 const textRef = ref();
 const tippyFunc = ref();
@@ -33,7 +36,7 @@ const isTextEllipsis = (el: HTMLElement) => {
 };
 
 const getTippyProps = () => ({
-  content: h($slots.content || $slots.default),
+  content: h(slots.content || slots.default),
   ...props.tippyProps
 });
 

src/components/ReTreeLine/index.ts

@@ -90,9 +90,9 @@ export default defineComponent({
         ];
     // 取得每一层的当前节点是不是在当前层级列表的最后一个
     const lastnodeArr = [];
-    let currentNode = this.node;
+    let currentNode: any = this.node;
     while (currentNode) {
-      let parentNode = currentNode.parent;
+      let parentNode: any = currentNode.parent;
       // 兼容element-plus的 el-tree-v2 (Virtualized Tree 虚拟树)
       if (currentNode.level === 1 && !currentNode.parent) {
         // el-tree-v2的第一层node是没有parent的，必需 treeData 创建一个parent

src/components/ReVxeTableBar/src/bar.tsx

@@ -52,7 +52,7 @@ const props = {
 export default defineComponent({
   name: "VxeTableBar",
   props,
-  emits: ["refresh"],
+  emits: ["refresh", "fullscreen"],
   setup(props, { emit, slots, attrs }) {
     const size = ref("small");
     const loading = ref(false);
@@ -113,6 +113,11 @@ export default defineComponent({
       props.vxeTableRef.refreshColumn();
     }
 
+    function onFullscreen() {
+      isFullscreen.value = !isFullscreen.value;
+      emit("fullscreen", isFullscreen.value);
+    }
+
     function reloadColumn() {
       const curCheckedColumns = cloneDeep(dynamicColumns.value).filter(item =>
         checkedColumns.value.includes(item.title)
@@ -369,7 +374,7 @@ export default defineComponent({
                 class={["w-[16px]", iconClass.value]}
                 icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
                 v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
-                onClick={() => (isFullscreen.value = !isFullscreen.value)}
+                onClick={() => onFullscreen()}
               />
             </div>
           </div>

src/layout/components/lay-footer/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { getConfig } from "@/config";
 
 const TITLE = getConfig("Title");
@@ -8,7 +8,7 @@ const TITLE = getConfig("Title");
   <footer
     class="layout-footer text-[rgba(0,0,0,0.6)] dark:text-[rgba(220,220,242,0.8)]"
   >
-    Copyright © 2020-present
+    Copyright © 2020-2024
     <a
       class="hover:text-primary"
       href="https://github.com/pure-admin"
@@ -16,12 +16,23 @@ const TITLE = getConfig("Title");
     >
       &nbsp;{{ TITLE }}
     </a>
+    <!-- <div class="ml-8">
+      <span>赞助商：</span>
+      <a
+        class="hover:text-primary"
+        href="https://ai-tools.cn/resume/start"
+        target="_blank"
+      >
+        二猫 AI 简历
+      </a>
+    </div> -->
   </footer>
 </template>
 
 <style lang="scss" scoped>
 .layout-footer {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   width: 100%;

src/layout/components/lay-notice/components/NoticeItem.vue

@@ -112,7 +112,7 @@ function hoverDescription(event, description) {
   max-width: 238px;
 }
 </style>
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .notice-container {
   display: flex;
   align-items: flex-start;

src/layout/components/lay-panel/index.vue

@@ -121,8 +121,8 @@ onBeforeUnmount(() => {
   width: 100%;
   max-width: 280px;
   box-shadow: 0 0 15px 0 rgb(0 0 0 / 5%);
-  transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
   transform: translate(100%);
+  transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
 }
 
 .show {

src/layout/components/lay-setting/index.vue

@@ -14,7 +14,6 @@ import { emitter } from "@/utils/mitt";
 import LayPanel from "../lay-panel/index.vue";
 import { useNav } from "@/layout/hooks/useNav";
 import { useAppStoreHook } from "@/store/modules/app";
-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";
@@ -50,9 +49,7 @@ const {
 if (unref(layoutTheme)) {
   const layout = unref(layoutTheme).layout;
   const theme = unref(layoutTheme).theme;
-  toggleTheme({
-    scopeName: `layout-theme-${theme}`
-  });
+  document.documentElement.setAttribute("data-theme", theme);
   setLayoutModel(layout);
 }
 

src/layout/components/lay-sidebar/components/SidebarItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import path from "path";
 import { getConfig } from "@/config";
+import { posix } from "path-browserify";
 import { menuType } from "@/layout/types";
 import { ReText } from "@/components/ReText";
 import { useNav } from "@/layout/hooks/useNav";
@@ -99,8 +99,7 @@ function resolvePath(routePath) {
   if (httpReg.test(routePath) || httpReg.test(props.basePath)) {
     return routePath || props.basePath;
   } else {
-    // 使用path.posix.resolve替代path.resolve 避免windows环境下使用electron出现盘符问题
-    return path.posix.resolve(props.basePath, routePath);
+    return posix.resolve(props.basePath, routePath);
   }
 }
 </script>

src/layout/components/lay-sidebar/components/SidebarLogo.vue

@@ -60,11 +60,11 @@ const { title, getLogo } = useNav();
       height: 32px;
       margin: 2px 0 0 12px;
       overflow: hidden;
+      text-overflow: ellipsis;
       font-size: 18px;
       font-weight: 600;
       line-height: 32px;
-      color: $subMenuActiveText;
-      text-overflow: ellipsis;
+      color: var(--pure-theme-sub-menu-active-text);
       white-space: nowrap;
     }
   }

src/layout/components/lay-tag/index.scss

@@ -59,10 +59,10 @@
       color: var(--el-color-primary);
       cursor: pointer;
       border-radius: 4px;
+      transform: translate(0, -50%);
       transition:
         background-color 0.12s,
         color 0.12s;
-      transform: translate(0, -50%);
 
       &:hover {
         color: rgb(0 0 0 / 88%) !important;
@@ -127,10 +127,10 @@
     font-weight: normal;
     color: var(--el-text-color-primary);
     white-space: nowrap;
+    outline: 0;
     list-style-type: none;
     background: #fff;
     border-radius: 4px;
-    outline: 0;
     box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
 
     li {

src/layout/components/lay-tag/index.vue

@@ -511,6 +511,7 @@ function tagOnClick(item) {
   } else {
     router.push({ path });
   }
+  emitter.emit("tagOnClick", item);
 }
 
 onClickOutside(contextmenuRef, closeMenu, {

src/layout/hooks/useDataThemeChange.ts

@@ -6,14 +6,9 @@ import { routerArrays } from "@/layout/types";
 import { router, resetRouter } from "@/router";
 import type { themeColorsType } from "../types";
 import { useAppStoreHook } from "@/store/modules/app";
-import { useGlobal, storageLocal } from "@pureadmin/utils";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
-import {
-  darken,
-  lighten,
-  toggleTheme
-} from "@pureadmin/theme/dist/browser-utils";
+import { darken, lighten, useGlobal, storageLocal } from "@pureadmin/utils";
 
 export function useDataThemeChange() {
   const { layoutTheme, layout } = useLayout();
@@ -54,9 +49,7 @@ export function useDataThemeChange() {
     isClick = true
   ) {
     layoutTheme.value.theme = theme;
-    toggleTheme({
-      scopeName: `layout-theme-${theme}`
-    });
+    document.documentElement.setAttribute("data-theme", theme);
     // 如果非isClick，保留之前的themeColor
     const storageThemeColor = $storage.layout.themeColor;
     $storage.layout = {

src/layout/index.vue

@@ -210,8 +210,8 @@ const LayHeader = defineComponent({
   height: 100%;
 
   &::after {
-    display: table;
     clear: both;
+    display: table;
     content: "";
   }
 

src/layout/theme/index.ts

@@ -1,129 +0,0 @@
-/**
- * @description ⚠️：此文件仅供主题插件使用，请不要在此文件中导出别的工具函数（仅在页面加载前运行）
- */
-
-import type { multipleScopeVarsOptions } from "@pureadmin/theme";
-
-/** 预设主题色 */
-const themeColors = {
-  /* 亮白色 */
-  light: {
-    subMenuActiveText: "#000000d9",
-    menuBg: "#fff",
-    menuHover: "#f6f6f6",
-    subMenuBg: "#fff",
-    subMenuActiveBg: "#e0ebf6",
-    menuText: "rgb(0 0 0 / 60%)",
-    sidebarLogo: "#fff",
-    menuTitleHover: "#000",
-    menuActiveBefore: "#4091f7"
-  },
-  /* 道奇蓝 */
-  default: {
-    subMenuActiveText: "#fff",
-    menuBg: "#001529",
-    menuHover: "rgb(64 145 247 / 15%)",
-    subMenuBg: "#0f0303",
-    subMenuActiveBg: "#4091f7",
-    menuText: "rgb(254 254 254 / 65%)",
-    sidebarLogo: "#002140",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#4091f7"
-  },
-  /* 深紫罗兰色 */
-  saucePurple: {
-    subMenuActiveText: "#fff",
-    menuBg: "#130824",
-    menuHover: "rgb(105 58 201 / 15%)",
-    subMenuBg: "#000",
-    subMenuActiveBg: "#693ac9",
-    menuText: "#7a80b4",
-    sidebarLogo: "#1f0c38",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#693ac9"
-  },
-  /* 深粉色 */
-  pink: {
-    subMenuActiveText: "#fff",
-    menuBg: "#28081a",
-    menuHover: "rgb(216 68 147 / 15%)",
-    subMenuBg: "#000",
-    subMenuActiveBg: "#d84493",
-    menuText: "#7a80b4",
-    sidebarLogo: "#3f0d29",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#d84493"
-  },
-  /* 猩红色 */
-  dusk: {
-    subMenuActiveText: "#fff",
-    menuBg: "#2a0608",
-    menuHover: "rgb(225 60 57 / 15%)",
-    subMenuBg: "#000",
-    subMenuActiveBg: "#e13c39",
-    menuText: "rgb(254 254 254 / 65.1%)",
-    sidebarLogo: "#42090c",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#e13c39"
-  },
-  /* 橙红色 */
-  volcano: {
-    subMenuActiveText: "#fff",
-    menuBg: "#2b0e05",
-    menuHover: "rgb(232 95 51 / 15%)",
-    subMenuBg: "#0f0603",
-    subMenuActiveBg: "#e85f33",
-    menuText: "rgb(254 254 254 / 65%)",
-    sidebarLogo: "#441708",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#e85f33"
-  },
-  /* 绿宝石 */
-  mingQing: {
-    subMenuActiveText: "#fff",
-    menuBg: "#032121",
-    menuHover: "rgb(89 191 193 / 15%)",
-    subMenuBg: "#000",
-    subMenuActiveBg: "#59bfc1",
-    menuText: "#7a80b4",
-    sidebarLogo: "#053434",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#59bfc1"
-  },
-  /* 酸橙绿 */
-  auroraGreen: {
-    subMenuActiveText: "#fff",
-    menuBg: "#0b1e15",
-    menuHover: "rgb(96 172 128 / 15%)",
-    subMenuBg: "#000",
-    subMenuActiveBg: "#60ac80",
-    menuText: "#7a80b4",
-    sidebarLogo: "#112f21",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#60ac80"
-  }
-};
-
-/**
- * @description 将预设主题色处理成主题插件所需格式
- */
-export const genScssMultipleScopeVars = (): multipleScopeVarsOptions[] => {
-  const result = [] as multipleScopeVarsOptions[];
-  Object.keys(themeColors).forEach(key => {
-    result.push({
-      scopeName: `layout-theme-${key}`,
-      varsContent: `
-        $subMenuActiveText: ${themeColors[key].subMenuActiveText} !default;
-        $menuBg: ${themeColors[key].menuBg} !default;
-        $menuHover: ${themeColors[key].menuHover} !default;
-        $subMenuBg: ${themeColors[key].subMenuBg} !default;
-        $subMenuActiveBg: ${themeColors[key].subMenuActiveBg} !default;
-        $menuText: ${themeColors[key].menuText} !default;
-        $sidebarLogo: ${themeColors[key].sidebarLogo} !default;
-        $menuTitleHover: ${themeColors[key].menuTitleHover} !default;
-        $menuActiveBefore: ${themeColors[key].menuActiveBefore} !default;
-      `
-    } as multipleScopeVarsOptions);
-  });
-  return result;
-};

src/plugins/i18n.ts

@@ -50,7 +50,7 @@ function getObjectKeys(obj) {
       if (obj[k] && isObject(obj[k])) {
         stack.push({ obj: obj[k], key: newKey });
       } else {
-        keys.add(newKey);
+        keys.add(key);
       }
     }
   }

src/router/enums.ts

@@ -1,33 +1,37 @@
 // 完整版菜单比较多，将 rank 抽离出来，在此方便维护
 
 const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以后端在返回 rank 的时候需要从非 0 开始
-  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,
-  mind = 22,
-  guide = 23,
-  menuoverflow = 24;
+  chatai = 1,
+  vueflow = 2,
+  ganttastic = 3,
+  components = 4,
+  able = 5,
+  table = 6,
+  form = 7,
+  list = 8,
+  result = 9,
+  error = 10,
+  frame = 11,
+  nested = 12,
+  permission = 13,
+  system = 14,
+  monitor = 15,
+  tabs = 16,
+  about = 17,
+  codemirror = 18,
+  markdown = 19,
+  editor = 20,
+  flowchart = 21,
+  formdesign = 22,
+  board = 23,
+  ppt = 24,
+  mind = 25,
+  guide = 26,
+  menuoverflow = 27;
 
 export {
   home,
+  chatai,
   vueflow,
   ganttastic,
   components,
@@ -44,6 +48,8 @@ export {
   monitor,
   tabs,
   about,
+  codemirror,
+  markdown,
   editor,
   flowchart,
   formdesign,

src/router/modules/able.ts

@@ -15,8 +15,7 @@ export default {
       name: "MqttClient",
       component: () => import("@/views/able/mqtt-client.vue"),
       meta: {
-        title: $t("menus.pureMqtt"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureMqtt")
       }
     },
     {

src/router/modules/chatai.ts

@@ -0,0 +1,22 @@
+import { chatai } from "@/router/enums";
+
+export default {
+  path: "/chatai",
+  redirect: "/chatai/index",
+  meta: {
+    icon: "ri:chat-search-line",
+    title: "chat-ai",
+    rank: chatai
+  },
+  children: [
+    {
+      path: "/chatai/index",
+      name: "ChatAi",
+      component: () => import("@/views/chatai/index.vue"),
+      meta: {
+        title: "chat-ai",
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;

src/router/modules/codemirror.ts

@@ -0,0 +1,23 @@
+import { $t } from "@/plugins/i18n";
+import { codemirror } from "@/router/enums";
+
+export default {
+  path: "/codemirror",
+  redirect: "/codemirror/index",
+  meta: {
+    icon: "ri:code-box-line",
+    title: $t("menus.pureCodeMirror"),
+    rank: codemirror
+  },
+  children: [
+    {
+      path: "/codemirror/index",
+      name: "CodeMirror",
+      component: () => import("@/views/codemirror/index.vue"),
+      meta: {
+        title: $t("menus.pureCodeMirror"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;

src/router/modules/components.ts

@@ -18,6 +18,14 @@ export default {
         title: $t("menus.pureDialog")
       }
     },
+    {
+      path: "/components/drawer",
+      name: "DrawerPage",
+      component: () => import("@/views/components/drawer/index.vue"),
+      meta: {
+        title: $t("menus.pureDrawer")
+      }
+    },
     {
       path: "/components/message",
       name: "Message",
@@ -39,8 +47,7 @@ export default {
       name: "CheckCard",
       component: () => import("@/views/components/check-card.vue"),
       meta: {
-        title: $t("menus.pureCheckCard"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureCheckCard")
       }
     },
     {
@@ -104,7 +111,15 @@ export default {
       name: "PureText",
       component: () => import("@/views/components/text.vue"),
       meta: {
-        title: $t("menus.pureText"),
+        title: $t("menus.pureText")
+      }
+    },
+    {
+      path: "/components/slider",
+      name: "PureSlider",
+      component: () => import("@/views/components/slider/index.vue"),
+      meta: {
+        title: $t("menus.pureSlider"),
         extraIcon: "IF-pure-iconfont-new svg"
       }
     },
@@ -121,8 +136,7 @@ export default {
       name: "CheckButton",
       component: () => import("@/views/components/check-button.vue"),
       meta: {
-        title: $t("menus.pureCheckButton"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureCheckButton")
       }
     },
     {

src/router/modules/form.ts

@@ -15,8 +15,7 @@ export default {
       name: "SchemaForm",
       component: () => import("@/views/schema-form/index.vue"),
       meta: {
-        title: $t("menus.pureSchemaForm"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureSchemaForm")
       }
     }
   ]

src/router/modules/ganttastic.ts

@@ -15,8 +15,7 @@ export default {
       name: "Ganttastic",
       component: () => import("@/views/ganttastic/index.vue"),
       meta: {
-        title: $t("menus.pureGanttastic"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureGanttastic")
       }
     }
   ]

src/router/modules/markdown.ts

@@ -0,0 +1,23 @@
+import { $t } from "@/plugins/i18n";
+import { markdown } from "@/router/enums";
+
+export default {
+  path: "/markdown",
+  redirect: "/markdown/index",
+  meta: {
+    icon: "ri:markdown-line",
+    title: $t("menus.pureMarkdown"),
+    rank: markdown
+  },
+  children: [
+    {
+      path: "/markdown/index",
+      name: "Markdown",
+      component: () => import("@/views/markdown/index.vue"),
+      meta: {
+        title: $t("menus.pureMarkdown"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;

src/router/modules/table.ts

@@ -31,8 +31,7 @@ export default {
       name: "PureTableEdit",
       component: () => import("@/views/table/edit.vue"),
       meta: {
-        title: $t("menus.pureTableEdit"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureTableEdit")
       }
     },
     {
@@ -40,8 +39,7 @@ export default {
       name: "VxeTable",
       component: () => import("@/views/table/virtual.vue"),
       meta: {
-        title: $t("menus.pureVxeTable"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureVxeTable")
       }
     }
   ]

src/router/modules/vueflow.ts

@@ -14,8 +14,7 @@ export default {
       name: "VueFlow",
       component: () => import("@/views/vue-flow/layouting/index.vue"),
       meta: {
-        title: "vue-flow",
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: "vue-flow"
       }
     }
   ]

src/store/modules/app.ts

@@ -8,8 +8,7 @@ import {
   responsiveStorageNameSpace
 } from "../utils";
 
-export const useAppStore = defineStore({
-  id: "pure-app",
+export const useAppStore = defineStore("pure-app", {
   state: (): appType => ({
     sidebar: {
       opened:

src/store/modules/epTheme.ts

@@ -6,8 +6,7 @@ import {
   responsiveStorageNameSpace
 } from "../utils";
 
-export const useEpThemeStore = defineStore({
-  id: "pure-epTheme",
+export const useEpThemeStore = defineStore("pure-epTheme", {
   state: () => ({
     epThemeColor:
       storageLocal().getItem<StorageConfigs>(

src/store/modules/multiTags.ts

@@ -14,8 +14,7 @@ import {
 } from "../utils";
 import { usePermissionStoreHook } from "./permission";
 
-export const useMultiTagsStore = defineStore({
-  id: "pure-multiTags",
+export const useMultiTagsStore = defineStore("pure-multiTags", {
   state: () => ({
     // 存储标签页信息（路由信息）
     multiTags: storageLocal().getItem<StorageConfigs>(
@@ -24,12 +23,12 @@ export const useMultiTagsStore = defineStore({
       ? storageLocal().getItem<StorageConfigs>(
           `${responsiveStorageNameSpace()}tags`
         )
-      : [
+      : ([
           ...routerArrays,
           ...usePermissionStoreHook().flatteningRoutes.filter(
             v => v?.meta?.fixedTag
           )
-        ],
+        ] as any),
     multiTagsCache: storageLocal().getItem<StorageConfigs>(
       `${responsiveStorageNameSpace()}configure`
     )?.multiTagsCache

src/store/modules/permission.ts

@@ -12,8 +12,7 @@ import {
 } from "../utils";
 import { useMultiTagsStoreHook } from "./multiTags";
 
-export const usePermissionStore = defineStore({
-  id: "pure-permission",
+export const usePermissionStore = defineStore("pure-permission", {
   state: () => ({
     // 静态路由生成的菜单
     constantMenus,
@@ -31,7 +30,7 @@ export const usePermissionStore = defineStore({
         filterTree(ascending(this.constantMenus.concat(routes)))
       );
       this.flatteningRoutes = formatFlatteningRoutes(
-        this.constantMenus.concat(routes)
+        this.constantMenus.concat(routes) as any
       );
     },
     cacheOperate({ mode, name }: cacheType) {

src/store/modules/settings.ts

@@ -1,8 +1,7 @@
 import { defineStore } from "pinia";
 import { type setType, store, getConfig } from "../utils";
 
-export const useSettingStore = defineStore({
-  id: "pure-setting",
+export const useSettingStore = defineStore("pure-setting", {
   state: (): setType => ({
     title: getConfig().Title,
     fixedHeader: getConfig().FixedHeader,

src/store/modules/user.ts

@@ -16,8 +16,7 @@ import {
 import { useMultiTagsStoreHook } from "./multiTags";
 import { type DataInfo, setToken, removeToken, userKey } from "@/utils/auth";
 
-export const useUserStore = defineStore({
-  id: "pure-user",
+export const useUserStore = defineStore("pure-user", {
   state: (): userType => ({
     // 头像
     avatar: storageLocal().getItem<DataInfo<number>>(userKey)?.avatar ?? "",

src/style/dark.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
 
 /* 整体暗色风格适配 */

src/style/element-plus.scss

@@ -83,8 +83,8 @@
   .el-upload-list__item.is-ready &.el-icon--close {
     width: 24px;
     height: 24px;
-    border-radius: 4px;
     outline: none;
+    border-radius: 4px;
     transition:
       background-color 0.2s,
       color 0.2s;
@@ -117,8 +117,8 @@
   }
 
   & .el-message__closeBtn {
-    border-radius: 4px;
     outline: none;
+    border-radius: 4px;
     transition:
       background-color 0.2s,
       color 0.2s;
@@ -163,9 +163,10 @@
 
 /* 仿 el-scrollbar 滚动条样式，支持大多数浏览器，如Chrome、Edge、Firefox、Safari等。整体暗色风格在 src/style/dark.scss 文件进行了适配 */
 .pure-scrollbar {
+  scrollbar-color: rgb(221 222 224) transparent; /* 滑块颜色、轨道颜色 */
+
   /* Firefox */
   scrollbar-width: thin; /* 可选值为 'auto', 'thin', 'none' */
-  scrollbar-color: rgb(221 222 224) transparent; /* 滑块颜色、轨道颜色 */
   ::-webkit-scrollbar {
     width: 6px; /* 滚动条宽度 */
   }

src/style/index.scss

@@ -1,7 +1,8 @@
-@import "./transition";
-@import "./element-plus";
-@import "./sidebar";
-@import "./dark";
+@use "theme";
+@use "transition";
+@use "element-plus";
+@use "sidebar";
+@use "dark";
 
 /* 自定义全局 CssVar */
 :root {
@@ -13,6 +14,16 @@
 
   /* switch关闭状态下的color 需要时可取用 */
   --pure-switch-off-color: #a6a6a6;
+
+  /** 主题色 */
+  --pure-theme-sub-menu-active-text: initial;
+  --pure-theme-menu-bg: none;
+  --pure-theme-menu-hover: none;
+  --pure-theme-sub-menu-bg: transparent;
+  --pure-theme-menu-text: initial;
+  --pure-theme-sidebar-logo: none;
+  --pure-theme-menu-title-hover: initial;
+  --pure-theme-menu-active-before: transparent;
 }
 
 /* 灰色模式 */

src/style/reset.scss

@@ -25,7 +25,8 @@ body {
   width: 100%;
   height: 100%;
   margin: 0;
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+  font-family:
+    "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
     "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
   line-height: inherit;
   -moz-osx-font-smoothing: grayscale;
@@ -57,8 +58,9 @@ code,
 kbd,
 samp,
 pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
   font-size: 1em;
 }
 

src/style/sidebar.scss

@@ -1,7 +1,5 @@
 /* $sideBarWidth: vertical 模式下主体内容距离网页文档左侧的距离 */
 @mixin merge-style($sideBarWidth) {
-  $menuActiveText: #7a80b4;
-
   @media screen and (width >= 150px) and (width <= 420px) {
     .app-main-nofixed-header {
       overflow-y: hidden;
@@ -94,7 +92,7 @@
     height: 100%;
     overflow: visible;
     font-size: 0;
-    background: $menuBg;
+    background: var(--pure-theme-menu-bg) !important;
     border-right: 1px solid var(--pure-border-color);
 
     /* 展开动画 */
@@ -150,11 +148,11 @@
     .el-menu-item,
     .el-sub-menu__title {
       height: 50px;
-      color: $menuText;
+      color: var(--pure-theme-menu-text);
       background-color: transparent !important;
 
       &:hover {
-        color: $menuTitleHover !important;
+        color: var(--pure-theme-menu-title-hover) !important;
       }
 
       div,
@@ -173,15 +171,15 @@
 
     .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;
 
       i {
-        color: $subMenuActiveText !important;
+        color: var(--pure-theme-sub-menu-active-text) !important;
       }
     }
 
     .is-active {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;
       transition: color 0.3s;
     }
 
@@ -193,8 +191,8 @@
     .el-menu-item.is-active.nest-menu::before {
       position: absolute;
       inset: 0 8px;
-      margin: 4px 0;
       clear: both;
+      margin: 4px 0;
       content: "";
       background: var(--el-color-primary) !important;
       border-radius: 3px;
@@ -204,7 +202,7 @@
     & .el-sub-menu .el-menu-item {
       min-width: $sideBarWidth !important;
       font-size: 14px;
-      background-color: $subMenuBg !important;
+      background-color: var(--pure-theme-sub-menu-bg) !important;
     }
 
     /* 有子集的激活菜单左侧小竖条 */
@@ -214,13 +212,13 @@
       position: absolute;
       top: 0;
       left: 0;
+      clear: both;
       width: 2px;
       height: 100%;
-      clear: both;
       content: "";
-      background-color: $menuActiveBefore;
-      transition: all var(--pure-transition-duration) ease-in-out;
+      background-color: var(--pure-theme-menu-active-before);
       transform: translateY(0);
+      transition: all var(--pure-transition-duration) ease-in-out;
     }
 
     .el-menu--collapse .outer-most.el-sub-menu > .el-sub-menu__title::before {
@@ -237,13 +235,14 @@
     .is-active.submenu-title-noDropdown.outer-most > * {
       z-index: 1;
       color: #fff;
+      background: transparent !important;
     }
 
     .is-active.submenu-title-noDropdown.outer-most::before {
       position: absolute;
       inset: 0 8px;
-      margin: 4px 0;
       clear: both;
+      margin: 4px 0;
       content: "";
       background: var(--el-color-primary) !important;
       border-radius: 3px;
@@ -253,7 +252,7 @@
   /* vertical 菜单折叠 */
   .el-menu--vertical {
     .el-menu--popup {
-      background-color: $subMenuBg !important;
+      background-color: var(--pure-theme-sub-menu-bg) !important;
 
       .el-menu-item {
         span {
@@ -271,10 +270,10 @@
 
     .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;
 
       i {
-        color: $subMenuActiveText !important;
+        color: var(--pure-theme-sub-menu-active-text) !important;
       }
     }
 
@@ -282,23 +281,23 @@
     .el-menu .el-sub-menu__title {
       min-width: $sideBarWidth !important;
       font-size: 14px;
-      background-color: $subMenuBg !important;
+      background-color: var(--pure-theme-sub-menu-bg) !important;
     }
 
     .el-menu-item,
     .el-sub-menu__title {
       height: 50px;
       line-height: 50px;
-      color: $menuText;
-      background-color: $subMenuBg;
+      color: var(--pure-theme-menu-text);
+      background-color: var(--pure-theme-sub-menu-bg);
 
       &:hover {
-        color: $menuTitleHover !important;
+        color: var(--pure-theme-menu-title-hover) !important;
       }
     }
 
     .is-active {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;
       transition: color 0.3s;
     }
 
@@ -342,15 +341,15 @@
     }
 
     .el-menu--popup {
-      background-color: $subMenuBg !important;
+      background-color: var(--pure-theme-sub-menu-bg) !important;
 
       a > .is-active.submenu-title-noDropdown {
         border-bottom: none;
       }
 
       .el-menu-item {
-        color: $menuText;
-        background-color: $subMenuBg;
+        color: var(--pure-theme-menu-text);
+        background-color: var(--pure-theme-sub-menu-bg);
 
         span {
           font-size: 14px;
@@ -358,7 +357,7 @@
       }
 
       .el-sub-menu__title {
-        color: $menuText;
+        color: var(--pure-theme-menu-text);
       }
     }
 
@@ -366,31 +365,31 @@
     .el-menu .el-sub-menu__title {
       min-width: $sideBarWidth !important;
       font-size: 14px;
-      background-color: $subMenuBg !important;
+      background-color: var(--pure-theme-sub-menu-bg) !important;
 
       &:hover {
-        color: $menuTitleHover !important;
+        color: var(--pure-theme-menu-title-hover) !important;
       }
     }
 
     .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;
 
       i {
-        color: $subMenuActiveText !important;
+        color: var(--pure-theme-sub-menu-active-text) !important;
       }
     }
 
     .nest-menu .el-sub-menu > .el-sub-menu__title,
     .el-menu-item {
       &:hover {
-        color: $menuTitleHover !important;
+        color: var(--pure-theme-menu-title-hover) !important;
       }
     }
 
     .el-menu-item.is-active {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;
       transition: color 0.3s;
     }
 
@@ -415,7 +414,7 @@
     justify-content: space-around;
     width: 100%;
     height: 48px;
-    background: $menuBg;
+    background: var(--pure-theme-menu-bg) !important;
 
     .horizontal-header-left {
       display: flex;
@@ -437,11 +436,11 @@
         height: 32px;
         margin: 2px 0 0 12px;
         overflow: hidden;
+        text-overflow: ellipsis;
         font-size: 18px;
         font-weight: 600;
         line-height: 32px;
-        color: $subMenuActiveText;
-        text-overflow: ellipsis;
+        color: var(--pure-theme-sub-menu-active-text);
         white-space: nowrap;
       }
     }
@@ -458,7 +457,7 @@
       align-items: center;
       justify-content: flex-end;
       min-width: 340px;
-      color: $subMenuActiveText;
+      color: var(--pure-theme-sub-menu-active-text);
 
       /* 搜索 */
       .search-container,
@@ -473,20 +472,20 @@
       /* 设置 */
       .set-icon {
         &:hover {
-          background: $menuHover;
+          background: var(--pure-theme-menu-hover);
         }
       }
 
       .dropdown-badge {
         height: 48px;
-        color: $subMenuActiveText;
+        color: var(--pure-theme-sub-menu-active-text);
       }
 
       .globalization {
         width: 40px;
         height: 48px;
         padding: 11px;
-        color: $subMenuActiveText;
+        color: var(--pure-theme-sub-menu-active-text);
         cursor: pointer;
         outline: none;
       }
@@ -497,7 +496,7 @@
         justify-content: space-around;
         height: 48px;
         padding: 10px;
-        color: $subMenuActiveText;
+        color: var(--pure-theme-sub-menu-active-text);
         cursor: pointer;
 
         p {
@@ -522,10 +521,10 @@
     .el-menu-item,
     .el-sub-menu__title {
       padding-right: var(--el-menu-base-level-padding);
-      color: $menuText;
+      color: var(--pure-theme-menu-text);
 
       &:hover {
-        color: $menuTitleHover !important;
+        color: var(--pure-theme-menu-title-hover) !important;
       }
     }
 
@@ -533,7 +532,7 @@
     .el-sub-menu__title {
       height: 48px;
       line-height: 48px;
-      background: $menuBg;
+      background: var(--pure-theme-menu-bg) !important;
 
       svg {
         position: static !important;
@@ -542,15 +541,15 @@
 
     .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;
 
       i {
-        color: $subMenuActiveText !important;
+        color: var(--pure-theme-sub-menu-active-text) !important;
       }
     }
 
     .is-active {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;
       transition: color 0.3s;
     }
   }
@@ -579,8 +578,8 @@
     &.hideSidebar {
       .sidebar-container {
         pointer-events: none;
-        transition-duration: 0.3s;
         transform: translate3d(-$sideBarWidth, 0, 0);
+        transition-duration: 0.3s;
       }
     }
   }
@@ -596,7 +595,7 @@ body[layout="vertical"] {
   }
 
   .sidebar-logo-container {
-    background: $sidebarLogo;
+    background: var(--pure-theme-sidebar-logo);
   }
 
   .hideSidebar {
@@ -623,10 +622,10 @@ body[layout="vertical"] {
       .el-sub-menu {
         & > .el-sub-menu__title {
           & > span {
+            visibility: visible;
             width: 100%;
             height: 100%;
             text-align: center;
-            visibility: visible;
           }
         }
       }
@@ -717,10 +716,10 @@ body[layout="mix"] {
           padding: 0;
 
           & > span {
+            visibility: visible;
             width: 100%;
             height: 100%;
             text-align: center;
-            visibility: visible;
           }
         }
       }

src/style/theme.scss

@@ -0,0 +1,95 @@
+/* 亮白色 */
+html[data-theme="light"] {
+  --pure-theme-sub-menu-active-text: #000000d9;
+  --pure-theme-menu-bg: #fff;
+  --pure-theme-menu-hover: #f6f6f6;
+  --pure-theme-sub-menu-bg: #fff;
+  --pure-theme-menu-text: rgb(0 0 0 / 60%);
+  --pure-theme-sidebar-logo: #fff;
+  --pure-theme-menu-title-hover: #000;
+  --pure-theme-menu-active-before: #4091f7;
+}
+
+/* 道奇蓝 */
+html[data-theme="default"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #001529;
+  --pure-theme-menu-hover: rgb(64 145 247 / 15%);
+  --pure-theme-sub-menu-bg: #0f0303;
+  --pure-theme-menu-text: rgb(254 254 254 / 65%);
+  --pure-theme-sidebar-logo: #002140;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #4091f7;
+}
+
+/* 深紫罗兰色 */
+html[data-theme="saucePurple"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #130824;
+  --pure-theme-menu-hover: rgb(105 58 201 / 15%);
+  --pure-theme-sub-menu-bg: #000;
+  --pure-theme-menu-text: #7a80b4;
+  --pure-theme-sidebar-logo: #1f0c38;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #693ac9;
+}
+
+/* 深粉色 */
+html[data-theme="pink"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #28081a;
+  --pure-theme-menu-hover: rgb(216 68 147 / 15%);
+  --pure-theme-sub-menu-bg: #000;
+  --pure-theme-menu-text: #7a80b4;
+  --pure-theme-sidebar-logo: #3f0d29;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #d84493;
+}
+
+/* 猩红色 */
+html[data-theme="dusk"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #2a0608;
+  --pure-theme-menu-hover: rgb(225 60 57 / 15%);
+  --pure-theme-sub-menu-bg: #000;
+  --pure-theme-menu-text: rgb(254 254 254 / 65.1%);
+  --pure-theme-sidebar-logo: #42090c;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #e13c39;
+}
+
+/* 橙红色 */
+html[data-theme="volcano"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #2b0e05;
+  --pure-theme-menu-hover: rgb(232 95 51 / 15%);
+  --pure-theme-sub-menu-bg: #0f0603;
+  --pure-theme-menu-text: rgb(254 254 254 / 65%);
+  --pure-theme-sidebar-logo: #441708;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #e85f33;
+}
+
+/* 绿宝石 */
+html[data-theme="mingQing"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #032121;
+  --pure-theme-menu-hover: rgb(89 191 193 / 15%);
+  --pure-theme-sub-menu-bg: #000;
+  --pure-theme-menu-text: #7a80b4;
+  --pure-theme-sidebar-logo: #053434;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #59bfc1;
+}
+
+/* 酸橙绿 */
+html[data-theme="auroraGreen"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #0b1e15;
+  --pure-theme-menu-hover: rgb(96 172 128 / 15%);
+  --pure-theme-sub-menu-bg: #000;
+  --pure-theme-menu-text: #7a80b4;
+  --pure-theme-sidebar-logo: #112f21;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #60ac80;
+}

src/utils/mitt.ts

@@ -4,10 +4,11 @@ import mitt from "mitt";
 /** 全局公共事件需要在此处添加类型 */
 type Events = {
   openPanel: string;
-  tagViewsChange: string;
-  tagViewsShowModel: string;
+  tagOnClick: string;
   logoChange: boolean;
+  tagViewsChange: string;
   changLayoutRoute: string;
+  tagViewsShowModel: string;
   imageInfo: {
     img: HTMLImageElement;
     height: number;

src/utils/print.ts

@@ -9,6 +9,7 @@ const Print = function (dom, options?: object): PrintFunction {
   options = options || {};
   // @ts-expect-error
   if (!(this instanceof Print)) return new Print(dom, options);
+  // @ts-expect-error
   this.conf = {
     styleStr: "",
     // Elements that need to dynamically get and set the height
@@ -18,19 +19,26 @@ const Print = function (dom, options?: object): PrintFunction {
     // Callback after printing
     printDoneCallBack: null
   };
+  // @ts-expect-error
   for (const key in this.conf) {
     if (key && options.hasOwnProperty(key)) {
+      // @ts-expect-error
       this.conf[key] = options[key];
     }
   }
   if (typeof dom === "string") {
+    // @ts-expect-error
     this.dom = document.querySelector(dom);
   } else {
+    // @ts-expect-error
     this.dom = this.isDOM(dom) ? dom : dom.$el;
   }
+  // @ts-expect-error
   if (this.conf.setDomHeightArr && this.conf.setDomHeightArr.length) {
+    // @ts-expect-error
     this.setDomHeight(this.conf.setDomHeightArr);
   }
+  // @ts-expect-error
   this.init();
 };
 
@@ -172,7 +180,7 @@ Print.prototype = {
           if (!frameWindow.document.execCommand("print", false, null)) {
             frameWindow.print();
           }
-        } catch (e) {
+        } catch {
           frameWindow.print();
         }
         frameWindow.close();

src/views/able/video-frame/index.vue

@@ -170,7 +170,7 @@ onBeforeUnmount(() => {
   </el-card>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 ::v-deep(.el-upload-dragger) {
   display: flex;
   align-items: center;

src/views/about/columns.tsx

@@ -82,7 +82,7 @@ export function useColumns() {
       className: "pure-version",
       cellRenderer: () => {
         return (
-          <a href="https://pure-admin.github.io/pure-admin-doc" target="_blank">
+          <a href="https://pure-admin.cn/" target="_blank">
             <span style="color: var(--el-color-primary)">文档链接</span>
           </a>
         );

src/views/account-settings/index.vue

@@ -131,7 +131,7 @@ getMine().then(res => {
 
 <style lang="scss">
 .pure-account-settings {
-  background: $menuBg;
+  background: var(--pure-theme-menu-bg) !important;
 }
 
 .pure-account-settings-menu {
@@ -140,12 +140,12 @@ getMine().then(res => {
 
   .el-menu-item {
     height: 48px !important;
-    color: $menuText;
+    color: var(--pure-theme-menu-text);
     background-color: transparent !important;
     transition: color 0.2s;
 
     &:hover {
-      color: $menuTitleHover !important;
+      color: var(--pure-theme-menu-title-hover) !important;
     }
 
     &.is-active {
@@ -158,8 +158,8 @@ getMine().then(res => {
       &::before {
         position: absolute;
         inset: 0 8px;
-        margin: 4px 0;
         clear: both;
+        margin: 4px 0;
         content: "";
         background: var(--el-color-primary);
         border-radius: 3px;

src/views/chatai/components/Bard.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="
+      background-color: #f3f6fc;
+      border-color: #dcdcdc;
+      border-radius: 10px;
+    "
+    :textInput="{
+      styles: {
+        container: {
+          borderRadius: '20px',
+          border: '1px solid #969696',
+          boxShadow: 'unset',
+          width: '78%',
+          marginLeft: '-15px'
+        },
+        text: { padding: '10px', paddingLeft: '15px', paddingRight: '34px' }
+      },
+      placeholder: { text: '发送消息', style: { color: '#bcbcbc' } }
+    }"
+    :messageStyles="{
+      default: {
+        shared: {
+          bubble: {
+            maxWidth: '100%',
+            backgroundColor: 'unset',
+            marginTop: '10px',
+            marginBottom: '10px'
+          }
+        },
+        user: { bubble: { marginLeft: '0px', color: 'black' } },
+        ai: {
+          innerContainer: { borderRadius: '15px', backgroundColor: 'white' }
+        }
+      }
+    }"
+    :avatars="{
+      default: {
+        styles: {
+          position: 'left',
+          container: { marginLeft: '12px', marginRight: '5px' }
+        }
+      },
+      ai: {
+        src: 'https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/chatai/gemini.png',
+        styles: { position: 'left', avatar: { paddingTop: '6px' } }
+      }
+    }"
+    :speechToText="{
+      webSpeech: { language: 'zh-CN' },
+      button: {
+        default: {
+          container: {
+            default: {
+              bottom: '1em',
+              right: '0.6em',
+              borderRadius: '20px',
+              width: '1.9em',
+              height: '1.9em'
+            }
+          },
+          svg: { styles: { default: { bottom: '0.35em', left: '0.35em' } } }
+        },
+        position: 'inside-right'
+      }
+    }"
+    :submitButtonStyles="{
+      position: 'outside-right',
+      submit: {
+        container: {
+          default: {
+            bottom: '0.9em',
+            borderRadius: '25px',
+            padding: '6px 5px 4px',
+            backgroundColor: '#f3f6fc'
+          },
+          hover: { backgroundColor: '#b0deff4f' },
+          click: { backgroundColor: '#b0deffb5' }
+        },
+        svg: {
+          content:
+            '<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <svg viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;><path d=&quot;m21.426 11.095-17-8A.999.999 0 0 0 3.03 4.242L4.969 12 3.03 19.758a.998.998 0 0 0 1.396 1.147l17-8a1 1 0 0 0 0-1.81zM5.481 18.197l.839-3.357L12 12 6.32 9.16l-.839-3.357L18.651 12l-13.17 6.197z&quot;/></svg>',
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(10%) sepia(86%) saturate(6044%) hue-rotate(205deg) brightness(100%) contrast(100%)'
+            }
+          }
+        }
+      },
+      loading: {
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)'
+            }
+          }
+        }
+      },
+      stop: {
+        container: { hover: { backgroundColor: '#ededed' } },
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(59%) sepia(0%) saturate(0%) hue-rotate(348deg) brightness(96%) contrast(93%)'
+            }
+          }
+        }
+      }
+    }"
+    :history="[
+      { text: '韩信是谁？', role: 'user' },
+      {
+        text: '韩信（约前231年－前196年），是秦末汉初时期的杰出军事家和战略家，被后世誉为“兵仙”。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>

src/views/chatai/components/Bing.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="
+      background: linear-gradient(
+        90deg,
+        rgb(239 242 247) 0%,
+        7.6029%,
+        rgb(237 240 249) 15.2057%,
+        20.7513%,
+        rgb(235 239 248) 26.297%,
+        27.6386%,
+        rgb(235 239 248) 28.9803%,
+        38.2826%,
+        rgb(231 237 249) 47.585%,
+        48.1216%,
+        rgb(230 236 250) 48.6583%,
+        53.1306%,
+        rgb(228 236 249) 57.6029%,
+        61.5385%,
+        rgb(227 234 250) 65.4741%,
+        68.7835%,
+        rgb(222 234 250) 72.093%,
+        75.7603%,
+        rgb(219 230 248) 79.4275%,
+        82.8265%,
+        rgb(216 229 248) 86.2254%,
+        87.8354%,
+        rgb(213 228 249) 89.4454%,
+        91.8605%,
+        rgb(210 226 249) 94.2755%,
+        95.4383%,
+        rgb(209 225 248) 96.6011%,
+        98.3005%,
+        rgb(208 224 247) 100%
+      );
+      border-color: #e4e4e4;
+      border-radius: 10px;
+    "
+    :textInput="{
+      styles: {
+        container: {
+          borderRadius: '20px',
+          border: 'unset',
+          width: '78%',
+          marginLeft: '-15px',
+          boxShadow:
+            '0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16)'
+        },
+        text: { padding: '10px', paddingLeft: '15px', paddingRight: '34px' }
+      },
+      placeholder: { text: '发送消息', style: { color: '#606060' } }
+    }"
+    :messageStyles="{
+      default: {
+        shared: {
+          bubble: {
+            backgroundColor: 'unset',
+            marginTop: '10px',
+            marginBottom: '10px',
+            boxShadow:
+              '0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16)'
+          }
+        },
+        user: {
+          bubble: {
+            background: 'linear-gradient(130deg, #2870EA 20%, #1B4AEF 77.5%)'
+          }
+        },
+        ai: { bubble: { background: 'rgba(255,255,255,0.7)' } }
+      }
+    }"
+    :submitButtonStyles="{
+      position: 'outside-right',
+      submit: {
+        container: {
+          default: {
+            bottom: '0.8em',
+            borderRadius: '25px',
+            padding: '6px 5px 4px',
+            backgroundColor: 'unset'
+          },
+          hover: { backgroundColor: '#b0deff4f' },
+          click: { backgroundColor: '#b0deffb5' }
+        },
+        svg: {
+          content:
+            '<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <svg viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;><path d=&quot;m21.426 11.095-17-8A.999.999 0 0 0 3.03 4.242L4.969 12 3.03 19.758a.998.998 0 0 0 1.396 1.147l17-8a1 1 0 0 0 0-1.81zM5.481 18.197l.839-3.357L12 12 6.32 9.16l-.839-3.357L18.651 12l-13.17 6.197z&quot;/></svg>',
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(10%) sepia(86%) saturate(6044%) hue-rotate(205deg) brightness(100%) contrast(100%)'
+            }
+          }
+        }
+      },
+      loading: {
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)'
+            }
+          }
+        }
+      },
+      stop: {
+        container: { hover: { backgroundColor: '#ededed94' } },
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)'
+            }
+          }
+        }
+      }
+    }"
+    :history="[
+      { text: '赵云是谁？', role: 'user' },
+      {
+        text: '赵云（约168年－229年），字子龙，是三国时期蜀汉的重要将领，以其忠诚和勇敢著称。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>

src/views/chatai/components/Blue.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="
+      border-radius: 10px;
+      border: unset;
+      background-image: url(&quot;https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/chatai/blue.jpg&quot;);
+      background-size: cover;
+    "
+    :messageStyles="{
+      default: {
+        user: {
+          bubble: { backgroundColor: '#2670ff' }
+        },
+        ai: { bubble: { backgroundColor: '#004f97', color: 'white' } }
+      }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(60%) sepia(79%) saturate(643%) hue-rotate(185deg) brightness(102%) contrast(100%)'
+            }
+          }
+        }
+      }
+    }"
+    :textInput="{
+      styles: {
+        container: {
+          backgroundColor: '#004f97',
+          color: 'white',
+          boxShadow: 'unset'
+        }
+      },
+      placeholder: { text: '发送消息', style: { color: '#d1d1d1' } }
+    }"
+    auxiliaryStyle="
+    ::-webkit-scrollbar-thumb {
+      background-color: #0174db;
+    }
+    ::-webkit-scrollbar-track {
+      background-color: unset;
+    }"
+    :history="[
+      { text: '熬夜都有哪些坏处？', role: 'user' },
+      {
+        text: '熬夜会损害身体健康，导致免疫力下降、精神不振和工作效率降低。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>

src/views/chatai/components/ChatGPT.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="border-radius: 10px"
+    :messageStyles="{
+      default: {
+        shared: {
+          bubble: {
+            maxWidth: '100%',
+            backgroundColor: 'unset',
+            marginTop: '10px',
+            marginBottom: '10px'
+          }
+        },
+        user: {
+          bubble: {
+            marginLeft: '0px',
+            color: 'black'
+          }
+        },
+        ai: {
+          outerContainer: {
+            backgroundColor: 'rgba(247,247,248)',
+            borderTop: '1px solid rgba(0,0,0,.1)',
+            borderBottom: '1px solid rgba(0,0,0,.1)'
+          }
+        }
+      }
+    }"
+    :avatars="{
+      default: { styles: { position: 'left' } },
+      ai: { src: 'https://xiaoxian521.github.io/hyperlink/svg/openai.svg' }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        container: {
+          default: {
+            padding: '1px 0 0 5px',
+            backgroundColor: '#19c37d'
+          },
+          hover: { backgroundColor: '#0bab69' },
+          click: { backgroundColor: '#068e56' }
+        },
+        svg: {
+          content:
+            '<?xml version=&quot;1.0&quot; ?> <svg viewBox=&quot;0 0 28 28&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;> <g> <path d=&quot;M21.66,12a2,2,0,0,1-1.14,1.81L5.87,20.75A2.08,2.08,0,0,1,5,21a2,2,0,0,1-1.82-2.82L5.46,13H11a1,1,0,0,0,0-2H5.46L3.18,5.87A2,2,0,0,1,5.86,3.25h0l14.65,6.94A2,2,0,0,1,21.66,12Z&quot;> </path> </g> </svg>',
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(100%) sepia(28%) saturate(2%) hue-rotate(69deg) brightness(107%) contrast(100%)'
+            }
+          }
+        }
+      },
+      loading: {
+        container: { default: { backgroundColor: 'white' } },
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)'
+            }
+          }
+        }
+      },
+      stop: {
+        container: {
+          default: { backgroundColor: 'white' },
+          hover: { backgroundColor: '#dadada52' }
+        },
+        svg: {
+          content:
+            '<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <svg viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;> <rect width=&quot;24&quot; height=&quot;24&quot; rx=&quot;4&quot; ry=&quot;4&quot; /> </svg>',
+          styles: {
+            default: {
+              width: '0.95em',
+              marginTop: '0.32em',
+              filter:
+                'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)'
+            }
+          }
+        }
+      }
+    }"
+    :textInput="{ placeholder: { text: '发送消息' } }"
+    :history="[
+      { text: '李白是谁？', role: 'user' },
+      {
+        text: '李白（701年2月28日－762年），号青莲居士，又号“谪仙人”，是唐代著名的浪漫主义诗人，被后人誉为“诗仙”。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>

src/views/chatai/components/Dark.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="background-color: #292929; border: unset; border-radius: 10px"
+    :messageStyles="{
+      default: {
+        ai: { bubble: { backgroundColor: '#545454', color: 'white' } }
+      },
+      loading: {
+        message: {
+          styles: {
+            bubble: { backgroundColor: '#545454', color: 'white' }
+          }
+        }
+      }
+    }"
+    :textInput="{
+      styles: {
+        container: {
+          backgroundColor: '#666666',
+          border: 'unset',
+          color: '#e8e8e8'
+        }
+      },
+      placeholder: {
+        text: '发送消息',
+        style: { color: '#bcbcbc' }
+      }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        container: {
+          default: { bottom: '0.7rem' }
+        },
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(70%) sepia(52%) saturate(5617%) hue-rotate(185deg) brightness(101%) contrast(101%)'
+            }
+          }
+        }
+      }
+    }"
+    auxiliaryStyle="
+    ::-webkit-scrollbar {
+      width: 10px;
+      height: 10px;
+    }
+    ::-webkit-scrollbar-thumb {
+      background-color: grey;
+      border-radius: 5px;
+    }
+    ::-webkit-scrollbar-track {
+      background-color: unset;
+    }"
+    :history="[
+      { text: '什么水果适合减脂期间吃？', role: 'user' },
+      {
+        text: '减脂期间适合吃苹果、柑橘类水果、蓝莓和草莓等低热量、高纤维的水果，有助于增加饱腹感并促进新陈代谢。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>

src/views/chatai/components/FullInput.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="border-radius: 10px"
+    :textInput="{
+      styles: {
+        container: {
+          width: '100%',
+          margin: '0',
+          border: 'unset',
+          borderTop: '1px solid #d5d5d5',
+          borderRadius: '0px',
+          boxShadow: 'unset'
+        },
+        text: {
+          fontSize: '1.05em',
+          paddingTop: '11px',
+          paddingBottom: '13px',
+          paddingLeft: '12px',
+          paddingRight: '2.4em'
+        }
+      },
+      placeholder: { text: '发送消息', style: { color: '#bcbcbc' } }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        container: {
+          default: {
+            transform: 'scale(1.21)',
+            marginBottom: '-3px',
+            marginRight: '0.4em'
+          }
+        }
+      }
+    }"
+    :history="[
+      { text: '预防心梗、脑梗的方法？', role: 'user' },
+      {
+        text: '预防心梗和脑梗的关键方法包括保持健康的生活方式，如均衡饮食、定期锻炼、控制血压和血脂、戒烟限酒以及管理压力。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>

src/views/chatai/components/Group.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    auxiliaryStyle="
+    .deep-chat-top-message .message-bubble {
+        border-top-left-radius: 5px !important;
+        border-top-right-radius: 5px !important;
+    }
+    .deep-chat-middle-message .message-bubble {
+        margin-top: 0px;
+    }
+    .deep-chat-bottom-message .message-bubble {
+        margin-top: 0px;
+        border-bottom-left-radius: 5px !important;
+        border-bottom-right-radius: 5px !important;
+    }
+    .deep-chat-top-message.deep-chat-bottom-message .message-bubble {
+      margin-top: 10px;
+    }"
+    :messageStyles="{
+      default: {
+        shared: {
+          bubble: {
+            borderRadius: '0px'
+          }
+        }
+      }
+    }"
+    :textInput="{
+      placeholder: { text: '发送消息' }
+    }"
+    :history="[
+      { text: '组1', role: 'group1' },
+      { text: '组2-1', role: 'group2' },
+      { text: '组2-2', role: 'group2' },
+      { text: '组2-3', role: 'group2' },
+      { text: '组3-1', role: 'group3' },
+      { text: '组3-2', role: 'group3' }
+    ]"
+    :demo="true"
+  />
+</template>

src/views/chatai/components/IntroPanel.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    :textInput="{
+      placeholder: { text: '发送消息' }
+    }"
+    demo="true"
+    style="border-radius: 8px"
+  >
+    <div
+      style="
+        display: none;
+        width: 200px;
+        padding: 12px;
+        padding-bottom: 15px;
+        background-color: #f3f3f3;
+        border-radius: 10px;
+      "
+    >
+      <div>
+        <div style="margin-bottom: 8px; font-size: 16px; text-align: center">
+          <b>简介面板</b>
+        </div>
+        <div style="font-size: 15px; line-height: 20px">
+          插入描述以帮助您的用户了解如何使用该组件
+        </div>
+      </div>
+    </div>
+  </deep-chat>
+</template>

src/views/chatai/components/LoFi.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="
+      border-radius: 10px;
+      border: unset;
+      background-image: url(&quot;https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/chatai/lofi.png&quot;);
+      background-size: cover;
+    "
+    :messageStyles="{
+      default: {
+        user: {
+          bubble: {
+            background:
+              'linear-gradient(90deg, rgb(225 37 255) 0%, rgb(161, 99, 233) 100%)',
+            color: 'white'
+          }
+        },
+        ai: {
+          bubble: {
+            background:
+              'linear-gradient(90deg, rgb(0, 162, 255) 30%, rgb(197 119 255) 100%)',
+            color: 'white'
+          }
+        }
+      },
+      loading: {
+        message: {
+          styles: {
+            bubble: {
+              background:
+                'linear-gradient(90deg, rgb(0, 162, 255) 30%, rgb(197 119 255) 100%)',
+              color: 'white'
+            }
+          }
+        }
+      }
+    }"
+    :textInput="{
+      placeholder: { text: '发送消息' },
+      styles: {
+        container: {
+          backgroundColor: 'rgb(239 245 255)',
+          color: '#0d008d'
+        }
+      }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(26%) sepia(95%) saturate(6989%) hue-rotate(288deg) brightness(107%) contrast(122%)'
+            }
+          }
+        }
+      }
+    }"
+    auxiliaryStyle="
+    ::-webkit-scrollbar {
+      width: 10px;
+      height: 10px;
+    }
+    ::-webkit-scrollbar-thumb {
+      background-color: #54a7ff;
+      border-radius: 5px;
+    }
+    ::-webkit-scrollbar-track {
+      background-color: unset;
+    }"
+    :history="[
+      { text: '公认的最减肥运动推荐一个？', role: 'user' },
+      {
+        text: '公认的最减肥运动之一是高强度间歇训练（HIIT），它通过短时间内的高强度运动和短暂休息交替进行，不仅在运动过程中燃烧大量卡路里，还能通过“后燃效应”让身体在运动结束后继续消耗热量。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>

src/views/chatai/components/MessageCode.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+import hljs from "highlight.js";
+// @ts-expect-error
+window.hljs = hljs;
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="border-radius: 8px"
+    :history="[
+      {
+        text: '```java\nwhile (i < 5) {\n console.log(&quot;hi&quot;);\n i+= 1;\n}\n```',
+        role: 'ai'
+      }
+    ]"
+    :textInput="{
+      placeholder: { text: '发送消息' }
+    }"
+    :messageStyles="{
+      default: {
+        shared: {
+          bubble: { maxWidth: '270px' }
+        }
+      }
+    }"
+    :demo="true"
+  />
+</template>

src/views/chatai/components/Red.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    :messageStyles="{
+      default: { user: { bubble: { backgroundColor: '#ff2020' } } }
+    }"
+    :avatars="{
+      ai: {
+        src: 'https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/chatai/robot.png'
+      }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(15%) sepia(50%) saturate(6203%) hue-rotate(352deg) brightness(111%) contrast(127%)'
+            }
+          }
+        }
+      }
+    }"
+    :textInput="{
+      styles: {
+        container: {
+          border: '1px solid #ffd9d9',
+          backgroundColor: '#fffcfc'
+        }
+      },
+      placeholder: { text: '发送消息' }
+    }"
+    auxiliaryStyle="
+    ::-webkit-scrollbar-thumb {
+      background-color: red;
+    }"
+    :history="[
+      { text: '健身的最佳时间？', role: 'user' },
+      {
+        text: '健身的最佳时间是根据个人作息和偏好而定，但一般建议在下午或傍晚进行锻炼以达到最佳状态。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>

src/views/chatai/components/Speech.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="border-radius: 8px"
+    :speechToText="{
+      webSpeech: { language: 'zh-CN' },
+      button: { position: 'outside-left' }
+    }"
+    :textInput="{
+      placeholder: { text: '发送消息' }
+    }"
+    :introMessage="{
+      text: '单击左下角麦克风开始转录您的讲话。'
+    }"
+    :demo="true"
+  />
+</template>

src/views/chatai/components/iMessage.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="
+      border-radius: 10px;
+      font-size: 16px;
+      font-family:
+        system-ui, &quot;Segoe UI&quot;, Roboto, Helvetica, Arial, sans-serif,
+        &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;,
+        &quot;Segoe UI Symbol&quot;;
+    "
+    :messageStyles="{
+      default: {
+        shared: {
+          bubble: {
+            maxWidth: '75%',
+            borderRadius: '1em',
+            padding: '.42em .7em',
+            fontSize: '15px'
+          }
+        },
+        user: { bubble: { backgroundColor: '#00c82a' } }
+      },
+      loading: {
+        message: {
+          styles: {
+            bubble: { padding: '0.6em 0.75em 0.6em 1.3em' }
+          }
+        }
+      }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        container: {
+          default: {
+            width: '0.95em',
+            height: '0.95em',
+            justifyContent: 'center',
+            display: 'flex',
+            borderRadius: '25px',
+            padding: '0.3em',
+            backgroundColor: '#00c82a'
+          }
+        },
+        svg: {
+          content:
+            '<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 115.4 122.88&quot;><path d=&quot;M24.94,67.88A14.66,14.66,0,0,1,4.38,47L47.83,4.21a14.66,14.66,0,0,1,20.56,0L111,46.15A14.66,14.66,0,0,1,90.46,67.06l-18-17.69-.29,59.17c-.1,19.28-29.42,19-29.33-.25L43.14,50,24.94,67.88Z&quot;/></svg>',
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(315deg) brightness(99%) contrast(102%)',
+              transform: 'scale(0.95)'
+            }
+          }
+        }
+      }
+    }"
+    :textInput="{
+      placeholder: { text: '发送消息' },
+      styles: {
+        container: {
+          boxShadow: 'none',
+          borderRadius: '1em',
+          border: '1px solid rgba(0,0,0,0.2)'
+        },
+        text: {
+          padding: '0.4em 0.8em',
+          paddingRight: '2.5em'
+        }
+      }
+    }"
+    :images="true"
+    :dropupStyles="{
+      button: {
+        styles: {
+          container: {
+            default: {
+              width: '1.6em',
+              height: '1.6em',
+              borderRadius: '25px',
+              backgroundColor: '#8282821a'
+            }
+          },
+          svg: {
+            styles: {
+              default: {
+                width: '1em',
+                left: '5px',
+                top: '0.2em',
+                filter:
+                  'brightness(0) saturate(100%) invert(56%) sepia(0%) saturate(2755%) hue-rotate(104deg) brightness(96%) contrast(93%)'
+              }
+            },
+            content:
+              '<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?><svg viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;><path d=&quot;M3,11h8V3a1,1,0,0,1,2,0v8h8a1,1,0,0,1,0,2H13v8a1,1,0,0,1-2,0V13H3a1,1,0,0,1,0-2Z&quot;/></svg>'
+          }
+        }
+      }
+    }"
+    :attachmentContainerStyle="{
+      backgroundColor: 'rgba(255, 255, 255, 0.6)',
+      borderRadius: '5px 5px 0 0',
+      border: '1px solid rgba(0,0,0,0.2)',
+      top: '-2.6em',
+      height: '4em'
+    }"
+    :history="[
+      { text: '钓鱼需要准备什么东西？', role: 'user' },
+      {
+        text: '钓鱼需要准备鱼竿、渔轮、钓线、鱼钩、浮漂、铅坠和适合的饵料。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>

src/views/chatai/components/index.ts

@@ -0,0 +1,13 @@
+export { default as ChatGPT } from "./ChatGPT.vue";
+export { default as Bard } from "./Bard.vue";
+export { default as Bing } from "./Bing.vue";
+export { default as iMessage } from "./iMessage.vue";
+export { default as Blue } from "./Blue.vue";
+export { default as LoFi } from "./LoFi.vue";
+export { default as Red } from "./Red.vue";
+export { default as Dark } from "./Dark.vue";
+export { default as FullInput } from "./FullInput.vue";
+export { default as Group } from "./Group.vue";
+export { default as MessageCode } from "./MessageCode.vue";
+export { default as Speech } from "./Speech.vue";
+export { default as IntroPanel } from "./IntroPanel.vue";

src/views/chatai/index.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { h } from "vue";
+import { ElEmpty } from "element-plus";
+import { deviceDetection } from "@pureadmin/utils";
+import {
+  ChatGPT,
+  Bard,
+  Bing,
+  iMessage,
+  Blue,
+  LoFi,
+  Red,
+  Dark,
+  FullInput,
+  Group,
+  MessageCode,
+  Speech,
+  IntroPanel
+} from "./components";
+
+defineOptions({
+  name: "ChatAi"
+});
+
+const swiperExample: any[] = [
+  { id: 0, label: "ChatGPT 风格", component: ChatGPT },
+  {
+    id: 1,
+    label: "Gemini 风格",
+    component: Bard
+  },
+  {
+    id: 2,
+    label: "BingChat 风格",
+    component: Bing
+  },
+  {
+    id: 3,
+    label: "iMessage 风格",
+    component: iMessage
+  },
+  {
+    id: 4,
+    label: "蓝色主题且可设置背景图像",
+    component: Blue
+  },
+  {
+    id: 5,
+    label: "渐变主题且可设置背景图像",
+    component: LoFi
+  },
+  {
+    id: 6,
+    label: "红色风格",
+    component: Red
+  },
+  {
+    id: 7,
+    label: "深色模式",
+    component: Dark
+  },
+  {
+    id: 8,
+    label: "全宽输入框",
+    component: FullInput
+  },
+  {
+    id: 9,
+    label: "分组消息",
+    component: Group
+  },
+  {
+    id: 10,
+    label: "代码消息",
+    component: MessageCode
+  },
+  {
+    id: 11,
+    label: "语音输入",
+    component: Speech
+  },
+  {
+    id: 12,
+    label: "简介面板",
+    component: IntroPanel
+  },
+  {
+    id: 13,
+    label: "更多示例",
+    component: h(ElEmpty, {
+      description: "敬请期待",
+      style: { minWidth: "320px", height: "350px" }
+    })
+  }
+];
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          Ai聊天组件，采用开源的
+          <el-link
+            href="https://deepchat.dev/"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            deep-chat
+          </el-link>
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/chatai"
+        target="_blank"
+      >
+        代码位置 src/views/chatai
+      </el-link>
+    </template>
+    <el-space wrap>
+      <el-card
+        v-for="item in swiperExample"
+        :key="item.id"
+        :class="['mt-4', !deviceDetection() && 'ml-16']"
+      >
+        <template #header>
+          {{ item.label }}
+        </template>
+        <component :is="item.component" />
+      </el-card>
+    </el-space>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-card__body) {
+  overflow: auto;
+}
+
+@media screen and (width <= 750px) {
+  :deep(.el-card__body) {
+    padding: 12px;
+  }
+
+  .main-content {
+    margin: 0 !important;
+  }
+}
+</style>