From 35fc39419902e14e2d5bdf98f99802f05a4b5934 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 2 Jun 2026 14:24:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(form):=20fieldset=20legend=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=87=BD=E6=95=B0=E5=8A=A8=E6=80=81=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=E6=A0=87=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/form-config/layout.md                       | 12 ++++++++++++
 packages/form-schema/src/base.ts                 |  2 +-
 packages/form/src/containers/Fieldset.vue        |  7 +++++--
 .../form/tests/unit/containers/Panel.spec.ts     | 16 ++++++++++++++++
 4 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/docs/form-config/layout.md b/docs/form-config/layout.md
index 4825fa6c..581c6dc2 100644
--- a/docs/form-config/layout.md
+++ b/docs/form-config/layout.md
@@ -135,6 +135,18 @@
   }]
 }]"></demo-block>
 
+`legend` 除了支持字符串，也支持函数，函数返回值作为标题展示，可根据表单数据动态生成：
+
+<demo-block type="form" :config="[{
+  type: 'fieldset',
+  labelWidth: '100px',
+  legend: (mForm, { formValue }) => `当前值：${formValue.text || '空'}`,
+  items: [{
+    name: 'text',
+    text: '配置1',
+  }]
+}]"></demo-block>
+
 ### panel
 
 <demo-block type="form" :config="[{
diff --git a/packages/form-schema/src/base.ts b/packages/form-schema/src/base.ts
index e62147e0..9a2338d8 100644
--- a/packages/form-schema/src/base.ts
+++ b/packages/form-schema/src/base.ts
@@ -754,7 +754,7 @@ export interface FieldsetConfig<T = never> extends FormItem, ContainerCommonConf
         falseValue?: string | number;
       };
   expand?: boolean;
-  legend?: string;
+  legend?: string | FilterFunction<string>;
   schematic?: string;
 }
 // #endregion FieldsetConfig
diff --git a/packages/form/src/containers/Fieldset.vue b/packages/form/src/containers/Fieldset.vue
index 1290582f..096f3ce6 100644
--- a/packages/form/src/containers/Fieldset.vue
+++ b/packages/form/src/containers/Fieldset.vue
@@ -7,11 +7,11 @@
         :true-value="checkboxTrueValue"
         :false-value="checkboxFalseValue"
         @update:modelValue="valueChangeHandler"
-        ><span v-html="config.legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
+        ><span v-html="legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
       ></TMagicCheckbox>
     </component>
     <legend v-else>
-      <span v-html="config.legend"></span>
+      <span v-html="legend"></span>
       <span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span>
     </legend>
 
@@ -63,6 +63,7 @@ import { computed, inject } from 'vue';
 import { TMagicCheckbox } from '@tmagic/design';
 
 import { ContainerChangeEventData, FieldsetConfig, FormState } from '../schema';
+import { filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
 
@@ -99,6 +100,8 @@ const mForm = inject<FormState | undefined>('mForm');
 
 const name = computed(() => props.config.name || '');
 
+const legend = computed(() => filterFunction<string>(mForm, props.config.legend, props));
+
 const checkboxName = computed(() => {
   if (typeof props.config.checkbox === 'object' && typeof props.config.checkbox.name === 'string') {
     return props.config.checkbox.name;
diff --git a/packages/form/tests/unit/containers/Panel.spec.ts b/packages/form/tests/unit/containers/Panel.spec.ts
index 5648b715..e7d8b2e1 100644
--- a/packages/form/tests/unit/containers/Panel.spec.ts
+++ b/packages/form/tests/unit/containers/Panel.spec.ts
@@ -58,6 +58,22 @@ describe('Panel container', () => {
     );
     await nextTick();
     expect(wrapper.exists()).toBe(true);
+    expect(wrapper.find('legend').text()).toContain('fs');
+  });
+
+  test('fieldset legend 支持函数', async () => {
+    const wrapper = mountForm(
+      [
+        {
+          type: 'fieldset',
+          legend: (mForm: any, { formValue }: any) => `legend-${formValue.text}`,
+          items: [{ name: 'text', type: 'text', text: 'text' }],
+        },
+      ],
+      { text: 'fn' },
+    );
+    await nextTick();
+    expect(wrapper.find('legend').text()).toContain('legend-fn');
   });
 
   test('flex-layout 容器渲染', async () => {