refactor(talent): 拆分天赋项组件并适配精灵图标

将原TalentsComp内的单个天赋项UI更新逻辑抽离为独立的TalentItemComp组件实现代码解耦,更新天赋配置将emoji图标替换为精灵图集资源键,重构TalentsComp的天赋列表渲染逻辑适配新的组件化方案
This commit is contained in:
walkpan
2026-05-11 15:34:31 +08:00
parent 78e325e8e5
commit 3dd72c13b4
5 changed files with 1059 additions and 561 deletions

View File

@@ -25,6 +25,7 @@ import { mLogger } from "../common/Logger";
import { smc } from "../common/SingletonModuleComp";
import { oops } from "../../../../extensions/oops-plugin-framework/assets/core/Oops";
import { TalentConfig, TalentInfo, TalentType } from "../common/config/TalentSet";
import { TalentItemComp } from "./TalentItemComp";
const { ccclass, property } = _decorator;
@@ -59,7 +60,7 @@ export class TalentsComp extends CCComp {
@property({ type: Node, tooltip: "天赋列表容器,用于动态添加天赋项" })
talents_content: Node = null!;
@property({ type: Prefab, tooltip: "天赋项预制体\n预制体结构要求:\n- 根节点\n - lbl_name (Label): 天赋名称\n - lbl_desc (Label): 天赋描述\n - lbl_level (Label): 当前等级\n - lbl_cost (Label): 升级消耗\n - btn_upgrade (Button): 升级按钮\n - pb_level (ProgressBar或一组节点): 等级进度展示(可选)" })
@property({ type: Prefab, tooltip: "" })
prefab_talent_item: Prefab = null!;
@property({ type: Button, tooltip: "看广告重置天赋按钮" })
@@ -143,57 +144,25 @@ export class TalentsComp extends CCComp {
TalentConfig.talents.forEach(talentInfo => {
let itemNode = instantiate(this.prefab_talent_item);
this.talents_content.addChild(itemNode);
this.updateTalentItem(itemNode, talentInfo, collection.talents[talentInfo.id as TalentType]);
let comp = itemNode.getComponent(TalentItemComp);
if (comp) {
comp.updateItem(talentInfo, collection.talents[talentInfo.id as TalentType], this.onUpgradeClicked.bind(this));
}
});
} else {
// 否则直接更新现有节点
TalentConfig.talents.forEach((talentInfo, index) => {
let itemNode = this.talents_content.children[index];
if (itemNode) {
this.updateTalentItem(itemNode, talentInfo, collection.talents[talentInfo.id as TalentType]);
let comp = itemNode.getComponent(TalentItemComp);
if (comp) {
comp.updateItem(talentInfo, collection.talents[talentInfo.id as TalentType], this.onUpgradeClicked.bind(this));
}
}
});
}
}
/** 更新单个天赋项的显示 */
private updateTalentItem(itemNode: Node, talentInfo: TalentInfo, currentLevel: number) {
let lblName = itemNode.getChildByName("lbl_name")?.getComponent(Label);
let lblDesc = itemNode.getChildByName("lbl_desc")?.getComponent(Label);
let lblLevel = itemNode.getChildByName("lbl_level")?.getComponent(Label);
let lblCost = itemNode.getChildByName("lbl_cost")?.getComponent(Label);
let btnUpgradeNode = itemNode.getChildByName("btn_upgrade");
let btnUpgrade = btnUpgradeNode?.getComponent(Button);
if (lblName) {
lblName.string = (talentInfo.icon ? `${talentInfo.icon} ` : '') + talentInfo.name;
}
if (lblDesc) {
let currentVal = currentLevel === 0 ? 0 : talentInfo.values[currentLevel - 1];
lblDesc.string = talentInfo.desc.replace('{value}', currentVal.toString());
}
if (lblLevel) lblLevel.string = `${currentLevel}/${talentInfo.maxLevel}`;
let isMax = currentLevel >= talentInfo.maxLevel;
let cost = isMax ? 0 : (talentInfo.costs[currentLevel] ?? 0);
let canUpgrade = !isMax && smc.vmdata.gold >= cost;
if (lblCost) {
lblCost.string = isMax ? "已满级" : `${cost}`;
}
if (btnUpgrade) {
btnUpgrade.interactable = canUpgrade;
// 清除旧的监听,避免重复绑定
btnUpgradeNode?.off(Button.EventType.CLICK);
btnUpgradeNode?.on(Button.EventType.CLICK, () => {
this.onUpgradeClicked(talentInfo.id, currentLevel);
}, this);
}
}
/** 点击升级按钮 */
private onUpgradeClicked(talentId: TalentType, currentLevel: number) {
const collection = smc.collection;