From e8461f91e62031f87dbc976f41e873f2bcc3c00c Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 17 Jan 2025 19:49:56 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E5=B7=B2=E7=BB=8F=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E4=BA=86=E7=9A=84=E6=A0=B7=E5=BC=8F=E6=97=A0=E6=B3=95?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/fields/StyleSetter/Index.vue   |  5 +-
 .../src/fields/StyleSetter/pro/Layout.vue     | 58 ++++++++++++-------
 .../src/fields/StyleSetter/pro/Position.vue   | 51 ++++++++++++++--
 .../src/layouts/props-panel/PropsPanel.vue    |  9 ++-
 .../editor/src/theme/style-setter/layout.scss |  2 +-
 5 files changed, 97 insertions(+), 28 deletions(-)

diff --git a/packages/editor/src/fields/StyleSetter/Index.vue b/packages/editor/src/fields/StyleSetter/Index.vue
index 6ccbf25f5..db037e843 100644
--- a/packages/editor/src/fields/StyleSetter/Index.vue
+++ b/packages/editor/src/fields/StyleSetter/Index.vue
@@ -27,7 +27,7 @@ defineOptions({
   name: 'MFieldsStyleSetter',
 });
 
-defineProps<FieldProps<StyleSchema>>();
+const props = defineProps<FieldProps<StyleSchema>>();
 
 const emit = defineEmits<{
   change: [v: any, eventData: ContainerChangeEventData];
@@ -64,6 +64,9 @@ const collapseValue = shallowRef(
 );
 
 const change = (v: any, eventData: ContainerChangeEventData) => {
+  eventData.changeRecords?.forEach((record) => {
+    record.propPath = `${props.name}.${record.propPath}`;
+  });
   emit('change', v, eventData);
 };
 </script>
diff --git a/packages/editor/src/fields/StyleSetter/pro/Layout.vue b/packages/editor/src/fields/StyleSetter/pro/Layout.vue
index b01f9e99e..6e7ad81c1 100644
--- a/packages/editor/src/fields/StyleSetter/pro/Layout.vue
+++ b/packages/editor/src/fields/StyleSetter/pro/Layout.vue
@@ -1,6 +1,6 @@
 <template>
   <MContainer :config="config" :model="values" @change="change"></MContainer>
-  <Box :model="values" @change="change"></Box>
+  <Box v-show="!['fixed', 'absolute'].includes(values.position)" :model="values" @change="change"></Box>
 </template>
 
 <script lang="ts" setup>
@@ -125,7 +125,7 @@ const config = {
         },
         {
           name: 'height',
-          text: '宽度',
+          text: '高度',
           labelWidth: '68px',
           type: 'data-source-field-select',
           fieldConfig: {
@@ -135,25 +135,41 @@ const config = {
       ],
     },
     {
-      type: 'data-source-field-select',
-      text: 'overflow',
-      name: 'overflow',
-      checkStrictly: false,
-      dataSourceFieldType: ['string'],
-      fieldConfig: {
-        type: 'select',
-        clearable: true,
-        allowCreate: true,
-        options: [
-          { text: 'visible', value: 'visible' },
-          { text: 'hidden', value: 'hidden' },
-          { text: 'clip', value: 'clip' },
-          { text: 'scroll', value: 'scroll' },
-          { text: 'auto', value: 'auto' },
-          { text: 'overlay', value: 'overlay' },
-          { text: 'initial', value: 'initial' },
-        ],
-      },
+      type: 'row',
+      items: [
+        {
+          type: 'data-source-field-select',
+          text: 'overflow',
+          name: 'overflow',
+          labelWidth: '68px',
+          checkStrictly: false,
+          dataSourceFieldType: ['string'],
+          fieldConfig: {
+            type: 'select',
+            clearable: true,
+            allowCreate: true,
+            options: [
+              { text: 'visible', value: 'visible' },
+              { text: 'hidden', value: 'hidden' },
+              { text: 'clip', value: 'clip' },
+              { text: 'scroll', value: 'scroll' },
+              { text: 'auto', value: 'auto' },
+              { text: 'overlay', value: 'overlay' },
+              { text: 'initial', value: 'initial' },
+            ],
+          },
+        },
+        {
+          type: 'data-source-field-select',
+          text: '透明度',
+          name: 'opacity',
+          labelWidth: '68px',
+          dataSourceFieldType: ['string', 'number'],
+          fieldConfig: {
+            type: 'text',
+          },
+        },
+      ],
     },
   ],
 };
diff --git a/packages/editor/src/fields/StyleSetter/pro/Position.vue b/packages/editor/src/fields/StyleSetter/pro/Position.vue
index 2923252e8..0f1b34ab5 100644
--- a/packages/editor/src/fields/StyleSetter/pro/Position.vue
+++ b/packages/editor/src/fields/StyleSetter/pro/Position.vue
@@ -1,15 +1,12 @@
 <template>
   <MContainer :config="config" :model="values" @change="change"></MContainer>
-  <Position v-show="values['position'] !== 'static'" :model="values" @change="change"></Position>
 </template>
 
 <script lang="ts" setup>
 import { ContainerChangeEventData, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
-import Position from '../components/Position.vue';
-
-defineProps<{ values: Partial<StyleSchema> }>();
+const props = defineProps<{ values: Partial<StyleSchema> }>();
 
 const emit = defineEmits<{
   change: [v: string | StyleSchema, eventData: ContainerChangeEventData];
@@ -30,6 +27,52 @@ const config = {
         })),
       },
     },
+    {
+      type: 'row',
+      labelWidth: '68px',
+      display: () => props.values.position !== 'static',
+      items: [
+        {
+          name: 'left',
+          type: 'data-source-field-select',
+          text: 'left',
+          fieldConfig: {
+            type: 'text',
+          },
+        },
+        {
+          name: 'top',
+          type: 'data-source-field-select',
+          text: 'top',
+          fieldConfig: {
+            type: 'text',
+          },
+        },
+      ],
+    },
+    {
+      type: 'row',
+      labelWidth: '68px',
+      display: () => props.values.position !== 'static',
+      items: [
+        {
+          name: 'right',
+          type: 'data-source-field-select',
+          text: 'right',
+          fieldConfig: {
+            type: 'text',
+          },
+        },
+        {
+          name: 'bottom',
+          type: 'data-source-field-select',
+          text: 'bottom',
+          fieldConfig: {
+            type: 'text',
+          },
+        },
+      ],
+    },
     {
       labelWidth: '68px',
       name: 'zIndex',
diff --git a/packages/editor/src/layouts/props-panel/PropsPanel.vue b/packages/editor/src/layouts/props-panel/PropsPanel.vue
index 9e09a9f5e..9ddbd0f51 100644
--- a/packages/editor/src/layouts/props-panel/PropsPanel.vue
+++ b/packages/editor/src/layouts/props-panel/PropsPanel.vue
@@ -57,9 +57,10 @@ import { computed, inject, onBeforeUnmount, ref, useTemplateRef, watchEffect } f
 import { Close, Sugar } from '@element-plus/icons-vue';
 import type { OnDrag } from 'gesto';
 
-import type { MNode } from '@tmagic/core';
+import { type MNode } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import type { ContainerChangeEventData, FormState, FormValue } from '@tmagic/form';
+import { setValueByKeyPath } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
 import Resizer from '@editor/components/Resizer.vue';
@@ -136,6 +137,12 @@ const submit = async (v: MNode, eventData?: ContainerChangeEventData) => {
           newValue.style[key] = value;
         }
       });
+
+      eventData?.changeRecords?.forEach((record) => {
+        if (record.propPath?.startsWith('style') && record.value === '') {
+          setValueByKeyPath(record.propPath, record.value, newValue);
+        }
+      });
     }
 
     services?.editorService.update(newValue, { changeRecords: eventData?.changeRecords });
diff --git a/packages/editor/src/theme/style-setter/layout.scss b/packages/editor/src/theme/style-setter/layout.scss
index b4dee7fca..78b5d57fb 100644
--- a/packages/editor/src/theme/style-setter/layout.scss
+++ b/packages/editor/src/theme/style-setter/layout.scss
@@ -2,7 +2,7 @@
 .layout-box-container {
   position: relative;
   width: 100%;
-  height: 150px;
+  height: 130px;
 
   .help-txt {
     float: left;