1

frontendNew/src/pages/Dcalc/Character/Result/Index.vue

@@ -4,6 +4,12 @@ import type { IResultSkill } from "@/api/calc/type";
 import { useConfigStore, useInfoStore } from "@/stores";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import Tabs from "@/components/ui/tabs/Tabs.vue";
 import TabsList from "@/components/ui/tabs/TabsList.vue";
@@ -33,6 +39,15 @@ 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);
+};
+
 const getSkillCountEntry = (skill: IResultSkill) => {
   const name = skill.name;
   const mode = skill.mode;
@@ -96,59 +111,134 @@ const totalDiffClass = computed(() => {
 const hasVisibleResult = computed(
   () => (resultState.value?.skills?.length ?? 0) > 0 || (resultState.value?.info?.length ?? 0) > 0,
 );
+
+const changeSources = computed(() => configStore.changeSourceLogs.slice(0, 8));
+
+const clearChangeSources = () => {
+  configStore.clearChangeSource();
+};
+
+const defaultOpenSections = ["overview", "equipped"];
+
+const statusText = computed(() => {
+  if (isLoading.value) return "计算中...";
+  if (resultError.value) return resultError.value;
+  if (!hasVisibleResult.value) return "暂无结果，请先编辑配置。";
+  if (isBufferClass.value) return "请前往计算详情查看。";
+  return "";
+});
 </script>
 
 <template>
   <div class="flex h-full min-h-0 flex-col gap-3">
-    <!-- 装备 / 誓约 列表 -->
     <Card>
-      <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>
+      <CardContent class="py-2">
+        <Accordion type="multiple" :default-value="defaultOpenSections" class="w-full">
+          <AccordionItem value="overview">
+            <AccordionTrigger>结果概览</AccordionTrigger>
+            <AccordionContent>
+              <div class="space-y-3 px-1">
+                <div class="flex flex-wrap gap-2">
+                  <Button size="sm" variant="outline" class="h-8 px-2.5" @click="setStandard"
+                    >设为基准</Button
+                  >
+                  <Button size="sm" variant="outline" class="h-8 px-2.5" @click="clearStandard"
+                    >清空基准</Button
+                  >
+                </div>
 
-    <!-- 合计伤害 -->
-    <Card>
-      <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-2 text-center text-sm text-destructive"
-        >
-          <span>{{ resultError }}</span>
-          <Button size="sm" variant="outline" @click="retryCalc">重试计算</Button>
-        </div>
-        <div v-else-if="!hasVisibleResult" class="text-center text-sm text-muted-foreground">
-          暂无结果，请先编辑配置。
-        </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>
+                <div
+                  v-if="isLoading || resultError || !hasVisibleResult || isBufferClass"
+                  class="rounded-md border border-border/60 px-3 py-2 text-center text-sm"
+                  :class="resultError ? 'text-destructive' : 'text-muted-foreground'"
+                >
+                  {{ statusText }}
+                </div>
+
+                <div
+                  v-else
+                  class="flex items-center justify-between rounded-md border border-border/60 px-3 py-2"
+                >
+                  <span class="text-sm text-muted-foreground">合计伤害</span>
+                  <span class="text-sm font-semibold" :class="totalDiffClass">{{
+                    totalDiffLabel
+                  }}</span>
+                </div>
+
+                <div v-if="resultError" class="flex justify-center">
+                  <Button size="sm" variant="outline" @click="retryCalc">重试计算</Button>
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="equipped">
+            <AccordionTrigger>穿戴信息</AccordionTrigger>
+            <AccordionContent>
+              <div class="space-y-2 px-1 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">
+            <AccordionTrigger>配置变更来源</AccordionTrigger>
+            <AccordionContent>
+              <div class="space-y-2 px-1">
+                <div class="flex items-center justify-between text-xs text-muted-foreground">
+                  <span>最近触发计算的操作记录</span>
+                  <Button size="sm" variant="ghost" class="h-7 px-2" @click="clearChangeSources"
+                    >清空</Button
+                  >
+                </div>
+
+                <div v-if="changeSources.length === 0" class="text-xs 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 text-xs"
+                    >
+                      <div class="flex items-center justify-between gap-2">
+                        <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>
   </div>