From 74c66341869ed40ee20b555fb7af12214151ba7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A5=BF=E7=93=9C=C2=B0?= <wxh_email@yeah.net>
Date: Sat, 11 Jul 2026 11:14:12 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontendNew/MIGRATION_FUNCTION_MATRIX.md      |  16 ++
 frontendNew/MIGRATION_PLAN.md                 |  80 +++----
 frontendNew/MIGRATION_REGRESSION_CHECKLIST.md |  76 +++----
 .../components/dnf/Equipment/List/index.vue   |   4 +-
 .../components/dnf/Equipment/Oath/index.vue   |   6 +-
 .../Character/EquipmentDictionary/Index.vue   |  24 ++-
 .../components/EquipmentCell.vue              |   9 +-
 .../src/pages/Dcalc/Character/Forge/index.vue | 105 +++++++++-
 .../src/pages/Dcalc/Character/Index.vue       |  95 +++------
 .../pages/Dcalc/Character/Skill/img/add.svg   |   1 +
 .../pages/Dcalc/Character/Skill/img/max.svg   |   1 +
 .../pages/Dcalc/Character/Skill/img/min.svg   |   1 +
 .../pages/Dcalc/Character/Skill/img/sub.svg   |   1 +
 .../src/pages/Dcalc/Character/Skill/index.vue | 152 ++++++++------
 frontendNew/src/pages/Dcalc/Home/Index.vue    |  44 ++++
 frontendNew/src/stores/config.ts              |  71 +++----
 frontendNew/src/stores/info.ts                |  12 +-
 scripts/image.js                              | 196 +++++++++++++++---
 18 files changed, 594 insertions(+), 300 deletions(-)
 create mode 100644 frontendNew/MIGRATION_FUNCTION_MATRIX.md
 create mode 100644 frontendNew/src/pages/Dcalc/Character/Skill/img/add.svg
 create mode 100644 frontendNew/src/pages/Dcalc/Character/Skill/img/max.svg
 create mode 100644 frontendNew/src/pages/Dcalc/Character/Skill/img/min.svg
 create mode 100644 frontendNew/src/pages/Dcalc/Character/Skill/img/sub.svg

diff --git a/frontendNew/MIGRATION_FUNCTION_MATRIX.md b/frontendNew/MIGRATION_FUNCTION_MATRIX.md
new file mode 100644
index 00000000..29693a6a
--- /dev/null
+++ b/frontendNew/MIGRATION_FUNCTION_MATRIX.md
@@ -0,0 +1,16 @@
+# frontend -> frontendNew function matrix
+
+| Capability | frontend baseline | frontendNew acceptance |
+| --- | --- | --- |
+| Home and role entry | Select a role and open its calculator | `/dcalc/home` opens the selected role under `/dcalc/character/:alter/equipment` |
+| Assistant | Bind ID, list roles, import build data | Bind, refresh, role-targeted import, and ID import preserve the same API payloads |
+| Equipment | Select/toggle equipment by category and bulk-wear a suit rarity | Weapon, subweapon, suit, universal, title/pet, treasure, oath, trigger options, preview, and idempotent bulk wear work |
+| Skill | Edit level, VP, UP, awakening, and import code | Writes the same `config.skills` and `bindAwake` fields, then recalculates |
+| Forge | Edit equipment, oath, avatar, emblem, jade, and global fields | Writes the same config fields, persists, recalculates, and records source changes |
+| Result | Inspect equipment/oath, skills, baseline, and skill counts | Full detail route plus one local summary panel; baseline, deltas, retries, states, and sorting work |
+| Persistence | Per-role config and skill counts survive reload | Uses unchanged `dcalc/<alter>/config` and `dcalc/<alter>/config/skillCount` keys |
+
+## Non-baseline additions retained
+
+- DNF VP routes and pages remain exclusive to `frontendNew`.
+- Legacy URLs are intentionally unsupported; no redirect or alias is part of acceptance.
diff --git a/frontendNew/MIGRATION_PLAN.md b/frontendNew/MIGRATION_PLAN.md
index cdff3bed..0b2f644e 100644
--- a/frontendNew/MIGRATION_PLAN.md
+++ b/frontendNew/MIGRATION_PLAN.md
@@ -1,60 +1,34 @@
-# frontend -> frontendNew 迁移计划（执行中）
+# frontend -> frontendNew migration status
 
-## 目标
+## Completed scope
 
-- 以 frontendNew 为主线承接 dcalc 核心能力。
-- 已完成的 equipment 作为基线，不重做主体，仅做一致性优化。
-- 当前优先迁移 Skill、Forge、Result，策略为“核心功能优先，视觉后置”。
-- 迁移期间保持 frontend 与 frontendNew 双端并行可用。
+- `frontendNew` is the only supported application surface. Character routes are under
+  `/dcalc/character/:alter/(equipment|skill|forge|result)`; legacy `frontend` URLs are not
+  redirected or maintained.
+- The existing API contracts, Pinia configuration schema, and `dcalc/<alter>/config` storage
+  keys remain unchanged.
+- Equipment, Skill, Forge, imports, result details, baseline comparison, and change-source logs
+  are implemented in `frontendNew`.
 
-## 当前状态
+## Parity safeguards added
 
-- 已完成：`Character/EquipmentDictionary` 主体迁移并接入路由。
-- 进行中：`Character/Skill`、`Character/Forge` 从占位页向可编辑页迁移。
-- 新启动：`Character/Result` 结果面板接入与自动计算链路。
+- Suite double-click now applies the selected rarity as an idempotent bulk wear operation for both
+  equipment and oaths. It never toggles already equipped items off.
+- Equipment choices and bulk wear actions append a single `Equipment` change-source record; Skill,
+  Forge, and import actions keep their existing records.
+- Character configuration changes are debounced and serialized. A change received during an active
+  calculation queues one follow-up calculation and every completed attempt persists the latest
+  configuration.
+- Character switches reset in-memory configuration and skill counts before loading that role's
+  persisted data. Stale character responses are ignored by their `Alter-Token`.
+- The unused global result sheet was removed from the Character shell. Equipment, Skill, and Forge
+  retain their one local summary panel; `/result` remains the full calculation-detail route.
 
-## 分阶段计划
+## Out of scope
 
-### Phase 1 - 共享链路打通
+- Legacy `frontend` build errors and its uncommitted files are not modified.
+- DNF VP remains a `frontendNew`-only feature.
+- No backend API, request payload, configuration field, or local-storage migration is introduced.
 
-1. 统一 Character 页角色加载、配置变更监听、结果自动计算触发。
-2. 将结果面板并入 Character 页面，形成“配置 + 结果”并行布局。
-3. 统一配置持久化触发点，保障刷新后状态可恢复。
-
-### Phase 2 - Skill MVP
-
-1. 完成技能列表、搜索、基础 VP/UP 配置回写。
-2. 先确保写入 `configStore.config.skills`，后补复杂交互约束。
-3. 目标：可参与结果计算。
-
-### Phase 3 - Forge MVP
-
-1. 子模块优先级：Equipments > Avatars > Oaths > Emblems/Jades/Sundry。
-2. 每个子模块完成即验证配置回写和计算结果联动。
-3. 目标：关键打造项可编辑并进入计算。
-
-### Phase 4 - Result MVP
-
-1. 展示基础属性、套装/誓约信息、技能伤害列表。
-2. 支持伤害排序和基准设定/清空。
-3. 第二轮补技能次数编辑、Buffer 细分、高级对比。
-
-### Phase 5 - 一致性优化与回归
-
-1. 统一加载态/空态/错误态文案。
-2. 双端同角色同配置结果比对，输出差异清单。
-3. 阻塞级问题清零后进入主用切换。
-
-## 验收标准
-
-1. 路由可用：`/dcalc/character/:alter/equipment|skill|forge`。
-2. 数据可用：Skill 与 Forge 配置改动能触发结果刷新。
-3. 结果可用：Result 面板稳定展示基础属性与技能伤害。
-4. 持久化可用：刷新后配置不丢失。
-5. 双端可比对：关键字段（伤害、套装、核心属性）一致。
-
-## 本次提交范围（已执行）
-
-1. 新增本计划文档。
-2. 新增 Result MVP 组件并接入 Character 页面。
-3. 在 Character 页面接入配置变更自动计算与离开页面自动保存。
+See [MIGRATION_FUNCTION_MATRIX.md](./MIGRATION_FUNCTION_MATRIX.md) and
+[MIGRATION_REGRESSION_CHECKLIST.md](./MIGRATION_REGRESSION_CHECKLIST.md) for acceptance coverage.
diff --git a/frontendNew/MIGRATION_REGRESSION_CHECKLIST.md b/frontendNew/MIGRATION_REGRESSION_CHECKLIST.md
index 654abca6..8567f15f 100644
--- a/frontendNew/MIGRATION_REGRESSION_CHECKLIST.md
+++ b/frontendNew/MIGRATION_REGRESSION_CHECKLIST.md
@@ -1,56 +1,40 @@
-# Character Migration Regression Checklist
+# Character migration regression checklist
 
-Last updated: 2026-05-28
-Scope: frontendNew Character module (Equipment / Skill / Forge / Result)
+Last updated: 2026-07-10
 
-## 1. Skill page
+## Routes and imports
 
-- [ ] Enter Skill page and switch between `结果面板` and `技能详情`.
-- [ ] Verify there is only one visible result panel in Skill page.
-- [ ] Change at least one skill level and confirm result recalculates automatically.
-- [ ] Set and clear baseline in result panel.
+- [ ] Open `/dcalc/home`, select a role, and enter Equipment, Skill, Forge, and Result.
+- [ ] Bind an assistant account, refresh its role list, and import a selected role through `roleId`.
+- [ ] Import a build by community ID and a skill build by skill code; verify the result refreshes.
 
-## 2. Forge page
+## Equipment and oath configuration
 
-- [ ] Enter Forge page and switch between `结果面板` and `配置编辑`.
-- [ ] In mobile width, use accordion module groups to switch `装备打造 / 誓约 / 时装徽章 / 全局`.
-- [ ] Edit reinforce/refine/adaptation and confirm result recalculates automatically.
-- [ ] Trigger quick reset and confirm change source logs are appended.
+- [ ] Select and deselect weapon, subweapon (where supported), suit, universal, title/pet, treasure,
+  oath suit, oath universal, and other oath entries.
+- [ ] Change trigger options, preview equipment, select an oath skill, and move preview suit/oath levels.
+- [ ] Select a suit rarity, double-click a suit icon, and verify all matching pieces are worn.
+- [ ] Repeat the double-click action and verify pieces remain worn rather than being toggled off.
+- [ ] Verify the latest Equipment change-source record describes the single or bulk action.
 
-## 3. Result states (4-state)
+## Skill, forge, and result
 
-- [ ] Loading: trigger compute and confirm loading state appears.
-- [ ] Error: simulate invalid calculation and confirm retry button appears.
-- [ ] Empty: clear config to no-result state and confirm empty hint appears.
-- [ ] Success: valid config renders result summary and details.
+- [ ] Change skill levels, VP/UP selections, and bound awakening; verify exactly one eventual recalculation.
+- [ ] Edit equipment forging, oath adaptation, avatar, emblems, jade, and global options; refresh and
+  confirm persistence.
+- [ ] Switch quickly between two roles, including one without saved data; verify neither equipment
+  configuration nor skill-count overrides leak from the previous role.
+- [ ] Verify Result states: loading, error/retry, empty, and successful detail rendering.
+- [ ] Set a baseline, change skill counts, verify total and row deltas, then clear the baseline.
+- [ ] Confirm the result summary appears once per Equipment, Skill, and Forge page, while `/result`
+  shows the full detail view.
 
-## 4. Baseline comparison
+## Automated validation
 
-- [ ] Set current result as baseline and verify delta labels update.
-- [ ] Modify skill counts and verify total diff and row diff update.
-- [ ] Clear baseline and verify diff falls back to absolute values.
+```sh
+cd frontendNew
+pnpm type-check
+pnpm build
+```
 
-## 5. Change source logs
-
-- [ ] Perform updates in Equipment / Skill / Forge and verify source names and details.
-- [ ] Verify log list is scrollable and supports clear action.
-- [ ] Confirm latest records appear first.
-
-## 6. This iteration patches
-
-- [x] CalcDetail left panel switched to accordion groups.
-- [x] Forge config module selector supports mobile accordion groups.
-- [x] Forge form density reduced for small screens (`text-xs`, compact paddings).
-
-## 7. Sidebar helper binding UX
-
-- [ ] Without helper binding, sidebar user section should show placeholder name and guide text.
-- [ ] Dropdown should provide `绑定/同步助手` entry and open `/dcalc/dnfhelper`.
-- [ ] `取消绑定` should clear helper info via store logout action.
-- [x] dnfhelper store keeps backward-compatible `refleshHelperInfo` alias.
-
-## Validation commands
-
-- `cd frontendNew && pnpm type-check`
-- `cd frontendNew && pnpm lint`
-- `cd frontendNew && pnpm build`
+Both commands passed locally on 2026-07-10 using the installed project dependencies.
diff --git a/frontendNew/src/components/dnf/Equipment/List/index.vue b/frontendNew/src/components/dnf/Equipment/List/index.vue
index c8eef417..2223b334 100644
--- a/frontendNew/src/components/dnf/Equipment/List/index.vue
+++ b/frontendNew/src/components/dnf/Equipment/List/index.vue
@@ -72,9 +72,7 @@ const partName = (part: string) => {
   <div
     class="equ-list"
     :class="{ 'equ-list--plain': !withBg }"
-    :style="{
-      backgroundImage: withBg ? `url(${getImageURL('/common/head.png')})` : 'none',
-    }"
+    :style="withBg ? { backgroundImage: `url(${getImageURL('/common/head.png')})` } : undefined"
   >
     <template v-for="part in parts" :key="part">
       <button class="equ-slot" :style="infoStyle(part)" type="button" @click="choosePart(part)">
diff --git a/frontendNew/src/components/dnf/Equipment/Oath/index.vue b/frontendNew/src/components/dnf/Equipment/Oath/index.vue
index 91e8ea01..5d70a709 100644
--- a/frontendNew/src/components/dnf/Equipment/Oath/index.vue
+++ b/frontendNew/src/components/dnf/Equipment/Oath/index.vue
@@ -74,9 +74,9 @@ const choosePart = (part: string) => {
   <div
     class="oath-list"
     :class="{ 'oath-list--plain': !withBg }"
-    :style="{
-      backgroundImage: withBg ? `url(${getImageURL('/common/oath/head.png')})` : 'none',
-    }"
+    :style="
+      withBg ? { backgroundImage: `url(${getImageURL('/common/oath/head.png')})` } : undefined
+    "
   >
     <template v-for="part in parts" :key="part">
       <button class="oath-slot" :style="infoStyle(part)" type="button" @click="choosePart(part)">
diff --git a/frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/Index.vue b/frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/Index.vue
index b1b29be0..2c6e79f9 100644
--- a/frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/Index.vue
+++ b/frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/Index.vue
@@ -590,11 +590,16 @@ const chooseEquip = (
   if (options?.oath || isOathEquipment(equip)) {
     const oathConfig =
       configStore.config.oaths[equip.oathPos] ??
-      (configStore.config.oaths[equip.oathPos] = { id: "", adaptation: 0 });
+      (configStore.config.oaths[equip.oathPos] = configStore.createDefaultOathConfig());
     oathConfig.id = oathConfig.id === equip.id ? "" : equip.id;
+    configStore.pushChangeSource("Equipment", `${oathConfig.id ? "已穿戴" : "已卸下"}${equip.name}`);
     return;
   }
   configStore.chooseEqu(equip, false, options?.subweapon ?? false);
+  configStore.pushChangeSource(
+    "Equipment",
+    `${isSelected(equip, options) ? "已穿戴" : "已卸下"}${equip.name}`,
+  );
 
   if (isSelected(equip, options)) {
     sidePanelTab.value = "equipped";
@@ -642,16 +647,29 @@ const wearCurrentSuitByRarity = (isOath = false, targetSuitId?: string) => {
     .filter((item) => item.rarity === currentRarity)
     .filter((item) => (isOath ? true : !item.name.includes("黑牙")));
 
+  let equippedCount = 0;
   source.forEach((item) => {
     if (isOath && item.oathPos) {
       const oathConfig =
         configStore.config.oaths[item.oathPos] ??
-        (configStore.config.oaths[item.oathPos] = { id: "", adaptation: 0 });
+        (configStore.config.oaths[item.oathPos] = configStore.createDefaultOathConfig());
       oathConfig.id = item.id;
+      equippedCount += 1;
       return;
     }
-    configStore.chooseEqu(item, false, false);
+    const part = item.itemType === "武器" ? "武器" : item.itemDetailType;
+    const equipmentConfig = configStore.config.equips[part];
+    if (!equipmentConfig) return;
+    equipmentConfig.id = item.id;
+    equippedCount += 1;
   });
+
+  if (equippedCount) {
+    configStore.pushChangeSource(
+      "Equipment",
+      `已按 ${currentRarity} 穿戴 ${equippedCount} 件${isOath ? "誓约" : "套装"}装备`,
+    );
+  }
 };
 
 const formatLv = (lv: number, rarity: string) =>
diff --git a/frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/components/EquipmentCell.vue b/frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/components/EquipmentCell.vue
index d4964374..644380aa 100644
--- a/frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/components/EquipmentCell.vue
+++ b/frontendNew/src/pages/Dcalc/Character/EquipmentDictionary/components/EquipmentCell.vue
@@ -65,7 +65,14 @@ const cellStyle = {
     @mouseenter="$emit('preview')"
     @contextmenu.prevent="$emit('rightClick')"
   >
-    <img :src="imageUrl" :alt="equipment.name" class="size-full object-contain" />
+    <img
+      :src="imageUrl"
+      :alt="equipment.name"
+      class="size-full object-contain"
+      loading="lazy"
+      decoding="async"
+      fetchpriority="low"
+    />
     <div v-if="inactive" class="absolute inset-0 bg-black/45" />
   </button>
   <div
diff --git a/frontendNew/src/pages/Dcalc/Character/Forge/index.vue b/frontendNew/src/pages/Dcalc/Character/Forge/index.vue
index c523dcb0..6637626a 100644
--- a/frontendNew/src/pages/Dcalc/Character/Forge/index.vue
+++ b/frontendNew/src/pages/Dcalc/Character/Forge/index.vue
@@ -20,6 +20,8 @@ import {
 } from "@/components/ui/accordion";
 import type { IJade } from "@/api/info/type";
 import ResultPanel from "@/pages/Dcalc/Character/Result/Index.vue";
+import EquipmentList from "@/components/dnf/Equipment/List/index.vue";
+import OathList from "@/components/dnf/Equipment/Oath/index.vue";
 
 const configStore = useConfigStore();
 const infoStore = useInfoStore();
@@ -31,6 +33,8 @@ const noticeType = ref<"error" | "info">("info");
 
 const avatarPart = ref("头部");
 const emblemPart = ref("彩色");
+const equipPart = ref("头肩");
+const oathPart = ref("0");
 const avatarOptionKeyword = ref("");
 const emblemOptionKeyword = ref("");
 const onlyConfiguredAvatarParts = ref(false);
@@ -113,7 +117,11 @@ const summary = computed(() => {
   };
 });
 
-const parts = computed(() => infoStore.parts.filter((part) => configStore.config.equips[part]));
+const parts = computed(() =>
+  [...infoStore.parts, "副武器"].filter(
+    (part, index, all) => all.indexOf(part) === index && configStore.config.equips[part],
+  ),
+);
 const oathParts = computed(() =>
   infoStore.oathParts.filter((part) => configStore.config.oaths[part]),
 );
@@ -238,6 +246,16 @@ const setOathAdaptation = (part: string, value: string) => {
   trackSource(oathBatchApply.value ? "誓约适配已批量更新" : `誓约槽位 ${part} 适配已更新`);
 };
 
+const setOathUpgrade = (part: string, index: number, value: string) => {
+  const target = configStore.config.oaths[part];
+  if (!target) return;
+  const next = Array.isArray(target.upgrade) ? [...target.upgrade] : [0, 0, 0, 0];
+  next[index] = Number.parseInt(value || "0", 10) || 0;
+  target.upgrade = next;
+  setNotice(`已更新誓约升级槽位 ${index + 1}。`);
+  trackSource(`誓约升级槽位 ${index + 1} 已更新`);
+};
+
 const equipCfg = (part: string) => configStore.config.equips[part] ?? configStore.defaultEqusConfig;
 const oathCfg = (part: string) => configStore.config.oaths[part] ?? configStore.defaultOathConfig;
 const avatarCfg = (part: string) =>
@@ -691,13 +709,35 @@ const resetAllForge = () => {
             <CardDescription>强化、锻造、品级编辑并即时回写配置。</CardDescription>
           </CardHeader>
           <CardContent class="space-y-2 text-xs sm:space-y-3 sm:text-sm">
+            <div class="grid gap-4 rounded-md border bg-muted/15 p-3 md:grid-cols-[280px_1fr] md:items-center">
+              <EquipmentList
+                v-model:part="equipPart"
+                :detail="configStore.config.equips"
+                :with-bg="false"
+                :with-pet="false"
+                :with-sub-weapon="(infoStore.infos?.subweapons?.length ?? 0) > 0"
+              />
+              <div class="flex min-w-0 flex-col gap-2">
+                <div class="text-muted-foreground">当前部位</div>
+                <div class="text-base font-semibold">{{ equipPart }}</div>
+                <div class="truncate text-muted-foreground">
+                  {{ equipNameById.get(equipCfg(equipPart).id) || "未选择装备（可在装备页选择）" }}
+                </div>
+                <div class="text-xs text-muted-foreground">点击左侧装备槽切换当前编辑部位。</div>
+              </div>
+            </div>
             <label
               class="flex flex-wrap items-center justify-between gap-2 rounded-md border bg-muted/30 p-2 text-muted-foreground"
             >
               <span>批量应用到同类部位</span>
               <input v-model="equipBatchApply" type="checkbox" class="size-4" />
             </label>
-            <div v-for="part in parts" :key="part" class="space-y-3 rounded-md border p-2 md:p-3">
+            <div
+              v-for="part in parts"
+              v-show="part === equipPart"
+              :key="part"
+              class="space-y-3 rounded-md border p-2 md:p-3"
+            >
               <div class="grid grid-cols-[5rem_minmax(0,1fr)_auto] items-center gap-2">
                 <div class="font-medium">{{ part }}</div>
                 <div class="truncate text-muted-foreground">
@@ -818,6 +858,23 @@ const resetAllForge = () => {
             <CardDescription>编辑誓约槽位适配值。</CardDescription>
           </CardHeader>
           <CardContent class="space-y-2 text-xs sm:space-y-3 sm:text-sm">
+            <div class="grid gap-4 rounded-md border bg-muted/15 p-3 md:grid-cols-[280px_1fr] md:items-center">
+              <OathList
+                v-model:part="oathPart"
+                :detail="configStore.config.oaths"
+                :with-bg="false"
+              />
+              <div class="flex min-w-0 flex-col gap-2">
+                <div class="text-muted-foreground">当前誓约槽位</div>
+                <div class="text-base font-semibold">
+                  {{ oathPart === "11" ? "誓约" : `星蕴石 ${Number(oathPart) + 1}` }}
+                </div>
+                <div class="truncate text-muted-foreground">
+                  {{ oathNameById.get(oathCfg(oathPart).id) || "未选择誓约（可在装备页选择）" }}
+                </div>
+                <div class="text-xs text-muted-foreground">点击左侧誓约槽切换当前编辑槽位。</div>
+              </div>
+            </div>
             <label
               class="flex flex-wrap items-center justify-between gap-2 rounded-md border bg-muted/30 p-2 text-muted-foreground"
             >
@@ -826,14 +883,16 @@ const resetAllForge = () => {
             </label>
             <div
               v-for="part in oathParts"
+              v-show="part === oathPart"
               :key="part"
-              class="grid grid-cols-1 gap-2 rounded-md border p-2 md:grid-cols-[6rem_1fr_7rem_auto] md:items-center md:p-3"
+              class="grid grid-cols-1 gap-2 rounded-md border p-2 md:grid-cols-[6rem_minmax(0,1fr)_24rem_auto] md:items-center md:p-3"
             >
               <div class="font-medium">槽位 {{ part }}</div>
               <div class="truncate text-muted-foreground">
                 {{ oathNameById.get(oathCfg(part).id) || "未选择誓约（可在装备页选择）" }}
               </div>
               <Input
+                v-if="part !== '11'"
                 :model-value="String(oathCfg(part).adaptation)"
                 type="number"
                 min="0"
@@ -841,6 +900,21 @@ const resetAllForge = () => {
                 placeholder="适配"
                 @update:model-value="(value) => setOathAdaptation(part, String(value))"
               />
+              <div v-else class="grid grid-cols-2 gap-1 md:grid-cols-4">
+                <Select
+                  v-for="index in 4"
+                  :key="index"
+                  :model-value="String(oathCfg(part).upgrade?.[index - 1] ?? 0)"
+                  @update:model-value="(value) => setOathUpgrade(part, index - 1, String(value))"
+                >
+                  <SelectTrigger class="h-8 min-w-20 text-xs"><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="0">无</SelectItem>
+                    <SelectItem value="1">技攻 +4%</SelectItem>
+                    <SelectItem value="2">CD -8%</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
               <Button size="sm" variant="ghost" @click="resetOathPart(part)">重置</Button>
             </div>
           </CardContent>
@@ -860,6 +934,19 @@ const resetAllForge = () => {
             <CardDescription>支持附魔、徽章项、品级和属性值编辑。</CardDescription>
           </CardHeader>
           <CardContent class="space-y-2 text-xs sm:space-y-3 sm:text-sm">
+            <div class="grid grid-cols-4 gap-2 rounded-md border bg-muted/15 p-3 sm:grid-cols-6">
+              <Button
+                v-for="part in avatarParts"
+                :key="part"
+                size="sm"
+                :variant="avatarPart === part ? 'default' : 'outline'"
+                class="h-12 min-w-0 px-1 text-xs"
+                :title="part"
+                @click="avatarPart = part"
+              >
+                <span class="truncate">{{ part.replace("宠物装备-", "") }}</span>
+              </Button>
+            </div>
             <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
               <div class="text-muted-foreground">筛选</div>
               <div class="flex items-center gap-2">
@@ -1021,6 +1108,18 @@ const resetAllForge = () => {
             <CardDescription>支持等级、徽章条目与槽位数量规则。</CardDescription>
           </CardHeader>
           <CardContent class="space-y-2 text-xs sm:space-y-3 sm:text-sm">
+            <div class="grid grid-cols-3 gap-2 rounded-md border bg-muted/15 p-3 sm:grid-cols-6">
+              <Button
+                v-for="part in infoStore.emblemParts"
+                :key="part"
+                size="sm"
+                :variant="emblemPart === part ? 'default' : 'outline'"
+                class="h-12 rounded-full px-2 text-xs"
+                @click="emblemPart = part"
+              >
+                {{ part }}
+              </Button>
+            </div>
             <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
               <div class="text-muted-foreground">筛选</div>
               <div class="flex items-center gap-2">
diff --git a/frontendNew/src/pages/Dcalc/Character/Index.vue b/frontendNew/src/pages/Dcalc/Character/Index.vue
index 43f1ec1d..62a23959 100644
--- a/frontendNew/src/pages/Dcalc/Character/Index.vue
+++ b/frontendNew/src/pages/Dcalc/Character/Index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { FileInput, PanelRight, WandSparkles } from "lucide-vue-next";
+import { FileInput, WandSparkles } from "lucide-vue-next";
 import api from "@/api";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -22,7 +22,6 @@ import { useConfigStore, useInfoStore } from "@/stores";
 import { useDnfHelperStore } from "@/stores/dnfhelper";
 import type { IConfigEmblem, IConfigEquip, IConfigOath } from "@/stores/config";
 import type { IHelperInfo } from "@/api/info/type";
-import ResultPanel from "@/pages/Dcalc/Character/Result/Index.vue";
 const props = defineProps<{
   alter: string;
 }>();
@@ -35,8 +34,6 @@ const helperStore = useDnfHelperStore();
 const loading = ref(false);
 const loadError = ref("");
 const isExecuting = ref(false);
-const isMobileLayout = ref(false);
-const isResultSheetOpen = ref(false);
 const helperImportOpen = ref(false);
 const skillImportOpen = ref(false);
 const helperRoleImportOpen = ref(false);
@@ -48,7 +45,8 @@ const importStatus = ref("");
 const importError = ref("");
 const helperRole = ref<IHelperInfo["roleList"][number]>();
 
-let mediaQuery: MediaQueryList | null = null;
+let calcDebounceTimer: ReturnType<typeof setTimeout> | undefined;
+let calcQueued = false;
 
 type AvatarConfig = Record<
   string,
@@ -75,13 +73,6 @@ interface SkillImportPayload {
   skills?: typeof configStore.config.skills;
 }
 
-const updateMobileLayout = () => {
-  isMobileLayout.value = mediaQuery?.matches ?? false;
-  if (!isMobileLayout.value) {
-    isResultSheetOpen.value = false;
-  }
-};
-
 const tabs = [
   { label: "装备", key: "equipment" },
   { label: "技能", key: "skill" },
@@ -97,14 +88,12 @@ const activeTab = computed(() => {
   return "equipment";
 });
 
-// Result panel is now embedded inside Equipment/Skill/Forge pages to avoid duplicate rendering.
-const showGlobalResultPanel = computed(() => false);
-
 const loadCharacter = async () => {
   loading.value = true;
   loadError.value = "";
   try {
-    await infoStore.createCharacter(props.alter);
+    const loaded = await infoStore.createCharacter(props.alter);
+    if (!loaded) return;
     prepareHelperRoleImport();
   } catch (error) {
     loadError.value = error instanceof Error ? error.message : "角色数据加载失败";
@@ -217,9 +206,6 @@ const prepareHelperRoleImport = () => {
 onMounted(() => {
   loadCharacter();
   window.addEventListener("beforeunload", configStore.saveConfig);
-  mediaQuery = window.matchMedia("(max-width: 1279px)");
-  updateMobileLayout();
-  mediaQuery.addEventListener("change", updateMobileLayout);
 });
 
 watch(
@@ -236,30 +222,42 @@ watch(
   },
 );
 
-watch(showGlobalResultPanel, (show) => {
-  if (!show) {
-    isResultSheetOpen.value = false;
+const executeCalculation = async () => {
+  if (isExecuting.value) {
+    calcQueued = true;
+    return;
   }
-});
+
+  isExecuting.value = true;
+  try {
+    await configStore.result.execute();
+  } finally {
+    configStore.saveConfig();
+    isExecuting.value = false;
+    if (calcQueued) {
+      calcQueued = false;
+      scheduleCalculation();
+    }
+  }
+};
+
+const scheduleCalculation = () => {
+  if (calcDebounceTimer) clearTimeout(calcDebounceTimer);
+  calcDebounceTimer = setTimeout(() => {
+    calcDebounceTimer = undefined;
+    void executeCalculation();
+  }, 120);
+};
 
 const stopConfigWatch = watch(
   () => JSON.stringify(configStore.config),
-  async () => {
-    if (isExecuting.value) return;
-    isExecuting.value = true;
-    try {
-      await configStore.result.execute();
-      configStore.saveConfig();
-    } finally {
-      isExecuting.value = false;
-    }
-  },
-  { deep: true },
+  scheduleCalculation,
+  { deep: true, flush: "post" },
 );
 
 onUnmounted(() => {
   stopConfigWatch();
-  mediaQuery?.removeEventListener("change", updateMobileLayout);
+  if (calcDebounceTimer) clearTimeout(calcDebounceTimer);
   window.removeEventListener("beforeunload", configStore.saveConfig);
   configStore.saveConfig();
 });
@@ -353,35 +351,10 @@ onUnmounted(() => {
       </SheetContent>
     </Sheet>
 
-    <div
-      :class="[
-        'grid min-h-0 flex-1 grid-cols-1 gap-4',
-        showGlobalResultPanel ? 'xl:grid-cols-[minmax(0,1fr)_24rem]' : 'xl:grid-cols-1',
-      ]"
-    >
+    <div class="grid min-h-0 flex-1 grid-cols-1 gap-4">
       <div class="min-w-0 overflow-hidden">
         <router-view />
       </div>
-      <aside v-if="!isMobileLayout && showGlobalResultPanel" class="min-h-0">
-        <ResultPanel />
-      </aside>
     </div>
-
-    <Sheet v-if="isMobileLayout && showGlobalResultPanel" v-model:open="isResultSheetOpen">
-      <SheetTrigger as-child>
-        <Button class="fixed bottom-5 right-4 z-30 shadow-lg" size="sm">
-          <PanelRight class="size-4" />
-          查看结果
-        </Button>
-      </SheetTrigger>
-      <SheetContent side="bottom" class="h-[78vh] overflow-hidden px-3 pb-3">
-        <SheetHeader class="pb-2">
-          <SheetTitle>实时计算结果</SheetTitle>
-        </SheetHeader>
-        <div class="h-[calc(78vh-4.5rem)] overflow-hidden">
-          <ResultPanel />
-        </div>
-      </SheetContent>
-    </Sheet>
   </section>
 </template>
diff --git a/frontendNew/src/pages/Dcalc/Character/Skill/img/add.svg b/frontendNew/src/pages/Dcalc/Character/Skill/img/add.svg
new file mode 100644
index 00000000..73941b2f
--- /dev/null
+++ b/frontendNew/src/pages/Dcalc/Character/Skill/img/add.svg
@@ -0,0 +1 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1" width="16" height="16" fill="url(#bg)"/><rect x="0.5" y="0.5" width="17" height="17" stroke="#5D4F30"/><rect x="8" y="4" width="2" height="10" fill="#B7975F"/><rect x="4" y="8" width="10" height="2" fill="#B7975F"/><defs><linearGradient id="bg" x1="9" y1="1" x2="9" y2="17"><stop stop-color="#451A1F"/><stop offset="1" stop-color="#271111"/></linearGradient></defs></svg>
diff --git a/frontendNew/src/pages/Dcalc/Character/Skill/img/max.svg b/frontendNew/src/pages/Dcalc/Character/Skill/img/max.svg
new file mode 100644
index 00000000..c8d44c8d
--- /dev/null
+++ b/frontendNew/src/pages/Dcalc/Character/Skill/img/max.svg
@@ -0,0 +1 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1" width="16" height="16" fill="url(#bg)"/><rect x="0.5" y="0.5" width="17" height="17" stroke="#5D4F30"/><path d="M9 9L3.75 14.1962V3.80385L9 9Z" fill="#B7975F"/><path d="M15 9L9.75 14.1962V3.80385L15 9Z" fill="#B7975F"/><defs><linearGradient id="bg" x1="9" y1="1" x2="9" y2="17"><stop stop-color="#451A1F"/><stop offset="1" stop-color="#271111"/></linearGradient></defs></svg>
diff --git a/frontendNew/src/pages/Dcalc/Character/Skill/img/min.svg b/frontendNew/src/pages/Dcalc/Character/Skill/img/min.svg
new file mode 100644
index 00000000..f446a542
--- /dev/null
+++ b/frontendNew/src/pages/Dcalc/Character/Skill/img/min.svg
@@ -0,0 +1 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1" width="16" height="16" fill="url(#bg)"/><rect x="0.5" y="0.5" width="17" height="17" stroke="#5D4F30"/><path d="M9 9L14.25 3.80385V14.1962L9 9Z" fill="#B7975F"/><path d="M3 9L8.25 3.80385V14.1962L3 9Z" fill="#B7975F"/><defs><linearGradient id="bg" x1="9" y1="1" x2="9" y2="17"><stop stop-color="#103562"/><stop offset="1" stop-color="#092343"/></linearGradient></defs></svg>
diff --git a/frontendNew/src/pages/Dcalc/Character/Skill/img/sub.svg b/frontendNew/src/pages/Dcalc/Character/Skill/img/sub.svg
new file mode 100644
index 00000000..08cee1ee
--- /dev/null
+++ b/frontendNew/src/pages/Dcalc/Character/Skill/img/sub.svg
@@ -0,0 +1 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1" width="16" height="16" fill="url(#bg)"/><rect x="0.5" y="0.5" width="17" height="17" stroke="#5D4F30"/><rect x="4" y="8" width="10" height="2" fill="#B7975F"/><defs><linearGradient id="bg" x1="9" y1="1" x2="9" y2="17"><stop stop-color="#103562"/><stop offset="1" stop-color="#092343"/></linearGradient></defs></svg>
diff --git a/frontendNew/src/pages/Dcalc/Character/Skill/index.vue b/frontendNew/src/pages/Dcalc/Character/Skill/index.vue
index 10a12ccf..52535704 100644
--- a/frontendNew/src/pages/Dcalc/Character/Skill/index.vue
+++ b/frontendNew/src/pages/Dcalc/Character/Skill/index.vue
@@ -13,6 +13,10 @@ import vp1Img from "./img/vp_1.png";
 import vp2Img from "./img/vp_2.png";
 import up1Img from "./img/up_1.png";
 import up2Img from "./img/up_2.png";
+import minImg from "./img/min.svg";
+import subImg from "./img/sub.svg";
+import addImg from "./img/add.svg";
+import maxImg from "./img/max.svg";
 
 const vpImg = (mode: number) => (mode === 1 ? vp1Img : vp2Img);
 const upImg = (mode: number) => (mode === 1 ? up1Img : up2Img);
@@ -27,11 +31,7 @@ const notice = ref("");
 const noticeType = ref<"error" | "info">("info");
 const openUpPickerSlot = ref<number | null>(null);
 const rightPanelTab = ref<"detail" | "result">("result");
-const leftPanelWidthClass = computed(() =>
-  rightPanelTab.value === "result"
-    ? "xl:w-[460px] xl:min-w-[460px]"
-    : "xl:w-[550px] xl:min-w-[460px]",
-);
+const leftPanelWidthClass = "xl:w-[550px] xl:min-w-[550px]";
 
 /* ─── Constants ─── */
 const VP_LIMIT = 5;
@@ -101,7 +101,7 @@ const lvColor = (id: string, maxLearnLv: number): string => {
   const lv = skillCfg(id).lv;
   if (lv < maxLearnLv) return "#32E432";
   if (lv > maxLearnLv) return "#58E0FC";
-  return "currentColor";
+  return "#F5F5F5";
 };
 
 /* ─── Active / detail ─── */
@@ -311,7 +311,7 @@ const resetAllSkills = () => {
         >
           <div class="min-w-max py-1" @click.self="clearActive">
             <template v-for="row in treeRows" :key="row.lv">
-              <div class="flex items-center px-1 gap-[2px] mb-px">
+              <div class="skill-tree-row flex items-center gap-[2px] px-1">
                 <!-- Level label: 34×34 (matches original) -->
                 <div
                   class="w-[34px] h-[34px] shrink-0 flex items-center justify-center text-[11px] text-muted-foreground leading-[1.2] text-center"
@@ -325,7 +325,8 @@ const resetAllSkills = () => {
                   <div
                     v-for="skill in row.extraSkills"
                     :key="skill.id"
-                    class="skill-cell"
+                    class="skill-cell has-skill"
+                    :class="{ 'is-active': activeSkillId === skill.id.toString() }"
                     :title="skill.name"
                     @click.stop="chooseSkill(skill.id.toString())"
                   >
@@ -361,15 +362,18 @@ const resetAllSkills = () => {
                         v-if="firstAwakeSkill"
                         class="awake-bind-btn"
                         :class="{ active: configStore.config.bindAwake === 50 }"
+                        :aria-pressed="configStore.config.bindAwake === 50"
                         title="绑定一觉"
                         @click.stop="setBindAwake(50)"
                       >
                         <img :src="getImageURL(firstAwakeSkill.icon)" :alt="firstAwakeSkill.name" />
+                        <span>一觉</span>
                       </button>
                       <button
                         v-if="secondAwakeSkill"
                         class="awake-bind-btn"
                         :class="{ active: configStore.config.bindAwake === 85 }"
+                        :aria-pressed="configStore.config.bindAwake === 85"
                         title="绑定二觉"
                         @click.stop="setBindAwake(85)"
                       >
@@ -377,6 +381,7 @@ const resetAllSkills = () => {
                           :src="getImageURL(secondAwakeSkill.icon)"
                           :alt="secondAwakeSkill.name"
                         />
+                        <span>二觉</span>
                       </button>
                     </div>
                     <div
@@ -384,18 +389,10 @@ const resetAllSkills = () => {
                       class="action-row"
                       @click.stop
                     >
-                      <button class="skill-btn" @click.stop="resetLv(skill.id.toString())">
-                        «
-                      </button>
-                      <button class="skill-btn" @click.stop="stepLv(skill.id.toString(), -1)">
-                        ‹
-                      </button>
-                      <button class="skill-btn" @click.stop="stepLv(skill.id.toString(), 1)">
-                        ›
-                      </button>
-                      <button class="skill-btn" @click.stop="setMaxLv(skill.id.toString())">
-                        »
-                      </button>
+                      <button class="skill-btn" title="等级归零" @click.stop="resetLv(skill.id.toString())"><img :src="minImg" alt="等级归零" /></button>
+                      <button class="skill-btn" title="等级减一" @click.stop="stepLv(skill.id.toString(), -1)"><img :src="subImg" alt="等级减一" /></button>
+                      <button class="skill-btn" title="等级加一" @click.stop="stepLv(skill.id.toString(), 1)"><img :src="addImg" alt="等级加一" /></button>
+                      <button class="skill-btn" title="加至上限" @click.stop="setMaxLv(skill.id.toString())"><img :src="maxImg" alt="加至上限" /></button>
                     </div>
                     <div
                       v-else
@@ -413,7 +410,10 @@ const resetAllSkills = () => {
                     v-for="(cell, colIdx) in row.cells"
                     :key="colIdx"
                     class="skill-cell"
-                    :class="cell ? 'cursor-pointer' : 'pointer-events-none'"
+                    :class="[
+                      cell ? 'cursor-pointer has-skill' : 'pointer-events-none',
+                      cell && activeSkillId === cell.id.toString() ? 'is-active' : '',
+                    ]"
                     :title="cell?.name"
                     @click.stop="cell && chooseSkill(cell.id.toString())"
                   >
@@ -450,6 +450,7 @@ const resetAllSkills = () => {
                           v-if="firstAwakeSkill"
                           class="awake-bind-btn"
                           :class="{ active: configStore.config.bindAwake === 50 }"
+                          :aria-pressed="configStore.config.bindAwake === 50"
                           title="绑定一觉"
                           @click.stop="setBindAwake(50)"
                         >
@@ -457,11 +458,13 @@ const resetAllSkills = () => {
                             :src="getImageURL(firstAwakeSkill.icon)"
                             :alt="firstAwakeSkill.name"
                           />
+                          <span>一觉</span>
                         </button>
                         <button
                           v-if="secondAwakeSkill"
                           class="awake-bind-btn"
                           :class="{ active: configStore.config.bindAwake === 85 }"
+                          :aria-pressed="configStore.config.bindAwake === 85"
                           title="绑定二觉"
                           @click.stop="setBindAwake(85)"
                         >
@@ -469,6 +472,7 @@ const resetAllSkills = () => {
                             :src="getImageURL(secondAwakeSkill.icon)"
                             :alt="secondAwakeSkill.name"
                           />
+                          <span>二觉</span>
                         </button>
                       </div>
                       <div
@@ -476,18 +480,10 @@ const resetAllSkills = () => {
                         class="action-row"
                         @click.stop
                       >
-                        <button class="skill-btn" @click.stop="resetLv(cell.id.toString())">
-                          «
-                        </button>
-                        <button class="skill-btn" @click.stop="stepLv(cell.id.toString(), -1)">
-                          ‹
-                        </button>
-                        <button class="skill-btn" @click.stop="stepLv(cell.id.toString(), 1)">
-                          ›
-                        </button>
-                        <button class="skill-btn" @click.stop="setMaxLv(cell.id.toString())">
-                          »
-                        </button>
+                        <button class="skill-btn" title="等级归零" @click.stop="resetLv(cell.id.toString())"><img :src="minImg" alt="等级归零" /></button>
+                        <button class="skill-btn" title="等级减一" @click.stop="stepLv(cell.id.toString(), -1)"><img :src="subImg" alt="等级减一" /></button>
+                        <button class="skill-btn" title="等级加一" @click.stop="stepLv(cell.id.toString(), 1)"><img :src="addImg" alt="等级加一" /></button>
+                        <button class="skill-btn" title="加至上限" @click.stop="setMaxLv(cell.id.toString())"><img :src="maxImg" alt="加至上限" /></button>
                       </div>
                       <div
                         v-else
@@ -878,16 +874,33 @@ const resetAllSkills = () => {
 </template>
 
 <style scoped>
-/* 35×55px skill cell — matches original dimensions */
+.skill-tree-row {
+  min-height: 80px;
+  border-bottom: 1px solid color-mix(in oklab, var(--border) 55%, transparent);
+  background: color-mix(in oklab, var(--background) 96%, var(--muted));
+}
+.skill-tree-row:nth-child(odd) {
+  background: color-mix(in oklab, var(--muted) 42%, var(--background));
+}
+
 .skill-cell {
   position: relative;
-  width: 35px;
-  height: 55px;
+  width: 42px;
+  height: 76px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
+.skill-cell.has-skill {
+  background: url("./img/skill.png") center 8px / 34px 54px no-repeat;
+}
+.skill-cell.is-active {
+  z-index: 6;
+  background-image: url("./img/skillActive.png");
+  background-position: center top;
+  background-size: 88px 78px;
+}
 
 /* Top 14px: badge row */
 .badge-row {
@@ -909,7 +922,7 @@ const resetAllSkills = () => {
 /* 28×28px icon at y=14px */
 .skill-icon {
   position: absolute;
-  top: 14px;
+  top: 13px;
   width: 28px;
   height: 28px;
   object-fit: cover;
@@ -918,54 +931,68 @@ const resetAllSkills = () => {
 
 .awake-bind-panel {
   position: absolute;
-  top: 10px;
+  top: 7px;
   left: 50%;
   z-index: 8;
   display: flex;
-  gap: 2px;
+  width: 148px;
+  height: 58px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
   transform: translateX(-50%);
-  border-radius: 4px;
-  background: color-mix(in oklab, var(--background) 88%, transparent);
-  padding: 2px;
-  box-shadow: 0 0 0 1px color-mix(in oklab, var(--border) 80%, transparent);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--popover);
+  padding: 4px;
+  color: var(--popover-foreground);
+  box-shadow: 0 8px 24px color-mix(in oklab, var(--foreground) 18%, transparent);
 }
 
 .awake-bind-btn {
-  width: 22px;
-  height: 22px;
-  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
-  border-radius: 3px;
-  overflow: hidden;
-  opacity: 0.62;
+  display: flex;
+  width: 66px;
+  height: 48px;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--background);
+  color: var(--muted-foreground);
+  font-size: 10px;
+  opacity: 0.78;
 }
 
 .awake-bind-btn.active {
   border-color: var(--primary);
+  background: var(--accent);
+  color: var(--accent-foreground);
   opacity: 1;
-  box-shadow: 0 0 0 1px var(--primary);
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 55%, transparent);
 }
 
 .awake-bind-btn img {
-  width: 100%;
-  height: 100%;
+  width: 28px;
+  height: 28px;
+  flex: 0 0 auto;
   object-fit: cover;
 }
 
 /* 4 action buttons at the bottom */
 .action-row {
   position: absolute;
-  bottom: 0;
+  bottom: 3px;
   display: flex;
   align-items: center;
   gap: 1px;
 }
 .skill-btn {
-  width: 19px;
-  height: 15px;
-  font-size: 11px;
-  background-color: color-mix(in oklab, var(--background) 90%, transparent);
-  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
-  border-radius: 2px;
+  width: 18px;
+  height: 18px;
+  border: 0;
+  padding: 0;
+  background: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -973,6 +1000,11 @@ const resetAllSkills = () => {
   font-weight: 700;
   cursor: pointer;
 }
+.skill-btn img {
+  display: block;
+  width: 18px;
+  height: 18px;
+}
 .skill-btn:hover {
   background-color: var(--muted);
 }
@@ -980,7 +1012,7 @@ const resetAllSkills = () => {
 /* Level number */
 .lv-num {
   position: absolute;
-  bottom: 2px;
+  bottom: 18px;
   font-size: 10px;
   width: 100%;
   text-align: center;
diff --git a/frontendNew/src/pages/Dcalc/Home/Index.vue b/frontendNew/src/pages/Dcalc/Home/Index.vue
index a616305b..d3c93e3e 100644
--- a/frontendNew/src/pages/Dcalc/Home/Index.vue
+++ b/frontendNew/src/pages/Dcalc/Home/Index.vue
@@ -13,11 +13,20 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
 import { getImageURL } from "@/utils";
 const router = useRouter();
 const adventures = ref<IAdventureInfo[]>([]);
 const loading = ref(false);
 const helperId = ref("");
+const versionPickerOpen = ref(false);
+const selectedAlter = ref<IAlterInfo>();
 
 const loadAdventures = async () => {
   loading.value = true;
@@ -42,10 +51,22 @@ const openAlter = (alter: IAlterInfo) => {
   if (!alter.open) {
     return;
   }
+  if (alter.options?.length) {
+    selectedAlter.value = alter;
+    versionPickerOpen.value = true;
+    return;
+  }
   const target = alter.value || alter.name;
   router.push(`/dcalc/character/${target}/equipment`);
 };
 
+const openAlterOption = (value?: string, name?: string) => {
+  const target = value || name;
+  if (!target) return;
+  versionPickerOpen.value = false;
+  router.push(`/dcalc/character/${target}/equipment`);
+};
+
 const gotoHelper = () => {
   if (!helperId.value.trim()) {
     router.push("/dcalc/dnfhelper");
@@ -126,5 +147,28 @@ onMounted(() => {
         赣ICP备2023003492号
       </a>
     </div>
+
+    <Sheet v-model:open="versionPickerOpen">
+      <SheetContent class="w-full sm:max-w-sm">
+        <SheetHeader>
+          <SheetTitle>选择职业版本</SheetTitle>
+          <SheetDescription>
+            {{ selectedAlter?.title }} 提供多个计算入口，请选择需要使用的版本。
+          </SheetDescription>
+        </SheetHeader>
+        <div class="flex flex-col gap-2 px-4">
+          <Button
+            v-for="option in selectedAlter?.options || []"
+            :key="option.value || option.name"
+            variant="outline"
+            class="h-auto justify-between py-3"
+            @click="openAlterOption(option.value, option.name)"
+          >
+            <span>{{ option.title }}</span>
+            <ArrowRight data-icon="inline-end" />
+          </Button>
+        </div>
+      </SheetContent>
+    </Sheet>
   </main>
 </template>
diff --git a/frontendNew/src/stores/config.ts b/frontendNew/src/stores/config.ts
index b1f82966..bec6e7ad 100644
--- a/frontendNew/src/stores/config.ts
+++ b/frontendNew/src/stores/config.ts
@@ -34,6 +34,7 @@ export interface IConfigEquip {
 export interface IConfigOath {
   id: string;
   adaptation: number;
+  upgrade: number[];
 }
 
 export interface IConfigEmblem {
@@ -107,6 +108,7 @@ const defaultAvatarConfig = {
 const createDefaultOathConfig = (): IConfigOath => ({
   id: "",
   adaptation: 0,
+  upgrade: [0, 0, 0, 0],
 });
 
 const defaultOathConfig = createDefaultOathConfig();
@@ -118,22 +120,24 @@ const createDefaultEmblemConfig = (): IConfigEmblem => ({
 
 const defaultEmblemConfig = createDefaultEmblemConfig();
 
+const createDefaultConfig = (): IConfig => ({
+  skills: {},
+  equips: {},
+  oaths: {},
+  oathSkill: "1",
+  jades: {},
+  avatar: {},
+  sundry: {},
+  bindAwake: 50,
+  DSB: false,
+  BUFF: false,
+  options: {},
+  avatarLink: "",
+  emblems: {},
+});
+
 export const useConfigStore = defineStore("configStore", () => {
-  const config = ref<IConfig>({
-    skills: {},
-    equips: {},
-    oaths: {},
-    oathSkill: "1",
-    jades: {},
-    avatar: {},
-    sundry: {},
-    bindAwake: 50,
-    DSB: false,
-    BUFF: false,
-    options: {},
-    avatarLink: "",
-    emblems: {},
-  });
+  const config = ref<IConfig>(createDefaultConfig());
 
   const skillCountConfig = ref<IResultSkillCount[]>([]);
   const changeSourceLogs = ref<IChangeSourceLog[]>([]);
@@ -142,32 +146,22 @@ export const useConfigStore = defineStore("configStore", () => {
     const infoStore = useInfoStore();
     const alter = infoStore.infos?.alter;
 
+    // A character with no persisted data must start clean instead of inheriting the last role's
+    // in-memory configuration or skill-count overrides.
+    config.value = createDefaultConfig();
+    skillCountConfig.value = [];
+
     if (alter) {
       const localConfig = localStorage.getItem(`dcalc/${alter}/config`);
       const localSkillConfig = localStorage.getItem(`dcalc/${alter}/config/skillCount`);
-      if (localConfig) {
-        config.value = JSON.parse(localConfig);
+      try {
+        if (localConfig) config.value = JSON.parse(localConfig) as IConfig;
+        if (localSkillConfig) skillCountConfig.value = JSON.parse(localSkillConfig) as IResultSkillCount[];
+      } catch {
+        // Ignore malformed legacy browser data and continue with the current schema defaults.
+        config.value = createDefaultConfig();
+        skillCountConfig.value = [];
       }
-      if (localSkillConfig) {
-        skillCountConfig.value = JSON.parse(localSkillConfig);
-      }
-    }
-    if (!config.value) {
-      config.value = {
-        skills: {},
-        equips: {},
-        oaths: {},
-        oathSkill: "1",
-        jades: {},
-        avatar: {},
-        sundry: {},
-        bindAwake: 50,
-        DSB: false,
-        BUFF: false,
-        options: {},
-        avatarLink: "",
-        emblems: {},
-      };
     }
     if (!config.value?.equips) config.value.equips = {};
     if (!config.value?.skills) config.value.skills = {};
@@ -205,6 +199,8 @@ export const useConfigStore = defineStore("configStore", () => {
       config.value &&
         !config.value?.oaths.hasOwnProperty(p) &&
         (config.value.oaths[p.toString()] = createDefaultOathConfig());
+      const oath = config.value.oaths[p.toString()];
+      if (oath && !Array.isArray(oath.upgrade)) oath.upgrade = [0, 0, 0, 0];
     });
 
     infoStore.options.forEach((option) => {
@@ -310,6 +306,7 @@ export const useConfigStore = defineStore("configStore", () => {
     chooseEqu,
     skillCountConfig,
     defaultEqusConfig,
+    createDefaultConfig,
     defaultAvatarConfig,
     defaultOathConfig,
     createDefaultOathConfig,
diff --git a/frontendNew/src/stores/info.ts b/frontendNew/src/stores/info.ts
index 69ca1749..471b85e9 100644
--- a/frontendNew/src/stores/info.ts
+++ b/frontendNew/src/stores/info.ts
@@ -163,9 +163,17 @@ export const useInfoStore = defineStore("infoStore", () => {
 
   const createCharacter = async (alter: string, equVersion?: string) => {
     const time = new Date().getTime();
-    alter_token.value = btoa(JSON.stringify({ alter, equVersion, time }));
-    infos.value = await api.characterInfo();
+    const token = btoa(JSON.stringify({ alter, equVersion, time }));
+    alter_token.value = token;
+    const nextInfos = await api.characterInfo();
+
+    // Navigation can start another character request before this one returns. In that case the
+    // latest Alter-Token owns the store and this response must not overwrite it.
+    if (alter_token.value !== token) return false;
+
+    infos.value = nextInfos;
     useConfigStore().loadConfig();
+    return true;
   };
 
   return {
diff --git a/scripts/image.js b/scripts/image.js
index 772cf1a5..7b981db0 100644
--- a/scripts/image.js
+++ b/scripts/image.js
@@ -2,37 +2,177 @@ const http = require('http');
 const fs = require('fs');
 const path = require('path');
 
-const hostname = '127.0.0.1';
-const port = 3000;
+const hostname = process.env.IMAGE_HOST || '127.0.0.1';
+const port = Number.parseInt(process.env.IMAGE_PORT || '3000', 10);
+const directoryPath = path.resolve(__dirname, '../images');
+const maxCacheBytes = Number.parseInt(process.env.IMAGE_CACHE_MAX_MB || '128', 10) * 1024 * 1024;
+const maxCacheItemBytes =
+  Number.parseInt(process.env.IMAGE_CACHE_ITEM_MAX_MB || '4', 10) * 1024 * 1024;
+const browserCacheSeconds = Number.parseInt(
+  process.env.IMAGE_BROWSER_CACHE_SECONDS || '3600',
+  10,
+);
 
-const ImageServer = http.createServer((req, res) => {
-    // 图片存储的文件夹路径
-    const directoryPath = path.join(__dirname, '../images');
-    // 请求的图片文件名
-    const filePath = path.join(directoryPath, decodeURIComponent(req.url));
-    // 确保文件存在且是文件，不是目录
-    fs.access(filePath, fs.constants.F_OK | fs.constants.R_OK, (err) => {
-        if (err) {
-            res.writeHead(404, 'Not Found');
-            res.end('Oops. Image not found!');
-        } else {
-            // 读取图片文件并发送响应
-            fs.readFile(filePath, (err, data) => {
-                if (err) {
-                    res.writeHead(500, 'Server Error');
-                    res.end('Oops. There was a server error!');
-                } else {
-                    res.writeHead(200, { 'Content-Type': 'image/jpeg' });
-                    res.end(data);
-                }
-            });
-        }
-    });
+const mimeTypes = {
+  '.avif': 'image/avif',
+  '.bmp': 'image/bmp',
+  '.gif': 'image/gif',
+  '.ico': 'image/x-icon',
+  '.jpeg': 'image/jpeg',
+  '.jpg': 'image/jpeg',
+  '.png': 'image/png',
+  '.svg': 'image/svg+xml',
+  '.webp': 'image/webp',
+};
+
+/** @type {Map<string, { data: Buffer, contentType: string, etag: string, modified: string }>} */
+const memoryCache = new Map();
+/** @type {Map<string, Promise<{ data: Buffer, contentType: string, etag: string, modified: string }>>} */
+const pendingReads = new Map();
+let cachedBytes = 0;
+
+function removeCacheEntry(filePath) {
+  const entry = memoryCache.get(filePath);
+  if (!entry) return;
+  cachedBytes -= entry.data.byteLength;
+  memoryCache.delete(filePath);
+}
+
+function cacheEntry(filePath, entry) {
+  if (entry.data.byteLength > maxCacheItemBytes || maxCacheBytes <= 0) return;
+
+  removeCacheEntry(filePath);
+  while (cachedBytes + entry.data.byteLength > maxCacheBytes && memoryCache.size) {
+    const oldestPath = memoryCache.keys().next().value;
+    if (!oldestPath) break;
+    removeCacheEntry(oldestPath);
+  }
+
+  memoryCache.set(filePath, entry);
+  cachedBytes += entry.data.byteLength;
+}
+
+function getCachedEntry(filePath) {
+  const entry = memoryCache.get(filePath);
+  if (!entry) return undefined;
+  memoryCache.delete(filePath);
+  memoryCache.set(filePath, entry);
+  return entry;
+}
+
+async function readImage(filePath) {
+  const cached = getCachedEntry(filePath);
+  if (cached) return cached;
+
+  const pending = pendingReads.get(filePath);
+  if (pending) return pending;
+
+  const readPromise = (async () => {
+    const handle = await fs.promises.open(filePath, 'r');
+    try {
+      const stat = await handle.stat();
+      if (!stat.isFile()) {
+        const error = new Error('Not a file');
+        error.code = 'ENOENT';
+        throw error;
+      }
+
+      const data = await handle.readFile();
+      const entry = {
+        data,
+        contentType: mimeTypes[path.extname(filePath).toLowerCase()] || 'application/octet-stream',
+        etag: `W/"${stat.size.toString(16)}-${Math.trunc(stat.mtimeMs).toString(16)}"`,
+        modified: stat.mtime.toUTCString(),
+      };
+      cacheEntry(filePath, entry);
+      return entry;
+    } finally {
+      await handle.close();
+    }
+  })();
+
+  pendingReads.set(filePath, readPromise);
+  try {
+    return await readPromise;
+  } finally {
+    pendingReads.delete(filePath);
+  }
+}
+
+function resolveImagePath(requestUrl) {
+  let pathname;
+  try {
+    pathname = decodeURIComponent(new URL(requestUrl, 'http://localhost').pathname);
+  } catch {
+    return undefined;
+  }
+
+  const relativePath = pathname.replace(/^[/\\]+/, '');
+  const filePath = path.resolve(directoryPath, relativePath);
+  const relativeToRoot = path.relative(directoryPath, filePath);
+  if (relativeToRoot.startsWith('..') || path.isAbsolute(relativeToRoot)) return undefined;
+  return filePath;
+}
+
+function sendText(res, statusCode, message) {
+  res.writeHead(statusCode, {
+    'Content-Type': 'text/plain; charset=utf-8',
+    'Content-Length': Buffer.byteLength(message),
+  });
+  res.end(message);
+}
+
+const ImageServer = http.createServer(async (req, res) => {
+  if (req.method !== 'GET' && req.method !== 'HEAD') {
+    res.setHeader('Allow', 'GET, HEAD');
+    sendText(res, 405, 'Method not allowed');
+    return;
+  }
+
+  const filePath = resolveImagePath(req.url || '/');
+  if (!filePath) {
+    sendText(res, 400, 'Invalid image path');
+    return;
+  }
+
+  try {
+    const entry = await readImage(filePath);
+    const headers = {
+      'Content-Type': entry.contentType,
+      'Content-Length': entry.data.byteLength,
+      'Cache-Control': `public, max-age=${browserCacheSeconds}`,
+      ETag: entry.etag,
+      'Last-Modified': entry.modified,
+      'X-Content-Type-Options': 'nosniff',
+    };
+
+    if (req.headers['if-none-match'] === entry.etag) {
+      res.writeHead(304, headers);
+      res.end();
+      return;
+    }
+
+    res.writeHead(200, headers);
+    res.end(req.method === 'HEAD' ? undefined : entry.data);
+  } catch (error) {
+    if (error && (error.code === 'ENOENT' || error.code === 'EISDIR')) {
+      sendText(res, 404, 'Image not found');
+      return;
+    }
+    console.error(`Failed to serve ${filePath}:`, error);
+    sendText(res, 500, 'Image server error');
+  }
 });
 
+ImageServer.keepAliveTimeout = 65_000;
+ImageServer.headersTimeout = 66_000;
+
 ImageServer.listen(port, hostname, () => {
-    console.log(`Server running at http://${hostname}:${port}/`);
-    console.log('Press CTRL+C to stop the server');
+  console.log(`Image server running at http://${hostname}:${port}/`);
+  console.log(
+    `Memory cache: ${Math.round(maxCacheBytes / 1024 / 1024)} MB, browser cache: ${browserCacheSeconds}s`,
+  );
+  console.log('Press CTRL+C to stop the server');
 });
 
-exports.ImageServer = ImageServer;
\ No newline at end of file
+exports.ImageServer = ImageServer;