Browse Source

chore: 重构图标

i18n
xiaoxian521 3 years ago
parent
commit
d943550e10
  1. 2
      LICENSE
  2. 9
      README.en-US.md
  3. 8
      README.md
  4. 102
      build/plugins.ts
  5. 1
      index.html
  6. 5
      mock/asyncRoutes.ts
  7. 21
      package.json
  8. 242
      pnpm-lock.yaml
  9. 18
      public/iconfont.css
  10. BIN
      src/assets/car.png
  11. 0
      src/assets/login/illustration.svg
  12. 1
      src/assets/login/illustration0.svg
  13. 1
      src/assets/login/illustration1.svg
  14. 1
      src/assets/login/illustration3.svg
  15. 1
      src/assets/login/illustration4.svg
  16. 1
      src/assets/login/illustration5.svg
  17. 1
      src/assets/login/illustration6.svg
  18. 149
      src/components/ReIcon/index.ts
  19. 97
      src/components/ReIcon/src/Icon.vue
  20. 39
      src/components/ReIcon/src/hooks.ts
  21. 48
      src/components/ReIcon/src/iconfont.ts
  22. 25
      src/components/ReIcon/src/iconifyIconOffline.ts
  23. 8
      src/components/ReIcon/src/iconifyIconOnline.ts
  24. 6
      src/layout/components/navbar.vue
  25. 6
      src/layout/components/notice/data.ts
  26. 10
      src/layout/components/screenfull/index.vue
  27. 10
      src/layout/components/setting/index.vue
  28. 17
      src/layout/components/sidebar/horizontal.vue
  29. 13
      src/layout/components/sidebar/logo.vue
  30. 19
      src/layout/components/sidebar/sidebarItem.vue
  31. 3
      src/layout/components/sidebar/vertical.vue
  32. 28
      src/layout/components/tag/index.scss
  33. 27
      src/layout/components/tag/index.vue
  34. 4
      src/layout/theme/element-plus.ts
  35. 3
      src/layout/types.ts
  36. 15
      src/main.ts
  37. 26
      src/plugins/element-plus/index.ts
  38. 21
      src/plugins/fontawesome/index.ts
  39. 17
      src/plugins/i18n/en/menus.ts
  40. 17
      src/plugins/i18n/zh-CN/menus.ts
  41. 7
      src/router/modules/error.ts
  42. 2
      src/router/modules/externalLink.ts
  43. 4
      src/router/modules/home.ts
  44. 2
      src/router/utils.ts
  45. 3
      src/store/modules/multiTags.ts
  46. 3
      src/store/modules/user.ts
  47. 4
      src/style/login.css
  48. 21
      src/utils/algorithm/index.ts
  49. 54
      src/utils/loaders/index.ts
  50. 35
      src/utils/resize/index.ts
  51. 3
      src/utils/storage/responsive.ts
  52. 38
      src/views/login.vue
  53. 1
      types/global.d.ts
  54. 106
      vite.config.ts

2
LICENSE

@ -1,6 +1,6 @@
MIT License
Copyright (c) 2021 啝裳
Copyright (c) 2022 啝裳
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

9
README.en-US.md

@ -6,11 +6,16 @@
## introduce
The lite version is based on the shelf extracted from https://github.com/xiaoxian521/vue-pure-admin, which contains the main functions and is more suitable for actual project development
The lite version is based on the shelf extracted from [vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin), which contains the main functions and is more suitable for actual project development, the packaged size is only more than `2MB`
## Supporting Video
- [Click Watch Tutorial](https://www.bilibili.com/video/BV1534y1S7HV)
- [Click Watch UI Design](https://www.bilibili.com/video/BV17g411T7rq)
## Docs
<https://pure-admin-doc.vercel.app/>
- [Click Watch Docs](https://pure-admin-doc.vercel.app)
## Usage

8
README.md

@ -6,16 +6,16 @@
## 介绍
精简版是基于 https://github.com/xiaoxian521/vue-pure-admin 提炼出的架子,包含主体功能,更适合实际项目开发
精简版是基于[vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin)提炼出的架子,包含主体功能,更适合实际项目开发,打包后的大小仅 `2MB`
## 配套视频
教程:<https://www.bilibili.com/video/BV1534y1S7HV/>
UI 设计:<https://www.bilibili.com/video/BV17g411T7rq/>
- [点我查看教程](https://www.bilibili.com/video/BV1534y1S7HV)
- [点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)
## 配套文档
<https://pure-admin-doc.vercel.app/>
- [点我查看文档](https://pure-admin-doc.vercel.app)
## 维护者

102
build/plugins.ts

@ -0,0 +1,102 @@
import vue from "@vitejs/plugin-vue";
import svgLoader from "vite-svg-loader";
import legacy from "@vitejs/plugin-legacy";
import vueJsx from "@vitejs/plugin-vue-jsx";
import WindiCSS from "vite-plugin-windicss";
import { viteMockServe } from "vite-plugin-mock";
import liveReload from "vite-plugin-live-reload";
import ElementPlus from "unplugin-element-plus/vite";
import removeConsole from "vite-plugin-remove-console";
import themePreprocessorPlugin from "@zougt/vite-plugin-theme-preprocessor";
export function getPluginsList(command, VITE_LEGACY) {
const prodMock = true;
return [
vue(),
// jsx、tsx语法支持
vueJsx(),
WindiCSS(),
// 线上环境删除console
removeConsole(),
// 修改layout文件夹下的文件时自动重载浏览器 解决 https://github.com/xiaoxian521/vue-pure-admin/issues/170
liveReload(["src/layout/**/*", "src/router/**/*"]),
// 自定义主题
themePreprocessorPlugin({
scss: {
multipleScopeVars: [
{
scopeName: "layout-theme-default",
path: "src/layout/theme/default-vars.scss"
},
{
scopeName: "layout-theme-light",
path: "src/layout/theme/light-vars.scss"
},
{
scopeName: "layout-theme-dusk",
path: "src/layout/theme/dusk-vars.scss"
},
{
scopeName: "layout-theme-volcano",
path: "src/layout/theme/volcano-vars.scss"
},
{
scopeName: "layout-theme-yellow",
path: "src/layout/theme/yellow-vars.scss"
},
{
scopeName: "layout-theme-mingQing",
path: "src/layout/theme/mingQing-vars.scss"
},
{
scopeName: "layout-theme-auroraGreen",
path: "src/layout/theme/auroraGreen-vars.scss"
},
{
scopeName: "layout-theme-pink",
path: "src/layout/theme/pink-vars.scss"
},
{
scopeName: "layout-theme-saucePurple",
path: "src/layout/theme/saucePurple-vars.scss"
}
],
// 默认取 multipleScopeVars[0].scopeName
defaultScopeName: "",
// 在生产模式是否抽取独立的主题css文件,extract为true以下属性有效
extract: true,
// 独立主题css文件的输出路径,默认取 viteConfig.build.assetsDir 相对于 (viteConfig.build.outDir)
outputDir: "",
// 会选取defaultScopeName对应的主题css文件在html添加link
themeLinkTagId: "head",
// "head"||"head-prepend" || "body" ||"body-prepend"
themeLinkTagInjectTo: "head",
// 是否对抽取的css文件内对应scopeName的权重类名移除
removeCssScopeName: false,
// 可以自定义css文件名称的函数
customThemeCssFileName: scopeName => scopeName
}
}),
// svg组件化支持
svgLoader(),
ElementPlus({}),
// mock支持
viteMockServe({
mockPath: "mock",
localEnabled: command === "serve",
prodEnabled: command !== "serve" && prodMock,
injectCode: `
import { setupProdMockServer } from './mockProdServer';
setupProdMockServer();
`,
logger: true
}),
// 是否为打包后的文件提供传统浏览器兼容性支持
VITE_LEGACY
? legacy({
targets: ["ie >= 11"],
additionalLegacyPolyfills: ["regenerator-runtime/runtime"]
})
: null
];
}

1
index.html

@ -3,7 +3,6 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/iconfont.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>pure-admin-thin</title>
<script>

5
mock/asyncRoutes.ts

@ -9,7 +9,6 @@ const permissionRouter = {
title: "menus.permission",
icon: "lollipop",
i18n: true,
showLink: true,
rank: 3
},
children: [
@ -18,8 +17,7 @@ const permissionRouter = {
name: "permissionPage",
meta: {
title: "menus.permissionPage",
i18n: true,
showLink: true
i18n: true
}
},
{
@ -28,7 +26,6 @@ const permissionRouter = {
meta: {
title: "menus.permissionButton",
i18n: true,
showLink: true,
authority: []
}
}

21
package.json

@ -29,33 +29,27 @@
],
"dependencies": {
"@ctrl/tinycolor": "^3.4.0",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/vue-fontawesome": "^3.0.0-5",
"@vueuse/core": "^7.5.4",
"@vueuse/core": "^7.5.5",
"@vueuse/motion": "^2.0.0-beta.9",
"@vueuse/shared": "^7.5.4",
"@vueuse/shared": "^7.5.5",
"animate.css": "^4.1.1",
"axios": "^0.25.0",
"css-color-function": "^1.3.3",
"dayjs": "^1.10.7",
"element-plus": "1.3.0-beta.1",
"element-resize-detector": "^1.2.3",
"font-awesome": "^4.7.0",
"js-cookie": "^3.0.1",
"lodash-es": "^4.17.21",
"mitt": "^3.0.0",
"mockjs": "^1.1.0",
"nprogress": "^0.2.0",
"path": "^0.12.7",
"pinia": "^2.0.9",
"pinia": "^2.0.11",
"qs": "^6.10.2",
"remixicon": "^2.5.0",
"resize-observer-polyfill": "^1.5.1",
"responsive-storage": "^1.0.11",
"rgb-hex": "^4.0.0",
"vue": "^3.2.29",
"vue-i18n": "^9.2.0-beta.26",
"vue-i18n": "^9.2.0-beta.30",
"vue-router": "^4.0.12",
"vue-types": "^4.1.1"
},
@ -63,7 +57,10 @@
"@commitlint/cli": "13.1.0",
"@commitlint/config-conventional": "13.1.0",
"@iconify-icons/ep": "^1.1.3",
"@iconify/vue": "^3.1.2",
"@iconify-icons/fa": "^1.1.1",
"@iconify-icons/fa-solid": "^1.1.2",
"@iconify-icons/ri": "^1.1.1",
"@iconify/vue": "^3.1.3",
"@types/element-resize-detector": "1.1.3",
"@types/js-cookie": "^3.0.1",
"@types/mockjs": "1.0.3",
@ -78,7 +75,7 @@
"@vue/eslint-config-prettier": "6.0.0",
"@vue/eslint-config-typescript": "7.0.0",
"@zougt/vite-plugin-theme-preprocessor": "^1.4.4",
"autoprefixer": "10.2.4",
"autoprefixer": "^10.4.2",
"cross-env": "7.0.3",
"eslint": "7.30.0",
"eslint-plugin-prettier": "3.4.0",

242
pnpm-lock.yaml

@ -4,11 +4,11 @@ specifiers:
"@commitlint/cli": 13.1.0
"@commitlint/config-conventional": 13.1.0
"@ctrl/tinycolor": ^3.4.0
"@fortawesome/fontawesome-svg-core": ^1.2.36
"@fortawesome/free-solid-svg-icons": ^5.15.4
"@fortawesome/vue-fontawesome": ^3.0.0-5
"@iconify-icons/ep": ^1.1.3
"@iconify/vue": ^3.1.2
"@iconify-icons/fa": ^1.1.1
"@iconify-icons/fa-solid": ^1.1.2
"@iconify-icons/ri": ^1.1.1
"@iconify/vue": ^3.1.3
"@types/element-resize-detector": 1.1.3
"@types/js-cookie": ^3.0.1
"@types/mockjs": 1.0.3
@ -22,22 +22,20 @@ specifiers:
"@vitejs/plugin-vue-jsx": ^1.3.3
"@vue/eslint-config-prettier": 6.0.0
"@vue/eslint-config-typescript": 7.0.0
"@vueuse/core": ^7.5.4
"@vueuse/core": ^7.5.5
"@vueuse/motion": ^2.0.0-beta.9
"@vueuse/shared": ^7.5.4
"@vueuse/shared": ^7.5.5
"@zougt/vite-plugin-theme-preprocessor": ^1.4.4
animate.css: ^4.1.1
autoprefixer: 10.2.4
autoprefixer: ^10.4.2
axios: ^0.25.0
cross-env: 7.0.3
css-color-function: ^1.3.3
dayjs: ^1.10.7
element-plus: 1.3.0-beta.1
element-resize-detector: ^1.2.3
eslint: 7.30.0
eslint-plugin-prettier: 3.4.0
eslint-plugin-vue: 7.17.0
font-awesome: ^4.7.0
husky: 7.0.2
js-cookie: ^3.0.1
lint-staged: 11.1.2
@ -46,13 +44,12 @@ specifiers:
mockjs: ^1.1.0
nprogress: ^0.2.0
path: ^0.12.7
pinia: ^2.0.9
pinia: ^2.0.11
postcss: 8.2.6
postcss-import: 14.0.0
prettier: 2.3.2
pretty-quick: 3.1.1
qs: ^6.10.2
remixicon: ^2.5.0
resize-observer-polyfill: ^1.5.1
responsive-storage: ^1.0.11
rgb-hex: ^4.0.0
@ -74,40 +71,34 @@ specifiers:
vite-svg-loader: 2.2.0
vue: ^3.2.29
vue-eslint-parser: 7.10.0
vue-i18n: ^9.2.0-beta.26
vue-i18n: ^9.2.0-beta.30
vue-router: ^4.0.12
vue-types: ^4.1.1
windicss: ^3.4.3
dependencies:
"@ctrl/tinycolor": 3.4.0
"@fortawesome/fontawesome-svg-core": 1.2.36
"@fortawesome/free-solid-svg-icons": 5.15.4
"@fortawesome/vue-fontawesome": 3.0.0-5_4b3cf360b23a80d0edd7a261c1792cec
"@vueuse/core": 7.5.4_vue@3.2.29
"@vueuse/core": 7.5.5_vue@3.2.29
"@vueuse/motion": 2.0.0-beta.9_vue@3.2.29
"@vueuse/shared": 7.5.4_vue@3.2.29
"@vueuse/shared": 7.5.5_vue@3.2.29
animate.css: 4.1.1
axios: 0.25.0
css-color-function: 1.3.3
dayjs: 1.10.7
element-plus: 1.3.0-beta.1_vue@3.2.29
element-resize-detector: 1.2.4
font-awesome: 4.7.0
js-cookie: 3.0.1
lodash-es: 4.17.21
mitt: 3.0.0
mockjs: 1.1.0
nprogress: 0.2.0
path: 0.12.7
pinia: 2.0.9_typescript@4.5.5+vue@3.2.29
pinia: 2.0.11_typescript@4.5.5+vue@3.2.29
qs: 6.10.3
remixicon: 2.5.0
resize-observer-polyfill: 1.5.1
responsive-storage: 1.0.11_vue@3.2.29
rgb-hex: 4.0.0
vue: 3.2.29
vue-i18n: 9.2.0-beta.28_vue@3.2.29
vue-i18n: 9.2.0-beta.30_vue@3.2.29
vue-router: 4.0.12_vue@3.2.29
vue-types: 4.1.1_vue@3.2.29
@ -115,7 +106,10 @@ devDependencies:
"@commitlint/cli": 13.1.0
"@commitlint/config-conventional": 13.1.0
"@iconify-icons/ep": 1.1.3
"@iconify/vue": 3.1.2_vue@3.2.29
"@iconify-icons/fa": 1.1.1
"@iconify-icons/fa-solid": 1.1.2
"@iconify-icons/ri": 1.1.1
"@iconify/vue": 3.1.3_vue@3.2.29
"@types/element-resize-detector": 1.1.3
"@types/js-cookie": 3.0.1
"@types/mockjs": 1.0.3
@ -130,7 +124,7 @@ devDependencies:
"@vue/eslint-config-prettier": 6.0.0_82e4252401b0cc5be86f7c2133946f49
"@vue/eslint-config-typescript": 7.0.0_e03d82996bd4a66fb128f33523d782ea
"@zougt/vite-plugin-theme-preprocessor": 1.4.4_sass@1.49.0
autoprefixer: 10.2.4_postcss@8.2.6
autoprefixer: 10.4.2_postcss@8.2.6
cross-env: 7.0.3
eslint: 7.30.0
eslint-plugin-prettier: 3.4.0_eslint@7.30.0+prettier@2.3.2
@ -820,50 +814,6 @@ packages:
- supports-color
dev: true
/@fortawesome/fontawesome-common-types/0.2.36:
resolution:
{
integrity: sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
}
engines: { node: ">=6" }
requiresBuild: true
dev: false
/@fortawesome/fontawesome-svg-core/1.2.36:
resolution:
{
integrity: sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==
}
engines: { node: ">=6" }
requiresBuild: true
dependencies:
"@fortawesome/fontawesome-common-types": 0.2.36
dev: false
/@fortawesome/free-solid-svg-icons/5.15.4:
resolution:
{
integrity: sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==
}
engines: { node: ">=6" }
requiresBuild: true
dependencies:
"@fortawesome/fontawesome-common-types": 0.2.36
dev: false
/@fortawesome/vue-fontawesome/3.0.0-5_4b3cf360b23a80d0edd7a261c1792cec:
resolution:
{
integrity: sha512-aNmBT4bOecrFsZTog1l6AJDQHPP3ocXV+WQ3Ogy8WZCqstB/ahfhH4CPu5i4N9Hw0MBKXqE+LX+NbUxcj8cVTw==
}
peerDependencies:
"@fortawesome/fontawesome-svg-core": ~1 || >=1.3.0-beta1
vue: ">= 3.0.0 < 4"
dependencies:
"@fortawesome/fontawesome-svg-core": 1.2.36
vue: 3.2.29
dev: false
/@humanwhocodes/config-array/0.5.0:
resolution:
{
@ -892,10 +842,31 @@ packages:
}
dev: true
/@iconify/vue/3.1.2_vue@3.2.29:
/@iconify-icons/fa-solid/1.1.2:
resolution:
{
integrity: sha512-c777kFKOaEpiJCwz5lOgETWZnq4lEermMQ0RBCzTyRaGC/lmvw2SLF7aJQGri1sGFt4Z5GuXpnlX4DNf3aN+qA==
integrity: sha512-gEuga4NzsAYaWLib425umOOemA++xX3NQJqqIbZmMD8o2/8dDVj+rrYklvZYXb3MHwKa+POToz/85hiBx8GSsg==
}
dev: true
/@iconify-icons/fa/1.1.1:
resolution:
{
integrity: sha512-M5VkRSNA93gQCGRh1qTDKcs8f7Rp4NyNDnWAGVQbXHPIDMYCwARfS8egOKbTmlpjkqw6+Gw8l5jnKt0XErscng==
}
dev: true
/@iconify-icons/ri/1.1.1:
resolution:
{
integrity: sha512-/n8BEfAET0B2z/WWqOg+stSg2hZU9vvc3KKJXS48Inmlh0Vwyjx2T4qVBRmK/KAWwuzv5yHQELATbbeiV8fvLA==
}
dev: true
/@iconify/vue/3.1.3_vue@3.2.29:
resolution:
{
integrity: sha512-tZ7+mh2HDy8pj7dajByn4bE72XIZM3l+F490VIAAYifwpqGnjqv9O60n1MPsV5dM7Q+FN6yVXZMdXT68l//WTw==
}
peerDependencies:
vue: 3.x
@ -906,57 +877,57 @@ packages:
- encoding
dev: true
/@intlify/core-base/9.2.0-beta.28:
/@intlify/core-base/9.2.0-beta.30:
resolution:
{
integrity: sha512-p7iXwVQFyBmEo65KoqRCbT6Ig3OI6rnaS/zeMCKtp6Bjsbg35VGAaiN05Eyrq78BCh2Ir1S6nl+Cz3y00D0yoQ==
integrity: sha512-tnOuI8gs4S7vv4WjG8oFL7vbZ4PM7Is/Ld3lRHQlBO7UjpnCVcQ94AgP/4F0cUPFn9JSPMQRN0aOOahW1BXvSA==
}
engines: { node: ">= 12" }
dependencies:
"@intlify/devtools-if": 9.2.0-beta.28
"@intlify/message-compiler": 9.2.0-beta.28
"@intlify/shared": 9.2.0-beta.28
"@intlify/vue-devtools": 9.2.0-beta.28
"@intlify/devtools-if": 9.2.0-beta.30
"@intlify/message-compiler": 9.2.0-beta.30
"@intlify/shared": 9.2.0-beta.30
"@intlify/vue-devtools": 9.2.0-beta.30
dev: false
/@intlify/devtools-if/9.2.0-beta.28:
/@intlify/devtools-if/9.2.0-beta.30:
resolution:
{
integrity: sha512-3RL38hDBRipipoYRl4Ggu98M4/XqDKm0jW8kcOWpuocB/aZBBEGzoQfeaq09Xa9SA46podjntBlYDAOGQyXqqg==
integrity: sha512-3OxGFi6ooya9DFqX/JsxFjrj9nGYcDoo4CRGYSDqnC+xv4bnsyB5ekmaYBiVZtagCdZdSUMxbTFphl1WbtgNLQ==
}
engines: { node: ">= 12" }
dependencies:
"@intlify/shared": 9.2.0-beta.28
"@intlify/shared": 9.2.0-beta.30
dev: false
/@intlify/message-compiler/9.2.0-beta.28:
/@intlify/message-compiler/9.2.0-beta.30:
resolution:
{
integrity: sha512-NBH9fZyitN2cijGt8bmU1W7ZPdhKbgW01L1RxJKFJW0cRaCmknJq63Aif1Q6xcxKt9ZhPbvIKHgPGzg1nWMfeA==
integrity: sha512-2kj/0nLIFrgiO86f9VifcUUcV8LdzXt4YYPIujx/LkTEQOuSFUo/bNiMaG1hyfiU/8mfq6tsaWKjoOZjeao1eQ==
}
engines: { node: ">= 12" }
dependencies:
"@intlify/shared": 9.2.0-beta.28
"@intlify/shared": 9.2.0-beta.30
source-map: 0.6.1
dev: false
/@intlify/shared/9.2.0-beta.28:
/@intlify/shared/9.2.0-beta.30:
resolution:
{
integrity: sha512-JBMcoj1D4kSAma7Vb0+d8z6lPLIn7hIdZJPxbU8bgeMMniwKLoIS/jGlEfrZihsB5+otckPeQp203z8skwVS0w==
integrity: sha512-E1WHRTIlUEse3d/6t1pAagSXRxmeVeNIhx5kT80dfpYxw8lOnCWV9wLve2bq9Fkv+3TD2I5j+CdN7jvSl3LdsA==
}
engines: { node: ">= 12" }
dev: false
/@intlify/vue-devtools/9.2.0-beta.28:
/@intlify/vue-devtools/9.2.0-beta.30:
resolution:
{
integrity: sha512-kf9Gt64sjP1fJQHUlB3m/RFDeJBcrvRImcEl6g0BV13K/xyA9u9RGM89YpR16F5KKTXdhpkvroLWh2uo4pc6jg==
integrity: sha512-hcqDfwP/oXVmVCaJ0RA+uv1WSCcd42/Y13S0bySmWZv2KamLcxiD7wYxp/MaECG/D4KZcSLkq/wDHTG7lhYf5Q==
}
engines: { node: ">= 12" }
dependencies:
"@intlify/core-base": 9.2.0-beta.28
"@intlify/shared": 9.2.0-beta.28
"@intlify/core-base": 9.2.0-beta.30
"@intlify/shared": 9.2.0-beta.30
dev: false
/@nodelib/fs.scandir/2.1.5:
@ -1438,7 +1409,7 @@ packages:
"@vue/shared": 3.2.29
estree-walker: 2.0.2
magic-string: 0.25.7
postcss: 8.2.6
postcss: 8.4.5
source-map: 0.6.1
/@vue/compiler-ssr/3.2.29:
@ -1555,10 +1526,10 @@ packages:
integrity: sha512-BjNpU8OK6Z0LVzGUppEk0CMYm/hKDnZfYdjSmPOs0N+TR1cLKJAkDwW8ASZUvaaSLEi6d3hVM7jnWnX+6yWnHw==
}
/@vueuse/core/7.5.4_vue@3.2.29:
/@vueuse/core/7.5.5_vue@3.2.29:
resolution:
{
integrity: sha512-PKmyHN2lZuttGgKmsoMMqiSojSYYKraszilP0gpQIGcLt2YoLABaG3VFjdPs2tY6DM+HG3o70HuzOMEQCY8fqQ==
integrity: sha512-RBDqmIoGfak4h3xdXa/Av+ibkb8NY044wEy6+PG2FAWNaID8/FkqmSFjbxogrbmpSX1yZ1PBHrM8DUp/FrIpbg==
}
peerDependencies:
"@vue/composition-api": ^1.1.0
@ -1569,7 +1540,7 @@ packages:
vue:
optional: true
dependencies:
"@vueuse/shared": 7.5.4_vue@3.2.29
"@vueuse/shared": 7.5.5_vue@3.2.29
vue: 3.2.29
vue-demi: 0.12.1_vue@3.2.29
dev: false
@ -1586,16 +1557,16 @@ packages:
"@vue/composition-api":
optional: true
dependencies:
"@vueuse/core": 7.5.4_vue@3.2.29
"@vueuse/core": 7.5.5_vue@3.2.29
popmotion: 11.0.3
vue: 3.2.29
vue-demi: 0.12.1_vue@3.2.29
dev: false
/@vueuse/shared/7.5.4_vue@3.2.29:
/@vueuse/shared/7.5.5_vue@3.2.29:
resolution:
{
integrity: sha512-750RnGUEgg1+K4jGVkv7M5UOStAa/IjAInV6BugyBOvRYL2l1lcIDUi4V/qIKTlhd2oUAByCEnlqIpFD2a3tfw==
integrity: sha512-mzzTsotHQRPnPAChy8iCv6ek/90CKYhAFyMRgNsMxpT0afZJkbMO/X0OaOu/1NuGbgb8UVjlsWKmCUgKTOF5hA==
}
peerDependencies:
"@vue/composition-api": ^1.1.0
@ -1617,7 +1588,7 @@ packages:
}
dependencies:
debug: 4.3.3
jiti: 1.12.9
jiti: 1.12.14
windicss: 3.4.3
transitivePeerDependencies:
- supports-color
@ -1873,10 +1844,10 @@ packages:
}
dev: false
/autoprefixer/10.2.4_postcss@8.2.6:
/autoprefixer/10.4.2_postcss@8.2.6:
resolution:
{
integrity: sha512-DCCdUQiMD+P/as8m3XkeTUkUKuuRqLGcwD0nll7wevhqoJfMRpJlkFd1+MQh1pvupjiQuip42lc/VFvfUTMSKw==
integrity: sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==
}
engines: { node: ^10 || ^12 || >=14 }
hasBin: true
@ -1884,10 +1855,10 @@ packages:
postcss: ^8.1.0
dependencies:
browserslist: 4.19.1
caniuse-lite: 1.0.30001301
colorette: 1.4.0
caniuse-lite: 1.0.30001303
fraction.js: 4.1.2
normalize-range: 0.1.2
picocolors: 1.0.0
postcss: 8.2.6
postcss-value-parser: 4.2.0
dev: true
@ -1900,7 +1871,7 @@ packages:
hasBin: true
dependencies:
browserslist: 4.19.1
caniuse-lite: 1.0.30001301
caniuse-lite: 1.0.30001303
normalize-range: 0.1.2
num2fraction: 1.2.2
picocolors: 0.2.1
@ -1988,8 +1959,8 @@ packages:
engines: { node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7 }
hasBin: true
dependencies:
caniuse-lite: 1.0.30001301
electron-to-chromium: 1.4.51
caniuse-lite: 1.0.30001303
electron-to-chromium: 1.4.54
escalade: 3.1.1
node-releases: 2.0.1
picocolors: 1.0.0
@ -2081,15 +2052,15 @@ packages:
}
dependencies:
browserslist: 4.19.1
caniuse-lite: 1.0.30001301
caniuse-lite: 1.0.30001303
lodash.memoize: 4.1.2
lodash.uniq: 4.5.0
dev: true
/caniuse-lite/1.0.30001301:
/caniuse-lite/1.0.30001303:
resolution:
{
integrity: sha512-csfD/GpHMqgEL3V3uIgosvh+SVIQvCh43SNu9HRbP1lnxkKm1kjDG4f32PP571JplkLjfS+mg2p1gxR7MYrrIA==
integrity: sha512-/Mqc1oESndUNszJP0kx0UaQU9kEv9nNtJ7Kn8AdA0mNnH8eR1cj0kG+NbNuC1Wq/b21eA8prhKRA3bbkjONegQ==
}
dev: true
@ -2333,6 +2304,7 @@ packages:
{
integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==
}
dev: true
/colorette/2.0.16:
resolution:
@ -2873,10 +2845,10 @@ packages:
resolution: { integrity: sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0= }
dev: true
/electron-to-chromium/1.4.51:
/electron-to-chromium/1.4.54:
resolution:
{
integrity: sha512-JNEmcYl3mk1tGQmy0EvL5eik/CKSBuzAyGP0QFdG6LIgxQe3II0BL1m2zKc2MZMf3uGqHWE1TFddJML0RpjSHQ==
integrity: sha512-jRAoneRdSxnpRHO0ANpnEUtQHXxlgfVjrLOnQSisw1ryjXJXvS0pJaR/v2B7S++/tRjgEDp4Sjn5nmgb6uTySw==
}
dev: true
@ -2891,7 +2863,7 @@ packages:
"@ctrl/tinycolor": 3.4.0
"@element-plus/icons-vue": 0.2.6_vue@3.2.29
"@popperjs/core": 2.11.2
"@vueuse/core": 7.5.4_vue@3.2.29
"@vueuse/core": 7.5.5_vue@3.2.29
async-validator: 4.0.7
dayjs: 1.10.7
lodash: 4.17.21
@ -3635,14 +3607,14 @@ packages:
}
engines: { node: ^10.12.0 || >=12.0.0 }
dependencies:
flatted: 3.2.4
flatted: 3.2.5
rimraf: 3.0.2
dev: true
/flatted/3.2.4:
/flatted/3.2.5:
resolution:
{
integrity: sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw==
integrity: sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
}
dev: true
@ -3659,11 +3631,6 @@ packages:
optional: true
dev: false
/font-awesome/4.7.0:
resolution: { integrity: sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM= }
engines: { node: ">=0.10.3" }
dev: false
/fraction.js/4.1.2:
resolution:
{
@ -4296,10 +4263,10 @@ packages:
resolution: { integrity: sha1-6PvzdNxVb/iUehDcsFctYz8s+hA= }
dev: true
/jiti/1.12.9:
/jiti/1.12.14:
resolution:
{
integrity: sha512-TdcJywkQtcwLxogc4rSMAi479G2eDPzfW0fLySks7TPhgZZ4s/tM6stnzayIh3gS/db3zExWJyUx4cNWrwAmoQ==
integrity: sha512-rR+9GYXtYiIod1x+EHFYcTyqIPG4cAHG3WYGHkk71MVjzPCJwOI4E27BPOXQhUf1viglcLtqj3WotFIOJQwM+g==
}
hasBin: true
dev: true
@ -5241,7 +5208,6 @@ packages:
{
integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
}
dev: true
/picomatch/2.3.1:
resolution:
@ -5256,10 +5222,10 @@ packages:
engines: { node: ">=0.10.0" }
dev: true
/pinia/2.0.9_typescript@4.5.5+vue@3.2.29:
/pinia/2.0.11_typescript@4.5.5+vue@3.2.29:
resolution:
{
integrity: sha512-iuYdxLJKQ07YPyOHYH05wNG9eKWqkP/4y4GE8+RqEYtz5fwHgPA5kr6zQbg/DoEJGnR2XCm1w1vdt6ppzL9ATg==
integrity: sha512-JzcmnMqu28PNWOjDgEDK6fTrIzX8eQZKPPKvu/fpHdpXARUj1xeVdFi3YFIMOWswqaBd589cpmAMdSSTryI9iw==
}
peerDependencies:
"@vue/composition-api": ^1.4.0
@ -5798,6 +5764,7 @@ packages:
colorette: 1.4.0
nanoid: 3.2.0
source-map: 0.6.1
dev: true
/postcss/8.4.5:
resolution:
@ -5809,7 +5776,6 @@ packages:
nanoid: 3.2.0
picocolors: 1.0.0
source-map-js: 1.0.2
dev: true
/prelude-ls/1.2.1:
resolution:
@ -6039,13 +6005,6 @@ packages:
- supports-color
dev: true
/remixicon/2.5.0:
resolution:
{
integrity: sha512-q54ra2QutYDZpuSnFjmeagmEiN9IMo56/zz5dDNitzKD23oFRw77cWo4TsrAdmdkPiEn8mxlrTqxnkujDbEGww==
}
dev: false
/repeat-string/1.6.1:
resolution: { integrity: sha1-jcrkcOHIirwtYA//Sndihtp15jc= }
engines: { node: ">=0.10" }
@ -6169,10 +6128,10 @@ packages:
glob: 7.2.0
dev: true
/rollup/2.66.0:
/rollup/2.66.1:
resolution:
{
integrity: sha512-L6mKOkdyP8HK5kKJXaiWG7KZDumPJjuo1P+cfyHOJPNNTK3Moe7zCH5+fy7v8pVmHXtlxorzaBjvkBMB23s98g==
integrity: sha512-crSgLhSkLMnKr4s9iZ/1qJCplgAgrRY+igWv8KhG/AjKOJ0YX/WpmANyn8oxrw+zenF3BXWDLa7Xl/QZISH+7w==
}
engines: { node: ">=10.0.0" }
hasBin: true
@ -6381,7 +6340,6 @@ packages:
integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
}
engines: { node: ">=0.10.0" }
dev: true
/source-map-support/0.5.21:
resolution:
@ -7015,7 +6973,7 @@ packages:
"@rollup/pluginutils": 4.1.2
es-module-lexer: 0.9.3
magic-string: 0.25.7
unplugin: 0.3.1_vite@2.7.13
unplugin: 0.3.2_vite@2.7.13
vue: 3.2.29
transitivePeerDependencies:
- esbuild
@ -7024,10 +6982,10 @@ packages:
- webpack
dev: true
/unplugin/0.3.1_vite@2.7.13:
/unplugin/0.3.2_vite@2.7.13:
resolution:
{
integrity: sha512-AKagqOA5un8rT0vIoCyQ7ii1XcwAOynLYUmmd+DeyQdT9AkYtmRlk4eEsb0HOtovrufxGprOPOol1CwBTI4HRw==
integrity: sha512-5d0DMYNKZU+S9eZUiBfw6Co32eRg8myUgBPoWSqG/wDFCUE/WznfSsJnZWi1P9l69x4uLJqt2qVq1xW/AsXFrw==
}
peerDependencies:
esbuild: ">=0.13"
@ -7251,7 +7209,7 @@ packages:
esbuild: 0.13.15
postcss: 8.4.5
resolve: 1.22.0
rollup: 2.66.0
rollup: 2.66.1
sass: 1.49.0
optionalDependencies:
fsevents: 2.3.2
@ -7296,18 +7254,18 @@ packages:
- supports-color
dev: true
/vue-i18n/9.2.0-beta.28_vue@3.2.29:
/vue-i18n/9.2.0-beta.30_vue@3.2.29:
resolution:
{
integrity: sha512-Jn7DHA3JgOYaB6ahqmuW0wQ2zZx0ivastVDUul8325geyT0Q4PblJvXvfWHi2L0eb+YjWMZvf30MQYJ1FWDlfQ==
integrity: sha512-5DqrgG9ffgC7j3RRAfViC0WUcdz0C3Ix1qq1AyQItpF7UkSB6iSJGEjBG6KdspbRQq/8t1YzDx4JRXbL05l6ow==
}
engines: { node: ">= 12" }
peerDependencies:
vue: ^3.0.0
dependencies:
"@intlify/core-base": 9.2.0-beta.28
"@intlify/shared": 9.2.0-beta.28
"@intlify/vue-devtools": 9.2.0-beta.28
"@intlify/core-base": 9.2.0-beta.30
"@intlify/shared": 9.2.0-beta.30
"@intlify/vue-devtools": 9.2.0-beta.30
"@vue/devtools-api": 6.0.0-beta.21.1
vue: 3.2.29
dev: false

18
public/iconfont.css

@ -1,18 +0,0 @@
@font-face {
font-family: "iconfont"; /* project id 1098500 */
src: url("//at.alicdn.com/t/font_1098500_3d6un9zwltz.eot");
src: url("//at.alicdn.com/t/font_1098500_3d6un9zwltz.eot?#iefix")
format("embedded-opentype"),
url("//at.alicdn.com/t/font_1098500_3d6un9zwltz.woff2") format("woff2"),
url("//at.alicdn.com/t/font_1098500_3d6un9zwltz.woff") format("woff"),
url("//at.alicdn.com/t/font_1098500_3d6un9zwltz.ttf") format("truetype"),
url("//at.alicdn.com/t/font_1098500_3d6un9zwltz.svg#iconfont") format("svg");
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

BIN
src/assets/car.png

Before

Width: 36  |  Height: 20  |  Size: 1.4 KiB

0
src/assets/login/illustration2.svg → src/assets/login/illustration.svg

1
src/assets/login/illustration0.svg
File diff suppressed because it is too large
View File

1
src/assets/login/illustration1.svg
File diff suppressed because it is too large
View File

1
src/assets/login/illustration3.svg
File diff suppressed because it is too large
View File

1
src/assets/login/illustration4.svg
File diff suppressed because it is too large
View File

1
src/assets/login/illustration5.svg
File diff suppressed because it is too large
View File

1
src/assets/login/illustration6.svg
File diff suppressed because it is too large
View File

149
src/components/ReIcon/index.ts

@ -1,154 +1,13 @@
import { h, App, defineComponent } from "vue";
import icon from "./src/Icon.vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import iconifyIconOffline from "./src/iconifyIconOffline";
import iconifyIconOnline from "./src/iconifyIconOnline";
/**
* find icon component
* @param icon icon图标
* @returns component
*/
export function findIconReg(icon: string) {
// fontawesome4
const fa4Reg = /^fa-/;
// fontawesome5+
const fa5Reg = /^FA-/;
// iconfont
const iFReg = /^IF-/;
// remixicon
const riReg = /^RI-/;
// typeof icon === "function" 属于SVG
if (fa5Reg.test(icon)) {
const text = icon.split(fa5Reg)[1];
return findIcon(
text.slice(0, text.indexOf(" ") == -1 ? text.length : text.indexOf(" ")),
"FA",
text.slice(text.indexOf(" ") + 1, text.length)
);
} else if (fa4Reg.test(icon)) {
return findIcon(icon.split(fa4Reg)[1], "fa");
} else if (iFReg.test(icon)) {
return findIcon(icon.split(iFReg)[1], "IF");
} else if (typeof icon === "function") {
return findIcon(icon, "SVG");
} else if (riReg.test(icon)) {
return findIcon(icon.split(riReg)[1], "RI");
} else {
return findIcon(icon, "EL");
}
}
// 支持fontawesome、iconfont、remixicon、element-plus/icons、自定义svg
export function findIcon(icon: String, type = "EL", property?: string) {
if (type === "FA") {
return defineComponent({
name: "FaIcon",
data() {
return { icon, property };
},
components: { FontAwesomeIcon },
render() {
return h(
FontAwesomeIcon,
{
icon: `${this.icon}`,
[property]: true
},
{
default: () => []
}
);
}
});
} else if (type === "fa") {
return defineComponent({
name: "faIcon",
data() {
return { icon: `fa ${icon}` };
},
render() {
return h(
"i",
{
class: `${this.icon}`
},
{
default: () => []
}
);
}
});
} else if (type === "IF") {
return defineComponent({
name: "IfIcon",
data() {
return { icon: `iconfont ${icon}` };
},
render() {
return h(
"i",
{
class: `${this.icon}`
},
{
default: () => []
}
);
}
});
} else if (type === "RI") {
return defineComponent({
name: "RiIcon",
data() {
return { icon: `ri-${icon}` };
},
render() {
return h(
"i",
{
class: `${this.icon}`
},
{
default: () => []
}
);
}
});
} else if (type === "EL") {
return defineComponent({
name: "ElIcon",
data() {
return { icon };
},
render() {
return h(
IconifyIconOffline,
{
icon: `${this.icon}`
},
{
default: () => []
}
);
}
});
} else if (type === "SVG") {
return icon;
}
}
export const Icon = Object.assign(icon, {
install(app: App) {
app.component(icon.name, icon);
}
});
import fontIcon from "./src/iconfont";
export const IconifyIconOffline = iconifyIconOffline;
export const IconifyIconOnline = iconifyIconOnline;
export const FontIcon = fontIcon;
export default {
Icon,
IconifyIconOffline,
IconifyIconOnline
IconifyIconOnline,
FontIcon
};

97
src/components/ReIcon/src/Icon.vue

@ -1,97 +0,0 @@
<script lang="ts">
export default {
name: "Icon"
};
</script>
<script setup lang="ts">
import { ref, computed } from "vue";
const props = defineProps({
content: {
type: String,
default: ""
},
size: {
type: Number,
default: 18
},
width: {
type: Number,
default: 20
},
height: {
type: Number,
default: 20
},
color: {
type: String,
default: ""
},
svg: {
type: Boolean,
default: false
}
});
const emit = defineEmits<{
(e: "click"): void;
}>();
let text = ref("");
let className = computed(() => {
if (props.content.indexOf("fa-") > -1) {
return props.content.indexOf("fa ") === 0
? props.content
: ["fa", props.content];
} else if (props.content.indexOf("el-icon-") > -1) {
return props.content;
} else if (props.content.indexOf("#") > -1) {
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
text.value = props.content;
return "iconfont";
} else {
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
text.value = props.content;
return "";
}
});
let iconStyle = computed(() => {
return (
"font-size: " +
props.size +
"px; color: " +
props.color +
"; width: " +
props.width +
"px; height: " +
props.height +
"px; font-style: normal;"
);
});
const clickHandle = () => {
emit("click");
};
</script>
<template>
<i
v-if="!props.svg"
:class="className"
:style="iconStyle"
v-html="text"
@click="clickHandle"
></i>
<svg
class="icon-svg"
v-if="props.svg"
aria-hidden="true"
:style="iconStyle"
@click="clickHandle"
>
<use :xlink:href="`#${props.content}`" />
</svg>
</template>

39
src/components/ReIcon/src/hooks.ts

@ -0,0 +1,39 @@
import { h, defineComponent, Component } from "vue";
import { IconifyIconOffline, FontIcon } from "../index";
// 支持fontawesome4、5+、iconfont、remixicon、element-plus的icons、自定义svg
export function useRenderIcon(icon: string): Component {
// iconfont
const ifReg = /^IF-/;
// typeof icon === "function" 属于SVG
if (ifReg.test(icon)) {
// iconfont
const name = icon.split(ifReg)[1];
const iconName = name.slice(
0,
name.indexOf(" ") == -1 ? name.length : name.indexOf(" ")
);
const iconType = name.slice(name.indexOf(" ") + 1, name.length);
return defineComponent({
name: "FontIcon",
render() {
return h(FontIcon, {
icon: iconName,
iconType
});
}
});
} else if (typeof icon === "function") {
// svg
return icon;
} else {
return defineComponent({
name: "Icon",
render() {
return h(IconifyIconOffline, {
icon: icon
});
}
});
}
}

48
src/components/ReIcon/src/iconfont.ts

@ -0,0 +1,48 @@
import { h, defineComponent } from "vue";
// 封装iconfont组件,默认`font-class`引用模式,支持`unicode`引用、`font-class`引用、`symbol`引用 (https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.20&helptype=code)
export default defineComponent({
name: "fontIcon",
props: {
icon: {
type: String,
default: ""
}
},
render() {
const attrs = this.$attrs;
if (Object.keys(attrs).includes("uni") || attrs?.iconType === "uni") {
return h(
"i",
{
class: "iconfont",
...attrs
},
this.icon
);
} else if (
Object.keys(attrs).includes("svg") ||
attrs?.iconType === "svg"
) {
return h(
"svg",
{
class: "icon-svg",
"aria-hidden": true
},
{
default: () => [
h("use", {
"xlink:href": `#${this.icon}`
})
]
}
);
} else {
return h("i", {
class: `iconfont ${this.icon}`,
...attrs
});
}
}
});

25
src/components/ReIcon/src/iconifyIconOffline.ts

@ -1,5 +1,7 @@
import { h, defineComponent } from "vue";
import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline";
// element-plus icon
import Check from "@iconify-icons/ep/check";
import Menu from "@iconify-icons/ep/menu";
import HomeFilled from "@iconify-icons/ep/home-filled";
@ -45,8 +47,23 @@ addIcon("tickets", Tickets);
addIcon("office-building", OfficeBuilding);
addIcon("notebook", Notebook);
// Iconify Icon在Vue里离线使用(用于内网环境)
// https://docs.iconify.design/icon-components/vue/offline.html
// 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";
addIcon("arrow-right-s-line", arrowRightSLine);
addIcon("arrow-left-s-line", arrowLeftSLine);
addIcon("logout-circle-r-line", logoutCircleRLine);
// Font Awesome 4
import faUser from "@iconify-icons/fa/user";
import faLock from "@iconify-icons/fa/lock";
import faSignOut from "@iconify-icons/fa/sign-out";
addIcon("fa-user", faUser);
addIcon("fa-lock", faLock);
addIcon("fa-sign-out", faSignOut);
// Iconify Icon在Vue里离线使用(用于内网环境)https://docs.iconify.design/icon-components/vue/offline.html
export default defineComponent({
name: "IconifyIcon",
components: { IconifyIcon },
@ -57,10 +74,12 @@ export default defineComponent({
}
},
render() {
const attrs = this.$attrs;
return h(
IconifyIcon,
{
icon: `${this.icon}`
icon: `${this.icon}`,
...attrs
},
{
default: () => []

8
src/components/ReIcon/src/iconifyIconOnline.ts

@ -1,8 +1,7 @@
import { h, defineComponent } from "vue";
import { Icon as IconifyIcon } from "@iconify/vue";
// Iconify Icon在Vue里在线使用(用于外网环境)
// https://docs.iconify.design/icon-components/vue/offline.html
// Iconify Icon在Vue里在线使用(用于外网环境) https://docs.iconify.design/icon-components/vue/offline.html
export default defineComponent({
name: "IconifyIcon",
components: { IconifyIcon },
@ -11,16 +10,19 @@ export default defineComponent({
type: String,
default: ""
},
// default element plus icon
type: {
type: String,
default: "ep:"
}
},
render() {
const attrs = this.$attrs;
return h(
IconifyIcon,
{
icon: `${this.type}${this.icon}`
icon: `${this.type}${this.icon}`,
...attrs
},
{
default: () => []

6
src/layout/components/navbar.vue

@ -120,8 +120,10 @@ function translationEn() {
<template #dropdown>
<el-dropdown-menu class="logout">
<el-dropdown-item @click="logout">
<i class="ri-logout-circle-r-line"></i
>{{ $t("buttons.hsLoginOut") }}</el-dropdown-item
<IconifyIconOffline
icon="logout-circle-r-line"
style="margin: 5px"
/>{{ $t("buttons.hsLoginOut") }}</el-dropdown-item
>
</el-dropdown-menu>
</template>

6
src/layout/components/notice/data.ts

@ -108,7 +108,7 @@ export const noticesData: TabItem[] = [
{
avatar: "",
title: "任务名称",
description: "任务需要在 2021-11-16 20:00 前启动",
description: "任务需要在 2022-11-16 20:00 前启动",
datetime: "",
extra: "未开始",
status: "info",
@ -118,7 +118,7 @@ export const noticesData: TabItem[] = [
avatar: "",
title: "第三方紧急代码变更",
description:
"一拳提交于 2021-11-16,需在 2021-11-18 前完成代码变更任务",
"一拳提交于 2022-11-16,需在 2022-11-18 前完成代码变更任务",
datetime: "",
extra: "马上到期",
status: "danger",
@ -127,7 +127,7 @@ export const noticesData: TabItem[] = [
{
avatar: "",
title: "信息安全考试",
description: "指派小仙于 2021-12-12 前完成更新并发布",
description: "指派小仙于 2022-12-12 前完成更新并发布",
datetime: "",
extra: "已耗时 8 天",
status: "warning",

10
src/layout/components/screenfull/index.vue

@ -5,18 +5,14 @@ const { isFullscreen, toggle } = useFullscreen();
<template>
<div class="screen-full" @click="toggle">
<i
<FontIcon
:title="
isFullscreen
? $t('buttons.hsexitfullscreen')
: $t('buttons.hsfullscreen')
"
:class="
isFullscreen
? 'iconfont team-iconexit-fullscreen'
: 'iconfont team-iconfullscreen'
"
></i>
:icon="isFullscreen ? 'team-iconexit-fullscreen' : 'team-iconfullscreen'"
/>
</div>
</template>

10
src/layout/components/setting/index.vue

@ -157,8 +157,7 @@ function onReset() {
meta: {
title: "menus.hshome",
icon: "home-filled",
i18n: true,
showLink: true
i18n: true
}
}
]);
@ -437,7 +436,12 @@ nextTick(() => {
style="width: 90%; margin: 24px 15px"
@click="onReset"
>
<i class="fa fa-sign-out"></i>
<IconifyIconOffline
icon="fa-sign-out"
width="15"
height="15"
style="margin-right: 4px"
/>
清空缓存并返回登录页</el-button
>
</panel>

17
src/layout/components/sidebar/horizontal.vue

@ -13,11 +13,9 @@ import Notice from "../notice/index.vue";
import { templateRef } from "@vueuse/core";
import SidebarItem from "./sidebarItem.vue";
import avatars from "/@/assets/avatars.jpg";
import { algorithm } from "/@/utils/algorithm";
import screenfull from "../screenfull/index.vue";
import { useRoute, useRouter } from "vue-router";
import { storageSession } from "/@/utils/storage";
import Icon from "/@/components/ReIcon/src/Icon.vue";
import { deviceDetection } from "/@/utils/deviceDetection";
import { usePermissionStoreHook } from "/@/store/modules/permission";
import globalization from "/@/assets/svg/globalization.svg?component";
@ -92,7 +90,7 @@ const menuSelect = (indexPath: string): void => {
}
});
}
findCurrentRoute(algorithm.increaseIndexes(routers));
findCurrentRoute(routers);
};
function backHome() {
@ -128,7 +126,11 @@ onMounted(() => {
<template>
<div class="horizontal-header">
<div class="horizontal-header-left" @click="backHome">
<Icon svg :width="35" :height="35" content="team-iconlogo" />
<FontIcon
icon="team-iconlogo"
svg
style="width: 35px; height: 35px"
></FontIcon>
<h4>{{ title }}</h4>
</div>
<el-menu
@ -183,8 +185,11 @@ onMounted(() => {
<template #dropdown>
<el-dropdown-menu class="logout">
<el-dropdown-item @click="logout">
<i class="ri-logout-circle-r-line"></i
>{{ $t("buttons.hsLoginOut") }}</el-dropdown-item
<IconifyIconOffline
icon="logout-circle-r-line"
style="margin: 5px"
/>
{{ $t("buttons.hsLoginOut") }}</el-dropdown-item
>
</el-dropdown-menu>
</template>

13
src/layout/components/sidebar/logo.vue

@ -1,6 +1,5 @@
<script setup lang="ts">
import { getCurrentInstance } from "vue";
import Icon from "/@/components/ReIcon/src/Icon.vue";
const props = defineProps({
collapse: Boolean
});
@ -19,7 +18,11 @@ const title =
class="sidebar-logo-link"
to="/"
>
<Icon svg :width="35" :height="35" content="team-iconlogo" />
<FontIcon
icon="team-iconlogo"
svg
style="width: 35px; height: 35px"
></FontIcon>
<span class="sidebar-title">{{ title }}</span>
</router-link>
<router-link
@ -29,7 +32,11 @@ const title =
class="sidebar-logo-link"
to="/"
>
<Icon svg :width="35" :height="35" content="team-iconlogo" />
<FontIcon
icon="team-iconlogo"
svg
style="width: 35px; height: 35px"
></FontIcon>
<span class="sidebar-title">{{ title }}</span>
</router-link>
</transition>

19
src/layout/components/sidebar/sidebarItem.vue

@ -10,9 +10,8 @@ import {
import path from "path";
import { childrenType } from "../../types";
import { transformI18n } from "/@/plugins/i18n";
import { findIconReg } from "/@/components/ReIcon";
import Icon from "/@/components/ReIcon/src/Icon.vue";
import { useAppStoreHook } from "/@/store/modules/app";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
const instance = getCurrentInstance().appContext.app.config.globalProperties;
const menuMode = instance.$storage.layout?.layout === "vertical";
@ -143,7 +142,7 @@ function resolvePath(routePath) {
<el-icon v-show="props.item.meta.icon">
<component
:is="
findIconReg(
useRenderIcon(
onlyOneChild.meta.icon ||
(props.item.meta && props.item.meta.icon)
)
@ -176,11 +175,11 @@ function resolvePath(routePath) {
}}
</span>
</el-tooltip>
<Icon
<FontIcon
v-if="onlyOneChild.meta.extraIcon"
:icon="onlyOneChild.meta.extraIcon.name"
:svg="onlyOneChild.meta.extraIcon.svg ? true : false"
:content="`${onlyOneChild.meta.extraIcon.name}`"
/>
></FontIcon>
</div>
</template>
</el-menu-item>
@ -195,7 +194,7 @@ function resolvePath(routePath) {
<template #title>
<el-icon v-show="props.item.meta.icon" :class="props.item.meta.icon">
<component
:is="findIconReg(props.item.meta && props.item.meta.icon)"
:is="useRenderIcon(props.item.meta && props.item.meta.icon)"
></component>
</el-icon>
<span v-if="!menuMode">{{
@ -220,11 +219,11 @@ function resolvePath(routePath) {
</span>
</div>
</el-tooltip>
<Icon
<FontIcon
v-if="props.item.meta.extraIcon"
:icon="props.item.meta.extraIcon.name"
:svg="props.item.meta.extraIcon.svg ? true : false"
:content="`${props.item.meta.extraIcon.name}`"
/>
></FontIcon>
</template>
<sidebar-item
v-for="child in props.item.children"

3
src/layout/components/sidebar/vertical.vue

@ -2,7 +2,6 @@
import Logo from "./logo.vue";
import { emitter } from "/@/utils/mitt";
import SidebarItem from "./sidebarItem.vue";
import { algorithm } from "/@/utils/algorithm";
import { storageLocal } from "/@/utils/storage";
import { useRoute, useRouter } from "vue-router";
import { computed, ref, onBeforeMount } from "vue";
@ -48,7 +47,7 @@ const menuSelect = (indexPath: string): void => {
}
});
}
findCurrentRoute(algorithm.increaseIndexes(router));
findCurrentRoute(router);
};
onBeforeMount(() => {

28
src/layout/components/tag/index.scss

@ -253,13 +253,23 @@
}
}
.ri-arrow-left-s-line {
.arrow-left,
.arrow-right {
width: 40px;
height: 38px;
line-height: 38px;
text-align: center;
font-size: 20px;
color: #00000073;
position: relative;
svg {
width: 20px;
height: 20px;
position: absolute;
left: 50%;
transform: translate(-50%, 50%);
}
}
.arrow-left {
box-shadow: 5px 0 5px -6px #ccc;
&:hover {
@ -267,15 +277,9 @@
}
}
.ri-arrow-right-s-line {
width: 40px;
height: 38px;
line-height: 38px;
text-align: center;
font-size: 20px;
border-right: 1px solid #ccc;
color: #00000073;
.arrow-right {
box-shadow: -5px 0 5px -6px #ccc;
border-right: 1px solid #ccc;
&:hover {
cursor: e-resize;

27
src/layout/components/tag/index.vue

@ -40,11 +40,11 @@ const activeIndex = ref<number>(-1);
let refreshButton = "refresh-button";
const instance = getCurrentInstance();
const pureSetting = useSettingStoreHook();
const showTags = ref(storageLocal.getItem("tagsVal") || false);
const tabDom = templateRef<HTMLElement | null>("tabDom", null);
const containerDom = templateRef<HTMLElement | null>("containerDom", null);
const scrollbarDom = templateRef<HTMLElement | null>("scrollbarDom", null);
const showTags =
ref(storageLocal.getItem("responsive-configure").hideTabs) ?? "false";
let multiTags: ComputedRef<Array<RouteConfigs>> = computed(() => {
return useMultiTagsStoreHook()?.multiTags;
});
@ -129,14 +129,14 @@ const moveToView = (index: number): void => {
return;
}
const tabItemEl = instance.refs["dynamic" + index][0];
const tabItemElOffsetLeft = (tabItemEl as HTMLElement).offsetLeft;
const tabItemOffsetWidth = (tabItemEl as HTMLElement).offsetWidth;
const tabItemElOffsetLeft = (tabItemEl as HTMLElement)?.offsetLeft;
const tabItemOffsetWidth = (tabItemEl as HTMLElement)?.offsetWidth;
//
const scrollbarDomWidth = scrollbarDom.value
? scrollbarDom.value.offsetWidth
? scrollbarDom.value?.offsetWidth
: 0;
//
const tabDomWidth = tabDom.value ? tabDom.value.offsetWidth : 0;
const tabDomWidth = tabDom.value ? tabDom.value?.offsetWidth : 0;
if (tabDomWidth < scrollbarDomWidth || tabItemElOffsetLeft === 0) {
translateX.value = 0;
@ -314,8 +314,7 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
meta: {
title: "menus.hshome",
i18n: true,
icon: "el-icon-s-home",
showLink: true
icon: "home-filled"
}
},
obj
@ -470,7 +469,6 @@ function showMenuModel(
* currentIndex为1时左侧的菜单是首页则不显示关闭左侧标签页
* 如果currentIndex等于routeLength-1右侧没有菜单则不显示关闭右侧标签页
*/
if (currentIndex === 1 && routeLength !== 2) {
//
tagsViews[2].show = false;
@ -631,7 +629,9 @@ const getContextMenuStyle = computed((): CSSProperties => {
<template>
<div ref="containerDom" class="tags-view" v-if="!showTags">
<i class="ri-arrow-left-s-line" @click="handleScroll(200)"></i>
<div class="arrow-left">
<IconifyIconOffline icon="arrow-left-s-line" @click="handleScroll(200)" />
</div>
<div ref="scrollbarDom" class="scroll-container">
<div class="tab" ref="tabDom" :style="getTabStyle">
<div
@ -671,7 +671,12 @@ const getContextMenuStyle = computed((): CSSProperties => {
</div>
</div>
</div>
<i class="ri-arrow-right-s-line" @click="handleScroll(-200)"></i>
<span class="arrow-right">
<IconifyIconOffline
icon="arrow-right-s-line"
@click="handleScroll(-200)"
/>
</span>
<!-- 右键菜单按钮 -->
<transition name="el-zoom-in-top">
<ul

4
src/layout/theme/element-plus.ts

@ -1,6 +1,6 @@
/* 动态改变element-plus主题色 */
import rgbHex from "rgb-hex";
import color from "css-color-function";
import { convert } from "css-color-function";
import { TinyColor } from "@ctrl/tinycolor";
import epCss from "element-plus/dist/index.css";
@ -48,7 +48,7 @@ export const createColors = (primary: string) => {
};
Object.keys(formula).forEach(key => {
const value = formula[key].replace(/primary/, primary);
colors[key] = "#" + rgbHex(color.convert(value));
colors[key] = "#" + rgbHex(convert(value));
});
return colors;
};

3
src/layout/types.ts

@ -6,8 +6,7 @@ export const routerArrays: Array<RouteConfigs> = [
meta: {
title: "menus.hshome",
i18n: true,
icon: "home-filled",
showLink: true
icon: "home-filled"
}
}
];

15
src/main.ts

@ -5,7 +5,6 @@ import { getServerConfig } from "./config";
import { createApp, Directive } from "vue";
import { usI18n } from "../src/plugins/i18n";
import { MotionPlugin } from "@vueuse/motion";
import { useFontawesome } from "../src/plugins/fontawesome";
import { useElementPlus } from "../src/plugins/element-plus";
import { injectResponsiveStorage } from "/@/utils/storage/responsive";
@ -26,19 +25,19 @@ Object.keys(directives).forEach(key => {
});
// 全局注册`@iconify/vue`图标库
import { IconifyIconOffline, IconifyIconOnline } from "./components/ReIcon";
import {
IconifyIconOffline,
IconifyIconOnline,
FontIcon
} from "./components/ReIcon";
app.component("IconifyIconOffline", IconifyIconOffline);
app.component("IconifyIconOnline", IconifyIconOnline);
app.component("FontIcon", FontIcon);
getServerConfig(app).then(async config => {
injectResponsiveStorage(app, config);
setupStore(app);
app
.use(router)
.use(MotionPlugin)
.use(useElementPlus)
.use(usI18n)
.use(useFontawesome);
app.use(router).use(MotionPlugin).use(useElementPlus).use(usI18n);
await router.isReady();
app.mount("#app");
});

26
src/plugins/element-plus/index.ts

@ -1,8 +1,6 @@
import { App, Component } from "vue";
import {
ElTag,
ElAffix,
ElSkeleton,
ElBreadcrumb,
ElBreadcrumbItem,
ElScrollbar,
@ -10,30 +8,21 @@ import {
ElButton,
ElCol,
ElRow,
ElSpace,
ElDivider,
ElCard,
ElDropdown,
ElDialog,
ElMenu,
ElMenuItem,
ElDropdownItem,
ElDropdownMenu,
ElIcon,
ElInput,
ElForm,
ElFormItem,
ElPopover,
ElPopper,
ElTooltip,
ElDrawer,
ElPagination,
ElAlert,
ElRadio,
ElRadioButton,
ElRadioGroup,
ElDescriptions,
ElDescriptionsItem,
ElBacktop,
ElSwitch,
ElBadge,
@ -43,7 +32,6 @@ import {
ElEmpty,
ElCollapse,
ElCollapseItem,
ElTreeV2,
// 指令
ElLoading,
ElInfiniteScroll
@ -54,8 +42,6 @@ const plugins = [ElLoading, ElInfiniteScroll];
const components = [
ElTag,
ElAffix,
ElSkeleton,
ElBreadcrumb,
ElBreadcrumbItem,
ElScrollbar,
@ -63,30 +49,21 @@ const components = [
ElButton,
ElCol,
ElRow,
ElSpace,
ElDivider,
ElCard,
ElDropdown,
ElDialog,
ElMenu,
ElMenuItem,
ElDropdownItem,
ElDropdownMenu,
ElIcon,
ElInput,
ElForm,
ElFormItem,
ElPopover,
ElPopper,
ElTooltip,
ElDrawer,
ElPagination,
ElAlert,
ElRadio,
ElRadioButton,
ElRadioGroup,
ElDescriptions,
ElDescriptionsItem,
ElBacktop,
ElSwitch,
ElBadge,
@ -95,8 +72,7 @@ const components = [
ElAvatar,
ElEmpty,
ElCollapse,
ElCollapseItem,
ElTreeV2
ElCollapseItem
];
export function useElementPlus(app: App) {

21
src/plugins/fontawesome/index.ts

@ -1,21 +0,0 @@
/** fontawesome45
* 4版本: www.fontawesome.com.cn/faicons/
* 5https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free
* https://github.com/FortAwesome/vue-fontawesome
*/
import { App } from "vue";
import "font-awesome/css/font-awesome.css";
import { library } from "@fortawesome/fontawesome-svg-core";
import {
faUserSecret,
faCoffee,
faSpinner
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
// github.com/Remix-Design/RemixIcon/blob/master/README_CN.md#%E5%AE%89%E8%A3%85%E5%BC%95%E5%85%A5
import "remixicon/fonts/remixicon.css";
export function useFontawesome(app: App) {
library.add(faUserSecret, faCoffee, faSpinner);
app.component("font-awesome-icon", FontAwesomeIcon);
}

17
src/plugins/i18n/en/menus.ts

@ -3,23 +3,9 @@ export default {
hslogin: "Login",
hssysManagement: "System Manage",
hsBaseinfo: "Base Info",
hsDict: "Dict Manage",
hseditor: "Editor",
hserror: "Error Page",
hsfourZeroFour: "404",
hsfourZeroOne: "401",
hscomponents: "Components",
hsvideo: "Video Components",
hsmap: "Map Components",
hsdraggable: "Draggable Components",
hssplitPane: "Split Pane",
hsbutton: "Button Components",
hscropping: "Picture Cropping",
hscountTo: "Digital Animation",
hsselector: "Selector Components",
hsflowChart: "Flow Chart",
hsseamless: "Seamless Scroll",
hscontextmenu: "Context Menu",
hsmenus: "MultiLevel Menu",
hsmenu1: "Menu1",
"hsmenu1-1": "Menu1-1",
@ -31,8 +17,5 @@ export default {
permission: "Permission Manage",
permissionPage: "Page Permission",
permissionButton: "Button Permission",
hstabs: "Tabs Operate",
hsMenuTree: "Menu Tree",
hsguide: "Guide",
externalLink: "External Link"
};

17
src/plugins/i18n/zh-CN/menus.ts

@ -3,23 +3,9 @@ export default {
hslogin: "登陆",
hssysManagement: "系统管理",
hsBaseinfo: "基础信息",
hsDict: "字典管理",
hseditor: "编辑器",
hserror: "错误页面",
hsfourZeroFour: "404",
hsfourZeroOne: "401",
hscomponents: "组件",
hsvideo: "视频组件",
hsmap: "地图组件",
hsdraggable: "拖拽组件",
hssplitPane: "切割面板",
hsbutton: "按钮组件",
hscropping: "图片裁剪",
hscountTo: "数字动画",
hsselector: "选择器组件",
hsflowChart: "流程图",
hsseamless: "无缝滚动",
hscontextmenu: "右键菜单",
hsmenus: "多级菜单",
hsmenu1: "菜单1",
"hsmenu1-1": "菜单1-1",
@ -31,8 +17,5 @@ export default {
permission: "权限管理",
permissionPage: "页面权限",
permissionButton: "按钮权限",
hstabs: "标签页操作",
hsMenuTree: "菜单树结构",
hsguide: "引导页",
externalLink: "外链"
};

7
src/router/modules/error.ts

@ -9,7 +9,6 @@ const errorRouter = {
meta: {
icon: "position",
title: $t("menus.hserror"),
showLink: true,
i18n: true,
rank: 7
},
@ -20,8 +19,7 @@ const errorRouter = {
component: () => import("/@/views/error/401.vue"),
meta: {
title: $t("menus.hsfourZeroOne"),
i18n: true,
showLink: true
i18n: true
}
},
{
@ -30,8 +28,7 @@ const errorRouter = {
component: () => import("/@/views/error/404.vue"),
meta: {
title: $t("menus.hsfourZeroFour"),
i18n: true,
showLink: true
i18n: true
}
}
]

2
src/router/modules/externalLink.ts

@ -8,7 +8,6 @@ const externalLink = {
meta: {
icon: "link",
title: $t("menus.externalLink"),
showLink: true,
i18n: true,
rank: 190
},
@ -17,7 +16,6 @@ const externalLink = {
path: "https://github.com/xiaoxian521/vue-pure-admin",
meta: {
title: $t("menus.externalLink"),
showLink: true,
i18n: true,
rank: 191
}

4
src/router/modules/home.ts

@ -9,7 +9,6 @@ const homeRouter = {
meta: {
icon: "home-filled",
title: $t("menus.hshome"),
showLink: true,
i18n: true,
rank: 0
},
@ -20,8 +19,7 @@ const homeRouter = {
component: () => import("/@/views/welcome.vue"),
meta: {
title: $t("menus.hshome"),
i18n: true,
showLink: true
i18n: true
}
}
]

2
src/router/utils.ts

@ -30,7 +30,7 @@ function ascending(arr: any[]) {
// 过滤meta中showLink为false的路由
function filterTree(data: RouteComponent[]) {
const newTree = data.filter(
(v: { meta: { showLink: boolean } }) => v.meta.showLink
(v: { meta: { showLink: boolean } }) => v.meta?.showLink !== false
);
newTree.forEach(
(v: { children }) => v.children && (v.children = filterTree(v.children))

3
src/store/modules/multiTags.ts

@ -17,8 +17,7 @@ export const useMultiTagsStore = defineStore({
meta: {
title: "menus.hshome",
icon: "home-filled",
i18n: true,
showLink: true
i18n: true
}
}
],

3
src/store/modules/user.ts

@ -60,8 +60,7 @@ export const useUserStore = defineStore({
meta: {
title: "menus.hshome",
icon: "home-filled",
i18n: true,
showLink: true
i18n: true
}
}
]);

4
src/style/login.css

@ -85,7 +85,7 @@
align-items: center;
}
.icon i {
.icon svg {
color: #d9d9d9;
transition: 0.5s;
}
@ -107,7 +107,7 @@
padding: 0;
}
.input-group.focus .icon i {
.input-group.focus .icon svg {
color: #5392f0;
}

21
src/utils/algorithm/index.ts

@ -1,21 +0,0 @@
interface ProxyAlgorithm {
increaseIndexes<T>(val: Array<T>): Array<T>;
}
class algorithmProxy implements ProxyAlgorithm {
constructor() {}
// 数组每一项添加索引字段
public increaseIndexes<T>(val: Array<T>): Array<T> {
return Object.keys(val)
.map(v => {
return {
...val[v],
key: v
};
})
.filter(v => v.meta && v.meta.showLink);
}
}
export const algorithm = new algorithmProxy();

54
src/utils/loaders/index.ts

@ -1,54 +0,0 @@
interface ProxyLoader {
loadCss(src: string): any;
loadScript(src: string): Promise<any>;
loadScriptConcurrent(src: Array<string>): Promise<any>;
}
class loaderProxy implements ProxyLoader {
constructor() {}
protected scriptLoaderCache: Array<string> = [];
public loadCss = (src: string): any => {
const element: HTMLLinkElement = document.createElement("link");
element.rel = "stylesheet";
element.href = src;
document.body.appendChild(element);
};
public loadScript = async (src: string): Promise<any> => {
if (this.scriptLoaderCache.includes(src)) {
return src;
} else {
const element: HTMLScriptElement = document.createElement("script");
element.src = src;
document.body.appendChild(element);
element.onload = () => {
return this.scriptLoaderCache.push(src);
};
}
};
public loadScriptConcurrent = async (
srcList: Array<string>
): Promise<any> => {
if (Array.isArray(srcList)) {
const len: number = srcList.length;
if (len > 0) {
let count = 0;
srcList.map(src => {
if (src) {
this.loadScript(src).then(() => {
count++;
if (count === len) {
return;
}
});
}
});
}
}
};
}
export const loader = new loaderProxy();

35
src/utils/resize/index.ts

@ -1,35 +0,0 @@
import ResizeObserver from "resize-observer-polyfill";
const isServer = typeof window === "undefined";
const resizeHandler = (entries: any[]): void => {
for (const entry of entries) {
const listeners = entry.target.__resizeListeners__ || [];
if (listeners.length) {
listeners.forEach((fn: () => any) => {
fn();
});
}
}
};
export const addResizeListener = (element: any, fn: () => any): any => {
if (isServer) return;
if (!element.__resizeListeners__) {
element.__resizeListeners__ = [];
element.__ro__ = new ResizeObserver(resizeHandler);
element.__ro__.observe(element);
}
element.__resizeListeners__.push(fn);
};
export const removeResizeListener = (element: any, fn: () => any): any => {
if (!element || !element.__resizeListeners__) return;
element.__resizeListeners__.splice(
element.__resizeListeners__.indexOf(fn),
1
);
if (!element.__resizeListeners__.length) {
element.__ro__.disconnect();
}
};

3
src/utils/storage/responsive.ts

@ -47,8 +47,7 @@ export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
meta: {
title: "menus.hshome",
i18n: true,
icon: "home-filled",
showLink: true
icon: "home-filled"
}
}
]

38
src/views/login.vue

@ -1,43 +1,15 @@
<script setup lang="ts">
import { ref, computed } from "vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { initRouter } from "/@/router/utils";
import { storageSession } from "/@/utils/storage";
import { addClass, removeClass } from "/@/utils/operate";
import bg from "/@/assets/login/bg.png";
import avatar from "/@/assets/login/avatar.svg?component";
import illustration0 from "/@/assets/login/illustration0.svg?component";
import illustration1 from "/@/assets/login/illustration1.svg?component";
import illustration2 from "/@/assets/login/illustration2.svg?component";
import illustration3 from "/@/assets/login/illustration3.svg?component";
import illustration4 from "/@/assets/login/illustration4.svg?component";
import illustration5 from "/@/assets/login/illustration5.svg?component";
import illustration6 from "/@/assets/login/illustration6.svg?component";
import illustration from "/@/assets/login/illustration.svg?component";
const router = useRouter();
// eslint-disable-next-line vue/return-in-computed-property
const currentWeek = computed(() => {
switch (String(new Date().getDay())) {
case "0":
return illustration0;
case "1":
return illustration1;
case "2":
return illustration2;
case "3":
return illustration3;
case "4":
return illustration4;
case "5":
return illustration5;
case "6":
return illustration6;
default:
return illustration4;
}
});
let user = ref("admin");
let pwd = ref("123456");
@ -73,7 +45,7 @@ function onPwdBlur() {
<img :src="bg" class="wave" />
<div class="login-container">
<div class="img">
<component :is="currentWeek"></component>
<illustration />
</div>
<div class="login-box">
<div class="login-form">
@ -110,7 +82,7 @@ function onPwdBlur() {
}"
>
<div class="icon">
<i class="fa fa-user"></i>
<IconifyIconOffline icon="fa-user" width="14" height="14" />
</div>
<div>
<h5>用户名</h5>
@ -139,7 +111,7 @@ function onPwdBlur() {
}"
>
<div class="icon">
<i class="fa fa-lock"></i>
<IconifyIconOffline icon="fa-lock" width="14" height="14" />
</div>
<div>
<h5>密码</h5>

1
types/global.d.ts

@ -11,6 +11,7 @@ declare module "vue" {
export interface GlobalComponents {
IconifyIconOffline: typeof import("../src/components/ReIcon")["IconifyIconOffline"];
IconifyIconOnline: typeof import("../src/components/ReIcon")["IconifyIconOnline"];
FontIcon: typeof import("../src/components/ReIcon")["FontIcon"];
}
}

106
vite.config.ts

@ -1,16 +1,7 @@
import { resolve } from "path";
import vue from "@vitejs/plugin-vue";
import svgLoader from "vite-svg-loader";
import legacy from "@vitejs/plugin-legacy";
import vueJsx from "@vitejs/plugin-vue-jsx";
import WindiCSS from "vite-plugin-windicss";
import { warpperEnv, regExps } from "./build";
import liveReload from "vite-plugin-live-reload";
import { viteMockServe } from "vite-plugin-mock";
import ElementPlus from "unplugin-element-plus/vite";
import removeConsole from "vite-plugin-remove-console";
import { getPluginsList } from "./build/plugins";
import { UserConfigExport, ConfigEnv, loadEnv } from "vite";
import themePreprocessorPlugin from "@zougt/vite-plugin-theme-preprocessor";
// 当前执行node命令时文件夹的地址(工作目录)
const root: string = process.cwd();
@ -36,7 +27,6 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
VITE_PROXY_DOMAIN,
VITE_PROXY_DOMAIN_REAL
} = warpperEnv(loadEnv(mode, root));
const prodMock = true;
return {
base: VITE_PUBLIC_PATH,
root,
@ -80,102 +70,16 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
}
: null
},
plugins: [
vue(),
// jsx、tsx语法支持
vueJsx(),
WindiCSS(),
// 线上环境删除console
removeConsole(),
// 修改layout文件夹下的文件时自动重载浏览器 解决 https://github.com/xiaoxian521/vue-pure-admin/issues/170
liveReload(["src/layout/**/*"]),
// 自定义主题
themePreprocessorPlugin({
scss: {
multipleScopeVars: [
{
scopeName: "layout-theme-default",
path: pathResolve("src/layout/theme/default-vars.scss")
},
{
scopeName: "layout-theme-light",
path: pathResolve("src/layout/theme/light-vars.scss")
},
{
scopeName: "layout-theme-dusk",
path: pathResolve("src/layout/theme/dusk-vars.scss")
},
{
scopeName: "layout-theme-volcano",
path: pathResolve("src/layout/theme/volcano-vars.scss")
},
{
scopeName: "layout-theme-yellow",
path: pathResolve("src/layout/theme/yellow-vars.scss")
},
{
scopeName: "layout-theme-mingQing",
path: pathResolve("src/layout/theme/mingQing-vars.scss")
},
{
scopeName: "layout-theme-auroraGreen",
path: pathResolve("src/layout/theme/auroraGreen-vars.scss")
},
{
scopeName: "layout-theme-pink",
path: pathResolve("src/layout/theme/pink-vars.scss")
},
{
scopeName: "layout-theme-saucePurple",
path: pathResolve("src/layout/theme/saucePurple-vars.scss")
}
],
// 默认取 multipleScopeVars[0].scopeName
defaultScopeName: "",
// 在生产模式是否抽取独立的主题css文件,extract为true以下属性有效
extract: true,
// 独立主题css文件的输出路径,默认取 viteConfig.build.assetsDir 相对于 (viteConfig.build.outDir)
outputDir: "",
// 会选取defaultScopeName对应的主题css文件在html添加link
themeLinkTagId: "head",
// "head"||"head-prepend" || "body" ||"body-prepend"
themeLinkTagInjectTo: "head",
// 是否对抽取的css文件内对应scopeName的权重类名移除
removeCssScopeName: false,
// 可以自定义css文件名称的函数
customThemeCssFileName: scopeName => scopeName
}
}),
// svg组件化支持
svgLoader(),
ElementPlus({}),
// mock支持
viteMockServe({
mockPath: "mock",
localEnabled: command === "serve",
prodEnabled: command !== "serve" && prodMock,
injectCode: `
import { setupProdMockServer } from './mockProdServer';
setupProdMockServer();
`,
logger: true
}),
// 是否为打包后的文件提供传统浏览器兼容性支持
VITE_LEGACY
? legacy({
targets: ["ie >= 11"],
additionalLegacyPolyfills: ["regenerator-runtime/runtime"]
})
: null
],
plugins: getPluginsList(command, VITE_LEGACY),
optimizeDeps: {
include: [
"pinia",
"vue-i18n",
"lodash-es",
"@vueuse/core",
"element-plus/lib/locale/lang/zh-cn",
"element-plus/lib/locale/lang/en"
"@iconify/vue",
"element-plus/lib/locale/lang/en",
"element-plus/lib/locale/lang/zh-cn"
],
exclude: ["@zougt/vite-plugin-theme-preprocessor/dist/browser-utils"]
},

Loading…
Cancel
Save