From 4a198101f1f978571be5711fbe56ffe6fb2b60b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A5=BF=E7=93=9C=C2=B0?= <wxh_email@yeah.net>
Date: Mon, 11 May 2026 14:42:22 +0800
Subject: [PATCH] dev

---
 frontendNew/MIGRATION_PLAN.md                 |  60 ++
 .../src/pages/Dcalc/Character/Forge/index.vue | 729 +++++++++++++++++-
 .../src/pages/Dcalc/Character/Index.vue       |  38 +-
 .../pages/Dcalc/Character/Result/Index.vue    | 208 +++++
 .../Dcalc/Character/Skill/img/awake_50.png    | Bin 0 -> 3299 bytes
 .../Dcalc/Character/Skill/img/awake_85.png    | Bin 0 -> 3372 bytes
 .../pages/Dcalc/Character/Skill/img/skill.png | Bin 0 -> 545 bytes
 .../Dcalc/Character/Skill/img/skillActive.png | Bin 0 -> 1391 bytes
 .../pages/Dcalc/Character/Skill/img/up_1.png  | Bin 0 -> 1001 bytes
 .../pages/Dcalc/Character/Skill/img/up_2.png  | Bin 0 -> 1029 bytes
 .../pages/Dcalc/Character/Skill/img/vp_1.png  | Bin 0 -> 736 bytes
 .../pages/Dcalc/Character/Skill/img/vp_2.png  | Bin 0 -> 681 bytes
 .../src/pages/Dcalc/Character/Skill/index.vue | 705 ++++++++++++++++-
 frontendNew/src/stores/config.ts              |  27 +-
 14 files changed, 1687 insertions(+), 80 deletions(-)
 create mode 100644 frontendNew/MIGRATION_PLAN.md
 create mode 100644 frontendNew/src/pages/Dcalc/Character/Result/Index.vue
 create mode 100644 frontendNew/src/pages/Dcalc/Character/Skill/img/awake_50.png
 create mode 100644 frontendNew/src/pages/Dcalc/Character/Skill/img/awake_85.png
 create mode 100644 frontendNew/src/pages/Dcalc/Character/Skill/img/skill.png
 create mode 100644 frontendNew/src/pages/Dcalc/Character/Skill/img/skillActive.png
 create mode 100644 frontendNew/src/pages/Dcalc/Character/Skill/img/up_1.png
 create mode 100644 frontendNew/src/pages/Dcalc/Character/Skill/img/up_2.png
 create mode 100644 frontendNew/src/pages/Dcalc/Character/Skill/img/vp_1.png
 create mode 100644 frontendNew/src/pages/Dcalc/Character/Skill/img/vp_2.png

diff --git a/frontendNew/MIGRATION_PLAN.md b/frontendNew/MIGRATION_PLAN.md
new file mode 100644
index 00000000..cdff3bed
--- /dev/null
+++ b/frontendNew/MIGRATION_PLAN.md
@@ -0,0 +1,60 @@
+# frontend -> frontendNew 迁移计划（执行中）
+
+## 目标
+
+- 以 frontendNew 为主线承接 dcalc 核心能力。
+- 已完成的 equipment 作为基线，不重做主体，仅做一致性优化。
+- 当前优先迁移 Skill、Forge、Result，策略为“核心功能优先，视觉后置”。
+- 迁移期间保持 frontend 与 frontendNew 双端并行可用。
+
+## 当前状态
+
+- 已完成：`Character/EquipmentDictionary` 主体迁移并接入路由。
+- 进行中：`Character/Skill`、`Character/Forge` 从占位页向可编辑页迁移。
+- 新启动：`Character/Result` 结果面板接入与自动计算链路。
+
+## 分阶段计划
+
+### Phase 1 - 共享链路打通
+
+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 页面接入配置变更自动计算与离开页面自动保存。
diff --git a/frontendNew/src/pages/Dcalc/Character/Forge/index.vue b/frontendNew/src/pages/Dcalc/Character/Forge/index.vue
index d8908fe5..5304d24a 100644
--- a/frontendNew/src/pages/Dcalc/Character/Forge/index.vue
+++ b/frontendNew/src/pages/Dcalc/Character/Forge/index.vue
@@ -1,13 +1,55 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { Hammer, ShieldCheck, Sparkles } from "lucide-vue-next";
 import { useConfigStore, useInfoStore } from "@/stores";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 
 const configStore = useConfigStore();
 const infoStore = useInfoStore();
 
+const moduleMode = ref<"equip" | "oath" | "avatar" | "global">("equip");
+const notice = ref("");
+const noticeType = ref<"error" | "info">("info");
+
+const avatarPart = ref("头部");
+const emblemPart = ref("彩色");
+const avatarOptionKeyword = ref("");
+const emblemOptionKeyword = ref("");
+const onlyConfiguredAvatarParts = ref(false);
+const onlyConfiguredEmblemSlots = ref(false);
+
+const noEnchantAvatarParts = ["头部", "帽子", "脸部", "胸部", "上衣", "腰带", "下装", "鞋"];
+
+const emblemLevels = [
+  "稀有Lv.1",
+  "稀有Lv.2",
+  "稀有Lv.3",
+  "稀有Lv.4",
+  "稀有Lv.5",
+  "神器Lv.1",
+  "神器Lv.2",
+  "神器Lv.3",
+  "神器Lv.4",
+  "神器Lv.5",
+  "传说Lv.1",
+  "传说Lv.2",
+  "传说Lv.3",
+  "传说Lv.4",
+  "传说Lv.5",
+  "史诗Lv.1",
+];
+
+const setNotice = (message: string, type: "error" | "info" = "info") => {
+  notice.value = message;
+  noticeType.value = type;
+};
+
+const trackSource = (detail: string) => {
+  configStore.pushChangeSource("Forge", detail);
+};
+
 const summary = computed(() => {
   const equipCount = Object.values(configStore.config.equips || {}).filter(
     (item) => !!item.id,
@@ -18,59 +60,672 @@ const summary = computed(() => {
   const oathCount = Object.values(configStore.config.oaths || {}).filter(
     (item) => !!item.id,
   ).length;
+  const emblemCount = Object.values(configStore.config.emblems || {}).reduce((acc, item) => {
+    return acc + (item.items?.filter(Boolean).length ?? 0);
+  }, 0);
 
   return {
     equipCount,
     avatarCount,
     oathCount,
+    emblemCount,
     emblemSlots: infoStore.emblemParts.length,
   };
 });
+
+const parts = computed(() => infoStore.parts.filter((part) => configStore.config.equips[part]));
+const oathParts = computed(() =>
+  infoStore.oathParts.filter((part) => configStore.config.oaths[part]),
+);
+const avatarParts = computed(() => {
+  const all = infoStore.avatarParts.filter((part) => !!configStore.config.avatar[part]);
+  if (!onlyConfiguredAvatarParts.value) return all;
+  return all.filter((part) => {
+    const cfg = configStore.config.avatar[part];
+    if (!cfg) return false;
+    return !!cfg.id || !!cfg.enchant || !!cfg.emblem_0 || !!cfg.emblem_1 || cfg.option !== "0";
+  });
+});
+
+const oathNameById = computed(() => {
+  const map = new Map<string, string>();
+  infoStore.oaths.forEach((item) => {
+    if (!map.has(item.id)) {
+      map.set(item.id, item.name);
+    }
+  });
+  return map;
+});
+
+const equipNameById = computed(() => {
+  const map = new Map<string, string>();
+  infoStore.equips.forEach((item) => map.set(item.id, item.name));
+  return map;
+});
+
+const avatarEnchantOptions = computed(() => {
+  const keyword = avatarOptionKeyword.value.trim().toLowerCase();
+  return infoStore.enchants
+    .filter((item) => item.position.includes(avatarPart.value))
+    .filter((item) => !keyword || item.detail.toLowerCase().includes(keyword))
+    .sort((a, b) => (b.fame ?? 0) - (a.fame ?? 0));
+});
+
+const avatarSuitOptions = computed(() => {
+  return infoStore.avatars[avatarPart.value] ?? [];
+});
+
+const avatarEmblemOptions = computed(() => {
+  const keyword = avatarOptionKeyword.value.trim().toLowerCase();
+  return infoStore.emblems
+    .filter((item) => item.type !== "白金")
+    .filter((item) => {
+      if (!keyword) return true;
+      return (
+        item.value.toLowerCase().includes(keyword) ||
+        item.rarity.toLowerCase().includes(keyword) ||
+        item.type.toLowerCase().includes(keyword)
+      );
+    })
+    .sort((a, b) => b.fame - a.fame);
+});
+
+const hasAvatarEnchant = computed(() => !noEnchantAvatarParts.includes(avatarPart.value));
+
+const emblemOptions = computed(() => {
+  const keyword = emblemOptionKeyword.value.trim().toLowerCase();
+  const selected = new Set((emblemCfg.value.items || []).filter(Boolean));
+
+  if (emblemPart.value === "彩色") {
+    return infoStore.emblems
+      .filter((a) => a.type !== "白金")
+      .filter((a) => {
+        const keywordOk =
+          !keyword ||
+          a.value.toLowerCase().includes(keyword) ||
+          a.rarity.toLowerCase().includes(keyword) ||
+          a.type.toLowerCase().includes(keyword);
+        const configuredOk = !onlyConfiguredEmblemSlots.value || selected.has(String(a.id));
+        return keywordOk && configuredOk;
+      })
+      .sort((a, b) => b.fame - a.fame);
+  }
+
+  return infoStore.emblems
+    .filter((a) => {
+      const color = emblemPart.value.charAt(0);
+      return a.type === emblemPart.value || a.type === "彩色" || a.type.includes(color);
+    })
+    .filter((a) => {
+      const keywordOk =
+        !keyword ||
+        a.value.toLowerCase().includes(keyword) ||
+        a.rarity.toLowerCase().includes(keyword) ||
+        a.type.toLowerCase().includes(keyword);
+      const configuredOk = !onlyConfiguredEmblemSlots.value || selected.has(String(a.id));
+      return keywordOk && configuredOk;
+    })
+    .sort((a, b) => b.fame - a.fame);
+});
+
+const emblemMaxCount = computed(() => {
+  if (emblemPart.value === "彩色") return 6;
+  if (emblemPart.value === "白金") return 2;
+  return 4;
+});
+
+const setNumberField = (
+  part: string,
+  field: "reinforce" | "refine" | "adaptation",
+  value: string,
+) => {
+  const target = configStore.config.equips[part];
+  if (!target) return;
+
+  const parsed = Number.parseInt(value || "0", 10);
+  if (Number.isNaN(parsed)) {
+    setNotice(`${part} 的输入无效，请输入数字。`, "error");
+    return;
+  }
+
+  target[field] = Math.max(0, parsed);
+  setNotice(`已更新 ${part} 的打造参数。`);
+};
+
+const setOathAdaptation = (part: string, value: string) => {
+  const target = configStore.config.oaths[part];
+  if (!target) return;
+
+  const parsed = Number.parseInt(value || "0", 10);
+  if (Number.isNaN(parsed)) {
+    setNotice(`誓约槽位 ${part} 的输入无效，请输入数字。`, "error");
+    return;
+  }
+
+  target.adaptation = Math.max(0, parsed);
+  setNotice(`已更新誓约槽位 ${part} 的适配值。`);
+};
+
+const equipCfg = (part: string) => configStore.config.equips[part] ?? configStore.defaultEqusConfig;
+const oathCfg = (part: string) => configStore.config.oaths[part] ?? configStore.defaultOathConfig;
+const avatarCfg = (part: string) =>
+  configStore.config.avatar[part] ?? configStore.defaultAvatarConfig;
+
+const ensureAvatarPart = (part: string) => {
+  if (!configStore.config.avatar[part]) {
+    configStore.config.avatar[part] = { ...configStore.defaultAvatarConfig };
+  }
+  return configStore.config.avatar[part];
+};
+
+const setAvatarField = (
+  field: "id" | "enchant" | "emblem_0" | "emblem_1" | "option",
+  value: string,
+) => {
+  const target = ensureAvatarPart(avatarPart.value);
+  target[field] = value;
+
+  if (field === "id") {
+    const options =
+      avatarSuitOptions.value.find((item) => item.id.toString() === value)?.options ?? [];
+    if (options.length === 0) {
+      target.option = "0";
+    } else if (!options.includes(target.option)) {
+      target.option = options[0] ?? "0";
+    }
+  }
+
+  setNotice(`已更新 ${avatarPart.value} 的配置。`);
+  trackSource(`时装 ${avatarPart.value} ${field} 已更新`);
+};
+
+const resetAvatarPart = () => {
+  configStore.config.avatar[avatarPart.value] = { ...configStore.defaultAvatarConfig };
+  setNotice(`已重置 ${avatarPart.value} 配置。`);
+  trackSource(`时装 ${avatarPart.value} 已重置`);
+};
+
+const ensureEmblemPart = (part: string) => {
+  if (!configStore.config.emblems[part]) {
+    configStore.config.emblems[part] = { ...configStore.defaultEmblemConfig };
+  }
+  return configStore.config.emblems[part];
+};
+
+const emblemCfg = computed(() => ensureEmblemPart(emblemPart.value));
+
+const setEmblemLv = (value: string) => {
+  const parsed = Number.parseInt(value || "0", 10);
+  if (Number.isNaN(parsed)) {
+    setNotice("徽章等级输入无效。", "error");
+    return;
+  }
+
+  const target = ensureEmblemPart(emblemPart.value);
+  target.lv = Math.max(0, Math.min(parsed, emblemLevels.length - 1));
+
+  if (emblemPart.value === "彩色") {
+    ["红色", "蓝色", "黄色", "绿色"].forEach((part) => {
+      const partCfg = ensureEmblemPart(part);
+      partCfg.lv = Math.max(partCfg.lv || 0, target.lv);
+    });
+  } else {
+    const colorCfg = ensureEmblemPart("彩色");
+    colorCfg.lv = Math.min(colorCfg.lv || 0, target.lv);
+  }
+
+  setNotice(`已更新 ${emblemPart.value} 徽章等级。`);
+  trackSource(`徽章 ${emblemPart.value} 等级已更新`);
+};
+
+const setEmblemItem = (index: number, value: string) => {
+  const target = ensureEmblemPart(emblemPart.value);
+  const items = [...(target.items ?? configStore.defaultEmblemConfig.items)];
+  while (items.length < 6) items.push("");
+  items[index] = value;
+  target.items = items;
+  setNotice(`已更新 ${emblemPart.value} 徽章位 ${index + 1}。`);
+  trackSource(`徽章 ${emblemPart.value} 槽位 ${index + 1} 已更新`);
+};
+
+const resetEmblemPart = () => {
+  configStore.config.emblems[emblemPart.value] = { ...configStore.defaultEmblemConfig };
+  setNotice(`已重置 ${emblemPart.value} 徽章配置。`);
+  trackSource(`徽章 ${emblemPart.value} 已重置`);
+};
+
+const resetEquipPart = (part: string) => {
+  configStore.config.equips[part] = {
+    ...configStore.defaultEqusConfig,
+    id: configStore.config.equips[part]?.id ?? "",
+  };
+  setNotice(`已重置 ${part} 的打造参数。`);
+  trackSource(`装备 ${part} 打造参数已重置`);
+};
+
+const resetOathPart = (part: string) => {
+  configStore.config.oaths[part] = {
+    ...configStore.defaultOathConfig,
+    id: configStore.config.oaths[part]?.id ?? "",
+  };
+  setNotice(`已重置誓约槽位 ${part}。`);
+  trackSource(`誓约槽位 ${part} 已重置`);
+};
+
+const resetAllForge = () => {
+  parts.value.forEach((part) => {
+    configStore.config.equips[part] = {
+      ...configStore.defaultEqusConfig,
+      id: configStore.config.equips[part]?.id ?? "",
+    };
+  });
+  oathParts.value.forEach((part) => {
+    configStore.config.oaths[part] = {
+      ...configStore.defaultOathConfig,
+      id: configStore.config.oaths[part]?.id ?? "",
+    };
+  });
+  avatarParts.value.forEach((part) => {
+    configStore.config.avatar[part] = { ...configStore.defaultAvatarConfig };
+  });
+  infoStore.emblemParts.forEach((part) => {
+    configStore.config.emblems[part] = { ...configStore.defaultEmblemConfig };
+  });
+  setNotice("已重置当前角色的打造参数。", "info");
+  trackSource("当前角色 Forge 配置已快速重置");
+};
 </script>
 
 <template>
-  <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
-    <Card>
+  <div class="space-y-4">
+    <Card class="border-border/60 bg-gradient-to-b from-background to-muted/30">
       <CardHeader>
-        <CardTitle class="flex items-center gap-2">
-          <Hammer class="size-4" />
-          装备打造
+        <CardTitle class="flex flex-wrap items-center justify-between gap-2">
+          <span>Forge 面板</span>
+          <span class="text-xs font-normal text-muted-foreground">
+            装备 {{ summary.equipCount }} · 时装 {{ summary.avatarCount }} · 誓约
+            {{ summary.oathCount }} · 徽章 {{ summary.emblemCount }}
+          </span>
         </CardTitle>
-        <CardDescription>已迁移基础统计，后续补齐增幅/强化/锻造编辑器。</CardDescription>
+        <CardDescription>Forge 进阶：子模块可编辑，统一浅色/深色模式。</CardDescription>
       </CardHeader>
-      <CardContent class="space-y-2 text-sm text-muted-foreground">
-        <div>已配置装备: {{ summary.equipCount }}</div>
-        <div>誓约槽位: {{ summary.oathCount }}</div>
+      <CardContent class="space-y-4">
+        <div class="inline-flex flex-wrap rounded-md border p-1">
+          <Button
+            size="sm"
+            :variant="moduleMode === 'equip' ? 'default' : 'ghost'"
+            @click="moduleMode = 'equip'"
+          >
+            装备打造
+          </Button>
+          <Button
+            size="sm"
+            :variant="moduleMode === 'oath' ? 'default' : 'ghost'"
+            @click="moduleMode = 'oath'"
+          >
+            誓约
+          </Button>
+          <Button
+            size="sm"
+            :variant="moduleMode === 'avatar' ? 'default' : 'ghost'"
+            @click="moduleMode = 'avatar'"
+          >
+            时装徽章
+          </Button>
+          <Button
+            size="sm"
+            :variant="moduleMode === 'global' ? 'default' : 'ghost'"
+            @click="moduleMode = 'global'"
+          >
+            全局
+          </Button>
+        </div>
+
+        <div class="flex flex-wrap gap-2">
+          <Button size="sm" variant="outline" @click="resetAllForge">快速重置打造</Button>
+          <router-link to="/dcalc/dnfhelper">
+            <Button size="sm" variant="outline">前往助手导入</Button>
+          </router-link>
+        </div>
+
+        <div
+          v-if="notice"
+          class="rounded-md border px-3 py-2 text-xs"
+          :class="
+            noticeType === 'error'
+              ? 'border-destructive/40 bg-destructive/10 text-destructive'
+              : 'border-border/60 bg-muted/40 text-muted-foreground'
+          "
+        >
+          {{ notice }}
+        </div>
       </CardContent>
     </Card>
 
-    <Card>
-      <CardHeader>
-        <CardTitle class="flex items-center gap-2">
-          <Sparkles class="size-4" />
-          时装与徽章
-        </CardTitle>
-        <CardDescription>保留旧版数据结构，逐步替换为 shadcn-vue 控件。</CardDescription>
-      </CardHeader>
-      <CardContent class="space-y-2 text-sm text-muted-foreground">
-        <div>已配置时装: {{ summary.avatarCount }}</div>
-        <div>徽章位类型: {{ summary.emblemSlots }}</div>
-      </CardContent>
-    </Card>
+    <div v-if="moduleMode === 'equip'" class="grid grid-cols-1 gap-4">
+      <Card class="border-border/60 bg-card/90">
+        <CardHeader>
+          <CardTitle class="flex items-center gap-2">
+            <Hammer class="size-4" />
+            装备打造编辑器
+          </CardTitle>
+          <CardDescription>强化、锻造、品级编辑并即时回写配置。</CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-3">
+          <div
+            v-for="part in parts"
+            :key="part"
+            class="grid grid-cols-1 gap-2 rounded-md border p-3 text-sm md:grid-cols-[7rem_1fr_6rem_6rem_6rem_auto] md:items-center"
+          >
+            <div class="font-medium">{{ part }}</div>
+            <div class="truncate text-muted-foreground">
+              {{ equipNameById.get(equipCfg(part).id) || "未选择装备（可在装备页选择）" }}
+            </div>
+            <Input
+              :model-value="String(equipCfg(part).reinforce)"
+              type="number"
+              min="0"
+              class="h-8"
+              placeholder="强化"
+              @update:model-value="(value) => setNumberField(part, 'reinforce', String(value))"
+            />
+            <Input
+              :model-value="String(equipCfg(part).refine)"
+              type="number"
+              min="0"
+              class="h-8"
+              placeholder="锻造"
+              @update:model-value="(value) => setNumberField(part, 'refine', String(value))"
+            />
+            <Input
+              :model-value="String(equipCfg(part).adaptation)"
+              type="number"
+              min="0"
+              class="h-8"
+              placeholder="品级"
+              @update:model-value="(value) => setNumberField(part, 'adaptation', String(value))"
+            />
+            <Button size="sm" variant="ghost" @click="resetEquipPart(part)">重置</Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
 
-    <Card>
-      <CardHeader>
-        <CardTitle class="flex items-center gap-2">
-          <ShieldCheck class="size-4" />
-          助手导入
-        </CardTitle>
-        <CardDescription>沿用助手识别能力快速回填打造数据。</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <router-link to="/dcalc/dnfhelper">
-          <Button variant="outline">前往助手导入</Button>
-        </router-link>
-      </CardContent>
-    </Card>
+    <div v-if="moduleMode === 'oath'" class="grid grid-cols-1 gap-4">
+      <Card class="border-border/60 bg-card/90">
+        <CardHeader>
+          <CardTitle class="flex items-center gap-2">
+            <ShieldCheck class="size-4" />
+            誓约子模块
+          </CardTitle>
+          <CardDescription>编辑誓约槽位适配值。</CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-3">
+          <div
+            v-for="part in oathParts"
+            :key="part"
+            class="grid grid-cols-1 gap-2 rounded-md border p-3 text-sm md:grid-cols-[6rem_1fr_7rem_auto] md:items-center"
+          >
+            <div class="font-medium">槽位 {{ part }}</div>
+            <div class="truncate text-muted-foreground">
+              {{ oathNameById.get(oathCfg(part).id) || "未选择誓约（可在装备页选择）" }}
+            </div>
+            <Input
+              :model-value="String(oathCfg(part).adaptation)"
+              type="number"
+              min="0"
+              class="h-8"
+              placeholder="适配"
+              @update:model-value="(value) => setOathAdaptation(part, String(value))"
+            />
+            <Button size="sm" variant="ghost" @click="resetOathPart(part)">重置</Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+
+    <div v-if="moduleMode === 'avatar'" class="grid grid-cols-1 gap-4 xl:grid-cols-2">
+      <Card class="border-border/60 bg-card/90">
+        <CardHeader>
+          <CardTitle class="flex items-center gap-2">
+            <Sparkles class="size-4" />
+            时装编辑
+          </CardTitle>
+          <CardDescription>支持附魔、徽章项、品级和属性值编辑。</CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-3 text-sm">
+          <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">
+              <Input v-model="avatarOptionKeyword" class="h-8" placeholder="搜索附魔/徽章可选项" />
+              <label class="inline-flex items-center gap-1 text-xs whitespace-nowrap">
+                <input v-model="onlyConfiguredAvatarParts" type="checkbox" class="size-3.5" />
+                仅已配置部位
+              </label>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
+            <div class="text-muted-foreground">部位</div>
+            <select
+              class="h-8 rounded-md border border-input bg-background px-2"
+              v-model="avatarPart"
+            >
+              <option v-for="part in avatarParts" :key="part" :value="part">{{ part }}</option>
+            </select>
+          </div>
+
+          <div
+            v-if="hasAvatarEnchant"
+            class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center"
+          >
+            <div class="text-muted-foreground">附魔</div>
+            <select
+              class="h-8 rounded-md border border-input bg-background px-2"
+              :value="avatarCfg(avatarPart).enchant"
+              @change="
+                (event) => setAvatarField('enchant', (event.target as HTMLSelectElement).value)
+              "
+            >
+              <option value="">无</option>
+              <option v-for="item in avatarEnchantOptions" :key="item.id" :value="String(item.id)">
+                {{ item.detail }}
+              </option>
+            </select>
+          </div>
+
+          <template v-else>
+            <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
+              <div class="text-muted-foreground">品级</div>
+              <select
+                class="h-8 rounded-md border border-input bg-background px-2"
+                :value="avatarCfg(avatarPart).id"
+                @change="(event) => setAvatarField('id', (event.target as HTMLSelectElement).value)"
+              >
+                <option value="">未选择</option>
+                <option v-for="item in avatarSuitOptions" :key="item.id" :value="String(item.id)">
+                  {{ item.suit || item.rarity || item.name }}
+                </option>
+              </select>
+            </div>
+
+            <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
+              <div class="text-muted-foreground">属性</div>
+              <select
+                class="h-8 rounded-md border border-input bg-background px-2"
+                :value="avatarCfg(avatarPart).option"
+                @change="
+                  (event) => setAvatarField('option', (event.target as HTMLSelectElement).value)
+                "
+              >
+                <option value="0">无</option>
+                <option
+                  v-for="opt in avatarSuitOptions.find(
+                    (x) => String(x.id) === avatarCfg(avatarPart).id,
+                  )?.options || []"
+                  :key="opt"
+                  :value="opt"
+                >
+                  {{ opt }}
+                </option>
+              </select>
+            </div>
+          </template>
+
+          <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
+            <div class="text-muted-foreground">徽章一</div>
+            <select
+              class="h-8 rounded-md border border-input bg-background px-2"
+              :value="avatarCfg(avatarPart).emblem_0"
+              @change="
+                (event) => setAvatarField('emblem_0', (event.target as HTMLSelectElement).value)
+              "
+            >
+              <option value="">无</option>
+              <option v-for="item in avatarEmblemOptions" :key="item.id" :value="String(item.id)">
+                [{{ item.rarity }}] {{ item.value }}
+              </option>
+            </select>
+          </div>
+
+          <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
+            <div class="text-muted-foreground">徽章二</div>
+            <select
+              class="h-8 rounded-md border border-input bg-background px-2"
+              :value="avatarCfg(avatarPart).emblem_1"
+              @change="
+                (event) => setAvatarField('emblem_1', (event.target as HTMLSelectElement).value)
+              "
+            >
+              <option value="">无</option>
+              <option v-for="item in avatarEmblemOptions" :key="item.id" :value="String(item.id)">
+                [{{ item.rarity }}] {{ item.value }}
+              </option>
+            </select>
+          </div>
+
+          <div class="flex justify-end">
+            <Button size="sm" variant="outline" @click="resetAvatarPart">重置当前部位</Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card class="border-border/60 bg-card/90">
+        <CardHeader>
+          <CardTitle class="flex items-center gap-2">
+            <Sparkles class="size-4" />
+            徽章编辑
+          </CardTitle>
+          <CardDescription>支持等级、徽章条目与槽位数量规则。</CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-3 text-sm">
+          <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">
+              <Input v-model="emblemOptionKeyword" class="h-8" placeholder="搜索徽章可选项" />
+              <label class="inline-flex items-center gap-1 text-xs whitespace-nowrap">
+                <input v-model="onlyConfiguredEmblemSlots" type="checkbox" class="size-3.5" />
+                仅已配置项
+              </label>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
+            <div class="text-muted-foreground">槽位类型</div>
+            <select
+              class="h-8 rounded-md border border-input bg-background px-2"
+              v-model="emblemPart"
+            >
+              <option v-for="part in infoStore.emblemParts" :key="part" :value="part">
+                {{ part }}
+              </option>
+            </select>
+          </div>
+
+          <div
+            v-if="emblemPart !== '白金'"
+            class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center"
+          >
+            <div class="text-muted-foreground">等级</div>
+            <select
+              class="h-8 rounded-md border border-input bg-background px-2"
+              :value="String(emblemCfg.lv ?? 0)"
+              @change="(event) => setEmblemLv((event.target as HTMLSelectElement).value)"
+            >
+              <option v-for="(label, index) in emblemLevels" :key="label" :value="String(index)">
+                {{ label }}
+              </option>
+            </select>
+          </div>
+
+          <div class="space-y-2">
+            <div class="text-muted-foreground">徽章条目</div>
+            <div class="grid grid-cols-1 gap-2 md:grid-cols-2">
+              <div
+                v-for="index in emblemMaxCount"
+                :key="index"
+                v-show="!onlyConfiguredEmblemSlots || !!(emblemCfg.items[index - 1] || '')"
+                class="space-y-1"
+              >
+                <div class="text-xs text-muted-foreground">槽位 {{ index }}</div>
+                <select
+                  class="h-8 w-full rounded-md border border-input bg-background px-2"
+                  :value="emblemCfg.items[index - 1] || ''"
+                  @change="
+                    (event) => setEmblemItem(index - 1, (event.target as HTMLSelectElement).value)
+                  "
+                >
+                  <option value="">无</option>
+                  <option v-for="item in emblemOptions" :key="item.id" :value="String(item.id)">
+                    [{{ item.rarity }}] {{ item.value }}
+                  </option>
+                </select>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-end">
+            <Button size="sm" variant="outline" @click="resetEmblemPart">重置当前徽章槽</Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+
+    <div v-if="moduleMode === 'global'" class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+      <Card class="border-border/60 bg-card/90">
+        <CardHeader>
+          <CardTitle class="flex items-center gap-2">
+            <ShieldCheck class="size-4" />
+            计算开关
+          </CardTitle>
+          <CardDescription>从旧版 Character 页底部迁移的全局参数。</CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-2 text-sm text-muted-foreground">
+          <label class="flex items-center justify-between rounded-md border p-2">
+            <span>系统奶 DSB</span>
+            <input v-model="configStore.config.DSB" type="checkbox" class="size-4" />
+          </label>
+          <label class="flex items-center justify-between rounded-md border p-2">
+            <span>组队 BUFF</span>
+            <input v-model="configStore.config.BUFF" type="checkbox" class="size-4" />
+          </label>
+        </CardContent>
+      </Card>
+
+      <Card class="border-border/60 bg-card/90">
+        <CardHeader>
+          <CardTitle class="flex items-center gap-2">
+            <ShieldCheck class="size-4" />
+            当前统计
+          </CardTitle>
+        </CardHeader>
+        <CardContent class="space-y-2 text-sm text-muted-foreground">
+          <div>已配置装备: {{ summary.equipCount }}</div>
+          <div>誓约槽位: {{ summary.oathCount }}</div>
+          <div>已配置时装: {{ summary.avatarCount }}</div>
+          <div>已配置徽章条目: {{ summary.emblemCount }}</div>
+        </CardContent>
+      </Card>
+    </div>
   </div>
 </template>
diff --git a/frontendNew/src/pages/Dcalc/Character/Index.vue b/frontendNew/src/pages/Dcalc/Character/Index.vue
index 4c92d007..41bc8f4f 100644
--- a/frontendNew/src/pages/Dcalc/Character/Index.vue
+++ b/frontendNew/src/pages/Dcalc/Character/Index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { LoaderCircle, RefreshCcw } from "lucide-vue-next";
 import { Button } from "@/components/ui/button";
@@ -7,7 +7,8 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import Tabs from "@/components/ui/tabs/Tabs.vue";
 import TabsList from "@/components/ui/tabs/TabsList.vue";
 import TabsTrigger from "@/components/ui/tabs/TabsTrigger.vue";
-import { useInfoStore } from "@/stores";
+import { useConfigStore, useInfoStore } from "@/stores";
+import ResultPanel from "@/pages/Dcalc/Character/Result/Index.vue";
 const props = defineProps<{
   alter: string;
 }>();
@@ -15,8 +16,10 @@ const props = defineProps<{
 const route = useRoute();
 const router = useRouter();
 const infoStore = useInfoStore();
+const configStore = useConfigStore();
 const loading = ref(false);
 const loadError = ref("");
+const isExecuting = ref(false);
 
 const tabs = [
   { label: "装备", key: "equipment" },
@@ -49,6 +52,7 @@ const switchTab = (tab: (typeof tabs)[number]["key"]) => {
 
 onMounted(() => {
   loadCharacter();
+  window.addEventListener("beforeunload", configStore.saveConfig);
 });
 
 watch(
@@ -57,6 +61,27 @@ watch(
     loadCharacter();
   },
 );
+
+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 },
+);
+
+onUnmounted(() => {
+  stopConfigWatch();
+  window.removeEventListener("beforeunload", configStore.saveConfig);
+  configStore.saveConfig();
+});
 </script>
 
 <template>
@@ -98,8 +123,13 @@ watch(
       </CardContent>
     </Card>
 
-    <div class="min-w-0 flex-1">
-      <router-view />
+    <div class="grid min-h-0 flex-1 grid-cols-1 gap-4 xl:grid-cols-[minmax(0,1fr)_22rem]">
+      <div class="min-w-0 overflow-hidden">
+        <router-view />
+      </div>
+      <aside class="min-h-0">
+        <ResultPanel />
+      </aside>
     </div>
   </section>
 </template>
diff --git a/frontendNew/src/pages/Dcalc/Character/Result/Index.vue b/frontendNew/src/pages/Dcalc/Character/Result/Index.vue
new file mode 100644
index 00000000..ffac9cf5
--- /dev/null
+++ b/frontendNew/src/pages/Dcalc/Character/Result/Index.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useConfigStore, useInfoStore } from "@/stores";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import Tabs from "@/components/ui/tabs/Tabs.vue";
+import TabsList from "@/components/ui/tabs/TabsList.vue";
+import TabsTrigger from "@/components/ui/tabs/TabsTrigger.vue";
+
+const configStore = useConfigStore();
+const infoStore = useInfoStore();
+
+const displayTab = ref<"equ" | "oath">("equ");
+const skillSort = ref<"damage" | "cd">("damage");
+
+const resultState = computed(() => configStore.result.state);
+const isLoading = computed(() => configStore.result.isLoading);
+const resultError = computed(() => {
+  const error = configStore.result.error;
+  if (!error) return "";
+  return error instanceof Error ? error.message : String(error);
+});
+
+const sortedSkills = computed(() => {
+  const skills = [...(resultState.value?.skills ?? [])];
+  if (skillSort.value === "cd") {
+    return skills.sort((left, right) => left.cd - right.cd);
+  }
+  return skills.sort((left, right) => right.damage - left.damage);
+});
+
+const totalDamage = computed(() => {
+  return sortedSkills.value.reduce((sum, item) => sum + item.damage, 0);
+});
+
+const formatNumber = (value: number) => {
+  if (!Number.isFinite(value)) return "0";
+  if (Math.abs(value) >= 100000000) {
+    return `${(value / 100000000).toFixed(2)}e`;
+  }
+  return value.toLocaleString("zh-CN", { maximumFractionDigits: 2 });
+};
+
+const setStandard = () => {
+  if (!resultState.value?.uuid) return;
+  infoStore.setStandard(resultState.value, configStore.skillCountConfig);
+};
+
+const clearStandard = () => {
+  infoStore.setStandard(undefined);
+};
+
+const changeSources = computed(() => configStore.changeSourceLogs.slice(0, 8));
+
+const clearChangeSources = () => {
+  configStore.clearChangeSource();
+};
+</script>
+
+<template>
+  <div class="grid h-full min-h-0 grid-rows-[auto_auto_1fr] gap-3">
+    <Card>
+      <CardHeader class="pb-2">
+        <CardTitle class="text-base">结果面板</CardTitle>
+        <CardDescription>展示当前配置的实时计算结果。</CardDescription>
+      </CardHeader>
+      <CardContent class="flex gap-2">
+        <Button size="sm" variant="outline" @click="setStandard">设为基准</Button>
+        <Button size="sm" variant="outline" @click="clearStandard">清空基准</Button>
+      </CardContent>
+    </Card>
+
+    <Card>
+      <CardHeader class="pb-2">
+        <CardTitle class="text-sm">套装摘要</CardTitle>
+      </CardHeader>
+      <CardContent class="space-y-2 text-xs">
+        <Tabs :model-value="displayTab">
+          <TabsList class="grid w-full grid-cols-2">
+            <TabsTrigger value="equ" @click="displayTab = 'equ'">装备</TabsTrigger>
+            <TabsTrigger value="oath" @click="displayTab = 'oath'">誓约</TabsTrigger>
+          </TabsList>
+        </Tabs>
+
+        <div v-if="displayTab === 'equ'" class="rounded-md border p-2">
+          <div v-if="resultState?.suits?.suit">
+            <div class="font-medium">{{ resultState.suits.suit.name }}</div>
+            <div class="text-muted-foreground">
+              {{ resultState.suits.suit.rarity }} · {{ resultState.suits.suit.point }}点
+            </div>
+          </div>
+          <div v-else class="text-muted-foreground">暂无装备套装信息</div>
+        </div>
+
+        <div v-else class="rounded-md border p-2">
+          <div v-if="resultState?.suits?.oath">
+            <div class="font-medium">{{ resultState.suits.oath.name }}</div>
+            <div class="text-muted-foreground">
+              {{ resultState.suits.oath.rarity }} · {{ resultState.suits.oath.point }}点
+            </div>
+          </div>
+          <div v-else class="text-muted-foreground">暂无誓约套装信息</div>
+        </div>
+
+        <div v-if="resultState?.suits?.correction" class="text-muted-foreground">
+          套装积分修正：{{ resultState.suits.correction }}
+        </div>
+      </CardContent>
+    </Card>
+
+    <Card>
+      <CardHeader class="pb-2">
+        <CardTitle class="text-sm">配置变更来源</CardTitle>
+        <CardDescription class="flex items-center justify-between">
+          <span>用于回归定位最近触发计算的操作来源。</span>
+          <Button size="sm" variant="ghost" @click="clearChangeSources">清空</Button>
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="space-y-1 text-xs">
+        <div v-if="changeSources.length === 0" class="text-muted-foreground">
+          暂无变更来源记录。
+        </div>
+        <div
+          v-for="item in changeSources"
+          :key="item.id"
+          class="rounded-md border border-border/60 bg-muted/20 px-2 py-1"
+        >
+          <div class="flex items-center justify-between">
+            <span class="font-medium">{{ item.source }}</span>
+            <span class="text-muted-foreground">{{ item.time }}</span>
+          </div>
+          <div class="text-muted-foreground">{{ item.detail }}</div>
+        </div>
+      </CardContent>
+    </Card>
+
+    <Card class="min-h-0">
+      <CardHeader class="pb-2">
+        <CardTitle class="text-sm">技能伤害</CardTitle>
+        <CardDescription class="flex items-center gap-2">
+          <Button
+            size="sm"
+            variant="ghost"
+            :class="{ 'text-foreground': skillSort === 'damage' }"
+            @click="skillSort = 'damage'"
+          >
+            按伤害
+          </Button>
+          <Button
+            size="sm"
+            variant="ghost"
+            :class="{ 'text-foreground': skillSort === 'cd' }"
+            @click="skillSort = 'cd'"
+          >
+            按 CD
+          </Button>
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="min-h-0">
+        <div v-if="isLoading" class="py-6 text-center text-sm text-muted-foreground">计算中...</div>
+        <div v-else-if="resultError" class="py-6 text-center text-sm text-destructive">
+          {{ resultError }}
+        </div>
+        <div
+          v-else-if="!resultState || sortedSkills.length === 0"
+          class="py-6 text-center text-sm text-muted-foreground"
+        >
+          暂无结果，请先编辑配置。
+        </div>
+        <div v-else class="max-h-[48vh] overflow-auto rounded-md border">
+          <table class="w-full table-auto text-xs">
+            <thead class="bg-muted/60 sticky top-0 z-10">
+              <tr>
+                <th class="px-2 py-2 text-left">技能</th>
+                <th class="px-2 py-2 text-right">CD</th>
+                <th class="px-2 py-2 text-right">伤害</th>
+                <th class="px-2 py-2 text-right">占比</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="skill in sortedSkills"
+                :key="`${skill.name}-${skill.mode}`"
+                class="border-t hover:bg-muted/30"
+              >
+                <td class="px-2 py-1.5">
+                  <div class="flex items-center gap-2">
+                    <img
+                      :src="skill.icon"
+                      :alt="skill.name"
+                      class="size-5 rounded-sm object-cover"
+                    />
+                    <span class="truncate">{{ skill.name }}</span>
+                  </div>
+                </td>
+                <td class="px-2 py-1.5 text-right">{{ skill.cd.toFixed(1) }}</td>
+                <td class="px-2 py-1.5 text-right font-medium">{{ formatNumber(skill.damage) }}</td>
+                <td class="px-2 py-1.5 text-right text-muted-foreground">
+                  {{ totalDamage > 0 ? ((skill.damage / totalDamage) * 100).toFixed(1) : "0.0" }}%
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </CardContent>
+    </Card>
+  </div>
+</template>
diff --git a/frontendNew/src/pages/Dcalc/Character/Skill/img/awake_50.png b/frontendNew/src/pages/Dcalc/Character/Skill/img/awake_50.png
new file mode 100644
index 0000000000000000000000000000000000000000..9bb5df99300e29033603f9150f1d30ea74db7d18
GIT binary patch
literal 3299
zcmV<93>@=`P)<h;3K|Lk000e1NJLTq006`Q001@!1^@s6nEW<*00001b5ch_0Itp)
z=>Px>ok>JNRCr$Poquc-=NZQz+evVglvxW&J=2BbM?&TWY89AVHzTHlEg3%)v>~}0
zOpyjCS_g~NW?}<XmO2nB?HXX6BIqB{=)e=3h(^|!LWQAeW;IOm3WUT7)TJYG3E8p`
zib-O7dEdLU?=C;?wPWnN?ma1rf4ukJd(XX}`@YY;@AFs#g3VFEL;>`|k3gFxexC!`
zqVKb{;`gA-6MwH0f1jfje-G07bUCs851nn+h$^FRz7!U4*vle<6Upo~9uGxa?ExL%
zo>*fL46gRTE&%vmhOMsUj^Ea>vGyp1BEwfB#fL{QxIEpv0ic?zS_nsqk49A8IY$L^
zn1=!bA%LOEW;U%Ss^;+(ilVAJy87Dypsiu!j-!Xp9?$GuMCM%I+I9@LIn&#VCw3~@
zPL2u&-HkB}HnWKbBBO2Y=<5F)0JwQ5G$I(v3adN&2KhTQgd^#NSEtnia9wNFQe#vN
zP#_rgo<Y}`-9qD`v~r;r3~BdoJ_1UGLJC7iSAPHi7I4Oj^|>?|kMGz4TUjB~(LI1}
zz8DG~h*q1~w4u`<ge;v7-h5#`ZWm(|`wyvZY-n6uW8fa!nSOQZ4vdGxU@0$-bov5F
zCDtoZC4?{>{Gl<UHgo<th>x#SC>#|`*wr3rTV-LYJAHvbetv%O%4b*hpf>AudWj>N
z>YgU9FBA@qp--;-{mRmjk&)XrvuROBSAVO+UbbNp5J$Hb$M(K6Jo;E$HYO1uqap54
zH@tIOH9+t%AY*0HW(W$E00H)O_8WJDcb6cW<>+$eJl2jTseCj%`UrhgWGw3QocDag
zW;SVwfT(vNRZHJ?(80tGrdA*_X*0C~(RH;etw5NUnaP1TTVD#^n-6fube{PveKY{T
zuQz`kAMaa>^I%J(Uo{Hhs$&#kv)ZPBS`<QCRaNB=27{&Odi#97wDvQL#e$D#G#dSG
zx4YD4Hlc?&QxBOa5aic}_aP_{@-~zB5EKY`lTn2rv5~ZlP*tfykXeu_1eu)@E=3iB
z++?a%h|~3@@Db-j97wYd(Xfg2AyzEPgKfW4j}OsY$0)*Pb#GH2f&|fo6oLXlVp6sY
zuMiXnd7Dv%khjsK5>z1)H=599R3XUhM-_t1P6?Ny3PEl%)hfh^x>EQ@fSrdp)SBLT
zh=vWE55eTYwkGxX5KXm=B5YRItR5eta&4u5;PU}I57BkCi=3<!lr%3h<5~)zEc9Qx
zaB1dw2nqzb#d(FGK*-xnst^<id7HswPzbb&Qf}cGTIiM3vR(=V!A0eYP$0-{6)TxS
zAP@*B3JU$96@&a*8U8<B%QCUB7X3#n7{lCOLSRrJ$S<;LfjGXs6nvkuK15?%dVPrc
zYSxFaEXac$ZzttLpkNd9hd{{XU_fiw=b}}{lFNtInh&E81`djc926)bgDBvK2cmH+
zqX?VTze9Zp5=0a7A(RNjo(*;D54JW<7g;6!{0V_k78>&AtO1Q?GXQ*BVyq7!8a?x1
z^wGt!G5AFA-F-<pDIBrm9ocp)^2(XrK!K3&hEyTsZ8WLGbPACq5DO<1;(#GvU+sL^
z4)%)p(sFcQPkR8IuX|90+qrNU_6VS$KqPVP<aVJz$XRHL?^6f_hG9*GY3-ZNP1vb+
zzUBc>2OHmEw=v-Sr5(SvZfHXO!vz5p6o@3Qo!l;}1>$IJDSUjJ^&x)$UV43qpM970
zA(j{C!LH`G4<S^D?VF00Lpb^s&}kNEA!>Lu4o{<fG;DnCf=`FDu@qcv?+0&d4S27F
zvXK%@wPEG3>ciHW7I@xf!bRrm#}E*=xbnB6I=HFTMDInTnn7(;({q0~bnoQl;Xd>|
zKV(9IO-iuY9+!%Ih{{U;zyLQ7(Us<T2s1YiQCR4|bV+6&LV-ZI8#eCv{tPkI@wig}
zD9HKR;;=T_<ZQ64wm)ZtnyoD{7CfGMu&-?tvEgcT!28|+>}~X128h%FjNX*MGi@9#
z?^IJD<n#e&c0n08P)v1Ir!Szbq(I0UZ5oBZK=6C(bg`UL>_?JB1>IkG!P5~0PfHaz
zU-N<Q<9HbCR6s0ZjBudd4pv7q?60>&cJO&oL#2t;vL%VvP{s|V0nt0?j-A7(By&mx
zKU9lv;jsAqSX7cVB!Whif-QpM^W*j7r`Ey>#otGwW3h)46bN|+L?u!UguTWMhWz*i
zra+(>ND72Gks;F|M=@N#!y4`QMK-lby0#r_*i<gxoUexlS1jvB(h4yZ5bwR~g9E>f
z`xL2A2xpB^5jJzSuvs^#Ld@J_)eb}(a;jsesFO?!NM<4C7(Rf*t}ZzBsvQph={j`(
zD=y)dB~QSf+7-B}M%Q)lUK@b2r}R+ouz+Kq8~@J@Z53H_PFB9?y%xkdwO(o24T=Ne
zUVO*|QSsz^DE$f%Yk(jxlX`pz1u6sv;$UkN-xEbdY}tZmrDNN<zrsST29DP|%$3&i
zBB*=aH)%qz-oZX)XmoW!)5})yUJF8_%XcXfh3(Hg3!>aR9*@*Z!874_JF@jyM2SEs
zF?-*n$F6E|s+A7JPd61V4v%Lo(P*PM$<_Fy+!6o{ehmOi2L5xu1ie6af7fs9;JtQN
z)9mh_QbQ3KWlzn;>R>Hrhik@pcwG~Etja!Z%F^^|Ac`NeMkAWO(Xj_NPoC!<yHX&C
zN7JeWVsA|`_=Btuak4$VKE#hI*iKn$)WiOkc;>!D6#~_v)xf@q`GlV|@3Z1Ndb9fu
z`1;s6H*0wz_g4f}KgW+{{}747tLQ~C3Q=EWRD{hM-Kxplr?pmC{e$-gaXdtCcP}wm
zsVG=dhVPkBFt5PxZTHR`51~XL2y?rlj-SODtOx*}1b~+S;05P42JBB8M7H$&a|oO#
z@aX6i0K5SJp98>Mt`K^dE4#ptpNF78$ahnzLQo*&Z3fdR1R)Su7`T<L=rs?;Iso_%
z0IZcX;ljj%zxM&)yaWa`WFlGyPJtk}s9cdR1rRxMNy_EEC+b#lqmFXrr9-9!fDoz#
z4+R?kp|wp@ZD^G%S{BYL11dwL4yfQ%KxEQpY8^6VXUWBIk%LE4a%`M^@<=db>W3HC
z8i7wspRa$s>F}kE9|^I(3o}m-Z(Rt2rJPA79lq4MC>CO-4aGzVH}O>K412Ob?1b71
zW!S8_9r+N)6!{wwlN7>g^$!lRK16nQnt>SOfG8;Nd%ZLI5Mm%&t_+a?m$EW7E7@`W
zEP>$L!v_l?9pi(Bgl$DbBjhI_T_O$&5>_x35Sg@@T7l^8O|w&7!a3FdXF#M3)afds
zK#-ewCWW9tOk>9sD+Kw~O0pycg4}TG1fshie!SWUcLv$9{Q0Zt9Wt$3#txb07wF-S
zmxEwgo|F$kewAif5(9C1C)8M#VY3!*5cY3TpAVs2g`hwrga`$K++0*4$ZZuXNfjb-
zqX}(B6@tuuCB#lORR}VRa;2z3kef@j3h{$y3=sS;8wKU*{et|AQ&7@g#`+LOgC73!
zk$QZHs&Zx6%<WT=53$nfAN)7Bmg!cSAG<E%9=m?E!0){>(>z3XKTsgZ$>tS;0wHg+
zNeV%MkT)7t2zeVxO9*X76@tuuC2CU$bXp(!hg9>}RS61#Y~~9Lspqk)8Wh6Y-4Cmm
z#6u>%w?@d2OHnE7qWG~d_l>{`70g4tbb2RPi<MzB@9hzILml%FV6j+k3=Iw8z^*_b
zkk%h=XBY-2yEYgMH+?=|naym{N`I&NU7Oid?d|T@2!R+5CAeI5mSD`)$CuBl6^KmQ
zOsznGHkO@zmOY4Y_Xy7VE(Ai;(beDPu$NV992HE|)gFiefzlp5w~)Q#>2vsa8^Qz4
zvRG)8O|taiCnFFJgK884wV79mOxX;<fHsvVL?Aaew|ME&r9HUOS+c+3G0UDM*?pXi
zlke&2DSi0x;b%6piID=a3jnHlm5A*w8#9*LcE-c^<1kG0HI#<t=nR?rQrw8dszXnj
z(6A}CNfM_eR$CIK1@|na!hp_-d&=~SiE#I-RTieY(-%PDihKrYxyYI%3^U^{{Ltry
z&1^Cw7ytk%#1R~C%&7#10;L*E_0f~5uhSPmjZ`!Y{COcLk~zmz@1w+Q8^UvxLXqn8
zPo}<3UjXIo!7#Wy-P%}66#*2A0D^^~_UNIr&C~rZL^9`3_sOsYgivI-Dg5Exjtb_8
zt37~KO4Qj96k3fWdP$PYbW*NU>F`gNCpu4QE>!9M(w~6K*2QxdQy3J|Wm4P>1VxIg
hoK1Ba9tKp&{{VsB<hhfHOm+YO002ovPDHLkV1oA=31<KR

literal 0
HcmV?d00001

diff --git a/frontendNew/src/pages/Dcalc/Character/Skill/img/awake_85.png b/frontendNew/src/pages/Dcalc/Character/Skill/img/awake_85.png
new file mode 100644
index 0000000000000000000000000000000000000000..b54882dc17e9d627f03c44bd6b76506c7f3aecb7
GIT binary patch
literal 3372
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
CK^s8;

literal 0
HcmV?d00001

diff --git a/frontendNew/src/pages/Dcalc/Character/Skill/img/skill.png b/frontendNew/src/pages/Dcalc/Character/Skill/img/skill.png
new file mode 100644
index 0000000000000000000000000000000000000000..a49422b32addcd77957f0ed5e54b20deddebd93a
GIT binary patch
literal 545
zcmV++0^a?JP)<h;3K|Lk000e1NJLTq001Na001xu1^@s6c}Lh400001b5ch_0Itp)
z=>Px$+et)0R9HvtnN3T>Fc`-(x6U1lwR6Yf)*&6k9z66QbO(ifmmT$M>^StJ4D_&q
zhaNms#)_m>cC4$F9_L<sNt&_Zlw3w|BfX>$NdEafPyPu{G9dZd0Du<x-z6=p=ABH`
z0RUWNkQlirw`#{VA9WP61%Z_kG|zZGo}zZ}FsOv1u!97R8|Mvw6pSjUBcIJPB{Z2&
zFri|p==W}Vl@&p5-(@ODt7|KQKAX)Z41%DFlsb;XGGaj2bv$3GRD#`Zw~7dHLFo{1
zLbQbBgtmi_d1k`!CB#1D_FdYd*4nStH9VetAVcfcN_>b5N-^eyXbHy&Z3!XMgkea0
z$Ytz98u1}nhL*MPAuec{SsEuq*=C#&)rU4Bhm2DLMz0aR4|$IsZBc9OSC3RYp0qDP
z`_4}8LtIdbF_n;zV_N(G(-|&){0Nz0z$i*`NDvqcni4^h1Z{hfLn%R?$2h4~lGI$#
zA7-I)LKGY2glOl??}Sba7`>6R?3wYlKP20JPlERS!iTt^Wgyi}AT-u>-H+oKSMrC$
zA=ARSqA0j<E{ful<2Yqp$xjOcJAkPm@Bvl?wM9{EDT;z0UqBA9J?>{<Mj}&=<M;{@
jLf?OQp1S;gVYvPR?anVJ1p@8y00000NkvXXu0mjf^33i@

literal 0
HcmV?d00001

diff --git a/frontendNew/src/pages/Dcalc/Character/Skill/img/skillActive.png b/frontendNew/src/pages/Dcalc/Character/Skill/img/skillActive.png
new file mode 100644
index 0000000000000000000000000000000000000000..32d80df570b3e658cd0f2915ca72716179479957
GIT binary patch
literal 1391
zcmV-#1(5oQP)<h;3K|Lk000e1NJLTq003A3002%11^@s6q#Dt(00001b5ch_0Itp)
z=>Px)DM>^@RCr$P-A`yERU8NK-%KX$v~lGjT5=GXi;!cAixe#qWDfy71l)yyi{wyc
z4+V4Bg&;ljut;z{ROq4T9)eWKp@$w67AcZLl^~YQF`$PaBFicgl$6*c^YqQ1Br}<&
zS$uEuI{XHPu<Y>Oo6o%WeQzFZqd<tq*6nr5s@p1FwQBA5yCK#-SykoB7VLfAf@ZU+
zh-!$if`b~&fEn)Hogb|e<_KK+?;&sBzG?v%KX@R_L0G{-z};VqbPPAtx&zuncRtL*
zt#=I2pWhSK7GVXS2do==tmlSW?|H*Nl}gdZQ6@UT?Ph_JRE6EI6u<yL+sy)yR7F^O
zgcTgrYY<q}RO*zAzzED;Al!&(6evkcmcfkzkaScs7=gKu5Kn<^1V&)q0^w%xah{U(
zs$A>fdLGDHRhWaYf&<sV2+Vtcc*|=eFaq-y2sa{*@|0YYEQ62oK(0k4gAthb0P$ro
z0wXYQfp9bUFh@!5P_A|GS9u_BMkRw0nD+qjWiSFGFmHiyGq{?gBrjP8ALM{sKNRL5
ztl+@C2n6OmKztdDzzED+Al!)9&rxzyvJBqO0l68K3`Sty1H_lX2#mnI1;WkX`&mjh
z9>}#9aX$-WBO*V(+D2gB1H_lX2#mnI1;WkX-7F=Wl4bC27RY8)G8ln*4-j7lBQOH<
z76><kce0ce<;vhk<qRZCHDM0I3J%;4Mqu6p#FxPcjKI7F!i|W#8A`Tla_vQIXMk)+
zC4&)|_W<!_@CaCjUTpp5e>-YDxcqGk*eSuU)6!DL0Cq+uB0kQg>1LY1Zli6Tt(FBn
zm!tHW0o$(|u>W%(HujH&%|*fr4pK7=!vba}JG%Y3*bXZ_X!R}NTD>mJK>=900brH@
zlvTTC-CLP9UxZ{*A2y)Akp$AWAC7yFa$~*?oaiK7E879+Ljbj`04$!on^{?X$w)X2
zl?yn2=KZrXZ@rKlf`0Q$2mV~>NeO(?>cD5U#}5?%-P|h}@M-O_l)%4rO%I^1>(Iy>
zkgnSK{S2H*3H)AW1#VSZ><?pHKHzat`GGY;ck)T7eAl+x-O;XCpRrhMzCGiT)jk*u
ztQIHwe_Nl0R|yoWk3fL{;Bj14RWI4ChTB}z97PyIMqtkV2+SGOU)*fK*OO4GI~g3m
z;>llC!HAglj7;i_h@O+dYXpi1ZU*~+$0s=io<0Oz;Nc{95%6E?@~{W9$!=iUvm+kC
z0x>lPE-w3g+B~&a5$E+_2JBg;342SA$Rl%Jj9uhOV9;qfXTTRf*l%*3Men<QOvCl?
zw5~Addq;TUAA2r)`{flV9olbl9^kf?fOsrEDieF~^r7bTV0KY&&;!!%Tny}%$e_n(
z$%qVUuD8J!0SwkXE(HEvU4Xbc>cK3;@i<>#d=bzyd+?lTZ$1qpf)GOQyh7mK_jYzH
zFZ(7r)SXGdo#akW?Nx+ps`!D~b|CIQ%w#%o5qqoacJ2M^sle<4M1C@4_mz2O;3q2{
zuXY6{fc2+zdS{KmJ!dasd13S>=V!Ct?3{g1_J8<quLrX^J##YHF;#+qT|DfUvkMF-
zxr=~x4JWzTS-n?UlbrL_6>cg_^k4?;9yrm>Mm@eKJPEAn=KJdeJ~_76!JtX=4FR*=
zoorY2!FqXiO%)x1`92~)@S?VO@<uAL`r@+-Rz-?D-*LhB#zQKNg586E`r{0~Zgv{V
xQf%plshB0j{n06mi2wH}oE}VpHdLy9^e->+Y6mxyJRkr7002ovPDHLkV1jOLjCTM4

literal 0
HcmV?d00001

diff --git a/frontendNew/src/pages/Dcalc/Character/Skill/img/up_1.png b/frontendNew/src/pages/Dcalc/Character/Skill/img/up_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ee582616fc0c8068b12dda34acc02d35dcb59b0
GIT binary patch
literal 1001
zcmV<F0~Y*=P)<h;3K|Lk000e1NJLTq000sI000sQ1^@s6R?d!B000B9Nkl<ZIE{sr
zT}+#G6o;So?I)DcQohG1tV}*9in;-tgu!r#*>+(Rvx}MNTw->m(PfSp4F+Spa7IF+
z$(+g5o6V0HgA%ea+2%wEI0#T+6pCvLthBTgN=x7N?}aQO3yaV7?>r~@CFj7_)Br6&
ztxBmB3IzgCJS6*2PSg}^7cGr@MeQRw!knlRfB>Ap7r<j%4L!J}?L>9i*~7bc@=<p`
zZ`4)LSZpClr@`f4p>uSGb3K1EzTkTa=mG*;iS&B4D&+d$RX*t%<oHuXq#5)C*4Fv#
z#t^q%9@e5UY74eA?OmqJ<{+@P{_#cyvTBp4p`maGPTw+(MY)(0b^JQ!;N+!itVE(M
zWtrx-)~3BQ6z(7{1PTSTboQNYzdq~)+NBLiUXIbwcce6*1hqs;f{w5IZFJlmVQzVq
zyp(PA=bH}@jm3$@;|Kv4`o<{FHWQ3QpS3Rr{=6@G=S+RYzMn@N6s9FJaM#1PgLjzp
z_-SjZ<hLmopWhng#<Uw*j-!(#QWN!@>m8!flEKZHIh%4rbo5|B4stxs`92#uNy((g
zKd4bjyjX6f#+pS+f);Nm%rCZC#ut28j0RqK)JpG^8{m)o9p%f>7^N8|E)GndT8qjZ
zM!mM8%94Too}W(-?`J(0qif<H-tGE})++;OC5h)sEWF>{Pm)&MqXf(;30lpJ*Uz!?
z0@RYSV|d=j@rqp>Ew->63bPW9@Xf#kr#t&d(rE}q<+pwsonhMJM+jJ1k0JrPi_=Z7
zX%$MUa?`2K%jD{mi=jC$zEA|acNwRDg{xC8981BTFQ2c;pAUwfvHOBNnPuijn}fJO
ztpxUzXQpt)?!xZzbEqJj?~WZL&uHM<wEMyjHU}f~UfjVDxkf{sJFrUok!n;*1;g`R
z<hbYrWC_SgOVBo3O-W2H21r(`&}&qvBn5T(*^dXpQHB?m2+J{A>no6iATQZ~XEjW(
zV-8O!@+NRc0&LSu!L&ox>^+$}4ZhVi;<C)sxf$GE@bUfF?1y1FcJJ)|vXVw?7LiDl
z5%(f<t6{qBb7z3BHlIi-@cK@p;Z(87fL^WQx^t1G@H$qLfs+-xXvoiE*uBUtr-wA1
zhV!GdID?@gU}CGIeFA7MHYL4%AlpohC6kgY69B(E=D9q67dbA-NYHZG?!E}TywxYz
z%qu{DW};4%rEU}HdaW?1B~g`b6it?NAt@9BsQf?4W^#dji7H8?YSlvdpWr<p{lVbB
X5ATOhJGU!h00000NkvXXu0mjfMqA@h

literal 0
HcmV?d00001

diff --git a/frontendNew/src/pages/Dcalc/Character/Skill/img/up_2.png b/frontendNew/src/pages/Dcalc/Character/Skill/img/up_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..86c6221874fe80b0c1ccdca140077274078a3fad
GIT binary patch
literal 1029
zcmV+g1p51lP)<h;3K|Lk000e1NJLTq000sI000sQ1^@s6R?d!B000BbNkl<ZIE`(T
zYfRO37{@>7fBygTKZkSSa1aCmMGgo!HC@5TIR&(shC{&RkXczSvs!GewOX4mto5oF
zxY}H~dQ)>@w5By1fdmQ2#mf;rCgRFVbl`A37tV!q`Sn81V#W96bNOt~p6C0(ztZr3
zY0zjy>bhb9lrNKCz5z&E5-SCob1SMu_30J?v;ao{(~=r9U|k9-vgH>ELu#4;YJt{_
zEv2IT!)9^#@~AjAvLN=HIwLkT9ubPsB!G{B6rIT|)MTpwtV_qK&wsAIRm9^I);6+w
z`!n46{%hv$KOpS$V6)q?@2<s=nnrumi;N9iBCBjWf3%(32b^09I-(}0oGz$oAZOby
zCT|TR=?zQ{523T#u;k<s4+RO&P4eisHa5Nd7Ck54M#N$=5R(=mI!V!;u4w)i_wZFF
zes}Vq=NBd%{g|?HF{ZB~wh+d3trwvtkyEjk+}#IJt*HRT0NO>+fxPMi_4#`b683p`
zc=0?dHkL4R`#KLhf5g@Q>lcB^@h1x#jxv6^leJa#j16{^y>%Clx-I}*&;SPDOyy^-
z`yTanV9LnC?HC{)4&mzSr~v|&yrOo+WFa^)#uH5^`0L_%G&+^7$3Nxlwk+bYs72DM
zhJd~HrG08<E+L->w_}j(@@iat9j!nhv#he+vf56>?<FuX_FXg>!0&p9Y_j0K>!h&p
z4HTo<D<|8FS^4x%yi?;SNoJx#un-CWNWkITnnNhbHZHwc2jFr$uc5c4qg4$|-MdXe
z!!e@a5Yo);YZZO(9_n=UcY!2f$Xr8UcABJ>*>yllBpPM#_^XI`>;=H0n5}4yW+I^=
zajneH&zCXU^7;E(;6AVdRbREDWCszym#M2gtUvkz?*7gK_fQw%Y4>Xyt^8%?jy;<r
z^FC5GJVn?$OI*NIZ`)0vF>yyGN!9x{ee@MGL)~apJ%Q1iWIwx~zxz7S=?!RA1MzT>
zn5-beK{9sLaqpXxc(3=p4xCD?e?i2ev5;rFQZ`$eAH9WXV=4Z7PUdd(Bk6R=Ml<>~
z>xg(~@&7r3=Z*u9qYs3r0Yn01)+QO-Wm^V5=M{2Zc@G%~dS)@MEkw51h>JMUfFEnw
zPE>0ub9Wp>rpEUJ&d07_bh@Qz^MH5c1_*J|WMAK8E~y}WTNRe<JQn7Cg#BKouXHop
z{S*GX!#@~St*KSaR=guON`WB&MI*~%@ogl)<v<IPB+_;_h_&y0A~dohfDWL3v8Gtk
zsX|h80#Fl%RajnG8buZQqAh~Qzv#cxCm{a-H@$xavu)4m00000NkvXXu0mjfE41w&

literal 0
HcmV?d00001

diff --git a/frontendNew/src/pages/Dcalc/Character/Skill/img/vp_1.png b/frontendNew/src/pages/Dcalc/Character/Skill/img/vp_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..afda59f9528e8fae2bc5e369c0c0e06a056c78f6
GIT binary patch
literal 736
zcmV<60w4W}P)<h;3K|Lk000e1NJLTq000pH000pP1^@s6J8eh$0007~Nkl<ZIE{_c
zUr18{6vy%JcKw6eo$hJ`Qcb&}gqv8mC|opzNnuG*f?)<xP+8%l_0&U8t@j9DL!x@E
z2O+YS&Pn1*ubY;wT7{#3-c0mvm$}=6WKGRFkLUdOJe+d`)+j|5TS}$e8>LdN9@mWU
z-*UnlKxeVNsO#*><7Jc4x6MU)W+JW`f&WGnS?rXG?7j=9&hR*>(t7wX>UhL!&rh!k
ztw0o6?6eo!eP@oJqxY$b-ybHOwsNHLAdy$$RUu(HP-K&QC!5c6>)sv0uY*{#fAD_l
z6|bXlP8>bWM0Ct66=XufpFp7~`C1QLBsBDnv3I>(>1@U0cHwcmc<|6qcCrlb-hE8Q
z)C@@Y1=tECU$eJ^=PxFCGoq1g&8BCd7mwS;)$6yB%xY$*@|a7_Q@^{B=!a2n@w!FG
zs>ouCm@oO7+#LjmLrjdsSZ67w!aS6*s|xcF1r~{kkr=_@5KZn5#C++RB8$hYK>MER
zHUertp~w(fmK?IkK_F+@1s3~RmK;KnAp&YYdz>c#+O5FNr)oE~jyjz34pOE;3WEiV
z3}k`De#$g($_llPI{HSt0d5L$%?Ov+(uogWRPWBpCQ_CZGc(`$EDWMszTk1Y@CQ_M
zrZLlbY;crN<*4S-=ndu))0c;%vt0r}Tr&bCwshj-H`QAs*JGFoVsnev0r0q8^bGV;
zR;u9Gv>AW6i}|E>c{n=j1F$UnlS}!zh1cq~wlNsKkEXv}n%VQp*<Iblz<4+F$(bc!
z#k0jVBe33PCgR#l?=I(l7E*<L{kp)GjoYZH+)glZ7d`nS16YClhR{DvM;n|~H5lkr
zl{<Jgb{{=Cy8>7h`3+h0&(pDn%JOnvjQ61@=T-&&S&A&SD6;rOk;Rs^az6p4Jw5lG
Sh6<?w0000<MNUMnLSTZgE@-R(

literal 0
HcmV?d00001

diff --git a/frontendNew/src/pages/Dcalc/Character/Skill/img/vp_2.png b/frontendNew/src/pages/Dcalc/Character/Skill/img/vp_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..a345f1b9050c3f13464491be87480095e4c7e477
GIT binary patch
literal 681
zcmV;a0#^NrP)<h;3K|Lk000e1NJLTq000pH000pP1^@s6J8eh$0007TNkl<ZIE{_c
zPe_w-7zgn0-i=AKcYj_J!VNcjAu%_bydvQQmF7hgB!rbFL<dWX9havfPre?*5bq*&
z&YM!|oPxGFecP0D#HzJ2-O{D+_O`w25KZ)bv!2UydHC@Be$Q8lQ;MNUR~c3Gtc)t+
z<4Ga(w>jl0fTzTuAG>?I$FdoD-=#m3Psfvj@4pd-COwqiz}~;phu4c7x;s0;t%sck
zjVKFA5QZi_2AzTJ>$!(la~x)8Ll8v**W0ck{4OL5DNX`<EyWton-L7Zk!)zcREOA?
zD8BC}2K<o}D?u2V^yo;6?QVa7r{j<D$kQ!B28So$?tOxZ$r0?Ojv(b9KwC_)T~0Sv
zf}2Qg?_+wwizbH+gToVrUMyOW`$?kZN*f{{*PJD1e?N_2XwpS$D7M4l#-cxfjnycO
zVzb<T!zeamV>OCJe*hg0H%JXN#L(mo0ziLb^)2|gc?81CP$|?<K`o1@poU7JMj*Tl
zA2*LiYcBxw697i%xN+Fc4Y1O6$mRuPA;=<G2*~CISZM}!a|66<;{Y&9_#>$o2kFGX
z)XE5|$}huYF(F3G$RaUf1}2LMRpoX}1xN5By*uEKq@F7QAf6O_=d@z_(=O+%p<57&
zPZqAz<ggX`^nw@lRqdD!jo~npEL`VgP9AECbVE9g5g)#Bl1<7>ZP+`E;V`pzEGNej
z8&3+pQf)q+%V(TTwKtK=>aequ!v#|<>Z`9}>+=%$%>FSzf*e8Mza}EB*2)?P;89s&
z#?srD;4>)+Ad4J93Vu5gZM|4gf#A9qeC9wF_-8RR>0)SdhM`H<X>-2-c<353TxBhC
P00000NkvXXu0mjftB*1{

literal 0
HcmV?d00001

diff --git a/frontendNew/src/pages/Dcalc/Character/Skill/index.vue b/frontendNew/src/pages/Dcalc/Character/Skill/index.vue
index c2e31f59..f2da1dbd 100644
--- a/frontendNew/src/pages/Dcalc/Character/Skill/index.vue
+++ b/frontendNew/src/pages/Dcalc/Character/Skill/index.vue
@@ -1,54 +1,685 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import { Search } from "lucide-vue-next";
-import { useInfoStore } from "@/stores";
-import { Input } from "@/components/ui/input";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { useConfigStore, useInfoStore } from "@/stores";
+import { Button } from "@/components/ui/button";
+import { getImageURL } from "@/utils";
+import type { ISkill } from "@/api/info/type";
 
 const infoStore = useInfoStore();
-const keyword = ref("");
+const configStore = useConfigStore();
 
-const skills = computed(() => {
-  const source = infoStore.skills ?? [];
-  const text = keyword.value.trim().toLowerCase();
-  if (!text) return source;
-  return source.filter((skill) => {
-    return skill.name.toLowerCase().includes(text) || skill.type.toLowerCase().includes(text);
+/* ─── UI state ─── */
+const tab = ref(0); // 0 = 技能加点 | 1 = 技能定制
+const activeSkillId = ref("");
+const notice = ref("");
+const noticeType = ref<"error" | "info">("info");
+const openUpPickerSlot = ref<number | null>(null);
+
+/* ─── Constants ─── */
+const VP_LIMIT = 5;
+const UP_LIMIT = 3;
+const UP_SLOT_COUNT = 3;
+
+// Match original lvList
+const lvList = [15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100];
+const COLUMNS = 11; // positions 0-10
+
+/* ─── Tree row data ─── */
+interface ITreeRow {
+  label: string;
+  lv: number;
+  isExtra: boolean;
+  extraSkills: ISkill[];
+  cells: (ISkill | null)[];
+}
+
+const getSkillsInRange = (lvStart: number, lvEnd: number): ISkill[] =>
+  infoStore.skills.filter(
+    (s) => s.line > lvStart - 5 && s.line <= Math.max(lvEnd - 5, 1),
+  );
+
+const getSkillAt = (lvStart: number, lvEnd: number, col: number): ISkill | null =>
+  infoStore.skills.find(
+    (s) =>
+      s.line > lvStart - 5 && s.line <= Math.max(lvEnd - 5, 1) && s.position === col,
+  ) ?? null;
+
+const treeRows = computed((): ITreeRow[] => {
+  const rows: ITreeRow[] = [];
+
+  const extraSkills = getSkillsInRange(0, 15);
+  if (extraSkills.length > 0) {
+    rows.push({ label: "其余", lv: 0, isExtra: true, extraSkills, cells: [] });
+  }
+
+  lvList.forEach((lv, idx) => {
+    const nextLv = lvList[idx + 1] ?? 150;
+    const inRange = getSkillsInRange(lv, nextLv);
+    if (inRange.length === 0) return;
+    const label = lv % 10 === 0 ? String(lv) : "";
+    const cells = Array.from({ length: COLUMNS }, (_, col) => getSkillAt(lv, nextLv, col));
+    rows.push({ label, lv, isExtra: false, extraSkills: [], cells });
   });
+
+  return rows;
 });
+
+/* ─── Config helpers ─── */
+const setNotice = (msg: string, type: "error" | "info" = "info") => {
+  notice.value = msg;
+  noticeType.value = type;
+};
+const track = (detail: string) => configStore.pushChangeSource("Skill", detail);
+
+const skillById = (id: string) => infoStore.skills.find((s) => s.id.toString() === id);
+
+const skillCfg = (id: string) => {
+  if (!configStore.config.skills[id]) {
+    const skill = skillById(id);
+    configStore.config.skills[id] = { lv: skill?.maxLearnLv ?? 0, vp: 0, up: 0 };
+  }
+  return configStore.config.skills[id];
+};
+
+/* ─── Level color ─── */
+const lvColor = (id: string, maxLearnLv: number): string => {
+  const lv = skillCfg(id).lv;
+  if (lv < maxLearnLv) return "#32E432";
+  if (lv > maxLearnLv) return "#58E0FC";
+  return "currentColor";
+};
+
+/* ─── Active / detail ─── */
+const selectedSkill = computed(() =>
+  activeSkillId.value ? skillById(activeSkillId.value) : undefined,
+);
+const chooseSkill = (id: string) => { activeSkillId.value = id; };
+const clearActive = () => { activeSkillId.value = ""; };
+
+/* ─── Level actions ─── */
+const updateLv = (id: string, value: number) => {
+  const target = skillCfg(id);
+  const skill = skillById(id);
+  if (!skill) return;
+  const max = Math.max(skill.maxLv ?? 0, skill.learnLv ?? 0);
+  const next = Math.min(Math.max(value, 0), max);
+  target.lv = next;
+  track(`${skill.name} 等级调整为 ${next}`);
+  if (target.lv <= 0 && target.up > 0) {
+    target.up = 0;
+    track(`${skill.name} 等级归零，UP 自动清空`);
+  }
+};
+const stepLv = (id: string, step: number) => updateLv(id, skillCfg(id).lv + step);
+const setMaxLv = (id: string) => updateLv(id, skillById(id)?.maxLearnLv ?? 0);
+const resetLv = (id: string) => updateLv(id, 0);
+
+/* ─── VP ─── */
+const usedVPCount = computed(() =>
+  infoStore.skills
+    .filter((s) => s.hasVP)
+    .filter((s) => (configStore.config.skills[s.id.toString()]?.vp ?? 0) > 0)
+    .length,
+);
+
+const vpSkills = computed(() =>
+  infoStore.skills.filter((s) => s.hasVP).sort((a, b) => a.learnLv - b.learnLv),
+);
+
+const setVPMode = (id: string, mode: 0 | 1 | 2) => {
+  const skill = skillById(id);
+  if (!skill) return;
+  if (!skill.hasVP && mode !== 0) { setNotice(`${skill.name} 不支持 VP。`, "error"); return; }
+  const target = skillCfg(id);
+  if (target.vp === 0 && mode > 0 && usedVPCount.value >= VP_LIMIT) {
+    setNotice(`VP 最多选 ${VP_LIMIT} 个技能。`, "error");
+    return;
+  }
+  target.vp = mode;
+  track(`${skill.name} VP → ${mode === 0 ? "关闭" : `形态${mode}`}`);
+};
+
+/* ─── UP ─── */
+const upSelectedIds = computed(() =>
+  infoStore.skills
+    .filter((s) => s.hasUP && (configStore.config.skills[s.id.toString()]?.up ?? 0) > 0)
+    .map((s) => s.id.toString())
+    .sort((a, b) => (skillById(a)?.learnLv ?? 0) - (skillById(b)?.learnLv ?? 0)),
+);
+
+const usedUPCount = computed(() => upSelectedIds.value.length);
+
+const upSlots = computed(() => {
+  const slots = upSelectedIds.value.map((id) => ({
+    skillId: id,
+    mode: (configStore.config.skills[id]?.up ?? 1) as 1 | 2,
+  }));
+  while (slots.length < UP_SLOT_COUNT) slots.push({ skillId: "", mode: 1 as 1 | 2 });
+  return slots.slice(0, UP_SLOT_COUNT);
+});
+
+const upOptionsForSlot = (slotIdx: number) => {
+  const currentId = upSlots.value[slotIdx]?.skillId ?? "";
+  const others = new Set(
+    upSlots.value.map((s, i) => (i === slotIdx ? "" : s.skillId)).filter(Boolean),
+  );
+  return infoStore.skills
+    .filter((s) => s.hasUP)
+    .filter((s) => {
+      const id = s.id.toString();
+      const lv = configStore.config.skills[id]?.lv ?? 0;
+      return (lv > 0 || id === currentId) && (!others.has(id) || id === currentId);
+    })
+    .sort((a, b) => a.learnLv - b.learnLv);
+};
+
+const setUPSlotSkill = (slotIdx: number, nextId: string) => {
+  const slot = upSlots.value[slotIdx];
+  if (!slot) return;
+  const prevId = slot.skillId;
+  if (!nextId) {
+    if (prevId) {
+      skillCfg(prevId).up = 0;
+      track(`${skillById(prevId)?.name ?? prevId} 从 UP 槽位 ${slotIdx + 1} 移除`);
+    }
+    openUpPickerSlot.value = null;
+    return;
+  }
+  const target = skillById(nextId);
+  if (!target) return;
+  if ((skillCfg(nextId).lv ?? 0) <= 0) { setNotice(`${target.name} 等级为 0，无法 UP。`, "error"); return; }
+  if (upSlots.value.some((s, i) => i !== slotIdx && s.skillId === nextId)) {
+    setNotice(`${target.name} 已在其他槽位。`, "error"); return;
+  }
+  if (!prevId && usedUPCount.value >= UP_LIMIT) { setNotice(`UP 最多选 ${UP_LIMIT} 个技能。`, "error"); return; }
+  if (prevId && prevId !== nextId) skillCfg(prevId).up = 0;
+  skillCfg(nextId).up = slot.mode;
+  track(`${target.name} 设置 UP 槽位 ${slotIdx + 1} 形态 ${slot.mode}`);
+  openUpPickerSlot.value = null;
+};
+
+const setUPSlotMode = (slotIdx: number, mode: 1 | 2) => {
+  const skillId = upSlots.value[slotIdx]?.skillId;
+  if (!skillId) { setNotice(`请先为槽位 ${slotIdx + 1} 选择技能。`, "error"); return; }
+  skillCfg(skillId).up = mode;
+  track(`${skillById(skillId)?.name} UP 形态 → ${mode}`);
+};
+
+const exchangeUPMode = (slotIdx: number) => {
+  const slot = upSlots.value[slotIdx];
+  if (!slot?.skillId) return;
+  setUPSlotMode(slotIdx, slot.mode === 1 ? 2 : 1);
+};
+
+const resetAllSkills = () => {
+  infoStore.skills.forEach((s) => {
+    configStore.config.skills[s.id.toString()] = { lv: s.maxLearnLv ?? 0, vp: 0, up: 0 };
+  });
+  track("技能配置已重置为默认值");
+};
 </script>
 
 <template>
-  <Card>
-    <CardHeader>
-      <CardTitle>技能面板</CardTitle>
-      <CardDescription>与旧版技能页等价的基础浏览能力，后续补齐 VP/符文配置。</CardDescription>
-    </CardHeader>
-    <CardContent class="space-y-4">
-      <div class="relative">
-        <Search class="text-muted-foreground absolute left-2.5 top-2.5 size-4" />
-        <Input v-model="keyword" class="pl-8" placeholder="搜索技能名 / 类型" />
+  <div class="flex h-full overflow-hidden" @click.self="clearActive">
+    <!-- ══ LEFT PANEL ══ -->
+    <div class="w-[550px] shrink-0 flex flex-col border-r border-border/50 overflow-hidden">
+      <!-- Tab bar -->
+      <div
+        class="h-10 shrink-0 flex border-b border-border/50 bg-muted/20 text-[15px] font-bold select-none"
+      >
+        <button
+          class="flex-1 flex items-center justify-center transition-colors border-b-2"
+          :class="
+            tab === 0
+              ? 'border-primary text-foreground'
+              : 'border-transparent text-muted-foreground hover:text-foreground'
+          "
+          @click="tab = 0"
+        >
+          技能加点
+        </button>
+        <div class="w-px bg-border/40 my-2" />
+        <button
+          class="flex-1 flex items-center justify-center transition-colors border-b-2"
+          :class="
+            tab === 1
+              ? 'border-primary text-foreground'
+              : 'border-transparent text-muted-foreground hover:text-foreground'
+          "
+          @click="tab = 1"
+        >
+          技能定制
+        </button>
       </div>
 
-      <div class="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
-        <Card v-for="skill in skills" :key="skill.id" size="sm">
-          <CardHeader>
-            <CardTitle class="text-sm">{{ skill.name }}</CardTitle>
-            <CardDescription>{{ skill.type }} · 最高等级 {{ skill.maxLv }}</CardDescription>
-          </CardHeader>
-          <CardContent class="flex items-center gap-3 pt-0">
-            <img :src="skill.icon" :alt="skill.name" class="size-11 rounded-md object-cover" />
-            <div class="text-xs text-muted-foreground">
-              <div>可学等级: {{ skill.maxLearnLv }}</div>
-              <div>学习等级: {{ skill.learnLv }}</div>
+      <!-- ── TAB 0: Skill Tree ── -->
+      <div
+        v-show="tab === 0"
+        class="flex-1 overflow-y-auto overflow-x-auto"
+        @click.self="clearActive"
+      >
+        <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">
+              <!-- 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"
+              >
+                <template v-if="row.isExtra">其<br />余</template>
+                <template v-else>{{ row.label }}</template>
+              </div>
+
+              <!-- "其余": sequential list -->
+              <template v-if="row.isExtra">
+                <div
+                  v-for="skill in row.extraSkills"
+                  :key="skill.id"
+                  class="skill-cell"
+                  :title="skill.name"
+                  @click.stop="chooseSkill(skill.id.toString())"
+                >
+                  <div class="badge-row">
+                    <span v-if="skillCfg(skill.id.toString()).vp > 0" class="badge badge-vp">VP</span>
+                    <span v-if="skillCfg(skill.id.toString()).up > 0" class="badge badge-up">UP</span>
+                  </div>
+                  <img
+                    :src="getImageURL(skill.icon)"
+                    :alt="skill.name"
+                    class="skill-icon"
+                    :class="[
+                      skill.type === 'passive' ? 'opacity-60' : '',
+                      activeSkillId === skill.id.toString()
+                        ? 'ring-2 ring-primary ring-offset-1 ring-offset-background'
+                        : '',
+                    ]"
+                  />
+                  <div v-if="activeSkillId === skill.id.toString()" 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>
+                  </div>
+                  <div
+                    v-else
+                    class="lv-num"
+                    :style="{ color: lvColor(skill.id.toString(), skill.maxLearnLv) }"
+                  >
+                    {{ skillCfg(skill.id.toString()).lv }}
+                  </div>
+                </div>
+              </template>
+
+              <!-- Normal row: 11 fixed columns -->
+              <template v-else>
+                <div
+                  v-for="(cell, colIdx) in row.cells"
+                  :key="colIdx"
+                  class="skill-cell"
+                  :class="cell ? 'cursor-pointer' : 'pointer-events-none'"
+                  :title="cell?.name"
+                  @click.stop="cell && chooseSkill(cell.id.toString())"
+                >
+                  <template v-if="cell">
+                    <div class="badge-row">
+                      <span v-if="skillCfg(cell.id.toString()).vp > 0" class="badge badge-vp">VP</span>
+                      <span v-if="skillCfg(cell.id.toString()).up > 0" class="badge badge-up">UP</span>
+                    </div>
+                    <img
+                      :src="getImageURL(cell.icon)"
+                      :alt="cell.name"
+                      class="skill-icon"
+                      :class="[
+                        cell.type === 'passive' ? 'opacity-60' : '',
+                        activeSkillId === cell.id.toString()
+                          ? 'ring-2 ring-primary ring-offset-1 ring-offset-background'
+                          : '',
+                      ]"
+                    />
+                    <div v-if="activeSkillId === cell.id.toString()" 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>
+                    </div>
+                    <div
+                      v-else
+                      class="lv-num"
+                      :style="{ color: lvColor(cell.id.toString(), cell.maxLearnLv) }"
+                    >
+                      {{ skillCfg(cell.id.toString()).lv }}
+                    </div>
+                  </template>
+                </div>
+              </template>
             </div>
-          </CardContent>
-        </Card>
+          </template>
+        </div>
       </div>
 
-      <div v-if="skills.length === 0" class="py-10 text-center text-sm text-muted-foreground">
-        当前筛选条件没有匹配技能。
+      <!-- ── TAB 1: Customization ── -->
+      <div v-show="tab === 1" class="flex-1 overflow-y-auto flex flex-col min-h-0">
+        <!-- UP section -->
+        <div class="shrink-0 border-b border-border/50">
+          <div class="px-3 pt-3 pb-1 text-xs font-semibold text-muted-foreground flex justify-between">
+            <span>技能突破 (UP)</span>
+            <span>{{ usedUPCount }}/{{ UP_LIMIT }}</span>
+          </div>
+          <div class="px-3 pb-3 space-y-2">
+            <div
+              v-for="(slot, idx) in upSlots"
+              :key="idx"
+              class="flex items-center gap-2 rounded-md border border-border/50 bg-muted/10 p-2"
+            >
+              <div class="text-[10px] text-muted-foreground w-6 shrink-0 text-center">{{ idx + 1 }}</div>
+
+              <!-- Mode 1 icon -->
+              <button
+                class="relative w-8 h-8 rounded border flex items-center justify-center shrink-0 transition-colors"
+                :class="
+                  slot.skillId && slot.mode === 1
+                    ? 'border-purple-400 ring-1 ring-purple-400/50 bg-purple-500/10'
+                    : 'border-border/50 hover:border-border'
+                "
+                @click="
+                  slot.skillId
+                    ? setUPSlotMode(idx, 1)
+                    : (openUpPickerSlot = openUpPickerSlot === idx ? null : idx)
+                "
+              >
+                <template v-if="slot.skillId">
+                  <img :src="getImageURL(skillById(slot.skillId)?.icon ?? '')" class="w-7 h-7 rounded object-cover" />
+                  <span v-if="slot.mode === 1" class="absolute -bottom-1 -right-1 text-[8px] bg-purple-500 text-white rounded-sm px-0.5 leading-3">1</span>
+                </template>
+                <span v-else class="text-[10px] text-muted-foreground">1</span>
+              </button>
+
+              <!-- Exchange -->
+              <button
+                class="text-muted-foreground hover:text-foreground shrink-0 text-sm"
+                :disabled="!slot.skillId"
+                title="切换形态"
+                @click="exchangeUPMode(idx)"
+              >⇄</button>
+
+              <!-- Mode 2 icon -->
+              <button
+                class="relative w-8 h-8 rounded border flex items-center justify-center shrink-0 transition-colors"
+                :class="
+                  slot.skillId && slot.mode === 2
+                    ? 'border-purple-400 ring-1 ring-purple-400/50 bg-purple-500/10'
+                    : 'border-border/50 hover:border-border'
+                "
+                @click="
+                  slot.skillId
+                    ? setUPSlotMode(idx, 2)
+                    : (openUpPickerSlot = openUpPickerSlot === idx ? null : idx)
+                "
+              >
+                <template v-if="slot.skillId">
+                  <img :src="getImageURL(skillById(slot.skillId)?.icon ?? '')" class="w-7 h-7 rounded object-cover" />
+                  <span v-if="slot.mode === 2" class="absolute -bottom-1 -right-1 text-[8px] bg-purple-500 text-white rounded-sm px-0.5 leading-3">2</span>
+                </template>
+                <span v-else class="text-[10px] text-muted-foreground">2</span>
+              </button>
+
+              <!-- Skill name -->
+              <div class="flex-1 min-w-0">
+                <div class="text-xs truncate" :title="slot.skillId ? (skillById(slot.skillId)?.name ?? '') : ''">
+                  {{ slot.skillId ? skillById(slot.skillId)?.name : "未选择技能" }}
+                </div>
+              </div>
+
+              <!-- Pick button -->
+              <button
+                class="text-[10px] border border-border/50 rounded px-1.5 py-0.5 text-muted-foreground hover:text-foreground shrink-0"
+                @click="openUpPickerSlot = openUpPickerSlot === idx ? null : idx"
+              >{{ slot.skillId ? "更换" : "选择" }}</button>
+            </div>
+
+            <!-- Icon picker -->
+            <div v-if="openUpPickerSlot !== null" class="rounded-md border border-border/50 bg-muted/20 p-2">
+              <div class="flex flex-wrap gap-1">
+                <button
+                  class="w-7 h-7 rounded border border-dashed border-border/60 text-[9px] text-muted-foreground hover:bg-muted/50"
+                  @click="setUPSlotSkill(openUpPickerSlot!, '')"
+                >清</button>
+                <button
+                  v-for="item in upOptionsForSlot(openUpPickerSlot!)"
+                  :key="item.id"
+                  class="relative w-7 h-7 rounded border transition-all hover:ring-1 ring-primary"
+                  :class="
+                    upSlots[openUpPickerSlot!]?.skillId === item.id.toString()
+                      ? 'border-primary ring-1'
+                      : 'border-border/60'
+                  "
+                  :title="item.name"
+                  @click="setUPSlotSkill(openUpPickerSlot!, item.id.toString())"
+                >
+                  <img :src="getImageURL(item.icon)" :alt="item.name" class="w-full h-full rounded object-cover" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- VP section -->
+        <div class="flex-1 overflow-y-auto min-h-0">
+          <div class="px-3 pt-3 pb-1 text-xs font-semibold text-muted-foreground flex justify-between sticky top-0 bg-background/80 backdrop-blur-sm z-10">
+            <span>技能进化 (VP)</span>
+            <span>{{ usedVPCount }}/{{ VP_LIMIT }}</span>
+          </div>
+          <div class="divide-y divide-border/30">
+            <div v-for="skill in vpSkills" :key="skill.id" class="px-3 py-2.5 flex items-start gap-2">
+              <!-- Lv + icon -->
+              <div class="shrink-0 flex flex-col items-center gap-1 pt-0.5">
+                <span class="text-[10px] text-muted-foreground">{{ skill.learnLv }}</span>
+                <img :src="getImageURL(skill.icon)" :alt="skill.name" class="w-7 h-7 rounded object-cover" />
+              </div>
+              <!-- Name -->
+              <div class="shrink-0 w-[4.5rem] text-[11px] text-muted-foreground truncate pt-1.5" :title="skill.name">
+                {{ skill.name }}
+              </div>
+              <!-- Two VP choice cards -->
+              <div class="flex flex-1 gap-1.5">
+                <button
+                  v-for="mode in [1, 2] as const"
+                  :key="mode"
+                  class="flex-1 rounded border p-1.5 text-left transition-colors hover:bg-muted/30"
+                  :class="
+                    skillCfg(skill.id.toString()).vp === mode
+                      ? 'border-purple-400 bg-purple-500/10'
+                      : 'border-border/50'
+                  "
+                  @click="setVPMode(skill.id.toString(), skillCfg(skill.id.toString()).vp === mode ? 0 : mode)"
+                >
+                  <div
+                    class="text-[10px] font-semibold"
+                    :class="skillCfg(skill.id.toString()).vp === mode ? 'text-purple-400' : 'text-muted-foreground'"
+                  >形态 {{ mode }}</div>
+                  <div class="mt-0.5 text-[10px] text-muted-foreground leading-tight line-clamp-2">
+                    {{ skill.vps[mode - 1]?.name || "—" }}
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-    </CardContent>
-  </Card>
+    </div>
+
+    <!-- ══ RIGHT PANEL: Skill Detail ══ -->
+    <div class="flex-1 flex flex-col overflow-y-auto" @click.self="clearActive">
+      <!-- Notice bar -->
+      <div
+        v-if="notice"
+        class="px-4 py-2 text-xs border-b shrink-0"
+        :class="
+          noticeType === 'error'
+            ? 'bg-destructive/10 text-destructive border-destructive/30'
+            : 'bg-muted/30 text-muted-foreground border-border/40'
+        "
+      >{{ notice }}</div>
+
+      <!-- Skill detail -->
+      <div v-if="selectedSkill" class="p-5 space-y-5">
+        <!-- Header -->
+        <div class="flex items-center gap-3">
+          <img
+            :src="getImageURL(selectedSkill.icon)"
+            :alt="selectedSkill.name"
+            class="w-14 h-14 rounded-lg object-cover border border-border/60"
+          />
+          <div>
+            <div class="text-base font-semibold">{{ selectedSkill.name }}</div>
+            <div class="text-xs text-muted-foreground mt-1">
+              {{ selectedSkill.type === "passive" ? "被动" : "主动" }} ·
+              Lv {{ selectedSkill.learnLv }} 解锁
+            </div>
+          </div>
+        </div>
+
+        <!-- Level control -->
+        <div>
+          <div class="flex items-baseline gap-2 mb-2.5">
+            <span
+              class="text-4xl font-bold tabular-nums"
+              :style="{ color: lvColor(selectedSkill.id.toString(), selectedSkill.maxLearnLv) }"
+            >{{ skillCfg(selectedSkill.id.toString()).lv }}</span>
+            <span class="text-xs text-muted-foreground">/ 满 {{ selectedSkill.maxLearnLv }}</span>
+          </div>
+          <div class="flex gap-1.5">
+            <Button size="sm" variant="outline" class="h-7 px-2.5 text-xs" @click="resetLv(selectedSkill.id.toString())">归零</Button>
+            <Button size="sm" variant="outline" class="h-7 px-2.5 text-xs" @click="stepLv(selectedSkill.id.toString(), -1)">−1</Button>
+            <Button size="sm" variant="outline" class="h-7 px-2.5 text-xs" @click="stepLv(selectedSkill.id.toString(), 1)">+1</Button>
+            <Button size="sm" variant="outline" class="h-7 px-2.5 text-xs" @click="setMaxLv(selectedSkill.id.toString())">满级</Button>
+          </div>
+        </div>
+
+        <!-- VP -->
+        <div v-if="selectedSkill.hasVP">
+          <div class="text-sm font-medium mb-2">VP 进化形态</div>
+          <div class="flex gap-2">
+            <button
+              v-for="mode in [1, 2] as const"
+              :key="mode"
+              class="flex-1 rounded-md border p-2.5 text-left text-xs transition-colors hover:bg-muted/30"
+              :class="
+                skillCfg(selectedSkill.id.toString()).vp === mode
+                  ? 'border-purple-400 bg-purple-500/10'
+                  : 'border-border/50'
+              "
+              @click="setVPMode(selectedSkill.id.toString(), skillCfg(selectedSkill.id.toString()).vp === mode ? 0 : mode)"
+            >
+              <div
+                class="font-semibold"
+                :class="skillCfg(selectedSkill.id.toString()).vp === mode ? 'text-purple-400' : 'text-muted-foreground'"
+              >形态 {{ mode }}</div>
+              <div class="mt-1.5 text-muted-foreground leading-snug">
+                {{ selectedSkill.vps[mode - 1]?.name || "—" }}
+              </div>
+            </button>
+          </div>
+        </div>
+
+        <!-- UP -->
+        <div v-if="selectedSkill.hasUP">
+          <div class="text-sm font-medium mb-1">UP 突破状态</div>
+          <div class="text-xs text-muted-foreground">
+            {{
+              skillCfg(selectedSkill.id.toString()).up === 0
+                ? "未配置"
+                : `已配置 形态 ${skillCfg(selectedSkill.id.toString()).up}`
+            }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Empty state -->
+      <div v-else class="flex-1 flex flex-col items-center justify-center gap-4 p-6 text-center">
+        <div class="text-sm text-muted-foreground">点击左侧技能查看详情</div>
+        <div class="text-xs text-muted-foreground space-y-1">
+          <div>VP 已用: {{ usedVPCount }} / {{ VP_LIMIT }}</div>
+          <div>UP 已用: {{ usedUPCount }} / {{ UP_LIMIT }}</div>
+        </div>
+        <Button size="sm" variant="outline" @click="resetAllSkills">重置全部技能</Button>
+      </div>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+/* 35×55px skill cell — matches original dimensions */
+.skill-cell {
+  position: relative;
+  width: 35px;
+  height: 55px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* Top 14px: badge row */
+.badge-row {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 14px;
+  display: flex;
+  justify-content: center;
+  gap: 2px;
+}
+.badge {
+  font-size: 8px;
+  line-height: 14px;
+  font-weight: 700;
+}
+.badge-vp { color: #c084fc; } /* purple-400 */
+.badge-up  { color: #fb923c; } /* amber-400 */
+
+/* 28×28px icon at y=14px */
+.skill-icon {
+  position: absolute;
+  top: 14px;
+  width: 28px;
+  height: 28px;
+  object-fit: cover;
+  border-radius: 2px;
+}
+
+/* 4 action buttons at the bottom */
+.action-row {
+  position: absolute;
+  bottom: 0;
+  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;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  font-weight: 700;
+  cursor: pointer;
+}
+.skill-btn:hover {
+  background-color: var(--muted);
+}
+
+/* Level number */
+.lv-num {
+  position: absolute;
+  bottom: 2px;
+  font-size: 10px;
+  width: 100%;
+  text-align: center;
+}
+</style>
diff --git a/frontendNew/src/stores/config.ts b/frontendNew/src/stores/config.ts
index d2df4eb9..45ef2f4d 100644
--- a/frontendNew/src/stores/config.ts
+++ b/frontendNew/src/stores/config.ts
@@ -16,8 +16,6 @@ import type { IResultSkillCount } from "@/api/calc/type";
 // | '魔法石'
 // | '武器',
 
-
-
 export interface IConfigEquip {
   id: string;
   reinforce: number;
@@ -76,6 +74,13 @@ export interface IConfig {
   emblems: Record<string, IConfigEmblem>;
 }
 
+export interface IChangeSourceLog {
+  id: number;
+  source: string;
+  detail: string;
+  time: string;
+}
+
 const defaultEqusConfig = {
   id: "",
   reinforce: 0,
@@ -127,6 +132,7 @@ export const useConfigStore = defineStore("configStore", () => {
   });
 
   const skillCountConfig = ref<IResultSkillCount[]>([]);
+  const changeSourceLogs = ref<IChangeSourceLog[]>([]);
 
   const loadConfig = () => {
     const infoStore = useInfoStore();
@@ -263,6 +269,20 @@ export const useConfigStore = defineStore("configStore", () => {
     }
   };
 
+  const pushChangeSource = (source: string, detail: string) => {
+    const next: IChangeSourceLog = {
+      id: Date.now() + Math.floor(Math.random() * 1000),
+      source,
+      detail,
+      time: new Date().toLocaleTimeString("zh-CN", { hour12: false }),
+    };
+    changeSourceLogs.value = [next, ...changeSourceLogs.value].slice(0, 30);
+  };
+
+  const clearChangeSource = () => {
+    changeSourceLogs.value = [];
+  };
+
   const result = useAsyncState(
     () => {
       return calc();
@@ -289,5 +309,8 @@ export const useConfigStore = defineStore("configStore", () => {
     defaultAvatarConfig,
     defaultOathConfig,
     defaultEmblemConfig,
+    changeSourceLogs,
+    pushChangeSource,
+    clearChangeSource,
   };
 });