# Card UI（任务清单）

> 说明：本清单根据 `plan.md` 拆解，要求“可执行、可验收、可标记”。  
> 标记规则：执行完成后将对应项从 `- [ ]` 改为 `- [x]`，并把“状态”改为 **已完成**；进行中改为 **进行中**；阻塞写明原因与解除条件。

## 0. UI 参考（本次实现对齐）

- **参考截图**：你提供的卡片页 + 主题弹窗 + 我的弹窗
- **弹窗内容区背景色**：`#FAF3EC`
- **右上角按钮资源**：`client/assets/images/home/theme.svg`、`client/assets/images/home/my.svg`
- **底部反应按钮资源**：`client/assets/images/home/like.svg`、`client/assets/images/home/hate.svg`
- **交互约束**：
  - 弹窗为**底部上拉（Sheet）**
  - 关闭方式：**点 X 关闭**（不要求点遮罩关闭）
  - 顶部按钮使用**系统导航栏**（`headerRight`）
  - 主题切换最少影响：**页面背景**
  - 个人主页弹窗中的列表项：本期允许 **仅做占位**
  - 喜欢动效为**强反馈：心形填满**（按压回弹 + 填充变化）

## 1. 依赖与基础设施（SVG 可 import）

- [x] **安装 `react-native-svg-transformer` 并新增 `client/metro.config.js`**  
  - **状态**：已完成  
  - **原因**：让 `assets/images/home/*.svg` 支持 `import XxxIcon from '...svg'` 作为组件使用  
  - **命令**：

```bash
cd client
pnpm add react-native-svg-transformer
```

  - **实现点**：
    - 新增 `client/metro.config.js`，基于 `expo/metro-config` 配置 `svg` transformer
  - **验收**：
    - 任一页面可成功渲染 `theme.svg`/`like.svg`（真机/模拟器均可）
    - `pnpm start` 正常启动，无 Metro 报错

## 2. 本地存储：主题模式持久化

- [x] **在 `src/storage/appStorage.ts` 新增主题 mode key 与读写方法**  
  - **状态**：已完成  
  - **Key**：`ui.theme.mode`  
  - **类型**：`'scenery' | 'color'`（默认 `scenery`）  
  - **新增 API（建议）**：
    - `getThemeMode(): Promise<'scenery' | 'color'>`
    - `setThemeMode(mode: 'scenery' | 'color'): Promise<void>`
  - **验收**：
    - 代码中不散落硬编码 key
    - 切换主题后重启 App 仍保持上次选择

## 3. 通用组件：底部上拉弹窗（Sheet）框架

- [x] **新增通用 `SheetModal` 组件（底部上拉 + 背景色 #FAF3EC + X 关闭）**  
  - **状态**：已完成  
  - **建议路径**：`client/components/ui/SheetModal.tsx`  
  - **要求**：
    - 遮罩存在（可拦截背景交互），但本期**不要求点遮罩关闭**
    - 内容区背景色固定为 `#FAF3EC`
    - 顶部提供右上/左上 **X 按钮**关闭（以设计稿为准）
    - 基础动效：上滑进入、下滑退出（或淡入淡出 + translateY）
  - **验收**：
    - 任意页面可打开/关闭该弹窗，不闪烁、不穿透点击
    - iOS 安全区适配正常（底部不被 Home Indicator 遮挡）

## 4. 主题弹窗：风景 / 颜色

- [x] **实现 `ThemeModal`（复用 `SheetModal`）**  
  - **状态**：已完成  
  - **建议路径**：`client/components/home/ThemeModal.tsx`  
  - **内容**：
    - 标题：主题
    - 选项：风景 / 颜色（含预览卡片）
    - 选中态：明显高亮（描边/阴影/勾选均可）
  - **交互**：
    - 点击选项：`setThemeMode(...)` 并立即生效（可关闭弹窗或保持打开，按设计稿）
    - 点 X：关闭
  - **验收**：
    - 两种主题可切换
    - 切换后 Home 页面背景立刻变化

## 5. 个人主页弹窗：占位入口

- [x] **实现 `ProfileModal`（复用 `SheetModal`）**  
  - **状态**：已完成  
  - **建议路径**：`client/components/home/ProfileModal.tsx`  
  - **内容（按设计最小闭环）**：
    - 顶部：插画/头像 + 昵称（来自 `getUserProfile().name`，无则占位）
    - 快捷卡片：我的喜欢 / 小组件（小组件可占位）
    - 通用列表：每日提醒 / 隐私政策 / 使用条款 / 语言（本期均允许占位）
  - **交互**：
    - 点 X：关闭
    - 列表项点击：占位反馈（例如 `Alert` 或轻提示），不崩溃即可
  - **验收**：
    - 弹窗 UI 与 ThemeModal 同一套视觉（背景色/圆角/间距一致）
    - 点击各入口有明确反馈

## 6. 卡片页头部：系统导航栏右上角两个 icon 按钮

- [x] **改造 `client/app/(app)/_layout.tsx`：`home` 的 `headerRight` 使用两个圆形 icon 按钮**  
  - **状态**：已完成  
  - **要求**：
    - 两按钮水平排列、圆形浅色底、`hitSlop>=10`
    - 左：主题（`theme.svg`），右：我的（`my.svg`）
  - **事件传递方案（需要落地）**：
    - 实际落地：在 `home.tsx` 内通过 `navigation.setOptions()` 设置 `headerRight`，直接使用页面 state 打开 Theme/Profile 弹窗（避免跨层事件传递）
  - **验收**：
    - 右上角两个按钮展示正确
    - 点击分别能打开对应弹窗

## 7. 卡片页内容：喜欢/讨厌改为 icon + 强反馈动效

- [x] **改造 `client/app/(app)/home.tsx`：底部按钮从文字改为 icon**  
  - **状态**：已完成  
  - **要求**：
    - 喜欢按钮使用 `like.svg`
    - 讨厌按钮使用 `hate.svg`（逻辑仍写入 reaction=`dislike`）
  - **验收**：两按钮 icon 显示清晰，点击逻辑仍正常推进下一张卡片

- [x] **实现“强反馈：心形填满”点击动效**  
  - **状态**：已完成  
  - **范围**：至少作用于“喜欢”按钮  
  - **建议实现**：
    - `pressIn/pressOut`：按钮缩放回弹
    - `onPress`：短促强调动效（scale 1 → 1.12 → 1）
    - “填满”效果：点击后切换到“填充版心形”（若当前资源仅描边，需要：
      - 新增一份 `like_filled.svg`（或在现有 SVG 上修改 fill/stroke），并保持风格一致
      - 或用 `react-native-svg` 动态改 `fill`（可行但实现复杂）
  - **验收**：
    - 点击喜欢按钮能看到明显的“变填充 + 弹一下”反馈
    - 动效结束后再推进下一张卡片（避免动画被切页吞掉）

## 8. 主题对 Home 背景的影响

- [x] **让主题 mode 影响 Home 页面背景**  
  - **状态**：已完成  
  - **规则**：
    - `scenery`：使用风景主题背景（可先用现有米色/图片占位）
    - `color`：使用颜色主题背景（可先用淡粉色/纯色占位）
  - **验收**：切换主题后背景立即变化；返回/重进页面仍正确

## 9. i18n（用于标题/无障碍/占位文案）

- [x] **补齐本需求相关 i18n key（至少 zh-CN/en）**  
  - **状态**：已完成  
  - **建议 key**：
    - `theme.title`、`theme.scenery`、`theme.color`
    - `profile.title`、`profile.favorites`、`profile.widget`
    - `profile.dailyReminder`、`profile.privacy`、`profile.terms`、`profile.language`
    - `home.theme`、`home.profile`（用于 `accessibilityLabel`）
  - **验收**：弹窗标题/选项/占位提示无硬编码长文案；切换语言可生效

## 10. 自测与验收

- [ ] **主题弹窗流程自测**  
  - **状态**：未开始  
  - **路径**：Home 右上角主题按钮 → 主题弹窗 → 切换风景/颜色 → 背景变化 → 重启后仍保持  
  - **验收**：符合 `spec.md` / `plan.md` / 本清单验收点

- [ ] **我的弹窗流程自测**  
  - **状态**：未开始  
  - **路径**：Home 右上角我的按钮 → 个人主页弹窗 → 点 X 关闭 → 列表项点击占位反馈  
  - **验收**：弹窗不穿透、关闭稳定、占位反馈明确

- [ ] **喜欢/讨厌动效与逻辑自测**  
  - **状态**：未开始  
  - **路径**：连续点击喜欢/讨厌 → 按钮动效可见 → 卡片索引推进 → 收藏/反应写入正常  
  - **验收**：无报错、不卡顿、动效不被切换吞掉