增加审批组件

frontend/src/components/FormDesigner/Designer.tsx

@@ -43,7 +43,7 @@ import { arrayMove } from '@dnd-kit/sortable';
 import ComponentPanel from './components/ComponentPanel';
 import DesignCanvas from './components/DesignCanvas';
 import PropertyPanel from './components/PropertyPanel';
-import FormPreview, { type FormPreviewRef } from './components/FormPreview';
+import FormPreview, { type FormPreviewRef } from './Preview';
 import { COMPONENT_LIST } from './config';
 import type { FieldConfig, FormConfig, FormSchema } from './types';
 import type { ComponentMeta } from './config';

frontend/src/components/FormDesigner/Preview.tsx

@@ -1,24 +1,62 @@
 /**
  * 表单预览组件
- * 预览设计好的表单效果
+ * 独立的表单预览组件，支持完整的表单交互和验证
+ * 
+ * 特点：
+ * - ✅ 完全独立，可在任何地方使用
+ * - ✅ 支持所有表单字段类型
+ * - ✅ 支持验证规则和联动规则
+ * - ✅ 支持动态数据源（API、预定义）
+ * - ✅ 非受控组件，内部管理状态
+ * 
+ * @example
+ * ```tsx
+ * // 使用示例
+ * import { FormPreview, FormPreviewRef } from '@/components/FormDesigner';
+ * 
+ * const MyComponent = () => {
+ *   const previewRef = useRef<FormPreviewRef>(null);
+ *   
+ *   // 从后端获取表单定义
+ *   const formSchema = await getFormDefinitionById(id);
+ *   
+ *   return (
+ *     <FormPreview 
+ *       ref={previewRef}
+ *       fields={formSchema.fields}
+ *       formConfig={formSchema.formConfig}
+ *     />
+ *   );
+ * };
+ * ```
  */
 
 import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react';
 import { Form, message } from 'antd';
 import type { Rule } from 'antd/es/form';
 import dayjs from 'dayjs';
-import type { FieldConfig, FormConfig, ValidationRule, LinkageRule } from '../types';
-import FieldRenderer from './FieldRenderer';
-import GridFieldPreview from './GridFieldPreview';
-import '../styles.css';
+import type { FieldConfig, FormConfig, ValidationRule, LinkageRule } from './types';
+import FieldRenderer from './components/FieldRenderer';
+import GridFieldPreview from './components/GridFieldPreview';
+import './styles.css';
 
-interface FormPreviewProps {
+/**
+ * 表单预览组件的 Props
+ */
+export interface FormPreviewProps {
+  /** 字段列表 */
   fields: FieldConfig[];
+  /** 表单配置 */
   formConfig: FormConfig;
 }
 
+/**
+ * 表单预览组件暴露的方法
+ */
 export interface FormPreviewRef {
+  /** 提交表单（触发验证） */
   submit: () => Promise<void>;
+  /** 重置表单 */
   reset: () => void;
 }
 

frontend/src/components/FormDesigner/index.tsx

@@ -1,14 +1,18 @@
 /**
  * 表单设计器组件库入口
  * 
- * 提供两个核心组件：
+ * 提供三个核心组件：
  * 1. FormDesigner - 设计时组件，用于可视化设计表单
- * 2. FormRenderer - 运行时组件，用于渲染和提交表单
+ * 2. FormPreview - 预览组件，用于预览和交互表单（推荐）
+ * 3. FormRenderer - 运行时组件，用于渲染和提交表单（已废弃，建议使用 FormPreview）
  */
 
 export { default as FormDesigner } from './Designer';
 export type { FormDesignerProps } from './Designer';
 
+export { default as FormPreview } from './Preview';
+export type { FormPreviewProps, FormPreviewRef } from './Preview';
+
 export { default as FormRenderer } from './Renderer';
 export type { FormRendererProps } from './Renderer';
 

frontend/src/pages/Workflow/Design/components/FormPreviewModal.tsx

@@ -4,13 +4,8 @@
  */
 
 import React from 'react';
-import {
-    Dialog,
-    DialogContent,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
-import { FormRenderer } from '@/components/FormDesigner';
+import { Modal } from 'antd';
+import { FormPreview } from '@/components/FormDesigner';
 import type { FormDefinitionResponse } from '@/pages/Form/Definition/types';
 
 interface FormPreviewModalProps {
@@ -28,48 +23,29 @@ const FormPreviewModal: React.FC<FormPreviewModalProps> = ({
         return null;
     }
 
+    const { schema } = formDefinition;
+
     return (
-        <Dialog open={open} onOpenChange={onClose}>
-            <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto">
-                <DialogHeader>
-                    <DialogTitle>
-                        预览表单：{formDefinition.name}
-                        {formDefinition.description && (
-                            <span className="text-sm font-normal text-muted-foreground ml-2">
-                                {formDefinition.description}
-                            </span>
-                        )}
-                    </DialogTitle>
-                </DialogHeader>
-                
-                <div className="py-4">
-                    <FormRenderer
-                        schema={formDefinition.schema}
-                        readonly={false}
-                        showSubmit={false}
-                        showCancel={false}
+        <Modal
+            title={`预览表单：${formDefinition.name}`}
+            open={open}
+            onCancel={onClose}
+            footer={null}
+            width={schema.formConfig.formWidth || 600}
+            styles={{
+                body: {
+                    maxHeight: '70vh',
+                    overflowY: 'auto',
+                    padding: 0,
+                }
+            }}
+        >
+            <FormPreview
+                fields={schema.fields}
+                formConfig={schema.formConfig}
             />
-                </div>
-                
-                <div className="text-xs text-muted-foreground border-t pt-3 space-y-1">
-                    <div>表单标识：{formDefinition.key}</div>
-                    <div>表单版本：v{formDefinition.formVersion}</div>
-                    <div>状态：
-                        <span className={`ml-1 ${
-                            formDefinition.status === 'PUBLISHED' ? 'text-green-600' :
-                            formDefinition.status === 'DRAFT' ? 'text-yellow-600' :
-                            'text-gray-600'
-                        }`}>
-                            {formDefinition.status === 'PUBLISHED' ? '已发布' :
-                             formDefinition.status === 'DRAFT' ? '草稿' :
-                             formDefinition.status}
-                        </span>
-                    </div>
-                </div>
-            </DialogContent>
-        </Dialog>
+        </Modal>
     );
 };
 
 export default FormPreviewModal;
-