Modal
模态对话框，严格镜像 Semi Design。DOM：.cd-modal-fixed > .cd-modal-mask + .cd-modal-wrap(role=none 滚动/遮罩点击) > .cd-modal(尺寸壳) > .cd-modal-content(role=dialog aria-modal)。API 对齐 Semi 名：visible/closeOnEsc/getPopupContainer/afterClose/motion/okType(5 种)/size(small|medium|large|full-width)/header(Snippet)/footerFill 等。关闭按钮用 IconButton + IconClose（@chenzy-design/icons），标题用 Typography.Title heading=5。受控 visible 不回写，仅 onVisibleChange/onCancel 通知。命令式工厂 Modal.confirm/info/success/warning/error（异步 onOk 自动 loading）+ Modal.destroyAll + Modal.useModal（配合 ModalContextHolder 继承 context）。可拖拽经 modalRender + DragMove（对齐 Semi）。堆叠 z-index 由模块级计数器分配（声明式与命令式共享）。
如何引入
import { Modal } from '@chenzy-design/svelte';基本
通过 visible 控制显隐，onOk / onCancel 处理确认与取消，afterClose 在完全关闭后回调。
底部撑满
设置 footerFill 为 true 可使 Modal footer 底部按钮撑满排列。
点击遮罩层不可关闭
修改 maskClosable 为 false 则不可通过点击遮罩层来关闭对话框。
自定义按钮文字
通过 okText 与 cancelText 属性可自定义按钮显示的文字。
自定义按钮属性
通过 okButtonProps 与 cancelButtonProps 属性可自定义按钮的属性（size / type / disabled 等）。
自定义对话框头部和页脚
通过 header 自定义头部（设为 null 不展示），footer 自定义页脚按钮（设为 null 不展示）。
自定义对话框的样式
通过 style 自定义位置（如 top），centered 居中显示，maskStyle 自定义遮罩，bodyStyle 自定义内容样式。
自定义的对话框
灵活使用 header / footer 等属性实现完全自定义的对话框。
全屏 Modal
使用 fullScreen 可以开启全屏对话框（会覆盖 width / height）。
命令式调用
使用 Modal.confirm / info / success / warning / error 命令式弹出，支持自定义 icon 及所有 Modal props。
Hooks 用法
通过 Modal.useModal 创建 [modal, holder]，配合 <ModalContextHolder> 让命令式弹窗继承 context（如 LocaleProvider）。
可拖拽 Modal
通过 modalRender 自定义渲染 Modal 内容，用 DragMove 组件包裹实现可拖拽。
API 参考
Modal
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
visible | 对话框是否可见（受控；受控时不回写） | boolean | undefined |
title | 标题文案 | string | undefined |
header | 自定义头部，null 不展示头部 | Snippet | null | undefined |
width | 宽度 | number | string | 448 |
height | 高度 | number | string | undefined |
size | 预设宽度：small(448) / medium(684) / large(920) / full-width(100vw-64px) | 'small' | 'medium' | 'large' | 'full-width' | undefined |
centered | 垂直居中 | boolean | false |
closable | 右上角关闭按钮 | boolean | true |
closeIcon | 自定义关闭图标 | Snippet | undefined |
maskClosable | 点遮罩关闭 | boolean | true |
closeOnEsc | Esc 关闭 | boolean | true |
confirmLoading | 确认按钮 loading | boolean | false |
okText | 确认按钮文字 | string | undefined |
cancelText | 取消按钮文字 | string | undefined |
okType | 确认按钮类型 | 'primary'|'secondary'|'tertiary'|'warning'|'danger' | 'primary' |
okButtonProps | 确认按钮额外 props | Record<string, unknown> | undefined |
cancelButtonProps | 取消按钮额外 props | Record<string, unknown> | undefined |
hasCancel | 是否显示取消按钮 | boolean | true |
footer | null 隐藏默认按钮；snippet 自定义尾部（接收 { ok, cancel }） | Snippet<[{ ok; cancel }]> | null | undefined |
footerFill | 底部按钮撑满 | boolean | false |
mask | 是否显示遮罩 | boolean | true |
maskStyle | 遮罩内联样式 | string | undefined |
bodyStyle | 内容区内联样式 | string | undefined |
style | 根节点内联样式（如 top） | string | undefined |
class | 根节点类名 | string | undefined |
modalContentClass | 内容区类名 | string | undefined |
fullScreen | 全屏（覆盖 width/height） | boolean | false |
motion | 动画开关 | boolean | true |
getPopupContainer | 指定父级 DOM，缺省 document.body | () => HTMLElement | null | undefined |
zIndex | 遮罩/面板的 z-index（缺省由堆叠计数分配） | number | undefined |
keepDOM | 关闭时保留内部组件不销毁 | boolean | false |
lazyRender | 配合 keepDOM，为 true 时挂载时不渲染 | boolean | true |
icon | 命令式类型图标 | Snippet | undefined |
modalRender | 自定义渲染 Modal content；接收默认 content Snippet，返回包裹结构（可拖拽经此 + DragMove） | Snippet<[Snippet]> | undefined |
children | 内容主体 | Snippet | undefined |
ariaLabel | 无 title 时的 aria-label | string | undefined |
onOk | 点击确认 | () => void | undefined |
onCancel | 取消/关闭 | () => void | undefined |
afterClose | 对话框完全关闭后回调 | () => void | undefined |
onVisibleChange | 显隐变化通知 | (visible: boolean) => void | undefined |
maskFixed | 遮罩是否 position:fixed；false 时 absolute，配合 getPopupContainer 局部弹层 | boolean | true |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onOk | — | 确认按钮点击（非受控自动关闭） |
onCancel | — | 取消/关闭按钮/遮罩/Esc 关闭 |
onVisibleChange | — | 显隐变化通知 |
afterClose | — | 完全关闭后 |
Slots
| 名称 | 说明 |
|---|---|
children | 内容主体 |
header | 自定义头部（null 不展示） |
footer | 自定义尾部（接收 { ok, cancel }） |
closeIcon | 自定义关闭图标 |
icon | 命令式类型图标 |
modalRender | 自定义渲染 content（可拖拽） |
Methods
| 属性 | 类型 | 说明 |
|---|---|---|
Modal.info / success / error / warning / confirm | (config) => { destroy, update } | 命令式弹出，异步 onOk 自动 loading |
Modal.destroyAll | () => void | 销毁所有命令式弹窗 |
Modal.useModal | () => [modal, holder] | 返回命令式 api + holder，配合 <ModalContextHolder> 继承 context |
Accessibility
- role=dialog + aria-modal=true；有 title 用 aria-labelledby 指向 Typography.Title，无则 aria-label；aria-describedby 指向 body；useFocusTrap 捕获 Tab 并在关闭时归还触发元素；closeOnEsc 控制 Esc；useScrollLock 锁背景滚动；背景 inert；关闭按钮 IconButton 有 aria-label；motion 关闭过渡受 prefers-reduced-motion 抑制。
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-color-modal-bg | var(--cd-color-bg-2) | 模态框背景颜色 |
--cd-color-modal-content-border | var(--cd-color-border) | 模态框描边颜色 |
--cd-color-modal-danger-icon | var(--cd-color-danger) | 模态框危险图标颜色 |
--cd-color-modal-footer-bg | transparent | 模态框 footer 背景填充色 |
--cd-color-modal-footer-border | transparent | 模态框 footer 顶部描边颜色 |
--cd-color-modal-header-bg | transparent | 模态框 header 背景填充色 |
--cd-color-modal-header-border | transparent | 模态框 header 底部描边颜色 |
--cd-color-modal-info-icon | var(--cd-color-info) | 模态框信息图标颜色 |
--cd-color-modal-main-text | var(--cd-color-text-0) | 模态框文字颜色 |
--cd-color-modal-mask-bg | var(--cd-color-overlay-bg) | 模态框蒙层颜色 |