diff --git a/backend/api/routes/info.py b/backend/api/routes/info.py
index 2a23f3e5..9a7d83f5 100644
--- a/backend/api/routes/info.py
+++ b/backend/api/routes/info.py
@@ -2,11 +2,11 @@ import re
 from api.core.Auth import createToken
 from api.core.Gzip import register_gzip_request
 import json
-from fastapi import APIRouter,Request, Depends, Body
+from fastapi import APIRouter, Request, Depends, Body
 from typing import Annotated
 from api.core.Response import Return, response
 from api.core.Redis import get_redis_info
-from api.dp import RedisDep,AltersDep
+from api.dp import RedisDep, AltersDep
 from core.character.adventure import get_adv_list
 from core.basic.character import createCharacter
 from core.open.helper import get_user_info_by_id
@@ -17,6 +17,7 @@ router = APIRouter()
 
 register_gzip_request(router)
 
+
 def replace_placeholders(template):
     # 匹配 <int>、<float>、<float1>、<float2> 等
     pattern = re.compile(r'<(int|float\d*)>')
@@ -30,44 +31,43 @@ def replace_placeholders(template):
     return pattern.sub(repl, template)
 
 
-
 @router.get('/adventure')
-async def get_adventure_info(request: Request,redis:RedisDep):
+async def get_adventure_info(request: Request, redis: RedisDep):
     adventure_info = get_redis_info(redis, 'dcalc:adventure', get_adv_list)
 
     return response(data=adventure_info)
 
-@router.get("/token/get/{alter}")
-async def getToken(redis:RedisDep,
-    alter: str, request: Request, version: str = None, equVersion: str = "0"
-):
+
+@router.get('/token/get/{alter}')
+async def getToken(redis: RedisDep, alter: str, request: Request, version: str = None, equVersion: str = '0'):
     token = createToken(alter, equVersion, redis)
     return response(data=token)
 
-@router.get("/character")
-async def get_character_info(
-    request: Request, state: AltersDep ,redis:RedisDep
-):
+
+@router.get('/character')
+async def get_character_info(request: Request, state: AltersDep, redis: RedisDep):
     character = createCharacter(state.alter, state.equVersion)
+
     def get_character():
         return character.getInfo()
-    info = get_redis_info(redis, f"dcalc:character:{state.alter}:{state.equVersion}", get_character)
+
+    info = get_redis_info(redis, f'dcalc:character:{state.alter}:{state.equVersion}', get_character)
     # info = character.getInfo()
     return response(data=info)
 
-@router.get("/skill/{skillId}/{level}")
-async def get_skill_info(
-    state: AltersDep, skillId: str, level: int, redis: RedisDep
-):
+
+@router.get('/skill/{skillId}/{level}')
+async def get_skill_info(state: AltersDep, skillId: str, level: int, redis: RedisDep):
     """
     获取技能信息
     """
     alter = state.alter
-    jobId = alter.split(".")[1]
-    jobGrowId = alter.split(".")[2]
+    jobId = alter.split('.')[1]
+    jobGrowId = alter.split('.')[2]
     skill_info = {}
     key = f'openapi:{jobId}:{jobGrowId}:{skillId}'
     try:
+
         def get_skill_info():
             # This function should retrieve the skill info based on job and jobGrow
             # For now, we return a placeholder dictionary
@@ -97,25 +97,27 @@ async def get_skill_info(
     return response(data=skill_info)
 
 
-@router.get("/dnfhelper/{uid}/")
+@router.get('/dnfhelper/{uid}/')
 async def get_info_by_dnfhelper(uid: str, state: AltersDep, redis: RedisDep):
     try:
-        result = await get_user_info_by_id(uid,state)
+        result = await get_user_info_by_id(uid, state)
         return response(data=result)
     except Exception as e:
         if isinstance(e, ResponseException):
             return response(code=500, message=str(e), data=None)
-        return response(code=500, message="Failed to fetch DNFHelper info", data=None)
+        print(e)
+        return response(code=500, message='Failed to fetch DNFHelper info', data=None)
 
-@router.post("/skillTree/")
-async def get_skill_by_code(state: AltersDep, code = Body(None)):
+
+@router.post('/skillTree/')
+async def get_skill_by_code(state: AltersDep, code=Body(None)):
     try:
-        skills = get_skill_tree_info(code.get("code", ""))
-        if skills.get("job",{}).get("class","") != state.alter:
-            return response(code=500, message="技能加点代码职业与登录职业不匹配", data=None)
+        skills = get_skill_tree_info(code.get('code', ''))
+        if skills.get('job', {}).get('class', '') != state.alter:
+            return response(code=500, message='技能加点代码职业与登录职业不匹配', data=None)
         return response(data=skills)
     except Exception as e:
-        print(f"Error fetching skill tree info: {e}")
+        print(f'Error fetching skill tree info: {e}')
         if isinstance(e, ResponseException):
             return response(code=500, message=str(e), data=None)
-        return response(code=500, message="解析技能加点失败", data=None)
\ No newline at end of file
+        return response(code=500, message='解析技能加点失败', data=None)
diff --git a/backend/core/basic/character/calc_equip.py b/backend/core/basic/character/calc_equip.py
index 6b97a919..3b097376 100644
--- a/backend/core/basic/character/calc_equip.py
+++ b/backend/core/basic/character/calc_equip.py
@@ -101,7 +101,7 @@ class CalcEquipMixin(CharacterBase):
         max_point_oath_suit = max((suit for suit in oathSuitInfo if oathSuitInfo[suit]['point'] > 0), key=lambda suit: oathSuitInfo[suit]['point'], default=None)
         zero_point_suits = [suit for suit in suitInfo if suitInfo[suit]['point'] == 0]
         # 套装没有到太初的时候，优先把誓约套装的点数加到装备套装上，以达到更高的套装等级
-        if 0 < suitInfo[max_point_suit]['point'] < 2550 and oathSuitInfo.get('max_point_oath_suit', None) is not None:
+        if suitInfo is not None and 0 < suitInfo[max_point_suit]['point'] < 2550 and oathSuitInfo.get('max_point_oath_suit', None) is not None:
             suitInfo[max_point_suit]['point'] += min(2550 - suitInfo[max_point_suit]['point'], oathSuitInfo[max_point_oath_suit]['point'])
             oathSuitInfo[max_point_oath_suit]['point'] -= min(2550 - suitInfo[max_point_suit]['point'], oathSuitInfo[max_point_oath_suit]['point'])
             pass
diff --git a/backend/core/open/helper.py b/backend/core/open/helper.py
index 01359612..a8c62fee 100644
--- a/backend/core/open/helper.py
+++ b/backend/core/open/helper.py
@@ -79,12 +79,12 @@ job_mapping = {
 
 async def get_user_info_by_id(user_id: str, alter: AltersDep):
     if alter is None:
-        raise ResponseException("登录过期或无效Token，请刷新后重试")
+        raise ResponseException('登录过期或无效Token，请刷新后重试')
     name = next((k for k, v in job_mapping.items() if v == alter.origin), '')
     # 通过OCR助手获取用户信息
     helper_info = await get_main_user_info_by_id(user_id, name)
     if helper_info is None:
-        raise ResponseException("当前助手ID不存在或已隐藏，请确认后重试")
+        raise ResponseException('当前助手ID不存在或已隐藏，请确认后重试')
     else:
         return trans_to_dcalc_set(helper_info, alter)
         pass
@@ -93,7 +93,7 @@ async def get_user_info_by_id(user_id: str, alter: AltersDep):
 def trans_to_dcalc_set(detail, alter: AltersDep):
     job = job_mapping.get(detail.get('job', ''), '')
     if job != alter.origin:
-        raise ResponseException("未能匹配到当前职业对应的角色信息，请确认后重试")
+        raise ResponseException('未能匹配到当前职业对应的角色信息，请确认后重试')
     basic = get_equipment('0')
     basicAvatars = basic.funs.get_dress_list([])
     equs = detail.get('equs', [])
@@ -126,9 +126,9 @@ def trans_to_dcalc_set(detail, alter: AltersDep):
         # 贴膜
         if dcalcEqu:
             info['id'] = dcalcEqu.id
-        dcalcEquFusion = next((item for item in basic.stones if item.name == equ.get('upgrade', '')), None)
-        if dcalcEquFusion:
-            info['fusion'] = dcalcEquFusion.id
+        # dcalcEquFusion = next((item for item in basic.stones if item.name == equ.get('upgrade', '')), None)
+        # if dcalcEquFusion:
+        #     info['fusion'] = dcalcEquFusion.id
         info['enchant'] = getEnchatIdByName(equ.get('enchant', ''), equ.get('posName', ''), basic.enchants)
         emblems = [getEmblemIdByName(i.get('detail', ''), i.get('categorize', ''), i.get('rarity', ''), basic.emblems) for i in equ.get('emblems', [])]
         info['emblem_0'] = emblems[0] if len(emblems) > 0 else 0
@@ -167,7 +167,7 @@ def trans_to_dcalc_set(detail, alter: AltersDep):
                 if item.get('posName', '') == '皮肤':
                     match = re.search(r'\[(\d+)级\]', item.get('name', ''))
                     lv = int(match.group(1)) if match else None
-                    if lv :
+                    if lv:
                         item['enchant'] = f'Lv{lv}主动+1|全属强(12)|四维(55)'
                 if item.get('posName', '') == '光环':
                     # 先默认这个了 不管了
@@ -182,11 +182,14 @@ def trans_to_dcalc_set(detail, alter: AltersDep):
         'equips': equips,
         'avatars': avatar,
         'avatarLink': detail.get('avatarLink', ''),
-        'dressInfo': [{
-            'dress': i.get('name', ''),
-            'clone': i.get('clone', ''),
-            'part': i.get('posName', ''),
-        } for i in detail.get('avatars', [])]
+        'dressInfo': [
+            {
+                'dress': i.get('name', ''),
+                'clone': i.get('clone', ''),
+                'part': i.get('posName', ''),
+            }
+            for i in detail.get('avatars', [])
+        ],
     }
     # 处理装备
     # 处理时装
diff --git a/backend/dataFiles/dcalc_0.db b/backend/dataFiles/dcalc_0.db
index 3bf8aaa8..5e7cf403 100644
Binary files a/backend/dataFiles/dcalc_0.db and b/backend/dataFiles/dcalc_0.db differ
diff --git a/backend/openapi b/backend/openapi
index 03f3bbf0..680ed85d 160000
--- a/backend/openapi
+++ b/backend/openapi
@@ -1 +1 @@
-Subproject commit 03f3bbf037b53d7c0dfbee7be52a1989464c5103
+Subproject commit 680ed85d6e8646ad98afe7208a7381dc366bc4f8
diff --git a/frontend/src/api/calc/type.ts b/frontend/src/api/calc/type.ts
index 7bdd486a..5b13f368 100644
--- a/frontend/src/api/calc/type.ts
+++ b/frontend/src/api/calc/type.ts
@@ -21,6 +21,7 @@ export interface IResultSkill {
 }
 
 export interface IResultUserInfo {
+  id: number
   name: string
   value: string | number
 }
diff --git a/frontend/src/api/info/type.ts b/frontend/src/api/info/type.ts
index 8b23f4d0..aae83455 100644
--- a/frontend/src/api/info/type.ts
+++ b/frontend/src/api/info/type.ts
@@ -72,13 +72,13 @@ export interface IEquipment {
   Buffer: number[]
   detail: string
   bufferDetail: string
-}
-
-export interface IOathInfo extends IEquipment {
   position: string[]
   wearUrl: string[]
+  oathPos: string
+  displayUrl?: string
 }
 
+
 export interface ISkill {
   icon: string
   name: string
diff --git a/frontend/src/components/calc/autocomplete/index.vue b/frontend/src/components/calc/autocomplete/index.vue
index a8a85915..f3d3bd3b 100644
--- a/frontend/src/components/calc/autocomplete/index.vue
+++ b/frontend/src/components/calc/autocomplete/index.vue
@@ -11,6 +11,7 @@ import {
   renderList,
   watch,
 } from 'vue'
+import { getElementZoom } from '@/utils/position'
 
 type HandleChangeFunction = (value: string | number) => string[] | Promise<string[]>
 
@@ -55,10 +56,12 @@ export default defineComponent({
     function onResize() {
       if (triggerRef.value) {
         const { width, height, left, top } = triggerRef.value.getBoundingClientRect()
+        const zoom = getElementZoom('body')
+
         dropdownPosition.value = {
-          w: width,
-          x: left,
-          y: top + height + 2,
+          w: width / zoom,
+          x: left / zoom,
+          y: (top + height + 2) / zoom,
         }
       }
     }
diff --git a/frontend/src/components/calc/cascader/index.vue b/frontend/src/components/calc/cascader/index.vue
index 492ddd63..f5f59345 100644
--- a/frontend/src/components/calc/cascader/index.vue
+++ b/frontend/src/components/calc/cascader/index.vue
@@ -4,6 +4,7 @@ import type { CSSProperties, PropType } from 'vue'
 import { Teleport, Transition, computed, defineComponent, onDeactivated, ref, watch } from 'vue'
 
 import { onClickOutside, useVModel } from '@vueuse/core'
+import { getElementZoom } from '@/utils/position'
 interface ICascaderItem {
   label: string
   id?: string | number
@@ -74,18 +75,19 @@ export default defineComponent({
     function onResize() {
       if (triggerRef.value) {
         const { width, height, left, top } = triggerRef.value.getBoundingClientRect()
+        const zoom = getElementZoom('body')
         if (window.innerHeight - top > 160) {
           dropdownPosition.value = {
-            w: width,
-            x: left,
-            y: top + height + 2,
+            w: width / zoom,
+            x: left / zoom,
+            y: (top + height + 2) / zoom,
             z: 0,
           }
         } else {
           dropdownPosition.value = {
-            w: width,
-            x: left,
-            z: window.innerHeight - top + 2,
+            w: width / zoom,
+            x: left / zoom,
+            z: (window.innerHeight - top + 2) / zoom,
             y: 0,
           }
         }
diff --git a/frontend/src/components/calc/iconselect/index.vue b/frontend/src/components/calc/iconselect/index.vue
index 7452f786..1c6c66d2 100644
--- a/frontend/src/components/calc/iconselect/index.vue
+++ b/frontend/src/components/calc/iconselect/index.vue
@@ -13,6 +13,7 @@ import {
 } from 'vue'
 
 import { onClickOutside } from '@vueuse/core'
+import { getElementZoom } from '@/utils/position'
 
 export default defineComponent({
   name: 'IIconselect',
@@ -72,20 +73,24 @@ export default defineComponent({
     const dropdownPosition = ref({ x: 0, y: 0, w: 0 })
     // 下拉框位置
     const dropdownStyle = computed<CSSProperties>(() => {
+      const zoom = getElementZoom(appendToRef.value)
+
       return {
         left: `${dropdownPosition.value.x}px`,
         top: `${dropdownPosition.value.y}px`,
-        width: `${columnNum.value * 32 + 11}px`,
+        width: `${(columnNum.value * 32 + 11) / zoom}px`,
       }
     })
 
     function onResize() {
       if (triggerRef.value) {
         const { width, height, left, top } = triggerRef.value.getBoundingClientRect()
+        const zoom = getElementZoom(appendToRef.value)
+
         dropdownPosition.value = {
-          w: width,
-          x: left - 2,
-          y: (top + height + 2),
+          w: width / zoom,
+          x: (left - 2) / zoom,
+          y: (top + height + 2) / zoom,
         }
       }
     }
diff --git a/frontend/src/components/calc/select/index.vue b/frontend/src/components/calc/select/index.vue
index 777f31f7..89aef50e 100644
--- a/frontend/src/components/calc/select/index.vue
+++ b/frontend/src/components/calc/select/index.vue
@@ -15,6 +15,7 @@ import {
 
 import { onClickOutside, useVModel } from '@vueuse/core'
 import { classPropType, labelPropType } from '@/components/hooks/types'
+import { getElementZoom } from '@/utils/position'
 
 export default defineComponent({
   name: 'ISelect',
@@ -98,18 +99,19 @@ export default defineComponent({
     function onResize() {
       if (triggerRef.value) {
         const { width, height, left, top } = triggerRef.value.getBoundingClientRect()
+        const zoom = getElementZoom(appendToRef.value)
         if (window.innerHeight - top > 160) {
           dropdownPosition.value = {
-            w: width,
-            x: left,
-            y: (top + height + 2),
+            w: width / zoom,
+            x: left / zoom,
+            y: (top + height + 2) / zoom,
             z: 0,
           }
         } else {
           dropdownPosition.value = {
-            w: width,
-            x: left,
-            z: (window.innerHeight - top  + 2),
+            w: width / zoom,
+            x: left / zoom,
+            z: (window.innerHeight - top + 2) / zoom,
             y: 0,
           }
         }
diff --git a/frontend/src/components/dnf/Equipment/Icon/index.vue b/frontend/src/components/dnf/Equipment/Icon/index.vue
index ec52e5cf..ec22fd50 100644
--- a/frontend/src/components/dnf/Equipment/Icon/index.vue
+++ b/frontend/src/components/dnf/Equipment/Icon/index.vue
@@ -3,7 +3,9 @@
     <div class="relative" :class="{ inactive: props.inactive }">
       <div
         class="w-28px h-28px"
-        :style="{ backgroundImage: `url(${getImageURL(props.equipment?.imageUrl)})` }"
+        :style="{
+          backgroundImage: `url(${getImageURL((useDisplayUrl ? props.equipment?.displayUrl : props.equipment?.imageUrl) || '')})`,
+        }"
       >
         <img :src="getLocalImageURL(rarity)" />
       </div>
@@ -21,6 +23,7 @@ import { getImageURL } from '@/utils/images'
 const props = defineProps<{
   equipment?: IEquipment
   inactive?: boolean
+  useDisplayUrl?: boolean
 }>()
 
 const rarity = computed(() => {
diff --git a/frontend/src/components/dnf/Equipment/Info/index.vue b/frontend/src/components/dnf/Equipment/Info/index.vue
index ee635072..c5e056a5 100644
--- a/frontend/src/components/dnf/Equipment/Info/index.vue
+++ b/frontend/src/components/dnf/Equipment/Info/index.vue
@@ -38,16 +38,12 @@
       </div>
       <!-- 装备属性 -->
       <div class="divide"></div>
-      <div
-        class="flex flex-col items-start my-1px whitespace-pre-wrap leading-15px"
-      >
+      <div class="flex flex-col items-start my-1px whitespace-pre-wrap leading-15px">
         <div class="text-#DED29A py-4px whitespace-pre-wrap" v-html="detail"></div>
       </div>
       <template v-if="bufferDetail">
         <div class="divide"></div>
-        <div
-          class="flex flex-col items-start my-1px whitespace-pre-wrap leading-15px"
-        >
+        <div class="flex flex-col items-start my-1px whitespace-pre-wrap leading-15px">
           <div class="text-#A48B2E mb-10px pt-4px">辅助职业专属属性</div>
           <div class="text-#DED29A pb-10px whitespace-pre-wrap" v-html="bufferDetail"></div>
         </div>
@@ -95,16 +91,18 @@ const mainAttr = computed(() => {
 // a.match(/\[(?!.*?技能).*?]/g)
 
 const detail = computed(() =>
-  props.equipment?.detail.replace(
-    /\[(?![^\]]*技能)[^\[\]]+\]/g, match => `<span style="color:#3d9147">${match}</span>`
-  )
+  props.equipment?.detail?.replace(
+    /\[(?![^\]]*技能)[^\[\]]+\]/g,
+    (match) => `<span style="color:#3d9147">${match}</span>`,
+  ),
 )
 
 const bufferDetail = computed(() => {
   const detail = props.equipment?.bufferDetail
   if (!detail || detail == '-') return undefined
   return props.equipment?.bufferDetail.replace(
-    /\[(?![^\]]*技能)[^\[\]]+\]/g, match => `<span style="color:#3d9147">${match}</span>`
+    /\[(?![^\]]*技能)[^\[\]]+\]/g,
+    (match) => `<span style="color:#3d9147">${match}</span>`,
   )
 })
 </script>
diff --git a/frontend/src/components/dnf/Equipment/List/index.vue b/frontend/src/components/dnf/Equipment/List/index.vue
index 85edb947..3363dd0b 100644
--- a/frontend/src/components/dnf/Equipment/List/index.vue
+++ b/frontend/src/components/dnf/Equipment/List/index.vue
@@ -96,7 +96,7 @@ const equ = (id: string) => {
 
 const infoStyle = (part: string) => {
   let x = 10
-  let y = 5
+  let y = 10
   let index = infoStore.parts.findIndex((p) => p == part)
   if (index == 13) {
     index -= 7
diff --git a/frontend/src/components/dnf/Equipment/Oath/index.vue b/frontend/src/components/dnf/Equipment/Oath/index.vue
new file mode 100644
index 00000000..3eb50ed2
--- /dev/null
+++ b/frontend/src/components/dnf/Equipment/Oath/index.vue
@@ -0,0 +1,182 @@
+<template>
+  <div
+    class="pos-relative w-264px h-full"
+    :style="{ backgroundImage: withBg ? `url(${getImageURL('/common/oath/head.png')})` : 'none' }"
+  >
+    <template v-for="part in parts" :key="part">
+      <div
+        class="pos-absolute text-white/50 w-26px h-26px border-1px border-solid border-#7a7a7a/50 flex items-center justify-center"
+        :style="infoStyle(part)"
+        @click="choosePart(part)"
+      >
+        <template v-if="detail?.[part]?.id">
+          <EquipmentIcon :equipment="equ(detail[part].id, part)" useDisplayUrl />
+        </template>
+        <template v-else-if="!withBg">
+          {{ part != '11' ? '星蕴' : '誓约' }}
+        </template>
+      </div>
+      <!-- <div v-if="detail?.[part]?.fusion" class="pos-absolute" :style="fusionStyle(part)">
+        <EquipmentIcon :equipment="oaths(detail[part].fusion)" />
+      </div> -->
+    </template>
+    <!-- <img
+      v-if="props.avatar"
+      :src="props.avatar"
+      alt="Avatar"
+      class="pos-absolute w-70% left-1/2 translate-x--1/2 -bottom-10px"
+    /> -->
+  </div>
+</template>
+
+<script lang="ts" setup name="EquList">
+import { getImageURL } from '@/utils/images'
+import EquipmentIcon from '@/components/dnf/Equipment/Icon/index.vue'
+import { useInfoStore, type IConfigOath } from '@/stores'
+
+const props = defineProps({
+  withBg: {
+    type: Boolean,
+    default: true,
+  },
+  detail: {
+    type: Object as PropType<Record<string, IConfigOath>>,
+  },
+})
+const partModelValue = defineModel('part', { default: '0' })
+const infoStore = useInfoStore()
+
+const parts = computed(() => {
+  const parts = infoStore.oathParts
+  return parts
+})
+
+const equ = (id: string, part: string) => {
+  return infoStore.oaths.find((e) => e.id == id && e.oathPos == part)
+}
+
+const position = [
+  {
+    x: 30,
+    y: 12,
+  },
+  {
+    x: 30,
+    y: 46,
+  },
+  {
+    x: 30,
+    y: 80.5,
+  },
+  {
+    x: 30,
+    y: 114,
+  },
+  {
+    x: 206,
+    y: 12,
+  },
+  {
+    x: 206,
+    y: 46,
+  },
+  {
+    x: 206,
+    y: 80.5,
+  },
+  {
+    x: 206,
+    y: 114,
+  },
+  {
+    x: 74,
+    y: 131.5,
+  },
+  {
+    x: 118,
+    y: 145.5,
+  },
+  {
+    x: 162,
+    y: 131.5,
+  },
+  {
+    x: 118,
+    y: 111,
+  },
+]
+
+const positionSimple = [
+  {
+    x: 30,
+    y: 12,
+  },
+  {
+    x: 30,
+    y: 46,
+  },
+  {
+    x: 30,
+    y: 80.5,
+  },
+  {
+    x: 30,
+    y: 114,
+  },
+  {
+    x: 206,
+    y: 12,
+  },
+  {
+    x: 206,
+    y: 46,
+  },
+  {
+    x: 206,
+    y: 80.5,
+  },
+  {
+    x: 206,
+    y: 114,
+  },
+  {
+    x: 74,
+    y: 114,
+  },
+  {
+    x: 118,
+    y: 114,
+  },
+  {
+    x: 162,
+    y: 114,
+  },
+  {
+    x: 118,
+    y: 80.5,
+  },
+]
+
+const infoStyle = (part: string) => {
+  if (props.withBg)
+    return {
+      left: `${position[parseInt(part)].x}px`,
+      top: `${position[parseInt(part)].y}px`,
+      zIndex: 6,
+      // fontWeight: 900,
+    }
+  else
+    return {
+      left: `${positionSimple[parseInt(part)].x}px`,
+      top: `${positionSimple[parseInt(part)].y}px`,
+      zIndex: 6,
+      // fontWeight: 900,
+    }
+}
+
+const choosePart = (part: string) => {
+  partModelValue.value = part
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/src/pages/Character/Equipment/components/StoneOld.vue b/frontend/src/pages/Character/Equipment/components/StoneOld.vue
deleted file mode 100644
index dfc22836..00000000
--- a/frontend/src/pages/Character/Equipment/components/StoneOld.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-`<!-- 每排总计6+4+4,共计14个排列 -->
-
-<template>
-  <div class="flex flex-wrap gap-4px content-start" :style="{ width: `${rowCount * 32}px` }">
-    <template v-for="(equip, _) in equs" :key="_">
-      <EquipmentIcon
-        :inactive="configStore.config.equips[equip?.itemDetailType ?? '']?.fusion != equip?.id"
-        :equipment="equip"
-        @click="configStore.chooseEqu(equip, true)"
-      />
-    </template>
-  </div>
-</template>
-
-<script lang="ts" setup StoneUniversal>
-import type { IEquipment } from '@/api/info/type'
-import { useConfigStore, useInfoStore } from '@/stores'
-import { getImageURL } from '@/utils/images'
-import EquipmentIcon from '@/components/dnf/Equipment/Icon/index.vue'
-
-const props = defineProps<{
-  rowCount?: number
-}>()
-
-const rowCount = Math.max(props.rowCount ?? 0, 14)
-const infoStore = useInfoStore()
-const configStore = useConfigStore()
-
-const equs = computed(() => {
-  const items = infoStore.stones.filter((equip) => equip.categorize.includes('神界'))
-  const res: (IEquipment | undefined)[] = []
-  res.push(
-    ...items.filter((a) => a.rarity === '太初'),
-    ...Array(Math.max(0, rowCount - items.filter((a) => a.rarity === '太初').length)).fill(
-      undefined,
-    ),
-  )
-
-  ;['手镯', '项链', '戒指', '', '辅助装备', '魔法石', '耳环', ''].forEach((cat) => {
-    const equ: (IEquipment | undefined)[] = items.filter(
-      (a) => a.rarity === '史诗' && a.itemDetailType == cat,
-    )
-    res.push(...equ, ...Array(Math.max(0, 7 - equ.length)).fill(undefined))
-  })
-
-  // const categorize = Array.from(new Set(items.map((item) => item.categorize)))
-  // raritiyList.forEach((rarity) => {
-  //   categorize.forEach((cat) => {
-  //     const equ : (IEquipment | undefined)[]  = items.filter((a) => a.rarity === rarity && a.categorize === cat)
-  //     equ.splice(5,0,undefined)
-  //     res.push(
-  //       ...equ,
-  //       ...Array(Math.max(0,rowCount - equ.length)).fill(undefined),
-  //     )
-  //   })
-  // })
-  return res
-})
-</script>
-`
diff --git a/frontend/src/pages/Character/Equipment/components/Weapon.vue b/frontend/src/pages/Character/Equipment/components/Weapon.vue
index 2d163861..9b7d8227 100644
--- a/frontend/src/pages/Character/Equipment/components/Weapon.vue
+++ b/frontend/src/pages/Character/Equipment/components/Weapon.vue
@@ -15,7 +15,6 @@
 <script lang="ts" setup>
 import type { IEquipment } from '@/api/info/type'
 import { useConfigStore, useInfoStore } from '@/stores'
-import { getImageURL } from '@/utils/images'
 import EquipmentIcon from '@/components/dnf/Equipment/Icon/index.vue'
 
 const props = defineProps<{
diff --git a/frontend/src/pages/Character/EquipmentDictionary/Index.vue b/frontend/src/pages/Character/EquipmentDictionary/Index.vue
index 795c9c63..6eade263 100644
--- a/frontend/src/pages/Character/EquipmentDictionary/Index.vue
+++ b/frontend/src/pages/Character/EquipmentDictionary/Index.vue
@@ -126,7 +126,7 @@ 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, IOathInfo } from '@/api/info/type'
+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'
@@ -259,7 +259,7 @@ const equs = computed(() => {
     )
   } else {
     return formatOath(
-      total as unknown as IOathInfo[],
+      total as unknown as IEquipment[],
       suitList.value.find((a) => a.value == curSuit.value),
     )
   }
@@ -275,7 +275,7 @@ const isActive = computed(() => {
         return configStore.config.equips[item.itemDetailType].id == item.id
       }
     } else {
-      // return configStore.config.equips[item.itemDetailType].fusion == item.id
+      return configStore.config.oaths[item.oathPos].id == item.id
     }
   }
 })
@@ -288,8 +288,8 @@ const chooseEqu = (item?: IEquipment) => {
       ? 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
+      : configStore.config.oaths[item.oathPos]
+  target['id'] = isActive.value(item) ? '' : item.id
 }
 </script>
 
diff --git a/frontend/src/pages/Character/EquipmentDictionary/formatData.ts b/frontend/src/pages/Character/EquipmentDictionary/formatData.ts
index 51f76446..c8eaab0c 100644
--- a/frontend/src/pages/Character/EquipmentDictionary/formatData.ts
+++ b/frontend/src/pages/Character/EquipmentDictionary/formatData.ts
@@ -1,4 +1,4 @@
-import type { IEquipment, IOathInfo } from '@/api/info/type'
+import type { IEquipment } from '@/api/info/type'
 
 export const rowCount = 10
 
@@ -293,7 +293,7 @@ export const formatStone = (total: IEquipment[], curSuit?: string) => {
 }
 
 export const formatOath = (
-  total: IOathInfo[],
+  total: IEquipment[],
   curSuit?: { name: string; value: number; imageUrl: string },
 ) => {
   // oath
@@ -303,7 +303,7 @@ export const formatOath = (
   const primer = []
   const primerItem = total.filter((equip) => equip.itemDetailType == '星蕴石')
   for (let i = 0; i < 11; i++) {
-    const temp = primerItem.filter((a) => a.position.includes(i.toString()))
+    const temp = primerItem.filter((a) => a.oathPos == i.toString())
     primer.push(
       ...temp,
       ...Array(temp.length == 0 ? rowCount : rowCount - (temp.length % rowCount)).fill(undefined),
diff --git a/frontend/src/pages/Character/Forge/components/Avatars.vue b/frontend/src/pages/Character/Forge/components/Avatars.vue
index 10b7d4cf..cbf9ee43 100644
--- a/frontend/src/pages/Character/Forge/components/Avatars.vue
+++ b/frontend/src/pages/Character/Forge/components/Avatars.vue
@@ -5,14 +5,12 @@ import { useInfoStore, useConfigStore } from '@/stores'
 import ClothList from '@/components/dnf/Avatar/List/index.vue'
 export default defineComponent({
   name: 'Clothes',
-  setup(props) {
+  setup() {
     const configStore = useConfigStore()
     const part = ref('武器装扮')
 
     // const globalStore = useGlobalStore()
 
-    /** 是否有徽章 */
-    const has_socket = computed(() => ['武器装扮', '光环', '皮肤'].includes(part.value as string))
     const basicInfoStore = useInfoStore()
     const has_enchant = computed(() => {
       return !['头部', '帽子', '脸部', '胸部', '上衣', '腰带', '下装', '鞋'].includes(
@@ -26,9 +24,9 @@ export default defineComponent({
         .sort((a, b) => (b.fame ?? 0) - (a.fame ?? 0))
     })
 
-    const emblem_list = computed<IEnchantingInfo[] | undefined>(() => {
-      return basicInfoStore.emblems.filter((item) => item.position.includes(part.value))
-    })
+    // const emblem_list = computed<IEnchantingInfo[] | undefined>(() => {
+    //   return basicInfoStore.emblems.filter((item) => item.position.includes(part.value))
+    // })
 
     const currentInfo = function <T>(name: string, defaultValue?: T) {
       return computed<string | number>({
@@ -36,7 +34,7 @@ export default defineComponent({
           let key: 'avatar' | 'equips' = 'avatar'
           if (part.value == '宠物') key = 'equips'
           return (
-            (configStore.config[key]?.[part.value] as Record<string, any>)?.[name] ??
+            (configStore.config[key]?.[part.value] as Record<string, string | number>)?.[name] ??
             defaultValue ??
             0
           )
@@ -48,10 +46,13 @@ export default defineComponent({
           let key: 'avatar' | 'equips' = 'avatar'
           if (part.value == '宠物') key = 'equips'
           if (!configStore.config[key][part.value]) {
-            configStore.config[key][part.value] = key === 'avatar' ? { ...configStore.defaultAvatarConfig } : { ...configStore.defaultEqusConfig }
+            configStore.config[key][part.value] =
+              key === 'avatar'
+                ? { ...configStore.defaultAvatarConfig }
+                : { ...configStore.defaultEqusConfig }
           }
           if (configStore.config[key][part.value]) {
-            ;(configStore.config[key][part.value] as Record<string, any>)[name] = val
+            ;(configStore.config[key][part.value] as Record<string, string | number>)[name] = val
           }
         },
       })
@@ -60,11 +61,11 @@ export default defineComponent({
     // 附魔
     const enchant = currentInfo<string | number>('enchant')
 
-    // 镶嵌栏1
-    const emblem_0 = currentInfo<string | number>('emblem_0', 0)
+    // // 镶嵌栏1
+    // const emblem_0 = currentInfo<string | number>('emblem_0', 0)
 
-    // 镶嵌栏2
-    const emblem_1 = currentInfo<string | number>('emblem_1')
+    // // 镶嵌栏2
+    // const emblem_1 = currentInfo<string | number>('emblem_1')
 
     // 品级
     const id = currentInfo<string | number>('id')
@@ -76,9 +77,9 @@ export default defineComponent({
      * 同步徽章1到徽章2
      * @param val
      */
-    function changeSocket(val: number) {
-      emblem_1.value = val
-    }
+    // function changeSocket(val: number) {
+    //   emblem_1.value = val
+    // }
 
     return () => {
       return (
@@ -127,33 +128,6 @@ export default defineComponent({
                 </div>
               </>
             )}
-            {has_socket.value ? (
-              <div class="equ-profile-item">
-                <div class="row-name">徽章</div>
-                <calc-select
-                  onChange={changeSocket}
-                  v-model={emblem_0.value}
-                  class="flex-1 !h-20px"
-                >
-                  <calc-option value={0}>无</calc-option>
-                  {renderList(emblem_list.value ?? [], (item) => (
-                    <calc-option
-                      value={item.id}
-                    >{`${item.rarity}${item.categorize}徽章[${item.detail}]`}</calc-option>
-                  ))}
-                </calc-select>
-                <calc-select v-model={emblem_1.value} class="flex-1 !h-20px">
-                  <calc-option value={0}>无</calc-option>
-                  {renderList(emblem_list.value ?? [], (item) => (
-                    <calc-option
-                      value={item.id}
-                    >{`${item.rarity}${item.categorize}徽章[${item.detail}]`}</calc-option>
-                  ))}
-                </calc-select>
-              </div>
-            ) : (
-              <div></div>
-            )}
           </div>
         </>
       )
diff --git a/frontend/src/pages/Character/Forge/components/Emblems.vue b/frontend/src/pages/Character/Forge/components/Emblems.vue
new file mode 100644
index 00000000..b19a7ca3
--- /dev/null
+++ b/frontend/src/pages/Character/Forge/components/Emblems.vue
@@ -0,0 +1,5 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts" setup name="Emblems"></script>
diff --git a/frontend/src/pages/Character/Forge/components/Equipments.vue b/frontend/src/pages/Character/Forge/components/Equipments.vue
index 18f5e7ea..c33d47bc 100644
--- a/frontend/src/pages/Character/Forge/components/Equipments.vue
+++ b/frontend/src/pages/Character/Forge/components/Equipments.vue
@@ -6,7 +6,7 @@ import EquList from '@/components/dnf/Equipment/List/index.vue'
 import { getImageURL } from '@/utils/images'
 export default defineComponent({
   name: 'Equip',
-  setup(props) {
+  setup() {
     const configStore = useConfigStore()
     const part = ref('头肩')
     const can_upgrade = computed(() => {
@@ -15,14 +15,6 @@ export default defineComponent({
 
     // const globalStore = useGlobalStore()
 
-    /** 是否有徽章 */
-    const has_socket = computed(
-      () => !['称号', '宠物', '耳环', '武器'].includes(part.value as string),
-    )
-    /** 是否有右侧徽章 */
-    const has_emblem_1 = computed(
-      () => has_socket.value && !['辅助装备', '魔法石'].includes(part.value as string),
-    )
     /** 是否可以设置秘宝精度 */
     const can_set_secret = computed(() => {
       return ['武器', '辅助装备', '魔法石', '耳环'].includes(part.value as string)
@@ -40,9 +32,9 @@ export default defineComponent({
         .sort((a, b) => (b.fame ?? 0) - (a.fame ?? 0))
     })
 
-    const emblem_list = computed<IEnchantingInfo[] | undefined>(() => {
-      return basicInfoStore.emblems.filter((item) => item.position.includes(part.value))
-    })
+    // const emblem_list = computed<IEnchantingInfo[] | undefined>(() => {
+    //   return basicInfoStore.emblems.filter((item) => item.position.includes(part.value))
+    // })
 
     const global_change = ref(false)
 
@@ -50,6 +42,7 @@ export default defineComponent({
       return computed<string | number>({
         get() {
           return (
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (configStore.config.equips?.[part.value] as Record<string, any>)?.[name] ??
             defaultValue ??
             0
@@ -59,10 +52,10 @@ export default defineComponent({
           if (val == undefined && name !== 'weaponFusion') {
             return
           }
-          if (name == 'emblem_1' && !has_emblem_1.value) {
-            // configStore.setForge(part.value, name, 0)
-            return
-          }
+          // if (name == 'emblem_1' && !has_emblem_1.value) {
+          //   // configStore.setForge(part.value, name, 0)
+          //   return
+          // }
 
           let parts: string[] = []
 
@@ -75,16 +68,16 @@ export default defineComponent({
                 parts = enchant.position
               }
             }
-            if (['emblem_0', 'emblem_1'].includes(name)) {
-              const emblem = basicInfoStore?.emblems?.find(
-                (item) => item.id.toString() == val.toString(),
-              ) as IEnchantingInfo | undefined
-              if (emblem?.position) {
-                parts = emblem.position.filter(
-                  (item) => !['皮肤', '武器装扮', '光环'].includes(item),
-                )
-              }
-            }
+            // if (['emblem_0', 'emblem_1'].includes(name)) {
+            //   const emblem = basicInfoStore?.emblems?.find(
+            //     (item) => item.id.toString() == val.toString(),
+            //   ) as IEnchantingInfo | undefined
+            //   if (emblem?.position) {
+            //     parts = emblem.position.filter(
+            //       (item) => !['皮肤', '武器装扮', '光环'].includes(item),
+            //     )
+            //   }
+            // }
             if (['reinforceType', 'reinforce', 'adaptation'].includes(name)) {
               parts = basicInfoStore.parts.filter((e) => !['称号', '宠物'].includes(e))
             }
@@ -96,6 +89,7 @@ export default defineComponent({
               configStore.config.equips[part] = { ...configStore.defaultEqusConfig }
             }
             if (configStore.config.equips[part]) {
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
               ;(configStore.config.equips[part] as Record<string, any>)[name] = val
             }
           }
@@ -106,11 +100,11 @@ export default defineComponent({
     // 附魔
     const enchant = currentInfo<string | number>('enchant')
 
-    // 镶嵌栏1
-    const emblem_0 = currentInfo<string | number>('emblem_0', 0)
+    // // 镶嵌栏1
+    // const emblem_0 = currentInfo<string | number>('emblem_0', 0)
 
-    // 镶嵌栏2
-    const emblem_1 = currentInfo<string | number>('emblem_1')
+    // // 镶嵌栏2
+    // const emblem_1 = currentInfo<string | number>('emblem_1')
 
     // 增幅
     const reinforce_type = currentInfo<string | number>('reinforceType', 1)
@@ -133,11 +127,11 @@ export default defineComponent({
      * 同步徽章1到徽章2
      * @param val
      */
-    function changeSocket(val: number) {
-      if (has_emblem_1.value) {
-        emblem_1.value = val
-      }
-    }
+    // function changeSocket(val: number) {
+    //   if (has_emblem_1.value) {
+    //     emblem_1.value = val
+    //   }
+    // }
 
     const setWeaponFusion = (val: number) => {
       if (val == weaponFusion.value) {
@@ -240,37 +234,6 @@ export default defineComponent({
                     ))}
                   </calc-select>
                 </div>
-                {has_socket.value ? (
-                  <div class="equ-profile-item">
-                    <div class="row-name">徽章</div>
-                    <calc-select
-                      onChange={changeSocket}
-                      v-model={emblem_0.value}
-                      class="flex-1 !h-20px"
-                    >
-                      <calc-option value={''}>无</calc-option>
-                      {renderList(emblem_list.value ?? [], (item) => (
-                        <calc-option
-                          value={item.id}
-                          key={item.id}
-                        >{`${item.rarity}${item.categorize}徽章[${item.detail}]`}</calc-option>
-                      ))}
-                    </calc-select>
-                    {has_emblem_1.value && (
-                      <calc-select v-model={emblem_1.value} class="flex-1 !h-20px">
-                        <calc-option value={''}>无</calc-option>
-                        {renderList(emblem_list.value ?? [], (item) => (
-                          <calc-option
-                            value={item.id}
-                            key={item.id}
-                          >{`${item.rarity}${item.categorize}徽章[${item.detail}]`}</calc-option>
-                        ))}
-                      </calc-select>
-                    )}
-                  </div>
-                ) : (
-                  <div></div>
-                )}
 
                 {can_upgrade.value ? (
                   <div class="equ-profile-item">
diff --git a/frontend/src/pages/Character/Forge/components/Jades.vue b/frontend/src/pages/Character/Forge/components/Jades.vue
index eff4a795..952f63b1 100644
--- a/frontend/src/pages/Character/Forge/components/Jades.vue
+++ b/frontend/src/pages/Character/Forge/components/Jades.vue
@@ -4,7 +4,7 @@
       <div class="flex gap-2 mt-5px">
         <calc-select class="flex-1 !h-20px" v-model="configStore.config.jades[key].id">
           <calc-option :value="0">无</calc-option>
-          <calc-option v-for="(item, index) in infoStore.jades" :key="item.id" :value="item.id">
+          <calc-option v-for="item in infoStore.jades" :key="item.id" :value="item.id">
             {{ item.name }}
           </calc-option>
         </calc-select>
@@ -17,7 +17,7 @@
         ></calc-slider> -->
         <calc-select class="flex-1 !h-20px" v-model="configStore.config.jades[key].value">
           <calc-option
-            v-for="(item, index) in valueList(configStore.config.jades[key].id)"
+            v-for="item in valueList(configStore.config.jades[key].id)"
             :key="item.id"
             :value="item.id"
           >
@@ -38,26 +38,25 @@ import { getFloat } from '@/utils'
 const configStore = useConfigStore()
 const infoStore = useInfoStore()
 
-const currentJade = computed(() => {
-  return function (id: number = -1) {
-    if (id == -1) {
-      return undefined
-    } else {
-      const res = []
-      const cur = infoStore.jades?.find((e) => e.id == id) as IJade
-      return cur
-    }
-  }
-})
+// const currentJade = computed(() => {
+//   return function (id: number = -1) {
+//     if (id == -1) {
+//       return undefined
+//     } else {
+//       const cur = infoStore.jades?.find((e) => e.id == id) as IJade
+//       return cur
+//     }
+//   }
+// })
 
-const formatValue = (id: number) => {
-  return (value: number) => {
-    if (currentJade.value(id)?.unit.includes('等级')) {
-      return `$等级 +${value}`
-    }
-    return `${getFloat(value, 1)}${currentJade.value(id)?.unit}`
-  }
-}
+// const formatValue = (id: number) => {
+//   return (value: number) => {
+//     if (currentJade.value(id)?.unit.includes('等级')) {
+//       return `$等级 +${value}`
+//     }
+//     return `${getFloat(value, 1)}${currentJade.value(id)?.unit}`
+//   }
+// }
 
 const valueList = computed(() => {
   return function (id: number = -1) {
diff --git a/frontend/src/pages/Character/Forge/components/Oaths.vue b/frontend/src/pages/Character/Forge/components/Oaths.vue
new file mode 100644
index 00000000..5aada1ce
--- /dev/null
+++ b/frontend/src/pages/Character/Forge/components/Oaths.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="h-150px flex justify-center items-center">
+    <Oath v-model:part="part" :withBg="false" />
+  </div>
+  <div class="flex flex-wrap equ-profile">
+    <div class="equ-profile-item">
+      <div class="mr-10px row-name">当前部位</div>
+      <span>{{ part == '11' ? '誓约' : `星蕴石-${parseInt(part) + 1}` }}</span>
+      <calc-checkbox
+        style="margin-left: auto"
+        v-model="global_change"
+        label="全局修改"
+      ></calc-checkbox>
+    </div>
+    <div class="equ-profile-item">
+      <div class="row-name">调适</div>
+      <calc-select v-model="adaptation" class="flex-1 !h-20px">
+        <template v-for="i in Array.from({ length: 4 }, (_, i) => i)" :key="i">
+          <calc-option :value="i">{{ i }}</calc-option>
+        </template>
+      </calc-select>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="Oaths">
+import Oath from '@/components/dnf/Equipment/Oath/index.vue'
+import { useConfigStore, useInfoStore } from '@/stores'
+
+const part = ref('0')
+
+const global_change = ref(false)
+
+const configStore = useConfigStore()
+
+const infoStore = useInfoStore()
+
+const currentInfo = function <T>(name: string, defaultValue?: T) {
+  return computed<string | number>({
+    get() {
+      return (
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (configStore.config.oaths?.[part.value] as Record<string, any>)?.[name] ?? defaultValue ?? 0
+      )
+    },
+    set(val) {
+      if (val == undefined) {
+        return
+      }
+      // if (name == 'emblem_1' && !has_emblem_1.value) {
+      //   // configStore.setForge(part.value, name, 0)
+      //   return
+      // }
+
+      let parts: string[] = []
+
+      if (global_change.value) {
+        parts = infoStore.oathParts
+      } else {
+        parts = [part.value]
+      }
+      for (const part of parts) {
+        if (!configStore.config.oaths[part]) {
+          configStore.config.oaths[part] = { ...configStore.defaultOathConfig }
+        }
+        if (configStore.config.oaths[part]) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ;(configStore.config.oaths[part] as Record<string, any>)[name] = val
+        }
+      }
+    },
+  })
+}
+
+// 调适
+const adaptation = currentInfo<string | number>('adaptation')
+</script>
diff --git a/frontend/src/pages/Character/Forge/components/Sundry.vue b/frontend/src/pages/Character/Forge/components/Sundry.vue
index 938643ad..161fdfb7 100644
--- a/frontend/src/pages/Character/Forge/components/Sundry.vue
+++ b/frontend/src/pages/Character/Forge/components/Sundry.vue
@@ -12,7 +12,7 @@
         class="flex-1 !h-20px"
       />
     </div>
-    <div class="equ-profile-item">
+    <!-- <div class="equ-profile-item">
       <div class="row-name">勋章</div>
       <calc-select
         v-for="(key, index) in ['medal_rarity', 'medal_reinforce']"
@@ -37,7 +37,7 @@
           {{ item.name }}
         </calc-option>
       </calc-select>
-    </div>
+    </div> -->
     <div class="equ-profile-item">
       <div class="row-name">冒险团</div>
       <calc-slider
diff --git a/frontend/src/pages/Character/Forge/index.vue b/frontend/src/pages/Character/Forge/index.vue
index c3c49b79..64e33f4c 100644
--- a/frontend/src/pages/Character/Forge/index.vue
+++ b/frontend/src/pages/Character/Forge/index.vue
@@ -2,11 +2,15 @@
   <div class="w-420px overflow-auto">
     <calc-collapse class="w-100%" title="装备/时装打造(点击部位切换)">
       <calc-tabs v-model="partTab" class="!mb-2">
-        <calc-tab :value="0">装备栏</calc-tab>
-        <calc-tab :value="1">时装栏</calc-tab>
+        <calc-tab :value="0">装备</calc-tab>
+        <calc-tab :value="2">誓约</calc-tab>
+        <calc-tab :value="1">时装</calc-tab>
+        <calc-tab :value="3">徽章</calc-tab>
       </calc-tabs>
       <equipment v-if="partTab === 0"></equipment>
       <clothes v-if="partTab === 1"></clothes>
+      <oaths v-if="partTab === 2"></oaths>
+      <emblems v-if="partTab === 3"></emblems>
     </calc-collapse>
     <calc-collapse class="w-100%" title="辟邪玉">
       <jade></jade>
@@ -19,6 +23,8 @@
 <script setup lang="ts">
 import equipment from './components/Equipments.vue'
 import clothes from './components/Avatars.vue'
+import emblems from './components/Emblems.vue'
+import oaths from './components/Oaths.vue'
 import jade from './components/Jades.vue'
 import sundry from './components/Sundry.vue'
 const partTab = ref(0)
diff --git a/frontend/src/pages/Character/Result/Index.vue b/frontend/src/pages/Character/Result/Index.vue
index afba9dcb..32b74af9 100644
--- a/frontend/src/pages/Character/Result/Index.vue
+++ b/frontend/src/pages/Character/Result/Index.vue
@@ -5,11 +5,30 @@
         <calc-button class="flex-1" @click="setStandard">设为基准</calc-button>
         <calc-button class="flex-1" @click="clearStandard">清空基准</calc-button>
       </div>
+      <div class="flex bg-#101012 h-40px text-#6C5E4A font-bold z-10">
+        <div
+          class="flex-1 text-15px flex items-center justify-center"
+          @click="chooseCategory('equ')"
+          :class="{ active: type === 'equ' }"
+        >
+          装备
+        </div>
+        <div class="w-auto text-18px flex items-center justify-center !font-normal">|</div>
+        <div
+          class="flex-1 text-15px flex items-center justify-center"
+          @click="chooseCategory('oath')"
+          :class="{ active: type === 'oath' }"
+        >
+          誓约
+        </div>
+      </div>
       <Info
         :suits="configStore.result.state.suits"
         :info="configStore.result.state.info"
         :equs="configStore.config.equips"
         :avatar="configStore.config.avatarLink"
+        :oaths="configStore.config.oaths"
+        :display="type"
       ></Info>
     </div>
     <Skill
@@ -31,10 +50,10 @@ import { useConfigStore, useInfoStore } from '@/stores'
 import Info from './components/Info.vue'
 import Skill from './components/Skill.vue'
 import BufferSkill from './components/BufferSkill.vue'
-import type { IResultSkill } from '@/api/calc/type'
 
 const configStore = useConfigStore()
 const infoStore = useInfoStore()
+const type = ref<'equ' | 'oath'>('equ')
 
 const setStandard = () => {
   if (!configStore?.result?.state?.uuid) return
@@ -44,6 +63,45 @@ const setStandard = () => {
 const clearStandard = () => {
   infoStore.setStandard(undefined)
 }
+
+const chooseCategory = (cat: 'equ' | 'oath') => {
+  type.value = cat
+  console.log(type.value)
+}
 </script>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped>
+.active {
+  color: #ccc088;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 60px;
+    height: 15px;
+    opacity: 0.35;
+    background: #bf8d20;
+    filter: blur(7px);
+    z-index: 2;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    background: url('@/assets/img/active.png') no-repeat;
+    width: 148px;
+    height: 16px;
+    bottom: 2px;
+    transform: translate(0, 50%);
+    z-index: 4;
+  }
+}
+
+.item-head {
+  background: linear-gradient(#2b2817, #171407);
+  border-top: 1px solid #423d2c;
+  border-bottom: 1px solid #211d15;
+  text-align: center;
+}
+</style>
diff --git a/frontend/src/pages/Character/Result/components/Info.vue b/frontend/src/pages/Character/Result/components/Info.vue
index 7ccf1155..75534fcd 100644
--- a/frontend/src/pages/Character/Result/components/Info.vue
+++ b/frontend/src/pages/Character/Result/components/Info.vue
@@ -5,7 +5,9 @@
         :detail="props.equs"
         :with-sub-weapon="(infoStore.infos?.subweapons?.length ?? 0) > 0"
         :avatar="props.avatar"
+        v-show="display == 'equ'"
       ></EquList>
+      <Oath :detail="props.oaths" v-show="display == 'oath'"></Oath>
     </div>
     <div class="flex flex-wrap border-y-1px my-1px border-y-solid border-#FFFF/10 gap-1% px-1%">
       <template v-for="info in props.info" :key="info.id">
@@ -37,37 +39,71 @@
     <div class="border-y-1px border-y-solid my-1px border-#FFFF/10">
       <div class="flex">
         <div class="flex-1 flex items-center justify-center bg-#221A08 text-#9A7E4A">
-          穿戴装备信息
+          穿戴{{ display == 'equ' ? '装备' : '誓约' }}信息
         </div>
       </div>
-      <template v-for="part in partOrder" :key="part">
-        <div class="flex p-2px partItem gap-5px">
-          <img
-            :src="getImageURL(`/equipment/part/${part}.png`)"
-            alt=""
-            class="w-20px h-20px object-contain"
-          />
-          <div class="flex items-center justify-center" v-if="adaptation(part) > 0">
+      <template v-if="display == 'equ'">
+        <template v-for="part in partOrder" :key="part">
+          <div class="flex p-2px partItem gap-5px">
             <img
-              :src="getImageURL(`/equipment/adaptation/${adaptation(part)}.png`)"
+              :src="getImageURL(`/equipment/part/${part}.png`)"
               alt=""
-              class="w-11px h-10px object-contain"
+              class="w-20px h-20px object-contain"
             />
+            <div class="flex items-center justify-center" v-if="adaptation(part) > 0">
+              <img
+                :src="getImageURL(`/equipment/adaptation/${adaptation(part)}.png`)"
+                alt=""
+                class="w-11px h-10px object-contain"
+              />
+            </div>
+            <div
+              class="flex items-center"
+              v-if="props.equs[part]?.reinforce > 0"
+              :class="props.equs[part]?.reinforceType == 1 ? 'artifact' : 'advanced'"
+            >
+              +{{ props.equs[part]?.reinforce }}
+            </div>
+            <div class="rare" v-if="props.equs[part]?.refine > 0">
+              ({{ props.equs[part]?.refine }})
+            </div>
+            <div :class="rarityClass(equ(props.equs?.[part]?.id)?.rarity ?? '')">
+              {{ equ(props.equs?.[part]?.id)?.name }}
+            </div>
           </div>
-          <div
-            class="flex items-center"
-            v-if="props.equs[part]?.reinforce > 0"
-            :class="props.equs[part]?.reinforceType == 1 ? 'artifact' : 'advanced'"
-          >
-            +{{ props.equs[part]?.reinforce }}
+        </template>
+      </template>
+      <template v-else>
+        <template v-for="part in oathOrder" :key="part">
+          <div class="flex p-2px partItem gap-5px">
+            <img
+              :src="getImageURL(`/equipment/part/${part == '11' ? '誓约' : '星蕴石'}.png`)"
+              alt=""
+              class="w-20px h-20px object-contain"
+            />
+            <div class="flex items-center justify-center" v-if="adaptation(part) > 0">
+              <img
+                :src="getImageURL(`/equipment/adaptation/${adaptation(part)}.png`)"
+                alt=""
+                class="w-11px h-10px object-contain"
+              />
+            </div>
+            <!-- <div
+              class="flex items-center"
+              v-if="props.equs[part]?.reinforce > 0"
+              :class="props.equs[part]?.reinforceType == 1 ? 'artifact' : 'advanced'"
+            >
+              +{{ props.equs[part]?.reinforce }}
+            </div> -->
+            <!-- <div class="rare" v-if="props.equs[part]?.refine > 0">
+              ({{ props.equs[part]?.refine }})
+            </div> -->
+            {{ equ(props.equs?.[part]?.id) }}
+            <div :class="rarityClass(equ(props.oaths?.[part]?.id)?.rarity ?? '')">
+              {{ equ(props.oaths?.[part]?.id)?.name }}
+            </div>
           </div>
-          <div class="rare" v-if="props.equs[part]?.refine > 0">
-            ({{ props.equs[part]?.refine }})
-          </div>
-          <div :class="rarityClass(equ(props.equs?.[part]?.id)?.rarity ?? '')">
-            {{ equ(props.equs?.[part]?.id)?.name }}
-          </div>
-        </div>
+        </template>
       </template>
     </div>
     <div class="h-40px w-full"></div>
@@ -79,14 +115,17 @@ import { getImageURL } from '@/utils/images'
 import { rarityClass } from '@/utils'
 import type { IResultUserInfo, IResultSuit } from '@/api/calc/type'
 import EquList from '@/components/dnf/Equipment/List/index.vue'
-import type { IConfigEquip } from '@/stores/config'
+import Oath from '@/components/dnf/Equipment/Oath/index.vue'
+import type { IConfigEquip, IConfigOath } from '@/stores/config'
 import { useInfoStore } from '@/stores'
 
 const props = defineProps<{
   info: IResultUserInfo[]
   suits: IResultSuit[]
   equs: Record<string, IConfigEquip>
+  oaths: Record<string, IConfigOath>
   avatar: string
+  display: 'oath' | 'equ'
 }>()
 
 const partOrder = [
@@ -103,9 +142,15 @@ const partOrder = [
   '魔法石',
   '耳环',
 ]
+
+const oathOrder = Array.from({ length: 12 }, (_, i) => (11 - i).toString())
 const infoStore = useInfoStore()
 
 const equ = (id: string) => {
+  if (props.display == 'oath') {
+    console.log(props.oaths, id)
+    return infoStore.oaths.find((e) => e.id == id)
+  }
   return infoStore.equips.find((e) => e.id == id)
 }
 
diff --git a/frontend/src/pages/IndexView.vue b/frontend/src/pages/IndexView.vue
index 96e14d2f..d1c41116 100644
--- a/frontend/src/pages/IndexView.vue
+++ b/frontend/src/pages/IndexView.vue
@@ -9,8 +9,24 @@
 
 <script lang="ts" name="index" setup>
 const zoom = computed(() => {
-  const DPI = Math.max(0.85,Math.min(/macintosh|mac os x/i.test(navigator.userAgent.toLowerCase()) ? 1 : window.devicePixelRatio || 1,2)) * 0.95
-  return Math.max(1,/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent || navigator.vendor || (window as any).opera) ? 1 :(window.screen.width / 1800 / DPI))
+  const DPI =
+    Math.max(
+      0.85,
+      Math.min(
+        /macintosh|mac os x/i.test(navigator.userAgent.toLowerCase())
+          ? 1
+          : window.devicePixelRatio || 1,
+        2,
+      ),
+    ) * 0.95
+  return Math.max(
+    1,
+    /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
+      navigator.userAgent || navigator.vendor || (window as any).opera,
+    )
+      ? 1
+      : window.screen.width / 1800 / DPI,
+  )
 })
 import { useDialog } from '@/components/hooks/dialog'
 
diff --git a/frontend/src/stores/config.ts b/frontend/src/stores/config.ts
index 53a329ad..d90ac586 100644
--- a/frontend/src/stores/config.ts
+++ b/frontend/src/stores/config.ts
@@ -31,9 +31,15 @@ export interface IConfigEquip {
   weaponFusion: number
 }
 
+export interface IConfigOath {
+  id: string
+  adaptation: number
+}
+
 export interface IConfig {
-  skills: Record<string, { lv: number ,vp:number, up: number}>
+  skills: Record<string, { lv: number; vp: number; up: number }>
   equips: Record<string, IConfigEquip>
+  oaths: Record<string, IConfigOath>
   jades: Record<
     string,
     {
@@ -84,17 +90,23 @@ const defaultAvatarConfig = {
   option: '0',
 }
 
+const defaultOathConfig = {
+  id: '',
+  adaptation: 0,
+}
+
 export const useConfigStore = defineStore('configStore', () => {
   const config = ref<IConfig>({
     skills: {},
     equips: {},
+    oaths: {},
     jades: {},
     avatar: {},
     sundry: {},
     bindAwake: 50,
     DSB: false,
     BUFF: false,
-    options:{},
+    options: {},
     avatarLink: '',
   })
 
@@ -114,19 +126,21 @@ export const useConfigStore = defineStore('configStore', () => {
         skillCountConfig.value = JSON.parse(localSkillConfig)
       }
     }
-    if (!config.value)
+    if (!config.value) {
       config.value = {
         skills: {},
         equips: {},
+        oaths: {},
         jades: {},
         avatar: {},
         sundry: {},
         bindAwake: 50,
         DSB: false,
         BUFF: false,
-        options:{},
+        options: {},
         avatarLink: '',
       }
+    }
     if (!config.value?.equips) config.value.equips = {}
     if (!config.value?.skills) config.value.skills = {}
     if (!config.value?.jades) config.value.jades = {}
@@ -134,6 +148,8 @@ export const useConfigStore = defineStore('configStore', () => {
     if (!config.value?.sundry) config.value.sundry = {}
     if (!config.value?.bindAwake) config.value.bindAwake = 50
     if (!config.value?.options) config.value.options = {}
+    if (!config.value?.oaths) config.value.oaths = {}
+    console.log(config.value.oaths)
 
     const part = [...infoStore.parts, '宠物', '副武器'].filter(
       (a) => !config.value?.equips.hasOwnProperty(a),
@@ -156,8 +172,15 @@ export const useConfigStore = defineStore('configStore', () => {
       config.value && (config.value.avatar[p] = { ...defaultAvatarConfig })
     })
 
+    infoStore.oathParts.forEach((p) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      config.value &&
+        !config.value?.oaths.hasOwnProperty(p) &&
+        (config.value.oaths[p.toString()] = { ...defaultOathConfig })
+    })
+
     infoStore.options.forEach((option) => {
-      if(Object.keys(config.value.options).includes(option.id.toString())) return
+      if (Object.keys(config.value.options).includes(option.id.toString())) return
       config.value.options[option.id.toString()] = 0
     })
 
@@ -238,5 +261,6 @@ export const useConfigStore = defineStore('configStore', () => {
     skillCountConfig,
     defaultEqusConfig,
     defaultAvatarConfig,
+    defaultOathConfig,
   }
 })
diff --git a/frontend/src/stores/info.ts b/frontend/src/stores/info.ts
index ec631a1b..48de1c73 100644
--- a/frontend/src/stores/info.ts
+++ b/frontend/src/stores/info.ts
@@ -1,5 +1,5 @@
 import api from '@/api'
-import type { ICharacterInfo } from '@/api/info/type'
+import type { ICharacterInfo, IEquipment } from '@/api/info/type'
 import { defineStore } from 'pinia'
 import { useConfigStore } from './config'
 import type { IResult, IResultSkill, IResultSkillCount } from '@/api/calc/type'
@@ -28,7 +28,22 @@ export const useInfoStore = defineStore('infoStore', () => {
 
   const options = computed(() => infos.value?.options ?? [])
 
-  const oaths = computed(() => infos.value?.oaths ?? [])
+  const oaths = computed(() => {
+    const origin = infos.value?.oaths ?? []
+    const result: IEquipment[] = []
+    origin.forEach((o) => {
+      o.position.forEach((p, i) => {
+        result.push({
+          ...o,
+          oathPos: p,
+          displayUrl: o.wearUrl?.[parseInt(p)]
+            ? `/equipment/icon/oathprimer/primer_equip/${o.wearUrl?.[parseInt(p)]}`
+            : o.imageUrl,
+        })
+      })
+    })
+    return result
+  })
 
   const standardUUID = ref<string>()
 
@@ -93,6 +108,10 @@ export const useInfoStore = defineStore('infoStore', () => {
     '宠物装备-蓝',
   ]
 
+  const oathParts = Array.from({ length: 12 }, (_, i) => i.toString())
+
+  const emblemParts = ['彩色', '红色', '蓝色', '绿色', '黄色']
+
   const createCharacter = async (alter: string, equVersion?: string) => {
     const time = new Date().getTime()
     alter_token.value = btoa(JSON.stringify({ alter, equVersion, time }))
@@ -112,6 +131,8 @@ export const useInfoStore = defineStore('infoStore', () => {
     parts,
     oaths,
     avatarParts,
+    oathParts,
+    emblemParts,
     avatars,
     jades,
     setStandard,
diff --git a/frontend/src/utils/position.ts b/frontend/src/utils/position.ts
new file mode 100644
index 00000000..654909e5
--- /dev/null
+++ b/frontend/src/utils/position.ts
@@ -0,0 +1,32 @@
+export function resolveTeleportTarget(target?: string | Element | null) {
+  if (typeof window === 'undefined') {
+    return null
+  }
+
+  if (typeof target === 'string') {
+    return document.querySelector(target)
+  }
+
+  return target ?? document.body
+}
+
+export function getElementZoom(target?: string | Element | null) {
+  if (typeof window === 'undefined') {
+    return 1
+  }
+
+  let zoom = 1
+  let current = resolveTeleportTarget(target) as HTMLElement | null
+
+  while (current) {
+    const currentZoom = Number.parseFloat(window.getComputedStyle(current).zoom)
+
+    if (Number.isFinite(currentZoom) && currentZoom > 0) {
+      zoom *= currentZoom
+    }
+
+    current = current.parentElement
+  }
+
+  return zoom || 1
+}
diff --git a/images b/images
index 2dc49b5e..965adcfe 160000
--- a/images
+++ b/images
@@ -1 +1 @@
-Subproject commit 2dc49b5e8f2437cfea2f85e14ee3bca7845ff03e
+Subproject commit 965adcfe7ef6e9e705ad02332d99f546837a6ece