2.4 KiB
2.4 KiB
T01 世系树状态收敛设计
运行审视依据
T01-before-360x800.png:无当前家谱时只显示“暂未录入族人”,无法说明是空数据、加载失败还是未选择家谱。T01-populated-before-360x800.png:已载入树的节点使用 CSS 方框且没有关系连线,底部信息条与页面视觉语言脱节。T02-before-360x800.png:小屏提示、无成员与加载失败被做成另一个通用状态页,和 T01 是同一个阅读任务的重复路由。
决定
删除 T02 路由与文件。t01-tree-overview.vue 是世系阅读任务的唯一所有者,并以 state=tree|landscape|empty|error 驱动同页状态:
tree:有genealogyId且树数据存在时,显示横向可滚动的世系图,点选节点保留现有的资料/添加亲属跳转。landscape:小屏阅读提示,说明可横向拖动查看;不新增页面。empty:没有当前家谱、没有成员或显式状态时,清晰引导用户先录入首代。error:加载失败或显式状态时,说明无法加载并提供重新查看入口。
空关键词、无上下文和远端异常不再复用一条模糊文案;页面状态从查询参数和实际数据得出,T02 不保留兼容入口。
视觉
- 保留
PageHeader、暖宣纸与朱砂/古金/墨褐的已验收语言,不触及 A01、A02、A04--A06、G01、G03。 - 新增不透明位图:世系画布
t01-tree-canvas.png、成员节点t01-member-node.png、底部成员信息条t01-member-sheet.png。它们承载纸纹、边框、关系线和卡片表面;Vue 只叠放真实文本、滚动和点击层。 - 完整画布含轻古金三代关系线,适配当前 mock 的一祖、两中代、三后代布局;远端节点仍使用同一空白节点皮肤,保持可读优先。
landscape、empty、error使用画布内留白与现有透明云纹,不再生成一个通用状态卡页。
契约与验证
- 先红灯:T01 存在且 T02 路由/文件不存在;T01 有四态、三张位图、成员资料与新增亲属跳转;节点和信息条不允许 CSS 构造表面。
- 运行冒烟:默认
?state=landscape、?state=empty、?state=error分别显示同页状态;?genealogyId=1001显示节点并点选进入 T03。 - 更新全量路由契约至 54,更新交接/P00/规划;截图至少包含 tree、empty、error 与 412×915 tree。