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

dev

Browse Source
This commit is contained in:
imelon
2025-05-18 21:13:58 +08:00
parent 14ca64b4cd
commit 03adbe1171
9 changed files with 161 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/calc/tabs/index.vue
+12 -4
View File
@@ -69,8 +69,9 @@ export default defineComponent({
display: flex;
list-style: none;
align-items: flex-end;
border-bottom: 1px solid #4f4838;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
width: 100%;
height: 25px;
font-size: 14px;
@@ -97,12 +98,17 @@ export default defineComponent({
.i-tab {
// font-size: 12px;
margin-left: 1px;
width: 120px;
width: fit-content;
padding:0px 10px;
padding-bottom: 2px;
height: 20px;
line-height: 20px;
text-align: center;
text-decoration: none;
display: flex;
align-items: end;
box-sizing: border-box;
text-shadow: none;
&:visited {
color: currentColor;
@@ -119,8 +125,10 @@ export default defineComponent({
}
&.active {
margin-bottom: -1px;
background: linear-gradient(#574d38, #25221d);
border-image: url('@/assets/img/control/active_top.png') 1 fill stretch;
height: 22px;
// color: #ffb400;
}
}
frontend/src/pages/Character/Skill/components/SkillReinforce/img/bg.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 77 KiB

frontend/src/pages/Character/Skill/components/SkillReinforce/img/bgBack.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

frontend/src/pages/Character/Skill/components/SkillReinforce/index.tsx
+139 -51
View File
@@ -22,68 +22,156 @@ export default defineComponent({
},
setup(props) {
const lvInfo = useVModel(props, 'lvInfo')
const skills = computed(() =>
props.skills.filter((a) => a.hasReinforce && (!lvInfo.value[a.id]?.reinforce || lvInfo.value[a.id]?.reinforce == 0)).sort((a, b) => a.learnLv - b.learnLv),
)
const reinforce = (type: number, id: number) => {
return computed({
const skills = (index: number = 0) => {
index -= 1
const reinforceList = Object.keys(lvInfo.value).filter(
(a) => !!lvInfo.value[a].reinforce && lvInfo.value[a].reinforce > 0,
)
const currentReinforceSkill = index >= 0 ? reinforceList[index] : undefined
return computed(() =>
props.skills
.filter(
(a) =>
a.id.toString() === currentReinforceSkill ||
(a.hasReinforce &&
(!lvInfo.value[a.id]?.reinforce || lvInfo.value[a.id]?.reinforce == 0) && lvInfo.value[a.id].lv > 0),
)
.sort((a, b) => a.learnLv - b.learnLv),
)
}
const itemChecked = (index: number, reinforce: number) => {
index -= 1
return computed<string | undefined>({
get() {
return lvInfo.value[id].reinforce
const reinforceList = Object.keys(lvInfo.value).filter(
(a) => !!lvInfo.value[a].reinforce && lvInfo.value[a].reinforce > 0,
)
const currentReinforceSkill = reinforceList[index]
const currentReinforce = lvInfo.value[currentReinforceSkill]?.reinforce
console.log(currentReinforce, reinforce)
return currentReinforce == reinforce ? currentReinforceSkill : undefined
},
set(value: string | undefined) {
if (!value) return
const reinforceList = Object.keys(lvInfo.value).filter(
(a) => !!lvInfo.value[a].reinforce && lvInfo.value[a].reinforce > 0,
)
const currentReinforceSkill = reinforceList[index]
currentReinforceSkill && (lvInfo.value[currentReinforceSkill].reinforce = 0)
if (!value) {
currentReinforceSkill && (lvInfo.value[currentReinforceSkill].reinforce = 0)
} else {
lvInfo.value[value].reinforce = reinforce
}
},
set(value) {},
})
}
const exchange = (index: number) => {
const skill = itemChecked(index, 1).value || itemChecked(index, 2).value
if (!skill) return
lvInfo.value[skill].reinforce = lvInfo.value[skill].reinforce == 1 ? 2 : 1
}
return () => (
<>
<div class="flex pt-10px bg-black">
<div class="skill-reinforce relative">
<div class="absolute left-55px top-150px w-250px flex flex-col gap-25px">
{renderList(3, (index) => (
<>
<div class="w-180px h-40px flex items-center justify-between pl-10px pr-10px">
<CaclIconSelect class="!mt-3px !ml--1px !bg-white/0 !border-white/0" columnNum={4} >
{renderList(skills.value, (item) => (
<>
<CalcOption value={item.id} key={item.id}>
<img src={getImageURL(item.icon)} alt={item.name} />
</CalcOption>
</>
))}
</CaclIconSelect>
<CalcButton icon="exchange"></CalcButton>
<CaclIconSelect class="!mt-3px !bg-white/0 !border-white/0" columnNum={4} >
{renderList(skills.value, (item) => (
<>
<CalcOption value={item.id} key={item.id}>
<img src={getImageURL(item.icon)} alt={item.name} />
</CalcOption>
</>
))}
</CaclIconSelect>
</div>
</>
))}
</div>
<div class="absolute top-80px left-300px w-320px h-270px flex flex-wrap content-start gap-15px py-5px px-30px box-border">
{renderList(skills.value, (item) => (
<div
key={item.id}
class="w-28px h-28px border-1px border-solid border-#3C2E1D rounded-4px"
>
<img src={getImageURL(item.icon)} alt={item.name} />
{lvInfo.value && Object.keys(lvInfo.value).length > 0 ? (
<div class="flex pt-10px bg-black">
<div class="skill-reinforce relative">
<div class="absolute left-76px top-137px w-250px flex flex-col gap-21.5px">
{renderList(3, (index) => (
<>
<div class="w-169px h-36px flex items-center justify-between">
<div class="m-4px w-28px h-28px">
<CaclIconSelect
v-model:modelValue={itemChecked(index, 1).value}
class="!bg-white/0 !border-white/0 m-4px"
columnNum={4}
>
{renderList(skills(index).value, (item) => (
<>
<CalcOption value={item.id.toString()}>
<img src={getImageURL(item.icon)} alt={item.name} />
</CalcOption>
</>
))}
</CaclIconSelect>
</div>
<CalcButton icon="exchange" onClick={() => exchange(index)}></CalcButton>
<div class="m-4px w-28px h-28px">
<CaclIconSelect
v-model:modelValue={itemChecked(index, 2).value}
class=" !bg-white/0 !border-white/0"
columnNum={4}
>
{renderList(skills(index).value, (item) => (
<>
<CalcOption value={item.id.toString()}>
<img src={getImageURL(item.icon)} alt={item.name} />
</CalcOption>
</>
))}
</CaclIconSelect>
</div>
</div>
</>
))}
</div>
<div class="absolute top-70px left-310px w-320px h-270px py-5px px-30px box-border flex flex-col">
<div class="flex flex-wrap gap-10px content-start h-120px overflow-y-auto mb-10px">
{renderList(skills().value, (item) => (
<div
key={item.id}
class="w-[28px] h-[28px] rounded-[1px] border-[1px] border-solid border-[#6d4e2b] bg-[linear-gradient(180deg,_#191919_0%,_#000000_100%)] [box-shadow:0px_4px_4px_#00000040_inset] rounded-4px"
>
<img src={getImageURL(item.icon)} alt={item.name} />
</div>
))}
{renderList(36 - skills().value.length, (item) => (
<div
key={item}
class="w-[28px] h-[28px] rounded-[1px] border-[1px] border-solid border-[#6d4e2b] bg-[linear-gradient(180deg,_#191919_0%,_#000000_100%)] [box-shadow:0px_4px_4px_#00000040_inset] rounded-4px"
></div>
))}
</div>
))}
{renderList(36 - skills.value.length, (item) => (
<div
key={item}
class="w-28px h-28px border-1px border-solid border-#3C2E1D rounded-4px bg-#0B0D0A"
></div>
))}
<div class="flex flex-col gap-10px">
{renderList(
Object.keys(lvInfo.value).filter(
(a) => !!lvInfo.value[a].reinforce && lvInfo.value[a].reinforce > 0,
),
(index) => {
const skill = props.skills.find((a) => a.id.toString() === index)
let tooltip = ''
if (skill) {
if (lvInfo.value[skill.id.toString()].reinforce == 1) {
tooltip = `技能攻击力 +${skill.learnLv < 35 ? '60' : 55}%`
}
if (lvInfo.value[skill.id.toString()].reinforce == 2) {
tooltip = `技能攻击力 +${skill.learnLv < 35 ? '43' : 38}%<br/>技能冷却时间 -15%`
}
}
return skill ? (
<div class="flex gap-5px items-center">
<div class="w-[28px] h-[28px] rounded-[1px] border-[1px] border-solid border-[#6d4e2b] bg-[linear-gradient(180deg,_#191919_0%,_#000000_100%)] [box-shadow:0px_4px_4px_#00000040_inset] rounded-4px">
<img src={getImageURL(skill?.icon)} alt={skill.name} />
</div>
<div class="text-#947E4E" v-html={tooltip}></div>
</div>
) : (
<></>
)
},
)}
</div>
</div>
</div>
</div>
</div>
) : (
<></>
)}
</>
)
},
frontend/src/pages/Character/Skill/components/SkillReinforce/style.scss
+1 -1
View File
@@ -1,6 +1,6 @@
.skill-reinforce {
width: 620px;
height: 375px;
height: 334px;
background-image: url('./img/bg.png');
background-size: 100% 100%;
background-color: black;
frontend/src/pages/Character/Skill/components/SkillVP/index.tsx
+2 -2
View File
@@ -55,7 +55,7 @@ export default defineComponent({
<>
<div class="h-auto py-2 flex flex-col bg-#080808 box-content">
{renderList(skills.value, (item) => (
<div class="h-140px flex items-center vp">
<div class="h-140px flex items-center vp pl-26px pr-16px box-content">
<div class="w-30px text-center text-#816f4c">{item.learnLv}</div>
<div class="w-200px flex gap-5px items-center">
<div class="border-1px border-solid border-#3F382E rounded-4px w-28px h-28px">
@@ -65,7 +65,7 @@ export default defineComponent({
</div>
{renderList(2, (index) => (
<div
class="flex justify-center vp-item ml-5px"
class={["flex justify-center vp-item ", index == 1 ? 'ml-auto' : 'ml-2px']}
onClick={() => {
itemChecked(item.id.toString(), index).value = !itemChecked(
item.id.toString(),
frontend/src/pages/Character/Skill/index.vue
+2 -2
View File
@@ -39,8 +39,8 @@
></SkillTree>
</div>
<div v-if="tab === 1" class="flex flex-col overflow-y-hidden h-full">
<SkillReinforce
class="flex-1"
<SkillReinforce
class="flex-1"
:skills="infoStore.skills"
v-model:lvInfo="configStore.config.skills"
v-model:bindAwake="configStore.config.bindAwake"