diff --git a/backend/core/basic/character.py b/backend/core/basic/character.py
index 3faa438f..82f47aee 100644
--- a/backend/core/basic/character.py
+++ b/backend/core/basic/character.py
@@ -543,6 +543,7 @@ class Character(CharacterProperty):
         return res
 
     def calc_init(self, setInfo: dict[str, dict]):
+        self.equ_options = setInfo.get('options', {})
         # 打造信息导入
         self.SetDetail(setInfo)
         # 技能等级设置
diff --git a/backend/core/equipment/version_0/__init__.py b/backend/core/equipment/version_0/__init__.py
index a53f752f..704b6e4e 100644
--- a/backend/core/equipment/version_0/__init__.py
+++ b/backend/core/equipment/version_0/__init__.py
@@ -10,7 +10,7 @@ from . import suit
 from .register import execture
 
 options = [
-    {'id': 1, 'name': '龙战八荒,', 'options': ['BUFF OFF', 'BUFF ON', '期望']},
+    {'id': 1, 'name': '龙战八荒', 'options': ['BUFF OFF', 'BUFF ON', '期望']},
     {'id': 2, 'name': '混沌净化', 'options': ['净化', '堕落']},
     {'id': 3, 'name': '群猎美学', 'options': ['单刷', '组队']},
     {'id': 4, 'name': '魔攻核', 'options': ['普通', '追击']},
diff --git a/frontend/package.json b/frontend/package.json
index e8cf0b52..806fa0ef 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,8 +15,6 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@iconify/vue": "^4.3.0",
-    "@radix-ui/colors": "^3.0.0",
     "@vueuse/core": "^12.8.2",
     "axios": "^1.8.2",
     "hoci": "^0.6.0",
diff --git a/frontend/src/api/calc/index.ts b/frontend/src/api/calc/index.ts
index 5b4f8fe9..622a3663 100644
--- a/frontend/src/api/calc/index.ts
+++ b/frontend/src/api/calc/index.ts
@@ -6,7 +6,7 @@ export default defineRequest((request) => {
     async calc(config: IConfig) {
       const res = await request.post<IResult>('/calc', config)
       return res.data
-    }
+    },
   }
 })
 // Compare this snippet from frontend/src/api/common/index.ts:
diff --git a/frontend/src/api/calc/type.ts b/frontend/src/api/calc/type.ts
index 8dc88a34..602c514f 100644
--- a/frontend/src/api/calc/type.ts
+++ b/frontend/src/api/calc/type.ts
@@ -1,12 +1,11 @@
 export interface IResult {
   uuid: string
   skills: IResultSkill[]
-  info:IResultUserInfo[]
-  suits:IResultSuit[]
-  buffer:boolean
+  info: IResultUserInfo[]
+  suits: IResultSuit[]
+  buffer: boolean
 }
 
-
 export interface IResultSkill {
   name: string
   icon: string
@@ -16,24 +15,24 @@ export interface IResultSkill {
   cd: number
   damage: number
   mode: string
-  buff:number[]
+  buff: number[]
   learnLv: number
 }
 
 export interface IResultUserInfo {
-  name:string
-  value:string|number
+  name: string
+  value: string | number
 }
 
-export interface IResultSuit{
-  id:number
-  count:number
-  imageUrl:string
-  level:number
-  name:string
-  point:number
-  rarity:string
-  value:string
+export interface IResultSuit {
+  id: number
+  count: number
+  imageUrl: string
+  level: number
+  name: string
+  point: number
+  rarity: string
+  value: string
 }
 
 export interface IResultSkillCount {
diff --git a/frontend/src/api/common.ts b/frontend/src/api/common.ts
index 9032824b..26b2cdd5 100644
--- a/frontend/src/api/common.ts
+++ b/frontend/src/api/common.ts
@@ -27,7 +27,7 @@ if (import.meta.env.MODE == 'web' || import.meta.env.MODE == 'show') {
   baseURL = 'https://api.dnftools.com/'
 }
 
-if(import.meta.env.MODE == 'test') {
+if (import.meta.env.MODE == 'test') {
   baseURL = 'https://testapi.dnftools.com/'
 }
 
diff --git a/frontend/src/api/info/type.ts b/frontend/src/api/info/type.ts
index e15a81e1..8dbf491e 100644
--- a/frontend/src/api/info/type.ts
+++ b/frontend/src/api/info/type.ts
@@ -35,16 +35,17 @@ export interface ICharacterInfo {
   skills: ISkill[]
   suits: ISuit[]
   avatar: Record<string, IAvatarInfo[]>
-  jades:IJade[]
-  sundry:Record<string, ISundry>
+  jades: IJade[]
+  sundry: Record<string, ISundry>
+  options: { id: number; name: string; options: string[] }[]
 }
 
 export interface ISundry {
-  id:number,
-  options:{
-    name:string,
-    value:number
-  }[],
+  id: number
+  options: {
+    name: string
+    value: number
+  }[]
 }
 
 export interface IEquipment {
@@ -56,19 +57,19 @@ export interface IEquipment {
   categorize: string
   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[]
+  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
+  bufferDetail: string
 }
 
 export interface ISkill {
@@ -77,7 +78,7 @@ export interface ISkill {
   id: number
   learnLv: number
   position: number
-  line:number
+  line: number
   type: string
   maxLearnLv: number
   maxLv: number
@@ -90,12 +91,12 @@ export interface ISuit {
   imageUrl: string
   suitId: number
   suitName: string
-  point:number
+  point: number
   rarity: string
   level: number
   SkillAttack: number
-  Buffer:number
-  value:string
+  Buffer: number
+  value: string
 }
 
 export interface IEnchantingInfo {
@@ -118,10 +119,10 @@ export interface IAvatarInfo {
 }
 
 export interface IJade {
-  name:string
-  id:number
-  max:number
-  min:number
-  pre:number
-  unit:string
+  name: string
+  id: number
+  max: number
+  min: number
+  pre: number
+  unit: string
 }
diff --git a/frontend/src/components/base/README b/frontend/src/components/base/README
index 240cca2d..1bb61d6c 100644
--- a/frontend/src/components/base/README
+++ b/frontend/src/components/base/README
@@ -1 +1 @@
-无样式的基础组件
\ No newline at end of file
+无样式的基础组件
diff --git a/frontend/src/components/base/index.ts b/frontend/src/components/base/index.ts
index a6ff8e66..a2e05bfe 100644
--- a/frontend/src/components/base/index.ts
+++ b/frontend/src/components/base/index.ts
@@ -1 +1 @@
-export { default as NTooltip } from "./tooltip"
+export { default as NTooltip } from './tooltip'
diff --git a/frontend/src/components/base/tooltip.tsx b/frontend/src/components/base/tooltip.tsx
index 97a969a5..00761ccc 100644
--- a/frontend/src/components/base/tooltip.tsx
+++ b/frontend/src/components/base/tooltip.tsx
@@ -1,42 +1,52 @@
-import { syncRefs, useVModel } from "@vueuse/core"
-import type { CSSProperties, PropType } from "vue";
-import { Teleport, Transition, computed, defineComponent, nextTick, reactive, ref, renderSlot, watch } from "vue"
-import { provideShow } from "../hooks/show"
+import { syncRefs, useVModel } from '@vueuse/core'
+import type { CSSProperties, PropType } from 'vue'
+import {
+  Teleport,
+  Transition,
+  computed,
+  defineComponent,
+  nextTick,
+  reactive,
+  ref,
+  renderSlot,
+  watch,
+} from 'vue'
+import { provideShow } from '../hooks/show'
 
 export const tooltipProps = {
   popClass: {
-    type: String
+    type: String,
   },
   position: {
-    type: String as PropType<"bottom" | "top" | "left" | "right" | "auto">,
-    default: () => "auto"
+    type: String as PropType<'bottom' | 'top' | 'left' | 'right' | 'auto'>,
+    default: () => 'auto',
   },
   offset: {
     type: Number,
-    default: () => 8
+    default: () => 8,
   },
   lazy: {
     type: Boolean,
-    default: () => false
+    default: () => false,
   },
   visible: {
     type: Boolean,
-    default: () => false
+    default: () => false,
   },
   disabled: {
     type: Boolean,
-    default: () => false
-  }
+    default: () => false,
+  },
 }
 
 export default defineComponent({
-  name: "ITooltip",
+  name: 'ITooltip',
   props: tooltipProps,
-  emits: ["change", "update:visible"],
+  emits: ['change', 'update:visible'],
   setup(props, { slots, emit }) {
     const isOpen = ref(props.visible)
 
-    syncRefs(useVModel(props, "visible"), isOpen)
+    syncRefs(useVModel(props, 'visible'), isOpen)
 
     provideShow(isOpen)
 
@@ -47,13 +57,19 @@ export default defineComponent({
 
     const dropdownPosition = reactive({ x: 0, y: 0 })
 
-    const isShow = computed(() => isOpen.value && triggerRef.value && popupRef.value && dropdownPosition.x + dropdownPosition.y > 0)
+    const isShow = computed(
+      () =>
+        isOpen.value &&
+        triggerRef.value &&
+        popupRef.value &&
+        dropdownPosition.x + dropdownPosition.y > 0,
+    )
 
     const dropdownStyle = computed<CSSProperties>(() => {
       return {
         left: `${dropdownPosition.x}px`,
         top: `${dropdownPosition.y}px`,
-        visibility: isShow.value ? "visible" : "hidden"
+        visibility: isShow.value ? 'visible' : 'hidden',
       }
     })
 
@@ -66,9 +82,9 @@ export default defineComponent({
       timer = setTimeout(
         () => {
           isOpen.value = true
-          emit("change", true)
+          emit('change', true)
         },
-        props.lazy ? 800 : 100
+        props.lazy ? 800 : 100,
       )
     }
 
@@ -78,7 +94,7 @@ export default defineComponent({
       }
       clearTimeout(timer)
       isOpen.value = false
-      emit("change", false)
+      emit('change', false)
     }
 
     function resize() {
@@ -96,34 +112,37 @@ export default defineComponent({
         const offset = props.offset
 
         switch (props.position) {
-          case "auto":
-          case "bottom":
+          case 'auto':
+          case 'bottom':
             x = left + width / 2
             y = top + height + offset
             break
-          case "top":
+          case 'top':
             x = left
             y = top - pHeight - offset
             break
-          case "left":
+          case 'left':
             x = left - pWidth - offset
             y = top
             break
-          case "right":
+          case 'right':
             x = left + width + offset
             y = top
             break
         }
-        if (props.position == "auto") {
+        if (props.position == 'auto') {
           x = window.innerWidth - x > 500 ? x + 20 : x - 20 - 310
-          y = window.innerHeight - y > popup.offsetHeight + 50 ? y : window.innerHeight - (popup.offsetHeight + 50)
+          y =
+            window.innerHeight - y > popup.offsetHeight + 50
+              ? y
+              : window.innerHeight - (popup.offsetHeight + 50)
         }
         dropdownPosition.x = x
         dropdownPosition.y = y
       }
     }
 
-    watch(isOpen, val => {
+    watch(isOpen, (val) => {
       if (val) {
         mounted.value = true
       }
@@ -133,12 +152,16 @@ export default defineComponent({
     return () => {
       return (
         <div {...{ onMouseout, onMouseover }} ref={triggerRef}>
-          {renderSlot(slots, "default")}
+          {renderSlot(slots, 'default')}
           <Teleport to="body">
             <Transition name="dropdown" mode="out-in">
               {mounted.value && !props.disabled && (
-                <div class={["i-popper z-999", props.popClass]} style={dropdownStyle.value} ref={popupRef}>
-                  {renderSlot(slots, "popper")}
+                <div
+                  class={['i-popper z-999', props.popClass]}
+                  style={dropdownStyle.value}
+                  ref={popupRef}
+                >
+                  {renderSlot(slots, 'popper')}
                 </div>
               )}
             </Transition>
@@ -146,5 +169,5 @@ export default defineComponent({
         </div>
       )
     }
-  }
+  },
 })
diff --git a/frontend/src/components/calc/README b/frontend/src/components/calc/README
index 782a9261..2ad1d84e 100644
--- a/frontend/src/components/calc/README
+++ b/frontend/src/components/calc/README
@@ -1 +1 @@
-DNF风格定制组件
\ No newline at end of file
+DNF风格定制组件
diff --git a/frontend/src/components/calc/action-dialog/index.vue b/frontend/src/components/calc/action-dialog/index.vue
index d4f49b49..16d3ab6f 100644
--- a/frontend/src/components/calc/action-dialog/index.vue
+++ b/frontend/src/components/calc/action-dialog/index.vue
@@ -1,101 +1,101 @@
 <script lang="tsx">
-import { onKeyStroke, syncRef, useVModel } from "@vueuse/core"
-import type { PropType, RendererElement } from "vue"
-import { defineComponent, ref, renderSlot } from "vue"
+import { onKeyStroke, syncRef, useVModel } from '@vueuse/core'
+import type { PropType, RendererElement } from 'vue'
+import { defineComponent, ref, renderSlot } from 'vue'
 
-import CalcDialog from "@/components/calc/dialog/index.vue"
-import CalcButton from "@/components/calc/button/index.vue"
-import type { JSX } from "vue/jsx-runtime"
+import CalcDialog from '@/components/calc/dialog/index.vue'
+import CalcButton from '@/components/calc/button/index.vue'
+import type { JSX } from 'vue/jsx-runtime'
 
-export type ActionDialogResult = "ok" | "reject" | "cancel" | "none"
+export type ActionDialogResult = 'ok' | 'reject' | 'cancel' | 'none'
 
 export default defineComponent({
-  name: "IActionDialog",
+  name: 'IActionDialog',
   props: {
     visible: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     class: {
-      type: String
+      type: String,
     },
     mask: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     // 模态框
     modal: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     header: {
       type: [String, Boolean] as PropType<string | boolean>,
-      default: () => true
+      default: () => true,
     },
     drag: {
-      type: String as PropType<"header" | "all" | "none">,
-      default: () => "header"
+      type: String as PropType<'header' | 'all' | 'none'>,
+      default: () => 'header',
     },
     okButton: {
       type: [String, Boolean],
-      default: "确定"
+      default: '确定',
     },
     rejectButton: {
       type: [String, Boolean],
-      default: false
+      default: false,
     },
     cancelButton: {
       type: [String, Boolean],
-      default: "取消"
+      default: '取消',
     },
     closeOnYes: {
       type: Boolean,
-      default: () => true
+      default: () => true,
     },
     closeOnCancel: {
       type: Boolean,
-      default: () => true
+      default: () => true,
     },
     closeOnReject: {
       type: Boolean,
-      default: () => true
+      default: () => true,
     },
     closeOnEsc: {
       type: Boolean,
-      default: () => true
+      default: () => true,
     },
     cache: {
       // 维持窗口状态
       type: Boolean,
-      default: () => true
+      default: () => true,
     },
     defaultStatus: {
       type: String as PropType<ActionDialogResult>,
-      default: () => "cancel"
+      default: () => 'cancel',
     },
     appendTo: {
       type: [Object, String] as PropType<string | RendererElement | null | undefined>,
-      default: "body"
+      default: 'body',
     },
     scale: {
       type: Number,
-      default: 1.0
-    }
+      default: 1.0,
+    },
   },
-  emits: ["close", "ok", "cancel", "action", "update:visible"],
+  emits: ['close', 'ok', 'cancel', 'action', 'update:visible'],
   setup(props, { emit, slots }) {
     const visible = ref(props.visible)
 
-    syncRef(useVModel(props, "visible"), visible, { direction: "both" })
+    syncRef(useVModel(props, 'visible'), visible, { direction: 'both' })
 
     const result = ref<ActionDialogResult>(props.defaultStatus)
 
     function close() {
       visible.value = false
-      emit("close", result.value)
+      emit('close', result.value)
     }
 
-    onKeyStroke("ESC", (e: Event) => {
+    onKeyStroke('ESC', (e: Event) => {
       if (visible.value && props.closeOnEsc) {
         e.preventDefault()
         close()
@@ -103,21 +103,21 @@ export default defineComponent({
     })
 
     function onOkClick() {
-      result.value = "ok"
+      result.value = 'ok'
       if (props.closeOnYes) {
         close()
       }
     }
 
     function onRejectClick() {
-      result.value = "reject"
+      result.value = 'reject'
       if (props.closeOnReject) {
         close()
       }
     }
 
     function onCancelClick() {
-      result.value = "cancel"
+      result.value = 'cancel'
       if (props.closeOnCancel) {
         close()
       }
@@ -133,28 +133,28 @@ export default defineComponent({
         if (props.okButton) {
           buttons.push(
             <CalcButton class="mx-2px" type="primary" onClick={onOkClick}>
-              {props.okButton === true ? "确定" : props.okButton}
-            </CalcButton>
+              {props.okButton === true ? '确定' : props.okButton}
+            </CalcButton>,
           )
         }
         if (props.rejectButton) {
           buttons.push(
             <CalcButton class="mx-2px" type="primary" onClick={onRejectClick}>
-              {props.rejectButton === true ? "拒绝" : props.rejectButton}
-            </CalcButton>
+              {props.rejectButton === true ? '拒绝' : props.rejectButton}
+            </CalcButton>,
           )
         }
         if (props.cancelButton) {
           buttons.push(
             <CalcButton class="mx-2px" onClick={onCancelClick}>
-              {props.cancelButton === true ? "取消" : props.cancelButton}
-            </CalcButton>
+              {props.cancelButton === true ? '取消' : props.cancelButton}
+            </CalcButton>,
           )
         }
 
         return <div class="flex pb-2 items-center justify-center">{buttons}</div>
       }
-      return renderSlot(slots, "action")
+      return renderSlot(slots, 'action')
     }
 
     return () => {
@@ -165,43 +165,43 @@ export default defineComponent({
           drag={props.drag}
           mask={props.mask}
           modal={props.modal}
-          header={props.header == true ? "提示" : props.header}
+          header={props.header == true ? '提示' : props.header}
           appendTo={props.appendTo}
           scale={props.scale}
         >
-          <div class={["flex items-center justify-center"]}> {renderSlot(slots, "default")}</div>
+          <div class={['flex items-center justify-center']}> {renderSlot(slots, 'default')}</div>
           {renderAction()}
         </CalcDialog>
       )
     }
-  }
+  },
 })
 </script>
 
 <style lang="scss" scoped>
-  .i-button {
-    text-shadow: none;
+.i-button {
+  text-shadow: none;
 
-    color: #a89679;
-    background: linear-gradient(#12396b, #081f3c);
-    border: 1px solid #554a3d;
+  color: #a89679;
+  background: linear-gradient(#12396b, #081f3c);
+  border: 1px solid #554a3d;
 
-    &:hover {
-      color: #fee97d;
-      background: linear-gradient(#2d4e9f, #153051);
-      //  border: 1px solid #e3c18a;
-      color: #d4d4b6;
-      background: linear-gradient(#195cab, #0b3260);
-      border: 1px solid #867760;
-    }
-
-    &:active {
-      color: #e9c556;
-      background: linear-gradient(#2d4e9f, #122438);
-      border: 1px solid #e3c18a;
-      color: #d4d4b6;
-      background: linear-gradient(#195cab, #0b3260);
-      border: 1px solid #918168;
-    }
+  &:hover {
+    color: #fee97d;
+    background: linear-gradient(#2d4e9f, #153051);
+    //  border: 1px solid #e3c18a;
+    color: #d4d4b6;
+    background: linear-gradient(#195cab, #0b3260);
+    border: 1px solid #867760;
   }
+
+  &:active {
+    color: #e9c556;
+    background: linear-gradient(#2d4e9f, #122438);
+    border: 1px solid #e3c18a;
+    color: #d4d4b6;
+    background: linear-gradient(#195cab, #0b3260);
+    border: 1px solid #918168;
+  }
+}
 </style>
diff --git a/frontend/src/components/calc/autocomplete/index.vue b/frontend/src/components/calc/autocomplete/index.vue
index ca639706..a8a85915 100644
--- a/frontend/src/components/calc/autocomplete/index.vue
+++ b/frontend/src/components/calc/autocomplete/index.vue
@@ -1,31 +1,40 @@
 <script lang="tsx">
-import { debouncedWatch, onClickOutside, useVModel } from "@vueuse/core"
-import type { CSSProperties, PropType } from "vue";
-import { Teleport, Transition, computed, defineComponent, onDeactivated, ref, renderList, watch } from "vue"
+import { debouncedWatch, onClickOutside, useVModel } from '@vueuse/core'
+import type { CSSProperties, PropType } from 'vue'
+import {
+  Teleport,
+  Transition,
+  computed,
+  defineComponent,
+  onDeactivated,
+  ref,
+  renderList,
+  watch,
+} from 'vue'
 
-  type HandleChangeFunction = (value: string | number) => string[] | Promise<string[]>
+type HandleChangeFunction = (value: string | number) => string[] | Promise<string[]>
 
 export default defineComponent({
   props: {
     modelValue: {
       type: [String, Number] as PropType<string | number>,
-      default: () => ""
+      default: () => '',
     },
     placeholder: {
       type: String,
-      default: ""
+      default: '',
     },
     handleChange: {
       type: Function as PropType<HandleChangeFunction>,
-      default: () => () => []
+      default: () => () => [],
     },
     delay: {
       type: Number,
-      default: 300
-    }
+      default: 300,
+    },
   },
   setup(props, { emit }) {
-    const modelValue = useVModel(props, "modelValue")
+    const modelValue = useVModel(props, 'modelValue')
 
     const isOpen = ref(false)
     const triggerRef = ref<HTMLElement>()
@@ -39,7 +48,7 @@ export default defineComponent({
       return {
         left: `${dropdownPosition.value.x}px`,
         top: `${dropdownPosition.value.y}px`,
-        width: `${dropdownPosition.value.w}px`
+        width: `${dropdownPosition.value.w}px`,
       }
     })
 
@@ -49,19 +58,19 @@ export default defineComponent({
         dropdownPosition.value = {
           w: width,
           x: left,
-          y: top + height + 2
+          y: top + height + 2,
         }
       }
     }
 
     onClickOutside(triggerRef, () => (isOpen.value = false))
 
-    window.addEventListener("resize", onResize)
-    window.addEventListener("scroll", onResize)
+    window.addEventListener('resize', onResize)
+    window.addEventListener('scroll', onResize)
 
     onDeactivated(() => {
-      window.removeEventListener("resize", onResize)
-      window.removeEventListener("scroll", onResize)
+      window.removeEventListener('resize', onResize)
+      window.removeEventListener('scroll', onResize)
     })
 
     function selectItem(item: string) {
@@ -74,17 +83,21 @@ export default defineComponent({
 
     const droplist = ref<string[]>([])
 
-    debouncedWatch(modelValue, async value => (droplist.value = await props.handleChange(value)), {
-      debounce: delay
-    })
+    debouncedWatch(
+      modelValue,
+      async (value) => (droplist.value = await props.handleChange(value)),
+      {
+        debounce: delay,
+      },
+    )
 
     function handleInput() {
       isOpen.value = droplist.value.length > 0
     }
 
     function handleKeyPress(event: KeyboardEvent) {
-      if (event.code == "Enter") {
-        emit("enter", modelValue.value)
+      if (event.code == 'Enter') {
+        emit('enter', modelValue.value)
       }
     }
 
@@ -92,12 +105,24 @@ export default defineComponent({
       return (
         <div class="i-autocomplete">
           <div class="i-autocomplete-trigger" ref={triggerRef}>
-            <input onKeypress={handleKeyPress} class="i-autocomplete-input" onFocus={handleInput} onInput={handleInput} type="text" v-model={modelValue.value} placeholder={props.placeholder} />
+            <input
+              onKeypress={handleKeyPress}
+              class="i-autocomplete-input"
+              onFocus={handleInput}
+              onInput={handleInput}
+              type="text"
+              v-model={modelValue.value}
+              placeholder={props.placeholder}
+            />
           </div>
           <Teleport to="body">
             <Transition name="dropdown" mode="out-in">
-              <div class="i-autocomplete-dropdown" style={dropdownStyle.value} v-show={isOpen.value}>
-                {renderList(droplist.value, item => (
+              <div
+                class="i-autocomplete-dropdown"
+                style={dropdownStyle.value}
+                v-show={isOpen.value}
+              >
+                {renderList(droplist.value, (item) => (
                   <div class="i-autocomplete-dropdown-item" onClick={selectItem(item)}>
                     {item}
                   </div>
@@ -108,115 +133,115 @@ export default defineComponent({
         </div>
       )
     }
-  }
+  },
 })
 </script>
 
 <style scoped lang="scss">
-  $text-color: #937639;
-  .i-autocomplete {
-    min-width: 80px;
-    width: 160px;
-    user-select: none;
-    outline: none;
-    height: 24px;
-    min-height: 16px;
-    line-height: 100%;
-    // font-size: 12px;
-    color: $text-color;
-    background-color: rgba(0, 0, 0, 1);
-    border: 1px solid #5b472a;
-    border-radius: 2px;
-    display: block;
+$text-color: #937639;
+.i-autocomplete {
+  min-width: 80px;
+  width: 160px;
+  user-select: none;
+  outline: none;
+  height: 24px;
+  min-height: 16px;
+  line-height: 100%;
+  // font-size: 12px;
+  color: $text-color;
+  background-color: rgba(0, 0, 0, 1);
+  border: 1px solid #5b472a;
+  border-radius: 2px;
+  display: block;
 
-    .i-autocomplete-trigger {
-      display: flex;
-      height: 100%;
-      opacity: 0.8;
-      justify-content: space-between;
-      align-items: center;
+  .i-autocomplete-trigger {
+    display: flex;
+    height: 100%;
+    opacity: 0.8;
+    justify-content: space-between;
+    align-items: center;
 
-      .i-autocomplete-input {
-        padding-left: 8px;
-        width: 100%;
-        border: none;
-        outline: none;
-        color: inherit;
-        // font-size: 12px;
-        background-color: black;
-        font-family: SimSun;
-      }
-
-      &.disabled {
-        color: gray;
-
-        .i-select-down-icon {
-          background-image: url("./img/select_down_disabled.png");
-        }
-      }
-    }
-
-    .i-autocomplete-trigger:hover {
-      opacity: 1;
-    }
-  }
-
-  .i-autocomplete-dropdown {
-    position: fixed;
-    max-height: 160px;
-    overflow-y: auto;
-    background: black;
-    // font-size: 12px;
-    z-index: 888;
-
-    $hoverColor: #002947;
-    $activeColor: color.scale($hoverColor, $lightness: 5%);
-    color: $text-color;
-
-    .i-autocomplete-dropdown-item {
-      // font-size: 12px;
-      height: 20px;
-      line-height: 20px;
-      margin: 0;
-      padding: 0 8px;
+    .i-autocomplete-input {
+      padding-left: 8px;
+      width: 100%;
       border: none;
       outline: none;
-      appearance: none;
-      display: block;
-      overflow: hidden;
+      color: inherit;
+      // font-size: 12px;
+      background-color: black;
+      font-family: SimSun;
+    }
 
-      &.active {
-        background-color: $activeColor;
-      }
+    &.disabled {
+      color: gray;
 
-      &:hover:not(.active) {
-        // font-size: 12px;
-        background-color: $hoverColor;
+      .i-select-down-icon {
+        background-image: url('./img/select_down_disabled.png');
       }
     }
   }
 
-  .dropdown-active {
-    animation: dropdown-enter 0.2s ease-in;
+  .i-autocomplete-trigger:hover {
+    opacity: 1;
   }
+}
 
-  .dropdown-active {
-    animation: dropdown-leave 0.2s ease-in;
-  }
+.i-autocomplete-dropdown {
+  position: fixed;
+  max-height: 160px;
+  overflow-y: auto;
+  background: black;
+  // font-size: 12px;
+  z-index: 888;
 
-  .dropdown-enter-active {
-    animation: dropdown-enter 0.2s ease-in;
-  }
+  $hoverColor: #002947;
+  $activeColor: color.scale($hoverColor, $lightness: 5%);
+  color: $text-color;
 
-  .dropdown-leave-active {
-    animation: dropdown-leave 0.2s ease-in;
-  }
+  .i-autocomplete-dropdown-item {
+    // font-size: 12px;
+    height: 20px;
+    line-height: 20px;
+    margin: 0;
+    padding: 0 8px;
+    border: none;
+    outline: none;
+    appearance: none;
+    display: block;
+    overflow: hidden;
 
-  .dropdown-enter-active {
-    animation: dropdown-enter 0.2s ease-in;
-  }
+    &.active {
+      background-color: $activeColor;
+    }
 
-  .dropdown-leave-active {
-    animation: dropdown-leave 0.2s ease-in;
+    &:hover:not(.active) {
+      // font-size: 12px;
+      background-color: $hoverColor;
+    }
   }
+}
+
+.dropdown-active {
+  animation: dropdown-enter 0.2s ease-in;
+}
+
+.dropdown-active {
+  animation: dropdown-leave 0.2s ease-in;
+}
+
+.dropdown-enter-active {
+  animation: dropdown-enter 0.2s ease-in;
+}
+
+.dropdown-leave-active {
+  animation: dropdown-leave 0.2s ease-in;
+}
+
+.dropdown-enter-active {
+  animation: dropdown-enter 0.2s ease-in;
+}
+
+.dropdown-leave-active {
+  animation: dropdown-leave 0.2s ease-in;
+}
 </style>
diff --git a/frontend/src/components/calc/button/index.vue b/frontend/src/components/calc/button/index.vue
index cf91a5d7..1580c10f 100644
--- a/frontend/src/components/calc/button/index.vue
+++ b/frontend/src/components/calc/button/index.vue
@@ -1,116 +1,120 @@
 <script lang="tsx">
-import { defineComponent, renderSlot } from "vue"
-import { RouterLink } from "vue-router"
+import { defineComponent, renderSlot } from 'vue'
+import { RouterLink } from 'vue-router'
 
 export default defineComponent({
-  name: "CalcButton",
+  name: 'CalcButton',
   props: {
     small: {
       type: Boolean,
-      default: false
+      default: false,
     },
     to: {
       type: String,
-      default: null
+      default: null,
     },
     class: {
       type: [String],
-      default: ""
+      default: '',
     },
     icon: {
-      type: String
+      type: String,
     },
     type: {
       type: String,
-      default: "primary"
+      default: 'primary',
     },
     disabled: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
-  emits: ["click"],
-  setup(props, { slots,emit }) {
+  emits: ['click'],
+  setup(props, { slots, emit }) {
     return () => {
       const proerpties = {
         to: props.to,
         class: {
           [props.class]: !!props.class,
-          "i-button cursor-pointer outline-none text-shadow": true,
-          "small": props.small,
-          [`icon-${props.icon}`]: !!props.icon
+          '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)
+          emit('click', e)
         },
-        disabled: props.disabled
+        disabled: props.disabled,
       }
-      const content = renderSlot(slots, "default")
-      return props.to ? <RouterLink {...proerpties}>{content}</RouterLink> : <button {...proerpties}>{content}</button>
+      const content = renderSlot(slots, 'default')
+      return props.to ? (
+        <RouterLink {...proerpties}>{content}</RouterLink>
+      ) : (
+        <button {...proerpties}>{content}</button>
+      )
     }
-  }
+  },
 })
 </script>
 
 <style lang="scss">
 .i-button {
-    min-width: 56px;
-    height: 24px;
-    // line-height: 20px;
+  min-width: 56px;
+  height: 24px;
+  // line-height: 20px;
 
-    // font-size: 12px;
+  // font-size: 12px;
+  color: #e9c556;
+  background: linear-gradient(#223768, #122438);
+  border: 1px solid #755f44;
+  border-radius: 2px;
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  transition: all 200ms ease-in-out;
+
+  &[class*='icon-'] {
+    min-width: 1px;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none !important;
+    transition: all 0.2s ease-in-out;
+  }
+
+  &:hover {
+    color: #fee97d;
+    background: linear-gradient(#2d4e9f, #153051);
+    //  border: 1px solid #e3c18a;
+  }
+
+  &:active {
     color: #e9c556;
-    background: linear-gradient(#223768, #122438);
-    border: 1px solid #755f44;
+    background: linear-gradient(#2d4e9f, #122438);
+    border: 1px solid #e3c18a;
+  }
+
+  &:disabled {
+    color: #696969;
+    background: linear-gradient(#353535, #1c1c1c);
+    border: 1px solid #414141;
     border-radius: 2px;
-    display: block;
-    text-align: center;
-    text-decoration: none;
-    transition: all 200ms ease-in-out;
-
-    &[class*="icon-"] {
-      min-width: 1px;
-      width: 28px;
-      height: 28px;
-      padding: 0;
-      border: none !important;
-      transition: all 0.2s ease-in-out;
-    }
-
-    &:hover {
-      color: #fee97d;
-      background: linear-gradient(#2d4e9f, #153051);
-      //  border: 1px solid #e3c18a;
-    }
-
-    &:active {
-      color: #e9c556;
-      background: linear-gradient(#2d4e9f, #122438);
-      border: 1px solid #e3c18a;
-    }
-
-    &:disabled {
-      color: #696969;
-      background: linear-gradient(#353535, #1c1c1c);
-      border: 1px solid #414141;
-      border-radius: 2px;
-    }
-
-    &.small {
-      min-width: 28px;
-      height: 20px;
-      // line-height: 20px;
-      font-size: 12px;
-      padding-top: 0;
-      padding-bottom: 0;
-    }
   }
 
-  .i-href {
-    display: block;
-    text-decoration: none;
+  &.small {
+    min-width: 28px;
+    height: 20px;
+    // line-height: 20px;
+    font-size: 12px;
+    padding-top: 0;
+    padding-bottom: 0;
   }
+}
+
+.i-href {
+  display: block;
+  text-decoration: none;
+}
 </style>
diff --git a/frontend/src/components/calc/cascader/index.vue b/frontend/src/components/calc/cascader/index.vue
index 7bd0793e..492ddd63 100644
--- a/frontend/src/components/calc/cascader/index.vue
+++ b/frontend/src/components/calc/cascader/index.vue
@@ -1,9 +1,9 @@
 <script lang="tsx">
-import { selectionEmits, selectionProps } from "hoci"
-import type { CSSProperties, PropType } from "vue";
-import { Teleport, Transition, computed, defineComponent, onDeactivated, ref, watch } from "vue"
+import { selectionEmits, selectionProps } from 'hoci'
+import type { CSSProperties, PropType } from 'vue'
+import { Teleport, Transition, computed, defineComponent, onDeactivated, ref, watch } from 'vue'
 
-import { onClickOutside, useVModel } from "@vueuse/core"
+import { onClickOutside, useVModel } from '@vueuse/core'
 interface ICascaderItem {
   label: string
   id?: string | number
@@ -13,33 +13,33 @@ interface ICascaderItem {
 }
 
 export default defineComponent({
-  name: "ICascader",
+  name: 'ICascader',
   props: {
     ...selectionProps,
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     width: {
       type: Number,
-      default: 120
+      default: 120,
     },
     emptyLabel: {
-      type: String
+      type: String,
     },
     highlight: {
       type: String,
       // warn remind
-      default: ""
+      default: '',
     },
     items: {
       type: Array as PropType<ICascaderItem[]>,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
-  emits: [...selectionEmits, "select"],
+  emits: [...selectionEmits, 'select'],
   setup(props, { emit }) {
-    const modelValue = useVModel(props, "modelValue")
+    const modelValue = useVModel(props, 'modelValue')
 
     const isOpen = ref(false)
     const triggerRef = ref<HTMLElement>()
@@ -60,13 +60,13 @@ export default defineComponent({
         return {
           left: `${dropdownPosition.value.x}px`,
           top: `${dropdownPosition.value.y}px`,
-          width: `${dropdownPosition.value.w}px`
+          width: `${dropdownPosition.value.w}px`,
         }
       } else {
         return {
           left: `${dropdownPosition.value.x}px`,
           bottom: `${dropdownPosition.value.z}px`,
-          width: `${dropdownPosition.value.w}px`
+          width: `${dropdownPosition.value.w}px`,
         }
       }
     })
@@ -79,26 +79,25 @@ export default defineComponent({
             w: width,
             x: left,
             y: top + height + 2,
-            z: 0
+            z: 0,
           }
         } else {
           dropdownPosition.value = {
             w: width,
             x: left,
             z: window.innerHeight - top + 2,
-            y: 0
+            y: 0,
           }
         }
       }
     }
 
-
-    window.addEventListener("resize", onResize)
-    window.addEventListener("scroll", onResize)
+    window.addEventListener('resize', onResize)
+    window.addEventListener('scroll', onResize)
 
     onDeactivated(() => {
-      window.removeEventListener("resize", onResize)
-      window.removeEventListener("scroll", onResize)
+      window.removeEventListener('resize', onResize)
+      window.removeEventListener('scroll', onResize)
     })
 
     const selectItem = ref<ICascaderItem>()
@@ -108,7 +107,7 @@ export default defineComponent({
         isOpen.value = false
       }
       selectItem.value = item
-      emit("select", item.value)
+      emit('select', item.value)
     }
 
     function loadNode(item: ICascaderItem) {
@@ -122,11 +121,15 @@ export default defineComponent({
 
     return () => {
       return (
-        <div class={["min-w-20 w-40 i-cascader"].concat(props.highlight)} onClick={collapse} ref={selectRef}>
+        <div
+          class={['min-w-20 w-40 i-cascader'].concat(props.highlight)}
+          onClick={collapse}
+          ref={selectRef}
+        >
           <div
             class={{
-              "i-cascader-trigger": true,
-              "disabled": props.disabled
+              'i-cascader-trigger': true,
+              disabled: props.disabled,
             }}
             ref={triggerRef}
           >
@@ -151,122 +154,122 @@ export default defineComponent({
         </div>
       )
     }
-  }
+  },
 })
 </script>
 
 <style lang="scss">
 @use 'sass:color';
 $text-color: #937639;
-  .i-cascader {
-    min-width: 80px;
-    width: 160px;
-    user-select: none;
-    outline: none;
-    height: 16px;
-    min-height: 16px;
-    line-height: 100%;
-    // font-size: 12px;
-    color: $text-color;
-    background-color: rgba(0, 0, 0, 1);
-    border: 1px solid #5b472a;
-    border-radius: 2px;
+.i-cascader {
+  min-width: 80px;
+  width: 160px;
+  user-select: none;
+  outline: none;
+  height: 16px;
+  min-height: 16px;
+  line-height: 100%;
+  // font-size: 12px;
+  color: $text-color;
+  background-color: rgba(0, 0, 0, 1);
+  border: 1px solid #5b472a;
+  border-radius: 2px;
+  padding: 0;
+  padding-right: 3px;
+  margin: 0;
+  display: block;
+
+  .i-cascader-trigger {
     padding: 0;
-    padding-right: 3px;
-    margin: 0;
-    display: block;
+    display: flex;
+    height: 100%;
+    opacity: 0.9;
 
-    .i-cascader-trigger {
-      padding: 0;
-      display: flex;
-      height: 100%;
-      opacity: 0.9;
+    justify-content: space-between;
+    align-items: center;
 
-      justify-content: space-between;
-      align-items: center;
+    .i-cascader-label {
+      padding-left: 5px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      max-width: calc(100% - 20px);
+    }
 
-      .i-cascader-label {
-        padding-left: 5px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        max-width: calc(100% - 20px);
-      }
+    .i-cascader-down-icon {
+      background-image: url('./img/select_down.png');
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      border-radius: 2px;
+      width: 15px;
+      height: 14px;
+    }
+
+    .i-cascader-down-icon:active {
+      background-image: url('./img/select_down_clicked.png');
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      border-radius: 2px;
+      width: 15px;
+      height: 14px;
+    }
+
+    &.disabled {
+      color: gray;
 
       .i-cascader-down-icon {
-        background-image: url("./img/select_down.png");
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-position: center;
-        border-radius: 2px;
-        width: 15px;
-        height: 14px;
-      }
-
-      .i-cascader-down-icon:active {
-        background-image: url("./img/select_down_clicked.png");
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-position: center;
-        border-radius: 2px;
-        width: 15px;
-        height: 14px;
-      }
-
-      &.disabled {
-        color: gray;
-
-        .i-cascader-down-icon {
-          background-image: url("./img/select_down_disabled.png");
-        }
+        background-image: url('./img/select_down_disabled.png');
       }
     }
-
-    .i-cascader-trigger:hover {
-      opacity: 1;
-    }
   }
 
-  .remind {
-    color: #32e432 !important;
-    border: 1px solid #aa8651;
+  .i-cascader-trigger:hover {
+    opacity: 1;
   }
+}
 
-  .i-cascader-dropdown {
-    position: fixed;
-    max-height: 160px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    background: black;
-    // font-size: 12px;
-    z-index: 888;
+.remind {
+  color: #32e432 !important;
+  border: 1px solid #aa8651;
+}
 
-    $hoverColor: #002947;
-    $activeColor: color.scale($hoverColor, $lightness: 5%);
-    color: $text-color;
-  }
+.i-cascader-dropdown {
+  position: fixed;
+  max-height: 160px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: black;
+  // font-size: 12px;
+  z-index: 888;
 
-  .dropdown-active {
-    animation: dropdown-enter 0.2s ease-in;
-  }
+  $hoverColor: #002947;
+  $activeColor: color.scale($hoverColor, $lightness: 5%);
+  color: $text-color;
+}
 
-  .dropdown-active {
-    animation: dropdown-leave 0.2s ease-in;
-  }
+.dropdown-active {
+  animation: dropdown-enter 0.2s ease-in;
+}
 
-  .dropdown-enter-active {
-    animation: dropdown-enter 0.2s ease-in;
-  }
+.dropdown-active {
+  animation: dropdown-leave 0.2s ease-in;
+}
 
-  .dropdown-leave-active {
-    animation: dropdown-leave 0.2s ease-in;
-  }
+.dropdown-enter-active {
+  animation: dropdown-enter 0.2s ease-in;
+}
 
-  .dropdown-enter-active {
-    animation: dropdown-enter 0.2s ease-in;
-  }
+.dropdown-leave-active {
+  animation: dropdown-leave 0.2s ease-in;
+}
 
-  .dropdown-leave-active {
-    animation: dropdown-leave 0.2s ease-in;
-  }
+.dropdown-enter-active {
+  animation: dropdown-enter 0.2s ease-in;
+}
+
+.dropdown-leave-active {
+  animation: dropdown-leave 0.2s ease-in;
+}
 </style>
diff --git a/frontend/src/components/calc/checkbox-group/index.vue b/frontend/src/components/calc/checkbox-group/index.vue
index d2570f0a..1010c06f 100644
--- a/frontend/src/components/calc/checkbox-group/index.vue
+++ b/frontend/src/components/calc/checkbox-group/index.vue
@@ -1,25 +1,25 @@
 <script lang="tsx">
-import { defineComponent, provide } from "vue"
-import { selectionEmits, selectionProps, useSelectionList } from "hoci"
-import { CHECKBOX_GROUP } from "../shared"
+import { defineComponent, provide } from 'vue'
+import { selectionEmits, selectionProps, useSelectionList } from 'hoci'
+import { CHECKBOX_GROUP } from '../shared'
 
 export default defineComponent({
-  name: "ICheckboxGroup",
+  name: 'ICheckboxGroup',
   components: {},
   props: {
     ...selectionProps,
     activeClass: {
       type: String,
-      default: "checked"
+      default: 'checked',
     },
     unactiveClass: {
       type: String,
-      default: "unchecked"
+      default: 'unchecked',
     },
     multiple: {
       type: [Boolean, Number],
-      default: true
-    }
+      default: true,
+    },
   },
   emits: [...selectionEmits],
 
@@ -29,45 +29,45 @@ export default defineComponent({
     const { render } = useSelectionList(props, context)
 
     return () => render()
-  }
+  },
 })
 </script>
 
 <style lang="scss">
-  .i-checkbox {
-    display: flex;
-    align-items: center;
-    &.checked {
-      .i-checkbox-icon {
-        background-image: url("@/assets/img/control/checkbox_checked.png");
-      }
-    }
-
+.i-checkbox {
+  display: flex;
+  align-items: center;
+  &.checked {
     .i-checkbox-icon {
-      width: 12px;
-      min-width: 12px;
-      height: 12px;
-      margin-right: 4px;
-      background-image: url("@/assets/img/control/checkbox_uncheck.png");
-    }
-
-    .i-checkbox-icon-disable {
-      width: 12px;
-      min-width: 12px;
-      height: 12px;
-      margin-right: 4px;
-      background-image: url("@/assets/img/control/checkbox_disable.png");
-    }
-
-    &:hover:not(.checked) {
-      .i-checkbox-icon {
-        background-image: url("@/assets/img/control/checkbox_hover.png");
-      }
-    }
-
-    .i-checkbox-label {
-      line-height: 24px;
-      color: #937639;
+      background-image: url('@/assets/img/control/checkbox_checked.png');
     }
   }
+
+  .i-checkbox-icon {
+    width: 12px;
+    min-width: 12px;
+    height: 12px;
+    margin-right: 4px;
+    background-image: url('@/assets/img/control/checkbox_uncheck.png');
+  }
+
+  .i-checkbox-icon-disable {
+    width: 12px;
+    min-width: 12px;
+    height: 12px;
+    margin-right: 4px;
+    background-image: url('@/assets/img/control/checkbox_disable.png');
+  }
+
+  &:hover:not(.checked) {
+    .i-checkbox-icon {
+      background-image: url('@/assets/img/control/checkbox_hover.png');
+    }
+  }
+
+  .i-checkbox-label {
+    line-height: 24px;
+    color: #937639;
+  }
+}
 </style>
diff --git a/frontend/src/components/calc/collapse/index.vue b/frontend/src/components/calc/collapse/index.vue
index b99920ea..0efe864e 100644
--- a/frontend/src/components/calc/collapse/index.vue
+++ b/frontend/src/components/calc/collapse/index.vue
@@ -1,33 +1,41 @@
 <script lang="tsx">
-import { useToggle, useVModel } from "@vueuse/core"
-import { defineComponent, renderSlot } from "vue"
+import { useToggle, useVModel } from '@vueuse/core'
+import { defineComponent, renderSlot } from 'vue'
 
 export default defineComponent({
-  name: "ICollapse",
+  name: 'ICollapse',
   props: {
     title: {
-      type: String
+      type: String,
     },
     modelValue: {
       type: Boolean,
-      default: () => true
-    }
+      default: () => true,
+    },
   },
   setup(props, { slots, emit }) {
-    const modelValue = useVModel(props, "modelValue", emit, { passive: true })
+    const modelValue = useVModel(props, 'modelValue', emit, { passive: true })
 
     const toggle = useToggle(modelValue)
 
     return () => {
       return (
         <div class="rounded h-auto bg-hex-00000078 border-1 border-hex-ffffff28 my-1 overflow-hidden">
-          <div onClick={() => toggle()} v-text={props.title} class="bg-gradient-to-b flex from-hex-244281 to-hex-122438 h-6 text-xs text-center w-full items-center justify-center"></div>
-          <div class={["transition-all", "ease-out-in", "h-auto"].concat(modelValue.value ? ["max-h-200"] : ["max-h-0"])}>
-            <div class="p-2">{renderSlot(slots, "default")}</div>
+          <div
+            onClick={() => toggle()}
+            v-text={props.title}
+            class="bg-gradient-to-b flex from-hex-244281 to-hex-122438 h-6 text-xs text-center w-full items-center justify-center"
+          ></div>
+          <div
+            class={['transition-all', 'ease-out-in', 'h-auto'].concat(
+              modelValue.value ? ['max-h-200'] : ['max-h-0'],
+            )}
+          >
+            <div class="p-2">{renderSlot(slots, 'default')}</div>
           </div>
         </div>
       )
     }
-  }
+  },
 })
 </script>
diff --git a/frontend/src/components/calc/dialog/index.vue b/frontend/src/components/calc/dialog/index.vue
index 6d88712b..d2183399 100644
--- a/frontend/src/components/calc/dialog/index.vue
+++ b/frontend/src/components/calc/dialog/index.vue
@@ -1,63 +1,72 @@
 <script lang="tsx">
-import { onClickOutside, onKeyDown, syncRef, useDraggable, useVModel } from "@vueuse/core"
-import type { PropType, RendererElement } from "vue"
-import { Teleport, Transition, computed, defineComponent, provide, ref, renderSlot, watch } from "vue"
-import { provideShow } from "@/components/hooks/show"
+import { onClickOutside, onKeyDown, syncRef, useDraggable, useVModel } from '@vueuse/core'
+import type { PropType, RendererElement } from 'vue'
+import {
+  Teleport,
+  Transition,
+  computed,
+  defineComponent,
+  provide,
+  ref,
+  renderSlot,
+  watch,
+} from 'vue'
+import { provideShow } from '@/components/hooks/show'
 
 export default defineComponent({
-  name: "IDialog",
+  name: 'IDialog',
   props: {
     visible: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     class: {
-      type: String
+      type: String,
     },
     mask: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     // 模态框
     modal: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     header: {
       type: [String, Boolean],
-      default: () => "提示"
+      default: () => '提示',
     },
     closeOnEsc: {
       type: Boolean,
-      default: () => true
+      default: () => true,
     },
     closeButton: {
       type: Boolean,
-      default: () => true
+      default: () => true,
     },
     cache: {
       // 维持窗口状态
       type: Boolean,
-      default: () => true
+      default: () => true,
     },
     lazy: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     drag: {
-      type: String as PropType<"header" | "all" | "none">,
-      default: () => "header"
+      type: String as PropType<'header' | 'all' | 'none'>,
+      default: () => 'header',
     },
     appendTo: {
       type: [Object, String] as PropType<string | RendererElement | null | undefined>,
-      default: "body"
+      default: 'body',
     },
     scale: {
       type: Number,
-      default: 1
-    }
+      default: 1,
+    },
   },
-  emits: ["close", "update:visible"],
+  emits: ['close', 'update:visible'],
   setup(props, { emit, slots }) {
     const dialogRef = ref<HTMLElement | null>(null)
     const headerRef = ref<HTMLElement | null>(null)
@@ -66,18 +75,18 @@ export default defineComponent({
 
     provideShow(visible)
 
-    provide("dialogRef", dialogRef)
+    provide('dialogRef', dialogRef)
 
     const loaded = ref(!props.lazy)
 
-    const stopLoadWatch = watch(visible, val => {
+    const stopLoadWatch = watch(visible, (val) => {
       if (val) {
         loaded.value = true
         stopLoadWatch()
       }
     })
 
-    syncRef(useVModel(props, "visible"), visible, { direction: "both" })
+    syncRef(useVModel(props, 'visible'), visible, { direction: 'both' })
 
     onClickOutside(dialogRef, () => {
       if (props.modal) {
@@ -87,17 +96,17 @@ export default defineComponent({
 
     function close() {
       visible.value = false
-      emit("close")
+      emit('close')
     }
 
     onKeyDown(
-      "Escape",
+      'Escape',
       () => {
         if (visible.value && props.closeOnEsc) {
           close()
         }
       },
-      { target: document }
+      { target: document },
     )
 
     const init = ref(true)
@@ -105,24 +114,24 @@ export default defineComponent({
     const { x, y, style } = useDraggable(
       computed(() => {
         switch (props.drag) {
-          case "header":
+          case 'header':
             return headerRef.value
-          case "all":
+          case 'all':
             return dialogRef.value
-          case "none":
+          case 'none':
           default:
             return null
         }
       }),
       {
-        initialValue: { x: 0, y: 0 }
-      }
+        initialValue: { x: 0, y: 0 },
+      },
     )
 
     const isFixed = computed(() => x.value + y.value > 0)
 
     const appendToRef = computed(() => {
-      return props.appendTo || "body"
+      return props.appendTo || 'body'
     })
 
     return () => {
@@ -130,19 +139,41 @@ export default defineComponent({
         <Teleport to={appendToRef.value}>
           <Transition name="dialog" mode="out-in">
             {loaded.value && (props.cache || visible.value) && (
-              <div v-show={visible.value} class={["dialog-mask w-full h-full fixed top-0 left-0 z-999 flex justify-center items-center "].concat(props.mask ? "bg-hex-000 bg-opacity-66" : "")} style={`transform: scale(${props.scale});${x.value == 0 && y.value == 0 ?"transform-origin:center":"transform-origin:left top"}`}>
-                <div ref={dialogRef} class={["h-auto border-1 border-hex-2b2b2b border-solid  shadow-sm round-1 dialog min-w-48", isFixed.value ? "fixed" : "", props.class]} style={`top:${y.value/props.scale}px;left:${x.value/props.scale}px`}>
+              <div
+                v-show={visible.value}
+                class={[
+                  'dialog-mask w-full h-full fixed top-0 left-0 z-999 flex justify-center items-center ',
+                ].concat(props.mask ? 'bg-hex-000 bg-opacity-66' : '')}
+                style={`transform: scale(${props.scale});${x.value == 0 && y.value == 0 ? 'transform-origin:center' : 'transform-origin:left top'}`}
+              >
+                <div
+                  ref={dialogRef}
+                  class={[
+                    'h-auto border-1 border-hex-2b2b2b border-solid  shadow-sm round-1 dialog min-w-48',
+                    isFixed.value ? 'fixed' : '',
+                    props.class,
+                  ]}
+                  style={`top:${y.value / props.scale}px;left:${x.value / props.scale}px`}
+                >
                   {props.header && (
-                    <div ref={headerRef} class="flex h-4 px-1 leading-4 z-9999 justify-center relative app-header py-2px">
+                    <div
+                      ref={headerRef}
+                      class="flex h-4 px-1 leading-4 z-9999 justify-center relative app-header py-2px"
+                    >
                       <div class="text-xs text-shadow ">{props.header}</div>
                       {props.closeButton && (
                         <div class="flex top-0 right-0 bottom-0 items-center absolute">
-                          <div onClick={close} class="cursor-pointer flex  h-4 text-center w-4  items-center close-icon"></div>
+                          <div
+                            onClick={close}
+                            class="cursor-pointer flex  h-4 text-center w-4  items-center close-icon"
+                          ></div>
                         </div>
                       )}
                     </div>
                   )}
-                  <div class="bg-hex-000 bg-opacity-80 text-white text-xs">{renderSlot(slots, "default")}</div>
+                  <div class="bg-hex-000 bg-opacity-80 text-white text-xs">
+                    {renderSlot(slots, 'default')}
+                  </div>
                 </div>
               </div>
             )}
@@ -150,21 +181,21 @@ export default defineComponent({
         </Teleport>
       )
     }
-  }
+  },
 })
 </script>
 
 <style lang="scss" scoped>
-  .dialog-enter-active {
-    animation: fade-in 400ms;
-    .dialog {
-      animation: zoom-in 400ms;
-    }
+.dialog-enter-active {
+  animation: fade-in 400ms;
+  .dialog {
+    animation: zoom-in 400ms;
   }
-  .dialog-leave-active {
-    animation: fade-in reverse 400ms;
-    .dialog {
-      animation: zoom-out 400ms;
-    }
+}
+.dialog-leave-active {
+  animation: fade-in reverse 400ms;
+  .dialog {
+    animation: zoom-out 400ms;
   }
+}
 </style>
diff --git a/frontend/src/components/calc/iconselect/index.vue b/frontend/src/components/calc/iconselect/index.vue
index b9f5c3a8..91d0d4ec 100644
--- a/frontend/src/components/calc/iconselect/index.vue
+++ b/frontend/src/components/calc/iconselect/index.vue
@@ -1,33 +1,42 @@
 <script lang="tsx">
-import { selectionEmits, selectionProps, useSelectionList } from "hoci"
-import type { CSSProperties, PropType, RendererElement } from "vue";
-import { Teleport, Transition, computed, defineComponent, onDeactivated, ref, renderSlot, watch } from "vue"
+import { selectionEmits, selectionProps, useSelectionList } from 'hoci'
+import type { CSSProperties, PropType, RendererElement } from 'vue'
+import {
+  Teleport,
+  Transition,
+  computed,
+  defineComponent,
+  onDeactivated,
+  ref,
+  renderSlot,
+  watch,
+} from 'vue'
 
-import { onClickOutside } from "@vueuse/core"
+import { onClickOutside } from '@vueuse/core'
 
 export default defineComponent({
-  name: "IIconselect",
+  name: 'IIconselect',
   props: {
     ...selectionProps,
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     width: {
       type: Number,
-      default: 28
+      default: 28,
     },
     emptyLabel: {
-      type: String
+      type: String,
     },
     columnNum: {
       type: Number,
-      default: 1
+      default: 1,
     },
     appendTo: {
       type: [Object, String] as PropType<string | RendererElement | null | undefined>,
-      default: "body"
-    }
+      default: 'body',
+    },
   },
   emits: selectionEmits,
   setup(props, context) {
@@ -36,9 +45,9 @@ export default defineComponent({
     const { renderItem } = useSelectionList(() => {
       return {
         ...props,
-        itemClass: "i-option",
-        activeClass: "active",
-        unactiveClass: "unactive"
+        itemClass: 'i-option',
+        activeClass: 'active',
+        unactiveClass: 'unactive',
       }
     }, context)
 
@@ -52,7 +61,7 @@ export default defineComponent({
     watch(isOpen, onResize)
 
     const appendToRef = computed(() => {
-      return props.appendTo || "body"
+      return props.appendTo || 'body'
     })
 
     function collapse() {
@@ -66,7 +75,7 @@ export default defineComponent({
       return {
         left: `${dropdownPosition.value.x}px`,
         top: `${dropdownPosition.value.y}px`,
-        width: `${columnNum.value * 32 + 11}px`
+        width: `${columnNum.value * 32 + 11}px`,
       }
     })
 
@@ -76,19 +85,19 @@ export default defineComponent({
         dropdownPosition.value = {
           w: width,
           x: left - 2,
-          y: top + height + 2
+          y: top + height + 2,
         }
       }
     }
 
     onClickOutside(triggerRef, () => (isOpen.value = false))
 
-    window.addEventListener("resize", onResize)
-    window.addEventListener("scroll", onResize)
+    window.addEventListener('resize', onResize)
+    window.addEventListener('scroll', onResize)
 
     onDeactivated(() => {
-      window.removeEventListener("resize", onResize)
-      window.removeEventListener("scroll", onResize)
+      window.removeEventListener('resize', onResize)
+      window.removeEventListener('scroll', onResize)
     })
 
     const { slots } = context
@@ -101,8 +110,8 @@ export default defineComponent({
         <div class="i-icon-select" onClick={collapse}>
           <div
             class={{
-              "i-select-trigger": true,
-              "disabled": props.disabled
+              'i-select-trigger': true,
+              disabled: props.disabled,
             }}
             ref={triggerRef}
           >
@@ -111,133 +120,133 @@ export default defineComponent({
           <Teleport to={appendToRef.value}>
             <Transition name="dropdown" mode="out-in">
               <div class="i-icon-select-dropdown" style={dropdownStyle.value} v-show={isOpen.value}>
-                {renderSlot(slots, "default")}
+                {renderSlot(slots, 'default')}
               </div>
             </Transition>
           </Teleport>
         </div>
       )
     }
-  }
+  },
 })
 </script>
 
 <style lang="scss">
-  @use 'sass:color';
-  $text-color: #e9c556;
-  .i-icon-select {
-    width: 28px;
-    min-width: 28px;
-    user-select: none;
-    outline: none;
-    height: 28px;
-    line-height: 100%;
-    // font-size: 12px;
-    color: $text-color;
-    background-color: rgba(0, 0, 0, 1);
-    border: 1px solid #5b472a;
-    border-radius: 2px;
+@use 'sass:color';
+$text-color: #e9c556;
+.i-icon-select {
+  width: 28px;
+  min-width: 28px;
+  user-select: none;
+  outline: none;
+  height: 28px;
+  line-height: 100%;
+  // font-size: 12px;
+  color: $text-color;
+  background-color: rgba(0, 0, 0, 1);
+  border: 1px solid #5b472a;
+  border-radius: 2px;
+  padding: 0;
+  margin: 0;
+  display: block;
+
+  .i-select-trigger {
     padding: 0;
-    margin: 0;
-    display: block;
-
-    .i-select-trigger {
-      padding: 0;
-      display: flex;
-      height: 100%;
-      opacity: 1;
-
-      justify-content: center;
-      align-items: center;
-
-      &.disabled {
-        color: gray;
-      }
-    }
-
-    .i-select-trigger:hover {
-      opacity: 1;
-    }
-  }
-
-  .i-icon-select-dropdown {
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    position: fixed;
-    overflow-y: auto;
-    overflow-x: hidden;
-    max-height: 480px;
-    // background: rgba(255, 255, 255, 0.1);
-    // font-size: 12px;
-    z-index: 888;
-    min-height: 28px;
+    height: 100%;
+    opacity: 1;
 
-    $hoverColor: #002947;
-    $activeColor: color.scale($hoverColor, $lightness: 5%);
-    color: $text-color;
+    justify-content: center;
+    align-items: center;
 
-    .i-option {
-      // font-size: 12px;
-      height: 28px;
-      line-height: 28px;
-      margin: 1px;
-      border: none;
-      outline: none;
-      appearance: none;
-      display: block;
-      overflow: hidden;
-      border: gray 1px solid;
-
-      // &.active {
-      //     background-color: $activeColor;
-      // }
-
-      &.active::before {
-        content: "";
-        width: 28px;
-        height: 28px;
-        position: absolute;
-        background-image: url("/src/assets/img/control/item_checked.png");
-        background-size: 80% 80%;
-        background-repeat: no-repeat;
-        background-position: center;
-        z-index: 6;
-      }
-
-      &:hover:not(.active) ::before {
-        content: "";
-        width: 28px;
-        height: 28px;
-        position: absolute;
-        background-image: url("@/assets/img/control/item_hover.png");
-        background-size: 100% 100%;
-        z-index: 6;
-      }
+    &.disabled {
+      color: gray;
     }
   }
 
-  .dropdown-active {
-    animation: dropdown-enter 0.2s ease-in;
+  .i-select-trigger:hover {
+    opacity: 1;
   }
+}
 
-  .dropdown-active {
-    animation: dropdown-leave 0.2s ease-in;
-  }
+.i-icon-select-dropdown {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  position: fixed;
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 480px;
+  // background: rgba(255, 255, 255, 0.1);
+  // font-size: 12px;
+  z-index: 888;
+  min-height: 28px;
 
-  .dropdown-enter-active {
-    animation: dropdown-enter 0.2s ease-in;
-  }
+  $hoverColor: #002947;
+  $activeColor: color.scale($hoverColor, $lightness: 5%);
+  color: $text-color;
 
-  .dropdown-leave-active {
-    animation: dropdown-leave 0.2s ease-in;
-  }
+  .i-option {
+    // font-size: 12px;
+    height: 28px;
+    line-height: 28px;
+    margin: 1px;
+    border: none;
+    outline: none;
+    appearance: none;
+    display: block;
+    overflow: hidden;
+    border: gray 1px solid;
 
-  .dropdown-enter-active {
-    animation: dropdown-enter 0.2s ease-in;
-  }
+    // &.active {
+    //     background-color: $activeColor;
+    // }
 
-  .dropdown-leave-active {
-    animation: dropdown-leave 0.2s ease-in;
+    &.active::before {
+      content: '';
+      width: 28px;
+      height: 28px;
+      position: absolute;
+      background-image: url('/src/assets/img/control/item_checked.png');
+      background-size: 80% 80%;
+      background-repeat: no-repeat;
+      background-position: center;
+      z-index: 6;
+    }
+
+    &:hover:not(.active) ::before {
+      content: '';
+      width: 28px;
+      height: 28px;
+      position: absolute;
+      background-image: url('@/assets/img/control/item_hover.png');
+      background-size: 100% 100%;
+      z-index: 6;
+    }
   }
+}
+
+.dropdown-active {
+  animation: dropdown-enter 0.2s ease-in;
+}
+
+.dropdown-active {
+  animation: dropdown-leave 0.2s ease-in;
+}
+
+.dropdown-enter-active {
+  animation: dropdown-enter 0.2s ease-in;
+}
+
+.dropdown-leave-active {
+  animation: dropdown-leave 0.2s ease-in;
+}
+
+.dropdown-enter-active {
+  animation: dropdown-enter 0.2s ease-in;
+}
+
+.dropdown-leave-active {
+  animation: dropdown-leave 0.2s ease-in;
+}
 </style>
diff --git a/frontend/src/components/calc/index.ts b/frontend/src/components/calc/index.ts
index 2be4ca9a..825c115d 100644
--- a/frontend/src/components/calc/index.ts
+++ b/frontend/src/components/calc/index.ts
@@ -1,18 +1,17 @@
-import type { App } from "vue"
-import Button from "./button/index.vue"
-import Tabs from "./tabs/index.vue"
-import Tab from "./tab/index.vue"
-import Select from "./select/index.vue"
-import Option from "./option/index.vue"
-import Menu from "./menu/menu.vue"
-import Checkbox from "./checkbox/index.vue"
-import Collapse from "./collapse/index.vue"
-import Dialog from "./dialog/index.vue"
-import Tooltip from "./tooltip/index.vue"
-import Iconselect from "./iconselect/index.vue"
-import Selection from "./selection/index.vue"
-import Slider from "./slider/index.vue"
-
+import type { App } from 'vue'
+import Button from './button/index.vue'
+import Tabs from './tabs/index.vue'
+import Tab from './tab/index.vue'
+import Select from './select/index.vue'
+import Option from './option/index.vue'
+import Menu from './menu/menu.vue'
+import Checkbox from './checkbox/index.vue'
+import Collapse from './collapse/index.vue'
+import Dialog from './dialog/index.vue'
+import Tooltip from './tooltip/index.vue'
+import Iconselect from './iconselect/index.vue'
+import Selection from './selection/index.vue'
+import Slider from './slider/index.vue'
 
 export const components = {
   Button,
@@ -27,7 +26,7 @@ export const components = {
   Tooltip,
   Iconselect,
   Selection,
-  Slider
+  Slider,
 }
 
 export type CalcComponents = typeof components
diff --git a/frontend/src/components/calc/item/index.vue b/frontend/src/components/calc/item/index.vue
index d807fbc1..996d40aa 100644
--- a/frontend/src/components/calc/item/index.vue
+++ b/frontend/src/components/calc/item/index.vue
@@ -1,4 +1,4 @@
 <script lang="tsx">
-import { HiItem } from "hoci"
+import { HiItem } from 'hoci'
 export default HiItem
 </script>
diff --git a/frontend/src/components/calc/loading/index.vue b/frontend/src/components/calc/loading/index.vue
index 074a6ad8..69eefe0a 100644
--- a/frontend/src/components/calc/loading/index.vue
+++ b/frontend/src/components/calc/loading/index.vue
@@ -1,23 +1,26 @@
 <script lang="tsx">
-import { computed, defineComponent, renderSlot } from "vue"
-import { classPropType } from "@/components/hooks/types"
+import { computed, defineComponent, renderSlot } from 'vue'
+import { classPropType } from '@/components/hooks/types'
 export default defineComponent({
   props: {
     loading: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     class: {
       type: classPropType,
-      default: () => ""
-    }
+      default: () => '',
+    },
   },
   setup(props, { slots }) {
     const loading = computed(() => props.loading)
     return () => {
       return (
         <div class="relative">
-          <div v-show={loading.value} class="flex h-full w-full z-99 absolute items-center justify-center">
+          <div
+            v-show={loading.value}
+            class="flex h-full w-full z-99 absolute items-center justify-center"
+          >
             <svg
               class="i-loading-spin"
               version="1.1"
@@ -29,41 +32,65 @@ export default defineComponent({
               xml:space="preserve"
             >
               <g>
-                <linearGradient id="right" gradientUnits="userSpaceOnUse" x1="150" y1="20" x2="150" y2="180">
+                <linearGradient
+                  id="right"
+                  gradientUnits="userSpaceOnUse"
+                  x1="150"
+                  y1="20"
+                  x2="150"
+                  y2="180"
+                >
                   <stop offset="0" style="stop-color:transparent" />
                   <stop offset="1" style="stop-color:currentColor" />
                 </linearGradient>
-                <path fill="url(#right)" d="M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z" />
-                <linearGradient id="left" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="180">
+                <path
+                  fill="url(#right)"
+                  d="M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z"
+                />
+                <linearGradient
+                  id="left"
+                  gradientUnits="userSpaceOnUse"
+                  x1="50"
+                  y1="0"
+                  x2="50"
+                  y2="180"
+                >
                   <stop offset="0" style="stop-color:currentColor" />
                   <stop offset="1" style="stop-color:transparent" />
                 </linearGradient>
-                <path fill="url(#left)" d="M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z" />
+                <path
+                  fill="url(#left)"
+                  d="M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z"
+                />
                 <circle fill="currentColor" cx="100" cy="10" r="10" />
               </g>
             </svg>
           </div>
-          <div class={[props.class].concat("duration-200").concat(loading.value ? "opacity-0" : "")}>{renderSlot(slots, "default", {}, () => [])}</div>
+          <div
+            class={[props.class].concat('duration-200').concat(loading.value ? 'opacity-0' : '')}
+          >
+            {renderSlot(slots, 'default', {}, () => [])}
+          </div>
         </div>
       )
     }
-  }
+  },
 })
 </script>
 
 <style lang="scss">
-  .i-loading-spin {
-    width: 32px;
-    height: 32px;
-    animation: spin infinite 1s linear;
-  }
+.i-loading-spin {
+  width: 32px;
+  height: 32px;
+  animation: spin infinite 1s linear;
+}
 
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
   }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>
diff --git a/frontend/src/components/calc/menu/menu.vue b/frontend/src/components/calc/menu/menu.vue
index 048324fb..ae79b322 100644
--- a/frontend/src/components/calc/menu/menu.vue
+++ b/frontend/src/components/calc/menu/menu.vue
@@ -1,10 +1,10 @@
 <script lang="tsx">
-import { useToggle } from "@vueuse/core"
-import { defineComponent, ref, renderSlot } from "vue"
+import { useToggle } from '@vueuse/core'
+import { defineComponent, ref, renderSlot } from 'vue'
 
 export default defineComponent({
-  name: "CalcMenu",
-  props: ["label"],
+  name: 'CalcMenu',
+  props: ['label'],
   setup(props, { slots }) {
     const expand = ref(false)
 
@@ -24,48 +24,50 @@ export default defineComponent({
             </div>
             <div class="i-menu-label" v-trans={props.label}></div>
           </div>
-          <div class={{ "i-menu-items": true, "expand": expand.value }}>{renderSlot(slots, "default")}</div>
+          <div class={{ 'i-menu-items': true, expand: expand.value }}>
+            {renderSlot(slots, 'default')}
+          </div>
         </div>
       )
     }
-  }
+  },
 })
 </script>
 
 <style lang="scss">
-  .i-menu {
-    min-width: 120px;
-    width: 200px;
-    transition: all 0.3s ease;
+.i-menu {
+  min-width: 120px;
+  width: 200px;
+  transition: all 0.3s ease;
 
-    .i-menu-content {
-      width: 100%;
-      height: 16px;
-      line-height: 16px;
-      display: flex;
-      background-color: rgba(37, 37, 37, 0.4);
-      padding: 4px;
+  .i-menu-content {
+    width: 100%;
+    height: 16px;
+    line-height: 16px;
+    display: flex;
+    background-color: rgba(37, 37, 37, 0.4);
+    padding: 4px;
 
-      .i-menu-expand-icon {
-        width: 12px;
-        height: 12px;
-        color: rgb(255, 247, 148);
-        margin-right: 8px;
-      }
-
-      .i-menu-label {
-        width: auto;
-        // font-size: 12px;
-      }
+    .i-menu-expand-icon {
+      width: 12px;
+      height: 12px;
+      color: rgb(255, 247, 148);
+      margin-right: 8px;
     }
 
-    .i-menu-items {
-      height: 0;
-      overflow: hidden;
-
-      &.expand {
-        height: 32px;
-      }
+    .i-menu-label {
+      width: auto;
+      // font-size: 12px;
     }
   }
+
+  .i-menu-items {
+    height: 0;
+    overflow: hidden;
+
+    &.expand {
+      height: 32px;
+    }
+  }
+}
 </style>
diff --git a/frontend/src/components/calc/option/index.vue b/frontend/src/components/calc/option/index.vue
index d807fbc1..996d40aa 100644
--- a/frontend/src/components/calc/option/index.vue
+++ b/frontend/src/components/calc/option/index.vue
@@ -1,4 +1,4 @@
 <script lang="tsx">
-import { HiItem } from "hoci"
+import { HiItem } from 'hoci'
 export default HiItem
 </script>
diff --git a/frontend/src/components/calc/pagination/index.vue b/frontend/src/components/calc/pagination/index.vue
index d3a5173a..3133dd6b 100644
--- a/frontend/src/components/calc/pagination/index.vue
+++ b/frontend/src/components/calc/pagination/index.vue
@@ -1,33 +1,35 @@
 <script lang="tsx">
-import { onKeyStroke } from "@vueuse/core"
-import type { PropType } from "vue";
-import { computed, defineComponent, onUnmounted } from "vue"
+import { onKeyStroke } from '@vueuse/core'
+import type { PropType } from 'vue'
+import { computed, defineComponent, onUnmounted } from 'vue'
 
 export default defineComponent({
   props: {
     page: {
       type: Number,
-      default: () => 0
+      default: () => 0,
     },
     totalPage: {
       type: Number,
-      default: () => 0
+      default: () => 0,
     },
     minPage: {
       type: Number,
-      default: () => 1
+      default: () => 1,
     },
     parent: {
       type: Object as PropType<HTMLElement>,
-      default: () => document
+      default: () => document,
     },
     disabled: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   setup(props, { emit }) {
-    const totalPage = computed(() => (Number.isNaN(props.totalPage) ? props.minPage : props.totalPage))
+    const totalPage = computed(() =>
+      Number.isNaN(props.totalPage) ? props.minPage : props.totalPage,
+    )
 
     const page = computed({
       get() {
@@ -37,17 +39,16 @@ export default defineComponent({
         return Math.max(Math.min(props.page, totalPage.value), props.minPage)
       },
       set(val) {
-        emit("update:page", val)
-      }
+        emit('update:page', val)
+      },
     })
 
-
     function prev(e: Event) {
       e.preventDefault()
       if (page.value > 1 && !props.disabled) {
         page.value--
-        emit("prev")
-        emit("change", page.value)
+        emit('prev')
+        emit('change', page.value)
       }
     }
 
@@ -55,13 +56,13 @@ export default defineComponent({
       e.preventDefault()
       if (page.value < totalPage.value && !props.disabled) {
         page.value = page.value + 1
-        emit("next")
-        emit("change", page.value)
+        emit('next')
+        emit('change', page.value)
       }
     }
 
-    const removePrev = onKeyStroke(["F1", "PageUp"], prev, { target: props.parent })
-    const removeNext = onKeyStroke(["F2", "PageDown"], next, { target: props.parent })
+    const removePrev = onKeyStroke(['F1', 'PageUp'], prev, { target: props.parent })
+    const removeNext = onKeyStroke(['F2', 'PageDown'], next, { target: props.parent })
 
     onUnmounted(() => {
       removePrev()
@@ -71,15 +72,23 @@ export default defineComponent({
     return () => {
       return (
         <div class="flex space-x-1 h-10 w-full items-center justify-center">
-          <calc-button icon="prev" disabled={page.value <= 1 || props.disabled} onClick={prev}></calc-button>
+          <calc-button
+            icon="prev"
+            disabled={page.value <= 1 || props.disabled}
+            onClick={prev}
+          ></calc-button>
           <span class="text-center w-8">
             {page.value}/{totalPage.value}
           </span>
-          <calc-button icon="next" disabled={page.value >= totalPage.value || props.disabled} onClick={next}></calc-button>
+          <calc-button
+            icon="next"
+            disabled={page.value >= totalPage.value || props.disabled}
+            onClick={next}
+          ></calc-button>
         </div>
       )
     }
-  }
+  },
 })
 </script>
 
diff --git a/frontend/src/components/calc/progress/index.vue b/frontend/src/components/calc/progress/index.vue
index 64b902d1..b465ba72 100644
--- a/frontend/src/components/calc/progress/index.vue
+++ b/frontend/src/components/calc/progress/index.vue
@@ -1,17 +1,17 @@
 <script lang="tsx">
-import { computed, defineComponent } from "vue"
+import { computed, defineComponent } from 'vue'
 
 export default defineComponent({
   props: {
     value: {
       type: [Number, String],
-      default: 0
+      default: 0,
     },
 
     total: {
       type: [Number, String],
-      default: 100
-    }
+      default: 100,
+    },
   },
   setup(props) {
     const progress = computed(() => {
@@ -24,16 +24,28 @@ export default defineComponent({
     return () => (
       <div class="border-solid bg-hex-171717 border-hex-272521 border-2">
         <div class="border-transparent border-solid border-2">
-          <div style={progress.value == 0 ? "width:0" : `width:${progress.value.toFixed(2)}%`} class="h-2 duration-200 calc-progress"></div>
+          <div
+            style={progress.value == 0 ? 'width:0' : `width:${progress.value.toFixed(2)}%`}
+            class="h-2 duration-200 calc-progress"
+          ></div>
         </div>
       </div>
     )
-  }
+  },
 })
 </script>
 
 <style lang="scss" scoped>
-  .calc-progress {
-    background: linear-gradient(to bottom, #48d0eb 0%, #6cf4fe 15%, #4fbdfe 30%, #3080fe 40%, #1d5bfe 55%, #3283fd 70%, #000456 100%);
-  }
+.calc-progress {
+  background: linear-gradient(
+    to bottom,
+    #48d0eb 0%,
+    #6cf4fe 15%,
+    #4fbdfe 30%,
+    #3080fe 40%,
+    #1d5bfe 55%,
+    #3283fd 70%,
+    #000456 100%
+  );
+}
 </style>
diff --git a/frontend/src/components/calc/select/index.vue b/frontend/src/components/calc/select/index.vue
index 7146c1a5..598f9841 100644
--- a/frontend/src/components/calc/select/index.vue
+++ b/frontend/src/components/calc/select/index.vue
@@ -1,57 +1,67 @@
 <script lang="tsx">
-import { selectionEmits, selectionProps, useSelectionList } from "hoci"
-import type { CSSProperties, PropType, RendererElement } from "vue";
-import { Teleport, Transition, computed, defineComponent, onDeactivated, ref, renderList, renderSlot, watch } from "vue"
+import { selectionEmits, selectionProps, useSelectionList } from 'hoci'
+import type { CSSProperties, PropType, RendererElement } from 'vue'
+import {
+  Teleport,
+  Transition,
+  computed,
+  defineComponent,
+  onDeactivated,
+  ref,
+  renderList,
+  renderSlot,
+  watch,
+} from 'vue'
 
-import { onClickOutside, useVModel } from "@vueuse/core"
-import { classPropType, labelPropType } from "@/components/hooks/types"
+import { onClickOutside, useVModel } from '@vueuse/core'
+import { classPropType, labelPropType } from '@/components/hooks/types'
 
 export default defineComponent({
-  name: "ISelect",
+  name: 'ISelect',
   props: {
     ...selectionProps,
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     width: {
       type: Number,
-      default: 120
+      default: 120,
     },
     emptyLabel: {
-      type: labelPropType
+      type: labelPropType,
     },
     highlight: {
       type: String,
       // warn remind
-      default: ""
+      default: '',
     },
     labelClass: {
       type: String,
-      default: ""
+      default: '',
     },
     inputClass: {
       type: classPropType,
-      default: ""
+      default: '',
     },
     appendTo: {
       type: [Object, String] as PropType<string | RendererElement | null | undefined>,
       default() {
-        return "body"
-      }
-    }
+        return 'body'
+      },
+    },
   },
   emits: [...selectionEmits],
   setup(props, context) {
-    const modelValue = useVModel(props, "modelValue", context.emit, { passive: true })
+    const modelValue = useVModel(props, 'modelValue', context.emit, { passive: true })
 
     const { renderItem } = useSelectionList(() => {
       return {
         ...props,
         modelValue: modelValue.value,
-        itemClass: "i-select-dropdown-item",
-        activeClass: "active",
-        unactiveClass: "unactive"
+        itemClass: 'i-select-dropdown-item',
+        activeClass: 'active',
+        unactiveClass: 'unactive',
       }
     }, context)
 
@@ -74,13 +84,13 @@ export default defineComponent({
         return {
           left: `${dropdownPosition.value.x}px`,
           top: `${dropdownPosition.value.y}px`,
-          width: `${dropdownPosition.value.w}px`
+          width: `${dropdownPosition.value.w}px`,
         }
       } else {
         return {
           left: `${dropdownPosition.value.x}px`,
           bottom: `${dropdownPosition.value.z}px`,
-          width: `${dropdownPosition.value.w}px`
+          width: `${dropdownPosition.value.w}px`,
         }
       }
     })
@@ -93,32 +103,31 @@ export default defineComponent({
             w: width,
             x: left,
             y: top + height + 2,
-            z: 0
+            z: 0,
           }
         } else {
           dropdownPosition.value = {
             w: width,
             x: left,
             z: window.innerHeight - top + 2,
-            y: 0
+            y: 0,
           }
         }
       }
     }
 
     const appendToRef = computed(() => {
-      return props.appendTo || "body"
+      return props.appendTo || 'body'
     })
 
-
     onClickOutside(triggerRef, () => (isOpen.value = false))
 
-    window.addEventListener("resize", onResize)
-    window.addEventListener("scroll", onResize)
+    window.addEventListener('resize', onResize)
+    window.addEventListener('scroll', onResize)
 
     onDeactivated(() => {
-      window.removeEventListener("resize", onResize)
-      window.removeEventListener("scroll", onResize)
+      window.removeEventListener('resize', onResize)
+      window.removeEventListener('scroll', onResize)
     })
 
     const { slots } = context
@@ -127,179 +136,193 @@ export default defineComponent({
       const children = renderItem()
       if (children) {
         if (!Array.isArray(children)) {
-          return <span class={["i-select-input"].concat(props.inputClass)}>{children}</span>
+          return <span class={['i-select-input'].concat(props.inputClass)}>{children}</span>
         } else if (children.length > 0) {
           return (
-            <span class={["i-select-input space-x-1"].concat(props.inputClass)}>
-              {renderList(children, item => (
+            <span class={['i-select-input space-x-1'].concat(props.inputClass)}>
+              {renderList(children, (item) => (
                 <span>{item}</span>
               ))}
             </span>
           )
         }
       }
-      const emptyLabel = typeof props.emptyLabel == "function" ? props.emptyLabel() : props.emptyLabel
+      const emptyLabel =
+        typeof props.emptyLabel == 'function' ? props.emptyLabel() : props.emptyLabel
       return <span class="w-full pl-2 i-select-input i-select-empty-label">{emptyLabel}</span>
     }
 
     return () => {
       return (
-        <div class={["min-w-20 w-40 i-select "].concat(props.highlight)} onClick={collapse} ref={selectRef}>
+        <div
+          class={['min-w-20 w-40 i-select '].concat(props.highlight)}
+          onClick={collapse}
+          ref={selectRef}
+        >
           <div
             class={{
-              "i-select-trigger": true,
-              "disabled": props.disabled
+              'i-select-trigger': true,
+              disabled: props.disabled,
             }}
             ref={triggerRef}
           >
             {renderLabel()}
-            <calc-button disabled={props.disabled} icon="dropdown" class="cursor-pointer"></calc-button>
+            <calc-button
+              disabled={props.disabled}
+              icon="dropdown"
+              class="cursor-pointer"
+            ></calc-button>
           </div>
           <Teleport to={appendToRef.value}>
             <Transition name="dropdown" mode="out-in">
-              <div class="i-select-dropdown" style={dropdownStyle.value} v-show={isOpen.value} ref={dropdownRef}>
-                {renderSlot(slots, "default")}
+              <div
+                class="i-select-dropdown"
+                style={dropdownStyle.value}
+                v-show={isOpen.value}
+                ref={dropdownRef}
+              >
+                {renderSlot(slots, 'default')}
               </div>
             </Transition>
           </Teleport>
         </div>
       )
     }
-  }
+  },
 })
 </script>
 
 <style lang="scss">
-  @use "sass:color";
-  $text-color: #937639;
-  .i-select {
-    min-width: 80px;
-    width: 160px;
-    user-select: none;
-    outline: none;
-    height: 16px;
-    min-height: 16px;
-    line-height: 100%;
-    // font-size: 12px;
-    color: $text-color;
-    background-color: rgba(0, 0, 0, 1);
-    border: 1px solid #5b472a;
-    border-radius: 2px;
+@use 'sass:color';
+$text-color: #937639;
+.i-select {
+  min-width: 80px;
+  width: 160px;
+  user-select: none;
+  outline: none;
+  height: 16px;
+  min-height: 16px;
+  line-height: 100%;
+  // font-size: 12px;
+  color: $text-color;
+  background-color: rgba(0, 0, 0, 1);
+  border: 1px solid #5b472a;
+  border-radius: 2px;
+  padding: 0;
+  padding-right: 3px;
+  margin: 0;
+  display: block;
+
+  .i-select-trigger {
     padding: 0;
-    padding-right: 3px;
-    margin: 0;
-    display: block;
+    display: flex;
+    height: 100%;
 
-    .i-select-trigger {
-      padding: 0;
-      display: flex;
-      height: 100%;
+    justify-content: space-between;
+    align-items: center;
 
-      justify-content: space-between;
-      align-items: center;
-
-      .i-select-input {
-        padding-left: 8px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        max-width: calc(100% - 20px);
-      }
-
-      .i-select-empty-label {
-        color: #5e5e5e;
-      }
-
-      &:hover {
-        .i-select-empty-label {
-          color: #757575;
-        }
-      }
-
-      &.disabled {
-        color: gray;
-      }
-    }
-
-    .i-select-trigger:hover {
-      opacity: 1;
-    }
-  }
-
-  .warn {
-    color: red !important;
-    border: 1px solid #aa8651;
-  }
-
-  .remind {
-    color: #32e432 !important;
-    border: 1px solid #aa8651;
-  }
-
-  .i-select-dropdown {
-    position: fixed;
-    max-height: 160px;
-    overflow-y: auto;
-    background: black;
-    // font-size: 12px;
-    z-index: 888;
-
-    $hoverColor: #002947;
-    $activeColor: color.scale($hoverColor, $lightness: 5%);
-    color: $text-color;
-
-    .i-select-dropdown-item {
-      // font-size: 12px;
-      height: 20px;
-      line-height: 20px;
-      margin: 0;
-      padding: 0 5px;
-      border: none;
-      outline: none;
-      appearance: none;
-      display: block;
+    .i-select-input {
+      padding-left: 8px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
+      max-width: calc(100% - 20px);
+    }
 
-      &.active {
-        // background-color: $activeColor;
-        color: #e9c556;
-      }
-      &.active::after {
-        content: "✓";
-        position: absolute;
-        right: 5px;
-      }
+    .i-select-empty-label {
+      color: #5e5e5e;
+    }
 
-      &:hover:not(.active) {
-        // font-size: 12px;
-        background-color: $hoverColor;
+    &:hover {
+      .i-select-empty-label {
+        color: #757575;
       }
     }
+
+    &.disabled {
+      color: gray;
+    }
   }
 
-  .dropdown-active {
-    animation: dropdown-enter 0.2s ease-in;
+  .i-select-trigger:hover {
+    opacity: 1;
   }
+}
 
-  .dropdown-active {
-    animation: dropdown-leave 0.2s ease-in;
-  }
+.warn {
+  color: red !important;
+  border: 1px solid #aa8651;
+}
 
-  .dropdown-enter-active {
-    animation: dropdown-enter 0.2s ease-in;
-  }
+.remind {
+  color: #32e432 !important;
+  border: 1px solid #aa8651;
+}
 
-  .dropdown-leave-active {
-    animation: dropdown-leave 0.2s ease-in;
-  }
+.i-select-dropdown {
+  position: fixed;
+  max-height: 160px;
+  overflow-y: auto;
+  background: black;
+  // font-size: 12px;
+  z-index: 888;
 
-  .dropdown-enter-active {
-    animation: dropdown-enter 0.2s ease-in;
-  }
+  $hoverColor: #002947;
+  $activeColor: color.scale($hoverColor, $lightness: 5%);
+  color: $text-color;
 
-  .dropdown-leave-active {
-    animation: dropdown-leave 0.2s ease-in;
+  .i-select-dropdown-item {
+    // font-size: 12px;
+    height: 20px;
+    line-height: 20px;
+    margin: 0;
+    padding: 0 5px;
+    border: none;
+    outline: none;
+    appearance: none;
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &.active {
+      // background-color: $activeColor;
+      color: #e9c556;
+    }
+    &.active::after {
+      content: '✓';
+      position: absolute;
+      right: 5px;
+    }
+
+    &:hover:not(.active) {
+      // font-size: 12px;
+      background-color: $hoverColor;
+    }
   }
+}
+
+.dropdown-active {
+  animation: dropdown-enter 0.2s ease-in;
+}
+
+.dropdown-active {
+  animation: dropdown-leave 0.2s ease-in;
+}
+
+.dropdown-enter-active {
+  animation: dropdown-enter 0.2s ease-in;
+}
+
+.dropdown-leave-active {
+  animation: dropdown-leave 0.2s ease-in;
+}
+
+.dropdown-enter-active {
+  animation: dropdown-enter 0.2s ease-in;
+}
+
+.dropdown-leave-active {
+  animation: dropdown-leave 0.2s ease-in;
+}
 </style>
diff --git a/frontend/src/components/calc/selection/index.vue b/frontend/src/components/calc/selection/index.vue
index 2d16b51b..24b57370 100644
--- a/frontend/src/components/calc/selection/index.vue
+++ b/frontend/src/components/calc/selection/index.vue
@@ -1,5 +1,5 @@
 <script lang="tsx">
-import { HiSelection } from "hoci"
+import { HiSelection } from 'hoci'
 
 export default HiSelection
 </script>
diff --git a/frontend/src/components/calc/shared.ts b/frontend/src/components/calc/shared.ts
index acb9ff67..879e13a8 100644
--- a/frontend/src/components/calc/shared.ts
+++ b/frontend/src/components/calc/shared.ts
@@ -1,3 +1,3 @@
-import type { InjectionKey } from "vue";
+import type { InjectionKey } from 'vue'
 
-export const CHECKBOX_GROUP: InjectionKey<boolean> = Symbol("checkbox-group")
+export const CHECKBOX_GROUP: InjectionKey<boolean> = Symbol('checkbox-group')
diff --git a/frontend/src/components/calc/slider/index.vue b/frontend/src/components/calc/slider/index.vue
index f8f5a1cf..a05249d6 100644
--- a/frontend/src/components/calc/slider/index.vue
+++ b/frontend/src/components/calc/slider/index.vue
@@ -3,37 +3,36 @@ import { defineComponent, ref, computed, shallowRef, watch } from 'vue'
 import { useVModel, useDraggable, clamp } from '@vueuse/core'
 
 export default defineComponent({
-  name: "ISlider",
+  name: 'ISlider',
   props: {
     modelValue: {
       type: Number,
-      default: 0
+      default: 0,
     },
     min: {
       type: Number,
-      default: 0
+      default: 0,
     },
     max: {
       type: Number,
-      default: 100
+      default: 100,
     },
     step: {
       type: Number,
-      default: 1
+      default: 1,
     },
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showPercent: {
       type: Boolean,
-      default: true
+      default: true,
     },
     formatValue: {
       type: Function,
-      default: undefined
-    }
-
+      default: undefined,
+    },
   },
   emits: ['update:modelValue', 'change'],
   setup(props, { emit }) {
@@ -47,17 +46,20 @@ export default defineComponent({
 
     useDraggable(buttonRef, {
       onMove(position) {
-        if (!runwayRef.value || props.disabled){
+        if (!runwayRef.value || props.disabled) {
           return
         }
         const runwayRect = runwayRef.value?.getBoundingClientRect()
 
-        if (!runwayRect){
-           return
+        if (!runwayRect) {
+          return
         }
 
         // 使用runway的位置和宽度来计算百分比
-        const percentage = Math.max(0, Math.min(100, ((position.x - runwayRect.left) / runwayRect.width) * 100))
+        const percentage = Math.max(
+          0,
+          Math.min(100, ((position.x - runwayRect.left) / runwayRect.width) * 100),
+        )
 
         const range = props.max - props.min
         let value = (percentage * range) / 100 + props.min
@@ -70,20 +72,17 @@ export default defineComponent({
 
         modelValue.value = value
         emit('change', value)
-      }
+      },
     })
 
     return () => (
       <div
         class={[
           'w-full h-8 relative cursor-pointer flex items-center gap-3 py-2',
-          { 'cursor-not-allowed': props.disabled }
+          { 'cursor-not-allowed': props.disabled },
         ]}
       >
-        <div
-          class="flex-1 h-1 bg-[#4D524D] relative"
-          ref={runwayRef}
-        >
+        <div class="flex-1 h-1 bg-[#4D524D] relative" ref={runwayRef}>
           <div
             class="h-1 bg-[#8E6D28] absolute left-0 top-0"
             style={{ width: `${percentage.value}%` }}
@@ -93,26 +92,32 @@ export default defineComponent({
             style={{ left: `calc(${percentage.value}% - 0.75rem)` }}
             ref={buttonRef}
           >
-            <div class={[
-              'w-4 h-4 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
-              'bg-gradient-to-b from-[#223768] to-[#122438]',
-              'border border-solid border-[#937639] rounded-full transition-all duration-200',
-              'shadow-[0_2px_4px_rgba(0,0,0,0.2)]',
-              { 'bg-gradient-to-b from-[#353535] to-[#1c1c1c] border-[#414141]': props.disabled }
-            ]}></div>
+            <div
+              class={[
+                'w-4 h-4 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
+                'bg-gradient-to-b from-[#223768] to-[#122438]',
+                'border border-solid border-[#937639] rounded-full transition-all duration-200',
+                'shadow-[0_2px_4px_rgba(0,0,0,0.2)]',
+                { 'bg-gradient-to-b from-[#353535] to-[#1c1c1c] border-[#414141]': props.disabled },
+              ]}
+            ></div>
           </div>
         </div>
         {props.showPercent && (
-          <div class={[
-            'w-auto min-w-5 text-center text-sm font-medium',
-            props.disabled ? 'text-[#696969]' : 'text-[#e9c556]'
-          ]}>
-            {props.formatValue ? props.formatValue(modelValue.value) : `${percentage.value.toFixed(0)}%`}
+          <div
+            class={[
+              'w-auto min-w-5 text-center text-sm font-medium',
+              props.disabled ? 'text-[#696969]' : 'text-[#e9c556]',
+            ]}
+          >
+            {props.formatValue
+              ? props.formatValue(modelValue.value)
+              : `${percentage.value.toFixed(0)}%`}
           </div>
         )}
       </div>
     )
-  }
+  },
 })
 </script>
 
@@ -204,4 +209,3 @@ export default defineComponent({
   font-weight: 500;
 }
 </style>
-
diff --git a/frontend/src/components/calc/tab/index.vue b/frontend/src/components/calc/tab/index.vue
index 2dcd7450..11fb93b9 100644
--- a/frontend/src/components/calc/tab/index.vue
+++ b/frontend/src/components/calc/tab/index.vue
@@ -1,16 +1,16 @@
 <script lang="tsx">
-import { defineComponent, renderSlot } from "vue"
-import { HiItem, selectionProps } from "hoci"
+import { defineComponent, renderSlot } from 'vue'
+import { HiItem, selectionProps } from 'hoci'
 
 export default defineComponent({
-  name: "CalcTab",
+  name: 'CalcTab',
   props: {
-    ...selectionProps
+    ...selectionProps,
   },
   setup(props, { slots }) {
     return () => {
-      return <HiItem {...props}>{renderSlot(slots, "default")}</HiItem>
+      return <HiItem {...props}>{renderSlot(slots, 'default')}</HiItem>
     }
-  }
+  },
 })
 </script>
diff --git a/frontend/src/components/calc/tabs/constants.ts b/frontend/src/components/calc/tabs/constants.ts
index dc06fe9f..4577bcc1 100644
--- a/frontend/src/components/calc/tabs/constants.ts
+++ b/frontend/src/components/calc/tabs/constants.ts
@@ -1,5 +1,5 @@
-export const AciveSymbol = Symbol("[i-tabs]active")
+export const AciveSymbol = Symbol('[i-tabs]active')
 
-export const AciveClassSymbol = Symbol("[i-tabs]active-class")
+export const AciveClassSymbol = Symbol('[i-tabs]active-class')
 
-export const ChangeActiveSymbol = Symbol("[i-tabs]change-active")
+export const ChangeActiveSymbol = Symbol('[i-tabs]change-active')
diff --git a/frontend/src/components/calc/tabs/index.vue b/frontend/src/components/calc/tabs/index.vue
index 850bd296..f1f40188 100644
--- a/frontend/src/components/calc/tabs/index.vue
+++ b/frontend/src/components/calc/tabs/index.vue
@@ -1,30 +1,30 @@
 <script lang="tsx">
-import { HiSelection, selectionProps } from "hoci"
-import type { PropType } from "vue";
-import { computed, defineComponent, renderSlot } from "vue"
-import type { LocationQuery } from "vue-router";
-import { parseQuery, useRouter } from "vue-router"
-import type { BaseType } from "@/components/hooks/types"
+import { HiSelection, selectionProps } from 'hoci'
+import type { PropType } from 'vue'
+import { computed, defineComponent, renderSlot } from 'vue'
+import type { LocationQuery } from 'vue-router'
+import { parseQuery, useRouter } from 'vue-router'
+import type { BaseType } from '@/components/hooks/types'
 
 export default defineComponent({
-  name: "CalcTabs",
+  name: 'CalcTabs',
   props: {
     ...selectionProps,
     vertical: {
-      type: Boolean
+      type: Boolean,
     },
     route: {
-      type: Boolean
+      type: Boolean,
     },
     query: {
-      type: [Object, String] as PropType<string | LocationQuery>
-    }
+      type: [Object, String] as PropType<string | LocationQuery>,
+    },
   },
   setup(props, { emit, slots }) {
     const router = useRouter()
 
     const routeQuery = computed(() => {
-      if (typeof props.query == "string") {
+      if (typeof props.query == 'string') {
         return parseQuery(props.query)
       }
       return props.query ?? {}
@@ -43,81 +43,86 @@ export default defineComponent({
           val = decodeURIComponent(val.toString())
           router.push({ path: val, query: routeQuery.value })
         }
-        emit("update:modelValue", val)
-        emit("change", val)
-      }
+        emit('update:modelValue', val)
+        emit('change', val)
+      },
     })
 
     return () => {
       return (
-        <HiSelection v-model={modelValue.value} class={{ "i-tabs": true, "vertical": !!props.vertical }} activeClass="active" itemClass={["i-tab cursor-pointer"].concat(props.itemClass)}>
-          {renderSlot(slots, "default")}
+        <HiSelection
+          v-model={modelValue.value}
+          class={{ 'i-tabs': true, vertical: !!props.vertical }}
+          activeClass="active"
+          itemClass={['i-tab cursor-pointer'].concat(props.itemClass)}
+        >
+          {renderSlot(slots, 'default')}
         </HiSelection>
       )
     }
-  }
+  },
 })
 </script>
 
 <style lang="scss">
 .i-tabs {
-    display: flex;
-    list-style: none;
-    align-items: flex-end;
-    border-bottom: 1px solid #4f4838;
-    width: 100%;
+  display: flex;
+  list-style: none;
+  align-items: flex-end;
+  border-bottom: 1px solid #4f4838;
+  width: 100%;
 
-    font-size: 14px;
+  font-size: 14px;
 
+  color: #c6b083;
+  margin: 0;
+  padding: 0;
+
+  a {
+    text-decoration: none;
     color: #c6b083;
-    margin: 0;
-    padding: 0;
-
-    a {
-      text-decoration: none;
-      color: #c6b083;
-      &:visited {
-        color: currentColor;
-      }
-    }
-
-    &.vertical {
-      flex-direction: column;
-
-      .i-tab {
-        border-radius: 0;
-      }
-    }
-
-    .i-tab {
-      // font-size: 12px;
-      margin-left: 1px;
-
-      width: 120px;
-      height: 20px;
-      line-height: 20px;
-      text-align: center;
-      text-decoration: none;
-
-      &:visited {
-        color: currentColor;
-      }
-
-      border: #4f4838 1px solid;
-      border-bottom: none;
-      border-radius: 5px 5px 0 0;
-      background: linear-gradient(to top, rgba(6, 6, 6, 0.9), rgba(52, 52, 52, 0.9));
-      transition: all 0.4s ease-in-out;
-
-      &:hover {
-        background: linear-gradient(#4a4b4e, #1d1e22);
-      }
-
-      &.active {
-        background: linear-gradient(#574d38, #25221d);
-        border-image: url("@/assets/img/control/active_top.png") 1 fill stretch;
-        // color: #ffb400;
-      }
+    &:visited {
+      color: currentColor;
     }
   }
+
+  &.vertical {
+    flex-direction: column;
+
+    .i-tab {
+      border-radius: 0;
+    }
+  }
+
+  .i-tab {
+    // font-size: 12px;
+    margin-left: 1px;
+
+    width: 120px;
+    height: 20px;
+    line-height: 20px;
+    text-align: center;
+    text-decoration: none;
+
+    &:visited {
+      color: currentColor;
+    }
+
+    border: #4f4838 1px solid;
+    border-bottom: none;
+    border-radius: 5px 5px 0 0;
+    background: linear-gradient(to top, rgba(6, 6, 6, 0.9), rgba(52, 52, 52, 0.9));
+    transition: all 0.4s ease-in-out;
+
+    &:hover {
+      background: linear-gradient(#4a4b4e, #1d1e22);
+    }
+
+    &.active {
+      background: linear-gradient(#574d38, #25221d);
+      border-image: url('@/assets/img/control/active_top.png') 1 fill stretch;
+      // color: #ffb400;
+    }
+  }
+}
 </style>
diff --git a/frontend/src/components/calc/tooltip/index.vue b/frontend/src/components/calc/tooltip/index.vue
index 2174da11..c4f5578c 100644
--- a/frontend/src/components/calc/tooltip/index.vue
+++ b/frontend/src/components/calc/tooltip/index.vue
@@ -1,24 +1,27 @@
 <script lang="tsx">
-import { defineComponent } from "vue"
-import { NTooltip } from "@/components/base"
+import { defineComponent } from 'vue'
+import { NTooltip } from '@/components/base'
 
-import { tooltipProps } from "@/components/base/tooltip"
+import { tooltipProps } from '@/components/base/tooltip'
 
 export default defineComponent({
-  name: "ITooltip",
+  name: 'ITooltip',
   components: { NTooltip },
   props: {
-    ...tooltipProps
+    ...tooltipProps,
   },
   setup(props, { slots }) {
     return () => {
       return (
-        <n-tooltip {...props} pop-class="i-popper z-999 fixed top-0 left-0 bg-black bg-opacity-90 border-1.5 border-hex-272928 rounded-2px border-solid">
+        <n-tooltip
+          {...props}
+          pop-class="i-popper z-999 fixed top-0 left-0 bg-black bg-opacity-90 border-1.5 border-hex-272928 rounded-2px border-solid"
+        >
           {slots}
         </n-tooltip>
       )
     }
-  }
+  },
 })
 </script>
 
diff --git a/frontend/src/components/calc/tree/index.vue b/frontend/src/components/calc/tree/index.vue
index 04f012da..34321b54 100644
--- a/frontend/src/components/calc/tree/index.vue
+++ b/frontend/src/components/calc/tree/index.vue
@@ -1,55 +1,55 @@
 <script lang="tsx">
-import { HiSelection, selectionProps } from "hoci"
-import { useVModel } from "@vueuse/core"
-import type { PropType } from "vue";
-import { computed, defineComponent, renderList, watch } from "vue"
-import CalcTreeNode from "./node.vue"
-import type { TreeNode } from "./types"
-import { labelPropType, valuePropType } from "@/components/hooks/types"
+import { HiSelection, selectionProps } from 'hoci'
+import { useVModel } from '@vueuse/core'
+import type { PropType } from 'vue'
+import { computed, defineComponent, renderList, watch } from 'vue'
+import CalcTreeNode from './node.vue'
+import type { TreeNode } from './types'
+import { labelPropType, valuePropType } from '@/components/hooks/types'
 
 const Tree = defineComponent({
-  name: "CalcTree",
+  name: 'CalcTree',
   props: {
     ...selectionProps,
     modelValue: {
       type: valuePropType,
-      default: () => null
+      default: () => null,
     },
     activeItem: {
       type: Object as PropType<TreeNode>,
-      default: () => null
+      default: () => null,
     },
     idKey: {
       type: String,
-      default: "id"
+      default: 'id',
     },
     label: {
-      type: labelPropType
+      type: labelPropType,
     },
     data: {
       type: Array as PropType<TreeNode[]>,
-      default: () => []
+      default: () => [],
     },
     depth: {
       type: [Number, String] as PropType<number>,
-      default: () => 0
+      default: () => 0,
     },
     depthStyle: {
-      type: Function as PropType<(depth: number) => string>
-    }
+      type: Function as PropType<(depth: number) => string>,
+    },
   },
   setup(props, { emit }) {
-    const modelValue = useVModel(props, "modelValue")
+    const modelValue = useVModel(props, 'modelValue')
 
     function onSelect(item?: TreeNode) {
       if (item) {
-        emit("select", item)
+        emit('select', item)
         item.onSelect?.()
       }
     }
 
     function loadItem(total: TreeNode[], items: TreeNode[]) {
-      items?.forEach(item => {
+      items?.forEach((item) => {
         if (item.children) {
           loadItem(total, item.children)
         }
@@ -62,31 +62,43 @@ const Tree = defineComponent({
       return loadItem([], props.data)
     })
 
-    watch(modelValue, val => {
+    watch(modelValue, (val) => {
       val = val ?? props.defaultValue
-      const item = children.value.find(item => item.value === val)
+      const item = children.value.find((item) => item.value === val)
       onSelect(item)
     })
 
     return () => {
       return (
-        <HiSelection {...props} activeClass="i-tree-node-active" v-model={modelValue.value} class="i-tree">
-          {renderList(props.data, item => {
-            return <CalcTreeNode {...item} onSelect={onSelect} depth-style={props.depthStyle} depth={props.depth} />
+        <HiSelection
+          {...props}
+          activeClass="i-tree-node-active"
+          v-model={modelValue.value}
+          class="i-tree"
+        >
+          {renderList(props.data, (item) => {
+            return (
+              <CalcTreeNode
+                {...item}
+                onSelect={onSelect}
+                depth-style={props.depthStyle}
+                depth={props.depth}
+              />
+            )
           })}
         </HiSelection>
       )
     }
-  }
+  },
 })
 
 export default Tree
 </script>
 
 <style>
-  .i-tree {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
+.i-tree {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
 </style>
diff --git a/frontend/src/components/calc/tree/node.vue b/frontend/src/components/calc/tree/node.vue
index c8b7ba8e..785a7c93 100644
--- a/frontend/src/components/calc/tree/node.vue
+++ b/frontend/src/components/calc/tree/node.vue
@@ -1,34 +1,34 @@
 <script lang="tsx">
-import { HiItem } from "hoci"
-import type { PropType } from "vue";
-import { Transition, computed, defineComponent, ref, renderList } from "vue"
-import type { TreeNode } from "./types"
+import { HiItem } from 'hoci'
+import type { PropType } from 'vue'
+import { Transition, computed, defineComponent, ref, renderList } from 'vue'
+import type { TreeNode } from './types'
 
 const NTreeNode = defineComponent({
   props: {
     label: {
       type: String,
-      default: ""
+      default: '',
     },
     value: {
       type: [String, Number, Boolean, Object, Array] as PropType<any>,
-      default: () => null
+      default: () => null,
     },
     children: {
       type: Array as PropType<TreeNode[]>,
-      default: () => []
+      default: () => [],
     },
     depth: {
       type: [String, Number] as PropType<number>,
-      default: 0
+      default: 0,
     },
     depthStyle: {
-      type: Function as PropType<(depth: number) => string>
+      type: Function as PropType<(depth: number) => string>,
     },
     depthOffset: {
       type: String,
-      default: "12px"
-    }
+      default: '12px',
+    },
   },
   setup(props, { emit }) {
     const isOpen = ref(false)
@@ -39,7 +39,7 @@ const NTreeNode = defineComponent({
     }
 
     function onSelect(item: TreeNode) {
-      return emit("select", item)
+      return emit('select', item)
     }
 
     const depthStyle = computed(() => {
@@ -51,109 +51,118 @@ const NTreeNode = defineComponent({
 
     return () => (
       <div class="w-full i-tree-item relative">
-        <HiItem label={props.label} value={props.value} style={depthStyle.value} class="flex i-tree-item-label  items-center" onClick={open}>
+        <HiItem
+          label={props.label}
+          value={props.value}
+          style={depthStyle.value}
+          class="flex i-tree-item-label  items-center"
+          onClick={open}
+        >
           <div class="top-0 right-0 bottom-0 left-0 absolute i-tree-item-active-mask"></div>
           <div class="top-0 right-0 bottom-0 left-0 absolute i-tree-item-mask"></div>
-          <calc-button v-show={props.children?.length} icon={isOpen.value ? "collapse-up" : "collapse-down"}></calc-button>
+          <calc-button
+            v-show={props.children?.length}
+            icon={isOpen.value ? 'collapse-up' : 'collapse-down'}
+          ></calc-button>
           <div class="pl-1">{props.label}</div>
         </HiItem>
         <Transition name="dropdown" mode="out-in">
           <div v-show={isOpen.value}>
-            {renderList(props.children, item => {
+            {renderList(props.children, (item) => {
               return <NTreeNode onSelect={onSelect} {...item} depth={Number(props.depth) + 1} />
             })}
           </div>
         </Transition>
       </div>
     )
-  }
+  },
 })
 
 export default NTreeNode
 </script>
 
 <style lang="scss">
-  .i-tree-item {
-    display: flex;
-    flex-direction: column;
-    cursor: pointer;
+.i-tree-item {
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
 
-    border: 1px solid transparent;
-    background-color: black;
-  }
+  border: 1px solid transparent;
+  background-color: black;
+}
 
-  .i-tree-item-label {
-    flex: 1;
-    height: 16px;
-    min-height: 16px;
-    color: #ddc593;
-    position: relative;
-    &:hover {
-      .i-tree-item-mask {
-        background: url("./img/item_hover.png") no-repeat;
-        background-size: 100% 100%;
-      }
-    }
-
-    &.i-tree-node-active {
-      .i-tree-item-active-mask {
-        background: url("./img/item_active.png") no-repeat;
-        background-size: 100% 100%;
-      }
+.i-tree-item-label {
+  flex: 1;
+  height: 16px;
+  min-height: 16px;
+  color: #ddc593;
+  position: relative;
+  &:hover {
+    .i-tree-item-mask {
+      background: url('./img/item_hover.png') no-repeat;
+      background-size: 100% 100%;
     }
   }
 
-  .icon-collapse-up {
-    background-image: url("./img/collapse_up.png");
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    background-position: center;
-    min-width: 13px !important;
-    width: 13px !important;
-    height: 13px !important;
+  &.i-tree-node-active {
+    .i-tree-item-active-mask {
+      background: url('./img/item_active.png') no-repeat;
+      background-size: 100% 100%;
+    }
   }
+}
 
-  .icon-collapse-down {
-    background-image: url("./img/collapse_down.png");
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    background-position: center;
-    min-width: 13px !important;
-    width: 13px !important;
-    height: 13px !important;
-  }
+.icon-collapse-up {
+  background-image: url('./img/collapse_up.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  min-width: 13px !important;
+  width: 13px !important;
+  height: 13px !important;
+}
 
-  .i-tree-dropdown {
-    width: 100%;
-    max-height: 0;
-    overflow: hidden;
-    background-color: #fff;
-    border-radius: 0.5rem;
-    box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.1);
-    transition: all 0.3s ease;
-  }
+.icon-collapse-down {
+  background-image: url('./img/collapse_down.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  min-width: 13px !important;
+  width: 13px !important;
+  height: 13px !important;
+}
 
-  .dropdown-active {
-    animation: dropdown-enter 0.2s ease-in;
-  }
+.i-tree-dropdown {
+  width: 100%;
+  max-height: 0;
+  overflow: hidden;
+  background-color: #fff;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
 
-  .dropdown-active {
-    animation: dropdown-leave 0.2s ease-in;
-  }
+.dropdown-active {
+  animation: dropdown-enter 0.2s ease-in;
+}
 
-  .dropdown-enter-active {
-    animation: dropdown-enter 0.2s ease-in;
-  }
+.dropdown-active {
+  animation: dropdown-leave 0.2s ease-in;
+}
 
-  .dropdown-leave-active {
-    animation: dropdown-leave 0.2s ease-in;
-  }
+.dropdown-enter-active {
+  animation: dropdown-enter 0.2s ease-in;
+}
 
-  .dropdown-enter-active {
-    animation: dropdown-enter 0.2s ease-in;
-  }
+.dropdown-leave-active {
+  animation: dropdown-leave 0.2s ease-in;
+}
 
-  .dropdown-leave-active {
-    animation: dropdown-leave 0.2s ease-in;
-  }
+.dropdown-enter-active {
+  animation: dropdown-enter 0.2s ease-in;
+}
+
+.dropdown-leave-active {
+  animation: dropdown-leave 0.2s ease-in;
+}
 </style>
diff --git a/frontend/src/components/calc/tree/types.ts b/frontend/src/components/calc/tree/types.ts
index 554d618d..bd4cf8a6 100644
--- a/frontend/src/components/calc/tree/types.ts
+++ b/frontend/src/components/calc/tree/types.ts
@@ -1,10 +1,10 @@
-export interface TreeNode {
-  label: string
-  id?: string | number
-  value?: any
-  children?: TreeNode[]
-  onSelect?: () => void
-  [key: string]: any
-}
-
-export interface TreeData {}
+export interface TreeNode {
+  label: string
+  id?: string | number
+  value?: any
+  children?: TreeNode[]
+  onSelect?: () => void
+  [key: string]: any
+}
+
+export interface TreeData {}
diff --git a/frontend/src/components/dnf/Avatar/List/index.vue b/frontend/src/components/dnf/Avatar/List/index.vue
index 3a948ddc..489998e6 100644
--- a/frontend/src/components/dnf/Avatar/List/index.vue
+++ b/frontend/src/components/dnf/Avatar/List/index.vue
@@ -36,11 +36,10 @@ const infoStyle = (part: string) => {
   //   x += 179
   //   index -= 5
   // }
-  if(part == '宠物'){
-    x+= 5*39
-    y+= 1*40
-  }
-  else if (part.includes('宠物装备')) {
+  if (part == '宠物') {
+    x += 5 * 39
+    y += 1 * 40
+  } else if (part.includes('宠物装备')) {
     x += 6 * 39
     y += (index - infoStore.avatarParts.findIndex((p) => p == '宠物装备-红')) * 40
   } else {
@@ -63,7 +62,7 @@ const choosePart = (part: string) => {
 
 const partName = (part: string) => {
   if (part == '武器装扮') return '武器'
-  if(part == '快捷栏装备') return '快捷'
+  if (part == '快捷栏装备') return '快捷'
   return part.replace('宠物装备-', '')
 }
 </script>
diff --git a/frontend/src/components/dnf/Equipment/Icon/index.vue b/frontend/src/components/dnf/Equipment/Icon/index.vue
index dde3f1a5..ec52e5cf 100644
--- a/frontend/src/components/dnf/Equipment/Icon/index.vue
+++ b/frontend/src/components/dnf/Equipment/Icon/index.vue
@@ -1,20 +1,21 @@
 <template>
   <template v-if="props.equipment">
-    <div class="relative" :class="{inactive: props.inactive}">
-      <div class="w-28px h-28px " :style="{ backgroundImage: `url(${getImageURL(props.equipment?.imageUrl)})` }">
-      <img :src="getLocalImageURL(rarity)" />
-    </div>
+    <div class="relative" :class="{ inactive: props.inactive }">
+      <div
+        class="w-28px h-28px"
+        :style="{ backgroundImage: `url(${getImageURL(props.equipment?.imageUrl)})` }"
+      >
+        <img :src="getLocalImageURL(rarity)" />
+      </div>
     </div>
   </template>
   <template v-else>
-    <div class="w-26px h-26px border-1px border-solid  border-#7a7a7a/50"></div>
+    <div class="w-26px h-26px border-1px border-solid border-#7a7a7a/50"></div>
   </template>
-
 </template>
 
-
 <script lang="ts" setup>
-import type { IEquipment } from '@/api/info/type';
+import type { IEquipment } from '@/api/info/type'
 import { getImageURL } from '@/utils/images'
 
 const props = defineProps<{
@@ -22,8 +23,8 @@ const props = defineProps<{
   inactive?: boolean
 }>()
 
-const rarity = computed(()=>{
-  switch(props.equipment?.rarity){
+const rarity = computed(() => {
+  switch (props.equipment?.rarity) {
     case '稀有':
       return 'rare'
     case '神器':
@@ -39,14 +40,13 @@ const rarity = computed(()=>{
   }
 })
 
-const getLocalImageURL = (rarity:string)=>{
+const getLocalImageURL = (rarity: string) => {
   return new URL(`./rarity/${rarity}.png`, import.meta.url).href
 }
-
-</script>``
+</script>
+``
 
 <style lang="scss" scoped>
-
 // @keyframes primeval {
 //   @for $i from 0 through 29 {
 //     #{percentage($i / 29)} {
@@ -78,5 +78,4 @@ const getLocalImageURL = (rarity:string)=>{
     // filter: grayscale(100%);
   }
 }
-
 </style>
diff --git a/frontend/src/components/dnf/Equipment/Info/index.vue b/frontend/src/components/dnf/Equipment/Info/index.vue
index ae34e7b8..09fccf3e 100644
--- a/frontend/src/components/dnf/Equipment/Info/index.vue
+++ b/frontend/src/components/dnf/Equipment/Info/index.vue
@@ -17,7 +17,7 @@
           <Icon :equipment="props.equipment"></Icon>
         </div>
         <div style="line-height: 15px">
-          <div :class="[rarity,'pl-5px']">{{ props.equipment?.name }}</div>
+          <div :class="[rarity, 'pl-5px']">{{ props.equipment?.name }}</div>
           <div class="pl-5px text-#3ea74e">{{ props.equipment?.categorize }}</div>
         </div>
       </div>
@@ -28,29 +28,35 @@
         <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
+        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
+        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="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>
 
@@ -65,29 +71,44 @@ const props = defineProps<{
 
 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 = ""
+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`
+      info += `${formatAttr(attr, item?.[0])}\n`
     }
   }
-  return info;
-
-
+  return info
 })
 
-const detail = computed(()=>props.equipment?.detail.replace(/\[([^\[\]技能]+?)\]/g, '<span style="color:#3d9147">[$1]</span>'))
+const detail = computed(() =>
+  props.equipment?.detail.replace(
+    /\[([^\[\]技能]+?)\]/g,
+    '<span style="color:#3d9147">[$1]</span>',
+  ),
+)
 
-const bufferDetail = computed(()=>
-{
+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>')
-} )
-
+  if (!detail || detail == '-') return undefined
+  return props.equipment?.bufferDetail.replace(
+    /\[([^\[\]技能]+?)\]/g,
+    '<span style="color:#3d9147">[$1]</span>',
+  )
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/components/dnf/Equipment/List/index.vue b/frontend/src/components/dnf/Equipment/List/index.vue
index 112e5e1d..57395f61 100644
--- a/frontend/src/components/dnf/Equipment/List/index.vue
+++ b/frontend/src/components/dnf/Equipment/List/index.vue
@@ -22,16 +22,14 @@
     </template>
     <div
       v-if="props.withSubWeapon"
-        class="pos-absolute text-white/50 w-26px h-26px border-1px border-solid border-#7a7a7a/50 flex items-center justify-center"
-        style="left:150px;top:5px;z-index:8;"
-        @click="choosePart('副武器')"
-      >
+      class="pos-absolute text-white/50 w-26px h-26px border-1px border-solid border-#7a7a7a/50 flex items-center justify-center"
+      style="left: 150px; top: 5px; z-index: 8"
+      @click="choosePart('副武器')"
+    >
       <template v-if="detail?.['副武器']?.id">
-          <EquipmentIcon :equipment="equ(detail['副武器'].id)" />
-        </template>
-        <template v-else>
-          副武
-        </template>
+        <EquipmentIcon :equipment="equ(detail['副武器'].id)" />
+      </template>
+      <template v-else> 副武 </template>
     </div>
   </div>
 </template>
@@ -58,10 +56,10 @@ const props = defineProps({
   detail: {
     type: Object as PropType<Record<string, IConfigEquip>>,
   },
-  withSubWeapon:{
+  withSubWeapon: {
     type: Boolean,
     default: false,
-  }
+  },
 })
 const partModelValue = useVModel(props, 'part')
 const infoStore = useInfoStore()
diff --git a/frontend/src/components/dnf/Equipment/PartSelect/index.vue b/frontend/src/components/dnf/Equipment/PartSelect/index.vue
index 89cd3f97..25080390 100644
--- a/frontend/src/components/dnf/Equipment/PartSelect/index.vue
+++ b/frontend/src/components/dnf/Equipment/PartSelect/index.vue
@@ -1,11 +1,16 @@
 <template>
-<calc-cascader class="!h-5  flex-1" v-model="selected" :items="items" placeholder="请输入名称搜索"></calc-cascader>
+  <calc-cascader
+    class="!h-5 flex-1"
+    v-model="selected"
+    :items="items"
+    placeholder="请输入名称搜索"
+  ></calc-cascader>
 </template>
 
 <script lang="ts" setup>
-import type { TreeNode } from "@/components/calc/tree/types"
-import { useInfoStore } from "@/stores"
-import { syncRef, useVModel } from "@vueuse/core"
+import type { TreeNode } from '@/components/calc/tree/types'
+import { useInfoStore } from '@/stores'
+import { syncRef, useVModel } from '@vueuse/core'
 
 const props = defineProps({
   partList: {
@@ -24,9 +29,9 @@ const else_parts = ['称号', '宠物']
 
 const emit = defineEmits([])
 
-const choose_part = useVModel(props, "partList",emit,{passive:true})
+const choose_part = useVModel(props, 'partList', emit, { passive: true })
 
-const selected = ref("")
+const selected = ref('')
 
 const infoStore = useInfoStore()
 
diff --git a/frontend/src/components/dnf/Equipment/RaritySelect/index.vue b/frontend/src/components/dnf/Equipment/RaritySelect/index.vue
index af1b765f..23f7e44b 100644
--- a/frontend/src/components/dnf/Equipment/RaritySelect/index.vue
+++ b/frontend/src/components/dnf/Equipment/RaritySelect/index.vue
@@ -1,50 +1,56 @@
 <template>
   <div class="flex gap-8px">
-    <template v-for="(rarity,_) in rarities" :key="_">
-      <div class="w-14px h-14px shadow-[0px_0px_3px_#ffffff_inset,0px_0px_1px_#ffffff40]" :style="{background: rarity.background}" @click="choose(rarity.value)">
-        <div class="w-14px h-14px" :class="{'active': value === rarity.value}"></div>
+    <template v-for="(rarity, _) in rarities" :key="_">
+      <div
+        class="w-14px h-14px shadow-[0px_0px_3px_#ffffff_inset,0px_0px_1px_#ffffff40]"
+        :style="{ background: rarity.background }"
+        @click="choose(rarity.value)"
+      >
+        <div class="w-14px h-14px" :class="{ active: value === rarity.value }"></div>
       </div>
     </template>
   </div>
 </template>
 
 <script lang="ts" setup>
-
 const props = defineProps({})
 
 const value = defineModel<string>()
 
-const rarities = [{
-  value: '稀有',
-  background: '#d06eff',
-},{
-  value: '神器',
-  background: '#fe11ff',
-},{
-  value: '传说',
-  background: '#fc8711',
-},{
-  value: '史诗',
-  background: '#feca11',
-},{
-  value: '太初',
-  background: 'linear-gradient(180deg, #70faa7 0%, #7bfefe 100%)',
-}]
+const rarities = [
+  {
+    value: '稀有',
+    background: '#d06eff',
+  },
+  {
+    value: '神器',
+    background: '#fe11ff',
+  },
+  {
+    value: '传说',
+    background: '#fc8711',
+  },
+  {
+    value: '史诗',
+    background: '#feca11',
+  },
+  {
+    value: '太初',
+    background: 'linear-gradient(180deg, #70faa7 0%, #7bfefe 100%)',
+  },
+]
 
 const choose = (rarity: string) => {
   if (value.value === rarity) {
     value.value = undefined
-  }
-  else{
+  } else {
     value.value = rarity
   }
 }
-
 </script>
 
 <style lang="scss" scoped>
-
-.active{
+.active {
   background: url('@/assets/img/control/item_checked.png') no-repeat center;
   background-size: 12px 10px;
 }
diff --git a/frontend/src/components/dnf/Equipment/SuitInfo/index.vue b/frontend/src/components/dnf/Equipment/SuitInfo/index.vue
index 117006be..6dc13475 100644
--- a/frontend/src/components/dnf/Equipment/SuitInfo/index.vue
+++ b/frontend/src/components/dnf/Equipment/SuitInfo/index.vue
@@ -13,8 +13,13 @@
       "
     >
       <!-- 装备图标 装备名称 -->
-      <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="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>
@@ -42,7 +47,7 @@
 
 <script lang="ts" setup>
 import type { IEquipment, ISuit } from '@/api/info/type'
-import {getImageURL} from '@/utils/images'
+import { getImageURL } from '@/utils/images'
 import { formatAttr, rarityClass } from '@/utils'
 
 const props = defineProps<{
diff --git a/frontend/src/components/hooks/README b/frontend/src/components/hooks/README
index ad05ab2b..f5efaf4e 100644
--- a/frontend/src/components/hooks/README
+++ b/frontend/src/components/hooks/README
@@ -1 +1 @@
-通用的函数式组件
\ No newline at end of file
+通用的函数式组件
diff --git a/frontend/src/components/hooks/dialog.ts b/frontend/src/components/hooks/dialog.ts
index 5a313d97..4210e9f0 100644
--- a/frontend/src/components/hooks/dialog.ts
+++ b/frontend/src/components/hooks/dialog.ts
@@ -1,10 +1,10 @@
-import { h, reactive, renderList } from "vue"
-import { createSharedComposable } from "@vueuse/core"
-import ActionDialog from "@/components/calc/action-dialog/index.vue"
-import type { JSX } from "vue/jsx-runtime"
+import { h, reactive, renderList } from 'vue'
+import { createSharedComposable } from '@vueuse/core'
+import ActionDialog from '@/components/calc/action-dialog/index.vue'
+import type { JSX } from 'vue/jsx-runtime'
 
-export type ConfirmDialogOption = Omit<ShowDialogOption, "okButton" | "cancelButton">
-export type AlertDialogOption = Omit<ShowDialogOption, "okButton" | "cancelButton">
+export type ConfirmDialogOption = Omit<ShowDialogOption, 'okButton' | 'cancelButton'>
+export type AlertDialogOption = Omit<ShowDialogOption, 'okButton' | 'cancelButton'>
 export type ElementLike = JSX.Element | string | ElementLike[]
 
 function randomId() {
@@ -54,7 +54,7 @@ export interface ShowDialogOption {
   rejectButton?: string | boolean
 
   // 默认状态
-  defaultStatus?: DialogResult["status"]
+  defaultStatus?: DialogResult['status']
 
   mask?: boolean
 
@@ -70,7 +70,7 @@ export interface DialogInstance {
 
 export interface DialogResult {
   id: DialogID
-  status: "ok" | "reject" | "cancel" | "none"
+  status: 'ok' | 'reject' | 'cancel' | 'none'
   data?: any
   readonly isOk: boolean
   readonly isCancel: boolean
@@ -87,23 +87,23 @@ export const useDialog = createSharedComposable(() => {
     return id
   }
 
-  function close(id: DialogID, status = "cancel", duration = 400) {
+  function close(id: DialogID, status = 'cancel', duration = 400) {
     const dialog = dialogs.get(id)
     if (!dialog) {
       return
     }
     dialog.resolve({
       id,
-      status: "ok",
+      status: 'ok',
       get isOk() {
-        return status == "ok"
+        return status == 'ok'
       },
       get isCancel() {
-        return status == "cancel"
+        return status == 'cancel'
       },
       get isReject() {
-        return status == "reject"
-      }
+        return status == 'reject'
+      },
     })
     dialog.visible = false
     const fn = () => dialogs.delete(id)
@@ -115,14 +115,27 @@ export const useDialog = createSharedComposable(() => {
   }
 
   function render() {
-    return renderList(dialogs.values(), e => e.render(e.visible))
+    return renderList(dialogs.values(), (e) => e.render(e.visible))
   }
 
   async function show(option: ShowDialogOption = {}) {
-    return new Promise<DialogResult>(resolve => {
-      const { id = randomId(), header = true, content, action, timeout, okButton = false, cancelButton = false, rejectButton = false, defaultStatus = "none", duration = 400, mask = false, scale = 1.0 } = option
+    return new Promise<DialogResult>((resolve) => {
+      const {
+        id = randomId(),
+        header = true,
+        content,
+        action,
+        timeout,
+        okButton = false,
+        cancelButton = false,
+        rejectButton = false,
+        defaultStatus = 'none',
+        duration = 400,
+        mask = false,
+        scale = 1.0,
+      } = option
 
-      const onClose = (status: DialogResult["status"] = defaultStatus) => {
+      const onClose = (status: DialogResult['status'] = defaultStatus) => {
         close(id, status, duration)
       }
 
@@ -141,23 +154,30 @@ export const useDialog = createSharedComposable(() => {
               visible,
               onClose,
               mask,
-              scale
+              scale,
             },
             {
               default() {
                 switch (typeof content) {
-                  case "function":
+                  case 'function':
                     return content()
-                  case "string":
-                    return h("div", { class: "w-full justify-center text-hex-d4d6b6 text-center", style: "margin:10px" }, content)
+                  case 'string':
+                    return h(
+                      'div',
+                      {
+                        class: 'w-full justify-center text-hex-d4d6b6 text-center',
+                        style: 'margin:10px',
+                      },
+                      content,
+                    )
                   default:
                     return content
                 }
               },
-              action: typeof action == "function" || !action ? action : () => action
-            }
+              action: typeof action == 'function' || !action ? action : () => action,
+            },
           )
-        }
+        },
       })
 
       if (timeout) {
@@ -169,18 +189,18 @@ export const useDialog = createSharedComposable(() => {
   async function alert(option: AlertDialogOption = {}) {
     return show({
       ...option,
-      defaultStatus: "ok",
+      defaultStatus: 'ok',
       okButton: true,
-      cancelButton: false
+      cancelButton: false,
     })
   }
 
   async function confirm(option: ConfirmDialogOption = {}) {
     return show({
       ...option,
-      defaultStatus: "cancel",
+      defaultStatus: 'cancel',
       okButton: true,
-      cancelButton: true
+      cancelButton: true,
     })
   }
   return {
@@ -189,6 +209,6 @@ export const useDialog = createSharedComposable(() => {
     render,
     show,
     close,
-    randomId
+    randomId,
   }
 })
diff --git a/frontend/src/components/hooks/show.ts b/frontend/src/components/hooks/show.ts
index f7fb6c62..8a47c5eb 100644
--- a/frontend/src/components/hooks/show.ts
+++ b/frontend/src/components/hooks/show.ts
@@ -1,8 +1,8 @@
-import type { Fn } from "@vueuse/core"
-import type { InjectionKey, Ref } from "vue";
-import { inject, provide, ref, watch } from "vue"
+import type { Fn } from '@vueuse/core'
+import type { InjectionKey, Ref } from 'vue'
+import { inject, provide, ref, watch } from 'vue'
 
-const IsOpenSymbol: InjectionKey<Ref<boolean>> = Symbol("is-open")
+const IsOpenSymbol: InjectionKey<Ref<boolean>> = Symbol('is-open')
 
 export function isShow() {
   return inject(IsOpenSymbol, ref(false))
@@ -15,12 +15,12 @@ interface OnShowOption {
 export function onShow(fn: Fn, { immediate = false }: OnShowOption = {}) {
   return watch(
     isShow(),
-    val => {
+    (val) => {
       if (val) {
         fn()
       }
     },
-    { immediate }
+    { immediate },
   )
 }
 
diff --git a/frontend/src/components/hooks/types.ts b/frontend/src/components/hooks/types.ts
index 6c837061..6b879ca9 100644
--- a/frontend/src/components/hooks/types.ts
+++ b/frontend/src/components/hooks/types.ts
@@ -1,4 +1,4 @@
-import type { PropType } from "vue"
+import type { PropType } from 'vue'
 
 export type ClassType = string | string[]
 
@@ -8,4 +8,6 @@ export const valuePropType = [String, Number, Object, Boolean, Array] as PropTyp
 
 export const classPropType = [String, Array] as PropType<string | string[]>
 
-export const labelPropType = [String, Function] as PropType<string | ((val?: BaseType) => string) | null>
+export const labelPropType = [String, Function] as PropType<
+  string | ((val?: BaseType) => string) | null
+>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 0b9c679e..10235fa3 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,7 +1,7 @@
 import '@/style/index.scss'
 
 import { createApp } from 'vue'
-import { pinia } from "@/stores"
+import { pinia } from '@/stores'
 
 import App from '@/pages/IndexView.vue'
 
diff --git a/frontend/src/pages/Character/Equipment/Index.vue b/frontend/src/pages/Character/Equipment/Index.vue
index 1bf9383d..55c71165 100644
--- a/frontend/src/pages/Character/Equipment/Index.vue
+++ b/frontend/src/pages/Character/Equipment/Index.vue
@@ -1,34 +1,34 @@
 <template>
-    <div class="mx-10px">
-      <calc-collapse title="武器/称号/宠物/秘宝">
-        <calc-tabs  v-model="anotherTab" class="!mb-2">
-          <calc-tab :value="0">武器</calc-tab>
-          <calc-tab :value="1">称号/宠物/秘宝</calc-tab>
-          <calc-tab :value="2" v-if="infoStore.infos?.alter.includes('vegabond')">副武器</calc-tab>
-        </calc-tabs>
-        <Weapon v-show="anotherTab === 0"></Weapon>
-        <Else v-show="anotherTab === 1"></Else>
-        <SubWeapon v-show="anotherTab === 2"></SubWeapon>
-      </calc-collapse>
-      <calc-collapse title="套装/通宝">
-        <calc-tabs v-model="equTab" class="!mb-2">
-          <calc-tab :value="0">套装</calc-tab>
-          <calc-tab :value="1">通宝</calc-tab>
-        </calc-tabs>
-        <Suit v-show="equTab === 0"></Suit>
-        <Universal v-show="equTab === 1"></Universal>
-      </calc-collapse>
-      <calc-collapse title="融合石">
-        <calc-tabs v-model="stoneTab" class="!mb-2">
-          <calc-tab :value="0">套装</calc-tab>
-          <calc-tab :value="1">通宝</calc-tab>
-          <calc-tab :value="2">其他</calc-tab>
-        </calc-tabs>
-        <Stone v-show="stoneTab == 0"></Stone>
-        <StoneUniversal v-show="stoneTab == 1"></StoneUniversal>
-        <StoneOld v-show="stoneTab == 2"></StoneOld>
-      </calc-collapse>
-    </div>
+  <div class="mx-10px">
+    <calc-collapse title="武器/称号/宠物/秘宝">
+      <calc-tabs v-model="anotherTab" class="!mb-2">
+        <calc-tab :value="0">武器</calc-tab>
+        <calc-tab :value="1">称号/宠物/秘宝</calc-tab>
+        <calc-tab :value="2" v-if="infoStore.infos?.alter.includes('vegabond')">副武器</calc-tab>
+      </calc-tabs>
+      <Weapon v-show="anotherTab === 0"></Weapon>
+      <Else v-show="anotherTab === 1"></Else>
+      <SubWeapon v-show="anotherTab === 2"></SubWeapon>
+    </calc-collapse>
+    <calc-collapse title="套装/通宝">
+      <calc-tabs v-model="equTab" class="!mb-2">
+        <calc-tab :value="0">套装</calc-tab>
+        <calc-tab :value="1">通宝</calc-tab>
+      </calc-tabs>
+      <Suit v-show="equTab === 0"></Suit>
+      <Universal v-show="equTab === 1"></Universal>
+    </calc-collapse>
+    <calc-collapse title="融合石">
+      <calc-tabs v-model="stoneTab" class="!mb-2">
+        <calc-tab :value="0">套装</calc-tab>
+        <calc-tab :value="1">通宝</calc-tab>
+        <calc-tab :value="2">其他</calc-tab>
+      </calc-tabs>
+      <Stone v-show="stoneTab == 0"></Stone>
+      <StoneUniversal v-show="stoneTab == 1"></StoneUniversal>
+      <StoneOld v-show="stoneTab == 2"></StoneOld>
+    </calc-collapse>
+  </div>
 </template>
 
 <script lang="ts" setup name="Index">
@@ -46,7 +46,4 @@ const infoStore = useInfoStore()
 const equTab = ref(0)
 const stoneTab = ref(0)
 const anotherTab = ref(0)
-
 </script>
-
-
diff --git a/frontend/src/pages/Character/Equipment/components/Else.vue b/frontend/src/pages/Character/Equipment/components/Else.vue
index 89f1205d..c8e3ff79 100644
--- a/frontend/src/pages/Character/Equipment/components/Else.vue
+++ b/frontend/src/pages/Character/Equipment/components/Else.vue
@@ -3,7 +3,11 @@
 <template>
   <div class="flex flex-wrap gap-4px content-start" :style="{ width: `${rowCount * 32}px` }">
     <template v-for="(equ, _) in equs" :key="_">
-      <EquipmentIcon :equipment="equ" :inactive="configStore.config.equips[equ?.itemDetailType ?? '']?.id != equ?.id" @click="configStore.chooseEqu(equ)"/>
+      <EquipmentIcon
+        :equipment="equ"
+        :inactive="configStore.config.equips[equ?.itemDetailType ?? '']?.id != equ?.id"
+        @click="configStore.chooseEqu(equ)"
+      />
     </template>
   </div>
 </template>
@@ -23,30 +27,23 @@ const infoStore = useInfoStore()
 const configStore = useConfigStore()
 
 const equs = computed(() => {
-  const items = infoStore.equips.filter(
-    (equip) => ['称号','宠物'].includes(equip.itemDetailType),
-  )
+  const items = infoStore.equips.filter((equip) => ['称号', '宠物'].includes(equip.itemDetailType))
   const res: (IEquipment | undefined)[] = []
   Array.from(new Set(items.map((item) => item.itemDetailType))).forEach((type) => {
     const equList = items.filter((item) => item.itemDetailType === type)
     equList.sort((a, b) => {
       if (a.itemType !== b.itemType) {
-      return b.itemType.localeCompare(a.itemType)
+        return b.itemType.localeCompare(a.itemType)
       }
       const rarityOrder = ['传说', '神器', '稀有']
       return rarityOrder.indexOf(a.rarity) - rarityOrder.indexOf(b.rarity)
     })
-    res.push(
-      ...equList
-    )
+    res.push(...equList)
     const remind = rowCount - (res.length % rowCount)
     res.push(...Array(remind + rowCount).fill(undefined))
   })
-  const treasure = infoStore.equips.filter(
-    (equip) => equip.categorize.includes('秘宝'),
-  )
-  res.push(...treasure,...Array(rowCount-treasure.length).fill(undefined))
+  const treasure = infoStore.equips.filter((equip) => equip.categorize.includes('秘宝'))
+  res.push(...treasure, ...Array(rowCount - treasure.length).fill(undefined))
   return res
 })
-
 </script>
diff --git a/frontend/src/pages/Character/Equipment/components/Stone.vue b/frontend/src/pages/Character/Equipment/components/Stone.vue
index f4f2f7b3..629c1695 100644
--- a/frontend/src/pages/Character/Equipment/components/Stone.vue
+++ b/frontend/src/pages/Character/Equipment/components/Stone.vue
@@ -3,35 +3,39 @@
 <template>
   <div>
     <div class="flex flex-col gap-10px pb-10px">
-    <!-- 套装选择tab -->
-    <div class="flex flex-wrap w-100%">
-      <template v-for="(suit, _) in suits" :key="_">
-        <div class="flex items-center justify-center">
-          <img
-            class="w-35px h-35px object-contain"
-            :src="getImageURL('equipment' + suit.imageUrl)"
-            :alt="suit.name"
-            :style="{ filter: curSuit === suit.value ? '' : 'grayscale(100%)' }"
-            @click="curSuit = suit.value"
-            @dblclick="handleDoubleClick"
+      <!-- 套装选择tab -->
+      <div class="flex flex-wrap w-100%">
+        <template v-for="(suit, _) in suits" :key="_">
+          <div class="flex items-center justify-center">
+            <img
+              class="w-35px h-35px object-contain"
+              :src="getImageURL('equipment' + suit.imageUrl)"
+              :alt="suit.name"
+              :style="{ filter: curSuit === suit.value ? '' : 'grayscale(100%)' }"
+              @click="curSuit = suit.value"
+              @dblclick="handleDoubleClick"
+            />
+          </div>
+        </template>
+      </div>
+      <EquipmentRaritySelect v-model="curRarity" />
+    </div>
+
+    <div class="flex flex-wrap gap-4px content-start" :style="{ width: `${rowCount * 32}px` }">
+      <template v-for="(equip, _) in suitEquipments" :key="_">
+        <template v-if="equip?.rarity == curRarity || !curRarity">
+          <EquipmentIcon
+            :equipment="equip"
+            :inactive="configStore.config.equips[equip?.itemDetailType ?? '']?.fusion != equip?.id"
+            @click="configStore.chooseEqu(equip, true)"
           />
-        </div>
+        </template>
+
+        <template v-else>
+          <EquipmentIcon />
+        </template>
       </template>
     </div>
-    <EquipmentRaritySelect v-model="curRarity" />
-    </div>
-
-    <div class="flex flex-wrap gap-4px content-start" :style="{width: `${rowCount * 32}px`}">
-    <template v-for="(equip,_) in suitEquipments" :key="_">
-      <template v-if="equip?.rarity == curRarity || !curRarity">
-        <EquipmentIcon :equipment="equip" :inactive="configStore.config.equips[equip?.itemDetailType ?? '']?.fusion != equip?.id" @click="configStore.chooseEqu(equip,true)"/>
-      </template>
-
-      <template v-else>
-        <EquipmentIcon/>
-      </template>
-    </template>
-  </div>
   </div>
 </template>
 
@@ -48,7 +52,7 @@ const curSuit = ref(16201)
 const curRarity = ref()
 
 const props = defineProps<{
-  rowCount?:number
+  rowCount?: number
 }>()
 
 const rowCount = Math.max(props.rowCount ?? 0, 14)
@@ -64,30 +68,30 @@ const suits = computed(() => {
 })
 
 const suitEquipments = computed(() => {
-  const equs =  infoStore.stones.filter((a) => a.suit.includes(curSuit.value.toString()) && a.suit.length === 1 )
+  const equs = infoStore.stones.filter(
+    (a) => a.suit.includes(curSuit.value.toString()) && a.suit.length === 1,
+  )
 
   const res: (IEquipment | undefined)[] = []
-  const raritiyList = ['神器','传说','史诗']
+  const raritiyList = ['神器', '传说', '史诗']
 
   raritiyList.forEach((rarity) => {
-    const equ : (IEquipment | undefined)[]  = equs.filter((a) => a.rarity === rarity)
-    equ.splice(5,0,undefined)
-    equ.splice(9,0,undefined)
-    res.push(
-      ...equ,
-      ...Array(Math.max(0,rowCount - equ.length)).fill(undefined),
-    )
+    const equ: (IEquipment | undefined)[] = equs.filter((a) => a.rarity === rarity)
+    equ.splice(5, 0, undefined)
+    equ.splice(9, 0, undefined)
+    res.push(...equ, ...Array(Math.max(0, rowCount - equ.length)).fill(undefined))
   })
   return res
 })
 
-
 const handleDoubleClick = () => {
-  if(!curRarity.value) return
-  if(curRarity.value == '太初') return
-  suitEquipments.value.filter(a=>!!a && a.rarity == curRarity.value).splice(0,11).forEach((a) => {
-    configStore.chooseEqu(a,true)
-  })
+  if (!curRarity.value) return
+  if (curRarity.value == '太初') return
+  suitEquipments.value
+    .filter((a) => !!a && a.rarity == curRarity.value)
+    .splice(0, 11)
+    .forEach((a) => {
+      configStore.chooseEqu(a, true)
+    })
 }
-
 </script>
diff --git a/frontend/src/pages/Character/Equipment/components/StoneOld.vue b/frontend/src/pages/Character/Equipment/components/StoneOld.vue
index a78e6082..dfc22836 100644
--- a/frontend/src/pages/Character/Equipment/components/StoneOld.vue
+++ b/frontend/src/pages/Character/Equipment/components/StoneOld.vue
@@ -1,9 +1,13 @@
 `<!-- 每排总计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)" />
+  <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>
@@ -15,7 +19,7 @@ import { getImageURL } from '@/utils/images'
 import EquipmentIcon from '@/components/dnf/Equipment/Icon/index.vue'
 
 const props = defineProps<{
-  rowCount ?:number
+  rowCount?: number
 }>()
 
 const rowCount = Math.max(props.rowCount ?? 0, 14)
@@ -23,24 +27,22 @@ const infoStore = useInfoStore()
 const configStore = useConfigStore()
 
 const equs = computed(() => {
-  const items = infoStore.stones.filter(
-    (equip) => equip.categorize.includes('神界'),
-  )
+  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),
-  );
+    ...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),
+  ;['手镯', '项链', '戒指', '', '辅助装备', '魔法石', '耳环', ''].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) => {
diff --git a/frontend/src/pages/Character/Equipment/components/StoneUniversal.vue b/frontend/src/pages/Character/Equipment/components/StoneUniversal.vue
index 63b9eccb..7ce2acef 100644
--- a/frontend/src/pages/Character/Equipment/components/StoneUniversal.vue
+++ b/frontend/src/pages/Character/Equipment/components/StoneUniversal.vue
@@ -1,9 +1,13 @@
 <!-- 每排总计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)" />
+  <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>
@@ -15,7 +19,7 @@ import { getImageURL } from '@/utils/images'
 import EquipmentIcon from '@/components/dnf/Equipment/Icon/index.vue'
 
 const props = defineProps<{
-  rowCount ?:number
+  rowCount?: number
 }>()
 
 const rowCount = Math.max(props.rowCount ?? 0, 14)
@@ -23,20 +27,17 @@ const infoStore = useInfoStore()
 const configStore = useConfigStore()
 
 const equs = computed(() => {
-  const items = infoStore.stones.filter(
-    (equip) => equip.categorize.includes('通宝'),
-  )
+  const items = infoStore.stones.filter((equip) => equip.categorize.includes('通宝'))
   const res: (IEquipment | undefined)[] = []
-  const raritiyList = ['神器','史诗']
+  const raritiyList = ['神器', '史诗']
   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),
+      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
diff --git a/frontend/src/pages/Character/Equipment/components/SubWeapon.vue b/frontend/src/pages/Character/Equipment/components/SubWeapon.vue
index 16023749..16470251 100644
--- a/frontend/src/pages/Character/Equipment/components/SubWeapon.vue
+++ b/frontend/src/pages/Character/Equipment/components/SubWeapon.vue
@@ -3,7 +3,11 @@
 <template>
   <div class="flex flex-wrap gap-4px content-start" :style="{ width: `${rowCount * 32}px` }">
     <template v-for="(weapon, _) in weapons" :key="_">
-      <EquipmentIcon :equipment="weapon" :inactive="configStore.config.equips['副武器']?.id != weapon?.id" @click="configStore.chooseEqu(weapon,false,true)"/>
+      <EquipmentIcon
+        :equipment="weapon"
+        :inactive="configStore.config.equips['副武器']?.id != weapon?.id"
+        @click="configStore.chooseEqu(weapon, false, true)"
+      />
     </template>
   </div>
 </template>
@@ -40,5 +44,4 @@ const weapons = computed(() => {
   })
   return res
 })
-
 </script>
diff --git a/frontend/src/pages/Character/Equipment/components/Suit.vue b/frontend/src/pages/Character/Equipment/components/Suit.vue
index e9773fa8..e2ccc85d 100644
--- a/frontend/src/pages/Character/Equipment/components/Suit.vue
+++ b/frontend/src/pages/Character/Equipment/components/Suit.vue
@@ -3,35 +3,39 @@
 <template>
   <div>
     <div class="flex flex-col gap-10px pb-10px">
-    <!-- 套装选择tab -->
-    <div class="flex flex-wrap w-100%">
-      <template v-for="(suit, _) in suits" :key="_">
-        <div class="flex items-center justify-center">
-          <img
-            class="w-35px h-35px object-contain"
-            :src="getImageURL('equipment' + suit.imageUrl)"
-            :alt="suit.name"
-            :style="{ filter: curSuit === suit.value ? '' : 'grayscale(100%)' }"
-            @click="curSuit = suit.value"
-            @dblclick="handleDoubleClick"
+      <!-- 套装选择tab -->
+      <div class="flex flex-wrap w-100%">
+        <template v-for="(suit, _) in suits" :key="_">
+          <div class="flex items-center justify-center">
+            <img
+              class="w-35px h-35px object-contain"
+              :src="getImageURL('equipment' + suit.imageUrl)"
+              :alt="suit.name"
+              :style="{ filter: curSuit === suit.value ? '' : 'grayscale(100%)' }"
+              @click="curSuit = suit.value"
+              @dblclick="handleDoubleClick"
+            />
+          </div>
+        </template>
+      </div>
+      <EquipmentRaritySelect v-model="curRarity" />
+    </div>
+
+    <div class="flex flex-wrap gap-4px content-start" :style="{ width: `${rowCount * 32}px` }">
+      <template v-for="(equip, _) in suitEquipments" :key="_">
+        <template v-if="equip?.rarity == curRarity || !curRarity">
+          <EquipmentIcon
+            :equipment="equip"
+            :inactive="configStore.config.equips[equip?.itemDetailType ?? '']?.id != equip?.id"
+            @click="configStore.chooseEqu(equip)"
           />
-        </div>
+        </template>
+
+        <template v-else>
+          <EquipmentIcon />
+        </template>
       </template>
     </div>
-    <EquipmentRaritySelect v-model="curRarity" />
-    </div>
-
-    <div class="flex flex-wrap gap-4px content-start" :style="{width: `${rowCount * 32}px`}">
-    <template v-for="(equip,_) in suitEquipments" :key="_">
-      <template v-if="equip?.rarity == curRarity || !curRarity">
-        <EquipmentIcon :equipment="equip" :inactive="configStore.config.equips[equip?.itemDetailType ?? '']?.id != equip?.id" @click="configStore.chooseEqu(equip)"/>
-      </template>
-
-      <template v-else>
-        <EquipmentIcon/>
-      </template>
-    </template>
-  </div>
   </div>
 </template>
 
@@ -48,7 +52,7 @@ const curSuit = ref(16201)
 const curRarity = ref()
 
 const props = defineProps<{
-  rowCount?:number
+  rowCount?: number
 }>()
 
 const rowCount = Math.max(props.rowCount ?? 0, 14)
@@ -64,30 +68,44 @@ const suits = computed(() => {
 })
 
 const suitEquipments = computed(() => {
-  const equs =  infoStore.equips.filter((a) => a.suit.includes(curSuit.value.toString()) && a.suit.length === 1 )
+  const equs = infoStore.equips.filter(
+    (a) => a.suit.includes(curSuit.value.toString()) && a.suit.length === 1,
+  )
 
   const res: (IEquipment | undefined)[] = []
-  const raritiyList = ['神器','传说','史诗']
+  const raritiyList = ['神器', '传说', '史诗']
   raritiyList.forEach((rarity) => {
-    const equ : (IEquipment | undefined)[]  = equs.filter((a) => a.rarity === rarity && !a.name.includes('黑牙'))
-    equ.splice(5,0,undefined)
-    equ.splice(9,0,undefined)
-    res.push(
-      ...equ,
-      ...Array(Math.max(0,rowCount - equ.length)).fill(undefined),
+    const equ: (IEquipment | undefined)[] = equs.filter(
+      (a) => a.rarity === rarity && !a.name.includes('黑牙'),
     )
+    equ.splice(5, 0, undefined)
+    equ.splice(9, 0, undefined)
+    res.push(...equ, ...Array(Math.max(0, rowCount - equ.length)).fill(undefined))
   })
-  const remind = equs.filter(a=>a.rarity == '太初' || a.name.includes('黑牙')).sort((a,b)=>(a.rarity == '太初' ? 1 : 0) - (b.rarity == '太初' ? 1 : 0))
-  res.push(undefined,undefined,...remind.filter(a=>a.itemDetailType == '项链'),undefined,...remind.filter(a=>a.itemDetailType == '手镯'),undefined,...remind.filter(a=>a.itemDetailType == '戒指'),...Array(Math.max(0,rowCount - remind.length -4)).fill(undefined))
+  const remind = equs
+    .filter((a) => a.rarity == '太初' || a.name.includes('黑牙'))
+    .sort((a, b) => (a.rarity == '太初' ? 1 : 0) - (b.rarity == '太初' ? 1 : 0))
+  res.push(
+    undefined,
+    undefined,
+    ...remind.filter((a) => a.itemDetailType == '项链'),
+    undefined,
+    ...remind.filter((a) => a.itemDetailType == '手镯'),
+    undefined,
+    ...remind.filter((a) => a.itemDetailType == '戒指'),
+    ...Array(Math.max(0, rowCount - remind.length - 4)).fill(undefined),
+  )
   return res
 })
 
 const handleDoubleClick = () => {
-  if(!curRarity.value) return
-  if(curRarity.value == '太初') return
-  suitEquipments.value.filter(a=>!!a && a.rarity == curRarity.value).splice(0,11).forEach((a) => {
-    configStore.chooseEqu(a)
-  })
+  if (!curRarity.value) return
+  if (curRarity.value == '太初') return
+  suitEquipments.value
+    .filter((a) => !!a && a.rarity == curRarity.value)
+    .splice(0, 11)
+    .forEach((a) => {
+      configStore.chooseEqu(a)
+    })
 }
-
 </script>
diff --git a/frontend/src/pages/Character/Equipment/components/Universal.vue b/frontend/src/pages/Character/Equipment/components/Universal.vue
index 53fa03c8..526db9b1 100644
--- a/frontend/src/pages/Character/Equipment/components/Universal.vue
+++ b/frontend/src/pages/Character/Equipment/components/Universal.vue
@@ -1,9 +1,13 @@
 <!-- 每排总计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 ?? '']?.id != equip?.id"  :equipment="equip" @click="configStore.chooseEqu(equip)" />
+  <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 ?? '']?.id != equip?.id"
+        :equipment="equip"
+        @click="configStore.chooseEqu(equip)"
+      />
     </template>
   </div>
 </template>
@@ -15,7 +19,7 @@ import { getImageURL } from '@/utils/images'
 import EquipmentIcon from '@/components/dnf/Equipment/Icon/index.vue'
 
 const props = defineProps<{
-  rowCount ?:number
+  rowCount?: number
 }>()
 
 const rowCount = Math.max(props.rowCount ?? 0, 14)
@@ -27,15 +31,12 @@ const equs = computed(() => {
     (equip) => equip.categorize === '通宝装备' || equip.categorize === '稀有装备 套装',
   )
   const res: (IEquipment | undefined)[] = []
-  const raritiyList = ['稀有','神器','传说','史诗']
+  const raritiyList = ['稀有', '神器', '传说', '史诗']
   raritiyList.forEach((rarity) => {
-    const equ : (IEquipment | undefined)[]  = items.filter((a) => a.rarity === rarity)
-    equ.splice(5,0,undefined)
-    equ.splice(9,0,undefined)
-    res.push(
-      ...equ,
-      ...Array(Math.max(0,rowCount - equ.length)).fill(undefined),
-    )
+    const equ: (IEquipment | undefined)[] = items.filter((a) => a.rarity === rarity)
+    equ.splice(5, 0, undefined)
+    equ.splice(9, 0, undefined)
+    res.push(...equ, ...Array(Math.max(0, rowCount - equ.length)).fill(undefined))
   })
   return res
 })
diff --git a/frontend/src/pages/Character/Equipment/components/Weapon.vue b/frontend/src/pages/Character/Equipment/components/Weapon.vue
index ebf3f1ae..2d163861 100644
--- a/frontend/src/pages/Character/Equipment/components/Weapon.vue
+++ b/frontend/src/pages/Character/Equipment/components/Weapon.vue
@@ -3,7 +3,11 @@
 <template>
   <div class="flex flex-wrap gap-4px content-start" :style="{ width: `${rowCount * 32}px` }">
     <template v-for="(weapon, _) in weapons" :key="_">
-      <EquipmentIcon :equipment="weapon" :inactive="configStore.config.equips['武器']?.id != weapon?.id" @click="configStore.chooseEqu(weapon)"/>
+      <EquipmentIcon
+        :equipment="weapon"
+        :inactive="configStore.config.equips['武器']?.id != weapon?.id"
+        @click="configStore.chooseEqu(weapon)"
+      />
     </template>
   </div>
 </template>
@@ -39,5 +43,4 @@ const weapons = computed(() => {
   })
   return res
 })
-
 </script>
diff --git a/frontend/src/pages/Character/EquipmentDictionary/Index.vue b/frontend/src/pages/Character/EquipmentDictionary/Index.vue
index ae977aaf..59a64c38 100644
--- a/frontend/src/pages/Character/EquipmentDictionary/Index.vue
+++ b/frontend/src/pages/Character/EquipmentDictionary/Index.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="w-340px bg-black flex flex-col h-90vh">
+    <calc-dialog lazy header="装备条件" v-model:visible="triggerVisible">
+      <options />
+    </calc-dialog>
     <!-- 头部 选择是装备还是融合石 -->
     <div class="flex bg-#101012 h-40px text-#6C5E4A font-bold">
       <div
@@ -30,7 +33,7 @@
           品质：<EquipmentRaritySelect v-model="curRarity" />
         </div>
       </div>
-      <div class="flex flex-1 items-center">
+      <div class="flex flex-1 items-center justify-between">
         <div class="flex items-center">
           套装：
           <div class="flex items-center justify-center gap-2px">
@@ -47,26 +50,27 @@
             </template>
           </div>
         </div>
+        <calc-button
+          icon="set"
+          title="装备触发条件"
+          @click="triggerVisible = !triggerVisible"
+        ></calc-button>
       </div>
     </div>
     <div class="overflow-y-auto gap-1 p-1 flex flex-col items-center flex-1 h-0">
-        <template v-for="item in equs" :key="item.name">
-          <template v-if="item.equs.length > 0">
-            <div class="item-head w-full">{{ item.name }}</div>
-            <div class="flex flex-wrap gap-4px justify-around w-full">
-              <template v-for="(equ, _) in item.equs" :key="_">
-                <EquipmentIcon
-                  :inactive="!isActive(equ)"
-                  :equipment="equ"
-                  @click="chooseEqu(equ)"
-                />
-              </template>
-            </div>
-          </template>
+      <template v-for="item in equs" :key="item.name">
+        <template v-if="item.equs.length > 0">
+          <div class="item-head w-full">{{ item.name }}</div>
+          <div class="flex flex-wrap gap-4px justify-around w-full">
+            <template v-for="(equ, _) in item.equs" :key="_">
+              <EquipmentIcon :inactive="!isActive(equ)" :equipment="equ" @click="chooseEqu(equ)" />
+            </template>
+          </div>
         </template>
-      </div>
+      </template>
+    </div>
   </div>
-  <div class="px-5px flex flex-col">
+  <div class="px-5px flex flex-col h-90vh">
     <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">
@@ -127,6 +131,11 @@ 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'
+import options from './components/options.vue'
+
+const props = defineProps<{
+  alter: string
+}>()
 
 const infoStore = useInfoStore()
 const type = ref('equ')
@@ -137,6 +146,7 @@ const curSuitLv = ref({
   rarity: '史诗',
   lv: 1,
 })
+const triggerVisible = ref(false)
 
 const raritiyList = ['稀有', '神器', '传说', '史诗', '太初']
 
diff --git a/frontend/src/pages/Character/EquipmentDictionary/components/options.vue b/frontend/src/pages/Character/EquipmentDictionary/components/options.vue
new file mode 100644
index 00000000..68f8b7b7
--- /dev/null
+++ b/frontend/src/pages/Character/EquipmentDictionary/components/options.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="flex flex-col gap-2 w-250px p-2">
+    <div v-for="option in info.options" :key="option.id" class="flex items-center gap-2">
+      <div class="w-60px text-end">{{ option.name }}</div>
+      <calc-select class="flex-1 !h-20px" :appendTo="dialogRef" v-model="config.config.options[option.id.toString()]">
+        <calc-option v-for="(item, index) in option.options" :key="index" :value="index">
+          {{ item }}
+        </calc-option>
+      </calc-select>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useConfigStore, useInfoStore } from '@/stores'
+const dialogRef = inject("dialogRef", ref(null))
+const config = useConfigStore()
+const info = useInfoStore()
+</script>
diff --git a/frontend/src/pages/Character/EquipmentDictionary/formatData.ts b/frontend/src/pages/Character/EquipmentDictionary/formatData.ts
index d5757f4f..66ca33ea 100644
--- a/frontend/src/pages/Character/EquipmentDictionary/formatData.ts
+++ b/frontend/src/pages/Character/EquipmentDictionary/formatData.ts
@@ -1,9 +1,8 @@
-import type { IEquipment } from "@/api/info/type"
+import type { IEquipment } from '@/api/info/type'
 
 export const rowCount = 10
 
-export const formatEqu = (total: IEquipment[],subweapons?:string[],curSuit
-  ?:string) => {
+export const formatEqu = (total: IEquipment[], subweapons?: string[], curSuit?: string) => {
   // 武器
   const item_weapon = total.filter((a) => a.itemType == '武器') ?? []
   const weapons: (IEquipment | undefined)[] = []
@@ -25,14 +24,14 @@ export const formatEqu = (total: IEquipment[],subweapons?:string[],curSuit
 
   // # 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)
-  })
+  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: '副武器' })),
@@ -130,7 +129,7 @@ export const formatEqu = (total: IEquipment[],subweapons?:string[],curSuit
   ]
 }
 
-export const formatStone = (total: IEquipment[],curSuit?:string) => {
+export const formatStone = (total: IEquipment[], curSuit?: string) => {
   // 套装
   const item_suits = total.filter((equip) => equip.suit.length == 1)
   const suits: (IEquipment | undefined)[] = []
@@ -215,10 +214,10 @@ export const formatStone = (total: IEquipment[],curSuit?:string) => {
   const items_sj = total.filter((equip) => equip.categorize.includes('神界'))
   const sj: (IEquipment | undefined)[] = []
   // const raritiy = Array.from(new Set(items_suits_rzs.map((item) => item.rarity)))
-  sj.push(...items_sj, ...Array(rowCount * 2 - (items_sj.length%rowCount)).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))
+  sj.push(...items_sj, ...Array(rowCount * 2 - (items_sj.length % rowCount)).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} 套装`,
diff --git a/frontend/src/pages/Character/Forge/components/Avatars.vue b/frontend/src/pages/Character/Forge/components/Avatars.vue
index e6d03e1b..05716e21 100644
--- a/frontend/src/pages/Character/Forge/components/Avatars.vue
+++ b/frontend/src/pages/Character/Forge/components/Avatars.vue
@@ -101,23 +101,27 @@ export default defineComponent({
               </div>
             ) : (
               <>
-              <div class="equ-profile-item">
-                <div class="row-name">品级</div>
-                <calc-select v-model={id.value} class="flex-1 !h-20px">
-                  {renderList(basicInfoStore.avatars[part.value] ?? [], (item) => (
-                    <calc-option value={item.id}>{item.suit}</calc-option>
-                  ))}
-                </calc-select>
-              </div>
-              <div class="equ-profile-item">
-                <div class="row-name">属性</div>
-                <calc-select v-model={option.value} class="flex-1 !h-20px">
-                  <calc-option value={0}>无</calc-option>
-                  {renderList(basicInfoStore.avatars[part.value].find(a=>a.id == id.value)?.options ?? [], (item) => (
-                    <calc-option value={item}>{item}</calc-option>
-                  ))}
-                </calc-select>
-              </div>
+                <div class="equ-profile-item">
+                  <div class="row-name">品级</div>
+                  <calc-select v-model={id.value} class="flex-1 !h-20px">
+                    {renderList(basicInfoStore.avatars[part.value] ?? [], (item) => (
+                      <calc-option value={item.id}>{item.suit}</calc-option>
+                    ))}
+                  </calc-select>
+                </div>
+                <div class="equ-profile-item">
+                  <div class="row-name">属性</div>
+                  <calc-select v-model={option.value} class="flex-1 !h-20px">
+                    <calc-option value={0}>无</calc-option>
+                    {renderList(
+                      basicInfoStore.avatars[part.value].find((a) => a.id == id.value)?.options ??
+                        [],
+                      (item) => (
+                        <calc-option value={item}>{item}</calc-option>
+                      ),
+                    )}
+                  </calc-select>
+                </div>
               </>
             )}
             {has_socket.value ? (
diff --git a/frontend/src/pages/Character/Forge/components/Jades.vue b/frontend/src/pages/Character/Forge/components/Jades.vue
index ec522b8e..eff4a795 100644
--- a/frontend/src/pages/Character/Forge/components/Jades.vue
+++ b/frontend/src/pages/Character/Forge/components/Jades.vue
@@ -1,28 +1,32 @@
 <template>
   <div>
-  <template v-for="key in ['0','1','2','3']" :key="key">
-    <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">
-          {{item.name}}
-        </calc-option>
-      </calc-select>
-      <!-- <calc-slider
+    <template v-for="key in ['0', '1', '2', '3']" :key="key">
+      <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">
+            {{ item.name }}
+          </calc-option>
+        </calc-select>
+        <!-- <calc-slider
         v-model="configStore.config.jades[key].value"
         :formatValue="formatValue(configStore.config.jades[key].id)"
         :min="Number(currentJade(configStore.config.jades[key].id)?.min)"
         :max="Number(currentJade(configStore.config.jades[key].id)?.max)"
         :step="Number(currentJade(configStore.config.jades[key].id)?.pre)"
         ></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)" :key="item.id" :value="item.id">
-          {{item.value}}
-        </calc-option>
-      </calc-select>
-    </div>
-  </template>
-</div>
+        <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)"
+            :key="item.id"
+            :value="item.id"
+          >
+            {{ item.value }}
+          </calc-option>
+        </calc-select>
+      </div>
+    </template>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -40,50 +44,50 @@ const currentJade = computed(() => {
       return undefined
     } else {
       const res = []
-      const cur = infoStore.jades?.find(e => e.id == id) as IJade
+      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}`
+  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) {
-        if (id == -1) {
-          return undefined
+    if (id == -1) {
+      return undefined
+    } else {
+      const res = []
+      const cur = infoStore.jades?.find((e) => e.id == id) as IJade
+      if (cur) {
+        const { max, min, unit, pre } = cur
+        //
+        if (unit.includes('等级')) {
+          res.push({
+            id: 1,
+            value: unit,
+          })
         } else {
-          const res = []
-          const cur = infoStore.jades?.find(e => e.id == id) as IJade
-          if (cur) {
-            const { max, min, unit, pre } = cur
-            //
-            if (unit.includes('等级')) {
+          for (let i = Number(max) as number; i >= Number(min); ) {
+            if (i != 0) {
               res.push({
-                id: 1,
-                value: unit
+                id: i,
+                value: (i > 0 ? '+' : '') + getFloat(i, 1) + unit,
               })
-            } else {
-              for (let i = Number(max) as number; i >= Number(min);) {
-                if (i != 0) {
-                  res.push({
-                    id: i,
-                    value: (i > 0 ? "+" : "") + getFloat(i, 1) + unit
-                  })
-                }
-                i = Number((i - Number(pre)).toFixed(1))
-              }
             }
-            return res
+            i = Number((i - Number(pre)).toFixed(1))
           }
         }
+        return res
       }
-    })
+    }
+  }
+})
 </script>
diff --git a/frontend/src/pages/Character/Forge/index.vue b/frontend/src/pages/Character/Forge/index.vue
index 10266238..02e615f6 100644
--- a/frontend/src/pages/Character/Forge/index.vue
+++ b/frontend/src/pages/Character/Forge/index.vue
@@ -1,26 +1,26 @@
 <template>
   <div class="w-420px">
-      <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-tabs>
-        <equipment v-if="partTab === 0"></equipment>
-        <clothes v-if="partTab === 1"></clothes>
-      </calc-collapse>
-      <calc-collapse class="w-100%" title="辟邪玉">
-        <jade></jade>
-      </calc-collapse>
-      <calc-collapse class="w-100%" title="其它">
-        <sundry></sundry>
-      </calc-collapse>
-    </div>
+    <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-tabs>
+      <equipment v-if="partTab === 0"></equipment>
+      <clothes v-if="partTab === 1"></clothes>
+    </calc-collapse>
+    <calc-collapse class="w-100%" title="辟邪玉">
+      <jade></jade>
+    </calc-collapse>
+    <calc-collapse class="w-100%" title="其它">
+      <sundry></sundry>
+    </calc-collapse>
+  </div>
 </template>
 <script setup lang="ts">
 import equipment from './components/Equipments.vue'
-import clothes from './components/Avatars.vue';
-import jade from './components/Jades.vue';
-import sundry from './components/Sundry.vue';
+import clothes from './components/Avatars.vue'
+import jade from './components/Jades.vue'
+import sundry from './components/Sundry.vue'
 const partTab = ref(0)
 </script>
 
diff --git a/frontend/src/pages/Character/Index.vue b/frontend/src/pages/Character/Index.vue
index 095d7e2e..429f7713 100644
--- a/frontend/src/pages/Character/Index.vue
+++ b/frontend/src/pages/Character/Index.vue
@@ -81,7 +81,7 @@ onUnmounted(() => {
     align-items: center;
     z-index: 2;
     height: 40px;
-    gap : 10px;
+    gap: 10px;
   }
 
   .content {
diff --git a/frontend/src/pages/Character/Result/Index.vue b/frontend/src/pages/Character/Result/Index.vue
index 7bc034d1..37079302 100644
--- a/frontend/src/pages/Character/Result/Index.vue
+++ b/frontend/src/pages/Character/Result/Index.vue
@@ -11,8 +11,17 @@
         :equs="configStore.config.equips"
       ></Info>
     </div>
-    <Skill v-if="!configStore.result.state.buffer" :data="configStore.result.state.skills" :standard="infoStore.standard"></Skill>
-    <BufferSkill v-else :data="configStore.result.state.skills" :stadard="infoStore.standard" :standard="infoStore.standard"></BufferSkill>
+    <Skill
+      v-if="!configStore.result.state.buffer"
+      :data="configStore.result.state.skills"
+      :standard="infoStore.standard"
+    ></Skill>
+    <BufferSkill
+      v-else
+      :data="configStore.result.state.skills"
+      :stadard="infoStore.standard"
+      :standard="infoStore.standard"
+    ></BufferSkill>
   </div>
 </template>
 
@@ -27,8 +36,8 @@ const configStore = useConfigStore()
 const infoStore = useInfoStore()
 
 const setStandard = () => {
-  if(!configStore?.result?.state?.uuid) return
-  infoStore.setStandard(configStore.result.state,configStore.skillCountConfig)
+  if (!configStore?.result?.state?.uuid) return
+  infoStore.setStandard(configStore.result.state, configStore.skillCountConfig)
 }
 
 const clearStandard = () => {
diff --git a/frontend/src/pages/Character/Result/components/BufferSkill.vue b/frontend/src/pages/Character/Result/components/BufferSkill.vue
index 3f2ed8c8..e117c5d6 100644
--- a/frontend/src/pages/Character/Result/components/BufferSkill.vue
+++ b/frontend/src/pages/Character/Result/components/BufferSkill.vue
@@ -33,7 +33,9 @@
             </div>
             <div>{{ skill.name }}</div>
           </div>
-          <div class="w-50px flex items-center justify-center">{{ typeof skill.cd === 'number' ? `${skill.cd.toFixed(1)}s` : '-' }}</div>
+          <div class="w-50px flex items-center justify-center">
+            {{ typeof skill.cd === 'number' ? `${skill.cd.toFixed(1)}s` : '-' }}
+          </div>
           <component :is="formatDamage(skill)"></component>
         </div>
       </div>
@@ -82,7 +84,7 @@ const data = computed(() => {
       // @ts-ignore
       bValue = b[sort.value]
     }
-    const key = ['MAIN', 'ATK','STRINT', 'ratio'].findIndex((a) => sort.value == a)
+    const key = ['MAIN', 'ATK', 'STRINT', 'ratio'].findIndex((a) => sort.value == a)
 
     aValue = a.buff?.[key]
     bValue = b.buff?.[key]
@@ -149,46 +151,52 @@ const formatDamage = (skill: IResultSkill) => {
       'div',
       {
         class: 'flex items-center justify-center',
-      },[0, 1, 2, 3].map((index) => {
-      const value = skill.buff?.[index] - standardSkill.buff?.[index]
-      return h(
-        'div',
-        {
-          style: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '80px',
-            color: value >= 0 ? '#37fa38' : '#ff0000',
+      },
+      [0, 1, 2, 3].map((index) => {
+        const value = skill.buff?.[index] - standardSkill.buff?.[index]
+        return h(
+          'div',
+          {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '80px',
+              color: value >= 0 ? '#37fa38' : '#ff0000',
+            },
           },
-        },
-        `${value >= 0 ? '+':''}${index == 3
-          ? `${Math.round(value).toLocaleString()}%`
-          : Math.round(value).toLocaleString()}`
-      )
-    }))
+          `${value >= 0 ? '+' : ''}${
+            index == 3
+              ? `${Math.round(value).toLocaleString()}%`
+              : Math.round(value).toLocaleString()
+          }`,
+        )
+      }),
+    )
   } else {
     return h(
       'div',
       {
         class: 'flex items-center justify-center',
-      },[0, 1, 2, 3].map((index) => {
-      const value = skill.buff?.[index]
-      return h(
-        'div',
-        {
-          style: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '80px',
+      },
+      [0, 1, 2, 3].map((index) => {
+        const value = skill.buff?.[index]
+        return h(
+          'div',
+          {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '80px',
+            },
           },
-        },
-        index == 3
-          ? `${Math.round(value).toLocaleString()}%`
-          : Math.round(value).toLocaleString(),
-      )
-    }))
+          index == 3
+            ? `${Math.round(value).toLocaleString()}%`
+            : Math.round(value).toLocaleString(),
+        )
+      }),
+    )
   }
 }
 </script>
diff --git a/frontend/src/pages/Character/Result/components/Info.vue b/frontend/src/pages/Character/Result/components/Info.vue
index 09b75235..ac5ec74b 100644
--- a/frontend/src/pages/Character/Result/components/Info.vue
+++ b/frontend/src/pages/Character/Result/components/Info.vue
@@ -3,7 +3,7 @@
     <div class="h-177px">
       <EquList
         :detail="props.equs"
-        :with-sub-weapon="(infoStore.infos?.subweapons?.length ?? 0)> 0"
+        :with-sub-weapon="(infoStore.infos?.subweapons?.length ?? 0) > 0"
       ></EquList>
     </div>
     <div class="flex flex-wrap border-y-1px my-1px border-y-solid border-#FFFF/10 gap-1% px-1%">
diff --git a/frontend/src/pages/Character/Result/components/Skill.vue b/frontend/src/pages/Character/Result/components/Skill.vue
index 185ae8c4..12c8b72e 100644
--- a/frontend/src/pages/Character/Result/components/Skill.vue
+++ b/frontend/src/pages/Character/Result/components/Skill.vue
@@ -12,7 +12,7 @@
           ]"
           :key="key"
           class="item-head"
-          :style="{width: `${header.width}px`}"
+          :style="{ width: `${header.width}px` }"
           @click="header.sortKey && sortValue(header.sortKey)"
         >
           {{ header.label }}
@@ -44,13 +44,18 @@
           <component :is="formatDamage(skill)"></component>
         </div>
       </div>
-      <div v-if="!totalStandard" class="h-40px flex items-center justify-center text-18px border-t-1px border-t-solid border-t-#FFFF/15">{{showTotal.toFixed(0)}}</div>
+      <div
+        v-if="!totalStandard"
+        class="h-40px flex items-center justify-center text-18px border-t-1px border-t-solid border-t-#FFFF/15"
+      >
+        {{ showTotal.toFixed(0) }}
+      </div>
       <div
         v-else
         class="h-40px flex items-center justify-center text-18px border-t-1px border-t-solid border-t-#FFFF/15"
-        :style="{color:showTotal >= 0 ? '#37fa38' : '#ff0000'}"
-        >
-        {{showTotal.toFixed(2)}}%
+        :style="{ color: showTotal >= 0 ? '#37fa38' : '#ff0000' }"
+      >
+        {{ showTotal.toFixed(2) }}%
       </div>
     </div>
   </div>
@@ -84,11 +89,11 @@ const data = computed(() => {
       // @ts-ignore
       bValue = b[sort.value]
     }
-    if( sort.value == 'total'){
+    if (sort.value == 'total') {
       aValue = a.damage * skillCount(a).value
       bValue = b.damage * skillCount(b).value
     }
-    if(sort.value == 'dps'){
+    if (sort.value == 'dps') {
       aValue = a.damage / a.cd
       bValue = b.damage / b.cd
     }
@@ -152,7 +157,7 @@ const totalStandard = computed(() => {
 
 const showTotal = computed(() => {
   if (!totalStandard.value || totalStandard.value == 0) return totalDamage.value
-  return (totalDamage.value - totalStandard.value) / totalStandard.value * 100
+  return ((totalDamage.value - totalStandard.value) / totalStandard.value) * 100
 })
 
 const formatDamage = (skill: IResultSkill) => {
diff --git a/frontend/src/pages/Character/Skill/components/SkillTree/index.tsx b/frontend/src/pages/Character/Skill/components/SkillTree/index.tsx
index c86929f5..ced9bce8 100644
--- a/frontend/src/pages/Character/Skill/components/SkillTree/index.tsx
+++ b/frontend/src/pages/Character/Skill/components/SkillTree/index.tsx
@@ -101,7 +101,7 @@ export default defineComponent({
             <div
               class={[
                 'w-36px absolute h-48px flex flex-col box-border items-center py-3px z-2',
-                (skill.learnLv == 100 && skill.bind) ? '' : 'skill',
+                skill.learnLv == 100 && skill.bind ? '' : 'skill',
               ]}
               onClick={(e) => {
                 e.stopPropagation()
diff --git a/frontend/src/pages/Character/Skill/components/SkillTree/style.scss b/frontend/src/pages/Character/Skill/components/SkillTree/style.scss
index ca23eb27..f8b3ad09 100644
--- a/frontend/src/pages/Character/Skill/components/SkillTree/style.scss
+++ b/frontend/src/pages/Character/Skill/components/SkillTree/style.scss
@@ -10,25 +10,26 @@
 }
 
 .passive {
-  filter: grayscale(100%) invert(3%) sepia(14%) saturate(874%) hue-rotate(65deg) brightness(105%) contrast(102%);
+  filter: grayscale(100%) invert(3%) sepia(14%) saturate(874%) hue-rotate(65deg) brightness(105%)
+    contrast(102%);
 }
 
-.skill{
+.skill {
   background-image: url('./img/skill.png');
   background-size: 100% 100%;
 }
 
-.skill-active{
+.skill-active {
   background-image: url('./img/skillActive.png');
   background-size: 100% 100%;
 }
 
-.awake_50{
+.awake_50 {
   background-image: url('./img/awake_50.png');
   background-size: 100% 100%;
 }
 
-.awake_85{
+.awake_85 {
   background-image: url('./img/awake_85.png');
   background-size: 100% 100%;
 }
diff --git a/frontend/src/pages/Character/Skill/index.vue b/frontend/src/pages/Character/Skill/index.vue
index 57123a52..f55819fe 100644
--- a/frontend/src/pages/Character/Skill/index.vue
+++ b/frontend/src/pages/Character/Skill/index.vue
@@ -1,12 +1,15 @@
 <template>
   <div>
     <div class="h-90vh w-auto overflow-y-auto overflow-x-hidden">
-      <SkillTree :skills="infoStore.skills" v-model:lvInfo="configStore.config.skills" v-model:bindAwake="configStore.config.bindAwake"></SkillTree>
+      <SkillTree
+        :skills="infoStore.skills"
+        v-model:lvInfo="configStore.config.skills"
+        v-model:bindAwake="configStore.config.bindAwake"
+      ></SkillTree>
     </div>
   </div>
 </template>
 
-
 <script lang="ts" setup name="Index">
 import { useInfoStore } from '@/stores/info'
 import SkillTree from './components/SkillTree/index'
diff --git a/frontend/src/pages/Home/Index.vue b/frontend/src/pages/Home/Index.vue
index a8c4dd84..04081e66 100644
--- a/frontend/src/pages/Home/Index.vue
+++ b/frontend/src/pages/Home/Index.vue
@@ -18,21 +18,20 @@ export default defineComponent(async () => {
   function choose_job(child: IAlterInfo) {
     return async () => {
       if (child.comment == '首页') {
-        return window.open("https://dnftools.com","_blank")
+        return window.open('https://dnftools.com', '_blank')
       }
       if (child.name == 'sponsor') {
-        return window.open((child.url ?? ''),"_blank")
+        return window.open(child.url ?? '', '_blank')
       }
       if (child.open) {
         const options = child.options ?? []
         if (options.length > 0) {
           return
+        } else {
+          return window.open('/character/' + (child.value || child.name), '_blank')
         }
-        else{
-          return window.open("/character/" + (child.value || child.name),"_blank")
-        }
+      }
     }
-  }
     // router.push("/character/" + alter)
   }
 
@@ -40,12 +39,14 @@ export default defineComponent(async () => {
 
   // let checkTimer: NodeJS.Timeout
 
-
   const adventure = await api.adventures()
 
   return () => (
     <Fragment>
-      <div class="bg-no-repeat h-auto min-h-full pt-8 pb-12 pl-4" style={`background-image: url('${getImageURL('home.jpg')}');background-size: 100% 100%;`}>
+      <div
+        class="bg-no-repeat h-auto min-h-full pt-8 pb-12 pl-4"
+        style={`background-image: url('${getImageURL('home.jpg')}');background-size: 100% 100%;`}
+      >
         {renderList(adventure, (job) => (
           <div class="flex flex-row">
             <div
diff --git a/frontend/src/pages/IndexView.vue b/frontend/src/pages/IndexView.vue
index 75bb96e1..2fe3f1b7 100644
--- a/frontend/src/pages/IndexView.vue
+++ b/frontend/src/pages/IndexView.vue
@@ -3,12 +3,12 @@
     <Suspense>
       <RouterView></RouterView>
     </Suspense>
-    <render/>
+    <render />
   </div>
 </template>
 
 <script lang="ts" name="index" setup>
-import { useDialog } from '@/components/hooks/dialog';
+import { useDialog } from '@/components/hooks/dialog'
 
 const { render } = useDialog()
 </script>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 0c29a87a..1e783d8e 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -7,22 +7,22 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/',
     name: 'home',
-    component: (() => import('@/pages/Home/Index.vue')),
+    component: () => import('@/pages/Home/Index.vue'),
   },
   {
-    path:'/character/:alter',
+    path: '/character/:alter',
     redirect: (to) => {
       return { path: `/character/equipment/${to.params.alter}` }
     },
     props: true,
-    name:'character',
-    component: (() => import('@/pages/Character/Index.vue')),
+    name: 'character',
+    component: () => import('@/pages/Character/Index.vue'),
     children: [
       {
         path: '/character/equipment/:alter',
         name: 'equipment',
         props: true,
-        component: (() => import('@/pages/Character/EquipmentDictionary/Index.vue')),
+        component: () => import('@/pages/Character/EquipmentDictionary/Index.vue'),
       },
       // {
       //   path: '/character/equipment/:alter',
@@ -34,15 +34,16 @@ const routes: RouteRecordRaw[] = [
         path: '/character/skill/:alter',
         name: 'skill',
         props: true,
-        component: (() => import('@/pages/Character/Skill/index.vue')),
-      },{
+        component: () => import('@/pages/Character/Skill/index.vue'),
+      },
+      {
         path: '/character/forge/:alter',
         name: 'forge',
         props: true,
-        component: (() => import('@/pages/Character/Forge/index.vue')),
-      }
-    ]
-  }
+        component: () => import('@/pages/Character/Forge/index.vue'),
+      },
+    ],
+  },
 ]
 
 const router = createRouter({
diff --git a/frontend/src/stores/config.ts b/frontend/src/stores/config.ts
index ab76e00e..6d73603e 100644
--- a/frontend/src/stores/config.ts
+++ b/frontend/src/stores/config.ts
@@ -54,9 +54,10 @@ export interface IConfig {
   sundry: Record<string, any>
   bindAwake: number
   /** 系统奶 */
-  DSB : boolean
+  DSB: boolean
   /** 奶 */
-  BUFF : boolean
+  BUFF: boolean
+  options: Record<string, number>
 }
 
 const defaultEqusConfig = {
@@ -92,6 +93,7 @@ export const useConfigStore = defineStore('configStore', () => {
     bindAwake: 50,
     DSB: false,
     BUFF: false,
+    options:{}
   })
 
   const skillCountConfig = ref<IResultSkillCount[]>([])
@@ -120,6 +122,7 @@ export const useConfigStore = defineStore('configStore', () => {
         bindAwake: 50,
         DSB: false,
         BUFF: false,
+        options:{}
       }
     if (!config.value?.equips) config.value.equips = {}
     if (!config.value?.skills) config.value.skills = {}
@@ -127,6 +130,7 @@ export const useConfigStore = defineStore('configStore', () => {
     if (!config.value?.avatar) config.value.avatar = {}
     if (!config.value?.sundry) config.value.sundry = {}
     if (!config.value?.bindAwake) config.value.bindAwake = 50
+    if (!config.value?.options) config.value.options = {}
 
     const part = [...infoStore.parts, '宠物', '副武器'].filter(
       (a) => !config.value?.equips.hasOwnProperty(a),
@@ -147,6 +151,11 @@ export const useConfigStore = defineStore('configStore', () => {
       config.value && (config.value.avatar[p] = { ...defaultAvatarConfig })
     })
 
+    infoStore.options.forEach((option) => {
+      if(Object.keys(config.value.options).includes(option.id.toString())) return
+      config.value.options[option.id.toString()] = 0
+    })
+
     skillIDs.forEach((id) => {
       config.value &&
         (config.value.skills[id] = {
@@ -168,7 +177,10 @@ export const useConfigStore = defineStore('configStore', () => {
     const alter = infoStore.infos?.alter
     if (alter) {
       localStorage.setItem(`dcalc/${alter}/config`, JSON.stringify(config.value))
-      localStorage.setItem(`dcalc/${alter}/config/skillCount`, JSON.stringify(skillCountConfig.value))
+      localStorage.setItem(
+        `dcalc/${alter}/config/skillCount`,
+        JSON.stringify(skillCountConfig.value),
+      )
     }
   }
 
@@ -203,7 +215,7 @@ export const useConfigStore = defineStore('configStore', () => {
       skills: [],
       info: [],
       suits: [],
-      buffer:false
+      buffer: false,
     },
     { resetOnExecute: false },
   )
@@ -215,6 +227,6 @@ export const useConfigStore = defineStore('configStore', () => {
     calc,
     result,
     chooseEqu,
-    skillCountConfig
+    skillCountConfig,
   }
 })
diff --git a/frontend/src/stores/index.ts b/frontend/src/stores/index.ts
index f49a7c96..dcd07ad3 100644
--- a/frontend/src/stores/index.ts
+++ b/frontend/src/stores/index.ts
@@ -1,6 +1,6 @@
-import { createPinia } from "pinia"
+import { createPinia } from 'pinia'
 
-export * from "./info"
-export * from "./config"
+export * from './info'
+export * from './config'
 
 export const pinia = createPinia()
diff --git a/frontend/src/stores/info.ts b/frontend/src/stores/info.ts
index 85521705..bf83d35c 100644
--- a/frontend/src/stores/info.ts
+++ b/frontend/src/stores/info.ts
@@ -26,26 +26,31 @@ export const useInfoStore = defineStore('infoStore', () => {
 
   const sundries = computed(() => infos.value?.sundry ?? {})
 
+  const options = computed(() => infos.value?.options ?? [])
+
   const standardUUID = ref<string>()
 
-  const setStandard = (result?: IResult,skillCount?:{
-    count: number;
-    mode: string;
-    name: string;
-}[]) => {
+  const setStandard = (
+    result?: IResult,
+    skillCount?: {
+      count: number
+      mode: string
+      name: string
+    }[],
+  ) => {
     if (!result) {
       !!standardUUID.value && sessionStorage.removeItem(standardUUID.value)
       standardUUID.value = undefined
     } else {
       standardUUID.value = result.uuid
-      sessionStorage.setItem(result.uuid, JSON.stringify({skills:result.skills,skillCount}))
+      sessionStorage.setItem(result.uuid, JSON.stringify({ skills: result.skills, skillCount }))
     }
   }
 
-  const standard = computed(()=>{
+  const standard = computed(() => {
     const value = sessionStorage.getItem(standardUUID.value ?? '')
-    if(!value) return undefined
-    else return JSON.parse(value) as {skills:IResultSkill[],skillCount:IResultSkillCount[]}
+    if (!value) return undefined
+    else return JSON.parse(value) as { skills: IResultSkill[]; skillCount: IResultSkillCount[] }
   })
 
   const parts = [
@@ -107,6 +112,7 @@ export const useInfoStore = defineStore('infoStore', () => {
     jades,
     setStandard,
     standard,
-    sundries
+    sundries,
+    options
   }
 })
diff --git a/frontend/src/style/app.scss b/frontend/src/style/app.scss
index 43ee6b2c..254cbd00 100644
--- a/frontend/src/style/app.scss
+++ b/frontend/src/style/app.scss
@@ -1,26 +1,54 @@
-@use "./animation.scss";
+@use './animation.scss';
 
 .text-shadow {
-  text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000,
-    0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000,
-    0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000,
-    0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000,
-    0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000,
-    0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000,
-    0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
+  text-shadow:
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000;
 }
 
 @font-face {
-  font-family: "dcalc";
-  src: url("@/assets/fonts/dcalc.ttf");
+  font-family: 'dcalc';
+  src: url('@/assets/fonts/dcalc.ttf');
 }
 
 :root {
   font-size: 16px;
-  --cursor-pointer: url("@/assets/cursor/basic.cur"),
-    url("@/assets/cursor/cursor.png"), pointer !important;
-  --cursor-active: url("@/assets/cursor/basic_press.cur"),
-    url("@/assets/cursor/cursor.png"), pointer !important;
+  --cursor-pointer:
+    url('@/assets/cursor/basic.cur'), url('@/assets/cursor/cursor.png'), pointer !important;
+  --cursor-active:
+    url('@/assets/cursor/basic_press.cur'), url('@/assets/cursor/cursor.png'), pointer !important;
 }
 
 html,
@@ -39,16 +67,44 @@ body,
 
 * {
   // font-family: "ArkPixel", "Consola", sans-serif;
-  font-family: "dcalc", "SimSun";
+  font-family: 'dcalc', 'SimSun';
   // font-family: "STSong";
   font-size: 12px;
-  text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000,
-    0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000,
-    0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000,
-    0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000,
-    0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000,
-    0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000,
-    0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
+  text-shadow:
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000,
+    0 0 1px #000;
   // image-rendering:pixelated;
   // text-rendering: geometricPrecision;
   // letter-spacing: -0.5px;
@@ -91,12 +147,12 @@ body,
 ::-webkit-scrollbar-button:vertical:single-button:start {
   width: 11px;
   // 添加标题栏后调整相关位置
-  background: url("@/assets/img/icon/up.png") 0px 1px no-repeat;
+  background: url('@/assets/img/icon/up.png') 0px 1px no-repeat;
 }
 
 ::-webkit-scrollbar-button:vertical:single-button:end {
   width: 11px;
-  background: url("@/assets/img/icon/down.png") 0px 1px no-repeat;
+  background: url('@/assets/img/icon/down.png') 0px 1px no-repeat;
 }
 
 .divider {
@@ -140,10 +196,10 @@ body,
   .name {
     padding: 0px 5px 0px 5px;
     &::after {
-      content: "";
+      content: '';
       width: 210px;
       height: 8px;
-      background: url("@/assets/img/underline.png");
+      background: url('@/assets/img/underline.png');
       display: block;
       background-size: contain;
       left: 5px;
@@ -197,7 +253,7 @@ body,
 
 .app-header {
   // -webkit-app-region: drag;
-  background-image: url("@/assets/img/control/title.png");
+  background-image: url('@/assets/img/control/title.png');
   background-size: 100% 100%;
   color: #9d8c5b;
   border-top: 1px solid #6c81a7;
@@ -206,7 +262,7 @@ body,
 
 .min-icon {
   -webkit-app-region: no-drag;
-  background: url("@/assets/img/icon/min.png") no-repeat;
+  background: url('@/assets/img/icon/min.png') no-repeat;
 
   background-size: 10px 10px;
   background-position: center;
@@ -214,7 +270,7 @@ body,
 
 .close-icon {
   -webkit-app-region: no-drag;
-  background: url("@/assets/img/icon/exit.png") no-repeat;
+  background: url('@/assets/img/icon/exit.png') no-repeat;
   background-size: 10px 10px;
   background-position: center;
 }
@@ -258,7 +314,7 @@ body,
 }
 
 .primeval {
-  background-image: -webkit-linear-gradient(top, #28d931,#33acea);
+  background-image: -webkit-linear-gradient(top, #28d931, #33acea);
   color: transparent;
   background-clip: text;
   text-shadow: none;
@@ -371,33 +427,32 @@ body,
 //   mix-blend-mode: color-dodge;
 // }
 
-.lvInfo{
-  background-image: url("@/assets/img/specificity/lv.png");
+.lvInfo {
+  background-image: url('@/assets/img/specificity/lv.png');
   background-repeat: no-repeat !important;
   background-size: auto auto !important;
   width: 30px;
   height: 16px;
   z-index: 10;
-  color:#4E3D1B
+  color: #4e3d1b;
 }
 
-.lvInfoActive{
-  background-image: url("@/assets/img/specificity/lv_active.png");
+.lvInfoActive {
+  background-image: url('@/assets/img/specificity/lv_active.png');
   background-repeat: no-repeat !important;
   background-size: auto auto !important;
   width: 30px;
   height: 16px;
   z-index: 10;
-  color:#FEB300
+  color: #feb300;
 }
 
-
-.lvInfoMaster{
-  background-image: url("@/assets/img/specificity/lv_master.png");
+.lvInfoMaster {
+  background-image: url('@/assets/img/specificity/lv_master.png');
   background-repeat: no-repeat !important;
   background-size: auto auto !important;
   width: 30px;
   height: 16px;
   z-index: 10;
-  color:#FEB300
+  color: #feb300;
 }
diff --git a/frontend/src/style/char-img.scss b/frontend/src/style/char-img.scss
index 0e9cd922..ee770b3d 100644
--- a/frontend/src/style/char-img.scss
+++ b/frontend/src/style/char-img.scss
@@ -36,13 +36,11 @@
 // 极诣·契魔者
 .demon_slayer {
   background: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_02_02.png) no-repeat;
-
 }
 
 // 极诣·流浪武士
 .vegabond {
   background: url(https://bbscdn.df.nexon.com/pg/characters/img/main/mc_02_03.png) no-repeat;
-
 }
 
 // 极诣·刃影
diff --git a/frontend/src/style/icon.scss b/frontend/src/style/icon.scss
index b12036a7..f5d4ee4d 100644
--- a/frontend/src/style/icon.scss
+++ b/frontend/src/style/icon.scss
@@ -1,5 +1,11 @@
-@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;
+@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: $size !important;
   background-position: $position !important;
@@ -7,117 +13,116 @@
   height: $height !important;
 
   &:hover {
-    background-image: url("@/assets/img/icon/#{$icon-name}_hover.png") !important;
+    background-image: url('@/assets/img/icon/#{$icon-name}_hover.png') !important;
   }
   &:active {
-    background-image: url("@/assets/img/icon/#{$icon-name}_active.png") !important;
+    background-image: url('@/assets/img/icon/#{$icon-name}_active.png') !important;
   }
   &:disabled {
-    background-image: url("@/assets/img/icon/#{$icon-name}_disabled.png") !important;
+    background-image: url('@/assets/img/icon/#{$icon-name}_disabled.png') !important;
   }
 }
 
 .icon-reset {
-  @include icon-style("reset");
+  @include icon-style('reset');
 }
 
 .icon-set {
-  @include icon-style("set");
+  @include icon-style('set');
 }
 
 .icon-prev {
-  @include icon-style("prev", 16px, 16px);
+  @include icon-style('prev', 16px, 16px);
 }
 
 .icon-next {
-  @include icon-style("next", 16px, 16px);
+  @include icon-style('next', 16px, 16px);
 }
 
 .icon-dropdown {
-  @include icon-style("dropdown", 16px, 16px);
+  @include icon-style('dropdown', 16px, 16px);
 }
 
 .icon-search {
-  @include icon-style("search");
+  @include icon-style('search');
 }
 
 .icon-increase {
-  @include icon-style("increase");
+  @include icon-style('increase');
 }
 
 .icon-reduce {
-  @include icon-style("reduce");
+  @include icon-style('reduce');
 }
 
 .icon-plus {
-  @include icon-style("plus");
+  @include icon-style('plus');
 }
 
 .icon-detail {
-  @include icon-style("detail");
+  @include icon-style('detail');
 }
 
 .icon-home {
-  @include icon-style("home");
+  @include icon-style('home');
 }
 
 .icon-reflesh {
-  @include icon-style("reflesh");
+  @include icon-style('reflesh');
 }
 
 .icon-update {
-  @include icon-style("update");
+  @include icon-style('update');
 }
 
 .icon-share {
-  @include icon-style("share");
+  @include icon-style('share');
 }
 
 .icon-import {
-  @include icon-style("import");
+  @include icon-style('import');
 }
 
 .icon-menu-drug {
-  @include icon-style("menu/drug", 20px, 20px, auto 100%);
+  @include icon-style('menu/drug', 20px, 20px, auto 100%);
 }
 
 .icon-menu-specificity {
-  @include icon-style("menu/specificity", 20px, 20px, auto 100%);
+  @include icon-style('menu/specificity', 20px, 20px, auto 100%);
 }
 
 .icon-menu-favourite {
-  @include icon-style("menu/favourite", 20px, 20px, auto 100%);
+  @include icon-style('menu/favourite', 20px, 20px, auto 100%);
 }
 
 .icon-menu-recommend {
-  @include icon-style("menu/recommend", 20px, 20px, auto 100%);
+  @include icon-style('menu/recommend', 20px, 20px, auto 100%);
 }
 
 .icon-menu-set {
-  @include icon-style("menu/set", 20px, 20px, auto 100%);
+  @include icon-style('menu/set', 20px, 20px, auto 100%);
 }
 
-.icon-max{
-  @include icon-style("max");
+.icon-max {
+  @include icon-style('max');
 }
 
-.icon-min{
-  @include icon-style("min");
+.icon-min {
+  @include icon-style('min');
 }
 
-
 .icon-increase-little {
-  @include icon-style("increase",16px, 16px);
+  @include icon-style('increase', 16px, 16px);
 }
 
 .icon-reduce-little {
-  @include icon-style("reduce", 16px, 16px);
+  @include icon-style('reduce', 16px, 16px);
 }
 
-.icon-max-little{
-  @include icon-style("max", 16px, 16px);
+.icon-max-little {
+  @include icon-style('max', 16px, 16px);
 }
 
-.icon-min-little{
-  @include icon-style("min", 16px, 16px);
+.icon-min-little {
+  @include icon-style('min', 16px, 16px);
 }
diff --git a/frontend/src/style/index.scss b/frontend/src/style/index.scss
index cae1f17e..f2d02958 100644
--- a/frontend/src/style/index.scss
+++ b/frontend/src/style/index.scss
@@ -1,3 +1,3 @@
-@use "./app.scss";
-@use "./icon.scss";
-@use "./char-img.scss"
+@use './app.scss';
+@use './icon.scss';
+@use './char-img.scss';
diff --git a/frontend/src/utils/images.ts b/frontend/src/utils/images.ts
index fbce2ca5..2cedc239 100644
--- a/frontend/src/utils/images.ts
+++ b/frontend/src/utils/images.ts
@@ -14,6 +14,6 @@ export const getImageURL = (image: string) => {
   return `${baseURL}${image}`
 }
 
-export const getLocalImageURL = (url:string)=>{
+export const getLocalImageURL = (url: string) => {
   return new URL(url, import.meta.url).href
 }
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index d10d0875..3af9577c 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -2,9 +2,9 @@ export function in_range(num: number, start: number, end: number) {
   return start <= num && num <= end
 }
 
-export function to_percent(num?: number, defaultValue: number = 0, suffix = "", withPlus = false) {
+export function to_percent(num?: number, defaultValue: number = 0, suffix = '', withPlus = false) {
   num = num ?? defaultValue
-  return (num > 0 && withPlus ? "+" : "") + num?.multiply(100).round(2).toString().concat(suffix)
+  return (num > 0 && withPlus ? '+' : '') + num?.multiply(100).round(2).toString().concat(suffix)
 }
 
 export function get_num(num?: number, defaultValue: number = 0) {
@@ -13,14 +13,14 @@ export function get_num(num?: number, defaultValue: number = 0) {
 
 export function format_string(str: string, params: any = {}, ...args: any[]) {
   let num = 0
-  str = str.replace(/{}/g, match => {
+  str = str.replace(/{}/g, (match) => {
     return args[num++] ?? match
   })
-  str = str.replace(/{\d+}/g, match => {
+  str = str.replace(/{\d+}/g, (match) => {
     const i = Number.parseInt(match.slice(1, -1))
     return args[i] ?? match
   })
-  str = str.replace(/{\w+}/g, match => {
+  str = str.replace(/{\w+}/g, (match) => {
     const name = match.slice(1, -1)
     return params[name] ?? match
   })
@@ -29,11 +29,11 @@ export function format_string(str: string, params: any = {}, ...args: any[]) {
 
 export function format_bytes(bytes: number, decimals = 2) {
   if (bytes === 0) {
-    return "0 Bytes"
+    return '0 Bytes'
   }
   const k = 1024
   const dm = decimals < 0 ? 0 : decimals
-  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
 
   const i = Math.floor(Math.log(bytes) / Math.log(k))
 
@@ -58,14 +58,14 @@ export function cartesian<T = any>(...arr: T[][]): T[][] {
   return arr.reduce(
     (a, b) => {
       const ret: T[][] = []
-      a.forEach(a => {
-        b.forEach(b => {
+      a.forEach((a) => {
+        b.forEach((b) => {
           ret.push(a.concat([b]))
         })
       })
       return ret
     },
-    [[]] as T[][]
+    [[]] as T[][],
   )
 }
 
@@ -95,7 +95,7 @@ export function debounce_last(func: Function, wait: number) {
 }
 
 export function padding(num: number | string, length: number): string {
-  if ((`${num}`).length >= length) {
+  if (`${num}`.length >= length) {
     return `${num}`
   }
   return padding(`0${num}`, length)
@@ -106,7 +106,10 @@ export function format_float(f: number, digit: number = 2) {
   return (f * m).round(10) / m
 }
 
-export function mapRecord<T extends keyof any, K>(status: Record<T, K>, callback: (value: K, key: T) => K) {
+export function mapRecord<T extends keyof any, K>(
+  status: Record<T, K>,
+  callback: (value: K, key: T) => K,
+) {
   const new_status = {} as Record<T, K>
   for (const key in status) {
     const value = callback(status[key], key)
@@ -117,7 +120,7 @@ export function mapRecord<T extends keyof any, K>(status: Record<T, K>, callback
   return new_status
 }
 
-Array.prototype.max = function<T>(callback: (t: T) => number): [number, T | undefined] {
+Array.prototype.max = function <T>(callback: (t: T) => number): [number, T | undefined] {
   let rs: [number, T | undefined] = [-1, undefined]
   let max = -1
   for (let i = 0; i < this.length; i++) {
@@ -131,7 +134,7 @@ Array.prototype.max = function<T>(callback: (t: T) => number): [number, T | unde
   return rs
 }
 
-Array.prototype.min = function<T>(callback: (t: T) => number): [number, T | undefined] {
+Array.prototype.min = function <T>(callback: (t: T) => number): [number, T | undefined] {
   let rs: [number, T | undefined] = [-1, undefined]
   let min = -1
   for (let i = 0; i < this.length; i++) {
@@ -172,19 +175,19 @@ export function toObj(data: any): any {
   const temp = {}
   for (const key in data) {
     try {
-      if (typeof data[key] === "number" || typeof data[key] === "string") {
+      if (typeof data[key] === 'number' || typeof data[key] === 'string') {
         Object.defineProperty(temp, key, {
           value: data[key],
           writable: true,
           enumerable: true,
-          configurable: true
+          configurable: true,
         })
       } else {
         Object.defineProperty(temp, key, {
           value: RecordToObj(data[key]),
           writable: true,
           enumerable: true,
-          configurable: true
+          configurable: true,
         })
       }
     } catch {
@@ -192,7 +195,7 @@ export function toObj(data: any): any {
         value: data[key],
         writable: true,
         enumerable: true,
-        configurable: true
+        configurable: true,
       })
     }
   }
@@ -202,7 +205,7 @@ export function toObj(data: any): any {
 export function toMap(data: any, except: string[] = []) {
   const temp = {}
   for (const key in data) {
-    if (typeof data[key] === "object" && data[key].constructor != Array && !except.includes(key)) {
+    if (typeof data[key] === 'object' && data[key].constructor != Array && !except.includes(key)) {
       // 需要转换部分,不能是Array,也会被转换
       const sub = {}
       for (const subkey in data[key]) {
@@ -210,21 +213,21 @@ export function toMap(data: any, except: string[] = []) {
           value: new Map(Object.entries(data[key][subkey])),
           writable: true,
           enumerable: true,
-          configurable: true
+          configurable: true,
         })
       }
       Object.defineProperty(temp, key, {
         value: sub,
         writable: true,
         enumerable: true,
-        configurable: true
+        configurable: true,
       })
     } else {
       Object.defineProperty(temp, key, {
         value: data[key],
         writable: true,
         enumerable: true,
-        configurable: true
+        configurable: true,
       })
     }
   }
@@ -238,28 +241,31 @@ export function RecordToObj(todo: Record<string, Map<any, any>>) {
       value: Object.fromEntries(todo[key]),
       writable: true,
       enumerable: true,
-      configurable: true
+      configurable: true,
     })
   }
   return temp
 }
 
 export function getUuid() {
-  if (typeof crypto === "object") {
-    if (typeof crypto.randomUUID === "function") {
+  if (typeof crypto === 'object') {
+    if (typeof crypto.randomUUID === 'function') {
       return crypto.randomUUID()
     }
-    if (typeof crypto.getRandomValues === "function" && typeof Uint8Array === "function") {
+    if (typeof crypto.getRandomValues === 'function' && typeof Uint8Array === 'function') {
       const callback = (c: any) => {
         const num = Number(c)
-        return (num ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (num / 4)))).toString(16)
+        return (num ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (num / 4)))).toString(
+          16,
+        )
       }
-      return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, callback)
+      return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, callback)
     }
   }
   let timestamp = new Date().getTime()
-  let perforNow = (typeof performance !== "undefined" && performance.now && performance.now() * 1000) || 0
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, c => {
+  let perforNow =
+    (typeof performance !== 'undefined' && performance.now && performance.now() * 1000) || 0
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
     let random = Math.random() * 16
     if (timestamp > 0) {
       random = Math.trunc((timestamp + random) % 16)
@@ -268,90 +274,89 @@ export function getUuid() {
       random = Math.trunc((perforNow + random) % 16)
       perforNow = Math.floor(perforNow / 16)
     }
-    return (c === "x" ? random : (random & 0x3) | 0x8).toString(16)
+    return (c === 'x' ? random : (random & 0x3) | 0x8).toString(16)
   })
 }
 
-
 export function rarityClass(type: string) {
   switch (type) {
-    case "太初":
-      return "primeval"
-    case "史诗":
-      return "epic"
-    case "神话":
-      return "myth"
-    case "智慧产物":
-      return "epic"
-    case "神器":
-      return "artifact"
-    case "稀有":
-      return "rare"
-    case "传说":
-      return "legend"
-    case "勇者":
-      return "chronicle"
-    case "高级":
-      return "advanced"
+    case '太初':
+      return 'primeval'
+    case '史诗':
+      return 'epic'
+    case '神话':
+      return 'myth'
+    case '智慧产物':
+      return 'epic'
+    case '神器':
+      return 'artifact'
+    case '稀有':
+      return 'rare'
+    case '传说':
+      return 'legend'
+    case '勇者':
+      return 'chronicle'
+    case '高级':
+      return 'advanced'
     default:
-      return "epic"
+      return 'epic'
   }
 }
 
-export function formatAttr(type:string,value:number){
-  switch(type){
-    case "STR":
+export function formatAttr(type: string, value: number) {
+  switch (type) {
+    case 'STR':
       return `力量 ${value}`
-    case "INT":
+    case 'INT':
       return `智力 ${value}`
-    case "Vitality":
+    case 'Vitality':
       return `体力 ${value}`
-    case "Spirit":
+    case 'Spirit':
       return `精神 ${value}`
-    case "AtkP":
+    case 'AtkP':
       return `物理攻击力 ${value}`
-    case "AtkM":
+    case 'AtkM':
       return `魔法攻击力 ${value}`
-    case "AtkI":
+    case 'AtkI':
       return `独立攻击力 ${value}`
-    case "SkillAttack":
+    case 'SkillAttack':
       return `技能伤害 +${(value * 100).toFixed(2)}%`
-    case "Attack":
-      return `攻击强化 +${(value).toFixed(1)}%`
-    case "Buffer":
-      return `增益量 ${(value)}`
+    case 'Attack':
+      return `攻击强化 +${value.toFixed(1)}%`
+    case 'Buffer':
+      return `增益量 ${value}`
     default:
       return `${type} ${value}`
   }
 }
 
+export const decrypt = (encryptedData: string) => {
+  try {
+    encryptedData = decodeURIComponent(encryptedData)
+      .split('')
+      .map((a) => {
+        if (a == '=') {
+          return a
+        } else {
+          return String.fromCharCode(a.charCodeAt(0) - 1)
+        }
+      })
+      .join('')
+    const decryptedData = atob(encryptedData)
 
-export const decrypt = (encryptedData:string)=>{
-  try{
-    encryptedData = decodeURIComponent(encryptedData).split("").map(a=>{
-      if(a=='='){
-        return a
-      }
-      else{
-        return String.fromCharCode(a.charCodeAt(0) - 1)
-      }
-    }).join("")
-    const decryptedData = atob(encryptedData);
-
-    const len = decryptedData.length;
-    const decryptedBinaryOffset = decryptedData.slice(0, len-13);
-    const decryptedTimestamp = decryptedData.slice(len-13, len);
+    const len = decryptedData.length
+    const decryptedBinaryOffset = decryptedData.slice(0, len - 13)
+    const decryptedTimestamp = decryptedData.slice(len - 13, len)
 
     return {
-      uid:parseInt(decryptedBinaryOffset,2),
-      time:parseInt(decryptedTimestamp)
+      uid: parseInt(decryptedBinaryOffset, 2),
+      time: parseInt(decryptedTimestamp),
     }
-  }
-  catch(e){
+  } catch (e) {
     console.log(e)
     return {
-      uid:-1,
-      time:0
+      uid: -1,
+      time: 0,
     }
   }
 }
diff --git a/frontend/src/utils/open.ts b/frontend/src/utils/open.ts
index c921e904..8ec9474d 100644
--- a/frontend/src/utils/open.ts
+++ b/frontend/src/utils/open.ts
@@ -1,8 +1,8 @@
-import type { MaybeRef } from "@vueuse/core"
-import querystring from "query-string"
-import { h, isRef } from "vue"
-import { useRouter } from "vue-router"
-import { useDialog } from "@/components/hooks/dialog"
+import type { MaybeRef } from '@vueuse/core'
+import querystring from 'query-string'
+import { h, isRef } from 'vue'
+import { useRouter } from 'vue-router'
+import { useDialog } from '@/components/hooks/dialog'
 
 interface UseOpenOption {
   /*
@@ -16,7 +16,7 @@ interface UseOpenOption {
   /**
    * 是否打开新页面
    */
-  target?: "_blank" | "_self" | false
+  target?: '_blank' | '_self' | false
 
   title?: string
 }
@@ -25,13 +25,27 @@ export function useOpenWindow(opt?: UseOpenOption & { immediate?: boolean }) {
   const { show, close, randomId } = useDialog()
   const router = useRouter()
 
-  return async (maybeUrl: MaybeRef<string> | (() => string), { width = 0, height = 0, target = "_self", query = {}, title = "DNF计算器 & Colg", scale = 1.0 }: UseOpenOption = {}) => {
-    let url = isRef(maybeUrl) ? maybeUrl.value : typeof maybeUrl === "function" ? maybeUrl() : maybeUrl
+  return async (
+    maybeUrl: MaybeRef<string> | (() => string),
+    {
+      width = 0,
+      height = 0,
+      target = '_self',
+      query = {},
+      title = 'DNF计算器 & Colg',
+      scale = 1.0,
+    }: UseOpenOption = {},
+  ) => {
+    let url = isRef(maybeUrl)
+      ? maybeUrl.value
+      : typeof maybeUrl === 'function'
+        ? maybeUrl()
+        : maybeUrl
     if (!url) {
       return
     }
 
-    if (url.startsWith("/")) {
+    if (url.startsWith('/')) {
       url = router.resolve(url).href
     }
     query.r = `${Math.random()}`
@@ -40,50 +54,48 @@ export function useOpenWindow(opt?: UseOpenOption & { immediate?: boolean }) {
       let _target = target
       if (!_target) {
         const rs = await show({
-          content: "请确认打开新页面的方式",
-          okButton: "当前窗口",
-          rejectButton: "新窗口",
+          content: '请确认打开新页面的方式',
+          okButton: '当前窗口',
+          rejectButton: '新窗口',
           cancelButton: true,
-          defaultStatus: "cancel"
+          defaultStatus: 'cancel',
         })
         if (rs.isOk) {
-          _target = "_self"
+          _target = '_self'
         } else if (rs.isReject) {
-          _target = "_blank"
+          _target = '_blank'
         }
       }
 
-      if (_target == "_blank" || width * height < 1) {
-          window.open(url, _target as string)
-
-      } else if (_target == "_self") {
-
+      if (_target == '_blank' || width * height < 1) {
+        window.open(url, _target as string)
+      } else if (_target == '_self') {
         const id = randomId()
         const onClose = (e: MessageEvent) => {
-          if (e.data == "close") {
+          if (e.data == 'close') {
             close(id)
           }
         }
-        window.addEventListener("message", onClose)
+        window.addEventListener('message', onClose)
         const temp = await show({
           id,
           header: title,
           mask: true,
           scale,
           content() {
-            return h("iframe", {
+            return h('iframe', {
               name: Math.random().toString(36).slice(2),
-              referrerpolicy: "no-referrer",
+              referrerpolicy: 'no-referrer',
               frameborder: 0,
               src: url,
               style: {
                 width: `${width}px`,
-                height: `${height}px`
-              }
+                height: `${height}px`,
+              },
             })
-          }
+          },
         })
-        window.removeEventListener("message", onClose)
+        window.removeEventListener('message', onClose)
         return temp
       }
     } catch (err) {
diff --git a/frontend/uno.config.ts b/frontend/uno.config.ts
index 41d71182..d17d2b62 100644
--- a/frontend/uno.config.ts
+++ b/frontend/uno.config.ts
@@ -1,6 +1,6 @@
 import { defineConfig } from 'unocss'
 // import { presetAttributify } from 'unocss'
-import { blackA, green } from '@radix-ui/colors'
+// import { blackA, green } from '@radix-ui/colors'
 
 export default defineConfig({
   // presets: [presetAttributify()],