39 lines
2.0 KiB
Markdown
39 lines
2.0 KiB
Markdown
# T01 纵向世系轴基准设计
|
||
|
||
## 目标
|
||
|
||
将 T01 从“横向大画布上的独立成员卡”调整为可直接读懂亲缘关系的纵向世系轴，并作为后续世系树页面的视觉基准。本轮仅使用页面内模拟数据，不接接口。
|
||
|
||
## 已确认方向
|
||
|
||
- 始祖置于顶部中央，后代按世代向下分层。
|
||
- 同一世代横向排列；只有分支超过当前宽度时才横向拖动。
|
||
- 首屏必须完整看到始祖和主要下一代，不能以裁切节点暗示结构。
|
||
- 祖先到子代之间显示连续、清晰的关系线；选中成员以红色节点框和文字强调。
|
||
- 世代标题采用横向分层标签，不再使用分散的竖排小字。
|
||
- 选中成员信息放在底部透明信息栏中，保留“查看资料”“添加亲属”。
|
||
- 加载、阅读提示、空、失败继续由 T01 同页状态承载。
|
||
|
||
## 视觉资产
|
||
|
||
- 页面背景继续使用 T 系列 `ModulePageBackground`。
|
||
- 成员节点复用现有透明卷框资产，树状态面板与底部信息栏复用现有透明金线框资产，并复制到 tree 模块命名空间。
|
||
- 移除 T01 对 `g03-create-flow-panel.png`、`g06-search-input-wide.png`、`application-status-card.png` 三个不透明表面资产的引用。
|
||
- 关系线属于数据关系可视化，可由布局元素绘制；不使用 CSS 仿造装饰图案、SVG 或表情符号。
|
||
|
||
## 状态与交互
|
||
|
||
- `loading`：保留 `AppLoading` 动画。
|
||
- `tree`：展示纵向三代世系，默认选中始祖；点击节点更新底部信息栏。
|
||
- `landscape`：说明“上下看世代、左右看同代分支”，操作后回到树态。
|
||
- `empty`：引导录入首代成员并跳转 T04。
|
||
- `error`：说明读取失败，重试后回到树态。
|
||
- 保留 T03、T04、T06、T07 路由入口。
|
||
|
||
## 响应式与验收
|
||
|
||
- 内部检查 `320×568`、`360×640`、`360×800`、`412×915`，不把响应式尺寸逐档交给用户确认。
|
||
- `412×915` 作为当前正常树态的首个视觉审批证据。
|
||
- H5 截图仅作内部候选；Android/HBuilderX 真机或模拟器验证仍未完成。
|
||
|