1

2026-05-28 00:30:53 +08:00
parent 8ec3b13b09
commit e834912f2c
8 changed files with 1041 additions and 1104 deletions
@@ -0,0 +1,710 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import type { IResultSkill } from "@/api/calc/type";
+import { useConfigStore, useInfoStore } from "@/stores";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+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 { getImageURL } from "@/utils";
+import EquList from "@/components/dnf/Equipment/List/index.vue";
+import OathList from "@/components/dnf/Equipment/Oath/index.vue";
+
+const configStore = useConfigStore();
+const infoStore = useInfoStore();
+
+/* ─── UI state ─── */
+const displayTab = ref<"equ" | "oath">("equ");
+const equippedPart = ref("");
+const equippedOathPart = ref("0");
+const skillSort = ref<"damage" | "cd" | "buff-main" | "buff-atk" | "buff-str" | "buff-ratio">(
+  "damage",
+);
+
+/* ─── Computed ─── */
+const resultState = computed(() => configStore.result.state);
+const isLoading = computed(() => configStore.result.isLoading);
+const isBufferClass = computed(() => !!resultState.value?.buffer);
+const standard = computed(() => infoStore.standard);
+
+const resultError = computed(() => {
+  const error = configStore.result.error;
+  if (!error) return "";
+  return error instanceof Error ? error.message : String(error);
+});
+
+const hasVisibleResult = computed(() => {
+  return (resultState.value?.skills?.length ?? 0) > 0 || (resultState.value?.info?.length ?? 0) > 0;
+});
+
+/* ─── Skill helpers ─── */
+const getSkillCountEntry = (skill: IResultSkill) => {
+  const name = skill.name;
+  const mode = skill.mode;
+  const existed = configStore.skillCountConfig.find(
+    (item) => item.name === name && item.mode === mode,
+  );
+  if (existed) return existed;
+  const created = { name, mode, count: 1 };
+  configStore.skillCountConfig.push(created);
+  return created;
+};
+
+const getSkillCount = (skill: IResultSkill) => {
+  return Math.max(0, Number(getSkillCountEntry(skill).count) || 0);
+};
+
+const setSkillCount = (skill: IResultSkill, raw: string | number) => {
+  const parsed = Number(raw);
+  const entry = getSkillCountEntry(skill);
+  entry.count = Number.isFinite(parsed) ? Math.max(0, parsed) : 0;
+};
+
+const getStandardSkill = (skill: IResultSkill) => {
+  return standard.value?.skills.find(
+    (item) => item.name === skill.name && item.mode === skill.mode,
+  );
+};
+
+const getStandardSkillCount = (skill: IResultSkill) => {
+  const count = standard.value?.skillCount.find(
+    (item) => item.name === skill.name && item.mode === skill.mode,
+  )?.count;
+  return Number(count ?? 0);
+};
+
+const sortedSkills = computed(() => {
+  const skills = [...(resultState.value?.skills ?? [])];
+  if (isBufferClass.value) {
+    const metricIndexMap: Record<string, number> = {
+      "buff-main": 0,
+      "buff-atk": 1,
+      "buff-str": 2,
+      "buff-ratio": 3,
+    };
+    const metricIndex = metricIndexMap[skillSort.value] ?? 2;
+    return skills.sort(
+      (left, right) => (right.buff?.[metricIndex] ?? 0) - (left.buff?.[metricIndex] ?? 0),
+    );
+  }
+  if (skillSort.value === "cd") {
+    return skills.sort((left, right) => left.cd - right.cd);
+  }
+  return skills.sort((left, right) => right.damage - left.damage);
+});
+
+const totalWeightedDamage = computed(() => {
+  return sortedSkills.value.reduce((sum, item) => sum + item.damage * getSkillCount(item), 0);
+});
+
+const totalStandardDamage = computed(() => {
+  if (!standard.value) return 0;
+  return sortedSkills.value.reduce((sum, item) => {
+    const base = getStandardSkill(item);
+    if (!base) return sum;
+    const count = getStandardSkillCount(item);
+    return sum + base.damage * count;
+  }, 0);
+});
+
+const totalDiffLabel = computed(() => {
+  if (!totalStandardDamage.value) return formatNumber(totalWeightedDamage.value);
+  const diff =
+    ((totalWeightedDamage.value - totalStandardDamage.value) / totalStandardDamage.value) * 100;
+  const prefix = diff >= 0 ? "+" : "";
+  return `${prefix}${diff.toFixed(2)}%`;
+});
+
+const totalDiffClass = computed(() => {
+  if (!totalStandardDamage.value) return "text-foreground";
+  return totalWeightedDamage.value >= totalStandardDamage.value
+    ? "text-emerald-600"
+    : "text-red-600";
+});
+
+/* ─── Format helpers ─── */
+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 formatPercent = (value: number) => `${value.toFixed(2)}%`;
+
+const formatDeltaPercent = (current: number, baseline: number) => {
+  if (!baseline) return formatNumber(current);
+  const ratio = ((current - baseline) / baseline) * 100;
+  return `${ratio >= 0 ? "+" : ""}${ratio.toFixed(2)}%`;
+};
+
+const diffClass = (current: number, baseline: number) => {
+  if (!baseline) return "text-foreground";
+  return current >= baseline ? "text-emerald-600" : "text-red-600";
+};
+
+/* ─── Actions ─── */
+const retryCalc = async () => {
+  await configStore.result.execute();
+};
+
+const setStandard = () => {
+  if (!resultState.value?.uuid) return;
+  infoStore.setStandard(resultState.value, configStore.skillCountConfig);
+};
+
+const clearStandard = () => {
+  infoStore.setStandard(undefined);
+};
+
+/* ─── Suit / oath skill ─── */
+const suit = computed(() => resultState.value?.suits?.suit);
+const oathSuit = computed(() => resultState.value?.suits?.oath);
+
+const oathSkillsSorted = computed(() => {
+  const skillOrder = ["2", "1", "3"];
+  const res = [...(oathSuit.value?.skills ?? [])].sort((a, b) => {
+    const ai = skillOrder.indexOf(a.skillId);
+    const bi = skillOrder.indexOf(b.skillId);
+    return (ai === -1 ? skillOrder.length : ai) - (bi === -1 ? skillOrder.length : bi);
+  });
+  return res.map((a) => ({
+    ...a,
+    active:
+      a.enable &&
+      (a.skillId === configStore.config.oathSkill ||
+        (!configStore.config.oathSkill && a.id === oathSuit.value?.id)),
+  }));
+});
+
+const selectOathSkill = (skill: { skillId: string; enable: boolean }) => {
+  if (!skill.enable) return;
+  configStore.config.oathSkill = skill.skillId;
+};
+
+/* ─── Equipped items list ─── */
+const partOrder = [
+  "武器", "上衣", "下装", "头肩", "腰带", "鞋",
+  "项链", "手镯", "戒指", "辅助装备", "魔法石", "耳环",
+];
+
+const equById = (id: string) => infoStore.equips.find((item) => item.id === id);
+
+const adaptation = (part: string) => {
+  const eq = equById(configStore.config.equips?.[part]?.id ?? "");
+  return Math.min(eq?.max_adaptation ?? 0, configStore.config.equips?.[part]?.adaptation ?? 0);
+};
+
+const rarityColor = (rarity: string): string => {
+  switch (rarity) {
+    case "太初": return "text-[#5aff62]";
+    case "史诗":
+    case "智慧产物": return "text-[#fcb600]";
+    case "神话": return "text-[#f8c63d]";
+    case "神器": return "text-[#ef28c1]";
+    case "稀有": return "text-[#9879da]";
+    case "传说": return "text-[#ff7700]";
+    case "勇者": return "text-[#ff6666]";
+    case "高级": return "text-[#68d5ed]";
+    default: return "text-[#fcb600]";
+  }
+};
+
+const equippedParts = computed(() =>
+  partOrder.filter((part) => !!configStore.config.equips?.[part]?.id),
+);
+
+/* ─── Change sources ─── */
+const changeSources = computed(() => configStore.changeSourceLogs.slice(0, 8));
+const clearChangeSources = () => configStore.clearChangeSource();
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col gap-4 lg:flex-row">
+    <!-- ══ Left panel: character info ══ -->
+    <div
+      class="flex w-full flex-none flex-col gap-3 lg:w-72 lg:overflow-y-auto lg:overflow-x-hidden"
+    >
+      <!-- Equipment / Oath grid -->
+      <Card>
+        <CardContent class="space-y-2 p-3">
+          <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'">
+            <EquList
+              v-model:part="equippedPart"
+              :detail="configStore.config.equips"
+              :with-sub-weapon="infoStore.infos?.alter?.includes('vegabond') ?? false"
+              :with-pet="true"
+            />
+          </div>
+          <div v-else>
+            <OathList v-model:part="equippedOathPart" :detail="configStore.config.oaths" />
+          </div>
+        </CardContent>
+      </Card>
+
+      <!-- Character stats -->
+      <Card v-if="resultState?.info?.length">
+        <CardHeader class="pb-1 pt-3">
+          <CardTitle class="text-xs text-muted-foreground">角色属性</CardTitle>
+        </CardHeader>
+        <CardContent class="pb-3">
+          <div class="grid grid-cols-2 gap-x-3 gap-y-0.5 text-xs">
+            <template v-for="info in resultState.info" :key="info.id">
+              <div
+                class="flex justify-between gap-1"
+                :class="
+                  typeof info.value === 'string' && info.value.includes('/') ? 'col-span-2' : ''
+                "
+              >
+                <span class="shrink-0 text-muted-foreground">{{ info.name }}</span>
+                <span class="text-right font-medium text-emerald-600">{{ info.value }}</span>
+              </div>
+            </template>
+          </div>
+        </CardContent>
+      </Card>
+
+      <!-- Suit info + oath skills -->
+      <Card v-if="suit || oathSuit">
+        <CardContent class="space-y-1 px-3 py-2 text-xs">
+          <div v-if="suit" class="flex items-center gap-1.5">
+            <img
+              :src="getImageURL(`/equipment${suit.imageUrl}`)"
+              alt=""
+              class="size-5 object-contain"
+            />
+            <span :class="rarityColor(suit.rarity)" class="flex-1">{{ suit.name }} 套装</span>
+            <span class="shrink-0 text-muted-foreground">{{ suit.rarity }}</span>
+            <span class="shrink-0 font-medium">{{ suit.point }}点</span>
+          </div>
+          <div v-if="oathSuit" class="flex items-center gap-1.5">
+            <img
+              :src="getImageURL(`/equipment${oathSuit.imageUrl}`)"
+              alt=""
+              class="size-5 object-contain"
+            />
+            <span :class="rarityColor(oathSuit.rarity)" class="flex-1"
+              >{{ oathSuit.name }} 誓约</span
+            >
+            <span class="shrink-0 text-muted-foreground">{{ oathSuit.rarity }}</span>
+            <span class="shrink-0 font-medium">{{ oathSuit.point }}点</span>
+          </div>
+          <!-- Oath skill selector -->
+          <div
+            v-if="oathSkillsSorted.length"
+            class="flex items-center justify-center gap-4 pt-1"
+          >
+            <button
+              v-for="skill in oathSkillsSorted"
+              :key="skill.id"
+              type="button"
+              :disabled="!skill.enable"
+              class="rounded-full transition-opacity"
+              :class="[
+                skill.enable ? 'cursor-pointer opacity-100' : 'cursor-not-allowed opacity-40',
+                skill.active ? 'ring-2 ring-amber-400 ring-offset-1' : '',
+              ]"
+              @click="selectOathSkill(skill)"
+            >
+              <img
+                :src="getImageURL(skill.imageUrl)"
+                :alt="skill.name"
+                class="size-8 rounded-full object-contain"
+              />
+            </button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <!-- Equipped items list -->
+      <Card v-if="equippedParts.length">
+        <CardHeader class="pb-1 pt-3">
+          <CardTitle class="text-xs text-muted-foreground">穿戴装备信息</CardTitle>
+        </CardHeader>
+        <CardContent class="pb-2">
+          <ScrollArea class="max-h-64">
+            <div class="space-y-0.5 text-xs">
+              <div
+                v-for="part in equippedParts"
+                :key="part"
+                class="flex items-center gap-1.5 rounded px-1 py-0.5 hover:bg-muted/40"
+              >
+                <img
+                  :src="getImageURL(`/equipment/part/${part}.png`)"
+                  :alt="part"
+                  class="size-4 shrink-0 object-contain"
+                />
+                <img
+                  v-if="adaptation(part) > 0"
+                  :src="getImageURL(`/equipment/adaptation/${adaptation(part)}.png`)"
+                  alt=""
+                  class="h-2.5 w-3 shrink-0 object-contain"
+                />
+                <span
+                  v-if="(configStore.config.equips[part]?.reinforce ?? 0) > 0"
+                  class="shrink-0 font-medium"
+                  :class="
+                    configStore.config.equips[part]?.reinforceType === 1
+                      ? 'text-[#ef28c1]'
+                      : 'text-[#68d5ed]'
+                  "
+                  >+{{ configStore.config.equips[part]?.reinforce }}</span
+                >
+                <span
+                  v-if="(configStore.config.equips[part]?.refine ?? 0) > 0"
+                  class="shrink-0 text-[#9879da]"
+                  >({{ configStore.config.equips[part]?.refine }})</span
+                >
+                <span
+                  class="truncate"
+                  :class="
+                    rarityColor(equById(configStore.config.equips[part]?.id ?? '')?.rarity ?? '')
+                  "
+                  >{{ equById(configStore.config.equips[part]?.id ?? '')?.name ?? "—" }}</span
+                >
+              </div>
+            </div>
+            <template #scrollbar>
+              <ScrollBar orientation="vertical" />
+            </template>
+          </ScrollArea>
+        </CardContent>
+      </Card>
+    </div>
+
+    <!-- ══ Right panel: skill damage table ══ -->
+    <div class="flex min-w-0 flex-1 flex-col gap-3">
+      <!-- Action row -->
+      <Card>
+        <CardContent class="flex flex-wrap gap-2 pt-3 pb-3">
+          <Button
+            size="sm"
+            variant="outline"
+            class="h-8 px-2.5 text-xs sm:text-sm"
+            @click="setStandard"
+            >设为基准</Button
+          >
+          <Button
+            size="sm"
+            variant="outline"
+            class="h-8 px-2.5 text-xs sm:text-sm"
+            @click="clearStandard"
+            >清空基准</Button
+          >
+        </CardContent>
+      </Card>
+
+      <!-- Skill table card -->
+      <Card class="min-h-0 flex-1">
+        <CardHeader class="pb-2">
+          <CardTitle class="text-sm">{{ isBufferClass ? "技能加成" : "技能伤害" }}</CardTitle>
+          <CardDescription class="flex flex-wrap items-center gap-1.5">
+            <Button
+              v-if="!isBufferClass"
+              size="sm"
+              variant="ghost"
+              class="h-7 px-2 text-xs"
+              :class="{ 'text-foreground': skillSort === 'damage' }"
+              @click="skillSort = 'damage'"
+            >
+              按伤害
+            </Button>
+            <Button
+              v-if="!isBufferClass"
+              size="sm"
+              variant="ghost"
+              class="h-7 px-2 text-xs"
+              :class="{ 'text-foreground': skillSort === 'cd' }"
+              @click="skillSort = 'cd'"
+            >
+              按 CD
+            </Button>
+            <Button
+              v-if="isBufferClass"
+              size="sm"
+              variant="ghost"
+              class="h-7 px-2 text-xs"
+              :class="{ 'text-foreground': skillSort === 'buff-main' }"
+              @click="skillSort = 'buff-main'"
+            >
+              适用
+            </Button>
+            <Button
+              v-if="isBufferClass"
+              size="sm"
+              variant="ghost"
+              class="h-7 px-2 text-xs"
+              :class="{ 'text-foreground': skillSort === 'buff-atk' }"
+              @click="skillSort = 'buff-atk'"
+            >
+              三攻
+            </Button>
+            <Button
+              v-if="isBufferClass"
+              size="sm"
+              variant="ghost"
+              class="h-7 px-2 text-xs"
+              :class="{ 'text-foreground': skillSort === 'buff-str' }"
+              @click="skillSort = 'buff-str'"
+            >
+              力智
+            </Button>
+            <Button
+              v-if="isBufferClass"
+              size="sm"
+              variant="ghost"
+              class="h-7 px-2 text-xs"
+              :class="{ 'text-foreground': skillSort === 'buff-ratio' }"
+              @click="skillSort = 'buff-ratio'"
+            >
+              增伤
+            </Button>
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="flex h-full min-h-0 flex-col">
+          <div v-if="isLoading" class="py-6 text-center text-sm text-muted-foreground">
+            计算中...
+          </div>
+          <div
+            v-else-if="resultError"
+            class="flex flex-col items-center gap-3 py-6 text-center text-sm text-destructive"
+          >
+            <span>{{ resultError }}</span>
+            <Button size="sm" variant="outline" @click="retryCalc">重试计算</Button>
+          </div>
+          <div
+            v-else-if="!hasVisibleResult || sortedSkills.length === 0"
+            class="py-6 text-center text-sm text-muted-foreground"
+          >
+            暂无结果，请先编辑配置。
+          </div>
+          <div v-else class="flex h-full min-h-0 flex-col">
+            <div class="min-h-0 flex-1 overflow-hidden rounded-md border">
+              <ScrollArea class="h-full w-full">
+                <table class="w-full table-fixed text-[11px] sm:text-xs">
+                  <colgroup v-if="!isBufferClass">
+                    <col class="w-[9.5rem] sm:w-[11rem]" />
+                    <col class="hidden sm:table-column sm:w-[4.25rem]" />
+                    <col class="w-[4.5rem]" />
+                    <col class="hidden md:table-column md:w-[5.5rem]" />
+                    <col class="w-[5.5rem] sm:w-[6rem]" />
+                    <col class="w-[4.5rem]" />
+                  </colgroup>
+                  <colgroup v-else>
+                    <col class="w-[9rem] sm:w-[10rem]" />
+                    <col class="hidden sm:table-column sm:w-[4.25rem]" />
+                    <col class="w-[4.75rem]" />
+                    <col class="w-[4.75rem]" />
+                    <col class="w-[4.75rem]" />
+                    <col class="w-[4.75rem]" />
+                  </colgroup>
+                  <thead class="sticky top-0 z-10 bg-muted/60">
+                    <tr v-if="!isBufferClass">
+                      <th class="px-1.5 py-1.5 text-left">技能</th>
+                      <th class="hidden px-1.5 py-1.5 text-right sm:table-cell">CD</th>
+                      <th class="px-1.5 py-1.5 text-right">次数</th>
+                      <th class="hidden px-1.5 py-1.5 text-right md:table-cell">秒伤</th>
+                      <th class="px-1.5 py-1.5 text-right">总伤害</th>
+                      <th class="px-1.5 py-1.5 text-right">占比</th>
+                    </tr>
+                    <tr v-else>
+                      <th class="px-1.5 py-1.5 text-left">技能</th>
+                      <th class="hidden px-1.5 py-1.5 text-right sm:table-cell">CD</th>
+                      <th class="px-1.5 py-1.5 text-right">适用</th>
+                      <th class="px-1.5 py-1.5 text-right">三攻</th>
+                      <th class="px-1.5 py-1.5 text-right">力智</th>
+                      <th class="px-1.5 py-1.5 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-1.5 py-1.5">
+                        <div class="flex items-center gap-2">
+                          <img
+                            :src="skill.icon"
+                            :alt="skill.name"
+                            class="size-4 rounded-sm object-cover sm:size-5"
+                          />
+                          <span class="max-w-[6.5rem] truncate sm:max-w-[8.5rem]"
+                            >{{ skill.name }}{{ skill.mode ? ` [${skill.mode}]` : "" }}</span
+                          >
+                        </div>
+                      </td>
+                      <td class="hidden px-1.5 py-1.5 text-right sm:table-cell">
+                        {{ skill.cd.toFixed(1) }}
+                      </td>
+                      <template v-if="!isBufferClass">
+                        <td class="px-1.5 py-1.5 text-right">
+                          <Input
+                            class="ml-auto h-7 w-12 px-1 text-right sm:w-14"
+                            type="number"
+                            :model-value="getSkillCount(skill)"
+                            @update:model-value="(value) => setSkillCount(skill, value)"
+                          />
+                        </td>
+                        <td
+                          class="hidden px-1.5 py-1.5 text-right text-muted-foreground md:table-cell"
+                        >
+                          {{
+                            formatNumber(
+                              skill.cd > 0 ? (skill.damage * getSkillCount(skill)) / skill.cd : 0,
+                            )
+                          }}
+                        </td>
+                        <td
+                          class="px-1.5 py-1.5 text-right font-medium"
+                          :class="
+                            diffClass(
+                              skill.damage * getSkillCount(skill),
+                              (getStandardSkill(skill)?.damage ?? 0) * getStandardSkillCount(skill),
+                            )
+                          "
+                        >
+                          {{
+                            formatDeltaPercent(
+                              skill.damage * getSkillCount(skill),
+                              (getStandardSkill(skill)?.damage ?? 0) * getStandardSkillCount(skill),
+                            )
+                          }}
+                        </td>
+                        <td class="px-1.5 py-1.5 text-right text-muted-foreground">
+                          {{
+                            totalWeightedDamage > 0
+                              ? formatPercent(
+                                  (skill.damage * getSkillCount(skill) * 100) / totalWeightedDamage,
+                                )
+                              : "0.00%"
+                          }}
+                        </td>
+                      </template>
+                      <template v-else>
+                        <td class="hidden px-1.5 py-1.5 text-right sm:table-cell">
+                          {{ skill.cd.toFixed(1) }}
+                        </td>
+                        <td
+                          class="px-1.5 py-1.5 text-right"
+                          :class="
+                            diffClass(skill.buff?.[0] ?? 0, getStandardSkill(skill)?.buff?.[0] ?? 0)
+                          "
+                        >
+                          {{
+                            formatDeltaPercent(
+                              skill.buff?.[0] ?? 0,
+                              getStandardSkill(skill)?.buff?.[0] ?? 0,
+                            )
+                          }}
+                        </td>
+                        <td
+                          class="px-1.5 py-1.5 text-right"
+                          :class="
+                            diffClass(skill.buff?.[1] ?? 0, getStandardSkill(skill)?.buff?.[1] ?? 0)
+                          "
+                        >
+                          {{
+                            formatDeltaPercent(
+                              skill.buff?.[1] ?? 0,
+                              getStandardSkill(skill)?.buff?.[1] ?? 0,
+                            )
+                          }}
+                        </td>
+                        <td
+                          class="px-1.5 py-1.5 text-right"
+                          :class="
+                            diffClass(skill.buff?.[2] ?? 0, getStandardSkill(skill)?.buff?.[2] ?? 0)
+                          "
+                        >
+                          {{
+                            formatDeltaPercent(
+                              skill.buff?.[2] ?? 0,
+                              getStandardSkill(skill)?.buff?.[2] ?? 0,
+                            )
+                          }}
+                        </td>
+                        <td
+                          class="px-1.5 py-1.5 text-right"
+                          :class="
+                            diffClass(skill.buff?.[3] ?? 0, getStandardSkill(skill)?.buff?.[3] ?? 0)
+                          "
+                        >
+                          {{
+                            formatDeltaPercent(
+                              skill.buff?.[3] ?? 0,
+                              getStandardSkill(skill)?.buff?.[3] ?? 0,
+                            )
+                          }}
+                        </td>
+                      </template>
+                    </tr>
+                  </tbody>
+                </table>
+                <template #scrollbar>
+                  <ScrollBar orientation="horizontal" />
+                  <ScrollBar orientation="vertical" />
+                </template>
+              </ScrollArea>
+            </div>
+            <div
+              v-if="!isBufferClass"
+              class="mt-2 text-right text-sm font-semibold"
+              :class="totalDiffClass"
+            >
+              合计：{{ totalDiffLabel }}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <!-- Change sources -->
+      <Card>
+        <CardHeader class="pb-1 pt-3">
+          <CardTitle class="text-xs text-muted-foreground">配置变更来源</CardTitle>
+        </CardHeader>
+        <CardContent class="pb-3">
+          <div class="space-y-1 text-xs">
+            <div class="flex items-center justify-between pb-1">
+              <span class="text-muted-foreground">用于回归定位最近触发计算的操作来源。</span>
+              <Button size="sm" variant="ghost" class="h-6 px-2 text-xs" @click="clearChangeSources"
+                >清空</Button
+              >
+            </div>
+            <div v-if="changeSources.length === 0" class="text-muted-foreground">
+              暂无变更来源记录。
+            </div>
+            <ScrollArea v-else class="max-h-40 rounded-md border border-border/60 p-2">
+              <div class="space-y-1">
+                <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>
+              </div>
+              <template #scrollbar>
+                <ScrollBar orientation="vertical" />
+              </template>
+            </ScrollArea>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</template>
@@ -37,12 +37,14 @@ const tabs = [
  { label: "装备", key: "equipment" },
  { label: "技能", key: "skill" },
  { label: "打造", key: "forge" },
+  { label: "计算详情", key: "result" },
 ] as const;

 const activeTab = computed(() => {
  const path = route.path;
  if (path.endsWith("/skill")) return "skill";
  if (path.endsWith("/forge")) return "forge";
+  if (path.endsWith("/result")) return "result";
  return "equipment";
 });

@@ -111,39 +113,18 @@ onUnmounted(() => {

 <template>
  <section class="mx-auto flex min-h-full w-full max-w-7xl flex-col gap-4 px-4 py-6 md:px-8">
-    <Card class="flex-none">
-      <CardHeader>
-        <CardTitle class="flex items-center justify-between">
-          <span>角色配置</span>
-          <Button variant="outline" size="sm" :disabled="loading" @click="loadCharacter">
-            <RefreshCcw :class="{ 'animate-spin': loading }" />
-            刷新
-          </Button>
-        </CardTitle>
-      </CardHeader>
-      <CardContent class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-        <Tabs :model-value="activeTab" class="gap-0">
-          <TabsList>
-            <TabsTrigger
-              v-for="tab in tabs"
-              :key="tab.key"
-              :value="tab.key"
-              @click="switchTab(tab.key)"
-            >
-              {{ tab.label }}
-            </TabsTrigger>
-          </TabsList>
-        </Tabs>
-        <div class="text-sm text-muted-foreground">
-          <span v-if="loading" class="inline-flex items-center gap-2">
-            <LoaderCircle class="size-4 animate-spin" />
-            正在同步角色数据...
-          </span>
-          <span v-else-if="loadError">{{ loadError }}</span>
-          <span v-else>数据源已就绪，可继续编辑配置。</span>
-        </div>
-      </CardContent>
-    </Card>
+    <Tabs :model-value="activeTab" class="gap-0">
+      <TabsList>
+        <TabsTrigger
+          v-for="tab in tabs"
+          :key="tab.key"
+          :value="tab.key"
+          @click="switchTab(tab.key)"
+        >
+          {{ tab.label }}
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>

    <div
      :class="[
@@ -3,14 +3,7 @@ import { computed, ref } from "vue";
 import type { IResultSkill } from "@/api/calc/type";
 import { useConfigStore, useInfoStore } from "@/stores";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
+import { Card, CardContent } from "@/components/ui/card";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import Tabs from "@/components/ui/tabs/Tabs.vue";
 import TabsList from "@/components/ui/tabs/TabsList.vue";
@@ -24,9 +17,6 @@ const infoStore = useInfoStore();
 const displayTab = ref<"equ" | "oath">("equ");
 const equippedPart = ref("");
 const equippedOathPart = ref("0");
-const skillSort = ref<"damage" | "cd" | "buff-main" | "buff-atk" | "buff-str" | "buff-ratio">(
-  "damage",
-);

 const resultState = computed(() => configStore.result.state);
 const isLoading = computed(() => configStore.result.isLoading);
@@ -55,21 +45,11 @@ const getSkillCountEntry = (skill: IResultSkill) => {
  return created;
 };

-const getSkillCount = (skill: IResultSkill) => {
-  return Math.max(0, Number(getSkillCountEntry(skill).count) || 0);
-};
+const getSkillCount = (skill: IResultSkill) =>
+  Math.max(0, Number(getSkillCountEntry(skill).count) || 0);

-const setSkillCount = (skill: IResultSkill, raw: string | number) => {
-  const parsed = Number(raw);
-  const entry = getSkillCountEntry(skill);
-  entry.count = Number.isFinite(parsed) ? Math.max(0, parsed) : 0;
-};
-
-const getStandardSkill = (skill: IResultSkill) => {
-  return standard.value?.skills.find(
-    (item) => item.name === skill.name && item.mode === skill.mode,
-  );
-};
+const getStandardSkill = (skill: IResultSkill) =>
+  standard.value?.skills.find((item) => item.name === skill.name && item.mode === skill.mode);

 const getStandardSkillCount = (skill: IResultSkill) => {
  const count = standard.value?.skillCount.find(
@@ -78,50 +58,32 @@ const getStandardSkillCount = (skill: IResultSkill) => {
  return Number(count ?? 0);
 };

-const sortedSkills = computed(() => {
-  const skills = [...(resultState.value?.skills ?? [])];
-  if (isBufferClass.value) {
-    const metricIndexMap: Record<string, number> = {
-      "buff-main": 0,
-      "buff-atk": 1,
-      "buff-str": 2,
-      "buff-ratio": 3,
-    };
-    const metricIndex = metricIndexMap[skillSort.value] ?? 2;
-    return skills.sort(
-      (left, right) => (right.buff?.[metricIndex] ?? 0) - (left.buff?.[metricIndex] ?? 0),
-    );
-  }
-  if (skillSort.value === "cd") {
-    return skills.sort((left, right) => left.cd - right.cd);
-  }
-  return skills.sort((left, right) => right.damage - left.damage);
-});
+const skills = computed(() => resultState.value?.skills ?? []);

-const totalDamage = computed(() => {
-  return sortedSkills.value.reduce((sum, item) => sum + item.damage, 0);
-});
-
-const totalWeightedDamage = computed(() => {
-  return sortedSkills.value.reduce((sum, item) => sum + item.damage * getSkillCount(item), 0);
-});
+const totalWeightedDamage = computed(() =>
+  skills.value.reduce((sum, item) => sum + item.damage * getSkillCount(item), 0),
+);

 const totalStandardDamage = computed(() => {
  if (!standard.value) return 0;
-  return sortedSkills.value.reduce((sum, item) => {
+  return skills.value.reduce((sum, item) => {
    const base = getStandardSkill(item);
    if (!base) return sum;
-    const count = getStandardSkillCount(item);
-    return sum + base.damage * count;
+    return sum + base.damage * getStandardSkillCount(item);
  }, 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 totalDiffLabel = computed(() => {
  if (!totalStandardDamage.value) return formatNumber(totalWeightedDamage.value);
  const diff =
    ((totalWeightedDamage.value - totalStandardDamage.value) / totalStandardDamage.value) * 100;
-  const prefix = diff >= 0 ? "+" : "";
-  return `${prefix}${diff.toFixed(2)}%`;
+  return `${diff >= 0 ? "+" : ""}${diff.toFixed(2)}%`;
 });

 const totalDiffClass = computed(() => {
@@ -131,400 +93,62 @@ const totalDiffClass = computed(() => {
    : "text-red-600";
 });

-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();
-};
-
-const formatPercent = (value: number) => `${value.toFixed(2)}%`;
-
-const formatDeltaPercent = (current: number, baseline: number) => {
-  if (!baseline) return formatNumber(current);
-  const ratio = ((current - baseline) / baseline) * 100;
-  return `${ratio >= 0 ? "+" : ""}${ratio.toFixed(2)}%`;
-};
-
-const diffClass = (current: number, baseline: number) => {
-  if (!baseline) return "text-foreground";
-  return current >= baseline ? "text-emerald-600" : "text-red-600";
-};
-
-const hasVisibleResult = computed(() => {
-  return (resultState.value?.skills?.length ?? 0) > 0 || (resultState.value?.info?.length ?? 0) > 0;
-});
-
-const defaultOpenSections = ["equipped", "changes"];
+const hasVisibleResult = computed(
+  () => (resultState.value?.skills?.length ?? 0) > 0 || (resultState.value?.info?.length ?? 0) > 0,
+);
 </script>

 <template>
  <div class="flex h-full min-h-0 flex-col gap-3">
+    <!-- 装备 / 誓约 列表 -->
    <Card>
-      <CardHeader class="pb-2">
-        <CardTitle class="text-base">结果面板</CardTitle>
-      </CardHeader>
-      <CardContent class="flex flex-wrap gap-2">
-        <Button
-          size="sm"
-          variant="outline"
-          class="h-8 px-2.5 text-xs sm:text-sm"
-          @click="setStandard"
-          >设为基准</Button
-        >
-        <Button
-          size="sm"
-          variant="outline"
-          class="h-8 px-2.5 text-xs sm:text-sm"
-          @click="clearStandard"
-          >清空基准</Button
-        >
+      <CardContent class="pt-3 pb-3">
+        <div 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>
+          <ScrollArea class="max-h-56 rounded-md border p-2">
+            <div v-if="displayTab === 'equ'">
+              <EquList
+                v-model:part="equippedPart"
+                :detail="configStore.config.equips"
+                :with-sub-weapon="(infoStore.infos?.alter?.includes('vegabond') ?? false)"
+                :with-pet="true"
+              />
+            </div>
+            <div v-else>
+              <OathList v-model:part="equippedOathPart" :detail="configStore.config.oaths" />
+            </div>
+            <template #scrollbar>
+              <ScrollBar orientation="vertical" />
+            </template>
+          </ScrollArea>
+        </div>
      </CardContent>
    </Card>

+    <!-- 合计伤害 -->
    <Card>
-      <CardContent class="pt-3">
-        <Accordion type="multiple" :default-value="defaultOpenSections" class="w-full">
-          <AccordionItem value="equipped" class="border-border/60">
-            <AccordionTrigger>穿戴信息</AccordionTrigger>
-            <AccordionContent>
-              <div 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>
-
-                <ScrollArea class="max-h-56 rounded-md border p-2">
-                  <div v-if="displayTab === 'equ'">
-                    <EquList
-                      v-model:part="equippedPart"
-                      :detail="configStore.config.equips"
-                      :with-sub-weapon="(infoStore.infos?.alter?.includes('vegabond') ?? false)"
-                      :with-pet="true"
-                    />
-                  </div>
-                  <div v-else>
-                    <OathList v-model:part="equippedOathPart" :detail="configStore.config.oaths" />
-                  </div>
-                  <template #scrollbar>
-                    <ScrollBar orientation="vertical" />
-                  </template>
-                </ScrollArea>
-              </div>
-            </AccordionContent>
-          </AccordionItem>
-
-          <AccordionItem value="changes" class="border-border/60">
-            <AccordionTrigger>配置变更来源</AccordionTrigger>
-            <AccordionContent>
-              <div class="space-y-1 text-xs">
-                <div class="flex items-center justify-between pb-1">
-                  <span class="text-muted-foreground">用于回归定位最近触发计算的操作来源。</span>
-                  <Button size="sm" variant="ghost" @click="clearChangeSources">清空</Button>
-                </div>
-
-                <div v-if="changeSources.length === 0" class="text-muted-foreground">
-                  暂无变更来源记录。
-                </div>
-                <ScrollArea v-else class="max-h-44 rounded-md border border-border/60 p-2">
-                  <div class="space-y-1">
-                    <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>
-                  </div>
-                  <template #scrollbar>
-                    <ScrollBar orientation="vertical" />
-                  </template>
-                </ScrollArea>
-              </div>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      </CardContent>
-    </Card>
-
-    <Card class="min-h-0 flex-1">
-      <CardHeader class="pb-2">
-        <CardTitle class="text-sm">{{ isBufferClass ? "技能加成" : "技能伤害" }}</CardTitle>
-        <CardDescription class="flex flex-wrap items-center gap-1.5">
-          <Button
-            v-if="!isBufferClass"
-            size="sm"
-            variant="ghost"
-            class="h-7 px-2 text-xs"
-            :class="{ 'text-foreground': skillSort === 'damage' }"
-            @click="skillSort = 'damage'"
-          >
-            按伤害
-          </Button>
-          <Button
-            v-if="!isBufferClass"
-            size="sm"
-            variant="ghost"
-            class="h-7 px-2 text-xs"
-            :class="{ 'text-foreground': skillSort === 'cd' }"
-            @click="skillSort = 'cd'"
-          >
-            按 CD
-          </Button>
-          <Button
-            v-if="isBufferClass"
-            size="sm"
-            variant="ghost"
-            class="h-7 px-2 text-xs"
-            :class="{ 'text-foreground': skillSort === 'buff-main' }"
-            @click="skillSort = 'buff-main'"
-          >
-            适用
-          </Button>
-          <Button
-            v-if="isBufferClass"
-            size="sm"
-            variant="ghost"
-            class="h-7 px-2 text-xs"
-            :class="{ 'text-foreground': skillSort === 'buff-atk' }"
-            @click="skillSort = 'buff-atk'"
-          >
-            三攻
-          </Button>
-          <Button
-            v-if="isBufferClass"
-            size="sm"
-            variant="ghost"
-            class="h-7 px-2 text-xs"
-            :class="{ 'text-foreground': skillSort === 'buff-str' }"
-            @click="skillSort = 'buff-str'"
-          >
-            力智
-          </Button>
-          <Button
-            v-if="isBufferClass"
-            size="sm"
-            variant="ghost"
-            class="h-7 px-2 text-xs"
-            :class="{ 'text-foreground': skillSort === 'buff-ratio' }"
-            @click="skillSort = 'buff-ratio'"
-          >
-            增伤
-          </Button>
-        </CardDescription>
-      </CardHeader>
-      <CardContent class="min-h-0 flex h-full flex-col">
-        <div v-if="isLoading" class="py-6 text-center text-sm text-muted-foreground">计算中...</div>
+      <CardContent class="px-4 py-3">
+        <div v-if="isLoading" class="text-center text-sm text-muted-foreground">计算中...</div>
        <div
          v-else-if="resultError"
-          class="flex flex-col items-center gap-3 py-6 text-center text-sm text-destructive"
+          class="flex flex-col items-center gap-2 text-center text-sm text-destructive"
        >
          <span>{{ resultError }}</span>
          <Button size="sm" variant="outline" @click="retryCalc">重试计算</Button>
        </div>
-        <div
-          v-else-if="!hasVisibleResult || sortedSkills.length === 0"
-          class="py-6 text-center text-sm text-muted-foreground"
-        >
+        <div v-else-if="!hasVisibleResult" class="text-center text-sm text-muted-foreground">
          暂无结果，请先编辑配置。
        </div>
-        <div v-else class="flex min-h-0 h-full flex-col">
-          <div class="min-h-0 flex-1 overflow-hidden rounded-md border">
-            <ScrollArea class="h-full w-full">
-              <table class="w-full table-fixed text-[11px] sm:text-xs">
-              <colgroup v-if="!isBufferClass">
-                <col class="w-[9.5rem] sm:w-[11rem]" />
-                <col class="hidden sm:table-column sm:w-[4.25rem]" />
-                <col class="w-[4.5rem]" />
-                <col class="hidden md:table-column md:w-[5.5rem]" />
-                <col class="w-[5.5rem] sm:w-[6rem]" />
-                <col class="w-[4.5rem]" />
-              </colgroup>
-              <colgroup v-else>
-                <col class="w-[9rem] sm:w-[10rem]" />
-                <col class="hidden sm:table-column sm:w-[4.25rem]" />
-                <col class="w-[4.75rem]" />
-                <col class="w-[4.75rem]" />
-                <col class="w-[4.75rem]" />
-                <col class="w-[4.75rem]" />
-              </colgroup>
-              <thead class="bg-muted/60 sticky top-0 z-10">
-                <tr v-if="!isBufferClass">
-                  <th class="px-1.5 py-1.5 text-left">技能</th>
-                  <th class="hidden px-1.5 py-1.5 text-right sm:table-cell">CD</th>
-                  <th class="px-1.5 py-1.5 text-right">次数</th>
-                  <th class="hidden px-1.5 py-1.5 text-right md:table-cell">秒伤</th>
-                  <th class="px-1.5 py-1.5 text-right">总伤害</th>
-                  <th class="px-1.5 py-1.5 text-right">占比</th>
-                </tr>
-                <tr v-else>
-                  <th class="px-1.5 py-1.5 text-left">技能</th>
-                  <th class="hidden px-1.5 py-1.5 text-right sm:table-cell">CD</th>
-                  <th class="px-1.5 py-1.5 text-right">适用</th>
-                  <th class="px-1.5 py-1.5 text-right">三攻</th>
-                  <th class="px-1.5 py-1.5 text-right">力智</th>
-                  <th class="px-1.5 py-1.5 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-1.5 py-1.5">
-                    <div class="flex items-center gap-2">
-                      <img
-                        :src="skill.icon"
-                        :alt="skill.name"
-                        class="size-4 rounded-sm object-cover sm:size-5"
-                      />
-                      <span class="max-w-[6.5rem] truncate sm:max-w-[8.5rem]"
-                        >{{ skill.name }}{{ skill.mode ? ` [${skill.mode}]` : "" }}</span
-                      >
-                    </div>
-                  </td>
-                  <td class="hidden px-1.5 py-1.5 text-right sm:table-cell">
-                    {{ skill.cd.toFixed(1) }}
-                  </td>
-                  <template v-if="!isBufferClass">
-                    <td class="px-1.5 py-1.5 text-right">
-                      <Input
-                        class="ml-auto h-7 w-12 px-1 text-right sm:w-14"
-                        type="number"
-                        :model-value="getSkillCount(skill)"
-                        @update:model-value="(value) => setSkillCount(skill, value)"
-                      />
-                    </td>
-                    <td class="hidden px-1.5 py-1.5 text-right text-muted-foreground md:table-cell">
-                      {{
-                        formatNumber(
-                          skill.cd > 0 ? (skill.damage * getSkillCount(skill)) / skill.cd : 0,
-                        )
-                      }}
-                    </td>
-                    <td
-                      class="px-1.5 py-1.5 text-right font-medium"
-                      :class="
-                        diffClass(
-                          skill.damage * getSkillCount(skill),
-                          (getStandardSkill(skill)?.damage ?? 0) * getStandardSkillCount(skill),
-                        )
-                      "
-                    >
-                      {{
-                        formatDeltaPercent(
-                          skill.damage * getSkillCount(skill),
-                          (getStandardSkill(skill)?.damage ?? 0) * getStandardSkillCount(skill),
-                        )
-                      }}
-                    </td>
-                    <td class="px-1.5 py-1.5 text-right text-muted-foreground">
-                      {{
-                        totalWeightedDamage > 0
-                          ? formatPercent(
-                              (skill.damage * getSkillCount(skill) * 100) / totalWeightedDamage,
-                            )
-                          : "0.00%"
-                      }}
-                    </td>
-                  </template>
-                  <template v-else>
-                    <td class="hidden px-1.5 py-1.5 text-right sm:table-cell">
-                      {{ skill.cd.toFixed(1) }}
-                    </td>
-                    <td
-                      class="px-1.5 py-1.5 text-right"
-                      :class="
-                        diffClass(skill.buff?.[0] ?? 0, getStandardSkill(skill)?.buff?.[0] ?? 0)
-                      "
-                    >
-                      {{
-                        formatDeltaPercent(
-                          skill.buff?.[0] ?? 0,
-                          getStandardSkill(skill)?.buff?.[0] ?? 0,
-                        )
-                      }}
-                    </td>
-                    <td
-                      class="px-1.5 py-1.5 text-right"
-                      :class="
-                        diffClass(skill.buff?.[1] ?? 0, getStandardSkill(skill)?.buff?.[1] ?? 0)
-                      "
-                    >
-                      {{
-                        formatDeltaPercent(
-                          skill.buff?.[1] ?? 0,
-                          getStandardSkill(skill)?.buff?.[1] ?? 0,
-                        )
-                      }}
-                    </td>
-                    <td
-                      class="px-1.5 py-1.5 text-right"
-                      :class="
-                        diffClass(skill.buff?.[2] ?? 0, getStandardSkill(skill)?.buff?.[2] ?? 0)
-                      "
-                    >
-                      {{
-                        formatDeltaPercent(
-                          skill.buff?.[2] ?? 0,
-                          getStandardSkill(skill)?.buff?.[2] ?? 0,
-                        )
-                      }}
-                    </td>
-                    <td
-                      class="px-1.5 py-1.5 text-right"
-                      :class="
-                        diffClass(skill.buff?.[3] ?? 0, getStandardSkill(skill)?.buff?.[3] ?? 0)
-                      "
-                    >
-                      {{
-                        formatDeltaPercent(
-                          skill.buff?.[3] ?? 0,
-                          getStandardSkill(skill)?.buff?.[3] ?? 0,
-                        )
-                      }}
-                    </td>
-                  </template>
-                </tr>
-              </tbody>
-              </table>
-              <template #scrollbar>
-                <ScrollBar orientation="horizontal" />
-                <ScrollBar orientation="vertical" />
-              </template>
-            </ScrollArea>
-          </div>
-          <div
-            v-if="!isBufferClass"
-            class="mt-2 text-right text-sm font-semibold"
-            :class="totalDiffClass"
-          >
-            合计：{{ totalDiffLabel }}
-          </div>
+        <div v-else-if="!isBufferClass" class="flex items-center justify-between">
+          <span class="text-sm text-muted-foreground">合计伤害</span>
+          <span class="text-sm font-semibold" :class="totalDiffClass">{{ totalDiffLabel }}</span>
        </div>
+        <div v-else class="text-center text-sm text-muted-foreground">请前往计算详情查看。</div>
      </CardContent>
    </Card>
  </div>
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import api from "@/api";
+
+const props = defineProps<{
+  skillId: string;
+  level: number;
+}>();
+
+const skillInfo = asyncComputed(async () => {
+  if (!props.skillId || props.level == null) return undefined;
+  return await api.skillDetail(props.skillId, props.level);
+});
+
+const basic = computed(() => {
+  const info = skillInfo.value;
+  if (!info) return [];
+  return [
+    { label: "技能等级", value: info.attribute.level },
+    { label: "学习等级", value: info.requiredLevel },
+    { label: "等级上限", value: info.maxLevel },
+    {
+      label: "冷却时间",
+      value: info.attribute.coolTime ? `${info.attribute.coolTime.toFixed(1)}秒` : undefined,
+    },
+    {
+      label: "施放时间",
+      value: !info.attribute.castingTime
+        ? "瞬发"
+        : `${info.attribute.castingTime.toFixed(1)}秒`,
+    },
+    { label: "魔法值", value: info.attribute.consumeMp },
+    {
+      label: "消耗无色小晶块",
+      value: info.consumeItem?.value ? `${info.consumeItem.value}个` : undefined,
+    },
+  ].filter((item) => item.value !== undefined && item.value !== null && item.value !== "");
+});
+
+const descLines = computed(() => skillInfo.value?.descDetail.split("\n") ?? []);
+
+const detailLines = computed(() => {
+  const items =
+    skillInfo.value?.attribute.optionDesc?.split("\n").filter((item) => !!item) ?? [];
+  return items.map((a) => {
+    // highlight value placeholder prefix
+    const beforeReplace = a.match(/^(.+?)\s*(\{value\d+\}.*)$/);
+    if (beforeReplace) {
+      a = `${beforeReplace[1]}<span class="detail-label-suffix">${beforeReplace[2]}</span>`;
+    }
+    const matches = a.match(/\{([^}]+)\}/g);
+    if (matches) {
+      matches.forEach((match) => {
+        const key = match.replace(/[{}]/g, "");
+        if (/^value.+/.test(key)) {
+          const value =
+            skillInfo.value?.attribute.optionValue[key as `value${string}`] ?? "-";
+          a = a.replace(
+            match,
+            `<span style="padding:0 2px;color:var(--color-skill-value,#4AA256)">${value}</span>`,
+          );
+        }
+      });
+    }
+    return a;
+  });
+});
+
+const hasEvolution = computed(() => (skillInfo.value?.evolution?.length ?? 0) > 0);
+</script>
+
+<template>
+  <div v-if="!skillInfo" class="flex items-center justify-center h-16 text-xs text-muted-foreground">
+    加载中…
+  </div>
+
+  <template v-else>
+    <!-- ── 基本信息 ── -->
+    <div>
+      <div class="text-xs font-semibold text-muted-foreground mb-1.5 uppercase tracking-wide">
+        基本信息
+      </div>
+      <div class="rounded-md border border-border/40 bg-muted/10 divide-y divide-border/30">
+        <div
+          v-for="item in basic"
+          :key="item.label"
+          class="flex items-center justify-between px-3 py-1.5 text-xs"
+        >
+          <span class="text-muted-foreground">{{ item.label }}</span>
+          <span class="tabular-nums font-medium">{{ item.value }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── 技能描述 ── -->
+    <div v-if="descLines.length">
+      <div class="text-xs font-semibold text-muted-foreground mb-1.5 uppercase tracking-wide">
+        技能描述
+      </div>
+      <div
+        class="rounded-md border border-border/40 bg-muted/10 px-3 py-2 text-xs leading-relaxed max-h-48 overflow-y-auto"
+      >
+        <div
+          v-for="(line, i) in descLines"
+          :key="i"
+          class="min-h-[1em] whitespace-pre-wrap text-muted-foreground"
+        >
+          {{ line }}
+        </div>
+      </div>
+    </div>
+
+    <!-- ── 技能属性 ── -->
+    <div v-if="detailLines.length">
+      <div class="text-xs font-semibold text-muted-foreground mb-1.5 uppercase tracking-wide">
+        技能属性
+      </div>
+      <div class="rounded-md border border-border/40 bg-muted/10 divide-y divide-border/30">
+        <div
+          v-for="(line, i) in detailLines"
+          :key="i"
+          class="flex items-center justify-between px-3 py-1.5 text-xs"
+          v-html="line"
+        />
+      </div>
+    </div>
+
+    <!-- ── 技能进化 (VP 描述) ── -->
+    <div v-if="hasEvolution">
+      <div class="text-xs font-semibold text-muted-foreground mb-1.5 uppercase tracking-wide">
+        技能进化
+      </div>
+      <div class="space-y-2">
+        <div
+          v-for="(evo, i) in skillInfo.evolution"
+          :key="i"
+          class="rounded-md border border-border/40 bg-muted/10 p-3"
+        >
+          <div class="text-xs font-semibold text-purple-400 mb-1.5">{{ evo.name }}</div>
+          <div
+            class="text-xs leading-relaxed text-muted-foreground whitespace-pre-wrap max-h-36 overflow-y-auto"
+          >{{ evo.descDetail }}</div>
+        </div>
+      </div>
+    </div>
+  </template>
+</template>
@@ -8,6 +8,14 @@ import TabsTrigger from "@/components/ui/tabs/TabsTrigger.vue";
 import { getImageURL } from "@/utils";
 import type { ISkill } from "@/api/info/type";
 import ResultPanel from "@/pages/Dcalc/Character/Result/Index.vue";
+import SkillDetailPanel from "./components/SkillDetail/index.vue";
+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";
+
+const vpImg = (mode: number) => (mode === 1 ? vp1Img : vp2Img);
+const upImg = (mode: number) => (mode === 1 ? up1Img : up2Img);

 const infoStore = useInfoStore();
 const configStore = useConfigStore();
@@ -307,12 +315,16 @@ const resetAllSkills = () => {
                  @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
-                    >
+                    <img
+                      v-if="skillCfg(skill.id.toString()).vp > 0"
+                      :src="vpImg(skillCfg(skill.id.toString()).vp)"
+                      class="badge-img"
+                    />
+                    <img
+                      v-if="skillCfg(skill.id.toString()).up > 0"
+                      :src="upImg(skillCfg(skill.id.toString()).up)"
+                      class="badge-img"
+                    />
                  </div>
                  <img
                    :src="getImageURL(skill.icon)"
@@ -357,12 +369,16 @@ const resetAllSkills = () => {
                >
                  <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
-                      >
+                      <img
+                        v-if="skillCfg(cell.id.toString()).vp > 0"
+                        :src="vpImg(skillCfg(cell.id.toString()).vp)"
+                        class="badge-img"
+                      />
+                      <img
+                        v-if="skillCfg(cell.id.toString()).up > 0"
+                        :src="upImg(skillCfg(cell.id.toString()).up)"
+                        class="badge-img"
+                      />
                    </div>
                    <img
                      :src="getImageURL(cell.icon)"
@@ -643,61 +659,63 @@ const resetAllSkills = () => {

        <!-- Skill detail -->
        <div v-if="selectedSkill" class="flex-1 overflow-y-auto 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 }} 解锁
+          <!-- Header + Level control: left-right layout -->
+          <div class="flex items-center gap-4">
+            <!-- Left: icon + name + type -->
+            <div class="flex items-center gap-3 flex-1 min-w-0">
+              <img
+                :src="getImageURL(selectedSkill.icon)"
+                :alt="selectedSkill.name"
+                class="w-14 h-14 shrink-0 rounded-lg object-cover border border-border/60"
+              />
+              <div class="min-w-0">
+                <div class="text-base font-semibold truncate">{{ selectedSkill.name }}</div>
+                <div class="text-xs text-muted-foreground mt-1">
+                  {{ selectedSkill.type === "passive" ? "被动" : "主动" }} · Lv
+                  {{ selectedSkill.learnLv }} 解锁
+                </div>
              </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
-              >
+            <!-- Right: level number + buttons -->
+            <div class="shrink-0 flex flex-col items-end gap-2">
+              <div class="flex items-baseline gap-1.5">
+                <span
+                  class="text-3xl 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">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  class="h-7 px-2 text-xs"
+                  @click="resetLv(selectedSkill.id.toString())"
+                  >归零</Button
+                >
+                <Button
+                  size="sm"
+                  variant="outline"
+                  class="h-7 px-2 text-xs"
+                  @click="stepLv(selectedSkill.id.toString(), -1)"
+                  >−1</Button
+                >
+                <Button
+                  size="sm"
+                  variant="outline"
+                  class="h-7 px-2 text-xs"
+                  @click="stepLv(selectedSkill.id.toString(), 1)"
+                  >+1</Button
+                >
+                <Button
+                  size="sm"
+                  variant="outline"
+                  class="h-7 px-2 text-xs"
+                  @click="setMaxLv(selectedSkill.id.toString())"
+                  >满级</Button
+                >
+              </div>
            </div>
          </div>

@@ -749,6 +767,12 @@ const resetAllSkills = () => {
              }}
            </div>
          </div>
+
+          <!-- API-fetched skill detail: 基本信息 / 技能描述 / 技能属性 / 技能进化 -->
+          <SkillDetailPanel
+            :skill-id="selectedSkill.uuid"
+            :level="skillCfg(selectedSkill.id.toString()).lv"
+          />
        </div>

        <!-- Empty state -->
@@ -788,17 +812,11 @@ const resetAllSkills = () => {
  justify-content: center;
  gap: 2px;
 }
-.badge {
-  font-size: 8px;
-  line-height: 14px;
-  font-weight: 700;
+.badge-img {
+  width: 14px;
+  height: 14px;
+  object-fit: contain;
 }
-.badge-vp {
-  color: #c084fc;
-} /* purple-400 */
-.badge-up {
-  color: #fb923c;
-} /* amber-400 */

 /* 28×28px icon at y=14px */
 .skill-icon {