rougelike-demo/client/assets/scripts/Framework/UI/UIMgrExample.ts

import { _decorator, Component, Node, Label, Button, find } from 'cc';
import { UIBase } from './UIBase';
import { UIMgr } from './UIMgr';

const { ccclass, property } = _decorator;

/**
 * UI使用示例
 * 
 * 本文件展示如何使用UI系统:
 * 1. 创建自定义UI类
 * 2. 加载和显示UI
 * 3. 更新UI
 * 4. 卸载UI
 */

// ============================================
// 示例1: 简单的UI类
// ============================================

/**
 * 登录UI示例
 */
export class UILogin extends UIBase {
    /**
     * 返回UI预制体路径
     */
    onGetUrl(): string {
        return 'UI/Login/UILogin';
    }
    
    /**
     * UI初始化
     */
    onStart(params?: any): void {
        console.log('[UILogin] 初始化', params);
        
        // 获取节点
        const node = this.getNode();
        if (!node) return;
        
        // 查找按钮并绑定事件
        const btnLogin = node.getChildByName('BtnLogin');
        if (btnLogin) {
            const button = btnLogin.getComponent(Button);
            if (button) {
                button.node.on(Button.EventType.CLICK, this.onLoginClick, this);
            }
        }
    }
    
    /**
     * UI清理
     */
    onEnd(): void {
        console.log('[UILogin] 清理');
        
        // 解绑事件
        const node = this.getNode();
        if (!node) return;
        
        const btnLogin = node.getChildByName('BtnLogin');
        if (btnLogin) {
            btnLogin.off(Button.EventType.CLICK, this.onLoginClick, this);
        }
    }
    
    /**
     * 登录按钮点击
     */
    private onLoginClick(): void {
        console.log('[UILogin] 点击登录按钮');
        // 执行登录逻辑...
    }
}

// ============================================
// 示例2: 带更新的UI类
// ============================================

/**
 * 游戏主界面UI示例
 * 包含倒计时等需要每帧更新的逻辑
 */
export class UIMain extends UIBase {
    private _timeLeft: number = 60;
    private _labelTime: Label | null = null;
    
    onGetUrl(): string {
        return 'UI/Main/UIMain';
    }
    
    onStart(): void {
        console.log('[UIMain] 初始化');
        
        const node = this.getNode();
        if (!node) return;
        
        // 获取时间Label
        const timeNode = node.getChildByName('LabelTime');
        if (timeNode) {
            this._labelTime = timeNode.getComponent(Label);
        }
        
        this.updateTimeDisplay();
    }
    
    /**
     * 每帧更新
     */
    onUpdate(dt: number): void {
        // 更新倒计时
        this._timeLeft -= dt;
        if (this._timeLeft < 0) {
            this._timeLeft = 0;
        }
        
        this.updateTimeDisplay();
    }
    
    /**
     * 更新时间显示
     */
    private updateTimeDisplay(): void {
        if (this._labelTime) {
            this._labelTime.string = `剩余时间: ${Math.floor(this._timeLeft)}s`;
        }
    }
}

// ============================================
// 示例3: 在Component中使用UI系统
// ============================================

/**
 * UI管理器使用示例组件
 */
@ccclass('UIMgrExample')
export class UIMgrExample extends Component {
    
    start() {
        // 设置UI根节点
        const canvas = find('Canvas');
        if (canvas) {
            UIMgr.getInstance().setUIRoot(canvas);
        }
        
        // 演示UI加载和使用
        this.testUISystem();
    }
    
    update(dt: number) {
        // 每帧更新UI系统
        UIMgr.getInstance().update(dt);
    }
    
    /**
     * 测试UI系统
     */
    private async testUISystem() {
        console.log('========== UI系统测试开始 ==========');
        
        try {
            // 1. 加载登录UI
            console.log('\n--- 测试1: 加载登录UI ---');
            const loginUI = await UIMgr.getInstance().load(UILogin, { 
                username: 'player1' 
            });
            console.log('登录UI加载成功:', loginUI);
            
            // 2. 检查UI是否存在
            console.log('\n--- 测试2: 检查UI状态 ---');
            console.log('是否已加载:', UIMgr.getInstance().has(UILogin));
            console.log('是否显示中:', loginUI.isShowing());
            
            // 3. 隐藏和显示UI
            console.log('\n--- 测试3: 隐藏和显示 ---');
            setTimeout(() => {
                console.log('隐藏登录UI');
                UIMgr.getInstance().hide(UILogin);
            }, 2000);
            
            setTimeout(() => {
                console.log('显示登录UI');
                UIMgr.getInstance().show(UILogin);
            }, 4000);
            
            // 4. 加载主界面UI
            console.log('\n--- 测试4: 加载主界面UI ---');
            setTimeout(async () => {
                const mainUI = await UIMgr.getInstance().load(UIMain);
                console.log('主界面UI加载成功:', mainUI);
                console.log('当前UI数量:', UIMgr.getInstance().getUICount());
            }, 6000);
            
            // 5. 卸载UI
            console.log('\n--- 测试5: 卸载UI ---');
            setTimeout(() => {
                console.log('卸载登录UI');
                UIMgr.getInstance().unload(UILogin);
                console.log('当前UI数量:', UIMgr.getInstance().getUICount());
            }, 8000);
            
            // 6. 卸载所有UI
            console.log('\n--- 测试6: 卸载所有UI ---');
            setTimeout(() => {
                console.log('卸载所有UI');
                UIMgr.getInstance().unloadAll();
                console.log('当前UI数量:', UIMgr.getInstance().getUICount());
            }, 10000);
            
        } catch (error) {
            console.error('UI系统测试失败:', error);
        }
        
        console.log('\n========== UI系统测试完成 ==========');
    }
}

// ============================================
// 使用说明
// ============================================

/**
 * 基本使用流程:
 * 
 * 1. 创建UI类:
 *    export class MyUI extends UIBase {
 *        onGetUrl(): string {
 *            return 'UI/MyUI';
 *        }
 *    }
 * 
 * 2. 设置UI根节点:
 *    UIMgr.getInstance().setUIRoot(canvas);
 * 
 * 3. 加载并显示UI:
 *    const ui = await UIMgr.getInstance().load(MyUI);
 * 
 * 4. 在主循环中更新:
 *    update(dt: number) {
 *        UIMgr.getInstance().update(dt);
 *    }
 * 
 * 5. 卸载UI:
 *    UIMgr.getInstance().unload(MyUI);
 */