From af157fcda96da817d1507cb93a564709b6d010b9 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 4 Aug 2026 19:01:51 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E4=BF=AE=E5=A4=8D=20StyleSetter?=
 =?UTF-8?q?=20Box/Position=20=E8=BE=93=E5=85=A5=E6=A1=86=E6=97=A0=E6=B3=95?=
 =?UTF-8?q?=E6=AD=A3=E7=A1=AE=E6=98=BE=E7=A4=BA=20model=20=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

原生 input 应使用 :value 而非 :model-value，并补充值显示与同步更新的单元测试。
---
 .../src/fields/StyleSetter/components/Box.vue |  2 +-
 .../StyleSetter/components/Position.vue       |  2 +-
 .../fields/StyleSetter/components/Box.spec.ts | 37 +++++++++++++++++++
 3 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/fields/StyleSetter/components/Box.vue b/packages/editor/src/fields/StyleSetter/components/Box.vue
index c3c20bd3..7656d56c 100644
--- a/packages/editor/src/fields/StyleSetter/components/Box.vue
+++ b/packages/editor/src/fields/StyleSetter/components/Box.vue
@@ -4,7 +4,7 @@
       <span class="help-txt" v-if="item.text">{{ item.text }}</span>
       <span class="next-input">
         <input
-          :model-value="model[item.name]"
+          :value="model[item.name]"
           placeholder="0"
           :title="model[item.name]"
           :disabled="disabled"
diff --git a/packages/editor/src/fields/StyleSetter/components/Position.vue b/packages/editor/src/fields/StyleSetter/components/Position.vue
index 5621292e..82c0a339 100644
--- a/packages/editor/src/fields/StyleSetter/components/Position.vue
+++ b/packages/editor/src/fields/StyleSetter/components/Position.vue
@@ -3,7 +3,7 @@
     <div v-for="(item, index) in list" :key="index" :class="item.class">
       <span class="next-input">
         <input
-          :model-value="model[item.name]"
+          :value="model[item.name]"
           placeholder="0"
           :title="model[item.name]"
           :disabled="disabled"
diff --git a/packages/editor/tests/unit/fields/StyleSetter/components/Box.spec.ts b/packages/editor/tests/unit/fields/StyleSetter/components/Box.spec.ts
index 6b75797d..d20c7376 100644
--- a/packages/editor/tests/unit/fields/StyleSetter/components/Box.spec.ts
+++ b/packages/editor/tests/unit/fields/StyleSetter/components/Box.spec.ts
@@ -15,6 +15,36 @@ describe('StyleSetter Box', () => {
     expect(wrapper.findAll('input').length).toBe(8);
   });
 
+  test('根据 model 显示 margin/padding 值', () => {
+    const wrapper = mount(Box, {
+      props: {
+        model: {
+          marginTop: '10',
+          marginRight: '20',
+          marginBottom: '30',
+          marginLeft: '40',
+          paddingTop: '1',
+          paddingRight: '2',
+          paddingBottom: '3',
+          paddingLeft: '4',
+        },
+      },
+    });
+    const values = wrapper.findAll('input').map((i) => (i.element as HTMLInputElement).value);
+    expect(values).toEqual(['10', '20', '30', '40', '1', '2', '3', '4']);
+  });
+
+  test('model 变更时输入框值同步更新', async () => {
+    const wrapper = mount(Box, {
+      props: { model: { marginTop: '10', marginRight: '20' } },
+    });
+    expect((wrapper.findAll('input')[0].element as HTMLInputElement).value).toBe('10');
+
+    await wrapper.setProps({ model: { marginTop: '50', marginRight: '60' } });
+    expect((wrapper.findAll('input')[0].element as HTMLInputElement).value).toBe('50');
+    expect((wrapper.findAll('input')[1].element as HTMLInputElement).value).toBe('60');
+  });
+
   test('change 事件携带值与对应字段名', async () => {
     const wrapper = mount(Box, { props: { model: { marginTop: '10' } } });
     const input = wrapper.findAll('input')[0];
@@ -40,6 +70,13 @@ describe('StyleSetter Position', () => {
     expect(wrapper.findAll('input').length).toBe(4);
   });
 
+  test('model 变更时输入框值同步更新', async () => {
+    const wrapper = mount(Position, { props: { model: { top: '0', right: '10' } } });
+    await wrapper.setProps({ model: { top: '20', right: '30' } });
+    expect((wrapper.findAll('input')[0].element as HTMLInputElement).value).toBe('20');
+    expect((wrapper.findAll('input')[1].element as HTMLInputElement).value).toBe('30');
+  });
+
   test('change 事件触发并携带 modifyKey', async () => {
     const wrapper = mount(Position, { props: { model: { top: '0' } } });
     const input = wrapper.findAll('input')[1];