pan/pixelheros
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(talent-ui): 优化天赋界面展示逻辑与数据显示

Browse Source 
1.  天赋总览页新增各层已投入点数展示
2.  天赋详情弹窗重构前置与层位校验UI：
    - 拆分层位需求与软前置展示模块
    - 优化进度显示逻辑，避免数值歧义
    - 修正前置等级展示为当前/需求格式
3.  更新相关注释与文档说明
This commit is contained in:
pan
2026-09-20 16:04:09 +08:00
parent c183ae464a
commit 1634f6a528
4 changed files with 3971 additions and 1738 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1789
assets/resources/gui/element/TIBox.prefab
View File

File diff suppressed because it is too large Load Diff

3862
assets/resources/gui/element/talents.prefab
View File

File diff suppressed because it is too large Load Diff

45
assets/script/game/map/TIBoxComp.ts
View File

@@ -4,10 +4,11 @@
*
* 职责：
* 1. 展示天赋图标 / 名称 / 当前等级 / 条幅说明（getTalentDisplayText）。
* 2. 展示软前置行：前置天赋名称、需求等级、前置已达成勾图标（达成亮 On，未达成亮 Off）。
* 3. 加点按钮：仅在可加点（层位已解锁 + 前置满足 + 未满级 + 点数足够）时显示；
* 2. 展示层位需求行：前置层位名称（如：1 级天赋）、投入进度（如：5/5）、解锁勾图标（解锁亮 On，未解锁亮 Off）。
* 3. 展示软前置行：前置天赋名称、等级进度（当前/需求，如：0/5）、前置已达成勾图标（达成亮 On，未达成亮 Off）。
* 4. 加点按钮：仅在可加点（层位已解锁 + 前置满足 + 未满级 + 点数足够）时显示；
* 不满足条件或已满级时隐藏，弹窗仍可正常打开查看。
* 4. 加点成功后通过 TALENT_UPDATE 事件驱动 TalentsComp 全量刷新，并同步刷新本弹窗。
* 5. 加点成功后通过 TALENT_UPDATE 事件驱动 TalentsComp 全量刷新，并同步刷新本弹窗。
*
* 使用（oops.gui 模块）：
* oops.gui.open(UIID.TIBox, { uuid: 9001 });
@@ -20,7 +21,7 @@
import { _decorator, EventTouch, Label, Node, NodeEventType, RichText, Sprite, SpriteFrame } from "cc";
import { ecs } from "../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS";
import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/module/common/CCComp";
import { TalentSet, TalentConfig, getTalentUpgradeCost, isTalentPrereqMet, isTalentTierUnlocked } from "../common/config/TalentSet";
import { TalentSet, TalentConfig, TalentTier, TALENT_TIER_UNLOCK_THRESHOLD, getTalentTierInvestedPoints, getTalentUpgradeCost, isTalentPrereqMet, isTalentTierUnlocked } from "../common/config/TalentSet";
import { GameEvent } from "../common/config/GameEvent";
import { HRoleName } from "../common/config/heroSet";
import { outlineRich } from "../common/RichOutline";
@@ -52,7 +53,7 @@ export class TIBoxComp extends CCComp {
@property({ type: Label, tooltip: "前置天赋名称（无前置时隐藏前置行）" })
lbl_prereq_name: Label = null!;
@property({ type: Label, tooltip: "前置天赋需求等级" })
@property({ type: Label, tooltip: "前置天赋等级进度（当前/需求，如：0/5）" })
lbl_prereq_lv: Label = null!;
@property({ type: Node, tooltip: "前置已达成勾图标（On）" })
@@ -64,6 +65,21 @@ export class TIBoxComp extends CCComp {
@property({ type: Node, tooltip: "前置行容器（无前置天赋时整体隐藏）" })
node_prereq: Node = null!;
@property({ type: Node, tooltip: "层位需求行容器（第 1 层天赋无层位需求，整体隐藏）" })
node_tier: Node = null!;
@property({ type: Label, tooltip: "前置层位名称（如：1 级天赋）" })
lbl_tier_name: Label = null!;
@property({ type: Label, tooltip: "前一层投入进度（已投入/门槛，如：5/5）" })
lbl_tier_progress: Label = null!;
@property({ type: Node, tooltip: "层位已解锁勾图标（On）" })
node_tier_check_on: Node = null!;
@property({ type: Node, tooltip: "层位未解锁勾图标（Off）" })
node_tier_check_off: Node = null!;
@property({ type: RichText, tooltip: "条幅说明（当前已生效数值 / 每级引导）" })
richtext_info: RichText = null!;
@@ -122,6 +138,21 @@ export class TIBoxComp extends CCComp {
// 条幅说明：已加点显示当前生效数值，未加点显示每级引导
if (this.richtext_info) this.richtext_info.string = outlineRich(this.buildDetailText(cfg, lv));
// 层位需求行：第 1 层恒解锁无需求，整体隐藏；其余层展示前一层名称与投入进度（如：1 级天赋 5/5）
const hasTierNeed = cfg.tier > TalentTier.L1;
if (this.node_tier) this.node_tier.active = hasTierNeed;
if (hasTierNeed) {
const prevTier = (cfg.tier - 1) as TalentTier;
const invested = getTalentTierInvestedPoints(levels, prevTier);
const tierMet = isTalentTierUnlocked(levels, cfg.tier);
if (this.lbl_tier_name) this.lbl_tier_name.string = `${prevTier} 级天赋`;
// 进度超门槛时截断显示（如已投入 7 点仍显示 5/5，避免 7/5 的歧义观感）
const shown = Math.min(invested, TALENT_TIER_UNLOCK_THRESHOLD);
if (this.lbl_tier_progress) this.lbl_tier_progress.string = `${shown}/${TALENT_TIER_UNLOCK_THRESHOLD}`;
if (this.node_tier_check_on) this.node_tier_check_on.active = tierMet;
if (this.node_tier_check_off) this.node_tier_check_off.active = !tierMet;
}
// 软前置行：无前置整体隐藏；有前置展示名称/需求等级/达成勾
const hasPrereq = !!(cfg.prereq_uuid && cfg.prereq_lv);
if (this.node_prereq) this.node_prereq.active = hasPrereq;
@@ -129,7 +160,9 @@ export class TIBoxComp extends CCComp {
const preCfg = TalentSet[cfg.prereq_uuid!];
const preMet = isTalentPrereqMet(levels, cfg);
if (this.lbl_prereq_name) this.lbl_prereq_name.string = preCfg ? preCfg.name : `天赋${cfg.prereq_uuid}`;
if (this.lbl_prereq_lv) this.lbl_prereq_lv.string = `${cfg.prereq_lv}`;
// 前置等级进度（当前/需求，如：0/5）；超需求时截断显示，避免 7/5 的歧义观感
const preLv = Math.min(levels?.[cfg.prereq_uuid!] ?? 0, cfg.prereq_lv!);
if (this.lbl_prereq_lv) this.lbl_prereq_lv.string = `${preLv}/${cfg.prereq_lv}`;
if (this.node_prereq_check_on) this.node_prereq_check_on.active = preMet;
if (this.node_prereq_check_off) this.node_prereq_check_off.active = !preMet;
}

13
assets/script/game/map/TalentsComp.ts
View File

@@ -3,7 +3,7 @@
* @description 天赋加点页组件（UI 视图层，最小容器）
*
* 职责：
* 1. 页头展示：可用天赋点 / 天赋等级（Lv.x）/ 当前等级经验进度。
* 1. 页头展示：可用天赋点 / 天赋等级（Lv.x）/ 当前等级经验进度 / 各层已投入点数。
* 2. 收集子树内全部 TalentItemComp（编辑器静态摆放），TALENT_UPDATE 事件驱动全量刷新。
* 3. 卡片点击统一打开 TIBox 天赋详情弹窗；加点校验（层位/前置/满级/点数）由 TIBoxComp 内聚，
* 不满足条件时弹窗隐藏加点按钮，仅作详情查看。
@@ -46,6 +46,9 @@ export class TalentsComp extends CCComp {
@property({ type: Label, tooltip: "当前等级经验数值（当前经验/升级所需经验）" })
lbl_exp: Label = null!;
@property({ type: [Label], tooltip: "各层已投入点数 Label（数组索引对应第 1~5 层）" })
lbl_tier_points: Label[] = [];
@property({ type: Node, tooltip: "看广告重置按钮" })
btn_reset: Node = null!;
@@ -88,6 +91,14 @@ export class TalentsComp extends CCComp {
this.lbl_points.string = `${remaining}/${remaining + invested}`;
}
// 各层已投入点数（数组索引对应层 1~5）
for (let tier = 1; tier <= this.lbl_tier_points.length; tier++) {
const lbl = this.lbl_tier_points[tier - 1];
if (lbl) {
lbl.string = `${getTalentTierInvestedPoints(levels, tier)}`;
}
}
// 天赋等级（Lv.x）与当前等级经验进度
const talentLv = smc.getTalentLevel();
if (this.lbl_lv) this.lbl_lv.string = `Lv.${talentLv}`;