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-09 22:12:27 +08:00
parent b84b6f6a5d
commit b90f80ee06
1 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Character/Skill/components/SkillTree/index.tsx
+22 -16
View File
@@ -35,7 +35,7 @@ export default defineComponent({
const lvList = [15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100] const lvList = [15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100]
const columns = [...new Array(9).keys()] const columns = [...new Array(10).keys()]
const activeSkill = ref<number>(-1) const activeSkill = ref<number>(-1)
@@ -97,8 +97,10 @@ export default defineComponent({
class={['h-30px w-30px', skill.type === 'passive' ? 'passive' : '']} class={['h-30px w-30px', skill.type === 'passive' ? 'passive' : '']}
src={getImageURL(skill.icon)} src={getImageURL(skill.icon)}
></img> ></img>
<div class="w-30px mx-2px bg-black flex items-center justify-center rounded-2px" <div
style={{color}}> class="w-30px mx-2px bg-black flex items-center justify-center rounded-2px"
style={{ color }}
>
{info?.lv ?? 0} {info?.lv ?? 0}
</div> </div>
</div> </div>
@@ -152,19 +154,23 @@ export default defineComponent({
return () => ( return () => (
<> <>
<div onClick={() => (activeSkill.value = -1)}> <div onClick={() => (activeSkill.value = -1)}>
<div class="skill-tree-line flex items-center gap-10px px-10px"> {((getSkill(0, 15, -1) ?? []) as ISkill[]).length > 0 && (
<div class="w-34px h-34px flex items-center justify-center text-white"> <>
其<br />余 <div class="skill-tree-line flex items-center gap-10px px-10px">
</div> <div class="w-34px h-34px flex items-center justify-center text-white">
{((getSkill(0, 15, -1) ?? []) as ISkill[])?.map((skill, index) => 其<br />余
renderSkill(skill, index), </div>
)} {((getSkill(0, 15, -1) ?? []) as ISkill[])?.map((skill, index) =>
</div> renderSkill(skill, index),
{lvList.map((lv, index) => ( )}
</div>
</>
)}
{lvList.map((lv, index) => ((getSkill(lv, lvList[index + 1] ?? 150, -1) as ISkill[])?.length ?? 0) > 0 ?(
<div class="skill-tree-line flex items-center gap-10px px-10px" key={index}> <div class="skill-tree-line flex items-center gap-10px px-10px" key={index}>
{lv == 1 || lv % 10 == 0 ? ( {lv == 1 || lv % 10 == 0 ? (
<div class="w-34px h-34px flex items-center justify-center text-white" <div class="w-34px h-34px flex items-center justify-center text-white">{lv}</div>
>{lv}</div>
) : ( ) : (
<div class="w-34px h-34px"></div> <div class="w-34px h-34px"></div>
)} )}
@@ -172,9 +178,9 @@ export default defineComponent({
const skill = getSkill(lv, lvList[index + 1] ?? 150, column) as ISkill const skill = getSkill(lv, lvList[index + 1] ?? 150, column) as ISkill
return skill ? renderSkill(skill, index) : <div class="w-34px h-34px"></div> return skill ? renderSkill(skill, index) : <div class="w-34px h-34px"></div>
})} })}
<div class="w-34px h-34px" onClick={() => (activeSkill.value = -1)}></div> <div class="w-20px h-34px" onClick={() => (activeSkill.value = -1)}></div>
</div> </div>
))} ):(<></>))}
</div> </div>
</> </>
) )