# dialog-drag-modal LLMs.txt

> 供 LLM 快速理解 `@flatbiz/antd/dialog-drag-modal` 的使用方式。

## 模块定位

可移动弹框

## 导入方式

```ts
import { dialogDragModal } from '@flatbiz/antd/dialog-drag-modal';
// 也可以从主入口导入：import { ... } from '@flatbiz/antd';
```

## 公开导出

- `dialogDragModal` - 可移动弹框
- `DialogDragModalProps`
- `* from ./drag-modal.jsx`

## 依赖的 antd 能力

`Form`、`FormInstance`、`Space`

## Props / 配置要点

### DialogDragModalProps

- `modalKey`（可选）：: string；相同的modalKey，最多只有一个弹起状态
- `className`（可选）：: string
- `style`（可选）：: CSSProperties
- `styles`（可选）：: { header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; }
- `width`（可选）：: number
- `bodyHeight`（可选）：: number
- `event`（可选）：: React.MouseEvent<HTMLElement>；触发弹起点击事件event，用于计算鼠标位置
- `xOffset`（可选）：: number；定义弹出层距离触发点的x轴偏移量，设置event参数后有效
- `yOffset`（可选）：: number；定义弹出层距离触发点的y轴偏移量，设置event参数后有效
- `title`（可选）：: string
- `okText`（可选）：: string | ReactElement
- `cancelText`（可选）：: string | ReactElement
- `okHidden`（可选）：: boolean
- `cancelHidden`（可选）：: boolean
- `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: TNoopDefine }) => ReactElement)
- `footer`（可选）：: | null | ((form: FormInstance, operate: { onClose: TNoopDefine }) => ReactElement)；覆盖当前footer，自定义操作按钮
- `footerOperateBeforeRender`（可选）：: ( form: FormInstance, operate: { onClose: TNoopDefine } ) => ReactElement；当前footer操作按钮，左侧扩展
- `footerOperateAfterRender`（可选）：: ( form: FormInstance, operate: { onClose: TNoopDefine } ) => ReactElement；当前footer操作按钮，右侧扩展

## 使用规则与行为

- 相同的modalKey，最多只有一个弹起状态
- 触发弹起点击事件event，用于计算鼠标位置
- 定义弹出层距离触发点的x轴偏移量，设置event参数后有效
- 定义弹出层距离触发点的y轴偏移量，设置event参数后有效
- 覆盖当前footer，自定义操作按钮
- 当前footer操作按钮，左侧扩展
- 当前footer操作按钮，右侧扩展
- 可移动弹框

## 基础示例

```tsx
import { dialogDragModal, type DialogDragModalProps } from '@flatbiz/antd/dialog-drag-modal';

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

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

## 源码索引

- `src/dialog-drag-modal/drag-modal.tsx`
- `src/dialog-drag-modal/index.ts`

## 给 LLM 的注意事项

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