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-11 17:23:06 +08:00
parent 23dc27f3a9
commit c211f3d1cd
5 changed files with 128 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/calc/tab/index.vue
+8
View File
@@ -6,6 +6,14 @@ export default defineComponent({
name: 'CalcTab',
props: {
...selectionProps,
value: {
type: [String, Number],
default: '',
},
disabled: {
type: Boolean,
default: false,
},
},
setup(props, { slots }) {
return () => {
frontend/src/components/calc/tabs/index.vue
+5
View File
@@ -131,6 +131,11 @@ export default defineComponent({
height: 22px;
// color: #ffb400;
}
&.disabled{
filter: grayscale(100%);
cursor: not-allowed;
}
}
}
</style>
frontend/src/pages/Character/Skill/components/SkillDetail/index.tsx
+80 -27
View File
@@ -1,6 +1,8 @@
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',
@@ -24,6 +26,8 @@ export default defineComponent({
return res
})
const curTab = ref(0)
const basic = computed(() =>
!skillInfo.value
? []
@@ -79,38 +83,87 @@ export default defineComponent({
return details || []
})
const renderSkillDetail = () => (
<>
<div class="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="title">技能描述</div>
<div class="h-auto max-h-200px">
<div class="h-full overflow-y-auto bg-#161816 p-2px">
{desc.value?.map((item) => (
<span style="white-space: pre-wrap;text-indent:20px;">{item}</span>
))}
</div>
</div>
<div class="title">技能属性</div>
<div class="flex-1">
<div class="overflow-y-auto h-full 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 overflow-y-auto 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="title">技能描述</div>
<div class="h-auto max-h-200px">
<div class="h-full overflow-y-auto bg-#161816 p-2px" style="white-space: pre-wrap;">
{item.descDetail}
</div>
</div>
</div>
</>
))}
</div>
</div>
</>
)
onMounted(() => {
watchEffect(() => {
skillInfo.value?.evolution?.length == 0 && (curTab.value = 0)
})
})
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="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="title">技能描述</div>
<div class="h-auto max-h-200px">
<div class="h-full overflow-y-auto">
{desc.value?.map((item) => (
<span style="white-space: pre-wrap;text-indent:20px;">{item}</span>
))}
</div>
</div>
<div class="title">技能属性</div>
<div class="flex-1">
<div class="overflow-y-auto h-full flex flex-col gap-2px">
{detail.value?.map((item) => (
<div class="flex justify-between item items-center" v-html={item}></div>
))}
</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>
</>
)
frontend/src/pages/Character/Skill/components/SkillDetail/style.scss
+33
View File
@@ -32,6 +32,39 @@
}
}
.skill_vp_title {
border-width: 1px;
border-style: solid;
border-image-source: linear-gradient(90deg, #691b86 0%, #2e302e 100%);
border-image-slice: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 18px;
z-index: 5;
transform-style: preserve-3d;
color: #9443BE;
&::before {
width: 100%;
position: absolute;
content: '';
height: 50%;
bottom: 0;
background: linear-gradient(90deg, #3a0f47 0%, #121212 100%);
transform: translateZ(-1px);
}
&::after {
width: 100%;
position: absolute;
content: '';
height: 50%;
top: 0;
background: linear-gradient(90deg, #1e0b24 0%, #171717 100%);
transform: translateZ(-1px);
}
}
.title{
border: 1px solid #3e4040;
frontend/src/pages/Character/Skill/index.vue
+2 -2
View File
@@ -52,7 +52,7 @@
</div>
</div>
</div>
<div class="bg-#101012 flex-1 max-w-250px h-full">
<div class="bg-#101012 flex-1 max-w-250px h-full" v-if="curCurrentSkill.skillId">
<SkillDetail
:skillId="curCurrentSkill.skillId"
:level="curCurrentSkill.level"
@@ -75,7 +75,7 @@ const tab = ref(0)
const infoStore = useInfoStore()
const configStore = useConfigStore()
const curSkillId = ref("")
const curSkillId = ref()
const curCurrentSkill = computed(() => {
const skill = infoStore.skills.find(skill => skill.uuid === curSkillId.value)