style: Add elNamespace

feat(component): Add namespace of class

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