From 63eb0a012c3a5c6c16155ff105cb6f907e7b66ed Mon Sep 17 00:00:00 2001
From: RSS1102 <jimmyrss1102@gmail.com>
Date: Sun, 4 Jan 2026 19:28:35 +0800
Subject: [PATCH 1/5] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E5=99=A8=E4=B8=AD=E7=9A=84=E5=A4=9A=E4=B8=AA?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复颜色面板中类型判断错误
- 修复字体面板中数组遍历方法
- 修复行高面板中条件判断逻辑
- 重构阴影面板的数据结构和状态管理
- 添加尺寸面板的默认值重置功能
- 修复尺寸显示组件的数值解析
---
 .../theme-generator/src/color-panel/index.vue |   2 +-
 .../theme-generator/src/common/i18n/en-US.js  |   2 +
 .../theme-generator/src/common/i18n/zh-CN.js  |   2 +
 .../font-panel/components/FontSizeAdjust.vue  |   4 +-
 .../components/LineHeightAdjust.vue           |   2 +-
 .../src/shadow-panel/built-in/shadow-map.js   |  51 ++++----
 .../src/shadow-panel/index.vue                | 113 +++++++++---------
 .../src/size-panel/built-in/size-map.js       |  20 ++++
 .../src/size-panel/components/SizeAdjust.vue  |   5 +-
 .../src/size-panel/components/SizeDisplay.vue |   9 +-
 .../theme-generator/src/size-panel/index.vue  |  48 +++++++-
 11 files changed, 171 insertions(+), 87 deletions(-)

diff --git a/packages/theme-generator/src/color-panel/index.vue b/packages/theme-generator/src/color-panel/index.vue
index 5b9573cd..161adb0c 100644
--- a/packages/theme-generator/src/color-panel/index.vue
+++ b/packages/theme-generator/src/color-panel/index.vue
@@ -394,7 +394,7 @@ export default {
       errorMainColor: getOptionFromLocal('error') || getTokenValue('--td-error-color'),
       warningMainColor: getOptionFromLocal('warning') || getTokenValue('--td-warning-color'),
       generationMode: getOptionFromLocal('recommend') === 'true' ? 'recommend' : 'remain', // remain: 保留输入, recommend: 智能推荐
-      isGrayRelatedToTheme: getOptionFromLocal('neutral') == 'true',
+      isGrayRelatedToTheme: getOptionFromLocal('neutral') === 'true',
       isMoreVisible: false,
     };
   },
diff --git a/packages/theme-generator/src/common/i18n/en-US.js b/packages/theme-generator/src/common/i18n/en-US.js
index df24689f..35c63e70 100644
--- a/packages/theme-generator/src/common/i18n/en-US.js
+++ b/packages/theme-generator/src/common/i18n/en-US.js
@@ -45,6 +45,8 @@ export default {
     yPadding: 'vertical Padding',
     popupPadding: 'popup Padding',
     margin: 'margin',
+    resetDefault: 'Reset',
+    resetConfirm: 'Are you sure to reset size to default?',
   },
   borerRadius: {
     title: 'Border',
diff --git a/packages/theme-generator/src/common/i18n/zh-CN.js b/packages/theme-generator/src/common/i18n/zh-CN.js
index e8052583..2f6b9a6d 100644
--- a/packages/theme-generator/src/common/i18n/zh-CN.js
+++ b/packages/theme-generator/src/common/i18n/zh-CN.js
@@ -45,6 +45,8 @@ export default {
     yPadding: '组件上下边距',
     popupPadding: '弹出层边距',
     margin: '组件间距',
+    resetDefault: '恢复默认',
+    resetConfirm: '确定恢复尺寸默认值吗?',
   },
   borerRadius: {
     title: '圆角',
diff --git a/packages/theme-generator/src/font-panel/components/FontSizeAdjust.vue b/packages/theme-generator/src/font-panel/components/FontSizeAdjust.vue
index 5e23961d..fe858dd4 100644
--- a/packages/theme-generator/src/font-panel/components/FontSizeAdjust.vue
+++ b/packages/theme-generator/src/font-panel/components/FontSizeAdjust.vue
@@ -165,7 +165,7 @@ export default {
 
       if (!FONT_SIZE_STEPS[v]) return;
       const newSteps = FONT_SIZE_STEPS[v];
-      newSteps.map(({ name, value }) => {
+      newSteps.forEach(({ name, value }) => {
         modifyToken(name, value, isCustom);
         const i = this.tokenTypeList.findIndex((v) => v.label === name);
         if (i !== -1) this.tokenTypeList[i].value = value;
@@ -236,7 +236,7 @@ export default {
         this.ladderTypeList[idx].value = res;
         if (parseInt(this.initLadderList[idx].value, 10) !== parseInt(res, 10)) this.segmentSelectionDisabled = true;
 
-        fontSizeList.map((tokenName) => {
+        fontSizeList.forEach((tokenName) => {
           const i = this.tokenTypeList.findIndex((v) => v.label === tokenName);
           if (i !== -1) this.tokenTypeList[i].value = res;
         });
diff --git a/packages/theme-generator/src/font-panel/components/LineHeightAdjust.vue b/packages/theme-generator/src/font-panel/components/LineHeightAdjust.vue
index 9331e654..544cbebb 100644
--- a/packages/theme-generator/src/font-panel/components/LineHeightAdjust.vue
+++ b/packages/theme-generator/src/font-panel/components/LineHeightAdjust.vue
@@ -149,7 +149,7 @@ export default {
       } else {
         this.lineHeightValue = defaultVal;
       }
-      updateLocalOption('line-height', this.step == 3 ? `${type}_${this.lineHeightValue}` : null);
+      updateLocalOption('line-height', this.step !== 3 ? `${type}_${this.lineHeightValue}` : null);
       updateLineHeightTokens(this.lineHeightValue, type);
     },
   },
diff --git a/packages/theme-generator/src/shadow-panel/built-in/shadow-map.js b/packages/theme-generator/src/shadow-panel/built-in/shadow-map.js
index f0f12ba0..473c07c6 100644
--- a/packages/theme-generator/src/shadow-panel/built-in/shadow-map.js
+++ b/packages/theme-generator/src/shadow-panel/built-in/shadow-map.js
@@ -1,48 +1,55 @@
 export const ShadowSelectType = {
-  Super_Light: 0,
-  Light: 1,
-  Default: 2,
-  Deep: 3,
-  Super_Deep: 4,
-  Self_Defined: 5,
+  Super_Light: 1,
+  Light: 2,
+  Default: 3,
+  Deep: 4,
+  Super_Deep: 5,
+  Self_Defined: 6,
 };
 
-export const ShadowSelectDetail = {
-  [ShadowSelectType.Super_Light]: [
+export const ShadowSelect = [
+  { label: '超轻', enLabel: 'lighter', value: ShadowSelectType.Super_Light },
+  { label: '轻', enLabel: 'light', value: ShadowSelectType.Light },
+  { label: '默认', enLabel: 'default', value: ShadowSelectType.Default },
+  { label: '深', enLabel: 'deep', value: ShadowSelectType.Deep },
+  { label: '超深', enLabel: 'deeper', value: ShadowSelectType.Super_Deep },
+  { label: '自定义', enLabel: 'customized', value: ShadowSelectType.Self_Defined, disabled: true },
+];
+
+export const ShadowLabels = Object.fromEntries(ShadowSelect.map((item) => [item.value, item.label]));
+
+// 预设阴影值数组，索引对应 step - 1
+export const ShadowStepArray = [
+  // Super_Light (step=1)
+  [
     '0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.05)',
     '0 2px 6px rgba(0, 0, 0, 0.02), 0 4px 6px rgba(0, 0, 0, 0.05), 0 3px 3px rgba(0, 0, 0, 0.06)',
     '0 4px 10px 3px rgba(0, 0, 0, 0.05), 0 4px 6px 2px rgba(0, 0, 0, 0.04), 0 2px 3px -3px rgba(0, 0, 0, 0.08)',
   ],
-  [ShadowSelectType.Light]: [
+  // Light (step=2)
+  [
     '0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 4px rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.08)',
     '0 3px 10px 2px rgba(0, 0, 0, 0.04), 0 6px 8px rgba(0, 0, 0, 0.05), 0 4px 4px -2px rgba(0, 0, 0, 0.08)',
     '0 4px 18px 5px rgba(0, 0, 0, 0.05), 0 10px 9px 2px rgba(0, 0, 0, 0.04), 0 3px 5px -3px rgba(0, 0, 0, 0.08)',
   ],
-  [ShadowSelectType.Default]: [
+  // Default (step=3)
+  [
     '0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12)',
     '0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 5px 5px -3px rgba(0, 0, 0, 0.1)',
     '0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08)',
   ],
-  [ShadowSelectType.Deep]: [
+  // Deep (step=4)
+  [
     '0 3px 18px rgba(0, 0, 0, 0.06), 0 4px 7px rgba(0, 0, 0, 0.1), 0 2px 7px -1px rgba(0, 0, 0, 0.14)',
     '0 5px 18px 2px rgba(0, 0, 0, 0.07), 0 10px 15px 1px rgba(0, 0, 0, 0.1), 0 6px 10px -4px rgba(0, 0, 0, 0.14)',
     '0 8px 33px 5px rgba(0, 0, 0, 0.07), 0 18px 28px 2px rgba(0, 0, 0, 0.07), 0 10px 12px -6px rgba(0, 0, 0, 0.17)',
   ],
-  [ShadowSelectType.Super_Deep]: [
+  // Super_Deep (step=5)
+  [
     '0 5px 20px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.12), 0 5px 10px -1px rgba(0, 0, 0, 0.18)',
     '0 7px 23px 2px rgba(0, 0, 0, 0.09), 0 12px 17px 1px rgba(0, 0, 0, 0.1), 0 8px 14px -4px rgba(0, 0, 0, 0.18)',
     '0 11px 37px 5px rgba(0, 0, 0, 0.1), 0 21px 31px 2px rgba(0, 0, 0, 0.12), 0 14px 20px -6px rgba(0, 0, 0, 0.16)',
   ],
-  [ShadowSelectType.Self_Defined]: ['', '', ''],
-};
-
-export const ShadowSelect = [
-  { label: '超轻', enLabel: 'lighter', value: ShadowSelectType.Super_Light },
-  { label: '轻', enLabel: 'light', value: ShadowSelectType.Light },
-  { label: '默认', enLabel: 'default', value: ShadowSelectType.Default },
-  { label: '深', enLabel: 'deep', value: ShadowSelectType.Deep },
-  { label: '超深', enLabel: 'deeper', value: ShadowSelectType.Super_Deep },
-  { label: '自定义', enLabel: 'customized', value: ShadowSelectType.Self_Defined, disabled: true },
 ];
 
 export const ShadowTypeDetail = [
diff --git a/packages/theme-generator/src/shadow-panel/index.vue b/packages/theme-generator/src/shadow-panel/index.vue
index 48402291..cff3a510 100644
--- a/packages/theme-generator/src/shadow-panel/index.vue
+++ b/packages/theme-generator/src/shadow-panel/index.vue
@@ -14,7 +14,7 @@
           v-model="step"
           :selectOptions="selectOptions"
           :suspendedLabels="suspendedLabels"
-          :disabled="forbidden"
+          :disabled="segmentSelectionDisabled"
         >
           <template #left>
             <div class="shadow-panel__round-box" :style="{ 'box-shadow': leftShadow }"></div>
@@ -43,9 +43,10 @@ import { getOptionFromLocal, modifyToken, updateLocalOption } from '@/common/the
 import { getTokenValue } from '@/common/utils';
 
 import {
+  ShadowLabels,
   ShadowSelect,
-  ShadowSelectDetail,
   ShadowSelectType,
+  ShadowStepArray,
   ShadowTypeDetail,
   ShadowTypeMap,
 } from './built-in/shadow-map';
@@ -65,17 +66,13 @@ export default {
     return {
       shadowPalette: [],
       selectOptions: ShadowSelect,
-      selfDefined: ShadowSelectType,
       step: getOptionFromLocal('shadow') || ShadowSelectType.Default,
-      suspendedLabels: {},
+      suspendedLabels: ShadowLabels,
+      segmentSelectionDisabled: false,
     };
   },
   created() {
     this.shadowTypeDetail = ShadowTypeDetail;
-    this.suspendedLabels = this.selectOptions.reduce((acc, option) => {
-      acc[option.value] = this.isEn ? option.enLabel : option.label;
-      return acc;
-    }, {});
   },
   computed: {
     contentStyle() {
@@ -86,50 +83,46 @@ export default {
       };
     },
     leftShadow() {
-      const selectKeys = Object.keys(ShadowSelectDetail);
-      if (selectKeys.length < 1) return '';
-      const shadowArray = ShadowSelectDetail[selectKeys[0]][0];
-      return shadowArray;
+      if (ShadowStepArray.length < 1) return '';
+      return ShadowStepArray[0][0];
     },
     rightShadow() {
-      const selectKeys = Object.keys(ShadowSelectDetail);
-      if (selectKeys.length < 1) return '';
-      // 倒数第二个的，最后一个为自定义
-      const shadowArray = ShadowSelectDetail[selectKeys[selectKeys.length - 2]][0];
-      return shadowArray;
-    },
-    forbidden() {
-      return this.step === ShadowSelectType.Self_Defined;
+      if (ShadowStepArray.length < 2) return '';
+      return ShadowStepArray[ShadowStepArray.length - 1][0];
     },
   },
   watch: {
-    step: {
-      handler(nVal) {
-        updateLocalOption('shadow', nVal !== ShadowSelectType.Default ? nVal : null);
-        // 自定义时去当前系统值
-        if (nVal === ShadowSelectType.Self_Defined) {
-          // this.shadowPalette = this.getCurrentPalette();
-          return;
-        }
-        const shadows = ShadowSelectDetail[nVal];
-        if (!shadows) return;
-        this.shadowPalette = shadows.map((shadow) => this.splitShadowValue(shadow));
-      },
-    },
-    shadowPalette(nVal) {
-      // shadowPalette 值变化时认为有编辑
-      const currentPalette = this.getCurrentPalette();
-      for (let index = 0; index < nVal.length; index++) {
-        const shadow = nVal[index];
-        const current = currentPalette[index];
-        const newShadow = shadow.join(',');
-        if (newShadow === current.join(',')) continue;
-        const { name } = ShadowTypeMap[index];
+    shadowPalette(list) {
+      // 检查当前值是否匹配任何预设
+      const currentShadowList = list.map((v) => v.join(', '));
+      const existStep = ShadowStepArray.findIndex((steps) => {
+        return steps.every((step, i) => {
+          // 标准化比较：去除多余空格
+          const normalizedStep = step.replace(/\s+/g, ' ').trim();
+          const normalizedCurrent = currentShadowList[i]?.replace(/\s+/g, ' ').trim();
+          return normalizedStep === normalizedCurrent;
+        });
+      });
 
-        const isCustom = this.step === ShadowSelectType.Self_Defined;
-        modifyToken(name, isCustom ? newShadow : null);
+      if (existStep === -1) {
+        this.segmentSelectionDisabled = true;
       }
     },
+    step(val) {
+      updateLocalOption('shadow', val !== ShadowSelectType.Default ? val : null);
+      const isCustom = val === ShadowSelectType.Self_Defined;
+      this.segmentSelectionDisabled = isCustom;
+      if (!ShadowStepArray[val - 1]) return;
+
+      // 批量修改 shadow
+      const presetShadows = ShadowStepArray[val - 1];
+      this.shadowPalette = presetShadows.map((shadow, index) => {
+        const shadowArray = this.splitShadowValue(shadow);
+        const newShadow = shadowArray.join(',');
+        modifyToken(ShadowTypeMap[index].name, newShadow, isCustom);
+        return shadowArray;
+      });
+    },
   },
   methods: {
     // 拆分 box-shadow 的值 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%)
@@ -143,29 +136,33 @@ export default {
           return `${value})`;
         });
     },
-    getCurrentPalette() {
-      const currentPalette = [...new Array(ShadowTypeMap.length).keys()].map((_, i) => {
-        const { value, from } = ShadowTypeMap[i];
-        if (value) return value;
-        const data = getTokenValue(from);
-        return this.splitShadowValue(data);
-      });
-      return currentPalette;
-    },
     change(value, index) {
-      this.step = ShadowSelectType.Self_Defined;
       const val = [...this.shadowPalette];
       val[index] = value;
       this.shadowPalette = val;
+
+      // 修改单独的 shadow
+      const newShadow = value.join(',');
+      modifyToken(ShadowTypeMap[index].name, newShadow);
+
+      // 检查是否还匹配当前预设
+      if (ShadowStepArray[this.step - 1]) {
+        const presetShadow = this.splitShadowValue(ShadowStepArray[this.step - 1][index]).join(',');
+        if (newShadow !== presetShadow) {
+          this.segmentSelectionDisabled = true;
+        }
+      }
     },
-    setCurrentPalette() {
-      const currentTokenArr = this.getCurrentPalette();
-      this.shadowPalette = currentTokenArr.map((token) => this.splitShadowValue(token));
+    initShadowToken() {
+      this.shadowPalette = ShadowTypeMap.map((item) => {
+        const data = getTokenValue(item.from);
+        return this.splitShadowValue(data);
+      });
     },
   },
   mounted() {
     this.$nextTick(() => {
-      this.setCurrentPalette();
+      this.initShadowToken();
     });
   },
 };
diff --git a/packages/theme-generator/src/size-panel/built-in/size-map.js b/packages/theme-generator/src/size-panel/built-in/size-map.js
index a13a8b17..251e9c60 100644
--- a/packages/theme-generator/src/size-panel/built-in/size-map.js
+++ b/packages/theme-generator/src/size-panel/built-in/size-map.js
@@ -1,5 +1,25 @@
 export const SIZE_TOKENS = Array.from({ length: 16 }, (_, i) => `--td-size-${i + 1}`);
 
+// 基础尺寸默认值
+export const SIZE_DEFAULT_VALUES = {
+  '--td-size-1': '2px',
+  '--td-size-2': '4px',
+  '--td-size-3': '6px',
+  '--td-size-4': '8px',
+  '--td-size-5': '12px',
+  '--td-size-6': '16px',
+  '--td-size-7': '20px',
+  '--td-size-8': '24px',
+  '--td-size-9': '28px',
+  '--td-size-10': '32px',
+  '--td-size-11': '36px',
+  '--td-size-12': '40px',
+  '--td-size-13': '48px',
+  '--td-size-14': '56px',
+  '--td-size-15': '64px',
+  '--td-size-16': '72px',
+};
+
 // 组件大小列表
 export const COMP_SIZE_MAP = [
   {
diff --git a/packages/theme-generator/src/size-panel/components/SizeAdjust.vue b/packages/theme-generator/src/size-panel/components/SizeAdjust.vue
index 5b989155..a9b5d19c 100644
--- a/packages/theme-generator/src/size-panel/components/SizeAdjust.vue
+++ b/packages/theme-generator/src/size-panel/components/SizeAdjust.vue
@@ -37,7 +37,10 @@
                   v-else-if="type === 'comp-padding-tb'"
                   :size="parseSize(getTokenValue(`--td-${token.from}`))"
                 />
-                <margin-adjust-svg v-else-if="type === 'comp-margin'" :size="parseSize(getTokenValue(token.from))" />
+                <margin-adjust-svg
+                  v-else-if="type === 'comp-margin'"
+                  :size="parseSize(getTokenValue(`--td-${token.from}`))"
+                />
                 <popup-padding-adjust-svg
                   v-else-if="type === 'popup-padding'"
                   :size="parseSize(getTokenValue(`--td-${token.from}`))"
diff --git a/packages/theme-generator/src/size-panel/components/SizeDisplay.vue b/packages/theme-generator/src/size-panel/components/SizeDisplay.vue
index 5a6fc8dd..57697142 100644
--- a/packages/theme-generator/src/size-panel/components/SizeDisplay.vue
+++ b/packages/theme-generator/src/size-panel/components/SizeDisplay.vue
@@ -10,7 +10,7 @@
           marginBottom: '8px',
         }"
       >
-        <span><SectionDynamicSvg :size="parseInt(getTokenValue(token), 10)" /></span>
+        <span><SectionDynamicSvg :size="parseSize(getTokenValue(token))" /></span>
         <span>{{ token.replace('--td-', '') }} : {{ getTokenValue(token) }}</span>
       </div>
     </div>
@@ -33,6 +33,13 @@ export default {
   },
   methods: {
     getTokenValue,
+    parseSize(val) {
+      if (typeof val === 'string') {
+        const num = parseFloat(val);
+        return isNaN(num) ? 0 : num;
+      }
+      return val;
+    },
   },
   mounted() {
     this.$nextTick(() => {
diff --git a/packages/theme-generator/src/size-panel/index.vue b/packages/theme-generator/src/size-panel/index.vue
index 41081483..de4c1e2a 100644
--- a/packages/theme-generator/src/size-panel/index.vue
+++ b/packages/theme-generator/src/size-panel/index.vue
@@ -9,7 +9,19 @@
   >
     <div class="size-content__content" :style="contentStyle">
       <div class="size-content__main">
-        <p class="size-content__title">{{ lang.size.basicSize }}</p>
+        <div class="size-content__header">
+          <p class="size-content__title">{{ lang.size.basicSize }}</p>
+          <t-popconfirm
+            :content="lang.size.resetConfirm"
+            :theme="null"
+            :popup-props="{ attach: handleAttach }"
+            @confirm="resetSizeToDefault"
+          >
+            <t-button variant="text" size="small" class="size-content__reset-btn">
+              {{ lang.size.resetDefault }}
+            </t-button>
+          </t-popconfirm>
+        </div>
         <size-display />
       </div>
       <!-- 组件大小 -->
@@ -142,8 +154,12 @@
 </template>
 
 <script lang="jsx">
+import { Button as TButton, Popconfirm as TPopconfirm } from 'tdesign-vue';
+
 import { CommonCollapse } from '@/common/components';
 import { langMixin } from '@/common/i18n';
+import { modifyToken } from '@/common/themes';
+import { handleAttach } from '@/common/utils';
 
 import SizeAdjust from './components/SizeAdjust.vue';
 import SizeDisplay from './components/SizeDisplay.vue';
@@ -160,6 +176,7 @@ import {
   COMP_PADDING_TB_MAP,
   COMP_POPUP_PADDING_MAP,
   COMP_SIZE_MAP,
+  SIZE_DEFAULT_VALUES,
 } from './built-in/size-map';
 
 export default {
@@ -171,6 +188,8 @@ export default {
     CommonCollapse,
     SizeDisplay,
     SizeAdjust,
+    TButton,
+    TPopconfirm,
     // svg
     SizeSvg,
     HorizontalPaddingSvg,
@@ -204,6 +223,20 @@ export default {
       };
     },
   },
+  methods: {
+    handleAttach,
+    resetSizeToDefault() {
+      // 恢复所有基础尺寸到默认值
+      Object.entries(SIZE_DEFAULT_VALUES).forEach(([token, value]) => {
+        modifyToken(token, value, false);
+      });
+      // 刷新所有 size 相关组件
+      Object.keys(this.refreshIdMap).forEach((key) => {
+        this.refreshIdMap[key]++;
+      });
+      this.$root.$emit('refresh-size-tokens', 'all');
+    },
+  },
   mounted() {
     this.$root.$on('refresh-size-tokens', (type) => {
       Object.keys(this.refreshIdMap).forEach((key) => {
@@ -249,6 +282,19 @@ export default {
     padding: 12px 4px 16px 16px;
   }
 
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__reset-btn {
+    color: var(--text-secondary);
+    &:hover {
+      color: var(--text-primary);
+    }
+  }
+
   &__title {
     font-size: 14px;
     color: var(--text-primary);

From ec42109d18a969b70f4025a9ade8e8910b21595f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E8=8F=9C=20Cai?= <jimmyrss1102@gmail.com>
Date: Sun, 11 Jan 2026 02:51:19 +0800
Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20Web=20Componen?=
 =?UTF-8?q?ts=20=E5=B0=BA=E5=AF=B8=E5=8F=98=E9=87=8F=E9=9A=94=E7=A6=BB?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/theme-generator/src/Generator.vue    | 52 +++++++++++++++++++
 .../theme-generator/src/common/themes/core.js | 43 +++++++++++++++
 2 files changed, 95 insertions(+)

diff --git a/packages/theme-generator/src/Generator.vue b/packages/theme-generator/src/Generator.vue
index 76a2f27f..9e429c7e 100644
--- a/packages/theme-generator/src/Generator.vue
+++ b/packages/theme-generator/src/Generator.vue
@@ -48,8 +48,60 @@ export default {
     initGeneratorVars();
     applyTokenFromLocal();
     syncThemeToIframe(this.device);
+
+    // 初始化 Web Components 尺寸变量隔离
+    this.initWebComponentsSizeProtection();
   },
   methods: {
+    initWebComponentsSizeProtection() {
+      // 创建隔离样式表，保护 Web Components 不受尺寸变量修改的影响
+      let styleEl = document.getElementById('__web-components-size-lock__');
+
+      if (!styleEl) {
+        styleEl = document.createElement('style');
+        styleEl.id = '__web-components-size-lock__';
+        document.head.appendChild(styleEl);
+      }
+
+      // 定义所有 Web Components 使用的尺寸变量的初始值
+      const webComponentsSizeVars = {
+        '--td-size-1': '2px',
+        '--td-size-2': '4px',
+        '--td-size-3': '6px',
+        '--td-size-4': '8px',
+        '--td-size-5': '12px',
+        '--td-size-6': '16px',
+        '--td-size-7': '20px',
+        '--td-size-8': '24px',
+        '--td-size-9': '28px',
+        '--td-size-10': '32px',
+        '--td-size-11': '36px',
+        '--td-size-12': '40px',
+        '--td-size-13': '48px',
+        '--td-size-14': '56px',
+        '--td-size-15': '64px',
+        '--td-size-16': '72px',
+        '--td-comp-size-xxxs': '16px',
+        '--td-comp-size-xxs': '20px',
+        '--td-comp-size-xs': '24px',
+        '--td-comp-size-s': '28px',
+        '--td-comp-size-m': '32px',
+        '--td-comp-size-l': '36px',
+        '--td-comp-size-xl': '40px',
+        '--td-comp-size-xxl': '48px',
+        '--td-comp-size-xxxl': '56px',
+        '--td-comp-size-xxxxl': '64px',
+        '--td-comp-size-xxxxxl': '72px',
+      };
+
+      let cssRules = '.theme-generator {\n';
+      Object.entries(webComponentsSizeVars).forEach(([key, val]) => {
+        cssRules += `  ${key}: ${val} !important;\n`;
+      });
+      cssRules += '}';
+
+      styleEl.textContent = cssRules;
+    },
     handleTriggerVisible() {
       this.visible = true;
     },
diff --git a/packages/theme-generator/src/common/themes/core.js b/packages/theme-generator/src/common/themes/core.js
index c60a13aa..98721864 100644
--- a/packages/theme-generator/src/common/themes/core.js
+++ b/packages/theme-generator/src/common/themes/core.js
@@ -150,6 +150,11 @@ export function modifyToken(tokenName, newVal, saveToLocal = true) {
     tokenFound = true;
 
     updateLocalToken(tokenName, saveToLocal ? newVal : null);
+
+    // 如果修改的是尺寸相关的 token（Web Components 使用的），为 Web Components 容器创建隔离样式
+    if (isWebComponentsSizeToken(tokenName)) {
+      createWebComponentsStyleOverride(tokenName, currentVal);
+    }
   });
 
   if (!tokenFound) {
@@ -157,6 +162,44 @@ export function modifyToken(tokenName, newVal, saveToLocal = true) {
   }
 }
 
+// 检查是否是 Web Components 使用的尺寸变量
+function isWebComponentsSizeToken(tokenName) {
+  return tokenName.startsWith('--td-size-') || tokenName.startsWith('--td-comp-size-');
+}
+
+// 为 Web Components 容器创建或更新隔离样式表
+function createWebComponentsStyleOverride(tokenName, originalVal) {
+  let styleEl = document.getElementById('__web-components-size-lock__');
+
+  if (!styleEl) {
+    styleEl = document.createElement('style');
+    styleEl.id = '__web-components-size-lock__';
+    document.head.appendChild(styleEl);
+  }
+
+  // 获取当前的 CSS 规则
+  let cssText = styleEl.textContent;
+
+  // 检查是否已经有这个变量的规则
+  const varRegex = new RegExp(`${tokenName}:\\s*[^;]*;`, 'g');
+
+  if (varRegex.test(cssText)) {
+    // 更新现有的变量定义，保持原值
+    cssText = cssText.replace(varRegex, `${tokenName}: ${originalVal} !important;`);
+  } else {
+    // 添加新的变量定义
+    // 如果没有 .theme-generator 选择器，需要创建
+    if (!cssText.includes('.theme-generator {')) {
+      cssText += `\n.theme-generator { ${tokenName}: ${originalVal} !important; }`;
+    } else {
+      // 在现有的 .theme-generator 规则中添加
+      cssText = cssText.replace(/\.theme-generator\s*{/, `.theme-generator { ${tokenName}: ${originalVal} !important;`);
+    }
+  }
+
+  styleEl.textContent = cssText;
+}
+
 export function getOptionFromLocal(optionName) {
   const options = localStorage.getItem(CUSTOM_OPTIONS_ID);
   if (!options) return;

From 4d342063838d3deb43e39ca8eef2fac1f9792f0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E8=8F=9C=20Cai?= <jimmyrss1102@gmail.com>
Date: Sun, 11 Jan 2026 03:06:54 +0800
Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=20Web=20Component?=
 =?UTF-8?q?s=20=E5=B0=BA=E5=AF=B8=E5=8F=98=E9=87=8F=E9=9A=94=E7=A6=BB?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=EF=BC=8C=E6=B7=BB=E5=8A=A0=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E5=B0=BA=E5=AF=B8=E5=80=BC=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/theme-generator/src/Generator.vue    | 56 +++++--------------
 .../theme-generator/src/common/themes/core.js | 53 ++++--------------
 .../src/size-panel/built-in/size-map.js       | 15 +++++
 3 files changed, 39 insertions(+), 85 deletions(-)

diff --git a/packages/theme-generator/src/Generator.vue b/packages/theme-generator/src/Generator.vue
index 9e429c7e..9d489c54 100644
--- a/packages/theme-generator/src/Generator.vue
+++ b/packages/theme-generator/src/Generator.vue
@@ -18,6 +18,9 @@ import {
   syncThemeToIframe,
   themeStore,
 } from '@/common/themes';
+import { COMP_SIZE_DEFAULT_VALUES, SIZE_DEFAULT_VALUES } from '@/size-panel/built-in/size-map';
+
+const STYLE_LOCK_ID = '__web-components-size-lock__';
 
 import FloatDock from './float-dock';
 import PanelDrawer from './panel-drawer';
@@ -49,58 +52,20 @@ export default {
     applyTokenFromLocal();
     syncThemeToIframe(this.device);
 
-    // 初始化 Web Components 尺寸变量隔离
     this.initWebComponentsSizeProtection();
   },
   methods: {
     initWebComponentsSizeProtection() {
-      // 创建隔离样式表，保护 Web Components 不受尺寸变量修改的影响
-      let styleEl = document.getElementById('__web-components-size-lock__');
+      let styleEl = document.getElementById(STYLE_LOCK_ID);
 
       if (!styleEl) {
         styleEl = document.createElement('style');
-        styleEl.id = '__web-components-size-lock__';
+        styleEl.id = STYLE_LOCK_ID;
         document.head.appendChild(styleEl);
       }
 
-      // 定义所有 Web Components 使用的尺寸变量的初始值
-      const webComponentsSizeVars = {
-        '--td-size-1': '2px',
-        '--td-size-2': '4px',
-        '--td-size-3': '6px',
-        '--td-size-4': '8px',
-        '--td-size-5': '12px',
-        '--td-size-6': '16px',
-        '--td-size-7': '20px',
-        '--td-size-8': '24px',
-        '--td-size-9': '28px',
-        '--td-size-10': '32px',
-        '--td-size-11': '36px',
-        '--td-size-12': '40px',
-        '--td-size-13': '48px',
-        '--td-size-14': '56px',
-        '--td-size-15': '64px',
-        '--td-size-16': '72px',
-        '--td-comp-size-xxxs': '16px',
-        '--td-comp-size-xxs': '20px',
-        '--td-comp-size-xs': '24px',
-        '--td-comp-size-s': '28px',
-        '--td-comp-size-m': '32px',
-        '--td-comp-size-l': '36px',
-        '--td-comp-size-xl': '40px',
-        '--td-comp-size-xxl': '48px',
-        '--td-comp-size-xxxl': '56px',
-        '--td-comp-size-xxxxl': '64px',
-        '--td-comp-size-xxxxxl': '72px',
-      };
-
-      let cssRules = '.theme-generator {\n';
-      Object.entries(webComponentsSizeVars).forEach(([key, val]) => {
-        cssRules += `  ${key}: ${val} !important;\n`;
-      });
-      cssRules += '}';
-
-      styleEl.textContent = cssRules;
+      const sizeVars = { ...SIZE_DEFAULT_VALUES, ...COMP_SIZE_DEFAULT_VALUES };
+      styleEl.textContent = buildSizeVarsCSS(sizeVars);
     },
     handleTriggerVisible() {
       this.visible = true;
@@ -113,6 +78,13 @@ export default {
     },
   },
 };
+
+function buildSizeVarsCSS(sizeVars) {
+  const body = Object.entries(sizeVars)
+    .map(([key, val]) => `  ${key}: ${val} !important;`)
+    .join('\n');
+  return `:root {\n${body}\n}`;
+}
 </script>
 
 <style lang="less" scoped>
diff --git a/packages/theme-generator/src/common/themes/core.js b/packages/theme-generator/src/common/themes/core.js
index 98721864..d52b662a 100644
--- a/packages/theme-generator/src/common/themes/core.js
+++ b/packages/theme-generator/src/common/themes/core.js
@@ -131,7 +131,11 @@ export function exportCustomStyleSheet(device) {
 }
 
 export function modifyToken(tokenName, newVal, saveToLocal = true) {
-  // 获取所有可能包含 token 的样式表
+  if (tokenName.startsWith('--td-size-') || tokenName.startsWith('--td-comp-size-')) {
+    logSizeIntercept(tokenName);
+    return;
+  }
+
   const styleSheets = document.querySelectorAll(`#${CUSTOM_THEME_ID}, #${CUSTOM_DARK_ID}, #${CUSTOM_EXTRA_ID}`);
 
   let tokenFound = false;
@@ -150,11 +154,6 @@ export function modifyToken(tokenName, newVal, saveToLocal = true) {
     tokenFound = true;
 
     updateLocalToken(tokenName, saveToLocal ? newVal : null);
-
-    // 如果修改的是尺寸相关的 token（Web Components 使用的），为 Web Components 容器创建隔离样式
-    if (isWebComponentsSizeToken(tokenName)) {
-      createWebComponentsStyleOverride(tokenName, currentVal);
-    }
   });
 
   if (!tokenFound) {
@@ -162,44 +161,12 @@ export function modifyToken(tokenName, newVal, saveToLocal = true) {
   }
 }
 
-// 检查是否是 Web Components 使用的尺寸变量
-function isWebComponentsSizeToken(tokenName) {
-  return tokenName.startsWith('--td-size-') || tokenName.startsWith('--td-comp-size-');
-}
-
-// 为 Web Components 容器创建或更新隔离样式表
-function createWebComponentsStyleOverride(tokenName, originalVal) {
-  let styleEl = document.getElementById('__web-components-size-lock__');
-
-  if (!styleEl) {
-    styleEl = document.createElement('style');
-    styleEl.id = '__web-components-size-lock__';
-    document.head.appendChild(styleEl);
-  }
-
-  // 获取当前的 CSS 规则
-  let cssText = styleEl.textContent;
-
-  // 检查是否已经有这个变量的规则
-  const varRegex = new RegExp(`${tokenName}:\\s*[^;]*;`, 'g');
-
-  if (varRegex.test(cssText)) {
-    // 更新现有的变量定义，保持原值
-    cssText = cssText.replace(varRegex, `${tokenName}: ${originalVal} !important;`);
-  } else {
-    // 添加新的变量定义
-    // 如果没有 .theme-generator 选择器，需要创建
-    if (!cssText.includes('.theme-generator {')) {
-      cssText += `\n.theme-generator { ${tokenName}: ${originalVal} !important; }`;
-    } else {
-      // 在现有的 .theme-generator 规则中添加
-      cssText = cssText.replace(/\.theme-generator\s*{/, `.theme-generator { ${tokenName}: ${originalVal} !important;`);
-    }
-  }
-
-  styleEl.textContent = cssText;
+function logSizeIntercept(tokenName) {
+  console.warn(
+    `🔒 [Web Components 隔离] 拦截修改尺寸变量 "${tokenName}"，保持原值不变\n` +
+      '   原因：尺寸变量已被隔离以保护 Web Components 的样式',
+  );
 }
-
 export function getOptionFromLocal(optionName) {
   const options = localStorage.getItem(CUSTOM_OPTIONS_ID);
   if (!options) return;
diff --git a/packages/theme-generator/src/size-panel/built-in/size-map.js b/packages/theme-generator/src/size-panel/built-in/size-map.js
index 251e9c60..f67b9817 100644
--- a/packages/theme-generator/src/size-panel/built-in/size-map.js
+++ b/packages/theme-generator/src/size-panel/built-in/size-map.js
@@ -20,6 +20,21 @@ export const SIZE_DEFAULT_VALUES = {
   '--td-size-16': '72px',
 };
 
+// 组件尺寸默认值
+export const COMP_SIZE_DEFAULT_VALUES = {
+  '--td-comp-size-xxxs': '16px',
+  '--td-comp-size-xxs': '20px',
+  '--td-comp-size-xs': '24px',
+  '--td-comp-size-s': '28px',
+  '--td-comp-size-m': '32px',
+  '--td-comp-size-l': '36px',
+  '--td-comp-size-xl': '40px',
+  '--td-comp-size-xxl': '48px',
+  '--td-comp-size-xxxl': '56px',
+  '--td-comp-size-xxxxl': '64px',
+  '--td-comp-size-xxxxxl': '72px',
+};
+
 // 组件大小列表
 export const COMP_SIZE_MAP = [
   {

From c40ca1ad3c95629d5602b66e352384a8afe14f62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E8=8F=9C=20Cai?= <jimmyrss1102@gmail.com>
Date: Sun, 11 Jan 2026 03:22:04 +0800
Subject: [PATCH 4/5] refactor: update component props and styles for
 consistency

---
 packages/theme-generator/.editorconfig        | 22 +++++
 packages/theme-generator/.eslintrc.js         | 10 ++-
 packages/theme-generator/.prettierrc.json     | 12 +++
 packages/theme-generator/babel.config.js      |  2 +-
 packages/theme-generator/package.json         |  3 +-
 packages/theme-generator/src/Generator.vue    |  7 +-
 .../components/ColorCollapse/index.vue        | 42 +++++----
 .../components/ColorColumn/index.vue          | 31 ++++---
 .../theme-generator/src/color-panel/index.vue | 71 ++++++++-------
 .../src/common/components/Collapse/index.vue  | 19 ++--
 .../common/components/ColorPicker/index.vue   |  9 +-
 .../components/SegmentSelection/index.vue     | 15 ++--
 .../common/components/SizeSlider/index.vue    | 50 +++++++----
 .../theme-generator/src/common/themes/core.js | 30 ++++++-
 .../src/common/themes/store.js                | 32 +++++++
 .../src/common/utils/animation.js             | 43 ++++-----
 .../components/RecommendThemes/index.vue      | 22 ++---
 .../theme-generator/src/float-dock/index.vue  | 20 +++--
 .../font-panel/components/FontColorAdjust.vue | 38 +++++---
 .../font-panel/components/FontColorSvg.vue    |  2 +-
 .../font-panel/components/FontSizeAdjust.vue  | 38 ++++----
 .../components/LineHeightAdjust.vue           | 38 ++++----
 .../theme-generator/src/font-panel/index.vue  | 31 ++++---
 packages/theme-generator/src/main.js          |  6 +-
 .../components/StickyThemeDisplay/index.vue   | 18 ++--
 .../components/SwitchTabs/index.vue           | 29 +++---
 .../src/panel-drawer/index.vue                | 21 +++--
 .../src/radius-panel/index.vue                | 30 +++----
 .../shadow-panel/components/ShadowCard.vue    | 29 +++---
 .../shadow-panel/components/ShadowEditor.vue  | 36 ++++----
 .../shadow-panel/components/ShadowLayer.vue   | 36 ++++----
 .../src/shadow-panel/index.vue                | 29 +++---
 .../src/size-panel/components/SizeAdjust.vue  | 18 ++--
 .../src/size-panel/components/SizeDisplay.vue | 18 ++--
 .../theme-generator/src/size-panel/index.vue  | 45 ++++++----
 .../svg/HorizontalPaddingAdjustSvg.vue        | 18 ++--
 .../size-panel/svg/HorizontalPaddingSvg.vue   | 89 ++++++++-----------
 .../src/size-panel/svg/MarginAdjustSvg.vue    | 17 +---
 .../src/size-panel/svg/MarginSvg.vue          | 38 +-------
 .../size-panel/svg/PopupPaddingAdjustSvg.vue  | 30 ++-----
 .../src/size-panel/svg/PopupPaddingSvg.vue    | 18 +---
 .../src/size-panel/svg/SectionDynamicSvg.vue  |  8 +-
 .../src/size-panel/svg/SectionLeftSvg.vue     |  8 +-
 .../src/size-panel/svg/SectionRightSvg.vue    |  8 +-
 .../src/size-panel/svg/SizeAdjustSvg.vue      |  8 +-
 .../src/size-panel/svg/SizeSvg.vue            | 47 ++--------
 .../svg/VerticalPaddingAdjustSvg.vue          | 18 ++--
 .../src/size-panel/svg/VerticalPaddingSvg.vue | 24 +----
 packages/theme-generator/vue.config.js        |  2 +-
 49 files changed, 632 insertions(+), 603 deletions(-)
 create mode 100644 packages/theme-generator/.editorconfig
 create mode 100644 packages/theme-generator/.prettierrc.json

diff --git a/packages/theme-generator/.editorconfig b/packages/theme-generator/.editorconfig
new file mode 100644
index 00000000..d6811195
--- /dev/null
+++ b/packages/theme-generator/.editorconfig
@@ -0,0 +1,22 @@
+# EditorConfig 有助于在不同编辑器和 IDE 中维护一致的编码风格
+# 更多详情请见 https://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+max_line_length = 120
+
+[*.{json,jsonc}]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/packages/theme-generator/.eslintrc.js b/packages/theme-generator/.eslintrc.js
index 31733bfd..855b10a6 100644
--- a/packages/theme-generator/.eslintrc.js
+++ b/packages/theme-generator/.eslintrc.js
@@ -2,12 +2,18 @@ const path = require('path');
 
 module.exports = {
   root: true,
-  extends: ['plugin:vue/essential', './../../.eslintrc.js'],
+  extends: ['plugin:vue/recommended', './../../.eslintrc.js'],
   parserOptions: {
     parser: '@babel/eslint-parser',
     babelOptions: {
       configFile: path.resolve(__dirname, './babel.config.js'),
     },
+    ecmaVersion: 2020,
+  },
+  rules: {
+    'vue/multi-word-component-names': 'off',
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
   },
-  rules: {},
 };
diff --git a/packages/theme-generator/.prettierrc.json b/packages/theme-generator/.prettierrc.json
new file mode 100644
index 00000000..ed9d899e
--- /dev/null
+++ b/packages/theme-generator/.prettierrc.json
@@ -0,0 +1,12 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false,
+  "htmlWhitespaceSensitivity": "css"
+}
diff --git a/packages/theme-generator/babel.config.js b/packages/theme-generator/babel.config.js
index 162a3ea9..078c0056 100644
--- a/packages/theme-generator/babel.config.js
+++ b/packages/theme-generator/babel.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
+  presets: ['@vue/cli-plugin-babel/preset'],
 };
diff --git a/packages/theme-generator/package.json b/packages/theme-generator/package.json
index c6e89edd..a8f3144c 100644
--- a/packages/theme-generator/package.json
+++ b/packages/theme-generator/package.json
@@ -7,7 +7,8 @@
     "dev": "vue-cli-service serve",
     "build": "vue-cli-service build --target wc --inline-vue --name td-theme-generator src/Generator.vue",
     "build:watch": "vue-cli-service build --target wc --inline-vue --name td-theme-generator src/Generator.vue --watch",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "lint:fix": "vue-cli-service lint --fix"
   },
   "main": "dist/td-theme-generator.js",
   "files": [
diff --git a/packages/theme-generator/src/Generator.vue b/packages/theme-generator/src/Generator.vue
index 9d489c54..a2c37fef 100644
--- a/packages/theme-generator/src/Generator.vue
+++ b/packages/theme-generator/src/Generator.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="theme-generator">
     <float-dock
-      :drawerVisible="visible"
-      :showSetting="showSetting"
+      :drawer-visible="visible"
+      :show-setting="showSetting"
       @click-setting="handleClickSetting"
       @trigger-visible="handleTriggerVisible"
     />
-    <panel-drawer :drawerVisible="visible" @panel-drawer-visible="handleDrawerVisible" />
+    <panel-drawer :drawer-visible="visible" @panel-drawer-visible="handleDrawerVisible" />
   </div>
 </template>
 
@@ -34,6 +34,7 @@ export default {
   props: {
     showSetting: {
       type: [Boolean, String],
+      default: false,
     },
     device: {
       type: String,
diff --git a/packages/theme-generator/src/color-panel/components/ColorCollapse/index.vue b/packages/theme-generator/src/color-panel/components/ColorCollapse/index.vue
index 0f658b88..097b03cd 100644
--- a/packages/theme-generator/src/color-panel/components/ColorCollapse/index.vue
+++ b/packages/theme-generator/src/color-panel/components/ColorCollapse/index.vue
@@ -3,12 +3,12 @@
     <div class="color-collapse__header">
       <t-popup
         placement="left"
-        showArrow
+        show-arrow
         trigger="click"
-        :destroyOnClose="true"
+        :destroy-on-close="true"
         :attach="handleAttach"
-        :overlayStyle="{ borderRadius: '9px' }"
-        :hideEmptyPopup="true"
+        :overlay-style="{ borderRadius: '9px' }"
+        :hide-empty-popup="true"
       >
         <div
           class="block"
@@ -31,7 +31,7 @@
             <edit-1-icon v-if="!disabled && isHover" size="24px" />
           </transition>
         </div>
-        <template #content v-if="!disabled">
+        <template v-if="!disabled" #content>
           <color-picker :value="mainColor" @change="changeColor" />
         </template>
       </t-popup>
@@ -45,11 +45,11 @@
             HEX: {{ mainColor }}
             <t-popup
               placement="top"
-              showArrow
+              show-arrow
               trigger="click"
-              :destroyOnClose="true"
+              :destroy-on-close="true"
               :attach="handleAttach"
-              :overlayStyle="{ borderRadius: '6px' }"
+              :overlay-style="{ borderRadius: '6px' }"
             >
               <file-copy-icon @click="() => copyHex(mainColor)" />
               <template #content>
@@ -60,7 +60,7 @@
         </div>
       </div>
       <div @click="isActive = !isActive">
-        <arrow-icon :isActive="isActive" overlayClassName="color-collapse__arrow" />
+        <arrow-icon :is-active="isActive" overlay-class-name="color-collapse__arrow" />
       </div>
     </div>
     <transition
@@ -87,14 +87,26 @@ import { collapseAnimation, handleAttach } from '@/common/utils';
 
 export default {
   name: 'ColorCollapse',
+  components: { FileCopyIcon, ArrowIcon, TPopup, Edit1Icon, ColorPicker },
+  mixins: [langMixin],
   props: {
-    type: String,
-    title: String,
-    mainColor: String,
-    disabled: Boolean,
+    type: {
+      type: String,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    mainColor: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
-  mixins: [langMixin],
-  components: { FileCopyIcon, ArrowIcon, TPopup, Edit1Icon, ColorPicker },
   data() {
     return {
       ...collapseAnimation(),
diff --git a/packages/theme-generator/src/color-panel/components/ColorColumn/index.vue b/packages/theme-generator/src/color-panel/components/ColorColumn/index.vue
index c134379c..9d5c10d9 100644
--- a/packages/theme-generator/src/color-panel/components/ColorColumn/index.vue
+++ b/packages/theme-generator/src/color-panel/components/ColorColumn/index.vue
@@ -35,11 +35,11 @@
       <div v-for="(color, index) in tokenMap" :key="index">
         <t-popup
           placement="left"
-          showArrow
+          show-arrow
           trigger="click"
-          :destroyOnClose="true"
+          :destroy-on-close="true"
           :attach="handleAttach"
-          :overlayStyle="{ borderRadius: '9px' }"
+          :overlay-style="{ borderRadius: '9px' }"
         >
           <div
             class="block"
@@ -66,7 +66,7 @@
             <color-picker :value="getTokenValue(color.name)" @change="(hex) => changeGradation(hex, color.idx)" />
           </template>
         </t-popup>
-        <div v-if="color.name" @click="handleClickIdx(color.idx)" class="color-content__vertical-list-content">
+        <div v-if="color.name" class="color-content__vertical-list-content" @click="handleClickIdx(color.idx)">
           <div class="color-content__vertical-list-title" :title="color.name">
             {{ color.name.replace('--td-', '') }}
           </div>
@@ -74,7 +74,7 @@
             <span>{{ type }}{{ color.idx }} </span>
             <span>{{ getTokenValue(color.name) }}</span>
           </div>
-          <error-circle-icon class="error-icon" v-if="color.isModified" />
+          <error-circle-icon v-if="color.isModified" class="error-icon" />
         </div>
       </div>
     </div>
@@ -91,12 +91,6 @@ import { getTokenValue, handleAttach } from '@/common/utils';
 
 export default {
   name: 'ColorColumn',
-  props: {
-    type: String,
-    gradientStep: Number,
-    tokenMap: Array,
-  },
-  emit: ['recoverGradation', 'changeGradation'],
   components: {
     TPopup,
     ColorPicker,
@@ -105,6 +99,21 @@ export default {
     ErrorCircleIcon,
   },
   mixins: [langMixin],
+  props: {
+    type: {
+      type: String,
+      default: '',
+    },
+    gradientStep: {
+      type: Number,
+      default: 0,
+    },
+    tokenMap: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emit: ['recoverGradation', 'changeGradation'],
   data() {
     return {
       activeIdx: 0,
diff --git a/packages/theme-generator/src/color-panel/index.vue b/packages/theme-generator/src/color-panel/index.vue
index 161adb0c..588559bd 100644
--- a/packages/theme-generator/src/color-panel/index.vue
+++ b/packages/theme-generator/src/color-panel/index.vue
@@ -22,8 +22,8 @@
               :style="{ paddingBottom: '4px', color: 'var(--text-secondary)' }"
             >
               <div
-                @click="changeBrandColor(color.value)"
                 :class="{ 'is-active': $brandColor.toLowerCase() === color.value.toLowerCase() }"
+                @click="changeBrandColor(color.value)"
               >
                 <div
                   :style="{
@@ -41,18 +41,18 @@
           </t-col>
           <t-col :span="3" :style="{ padding: '0' }">
             <t-popup
-              showArrow
+              show-arrow
               placement="bottom-left"
               trigger="hover"
               :attach="handleAttach"
-              @visible-change="isMoreVisible = $event"
-              overlayClassName="popup-arrow"
-              :overlayStyle="{
+              overlay-class-name="popup-arrow"
+              :overlay-style="{
                 width: '268px',
                 padding: '16px',
                 borderRadius: '9px',
                 marginTop: '8px',
               }"
+              @visible-change="isMoreVisible = $event"
             >
               <div
                 :class="{
@@ -83,17 +83,17 @@
                 </p>
                 <div class="color-content__flex">
                   <div
+                    v-for="(color, idx) in RECOMMEND_COLORS"
+                    :key="idx"
                     class="color-content__block"
                     style="background: none"
-                    :key="idx"
-                    v-for="(color, idx) in RECOMMEND_COLORS"
                   >
                     <div
-                      @click="changeBrandColor(color.value)"
                       :class="{
                         'is-active': $brandColor === color.value,
                       }"
                       :style="{ color: 'var(--text-secondary)' }"
+                      @click="changeBrandColor(color.value)"
                     >
                       <p
                         :style="{
@@ -113,16 +113,16 @@
                 </p>
                 <div class="color-content__flex">
                   <div
+                    v-for="(color, idx) in SCENE_COLORS"
+                    :key="idx"
                     class="color-content__block"
                     style="background: none"
-                    :key="idx"
-                    v-for="(color, idx) in SCENE_COLORS"
                   >
                     <div
-                      @click="changeBrandColor(color.value)"
                       :class="{
                         'is-active': $brandColor === color.value,
                       }"
+                      @click="changeBrandColor(color.value)"
                     >
                       <p
                         :style="{
@@ -143,11 +143,11 @@
         <!-- 自定义主题颜色 -->
         <t-popup
           placement="bottom-left"
-          showArrow
+          show-arrow
           trigger="click"
-          :destroyOnClose="true"
+          :destroy-on-close="true"
           :attach="handleAttach"
-          :overlayStyle="{ borderRadius: '9px' }"
+          :overlay-style="{ borderRadius: '9px' }"
         >
           <div class="color-content__custom">
             <div class="color-content__custom-inner">
@@ -239,8 +239,8 @@
         <!-- 主题色 -->
         <color-column
           type="brand"
-          :gradientStep="10"
-          :tokenMap="brandTokenMap"
+          :gradient-step="10"
+          :token-map="brandTokenMap"
           @changeGradation="changeGradation"
           @recoverGradation="recoverGradation"
         />
@@ -249,18 +249,18 @@
       <color-collapse
         type="gray"
         :title="lang.color.neutralColor"
-        :mainColor="grayMainColor"
+        :main-color="grayMainColor"
         :disabled="isGrayRelatedToTheme"
         @changeMainColor="changeFunctionColor"
       >
         <template #subTitle>
           {{ lang.color.fromThemeColor }}
-          <t-switch style="margin-left: 8px" v-model="isGrayRelatedToTheme" @change="changeNeutralColor"></t-switch>
+          <t-switch v-model="isGrayRelatedToTheme" style="margin-left: 8px" @change="changeNeutralColor"></t-switch>
         </template>
         <color-column
           type="gray"
-          :gradientStep="14"
-          :tokenMap="functionTokenMap['gray']"
+          :gradient-step="14"
+          :token-map="functionTokenMap['gray']"
           @changeGradation="changeGradation"
           @recoverGradation="recoverGradation"
         />
@@ -269,13 +269,13 @@
       <color-collapse
         type="success"
         :title="lang.color.successColor"
-        :mainColor="successMainColor"
+        :main-color="successMainColor"
         @changeMainColor="changeFunctionColor"
       >
         <color-column
           type="success"
-          :gradientStep="10"
-          :tokenMap="functionTokenMap['success']"
+          :gradient-step="10"
+          :token-map="functionTokenMap['success']"
           @changeGradation="changeGradation"
           @recoverGradation="recoverGradation"
         />
@@ -284,13 +284,13 @@
       <color-collapse
         type="error"
         :title="lang.color.errorColor"
-        :mainColor="errorMainColor"
+        :main-color="errorMainColor"
         @changeMainColor="changeFunctionColor"
       >
         <color-column
           type="error"
-          :gradientStep="10"
-          :tokenMap="functionTokenMap['error']"
+          :gradient-step="10"
+          :token-map="functionTokenMap['error']"
           @changeGradation="changeGradation"
           @recoverGradation="recoverGradation"
         />
@@ -299,13 +299,13 @@
       <color-collapse
         type="warning"
         :title="lang.color.warningColor"
-        :mainColor="warningMainColor"
+        :main-color="warningMainColor"
         @changeMainColor="changeFunctionColor"
       >
         <color-column
           type="warning"
-          :gradientStep="10"
-          :tokenMap="functionTokenMap['warning']"
+          :gradient-step="10"
+          :token-map="functionTokenMap['warning']"
           @changeGradation="changeGradation"
           @recoverGradation="recoverGradation"
         />
@@ -352,10 +352,6 @@ import ColorColumn from './components/ColorColumn';
 
 export default {
   name: 'ColorPanel',
-  props: {
-    top: Number,
-  },
-  mixins: [langMixin],
   components: {
     TRow,
     TCol,
@@ -370,6 +366,13 @@ export default {
     ColorPicker,
     ColorCollapse,
   },
+  mixins: [langMixin],
+  props: {
+    top: {
+      type: Number,
+      default: 0,
+    },
+  },
   data() {
     return {
       DEFAULT_COLORS,
@@ -493,7 +496,7 @@ export default {
       themeStore.updateBrandColor(newBrandColor);
       updateLocalOption(
         'color',
-        newBrandColor.toLowerCase() !== this.$theme.value.toLowerCase() ? this.brandInputColor : null,
+        newBrandColor.toLowerCase() !== this.$theme.value.toLowerCase() ? this.brandInputColor : null
       );
       updateLocalOption('recommend', !this.isRemainMode ? 'true' : null);
 
diff --git a/packages/theme-generator/src/common/components/Collapse/index.vue b/packages/theme-generator/src/common/components/Collapse/index.vue
index 49dd3842..ada7d07a 100644
--- a/packages/theme-generator/src/common/components/Collapse/index.vue
+++ b/packages/theme-generator/src/common/components/Collapse/index.vue
@@ -11,7 +11,7 @@
         </div>
       </div>
       <div @click="isActive = !isActive">
-        <arrow-icon :isActive="isActive" overlayClassName="common-collapse__arrow" />
+        <arrow-icon :is-active="isActive" overlay-class-name="common-collapse__arrow" />
       </div>
     </div>
     <transition
@@ -36,12 +36,21 @@ import { collapseAnimation, handleAttach } from '../../utils';
 
 export default {
   name: 'CommonCollapse',
+  components: { ArrowIcon },
   props: {
-    title: String,
-    colorPalette: Array,
-    type: String,
+    title: {
+      type: String,
+      default: '',
+    },
+    colorPalette: {
+      type: Array,
+      default: () => [],
+    },
+    type: {
+      type: String,
+      default: '',
+    },
   },
-  components: { ArrowIcon },
 
   data() {
     return {
diff --git a/packages/theme-generator/src/common/components/ColorPicker/index.vue b/packages/theme-generator/src/common/components/ColorPicker/index.vue
index 8c2b8c9a..db42152c 100644
--- a/packages/theme-generator/src/common/components/ColorPicker/index.vue
+++ b/packages/theme-generator/src/common/components/ColorPicker/index.vue
@@ -7,8 +7,8 @@
     :swatch-colors="null"
     :show-primary-color-preview="false"
     :select-input-props="{ popupProps: { attach: handleAttach } }"
-    @change="handleChange"
     v-bind="$attrs"
+    @change="handleChange"
   />
 </template>
 
@@ -17,13 +17,16 @@ import { ColorPickerPanel as TColorPickerPanel } from 'tdesign-vue';
 import { handleAttach } from '../../utils';
 
 export default {
-  inheritAttrs: false,
   name: 'ColorPicker',
   components: {
     TColorPickerPanel,
   },
+  inheritAttrs: false,
   props: {
-    value: String,
+    value: {
+      type: String,
+      default: '',
+    },
     format: {
       type: String,
       default: 'HEX',
diff --git a/packages/theme-generator/src/common/components/SegmentSelection/index.vue b/packages/theme-generator/src/common/components/SegmentSelection/index.vue
index 88d583d1..3c38e7bf 100644
--- a/packages/theme-generator/src/common/components/SegmentSelection/index.vue
+++ b/packages/theme-generator/src/common/components/SegmentSelection/index.vue
@@ -19,9 +19,9 @@
           :disabled="disabled"
           :max="maxSliderValue"
           :value="sliderValue"
-          @change="handleSliderChange"
           :label="renderLabel"
-          :tooltipProps="{ attach: handleAttach }"
+          :tooltip-props="{ attach: handleAttach }"
+          @change="handleSliderChange"
         ></t-slider>
       </div>
       <div class="segment-panel__round-tag">
@@ -29,13 +29,13 @@
       </div>
     </div>
     <t-select
+      v-model="step"
       class="segment-panel__select"
       :options="innerSelectOptions"
-      @change="handleSelectChange"
-      :onVisibleChange="handleVisibleChange"
+      :on-visible-change="handleVisibleChange"
       :keys="isEn ? { label: 'enLabel' } : null"
-      v-model="step"
       :popup-props="{ attach: handleAttach }"
+      @change="handleSelectChange"
     ></t-select>
   </div>
 </template>
@@ -64,7 +64,10 @@ export default {
       required: false,
       default: () => {},
     },
-    value: [String, Number],
+    value: {
+      type: [String, Number],
+      default: '',
+    },
     disabled: {
       type: Boolean,
       default: false,
diff --git a/packages/theme-generator/src/common/components/SizeSlider/index.vue b/packages/theme-generator/src/common/components/SizeSlider/index.vue
index e5b380d3..95292164 100644
--- a/packages/theme-generator/src/common/components/SizeSlider/index.vue
+++ b/packages/theme-generator/src/common/components/SizeSlider/index.vue
@@ -7,8 +7,8 @@
         :value="size"
         :format="format"
         theme="column"
-        @change="handleInputChange"
         :style="{ marginBottom: '8px' }"
+        @change="handleInputChange"
       />
       <t-slider
         :disabled="disabled"
@@ -16,10 +16,10 @@
         :min="min"
         :max="max"
         :step="step"
-        @change="handleInputChange"
-        :tooltipProps="{
+        :tooltip-props="{
           attach: handleAttach,
         }"
+        @change="handleInputChange"
       ></t-slider>
     </div>
   </div>
@@ -30,28 +30,49 @@ import { InputNumber as TInputNumber, Slider as TSlider } from 'tdesign-vue';
 
 export default {
   name: 'SizeSlider',
+  components: {
+    TSlider,
+    TInputNumber,
+  },
   props: {
-    sizeValue: [String, Number],
-    title: String,
-    step: Number,
-    min: Number,
-    max: Number,
-    disabled: Boolean,
+    sizeValue: {
+      type: [String, Number],
+      default: 0,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    step: {
+      type: Number,
+      default: 1,
+    },
+    min: {
+      type: Number,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      default: 100,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
     needInteger: {
       type: Boolean,
       default: true,
     },
   },
-  components: {
-    TSlider,
-    TInputNumber,
-  },
   emit: ['changeSize'],
   data() {
     return {
       size: null,
     };
   },
+  mounted() {
+    this.size = this.needInteger ? parseInt(this.sizeValue, 10) : this.sizeValue;
+  },
   methods: {
     format(val) {
       return `${val}px`;
@@ -70,9 +91,6 @@ export default {
       this.$emit('changeSize', v);
     },
   },
-  mounted() {
-    this.size = this.needInteger ? parseInt(this.sizeValue, 10) : this.sizeValue;
-  },
 };
 </script>
 <style lang="less" scoped>
diff --git a/packages/theme-generator/src/common/themes/core.js b/packages/theme-generator/src/common/themes/core.js
index d52b662a..13ccb099 100644
--- a/packages/theme-generator/src/common/themes/core.js
+++ b/packages/theme-generator/src/common/themes/core.js
@@ -28,6 +28,11 @@ export const CUSTOM_TOKEN_ID = `${CUSTOM_THEME_ID}-tokens`;
 export const isMiniProgram = (device) => device === 'mini-program';
 export const isMobile = (device) => device === 'mobile' || isMiniProgram(device);
 
+/**
+ * 标准化设备类型
+ * @param {string} device - 设备类型
+ * @returns {string} 标准化后的设备类型
+ */
 export function normalizeDevice(device) {
   return isMobile(device) ? 'mobile' : 'web';
 }
@@ -44,12 +49,17 @@ export function getDefaultTheme(device) {
   return isMobile(device) ? TDESIGN_MOBILE_THEME : TDESIGN_WEB_THEME;
 }
 
+/**
+ * 获取推荐的主题列表
+ * @param {string} device - 设备类型
+ * @returns {array} 推荐主题列表
+ */
 export function getRecommendThemes(device) {
   return isMobile(device) ? MOBILE_RECOMMEND_THEMES : WEB_RECOMMEND_THEMES;
 }
 
 /**
- * 同步 site 的 亮暗模式给主题生成器 Web Component
+ * 同步 site 的亮暗模式给主题生成器 Web Component
  */
 export function syncModeToGenerator() {
   setUpModeObserver((theme) => {
@@ -59,6 +69,12 @@ export function syncModeToGenerator() {
   });
 }
 
+/**
+ * 通过英文名称查找主题
+ * @param {string} device - 设备类型
+ * @param {string} enName - 主题的英文名称
+ * @returns {object} 找到的主题对象，未找到则返回默认主题
+ */
 export function findThemeByEnName(device, enName) {
   const themes = getRecommendThemes(device);
   for (const category of themes) {
@@ -88,6 +104,10 @@ export function initThemeStyleSheet(themeName, device) {
   return theme;
 }
 
+/**
+ * 导出自定义样式表
+ * @param {string} device - 设备类型
+ */
 export function exportCustomStyleSheet(device) {
   const styleSheet = document.getElementById(CUSTOM_THEME_ID);
   const darkStyleSheet = document.getElementById(CUSTOM_DARK_ID);
@@ -130,6 +150,12 @@ export function exportCustomStyleSheet(device) {
   downloadFile(blob, `theme.${fileSuffix}`);
 }
 
+/**
+ * 修改 CSS 变量值
+ * @param {string} tokenName - CSS 变量名
+ * @param {string} newVal - 新值
+ * @param {boolean} saveToLocal - 是否保存到本地存储
+ */
 export function modifyToken(tokenName, newVal, saveToLocal = true) {
   if (tokenName.startsWith('--td-size-') || tokenName.startsWith('--td-comp-size-')) {
     logSizeIntercept(tokenName);
@@ -164,7 +190,7 @@ export function modifyToken(tokenName, newVal, saveToLocal = true) {
 function logSizeIntercept(tokenName) {
   console.warn(
     `🔒 [Web Components 隔离] 拦截修改尺寸变量 "${tokenName}"，保持原值不变\n` +
-      '   原因：尺寸变量已被隔离以保护 Web Components 的样式',
+      '   原因：尺寸变量已被隔离以保护 Web Components 的样式'
   );
 }
 export function getOptionFromLocal(optionName) {
diff --git a/packages/theme-generator/src/common/themes/store.js b/packages/theme-generator/src/common/themes/store.js
index 630713f7..7a35d597 100644
--- a/packages/theme-generator/src/common/themes/store.js
+++ b/packages/theme-generator/src/common/themes/store.js
@@ -3,15 +3,29 @@ import Vue from 'vue';
 import { DEFAULT_THEME_META, TDESIGN_WEB_THEME } from './built-in';
 import { clearLocalTheme, getDefaultTheme, getOptionFromLocal, initThemeStyleSheet, updateLocalOption } from './core';
 
+/**
+ * 主题状态管理对象
+ * @type {object}
+ */
 export const themeStore = Vue.observable({
   device: 'web',
   theme: TDESIGN_WEB_THEME,
   brandColor: getOptionFromLocal('color') || DEFAULT_THEME_META.value,
   refreshId: 0, // 用于强制刷新绑定了 key 的组件 UI
+
+  /**
+   * 更新设备类型
+   * @param {string} device - 设备类型
+   */
   updateDevice(device) {
     this.device = device;
     this.theme = getInitialTheme(device);
   },
+
+  /**
+   * 更新主题
+   * @param {object} theme - 主题对象
+   */
   updateTheme(theme) {
     this.theme = theme;
     initThemeStyleSheet(theme.enName, this.device);
@@ -20,18 +34,36 @@ export const themeStore = Vue.observable({
     this.updateBrandColor(theme.value);
     this.incrementRefreshId();
   },
+
+  /**
+   * 重置主题为默认值
+   */
   resetTheme() {
     this.updateTheme(getDefaultTheme(this.device));
   },
+
+  /**
+   * 更新品牌色
+   * @param {string} color - 颜色值
+   */
   updateBrandColor(color) {
     this.brandColor = color;
     document.documentElement.style.setProperty('--brand-main', color);
   },
+
+  /**
+   * 增加刷新 ID
+   */
   incrementRefreshId() {
     this.refreshId++;
   },
 });
 
+/**
+ * 获取初始主题
+ * @param {string} device - 设备类型
+ * @returns {object} 主题对象
+ */
 function getInitialTheme(device = 'web') {
   const localThemeName = getOptionFromLocal('theme') || DEFAULT_THEME_META.enName;
   const theme = initThemeStyleSheet(localThemeName, device);
diff --git a/packages/theme-generator/src/common/utils/animation.js b/packages/theme-generator/src/common/utils/animation.js
index 5f1ef12e..840086c2 100644
--- a/packages/theme-generator/src/common/utils/animation.js
+++ b/packages/theme-generator/src/common/utils/animation.js
@@ -7,19 +7,19 @@ export function collapseAnimation() {
     el.dataset.oldPaddingTop = el.style.paddingTop;
     el.dataset.oldPaddingBottom = el.style.paddingBottom;
 
-    el.style.height = "0";
-    el.style.paddingTop = "0";
-    el.style.paddingBottom = "0";
+    el.style.height = '0';
+    el.style.paddingTop = '0';
+    el.style.paddingBottom = '0';
   };
   const enter = (el) => {
     el.dataset.oldOverflow = el.style.overflow;
     el.style.height = `${el.scrollHeight}px`;
     el.style.paddingTop = el.dataset.oldPaddingTop;
     el.style.paddingBottom = el.dataset.oldPaddingBottom;
-    el.style.overflow = "hidden";
+    el.style.overflow = 'hidden';
   };
   const afterEnter = (el) => {
-    el.style.height = "";
+    el.style.height = '';
     el.style.overflow = el.dataset.oldOverflow;
   };
   const beforeLeave = (el) => {
@@ -28,17 +28,17 @@ export function collapseAnimation() {
     el.dataset.oldOverflow = el.style.overflow;
 
     el.style.height = `${el.scrollHeight}px`;
-    el.style.overflow = "hidden";
+    el.style.overflow = 'hidden';
   };
   const leave = (el) => {
     if (el.scrollHeight !== 0) {
-      el.style.height = "0";
-      el.style.paddingTop = "0";
-      el.style.paddingBottom = "0";
+      el.style.height = '0';
+      el.style.paddingTop = '0';
+      el.style.paddingBottom = '0';
     }
   };
   const afterLeave = (el) => {
-    el.style.height = "";
+    el.style.height = '';
     el.style.overflow = el.dataset.oldOverflow;
     el.style.paddingTop = el.dataset.oldPaddingTop;
     el.style.paddingBottom = el.dataset.oldPaddingBottom;
@@ -57,12 +57,10 @@ export function collapseAnimation() {
 // refer to https://dev.to/jordienr/how-to-make-animated-gradients-like-stripe-56nh
 export function colorAnimation() {
   const canvas =
-    document
-      .querySelector("td-theme-generator")
-      ?.shadowRoot?.getElementById("canvas") ||
-    document.getElementById("canvas");
+    document.querySelector('td-theme-generator')?.shadowRoot?.getElementById('canvas') ||
+    document.getElementById('canvas');
   if (!canvas) return;
-  const context = canvas.getContext("2d");
+  const context = canvas.getContext('2d');
   let time = 0;
 
   const color = function (x, y, r, g, b) {
@@ -74,23 +72,12 @@ export function colorAnimation() {
   };
 
   const G = function (x, y, time) {
-    return Math.floor(
-      192 +
-        64 *
-          Math.sin(
-            (x * x * Math.cos(time / 4) + y * y * Math.sin(time / 3)) / 300
-          )
-    );
+    return Math.floor(192 + 64 * Math.sin((x * x * Math.cos(time / 4) + y * y * Math.sin(time / 3)) / 300));
   };
 
   const B = function (x, y, time) {
     return Math.floor(
-      192 +
-        64 *
-          Math.sin(
-            5 * Math.sin(time / 9) +
-              ((x - 100) * (x - 100) + (y - 100) * (y - 100)) / 1100
-          )
+      192 + 64 * Math.sin(5 * Math.sin(time / 9) + ((x - 100) * (x - 100) + (y - 100) * (y - 100)) / 1100)
     );
   };
 
diff --git a/packages/theme-generator/src/float-dock/components/RecommendThemes/index.vue b/packages/theme-generator/src/float-dock/components/RecommendThemes/index.vue
index b425daa4..d8405a9e 100644
--- a/packages/theme-generator/src/float-dock/components/RecommendThemes/index.vue
+++ b/packages/theme-generator/src/float-dock/components/RecommendThemes/index.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- FIXME：这个布局是不合理的...但鉴于 type 目前只有 “官方推荐” 一种，所以暂时如此 -->
   <div class="recommend-theme">
-    <div :key="idx" v-for="(type, idx) in recommendedThemes">
+    <div v-for="(type, idx) in recommendedThemes" :key="idx">
       <div class="recommend-theme__title">
         {{ isEn ? type.enTitle : type.title }}
       </div>
@@ -13,7 +13,7 @@
               'background-color': theme.value,
             }"
           >
-            <div v-html="theme.subtitle"></div>
+            <div>{{ theme.subtitle }}</div>
             <div v-if="theme.enName === $theme.enName" class="recommend-theme__flex-theme--active">
               <picked-svg />
             </div>
@@ -42,7 +42,16 @@ import PickedSvg from './PickedSvg.vue';
 
 export default {
   name: 'RecommendThemes',
+  components: {
+    PickedSvg,
+  },
   mixins: [langMixin],
+  data() {
+    return {
+      isThemeTabVisible: false,
+      isDrawerVisible: false,
+    };
+  },
   computed: {
     recommendedThemes() {
       return getRecommendThemes(themeStore.device);
@@ -51,15 +60,6 @@ export default {
       return themeStore.theme;
     },
   },
-  data() {
-    return {
-      isThemeTabVisible: false,
-      isDrawerVisible: false,
-    };
-  },
-  components: {
-    PickedSvg,
-  },
   methods: {
     handleChangeTheme(theme) {
       themeStore.updateTheme(theme);
diff --git a/packages/theme-generator/src/float-dock/index.vue b/packages/theme-generator/src/float-dock/index.vue
index fc0b56c4..3863c883 100644
--- a/packages/theme-generator/src/float-dock/index.vue
+++ b/packages/theme-generator/src/float-dock/index.vue
@@ -22,13 +22,13 @@
         <div
           ref="btn"
           class="generator-btn"
-          @click="handleClickTheme"
-          @mouseleave="handleLeaveTheme"
           :style="{
             width: generateBtnWidth,
             marginRight: '4px',
             transition: 'width .3s',
           }"
+          @click="handleClickTheme"
+          @mouseleave="handleLeaveTheme"
         >
           <t-button variant="outline" shape="square" size="large">
             <template #icon>
@@ -41,12 +41,12 @@
         </div>
         <div
           class="generator-btn"
-          @click="handleClickCustomize"
           :style="{
             width: !isCustomizeDrawerVisible ? '48px' : '216px',
             margin: '0 4px',
             transition: 'width .3s',
           }"
+          @click="handleClickCustomize"
         >
           <t-button variant="outline" shape="square" size="large">
             <template #icon>
@@ -67,8 +67,8 @@
         <div
           v-if="isCustomizeDrawerVisible || isThemeTabVisible"
           class="export-btn"
-          @click="handleDownload"
           :style="{ width: '48px', margin: '0 4px' }"
+          @click="handleDownload"
         >
           <t-button variant="outline" shape="square" size="large">
             <template #icon>
@@ -129,11 +129,17 @@ export default {
     AdjustSvg,
     SettingSvg,
   },
+  mixins: [langMixin],
   props: {
-    drawerVisible: { type: [Boolean, Number] },
-    showSetting: { type: [Boolean, String] },
+    drawerVisible: {
+      type: [Boolean, Number],
+      default: false,
+    },
+    showSetting: {
+      type: [Boolean, String],
+      default: false,
+    },
   },
-  mixins: [langMixin],
   data() {
     return {
       isThemeTabVisible: false,
diff --git a/packages/theme-generator/src/font-panel/components/FontColorAdjust.vue b/packages/theme-generator/src/font-panel/components/FontColorAdjust.vue
index 8022b1fe..192345e4 100644
--- a/packages/theme-generator/src/font-panel/components/FontColorAdjust.vue
+++ b/packages/theme-generator/src/font-panel/components/FontColorAdjust.vue
@@ -1,6 +1,6 @@
 <template>
   <div :style="{ width: '100%' }">
-    <t-radio-group class="font-color__type-radio" variant="default-filled" v-model="colorType">
+    <t-radio-group v-model="colorType" class="font-color__type-radio" variant="default-filled">
       <t-radio-button :value="1">{{ lang.font.colorDefault }}</t-radio-button>
     </t-radio-group>
 
@@ -23,11 +23,11 @@
       <div v-for="(color, idx) in flattenPalette.filter((v) => !!v.name)" :key="idx">
         <t-popup
           placement="left"
-          showArrow
+          show-arrow
           trigger="click"
-          :destroyOnClose="true"
+          :destroy-on-close="true"
           :attach="handleAttach"
-          :overlayStyle="{ borderRadius: '9px' }"
+          :overlay-style="{ borderRadius: '9px' }"
         >
           <div
             class="block"
@@ -51,7 +51,7 @@
             </transition>
           </div>
           <template #content>
-            <color-picker :value="color.value" @change="(hex) => changeColor(hex, idx)" :enable-alpha="true" />
+            <color-picker :value="color.value" :enable-alpha="true" @change="(hex) => changeColor(hex, idx)" />
           </template>
         </t-popup>
         <div v-if="color.name" class="font-color__vertical-list-content">
@@ -78,14 +78,6 @@ import { handleAttach } from '@/common/utils';
 
 export default {
   name: 'FontColorAdjust',
-  props: {
-    type: String,
-    colorPalette: Array,
-    paletteChange: Boolean,
-    originColorPalette: Array,
-  },
-  emit: ['recoverGradation', 'changeGradation'],
-  mixins: [langMixin],
   components: {
     TPopup,
     TRadioGroup,
@@ -93,6 +85,26 @@ export default {
     ColorPicker,
     Edit1Icon,
   },
+  mixins: [langMixin],
+  props: {
+    type: {
+      type: String,
+      default: '',
+    },
+    colorPalette: {
+      type: Array,
+      default: () => [],
+    },
+    paletteChange: {
+      type: Boolean,
+      default: false,
+    },
+    originColorPalette: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emit: ['recoverGradation', 'changeGradation'],
   data() {
     return {
       activeIdx: 0,
diff --git a/packages/theme-generator/src/font-panel/components/FontColorSvg.vue b/packages/theme-generator/src/font-panel/components/FontColorSvg.vue
index 34f8ede7..ee21fde4 100644
--- a/packages/theme-generator/src/font-panel/components/FontColorSvg.vue
+++ b/packages/theme-generator/src/font-panel/components/FontColorSvg.vue
@@ -4,7 +4,7 @@
     height="48"
     viewBox="0 0 48 48"
     fill="none"
-    :style="{ borderRadius: '6px', border: '1px solid var(--theme-component-border)'}"
+    :style="{ borderRadius: '6px', border: '1px solid var(--theme-component-border)' }"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
diff --git a/packages/theme-generator/src/font-panel/components/FontSizeAdjust.vue b/packages/theme-generator/src/font-panel/components/FontSizeAdjust.vue
index fe858dd4..7c51ba3c 100644
--- a/packages/theme-generator/src/font-panel/components/FontSizeAdjust.vue
+++ b/packages/theme-generator/src/font-panel/components/FontSizeAdjust.vue
@@ -3,20 +3,20 @@
     <!-- 顶部调整 -->
     <SegmentSelection
       v-model="step"
-      :selectOptions="FONT_SIZE_OPTIONS"
-      :suspendedLabels="FONT_SIZE_LABELS"
+      :select-options="FONT_SIZE_OPTIONS"
+      :suspended-labels="FONT_SIZE_LABELS"
       :disabled="segmentSelectionDisabled"
     >
-      <template v-slot:left>
+      <template #left>
         <div class="font-panel__round-tag-left">Aa</div>
       </template>
-      <template v-slot:right>
+      <template #right>
         <div class="font-panel__round-tag-right">Aa</div>
       </template>
     </SegmentSelection>
     <!-- Token List -->
     <div class="font-panel__token-list">
-      <t-radio-group variant="default-filled" v-model="tokenType">
+      <t-radio-group v-model="tokenType" variant="default-filled">
         <t-radio-button value="list">{{ lang.font.steppedMode }}</t-radio-button>
         <t-radio-button value="token">{{ lang.font.tokenMode }}</t-radio-button>
       </t-radio-group>
@@ -25,12 +25,12 @@
           v-for="(token, idx) in ladderTypeList"
           :key="idx"
           placement="left"
-          showArrow
+          show-arrow
           trigger="click"
-          :destroyOnClose="true"
+          :destroy-on-close="true"
           :attach="handleAttach"
+          :overlay-style="{ borderRadius: '9px' }"
           @visible-change="(v, ctx) => handleVisibleChange(v, ctx, idx)"
-          :overlayStyle="{ borderRadius: '9px' }"
         >
           <t-list-item
             :style="{
@@ -54,7 +54,7 @@
           <template #content
             ><size-slider
               title="font-size"
-              :sizeValue="token.value"
+              :size-value="token.value"
               @changeSize="(v) => handleChangeFontSize(v, 'list', token.tokens, idx)"
           /></template>
         </t-popup>
@@ -64,11 +64,11 @@
           v-for="(token, idx) in tokenTypeList"
           :key="idx"
           placement="left"
-          showArrow
+          show-arrow
           trigger="click"
-          :destroyOnClose="true"
+          :destroy-on-close="true"
           :attach="handleAttach"
-          :overlayStyle="{ borderRadius: '9px' }"
+          :overlay-style="{ borderRadius: '9px' }"
           @visible-change="(v, ctx) => handleVisibleChange(v, ctx, idx)"
         >
           <t-list-item
@@ -93,7 +93,7 @@
           <template #content
             ><size-slider
               title="font-size"
-              :sizeValue="token.value"
+              :size-value="token.value"
               @changeSize="(v) => handleChangeFontSize(v, 'token', token.label, idx)"
           /></template>
         </t-popup>
@@ -151,7 +151,7 @@ export default {
 
       if (
         !fontSizeStepArray.find(
-          (array) => array.filter((v, i) => v?.value === list[i]?.value?.trim()).length === array.length,
+          (array) => array.filter((v, i) => v?.value === list[i]?.value?.trim()).length === array.length
         )
       ) {
         this.segmentSelectionDisabled = true;
@@ -188,6 +188,11 @@ export default {
       this.initLadderList = JSON.parse(JSON.stringify(this.ladderTypeList));
     },
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.handleInitFontSize();
+    });
+  },
   methods: {
     getTokenValue,
     handleAttach,
@@ -258,11 +263,6 @@ export default {
       }
     },
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.handleInitFontSize();
-    });
-  },
 };
 </script>
 
diff --git a/packages/theme-generator/src/font-panel/components/LineHeightAdjust.vue b/packages/theme-generator/src/font-panel/components/LineHeightAdjust.vue
index 544cbebb..578bc8e6 100644
--- a/packages/theme-generator/src/font-panel/components/LineHeightAdjust.vue
+++ b/packages/theme-generator/src/font-panel/components/LineHeightAdjust.vue
@@ -5,31 +5,31 @@
       v-if="tokenType === 'plus'"
       v-model="step"
       :style="{ margin: '8px 0' }"
-      :selectOptions="lineHeightOptions"
-      :suspendedLabels="lineHeightLabels"
+      :select-options="lineHeightOptions"
+      :suspended-labels="lineHeightLabels"
       :disabled="segmentSelectionDisabled"
     >
-      <template v-slot:left>
+      <template #left>
         <div class="font-panel__round-tag-left"><p>Aa</p></div>
       </template>
-      <template v-slot:right>
+      <template #right>
         <div class="font-panel__round-tag-right"><p>Aa</p></div>
       </template>
     </SegmentSelection>
     <!-- Token List -->
     <div class="font-panel__token-list">
-      <t-radio-group variant="default-filled" v-model="tokenType">
+      <t-radio-group v-model="tokenType" variant="default-filled">
         <t-radio-button value="plus">{{ lang.font.lineHeightFixedMode }}</t-radio-button>
         <t-radio-button value="time">{{ lang.font.lineHeightSteppedMode }}</t-radio-button>
       </t-radio-group>
       <t-list v-if="tokenType === 'plus'">
         <t-popup
           placement="left"
-          showArrow
+          show-arrow
           trigger="click"
-          :destroyOnClose="true"
+          :destroy-on-close="true"
           :attach="handleAttach"
-          :overlayStyle="{ borderRadius: '9px' }"
+          :overlay-style="{ borderRadius: '9px' }"
           @visible-change="handleVisibleChange"
         >
           <t-list-item
@@ -48,7 +48,7 @@
               :min="1"
               :max="99"
               :step="1"
-              :sizeValue="lineHeightValue"
+              :size-value="lineHeightValue"
               @changeSize="handleChangeFontSize"
           /></template>
         </t-popup>
@@ -56,11 +56,11 @@
       <t-list v-else>
         <t-popup
           placement="left"
-          showArrow
+          show-arrow
           trigger="click"
-          :destroyOnClose="true"
+          :destroy-on-close="true"
           :attach="handleAttach"
-          :overlayStyle="{ borderRadius: '9px' }"
+          :overlay-style="{ borderRadius: '9px' }"
           @visible-change="handleVisibleChange"
         >
           <t-list-item
@@ -75,11 +75,11 @@
           <template #content
             ><size-slider
               title="line-height"
-              :sizeValue="lineHeightValue"
+              :size-value="lineHeightValue"
               :min="1"
               :max="5"
               :step="0.5"
-              :needInteger="false"
+              :need-integer="false"
               @changeSize="handleChangeFontSize"
           /></template>
         </t-popup>
@@ -153,6 +153,11 @@ export default {
       updateLineHeightTokens(this.lineHeightValue, type);
     },
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.initStep();
+    });
+  },
   methods: {
     getTokenValue,
     handleAttach,
@@ -189,11 +194,6 @@ export default {
       }
     },
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.initStep();
-    });
-  },
 };
 </script>
 
diff --git a/packages/theme-generator/src/font-panel/index.vue b/packages/theme-generator/src/font-panel/index.vue
index 458e525b..096ca2c5 100644
--- a/packages/theme-generator/src/font-panel/index.vue
+++ b/packages/theme-generator/src/font-panel/index.vue
@@ -55,8 +55,8 @@
         <template #title>{{ lang.font.fontColor }}</template>
         <template #content>
           <font-color-adjust
-            :colorPalette="textColorPalette"
-            :originColorPalette="initTextColorPalette"
+            :color-palette="textColorPalette"
+            :origin-color-palette="initTextColorPalette"
             @changeGradation="changeGradation"
           />
         </template>
@@ -81,9 +81,6 @@ import LineHeightSvg from './components/LineHeightSvg.vue';
 
 export default {
   name: 'FontPanel',
-  props: {
-    top: Number,
-  },
   components: {
     CommonCollapse,
     FontColorAdjust,
@@ -93,6 +90,12 @@ export default {
     LineHeightSvg,
   },
   mixins: [langMixin],
+  props: {
+    top: {
+      type: Number,
+      default: 0,
+    },
+  },
   data() {
     return {
       textColorPalette: [''],
@@ -114,6 +117,15 @@ export default {
       };
     },
   },
+  mounted() {
+    // 确保 custom-theme 被 append 后再同步
+    this.$nextTick(() => {
+      this.setFontPalette();
+    });
+    this.$root.$on('refresh-color-tokens', () => {
+      this.setFontPalette();
+    });
+  },
   methods: {
     isMobile,
     changeGradation(hex, idx) {
@@ -139,15 +151,6 @@ export default {
       this.initTextColorPalette = JSON.parse(JSON.stringify(textColorPalette));
     },
   },
-  mounted() {
-    // 确保 custom-theme 被 append 后再同步
-    this.$nextTick(() => {
-      this.setFontPalette();
-    });
-    this.$root.$on('refresh-color-tokens', () => {
-      this.setFontPalette();
-    });
-  },
 };
 </script>
 
diff --git a/packages/theme-generator/src/main.js b/packages/theme-generator/src/main.js
index 2c7465e2..5bd2d6b3 100644
--- a/packages/theme-generator/src/main.js
+++ b/packages/theme-generator/src/main.js
@@ -1,9 +1,9 @@
-import Vue from "vue";
+import Vue from 'vue';
 
-import Generator from "./Generator.vue";
+import Generator from './Generator.vue';
 
 Vue.config.productionTip = false;
 
 new Vue({
   render: (h) => h(Generator),
-}).$mount("#app");
+}).$mount('#app');
diff --git a/packages/theme-generator/src/panel-drawer/components/StickyThemeDisplay/index.vue b/packages/theme-generator/src/panel-drawer/components/StickyThemeDisplay/index.vue
index 7003e361..36245fbc 100644
--- a/packages/theme-generator/src/panel-drawer/components/StickyThemeDisplay/index.vue
+++ b/packages/theme-generator/src/panel-drawer/components/StickyThemeDisplay/index.vue
@@ -16,13 +16,17 @@ import { getTokenValue } from '@/common/utils';
 
 export default {
   name: 'StickyThemeDisplay',
+  mixins: [langMixin],
   props: {
-    top: Number,
+    top: {
+      type: Number,
+      default: 0,
+    },
     theme: {
       type: Object,
+      default: () => ({}),
     },
   },
-  mixins: [langMixin],
   data() {
     return {
       isAnimating: false,
@@ -44,6 +48,11 @@ export default {
     this.brandColor = getTokenValue('--brand-main');
     this.setupStyleObserver();
   },
+  beforeDestroy() {
+    if (this.styleObserver) {
+      this.styleObserver.disconnect();
+    }
+  },
   methods: {
     setupStyleObserver() {
       this.styleObserver = new MutationObserver(this.checkBrandColorChange);
@@ -64,11 +73,6 @@ export default {
       }
     },
   },
-  beforeDestroy() {
-    if (this.styleObserver) {
-      this.styleObserver.disconnect();
-    }
-  },
 };
 </script>
 
diff --git a/packages/theme-generator/src/panel-drawer/components/SwitchTabs/index.vue b/packages/theme-generator/src/panel-drawer/components/SwitchTabs/index.vue
index 0138fa2b..0d782e7f 100644
--- a/packages/theme-generator/src/panel-drawer/components/SwitchTabs/index.vue
+++ b/packages/theme-generator/src/panel-drawer/components/SwitchTabs/index.vue
@@ -34,8 +34,18 @@ import SizeSvg from './SizeSvg.vue';
 
 export default {
   name: 'SwitchTabs',
+  components: { ColorSvg, FontSvg, RadiusSvg, BoxshadowSvg, SizeSvg },
+  mixins: [langMixin],
   props: {
-    activeTabIdx: Number,
+    activeTabIdx: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      tabs: [],
+    };
   },
   computed: {
     $device() {
@@ -46,19 +56,7 @@ export default {
       return isMobile(this.$device) ? this.tabs.filter((tab) => tab.title !== this.lang.size.title) : this.tabs;
     },
   },
-  components: { ColorSvg, FontSvg, RadiusSvg, BoxshadowSvg, SizeSvg },
   emit: ['changeActiveTab'],
-  mixins: [langMixin],
-  data() {
-    return {
-      tabs: [],
-    };
-  },
-  methods: {
-    handleClickPanel(idx) {
-      this.$emit('changeActiveTab', idx);
-    },
-  },
   mounted() {
     const text = this.lang;
     this.tabs = [
@@ -84,6 +82,11 @@ export default {
       },
     ];
   },
+  methods: {
+    handleClickPanel(idx) {
+      this.$emit('changeActiveTab', idx);
+    },
+  },
 };
 </script>
 
diff --git a/packages/theme-generator/src/panel-drawer/index.vue b/packages/theme-generator/src/panel-drawer/index.vue
index 89abc0fd..f4f5c27a 100644
--- a/packages/theme-generator/src/panel-drawer/index.vue
+++ b/packages/theme-generator/src/panel-drawer/index.vue
@@ -3,19 +3,19 @@
     size="348px"
     :visible.sync="visible"
     :header="false"
-    :closeBtn="false"
-    :preventScrollThrough="false"
+    :close-btn="false"
+    :prevent-scroll-through="false"
     :footer="false"
-    showInAttachedElement
+    show-in-attached-element
   >
     <sticky-theme-display />
     <div style="display: flex">
-      <switch-tabs :activeTabIdx="activeTabIdx" @changeActiveTab="changeActiveTab" />
-      <color-panel :key="`${$refreshId}-color`" v-show="activeTabIdx === ACTIVE_TAB_MAP.color" />
-      <font-panel :key="`${$refreshId}-font`" v-show="activeTabIdx === ACTIVE_TAB_MAP.font" />
-      <radius-panel :key="`${$refreshId}-radius`" v-show="activeTabIdx === ACTIVE_TAB_MAP.radius" />
-      <shadow-panel :key="`${$refreshId}-shadow`" v-show="activeTabIdx === ACTIVE_TAB_MAP.shadow" />
-      <size-panel :key="`${$refreshId}-size`" v-show="activeTabIdx === ACTIVE_TAB_MAP.size" />
+      <switch-tabs :active-tab-idx="activeTabIdx" @changeActiveTab="changeActiveTab" />
+      <color-panel v-show="activeTabIdx === ACTIVE_TAB_MAP.color" :key="`${$refreshId}-color`" />
+      <font-panel v-show="activeTabIdx === ACTIVE_TAB_MAP.font" :key="`${$refreshId}-font`" />
+      <radius-panel v-show="activeTabIdx === ACTIVE_TAB_MAP.radius" :key="`${$refreshId}-radius`" />
+      <shadow-panel v-show="activeTabIdx === ACTIVE_TAB_MAP.shadow" :key="`${$refreshId}-shadow`" />
+      <size-panel v-show="activeTabIdx === ACTIVE_TAB_MAP.size" :key="`${$refreshId}-size`" />
     </div>
   </t-drawer>
 </template>
@@ -58,12 +58,15 @@ export default {
   props: {
     showSetting: {
       type: [String, Boolean],
+      default: false,
     },
     theme: {
       type: [Object, String],
+      default: () => ({}),
     },
     drawerVisible: {
       type: [String, Number, Boolean],
+      default: false,
     },
   },
   data() {
diff --git a/packages/theme-generator/src/radius-panel/index.vue b/packages/theme-generator/src/radius-panel/index.vue
index 60d82998..5ba23a3d 100644
--- a/packages/theme-generator/src/radius-panel/index.vue
+++ b/packages/theme-generator/src/radius-panel/index.vue
@@ -12,14 +12,14 @@
         <p class="radius-content__title">{{ lang.borerRadius.radiusSize }}</p>
         <SegmentSelection
           v-model="step"
-          :selectOptions="RADIUS_OPTIONS"
-          :suspendedLabels="RADIUS_LABELS"
+          :select-options="RADIUS_OPTIONS"
+          :suspended-labels="RADIUS_LABELS"
           :disabled="segmentSelectionDisabled"
         >
-          <template v-slot:left>
+          <template #left>
             <div class="radius-content__round-tag-left" :class="{ disabled: segmentSelectionDisabled }"></div>
           </template>
-          <template v-slot:right>
+          <template #right>
             <div class="radius-content__round-tag-right" :class="{ disabled: segmentSelectionDisabled }"></div>
           </template>
         </SegmentSelection>
@@ -29,12 +29,12 @@
               v-for="(token, idx) in radiusTypeList"
               :key="idx"
               placement="left"
-              showArrow
+              show-arrow
               trigger="click"
-              :destroyOnClose="true"
+              :destroy-on-close="true"
               :attach="handleAttach"
+              :overlay-style="{ borderRadius: '9px' }"
               @visible-change="(v, ctx) => handleVisibleChange(v, ctx, idx)"
-              :overlayStyle="{ borderRadius: '9px' }"
             >
               <t-list-item
                 :style="{
@@ -66,7 +66,7 @@
               <template #content
                 ><size-slider
                   title="border-radius"
-                  :sizeValue="token.value"
+                  :size-value="token.value"
                   :disabled="token.token === '--td-radius-circle'"
                   @changeSize="(v) => handleChangeRadius(v, idx)"
               /></template>
@@ -98,10 +98,10 @@ export default {
     SizeSlider,
     SegmentSelection,
   },
+  mixins: [langMixin],
   props: {
     isRefresh: Boolean,
   },
-  mixins: [langMixin],
   data() {
     return {
       RADIUS_OPTIONS,
@@ -155,6 +155,12 @@ export default {
       });
     },
   },
+  mounted() {
+    this.$nextTick(() => {
+      // 下一个 tick 再更新避免与 init 的 step 冲突
+      this.initRadiusToken();
+    });
+  },
   methods: {
     handleAttach,
     handleVisibleChange(v, ctx, idx) {
@@ -193,12 +199,6 @@ export default {
         .filter((v) => v.value !== null);
     },
   },
-  mounted() {
-    this.$nextTick(() => {
-      // 下一个 tick 再更新避免与 init 的 step 冲突
-      this.initRadiusToken();
-    });
-  },
 };
 </script>
 
diff --git a/packages/theme-generator/src/shadow-panel/components/ShadowCard.vue b/packages/theme-generator/src/shadow-panel/components/ShadowCard.vue
index 3b735b1d..30cd00e1 100644
--- a/packages/theme-generator/src/shadow-panel/components/ShadowCard.vue
+++ b/packages/theme-generator/src/shadow-panel/components/ShadowCard.vue
@@ -2,10 +2,10 @@
   <div class="shadow-card">
     <t-popup
       placement="left"
-      showArrow
-      destroyOnClose
+      show-arrow
+      destroy-on-close
       :attach="handleAttach"
-      :overlayStyle="{ borderRadius: '9px', padding: '12px 16px 8px' }"
+      :overlay-style="{ borderRadius: '9px', padding: '12px 16px 8px' }"
     >
       <div class="shadow-card__item" :style="{ 'box-shadow': shadow.join(',') }">
         <div class="shadow-card__title">{{ detail.label }}:</div>
@@ -14,7 +14,7 @@
         </div>
         <t-divider class="shadow-card__divided"></t-divider>
         <div class="shadow-card__info">
-          <div :class="['shadow-card__info-item', 'text-ellipsis']" v-for="(value, i) in shadow" :key="i">
+          <div v-for="(value, i) in shadow" :key="i" :class="['shadow-card__info-item', 'text-ellipsis']">
             {{ value }} {{ i === shadow.length - 1 ? ';' : ',' }}
           </div>
         </div>
@@ -36,17 +36,26 @@ import ShadowLayer from './ShadowLayer.vue';
 
 export default {
   name: 'ShadowCard',
-  props: {
-    shadow: Array,
-    detail: Object,
-    index: Number,
-  },
-  mixins: [langMixin],
   components: {
     TPopup,
     TDivider,
     ShadowLayer,
   },
+  mixins: [langMixin],
+  props: {
+    shadow: {
+      type: Array,
+      default: () => [],
+    },
+    detail: {
+      type: Object,
+      default: () => ({}),
+    },
+    index: {
+      type: Number,
+      default: 0,
+    },
+  },
   methods: {
     handleAttach,
     change(value) {
diff --git a/packages/theme-generator/src/shadow-panel/components/ShadowEditor.vue b/packages/theme-generator/src/shadow-panel/components/ShadowEditor.vue
index d0611147..45da06e4 100644
--- a/packages/theme-generator/src/shadow-panel/components/ShadowEditor.vue
+++ b/packages/theme-generator/src/shadow-panel/components/ShadowEditor.vue
@@ -5,25 +5,25 @@
       <remove-icon class="shadow-layer__remove" @click="handleMove" />
     </div>
     <div class="shadow-layer__card--item">
-      <t-input-number theme="normal" autoWidth v-model="shadow[0]" class="shadow-layer__card--x" placeholder="0px">
+      <t-input-number v-model="shadow[0]" theme="normal" auto-width class="shadow-layer__card--x" placeholder="0px">
         <template #suffix><div class="shadow-layer__suffix">X</div></template>
       </t-input-number>
-      <t-input-number theme="normal" autoWidth v-model="shadow[1]" class="shadow-layer__card--x" placeholder="0px">
+      <t-input-number v-model="shadow[1]" theme="normal" auto-width class="shadow-layer__card--x" placeholder="0px">
         <template #suffix><div class="shadow-layer__suffix">Y</div></template>
       </t-input-number>
     </div>
-    <t-input-number autoWidth theme="normal" v-model="shadow[2]" class="shadow-layer__card--item" placeholder="0px">
+    <t-input-number v-model="shadow[2]" auto-width theme="normal" class="shadow-layer__card--item" placeholder="0px">
       <template #suffix><div class="shadow-layer__suffix">Blur</div></template>
     </t-input-number>
-    <t-input-number autoWidth theme="normal" v-model="shadow[3]" class="shadow-layer__card--item" placeholder="0px">
+    <t-input-number v-model="shadow[3]" auto-width theme="normal" class="shadow-layer__card--item" placeholder="0px">
       <template #suffix><span class="shadow-layer__suffix">Spread</span></template>
     </t-input-number>
-    <t-popup class="placement top center" placement="left" showArrow destroyOnClose :attach="handleAttach">
+    <t-popup class="placement top center" placement="left" show-arrow destroy-on-close :attach="handleAttach">
       <t-input v-model="color">
-        <div class="shadow-layer__card--sharp" :style="{ background: color }" slot="prefix-icon"></div>
+        <div slot="prefix-icon" class="shadow-layer__card--sharp" :style="{ background: color }"></div>
       </t-input>
       <template #content>
-        <color-picker :value="color" enableAlpha format="RGBA" @change="changeColor" />
+        <color-picker :value="color" enable-alpha format="RGBA" @change="changeColor" />
       </template>
     </t-popup>
   </div>
@@ -38,10 +38,6 @@ import { handleAttach } from '@/common/utils';
 
 export default {
   name: 'ShadowEditor',
-  props: {
-    name: String,
-    value: String,
-  },
   components: {
     TInputNumber,
     TInput,
@@ -49,6 +45,16 @@ export default {
     RemoveIcon,
     ColorPicker,
   },
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+  },
   data() {
     return {
       shadow: [0, 0, 0, 0],
@@ -56,10 +62,6 @@ export default {
       hasInit: false,
     };
   },
-  created() {
-    this.shadow = this.splitShadowValue(this.value);
-    this.color = this.getShadowColor(this.value);
-  },
   watch: {
     shadow(nVal) {
       // 初始化值 不触发 change事件
@@ -80,6 +82,10 @@ export default {
       this.$emit('change', `${shadow} ${nVal}`);
     },
   },
+  created() {
+    this.shadow = this.splitShadowValue(this.value);
+    this.color = this.getShadowColor(this.value);
+  },
   methods: {
     handleAttach,
     splitShadowValue(value) {
diff --git a/packages/theme-generator/src/shadow-panel/components/ShadowLayer.vue b/packages/theme-generator/src/shadow-panel/components/ShadowLayer.vue
index 2413d434..de71519c 100644
--- a/packages/theme-generator/src/shadow-panel/components/ShadowLayer.vue
+++ b/packages/theme-generator/src/shadow-panel/components/ShadowLayer.vue
@@ -5,9 +5,9 @@
       <add-icon class="shadow-layer__add" @click="handleAdd" />
     </div>
     <shadow-editor
-      class="shadow-layer__edit"
       v-for="(data, i) in shadow"
       :key="i"
+      class="shadow-layer__edit"
       :name="`layer${i + 1}`"
       :value="data"
       @change="(value) => change(value, i)"
@@ -17,33 +17,39 @@
   </div>
 </template>
 <script lang="jsx">
-import { AddIcon } from "tdesign-icons-vue";
-import ShadowEditor from "./ShadowEditor.vue";
+import { AddIcon } from 'tdesign-icons-vue';
+import ShadowEditor from './ShadowEditor.vue';
 export default {
-  name: "ShadowLayer",
-  props: {
-    shadow: Array,
-    detail: Object,
-  },
+  name: 'ShadowLayer',
   components: {
     AddIcon,
     ShadowEditor,
   },
+  props: {
+    shadow: {
+      type: Array,
+      default: () => [],
+    },
+    detail: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
   methods: {
     change(value, index) {
       const val = [...this.shadow];
       val[index] = value;
-      this.$emit("change", val);
+      this.$emit('change', val);
     },
     handleAdd() {
       const val = [...this.shadow];
-      val.push("0, 0, 0, 0, rgba(0, 0, 0, 0)");
-      this.$emit("change", val);
+      val.push('0, 0, 0, 0, rgba(0, 0, 0, 0)');
+      this.$emit('change', val);
     },
     handleMove(index) {
       const val = [...this.shadow];
       val.splice(index, 1);
-      this.$emit("change", val);
+      this.$emit('change', val);
     },
   },
 };
@@ -75,8 +81,7 @@ export default {
     &--name {
       font-size: 14px;
       color: var(--text-primary);
-      font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
-        "Liberation Mono", monospace;
+      font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
     }
   }
   &__add {
@@ -125,8 +130,7 @@ export default {
   &__name {
     font-size: 12px;
     color: var(--text-primary);
-    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
-      "Liberation Mono", monospace;
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
   }
   &__suffix {
     font-size: 14px;
diff --git a/packages/theme-generator/src/shadow-panel/index.vue b/packages/theme-generator/src/shadow-panel/index.vue
index cff3a510..d448da54 100644
--- a/packages/theme-generator/src/shadow-panel/index.vue
+++ b/packages/theme-generator/src/shadow-panel/index.vue
@@ -12,8 +12,8 @@
         <p class="shadow-content__title">{{ lang.shadow.title }}</p>
         <SegmentSelection
           v-model="step"
-          :selectOptions="selectOptions"
-          :suspendedLabels="suspendedLabels"
+          :select-options="selectOptions"
+          :suspended-labels="suspendedLabels"
           :disabled="segmentSelectionDisabled"
         >
           <template #left>
@@ -54,14 +54,17 @@ import ShadowCard from './components/ShadowCard';
 
 export default {
   name: 'ShadowPanel',
-  props: {
-    top: Number,
-  },
   components: {
     SegmentSelection,
     ShadowCard,
   },
   mixins: [langMixin],
+  props: {
+    top: {
+      type: Number,
+      default: 0,
+    },
+  },
   data() {
     return {
       shadowPalette: [],
@@ -71,9 +74,6 @@ export default {
       segmentSelectionDisabled: false,
     };
   },
-  created() {
-    this.shadowTypeDetail = ShadowTypeDetail;
-  },
   computed: {
     contentStyle() {
       const clientHeight = window.innerHeight;
@@ -124,6 +124,14 @@ export default {
       });
     },
   },
+  created() {
+    this.shadowTypeDetail = ShadowTypeDetail;
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initShadowToken();
+    });
+  },
   methods: {
     // 拆分 box-shadow 的值 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%)
     splitShadowValue(data) {
@@ -160,11 +168,6 @@ export default {
       });
     },
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.initShadowToken();
-    });
-  },
 };
 </script>
 
diff --git a/packages/theme-generator/src/size-panel/components/SizeAdjust.vue b/packages/theme-generator/src/size-panel/components/SizeAdjust.vue
index a9b5d19c..45c47d50 100644
--- a/packages/theme-generator/src/size-panel/components/SizeAdjust.vue
+++ b/packages/theme-generator/src/size-panel/components/SizeAdjust.vue
@@ -7,12 +7,12 @@
           v-for="(token, idx) in tokenList"
           :key="idx"
           placement="left"
-          showArrow
+          show-arrow
           trigger="click"
-          :destroyOnClose="true"
+          :destroy-on-close="true"
           :attach="handleAttach"
+          :overlay-style="{ borderRadius: '9px' }"
           @visible-change="(v, ctx) => handleVisibleChange(v, ctx, idx)"
-          :overlayStyle="{ borderRadius: '9px' }"
         >
           <t-list-item
             :style="{
@@ -51,7 +51,7 @@
           <template #content
             ><size-slider
               title="size"
-              :sizeValue="getTokenValue(`--td-${token.from}`)"
+              :size-value="getTokenValue(`--td-${token.from}`)"
               @changeSize="(v) => handleChangeSize(`--td-${token.from}`, v)"
           /></template>
         </t-popup>
@@ -86,8 +86,14 @@ export default {
     PopupPaddingAdjustSvg,
   },
   props: {
-    tokenList: Array,
-    type: String,
+    tokenList: {
+      type: Array,
+      default: () => [],
+    },
+    type: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
diff --git a/packages/theme-generator/src/size-panel/components/SizeDisplay.vue b/packages/theme-generator/src/size-panel/components/SizeDisplay.vue
index 57697142..a54c9fd0 100644
--- a/packages/theme-generator/src/size-panel/components/SizeDisplay.vue
+++ b/packages/theme-generator/src/size-panel/components/SizeDisplay.vue
@@ -31,6 +31,15 @@ export default {
       SIZE_TOKENS,
     };
   },
+  mounted() {
+    this.$nextTick(() => {
+      // 初始化 local 的 token 后更新 size 显示
+      this.$forceUpdate();
+    });
+    this.$root.$on('refresh-size-tokens', () => {
+      this.$forceUpdate();
+    });
+  },
   methods: {
     getTokenValue,
     parseSize(val) {
@@ -41,15 +50,6 @@ export default {
       return val;
     },
   },
-  mounted() {
-    this.$nextTick(() => {
-      // 初始化 local 的 token 后更新 size 显示
-      this.$forceUpdate();
-    });
-    this.$root.$on('refresh-size-tokens', () => {
-      this.$forceUpdate();
-    });
-  },
 };
 </script>
 <style lang="less" scoped>
diff --git a/packages/theme-generator/src/size-panel/index.vue b/packages/theme-generator/src/size-panel/index.vue
index de4c1e2a..20a44e3d 100644
--- a/packages/theme-generator/src/size-panel/index.vue
+++ b/packages/theme-generator/src/size-panel/index.vue
@@ -46,7 +46,7 @@
         <template #title>{{ lang.size.componentSize }}</template>
         <template #subTitle>size</template>
         <template #content>
-          <size-adjust :key="refreshIdMap['comp-size']" :tokenList="COMP_SIZE_MAP" type="comp-size" />
+          <size-adjust :key="refreshIdMap['comp-size']" :token-list="COMP_SIZE_MAP" type="comp-size" />
         </template>
       </common-collapse>
       <!-- 组件上下边距 -->
@@ -71,7 +71,11 @@
         <template #title>{{ lang.size.yPadding }}</template>
         <template #subTitle>padding top & bottom</template>
         <template #content>
-          <size-adjust :key="refreshIdMap['comp-padding-tb']" :tokenList="COMP_PADDING_TB_MAP" type="comp-padding-tb" />
+          <size-adjust
+            :key="refreshIdMap['comp-padding-tb']"
+            :token-list="COMP_PADDING_TB_MAP"
+            type="comp-padding-tb"
+          />
         </template>
       </common-collapse>
       <!-- 组件左右边距 -->
@@ -96,7 +100,11 @@
         <template #title>{{ lang.size.xPadding }}</template>
         <template #subTitle>padding left & right</template>
         <template #content>
-          <size-adjust :key="refreshIdMap['comp-padding-lr']" :tokenList="COMP_PADDING_LR_MAP" type="comp-padding-lr" />
+          <size-adjust
+            :key="refreshIdMap['comp-padding-lr']"
+            :token-list="COMP_PADDING_LR_MAP"
+            type="comp-padding-lr"
+          />
         </template>
       </common-collapse>
       <!-- popup 边距 -->
@@ -121,7 +129,7 @@
         <template #title>{{ lang.size.popupPadding }}</template>
         <template #subTitle>popup padding</template>
         <template #content>
-          <size-adjust :key="refreshIdMap['popup-padding']" :tokenList="COMP_POPUP_PADDING_MAP" type="popup-padding" />
+          <size-adjust :key="refreshIdMap['popup-padding']" :token-list="COMP_POPUP_PADDING_MAP" type="popup-padding" />
         </template>
       </common-collapse>
       <!-- margin 边距 -->
@@ -146,7 +154,7 @@
         <template #title>{{ lang.size.margin }}</template>
         <template #subTitle>margin</template>
         <template #content>
-          <size-adjust :key="refreshIdMap['comp-margin']" :tokenList="COMP_MARGIN_MAP" type="comp-margin" />
+          <size-adjust :key="refreshIdMap['comp-margin']" :token-list="COMP_MARGIN_MAP" type="comp-margin" />
         </template>
       </common-collapse>
     </div>
@@ -181,9 +189,6 @@ import {
 
 export default {
   name: 'SizePanel',
-  props: {
-    top: Number,
-  },
   components: {
     CommonCollapse,
     SizeDisplay,
@@ -198,6 +203,12 @@ export default {
     MarginSvg,
   },
   mixins: [langMixin],
+  props: {
+    top: {
+      type: Number,
+      default: 0,
+    },
+  },
   data() {
     return {
       COMP_SIZE_MAP,
@@ -223,6 +234,15 @@ export default {
       };
     },
   },
+  mounted() {
+    this.$root.$on('refresh-size-tokens', (type) => {
+      Object.keys(this.refreshIdMap).forEach((key) => {
+        if (key !== type) {
+          this.refreshIdMap[key]++;
+        }
+      });
+    });
+  },
   methods: {
     handleAttach,
     resetSizeToDefault() {
@@ -237,15 +257,6 @@ export default {
       this.$root.$emit('refresh-size-tokens', 'all');
     },
   },
-  mounted() {
-    this.$root.$on('refresh-size-tokens', (type) => {
-      Object.keys(this.refreshIdMap).forEach((key) => {
-        if (key !== type) {
-          this.refreshIdMap[key]++;
-        }
-      });
-    });
-  },
 };
 </script>
 
diff --git a/packages/theme-generator/src/size-panel/svg/HorizontalPaddingAdjustSvg.vue b/packages/theme-generator/src/size-panel/svg/HorizontalPaddingAdjustSvg.vue
index fff59c1c..99b57e28 100644
--- a/packages/theme-generator/src/size-panel/svg/HorizontalPaddingAdjustSvg.vue
+++ b/packages/theme-generator/src/size-panel/svg/HorizontalPaddingAdjustSvg.vue
@@ -1,15 +1,7 @@
 <template>
-  <svg
-    :width="viewWidth"
-    height="12"
-    :viewBox="`0 0 ${viewWidth} 12`"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg :width="viewWidth" height="12" :viewBox="`0 0 ${viewWidth} 12`" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
-      :d="`M0 3C0 1.34315 1.34315 0 3 0H${
-        4 + width
-      }V12H3C1.34315 12 0 10.6569 0 9V3Z`"
+      :d="`M0 3C0 1.34315 1.34315 0 3 0H${4 + width}V12H3C1.34315 12 0 10.6569 0 9V3Z`"
       fill="#D54941"
       fill-opacity="0.16"
     />
@@ -19,9 +11,9 @@
     <path
       :d="`M${8 + width} 0H${viewWidth - 3}C${
         viewWidth - 2
-      }.6569 0 ${viewWidth} 1.34315 ${viewWidth} 3V9C${viewWidth} 10.6569 ${
-        viewWidth - 2
-      }.6569 12 ${viewWidth - 3} 12H${8 + width}V0Z`"
+      }.6569 0 ${viewWidth} 1.34315 ${viewWidth} 3V9C${viewWidth} 10.6569 ${viewWidth - 2}.6569 12 ${
+        viewWidth - 3
+      } 12H${8 + width}V0Z`"
       fill="#D54941"
       fill-opacity="0.16"
     />
diff --git a/packages/theme-generator/src/size-panel/svg/HorizontalPaddingSvg.vue b/packages/theme-generator/src/size-panel/svg/HorizontalPaddingSvg.vue
index 01e6357b..00f94ade 100644
--- a/packages/theme-generator/src/size-panel/svg/HorizontalPaddingSvg.vue
+++ b/packages/theme-generator/src/size-panel/svg/HorizontalPaddingSvg.vue
@@ -1,55 +1,40 @@
 <template>
-    <svg
-      width="48"
-      height="48"
-      viewBox="0 0 48 48"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clip-path="url(#clip0_26565_99804)">
-        <rect width="48" height="48" rx="6" fill="#D54941" fill-opacity="0.1" />
-        <rect width="17" height="48" fill="#D54941" fill-opacity="0.16" />
-        <rect x="31" width="17" height="48" fill="#D54941" fill-opacity="0.16" />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M1 20H3V23H15V20H17V23V25V28H15V25H3V28H1V25V23V20Z"
-          fill="#D54941"
-          fill-opacity="0.5"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M45 20H47V23V25V28H45V25H33V28H31V25V23V20H33V23H45V20Z"
-          fill="#D54941"
-          fill-opacity="0.5"
-        />
-      </g>
-      <rect
-        x="0.5"
-        y="0.5"
-        width="47"
-        height="47"
-        rx="5.5"
-        stroke="black"
-        stroke-opacity="0.06"
+  <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_26565_99804)">
+      <rect width="48" height="48" rx="6" fill="#D54941" fill-opacity="0.1" />
+      <rect width="17" height="48" fill="#D54941" fill-opacity="0.16" />
+      <rect x="31" width="17" height="48" fill="#D54941" fill-opacity="0.16" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M1 20H3V23H15V20H17V23V25V28H15V25H3V28H1V25V23V20Z"
+        fill="#D54941"
+        fill-opacity="0.5"
       />
-      <defs>
-        <clipPath id="clip0_26565_99804">
-          <rect width="48" height="48" rx="6" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  </template>
-  
-  <script>
-  export default {
-    props: {
-      size: {
-        type: Number,
-        default: 2,
-      },
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M45 20H47V23V25V28H45V25H33V28H31V25V23V20H33V23H45V20Z"
+        fill="#D54941"
+        fill-opacity="0.5"
+      />
+    </g>
+    <rect x="0.5" y="0.5" width="47" height="47" rx="5.5" stroke="black" stroke-opacity="0.06" />
+    <defs>
+      <clipPath id="clip0_26565_99804">
+        <rect width="48" height="48" rx="6" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      type: Number,
+      default: 2,
     },
-  };
-  </script>
-  
\ No newline at end of file
+  },
+};
+</script>
diff --git a/packages/theme-generator/src/size-panel/svg/MarginAdjustSvg.vue b/packages/theme-generator/src/size-panel/svg/MarginAdjustSvg.vue
index 19852be8..80f8a6d6 100644
--- a/packages/theme-generator/src/size-panel/svg/MarginAdjustSvg.vue
+++ b/packages/theme-generator/src/size-panel/svg/MarginAdjustSvg.vue
@@ -1,23 +1,10 @@
 <template>
-  <svg
-    width="16"
-    :height="viewHeight"
-    :viewBox="`0 0 16 ${viewHeight}`"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="16" :height="viewHeight" :viewBox="`0 0 16 ${viewHeight}`" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect width="16" height="8" rx="3" fill="#D54941" fill-opacity="0.2" />
     <rect x="6" y="8" width="4" height="2" fill="#F78D94" />
     <rect x="7" y="10" width="2" :height="height" fill="#F78D94" />
     <rect x="6" :y="10 + height" width="4" height="2" fill="#F78D94" />
-    <rect
-      :y="12 + height"
-      width="16"
-      height="8"
-      rx="3"
-      fill="#D54941"
-      fill-opacity="0.2"
-    />
+    <rect :y="12 + height" width="16" height="8" rx="3" fill="#D54941" fill-opacity="0.2" />
   </svg>
 </template>
 
diff --git a/packages/theme-generator/src/size-panel/svg/MarginSvg.vue b/packages/theme-generator/src/size-panel/svg/MarginSvg.vue
index 3c524650..c2a4c492 100644
--- a/packages/theme-generator/src/size-panel/svg/MarginSvg.vue
+++ b/packages/theme-generator/src/size-panel/svg/MarginSvg.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    width="48"
-    height="48"
-    viewBox="0 0 48 48"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect width="48" height="48" rx="6" fill="#D54941" fill-opacity="0.1" />
     <path
       fill-rule="evenodd"
@@ -14,33 +8,9 @@
       fill="#D54941"
       fill-opacity="0.6"
     />
-    <rect
-      x="3"
-      y="8"
-      width="14"
-      height="32"
-      rx="3"
-      fill="#D54941"
-      fill-opacity="0.2"
-    />
-    <rect
-      x="31"
-      y="8"
-      width="14"
-      height="32"
-      rx="3"
-      fill="#D54941"
-      fill-opacity="0.2"
-    />
-    <rect
-      x="0.5"
-      y="0.5"
-      width="47"
-      height="47"
-      rx="5.5"
-      stroke="black"
-      stroke-opacity="0.06"
-    />
+    <rect x="3" y="8" width="14" height="32" rx="3" fill="#D54941" fill-opacity="0.2" />
+    <rect x="31" y="8" width="14" height="32" rx="3" fill="#D54941" fill-opacity="0.2" />
+    <rect x="0.5" y="0.5" width="47" height="47" rx="5.5" stroke="black" stroke-opacity="0.06" />
   </svg>
 </template>
 
diff --git a/packages/theme-generator/src/size-panel/svg/PopupPaddingAdjustSvg.vue b/packages/theme-generator/src/size-panel/svg/PopupPaddingAdjustSvg.vue
index c64e205c..6f69fc8e 100644
--- a/packages/theme-generator/src/size-panel/svg/PopupPaddingAdjustSvg.vue
+++ b/packages/theme-generator/src/size-panel/svg/PopupPaddingAdjustSvg.vue
@@ -1,28 +1,10 @@
 <template>
-  <svg
-    width="36"
-    height="36"
-    viewBox="0 0 36 36"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_26625_99462)">
       <rect :width="height" height="40" fill="#D54941" fill-opacity="0.16" />
       <rect width="36" :height="height" fill="#D54941" fill-opacity="0.16" />
-      <rect
-        :x="36 - height"
-        :width="height"
-        height="36"
-        fill="#D54941"
-        fill-opacity="0.16"
-      />
-      <rect
-        :y="36 - height"
-        width="36"
-        :height="height"
-        fill="#D54941"
-        fill-opacity="0.16"
-      />
+      <rect :x="36 - height" :width="height" height="36" fill="#D54941" fill-opacity="0.16" />
+      <rect :y="36 - height" width="36" :height="height" fill="#D54941" fill-opacity="0.16" />
       <rect y="16" width="2" height="4" fill="#F78D94" />
       <rect x="2" y="17" :width="height - 4" height="2" fill="#F78D94" />
       <rect :x="height - 2" y="16" width="2" height="4" fill="#F78D94" />
@@ -30,10 +12,10 @@
       <rect :x="38 - height" y="17" :width="height - 4" height="2" fill="#F78D94" />
       <rect x="34" y="16" width="2" height="4" fill="#F78D94" />
       <rect x="16" width="4" height="2" fill="#F78D94" />
-      <rect x="17" y="2" width="2" :height="height-4" fill="#F78D94" />
+      <rect x="17" y="2" width="2" :height="height - 4" fill="#F78D94" />
       <rect x="16" :y="height - 2" width="4" height="2" fill="#F78D94" />
-      <rect x="16" :y="36- height" width="4" height="2" fill="#F78D94" />
-      <rect x="17" :y="38-height" width="2" :height="height-4" fill="#F78D94" />
+      <rect x="16" :y="36 - height" width="4" height="2" fill="#F78D94" />
+      <rect x="17" :y="38 - height" width="2" :height="height - 4" fill="#F78D94" />
       <rect x="16" y="34" width="4" height="2" fill="#F78D94" />
     </g>
     <!-- 圆角 -->
diff --git a/packages/theme-generator/src/size-panel/svg/PopupPaddingSvg.vue b/packages/theme-generator/src/size-panel/svg/PopupPaddingSvg.vue
index 722cc0d6..8c35faa3 100644
--- a/packages/theme-generator/src/size-panel/svg/PopupPaddingSvg.vue
+++ b/packages/theme-generator/src/size-panel/svg/PopupPaddingSvg.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    width="48"
-    height="48"
-    viewBox="0 0 48 48"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_26566_99945)">
       <rect width="48" height="48" rx="6" fill="#D54941" fill-opacity="0.1" />
       <rect width="10" height="48" fill="#D54941" fill-opacity="0.16" />
@@ -41,15 +35,7 @@
         fill-opacity="0.5"
       />
     </g>
-    <rect
-      x="0.5"
-      y="0.5"
-      width="47"
-      height="47"
-      rx="5.5"
-      stroke="black"
-      stroke-opacity="0.06"
-    />
+    <rect x="0.5" y="0.5" width="47" height="47" rx="5.5" stroke="black" stroke-opacity="0.06" />
     <defs>
       <clipPath id="clip0_26566_99945">
         <rect width="48" height="48" rx="6" fill="white" />
diff --git a/packages/theme-generator/src/size-panel/svg/SectionDynamicSvg.vue b/packages/theme-generator/src/size-panel/svg/SectionDynamicSvg.vue
index 0aca370d..8c75a6c9 100644
--- a/packages/theme-generator/src/size-panel/svg/SectionDynamicSvg.vue
+++ b/packages/theme-generator/src/size-panel/svg/SectionDynamicSvg.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    :width="size + 2 || 2"
-    height="8"
-    :viewBox="`0 0 ${size || 2} 8`"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg :width="size + 2 || 2" height="8" :viewBox="`0 0 ${size || 2} 8`" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect width="1" height="8" fill="#D54941" />
     <rect x="1" y="3" :width="size || 2" height="2" fill="#D54941" />
     <rect :x="size || 2 - 1" width="1" height="8" fill="#D54941" />
diff --git a/packages/theme-generator/src/size-panel/svg/SectionLeftSvg.vue b/packages/theme-generator/src/size-panel/svg/SectionLeftSvg.vue
index 2b10c509..645508a1 100644
--- a/packages/theme-generator/src/size-panel/svg/SectionLeftSvg.vue
+++ b/packages/theme-generator/src/size-panel/svg/SectionLeftSvg.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    width="8"
-    height="8"
-    viewBox="0 0 8 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect width="2" height="8" fill="#D54941" />
     <rect x="2" y="3" width="4" height="2" fill="#D54941" />
     <rect x="6" width="2" height="8" fill="#D54941" />
diff --git a/packages/theme-generator/src/size-panel/svg/SectionRightSvg.vue b/packages/theme-generator/src/size-panel/svg/SectionRightSvg.vue
index ca3becd4..8353903f 100644
--- a/packages/theme-generator/src/size-panel/svg/SectionRightSvg.vue
+++ b/packages/theme-generator/src/size-panel/svg/SectionRightSvg.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    width="24"
-    height="8"
-    viewBox="0 0 24 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="24" height="8" viewBox="0 0 24 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect width="2" height="8" fill="#D54941" />
     <rect x="2" y="3" width="20" height="2" fill="#D54941" />
     <rect x="22" width="2" height="8" fill="#D54941" />
diff --git a/packages/theme-generator/src/size-panel/svg/SizeAdjustSvg.vue b/packages/theme-generator/src/size-panel/svg/SizeAdjustSvg.vue
index 92a9d732..2f89fe81 100644
--- a/packages/theme-generator/src/size-panel/svg/SizeAdjustSvg.vue
+++ b/packages/theme-generator/src/size-panel/svg/SizeAdjustSvg.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    width="8"
-    :height="height"
-    :viewBox="`0 0 8 ${height}`"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="8" :height="height" :viewBox="`0 0 8 ${height}`" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect width="8" :height="height" rx="3" fill="#F78D94" />
   </svg>
 </template>
diff --git a/packages/theme-generator/src/size-panel/svg/SizeSvg.vue b/packages/theme-generator/src/size-panel/svg/SizeSvg.vue
index 1a935651..993bb930 100644
--- a/packages/theme-generator/src/size-panel/svg/SizeSvg.vue
+++ b/packages/theme-generator/src/size-panel/svg/SizeSvg.vue
@@ -1,47 +1,10 @@
 <template>
-  <svg
-    width="48"
-    height="48"
-    viewBox="0 0 48 48"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
     <rect width="48" height="48" rx="6" fill="#D54941" fill-opacity="0.1" />
-    <rect
-      x="1"
-      y="1"
-      width="24"
-      height="24"
-      rx="5"
-      fill="#D54941"
-      fill-opacity="0.2"
-    />
-    <rect
-      x="8"
-      y="8"
-      width="28"
-      height="28"
-      rx="5"
-      fill="#D54941"
-      fill-opacity="0.3"
-    />
-    <rect
-      x="16"
-      y="16"
-      width="31"
-      height="31"
-      rx="5"
-      fill="#D54941"
-      fill-opacity="0.4"
-    />
-    <rect
-      x="0.5"
-      y="0.5"
-      width="47"
-      height="47"
-      rx="5.5"
-      stroke="var(--theme-component-border)"
-    />
+    <rect x="1" y="1" width="24" height="24" rx="5" fill="#D54941" fill-opacity="0.2" />
+    <rect x="8" y="8" width="28" height="28" rx="5" fill="#D54941" fill-opacity="0.3" />
+    <rect x="16" y="16" width="31" height="31" rx="5" fill="#D54941" fill-opacity="0.4" />
+    <rect x="0.5" y="0.5" width="47" height="47" rx="5.5" stroke="var(--theme-component-border)" />
   </svg>
 </template>
 
diff --git a/packages/theme-generator/src/size-panel/svg/VerticalPaddingAdjustSvg.vue b/packages/theme-generator/src/size-panel/svg/VerticalPaddingAdjustSvg.vue
index a6e308bf..470faf46 100644
--- a/packages/theme-generator/src/size-panel/svg/VerticalPaddingAdjustSvg.vue
+++ b/packages/theme-generator/src/size-panel/svg/VerticalPaddingAdjustSvg.vue
@@ -1,15 +1,7 @@
 <template>
-  <svg
-    width="12"
-    :height="viewHeight"
-    :viewBox="`0 0 12 ${viewHeight}`"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="12" :height="viewHeight" :viewBox="`0 0 12 ${viewHeight}`" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
-      :d="`M0 3C0 1.34315 1.34315 0 3 0H9C10.6569 0 12 1.34315 12 3V${
-        4 + height
-      }H0V3Z`"
+      :d="`M0 3C0 1.34315 1.34315 0 3 0H9C10.6569 0 12 1.34315 12 3V${4 + height}H0V3Z`"
       fill="#D54941"
       fill-opacity="0.16"
     />
@@ -19,9 +11,9 @@
     <path
       :d="`M0 ${height + 10}H12V${viewHeight - 3}C12 ${
         viewHeight - 2
-      }.6569 10.6569 ${viewHeight} 9 ${viewHeight}H3C1.34315 ${viewHeight} 0 ${
-        viewHeight - 2
-      }.6569 0 ${viewHeight - 3}V${height + 10}Z`"
+      }.6569 10.6569 ${viewHeight} 9 ${viewHeight}H3C1.34315 ${viewHeight} 0 ${viewHeight - 2}.6569 0 ${
+        viewHeight - 3
+      }V${height + 10}Z`"
       fill="#D54941"
       fill-opacity="0.16"
     />
diff --git a/packages/theme-generator/src/size-panel/svg/VerticalPaddingSvg.vue b/packages/theme-generator/src/size-panel/svg/VerticalPaddingSvg.vue
index 85dc1937..6d67dcbe 100644
--- a/packages/theme-generator/src/size-panel/svg/VerticalPaddingSvg.vue
+++ b/packages/theme-generator/src/size-panel/svg/VerticalPaddingSvg.vue
@@ -1,18 +1,8 @@
 <template>
-  <svg
-    width="48"
-    height="48"
-    viewBox="0 0 48 48"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_26565_99786)">
       <rect width="48" height="48" rx="6" fill="#D54941" fill-opacity="0.1" />
-      <path
-        d="M0 6C0 2.68629 2.68629 0 6 0H42C45.3137 0 48 2.68629 48 6V17H0V6Z"
-        fill="#D54941"
-        fill-opacity="0.16"
-      />
+      <path d="M0 6C0 2.68629 2.68629 0 6 0H42C45.3137 0 48 2.68629 48 6V17H0V6Z" fill="#D54941" fill-opacity="0.16" />
       <path
         d="M0 32H48V42C48 45.3137 45.3137 48 42 48H6C2.68629 48 0 45.3137 0 42V32Z"
         fill="#D54941"
@@ -33,15 +23,7 @@
         fill-opacity="0.5"
       />
     </g>
-    <rect
-      x="0.5"
-      y="0.5"
-      width="47"
-      height="47"
-      rx="5.5"
-      stroke="black"
-      stroke-opacity="0.06"
-    />
+    <rect x="0.5" y="0.5" width="47" height="47" rx="5.5" stroke="black" stroke-opacity="0.06" />
     <defs>
       <clipPath id="clip0_26565_99786">
         <rect width="48" height="48" rx="6" fill="white" />
diff --git a/packages/theme-generator/vue.config.js b/packages/theme-generator/vue.config.js
index 067bd241..395851d1 100644
--- a/packages/theme-generator/vue.config.js
+++ b/packages/theme-generator/vue.config.js
@@ -2,7 +2,7 @@ const { defineConfig } = require('@vue/cli-service');
 
 module.exports = defineConfig({
   transpileDependencies: true,
-  lintOnSave: false,
+  lintOnSave: true,
   chainWebpack: (config) => {
     config.module
       .rule('raw')

From 172e3ddbd227dd157c83d3f573a3b4fa0a569425 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E8=8F=9C=20Cai?= <jimmyrss1102@gmail.com>
Date: Sun, 11 Jan 2026 03:35:50 +0800
Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=E9=80=89=E6=8B=A9=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=9F=BA?=
 =?UTF-8?q?=E4=BA=8E=20CollapseBase=20=E5=A2=9E=E5=BC=BA=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ColorCollapse/index.vue        | 182 +++++++-----------
 .../src/common/components/Collapse/index.vue  | 153 ++-------------
 .../common/components/CollapseBase/index.vue  | 165 ++++++++++++++++
 .../src/common/components/index.js            |   1 +
 4 files changed, 253 insertions(+), 248 deletions(-)
 create mode 100644 packages/theme-generator/src/common/components/CollapseBase/index.vue

diff --git a/packages/theme-generator/src/color-panel/components/ColorCollapse/index.vue b/packages/theme-generator/src/color-panel/components/ColorCollapse/index.vue
index 097b03cd..37d713c0 100644
--- a/packages/theme-generator/src/color-panel/components/ColorCollapse/index.vue
+++ b/packages/theme-generator/src/color-panel/components/ColorCollapse/index.vue
@@ -1,6 +1,7 @@
 <template>
-  <div class="color-collapse">
-    <div class="color-collapse__header">
+  <collapse-base variant="color">
+    <!-- 左侧颜色选择器 -->
+    <template #icon>
       <t-popup
         placement="left"
         show-arrow
@@ -35,59 +36,53 @@
           <color-picker :value="mainColor" @change="changeColor" />
         </template>
       </t-popup>
-      <div class="color-collapse__text">
-        <div class="color-collapse__title" @click="isActive = !isActive">
-          {{ title }}
-        </div>
-        <div class="color-collapse__subtitle" :style="{ color: 'var(--text-secondary)' }">
-          <slot name="subTitle">
-            <!-- 没有 slot 时使用默认内容 -->
-            HEX: {{ mainColor }}
-            <t-popup
-              placement="top"
-              show-arrow
-              trigger="click"
-              :destroy-on-close="true"
-              :attach="handleAttach"
-              :overlay-style="{ borderRadius: '6px' }"
-            >
-              <file-copy-icon @click="() => copyHex(mainColor)" />
-              <template #content>
-                <span :style="{ color: `var(--text-secondary)` }">{{ lang.copied }}</span>
-              </template>
-            </t-popup>
-          </slot>
-        </div>
-      </div>
-      <div @click="isActive = !isActive">
-        <arrow-icon :is-active="isActive" overlay-class-name="color-collapse__arrow" />
-      </div>
-    </div>
-    <transition
-      name="t-slide-down"
-      @before-enter="beforeEnter"
-      @enter="enter"
-      @after-enter="afterEnter"
-      @before-leave="beforeLeave"
-      @leave="leave"
-      @afterLeave="afterLeave"
-    >
-      <slot v-if="isActive"></slot>
-    </transition>
-  </div>
+    </template>
+
+    <!-- 标题 -->
+    <template #title>{{ title }}</template>
+
+    <!-- 副标题 -->
+    <template #subTitle>
+      HEX: {{ mainColor }}
+      <t-popup
+        placement="top"
+        show-arrow
+        trigger="click"
+        :destroy-on-close="true"
+        :attach="handleAttach"
+        :overlay-style="{ borderRadius: '6px' }"
+        @click.native.stop
+      >
+        <file-copy-icon @click="() => copyHex(mainColor)" />
+        <template #content>
+          <span :style="{ color: `var(--text-secondary)` }">{{ lang.copied }}</span>
+        </template>
+      </t-popup>
+    </template>
+
+    <!-- 内容 -->
+    <template #content>
+      <slot></slot>
+    </template>
+  </collapse-base>
 </template>
+
 <script>
 import { Edit1Icon, FileCopyIcon } from 'tdesign-icons-vue';
 import { Popup as TPopup } from 'tdesign-vue';
-import ArrowIcon from 'tdesign-vue/es/common-components/fake-arrow';
 
 import { ColorPicker } from '@/common/components';
+import CollapseBase from '@/common/components/CollapseBase/index.vue';
 import { langMixin } from '@/common/i18n';
-import { collapseAnimation, handleAttach } from '@/common/utils';
+import { handleAttach } from '@/common/utils';
 
+/**
+ * 颜色展开/收起组件
+ * 基于 CollapseBase，增加颜色选择、复制功能
+ */
 export default {
   name: 'ColorCollapse',
-  components: { FileCopyIcon, ArrowIcon, TPopup, Edit1Icon, ColorPicker },
+  components: { FileCopyIcon, TPopup, Edit1Icon, ColorPicker, CollapseBase },
   mixins: [langMixin],
   props: {
     type: {
@@ -107,21 +102,25 @@ export default {
       default: false,
     },
   },
+  emits: ['changeMainColor'],
   data() {
     return {
-      ...collapseAnimation(),
-      isActive: false,
       isHover: false,
     };
   },
-  emit: ['changeMainColor'],
   methods: {
     handleAttach,
+    /**
+     * 更改颜色
+     */
     changeColor(hex) {
       this.$emit('changeMainColor', hex, this.type);
     },
+    /**
+     * 复制十六进制颜色值
+     */
     copyHex(hex) {
-      let input = document.createElement('input');
+      const input = document.createElement('input');
       input.value = hex;
       document.body.appendChild(input);
       input.select();
@@ -131,83 +130,38 @@ export default {
   },
 };
 </script>
+
 <style lang="less" scoped>
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.1s;
 }
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+
+.fade-enter,
+.fade-leave-to {
   opacity: 0;
 }
 
-.color-collapse {
-  padding: 16px 4px 16px 16px;
-  border-top: 1px solid var(--theme-component-border);
-
-  &__header {
-    display: flex;
-    align-items: center;
+.block {
+  position: relative;
 
-    .block {
-      position: relative;
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-        background-color: transparent;
-        transition: background-color 0.2s;
-        border-radius: 6px;
-      }
-      &:hover {
-        &::after {
-          background-color: rgba(0, 0, 0, 0.1);
-        }
-      }
-    }
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    background-color: transparent;
+    transition: background-color 0.2s;
+    border-radius: 6px;
   }
 
-  &__text {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin-left: 12px;
-    font-size: 14px;
-    line-height: 22px;
-    flex: 1;
-    cursor: pointer;
-  }
-
-  &__title {
-    margin-bottom: 4px;
-    font-weight: 500;
-    color: var(--text-primary);
-  }
-
-  &__subtitle {
-    display: flex;
-    align-items: center;
-    color: var(--text-secondary);
-    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-    /deep/ .t-icon {
-      margin-left: 4px;
-      cursor: pointer;
-      transition: color 0.2s;
-
-      &:hover {
-        color: var(--text-primary);
-      }
+  &:hover {
+    &::after {
+      background-color: rgba(0, 0, 0, 0.1);
     }
   }
-
-  &__arrow {
-    color: var(--text-primary);
-    transform: scale(1.5);
-    cursor: pointer;
-  }
 }
 </style>
diff --git a/packages/theme-generator/src/common/components/Collapse/index.vue b/packages/theme-generator/src/common/components/Collapse/index.vue
index ada7d07a..84b9a29c 100644
--- a/packages/theme-generator/src/common/components/Collapse/index.vue
+++ b/packages/theme-generator/src/common/components/Collapse/index.vue
@@ -1,144 +1,29 @@
 <template>
-  <div class="common-collapse">
-    <div class="common-collapse__header">
+  <collapse-base variant="default">
+    <template #icon>
       <slot name="round"></slot>
-      <div class="common-collapse__text">
-        <div class="common-collapse__title" @click="isActive = !isActive">
-          <slot name="title"></slot>
-        </div>
-        <div class="common-collapse__subtitle">
-          <slot name="subTitle"></slot>
-        </div>
-      </div>
-      <div @click="isActive = !isActive">
-        <arrow-icon :is-active="isActive" overlay-class-name="common-collapse__arrow" />
-      </div>
-    </div>
-    <transition
-      name="t-slide-down"
-      @before-enter="beforeEnter"
-      @enter="enter"
-      @after-enter="afterEnter"
-      @before-leave="beforeLeave"
-      @leave="leave"
-      @afterLeave="afterLeave"
-    >
-      <div v-show="isActive">
-        <slot name="content" />
-      </div>
-    </transition>
-  </div>
+    </template>
+    <template #title>
+      <slot name="title"></slot>
+    </template>
+    <template #subTitle>
+      <slot name="subTitle"></slot>
+    </template>
+    <template #content>
+      <slot name="content"></slot>
+    </template>
+  </collapse-base>
 </template>
 
 <script>
-import ArrowIcon from 'tdesign-vue/es/common-components/fake-arrow';
-import { collapseAnimation, handleAttach } from '../../utils';
+import CollapseBase from '../CollapseBase/index.vue';
 
+/**
+ * 通用展开/收起组件
+ * 基于 CollapseBase 的简单包装
+ */
 export default {
   name: 'CommonCollapse',
-  components: { ArrowIcon },
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
-    colorPalette: {
-      type: Array,
-      default: () => [],
-    },
-    type: {
-      type: String,
-      default: '',
-    },
-  },
-
-  data() {
-    return {
-      ...collapseAnimation(),
-      isActive: false,
-      isHover: false,
-    };
-  },
-  methods: {
-    handleAttach,
-  },
+  components: { CollapseBase },
 };
 </script>
-
-<style scoped lang="less">
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.1s;
-}
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
-}
-
-.common-collapse {
-  padding: 16px 4px 16px 16px;
-  border-top: 1px solid var(--component-border);
-
-  &__header {
-    display: flex;
-    align-items: center;
-
-    .block {
-      position: relative;
-      border-radius: 6px;
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-        background-color: transparent;
-        border-radius: 6px;
-      }
-    }
-  }
-
-  &__text {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin-left: 12px;
-    font-size: 14px;
-    line-height: 22px;
-    flex: 1;
-    cursor: pointer;
-  }
-
-  &__title {
-    font-weight: 600;
-    margin-bottom: 4px;
-    color: var(--text-primary);
-  }
-
-  &__subtitle {
-    display: flex;
-    align-items: center;
-    color: var(--text-secondary);
-    font-size: 12px;
-    line-height: 20px;
-    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-    /deep/ .t-icon {
-      margin-left: 4px;
-      cursor: pointer;
-      transition: color 0.2s;
-
-      &:hover {
-        color: var(--text-primary);
-      }
-    }
-  }
-
-  &__arrow {
-    color: var(--text-primary);
-    transform: scale(1.5);
-    cursor: pointer;
-  }
-}
-</style>
diff --git a/packages/theme-generator/src/common/components/CollapseBase/index.vue b/packages/theme-generator/src/common/components/CollapseBase/index.vue
new file mode 100644
index 00000000..08e90f09
--- /dev/null
+++ b/packages/theme-generator/src/common/components/CollapseBase/index.vue
@@ -0,0 +1,165 @@
+<template>
+  <div :class="['collapse-base', `collapse-base--${variant}`]">
+    <div class="collapse-base__header">
+      <!-- 左侧圆形图标区 -->
+      <slot name="icon"></slot>
+
+      <!-- 中间文本区 -->
+      <div class="collapse-base__text" @click="toggleActive">
+        <!-- 标题 -->
+        <div class="collapse-base__title">
+          <slot name="title"></slot>
+        </div>
+        <!-- 副标题 -->
+        <div class="collapse-base__subtitle">
+          <slot name="subTitle"></slot>
+        </div>
+      </div>
+
+      <!-- 右侧箭头区 -->
+      <div class="collapse-base__arrow" @click="toggleActive">
+        <arrow-icon :is-active="isActive" :overlay-class-name="`${variant}-arrow`" />
+      </div>
+    </div>
+
+    <!-- 展开内容 -->
+    <transition
+      name="t-slide-down"
+      @before-enter="beforeEnter"
+      @enter="enter"
+      @after-enter="afterEnter"
+      @before-leave="beforeLeave"
+      @leave="leave"
+      @afterLeave="afterLeave"
+    >
+      <div v-show="isActive" class="collapse-base__content">
+        <slot name="content"></slot>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import ArrowIcon from 'tdesign-vue/es/common-components/fake-arrow';
+import { collapseAnimation, handleAttach } from '../../utils';
+
+/**
+ * 基础展开/收起组件
+ * 提供统一的展开/收起交互和动画
+ */
+export default {
+  name: 'CollapseBase',
+  components: { ArrowIcon },
+  props: {
+    /**
+     * 组件变体 ('default' | 'color')
+     * 用于不同的样式和行为
+     */
+    variant: {
+      type: String,
+      default: 'default',
+      validator: (value) => ['default', 'color'].includes(value),
+    },
+  },
+  data() {
+    return {
+      ...collapseAnimation(),
+      isActive: false,
+    };
+  },
+  methods: {
+    handleAttach,
+    /**
+     * 切换展开/收起状态
+     */
+    toggleActive() {
+      this.isActive = !this.isActive;
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.collapse-base {
+  padding: 16px 4px 16px 16px;
+  border-top: 1px solid var(--theme-component-border);
+
+  &__header {
+    display: flex;
+    align-items: center;
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 12px;
+    font-size: 14px;
+    line-height: 22px;
+    flex: 1;
+    cursor: pointer;
+  }
+
+  &__title {
+    margin-bottom: 4px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  &__subtitle {
+    display: flex;
+    align-items: center;
+    color: var(--text-secondary);
+    font-size: 12px;
+    line-height: 20px;
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+
+    /deep/ .t-icon {
+      margin-left: 4px;
+      cursor: pointer;
+      transition: color 0.2s;
+
+      &:hover {
+        color: var(--text-primary);
+      }
+    }
+  }
+
+  &__arrow {
+    cursor: pointer;
+  }
+
+  &__content {
+    /* 内容区空间预留 */
+  }
+
+  /* 默认变体样式 */
+  &--default {
+    .collapse-base__arrow {
+      color: var(--text-primary);
+    }
+
+    .default-arrow {
+      color: var(--text-primary);
+      transform: scale(1.5);
+    }
+  }
+
+  /* 颜色变体样式 */
+  &--color {
+    .collapse-base__title {
+      font-weight: 500;
+    }
+
+    .collapse-base__subtitle {
+      color: var(--text-secondary);
+    }
+
+    .color-arrow {
+      color: var(--text-primary);
+      transform: scale(1.5);
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/packages/theme-generator/src/common/components/index.js b/packages/theme-generator/src/common/components/index.js
index 6dade961..124597f0 100644
--- a/packages/theme-generator/src/common/components/index.js
+++ b/packages/theme-generator/src/common/components/index.js
@@ -1,3 +1,4 @@
+export { default as CollapseBase } from './CollapseBase';
 export { default as CommonCollapse } from './Collapse';
 export { default as ColorPicker } from './ColorPicker';
 export { default as SegmentSelection } from './SegmentSelection';