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/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>