diff --git a/backend/dataFiles/dcalc_0.db b/backend/dataFiles/dcalc_0.db
index c94a5e9f..c8aceaec 100644
Binary files a/backend/dataFiles/dcalc_0.db and b/backend/dataFiles/dcalc_0.db differ
diff --git a/frontend/src/api/info/type.ts b/frontend/src/api/info/type.ts
index 87e8353e..d06eae18 100644
--- a/frontend/src/api/info/type.ts
+++ b/frontend/src/api/info/type.ts
@@ -56,6 +56,18 @@ export interface IEquipment {
   suit: string[]
   rarity: string
   max_adaptation:number
+  STR:number[]
+  INT:number[]
+  Vitality:number[]
+  Spirit:number[]
+  AtkP:number[]
+  AtkM:number[]
+  AtkI:number[]
+  SkillAttack:number[]
+  Attack:number[]
+  Buffer:number[]
+  detail: string
+  bufferDetail:string
 }
 
 export interface ISkill {
@@ -75,6 +87,12 @@ export interface ISuit {
   imageUrl: string
   suitId: number
   suitName: string
+  point:number
+  rarity: string
+  level: number
+  SkillAttack: number
+  Buffer:number
+  value:string
 }
 
 export interface IEnchantingInfo {
diff --git a/frontend/src/assets/img/icon/increase.png b/frontend/src/assets/img/icon/increase.png
index 724ed16a..cb0f2228 100644
Binary files a/frontend/src/assets/img/icon/increase.png and b/frontend/src/assets/img/icon/increase.png differ
diff --git a/frontend/src/assets/img/icon/increase_active.png b/frontend/src/assets/img/icon/increase_active.png
index fd64cf01..f9985b45 100644
Binary files a/frontend/src/assets/img/icon/increase_active.png and b/frontend/src/assets/img/icon/increase_active.png differ
diff --git a/frontend/src/assets/img/icon/increase_disabled.png b/frontend/src/assets/img/icon/increase_disabled.png
index e63db5de..75605772 100644
Binary files a/frontend/src/assets/img/icon/increase_disabled.png and b/frontend/src/assets/img/icon/increase_disabled.png differ
diff --git a/frontend/src/assets/img/icon/increase_hover.png b/frontend/src/assets/img/icon/increase_hover.png
index 229f21ef..ad6e882e 100644
Binary files a/frontend/src/assets/img/icon/increase_hover.png and b/frontend/src/assets/img/icon/increase_hover.png differ
diff --git a/frontend/src/assets/img/icon/max.png b/frontend/src/assets/img/icon/max.png
new file mode 100644
index 00000000..125c9cdf
Binary files /dev/null and b/frontend/src/assets/img/icon/max.png differ
diff --git a/frontend/src/assets/img/icon/max_active.png b/frontend/src/assets/img/icon/max_active.png
new file mode 100644
index 00000000..d88cbc27
Binary files /dev/null and b/frontend/src/assets/img/icon/max_active.png differ
diff --git a/frontend/src/assets/img/icon/max_disabled.png b/frontend/src/assets/img/icon/max_disabled.png
new file mode 100644
index 00000000..88e1197f
Binary files /dev/null and b/frontend/src/assets/img/icon/max_disabled.png differ
diff --git a/frontend/src/assets/img/icon/max_hover.png b/frontend/src/assets/img/icon/max_hover.png
new file mode 100644
index 00000000..ae7ecc38
Binary files /dev/null and b/frontend/src/assets/img/icon/max_hover.png differ
diff --git a/frontend/src/assets/img/icon/min.png b/frontend/src/assets/img/icon/min.png
index c922eca8..9aa454a6 100644
Binary files a/frontend/src/assets/img/icon/min.png and b/frontend/src/assets/img/icon/min.png differ
diff --git a/frontend/src/assets/img/icon/min_active.png b/frontend/src/assets/img/icon/min_active.png
new file mode 100644
index 00000000..f6479eae
Binary files /dev/null and b/frontend/src/assets/img/icon/min_active.png differ
diff --git a/frontend/src/assets/img/icon/min_disabled.png b/frontend/src/assets/img/icon/min_disabled.png
new file mode 100644
index 00000000..0683a977
Binary files /dev/null and b/frontend/src/assets/img/icon/min_disabled.png differ
diff --git a/frontend/src/assets/img/icon/min_hover.png b/frontend/src/assets/img/icon/min_hover.png
new file mode 100644
index 00000000..ea00edef
Binary files /dev/null and b/frontend/src/assets/img/icon/min_hover.png differ
diff --git a/frontend/src/assets/img/icon/reduce.png b/frontend/src/assets/img/icon/reduce.png
index bcbef41d..043d71cf 100644
Binary files a/frontend/src/assets/img/icon/reduce.png and b/frontend/src/assets/img/icon/reduce.png differ
diff --git a/frontend/src/assets/img/icon/reduce_active.png b/frontend/src/assets/img/icon/reduce_active.png
index 892ec066..1716931d 100644
Binary files a/frontend/src/assets/img/icon/reduce_active.png and b/frontend/src/assets/img/icon/reduce_active.png differ
diff --git a/frontend/src/assets/img/icon/reduce_disabled.png b/frontend/src/assets/img/icon/reduce_disabled.png
index 286fbf88..4243916c 100644
Binary files a/frontend/src/assets/img/icon/reduce_disabled.png and b/frontend/src/assets/img/icon/reduce_disabled.png differ
diff --git a/frontend/src/assets/img/icon/reduce_hover.png b/frontend/src/assets/img/icon/reduce_hover.png
index 761549ae..d252d5b4 100644
Binary files a/frontend/src/assets/img/icon/reduce_hover.png and b/frontend/src/assets/img/icon/reduce_hover.png differ
diff --git a/frontend/src/components/calc/button/index.vue b/frontend/src/components/calc/button/index.vue
index bcd242a1..cf91a5d7 100644
--- a/frontend/src/components/calc/button/index.vue
+++ b/frontend/src/components/calc/button/index.vue
@@ -23,9 +23,14 @@ export default defineComponent({
     type: {
       type: String,
       default: "primary"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
-  setup(props, { slots }) {
+  emits: ["click"],
+  setup(props, { slots,emit }) {
     return () => {
       const proerpties = {
         to: props.to,
@@ -34,7 +39,14 @@ export default defineComponent({
           "i-button cursor-pointer outline-none text-shadow": true,
           "small": props.small,
           [`icon-${props.icon}`]: !!props.icon
-        }
+        },
+        onClick: (e: MouseEvent) => {
+          if (props.to) {
+            e.preventDefault()
+          }
+          emit("click", e)
+        },
+        disabled: props.disabled
       }
       const content = renderSlot(slots, "default")
       return props.to ? <RouterLink {...proerpties}>{content}</RouterLink> : <button {...proerpties}>{content}</button>
diff --git a/frontend/src/components/dnf/Equipment/Info/index.vue b/frontend/src/components/dnf/Equipment/Info/index.vue
new file mode 100644
index 00000000..ae34e7b8
--- /dev/null
+++ b/frontend/src/components/dnf/Equipment/Info/index.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bg-hex-222222">
+    <div
+      :class="['bg-black text-shadow text-12px h-auto', 'text-hex-9D9476']"
+      style="
+        width: 220px;
+        float: left;
+        padding: 5px;
+        background-size: 100%;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-color: rgb(0, 0, 0);
+      "
+    >
+      <div class="h-30px flex items-left my-2px">
+        <div style="position: relative" class="w-28px mr-2px">
+          <Icon :equipment="props.equipment"></Icon>
+        </div>
+        <div style="line-height: 15px">
+          <div :class="[rarity,'pl-5px']">{{ props.equipment?.name }}</div>
+          <div class="pl-5px text-#3ea74e">{{ props.equipment?.categorize }}</div>
+        </div>
+      </div>
+      <!-- 装备图标 装备名称 -->
+
+      <div class="divide"></div>
+      <div class="flex flex-col items-end my-1px" style="line-height: 15px">
+        <div :class="rarity">{{ props.equipment?.rarity }}</div>
+        <div class="text-hex-7C6430">{{ props.equipment?.itemDetailType }}</div>
+      </div>
+        <!-- 装备基础信息 -->
+      <div class="divide"></div>
+      <div class="flex flex-col items-start my-1px" style="white-space: pre-wrap; line-height: 15px">
+          <div class="text-#908150" v-html="mainAttr"></div>
+      </div>
+      <!-- 装备属性 -->
+      <div class="divide"></div>
+      <div class="flex flex-col items-start my-1px" style="white-space: pre-wrap; line-height: 15px">
+          <div class="text-#DED29A" v-html="detail"></div>
+      </div>
+      <template v-if="bufferDetail">
+        <div class="divide"></div>
+          <div class="flex flex-col items-start my-1px" style="white-space: pre-wrap; line-height: 15px">
+          <div class="text-#A48B2E mb-10px">辅助职业专属属性</div>
+          <div class="text-#DED29A" v-html="bufferDetail"></div>
+        </div>
+      </template>
+
+    </div>
+  </div>
+
+
+
+  <!-- 奶系专属 -->
+</template>
+
+<script lang="ts" setup>
+import type { IEquipment } from '@/api/info/type'
+import Icon from '../Icon/index.vue'
+import { formatAttr, rarityClass } from '@/utils'
+
+const props = defineProps<{
+  equipment?: IEquipment
+}>()
+
+const rarity = computed(() => rarityClass(props.equipment?.rarity ?? ''))
+
+const mainAttr = computed(()=>{
+  const attrs :(keyof IEquipment)[] = ['STR', 'INT', 'Vitality', 'Spirit','AtkP','AtkM','AtkI','SkillAttack','Attack','Buffer']
+  let info = ""
+  for (const attr of attrs) {
+    const item = props.equipment?.[attr] as number[]
+    if (item?.[0]) {
+      info += `${formatAttr(attr,item?.[0])}\n`
+    }
+  }
+  return info;
+
+
+})
+
+const detail = computed(()=>props.equipment?.detail.replace(/\[([^\[\]技能]+?)\]/g, '<span style="color:#3d9147">[$1]</span>'))
+
+const bufferDetail = computed(()=>
+{
+  const detail = props.equipment?.bufferDetail
+  if(!detail || detail == '-') return undefined
+  return props.equipment?.bufferDetail.replace(/\[([^\[\]技能]+?)\]/g, '<span style="color:#3d9147">[$1]</span>')
+} )
+
+</script>
+
+<style lang="scss" scoped>
+.divide {
+  border-top: 1px solid rgba(243, 244, 246, 0.3);
+}
+</style>
diff --git a/frontend/src/components/dnf/Equipment/SuitInfo/index.vue b/frontend/src/components/dnf/Equipment/SuitInfo/index.vue
new file mode 100644
index 00000000..117006be
--- /dev/null
+++ b/frontend/src/components/dnf/Equipment/SuitInfo/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="bg-hex-222222">
+    <div
+      :class="['bg-black text-shadow text-12px h-auto', 'text-hex-9D9476']"
+      style="
+        width: 220px;
+        float: left;
+        padding: 5px;
+        background-size: 100%;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-color: rgb(0, 0, 0);
+      "
+    >
+      <!-- 装备图标 装备名称 -->
+      <div class="flex w-full items-center justify-center gap-5px" >
+        <div><img :src="getImageURL('equipment' + props.suit?.imageUrl.replace('/suit/','/suit/icon/'))" alt="装备图标"></div>
+        <div :class="rarity">{{ props.suit?.name }}</div>
+        <div :class="rarity">{{ props.suit?.point }}点</div>
+      </div>
+      <div class="divide"></div>
+      <!-- 装备基础信息 -->
+      <div
+        class="flex flex-col items-start my-1px"
+        style="white-space: pre-wrap; line-height: 15px"
+      >
+        <div class="text-#908150" v-html="mainAttr"></div>
+      </div>
+      <!-- 装备属性 -->
+      <div class="divide"></div>
+      <div
+        class="flex flex-col items-start my-1px"
+        style="white-space: pre-wrap; line-height: 15px"
+      >
+        <div class="text-#DED29A" v-html="detail"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 奶系专属 -->
+</template>
+
+<script lang="ts" setup>
+import type { IEquipment, ISuit } from '@/api/info/type'
+import {getImageURL} from '@/utils/images'
+import { formatAttr, rarityClass } from '@/utils'
+
+const props = defineProps<{
+  suit?: ISuit
+}>()
+
+const rarity = computed(() => rarityClass(props.suit?.rarity ?? ''))
+
+const mainAttr = computed(() => {
+  const attrs: (keyof ISuit)[] = ['SkillAttack', 'Buffer']
+  let info = ''
+  for (const attr of attrs) {
+    const item = props.suit?.[attr] as number
+    if (item) {
+      info += `${formatAttr(attr, item)}\n`
+    }
+  }
+  return info
+})
+
+const detail = computed(() =>
+  props.suit?.value.replace(/\[([^\[\]技能]+?)\]/g, '<span style="color:#3d9147">[$1]</span>'),
+)
+</script>
+
+<style lang="scss" scoped>
+.divide {
+  border-top: 1px solid rgba(243, 244, 246, 0.3);
+}
+</style>
diff --git a/frontend/src/pages/Character/EquipmentDictionary/Index.vue b/frontend/src/pages/Character/EquipmentDictionary/Index.vue
index 9648fc26..18388b69 100644
--- a/frontend/src/pages/Character/EquipmentDictionary/Index.vue
+++ b/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%);
   }
diff --git a/frontend/src/pages/Character/EquipmentDictionary/formatData.ts b/frontend/src/pages/Character/EquipmentDictionary/formatData.ts
new file mode 100644
index 00000000..48b52108
--- /dev/null
+++ b/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,
+    },
+  ]
+}
diff --git a/frontend/src/pages/Character/Skill/components/SkillTree/index.tsx b/frontend/src/pages/Character/Skill/components/SkillTree/index.tsx
index 860f251f..ce76c64d 100644
--- a/frontend/src/pages/Character/Skill/components/SkillTree/index.tsx
+++ b/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>
         </>
       </>
diff --git a/frontend/src/style/icon.scss b/frontend/src/style/icon.scss
index f501656d..b12036a7 100644
--- a/frontend/src/style/icon.scss
+++ b/frontend/src/style/icon.scss
@@ -1,392 +1,123 @@
-.icon-reset {
-  background-image: url("@/assets/img/icon/reset.png") !important;
+@mixin icon-style($icon-name, $width: 20px, $height: 20px, $size: 100% 100%, $position: center center) {
+  background-image: url("@/assets/img/icon/#{$icon-name}.png") !important;
   background-repeat: no-repeat !important;
-  background-size: 100% 100% !important;
-  width: 20px !important;
-  height: 20px !important;
+  background-size: $size !important;
+  background-position: $position !important;
+  width: $width !important;
+  height: $height !important;
+
   &:hover {
-    background-image: url("@/assets/img/icon/reset_hover.png") !important ;
+    background-image: url("@/assets/img/icon/#{$icon-name}_hover.png") !important;
   }
   &:active {
-    background-image: url("@/assets/img/icon/reset_active.png") !important;
+    background-image: url("@/assets/img/icon/#{$icon-name}_active.png") !important;
   }
   &:disabled {
-    background-image: url("@/assets/img/icon/reset_disabled.png") !important;
+    background-image: url("@/assets/img/icon/#{$icon-name}_disabled.png") !important;
   }
 }
 
+.icon-reset {
+  @include icon-style("reset");
+}
+
 .icon-set {
-  background-image: url("@/assets/img/icon/set.png") !important;
-  background-repeat: no-repeat !important;
-  background-size: 100% 100% !important;
-  width: 20px !important;
-  height: 20px !important;
-  &:hover {
-    background-image: url("@/assets/img/icon/set_hover.png") !important;
-  }
-  &:active {
-    background-image: url("@/assets/img/icon/set_active.png") !important  ;
-  }
-  // &:disabled {
-  //   background-image: url("@/assets/img/icon/set_disabled.png");
-  // }
+  @include icon-style("set");
 }
 
 .icon-prev {
-  background-image: url("@/assets/img/icon/prev.png") !important;
-  background-repeat: no-repeat !important;
-  background-size: 100% 100% !important;
-  width: 16px !important;
-  height: 16px !important;
-  &:hover {
-    background-image: url("@/assets/img/icon/prev_hover.png") !important;
-  }
-  &:active {
-    background-image: url("@/assets/img/icon/prev_active.png") !important;
-  }
-  &:disabled {
-    background-image: url("@/assets/img/icon/prev_disabled.png") !important;
-  }
+  @include icon-style("prev", 16px, 16px);
 }
 
 .icon-next {
-  background-image: url("@/assets/img/icon/next.png") !important;
-  background-repeat: no-repeat !important;
-  background-size: 100% 100% !important;
-  width: 16px !important;
-  height: 16px !important;
-  &:hover {
-    background-image: url("@/assets/img/icon/next_hover.png") !important;
-  }
-  &:active {
-    background-image: url("@/assets/img/icon/next_active.png") !important;
-  }
-  &:disabled {
-    background-image: url("@/assets/img/icon/next_disabled.png") !important;
-  }
+  @include icon-style("next", 16px, 16px);
 }
 
 .icon-dropdown {
-  background-image: url("@/assets/img/icon/dropdown.png") !important;
-  background-repeat: no-repeat !important;
-  background-size: 100% 100% !important;
-  width: 16px !important;
-  height: 16px !important;
-  &:hover {
-    background-image: url("@/assets/img/icon/dropdown_hover.png")   !important;
-  }
-  &:active {
-    background-image: url("@/assets/img/icon/dropdown_active.png") !important;
-  }
-  &:disabled {
-    background-image: url("@/assets/img/icon/dropdown_disabled.png");
-  }
+  @include icon-style("dropdown", 16px, 16px);
 }
 
 .icon-search {
-  background-image: url("@/assets/img/icon/search.png") !important;
-  background-repeat: no-repeat !important;
-  background-size: 100% 100% !important;
-  width: 20px !important;
-  height: 20px !important;
-  &:hover {
-    background-image: url("@/assets/img/icon/search_hover.png") !important;
-  }
-  &:active {
-    background-image: url("@/assets/img/icon/search_active.png") !important;
-  }
-  &:disabled {
-    background-image: url("@/assets/img/icon/search_disabled.png" ) !important;
-  }
+  @include icon-style("search");
 }
 
 .icon-increase {
-  background-image: url("@/assets/img/icon/increase.png") !important;
-  background-repeat: no-repeat !important;
-  background-size: 100% 100% !important;
-  width: 16px !important;
-  height: 16px !important;
-  &:hover {
-    background-image: url("@/assets/img/icon/increase_hover.png") !important;
-  }
-  &:active {
-    background-image: url("@/assets/img/icon/increase_active.png") !important;
-  }
-  &:disabled {
-    background-image: url("@/assets/img/icon/increase_disabled.png") !important ;
-  }
+  @include icon-style("increase");
 }
 
 .icon-reduce {
-  background-image: url("@/assets/img/icon/reduce.png") !important;
-  background-repeat: no-repeat !important;
-  background-size: 100% 100% !important;
-  width: 16px !important;
-  height: 16px !important;
-  &:hover {
-    background-image: url("@/assets/img/icon/reduce_hover.png") !important;
-  }
-  &:active {
-    background-image: url("@/assets/img/icon/reduce_active.png") !important;
-  }
-  &:disabled {
-    background-image: url("@/assets/img/icon/reduce_disabled.png") !important;
-  }
+  @include icon-style("reduce");
 }
 
 .icon-plus {
-  background-image: url("@/assets/img/icon/plus.png") !important;
-  background-repeat: no-repeat !important;
-  background-size: 100% 100% !important;
-  width: 20px !important;
-  height: 20px !important;
-  &:hover {
-    background-image: url("@/assets/img/icon/plus_hover.png") !important;
-  }
-  &:active {
-    background-image: url("@/assets/img/icon/plus_active.png") !important;
-  }
-  &:disabled {
-    background-image: url("@/assets/img/icon/plus_disabled.png") !important;
-  }
+  @include icon-style("plus");
 }
 
 .icon-detail {
-  background-image: url("@/assets/img/icon/detail.png") !important;
-  background-repeat: no-repeat !important;
-  background-size: 100% 100% !important;
-  width: 20px !important;
-  height: 20px !important;
-  &:hover {
-    background-image: url("@/assets/img/icon/detail_hover.png") !important;
-  }
-  &:active {
-    background-image: url("@/assets/img/icon/detail_active.png") !important;
-  }
-  &:disabled {
-    background-image: url("@/assets/img/icon/detail_disabled.png") !important;
-  }
+  @include icon-style("detail");
 }
 
-
 .icon-home {
-  background-image: url("@/assets/img/icon/home.png") !important;
-  background-repeat: no-repeat !important;
-  background-size: 100% 100% !important;
-  width: 20px !important;
-  height: 20px !important;
-  &:hover {
-    background-image: url("@/assets/img/icon/home_hover.png") !important;
-  }
-  &:active {
-    background-image: url("@/assets/img/icon/home_active.png") !important;
-  }
-  &:disabled {
-    background-image: url("@/assets/img/icon/home_disabled.png") !important;
-  }
+  @include icon-style("home");
 }
 
 .icon-reflesh {
-  background-image: url("@/assets/img/icon/reflesh.png") !important;
-  background-repeat: no-repeat !important;
-  background-size: 100% 100% !important;
-  width: 20px !important;
-  height: 20px !important;
-  &:hover {
-    background-image: url("@/assets/img/icon/reflesh_hover.png") !important;
-  }
-  &:active {
-    background-image: url("@/assets/img/icon/reflesh_active.png") !important;
-  }
-  &:disabled {
-    background-image: url("@/assets/img/icon/reflesh_disabled.png") !important;
-  }
+  @include icon-style("reflesh");
 }
 
 .icon-update {
-  background-image: url("@/assets/img/icon/update.png") !important;
-  background-repeat: no-repeat !important;
-  background-size: 100% 100% !important;
-  width: 20px !important;
-  height: 20px !important;
-  &:hover {
-    background-image: url("@/assets/img/icon/update_hover.png") !important;
-  }
-  &:active {
-    background-image: url("@/assets/img/icon/update_active.png") !important;
-  }
-  &:disabled {
-    background-image: url("@/assets/img/icon/update_disabled.png") !important;
-  }
+  @include icon-style("update");
 }
 
 .icon-share {
-  background-image: url("@/assets/img/icon/share.png") !important;
-  background-repeat: no-repeat !important;
-  background-size: 100% 100% !important;
-  width: 20px !important;
-  height: 20px !important;
-  &:hover {
-    background-image: url("@/assets/img/icon/share_hover.png") !important;
-  }
-  &:active {
-    background-image: url("@/assets/img/icon/share_active.png") !important;
-  }
-  &:disabled {
-    background-image: url("@/assets/img/icon/share_disabled.png") !important;
-  }
+  @include icon-style("share");
 }
 
 .icon-import {
-  background-image: url("@/assets/img/icon/import.png") !important;
-  background-repeat: no-repeat !important;
-  background-size: 100% 100% !important;
-  width: 20px !important;
-  height: 20px !important;
-  &:hover {
-    background-image: url("@/assets/img/icon/import_hover.png") !important;
-  }
-  &:active {
-    background-image: url("@/assets/img/icon/import_active.png") !important;
-  }
-  &:disabled {
-    background-image: url("@/assets/img/icon/import_disabled.png") !important;
-  }
+  @include icon-style("import");
 }
 
 .icon-menu-drug {
-  background-image: url("@/assets/img/icon/menu/drug.png") !important;
-  background-repeat: no-repeat !important;
-  background-size: auto 100% !important;
-  background-position: center center;
-  width: 20px !important;
-  height: 20px !important;
-  &:hover {
-    background-image: url("@/assets/img/icon/menu/drug_hover.png") !important;
-    background-repeat: no-repeat !important;
-    background-size: auto 100% !important;
-    background-position: center center;
-  }
-  &:active {
-    background-image: url("@/assets/img/icon/menu/drug_active.png") !important;
-    background-repeat: no-repeat !important;
-    background-size: auto 100% !important;
-    background-position: center center;
-  }
-  &:disabled {
-    background-image: url("@/assets/img/icon/menu/drug_disabled.png") !important;
-    background-repeat: no-repeat !important;
-    background-size: auto 100% !important;
-    background-position: center center;
-  }
+  @include icon-style("menu/drug", 20px, 20px, auto 100%);
 }
 
 .icon-menu-specificity {
-  background-image: url("@/assets/img/icon/menu/specificity.png") !important;
-  background-repeat: no-repeat !important;
-  background-size: auto 100% !important;
-  background-position: center center;
-  width: 20px !important;
-  height: 20px !important;
-  &:hover {
-    background-image: url("@/assets/img/icon/menu/specificity_hover.png") !important;
-    background-repeat: no-repeat !important;
-    background-size: auto 100% !important;
-    background-position: center center;
-  }
-  &:active {
-    background-image: url("@/assets/img/icon/menu/specificity_active.png") !important;
-    background-repeat: no-repeat !important;
-    background-size: auto 100% !important;
-    background-position: center center;
-  }
-  &:disabled {
-    background-image: url("@/assets/img/icon/menu/specificity_disabled.png") !important;
-    background-repeat: no-repeat !important;
-    background-size: auto 100% !important;
-    background-position: center center;
-  }
+  @include icon-style("menu/specificity", 20px, 20px, auto 100%);
 }
 
-
 .icon-menu-favourite {
-  background-image: url("@/assets/img/icon/menu/favourite.png") !important;
-  background-repeat: no-repeat !important;
-  background-size: auto 100% !important;
-  background-position: center center;
-  width: 20px !important;
-  height: 20px !important;
-  &:hover {
-    background-image: url("@/assets/img/icon/menu/favourite_hover.png") !important;
-    background-repeat: no-repeat !important;
-    background-size: auto 100% !important;
-    background-position: center center;
-  }
-  &:active {
-    background-image: url("@/assets/img/icon/menu/favourite_active.png") !important;
-    background-repeat: no-repeat !important;
-    background-size: auto 100% !important;
-    background-position: center center;
-  }
-  &:disabled {
-    background-image: url("@/assets/img/icon/menu/favourite_disabled.png") !important;
-    background-repeat: no-repeat !important;
-    background-size: auto 100% !important;
-    background-position: center center;
-  }
+  @include icon-style("menu/favourite", 20px, 20px, auto 100%);
 }
 
 .icon-menu-recommend {
-  background-image: url("@/assets/img/icon/menu/recommend.png") !important;
-  background-repeat: no-repeat !important;
-  background-size: auto 100% !important;
-  background-position: center center;
-  width: 20px !important;
-  height: 20px !important;
-  &:hover {
-    background-image: url("@/assets/img/icon/menu/recommend_hover.png") !important;
-    background-repeat: no-repeat !important;
-    background-size: auto 100% !important;
-    background-position: center center;
-  }
-  &:active {
-    background-image: url("@/assets/img/icon/menu/recommend_active.png") !important;
-    background-repeat: no-repeat !important;
-    background-size: auto 100% !important;
-    background-position: center center;
-  }
-  &:disabled {
-    background-image: url("@/assets/img/icon/menu/recommend_disabled.png") !important;
-    background-repeat: no-repeat !important;
-    background-size: auto 100% !important;
-    background-position: center center;
-  }
+  @include icon-style("menu/recommend", 20px, 20px, auto 100%);
 }
 
 .icon-menu-set {
-  background-image: url("@/assets/img/icon/menu/set.png") !important;
-  background-repeat: no-repeat !important;
-  background-size: auto 100% !important;
-  background-position: center center;
-  width: 20px !important;
-  height: 20px !important;
-  &:hover {
-    background-image: url("@/assets/img/icon/menu/set_hover.png") !important;
-    background-repeat: no-repeat !important;
-    background-size: auto 100% !important;
-    background-position: center center;
-  }
-  &:active {
-    background-image: url("@/assets/img/icon/menu/set_active.png") !important;
-    background-repeat: no-repeat !important;
-    background-size: auto 100% !important;
-    background-position: center center;
-  }
-  &:disabled {
-    background-image: url("@/assets/img/icon/menu/set_disabled.png") !important;
-    background-repeat: no-repeat !important;
-    background-size: auto 100% !important;
-    background-position: center center;
-  }
+  @include icon-style("menu/set", 20px, 20px, auto 100%);
 }
 
+.icon-max{
+  @include icon-style("max");
+}
+
+.icon-min{
+  @include icon-style("min");
+}
+
+
+.icon-increase-little {
+  @include icon-style("increase",16px, 16px);
+}
+
+.icon-reduce-little {
+  @include icon-style("reduce", 16px, 16px);
+}
+
+.icon-max-little{
+  @include icon-style("max", 16px, 16px);
+}
+
+.icon-min-little{
+  @include icon-style("min", 16px, 16px);
+}
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index 5bc853f3..d10d0875 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -298,6 +298,33 @@ export function rarityClass(type: string) {
   }
 }
 
+export function formatAttr(type:string,value:number){
+  switch(type){
+    case "STR":
+      return `力量 ${value}`
+    case "INT":
+      return `智力 ${value}`
+    case "Vitality":
+      return `体力 ${value}`
+    case "Spirit":
+      return `精神 ${value}`
+    case "AtkP":
+      return `物理攻击力 ${value}`
+    case "AtkM":
+      return `魔法攻击力 ${value}`
+    case "AtkI":
+      return `独立攻击力 ${value}`
+    case "SkillAttack":
+      return `技能伤害 +${(value * 100).toFixed(2)}%`
+    case "Attack":
+      return `攻击强化 +${(value).toFixed(1)}%`
+    case "Buffer":
+      return `增益量 ${(value)}`
+    default:
+      return `${type} ${value}`
+  }
+}
+
 
 export const decrypt = (encryptedData:string)=>{
   try{
diff --git a/icon/main.py b/icon/main.py
deleted file mode 100644
index 9ac46248..00000000
--- a/icon/main.py
+++ /dev/null
@@ -1,39 +0,0 @@
-import os
-import requests
-import json
-
-
-with open('./icon/res.json', 'r') as file:
-  data = json.load(file)
-
-for item in data:
-  if not os.path.exists(f"./icon/{item['dcalc']}"):
-    os.makedirs(f"./icon/{item['dcalc']}")
-  for i in range(0, 2333):
-    url = f"https://image.avatar.dnf.qq.com/icon/{item['name']}/{i:05}.png"
-    response = requests.get(url)
-    if response.status_code == 200:
-      if response.content:
-        with open(
-          f"./icon/{item['dcalc']}/{i:05}.png", "wb"
-        ) as file:
-          file.write(response.content)
-    else:
-      print(f"Failed to fetch {url}, status code: {response.status_code}")
-      break
-
-# for part in ['plate_belt', 'plate_coat', 'plate_pants', 'plate_neck', 'plate_shoes', 'magicstone', 'amalgamationstone', 'ring', 'ring_jp', 'harmor_belt', 'harmor_coat', 'harmor_pants', 'harmor_neck', 'harmor_shoes', 'larmor_belt', 'larmor_coat', 'larmor_pants', 'larmor_neck', 'larmor_shoes', 'flag', 'necklace', 'necklace_jp', 'bracelet_jp', 'bracelet_cn', 'bracelet', 'cloth_belt', 'cloth_coat', 'cloth_pants', 'cloth_neck', 'cloth_shoes', 'talismanicon', 'knuckle', 'bglove', 'claw', 'gauntlet', 'tonfa', 'ebow', 'sbow', 'lbow', 'cbow', 'club', 'sswd', 'katana', 'beamswd', 'lswd', 'rod', 'spear', 'broom', 'staff', 'pole', 'revolver', 'automatic', 'bowgun', 'musket', 'hcannon', 'pike', 'javelin', 'halberd', 'beamspear', 'shield', 'twinswd', 'dagger', 'chakraweapon', 'wand', 'scythe', 'cross', 'rosary', 'axe', 'totem', 'sblade', 'lblade', 'coreswd', 'mswd', 'earrring', 'support', 'leather_belt', 'leather_coat', 'leather_pants', 'leather_neck', 'leather_shoes']:
-#   if os.path.exists(f"./images/equipment/new_equipment/{part}"):
-#       pass
-#   else:
-#       os.makedirs(f"./images/equipment/new_equipment/{part}")
-
-#   for i in range(0, 999):
-#       url = f"https://image.avatar.dnf.qq.com/icon/{part}/{i:05}.png"
-#       response = requests.get(url)
-#       if response.status_code == 200:
-#           if response.content:
-#               with open(
-#                   f"./images/equipment/new_equipment/{part}/{i:05}.png", "wb"
-#               ) as file:
-#                   file.write(response.content)