## 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 周后介入。