Compare commits

...

22 Commits

Author SHA1 Message Date
xiaoxian521
069131a9c8 release: update 6.1.0 2025-07-31 12:07:32 +08:00
xiaoxian521
be4c4a00ec chore: update 2025-07-31 10:57:18 +08:00
xiaoxian521
9fcf54c360 chore: 升级@pureadmin/table兼容最新版element-plus 2025-07-30 16:54:55 +08:00
xiaoxian521
185a5b710a fix: 修复标签页-关闭左侧标签页关闭异常问题 2025-07-24 12:14:03 +08:00
xiaoxian521
baabe42b84 chore: 升级至vite7,更新依赖,相关兼容处理 2025-07-07 13:44:35 +08:00
xiaoxian521
2799cfd8cf chore(deps): update 2025-06-09 16:50:22 +08:00
xiaoxian521
d9a4ab8f86 chore(deps): update 2025-05-31 12:41:54 +08:00
xiaoxian521
bd5ab754ca docs: update README 2025-05-27 15:39:09 +08:00
xiaoxian521
2f2749e644 perf: 优化代码 2025-05-16 12:08:46 +08:00
xiaoxian521
b61d7b359f chore: 升级依赖,相关兼容处理 2025-05-15 10:11:22 +08:00
xiaoxian521
99f070190c chore(deps): update 2025-05-03 10:20:21 +08:00
xiaoxian521
891ad9d6a2 chore: fix typo 2025-04-21 13:37:04 +08:00
xiaoxian521
22ee607aea docs: 新增一位特别代码贡献者[tinysimple](https://github.com/tinysimple) 2025-04-21 12:38:22 +08:00
tinyThing
8255f9063b fix: 修复resetRouter未清空全部路由数据 (#1208) 2025-04-21 12:29:38 +08:00
xiaoxian521
59319aac8b chore: 升级element-plus至最新版,相关兼容处理 2025-04-19 13:25:01 +08:00
xiaoxian521
6be410a03c chore: update 2025-04-18 14:25:53 +08:00
xiaoxian521
1730ecf4ce perf: 优化导航样式 2025-04-17 14:40:07 +08:00
xiaoxian521
51c3ac8631 fix: 修复ReSegmented分段控制器组件在浅色和深色整体风格切换时的闪烁问题 2025-04-14 16:34:17 +08:00
xiaoxian521
08b7b1b641 style: update 2025-04-14 10:50:46 +08:00
xiaoxian521
1daf83cf9d release: update 6.0.0 2025-04-10 09:53:09 +08:00
xiaoxian521
a8ca71ae61 chore: update 2025-04-10 09:15:53 +08:00
xiaoming
e08626d443 refactor: 升级tailwindcssv4版本,带来更快的构建速度、更简化的安装和配置、提供专属vite插件 (#1203) 2025-04-09 19:09:45 +08:00
127 changed files with 3472 additions and 3136 deletions

2
.nvmrc
View File

@@ -1 +1 @@
v22.14.0
v22.17.1

View File

@@ -1,8 +1,54 @@
# 6.1.0 (2025-07-31)
### ✔️ Refactor
- Upgrade to `vite7`, update dependencies, and related compatibility processing
### 🐞 Bug fixes
- Fixed a flickering issue in the `ReSegmented` segmented controller component when switching between light and dark styles
- Fixed an issue where `resetRouter` did not clear all routing data
- Fixed an issue where closing the left tab in the tabs window did not work properly
### 🍏 Perf
- Optimized navigation styles
- Upgraded `@pureadmin/table` to be compatible with all `el-table` APIs in the latest `element-plus` version.
# 6.0.0 (2025-04-10)
### ✔️ Refactor
- Refactor the icon module, use `@iconify/json` to replace the `@iconify-icons/*` dependency that is no longer maintained and updated, optimize the user experience, ensure that the icon library can be continuously updated and support `Tree-shaking`
- Upgrade `tailwindcss` to `v4` version, bringing faster build speed, simpler installation and configuration, and providing a dedicated `vite` plug-in
### 🎫 Feat
- Add `Ai` chat component example
- Add `tagOnClick` tag to switch global public events
- Add code editor example
- Add `Markdown` example
- Add slider example
### 🐞 Bug fixes
- Fix `aria-hidden` error
- Fix the problem that code hints cannot be displayed when using `this` syntax and update `pinia` related syntax
### 🍏 Perf
- Fix broken links in the waterfall infinite scrolling example
- Update `vue-flow`, related compatibility processing
- Delete the deprecated dependency package `eslint-define-config`, upgrade `eslint` to the latest version, related compatibility processing
- Optimize `src/style/dark.scss` syntax
- Optimize login parameter transfer
- Use `keydown` to replace `keypress`, the `keypress` event has been deprecated
# 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
- 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/service/#max-%E7%89%88%E6%9C%AC), 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

View File

@@ -1,8 +1,54 @@
# 6.1.0 (2025-07-31)
### ✔️ Refactor
- Upgrade to `vite7`, update dependencies, and related compatibility processing
### 🐞 Bug fixes
- Fixed a flickering issue in the `ReSegmented` segmented controller component when switching between light and dark styles
- Fixed an issue where `resetRouter` did not clear all routing data
- Fixed an issue where closing the left tab in the tabs window did not work properly
### 🍏 Perf
- Optimized navigation styles
- Upgraded `@pureadmin/table` to be compatible with all `el-table` APIs in the latest `element-plus` version.
# 6.0.0 (2025-04-10)
### ✔️ Refactor
- Refactor the icon module, use `@iconify/json` to replace the `@iconify-icons/*` dependency that is no longer maintained and updated, optimize the user experience, ensure that the icon library can be continuously updated and support `Tree-shaking`
- Upgrade `tailwindcss` to `v4` version, bringing faster build speed, simpler installation and configuration, and providing a dedicated `vite` plug-in
### 🎫 Feat
- Add `Ai` chat component example
- Add `tagOnClick` tag to switch global public events
- Add code editor example
- Add `Markdown` example
- Add slider example
### 🐞 Bug fixes
- Fix `aria-hidden` error
- Fix the problem that code hints cannot be displayed when using `this` syntax and update `pinia` related syntax
### 🍏 Perf
- Fix broken links in the waterfall infinite scrolling example
- Update `vue-flow`, related compatibility processing
- Delete the deprecated dependency package `eslint-define-config`, upgrade `eslint` to the latest version, related compatibility processing
- Optimize `src/style/dark.scss` syntax
- Optimize login parameter transfer
- Use `keydown` to replace `keypress`, the `keypress` event has been deprecated
# 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
- 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/service/#max-%E7%89%88%E6%9C%AC), 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

View File

@@ -1,8 +1,54 @@
# 6.1.0 (2025-07-31)
### ✔️ Refactor
- 升级至`vite7`,更新依赖,相关兼容处理
### 🐞 Bug fixes
- 修复`ReSegmented`分段控制器组件在浅色和深色整体风格切换时的闪烁问题
- 修复`resetRouter`未清空全部路由数据问题
- 修复标签页-关闭左侧标签页关闭异常问题
### 🍏 Perf
- 优化导航样式
- 升级`@pureadmin/table`兼容最新版`element-plus``el-table`的所有`API`
# 6.0.0 (2025-04-10)
### ✔️ Refactor
- 重构图标模块,使用`@iconify/json`替换不再维护更新的`@iconify-icons/*`依赖,优化使用体验,确保图标库可持续更新并支持`Tree-shaking`
- 升级`tailwindcss``v4`版本,带来更快的构建速度、更简化的安装和配置、提供专属`vite`插件
### 🎫 Feat
- 添加`Ai`聊天组件示例
- 添加`tagOnClick`标签切换全局公共事件
- 添加代码编辑器示例
- 添加`Markdown`示例
- 添加滑块示例
### 🐞 Bug fixes
- 修复`aria-hidden`报错
- 修复使用`this`语法时无法显示代码提示的问题并更新`pinia`相关语法
### 🍏 Perf
- 修复组件-瀑布流无限滚动示例中失效的链接
- 更新`vue-flow`,相关兼容处理
- 删除已弃用的依赖包`eslint-define-config`,升级`eslint`至最新版本,相关兼容处理
- 优化`src/style/dark.scss`语法
- 优化登录传参
- 使用`keydown`替换`keypress``keypress`事件已弃用
# 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版本用户`会享有一套更现代、美观且自定义程度高的主题色
- 升级`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/service/#max-%E7%89%88%E6%9C%AC) 的用户平台强烈建议升级,后续`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

View File

@@ -31,18 +31,10 @@ The simplified version is based on the shelf extracted from [vue-pure-admin](htt
[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
## Premium service
[Click me for details](https://pure-admin.cn/pages/service/)
## `js` version
[Click me to view js version](https://pure-admin.cn/pages/js/)
## `max` version
[Click me to view the max version](https://pure-admin.cn/pages/max/)
## Tauri
[Click Watch Tauri](https://github.com/pure-admin/tauri-pure-admin)
@@ -192,6 +184,7 @@ Thank you very much for your in-depth understanding of the source code and your
| [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) |
| [tinysimple](https://github.com/tinysimple) | [code](https://github.com/pure-admin/vue-pure-admin/commits?author=tinysimple) |
## Git Contribution submission specification

View File

@@ -32,18 +32,10 @@
[点我查看 vue-pure-admin 文档](https://pure-admin.cn/)
[点我查看 @pureadmin/utils 文档](https://pure-admin-utils.netlify.app)
## 优质服务、软件外包、赞助支持
## 高级服务
[点我查看详情](https://pure-admin.cn/pages/service/)
## `js` 版本
[点我查看 js 版本](https://pure-admin.cn/pages/js/)
## `max` 版本
[点我查看 max 版本](https://pure-admin.cn/pages/max/)
## `Tauri` 版本
[点我查看 Tauri 版本](https://github.com/pure-admin/tauri-pure-admin)
@@ -193,6 +185,7 @@ docker run -dp 8080:80 --name pure-admin vue-pure-admin
| [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) |
| [tinysimple](https://github.com/tinysimple) | [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=tinysimple) |
## `Git` 贡献提交规范

View File

@@ -6,6 +6,7 @@ import svgLoader from "vite-svg-loader";
import Icons from "unplugin-icons/vite";
import type { PluginOption } from "vite";
import vueJsx from "@vitejs/plugin-vue-jsx";
import tailwindcss from "@tailwindcss/vite";
import { configCompressPlugin } from "./compress";
import removeNoMatch from "vite-plugin-router-warn";
import { visualizer } from "rollup-plugin-visualizer";
@@ -20,6 +21,7 @@ export function getPluginsList(
): PluginOption[] {
const lifecycle = process.env.npm_lifecycle_event;
return [
tailwindcss(),
vue({
template: {
compilerOptions: {

View File

@@ -1,6 +1,6 @@
{
"name": "vue-pure-admin",
"version": "5.9.0",
"version": "6.1.0",
"private": true,
"type": "module",
"scripts": {
@@ -48,134 +48,134 @@
},
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@howdyjs/mouse-menu": "^2.1.6",
"@howdyjs/mouse-menu": "^2.1.7",
"@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.1",
"@pureadmin/utils": "^2.6.0",
"@pureadmin/table": "^3.3.0",
"@pureadmin/utils": "^2.6.2",
"@vue-flow/background": "^1.3.2",
"@vue-flow/core": "^1.42.5",
"@vueuse/core": "^12.5.0",
"@vueuse/motion": "^2.2.6",
"@vue-flow/core": "^1.45.0",
"@vueuse/core": "^13.6.0",
"@vueuse/motion": "^3.0.3",
"@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.9",
"axios": "^1.11.0",
"china-area-data": "^5.0.1",
"codemirror": "^5.65.18",
"codemirror": "^5.65.19",
"codemirror-editor-vue3": "^2.8.0",
"cropperjs": "^1.6.2",
"dayjs": "^1.11.13",
"deep-chat": "^2.1.1",
"deep-chat": "^2.2.2",
"echarts": "^5.6.0",
"el-table-infinite-scroll": "^3.0.6",
"element-plus": "^2.9.4",
"element-plus": "^2.10.4",
"highlight.js": "^11.11.1",
"intro.js": "^7.2.0",
"js-cookie": "^3.0.5",
"jsbarcode": "^3.11.6",
"jsbarcode": "^3.12.1",
"localforage": "^1.10.0",
"mint-filter": "^4.0.3",
"mitt": "^3.0.1",
"mqtt": "4.3.7",
"nprogress": "^0.2.0",
"path-browserify": "^1.0.1",
"pinia": "^3.0.1",
"pinia": "^3.0.3",
"pinyin-pro": "^3.26.0",
"plus-pro-components": "^0.1.20",
"plus-pro-components": "^0.1.26",
"qrcode": "^1.5.4",
"qs": "^6.14.0",
"responsive-storage": "^2.2.0",
"sortablejs": "^1.15.6",
"swiper": "^11.2.3",
"swiper": "^11.2.10",
"typeit": "^8.8.7",
"v-contextmenu": "^3.2.0",
"v3-infinite-loading": "^1.3.2",
"vditor": "^3.10.9",
"vditor": "^3.11.1",
"version-rocket": "^1.7.4",
"vue": "^3.5.13",
"vue-i18n": "^11.1.1",
"vue-json-pretty": "^2.4.0",
"vue-pdf-embed": "^2.1.2",
"vue-router": "^4.5.0",
"vue-tippy": "^6.6.0",
"vue-types": "^5.1.3",
"vue": "^3.5.18",
"vue-i18n": "^11.1.11",
"vue-json-pretty": "^2.5.0",
"vue-pdf-embed": "^2.1.3",
"vue-router": "^4.5.1",
"vue-tippy": "^6.7.1",
"vue-types": "^6.0.0",
"vue-virtual-scroller": "2.0.0-beta.8",
"vue-waterfall-plugin-next": "^2.6.5",
"vue3-danmaku": "^1.6.1",
"vue-waterfall-plugin-next": "^2.6.7",
"vue3-danmaku": "^1.6.6",
"vue3-puzzle-vcode": "^1.1.7",
"vuedraggable": "^4.1.0",
"vxe-table": "4.6.25",
"wavesurfer.js": "^7.9.1",
"xgplayer": "^3.0.20",
"wavesurfer.js": "^7.10.1",
"xgplayer": "^3.0.22",
"xlsx": "^0.18.5"
},
"devDependencies": {
"@commitlint/cli": "^19.7.1",
"@commitlint/config-conventional": "^19.7.1",
"@commitlint/types": "^19.5.0",
"@eslint/js": "^9.24.0",
"@faker-js/faker": "^9.5.0",
"@iconify/json": "^2.2.319",
"@commitlint/cli": "^19.8.1",
"@commitlint/config-conventional": "^19.8.1",
"@commitlint/types": "^19.8.1",
"@eslint/js": "^9.32.0",
"@faker-js/faker": "^9.9.0",
"@iconify/json": "^2.2.364",
"@iconify/vue": "4.2.0",
"@intlify/unplugin-vue-i18n": "^6.0.3",
"@types/codemirror": "^5.60.15",
"@types/dagre": "^0.7.52",
"@intlify/unplugin-vue-i18n": "^6.0.8",
"@tailwindcss/vite": "^4.1.11",
"@types/codemirror": "^5.60.16",
"@types/dagre": "^0.7.53",
"@types/intro.js": "^5.1.5",
"@types/js-cookie": "^3.0.6",
"@types/node": "^20.17.19",
"@types/node": "^20.19.9",
"@types/nprogress": "^0.2.3",
"@types/path-browserify": "^1.0.3",
"@types/qrcode": "^1.5.5",
"@types/qs": "^6.9.18",
"@types/qs": "^6.14.0",
"@types/sortablejs": "^1.15.8",
"@vitejs/plugin-vue": "^5.2.1",
"@vitejs/plugin-vue-jsx": "^4.1.1",
"autoprefixer": "^10.4.20",
"@vitejs/plugin-vue": "^6.0.1",
"@vitejs/plugin-vue-jsx": "^5.0.1",
"boxen": "^8.0.1",
"code-inspector-plugin": "^0.20.0",
"cssnano": "^7.0.6",
"code-inspector-plugin": "^1.0.3",
"cssnano": "^7.1.0",
"dagre": "^0.8.5",
"eslint": "^9.24.0",
"eslint-config-prettier": "^10.1.1",
"eslint-plugin-prettier": "^5.2.6",
"eslint-plugin-vue": "^10.0.0",
"eslint": "^9.32.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.3",
"eslint-plugin-vue": "^10.3.0",
"gradient-string": "^3.0.0",
"husky": "^9.1.7",
"lint-staged": "^15.4.3",
"postcss": "^8.5.2",
"lint-staged": "^16.1.2",
"postcss": "^8.5.6",
"postcss-html": "^1.8.0",
"postcss-import": "^16.1.0",
"postcss-load-config": "^6.0.1",
"postcss-scss": "^4.0.9",
"prettier": "^3.5.1",
"prettier": "^3.6.2",
"rimraf": "^6.0.1",
"rollup-plugin-visualizer": "^5.14.0",
"sass": "^1.85.0",
"stylelint": "^16.14.1",
"stylelint-config-recess-order": "^6.0.0",
"stylelint-config-recommended-vue": "^1.6.0",
"rollup-plugin-visualizer": "^6.0.3",
"sass": "^1.89.2",
"stylelint": "^16.23.0",
"stylelint-config-recess-order": "^7.1.0",
"stylelint-config-recommended-vue": "^1.6.1",
"stylelint-config-standard-scss": "^14.0.0",
"stylelint-prettier": "^5.0.3",
"svgo": "^3.3.2",
"tailwindcss": "3.4.17",
"typescript": "^5.7.3",
"typescript-eslint": "^8.29.1",
"unplugin-icons": "^22.1.0",
"vite": "^6.1.0",
"svgo": "^4.0.0",
"tailwindcss": "^4.1.11",
"typescript": "^5.8.3",
"typescript-eslint": "^8.38.0",
"unplugin-icons": "^22.2.0",
"vite": "^7.0.6",
"vite-plugin-cdn-import": "^1.0.1",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-fake-server": "^2.2.0",
"vite-plugin-remove-console": "^2.2.0",
"vite-plugin-router-warn": "^1.0.0",
"vite-svg-loader": "^5.1.0",
"vue-eslint-parser": "^10.1.3",
"vue-tsc": "^2.2.0"
"vue-eslint-parser": "^10.2.0",
"vue-tsc": "^3.0.4"
},
"engines": {
"node": "^18.18.0 || ^20.9.0 || >=22.0.0",
"node": "^20.19.0 || >=22.12.0",
"pnpm": ">=9"
},
"pnpm": {
@@ -200,6 +200,10 @@
"esbuild",
"typeit",
"vue-demi"
],
"ignoredBuiltDependencies": [
"@tailwindcss/oxide",
"vue3-danmaku"
]
}
}

5438
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

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

View File

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

File diff suppressed because one or more lines are too long

View File

@@ -95,7 +95,7 @@ function onMouseleave() {
:view-style="{ overflow: 'hidden' }"
class="border-t border-[#e5e7eb]"
>
<ul class="flex flex-wrap justify-around mb-1">
<ul class="flex flex-wrap justify-around mb-1!">
<li
v-for="(animate, index) in animatesList"
:key="index"

View File

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

View File

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

View File

@@ -114,7 +114,8 @@ onMounted(() => {
:style="{
cursor: item.disabled === false ? 'pointer' : 'not-allowed',
color: item.disabled === false ? '' : '#00000040',
background: 'transparent'
background: 'transparent',
border: 'none'
}"
@click="onControl(item, key)"
>

View File

@@ -23,9 +23,9 @@
function h() {
n || ((n = !0), o());
}
(t = function () {
((t = function () {
var c, t, e, o;
((o = document.createElement("div")).innerHTML = i),
(((o = document.createElement("div")).innerHTML = i),
(i = null),
(e = o.getElementsByTagName("svg")[0]) &&
((e.style.position = "absolute"),
@@ -35,13 +35,13 @@
(c = e),
(t = document.body).firstChild
? ((o = c), (e = t.firstChild).parentNode.insertBefore(o, e))
: t.appendChild(c));
: t.appendChild(c)));
}),
document.addEventListener
? ~["complete", "loaded", "interactive"].indexOf(document.readyState)
? setTimeout(t, 0)
: ((e = function () {
document.removeEventListener("DOMContentLoaded", e, !1), t();
(document.removeEventListener("DOMContentLoaded", e, !1), t());
}),
document.addEventListener("DOMContentLoaded", e, !1))
: document.attachEvent &&
@@ -58,5 +58,5 @@
})(),
(a.onreadystatechange = function () {
"complete" == a.readyState && ((a.onreadystatechange = null), h());
}));
})));
})(window);

View File

@@ -158,7 +158,7 @@ watch(
:name="pane.name"
>
<el-scrollbar height="220px">
<ul class="flex flex-wrap px-2 ml-2">
<ul class="flex flex-wrap px-2! ml-2!">
<li
v-for="(item, key) in pageList"
:key="key"
@@ -198,7 +198,7 @@ watch(
@current-change="onCurrentChange"
/>
<el-button
class="justify-end mr-2 ml-2"
class="justify-end mx-2!"
type="danger"
size="small"
text

View File

@@ -49,8 +49,10 @@ export function useRenderIcon(icon: any, attrs?: iconType): Component {
return defineComponent({
name: "Icon",
render() {
const IconifyIcon =
icon && icon.includes(":") ? IconifyIconOnline : IconifyIconOffline;
if (!icon) return;
const IconifyIcon = icon.includes(":")
? IconifyIconOnline
: IconifyIconOffline;
return h(IconifyIcon, {
icon,
...attrs

View File

@@ -54,8 +54,8 @@ const icons = [
// Remix Icon: https://github.com/Remix-Design/RemixIcon
["ri/mind-map", RiMindMap],
["ri/admin-fill", RiAdminFill],
["ri/links-fill", RiTableLine],
["ri/table-line", RiLinksFill],
["ri/table-line", RiTableLine],
["ri/links-fill", RiLinksFill],
["ri/admin-line", RiAdminLine],
["ri/list-check", RiListCheck],
["ri/search-line", RiSearchLine],

View File

@@ -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"
];
});
@@ -255,12 +255,12 @@ export default defineComponent({
<div
{...attrs}
class={[
"w-[99/100]",
"w-full",
"px-2",
"pb-2",
"bg-bg_color",
isFullscreen.value
? ["!w-full", "!h-full", "z-[2002]", "fixed", "inset-0"]
? ["h-full!", "z-2002", "fixed", "inset-0"]
: "mt-2"
]}
>
@@ -317,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}
@@ -347,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;

View File

@@ -98,7 +98,6 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: 0.1s;
}
.pure-segmented-group {

View File

@@ -33,10 +33,10 @@
}
l();
}
(t = function () {
((t = function () {
var e,
t = document.createElement("div");
(t.innerHTML = i),
((t.innerHTML = i),
(i = null),
(t = t.getElementsByTagName("svg")[0]) &&
((t.style.position = "absolute"),
@@ -44,13 +44,15 @@
(t.style.height = 0),
(t.style.overflow = "hidden"),
(t = t),
(e = document.body).firstChild ? m(t, e.firstChild) : e.appendChild(t));
(e = document.body).firstChild
? m(t, e.firstChild)
: e.appendChild(t)));
}),
document.addEventListener
? ~["complete", "loaded", "interactive"].indexOf(document.readyState)
? setTimeout(t, 0)
: ((n = function () {
document.removeEventListener("DOMContentLoaded", n, !1), t();
(document.removeEventListener("DOMContentLoaded", n, !1), t());
}),
document.addEventListener("DOMContentLoaded", n, !1))
: document.attachEvent &&
@@ -60,5 +62,5 @@
a(),
(o.onreadystatechange = function () {
"complete" == o.readyState && ((o.onreadystatechange = null), l());
}));
})));
})(window);

View File

@@ -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"
];
});
@@ -248,12 +248,12 @@ export default defineComponent({
<div
{...attrs}
class={[
"w-[99/100]",
"w-full",
"px-2",
"pb-2",
"bg-bg_color",
isFullscreen.value
? ["!w-full", "!h-full", "z-[2002]", "fixed", "inset-0"]
? ["h-full!", "z-2002", "fixed", "inset-0"]
: "mt-2"
]}
>
@@ -310,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}
@@ -340,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;

View File

@@ -13,10 +13,10 @@ $ripple-animation-visible-opacity: 0.25 !default;
z-index: 0;
width: 100%;
height: 100%;
contain: strict;
overflow: hidden;
pointer-events: none;
border-radius: inherit;
contain: strict;
}
&__animation {

View File

@@ -10,7 +10,7 @@ const TITLE = getConfig("Title");
>
Copyright © 2020-present
<a
class="hover:text-primary"
class="hover:text-primary!"
href="https://github.com/pure-admin"
target="_blank"
>

View File

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

View File

@@ -49,7 +49,7 @@ function hoverDescription(event, description) {
<template>
<div
class="notice-container border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]"
class="notice-container border-0 border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]"
>
<el-avatar
v-if="noticeItem.avatar"

View File

@@ -16,7 +16,7 @@ const iconClass = computed(() => {
"flex",
"justify-center",
"items-center",
"outline-none",
"outline-hidden",
"rounded-[4px]",
"cursor-pointer",
"transition-colors",
@@ -51,7 +51,7 @@ onBeforeUnmount(() => {
<div class="right-panel-background" />
<div ref="target" class="right-panel bg-bg_color">
<div
class="project-configuration border-b-[1px] border-solid border-[var(--pure-border-color)]"
class="project-configuration border-0 border-b-[1px] border-solid border-[var(--pure-border-color)]"
>
<h4 class="dark:text-white">
{{ t("panel.pureSystemSet") }}
@@ -78,7 +78,7 @@ onBeforeUnmount(() => {
</el-scrollbar>
<div
class="flex justify-end p-3 border-t-[1px] border-solid border-[var(--pure-border-color)]"
class="flex justify-end p-3 border-0 border-t-[1px] border-solid border-[var(--pure-border-color)]"
>
<el-button
v-tippy="{

View File

@@ -6,8 +6,8 @@ import { useRouter } from "vue-router";
import SearchResult from "./SearchResult.vue";
import SearchFooter from "./SearchFooter.vue";
import { useNav } from "@/layout/hooks/useNav";
import { transformI18n } from "@/plugins/i18n";
import SearchHistory from "./SearchHistory.vue";
import { transformI18n, $t } from "@/plugins/i18n";
import type { optionsItem, dragItem } from "../types";
import { ref, computed, shallowRef, watch } from "vue";
import { useDebounceFn, onKeyStroke } from "@vueuse/core";

View File

@@ -20,8 +20,8 @@ import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import { useDark, useGlobal, debounce, isNumber } from "@pureadmin/utils";
import Check from "~icons/ep/check";
import LeftArrow from "~icons/ri/arrow-left-s-line";
import RightArrow from "~icons/ri/arrow-right-s-line";
import LeftArrow from "~icons/ri/arrow-left-s-line?width=20&height=20";
import RightArrow from "~icons/ri/arrow-right-s-line?width=20&height=20";
import DayIcon from "@/assets/svg/day.svg?component";
import DarkIcon from "@/assets/svg/dark.svg?component";
import SystemIcon from "@/assets/svg/system.svg?component";
@@ -189,7 +189,7 @@ const getThemeColor = computed(() => {
});
const pClass = computed(() => {
return ["mb-[12px]", "font-medium", "text-sm", "dark:text-white"];
return ["mb-[12px]!", "font-medium", "text-sm", "dark:text-white"];
});
const themeOptions = computed<Array<OptionsType>>(() => {
@@ -335,7 +335,7 @@ onUnmounted(() => removeMatchMedia);
"
/>
<p :class="['mt-5', pClass]">{{ t("panel.pureThemeColor") }}</p>
<p :class="['mt-5!', pClass]">{{ t("panel.pureThemeColor") }}</p>
<ul class="theme-color">
<li
v-for="(item, index) in themeColors"
@@ -354,7 +354,7 @@ onUnmounted(() => removeMatchMedia);
</li>
</ul>
<p :class="['mt-5', pClass]">{{ t("panel.pureLayoutModel") }}</p>
<p :class="['mt-5!', pClass]">{{ t("panel.pureLayoutModel") }}</p>
<ul class="pure-theme">
<li
ref="verticalRef"
@@ -397,7 +397,7 @@ onUnmounted(() => removeMatchMedia);
</ul>
<span v-if="useAppStoreHook().getViewportWidth > 1280">
<p :class="['mt-5', pClass]">{{ t("panel.pureStretch") }}</p>
<p :class="['mt-5!', pClass]">{{ t("panel.pureStretch") }}</p>
<Segmented
resize
class="mb-2 select-none"
@@ -426,21 +426,19 @@ onUnmounted(() => removeMatchMedia);
>
<IconifyIconOffline
:icon="settings.stretch ? RightArrow : LeftArrow"
height="20"
/>
<div
class="flex-grow border-b border-dashed"
class="grow border-0 border-b border-dashed"
style="border-color: var(--el-color-primary)"
/>
<IconifyIconOffline
:icon="settings.stretch ? LeftArrow : RightArrow"
height="20"
/>
</div>
</button>
</span>
<p :class="['mt-4', pClass]">{{ t("panel.pureTagsStyle") }}</p>
<p :class="['mt-4!', pClass]">{{ t("panel.pureTagsStyle") }}</p>
<Segmented
resize
class="select-none"
@@ -449,7 +447,7 @@ onUnmounted(() => removeMatchMedia);
@change="onChange"
/>
<p class="mt-5 font-medium text-sm dark:text-white">
<p class="mt-5! font-medium text-sm dark:text-white">
{{ t("panel.pureInterfaceDisplay") }}
</p>
<ul class="setting">

View File

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

View File

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

View File

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

View File

@@ -61,6 +61,21 @@ const getSubMenuIconStyle = computed((): CSSProperties => {
};
});
const textClass = computed(() => {
const item = props.item;
const baseClass = "w-full! text-inherit!";
if (
layout.value !== "horizontal" &&
isCollapse.value &&
!toRaw(item.meta.icon) &&
((layout.value === "vertical" && item.parentId === null) ||
(layout.value === "mix" && item.pathList.length === 2))
) {
return `${baseClass} min-w-[54px]! text-center! px-3!`;
}
return baseClass;
});
const expandCloseIcon = computed(() => {
if (!getConfig()?.MenuArrowIconNoTransition) return "";
return {
@@ -144,7 +159,7 @@ function resolvePath(routePath) {
item?.pathList?.length === 2)
"
truncated
class="!w-full !pl-4 !text-inherit"
class="w-full! px-3! min-w-[54px]! text-center! text-inherit!"
>
{{ transformI18n(onlyOneChild.meta.title) }}
</el-text>
@@ -156,7 +171,7 @@ function resolvePath(routePath) {
offset: [0, -10],
theme: tooltipEffect
}"
class="!w-full !text-inherit"
class="w-full! text-inherit!"
>
{{ transformI18n(onlyOneChild.meta.title) }}
</ReText>
@@ -195,15 +210,7 @@ function resolvePath(routePath) {
offset: [0, -10],
theme: tooltipEffect
}"
:class="{
'!w-full': true,
'!text-inherit': true,
'!pl-4':
layout !== 'horizontal' &&
isCollapse &&
!toRaw(item.meta.icon) &&
item.parentId === null
}"
:class="textClass"
>
{{ transformI18n(item.meta.title) }}
</ReText>

View File

@@ -23,7 +23,7 @@ const iconClass = computed(() => {
"mb-1",
"w-[16px]",
"h-[16px]",
"inline-block",
"inline-block!",
"align-middle",
"cursor-pointer",
"duration-[100ms]"

View File

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

View File

@@ -254,7 +254,7 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
if (tag === "other") {
spliceRoute(1, 1, true);
} else if (tag === "left") {
spliceRoute(fixedTags.length, valueIndex - 1, true);
spliceRoute(fixedTags.length, valueIndex - fixedTags.length);
} else if (tag === "right") {
spliceRoute(valueIndex + 1, multiTags.value.length);
} else {
@@ -589,7 +589,7 @@ onBeforeUnmount(() => {
>
<template v-if="showModel !== 'chrome'">
<span
class="tag-title dark:!text-text_color_primary dark:hover:!text-primary"
class="tag-title dark:text-text_color_primary! dark:hover:text-primary!"
>
{{ transformI18n(item.meta.title) }}
</span>

View File

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

View File

@@ -7,7 +7,13 @@ import { buildHierarchyTree } from "@/utils/tree";
import remainingRouter from "./modules/remaining";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { usePermissionStoreHook } from "@/store/modules/permission";
import { isUrl, openLink, storageLocal, isAllEmpty } from "@pureadmin/utils";
import {
isUrl,
openLink,
cloneDeep,
isAllEmpty,
storageLocal
} from "@pureadmin/utils";
import {
ascending,
getTopMenu,
@@ -21,9 +27,9 @@ import {
} from "./utils";
import {
type Router,
createRouter,
type RouteRecordRaw,
type RouteComponent
type RouteComponent,
createRouter
} from "vue-router";
import {
type DataInfo,
@@ -55,6 +61,9 @@ export const constantRoutes: Array<RouteRecordRaw> = formatTwoStageRoutes(
formatFlatteningRoutes(buildHierarchyTree(ascending(routes.flat(Infinity))))
);
/** 初始的静态路由,用于退出登录时重置路由 */
const initConstantRoutes: Array<RouteRecordRaw> = cloneDeep(constantRoutes);
/** 用于渲染菜单,保持原始层级 */
export const constantMenus: Array<RouteComponent> = ascending(
routes.flat(Infinity)
@@ -87,17 +96,13 @@ export const router: Router = createRouter({
/** 重置路由 */
export function resetRouter() {
router.getRoutes().forEach(route => {
const { name, meta } = route;
if (name && router.hasRoute(name) && meta?.backstage) {
router.removeRoute(name);
router.options.routes = formatTwoStageRoutes(
formatFlatteningRoutes(
buildHierarchyTree(ascending(routes.flat(Infinity)))
)
);
router.clearRoutes();
for (const route of initConstantRoutes.concat(...(remainingRouter as any))) {
router.addRoute(route);
}
});
router.options.routes = formatTwoStageRoutes(
formatFlatteningRoutes(buildHierarchyTree(ascending(routes.flat(Infinity))))
);
usePermissionStoreHook().clearAllCachePage();
}

View File

@@ -172,6 +172,8 @@ function handleAsyncRoutes(routeList) {
const flattenRouters: any = router
.getRoutes()
.find(n => n.path === "/");
// 保持router.options.routes[0].children与path为"/"的children一致防止数据不一致导致异常
flattenRouters.children = router.options.routes[0].children;
router.addRoute(flattenRouters);
}
}

View File

@@ -1,12 +1,3 @@
*,
::before,
::after {
box-sizing: border-box;
border-color: currentColor;
border-style: solid;
border-width: 0;
}
#app {
width: 100%;
height: 100%;

View File

@@ -666,6 +666,10 @@ body[layout="horizontal"] {
@include merge-style($sideBarWidth);
.el-menu {
--el-menu-hover-text-color: var(--pure-theme-menu-text) !important;
}
.fixed-header,
.main-container {
transition: none !important;
@@ -687,6 +691,7 @@ body[layout="mix"] {
.el-menu {
--el-menu-hover-bg-color: transparent !important;
--el-menu-hover-text-color: var(--pure-theme-menu-text) !important;
}
.hideSidebar {

View File

@@ -1,21 +1,46 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);
@layer components {
.flex-c {
@custom-variant dark (&:is(.dark *));
@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);
}
/*
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.
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;
}
.flex-ac {
@utility flex-ac {
@apply flex justify-around items-center;
}
.flex-bc {
@utility flex-bc {
@apply flex justify-between items-center;
}
.navbar-bg-hover {
@apply dark:text-white dark:hover:!bg-[#242424];
}
@utility navbar-bg-hover {
@apply dark:text-white dark:hover:bg-[#242424]!;
}

View File

@@ -8,6 +8,8 @@ type messageTypes = "info" | "success" | "warning" | "error";
interface MessageParams {
/** 消息类型,可选 `info` 、`success` 、`warning` 、`error` ,默认 `info` */
type?: messageTypes;
/** 是否纯色,默认 `false` */
plain?: boolean;
/** 自定义图标,该属性会覆盖 `type` 的图标 */
icon?: any;
/** 是否将 `message` 属性作为 `HTML` 片段处理,默认 `false` */
@@ -18,14 +20,14 @@ interface MessageParams {
duration?: number;
/** 是否显示关闭按钮,默认值 `false` */
showClose?: boolean;
/** 文字是否居中,默认 `false` */
center?: boolean;
/** `Message` 距离窗口顶部的偏移量,默认 `20` */
/** `Message` 距离窗口顶部的偏移量,默认 `16` */
offset?: number;
/** 设置组件的根元素,默认 `document.body` */
appendTo?: string | HTMLElement;
/** 合并内容相同的消息,不支持 `VNode` 类型的消息,默认值 `false` */
grouping?: boolean;
/** 重复次数,类似于 `Badge` 。当和 `grouping` 属性一起使用时作为初始数量使用,默认值 `1` */
repeatNum?: number;
/** 关闭时的回调函数, 参数为被关闭的 `message` 实例 */
onClose?: Function | null;
}
@@ -48,28 +50,30 @@ const message = (
const {
icon,
type = "info",
plain = false,
dangerouslyUseHTMLString = false,
customClass = "antd",
duration = 2000,
showClose = false,
center = false,
offset = 20,
offset = 16,
appendTo = document.body,
grouping = false,
repeatNum = 1,
onClose
} = params;
return ElMessage({
message,
type,
icon,
type,
plain,
dangerouslyUseHTMLString,
duration,
showClose,
center,
offset,
appendTo,
grouping,
repeatNum,
// 全局搜 pure-message 即可知道该类的样式位置
customClass: customClass === "antd" ? "pure-message" : "",
onClose: () => (isFunction(onClose) ? onClose() : null)

View File

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

View File

@@ -51,7 +51,9 @@ const load = () => {
代码位置 src/views/able/infinite-scroll.vue
</el-link>
</template>
<p class="mb-2">{{ isBottom ? "已加载全部页" : `加载到第 ${page}` }}</p>
<div class="mb-2">
{{ isBottom ? "已加载全部页" : `加载到第 ${page}` }}
</div>
<el-table
v-el-table-infinite-scroll="load"
border

View File

@@ -194,7 +194,7 @@ onUnmounted(() => {
基于
<el-link
type="primary"
:underline="false"
underline="never"
href="https://github.com/mqttjs/MQTT.js"
target="_blank"
>
@@ -203,7 +203,7 @@ onUnmounted(() => {
免费的公共MQTT代理
<el-link
type="primary"
:underline="false"
underline="never"
href="broker.emqx.io"
target="_blank"
>

View File

@@ -21,8 +21,8 @@ defineOptions({
</div>
</template>
<p v-html="html('带 音 调')" />
<p class="mt-2" v-html="html('不 带 音 调', { toneType: 'none' })" />
<p class="mt-2 custom" v-html="html('自 定 义 样 式')" />
<p class="mt-2!" v-html="html('不 带 音 调', { toneType: 'none' })" />
<p class="mt-2! custom" v-html="html('自 定 义 样 式')" />
</el-card>
</template>

View File

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

View File

@@ -45,6 +45,6 @@ function onInput() {
</el-tag>
</div>
<el-input v-model="modelValue" @input="onInput" />
<p class="mt-2">{{ modelValue }}</p>
<p class="mt-2!">{{ modelValue }}</p>
</el-card>
</template>

View File

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

View File

@@ -103,13 +103,13 @@ 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" />
<div v-show="totalTime" class="flex justify-between">
<span class="text-[#81888f]">00:00</span>
<h1 class="text-4xl mt-2">{{ curTime }}</h1>
<h1 class="text-4xl mt-2!">{{ curTime }}</h1>
<span class="text-[#81888f]">{{ totalTime }}</span>
</div>
<div v-show="totalTime" class="flex mt-2 w-[180px] justify-around m-auto">

View File

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

View File

@@ -43,7 +43,7 @@ function onClick(item) {
deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
]"
>
<h3 class="my-8">账户管理</h3>
<h3 class="my-8!">账户管理</h3>
<div v-for="(item, index) in list" :key="index">
<div class="flex items-center">
<div class="flex-1">

View File

@@ -38,7 +38,7 @@ function onChange(val, item) {
deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
]"
>
<h3 class="my-8">偏好设置</h3>
<h3 class="my-8!">偏好设置</h3>
<div v-for="(item, index) in list" :key="index">
<div class="flex items-center">
<div class="flex-1">

View File

@@ -110,7 +110,7 @@ getMine().then(res => {
deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
]"
>
<h3 class="my-8">个人信息</h3>
<h3 class="my-8!">个人信息</h3>
<el-form
ref="userInfoFormRef"
label-position="top"
@@ -128,7 +128,7 @@ getMine().then(res => {
:show-file-list="false"
:on-change="onChange"
>
<el-button plain class="ml-4">
<el-button plain class="ml-4!">
<IconifyIconOffline :icon="uploadLine" />
<span class="ml-2">更新头像</span>
</el-button>

View File

@@ -78,7 +78,7 @@ onMounted(() => {
deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
]"
>
<h3 class="my-8">安全日志</h3>
<h3 class="my-8!">安全日志</h3>
<pure-table
row-key="id"
table-layout="auto"

View File

@@ -70,26 +70,28 @@ 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]"
<div
class="h-[50px]! text-[var(--pure-theme-menu-text)] cursor-pointer text-sm transition-all duration-300 ease-in-out hover:scale-105 will-change-transform transform-gpu origin-center hover:text-base! hover:text-[var(--pure-theme-menu-title-hover)]!"
@click="router.go(-1)"
>
<div class="flex items-center">
<div
class="h-full flex items-center px-[var(--el-menu-base-level-padding)]"
>
<IconifyIconOffline :icon="leftLine" />
<span class="ml-2">返回</span>
</div>
</el-menu-item>
</div>
<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>

View File

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

View File

@@ -109,7 +109,7 @@ watch(size, val =>
代码位置 src/views/components/check-button.vue
</el-link>
</template>
<p class="mb-2">单选紧凑风格的按钮样式</p>
<div class="mb-2">单选紧凑风格的按钮样式</div>
<el-radio-group
v-model="radio"
:size="dynamicSize"
@@ -121,7 +121,7 @@ watch(size, val =>
</el-radio-group>
<el-divider />
<p class="mb-2">单选带有边框</p>
<div class="mb-2">单选带有边框</div>
<el-radio-group
v-model="radioBox"
:size="dynamicSize"
@@ -133,7 +133,7 @@ watch(size, val =>
</el-radio-group>
<el-divider />
<p class="mb-2">单选自定义内容</p>
<div class="mb-2">单选自定义内容</div>
<el-radio-group
v-model="radioCustom"
:size="dynamicSize"
@@ -160,7 +160,7 @@ watch(size, val =>
</el-radio-group>
<el-divider />
<p class="mb-2">多选紧凑风格的按钮样式</p>
<div class="mb-2">多选紧凑风格的按钮样式</div>
<el-checkbox-group
v-model="checkboxGroup"
:size="dynamicSize"
@@ -172,7 +172,7 @@ watch(size, val =>
</el-checkbox-group>
<el-divider />
<p class="mb-2">多选带有边框</p>
<div class="mb-2">多选带有边框</div>
<el-checkbox-group
v-model="checkboxGroupBox"
:size="dynamicSize"
@@ -184,7 +184,7 @@ watch(size, val =>
</el-checkbox-group>
<el-divider />
<p class="mb-2">多选来点不一样的体验</p>
<div class="mb-2">多选来点不一样的体验</div>
<el-checkbox-group
v-model="checkboxGroupCustom"
class="pure-checkbox"
@@ -218,14 +218,14 @@ watch(size, val =>
</el-checkbox-group>
<el-divider />
<p>可控制间距的按钮样式</p>
<div>可控制间距的按钮样式</div>
<el-slider
v-model="spaceSize"
class="mb-2 !w-[300px]"
class="mb-2 w-[300px]!"
:show-tooltip="false"
:disabled="size === 'disabled'"
/>
<p class="mb-2">单选</p>
<div class="mb-2">单选</div>
<el-space wrap :size="spaceSize">
<el-check-tag
v-for="(tag, index) in checkTag"
@@ -241,7 +241,7 @@ watch(size, val =>
{{ tag.title }}
</el-check-tag>
</el-space>
<p class="mb-2 mt-4">
<div class="mb-2 mt-4">
多选
{{
getKeyList(
@@ -249,7 +249,7 @@ watch(size, val =>
"title"
)
}}
</p>
</div>
<el-space wrap :size="spaceSize">
<el-check-tag
v-for="(tag, index) in checkGroupTag"
@@ -267,7 +267,7 @@ watch(size, val =>
</el-space>
<el-divider />
<p class="mb-2">单个可选按钮</p>
<div class="mb-2">单个可选按钮</div>
<el-check-tag
:class="[
'select-none',

View File

@@ -69,7 +69,7 @@ watch(size, val =>
</el-link>
</template>
<p class="mb-2 mt-4">单选</p>
<div class="mb-2 mt-4">单选</div>
<PlusCheckCardGroup
v-model="list"
:options="options"
@@ -77,7 +77,7 @@ watch(size, val =>
:disabled="size === 'disabled'"
/>
<p class="mb-2 mt-4">多选</p>
<div class="mb-2 mt-4">多选</div>
<PlusCheckCardGroup
v-model="list1"
:options="options"

View File

@@ -50,12 +50,12 @@ const handleChange = (val: string[]) => {
</el-link>
</template>
<p class="mb-2">基础用法</p>
<div class="mb-2">基础用法</div>
<el-radio-group v-model="radio" class="mb-3">
<el-radio value="">可同时展开多个面板</el-radio>
<el-radio value="accordion">每次只能展开一个面板</el-radio>
</el-radio-group>
<el-button size="small" text bg class="ml-8 mb-1" @click="onClick">
<el-button size="small" text bg class="ml-8! mb-1!" @click="onClick">
外部触发打开、关闭
</el-button>
<el-collapse

View File

@@ -73,7 +73,7 @@ function onClick() {
</el-link>
</template>
<p class="mb-2">不同尺寸、选择透明度、预定义颜色</p>
<div class="mb-2">不同尺寸、选择透明度、预定义颜色</div>
<el-color-picker
v-model="color"
show-alpha
@@ -83,7 +83,7 @@ function onClick() {
/>
<el-divider />
<p class="mb-2">外部触发器</p>
<div class="mb-2">外部触发器</div>
<el-space wrap>
<el-color-picker
ref="colorPickerRef"

View File

@@ -1,6 +1,6 @@
<template>
<div>
<p class="mb-2">基础用法</p>
<div class="mb-2">基础用法</div>
<div v-contextmenu:contextmenu class="wrapper">
<code>右键点击此区域</code>
</div>

View File

@@ -1,6 +1,6 @@
<template>
<div>
<p class="mb-2">动态菜单</p>
<div class="mb-2">动态菜单</div>
<div v-contextmenu:contextmenu class="wrapper">
<code>右键点击此区域</code>
</div>

View File

@@ -1,6 +1,6 @@
<template>
<div>
<p class="mb-2">按钮组</p>
<div class="mb-2">按钮组</div>
<div v-contextmenu:contextmenu class="wrapper">
<code>右键点击此区域</code>
</div>

View File

@@ -160,11 +160,11 @@ watch(size, val =>
</el-link>
</template>
<p class="mb-2">选择某一天</p>
<div class="mb-2">选择某一天</div>
<el-date-picker
v-model="value"
type="date"
class="!w-[160px]"
class="w-[160px]!"
placeholder="请选择"
:disabled-date="disabledDate"
:shortcuts="shortcuts"
@@ -175,12 +175,12 @@ watch(size, val =>
:disabled="size === 'disabled'"
/>
<p class="mb-2 mt-4">选择周、月、年或多个日期</p>
<div class="mb-2 mt-4">选择周、月、年或多个日期</div>
<el-space wrap>
<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,18 +205,18 @@ watch(size, val =>
<el-date-picker
v-model="value4"
type="dates"
class="!w-[160px]"
class="w-[160px]!"
placeholder="选择多个日期"
:size="dynamicSize"
:disabled="size === 'disabled'"
/>
</el-space>
<p class="mb-2 mt-4">选择一段时间</p>
<div class="mb-2 mt-4">选择一段时间</div>
<el-date-picker
v-model="value5"
type="daterange"
class="!w-[240px]"
class="w-[240px]!"
unlink-panels
range-separator="至"
start-placeholder="开始时间"
@@ -229,7 +229,7 @@ watch(size, val =>
:disabled="size === 'disabled'"
/>
<p class="mb-2 mt-4">选择月份范围</p>
<div class="mb-2 mt-4">选择月份范围</div>
<el-date-picker
v-model="value6"
type="monthrange"
@@ -245,7 +245,7 @@ watch(size, val =>
:disabled="size === 'disabled'"
/>
<p class="mb-2 mt-4">日期格式</p>
<div class="mb-2 mt-4">日期格式</div>
<el-radio-group
v-model="dateFormat"
class="mb-2"
@@ -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"
@@ -271,18 +271,18 @@ watch(size, val =>
<span class="ml-2">{{ value7 }}</span>
</el-space>
<p class="mb-2 mt-4">自定义前缀</p>
<div class="mb-2 mt-4">自定义前缀</div>
<el-date-picker
v-model="value8"
type="date"
class="!w-[160px]"
class="w-[160px]!"
placeholder="请选择日期"
:prefix-icon="useRenderIcon('twemoji:spiral-calendar')"
:size="dynamicSize"
:disabled="size === 'disabled'"
/>
<p class="mb-2 mt-4">自定义内容</p>
<div class="mb-2 mt-4">自定义内容</div>
<el-date-picker
v-model="value9"
type="date"

View File

@@ -186,18 +186,18 @@ watch(size, val =>
</el-link>
</template>
<p class="mb-2">日期和时间点</p>
<div class="mb-2">日期和时间点</div>
<el-date-picker
v-model="value"
type="datetime"
class="!w-[200px]"
class="w-[200px]!"
placeholder="请选择日期时间"
:shortcuts="shortcuts"
:size="dynamicSize"
:disabled="size === 'disabled'"
/>
<p class="mb-2 mt-4">日期时间格式</p>
<div class="mb-2 mt-4">日期时间格式</div>
<el-radio-group
v-model="datetimeFormat"
class="mb-2"
@@ -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"
@@ -223,7 +223,7 @@ watch(size, val =>
<span class="ml-2">{{ value1 }}</span>
</el-space>
<p class="mb-2 mt-4">日期和时间范围</p>
<div class="mb-2 mt-4">日期和时间范围</div>
<el-date-picker
v-model="value2"
type="datetimerange"
@@ -238,9 +238,9 @@ watch(size, val =>
:disabled="size === 'disabled'"
/>
<p class="mb-2 mt-4">
<div class="mb-2 mt-4">
弹出面板位置可控(如果弹出位置不足以完整展示面板会自动调整位置)
</p>
</div>
<el-space wrap class="w-[400px]">
<el-check-tag
v-for="(tag, index) in checkTag"

View File

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

View File

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

View File

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

View File

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

View File

@@ -84,7 +84,7 @@ watch(size, val =>
</el-link>
</template>
<p class="mb-2">基础按钮</p>
<div class="mb-2">基础按钮</div>
<el-radio-group v-model="baseRadio" class="mb-3">
<el-radio label="default" value="default" />
<el-radio label="plain" value="plain" />
@@ -117,7 +117,7 @@ watch(size, val =>
</el-space>
<el-divider />
<p class="mb-4">加载状态按钮</p>
<div class="mb-4">加载状态按钮</div>
<el-button
text
bg
@@ -166,7 +166,7 @@ watch(size, val =>
</el-button>
<el-divider />
<p class="mb-4">自定义元素标签。例如按钮、div、链接</p>
<div class="mb-4">自定义元素标签。例如按钮、div、链接</div>
<el-button :size="dynamicSize" :disabled="size === 'disabled'">
button 标签
</el-button>
@@ -196,7 +196,7 @@ watch(size, val =>
</el-button>
<el-divider />
<p class="mb-4">自定义颜色</p>
<div class="mb-4">自定义颜色</div>
<el-space wrap>
<el-button
color="#626aef"

View File

@@ -25,7 +25,7 @@ defineOptions({
</el-link>
</template>
<h4 class="mb-4">Element Plus 的消息提示点击弹出提示信息</h4>
<h4 class="mb-4!">Element Plus 的消息提示点击弹出提示信息</h4>
<el-space wrap>
<el-button
@@ -121,7 +121,7 @@ defineOptions({
<el-divider />
<h4 class="mb-4">
<h4 class="mb-4!">
类似 Ant Design 风格的消息提示点击弹出提示信息基于 ElMessage
样式改版不会影响 ElMessage
原本样式使用和打包大小成本极低并适配整体暗色风格

View File

@@ -32,7 +32,7 @@ const format = percentage => (percentage === 100 ? "Full" : `${percentage}%`);
</el-link>
</template>
<p class="mb-4">直线进度条动画</p>
<div class="mb-4">直线进度条动画</div>
<div class="w-1/4">
<el-progress indeterminate :percentage="50" class="mb-4" />
<el-progress
@@ -61,7 +61,7 @@ const format = percentage => (percentage === 100 ? "Full" : `${percentage}%`);
/>
</div>
<p class="mb-4">进度条内显示百分比标识</p>
<div class="mb-4">进度条内显示百分比标识</div>
<div class="w-1/4">
<el-progress
:text-inside="true"
@@ -97,7 +97,7 @@ const format = percentage => (percentage === 100 ? "Full" : `${percentage}%`);
/>
</div>
<p class="mb-4">自定义内容</p>
<div class="mb-4">自定义内容</div>
<div class="w-1/4 demo-progress">
<el-progress :percentage="50">
<el-button text>自定义内容</el-button>

View File

@@ -220,39 +220,39 @@ watch(size, val => (dynamicSize.value = size.value));
</el-link>
</template>
<el-scrollbar>
<p class="mb-2">
<div class="mb-2">
基础用法v-model<span class="text-primary">
{{ optionsBasis[value].label }}
</span>
</p>
</div>
<Segmented v-model="value" :options="optionsBasis" :size="dynamicSize" />
<el-divider />
<p class="mb-2">tooltip 提示</p>
<div class="mb-2">tooltip 提示</div>
<Segmented :options="optionsTooltip" :size="dynamicSize" />
<el-divider />
<p class="mb-2">change 事件</p>
<div class="mb-2">change 事件</div>
<Segmented
:options="optionsChange"
:size="dynamicSize"
@change="onChange"
/>
<el-divider />
<p class="mb-2">禁用</p>
<div class="mb-2">禁用</div>
<Segmented :options="optionsDisabled" :size="dynamicSize" />
<el-divider />
<p class="mb-2">全局禁用</p>
<div class="mb-2">全局禁用</div>
<Segmented :options="optionsBasis" :size="dynamicSize" disabled />
<el-divider />
<p class="mb-2">block 属性(将宽度调整为父元素宽度)</p>
<div class="mb-2">block 属性(将宽度调整为父元素宽度)</div>
<Segmented :options="optionsBlock" block :size="dynamicSize" />
<el-divider />
<p class="mb-2">可设置图标</p>
<div class="mb-2">可设置图标</div>
<Segmented :options="optionsIcon" :size="dynamicSize" />
<el-divider />
<p class="mb-2">只设置图标</p>
<div class="mb-2">只设置图标</div>
<Segmented :options="optionsOnlyIcon" :size="dynamicSize" />
<el-divider />
<p class="mb-2">自定义渲染</p>
<div class="mb-2">自定义渲染</div>
<Segmented :options="optionsLabel" :size="dynamicSize" />
</el-scrollbar>
</el-card>

View File

@@ -49,7 +49,7 @@ const selectedVal = ({ left, right }): void => {
:disabled="item.disabled"
@selectedVal="selectedVal"
/>
<h4 v-if="!item.disabled" class="mt-3">选中范围{{ selectRange }}</h4>
<h4 v-if="!item.disabled" class="mt-3!">选中范围{{ selectRange }}</h4>
</el-card>
</div>
</template>

View File

@@ -29,28 +29,28 @@ defineOptions({
</el-link>
</div>
</template>
<p class="mb-2">基础用法</p>
<div class="mb-2">基础用法</div>
<Base />
<el-divider />
<p class="mb-2">离散值</p>
<div class="mb-2">离散值</div>
<Step />
<el-divider />
<p class="mb-2">带有输入框的滑块</p>
<div class="mb-2">带有输入框的滑块</div>
<Input />
<el-divider />
<p class="mb-2">不同尺寸</p>
<div class="mb-2">不同尺寸</div>
<Size />
<el-divider />
<p class="mb-2">位置</p>
<div class="mb-2">位置</div>
<Placement />
<el-divider />
<p class="mb-2">范围选择</p>
<div class="mb-2">范围选择</div>
<Range />
<el-divider />
<p class="mb-2">垂直模式</p>
<div class="mb-2">垂直模式</div>
<Vertical />
<el-divider />
<p class="mb-2">显示标记</p>
<div class="mb-2">显示标记</div>
<Marks class="mb-6" />
</el-card>
</template>

View File

@@ -63,7 +63,7 @@ function reset() {
format="HH:mm:ss"
:value="value1"
/>
<el-button class="mt-2" type="primary" text bg @click="reset">
<el-button class="mt-2!" type="primary" text bg @click="reset">
重置
</el-button>
</re-col>

View File

@@ -106,7 +106,7 @@ const swiperExample: any[] = [
</template>
<el-row :gutter="10">
<el-col v-for="item in swiperExample" :key="item.id" :span="12">
<h6 class="py-[16px] text-base">{{ item.label }}</h6>
<h6 class="py-[16px]! text-base">{{ item.label }}</h6>
<swiper v-bind="item.options">
<swiper-slide v-for="i in 5" :key="i">
<div

View File

@@ -94,7 +94,7 @@ const handleInputConfirm = () => {
</el-link>
</template>
<p class="mb-2">基础按钮</p>
<div class="mb-2">基础按钮</div>
<el-radio-group v-model="baseTag" class="mb-3">
<el-radio label="dark" value="dark" />
<el-radio label="light" value="light" />
@@ -107,7 +107,7 @@ const handleInputConfirm = () => {
v-model="checked1"
label="可移除"
/>
<el-button v-else size="small" text bg class="mr-6" @click="onReset">
<el-button v-else size="small" text bg class="mr-6!" @click="onReset">
重置
</el-button>
<el-button
@@ -115,7 +115,7 @@ const handleInputConfirm = () => {
size="small"
text
bg
class="mr-6 ml-4"
class="mr-6! ml-4!"
@click="tagList = []"
>
移除全部
@@ -140,7 +140,7 @@ const handleInputConfirm = () => {
</el-space>
<el-divider />
<p class="mb-2">动态编辑标签</p>
<div class="mb-2">动态编辑标签</div>
<el-tag
v-for="tag in dynamicTags"
:key="tag"
@@ -156,14 +156,14 @@ const handleInputConfirm = () => {
v-if="inputVisible"
ref="InputRef"
v-model="inputValue"
class="ml-1 !w-20"
class="ml-1 w-20!"
size="small"
@keyup.enter="handleInputConfirm"
@blur="handleInputConfirm"
/>
<el-button
v-else
class="button-new-tag ml-1"
class="button-new-tag ml-1!"
size="small"
@click="showInput"
>

View File

@@ -48,7 +48,7 @@ const changeTooltipContent = () => {
</el-link>
</template>
<p class="mb-2">基础用法</p>
<div class="mb-2">基础用法</div>
<el-space wrap>
<ul class="content">
<li>
@@ -64,7 +64,7 @@ const changeTooltipContent = () => {
<el-divider />
<p class="mb-2">自定义 Tooltip 内容</p>
<div class="mb-2">自定义 Tooltip 内容</div>
<div class="mb-2">
<el-button @click="changeTooltipContent">
点击切换下方 Tooltip 内容
@@ -94,7 +94,7 @@ const changeTooltipContent = () => {
</el-space>
<el-divider />
<p class="mb-2">自定义 el-text 配置</p>
<div class="mb-2">自定义 el-text 配置</div>
<el-space wrap>
<ul class="content">
<li>
@@ -111,7 +111,7 @@ const changeTooltipContent = () => {
</el-space>
<el-divider />
<p class="mb-2">自定义 VueTippy 配置</p>
<div class="mb-2">自定义 VueTippy 配置</div>
<el-space wrap>
<ul class="content">
<li>
@@ -132,7 +132,7 @@ const changeTooltipContent = () => {
</el-space>
<el-divider />
<p class="mb-2">组件嵌套: 不需要省略的需设置 truncated false</p>
<div class="mb-2">组件嵌套: 不需要省略的需设置 truncated false</div>
<el-space wrap>
<ul class="content">
<li>

View File

@@ -85,13 +85,13 @@ const endTime = ref("");
</el-link>
</template>
<p class="mb-2">日期和时间点</p>
<div class="mb-2">日期和时间点</div>
<el-space wrap>
<p class="text-[15px]">鼠标滚轮进行选择</p>
<el-time-picker
v-model="value"
placeholder="请选择时间"
class="!w-[140px]"
class="w-[140px]!"
:size="dynamicSize"
:disabled="size === 'disabled'"
/>
@@ -100,17 +100,17 @@ const endTime = ref("");
v-model="value1"
arrow-control
placeholder="请选择时间"
class="!w-[140px]"
class="w-[140px]!"
:size="dynamicSize"
:disabled="size === 'disabled'"
/>
</el-space>
<el-divider />
<p class="mb-2">限制时间选择范围</p>
<div class="mb-2">限制时间选择范围</div>
<el-time-picker
v-model="value2"
class="!w-[140px]"
class="w-[140px]!"
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
@@ -120,10 +120,10 @@ const endTime = ref("");
/>
<el-divider />
<p class="mb-2">任意时间范围</p>
<div class="mb-2">任意时间范围</div>
<el-time-picker
v-model="value3"
class="!w-[220px]"
class="w-[220px]!"
is-range
range-separator="至"
start-placeholder="开始时间"
@@ -149,11 +149,11 @@ const endTime = ref("");
</div>
</template>
<p class="mb-2">固定时间点</p>
<div class="mb-2">固定时间点</div>
<el-time-select
v-model="value4"
placeholder="请选择时间"
class="!w-[140px]"
class="w-[140px]!"
start="08:30"
step="00:15"
end="18:30"
@@ -161,11 +161,11 @@ const endTime = ref("");
:disabled="size === 'disabled'"
/>
<p class="mb-2 mt-4">时间格式</p>
<div class="mb-2 mt-4">时间格式</div>
<el-time-select
v-model="value5"
placeholder="请选择时间"
class="!w-[140px]"
class="w-[140px]!"
start="00:00"
step="00:30"
end="23:59"
@@ -174,12 +174,12 @@ const endTime = ref("");
:disabled="size === 'disabled'"
/>
<p class="mb-2 mt-4">固定时间范围</p>
<div class="mb-2 mt-4">固定时间范围</div>
<el-space wrap>
<el-time-select
v-model="startTime"
placeholder="开始时间"
class="!w-[140px]"
class="w-[140px]!"
:max-time="endTime"
start="08:30"
step="00:15"
@@ -190,7 +190,7 @@ const endTime = ref("");
<el-time-select
v-model="endTime"
placeholder="结束时间"
class="!w-[140px]"
class="w-[140px]!"
:min-time="startTime"
start="08:30"
step="00:15"

View File

@@ -79,7 +79,7 @@ const activities = [
</el-timeline-item>
</el-timeline>
<el-timeline class="pl-40">
<el-timeline class="pl-40!">
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"

View File

@@ -4,7 +4,7 @@ import { formUpload } from "@/api/mock";
import { message } from "@/utils/message";
import { createFormData } from "@pureadmin/utils";
import UploadIcon from "~icons/ri/upload-2-line";
import UploadIcon from "~icons/ri/upload-2-line?width=26&height=26";
const formRef = ref();
const uploadRef = ref();
@@ -58,15 +58,11 @@ const resetForm = formEl => {
drag
multiple
action="#"
class="!w-[200px]"
class="w-[200px]!"
:auto-upload="false"
>
<div class="el-upload__text">
<IconifyIconOffline
:icon="UploadIcon"
width="26"
class="m-auto mb-2"
/>
<UploadIcon class="m-auto mb-2" />
可点击或拖拽上传
</div>
</el-upload>
@@ -79,7 +75,7 @@ const resetForm = formEl => {
<el-date-picker
v-model="validateForm.date"
type="datetime"
class="!w-[200px]"
class="w-[200px]!"
placeholder="请选择日期时间"
value-format="YYYY-MM-DD HH:mm:ss"
/>

View File

@@ -8,7 +8,7 @@ import { message } from "@/utils/message";
import type { UploadFile } from "element-plus";
import { getKeyList, extractFields, downloadByData } from "@pureadmin/utils";
import Add from "~icons/ep/plus";
import EpPlus from "~icons/ep/plus?width=30&height=30";
import Eye from "~icons/ri/eye-line";
import Delete from "~icons/ri/delete-bin-7-line";
@@ -124,16 +124,16 @@ const onDownload = () => {
</el-link>
</template>
<el-button class="mb-4" text bg @click="onDownload">
<el-button class="mb-4!" text bg @click="onDownload">
点击下载安全文件进行上传测试
</el-button>
<p class="mb-4">
<p class="mb-4!">
综合示例<span class="text-[14px]">
<span class="text-[red]">自动上传</span>
、拖拽上传、拖拽排序、设置请求头、上传进度、大图预览、多选文件、最大文件数量、文件类型限制、文件大小限制、删除文件)
</span>
</p>
<p v-show="fileList.length > 0" class="mb-4">
<p v-show="fileList.length > 0" class="mb-4!">
{{ imgInfos }}
</p>
<el-upload
@@ -149,15 +149,15 @@ const onDownload = () => {
:on-exceed="onExceed"
:before-upload="onBefore"
>
<IconifyIconOffline :icon="Add" class="m-auto mt-4" width="30" />
<EpPlus class="m-auto mt-4" />
<template #file="{ file }">
<div
v-if="file.status == 'ready' || file.status == 'uploading'"
class="mt-[35%] m-auto"
class="mt-[35%]! m-auto"
>
<p class="font-medium">文件上传中</p>
<el-progress
class="mt-2"
class="mt-2!"
:stroke-width="2"
:text-inside="true"
:show-text="false"
@@ -173,7 +173,7 @@ const onDownload = () => {
id="pure-upload-item"
:class="[
'el-upload-list__item-actions',
fileList.length > 1 && '!cursor-move'
fileList.length > 1 && 'cursor-move!'
]"
>
<span
@@ -232,7 +232,7 @@ const onDownload = () => {
</p>
<el-divider />
<p class="mb-4 mt-4">
<p class="my-4!">
结合表单校验进行<span class="text-[red]">手动上传</span>
<span class="text-[14px]">
可先打开浏览器控制台找到Network然后填写表单内容后点击点提交观察请求变化

View File

@@ -24,7 +24,7 @@ const filteredItems = computed(() => {
水平模式 horizontal
<el-input
v-model="search"
class="mr-2 !w-[1/1.5]"
class="mr-2 w-[1/1.5]!"
clearable
placeholder="Filter..."
style="width: 300px"

View File

@@ -24,7 +24,7 @@ const filteredItems = computed(() => {
垂直模式 vertical
<el-input
v-model="search"
class="!w-[350px]"
class="w-[350px]!"
clearable
placeholder="Filter..."
/>

View File

@@ -106,7 +106,7 @@ onMounted(() => {
/>
</div>
<div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
<h4 class="pb-4 text-gray-50 group-hover:text-yellow-300">
<h4 class="pb-4! text-gray-50 group-hover:text-yellow-300">
{{ item.name }}
</h4>
<div
@@ -115,7 +115,7 @@ onMounted(() => {
<div class="text-gray-50">$ {{ item.price }}</div>
<div>
<button
class="px-3 h-7 rounded-full bg-red-500 text-sm text-white shadow-lg transition-all duration-300 hover:bg-red-600"
class="px-3! rounded-full bg-red-500 text-sm text-white shadow-lg transition-all duration-300 hover:bg-red-600 border-0"
@click.stop="handleDelete(item, index)"
>
删除
@@ -129,7 +129,7 @@ onMounted(() => {
<!-- <div class="flex justify-center py-10">
<button
class="px-5 py-2 rounded-full bg-gray-700 text-md text-white cursor-pointer hover:bg-gray-800 transition-all duration-300"
class="px-5! py-2! rounded-full bg-gray-700 text-md text-white cursor-pointer hover:bg-gray-800 transition-all duration-300 border-0"
@click="handleLoadMore"
>
加载更多

View File

@@ -15,7 +15,7 @@ const router = useRouter();
<div class="ml-12">
<p
v-motion
class="font-medium text-4xl mb-4 dark:text-white"
class="font-medium text-4xl mb-4! dark:text-white"
:initial="{
opacity: 0,
y: 100
@@ -32,7 +32,7 @@ const router = useRouter();
</p>
<p
v-motion
class="mb-4 text-gray-500"
class="mb-4! text-gray-500"
:initial="{
opacity: 0,
y: 100

View File

@@ -15,7 +15,7 @@ const router = useRouter();
<div class="ml-12">
<p
v-motion
class="font-medium text-4xl mb-4 dark:text-white"
class="font-medium text-4xl mb-4! dark:text-white"
:initial="{
opacity: 0,
y: 100
@@ -32,7 +32,7 @@ const router = useRouter();
</p>
<p
v-motion
class="mb-4 text-gray-500"
class="mb-4! text-gray-500"
:initial="{
opacity: 0,
y: 100

View File

@@ -15,7 +15,7 @@ const router = useRouter();
<div class="ml-12">
<p
v-motion
class="font-medium text-4xl mb-4 dark:text-white"
class="font-medium text-4xl mb-4! dark:text-white"
:initial="{
opacity: 0,
y: 100
@@ -32,7 +32,7 @@ const router = useRouter();
</p>
<p
v-motion
class="mb-4 text-gray-500"
class="mb-4! text-gray-500"
:initial="{
opacity: 0,
y: 100

View File

@@ -4,7 +4,7 @@ import intro from "intro.js";
import "intro.js/minified/introjs.min.css";
type GuideStep = {
element: string | HTMLElement;
element: HTMLElement;
title: string;
intro: string;
position: "left" | "right" | "top" | "bottom";
@@ -16,47 +16,43 @@ defineOptions({
const GUIDE_STEPS = [
{
element: document.querySelector(".sidebar-logo-container") as
| string
| HTMLElement,
element: document.querySelector(".sidebar-logo-container"),
title: "项目名称和Logo",
intro: "您可以在这里设置项目名称和Logo",
position: "left"
},
{
element: document.querySelector("#header-search") as string | HTMLElement,
element: document.querySelector("#header-search"),
title: "搜索菜单",
intro: "您可以在这里搜索想要查看的菜单",
position: "left"
},
{
element: document.querySelector("#header-translation") as
| string
| HTMLElement,
element: document.querySelector("#header-translation"),
title: "国际化",
intro: "您可以在这里进行语言切换",
position: "left"
},
{
element: document.querySelector("#full-screen") as string | HTMLElement,
element: document.querySelector("#full-screen"),
title: "全屏",
intro: "您可以在这里进行全屏切换",
position: "left"
},
{
element: document.querySelector("#header-notice") as string | HTMLElement,
element: document.querySelector("#header-notice"),
title: "消息通知",
intro: "您可以在这里查看管理员发送的消息",
position: "left"
},
{
element: document.querySelector(".set-icon") as string | HTMLElement,
element: document.querySelector(".set-icon"),
title: "系统配置",
intro: "您可以在这里查看系统配置",
position: "left"
},
{
element: document.querySelector(".tags-view") as string | HTMLElement,
element: document.querySelector(".tags-view"),
title: "多标签页",
intro: "这里是您访问过的页面的历史",
position: "bottom"

View File

@@ -69,7 +69,7 @@ function onBack() {
/>
<el-button
:disabled="isDisabled"
class="ml-2"
class="ml-2!"
@click="useVerifyCode().start(ruleFormRef, 'phone')"
>
{{

View File

@@ -18,7 +18,7 @@ const { t } = useI18n();
</Motion>
<Motion :delay="150">
<el-button
class="w-full mt-4"
class="w-full mt-4!"
@click="useUserStoreHook().SET_CURRENTPAGE(0)"
>
{{ t("login.pureBack") }}

View File

@@ -123,7 +123,7 @@ function onBack() {
/>
<el-button
:disabled="isDisabled"
class="ml-2"
class="ml-2!"
@click="useVerifyCode().start(ruleFormRef, 'phone')"
>
{{

View File

@@ -93,7 +93,7 @@ function onBack() {
/>
<el-button
:disabled="isDisabled"
class="ml-2"
class="ml-2!"
@click="useVerifyCode().start(ruleFormRef, 'phone')"
>
{{

View File

@@ -135,13 +135,13 @@ watch(loginDay, value => {
<!-- 国际化 -->
<el-dropdown trigger="click">
<globalization
class="hover:text-primary hover:!bg-[transparent] w-[20px] h-[20px] ml-1.5 cursor-pointer outline-none duration-300"
class="hover:text-primary hover:bg-[transparent]! w-[20px] h-[20px] ml-1.5 cursor-pointer outline-hidden duration-300"
/>
<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
@@ -153,7 +153,7 @@ watch(loginDay, value => {
</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">
@@ -173,7 +173,7 @@ watch(loginDay, value => {
<div class="login-form">
<avatar class="avatar" />
<Motion>
<h2 class="outline-none">
<h2 class="outline-hidden">
<TypeIt
:options="{ strings: [title], cursor: false, speed: 100 }"
/>
@@ -245,7 +245,8 @@ watch(loginDay, value => {
width: loginDay < 10 ? '10px' : '16px',
outline: 'none',
background: 'none',
appearance: 'none'
appearance: 'none',
border: 'none'
}"
>
<option value="1">1</option>
@@ -272,7 +273,7 @@ watch(loginDay, value => {
</el-button>
</div>
<el-button
class="w-full mt-4"
class="w-full mt-4!"
size="default"
type="primary"
:loading="loading"
@@ -290,7 +291,7 @@ watch(loginDay, value => {
<el-button
v-for="(item, index) in operates"
:key="index"
class="w-full mt-4"
class="w-full mt-4!"
size="default"
@click="useUserStoreHook().SET_CURRENTPAGE(index + 1)"
>
@@ -339,7 +340,7 @@ watch(loginDay, value => {
>
Copyright © 2020-present
<a
class="hover:text-primary"
class="hover:text-primary!"
href="https://github.com/pure-admin"
target="_blank"
>

View File

@@ -45,7 +45,7 @@ sayHello();
代码位置 src/views/markdown
</el-link>
</template>
<h1 class="mb-2">
<h1 class="mb-2!">
双向绑定<span class="text-red-500">{{ text }}</span>
</h1>
<Vditor

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