1
This commit is contained in:
@@ -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, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||
import Tabs from "@/components/ui/tabs/Tabs.vue";
|
||||
@@ -240,6 +246,7 @@ const equippedParts = computed(() =>
|
||||
/* ─── Change sources ─── */
|
||||
const changeSources = computed(() => configStore.changeSourceLogs.slice(0, 8));
|
||||
const clearChangeSources = () => configStore.clearChangeSource();
|
||||
const leftPanelOpenSections = ["equipped", "stats", "suit", "equipped-list"];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -248,152 +255,166 @@ const clearChangeSources = () => configStore.clearChangeSource();
|
||||
<div
|
||||
class="flex w-full flex-none flex-col gap-3 lg:w-72 lg:overflow-y-auto lg:overflow-x-hidden"
|
||||
>
|
||||
<!-- Equipment / Oath grid -->
|
||||
<Card>
|
||||
<CardContent class="space-y-2 p-3">
|
||||
<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'">
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<CardContent class="py-2">
|
||||
<Accordion type="multiple" :default-value="leftPanelOpenSections" class="w-full">
|
||||
<AccordionItem value="equipped">
|
||||
<AccordionTrigger>穿戴概览</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<div class="space-y-2 px-1">
|
||||
<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'">
|
||||
<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>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<!-- Character stats -->
|
||||
<Card v-if="resultState?.info?.length">
|
||||
<CardHeader class="pb-1 pt-3">
|
||||
<CardTitle class="text-xs text-muted-foreground">角色属性</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="pb-3">
|
||||
<div class="grid grid-cols-2 gap-x-3 gap-y-0.5 text-xs">
|
||||
<template v-for="info in resultState.info" :key="info.id">
|
||||
<div
|
||||
class="flex justify-between gap-1"
|
||||
:class="
|
||||
typeof info.value === 'string' && info.value.includes('/') ? 'col-span-2' : ''
|
||||
"
|
||||
>
|
||||
<span class="shrink-0 text-muted-foreground">{{ info.name }}</span>
|
||||
<span class="text-right font-medium text-emerald-600">{{ info.value }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<AccordionItem v-if="resultState?.info?.length" value="stats">
|
||||
<AccordionTrigger>角色属性</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<div class="grid grid-cols-2 gap-x-3 gap-y-0.5 px-1 text-xs">
|
||||
<template v-for="info in resultState.info" :key="info.id">
|
||||
<div
|
||||
class="flex justify-between gap-1"
|
||||
:class="
|
||||
typeof info.value === 'string' && info.value.includes('/')
|
||||
? 'col-span-2'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<span class="shrink-0 text-muted-foreground">{{ info.name }}</span>
|
||||
<span class="text-right font-medium text-emerald-600">{{ info.value }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<!-- Suit info + oath skills -->
|
||||
<Card v-if="suit || oathSuit">
|
||||
<CardContent class="space-y-1 px-3 py-2 text-xs">
|
||||
<div v-if="suit" class="flex items-center gap-1.5">
|
||||
<img
|
||||
:src="getImageURL(`/equipment${suit.imageUrl}`)"
|
||||
alt=""
|
||||
class="size-5 object-contain"
|
||||
/>
|
||||
<span :class="rarityColor(suit.rarity)" class="flex-1">{{ suit.name }} 套装</span>
|
||||
<span class="shrink-0 text-muted-foreground">{{ suit.rarity }}</span>
|
||||
<span class="shrink-0 font-medium">{{ suit.point }}点</span>
|
||||
</div>
|
||||
<div v-if="oathSuit" class="flex items-center gap-1.5">
|
||||
<img
|
||||
:src="getImageURL(`/equipment${oathSuit.imageUrl}`)"
|
||||
alt=""
|
||||
class="size-5 object-contain"
|
||||
/>
|
||||
<span :class="rarityColor(oathSuit.rarity)" class="flex-1"
|
||||
>{{ oathSuit.name }} 誓约</span
|
||||
>
|
||||
<span class="shrink-0 text-muted-foreground">{{ oathSuit.rarity }}</span>
|
||||
<span class="shrink-0 font-medium">{{ oathSuit.point }}点</span>
|
||||
</div>
|
||||
<!-- Oath skill selector -->
|
||||
<div v-if="oathSkillsSorted.length" class="flex items-center justify-center gap-4 pt-1">
|
||||
<button
|
||||
v-for="skill in oathSkillsSorted"
|
||||
:key="skill.id"
|
||||
type="button"
|
||||
:disabled="!skill.enable"
|
||||
class="rounded-full transition-opacity"
|
||||
:class="[
|
||||
skill.enable ? 'cursor-pointer opacity-100' : 'cursor-not-allowed opacity-40',
|
||||
skill.active ? 'ring-2 ring-amber-400 ring-offset-1' : '',
|
||||
]"
|
||||
@click="selectOathSkill(skill)"
|
||||
>
|
||||
<img
|
||||
:src="getImageURL(skill.imageUrl)"
|
||||
:alt="skill.name"
|
||||
class="size-8 rounded-full object-contain"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<AccordionItem v-if="suit || oathSuit" value="suit">
|
||||
<AccordionTrigger>套装与誓约</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<div class="space-y-1 px-1 text-xs">
|
||||
<div v-if="suit" class="flex items-center gap-1.5">
|
||||
<img
|
||||
:src="getImageURL(`/equipment${suit.imageUrl}`)"
|
||||
alt=""
|
||||
class="size-5 object-contain"
|
||||
/>
|
||||
<span :class="rarityColor(suit.rarity)" class="flex-1"
|
||||
>{{ suit.name }} 套装</span
|
||||
>
|
||||
<span class="shrink-0 text-muted-foreground">{{ suit.rarity }}</span>
|
||||
<span class="shrink-0 font-medium">{{ suit.point }}点</span>
|
||||
</div>
|
||||
<div v-if="oathSuit" class="flex items-center gap-1.5">
|
||||
<img
|
||||
:src="getImageURL(`/equipment${oathSuit.imageUrl}`)"
|
||||
alt=""
|
||||
class="size-5 object-contain"
|
||||
/>
|
||||
<span :class="rarityColor(oathSuit.rarity)" class="flex-1"
|
||||
>{{ oathSuit.name }} 誓约</span
|
||||
>
|
||||
<span class="shrink-0 text-muted-foreground">{{ oathSuit.rarity }}</span>
|
||||
<span class="shrink-0 font-medium">{{ oathSuit.point }}点</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="oathSkillsSorted.length"
|
||||
class="flex items-center justify-center gap-4 pt-1"
|
||||
>
|
||||
<button
|
||||
v-for="skill in oathSkillsSorted"
|
||||
:key="skill.id"
|
||||
type="button"
|
||||
:disabled="!skill.enable"
|
||||
class="rounded-full transition-opacity"
|
||||
:class="[
|
||||
skill.enable
|
||||
? 'cursor-pointer opacity-100'
|
||||
: 'cursor-not-allowed opacity-40',
|
||||
skill.active ? 'ring-2 ring-amber-400 ring-offset-1' : '',
|
||||
]"
|
||||
@click="selectOathSkill(skill)"
|
||||
>
|
||||
<img
|
||||
:src="getImageURL(skill.imageUrl)"
|
||||
:alt="skill.name"
|
||||
class="size-8 rounded-full object-contain"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<!-- Equipped items list -->
|
||||
<Card v-if="equippedParts.length">
|
||||
<CardHeader class="pb-1 pt-3">
|
||||
<CardTitle class="text-xs text-muted-foreground">穿戴装备信息</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="pb-2">
|
||||
<ScrollArea class="max-h-64">
|
||||
<div class="space-y-0.5 text-xs">
|
||||
<div
|
||||
v-for="part in equippedParts"
|
||||
:key="part"
|
||||
class="flex items-center gap-1.5 rounded px-1 py-0.5 hover:bg-muted/40"
|
||||
>
|
||||
<img
|
||||
:src="getImageURL(`/equipment/part/${part}.png`)"
|
||||
:alt="part"
|
||||
class="size-4 shrink-0 object-contain"
|
||||
/>
|
||||
<img
|
||||
v-if="adaptation(part) > 0"
|
||||
:src="getImageURL(`/equipment/adaptation/${adaptation(part)}.png`)"
|
||||
alt=""
|
||||
class="h-2.5 w-3 shrink-0 object-contain"
|
||||
/>
|
||||
<span
|
||||
v-if="(configStore.config.equips[part]?.reinforce ?? 0) > 0"
|
||||
class="shrink-0 font-medium"
|
||||
:class="
|
||||
configStore.config.equips[part]?.reinforceType === 1
|
||||
? 'text-[#ef28c1]'
|
||||
: 'text-[#68d5ed]'
|
||||
"
|
||||
>+{{ configStore.config.equips[part]?.reinforce }}</span
|
||||
>
|
||||
<span
|
||||
v-if="(configStore.config.equips[part]?.refine ?? 0) > 0"
|
||||
class="shrink-0 text-[#9879da]"
|
||||
>({{ configStore.config.equips[part]?.refine }})</span
|
||||
>
|
||||
<span
|
||||
class="truncate"
|
||||
:class="
|
||||
rarityColor(equById(configStore.config.equips[part]?.id ?? '')?.rarity ?? '')
|
||||
"
|
||||
>{{ equById(configStore.config.equips[part]?.id ?? "")?.name ?? "—" }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<template #scrollbar>
|
||||
<ScrollBar orientation="vertical" />
|
||||
</template>
|
||||
</ScrollArea>
|
||||
<AccordionItem v-if="equippedParts.length" value="equipped-list">
|
||||
<AccordionTrigger>穿戴装备信息</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<ScrollArea class="max-h-64 px-1">
|
||||
<div class="space-y-0.5 text-xs">
|
||||
<div
|
||||
v-for="part in equippedParts"
|
||||
:key="part"
|
||||
class="flex items-center gap-1.5 rounded px-1 py-0.5 hover:bg-muted/40"
|
||||
>
|
||||
<img
|
||||
:src="getImageURL(`/equipment/part/${part}.png`)"
|
||||
:alt="part"
|
||||
class="size-4 shrink-0 object-contain"
|
||||
/>
|
||||
<img
|
||||
v-if="adaptation(part) > 0"
|
||||
:src="getImageURL(`/equipment/adaptation/${adaptation(part)}.png`)"
|
||||
alt=""
|
||||
class="h-2.5 w-3 shrink-0 object-contain"
|
||||
/>
|
||||
<span
|
||||
v-if="(configStore.config.equips[part]?.reinforce ?? 0) > 0"
|
||||
class="shrink-0 font-medium"
|
||||
:class="
|
||||
configStore.config.equips[part]?.reinforceType === 1
|
||||
? 'text-[#ef28c1]'
|
||||
: 'text-[#68d5ed]'
|
||||
"
|
||||
>+{{ configStore.config.equips[part]?.reinforce }}</span
|
||||
>
|
||||
<span
|
||||
v-if="(configStore.config.equips[part]?.refine ?? 0) > 0"
|
||||
class="shrink-0 text-[#9879da]"
|
||||
>({{ configStore.config.equips[part]?.refine }})</span
|
||||
>
|
||||
<span
|
||||
class="truncate"
|
||||
:class="
|
||||
rarityColor(
|
||||
equById(configStore.config.equips[part]?.id ?? '')?.rarity ?? '',
|
||||
)
|
||||
"
|
||||
>{{ equById(configStore.config.equips[part]?.id ?? "")?.name ?? "—" }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<template #scrollbar>
|
||||
<ScrollBar orientation="vertical" />
|
||||
</template>
|
||||
</ScrollArea>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@@ -21,8 +21,6 @@ import {
|
||||
ColorSwatchPickerItemSwatch,
|
||||
ColorSwatchPickerRoot,
|
||||
} from "reka-ui";
|
||||
import EquList from "@/components/dnf/Equipment/List/index.vue";
|
||||
import OathList from "@/components/dnf/Equipment/Oath/index.vue";
|
||||
import EquipmentCell from "./components/EquipmentCell.vue";
|
||||
import { getImageURL } from "@/utils";
|
||||
import ResultPanel from "@/pages/Dcalc/Character/Result/Index.vue";
|
||||
|
||||
@@ -5,6 +5,12 @@ import { useConfigStore, useInfoStore } from "@/stores";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import ResultPanel from "@/pages/Dcalc/Character/Result/Index.vue";
|
||||
|
||||
const configStore = useConfigStore();
|
||||
@@ -369,7 +375,10 @@ const resetAllForge = () => {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div v-if="forgeViewTab === 'config'" class="inline-flex flex-wrap rounded-md border p-1">
|
||||
<div
|
||||
v-if="forgeViewTab === 'config'"
|
||||
class="hidden inline-flex flex-wrap rounded-md border p-1 sm:inline-flex"
|
||||
>
|
||||
<Button
|
||||
size="sm"
|
||||
:variant="moduleMode === 'equip' ? 'default' : 'ghost'"
|
||||
@@ -400,6 +409,39 @@ const resetAllForge = () => {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div v-if="forgeViewTab === 'config'" class="sm:hidden">
|
||||
<Accordion
|
||||
type="single"
|
||||
:default-value="moduleMode"
|
||||
class="w-full rounded-md border px-2"
|
||||
>
|
||||
<AccordionItem value="equip">
|
||||
<AccordionTrigger @click="moduleMode = 'equip'">装备打造</AccordionTrigger>
|
||||
<AccordionContent class="text-xs text-muted-foreground"
|
||||
>强化、锻造、品级等参数编辑。</AccordionContent
|
||||
>
|
||||
</AccordionItem>
|
||||
<AccordionItem value="oath">
|
||||
<AccordionTrigger @click="moduleMode = 'oath'">誓约</AccordionTrigger>
|
||||
<AccordionContent class="text-xs text-muted-foreground"
|
||||
>誓约槽位适配值编辑。</AccordionContent
|
||||
>
|
||||
</AccordionItem>
|
||||
<AccordionItem value="avatar">
|
||||
<AccordionTrigger @click="moduleMode = 'avatar'">时装徽章</AccordionTrigger>
|
||||
<AccordionContent class="text-xs text-muted-foreground"
|
||||
>时装、徽章、等级与条目配置。</AccordionContent
|
||||
>
|
||||
</AccordionItem>
|
||||
<AccordionItem value="global">
|
||||
<AccordionTrigger @click="moduleMode = 'global'">全局</AccordionTrigger>
|
||||
<AccordionContent class="text-xs text-muted-foreground"
|
||||
>系统奶与组队开关等全局参数。</AccordionContent
|
||||
>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button size="sm" variant="outline" @click="resetAllForge">快速重置打造</Button>
|
||||
<router-link to="/dcalc/dnfhelper">
|
||||
@@ -432,336 +474,350 @@ const resetAllForge = () => {
|
||||
v-if="forgeViewTab === 'config' && moduleMode === 'equip'"
|
||||
class="grid grid-cols-1 gap-4"
|
||||
>
|
||||
<Card class="border-border/60 bg-card/90">
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<Hammer class="size-4" />
|
||||
装备打造编辑器
|
||||
</CardTitle>
|
||||
<CardDescription>强化、锻造、品级编辑并即时回写配置。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-3">
|
||||
<div
|
||||
v-for="part in parts"
|
||||
:key="part"
|
||||
class="grid grid-cols-1 gap-2 rounded-md border p-3 text-sm md:grid-cols-[7rem_1fr_6rem_6rem_6rem_auto] md:items-center"
|
||||
>
|
||||
<div class="font-medium">{{ part }}</div>
|
||||
<div class="truncate text-muted-foreground">
|
||||
{{ equipNameById.get(equipCfg(part).id) || "未选择装备（可在装备页选择）" }}
|
||||
</div>
|
||||
<Input
|
||||
:model-value="String(equipCfg(part).reinforce)"
|
||||
type="number"
|
||||
min="0"
|
||||
class="h-8"
|
||||
placeholder="强化"
|
||||
@update:model-value="(value) => setNumberField(part, 'reinforce', String(value))"
|
||||
/>
|
||||
<Input
|
||||
:model-value="String(equipCfg(part).refine)"
|
||||
type="number"
|
||||
min="0"
|
||||
class="h-8"
|
||||
placeholder="锻造"
|
||||
@update:model-value="(value) => setNumberField(part, 'refine', String(value))"
|
||||
/>
|
||||
<Input
|
||||
:model-value="String(equipCfg(part).adaptation)"
|
||||
type="number"
|
||||
min="0"
|
||||
class="h-8"
|
||||
placeholder="品级"
|
||||
@update:model-value="(value) => setNumberField(part, 'adaptation', String(value))"
|
||||
/>
|
||||
<Button size="sm" variant="ghost" @click="resetEquipPart(part)">重置</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div v-if="forgeViewTab === 'config' && moduleMode === 'oath'" class="grid grid-cols-1 gap-4">
|
||||
<Card class="border-border/60 bg-card/90">
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<ShieldCheck class="size-4" />
|
||||
誓约子模块
|
||||
</CardTitle>
|
||||
<CardDescription>编辑誓约槽位适配值。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-3">
|
||||
<div
|
||||
v-for="part in oathParts"
|
||||
:key="part"
|
||||
class="grid grid-cols-1 gap-2 rounded-md border p-3 text-sm md:grid-cols-[6rem_1fr_7rem_auto] md:items-center"
|
||||
>
|
||||
<div class="font-medium">槽位 {{ part }}</div>
|
||||
<div class="truncate text-muted-foreground">
|
||||
{{ oathNameById.get(oathCfg(part).id) || "未选择誓约（可在装备页选择）" }}
|
||||
</div>
|
||||
<Input
|
||||
:model-value="String(oathCfg(part).adaptation)"
|
||||
type="number"
|
||||
min="0"
|
||||
class="h-8"
|
||||
placeholder="适配"
|
||||
@update:model-value="(value) => setOathAdaptation(part, String(value))"
|
||||
/>
|
||||
<Button size="sm" variant="ghost" @click="resetOathPart(part)">重置</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="forgeViewTab === 'config' && moduleMode === 'avatar'"
|
||||
class="grid grid-cols-1 gap-4 xl:grid-cols-2"
|
||||
>
|
||||
<Card class="border-border/60 bg-card/90">
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<Sparkles class="size-4" />
|
||||
时装编辑
|
||||
</CardTitle>
|
||||
<CardDescription>支持附魔、徽章项、品级和属性值编辑。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-3 text-sm">
|
||||
<div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
|
||||
<div class="text-muted-foreground">筛选</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Input v-model="avatarOptionKeyword" class="h-8" placeholder="搜索附魔/徽章可选项" />
|
||||
<label class="inline-flex items-center gap-1 text-xs whitespace-nowrap">
|
||||
<input v-model="onlyConfiguredAvatarParts" type="checkbox" class="size-3.5" />
|
||||
仅已配置部位
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
|
||||
<div class="text-muted-foreground">部位</div>
|
||||
<select
|
||||
class="h-8 rounded-md border border-input bg-background px-2"
|
||||
v-model="avatarPart"
|
||||
<Card class="border-border/60 bg-card/90">
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<Hammer class="size-4" />
|
||||
装备打造编辑器
|
||||
</CardTitle>
|
||||
<CardDescription>强化、锻造、品级编辑并即时回写配置。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-2 text-xs sm:space-y-3 sm:text-sm">
|
||||
<div
|
||||
v-for="part in parts"
|
||||
:key="part"
|
||||
class="grid grid-cols-1 gap-2 rounded-md border p-2 md:grid-cols-[7rem_1fr_6rem_6rem_6rem_auto] md:items-center md:p-3"
|
||||
>
|
||||
<option v-for="part in avatarParts" :key="part" :value="part">{{ part }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="font-medium">{{ part }}</div>
|
||||
<div class="truncate text-muted-foreground">
|
||||
{{ equipNameById.get(equipCfg(part).id) || "未选择装备（可在装备页选择）" }}
|
||||
</div>
|
||||
<Input
|
||||
:model-value="String(equipCfg(part).reinforce)"
|
||||
type="number"
|
||||
min="0"
|
||||
class="h-8 text-xs"
|
||||
placeholder="强化"
|
||||
@update:model-value="(value) => setNumberField(part, 'reinforce', String(value))"
|
||||
/>
|
||||
<Input
|
||||
:model-value="String(equipCfg(part).refine)"
|
||||
type="number"
|
||||
min="0"
|
||||
class="h-8 text-xs"
|
||||
placeholder="锻造"
|
||||
@update:model-value="(value) => setNumberField(part, 'refine', String(value))"
|
||||
/>
|
||||
<Input
|
||||
:model-value="String(equipCfg(part).adaptation)"
|
||||
type="number"
|
||||
min="0"
|
||||
class="h-8 text-xs"
|
||||
placeholder="品级"
|
||||
@update:model-value="(value) => setNumberField(part, 'adaptation', String(value))"
|
||||
/>
|
||||
<Button size="sm" variant="ghost" @click="resetEquipPart(part)">重置</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="hasAvatarEnchant"
|
||||
class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center"
|
||||
>
|
||||
<div class="text-muted-foreground">附魔</div>
|
||||
<select
|
||||
class="h-8 rounded-md border border-input bg-background px-2"
|
||||
:value="avatarCfg(avatarPart).enchant"
|
||||
@change="
|
||||
(event) => setAvatarField('enchant', (event.target as HTMLSelectElement).value)
|
||||
"
|
||||
<div v-if="forgeViewTab === 'config' && moduleMode === 'oath'" class="grid grid-cols-1 gap-4">
|
||||
<Card class="border-border/60 bg-card/90">
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<ShieldCheck class="size-4" />
|
||||
誓约子模块
|
||||
</CardTitle>
|
||||
<CardDescription>编辑誓约槽位适配值。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-2 text-xs sm:space-y-3 sm:text-sm">
|
||||
<div
|
||||
v-for="part in oathParts"
|
||||
:key="part"
|
||||
class="grid grid-cols-1 gap-2 rounded-md border p-2 md:grid-cols-[6rem_1fr_7rem_auto] md:items-center md:p-3"
|
||||
>
|
||||
<option value="">无</option>
|
||||
<option v-for="item in avatarEnchantOptions" :key="item.id" :value="String(item.id)">
|
||||
{{ item.detail }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="font-medium">槽位 {{ part }}</div>
|
||||
<div class="truncate text-muted-foreground">
|
||||
{{ oathNameById.get(oathCfg(part).id) || "未选择誓约（可在装备页选择）" }}
|
||||
</div>
|
||||
<Input
|
||||
:model-value="String(oathCfg(part).adaptation)"
|
||||
type="number"
|
||||
min="0"
|
||||
class="h-8 text-xs"
|
||||
placeholder="适配"
|
||||
@update:model-value="(value) => setOathAdaptation(part, String(value))"
|
||||
/>
|
||||
<Button size="sm" variant="ghost" @click="resetOathPart(part)">重置</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<div
|
||||
v-if="forgeViewTab === 'config' && moduleMode === 'avatar'"
|
||||
class="grid grid-cols-1 gap-4 xl:grid-cols-2"
|
||||
>
|
||||
<Card class="border-border/60 bg-card/90">
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<Sparkles class="size-4" />
|
||||
时装编辑
|
||||
</CardTitle>
|
||||
<CardDescription>支持附魔、徽章项、品级和属性值编辑。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-2 text-xs sm:space-y-3 sm:text-sm">
|
||||
<div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
|
||||
<div class="text-muted-foreground">品级</div>
|
||||
<div class="text-muted-foreground">筛选</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Input
|
||||
v-model="avatarOptionKeyword"
|
||||
class="h-8 text-xs"
|
||||
placeholder="搜索附魔/徽章可选项"
|
||||
/>
|
||||
<label class="inline-flex items-center gap-1 text-xs whitespace-nowrap">
|
||||
<input v-model="onlyConfiguredAvatarParts" type="checkbox" class="size-3.5" />
|
||||
仅已配置部位
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
|
||||
<div class="text-muted-foreground">部位</div>
|
||||
<select
|
||||
class="h-8 rounded-md border border-input bg-background px-2"
|
||||
:value="avatarCfg(avatarPart).id"
|
||||
@change="(event) => setAvatarField('id', (event.target as HTMLSelectElement).value)"
|
||||
v-model="avatarPart"
|
||||
>
|
||||
<option value="">未选择</option>
|
||||
<option v-for="item in avatarSuitOptions" :key="item.id" :value="String(item.id)">
|
||||
{{ item.suit || item.rarity || item.name }}
|
||||
</option>
|
||||
<option v-for="part in avatarParts" :key="part" :value="part">{{ part }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
|
||||
<div class="text-muted-foreground">属性</div>
|
||||
<div
|
||||
v-if="hasAvatarEnchant"
|
||||
class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center"
|
||||
>
|
||||
<div class="text-muted-foreground">附魔</div>
|
||||
<select
|
||||
class="h-8 rounded-md border border-input bg-background px-2"
|
||||
:value="avatarCfg(avatarPart).option"
|
||||
:value="avatarCfg(avatarPart).enchant"
|
||||
@change="
|
||||
(event) => setAvatarField('option', (event.target as HTMLSelectElement).value)
|
||||
(event) => setAvatarField('enchant', (event.target as HTMLSelectElement).value)
|
||||
"
|
||||
>
|
||||
<option value="0">无</option>
|
||||
<option value="">无</option>
|
||||
<option
|
||||
v-for="opt in avatarSuitOptions.find(
|
||||
(x) => String(x.id) === avatarCfg(avatarPart).id,
|
||||
)?.options || []"
|
||||
:key="opt"
|
||||
:value="opt"
|
||||
v-for="item in avatarEnchantOptions"
|
||||
:key="item.id"
|
||||
:value="String(item.id)"
|
||||
>
|
||||
{{ opt }}
|
||||
{{ item.detail }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
|
||||
<div class="text-muted-foreground">徽章一</div>
|
||||
<select
|
||||
class="h-8 rounded-md border border-input bg-background px-2"
|
||||
:value="avatarCfg(avatarPart).emblem_0"
|
||||
@change="
|
||||
(event) => setAvatarField('emblem_0', (event.target as HTMLSelectElement).value)
|
||||
"
|
||||
>
|
||||
<option value="">无</option>
|
||||
<option v-for="item in avatarEmblemOptions" :key="item.id" :value="String(item.id)">
|
||||
[{{ item.rarity }}] {{ item.value }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
|
||||
<div class="text-muted-foreground">徽章二</div>
|
||||
<select
|
||||
class="h-8 rounded-md border border-input bg-background px-2"
|
||||
:value="avatarCfg(avatarPart).emblem_1"
|
||||
@change="
|
||||
(event) => setAvatarField('emblem_1', (event.target as HTMLSelectElement).value)
|
||||
"
|
||||
>
|
||||
<option value="">无</option>
|
||||
<option v-for="item in avatarEmblemOptions" :key="item.id" :value="String(item.id)">
|
||||
[{{ item.rarity }}] {{ item.value }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<Button size="sm" variant="outline" @click="resetAvatarPart">重置当前部位</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-border/60 bg-card/90">
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<Sparkles class="size-4" />
|
||||
徽章编辑
|
||||
</CardTitle>
|
||||
<CardDescription>支持等级、徽章条目与槽位数量规则。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-3 text-sm">
|
||||
<div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
|
||||
<div class="text-muted-foreground">筛选</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Input v-model="emblemOptionKeyword" class="h-8" placeholder="搜索徽章可选项" />
|
||||
<label class="inline-flex items-center gap-1 text-xs whitespace-nowrap">
|
||||
<input v-model="onlyConfiguredEmblemSlots" type="checkbox" class="size-3.5" />
|
||||
仅已配置项
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
|
||||
<div class="text-muted-foreground">槽位类型</div>
|
||||
<select
|
||||
class="h-8 rounded-md border border-input bg-background px-2"
|
||||
v-model="emblemPart"
|
||||
>
|
||||
<option v-for="part in infoStore.emblemParts" :key="part" :value="part">
|
||||
{{ part }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="emblemPart !== '白金'"
|
||||
class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center"
|
||||
>
|
||||
<div class="text-muted-foreground">等级</div>
|
||||
<select
|
||||
class="h-8 rounded-md border border-input bg-background px-2"
|
||||
:value="String(emblemCfg.lv ?? 0)"
|
||||
@change="(event) => setEmblemLv((event.target as HTMLSelectElement).value)"
|
||||
>
|
||||
<option v-for="(label, index) in emblemLevels" :key="label" :value="String(index)">
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<div class="text-muted-foreground">徽章条目</div>
|
||||
<div class="grid grid-cols-1 gap-2 md:grid-cols-2">
|
||||
<div
|
||||
v-for="index in emblemMaxCount"
|
||||
:key="index"
|
||||
v-show="!onlyConfiguredEmblemSlots || !!(emblemCfg.items[index - 1] || '')"
|
||||
class="space-y-1"
|
||||
>
|
||||
<div class="text-xs text-muted-foreground">槽位 {{ index }}</div>
|
||||
<template v-else>
|
||||
<div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
|
||||
<div class="text-muted-foreground">品级</div>
|
||||
<select
|
||||
class="h-8 w-full rounded-md border border-input bg-background px-2"
|
||||
:value="emblemCfg.items[index - 1] || ''"
|
||||
class="h-8 rounded-md border border-input bg-background px-2"
|
||||
:value="avatarCfg(avatarPart).id"
|
||||
@change="
|
||||
(event) => setEmblemItem(index - 1, (event.target as HTMLSelectElement).value)
|
||||
(event) => setAvatarField('id', (event.target as HTMLSelectElement).value)
|
||||
"
|
||||
>
|
||||
<option value="">无</option>
|
||||
<option v-for="item in emblemOptions" :key="item.id" :value="String(item.id)">
|
||||
[{{ item.rarity }}] {{ item.value }}
|
||||
<option value="">未选择</option>
|
||||
<option v-for="item in avatarSuitOptions" :key="item.id" :value="String(item.id)">
|
||||
{{ item.suit || item.rarity || item.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
|
||||
<div class="text-muted-foreground">属性</div>
|
||||
<select
|
||||
class="h-8 rounded-md border border-input bg-background px-2"
|
||||
:value="avatarCfg(avatarPart).option"
|
||||
@change="
|
||||
(event) => setAvatarField('option', (event.target as HTMLSelectElement).value)
|
||||
"
|
||||
>
|
||||
<option value="0">无</option>
|
||||
<option
|
||||
v-for="opt in avatarSuitOptions.find(
|
||||
(x) => String(x.id) === avatarCfg(avatarPart).id,
|
||||
)?.options || []"
|
||||
:key="opt"
|
||||
:value="opt"
|
||||
>
|
||||
{{ opt }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
|
||||
<div class="text-muted-foreground">徽章一</div>
|
||||
<select
|
||||
class="h-8 rounded-md border border-input bg-background px-2"
|
||||
:value="avatarCfg(avatarPart).emblem_0"
|
||||
@change="
|
||||
(event) => setAvatarField('emblem_0', (event.target as HTMLSelectElement).value)
|
||||
"
|
||||
>
|
||||
<option value="">无</option>
|
||||
<option v-for="item in avatarEmblemOptions" :key="item.id" :value="String(item.id)">
|
||||
[{{ item.rarity }}] {{ item.value }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<Button size="sm" variant="outline" @click="resetEmblemPart">重置当前徽章槽</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
|
||||
<div class="text-muted-foreground">徽章二</div>
|
||||
<select
|
||||
class="h-8 rounded-md border border-input bg-background px-2"
|
||||
:value="avatarCfg(avatarPart).emblem_1"
|
||||
@change="
|
||||
(event) => setAvatarField('emblem_1', (event.target as HTMLSelectElement).value)
|
||||
"
|
||||
>
|
||||
<option value="">无</option>
|
||||
<option v-for="item in avatarEmblemOptions" :key="item.id" :value="String(item.id)">
|
||||
[{{ item.rarity }}] {{ item.value }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="forgeViewTab === 'config' && moduleMode === 'global'"
|
||||
class="grid grid-cols-1 gap-4 lg:grid-cols-2"
|
||||
>
|
||||
<Card class="border-border/60 bg-card/90">
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<ShieldCheck class="size-4" />
|
||||
计算开关
|
||||
</CardTitle>
|
||||
<CardDescription>从旧版 Character 页底部迁移的全局参数。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-2 text-sm text-muted-foreground">
|
||||
<label class="flex items-center justify-between rounded-md border p-2">
|
||||
<span>系统奶 DSB</span>
|
||||
<input v-model="configStore.config.DSB" type="checkbox" class="size-4" />
|
||||
</label>
|
||||
<label class="flex items-center justify-between rounded-md border p-2">
|
||||
<span>组队 BUFF</span>
|
||||
<input v-model="configStore.config.BUFF" type="checkbox" class="size-4" />
|
||||
</label>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div class="flex justify-end">
|
||||
<Button size="sm" variant="outline" @click="resetAvatarPart">重置当前部位</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-border/60 bg-card/90">
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<ShieldCheck class="size-4" />
|
||||
当前统计
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-2 text-sm text-muted-foreground">
|
||||
<div>已配置装备: {{ summary.equipCount }}</div>
|
||||
<div>誓约槽位: {{ summary.oathCount }}</div>
|
||||
<div>已配置时装: {{ summary.avatarCount }}</div>
|
||||
<div>已配置徽章条目: {{ summary.emblemCount }}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<Card class="border-border/60 bg-card/90">
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<Sparkles class="size-4" />
|
||||
徽章编辑
|
||||
</CardTitle>
|
||||
<CardDescription>支持等级、徽章条目与槽位数量规则。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-2 text-xs sm:space-y-3 sm:text-sm">
|
||||
<div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
|
||||
<div class="text-muted-foreground">筛选</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Input
|
||||
v-model="emblemOptionKeyword"
|
||||
class="h-8 text-xs"
|
||||
placeholder="搜索徽章可选项"
|
||||
/>
|
||||
<label class="inline-flex items-center gap-1 text-xs whitespace-nowrap">
|
||||
<input v-model="onlyConfiguredEmblemSlots" type="checkbox" class="size-3.5" />
|
||||
仅已配置项
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center">
|
||||
<div class="text-muted-foreground">槽位类型</div>
|
||||
<select
|
||||
class="h-8 rounded-md border border-input bg-background px-2"
|
||||
v-model="emblemPart"
|
||||
>
|
||||
<option v-for="part in infoStore.emblemParts" :key="part" :value="part">
|
||||
{{ part }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="emblemPart !== '白金'"
|
||||
class="grid grid-cols-1 gap-2 md:grid-cols-[7rem_1fr] md:items-center"
|
||||
>
|
||||
<div class="text-muted-foreground">等级</div>
|
||||
<select
|
||||
class="h-8 rounded-md border border-input bg-background px-2"
|
||||
:value="String(emblemCfg.lv ?? 0)"
|
||||
@change="(event) => setEmblemLv((event.target as HTMLSelectElement).value)"
|
||||
>
|
||||
<option v-for="(label, index) in emblemLevels" :key="label" :value="String(index)">
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<div class="text-muted-foreground">徽章条目</div>
|
||||
<div class="grid grid-cols-1 gap-2 md:grid-cols-2">
|
||||
<div
|
||||
v-for="index in emblemMaxCount"
|
||||
:key="index"
|
||||
v-show="!onlyConfiguredEmblemSlots || !!(emblemCfg.items[index - 1] || '')"
|
||||
class="space-y-1"
|
||||
>
|
||||
<div class="text-xs text-muted-foreground">槽位 {{ index }}</div>
|
||||
<select
|
||||
class="h-8 w-full rounded-md border border-input bg-background px-2"
|
||||
:value="emblemCfg.items[index - 1] || ''"
|
||||
@change="
|
||||
(event) => setEmblemItem(index - 1, (event.target as HTMLSelectElement).value)
|
||||
"
|
||||
>
|
||||
<option value="">无</option>
|
||||
<option v-for="item in emblemOptions" :key="item.id" :value="String(item.id)">
|
||||
[{{ item.rarity }}] {{ item.value }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<Button size="sm" variant="outline" @click="resetEmblemPart">重置当前徽章槽</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="forgeViewTab === 'config' && moduleMode === 'global'"
|
||||
class="grid grid-cols-1 gap-4 lg:grid-cols-2"
|
||||
>
|
||||
<Card class="border-border/60 bg-card/90">
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<ShieldCheck class="size-4" />
|
||||
计算开关
|
||||
</CardTitle>
|
||||
<CardDescription>从旧版 Character 页底部迁移的全局参数。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-2 text-sm text-muted-foreground">
|
||||
<label class="flex items-center justify-between rounded-md border p-2">
|
||||
<span>系统奶 DSB</span>
|
||||
<input v-model="configStore.config.DSB" type="checkbox" class="size-4" />
|
||||
</label>
|
||||
<label class="flex items-center justify-between rounded-md border p-2">
|
||||
<span>组队 BUFF</span>
|
||||
<input v-model="configStore.config.BUFF" type="checkbox" class="size-4" />
|
||||
</label>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-border/60 bg-card/90">
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-2">
|
||||
<ShieldCheck class="size-4" />
|
||||
当前统计
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-2 text-sm text-muted-foreground">
|
||||
<div>已配置装备: {{ summary.equipCount }}</div>
|
||||
<div>誓约槽位: {{ summary.oathCount }}</div>
|
||||
<div>已配置时装: {{ summary.avatarCount }}</div>
|
||||
<div>已配置徽章条目: {{ summary.emblemCount }}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { LoaderCircle, PanelRight, RefreshCcw } from "lucide-vue-next";
|
||||
import { PanelRight } from "lucide-vue-next";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
|
||||
import Tabs from "@/components/ui/tabs/Tabs.vue";
|
||||
import TabsList from "@/components/ui/tabs/TabsList.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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -3,13 +3,7 @@ import { computed, onMounted, ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { LoaderCircle, RefreshCcw } from "lucide-vue-next";
|
||||
import { Button } from "../../../../components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "../../../../components/ui/card";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "../../../../components/ui/card";
|
||||
import { useInfoStore } from "../../../../stores";
|
||||
const props = defineProps<{
|
||||
alter: string;
|
||||
|
||||
Reference in New Issue
Block a user