Compare commits
25 Commits
v5.8.0
...
ab1c7f8bcc
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
ab1c7f8bcc | ||
|
|
b87eb6fd0a | ||
|
|
a0246e31df | ||
|
|
e1cd14a946 | ||
|
|
02380f69e1 | ||
|
|
5208272456 | ||
|
|
551292078e | ||
|
|
79cd159154 | ||
|
|
6d26300181 | ||
|
|
0dd6665b2a | ||
|
|
bbdd44a917 | ||
|
|
f8690a0b73 | ||
|
|
b843eda26f | ||
|
|
1b48bc8049 | ||
|
|
21ff69b10e | ||
|
|
66f5d6d423 | ||
|
|
fd9ad7eb21 | ||
|
|
a0618c01ba | ||
|
|
7a3c1ab3cd | ||
|
|
5032a75221 | ||
|
|
384c789fc0 | ||
|
|
281675bdaf | ||
|
|
0004f1318c | ||
|
|
ab39864ef4 | ||
|
|
4e14ab22ba |
2
.github/ISSUE_TEMPLATE/bug_report.yml
vendored
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
28
CHANGELOG.md
@@ -1,3 +1,23 @@
|
||||
# 5.9.0 (2024-12-10)
|
||||
|
||||
### ✔️Refactor
|
||||
|
||||
- Upgrade `vite` to `v6` version, upgrade `sass` to the latest version, reconstruct the theme writing method, and deprecate [@pureadmin/theme](https://www.npmjs.com/package/@pureadmin/theme) , click to view [Related optimization point details](https://github.com/pure-admin/vue-pure-admin/pull/1188#issue-2630095115). For users who have the [Max version](https://pure-admin.cn/pages/max/), it is strongly recommended to upgrade. Subsequent Max version users will enjoy a more modern, beautiful and highly customized theme color
|
||||
- Use [code-inspector-plugin](https://www.npmjs.com/package/code-inspector-plugin) to replace [vite-plugin-vue-inspector](https://www.npmjs.com/package/vite-plugin-vue-inspector)
|
||||
|
||||
### 🎫Feat
|
||||
|
||||
- Added `ReDrawer` component
|
||||
- `pure-table` adds dynamic table header example
|
||||
|
||||
### 🐞 Bug fixes
|
||||
|
||||
- Fixed an issue where the height of the table does not automatically adapt when the full screen function is enabled or disabled after the table is expanded in the menu and department management
|
||||
|
||||
### 🍏Perf
|
||||
|
||||
- Optimize the layout of the department tree on the left side of user management
|
||||
|
||||
# 5.8.0 (2024-08-19)
|
||||
|
||||
### 🎫 Feat
|
||||
@@ -53,7 +73,7 @@
|
||||
|
||||
The addresses of the document site and full version preview site have been changed!
|
||||
|
||||
- The latest document site address: https://pure-admin.github.io/pure-admin-doc
|
||||
- The latest document site address: https://pure-admin.cn
|
||||
- The latest full version preview site address: https://pure-admin.github.io/vue-pure-admin
|
||||
|
||||
### ✔️ Refactor
|
||||
@@ -454,7 +474,7 @@ Totally `ESM` version
|
||||
### ✔️ Refactor
|
||||
|
||||
- completely removed `lodash` and its related libraries
|
||||
[Click here to see Why Removed? How to integrate it yourself? ](https://pure-admin.github.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-5-%E7 %89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-lodash-%E5%92%8C% E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%93-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9 %99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
|
||||
[Click here to see Why Removed? How to integrate it yourself? ](https://pure-admin.cn/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-5-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-lodash-%E5%92%8C%E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%93-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
|
||||
|
||||
### 🎫 Feat
|
||||
|
||||
@@ -474,7 +494,7 @@ Totally `ESM` version
|
||||
### ✔️ Refactor
|
||||
|
||||
- Completely removed `vxe-table`, after removal, the overall package size of the full version is reduced by `1.82MB`, and the initial startup time is basically the same as the lite version 🐮
|
||||
[Click here to see Why Removed? How to integrate it yourself?](https://pure-admin.github.io/pure-admin-doc/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-4-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-vxe-table-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
|
||||
[Click here to see Why Removed? How to integrate it yourself?](https://pure-admin.cn/pages/FAQ/#%E5%B9%B3%E5%8F%B0%E5%9C%A8-v3-9-4-%E7%89%88%E6%9C%AC%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E4%BA%86-vxe-table-%E4%B8%BA%E4%BB%80%E4%B9%88%E7%A7%BB%E9%99%A4-%E5%A6%82%E4%BD%95%E8%87%AA%E8%A1%8C%E9%9B%86%E6%88%90)
|
||||
|
||||
### 🎫 Feat
|
||||
|
||||
@@ -687,7 +707,7 @@ Totally `ESM` version
|
||||
|
||||
### ✔️ Refactor
|
||||
|
||||
- Replace `unocss` with `tailwindcss`, add `tailwindcss` [documentation](https://pure-admin.github.io/pure-admin-doc/pages/tailwindcss/)
|
||||
- Replace `unocss` with `tailwindcss`, add `tailwindcss` [documentation](https://pure-admin.cn/pages/tailwindcss/)
|
||||
|
||||
### 🐞 Bug fixes
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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` 贡献提交规范
|
||||
|
||||
|
||||
@@ -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})`
|
||||
|
||||
@@ -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 };
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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": [
|
||||
|
||||
@@ -10,9 +10,6 @@
|
||||
/>
|
||||
<title>vue-pure-admin</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<script>
|
||||
window.process = {};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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: 修改密码成功
|
||||
@@ -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"]
|
||||
|
||||
@@ -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,
|
||||
|
||||
148
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-pure-admin",
|
||||
"version": "5.8.0",
|
||||
"version": "5.9.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
@@ -48,28 +48,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
@@ -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: {} } : {})
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"Version": "5.8.0",
|
||||
"Version": "5.9.0",
|
||||
"Title": "PureAdmin",
|
||||
"FixedHeader": true,
|
||||
"HiddenSideBar": false,
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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"),
|
||||
|
||||
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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 |
@@ -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)]"
|
||||
|
||||
@@ -79,7 +79,7 @@ const fullscreenClass = computed(() => {
|
||||
"el-dialog__close",
|
||||
"-translate-x-2",
|
||||
"cursor-pointer",
|
||||
"hover:!text-[red]"
|
||||
"hover:text-[red]!"
|
||||
];
|
||||
});
|
||||
|
||||
|
||||
64
src/components/ReDrawer/index.ts
Normal 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
|
||||
};
|
||||
169
src/components/ReDrawer/index.vue
Normal 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>
|
||||
262
src/components/ReDrawer/type.ts
Normal 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 };
|
||||
@@ -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"),
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -27,8 +27,7 @@ export default defineComponent({
|
||||
return h(
|
||||
"svg",
|
||||
{
|
||||
class: "icon-svg",
|
||||
"aria-hidden": true
|
||||
class: "icon-svg"
|
||||
},
|
||||
{
|
||||
default: () => [
|
||||
|
||||
@@ -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" },
|
||||
|
||||
@@ -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" },
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
/** 图标属性、样式配置 */
|
||||
|
||||
@@ -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"),
|
||||
|
||||
@@ -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
|
||||
});
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<script lang="ts" setup>
|
||||
<script setup lang="ts">
|
||||
import { getConfig } from "@/config";
|
||||
|
||||
const TITLE = getConfig("Title");
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -16,7 +16,7 @@ const iconClass = computed(() => {
|
||||
"flex",
|
||||
"justify-center",
|
||||
"items-center",
|
||||
"outline-none",
|
||||
"outline-hidden",
|
||||
"rounded-[4px]",
|
||||
"cursor-pointer",
|
||||
"transition-colors",
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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) }}
|
||||
|
||||
@@ -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) &&
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 = {
|
||||
|
||||
@@ -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!";
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@@ -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;
|
||||
};
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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")
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
23
src/router/modules/codemirror.ts
Normal 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;
|
||||
@@ -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")
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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")
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@@ -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")
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
23
src/router/modules/markdown.ts
Normal 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;
|
||||
@@ -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")
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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>(
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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 ?? "",
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@use "sass:color";
|
||||
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
|
||||
|
||||
/* 整体暗色风格适配 */
|
||||
|
||||
@@ -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; /* 滚动条宽度 */
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
/* 灰色模式 */
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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>
|
||||
文本复制指令(自定义触发事件,单击复制)
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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 {
|
||||
|
||||
96
src/views/codemirror/index.vue
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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'"
|
||||
/>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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="上海" />
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
47
src/views/components/drawer/form.vue
Normal 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>
|
||||
22
src/views/components/drawer/formPrimitive.vue
Normal 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>
|
||||