dev
This commit is contained in:
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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')}}><</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')}}>></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>
|
||||
</>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user