1

2026-05-20 18:25:21 +08:00
parent 777dcf2524
commit 7c5488ff24
15 changed files with 293 additions and 75 deletions
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui'
+import { AccordionRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AccordionRoot data-slot="accordion" v-bind="forwarded">
+    <slot />
+  </AccordionRoot>
+</template>
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { AccordionContentProps } from 'reka-ui'
+import { AccordionContent } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionContentProps & { class?: string }>()
+</script>
+
+<template>
+  <AccordionContent
+    data-slot="accordion-content"
+    v-bind="props"
+    :class="cn('overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down', props.class)"
+  >
+    <div class="pb-3 pt-0">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { AccordionItemProps } from 'reka-ui'
+import { AccordionItem } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionItemProps & { class?: string }>()
+</script>
+
+<template>
+  <AccordionItem data-slot="accordion-item" v-bind="props" :class="cn('border-b', props.class)">
+    <slot />
+  </AccordionItem>
+</template>
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ChevronDown } from 'lucide-vue-next'
+import type { AccordionTriggerProps } from 'reka-ui'
+import { AccordionHeader, AccordionTrigger } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionTriggerProps & { class?: string }>()
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      data-slot="accordion-trigger"
+      v-bind="props"
+      :class="cn('group/accordion-trigger flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180', props.class)"
+    >
+      <slot />
+      <ChevronDown class="size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>
@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { ScrollAreaRootProps } from 'reka-ui'
+import { ScrollAreaRoot, ScrollAreaViewport } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ScrollAreaRootProps & { class?: string }>()
+</script>
+
+<template>
+  <ScrollAreaRoot data-slot="scroll-area" :class="cn('relative overflow-hidden', props.class)" v-bind="props">
+    <ScrollAreaViewport class="size-full rounded-[inherit]">
+      <slot />
+    </ScrollAreaViewport>
+    <slot name="scrollbar" />
+  </ScrollAreaRoot>
+</template>
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ScrollAreaScrollbarProps } from 'reka-ui'
+import { ScrollAreaScrollbar, ScrollAreaThumb } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: string }>(), {
+  orientation: 'vertical',
+})
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    data-slot="scroll-area-scrollbar"
+    v-bind="props"
+    :class="cn(
+      'flex touch-none select-none p-px transition-colors',
+      props.orientation === 'vertical' ? 'h-full w-2.5 border-l border-l-transparent' : 'h-2.5 w-full border-t border-t-transparent',
+      props.class,
+    )"
+  >
+    <ScrollAreaThumb data-slot="scroll-area-thumb" class="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaScrollbar>
+</template>
@@ -0,0 +1,2 @@
+export { default as ScrollArea } from './ScrollArea.vue'
+export { default as ScrollBar } from './ScrollBar.vue'
@@ -367,13 +367,6 @@ const resetAllForge = () => {
          >
            配置编辑
          </Button>
-          <Button
-            size="sm"
-            :variant="forgeViewTab === 'result' ? 'default' : 'ghost'"
-            @click="forgeViewTab = 'result'"
-          >
-            计算结果
-          </Button>
        </div>

        <div v-if="forgeViewTab === 'config'" class="inline-flex flex-wrap rounded-md border p-1">
@@ -46,7 +46,8 @@ const activeTab = computed(() => {
  return "equipment";
 });

-const showGlobalResultPanel = computed(() => activeTab.value !== "equipment");
+// Result panel is now embedded inside Equipment/Skill/Forge pages to avoid duplicate rendering.
+const showGlobalResultPanel = computed(() => false);

 const loadCharacter = async () => {
  loading.value = true;
@@ -5,6 +5,13 @@ 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 { 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";
@@ -163,6 +170,8 @@ const diffClass = (current: number, baseline: number) => {
 const hasVisibleResult = computed(() => {
  return (resultState.value?.skills?.length ?? 0) > 0 || (resultState.value?.info?.length ?? 0) > 0;
 });
+
+const defaultOpenSections = ["equipped", "changes"];
 </script>

 <template>
@@ -190,55 +199,73 @@ const hasVisibleResult = computed(() => {
    </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>
+      <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>

-        <div v-if="displayTab === 'equ'" class="rounded-md border p-2">
-          <EquList
-            v-model:part="equippedPart"
-            :detail="configStore.config.equips"
-            :with-sub-weapon="(infoStore.infos?.alter?.includes('vegabond') ?? false)"
-            :with-pet="true"
-          />
-        </div>
+                <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>

-        <div v-else class="rounded-md border p-2">
-          <OathList v-model:part="equippedOathPart" :detail="configStore.config.oaths" />
-        </div>
-      </CardContent>
-    </Card>
+          <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>

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

@@ -324,8 +351,9 @@ const hasVisibleResult = computed(() => {
          暂无结果，请先编辑配置。
        </div>
        <div v-else class="flex min-h-0 h-full flex-col">
-          <div class="min-h-0 flex-1 overflow-auto rounded-md border">
-            <table class="w-full table-fixed text-[11px] sm:text-xs">
+          <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]" />
@@ -482,7 +510,12 @@ const hasVisibleResult = computed(() => {
                  </template>
                </tr>
              </tbody>
-            </table>
+              </table>
+              <template #scrollbar>
+                <ScrollBar orientation="horizontal" />
+                <ScrollBar orientation="vertical" />
+              </template>
+            </ScrollArea>
          </div>
          <div
            v-if="!isBufferClass"