dnftools/dcalc
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

dev

Browse Source
This commit is contained in:
imelon
2025-04-06 02:26:06 +08:00
parent 41d14c947c
commit 718bba9136
39 changed files with 386 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Character/Forge/components/avatar.vue → frontend/src/pages/Character/Forge/components/Avatars.vue
-1
View File
@@ -143,7 +143,6 @@ export default defineComponent({
>{`${item.rarity}${item.categorize}徽章[${item.detail}]`}</calc-option>
))}
</calc-select>
)
</div>
) : (
<div></div>
frontend/src/pages/Character/Forge/components/equipment.vue → frontend/src/pages/Character/Forge/components/Equipments.vue
+10 -2
View File
@@ -130,7 +130,7 @@ export default defineComponent({
return (
<>
<div class="h-150px flex justify-center items-center">
<EquList v-model:part={part.value}/></div>
<EquList v-model:part={part.value} withBg={false} /></div>
<div class="flex flex-wrap equ-profile">
<div class="equ-profile-item">
@@ -211,12 +211,20 @@ export default defineComponent({
{can_upgrade.value ? (
<div class="equ-profile-item">
<div class="row-name">调适</div>
{/* <calc-slider
showValue={true}
showPercent={false}
v-model={adaptation.value}
min={0}
max={3}
step={1}
class="flex-1 !h-20px"
/> */}
<calc-select v-model={adaptation.value} class="flex-1 !h-20px">
{renderList(4, (i) => (
<calc-option value={i - 1}>{i - 1}</calc-option>
))}
</calc-select>
</div>
) : (
<div></div>
frontend/src/pages/Character/Forge/components/jade.vue → frontend/src/pages/Character/Forge/components/Jades.vue
+29 -1
View File
@@ -7,6 +7,13 @@
{{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}}
@@ -26,6 +33,27 @@ import { getFloat } from '@/utils'
const configStore = useConfigStore()
const infoStore = useInfoStore()
const currentJade = computed(() => {
return function (id: number = -1) {
if (id == -1) {
return undefined
} else {
const res = []
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}`
}
}
const valueList = computed(() => {
return function (id: number = -1) {
if (id == -1) {
@@ -36,7 +64,7 @@ const valueList = computed(() => {
if (cur) {
const { max, min, unit, pre } = cur
//
if (pre == 0) {
if (unit.includes('等级')) {
res.push({
id: 1,
value: unit
frontend/src/pages/Character/Forge/index.vue
+3 -3
View File
@@ -14,9 +14,9 @@
</div>
</template>
<script setup lang="ts">
import equipment from './components/equipment.vue'
import clothes from './components/avatar.vue';
import jade from './components/jade.vue';
import equipment from './components/Equipments.vue'
import clothes from './components/Avatars.vue';
import jade from './components/Jades.vue';
const partTab = ref(0)
</script>
frontend/src/pages/Character/Index.vue
+2 -3
View File
@@ -8,11 +8,10 @@
</calc-tabs>
</div>
<div class="content flex">
<div class="flex flex-1" v-if="!!infoStore.infos?.alter">
<div class="flex flex-1 m-1" v-if="!!infoStore.infos?.alter">
<RouterView></RouterView>
</div>
<div class="w-40%">
<div class="flex-1 m-1">
<Result></Result>
</div>
</div>
frontend/src/pages/Character/Result/Index.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<div class="flex" v-if="configStore.result.state">
<Info></Info>
<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>
</template>
frontend/src/pages/Character/Result/components/Info.vue
+119 -1
View File
@@ -1,8 +1,126 @@
<template></template>
<template>
<div class="bg-#000000bf w-264px">
<div class="h-177px">
<EquList :detail="props.equs"></EquList>
</div>
<div class="flex flex-wrap border-y-1px my-1px border-y-solid border-#FFFF/10">
<template v-for="info in props.info" :key="info.id">
<div
class="flex px-5px box-border mt-2px"
:style="{ width: info.value.toString().includes('/') ? '100%' : '50%' }"
>
<div class="w-60px text-hex-836832">{{ info.name }}</div>
<div class="ml-auto text-hex-3ea74e">{{ info.value }}</div>
</div>
</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>
</template>
</div>
<div class="border-y-1px border-y-solid my-1px border-#FFFF/10">
<div class="flex">
<div class="flex-1 flex items-center justify-center bg-#221A08 text-#9A7E4A">
穿戴装备信息
</div>
</div>
<template v-for="part in partOrder" :key="part">
<div class="flex p-2px partItem gap-5px">
<img
:src="getImageURL(`/equipment/icon/${part}.png`)"
alt=""
class="w-20px h-20px object-contain"
/>
<div
class="flex items-center"
: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>
</div>
</div>
</template>
<script setup lang="ts" name="Info">
import { getImageURL } from '@/utils/images'
import { rarityClass } from '@/utils'
import type { IResultUserInfo, IResultSuit } from '@/api/calc/type'
import EquList from '@/components/dnf/Equipment/List/index.vue'
import type { IConfigEquip } from '@/stores/config'
import { useInfoStore } from '@/stores'
const props = defineProps<{
info: IResultUserInfo[]
suits: IResultSuit[]
equs: Record<string, IConfigEquip>
}>()
const partOrder = [
'武器',
'上衣',
'下装',
'头肩',
'腰带',
'鞋',
'项链',
'手镯',
'戒指',
'辅助装备',
'魔法石',
'耳环',
]
const infoStore = useInfoStore()
const equ = (id: string) => {
return infoStore.equips.find((e) => e.id == id)
}
const lvFormat = (lv: number, rarity: string) => {
if (rarity == '太初') return ''
switch (lv) {
case 1:
return 'I'
case 2:
return 'II'
case 3:
return 'III'
case 4:
return 'IV'
case 5:
return 'V'
default:
return ''
}
}
</script>
<style scoped lang="scss">
.partItem {
display: flex;
align-items: center;
}
.partItem:nth-child(2n + 1) {
background-color: #0b090b;
}
.partItem:nth-child(2n) {
background-color: #000100;
}
</style>
frontend/src/pages/Character/Result/components/Skill.vue
+59 -9
View File
@@ -1,12 +1,30 @@
<template>
<div class="flex flex-col gap-1" v-if="data && data.length > 0">
<div class="flex gap-2 text-white items-center jus" v-for="skill in data" :key="skill.name">
<div class="flex-1 flex items-center">
<img :src="getImageURL(skill.icon)" alt="" class="w-8 h-8" />
<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-150px">技能</div>
<div class="item-head w-80px">CD</div>
<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="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>
<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>
</div>
<div class="w-150px">{{ skill.name }}</div>
<div class="flex-1">{{ skill.cd.toFixed(2) }}s</div>
<div class="flex-1">{{ skill.damage.toFixed(0) }}</div>
</div>
</div>
</template>
@@ -19,8 +37,40 @@ const props = defineProps<{
}>()
const data = computed(() => {
return props.data.sort((a,b)=>b.damage - a.damage)
return props.data.sort((a, b) => b.damage - a.damage)
})
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.item-head {
background: linear-gradient(#2b2817, #171407);
border-top: 1px solid #423d2c;
border-bottom: 1px solid #211d15;
text-align: center;
}
.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;
}
.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>