dev

2026-05-11 14:42:22 +08:00
parent 5344e6660e
commit 4a198101f1
14 changed files with 1687 additions and 80 deletions
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useConfigStore, useInfoStore } from "@/stores";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import Tabs from "@/components/ui/tabs/Tabs.vue";
+import TabsList from "@/components/ui/tabs/TabsList.vue";
+import TabsTrigger from "@/components/ui/tabs/TabsTrigger.vue";
+
+const configStore = useConfigStore();
+const infoStore = useInfoStore();
+
+const displayTab = ref<"equ" | "oath">("equ");
+const skillSort = ref<"damage" | "cd">("damage");
+
+const resultState = computed(() => configStore.result.state);
+const isLoading = computed(() => configStore.result.isLoading);
+const resultError = computed(() => {
+  const error = configStore.result.error;
+  if (!error) return "";
+  return error instanceof Error ? error.message : String(error);
+});
+
+const sortedSkills = computed(() => {
+  const skills = [...(resultState.value?.skills ?? [])];
+  if (skillSort.value === "cd") {
+    return skills.sort((left, right) => left.cd - right.cd);
+  }
+  return skills.sort((left, right) => right.damage - left.damage);
+});
+
+const totalDamage = computed(() => {
+  return sortedSkills.value.reduce((sum, item) => sum + item.damage, 0);
+});
+
+const formatNumber = (value: number) => {
+  if (!Number.isFinite(value)) return "0";
+  if (Math.abs(value) >= 100000000) {
+    return `${(value / 100000000).toFixed(2)}e`;
+  }
+  return value.toLocaleString("zh-CN", { maximumFractionDigits: 2 });
+};
+
+const setStandard = () => {
+  if (!resultState.value?.uuid) return;
+  infoStore.setStandard(resultState.value, configStore.skillCountConfig);
+};
+
+const clearStandard = () => {
+  infoStore.setStandard(undefined);
+};
+
+const changeSources = computed(() => configStore.changeSourceLogs.slice(0, 8));
+
+const clearChangeSources = () => {
+  configStore.clearChangeSource();
+};
+</script>
+
+<template>
+  <div class="grid h-full min-h-0 grid-rows-[auto_auto_1fr] gap-3">
+    <Card>
+      <CardHeader class="pb-2">
+        <CardTitle class="text-base">结果面板</CardTitle>
+        <CardDescription>展示当前配置的实时计算结果。</CardDescription>
+      </CardHeader>
+      <CardContent class="flex gap-2">
+        <Button size="sm" variant="outline" @click="setStandard">设为基准</Button>
+        <Button size="sm" variant="outline" @click="clearStandard">清空基准</Button>
+      </CardContent>
+    </Card>
+
+    <Card>
+      <CardHeader class="pb-2">
+        <CardTitle class="text-sm">套装摘要</CardTitle>
+      </CardHeader>
+      <CardContent class="space-y-2 text-xs">
+        <Tabs :model-value="displayTab">
+          <TabsList class="grid w-full grid-cols-2">
+            <TabsTrigger value="equ" @click="displayTab = 'equ'">装备</TabsTrigger>
+            <TabsTrigger value="oath" @click="displayTab = 'oath'">誓约</TabsTrigger>
+          </TabsList>
+        </Tabs>
+
+        <div v-if="displayTab === 'equ'" class="rounded-md border p-2">
+          <div v-if="resultState?.suits?.suit">
+            <div class="font-medium">{{ resultState.suits.suit.name }}</div>
+            <div class="text-muted-foreground">
+              {{ resultState.suits.suit.rarity }} · {{ resultState.suits.suit.point }}点
+            </div>
+          </div>
+          <div v-else class="text-muted-foreground">暂无装备套装信息</div>
+        </div>
+
+        <div v-else class="rounded-md border p-2">
+          <div v-if="resultState?.suits?.oath">
+            <div class="font-medium">{{ resultState.suits.oath.name }}</div>
+            <div class="text-muted-foreground">
+              {{ resultState.suits.oath.rarity }} · {{ resultState.suits.oath.point }}点
+            </div>
+          </div>
+          <div v-else class="text-muted-foreground">暂无誓约套装信息</div>
+        </div>
+
+        <div v-if="resultState?.suits?.correction" class="text-muted-foreground">
+          套装积分修正：{{ resultState.suits.correction }}
+        </div>
+      </CardContent>
+    </Card>
+
+    <Card>
+      <CardHeader class="pb-2">
+        <CardTitle class="text-sm">配置变更来源</CardTitle>
+        <CardDescription class="flex items-center justify-between">
+          <span>用于回归定位最近触发计算的操作来源。</span>
+          <Button size="sm" variant="ghost" @click="clearChangeSources">清空</Button>
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="space-y-1 text-xs">
+        <div v-if="changeSources.length === 0" class="text-muted-foreground">
+          暂无变更来源记录。
+        </div>
+        <div
+          v-for="item in changeSources"
+          :key="item.id"
+          class="rounded-md border border-border/60 bg-muted/20 px-2 py-1"
+        >
+          <div class="flex items-center justify-between">
+            <span class="font-medium">{{ item.source }}</span>
+            <span class="text-muted-foreground">{{ item.time }}</span>
+          </div>
+          <div class="text-muted-foreground">{{ item.detail }}</div>
+        </div>
+      </CardContent>
+    </Card>
+
+    <Card class="min-h-0">
+      <CardHeader class="pb-2">
+        <CardTitle class="text-sm">技能伤害</CardTitle>
+        <CardDescription class="flex items-center gap-2">
+          <Button
+            size="sm"
+            variant="ghost"
+            :class="{ 'text-foreground': skillSort === 'damage' }"
+            @click="skillSort = 'damage'"
+          >
+            按伤害
+          </Button>
+          <Button
+            size="sm"
+            variant="ghost"
+            :class="{ 'text-foreground': skillSort === 'cd' }"
+            @click="skillSort = 'cd'"
+          >
+            按 CD
+          </Button>
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="min-h-0">
+        <div v-if="isLoading" class="py-6 text-center text-sm text-muted-foreground">计算中...</div>
+        <div v-else-if="resultError" class="py-6 text-center text-sm text-destructive">
+          {{ resultError }}
+        </div>
+        <div
+          v-else-if="!resultState || sortedSkills.length === 0"
+          class="py-6 text-center text-sm text-muted-foreground"
+        >
+          暂无结果，请先编辑配置。
+        </div>
+        <div v-else class="max-h-[48vh] overflow-auto rounded-md border">
+          <table class="w-full table-auto text-xs">
+            <thead class="bg-muted/60 sticky top-0 z-10">
+              <tr>
+                <th class="px-2 py-2 text-left">技能</th>
+                <th class="px-2 py-2 text-right">CD</th>
+                <th class="px-2 py-2 text-right">伤害</th>
+                <th class="px-2 py-2 text-right">占比</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="skill in sortedSkills"
+                :key="`${skill.name}-${skill.mode}`"
+                class="border-t hover:bg-muted/30"
+              >
+                <td class="px-2 py-1.5">
+                  <div class="flex items-center gap-2">
+                    <img
+                      :src="skill.icon"
+                      :alt="skill.name"
+                      class="size-5 rounded-sm object-cover"
+                    />
+                    <span class="truncate">{{ skill.name }}</span>
+                  </div>
+                </td>
+                <td class="px-2 py-1.5 text-right">{{ skill.cd.toFixed(1) }}</td>
+                <td class="px-2 py-1.5 text-right font-medium">{{ formatNumber(skill.damage) }}</td>
+                <td class="px-2 py-1.5 text-right text-muted-foreground">
+                  {{ totalDamage > 0 ? ((skill.damage / totalDamage) * 100).toFixed(1) : "0.0" }}%
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </CardContent>
+    </Card>
+  </div>
+</template>