dev

frontend/src/api/info/index.ts

@@ -26,6 +26,10 @@ export default defineRequest((request) => {
     async getSkillFromCode(code: string) {
       const res = await request.post(`/skillTree/`, { code })
       return res.data
-    }
+    },
+    async getOathInfo(suitId: string, skillId: string, rarity: string) {
+      const res = await request.get(`/info/oath/${suitId}/${skillId}`, { params: { rarity } })
+      return res.data
+    },
   }
 })

frontend/src/components/dnf/Emblem/List/index.vue

@@ -1,17 +1,131 @@
 <template>
-  <div class="pos-relative w-248px h-full" :class="props.withBg ? 'emblem-bg' : ''"></div>
+  <div class="pos-relative w-248px h-full" :class="props.withBg ? 'emblem-bg' : ''">
+    <template v-for="part in parts" :key="part">
+      <div
+        class="pos-absolute text-white/50 flex items-center justify-center rounded-50%"
+        :style="infoStyle(part)"
+        @click="choosePart(part)"
+      >
+        <img
+          class="w-20px h-20px"
+          style="object-fit: none; object-position: hue; mix-blend-mode: screen"
+          :src="rarityIcon(part)"
+          v-if="part != '白金'"
+        />
+        <img class="pos-absolute" :style="lvStyle" :src="lvIcon(part)" v-if="part != '白金'" />
+      </div>
+    </template>
+  </div>
 </template>
 
 <script lang="ts" setup name="EmblemList">
+import { useInfoStore, type IConfigEmblem } from '@/stores'
+import { getImageURL } from '@/utils/images'
+
 const props = defineProps({
   withBg: {
     type: Boolean,
     default: true,
   },
   detail: {
-    type: Object as PropType<Record<string, any>>,
+    type: Object as PropType<Record<string, IConfigEmblem>>,
   },
 })
+
+const infoStore = useInfoStore()
+const partModelValue = defineModel('part', { default: '彩色' })
+
+const partIcon = computed(() => {
+  return (part: string) => {
+    return new URL(`../Images/part/${part}.png`, import.meta.url).href
+  }
+})
+
+const rarityIcon = computed(() => {
+  return (part: string) => {
+    const rarity = Math.floor((props.detail?.[part]?.lv || 0) / 5)
+    console.log(rarity)
+    return new URL(`../Images/rarity/${rarity}.png`, import.meta.url).href
+  }
+})
+
+const lvIcon = computed(() => {
+  return (part: string) => {
+    const lv = (props.detail?.[part]?.lv || 0) % 5
+    return getImageURL(`/equipment/adaptation/${lv + 1}.png`)
+  }
+})
+
+const position: Record<string, { x: number; y: number; width?: number; height?: number }> = {
+  彩色: {
+    x: 99,
+    y: 15,
+  },
+  红色: {
+    x: 18,
+    y: 39,
+  },
+  蓝色: {
+    x: 180,
+    y: 39,
+  },
+  黄色: {
+    x: 65,
+    y: 83,
+  },
+  绿色: {
+    x: 133,
+    y: 83,
+  },
+  白金: {
+    x: 33,
+    y: 117,
+    width: 24,
+    height: 24,
+  },
+  增益: {
+    x: 192,
+    y: 117,
+    width: 24,
+    height: 24,
+  },
+}
+
+const lvStyle = computed(() => {
+  return {
+    left: '50%',
+    top: '100%',
+    transform: 'translate(-50%,-100%)',
+    zIndex: 7,
+  }
+})
+
+const infoStyle = computed(() => {
+  return (part: string) => {
+    console.log(`url(${rarityIcon.value(part)}),url(${partIcon.value(part)})`)
+    return {
+      left: `${position[part as keyof typeof position].x}px`,
+      top: `${position[part as keyof typeof position].y}px`,
+      width: `${position[part as keyof typeof position]?.width ?? 50}px`,
+      height: `${position[part as keyof typeof position]?.height ?? 50}px`,
+      backgroundImage: `url(${partIcon.value(part)})`,
+      // backgroundImage: `url(${rarityIcon.value(part)}),url(${partIcon.value(part)})`,
+      // backgroundImage: `url(${partIcon.value(part)}),url(${rarityIcon.value(part)})`,
+      // backgroundBlendMode: 'screen',
+      zIndex: 6,
+      // fontWeight: 900,
+    }
+  }
+})
+
+const parts = computed(() => {
+  const parts = infoStore.emblemParts
+  return parts
+})
+
+const choosePart = (part: string) => {
+  partModelValue.value = part
+}
 </script>
 
 <style lang="scss" scoped>

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

@@ -93,7 +93,7 @@
       <div class="item-head" @click="hideSuit = !hideSuit">
         套装信息{{ hideSuit ? ' (点击显示)' : '（点击隐藏）' }}
       </div>
-      <div v-show="!hideSuit">
+      <template v-if="!hideSuit">
         <div class="flex bg-#191918 items-center justify-center gap-2px p-5px">
           <calc-button
             :disabled="raritiyList.findIndex((rarity) => rarity === curSuitLv.rarity) <= 0"
@@ -135,40 +135,43 @@
         <div class="flex-1 overflow-y-auto overflow-x-hidden bg-black w-240px">
           <SuitInfo v-if="curSuitInfo" :suit="curSuitInfo" />
         </div>
-      </div>
+      </template>
     </div>
     <div class="flex flex-col flex-1 overflow-hidden bg-black" v-if="curOathInfo">
       <div class="item-head">誓约信息</div>
 
       <div class="flex bg-#191918 items-center justify-center gap-2px p-5px">
         <calc-button
-          :disabled="raritiyList.findIndex((rarity) => rarity === curSuitLv.rarity) <= 0"
+          :disabled="raritiyList.findIndex((rarity) => rarity === curOathSkillLv.rarity) <= 0"
           icon="min-little"
-          @click="changeSuitLv('preRarity')"
+          @click="changeOathSkillLv('preRarity')"
         ></calc-button>
         <calc-button
           icon="reduce-little"
           :disabled="
-            raritiyList.findIndex((rarity) => rarity === curSuitLv.rarity) <= 0 && curSuitLv.lv <= 1
+            raritiyList.findIndex((rarity) => rarity === curOathSkillLv.rarity) <= 0 &&
+            curOathSkillLv.lv <= 1
           "
-          @click="changeSuitLv('preLv')"
+          @click="changeOathSkillLv('preLv')"
         ></calc-button>
-        <div class="flex px-20px gap-x-10px" :class="rarityClass(curSuitLv.rarity)">
-          <span>{{ curSuitLv.rarity }}</span>
-          <span>{{ formatLv(curSuitLv.lv, curSuitLv.rarity) }}</span>
+        <div class="flex px-20px gap-x-10px" :class="rarityClass(curOathSkillLv.rarity)">
+          <span>{{ curOathSkillLv.rarity }}</span>
+          <span>{{ formatLv(curOathSkillLv.lv, curOathSkillLv.rarity) }}</span>
         </div>
         <calc-button
           :disabled="
-            raritiyList.findIndex((rarity) => rarity === curSuitLv.rarity) >= raritiyList.length - 1
+            raritiyList.findIndex((rarity) => rarity === curOathSkillLv.rarity) >=
+            raritiyList.length - 1
           "
-          @click="changeSuitLv('nextLv')"
+          @click="changeOathSkillLv('nextLv')"
           icon="increase-little"
         ></calc-button>
         <calc-button
           :disabled="
-            raritiyList.findIndex((rarity) => rarity === curSuitLv.rarity) >= raritiyList.length - 1
+            raritiyList.findIndex((rarity) => rarity === curOathSkillLv.rarity) >=
+            raritiyList.length - 1
           "
-          @click="changeSuitLv('nextRarity')"
+          @click="changeOathSkillLv('nextRarity')"
           icon="max-little"
         ></calc-button>
       </div>
@@ -190,7 +193,7 @@
         class="w-80% m-auto h-1px bg-gradient-to-r from-[rgba(52,43,27,0.05)] via-[rgba(52,43,27,1)] to-[rgba(52,43,27,0.05)]"
       ></div>
       <div class="flex-1 overflow-y-auto overflow-x-hidden bg-black w-240px">
-        <SuitInfo v-if="curSuitInfo" :suit="curSuitInfo" />
+        <SuitInfo v-if="curOathSkillInfo" :suit="curOathSkillInfo" />
       </div>
     </div>
   </div>
@@ -218,6 +221,10 @@ const curRarity = ref('')
 const curSuit = ref(16203)
 const curEquId = ref()
 const curSuitLv = ref({
+  rarity: '太初',
+  lv: 1,
+})
+const curOathSkillLv = ref({
   rarity: '史诗',
   lv: 1,
 })
@@ -270,6 +277,41 @@ const changeSuitLv = (
   }
 }
 
+const changeOathSkillLv = (
+  type: 'preRarity' | 'nextRarity' | 'preLv' | 'nextLv',
+  resetLv: boolean = true,
+) => {
+  if (type == 'preRarity') {
+    const index = raritiyList.findIndex((a) => a == curOathSkillLv.value.rarity)
+    if (index > 0) {
+      curOathSkillLv.value.rarity = raritiyList[index - 1]
+      curOathSkillLv.value.lv = resetLv ? 1 : 5
+      return
+    }
+  } else if (type == 'nextRarity') {
+    const index = raritiyList.findIndex((a) => a == curOathSkillLv.value.rarity)
+    if (index < raritiyList.length - 1) {
+      curOathSkillLv.value.rarity = raritiyList[index + 1]
+      curOathSkillLv.value.lv = 1
+      return
+    }
+  } else if (type == 'preLv') {
+    if (curOathSkillLv.value.lv > 1) {
+      curOathSkillLv.value.lv--
+      return
+    } else {
+      changeOathSkillLv('preRarity', false)
+    }
+  } else if (type == 'nextLv') {
+    if (curOathSkillLv.value.lv < 5) {
+      curOathSkillLv.value.lv++
+      return
+    } else {
+      changeOathSkillLv('nextRarity')
+    }
+  }
+}
+
 const choose_part = ref<string[]>([])
 
 const curEquInfo = computed(() => {
@@ -299,6 +341,32 @@ const curOathInfo = computed(() => {
   return infoStore.oathSkills?.[curEquInfo.value?.suit[0]]
 })
 
+const curOathSkillLvs = asyncComputed(async () => {
+  if (!curOathInfo.value || !curEquInfo.value?.suit[0]) {
+    return undefined
+  }
+  const res = await infoStore.getOathInfo(
+    curEquInfo.value?.suit[0],
+    oathSkillId.value,
+    curOathSkillLv.value.rarity,
+  )
+  return res
+})
+
+const curOathSkillInfo = computed(() => {
+  const res = curOathSkillLvs.value
+  if (!res) {
+    return undefined
+  }
+  console.log(curEquInfo.value?.suit[0])
+  return {
+    ...res,
+    SkillAttack: parseFloat(res.SkillAttack.toString().split(',')[curOathSkillLv.value.lv - 1]),
+    Buffer: parseFloat(res.Buffer.toString().split(',')[curOathSkillLv.value.lv - 1]),
+    point: parseFloat(res.point.toString().split(',')[curOathSkillLv.value.lv - 1]),
+  }
+})
+
 const chooseCategory = (cat: string) => {
   type.value = cat
   if (type.value == 'oath' && curSuit.value == -1) {

frontend/src/pages/Character/Forge/components/Emblems.vue

@@ -1,9 +1,156 @@
 <template>
-  <div class="h-180px flex justify-center items-center">
-    <EmblemList :withBg="true" />
+  <div class="h-179px flex justify-center items-center">
+    <EmblemList :withBg="true" v-model:part="part" :detail="configStore.config.emblems" />
+  </div>
+  <div class="flex flex-wrap equ-profile">
+    <div class="equ-profile-item">
+      <div class="mr-10px row-name">当前槽位</div>
+      <span>{{ part }}</span>
+    </div>
+    <div class="equ-profile-item" v-if="part != '白金'">
+      <div class="row-name">等级</div>
+      <calc-select v-model="lv" class="flex-1 !h-20px">
+        <template v-for="(i, index) in lvs" :key="index">
+          <calc-option :value="index">{{ i }}</calc-option>
+        </template>
+      </calc-select>
+    </div>
+    <div class="flex w-full">
+      <div class="flex-basis-50px text-center mr-10px">徽章</div>
+      <div class="flex-1 grid gap-4px" :style="emblemGridStyle">
+        <div
+          v-for="(emblem, index) in emblemMaxCount"
+          :style="emblemItemStyle(index)"
+          class="flex"
+          :key="index"
+        >
+          <calc-select v-model="emblems[index]" class="min-w-0 flex-1 !h-20px">
+            <template v-for="(i, index) in lvs" :key="index">
+              <calc-option :value="i">{{ i }}</calc-option>
+            </template>
+          </calc-select>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup name="Emblems">
 import EmblemList from '@/components/dnf/Emblem/List/index.vue'
+import { useConfigStore } from '@/stores'
+
+const part = ref('彩色')
+
+const configStore = useConfigStore()
+
+const lvs = [
+  '稀有Lv.1',
+  '稀有Lv.2',
+  '稀有Lv.3',
+  '稀有Lv.4',
+  '稀有Lv.5',
+  '神器Lv.1',
+  '神器Lv.2',
+  '神器Lv.3',
+  '神器Lv.4',
+  '神器Lv.5',
+  '传说Lv.1',
+  '传说Lv.2',
+  '传说Lv.3',
+  '传说Lv.4',
+  '传说Lv.5',
+  '史诗Lv.1',
+]
+
+const emblemMaxCount = computed(() => {
+  if (part.value == '彩色') {
+    return 6
+  }
+  if (part.value == '白金') {
+    return 2
+  }
+  return 4
+})
+
+const emblemGridStyle = computed(() => {
+  return {
+    gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+  }
+})
+
+const emblemItemStyle = (index: number) => {
+  const count = emblemMaxCount.value
+  const remainder = count % 2
+
+  if (remainder === 1 && index === count - 1) {
+    return {
+      gridColumn: 'span 2 / span 2',
+    }
+  }
+
+  return {
+    gridColumn: 'span 1 / span 1',
+  }
+}
+
+const currentInfo = function <T>(name: string, defaultValue?: T) {
+  return computed<string | number>({
+    get() {
+      return (
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (configStore.config.emblems?.[part.value] as Record<string, any>)?.[name] ??
+        defaultValue ??
+        0
+      )
+    },
+    set(val) {
+      if (val == undefined) {
+        return
+      }
+      // if (name == 'emblem_1' && !has_emblem_1.value) {
+      //   // configStore.setForge(part.value, name, 0)
+      //   return
+      // }
+
+      if (!configStore.config.emblems[part.value]) {
+        configStore.config.emblems[part.value] = { ...configStore.defaultEmblemConfig }
+      }
+      if (configStore.config.emblems[part.value]) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ;(configStore.config.emblems[part.value] as Record<string, any>)[name] = val
+      }
+      if (part.value == '彩色' && name == 'lv') {
+        // 同步其他部位的等级
+        const lv = val as number
+        for (const p of ['红色', '蓝色', '黄色', '绿色']) {
+          if (!configStore.config.emblems[p]) {
+            configStore.config.emblems[p] = { ...configStore.defaultEmblemConfig }
+          }
+          if (configStore.config.emblems[p]) {
+            configStore.config.emblems[p]['lv'] = Math.max(
+              configStore.config.emblems[p]['lv'] || 0,
+              lv,
+            )
+          }
+        }
+      } else if (part.value != '彩色' && name == 'lv') {
+        // 同步彩色部位的等级
+        const lv = val as number
+        if (!configStore.config.emblems['彩色']) {
+          configStore.config.emblems['彩色'] = { ...configStore.defaultEmblemConfig }
+        }
+        if (configStore.config.emblems['彩色']) {
+          configStore.config.emblems['彩色']['lv'] = Math.min(
+            configStore.config.emblems['彩色']['lv'] || 0,
+            lv,
+          )
+        }
+      }
+    },
+  })
+}
+
+const lv = currentInfo('lv', 0)
+
+const emblems = currentInfo<string[]>('items', ['', '', '', '', '', '']) as unknown as Ref<string[]>
 </script>

frontend/src/pages/Character/Result/components/Info.vue

@@ -81,9 +81,9 @@
               alt=""
               class="w-20px h-20px object-contain"
             />
-            <div class="flex items-center justify-center" v-if="adaptation(part) > 0">
+            <div class="flex items-center justify-center" v-if="oathAdaptation(part) > 0">
               <img
-                :src="getImageURL(`/equipment/adaptation/${adaptation(part)}.png`)"
+                :src="getImageURL(`/equipment/adaptation/${oathAdaptation(part)}.png`)"
                 alt=""
                 class="w-11px h-10px object-contain"
               />
@@ -161,6 +161,13 @@ const adaptation = (part: string) => {
   )
 }
 
+const oathAdaptation = (part: string) => {
+  return Math.min(
+    equ(props.oaths?.[part]?.id)?.max_adaptation ?? 0,
+    props.oaths[part]?.adaptation ?? 0,
+  )
+}
+
 const lvFormat = (lv: number, rarity: string) => {
   if (rarity == '太初') return ''
   switch (lv) {

frontend/src/stores/config.ts

@@ -36,6 +36,11 @@ export interface IConfigOath {
   adaptation: number
 }
 
+export interface IConfigEmblem {
+  lv: number
+  items: string[]
+}
+
 export interface IConfig {
   skills: Record<string, { lv: number; vp: number; up: number }>
   equips: Record<string, IConfigEquip>
@@ -65,6 +70,7 @@ export interface IConfig {
   BUFF: boolean
   options: Record<string, number>
   avatarLink: string
+  emblems: Record<string, IConfigEmblem>
 }
 
 const defaultEqusConfig = {
@@ -95,6 +101,11 @@ const defaultOathConfig = {
   adaptation: 0,
 }
 
+const defaultEmblemConfig = {
+  lv: 0,
+  items: ['', '', '', '', '', ''],
+}
+
 export const useConfigStore = defineStore('configStore', () => {
   const config = ref<IConfig>({
     skills: {},
@@ -108,6 +119,7 @@ export const useConfigStore = defineStore('configStore', () => {
     BUFF: false,
     options: {},
     avatarLink: '',
+    emblems: {},
   })
 
   const skillCountConfig = ref<IResultSkillCount[]>([])
@@ -139,6 +151,7 @@ export const useConfigStore = defineStore('configStore', () => {
         BUFF: false,
         options: {},
         avatarLink: '',
+        emblems: {},
       }
     }
     if (!config.value?.equips) config.value.equips = {}
@@ -149,7 +162,7 @@ export const useConfigStore = defineStore('configStore', () => {
     if (!config.value?.bindAwake) config.value.bindAwake = 50
     if (!config.value?.options) config.value.options = {}
     if (!config.value?.oaths) config.value.oaths = {}
-    console.log(config.value.oaths)
+    if (!config.value?.emblems) config.value.emblems = {}
 
     const part = [...infoStore.parts, '宠物', '副武器'].filter(
       (a) => !config.value?.equips.hasOwnProperty(a),
@@ -262,5 +275,6 @@ export const useConfigStore = defineStore('configStore', () => {
     defaultEqusConfig,
     defaultAvatarConfig,
     defaultOathConfig,
+    defaultEmblemConfig,
   }
 })

frontend/src/stores/info.ts

@@ -1,5 +1,5 @@
 import api from '@/api'
-import type { ICharacterInfo, IEquipment } from '@/api/info/type'
+import type { ICharacterInfo, IEquipment, ISuit } from '@/api/info/type'
 import { defineStore } from 'pinia'
 import { useConfigStore } from './config'
 import type { IResult, IResultSkill, IResultSkillCount } from '@/api/calc/type'
@@ -8,6 +8,15 @@ export const useInfoStore = defineStore('infoStore', () => {
   const alter_token = ref<string>('')
   const infos = ref<ICharacterInfo | null>(null)
 
+  const oathCache = ref<
+    {
+      suitId: string
+      skillId: string
+      rarity: string
+      data: ISuit
+    }[]
+  >([])
+
   const skills = computed(() => infos.value?.skills ?? [])
 
   const equips = computed(() => infos.value?.equips ?? [])
@@ -45,6 +54,22 @@ export const useInfoStore = defineStore('infoStore', () => {
     return result
   })
 
+  const getOathInfo = async (suitId: string, skillId: string, rarity: string) => {
+    const res = oathCache.value.find(
+      (o) => o.suitId === suitId && o.skillId === skillId && o.rarity === rarity,
+    )
+    if (res) {
+      return {
+        ...res.data,
+      }
+    }
+    const data: ISuit = await api.getOathInfo(suitId, skillId, rarity)
+    oathCache.value.push({ suitId, skillId, rarity, data })
+    return {
+      ...data,
+    }
+  }
+
   const oathSkills = computed(() => {
     const origin = infos.value?.oaths_skills
     if (!origin) return origin
@@ -133,7 +158,7 @@ export const useInfoStore = defineStore('infoStore', () => {
 
   const oathParts = Array.from({ length: 12 }, (_, i) => i.toString())
 
-  const emblemParts = ['彩色', '红色', '蓝色', '绿色', '黄色']
+  const emblemParts = ['彩色', '红色', '蓝色', '绿色', '黄色', '白金']
 
   const createCharacter = async (alter: string, equVersion?: string) => {
     const time = new Date().getTime()
@@ -163,5 +188,6 @@ export const useInfoStore = defineStore('infoStore', () => {
     sundries,
     options,
     oathSkills,
+    getOathInfo,
   }
 })