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/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 {