This commit is contained in:
2026-06-05 15:57:07 +08:00
parent fb3e952e6a
commit 90fda4394a
12 changed files with 485 additions and 178 deletions
@@ -21,6 +21,13 @@ import {
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import Tabs from "@/components/ui/tabs/Tabs.vue";
import TabsList from "@/components/ui/tabs/TabsList.vue";
import TabsTrigger from "@/components/ui/tabs/TabsTrigger.vue";
@@ -916,22 +923,23 @@ const setTriggerOption = (id: number, value: string) => {
class="grid gap-1 text-sm"
>
<span class="text-muted-foreground">{{ option.name }}</span>
<select
class="h-9 rounded-md border border-input bg-background px-2"
:value="String(configStore.config.options[option.id.toString()] ?? 0)"
@change="
(event) =>
setTriggerOption(option.id, (event.target as HTMLSelectElement).value)
"
<Select
:model-value="String(configStore.config.options[option.id.toString()] ?? 0)"
@update:model-value="(value) => setTriggerOption(option.id, String(value))"
>
<option
v-for="(item, index) in option.options"
:key="`${option.id}-${index}`"
:value="String(index)"
>
{{ item }}
</option>
</select>
<SelectTrigger class="h-9">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem
v-for="(item, index) in option.options"
:key="`${option.id}-${index}`"
:value="String(index)"
>
{{ item }}
</SelectItem>
</SelectContent>
</Select>
</label>
</div>
</SheetContent>
@@ -5,6 +5,13 @@ 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 {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Accordion,
AccordionContent,
@@ -697,21 +704,20 @@ const resetAllForge = () => {
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-4">
<label v-if="canUpgradeEquip(part)" class="space-y-1">
<span class="text-muted-foreground">强化类型</span>
<select
class="h-8 w-full rounded-md border border-input bg-background px-2"
:value="String(equipCfg(part).reinforceType)"
@change="
(event) =>
setEquipNumberField(
part,
'reinforceType',
(event.target as HTMLSelectElement).value,
)
<Select
:model-value="String(equipCfg(part).reinforceType)"
@update:model-value="
(value) => setEquipNumberField(part, 'reinforceType', String(value))
"
>
<option value="0">强化</option>
<option value="1">增幅</option>
</select>
<SelectTrigger class="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="0">强化</SelectItem>
<SelectItem value="1">增幅</SelectItem>
</SelectContent>
</Select>
</label>
<label v-if="canUpgradeEquip(part)" class="space-y-1">
@@ -758,22 +764,24 @@ const resetAllForge = () => {
<label v-if="equipEnchantOptions(part).length" class="space-y-1 sm:col-span-2">
<span class="text-muted-foreground">附魔</span>
<select
class="h-8 w-full min-w-0 rounded-md border border-input bg-background px-2"
:value="equipCfg(part).enchant"
@change="
(event) => setEquipEnchant(part, (event.target as HTMLSelectElement).value)
"
<Select
:model-value="equipCfg(part).enchant"
@update:model-value="(value) => setEquipEnchant(part, String(value))"
>
<option value="">无</option>
<option
v-for="item in equipEnchantOptions(part)"
:key="item.id"
:value="String(item.id)"
>
{{ item.detail }}
</option>
</select>
<SelectTrigger class="h-8 min-w-0 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="">无</SelectItem>
<SelectItem
v-for="item in equipEnchantOptions(part)"
:key="item.id"
:value="String(item.id)"
>
{{ item.detail }}
</SelectItem>
</SelectContent>
</Select>
</label>
<label v-if="canSetSecret(part)" class="space-y-1">
@@ -864,12 +872,16 @@ const resetAllForge = () => {
<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"
>
<option v-for="part in avatarParts" :key="part" :value="part">{{ part }}</option>
</select>
<Select v-model="avatarPart">
<SelectTrigger class="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem v-for="part in avatarParts" :key="part" :value="part">
{{ part }}
</SelectItem>
</SelectContent>
</Select>
</div>
<div
@@ -877,94 +889,116 @@ const resetAllForge = () => {
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)
"
<Select
:model-value="avatarCfg(avatarPart).enchant"
@update:model-value="(value) => setAvatarField('enchant', String(value))"
>
<option value="">无</option>
<option
v-for="item in avatarEnchantOptions"
:key="item.id"
:value="String(item.id)"
>
{{ item.detail }}
</option>
</select>
<SelectTrigger class="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="">无</SelectItem>
<SelectItem
v-for="item in avatarEnchantOptions"
:key="item.id"
:value="String(item.id)"
>
{{ item.detail }}
</SelectItem>
</SelectContent>
</Select>
</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 rounded-md border border-input bg-background px-2"
:value="avatarCfg(avatarPart).id"
@change="
(event) => setAvatarField('id', (event.target as HTMLSelectElement).value)
"
<Select
:model-value="avatarCfg(avatarPart).id"
@update:model-value="(value) => setAvatarField('id', String(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>
<SelectTrigger class="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="">未选择</SelectItem>
<SelectItem
v-for="item in avatarSuitOptions"
:key="item.id"
:value="String(item.id)"
>
{{ item.suit || item.rarity || item.name }}
</SelectItem>
</SelectContent>
</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)
"
<Select
:model-value="avatarCfg(avatarPart).option"
@update:model-value="(value) => setAvatarField('option', String(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>
<SelectTrigger class="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="0">无</SelectItem>
<SelectItem
v-for="opt in avatarSuitOptions.find(
(x) => String(x.id) === avatarCfg(avatarPart).id,
)?.options || []"
:key="opt"
:value="opt"
>
{{ opt }}
</SelectItem>
</SelectContent>
</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)
"
<Select
:model-value="avatarCfg(avatarPart).emblem_0"
@update:model-value="(value) => setAvatarField('emblem_0', String(value))"
>
<option value="">无</option>
<option v-for="item in avatarEmblemOptions" :key="item.id" :value="String(item.id)">
[{{ item.rarity }}] {{ item.value }}
</option>
</select>
<SelectTrigger class="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="">无</SelectItem>
<SelectItem
v-for="item in avatarEmblemOptions"
:key="item.id"
:value="String(item.id)"
>
[{{ item.rarity }}] {{ item.value }}
</SelectItem>
</SelectContent>
</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)
"
<Select
:model-value="avatarCfg(avatarPart).emblem_1"
@update:model-value="(value) => setAvatarField('emblem_1', String(value))"
>
<option value="">无</option>
<option v-for="item in avatarEmblemOptions" :key="item.id" :value="String(item.id)">
[{{ item.rarity }}] {{ item.value }}
</option>
</select>
<SelectTrigger class="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="">无</SelectItem>
<SelectItem
v-for="item in avatarEmblemOptions"
:key="item.id"
:value="String(item.id)"
>
[{{ item.rarity }}] {{ item.value }}
</SelectItem>
</SelectContent>
</Select>
</div>
<div class="flex justify-end">
@@ -999,14 +1033,16 @@ const resetAllForge = () => {
<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>
<Select v-model="emblemPart">
<SelectTrigger class="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem v-for="part in infoStore.emblemParts" :key="part" :value="part">
{{ part }}
</SelectItem>
</SelectContent>
</Select>
</div>
<div
@@ -1014,15 +1050,23 @@ const resetAllForge = () => {
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)"
<Select
:model-value="String(emblemCfg.lv ?? 0)"
@update:model-value="(value) => setEmblemLv(String(value))"
>
<option v-for="(label, index) in emblemLevels" :key="label" :value="String(index)">
{{ label }}
</option>
</select>
<SelectTrigger class="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem
v-for="(label, index) in emblemLevels"
:key="label"
:value="String(index)"
>
{{ label }}
</SelectItem>
</SelectContent>
</Select>
</div>
<div class="space-y-2">
@@ -1035,18 +1079,24 @@ const resetAllForge = () => {
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)
"
<Select
:model-value="emblemCfg.items[index - 1] || ''"
@update:model-value="(value) => setEmblemItem(index - 1, String(value))"
>
<option value="">无</option>
<option v-for="item in emblemOptions" :key="item.id" :value="String(item.id)">
[{{ item.rarity }}] {{ item.value }}
</option>
</select>
<SelectTrigger class="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="">无</SelectItem>
<SelectItem
v-for="item in emblemOptions"
:key="item.id"
:value="String(item.id)"
>
[{{ item.rarity }}] {{ item.value }}
</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</div>
@@ -1077,31 +1127,43 @@ const resetAllForge = () => {
class="grid grid-cols-1 gap-2 rounded-md border p-2 md:grid-cols-[6rem_1fr_12rem] md:items-center md:p-3"
>
<div class="font-medium">槽位 {{ Number(key) + 1 }}</div>
<select
class="h-8 min-w-0 rounded-md border border-input bg-background px-2"
:value="String(ensureJade(key).id)"
@change="(event) => setJadeId(key, (event.target as HTMLSelectElement).value)"
<Select
:model-value="String(ensureJade(key).id)"
@update:model-value="(value) => setJadeId(key, String(value))"
>
<option value="-1">无</option>
<option v-for="item in infoStore.jades" :key="item.id" :value="String(item.id)">
{{ item.name }}
</option>
</select>
<select
class="h-8 min-w-0 rounded-md border border-input bg-background px-2"
:value="String(ensureJade(key).value)"
<SelectTrigger class="h-8 min-w-0 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="-1">无</SelectItem>
<SelectItem
v-for="item in infoStore.jades"
:key="item.id"
:value="String(item.id)"
>
{{ item.name }}
</SelectItem>
</SelectContent>
</Select>
<Select
:model-value="String(ensureJade(key).value)"
:disabled="ensureJade(key).id < 0"
@change="(event) => setJadeValue(key, (event.target as HTMLSelectElement).value)"
@update:model-value="(value) => setJadeValue(key, String(value))"
>
<option value="0">无</option>
<option
v-for="item in jadeValueOptions(ensureJade(key).id)"
:key="item.id"
:value="String(item.id)"
>
{{ item.value }}
</option>
</select>
<SelectTrigger class="h-8 min-w-0 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="0">无</SelectItem>
<SelectItem
v-for="item in jadeValueOptions(ensureJade(key).id)"
:key="item.id"
:value="String(item.id)"
>
{{ item.value }}
</SelectItem>
</SelectContent>
</Select>
</div>
<div class="flex justify-end">
@@ -1131,21 +1193,23 @@ const resetAllForge = () => {
class="grid grid-cols-1 gap-2 rounded-md border p-2 sm:grid-cols-[6rem_1fr] sm:items-center sm:p-3"
>
<div class="font-medium">{{ field.label }}</div>
<select
class="h-8 min-w-0 rounded-md border border-input bg-background px-2"
:value="sundryValue(field.key, field.defaultValue)"
@change="
(event) => setSundryValue(field.key, (event.target as HTMLSelectElement).value)
"
<Select
:model-value="sundryValue(field.key, field.defaultValue)"
@update:model-value="(value) => setSundryValue(field.key, String(value))"
>
<option
v-for="item in sundryOptions(field.key)"
:key="`${field.key}-${item.value}`"
:value="String(item.value)"
>
{{ item.name }}
</option>
</select>
<SelectTrigger class="h-8 min-w-0 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem
v-for="item in sundryOptions(field.key)"
:key="`${field.key}-${item.value}`"
:value="String(item.value)"
>
{{ item.name }}
</SelectItem>
</SelectContent>
</Select>
</div>
</div>