feat(editor): 属性配置中的样式面板样式优化

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"

packages/editor/src/fields/StyleSetter/Index.vue

@@ -1,14 +1,19 @@
 <template>
-  <div class="m-fields-style-setter">
+  <TMagicCollapse class="m-fields-style-setter" :model-value="collapseValue">
-    <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>
+        <component
+          v-if="item.component"
+          :is="item.component"
+          :values="model[name]"
+          :size="size"
+          :disabled="disabled"
+          @change="change"
+        ></component>
       </TMagicCollapseItem>
     </template>
   </TMagicCollapse>
-  </div>
 </template>
 
 <script setup lang="ts">

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>

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';
   }>(),
   {},
 );

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;
   }>(),
   {},

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';
   }>(),
   {},
 );

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];

packages/editor/src/fields/StyleSetter/pro/Border.vue

@@ -1,6 +1,6 @@
 <template>
-  <MContainer :config="config" :model="values" @change="change"></MContainer>
+  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
-  <Border :model="values" @change="change"></Border>
+  <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];

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];

packages/editor/src/fields/StyleSetter/pro/Layout.vue

@@ -1,6 +1,12 @@
 <template>
-  <MContainer :config="config" :model="values" @change="change"></MContainer>
+  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
-  <Box v-show="!['fixed', 'absolute'].includes(values.position)" :model="values" @change="change"></Box>
+  <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<{

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];

packages/editor/src/theme/data-source-field-select.scss

@@ -13,4 +13,8 @@
       flex: 2;
     }
   }
+  .tmagic-design-button {
+    margin-left: 5px;
+    padding: 5px 8px;
+  }
 }

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 {

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;
+      height: 26px;
-      padding: 10px;
+      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;
     }
   }
 }