Dialog 对话框

模态对话框，需要用户响应

---

功能描述

在屏幕中央显示的模态对话框，用于需要用户确认或输入的场景。

---

属性规范

属性	类型	必需	默认值	说明
open	boolean	Y	-	是否打开
onOpenChange	(open) => void	Y	-	状态变更回调
title	string	Y	-	标题
description	string	N	-	描述文本
children	node	N	-	自定义内容
actions	Action[]	N	-	操作按钮

Action 结构

Action {
  label: string
  variant: 'primary' | 'secondary' | 'destructive'
  onClick: () => void
  loading?: boolean
}

---

行为规范

必须 (MUST)

1. 显示半透明背景遮罩
2. 居中显示
3. 有打开/关闭动画（淡入淡出 + 缩放）
4. 按钮区域固定在底部

建议 (SHOULD)

1. 点击遮罩不关闭（需要明确操作）
2. 破坏性操作按钮放在右侧
3. 取消按钮使用 secondary 变体

可选 (MAY)

1. 支持自定义宽度
2. 支持关闭按钮（X）

---

可访问性

要求	说明
role	alertdialog（警告类）或 dialog（普通）
aria-modal	true
aria-labelledby	关联标题
aria-describedby	关联描述
焦点陷阱	焦点限制在 Dialog 内
ESC 键	关闭（如果允许）

---

布局规范

┌───────────────────────────────────────┐
│                [遮罩]                 │
│   ┌───────────────────────────────┐   │
│   │            标题               │   │
│   │            描述               │   │
│   ├───────────────────────────────┤   │
│   │                               │   │
│   │         自定义内容            │   │
│   │                               │   │
│   ├───────────────────────────────┤   │
│   │      [取消]      [确认]       │   │
│   └───────────────────────────────┘   │
│                                       │
└───────────────────────────────────────┘

---

设计标注

尺寸规格

部分	规格
宽度	min(90vw, 320px)
圆角	16px
内边距	24px
按钮间距	12px

动画规格

属性	值
时长	200ms
缓动	ease-out
打开	scale 0.95 → 1, opacity 0 → 1
关闭	scale 1 → 0.95, opacity 1 → 0

---

预设变体

AlertDialog 警告对话框

用于危险操作确认：

┌───────────────────────────────────┐
│          确认删除钱包？            │
│                                   │
│  删除后将无法恢复，请确保已备份    │
│  助记词。                         │
│                                   │
│      [取消]      [删除]           │
└───────────────────────────────────┘

• title: 必需
• description: 建议提供
• actions: 取消 + 危险操作

ConfirmDialog 确认对话框

用于普通确认：

┌───────────────────────────────────┐
│          确认发送？               │
│                                   │
│  发送 1.5 ETH 到                 │
│  0x1234...5678                   │
│                                   │
│      [取消]      [确认]           │
└───────────────────────────────────┘

PromptDialog 输入对话框

用于简单输入：

┌───────────────────────────────────┐
│          重命名钱包               │
│                                   │
│  ┌─────────────────────────────┐ │
│  │ 新钱包名称                   │ │
│  └─────────────────────────────┘ │
│                                   │
│      [取消]      [确认]           │
└───────────────────────────────────┘