10_24/Test10_24/assets/Scripts/UIFrameWork/UIManager.ts

import { _decorator, Component, instantiate, Node, Prefab, Size, tween, UIOpacity, UITransform, Vec2, Vec3 } from 'cc';
import { Singleton } from '../Tools/Singleton';
import { BasePanel } from './BasePanel';
import { SettingsPanel } from './SettingsPanel';
import { RankPanel } from './RankPanel';
import { InforPanel } from './InforPanel';
const { ccclass, property } = _decorator;

//大厅和游戏内公用一套方案
@ccclass('UIManager')
export class UIManager extends Component {
    public static Instance: UIManager;

    //管理不同UI界面,根据名字查找节点
    private UI_Map: Map<string, Node> = new Map();

    //使用栈保证仅有顶层UI能被触摸
    private UIPanel_Stack: Node[] = [];

    onLoad() {
        UIManager.Instance = this;
    }

    //显示UI
    public ShowUI(uiName: string, prefab: Prefab) {
        let uiNode = this.UI_Map.get(uiName);
        if (!uiNode) {
            //加载UI
            console.log(this.node);
            console.log("实例化设置界面");
            uiNode = instantiate(prefab);
            uiNode.setParent(this.node);
            this.UI_Map.set(uiName, uiNode);
            console.log(uiNode.name, uiNode.position, uiNode.parent); // 打印节点信息
        }
        uiNode.active = true;
        let opacity = uiNode.getComponent(UIOpacity);
        opacity.opacity = 0;
        tween(opacity).to(0.5, { opacity: 255 }, { easing: 'fade' }).start();

        let scaleUp = tween(uiNode).to(0.4, { scale: new Vec3(1.02, 1.02, 1.02) }, { easing: 'quadOut' });
        let scaleDown = tween(uiNode).to(0.1, { scale: new Vec3(1.0, 1.0, 1.0) }, { easing: 'quadOut' });
        tween(uiNode).sequence(scaleUp, scaleDown).start();
        this.pushUIPanel(uiNode);

        let basePanel = uiNode.getComponent(BasePanel);
        if (basePanel) {
            basePanel.onEnter();
        }
    }

    //隐藏UI
    public hideUI(callback) {
        let uiNode = this.UIPanel_Stack[this.UIPanel_Stack.length - 1];
        let opacity = uiNode.getComponent(UIOpacity);
        tween(opacity).to(0.3, { opacity: 0 }, { easing: 'fade' }).call(() => {
            this.popUIPanel(); 
            let basePanel = uiNode.getComponent(BasePanel);
            if (basePanel) {
                basePanel.onExit();
            }
            if(callback!==null)
            callback();
        }).start();

    }

    // 将UI面板压入栈中
    private pushUIPanel(uiNode: Node): void {
        this.UIPanel_Stack.push(uiNode);
        this.updateUIPanelStack();
    }

    // 从栈中弹出UI面板
    private popUIPanel(): void {
        if (this.UIPanel_Stack.length > 0) {
            const topUI = this.UIPanel_Stack.pop();
            if (topUI) {
                topUI.active = false;
            }
            this.updateUIPanelStack();
        }
    }

    // 更新UI面板栈
    private updateUIPanelStack(): void {
        for (let i = 0; i < this.UIPanel_Stack.length; i++) {
            const uiNode = this.UIPanel_Stack[i];
            uiNode.active = i === this.UIPanel_Stack.length - 1;//保证栈顶为可活动
        }
    }

    //清除栈
    public clearStack() {
        this.UIPanel_Stack = [];
    }
}