This commit is contained in:
2025-03-29 14:17:56 +08:00
parent 4c392a23d3
commit ec261a1c3d
10 changed files with 237 additions and 174 deletions
@@ -1,8 +1,14 @@
<template>
<div class="flex flex-col gap-20px mx-10px">
<Weapon></Weapon>
<Suit></Suit>
<Universal></Universal>
<div class="flex flex-col mx-10px">
<calc-collapse title="武器">
<Weapon></Weapon>
</calc-collapse>
<calc-collapse title="套装">
<Suit></Suit>
</calc-collapse>
<calc-collapse title="通宝">
<Universal></Universal>
</calc-collapse>
</div>
</template>
@@ -13,6 +13,7 @@
:alt="suit.name"
:style="{ filter: curSuit === suit.value ? '' : 'grayscale(100%)' }"
@click="curSuit = suit.value"
@dblclick="handleDoubleClick"
/>
</div>
</template>
@@ -22,7 +23,13 @@
<div class="flex flex-wrap gap-4px content-start" :style="{width: `${rowCount * 32}px`}">
<template v-for="(equip,_) in suitEquipments" :key="_">
<EquipmentIcon :equipment="equip" :inactive="configStore.config.equips[equip?.itemDetailType ?? '']?.id != equip?.id" @click="chooseEqu(equip)"/>
<template v-if="equip?.rarity == curRarity || !curRarity">
<EquipmentIcon :equipment="equip" :inactive="configStore.config.equips[equip?.itemDetailType ?? '']?.id != equip?.id" @click="chooseEqu(equip)"/>
</template>
<template v-else>
<EquipmentIcon/>
</template>
</template>
</div>
</div>
@@ -57,7 +64,7 @@ const suits = computed(() => {
})
const suitEquipments = computed(() => {
const equs = infoStore.equips.filter((a) => a.suit.includes(curSuit.value.toString()) && a.suit.length === 1)
const equs = infoStore.equips.filter((a) => a.suit.includes(curSuit.value.toString()) && a.suit.length === 1 )
const res: (IEquipment | undefined)[] = []
const raritiyList = ['神器','传说','史诗']
@@ -80,7 +87,15 @@ const chooseEqu = async(equip: IEquipment | undefined) => {
if (equip && configStore.config.equips[equip.itemDetailType]) {
configStore.config.equips[equip.itemDetailType].id = equip.id
}
await configStore.calc()
// await configStore.calc()
}
const handleDoubleClick = () => {
if(!curRarity.value) return
if(curRarity.value == '太初') return
suitEquipments.value.filter(a=>!!a && a.rarity == curRarity.value).splice(0,11).forEach((a) => {
chooseEqu(a)
})
}
</script>
@@ -1,52 +1,64 @@
<script lang="tsx">
import { computed, defineComponent, ref, renderList } from "vue"
import type { IEnchantingInfo } from "@/api/info/type"
import { useInfoStore, useConfigStore } from "@/stores"
import { computed, defineComponent, ref, renderList } from 'vue'
import type { IEnchantingInfo } from '@/api/info/type'
import { useInfoStore, useConfigStore } from '@/stores'
export default defineComponent({
name: "Equip",
name: 'Equip',
props: {
part: {
type: String,
default: "头肩"
}
default: '头肩',
},
},
setup(props) {
const configStore = useConfigStore()
const can_upgrade = computed(() => {
return !["称号", "宠物"].includes(props.part as string)
return !['称号', '宠物'].includes(props.part as string)
})
// const globalStore = useGlobalStore()
/** 是否有徽章 */
const has_socket = computed(() => !["称号", "宠物", "耳环", "武器"].includes(props.part as string))
const has_socket = computed(
() => !['称号', '宠物', '耳环', '武器'].includes(props.part as string),
)
/** 是否有右侧徽章 */
const has_socket_right = computed(() => has_socket.value && !["辅助装备", "魔法石"].includes(props.part as string))
const has_emblem_1 = computed(
() => has_socket.value && !['辅助装备', '魔法石'].includes(props.part as string),
)
const basicInfoStore = useInfoStore()
const enchanting_list = computed<IEnchantingInfo[] | undefined>(() => {
return basicInfoStore.enchantings
?.filter(item => item.position.includes(props.part) && !item.position.includes("武器装扮") && !item.position.includes("宠物装备"))
?.filter(
(item) =>
item.position.includes(props.part) &&
!item.position.includes('武器装扮') &&
!item.position.includes('宠物装备'),
)
.sort((a, b) => b.rate - a.rate)
})
const emblem_list = computed<IEnchantingInfo[] | undefined>(() => {
return basicInfoStore.emblems.filter(item => item.position.includes(props.part))
return basicInfoStore.emblems.filter((item) => item.position.includes(props.part))
})
const global_change = ref(false)
const currentInfo = function<T>(name: string, defaultValue?: T) {
const currentInfo = function <T>(name: string, defaultValue?: T) {
return computed<string | number>({
get() {
return (configStore.config.equips?.[props.part] as Record<string, any>)?.[name] ?? defaultValue ?? 0
return (
(configStore.config.equips?.[props.part] as Record<string, any>)?.[name] ??
defaultValue ??
0
)
},
set(val) {
console.log(name, val)
if (val == undefined) {
return
}
if (name == "socket_right" && !has_socket_right.value) {
if (name == 'emblem_1' && !has_emblem_1.value) {
// configStore.setForge(props.part, name, 0)
return
}
@@ -54,61 +66,64 @@ export default defineComponent({
let parts: string[] = []
if (global_change.value) {
if (name === "enchanting") {
const enchant = basicInfoStore?.enchantings?.find(item => item.id == val) as IEnchantingInfo | undefined
if (name === 'enchanting') {
const enchant = basicInfoStore?.enchantings?.find((item) => item.id == val) as
| IEnchantingInfo
| undefined
if (enchant?.position) {
parts = enchant.position
}
}
if (["socket_left", "socket_right"].includes(name)) {
const emblem = basicInfoStore?.emblems?.find(item => item.id.toString() == val.toString()) as IEnchantingInfo | undefined
if (['emblem_0', 'emblem_1'].includes(name)) {
const emblem = basicInfoStore?.emblems?.find(
(item) => item.id.toString() == val.toString(),
) as IEnchantingInfo | undefined
if (emblem?.position) {
parts = emblem.position.filter(item => !["皮肤", "武器装扮", "光环"].includes(item))
parts = emblem.position.filter(
(item) => !['皮肤', '武器装扮', '光环'].includes(item),
)
}
}
if (["cursed_type", "cursed_number"].includes(name)) {
parts = basicInfoStore.parts.filter(e => !["称号", "宠物"].includes(e))
if (['reinforce_type', 'reinforce'].includes(name)) {
parts = basicInfoStore.parts.filter((e) => !['称号', '宠物'].includes(e))
}
} else {
parts = [props.part]
}
console.log(parts,val)
for (const part of parts) {
if (configStore.config.equips[part]) {
(configStore.config.equips[part] as Record<string, any>)[name] = val
}
}
}
},
})
}
// 附魔
const enchanting = currentInfo<string | number>("enchanting")
const enchanting = currentInfo<string | number>('enchanting')
// 镶嵌栏1
const socket_left = currentInfo<string | number>("socket_left", 0)
const emblem_0 = currentInfo<string | number>('emblem_0', 0)
// 镶嵌栏2
const socket_right = currentInfo<string | number>("socket_right")
const emblem_1 = currentInfo<string | number>('emblem_1')
// 增幅
const reinforce_type = currentInfo<string | number>("reinforce_type", 1)
const reinforce_type = currentInfo<string | number>('reinforce_type', 1)
// 增幅数值
const reinforce = currentInfo<string | number>("reinforce")
const reinforce = currentInfo<string | number>('reinforce')
// 锻造数值
const dz_number = currentInfo<string | number>("dz_number")
const dz_number = currentInfo<string | number>('dz_number')
/**
* 同步徽章1到徽章2
* @param val
*/
* 同步徽章1到徽章2
* @param val
*/
function changeSocket(val: number) {
if (has_socket_right.value) {
socket_right.value = val
if (has_emblem_1.value) {
emblem_1.value = val
}
}
@@ -118,7 +133,15 @@ export default defineComponent({
<div class="equ-profile-item">
<div class="mr-10px row-name">当前部位</div>
<span> {props.part}</span>
{can_upgrade.value ? <calc-checkbox style="margin-left:auto" v-model={global_change.value} label="全局修改"></calc-checkbox> : <div></div>}
{can_upgrade.value ? (
<calc-checkbox
style="margin-left:auto"
v-model={global_change.value}
label="全局修改"
></calc-checkbox>
) : (
<div></div>
)}
</div>
{can_upgrade.value ? (
<div class="equ-profile-item">
@@ -128,15 +151,17 @@ export default defineComponent({
<calc-option value={2}>强化</calc-option>
</calc-select>
<calc-select v-model={reinforce.value} class="flex-1 !h-20px">
{renderList(32, i => (
{renderList(32, (i) => (
<calc-option value={i - 1}>{i - 1}</calc-option>
))}
</calc-select>
{props.part == '武器' && (<calc-select v-model={dz_number.value} class="flex-1 !h-20px">
{renderList(9, i => (
{props.part == '武器' && (
<calc-select v-model={dz_number.value} class="flex-1 !h-20px">
{renderList(9, (i) => (
<calc-option value={i - 1}>锻造+ {i - 1}</calc-option>
))}
</calc-select>)}
</calc-select>
)}
</div>
) : (
<div></div>
@@ -145,7 +170,7 @@ export default defineComponent({
<div class="row-name">附魔</div>
<calc-select v-model={enchanting.value} class="flex-1 !h-20px">
<calc-option value={0}>无</calc-option>
{renderList(enchanting_list.value ?? [], item => (
{renderList(enchanting_list.value ?? [], (item) => (
<calc-option value={item.id}>{item.props}</calc-option>
))}
</calc-select>
@@ -153,17 +178,25 @@ export default defineComponent({
{has_socket.value ? (
<div class="equ-profile-item">
<div class="row-name">徽章</div>
<calc-select onChange={changeSocket} v-model={socket_left.value} class="flex-1 !h-20px">
<calc-select
onChange={changeSocket}
v-model={emblem_0.value}
class="flex-1 !h-20px"
>
<calc-option value={0}>无</calc-option>
{renderList(emblem_list.value ?? [], item => (
<calc-option value={item.id}>{`${item.rarity}${item.type}徽章[${item.props}]`}</calc-option>
{renderList(emblem_list.value ?? [], (item) => (
<calc-option
value={item.id}
>{`${item.rarity}${item.type}徽章[${item.props}]`}</calc-option>
))}
</calc-select>
{has_socket_right.value && (
<calc-select v-model={socket_right.value} class="flex-1 !h-20px">
{has_emblem_1.value && (
<calc-select v-model={emblem_1.value} class="flex-1 !h-20px">
<calc-option value={0}>无</calc-option>
{renderList(emblem_list.value ?? [], item => (
<calc-option value={item.id}>{`${item.rarity}${item.type}徽章[${item.props}]`}</calc-option>
{renderList(emblem_list.value ?? [], (item) => (
<calc-option
value={item.id}
>{`${item.rarity}${item.type}徽章[${item.props}]`}</calc-option>
))}
</calc-select>
)}
@@ -174,7 +207,7 @@ export default defineComponent({
</div>
)
}
}
},
})
</script>
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div>
<calc-collapse class="w-510px" title="装备打造(点击人物部位切换)">
<calc-collapse class="w-40%" title="装备打造(点击人物部位切换)">
<equipment />
</calc-collapse>
</div>
-1
View File
@@ -25,7 +25,6 @@ const configStore = useConfigStore()
onMounted(async () => {
await infoStore.createCharacter(props.alter, '0')
configStore.loadConfig()
console.log("~~~~~~~~")
window.addEventListener('beforeunload', () => {
configStore.saveConfig()
})
@@ -107,10 +107,10 @@ 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">
<CalcButton onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'subMax')}}>&lt;</CalcButton>
<CalcButton onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'sub')}}>-</CalcButton>
<CalcButton icon="plus" onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'add')}}></CalcButton>
<CalcButton icon="next" onClick={(e:Event) => {e.stopPropagation();actionSkillLv(skill, 'addMax')}}></CalcButton>
<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>
</div>
</>