kingecg
/
gohttpdUi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: Add elNamespace 

feat(component): Add namespace of class
This commit is contained in:
kailong321200875 2022-01-23 10:11:13 +08:00
parent e20fa76cad
commit d847ccb098
38 changed files with 507 additions and 302 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -32,7 +32,7 @@
"axios": "^0.25.0", "axios": "^0.25.0",
"echarts": "^5.2.2", "echarts": "^5.2.2",
"echarts-wordcloud": "^2.0.0", "echarts-wordcloud": "^2.0.0",
"element-plus": "1.3.0-beta.5", "element-plus": "1.3.0-beta.7",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
@ -88,7 +88,7 @@
"vite-plugin-svg-icons": "^1.1.0", "vite-plugin-svg-icons": "^1.1.0",
"vite-plugin-vue-setup-extend": "^0.3.0", "vite-plugin-vue-setup-extend": "^0.3.0",
"vite-plugin-windicss": "^1.6.3", "vite-plugin-windicss": "^1.6.3",
"vue-tsc": "^0.30.6", "vue-tsc": "^0.31.1",
"windicss": "^3.4.3", "windicss": "^3.4.3",
"windicss-analysis": "^0.3.5" "windicss-analysis": "^0.3.5"
}, },

337
pnpm-lock.yaml
View File

@ -23,7 +23,7 @@ specifiers:
commitizen: ^4.2.4 commitizen: ^4.2.4
echarts: ^5.2.2 echarts: ^5.2.2
echarts-wordcloud: ^2.0.0 echarts-wordcloud: ^2.0.0
element-plus: 1.3.0-beta.5 element-plus: 1.3.0-beta.7
eslint: ^8.7.0 eslint: ^8.7.0
eslint-config-prettier: ^8.3.0 eslint-config-prettier: ^8.3.0
eslint-define-config: ^1.2.3 eslint-define-config: ^1.2.3
@ -60,7 +60,7 @@ specifiers:
vue: 3.2.26 vue: 3.2.26
vue-i18n: 9.1.9 vue-i18n: 9.1.9
vue-router: ^4.0.12 vue-router: ^4.0.12
vue-tsc: ^0.30.6 vue-tsc: ^0.31.1
vue-types: ^4.1.1 vue-types: ^4.1.1
web-storage-cache: ^1.1.1 web-storage-cache: ^1.1.1
windicss: ^3.4.3 windicss: ^3.4.3
@ -74,7 +74,7 @@ dependencies:
axios: registry.npmmirror.com/axios/0.25.0 axios: registry.npmmirror.com/axios/0.25.0
echarts: registry.npmmirror.com/echarts/5.2.2 echarts: registry.npmmirror.com/echarts/5.2.2
echarts-wordcloud: registry.npmmirror.com/echarts-wordcloud/2.0.0_echarts@5.2.2 echarts-wordcloud: registry.npmmirror.com/echarts-wordcloud/2.0.0_echarts@5.2.2
element-plus: registry.npmmirror.com/element-plus/1.3.0-beta.5_vue@3.2.26 element-plus: registry.npmmirror.com/element-plus/1.3.0-beta.7_vue@3.2.26
lodash-es: registry.nlark.com/lodash-es/4.17.21 lodash-es: registry.nlark.com/lodash-es/4.17.21
mockjs: registry.npmmirror.com/mockjs/1.1.0 mockjs: registry.npmmirror.com/mockjs/1.1.0
nprogress: registry.npmmirror.com/nprogress/0.2.0 nprogress: registry.npmmirror.com/nprogress/0.2.0
@ -130,7 +130,7 @@ devDependencies:
vite-plugin-svg-icons: registry.npmmirror.com/vite-plugin-svg-icons/1.1.0_vite@2.7.13 vite-plugin-svg-icons: registry.npmmirror.com/vite-plugin-svg-icons/1.1.0_vite@2.7.13
vite-plugin-vue-setup-extend: registry.npmmirror.com/vite-plugin-vue-setup-extend/0.3.0_vite@2.7.13 vite-plugin-vue-setup-extend: registry.npmmirror.com/vite-plugin-vue-setup-extend/0.3.0_vite@2.7.13
vite-plugin-windicss: registry.npmmirror.com/vite-plugin-windicss/1.6.3_vite@2.7.13 vite-plugin-windicss: registry.npmmirror.com/vite-plugin-windicss/1.6.3_vite@2.7.13
vue-tsc: registry.npmmirror.com/vue-tsc/0.30.6_typescript@4.5.5 vue-tsc: registry.npmmirror.com/vue-tsc/0.31.1_typescript@4.5.5
windicss: registry.npmmirror.com/windicss/3.4.3 windicss: registry.npmmirror.com/windicss/3.4.3
windicss-analysis: registry.npmmirror.com/windicss-analysis/0.3.5 windicss-analysis: registry.npmmirror.com/windicss-analysis/0.3.5
@ -943,7 +943,7 @@ packages:
css-what: registry.npmmirror.com/css-what/5.1.0 css-what: registry.npmmirror.com/css-what/5.1.0
domelementtype: registry.nlark.com/domelementtype/2.2.0 domelementtype: registry.nlark.com/domelementtype/2.2.0
domhandler: registry.npmmirror.com/domhandler/4.3.0 domhandler: registry.npmmirror.com/domhandler/4.3.0
domutils: registry.npmmirror.com/domutils/2.8.0 domutils: registry.nlark.com/domutils/2.8.0
dev: true dev: true
registry.nlark.com/cheerio/1.0.0-rc.10: registry.nlark.com/cheerio/1.0.0-rc.10:
@ -958,7 +958,7 @@ packages:
engines: { node: '>= 6' } engines: { node: '>= 6' }
dependencies: dependencies:
cheerio-select: registry.nlark.com/cheerio-select/1.5.0 cheerio-select: registry.nlark.com/cheerio-select/1.5.0
dom-serializer: registry.npmmirror.com/dom-serializer/1.3.2 dom-serializer: registry.nlark.com/dom-serializer/1.3.2
domhandler: registry.npmmirror.com/domhandler/4.3.0 domhandler: registry.npmmirror.com/domhandler/4.3.0
htmlparser2: registry.npmmirror.com/htmlparser2/6.1.0 htmlparser2: registry.npmmirror.com/htmlparser2/6.1.0
parse5: registry.nlark.com/parse5/6.0.1 parse5: registry.nlark.com/parse5/6.0.1
@ -1522,6 +1522,35 @@ packages:
esutils: registry.npmmirror.com/esutils/2.0.3 esutils: registry.npmmirror.com/esutils/2.0.3
dev: true dev: true
registry.nlark.com/dom-serializer/0.2.2:
resolution:
{
integrity: sha1-GvuB9TNxcXXUeGVd68XjMtn5u1E=,
registry: https://registry.npm.taobao.org/,
tarball: https://registry.nlark.com/dom-serializer/download/dom-serializer-0.2.2.tgz
}
name: dom-serializer
version: 0.2.2
dependencies:
domelementtype: registry.nlark.com/domelementtype/2.2.0
entities: registry.nlark.com/entities/2.2.0
dev: true
registry.nlark.com/dom-serializer/1.3.2:
resolution:
{
integrity: sha1-YgZDfTLO767HFhgDIwx6ILwbTZE=,
registry: https://registry.npm.taobao.org/,
tarball: https://registry.nlark.com/dom-serializer/download/dom-serializer-1.3.2.tgz
}
name: dom-serializer
version: 1.3.2
dependencies:
domelementtype: registry.nlark.com/domelementtype/2.2.0
domhandler: registry.npmmirror.com/domhandler/4.3.0
entities: registry.nlark.com/entities/2.2.0
dev: true
registry.nlark.com/domelementtype/1.3.1: registry.nlark.com/domelementtype/1.3.1:
resolution: resolution:
{ {
@ -1544,6 +1573,35 @@ packages:
version: 2.2.0 version: 2.2.0
dev: true dev: true
registry.nlark.com/domutils/1.7.0:
resolution:
{
integrity: sha1-Vuo0HoNOBuZ0ivehyyXaZ+qfjCo=,
registry: https://registry.npm.taobao.org/,
tarball: https://registry.nlark.com/domutils/download/domutils-1.7.0.tgz
}
name: domutils
version: 1.7.0
dependencies:
dom-serializer: registry.nlark.com/dom-serializer/0.2.2
domelementtype: registry.nlark.com/domelementtype/1.3.1
dev: true
registry.nlark.com/domutils/2.8.0:
resolution:
{
integrity: sha1-RDfe9dtuLR9dbuhZvZXKfQIEgTU=,
registry: https://registry.npm.taobao.org/,
tarball: https://registry.nlark.com/domutils/download/domutils-2.8.0.tgz
}
name: domutils
version: 2.8.0
dependencies:
dom-serializer: registry.nlark.com/dom-serializer/1.3.2
domelementtype: registry.nlark.com/domelementtype/2.2.0
domhandler: registry.npmmirror.com/domhandler/4.3.0
dev: true
registry.nlark.com/dot-case/3.0.4: registry.nlark.com/dot-case/3.0.4:
resolution: resolution:
{ {
@ -1753,7 +1811,7 @@ packages:
{ {
integrity: sha1-0t5eA0JOcH3BDHQGjd7a5wh0Gyc=, integrity: sha1-0t5eA0JOcH3BDHQGjd7a5wh0Gyc=,
registry: https://registry.npm.taobao.org/, registry: https://registry.npm.taobao.org/,
tarball: https://registry.nlark.com/eslint-utils/download/eslint-utils-2.1.0.tgz?cache=0&sync_timestamp=1631600361784&other_urls=https%3A%2F%2Fregistry.nlark.com%2Feslint-utils%2Fdownload%2Feslint-utils-2.1.0.tgz tarball: https://registry.nlark.com/eslint-utils/download/eslint-utils-2.1.0.tgz
} }
name: eslint-utils name: eslint-utils
version: 2.1.0 version: 2.1.0
@ -5664,6 +5722,18 @@ packages:
os-tmpdir: registry.nlark.com/os-tmpdir/1.0.2 os-tmpdir: registry.nlark.com/os-tmpdir/1.0.2
dev: true dev: true
registry.nlark.com/to-fast-properties/2.0.0:
resolution:
{
integrity: sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=,
registry: https://registry.npm.taobao.org/,
tarball: https://registry.nlark.com/to-fast-properties/download/to-fast-properties-2.0.0.tgz
}
name: to-fast-properties
version: 2.0.0
engines: { node: '>=4' }
dev: true
registry.nlark.com/to-regex-range/2.1.1: registry.nlark.com/to-regex-range/2.1.1:
resolution: resolution:
{ {
@ -6753,7 +6823,7 @@ packages:
engines: { node: '>=6.9.0' } engines: { node: '>=6.9.0' }
dependencies: dependencies:
'@babel/helper-validator-identifier': registry.npmmirror.com/@babel/helper-validator-identifier/7.15.7 '@babel/helper-validator-identifier': registry.npmmirror.com/@babel/helper-validator-identifier/7.15.7
to-fast-properties: registry.npmmirror.com/to-fast-properties/2.0.0 to-fast-properties: registry.nlark.com/to-fast-properties/2.0.0
dev: true dev: true
registry.npmmirror.com/@commitlint/cli/16.1.0_@types+node@17.0.10: registry.npmmirror.com/@commitlint/cli/16.1.0_@types+node@17.0.10:
@ -7051,16 +7121,16 @@ packages:
'@cspotcode/source-map-consumer': registry.nlark.com/@cspotcode/source-map-consumer/0.8.0 '@cspotcode/source-map-consumer': registry.nlark.com/@cspotcode/source-map-consumer/0.8.0
dev: true dev: true
registry.npmmirror.com/@element-plus/icons-vue/0.2.4_vue@3.2.26: registry.npmmirror.com/@element-plus/icons-vue/0.2.6_vue@3.2.26:
resolution: resolution:
{ {
integrity: sha512-RsJNyL58rwxtsjeMy34o8txkL6UlME1stWsUlRpTac6UE9Bx9gdJvnDXbIKhOJqBLX17fBjmposdrn6VTqim2w==, integrity: sha512-2gg7VCq4d2firgl7/aVym4Cx/wqKFwKybEQGJiiWJN4urW36+QdAEG1knqSD9qidbjhVp0Jnc9XdSTR1/4Whzw==,
registry: https://registry.npm.taobao.org/, registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/@element-plus/icons-vue/download/@element-plus/icons-vue-0.2.4.tgz tarball: https://registry.npmmirror.com/@element-plus/icons-vue/download/@element-plus/icons-vue-0.2.6.tgz
} }
id: registry.npmmirror.com/@element-plus/icons-vue/0.2.4 id: registry.npmmirror.com/@element-plus/icons-vue/0.2.6
name: '@element-plus/icons-vue' name: '@element-plus/icons-vue'
version: 0.2.4 version: 0.2.6
peerDependencies: peerDependencies:
vue: ^3.2.0 vue: ^3.2.0
dependencies: dependencies:
@ -7414,15 +7484,15 @@ packages:
version: 1.0.0-next.21 version: 1.0.0-next.21
dev: true dev: true
registry.npmmirror.com/@popperjs/core/2.11.0: registry.npmmirror.com/@popperjs/core/2.11.2:
resolution: resolution:
{ {
integrity: sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==, integrity: sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==,
registry: https://registry.npm.taobao.org/, registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/@popperjs/core/download/@popperjs/core-2.11.0.tgz tarball: https://registry.npmmirror.com/@popperjs/core/download/@popperjs/core-2.11.2.tgz
} }
name: '@popperjs/core' name: '@popperjs/core'
version: 2.11.0 version: 2.11.2
dev: false dev: false
registry.npmmirror.com/@rollup/plugin-node-resolve/13.1.3: registry.npmmirror.com/@rollup/plugin-node-resolve/13.1.3:
@ -7889,29 +7959,29 @@ packages:
vue: registry.npmmirror.com/vue/3.2.26 vue: registry.npmmirror.com/vue/3.2.26
dev: true dev: true
registry.npmmirror.com/@volar/code-gen/0.30.6: registry.npmmirror.com/@volar/code-gen/0.31.1:
resolution: resolution:
{ {
integrity: sha512-odkXN91QCS/KRKPk4eUQp7jkN0PuYLwDuJZwGiDDJrZWUCCSdEvSj7e+Cjk7Q7doX0G9WAF88BL7ozcjzrtiKw==, integrity: sha512-HsUNJHBdq4vGxenYlREqtBNf1Gh5JV1GBkD703bcH8clauc7ADTkUrayfLAF2ulXP/U0l7dFL8C8bwqJ7PZbMw==,
registry: https://registry.npm.taobao.org/, registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/@volar/code-gen/download/@volar/code-gen-0.30.6.tgz tarball: https://registry.npmmirror.com/@volar/code-gen/download/@volar/code-gen-0.31.1.tgz
} }
name: '@volar/code-gen' name: '@volar/code-gen'
version: 0.30.6 version: 0.31.1
dependencies: dependencies:
'@volar/shared': registry.npmmirror.com/@volar/shared/0.30.6 '@volar/shared': registry.npmmirror.com/@volar/shared/0.31.1
'@volar/source-map': registry.npmmirror.com/@volar/source-map/0.30.6 '@volar/source-map': registry.npmmirror.com/@volar/source-map/0.31.1
dev: true dev: true
registry.npmmirror.com/@volar/html2pug/0.30.6: registry.npmmirror.com/@volar/html2pug/0.31.1:
resolution: resolution:
{ {
integrity: sha512-mPRQCRa/Nse0bC1wxJ+K7q/Ou0Wg+220qL3nPI3mqwSn0KECOAPsZxaVHRFauY4MeBxO2sOzkOvFfQLk8whJ1g==, integrity: sha512-m/lbsz9t+zXx9HsuLH17Z/5nNtefv5qxncL8rycR+GaypHQKF5kg+GqQNOURMQ8T8lq2D6fNsGQOcMXoo3IqWQ==,
registry: https://registry.npm.taobao.org/, registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/@volar/html2pug/download/@volar/html2pug-0.30.6.tgz tarball: https://registry.npmmirror.com/@volar/html2pug/download/@volar/html2pug-0.31.1.tgz
} }
name: '@volar/html2pug' name: '@volar/html2pug'
version: 0.30.6 version: 0.31.1
dependencies: dependencies:
domelementtype: registry.nlark.com/domelementtype/2.2.0 domelementtype: registry.nlark.com/domelementtype/2.2.0
domhandler: registry.npmmirror.com/domhandler/4.3.0 domhandler: registry.npmmirror.com/domhandler/4.3.0
@ -7919,15 +7989,15 @@ packages:
pug: registry.nlark.com/pug/3.0.2 pug: registry.nlark.com/pug/3.0.2
dev: true dev: true
registry.npmmirror.com/@volar/shared/0.30.6: registry.npmmirror.com/@volar/shared/0.31.1:
resolution: resolution:
{ {
integrity: sha512-YJa7kl2HRkSZaETBPCVEm/ZVXPBpt1aAlCxNuj55GaCHhcabOVj2oCBZioJLiwAvSR0e6k6KjbJBcKTuKrP9bw==, integrity: sha512-WbMiPOlXbpFinZnQ+/qsJQ7+YW6MFla2fLdD6Er5bLW5DEXI+GupLQ2gnia7F0w6QborMowfOIEXnrnMPPYGOA==,
registry: https://registry.npm.taobao.org/, registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/@volar/shared/download/@volar/shared-0.30.6.tgz tarball: https://registry.npmmirror.com/@volar/shared/download/@volar/shared-0.31.1.tgz
} }
name: '@volar/shared' name: '@volar/shared'
version: 0.30.6 version: 0.31.1
dependencies: dependencies:
upath: registry.nlark.com/upath/2.0.1 upath: registry.nlark.com/upath/2.0.1
vscode-html-languageservice: registry.npmmirror.com/vscode-html-languageservice/4.2.1 vscode-html-languageservice: registry.npmmirror.com/vscode-html-languageservice/4.2.1
@ -7935,47 +8005,47 @@ packages:
vscode-uri: registry.npmmirror.com/vscode-uri/3.0.3 vscode-uri: registry.npmmirror.com/vscode-uri/3.0.3
dev: true dev: true
registry.npmmirror.com/@volar/source-map/0.30.6: registry.npmmirror.com/@volar/source-map/0.31.1:
resolution: resolution:
{ {
integrity: sha512-B0KLi0StdM3KsMLA+iK5pdE+mokukio7r0EkOMUAYZN/xn/kGWkKIdleJjLtgmtH2tw4kBz/5hP+KKEOlD3Etg==, integrity: sha512-t+bUmxI5bkunBxX6UYpBX6+xnYYJhpciL3Hqv0dkHSaS63kJqY13OhV/utmQMjto3b3FAbYLSVqpt09FtdTPzg==,
registry: https://registry.npm.taobao.org/, registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/@volar/source-map/download/@volar/source-map-0.30.6.tgz tarball: https://registry.npmmirror.com/@volar/source-map/download/@volar/source-map-0.31.1.tgz
} }
name: '@volar/source-map' name: '@volar/source-map'
version: 0.30.6 version: 0.31.1
dependencies: dependencies:
'@volar/shared': registry.npmmirror.com/@volar/shared/0.30.6 '@volar/shared': registry.npmmirror.com/@volar/shared/0.31.1
vscode-languageserver-textdocument: registry.npmmirror.com/vscode-languageserver-textdocument/1.0.3 vscode-languageserver-textdocument: registry.npmmirror.com/vscode-languageserver-textdocument/1.0.3
dev: true dev: true
registry.npmmirror.com/@volar/transforms/0.30.6: registry.npmmirror.com/@volar/transforms/0.31.1:
resolution: resolution:
{ {
integrity: sha512-jbVBXOBOeKc6Rb7dzyiq5b+FfYsXFWGFLLDZok5U+JoFujxoPfn5HwX9A3t+RW/NRwQkZxrdiPmW8b69B5nMKQ==, integrity: sha512-O9rrGwCTzzsVFe06WOKUx7f9rkPg396ugWkMX6O0M15EF1a3ykqH7QX1uxVhFS0NwvWDnIeJYe7NG1uf1BwR+w==,
registry: https://registry.npm.taobao.org/, registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/@volar/transforms/download/@volar/transforms-0.30.6.tgz tarball: https://registry.npmmirror.com/@volar/transforms/download/@volar/transforms-0.31.1.tgz
} }
name: '@volar/transforms' name: '@volar/transforms'
version: 0.30.6 version: 0.31.1
dependencies: dependencies:
'@volar/shared': registry.npmmirror.com/@volar/shared/0.30.6 '@volar/shared': registry.npmmirror.com/@volar/shared/0.31.1
vscode-languageserver-types: registry.npmmirror.com/vscode-languageserver-types/3.17.0-next.6 vscode-languageserver-types: registry.npmmirror.com/vscode-languageserver-types/3.17.0-next.6
dev: true dev: true
registry.npmmirror.com/@volar/vue-code-gen/0.30.6: registry.npmmirror.com/@volar/vue-code-gen/0.31.1:
resolution: resolution:
{ {
integrity: sha512-UGpbOuC5ZxT2GXvkq2IWUuca9IDJVaaywWparKW0SwPFOZaMM2ivHLOfQpiuPqDUKTZLGK3fQuBWuXSTl+GIbA==, integrity: sha512-MBMqhE+Z7xt2MSeQQA4ld0qx894gr5eLFWkTORdNoCbK8+02oB3yrZVr3T+i9jprjiV6svXKBoyk0RZ6YsgNqw==,
registry: https://registry.npm.taobao.org/, registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/@volar/vue-code-gen/download/@volar/vue-code-gen-0.30.6.tgz tarball: https://registry.npmmirror.com/@volar/vue-code-gen/download/@volar/vue-code-gen-0.31.1.tgz
} }
name: '@volar/vue-code-gen' name: '@volar/vue-code-gen'
version: 0.30.6 version: 0.31.1
dependencies: dependencies:
'@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.30.6 '@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.31.1
'@volar/shared': registry.npmmirror.com/@volar/shared/0.30.6 '@volar/shared': registry.npmmirror.com/@volar/shared/0.31.1
'@volar/source-map': registry.npmmirror.com/@volar/source-map/0.30.6 '@volar/source-map': registry.npmmirror.com/@volar/source-map/0.31.1
'@vue/compiler-core': registry.npmmirror.com/@vue/compiler-core/3.2.28 '@vue/compiler-core': registry.npmmirror.com/@vue/compiler-core/3.2.28
'@vue/compiler-dom': registry.npmmirror.com/@vue/compiler-dom/3.2.28 '@vue/compiler-dom': registry.npmmirror.com/@vue/compiler-dom/3.2.28
'@vue/shared': registry.npmmirror.com/@vue/shared/3.2.28 '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.28
@ -9129,7 +9199,7 @@ packages:
boolbase: registry.nlark.com/boolbase/1.0.0 boolbase: registry.nlark.com/boolbase/1.0.0
css-what: registry.npmmirror.com/css-what/5.1.0 css-what: registry.npmmirror.com/css-what/5.1.0
domhandler: registry.npmmirror.com/domhandler/4.3.0 domhandler: registry.npmmirror.com/domhandler/4.3.0
domutils: registry.npmmirror.com/domutils/2.8.0 domutils: registry.nlark.com/domutils/2.8.0
nth-check: registry.nlark.com/nth-check/2.0.1 nth-check: registry.nlark.com/nth-check/2.0.1
dev: true dev: true
@ -9299,46 +9369,6 @@ packages:
version: 1.1.0 version: 1.1.0
dev: true dev: true
registry.npmmirror.com/dom-serializer/0.2.2:
resolution:
{
integrity: sha1-GvuB9TNxcXXUeGVd68XjMtn5u1E=,
registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/dom-serializer/download/dom-serializer-0.2.2.tgz
}
name: dom-serializer
version: 0.2.2
dependencies:
domelementtype: registry.nlark.com/domelementtype/2.2.0
entities: registry.nlark.com/entities/2.2.0
dev: true
registry.npmmirror.com/dom-serializer/1.3.2:
resolution:
{
integrity: sha1-YgZDfTLO767HFhgDIwx6ILwbTZE=,
registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/dom-serializer/download/dom-serializer-1.3.2.tgz
}
name: dom-serializer
version: 1.3.2
dependencies:
domelementtype: registry.nlark.com/domelementtype/2.2.0
domhandler: registry.npmmirror.com/domhandler/4.3.0
entities: registry.nlark.com/entities/2.2.0
dev: true
registry.npmmirror.com/domelementtype/2.2.0:
resolution:
{
integrity: sha1-mgtsJ4LtahxzI9QiZxg9+b2LHVc=,
registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/domelementtype/download/domelementtype-2.2.0.tgz
}
name: domelementtype
version: 2.2.0
dev: true
registry.npmmirror.com/domhandler/2.4.2: registry.npmmirror.com/domhandler/2.4.2:
resolution: resolution:
{ {
@ -9366,35 +9396,6 @@ packages:
domelementtype: registry.nlark.com/domelementtype/2.2.0 domelementtype: registry.nlark.com/domelementtype/2.2.0
dev: true dev: true
registry.npmmirror.com/domutils/1.7.0:
resolution:
{
integrity: sha1-Vuo0HoNOBuZ0ivehyyXaZ+qfjCo=,
registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/domutils/download/domutils-1.7.0.tgz
}
name: domutils
version: 1.7.0
dependencies:
dom-serializer: registry.npmmirror.com/dom-serializer/0.2.2
domelementtype: registry.nlark.com/domelementtype/1.3.1
dev: true
registry.npmmirror.com/domutils/2.8.0:
resolution:
{
integrity: sha1-RDfe9dtuLR9dbuhZvZXKfQIEgTU=,
registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/domutils/download/domutils-2.8.0.tgz
}
name: domutils
version: 2.8.0
dependencies:
dom-serializer: registry.npmmirror.com/dom-serializer/1.3.2
domelementtype: registry.nlark.com/domelementtype/2.2.0
domhandler: registry.npmmirror.com/domhandler/4.3.0
dev: true
registry.npmmirror.com/echarts-wordcloud/2.0.0_echarts@5.2.2: registry.npmmirror.com/echarts-wordcloud/2.0.0_echarts@5.2.2:
resolution: resolution:
{ {
@ -9436,22 +9437,22 @@ packages:
version: 1.4.30 version: 1.4.30
dev: true dev: true
registry.npmmirror.com/element-plus/1.3.0-beta.5_vue@3.2.26: registry.npmmirror.com/element-plus/1.3.0-beta.7_vue@3.2.26:
resolution: resolution:
{ {
integrity: sha512-su0sHN4ZkR5ISyP1McyiqY5wqrgZgKq0El0lSohjvjEWR3ODlgdmMfQolV0ZqTXKlO2mS16hO7nTFwX9PvZNTQ==, integrity: sha512-zrkw0OqhJG70oA+O796HK0IU1KSHboQbHcSeQVqhWLxmv/rEHOzEAcRKKeOACQFoJY/EU7CKJVjlV+Gaww1ccA==,
registry: https://registry.npm.taobao.org/, registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/element-plus/download/element-plus-1.3.0-beta.5.tgz tarball: https://registry.npmmirror.com/element-plus/download/element-plus-1.3.0-beta.7.tgz
} }
id: registry.npmmirror.com/element-plus/1.3.0-beta.5 id: registry.npmmirror.com/element-plus/1.3.0-beta.7
name: element-plus name: element-plus
version: 1.3.0-beta.5 version: 1.3.0-beta.7
peerDependencies: peerDependencies:
vue: ^3.2.0 vue: ^3.2.0
dependencies: dependencies:
'@ctrl/tinycolor': registry.nlark.com/@ctrl/tinycolor/3.4.0 '@ctrl/tinycolor': registry.nlark.com/@ctrl/tinycolor/3.4.0
'@element-plus/icons-vue': registry.npmmirror.com/@element-plus/icons-vue/0.2.4_vue@3.2.26 '@element-plus/icons-vue': registry.npmmirror.com/@element-plus/icons-vue/0.2.6_vue@3.2.26
'@popperjs/core': registry.npmmirror.com/@popperjs/core/2.11.0 '@popperjs/core': registry.npmmirror.com/@popperjs/core/2.11.2
'@vueuse/core': registry.npmmirror.com/@vueuse/core/7.5.4_vue@3.2.26 '@vueuse/core': registry.npmmirror.com/@vueuse/core/7.5.4_vue@3.2.26
async-validator: registry.npmmirror.com/async-validator/4.0.7 async-validator: registry.npmmirror.com/async-validator/4.0.7
dayjs: registry.npmmirror.com/dayjs/1.10.7 dayjs: registry.npmmirror.com/dayjs/1.10.7
@ -10513,7 +10514,7 @@ packages:
dependencies: dependencies:
domelementtype: registry.nlark.com/domelementtype/1.3.1 domelementtype: registry.nlark.com/domelementtype/1.3.1
domhandler: registry.npmmirror.com/domhandler/2.4.2 domhandler: registry.npmmirror.com/domhandler/2.4.2
domutils: registry.npmmirror.com/domutils/1.7.0 domutils: registry.nlark.com/domutils/1.7.0
entities: registry.nlark.com/entities/1.1.2 entities: registry.nlark.com/entities/1.1.2
inherits: registry.nlark.com/inherits/2.0.4 inherits: registry.nlark.com/inherits/2.0.4
readable-stream: registry.nlark.com/readable-stream/3.6.0 readable-stream: registry.nlark.com/readable-stream/3.6.0
@ -10531,7 +10532,7 @@ packages:
dependencies: dependencies:
domelementtype: registry.nlark.com/domelementtype/2.2.0 domelementtype: registry.nlark.com/domelementtype/2.2.0
domhandler: registry.npmmirror.com/domhandler/4.3.0 domhandler: registry.npmmirror.com/domhandler/4.3.0
domutils: registry.npmmirror.com/domutils/2.8.0 domutils: registry.nlark.com/domutils/2.8.0
entities: registry.nlark.com/entities/2.2.0 entities: registry.nlark.com/entities/2.2.0
dev: true dev: true
@ -10540,14 +10541,14 @@ packages:
{ {
integrity: sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==, integrity: sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==,
registry: https://registry.npm.taobao.org/, registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/htmlparser2/download/htmlparser2-7.2.0.tgz tarball: https://registry.npmmirror.com/htmlparser2/download/htmlparser2-7.2.0.tgz?cache=0&sync_timestamp=1636641904600&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fhtmlparser2%2Fdownload%2Fhtmlparser2-7.2.0.tgz
} }
name: htmlparser2 name: htmlparser2
version: 7.2.0 version: 7.2.0
dependencies: dependencies:
domelementtype: registry.npmmirror.com/domelementtype/2.2.0 domelementtype: registry.nlark.com/domelementtype/2.2.0
domhandler: registry.npmmirror.com/domhandler/4.3.0 domhandler: registry.npmmirror.com/domhandler/4.3.0
domutils: registry.npmmirror.com/domutils/2.8.0 domutils: registry.nlark.com/domutils/2.8.0
entities: registry.nlark.com/entities/3.0.1 entities: registry.nlark.com/entities/3.0.1
dev: true dev: true
@ -12194,18 +12195,6 @@ packages:
strip-ansi: registry.npmmirror.com/strip-ansi/6.0.1 strip-ansi: registry.npmmirror.com/strip-ansi/6.0.1
dev: true dev: true
registry.npmmirror.com/to-fast-properties/2.0.0:
resolution:
{
integrity: sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=,
registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/to-fast-properties/download/to-fast-properties-2.0.0.tgz
}
name: to-fast-properties
version: 2.0.0
engines: { node: '>=4' }
dev: true
registry.npmmirror.com/to-object-path/0.3.0: registry.npmmirror.com/to-object-path/0.3.0:
resolution: resolution:
{ {
@ -12654,37 +12643,37 @@ packages:
version: 3.17.0-next.6 version: 3.17.0-next.6
dev: true dev: true
registry.npmmirror.com/vscode-pug-languageservice/0.30.6: registry.npmmirror.com/vscode-pug-languageservice/0.31.1:
resolution: resolution:
{ {
integrity: sha512-oHXKmHaxLxVYDY6dOmxpm0YfilGgohIMEcE/ahK9O+0lvhgZ4xjEOdP27QcZs90fv92eOWf3CU9tgg4fR6e3+w==, integrity: sha512-71aQbVF3RjE+dUbUA/DnL1oGaLXXIMEy5z4TkE/irO/qodMjfwVbW/bxMCBwrVrXmIObIMlsWYPD+S/+EE3CXQ==,
registry: https://registry.npm.taobao.org/, registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/vscode-pug-languageservice/download/vscode-pug-languageservice-0.30.6.tgz tarball: https://registry.npmmirror.com/vscode-pug-languageservice/download/vscode-pug-languageservice-0.31.1.tgz
} }
name: vscode-pug-languageservice name: vscode-pug-languageservice
version: 0.30.6 version: 0.31.1
dependencies: dependencies:
'@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.30.6 '@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.31.1
'@volar/shared': registry.npmmirror.com/@volar/shared/0.30.6 '@volar/shared': registry.npmmirror.com/@volar/shared/0.31.1
'@volar/source-map': registry.npmmirror.com/@volar/source-map/0.30.6 '@volar/source-map': registry.npmmirror.com/@volar/source-map/0.31.1
'@volar/transforms': registry.npmmirror.com/@volar/transforms/0.30.6 '@volar/transforms': registry.npmmirror.com/@volar/transforms/0.31.1
pug-lexer: registry.nlark.com/pug-lexer/5.0.1 pug-lexer: registry.nlark.com/pug-lexer/5.0.1
pug-parser: registry.nlark.com/pug-parser/6.0.0 pug-parser: registry.nlark.com/pug-parser/6.0.0
vscode-languageserver-textdocument: registry.npmmirror.com/vscode-languageserver-textdocument/1.0.3 vscode-languageserver-textdocument: registry.npmmirror.com/vscode-languageserver-textdocument/1.0.3
vscode-languageserver-types: registry.npmmirror.com/vscode-languageserver-types/3.17.0-next.6 vscode-languageserver-types: registry.npmmirror.com/vscode-languageserver-types/3.17.0-next.6
dev: true dev: true
registry.npmmirror.com/vscode-typescript-languageservice/0.30.6: registry.npmmirror.com/vscode-typescript-languageservice/0.31.1:
resolution: resolution:
{ {
integrity: sha512-Dni0VnMe01QkSvO0z7yIIy+vSll6hWCNtuuWvmBNoHAnFlndgq4OibPrpabv2iv4Lmq+66p40kqGcDg/bpjx5Q==, integrity: sha512-qJlkrznmRJGHAxIclfnAuJSbNfmKwDfAn7o3PLM7bBqtBvJG6HAFCBXaBWaE1kkM/ELG20Dn8Xi7lCfT15DlpA==,
registry: https://registry.npm.taobao.org/, registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/vscode-typescript-languageservice/download/vscode-typescript-languageservice-0.30.6.tgz tarball: https://registry.npmmirror.com/vscode-typescript-languageservice/download/vscode-typescript-languageservice-0.31.1.tgz
} }
name: vscode-typescript-languageservice name: vscode-typescript-languageservice
version: 0.30.6 version: 0.31.1
dependencies: dependencies:
'@volar/shared': registry.npmmirror.com/@volar/shared/0.30.6 '@volar/shared': registry.npmmirror.com/@volar/shared/0.31.1
semver: registry.nlark.com/semver/7.3.5 semver: registry.nlark.com/semver/7.3.5
upath: registry.nlark.com/upath/2.0.1 upath: registry.nlark.com/upath/2.0.1
vscode-languageserver-protocol: registry.npmmirror.com/vscode-languageserver-protocol/3.17.0-next.12 vscode-languageserver-protocol: registry.npmmirror.com/vscode-languageserver-protocol/3.17.0-next.12
@ -12714,22 +12703,22 @@ packages:
version: 3.0.3 version: 3.0.3
dev: true dev: true
registry.npmmirror.com/vscode-vue-languageservice/0.30.6: registry.npmmirror.com/vscode-vue-languageservice/0.31.1:
resolution: resolution:
{ {
integrity: sha512-ZDaW6F2WK0LXt9RpwziKEvhfNxNmpx3ULLfPCGc+jIkM+u00gIB4i2K/5F99yNzbvrtxcgb3emFRH5FBlmmWDQ==, integrity: sha512-7HY4VkD00iyfWyWpJcl3zObnsa9gBKGjTtrWflFR0SqGHMsccfh7QXdrPmgy/2nFRkD6n60XU7eSYg2rN/QexA==,
registry: https://registry.npm.taobao.org/, registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/vscode-vue-languageservice/download/vscode-vue-languageservice-0.30.6.tgz tarball: https://registry.npmmirror.com/vscode-vue-languageservice/download/vscode-vue-languageservice-0.31.1.tgz
} }
name: vscode-vue-languageservice name: vscode-vue-languageservice
version: 0.30.6 version: 0.31.1
dependencies: dependencies:
'@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.30.6 '@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.31.1
'@volar/html2pug': registry.npmmirror.com/@volar/html2pug/0.30.6 '@volar/html2pug': registry.npmmirror.com/@volar/html2pug/0.31.1
'@volar/shared': registry.npmmirror.com/@volar/shared/0.30.6 '@volar/shared': registry.npmmirror.com/@volar/shared/0.31.1
'@volar/source-map': registry.npmmirror.com/@volar/source-map/0.30.6 '@volar/source-map': registry.npmmirror.com/@volar/source-map/0.31.1
'@volar/transforms': registry.npmmirror.com/@volar/transforms/0.30.6 '@volar/transforms': registry.npmmirror.com/@volar/transforms/0.31.1
'@volar/vue-code-gen': registry.npmmirror.com/@volar/vue-code-gen/0.30.6 '@volar/vue-code-gen': registry.npmmirror.com/@volar/vue-code-gen/0.31.1
'@vscode/emmet-helper': registry.npmmirror.com/@vscode/emmet-helper/2.8.3 '@vscode/emmet-helper': registry.npmmirror.com/@vscode/emmet-helper/2.8.3
'@vue/reactivity': registry.npmmirror.com/@vue/reactivity/3.2.28 '@vue/reactivity': registry.npmmirror.com/@vue/reactivity/3.2.28
'@vue/shared': registry.npmmirror.com/@vue/shared/3.2.28 '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.28
@ -12739,8 +12728,8 @@ packages:
vscode-json-languageservice: registry.npmmirror.com/vscode-json-languageservice/4.1.10 vscode-json-languageservice: registry.npmmirror.com/vscode-json-languageservice/4.1.10
vscode-languageserver-protocol: registry.npmmirror.com/vscode-languageserver-protocol/3.17.0-next.12 vscode-languageserver-protocol: registry.npmmirror.com/vscode-languageserver-protocol/3.17.0-next.12
vscode-languageserver-textdocument: registry.npmmirror.com/vscode-languageserver-textdocument/1.0.3 vscode-languageserver-textdocument: registry.npmmirror.com/vscode-languageserver-textdocument/1.0.3
vscode-pug-languageservice: registry.npmmirror.com/vscode-pug-languageservice/0.30.6 vscode-pug-languageservice: registry.npmmirror.com/vscode-pug-languageservice/0.31.1
vscode-typescript-languageservice: registry.npmmirror.com/vscode-typescript-languageservice/0.30.6 vscode-typescript-languageservice: registry.npmmirror.com/vscode-typescript-languageservice/0.31.1
dev: true dev: true
registry.npmmirror.com/vue-demi/0.12.1_vue@3.2.26: registry.npmmirror.com/vue-demi/0.12.1_vue@3.2.26:
@ -12830,23 +12819,23 @@ packages:
vue: registry.npmmirror.com/vue/3.2.26 vue: registry.npmmirror.com/vue/3.2.26
dev: false dev: false
registry.npmmirror.com/vue-tsc/0.30.6_typescript@4.5.5: registry.npmmirror.com/vue-tsc/0.31.1_typescript@4.5.5:
resolution: resolution:
{ {
integrity: sha512-p+lemuubzFgwr1Az3pqQ70uvWraf36qTrKkC6C7anv5S1G3aPerc4eY5Rjz3eVDOkK94E+KeBHevvpZbmVwvHA==, integrity: sha512-pyLQG1fCA02is6NAL0uY5SKxDfjJRI167x89iRz0gWOB0tUng6NjJZicE+Oh+3ZuN/LJ3J/wKfdW7O+hnfhxdg==,
registry: https://registry.npm.taobao.org/, registry: https://registry.npm.taobao.org/,
tarball: https://registry.npmmirror.com/vue-tsc/download/vue-tsc-0.30.6.tgz tarball: https://registry.npmmirror.com/vue-tsc/download/vue-tsc-0.31.1.tgz
} }
id: registry.npmmirror.com/vue-tsc/0.30.6 id: registry.npmmirror.com/vue-tsc/0.31.1
name: vue-tsc name: vue-tsc
version: 0.30.6 version: 0.31.1
hasBin: true hasBin: true
peerDependencies: peerDependencies:
typescript: '*' typescript: '*'
dependencies: dependencies:
'@volar/shared': registry.npmmirror.com/@volar/shared/0.30.6 '@volar/shared': registry.npmmirror.com/@volar/shared/0.31.1
typescript: registry.npmmirror.com/typescript/4.5.5 typescript: registry.npmmirror.com/typescript/4.5.5
vscode-vue-languageservice: registry.npmmirror.com/vscode-vue-languageservice/0.30.6 vscode-vue-languageservice: registry.npmmirror.com/vscode-vue-languageservice/0.31.1
dev: true dev: true
registry.npmmirror.com/vue-types/4.1.1_vue@3.2.26: registry.npmmirror.com/vue-types/4.1.1_vue@3.2.26:

11
src/App.vue
View File

@ -3,6 +3,11 @@ import { computed } from 'vue'
import { useAppStore } from '@/store/modules/app' import { useAppStore } from '@/store/modules/app'
import { ConfigGlobal } from '@/components/ConfigGlobal' import { ConfigGlobal } from '@/components/ConfigGlobal'
import { isDark } from '@/utils/is' import { isDark } from '@/utils/is'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('app')
const appStore = useAppStore() const appStore = useAppStore()
@ -20,12 +25,12 @@ initDark()
<template> <template>
<ConfigGlobal :size="currentSize"> <ConfigGlobal :size="currentSize">
<RouterView :class="{ 'v-grey__mode': greyMode }" /> <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
</ConfigGlobal> </ConfigGlobal>
</template> </template>
<style lang="less"> <style lang="less">
@prefix-cls: ~'@{namespace}-grey'; @prefix-cls: ~'@{namespace}-app';
.size { .size {
width: 100%; width: 100%;
@ -44,7 +49,7 @@ body {
} }
} }
.@{prefix-cls}__mode { .@{prefix-cls}-grey-mode {
-webkit-filter: grayscale(100%); -webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%); -moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); -ms-filter: grayscale(100%);

1
src/assets/svgs/peoples.svg Normal file
View File

@ -0,0 +1 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M95.648 118.762c0 5.035-3.563 9.121-7.979 9.121H7.98c-4.416 0-7.979-4.086-7.979-9.121C0 100.519 15.408 83.47 31.152 76.75c-9.099-6.43-15.216-17.863-15.216-30.987v-9.128c0-20.16 14.293-36.518 31.893-36.518s31.894 16.358 31.894 36.518v9.122c0 13.137-6.123 24.556-15.216 30.993 15.738 6.726 31.141 23.769 31.141 42.012z"/><path d="M106.032 118.252h15.867c3.376 0 6.101-3.125 6.101-6.972 0-13.957-11.787-26.984-23.819-32.123 6.955-4.919 11.638-13.66 11.638-23.704v-6.985c0-15.416-10.928-27.926-24.39-27.926-1.674 0-3.306.193-4.89.561 1.936 4.713 3.018 9.974 3.018 15.526v9.121c0 13.137-3.056 23.111-11.066 30.993 14.842 4.41 27.312 23.42 27.541 41.509z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 731 B

10
src/components/Backtop/src/Backtop.vue
View File

@ -1,7 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { ElBacktop } from 'element-plus' import { ElBacktop } from 'element-plus'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls, variables } = useDesign()
const prefixCls = getPrefixCls('backtop')
</script> </script>
<template> <template>
<ElBacktop target=".v-content .el-scrollbar__wrap" /> <ElBacktop
:class="`${prefixCls}-backtop`"
:target="`.${variables.namespace}-layout-content-scrollbar .${variables.elNamespace}-scrollbar__wrap`"
/>
</template> </template>

24
src/components/Breadcrumb/src/Breadcrumb.vue
View File

@ -9,6 +9,11 @@ import type { RouteLocationNormalizedLoaded, RouteMeta } from 'vue-router'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { Icon } from '@/components/Icon' import { Icon } from '@/components/Icon'
import { useAppStore } from '@/store/modules/app' import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('breadcrumb')
const appStore = useAppStore() const appStore = useAppStore()
@ -72,7 +77,7 @@ export default defineComponent({
) )
return () => ( return () => (
<ElBreadcrumb separator="/" class="flex items-center h-full ml-[10px]"> <ElBreadcrumb separator="/" class={`${prefixCls} flex items-center h-full ml-[10px]`}>
<TransitionGroup appear enter-active-class="animate__animated animate__fadeInRight"> <TransitionGroup appear enter-active-class="animate__animated animate__fadeInRight">
{renderBreadcrumb()} {renderBreadcrumb()}
</TransitionGroup> </TransitionGroup>
@ -83,10 +88,12 @@ export default defineComponent({
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
:deep(.el-breadcrumb__item) { @prefix-cls: ~'@{namespace}-breadcrumb';
display: flex;
.el-breadcrumb__inner { .@{prefix-cls} {
:deep(&__item) {
display: flex;
.@{prefix-cls}__inner {
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--top-header-text-color); color: var(--top-header-text-color);
@ -97,8 +104,8 @@ export default defineComponent({
} }
} }
:deep(.el-breadcrumb__item):not(:last-child) { :deep(&__item):not(:last-child) {
.el-breadcrumb__inner { .@{prefix-cls}__inner {
color: var(--top-header-text-color); color: var(--top-header-text-color);
&:hover { &:hover {
@ -107,8 +114,8 @@ export default defineComponent({
} }
} }
:deep(.el-breadcrumb__item):last-child { :deep(&__item):last-child {
.el-breadcrumb__inner { .@{prefix-cls}__inner {
color: var(--el-text-color-placeholder); color: var(--el-text-color-placeholder);
&:hover { &:hover {
@ -116,4 +123,5 @@ export default defineComponent({
} }
} }
} }
}
</style> </style>

7
src/components/Collapse/src/Collapse.vue
View File

@ -2,6 +2,11 @@
import { computed, unref } from 'vue' import { computed, unref } from 'vue'
import { useAppStore } from '@/store/modules/app' import { useAppStore } from '@/store/modules/app'
import { propTypes } from '@/utils/propTypes' import { propTypes } from '@/utils/propTypes'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('collapse')
defineProps({ defineProps({
color: propTypes.string.def('') color: propTypes.string.def('')
@ -18,7 +23,7 @@ const toggleCollapse = () => {
</script> </script>
<template> <template>
<div> <div :class="prefixCls">
<Icon <Icon
:size="18" :size="18"
:icon="collapse ? 'ant-design:menu-unfold-outlined' : 'ant-design:menu-fold-outlined'" :icon="collapse ? 'ant-design:menu-unfold-outlined' : 'ant-design:menu-fold-outlined'"

13
src/components/ConfigGlobal/src/ConfigGlobal.vue
View File

@ -6,6 +6,11 @@ import { useLocaleStore } from '@/store/modules/locale'
import { useWindowSize } from '@vueuse/core' import { useWindowSize } from '@vueuse/core'
import { useAppStore } from '@/store/modules/app' import { useAppStore } from '@/store/modules/app'
import { setCssVar } from '@/utils' import { setCssVar } from '@/utils'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls, variables } = useDesign()
const prefixCls = getPrefixCls('config-global')
const appStore = useAppStore() const appStore = useAppStore()
@ -48,7 +53,13 @@ const currentLocale = computed(() => localeStore.currentLocale)
</script> </script>
<template> <template>
<ElConfigProvider :locale="currentLocale.elLocale" :message="{ max: 1 }" :size="size"> <ElConfigProvider
:clss="prefixCls"
:namespace="variables.elNamespace"
:locale="currentLocale.elLocale"
:message="{ max: 1 }"
:size="size"
>
<slot></slot> <slot></slot>
</ElConfigProvider> </ElConfigProvider>
</template> </template>

12
src/components/ContextMenu/src/ContextMenu.vue
View File

@ -2,6 +2,11 @@
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus' import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
import { PropType } from 'vue' import { PropType } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('context-menu')
const { t } = useI18n() const { t } = useI18n()
@ -23,6 +28,7 @@ const command = (item: contextMenuSchema) => {
<template> <template>
<ElDropdown <ElDropdown
:class="prefixCls"
:trigger="trigger" :trigger="trigger"
placement="bottom-start" placement="bottom-start"
@command="command" @command="command"
@ -44,9 +50,3 @@ const command = (item: contextMenuSchema) => {
</template> </template>
</ElDropdown> </ElDropdown>
</template> </template>
<style lang="less">
.v-context-menu-popper {
min-width: 150px;
}
</style>

3
src/components/CountTo/index.ts
View File

@ -0,0 +1,3 @@
import CountTo from './src/CountTo.vue'
export { CountTo }

9
src/components/CountTo/src/CountTo.vue
View File

@ -2,12 +2,17 @@
import { reactive, computed, watch, onMounted, unref, toRef, PropType } from 'vue' import { reactive, computed, watch, onMounted, unref, toRef, PropType } from 'vue'
import { isNumber } from '@/utils/is' import { isNumber } from '@/utils/is'
import { propTypes } from '@/utils/propTypes' import { propTypes } from '@/utils/propTypes'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('count-to')
const props = defineProps({ const props = defineProps({
startVal: propTypes.number.def(0), startVal: propTypes.number.def(0),
endVal: propTypes.number.def(2021), endVal: propTypes.number.def(2021),
duration: propTypes.number.def(3000), duration: propTypes.number.def(3000),
autoplay: propTypes.bool.def(false), autoplay: propTypes.bool.def(true),
decimals: propTypes.number.validate((value: number) => value >= 0).def(0), decimals: propTypes.number.validate((value: number) => value >= 0).def(0),
decimal: propTypes.string.def('.'), decimal: propTypes.string.def('.'),
separator: propTypes.string.def(','), separator: propTypes.string.def(','),
@ -169,7 +174,7 @@ defineExpose({
</script> </script>
<template> <template>
<span> <span :class="prefixCls">
{{ displayValue }} {{ displayValue }}
</span> </span>
</template> </template>

7
src/components/Echart/src/Echart.vue
View File

@ -7,6 +7,11 @@ import { propTypes } from '@/utils/propTypes'
import { computed, PropType, ref, unref, watch, onMounted, onBeforeUnmount, onActivated } from 'vue' import { computed, PropType, ref, unref, watch, onMounted, onBeforeUnmount, onActivated } from 'vue'
import { useAppStore } from '@/store/modules/app' import { useAppStore } from '@/store/modules/app'
import { isString } from '@/utils/is' import { isString } from '@/utils/is'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('echart')
const appStore = useAppStore() const appStore = useAppStore()
@ -106,5 +111,5 @@ onActivated(() => {
</script> </script>
<template> <template>
<div ref="elRef" :class="$attrs.class" :style="styles" /> <div ref="elRef" :class="[$attrs.class, prefixCls]" :style="styles" />
</template> </template>

12
src/components/Footer/src/Footer.vue
View File

@ -1,6 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { useAppStore } from '@/store/modules/app' import { useAppStore } from '@/store/modules/app'
import { computed } from 'vue' import { computed } from 'vue'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('footer')
const appStore = useAppStore() const appStore = useAppStore()
@ -8,5 +13,10 @@ const title = computed(() => appStore.getTitle)
</script> </script>
<template> <template>
<div class="text-center text-[var(--el-text-color-placeholder)]">Copyright ©2021 {{ title }}</div> <div
:class="prefixCls"
class="text-center text-[var(--el-text-color-placeholder)] bg-[var(--app-contnet-bg-color)] h-[var(--app-footer-height)] leading-[var(--app-footer-height)]"
>
Copyright ©2021 {{ title }}
</div>
</template> </template>

7
src/components/Form/src/Form.vue
View File

@ -15,6 +15,11 @@ import {
import { useRenderSelect } from './components/useRenderSelect' import { useRenderSelect } from './components/useRenderSelect'
import { useRenderRadio } from './components/useRenderRadio' import { useRenderRadio } from './components/useRenderRadio'
import { useRenderChcekbox } from './components/useRenderChcekbox' import { useRenderChcekbox } from './components/useRenderChcekbox'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('form')
export default defineComponent({ export default defineComponent({
name: 'Form', name: 'Form',
@ -194,7 +199,7 @@ export default defineComponent({
} }
return () => ( return () => (
<ElForm ref={elFormRef} {...getFormBindValue()} model={formModel} class="v-form"> <ElForm ref={elFormRef} {...getFormBindValue()} model={formModel} class={prefixCls}>
{{ {{
// 如果需要自定义，就什么都不渲染，而是提供默认插槽 // 如果需要自定义，就什么都不渲染，而是提供默认插槽
default: () => (isCustom ? getSlot(slots, 'default') : renderWrap()) default: () => (isCustom ? getSlot(slots, 'default') : renderWrap())

7
src/components/Icon/src/Icon.vue
View File

@ -3,6 +3,11 @@ import { computed, unref, ref, watch, nextTick } from 'vue'
import { ElIcon } from 'element-plus' import { ElIcon } from 'element-plus'
import { propTypes } from '@/utils/propTypes' import { propTypes } from '@/utils/propTypes'
import Iconify from '@purge-icons/generated' import Iconify from '@purge-icons/generated'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('icon')
const props = defineProps({ const props = defineProps({
// icon name // icon name
@ -61,7 +66,7 @@ watch(
</script> </script>
<template> <template>
<ElIcon class="v-icon" :size="size" :color="color"> <ElIcon :class="prefixCls" :size="size" :color="color">
<svg v-if="isLocal" aria-hidden="true"> <svg v-if="isLocal" aria-hidden="true">
<use :xlink:href="symbolId" /> <use :xlink:href="symbolId" />
</svg> </svg>

14
src/components/InputPassword/src/InputPassword.vue
View File

@ -5,6 +5,11 @@ import { propTypes } from '@/utils/propTypes'
import { useConfigGlobal } from '@/hooks/web/useConfigGlobal' import { useConfigGlobal } from '@/hooks/web/useConfigGlobal'
import { zxcvbn } from '@zxcvbn-ts/core' import { zxcvbn } from '@zxcvbn-ts/core'
import type { ZxcvbnResult } from '@zxcvbn-ts/core' import type { ZxcvbnResult } from '@zxcvbn-ts/core'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('input-password')
const props = defineProps({ const props = defineProps({
// 是否显示密码强度 // 是否显示密码强度
@ -55,7 +60,7 @@ const getIconName = computed(() =>
</script> </script>
<template> <template>
<div :class="['v-input-password', `v-input-password--${configGlobal?.size}`]"> <div :class="[prefixCls, `${prefixCls}--${configGlobal?.size}`]">
<ElInput v-bind="$attrs" v-model="valueRef" :type="textType"> <ElInput v-bind="$attrs" v-model="valueRef" :type="textType">
<template #suffix> <template #suffix>
<Icon class="el-input__icon cursor-pointer" :icon="getIconName" @click="changeTextType" /> <Icon class="el-input__icon cursor-pointer" :icon="getIconName" @click="changeTextType" />
@ -63,9 +68,10 @@ const getIconName = computed(() =>
</ElInput> </ElInput>
<div <div
v-if="strength" v-if="strength"
class="v-input-password__bar relative h-6px mt-10px mb-6px mr-auto ml-auto" :class="`${prefixCls}__bar`"
class="relative h-6px mt-10px mb-6px mr-auto ml-auto"
> >
<div class="v-input-password__bar--fill" :data-score="getPasswordStrength"></div> <div :class="`${prefixCls}__bar--fill`" :data-score="getPasswordStrength"></div>
</div> </div>
</div> </div>
</template> </template>
@ -74,7 +80,7 @@ const getIconName = computed(() =>
@prefix-cls: ~'@{namespace}-input-password'; @prefix-cls: ~'@{namespace}-input-password';
.@{prefix-cls} { .@{prefix-cls} {
:deep(.el-input__clear) { :deep(.@{elNamespace}-input__clear) {
margin-left: 5px; margin-left: 5px;
} }

7
src/components/LocaleDropdown/src/LocaleDropdown.vue
View File

@ -4,6 +4,11 @@ import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
import { useLocaleStore } from '@/store/modules/locale' import { useLocaleStore } from '@/store/modules/locale'
import { useLocale } from '@/hooks/web/useLocale' import { useLocale } from '@/hooks/web/useLocale'
import { propTypes } from '@/utils/propTypes' import { propTypes } from '@/utils/propTypes'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('locale-dropdown')
defineProps({ defineProps({
color: propTypes.string.def('') color: propTypes.string.def('')
@ -28,7 +33,7 @@ const setLang = (lang: LocaleType) => {
</script> </script>
<template> <template>
<ElDropdown trigger="click" @command="setLang"> <ElDropdown :class="prefixCls" trigger="click" @command="setLang">
<Icon <Icon
:size="18" :size="18"
icon="ion:language-sharp" icon="ion:language-sharp"

15
src/components/Logo/src/Logo.vue
View File

@ -1,6 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch, computed, onMounted, unref } from 'vue' import { ref, watch, computed, onMounted, unref } from 'vue'
import { useAppStore } from '@/store/modules/app' import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('logo')
const appStore = useAppStore() const appStore = useAppStore()
@ -52,10 +57,8 @@ watch(
<template> <template>
<router-link <router-link
:class="[ :class="[
'v-logo', prefixCls,
{ layout !== 'classic' ? `${prefixCls}__Top` : '',
'v-logo__Top': layout !== 'classic'
},
'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative' 'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative'
]" ]"
to="/" to="/"
@ -79,7 +82,3 @@ watch(
</div> </div>
</router-link> </router-link>
</template> </template>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-logo';
</style>

41
src/components/Menu/src/Menu.vue
View File

@ -7,6 +7,11 @@ import type { LayoutType } from '@/config/app'
import { useRenderMenuItem } from './components/useRenderMenuItem' import { useRenderMenuItem } from './components/useRenderMenuItem'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { isUrl } from '@/utils/is' import { isUrl } from '@/utils/is'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('menu')
export default defineComponent({ export default defineComponent({
name: 'Menu', name: 'Menu',
@ -66,7 +71,7 @@ export default defineComponent({
return () => ( return () => (
<div <div
class={[ class={[
`v-menu v-menu__${unref(menuMode)}`, `${prefixCls} ${prefixCls}__${unref(menuMode)}`,
'h-[100%] overflow-hidden z-100 flex-col bg-[var(--left-menu-bg-color)]', 'h-[100%] overflow-hidden z-100 flex-col bg-[var(--left-menu-bg-color)]',
{ {
'w-[var(--left-menu-min-width)]': unref(collapse) && unref(layout) !== 'cutMenu', 'w-[var(--left-menu-min-width)]': unref(collapse) && unref(layout) !== 'cutMenu',
@ -126,20 +131,20 @@ export default defineComponent({
content: ''; content: '';
} }
:deep(.el-menu) { :deep(.@{elNamespace}-menu) {
width: 100% !important; width: 100% !important;
border-right: none; border-right: none;
// 设置选中时子标题的颜色 // 设置选中时子标题的颜色
.is-active { .is-active {
& > .el-sub-menu__title { & > .@{elNamespace}-sub-menu__title {
color: var(--left-menu-text-active-color) !important; color: var(--left-menu-text-active-color) !important;
} }
} }
// 设置子菜单悬停的高亮和背景色 // 设置子菜单悬停的高亮和背景色
.el-sub-menu__title, .@{elNamespace}-sub-menu__title,
.el-menu-item { .@{elNamespace}-menu-item {
&:hover { &:hover {
color: var(--left-menu-text-active-color) !important; color: var(--left-menu-text-active-color) !important;
background-color: var(--left-menu-bg-color) !important; background-color: var(--left-menu-bg-color) !important;
@ -147,8 +152,8 @@ export default defineComponent({
} }
// 设置选中时的高亮背景和高亮颜色 // 设置选中时的高亮背景和高亮颜色
.el-sub-menu.is-active, .@{elNamespace}-sub-menu.is-active,
.el-menu-item.is-active { .@{elNamespace}-menu-item.is-active {
color: var(--left-menu-text-active-color) !important; color: var(--left-menu-text-active-color) !important;
background-color: var(--left-menu-bg-active-color) !important; background-color: var(--left-menu-bg-active-color) !important;
@ -157,7 +162,7 @@ export default defineComponent({
} }
} }
.el-menu-item.is-active { .@{elNamespace}-menu-item.is-active {
position: relative; position: relative;
&:after { &:after {
@ -166,20 +171,20 @@ export default defineComponent({
} }
// 设置子菜单的背景颜色 // 设置子菜单的背景颜色
.el-menu { .@{elNamespace}-menu {
.el-sub-menu__title, .@{elNamespace}-sub-menu__title,
.el-menu-item:not(.is-active) { .@{elNamespace}-menu-item:not(.is-active) {
background-color: var(--left-menu-bg-light-color) !important; background-color: var(--left-menu-bg-light-color) !important;
} }
} }
} }
// 折叠时的最小宽度 // 折叠时的最小宽度
:deep(.el-menu--collapse) { :deep(.@{elNamespace}-menu--collapse) {
width: var(--left-menu-min-width); width: var(--left-menu-min-width);
& > .is-active, & > .is-active,
& > .is-active > .el-sub-menu__title { & > .is-active > .@{elNamespace}-sub-menu__title {
position: relative; position: relative;
background-color: var(--left-menu-collapse-bg-active-color) !important; background-color: var(--left-menu-collapse-bg-active-color) !important;
@ -201,17 +206,17 @@ export default defineComponent({
&__horizontal { &__horizontal {
height: calc(~'var( - -top-tool-height)') !important; height: calc(~'var( - -top-tool-height)') !important;
:deep(.el-menu--horizontal) { :deep(.@{elNamespace}-menu--horizontal) {
height: calc(~'var( - -top-tool-height)'); height: calc(~'var( - -top-tool-height)');
border-bottom: none; border-bottom: none;
// 重新设置底部高亮颜色 // 重新设置底部高亮颜色
& > .el-sub-menu.is-active { & > .@{elNamespace}-sub-menu.is-active {
.el-sub-menu__title { .@{elNamespace}-sub-menu__title {
border-bottom-color: var(--el-color-primary) !important; border-bottom-color: var(--el-color-primary) !important;
} }
} }
.el-menu-item.is-active { .@{elNamespace}-menu-item.is-active {
position: relative; position: relative;
&:after { &:after {
@ -219,7 +224,7 @@ export default defineComponent({
} }
} }
.v-menu__title { .@{prefix-cls}__title {
/* stylelint-disable-next-line */ /* stylelint-disable-next-line */
max-height: calc(~'var(--top-tool-height) - 2px') !important; max-height: calc(~'var(--top-tool-height) - 2px') !important;
/* stylelint-disable-next-line */ /* stylelint-disable-next-line */

7
src/components/Screenfull/src/Screenfull.vue
View File

@ -2,6 +2,11 @@
import { Icon } from '@/components/Icon' import { Icon } from '@/components/Icon'
import { useFullscreen } from '@vueuse/core' import { useFullscreen } from '@vueuse/core'
import { propTypes } from '@/utils/propTypes' import { propTypes } from '@/utils/propTypes'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('screenfull')
defineProps({ defineProps({
color: propTypes.string.def('') color: propTypes.string.def('')
@ -15,7 +20,7 @@ const toggleFullscreen = () => {
</script> </script>
<template> <template>
<div @click="toggleFullscreen"> <div :class="prefixCls" @click="toggleFullscreen">
<Icon <Icon
:size="18" :size="18"
:icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'" :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"

8
src/components/Setting/src/Setting.vue
View File

@ -12,6 +12,11 @@ import InterfaceDisplay from './components/InterfaceDisplay.vue'
import LayoutRadioPicker from './components/LayoutRadioPicker.vue' import LayoutRadioPicker from './components/LayoutRadioPicker.vue'
import { useCache } from '@/hooks/web/useCache' import { useCache } from '@/hooks/web/useCache'
import { useClipboard } from '@vueuse/core' import { useClipboard } from '@vueuse/core'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('setting')
const appStore = useAppStore() const appStore = useAppStore()
@ -184,7 +189,8 @@ const clear = () => {
<template> <template>
<div <div
class="v-setting fixed top-[45%] right-0 w-40px h-40px text-center leading-40px bg-[var(--el-color-primary)] cursor-pointer" :class="prefixCls"
class="fixed top-[45%] right-0 w-40px h-40px text-center leading-40px bg-[var(--el-color-primary)] cursor-pointer"
@click="drawer = true" @click="drawer = true"
> >
<Icon icon="ant-design:setting-outlined" color="#fff" /> <Icon icon="ant-design:setting-outlined" color="#fff" />

9
src/components/Setting/src/components/ColorRadioPicker.vue
View File

@ -1,6 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { PropType, watch, unref, ref } from 'vue' import { PropType, watch, unref, ref } from 'vue'
import { propTypes } from '@/utils/propTypes' import { propTypes } from '@/utils/propTypes'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('color-radio-picker')
const props = defineProps({ const props = defineProps({
schema: { schema: {
@ -33,11 +38,11 @@ watch(
</script> </script>
<template> <template>
<div class="v-color-radio-picker flex flex-wrap space-x-14px"> <div :class="prefixCls" class="flex flex-wrap space-x-14px">
<span <span
v-for="(item, i) in schema" v-for="(item, i) in schema"
:key="`radio-${i}`" :key="`radio-${i}`"
class="v-color-radio-picker w-20px h-20px cursor-pointer rounded-2px border-solid border-gray-300 border-2px text-center leading-20px mb-5px" class="w-20px h-20px cursor-pointer rounded-2px border-solid border-gray-300 border-2px text-center leading-20px mb-5px"
:class="{ 'is-active': colorVal === item }" :class="{ 'is-active': colorVal === item }"
:style="{ :style="{
background: item background: item

7
src/components/Setting/src/components/InterfaceDisplay.vue
View File

@ -3,6 +3,11 @@ import { ElSwitch } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useAppStore } from '@/store/modules/app' import { useAppStore } from '@/store/modules/app'
import { computed, ref, watch } from 'vue' import { computed, ref, watch } from 'vue'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('interface-display')
const appStore = useAppStore() const appStore = useAppStore()
@ -98,7 +103,7 @@ watch(
</script> </script>
<template> <template>
<div class="v-interface-display"> <div :class="prefixCls">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<span class="text-14px">{{ t('setting.breadcrumb') }}</span> <span class="text-14px">{{ t('setting.breadcrumb') }}</span>
<ElSwitch v-model="breadcrumb" @change="breadcrumbChange" /> <ElSwitch v-model="breadcrumb" @change="breadcrumbChange" />

19
src/components/Setting/src/components/LayoutRadioPicker.vue
View File

@ -1,6 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { useAppStore } from '@/store/modules/app' import { useAppStore } from '@/store/modules/app'
import { computed } from 'vue' import { computed } from 'vue'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('layout-radio-picker')
const appStore = useAppStore() const appStore = useAppStore()
@ -8,10 +13,11 @@ const layout = computed(() => appStore.getLayout)
</script> </script>
<template> <template>
<div class="v-layout-radio-picker flex flex-wrap space-x-14px"> <div :class="prefixCls" class="flex flex-wrap space-x-14px">
<div <div
:class="[ :class="[
'v-layout-radio-picker__classic relative w-56px h-48px cursor-pointer bg-gray-300', `${prefixCls}__classic`,
'relative w-56px h-48px cursor-pointer bg-gray-300',
{ {
'is-acitve': layout === 'classic' 'is-acitve': layout === 'classic'
} }
@ -20,7 +26,8 @@ const layout = computed(() => appStore.getLayout)
></div> ></div>
<div <div
:class="[ :class="[
'v-layout-radio-picker__top-left relative w-56px h-48px cursor-pointer bg-gray-300', `${prefixCls}__top-left`,
'relative w-56px h-48px cursor-pointer bg-gray-300',
{ {
'is-acitve': layout === 'topLeft' 'is-acitve': layout === 'topLeft'
} }
@ -29,7 +36,8 @@ const layout = computed(() => appStore.getLayout)
></div> ></div>
<div <div
:class="[ :class="[
'v-layout-radio-picker__top relative w-56px h-48px cursor-pointer bg-gray-300', `${prefixCls}__top`,
'relative w-56px h-48px cursor-pointer bg-gray-300',
{ {
'is-acitve': layout === 'top' 'is-acitve': layout === 'top'
} }
@ -38,7 +46,8 @@ const layout = computed(() => appStore.getLayout)
></div> ></div>
<div <div
:class="[ :class="[
'v-layout-radio-picker__cut-menu relative w-56px h-48px cursor-pointer bg-gray-300', `${prefixCls}__cut-menu`,
'relative w-56px h-48px cursor-pointer bg-gray-300',
{ {
'is-acitve': layout === 'cutMenu' 'is-acitve': layout === 'cutMenu'
} }

7
src/components/SizeDropdown/src/SizeDropdown.vue
View File

@ -4,6 +4,11 @@ import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
import { useAppStore } from '@/store/modules/app' import { useAppStore } from '@/store/modules/app'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { propTypes } from '@/utils/propTypes' import { propTypes } from '@/utils/propTypes'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('size-dropdown')
defineProps({ defineProps({
color: propTypes.string.def('') color: propTypes.string.def('')
@ -21,7 +26,7 @@ const setCurrentSize = (size: ElememtPlusSzie) => {
</script> </script>
<template> <template>
<ElDropdown trigger="click" @command="setCurrentSize"> <ElDropdown :class="prefixCls" trigger="click" @command="setCurrentSize">
<Icon :size="18" icon="mdi:format-size" :color="color" class="cursor-pointer" /> <Icon :size="18" icon="mdi:format-size" :color="color" class="cursor-pointer" />
<template #dropdown> <template #dropdown>
<ElDropdownMenu> <ElDropdownMenu>

22
src/components/TabMenu/src/TabMenu.vue
View File

@ -10,6 +10,11 @@ import { useRouter } from 'vue-router'
import { pathResolve } from '@/utils/routerHelper' import { pathResolve } from '@/utils/routerHelper'
import { cloneDeep } from 'lodash-es' import { cloneDeep } from 'lodash-es'
import { filterMenusPath, initTabMap, tabPathMap } from './helper' import { filterMenusPath, initTabMap, tabPathMap } from './helper'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('tab-menu')
export default defineComponent({ export default defineComponent({
name: 'TabMenu', name: 'TabMenu',
@ -102,7 +107,8 @@ export default defineComponent({
return () => ( return () => (
<div <div
class={[ class={[
'v-tab-menu relative bg-[var(--left-menu-bg-color)] top-1px', prefixCls,
'relative bg-[var(--left-menu-bg-color)] top-1px',
{ {
'w-[var(--tab-menu-max-width)]': !unref(collapse), 'w-[var(--tab-menu-max-width)]': !unref(collapse),
'w-[var(--tab-menu-min-width)]': unref(collapse) 'w-[var(--tab-menu-min-width)]': unref(collapse)
@ -115,7 +121,7 @@ export default defineComponent({
{() => { {() => {
return unref(tabRouters).map((v) => { return unref(tabRouters).map((v) => {
const item = ( const item = (
v?.children?.length && v?.children?.length > 1 v.meta?.alwaysShow || (v?.children?.length && v?.children?.length > 1)
? v ? v
: { : {
...(v?.children && v?.children[0]), ...(v?.children && v?.children[0]),
@ -125,7 +131,8 @@ export default defineComponent({
return ( return (
<div <div
class={[ class={[
'v-tab-menu-item text-center text-12px relative py-12px cursor-pointer', `${prefixCls}__item`,
'text-center text-12px relative py-12px cursor-pointer',
{ {
'is-active': isActice(v.path) 'is-active': isActice(v.path)
} }
@ -147,7 +154,10 @@ export default defineComponent({
</div> </div>
</ElScrollbar> </ElScrollbar>
<div <div
class="v-tab-menu-collapse text-center h-[var(--tab-menu-collapse-height)] leading-[var(--tab-menu-collapse-height)] cursor-pointer" class={[
`${prefixCls}--collapse`,
'text-center h-[var(--tab-menu-collapse-height)] leading-[var(--tab-menu-collapse-height)] cursor-pointer'
]}
onClick={setCollapse} onClick={setCollapse}
> >
<Icon icon={unref(collapse) ? 'ep:d-arrow-right' : 'ep:d-arrow-left'}></Icon> <Icon icon={unref(collapse) ? 'ep:d-arrow-right' : 'ep:d-arrow-left'}></Icon>
@ -186,7 +196,7 @@ export default defineComponent({
content: ''; content: '';
} }
&-item { &__item {
color: var(--left-menu-text-color); color: var(--left-menu-text-color);
transition: all var(--transition-time-02); transition: all var(--transition-time-02);
@ -196,7 +206,7 @@ export default defineComponent({
} }
} }
&-collapse { &--collapse {
color: var(--left-menu-text-color); color: var(--left-menu-text-color);
background-color: var(--left-menu-bg-light-color); background-color: var(--left-menu-bg-light-color);
border-top: 1px solid var(--left-menu-border-color); border-top: 1px solid var(--left-menu-border-color);

27
src/components/TagsView/src/TagsView.vue
View File

@ -7,6 +7,11 @@ import { useTagsViewStore } from '@/store/modules/tagsView'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { filterAffixTags } from './helper' import { filterAffixTags } from './helper'
import { ContextMenu } from '@/components/ContextMenu' import { ContextMenu } from '@/components/ContextMenu'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('tags-view')
const { t } = useI18n() const { t } = useI18n()
@ -125,9 +130,10 @@ watch(
</script> </script>
<template> <template>
<div class="v-tags-view h-[var(--tags-view-height)] flex w-full relative"> <div :class="prefixCls" class="h-[var(--tags-view-height)] flex w-full relative">
<span <span
class="v-tags-view__tool w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer" :class="`${prefixCls}__tool`"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer"
> >
<Icon icon="ep:d-arrow-left" color="#333" /> <Icon icon="ep:d-arrow-left" color="#333" />
</span> </span>
@ -195,9 +201,9 @@ watch(
v-for="item in visitedViews" v-for="item in visitedViews"
:key="item.fullPath" :key="item.fullPath"
:class="[ :class="[
'v-tags-view__item', `${prefixCls}__item`,
item?.meta?.affix ? `${prefixCls}__item--affix` : '',
{ {
'v-tags-view__item--affix': item?.meta?.affix,
'is-active': isActive(item) 'is-active': isActive(item)
} }
]" ]"
@ -209,7 +215,7 @@ watch(
> >
{{ t(item?.meta?.title as string) }} {{ t(item?.meta?.title as string) }}
<Icon <Icon
class="v-tags-view__item--close" :class="`${prefixCls}__item--close`"
color="#333" color="#333"
icon="ant-design:close-outlined" icon="ant-design:close-outlined"
:size="12" :size="12"
@ -222,12 +228,14 @@ watch(
</ElScrollbar> </ElScrollbar>
</div> </div>
<span <span
class="v-tags-view__tool w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer" :class="`${prefixCls}__tool`"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer"
> >
<Icon icon="ep:d-arrow-right" color="#333" /> <Icon icon="ep:d-arrow-right" color="#333" />
</span> </span>
<span <span
class="v-tags-view__tool w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer" :class="`${prefixCls}__tool`"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer"
@click="refreshSelectedTag(selectedTag)" @click="refreshSelectedTag(selectedTag)"
> >
<Icon icon="ant-design:reload-outlined" color="#333" /> <Icon icon="ant-design:reload-outlined" color="#333" />
@ -284,7 +292,8 @@ watch(
]" ]"
> >
<span <span
class="v-tags-view__tool w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer block" :class="`${prefixCls}__tool`"
class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer block"
> >
<Icon icon="ant-design:setting-outlined" color="#333" /> <Icon icon="ant-design:setting-outlined" color="#333" />
</span> </span>
@ -296,7 +305,7 @@ watch(
@prefix-cls: ~'@{namespace}-tags-view'; @prefix-cls: ~'@{namespace}-tags-view';
.@{prefix-cls} { .@{prefix-cls} {
:deep(.el-scrollbar__view) { :deep(.@{elNamespace}-scrollbar__view) {
height: 100%; height: 100%;
} }

11
src/components/ThemeSwitch/src/ThemeSwitch.vue
View File

@ -3,6 +3,11 @@ import { ref } from 'vue'
import { useAppStore } from '@/store/modules/app' import { useAppStore } from '@/store/modules/app'
import { ElSwitch } from 'element-plus' import { ElSwitch } from 'element-plus'
import { useIcon } from '@/hooks/web/useIcon' import { useIcon } from '@/hooks/web/useIcon'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('theme-switch')
const Sun = useIcon({ icon: 'emojione-monotone:sun', color: '#fde047' }) const Sun = useIcon({ icon: 'emojione-monotone:sun', color: '#fde047' })
@ -23,7 +28,7 @@ const themeChange = (val: boolean) => {
<template> <template>
<ElSwitch <ElSwitch
class="v-theme-switch" :class="prefixCls"
v-model="isDark" v-model="isDark"
inline-prompt inline-prompt
:border-color="blackColor" :border-color="blackColor"
@ -34,7 +39,3 @@ const themeChange = (val: boolean) => {
@change="themeChange" @change="themeChange"
/> />
</template> </template>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-theme-switch';
</style>

7
src/components/UserInfo/src/UserInfo.vue
View File

@ -5,6 +5,11 @@ import { useCache } from '@/hooks/web/useCache'
import { resetRouter } from '@/router' import { resetRouter } from '@/router'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { loginOutApi } from '@/api/login' import { loginOutApi } from '@/api/login'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('user-info')
const { t } = useI18n() const { t } = useI18n()
@ -31,7 +36,7 @@ const loginOut = () => {
</script> </script>
<template> <template>
<ElDropdown trigger="click"> <ElDropdown :class="prefixCls" trigger="click">
<div class="flex items-center"> <div class="flex items-center">
<img src="@/assets/imgs/avatar.png" alt="" class="w-[calc(var(--tags-view-height)-10px)]" /> <img src="@/assets/imgs/avatar.png" alt="" class="w-[calc(var(--tags-view-height)-10px)]" />
<span class="<lg:hidden text-14px pl-[5px] text-[var(--top-header-text-color)]">Archer</span> <span class="<lg:hidden text-14px pl-[5px] text-[var(--top-header-text-color)]">Archer</span>

19
src/layout/Layout.vue
View File

@ -1,9 +1,14 @@
<script lang="tsx"> <script lang="tsx">
import { computed, defineComponent, unref } from 'vue' import { computed, defineComponent, unref } from 'vue'
import { useAppStore } from '@/store/modules/app' import { useAppStore } from '@/store/modules/app'
// import { Backtop } from '@/components/Backtop' import { Backtop } from '@/components/Backtop'
import { Setting } from '@/components/Setting' import { Setting } from '@/components/Setting'
import { useRenderLayout } from './components/useRenderLayout' import { useRenderLayout } from './components/useRenderLayout'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('layout')
const appStore = useAppStore() const appStore = useAppStore()
@ -42,7 +47,7 @@ export default defineComponent({
name: 'Layout', name: 'Layout',
setup() { setup() {
return () => ( return () => (
<section class={['v-app', `v-app__${layout.value}`, 'w-[100%] h-[100%] relative']}> <section class={[prefixCls, `${prefixCls}__${layout.value}`, 'w-[100%] h-[100%] relative']}>
{mobile.value && !collapse.value ? ( {mobile.value && !collapse.value ? (
<div <div
class="absolute top-0 left-0 w-full h-full opacity-30 z-99 bg-[var(--el-color-black)]" class="absolute top-0 left-0 w-full h-full opacity-30 z-99 bg-[var(--el-color-black)]"
@ -52,7 +57,7 @@ export default defineComponent({
{renderLayout()} {renderLayout()}
{/*<Backtop></Backtop>*/} <Backtop></Backtop>
<Setting></Setting> <Setting></Setting>
</section> </section>
@ -62,11 +67,7 @@ export default defineComponent({
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@prefix-cls: ~'@{namespace}-app'; :deep(.@{elNamespace}-scrollbar__view) {
height: 100% !important;
:deep(.@{namespace}-content) {
.el-scrollbar__view {
height: 100%;
}
} }
</style> </style>

16
src/layout/components/AppView.vue
View File

@ -22,17 +22,19 @@ const getCaches = computed((): string[] => {
<template> <template>
<section <section
:class="[ :class="[
'p-[var(--app-content-padding)] w-[100%]', 'p-[var(--app-content-padding)] w-[100%] bg-[var(--app-contnet-bg-color)]',
{ {
'!min-h-[calc(100%-calc(var(--app-content-padding)*2))]': '!min-h-[calc(100%-var(--app-footer-height))]':
fixedHeader && layout === 'classic' && footer, fixedHeader && (layout === 'classic' || layout === 'topLeft') && footer,
'!min-h-[calc(100%-var(--tags-view-height)-var(--top-tool-height)-calc(var(--app-content-padding)*2))]':
'!min-h-[calc(100%-var(--tags-view-height)-var(--top-tool-height)-var(--app-footer-height))]':
((!fixedHeader && layout === 'classic') || layout === 'top') && footer, ((!fixedHeader && layout === 'classic') || layout === 'top') && footer,
'!min-h-[calc(100%-var(--tags-view-height))]':
fixedHeader && layout === 'topLeft' && footer, '!min-h-[calc(100%-var(--tags-view-height)-var(--app-footer-height))]':
'!min-h-[calc(100%-var(--tags-view-height)-calc(var(--app-content-padding)*2))]':
!fixedHeader && layout === 'topLeft' && footer, !fixedHeader && layout === 'topLeft' && footer,
'!min-h-[calc(100%-var(--top-tool-height))]': fixedHeader && layout === 'cutMenu' && footer, '!min-h-[calc(100%-var(--top-tool-height))]': fixedHeader && layout === 'cutMenu' && footer,
'!min-h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))]': '!min-h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))]':
!fixedHeader && layout === 'cutMenu' && footer !fixedHeader && layout === 'cutMenu' && footer
} }

7
src/layout/components/ToolHeader.vue
View File

@ -7,6 +7,11 @@ import { UserInfo } from '@/components/UserInfo'
import { Screenfull } from '@/components/Screenfull' import { Screenfull } from '@/components/Screenfull'
import { Breadcrumb } from '@/components/Breadcrumb' import { Breadcrumb } from '@/components/Breadcrumb'
import { useAppStore } from '@/store/modules/app' import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('tool-header')
const appStore = useAppStore() const appStore = useAppStore()
@ -34,7 +39,7 @@ export default defineComponent({
return () => ( return () => (
<div <div
class={[ class={[
'v-tool-header', prefixCls,
'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between' 'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between'
]} ]}
> >

17
src/layout/components/useRenderLayout.tsx
View File

@ -7,6 +7,11 @@ import { Logo } from '@/components/Logo'
import AppView from './AppView.vue' import AppView from './AppView.vue'
import ToolHeader from './ToolHeader.vue' import ToolHeader from './ToolHeader.vue'
import { ElScrollbar } from 'element-plus' import { ElScrollbar } from 'element-plus'
import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('layout-content')
const appStore = useAppStore() const appStore = useAppStore()
@ -49,7 +54,7 @@ export const useRenderLayout = () => {
</div> </div>
<div <div
class={[ class={[
'v-content', prefixCls,
'absolute top-0 h-[100%]', 'absolute top-0 h-[100%]',
{ {
'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]': 'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
@ -64,6 +69,7 @@ export const useRenderLayout = () => {
<ElScrollbar <ElScrollbar
v-loading={pageLoading.value} v-loading={pageLoading.value}
class={[ class={[
`${prefixCls}-scrollbar`,
{ {
'!h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))] mt-[calc(var(--top-tool-height)+var(--tags-view-height))]': '!h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))] mt-[calc(var(--top-tool-height)+var(--tags-view-height))]':
fixedHeader.value fixedHeader.value
@ -109,7 +115,7 @@ export const useRenderLayout = () => {
<Menu class="!h-full"></Menu> <Menu class="!h-full"></Menu>
<div <div
class={[ class={[
'v-content', prefixCls,
'h-[100%]', 'h-[100%]',
{ {
'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]': 'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
@ -123,6 +129,7 @@ export const useRenderLayout = () => {
<ElScrollbar <ElScrollbar
v-loading={pageLoading.value} v-loading={pageLoading.value}
class={[ class={[
`${prefixCls}-scrollbar`,
{ {
'!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]': '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
fixedHeader.value && tagsView.value fixedHeader.value && tagsView.value
@ -161,10 +168,11 @@ export const useRenderLayout = () => {
<Menu class="flex-1 px-10px h-[var(--top-tool-height)]"></Menu> <Menu class="flex-1 px-10px h-[var(--top-tool-height)]"></Menu>
<ToolHeader></ToolHeader> <ToolHeader></ToolHeader>
</div> </div>
<div class="v-content h-full w-full"> <div class={[prefixCls, 'v-content h-full w-full']}>
<ElScrollbar <ElScrollbar
v-loading={pageLoading.value} v-loading={pageLoading.value}
class={[ class={[
`${prefixCls}-scrollbar`,
{ {
'mt-[var(--tags-view-height)]': fixedHeader.value 'mt-[var(--tags-view-height)]': fixedHeader.value
} }
@ -202,7 +210,7 @@ export const useRenderLayout = () => {
{/* <Menu class="!h-full"></Menu> */} {/* <Menu class="!h-full"></Menu> */}
<div <div
class={[ class={[
'v-content', prefixCls,
'h-[100%]', 'h-[100%]',
{ {
'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)]': 'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)]':
@ -216,6 +224,7 @@ export const useRenderLayout = () => {
<ElScrollbar <ElScrollbar
v-loading={pageLoading.value} v-loading={pageLoading.value}
class={[ class={[
`${prefixCls}-scrollbar`,
{ {
'!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]': '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
fixedHeader.value && tagsView.value fixedHeader.value && tagsView.value

3
src/router/index.ts
View File

@ -131,8 +131,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
name: 'Icons', name: 'Icons',
meta: { meta: {
title: '图标', title: '图标',
icon: 'carbon:skill-level-advanced', icon: 'carbon:skill-level-advanced'
affix: true
} }
} }
] ]

4
src/styles/var.css
View File

@ -59,5 +59,9 @@
--app-content-padding: 20px; --app-content-padding: 20px;
--app-contnet-bg-color: #f5f7f9;
--app-footer-height: 50px;
--transition-time-02: 0.2s; --transition-time-02: 0.2s;
} }

3
src/styles/variables.module.less
View File

@ -1,7 +1,10 @@
// 命名空间 // 命名空间
@namespace: v; @namespace: v;
// el命名空间
@elNamespace: el;
// 导出变量 // 导出变量
:export { :export {
namespace: @namespace; namespace: @namespace;
elNamespace: @elNamespace;
} }

4
src/views/Dashboard/Analysis.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
// import { ElRow, ElCol } from 'element-plus' import PanelGroup from './components/PanelGroup.vue'
</script> </script>
<template> <template>
<div>dddd</div> <PanelGroup />
</template> </template>

47
src/views/Dashboard/components/PanelGroup.vue Normal file
View File

@ -0,0 +1,47 @@
<script setup lang="ts">
import { ElRow, ElCol, ElCard } from 'element-plus'
import { CountTo } from '@/components/CountTo'
</script>
<template>
<ElRow :gutter="20" class="v-panel">
<ElCol :xl="6" :lg="6" :md="6" :sm="6" :xs="1">
<ElCard shadow="hover">
<div class="v-panel-item flex justify-between">
<div>
<div
class="v-panel-item__icon v-panel-item__icon--peoples p-16px inline-block rounded-6px"
>
<Icon icon="svg-icon:peoples" :size="40" />
</div>
</div>
<div class="flex flex-col justify-between">
<div class="v-panel-item__text">新增用户</div>
<CountTo :start-val="0" :end-val="102400" :duration="2600" />
</div>
</div>
</ElCard>
</ElCol>
</ElRow>
</template>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-panel';
.@{prefix-cls} {
&-item {
&:hover {
:deep(.v-icon) {
color: #fff !important;
}
.@{prefix-cls}-item__icon {
transition: all 0.38s ease-out;
&--peoples {
background: #40c9c6;
}
}
}
}
}
</style>