dnftools/dcalc
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

1

Browse Source
This commit is contained in:
imelon
2026-05-28 00:30:53 +08:00
parent 8ec3b13b09
commit e834912f2c
8 changed files with 1041 additions and 1104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontendNew/src/pages/Dcalc/Character/CalcDetail/index.vue
+710
View File
@@ -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>
frontendNew/src/pages/Dcalc/Character/Index.vue
+14 -33
View File
@@ -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="[
frontendNew/src/pages/Dcalc/Character/Result/Index.vue
+56 -432
View File
@@ -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>
frontendNew/src/pages/Dcalc/Character/Skill/components/SkillDetail/index.vue
+147
View File
@@ -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>
frontendNew/src/pages/Dcalc/Character/Skill/index.vue
+93 -75
View File
@@ -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 {
frontendNew/src/router/index.ts
+5
View File
@@ -52,6 +52,11 @@ const router = createRouter({
name: "character-forge",
component: () => import("@/pages/Dcalc/Character/Forge/index.vue"),
},
{
path: "result",
name: "character-result",
component: () => import("@/pages/Dcalc/Character/CalcDetail/index.vue"),
},
],
},
],