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

init

Browse Source
This commit is contained in:
imelon
2026-08-09 00:33:21 +08:00
parent 6be5ebc8f7
commit 9ea606b175
133 changed files with 7300 additions and 6289 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-ui/src/pages/Character/Skill/components/SkillTree/index.tsx
+59 -50
View File
@@ -1,7 +1,11 @@
import { getImageURL } from '@/utils/images'
import type { ISkill } from '@/api/info/type'
import { useVModel } from '@vueuse/core'
import CalcButton from '@/components/calc/button/index.vue'
import { UiButton } from '@/components/ui/button'
import addIcon from './img/add.svg'
import maxIcon from './img/max.svg'
import minIcon from './img/min.svg'
import subIcon from './img/sub.svg'
import './style.scss'
export default defineComponent({
@@ -101,17 +105,14 @@ export default defineComponent({
if (info?.lv > skill.maxLearnLv) color = '#58E0FC'
return (
<>
<div class="relative w-35px h-55px">
<div class="flex w-full items-center justify-center gap-2px absolute top--18px left-1px">
<div class="skill-tree__slot">
<div class="skill-tree__enhancements">
{info?.vp > 0 && <div class={`vp_${info.vp}`}></div>}
{info?.up > 0 && <div class={`up_${info.up}`}></div>}
</div>
{activeSkill.value == skill.id && renderSkillAction(skill)}
<div
class={[
'w-36px absolute h-48px flex flex-col box-border items-center py-3px z-2',
skill.learnLv == 100 && skill.bind ? '' : 'skill',
]}
class={['skill-tree__skill', skill.learnLv == 100 && skill.bind ? '' : 'skill']}
onClick={(e) => {
e.stopPropagation()
chooseSkill(skill)
@@ -124,42 +125,30 @@ export default defineComponent({
key={index}
>
<img
class={['h-28px w-28px', skill.type === 'passive' ? 'passive' : '']}
class={['skill-tree__icon', skill.type === 'passive' ? 'passive' : '']}
src={getImageURL(skill.icon)}
alt={skill.name}
></img>
<div class="w-100% flex flex-1 justify-center" style={{ color }}>
<div class="skill-tree__level" style={{ color }}>
{info?.lv ?? 0}
</div>
</div>
{skill.learnLv == 100 && skill.bind && (
<>
<div
class={`pos-absolute w-196px h-54px box-border translate-x--50% left-18px top--3px flex justify-between items-center py-2px px-3px awake_${bindAwake.value}`}
>
<div
class="w-36px flex flex-col box-border items-center py-2px z-2"
onClick={() => chooseBindAwake(50)}
>
<div class={`skill-tree__awake awake_${bindAwake.value}`}>
<div class="skill-tree__awake-option" onClick={() => chooseBindAwake(50)}>
<img
class="h-28px w-28px mt-2px"
class="skill-tree__icon skill-tree__awake-icon"
src={getImageURL(awakeSkill_1.value?.icon ?? '')}
></img>
<div class="w-100% mt-1px flex items-center justify-center text-#ffc701">
1次
</div>
<div class="skill-tree__awake-label">1次</div>
</div>
<div
class="w-36px flex flex-col box-border items-center py-2px z-2"
onClick={() => chooseBindAwake(85)}
>
<div class="skill-tree__awake-option" onClick={() => chooseBindAwake(85)}>
<img
class="h-28px w-28px mt-1px"
class="skill-tree__icon skill-tree__awake-icon"
src={getImageURL(awakeSkill_2.value?.icon ?? '')}
></img>
<div class="w-100% mt-1px flex items-center justify-center text-#ffc701">
2次
</div>
<div class="skill-tree__awake-label">2次</div>
</div>
</div>
</>
@@ -172,39 +161,55 @@ export default defineComponent({
const renderSkillAction = (skill: ISkill) => (
<>
<>
<div class="absolute skill-active w-88px h-78px translate-x--50% left-16px top--1px z-5">
<div class="flex justify-between items-center px-5px relative top-54px">
<CalcButton
icon="min"
<div class="skill-active skill-tree__actions">
<div class="skill-tree__action-list">
<UiButton
size="icon"
class="skill-action-button"
aria-label="技能等级归零"
disabled={lvInfo.value[skill.id.toString()]?.lv == 0}
onClick={(e: Event) => {
e.stopPropagation()
actionSkillLv(skill, 'subMax')
}}
></CalcButton>
<CalcButton
icon="reduce"
>
<img data-icon src={minIcon} alt="" />
</UiButton>
<UiButton
size="icon"
class="skill-action-button"
aria-label="技能等级减一"
disabled={lvInfo.value[skill.id.toString()]?.lv == 0}
onClick={(e: Event) => {
e.stopPropagation()
actionSkillLv(skill, 'sub')
}}
></CalcButton>
<CalcButton
icon="increase"
>
<img data-icon src={subIcon} alt="" />
</UiButton>
<UiButton
size="icon"
class="skill-action-button"
aria-label="技能等级加一"
onClick={(e: Event) => {
e.stopPropagation()
actionSkillLv(skill, 'add')
}}
></CalcButton>
<CalcButton
icon="max"
>
<img data-icon src={addIcon} alt="" />
</UiButton>
<UiButton
size="icon"
class="skill-action-button"
aria-label="技能等级加满"
disabled={lvInfo.value[skill.id.toString()]?.lv >= skill.maxLearnLv}
onClick={(e: Event) => {
e.stopPropagation()
actionSkillLv(skill, 'addMax')
}}
></CalcButton>
>
<img data-icon src={maxIcon} alt="" />
</UiButton>
{/* <img
src={`${new URL('./img/min.svg', import.meta.url).href}`}
onClick={(e: Event) => {
@@ -241,11 +246,11 @@ export default defineComponent({
return () => (
<>
<div onClick={() => (activeSkill.value = -1)}>
<div class="skill-tree" onClick={() => (activeSkill.value = -1)}>
{((getSkill(0, 15, -1) ?? []) as ISkill[]).length > 0 && (
<>
<div class="skill-tree-line flex items-center gap-8px px-5px">
<div class="w-34px h-34px flex items-center justify-center text-white">
<div class="skill-tree-line">
<div class="skill-tree__row-label">
其<br />余
</div>
{((getSkill(0, 15, -1) ?? []) as ISkill[])?.map((skill, index) =>
@@ -257,17 +262,21 @@ export default defineComponent({
{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-8px px-5px" key={index}>
<div class="skill-tree-line" key={index}>
{lv == 1 || lv % 10 == 0 ? (
<div class="w-34px h-34px flex items-center justify-center text-white">{lv}</div>
<div class="skill-tree__row-label">{lv}</div>
) : (
<div class="w-34px h-34px"></div>
<div class="skill-tree__placeholder"></div>
)}
{columns.map((column) => {
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="skill-tree__placeholder"></div>
)
})}
<div class="w-5px h-34px" onClick={() => (activeSkill.value = -1)}></div>
<div class="skill-tree__row-end" onClick={() => (activeSkill.value = -1)}></div>
</div>
) : (
<></>
frontend-ui/src/pages/Character/Skill/components/SkillTree/style.scss
+146
View File
@@ -1,6 +1,16 @@
.skill-tree {
/* Preserve the original 11-column tree rhythm while allowing its host to scroll on narrow screens. */
min-width: 550px;
}
.skill-tree-line {
display: flex;
height: 80px;
width: auto;
align-items: center;
gap: 8px;
padding-inline: 5px;
&:nth-child(n + 1) {
background-color: #000000;
}
@@ -9,6 +19,130 @@
}
}
.skill-tree__slot {
position: relative;
width: 35px;
height: 55px;
flex: 0 0 35px;
}
.skill-tree__enhancements {
position: absolute;
top: -18px;
left: 1px;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
gap: 2px;
}
.skill-tree__skill {
position: absolute;
z-index: 2;
display: flex;
box-sizing: border-box;
width: 36px;
height: 48px;
padding-block: 3px;
align-items: center;
flex-direction: column;
cursor: pointer;
}
.skill-tree__icon {
display: block;
width: 28px;
height: 28px;
object-fit: contain;
}
.skill-tree__level {
display: flex;
width: 100%;
min-height: 0;
flex: 1;
justify-content: center;
}
.skill-tree__awake {
position: absolute;
top: -3px;
left: 18px;
display: flex;
box-sizing: border-box;
width: 196px;
height: 54px;
padding: 2px 3px;
align-items: center;
justify-content: space-between;
transform: translateX(-50%);
}
.skill-tree__awake-option {
position: relative;
z-index: 2;
display: flex;
box-sizing: border-box;
width: 36px;
padding-block: 2px;
align-items: center;
flex-direction: column;
cursor: pointer;
}
.skill-tree__awake-icon {
margin-top: 1px;
}
.skill-tree__awake-label {
display: flex;
width: 100%;
margin-top: 1px;
align-items: center;
justify-content: center;
color: #ffc701;
}
.skill-tree__actions {
position: absolute;
z-index: 5;
top: -1px;
left: 16px;
width: 88px;
height: 78px;
transform: translateX(-50%);
}
.skill-tree__action-list {
position: relative;
top: 54px;
display: flex;
padding-inline: 5px;
align-items: center;
justify-content: space-between;
}
.skill-tree__row-label,
.skill-tree__placeholder {
display: flex;
width: 34px;
height: 34px;
flex: 0 0 34px;
align-items: center;
justify-content: center;
}
.skill-tree__row-label {
color: #fff;
}
.skill-tree__row-end {
width: 5px;
height: 34px;
flex: 0 0 5px;
}
.passive {
filter: grayscale(100%) invert(3%) sepia(14%) saturate(874%) hue-rotate(65deg) brightness(105%)
contrast(102%);
@@ -24,6 +158,18 @@
background-size: 100% 100%;
}
.skill-action-button {
--ui-control-height-default: 17px;
border-color: transparent;
img {
width: 11px;
height: 11px;
object-fit: contain;
}
}
.awake_50 {
background-image: url('./img/awake_50.png');
background-size: 100% 100%;