chore(task): archive 05-09-fix-divination-cost-hardcode-and-coin-animation

2026-05-09 23:36:59 +08:00
parent f695dd86e9
commit 654e5ce188
4 changed files with 107 additions and 0 deletions
@@ -0,0 +1 @@
+{"file": ".trellis/tasks/05-09-fix-divination-cost-hardcode-and-coin-animation/prd.md", "reason": "验收标准：积分动态显示、硬币翻转动画、硬币视觉效果"}
@@ -0,0 +1 @@
+{"file": ".trellis/tasks/05-09-fix-divination-cost-hardcode-and-coin-animation/prd.md", "reason": "完整需求文档，包含硬编码位置、API 字段、修改方案"}
@@ -0,0 +1,79 @@
+# 修复起卦积分硬编码与硬币动画
+
+## 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` 样式
@@ -0,0 +1,26 @@
+{
+  "id": "fix-divination-cost-hardcode-and-coin-animation",
+  "name": "fix-divination-cost-hardcode-and-coin-animation",
+  "title": "fix-divination-cost-hardcode-and-coin-animation",
+  "description": "",
+  "status": "completed",
+  "dev_type": null,
+  "scope": null,
+  "package": null,
+  "priority": "P2",
+  "creator": "zl-q",
+  "assignee": "zl-q",
+  "createdAt": "2026-05-09",
+  "completedAt": "2026-05-09",
+  "branch": null,
+  "base_branch": "dev",
+  "worktree_path": null,
+  "commit": null,
+  "pr_url": null,
+  "subtasks": [],
+  "children": [],
+  "parent": null,
+  "relatedFiles": [],
+  "notes": "",
+  "meta": {}
+}
				`@@ -0,0 +1 @@`
				`{"file": ".trellis/tasks/05-09-fix-divination-cost-hardcode-and-coin-animation/prd.md", "reason": "验收标准：积分动态显示、硬币翻转动画、硬币视觉效果"}`