init
This commit is contained in:
@@ -0,0 +1,183 @@
|
||||
import { asyncComputed } from '@vueuse/core'
|
||||
import api from '@/api'
|
||||
import './style.scss'
|
||||
import CalcTabs from '@/components/calc/tabs/index.vue'
|
||||
import CalcTab from '@/components/calc/tab/index.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SkillDetail',
|
||||
props: {
|
||||
skillId: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
level: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const currentSkill = computed(() => props.skillId)
|
||||
const currentLevel = computed(() => props.level)
|
||||
|
||||
const skillInfo = asyncComputed(async () => {
|
||||
if (!currentSkill.value && !currentLevel.value) return undefined
|
||||
const res = await api.skillDetail(currentSkill.value, currentLevel.value)
|
||||
return res
|
||||
})
|
||||
|
||||
const curTab = ref(0)
|
||||
|
||||
const basic = computed(() =>
|
||||
!skillInfo.value
|
||||
? []
|
||||
: [
|
||||
{ label: '技能等级', value: skillInfo.value?.attribute?.level ?? props.level },
|
||||
{ label: '学习等级', value: skillInfo.value?.requiredLevel },
|
||||
{ label: '等级上限', value: skillInfo.value?.maxLevel },
|
||||
{
|
||||
label: '冷却时间',
|
||||
value: skillInfo.value?.attribute?.coolTime
|
||||
? `${skillInfo.value?.attribute?.coolTime.toFixed(1)}秒`
|
||||
: undefined,
|
||||
},
|
||||
{
|
||||
label: '施放时间',
|
||||
value: !skillInfo.value?.attribute?.castingTime
|
||||
? '瞬发'
|
||||
: `${skillInfo.value?.attribute?.castingTime.toFixed(1)}秒`,
|
||||
},
|
||||
{ label: '魔法值', value: skillInfo.value?.attribute?.consumeMp },
|
||||
{
|
||||
label: '消耗无色小晶块',
|
||||
value: skillInfo.value?.consumeItem?.value
|
||||
? `${skillInfo.value?.consumeItem?.value}个`
|
||||
: undefined,
|
||||
},
|
||||
],
|
||||
)
|
||||
|
||||
const desc = computed(() => skillInfo.value?.descDetail.split('\n'))
|
||||
|
||||
const detail = computed(() => {
|
||||
const items =
|
||||
skillInfo.value?.attribute?.optionDesc?.split('\n').filter((item) => !!item) ?? []
|
||||
const details = items?.map((a) => {
|
||||
const beforeReplace = a.match(/^(.+?)\s*(\{value\d+\}.*)$/)
|
||||
if (beforeReplace) {
|
||||
a = `${beforeReplace[1]}<span class="skill_info_value">${beforeReplace[2]}</span>`
|
||||
}
|
||||
const matches = a.match(/{([^}]+)}/g)
|
||||
if (matches) {
|
||||
matches.forEach((match) => {
|
||||
const key = match.replace(/[{}]/g, '')
|
||||
// Only access if key matches the expected pattern
|
||||
if (/^value.+/.test(key)) {
|
||||
const value = skillInfo.value?.attribute?.optionValue[key as `value${string}`] ?? '-'
|
||||
if (value) {
|
||||
a = a.replace(match, `<span style="padding:0px 2px;color:#4AA256">${value}</span>`)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
return a
|
||||
})
|
||||
return details || []
|
||||
})
|
||||
|
||||
const renderSkillDetail = () => (
|
||||
<>
|
||||
<div class="skill_title">基本信息</div>
|
||||
<div class="flex flex-col gap-2px">
|
||||
{basic.value.map(
|
||||
(item) =>
|
||||
!!item.value && (
|
||||
<div class="flex justify-between item">
|
||||
<span class="label">{item.label}</span>
|
||||
<span class="value">{item.value}</span>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
<div class="skill_title">技能描述</div>
|
||||
<div class="h-auto max-h-200px">
|
||||
<div class="h-full overflow-y-auto bg-#161816 p-2px">
|
||||
{desc.value?.map((item) => (
|
||||
// item.startsWith('[') || item.startsWith('-') || item.startsWith('<') ? (
|
||||
// <div class="min-h-10px">{item}</div>
|
||||
// ) :
|
||||
<div class="min-h-10px" style="white-space:pre-wrap;">
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{detail.value.length > 0 && (
|
||||
<>
|
||||
<div class="skill_title">技能属性</div>
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div class=" flex flex-col gap-2px">
|
||||
{detail.value.map((item) => (
|
||||
<div class="flex justify-between item items-center" v-html={item}></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
|
||||
const renderSkillVp = () => (
|
||||
<>
|
||||
<div class="h-auto">
|
||||
<div class="h-full flex flex-col gap-5px">
|
||||
{skillInfo.value?.evolution?.map((item) => (
|
||||
<>
|
||||
<div class="flex flex-col gap-2px">
|
||||
<div class="skill_vp_title">{item.name}</div>
|
||||
<div class="skill_title">技能描述</div>
|
||||
<div class="h-auto bg-#161816 max-h-300px overflow-y-auto">
|
||||
<div class="h-auto p-2px" style="white-space: pre-wrap;">
|
||||
{item.descDetail}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
watchEffect(() => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
||||
;(skillInfo.value?.evolution?.length ?? 0) == 0 && (curTab.value = 0)
|
||||
})
|
||||
})
|
||||
|
||||
return () => (
|
||||
<>
|
||||
<div class="flex flex-col gap-2px mx-2px text-#907B54 h-full">
|
||||
<div class="skill_name h-20px">{skillInfo.value?.name}</div>
|
||||
<div class="relative">
|
||||
<CalcTabs v-model={curTab.value}>
|
||||
<CalcTab class="flex-1 flex justify-center" value={0}>
|
||||
技能信息
|
||||
</CalcTab>
|
||||
<CalcTab
|
||||
class="flex-1 flex justify-center"
|
||||
value={1}
|
||||
disabled={!skillInfo.value?.evolution?.length}
|
||||
>
|
||||
技能进化
|
||||
</CalcTab>
|
||||
</CalcTabs>
|
||||
</div>
|
||||
{curTab.value === 0 && renderSkillDetail()}
|
||||
{curTab.value === 1 && renderSkillVp()}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user