Compare commits

..

10 Commits

Author SHA1 Message Date
xiaoxian521
27056e7560 release: update 3.9.4 2022-12-05 14:28:46 +08:00
xiaoxian521
132fbbade3 release: update 3.9.3 2022-12-04 18:00:16 +08:00
xiaoxian521
c6e25d6933 release: update 3.9.2 2022-12-03 15:20:30 +08:00
xiaoxian521
cabf1f85ef release: update 3.9.1 2022-12-02 20:20:50 +08:00
xiaoxian521
cb3d7cd552 perf: 优化 initRouter ,兼容 sso 场景 2022-12-01 16:05:06 +08:00
xiaoxian521
80453ec4b1 feat: 添加 CachingAsyncRoutes 是否开启动态路由缓存本地,默认 true 2022-12-01 11:42:10 +08:00
xiaoxian521
8ca8bbcee0 chore: update 2022-11-30 18:20:56 +08:00
xiaoxian521
2b67efe771 release: update 3.9.0 2022-11-30 16:33:46 +08:00
xiaoxian521
bbe23ce0a2 release: update 3.8.7 2022-11-28 01:49:35 +08:00
xiaoxian521
68492ec362 docs: update 2022-11-27 18:05:55 +08:00
54 changed files with 479 additions and 831 deletions

View File

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

View File

@@ -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`
## 版本选择

View File

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

View File

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

View File

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

View File

@@ -1,6 +1,6 @@
{
"name": "pure-admin-thin",
"version": "3.8.6",
"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",
@@ -86,7 +84,6 @@
"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",
@@ -110,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",

345
pnpm-lock.yaml generated
View File

@@ -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
@@ -35,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
@@ -52,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
@@ -75,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
@@ -87,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
@@ -111,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
@@ -148,7 +143,6 @@ devDependencies:
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
@@ -172,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
@@ -194,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:
{
@@ -1041,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==
@@ -1050,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
@@ -1077,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: "*"
@@ -1295,6 +1282,7 @@ packages:
{
integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
}
dev: false
/@typescript-eslint/eslint-plugin/5.44.0_fnsv2sbzcckq65bwfk7a5xwslu:
resolution:
@@ -1556,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:
{
@@ -1592,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:
{
@@ -1954,6 +1766,7 @@ packages:
transitivePeerDependencies:
- "@vue/composition-api"
- vue
dev: false
/@vueuse/metadata/8.9.4:
resolution:
@@ -1967,6 +1780,7 @@ packages:
{
integrity: sha512-sIC8R+kWkIdpi5X2z2Gk8TRYzmczDwHRhEFfCu2P+XW2JdPoXrziqsGpDDsN7ykBx4ilwieS7JUIweVGhvZ93w==
}
dev: false
/@vueuse/motion/2.0.0-beta.12_vue@3.2.45:
resolution:
@@ -2017,6 +1831,7 @@ packages:
transitivePeerDependencies:
- "@vue/composition-api"
- vue
dev: false
/@zougt/some-loader-utils/1.4.3:
resolution:
@@ -3277,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
@@ -4113,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:
{
@@ -4964,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:
{
@@ -5712,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
@@ -7484,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:
{
@@ -7523,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:
{
@@ -7770,6 +7498,7 @@ packages:
optional: true
dependencies:
vue: 3.2.45
dev: false
/vue-eslint-parser/9.1.0_eslint@8.28.0:
resolution:
@@ -7853,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:
{
@@ -7952,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:
{

View File

@@ -1,5 +1,5 @@
{
"Version": "3.8.6",
"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"
}

View File

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

View File

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

View 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);

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,6 +0,0 @@
@import "vxe-table/styles/variable.scss";
@import "vxe-table/styles/modules.scss";
i {
border-color: initial;
}

View File

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

View File

@@ -2,7 +2,7 @@ export default {
path: "/error",
redirect: "/error/403",
meta: {
icon: "information-line",
icon: "informationLine",
title: "异常页面",
rank: 9
},

View File

@@ -6,7 +6,7 @@ export default {
component: Layout,
redirect: "/welcome",
meta: {
icon: "home-filled",
icon: "homeFilled",
title: "首页",
rank: 0
},

View File

@@ -15,7 +15,7 @@ export default [
path: "/redirect",
component: Layout,
meta: {
icon: "home-filled",
icon: "homeFilled",
title: "首页",
showLink: false,
rank: 104

View File

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

View File

@@ -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 {
@@ -156,6 +65,19 @@ html.dark {
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;
@@ -168,5 +90,12 @@ html.dark {
pointer-events: all !important;
background-image: initial !important;
}
& .el-message__closeBtn {
&:hover {
color: rgba(255, 255, 255, 0.85);
background-color: rgba(255, 255, 255, 0.12);
}
}
}
}

View File

@@ -46,6 +46,12 @@
padding: 0 !important;
}
/* 自定义 tooltip 的类名 */
.pure-tooltip {
// 右侧操作面板right-panel类名的z-index为40000tooltip需要大于它才能显示
z-index: 41000 !important;
}
/* nprogress 适配 element-plus 的主题色 */
#nprogress {
& .bar {
@@ -63,6 +69,33 @@
}
}
/* 全局覆盖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;
@@ -86,6 +119,13 @@
}
& .el-message__closeBtn {
outline: none;
border-radius: 4px;
right: 9px !important;
transition: background-color 0.2s, color 0.2s;
&:hover {
background-color: rgba(0, 0, 0, 0.06);
}
}
}

View File

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

View File

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

View File

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

View File

@@ -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();
}
/** 格式化tokenjwt格式 */

View File

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

View File

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

View File

@@ -33,6 +33,7 @@ function onChange() {
.loginByUsername({ username: username.value, password: "admin123" })
.then(res => {
if (res.success) {
sessionStorage.removeItem("async-routes");
usePermissionStoreHook().clearAllCachePage();
initRouter();
}

View File

@@ -29,7 +29,6 @@
"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"]

25
types/global.d.ts vendored
View File

@@ -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;
/** 菜单升序排序,值越高排的越后(只针对顶级路由)`可选` */

2
types/index.d.ts vendored
View File

@@ -45,6 +45,8 @@ type TimeoutHandle = ReturnType<typeof setTimeout>;
type IntervalHandle = ReturnType<typeof setInterval>;
type Effect = "light" | "dark";
interface ChangeEvent extends Event {
target: HTMLInputElement;
}

View File

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