dev

frontend/src/pages/Character/Equipment/components/Stone.vue

@@ -3,35 +3,39 @@
 <template>
   <div>
     <div class="flex flex-col gap-10px pb-10px">
-    <!-- 套装选择tab -->
-    <div class="flex flex-wrap w-100%">
-      <template v-for="(suit, _) in suits" :key="_">
-        <div class="flex items-center justify-center">
-          <img
-            class="w-35px h-35px object-contain"
-            :src="getImageURL('equipment' + suit.imageUrl)"
-            :alt="suit.name"
-            :style="{ filter: curSuit === suit.value ? '' : 'grayscale(100%)' }"
-            @click="curSuit = suit.value"
-            @dblclick="handleDoubleClick"
+      <!-- 套装选择tab -->
+      <div class="flex flex-wrap w-100%">
+        <template v-for="(suit, _) in suits" :key="_">
+          <div class="flex items-center justify-center">
+            <img
+              class="w-35px h-35px object-contain"
+              :src="getImageURL('equipment' + suit.imageUrl)"
+              :alt="suit.name"
+              :style="{ filter: curSuit === suit.value ? '' : 'grayscale(100%)' }"
+              @click="curSuit = suit.value"
+              @dblclick="handleDoubleClick"
+            />
+          </div>
+        </template>
+      </div>
+      <EquipmentRaritySelect v-model="curRarity" />
+    </div>
+
+    <div class="flex flex-wrap gap-4px content-start" :style="{ width: `${rowCount * 32}px` }">
+      <template v-for="(equip, _) in suitEquipments" :key="_">
+        <template v-if="equip?.rarity == curRarity || !curRarity">
+          <EquipmentIcon
+            :equipment="equip"
+            :inactive="configStore.config.equips[equip?.itemDetailType ?? '']?.fusion != equip?.id"
+            @click="configStore.chooseEqu(equip, true)"
           />
-        </div>
+        </template>
+
+        <template v-else>
+          <EquipmentIcon />
+        </template>
       </template>
     </div>
-    <EquipmentRaritySelect v-model="curRarity" />
-    </div>
-
-    <div class="flex flex-wrap gap-4px content-start" :style="{width: `${rowCount * 32}px`}">
-    <template v-for="(equip,_) in suitEquipments" :key="_">
-      <template v-if="equip?.rarity == curRarity || !curRarity">
-        <EquipmentIcon :equipment="equip" :inactive="configStore.config.equips[equip?.itemDetailType ?? '']?.fusion != equip?.id" @click="configStore.chooseEqu(equip,true)"/>
-      </template>
-
-      <template v-else>
-        <EquipmentIcon/>
-      </template>
-    </template>
-  </div>
   </div>
 </template>
 
@@ -48,7 +52,7 @@ const curSuit = ref(16201)
 const curRarity = ref()
 
 const props = defineProps<{
-  rowCount?:number
+  rowCount?: number
 }>()
 
 const rowCount = Math.max(props.rowCount ?? 0, 14)
@@ -64,30 +68,30 @@ const suits = computed(() => {
 })
 
 const suitEquipments = computed(() => {
-  const equs =  infoStore.stones.filter((a) => a.suit.includes(curSuit.value.toString()) && a.suit.length === 1 )
+  const equs = infoStore.stones.filter(
+    (a) => a.suit.includes(curSuit.value.toString()) && a.suit.length === 1,
+  )
 
   const res: (IEquipment | undefined)[] = []
-  const raritiyList = ['神器','传说','史诗']
+  const raritiyList = ['神器', '传说', '史诗']
 
   raritiyList.forEach((rarity) => {
-    const equ : (IEquipment | undefined)[]  = equs.filter((a) => a.rarity === rarity)
-    equ.splice(5,0,undefined)
-    equ.splice(9,0,undefined)
-    res.push(
-      ...equ,
-      ...Array(Math.max(0,rowCount - equ.length)).fill(undefined),
-    )
+    const equ: (IEquipment | undefined)[] = equs.filter((a) => a.rarity === rarity)
+    equ.splice(5, 0, undefined)
+    equ.splice(9, 0, undefined)
+    res.push(...equ, ...Array(Math.max(0, rowCount - equ.length)).fill(undefined))
   })
   return res
 })
 
-
 const handleDoubleClick = () => {
-  if(!curRarity.value) return
-  if(curRarity.value == '太初') return
-  suitEquipments.value.filter(a=>!!a && a.rarity == curRarity.value).splice(0,11).forEach((a) => {
-    configStore.chooseEqu(a,true)
-  })
+  if (!curRarity.value) return
+  if (curRarity.value == '太初') return
+  suitEquipments.value
+    .filter((a) => !!a && a.rarity == curRarity.value)
+    .splice(0, 11)
+    .forEach((a) => {
+      configStore.chooseEqu(a, true)
+    })
 }
-
 </script>