mindfulness/spec_kit/Card UI/plan.md

Card UI（技术计划）

1. 计划目标

在卡片页（/(app)/home）完成 UI 与交互升级：

• 右上角两个圆形图标按钮：
  • 主题切换（theme.svg）→ 打开主题弹窗
  • 个人主页（my.svg）→ 打开个人主页弹窗
• 两个弹窗统一视觉规范：弹窗内容区背景色 #FAF3EC、圆角、遮罩、关闭交互一致
• 卡片页底部「讨厌/喜欢」从文字按钮改为图标按钮（hate.svg、like.svg），点击有动效

2. 默认技术决策

• 路由：沿用 expo-router（不新增 modal route，弹窗优先用页面内 Modal 承载，降低路由复杂度）
• 动效：优先使用已存在的 react-native-reanimated（按压缩放/回弹等）
• SVG 渲染：使用 react-native-svg + 新增 react-native-svg-transformer，让本地 .svg 可直接 import 为组件
• 持久化：沿用 AsyncStorage（在 src/storage/appStorage.ts 统一封装 key）

3. 资源与命名约定

图标资源位置：client/assets/images/home/

• theme.svg：主题入口
• my.svg：个人主页入口
• like.svg：喜欢
• hate.svg：讨厌（逻辑层仍沿用 reaction=dislike，仅资源命名为 hate）

4. UI 与交互实现设计

4.1 右上角双按钮（主题 / 我的）

落点：client/app/(app)/_layout.tsx

• 将 home 的 headerRight 改为两个 icon 按钮容器（水平排列）
• 统一按钮样式：圆形底、浅色背景、hitSlop>=10
• 点击行为：
  • 主题按钮：触发 Home 页打开「主题弹窗」
  • 我的按钮：触发 Home 页打开「个人主页弹窗」

实现方式：headerRight 只负责“发出事件”，弹窗的实际 UI 放在 home.tsx 内（避免把复杂 UI 塞进导航 header）。

事件方案（两种可选，优先 A）：

• A：使用一个轻量全局状态（例如在 home 内通过 useFocusEffect + router 事件不太合适）
  • 更推荐：把 header 做成 Home 页内部自绘顶部栏（headerShown:false），所有状态都留在页面内
• B：继续用导航 header，但通过 React.Context 或一个简易 store（如 Zustand，若项目未引入则先不加）把“打开弹窗”动作传给页面

本计划默认采用 A（Home 页自绘顶部栏），因为实现最直接、样式可控、无跨层状态传递。

4.2 主题弹窗（背景色 #FAF3EC）

落点建议：

• client/components/home/ThemeModal.tsx
• client/components/ui/SheetModal.tsx（复用：遮罩、圆角容器、上滑/淡入动效、关闭逻辑）

交互：

• 点击主题按钮 → 打开弹窗
• 选择「风景 / 颜色」→ 立即写入主题 mode + 关闭（或保持打开并高亮选中，按设计稿）
• 点击遮罩 / 关闭按钮 → 关闭

视觉：

• 弹窗内容区背景：#FAF3EC
• 容器圆角与内边距按设计稿（默认 24 圆角、16–20 padding）

4.3 个人主页弹窗（背景色 #FAF3EC）

落点建议：

• client/components/home/ProfileModal.tsx
• 复用 SheetModal

内容与导航：

• 顶部：插画/头像 + 昵称（来自 getUserProfile().name，无则显示占位名）
• 快捷卡片：我的喜欢 / 小组件（按现有设计稿与已有页面映射）
• 通用列表：每日提醒 / 隐私政策 / 使用条款 / 语言

页面/能力映射（一期最小闭环）：

• 我的喜欢 → 跳转到 /(app)/favorites
• 语言 → 跳转到现有语言设置页（若尚未落地，则在本次实现中补齐入口或先占位）
• 隐私政策 / 使用条款 → 复用 Splash Consent 的外链打开方式（或后续统一到一个 WebView 组件）
• 每日提醒 → 若现有页面未实现，先占位并在 tasks 阶段拆分

4.4 喜欢 / 讨厌按钮改为 icon + 动效

落点：client/app/(app)/home.tsx

• 将底部两个 Pressable + Text 按钮替换为 icon 按钮：
  • 喜欢：like.svg
  • 讨厌：hate.svg
• 点击动效（建议）：
  • pressIn：scale 到 0.92
  • pressOut：回弹到 1
  • onPress：短促 “弹一下” 的强调动效（例如 scale 1 → 1.12 → 1），随后再推进下一张卡片

动效仅作用于按钮本体即可先满足“点击有动效”，后续可扩展为卡片飞出/淡出等更强反馈。

5. 主题状态与持久化

落点：client/src/storage/appStorage.ts

新增 key（与 spec.md 保持一致）：

• ui.theme.mode: 'scenery' | 'color'

新增封装方法（示例命名）：

• getThemeMode(): Promise<'scenery' | 'color'>（默认 scenery）
• setThemeMode(mode: 'scenery' | 'color'): Promise<void>

Home 页读取主题 mode，并用于：

• 页面背景（风景/颜色）
• 卡片背景与局部配色（按设计稿映射）

6. SVG 导入支持（工程配置）

由于项目当前未见 metro.config.js，计划新增 SVG transformer 支持：

1. 安装依赖：react-native-svg-transformer
2. 新增 client/metro.config.js，基于 expo/metro-config 配置：
   • 将 svg 从 assetExts 移到 sourceExts
   • babelTransformerPath 指向 transformer

完成后可以直接：

• import LikeIcon from '@/assets/images/home/like.svg'

7. i18n 文案补齐（用于标题/无障碍）

建议新增 key（至少 zh-CN/en，其余语言可后续补齐）：

• home.theme（用于无障碍 label）
• home.profile（用于无障碍 label）
• theme.title、theme.scenery、theme.color
• profile.title、profile.favorites、profile.widget、profile.dailyReminder、profile.privacy、profile.terms、profile.language

原有 home.like/home.dislike 即使不再显示文字，也可保留用于 accessibilityLabel 或未来回退。

8. 实施步骤

1. 配置 SVG 导入（新增 transformer + metro.config.js）
2. 新增通用弹窗组件 SheetModal（遮罩、圆角、背景色 #FAF3EC、关闭交互、基础动效）
3. 新增 ThemeModal 与 ProfileModal（复用 SheetModal）
4. 在 appStorage.ts 新增主题 mode 读写方法
5. 改造 home.tsx：
   • 自绘顶部栏（右上角两个圆形 icon 按钮）
   • 接入主题 mode 影响背景
   • 底部喜欢/讨厌替换为 icon + 动效
6. 补齐 i18n key
7. 自测：
   • 主题切换后即时生效并可持久化
   • 个人主页弹窗打开/关闭体验一致
   • 喜欢/讨厌点击有动效且逻辑正常推进卡片

9. 验收标准

• 卡片页右上角两个 icon 按钮显示正确，点击热区合理
• 主题弹窗与个人主页弹窗：
  • 背景色 #FAF3EC
  • 遮罩/圆角/关闭交互一致
• 喜欢/讨厌按钮为 icon（like.svg / hate.svg）且点击有动效
• 主题选择被持久化，重启 App 后仍保持上次主题