eryao/.trellis/tasks/archive/2026-05/05-09-manual-divination-page-design-alignment/prd.md

手动起卦页面设计稿对齐

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] 显示区域