Modal 模态框

Modal 现在保持 Rue 自己的视觉风格，同时提供了更完整的显隐控制、默认 footer、异步确认、遮罩交互、挂载策略与 root/mask/wrapper 级别的语义化定制能力。

# Controlled modal

展示基础受控用法：通过 `open` 和 `onClose` 管理显隐，默认 footer 会自动提供关闭按钮。

点击按钮后会显示受控模态框，并通过默认关闭按钮或右上角关闭图标收起。

# Maskless modal and layer hooks

`mask={false}` 会真正移除遮罩层；需要精细控制时可继续配合 `rootStyle`、`wrapClassName` 与语义化 `classNames/styles`。

当前示例关闭了遮罩视觉，因此背景保持可见，点击外层空白区域也不会触发关闭。

# Modal with custom actions

基础 `actions` 仍然可用，适合把自定义按钮组插到 footer 里，同时保持默认关闭按钮。

可以使用 `actions` 支持基础示例，同时切换到新的 `footer` API。

# Wide modal box

基础宽弹层示例保持，同时也可以配合 `width` 使用更偏语义化的尺寸写法。

通过 `className` 直接扩展 modal-box 宽度和排版，基础写法完整提供。

# Default footer with async confirm

更贴近常见业务弹窗的用法：给 `onOk/onCancel` 和 `confirmLoading` 即可得到默认确认 footer。

默认 footer 会自动生成取消/确认按钮，并把 `confirmLoading` 映射到确认按钮。

# Footer render and centered layout

通过 `centered`、`width`、语义化 className 和 `footer(originNode => ...)`，可以在不改动视觉体系的前提下重组结构。

`footer` 支持函数式包裹默认 footer，适合在两端插入说明信息或额外操作。

# API

支持如下的命令式弹窗：`Modal.confirm/info/success/warning/error` 会直接打开弹窗，并返回可 `update/destroy` 的实例。

等待命令式弹窗操作。

# Keep mounted content

需要在关闭后保持 DOM 状态时，可以开启 `forceRender` + `destroyOnHidden={false}`。

在文本框里输入内容，关闭后再次打开，未提交的草稿仍会保持。

以下列出当前设计页覆盖到的主要 `Modal` 能力。

属性	说明	类型	默认值
`open`	受控显隐。	`boolean`	`false`
`defaultOpen`	非受控初始打开状态。	`boolean`	`false`
`title`	标题区域内容。	`any`	`-`
`footer`	自定义 footer；传 `null` 可隐藏；也支持函数包裹默认 footer。	`any \| (originNode) => any`	`-`
`actions`	基础动作区写法，会展示基础“自定义动作 + 默认关闭按钮”行为。	`any`	`-`
`onOk / onCancel / onClose`	确认、取消与关闭回调。	`function`	`-`
`confirmLoading`	让默认确认按钮进入 loading 态。	`boolean`	`false`
`loading`	主体切换到骨架占位态，并临时隐藏 footer。	`boolean`	`false`
`okText / cancelText / okType`	默认 footer 的按钮文案与确认按钮类型。	`any / any / ButtonType`	`确定` / 自动 / `primary`
`width / className`	设置 modal-box 宽度；`className` 仍直接追加到 box。	`string \| number / string`	`-`
`rootStyle / wrapClassName / wrapProps / maskClassName / maskStyle`	分别定制根层、wrapper 和遮罩层；`mask={false}` 时不会渲染遮罩节点。	`style / string / object / string / style`	`-`
`centered`	垂直居中。	`boolean`	`false`
`mask / maskClosable / keyboard`	控制遮罩显示、点击遮罩关闭与 ESC 关闭。	`boolean`	`true / true / true`
`closable / closeIcon`	右上角关闭按钮与自定义关闭图标。	`boolean / any`	`true / 默认图标`
`forceRender / destroyOnHidden`	控制关闭后是否保持内容挂载。	`boolean / boolean`	`false / true`
`destroyOnClose / getContainer`	别名，并支持通过 Teleport 把弹层渲染到指定容器。	`boolean / string \| HTMLElement \| (() => HTMLElement) \| false`	`- / false`
`bodyClassName / headerClassName / footerClassName`	分别定制头部、主体、底部区域类名。	`string`	`-`
`classNames / styles`	按语义分区覆盖 root/mask/wrapper/container/box/header/title/body/footer/close。	`object`	`-`
`modalRender`	接管最终弹层节点的二次包裹。	`(node) => any`	`-`
`afterOpenChange / afterClose`	显隐变化后的钩子。	`function`	`-`
`Modal.confirm / info / success / warning / error`	命令式打开确认或反馈弹窗；返回实例支持 `update` 与 `destroy`。	`(config) => ModalFuncHandle`	`-`
`Modal.open / Modal.destroyAll / Modal.useModal`	通用命令式入口、销毁所有命令式弹窗，以及局部 holder 实例。	`function`	`-`

FAQ

什么时候用 `actions`，什么时候用 `footer`？如果你在接入项目代码，可以直接用 `actions` 即可；新代码优先用 `footer`，它可以完全接管 footer，也可以用函数包装默认 footer。

`className`、`bodyClassName` 和 `classNames` 怎么选？`className` 仍直接追加到modal-box；只想改某个区域时优先用bodyClassName/headerClassName/footerClassName；需要更细粒度统一配置时再用 classNames。

为什么保持 `destroyOnHidden` 默认关闭即卸载？这是为了支持 Rue 当前组件行为；当你确实需要保持 DOM 状态时，再显式开启forceRender与destroyOnHidden={false}。