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

dev

Browse Source
This commit is contained in:
imelon
2025-06-15 14:05:02 +08:00
parent 547b24860f
commit 21dea5b808
48 changed files with 194 additions and 48754 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Character/Skill/components/SkillDetail/index.tsx
+6 -6
View File
@@ -89,7 +89,7 @@ export default defineComponent({
const renderSkillDetail = () => (
<>
<div class="title">基本信息</div>
<div class="skill_title">基本信息</div>
<div class="flex flex-col gap-2px">
{basic.value.map(
(item) =>
@@ -101,7 +101,7 @@ export default defineComponent({
),
)}
</div>
<div class="title">技能描述</div>
<div class="skill_title">技能描述</div>
<div class="h-auto max-h-250px">
<div class="h-full overflow-y-auto bg-#161816 p-2px">
{desc.value?.map((item) => item.startsWith("[") ? (<div class="min-h-10px">{item}</div>) :(
@@ -109,7 +109,7 @@ export default defineComponent({
))}
</div>
</div>
<div class="title">技能属性</div>
<div class="skill_title">技能属性</div>
<div class="flex-1 overflow-y-auto">
<div class=" flex flex-col gap-2px">
{detail.value?.map((item) => (
@@ -127,8 +127,8 @@ export default defineComponent({
{skillInfo.value?.evolution?.map((item) => (
<>
<div class="flex flex-col gap-2px">
<div class="skill_vp_title">{item.name}</div>
<div class="title">技能描述</div>
<div class="skill_vp_skill_title">{item.name}</div>
<div class="skill_title">技能描述</div>
<div class="h-auto max-h-200px">
<div class="h-full bg-#161816 p-2px" style="white-space: pre-wrap;">
{item.descDetail}
@@ -151,7 +151,7 @@ export default defineComponent({
return () => (
<>
<div class="flex flex-col gap-2px mx-2px text-#907B54 h-full">
<div class="skill_title h-20px">{skillInfo.value?.name}</div>
<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}>
frontend/src/pages/Character/Skill/components/SkillDetail/style.scss
+2 -2
View File
@@ -1,4 +1,4 @@
.skill_title {
.skill_name {
border-width: 1px;
border-style: solid;
border-image-source: linear-gradient(90deg, #7d5f07 0%, #2e302e 100%);
@@ -66,7 +66,7 @@
}
}
.title{
.skill_title{
border: 1px solid #3e4040;
color: #c1a238;
background: linear-gradient(180deg, #2b292b 0%, #0b0b0b 100%);
frontend/src/pages/Character/Skill/components/SkillTree/index.tsx
+4 -4
View File
@@ -235,10 +235,10 @@ export default defineComponent({
return () => (
<>
<div onClick={() => (activeSkill.value = -1)} class="pb-40px">
<div onClick={() => (activeSkill.value = -1)}>
{((getSkill(0, 15, -1) ?? []) as ISkill[]).length > 0 && (
<>
<div class="skill-tree-line flex items-center gap-10px px-10px">
<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">
其<br />余
</div>
@@ -251,7 +251,7 @@ 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-10px px-10px" key={index}>
<div class="skill-tree-line flex items-center gap-8px px-5px" key={index}>
{lv == 1 || lv % 10 == 0 ? (
<div class="w-34px h-34px flex items-center justify-center text-white">{lv}</div>
) : (
@@ -261,7 +261,7 @@ export default defineComponent({
const skill = getSkill(lv, lvList[index + 1] ?? 150, column) as ISkill
return skill ? renderSkill(skill, index) : <div class="w-34px h-34px"></div>
})}
<div class="w-20px h-34px" onClick={() => (activeSkill.value = -1)}></div>
<div class="w-5px h-34px" onClick={() => (activeSkill.value = -1)}></div>
</div>
) : (
<></>
frontend/src/pages/Character/Skill/components/SkillUP/index.tsx
+2 -2
View File
@@ -147,7 +147,7 @@ export default defineComponent({
</div>
<div class="right">
<div class="title text-16px text-center leading-48px">目标技能</div>
<div class="flex flex-wrap gap-8px content-start h-110px overflow-y-auto mb-8px w-275px">
<div class="flex flex-wrap gap-8px content-start h-110px overflow-y-auto mb-8px w-245px m-auto">
{renderList(skills().value, (item) => (
<div
key={item.id}
@@ -156,7 +156,7 @@ export default defineComponent({
<img src={getImageURL(item.icon)} alt={item.name} />
</div>
))}
{renderList(35 - skills().value.length, (item) => (
{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"
frontend/src/pages/Character/Skill/components/SkillUP/style.scss
+2 -2
View File
@@ -1,5 +1,5 @@
.skill-up {
width: 550px;
width: 540px;
// height: 334px;
// background-image: url('./img/bg.png');
// background-size: 100% 100%;
@@ -40,7 +40,7 @@
.right {
.title {
width: 271px;
width: 261px;
height: 48px;
background: url('./img/title.png') no-repeat center center;
}
frontend/src/pages/Character/Skill/index.vue
+27 -17
View File
@@ -1,6 +1,6 @@
<template>
<div class="flex">
<div>
<div class="flex flex-col">
<div class="flex bg-#101012 h-40px text-#6C5E4A font-bold">
<div
class="flex-1 text-15px flex items-center justify-center"
@@ -18,8 +18,8 @@
技能定制
</div>
</div>
<div class="h-90vh w-570px overflow-x-hidden bg-#101012">
<div class="overflow-y-auto h-full" v-if="tab === 0">
<div class="flex-1 w-550px overflow-x-hidden bg-#101012">
<div class="overflow-y-auto h-full box-border" v-if="tab === 0">
<SkillTree
:skills="infoStore.skills"
v-model:lvInfo="configStore.config.skills"
@@ -28,9 +28,7 @@
></SkillTree>
</div>
<div v-if="tab === 1" class="flex flex-col overflow-y-hidden h-full">
<div class="item-head" @click="linkColg">
技能进化<span class="font-bold text-white">[形态爆料演示戳我]</span>
</div>
<div class="item-head" 角色等级>技能进化</div>
<SkillUP
class="flex-1"
:skills="infoStore.skills"
@@ -38,9 +36,7 @@
v-model:bindAwake="configStore.config.bindAwake"
:buffer="infoStore.infos?.buffer"
></SkillUP>
<div class="item-head" @click="linkColg">
技能突破<span class="font-bold text-white">[形态爆料演示戳我]</span>
</div>
<div class="item-head" 角色等级>技能突破</div>
<div class="flex-1 overflow-y-auto w-full">
<SkillVP
:skills="infoStore.skills"
@@ -52,12 +48,26 @@
</div>
</div>
</div>
<div class="bg-#101012 w-250px h-full overflow-x-auto" v-if="curCurrentSkill.skillId && curCurrentSkill.level > 0">
<SkillDetail
:skillId="curCurrentSkill.skillId"
:level="curCurrentSkill.level"
></SkillDetail>
<div
class="bg-#101012 w-250px h-full overflow-x-auto"
v-if="curCurrentSkill.skillId && curCurrentSkill.level > 0"
>
<SkillDetail :skillId="curCurrentSkill.skillId" :level="curCurrentSkill.level"></SkillDetail>
</div>
<!-- <div class="absolute right--60px">
<div class="text-#AE8D5A h-60px bg-black p-1px box-border flex pl-2">
<div
class="border-1px border-solid border-#322E20 border-l-none flex p-1px box-border pl-0"
>
<div
class="border-1px border-#514531 border-solid rounded-2px"
style="background: linear-gradient(to bottom, #313330 0%, #0f110f 100%)"
>
技能详细
</div>
</div>
</div>
</div> -->
</div>
</template>
@@ -78,15 +88,15 @@ const configStore = useConfigStore()
const curSkillId = ref()
const curCurrentSkill = computed(() => {
const skill = infoStore.skills.find(skill => skill.uuid === curSkillId.value)
const skill = infoStore.skills.find((skill) => skill.uuid === curSkillId.value)
return {
skillId: skill?.uuid ?? "",
skillId: skill?.uuid ?? '',
level: configStore.config.skills[skill?.id || 0]?.lv || 0,
}
})
const setCurrentSkill = (skillId: number) => {
curSkillId.value = infoStore.skills.find(skill => skill.id === skillId)?.uuid || ''
curSkillId.value = infoStore.skills.find((skill) => skill.id === skillId)?.uuid || ''
}
const linkColg = () => {