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

refactor(herobox): 重构英雄框更多按钮交互逻辑

Browse Source 
1. 将点击切换改为长按显示、松手隐藏的交互方式
2. 移除冗余的属性栏高度计算和状态按钮切换逻辑
3. 简化次级属性栏的显示隐藏实现
4. 更新相关注释和变量命名
This commit is contained in:
panFD
2026-08-01 20:35:44 +08:00
parent 096cae527b
commit 4532cb5c61
2 changed files with 2447 additions and 1875 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4234
assets/resources/gui/element/herobox.prefab
View File

File diff suppressed because it is too large Load Diff

88
assets/script/game/map/HeroBoxComp.ts
View File

@@ -12,7 +12,7 @@
* - HeroInfo（heroSet）—— 英雄静态配置
*/
import { mLogger } from "../common/Logger";
import { _decorator, Node, Sprite, Label, RichText, resources, AnimationClip, SpriteFrame, NodeEventType, UITransform, Tween, tween, Vec3 } from "cc";
import { _decorator, Node, Sprite, Label, RichText, resources, AnimationClip, SpriteFrame, NodeEventType, Tween, tween, Vec3 } 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";
@@ -124,35 +124,12 @@ export class HeroBoxComp extends CCComp {
// ======================== 更多属性折叠栏 ========================
/** 属性栏容器（展开/收起时动态调整高度） */
/** 次级属性栏容器（默认隐藏，长按更多按钮时显示） */
@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 attrBoxHeightCollapsed: number = 100;
/** 属性栏展开高度 */
private attrBoxHeightExpanded: number = 210;
/** 次级属性栏是否展开 */
private moreExpanded: boolean = false;
// ======================== 运行时状态 ========================
@@ -168,16 +145,22 @@ export class HeroBoxComp extends CCComp {
// ======================== 生命周期 ========================
onLoad() {
// 次级属性栏默认收起
this.setMoreRowsVisible(false);
this.more_btn?.on(NodeEventType.TOUCH_END, this.onMoreBtnClick, this);
// 次级属性栏默认隐藏，长按更多按钮时显示，放开隐藏
if (this.attr_box && this.attr_box.isValid) {
this.attr_box.active = false;
}
this.more_btn?.on(NodeEventType.TOUCH_START, this.onMoreBtnTouchStart, this);
this.more_btn?.on(NodeEventType.TOUCH_END, this.onMoreBtnTouchEnd, this);
this.more_btn?.on(NodeEventType.TOUCH_CANCEL, this.onMoreBtnTouchEnd, this);
// 空槽位点击 → 打开英雄卡池
this.noHero?.on(NodeEventType.TOUCH_END, this.onNoHeroClick, this);
}
onDestroy() {
if (this.more_btn && this.more_btn.isValid) {
this.more_btn.off(NodeEventType.TOUCH_END, this.onMoreBtnClick, this);
this.more_btn.off(NodeEventType.TOUCH_START, this.onMoreBtnTouchStart, this);
this.more_btn.off(NodeEventType.TOUCH_END, this.onMoreBtnTouchEnd, this);
this.more_btn.off(NodeEventType.TOUCH_CANCEL, this.onMoreBtnTouchEnd, this);
}
if (this.noHero && this.noHero.isValid) {
this.noHero.off(NodeEventType.TOUCH_END, this.onNoHeroClick, this);
@@ -222,45 +205,22 @@ export class HeroBoxComp extends CCComp {
this.refresh();
}
/** 更多按钮点击：切换次级属性栏显示/隐藏 */
private onMoreBtnClick() {
/** 更多按钮按下：显示次级属性栏 */
private onMoreBtnTouchStart() {
oops.audio.playEffect("music/button");
this.moreExpanded = !this.moreExpanded;
this.setMoreRowsVisible(this.moreExpanded);
this.setAttrBoxVisible(true);
}
/** 设置 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，可在编辑器自定义）
/** 更多按钮放开/取消：隐藏次级属性栏 */
private onMoreBtnTouchEnd() {
this.setAttrBoxVisible(false);
}
/** 切换次级属性栏容器可见性 */
private setAttrBoxVisible(visible: boolean) {
if (this.attr_box && this.attr_box.isValid) {
const transform = this.attr_box.getComponent(UITransform) || this.attr_box.addComponent(UITransform);
const height = visible ? this.attrBoxHeightExpanded : this.attrBoxHeightCollapsed;
transform.setContentSize(transform.width, height);
this.attr_box.active = visible;
}
// 切换更多按钮状态子节点：收起=n_* 激活，展开=a_* 激活
this.setMoreBtnState(visible);
}
/**
* 切换更多按钮的状态子节点。
* 收起态激活 n_Bg / n_Arrow，展开态激活 a_Bg / a_Arrow。
*/
private setMoreBtnState(expanded: boolean) {
if (!this.more_btn || !this.more_btn.isValid) return;
const nBg = this.more_btn.getChildByName("n_Bg");
const nArrow = this.more_btn.getChildByName("n_Arrow");
const aBg = this.more_btn.getChildByName("a_Bg");
const aArrow = this.more_btn.getChildByName("a_Arrow");
if (nBg) nBg.active = !expanded;
if (nArrow) nArrow.active = !expanded;
if (aBg) aBg.active = expanded;
if (aArrow) aArrow.active = expanded;
}
/** ECS 组件移除时销毁节点 */