表单设计器

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,

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,