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

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">
-            <template v-for="(equ, _) in item.equs" :key="_">
+          <div class="grid grid-cols-10 gap-4px w-316px">
+            <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>