# editable-card LLMs.txt

> 供 LLM 快速理解 `@flatbiz/antd/editable-card` 的使用方式。

## 模块定位

使用FormList实现可编辑卡片

## 导入方式

```ts
import { EditableCard } from '@flatbiz/antd/editable-card';
// 也可以从主入口导入：import { ... } from '@flatbiz/antd';
```

## 公开导出

- `EditableCard` - 使用FormList实现可编辑卡片
- `* from ./editable-card.jsx`
- `EditableCardDataIndex`
- `EditableCardOperation`
- `EditableCardColumnItem` - 卡片内字段配置
- `EditableCardProps`

## 依赖的 antd 能力

`ConfigProvider`、`Empty`、`Form`、`FormListFieldData`、`FormListOperation`

## Props / 配置要点

### EditableCardDataIndex

- 声明：`export type EditableCardDataIndex = string | string[];`

### EditableCardColumnItem

卡片内字段配置

- `dataIndex`（必填）：: EditableCardDataIndex | undefined；字段key值
- `editable`（必填）：: | boolean | (( operation: Pick<EditableCardOperation, 'index' | 'getCurrentRowData'>, index: number ) => boolean)；是否可编辑
- `gridNumber`（可选）：: number；布局占用网格数目（最大数值24）
- `title`（可选）：: ReactElement | string；标题
- `formItemProps`（可选）：: | Omit<FormItemWrapperProps, 'children' | 'name'> | (( operation: EditableCardOperation ) => Omit<FormItemWrapperProps, 'children' | 'name'>)；Form.Item props
- `render`（可选）：: (operation: EditableCardOperation) => ReactElement；通过 operation.editable 来判断渲染结构，其中render返回的根节点会作为 Form.Item 的children
- `tips`（可选）：: string；会在 title 之后展示一个 icon
- `required`（可选）：: boolean；为表格header中的字段添加必填标识，如果未配置 formItemProps.rules，内部会新增一条required rule
- `hidden`（可选）：: (operation: EditableCardOperation, index: number) => boolean；隐藏域设置
- `remove`（可选）：: (operation: EditableCardOperation, index: number) => boolean；移除设置，优先级高于 hidden
- `formItemContainer`（可选）：: (formItem: ReactElement) => ReactElement | null

### EditableCardProps

- `className`（可选）：: string
- `style`（可选）：: CSSProperties
- `columns`（必填）：: EditableCardColumnItem[]；卡片内字段配置
- `formListCompleteName`（可选）：: Array<string | number>；当前Edittable处在formList内部时（必填），完整formItem的name
- `formListName`（必填）：: Array<string | number> | string；Form.List name
- `initialValue`（可选）：: TPlainObject[]；初始化值
- `rules`（可选）：: FormListProps['rules']；Form.List rules
- `addRowDefaultValues`（可选）：: () => TPlainObject；默认新增按钮新增行默认值，hiddenFooterBtn != true 有效
- `addRowBtnName`（可选）：: ReactNode；自定义新增按钮名称
- `hiddenFooterBtn`（可选）：: boolean；隐藏底部新增按钮
- `hiddenDeleteBtn`（可选）：: boolean；隐藏默认删除按钮
- `contentBeforeRender`（可选）：: ( formListOperation: FormListOperation, nextRowIndex: number ) => ReactElement | null；顶部区域渲染
- `contentAfterRender`（可选）：: ( formListOperation: FormListOperation, nextRowIndex: number ) => ReactElement | null；底部区域渲染
- `onCustomGroupName`（可选）：: (index: number) => string | ReactElement；设置默认卡片名称，设置 onCustomWrapper 后失效
- `onCustomWrapper`（可选）：: ( children: ReactElement, extraData: { operation: FormListOperation; fields: FormListFieldData[]; fieldItem: FormListFieldData; index: number; required?: boo…；自定义卡片包裹，同时可自定义删除按钮、新增按钮
- `required`（可选）：: boolean；设置必填，但只有一条数据时，隐藏默认删除按钮
- `cardClassName`（可选）：: string；默认卡片样式
- `cardStyle`（可选）：: CSSProperties；默认卡片样式
- `cardEasyFormProps`（可选）：: Omit< EasyFormProps, 'nonuseFormWrapper' | 'isPure' | 'children' >；每个卡片内容都使用了 EasyForm 包裹，此处可设置 EasyFormProps
- `boxGridColSpan`（可选）：: number；定义卡片网格水平跨度，最大值：24，默认值：24；设置 onCustomWrapper 后失效
- `cardExtraRender`（可选）：: (extraData: { operation: FormListOperation; fields: FormListFieldData[]; fieldItem: FormListFieldData; index: number; required?: boolean; key: string; }) => …；默认卡片右侧布局，设置 onCustomWrapper 后失效

## 使用规则与行为

- 使用FormList实现可编辑卡片
- 同一级内移动
- 是否可编辑
- 设置当前卡片指定字段值
- 获取当前卡片表单数据
- 当前卡片表单 name
- 当前卡片表单完整 name
- 当前卡片表单验证，需要自行指定nameList（dataIndex数组）
- 卡片内字段配置
- 字段key值

## 基础示例

```tsx
import { EditableCard, type EditableCardProps } from '@flatbiz/antd/editable-card';

const props: EditableCardProps = {
  // 按业务传入必要参数
};

<EditableCard {...props} />;
```

## 源码索引

- `src/editable-card/editable-card.tsx`
- `src/editable-card/index.ts`
- `src/editable-card/type.ts`

## 给 LLM 的注意事项

- 优先使用 `@flatbiz/antd/editable-card` 或主入口 `@flatbiz/antd` 的公开导出，不要引用内部实现文件。
- 当 Props 与 antd 原组件同名能力冲突时，以本模块导出的 Props 类型为准。
- 若文档未覆盖某个边缘参数，请读取上方源码索引中的类型定义和 JSDoc。