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

1

Browse Source
This commit is contained in:
imelon
2026-05-28 00:30:53 +08:00
parent 8ec3b13b09
commit e834912f2c
8 changed files with 1041 additions and 1104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontendNew/src/pages/Dcalc/Character/Skill/components/SkillDetail/index.vue
+147
View File
@@ -0,0 +1,147 @@
<script setup lang="ts">
import { computed } from "vue";
import api from "@/api";
const props = defineProps<{
skillId: string;
level: number;
}>();
const skillInfo = asyncComputed(async () => {
if (!props.skillId || props.level == null) return undefined;
return await api.skillDetail(props.skillId, props.level);
});
const basic = computed(() => {
const info = skillInfo.value;
if (!info) return [];
return [
{ label: "技能等级", value: info.attribute.level },
{ label: "学习等级", value: info.requiredLevel },
{ label: "等级上限", value: info.maxLevel },
{
label: "冷却时间",
value: info.attribute.coolTime ? `${info.attribute.coolTime.toFixed(1)}秒` : undefined,
},
{
label: "施放时间",
value: !info.attribute.castingTime
? "瞬发"
: `${info.attribute.castingTime.toFixed(1)}秒`,
},
{ label: "魔法值", value: info.attribute.consumeMp },
{
label: "消耗无色小晶块",
value: info.consumeItem?.value ? `${info.consumeItem.value}个` : undefined,
},
].filter((item) => item.value !== undefined && item.value !== null && item.value !== "");
});
const descLines = computed(() => skillInfo.value?.descDetail.split("\n") ?? []);
const detailLines = computed(() => {
const items =
skillInfo.value?.attribute.optionDesc?.split("\n").filter((item) => !!item) ?? [];
return items.map((a) => {
// highlight value placeholder prefix
const beforeReplace = a.match(/^(.+?)\s*(\{value\d+\}.*)$/);
if (beforeReplace) {
a = `${beforeReplace[1]}<span class="detail-label-suffix">${beforeReplace[2]}</span>`;
}
const matches = a.match(/\{([^}]+)\}/g);
if (matches) {
matches.forEach((match) => {
const key = match.replace(/[{}]/g, "");
if (/^value.+/.test(key)) {
const value =
skillInfo.value?.attribute.optionValue[key as `value${string}`] ?? "-";
a = a.replace(
match,
`<span style="padding:0 2px;color:var(--color-skill-value,#4AA256)">${value}</span>`,
);
}
});
}
return a;
});
});
const hasEvolution = computed(() => (skillInfo.value?.evolution?.length ?? 0) > 0);
</script>
<template>
<div v-if="!skillInfo" class="flex items-center justify-center h-16 text-xs text-muted-foreground">
加载中…
</div>
<template v-else>
<!-- ── 基本信息 ── -->
<div>
<div class="text-xs font-semibold text-muted-foreground mb-1.5 uppercase tracking-wide">
基本信息
</div>
<div class="rounded-md border border-border/40 bg-muted/10 divide-y divide-border/30">
<div
v-for="item in basic"
:key="item.label"
class="flex items-center justify-between px-3 py-1.5 text-xs"
>
<span class="text-muted-foreground">{{ item.label }}</span>
<span class="tabular-nums font-medium">{{ item.value }}</span>
</div>
</div>
</div>
<!-- ── 技能描述 ── -->
<div v-if="descLines.length">
<div class="text-xs font-semibold text-muted-foreground mb-1.5 uppercase tracking-wide">
技能描述
</div>
<div
class="rounded-md border border-border/40 bg-muted/10 px-3 py-2 text-xs leading-relaxed max-h-48 overflow-y-auto"
>
<div
v-for="(line, i) in descLines"
:key="i"
class="min-h-[1em] whitespace-pre-wrap text-muted-foreground"
>
{{ line }}
</div>
</div>
</div>
<!-- ── 技能属性 ── -->
<div v-if="detailLines.length">
<div class="text-xs font-semibold text-muted-foreground mb-1.5 uppercase tracking-wide">
技能属性
</div>
<div class="rounded-md border border-border/40 bg-muted/10 divide-y divide-border/30">
<div
v-for="(line, i) in detailLines"
:key="i"
class="flex items-center justify-between px-3 py-1.5 text-xs"
v-html="line"
/>
</div>
</div>
<!-- ── 技能进化 (VP 描述) ── -->
<div v-if="hasEvolution">
<div class="text-xs font-semibold text-muted-foreground mb-1.5 uppercase tracking-wide">
技能进化
</div>
<div class="space-y-2">
<div
v-for="(evo, i) in skillInfo.evolution"
:key="i"
class="rounded-md border border-border/40 bg-muted/10 p-3"
>
<div class="text-xs font-semibold text-purple-400 mb-1.5">{{ evo.name }}</div>
<div
class="text-xs leading-relaxed text-muted-foreground whitespace-pre-wrap max-h-36 overflow-y-auto"
>{{ evo.descDetail }}</div>
</div>
</div>
</div>
</template>
</template>
frontendNew/src/pages/Dcalc/Character/Skill/index.vue
+93 -75
View File
@@ -8,6 +8,14 @@ import TabsTrigger from "@/components/ui/tabs/TabsTrigger.vue";
import { getImageURL } from "@/utils";
import type { ISkill } from "@/api/info/type";
import ResultPanel from "@/pages/Dcalc/Character/Result/Index.vue";
import SkillDetailPanel from "./components/SkillDetail/index.vue";
import vp1Img from "./img/vp_1.png";
import vp2Img from "./img/vp_2.png";
import up1Img from "./img/up_1.png";
import up2Img from "./img/up_2.png";
const vpImg = (mode: number) => (mode === 1 ? vp1Img : vp2Img);
const upImg = (mode: number) => (mode === 1 ? up1Img : up2Img);
const infoStore = useInfoStore();
const configStore = useConfigStore();
@@ -307,12 +315,16 @@ const resetAllSkills = () => {
@click.stop="chooseSkill(skill.id.toString())"
>
<div class="badge-row">
<span v-if="skillCfg(skill.id.toString()).vp > 0" class="badge badge-vp"
>VP</span
>
<span v-if="skillCfg(skill.id.toString()).up > 0" class="badge badge-up"
>UP</span
>
<img
v-if="skillCfg(skill.id.toString()).vp > 0"
:src="vpImg(skillCfg(skill.id.toString()).vp)"
class="badge-img"
/>
<img
v-if="skillCfg(skill.id.toString()).up > 0"
:src="upImg(skillCfg(skill.id.toString()).up)"
class="badge-img"
/>
</div>
<img
:src="getImageURL(skill.icon)"
@@ -357,12 +369,16 @@ const resetAllSkills = () => {
>
<template v-if="cell">
<div class="badge-row">
<span v-if="skillCfg(cell.id.toString()).vp > 0" class="badge badge-vp"
>VP</span
>
<span v-if="skillCfg(cell.id.toString()).up > 0" class="badge badge-up"
>UP</span
>
<img
v-if="skillCfg(cell.id.toString()).vp > 0"
:src="vpImg(skillCfg(cell.id.toString()).vp)"
class="badge-img"
/>
<img
v-if="skillCfg(cell.id.toString()).up > 0"
:src="upImg(skillCfg(cell.id.toString()).up)"
class="badge-img"
/>
</div>
<img
:src="getImageURL(cell.icon)"
@@ -643,61 +659,63 @@ const resetAllSkills = () => {
<!-- Skill detail -->
<div v-if="selectedSkill" class="flex-1 overflow-y-auto p-5 space-y-5">
<!-- Header -->
<div class="flex items-center gap-3">
<img
:src="getImageURL(selectedSkill.icon)"
:alt="selectedSkill.name"
class="w-14 h-14 rounded-lg object-cover border border-border/60"
/>
<div>
<div class="text-base font-semibold">{{ selectedSkill.name }}</div>
<div class="text-xs text-muted-foreground mt-1">
{{ selectedSkill.type === "passive" ? "被动" : "主动" }} · Lv
{{ selectedSkill.learnLv }} 解锁
<!-- Header + Level control: left-right layout -->
<div class="flex items-center gap-4">
<!-- Left: icon + name + type -->
<div class="flex items-center gap-3 flex-1 min-w-0">
<img
:src="getImageURL(selectedSkill.icon)"
:alt="selectedSkill.name"
class="w-14 h-14 shrink-0 rounded-lg object-cover border border-border/60"
/>
<div class="min-w-0">
<div class="text-base font-semibold truncate">{{ selectedSkill.name }}</div>
<div class="text-xs text-muted-foreground mt-1">
{{ selectedSkill.type === "passive" ? "被动" : "主动" }} · Lv
{{ selectedSkill.learnLv }} 解锁
</div>
</div>
</div>
</div>
<!-- Level control -->
<div>
<div class="flex items-baseline gap-2 mb-2.5">
<span
class="text-4xl font-bold tabular-nums"
:style="{ color: lvColor(selectedSkill.id.toString(), selectedSkill.maxLearnLv) }"
>{{ skillCfg(selectedSkill.id.toString()).lv }}</span
>
<span class="text-xs text-muted-foreground">/ 满 {{ selectedSkill.maxLearnLv }}</span>
</div>
<div class="flex gap-1.5">
<Button
size="sm"
variant="outline"
class="h-7 px-2.5 text-xs"
@click="resetLv(selectedSkill.id.toString())"
>归零</Button
>
<Button
size="sm"
variant="outline"
class="h-7 px-2.5 text-xs"
@click="stepLv(selectedSkill.id.toString(), -1)"
>−1</Button
>
<Button
size="sm"
variant="outline"
class="h-7 px-2.5 text-xs"
@click="stepLv(selectedSkill.id.toString(), 1)"
>+1</Button
>
<Button
size="sm"
variant="outline"
class="h-7 px-2.5 text-xs"
@click="setMaxLv(selectedSkill.id.toString())"
>满级</Button
>
<!-- Right: level number + buttons -->
<div class="shrink-0 flex flex-col items-end gap-2">
<div class="flex items-baseline gap-1.5">
<span
class="text-3xl font-bold tabular-nums"
:style="{ color: lvColor(selectedSkill.id.toString(), selectedSkill.maxLearnLv) }"
>{{ skillCfg(selectedSkill.id.toString()).lv }}</span
>
<span class="text-xs text-muted-foreground">/ {{ selectedSkill.maxLearnLv }}</span>
</div>
<div class="flex gap-1">
<Button
size="sm"
variant="outline"
class="h-7 px-2 text-xs"
@click="resetLv(selectedSkill.id.toString())"
>归零</Button
>
<Button
size="sm"
variant="outline"
class="h-7 px-2 text-xs"
@click="stepLv(selectedSkill.id.toString(), -1)"
>−1</Button
>
<Button
size="sm"
variant="outline"
class="h-7 px-2 text-xs"
@click="stepLv(selectedSkill.id.toString(), 1)"
>+1</Button
>
<Button
size="sm"
variant="outline"
class="h-7 px-2 text-xs"
@click="setMaxLv(selectedSkill.id.toString())"
>满级</Button
>
</div>
</div>
</div>
@@ -749,6 +767,12 @@ const resetAllSkills = () => {
}}
</div>
</div>
<!-- API-fetched skill detail: 基本信息 / 技能描述 / 技能属性 / 技能进化 -->
<SkillDetailPanel
:skill-id="selectedSkill.uuid"
:level="skillCfg(selectedSkill.id.toString()).lv"
/>
</div>
<!-- Empty state -->
@@ -788,17 +812,11 @@ const resetAllSkills = () => {
justify-content: center;
gap: 2px;
}
.badge {
font-size: 8px;
line-height: 14px;
font-weight: 700;
.badge-img {
width: 14px;
height: 14px;
object-fit: contain;
}
.badge-vp {
color: #c084fc;
} /* purple-400 */
.badge-up {
color: #fb923c;
} /* amber-400 */
/* 28×28px icon at y=14px */
.skill-icon {