装备/誓约选择后乱序问题

frontend/src/components/dnf/Equipment/Icon/index.vue

@@ -1,6 +1,6 @@
 <template>
   <template v-if="props.equipment">
-    <div class="relative" :class="{ inactive: props.inactive }">
+    <div class="relative w-28px h-28px shrink-0" :class="{ inactive: props.inactive }">
       <div
         class="w-28px h-28px"
         :style="{
@@ -12,7 +12,7 @@
     </div>
   </template>
   <template v-else>
-    <div class="w-26px h-26px border-1px border-solid border-#7a7a7a/50"></div>
+    <div class="box-border w-28px h-28px shrink-0 border-1px border-solid border-#7a7a7a/50"></div>
   </template>
 </template>
 

frontend/src/pages/Character/EquipmentDictionary/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-340px bg-black flex flex-col">
+  <div class="w-340px min-w-340px shrink-0 bg-black flex flex-col">
     <calc-dialog lazy header="装备条件" v-model:visible="triggerVisible">
       <options />
     </calc-dialog>
@@ -61,8 +61,11 @@
       <template v-for="item in equs" :key="item.name">
         <template v-if="item.equs.length > 0">
           <div class="item-head w-full">{{ item.name }}</div>
-          <div class="flex flex-wrap gap-4px justify-around w-full">
+          <div class="grid grid-cols-10 gap-4px w-316px">
-            <template v-for="(equ, _) in item.equs" :key="_">
+            <template
+              v-for="(equ, index) in item.equs"
+              :key="equ ? `${equ.id}-${equ.oathPos ?? 'equ'}-${index}` : `empty-${index}`"
+            >
               <EquipmentIcon :inactive="!isActive(equ)" :equipment="equ" @click="chooseEqu(equ)" />
             </template>
           </div>