style: Add elNamespace
feat(component): Add namespace of class
This commit is contained in:
parent
e20fa76cad
commit
d847ccb098
|
@ -32,7 +32,7 @@
|
|||
"axios": "^0.25.0",
|
||||
"echarts": "^5.2.2",
|
||||
"echarts-wordcloud": "^2.0.0",
|
||||
"element-plus": "1.3.0-beta.5",
|
||||
"element-plus": "1.3.0-beta.7",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mockjs": "^1.1.0",
|
||||
"nprogress": "^0.2.0",
|
||||
|
@ -88,7 +88,7 @@
|
|||
"vite-plugin-svg-icons": "^1.1.0",
|
||||
"vite-plugin-vue-setup-extend": "^0.3.0",
|
||||
"vite-plugin-windicss": "^1.6.3",
|
||||
"vue-tsc": "^0.30.6",
|
||||
"vue-tsc": "^0.31.1",
|
||||
"windicss": "^3.4.3",
|
||||
"windicss-analysis": "^0.3.5"
|
||||
},
|
||||
|
|
337
pnpm-lock.yaml
337
pnpm-lock.yaml
|
@ -23,7 +23,7 @@ specifiers:
|
|||
commitizen: ^4.2.4
|
||||
echarts: ^5.2.2
|
||||
echarts-wordcloud: ^2.0.0
|
||||
element-plus: 1.3.0-beta.5
|
||||
element-plus: 1.3.0-beta.7
|
||||
eslint: ^8.7.0
|
||||
eslint-config-prettier: ^8.3.0
|
||||
eslint-define-config: ^1.2.3
|
||||
|
@ -60,7 +60,7 @@ specifiers:
|
|||
vue: 3.2.26
|
||||
vue-i18n: 9.1.9
|
||||
vue-router: ^4.0.12
|
||||
vue-tsc: ^0.30.6
|
||||
vue-tsc: ^0.31.1
|
||||
vue-types: ^4.1.1
|
||||
web-storage-cache: ^1.1.1
|
||||
windicss: ^3.4.3
|
||||
|
@ -74,7 +74,7 @@ dependencies:
|
|||
axios: registry.npmmirror.com/axios/0.25.0
|
||||
echarts: registry.npmmirror.com/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
|
||||
mockjs: registry.npmmirror.com/mockjs/1.1.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-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
|
||||
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-analysis: registry.npmmirror.com/windicss-analysis/0.3.5
|
||||
|
||||
|
@ -943,7 +943,7 @@ packages:
|
|||
css-what: registry.npmmirror.com/css-what/5.1.0
|
||||
domelementtype: registry.nlark.com/domelementtype/2.2.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
|
||||
|
||||
registry.nlark.com/cheerio/1.0.0-rc.10:
|
||||
|
@ -958,7 +958,7 @@ packages:
|
|||
engines: { node: '>= 6' }
|
||||
dependencies:
|
||||
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
|
||||
htmlparser2: registry.npmmirror.com/htmlparser2/6.1.0
|
||||
parse5: registry.nlark.com/parse5/6.0.1
|
||||
|
@ -1522,6 +1522,35 @@ packages:
|
|||
esutils: registry.npmmirror.com/esutils/2.0.3
|
||||
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:
|
||||
resolution:
|
||||
{
|
||||
|
@ -1544,6 +1573,35 @@ packages:
|
|||
version: 2.2.0
|
||||
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:
|
||||
resolution:
|
||||
{
|
||||
|
@ -1753,7 +1811,7 @@ packages:
|
|||
{
|
||||
integrity: sha1-0t5eA0JOcH3BDHQGjd7a5wh0Gyc=,
|
||||
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
|
||||
version: 2.1.0
|
||||
|
@ -5664,6 +5722,18 @@ packages:
|
|||
os-tmpdir: registry.nlark.com/os-tmpdir/1.0.2
|
||||
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:
|
||||
resolution:
|
||||
{
|
||||
|
@ -6753,7 +6823,7 @@ packages:
|
|||
engines: { node: '>=6.9.0' }
|
||||
dependencies:
|
||||
'@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
|
||||
|
||||
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
|
||||
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:
|
||||
{
|
||||
integrity: sha512-RsJNyL58rwxtsjeMy34o8txkL6UlME1stWsUlRpTac6UE9Bx9gdJvnDXbIKhOJqBLX17fBjmposdrn6VTqim2w==,
|
||||
integrity: sha512-2gg7VCq4d2firgl7/aVym4Cx/wqKFwKybEQGJiiWJN4urW36+QdAEG1knqSD9qidbjhVp0Jnc9XdSTR1/4Whzw==,
|
||||
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'
|
||||
version: 0.2.4
|
||||
version: 0.2.6
|
||||
peerDependencies:
|
||||
vue: ^3.2.0
|
||||
dependencies:
|
||||
|
@ -7414,15 +7484,15 @@ packages:
|
|||
version: 1.0.0-next.21
|
||||
dev: true
|
||||
|
||||
registry.npmmirror.com/@popperjs/core/2.11.0:
|
||||
registry.npmmirror.com/@popperjs/core/2.11.2:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==,
|
||||
integrity: sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==,
|
||||
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'
|
||||
version: 2.11.0
|
||||
version: 2.11.2
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/@rollup/plugin-node-resolve/13.1.3:
|
||||
|
@ -7889,29 +7959,29 @@ packages:
|
|||
vue: registry.npmmirror.com/vue/3.2.26
|
||||
dev: true
|
||||
|
||||
registry.npmmirror.com/@volar/code-gen/0.30.6:
|
||||
registry.npmmirror.com/@volar/code-gen/0.31.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-odkXN91QCS/KRKPk4eUQp7jkN0PuYLwDuJZwGiDDJrZWUCCSdEvSj7e+Cjk7Q7doX0G9WAF88BL7ozcjzrtiKw==,
|
||||
integrity: sha512-HsUNJHBdq4vGxenYlREqtBNf1Gh5JV1GBkD703bcH8clauc7ADTkUrayfLAF2ulXP/U0l7dFL8C8bwqJ7PZbMw==,
|
||||
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'
|
||||
version: 0.30.6
|
||||
version: 0.31.1
|
||||
dependencies:
|
||||
'@volar/shared': registry.npmmirror.com/@volar/shared/0.30.6
|
||||
'@volar/source-map': registry.npmmirror.com/@volar/source-map/0.30.6
|
||||
'@volar/shared': registry.npmmirror.com/@volar/shared/0.31.1
|
||||
'@volar/source-map': registry.npmmirror.com/@volar/source-map/0.31.1
|
||||
dev: true
|
||||
|
||||
registry.npmmirror.com/@volar/html2pug/0.30.6:
|
||||
registry.npmmirror.com/@volar/html2pug/0.31.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-mPRQCRa/Nse0bC1wxJ+K7q/Ou0Wg+220qL3nPI3mqwSn0KECOAPsZxaVHRFauY4MeBxO2sOzkOvFfQLk8whJ1g==,
|
||||
integrity: sha512-m/lbsz9t+zXx9HsuLH17Z/5nNtefv5qxncL8rycR+GaypHQKF5kg+GqQNOURMQ8T8lq2D6fNsGQOcMXoo3IqWQ==,
|
||||
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'
|
||||
version: 0.30.6
|
||||
version: 0.31.1
|
||||
dependencies:
|
||||
domelementtype: registry.nlark.com/domelementtype/2.2.0
|
||||
domhandler: registry.npmmirror.com/domhandler/4.3.0
|
||||
|
@ -7919,15 +7989,15 @@ packages:
|
|||
pug: registry.nlark.com/pug/3.0.2
|
||||
dev: true
|
||||
|
||||
registry.npmmirror.com/@volar/shared/0.30.6:
|
||||
registry.npmmirror.com/@volar/shared/0.31.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-YJa7kl2HRkSZaETBPCVEm/ZVXPBpt1aAlCxNuj55GaCHhcabOVj2oCBZioJLiwAvSR0e6k6KjbJBcKTuKrP9bw==,
|
||||
integrity: sha512-WbMiPOlXbpFinZnQ+/qsJQ7+YW6MFla2fLdD6Er5bLW5DEXI+GupLQ2gnia7F0w6QborMowfOIEXnrnMPPYGOA==,
|
||||
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'
|
||||
version: 0.30.6
|
||||
version: 0.31.1
|
||||
dependencies:
|
||||
upath: registry.nlark.com/upath/2.0.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
|
||||
dev: true
|
||||
|
||||
registry.npmmirror.com/@volar/source-map/0.30.6:
|
||||
registry.npmmirror.com/@volar/source-map/0.31.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-B0KLi0StdM3KsMLA+iK5pdE+mokukio7r0EkOMUAYZN/xn/kGWkKIdleJjLtgmtH2tw4kBz/5hP+KKEOlD3Etg==,
|
||||
integrity: sha512-t+bUmxI5bkunBxX6UYpBX6+xnYYJhpciL3Hqv0dkHSaS63kJqY13OhV/utmQMjto3b3FAbYLSVqpt09FtdTPzg==,
|
||||
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'
|
||||
version: 0.30.6
|
||||
version: 0.31.1
|
||||
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
|
||||
dev: true
|
||||
|
||||
registry.npmmirror.com/@volar/transforms/0.30.6:
|
||||
registry.npmmirror.com/@volar/transforms/0.31.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-jbVBXOBOeKc6Rb7dzyiq5b+FfYsXFWGFLLDZok5U+JoFujxoPfn5HwX9A3t+RW/NRwQkZxrdiPmW8b69B5nMKQ==,
|
||||
integrity: sha512-O9rrGwCTzzsVFe06WOKUx7f9rkPg396ugWkMX6O0M15EF1a3ykqH7QX1uxVhFS0NwvWDnIeJYe7NG1uf1BwR+w==,
|
||||
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'
|
||||
version: 0.30.6
|
||||
version: 0.31.1
|
||||
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
|
||||
dev: true
|
||||
|
||||
registry.npmmirror.com/@volar/vue-code-gen/0.30.6:
|
||||
registry.npmmirror.com/@volar/vue-code-gen/0.31.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-UGpbOuC5ZxT2GXvkq2IWUuca9IDJVaaywWparKW0SwPFOZaMM2ivHLOfQpiuPqDUKTZLGK3fQuBWuXSTl+GIbA==,
|
||||
integrity: sha512-MBMqhE+Z7xt2MSeQQA4ld0qx894gr5eLFWkTORdNoCbK8+02oB3yrZVr3T+i9jprjiV6svXKBoyk0RZ6YsgNqw==,
|
||||
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'
|
||||
version: 0.30.6
|
||||
version: 0.31.1
|
||||
dependencies:
|
||||
'@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.30.6
|
||||
'@volar/shared': registry.npmmirror.com/@volar/shared/0.30.6
|
||||
'@volar/source-map': registry.npmmirror.com/@volar/source-map/0.30.6
|
||||
'@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.31.1
|
||||
'@volar/shared': registry.npmmirror.com/@volar/shared/0.31.1
|
||||
'@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-dom': registry.npmmirror.com/@vue/compiler-dom/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
|
||||
css-what: registry.npmmirror.com/css-what/5.1.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
|
||||
dev: true
|
||||
|
||||
|
@ -9299,46 +9369,6 @@ packages:
|
|||
version: 1.1.0
|
||||
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:
|
||||
resolution:
|
||||
{
|
||||
|
@ -9366,35 +9396,6 @@ packages:
|
|||
domelementtype: registry.nlark.com/domelementtype/2.2.0
|
||||
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:
|
||||
resolution:
|
||||
{
|
||||
|
@ -9436,22 +9437,22 @@ packages:
|
|||
version: 1.4.30
|
||||
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:
|
||||
{
|
||||
integrity: sha512-su0sHN4ZkR5ISyP1McyiqY5wqrgZgKq0El0lSohjvjEWR3ODlgdmMfQolV0ZqTXKlO2mS16hO7nTFwX9PvZNTQ==,
|
||||
integrity: sha512-zrkw0OqhJG70oA+O796HK0IU1KSHboQbHcSeQVqhWLxmv/rEHOzEAcRKKeOACQFoJY/EU7CKJVjlV+Gaww1ccA==,
|
||||
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
|
||||
version: 1.3.0-beta.5
|
||||
version: 1.3.0-beta.7
|
||||
peerDependencies:
|
||||
vue: ^3.2.0
|
||||
dependencies:
|
||||
'@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
|
||||
'@popperjs/core': registry.npmmirror.com/@popperjs/core/2.11.0
|
||||
'@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.2
|
||||
'@vueuse/core': registry.npmmirror.com/@vueuse/core/7.5.4_vue@3.2.26
|
||||
async-validator: registry.npmmirror.com/async-validator/4.0.7
|
||||
dayjs: registry.npmmirror.com/dayjs/1.10.7
|
||||
|
@ -10513,7 +10514,7 @@ packages:
|
|||
dependencies:
|
||||
domelementtype: registry.nlark.com/domelementtype/1.3.1
|
||||
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
|
||||
inherits: registry.nlark.com/inherits/2.0.4
|
||||
readable-stream: registry.nlark.com/readable-stream/3.6.0
|
||||
|
@ -10531,7 +10532,7 @@ packages:
|
|||
dependencies:
|
||||
domelementtype: registry.nlark.com/domelementtype/2.2.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
|
||||
dev: true
|
||||
|
||||
|
@ -10540,14 +10541,14 @@ packages:
|
|||
{
|
||||
integrity: sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==,
|
||||
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
|
||||
version: 7.2.0
|
||||
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
|
||||
domutils: registry.npmmirror.com/domutils/2.8.0
|
||||
domutils: registry.nlark.com/domutils/2.8.0
|
||||
entities: registry.nlark.com/entities/3.0.1
|
||||
dev: true
|
||||
|
||||
|
@ -12194,18 +12195,6 @@ packages:
|
|||
strip-ansi: registry.npmmirror.com/strip-ansi/6.0.1
|
||||
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:
|
||||
resolution:
|
||||
{
|
||||
|
@ -12654,37 +12643,37 @@ packages:
|
|||
version: 3.17.0-next.6
|
||||
dev: true
|
||||
|
||||
registry.npmmirror.com/vscode-pug-languageservice/0.30.6:
|
||||
registry.npmmirror.com/vscode-pug-languageservice/0.31.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-oHXKmHaxLxVYDY6dOmxpm0YfilGgohIMEcE/ahK9O+0lvhgZ4xjEOdP27QcZs90fv92eOWf3CU9tgg4fR6e3+w==,
|
||||
integrity: sha512-71aQbVF3RjE+dUbUA/DnL1oGaLXXIMEy5z4TkE/irO/qodMjfwVbW/bxMCBwrVrXmIObIMlsWYPD+S/+EE3CXQ==,
|
||||
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
|
||||
version: 0.30.6
|
||||
version: 0.31.1
|
||||
dependencies:
|
||||
'@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.30.6
|
||||
'@volar/shared': registry.npmmirror.com/@volar/shared/0.30.6
|
||||
'@volar/source-map': registry.npmmirror.com/@volar/source-map/0.30.6
|
||||
'@volar/transforms': registry.npmmirror.com/@volar/transforms/0.30.6
|
||||
'@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.31.1
|
||||
'@volar/shared': registry.npmmirror.com/@volar/shared/0.31.1
|
||||
'@volar/source-map': registry.npmmirror.com/@volar/source-map/0.31.1
|
||||
'@volar/transforms': registry.npmmirror.com/@volar/transforms/0.31.1
|
||||
pug-lexer: registry.nlark.com/pug-lexer/5.0.1
|
||||
pug-parser: registry.nlark.com/pug-parser/6.0.0
|
||||
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
|
||||
dev: true
|
||||
|
||||
registry.npmmirror.com/vscode-typescript-languageservice/0.30.6:
|
||||
registry.npmmirror.com/vscode-typescript-languageservice/0.31.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-Dni0VnMe01QkSvO0z7yIIy+vSll6hWCNtuuWvmBNoHAnFlndgq4OibPrpabv2iv4Lmq+66p40kqGcDg/bpjx5Q==,
|
||||
integrity: sha512-qJlkrznmRJGHAxIclfnAuJSbNfmKwDfAn7o3PLM7bBqtBvJG6HAFCBXaBWaE1kkM/ELG20Dn8Xi7lCfT15DlpA==,
|
||||
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
|
||||
version: 0.30.6
|
||||
version: 0.31.1
|
||||
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
|
||||
upath: registry.nlark.com/upath/2.0.1
|
||||
vscode-languageserver-protocol: registry.npmmirror.com/vscode-languageserver-protocol/3.17.0-next.12
|
||||
|
@ -12714,22 +12703,22 @@ packages:
|
|||
version: 3.0.3
|
||||
dev: true
|
||||
|
||||
registry.npmmirror.com/vscode-vue-languageservice/0.30.6:
|
||||
registry.npmmirror.com/vscode-vue-languageservice/0.31.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-ZDaW6F2WK0LXt9RpwziKEvhfNxNmpx3ULLfPCGc+jIkM+u00gIB4i2K/5F99yNzbvrtxcgb3emFRH5FBlmmWDQ==,
|
||||
integrity: sha512-7HY4VkD00iyfWyWpJcl3zObnsa9gBKGjTtrWflFR0SqGHMsccfh7QXdrPmgy/2nFRkD6n60XU7eSYg2rN/QexA==,
|
||||
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
|
||||
version: 0.30.6
|
||||
version: 0.31.1
|
||||
dependencies:
|
||||
'@volar/code-gen': registry.npmmirror.com/@volar/code-gen/0.30.6
|
||||
'@volar/html2pug': registry.npmmirror.com/@volar/html2pug/0.30.6
|
||||
'@volar/shared': registry.npmmirror.com/@volar/shared/0.30.6
|
||||
'@volar/source-map': registry.npmmirror.com/@volar/source-map/0.30.6
|
||||
'@volar/transforms': registry.npmmirror.com/@volar/transforms/0.30.6
|
||||
'@volar/vue-code-gen': registry.npmmirror.com/@volar/vue-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.31.1
|
||||
'@volar/shared': registry.npmmirror.com/@volar/shared/0.31.1
|
||||
'@volar/source-map': registry.npmmirror.com/@volar/source-map/0.31.1
|
||||
'@volar/transforms': registry.npmmirror.com/@volar/transforms/0.31.1
|
||||
'@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
|
||||
'@vue/reactivity': registry.npmmirror.com/@vue/reactivity/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-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-pug-languageservice: registry.npmmirror.com/vscode-pug-languageservice/0.30.6
|
||||
vscode-typescript-languageservice: registry.npmmirror.com/vscode-typescript-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.31.1
|
||||
dev: true
|
||||
|
||||
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
|
||||
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:
|
||||
{
|
||||
integrity: sha512-p+lemuubzFgwr1Az3pqQ70uvWraf36qTrKkC6C7anv5S1G3aPerc4eY5Rjz3eVDOkK94E+KeBHevvpZbmVwvHA==,
|
||||
integrity: sha512-pyLQG1fCA02is6NAL0uY5SKxDfjJRI167x89iRz0gWOB0tUng6NjJZicE+Oh+3ZuN/LJ3J/wKfdW7O+hnfhxdg==,
|
||||
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
|
||||
version: 0.30.6
|
||||
version: 0.31.1
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
typescript: '*'
|
||||
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
|
||||
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
|
||||
|
||||
registry.npmmirror.com/vue-types/4.1.1_vue@3.2.26:
|
||||
|
|
11
src/App.vue
11
src/App.vue
|
@ -3,6 +3,11 @@ import { computed } from 'vue'
|
|||
import { useAppStore } from '@/store/modules/app'
|
||||
import { ConfigGlobal } from '@/components/ConfigGlobal'
|
||||
import { isDark } from '@/utils/is'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('app')
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
|
@ -20,12 +25,12 @@ initDark()
|
|||
|
||||
<template>
|
||||
<ConfigGlobal :size="currentSize">
|
||||
<RouterView :class="{ 'v-grey__mode': greyMode }" />
|
||||
<RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
|
||||
</ConfigGlobal>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
@prefix-cls: ~'@{namespace}-grey';
|
||||
@prefix-cls: ~'@{namespace}-app';
|
||||
|
||||
.size {
|
||||
width: 100%;
|
||||
|
@ -44,7 +49,7 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.@{prefix-cls}__mode {
|
||||
.@{prefix-cls}-grey-mode {
|
||||
-webkit-filter: grayscale(100%);
|
||||
-moz-filter: grayscale(100%);
|
||||
-ms-filter: grayscale(100%);
|
||||
|
|
|
@ -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>
|
After Width: | Height: | Size: 731 B |
|
@ -1,7 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import { ElBacktop } from 'element-plus'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls, variables } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('backtop')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElBacktop target=".v-content .el-scrollbar__wrap" />
|
||||
<ElBacktop
|
||||
:class="`${prefixCls}-backtop`"
|
||||
:target="`.${variables.namespace}-layout-content-scrollbar .${variables.elNamespace}-scrollbar__wrap`"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
@ -9,6 +9,11 @@ import type { RouteLocationNormalizedLoaded, RouteMeta } from 'vue-router'
|
|||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { Icon } from '@/components/Icon'
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('breadcrumb')
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
|
@ -72,7 +77,7 @@ export default defineComponent({
|
|||
)
|
||||
|
||||
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">
|
||||
{renderBreadcrumb()}
|
||||
</TransitionGroup>
|
||||
|
@ -83,36 +88,39 @@ export default defineComponent({
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
:deep(.el-breadcrumb__item) {
|
||||
display: flex;
|
||||
@prefix-cls: ~'@{namespace}-breadcrumb';
|
||||
|
||||
.el-breadcrumb__inner {
|
||||
.@{prefix-cls} {
|
||||
:deep(&__item) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--top-header-text-color);
|
||||
.@{prefix-cls}__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--top-header-text-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-breadcrumb__item):not(:last-child) {
|
||||
.el-breadcrumb__inner {
|
||||
color: var(--top-header-text-color);
|
||||
:deep(&__item):not(:last-child) {
|
||||
.@{prefix-cls}__inner {
|
||||
color: var(--top-header-text-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-breadcrumb__item):last-child {
|
||||
.el-breadcrumb__inner {
|
||||
color: var(--el-text-color-placeholder);
|
||||
|
||||
&:hover {
|
||||
:deep(&__item):last-child {
|
||||
.@{prefix-cls}__inner {
|
||||
color: var(--el-text-color-placeholder);
|
||||
|
||||
&:hover {
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,6 +2,11 @@
|
|||
import { computed, unref } from 'vue'
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('collapse')
|
||||
|
||||
defineProps({
|
||||
color: propTypes.string.def('')
|
||||
|
@ -18,7 +23,7 @@ const toggleCollapse = () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div :class="prefixCls">
|
||||
<Icon
|
||||
:size="18"
|
||||
:icon="collapse ? 'ant-design:menu-unfold-outlined' : 'ant-design:menu-fold-outlined'"
|
||||
|
|
|
@ -6,6 +6,11 @@ import { useLocaleStore } from '@/store/modules/locale'
|
|||
import { useWindowSize } from '@vueuse/core'
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
import { setCssVar } from '@/utils'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls, variables } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('config-global')
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
|
@ -48,7 +53,13 @@ const currentLocale = computed(() => localeStore.currentLocale)
|
|||
</script>
|
||||
|
||||
<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>
|
||||
</ElConfigProvider>
|
||||
</template>
|
||||
|
|
|
@ -2,6 +2,11 @@
|
|||
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
|
||||
import { PropType } from 'vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('context-menu')
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
|
@ -23,6 +28,7 @@ const command = (item: contextMenuSchema) => {
|
|||
|
||||
<template>
|
||||
<ElDropdown
|
||||
:class="prefixCls"
|
||||
:trigger="trigger"
|
||||
placement="bottom-start"
|
||||
@command="command"
|
||||
|
@ -44,9 +50,3 @@ const command = (item: contextMenuSchema) => {
|
|||
</template>
|
||||
</ElDropdown>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
.v-context-menu-popper {
|
||||
min-width: 150px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
import CountTo from './src/CountTo.vue'
|
||||
|
||||
export { CountTo }
|
|
@ -2,12 +2,17 @@
|
|||
import { reactive, computed, watch, onMounted, unref, toRef, PropType } from 'vue'
|
||||
import { isNumber } from '@/utils/is'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('count-to')
|
||||
|
||||
const props = defineProps({
|
||||
startVal: propTypes.number.def(0),
|
||||
endVal: propTypes.number.def(2021),
|
||||
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),
|
||||
decimal: propTypes.string.def('.'),
|
||||
separator: propTypes.string.def(','),
|
||||
|
@ -169,7 +174,7 @@ defineExpose({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<span>
|
||||
<span :class="prefixCls">
|
||||
{{ displayValue }}
|
||||
</span>
|
||||
</template>
|
||||
|
|
|
@ -7,6 +7,11 @@ import { propTypes } from '@/utils/propTypes'
|
|||
import { computed, PropType, ref, unref, watch, onMounted, onBeforeUnmount, onActivated } from 'vue'
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
import { isString } from '@/utils/is'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('echart')
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
|
@ -106,5 +111,5 @@ onActivated(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="elRef" :class="$attrs.class" :style="styles" />
|
||||
<div ref="elRef" :class="[$attrs.class, prefixCls]" :style="styles" />
|
||||
</template>
|
||||
|
|
|
@ -1,6 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
import { computed } from 'vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('footer')
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
|
@ -8,5 +13,10 @@ const title = computed(() => appStore.getTitle)
|
|||
</script>
|
||||
|
||||
<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>
|
||||
|
|
|
@ -15,6 +15,11 @@ import {
|
|||
import { useRenderSelect } from './components/useRenderSelect'
|
||||
import { useRenderRadio } from './components/useRenderRadio'
|
||||
import { useRenderChcekbox } from './components/useRenderChcekbox'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('form')
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Form',
|
||||
|
@ -194,7 +199,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
return () => (
|
||||
<ElForm ref={elFormRef} {...getFormBindValue()} model={formModel} class="v-form">
|
||||
<ElForm ref={elFormRef} {...getFormBindValue()} model={formModel} class={prefixCls}>
|
||||
{{
|
||||
// 如果需要自定义,就什么都不渲染,而是提供默认插槽
|
||||
default: () => (isCustom ? getSlot(slots, 'default') : renderWrap())
|
||||
|
|
|
@ -3,6 +3,11 @@ import { computed, unref, ref, watch, nextTick } from 'vue'
|
|||
import { ElIcon } from 'element-plus'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import Iconify from '@purge-icons/generated'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('icon')
|
||||
|
||||
const props = defineProps({
|
||||
// icon name
|
||||
|
@ -61,7 +66,7 @@ watch(
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<ElIcon class="v-icon" :size="size" :color="color">
|
||||
<ElIcon :class="prefixCls" :size="size" :color="color">
|
||||
<svg v-if="isLocal" aria-hidden="true">
|
||||
<use :xlink:href="symbolId" />
|
||||
</svg>
|
||||
|
|
|
@ -5,6 +5,11 @@ import { propTypes } from '@/utils/propTypes'
|
|||
import { useConfigGlobal } from '@/hooks/web/useConfigGlobal'
|
||||
import { zxcvbn } 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({
|
||||
// 是否显示密码强度
|
||||
|
@ -55,7 +60,7 @@ const getIconName = computed(() =>
|
|||
</script>
|
||||
|
||||
<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">
|
||||
<template #suffix>
|
||||
<Icon class="el-input__icon cursor-pointer" :icon="getIconName" @click="changeTextType" />
|
||||
|
@ -63,9 +68,10 @@ const getIconName = computed(() =>
|
|||
</ElInput>
|
||||
<div
|
||||
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>
|
||||
</template>
|
||||
|
@ -74,7 +80,7 @@ const getIconName = computed(() =>
|
|||
@prefix-cls: ~'@{namespace}-input-password';
|
||||
|
||||
.@{prefix-cls} {
|
||||
:deep(.el-input__clear) {
|
||||
:deep(.@{elNamespace}-input__clear) {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
|
|
@ -4,6 +4,11 @@ import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
|
|||
import { useLocaleStore } from '@/store/modules/locale'
|
||||
import { useLocale } from '@/hooks/web/useLocale'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('locale-dropdown')
|
||||
|
||||
defineProps({
|
||||
color: propTypes.string.def('')
|
||||
|
@ -28,7 +33,7 @@ const setLang = (lang: LocaleType) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<ElDropdown trigger="click" @command="setLang">
|
||||
<ElDropdown :class="prefixCls" trigger="click" @command="setLang">
|
||||
<Icon
|
||||
:size="18"
|
||||
icon="ion:language-sharp"
|
||||
|
|
|
@ -1,6 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, computed, onMounted, unref } from 'vue'
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('logo')
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
|
@ -52,10 +57,8 @@ watch(
|
|||
<template>
|
||||
<router-link
|
||||
:class="[
|
||||
'v-logo',
|
||||
{
|
||||
'v-logo__Top': layout !== 'classic'
|
||||
},
|
||||
prefixCls,
|
||||
layout !== 'classic' ? `${prefixCls}__Top` : '',
|
||||
'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative'
|
||||
]"
|
||||
to="/"
|
||||
|
@ -79,7 +82,3 @@ watch(
|
|||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@prefix-cls: ~'@{namespace}-logo';
|
||||
</style>
|
||||
|
|
|
@ -7,6 +7,11 @@ import type { LayoutType } from '@/config/app'
|
|||
import { useRenderMenuItem } from './components/useRenderMenuItem'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { isUrl } from '@/utils/is'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('menu')
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Menu',
|
||||
|
@ -66,7 +71,7 @@ export default defineComponent({
|
|||
return () => (
|
||||
<div
|
||||
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)]',
|
||||
{
|
||||
'w-[var(--left-menu-min-width)]': unref(collapse) && unref(layout) !== 'cutMenu',
|
||||
|
@ -126,20 +131,20 @@ export default defineComponent({
|
|||
content: '';
|
||||
}
|
||||
|
||||
:deep(.el-menu) {
|
||||
:deep(.@{elNamespace}-menu) {
|
||||
width: 100% !important;
|
||||
border-right: none;
|
||||
|
||||
// 设置选中时子标题的颜色
|
||||
.is-active {
|
||||
& > .el-sub-menu__title {
|
||||
& > .@{elNamespace}-sub-menu__title {
|
||||
color: var(--left-menu-text-active-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 设置子菜单悬停的高亮和背景色
|
||||
.el-sub-menu__title,
|
||||
.el-menu-item {
|
||||
.@{elNamespace}-sub-menu__title,
|
||||
.@{elNamespace}-menu-item {
|
||||
&:hover {
|
||||
color: var(--left-menu-text-active-color) !important;
|
||||
background-color: var(--left-menu-bg-color) !important;
|
||||
|
@ -147,8 +152,8 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
// 设置选中时的高亮背景和高亮颜色
|
||||
.el-sub-menu.is-active,
|
||||
.el-menu-item.is-active {
|
||||
.@{elNamespace}-sub-menu.is-active,
|
||||
.@{elNamespace}-menu-item.is-active {
|
||||
color: var(--left-menu-text-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;
|
||||
|
||||
&:after {
|
||||
|
@ -166,20 +171,20 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
// 设置子菜单的背景颜色
|
||||
.el-menu {
|
||||
.el-sub-menu__title,
|
||||
.el-menu-item:not(.is-active) {
|
||||
.@{elNamespace}-menu {
|
||||
.@{elNamespace}-sub-menu__title,
|
||||
.@{elNamespace}-menu-item:not(.is-active) {
|
||||
background-color: var(--left-menu-bg-light-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 折叠时的最小宽度
|
||||
:deep(.el-menu--collapse) {
|
||||
:deep(.@{elNamespace}-menu--collapse) {
|
||||
width: var(--left-menu-min-width);
|
||||
|
||||
& > .is-active,
|
||||
& > .is-active > .el-sub-menu__title {
|
||||
& > .is-active > .@{elNamespace}-sub-menu__title {
|
||||
position: relative;
|
||||
background-color: var(--left-menu-collapse-bg-active-color) !important;
|
||||
|
||||
|
@ -201,17 +206,17 @@ export default defineComponent({
|
|||
&__horizontal {
|
||||
height: calc(~'var( - -top-tool-height)') !important;
|
||||
|
||||
:deep(.el-menu--horizontal) {
|
||||
:deep(.@{elNamespace}-menu--horizontal) {
|
||||
height: calc(~'var( - -top-tool-height)');
|
||||
border-bottom: none;
|
||||
// 重新设置底部高亮颜色
|
||||
& > .el-sub-menu.is-active {
|
||||
.el-sub-menu__title {
|
||||
& > .@{elNamespace}-sub-menu.is-active {
|
||||
.@{elNamespace}-sub-menu__title {
|
||||
border-bottom-color: var(--el-color-primary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
.@{elNamespace}-menu-item.is-active {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
|
@ -219,7 +224,7 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
.v-menu__title {
|
||||
.@{prefix-cls}__title {
|
||||
/* stylelint-disable-next-line */
|
||||
max-height: calc(~'var(--top-tool-height) - 2px') !important;
|
||||
/* stylelint-disable-next-line */
|
||||
|
|
|
@ -2,6 +2,11 @@
|
|||
import { Icon } from '@/components/Icon'
|
||||
import { useFullscreen } from '@vueuse/core'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('screenfull')
|
||||
|
||||
defineProps({
|
||||
color: propTypes.string.def('')
|
||||
|
@ -15,7 +20,7 @@ const toggleFullscreen = () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div @click="toggleFullscreen">
|
||||
<div :class="prefixCls" @click="toggleFullscreen">
|
||||
<Icon
|
||||
:size="18"
|
||||
:icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
|
||||
|
|
|
@ -12,6 +12,11 @@ import InterfaceDisplay from './components/InterfaceDisplay.vue'
|
|||
import LayoutRadioPicker from './components/LayoutRadioPicker.vue'
|
||||
import { useCache } from '@/hooks/web/useCache'
|
||||
import { useClipboard } from '@vueuse/core'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('setting')
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
|
@ -184,7 +189,8 @@ const clear = () => {
|
|||
|
||||
<template>
|
||||
<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"
|
||||
>
|
||||
<Icon icon="ant-design:setting-outlined" color="#fff" />
|
||||
|
|
|
@ -1,6 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { PropType, watch, unref, ref } from 'vue'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('color-radio-picker')
|
||||
|
||||
const props = defineProps({
|
||||
schema: {
|
||||
|
@ -33,11 +38,11 @@ watch(
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="v-color-radio-picker flex flex-wrap space-x-14px">
|
||||
<div :class="prefixCls" class="flex flex-wrap space-x-14px">
|
||||
<span
|
||||
v-for="(item, i) in schema"
|
||||
: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 }"
|
||||
:style="{
|
||||
background: item
|
||||
|
|
|
@ -3,6 +3,11 @@ import { ElSwitch } from 'element-plus'
|
|||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('interface-display')
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
|
@ -98,7 +103,7 @@ watch(
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="v-interface-display">
|
||||
<div :class="prefixCls">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-14px">{{ t('setting.breadcrumb') }}</span>
|
||||
<ElSwitch v-model="breadcrumb" @change="breadcrumbChange" />
|
||||
|
|
|
@ -1,6 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
import { computed } from 'vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('layout-radio-picker')
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
|
@ -8,10 +13,11 @@ const layout = computed(() => appStore.getLayout)
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="v-layout-radio-picker flex flex-wrap space-x-14px">
|
||||
<div :class="prefixCls" class="flex flex-wrap space-x-14px">
|
||||
<div
|
||||
: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'
|
||||
}
|
||||
|
@ -20,7 +26,8 @@ const layout = computed(() => appStore.getLayout)
|
|||
></div>
|
||||
<div
|
||||
: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'
|
||||
}
|
||||
|
@ -29,7 +36,8 @@ const layout = computed(() => appStore.getLayout)
|
|||
></div>
|
||||
<div
|
||||
: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'
|
||||
}
|
||||
|
@ -38,7 +46,8 @@ const layout = computed(() => appStore.getLayout)
|
|||
></div>
|
||||
<div
|
||||
: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'
|
||||
}
|
||||
|
|
|
@ -4,6 +4,11 @@ import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
|
|||
import { useAppStore } from '@/store/modules/app'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('size-dropdown')
|
||||
|
||||
defineProps({
|
||||
color: propTypes.string.def('')
|
||||
|
@ -21,7 +26,7 @@ const setCurrentSize = (size: ElememtPlusSzie) => {
|
|||
</script>
|
||||
|
||||
<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" />
|
||||
<template #dropdown>
|
||||
<ElDropdownMenu>
|
||||
|
|
|
@ -10,6 +10,11 @@ import { useRouter } from 'vue-router'
|
|||
import { pathResolve } from '@/utils/routerHelper'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import { filterMenusPath, initTabMap, tabPathMap } from './helper'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('tab-menu')
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TabMenu',
|
||||
|
@ -102,7 +107,8 @@ export default defineComponent({
|
|||
return () => (
|
||||
<div
|
||||
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-min-width)]': unref(collapse)
|
||||
|
@ -115,7 +121,7 @@ export default defineComponent({
|
|||
{() => {
|
||||
return unref(tabRouters).map((v) => {
|
||||
const item = (
|
||||
v?.children?.length && v?.children?.length > 1
|
||||
v.meta?.alwaysShow || (v?.children?.length && v?.children?.length > 1)
|
||||
? v
|
||||
: {
|
||||
...(v?.children && v?.children[0]),
|
||||
|
@ -125,7 +131,8 @@ export default defineComponent({
|
|||
return (
|
||||
<div
|
||||
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)
|
||||
}
|
||||
|
@ -147,7 +154,10 @@ export default defineComponent({
|
|||
</div>
|
||||
</ElScrollbar>
|
||||
<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}
|
||||
>
|
||||
<Icon icon={unref(collapse) ? 'ep:d-arrow-right' : 'ep:d-arrow-left'}></Icon>
|
||||
|
@ -186,7 +196,7 @@ export default defineComponent({
|
|||
content: '';
|
||||
}
|
||||
|
||||
&-item {
|
||||
&__item {
|
||||
color: var(--left-menu-text-color);
|
||||
transition: all var(--transition-time-02);
|
||||
|
||||
|
@ -196,7 +206,7 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
&-collapse {
|
||||
&--collapse {
|
||||
color: var(--left-menu-text-color);
|
||||
background-color: var(--left-menu-bg-light-color);
|
||||
border-top: 1px solid var(--left-menu-border-color);
|
||||
|
|
|
@ -7,6 +7,11 @@ import { useTagsViewStore } from '@/store/modules/tagsView'
|
|||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { filterAffixTags } from './helper'
|
||||
import { ContextMenu } from '@/components/ContextMenu'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('tags-view')
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
|
@ -125,9 +130,10 @@ watch(
|
|||
</script>
|
||||
|
||||
<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
|
||||
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" />
|
||||
</span>
|
||||
|
@ -195,9 +201,9 @@ watch(
|
|||
v-for="item in visitedViews"
|
||||
:key="item.fullPath"
|
||||
: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)
|
||||
}
|
||||
]"
|
||||
|
@ -209,7 +215,7 @@ watch(
|
|||
>
|
||||
{{ t(item?.meta?.title as string) }}
|
||||
<Icon
|
||||
class="v-tags-view__item--close"
|
||||
:class="`${prefixCls}__item--close`"
|
||||
color="#333"
|
||||
icon="ant-design:close-outlined"
|
||||
:size="12"
|
||||
|
@ -222,12 +228,14 @@ watch(
|
|||
</ElScrollbar>
|
||||
</div>
|
||||
<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" />
|
||||
</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)"
|
||||
>
|
||||
<Icon icon="ant-design:reload-outlined" color="#333" />
|
||||
|
@ -284,7 +292,8 @@ watch(
|
|||
]"
|
||||
>
|
||||
<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" />
|
||||
</span>
|
||||
|
@ -296,7 +305,7 @@ watch(
|
|||
@prefix-cls: ~'@{namespace}-tags-view';
|
||||
|
||||
.@{prefix-cls} {
|
||||
:deep(.el-scrollbar__view) {
|
||||
:deep(.@{elNamespace}-scrollbar__view) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
|
|
@ -3,6 +3,11 @@ import { ref } from 'vue'
|
|||
import { useAppStore } from '@/store/modules/app'
|
||||
import { ElSwitch } from 'element-plus'
|
||||
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' })
|
||||
|
||||
|
@ -23,7 +28,7 @@ const themeChange = (val: boolean) => {
|
|||
|
||||
<template>
|
||||
<ElSwitch
|
||||
class="v-theme-switch"
|
||||
:class="prefixCls"
|
||||
v-model="isDark"
|
||||
inline-prompt
|
||||
:border-color="blackColor"
|
||||
|
@ -34,7 +39,3 @@ const themeChange = (val: boolean) => {
|
|||
@change="themeChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@prefix-cls: ~'@{namespace}-theme-switch';
|
||||
</style>
|
||||
|
|
|
@ -5,6 +5,11 @@ import { useCache } from '@/hooks/web/useCache'
|
|||
import { resetRouter } from '@/router'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { loginOutApi } from '@/api/login'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('user-info')
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
|
@ -31,7 +36,7 @@ const loginOut = () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<ElDropdown trigger="click">
|
||||
<ElDropdown :class="prefixCls" trigger="click">
|
||||
<div class="flex items-center">
|
||||
<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>
|
||||
|
|
|
@ -1,9 +1,14 @@
|
|||
<script lang="tsx">
|
||||
import { computed, defineComponent, unref } from 'vue'
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
// import { Backtop } from '@/components/Backtop'
|
||||
import { Backtop } from '@/components/Backtop'
|
||||
import { Setting } from '@/components/Setting'
|
||||
import { useRenderLayout } from './components/useRenderLayout'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('layout')
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
|
@ -42,7 +47,7 @@ export default defineComponent({
|
|||
name: 'Layout',
|
||||
setup() {
|
||||
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 ? (
|
||||
<div
|
||||
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()}
|
||||
|
||||
{/*<Backtop></Backtop>*/}
|
||||
<Backtop></Backtop>
|
||||
|
||||
<Setting></Setting>
|
||||
</section>
|
||||
|
@ -62,11 +67,7 @@ export default defineComponent({
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@prefix-cls: ~'@{namespace}-app';
|
||||
|
||||
:deep(.@{namespace}-content) {
|
||||
.el-scrollbar__view {
|
||||
height: 100%;
|
||||
}
|
||||
:deep(.@{elNamespace}-scrollbar__view) {
|
||||
height: 100% !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -22,17 +22,19 @@ const getCaches = computed((): string[] => {
|
|||
<template>
|
||||
<section
|
||||
: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))]':
|
||||
fixedHeader && layout === 'classic' && footer,
|
||||
'!min-h-[calc(100%-var(--tags-view-height)-var(--top-tool-height)-calc(var(--app-content-padding)*2))]':
|
||||
'!min-h-[calc(100%-var(--app-footer-height))]':
|
||||
fixedHeader && (layout === 'classic' || layout === 'topLeft') && footer,
|
||||
|
||||
'!min-h-[calc(100%-var(--tags-view-height)-var(--top-tool-height)-var(--app-footer-height))]':
|
||||
((!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)-calc(var(--app-content-padding)*2))]':
|
||||
|
||||
'!min-h-[calc(100%-var(--tags-view-height)-var(--app-footer-height))]':
|
||||
!fixedHeader && layout === 'topLeft' && 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))]':
|
||||
!fixedHeader && layout === 'cutMenu' && footer
|
||||
}
|
||||
|
|
|
@ -7,6 +7,11 @@ import { UserInfo } from '@/components/UserInfo'
|
|||
import { Screenfull } from '@/components/Screenfull'
|
||||
import { Breadcrumb } from '@/components/Breadcrumb'
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('tool-header')
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
|
@ -34,7 +39,7 @@ export default defineComponent({
|
|||
return () => (
|
||||
<div
|
||||
class={[
|
||||
'v-tool-header',
|
||||
prefixCls,
|
||||
'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between'
|
||||
]}
|
||||
>
|
||||
|
|
|
@ -7,6 +7,11 @@ import { Logo } from '@/components/Logo'
|
|||
import AppView from './AppView.vue'
|
||||
import ToolHeader from './ToolHeader.vue'
|
||||
import { ElScrollbar } from 'element-plus'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('layout-content')
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
|
@ -49,7 +54,7 @@ export const useRenderLayout = () => {
|
|||
</div>
|
||||
<div
|
||||
class={[
|
||||
'v-content',
|
||||
prefixCls,
|
||||
'absolute top-0 h-[100%]',
|
||||
{
|
||||
'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
|
||||
|
@ -64,6 +69,7 @@ export const useRenderLayout = () => {
|
|||
<ElScrollbar
|
||||
v-loading={pageLoading.value}
|
||||
class={[
|
||||
`${prefixCls}-scrollbar`,
|
||||
{
|
||||
'!h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))] mt-[calc(var(--top-tool-height)+var(--tags-view-height))]':
|
||||
fixedHeader.value
|
||||
|
@ -109,7 +115,7 @@ export const useRenderLayout = () => {
|
|||
<Menu class="!h-full"></Menu>
|
||||
<div
|
||||
class={[
|
||||
'v-content',
|
||||
prefixCls,
|
||||
'h-[100%]',
|
||||
{
|
||||
'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
|
||||
|
@ -123,6 +129,7 @@ export const useRenderLayout = () => {
|
|||
<ElScrollbar
|
||||
v-loading={pageLoading.value}
|
||||
class={[
|
||||
`${prefixCls}-scrollbar`,
|
||||
{
|
||||
'!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
|
||||
fixedHeader.value && tagsView.value
|
||||
|
@ -161,10 +168,11 @@ export const useRenderLayout = () => {
|
|||
<Menu class="flex-1 px-10px h-[var(--top-tool-height)]"></Menu>
|
||||
<ToolHeader></ToolHeader>
|
||||
</div>
|
||||
<div class="v-content h-full w-full">
|
||||
<div class={[prefixCls, 'v-content h-full w-full']}>
|
||||
<ElScrollbar
|
||||
v-loading={pageLoading.value}
|
||||
class={[
|
||||
`${prefixCls}-scrollbar`,
|
||||
{
|
||||
'mt-[var(--tags-view-height)]': fixedHeader.value
|
||||
}
|
||||
|
@ -202,7 +210,7 @@ export const useRenderLayout = () => {
|
|||
{/* <Menu class="!h-full"></Menu> */}
|
||||
<div
|
||||
class={[
|
||||
'v-content',
|
||||
prefixCls,
|
||||
'h-[100%]',
|
||||
{
|
||||
'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)]':
|
||||
|
@ -216,6 +224,7 @@ export const useRenderLayout = () => {
|
|||
<ElScrollbar
|
||||
v-loading={pageLoading.value}
|
||||
class={[
|
||||
`${prefixCls}-scrollbar`,
|
||||
{
|
||||
'!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
|
||||
fixedHeader.value && tagsView.value
|
||||
|
|
|
@ -131,8 +131,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
|
|||
name: 'Icons',
|
||||
meta: {
|
||||
title: '图标',
|
||||
icon: 'carbon:skill-level-advanced',
|
||||
affix: true
|
||||
icon: 'carbon:skill-level-advanced'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
@ -59,5 +59,9 @@
|
|||
|
||||
--app-content-padding: 20px;
|
||||
|
||||
--app-contnet-bg-color: #f5f7f9;
|
||||
|
||||
--app-footer-height: 50px;
|
||||
|
||||
--transition-time-02: 0.2s;
|
||||
}
|
||||
|
|
|
@ -1,7 +1,10 @@
|
|||
// 命名空间
|
||||
@namespace: v;
|
||||
// el命名空间
|
||||
@elNamespace: el;
|
||||
|
||||
// 导出变量
|
||||
:export {
|
||||
namespace: @namespace;
|
||||
elNamespace: @elNamespace;
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
// import { ElRow, ElCol } from 'element-plus'
|
||||
import PanelGroup from './components/PanelGroup.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>dddd</div>
|
||||
<PanelGroup />
|
||||
</template>
|
||||
|
|
|
@ -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>
|
Loading…
Reference in New Issue