mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-03 13:44:47 +08:00
Compare commits
16 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
6fc12a2498 | ||
|
|
a72557f4e2 | ||
|
|
71d0ec8ba8 | ||
|
|
ee5d82c021 | ||
|
|
c7ab236e10 | ||
|
|
d2b1bd5b44 | ||
|
|
a22bc8622e | ||
|
|
fe9f6e5493 | ||
|
|
7f0354cd63 | ||
|
|
c437371db6 | ||
|
|
5734d0391f | ||
|
|
e81fb5bb10 | ||
|
|
0c5ecd0a4e | ||
|
|
1d76946968 | ||
|
|
297319f668 | ||
|
|
e23971b680 |
@@ -1,3 +1,20 @@
|
||||
# 3.9.0 (2022-11-30)
|
||||
|
||||
### 🐞 Bug fixes
|
||||
|
||||
- Fixed the jitter problem caused by the scroll bar on the page when the text is too long when exiting the full screen
|
||||
- Fix some type errors
|
||||
|
||||
### 🍏 Perf
|
||||
|
||||
- perf: Great optimization of the first screen loading. Compared with the version before `3.9.0`, the first screen requests are reduced by `71`, and the first screen loading resources are reduced by `4.1 MB`
|
||||
|
||||
# 3.8.7 (2022-11-28)
|
||||
|
||||
### 🍏 Perf
|
||||
|
||||
- perf: Great package optimization, please be sure to upgrade! Use `unplugin-vue-define-options` to replace `unplugin-vue-macros`, the packaging speed is increased several times, use `unplugin-vue-macros` to take `mac` with moderate performance as an example, the packaging time of the full version is` 6` minutes😭, after replacing it with `unplugin-vue-define-options`, the packaging time on the same computer is `50` seconds☺️
|
||||
|
||||
# 3.8.6 (2022-11-27)
|
||||
|
||||
### 🎫 Feat
|
||||
|
||||
17
CHANGELOG.md
17
CHANGELOG.md
@@ -1,3 +1,20 @@
|
||||
# 3.9.0 (2022-11-30)
|
||||
|
||||
### 🐞 Bug fixes
|
||||
|
||||
- Fixed the jitter problem caused by the scroll bar on the page when the text is too long when exiting the full screen
|
||||
- Fix some type errors
|
||||
|
||||
### 🍏 Perf
|
||||
|
||||
- perf: Great optimization of the first screen loading. Compared with the version before `3.9.0`, the first screen requests are reduced by `71`, and the first screen loading resources are reduced by `4.1 MB`
|
||||
|
||||
# 3.8.7 (2022-11-28)
|
||||
|
||||
### 🍏 Perf
|
||||
|
||||
- perf: Great package optimization, please be sure to upgrade! Use `unplugin-vue-define-options` to replace `unplugin-vue-macros`, the packaging speed is increased several times, use `unplugin-vue-macros` to take `mac` with moderate performance as an example, the packaging time of the full version is` 6` minutes😭, after replacing it with `unplugin-vue-define-options`, the packaging time on the same computer is `50` seconds☺️
|
||||
|
||||
# 3.8.6 (2022-11-27)
|
||||
|
||||
### 🎫 Feat
|
||||
|
||||
@@ -1,3 +1,20 @@
|
||||
# 3.9.0 (2022-11-30)
|
||||
|
||||
### 🐞 Bug fixes
|
||||
|
||||
- 修复退出全屏时文字过长导致页面出现滚动条后带来的抖动问题
|
||||
- 修复一些类型错误
|
||||
|
||||
### 🍏 Perf
|
||||
|
||||
- perf: 首屏加载大优化，对比 `3.9.0` 之前版本，首屏请求减少 `71` 个，首屏加载资源减少 `4.1 MB`
|
||||
|
||||
# 3.8.7 (2022-11-28)
|
||||
|
||||
### 🍏 Perf
|
||||
|
||||
- perf: 打包大优化，请务必升级！使用 `unplugin-vue-define-options` 替换 `unplugin-vue-macros` ，打包速度提升数倍，使用 `unplugin-vue-macros` 以性能中等偏上的 `mac` 为例完整版打包时长为 `6` 分钟 😭，使用 `unplugin-vue-define-options` 替换后，相同电脑下打包时长为 `50` 秒 ☺️
|
||||
|
||||
# 3.8.6 (2022-11-27)
|
||||
|
||||
### 🎫 Feat
|
||||
|
||||
@@ -10,6 +10,13 @@
|
||||
|
||||
`vue-pure-admin` is an open source free and out-of-the-box middle and background management system template. Developed using the latest mainstream technologies such as `Vue3`, `Vite`, `Element-Plus`, `TypeScript`, `Pinia`, `Tailwindcss`
|
||||
|
||||
## Thin version (offering non-internationalized and internationalized versions)
|
||||
|
||||
The simplified version is based on the shelf extracted from [vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin), which contains main functions and is more suitable for actual project development. The packaged size is introduced globally [element-plus](https://element-plus.org) is still below `2.3MB`, and the full version of the code will be permanently synchronized. After enabling `brotli` compression and `cdn` to replace the local library mode, the package size is less than `350kb`
|
||||
|
||||
- [Click me to view the non-internationalized version](https://github.com/xiaoxian521/pure-admin-thin)
|
||||
- [Click me to view Internationalization version](https://github.com/xiaoxian521/pure-admin-thin/tree/i18n)
|
||||
|
||||
## Supporting Video
|
||||
|
||||
- [Click Watch Tutorial](https://www.bilibili.com/video/BV1kg411v7QT)
|
||||
@@ -20,11 +27,6 @@
|
||||
- [Click me to view the domestic documentation site](https://yiming_chang.gitee.io/pure-admin-doc)
|
||||
- [Click me to view foreign document site](https://xiaoxian521.github.io/pure-admin-doc)
|
||||
|
||||
## Thin version (offering non-internationalized and internationalized versions)
|
||||
|
||||
- [Click me to view the non-internationalized version](https://github.com/xiaoxian521/pure-admin-thin)
|
||||
- [Click me to view Internationalization version](https://github.com/xiaoxian521/pure-admin-thin/tree/i18n)
|
||||
|
||||
## Tauri
|
||||
|
||||
- [Click Watch Tauri](https://github.com/xiaoxian521/tauri-pure-admin)
|
||||
|
||||
12
README.md
12
README.md
@@ -10,6 +10,13 @@
|
||||
|
||||
`vue-pure-admin` 是一款开源免费且开箱即用的中后台管理系统模版。使用了最新的 `Vue3`、`Vite`、`Element-Plus`、`TypeScript`、`Pinia`、`Tailwindcss` 等主流技术开发
|
||||
|
||||
## 精简版（实际项目开发请用精简版，提供 `非国际化` 、`国际化` 两个版本选择）
|
||||
|
||||
精简版是基于 [vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin) 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 [element-plus](https://element-plus.org) 的情况下仍然低于 `2.3MB`，并且会永久同步完整版的代码。开启 `brotli` 压缩和 `cdn` 替换本地库模式后，打包大小低于 `350kb`
|
||||
|
||||
- [点我查看非国际化精简版](https://github.com/xiaoxian521/pure-admin-thin)
|
||||
- [点我查看国际化精简版](https://github.com/xiaoxian521/pure-admin-thin/tree/i18n)
|
||||
|
||||
## 配套视频
|
||||
|
||||
- [点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)
|
||||
@@ -20,11 +27,6 @@
|
||||
- [点我查看国内文档站](https://yiming_chang.gitee.io/pure-admin-doc)
|
||||
- [点我查看国外文档站](https://xiaoxian521.github.io/pure-admin-doc)
|
||||
|
||||
## 精简版（实际项目开发请用精简版，提供 `非国际化` 、`国际化` 两个版本选择）
|
||||
|
||||
- [点我查看非国际化精简版](https://github.com/xiaoxian521/pure-admin-thin)
|
||||
- [点我查看国际化精简版](https://github.com/xiaoxian521/pure-admin-thin/tree/i18n)
|
||||
|
||||
## `Tauri` 版
|
||||
|
||||
- [点我查看 Tauri 版](https://github.com/xiaoxian521/tauri-pure-admin)
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
* 尤其当您禁用浏览器缓存时（这种情况只应该发生在调试阶段）必须将对应模块加入到 include里，否则会遇到开发环境切换页面卡顿的问题（vite 会认为它是一个新的依赖包会重新加载并强制刷新页面），因为它既无法使用浏览器缓存，又没有在本地 node_modules/.vite 里缓存
|
||||
* 温馨提示：如果您使用的第三方库是全局引入，也就是引入到 src/main.ts 文件里，就不需要再添加到 include 里了，因为 vite 会自动将它们缓存到 node_modules/.vite
|
||||
*/
|
||||
export const include = [
|
||||
const include = [
|
||||
"qs",
|
||||
"mitt",
|
||||
"xlsx",
|
||||
@@ -24,6 +24,7 @@ export const include = [
|
||||
"jsbarcode",
|
||||
"sortablejs",
|
||||
"swiper/vue",
|
||||
"md-editor-v3",
|
||||
"@vueuse/core",
|
||||
"vue3-danmaku",
|
||||
"v-contextmenu",
|
||||
@@ -31,13 +32,14 @@ export const include = [
|
||||
"lodash-unified",
|
||||
"@ctrl/tinycolor",
|
||||
"china-area-data",
|
||||
"@faker-js/faker",
|
||||
"vue-json-pretty",
|
||||
"@logicflow/core",
|
||||
"@pureadmin/utils",
|
||||
"@wangeditor/editor",
|
||||
"responsive-storage",
|
||||
"@howdyjs/mouse-menu",
|
||||
"@logicflow/extension",
|
||||
"vue-virtual-scroller",
|
||||
"element-resize-detector",
|
||||
"@amap/amap-jsapi-loader",
|
||||
"el-table-infinite-scroll",
|
||||
@@ -48,3 +50,16 @@ export const include = [
|
||||
"xgplayer/es/controls/screenShot",
|
||||
"xgplayer/es/controls/playbackRate"
|
||||
];
|
||||
|
||||
/**
|
||||
* 在预构建中强制排除的依赖项
|
||||
* 温馨提示：所有以 `@iconify-icons/` 开头引入的的本地图标模块，都应该加入到下面的 `exclude` 里，因为平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入，不需要预构建，直接让浏览器加载就好
|
||||
*/
|
||||
const exclude = [
|
||||
"@iconify-icons/ep",
|
||||
"@iconify-icons/ri",
|
||||
"@iconify-icons/mdi",
|
||||
"@pureadmin/theme/dist/browser-utils"
|
||||
];
|
||||
|
||||
export { include, exclude };
|
||||
|
||||
@@ -4,13 +4,13 @@ import vue from "@vitejs/plugin-vue";
|
||||
import { viteBuildInfo } from "./info";
|
||||
import svgLoader from "vite-svg-loader";
|
||||
import vueJsx from "@vitejs/plugin-vue-jsx";
|
||||
import VueMacros from "unplugin-vue-macros/vite";
|
||||
import { viteMockServe } from "vite-plugin-mock";
|
||||
import { configCompressPlugin } from "./compress";
|
||||
import VueI18n from "@intlify/vite-plugin-vue-i18n";
|
||||
import { visualizer } from "rollup-plugin-visualizer";
|
||||
import removeConsole from "vite-plugin-remove-console";
|
||||
import themePreprocessorPlugin from "@pureadmin/theme";
|
||||
import DefineOptions from "unplugin-vue-define-options/vite";
|
||||
import { genScssMultipleScopeVars } from "../src/layout/theme";
|
||||
|
||||
export function getPluginsList(
|
||||
@@ -32,7 +32,7 @@ export function getPluginsList(
|
||||
vueJsx(),
|
||||
VITE_CDN ? cdn : null,
|
||||
configCompressPlugin(VITE_COMPRESSION),
|
||||
VueMacros(),
|
||||
DefineOptions(),
|
||||
// 线上环境删除console
|
||||
removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),
|
||||
viteBuildInfo(),
|
||||
|
||||
@@ -18,8 +18,8 @@ buttons:
|
||||
hscloseRightTabs: Close RightTabs
|
||||
hscloseOtherTabs: Close OtherTabs
|
||||
hscloseAllTabs: Close AllTabs
|
||||
hswholeFullScreen: Whole FullScreen
|
||||
hswholeExitFullScreen: Whole ExitFullScreen
|
||||
hswholeFullScreen: FullScreen
|
||||
hswholeExitFullScreen: ExitFull
|
||||
hscontentFullScreen: Content FullScreen
|
||||
hscontentExitFullScreen: Content ExitFullScreen
|
||||
menus:
|
||||
|
||||
@@ -18,8 +18,8 @@ buttons:
|
||||
hscloseRightTabs: 关闭右侧标签页
|
||||
hscloseOtherTabs: 关闭其他标签页
|
||||
hscloseAllTabs: 关闭全部标签页
|
||||
hswholeFullScreen: 整体页面全屏
|
||||
hswholeExitFullScreen: 整体页面退出全屏
|
||||
hswholeFullScreen: 全屏
|
||||
hswholeExitFullScreen: 退出全屏
|
||||
hscontentFullScreen: 内容区全屏
|
||||
hscontentExitFullScreen: 内容区退出全屏
|
||||
menus:
|
||||
|
||||
@@ -2,6 +2,14 @@
|
||||
import { MockMethod } from "vite-plugin-mock";
|
||||
import { system, permission, frame, tabs } from "@/router/enums";
|
||||
|
||||
import FlUser from "@iconify-icons/ri/admin-line";
|
||||
import Role from "@iconify-icons/ri/admin-fill";
|
||||
import Dict from "@iconify-icons/ri/git-repository-line";
|
||||
import Setting from "@iconify-icons/ri/settings-3-line";
|
||||
import Dept from "@iconify-icons/ri/git-branch-line";
|
||||
import Lollipop from "@iconify-icons/ep/lollipop";
|
||||
import Monitor from "@iconify-icons/ep/monitor";
|
||||
|
||||
/**
|
||||
* roles：页面级别权限，这里模拟二种 "admin"、"common"
|
||||
* admin：管理员角色
|
||||
@@ -11,7 +19,7 @@ import { system, permission, frame, tabs } from "@/router/enums";
|
||||
const systemRouter = {
|
||||
path: "/system",
|
||||
meta: {
|
||||
icon: "setting",
|
||||
icon: Setting,
|
||||
title: "menus.hssysManagement",
|
||||
rank: system
|
||||
},
|
||||
@@ -20,7 +28,7 @@ const systemRouter = {
|
||||
path: "/system/user/index",
|
||||
name: "User",
|
||||
meta: {
|
||||
icon: "flUser",
|
||||
icon: FlUser,
|
||||
title: "menus.hsUser",
|
||||
roles: ["admin"]
|
||||
}
|
||||
@@ -29,7 +37,7 @@ const systemRouter = {
|
||||
path: "/system/role/index",
|
||||
name: "Role",
|
||||
meta: {
|
||||
icon: "role",
|
||||
icon: Role,
|
||||
title: "menus.hsRole",
|
||||
roles: ["admin"]
|
||||
}
|
||||
@@ -38,7 +46,7 @@ const systemRouter = {
|
||||
path: "/system/dept/index",
|
||||
name: "Dept",
|
||||
meta: {
|
||||
icon: "dept",
|
||||
icon: Dept,
|
||||
title: "menus.hsDept",
|
||||
roles: ["admin"]
|
||||
}
|
||||
@@ -48,7 +56,7 @@ const systemRouter = {
|
||||
component: "/system/dict/index",
|
||||
name: "Dict",
|
||||
meta: {
|
||||
icon: "dict",
|
||||
icon: Dict,
|
||||
title: "menus.hsDict",
|
||||
keepAlive: true,
|
||||
roles: ["admin"]
|
||||
@@ -61,7 +69,7 @@ const permissionRouter = {
|
||||
path: "/permission",
|
||||
meta: {
|
||||
title: "menus.permission",
|
||||
icon: "lollipop",
|
||||
icon: Lollipop,
|
||||
rank: permission
|
||||
},
|
||||
children: [
|
||||
@@ -88,7 +96,7 @@ const permissionRouter = {
|
||||
const frameRouter = {
|
||||
path: "/iframe",
|
||||
meta: {
|
||||
icon: "monitor",
|
||||
icon: Monitor,
|
||||
title: "menus.hsExternalPage",
|
||||
rank: frame
|
||||
},
|
||||
|
||||
13
package.json
13
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-pure-admin",
|
||||
"version": "3.8.6",
|
||||
"version": "3.9.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
|
||||
@@ -36,7 +36,7 @@
|
||||
"@logicflow/extension": "^1.1.30",
|
||||
"@pureadmin/descriptions": "^1.1.0",
|
||||
"@pureadmin/table": "^1.8.0",
|
||||
"@pureadmin/utils": "^1.6.7",
|
||||
"@pureadmin/utils": "^1.7.1",
|
||||
"@vueuse/core": "^9.6.0",
|
||||
"@vueuse/motion": "2.0.0-beta.12",
|
||||
"@wangeditor/editor": "^5.1.21",
|
||||
@@ -56,6 +56,7 @@
|
||||
"lodash": "^4.17.21",
|
||||
"lodash-es": "^4.17.21",
|
||||
"lodash-unified": "^1.0.2",
|
||||
"md-editor-v3": "^2.4.2",
|
||||
"mitt": "^3.0.0",
|
||||
"mockjs": "^1.1.0",
|
||||
"nprogress": "^0.2.0",
|
||||
@@ -85,15 +86,9 @@
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "13.1.0",
|
||||
"@commitlint/config-conventional": "13.1.0",
|
||||
"@faker-js/faker": "^7.5.0",
|
||||
"@iconify-icons/carbon": "^1.2.8",
|
||||
"@iconify-icons/ep": "^1.2.7",
|
||||
"@iconify-icons/fa": "^1.2.3",
|
||||
"@iconify-icons/fa-solid": "^1.2.3",
|
||||
"@iconify-icons/fluent": "^1.2.16",
|
||||
"@iconify-icons/mdi": "^1.2.8",
|
||||
"@iconify-icons/ri": "^1.2.3",
|
||||
"@iconify-icons/uil": "^1.2.2",
|
||||
"@iconify/vue": "^4.0.0",
|
||||
"@intlify/vite-plugin-vue-i18n": "^6.0.3",
|
||||
"@pureadmin/theme": "^2.4.0",
|
||||
@@ -144,7 +139,7 @@
|
||||
"tailwindcss": "^3.2.4",
|
||||
"terser": "^5.15.1",
|
||||
"typescript": "^4.9.3",
|
||||
"unplugin-vue-macros": "^1.0.3",
|
||||
"unplugin-vue-define-options": "^1.0.0",
|
||||
"vite": "3.1.8",
|
||||
"vite-plugin-cdn-import": "^0.3.5",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
|
||||
810
pnpm-lock.yaml
generated
810
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"Version": "3.8.6",
|
||||
"Version": "3.9.0",
|
||||
"Title": "PureAdmin",
|
||||
"FixedHeader": true,
|
||||
"HiddenSideBar": false,
|
||||
|
||||
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.5 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 14 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 13 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="380" data-name="Layer 1" viewBox="0 0 896 529.113"><path fill="#3f3d56" d="M674.067 437.34s-26.377 9.895-38.806 32.944-6.201 50.525-6.201 50.525 26.378-9.895 38.806-32.944 6.201-50.524 6.201-50.524Z"/><path fill="#5392f0" d="M709.5 471.71s-8.642 26.813-31.08 40.313-50.177 8.573-50.177 8.573 8.642-26.814 31.08-40.314 50.177-8.573 50.177-8.573Z"/><path fill="#2f2e41" d="M0 527.113h896v2H0zM361.872 435.088a95.444 95.444 0 0 1-35.748-14.447l1.182-1.613a93.363 93.363 0 0 0 34.999 14.105c18.932 3.402 47.26 1.732 74.707-25.527 53.414-53.048 104.393-58.39 104.902-58.438l.186 1.992c-.501.047-50.768 5.317-103.678 57.866-21.613 21.464-43.792 27.402-61.718 27.402a83.5 83.5 0 0 1-14.832-1.34Z"/><circle cx="515.153" cy="381.113" r="12" fill="#2f2e41"/><circle cx="430.153" cy="437.113" r="12" fill="#2f2e41"/><path fill="#3f3d56" d="M683.5 528.113s-17.462-5.413-52.261-10.842l.761-10.658c6-60-34-150-34-150a401.561 401.561 0 0 1 21.47 139.024c-5.338-9.312-15.65-19.358-35.47-25.524 0 0 25.778 22.106 33.16 45.102a997.84 997.84 0 0 0-102.023-8.216L524 486.613l-17 17s-7-51-22-53l11 50s-13-10-16-9l7.397 14.795c-49.819-.517-109.084 1.735-177.765 8.952L318 496.113l-17 17s-7-51-22-53l11 50s-13-10-16-9l8.643 17.286q-33.667 4.004-70.143 9.714Z"/><path fill="#a0616a" d="M407.648 44.491c-10.9 11.748 17.598 40.26 17.598 40.26s-57.707 9.73-53.128 9.14 2.206-49.131 2.206-49.131 44.224-12.017 33.324-.269Z"/><path fill="#2f2e41" d="m447.812 170.222-50.139 25.614-27.23 15.606s-32.098 40.432-38.086 64.393 25.93 68.247 29.543 72.823a54.36 54.36 0 0 1 4.99 7.423c1.247 1.856 12.029-.54 23.803-3.065s-1.563-19.964-1.563-19.964-15.027-38.395-16.147-39.26c-1.045-.806-4.6-7.446-2.043-10.352a25.95 25.95 0 0 0 5.445-8.898 30.09 30.09 0 0 1 4.187-7.942s45.361-36.836 59.528-49.378 51.83-4.658 51.83-4.658-17.782 68.2-22.23 72.806-4.93 8.7-2.916 16.507 28.282.391 28.282.391l9.7-26.455s15.749-34.293 24.3-69.675c4.275-17.691-3.889-28.235-13.121-34.356a41.39 41.39 0 0 0-30.03-5.977l-46.349 8.13 32.147-13.849Z"/><path fill="#a0616a" d="m262.878 104.304-59.854-18.506s-24.18-31.167-12.789-36.667 25.652 26.944 25.652 26.944l41.686 2.698ZM514.494 71.9l53.212-33.068S583.2 2.556 570.787.122 552.8 32.685 552.8 32.685l-39.642 13.171Z"/><path fill="#5392f0" d="m524.453 34.513 1.014 39.192L435.78 89.73c13.192 28.224 9.84 60.346 43.047 74.425L366.903 218.9c4.987-43.038-15.818-75.456-35.263-115.759-23.686-8.586-51.196-2.29-80.337 10.346l-5.237-40.664 123.879-8.896 20.348 7.78 21.819-9.177c32.067-9.528 78.109-27.641 112.341-28.017Z"/><path fill="#2f2e41" d="M468.64 300.63c-2.72 2.367-5.252 21.85-5.35 28.92s9.212 8.897 14.299 9.25 4.478 3.456 7.837 6.048 14.396 2.18 28.89-2.712-9.753-20.926-11.864-21.662-11-22.782-11-22.782-20.092.571-22.812 2.938ZM389.368 345.12c3.23 1.6 10.617 19.806 12.503 26.621s-6.657 10.94-11.489 12.57-3.456 4.479-6.048 7.837-13.375 5.756-28.635 4.696 4.133-22.714 5.988-23.96 4.87-24.826 4.87-24.826 19.58-4.538 22.811-2.938Z"/><circle cx="389.471" cy="35.429" r="23.996" fill="#a0616a"/><path fill="#2f2e41" d="M361.734 33.022a22.827 22.827 0 0 1-.833-18.593c2.359-5.815 7.591-11.655 18.873-13.4 24.614-3.805 37.712 13.436 37.024 19.075s-3.993 19.27-3.993 19.27 1.476-12.906-4.858-13.362-30.902-2.378-37.123 4.145a14.233 14.233 0 0 0-3.71 13.83Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 3.2 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.9 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 19 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.9 KiB |
@@ -1,15 +1,12 @@
|
||||
import iconifyIconOffline from "./src/iconifyIconOffline";
|
||||
import iconifyIconOnline from "./src/iconifyIconOnline";
|
||||
import iconSelect from "./src/Select.vue";
|
||||
import fontIcon from "./src/iconfont";
|
||||
|
||||
/** 本地图标组件 */
|
||||
const IconifyIconOffline = iconifyIconOffline;
|
||||
/** 在线图标组件 */
|
||||
const IconifyIconOnline = iconifyIconOnline;
|
||||
/** 图标选择器组件 */
|
||||
const IconSelect = iconSelect;
|
||||
/** iconfont组件 */
|
||||
const FontIcon = fontIcon;
|
||||
|
||||
export { IconifyIconOffline, IconifyIconOnline, IconSelect, FontIcon };
|
||||
export { IconifyIconOffline, IconifyIconOnline, FontIcon };
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { cloneDeep } from "lodash-unified";
|
||||
import { ref, computed, CSSProperties, toRef, watch } from "vue";
|
||||
import { IconJson } from "@/components/ReIcon/data";
|
||||
import { ref, computed, CSSProperties, toRef, watch } from "vue";
|
||||
type ParameterCSSProperties = (item?: string) => CSSProperties | undefined;
|
||||
|
||||
defineOptions({
|
||||
|
||||
@@ -34,6 +34,16 @@ export function useRenderIcon(icon: any, attrs?: iconType): Component {
|
||||
} else if (typeof icon === "function" || typeof icon?.render === "function") {
|
||||
// svg
|
||||
return icon;
|
||||
} else if (typeof icon === "object") {
|
||||
return defineComponent({
|
||||
name: "OfflineIcon",
|
||||
render() {
|
||||
return h(IconifyIconOffline, {
|
||||
icon: icon,
|
||||
...attrs
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 通过是否存在 : 符号来判断是在线还是本地图标，存在即是在线图标，反之
|
||||
return defineComponent({
|
||||
|
||||
@@ -1,192 +1,22 @@
|
||||
import { h, defineComponent } from "vue";
|
||||
import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline";
|
||||
|
||||
// element-plus icon
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
import Menu from "@iconify-icons/ep/menu";
|
||||
import HomeFilled from "@iconify-icons/ep/home-filled";
|
||||
import SetUp from "@iconify-icons/ep/set-up";
|
||||
import Edit from "@iconify-icons/ep/edit";
|
||||
import Lollipop from "@iconify-icons/ep/lollipop";
|
||||
import Link from "@iconify-icons/ep/link";
|
||||
import Position from "@iconify-icons/ep/position";
|
||||
import Histogram from "@iconify-icons/ep/histogram";
|
||||
import RefreshRight from "@iconify-icons/ep/refresh-right";
|
||||
import Close from "@iconify-icons/ep/close";
|
||||
import CloseBold from "@iconify-icons/ep/close-bold";
|
||||
import Bell from "@iconify-icons/ep/bell";
|
||||
import Guide from "@iconify-icons/ep/guide";
|
||||
import Iphone from "@iconify-icons/ep/iphone";
|
||||
import Location from "@iconify-icons/ep/location";
|
||||
import Tickets from "@iconify-icons/ep/tickets";
|
||||
import OfficeBuilding from "@iconify-icons/ep/office-building";
|
||||
import Notebook from "@iconify-icons/ep/notebook";
|
||||
import Rank from "@iconify-icons/ep/rank";
|
||||
import VideoPlay from "@iconify-icons/ep/video-play";
|
||||
import Monitor from "@iconify-icons/ep/monitor";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import More from "@iconify-icons/ep/more-filled";
|
||||
import EpArrowDown from "@iconify-icons/ep/arrow-down";
|
||||
import ArrowUp from "@iconify-icons/ep/arrow-up";
|
||||
import ArrowRight from "@iconify-icons/ep/arrow-right";
|
||||
import ArrowLeft from "@iconify-icons/ep/arrow-left";
|
||||
addIcon("check", Check);
|
||||
addIcon("menu", Menu);
|
||||
addIcon("home-filled", HomeFilled);
|
||||
addIcon("set-up", SetUp);
|
||||
addIcon("edit", Edit);
|
||||
addIcon("lollipop", Lollipop);
|
||||
addIcon("link", Link);
|
||||
addIcon("position", Position);
|
||||
addIcon("histogram", Histogram);
|
||||
addIcon("refresh-right", RefreshRight);
|
||||
addIcon("close", Close);
|
||||
addIcon("close-bold", CloseBold);
|
||||
addIcon("bell", Bell);
|
||||
addIcon("guide", Guide);
|
||||
addIcon("iphone", Iphone);
|
||||
addIcon("location", Location);
|
||||
addIcon("tickets", Tickets);
|
||||
addIcon("office-building", OfficeBuilding);
|
||||
addIcon("notebook", Notebook);
|
||||
addIcon("video-play", VideoPlay);
|
||||
addIcon("rank", Rank);
|
||||
addIcon("monitor", Monitor);
|
||||
addIcon("search", Search);
|
||||
addIcon("refresh", Refresh);
|
||||
addIcon("edits", EditPen);
|
||||
addIcon("delete", Delete);
|
||||
addIcon("more", More);
|
||||
addIcon("ep-arrow-down", EpArrowDown);
|
||||
addIcon("ep-arrow-up", ArrowUp);
|
||||
addIcon("ep-arrow-right", ArrowRight);
|
||||
addIcon("ep-arrow-left", ArrowLeft);
|
||||
|
||||
// remixicon
|
||||
import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
|
||||
import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
|
||||
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
|
||||
import NodeTree from "@iconify-icons/ri/node-tree";
|
||||
import UbuntuFill from "@iconify-icons/ri/ubuntu-fill";
|
||||
import QuestionLine from "@iconify-icons/ri/question-line";
|
||||
import CheckboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
|
||||
import InformationLine from "@iconify-icons/ri/information-line";
|
||||
import CloseCircleLine from "@iconify-icons/ri/close-circle-line";
|
||||
import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
|
||||
import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
|
||||
import Bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
import AddLine from "@iconify-icons/ri/add-line";
|
||||
import ListCheck from "@iconify-icons/ri/list-check";
|
||||
import More2Fill from "@iconify-icons/ri/more-2-fill";
|
||||
import Database from "@iconify-icons/ri/database-2-line";
|
||||
import Dict from "@iconify-icons/ri/git-repository-line";
|
||||
import Card from "@iconify-icons/ri/bank-card-line";
|
||||
import Reset from "@iconify-icons/ri/restart-line";
|
||||
import Dept from "@iconify-icons/ri/git-branch-line";
|
||||
import Password from "@iconify-icons/ri/lock-password-line";
|
||||
import Ppt from "@iconify-icons/ri/file-ppt-2-line";
|
||||
import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line";
|
||||
import User from "@iconify-icons/ri/user-3-fill";
|
||||
import Lock from "@iconify-icons/ri/lock-fill";
|
||||
import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
|
||||
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
|
||||
import Setting from "@iconify-icons/ri/settings-3-line";
|
||||
import ArrowDown from "@iconify-icons/ri/arrow-down-s-line";
|
||||
import CloseLeftTags from "@iconify-icons/ri/text-direction-r";
|
||||
import CloseRightTags from "@iconify-icons/ri/text-direction-l";
|
||||
import CloseOtherTags from "@iconify-icons/ri/text-spacing";
|
||||
import CloseAllTags from "@iconify-icons/ri/subtract-line";
|
||||
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
|
||||
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
|
||||
addIcon("arrow-right-s-line", ArrowRightSLine);
|
||||
addIcon("arrow-left-s-line", ArrowLeftSLine);
|
||||
addIcon("logout-circle-r-line", LogoutCircleRLine);
|
||||
addIcon("node-tree", NodeTree);
|
||||
addIcon("ubuntu-fill", UbuntuFill);
|
||||
addIcon("question-line", QuestionLine);
|
||||
addIcon("checkbox-circle-line", CheckboxCircleLine);
|
||||
addIcon("information-line", InformationLine);
|
||||
addIcon("close-circle-line", CloseCircleLine);
|
||||
addIcon("arrow-up-line", ArrowUpLine);
|
||||
addIcon("arrow-down-line", ArrowDownLine);
|
||||
addIcon("bookmark-2-line", Bookmark2Line);
|
||||
addIcon("add", AddFill);
|
||||
addIcon("add-line", AddLine);
|
||||
addIcon("list-check", ListCheck);
|
||||
addIcon("more-vertical", More2Fill);
|
||||
addIcon("database", Database);
|
||||
addIcon("dict", Dict);
|
||||
addIcon("card", Card);
|
||||
addIcon("reset", Reset);
|
||||
addIcon("dept", Dept);
|
||||
addIcon("password", Password);
|
||||
addIcon("ppt", Ppt);
|
||||
addIcon("terminal-window-line", TerminalWindowLine);
|
||||
addIcon("user", User);
|
||||
addIcon("lock", Lock);
|
||||
addIcon("menu-unfold", MenuUnfold);
|
||||
addIcon("menu-fold", MenuFold);
|
||||
addIcon("setting", Setting);
|
||||
addIcon("arrow-down", ArrowDown);
|
||||
addIcon("close-left-tags", CloseLeftTags);
|
||||
addIcon("close-right-tags", CloseRightTags);
|
||||
addIcon("close-other-tags", CloseOtherTags);
|
||||
addIcon("close-all-tags", CloseAllTags);
|
||||
addIcon("fullscreen", Fullscreen);
|
||||
addIcon("exit-fullscreen", ExitFullscreen);
|
||||
|
||||
// Font Awesome 4
|
||||
import FaUser from "@iconify-icons/fa/user";
|
||||
import FaLock from "@iconify-icons/fa/lock";
|
||||
import FaSignOut from "@iconify-icons/fa/sign-out";
|
||||
addIcon("fa-user", FaUser);
|
||||
addIcon("fa-lock", FaLock);
|
||||
addIcon("fa-sign-out", FaSignOut);
|
||||
|
||||
// Unicons
|
||||
import Import from "@iconify-icons/uil/import";
|
||||
import Export from "@iconify-icons/uil/export";
|
||||
import ArrowsShrinkV from "@iconify-icons/uil/arrows-shrink-v";
|
||||
addIcon("import", Import);
|
||||
addIcon("export", Export);
|
||||
addIcon("density", ArrowsShrinkV);
|
||||
|
||||
// fluent
|
||||
import Role from "@iconify-icons/fluent/people-swap-28-filled";
|
||||
import FlUser from "@iconify-icons/fluent/person-12-filled";
|
||||
addIcon("role", Role);
|
||||
addIcon("flUser", FlUser);
|
||||
|
||||
// Material Design Icons
|
||||
import Expand from "@iconify-icons/mdi/arrow-expand-down";
|
||||
import UnExpand from "@iconify-icons/mdi/arrow-expand-right";
|
||||
addIcon("expand", Expand);
|
||||
addIcon("unExpand", UnExpand);
|
||||
|
||||
// carbon
|
||||
import LocationCompany from "@iconify-icons/carbon/location-company";
|
||||
addIcon("location-company", LocationCompany);
|
||||
|
||||
// Iconify Icon在Vue里本地使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
|
||||
export default defineComponent({
|
||||
name: "IconifyIconOffline",
|
||||
components: { IconifyIcon },
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
default: ""
|
||||
default: null
|
||||
}
|
||||
},
|
||||
render() {
|
||||
if (typeof this.icon === "object") addIcon(this.icon, this.icon);
|
||||
const attrs = this.$attrs;
|
||||
return h(
|
||||
IconifyIcon,
|
||||
{
|
||||
icon: `${this.icon}`,
|
||||
icon: this.icon,
|
||||
style: attrs?.style
|
||||
? Object.assign(attrs.style, { outline: "none" })
|
||||
: { outline: "none" },
|
||||
|
||||
@@ -13,6 +13,7 @@ import { isString } from "@pureadmin/utils";
|
||||
import { propTypes } from "@/utils/propTypes";
|
||||
import { IconifyIconOffline } from "../../ReIcon";
|
||||
import QRCode, { QRCodeRenderersOptions } from "qrcode";
|
||||
import RefreshRight from "@iconify-icons/ep/refresh-right";
|
||||
|
||||
interface QrcodeLogo {
|
||||
src?: string;
|
||||
@@ -247,7 +248,7 @@ export default defineComponent({
|
||||
<div class="absolute top-[50%] left-[50%] font-bold">
|
||||
<IconifyIconOffline
|
||||
class="cursor-pointer"
|
||||
icon="refresh-right"
|
||||
icon={RefreshRight}
|
||||
width="30"
|
||||
color="var(--el-color-primary)"
|
||||
/>
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
import { defineComponent, ref, computed, PropType } from "vue";
|
||||
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
|
||||
|
||||
import UnExpand from "@iconify-icons/mdi/arrow-expand-right";
|
||||
import { IconifyIconOffline } from "../../ReIcon";
|
||||
import Expand from "@iconify-icons/mdi/arrow-expand-down";
|
||||
import ArrowCollapse from "@iconify-icons/mdi/arrow-collapse-vertical";
|
||||
import Setting from "@iconify-icons/ri/settings-3-line";
|
||||
import RefreshRight from "@iconify-icons/ep/refresh-right";
|
||||
|
||||
export const loadingSvg = `
|
||||
<path class="path" d="
|
||||
@@ -105,7 +111,7 @@ export default defineComponent({
|
||||
reference: () => (
|
||||
<IconifyIconOffline
|
||||
class="cursor-pointer"
|
||||
icon="setting"
|
||||
icon={Setting}
|
||||
width="16"
|
||||
color="text_color_regular"
|
||||
onMouseover={e => (buttonRef.value = e.currentTarget)}
|
||||
@@ -135,7 +141,7 @@ export default defineComponent({
|
||||
>
|
||||
<IconifyIconOffline
|
||||
class="cursor-pointer"
|
||||
icon={isExpandAll.value ? "unExpand" : "expand"}
|
||||
icon={isExpandAll.value ? UnExpand : Expand}
|
||||
width="16"
|
||||
color="text_color_regular"
|
||||
onClick={() => onExpand()}
|
||||
@@ -147,7 +153,7 @@ export default defineComponent({
|
||||
<el-tooltip effect="dark" content="刷新" placement="top">
|
||||
<IconifyIconOffline
|
||||
class="cursor-pointer"
|
||||
icon="refresh-right"
|
||||
icon={RefreshRight}
|
||||
width="16"
|
||||
color="text_color_regular"
|
||||
onClick={() => emit("refresh")}
|
||||
@@ -159,7 +165,7 @@ export default defineComponent({
|
||||
<el-dropdown v-slots={dropdown} trigger="click">
|
||||
<IconifyIconOffline
|
||||
class="cursor-pointer"
|
||||
icon="density"
|
||||
icon={ArrowCollapse}
|
||||
width="16"
|
||||
color="text_color_regular"
|
||||
/>
|
||||
|
||||
@@ -7,6 +7,9 @@ import Breadcrumb from "./sidebar/breadCrumb.vue";
|
||||
import topCollapse from "./sidebar/topCollapse.vue";
|
||||
import { useTranslationLang } from "../hooks/useTranslationLang";
|
||||
import globalization from "@/assets/svg/globalization.svg?component";
|
||||
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
|
||||
import Setting from "@iconify-icons/ri/settings-3-line";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
|
||||
const {
|
||||
layout,
|
||||
@@ -62,7 +65,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
|
||||
<IconifyIconOffline
|
||||
class="check-zh"
|
||||
v-show="locale === 'zh'"
|
||||
icon="check"
|
||||
:icon="Check"
|
||||
/>
|
||||
简体中文
|
||||
</el-dropdown-item>
|
||||
@@ -72,7 +75,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
|
||||
@click="translationEn"
|
||||
>
|
||||
<span class="check-en" v-show="locale === 'en'">
|
||||
<IconifyIconOffline icon="check" />
|
||||
<IconifyIconOffline :icon="Check" />
|
||||
</span>
|
||||
English
|
||||
</el-dropdown-item>
|
||||
@@ -92,7 +95,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
|
||||
<el-dropdown-menu class="logout">
|
||||
<el-dropdown-item @click="logout">
|
||||
<IconifyIconOffline
|
||||
icon="logout-circle-r-line"
|
||||
:icon="LogoutCircleRLine"
|
||||
style="margin: 5px"
|
||||
/>
|
||||
{{ t("buttons.hsLoginOut") }}
|
||||
@@ -105,7 +108,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
|
||||
:title="t('buttons.hssystemSet')"
|
||||
@click="onPanel"
|
||||
>
|
||||
<IconifyIconOffline icon="setting" />
|
||||
<IconifyIconOffline :icon="Setting" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { ref } from "vue";
|
||||
import { noticesData } from "./data";
|
||||
import NoticeList from "./noticeList.vue";
|
||||
import Bell from "@iconify-icons/ep/bell";
|
||||
|
||||
const noticesNum = ref(0);
|
||||
const notices = ref(noticesData);
|
||||
@@ -15,7 +16,7 @@ notices.value.map(v => (noticesNum.value += v.list.length));
|
||||
<span class="dropdown-badge navbar-bg-hover select-none">
|
||||
<el-badge :value="noticesNum" :max="99">
|
||||
<span class="header-notice-icon">
|
||||
<IconifyIconOffline icon="bell" />
|
||||
<IconifyIconOffline :icon="Bell" />
|
||||
</span>
|
||||
</el-badge>
|
||||
</span>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { ref } from "vue";
|
||||
import { onClickOutside } from "@vueuse/core";
|
||||
import { emitter } from "@/utils/mitt";
|
||||
import Close from "@iconify-icons/ep/close";
|
||||
|
||||
const show = ref<Boolean>(false);
|
||||
const target = ref(null);
|
||||
@@ -25,7 +26,7 @@ emitter.on("openPanel", () => {
|
||||
<span title="关闭配置">
|
||||
<IconifyIconOffline
|
||||
class="dark:text-white"
|
||||
icon="close"
|
||||
:icon="Close"
|
||||
@click="show = !show"
|
||||
/>
|
||||
</span>
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
确认
|
||||
</span>
|
||||
<span class="search-footer-item">
|
||||
<IconifyIconOffline icon="arrow-up-line" class="icon" />
|
||||
<IconifyIconOffline icon="arrow-down-line" class="icon" />
|
||||
<IconifyIconOffline :icon="ArrowUpLine" class="icon" />
|
||||
<IconifyIconOffline :icon="ArrowDownLine" class="icon" />
|
||||
切换
|
||||
</span>
|
||||
<span class="search-footer-item">
|
||||
@@ -17,6 +17,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
|
||||
import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
|
||||
import mdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component";
|
||||
import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
|
||||
</script>
|
||||
|
||||
@@ -9,6 +9,7 @@ import { transformI18n } from "@/plugins/i18n";
|
||||
import { useDebounceFn, onKeyStroke } from "@vueuse/core";
|
||||
import { ref, watch, computed, nextTick, shallowRef } from "vue";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
|
||||
interface Props {
|
||||
/** 弹窗显隐 */
|
||||
@@ -148,7 +149,7 @@ onKeyStroke("ArrowDown", handleDown);
|
||||
>
|
||||
<template #prefix>
|
||||
<span class="el-input__icon">
|
||||
<IconifyIconOffline icon="search" />
|
||||
<IconifyIconOffline :icon="Search" />
|
||||
</span>
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useI18n } from "vue-i18n";
|
||||
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
|
||||
import Bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
@@ -67,7 +68,7 @@ function handleTo() {
|
||||
@click="handleTo"
|
||||
@mouseenter="handleMouse(item)"
|
||||
>
|
||||
<component :is="useRenderIcon(item.meta?.icon ?? 'bookmark-2-line')" />
|
||||
<component :is="useRenderIcon(item.meta?.icon ?? Bookmark2Line)" />
|
||||
<span class="result-item-title">{{ t(item.meta?.title) }}</span>
|
||||
<enterOutlined />
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { SearchModal } from "./components";
|
||||
import { useBoolean } from "../../hooks/useBoolean";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
|
||||
const { bool: show, toggle } = useBoolean();
|
||||
function handleSearch() {
|
||||
toggle();
|
||||
@@ -12,7 +14,7 @@ function handleSearch() {
|
||||
class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
|
||||
@click="handleSearch"
|
||||
>
|
||||
<IconifyIconOffline icon="search" />
|
||||
<IconifyIconOffline :icon="Search" />
|
||||
</div>
|
||||
<SearchModal v-model:value="show" />
|
||||
</template>
|
||||
|
||||
@@ -30,6 +30,8 @@ import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
|
||||
|
||||
import dayIcon from "@/assets/svg/day.svg?component";
|
||||
import darkIcon from "@/assets/svg/dark.svg?component";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
import Logout from "@iconify-icons/ri/logout-circle-r-line";
|
||||
|
||||
const router = useRouter();
|
||||
const { device } = useNav();
|
||||
@@ -42,7 +44,6 @@ const verticalRef = ref();
|
||||
const horizontalRef = ref();
|
||||
|
||||
const {
|
||||
body,
|
||||
dataTheme,
|
||||
layoutTheme,
|
||||
themeColors,
|
||||
@@ -165,8 +166,6 @@ function setFalse(Doms): any {
|
||||
}
|
||||
|
||||
watch($storage, ({ layout }) => {
|
||||
/* 设置wangeditorV5主题色 */
|
||||
body.style.setProperty("--w-e-toolbar-active-color", layout["epThemeColor"]);
|
||||
switch (layout["layout"]) {
|
||||
case "vertical":
|
||||
toggleClass(true, isSelect, unref(verticalRef));
|
||||
@@ -302,7 +301,7 @@ nextTick(() => {
|
||||
:size="17"
|
||||
:color="getThemeColor(item.themeColor)"
|
||||
>
|
||||
<IconifyIconOffline icon="check" />
|
||||
<IconifyIconOffline :icon="Check" />
|
||||
</el-icon>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -383,7 +382,7 @@ nextTick(() => {
|
||||
@click="onReset"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
icon="fa-sign-out"
|
||||
:icon="Logout"
|
||||
width="15"
|
||||
height="15"
|
||||
style="margin-right: 4px"
|
||||
|
||||
@@ -7,6 +7,9 @@ import { useNav } from "@/layout/hooks/useNav";
|
||||
import { useTranslationLang } from "../../hooks/useTranslationLang";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import globalization from "@/assets/svg/globalization.svg?component";
|
||||
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
|
||||
import Setting from "@iconify-icons/ri/settings-3-line";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
|
||||
const menuRef = ref();
|
||||
|
||||
@@ -76,7 +79,7 @@ watch(
|
||||
@click="translationCh"
|
||||
>
|
||||
<span class="check-zh" v-show="locale === 'zh'">
|
||||
<IconifyIconOffline icon="check" />
|
||||
<IconifyIconOffline :icon="Check" />
|
||||
</span>
|
||||
简体中文
|
||||
</el-dropdown-item>
|
||||
@@ -86,7 +89,7 @@ watch(
|
||||
@click="translationEn"
|
||||
>
|
||||
<span class="check-en" v-show="locale === 'en'">
|
||||
<IconifyIconOffline icon="check" />
|
||||
<IconifyIconOffline :icon="Check" />
|
||||
</span>
|
||||
English
|
||||
</el-dropdown-item>
|
||||
@@ -106,7 +109,7 @@ watch(
|
||||
<el-dropdown-menu class="logout">
|
||||
<el-dropdown-item @click="logout">
|
||||
<IconifyIconOffline
|
||||
icon="logout-circle-r-line"
|
||||
:icon="LogoutCircleRLine"
|
||||
style="margin: 5px"
|
||||
/>
|
||||
{{ t("buttons.hsLoginOut") }}
|
||||
@@ -119,7 +122,7 @@ watch(
|
||||
:title="t('buttons.hssystemSet')"
|
||||
@click="onPanel"
|
||||
>
|
||||
<IconifyIconOffline icon="setting" />
|
||||
<IconifyIconOffline :icon="Setting" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { useDark } from "@pureadmin/utils";
|
||||
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
|
||||
import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
|
||||
|
||||
interface Props {
|
||||
isActive: boolean;
|
||||
@@ -27,7 +29,7 @@ const toggleClick = () => {
|
||||
:content="props.isActive ? '点击折叠' : '点击展开'"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
:icon="props.isActive ? 'menu-fold' : 'menu-unfold'"
|
||||
:icon="props.isActive ? MenuFold : MenuUnfold"
|
||||
class="cursor-pointer inline-block align-middle text-primary hover:text-primary dark:hover:!text-white w-[16px] h-[16px] ml-4 mb-1"
|
||||
@click="toggleClick"
|
||||
/>
|
||||
|
||||
@@ -9,6 +9,9 @@ import { getParentPaths, findRouteByPath } from "@/router/utils";
|
||||
import { useTranslationLang } from "../../hooks/useTranslationLang";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import globalization from "@/assets/svg/globalization.svg?component";
|
||||
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
|
||||
import Setting from "@iconify-icons/ri/settings-3-line";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
|
||||
const menuRef = ref();
|
||||
const defaultActive = ref(null);
|
||||
@@ -108,7 +111,7 @@ watch(
|
||||
@click="translationCh"
|
||||
>
|
||||
<span class="check-zh" v-show="locale === 'zh'">
|
||||
<IconifyIconOffline icon="check" />
|
||||
<IconifyIconOffline :icon="Check" />
|
||||
</span>
|
||||
简体中文
|
||||
</el-dropdown-item>
|
||||
@@ -118,7 +121,7 @@ watch(
|
||||
@click="translationEn"
|
||||
>
|
||||
<span class="check-en" v-show="locale === 'en'">
|
||||
<IconifyIconOffline icon="check" />
|
||||
<IconifyIconOffline :icon="Check" />
|
||||
</span>
|
||||
English
|
||||
</el-dropdown-item>
|
||||
@@ -138,7 +141,7 @@ watch(
|
||||
<el-dropdown-menu class="logout">
|
||||
<el-dropdown-item @click="logout">
|
||||
<IconifyIconOffline
|
||||
icon="logout-circle-r-line"
|
||||
:icon="LogoutCircleRLine"
|
||||
style="margin: 5px"
|
||||
/>
|
||||
{{ t("buttons.hsLoginOut") }}
|
||||
@@ -151,7 +154,7 @@ watch(
|
||||
:title="t('buttons.hssystemSet')"
|
||||
@click="onPanel"
|
||||
>
|
||||
<IconifyIconOffline icon="setting" />
|
||||
<IconifyIconOffline :icon="Setting" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,6 +7,11 @@ import { transformI18n } from "@/plugins/i18n";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { ref, toRaw, PropType, nextTick, computed, CSSProperties } from "vue";
|
||||
|
||||
import ArrowUp from "@iconify-icons/ep/arrow-up";
|
||||
import EpArrowDown from "@iconify-icons/ep/arrow-down";
|
||||
import ArrowLeft from "@iconify-icons/ep/arrow-left";
|
||||
import ArrowRight from "@iconify-icons/ep/arrow-right";
|
||||
|
||||
const { layout, isCollapse } = useNav();
|
||||
|
||||
const props = defineProps({
|
||||
@@ -78,7 +83,13 @@ const getSpanStyle = computed(() => {
|
||||
});
|
||||
|
||||
const expandCloseIcon = computed(() => {
|
||||
return getConfig()?.MenuArrowIconNoTransition ? "expand-close-icon" : "";
|
||||
if (!getConfig()?.MenuArrowIconNoTransition) return "";
|
||||
return {
|
||||
"expand-close-icon": useRenderIcon(EpArrowDown),
|
||||
"expand-open-icon": useRenderIcon(ArrowUp),
|
||||
"collapse-close-icon": useRenderIcon(ArrowRight),
|
||||
"collapse-open-icon": useRenderIcon(ArrowLeft)
|
||||
};
|
||||
});
|
||||
|
||||
const onlyOneChild: childrenType = ref(null);
|
||||
@@ -220,11 +231,8 @@ function resolvePath(routePath) {
|
||||
<el-sub-menu
|
||||
v-else
|
||||
ref="subMenu"
|
||||
v-bind="expandCloseIcon"
|
||||
:index="resolvePath(props.item.path)"
|
||||
v-bind:[expandCloseIcon]="useRenderIcon('ep-arrow-down')"
|
||||
:expand-open-icon="useRenderIcon('ep-arrow-up')"
|
||||
:collapse-close-icon="useRenderIcon('ep-arrow-right')"
|
||||
:collapse-open-icon="useRenderIcon('ep-arrow-left')"
|
||||
>
|
||||
<template #title>
|
||||
<div v-if="toRaw(props.item.meta.icon)" class="sub-menu-icon">
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
|
||||
import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
|
||||
|
||||
interface Props {
|
||||
isActive: boolean;
|
||||
}
|
||||
@@ -23,7 +26,7 @@ const toggleClick = () => {
|
||||
@click="toggleClick"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
:icon="props.isActive ? 'menu-fold' : 'menu-unfold'"
|
||||
:icon="props.isActive ? MenuFold : MenuUnfold"
|
||||
class="inline-block align-middle hover:text-primary dark:hover:!text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -11,6 +11,13 @@ import { handleAliveRoute, delAliveRoutes } from "@/router/utils";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import { useResizeObserver, useDebounceFn, useFullscreen } from "@vueuse/core";
|
||||
|
||||
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
|
||||
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
|
||||
import ArrowDown from "@iconify-icons/ri/arrow-down-s-line";
|
||||
import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
|
||||
import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
|
||||
import CloseBold from "@iconify-icons/ep/close-bold";
|
||||
|
||||
const {
|
||||
route,
|
||||
router,
|
||||
@@ -284,10 +291,10 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
|
||||
toggle();
|
||||
setTimeout(() => {
|
||||
if (isFullscreen.value) {
|
||||
tagsViews[6].icon = "exit-fullscreen";
|
||||
tagsViews[6].icon = ExitFullscreen;
|
||||
tagsViews[6].text = $t("buttons.hswholeExitFullScreen");
|
||||
} else {
|
||||
tagsViews[6].icon = "fullscreen";
|
||||
tagsViews[6].icon = Fullscreen;
|
||||
tagsViews[6].text = $t("buttons.hswholeFullScreen");
|
||||
}
|
||||
}, 100);
|
||||
@@ -297,10 +304,10 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
|
||||
onContentFullScreen();
|
||||
setTimeout(() => {
|
||||
if (pureSetting.hiddenSideBar) {
|
||||
tagsViews[7].icon = "exit-fullscreen";
|
||||
tagsViews[7].icon = ExitFullscreen;
|
||||
tagsViews[7].text = $t("buttons.hscontentExitFullScreen");
|
||||
} else {
|
||||
tagsViews[7].icon = "fullscreen";
|
||||
tagsViews[7].icon = Fullscreen;
|
||||
tagsViews[7].text = $t("buttons.hscontentFullScreen");
|
||||
}
|
||||
}, 100);
|
||||
@@ -496,7 +503,7 @@ onMounted(() => {
|
||||
<template>
|
||||
<div ref="containerDom" class="tags-view" v-if="!showTags">
|
||||
<span v-show="isShowArrow" class="arrow-left">
|
||||
<IconifyIconOffline icon="arrow-left-s-line" @click="handleScroll(200)" />
|
||||
<IconifyIconOffline :icon="ArrowLeftSLine" @click="handleScroll(200)" />
|
||||
</span>
|
||||
<div ref="scrollbarDom" class="scroll-container">
|
||||
<div class="tab select-none" ref="tabDom" :style="getTabStyle">
|
||||
@@ -530,7 +537,7 @@ onMounted(() => {
|
||||
class="el-icon-close"
|
||||
@click.stop="deleteMenu(item)"
|
||||
>
|
||||
<IconifyIconOffline icon="close-bold" />
|
||||
<IconifyIconOffline :icon="CloseBold" />
|
||||
</span>
|
||||
<div
|
||||
:ref="'schedule' + index"
|
||||
@@ -541,10 +548,7 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
<span v-show="isShowArrow" class="arrow-right">
|
||||
<IconifyIconOffline
|
||||
icon="arrow-right-s-line"
|
||||
@click="handleScroll(-200)"
|
||||
/>
|
||||
<IconifyIconOffline :icon="ArrowRightSLine" @click="handleScroll(-200)" />
|
||||
</span>
|
||||
<!-- 右键菜单按钮 -->
|
||||
<transition name="el-zoom-in-top">
|
||||
@@ -573,7 +577,7 @@ onMounted(() => {
|
||||
@command="handleCommand"
|
||||
>
|
||||
<span class="arrow-down">
|
||||
<IconifyIconOffline icon="arrow-down" class="dark:text-white" />
|
||||
<IconifyIconOffline :icon="ArrowDown" class="dark:text-white" />
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
|
||||
@@ -8,7 +8,6 @@ import { useGlobal } from "@pureadmin/utils";
|
||||
import { transformI18n } from "@/plugins/i18n";
|
||||
import { router, remainingPaths } from "@/router";
|
||||
import { useAppStoreHook } from "@/store/modules/app";
|
||||
import { i18nChangeLanguage } from "@wangeditor/editor";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
@@ -136,15 +135,6 @@ export function useNav() {
|
||||
return remainingPaths.includes(path);
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换wangEditorV5国际化
|
||||
* @param language string 可选值 en、zh-CN
|
||||
* @returns void
|
||||
*/
|
||||
function changeWangeditorLanguage(language: string): void {
|
||||
i18nChangeLanguage(language);
|
||||
}
|
||||
|
||||
return {
|
||||
title,
|
||||
device,
|
||||
@@ -164,7 +154,6 @@ export function useNav() {
|
||||
username,
|
||||
avatarsStyle,
|
||||
getDropdownItemStyle,
|
||||
getDropdownItemClass,
|
||||
changeWangeditorLanguage
|
||||
getDropdownItemClass
|
||||
};
|
||||
}
|
||||
|
||||
@@ -17,6 +17,14 @@ import { useSettingStoreHook } from "@/store/modules/settings";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import { storageLocal, toggleClass, hasClass } from "@pureadmin/utils";
|
||||
|
||||
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
|
||||
import CloseAllTags from "@iconify-icons/ri/subtract-line";
|
||||
import CloseOtherTags from "@iconify-icons/ri/text-spacing";
|
||||
import CloseRightTags from "@iconify-icons/ri/text-direction-l";
|
||||
import CloseLeftTags from "@iconify-icons/ri/text-direction-r";
|
||||
import RefreshRight from "@iconify-icons/ep/refresh-right";
|
||||
import Close from "@iconify-icons/ep/close";
|
||||
|
||||
export function useTags() {
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@@ -47,56 +55,56 @@ export function useTags() {
|
||||
|
||||
const tagsViews = reactive<Array<tagsViewsType>>([
|
||||
{
|
||||
icon: "refresh-right",
|
||||
icon: RefreshRight,
|
||||
text: $t("buttons.hsreload"),
|
||||
divided: false,
|
||||
disabled: false,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: "close",
|
||||
icon: Close,
|
||||
text: $t("buttons.hscloseCurrentTab"),
|
||||
divided: false,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: "close-left-tags",
|
||||
icon: CloseLeftTags,
|
||||
text: $t("buttons.hscloseLeftTabs"),
|
||||
divided: true,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: "close-right-tags",
|
||||
icon: CloseRightTags,
|
||||
text: $t("buttons.hscloseRightTabs"),
|
||||
divided: false,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: "close-other-tags",
|
||||
icon: CloseOtherTags,
|
||||
text: $t("buttons.hscloseOtherTabs"),
|
||||
divided: true,
|
||||
disabled: multiTags.value.length > 2 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: "close-all-tags",
|
||||
icon: CloseAllTags,
|
||||
text: $t("buttons.hscloseAllTabs"),
|
||||
divided: false,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: "fullscreen",
|
||||
icon: Fullscreen,
|
||||
text: $t("buttons.hswholeFullScreen"),
|
||||
divided: true,
|
||||
disabled: false,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: "fullscreen",
|
||||
icon: Fullscreen,
|
||||
text: $t("buttons.hscontentFullScreen"),
|
||||
divided: false,
|
||||
disabled: false,
|
||||
|
||||
@@ -4,8 +4,7 @@ import { useRoute } from "vue-router";
|
||||
import { watch, type Ref } from "vue";
|
||||
|
||||
export function useTranslationLang(ref?: Ref) {
|
||||
const { $storage, changeTitle, changeWangeditorLanguage, handleResize } =
|
||||
useNav();
|
||||
const { $storage, changeTitle, handleResize } = useNav();
|
||||
const { locale, t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
@@ -25,9 +24,6 @@ export function useTranslationLang(ref?: Ref) {
|
||||
() => locale.value,
|
||||
() => {
|
||||
changeTitle(route.meta);
|
||||
locale.value === "en"
|
||||
? changeWangeditorLanguage(locale.value)
|
||||
: changeWangeditorLanguage("zh-CN");
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import "animate.css";
|
||||
import { setType } from "./types";
|
||||
import { emitter } from "@/utils/mitt";
|
||||
import { useLayout } from "./hooks/useLayout";
|
||||
|
||||
@@ -1,17 +1,20 @@
|
||||
import type { IconifyIcon } from "@iconify/vue";
|
||||
import HomeFilled from "@iconify-icons/ep/home-filled";
|
||||
|
||||
export const routerArrays: Array<RouteConfigs> = [
|
||||
{
|
||||
path: "/welcome",
|
||||
parentPath: "/",
|
||||
meta: {
|
||||
title: "menus.hshome",
|
||||
icon: "home-filled"
|
||||
icon: HomeFilled
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
export type routeMetaType = {
|
||||
title?: string;
|
||||
icon?: string;
|
||||
icon?: string | IconifyIcon;
|
||||
showLink?: boolean;
|
||||
savedPosition?: boolean;
|
||||
auths?: Array<string>;
|
||||
@@ -32,7 +35,7 @@ export type multiTagsType = {
|
||||
};
|
||||
|
||||
export type tagsViewsType = {
|
||||
icon: string;
|
||||
icon: string | IconifyIcon;
|
||||
text: string;
|
||||
divided: boolean;
|
||||
disabled: boolean;
|
||||
|
||||
@@ -8,13 +8,11 @@ import { createApp, Directive } from "vue";
|
||||
import { MotionPlugin } from "@vueuse/motion";
|
||||
import { useEcharts } from "@/plugins/echarts";
|
||||
import { useTable } from "@/plugins/vxe-table";
|
||||
import VirtualScroller from "vue-virtual-scroller";
|
||||
import { injectResponsiveStorage } from "@/utils/responsive";
|
||||
|
||||
import Table from "@pureadmin/table";
|
||||
import PureDescriptions from "@pureadmin/descriptions";
|
||||
|
||||
import "animate.css";
|
||||
// 引入重置样式
|
||||
import "./style/reset.scss";
|
||||
// 导入公共样式
|
||||
@@ -23,8 +21,6 @@ import "element-plus/dist/index.css";
|
||||
// 导入字体图标
|
||||
import "./assets/iconfont/iconfont.js";
|
||||
import "./assets/iconfont/iconfont.css";
|
||||
import "v-contextmenu/dist/themes/default.css";
|
||||
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
@@ -60,7 +56,6 @@ getServerConfig(app).then(async config => {
|
||||
.use(Table)
|
||||
.use(PureDescriptions)
|
||||
.use(useTable)
|
||||
.use(useEcharts)
|
||||
.use(VirtualScroller);
|
||||
.use(useEcharts);
|
||||
app.mount("#app");
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import type { App } from "vue";
|
||||
import * as echarts from "echarts/core";
|
||||
import { SVGRenderer } from "echarts/renderers";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
import { PieChart, BarChart, LineChart } from "echarts/charts";
|
||||
import {
|
||||
GridComponent,
|
||||
@@ -20,7 +20,7 @@ use([
|
||||
PieChart,
|
||||
BarChart,
|
||||
LineChart,
|
||||
SVGRenderer,
|
||||
CanvasRenderer,
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
LegendComponent,
|
||||
@@ -41,6 +41,7 @@ use([
|
||||
/**
|
||||
* @description 按需引入echarts
|
||||
* @see {@link https://echarts.apache.org/handbook/zh/basics/import#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6}
|
||||
* @see 温馨提示：必须将 `$echarts` 添加到全局 `globalProperties` ，为了配合 https://pure-admin-utils.netlify.app/hooks/useEcharts/useEcharts.html 使用
|
||||
*/
|
||||
export function useEcharts(app: App) {
|
||||
app.config.globalProperties.$echarts = echarts;
|
||||
|
||||
@@ -5,8 +5,8 @@ const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以
|
||||
utils = 2,
|
||||
table = 3,
|
||||
tree = 4,
|
||||
able = 5,
|
||||
components = 6,
|
||||
components = 5,
|
||||
able = 6,
|
||||
frame = 7,
|
||||
nested = 8,
|
||||
result = 9,
|
||||
@@ -28,8 +28,8 @@ export {
|
||||
utils,
|
||||
table,
|
||||
tree,
|
||||
able,
|
||||
components,
|
||||
able,
|
||||
frame,
|
||||
nested,
|
||||
result,
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { $t } from "@/plugins/i18n";
|
||||
import { able } from "@/router/enums";
|
||||
import UbuntuFill from "@iconify-icons/ri/ubuntu-fill";
|
||||
|
||||
export default {
|
||||
path: "/able",
|
||||
redirect: "/able/watermark",
|
||||
meta: {
|
||||
icon: "ubuntu-fill",
|
||||
icon: UbuntuFill,
|
||||
title: $t("menus.hsAble"),
|
||||
rank: able
|
||||
},
|
||||
|
||||
@@ -5,7 +5,6 @@ export default {
|
||||
path: "/about",
|
||||
redirect: "/about/index",
|
||||
meta: {
|
||||
// icon: "question-line",
|
||||
title: $t("menus.hsAbout"),
|
||||
rank: about
|
||||
},
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { $t } from "@/plugins/i18n";
|
||||
import { components } from "@/router/enums";
|
||||
import Menu from "@iconify-icons/ep/menu";
|
||||
|
||||
export default {
|
||||
path: "/components",
|
||||
redirect: "/components/video",
|
||||
meta: {
|
||||
icon: "menu",
|
||||
icon: Menu,
|
||||
title: $t("menus.hscomponents"),
|
||||
rank: components
|
||||
},
|
||||
@@ -19,6 +20,10 @@ export default {
|
||||
extraIcon: {
|
||||
svg: true,
|
||||
name: "team-iconxinpinrenqiwang"
|
||||
},
|
||||
transition: {
|
||||
enterTransition: "animate__fadeInLeft",
|
||||
leaveTransition: "animate__fadeOutRight"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { $t } from "@/plugins/i18n";
|
||||
import { editor } from "@/router/enums";
|
||||
import Edit from "@iconify-icons/ep/edit";
|
||||
|
||||
export default {
|
||||
path: "/editor",
|
||||
redirect: "/editor/index",
|
||||
meta: {
|
||||
icon: "edit",
|
||||
icon: Edit,
|
||||
title: $t("menus.hseditor"),
|
||||
rank: editor
|
||||
},
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { $t } from "@/plugins/i18n";
|
||||
import { error } from "@/router/enums";
|
||||
import InformationLine from "@iconify-icons/ri/information-line";
|
||||
|
||||
export default {
|
||||
path: "/error",
|
||||
redirect: "/error/403",
|
||||
meta: {
|
||||
icon: "information-line",
|
||||
icon: InformationLine,
|
||||
title: $t("menus.hsabnormal"),
|
||||
rank: error
|
||||
},
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { $t } from "@/plugins/i18n";
|
||||
import { flowchart } from "@/router/enums";
|
||||
import SetUp from "@iconify-icons/ep/set-up";
|
||||
|
||||
export default {
|
||||
path: "/flowChart",
|
||||
redirect: "/flowChart/index",
|
||||
meta: {
|
||||
icon: "set-up",
|
||||
icon: SetUp,
|
||||
title: $t("menus.hsflowChart"),
|
||||
rank: flowchart
|
||||
},
|
||||
|
||||
@@ -2,11 +2,13 @@ import { $t } from "@/plugins/i18n";
|
||||
import { formdesign } from "@/router/enums";
|
||||
const IFrame = () => import("@/layout/frameView.vue");
|
||||
|
||||
import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line";
|
||||
|
||||
export default {
|
||||
path: "/formDesign",
|
||||
redirect: "/formDesign/index",
|
||||
meta: {
|
||||
icon: "terminal-window-line",
|
||||
icon: TerminalWindowLine,
|
||||
title: $t("menus.hsFormDesign"),
|
||||
rank: formdesign
|
||||
},
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { $t } from "@/plugins/i18n";
|
||||
import { guide } from "@/router/enums";
|
||||
import Guide from "@iconify-icons/ep/guide";
|
||||
|
||||
export default {
|
||||
path: "/guide",
|
||||
redirect: "/guide/index",
|
||||
meta: {
|
||||
icon: "guide",
|
||||
icon: Guide,
|
||||
title: $t("menus.hsguide"),
|
||||
rank: guide
|
||||
},
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { $t } from "@/plugins/i18n";
|
||||
import { home } from "@/router/enums";
|
||||
const Layout = () => import("@/layout/index.vue");
|
||||
import HomeFilled from "@iconify-icons/ep/home-filled";
|
||||
|
||||
export default {
|
||||
path: "/",
|
||||
@@ -8,7 +9,7 @@ export default {
|
||||
component: Layout,
|
||||
redirect: "/welcome",
|
||||
meta: {
|
||||
icon: "home-filled",
|
||||
icon: HomeFilled,
|
||||
title: $t("menus.hshome"),
|
||||
rank: home
|
||||
},
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
import { $t } from "@/plugins/i18n";
|
||||
import { list } from "@/router/enums";
|
||||
import ListCheck from "@iconify-icons/ri/list-check";
|
||||
import Card from "@iconify-icons/ri/bank-card-line";
|
||||
|
||||
export default {
|
||||
path: "/list",
|
||||
redirect: "/list/card",
|
||||
meta: {
|
||||
icon: "list-check",
|
||||
icon: ListCheck,
|
||||
title: $t("menus.hsList"),
|
||||
rank: list
|
||||
},
|
||||
@@ -15,7 +17,7 @@ export default {
|
||||
name: "ListCard",
|
||||
component: () => import("@/views/list/card/index.vue"),
|
||||
meta: {
|
||||
icon: "card",
|
||||
icon: Card,
|
||||
title: $t("menus.hsListCard"),
|
||||
showParent: true
|
||||
}
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import { $t } from "@/plugins/i18n";
|
||||
import { nested } from "@/router/enums";
|
||||
import Histogram from "@iconify-icons/ep/histogram";
|
||||
|
||||
export default {
|
||||
path: "/nested",
|
||||
redirect: "/nested/menu1/menu1-1",
|
||||
meta: {
|
||||
title: $t("menus.hsmenus"),
|
||||
icon: "histogram",
|
||||
icon: Histogram,
|
||||
rank: nested
|
||||
},
|
||||
children: [
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { ppt } from "@/router/enums";
|
||||
const IFrame = () => import("@/layout/frameView.vue");
|
||||
import Ppt from "@iconify-icons/ri/file-ppt-2-line";
|
||||
|
||||
export default {
|
||||
path: "/ppt",
|
||||
redirect: "/ppt/index",
|
||||
meta: {
|
||||
icon: "ppt",
|
||||
icon: Ppt,
|
||||
title: "PPT",
|
||||
rank: ppt
|
||||
},
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { $t } from "@/plugins/i18n";
|
||||
const Layout = () => import("@/layout/index.vue");
|
||||
import HomeFilled from "@iconify-icons/ep/home-filled";
|
||||
|
||||
export default [
|
||||
{
|
||||
@@ -16,7 +17,7 @@ export default [
|
||||
path: "/redirect",
|
||||
component: Layout,
|
||||
meta: {
|
||||
icon: "home-filled",
|
||||
icon: HomeFilled,
|
||||
title: $t("menus.hshome"),
|
||||
showLink: false,
|
||||
rank: 102
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { $t } from "@/plugins/i18n";
|
||||
import { result } from "@/router/enums";
|
||||
import CheckboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
|
||||
|
||||
export default {
|
||||
path: "/result",
|
||||
redirect: "/result/success",
|
||||
meta: {
|
||||
icon: "checkbox-circle-line",
|
||||
icon: CheckboxCircleLine,
|
||||
title: $t("menus.hsResult"),
|
||||
rank: result
|
||||
},
|
||||
|
||||
@@ -199,5 +199,12 @@ html.dark {
|
||||
pointer-events: all !important;
|
||||
background-image: initial !important;
|
||||
}
|
||||
|
||||
& .el-message__closeBtn {
|
||||
&:hover {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
background-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -86,6 +86,13 @@
|
||||
}
|
||||
|
||||
& .el-message__closeBtn {
|
||||
outline: none;
|
||||
border-radius: 4px;
|
||||
right: 9px !important;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -111,7 +111,6 @@ button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
@@ -133,16 +132,10 @@ progress {
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
@@ -211,7 +204,6 @@ iframe,
|
||||
embed,
|
||||
object {
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
img,
|
||||
|
||||
@@ -175,7 +175,7 @@ class PureHttp {
|
||||
/** 单独抽离的post工具函数 */
|
||||
public post<T, P>(
|
||||
url: string,
|
||||
params?: T,
|
||||
params?: AxiosRequestConfig<T>,
|
||||
config?: PureHttpRequestConfig
|
||||
): Promise<P> {
|
||||
return this.request<P>("post", url, params, config);
|
||||
@@ -184,7 +184,7 @@ class PureHttp {
|
||||
/** 单独抽离的get工具函数 */
|
||||
public get<T, P>(
|
||||
url: string,
|
||||
params?: T,
|
||||
params?: AxiosRequestConfig<T>,
|
||||
config?: PureHttpRequestConfig
|
||||
): Promise<P> {
|
||||
return this.request<P>("get", url, params, config);
|
||||
|
||||
@@ -1,17 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from "element-plus";
|
||||
import { message } from "@/utils/message";
|
||||
import { debounce, throttle } from "@pureadmin/utils";
|
||||
|
||||
defineOptions({
|
||||
name: "Debounce"
|
||||
});
|
||||
|
||||
const handle = () => {
|
||||
ElMessage({
|
||||
message: "恭喜你，这是一条成功消息",
|
||||
type: "success"
|
||||
});
|
||||
};
|
||||
const handle = () => message("恭喜你，这是一条成功消息", { type: "success" });
|
||||
|
||||
const immediateDebounce = debounce(handle, 1000, true);
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { IconSelect } from "@/components/ReIcon";
|
||||
import IconSelect from "@/components/ReIcon/src/Select.vue";
|
||||
|
||||
defineOptions({
|
||||
name: "IconSelect"
|
||||
|
||||
@@ -7,6 +7,7 @@ import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { extractPathList, deleteChildren } from "@/utils/tree";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import type { TreeNode } from "element-plus/es/components/tree-v2/src/types";
|
||||
import NodeTree from "@iconify-icons/ri/node-tree";
|
||||
|
||||
defineOptions({
|
||||
name: "MenuTree"
|
||||
@@ -50,7 +51,7 @@ const filterMethod = (query: string, node: treeNode) => {
|
||||
<el-link
|
||||
href="https://element-plus.gitee.io/zh-CN/component/tree-v2.html"
|
||||
target="_blank"
|
||||
:icon="useRenderIcon('node-tree')"
|
||||
:icon="useRenderIcon(NodeTree)"
|
||||
style="font-size: 16px; margin: 0 5px 4px 0"
|
||||
>
|
||||
Tree V2
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, unref } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { message } from "@/utils/message";
|
||||
import ReQrcode from "@/components/ReQrcode";
|
||||
|
||||
defineOptions({
|
||||
@@ -14,10 +14,10 @@ setTimeout(() => {
|
||||
asyncTitle.value = unref(qrcodeText);
|
||||
}, 3000);
|
||||
const codeClick = () => {
|
||||
ElMessage.info("点击事件");
|
||||
message("点击事件", { type: "info" });
|
||||
};
|
||||
const disabledClick = () => {
|
||||
ElMessage.info("失效");
|
||||
message("失效", { type: "info" });
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { markRaw } from "vue";
|
||||
import { useRenderFlicker } from "@/components/ReFlicker";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Iphone from "@iconify-icons/ep/iphone";
|
||||
|
||||
defineOptions({
|
||||
name: "TimeLine"
|
||||
@@ -11,12 +13,12 @@ const activities = [
|
||||
{
|
||||
content: "支持圆点闪动",
|
||||
timestamp: lastBuildTime,
|
||||
icon: useRenderFlicker()
|
||||
icon: markRaw(useRenderFlicker())
|
||||
},
|
||||
{
|
||||
content: "支持方形闪动",
|
||||
timestamp: lastBuildTime,
|
||||
icon: useRenderFlicker({ borderRadius: 0, background: "#67C23A" })
|
||||
icon: markRaw(useRenderFlicker({ borderRadius: 0, background: "#67C23A" }))
|
||||
},
|
||||
{
|
||||
content: "支持默认颜色",
|
||||
@@ -31,7 +33,7 @@ const activities = [
|
||||
content: "支持自定义图标",
|
||||
timestamp: lastBuildTime,
|
||||
color: "transparent",
|
||||
icon: useRenderIcon("iphone", {
|
||||
icon: useRenderIcon(Iphone, {
|
||||
color: "#0bbd87"
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
import { faker } from "@faker-js/faker";
|
||||
|
||||
let uid = 0;
|
||||
|
||||
function generateItem() {
|
||||
return {
|
||||
name: faker.name.findName(),
|
||||
avatar: faker.internet.avatar()
|
||||
};
|
||||
}
|
||||
|
||||
export function getData(count, letters) {
|
||||
const raw = {};
|
||||
|
||||
const alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
|
||||
|
||||
for (const l of alphabet) {
|
||||
raw[l] = [];
|
||||
}
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const item = generateItem();
|
||||
const letter = item.name.charAt(0).toLowerCase();
|
||||
raw[letter].push(item);
|
||||
}
|
||||
|
||||
const list = [];
|
||||
let index = 1;
|
||||
|
||||
for (const l of alphabet) {
|
||||
raw[l] = raw[l].sort((a, b) => (a.name < b.name ? -1 : 1));
|
||||
if (letters) {
|
||||
list.push({
|
||||
id: uid++,
|
||||
index: index++,
|
||||
type: "letter",
|
||||
value: l,
|
||||
height: 200
|
||||
});
|
||||
}
|
||||
for (const item of raw[l]) {
|
||||
list.push({
|
||||
id: uid++,
|
||||
index: index++,
|
||||
type: "person",
|
||||
value: item,
|
||||
height: 50
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
export function addItem(list) {
|
||||
list.push({
|
||||
id: uid++,
|
||||
index: list.length + 1,
|
||||
type: "person",
|
||||
value: generateItem(),
|
||||
height: 50
|
||||
});
|
||||
}
|
||||
|
||||
export function generateMessage() {
|
||||
return {
|
||||
avatar: faker.internet.avatar(),
|
||||
message: faker.lorem.text()
|
||||
};
|
||||
}
|
||||
@@ -1,33 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import { generateMessage } from "./data";
|
||||
import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
|
||||
|
||||
const items = ref([]);
|
||||
const search = ref("");
|
||||
|
||||
for (let i = 0; i < 10000; i++) {
|
||||
for (let i = 0; i < 800; i++) {
|
||||
items.value.push({
|
||||
id: i,
|
||||
...generateMessage()
|
||||
id: i
|
||||
});
|
||||
}
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
if (!search.value) return items.value;
|
||||
const lowerCaseSearch = search.value.toLowerCase();
|
||||
return items.value.filter(i =>
|
||||
i.message.toLowerCase().includes(lowerCaseSearch)
|
||||
);
|
||||
const lowerCaseSearch = search.value;
|
||||
return items.value.filter(i => i.id == lowerCaseSearch);
|
||||
});
|
||||
|
||||
function changeMessage(message) {
|
||||
Object.assign(message, generateMessage());
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dynamic-scroller-demo">
|
||||
<div class="flex justify-around mb-4">
|
||||
<div class="flex-ac mb-4 shadow-2xl">
|
||||
水平模式 horizontal
|
||||
<el-input
|
||||
class="mr-2 !w-[1/1.5]"
|
||||
clearable
|
||||
@@ -35,7 +29,6 @@ function changeMessage(message) {
|
||||
placeholder="Filter..."
|
||||
style="width: 300px"
|
||||
/>
|
||||
<el-tag effect="dark">水平模式horizontal</el-tag>
|
||||
</div>
|
||||
|
||||
<DynamicScroller
|
||||
@@ -48,31 +41,21 @@ function changeMessage(message) {
|
||||
<DynamicScrollerItem
|
||||
:item="item"
|
||||
:active="active"
|
||||
:size-dependencies="[item.message]"
|
||||
:size-dependencies="[item.id]"
|
||||
:data-index="index"
|
||||
:data-active="active"
|
||||
:title="`Click to change message ${index}`"
|
||||
:style="{
|
||||
width: `${Math.max(
|
||||
130,
|
||||
Math.round((item.message.length / 20) * 20)
|
||||
)}px`
|
||||
width: `${Math.max(130, Math.round((item.id?.length / 20) * 20))}px`
|
||||
}"
|
||||
class="message"
|
||||
@click="changeMessage(item)"
|
||||
>
|
||||
<div class="avatar">
|
||||
<div>
|
||||
<IconifyIconOnline
|
||||
icon="openmoji:beaming-face-with-smiling-eyes"
|
||||
width="40"
|
||||
/>
|
||||
</div>
|
||||
<div class="text">
|
||||
{{ item.message }}
|
||||
</div>
|
||||
<div class="index">
|
||||
<span>{{ item.id }} (id)</span>
|
||||
<span>{{ index }} (index)</span>
|
||||
<p class="text-center">{{ item.id }}</p>
|
||||
</div>
|
||||
</DynamicScrollerItem>
|
||||
</template>
|
||||
@@ -104,35 +87,4 @@ function changeMessage(message) {
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
flex: auto 0 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.avatar .image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.index,
|
||||
.text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.index {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.index span {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import verticalList from "./vertical.vue";
|
||||
import horizontalList from "./horizontal.vue";
|
||||
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
|
||||
|
||||
defineOptions({
|
||||
name: "VirtualList"
|
||||
|
||||
@@ -1,75 +1,56 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import { generateMessage } from "./data";
|
||||
import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
|
||||
|
||||
const items = ref([]);
|
||||
const search = ref("");
|
||||
|
||||
for (let i = 0; i < 10000; i++) {
|
||||
for (let i = 0; i < 800; i++) {
|
||||
items.value.push({
|
||||
id: i,
|
||||
...generateMessage()
|
||||
id: i
|
||||
});
|
||||
}
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
if (!search.value) return items.value;
|
||||
const lowerCaseSearch = search.value.toLowerCase();
|
||||
return items.value.filter(i =>
|
||||
i.message.toLowerCase().includes(lowerCaseSearch)
|
||||
);
|
||||
const lowerCaseSearch = search.value;
|
||||
return items.value.filter(i => i.id == lowerCaseSearch);
|
||||
});
|
||||
|
||||
function changeMessage(message) {
|
||||
Object.assign(message, generateMessage());
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
console.log("resize");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dynamic-scroller-demo">
|
||||
<div class="flex justify-around mb-4">
|
||||
<div class="flex-ac mb-4 shadow-2xl">
|
||||
垂直模式 vertical
|
||||
<el-input
|
||||
class="mr-2 !w-[1/1.5]"
|
||||
class="!w-[350px]"
|
||||
clearable
|
||||
v-model="search"
|
||||
placeholder="Filter..."
|
||||
/>
|
||||
<el-tag effect="dark">垂直模式vertical</el-tag>
|
||||
</div>
|
||||
|
||||
<DynamicScroller
|
||||
:items="filteredItems"
|
||||
:min-item-size="54"
|
||||
class="scroller"
|
||||
@resize="onResize"
|
||||
>
|
||||
<template #default="{ item, index, active }">
|
||||
<DynamicScrollerItem
|
||||
:item="item"
|
||||
:active="active"
|
||||
:size-dependencies="[item.message]"
|
||||
:size-dependencies="[item.id]"
|
||||
:data-index="index"
|
||||
:data-active="active"
|
||||
:title="`Click to change message ${index}`"
|
||||
class="message"
|
||||
@click="changeMessage(item)"
|
||||
>
|
||||
<div class="avatar">
|
||||
<div class="flex items-center">
|
||||
<IconifyIconOnline
|
||||
icon="openmoji:beaming-face-with-smiling-eyes"
|
||||
width="40"
|
||||
/>
|
||||
</div>
|
||||
<div class="text">
|
||||
{{ item.message }}
|
||||
</div>
|
||||
<div class="index">
|
||||
<span>{{ item.id }} (id)</span>
|
||||
<span>{{ index }} (index)</span>
|
||||
<span>{{ item.id }}</span>
|
||||
</div>
|
||||
</DynamicScrollerItem>
|
||||
</template>
|
||||
@@ -94,31 +75,4 @@ function onResize() {
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
flex: auto 0 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.index,
|
||||
.text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.text {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.index {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.index span {
|
||||
display: inline-block;
|
||||
width: 160px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import basic from "./basic.vue";
|
||||
import menuGroup from "./menuGroup.vue";
|
||||
import menuDynamic from "./menuDynamic.vue";
|
||||
import "v-contextmenu/dist/themes/default.css";
|
||||
|
||||
defineOptions({
|
||||
name: "ContextMenu"
|
||||
|
||||
@@ -7,7 +7,7 @@ defineOptions({
|
||||
name: "Danmaku"
|
||||
});
|
||||
|
||||
const danmaku = ref<any>(null);
|
||||
const danmaku = ref();
|
||||
const danmus = ref<any[]>(getDanmuData());
|
||||
const danmuMsg = ref<string>("");
|
||||
let timer = 0;
|
||||
@@ -112,7 +112,7 @@ function addDanmu() {
|
||||
target="_blank"
|
||||
style="font-size: 16px; margin: 0 4px 5px"
|
||||
>
|
||||
vue-danmaku
|
||||
vue3-danmaku
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,7 @@ import Sortable, { Swap } from "sortablejs";
|
||||
import draggable from "vuedraggable/src/vuedraggable";
|
||||
import { useAppStoreHook } from "@/store/modules/app";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Rank from "@iconify-icons/ep/rank";
|
||||
|
||||
defineOptions({
|
||||
name: "Draggable"
|
||||
@@ -63,7 +64,7 @@ onMounted(() => {
|
||||
<el-link
|
||||
href="https://sortablejs.github.io/vue.draggable.next/#/simple"
|
||||
target="_blank"
|
||||
:icon="useRenderIcon('rank')"
|
||||
:icon="useRenderIcon(Rank)"
|
||||
style="font-size: 16px; margin: 0 4px 5px"
|
||||
>
|
||||
vuedraggable
|
||||
|
||||
@@ -3,6 +3,7 @@ import { h } from "vue";
|
||||
import hot from "@/assets/svg/hot.svg?component";
|
||||
import { message, closeAllMessage } from "@/utils/message";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
|
||||
defineOptions({
|
||||
name: "Message"
|
||||
@@ -19,7 +20,7 @@ defineOptions({
|
||||
|
||||
<h4 class="mb-4">element-plus 的消息提示，点击弹出提示信息</h4>
|
||||
|
||||
<el-space>
|
||||
<el-space wrap>
|
||||
<el-button
|
||||
type="info"
|
||||
@click="message('Info类型消息', { customClass: 'el' })"
|
||||
@@ -68,7 +69,7 @@ defineOptions({
|
||||
@click="
|
||||
message('自定义消息图标', {
|
||||
customClass: 'el',
|
||||
icon: useRenderIcon('check')
|
||||
icon: useRenderIcon(Check)
|
||||
})
|
||||
"
|
||||
>
|
||||
@@ -119,7 +120,7 @@ defineOptions({
|
||||
原本样式，使用和打包大小成本极低并适配暗黑模式）
|
||||
</h4>
|
||||
|
||||
<el-space>
|
||||
<el-space wrap>
|
||||
<el-button type="info" @click="message('Info类型消息')">Info</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
|
||||
@@ -6,6 +6,7 @@ import { deviceDetection } from "@pureadmin/utils";
|
||||
import screenShot from "xgplayer/es/controls/screenShot";
|
||||
import playbackRate from "xgplayer/es/controls/playbackRate";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import VideoPlay from "@iconify-icons/ep/video-play";
|
||||
|
||||
defineOptions({
|
||||
name: "Video"
|
||||
@@ -38,7 +39,7 @@ onMounted(() => {
|
||||
<el-link
|
||||
href="https://v2.h5player.bytedance.com"
|
||||
target="_blank"
|
||||
:icon="useRenderIcon('video-play')"
|
||||
:icon="useRenderIcon(VideoPlay)"
|
||||
style="font-size: 16px; margin: 0 4px 5px"
|
||||
>
|
||||
西瓜播放器
|
||||
|
||||
@@ -3,6 +3,7 @@ import "@wangeditor/editor/dist/css/style.css"; // 引入 css
|
||||
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
|
||||
import Edit from "@iconify-icons/ep/edit";
|
||||
|
||||
defineOptions({
|
||||
name: "Editor"
|
||||
@@ -46,7 +47,7 @@ const handleCreated = editor => {
|
||||
<el-link
|
||||
href="https://www.wangeditor.com"
|
||||
target="_blank"
|
||||
:icon="useRenderIcon('edit')"
|
||||
:icon="useRenderIcon(Edit)"
|
||||
style="font-size: 16px; margin: 0 4px 5px"
|
||||
>
|
||||
Wangeditor
|
||||
|
||||
@@ -11,6 +11,8 @@ import { Snapshot, BpmnElement, Menu } from "@logicflow/extension";
|
||||
import { Control, NodePanel, DataDialog } from "@/components/ReFlowChart";
|
||||
import { toLogicflowData } from "@/components/ReFlowChart/src/adpterForTurbo";
|
||||
|
||||
import SetUp from "@iconify-icons/ep/set-up";
|
||||
|
||||
defineOptions({
|
||||
name: "FlowChart"
|
||||
});
|
||||
@@ -71,7 +73,7 @@ onMounted(() => {
|
||||
<el-link
|
||||
href="http://logic-flow.org/"
|
||||
target="_blank"
|
||||
:icon="useRenderIcon('set-up')"
|
||||
:icon="useRenderIcon(SetUp)"
|
||||
style="font-size: 16px; margin: 0 4px 5px"
|
||||
>
|
||||
LogicFlow
|
||||
|
||||
@@ -5,6 +5,7 @@ import laptopIcon from "@/assets/svg/laptop.svg?component";
|
||||
import serviceIcon from "@/assets/svg/service.svg?component";
|
||||
import calendarIcon from "@/assets/svg/calendar.svg?component";
|
||||
import userAvatarIcon from "@/assets/svg/user_avatar.svg?component";
|
||||
import More2Fill from "@iconify-icons/ri/more-2-fill";
|
||||
|
||||
defineOptions({
|
||||
name: "ReCard"
|
||||
@@ -64,7 +65,7 @@ const cardLogoClass = computed(() => [
|
||||
{{ product.isSetup ? "已启用" : "已停用" }}
|
||||
</el-tag>
|
||||
<el-dropdown trigger="click" :disabled="!product.isSetup">
|
||||
<IconifyIconOffline icon="more-vertical" class="text-[24px]" />
|
||||
<IconifyIconOffline :icon="More2Fill" class="text-[24px]" />
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu :disabled="!product.isSetup">
|
||||
<el-dropdown-item @click="handleClickManage(product)">
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { ElMessage, FormInstance } from "element-plus";
|
||||
import { message } from "@/utils/message";
|
||||
import { FormInstance } from "element-plus";
|
||||
|
||||
const SELECT_OPTIONS = [
|
||||
{ label: "网关", value: 1 },
|
||||
@@ -33,7 +34,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
await formEl.validate(valid => {
|
||||
if (valid) {
|
||||
ElMessage.success("提交成功");
|
||||
message("提交成功", { type: "success" });
|
||||
formVisible.value = false;
|
||||
resetForm(formEl);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import Card from "./components/Card.vue";
|
||||
import { getCardList } from "@/api/list";
|
||||
import { message } from "@/utils/message";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import dialogForm from "./components/DialogForm.vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
|
||||
defineOptions({
|
||||
name: "ListCard"
|
||||
@@ -77,10 +80,7 @@ const handleDeleteItem = product => {
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
ElMessage({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
});
|
||||
message("删除成功", { type: "success" });
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
@@ -95,7 +95,10 @@ const handleManageProduct = product => {
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="w-full flex justify-between mb-4">
|
||||
<el-button :icon="useRenderIcon('add')" @click="formDialogVisible = true">
|
||||
<el-button
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="formDialogVisible = true"
|
||||
>
|
||||
新建产品
|
||||
</el-button>
|
||||
<el-input
|
||||
@@ -108,7 +111,7 @@ const handleManageProduct = product => {
|
||||
<el-icon class="el-input__icon">
|
||||
<IconifyIconOffline
|
||||
v-show="searchValue.length === 0"
|
||||
icon="search"
|
||||
:icon="Search"
|
||||
/>
|
||||
</el-icon>
|
||||
</template>
|
||||
|
||||
@@ -9,6 +9,7 @@ import { $t, transformI18n } from "@/plugins/i18n";
|
||||
import { useVerifyCode } from "../utils/verifyCode";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Iphone from "@iconify-icons/ep/iphone";
|
||||
|
||||
const { t } = useI18n();
|
||||
const loading = ref(false);
|
||||
@@ -50,7 +51,7 @@ function onBack() {
|
||||
clearable
|
||||
v-model="ruleForm.phone"
|
||||
:placeholder="t('login.phone')"
|
||||
:prefix-icon="useRenderIcon('iphone')"
|
||||
:prefix-icon="useRenderIcon(Iphone)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
@@ -9,6 +9,9 @@ import { useVerifyCode } from "../utils/verifyCode";
|
||||
import { $t, transformI18n } from "@/plugins/i18n";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Lock from "@iconify-icons/ri/lock-fill";
|
||||
import Iphone from "@iconify-icons/ep/iphone";
|
||||
import User from "@iconify-icons/ri/user-3-fill";
|
||||
|
||||
const { t } = useI18n();
|
||||
const checked = ref(false);
|
||||
@@ -89,7 +92,7 @@ function onBack() {
|
||||
clearable
|
||||
v-model="ruleForm.username"
|
||||
:placeholder="t('login.username')"
|
||||
:prefix-icon="useRenderIcon('user')"
|
||||
:prefix-icon="useRenderIcon(User)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
@@ -100,7 +103,7 @@ function onBack() {
|
||||
clearable
|
||||
v-model="ruleForm.phone"
|
||||
:placeholder="t('login.phone')"
|
||||
:prefix-icon="useRenderIcon('iphone')"
|
||||
:prefix-icon="useRenderIcon(Iphone)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
@@ -136,7 +139,7 @@ function onBack() {
|
||||
show-password
|
||||
v-model="ruleForm.password"
|
||||
:placeholder="t('login.password')"
|
||||
:prefix-icon="useRenderIcon('lock')"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
@@ -148,7 +151,7 @@ function onBack() {
|
||||
show-password
|
||||
v-model="ruleForm.repeatPassword"
|
||||
:placeholder="t('login.sure')"
|
||||
:prefix-icon="useRenderIcon('lock')"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
@@ -9,6 +9,8 @@ import { useVerifyCode } from "../utils/verifyCode";
|
||||
import { $t, transformI18n } from "@/plugins/i18n";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Lock from "@iconify-icons/ri/lock-fill";
|
||||
import Iphone from "@iconify-icons/ep/iphone";
|
||||
|
||||
const { t } = useI18n();
|
||||
const loading = ref(false);
|
||||
@@ -73,7 +75,7 @@ function onBack() {
|
||||
clearable
|
||||
v-model="ruleForm.phone"
|
||||
:placeholder="t('login.phone')"
|
||||
:prefix-icon="useRenderIcon('iphone')"
|
||||
:prefix-icon="useRenderIcon(Iphone)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
@@ -109,7 +111,7 @@ function onBack() {
|
||||
show-password
|
||||
v-model="ruleForm.password"
|
||||
:placeholder="t('login.password')"
|
||||
:prefix-icon="useRenderIcon('lock')"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
@@ -121,7 +123,7 @@ function onBack() {
|
||||
show-password
|
||||
v-model="ruleForm.repeatPassword"
|
||||
:placeholder="t('login.sure')"
|
||||
:prefix-icon="useRenderIcon('lock')"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ref,
|
||||
toRaw,
|
||||
reactive,
|
||||
watch,
|
||||
computed,
|
||||
@@ -24,7 +25,7 @@ import { $t, transformI18n } from "@/plugins/i18n";
|
||||
import { operates, thirdParty } from "./utils/enums";
|
||||
import { useLayout } from "@/layout/hooks/useLayout";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { bg, avatar, currentWeek } from "./utils/static";
|
||||
import { bg, avatar, illustration } from "./utils/static";
|
||||
import { ReImageVerify } from "@/components/ReImageVerify";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
|
||||
@@ -33,6 +34,9 @@ import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
|
||||
import dayIcon from "@/assets/svg/day.svg?component";
|
||||
import darkIcon from "@/assets/svg/dark.svg?component";
|
||||
import globalization from "@/assets/svg/globalization.svg?component";
|
||||
import Lock from "@iconify-icons/ri/lock-fill";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
import User from "@iconify-icons/ri/user-3-fill";
|
||||
|
||||
defineOptions({
|
||||
name: "Login"
|
||||
@@ -131,7 +135,7 @@ watch(imgCode, value => {
|
||||
<IconifyIconOffline
|
||||
class="check-zh"
|
||||
v-show="locale === 'zh'"
|
||||
icon="check"
|
||||
:icon="Check"
|
||||
/>
|
||||
简体中文
|
||||
</el-dropdown-item>
|
||||
@@ -141,7 +145,7 @@ watch(imgCode, value => {
|
||||
@click="translationEn"
|
||||
>
|
||||
<span class="check-en" v-show="locale === 'en'">
|
||||
<IconifyIconOffline icon="check" />
|
||||
<IconifyIconOffline :icon="Check" />
|
||||
</span>
|
||||
English
|
||||
</el-dropdown-item>
|
||||
@@ -151,7 +155,7 @@ watch(imgCode, value => {
|
||||
</div>
|
||||
<div class="login-container">
|
||||
<div class="img">
|
||||
<component :is="currentWeek" />
|
||||
<component :is="toRaw(illustration)" />
|
||||
</div>
|
||||
<div class="login-box">
|
||||
<div class="login-form">
|
||||
@@ -184,7 +188,7 @@ watch(imgCode, value => {
|
||||
clearable
|
||||
v-model="ruleForm.username"
|
||||
:placeholder="t('login.username')"
|
||||
:prefix-icon="useRenderIcon('user')"
|
||||
:prefix-icon="useRenderIcon(User)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
@@ -196,7 +200,7 @@ watch(imgCode, value => {
|
||||
show-password
|
||||
v-model="ruleForm.password"
|
||||
:placeholder="t('login.password')"
|
||||
:prefix-icon="useRenderIcon('lock')"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
@@ -1,34 +1,5 @@
|
||||
import { computed } from "vue";
|
||||
import bg from "@/assets/login/bg.png";
|
||||
import avatar from "@/assets/login/avatar.svg?component";
|
||||
import illustration0 from "@/assets/login/illustration0.svg?component";
|
||||
import illustration1 from "@/assets/login/illustration1.svg?component";
|
||||
import illustration2 from "@/assets/login/illustration2.svg?component";
|
||||
import illustration3 from "@/assets/login/illustration3.svg?component";
|
||||
import illustration4 from "@/assets/login/illustration4.svg?component";
|
||||
import illustration5 from "@/assets/login/illustration5.svg?component";
|
||||
import illustration6 from "@/assets/login/illustration6.svg?component";
|
||||
import illustration from "@/assets/login/illustration.svg?component";
|
||||
|
||||
/** Show a different background every day */
|
||||
const currentWeek = computed(() => {
|
||||
switch (String(new Date().getDay())) {
|
||||
case "0":
|
||||
return illustration0;
|
||||
case "1":
|
||||
return illustration1;
|
||||
case "2":
|
||||
return illustration2;
|
||||
case "3":
|
||||
return illustration3;
|
||||
case "4":
|
||||
return illustration4;
|
||||
case "5":
|
||||
return illustration5;
|
||||
case "6":
|
||||
return illustration6;
|
||||
default:
|
||||
return illustration4;
|
||||
}
|
||||
});
|
||||
|
||||
export { bg, avatar, currentWeek };
|
||||
export { bg, avatar, illustration };
|
||||
|
||||
@@ -2,6 +2,8 @@ import { tableDataEdit } from "../data";
|
||||
import { message } from "@/utils/message";
|
||||
import { ref, computed, Transition } from "vue";
|
||||
import { clone, delay } from "@pureadmin/utils";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
|
||||
// 温馨提示：编辑整行方法雷同，将cellRenderer后面渲染的组件抽出来做对应处理即可
|
||||
export function useColumns() {
|
||||
@@ -60,13 +62,13 @@ export function useColumns() {
|
||||
</Transition>
|
||||
<iconify-icon-offline
|
||||
v-show={editing.value(index)}
|
||||
icon="check"
|
||||
icon={Check}
|
||||
class={iconClass.value(index)}
|
||||
onClick={() => onSure(index)}
|
||||
/>
|
||||
<iconify-icon-offline
|
||||
v-show={activeIndex.value === index && !editing.value(index)}
|
||||
icon="edits"
|
||||
icon={EditPen}
|
||||
class={iconClass.value(index, true)}
|
||||
onClick={() => onEdit(row, index)}
|
||||
/>
|
||||
|
||||
@@ -1,9 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { list } from "./base/list";
|
||||
|
||||
defineOptions({
|
||||
name: "PureTable"
|
||||
});
|
||||
|
||||
const selected = ref(0);
|
||||
|
||||
function tabClick({ index }) {
|
||||
selected.value = index;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -32,9 +39,9 @@ defineOptions({
|
||||
:closable="false"
|
||||
/>
|
||||
|
||||
<el-tabs>
|
||||
<el-tabs @tab-click="tabClick">
|
||||
<template v-for="(item, index) of list" :key="item.key">
|
||||
<el-tab-pane>
|
||||
<el-tab-pane :lazy="true">
|
||||
<template #label>
|
||||
<el-tooltip
|
||||
:content="`（第 ${index + 1} 个示例）${item.content}`"
|
||||
@@ -43,7 +50,7 @@ defineOptions({
|
||||
<span>{{ item.title }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<component :is="item.component" />
|
||||
<component v-if="selected == index" :is="item.component" />
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import { IconifyIconOffline } from "@/components/ReIcon";
|
||||
import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
|
||||
import CloseCircleLine from "@iconify-icons/ri/close-circle-line";
|
||||
|
||||
export function useColumns() {
|
||||
const columns = [
|
||||
@@ -7,7 +9,7 @@ export function useColumns() {
|
||||
return (
|
||||
<span class="flex items-center -mt-6">
|
||||
<IconifyIconOffline
|
||||
icon="close-circle-line"
|
||||
icon={CloseCircleLine}
|
||||
color="#F56C6C"
|
||||
width="18px"
|
||||
height="18px"
|
||||
@@ -20,7 +22,7 @@ export function useColumns() {
|
||||
>
|
||||
立即解冻
|
||||
<IconifyIconOffline
|
||||
icon="arrow-right-s-line"
|
||||
icon={ArrowRightSLine}
|
||||
color="var(--el-color-primary)"
|
||||
width="18px"
|
||||
height="18px"
|
||||
@@ -35,7 +37,7 @@ export function useColumns() {
|
||||
return (
|
||||
<span class="flex items-center -mt-8">
|
||||
<IconifyIconOffline
|
||||
icon="close-circle-line"
|
||||
icon={CloseCircleLine}
|
||||
color="#F56C6C"
|
||||
width="18px"
|
||||
height="18px"
|
||||
@@ -48,7 +50,7 @@ export function useColumns() {
|
||||
>
|
||||
立即升级
|
||||
<IconifyIconOffline
|
||||
icon="arrow-right-s-line"
|
||||
icon={ArrowRightSLine}
|
||||
color="var(--el-color-primary)"
|
||||
width="18px"
|
||||
height="18px"
|
||||
|
||||
@@ -6,6 +6,11 @@ import { FormInstance } from "element-plus";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { TableProBar } from "@/components/ReTable";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
|
||||
defineOptions({
|
||||
name: "Dept"
|
||||
@@ -74,13 +79,13 @@ onMounted(() => {
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon('search')"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="loading"
|
||||
@click="onSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button :icon="useRenderIcon('refresh')" @click="resetForm(formRef)">
|
||||
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
@@ -94,7 +99,7 @@ onMounted(() => {
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<template #buttons>
|
||||
<el-button type="primary" :icon="useRenderIcon('add')">
|
||||
<el-button type="primary" :icon="useRenderIcon(AddFill)">
|
||||
新增部门
|
||||
</el-button>
|
||||
</template>
|
||||
@@ -124,7 +129,7 @@ onMounted(() => {
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(row)"
|
||||
:icon="useRenderIcon('edits')"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
@@ -135,7 +140,7 @@ onMounted(() => {
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('delete')"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
@click="handleDelete(row)"
|
||||
>
|
||||
删除
|
||||
|
||||
@@ -4,6 +4,8 @@ import { ref, reactive } from "vue";
|
||||
import { type Direction } from "element-plus";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { type VxeTableEvents, type VxeTableInstance } from "vxe-table";
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
|
||||
interface Props {
|
||||
drawer: boolean;
|
||||
@@ -108,7 +110,7 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon('edits')"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="editConfig(row)"
|
||||
>
|
||||
编辑
|
||||
@@ -116,7 +118,7 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon('delete')"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
@click="delConfig(row)"
|
||||
>
|
||||
删除
|
||||
|
||||
@@ -14,6 +14,8 @@ import {
|
||||
type VxeTableEvents,
|
||||
type FormMethods
|
||||
} from "vxe-table";
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
|
||||
type onEditNRow = {
|
||||
name: string;
|
||||
@@ -293,7 +295,7 @@ function onHide() {
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon('edits')"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="onEdit(row)"
|
||||
>
|
||||
编辑
|
||||
@@ -318,7 +320,7 @@ function onHide() {
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon('delete')"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
@click="confirmEvent"
|
||||
>
|
||||
删除
|
||||
|
||||
@@ -6,6 +6,14 @@ import { type FormInstance } from "element-plus";
|
||||
import { TableProBar } from "@/components/ReTable";
|
||||
import { type PaginationProps } from "@pureadmin/table";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Database from "@iconify-icons/ri/database-2-line";
|
||||
import More from "@iconify-icons/ep/more-filled";
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import Menu from "@iconify-icons/ep/menu";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
|
||||
defineOptions({
|
||||
name: "Role"
|
||||
@@ -94,13 +102,13 @@ onMounted(() => {
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon('search')"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="loading"
|
||||
@click="onSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button :icon="useRenderIcon('refresh')" @click="resetForm(formRef)">
|
||||
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
@@ -113,7 +121,7 @@ onMounted(() => {
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<template #buttons>
|
||||
<el-button type="primary" :icon="useRenderIcon('add')">
|
||||
<el-button type="primary" :icon="useRenderIcon(AddFill)">
|
||||
新增角色
|
||||
</el-button>
|
||||
</template>
|
||||
@@ -144,7 +152,7 @@ onMounted(() => {
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(row)"
|
||||
:icon="useRenderIcon('edits')"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
@@ -155,7 +163,7 @@ onMounted(() => {
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('delete')"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
@click="handleDelete(row)"
|
||||
>
|
||||
删除
|
||||
@@ -169,7 +177,7 @@ onMounted(() => {
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(row)"
|
||||
:icon="useRenderIcon('more')"
|
||||
:icon="useRenderIcon(More)"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
@@ -179,7 +187,7 @@ onMounted(() => {
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('menu')"
|
||||
:icon="useRenderIcon(Menu)"
|
||||
>
|
||||
菜单权限
|
||||
</el-button>
|
||||
@@ -190,7 +198,7 @@ onMounted(() => {
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('database')"
|
||||
:icon="useRenderIcon(Database)"
|
||||
>
|
||||
数据权限
|
||||
</el-button>
|
||||
|
||||
@@ -8,6 +8,15 @@ import { TableProBar } from "@/components/ReTable";
|
||||
import { type PaginationProps } from "@pureadmin/table";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import Role from "@iconify-icons/ri/admin-line";
|
||||
import Password from "@iconify-icons/ri/lock-password-line";
|
||||
import More from "@iconify-icons/ep/more-filled";
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
|
||||
defineOptions({
|
||||
name: "User"
|
||||
});
|
||||
@@ -104,16 +113,13 @@ onMounted(() => {
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon('search')"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="loading"
|
||||
@click="onSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button
|
||||
:icon="useRenderIcon('refresh')"
|
||||
@click="resetForm(formRef)"
|
||||
>
|
||||
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
@@ -126,7 +132,7 @@ onMounted(() => {
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<template #buttons>
|
||||
<el-button type="primary" :icon="useRenderIcon('add')">
|
||||
<el-button type="primary" :icon="useRenderIcon(AddFill)">
|
||||
新增用户
|
||||
</el-button>
|
||||
</template>
|
||||
@@ -156,7 +162,7 @@ onMounted(() => {
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(row)"
|
||||
:icon="useRenderIcon('edits')"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
@@ -167,7 +173,7 @@ onMounted(() => {
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('delete')"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
@click="handleDelete(row)"
|
||||
>
|
||||
删除
|
||||
@@ -181,7 +187,7 @@ onMounted(() => {
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(row)"
|
||||
:icon="useRenderIcon('more')"
|
||||
:icon="useRenderIcon(More)"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
@@ -191,7 +197,7 @@ onMounted(() => {
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('password')"
|
||||
:icon="useRenderIcon(Password)"
|
||||
>
|
||||
重置密码
|
||||
</el-button>
|
||||
@@ -202,7 +208,7 @@ onMounted(() => {
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon('role')"
|
||||
:icon="useRenderIcon(Role)"
|
||||
>
|
||||
分配角色
|
||||
</el-button>
|
||||
|
||||
@@ -5,6 +5,15 @@ import { getDeptList } from "@/api/system";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { ref, watch, onMounted, getCurrentInstance } from "vue";
|
||||
|
||||
import LocationCompany from "@iconify-icons/ep/add-location";
|
||||
import UnExpand from "@iconify-icons/mdi/arrow-expand-right";
|
||||
import Expand from "@iconify-icons/mdi/arrow-expand-down";
|
||||
import More2Fill from "@iconify-icons/ri/more-2-fill";
|
||||
import Reset from "@iconify-icons/ri/restart-line";
|
||||
import Dept from "@iconify-icons/ri/git-branch-line";
|
||||
import OfficeBuilding from "@iconify-icons/ep/office-building";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
|
||||
interface Tree {
|
||||
id: number;
|
||||
name: string;
|
||||
@@ -85,7 +94,7 @@ onMounted(async () => {
|
||||
<el-icon class="el-input__icon">
|
||||
<IconifyIconOffline
|
||||
v-show="searchValue.length === 0"
|
||||
icon="search"
|
||||
:icon="Search"
|
||||
/>
|
||||
</el-icon>
|
||||
</template>
|
||||
@@ -94,7 +103,7 @@ onMounted(async () => {
|
||||
<IconifyIconOffline
|
||||
class="w-[28px] cursor-pointer"
|
||||
width="18px"
|
||||
icon="more-vertical"
|
||||
:icon="More2Fill"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
@@ -103,7 +112,7 @@ onMounted(async () => {
|
||||
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon('expand')"
|
||||
:icon="useRenderIcon(Expand)"
|
||||
@click="toggleRowExpansionAll(true)"
|
||||
>
|
||||
展开全部
|
||||
@@ -114,7 +123,7 @@ onMounted(async () => {
|
||||
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon('unExpand')"
|
||||
:icon="useRenderIcon(UnExpand)"
|
||||
@click="toggleRowExpansionAll(false)"
|
||||
>
|
||||
折叠全部
|
||||
@@ -125,7 +134,7 @@ onMounted(async () => {
|
||||
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon('reset')"
|
||||
:icon="useRenderIcon(Reset)"
|
||||
@click="onReset"
|
||||
>
|
||||
重置状态
|
||||
@@ -170,10 +179,10 @@ onMounted(async () => {
|
||||
<IconifyIconOffline
|
||||
:icon="
|
||||
data.type === 1
|
||||
? 'office-building'
|
||||
? OfficeBuilding
|
||||
: data.type === 2
|
||||
? 'location-company'
|
||||
: 'dept'
|
||||
? LocationCompany
|
||||
: Dept
|
||||
"
|
||||
/>
|
||||
{{ node.label }}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user