mirror of
https://github.com/pure-admin/pure-admin-thin.git
synced 2025-12-14 22:30:31 +08:00
Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
27056e7560 | ||
|
|
132fbbade3 | ||
|
|
c6e25d6933 | ||
|
|
cabf1f85ef | ||
|
|
cb3d7cd552 | ||
|
|
80453ec4b1 | ||
|
|
8ca8bbcee0 | ||
|
|
2b67efe771 | ||
|
|
bbe23ce0a2 | ||
|
|
68492ec362 | ||
|
|
bc3b199860 | ||
|
|
4407dd5d10 |
@@ -4,9 +4,9 @@
|
||||
|
||||
**English** | [中文](./README.md)
|
||||
|
||||
## introduce
|
||||
## Introduce
|
||||
|
||||
The Lite version is based on the shelf extracted from [vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin), including the main functions, which is more suitable for actual project development, and the packaged size is lower than ` 3MB`, and will permanently sync the full version of the code. After enabling `brotli` compression and `cdn` to replace the native library mode, the package size is less than `500kb`
|
||||
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`
|
||||
|
||||
## Supporting Video
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
## 介绍
|
||||
|
||||
精简版是基于 [vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin) 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小低于 `3MB`，并且会永久同步完整版的代码。开启 `brotli` 压缩和 `cdn` 替换本地库模式后，打包大小低于 `500kb`
|
||||
精简版是基于 [vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin) 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 [element-plus](https://element-plus.org) 的情况下仍然低于 `2.3MB`，并且会永久同步完整版的代码。开启 `brotli` 压缩和 `cdn` 替换本地库模式后，打包大小低于 `350kb`
|
||||
|
||||
## 版本选择
|
||||
|
||||
|
||||
@@ -9,10 +9,12 @@ export function viteBuildInfo(): Plugin {
|
||||
let config: { command: string };
|
||||
let startTime: Dayjs;
|
||||
let endTime: Dayjs;
|
||||
let outDir: string;
|
||||
return {
|
||||
name: "vite:buildInfo",
|
||||
configResolved(resolvedConfig: { command: string }) {
|
||||
configResolved(resolvedConfig) {
|
||||
config = resolvedConfig;
|
||||
outDir = resolvedConfig.build?.outDir ?? "dist";
|
||||
},
|
||||
buildStart() {
|
||||
console.log(
|
||||
@@ -32,6 +34,7 @@ export function viteBuildInfo(): Plugin {
|
||||
if (config.command === "build") {
|
||||
endTime = dayjs(new Date());
|
||||
getPackageSize({
|
||||
folder: outDir,
|
||||
callback: (size: string) => {
|
||||
console.log(
|
||||
bold(
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
* 尤其当您禁用浏览器缓存时（这种情况只应该发生在调试阶段）必须将对应模块加入到 include里，否则会遇到开发环境切换页面卡顿的问题（vite 会认为它是一个新的依赖包会重新加载并强制刷新页面），因为它既无法使用浏览器缓存，又没有在本地 node_modules/.vite 里缓存
|
||||
* 温馨提示：如果您使用的第三方库是全局引入，也就是引入到 src/main.ts 文件里，就不需要再添加到 include 里了，因为 vite 会自动将它们缓存到 node_modules/.vite
|
||||
*/
|
||||
export const include = [
|
||||
const include = [
|
||||
"qs",
|
||||
"mitt",
|
||||
"dayjs",
|
||||
@@ -12,8 +12,6 @@ export const include = [
|
||||
"pinia",
|
||||
"lodash",
|
||||
"echarts",
|
||||
"xe-utils",
|
||||
"vxe-table",
|
||||
"js-cookie",
|
||||
"lodash-es",
|
||||
"@vueuse/core",
|
||||
@@ -23,3 +21,15 @@ export const include = [
|
||||
"responsive-storage",
|
||||
"element-resize-detector"
|
||||
];
|
||||
|
||||
/**
|
||||
* 在预构建中强制排除的依赖项
|
||||
* 温馨提示：所有以 `@iconify-icons/` 开头引入的的本地图标模块，都应该加入到下面的 `exclude` 里，因为平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入，不需要预构建，直接让浏览器加载就好
|
||||
*/
|
||||
const exclude = [
|
||||
"@iconify-icons/ep",
|
||||
"@iconify-icons/ri",
|
||||
"@pureadmin/theme/dist/browser-utils"
|
||||
];
|
||||
|
||||
export { include, exclude };
|
||||
|
||||
@@ -3,13 +3,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 ElementPlus from "unplugin-element-plus/vite";
|
||||
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(
|
||||
@@ -25,7 +25,7 @@ export function getPluginsList(
|
||||
vueJsx(),
|
||||
VITE_CDN ? cdn : null,
|
||||
configCompressPlugin(VITE_COMPRESSION),
|
||||
VueMacros(),
|
||||
DefineOptions(),
|
||||
// 线上环境删除console
|
||||
removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),
|
||||
viteBuildInfo(),
|
||||
|
||||
18
package.json
18
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "pure-admin-thin",
|
||||
"version": "3.8.5",
|
||||
"version": "3.9.4",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
|
||||
@@ -31,15 +31,15 @@
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^3.4.1",
|
||||
"@pureadmin/descriptions": "^1.1.0",
|
||||
"@pureadmin/table": "^1.8.0",
|
||||
"@pureadmin/utils": "^1.6.7",
|
||||
"@pureadmin/table": "^1.8.3",
|
||||
"@pureadmin/utils": "^1.7.4",
|
||||
"@vueuse/core": "^9.6.0",
|
||||
"@vueuse/motion": "2.0.0-beta.12",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^1.2.0",
|
||||
"dayjs": "^1.11.6",
|
||||
"echarts": "^5.4.0",
|
||||
"element-plus": "^2.2.25",
|
||||
"element-plus": "^2.2.26",
|
||||
"element-resize-detector": "^1.2.4",
|
||||
"js-cookie": "^3.0.1",
|
||||
"lodash": "^4.17.21",
|
||||
@@ -49,14 +49,12 @@
|
||||
"mockjs": "^1.1.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"path": "^0.12.7",
|
||||
"pinia": "^2.0.26",
|
||||
"pinia": "^2.0.27",
|
||||
"qs": "^6.11.0",
|
||||
"responsive-storage": "^2.1.0",
|
||||
"vue": "^3.2.45",
|
||||
"vue-router": "^4.1.6",
|
||||
"vue-types": "^4.2.1",
|
||||
"vxe-table": "^4.3.6",
|
||||
"xe-utils": "^3.5.7"
|
||||
"vue-types": "^4.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "13.1.0",
|
||||
@@ -80,14 +78,12 @@
|
||||
"@vitejs/plugin-vue-jsx": "^2.1.1",
|
||||
"@vue/eslint-config-prettier": "^7.0.0",
|
||||
"@vue/eslint-config-typescript": "^11.0.2",
|
||||
"@vue/runtime-core": "^3.2.45",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"cloc": "^2.10.0",
|
||||
"cssnano": "^5.1.14",
|
||||
"eslint": "^8.8.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-vue": "^9.7.0",
|
||||
"font-awesome": "^4.7.0",
|
||||
"husky": "^7.0.4",
|
||||
"lint-staged": "11.1.2",
|
||||
"picocolors": "^1.0.0",
|
||||
@@ -111,7 +107,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",
|
||||
|
||||
347
pnpm-lock.yaml
generated
347
pnpm-lock.yaml
generated
@@ -8,9 +8,9 @@ specifiers:
|
||||
"@iconify-icons/ri": ^1.2.3
|
||||
"@iconify/vue": ^4.0.0
|
||||
"@pureadmin/descriptions": ^1.1.0
|
||||
"@pureadmin/table": ^1.8.0
|
||||
"@pureadmin/table": ^1.8.3
|
||||
"@pureadmin/theme": ^2.4.0
|
||||
"@pureadmin/utils": ^1.6.7
|
||||
"@pureadmin/utils": ^1.7.4
|
||||
"@types/element-resize-detector": 1.1.3
|
||||
"@types/js-cookie": ^3.0.1
|
||||
"@types/lodash": ^4.14.180
|
||||
@@ -26,7 +26,6 @@ specifiers:
|
||||
"@vitejs/plugin-vue-jsx": ^2.1.1
|
||||
"@vue/eslint-config-prettier": ^7.0.0
|
||||
"@vue/eslint-config-typescript": ^11.0.2
|
||||
"@vue/runtime-core": ^3.2.45
|
||||
"@vueuse/core": ^9.6.0
|
||||
"@vueuse/motion": 2.0.0-beta.12
|
||||
animate.css: ^4.1.1
|
||||
@@ -36,12 +35,11 @@ specifiers:
|
||||
cssnano: ^5.1.14
|
||||
dayjs: ^1.11.6
|
||||
echarts: ^5.4.0
|
||||
element-plus: ^2.2.25
|
||||
element-plus: ^2.2.26
|
||||
element-resize-detector: ^1.2.4
|
||||
eslint: ^8.8.0
|
||||
eslint-plugin-prettier: ^4.0.0
|
||||
eslint-plugin-vue: ^9.7.0
|
||||
font-awesome: ^4.7.0
|
||||
husky: ^7.0.4
|
||||
js-cookie: ^3.0.1
|
||||
lint-staged: 11.1.2
|
||||
@@ -53,7 +51,7 @@ specifiers:
|
||||
nprogress: ^0.2.0
|
||||
path: ^0.12.7
|
||||
picocolors: ^1.0.0
|
||||
pinia: ^2.0.26
|
||||
pinia: ^2.0.27
|
||||
postcss: ^8.4.18
|
||||
postcss-html: ^1.5.0
|
||||
postcss-import: ^15.0.0
|
||||
@@ -76,7 +74,7 @@ specifiers:
|
||||
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
|
||||
@@ -88,21 +86,19 @@ specifiers:
|
||||
vue-router: ^4.1.6
|
||||
vue-tsc: ^1.0.9
|
||||
vue-types: ^4.2.1
|
||||
vxe-table: ^4.3.6
|
||||
xe-utils: ^3.5.7
|
||||
|
||||
dependencies:
|
||||
"@ctrl/tinycolor": 3.4.1
|
||||
"@pureadmin/descriptions": 1.1.1_element-plus@2.2.25
|
||||
"@pureadmin/table": 1.8.0_element-plus@2.2.25
|
||||
"@pureadmin/utils": 1.6.7_aotapuqn7htzdjltsyimavekky
|
||||
"@pureadmin/descriptions": 1.1.1_element-plus@2.2.26
|
||||
"@pureadmin/table": 1.8.3_element-plus@2.2.26
|
||||
"@pureadmin/utils": 1.7.4_aotapuqn7htzdjltsyimavekky
|
||||
"@vueuse/core": 9.6.0_vue@3.2.45
|
||||
"@vueuse/motion": 2.0.0-beta.12_vue@3.2.45
|
||||
animate.css: 4.1.1
|
||||
axios: 1.2.0
|
||||
dayjs: 1.11.6
|
||||
echarts: 5.4.0
|
||||
element-plus: 2.2.25_vue@3.2.45
|
||||
element-plus: 2.2.26_vue@3.2.45
|
||||
element-resize-detector: 1.2.4
|
||||
js-cookie: 3.0.1
|
||||
lodash: 4.17.21
|
||||
@@ -112,14 +108,12 @@ dependencies:
|
||||
mockjs: 1.1.0
|
||||
nprogress: 0.2.0
|
||||
path: 0.12.7
|
||||
pinia: 2.0.26_mgnvym7yiazkylwwogi5r767ue
|
||||
pinia: 2.0.27_mgnvym7yiazkylwwogi5r767ue
|
||||
qs: 6.11.0
|
||||
responsive-storage: 2.1.0
|
||||
vue: 3.2.45
|
||||
vue-router: 4.1.6_vue@3.2.45
|
||||
vue-types: 4.2.1_vue@3.2.45
|
||||
vxe-table: 4.3.6_vue@3.2.45+xe-utils@3.5.7
|
||||
xe-utils: 3.5.7
|
||||
|
||||
devDependencies:
|
||||
"@commitlint/cli": 13.1.0
|
||||
@@ -143,14 +137,12 @@ devDependencies:
|
||||
"@vitejs/plugin-vue-jsx": 2.1.1_vite@3.1.8+vue@3.2.45
|
||||
"@vue/eslint-config-prettier": 7.0.0_5qrnzwqb344w6up62gv3safeoi
|
||||
"@vue/eslint-config-typescript": 11.0.2_5ma4o5namqj2syekqcvrgakwe4
|
||||
"@vue/runtime-core": 3.2.45
|
||||
autoprefixer: 10.4.13_postcss@8.4.19
|
||||
cloc: 2.10.0
|
||||
cssnano: 5.1.14_postcss@8.4.19
|
||||
eslint: 8.28.0
|
||||
eslint-plugin-prettier: 4.2.1_5qrnzwqb344w6up62gv3safeoi
|
||||
eslint-plugin-vue: 9.8.0_eslint@8.28.0
|
||||
font-awesome: 4.7.0
|
||||
husky: 7.0.4
|
||||
lint-staged: 11.1.2
|
||||
picocolors: 1.0.0
|
||||
@@ -174,7 +166,7 @@ devDependencies:
|
||||
tailwindcss: 3.2.4_postcss@8.4.19
|
||||
terser: 5.16.0
|
||||
typescript: 4.9.3
|
||||
unplugin-vue-macros: 1.0.3_5wosmox4cb7ovevlqdhap7knuu
|
||||
unplugin-vue-define-options: 1.0.0
|
||||
vite: 3.1.8_sass@1.56.1+terser@5.16.0
|
||||
vite-plugin-cdn-import: 0.3.5
|
||||
vite-plugin-compression: 0.5.1_vite@3.1.8
|
||||
@@ -196,13 +188,6 @@ packages:
|
||||
"@jridgewell/trace-mapping": 0.3.17
|
||||
dev: true
|
||||
|
||||
/@antfu/utils/0.6.3:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-sEYpyyKUPOew9QsXZ8feRVMzW6DWLviwOl+/ap06UQW02A8Srbc95CPHVm4eUbiBzBgD46eyIT+przv//KSSlQ==
|
||||
}
|
||||
dev: true
|
||||
|
||||
/@babel/code-frame/7.18.6:
|
||||
resolution:
|
||||
{
|
||||
@@ -1043,7 +1028,7 @@ packages:
|
||||
fastq: 1.13.0
|
||||
dev: true
|
||||
|
||||
/@pureadmin/descriptions/1.1.1_element-plus@2.2.25:
|
||||
/@pureadmin/descriptions/1.1.1_element-plus@2.2.26:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-4BHLKomLU/LxGs5EUA+h+aKNrJEkhrU6+QE8VoWfJZ8VTU6ddvFLT/Pi4WuO5CWNXM9ZjqvHLFFVwEPlKntqtg==
|
||||
@@ -1052,19 +1037,19 @@ packages:
|
||||
element-plus: ^2.0.0
|
||||
dependencies:
|
||||
"@element-plus/icons-vue": 2.0.10_vue@3.2.45
|
||||
element-plus: 2.2.25_vue@3.2.45
|
||||
element-plus: 2.2.26_vue@3.2.45
|
||||
vue: 3.2.45
|
||||
dev: false
|
||||
|
||||
/@pureadmin/table/1.8.0_element-plus@2.2.25:
|
||||
/@pureadmin/table/1.8.3_element-plus@2.2.26:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-hNXoU6HzAxUg/4KpG2rQbmr8EDdh+1XzP0Og0jqtgfj1uW5o5KWfx1101O/ReYVQ1EdnFsc44YLe0HZkyyMJDQ==
|
||||
integrity: sha512-M+I+CDu74s/ffNybbDg0rHhiMHTdkgVIaksfmmrEwjuLB2nEaz7R0tob2qC5rKE96U2Z246meDHBidyQNx2z9w==
|
||||
}
|
||||
peerDependencies:
|
||||
element-plus: ^2.0.0
|
||||
dependencies:
|
||||
element-plus: 2.2.25_vue@3.2.45
|
||||
element-plus: 2.2.26_vue@3.2.45
|
||||
vue: 3.2.45
|
||||
dev: false
|
||||
|
||||
@@ -1079,10 +1064,10 @@ packages:
|
||||
string-hash: 1.1.3
|
||||
dev: true
|
||||
|
||||
/@pureadmin/utils/1.6.7_aotapuqn7htzdjltsyimavekky:
|
||||
/@pureadmin/utils/1.7.4_aotapuqn7htzdjltsyimavekky:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-SNOGyhrzqMzySpicFd/ptJS7xOt9p2xGuNXFZwhq1elruPKRLRa7dl+OHGrIWzQIvhtbOf/yje9mnOFOY77PZA==
|
||||
integrity: sha512-uJNHcb2sO7R2avALf+v4TGyuZtJix0Wpw/kMb6eO4C003ZQImuGGi9WlxHaOlESrMyFHZ1AjWm5AqLwJLnpVlw==
|
||||
}
|
||||
peerDependencies:
|
||||
dayjs: "*"
|
||||
@@ -1297,6 +1282,7 @@ packages:
|
||||
{
|
||||
integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/@typescript-eslint/eslint-plugin/5.44.0_fnsv2sbzcckq65bwfk7a5xwslu:
|
||||
resolution:
|
||||
@@ -1558,30 +1544,6 @@ packages:
|
||||
"@volar/vue-language-core": 1.0.9
|
||||
dev: true
|
||||
|
||||
/@vue-macros/api/0.2.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-E0rhhszd3MSE8l+A78gj9ONs4lsqOLHpONNzrc7H2nlPhEDsp4ZyQt+A9rRfxX+BTeLYfq64mli2qRV0tixiaw==
|
||||
}
|
||||
engines: { node: ">=14.19.0" }
|
||||
dependencies:
|
||||
"@babel/types": 7.20.2
|
||||
"@vue-macros/common": 0.13.4
|
||||
dev: true
|
||||
|
||||
/@vue-macros/better-define/1.0.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-SVQky3fk9wRrSH153Tw1+0sP5i6OB5iiUOtAC/mceH0IN5NGbDXt2YagELEM2+6caDquXNRL6jbG0HfRH6u0cA==
|
||||
}
|
||||
engines: { node: ">=14.19.0" }
|
||||
dependencies:
|
||||
"@rollup/pluginutils": 4.2.1
|
||||
"@vue-macros/api": 0.2.0
|
||||
"@vue-macros/common": 0.13.4
|
||||
unplugin: 1.0.0
|
||||
dev: true
|
||||
|
||||
/@vue-macros/common/0.13.4:
|
||||
resolution:
|
||||
{
|
||||
@@ -1594,158 +1556,6 @@ packages:
|
||||
magic-string: 0.26.7
|
||||
dev: true
|
||||
|
||||
/@vue-macros/define-model/1.0.0_@vueuse+core@9.6.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-Nyh1fidDcfCzEKAo/ljwdQbpgMOrNowdJomB/qnkz/Lx4CVEaRk87LA2o3T99qIOogRfya8af+bLM8dNOq8dAQ==
|
||||
}
|
||||
engines: { node: ">=14.19.0" }
|
||||
peerDependencies:
|
||||
"@vueuse/core": ^9.0.0
|
||||
peerDependenciesMeta:
|
||||
"@vueuse/core":
|
||||
optional: true
|
||||
dependencies:
|
||||
"@rollup/pluginutils": 4.2.1
|
||||
"@vue-macros/common": 0.13.4
|
||||
"@vueuse/core": 9.6.0_vue@3.2.45
|
||||
ast-walker-scope: 0.3.0
|
||||
unplugin: 1.0.0
|
||||
dev: true
|
||||
|
||||
/@vue-macros/define-props/0.0.3_vue@3.2.45:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-GAiALWSrIogwdjbIe60Hi4CSvWFmZG7KySK8JBf7lszWNgoSirj/NKzmJOaHY0/I217tfq4Ew/brbdvcEhCikg==
|
||||
}
|
||||
engines: { node: ">=14.19.0" }
|
||||
peerDependencies:
|
||||
vue: ^3.2.25
|
||||
dependencies:
|
||||
"@rollup/pluginutils": 4.2.1
|
||||
"@vue-macros/common": 0.13.4
|
||||
unplugin: 1.0.0
|
||||
vue: 3.2.45
|
||||
dev: true
|
||||
|
||||
/@vue-macros/define-render/1.0.1_vue@3.2.45:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-B4ttYDZkXqVuciN23WNuVnr6L8dKrxEvz74gaYTXbdybv9jLEYMagSm/nFBLin+32EGYKeZu/D393r2EGAzeNg==
|
||||
}
|
||||
engines: { node: ">=14.19.0" }
|
||||
peerDependencies:
|
||||
vue: ^2.7.0 || ^3.0.0
|
||||
dependencies:
|
||||
"@rollup/pluginutils": 4.2.1
|
||||
"@vue-macros/common": 0.13.4
|
||||
unplugin: 1.0.0
|
||||
vue: 3.2.45
|
||||
dev: true
|
||||
|
||||
/@vue-macros/define-slots/0.0.6_vue@3.2.45:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-pK4P/oUjcrP/Rr5clsV2eZ53OJ3QlU2fZlnn91w++L0+lio+0M06ptr/IkHNVLNQ9U9Z43MkjHkMLX8Df8BknA==
|
||||
}
|
||||
engines: { node: ">=14.19.0" }
|
||||
peerDependencies:
|
||||
vue: ^2.7.0 || ^3.0.0
|
||||
dependencies:
|
||||
"@rollup/pluginutils": 4.2.1
|
||||
"@vue-macros/common": 0.13.4
|
||||
unplugin: 1.0.0
|
||||
vue: 3.2.45
|
||||
dev: true
|
||||
|
||||
/@vue-macros/hoist-static/1.0.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-NcFVAfKM9UjChOXy+yno4vhTsSHT6qUKbmd4/I8ucoiJT8IfFyGCwFoZZ8uqgjIwlzSUDxJ/vYoDRjiziTiNKg==
|
||||
}
|
||||
engines: { node: ">=14.19.0" }
|
||||
dependencies:
|
||||
"@rollup/pluginutils": 4.2.1
|
||||
"@vue-macros/common": 0.13.4
|
||||
unplugin: 1.0.0
|
||||
dev: true
|
||||
|
||||
/@vue-macros/named-template/0.0.6_vite@3.1.8+vue@3.2.45:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-nEoutSYbwu7QC+uWcs90rD28erP6xZ0aU4uYnrxTUnVcbga9xMchxcs3MgI/2ax6dz/EXf1f1utYXXpGgLi+Tw==
|
||||
}
|
||||
engines: { node: ">=14.19.0" }
|
||||
dependencies:
|
||||
"@rollup/pluginutils": 4.2.1
|
||||
"@vitejs/plugin-vue": 3.2.0_vite@3.1.8+vue@3.2.45
|
||||
"@vue-macros/common": 0.13.4
|
||||
"@vue/compiler-dom": 3.2.45
|
||||
unplugin: 1.0.0
|
||||
unplugin-combine: 0.2.8_vite@3.1.8
|
||||
transitivePeerDependencies:
|
||||
- esbuild
|
||||
- rollup
|
||||
- vite
|
||||
- vue
|
||||
- webpack
|
||||
dev: true
|
||||
|
||||
/@vue-macros/setup-block/0.0.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-Zr7yudMN7Q+8Rb/4ZuZzNewHTejeH9fbt3104sFK53XqL4uLkDCz0fIG2AD9bR71RA+12H+yqn/jQ3vP4OaKGA==
|
||||
}
|
||||
engines: { node: ">=14.19.0" }
|
||||
dependencies:
|
||||
"@rollup/pluginutils": 4.2.1
|
||||
"@vue-macros/common": 0.13.4
|
||||
"@vue/compiler-dom": 3.2.45
|
||||
unplugin: 1.0.0
|
||||
dev: true
|
||||
|
||||
/@vue-macros/setup-component/0.12.8_vite@3.1.8:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-2tRMl8l8OYMpIRYsZyAZfH0dNT7CONMTcmdGEffJb5GvK8XOmdgGk7NFUhaQg3EEnk1SUq1Kdcx+gyH/a0qE4A==
|
||||
}
|
||||
engines: { node: ">=14.19.0" }
|
||||
dependencies:
|
||||
"@rollup/pluginutils": 4.2.1
|
||||
"@vue-macros/common": 0.13.4
|
||||
unplugin: 1.0.0
|
||||
unplugin-combine: 0.2.8_vite@3.1.8
|
||||
transitivePeerDependencies:
|
||||
- esbuild
|
||||
- rollup
|
||||
- vite
|
||||
- webpack
|
||||
dev: true
|
||||
|
||||
/@vue-macros/setup-sfc/0.12.8:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-eOQxlY53GD/WkJrDHpDvHecWQ70Cw9aSYwS9eT1dQ9vWJVeJ/2R96z09GfYKz6cr9T00OPeZjftU5sC1FO+3xA==
|
||||
}
|
||||
engines: { node: ">=14.19.0" }
|
||||
dependencies:
|
||||
"@rollup/pluginutils": 4.2.1
|
||||
"@vue-macros/common": 0.13.4
|
||||
unplugin: 1.0.0
|
||||
dev: true
|
||||
|
||||
/@vue-macros/short-emits/1.0.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-iyCZu35uPOAUJOPrmJrc3pQdY8TswoRrF4Kfcga7xUPvE5ck0Yq4pmOIE+NKz/pGQzzOkxC1qMDc2kaoJ2qAzg==
|
||||
}
|
||||
engines: { node: ">=14.19.0" }
|
||||
dependencies:
|
||||
"@rollup/pluginutils": 4.2.1
|
||||
"@vue-macros/common": 0.13.4
|
||||
unplugin: 1.0.0
|
||||
dev: true
|
||||
|
||||
/@vue/babel-helper-vue-transform-on/1.0.2:
|
||||
resolution:
|
||||
{
|
||||
@@ -1956,6 +1766,7 @@ packages:
|
||||
transitivePeerDependencies:
|
||||
- "@vue/composition-api"
|
||||
- vue
|
||||
dev: false
|
||||
|
||||
/@vueuse/metadata/8.9.4:
|
||||
resolution:
|
||||
@@ -1969,6 +1780,7 @@ packages:
|
||||
{
|
||||
integrity: sha512-sIC8R+kWkIdpi5X2z2Gk8TRYzmczDwHRhEFfCu2P+XW2JdPoXrziqsGpDDsN7ykBx4ilwieS7JUIweVGhvZ93w==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/@vueuse/motion/2.0.0-beta.12_vue@3.2.45:
|
||||
resolution:
|
||||
@@ -2019,6 +1831,7 @@ packages:
|
||||
transitivePeerDependencies:
|
||||
- "@vue/composition-api"
|
||||
- vue
|
||||
dev: false
|
||||
|
||||
/@zougt/some-loader-utils/1.4.3:
|
||||
resolution:
|
||||
@@ -3279,10 +3092,10 @@ packages:
|
||||
}
|
||||
dev: true
|
||||
|
||||
/element-plus/2.2.25_vue@3.2.45:
|
||||
/element-plus/2.2.26_vue@3.2.45:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-HC8CWY31e6pPyBpgqI0QnWkBgs0vRzdYnEw3mpdM/NlKfp0PtNFX7NESQLomqoIulH5ftL09hjQmJNvZBQpthQ==
|
||||
integrity: sha512-O/rdY5m9DkclpVg8r3GynyqCunm7MxSR142xSsjrZA77bi7bcwA3SIy6SPEDqHi5R4KqgkGYgKSp4Q4e3irbYg==
|
||||
}
|
||||
peerDependencies:
|
||||
vue: ^3.2.0
|
||||
@@ -4115,14 +3928,6 @@ packages:
|
||||
optional: true
|
||||
dev: false
|
||||
|
||||
/font-awesome/4.7.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==
|
||||
}
|
||||
engines: { node: ">=0.10.3" }
|
||||
dev: true
|
||||
|
||||
/form-data/4.0.0:
|
||||
resolution:
|
||||
{
|
||||
@@ -4966,14 +4771,6 @@ packages:
|
||||
wrap-ansi: 7.0.0
|
||||
dev: true
|
||||
|
||||
/local-pkg/0.4.2:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-mlERgSPrbxU3BP4qBqAvvwlgW4MTg78iwJdGGnv7kibKjWcJksrG3t6LB5lXI93wXRDvG4NpUgJFmTG4T6rdrg==
|
||||
}
|
||||
engines: { node: ">=14" }
|
||||
dev: true
|
||||
|
||||
/locate-path/5.0.0:
|
||||
resolution:
|
||||
{
|
||||
@@ -5714,10 +5511,10 @@ packages:
|
||||
engines: { node: ">=0.10.0" }
|
||||
dev: true
|
||||
|
||||
/pinia/2.0.26_mgnvym7yiazkylwwogi5r767ue:
|
||||
/pinia/2.0.27_mgnvym7yiazkylwwogi5r767ue:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-tSxZNUcMGxQOvKZRjPKXxd2+/2NZhRF/CoYVE/+K6uE/Z3v1Oi4fcQFpxu5nMB1dCchjXUZ+lz0tBxV5ntwmQQ==
|
||||
integrity: sha512-nOnXP0OFeL8R4WjAHsterU+11vptda643gH02xKNtSCDPiRzVfRYodOLihLDoa0gL1KKuQKV+KOzEgdt3YvqEw==
|
||||
}
|
||||
peerDependencies:
|
||||
"@vue/composition-api": ^1.4.0
|
||||
@@ -7486,32 +7283,6 @@ packages:
|
||||
engines: { node: ">= 0.8" }
|
||||
dev: true
|
||||
|
||||
/unplugin-combine/0.2.8_vite@3.1.8:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-Z38AC/TEjXbVyZ5HjVqo+lADj0/dcfwWC0Z4y0LNhybJzJQwmcMxm+ZsqHY3faauj4YigmlRMdptR5JEW9RuLg==
|
||||
}
|
||||
engines: { node: ">=14.19.0" }
|
||||
peerDependencies:
|
||||
esbuild: ">=0.13"
|
||||
rollup: ^2.50.0
|
||||
vite: ^2.3.0 || ^3.0.0
|
||||
webpack: 4 || 5
|
||||
peerDependenciesMeta:
|
||||
esbuild:
|
||||
optional: true
|
||||
rollup:
|
||||
optional: true
|
||||
vite:
|
||||
optional: true
|
||||
webpack:
|
||||
optional: true
|
||||
dependencies:
|
||||
"@antfu/utils": 0.6.3
|
||||
unplugin: 0.10.2
|
||||
vite: 3.1.8_sass@1.56.1+terser@5.16.0
|
||||
dev: true
|
||||
|
||||
/unplugin-vue-define-options/1.0.0:
|
||||
resolution:
|
||||
{
|
||||
@@ -7525,51 +7296,6 @@ packages:
|
||||
unplugin: 1.0.0
|
||||
dev: true
|
||||
|
||||
/unplugin-vue-macros/1.0.3_5wosmox4cb7ovevlqdhap7knuu:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-QONC2iP0JNmIpbpL2jwsY89Lq6oTZf8JSbhQSVGB7xu+/iY52ZdfEB/bysai3lS5ScTH3M4y0KQHWVcyxBof7g==
|
||||
}
|
||||
engines: { node: ">=14.19.0" }
|
||||
peerDependencies:
|
||||
vue: ^2.7.0 || ^3.2.25
|
||||
dependencies:
|
||||
"@rollup/pluginutils": 4.2.1
|
||||
"@vue-macros/better-define": 1.0.0
|
||||
"@vue-macros/define-model": 1.0.0_@vueuse+core@9.6.0
|
||||
"@vue-macros/define-props": 0.0.3_vue@3.2.45
|
||||
"@vue-macros/define-render": 1.0.1_vue@3.2.45
|
||||
"@vue-macros/define-slots": 0.0.6_vue@3.2.45
|
||||
"@vue-macros/hoist-static": 1.0.0
|
||||
"@vue-macros/named-template": 0.0.6_vite@3.1.8+vue@3.2.45
|
||||
"@vue-macros/setup-block": 0.0.1
|
||||
"@vue-macros/setup-component": 0.12.8_vite@3.1.8
|
||||
"@vue-macros/setup-sfc": 0.12.8
|
||||
"@vue-macros/short-emits": 1.0.1
|
||||
local-pkg: 0.4.2
|
||||
unplugin-combine: 0.2.8_vite@3.1.8
|
||||
unplugin-vue-define-options: 1.0.0
|
||||
vue: 3.2.45
|
||||
transitivePeerDependencies:
|
||||
- "@vueuse/core"
|
||||
- esbuild
|
||||
- rollup
|
||||
- vite
|
||||
- webpack
|
||||
dev: true
|
||||
|
||||
/unplugin/0.10.2:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-6rk7GUa4ICYjae5PrAllvcDeuT8pA9+j5J5EkxbMFaV+SalHhxZ7X2dohMzu6C3XzsMT+6jwR/+pwPNR3uK9MA==
|
||||
}
|
||||
dependencies:
|
||||
acorn: 8.8.1
|
||||
chokidar: 3.5.3
|
||||
webpack-sources: 3.2.3
|
||||
webpack-virtual-modules: 0.4.6
|
||||
dev: true
|
||||
|
||||
/unplugin/1.0.0:
|
||||
resolution:
|
||||
{
|
||||
@@ -7772,6 +7498,7 @@ packages:
|
||||
optional: true
|
||||
dependencies:
|
||||
vue: 3.2.45
|
||||
dev: false
|
||||
|
||||
/vue-eslint-parser/9.1.0_eslint@8.28.0:
|
||||
resolution:
|
||||
@@ -7855,19 +7582,6 @@ packages:
|
||||
"@vue/server-renderer": 3.2.45_vue@3.2.45
|
||||
"@vue/shared": 3.2.45
|
||||
|
||||
/vxe-table/4.3.6_vue@3.2.45+xe-utils@3.5.7:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-SZ+ocVoOFc1PSzvpz6q5n7YvWvPSXUV+raet0zaSbQy3g8Dj7jKNlFbcsSoWZm8Uys9ufAQxeqYO5rRwOB2m7A==
|
||||
}
|
||||
peerDependencies:
|
||||
vue: ^3.2.28
|
||||
xe-utils: ^3.5.0
|
||||
dependencies:
|
||||
vue: 3.2.45
|
||||
xe-utils: 3.5.7
|
||||
dev: false
|
||||
|
||||
/webpack-sources/3.2.3:
|
||||
resolution:
|
||||
{
|
||||
@@ -7954,13 +7668,6 @@ packages:
|
||||
signal-exit: 3.0.7
|
||||
dev: true
|
||||
|
||||
/xe-utils/3.5.7:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-3H+fDBKBR2wLJgyA7k9C/w1Xljx6Maml5ukV0WDY06HjYyGs2FEz6XhcwRCLIDXX4pBP3Gu0nX9DbCeuuRA2Ew==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/xml-name-validator/4.0.0:
|
||||
resolution:
|
||||
{
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"Version": "3.8.5",
|
||||
"Version": "3.9.4",
|
||||
"Title": "PureAdmin",
|
||||
"FixedHeader": true,
|
||||
"HiddenSideBar": false,
|
||||
@@ -15,5 +15,7 @@
|
||||
"EpThemeColor": "#409EFF",
|
||||
"ShowLogo": true,
|
||||
"ShowModel": "smart",
|
||||
"MenuArrowIconNoTransition": true
|
||||
"MenuArrowIconNoTransition": true,
|
||||
"CachingAsyncRoutes": true,
|
||||
"TooltipEffect": "light"
|
||||
}
|
||||
|
||||
@@ -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,88 +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 HomeFilled from "@iconify-icons/ep/home-filled";
|
||||
import Lollipop from "@iconify-icons/ep/lollipop";
|
||||
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 Search from "@iconify-icons/ep/search";
|
||||
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("home-filled", HomeFilled);
|
||||
addIcon("lollipop", Lollipop);
|
||||
addIcon("refresh-right", RefreshRight);
|
||||
addIcon("close", Close);
|
||||
addIcon("close-bold", CloseBold);
|
||||
addIcon("bell", Bell);
|
||||
addIcon("search", Search);
|
||||
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 InformationLine from "@iconify-icons/ri/information-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 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("information-line", InformationLine);
|
||||
addIcon("arrow-up-line", ArrowUpLine);
|
||||
addIcon("arrow-down-line", ArrowDownLine);
|
||||
addIcon("bookmark-2-line", Bookmark2Line);
|
||||
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);
|
||||
|
||||
// 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" },
|
||||
|
||||
14
src/components/ReIcon/src/offlineIcon.ts
Normal file
14
src/components/ReIcon/src/offlineIcon.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { addIcon } from "@iconify/vue/dist/offline";
|
||||
|
||||
/**
|
||||
* 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载
|
||||
*/
|
||||
|
||||
// 本地菜单图标，后端在路由的icon中返回对应的图标字符串并且前端在此处使用addIcon添加即可渲染菜单图标
|
||||
import HomeFilled from "@iconify-icons/ep/home-filled";
|
||||
import InformationLine from "@iconify-icons/ri/information-line";
|
||||
import Lollipop from "@iconify-icons/ep/lollipop";
|
||||
|
||||
addIcon("homeFilled", HomeFilled);
|
||||
addIcon("informationLine", InformationLine);
|
||||
addIcon("lollipop", Lollipop);
|
||||
@@ -5,6 +5,8 @@ import mixNav from "./sidebar/mixNav.vue";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import Breadcrumb from "./sidebar/breadCrumb.vue";
|
||||
import topCollapse from "./sidebar/topCollapse.vue";
|
||||
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
|
||||
import Setting from "@iconify-icons/ri/settings-3-line";
|
||||
|
||||
const {
|
||||
layout,
|
||||
@@ -54,7 +56,7 @@ const {
|
||||
<el-dropdown-menu class="logout">
|
||||
<el-dropdown-item @click="logout">
|
||||
<IconifyIconOffline
|
||||
icon="logout-circle-r-line"
|
||||
:icon="LogoutCircleRLine"
|
||||
style="margin: 5px"
|
||||
/>
|
||||
退出系统
|
||||
@@ -67,7 +69,7 @@ const {
|
||||
title="打开项目配置"
|
||||
@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>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ListItem } from "./data";
|
||||
import { ref, PropType, nextTick } from "vue";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
|
||||
const props = defineProps({
|
||||
noticeItem: {
|
||||
@@ -13,6 +14,7 @@ const titleRef = ref(null);
|
||||
const titleTooltip = ref(false);
|
||||
const descriptionRef = ref(null);
|
||||
const descriptionTooltip = ref(false);
|
||||
const { tooltipEffect } = useNav();
|
||||
|
||||
function hoverTitle() {
|
||||
nextTick(() => {
|
||||
@@ -57,6 +59,7 @@ function hoverDescription(event, description) {
|
||||
<div class="notice-text-title text-[#000000d9] dark:text-white">
|
||||
<el-tooltip
|
||||
popper-class="notice-title-popper"
|
||||
:effect="tooltipEffect"
|
||||
:disabled="!titleTooltip"
|
||||
:content="props.noticeItem.title"
|
||||
placement="top-start"
|
||||
@@ -81,6 +84,7 @@ function hoverDescription(event, description) {
|
||||
|
||||
<el-tooltip
|
||||
popper-class="notice-title-popper"
|
||||
:effect="tooltipEffect"
|
||||
:disabled="!descriptionTooltip"
|
||||
:content="props.noticeItem.description"
|
||||
placement="top-start"
|
||||
|
||||
@@ -1,10 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { onClickOutside } from "@vueuse/core";
|
||||
import { ref, computed } from "vue";
|
||||
import { emitter } from "@/utils/mitt";
|
||||
import { onClickOutside } from "@vueuse/core";
|
||||
import Close from "@iconify-icons/ep/close";
|
||||
|
||||
const show = ref<Boolean>(false);
|
||||
const target = ref(null);
|
||||
const show = ref<Boolean>(false);
|
||||
|
||||
const iconClass = computed(() => {
|
||||
return [
|
||||
"mr-[20px]",
|
||||
"outline-none",
|
||||
"width-[20px]",
|
||||
"height-[20px]",
|
||||
"rounded-[4px]",
|
||||
"cursor-pointer",
|
||||
"transition-colors",
|
||||
"hover:bg-[#0000000f]",
|
||||
"dark:hover:bg-[#ffffff1f]",
|
||||
"dark:hover:text-[#ffffffd9]"
|
||||
];
|
||||
});
|
||||
|
||||
onClickOutside(target, (event: any) => {
|
||||
if (event.clientX > target.value.offsetLeft) return;
|
||||
show.value = false;
|
||||
@@ -22,10 +39,12 @@ emitter.on("openPanel", () => {
|
||||
<div class="right-panel-items">
|
||||
<div class="project-configuration">
|
||||
<h4 class="dark:text-white">项目配置</h4>
|
||||
<span title="关闭配置">
|
||||
<span title="关闭配置" :class="iconClass">
|
||||
<IconifyIconOffline
|
||||
class="dark:text-white"
|
||||
icon="close"
|
||||
width="20px"
|
||||
height="20px"
|
||||
:icon="Close"
|
||||
@click="show = !show"
|
||||
/>
|
||||
</span>
|
||||
@@ -68,7 +87,6 @@ emitter.on("openPanel", () => {
|
||||
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||
transform: translate(100%);
|
||||
// background: #fff;
|
||||
z-index: 40000;
|
||||
}
|
||||
|
||||
@@ -124,16 +142,6 @@ emitter.on("openPanel", () => {
|
||||
align-items: center;
|
||||
top: 15px;
|
||||
margin-left: 10px;
|
||||
|
||||
svg {
|
||||
font-size: 20px;
|
||||
margin-right: 20px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-divider--horizontal) {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -8,6 +8,7 @@ import { useNav } from "@/layout/hooks/useNav";
|
||||
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 {
|
||||
/** 弹窗显隐 */
|
||||
@@ -147,7 +148,7 @@ onKeyStroke("ArrowDown", handleDown);
|
||||
>
|
||||
<template #prefix>
|
||||
<span class="el-input__icon">
|
||||
<IconifyIconOffline icon="search" />
|
||||
<IconifyIconOffline :icon="Search" />
|
||||
</span>
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
@@ -3,6 +3,7 @@ import { computed } from "vue";
|
||||
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";
|
||||
|
||||
interface optionsItem {
|
||||
path: string;
|
||||
@@ -64,7 +65,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">{{ 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>
|
||||
|
||||
@@ -6,8 +6,15 @@ import {
|
||||
reactive,
|
||||
computed,
|
||||
nextTick,
|
||||
useCssModule
|
||||
onBeforeMount
|
||||
} from "vue";
|
||||
import {
|
||||
useDark,
|
||||
debounce,
|
||||
useGlobal,
|
||||
storageLocal,
|
||||
storageSession
|
||||
} from "@pureadmin/utils";
|
||||
import { getConfig } from "@/config";
|
||||
import { useRouter } from "vue-router";
|
||||
import panel from "../panel/index.vue";
|
||||
@@ -17,24 +24,18 @@ import { removeToken } from "@/utils/auth";
|
||||
import { routerArrays } from "@/layout/types";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import { useAppStoreHook } from "@/store/modules/app";
|
||||
import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
|
||||
import {
|
||||
useDark,
|
||||
debounce,
|
||||
useGlobal,
|
||||
storageLocal,
|
||||
storageSession
|
||||
} from "@pureadmin/utils";
|
||||
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();
|
||||
const { isDark } = useDark();
|
||||
const { isSelect } = useCssModule();
|
||||
const { device, tooltipEffect } = useNav();
|
||||
const { $storage } = useGlobal<GlobalPropertiesApi>();
|
||||
|
||||
const mixRef = ref();
|
||||
@@ -42,7 +43,6 @@ const verticalRef = ref();
|
||||
const horizontalRef = ref();
|
||||
|
||||
const {
|
||||
body,
|
||||
dataTheme,
|
||||
layoutTheme,
|
||||
themeColors,
|
||||
@@ -160,32 +160,10 @@ function logoChange() {
|
||||
|
||||
function setFalse(Doms): any {
|
||||
Doms.forEach(v => {
|
||||
toggleClass(false, isSelect, unref(v));
|
||||
toggleClass(false, "is-select", unref(v));
|
||||
});
|
||||
}
|
||||
|
||||
watch($storage, ({ layout }) => {
|
||||
/* 设置wangeditorV5主题色 */
|
||||
body.style.setProperty("--w-e-toolbar-active-color", layout["epThemeColor"]);
|
||||
switch (layout["layout"]) {
|
||||
case "vertical":
|
||||
toggleClass(true, isSelect, unref(verticalRef));
|
||||
debounce(setFalse([horizontalRef]), 50);
|
||||
debounce(setFalse([mixRef]), 50);
|
||||
break;
|
||||
case "horizontal":
|
||||
toggleClass(true, isSelect, unref(horizontalRef));
|
||||
debounce(setFalse([verticalRef]), 50);
|
||||
debounce(setFalse([mixRef]), 50);
|
||||
break;
|
||||
case "mix":
|
||||
toggleClass(true, isSelect, unref(mixRef));
|
||||
debounce(setFalse([verticalRef]), 50);
|
||||
debounce(setFalse([horizontalRef]), 50);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
/** 主题色 激活选择项 */
|
||||
const getThemeColor = computed(() => {
|
||||
return current => {
|
||||
@@ -219,14 +197,36 @@ function setLayoutModel(layout: string) {
|
||||
useAppStoreHook().setLayout(layout);
|
||||
}
|
||||
|
||||
/* 初始化项目配置 */
|
||||
nextTick(() => {
|
||||
settings.greyVal &&
|
||||
document.querySelector("html")?.setAttribute("class", "html-grey");
|
||||
settings.weakVal &&
|
||||
document.querySelector("html")?.setAttribute("class", "html-weakness");
|
||||
settings.tabsVal && tagsChange();
|
||||
watch($storage, ({ layout }) => {
|
||||
switch (layout["layout"]) {
|
||||
case "vertical":
|
||||
toggleClass(true, "is-select", unref(verticalRef));
|
||||
debounce(setFalse([horizontalRef]), 50);
|
||||
debounce(setFalse([mixRef]), 50);
|
||||
break;
|
||||
case "horizontal":
|
||||
toggleClass(true, "is-select", unref(horizontalRef));
|
||||
debounce(setFalse([verticalRef]), 50);
|
||||
debounce(setFalse([mixRef]), 50);
|
||||
break;
|
||||
case "mix":
|
||||
toggleClass(true, "is-select", unref(mixRef));
|
||||
debounce(setFalse([verticalRef]), 50);
|
||||
debounce(setFalse([horizontalRef]), 50);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeMount(() => {
|
||||
dataThemeChange();
|
||||
/* 初始化项目配置 */
|
||||
nextTick(() => {
|
||||
settings.greyVal &&
|
||||
document.querySelector("html")?.setAttribute("class", "html-grey");
|
||||
settings.weakVal &&
|
||||
document.querySelector("html")?.setAttribute("class", "html-weakness");
|
||||
settings.tabsVal && tagsChange();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -244,9 +244,15 @@ nextTick(() => {
|
||||
|
||||
<el-divider>导航栏模式</el-divider>
|
||||
<ul class="pure-theme">
|
||||
<el-tooltip class="item" content="左侧模式" placement="bottom">
|
||||
<el-tooltip
|
||||
:effect="tooltipEffect"
|
||||
class="item"
|
||||
content="左侧模式"
|
||||
placement="bottom"
|
||||
popper-class="pure-tooltip"
|
||||
>
|
||||
<li
|
||||
:class="layoutTheme.layout === 'vertical' ? $style.isSelect : ''"
|
||||
:class="layoutTheme.layout === 'vertical' ? 'is-select' : ''"
|
||||
ref="verticalRef"
|
||||
@click="setLayoutModel('vertical')"
|
||||
>
|
||||
@@ -257,12 +263,14 @@ nextTick(() => {
|
||||
|
||||
<el-tooltip
|
||||
v-if="device !== 'mobile'"
|
||||
:effect="tooltipEffect"
|
||||
class="item"
|
||||
content="顶部模式"
|
||||
placement="bottom"
|
||||
popper-class="pure-tooltip"
|
||||
>
|
||||
<li
|
||||
:class="layoutTheme.layout === 'horizontal' ? $style.isSelect : ''"
|
||||
:class="layoutTheme.layout === 'horizontal' ? 'is-select' : ''"
|
||||
ref="horizontalRef"
|
||||
@click="setLayoutModel('horizontal')"
|
||||
>
|
||||
@@ -273,12 +281,14 @@ nextTick(() => {
|
||||
|
||||
<el-tooltip
|
||||
v-if="device !== 'mobile'"
|
||||
:effect="tooltipEffect"
|
||||
class="item"
|
||||
content="混合模式"
|
||||
placement="bottom"
|
||||
popper-class="pure-tooltip"
|
||||
>
|
||||
<li
|
||||
:class="layoutTheme.layout === 'mix' ? $style.isSelect : ''"
|
||||
:class="layoutTheme.layout === 'mix' ? 'is-select' : ''"
|
||||
ref="mixRef"
|
||||
@click="setLayoutModel('mix')"
|
||||
>
|
||||
@@ -302,7 +312,7 @@ nextTick(() => {
|
||||
:size="17"
|
||||
:color="getThemeColor(item.themeColor)"
|
||||
>
|
||||
<IconifyIconOffline icon="check" />
|
||||
<IconifyIconOffline :icon="Check" />
|
||||
</el-icon>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -383,7 +393,7 @@ nextTick(() => {
|
||||
@click="onReset"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
icon="fa-sign-out"
|
||||
:icon="Logout"
|
||||
width="15"
|
||||
height="15"
|
||||
style="margin-right: 4px"
|
||||
@@ -393,13 +403,16 @@ nextTick(() => {
|
||||
</panel>
|
||||
</template>
|
||||
|
||||
<style scoped module>
|
||||
.isSelect {
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-divider__text) {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.is-select {
|
||||
border: 2px solid var(--el-color-primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.setting {
|
||||
width: 100%;
|
||||
|
||||
@@ -411,11 +424,6 @@ nextTick(() => {
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-divider__text) {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pure-datatheme {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
|
||||
@@ -96,8 +96,12 @@ watch(
|
||||
|
||||
<template>
|
||||
<el-breadcrumb class="!leading-[50px] select-none" separator="/">
|
||||
<transition-group appear name="breadcrumb">
|
||||
<el-breadcrumb-item v-for="item in levelList" :key="item.path">
|
||||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item
|
||||
class="!inline !items-stretch"
|
||||
v-for="item in levelList"
|
||||
:key="item.path"
|
||||
>
|
||||
<a @click.prevent="handleLink(item)">
|
||||
{{ item.meta.title }}
|
||||
</a>
|
||||
|
||||
@@ -5,6 +5,8 @@ import { ref, watch, nextTick } from "vue";
|
||||
import SidebarItem from "./sidebarItem.vue";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
|
||||
import Setting from "@iconify-icons/ri/settings-3-line";
|
||||
|
||||
const menuRef = ref();
|
||||
|
||||
@@ -33,7 +35,10 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="horizontal-header">
|
||||
<div
|
||||
v-loading="usePermissionStoreHook().wholeMenus.length === 0"
|
||||
class="horizontal-header"
|
||||
>
|
||||
<div class="horizontal-header-left" @click="backHome">
|
||||
<FontIcon icon="team-iconlogo" svg style="width: 35px; height: 35px" />
|
||||
<h4>{{ title }}</h4>
|
||||
@@ -71,7 +76,7 @@ watch(
|
||||
<el-dropdown-menu class="logout">
|
||||
<el-dropdown-item @click="logout">
|
||||
<IconifyIconOffline
|
||||
icon="logout-circle-r-line"
|
||||
:icon="LogoutCircleRLine"
|
||||
style="margin: 5px"
|
||||
/>
|
||||
退出系统
|
||||
@@ -84,13 +89,16 @@ watch(
|
||||
title="打开项目配置"
|
||||
@click="onPanel"
|
||||
>
|
||||
<IconifyIconOffline icon="setting" />
|
||||
<IconifyIconOffline :icon="Setting" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-loading-mask) {
|
||||
opacity: 0.45;
|
||||
}
|
||||
.logout {
|
||||
max-width: 120px;
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { useDark } from "@pureadmin/utils";
|
||||
import { ref, computed } from "vue";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
|
||||
|
||||
interface Props {
|
||||
isActive: boolean;
|
||||
@@ -8,7 +10,25 @@ interface Props {
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
isActive: false
|
||||
});
|
||||
const { isDark } = useDark();
|
||||
|
||||
const visible = ref(false);
|
||||
const { tooltipEffect } = useNav();
|
||||
|
||||
const iconClass = computed(() => {
|
||||
return [
|
||||
"ml-4",
|
||||
"mb-1",
|
||||
"w-[16px]",
|
||||
"h-[16px]",
|
||||
"inline-block",
|
||||
"align-middle",
|
||||
"text-primary",
|
||||
"cursor-pointer",
|
||||
"duration-[360ms]",
|
||||
"hover:text-primary",
|
||||
"dark:hover:!text-white"
|
||||
];
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "toggleClick"): void;
|
||||
@@ -23,13 +43,17 @@ const toggleClick = () => {
|
||||
<div class="container">
|
||||
<el-tooltip
|
||||
placement="right"
|
||||
:effect="isDark ? 'dark' : 'light'"
|
||||
:visible="visible"
|
||||
:effect="tooltipEffect"
|
||||
:content="props.isActive ? '点击折叠' : '点击展开'"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
:icon="props.isActive ? 'menu-fold' : 'menu-unfold'"
|
||||
class="cursor-pointer inline-block align-middle text-primary hover:text-primary dark:hover:!text-white w-[16px] h-[16px] ml-4 mb-1"
|
||||
:icon="MenuFold"
|
||||
:class="iconClass"
|
||||
:style="{ transform: props.isActive ? 'none' : 'rotateY(180deg)' }"
|
||||
@click="toggleClick"
|
||||
@mouseenter="visible = true"
|
||||
@mouseleave="visible = false"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
@@ -6,6 +6,8 @@ import { ref, toRaw, watch, onMounted, nextTick } from "vue";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { getParentPaths, findRouteByPath } from "@/router/utils";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
|
||||
import Setting from "@iconify-icons/ri/settings-3-line";
|
||||
|
||||
const menuRef = ref();
|
||||
const defaultActive = ref(null);
|
||||
@@ -49,7 +51,11 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="device !== 'mobile'" class="horizontal-header">
|
||||
<div
|
||||
v-if="device !== 'mobile'"
|
||||
class="horizontal-header"
|
||||
v-loading="usePermissionStoreHook().wholeMenus.length === 0"
|
||||
>
|
||||
<el-menu
|
||||
router
|
||||
ref="menuRef"
|
||||
@@ -102,7 +108,7 @@ watch(
|
||||
<el-dropdown-menu class="logout">
|
||||
<el-dropdown-item @click="logout">
|
||||
<IconifyIconOffline
|
||||
icon="logout-circle-r-line"
|
||||
:icon="LogoutCircleRLine"
|
||||
style="margin: 5px"
|
||||
/>
|
||||
退出系统
|
||||
@@ -115,13 +121,16 @@ watch(
|
||||
title="打开项目配置"
|
||||
@click="onPanel"
|
||||
>
|
||||
<IconifyIconOffline icon="setting" />
|
||||
<IconifyIconOffline :icon="Setting" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-loading-mask) {
|
||||
opacity: 0.45;
|
||||
}
|
||||
.logout {
|
||||
max-width: 120px;
|
||||
|
||||
|
||||
@@ -6,7 +6,12 @@ import { useNav } from "@/layout/hooks/useNav";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { ref, toRaw, PropType, nextTick, computed, CSSProperties } from "vue";
|
||||
|
||||
const { layout, isCollapse } = useNav();
|
||||
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, tooltipEffect } = useNav();
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
@@ -77,7 +82,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);
|
||||
@@ -189,6 +200,7 @@ function resolvePath(routePath) {
|
||||
<el-tooltip
|
||||
v-else
|
||||
placement="top"
|
||||
:effect="tooltipEffect"
|
||||
:offset="-10"
|
||||
:disabled="!onlyOneChild.showTooltip"
|
||||
>
|
||||
@@ -219,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">
|
||||
@@ -237,8 +246,9 @@ function resolvePath(routePath) {
|
||||
<el-tooltip
|
||||
v-else
|
||||
placement="top"
|
||||
:effect="tooltipEffect"
|
||||
:offset="-10"
|
||||
:disabled="!isCollapse || !props.item.showTooltip"
|
||||
:disabled="!props.item.showTooltip"
|
||||
>
|
||||
<template #content>
|
||||
{{ props.item.meta.title }}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -59,7 +59,10 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="['sidebar-container', showLogo ? 'has-logo' : '']">
|
||||
<div
|
||||
v-loading="menuData.length === 0"
|
||||
:class="['sidebar-container', showLogo ? 'has-logo' : '']"
|
||||
>
|
||||
<Logo v-if="showLogo" :collapse="isCollapse" />
|
||||
<el-scrollbar
|
||||
wrap-class="scrollbar-wrapper"
|
||||
@@ -91,3 +94,9 @@ watch(
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-loading-mask) {
|
||||
opacity: 0.45;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,6 +10,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,
|
||||
@@ -282,11 +289,11 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
|
||||
toggle();
|
||||
setTimeout(() => {
|
||||
if (isFullscreen.value) {
|
||||
tagsViews[6].icon = "exit-fullscreen";
|
||||
tagsViews[6].text = "整体页面退出全屏";
|
||||
tagsViews[6].icon = ExitFullscreen;
|
||||
tagsViews[6].text = "退出全屏";
|
||||
} else {
|
||||
tagsViews[6].icon = "fullscreen";
|
||||
tagsViews[6].text = "整体页面全屏";
|
||||
tagsViews[6].icon = Fullscreen;
|
||||
tagsViews[6].text = "全屏";
|
||||
}
|
||||
}, 100);
|
||||
break;
|
||||
@@ -295,10 +302,10 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
|
||||
onContentFullScreen();
|
||||
setTimeout(() => {
|
||||
if (pureSetting.hiddenSideBar) {
|
||||
tagsViews[7].icon = "exit-fullscreen";
|
||||
tagsViews[7].icon = ExitFullscreen;
|
||||
tagsViews[7].text = "内容区退出全屏";
|
||||
} else {
|
||||
tagsViews[7].icon = "fullscreen";
|
||||
tagsViews[7].icon = Fullscreen;
|
||||
tagsViews[7].text = "内容区全屏";
|
||||
}
|
||||
}, 100);
|
||||
@@ -494,7 +501,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">
|
||||
@@ -528,7 +535,7 @@ onMounted(() => {
|
||||
class="el-icon-close"
|
||||
@click.stop="deleteMenu(item)"
|
||||
>
|
||||
<IconifyIconOffline icon="close-bold" />
|
||||
<IconifyIconOffline :icon="CloseBold" />
|
||||
</span>
|
||||
<div
|
||||
:ref="'schedule' + index"
|
||||
@@ -539,10 +546,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">
|
||||
@@ -571,7 +575,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>
|
||||
|
||||
@@ -17,6 +17,8 @@ export function useNav() {
|
||||
const pureApp = useAppStoreHook();
|
||||
const routers = useRouter().options.routes;
|
||||
const { wholeMenus } = storeToRefs(usePermissionStoreHook());
|
||||
/** 平台`layout`中所有`el-tooltip`的`effect`配置，默认`light` */
|
||||
const tooltipEffect = getConfig()?.TooltipEffect ?? "light";
|
||||
|
||||
/** 用户名 */
|
||||
const username = computed(() => {
|
||||
@@ -136,6 +138,7 @@ export function useNav() {
|
||||
isCollapse,
|
||||
pureApp,
|
||||
username,
|
||||
avatarsStyle
|
||||
avatarsStyle,
|
||||
tooltipEffect
|
||||
};
|
||||
}
|
||||
|
||||
@@ -16,6 +16,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();
|
||||
@@ -46,56 +54,56 @@ export function useTags() {
|
||||
|
||||
const tagsViews = reactive<Array<tagsViewsType>>([
|
||||
{
|
||||
icon: "refresh-right",
|
||||
icon: RefreshRight,
|
||||
text: "重新加载",
|
||||
divided: false,
|
||||
disabled: false,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: "close",
|
||||
icon: Close,
|
||||
text: "关闭当前标签页",
|
||||
divided: false,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: "close-left-tags",
|
||||
icon: CloseLeftTags,
|
||||
text: "关闭左侧标签页",
|
||||
divided: true,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: "close-right-tags",
|
||||
icon: CloseRightTags,
|
||||
text: "关闭右侧标签页",
|
||||
divided: false,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: "close-other-tags",
|
||||
icon: CloseOtherTags,
|
||||
text: "关闭其他标签页",
|
||||
divided: true,
|
||||
disabled: multiTags.value.length > 2 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: "close-all-tags",
|
||||
icon: CloseAllTags,
|
||||
text: "关闭全部标签页",
|
||||
divided: false,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: "fullscreen",
|
||||
icon: Fullscreen,
|
||||
text: "整体页面全屏",
|
||||
divided: true,
|
||||
disabled: false,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: "fullscreen",
|
||||
icon: Fullscreen,
|
||||
text: "内容区全屏",
|
||||
divided: false,
|
||||
disabled: false,
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import "animate.css";
|
||||
// 引入 src/components/ReIcon/src/offlineIcon.ts 文件中所有使用addIcon添加过的本地图标
|
||||
import "@/components/ReIcon/src/offlineIcon";
|
||||
import { setType } from "./types";
|
||||
import { emitter } from "@/utils/mitt";
|
||||
import { useLayout } from "./hooks/useLayout";
|
||||
|
||||
@@ -2,19 +2,14 @@
|
||||
* @description ⚠️：此文件仅供主题插件使用，请不要在此文件中导出别的工具函数（仅在页面加载前运行）
|
||||
*/
|
||||
|
||||
import { EpThemeColor } from "../../../public/serverConfig.json";
|
||||
|
||||
type MultipleScopeVarsItem = {
|
||||
scopeName: string;
|
||||
varsContent: string;
|
||||
};
|
||||
|
||||
/** 将vxe默认主题色和ep默认主题色保持一致 */
|
||||
const vxeColor = EpThemeColor;
|
||||
/** 预设主题色 */
|
||||
const themeColors = {
|
||||
default: {
|
||||
vxeColor,
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#001529",
|
||||
menuHover: "#4091f7",
|
||||
@@ -26,7 +21,6 @@ const themeColors = {
|
||||
menuActiveBefore: "#4091f7"
|
||||
},
|
||||
light: {
|
||||
vxeColor,
|
||||
subMenuActiveText: "#409eff",
|
||||
menuBg: "#fff",
|
||||
menuHover: "#e0ebf6",
|
||||
@@ -38,7 +32,6 @@ const themeColors = {
|
||||
menuActiveBefore: "#4091f7"
|
||||
},
|
||||
dusk: {
|
||||
vxeColor: "#f5222d",
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#2a0608",
|
||||
menuHover: "#e13c39",
|
||||
@@ -50,7 +43,6 @@ const themeColors = {
|
||||
menuActiveBefore: "#e13c39"
|
||||
},
|
||||
volcano: {
|
||||
vxeColor: "#fa541c",
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#2b0e05",
|
||||
menuHover: "#e85f33",
|
||||
@@ -62,7 +54,6 @@ const themeColors = {
|
||||
menuActiveBefore: "#e85f33"
|
||||
},
|
||||
yellow: {
|
||||
vxeColor: "#fadb14",
|
||||
subMenuActiveText: "#d25f00",
|
||||
menuBg: "#2b2503",
|
||||
menuHover: "#f6da4d",
|
||||
@@ -74,7 +65,6 @@ const themeColors = {
|
||||
menuActiveBefore: "#f6da4d"
|
||||
},
|
||||
mingQing: {
|
||||
vxeColor: "#13c2c2",
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#032121",
|
||||
menuHover: "#59bfc1",
|
||||
@@ -86,7 +76,6 @@ const themeColors = {
|
||||
menuActiveBefore: "#59bfc1"
|
||||
},
|
||||
auroraGreen: {
|
||||
vxeColor: "#52c41a",
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#0b1e15",
|
||||
menuHover: "#60ac80",
|
||||
@@ -98,7 +87,6 @@ const themeColors = {
|
||||
menuActiveBefore: "#60ac80"
|
||||
},
|
||||
pink: {
|
||||
vxeColor: "#eb2f96",
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#28081a",
|
||||
menuHover: "#d84493",
|
||||
@@ -110,7 +98,6 @@ const themeColors = {
|
||||
menuActiveBefore: "#d84493"
|
||||
},
|
||||
saucePurple: {
|
||||
vxeColor: "#722ed1",
|
||||
subMenuActiveText: "#fff",
|
||||
menuBg: "#130824",
|
||||
menuHover: "#693ac9",
|
||||
@@ -132,7 +119,6 @@ export const genScssMultipleScopeVars = (): MultipleScopeVarsItem[] => {
|
||||
result.push({
|
||||
scopeName: `layout-theme-${key}`,
|
||||
varsContent: `
|
||||
$vxe-primary-color: ${themeColors[key].vxeColor} !default;
|
||||
$subMenuActiveText: ${themeColors[key].subMenuActiveText} !default;
|
||||
$menuBg: ${themeColors[key].menuBg} !default;
|
||||
$menuHover: ${themeColors[key].menuHover} !default;
|
||||
|
||||
@@ -1,17 +1,19 @@
|
||||
import type { IconifyIcon } from "@iconify/vue";
|
||||
|
||||
export const routerArrays: Array<RouteConfigs> = [
|
||||
{
|
||||
path: "/welcome",
|
||||
parentPath: "/",
|
||||
meta: {
|
||||
title: "首页",
|
||||
icon: "home-filled"
|
||||
icon: "homeFilled"
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
export type routeMetaType = {
|
||||
title?: string;
|
||||
icon?: string;
|
||||
icon?: string | IconifyIcon;
|
||||
showLink?: boolean;
|
||||
savedPosition?: boolean;
|
||||
auths?: Array<string>;
|
||||
@@ -32,7 +34,7 @@ export type multiTagsType = {
|
||||
};
|
||||
|
||||
export type tagsViewsType = {
|
||||
icon: string;
|
||||
icon: string | IconifyIcon;
|
||||
text: string;
|
||||
divided: boolean;
|
||||
disabled: boolean;
|
||||
|
||||
@@ -6,19 +6,16 @@ import { getServerConfig } from "./config";
|
||||
import { createApp, Directive } from "vue";
|
||||
import { MotionPlugin } from "@vueuse/motion";
|
||||
// import { useEcharts } from "@/plugins/echarts";
|
||||
// import { useTable } from "@/plugins/vxe-table";
|
||||
import { injectResponsiveStorage } from "@/utils/responsive";
|
||||
|
||||
// import Table from "@pureadmin/table";
|
||||
// import PureDescriptions from "@pureadmin/descriptions";
|
||||
|
||||
import "animate.css";
|
||||
// 引入重置样式
|
||||
import "./style/reset.scss";
|
||||
// 导入公共样式
|
||||
import "./style/index.scss";
|
||||
import "element-plus/dist/index.css";
|
||||
|
||||
// 导入字体图标
|
||||
import "./assets/iconfont/iconfont.js";
|
||||
import "./assets/iconfont/iconfont.css";
|
||||
@@ -54,6 +51,5 @@ getServerConfig(app).then(async config => {
|
||||
// .use(useEcharts);
|
||||
// .use(Table);
|
||||
// .use(PureDescriptions);
|
||||
// .use(useTable);
|
||||
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,
|
||||
@@ -19,7 +19,7 @@ use([
|
||||
PieChart,
|
||||
BarChart,
|
||||
LineChart,
|
||||
SVGRenderer,
|
||||
CanvasRenderer,
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
LegendComponent,
|
||||
@@ -33,6 +33,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;
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
@import "vxe-table/styles/variable.scss";
|
||||
@import "vxe-table/styles/modules.scss";
|
||||
|
||||
i {
|
||||
border-color: initial;
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
import "xe-utils";
|
||||
import "./index.scss";
|
||||
import { App } from "vue";
|
||||
import "font-awesome/css/font-awesome.min.css";
|
||||
|
||||
import {
|
||||
// 核心
|
||||
VXETable,
|
||||
// 表格功能
|
||||
Icon,
|
||||
Filter,
|
||||
Edit,
|
||||
Menu,
|
||||
Export,
|
||||
Keyboard,
|
||||
Validator,
|
||||
// 可选组件
|
||||
Column,
|
||||
Colgroup,
|
||||
Grid,
|
||||
Tooltip,
|
||||
Toolbar,
|
||||
Pager,
|
||||
Form,
|
||||
FormItem,
|
||||
FormGather,
|
||||
Checkbox,
|
||||
CheckboxGroup,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
RadioButton,
|
||||
Switch,
|
||||
Input,
|
||||
Select,
|
||||
Optgroup,
|
||||
Option,
|
||||
Textarea,
|
||||
Button,
|
||||
Modal,
|
||||
List,
|
||||
Pulldown,
|
||||
// 表格
|
||||
Table
|
||||
} from "vxe-table";
|
||||
|
||||
// 全局默认参数
|
||||
VXETable.setup({
|
||||
size: "medium",
|
||||
version: 0,
|
||||
zIndex: 1002,
|
||||
table: {
|
||||
// 自动监听父元素的变化去重新计算表格
|
||||
autoResize: true,
|
||||
// 鼠标移到行是否要高亮显示
|
||||
highlightHoverRow: true
|
||||
},
|
||||
input: {
|
||||
clearable: true
|
||||
}
|
||||
});
|
||||
|
||||
export function useTable(app: App) {
|
||||
app
|
||||
.use(Icon)
|
||||
.use(Filter)
|
||||
.use(Edit)
|
||||
.use(Menu)
|
||||
.use(Export)
|
||||
.use(Keyboard)
|
||||
.use(Validator)
|
||||
// 可选组件
|
||||
.use(Column)
|
||||
.use(Colgroup)
|
||||
.use(Grid)
|
||||
.use(Tooltip)
|
||||
.use(Toolbar)
|
||||
.use(Pager)
|
||||
.use(Form)
|
||||
.use(FormItem)
|
||||
.use(FormGather)
|
||||
.use(Checkbox)
|
||||
.use(CheckboxGroup)
|
||||
.use(Radio)
|
||||
.use(RadioGroup)
|
||||
.use(RadioButton)
|
||||
.use(Switch)
|
||||
.use(Input)
|
||||
.use(Select)
|
||||
.use(Optgroup)
|
||||
.use(Option)
|
||||
.use(Textarea)
|
||||
.use(Button)
|
||||
.use(Modal)
|
||||
.use(List)
|
||||
.use(Pulldown)
|
||||
// 安装表格
|
||||
.use(Table);
|
||||
}
|
||||
@@ -2,7 +2,7 @@ export default {
|
||||
path: "/error",
|
||||
redirect: "/error/403",
|
||||
meta: {
|
||||
icon: "information-line",
|
||||
icon: "informationLine",
|
||||
title: "异常页面",
|
||||
rank: 9
|
||||
},
|
||||
|
||||
@@ -6,7 +6,7 @@ export default {
|
||||
component: Layout,
|
||||
redirect: "/welcome",
|
||||
meta: {
|
||||
icon: "home-filled",
|
||||
icon: "homeFilled",
|
||||
title: "首页",
|
||||
rank: 0
|
||||
},
|
||||
|
||||
@@ -15,7 +15,7 @@ export default [
|
||||
path: "/redirect",
|
||||
component: Layout,
|
||||
meta: {
|
||||
icon: "home-filled",
|
||||
icon: "homeFilled",
|
||||
title: "首页",
|
||||
showLink: false,
|
||||
rank: 104
|
||||
|
||||
@@ -16,6 +16,7 @@ import {
|
||||
storageSession,
|
||||
isIncludeAllChildren
|
||||
} from "@pureadmin/utils";
|
||||
import { getConfig } from "@/config";
|
||||
import { buildHierarchyTree } from "@/utils/tree";
|
||||
import { cloneDeep, intersection } from "lodash-unified";
|
||||
import { sessionKey, type DataInfo } from "@/utils/auth";
|
||||
@@ -151,42 +152,66 @@ function addPathMatch() {
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化路由 */
|
||||
function initRouter() {
|
||||
return new Promise(resolve => {
|
||||
getAsyncRoutes().then(({ data }) => {
|
||||
if (data.length === 0) {
|
||||
usePermissionStoreHook().handleWholeMenus(data);
|
||||
resolve(router);
|
||||
} else {
|
||||
formatFlatteningRoutes(addAsyncRoutes(data)).map(
|
||||
(v: RouteRecordRaw) => {
|
||||
// 防止重复添加路由
|
||||
if (
|
||||
router.options.routes[0].children.findIndex(
|
||||
value => value.path === v.path
|
||||
) !== -1
|
||||
) {
|
||||
return;
|
||||
} else {
|
||||
// 切记将路由push到routes后还需要使用addRoute，这样路由才能正常跳转
|
||||
router.options.routes[0].children.push(v);
|
||||
// 最终路由进行升序
|
||||
ascending(router.options.routes[0].children);
|
||||
if (!router.hasRoute(v?.name)) router.addRoute(v);
|
||||
const flattenRouters: any = router
|
||||
.getRoutes()
|
||||
.find(n => n.path === "/");
|
||||
router.addRoute(flattenRouters);
|
||||
}
|
||||
resolve(router);
|
||||
}
|
||||
);
|
||||
usePermissionStoreHook().handleWholeMenus(data);
|
||||
/** 处理动态路由（后端返回的路由） */
|
||||
function handleAsyncRoutes(routeList) {
|
||||
if (routeList.length === 0) {
|
||||
usePermissionStoreHook().handleWholeMenus(routeList);
|
||||
} else {
|
||||
formatFlatteningRoutes(addAsyncRoutes(routeList)).map(
|
||||
(v: RouteRecordRaw) => {
|
||||
// 防止重复添加路由
|
||||
if (
|
||||
router.options.routes[0].children.findIndex(
|
||||
value => value.path === v.path
|
||||
) !== -1
|
||||
) {
|
||||
return;
|
||||
} else {
|
||||
// 切记将路由push到routes后还需要使用addRoute，这样路由才能正常跳转
|
||||
router.options.routes[0].children.push(v);
|
||||
// 最终路由进行升序
|
||||
ascending(router.options.routes[0].children);
|
||||
if (!router.hasRoute(v?.name)) router.addRoute(v);
|
||||
const flattenRouters: any = router
|
||||
.getRoutes()
|
||||
.find(n => n.path === "/");
|
||||
router.addRoute(flattenRouters);
|
||||
}
|
||||
}
|
||||
addPathMatch();
|
||||
);
|
||||
usePermissionStoreHook().handleWholeMenus(routeList);
|
||||
}
|
||||
addPathMatch();
|
||||
}
|
||||
|
||||
/** 初始化路由（`new Promise` 写法防止在异步请求中造成无限循环）*/
|
||||
function initRouter() {
|
||||
if (getConfig()?.CachingAsyncRoutes) {
|
||||
// 开启动态路由缓存本地sessionStorage
|
||||
const key = "async-routes";
|
||||
const asyncRouteList = storageSession.getItem(key) as any;
|
||||
if (asyncRouteList && asyncRouteList?.length > 0) {
|
||||
return new Promise(resolve => {
|
||||
handleAsyncRoutes(asyncRouteList);
|
||||
resolve(router);
|
||||
});
|
||||
} else {
|
||||
return new Promise(resolve => {
|
||||
getAsyncRoutes().then(({ data }) => {
|
||||
handleAsyncRoutes(cloneDeep(data));
|
||||
storageSession.setItem(key, data);
|
||||
resolve(router);
|
||||
});
|
||||
});
|
||||
}
|
||||
} else {
|
||||
return new Promise(resolve => {
|
||||
getAsyncRoutes().then(({ data }) => {
|
||||
handleAsyncRoutes(cloneDeep(data));
|
||||
resolve(router);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -39,97 +39,6 @@ html.dark {
|
||||
}
|
||||
}
|
||||
|
||||
/* vxe-table */
|
||||
.vxe-table--header-wrapper,
|
||||
.vxe-table--body-wrapper {
|
||||
color: var(--el-text-color-primary);
|
||||
background: var(--el-bg-color) !important;
|
||||
}
|
||||
|
||||
.vxe-table--render-default.border--full .vxe-header--column,
|
||||
.vxe-table--render-default.border--full .vxe-body--column,
|
||||
.vxe-table--render-default.border--full .vxe-footer--column {
|
||||
background-image: linear-gradient(
|
||||
var(--el-border-color-lighter),
|
||||
var(--el-border-color-lighter)
|
||||
),
|
||||
linear-gradient(
|
||||
var(--el-border-color-lighter),
|
||||
var(--el-border-color-lighter)
|
||||
);
|
||||
}
|
||||
|
||||
/* 表头 */
|
||||
.vxe-table--header-wrapper {
|
||||
background: #262727 !important;
|
||||
}
|
||||
|
||||
.vxe-table--render-wrapper,
|
||||
.vxe-table--main-wrapper {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.vxe-pager.is--perfect,
|
||||
.vxe-table--render-default .vxe-table--border-line {
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.vxe-table--header-border-line {
|
||||
border-bottom: 1px solid var(--el-border-color-lighter) !important;
|
||||
}
|
||||
|
||||
.vxe-body--row.row--hover,
|
||||
.vxe-pager {
|
||||
background-color: #262727;
|
||||
}
|
||||
|
||||
.vxe-input--inner,
|
||||
.vxe-pager .vxe-pager--jump-prev,
|
||||
.vxe-pager .vxe-pager--prev-btn,
|
||||
.vxe-pager .vxe-pager--next-btn,
|
||||
.vxe-pager .vxe-pager--jump-next,
|
||||
.vxe-pager .vxe-pager--num-btn,
|
||||
.vxe-pager .vxe-pager--jump .vxe-pager--goto {
|
||||
background-color: transparent;
|
||||
color: var(--el-text-color-primary);
|
||||
// outline: none !important;
|
||||
}
|
||||
|
||||
.vxe-select-option--wrapper {
|
||||
background: var(--el-bg-color) !important;
|
||||
}
|
||||
|
||||
.vxe-select-option:not(.is--disabled).is--hover {
|
||||
background: var(--el-color-primary-light-6) !important;
|
||||
}
|
||||
|
||||
.vxe-modal--wrapper.type--modal .vxe-modal--box,
|
||||
.vxe-modal--wrapper.type--alert .vxe-modal--box,
|
||||
.vxe-modal--wrapper.type--confirm .vxe-modal--box,
|
||||
.vxe-form {
|
||||
background: var(--el-bg-color) !important;
|
||||
}
|
||||
|
||||
.vxe-modal--box,
|
||||
.vxe-modal--header {
|
||||
border: none;
|
||||
background: var(--el-bg-color) !important;
|
||||
}
|
||||
|
||||
.vxe-modal--title,
|
||||
.vxe-button--content,
|
||||
.vxe-modal--header-title {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.vxe-button.type--button:hover {
|
||||
background: var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
.vxe-button {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* 项目配置面板 */
|
||||
.right-panel-items {
|
||||
.el-divider__text {
|
||||
@@ -155,4 +64,38 @@ html.dark {
|
||||
.el-dropdown-menu__item:not(.is-disabled):hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明 */
|
||||
.el-icon {
|
||||
&.el-dialog__close,
|
||||
&.el-drawer__close,
|
||||
&.el-message-box__close,
|
||||
&.el-notification__closeBtn {
|
||||
&:hover {
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
background-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，非暗黑模式在 src/style/element-plus.scss 文件进行了适配 */
|
||||
.pure-message {
|
||||
background-image: initial !important;
|
||||
background-color: rgb(36, 37, 37) !important;
|
||||
box-shadow: rgb(13 13 13 / 12%) 0px 3px 6px -4px,
|
||||
rgb(13 13 13 / 8%) 0px 6px 16px 0px, rgb(13 13 13 / 5%) 0px 9px 28px 8px !important;
|
||||
|
||||
& .el-message__content {
|
||||
color: $color-white !important;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -46,6 +46,12 @@
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* 自定义 tooltip 的类名 */
|
||||
.pure-tooltip {
|
||||
// 右侧操作面板right-panel类名的z-index为40000，tooltip需要大于它才能显示
|
||||
z-index: 41000 !important;
|
||||
}
|
||||
|
||||
/* nprogress 适配 element-plus 的主题色 */
|
||||
#nprogress {
|
||||
& .bar {
|
||||
@@ -62,3 +68,64 @@
|
||||
border-left-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明 */
|
||||
.el-dialog__headerbtn,
|
||||
.el-message-box__headerbtn {
|
||||
&:hover {
|
||||
.el-dialog__close {
|
||||
color: var(--el-color-info) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-icon {
|
||||
&.el-dialog__close,
|
||||
&.el-drawer__close,
|
||||
&.el-message-box__close,
|
||||
&.el-notification__closeBtn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
outline: none;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
&:hover {
|
||||
color: rgba(0, 0, 0, 0.88) !important;
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，暗黑模式在 src/style/dark.scss 文件进行了适配 */
|
||||
.pure-message {
|
||||
border-width: 0 !important;
|
||||
background: #fff !important;
|
||||
padding: 10px 13px !important;
|
||||
box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014,
|
||||
0 9px 28px 8px #0000000d !important;
|
||||
|
||||
&.el-message.is-closable .el-message__content {
|
||||
padding-right: 17px !important;
|
||||
}
|
||||
|
||||
& .el-message__content {
|
||||
color: #000000d9 !important;
|
||||
pointer-events: all !important;
|
||||
background-image: initial !important;
|
||||
}
|
||||
|
||||
& .el-message__icon {
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
|
||||
& .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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,9 +19,3 @@
|
||||
.html-weakness {
|
||||
filter: invert(80%);
|
||||
}
|
||||
|
||||
/* 重置 vxe-table 样式 */
|
||||
.vxe-button.type--button.theme--primary:hover,
|
||||
.vxe-pager .vxe-pager--num-btn:not(.is--disabled).is--active {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -26,9 +26,12 @@
|
||||
}
|
||||
|
||||
/* breadcrumb transition */
|
||||
.breadcrumb-enter-active,
|
||||
.breadcrumb-enter-active {
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.breadcrumb-leave-active {
|
||||
transition: all 0.5s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.breadcrumb-enter-from,
|
||||
|
||||
@@ -70,7 +70,7 @@ export function setToken(data: DataInfo<Date>) {
|
||||
/** 删除`token`以及key值为`user-info`的session信息 */
|
||||
export function removeToken() {
|
||||
Cookies.remove(TokenKey);
|
||||
sessionStorage.removeItem(sessionKey);
|
||||
sessionStorage.clear();
|
||||
}
|
||||
|
||||
/** 格式化token（jwt格式） */
|
||||
|
||||
@@ -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,32 +1,84 @@
|
||||
import { type VNode } from "vue";
|
||||
import { isFunction } from "@pureadmin/utils";
|
||||
import { type MessageHandler, ElMessage } from "element-plus";
|
||||
|
||||
// 更多配置请看：https://element-plus.org/zh-CN/component/message.html#message-%E9%85%8D%E7%BD%AE%E9%A1%B9
|
||||
type messageStyle = "el" | "antd";
|
||||
type messageTypes = "info" | "success" | "warning" | "error";
|
||||
|
||||
type messageTypes = "success" | "info" | "warning" | "error";
|
||||
interface MessageParams {
|
||||
/** 消息类型，可选 `info` 、`success` 、`warning` 、`error` ，默认 `info` */
|
||||
type?: messageTypes;
|
||||
/** 自定义图标，该属性会覆盖 `type` 的图标 */
|
||||
icon?: any;
|
||||
/** 是否将 `message` 属性作为 `HTML` 片段处理，默认 `false` */
|
||||
dangerouslyUseHTMLString?: boolean;
|
||||
/** 消息风格，可选 `el` 、`antd` ，默认 `antd` */
|
||||
customClass?: messageStyle;
|
||||
/** 显示时间，单位为毫秒。设为 `0` 则不会自动关闭，`element-plus` 默认是 `3000` ，平台改成默认 `2000` */
|
||||
duration?: number;
|
||||
/** 是否显示关闭按钮，默认值 `false` */
|
||||
showClose?: boolean;
|
||||
/** 文字是否居中，默认值 `false` */
|
||||
center?: boolean;
|
||||
/** `Message` 距离窗口顶部的偏移量，默认 `20` */
|
||||
offset?: number;
|
||||
/** 设置组件的根元素，默认 `document.body` */
|
||||
appendTo?: string | HTMLElement;
|
||||
/** 合并内容相同的消息，不支持 `VNode` 类型的消息，默认值 `false` */
|
||||
grouping?: boolean;
|
||||
/** 关闭时的回调函数, 参数为被关闭的 `message` 实例 */
|
||||
onClose?: Function | null;
|
||||
}
|
||||
|
||||
/** 用法非常简单，参考 src/views/components/message/index.vue 文件 */
|
||||
|
||||
/**
|
||||
* `element-plus` 的 `info` 消息类型
|
||||
* `Message` 消息提示函数
|
||||
*/
|
||||
const message = (
|
||||
message: string,
|
||||
type = "info" as messageTypes,
|
||||
showClose = true,
|
||||
duration = 2000,
|
||||
center = false,
|
||||
grouping = false
|
||||
message: string | VNode | (() => VNode),
|
||||
params?: MessageParams
|
||||
): MessageHandler => {
|
||||
return ElMessage({
|
||||
message,
|
||||
type,
|
||||
showClose,
|
||||
duration,
|
||||
center,
|
||||
grouping
|
||||
});
|
||||
if (!params) {
|
||||
return ElMessage({
|
||||
message,
|
||||
customClass: "pure-message"
|
||||
});
|
||||
} else {
|
||||
const {
|
||||
icon,
|
||||
type = "info",
|
||||
dangerouslyUseHTMLString = false,
|
||||
customClass = "antd",
|
||||
duration = 2000,
|
||||
showClose = false,
|
||||
center = false,
|
||||
offset = 20,
|
||||
appendTo = document.body,
|
||||
grouping = false,
|
||||
onClose
|
||||
} = params;
|
||||
|
||||
return ElMessage({
|
||||
message,
|
||||
type,
|
||||
icon,
|
||||
dangerouslyUseHTMLString,
|
||||
duration,
|
||||
showClose,
|
||||
center,
|
||||
offset,
|
||||
appendTo,
|
||||
grouping,
|
||||
// 全局搜 pure-message 即可知道该类的样式位置
|
||||
customClass: customClass === "antd" ? "pure-message" : "",
|
||||
onClose: () => (isFunction(onClose) ? onClose() : null)
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭 `element-plus` 的所有消息实例
|
||||
* 关闭所有 `Message` 消息提示函数
|
||||
*/
|
||||
const closeAllMessage = (): void => ElMessage.closeAll();
|
||||
|
||||
|
||||
@@ -15,6 +15,8 @@ import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
|
||||
|
||||
import dayIcon from "@/assets/svg/day.svg?component";
|
||||
import darkIcon from "@/assets/svg/dark.svg?component";
|
||||
import Lock from "@iconify-icons/ri/lock-fill";
|
||||
import User from "@iconify-icons/ri/user-3-fill";
|
||||
|
||||
defineOptions({
|
||||
name: "Login"
|
||||
@@ -47,7 +49,7 @@ const onLogin = async (formEl: FormInstance | undefined) => {
|
||||
// 获取后端路由
|
||||
initRouter().then(() => {
|
||||
router.push("/");
|
||||
message("登录成功", "success");
|
||||
message("登录成功", { type: "success" });
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -119,7 +121,7 @@ onBeforeUnmount(() => {
|
||||
clearable
|
||||
v-model="ruleForm.username"
|
||||
placeholder="账号"
|
||||
:prefix-icon="useRenderIcon('user')"
|
||||
:prefix-icon="useRenderIcon(User)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
@@ -131,7 +133,7 @@ onBeforeUnmount(() => {
|
||||
show-password
|
||||
v-model="ruleForm.password"
|
||||
placeholder="密码"
|
||||
:prefix-icon="useRenderIcon('lock')"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</Motion>
|
||||
|
||||
@@ -33,6 +33,7 @@ function onChange() {
|
||||
.loginByUsername({ username: username.value, password: "admin123" })
|
||||
.then(res => {
|
||||
if (res.success) {
|
||||
sessionStorage.removeItem("async-routes");
|
||||
usePermissionStoreHook().clearAllCachePage();
|
||||
initRouter();
|
||||
}
|
||||
|
||||
@@ -21,8 +21,7 @@
|
||||
"incremental": true,
|
||||
"paths": {
|
||||
"@/*": ["src/*"],
|
||||
"@build/*": ["build/*"],
|
||||
"/#/*": ["types/*"]
|
||||
"@build/*": ["build/*"]
|
||||
},
|
||||
"types": [
|
||||
"node",
|
||||
@@ -30,16 +29,16 @@
|
||||
"element-plus/global",
|
||||
"@pureadmin/table/volar",
|
||||
"@pureadmin/descriptions/volar",
|
||||
"unplugin-vue-macros/macros-global"
|
||||
"unplugin-vue-define-options/macros-global"
|
||||
],
|
||||
"typeRoots": ["./node_modules/@types/", "./types"]
|
||||
},
|
||||
"include": [
|
||||
"mock/*.ts",
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue",
|
||||
"types/*.d.ts",
|
||||
"mock/*.ts",
|
||||
"vite.config.ts"
|
||||
],
|
||||
"exclude": ["node_modules", "dist", "**/*.js"]
|
||||
|
||||
124
types/global-components.d.ts
vendored
Normal file
124
types/global-components.d.ts
vendored
Normal file
@@ -0,0 +1,124 @@
|
||||
declare module "vue" {
|
||||
/**
|
||||
* 自定义全局组件获得 Volar 提示（自定义的全局组件需要在这里声明下才能获得 Volar 类型提示哦）
|
||||
*/
|
||||
export interface GlobalComponents {
|
||||
IconifyIconOffline: typeof import("../src/components/ReIcon")["IconifyIconOffline"];
|
||||
IconifyIconOnline: typeof import("../src/components/ReIcon")["IconifyIconOnline"];
|
||||
FontIcon: typeof import("../src/components/ReIcon")["FontIcon"];
|
||||
Auth: typeof import("../src/components/ReAuth")["Auth"];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* todo：https://github.com/element-plus/element-plus/blob/dev/global.d.ts#L2
|
||||
* No need to install @vue/runtime-core
|
||||
*/
|
||||
declare module "vue" {
|
||||
export interface GlobalComponents {
|
||||
ElAffix: typeof import("element-plus")["ElAffix"];
|
||||
ElAlert: typeof import("element-plus")["ElAlert"];
|
||||
ElAside: typeof import("element-plus")["ElAside"];
|
||||
ElAutocomplete: typeof import("element-plus")["ElAutocomplete"];
|
||||
ElAvatar: typeof import("element-plus")["ElAvatar"];
|
||||
ElBacktop: typeof import("element-plus")["ElBacktop"];
|
||||
ElBadge: typeof import("element-plus")["ElBadge"];
|
||||
ElBreadcrumb: typeof import("element-plus")["ElBreadcrumb"];
|
||||
ElBreadcrumbItem: typeof import("element-plus")["ElBreadcrumbItem"];
|
||||
ElButton: typeof import("element-plus")["ElButton"];
|
||||
ElButtonGroup: typeof import("element-plus")["ElButtonGroup"];
|
||||
ElCalendar: typeof import("element-plus")["ElCalendar"];
|
||||
ElCard: typeof import("element-plus")["ElCard"];
|
||||
ElCarousel: typeof import("element-plus")["ElCarousel"];
|
||||
ElCarouselItem: typeof import("element-plus")["ElCarouselItem"];
|
||||
ElCascader: typeof import("element-plus")["ElCascader"];
|
||||
ElCascaderPanel: typeof import("element-plus")["ElCascaderPanel"];
|
||||
ElCheckbox: typeof import("element-plus")["ElCheckbox"];
|
||||
ElCheckboxButton: typeof import("element-plus")["ElCheckboxButton"];
|
||||
ElCheckboxGroup: typeof import("element-plus")["ElCheckboxGroup"];
|
||||
ElCol: typeof import("element-plus")["ElCol"];
|
||||
ElCollapse: typeof import("element-plus")["ElCollapse"];
|
||||
ElCollapseItem: typeof import("element-plus")["ElCollapseItem"];
|
||||
ElCollapseTransition: typeof import("element-plus")["ElCollapseTransition"];
|
||||
ElColorPicker: typeof import("element-plus")["ElColorPicker"];
|
||||
ElContainer: typeof import("element-plus")["ElContainer"];
|
||||
ElConfigProvider: typeof import("element-plus")["ElConfigProvider"];
|
||||
ElDatePicker: typeof import("element-plus")["ElDatePicker"];
|
||||
ElDialog: typeof import("element-plus")["ElDialog"];
|
||||
ElDivider: typeof import("element-plus")["ElDivider"];
|
||||
ElDrawer: typeof import("element-plus")["ElDrawer"];
|
||||
ElDropdown: typeof import("element-plus")["ElDropdown"];
|
||||
ElDropdownItem: typeof import("element-plus")["ElDropdownItem"];
|
||||
ElDropdownMenu: typeof import("element-plus")["ElDropdownMenu"];
|
||||
ElEmpty: typeof import("element-plus")["ElEmpty"];
|
||||
ElFooter: typeof import("element-plus")["ElFooter"];
|
||||
ElForm: typeof import("element-plus")["ElForm"];
|
||||
ElFormItem: typeof import("element-plus")["ElFormItem"];
|
||||
ElHeader: typeof import("element-plus")["ElHeader"];
|
||||
ElIcon: typeof import("element-plus")["ElIcon"];
|
||||
ElImage: typeof import("element-plus")["ElImage"];
|
||||
ElImageViewer: typeof import("element-plus")["ElImageViewer"];
|
||||
ElInput: typeof import("element-plus")["ElInput"];
|
||||
ElInputNumber: typeof import("element-plus")["ElInputNumber"];
|
||||
ElLink: typeof import("element-plus")["ElLink"];
|
||||
ElMain: typeof import("element-plus")["ElMain"];
|
||||
ElMenu: typeof import("element-plus")["ElMenu"];
|
||||
ElMenuItem: typeof import("element-plus")["ElMenuItem"];
|
||||
ElMenuItemGroup: typeof import("element-plus")["ElMenuItemGroup"];
|
||||
ElOption: typeof import("element-plus")["ElOption"];
|
||||
ElOptionGroup: typeof import("element-plus")["ElOptionGroup"];
|
||||
ElPageHeader: typeof import("element-plus")["ElPageHeader"];
|
||||
ElPagination: typeof import("element-plus")["ElPagination"];
|
||||
ElPopconfirm: typeof import("element-plus")["ElPopconfirm"];
|
||||
ElPopper: typeof import("element-plus")["ElPopper"];
|
||||
ElPopover: typeof import("element-plus")["ElPopover"];
|
||||
ElProgress: typeof import("element-plus")["ElProgress"];
|
||||
ElRadio: typeof import("element-plus")["ElRadio"];
|
||||
ElRadioButton: typeof import("element-plus")["ElRadioButton"];
|
||||
ElRadioGroup: typeof import("element-plus")["ElRadioGroup"];
|
||||
ElRate: typeof import("element-plus")["ElRate"];
|
||||
ElRow: typeof import("element-plus")["ElRow"];
|
||||
ElScrollbar: typeof import("element-plus")["ElScrollbar"];
|
||||
ElSelect: typeof import("element-plus")["ElSelect"];
|
||||
ElSlider: typeof import("element-plus")["ElSlider"];
|
||||
ElStep: typeof import("element-plus")["ElStep"];
|
||||
ElSteps: typeof import("element-plus")["ElSteps"];
|
||||
ElSubMenu: typeof import("element-plus")["ElSubMenu"];
|
||||
ElSwitch: typeof import("element-plus")["ElSwitch"];
|
||||
ElTabPane: typeof import("element-plus")["ElTabPane"];
|
||||
ElTable: typeof import("element-plus")["ElTable"];
|
||||
ElTableColumn: typeof import("element-plus")["ElTableColumn"];
|
||||
ElTabs: typeof import("element-plus")["ElTabs"];
|
||||
ElTag: typeof import("element-plus")["ElTag"];
|
||||
ElTimePicker: typeof import("element-plus")["ElTimePicker"];
|
||||
ElTimeSelect: typeof import("element-plus")["ElTimeSelect"];
|
||||
ElTimeline: typeof import("element-plus")["ElTimeline"];
|
||||
ElTimelineItem: typeof import("element-plus")["ElTimelineItem"];
|
||||
ElTooltip: typeof import("element-plus")["ElTooltip"];
|
||||
ElTransfer: typeof import("element-plus")["ElTransfer"];
|
||||
ElTree: typeof import("element-plus")["ElTree"];
|
||||
ElTreeV2: typeof import("element-plus")["ElTreeV2"];
|
||||
ElUpload: typeof import("element-plus")["ElUpload"];
|
||||
ElSpace: typeof import("element-plus")["ElSpace"];
|
||||
ElSkeleton: typeof import("element-plus")["ElSkeleton"];
|
||||
ElSkeletonItem: typeof import("element-plus")["ElSkeletonItem"];
|
||||
ElCheckTag: typeof import("element-plus")["ElCheckTag"];
|
||||
ElDescriptions: typeof import("element-plus")["ElDescriptions"];
|
||||
ElDescriptionsItem: typeof import("element-plus")["ElDescriptionsItem"];
|
||||
ElResult: typeof import("element-plus")["ElResult"];
|
||||
ElSelectV2: typeof import("element-plus")["ElSelectV2"];
|
||||
}
|
||||
|
||||
interface ComponentCustomProperties {
|
||||
$message: typeof import("element-plus")["ElMessage"];
|
||||
$notify: typeof import("element-plus")["ElNotification"];
|
||||
$msgbox: typeof import("element-plus")["ElMessageBox"];
|
||||
$messageBox: typeof import("element-plus")["ElMessageBox"];
|
||||
$alert: typeof import("element-plus")["ElMessageBox"]["alert"];
|
||||
$confirm: typeof import("element-plus")["ElMessageBox"]["confirm"];
|
||||
$prompt: typeof import("element-plus")["ElMessageBox"]["prompt"];
|
||||
$loading: typeof import("element-plus")["ElLoadingService"];
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
37
types/global.d.ts
vendored
37
types/global.d.ts
vendored
@@ -5,7 +5,7 @@ import type {
|
||||
ComponentPublicInstance
|
||||
} from "vue";
|
||||
import type { ECharts } from "echarts";
|
||||
import type { ResponsiveStorage } from "./index";
|
||||
import type { IconifyIcon } from "@iconify/vue";
|
||||
import type { TableColumns } from "@pureadmin/table";
|
||||
import { type RouteComponent, type RouteLocationNormalized } from "vue-router";
|
||||
|
||||
@@ -94,14 +94,8 @@ declare global {
|
||||
ShowLogo?: boolean;
|
||||
ShowModel?: string;
|
||||
MenuArrowIconNoTransition?: boolean;
|
||||
MapConfigure?: {
|
||||
amapKey?: string;
|
||||
options: {
|
||||
resizeEnable?: boolean;
|
||||
center?: number[];
|
||||
zoom?: number;
|
||||
};
|
||||
};
|
||||
CachingAsyncRoutes?: boolean;
|
||||
TooltipEffect?: Effect;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -126,14 +120,6 @@ declare global {
|
||||
epThemeColor?: string;
|
||||
showLogo?: boolean;
|
||||
showModel?: string;
|
||||
mapConfigure?: {
|
||||
amapKey?: string;
|
||||
options: {
|
||||
resizeEnable?: boolean;
|
||||
center?: number[];
|
||||
zoom?: number;
|
||||
};
|
||||
};
|
||||
username?: string;
|
||||
}
|
||||
|
||||
@@ -189,7 +175,7 @@ declare global {
|
||||
/** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加） `必填` */
|
||||
title: string;
|
||||
/** 菜单图标 `可选` */
|
||||
icon?: string | FunctionalComponent;
|
||||
icon?: string | FunctionalComponent | IconifyIcon;
|
||||
/** 菜单名称右侧的额外图标，支持`fontawesome`、`iconfont`、`element-plus-icon` `可选` */
|
||||
extraIcon?: {
|
||||
svg?: boolean;
|
||||
@@ -214,6 +200,7 @@ declare global {
|
||||
/**
|
||||
* @description 当前路由动画效果
|
||||
* @see {@link https://next.router.vuejs.org/guide/advanced/transitions.html#transitions}
|
||||
* @see animate.css {@link https://animate.style}
|
||||
*/
|
||||
name?: string;
|
||||
/** 进场动画 */
|
||||
@@ -246,7 +233,7 @@ declare global {
|
||||
/** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加）`必填` */
|
||||
title: string;
|
||||
/** 菜单图标 `可选` */
|
||||
icon?: string | FunctionalComponent;
|
||||
icon?: string | FunctionalComponent | IconifyIcon;
|
||||
/** 是否在菜单中显示（默认`true`）`可选` */
|
||||
showLink?: boolean;
|
||||
/** 菜单升序排序，值越高排的越后（只针对顶级路由）`可选` */
|
||||
@@ -265,15 +252,3 @@ declare global {
|
||||
$config: ServerConfigs;
|
||||
}
|
||||
}
|
||||
|
||||
declare module "vue" {
|
||||
/**
|
||||
* 自定义全局组件获得 Volar 提示（自定义的全局组件需要在这里声明下才能获得 Volar 类型提示哦）
|
||||
*/
|
||||
export interface GlobalComponents {
|
||||
IconifyIconOffline: typeof import("../src/components/ReIcon")["IconifyIconOffline"];
|
||||
IconifyIconOnline: typeof import("../src/components/ReIcon")["IconifyIconOnline"];
|
||||
FontIcon: typeof import("../src/components/ReIcon")["FontIcon"];
|
||||
Auth: typeof import("../src/components/ReAuth")["Auth"];
|
||||
}
|
||||
}
|
||||
|
||||
2
types/index.d.ts
vendored
2
types/index.d.ts
vendored
@@ -45,6 +45,8 @@ type TimeoutHandle = ReturnType<typeof setTimeout>;
|
||||
|
||||
type IntervalHandle = ReturnType<typeof setInterval>;
|
||||
|
||||
type Effect = "light" | "dark";
|
||||
|
||||
interface ChangeEvent extends Event {
|
||||
target: HTMLInputElement;
|
||||
}
|
||||
|
||||
@@ -2,8 +2,8 @@ import dayjs from "dayjs";
|
||||
import { resolve } from "path";
|
||||
import pkg from "./package.json";
|
||||
import { warpperEnv } from "./build";
|
||||
import { include } from "./build/optimize";
|
||||
import { getPluginsList } from "./build/plugins";
|
||||
import { include, exclude } from "./build/optimize";
|
||||
import { UserConfigExport, ConfigEnv, loadEnv } from "vite";
|
||||
|
||||
/** 当前执行node命令时文件夹的地址（工作目录） */
|
||||
@@ -49,7 +49,7 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
|
||||
// https://cn.vitejs.dev/config/dep-optimization-options.html#dep-optimization-options
|
||||
optimizeDeps: {
|
||||
include,
|
||||
exclude: ["@pureadmin/theme/dist/browser-utils"]
|
||||
exclude
|
||||
},
|
||||
build: {
|
||||
sourcemap: false,
|
||||
|
||||
Reference in New Issue
Block a user