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

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/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,12 +1,22 @@
 <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()
 
 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,17 +60,18 @@ 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" />
       </template>
     </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;
   }