This commit is contained in:
2026-04-22 03:10:18 +08:00
parent 7e63275649
commit 613c228bdf
19 changed files with 366 additions and 155 deletions
+14 -2
View File
@@ -2,7 +2,11 @@ export interface IResult {
uuid: string
skills: IResultSkill[]
info: IResultUserInfo[]
suits: IResultSuit[]
suits: {
suit?: IResultSuit
oath?: IResultSuit
correction?: number
}
buffer: boolean
}
@@ -27,7 +31,7 @@ export interface IResultUserInfo {
}
export interface IResultSuit {
id: number
id: string
count: number
imageUrl: string
level: number
@@ -35,6 +39,14 @@ export interface IResultSuit {
point: number
rarity: string
value: string
suitId: string
skills: {
id: string
skillId: string
name: string
imageUrl: string
enable: boolean
}[]
}
export interface IResultSkillCount {
+9 -1
View File
@@ -30,7 +30,7 @@ export interface ICharacterInfo {
properties: string[]
stones: IEquipment[]
enchants: IEnchantingInfo[]
emblems: IEnchantingInfo[]
emblems: IEmblemInfo[]
oaths: IEquipment[]
weapons: string[]
subweapons: string[]
@@ -137,6 +137,14 @@ export interface IEnchantingInfo {
type?: string
}
export interface IEmblemInfo {
fame: number
id: string
rarity: string
type: string
value: string
}
export interface IAvatarInfo {
id: number
options: string[]
Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

@@ -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
@@ -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"
/>
+1 -1
View File
@@ -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>
+22 -7
View File
@@ -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 = () => {
@@ -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
@@ -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
@@ -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>
@@ -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"
+8 -2
View File
@@ -45,6 +45,7 @@ export interface IConfig {
skills: Record<string, { lv: number; vp: number; up: number }>
equips: Record<string, IConfigEquip>
oaths: Record<string, IConfigOath>
oathSkill: string
jades: Record<
string,
{
@@ -111,6 +112,7 @@ export const useConfigStore = defineStore('configStore', () => {
skills: {},
equips: {},
oaths: {},
oathSkill: '1',
jades: {},
avatar: {},
sundry: {},
@@ -143,6 +145,7 @@ export const useConfigStore = defineStore('configStore', () => {
skills: {},
equips: {},
oaths: {},
oathSkill: '1',
jades: {},
avatar: {},
sundry: {},
@@ -230,7 +233,10 @@ export const useConfigStore = defineStore('configStore', () => {
const calc = async () => {
if (!useInfoStore().infos?.alter) return undefined
return await api.calc(config.value)
const res = await api.calc(config.value)
// const skillId = res.suits.oath?.suitId
// config.value.oathSkill = skillId || '1'
return res
}
const chooseEqu = (
@@ -258,7 +264,7 @@ export const useConfigStore = defineStore('configStore', () => {
uuid: '',
skills: [],
info: [],
suits: [],
suits: {},
buffer: false,
},
{ resetOnExecute: false },