ZL-Q
80 lines
2.4 KiB
Markdown
80 lines
2.4 KiB
Markdown
# 修复起卦积分硬编码与硬币动画
|
|
|
|
## 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` 样式
|