style: Add elNamespace

feat(component): Add namespace of class

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>