xiaoxian521
3 years ago
55 changed files with 454 additions and 853 deletions
-
2LICENSE
-
9README.en-US.md
-
8README.md
-
102build/plugins.ts
-
1index.html
-
5mock/asyncRoutes.ts
-
21package.json
-
242pnpm-lock.yaml
-
18public/iconfont.css
-
BINsrc/assets/car.png
-
0src/assets/login/illustration.svg
-
1src/assets/login/illustration0.svg
-
1src/assets/login/illustration1.svg
-
1src/assets/login/illustration3.svg
-
1src/assets/login/illustration4.svg
-
1src/assets/login/illustration5.svg
-
1src/assets/login/illustration6.svg
-
149src/components/ReIcon/index.ts
-
97src/components/ReIcon/src/Icon.vue
-
39src/components/ReIcon/src/hooks.ts
-
48src/components/ReIcon/src/iconfont.ts
-
25src/components/ReIcon/src/iconifyIconOffline.ts
-
8src/components/ReIcon/src/iconifyIconOnline.ts
-
6src/layout/components/navbar.vue
-
6src/layout/components/notice/data.ts
-
10src/layout/components/screenfull/index.vue
-
10src/layout/components/setting/index.vue
-
17src/layout/components/sidebar/horizontal.vue
-
13src/layout/components/sidebar/logo.vue
-
19src/layout/components/sidebar/sidebarItem.vue
-
3src/layout/components/sidebar/vertical.vue
-
28src/layout/components/tag/index.scss
-
27src/layout/components/tag/index.vue
-
4src/layout/theme/element-plus.ts
-
3src/layout/types.ts
-
15src/main.ts
-
26src/plugins/element-plus/index.ts
-
21src/plugins/fontawesome/index.ts
-
17src/plugins/i18n/en/menus.ts
-
17src/plugins/i18n/zh-CN/menus.ts
-
7src/router/modules/error.ts
-
2src/router/modules/externalLink.ts
-
4src/router/modules/home.ts
-
2src/router/utils.ts
-
3src/store/modules/multiTags.ts
-
3src/store/modules/user.ts
-
4src/style/login.css
-
21src/utils/algorithm/index.ts
-
54src/utils/loaders/index.ts
-
35src/utils/resize/index.ts
-
3src/utils/storage/responsive.ts
-
38src/views/login.vue
-
1types/global.d.ts
-
106vite.config.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 |
|||
]; |
|||
} |
|||
@ -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[email protected] |
|||
"@vueuse/core": 7.5[email protected] |
|||
"@vueuse/motion": 2.0.0-[email protected] |
|||
"@vueuse/shared": 7.5.4[email protected] |
|||
"@vueuse/shared": 7.5[email protected] |
|||
animate.css: 4.1.1 |
|||
axios: 0.25.0 |
|||
css-color-function: 1.3.3 |
|||
dayjs: 1.10.7 |
|||
element-plus: 1.3.0-[email protected] |
|||
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[email protected][email protected] |
|||
pinia: 2.0.11[email protected][email protected] |
|||
qs: 6.10.3 |
|||
remixicon: 2.5.0 |
|||
resize-observer-polyfill: 1.5.1 |
|||
responsive-storage: 1.0[email protected] |
|||
rgb-hex: 4.0.0 |
|||
vue: 3.2.29 |
|||
vue-i18n: 9.2.0-beta.28[email protected] |
|||
vue-i18n: 9.2.0-beta.30[email protected] |
|||
vue-router: 4.0[email protected] |
|||
vue-types: 4.1[email protected] |
|||
|
|||
@ -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[email protected] |
|||
"@iconify-icons/fa": 1.1.1 |
|||
"@iconify-icons/fa-solid": 1.1.2 |
|||
"@iconify-icons/ri": 1.1.1 |
|||
"@iconify/vue": 3.1[email protected] |
|||
"@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[email protected] |
|||
autoprefixer: 10.2.4[email protected] |
|||
autoprefixer: 10.4.2[email protected] |
|||
cross-env: 7.0.3 |
|||
eslint: 7.30.0 |
|||
eslint-plugin-prettier: 3.4[email protected][email protected] |
|||
@ -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/[email protected]: |
|||
/@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/[email protected]: |
|||
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[email protected]: |
|||
/@vueuse/core/7.5.5[email protected]: |
|||
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[email protected] |
|||
"@vueuse/shared": 7.5.5[email protected] |
|||
vue: 3.2.29 |
|||
vue-demi: 0.12[email protected] |
|||
dev: false |
|||
@ -1586,16 +1557,16 @@ packages: |
|||
"@vue/composition-api": |
|||
optional: true |
|||
dependencies: |
|||
"@vueuse/core": 7.5.4[email protected] |
|||
"@vueuse/core": 7.5.5[email protected] |
|||
popmotion: 11.0.3 |
|||
vue: 3.2.29 |
|||
vue-demi: 0.12[email protected] |
|||
dev: false |
|||
|
|||
/@vueuse/shared/7.5.4[email protected]: |
|||
/@vueuse/shared/7.5.5[email protected]: |
|||
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.[email protected]: |
|||
/autoprefixer/10.4.2[email protected]: |
|||
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[email protected] |
|||
"@popperjs/core": 2.11.2 |
|||
"@vueuse/core": 7.5.4[email protected] |
|||
"@vueuse/core": 7.5.5[email protected] |
|||
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[email protected][email protected]: |
|||
/pinia/2.0.11[email protected][email protected]: |
|||
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[email protected] |
|||
unplugin: 0.3.2[email protected] |
|||
vue: 3.2.29 |
|||
transitivePeerDependencies: |
|||
- esbuild |
|||
@ -7024,10 +6982,10 @@ packages: |
|||
- webpack |
|||
dev: true |
|||
|
|||
/unplugin/0.3.1[email protected]: |
|||
/unplugin/0.3.2[email protected]: |
|||
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[email protected]: |
|||
/vue-i18n/9.2.0-beta.30[email protected]: |
|||
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 |
|||
|
|||
@ -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; |
|||
} |
|||
|
Before Width: 36 | Height: 20 | Size: 1.4 KiB |
1
src/assets/login/illustration0.svg
File diff suppressed because it is too large
View File
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
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
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
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
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
File diff suppressed because it is too large
View File
@ -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 |
|||
}; |
|||
@ -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> |
|||
@ -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 |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
@ -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 |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
@ -1,21 +0,0 @@ |
|||
/** 兼容fontawesome4和5版本 |
|||
* 4版本: www.fontawesome.com.cn/faicons/ |
|||
* 5版本：https://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); |
|||
} |
|||
@ -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(); |
|||
@ -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(); |
|||
@ -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(); |
|||
} |
|||
}; |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue