Files
dcalc/plan.md
T
2026-05-18 20:02:16 +08:00

5.8 KiB
Raw Blame History

Plan: frontend 到 frontendNew 后续迁移

基于现有代码状态,采用“核心功能优先、视觉后置、双端并行”策略:将 equipment 作为已完成基线,优先完成 Skill 与 Forge 的可计算配置能力,再接入 Result 面板,最后统一交互与视觉细节。这样能最早恢复端到端计算链路,并降低一次性重构风险。

Steps

  1. Phase 0 现状校准与冻结(依赖:无)
    1. 将 equipment 迁移状态定为“功能完成,仅优化”。
    2. 明确本轮范围:Skill、Forge、Result;非本轮范围:视觉深度重构、大规模设计改版。
    3. 设定双端并行策略:frontend 继续可用,frontendNew 增量可用。
  2. Phase 1 共享依赖补齐(依赖:1)
    1. 统一 Character 容器内的数据刷新与计算触发策略,避免 Skill/Forge/Result 各自重复实现。
    2. 在 frontendNew 校准 configStore 的结果执行入口与错误态表达,作为 Result 接入前置。
    3. 明确 API /calc 返回结构在前端类型中的映射与兜底字段。
  3. Phase 2 Skill 迁移(依赖:2,可与 Phase 3 局部并行)
    1. 先达成 Skill MVP:技能列表、搜索、基础 VP/UP 配置写回 store。
    2. 将旧版 Skill 组件逻辑按“面板组件 + 可复用 composable”拆分,避免单文件过大。
    3. 完成与 Character 路由子页的交互一致性(切页不丢状态、刷新可恢复)。
    4. 第二轮再补齐细节交互(限制规则、提示、边界校验)。
  4. Phase 3 Forge 迁移(依赖:2,可与 Phase 2 并行推进不同子项)
    1. 先达成 Forge MVP:装备打造、时装基础配置、誓约基础配置。
    2. 子模块优先级:Equipments > Avatars > Oaths > Emblems/Jades/Sundry。
    3. 每个子模块完成即做 store 回写验证,确保配置可直接进入计算。
    4. 最后统一容器结构与分组折叠/分栏交互。
  5. Phase 4 Result 集成(依赖:3 和 4,阻塞)
    1. 新增 Result 模块并接入 Character 页面右侧并行展示区。
    2. 先上只读 MVP:基础属性、套装/誓约信息、技能伤害排序展示。
    3. 第二轮补可编辑项(技能次数)与标准对比能力。
    4. 处理 Buffer 与非 Buffer 两种展示分支。
  6. Phase 5 equipment 优化与一致性收口(依赖:5,可与测试并行)
    1. 按 Skill/Forge/Result 的新交互规范回调优化 equipment 文案、间距、加载/空态。
    2. 对齐 sidebar 导航入口、面包屑与页面命名。
  7. Phase 6 联调与灰度验收(依赖:5、6)
    1. 双端并行回归:同角色、同配置下 frontend 与 frontendNew 结果可比对。
    2. 关键路径验收:角色加载 -> 装备/技能/打造配置 -> 结果计算 -> 切页返回。
    3. 输出差异清单并分级修复(阻塞/高/中/低)。

并行建议

  1. 可并行 A:Skill 面板拆分 与 Forge 子模块拆分。
  2. 可并行 B:Result 只读表格骨架 与 API 结果类型校准(在 Skill/Forge 进入后期时启动)。
  3. 串行阻塞点:Result 正式接入必须等待 Skill + Forge 至少 MVP 完成。

Relevant files

  • /Users/xigua/Desktop/code/dnftools/dcalc/frontendNew/src/router/index.ts — 已含 character 子路由,后续仅扩展守卫与异常路由策略。
  • /Users/xigua/Desktop/code/dnftools/dcalc/frontendNew/src/pages/Dcalc/Character/Index.vue — Character 总容器,需接入 Result 并统一计算触发节奏。
  • /Users/xigua/Desktop/code/dnftools/dcalc/frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/Index.vue — 作为已迁移基线与样式/交互参考。
  • /Users/xigua/Desktop/code/dnftools/dcalc/frontendNew/src/pages/Dcalc/Character/Skill/index.vue — 当前占位版,迁移主入口。
  • /Users/xigua/Desktop/code/dnftools/dcalc/frontendNew/src/pages/Dcalc/Character/Forge/index.vue — 当前占位版,迁移主入口。
  • /Users/xigua/Desktop/code/dnftools/dcalc/frontendNew/src/stores/config.ts — Skill/Forge 回写与 Result 读取的核心状态源。
  • /Users/xigua/Desktop/code/dnftools/dcalc/frontendNew/src/stores/info.ts — 角色数据、技能/装备元数据来源。
  • /Users/xigua/Desktop/code/dnftools/dcalc/frontend/src/pages/Character/Skill/index.vue — 旧版 Skill 行为参考。
  • /Users/xigua/Desktop/code/dnftools/dcalc/frontend/src/pages/Character/Forge/index.vue — 旧版 Forge 容器参考。
  • /Users/xigua/Desktop/code/dnftools/dcalc/frontend/src/pages/Character/Result/Index.vue — 旧版 Result 结构与交互参考。

Verification

  1. 路由验证:访问 /dcalc/character/:alter/equipment|skill|forge 均可加载并保持切换状态。
  2. 数据流验证:Skill 与 Forge 操作后,configStore 对应字段实时变化并可持久化。
  3. 计算验证:触发计算后,Result 能正确展示 info/skills/suits,异常时有明确错误态。
  4. 对比验证:选定 3 个角色样本,在 frontend 与 frontendNew 下输出结果关键字段对齐。
  5. 回归验证:切换角色、刷新页面、返回导航、深链接进入均不丢关键配置。

Decisions

  • 已确认:equipment 视为已迁移完成,本轮仅做一致性优化,不重做主体。
  • 已确认:本轮优先 Skill、Forge、Result。
  • 已确认:迁移策略为核心功能优先,视觉后置。
  • 已确认:frontend 与 frontendNew 在迁移期间并行可用。
  • 范围外:完整视觉重设计、非关键页面重构、跨端统一主题工程化改造。

Further Considerations

  1. Result 的编辑能力建议分两期:先只读上线稳定计算链路,再上技能次数编辑,减少联调风险。
  2. Forge 的 Emblems/Jades 可在 MVP 后与视觉优化一起做,避免前期阻塞主链路。
  3. 若后续需要压缩周期,可将 Skill 与 Forge 分配两条并行开发线,Result 由第三条线在第 2 周后介入。