fix(heroBox): 修复英雄面板属性显示错位与展开收起高度异常

1.  修正了暴击率/击晕率的文本和节点名称混淆问题
2.  添加属性栏容器节点，实现展开收起时动态调整高度
3.  修复预制体中属性行的绑定关系错乱问题

assets/resources/gui/element/sbox.prefab

@@ -2946,10 +2946,7 @@
       "b": 255,
       "a": 255
     },
-    "_spriteFrame": {
-      "__uuid__": "cb93c900-b440-4571-91d1-7da1636e3d73@fcdc9",
-      "__expectedType__": "cc.SpriteFrame"
-    },
+    "_spriteFrame": null,
     "_type": 1,
     "_fillType": 0,
     "_sizeMode": 0,
@@ -3085,10 +3082,7 @@
       "b": 255,
       "a": 255
     },
-    "_spriteFrame": {
-      "__uuid__": "cb93c900-b440-4571-91d1-7da1636e3d73@fcdc9",
-      "__expectedType__": "cc.SpriteFrame"
-    },
+    "_spriteFrame": null,
     "_type": 1,
     "_fillType": 0,
     "_sizeMode": 0,
@@ -3224,10 +3218,7 @@
       "b": 255,
       "a": 255
     },
-    "_spriteFrame": {
-      "__uuid__": "cb93c900-b440-4571-91d1-7da1636e3d73@fcdc9",
-      "__expectedType__": "cc.SpriteFrame"
-    },
+    "_spriteFrame": null,
     "_type": 1,
     "_fillType": 0,
     "_sizeMode": 0,
@@ -3363,10 +3354,7 @@
       "b": 255,
       "a": 255
     },
-    "_spriteFrame": {
-      "__uuid__": "cb93c900-b440-4571-91d1-7da1636e3d73@fcdc9",
-      "__expectedType__": "cc.SpriteFrame"
-    },
+    "_spriteFrame": null,
     "_type": 1,
     "_fillType": 0,
     "_sizeMode": 0,

assets/script/game/map/HeroBoxComp.ts

@@ -1,47 +1,36 @@
 /**
  * @file HeroBoxComp.ts
- * @description 英雄卡池单个卡槽组件（UI 视图层 + 购买/召唤逻辑）
+ * @description 英雄面板单个英雄盒组件（UI 视图层）
  *
  * 职责：
- *   1. 渲染单个英雄卡的显示信息（名称、等级、描述、图标、费用），
- *      展示方式与 SCardComp 一致（图集静态图标 + ★等级 + 描述词条）。
- *      同时支持动态升级卡（SpecialUpgrade + target_hero_eid）按英雄卡样式渲染。
- *   2. 处理购买点击 → UseHeroCard 上限校验(guard) → 扣费 → 派发 CallHero 召唤英雄。
- *      特殊卡（升级/刷新）则派发 UseSpecialCard。
- *   3. 使用成功后派发 CardUsed 事件，通知 MissionCardComp 刷新英雄卡池。
+ *   1. 同步显示一个已登场英雄的详细信息（图标 / 名称 / 等级 / AP / HP / 描述）。
+ *   2. 由 MissionCardComp 实例化到 herosBoxNode 下，最多 3 个，与场上英雄一一对应。
+ *   3. 英雄卖出 / 死亡后槽位保留，通过 applyEmpty() 显示为空英雄信息。
  *
- * 与 SCardComp 的差异：
- *   - 数据源为 HeroInfo（heroSet），而非 SkillCardList / SkillSet。
- *   - 购买前需通过 GameEvent.UseHeroCard 做英雄数量上限校验。
- *   - 英雄卡效果事件为 GameEvent.CallHero，而非 UseSkillCard。
+ * 依赖：
+ *   - HeroAttrsComp —— 英雄属性数据模型
+ *   - HeroInfo（heroSet）—— 英雄静态配置
  */
 import { mLogger } from "../common/Logger";
-import { _decorator, Node, Sprite, Label, NodeEventType, Vec3, Tween, tween, UIOpacity, SpriteFrame, resources, AnimationClip } from "cc";
+import { _decorator, Node, Sprite, Label, resources, AnimationClip, SpriteFrame, NodeEventType, UITransform } 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 { CardConfig, CardType } from "../common/config/CardSet";
-import { HeroInfo } from "../common/config/heroSet";
 import { oops } from "db://oops-framework/core/Oops";
-import { GameEvent } from "../common/config/GameEvent";
-import { smc } from "../common/SingletonModuleComp";
-import { UIID } from "../common/config/GameUIConfig";
+import { HeroInfo } from "../common/config/heroSet";
 import { HeroAttrsComp } from "../hero/HeroAttrsComp";
-import { FieldSkillType } from "../common/config/SkillSet";
-import { FieldSkillHelper } from "../hero/FieldSkillHelper";
-import { MissionEconomy } from "./MissionEconomy";
+import { getLvColor } from "../common/config/GameSet";
 
 const { ccclass, property } = _decorator;
 
 /**
- * HeroBoxComp —— 英雄卡池单个英雄卡项
+ * HeroBoxComp —— 英雄面板单个英雄信息盒
  *
- * 由 MissionCardComp.cacheCardComps() 实例化。
- * 以图标 + 名称 + 描述词条 + 购买按钮的形式呈现。
+ * 与场上英雄一一绑定（eid），英雄移除后显示空状态。
  */
 @ccclass('HeroBoxComp')
 @ecs.register('HeroBoxComp', false)
 export class HeroBoxComp extends CCComp {
-    private debugMode: boolean = true;
+    private debugMode: boolean = false;
 
     // ======================== 编辑器绑定节点 ========================
 
@@ -58,12 +47,146 @@ export class HeroBoxComp extends CCComp {
     @property(Label)
     private level_label: Label = null;
 
+    // ======================== 战斗信息标签（总值 + 附加值） ========================
 
+    /** 攻击总值 */
+    @property(Label)
+    private ap_all_label: Label = null;
+    /** 攻击附加值 */
+    @property(Label)
+    private ap_plus_label: Label = null;
+    /** 生命总值 */
+    @property(Label)
+    private hp_all_label: Label = null;
+    /** 生命附加值 */
+    @property(Label)
+    private hp_plus_label: Label = null;
+    /** 暴击率总值（百分点） */
+    @property(Label)
+    private crt_all_label: Label = null;
+    /** 暴击率附加值 */
+    @property(Label)
+    private crt_plus_label: Label = null;
+    /** 击退率总值（百分点） */
+    @property(Label)
+    private knockback_all_label: Label = null;
+    /** 击退率附加值 */
+    @property(Label)
+    private knockback_plus_label: Label = null;
+    /** 风怒率总值（百分点） */
+    @property(Label)
+    private wfuny_all_label: Label = null;
+    /** 风怒率附加值 */
+    @property(Label)
+    private wfuny_plus_label: Label = null;
+    /** 击晕率总值（百分点） */
+    @property(Label)
+    private stun_all_label: Label = null;
+    /** 击晕率附加值 */
+    @property(Label)
+    private stun_plus_label: Label = null;
+    /** 攻击速度总值（攻击间隔，秒；速度提升时间隔变短，附加值为负） */
+    @property(Label)
+    private speed_all_label: Label = null;
+    /** 攻击速度附加值 */
+    @property(Label)
+    private speed_plus_label: Label = null;
+    /** 冰冻率总值（百分点） */
+    @property(Label)
+    private freeze_all_label: Label = null;
+    /** 冰冻率附加值 */
+    @property(Label)
+    private freeze_plus_label: Label = null;
+    /** 穿透率总值（百分点） */
+    @property(Label)
+    private puncture_all_label: Label = null;
+    /** 穿透率附加值 */
+    @property(Label)
+    private puncture_plus_label: Label = null;
+    /** 暴击伤害总值（额外暴伤，百分点） */
+    @property(Label)
+    private crit_dmg_all_label: Label = null;
+    /** 暴击伤害附加值 */
+    @property(Label)
+    private crit_dmg_plus_label: Label = null;
+
+    // ======================== 更多属性折叠栏 ========================
+
+    /** 属性栏容器（展开/收起时动态调整高度） */
+    @property(Node)
+    private attr_box: Node = null;
+    /** 更多按钮（点击展开/收起次级属性栏） */
+    @property(Node)
+    private more_btn: Node = null;
+    /** 击晕信息栏（默认隐藏） */
+    @property(Node)
+    private stun_row: Node = null;
+    /** 冰冻信息栏（默认隐藏） */
+    @property(Node)
+    private freeze_row: Node = null;
+    /** 击退信息栏（默认隐藏） */
+    @property(Node)
+    private knockback_row: Node = null;
+    /** 穿透信息栏（默认隐藏） */
+    @property(Node)
+    private puncture_row: Node = null;
+    /** 风怒信息栏（默认隐藏） */
+    @property(Node)
+    private wfuny_row: Node = null;
+
+    /** 次级属性栏是否展开 */
+    private moreExpanded: boolean = false;
+    /** 属性栏收起高度 */
+    private static readonly ATTR_BOX_HEIGHT_COLLAPSED = 125;
+    /** 属性栏展开高度 */
+    private static readonly ATTR_BOX_HEIGHT_EXPANDED = 210;
+
+    // ======================== 运行时状态 ========================
+
+    /** 绑定的英雄实体 ID（0 表示空槽位） */
+    private eid: number = 0;
+    /** 绑定的英雄属性数据模型引用 */
+    private model: HeroAttrsComp | null = null;
+    /** 图标视觉令牌（异步加载竞态保护） */
+    private iconVisualToken: number = 0;
+    /** 当前显示的英雄 UUID（避免相同 UUID 重复加载动画） */
+    private iconHeroUuid: number = 0;
 
     // ======================== 生命周期 ========================
 
     onLoad() {
+        // 次级属性栏默认收起
+        this.setMoreRowsVisible(false);
+        this.more_btn?.on(NodeEventType.TOUCH_END, this.onMoreBtnClick, this);
+    }
 
+    onDestroy() {
+        if (this.more_btn && this.more_btn.isValid) {
+            this.more_btn.off(NodeEventType.TOUCH_END, this.onMoreBtnClick, this);
+        }
+    }
+
+    /** 更多按钮点击：切换次级属性栏显示/隐藏 */
+    private onMoreBtnClick() {
+        oops.audio.playEffect("music/button");
+        this.moreExpanded = !this.moreExpanded;
+        this.setMoreRowsVisible(this.moreExpanded);
+    }
+
+    /** 设置 5 个次级属性栏（击晕/冰冻/击退/穿透/风怒）的可见性，并同步调整属性栏高度 */
+    private setMoreRowsVisible(visible: boolean) {
+        const rows = [this.stun_row, this.freeze_row, this.knockback_row, this.puncture_row, this.wfuny_row];
+        for (const row of rows) {
+            if (row && row.isValid) {
+                row.active = visible;
+            }
+        }
+        // 展开/收起时切换属性栏高度（125 ↔ 210）
+        if (this.attr_box && this.attr_box.isValid) {
+            const transform = this.attr_box.getComponent(UITransform) || this.attr_box.addComponent(UITransform);
+            const height = visible ? HeroBoxComp.ATTR_BOX_HEIGHT_EXPANDED : HeroBoxComp.ATTR_BOX_HEIGHT_COLLAPSED;
+            transform.setContentSize(transform.width, height);
+        }
     }
 
     /** ECS 组件移除时销毁节点 */
@@ -72,4 +195,198 @@ export class HeroBoxComp extends CCComp {
             this.node.destroy();
         }
     }
+
+    // ======================== 数据绑定 ========================
+
+    /** 当前槽位是否绑定了英雄 */
+    public get hasHero(): boolean {
+        return this.eid > 0 && !!this.model;
+    }
+
+    /** 当前绑定的英雄实体 ID */
+    public get bindEid(): number {
+        return this.eid;
+    }
+
+    /**
+     * 绑定场上英雄并刷新显示。
+     * @param eid   英雄 ECS 实体 ID
+     * @param model 英雄属性组件
+     */
+    public bindHero(eid: number, model: HeroAttrsComp) {
+        this.eid = eid;
+        this.model = model;
+        this.node.active = true;
+        this.refresh();
+    }
+
+    /** 清空槽位，显示空英雄信息 */
+    public applyEmpty() {
+        this.eid = 0;
+        this.model = null;
+        this.iconHeroUuid = 0;
+        this.iconVisualToken += 1;
+
+        if (this.name_label && this.name_label.isValid) {
+            this.name_label.string = "";
+        }
+        if (this.level_label && this.level_label.isValid) {
+            this.level_label.string = "";
+        }
+        if (this.icon_node && this.icon_node.isValid) {
+            const sprite = this.icon_node.getComponent(Sprite) || this.icon_node.getComponentInChildren(Sprite);
+            if (sprite) sprite.spriteFrame = null;
+        }
+        this.clearStatRow(this.ap_all_label, this.ap_plus_label);
+        this.clearStatRow(this.hp_all_label, this.hp_plus_label);
+        this.clearStatRow(this.crt_all_label, this.crt_plus_label);
+        this.clearStatRow(this.knockback_all_label, this.knockback_plus_label);
+        this.clearStatRow(this.wfuny_all_label, this.wfuny_plus_label);
+        this.clearStatRow(this.stun_all_label, this.stun_plus_label);
+        this.clearStatRow(this.speed_all_label, this.speed_plus_label);
+        this.clearStatRow(this.freeze_all_label, this.freeze_plus_label);
+        this.clearStatRow(this.puncture_all_label, this.puncture_plus_label);
+        this.clearStatRow(this.crit_dmg_all_label, this.crit_dmg_plus_label);
+    }
+
+    /**
+     * 刷新显示：同步英雄等级、名称、AP / HP、描述与图标。
+     * 绑定的英雄实体已失效时自动切换为空状态。
+     */
+    public refresh() {
+        if (!this.model || !(this.model as any).ent) {
+            this.applyEmpty();
+            return;
+        }
+
+        const heroUuid = this.model.hero_uuid ?? 0;
+        const hero = HeroInfo[heroUuid];
+
+        // ---- 名称 ----
+        if (this.name_label && this.name_label.isValid) {
+            this.name_label.string = this.model.hero_name ?? "";
+        }
+
+        // ---- 等级 ----
+        if (this.level_label && this.level_label.isValid) {
+            const lv = this.model.lv ?? 1;
+            this.level_label.string = `Lv.${lv}`;
+            this.level_label.color = getLvColor(lv);
+        }
+
+        // ---- AP / HP ----
+        const finalAp = Math.max(0, Math.floor(this.model.getFinalAp()));
+        const baseAp = Math.max(0, Math.floor(this.model.base_ap ?? 0));
+        this.setStatRow(this.ap_all_label, this.ap_plus_label, finalAp, finalAp - baseAp);
+
+        const finalHp = Math.max(0, Math.floor(this.model.getFinalHpMax()));
+        const baseHp = Math.max(0, Math.floor(this.model.base_hp ?? 0));
+        this.setStatRow(this.hp_all_label, this.hp_plus_label, finalHp, finalHp - baseHp);
+
+        // ---- 暴击率 / 击退率 / 风怒率 / 击晕率（百分点，附加 = 最终 - 基础配置值） ----
+        const finalCrit = this.model.getFinalCritical();
+        this.setStatRow(this.crt_all_label, this.crt_plus_label, finalCrit, finalCrit - (this.model.critical ?? 0), "%");
+
+        const finalKnockback = this.model.getFinalKnockbackChance();
+        this.setStatRow(this.knockback_all_label, this.knockback_plus_label, finalKnockback, finalKnockback - (this.model.knockback_chance ?? 0), "%");
+
+        const finalWfuny = this.model.getFinalWindFury();
+        this.setStatRow(this.wfuny_all_label, this.wfuny_plus_label, finalWfuny, finalWfuny - (this.model.wfuny ?? 0), "%");
+
+        const finalStun = this.model.getFinalStunChance();
+        this.setStatRow(this.stun_all_label, this.stun_plus_label, finalStun, finalStun - (this.model.stun_chance ?? 0), "%");
+
+        // ---- 攻击速度（攻击间隔，秒；速度提升 → 间隔变短，附加值为负） ----
+        const skillIds = this.model.getSkillIds();
+        const displaySkillId = skillIds[1] ?? skillIds[0] ?? 0;
+        const baseCd = displaySkillId ? (this.model.skills[displaySkillId]?.cd ?? 0) : 0;
+        const finalCd = displaySkillId ? this.model.getEffectiveSkillCd(displaySkillId) : 0;
+        this.setStatRow(this.speed_all_label, this.speed_plus_label, finalCd, finalCd - baseCd, "s", 1);
+
+        // ---- 冰冻率 / 穿透率（百分点，附加 = 最终 - 基础配置值） ----
+        const finalFreeze = this.model.getFinalFreezeChance();
+        this.setStatRow(this.freeze_all_label, this.freeze_plus_label, finalFreeze, finalFreeze - (this.model.freeze_chance ?? 0), "%");
+
+        const finalPuncture = this.model.getFinalPunctureChance();
+        this.setStatRow(this.puncture_all_label, this.puncture_plus_label, finalPuncture, finalPuncture - (this.model.puncture_chance ?? 0), "%");
+
+        // ---- 暴击伤害（额外暴伤，百分点，附加 = 最终 - 基础配置值） ----
+        const finalCritDmg = this.model.getFinalCritDamage();
+        this.setStatRow(this.crit_dmg_all_label, this.crit_dmg_plus_label, finalCritDmg, finalCritDmg - (this.model.crit_damage ?? 0), "%");
+
+        // ---- 图标（UUID 变化时重新加载首帧动画） ----
+        if (hero && heroUuid !== this.iconHeroUuid) {
+            this.iconHeroUuid = heroUuid;
+            this.iconVisualToken += 1;
+            this.updateHeroIcon(hero.path, heroUuid, this.iconVisualToken);
+        }
+    }
+
+    // ======================== 内部工具 ========================
+
+    /**
+     * 写入一行战斗信息（总值 + 附加值）。
+     * 总值始终显示（0 不隐藏）；附加值为 0 时隐藏，正/负分别显示 (+x) / (x)。
+     *
+     * @param allLabel  总值标签（可为空，空时跳过）
+     * @param plusLabel 附加值标签（可为空）
+     * @param total     总数值（最终生效值）
+     * @param bonus     附加数值（最终值 - 基础值）
+     * @param suffix    数值后缀（如 "%"）
+     * @param decimals  保留小数位数（默认 0，取整）
+     */
+    private setStatRow(allLabel: Label | null, plusLabel: Label | null, total: number, bonus: number, suffix: string = "", decimals: number = 0) {
+        const fmt = (v: number) => decimals > 0 ? v.toFixed(decimals) : `${Math.floor(v)}`;
+        if (allLabel && allLabel.isValid) {
+            allLabel.string = `${fmt(total)}${suffix}`;
+        }
+        if (plusLabel && plusLabel.isValid) {
+            if (bonus !== 0) {
+                plusLabel.string = bonus > 0 ? `(+${fmt(bonus)}${suffix})` : `(${fmt(bonus)}${suffix})`;
+            } else {
+                plusLabel.string = "";
+            }
+        }
+    }
+
+    /** 清空一行战斗信息（空槽位时使用） */
+    private clearStatRow(allLabel: Label | null, plusLabel: Label | null) {
+        if (allLabel && allLabel.isValid) allLabel.string = "";
+        if (plusLabel && plusLabel.isValid) plusLabel.string = "";
+    }
+
+    /**
+     * 加载英雄 idle 动画首帧作为静态图标。
+     * @param path  英雄美术资源名（HeroInfo.path）
+     * @param uuid  英雄 UUID（竞态校验用）
+     * @param token 视觉令牌（竞态保护）
+     */
+    private updateHeroIcon(path: string, uuid: number, token: number) {
+        if (!this.icon_node || !this.icon_node.isValid) return;
+        const sprite = this.icon_node.getComponent(Sprite) || this.icon_node.getComponentInChildren(Sprite);
+        if (sprite) sprite.spriteFrame = null;
+
+        resources.load(`game/heros/hero/${path}/idle`, AnimationClip, (err, clip) => {
+            if (err || !clip) return;
+            // 异步加载期间槽位可能已被复用 / 清空
+            if (token !== this.iconVisualToken) return;
+            if (this.iconHeroUuid !== uuid) return;
+            if (!this.icon_node || !this.icon_node.isValid) return;
+            const target = this.icon_node.getComponent(Sprite) || this.icon_node.getComponentInChildren(Sprite);
+            if (!target || !target.isValid) return;
+            // 帧动画数据存于 spriteFrame 轨道的 _channel._curve._values（裸 SpriteFrame 数组）
+            let firstFrame: SpriteFrame | undefined;
+            for (const track of clip.tracks) {
+                const curve = (track as unknown as { channel?: { curve?: { _values?: unknown[] } } }).channel?.curve;
+                const frame = curve?._values?.[0];
+                if (frame instanceof SpriteFrame) {
+                    firstFrame = frame;
+                    break;
+                }
+            }
+            if (firstFrame) {
+                target.spriteFrame = firstFrame;
+            }
+        });
+    }
 }

assets/script/game/map/MissionCardComp.ts

@@ -45,6 +45,7 @@ import { drawItemCards } from "../common/config/ICardSet";
 import { drawSkillCards } from "../common/config/SCardSet";
 import { CHeroComp } from "./CHeroComp";
 import { EquipListComp } from "./EquipListComp";
+import { HeroBoxComp } from "./HeroBoxComp";
 import { SCardComp } from "./SCardComp";
 import { oops } from "db://oops-framework/core/Oops";
 import { HeroAttrsComp } from "../hero/HeroAttrsComp";
@@ -143,7 +144,7 @@ export class MissionCardComp extends CCComp {
     @property(Prefab)
     itemPrefab: Prefab = null!
     /** 卡池升级按钮节点（已废弃，保留节点引用防止 editor 报错） */
-    
+
     @property(Node)
     cards_up: Node = null!
     /** 金币显示节点（含 icon + num 子节点） */
@@ -173,6 +174,8 @@ export class MissionCardComp extends CCComp {
 
     /** 三个槽位对应的 CHeroComp 控制器缓存（有序数组） */
     private cardComps: CHeroComp[] = [];
+    /** 英雄面板 HeroBoxComp 控制器缓存（与场上英雄一一对应，最多 3 个） */
+    private heroBoxComps: HeroBoxComp[] = [];
     /** 装备卡槽控制器缓存 */
     private equipCardComps: EquipListComp[] = [];
     /** 技能卡槽控制器缓存 */
@@ -318,6 +321,9 @@ export class MissionCardComp extends CCComp {
         this.hasCalledHero = false;
         this.updatePanelButtonsInteractable();
 
+        // 初始化英雄信息盒（3 个空槽位）
+        this.refreshHeroBoxSlots();
+
         mLogger.log(this.debugMode, "MissionCardComp", "mission start");
     }
 
@@ -327,6 +333,11 @@ export class MissionCardComp extends CCComp {
         this.clearEquipments();
         this.clearSkillCards();
         this.clearShopItems();
+        for (const comp of this.heroBoxComps) {
+            if (comp && comp.node && comp.node.isValid) {
+                comp.applyEmpty();
+            }
+        }
         if (this.node && this.node.isValid) {
             this.node.active = false;
         }
@@ -368,6 +379,7 @@ export class MissionCardComp extends CCComp {
         oops.message.on(GameEvent.MasterCalled, this.onMasterCalled, this);
         oops.message.on(GameEvent.HeroDead, this.onHeroDead, this);
         oops.message.on(GameEvent.HeroSell, this.onHeroSell, this);
+        oops.message.on(GameEvent.HeroLvUp, this.onHeroLvUp, this);
         oops.message.on(GameEvent.UseHeroCard, this.onUseHeroCard, this);
         // 监听装备购买事件，追踪已购记录
         oops.message.on(GameEvent.UseEquipCard, this.onUseEquipCard, this);
@@ -610,6 +622,7 @@ export class MissionCardComp extends CCComp {
         oops.message.off(GameEvent.MasterCalled, this.onMasterCalled, this);
         oops.message.off(GameEvent.HeroDead, this.onHeroDead, this);
         oops.message.off(GameEvent.HeroSell, this.onHeroSell, this);
+        oops.message.off(GameEvent.HeroLvUp, this.onHeroLvUp, this);
         oops.message.off(GameEvent.UseHeroCard, this.onUseHeroCard, this);
         oops.message.off(GameEvent.UseEquipCard, this.onUseEquipCard, this);
         oops.message.off(GameEvent.UseItemCard, this.onUseItemCard, this);
@@ -681,16 +694,26 @@ export class MissionCardComp extends CCComp {
             smc.finish_guides.push(3);
             oops.gui.remove(UIID.Guide3);
         }
+
+        // 英雄登场后同步英雄信息盒
+        this.refreshHeroBoxSlots();
     }
 
     /** 英雄死亡事件回调：刷新面板列表并更新英雄数量 UI */
     private onHeroDead() {
         this.updateHeroNumUI(true, false);
+        this.refreshHeroBoxSlots();
     }
 
-    /** 英雄被出售事件回调：更新英雄数量 UI */
+    /** 英雄被出售事件回调：更新英雄数量 UI 并清空对应英雄信息盒 */
     private onHeroSell() {
         this.updateHeroNumUI(true, false);
+        this.refreshHeroBoxSlots();
+    }
+
+    /** 英雄升级事件回调：刷新英雄信息盒显示 */
+    private onHeroLvUp() {
+        this.refreshHeroBoxSlots();
     }
 
     /**
@@ -930,6 +953,71 @@ export class MissionCardComp extends CCComp {
         this.slideToPanel(0);
     }
 
+    // ======================== 英雄信息盒（herosBoxNode） ========================
+
+    /**
+     * 同步英雄信息盒槽位与场上英雄：
+     *   1. 确保 herosBoxNode 下存在 3 个 HeroBoxComp 槽位（复用 + 实例化补充）。
+     *   2. 查询当前存活英雄列表，按序绑定到槽位。
+     *   3. 多余槽位显示空英雄信息。
+     *
+     * Why: 英雄召唤 / 死亡 / 卖出 / 升级后调用，保证面板与场上一一对应。
+     */
+    private refreshHeroBoxSlots() {
+        if (!this.herosBoxNode || !this.herosBoxNode.isValid) return;
+
+        this.ensureHeroBoxSlots(3);
+
+        // 查询场上存活英雄（含复活中的实体，按 eid 升序保证稳定顺序）
+        const actors: Array<{ eid: number, model: HeroAttrsComp }> = [];
+        ecs.query(ecs.allOf(HeroAttrsComp)).forEach((entity: ecs.Entity) => {
+            const model = entity.get(HeroAttrsComp);
+            if (!model) return;
+            if (model.fac !== FacSet.HERO) return;
+            if (model.is_dead) return;
+            actors.push({ eid: entity.eid, model });
+        });
+        actors.sort((a, b) => a.eid - b.eid);
+
+        for (let i = 0; i < this.heroBoxComps.length; i++) {
+            const comp = this.heroBoxComps[i];
+            if (!comp || !comp.node || !comp.node.isValid) continue;
+            const actor = actors[i];
+            if (actor) {
+                comp.bindHero(actor.eid, actor.model);
+            } else {
+                comp.applyEmpty();
+            }
+        }
+
+        this.resizeListBox(this.herosBoxNode, Math.max(actors.length, 1));
+    }
+
+    /**
+     * 确保英雄信息盒槽位数量足够。
+     * 优先复用 herosBoxNode 现有子节点，不足时从 heroPrefab 实例化补充。
+     */
+    private ensureHeroBoxSlots(targetCount: number) {
+        if (!this.herosBoxNode || !this.herosBoxNode.isValid) return;
+
+        // 刷新缓存
+        this.heroBoxComps = this.herosBoxNode.children
+            .map(node => node.getComponent(HeroBoxComp))
+            .filter((comp): comp is HeroBoxComp => !!comp);
+
+        // 补充实例化不足的槽位
+        while (this.heroBoxComps.length < targetCount) {
+            if (!this.heroPrefab) break;
+            const node = instantiate(this.heroPrefab);
+            // 先禁用根节点 Widget 再挂到父节点，避免 lateUpdate 覆盖 position
+            const widget = node.getComponent(Widget);
+            if (widget) widget.enabled = false;
+            this.herosBoxNode.addChild(node);
+            const comp = node.getComponent(HeroBoxComp) || node.addComponent(HeroBoxComp);
+            this.heroBoxComps.push(comp);
+        }
+    }
+
     /**
      * 显示卡牌面板：从底部向上滑入到 Y=0
      */
@@ -1401,7 +1489,7 @@ export class MissionCardComp extends CCComp {
         }
         // 滑动到英雄面板
         this.slideToPanel(0);
-        
+
         mLogger.log(this.debugMode, "MissionCardComp", "enterPreparePhase herosPanNode", {
             herosPanNodeActive: this.herosPanNode?.active,
             herosPanNodePos: this.herosPanNode?.position,
@@ -1853,6 +1941,7 @@ export class MissionCardComp extends CCComp {
 
         // 关键：在 reset/销毁 时将 Map 置空，彻底切断引用
         this.cardComps = [];
+        this.heroBoxComps = [];
         this.skillCardComps = [];
         this.purchasedEquipUuids.clear();
         this.purchasedItemUuids.clear();