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()}