# Card UI（高层规范）

## 1. 背景与目标

当前卡片页（Home/情绪卡片滑动页）右上角需要提供两个入口：

- **切换主题**：在「风景」与「颜色」两种主题间切换
- **个人主页**：以弹窗形式打开个人主页（样式与主题弹窗一致的弹窗体系）

本需求聚焦 **UI 视觉统一** 与 **交互逻辑收敛**，让用户在卡片页可以快速切换主题、进入个人主页设置与通用入口。

### 目标

- **右上角双按钮**：两个圆形图标按钮常驻卡片页右上角
- **主题弹窗**：可选择「风景 / 颜色」两种主题，并即时生效
- **个人主页弹窗**：点击进入个人主页弹窗（与主题弹窗同一套弹窗/遮罩/圆角规范）
- **资源统一**：图标资源使用 `client/assets/images/home/`（`theme.svg`、`my.svg`）

### 非目标（本阶段不做）

- 不引入复杂的主题系统（如多套配色、动态主题下载、远端配置等）
- 不做账号体系/登录注册（个人主页弹窗仅作为本地个人中心入口与设置集合）
- 不做完整的卡片滑动动效重构（仅限卡片页头部与相关弹窗/局部逻辑优化）

## 2. 范围与交付物

### 范围

- 卡片页（Home）头部 UI：右上角两个圆形 icon 按钮
- 主题弹窗：展示两种主题选项（风景/颜色）并支持选择
- 个人主页弹窗：展示个人信息与快捷入口（以弹窗呈现）
- 主题状态：本地持久化 + 启动后读取 + 在卡片页即时反映

### 交付物

- 卡片页头部 UI 更新（两按钮替换/补齐）
- 主题弹窗与个人主页弹窗的 UI 与交互逻辑（共用弹窗规范）
- 主题选择的本地存储 key 约定与读写逻辑
- （可选）补充 i18n key（按钮无文本，但弹窗标题/选项文案需多语言）

## 3. 视觉与交互需求

### 3.1 右上角按钮（主题 / 我的）

- **位置**：卡片页右上角，两个按钮水平排列，间距 8–12（按视觉微调）
- **形状**：圆形按钮，背景为浅色圆底（与现有 UI 风格一致），点击区域需足够大（建议 `hitSlop >= 10`）
- **图标**：
  - 主题：`client/assets/images/home/theme.svg`
  - 我的：`client/assets/images/home/my.svg`
- **点击反馈**：按平台规范（透明度/水波纹）即可

### 3.2 主题弹窗

- **打开方式**：点击右上角「主题」按钮打开
- **样式**：与现有弹窗体系一致（遮罩 + 圆角容器），可做底部弹窗或中间弹窗，需与设计稿一致
- **内容**：
  - 标题：主题
  - 选项：
    - 风景（预览图/缩略图）
    - 颜色（预览图/缩略图）
  - 当前选中项需有明显高亮（描边/勾选/阴影等，按设计稿）
- **交互**：
  - 点击选项即切换主题并立即生效
  - 点击遮罩或关闭按钮关闭弹窗

### 3.3 个人主页弹窗（我的）

- **打开方式**：点击右上角「我的」按钮打开
- **样式**：与主题弹窗同一套弹窗规范（遮罩、圆角、关闭按钮/手势）
- **内容建议（以现有设计为准）**：
  - 顶部区域：头像/插画 + 用户昵称（本地默认名或 onboarding 的 name）
  - 快捷卡片：我的喜欢、小组件（或其他产品定义入口）
  - 通用列表：每日提醒、隐私政策、使用条款、语言
- **交互**：
  - 列表项点击进入对应页面/二级弹窗（实现阶段在 plan/tasks 中细化）
  - 关闭方式同主题弹窗

## 4. 主题逻辑与状态管理

### 4.1 主题类型

- `scenery`：风景主题（以图片/风景背景为主）
- `color`：颜色主题（以纯色/渐变色块为主）

### 4.2 持久化 Key（建议）

- `ui.theme.mode`: `'scenery' | 'color'`

### 4.3 生效范围（建议）

- 最低要求：卡片页背景/卡片背景/主题弹窗预览在切换后 **立即更新**
- 可扩展：全局统一（如 Settings/我的页）在后续版本做全局 Theme Provider

## 5. 验收标准

- 卡片页右上角展示两个圆形图标按钮，点击热区合理
- 点击主题按钮：
  - 打开主题弹窗，显示「风景/颜色」两项
  - 切换后立即生效并持久化，重新进入 App 仍保持上次选择
- 点击我的按钮：
  - 打开个人主页弹窗
  - 弹窗样式（遮罩/圆角/关闭）与主题弹窗一致
- 图标资源从 `client/assets/images/home/` 加载，显示清晰无拉伸

## 6. 风险与注意事项

- **SVG 兼容**：需要确认当前项目 SVG 渲染方案（如 `react-native-svg` / `expo` 方案），避免不同平台显示差异
- **路由与弹窗体系**：若使用 `expo-router` 的 `Stack` modal，需要统一交互（遮罩、圆角、返回手势）以匹配设计
- **多语言**：弹窗标题、列表项文案需走 i18n（`zh-CN/en/es/pt/zh-TW`）