dev

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

@@ -130,7 +130,7 @@ export default defineComponent({
       return (
         <>
         <div class="h-150px flex justify-center items-center">
-          <EquList v-model:part={part.value} withBg={false} /></div>
+          <EquList v-model:part={part.value} withBg={false} withPet={false}/></div>
 
         <div class="flex flex-wrap equ-profile">
           <div class="equ-profile-item">

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

@@ -3,6 +3,7 @@
   <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>

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

@@ -1,18 +1,36 @@
 <template>
   <div class="flex gap-2" v-if="configStore.result.state">
-    <Info :suits="configStore.result.state.suits" :info="configStore.result.state.info" :equs="configStore.config.equips"></Info>
-    <Skill :data="configStore.result.state.skills"></Skill>
+    <div class="flex flex-col justify-between">
+      <div class="flex gap-5 items-center">
+        <calc-button class="flex-1" @click="setStandard">设为基准</calc-button>
+        <calc-button class="flex-1" @click="clearStandard">清空基准</calc-button>
+      </div>
+      <Info
+        :suits="configStore.result.state.suits"
+        :info="configStore.result.state.info"
+        :equs="configStore.config.equips"
+      ></Info>
+    </div>
+    <Skill :data="configStore.result.state.skills" :standard="infoStore.standard"></Skill>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useConfigStore } from '@/stores';
-import Info from './components/Info.vue';
-import Skill from './components/Skill.vue';
+import { useConfigStore, useInfoStore } from '@/stores'
+import Info from './components/Info.vue'
+import Skill from './components/Skill.vue'
 
-const configStore = useConfigStore();
+const configStore = useConfigStore()
+const infoStore = useInfoStore()
+
+const setStandard = () => {
+  if(!configStore?.result?.state?.uuid) return
+  infoStore.setStandard(configStore.result.state)
+}
+
+const clearStandard = () => {
+  infoStore.setStandard(undefined)
+}
 </script>
 
-<style scoped lang="scss">
-
-</style>
+<style scoped lang="scss"></style>

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

@@ -54,6 +54,7 @@
         </div>
       </template>
     </div>
+    <div class="h-40px w-full"></div>
   </div>
 </template>
 

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

@@ -7,22 +7,27 @@
         <div class="item-head w-150px">伤害</div>
         <div class="item-head w-150px">秒伤</div>
       </div>
-      <div class="overflow-y-auto max-h-580px">
+      <div class="overflow-y-auto max-h-600px">
         <div class="flex px-1px gap-1px h-8.5" v-for="skill in data" :key="skill.name">
           <div class="flex w-150px 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 v-if="skill.lv" class="skill-lv-min" :data-text="`Lv ${skill.lv}`">
+                Lv {{ skill.lv }}
+              </div>
             </div>
             <div>{{ skill.name }}</div>
           </div>
           <div class="w-80px flex items-center justify-center">{{ skill.cd.toFixed(1) }}s</div>
-          <div class="w-150px flex items-center justify-center">
-            {{ Math.round(skill.damage).toLocaleString() }}
-          </div>
-          <div class="w-150px flex items-center justify-center">
-            {{ Math.round(skill.damage / skill.cd).toLocaleString() }}
-          </div>
+          <!-- <div class="flex">
+            <div class="w-150px flex items-center justify-center">
+              {{ Math.round(skill.damage).toLocaleString() }}
+            </div>
+            <div class="w-150px flex items-center justify-center">
+              {{ Math.round(skill.damage / skill.cd).toLocaleString() }}
+            </div>
+          </div> -->
+          <component :is="formatDamage(skill)"></component>
         </div>
       </div>
     </div>
@@ -32,13 +37,90 @@
 <script setup lang="ts" name="Skill">
 import type { IResultSkill } from '@/api/calc/type'
 import { getImageURL } from '@/utils/images'
+import { h } from 'vue'
 const props = defineProps<{
   data: IResultSkill[]
+  standard?: IResultSkill[]
 }>()
 
 const data = computed(() => {
   return props.data.sort((a, b) => b.damage - a.damage)
 })
+
+const formatDamage = (skill: IResultSkill) => {
+  const standardSkill = props.standard?.find((a) => a.name == skill.name)
+  if (standardSkill && standardSkill.damage > 0 && standardSkill.cd > 0) {
+    const damageValue = (skill.damage - standardSkill.damage) / standardSkill.damage
+    const damage = h(
+      'div',
+      {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '150px',
+          color: damageValue >= 0 ? '#37fa38' : '#ff0000',
+        },
+      },
+      (damageValue * 100).toFixed(2) + '%',
+    )
+    const dpsValue =
+      (skill.damage / skill.cd - standardSkill.damage / standardSkill.cd) /
+      (standardSkill.damage / standardSkill.cd)
+    const dps = h(
+      'div',
+      {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '150px',
+          color: damageValue >= 0 ? '#37fa38' : '#ff0000',
+        },
+      },
+      (dpsValue * 100).toFixed(2) + '%',
+    )
+    return h(
+      'div',
+      {
+        class: 'flex items-center justify-center',
+      },
+      [damage, dps],
+    )
+  } else {
+    const damage = h(
+      'div',
+      {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '150px',
+        },
+      },
+      Math.round(skill.damage).toLocaleString(),
+    )
+    const dps = h(
+      'div',
+      {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '150px',
+        },
+      },
+      Math.round(skill.damage / skill.cd).toLocaleString(),
+    )
+    return h(
+      'div',
+      {
+        class: 'flex items-center justify-center',
+      },
+      [damage, dps],
+    )
+  }
+}
 </script>
 
 <style scoped lang="scss">
@@ -50,27 +132,27 @@ const data = computed(() => {
 }
 
 .skill-lv-min {
-    position: absolute;
-    z-index: 0;
-    top: -3px;
-    right: -4px;
-    font-size: 12px;
-    transform: scale(0.7);
-    color: black;
-    text-shadow: none;
-    font-weight: bolder;
-    font-family: Arial;
-  }
+  position: absolute;
+  z-index: 0;
+  top: -3px;
+  right: -4px;
+  font-size: 12px;
+  transform: scale(0.7);
+  color: black;
+  text-shadow: none;
+  font-weight: bolder;
+  font-family: Arial;
+}
 
-  .skill-lv-min::before {
-    // text-shadow: #37fa38 2px 0 0, #37fa38 0 2px 0, #37fa38 -2px 0 0, #37fa38 0 -2px 0;
-    // -webkit-text-stroke-width: 1px;
-    // -webkit-text-stroke-color: #37fa38;
-    content: attr(data-text);
-    position: absolute;
-    -webkit-text-stroke: 2.5px #37fa38;
-    font-family: Arial;
-    text-shadow: none;
-    z-index: -1;
-  }
+.skill-lv-min::before {
+  // text-shadow: #37fa38 2px 0 0, #37fa38 0 2px 0, #37fa38 -2px 0 0, #37fa38 0 -2px 0;
+  // -webkit-text-stroke-width: 1px;
+  // -webkit-text-stroke-color: #37fa38;
+  content: attr(data-text);
+  position: absolute;
+  -webkit-text-stroke: 2.5px #37fa38;
+  font-family: Arial;
+  text-shadow: none;
+  z-index: -1;
+}
 </style>