eryao/.trellis/tasks/archive/2026-05/05-09-fix-divination-cost-hardcode-and-coin-animation/prd.md

修复起卦积分硬编码与硬币动画

Goal

1. 修复手动起卦和自动起卦页面的积分硬编码问题，使用后端返回的 runCost 和实际积分余额
2. 添加硬币翻转动画效果
3. 优化硬币选中状态的视觉效果

What I already know

硬编码位置：

1. ManualDivinationPage.tsx 第 77、103、129 行：

   • '可用 120 积分 · 本次 20 积分'
   • 'Available 120 credits · This reading 20 credits'

2. AutoDivinationPage.tsx 第 40 行：

   • '可用 120 积分 · 本次 20 积分'

3. StorePage.tsx 第 91 行：

   • fallback runCost: 20

API 已有字段：

• PointsBalance 接口（lib/api.ts 第 120-126 行）：
  • balance: 总积分
  • availableBalance: 可用积分
  • runCost: 单次解卦消耗
  • canRun: 是否可运行

Flutter 参考实现：

• apps/lib/features/divination/presentation/screens/manual_divination_screen.dart 第 358、374 行
• 使用 points.runCost 和 points.availableBalance

硬币当前样式：

• ManualDivinationPage.tsx 第 44 行：
  • ring-2 ring-violet-600 ring-offset-2 ring-offset-slate-50
  • 选中有边框和背景

Requirements

R1: 积分显示使用后端数据

• 手动起卦和自动起卦页面需要调用 getPointsBalance() 获取实际积分
• 显示格式：可用 {availableBalance} 积分 · 本次 {runCost} 积分
• 英文：Available {availableBalance} credits · This time {runCost} credits

R2: 硬币翻转动画

• 点击硬币时有翻转动画效果
• 使用 CSS transform: rotateY(180deg) 实现 3D 翻转

R3: 优化硬币选中视觉效果

• 移除选中硬币的边框（ring）和背景偏移
• 只显示硬币图片本身
• 可以保留轻微阴影以区分层次

Acceptance Criteria

• 手动起卦页面显示实际可用积分和解卦消耗
• 自动起卦页面显示实际可用积分和解卦消耗
• 点击硬币有翻转动画
• 选中的硬币无边框，只显示硬币图片

Definition of Done

• 功能测试通过
• 与 Flutter 实现一致

Technical Notes

涉及文件：

• web/src/components/ManualDivinationPage.tsx
• web/src/components/AutoDivinationPage.tsx
• web/src/components/StorePage.tsx（可选，fallback 值保留）

修改方案：

1. 在组件中添加 useEffect 调用 getPointsBalance()
2. 将硬编码文本替换为动态值
3. 添加 CSS 翻转动画类
4. 移除 ring-2 ring-violet-600 ring-offset-2 样式