pixelheros/.trae/documents/plan_hero_ui_refactor.md

重构场上英雄UI表现及交互计划

1. 目标与现状分析

现状： 目前游戏中 HInfoComp.ts 负责在界面下方显示场上英雄的信息（生命、攻击、出售），由 MissionCardComp 管理 6 个固定槽位。 HeroViewComp.ts 负责战斗场景中英雄实体的动画表现。

目标：

1. 保留 HInfoComp.ts 组件及预制体，但取消其在底部的常驻显示，将其改造为弹窗形式（类似 IBoxComp）。
2. 在战斗或准备阶段，玩家直接点击场上的英雄模型（HeroViewComp）时，弹出 HInfoComp 面板。
3. 清理 MissionCardComp.ts 中管理底层 HInfoComp 的旧逻辑。

2. 具体修改步骤

2.1 注册 HInfo 为独立弹窗

• 修改 assets/script/game/common/config/GameUIConfig.ts：
  • 在 UIID 枚举中添加 HInfo。
  • 在 UIConfigData 中注册：[UIID.HInfo]: { layer: LayerType.UI, prefab: "gui/element/hnode" }。

2.2 改造 HInfoComp.ts

• 数据传入：添加 onAdded(args: { eid: number })，根据 eid 查询 HeroAttrsComp 实体进行数据绑定。
• 自驱动刷新：原先由外部驱动刷新，现在添加 update(dt: number) 生命周期，在内部调用 this.refresh() 以保持血量等信息实时更新。
• 移除旧逻辑：删除 node_index、refreshByNodeIndex 等固定槽位相关的代码。
• 交互恢复：取消注释 bindEvents 和 unbindEvents，恢复出售按钮的点击事件。出售完成后调用 oops.gui.remove(UIID.HInfo)。打开 IBox 的点击逻辑可保持不变（或者作为详情按钮）。
• 添加关闭机制：考虑到它是弹窗，可以添加一个点击非按钮区域关闭自身的功能，或者点击英雄之外的区域关闭。为简单起见，可以暂时复用点击面板打开 IBox（同时关闭 HInfo），并在 HInfo 添加额外的关闭按钮，或由 UI 框架自动处理（如果注册为 PopUp 并带有背景）。如果它是纯 UI，可以点击其他地方关闭。这里我们让它在打开 IBox 后关闭自己：oops.gui.remove(UIID.HInfo)。

2.3 清理 MissionCardComp.ts

• 移除属性：删除 @property(Node) hero_info_node 和 @property(Prefab) hero_info_prefab 及其编辑器绑定。
• 移除内部状态：删除 cachedHInfoComps 和 heroInfoSyncTimer。
• 移除生命周期调用：在 onLoad、update、onMissionStart、onMissionEnd、onDestroy、reset、enterPreparePhase、enterBattlePhase 中，删除所有涉及 HInfoComp 实例创建、刷新、显隐控制、销毁的代码。

2.4 修改 HeroViewComp.ts 添加点击交互

• 绑定事件：在 onLoad 中为英雄模型节点绑定点击事件 this.node.on(NodeEventType.TOUCH_END, this.onHeroClicked, this);，并在 reset 等清理处解绑。
• 点击回调逻辑：

  private onHeroClicked(event: EventTouch) {
      if (!this.model) return;
      if (this.model.fac !== FacSet.HERO) return; // 仅对玩家英雄生效
  
      const eid = this.ent?.eid;
      if (!eid) return;
  
      // 呼出英雄信息弹窗
      oops.gui.remove(UIID.HInfo);
      oops.gui.open(UIID.HInfo, { eid: eid });
  }
  

3. 验证步骤

1. 进入战斗，确认下方不再有常驻的英雄信息面板。
2. 点击场上的英雄模型，确认能弹出该英雄的 HInfoComp 弹窗。
3. 观察弹窗内的血量和攻击力是否能随战斗实时刷新。
4. 点击弹窗上的出售按钮，确认英雄消失、金币增加且弹窗关闭。
5. 点击弹窗上的信息区域，确认能弹出 IBoxComp 详情面板。