style: Add elNamespace

feat(component): Add namespace of class

package.json

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

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
-    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
+    version: 0.31.1
+    dependencies:
+      '@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:

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

src/assets/svgs/peoples.svg

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

src/components/Backtop/src/Backtop.vue

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

src/components/Breadcrumb/src/Breadcrumb.vue

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

src/components/Collapse/src/Collapse.vue

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

src/components/ConfigGlobal/src/ConfigGlobal.vue

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

src/components/ContextMenu/src/ContextMenu.vue

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

src/components/CountTo/index.ts

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

src/components/CountTo/src/CountTo.vue

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

src/components/Echart/src/Echart.vue

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

src/components/Footer/src/Footer.vue

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

src/components/Form/src/Form.vue

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

src/components/Icon/src/Icon.vue

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

src/components/InputPassword/src/InputPassword.vue

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

src/components/LocaleDropdown/src/LocaleDropdown.vue

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

src/components/Logo/src/Logo.vue

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

src/components/Menu/src/Menu.vue

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

src/components/Screenfull/src/Screenfull.vue

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

src/components/Setting/src/Setting.vue

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

src/components/Setting/src/components/ColorRadioPicker.vue

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

src/components/Setting/src/components/InterfaceDisplay.vue

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

src/components/Setting/src/components/LayoutRadioPicker.vue

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

src/components/SizeDropdown/src/SizeDropdown.vue

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

src/components/TabMenu/src/TabMenu.vue

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

src/components/TagsView/src/TagsView.vue

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

src/components/ThemeSwitch/src/ThemeSwitch.vue

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

src/components/UserInfo/src/UserInfo.vue

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

src/layout/Layout.vue

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

src/layout/components/AppView.vue

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

src/layout/components/ToolHeader.vue

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

src/layout/components/useRenderLayout.tsx

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

src/router/index.ts

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

src/styles/var.css

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

src/styles/variables.module.less

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

src/views/Dashboard/Analysis.vue

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

src/views/Dashboard/components/PanelGroup.vue

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