ZL-Q
94 lines
2.9 KiB
Markdown
94 lines
2.9 KiB
Markdown
# 手动起卦页面设计稿对齐
|
||
|
||
## Goal
|
||
|
||
将 Web 端手动起卦页面（ManualDivinationPage）与设计稿对齐，修复六爻铜钱区域的显示问题。
|
||
|
||
## What I already know
|
||
|
||
**六爻类型与符号对照（来自 Flutter 代码）：**
|
||
|
||
| 类型 | 中文名 | 线条 | 符号 |
|
||
|------|--------|------|------|
|
||
| youngYang | 少阳 | 实线 `—` | 无 |
|
||
| youngYin | 少阴 | 断线 `--` | 无 |
|
||
| oldYang | 老阳 | 实线 `—` | `○` |
|
||
| oldYin | 老阴 | 断线 `--` | `×` |
|
||
| undetermined | 未确定 | 灰色线 | 无 |
|
||
|
||
**Flutter 参考代码：**
|
||
- `apps/lib/shared/widgets/divination/yao_glyph.dart` - 爻图形组件
|
||
- `apps/lib/shared/widgets/divination/yao_line_row.dart` - 爻行组件
|
||
- `apps/lib/shared/widgets/divination/divination_terms.dart` - 符号定义
|
||
|
||
**Web 当前问题：**
|
||
|
||
1. **状态显示问题**
|
||
- 当前：用文字"老阴/少阳"等
|
||
- 应该：用符号 `×`、`○` 或空白
|
||
|
||
2. **线的颜色问题**
|
||
- 当前：当前选中的爻（active），即使未确认，线也变成紫色
|
||
- 应该：只有确认后的爻才显示紫色线，未确认时保持灰色
|
||
|
||
3. **硬币选择区域**
|
||
- 当前：显示"老阴/老阳/少阴/少阳"结果
|
||
- 应该：不显示结果，只显示硬币和"字/花"标签
|
||
|
||
4. **待录入显示**
|
||
- 当前：显示"待录入"文字
|
||
- 应该：显示灰色线，右侧无符号
|
||
|
||
## Requirements
|
||
|
||
### R1: 爻状态符号显示
|
||
- oldYang 显示符号 `○`
|
||
- oldYin 显示符号 `×`
|
||
- youngYang 和 youngYin 无符号
|
||
- undetermined 无符号
|
||
|
||
### R2: 爻线颜色逻辑
|
||
- undetermined：灰色线
|
||
- 已确认的爻（youngYang/youngYin/oldYang/oldYin）：紫色线
|
||
- 当前选中但未确认的爻：线保持灰色（与 undetermined 相同）
|
||
|
||
### R3: 移除硬币区域的结果显示
|
||
- 删除"老阴/老阳/少阴/少阳"结果显示区域
|
||
- 保留：三个硬币图片 + "字/花"标签 + 确认按钮
|
||
|
||
### R4: 移除"待录入"文字
|
||
- 待录入状态：灰色线 + 右侧空白（无符号无文字）
|
||
|
||
## Acceptance Criteria
|
||
|
||
- [ ] oldYang 爻右侧显示 `○` 符号
|
||
- [ ] oldYin 爻右侧显示 `×` 符号
|
||
- [ ] youngYang/youngYin 爻右侧无符号
|
||
- [ ] 当前选中但未确认的爻，线颜色为灰色
|
||
- [ ] 已确认的爻，线颜色为紫色
|
||
- [ ] 硬币选择区域不显示结果文字
|
||
- [ ] 待录入状态无"待录入"文字，只显示灰色线
|
||
|
||
## Definition of Done
|
||
|
||
- 功能测试通过
|
||
- 与设计稿视觉一致
|
||
|
||
## Technical Notes
|
||
|
||
**涉及文件：**
|
||
- `web/src/components/ManualDivinationPage.tsx`
|
||
|
||
**修改方案：**
|
||
|
||
1. `YaoGlyph` 组件：
|
||
- 添加 `confirmed` 参数区分已确认/未确认状态
|
||
- 未确认时使用灰色，已确认时使用紫色
|
||
|
||
2. 爻行显示：
|
||
- 右侧状态改为符号显示（`×`、`○` 或空白）
|
||
- 移除文字"待录入"和"老阴/少阳"等
|
||
|
||
3. 硬币区域：
|
||
- 删除 `text.yaoTypeNames[currentYaoType]` 显示区域
|