From 3e76d34f59343b5c3e833d32a35fad152a5bf7fd Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 23 Oct 2025 19:27:43 +0800
Subject: [PATCH] =?UTF-8?q?feat(form):=20=E6=96=B0=E5=A2=9Eflex-layout?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/form-schema/src/base.ts            |  4 ++
 packages/form/src/containers/FlexLayout.vue | 59 +++++++++++++++++++++
 packages/form/src/index.ts                  |  3 ++
 3 files changed, 66 insertions(+)
 create mode 100644 packages/form/src/containers/FlexLayout.vue

diff --git a/packages/form-schema/src/base.ts b/packages/form-schema/src/base.ts
index 8e30397a..37541088 100644
--- a/packages/form-schema/src/base.ts
+++ b/packages/form-schema/src/base.ts
@@ -761,6 +761,10 @@ export interface ComponentConfig extends FormItem {
   display: any;
 }
 
+export interface FlexLayoutConfig extends FormItem, ContainerCommonConfig {
+  type: 'flex-layout';
+}
+
 export type ChildConfig =
   | FormItem
   | TabConfig
diff --git a/packages/form/src/containers/FlexLayout.vue b/packages/form/src/containers/FlexLayout.vue
new file mode 100644
index 00000000..6e57ad14
--- /dev/null
+++ b/packages/form/src/containers/FlexLayout.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="m-form-flex-layout" :style="{ display: 'flex', flexWrap: 'wrap', gap }">
+    <Container
+      v-for="(item, index) in config.items"
+      :key="(item as Record<string, any>)[mForm?.keyProp || '__key'] ?? index"
+      :config="item"
+      :model="name ? model[name] : model"
+      :lastValues="name ? lastValues[name] : lastValues"
+      :is-compare="isCompare"
+      :prop="prop"
+      :size="size"
+      :disabled="disabled"
+      :label-width="config.labelWidth || labelWidth"
+      @change="changeHandler"
+      @addDiffCount="onAddDiffCount()"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import type { FlexLayoutConfig } from '@tmagic/form-schema';
+
+import type { ContainerChangeEventData, FormState } from '../schema';
+
+import Container from './Container.vue';
+
+defineOptions({
+  name: 'MFormFlexLayout',
+});
+
+const props = defineProps<{
+  model: any;
+  lastValues?: any;
+  isCompare?: boolean;
+  config: FlexLayoutConfig;
+  name?: string;
+  labelWidth?: string;
+  prop?: string;
+  size?: string;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+  addDiffCount: [];
+}>();
+
+const mForm = inject<FormState | undefined>('mForm');
+
+const gap = computed(() => props.config.gap || '16px');
+
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', props.model, eventData);
+};
+
+const onAddDiffCount = () => emit('addDiffCount');
+</script>
diff --git a/packages/form/src/index.ts b/packages/form/src/index.ts
index aa6133e1..4673607e 100644
--- a/packages/form/src/index.ts
+++ b/packages/form/src/index.ts
@@ -20,6 +20,7 @@ import type { App } from 'vue';
 
 import Container from './containers/Container.vue';
 import Fieldset from './containers/Fieldset.vue';
+import FlexLayout from './containers/FlexLayout.vue';
 import GroupList from './containers/GroupList.vue';
 import Panel from './containers/Panel.vue';
 import Row from './containers/Row.vue';
@@ -63,6 +64,7 @@ export { default as MFormDrawer } from './FormDrawer.vue';
 export { default as MFormBox } from './FormBox.vue';
 export { default as MContainer } from './containers/Container.vue';
 export { default as MFieldset } from './containers/Fieldset.vue';
+export { default as MFlexLayout } from './containers/FlexLayout.vue';
 export { default as MPanel } from './containers/Panel.vue';
 export { default as MRow } from './containers/Row.vue';
 export { default as MTabs } from './containers/Tabs.vue';
@@ -114,6 +116,7 @@ export default {
     app.component('m-form-step', MStep);
     app.component('m-form-table', Table);
     app.component('m-form-tab', Tabs);
+    app.component('m-form-flex-layout', FlexLayout);
     app.component('m-fields-text', Text);
     app.component('m-fields-img-upload', Text);
     app.component('m-fields-number', Number);