dev
This commit is contained in:
@@ -1,5 +1,7 @@
|
||||
export interface IResult {
|
||||
skills: IResultSkill[]
|
||||
info:IResultUserInfo[]
|
||||
suits:IResultSuit[]
|
||||
}
|
||||
|
||||
export interface IResultSkill {
|
||||
@@ -11,3 +13,19 @@ export interface IResultSkill {
|
||||
cd: number
|
||||
damage: number
|
||||
}
|
||||
|
||||
export interface IResultUserInfo {
|
||||
name:string
|
||||
value:string|number
|
||||
}
|
||||
|
||||
export interface IResultSuit{
|
||||
id:number
|
||||
count:number
|
||||
imageUrl:string
|
||||
level:number
|
||||
name:string
|
||||
point:number
|
||||
rarity:string
|
||||
value:string
|
||||
}
|
||||
|
||||
Binary file not shown.
@@ -28,7 +28,12 @@ export default defineComponent({
|
||||
showPercent: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
formatValue: {
|
||||
type: Function,
|
||||
default: undefined
|
||||
}
|
||||
|
||||
},
|
||||
emits: ['update:modelValue', 'change'],
|
||||
setup(props, { emit }) {
|
||||
@@ -76,35 +81,33 @@ export default defineComponent({
|
||||
]}
|
||||
>
|
||||
<div
|
||||
class="flex-1 h-1 bg-[#122438] rounded relative"
|
||||
class="flex-1 h-1 bg-[#4D524D] relative"
|
||||
ref={runwayRef}
|
||||
>
|
||||
<div
|
||||
class="h-1 bg-[#c6b083] rounded absolute left-0 top-0"
|
||||
class="h-1 bg-[#8E6D28] absolute left-0 top-0"
|
||||
style={{ width: `${percentage.value}%` }}
|
||||
></div>
|
||||
<div
|
||||
class="h-6 w-6 absolute top-1/2 -translate-y-1/2 bg-transparent text-center select-none"
|
||||
style={{ left: `${percentage.value}%` }}
|
||||
style={{ left: `calc(${percentage.value}% - 0.75rem)` }}
|
||||
ref={buttonRef}
|
||||
>
|
||||
<div class={[
|
||||
'w-4 h-4 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
|
||||
'bg-gradient-to-b from-[#223768] to-[#122438]',
|
||||
'border border-[#755f44] rounded-full transition-all duration-200',
|
||||
'border border-solid border-[#937639] rounded-full transition-all duration-200',
|
||||
'shadow-[0_2px_4px_rgba(0,0,0,0.2)]',
|
||||
'hover:(bg-gradient-to-b from-[#2d4e9f] to-[#153051] border-[#e3c18a] scale-110)',
|
||||
'active:(bg-gradient-to-b from-[#2d4e9f] to-[#122438] border-[#e3c18a])',
|
||||
{ 'bg-gradient-to-b from-[#353535] to-[#1c1c1c] border-[#414141]': props.disabled }
|
||||
]}></div>
|
||||
</div>
|
||||
</div>
|
||||
{props.showPercent && (
|
||||
<div class={[
|
||||
'min-w-[45px] text-right text-sm font-medium',
|
||||
'w-auto min-w-5 text-center text-sm font-medium',
|
||||
props.disabled ? 'text-[#696969]' : 'text-[#e9c556]'
|
||||
]}>
|
||||
{percentage.value.toFixed(0)}%
|
||||
{props.formatValue ? props.formatValue(modelValue.value) : `${percentage.value.toFixed(0)}%`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,23 @@
|
||||
<template>
|
||||
<div class="pos-relative w-300px h-full">
|
||||
<template v-for="part in infoStore.parts" :key="part">
|
||||
<div
|
||||
class="pos-relative w-264px h-full"
|
||||
:style="{ backgroundImage: withBg ? `url(${getImageURL('/common/head.png')})` : 'none' }"
|
||||
>
|
||||
<template v-for="part in parts" :key="part">
|
||||
<div
|
||||
class="pos-absolute text-white/50 w-26px h-26px border-1px border-solid border-#7a7a7a/50 flex items-center justify-center"
|
||||
:style="infoStyle(part)"
|
||||
@click="choosePart(part)"
|
||||
>
|
||||
{{ partName(part) }}
|
||||
<template v-if="detail?.[part]?.id">
|
||||
<EquipmentIcon :equipment="equ(detail[part].id)" />
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ partName(part) }}
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="detail?.[part]?.fusion" class="pos-absolute" :style="fusionStyle(part)">
|
||||
<EquipmentIcon :equipment="stones(detail[part].fusion)" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@@ -15,19 +26,51 @@
|
||||
<script lang="ts" setup name="EquList">
|
||||
import { getImageURL } from '@/utils/images'
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import { useInfoStore, useConfigStore } from '@/stores'
|
||||
import EquipmentIcon from '@/components/dnf/Equipment/Icon/index.vue'
|
||||
import { useInfoStore, useConfigStore, type IConfigEquip } from '@/stores'
|
||||
|
||||
const props = defineProps({
|
||||
part: {
|
||||
type: String,
|
||||
default: '',
|
||||
}
|
||||
},
|
||||
withBg: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
withPet: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
detail: {
|
||||
type: Object as PropType<Record<string, IConfigEquip>>,
|
||||
},
|
||||
})
|
||||
const partModelValue = useVModel(props, 'part')
|
||||
const infoStore = useInfoStore()
|
||||
|
||||
const parts = computed(() => {
|
||||
const configStore = useConfigStore()
|
||||
const parts = infoStore.parts.filter((part) => {
|
||||
if (part == '宠物' && !props.withPet) return false
|
||||
if (configStore.config.equips[part]) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
return parts
|
||||
})
|
||||
|
||||
const equ = (id: string) => {
|
||||
return infoStore.equips.find((e) => e.id == id)
|
||||
}
|
||||
|
||||
const stones = (id: string) => {
|
||||
return infoStore.stones.find((e) => e.id == id)
|
||||
}
|
||||
|
||||
const infoStyle = (part: string) => {
|
||||
let x = 28
|
||||
let x = 10
|
||||
let y = 5
|
||||
let index = infoStore.parts.findIndex((p) => p == part)
|
||||
if (index == 13) {
|
||||
@@ -49,6 +92,30 @@ const infoStyle = (part: string) => {
|
||||
return style
|
||||
}
|
||||
|
||||
const fusionStyle = (part: string) => {
|
||||
let x = 0
|
||||
let y = 15
|
||||
let index = infoStore.parts.findIndex((p) => p == part)
|
||||
|
||||
if (index >= 5 && index <= 12) {
|
||||
x += 179
|
||||
index -= 5
|
||||
}
|
||||
|
||||
if (index == 13) {
|
||||
index = 5
|
||||
}
|
||||
|
||||
x += (index % 2) * 39
|
||||
y += Math.floor(index / 2) * 34
|
||||
|
||||
return {
|
||||
left: `${x}px`,
|
||||
top: `${y}px`,
|
||||
zIndex: 7,
|
||||
transform: 'scale(0.6)',
|
||||
}
|
||||
}
|
||||
const choosePart = (part: string) => {
|
||||
partModelValue.value = part
|
||||
}
|
||||
|
||||
-1
@@ -143,7 +143,6 @@ export default defineComponent({
|
||||
>{`${item.rarity}${item.categorize}徽章[${item.detail}]`}</calc-option>
|
||||
))}
|
||||
</calc-select>
|
||||
)
|
||||
</div>
|
||||
) : (
|
||||
<div></div>
|
||||
+10
-2
@@ -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>
|
||||
+29
-1
@@ -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
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -14,22 +14,25 @@ import type { IEquipment } from '@/api/info/type'
|
||||
// | '辅助装备'
|
||||
// | '魔法石'
|
||||
// | '武器',
|
||||
|
||||
export interface IConfigEquip {
|
||||
id: string
|
||||
reinforce: number
|
||||
reinforceType: number
|
||||
enchant: string
|
||||
emblem_0: string
|
||||
emblem_1: string
|
||||
upgrade: number
|
||||
refine: number
|
||||
adaptation: number
|
||||
fusion: string
|
||||
}
|
||||
|
||||
export interface IConfig {
|
||||
skills: Record<string, { lv: number }>
|
||||
equips: Record<
|
||||
string,
|
||||
{
|
||||
id: string
|
||||
reinforce: number
|
||||
reinforceType: number
|
||||
enchant: string
|
||||
emblem_0: string
|
||||
emblem_1: string
|
||||
upgrade: number
|
||||
refine: number
|
||||
adaptation: number
|
||||
fusion: string
|
||||
}
|
||||
IConfigEquip
|
||||
>
|
||||
jades: Record<string, {
|
||||
id:number
|
||||
@@ -163,6 +166,8 @@ export const useConfigStore = defineStore('configStore', () => {
|
||||
},
|
||||
{
|
||||
skills: [],
|
||||
info: [],
|
||||
suits: [],
|
||||
},
|
||||
{ resetOnExecute: false },
|
||||
)
|
||||
|
||||
@@ -36,7 +36,8 @@ export const useInfoStore = defineStore('infoStore', () => {
|
||||
'辅助装备',
|
||||
'戒指',
|
||||
'耳环',
|
||||
'魔法石'
|
||||
'魔法石',
|
||||
'宠物'
|
||||
]
|
||||
|
||||
const avatarParts = [
|
||||
|
||||
@@ -39,7 +39,7 @@ body,
|
||||
|
||||
* {
|
||||
// font-family: "ArkPixel", "Consola", sans-serif;
|
||||
// font-family: "dcalc", "SimHei";
|
||||
font-family: "dcalc", "SimHei";
|
||||
// font-family: "STSong";
|
||||
font-size: 12px;
|
||||
text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000,
|
||||
|
||||
Reference in New Issue
Block a user