# DataSourceForm 数据源表单组件

基于数据源动态生成表单的组件，支持编辑、查看、禁用等多种模式。

## 功能特点

- 支持多种表单模式：编辑、新增、查看、禁用
- 支持表单标题和描述的显示/隐藏
- 支持分组信息展示位置配置
- 支持服务端和本地数据获取
- 基于 Ant Design Form 组件封装，继承其所有基础特性

## 组件属性

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| title | string | - | 表单标题 |
| description | string | - | 表单描述 |
| dataSource | DataSourceType | - | 数据源配置 |
| showTitle | boolean | true | 是否展示表单标题 |
| showDescription | boolean | true | 是否展示表单描述 |
| groupInfoPosition | 'top' \| 'side' | 'top' | 分组信息位置 |
| variables | any[] | - | 表单变量配置 |
| mode | 'edit' \| 'add' \| 'view' \| 'disabled' \| 'hidden' | - | 表单模式 |
| currentValue | 'server' \| 'local' | - | 表单值获取方式 |
| className | string | - | 自定义类名 |

## 使用示例

### 基础用法

```tsx
import { DataSourceForm } from '@pisell/materials';

const Demo = () => {
  return (
    <DataSourceForm
      title="基础表单"
      description="这是一个基础的数据源表单"
      dataSource={{
        fields: [
          // 表单字段配置
        ]
      }}
      renderMode="add"
      showTitle={true}
      showDescription={true}
      groupInfoPosition="top"
    >
      {/* 表单项内容 */}
    </DataSourceForm>
  );
};
```

### 编辑模式

```tsx
<DataSourceForm
  renderMode="edit"
  currentValue="server"
  dataSource={formDataSource}
  onFinish={(values) => {
    console.log('表单提交：', values);
  }}
/>
```

### 查看模式

```tsx
<DataSourceForm
  renderMode="view"
  currentValue="server"
  dataSource={formDataSource}
/>
```

## 注意事项

1. 在编辑模式下，如果 `currentValue` 设置为 "server"，组件会自动从服务端获取表单数据
2. 表单字段的渲染依赖于 dataSource 中的 fields 配置
3. 组件会自动处理表单值的重置，当 dataSource 发生变化时会触发重置
4. 组件支持表单分组展示，可以通过 groupInfoPosition 控制分组信息的展示位置

## API 参考

### DataSourceFormProps

```typescript
interface DataSourceFormProps {
  title: string;                           // 表单标题
  description: string;                     // 表单描述
  dataSource: DataSourceType;              // 数据源配置
  showTitle: boolean;                      // 是否展示表单标题
  showDescription: boolean;                // 是否展示表单描述
  groupInfoPosition: 'top' | 'side';       // 分组信息位置
  variables: any[];                        // 变量配置
  renderMode?: ModeType;                         // 表单模式
  currentValue?: 'server' | 'local';       // 值获取方式
  children: React.ReactNode;               // 子元素
  className?: string;                      // 自定义类名
}
```

### ModeType

```typescript
type ModeType = 'edit' | 'add' | 'view' | 'disabled' | 'hidden';
``` 