# fba-app LLMs.txt

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

## 模块定位

content只在第一次弹起时，执行一次

## 导入方式

```ts
import { FbaApp } from '@flatbiz/antd/fba-app';
// 也可以从主入口导入：import { ... } from '@flatbiz/antd';
```

## 公开导出

- `FbaAppContext`
- `FbaAppContextApi`
- `FbaAppAlert`
- `FbaAppAlertProps`
- `FbaAppConfirm`
- `FbaAppConfirmProps`
- `FbaAppDrawer`
- `FbaAppDrawerProps`
- `FbaAppLoading`
- `FbaAppLoadingProps`
- `FbaAppModal`
- `FbaAppModalProps`
- `useDialogDrawer` - 不支持多个弹框，第二个弹框可使用useDialogDrawer2
- `useDialogDrawer2` - 不支持多个弹框，第二个弹框可使用useDialogDrawer2
- `useDialogModal` - 不支持多个弹框，第二个弹框可使用useDialogModal2
- `useDialogModal2` - 不支持多个弹框
- `useDialogAlert` - 不支持多个弹框
- `useDialogConfirm` - 不支持多个弹框
- `useDialogLoading` - 不支持多个弹框
- `FbaApp`

## 依赖的 antd 能力

`Drawer`、`DrawerProps`、`Form`、`FormInstance`、`Modal`、`ModalProps`、`Space`、`theme`

## Props / 配置要点

### FbaAppAlertProps

- `onClick`（可选）：: (e: React.MouseEvent<HTMLElement>) => void | Promise<void>

### FbaAppConfirmProps

- 声明：`export type FbaAppConfirmProps = FbaAppModalProps;`

### FbaAppDrawerProps

- `okText`（可选）：: string | ReactElement
- `cancelText`（可选）：: string | ReactElement
- `onOk`（可选）：: ( form: FormInstance, e: React.MouseEvent<HTMLElement> ) => void | Promise<void>
- `onCancel`（可选）：: ( form: FormInstance, e: React.MouseEvent<HTMLElement> ) => void | Promise<void>
- `content`（必填）：: | string | ReactElement | (( form: FormInstance, operate: { onClose: DrawerProps['onClose'] } ) => ReactElement)；content只在第一次弹起时，执行一次
- `okButtonExtraProps`（可选）：: Omit< ButtonWrapperProps, 'onClick' | 'children' | 'loading' >
- `cancelButtonExtraProps`（可选）：: Omit<ButtonWrapperProps, 'onClick' | 'children'>
- `okHidden`（可选）：: boolean
- `cancelHidden`（可选）：: boolean
- `operatePosition`（可选）：: 'header' | 'footer'；设置操作区域位置
- `extra`（可选）：: ReactNode | ((form: FormInstance) => ReactElement)；右上角自定义内容，如果operatePosition=header，此设置无效
- `operateRender`（可选）：: ( form: FormInstance, extraData?: TPlainObject ) => ReactElement

### FbaAppLoadingProps

- `className`（可选）：: string
- `message`（可选）：: string
- `mask`（可选）：: boolean

### FbaAppModalProps

- `size`（可选）：: 'small' | 'middle' | 'large' | null；内置尺寸，根据比例固定高度、宽度
- `onOk`（可选）：: ( form: FormInstance, e: React.MouseEvent<HTMLElement> ) => void | Promise<void>
- `onCancel`（可选）：: ( form: FormInstance, e: React.MouseEvent<HTMLElement> ) => void | Promise<void>
- `onClose`（可选）：: () => void
- `content`（必填）：: | string | ReactElement | ((form: FormInstance, operate: { onClose: TNoopDefine }) => ReactElement)；content只在第一次弹起时，执行一次
- `okHidden`（可选）：: boolean
- `cancelHidden`（可选）：: boolean
- `okButtonProps`（可选）：: Omit<ButtonWrapperProps, 'hidden' | 'children' | 'onClick'>
- `cancelButtonProps`（可选）：: Omit< ButtonWrapperProps, 'hidden' | 'children' | 'onClick' >
- `bodyHeightPercent`（可选）：: number；设置modal body height 为当前窗口height的百分比，例如：30 @deprecated 已失效，可通过size属性设置
- `titleExtra`（可选）：: ReactElement
- `footer`（可选）：: | null | ReactElement | ReactElement[] | ((form: FormInstance, extraData?: TPlainObject) => ReactElement)；null则隐藏footer
- `bodyHeight`（可选）：: number；内容高度，为styles.body.height快捷配置，优先级低于styles.body.height

## 使用规则与行为

- 重新渲染footer
- content只在第一次弹起时，执行一次
- 设置操作区域位置
- 右上角自定义内容，如果operatePosition=header，此设置无效
- 内置尺寸，根据比例固定高度、宽度
- 设置modal body height 为当前窗口height的百分比，例如：30 @deprecated 已失效，可通过size属性设置
- null则隐藏footer
- 内容高度，为styles.body.height快捷配置，优先级低于styles.body.height
- 不支持多个弹框，第二个弹框可使用useDialogDrawer2
- 重新渲染 footer， data为携带的数据，是footer的第二个参数

## 基础示例

```tsx
import { FbaApp, type FbaAppAlertProps } from '@flatbiz/antd/fba-app';

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

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

## 源码索引

- `src/fba-app/context.ts`
- `src/fba-app/dialog-alert/index.tsx`
- `src/fba-app/dialog-confirm/index.tsx`
- `src/fba-app/dialog-drawer/context.ts`
- `src/fba-app/dialog-drawer/index.tsx`
- `src/fba-app/dialog-loading/index.tsx`
- `src/fba-app/dialog-modal/context.ts`
- `src/fba-app/dialog-modal/index.tsx`
- `src/fba-app/fba-app.tsx`
- `src/fba-app/index.ts`

## 给 LLM 的注意事项

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