# FormPreviewModal 组件

## 概述

表单预览弹窗组件，用于在工作流设计页面预览与工作流关联的启动表单。

## 功能特性

- ✅ 自动读取工作流关联的表单定义数据
- ✅ 使用 FormRenderer 组件渲染表单
- ✅ 只读预览模式（不显示提交/取消按钮）
- ✅ 显示表单基本信息（名称、描述、标识、版本、状态）
- ✅ 响应式弹窗尺寸（max-w-5xl）
- ✅ 支持滚动查看长表单

## 使用方式

### 1. 在工作流设计页面自动加载

当进入工作流设计页面时，如果工作流关联了启动表单（`formDefinitionId`），系统会自动：

1. 调用 `/api/v1/form-definitions/{id}` 接口获取表单定义数据
2. 将数据存储在 `formDefinition` 状态中
3. 在工具栏显示"预览表单"按钮（只有关联表单时才显示）

### 2. 点击预览按钮

用户点击"预览表单"按钮后，会打开弹窗显示表单预览。

## 数据流

```typescript
// 1. 加载工作流时自动查询表单数据
if (data.definition?.formDefinitionId) {
    const formDef = await getFormDefinitionById(data.definition.formDefinitionId);
    setFormDefinition(formDef);
}

// 2. 点击预览按钮
const handlePreviewForm = () => {
    if (!formDefinition) {
        message.warning('当前工作流未关联启动表单');
        return;
    }
    setFormPreviewVisible(true);
};

// 3. 渲染预览弹窗
<FormPreviewModal
    open={formPreviewVisible}
    onClose={() => setFormPreviewVisible(false)}
    formDefinition={formDefinition}
/>
```

## Props

| 属性 | 类型 | 必填 | 说明 |
|------|------|------|------|
| `open` | `boolean` | 是 | 控制弹窗显示/隐藏 |
| `onClose` | `() => void` | 是 | 关闭弹窗的回调函数 |
| `formDefinition` | `FormDefinitionResponse \| null` | 是 | 表单定义数据 |

## 表单定义数据结构

```typescript
interface FormDefinitionResponse {
    id: number;
    name: string;                    // 表单名称
    key: string;                     // 表单标识
    formVersion: number;             // 表单版本号
    categoryId?: number;             // 分类ID
    description?: string;            // 表单描述
    schema: FormSchema;              // 表单Schema（包含fields和formConfig）
    status: 'DRAFT' | 'PUBLISHED' | 'DISABLED';  // 表单状态
    isTemplate: boolean;             // 是否为模板
    // ... 其他基础字段
}
```

## FormRenderer 配置

预览模式下的 FormRenderer 配置：

```typescript
<FormRenderer
    schema={formDefinition.schema}   // 表单Schema
    readonly={false}                 // 可交互（但不提交）
    showSubmit={false}               // 不显示提交按钮
    showCancel={false}               // 不显示取消按钮
/>
```

## UI 展示

弹窗包含以下部分：

1. **标题栏**：显示表单名称和描述
2. **表单内容区**：使用 FormRenderer 渲染的表单
3. **底部信息栏**：显示表单标识、版本、状态等元数据

## 样式特性

- 弹窗最大宽度：`max-w-5xl`（适配大表单）
- 弹窗最大高度：`max-h-[90vh]`（适配屏幕）
- 内容区可滚动：`overflow-y-auto`
- 状态颜色：
  - 已发布：绿色（`text-green-600`）
  - 草稿：黄色（`text-yellow-600`）
  - 其他：灰色（`text-gray-600`）

## 未来扩展

可能的功能扩展方向：

- [ ] 支持表单数据填写和本地保存
- [ ] 支持导出表单数据为 JSON
- [ ] 支持全屏预览模式
- [ ] 支持打印表单
- [ ] 支持分享表单预览链接

## 注意事项

1. 只有在工作流关联了启动表单时，"预览表单"按钮才会显示
2. 表单数据在进入页面时自动加载，无需手动刷新
3. 预览模式下表单是可交互的，但不会实际提交数据
4. 如果表单定义数据加载失败，会在控制台输出错误信息

