+
技能突破 (UP)
{{ usedUPCount }}/{{ UP_LIMIT }}
@@ -370,7 +418,9 @@ const resetAllSkills = () => {
:key="idx"
class="flex items-center gap-2 rounded-md border border-border/50 bg-muted/10 p-2"
>
-
{{ idx + 1 }}
+
+ {{ idx + 1 }}
+
@@ -399,7 +456,9 @@ const resetAllSkills = () => {
:disabled="!slot.skillId"
title="切换形态"
@click="exchangeUPMode(idx)"
- >⇄
+ >
+ ⇄
+
-
+
{{ slot.skillId ? skillById(slot.skillId)?.name : "未选择技能" }}
@@ -433,16 +502,23 @@ const resetAllSkills = () => {
+ >
+ {{ slot.skillId ? "更换" : "选择" }}
+
-
+
+ >
+ 清
+
@@ -464,19 +544,32 @@ const resetAllSkills = () => {
-
+
技能进化 (VP)
{{ usedVPCount }}/{{ VP_LIMIT }}
-
+
{{ skill.learnLv }}
-
![]()
+
![]()
-
+
{{ skill.name }}
@@ -490,12 +583,23 @@ const resetAllSkills = () => {
? 'border-purple-400 bg-purple-500/10'
: 'border-border/50'
"
- @click="setVPMode(skill.id.toString(), skillCfg(skill.id.toString()).vp === mode ? 0 : mode)"
+ @click="
+ setVPMode(
+ skill.id.toString(),
+ skillCfg(skill.id.toString()).vp === mode ? 0 : mode,
+ )
+ "
>
形态 {{ mode }}
+ :class="
+ skillCfg(skill.id.toString()).vp === mode
+ ? 'text-purple-400'
+ : 'text-muted-foreground'
+ "
+ >
+ 形态 {{ mode }}
+
{{ skill.vps[mode - 1]?.name || "—" }}
@@ -505,104 +609,158 @@ const resetAllSkills = () => {
+
-
-
-
{{ notice }}
+
+
+
+
+ 结果面板
+ 技能详情
+
+
+
-
-
-
-
-
![]()
+
+
+
+
+
+
+
+ {{ notice }}
+
+
+
+
+
+
+
![]()
+
+
{{ selectedSkill.name }}
+
+ {{ selectedSkill.type === "passive" ? "被动" : "主动" }} · Lv
+ {{ selectedSkill.learnLv }} 解锁
+
+
+
+
+
-
{{ selectedSkill.name }}
-
- {{ selectedSkill.type === "passive" ? "被动" : "主动" }} ·
- Lv {{ selectedSkill.learnLv }} 解锁
+
+ {{ skillCfg(selectedSkill.id.toString()).lv }}
+ / 满 {{ selectedSkill.maxLearnLv }}
+
+
+
+
+
+
+
+
+
+
+
+
VP 进化形态
+
+
+
+
+
+
+
+
UP 突破状态
+
+ {{
+ skillCfg(selectedSkill.id.toString()).up === 0
+ ? "未配置"
+ : `已配置 形态 ${skillCfg(selectedSkill.id.toString()).up}`
+ }}
-
-
-
- {{ skillCfg(selectedSkill.id.toString()).lv }}
- / 满 {{ selectedSkill.maxLearnLv }}
-
-
-
-
-
-
+
+
+
点击左侧技能查看详情
+
+
VP 已用: {{ usedVPCount }} / {{ VP_LIMIT }}
+
UP 已用: {{ usedUPCount }} / {{ UP_LIMIT }}
+
-
-
-
-
VP 进化形态
-
-
-
-
-
-
-
-
UP 突破状态
-
- {{
- skillCfg(selectedSkill.id.toString()).up === 0
- ? "未配置"
- : `已配置 形态 ${skillCfg(selectedSkill.id.toString()).up}`
- }}
-
-
-
-
-
-
-
点击左侧技能查看详情
-
-
VP 已用: {{ usedVPCount }} / {{ VP_LIMIT }}
-
UP 已用: {{ usedUPCount }} / {{ UP_LIMIT }}
-
-
-
+
@@ -635,8 +793,12 @@ const resetAllSkills = () => {
line-height: 14px;
font-weight: 700;
}
-.badge-vp { color: #c084fc; } /* purple-400 */
-.badge-up { color: #fb923c; } /* amber-400 */
+.badge-vp {
+ color: #c084fc;
+} /* purple-400 */
+.badge-up {
+ color: #fb923c;
+} /* amber-400 */
/* 28×28px icon at y=14px */
.skill-icon {
diff --git a/frontendNew/src/pages/Dcalc/DnfHelper/Character/Index.vue b/frontendNew/src/pages/Dcalc/DnfHelper/Character/Index.vue
index 7f6a417c..b613dc2f 100644
--- a/frontendNew/src/pages/Dcalc/DnfHelper/Character/Index.vue
+++ b/frontendNew/src/pages/Dcalc/DnfHelper/Character/Index.vue
@@ -67,15 +67,12 @@ watch(
- 角色配置 · {{ alter }}
+ 角色配置
- 此页面承接旧版 character 模块，逐步迁移装备/技能/打造功能。
diff --git a/plan.md b/plan.md
new file mode 100644
index 00000000..7e506358
--- /dev/null
+++ b/plan.md
@@ -0,0 +1,71 @@
+## 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 周后介入。
\ No newline at end of file