dnftools/dcalc
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

dev

Browse Source
This commit is contained in:
imelon
2025-04-03 17:57:45 +08:00
parent d56afd0695
commit e2099aa047
15 changed files with 744 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Character/Forge/components/avatar.vue
+159
View File
@@ -0,0 +1,159 @@
<script lang="tsx">
import { computed, defineComponent, ref, renderList } from 'vue'
import type { IEnchantingInfo } from '@/api/info/type'
import { useInfoStore, useConfigStore } from '@/stores'
import ClothList from '@/components/dnf/Avatar/List/index.vue'
export default defineComponent({
name: 'Clothes',
setup(props) {
const configStore = useConfigStore()
const part = ref('武器装扮')
// const globalStore = useGlobalStore()
/** 是否有徽章 */
const has_socket = computed(() => ['武器装扮', '光环', '皮肤'].includes(part.value as string))
const basicInfoStore = useInfoStore()
const has_enchant = computed(() => {
return !['头发', '帽子', '脸部', '胸部', '上衣', '腰带', '下装', '鞋'].includes(
part.value as string,
)
})
const enchanting_list = computed<IEnchantingInfo[] | undefined>(() => {
return basicInfoStore.enchants
?.filter((item) => item.position.includes(part.value))
.sort((a, b) => (b.fame ?? 0) - (a.fame ?? 0))
})
const emblem_list = computed<IEnchantingInfo[] | undefined>(() => {
return basicInfoStore.emblems.filter((item) => item.position.includes(part.value))
})
const currentInfo = function <T>(name: string, defaultValue?: T) {
return computed<string | number>({
get() {
let key: 'avatar' | 'equips' = 'avatar'
if (part.value == '宠物') key = 'equips'
return (
(configStore.config[key]?.[part.value] as Record<string, any>)?.[name] ??
defaultValue ??
0
)
},
set(val) {
if (val == undefined) {
return
}
let key: 'avatar' | 'equips' = 'avatar'
if (part.value == '宠物') key = 'equips'
if (configStore.config[key][part.value]) {
;(configStore.config[key][part.value] as Record<string, any>)[name] = val
}
},
})
}
// 附魔
const enchanting = currentInfo<string | number>('enchanting')
// 镶嵌栏1
const emblem_0 = currentInfo<string | number>('emblem_0', 0)
// 镶嵌栏2
const emblem_1 = currentInfo<string | number>('emblem_1')
// 品级
const id = currentInfo<string | number>('id')
// 属性
const option = currentInfo<string | number>('option')
/**
* 同步徽章1到徽章2
* @param val
*/
function changeSocket(val: number) {
emblem_1.value = val
}
return () => {
return (
<>
<div class="h-120px flex justify-center items-center">
<ClothList v-model:part={part.value} />
</div>
<div class="flex flex-wrap equ-profile">
<div class="equ-profile-item">
<div class="mr-10px row-name">当前部位</div>
<span> {part.value}</span>
</div>
{has_enchant.value ? (
<div class="equ-profile-item">
<div class="row-name">{part.value == '宠物' ? '附魔' : '属性'}</div>
<calc-select v-model={enchanting.value} class="flex-1 !h-20px">
<calc-option value={0}>无</calc-option>
{renderList(enchanting_list.value ?? [], (item) => (
<calc-option value={item.id}>{item.detail}</calc-option>
))}
</calc-select>
</div>
) : (
<>
<div class="equ-profile-item">
<div class="row-name">品级</div>
<calc-select v-model={id.value} class="flex-1 !h-20px">
{renderList(basicInfoStore.avatars[part.value] ?? [], (item) => (
<calc-option value={item.id}>{item.suit}</calc-option>
))}
</calc-select>
</div>
<div class="equ-profile-item">
<div class="row-name">属性</div>
<calc-select v-model={option.value} class="flex-1 !h-20px">
<calc-option value={0}>无</calc-option>
{renderList(basicInfoStore.avatars[part.value].find(a=>a.id == id.value)?.options ?? [], (item) => (
<calc-option value={item}>{item}</calc-option>
))}
</calc-select>
</div>
</>
)}
{has_socket.value ? (
<div class="equ-profile-item">
<div class="row-name">徽章</div>
<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.categorize}徽章[${item.detail}]`}</calc-option>
))}
</calc-select>
<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.categorize}徽章[${item.detail}]`}</calc-option>
))}
</calc-select>
)
</div>
) : (
<div></div>
)}
</div>
</>
)
}
},
})
</script>
<style lang="scss"></style>
frontend/src/pages/Character/Forge/components/equipment.vue
+6 -6
View File
@@ -129,7 +129,7 @@ export default defineComponent({
return () => {
return (
<>
<div class="h-180px flex justify-center items-center">
<div class="h-150px flex justify-center items-center">
<EquList v-model:part={part.value}/></div>
<div class="flex flex-wrap equ-profile">
@@ -172,7 +172,7 @@ export default defineComponent({
<div class="equ-profile-item">
<div class="row-name">附魔</div>
<calc-select v-model={enchanting.value} class="flex-1 !h-20px">
<calc-option value={0}>无</calc-option>
<calc-option value={""}>无</calc-option>
{renderList(enchanting_list.value ?? [], (item) => (
<calc-option value={item.id}>{item.detail}</calc-option>
))}
@@ -186,20 +186,20 @@ export default defineComponent({
v-model={emblem_0.value}
class="flex-1 !h-20px"
>
<calc-option value={0}>无</calc-option>
<calc-option value={""}>无</calc-option>
{renderList(emblem_list.value ?? [], (item) => (
<calc-option
value={item.id}
>{`${item.rarity}${item.type}徽章[${item.detail}]`}</calc-option>
>{`${item.rarity}${item.categorize}徽章[${item.detail}]`}</calc-option>
))}
</calc-select>
{has_emblem_1.value && (
<calc-select v-model={emblem_1.value} class="flex-1 !h-20px">
<calc-option value={0}>无</calc-option>
<calc-option value={""}>无</calc-option>
{renderList(emblem_list.value ?? [], (item) => (
<calc-option
value={item.id}
>{`${item.rarity}${item.type}徽章[${item.detail}]`}</calc-option>
>{`${item.rarity}${item.categorize}徽章[${item.detail}]`}</calc-option>
))}
</calc-select>
)}