Card 卡片
内容容器，提供视觉分组
功能描述
用于将相关内容组织在一起的容器组件，提供视觉边界和层次感。
属性规范
| 属性 | 类型 | 必需 | 默认值 | 说明 |
|---|---|---|---|---|
| children | node | Y | - | 卡片内容 |
| variant | enum | N | 'default' | 视觉变体 |
| pressable | boolean | N | false | 是否可点击 |
| onPress | () => void | N | - | 点击回调 |
| padding | enum | N | 'md' | 内边距 |
variant 变体
| 值 | 说明 | 使用场景 |
|---|---|---|
| default | 有背景色，无边框 | 常规内容卡片 |
| outline | 有边框，透明背景 | 选择项、列表项 |
| elevated | 有阴影，强调层次 | 悬浮卡片、重要内容 |
| ghost | 无边框无背景 | 仅作为分组容器 |
padding 内边距
| 值 | 规格 | 使用场景 |
|---|---|---|
| none | 0 | 完全自定义 |
| sm | 12px | 紧凑布局 |
| md | 16px | 默认 |
| lg | 24px | 宽松布局 |
行为规范
必须 (MUST)
- 提供明确的视觉边界
- pressable=true 时响应点击事件
- pressable=true 时有按压反馈
建议 (SHOULD)
- pressable=true 时 cursor 为 pointer
- 内容溢出时正确处理（裁剪或滚动）
可选 (MAY)
- 支持渐变背景
- 支持自定义边框颜色
可访问性
| 场景 | 要求 |
|---|---|
| pressable=true | role="button"，可通过键盘触发 |
| 包含链接 | 确保链接可单独聚焦 |
组合结构
CardHeader
卡片头部区域，通常包含标题和操作。
┌─────────────────────────────────┐
│ 标题 [操作] │
│ 副标题 │
└─────────────────────────────────┘CardContent
卡片主内容区域。
CardFooter
卡片底部区域，通常包含操作按钮。
┌─────────────────────────────────┐
│ ... │
├─────────────────────────────────┤
│ [取消] [确认] │
└─────────────────────────────────┘设计标注
尺寸规格
| 部分 | 规格 |
|---|---|
| 圆角 | 12px |
| 边框 | 1px（outline 变体） |
| 阴影 | 0 4px 12px rgba(0,0,0,0.1)（elevated 变体） |
颜色规格
| 变体 | 背景色 | 边框色 |
|---|---|---|
| default | --color-card | - |
| outline | transparent | --color-border |
| elevated | --color-card | - |
| ghost | transparent | - |
使用示例
信息卡片
┌─────────────────────────────────┐
│ 总资产 │
│ ¥ 12,345.67 │
│ +2.5% 今日 │
└─────────────────────────────────┘可点击列表项
┌─────────────────────────────────┐
│ [图标] 设置项名称 [→] │ ← pressable, outline
└─────────────────────────────────┘卡片组
多个卡片垂直排列时，间距 SHOULD 为 12px。