From 81aa8f151d765bf08d2f88c334ff7c58b38aab56 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 13 Oct 2025 19:32:29 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E5=B1=9E=E6=80=A7=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E4=B8=AD=E7=9A=84=E6=A0=B7=E5=BC=8F=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../fields/DataSourceFieldSelect/Index.vue    |  1 -
 .../editor/src/fields/StyleSetter/Index.vue   | 25 +++++++++++--------
 .../components/BackgroundPosition.vue         | 10 +++++++-
 .../fields/StyleSetter/components/Border.vue  |  5 ++--
 .../src/fields/StyleSetter/components/Box.vue |  7 ++++--
 .../StyleSetter/components/Position.vue       |  7 ++++--
 .../src/fields/StyleSetter/pro/Background.vue |  8 ++++--
 .../src/fields/StyleSetter/pro/Border.vue     | 10 +++++---
 .../src/fields/StyleSetter/pro/Font.vue       |  8 ++++--
 .../src/fields/StyleSetter/pro/Layout.vue     | 12 +++++++--
 .../src/fields/StyleSetter/pro/Position.vue   |  8 ++++--
 .../src/theme/data-source-field-select.scss   |  4 +++
 packages/editor/src/theme/props-panel.scss    |  5 ----
 .../editor/src/theme/style-setter/index.scss  | 19 +++++++++++---
 14 files changed, 92 insertions(+), 37 deletions(-)

diff --git a/packages/editor/src/fields/DataSourceFieldSelect/Index.vue b/packages/editor/src/fields/DataSourceFieldSelect/Index.vue
index ff75f7a1..55659d8d 100644
--- a/packages/editor/src/fields/DataSourceFieldSelect/Index.vue
+++ b/packages/editor/src/fields/DataSourceFieldSelect/Index.vue
@@ -32,7 +32,6 @@
       content="选择数据源"
     >
       <TMagicButton
-        style="margin-left: 5px"
         :type="showDataSourceFieldSelect ? 'primary' : 'default'"
         :size="size"
         @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
diff --git a/packages/editor/src/fields/StyleSetter/Index.vue b/packages/editor/src/fields/StyleSetter/Index.vue
index db037e84..85ddf057 100644
--- a/packages/editor/src/fields/StyleSetter/Index.vue
+++ b/packages/editor/src/fields/StyleSetter/Index.vue
@@ -1,14 +1,19 @@
 <template>
-  <div class="m-fields-style-setter">
-    <TMagicCollapse :model-value="collapseValue">
-      <template v-for="(item, index) in list" :key="index">
-        <TMagicCollapseItem :name="`${index}`">
-          <template #title><MIcon :icon="Grid"></MIcon>{{ item.title }}</template>
-          <component v-if="item.component" :is="item.component" :values="model[name]" @change="change"></component>
-        </TMagicCollapseItem>
-      </template>
-    </TMagicCollapse>
-  </div>
+  <TMagicCollapse class="m-fields-style-setter" :model-value="collapseValue">
+    <template v-for="(item, index) in list" :key="index">
+      <TMagicCollapseItem :name="`${index}`">
+        <template #title><MIcon :icon="Grid"></MIcon>{{ item.title }}</template>
+        <component
+          v-if="item.component"
+          :is="item.component"
+          :values="model[name]"
+          :size="size"
+          :disabled="disabled"
+          @change="change"
+        ></component>
+      </TMagicCollapseItem>
+    </template>
+  </TMagicCollapse>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/editor/src/fields/StyleSetter/components/BackgroundPosition.vue b/packages/editor/src/fields/StyleSetter/components/BackgroundPosition.vue
index 4e0bdf65..e7e04036 100644
--- a/packages/editor/src/fields/StyleSetter/components/BackgroundPosition.vue
+++ b/packages/editor/src/fields/StyleSetter/components/BackgroundPosition.vue
@@ -6,13 +6,21 @@
         :key="index"
         link
         :class="model[name] === item.value && 'btn-active'"
+        :disabled="disabled"
         @click="changeHandler(item.value)"
       >
         <div :class="['position-icon', item.class, model[name] === item.value && 'active']"></div>
       </TMagicButton>
     </div>
     <div class="custom-value">
-      <TMagicInput v-model="model[name]" size="small" placeholder="自定义背景位置" clearable @change="changeHandler">
+      <TMagicInput
+        v-model="model[name]"
+        placeholder="自定义背景位置"
+        clearable
+        :size="size"
+        :disabled="disabled"
+        @change="changeHandler"
+      >
       </TMagicInput>
     </div>
   </div>
diff --git a/packages/editor/src/fields/StyleSetter/components/Border.vue b/packages/editor/src/fields/StyleSetter/components/Border.vue
index 1ef7c0f1..f28389f0 100644
--- a/packages/editor/src/fields/StyleSetter/components/Border.vue
+++ b/packages/editor/src/fields/StyleSetter/components/Border.vue
@@ -30,7 +30,7 @@
       </div>
     </div>
     <div class="border-value-container">
-      <MContainer :config="config" :model="model" @change="change"></MContainer>
+      <MContainer :config="config" :model="model" :size="size" :disabled="disabled" @change="change"></MContainer>
     </div>
   </div>
 </template>
@@ -67,7 +67,6 @@ const config = computed(() => ({
     {
       name: `border${direction.value}Style`,
       text: '边框样式',
-
       labelWidth: '68px',
       type: 'data-source-field-select',
       fieldConfig: {
@@ -90,6 +89,8 @@ const emit = defineEmits<{
 withDefaults(
   defineProps<{
     model: FormValue;
+    disabled?: boolean;
+    size?: 'large' | 'default' | 'small';
   }>(),
   {},
 );
diff --git a/packages/editor/src/fields/StyleSetter/components/Box.vue b/packages/editor/src/fields/StyleSetter/components/Box.vue
index aa7a7958..6a557267 100644
--- a/packages/editor/src/fields/StyleSetter/components/Box.vue
+++ b/packages/editor/src/fields/StyleSetter/components/Box.vue
@@ -5,9 +5,10 @@
       <span class="next-input">
         <input
           v-model="model[item.name]"
-          :title="model[item.name]"
-          @change="change($event, item.name)"
           placeholder="0"
+          :title="model[item.name]"
+          :disabled="disabled"
+          @change="change($event, item.name)"
         />
       </span>
     </div>
@@ -60,6 +61,8 @@ const emit = defineEmits<{
 
 withDefaults(
   defineProps<{
+    disabled?: boolean;
+    size?: 'large' | 'default' | 'small';
     model: FormValue;
   }>(),
   {},
diff --git a/packages/editor/src/fields/StyleSetter/components/Position.vue b/packages/editor/src/fields/StyleSetter/components/Position.vue
index 09523e2d..8b21bb75 100644
--- a/packages/editor/src/fields/StyleSetter/components/Position.vue
+++ b/packages/editor/src/fields/StyleSetter/components/Position.vue
@@ -4,9 +4,10 @@
       <span class="next-input">
         <input
           v-model="model[item.name]"
-          :title="model[item.name]"
-          @change="change($event, item.name)"
           placeholder="0"
+          :title="model[item.name]"
+          :disabled="disabled"
+          @change="change($event, item.name)"
         />
       </span>
     </div>
@@ -42,6 +43,8 @@ const emit = defineEmits<{
 withDefaults(
   defineProps<{
     model: FormValue;
+    disabled?: boolean;
+    size?: 'large' | 'default' | 'small';
   }>(),
   {},
 );
diff --git a/packages/editor/src/fields/StyleSetter/pro/Background.vue b/packages/editor/src/fields/StyleSetter/pro/Background.vue
index a5c97742..8b7fda65 100644
--- a/packages/editor/src/fields/StyleSetter/pro/Background.vue
+++ b/packages/editor/src/fields/StyleSetter/pro/Background.vue
@@ -1,5 +1,5 @@
 <template>
-  <MContainer :config="config" :model="values" @change="change"></MContainer>
+  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
 </template>
 
 <script lang="ts" setup>
@@ -11,7 +11,11 @@ import type { StyleSchema } from '@tmagic/schema';
 import BackgroundPosition from '../components/BackgroundPosition.vue';
 import { BackgroundNoRepeat, BackgroundRepeat, BackgroundRepeatX, BackgroundRepeatY } from '../icons/background-repeat';
 
-defineProps<{ values: Partial<StyleSchema> }>();
+defineProps<{
+  values: Partial<StyleSchema>;
+  disabled?: boolean;
+  size?: 'large' | 'default' | 'small';
+}>();
 
 const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];
diff --git a/packages/editor/src/fields/StyleSetter/pro/Border.vue b/packages/editor/src/fields/StyleSetter/pro/Border.vue
index 0d2a2307..7bb7eac8 100644
--- a/packages/editor/src/fields/StyleSetter/pro/Border.vue
+++ b/packages/editor/src/fields/StyleSetter/pro/Border.vue
@@ -1,6 +1,6 @@
 <template>
-  <MContainer :config="config" :model="values" @change="change"></MContainer>
-  <Border :model="values" @change="change"></Border>
+  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
+  <Border :model="values" :size="size" :disabled="disabled" @change="change"></Border>
 </template>
 
 <script lang="ts" setup>
@@ -9,7 +9,11 @@ import type { StyleSchema } from '@tmagic/schema';
 
 import Border from '../components/Border.vue';
 
-defineProps<{ values: Partial<StyleSchema> }>();
+defineProps<{
+  values: Partial<StyleSchema>;
+  disabled?: boolean;
+  size?: 'large' | 'default' | 'small';
+}>();
 
 const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];
diff --git a/packages/editor/src/fields/StyleSetter/pro/Font.vue b/packages/editor/src/fields/StyleSetter/pro/Font.vue
index 0c21274f..67d3052f 100644
--- a/packages/editor/src/fields/StyleSetter/pro/Font.vue
+++ b/packages/editor/src/fields/StyleSetter/pro/Font.vue
@@ -1,5 +1,5 @@
 <template>
-  <MContainer :config="config" :model="values" @change="change"></MContainer>
+  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
 </template>
 
 <script lang="ts" setup>
@@ -10,7 +10,11 @@ import type { StyleSchema } from '@tmagic/schema';
 
 import { AlignCenter, AlignLeft, AlignRight } from '../icons/text-align';
 
-defineProps<{ values: Partial<StyleSchema> }>();
+defineProps<{
+  values: Partial<StyleSchema>;
+  disabled?: boolean;
+  size?: 'large' | 'default' | 'small';
+}>();
 
 const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];
diff --git a/packages/editor/src/fields/StyleSetter/pro/Layout.vue b/packages/editor/src/fields/StyleSetter/pro/Layout.vue
index 6e7ad81c..db81bbaf 100644
--- a/packages/editor/src/fields/StyleSetter/pro/Layout.vue
+++ b/packages/editor/src/fields/StyleSetter/pro/Layout.vue
@@ -1,6 +1,12 @@
 <template>
-  <MContainer :config="config" :model="values" @change="change"></MContainer>
-  <Box v-show="!['fixed', 'absolute'].includes(values.position)" :model="values" @change="change"></Box>
+  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
+  <Box
+    v-show="!['fixed', 'absolute'].includes(values.position)"
+    :model="values"
+    :size="size"
+    :disabled="disabled"
+    @change="change"
+  ></Box>
 </template>
 
 <script lang="ts" setup>
@@ -28,6 +34,8 @@ import {
 
 defineProps<{
   values: Partial<StyleSchema>;
+  disabled?: boolean;
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits<{
diff --git a/packages/editor/src/fields/StyleSetter/pro/Position.vue b/packages/editor/src/fields/StyleSetter/pro/Position.vue
index 53ab367f..35c53625 100644
--- a/packages/editor/src/fields/StyleSetter/pro/Position.vue
+++ b/packages/editor/src/fields/StyleSetter/pro/Position.vue
@@ -1,12 +1,16 @@
 <template>
-  <MContainer :config="config" :model="values" @change="change"></MContainer>
+  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
 </template>
 
 <script lang="ts" setup>
 import { ContainerChangeEventData, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
-const props = defineProps<{ values: Partial<StyleSchema> }>();
+const props = defineProps<{
+  values: Partial<StyleSchema>;
+  disabled?: boolean;
+  size?: 'large' | 'default' | 'small';
+}>();
 
 const emit = defineEmits<{
   change: [v: string | StyleSchema, eventData: ContainerChangeEventData];
diff --git a/packages/editor/src/theme/data-source-field-select.scss b/packages/editor/src/theme/data-source-field-select.scss
index 9992f65d..71c024e3 100644
--- a/packages/editor/src/theme/data-source-field-select.scss
+++ b/packages/editor/src/theme/data-source-field-select.scss
@@ -13,4 +13,8 @@
       flex: 2;
     }
   }
+  .tmagic-design-button {
+    margin-left: 5px;
+    padding: 5px 8px;
+  }
 }
diff --git a/packages/editor/src/theme/props-panel.scss b/packages/editor/src/theme/props-panel.scss
index fd6deb25..3f60a815 100644
--- a/packages/editor/src/theme/props-panel.scss
+++ b/packages/editor/src/theme/props-panel.scss
@@ -72,11 +72,6 @@
       align-items: center;
       border-bottom: 2px solid $border-color;
     }
-
-    .tmagic-design-form {
-      padding-right: 10px;
-      padding-left: 10px;
-    }
   }
 
   .m-editor-props-panel-src-icon {
diff --git a/packages/editor/src/theme/style-setter/index.scss b/packages/editor/src/theme/style-setter/index.scss
index e09743cb..f6274978 100644
--- a/packages/editor/src/theme/style-setter/index.scss
+++ b/packages/editor/src/theme/style-setter/index.scss
@@ -8,12 +8,25 @@
   .tmagic-design-collapse-item {
     > .el-collapse-item__header {
       background-color: #f2f3f7;
-      height: 36px;
-      padding: 10px;
+      height: 26px;
+      min-height: 26px;
+      line-height: 26px;
+      padding: 0 20px;
+      box-sizing: border-box;
     }
 
     .el-collapse-item__wrap {
-      padding: 0 10px;
+      padding: 10px 20px;
+    }
+
+    .el-collapse-item__title {
+      display: flex;
+      align-items: center;
+      gap: 3px;
+    }
+
+    .el-collapse-item__content {
+      padding: 0;
     }
   }
 }