dev

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

@@ -34,8 +34,7 @@
         <div class="flex items-center">
           套装：
           <div class="flex items-center justify-center gap-2px">
-          <template v-for="(suit, _) in suitList" :key="_">
-
+            <template v-for="(suit, _) in suitList" :key="_">
               <img
                 class="w-auto h-15px"
                 :src="getImageURL('equipment' + suit.imageUrl)"
@@ -45,9 +44,8 @@
                 }"
                 @click="curSuit = suit.value"
               />
-
-          </template>
-        </div>
+            </template>
+          </div>
         </div>
       </div>
       <template v-for="item in equs" :key="item.name">
@@ -55,15 +53,64 @@
           <div class="item-head">{{ item.name }}</div>
           <div class="flex flex-wrap gap-4px content-start w-full">
             <template v-for="(equ, _) in item.equs" :key="_">
-              <EquipmentIcon :inactive="!isActive(equ)" :equipment="equ" @click="chooseEqu(equ)"/>
+              <EquipmentIcon :inactive="!isActive(equ)" :equipment="equ" @click="chooseEqu(equ)" />
             </template>
           </div>
         </template>
       </template>
     </div>
-
-    <!-- 筛选条件 -->
-    <!-- 装备列表 -->
+  </div>
+  <div class="px-5px flex flex-col">
+    <div
+      class="flex flex-col overflow-hidden bg-black"
+      v-if="curEquInfo"
+    >
+      <div class="item-head">基础信息</div>
+      <div class="flex-1 overflow-y-auto overflow-x-hidden bg-black w-240px">
+        <Info v-if="curEquInfo" :equipment="curEquInfo" />
+      </div>
+    </div>
+    <div class="flex flex-col flex-1 overflow-hidden bg-black" v-if="curSuitInfo">
+      <div class="item-head">套装信息</div>
+      <div class="flex bg-#191918 items-center justify-center gap-2px p-5px">
+        <calc-button
+          :disabled="raritiyList.findIndex((rarity) => rarity === curSuitLv.rarity) <= 0"
+          icon="min-little"
+          @click="changeSuitLv('preRarity')"
+        ></calc-button>
+        <calc-button
+          icon="reduce-little"
+          :disabled="
+            raritiyList.findIndex((rarity) => rarity === curSuitLv.rarity) <= 0 && curSuitLv.lv <= 1
+          "
+          @click="changeSuitLv('preLv')"
+        ></calc-button>
+        <div class="flex px-20px gap-x-10px" :class="rarityClass(curSuitLv.rarity)">
+          <span>{{ curSuitLv.rarity }}</span>
+          <span>{{ formatLv(curSuitLv.lv, curSuitLv.rarity) }}</span>
+        </div>
+        <calc-button
+          :disabled="
+            raritiyList.findIndex((rarity) => rarity === curSuitLv.rarity) >= raritiyList.length - 1
+          "
+          @click="changeSuitLv('nextLv')"
+          icon="increase-little"
+        ></calc-button>
+        <calc-button
+          :disabled="
+            raritiyList.findIndex((rarity) => rarity === curSuitLv.rarity) >= raritiyList.length - 1
+          "
+          @click="changeSuitLv('nextRarity')"
+          icon="max-little"
+        ></calc-button>
+      </div>
+      <div
+        class="w-80% m-auto h-1px bg-gradient-to-r from-[rgba(52,43,27,0.05)] via-[rgba(52,43,27,1)] to-[rgba(52,43,27,0.05)]"
+      ></div>
+      <div class="flex-1 overflow-y-auto overflow-x-hidden bg-black w-240px">
+        <SuitInfo v-if="curSuitInfo" :suit="curSuitInfo" />
+      </div>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -71,27 +118,97 @@ import { useConfigStore, useInfoStore } from '@/stores'
 import PartSelect from '@/components/dnf/Equipment/PartSelect/index.vue'
 import EquipmentRaritySelect from '@/components/dnf/Equipment/RaritySelect/index.vue'
 import { getImageURL } from '@/utils/images'
+import { rarityClass } from '@/utils'
 import type { IEquipment } from '@/api/info/type'
 import EquipmentIcon from '@/components/dnf/Equipment/Icon/index.vue'
+import Info from '@/components/dnf/Equipment/Info/index.vue'
+import SuitInfo from '@/components/dnf/Equipment/SuitInfo/index.vue'
+import { formatEqu, formatStone } from './formatData'
 
 const infoStore = useInfoStore()
 const type = ref('equ')
 const curRarity = ref('')
 const curSuit = ref(16203)
+const curEquId = ref()
+const curSuitLv = ref({
+  rarity: '史诗',
+  lv: 1,
+})
+
+const raritiyList = ['稀有', '神器', '传说', '史诗', '太初']
+
+const formatLv = (number: number, raritiy?: string) => {
+  if (raritiy == '太初') return ''
+  const greekNumerals = ['Ι', 'ΙΙ', 'ΙΙΙ', 'ΙV', 'V', 'VΙ', 'VΙΙ', 'VΙΙΙ', 'ΙX', 'X']
+  return greekNumerals[number - 1] || number.toString()
+}
+
+const changeSuitLv = (
+  type: 'preRarity' | 'nextRarity' | 'preLv' | 'nextLv',
+  resetLv: boolean = true,
+) => {
+  if (type == 'preRarity') {
+    const index = raritiyList.findIndex((a) => a == curSuitLv.value.rarity)
+    if (index > 0) {
+      curSuitLv.value.rarity = raritiyList[index - 1]
+      curSuitLv.value.lv = resetLv ? 1 : 5
+      return
+    }
+  } else if (type == 'nextRarity') {
+    const index = raritiyList.findIndex((a) => a == curSuitLv.value.rarity)
+    if (index < raritiyList.length - 1) {
+      curSuitLv.value.rarity = raritiyList[index + 1]
+      curSuitLv.value.lv = 1
+      return
+    }
+  } else if (type == 'preLv') {
+    if (curSuitLv.value.lv > 1) {
+      curSuitLv.value.lv--
+      return
+    } else {
+      changeSuitLv('preRarity', false)
+    }
+  } else if (type == 'nextLv') {
+    if (curSuitLv.value.lv < 5) {
+      curSuitLv.value.lv++
+      return
+    } else {
+      changeSuitLv('nextRarity')
+    }
+  }
+}
 
 const choose_part = ref<string[]>([])
 
+const curEquInfo = computed(() => {
+  if (type.value == 'equ') {
+    return infoStore.equips.find((a) => a.id == curEquId.value)
+  } else {
+    return infoStore.stones.find((a) => a.id == curEquId.value)
+  }
+})
+
+const curSuitInfo = computed(() => {
+  if (curEquInfo.value?.suit.length != 1) {
+    return undefined
+  }
+  return infoStore.suits.find(
+    (a) =>
+      a.suitId.toString() == curEquInfo.value?.suit[0] &&
+      a.rarity == curSuitLv.value.rarity &&
+      a.level == curSuitLv.value.lv,
+  )
+})
+
 const chooseCategory = (cat: string) => {
   type.value = cat
-  if(type.value == 'stone' && curSuit.value == -1){
+  if (type.value == 'stone' && curSuit.value == -1) {
     curSuit.value = 16203
   }
 }
 
 const configStore = useConfigStore()
 
-const rowCount = 10
-
 const suitList = computed(() => {
   const uniqueSuits = new Map<number, { name: string; value: number; imageUrl: string }>()
   infoStore.suits.forEach((a) => {
@@ -104,7 +221,7 @@ const suitList = computed(() => {
     }
   })
   const res = Array.from(uniqueSuits.values())
-  if(type.value == 'equ') res.push({ name: '通宝', value: -1, imageUrl: '/suit/icon/-1.png' })
+  if (type.value == 'equ') res.push({ name: '通宝', value: -1, imageUrl: '/suit/icon/-1.png' })
   return res
 })
 
@@ -121,265 +238,43 @@ const equs = computed(() => {
         (a.suit.includes(curSuit.value.toString()) && a.suit.length === 1)),
   )
 
-  if(type.value == 'equ'){
-    return formatEqu(total)
-  }else{
-    return formatStone(total)
+  if (type.value == 'equ') {
+    return formatEqu(
+      total,
+      infoStore.infos?.subweapons,
+      suitList.value.find((a) => a.value == curSuit.value)?.name,
+    )
+  } else {
+    return formatStone(total, suitList.value.find((a) => a.value == curSuit.value)?.name)
   }
-
-
 })
 
-const formatEqu = (total: IEquipment[])=>{
-  // 武器
-  const item_weapon = total.filter((a) => a.itemType == '武器') ?? []
-  const weapons: (IEquipment | undefined)[] = []
-  if (item_weapon.length > 0) {
-    Array.from(new Set(item_weapon.map((item) => item.rarity))).forEach((rarity) => {
-      const weapon = item_weapon
-        .filter((item) => item.rarity === rarity)
-        .sort((a, b) => {
-          if (a.categorize == b.categorize) {
-            return a.itemDetailType.localeCompare(b.itemDetailType)
-          }
-          return b.categorize.localeCompare(a.categorize)
-        })
-      weapons.push(...weapon)
-      const remind = weapons.length % rowCount
-      remind > 0 && weapons.push(...Array(rowCount - remind).fill(undefined))
-    })
-  }
-
-  // # region 副武器
-  const subWeapons: (IEquipment | undefined)[] = []
-  const item_sub_weapon = (
-    total.filter((a) => infoStore.infos?.subweapons?.includes(a.itemDetailType)) ?? []
-  ).sort((a, b) => {
-    if (a.categorize == b.categorize) {
-      return a.itemDetailType.localeCompare(b.itemDetailType)
-    }
-    return b.categorize.localeCompare(a.categorize)
-  })
-  if (item_sub_weapon.length > 0) {
-    subWeapons.push(
-      ...item_sub_weapon.map(a => ({ ...a, itemType: '副武器' })),
-      ...Array(rowCount - (item_sub_weapon.length % rowCount)).fill(undefined),
-    )
-  }
-  // # endregion
-
-  // 秘宝
-  const item_treasure = total.filter((equip) => equip.categorize.includes('秘宝'))
-  const treasures: (IEquipment | undefined)[] = []
-  if (item_treasure.length > 0) {
-    treasures.push(
-      ...item_treasure,
-      ...Array(rowCount - (item_treasure.length % rowCount)).fill(undefined),
-    )
-  }
-  // 套装
-  const item_suits = total.filter(
-    (equip) => equip.categorize.includes('套装') || equip.categorize.includes('通宝'),
-  )
-  const suits: (IEquipment | undefined)[] = []
-  const raritiyList = Array.from(new Set(item_suits.map((item) => item.rarity)))
-  raritiyList.forEach((rarity) => {
-    const armor = item_suits.filter((item) => item.rarity === rarity && item.itemType === '防具')
-    if (armor.length > 0) {
-      suits.push(...armor, undefined)
-    }
-
-    const special = item_suits.filter(
-      (item) => item.rarity === rarity && item.itemType === '特殊装备',
-    )
-    if (special.length > 0) {
-      suits.push(...special)
-      if (suits.length % rowCount > 0) {
-        suits.push(...Array(rowCount - (suits.length % rowCount)).fill(undefined))
-      }
-    }
-
-    const jewelry = item_suits.filter((item) => item.rarity === rarity && item.itemType === '首饰')
-    const jewelryNormal = jewelry.filter((a) => !a.name.includes('黑牙')) ?? []
-    const jewelryHY = jewelry.filter((a) => a.name.includes('黑牙')) ?? []
-    if (jewelry.length > 0) {
-      suits.push(
-        ...Array(3 - jewelryHY.length + 2).fill(undefined),
-        ...jewelryHY,
-        undefined,
-        ...jewelryNormal,
-      )
-      suits.push(...Array(rowCount - (suits.length % rowCount)).fill(undefined))
-    }
-    if(suits.length % rowCount > 0) {
-      suits.push(...Array(rowCount - (suits.length % rowCount)).fill(undefined))
-    }
-  })
-  // 称号
-  const item_title = total.filter((equip) => equip.itemDetailType == '称号')
-  const title: (IEquipment | undefined)[] = []
-  if (item_title.length > 0) {
-    title.push(...item_title, ...Array(rowCount - (item_title.length % rowCount)).fill(undefined))
-  }
-  // 宠物
-  const item_pets = total.filter((equip) => equip.itemDetailType == '宠物')
-  const pet: (IEquipment | undefined)[] = []
-  if (item_pets.length > 0) {
-    pet.push(...item_pets, ...Array(rowCount - (item_pets.length % rowCount)).fill(undefined))
-  }
-
-  // 称号
-  return [
-    {
-      name: '武器',
-      equs: weapons,
-    },
-    {
-      name: '副武器',
-      equs: subWeapons,
-    },
-    {
-      name: '秘宝',
-      equs: treasures,
-    },
-    {
-      name: `${suitList.value.find(a=>a.value == curSuit.value)?.name} 套装`,
-      equs: suits,
-    },
-    {
-      name: '称号',
-      equs: title,
-    },
-    {
-      name: '宠物',
-      equs: pet,
-    },
-  ]
-}
-
-const formatStone = (total:IEquipment[])=>{
-  // 套装
-  const item_suits = total.filter(
-    (equip) => equip.suit.length == 1,
-  )
-  const suits: (IEquipment | undefined)[] = []
-  const raritiyList = Array.from(new Set(item_suits.map((item) => item.rarity)))
-  raritiyList.forEach((rarity) => {
-    const armor = item_suits.filter((item) => item.rarity === rarity && item.itemType === '防具')
-    if (armor.length > 0) {
-      suits.push(...armor, undefined)
-    }
-
-    const special = item_suits.filter(
-      (item) => item.rarity === rarity && item.itemType === '特殊装备',
-    )
-    if (special.length > 0) {
-      suits.push(...special)
-      if (suits.length % rowCount > 0) {
-        suits.push(...Array(rowCount - (suits.length % rowCount)).fill(undefined))
-      }
-    }
-
-    const jewelry = item_suits.filter((item) => item.rarity === rarity && item.itemType === '首饰')
-    const jewelryNormal = jewelry.filter((a) => !a.name.includes('黑牙')) ?? []
-    const jewelryHY = jewelry.filter((a) => a.name.includes('黑牙')) ?? []
-    if (jewelry.length > 0) {
-      suits.push(
-        ...Array(3 - jewelryHY.length + 2).fill(undefined),
-        ...jewelryHY,
-        undefined,
-        ...jewelryNormal,
-      )
-      suits.push(...Array(rowCount - (suits.length % rowCount)).fill(undefined))
-    }
-    if(suits.length % rowCount > 0) {
-      suits.push(...Array(rowCount - (suits.length % rowCount)).fill(undefined))
-    }
-  })
-
-
-  const item_suits_wns = total.filter(
-    (equip) => equip.categorize.includes('维纳斯通宝'),
-  )
-  const wns : (IEquipment | undefined)[] = []
-  const categorizeList = Array.from(new Set(item_suits_wns.map((item) => item.categorize)))
-  categorizeList.forEach((categorize)=>{
-    ['神器','史诗'].forEach(raritiy=>{
-      const temp = item_suits_wns.filter((item) => item.categorize === categorize && item.rarity === raritiy)
-      const remind = temp.length % (rowCount/2)
-      wns.push(...temp, ...Array(temp.length == 0 ? rowCount/2-remind : remind).fill(undefined))
-    })
-  })
-
-  const item_suits_nbe = total.filter(
-    (equip) => equip.categorize.includes('纳波尔通宝'),
-  )
-  const nbes : (IEquipment | undefined)[] = []
-  const nbeList = Array.from(new Set(item_suits_nbe.map((item) => item.categorize)))
-  nbeList.forEach((categorize)=>{
-    ['神器','史诗'].forEach(raritiy=>{
-      const temp = item_suits_nbe.filter((item) => item.categorize === categorize && item.rarity === raritiy)
-      const remind = temp.length % (rowCount/2)
-      nbes.push(...temp, ...Array(temp.length == 0 ? rowCount/2-remind : remind-1).fill(undefined))
-    })
-  })
-
-
-  const items_suits_rzs = total.filter(
-    (equip) => equip.categorize.includes('人造神'),
-  )
-  const rzs : (IEquipment | undefined)[] = []
-  const partList = Array.from(new Set(items_suits_rzs.map((item) => item.itemDetailType)))
-  // const raritiy = Array.from(new Set(items_suits_rzs.map((item) => item.rarity)))
-  partList.forEach((part) => {
-    raritiyList.forEach((rarity) => {
-      const temp = items_suits_rzs.filter((item) => item.itemDetailType === part && item.rarity === rarity)
-      temp.length > 0 && rzs.push(...temp, ...Array(rowCount-temp.length).fill(undefined))
-    })
-    // const temp = items_suits_rzs.filter((item) => item.itemDetailType === part)
-    // const remind = temp.length % rowCount
-    // rzs.push(...temp, ...Array(temp.length == 0 ? rowCount-remind : remind).fill(undefined))
-  })
-  return [{
-    name: `${suitList.value.find(a=>a.value == curSuit.value)?.name} 套装`,
-    equs: suits,
-  },{
-    name: '维纳斯通宝',
-    equs: wns,
-  },{
-    name: '纳波尔通宝',
-    equs: nbes,
-  },{
-    name: '人造神',
-    equs: rzs,
-  }
-]
-}
-
 const isActive = computed(() => {
   return (item?: IEquipment) => {
-    if(!item) return false
-    if(type.value == 'equ'){
-      if(item.itemType.includes('武器')){
+    if (!item) return false
+    if (type.value == 'equ') {
+      if (item.itemType.includes('武器')) {
         return configStore.config.equips[item.itemType].id == item.id
-      }
-      else{
+      } else {
         return configStore.config.equips[item.itemDetailType].id == item.id
       }
-    }else{
+    } else {
       return configStore.config.equips[item.itemDetailType].fusion == item.id
     }
   }
 })
 
 const chooseEqu = (item?: IEquipment) => {
-  if (!item) return;
-  const target = type.value === 'equ'
-    ? configStore.config.equips[item.itemType.includes('武器') ? item.itemType : item.itemDetailType]
-    : configStore.config.equips[item.itemDetailType];
-  target[type.value === 'equ' ? 'id' : 'fusion'] = isActive.value(item) ? '' : item.id;
-};
-
+  if (!item) return
+  curEquId.value = item.id
+  const target =
+    type.value === 'equ'
+      ? configStore.config.equips[
+          item.itemType.includes('武器') ? item.itemType : item.itemDetailType
+        ]
+      : configStore.config.equips[item.itemDetailType]
+  target[type.value === 'equ' ? 'id' : 'fusion'] = isActive.value(item) ? '' : item.id
+}
 </script>
 
 <style lang="scss" scoped>
@@ -403,7 +298,7 @@ const chooseEqu = (item?: IEquipment) => {
     position: absolute;
     background: url('@/assets/img/active.png') no-repeat;
     width: 148px;
-    height:16px;
+    height: 16px;
     bottom: 2px;
     transform: translate(0, 50%);
   }

frontend/src/pages/Character/EquipmentDictionary/formatData.ts

@@ -0,0 +1,233 @@
+import type { IEquipment } from "@/api/info/type"
+
+export const rowCount = 10
+
+export const formatEqu = (total: IEquipment[],subweapons?:string[],curSuit
+  ?:string) => {
+  // 武器
+  const item_weapon = total.filter((a) => a.itemType == '武器') ?? []
+  const weapons: (IEquipment | undefined)[] = []
+  if (item_weapon.length > 0) {
+    Array.from(new Set(item_weapon.map((item) => item.rarity))).forEach((rarity) => {
+      const weapon = item_weapon
+        .filter((item) => item.rarity === rarity)
+        .sort((a, b) => {
+          if (a.categorize == b.categorize) {
+            return a.itemDetailType.localeCompare(b.itemDetailType)
+          }
+          return b.categorize.localeCompare(a.categorize)
+        })
+      weapons.push(...weapon)
+      const remind = weapons.length % rowCount
+      remind > 0 && weapons.push(...Array(rowCount - remind).fill(undefined))
+    })
+  }
+
+  // # region 副武器
+  const subWeapons: (IEquipment | undefined)[] = []
+  const item_sub_weapon = (
+    total.filter((a) => subweapons?.includes(a.itemDetailType)) ?? []
+  ).sort((a, b) => {
+    if (a.categorize == b.categorize) {
+      return a.itemDetailType.localeCompare(b.itemDetailType)
+    }
+    return b.categorize.localeCompare(a.categorize)
+  })
+  if (item_sub_weapon.length > 0) {
+    subWeapons.push(
+      ...item_sub_weapon.map((a) => ({ ...a, itemType: '副武器' })),
+      ...Array(rowCount - (item_sub_weapon.length % rowCount)).fill(undefined),
+    )
+  }
+  // # endregion
+
+  // 秘宝
+  const item_treasure = total.filter((equip) => equip.categorize.includes('秘宝'))
+  const treasures: (IEquipment | undefined)[] = []
+  if (item_treasure.length > 0) {
+    treasures.push(
+      ...item_treasure,
+      ...Array(rowCount - (item_treasure.length % rowCount)).fill(undefined),
+    )
+  }
+  // 套装
+  const item_suits = total.filter(
+    (equip) => equip.categorize.includes('套装') || equip.categorize.includes('通宝'),
+  )
+  const suits: (IEquipment | undefined)[] = []
+  const raritiyList = Array.from(new Set(item_suits.map((item) => item.rarity)))
+  raritiyList.forEach((rarity) => {
+    const armor = item_suits.filter((item) => item.rarity === rarity && item.itemType === '防具')
+    if (armor.length > 0) {
+      suits.push(...armor, undefined)
+    }
+
+    const special = item_suits.filter(
+      (item) => item.rarity === rarity && item.itemType === '特殊装备',
+    )
+    if (special.length > 0) {
+      suits.push(...special)
+      if (suits.length % rowCount > 0) {
+        suits.push(...Array(rowCount - (suits.length % rowCount)).fill(undefined))
+      }
+    }
+
+    const jewelry = item_suits.filter((item) => item.rarity === rarity && item.itemType === '首饰')
+    const jewelryNormal = jewelry.filter((a) => !a.name.includes('黑牙')) ?? []
+    const jewelryHY = jewelry.filter((a) => a.name.includes('黑牙')) ?? []
+    if (jewelry.length > 0) {
+      suits.push(
+        ...Array(3 - jewelryHY.length + 2).fill(undefined),
+        ...jewelryHY,
+        undefined,
+        ...jewelryNormal,
+      )
+      suits.push(...Array(rowCount - (suits.length % rowCount)).fill(undefined))
+    }
+    if (suits.length % rowCount > 0) {
+      suits.push(...Array(rowCount - (suits.length % rowCount)).fill(undefined))
+    }
+  })
+  // 称号
+  const item_title = total.filter((equip) => equip.itemDetailType == '称号')
+  const title: (IEquipment | undefined)[] = []
+  if (item_title.length > 0) {
+    title.push(...item_title, ...Array(rowCount - (item_title.length % rowCount)).fill(undefined))
+  }
+  // 宠物
+  const item_pets = total.filter((equip) => equip.itemDetailType == '宠物')
+  const pet: (IEquipment | undefined)[] = []
+  if (item_pets.length > 0) {
+    pet.push(...item_pets, ...Array(rowCount - (item_pets.length % rowCount)).fill(undefined))
+  }
+
+  // 称号
+  return [
+    {
+      name: '武器',
+      equs: weapons,
+    },
+    {
+      name: '副武器',
+      equs: subWeapons,
+    },
+    {
+      name: '秘宝',
+      equs: treasures,
+    },
+    {
+      name: `${curSuit} 套装`,
+      equs: suits,
+    },
+    {
+      name: '称号',
+      equs: title,
+    },
+    {
+      name: '宠物',
+      equs: pet,
+    },
+  ]
+}
+
+export const formatStone = (total: IEquipment[],curSuit?:string) => {
+  // 套装
+  const item_suits = total.filter((equip) => equip.suit.length == 1)
+  const suits: (IEquipment | undefined)[] = []
+  const raritiyList = Array.from(new Set(item_suits.map((item) => item.rarity)))
+  raritiyList.forEach((rarity) => {
+    const armor = item_suits.filter((item) => item.rarity === rarity && item.itemType === '防具')
+    if (armor.length > 0) {
+      suits.push(...armor, undefined)
+    }
+
+    const special = item_suits.filter(
+      (item) => item.rarity === rarity && item.itemType === '特殊装备',
+    )
+    if (special.length > 0) {
+      suits.push(...special)
+      if (suits.length % rowCount > 0) {
+        suits.push(...Array(rowCount - (suits.length % rowCount)).fill(undefined))
+      }
+    }
+
+    const jewelry = item_suits.filter((item) => item.rarity === rarity && item.itemType === '首饰')
+    const jewelryNormal = jewelry.filter((a) => !a.name.includes('黑牙')) ?? []
+    const jewelryHY = jewelry.filter((a) => a.name.includes('黑牙')) ?? []
+    if (jewelry.length > 0) {
+      suits.push(
+        ...Array(3 - jewelryHY.length + 2).fill(undefined),
+        ...jewelryHY,
+        undefined,
+        ...jewelryNormal,
+      )
+      suits.push(...Array(rowCount - (suits.length % rowCount)).fill(undefined))
+    }
+    if (suits.length % rowCount > 0) {
+      suits.push(...Array(rowCount - (suits.length % rowCount)).fill(undefined))
+    }
+  })
+
+  const item_suits_wns = total.filter((equip) => equip.categorize.includes('维纳斯通宝'))
+  const wns: (IEquipment | undefined)[] = []
+  const categorizeList = Array.from(new Set(item_suits_wns.map((item) => item.categorize)))
+  categorizeList.forEach((categorize) => {
+    ;['神器', '史诗'].forEach((raritiy) => {
+      const temp = item_suits_wns.filter(
+        (item) => item.categorize === categorize && item.rarity === raritiy,
+      )
+      const remind = temp.length % (rowCount / 2)
+      wns.push(...temp, ...Array(temp.length == 0 ? rowCount / 2 - remind : remind).fill(undefined))
+    })
+  })
+
+  const item_suits_nbe = total.filter((equip) => equip.categorize.includes('纳波尔通宝'))
+  const nbes: (IEquipment | undefined)[] = []
+  const nbeList = Array.from(new Set(item_suits_nbe.map((item) => item.categorize)))
+  nbeList.forEach((categorize) => {
+    ;['神器', '史诗'].forEach((raritiy) => {
+      const temp = item_suits_nbe.filter(
+        (item) => item.categorize === categorize && item.rarity === raritiy,
+      )
+      const remind = temp.length % (rowCount / 2)
+      nbes.push(
+        ...temp,
+        ...Array(temp.length == 0 ? rowCount / 2 - remind : remind - 1).fill(undefined),
+      )
+    })
+  })
+
+  const items_suits_rzs = total.filter((equip) => equip.categorize.includes('人造神'))
+  const rzs: (IEquipment | undefined)[] = []
+  const partList = Array.from(new Set(items_suits_rzs.map((item) => item.itemDetailType)))
+  // const raritiy = Array.from(new Set(items_suits_rzs.map((item) => item.rarity)))
+  partList.forEach((part) => {
+    raritiyList.forEach((rarity) => {
+      const temp = items_suits_rzs.filter(
+        (item) => item.itemDetailType === part && item.rarity === rarity,
+      )
+      temp.length > 0 && rzs.push(...temp, ...Array(rowCount - temp.length).fill(undefined))
+    })
+    // const temp = items_suits_rzs.filter((item) => item.itemDetailType === part)
+    // const remind = temp.length % rowCount
+    // rzs.push(...temp, ...Array(temp.length == 0 ? rowCount-remind : remind).fill(undefined))
+  })
+  return [
+    {
+      name: `${curSuit} 套装`,
+      equs: suits,
+    },
+    {
+      name: '维纳斯通宝',
+      equs: wns,
+    },
+    {
+      name: '纳波尔通宝',
+      equs: nbes,
+    },
+    {
+      name: '人造神',
+      equs: rzs,
+    },
+  ]
+}

frontend/src/pages/Character/Skill/components/SkillTree/index.tsx

@@ -1,6 +1,7 @@
 import { getImageURL, getLocalImageURL } from '@/utils/images'
 import type { ISkill } from '@/api/info/type'
 import { useVModel } from '@vueuse/core'
+import CalcButton from '@/components/calc/button/index.vue'
 import './style.scss'
 
 export default defineComponent({
@@ -16,7 +17,7 @@ export default defineComponent({
     },
     bindAwake: {
       type: Number,
-      default: ()=>50,
+      default: () => 50,
     },
   },
   setup(props) {
@@ -83,9 +84,9 @@ export default defineComponent({
       }
     }
 
-    const chooseBindAwake = (lv:number) => {
-        bindAwake.value = lv
-        console.log(bindAwake.value,lv)
+    const chooseBindAwake = (lv: number) => {
+      bindAwake.value = lv
+      console.log(bindAwake.value, lv)
     }
 
     const renderSkill = (skill: ISkill, index: number) => {
@@ -98,7 +99,10 @@ export default defineComponent({
           <div class="relative w-35px h-55px">
             {activeSkill.value == skill.id && renderSkillAction(skill)}
             <div
-              class={["w-36px absolute h-48px flex flex-col box-border items-center py-3px z-2",skill.learnLv == 100 ? '' : 'skill']}
+              class={[
+                'w-36px absolute h-48px flex flex-col box-border items-center py-3px z-2',
+                skill.learnLv == 100 ? '' : 'skill',
+              ]}
               onClick={(e) => {
                 e.stopPropagation()
                 chooseSkill(skill)
@@ -120,20 +124,32 @@ export default defineComponent({
             </div>
             {skill.learnLv == 100 && (
               <>
-                <div class={`pos-absolute w-196px h-54px box-border translate-x--50% left-18px top--3px flex justify-between items-center py-2px px-3px awake_${bindAwake.value}`}>
-                  <div class="w-36px flex flex-col box-border items-center py-2px z-2" onClick={()=>chooseBindAwake(50)}>
+                <div
+                  class={`pos-absolute w-196px h-54px box-border translate-x--50% left-18px top--3px flex justify-between items-center py-2px px-3px awake_${bindAwake.value}`}
+                >
+                  <div
+                    class="w-36px flex flex-col box-border items-center py-2px z-2"
+                    onClick={() => chooseBindAwake(50)}
+                  >
                     <img
                       class="h-28px w-28px mt-2px"
                       src={getImageURL(awakeSkill_1.value?.icon ?? '')}
                     ></img>
-                    <div class="w-100% mt-1px flex items-center justify-center text-#ffc701">1次</div>
+                    <div class="w-100% mt-1px flex items-center justify-center text-#ffc701">
+                      1次
+                    </div>
                   </div>
-                  <div class="w-36px flex flex-col box-border items-center py-2px z-2" onClick={()=>chooseBindAwake(85)}>
+                  <div
+                    class="w-36px flex flex-col box-border items-center py-2px z-2"
+                    onClick={() => chooseBindAwake(85)}
+                  >
                     <img
                       class="h-28px w-28px mt-1px"
                       src={getImageURL(awakeSkill_2.value?.icon ?? '')}
                     ></img>
-                    <div class="w-100% mt-1px flex items-center justify-center text-#ffc701">2次</div>
+                    <div class="w-100% mt-1px flex items-center justify-center text-#ffc701">
+                      2次
+                    </div>
                   </div>
                 </div>
               </>
@@ -147,8 +163,39 @@ export default defineComponent({
       <>
         <>
           <div class="absolute skill-active w-88px h-78px translate-x--50% left-16px top--1px">
-              <div class="flex justify-between px-5px relative top-55px">
-                <img
+            <div class="flex justify-between items-center px-5px relative top-54px">
+              <CalcButton
+                icon="min"
+                disabled={lvInfo.value[skill.id.toString()]?.lv == 0}
+                onClick={(e: Event) => {
+                  e.stopPropagation()
+                  actionSkillLv(skill, 'subMax')
+                }}
+              ></CalcButton>
+              <CalcButton
+                icon="reduce"
+                disabled={lvInfo.value[skill.id.toString()]?.lv == 0}
+                onClick={(e: Event) => {
+                  e.stopPropagation()
+                  actionSkillLv(skill, 'sub')
+                }}
+              ></CalcButton>
+              <CalcButton
+                icon="increase"
+                onClick={(e: Event) => {
+                  e.stopPropagation()
+                  actionSkillLv(skill, 'add')
+                }}
+              ></CalcButton>
+              <CalcButton
+                icon="max"
+                disabled={lvInfo.value[skill.id.toString()]?.lv >= skill.maxLearnLv}
+                onClick={(e: Event) => {
+                  e.stopPropagation()
+                  actionSkillLv(skill, 'addMax')
+                }}
+              ></CalcButton>
+              {/* <img
                   src={`${new URL('./img/min.svg', import.meta.url).href}`}
                   onClick={(e: Event) => {
                     e.stopPropagation()
@@ -175,8 +222,8 @@ export default defineComponent({
                     e.stopPropagation()
                     actionSkillLv(skill, 'addMax')
                   }}
-                ></img>
-              </div>
+                ></img> */}
+            </div>
           </div>
         </>
       </>