71 lines
5.8 KiB
Markdown
71 lines
5.8 KiB
Markdown
## 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 周后介入。 |