1

2026-06-02 20:56:07 +08:00
parent f824177aa5
commit bb3ad71d21
38 changed files with 1304 additions and 532 deletions
@@ -6,12 +6,21 @@ import {
  ChevronRight,
  ChevronsLeft,
  ChevronsRight,
+  Settings2,
  Sparkles,
 } from "lucide-vue-next";
 import { useConfigStore, useInfoStore } from "@/stores";
 import type { IEquipment, ISuit } from "@/api/info/type";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
 import Tabs from "@/components/ui/tabs/Tabs.vue";
 import TabsList from "@/components/ui/tabs/TabsList.vue";
 import TabsTrigger from "@/components/ui/tabs/TabsTrigger.vue";
@@ -54,7 +63,8 @@ const suitId = ref("");
 const oathSuitId = ref("");
 const suitRarity = ref<string>("");
 const oathSuitRarity = ref<string>("");
-const sidePanelTab = ref<SidePanelTab>("detail");
+const sidePanelTab = ref<SidePanelTab>("equipped");
+const triggerOptionsOpen = ref(false);
 const equippedPart = ref("");
 const equippedOathPart = ref("0");
 const previewEquipKey = ref("");
@@ -75,7 +85,8 @@ const panelLayoutVars = computed(() => ({

 const iconWrapStyle = computed(() => ({
  ...panelLayoutVars.value,
-  width: "var(--equip-grid-width)",
+  maxWidth: "var(--equip-grid-width)",
+  width: "100%",
 }));

 const isOathEquipment = (equip?: IEquipment) =>
@@ -805,25 +816,29 @@ const toggleOathRarity = (value: unknown) => {
  const next = normalizeRarityValue(value);
  oathSuitRarity.value = !next || oathSuitRarity.value === next ? "" : next;
 };
+
+const setTriggerOption = (id: number, value: string) => {
+  configStore.config.options[id.toString()] = Number.parseInt(value, 10);
+};
 </script>

 <template>
  <div
-    class="grid min-h-full min-w-0 gap-4 pb-6 md:h-full md:pb-0 md:grid-cols-[minmax(0,1fr)_320px]"
+    class="grid min-h-full min-w-0 gap-4 pb-6 lg:h-full lg:pb-0 lg:grid-cols-[minmax(0,1fr)_300px] xl:grid-cols-[minmax(0,1fr)_320px]"
  >
    <div
-      class="min-h-0 min-w-0 grid items-stretch gap-4 md:h-full [grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))]"
+      class="min-h-0 min-w-0 grid items-stretch gap-4 lg:h-full [grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))]"
      :style="panelLayoutVars"
    >
-      <div class="min-h-0 min-w-0 md:h-full">
+      <div class="min-h-0 min-w-0 lg:h-full">
        <Card
-          class="w-full md:flex md:h-full md:flex-col md:overflow-hidden"
+          class="w-full lg:flex lg:h-full lg:flex-col lg:overflow-hidden"
          :style="panelLayoutVars"
        >
          <!-- <CardHeader class="pb-3">
            <CardTitle>武器/称号/宠物/秘宝</CardTitle>
          </CardHeader> -->
-          <CardContent class="space-y-4 md:min-h-0 md:flex-1 md:overflow-y-auto">
+          <CardContent class="space-y-4 overflow-x-hidden lg:min-h-0 lg:flex-1 lg:overflow-y-auto">
            <Tabs v-model="weaponTab" class="gap-0" size="sm">
              <TabsList>
                <TabsTrigger value="weapon">武器</TabsTrigger>
@@ -832,7 +847,7 @@ const toggleOathRarity = (value: unknown) => {
              </TabsList>
            </Tabs>

-            <div class="overflow-x-auto">
+            <div class="overflow-x-hidden">
              <div class="mx-auto flex flex-wrap content-start gap-1" :style="iconWrapStyle">
                <template v-if="weaponTab === 'weapon'">
                  <EquipmentCell
@@ -878,6 +893,50 @@ const toggleOathRarity = (value: unknown) => {
                </TabsList>
              </Tabs>

+              <Sheet v-model:open="triggerOptionsOpen">
+                <SheetTrigger as-child>
+                  <Button
+                    v-if="infoStore.options.length"
+                    size="icon-sm"
+                    variant="outline"
+                    title="装备触发条件"
+                  >
+                    <Settings2 class="size-4" />
+                  </Button>
+                </SheetTrigger>
+                <SheetContent class="w-full overflow-y-auto sm:max-w-md">
+                  <SheetHeader>
+                    <SheetTitle>装备触发条件</SheetTitle>
+                    <SheetDescription>配置会立即写回当前角色计算条件。</SheetDescription>
+                  </SheetHeader>
+                  <div class="grid gap-3 px-4">
+                    <label
+                      v-for="option in infoStore.options"
+                      :key="option.id"
+                      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)
+                        "
+                      >
+                        <option
+                          v-for="(item, index) in option.options"
+                          :key="`${option.id}-${index}`"
+                          :value="String(index)"
+                        >
+                          {{ item }}
+                        </option>
+                      </select>
+                    </label>
+                  </div>
+                </SheetContent>
+              </Sheet>
+
              <ColorSwatchPickerRoot
                v-if="equipTab === 'suit'"
                class="ml-auto flex items-center gap-2"
@@ -908,7 +967,7 @@ const toggleOathRarity = (value: unknown) => {

            <template v-if="equipTab === 'suit'">
              <div
-                class="mx-auto flex w-max max-w-full flex-nowrap overflow-x-auto pb-1"
+                class="mx-auto flex flex-wrap content-start gap-1 overflow-x-hidden pb-1"
                :style="iconWrapStyle"
              >
                <button
@@ -941,7 +1000,7 @@ const toggleOathRarity = (value: unknown) => {
                </button>
              </div>

-              <div class="overflow-x-auto">
+              <div class="overflow-x-hidden">
                <div class="mx-auto flex flex-wrap content-start gap-1" :style="iconWrapStyle">
                  <EquipmentCell
                    v-for="(equip, index) in suitGrid"
@@ -966,7 +1025,7 @@ const toggleOathRarity = (value: unknown) => {
              >
                {{ section.title }}
              </div> -->
-                <div class="overflow-x-auto">
+                <div class="overflow-x-hidden">
                  <div class="mx-auto flex flex-wrap content-start gap-1" :style="iconWrapStyle">
                    <EquipmentCell
                      v-for="(equip, index) in section.items"
@@ -991,21 +1050,21 @@ const toggleOathRarity = (value: unknown) => {
        </Card>
      </div>

-      <div class="min-h-0 min-w-0 md:h-full">
+      <div class="min-h-0 min-w-0 lg:h-full">
        <Card
-          class="w-full md:flex md:h-full md:flex-col md:overflow-hidden"
+          class="w-full lg:flex lg:h-full lg:flex-col lg:overflow-hidden"
          :style="panelLayoutVars"
        >
          <!-- <CardHeader>
            <CardTitle>誓约</CardTitle>
          </CardHeader> -->
-          <CardContent class="space-y-4 md:min-h-0 md:flex-1 md:overflow-y-auto">
+          <CardContent class="space-y-4 overflow-x-hidden lg:min-h-0 lg:flex-1 lg:overflow-y-auto">
            <div class="flex items-center gap-2">
              <Tabs v-model="oathTab" class="gap-0">
                <TabsList>
                  <TabsTrigger value="suit">誓约</TabsTrigger>
-                  <!-- <TabsTrigger value="universal">通宝</TabsTrigger>
-                  <TabsTrigger value="other">其他</TabsTrigger> -->
+                  <TabsTrigger value="universal">通宝</TabsTrigger>
+                  <TabsTrigger value="other">其他</TabsTrigger>
                </TabsList>
              </Tabs>

@@ -1039,7 +1098,7 @@ const toggleOathRarity = (value: unknown) => {

            <template v-if="oathTab === 'suit'">
              <div
-                class="mx-auto flex w-max max-w-full flex-nowrap overflow-x-auto pb-1"
+                class="mx-auto flex flex-wrap content-start gap-1 overflow-x-hidden pb-1"
                :style="iconWrapStyle"
              >
                <button
@@ -1084,7 +1143,7 @@ const toggleOathRarity = (value: unknown) => {
                >
                  {{ section.title }}
                </div> -->
-                  <div class="overflow-x-auto">
+                  <div class="overflow-x-hidden">
                    <div class="mx-auto flex flex-wrap content-start gap-1" :style="iconWrapStyle">
                      <EquipmentCell
                        v-for="(equip, index) in section.items"
@@ -1109,7 +1168,7 @@ const toggleOathRarity = (value: unknown) => {
            </template>

            <template v-else-if="oathTab === 'universal'">
-              <div class="overflow-x-auto">
+              <div class="overflow-x-hidden">
                <div class="mx-auto flex flex-wrap content-start gap-1" :style="iconWrapStyle">
                  <EquipmentCell
                    v-for="(equip, index) in oathUniversalGrid"
@@ -1123,10 +1182,16 @@ const toggleOathRarity = (value: unknown) => {
                  />
                </div>
              </div>
+              <div
+                v-if="!oathUniversalGrid.some(Boolean)"
+                class="py-6 text-center text-xs text-muted-foreground"
+              >
+                当前暂无誓约通宝数据
+              </div>
            </template>

            <template v-else>
-              <div class="overflow-x-auto">
+              <div class="overflow-x-hidden">
                <div class="mx-auto flex flex-wrap content-start gap-1" :style="iconWrapStyle">
                  <EquipmentCell
                    v-for="(equip, index) in oathOtherGrid"
@@ -1140,14 +1205,20 @@ const toggleOathRarity = (value: unknown) => {
                  />
                </div>
              </div>
+              <div
+                v-if="!oathOtherGrid.some(Boolean)"
+                class="py-6 text-center text-xs text-muted-foreground"
+              >
+                当前暂无其它誓约数据
+              </div>
            </template>
          </CardContent>
        </Card>
      </div>
    </div>

-    <div class="min-h-0 space-y-4 md:h-full md:self-stretch">
-      <Card class="md:flex md:h-full md:flex-col md:overflow-hidden">
+    <div class="min-h-0 space-y-4 lg:h-full lg:self-stretch">
+      <Card class="lg:flex lg:h-full lg:flex-col lg:overflow-hidden">
        <CardHeader>
          <CardTitle class="text-base">
            <Tabs v-model="sidePanelTab" class="gap-0">