dnftools/dcalc
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity
Files
36fe76a4ab31b4def8fc97380648351e32667329
dcalc/frontend-角色信息与计算结果展示链路-专项分析.md
T
imelon 74cf99289f dev
2026-05-18 20:02:16 +08:00

10 KiB
Raw Blame History

Frontend 角色信息与计算结果展示链路专项分析

1. 分析范围与假设

  • 范围仅覆盖 frontend。
  • 本文重点是角色信息与计算结果展示链路，补充分列布局、联动逻辑、异常反馈与改造建议。
  • 职业上下文由路由参数 alter 驱动，计算请求统一走 /calc。

核心入口证据：

2. 模块清单与职责映射

2.1 主流程文件

2.2 数据与状态

3. 角色信息与计算结果展示链路

3.1 触发到计算

  1. 用户在装备、技能、打造区域改动配置后，主容器监听 config 变化。
  1. 监听回调触发 execute，进入异步计算流程。
  1. config store 调用 calc，向 /calc 提交 IConfig。

3.2 计算结果入仓与消费

  1. 结果写入 result.state，结构包含 skills、info、suits、buffer。
  1. 角色信息由 Info 组件消费并渲染 info 列表。
  1. 技能结果根据 buffer 分支渲染 Skill 或 BufferSkill。

4. 分列布局与联动逻辑

4.1 顶层分列

4.2 结果区分列

4.3 联动规则

5. 异常反馈现状评估

5.1 已有反馈

5.2 缺口

  • 缺少请求失败显式提示（无 toast/错误区/错误码展示）。
  • 缺少结果区加载态反馈（执行中与完成时刻不可见）。
  • 缺少重试按钮或自动降级策略。
  • 缺少字段级异常占位（比如 info 值缺失时统一展示策略）。

侧面证据：

6. 重点问题与改造建议

P0

  1. 结果计算缺少显式异常反馈链路。
  • 影响：接口失败时用户难以判断是无结果还是请求异常。
  • 建议：在 config store 增加 status 字段（idle/loading/success/error），并在 Result 区显示错误提示与重试按钮。
  1. 结果刷新过程不可感知。
  • 影响：连续编辑时体验抖动，用户无法确认是否正在计算。
  • 建议：在 Result 容器增加轻量 loading 条或角标，绑定 execute 生命周期。

P1

  1. 角色信息面板缺少异常值占位规范。
  • 影响：后端字段不全时易出现空白或排版错位。
  • 建议：Info 渲染时对 name/value 增加兜底格式化层。
  1. 分列宽度与自适应策略未统一抽象。
  • 影响：不同分辨率下信息密度不稳定。
  • 建议：将主容器与结果列宽抽为布局 token，统一响应式断点行为。

P2

  1. 结果组件中计算与展示逻辑耦合较高。
  • 影响：后续扩展“多维对比/快照回放”时修改成本上升。
  • 建议：提取结果计算 composable，将排序、汇总、同比逻辑从视图组件中抽离。

7. 证据索引

路由

Store

API

页面与组件

Reference in New Issue View Git Blame Copy Permalink