From daf128411bc7447b652e4b6c19e6de335055a307 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A5=BF=E7=93=9C=C2=B0?= <wxh_email@yeah.net>
Date: Thu, 10 Apr 2025 15:56:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=AC=A1=E6=95=B0=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/calc/type.ts                 |   6 +
 frontend/src/assets/img/icon/input_lower.png  | Bin 0 -> 185 bytes
 frontend/src/assets/img/icon/input_upper.png  | Bin 0 -> 164 bytes
 frontend/src/components/calc/input/index.vue  |  85 +++++---
 frontend/src/pages/Character/Result/Index.vue |   2 +-
 .../Character/Result/components/Skill.vue     | 184 ++++++++++++++----
 frontend/src/stores/config.ts                 |  23 ++-
 frontend/src/stores/info.ts                   |  12 +-
 8 files changed, 239 insertions(+), 73 deletions(-)
 create mode 100644 frontend/src/assets/img/icon/input_lower.png
 create mode 100644 frontend/src/assets/img/icon/input_upper.png

diff --git a/frontend/src/api/calc/type.ts b/frontend/src/api/calc/type.ts
index 4c58f8df..fb4759a6 100644
--- a/frontend/src/api/calc/type.ts
+++ b/frontend/src/api/calc/type.ts
@@ -31,3 +31,9 @@ export interface IResultSuit{
   rarity:string
   value:string
 }
+
+export interface IResultSkillCount {
+  count: number
+  mode: string
+  name: string
+}
diff --git a/frontend/src/assets/img/icon/input_lower.png b/frontend/src/assets/img/icon/input_lower.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e6aa83f1b48d6e9e759d2ac06fb591c241f1dbf
GIT binary patch
literal 185
zcmeAS@N?(olHy`uVBq!ia0vp^+(696!3HEnjZ%I9DV-A6h?3y^w370~qErU&{LJEv
zO!Z;~*NT#&#N?9vA_b?M#N_Pc#1e(D)S}|d{5+L6xl4fhJUm?-Ln`JZ|M`$~yq-<v
zz?XhT)<4Nk8zdcBHnGKYv8vceNG3KJ@ZJz<7CGeWcCBIE4F6Ni>)IwV@+w$!rYZRy
gHQ;^0<;cJwJ6&$ty^<q0fo3vzy85}Sb4q9e07L&e+W-In

literal 0
HcmV?d00001

diff --git a/frontend/src/assets/img/icon/input_upper.png b/frontend/src/assets/img/icon/input_upper.png
new file mode 100644
index 0000000000000000000000000000000000000000..69e081ba50927d23328e9112d61786486f9cc872
GIT binary patch
literal 164
zcmeAS@N?(olHy`uVBq!ia0vp^+(696!3HEnjZ%I9DV-A6h?3y^w370~qErU&{LJEv
zO!Z;~*NT#&#N?9vA_b?M#N_Pc#1e(D)S}|d{5+L6xl4fhj6Gc(Ln`JZryO9i+jHY%
zyu+bp!B`n*h9v^W+^!$!@K!YA?fD_HC_6!Ai9jT?vLRO@14G<g@oD<{YHxtr89ZJ6
KT-G@yGywpEt})91

literal 0
HcmV?d00001

diff --git a/frontend/src/components/calc/input/index.vue b/frontend/src/components/calc/input/index.vue
index 40a497fb..f316b1e2 100644
--- a/frontend/src/components/calc/input/index.vue
+++ b/frontend/src/components/calc/input/index.vue
@@ -1,44 +1,69 @@
 <script lang="tsx">
-import { useVModel } from "@vueuse/core"
-import { defineComponent } from "vue"
+import { useVModel } from '@vueuse/core'
+import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: "IInput",
+  name: 'IInput',
   props: {
     modelValue: {
       type: [String, Number],
-      default: ""
-    }
+      default: '',
+    },
+    type: {
+      type: String,
+      default: 'text',
+    },
+    min: {
+      type: Number,
+      default: 0,
+    },
   },
   setup(props) {
-    const modelValue = useVModel(props, "modelValue")
-    return () => <input v-model={modelValue.value} class="i-input" />
-  }
+    const modelValue = useVModel(props, 'modelValue')
+    return () => (
+      <div class="flex min-w-80px h-20px border-1 border-solid border-[#5b472a] rounded-[2px] bg-[#000000]">
+        <input
+          class="flex-1 border-none w-full outline-none h-auto line-height-100% text-[#937639] m-0 bg-[#000000]"
+          type={props.type}
+          v-model={modelValue.value}
+        />
+        {props.type == 'number' && (
+          <div class="h-full">
+            <div
+              class="input-number-upper h-50% w-10px"
+              onClick={() => (modelValue.value = Number(modelValue.value) + 1)}
+            ></div>
+            <div
+              class="input-number-lower h-50% w-10px"
+              onClick={() => (modelValue.value = Math.max(Number(modelValue.value) - 1, props.min))}
+            ></div>
+          </div>
+        )}
+      </div>
+    )
+  },
 })
 </script>
 
 <style lang="scss">
-  .i-input {
-    min-width: 80px;
-    width: 178px;
-    user-select: none;
-    outline: none;
-    height: 20px;
-    min-height: 16px;
-    line-height: 100%;
-    // font-size: 12px;
-    color: #937639;
-    background-color: rgba(0, 0, 0, 1);
-    border: 1px solid #5b472a;
-    border-radius: 2px;
-    margin: 0;
-    padding-left: 10px;
-  }
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
 
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0;
-  }
+.input-number-upper {
+  background-image: url('@/assets/img/icon/input_upper.png');
+  background-size: 8px auto;
+  background-position: bottom 1px right 2px;
+  background-repeat: no-repeat;
+}
+
+.input-number-lower {
+  background-image: url('@/assets/img/icon/input_lower.png');
+  background-size: 8px auto;
+  background-position: top 1px right 2px;
+  background-repeat: no-repeat;
+}
 </style>
diff --git a/frontend/src/pages/Character/Result/Index.vue b/frontend/src/pages/Character/Result/Index.vue
index 347ab41f..431c65d2 100644
--- a/frontend/src/pages/Character/Result/Index.vue
+++ b/frontend/src/pages/Character/Result/Index.vue
@@ -25,7 +25,7 @@ const infoStore = useInfoStore()
 
 const setStandard = () => {
   if(!configStore?.result?.state?.uuid) return
-  infoStore.setStandard(configStore.result.state)
+  infoStore.setStandard(configStore.result.state,configStore.skillCountConfig)
 }
 
 const clearStandard = () => {
diff --git a/frontend/src/pages/Character/Result/components/Skill.vue b/frontend/src/pages/Character/Result/components/Skill.vue
index dc2c6bce..5a4b219d 100644
--- a/frontend/src/pages/Character/Result/components/Skill.vue
+++ b/frontend/src/pages/Character/Result/components/Skill.vue
@@ -2,55 +2,176 @@
   <div class="bg-hex-000000/60 p-4 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="flex px-1px gap-1px">
-        <div class="item-head w-200px">技能</div>
-        <div class="item-head w-80px">CD</div>
-        <div class="item-head w-150px">伤害</div>
-        <div class="item-head w-150px">秒伤</div>
+        <div
+          v-for="(header, key) in [
+            { label: '技能', width: '180px', sortKey: 'name' },
+            { label: 'CD', width: '50px', sortKey: 'cd' },
+            { label: '次数', width: '50px' },
+            { label: '秒伤', width: '100px', sortKey: 'dps' },
+            { label: '总伤害', width: '110px', sortKey: 'total' },
+          ]"
+          :key="key"
+          class="item-head"
+          :style="{width: header.width}"
+          @click="header.sortKey && sortValue(header.sortKey)"
+        >
+          {{ header.label }}
+          <template v-if="header.sortKey && sort === header.sortKey">
+            <span>{{ order === 'desc' ? '△' : '▽' }}</span>
+          </template>
+        </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-200px items-center gap-10px">
+        <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>{{ skill.name }} {{ !skill.mode ? '' : `[${skill.mode}]` }}</div>
+          </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>
-          <div class="w-80px flex items-center justify-center">{{ skill.cd.toFixed(1) }}s</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>{{showTotal}}</div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts" name="Skill">
-import type { IResultSkill } from '@/api/calc/type'
+import type { IResultSkill, IResultSkillCount } from '@/api/calc/type'
+import { useConfigStore } from '@/stores'
 import { getImageURL } from '@/utils/images'
 import { h } from 'vue'
 const props = defineProps<{
   data: IResultSkill[]
-  standard?: IResultSkill[]
+  standard?: {
+    skills: IResultSkill[]
+    skillCount: IResultSkillCount[]
+  }
 }>()
 
+const sort = ref<string>('total')
+const order = ref<'asc' | 'desc'>('desc')
+
+const config = useConfigStore()
+
 const data = computed(() => {
-  return props.data.sort((a, b) => b.damage - a.damage)
+  return props.data.sort((a, b) => {
+    let aValue = 0
+    let bValue = 0
+    if (['damage', 'cd', 'name'].includes(sort.value)) {
+      // @ts-ignore
+      aValue = a[sort.value]
+      // @ts-ignore
+      bValue = b[sort.value]
+    }
+    if( sort.value == 'total'){
+      aValue = a.damage * skillCount(a).value
+      bValue = b.damage * skillCount(b).value
+    }
+    if(sort.value == 'dps'){
+      aValue = a.damage / a.cd
+      bValue = b.damage / b.cd
+    }
+    if (sort.value == 'name') {
+      // @ts-ignore
+      return order.value == 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue)
+    }
+    return order.value == 'asc' ? aValue - bValue : bValue - aValue
+  })
+})
+
+const sortValue = (key: string) => {
+  if (sort.value == key) {
+    order.value = order.value == 'asc' ? 'desc' : 'asc'
+  } else {
+    order.value = 'desc'
+  }
+  sort.value = key
+}
+
+const skillCount = (skill: IResultSkill) => {
+  return computed({
+    get() {
+      let countConfig = config.skillCountConfig.find(
+        (a) => a.name == skill.name && a.mode == skill.mode,
+      )
+      if (!countConfig) {
+        countConfig = { name: skill.name, mode: skill.mode, count: 1 }
+        config.skillCountConfig.push(countConfig)
+      }
+      return countConfig.count
+    },
+    set(val) {
+      const index = config.skillCountConfig.findIndex(
+        (a) => a.name == skill.name && a.mode == skill.mode,
+      )
+      if (index > -1) {
+        config.skillCountConfig[index].count = val
+      } else {
+        config.skillCountConfig.push({ name: skill.name, mode: skill.mode, count: val })
+      }
+    },
+  })
+}
+
+const totalDamage = computed(() => {
+  return props.data.reduce((acc, skill) => {
+    return acc + skill.damage * skillCount(skill).value
+  }, 0)
+})
+
+const totalStandard = computed(() => {
+  if (!props.standard) return undefined
+  return props.standard.skills.reduce((acc, skill) => {
+    const standardSkillCount = props.standard?.skillCount.find(
+      (a) => a.name == skill.name && a.mode == skill.mode,
+    )?.count
+    return acc + skill.damage * (standardSkillCount || 0)
+  }, 0)
+})
+
+const showTotal = computed(() => {
+  if (!totalStandard.value || totalStandard.value == 0) return totalDamage.value
+  return (totalDamage.value - totalStandard.value) / totalStandard.value * 100
 })
 
 const formatDamage = (skill: IResultSkill) => {
-  const standardSkill = props.standard?.find((a) => a.name == skill.name && a.mode == skill.mode)
-  if (standardSkill && standardSkill.damage > 0 && standardSkill.cd > 0) {
-    const damageValue = (skill.damage - standardSkill.damage) / standardSkill.damage
+  const standardSkill = props.standard?.skills?.find(
+    (a) => a.name == skill.name && a.mode == skill.mode,
+  )
+  const standardSkillCount = props.standard?.skillCount.find(
+    (a) => a.name == skill.name && a.mode == skill.mode,
+  )?.count
+  const rate = h(
+    'div',
+    {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '60px',
+      },
+    },
+    (((skill.damage * skillCount(skill).value) / totalDamage.value) * 100).toFixed(2) + '%',
+  )
+  if (standardSkill && standardSkill.damage > 0 && standardSkill.cd > 0 && !!standardSkillCount) {
+    const currentSkillCount = skillCount(skill).value
+    const damageValue =
+      (skill.damage * currentSkillCount - standardSkill.damage * standardSkillCount) /
+      (standardSkill.damage * standardSkillCount)
     const damage = h(
       'div',
       {
@@ -58,7 +179,7 @@ const formatDamage = (skill: IResultSkill) => {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          width: '150px',
+          width: '110px',
           color: damageValue >= 0 ? '#37fa38' : '#ff0000',
         },
       },
@@ -74,8 +195,8 @@ const formatDamage = (skill: IResultSkill) => {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          width: '150px',
-          color: damageValue >= 0 ? '#37fa38' : '#ff0000',
+          width: '110px',
+          color: dpsValue >= 0 ? '#37fa38' : '#ff0000',
         },
       },
       (dpsValue * 100).toFixed(2) + '%',
@@ -85,7 +206,7 @@ const formatDamage = (skill: IResultSkill) => {
       {
         class: 'flex items-center justify-center',
       },
-      [damage, dps],
+      [dps, damage, rate],
     )
   } else {
     const damage = h(
@@ -95,10 +216,10 @@ const formatDamage = (skill: IResultSkill) => {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          width: '150px',
+          width: '110px',
         },
       },
-      Math.round(skill.damage).toLocaleString(),
+      Math.round(skill.damage * skillCount(skill).value).toLocaleString(),
     )
     const dps = h(
       'div',
@@ -107,7 +228,7 @@ const formatDamage = (skill: IResultSkill) => {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          width: '150px',
+          width: '110px',
         },
       },
       Math.round(skill.damage / skill.cd).toLocaleString(),
@@ -117,7 +238,7 @@ const formatDamage = (skill: IResultSkill) => {
       {
         class: 'flex items-center justify-center',
       },
-      [damage, dps],
+      [dps, damage, rate],
     )
   }
 }
@@ -145,9 +266,6 @@ const formatDamage = (skill: IResultSkill) => {
 }
 
 .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;
diff --git a/frontend/src/stores/config.ts b/frontend/src/stores/config.ts
index adea7c69..3fe28281 100644
--- a/frontend/src/stores/config.ts
+++ b/frontend/src/stores/config.ts
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { useInfoStore } from './info'
 import api from '@/api'
 import type { IEquipment } from '@/api/info/type'
+import type { IResultSkillCount } from '@/api/calc/type'
 // | '上衣'
 // | '头肩'
 // | '下装'
@@ -83,7 +84,7 @@ export const useConfigStore = defineStore('configStore', () => {
     sundry: {},
   })
 
-  const skillCountConfig = ref<Record<string, { count: number }>>({})
+  const skillCountConfig = ref<IResultSkillCount[]>([])
 
   const loadConfig = () => {
     const infoStore = useInfoStore()
@@ -91,9 +92,13 @@ export const useConfigStore = defineStore('configStore', () => {
 
     if (alter) {
       const localConfig = localStorage.getItem(`dcalc/${alter}/config`)
+      const localSkillConfig = localStorage.getItem(`dcalc/${alter}/config/skillCount`)
       if (localConfig) {
         config.value = JSON.parse(localConfig)
       }
+      if (localSkillConfig) {
+        skillCountConfig.value = JSON.parse(localSkillConfig)
+      }
     }
     if (!config.value)
       config.value = {
@@ -107,9 +112,11 @@ export const useConfigStore = defineStore('configStore', () => {
     if (!config.value?.skills) config.value.skills = {}
     if (!config.value?.jades) config.value.jades = {}
     if (!config.value?.avatar) config.value.avatar = {}
-    if (!config.value?.sundry)config.value.sundry = {}
+    if (!config.value?.sundry) config.value.sundry = {}
 
-    const part = [...infoStore.parts, '宠物','副武器'].filter((a) => !config.value?.equips.hasOwnProperty(a))
+    const part = [...infoStore.parts, '宠物', '副武器'].filter(
+      (a) => !config.value?.equips.hasOwnProperty(a),
+    )
     const avatarPart = infoStore.avatarParts
       .filter((a) => a != '宠物')
       .filter((a) => !config.value?.avatar.hasOwnProperty(a))
@@ -147,6 +154,7 @@ 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))
     }
   }
 
@@ -155,9 +163,13 @@ export const useConfigStore = defineStore('configStore', () => {
     return await api.calc(config.value)
   }
 
-  const chooseEqu = async (equip: IEquipment | undefined, isFusion: boolean = false,isSubWeapon:boolean=false) => {
+  const chooseEqu = async (
+    equip: IEquipment | undefined,
+    isFusion: boolean = false,
+    isSubWeapon: boolean = false,
+  ) => {
     if (!equip) return
-    const part = isSubWeapon ? '副武器' :(equip?.itemType == '武器' ? '武器' : equip?.itemDetailType)
+    const part = isSubWeapon ? '副武器' : equip?.itemType == '武器' ? '武器' : equip?.itemDetailType
     if (equip && config.value.equips[part]) {
       const key = isFusion ? 'fusion' : 'id'
       if (config.value.equips[part][key] == equip.id) {
@@ -188,5 +200,6 @@ export const useConfigStore = defineStore('configStore', () => {
     calc,
     result,
     chooseEqu,
+    skillCountConfig
   }
 })
diff --git a/frontend/src/stores/info.ts b/frontend/src/stores/info.ts
index f47ff4ce..85521705 100644
--- a/frontend/src/stores/info.ts
+++ b/frontend/src/stores/info.ts
@@ -2,7 +2,7 @@ import api from '@/api'
 import type { ICharacterInfo } from '@/api/info/type'
 import { defineStore } from 'pinia'
 import { useConfigStore } from './config'
-import type { IResult, IResultSkill } from '@/api/calc/type'
+import type { IResult, IResultSkill, IResultSkillCount } from '@/api/calc/type'
 
 export const useInfoStore = defineStore('infoStore', () => {
   const alter_token = ref<string>('')
@@ -28,20 +28,24 @@ export const useInfoStore = defineStore('infoStore', () => {
 
   const standardUUID = ref<string>()
 
-  const setStandard = (result?: IResult) => {
+  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(result.skills))
+      sessionStorage.setItem(result.uuid, JSON.stringify({skills:result.skills,skillCount}))
     }
   }
 
   const standard = computed(()=>{
     const value = sessionStorage.getItem(standardUUID.value ?? '')
     if(!value) return undefined
-    else return JSON.parse(value) as IResultSkill[]
+    else return JSON.parse(value) as {skills:IResultSkill[],skillCount:IResultSkillCount[]}
   })
 
   const parts = [