CINC/scenes/TmpScene.js

/**
 * TmpScene 类 - 示例场景，展示如何创建一个带有可展开信息栏的Phaser场景
 * 继承自Phaser.Scene，是Phaser游戏中场景的基本结构
 */
export default class TmpScene extends Phaser.Scene {
    /**
     * 构造函数 - 初始化场景
     * @constructor
     */
    constructor() {
        // 调用父类构造函数，设置场景名称为'TmpScene'
        // 场景名称用于在Phaser中切换场景时使用
        super('TmpScene')
        
        // 定义类成员变量
        
        // 信息栏可见性状态 - 初始为隐藏
        this.infoBarVisible = false;  
        
        // 信息栏对象引用 - 用于存储信息栏的所有相关元素
        this.infoBar = null;   
        
        // 信息栏展开/收起按钮引用
        this.infoBarToggle = null;  
        
        // 信息栏主容器引用 - 包含整个信息栏的所有元素
        this.infoBarContainer = null;  
        
        // 滚动容器引用 - 包含所有可滚动的组件
        this.infoBarScrollContainer = null; 
        
        // 组件管理对象 - 存储所有添加到信息栏的组件实例
        this.infoBarComponents = {}; 
        
        // 信息栏配置对象 - 控制信息栏的行为和外观
        this.infoBarConfig = {  
            width: 0, // 信息栏宽度，将在create方法中根据屏幕宽度计算
            height: 0, // 信息栏高度，将在create方法中根据屏幕高度计算
            components: {}, // 存储组件配置信息
            autoCleanup: true, // 是否自动清理资源密集型组件，优化性能
            scrollable: true // 是否支持滚动，当组件总高度超过屏幕高度时
        };
        
        // 滚动相关变量
        this.scrollY = 0; // 当前滚动位置
        this.maxScrollY = 0; // 最大滚动距离
        this.isDragging = false; // 是否正在拖动滚动
        this.lastDragY = 0; // 上一次拖动的Y坐标
    }

    /**
     * create方法 - 场景创建时调用的方法，用于初始化场景中的所有元素
     * 在Phaser中，场景启动后会自动调用此方法
     */
    create() {
        // 设置场景背景色为深灰色
        // cameras.main 是场景的主相机，控制场景的渲染区域
        this.cameras.main.setBackgroundColor('#333333');
        
        // 获取屏幕宽度和高度，存储为实例变量供后续使用
        // this.scale.width 和 this.scale.height 是Phaser提供的获取当前游戏窗口大小的属性
        this.screenWidth = this.scale.width;
        this.screenHeight = this.scale.height;
        
        // 调用方法创建右侧信息栏
        this.createRightInfoBar();
        
        // 示例：添加不同类型的组件到信息栏，带固定高度和自定义顺序
        
        // 添加角色状态组件 - 文本类型
        this.addInfoBarComponent('playerStats', {
            type: 'text', // 组件类型：文本
            title: '角色状态', // 组件标题
            content: ['生命值: 100/100', '魔法值: 50/50', '等级: 1'], // 组件内容
            enabled: true, // 组件是否启用
            resourceIntensive: false, // 是否为资源密集型组件
            height: 120, // 固定高度
            order: 1 // 自定义顺序（越小越靠前）
        });
        
        // 添加小地图组件 - 占位符类型
        this.addInfoBarComponent('miniMap', {
            type: 'placeholder', // 占位符类型，实际项目中替换为真实小地图
            title: '小地图', // 组件标题
            content: ['小地图区域'], // 组件内容
            enabled: true, // 组件是否启用
            resourceIntensive: true, // 标记为资源密集型组件，会在信息栏收起时自动清理
            height: 180, // 固定高度
            order: 2 // 自定义顺序
        });
        
        // 添加游戏日志组件 - 文本类型
        this.addInfoBarComponent('gameLog', {
            type: 'text', // 组件类型：文本
            title: '游戏日志', // 组件标题
            content: ['系统: 欢迎来到游戏', '提示: 按H查看帮助', '新任务: 探索未知区域', '提示: 按I打开背包'], // 组件内容
            enabled: true, // 组件是否启用
            resourceIntensive: false, // 是否为资源密集型组件
            height: 160, // 固定高度
            order: 3 // 自定义顺序
        });
        
        // 初始化时，如果信息栏可见，创建所有启用的组件
        // 由于初始状态下infoBarVisible为false，这里不会执行
        if (this.infoBarVisible) {
            this.createAllEnabledComponents();
        }
    }
    
    /**
     * 创建所有启用的组件
     * 按自定义顺序创建组件实例，并重新排列和更新滚动区域
     */
    createAllEnabledComponents() {
        // 获取按自定义顺序排序的组件列表
        const orderedComponents = this.getOrderedComponents();
        
        // 遍历排序后的组件，创建启用的组件实例
        orderedComponents.forEach(({id, config}) => {
            if (config.enabled) {
                this.createComponentInstance(id, config.config);
            }
        });
        
        // 重新排列组件位置
        this.rearrangeComponents();
        
        // 更新滚动区域大小
        this.updateScrollArea();
    }
    
    /**
     * 获取按自定义顺序排序的组件
     * @returns {Array} 排序后的组件数组，每个元素包含id和config
     */
    getOrderedComponents() {
        // 将组件配置对象转换为数组
        // Object.entries() 将对象转换为[key, value]数组
        return Object.entries(this.infoBarConfig.components)
            // 映射为包含id和config的对象数组
            .map(([id, config]) => ({id, config}))
            // 按order属性排序，order值越小越靠前
            .sort((a, b) => {
                // 获取每个组件的order值，如果没有设置则默认为0
                const orderA = a.config.config.order || 0;
                const orderB = b.config.config.order || 0;
                return orderA - orderB;
            });
    }

    /**
     * 创建右侧信息栏
     * 包括容器、背景、滚动容器和展开/收起按钮
     */
    createRightInfoBar() {
        // 定义信息栏宽度为屏幕宽度的20%
        this.infoBarConfig.width = this.screenWidth * 0.2;
        this.infoBarConfig.height = this.screenHeight * 0.8;
        
        // 创建信息栏主容器
        // this.add.container() 创建一个新的容器，用于组织和管理多个游戏对象
        this.infoBarContainer = this.add.container(
            this.screenWidth, // 初始位置在屏幕上侧外
            0 - this.infoBarConfig.height // Y坐标
        );
        
        // 创建信息栏背景
        // this.add.rectangle() 创建一个矩形游戏对象
        const infoBarBg = this.add.rectangle(
            0, // 相对于容器的X位置
            0, // 相对于容器的Y位置
            this.infoBarConfig.width, // 宽度
            this.screenHeight, // 高度
            0x222222, // 背景色（深灰色）
            0.9 // 透明度
        ).setOrigin(1, 0); // 设置锚点在右上角，便于定位
        
        // 创建滚动容器，用于容纳所有组件
        this.infoBarScrollContainer = this.add.container(
            -this.infoBarConfig.width, // 相对于信息栏容器的X位置
            0 // Y坐标为0
        );
        
        // 将背景和滚动容器添加到信息栏容器
        // 容器的add方法可以添加多个游戏对象
        this.infoBarContainer.add([infoBarBg, this.infoBarScrollContainer]);
        
        // 如果配置了滚动功能，设置滚动
        if (this.infoBarConfig.scrollable) {
            this.setupScrolling();
        }
        
        // 创建信息栏展开/收起按钮，固定在屏幕右上角
        // this.add.text() 创建文本游戏对象
        this.infoBarToggle = this.add.text(
            this.screenWidth, // 按钮X位置
            0, // 按钮Y位置
            '+', // 初始文本
            { fontSize: '16px', fill: '#ffffff', backgroundColor: '#444444', padding: { x: 10, y: 5 } }
        ).setOrigin(1, 0) // 设置锚点在右上角
         .setInteractive(); // 设置为可交互，以便接收鼠标事件
        
        // 添加点击事件监听器
        // on('pointerdown', callback) 监听鼠标按下事件
        this.infoBarToggle.on('pointerdown', () => {
            this.toggleInfoBar(); // 调用方法切换信息栏显示/隐藏
        });
        
        // 保存信息栏对象，便于其他系统更新和访问
        this.infoBar = {
            container: this.infoBarContainer, // 信息栏主容器
            scrollContainer: this.infoBarScrollContainer, // 滚动容器
            toggle: this.infoBarToggle, // 展开/收起按钮
            bg: infoBarBg, // 背景
            config: this.infoBarConfig, // 配置
            components: this.infoBarComponents // 组件
        };
    }
    
    /**
     * 设置滚动功能
     * 添加鼠标和触摸事件监听，实现信息栏的滚动效果
     */
    setupScrolling() {
        // 移除遮罩，使用简单的滚动方式
        
        // 添加鼠标事件监听
        // on('pointerdown', callback) 监听鼠标按下事件
        this.input.on('pointerdown', (pointer) => {
            // 检查点击是否在信息栏区域内
            const infoBarRect = new Phaser.Geom.Rectangle(
                this.screenWidth - this.infoBarConfig.width, // 信息栏左边界
                0, // 上边界
                this.infoBarConfig.width, // 宽度
                this.screenHeight // 高度
            );
            
            // 检查点击位置是否在信息栏内且信息栏可见
            if (Phaser.Geom.Rectangle.ContainsPoint(infoBarRect, pointer) && this.infoBarVisible) {
                this.isDragging = true; // 开始拖动
                this.lastDragY = pointer.y; // 记录初始拖动位置
            }
        });
        
        // 监听鼠标移动事件
        this.input.on('pointermove', (pointer) => {
            if (this.isDragging) {
                // 计算拖动距离
                const deltaY = pointer.y - this.lastDragY;
                // 调用滚动方法
                this.scroll(deltaY);
                // 更新最后拖动位置
                this.lastDragY = pointer.y;
            }
        });
        
        // 监听鼠标释放事件
        this.input.on('pointerup', () => {
            this.isDragging = false; // 结束拖动
        });
        
        // 添加触摸事件支持，使滚动在移动设备上也能工作
        this.input.on('touchstart', (pointer) => {
            this.input.emit('pointerdown', pointer); // 触发pointerdown事件
        });
        
        this.input.on('touchmove', (pointer) => {
            this.input.emit('pointermove', pointer); // 触发pointermove事件
        });
        
        this.input.on('touchend', () => {
            this.input.emit('pointerup'); // 触发pointerup事件
        });
    }
    
    /**
     * 滚动逻辑
     * 处理滚动位置计算和应用
     * @param {number} deltaY - 滚动距离
     */
    scroll(deltaY) {
        // 计算新的滚动位置
        const newScrollY = this.scrollY + deltaY;
        
        // 限制滚动范围，使用Phaser.Math.Clamp确保值在指定范围内
        this.scrollY = Phaser.Math.Clamp(newScrollY, 0, this.maxScrollY);
        
        // 应用滚动：通过设置滚动容器的Y位置实现
        this.infoBarScrollContainer.setY(-this.scrollY);
    }
    
    /**
     * 更新滚动区域
     * 计算所有组件的总高度，更新最大滚动距离
     */
    updateScrollArea() {
        // 计算所有组件的总高度
        let totalHeight = 20; // 顶部边距
        const orderedComponents = this.getOrderedComponents();
        
        // 遍历所有组件，累加高度
        orderedComponents.forEach(({id}) => {
            if (this.infoBarComponents[id]) {
                totalHeight += this.infoBarComponents[id].height + 10; // 组件高度 + 间距
            }
        });
        
        // 更新最大滚动距离：总高度减去屏幕高度，加上底部边距
        this.maxScrollY = Math.max(0, totalHeight - this.screenHeight + 20); // +20为底部边距
    }
    
    /**
     * 切换信息栏显示/隐藏
     * 使用Phaser的tweens系统实现平滑的动画效果
     */
    toggleInfoBar() {
        // 切换信息栏可见性状态
        this.infoBarVisible = !this.infoBarVisible;
        
        if (this.infoBarVisible) {
            // 展开信息栏
            // 使用tweens.add()创建动画
            this.tweens.add({
                targets: this.infoBarContainer, // 动画目标：信息栏容器
                x: this.screenWidth, // 目标X位置：屏幕右侧减去信息栏宽度
                duration: 300, // 动画持续时间：300毫秒
                ease: 'Power1' // 缓动函数：Power1（线性）
            });
            
            // 更新按钮文本为'-'（收起）
            this.infoBarToggle.setText('-');
            
            // 创建所有启用的组件
            this.createAllEnabledComponents();
        } else {
            // 收起信息栏
            this.tweens.add({
                targets: this.infoBarContainer, // 动画目标：信息栏容器
                x: this.screenWidth + this.infoBarConfig.width, // 目标X位置：屏幕右侧外
                duration: 300, // 动画持续时间：300毫秒
                ease: 'Power1' // 缓动函数：Power1（线性）
            });
            
            // 更新按钮文本为'+'（展开）
            this.infoBarToggle.setText('+');
            
            // 如果配置了自动清理，清理资源密集型组件
            if (this.infoBarConfig.autoCleanup) {
                this.cleanupResourceIntensiveComponents();
            }
        }
    }
    
    /**
     * 添加信息栏组件
     * @param {string} id - 组件唯一标识符
     * @param {Object} componentConfig - 组件配置对象
     * @returns {Object} 组件实例
     */
    addInfoBarComponent(id, componentConfig) {
        // 保存组件配置到信息栏配置对象
        this.infoBarConfig.components[id] = {
            enabled: componentConfig.enabled !== false, // 默认为启用
            resourceIntensive: componentConfig.resourceIntensive || false, // 默认为非资源密集型
            config: componentConfig // 保存原始配置
        };
        
        // 如果信息栏可见且组件启用，则创建组件实例
        if (this.infoBarVisible && this.infoBarConfig.components[id].enabled) {
            this.createComponentInstance(id, componentConfig);
            // 重新排列组件位置
            this.rearrangeComponents();
        }
        
        // 返回组件实例
        return this.infoBarComponents[id];
    }
    
    /**
     * 创建组件实例
     * 根据组件类型创建不同的实例
     * @param {string} id - 组件唯一标识符
     * @param {Object} componentConfig - 组件配置对象
     * @returns {Object} 组件实例
     */
    createComponentInstance(id, componentConfig) {
        // 根据组件类型创建不同的实例
        let componentInstance;
        
        switch (componentConfig.type) {
            case 'text':
                // 创建文本组件
                componentInstance = this.createTextComponent(id, componentConfig);
                break;
            case 'miniMap':
                // 创建小地图组件
                componentInstance = this.createMiniMapComponent(id, componentConfig);
                break;
            case 'placeholder':
            default:
                // 创建占位符组件
                componentInstance = this.createPlaceholderComponent(id, componentConfig);
                break;
        }
        
        // 保存组件实例到组件管理对象
        this.infoBarComponents[id] = componentInstance;
        return componentInstance;
    }
    
    /**
     * 创建文本组件
     * @param {string} id - 组件唯一标识符
     * @param {Object} config - 组件配置对象
     * @returns {Object} 文本组件实例
     */
    createTextComponent(id, config) {
        // 创建组件组容器
        const componentGroup = this.add.container(
            10, // 相对于滚动容器的X位置，左内边距10px
            0 // 相对于滚动容器的Y位置
        );
        
        // 创建组件内容容器，用于容纳标题栏和内容
        const componentContent = this.add.container(0, 0);
        
        // 创建标题栏背景
        const titleBar = this.add.rectangle(
            0, // X位置
            0, // Y位置
            this.infoBarConfig.width - 20, // 宽度：信息栏宽度减去左右内边距
            30, // 高度
            0x444444, // 颜色
            0.5 // 透明度
        ).setOrigin(0, 0); // 锚点在左上角
        
        // 创建组件标题
        const title = this.add.text(
            10, // X位置
            5, // Y位置
            config.title, // 标题文本
            { fontSize: '14px', fill: '#ffffff', fontWeight: 'bold' } // 样式
        ).setOrigin(0, 0); // 锚点在左上角
        
        // 创建展开/收起按钮
        const toggleBtn = this.add.text(
            this.infoBarConfig.width - 30, // X位置
            5, // Y位置
            '-', // 初始文本
            { fontSize: '16px', fill: '#ffffff' } // 样式
        ).setOrigin(0, 0) // 锚点在左上角
         .setInteractive(); // 设置为可交互
        
        // 创建分隔线
        const separator = this.add.line(
            0, // X位置
            30, // Y位置
            0, 0, // 起始点
            this.infoBarConfig.width - 20, 0, // 结束点
            0x555555 // 颜色
        ).setOrigin(0, 0); // 锚点在左上角
        
        // 创建内容容器，用于动态管理内容
        const contentContainer = this.add.container(0, 30);
        
        // 创建内容文本
        const contentTexts = [];
        config.content.forEach((line, index) => {
            const text = this.add.text(
                10, // X位置
                index * 25, // Y位置：每行25像素
                line, // 文本内容
                { fontSize: '12px', fill: '#cccccc' } // 样式
            ).setOrigin(0, 0); // 锚点在左上角
            contentTexts.push(text);
        });
        
        // 将内容添加到内容容器
        contentContainer.add(contentTexts);
        
        // 添加所有元素到组件内容
        componentContent.add([titleBar, title, toggleBtn, separator, contentContainer]);
        // 添加组件内容到组件组
        componentGroup.add(componentContent);
        // 添加到滚动容器
        this.infoBarScrollContainer.add(componentGroup);
        
        // 保存组件状态
        const componentState = {
            expanded: true, // 是否展开
            contentVisible: true // 内容是否可见
        };
        
        // 添加展开/收起点击事件
        toggleBtn.on('pointerdown', () => {
            this.toggleComponent(id, componentState, contentContainer, toggleBtn);
        });
        
        // 计算高度
        const collapsedHeight = 40; // 收起时的高度
        const expandedHeight = config.height || (30 + config.content.length * 25) + 10; // 展开时的高度
        
        // 返回组件实例对象
        return {
            group: componentGroup,
            componentContent: componentContent,
            title: title,
            titleBar: titleBar,
            toggleBtn: toggleBtn,
            separator: separator,
            contentContainer: contentContainer,
            content: contentTexts,
            type: config.type,
            config: config,
            state: componentState,
            collapsedHeight: collapsedHeight,
            expandedHeight: expandedHeight,
            height: expandedHeight
        };
    }
    
    /**
     * 创建小地图组件（示例）
     * @param {string} id - 组件唯一标识符
     * @param {Object} config - 组件配置对象
     * @returns {Object} 小地图组件实例
     */
    createMiniMapComponent(id, config) {
        // 创建组件组容器
        const componentGroup = this.add.container(
            10, // 相对于滚动容器的X位置，左内边距10px
            0 // 相对于滚动容器的Y位置
        );
        
        // 创建组件内容容器，用于容纳标题栏和内容
        const componentContent = this.add.container(0, 0);
        
        // 创建标题栏背景
        const titleBar = this.add.rectangle(
            0, // X位置
            0, // Y位置
            this.infoBarConfig.width - 20, // 宽度：信息栏宽度减去左右内边距
            30, // 高度
            0x444444, // 颜色
            0.5 // 透明度
        ).setOrigin(0, 0); // 锚点在左上角
        
        // 创建组件标题
        const title = this.add.text(
            10, // X位置
            5, // Y位置
            config.title, // 标题文本
            { fontSize: '14px', fill: '#ffffff', fontWeight: 'bold' } // 样式
        ).setOrigin(0, 0); // 锚点在左上角
        
        // 创建展开/收起按钮
        const toggleBtn = this.add.text(
            this.infoBarConfig.width - 30, // X位置
            5, // Y位置
            '-', // 初始文本
            { fontSize: '16px', fill: '#ffffff' } // 样式
        ).setOrigin(0, 0) // 锚点在左上角
         .setInteractive(); // 设置为可交互
        
        // 创建分隔线
        const separator = this.add.line(
            0, // X位置
            30, // Y位置
            0, 0, // 起始点
            this.infoBarConfig.width - 20, 0, // 结束点
            0x555555 // 颜色
        ).setOrigin(0, 0); // 锚点在左上角
        
        // 创建内容容器，用于动态管理内容
        const contentContainer = this.add.container(0, 30);
        
        // 创建小地图占位符（实际项目中替换为真实小地图）
        const miniMapBg = this.add.rectangle(
            (this.infoBarConfig.width - 20) / 2, // X位置：水平居中
            (config.height - 40) / 2, // Y位置：垂直居中，减去标题栏高度
            this.infoBarConfig.width - 40, // 宽度：信息栏宽度减去内边距
            config.height - 50, // 高度：固定高度减去标题和分隔线高度
            0x111111, // 颜色
            1 // 透明度
        ).setOrigin(0.5, 0.5); // 锚点在中心
        
        // 创建小地图文本
        const miniMapText = this.add.text(
            (this.infoBarConfig.width - 20) / 2, // X位置：水平居中
            (config.height - 40) / 2, // Y位置：垂直居中
            '小地图', // 文本
            { fontSize: '12px', fill: '#cccccc' } // 样式
        ).setOrigin(0.5, 0.5); // 锚点在中心
        
        // 将内容添加到内容容器
        contentContainer.add([miniMapBg, miniMapText]);
        
        // 添加所有元素到组件内容
        componentContent.add([titleBar, title, toggleBtn, separator, contentContainer]);
        // 添加组件内容到组件组
        componentGroup.add(componentContent);
        // 添加到滚动容器
        this.infoBarScrollContainer.add(componentGroup);
        
        // 保存组件状态
        const componentState = {
            expanded: true, // 是否展开
            contentVisible: true, // 内容是否可见
            contentCreated: true // 标记内容已创建
        };
        
        // 添加展开/收起点击事件
        toggleBtn.on('pointerdown', () => {
            this.toggleComponent(id, componentState, contentContainer, toggleBtn, true);
        });
        
        // 计算高度
        const collapsedHeight = 40; // 收起时的高度
        const expandedHeight = config.height || 160; // 展开时的高度
        
        // 返回组件实例对象
        return {
            group: componentGroup,
            componentContent: componentContent,
            title: title,
            titleBar: titleBar,
            toggleBtn: toggleBtn,
            separator: separator,
            contentContainer: contentContainer,
            map: miniMapBg,
            mapText: miniMapText,
            type: config.type,
            config: config,
            state: componentState,
            collapsedHeight: collapsedHeight,
            expandedHeight: expandedHeight,
            height: expandedHeight
        };
    }
    
    /**
     * 创建占位符组件
     * @param {string} id - 组件唯一标识符
     * @param {Object} config - 组件配置对象
     * @returns {Object} 占位符组件实例
     */
    createPlaceholderComponent(id, config) {
        // 创建组件组容器
        const componentGroup = this.add.container(
            10, // 相对于滚动容器的X位置，左内边距10px
            0 // 相对于滚动容器的Y位置
        );
        
        // 创建组件内容容器，用于容纳标题栏和内容
        const componentContent = this.add.container(0, 0);
        
        // 创建标题栏背景
        const titleBar = this.add.rectangle(
            0, // X位置
            0, // Y位置
            this.infoBarConfig.width - 20, // 宽度：信息栏宽度减去左右内边距
            30, // 高度
            0x444444, // 颜色
            0.5 // 透明度
        ).setOrigin(0, 0); // 锚点在左上角
        
        // 创建组件标题
        const title = this.add.text(
            10, // X位置
            5, // Y位置
            config.title, // 标题文本
            { fontSize: '14px', fill: '#ffffff', fontWeight: 'bold' } // 样式
        ).setOrigin(0, 0); // 锚点在左上角
        
        // 创建展开/收起按钮
        const toggleBtn = this.add.text(
            this.infoBarConfig.width - 30, // X位置
            5, // Y位置
            '-', // 初始文本
            { fontSize: '16px', fill: '#ffffff' } // 样式
        ).setOrigin(0, 0) // 锚点在左上角
         .setInteractive(); // 设置为可交互
        
        // 创建分隔线
        const separator = this.add.line(
            0, // X位置
            30, // Y位置
            0, 0, // 起始点
            this.infoBarConfig.width - 20, 0, // 结束点
            0x555555 // 颜色
        ).setOrigin(0, 0); // 锚点在左上角
        
        // 创建内容容器，用于动态管理内容
        const contentContainer = this.add.container(0, 30);
        
        // 创建内容
        const contentText = this.add.text(
            10, // X位置
            0, // Y位置
            config.content.join('\n'), // 内容文本，将数组元素用换行符连接
            { 
                fontSize: '12px', 
                fill: '#cccccc', 
                wordWrap: { width: this.infoBarConfig.width - 40 } // 自动换行
            }
        ).setOrigin(0, 0); // 锚点在左上角
        
        // 将内容添加到内容容器
        contentContainer.add([contentText]);
        
        // 添加所有元素到组件内容
        componentContent.add([titleBar, title, toggleBtn, separator, contentContainer]);
        // 添加组件内容到组件组
        componentGroup.add(componentContent);
        // 添加到滚动容器
        this.infoBarScrollContainer.add(componentGroup);
        
        // 保存组件状态
        const componentState = {
            expanded: true, // 是否展开
            contentVisible: true // 内容是否可见
        };
        
        // 添加展开/收起点击事件
        toggleBtn.on('pointerdown', () => {
            this.toggleComponent(id, componentState, contentContainer, toggleBtn);
        });
        
        // 计算高度
        const collapsedHeight = 40; // 收起时的高度
        const expandedHeight = config.height || (50 + contentText.height) + 10; // 展开时的高度
        
        // 返回组件实例对象
        return {
            group: componentGroup,
            componentContent: componentContent,
            title: title,
            titleBar: titleBar,
            toggleBtn: toggleBtn,
            separator: separator,
            contentContainer: contentContainer,
            content: [contentText],
            type: config.type,
            config: config,
            state: componentState,
            collapsedHeight: collapsedHeight,
            expandedHeight: expandedHeight,
            height: expandedHeight
        };
    }
    
    /**
     * 更新信息栏组件内容
     * 目前仅支持更新文本类型组件的内容
     * @param {string} id - 组件唯一标识符
     * @param {Array} newContent - 新的内容数组
     */
    updateInfoBarComponent(id, newContent) {
        // 获取组件实例
        const component = this.infoBarComponents[id];
        
        // 检查组件是否存在且为文本类型
        if (component && component.type === 'text') {
            // 清空现有内容
            component.content.forEach(text => text.destroy());
            component.content = [];
            
            // 添加新内容
            newContent.forEach((line, index) => {
                const text = this.add.text(
                    0, // X位置
                    30 + index * 25, // Y位置：标题栏高度 + 行索引 * 行高
                    line, // 文本内容
                    { fontSize: '12px', fill: '#cccccc' } // 样式
                ).setOrigin(0, 0); // 锚点在左上角
                component.group.add(text);
                component.content.push(text);
            });
            
            // 重新排列组件（保持固定高度）
            this.rearrangeComponents();
        }
    }
    
    /**
     * 重新排列组件
     * 按自定义顺序排列组件，并更新它们的Y位置
     */
    rearrangeComponents() {
        let currentY = 20; // 起始Y位置，顶部边距20px
        
        // 获取按自定义顺序排序的组件列表
        const orderedComponents = this.getOrderedComponents();
        
        // 遍历组件，设置它们的Y位置
        orderedComponents.forEach(({id}) => {
            const component = this.infoBarComponents[id];
            if (component && component.group) {
                component.group.setY(currentY); // 设置组件的Y位置
                currentY += component.height + 10; // 更新当前Y位置：组件高度 + 间距10px
            }
        });
        
        // 更新滚动区域大小
        this.updateScrollArea();
    }
    
    /**
     * 切换组件显示/隐藏
     * @param {string} id - 组件唯一标识符
     */
    toggleInfoBarComponent(id) {
        // 获取组件配置
        const componentConfig = this.infoBarConfig.components[id];
        
        if (componentConfig) {
            // 切换组件启用状态
            componentConfig.enabled = !componentConfig.enabled;
            
            if (componentConfig.enabled) {
                // 启用组件，创建实例
                if (this.infoBarVisible) {
                    this.createComponentInstance(id, componentConfig.config);
                    this.rearrangeComponents();
                }
            } else {
                // 禁用组件，销毁实例
                this.destroyComponentInstance(id);
                this.rearrangeComponents();
            }
        }
    }
    
    /**
     * 销毁组件实例
     * @param {string} id - 组件唯一标识符
     */
    destroyComponentInstance(id) {
        if (this.infoBarComponents[id]) {
            // 销毁组件的组容器
            this.infoBarComponents[id].group.destroy();
            // 从组件管理对象中删除
            delete this.infoBarComponents[id];
        }
    }
    
    /**
     * 清理资源密集型组件
     * 在信息栏收起时调用，释放资源
     */
    cleanupResourceIntensiveComponents() {
        // 遍历所有组件配置
        for (const id in this.infoBarConfig.components) {
            const componentConfig = this.infoBarConfig.components[id];
            // 检查是否为资源密集型组件且存在实例
            if (componentConfig.resourceIntensive && this.infoBarComponents[id]) {
                this.destroyComponentInstance(id);
            }
        }
        // 收起时重新排列剩余组件，确保位置正确
        this.rearrangeComponents();
    }
    
    /**
     * 重新创建资源密集型组件
     * 在信息栏展开时调用，重新加载资源
     */
    recreateResourceIntensiveComponents() {
        // 遍历所有组件配置
        for (const id in this.infoBarConfig.components) {
            const componentConfig = this.infoBarConfig.components[id];
            // 检查是否为资源密集型组件且已启用
            if (componentConfig.resourceIntensive && componentConfig.enabled) {
                this.createComponentInstance(id, componentConfig.config);
            }
        }
    }
    
    /**
     * 切换信息栏显示/隐藏（优化版）
     * 使用Phaser的tweens系统实现平滑的动画效果
     */
    toggleInfoBar() {
        // 切换信息栏可见性状态
        this.infoBarVisible = !this.infoBarVisible;
        
        if (this.infoBarVisible) {
            // 展开信息栏
            this.tweens.add({
                targets: this.infoBarContainer, // 动画目标：信息栏容器
                x: this.screenWidth, // 目标X位置
                duration: 300, // 动画持续时间
                ease: 'Power1' // 缓动函数
            });
            
            // 更新按钮文本
            this.infoBarToggle.setText('-');
            
            // 只创建缺失的组件（主要是资源密集型组件）
            this.createMissingComponents();
            
            // 确保所有组件正确排列
            this.rearrangeComponents();
        } else {
            // 收起信息栏
            this.tweens.add({
                targets: this.infoBarContainer, // 动画目标：信息栏容器
                x: this.screenWidth + this.infoBarConfig.width, // 目标X位置
                duration: 300, // 动画持续时间
                ease: 'Power1' // 缓动函数
            });
            
            // 更新按钮文本
            this.infoBarToggle.setText('+');
            
            // 只清理资源密集型组件
            this.cleanupResourceIntensiveComponents();
        }
    }
    
    /**
     * 创建缺失的组件
     * 只创建已启用但尚未创建实例的组件
     */
    createMissingComponents() {
        // 获取按自定义顺序排序的组件列表
        const orderedComponents = this.getOrderedComponents();
        
        // 遍历组件，创建缺失的实例
        orderedComponents.forEach(({id, config}) => {
            if (config.enabled && !this.infoBarComponents[id]) {
                this.createComponentInstance(id, config.config);
            }
        });
    }
    
    /**
     * 创建所有启用的组件（完整重建）
     * 先销毁所有现有组件，然后重新创建
     */
    createAllEnabledComponents() {
        // 先销毁所有现有组件，避免重叠
        this.destroyAllComponents();
        
        // 然后创建所有启用的组件
        const orderedComponents = this.getOrderedComponents();
        orderedComponents.forEach(({id, config}) => {
            if (config.enabled) {
                this.createComponentInstance(id, config.config);
            }
        });
        
        // 排列组件
        this.rearrangeComponents();
        
        // 更新滚动区域
        this.updateScrollArea();
    }
    
    /**
     * 销毁所有组件
     * 清理所有组件实例
     */
    destroyAllComponents() {
        // 遍历所有组件实例
        for (const id in this.infoBarComponents) {
            this.destroyComponentInstance(id);
        }
    }
    
    /**
     * 切换组件展开/收起
     * @param {string} id - 组件唯一标识符
     * @param {Object} state - 组件状态对象
     * @param {Phaser.GameObjects.Container} contentContainer - 内容容器
     * @param {Phaser.GameObjects.Text} toggleBtn - 切换按钮
     * @param {boolean} isResourceIntensive - 是否为资源密集型组件
     */
    toggleComponent(id, state, contentContainer, toggleBtn, isResourceIntensive = false) {
        // 切换展开状态
        state.expanded = !state.expanded;
        
        if (state.expanded) {
            // 展开组件
            toggleBtn.setText('-');
            
            if (isResourceIntensive) {
                // 资源密集型组件，需要重新创建内容
                if (!state.contentCreated) {
                    this.recreateComponentContent(id);
                    state.contentCreated = true;
                }
            }
            
            // 显示内容容器
            contentContainer.visible = true;
            
            // 更新组件高度
            this.infoBarComponents[id].height = this.infoBarComponents[id].expandedHeight;
        } else {
            // 收起组件
            toggleBtn.setText('+');
            
            if (isResourceIntensive) {
                // 资源密集型组件，清理内容
                this.destroyComponentContent(id);
                state.contentCreated = false;
            }
            
            // 隐藏内容容器
            contentContainer.visible = false;
            
            // 更新组件高度
            this.infoBarComponents[id].height = this.infoBarComponents[id].collapsedHeight;
        }
        
        // 重新排列所有组件
        this.rearrangeComponents();
        
        // 更新滚动区域
        this.updateScrollArea();
    }
    
    /**
     * 销毁组件内容
     * 清理组件的内容容器中的所有子元素
     * @param {string} id - 组件唯一标识符
     */
    destroyComponentContent(id) {
        // 获取组件实例
        const component = this.infoBarComponents[id];
        
        // 检查组件和内容容器是否存在
        if (component && component.contentContainer) {
            // 销毁内容容器中的所有子元素
            // removeAll(true) 中的true表示同时销毁这些元素
            component.contentContainer.removeAll(true);
        }
    }
    
    /**
     * 重新创建组件内容
     * 为资源密集型组件重新创建内容
     * @param {string} id - 组件唯一标识符
     */
    recreateComponentContent(id) {
        // 获取组件实例
        const component = this.infoBarComponents[id];
        
        // 检查组件和内容容器是否存在
        if (!component || !component.contentContainer) return;
        
        // 获取组件配置
        const config = component.config;
        
        // 根据组件类型重新创建内容
        switch (config.type) {
            case 'miniMap':
            case 'placeholder':
                // 重新创建小地图内容
                const miniMapBg = this.add.rectangle(
                    (this.infoBarConfig.width - 20) / 2, // 水平居中
                    (config.height - 40) / 2, // 垂直居中
                    this.infoBarConfig.width - 40, // 宽度
                    config.height - 50, // 高度
                    0x111111, // 颜色
                    1 // 透明度
                ).setOrigin(0.5, 0.5); // 锚点在中心
                
                const miniMapText = this.add.text(
                    (this.infoBarConfig.width - 20) / 2, // 水平居中
                    (config.height - 40) / 2, // 垂直居中
                    '小地图', // 文本
                    { fontSize: '12px', fill: '#cccccc' } // 样式
                ).setOrigin(0.5, 0.5); // 锚点在中心
                
                // 添加到内容容器
                component.contentContainer.add([miniMapBg, miniMapText]);
                // 更新组件引用
                component.map = miniMapBg;
                component.mapText = miniMapText;
                break;
            
            case 'text':
                // 重新创建文本内容
                const contentTexts = [];
                config.content.forEach((line, index) => {
                    const text = this.add.text(
                        10, // X位置
                        index * 25, // Y位置
                        line, // 文本
                        { fontSize: '12px', fill: '#cccccc' } // 样式
                    ).setOrigin(0, 0); // 锚点在左上角
                    contentTexts.push(text);
                });
                
                // 添加到内容容器
                component.contentContainer.add(contentTexts);
                // 更新组件引用
                component.content = contentTexts;
                break;
        }
    }
    
    /**
     * 设置信息栏自动清理策略
     * @param {boolean} enabled - 是否启用自动清理
     */
    setInfoBarAutoCleanup(enabled) {
        this.infoBarConfig.autoCleanup = enabled;
    }
    
    /**
     * 更新信息栏内容的方法（向后兼容）
     * 兼容旧接口，更新第一个文本组件
     * @param {Array} newContent - 新的内容数组
     */
    updateInfoBarContent(newContent) {
        // 查找第一个文本类型组件
        const firstTextComponentId = Object.keys(this.infoBarComponents).find(
            id => this.infoBarComponents[id] && this.infoBarComponents[id].type === 'text'
        );
        
        // 如果找到，更新其内容
        if (firstTextComponentId) {
            this.updateInfoBarComponent(firstTextComponentId, newContent);
        }
    }
    
    /**
     * update方法 - 场景更新方法
     * 在Phaser中，每帧都会调用此方法
     */
    update() {
        // 示例：模拟动态更新角色状态
        if (this.infoBarVisible && this.infoBarComponents.playerStats) {
            // 这里可以添加真实的状态更新逻辑
            // 例如：根据游戏中的实际数据更新角色状态信息
        }
    }
}