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/SkillDetail/index.tsx
+24 -33
View File
@@ -1,8 +1,7 @@
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'
import { TabsRoot, UiTabsList, UiTabsTrigger } from '@/components/ui/tabs'
export default defineComponent({
name: 'SkillDetail',
@@ -88,11 +87,11 @@ export default defineComponent({
const renderSkillDetail = () => (
<>
<div class="skill_title">基本信息</div>
<div class="flex flex-col gap-2px">
<div class="skill-detail__stack">
{basic.value.map(
(item) =>
!!item.value && (
<div class="flex justify-between item">
<div class="item skill-detail__row">
<span class="label">{item.label}</span>
<span class="value">{item.value}</span>
</div>
@@ -100,25 +99,23 @@ export default defineComponent({
)}
</div>
<div class="skill_title">技能描述</div>
<div class="h-auto max-h-200px">
<div class="h-full overflow-y-auto bg-#161816 p-2px">
<div class="skill-detail__description-frame">
<div class="skill-detail__scroll-content">
{desc.value?.map((item) => (
// item.startsWith('[') || item.startsWith('-') || item.startsWith('<') ? (
// <div class="min-h-10px">{item}</div>
// ) :
<div class="min-h-10px" style="white-space:pre-wrap;">
{item}
</div>
<div class="skill-detail__description-line">{item}</div>
))}
</div>
</div>
{detail.value.length > 0 && (
<>
<div class="skill_title">技能属性</div>
<div class="flex-1 overflow-y-auto">
<div class=" flex flex-col gap-2px">
<div class="skill-detail__flex-scroll">
<div class="skill-detail__stack">
{detail.value.map((item) => (
<div class="flex justify-between item items-center" v-html={item}></div>
<div class="item skill-detail__row skill-detail__row--center" v-html={item}></div>
))}
</div>
</div>
@@ -129,17 +126,15 @@ export default defineComponent({
const renderSkillVp = () => (
<>
<div class="h-auto">
<div class="h-full flex flex-col gap-5px">
<div class="skill-detail__evolution">
<div class="skill-detail__evolution-list">
{skillInfo.value?.evolution?.map((item) => (
<>
<div class="flex flex-col gap-2px">
<div class="skill-detail__stack">
<div class="skill_vp_title">{item.name}</div>
<div class="skill_title">技能描述</div>
<div class="h-auto bg-#161816 max-h-300px overflow-y-auto">
<div class="h-auto p-2px" style="white-space: pre-wrap;">
{item.descDetail}
</div>
<div class="skill-detail__evolution-scroll">
<div class="skill-detail__evolution-copy">{item.descDetail}</div>
</div>
</div>
</>
@@ -158,21 +153,17 @@ export default defineComponent({
return () => (
<>
<div class="flex flex-col gap-2px mx-2px text-#907B54 h-full">
<div class="skill_name h-20px">{skillInfo.value?.name}</div>
<div class="skill-detail">
<div class="skill_name">{skillInfo.value?.name}</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>
<TabsRoot v-model={curTab.value}>
<UiTabsList>
<UiTabsTrigger value={0}>技能信息</UiTabsTrigger>
<UiTabsTrigger value={1} disabled={!skillInfo.value?.evolution?.length}>
技能进化
</UiTabsTrigger>
</UiTabsList>
</TabsRoot>
</div>
{curTab.value === 0 && renderSkillDetail()}
{curTab.value === 1 && renderSkillVp()}
frontend-ui/src/pages/Character/Skill/components/SkillDetail/style.scss
+70
View File
@@ -1,3 +1,73 @@
.skill-detail {
display: flex;
height: 100%;
margin-inline: 2px;
flex-direction: column;
gap: 2px;
color: #907b54;
}
.skill-detail__stack {
display: flex;
flex-direction: column;
gap: 2px;
}
.skill-detail__row {
display: flex;
justify-content: space-between;
&--center {
align-items: center;
}
}
.skill-detail__description-frame {
height: auto;
max-height: 200px;
}
.skill-detail__scroll-content,
.skill-detail__evolution-scroll {
height: 100%;
padding: 2px;
overflow-y: auto;
background: #161816;
}
.skill-detail__description-line {
min-height: 10px;
white-space: pre-wrap;
}
.skill-detail__flex-scroll {
min-height: 0;
flex: 1;
overflow-y: auto;
}
.skill-detail__evolution {
height: auto;
}
.skill-detail__evolution-list {
display: flex;
height: 100%;
flex-direction: column;
gap: 5px;
}
.skill-detail__evolution-scroll {
height: auto;
max-height: 300px;
}
.skill-detail__evolution-copy {
height: auto;
padding: 2px;
white-space: pre-wrap;
}
.skill_name {
border-width: 1px;
border-style: solid;