Compare commits

...

25 Commits

Author SHA1 Message Date
xiaoxian521
ab1c7f8bcc refactor: 升级tailwindcssv4版本,带来更快的构建速度、更简化的安装和配置、提供专属vite插件 2025-03-16 19:46:35 +08:00
xiaoxian521
b87eb6fd0a chore: 升级依赖 2025-01-15 12:10:39 +08:00
xiaoxian521
a0246e31df feat: 添加tagOnClick标签切换全局公共事件 2025-01-09 16:20:31 +08:00
xiaoxian521
e1cd14a946 chore: 升级依赖,相关兼容处理(主要是typescriptvue-tsc升级最新版) 2025-01-09 15:55:45 +08:00
xiaoxian521
02380f69e1 chore: 优化src/style/dark.scss语法 2025-01-07 17:21:00 +08:00
可能
5208272456 chore: 优化登录传参 (#1197) 2025-01-06 14:30:43 +08:00
xiaoming
551292078e fix: 修复aria-hidden报错 (#1192) 2025-01-04 02:19:38 +08:00
XiaoYue
79cd159154 chore: 使用keydown替换keypresskeypress事件已弃用 (#1195) 2024-12-27 09:55:28 +08:00
xiaoming
6d26300181 feat: 添加代码编辑器示例 (#1194) 2024-12-24 09:14:43 +08:00
xiaoming
0dd6665b2a feat: 添加Markdown示例 (#1193) 2024-12-23 13:57:37 +08:00
xiaoxian521
bbdd44a917 feat: 添加滑块示例 2024-12-19 17:29:45 +08:00
xiaoxian521
f8690a0b73 fix: 修复使用this语法时无法显示代码提示的问题并更新pinia相关语法 2024-12-15 23:29:37 +08:00
xiaoxian521
b843eda26f style: update 2024-12-14 11:20:45 +08:00
xiaoxian521
1b48bc8049 release: update 5.9.0 2024-12-10 14:36:47 +08:00
xiaoming
21ff69b10e refactor: 升级vitev6版本,升级sass至最新版,重构主题写法,弃用@pureadmin/theme (#1188)
* refactor: 升级`vite`至`v6`版本,升级`sass`至最新版,重构主题写法,删除`@pureadmin/theme`
2024-12-10 14:10:47 +08:00
xiaoxian521
66f5d6d423 refactor: 使用code-inspector-plugin替换vite-plugin-vue-inspector 2024-11-04 12:54:20 +08:00
xiaoxian521
fd9ad7eb21 chore: 固定sass版本至v1.79.6,待稳定后再升级 2024-10-23 11:28:09 +08:00
xiaoxian521
a0618c01ba chore: 升级依赖,相关兼容处理 2024-10-12 09:46:44 +08:00
xiaoxian521
7a3c1ab3cd docs: 更新特别代码贡献名单 2024-09-25 16:57:19 +08:00
Mer
5032a75221 feat: 新增函数式抽屉组件 (#1183)
* feat: 函数式抽屉组件

* feat: 添加ReDrawer demo

* fix: 组件ReDrawer 增加按钮loading等功能
2024-09-25 16:49:12 +08:00
xiaoxian521
384c789fc0 perf: 优化用户管理左侧部门树的布局 2024-09-24 11:52:16 +08:00
xiaoxian521
281675bdaf fix: 修复在菜单、部门管理中,表格展开后启用或关闭全屏功能时,表格高度未自动适应的问题 2024-09-24 08:42:46 +08:00
xiaoxian521
0004f1318c feat: pure-table添加动态表头示例 2024-09-23 14:45:02 +08:00
xiaoxian521
ab39864ef4 chore: 升级i18n相关依赖,相关兼容处理 2024-09-21 16:05:02 +08:00
xiaoxian521
4e14ab22ba chore: 升级依赖,相关兼容处理 2024-09-21 12:09:41 +08:00
164 changed files with 5886 additions and 4661 deletions

View File

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

2
.nvmrc
View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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` 贡献提交规范

View File

@@ -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}`

View File

@@ -11,6 +11,7 @@ const include = [
"dayjs",
"axios",
"pinia",
"vditor",
"typeit",
"swiper",
"qrcode",
@@ -22,6 +23,7 @@ const include = [
"vue-tippy",
"cropperjs",
"jsbarcode",
"codemirror",
"pinyin-pro",
"sortablejs",
"swiper/vue",
@@ -42,6 +44,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 +57,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 };

View File

@@ -4,16 +4,14 @@ 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 tailwindcss from "@tailwindcss/vite";
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 +20,23 @@ export function getPluginsList(
): PluginOption[] {
const lifecycle = process.env.npm_lifecycle_event;
return [
tailwindcss(),
vue(),
// 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 +51,6 @@ export function getPluginsList(
infixName: false,
enableProd: true
}),
// 自定义主题
themePreprocessorPlugin({
scss: {
multipleScopeVars: genScssMultipleScopeVars(),
extract: true
}
}),
// svg组件化支持
svgLoader(),
VITE_CDN ? cdn : null,

View File

@@ -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": [

View File

@@ -10,9 +10,6 @@
/>
<title>vue-pure-admin</title>
<link rel="icon" href="/favicon.ico" />
<script>
window.process = {};
</script>
</head>
<body>

View File

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

View File

@@ -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: 修改密码成功

View File

@@ -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"]

View File

@@ -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,

View File

@@ -1,6 +1,6 @@
{
"name": "vue-pure-admin",
"version": "5.8.0",
"version": "5.9.0",
"private": true,
"type": "module",
"scripts": {
@@ -48,28 +48,30 @@
},
"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.0",
"@vueuse/core": "^12.4.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",
"echarts": "^5.6.0",
"el-table-infinite-scroll": "^3.0.6",
"element-plus": "^2.8.0",
"element-plus": "^2.9.3",
"intro.js": "^7.2.0",
"js-cookie": "^3.0.5",
"jsbarcode": "^3.11.6",
@@ -78,102 +80,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": "^2.3.0",
"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.1",
"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.8",
"version-rocket": "^1.7.4",
"vue": "^3.5.13",
"vue-i18n": "^11.0.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.1",
"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.8.16",
"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.6.1",
"@commitlint/config-conventional": "^19.6.0",
"@commitlint/types": "^19.5.0",
"@eslint/js": "^9.18.0",
"@faker-js/faker": "^9.3.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",
"@tailwindcss/vite": "^4.0.13",
"@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.13",
"@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",
"autoprefixer": "^10.4.20",
"boxen": "^7.1.1",
"cssnano": "^7.0.5",
"@typescript-eslint/eslint-plugin": "^8.20.0",
"@typescript-eslint/parser": "^8.20.0",
"@vitejs/plugin-vue": "^5.2.1",
"@vitejs/plugin-vue-jsx": "^4.1.1",
"boxen": "^8.0.1",
"code-inspector-plugin": "^0.19.2",
"cssnano": "^7.0.6",
"dagre": "^0.8.5",
"eslint": "^9.9.0",
"eslint-config-prettier": "^9.1.0",
"eslint": "^9.18.0",
"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",
"postcss-import": "^16.1.0",
"eslint-plugin-vue": "^9.32.0",
"gradient-string": "^3.0.0",
"husky": "^9.1.7",
"lint-staged": "^15.3.0",
"postcss": "^8.5.1",
"postcss-html": "^1.8.0",
"postcss-load-config": "^6.0.1",
"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",
"prettier": "^3.4.2",
"rimraf": "^6.0.1",
"rollup-plugin-visualizer": "^5.14.0",
"sass": "^1.83.4",
"stylelint": "^16.13.2",
"stylelint-config-recess-order": "^5.1.1",
"stylelint-config-recommended-vue": "^1.5.0",
"stylelint-config-standard-scss": "^13.1.0",
"stylelint-config-standard-scss": "^14.0.0",
"stylelint-prettier": "^5.0.2",
"svgo": "^3.3.2",
"tailwindcss": "^3.4.9",
"typescript": "^5.5.4",
"vite": "^5.4.0",
"tailwindcss": "^4.0.13",
"typescript": "^5.7.3",
"vite": "^6.0.7",
"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": {

7301
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -3,10 +3,6 @@
/** @type {import('postcss-load-config').Config} */
export default {
plugins: {
"postcss-import": {},
"tailwindcss/nesting": {},
tailwindcss: {},
autoprefixer: {},
...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {})
}
};

View File

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

View File

@@ -2,6 +2,7 @@
<el-config-provider :locale="currentLocale">
<router-view />
<ReDialog />
<ReDrawer />
</el-config-provider>
</template>
@@ -10,6 +11,7 @@ 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";
@@ -19,7 +21,8 @@ export default defineComponent({
name: "app",
components: {
[ElConfigProvider.name]: ElConfigProvider,
ReDialog
ReDialog,
ReDrawer
},
computed: {
currentLocale() {

View File

@@ -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"),

View File

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

Before

Width:  |  Height:  |  Size: 351 B

After

Width:  |  Height:  |  Size: 332 B

View File

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

Before

Width:  |  Height:  |  Size: 327 B

After

Width:  |  Height:  |  Size: 308 B

View File

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

Before

Width:  |  Height:  |  Size: 302 B

After

Width:  |  Height:  |  Size: 283 B

View File

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

Before

Width:  |  Height:  |  Size: 826 B

After

Width:  |  Height:  |  Size: 807 B

View File

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

Before

Width:  |  Height:  |  Size: 379 B

After

Width:  |  Height:  |  Size: 360 B

View File

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

Before

Width:  |  Height:  |  Size: 392 B

After

Width:  |  Height:  |  Size: 373 B

View File

@@ -119,7 +119,7 @@ export default defineComponent({
"p-[6px]",
"h-[30px]",
"w-[30px]",
"outline-none",
"outline-hidden",
"rounded-[4px]",
"cursor-pointer",
"hover:bg-[rgba(0,0,0,0.06)]"

View File

@@ -79,7 +79,7 @@ const fullscreenClass = computed(() => {
"el-dialog__close",
"-translate-x-2",
"cursor-pointer",
"hover:!text-[red]"
"hover:text-[red]!"
];
});

View File

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

View File

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

View File

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

View File

@@ -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"),

View File

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

View File

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

View File

@@ -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" },

View File

@@ -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" },

View File

@@ -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);
@@ -87,9 +87,9 @@ export default defineComponent({
"text-black",
"dark:text-white",
"duration-100",
"hover:!text-primary",
"hover:text-primary!",
"cursor-pointer",
"outline-none"
"outline-hidden"
];
});
@@ -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);
@@ -250,12 +255,12 @@ export default defineComponent({
<div
{...attrs}
class={[
"w-[99/100]",
"w-99/100",
"px-2",
"pb-2",
"bg-bg_color",
isFullscreen.value
? ["!w-full", "!h-full", "z-[2002]", "fixed", "inset-0"]
? ["w-full!", "h-full!", "z-2002", "fixed", "inset-0"]
: "mt-2"
]}
>
@@ -312,7 +317,7 @@ export default defineComponent({
>
<div class={[topClass.value]}>
<el-checkbox
class="!-mr-1"
class="-mr-1!"
label="列展示"
v-model={checkAll.value}
indeterminate={isIndeterminate.value}
@@ -342,8 +347,8 @@ export default defineComponent({
class={[
"drag-btn w-[16px] mr-2",
isFixedColumn(item)
? "!cursor-no-drop"
: "!cursor-grab"
? "cursor-no-drop!"
: "cursor-grab!"
]}
onMouseenter={(event: {
preventDefault: () => void;
@@ -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>

View File

@@ -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;
/** 图标属性、样式配置 */

View File

@@ -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"),

View File

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

View File

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

View File

@@ -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);
@@ -80,9 +80,9 @@ export default defineComponent({
"text-black",
"dark:text-white",
"duration-100",
"hover:!text-primary",
"hover:text-primary!",
"cursor-pointer",
"outline-none"
"outline-hidden"
];
});
@@ -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)
@@ -243,12 +248,12 @@ export default defineComponent({
<div
{...attrs}
class={[
"w-[99/100]",
"w-99/100",
"px-2",
"pb-2",
"bg-bg_color",
isFullscreen.value
? ["!w-full", "!h-full", "z-[2002]", "fixed", "inset-0"]
? ["w-full!", "h-full!", "z-2002", "fixed", "inset-0"]
: "mt-2"
]}
>
@@ -305,7 +310,7 @@ export default defineComponent({
>
<div class={[topClass.value]}>
<el-checkbox
class="!-mr-1"
class="-mr-1!"
label="列展示"
v-model={checkAll.value}
indeterminate={isIndeterminate.value}
@@ -335,8 +340,8 @@ export default defineComponent({
class={[
"drag-btn w-[16px] mr-2",
isFixedColumn(item)
? "!cursor-no-drop"
: "!cursor-grab"
? "cursor-no-drop!"
: "cursor-grab!"
]}
onMouseenter={(event: {
preventDefault: () => void;
@@ -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>

View File

@@ -1,4 +1,4 @@
<script lang="ts" setup>
<script setup lang="ts">
import { getConfig } from "@/config";
const TITLE = getConfig("Title");

View File

@@ -33,7 +33,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
</script>
<template>
<div class="navbar bg-[#fff] shadow-sm shadow-[rgba(0,21,41,0.08)]">
<div class="navbar bg-[#fff] shadow-xs shadow-[rgba(0,21,41,0.08)]">
<LaySidebarTopCollapse
v-if="device === 'mobile'"
class="hamburger-container"
@@ -54,13 +54,13 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
<!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click">
<GlobalizationIcon
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
/>
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
:class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
@click="translationCh"
>
<IconifyIconOffline
@@ -72,7 +72,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
</el-dropdown-item>
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
:class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
@click="translationEn"
>
<span v-show="locale === 'en'" class="check-en">

View File

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

View File

@@ -16,7 +16,7 @@ const iconClass = computed(() => {
"flex",
"justify-center",
"items-center",
"outline-none",
"outline-hidden",
"rounded-[4px]",
"cursor-pointer",
"transition-colors",

View File

@@ -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);
}
@@ -432,7 +429,7 @@ onUnmounted(() => removeMatchMedia);
height="20"
/>
<div
class="flex-grow border-b border-dashed"
class="grow border-b border-dashed"
style="border-color: var(--el-color-primary)"
/>
<IconifyIconOffline

View File

@@ -84,13 +84,13 @@ onMounted(() => {
<!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click">
<GlobalizationIcon
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
/>
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
:class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
@click="translationCh"
>
<span v-show="locale === 'zh'" class="check-zh">
@@ -100,7 +100,7 @@ onMounted(() => {
</el-dropdown-item>
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
:class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
@click="translationEn"
>
<span v-show="locale === 'en'" class="check-en">

View File

@@ -105,13 +105,13 @@ watch(
<!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click">
<GlobalizationIcon
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
/>
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
:class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
@click="translationCh"
>
<span v-show="locale === 'zh'" class="check-zh">
@@ -121,7 +121,7 @@ watch(
</el-dropdown-item>
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
:class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
@click="translationEn"
>
<span v-show="locale === 'en'" class="check-en">

View File

@@ -105,12 +105,12 @@ watch(
</script>
<template>
<el-breadcrumb class="!leading-[50px] select-none" separator="/">
<el-breadcrumb class="leading-[50px]! select-none" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item
v-for="item in levelList"
:key="item.path"
class="!inline !items-stretch"
class="inline! items-stretch!"
>
<a @click.prevent="handleLink(item)">
{{ transformI18n(item.meta.title) }}

View File

@@ -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>
@@ -145,7 +144,7 @@ function resolvePath(routePath) {
item?.pathList?.length === 2)
"
truncated
class="!w-full !pl-4 !text-inherit"
class="w-full! pl-4! text-inherit!"
>
{{ transformI18n(onlyOneChild.meta.title) }}
</el-text>
@@ -157,7 +156,7 @@ function resolvePath(routePath) {
offset: [0, -10],
theme: tooltipEffect
}"
class="!w-full !text-inherit"
class="w-full! text-inherit!"
>
{{ transformI18n(onlyOneChild.meta.title) }}
</ReText>
@@ -197,9 +196,9 @@ function resolvePath(routePath) {
theme: tooltipEffect
}"
:class="{
'!w-full': true,
'!text-inherit': true,
'!pl-4':
'w-full!': true,
'text-inherit!': true,
'pl-4!':
layout !== 'horizontal' &&
isCollapse &&
!toRaw(item.meta.icon) &&

View File

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

View File

@@ -32,7 +32,7 @@ const toggleClick = () => {
>
<IconifyIconOffline
:icon="isActive ? MenuFold : MenuUnfold"
class="inline-block align-middle hover:text-primary dark:hover:!text-white"
class="inline-block align-middle hover:text-primary dark:hover:text-white!"
/>
</div>
</template>

View File

@@ -511,6 +511,7 @@ function tagOnClick(item) {
} else {
router.push({ path });
}
emitter.emit("tagOnClick", item);
}
onClickOutside(contextmenuRef, closeMenu, {
@@ -588,7 +589,7 @@ onBeforeUnmount(() => {
>
<template v-if="showModel !== 'chrome'">
<span
class="tag-title dark:!text-text_color_primary dark:hover:!text-primary"
class="tag-title dark:text-text_color_primary! dark:hover:text-primary!"
>
{{ transformI18n(item.meta.title) }}
</span>

View File

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

View File

@@ -64,7 +64,7 @@ export function useNav() {
const getDropdownItemClass = computed(() => {
return (locale, t) => {
return locale === t ? "" : "dark:hover:!text-primary";
return locale === t ? "" : "dark:hover:text-primary!";
};
});

View File

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

View File

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

View File

@@ -17,14 +17,16 @@ const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ,所以
monitor = 14,
tabs = 15,
about = 16,
editor = 17,
flowchart = 18,
formdesign = 19,
board = 20,
ppt = 21,
mind = 22,
guide = 23,
menuoverflow = 24;
codemirror = 17,
markdown = 18,
editor = 19,
flowchart = 20,
formdesign = 21,
board = 22,
ppt = 23,
mind = 24,
guide = 25,
menuoverflow = 26;
export {
home,
@@ -44,6 +46,8 @@ export {
monitor,
tabs,
about,
codemirror,
markdown,
editor,
flowchart,
formdesign,

View File

@@ -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")
}
},
{

View File

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

View File

@@ -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")
}
},
{

View File

@@ -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")
}
}
]

View File

@@ -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")
}
}
]

View File

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

View File

@@ -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")
}
}
]

View File

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

View File

@@ -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:

View File

@@ -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>(

View File

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

View File

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

View File

@@ -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,

View File

@@ -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 ?? "",

View File

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

View File

@@ -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; /* 滚动条宽度 */
}

View File

@@ -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;
}
/* 灰色模式 */

View File

@@ -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;
}
@@ -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;
}
/* 有子集的激活菜单左侧小竖条 */
@@ -218,7 +216,7 @@
height: 100%;
clear: both;
content: "";
background-color: $menuActiveBefore;
background-color: var(--pure-theme-menu-active-before);
transition: all var(--pure-transition-duration) ease-in-out;
transform: translateY(0);
}
@@ -253,7 +251,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 +269,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 +280,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 +340,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 +356,7 @@
}
.el-sub-menu__title {
color: $menuText;
color: var(--pure-theme-menu-text);
}
}
@@ -366,31 +364,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 +413,7 @@
justify-content: space-around;
width: 100%;
height: 48px;
background: $menuBg;
background: var(--pure-theme-menu-bg) !important;
.horizontal-header-left {
display: flex;
@@ -440,7 +438,7 @@
font-size: 18px;
font-weight: 600;
line-height: 32px;
color: $subMenuActiveText;
color: var(--pure-theme-sub-menu-active-text);
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -458,7 +456,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 +471,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 +495,7 @@
justify-content: space-around;
height: 48px;
padding: 10px;
color: $subMenuActiveText;
color: var(--pure-theme-sub-menu-active-text);
cursor: pointer;
p {
@@ -522,10 +520,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 +531,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 +540,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;
}
}
@@ -596,7 +594,7 @@ body[layout="vertical"] {
}
.sidebar-logo-container {
background: $sidebarLogo;
background: var(--pure-theme-sidebar-logo);
}
.hideSidebar {

View File

@@ -1,21 +1,44 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";
@layer components {
.flex-c {
@apply flex justify-center items-center;
}
@custom-variant dark (&:is(.dark *));
.flex-ac {
@apply flex justify-around items-center;
}
@theme {
--color-bg_color: var(--el-bg-color);
--color-primary: var(--el-color-primary);
--color-text_color_primary: var(--el-text-color-primary);
--color-text_color_regular: var(--el-text-color-regular);
}
.flex-bc {
@apply flex justify-between items-center;
}
/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
.navbar-bg-hover {
@apply dark:text-white dark:hover:!bg-[#242424];
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}
@utility flex-c {
@apply flex justify-center items-center;
}
@utility flex-ac {
@apply flex justify-around items-center;
}
@utility flex-bc {
@apply flex justify-between items-center;
}
@utility navbar-bg-hover {
@apply dark:text-white dark:hover:bg-[#242424]!;
}

95
src/style/theme.scss Normal file
View File

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

View File

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

View File

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

View File

@@ -76,7 +76,7 @@ function onReset() {
immediate: true,
timeout: 1000
}"
class="!w-[200px]"
class="w-[200px]!"
clearable
@clear="onInput"
/>
@@ -86,7 +86,7 @@ function onReset() {
<el-input
v-model="searchTwo"
v-optimize="{ event: 'input', fn: onInputTwo, timeout: 400 }"
class="!w-[200px]"
class="w-[200px]!"
clearable
/>
</div>
@@ -100,7 +100,7 @@ function onReset() {
timeout: 400,
params: { name: '小明', sex: '男' }
}"
class="!w-[200px]"
class="w-[200px]!"
clearable
/>
</div>
@@ -112,7 +112,7 @@ function onReset() {
<el-input
v-model="searchFour"
v-optimize:throttle="{ event: 'input', fn: onInputFour, timeout: 1000 }"
class="!w-[200px]"
class="w-[200px]!"
clearable
/>
</div>
@@ -125,7 +125,7 @@ function onReset() {
fn: onInputFive,
params: { name: '小明', sex: '男' }
}"
class="!w-[200px]"
class="w-[200px]!"
clearable
/>
</div>
@@ -134,7 +134,7 @@ function onReset() {
<div class="mb-2">
文本复制指令(双击输入框内容即可复制)
<el-input v-model="searchSix" v-copy="searchSix" class="!w-[200px]" />
<el-input v-model="searchSix" v-copy="searchSix" class="w-[200px]!" />
</div>
<div>
文本复制指令(自定义触发事件,单击复制)

View File

@@ -83,7 +83,7 @@ const tableData: User[] = [
<span class="font-medium">打印功能报表图表图片</span>
<el-select
v-model="value"
class="!w-[100px] mr-2"
class="w-[100px]! mr-2"
placeholder="Select"
size="small"
>

View File

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

View File

@@ -53,7 +53,7 @@ onBeforeUnmount(() => {
代码位置 src/views/able/watermark.vue
</el-link>
</template>
<el-space wrap class="!mb-2">
<el-space wrap class="mb-2!">
<span> 请输入要创建水印的值</span>
<el-input v-model="value" class="mr-4" style="width: 200px" clearable />
<span>请选择要创建水印的颜色</span>

View File

@@ -103,7 +103,7 @@ onBeforeUnmount(() => {
</template>
<div
v-loading="loading"
class="w-8/12 !m-auto !mt-[20px]"
class="w-8/12 m-auto! mt-[20px]!"
element-loading-background="transparent"
>
<div ref="wavesurferRef" />

View File

@@ -7,7 +7,7 @@ export function useColumns() {
minWidth: 100,
cellRenderer: () => {
return (
<el-tag size="large" class="!text-base">
<el-tag size="large" class="text-base!">
{version}
</el-tag>
);
@@ -18,7 +18,7 @@ export function useColumns() {
minWidth: 120,
cellRenderer: () => {
return (
<el-tag size="large" class="!text-base">
<el-tag size="large" class="text-base!">
{lastBuildTime}
</el-tag>
);
@@ -29,7 +29,7 @@ export function useColumns() {
minWidth: 140,
cellRenderer: () => {
return (
<el-tag size="large" class="!text-base">
<el-tag size="large" class="text-base!">
{engines.node}
</el-tag>
);
@@ -40,7 +40,7 @@ export function useColumns() {
minWidth: 140,
cellRenderer: () => {
return (
<el-tag size="large" class="!text-base">
<el-tag size="large" class="text-base!">
{engines.pnpm}
</el-tag>
);
@@ -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>
);

View File

@@ -70,12 +70,12 @@ getMine().then(res => {
<el-container class="h-full">
<el-aside
v-if="isOpen"
class="pure-account-settings overflow-hidden px-2 dark:!bg-[var(--el-bg-color)] border-r-[1px] border-[var(--pure-border-color)]"
class="pure-account-settings overflow-hidden px-2 dark:bg-(--el-bg-color)! border-r-[1px] border-[var(--pure-border-color)]"
:width="deviceDetection() ? '180px' : '240px'"
>
<el-menu :default-active="witchPane" class="pure-account-settings-menu">
<el-menu-item
class="hover:!transition-all hover:!duration-200 hover:!text-base !h-[50px]"
class="hover:transition-all! hover:duration-200! hover:text-base! h-[50px]!"
@click="router.go(-1)"
>
<div class="flex items-center">
@@ -86,10 +86,10 @@ getMine().then(res => {
<div class="flex items-center ml-8 mt-4 mb-4">
<el-avatar :size="48" :src="userInfo.avatar" />
<div class="ml-4 flex flex-col max-w-[130px]">
<ReText class="font-bold !self-baseline">
<ReText class="font-bold self-baseline!">
{{ userInfo.nickname }}
</ReText>
<ReText class="!self-baseline" type="info">
<ReText class="self-baseline!" type="info">
{{ userInfo.username }}
</ReText>
</div>
@@ -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 {

View File

@@ -0,0 +1,96 @@
<script setup lang="ts">
import "codemirror/theme/material-darker.css";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint";
import "codemirror/addon/hint/javascript-hint.js";
import "codemirror/mode/javascript/javascript.js";
import { useDark } from "@pureadmin/utils";
import Codemirror from "codemirror-editor-vue3";
import { ref, reactive, watch, nextTick } from "vue";
import type { Editor, EditorConfiguration } from "codemirror";
const { isDark } = useDark();
const cminstance = ref<Editor | null>(null);
const cmOptions: EditorConfiguration = reactive({
mode: "javascript",
theme: isDark.value ? "material-darker" : "default",
tabSize: 4,
readOnly: false,
autofocus: true,
autoRefresh: true,
lineNumbers: true,
lineWiseCopyCut: true,
gutters: ["CodeMirror-lint-markers"],
lint: true,
extraKeys: {
Ctrl: "autocomplete",
Tab: "autocomplete"
},
hintOptions: {
completeSingle: false
}
});
const code = ref(`function sayHello() {
console.log("Hello, World!");
}
sayHello();`);
const onReady = (cm: Editor) => {
cminstance.value = cm;
cm.on("keypress", () => cm.showHint());
// console.log(cm.getValue());
};
watch(
() => isDark.value,
async newVal => {
await nextTick();
newVal
? cminstance.value.setOption("theme", "material-darker")
: cminstance.value.setOption("theme", "default");
}
);
</script>
<template>
<el-card shadow="never">
<template #header>
<div class="card-header">
<span class="font-medium">
代码编辑器组件采用开源的
<el-link
href="https://rennzhang.github.io/codemirror-editor-vue3/zh-CN/guide/getting-started"
target="_blank"
style="margin: 0 4px 5px; font-size: 16px"
>
codemirror-editor-vue3
</el-link>
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/codemirror/index.vue"
target="_blank"
>
代码位置 src/views/codemirror/index.vue
</el-link>
</template>
<Codemirror
v-model:value="code"
width="100%"
height="400px"
:options="cmOptions"
:border="true"
@ready="onReady"
/>
</el-card>
</template>
<style lang="scss" scoped>
.codemirror-container.bordered {
border: 1px solid var(--pure-border-color);
}
</style>

View File

@@ -36,6 +36,6 @@ watch(animate, () => {
代码位置 src/views/components/animatecss.vue
</el-link>
</template>
<ReAnimateSelector v-model="animate" class="!w-[200px]" />
<ReAnimateSelector v-model="animate" class="w-[200px]!" />
</el-card>
</template>

View File

@@ -221,7 +221,7 @@ watch(size, val =>
<p>可控制间距的按钮样式</p>
<el-slider
v-model="spaceSize"
class="mb-2 !w-[300px]"
class="mb-2 w-[300px]!"
:show-tooltip="false"
:disabled="size === 'disabled'"
/>

View File

@@ -164,7 +164,7 @@ watch(size, val =>
<el-date-picker
v-model="value"
type="date"
class="!w-[160px]"
class="w-[160px]!"
placeholder="请选择"
:disabled-date="disabledDate"
:shortcuts="shortcuts"
@@ -180,7 +180,7 @@ watch(size, val =>
<el-date-picker
v-model="value1"
type="week"
class="!w-[160px]"
class="w-[160px]!"
format="YYYY年第ww周"
placeholder="选择某年中的某周"
:size="dynamicSize"
@@ -189,7 +189,7 @@ watch(size, val =>
<el-date-picker
v-model="value2"
type="month"
class="!w-[160px]"
class="w-[160px]!"
placeholder="选择某月"
:size="dynamicSize"
:disabled="size === 'disabled'"
@@ -197,7 +197,7 @@ watch(size, val =>
<el-date-picker
v-model="value3"
type="year"
class="!w-[160px]"
class="w-[160px]!"
placeholder="选择某年"
:size="dynamicSize"
:disabled="size === 'disabled'"
@@ -205,7 +205,7 @@ watch(size, val =>
<el-date-picker
v-model="value4"
type="dates"
class="!w-[160px]"
class="w-[160px]!"
placeholder="选择多个日期"
:size="dynamicSize"
:disabled="size === 'disabled'"
@@ -216,7 +216,7 @@ watch(size, val =>
<el-date-picker
v-model="value5"
type="daterange"
class="!w-[240px]"
class="w-[240px]!"
unlink-panels
range-separator="至"
start-placeholder="开始时间"
@@ -261,7 +261,7 @@ watch(size, val =>
<el-date-picker
v-model="value7"
type="date"
class="!w-[160px]"
class="w-[160px]!"
placeholder="请选择日期"
format="YYYY/MM/DD"
:value-format="dateFormat"
@@ -275,7 +275,7 @@ watch(size, val =>
<el-date-picker
v-model="value8"
type="date"
class="!w-[160px]"
class="w-[160px]!"
placeholder="请选择日期"
:prefix-icon="useRenderIcon('twemoji:spiral-calendar')"
:size="dynamicSize"

View File

@@ -190,7 +190,7 @@ watch(size, val =>
<el-date-picker
v-model="value"
type="datetime"
class="!w-[200px]"
class="w-[200px]!"
placeholder="请选择日期时间"
:shortcuts="shortcuts"
:size="dynamicSize"
@@ -213,7 +213,7 @@ watch(size, val =>
<el-date-picker
v-model="value1"
type="datetime"
class="!w-[200px]"
class="w-[200px]!"
placeholder="请选择日期时间"
format="YYYY/MM/DD hh:mm:ss"
:value-format="datetimeFormat"

View File

@@ -28,14 +28,14 @@ const newFormInline = ref(props.formInline);
<el-form-item label="姓名">
<el-input
v-model="newFormInline.user"
class="!w-[220px]"
class="w-[220px]!"
placeholder="请输入姓名"
/>
</el-form-item>
<el-form-item label="城市">
<el-select
v-model="newFormInline.region"
class="!w-[220px]"
class="w-[220px]!"
placeholder="请选择城市"
>
<el-option label="上海" value="上海" />

View File

@@ -18,5 +18,5 @@ const data = useVModel(props, "data", emit);
</script>
<template>
<el-input v-model="data" class="!w-[220px]" placeholder="请输入内容" />
<el-input v-model="data" class="w-[220px]!" placeholder="请输入内容" />
</template>

View File

@@ -280,11 +280,11 @@ function onUpdateClick() {
});
}
// popconfirm 确认框
// Popconfirm 确认框
function onPopconfirmClick() {
addDialog({
width: "30%",
title: "popconfirm确认框示例",
title: "Popconfirm确认框示例",
popconfirm: { title: "是否确认修改当前数据" },
contentRenderer: () => <p>点击右下方确定按钮看看效果吧</p>
});
@@ -519,7 +519,7 @@ function onSureBtnLoading() {
<el-button @click="onCloseCallBackClick"> 关闭后的回调 </el-button>
<el-button @click="onNestingClick"> 嵌套的弹框 </el-button>
<el-button @click="onUpdateClick"> 更改弹框自身属性值 </el-button>
<el-button @click="onPopconfirmClick">popconfirm确认框</el-button>
<el-button @click="onPopconfirmClick">Popconfirm确认框</el-button>
</el-space>
<el-divider />
<el-space wrap>

View File

@@ -0,0 +1,47 @@
<script setup lang="ts">
import { ref } from "vue";
// 声明 props 类型
export interface FormProps {
formInline: {
user: string;
region: string;
};
}
// 声明 props 默认值
// 推荐阅读https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
const props = withDefaults(defineProps<FormProps>(), {
formInline: () => ({ user: "", region: "" })
});
// vue 规定所有的 prop 都遵循着单向绑定原则,直接修改 prop 时Vue 会抛出警告。此处的写法仅仅是为了消除警告。
// 因为对一个 reactive 对象执行 ref返回 Ref 对象的 value 值仍为传入的 reactive 对象,
// 即 newFormInline === props.formInline 为 true所以此处代码的实际效果仍是直接修改 props.formInline。
// 但该写法仅适用于 props.formInline 是一个对象类型的情况,原始类型需抛出事件
// 推荐阅读https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
const newFormInline = ref(props.formInline);
</script>
<template>
<el-form :model="newFormInline">
<el-form-item label="姓名">
<el-input
v-model="newFormInline.user"
class="w-[220px]!"
placeholder="请输入姓名"
/>
</el-form-item>
<el-form-item label="城市">
<el-select
v-model="newFormInline.region"
class="w-[220px]!"
placeholder="请选择城市"
>
<el-option label="上海" value="上海" />
<el-option label="浙江" value="浙江" />
<el-option label="深圳" value="深圳" />
</el-select>
</el-form-item>
</el-form>
</template>

View File

@@ -0,0 +1,22 @@
<script setup lang="ts">
import { useVModel } from "@vueuse/core";
// 声明 props 类型
export interface FormProps {
data: string;
}
// 声明 props 默认值
// 推荐阅读https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
const props = withDefaults(defineProps<FormProps>(), {
data: () => ""
});
// 使用 vueuse 的双向绑定工具
const emit = defineEmits(["update:data"]);
const data = useVModel(props, "data", emit);
</script>
<template>
<el-input v-model="data" class="w-[220px]!" placeholder="请输入内容" />
</template>

Some files were not shown because too many files have changed in this diff Show More