dev

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

@@ -25,8 +25,8 @@
           :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 v-for="(i, index) in emblemOptions" :key="index">
+              <calc-option :value="i.id">[{{ i.rarity }}]{{ i.value }}</calc-option>
             </template>
           </calc-select>
         </div>
@@ -37,11 +37,12 @@
 
 <script lang="ts" setup name="Emblems">
 import EmblemList from '@/components/dnf/Emblem/List/index.vue'
-import { useConfigStore } from '@/stores'
+import { useConfigStore, useInfoStore } from '@/stores'
 
 const part = ref('彩色')
 
 const configStore = useConfigStore()
+const infoStore = useInfoStore()
 
 const lvs = [
   '稀有Lv.1',
@@ -62,6 +63,13 @@ const lvs = [
   '史诗Lv.1',
 ]
 
+const emblemOptions = computed(() => {
+  if (part.value == '彩色') {
+    return infoStore.emblems.filter((a) => a.type != '白金').sort((a, b) => b.fame - a.fame)
+  }
+  return infoStore.emblems.filter((a) => a.type == part.value).sort((a, b) => b.fame - a.fame)
+})
+
 const emblemMaxCount = computed(() => {
   if (part.value == '彩色') {
     return 6

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

@@ -7,7 +7,7 @@
         :formatValue="(lv: number) => `${lv} 级`"
         v-model="sundryData['fog']"
         :min="1"
-        :max="30"
+        :max="100"
         :step="1"
         class="flex-1 !h-20px"
       />

frontend/src/pages/Character/Forge/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-420px overflow-auto">
+  <div class="w-480px pr-10px overflow-auto">
     <calc-collapse class="w-100%" title="装备/时装/徽章打造(点击部位切换)">
       <calc-tabs v-model="partTab" class="!mb-2">
         <calc-tab :value="0">装备</calc-tab>

frontend/src/pages/Character/Index.vue

@@ -22,7 +22,12 @@
       <calc-checkbox round v-model="configStore.config.DSB">系统奶</calc-checkbox>
       <calc-checkbox round v-model="configStore.config.BUFF">组队</calc-checkbox>
       <calc-button title="打造导入" @click="showImport" class="ml-1" icon="import"></calc-button>
-      <calc-button title="技能导入" @click="showImportSkill" class="ml-1" icon="exchange"></calc-button>
+      <calc-button
+        title="技能导入"
+        @click="showImportSkill"
+        class="ml-1"
+        icon="exchange"
+      ></calc-button>
     </div>
   </div>
 
@@ -30,7 +35,6 @@
     <ImportVue></ImportVue>
   </calc-dialog>
 
-
   <calc-dialog lazy header="技能导入" v-model:visible="importSkillVisible">
     <ImportSkillVue></ImportSkillVue>
   </calc-dialog>
@@ -39,8 +43,8 @@
 <script lang="ts" setup name="Index">
 import { useInfoStore } from '@/stores/info'
 import { useConfigStore } from '@/stores'
-import ImportVue from './Config/import.vue';
-import ImportSkillVue from './Config/importSkill.vue';
+import ImportVue from './Config/import.vue'
+import ImportSkillVue from './Config/importSkill.vue'
 import Result from './Result/Index.vue'
 const props = defineProps<{
   alter: string
@@ -50,13 +54,24 @@ const configStore = useConfigStore()
 const importVisible = ref(false)
 const importSkillVisible = ref(false)
 
+const shouldWatch = ref(true)
+
+const isExecuting = ref(false)
+
 const stopWatch = watch(
   () => {
     return JSON.stringify(configStore.config)
   },
-  useDebounceFn(async () => {
-    ;(await configStore.result).execute()
-  }, 800),
+  async () => {
+    if (isExecuting.value) return
+
+    isExecuting.value = true
+    try {
+      ;(await configStore.result).execute()
+    } finally {
+      isExecuting.value = false
+    }
+  },
 )
 
 const showImport = () => {

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex gap-1" v-if="configStore.result.state">
+  <div class="flex gap-1 h-full" v-if="configStore.result.state">
     <div class="flex flex-col justify-between">
       <div class="flex gap-5 items-center">
         <calc-button class="flex-1" @click="setStandard">设为基准</calc-button>
@@ -29,6 +29,7 @@
         :avatar="configStore.config.avatarLink"
         :oaths="configStore.config.oaths"
         :display="type"
+        v-model:active-skill-id="configStore.config.oathSkill"
       ></Info>
     </div>
     <Skill

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

@@ -1,6 +1,11 @@
 <template>
-  <div class="bg-hex-000000/60 p-2 border-solid border-#FFFF/15" v-if="data && data.length > 0">
-    <div class="bg-hex-000000/40 text-white border-solid border-#FFFF/15 border-t-0">
+  <div
+    class="bg-hex-000000/60 p-2 border-solid border-#FFFF/15 overflow-hidden flex"
+    v-if="data && data.length > 0"
+  >
+    <div
+      class="bg-hex-000000/40 text-white border-solid border-#FFFF/15 border-t-0 overflow-hidden flex-1 flex flex-col"
+    >
       <div class="flex px-1px gap-1px">
         <div
           v-for="(header, key) in [
@@ -22,21 +27,27 @@
           </template>
         </div>
       </div>
-      <div class="overflow-y-auto max-h-600px">
-        <div class="flex px-1px gap-1px h-8.5" v-for="(skill, _) in data" :key="_">
-          <div class="flex w-180px items-center gap-10px">
-            <div class="w-28px h-28px relative">
-              <img :src="getImageURL(skill.icon)" alt="" :class="['h-28px w-28px', skill.type === 'passive' ? 'passive' : '']" />
-              <div v-if="skill.lv" class="skill-lv-min" :data-text="`${skill.lv}`">
-                {{ skill.lv }}
+      <div class="flex-1 overflow-hidden flex">
+        <div class="overflow-y-auto flex-1">
+          <div class="flex px-1px gap-1px h-8.5" v-for="(skill, _) in data" :key="_">
+            <div class="flex w-180px items-center gap-10px">
+              <div class="w-28px h-28px relative">
+                <img
+                  :src="getImageURL(skill.icon)"
+                  alt=""
+                  :class="['h-28px w-28px', skill.type === 'passive' ? 'passive' : '']"
+                />
+                <div v-if="skill.lv" class="skill-lv-min" :data-text="`${skill.lv}`">
+                  {{ skill.lv }}
+                </div>
               </div>
+              <div>{{ skill.name }}</div>
             </div>
-            <div>{{ skill.name }}</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 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>
       <!-- <div

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="bg-#000000bf w-264px">
-    <div class="h-177px">
+  <div class="bg-#000000bf w-266px flex-1 overflow-hidden flex flex-col">
+    <div class="h-177px flex-shrink-0">
       <EquList
         :detail="props.equs"
         :with-sub-weapon="(infoStore.infos?.subweapons?.length ?? 0) > 0"
@@ -21,92 +21,135 @@
       </template>
     </div>
     <div class="border-y-1px border-y-solid my-1px border-#FFFF/10 bg-black">
-      <template v-for="suit in props.suits" :key="suit.id">
-        <div class="flex items-center px-5px">
-          <img
-            :src="getImageURL(`/equipment${suit.imageUrl}`)"
-            alt=""
-            class="w-20px h-20px object-contain"
-          />
-          <div class="flex px-5px flex-1 justify-between" :class="rarityClass(suit.rarity)">
-            <span>{{ suit.name }} 套装</span>
-            <span>{{ suit.rarity }} {{ lvFormat(suit.level, suit.rarity) }}</span>
-            <span>{{ suit.point }}点</span>
-          </div>
+      <div class="flex items-center px-5px" v-if="suit">
+        <img
+          :src="getImageURL(`/equipment${suit.imageUrl}`)"
+          alt=""
+          class="w-20px h-20px object-contain"
+        />
+
+        <div class="flex px-5px flex-1" :class="rarityClass(suit.rarity)">
+          <span class="flex-1 mr-auto block">{{ suit.name }} 套装</span>
+          <span class="w-50px text-right block">
+            {{ suit.rarity }} {{ lvFormat(suit.level, suit.rarity) }}
+          </span>
+          <span class="w-50px text-right block">{{ suit.point }}点</span>
         </div>
-      </template>
+      </div>
+      <!-- <div class="flex justify-end mr-10px text-#836832" v-if="correction > 0">
+        补正：{{ correction }}点
+      </div> -->
+
+      <div class="flex items-center px-5px" v-if="oathSuit">
+        <img
+          :src="getImageURL(`/equipment${oathSuit.imageUrl}`)"
+          alt=""
+          class="w-20px h-20px object-contain"
+        />
+        <div class="flex px-5px flex-1" :class="rarityClass(oathSuit.rarity)">
+          <span class="flex-1 mr-auto block">{{ oathSuit.name }} 誓约</span>
+          <span class="w-50px text-right block">
+            {{ oathSuit.rarity }} {{ lvFormat(oathSuit.level, oathSuit.rarity) }}
+          </span>
+          <span class="w-50px text-right block">{{ oathSuit.point }}点</span>
+        </div>
+      </div>
+      <div v-if="oathSkills" class="flex justify-around my-5px oath-skill">
+        <!-- :class="['flex-1', skill.active ? 'bg-#3ea74e text-white' : 'bg-#000000bf text-#836832']" -->
+        <template v-for="skill in oathSkills" :key="skill.id">
+          <div
+            class="flex items-center px-5px flex-col skill"
+            :class="{ active: skill.active, disabled: !skill.enable }"
+            @click="changeSkillId(skill)"
+          >
+            <div
+              :style="{
+                backgroundImage: `url(${getImageURL(`${skill.imageUrl}`)})`,
+                backgroundSize: 'contain',
+              }"
+              class="w-28px h-28px skill-icon"
+            />
+            <!-- <span class="pt-4px">{{ skill.name }}</span> -->
+          </div>
+        </template>
+      </div>
     </div>
-    <div class="border-y-1px border-y-solid my-1px border-#FFFF/10">
+
+    <div
+      class="border-y-1px border-y-solid my-1px border-#FFFF/10 flex-1 flex flex-col overflow-hidden"
+    >
       <div class="flex">
         <div class="flex-1 flex items-center justify-center bg-#221A08 text-#9A7E4A">
           穿戴{{ display == 'equ' ? '装备' : '誓约' }}信息
         </div>
       </div>
-      <template v-if="display == 'equ'">
-        <template v-for="part in partOrder" :key="part">
-          <div class="flex p-2px partItem gap-5px">
-            <img
-              :src="getImageURL(`/equipment/part/${part}.png`)"
-              alt=""
-              class="w-20px h-20px object-contain"
-            />
-            <div class="flex items-center justify-center" v-if="adaptation(part) > 0">
+      <div class="flex-1 overflow-y-auto">
+        <template v-if="display == 'equ'">
+          <template v-for="part in partOrder" :key="part">
+            <div class="flex p-2px partItem gap-5px">
               <img
-                :src="getImageURL(`/equipment/adaptation/${adaptation(part)}.png`)"
+                :src="getImageURL(`/equipment/part/${part}.png`)"
                 alt=""
-                class="w-11px h-10px object-contain"
+                class="w-20px h-20px object-contain"
               />
+              <div class="flex items-center justify-center" v-if="adaptation(part) > 0">
+                <img
+                  :src="getImageURL(`/equipment/adaptation/${adaptation(part)}.png`)"
+                  alt=""
+                  class="w-11px h-10px object-contain"
+                />
+              </div>
+              <div
+                class="flex items-center"
+                v-if="props.equs[part]?.reinforce > 0"
+                :class="props.equs[part]?.reinforceType == 1 ? 'artifact' : 'advanced'"
+              >
+                +{{ props.equs[part]?.reinforce }}
+              </div>
+              <div class="rare" v-if="props.equs[part]?.refine > 0">
+                ({{ props.equs[part]?.refine }})
+              </div>
+              <div :class="rarityClass(equ(props.equs?.[part]?.id)?.rarity ?? '')">
+                {{ equ(props.equs?.[part]?.id)?.name }}
+              </div>
             </div>
-            <div
-              class="flex items-center"
-              v-if="props.equs[part]?.reinforce > 0"
-              :class="props.equs[part]?.reinforceType == 1 ? 'artifact' : 'advanced'"
-            >
-              +{{ props.equs[part]?.reinforce }}
-            </div>
-            <div class="rare" v-if="props.equs[part]?.refine > 0">
-              ({{ props.equs[part]?.refine }})
-            </div>
-            <div :class="rarityClass(equ(props.equs?.[part]?.id)?.rarity ?? '')">
-              {{ equ(props.equs?.[part]?.id)?.name }}
-            </div>
-          </div>
+          </template>
         </template>
-      </template>
-      <template v-else>
-        <template v-for="part in oathOrder" :key="part">
-          <div class="flex p-2px partItem gap-5px">
-            <img
-              :src="getImageURL(`/equipment/part/${part == '11' ? '誓约' : '星蕴石'}.png`)"
-              alt=""
-              class="w-20px h-20px object-contain"
-            />
-            <div class="flex items-center justify-center" v-if="oathAdaptation(part) > 0">
+        <template v-else>
+          <template v-for="part in oathOrder" :key="part">
+            <div class="flex p-2px partItem gap-5px">
               <img
-                :src="getImageURL(`/equipment/adaptation/${oathAdaptation(part)}.png`)"
+                :src="getImageURL(`/equipment/part/${part == '11' ? '誓约' : '星蕴石'}.png`)"
                 alt=""
-                class="w-11px h-10px object-contain"
+                class="w-20px h-20px object-contain"
               />
-            </div>
-            <!-- <div
+              <div class="flex items-center justify-center" v-if="oathAdaptation(part) > 0">
+                <img
+                  :src="getImageURL(`/equipment/adaptation/${oathAdaptation(part)}.png`)"
+                  alt=""
+                  class="w-11px h-10px object-contain"
+                />
+              </div>
+              <!-- <div
               class="flex items-center"
               v-if="props.equs[part]?.reinforce > 0"
               :class="props.equs[part]?.reinforceType == 1 ? 'artifact' : 'advanced'"
             >
               +{{ props.equs[part]?.reinforce }}
             </div> -->
-            <!-- <div class="rare" v-if="props.equs[part]?.refine > 0">
+              <!-- <div class="rare" v-if="props.equs[part]?.refine > 0">
               ({{ props.equs[part]?.refine }})
             </div> -->
-            {{ equ(props.equs?.[part]?.id) }}
-            <div :class="rarityClass(equ(props.oaths?.[part]?.id)?.rarity ?? '')">
-              {{ equ(props.oaths?.[part]?.id)?.name }}
+              {{ equ(props.equs?.[part]?.id) }}
+              <div :class="rarityClass(equ(props.oaths?.[part]?.id)?.rarity ?? '')">
+                {{ equ(props.oaths?.[part]?.id)?.name }}
+              </div>
             </div>
-          </div>
+          </template>
         </template>
-      </template>
+      </div>
     </div>
-    <div class="h-40px w-full"></div>
+    <!-- <div class="h-40px w-full"></div> -->
   </div>
 </template>
 
@@ -121,7 +164,11 @@ import { useInfoStore } from '@/stores'
 
 const props = defineProps<{
   info: IResultUserInfo[]
-  suits: IResultSuit[]
+  suits: {
+    suit?: IResultSuit
+    oath?: IResultSuit
+    correction?: number
+  }
   equs: Record<string, IConfigEquip>
   oaths: Record<string, IConfigOath>
   avatar: string
@@ -146,6 +193,47 @@ const partOrder = [
 const oathOrder = Array.from({ length: 12 }, (_, i) => (11 - i).toString())
 const infoStore = useInfoStore()
 
+const activeSkillId = defineModel('activeSkillId', { default: '0' })
+
+const suit = computed(() => {
+  return props.suits.suit
+})
+
+const oathSuit = computed(() => {
+  return props.suits.oath
+})
+
+const correction = computed(() => {
+  return props.suits.correction ?? 0
+})
+
+const changeSkillId = (skill: { skillId: string; enable: boolean }) => {
+  console.log(skill)
+  if (!skill.enable) return
+  if (activeSkillId.value !== skill.skillId) {
+    activeSkillId.value = skill.skillId
+  }
+}
+
+const oathSkills = computed(() => {
+  const skillOrder = ['2', '1', '3']
+
+  const res = props.suits.oath?.skills.sort((left, right) => {
+    const leftIndex = skillOrder.indexOf(left.skillId)
+    const rightIndex = skillOrder.indexOf(right.skillId)
+    const normalizedLeftIndex = leftIndex === -1 ? skillOrder.length : leftIndex
+    const normalizedRightIndex = rightIndex === -1 ? skillOrder.length : rightIndex
+
+    return normalizedLeftIndex - normalizedRightIndex
+  })
+
+  return res?.map((a) => ({
+    ...a,
+    active:
+      (a.enable && a.id == props.suits.oath?.id) || (a.enable && a.skillId == activeSkillId.value),
+  }))
+})
+
 const equ = (id: string) => {
   if (props.display == 'oath') {
     console.log(props.oaths, id)
@@ -200,4 +288,38 @@ const lvFormat = (lv: number, rarity: string) => {
 .partItem:nth-child(2n) {
   background-color: #000100;
 }
+
+.oath-skill {
+  .skill {
+    &.active {
+    }
+
+    &:not(.active) {
+      filter: grayscale(100%);
+    }
+
+    .skill-icon {
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      border-radius: 50%;
+    }
+
+    &.disabled .skill-icon {
+      position: relative;
+      filter: grayscale(100%);
+
+      &::after {
+        content: ' ';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 100%;
+        height: 100%;
+        background-image: url('@/assets/img/oath/disabled.png');
+        background-size: cover;
+        background-position: center;
+      }
+    }
+  }
+}
 </style>

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

@@ -1,6 +1,11 @@
 <template>
-  <div class="bg-hex-000000/60 p-2 border-solid border-#FFFF/15" v-if="data && data.length > 0">
-    <div class="bg-hex-000000/40 text-white border-solid border-#FFFF/15 border-t-0">
+  <div
+    class="bg-hex-000000/60 p-2 border-solid border-#FFFF/15 overflow-hidden flex"
+    v-if="data && data.length > 0"
+  >
+    <div
+      class="bg-hex-000000/40 text-white border-solid border-#FFFF/15 border-t-0 overflow-hidden flex-1 flex flex-col"
+    >
       <div class="flex px-1px gap-1px">
         <div
           v-for="(header, key) in [
@@ -22,28 +27,31 @@
         </div>
         <div class="item-head w-60px">占比</div>
       </div>
-      <div class="overflow-y-auto max-h-600px">
-        <div class="flex px-1px gap-1px h-8.5" v-for="(skill, _) in data" :key="_">
-          <div class="flex w-180px items-center gap-10px">
-            <div class="w-28px h-28px relative">
-              <img :src="getImageURL(skill.icon)" alt="" class="w-28px h-28px" />
-              <div v-if="skill.lv" class="skill-lv-min" :data-text="`Lv${skill.lv}`">
-                Lv{{ skill.lv }}
+      <div class="flex-1 overflow-hidden flex">
+        <div class="overflow-y-auto flex-1">
+          <div class="flex px-1px gap-1px h-8.5" v-for="(skill, _) in data" :key="_">
+            <div class="flex w-180px items-center gap-10px">
+              <div class="w-28px h-28px relative">
+                <img :src="getImageURL(skill.icon)" alt="" class="w-28px h-28px" />
+                <div v-if="skill.lv" class="skill-lv-min" :data-text="`Lv${skill.lv}`">
+                  Lv{{ skill.lv }}
+                </div>
               </div>
+              <div>{{ skill.name }} {{ !skill.mode ? '' : `[${skill.mode}]` }}</div>
             </div>
-            <div>{{ skill.name }} {{ !skill.mode ? '' : `[${skill.mode}]` }}</div>
+            <div class="w-50px flex items-center justify-center">{{ skill.cd.toFixed(1) }}s</div>
+            <div class="w-50px flex items-center justify-center">
+              <calc-input
+                type="number"
+                class="!w-40px !min-w-40px !pl-0 flex items-center justify-center"
+                v-model="skillCount(skill).value"
+              ></calc-input>
+            </div>
+            <component :is="formatDamage(skill)"></component>
           </div>
-          <div class="w-50px flex items-center justify-center">{{ skill.cd.toFixed(1) }}s</div>
-          <div class="w-50px flex items-center justify-center">
-            <calc-input
-              type="number"
-              class="!w-40px !min-w-40px !pl-0 flex items-center justify-center"
-              v-model="skillCount(skill).value"
-            ></calc-input>
-          </div>
-          <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"