Modal Component · UI Design System

🎨 3 个 variant

Variant 1 · 信息提示（成功 / 普通通知）

Variant 2 · 确认操作（危险 / 删除 / 不可逆）

Variant 3 · 自定义内容（表单 / 长内容）

📐 Spec Details

Overlay 背景

rgba(0,0,0,0.5) + backdrop-blur

Modal 最大宽度

420px

Modal 最大高度

90vh

圆角

12px

阴影

0 20px 60px rgba(0,0,0,0.45)

进入动画

scale + opacity 0.3s

z-index

1100

Padding header

20px 24px

Padding body

24px

Padding footer

16px 24px 20px

🎯 使用规则

信息提示：操作成功 / 普通通知 · 用 Yellow 主 CTA
确认操作（危险）：删除 / 不可逆操作 · 用 Red 主 CTA + danger body
自定义内容：表单 / 长内容 / 多步骤
必须阻断主操作：点击 overlay 关闭 OR 主 CTA 触发
ARIA：role="dialog" + aria-modal="true" + aria-labelledby
键盘：ESC 关闭 · Tab focus trap
滚动：body 锁定滚动，避免背景跟随
不要嵌套：modal 里不要再开 modal

🪟 Modal · Header / Footer slots

从 Figma 「弹窗顶部导航」「弹窗底部输入框」共 28 次实例抽取。带 header navigation 与 footer input slot 的复合型 Modal。

① 弹窗带顶部导航

② 弹窗带底部输入框

③ 全功能型 · Header + Footer

📐 规范

Header 高度

48px · 标题居中 · 字号 16/Semi Bold

Footer 高度

input 区 56px · action 区 64px

Header 分割

1px Border-Divider

Footer 安全区

移动端底部 + env(safe-area-inset-bottom)

Modal · 模态对话框