Tencent · RSS1102 · Jan 11, 2026 · Jan 12, 2026
diff --git 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/src/color-panel/components/ColorCollapse/index.vue b/packages/theme-generator/src/color-panel/components/ColorCollapse/index.vue
@@ -39,7 +39,7 @@
         <div class="color-collapse__title" @click="isActive = !isActive">
           {{ title }}
         </div>
-        <div class="color-collapse__subtitle" :style="{ color: 'var(--text-secondary)' }">
+        <div class="color-collapse__subtitle" @click="handleSubtitleClick" :style="{ color: 'var(--text-secondary)' }">
           <slot name="subTitle">
             <!-- 没有 slot 时使用默认内容 -->
             HEX: {{ mainColor }}
@@ -105,6 +105,14 @@ export default {
   emit: ['changeMainColor'],
   methods: {
     handleAttach,
+    handleSubtitleClick(event) {
+      // 检查点击的元素是否是交互元素或其子元素
+      const target = event.target;
+      const interactiveElements = target.closest('.t-switch, .t-icon, .t-popup');
+      if (!interactiveElements) {
+        this.isActive = !this.isActive;
+      }
+    },
     changeColor(hex) {
       this.$emit('changeMainColor', hex, this.type);
     },

diff --git a/packages/theme-generator/src/color-panel/index.vue b/packages/theme-generator/src/color-panel/index.vue
@@ -255,7 +255,12 @@
       >
         <template #subTitle>
           {{ lang.color.fromThemeColor }}
-          <t-switch style="margin-left: 8px" v-model="isGrayRelatedToTheme" @change="changeNeutralColor"></t-switch>
+          <t-switch
+            style="margin-left: 8px"
+            v-model="isGrayRelatedToTheme"
+            @change="changeNeutralColor"
+            @click.stop
+          ></t-switch>
         </template>
         <color-column
           type="gray"

diff --git a/packages/theme-generator/src/common/components/Collapse/index.vue b/packages/theme-generator/src/common/components/Collapse/index.vue
@@ -6,7 +6,7 @@
         <div class="common-collapse__title" @click="isActive = !isActive">
           <slot name="title"></slot>
         </div>
-        <div class="common-collapse__subtitle">
+        <div class="common-collapse__subtitle" @click="handleSubtitleClick">
           <slot name="subTitle"></slot>
         </div>
       </div>
@@ -52,6 +52,14 @@ export default {
   },
   methods: {
     handleAttach,
+    handleSubtitleClick(event) {
+      // 检查点击的元素是否是交互元素或其子元素
+      const target = event.target;
+      const interactiveElements = target.closest('.t-switch, .t-icon, .t-popup, .t-button');
+      if (!interactiveElements) {
+        this.isActive = !this.isActive;
+      }
+    },
   },
 };
 </script>

diff --git 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',
+    reset: 'Reset',
+    resetConfirm: 'Are you sure you want to reset the basic 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
@@ -45,6 +45,8 @@ export default {
     yPadding: '组件上下边距',
     popupPadding: '弹出层边距',
     margin: '组件间距',
+    reset: '恢复默认',
+    resetConfirm: '确定要恢复基础尺寸到默认值吗？',
   },
   borerRadius: {
     title: '圆角',

diff --git 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/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/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/shadow-panel/components/ShadowLayer.vue b/packages/theme-generator/src/shadow-panel/components/ShadowLayer.vue
@@ -17,10 +17,10 @@
   </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",
+  name: 'ShadowLayer',
   props: {
     shadow: Array,
     detail: Object,
@@ -33,17 +33,17 @@ export default {
     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 +75,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 +124,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/size-panel/built-in/size-map.js b/packages/theme-generator/src/size-panel/built-in/size-map.js
@@ -1,5 +1,24 @@
 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/index.vue b/packages/theme-generator/src/size-panel/index.vue
@@ -9,7 +9,14 @@
   >
     <div class="size-content__content" :style="contentStyle">
       <div class="size-content__main">
-        <p class="size-content__title">{{ lang.size.basicSize }}</p>
+        <div style="display: flex; justify-content: space-between; align-items: center">
+          <p class="size-content__title">{{ lang.size.basicSize }}</p>
+          <t-popconfirm :content="lang.size.resetConfirm" @confirm="resetSizeTokens">
+            <t-button theme="default" size="small" variant="text">
+              {{ lang.size.reset }}
+            </t-button>
+          </t-popconfirm>
+        </div>
         <size-display />
       </div>
       <!-- 组件大小 -->
@@ -144,6 +151,8 @@
 <script lang="jsx">
 import { CommonCollapse } from '@/common/components';
 import { langMixin } from '@/common/i18n';
+import { updateLocalToken, modifyToken } from '@/common/themes';
+import { Button as TButton, Popconfirm as TPopconfirm } from 'tdesign-vue';
 
 import SizeAdjust from './components/SizeAdjust.vue';
 import SizeDisplay from './components/SizeDisplay.vue';
@@ -160,6 +169,8 @@ import {
   COMP_PADDING_TB_MAP,
   COMP_POPUP_PADDING_MAP,
   COMP_SIZE_MAP,
+  SIZE_DEFAULT_VALUES,
+  SIZE_TOKENS,
 } from './built-in/size-map';
 
 export default {
@@ -171,6 +182,8 @@ export default {
     CommonCollapse,
     SizeDisplay,
     SizeAdjust,
+    TButton,
+    TPopconfirm,
     // svg
     SizeSvg,
     HorizontalPaddingSvg,
@@ -186,6 +199,7 @@ export default {
       COMP_PADDING_TB_MAP,
       COMP_POPUP_PADDING_MAP,
       COMP_MARGIN_MAP,
+      SIZE_DEFAULT_VALUES,
       refreshIdMap: {
         'comp-size': 0,
         'comp-padding-tb': 0,
@@ -204,6 +218,15 @@ export default {
       };
     },
   },
+  methods: {
+    resetSizeTokens() {
+      SIZE_TOKENS.forEach((token) => {
+        modifyToken(token, SIZE_DEFAULT_VALUES[token]);
+        updateLocalToken(token, null);
+      });
+      this.$root.$emit('refresh-size-tokens');
+    },
+  },
   mounted() {
     this.$root.$on('refresh-size-tokens', (type) => {
       Object.keys(this.refreshIdMap).forEach((key) => {

diff --git 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"
     />