This commit is contained in:
2025-03-30 14:47:54 +08:00
parent ec261a1c3d
commit 5811c18fd7
11 changed files with 228 additions and 59 deletions
@@ -0,0 +1,15 @@
<template>
<div class="h-160px bg-red" :style="{background: `url(${getImageURL('/common/equ-back.png')}) no-repeat center`}"></div>
</template>
<script lang="ts" setup name="EquList">
import { getImageURL } from '@/utils/images'
</script>
<style lang="scss" scoped>
</style>
@@ -2,6 +2,7 @@
import { computed, defineComponent, ref, renderList } from 'vue'
import type { IEnchantingInfo } from '@/api/info/type'
import { useInfoStore, useConfigStore } from '@/stores'
import EquList from '@/components/dnf/Equipment/List/index.vue'
export default defineComponent({
name: 'Equip',
props: {
@@ -117,6 +118,9 @@ export default defineComponent({
// 锻造数值
const dz_number = currentInfo<string | number>('dz_number')
// 调适
const adaptation = currentInfo<string | number>('adaptation')
/**
* 同步徽章1到徽章2
* @param val
@@ -129,6 +133,8 @@ export default defineComponent({
return () => {
return (
<>
<EquList/>
<div class="flex flex-wrap equ-profile">
<div class="equ-profile-item">
<div class="mr-10px row-name">当前部位</div>
@@ -147,8 +153,8 @@ export default defineComponent({
<div class="equ-profile-item">
<div class="row-name">增幅</div>
<calc-select v-model={reinforce_type.value} class="flex-1 !h-20px">
<calc-option value={1}>增幅</calc-option>
<calc-option value={2}>强化</calc-option>
<calc-option value={0}>增幅</calc-option>
<calc-option value={1}>强化</calc-option>
</calc-select>
<calc-select v-model={reinforce.value} class="flex-1 !h-20px">
{renderList(32, (i) => (
@@ -204,7 +210,22 @@ export default defineComponent({
) : (
<div></div>
)}
{can_upgrade.value ? (
<div class="equ-profile-item">
<div class="row-name">调适</div>
<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>
)}
</div>
</>
)
}
},
+28 -4
View File
@@ -2,10 +2,10 @@
<div class="w-100% h-100% main" :class="props.alter.split('.').slice(-1)">
<div class="header">
<calc-tabs route>
<calc-tab :value="`/character/equipment/${props.alter}`">装备设置</calc-tab>
<calc-tab :value="`/character/skill/${props.alter}`">技能设置</calc-tab>
<calc-tab :value="`/character/forge/${props.alter}`">打造设置</calc-tab>
</calc-tabs>
<calc-tab :value="`/character/equipment/${props.alter}`">装备设置</calc-tab>
<calc-tab :value="`/character/skill/${props.alter}`">技能设置</calc-tab>
<calc-tab :value="`/character/forge/${props.alter}`">打造设置</calc-tab>
</calc-tabs>
</div>
<div class="content flex">
<RouterView></RouterView>
@@ -22,6 +22,23 @@ const props = defineProps<{
const infoStore = useInfoStore()
const configStore = useConfigStore()
const result = useAsyncState(
() => {
return configStore.calc()
},
{},
{ resetOnExecute: false },
)
const stopWatch = watch<any>(
() => {
return JSON.stringify(configStore.config)
},
useDebounceFn(async () => {
await result.execute()
}, 800),
)
onMounted(async () => {
await infoStore.createCharacter(props.alter, '0')
configStore.loadConfig()
@@ -29,6 +46,13 @@ onMounted(async () => {
configStore.saveConfig()
})
})
onUnmounted(() => {
stopWatch()
window.removeEventListener('beforeunload', () => {
configStore.saveConfig()
})
})
</script>
<style lang="scss">
@@ -0,0 +1,26 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_i_43_35)">
<rect x="1" y="1" width="16" height="16" fill="url(#paint0_linear_43_35)"/>
</g>
<rect x="0.5" y="0.5" width="17" height="17" stroke="#5D4F30"/>
<rect x="8" y="4" width="2" height="10" fill="#B7975F"/>
<rect x="14" y="8" width="2" height="10" transform="rotate(90 14 8)" fill="#B7975F"/>
<defs>
<filter id="filter0_i_43_35" x="0" y="0" width="18" height="18" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feMorphology radius="1" operator="erode" in="SourceAlpha" result="effect1_innerShadow_43_35"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_43_35"/>
</filter>
<linearGradient id="paint0_linear_43_35" x1="9" y1="1" x2="9" y2="17" gradientUnits="userSpaceOnUse">
<stop stop-color="#451A1F"/>
<stop offset="0.407132" stop-color="#391619"/>
<stop offset="1" stop-color="#271111"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@@ -0,0 +1,26 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_i_43_36)">
<rect x="1" y="1" width="16" height="16" fill="url(#paint0_linear_43_36)"/>
</g>
<rect x="0.5" y="0.5" width="17" height="17" stroke="#5D4F30"/>
<path d="M9 9L3.75 14.1962V3.80385L9 9Z" fill="#B7975F"/>
<path d="M15 9L9.75 14.1962V3.80385L15 9Z" fill="#B7975F"/>
<defs>
<filter id="filter0_i_43_36" x="0" y="0" width="18" height="19" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feMorphology radius="1" operator="erode" in="SourceAlpha" result="effect1_innerShadow_43_36"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_43_36"/>
</filter>
<linearGradient id="paint0_linear_43_36" x1="9" y1="1" x2="9" y2="17" gradientUnits="userSpaceOnUse">
<stop stop-color="#451A1F"/>
<stop offset="0.407132" stop-color="#391619"/>
<stop offset="1" stop-color="#271111"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@@ -0,0 +1,25 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_i_43_33)">
<rect x="1" y="1" width="16" height="16" fill="url(#paint0_linear_43_33)"/>
</g>
<rect x="0.5" y="0.5" width="17" height="17" stroke="#5D4F30"/>
<path d="M9 9L14.25 3.80385V14.1962L9 9Z" fill="#B7975F"/>
<path d="M3 9L8.25 3.80385V14.1962L3 9Z" fill="#B7975F"/>
<defs>
<filter id="filter0_i_43_33" x="0" y="0" width="18" height="18" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feMorphology radius="1" operator="erode" in="SourceAlpha" result="effect1_innerShadow_43_33"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_43_33"/>
</filter>
<linearGradient id="paint0_linear_43_33" x1="9" y1="1" x2="9" y2="17" gradientUnits="userSpaceOnUse">
<stop stop-color="#103562"/>
<stop offset="1" stop-color="#092343"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@@ -0,0 +1,24 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_i_43_34)">
<rect x="1" y="1" width="16" height="16" fill="url(#paint0_linear_43_34)"/>
</g>
<rect x="0.5" y="0.5" width="17" height="17" stroke="#5D4F30"/>
<rect x="14" y="8" width="2" height="10" transform="rotate(90 14 8)" fill="#B7975F"/>
<defs>
<filter id="filter0_i_43_34" x="0" y="0" width="18" height="18" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feMorphology radius="1" operator="erode" in="SourceAlpha" result="effect1_innerShadow_43_34"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_43_34"/>
</filter>
<linearGradient id="paint0_linear_43_34" x1="9" y1="1" x2="9" y2="17" gradientUnits="userSpaceOnUse">
<stop stop-color="#103562"/>
<stop offset="1" stop-color="#092343"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@@ -1,8 +1,7 @@
import { getImageURL } from '@/utils/images'
import { getImageURL, getLocalImageURL } from '@/utils/images'
import type { ISkill } from '@/api/info/type'
import { useVModel } from '@vueuse/core'
import './style.scss'
import CalcButton from '@/components/calc/button/index.vue'
export default defineComponent({
name: 'SkillTree',
@@ -106,11 +105,37 @@ export default defineComponent({
<>
<div class="absolute">
<div class="w-36px h-55px bg-gradient-linear bg-gradient-[180deg,#f8e26c_0%,#f87c43_94.34%] z-1"></div>
<div class="flex bottom--5px relative z-2 transform -translate-x-1/4">
<div onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'subMax')}}>&lt;</div>
<div onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'sub')}}>-</div>
<div onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'add')}}>+</div>
<div onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'addMax')}}>&gt;</div>
<div class="bottom--5px relative z-5 transform -translate-x-1/4 border-1px border-solid border-black left--2">
<div class="flex gap-1 bg-gradient-linear bg-gradient-[180deg,#351d14_0%,#070507_100%] p-1 border-solid border-#9A6329 border-1px">
<img
src={`${new URL('./img/min.svg', import.meta.url).href}`}
onClick={(e: Event) => {
e.stopPropagation()
actionSkillLv(skill, 'subMax')
}}
></img>
<img
src={`${new URL('./img/sub.svg', import.meta.url).href}`}
onClick={(e: Event) => {
e.stopPropagation()
actionSkillLv(skill, 'sub')
}}
></img>
<img
src={`${new URL('./img/add.svg', import.meta.url).href}`}
onClick={(e: Event) => {
e.stopPropagation()
actionSkillLv(skill, 'add')
}}
></img>
<img
src={`${new URL('./img/max.svg', import.meta.url).href}`}
onClick={(e: Event) => {
e.stopPropagation()
actionSkillLv(skill, 'addMax')
}}
></img>
</div>
</div>
</div>
</>
+6 -1
View File
@@ -29,6 +29,7 @@ export interface IConfig {
adaptation: number
}
>
jades: Record<string, number>
}
const defaultEqusConfig = {
@@ -47,6 +48,7 @@ export const useConfigStore = defineStore('configStore', () => {
const config = ref<IConfig>({
skills: {},
equips: {},
jades: {},
})
const loadConfig = () => {
@@ -63,9 +65,11 @@ export const useConfigStore = defineStore('configStore', () => {
config.value = {
skills: {},
equips: {},
jades: {},
}
if (!config.value?.equips) config.value.equips = {}
if (!config.value?.skills) config.value.skills = {}
if (!config.value?.jades) config.value.jades = {}
const part = infoStore.parts.filter((a) => !config.value?.equips.hasOwnProperty(a))
@@ -94,7 +98,8 @@ export const useConfigStore = defineStore('configStore', () => {
}
const calc = async () => {
await api.calc(config.value)
if(!useInfoStore().infos?.alter) return undefined
return await api.calc(config.value)
}
return {