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 13:16:24 +08:00
parent 6f07c8bc15
commit b539cdb42f
34 changed files with 1118 additions and 779 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontendNew/src/pages/Dcalc/Character/Skill/components/SkillDetail/index.vue
+104 -68
View File
@@ -1,6 +1,13 @@
<script setup lang="ts">
import { computed } from "vue";
import api from "@/api";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
const props = defineProps<{
skillId: string;
@@ -63,6 +70,8 @@ const detailLines = computed(() => {
});
const hasEvolution = computed(() => (skillInfo.value?.evolution?.length ?? 0) > 0);
const defaultOpenSections = ["basic", "attr"];
</script>
<template>
@@ -74,75 +83,102 @@ const hasEvolution = computed(() => (skillInfo.value?.evolution?.length ?? 0) >
</div>
<template v-else>
<!-- ── 基本信息 ── -->
<div>
<div class="text-xs font-semibold text-muted-foreground mb-1.5 uppercase tracking-wide">
基本信息
</div>
<div class="rounded-md border border-border/40 bg-muted/10 divide-y divide-border/30">
<div
v-for="item in basic"
:key="item.label"
class="flex items-center justify-between px-3 py-1.5 text-xs"
<Accordion type="multiple" :default-value="defaultOpenSections" class="w-full space-y-1">
<AccordionItem value="basic" class="rounded-md border border-border/40 px-3">
<AccordionTrigger class="text-xs font-semibold tracking-wide text-muted-foreground"
>基本信息</AccordionTrigger
>
<span class="text-muted-foreground">{{ item.label }}</span>
<span class="tabular-nums font-medium">{{ item.value }}</span>
</div>
</div>
</div>
<!-- ── 技能描述 ── -->
<div v-if="descLines.length">
<div class="text-xs font-semibold text-muted-foreground mb-1.5 uppercase tracking-wide">
技能描述
</div>
<div
class="rounded-md border border-border/40 bg-muted/10 px-3 py-2 text-xs leading-relaxed max-h-48 overflow-y-auto"
>
<div
v-for="(line, i) in descLines"
:key="i"
class="min-h-[1em] whitespace-pre-wrap text-muted-foreground"
>
{{ line }}
</div>
</div>
</div>
<!-- ── 技能属性 ── -->
<div v-if="detailLines.length">
<div class="text-xs font-semibold text-muted-foreground mb-1.5 uppercase tracking-wide">
技能属性
</div>
<div class="rounded-md border border-border/40 bg-muted/10 divide-y divide-border/30">
<div
v-for="(line, i) in detailLines"
:key="i"
class="flex items-center justify-between px-3 py-1.5 text-xs"
v-html="line"
/>
</div>
</div>
<!-- ── 技能进化 (VP 描述) ── -->
<div v-if="hasEvolution">
<div class="text-xs font-semibold text-muted-foreground mb-1.5 uppercase tracking-wide">
技能进化
</div>
<div class="space-y-2">
<div
v-for="(evo, i) in skillInfo.evolution"
:key="i"
class="rounded-md border border-border/40 bg-muted/10 p-3"
>
<div class="text-xs font-semibold text-purple-400 mb-1.5">{{ evo.name }}</div>
<div
class="text-xs leading-relaxed text-muted-foreground whitespace-pre-wrap max-h-36 overflow-y-auto"
>
{{ evo.descDetail }}
<AccordionContent>
<div class="rounded-md border border-border/40 bg-muted/10 divide-y divide-border/30">
<div
v-for="item in basic"
:key="item.label"
class="flex items-center justify-between px-3 py-1.5 text-xs"
>
<span class="text-muted-foreground">{{ item.label }}</span>
<span class="tabular-nums font-medium">{{ item.value }}</span>
</div>
</div>
</div>
</div>
</div>
</AccordionContent>
</AccordionItem>
<AccordionItem
v-if="descLines.length"
value="desc"
class="rounded-md border border-border/40 px-3"
>
<AccordionTrigger class="text-xs font-semibold tracking-wide text-muted-foreground"
>技能描述</AccordionTrigger
>
<AccordionContent>
<ScrollArea class="max-h-48 rounded-md border border-border/40 bg-muted/10 px-3 py-2">
<div
v-for="(line, i) in descLines"
:key="i"
class="min-h-[1em] whitespace-pre-wrap text-xs leading-relaxed text-muted-foreground"
>
{{ line }}
</div>
<template #scrollbar>
<ScrollBar orientation="vertical" />
</template>
</ScrollArea>
</AccordionContent>
</AccordionItem>
<AccordionItem
v-if="detailLines.length"
value="attr"
class="rounded-md border border-border/40 px-3"
>
<AccordionTrigger class="text-xs font-semibold tracking-wide text-muted-foreground"
>技能属性</AccordionTrigger
>
<AccordionContent>
<ScrollArea class="max-h-56 rounded-md border border-border/40 bg-muted/10">
<div class="divide-y divide-border/30">
<div
v-for="(line, i) in detailLines"
:key="i"
class="flex items-center justify-between px-3 py-1.5 text-xs"
v-html="line"
/>
</div>
<template #scrollbar>
<ScrollBar orientation="vertical" />
</template>
</ScrollArea>
</AccordionContent>
</AccordionItem>
<AccordionItem
v-if="hasEvolution"
value="evolution"
class="rounded-md border border-border/40 px-3"
>
<AccordionTrigger class="text-xs font-semibold tracking-wide text-muted-foreground"
>技能进化</AccordionTrigger
>
<AccordionContent>
<div class="space-y-2">
<div
v-for="(evo, i) in skillInfo.evolution"
:key="i"
class="rounded-md border border-border/40 bg-muted/10 p-3"
>
<div class="mb-1.5 text-xs font-semibold text-purple-400">{{ evo.name }}</div>
<ScrollArea class="max-h-36 rounded-md bg-muted/30 px-2 py-1">
<div class="whitespace-pre-wrap text-xs leading-relaxed text-muted-foreground">
{{ evo.descDetail }}
</div>
<template #scrollbar>
<ScrollBar orientation="vertical" />
</template>
</ScrollArea>
</div>
</div>
</AccordionContent>
</AccordionItem>
</Accordion>
</template>
</template>