feat(heroList): add fragment display and level text refresh

1. 新增英雄碎片数量文本与进度条UI组件绑定和显示逻辑
2. 新增refreshLv方法统一刷新英雄等级数字,移除Lv.前缀
3. 优化卡牌组件注释,补充碎片管理职责
4. 统一英雄列表面板刷新所有卡牌的可升级标识和等级、碎片状态
This commit is contained in:
panFD
2026-09-04 22:25:50 +08:00
parent 3ae6a69c67
commit a7223669cc
4 changed files with 2381 additions and 3780 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -3,10 +3,10 @@
* @description 英雄图鉴卡预制体组件(UI 视图层)
*
* 职责:
* 1. 管理英雄图鉴中单张英雄卡牌的 **显示**(名称、图标动画、卡池等级、英雄等级)。
* 1. 管理英雄图鉴中单张英雄卡牌的 **显示**(名称、图标动画、卡池等级、英雄等级、碎片进度)。
* 2. 接收英雄 UUID 并渲染对应卡面。
* 3. 点击卡牌时通过事件通知父组件(HerosListComp)切换选中英雄详情。
* 4. 英雄碎片满足升级条件时显示 canup 标识。
* 4. 英雄碎片满足升级条件时显示 canup 标识,并同步刷新碎片数量文本与进度条。
*
* 关键设计:
* - 轻量展示组件,仅用于英雄展示,无拖拽使用、无锁定、无费用扣除等交互。
@@ -20,13 +20,13 @@
* - smc —— 全局单例,访问图标图集缓存与英雄局外等级
*/
import { mLogger } from "../common/Logger";
import { _decorator, AnimationClip, EventTouch, Label, Node, NodeEventType, Sprite, SpriteFrame, Tween, tween, UIOpacity, Vec3, resources } from "cc";
import { _decorator, AnimationClip, EventTouch, Label, Node, NodeEventType, Sprite, SpriteFrame, Tween, tween, UIOpacity, Vec3, resources, ProgressBar } 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 { oops } from "db://oops-framework/core/Oops";
import { HeroInfo } from "../common/config/heroSet";
import { getLvColor, RARITY_BG_COLORS } from "../common/config/GameSet";
import { canHeroUpgrade } from "../common/config/heroUpSet";
import { canHeroUpgrade, getHeroUpgradeState } from "../common/config/heroUpSet";
import { GameEvent } from "../common/config/GameEvent";
import { smc } from "../common/SingletonModuleComp";
@@ -65,6 +65,14 @@ export class CardLiteComp extends CCComp {
@property(Node)
canup_node: Node = null!
/** 碎片数量文本(显示 "当前碎片/升级所需碎片") */
@property(Label)
frag_label: Label = null!
/** 碎片进度条(fill = 当前碎片 / 升级所需碎片,满级时满格) */
@property(ProgressBar)
frag_progress: ProgressBar = null!
// ======================== 运行时状态 ========================
card_uuid: number = 0
@@ -122,6 +130,7 @@ export class CardLiteComp extends CCComp {
this.card_uuid = 0;
this.applyEmptyUI();
if (this.canup_node) this.canup_node.active = false;
this.updateFragmentsUI(false);
this.node.active = false;
}
@@ -137,6 +146,43 @@ export class CardLiteComp extends CCComp {
}
const growth = smc.getHeroGrowth(this.card_uuid);
this.canup_node.active = canHeroUpgrade(growth.lv, growth.fragments);
this.updateFragmentsUI(true);
}
/**
* 刷新卡片上的等级数字(局外成长等级)。
* 升级后由 HerosListComp 统一调用,避免卡片重复渲染整个 UI。
*/
refreshLv() {
if (!this.hasCard() || !this.lvl_node) return;
const hero = HeroInfo[this.card_uuid];
const heroLv = Math.max(1, smc.getHeroOuterLv(this.card_uuid) || hero?.lv || 1);
this.lvl_node.string = `${heroLv}`;
}
/**
* 刷新碎片文本与进度条:显示 "当前碎片/升级所需碎片",进度为 fragments/need。
* 满级时进度条满格并显示 "MAX"。
* @param visible 是否显示碎片区域(clear 时隐藏)
*/
private updateFragmentsUI(visible: boolean) {
if (this.frag_label) {
this.frag_label.node.active = visible;
if (visible) {
const growth = smc.getHeroGrowth(this.card_uuid);
const state = getHeroUpgradeState(growth.lv, growth.fragments);
this.frag_label.string = state.isMaxLv ? "MAX" : `${state.fragments}/${state.needFragments}`;
}
}
if (this.frag_progress) {
this.frag_progress.node.active = visible;
if (visible) {
const growth = smc.getHeroGrowth(this.card_uuid);
const state = getHeroUpgradeState(growth.lv, growth.fragments);
// 未满级时 needFragments 必然 > 0(来自升级表配置),直接除即可
this.frag_progress.progress = state.isMaxLv ? 1 : Math.min(state.fragments / state.needFragments, 1);
}
}
}
/**
@@ -200,7 +246,7 @@ export class CardLiteComp extends CCComp {
// 等级:局外成长等级
if (this.lvl_node) {
const heroLv = Math.max(1, smc.getHeroOuterLv(this.card_uuid) || hero?.lv || 1);
this.lvl_node.string = `Lv.${heroLv}`;
this.lvl_node.string = `${heroLv}`;
this.lvl_node.node.active = true;
}

View File

@@ -175,11 +175,13 @@ export class HerosListComp extends CCComp {
this.refreshAllCardsCanUp()
}
/** 升级/碎片变动后统一刷新所有卡片的可升级标识(升级入口仅在本面板,无需卡片各自监听事件) */
/** 升级/碎片变动后统一刷新所有卡片的可升级标识与等级数字(升级入口仅在本面板,无需卡片各自监听事件) */
private refreshAllCardsCanUp() {
if (!this.cards_node) return
this.cards_node.children.forEach(cardNode => {
cardNode.getComponent(CardLiteComp)?.refreshCanUp()
const comp = cardNode.getComponent(CardLiteComp)
comp?.refreshCanUp()
comp?.refreshLv()
})
}