From 93adb8e71eaaf5506ae408c02a8608ee6d7a91a4 Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Thu, 23 Oct 2025 22:25:07 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E5=8D=95=E8=AE=BE=E8=AE=A1=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/FormDesigner/components/FormPreview.tsx    |  2 ++
 .../FormDesigner/components/GridFieldPreview.tsx     | 12 ++++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/FormDesigner/components/FormPreview.tsx b/frontend/src/pages/FormDesigner/components/FormPreview.tsx
index e9a942ab..6f7b5967 100644
--- a/frontend/src/pages/FormDesigner/components/FormPreview.tsx
+++ b/frontend/src/pages/FormDesigner/components/FormPreview.tsx
@@ -56,6 +56,7 @@ const FormPreview: React.FC<FormPreviewProps> = ({ fields, formConfig }) => {
             field={field}
             formData={formData}
             onFieldChange={(name, value) => setFormData(prev => ({ ...prev, [name]: value }))}
+            formConfig={formConfig}
           />
         );
       }
@@ -66,6 +67,7 @@ const FormPreview: React.FC<FormPreviewProps> = ({ fields, formConfig }) => {
           key={field.id}
           label={field.label}
           name={field.name}
+          colon={true}
           rules={[
             {
               required: field.required,
diff --git a/frontend/src/pages/FormDesigner/components/GridFieldPreview.tsx b/frontend/src/pages/FormDesigner/components/GridFieldPreview.tsx
index 34352540..c68ddab7 100644
--- a/frontend/src/pages/FormDesigner/components/GridFieldPreview.tsx
+++ b/frontend/src/pages/FormDesigner/components/GridFieldPreview.tsx
@@ -5,19 +5,21 @@
 
 import React from 'react';
 import { Row, Col, Form } from 'antd';
-import type { FieldConfig } from '../types';
+import type { FieldConfig, FormConfig } from '../types';
 import FieldRenderer from './FieldRenderer';
 
 interface GridFieldPreviewProps {
   field: FieldConfig;
   formData?: Record<string, any>;
   onFieldChange?: (name: string, value: any) => void;
+  formConfig?: FormConfig;
 }
 
 const GridFieldPreview: React.FC<GridFieldPreviewProps> = ({ 
   field, 
   formData = {}, 
-  onFieldChange 
+  onFieldChange,
+  formConfig 
 }) => {
   const columns = field.columns || 2;
   const children = field.children || Array(columns).fill([]);
@@ -40,13 +42,19 @@ const GridFieldPreview: React.FC<GridFieldPreviewProps> = ({
       );
     }
 
+    // 根据表单配置决定布局方式
+    const isVertical = formConfig?.labelAlign === 'top';
+    
     // 普通表单字段用 Form.Item 包裹
+    // 栅格内字段：根据对齐方式使用不同的布局
     return (
       <Form.Item
         key={childField.id}
         label={childField.label}
         name={childField.name}
         colon={true}
+        labelCol={isVertical ? { span: 24 } : { span: 8 }}
+        wrapperCol={isVertical ? { span: 24 } : { span: 16 }}
         rules={[
           {
             required: childField.required,