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>