</div>

<div class="status-system">
<div class="current-status" id="global-status">[系统就绪]</div>
<div class="status-details">
<span id="system-mode">模式: 谐音编程</span> |
<span id="system-actions">动作: 6个</span>
</div>
</div>
</div>
</footer>
</div>

<script>
// ===== 全局系统管理器 =====
class GlobalSystemManager {
constructor() {
this.currentSystem = 'rhyme-system';
this.isInitialized = false;
this.systems = new Map();

this.initialize();
}

initialize() {
this.initializeEventSystem();
this.initializeRhymeSystem();
this.initializeMusicSystem();
this.initializeUI();

this.isInitialized = true;
this.showMessage('系统初始化完成', 'success');
}

initializeEventSystem() {
// 导航标签切换
document.querySelectorAll('.nav-tab').forEach(tab => {
tab.addEventListener('click', (e) => {
const targetSystem = e.target.dataset.tab;
this.switchSystem(targetSystem);
});
});

// 全局控制按钮
document.getElementById('global-play').addEventListener('click', () => {
this.playCurrentSystem();
});

document.getElementById('global-stop').addEventListener('click', () => {
this.stopCurrentSystem();
});

// 帮助按钮
document.getElementById('help-btn').addEventListener('click', () => {
this.showHelp();
});
}

initializeRhymeSystem() {
this.systems.set('rhyme-system', new RhymeSystem());
}

initializeMusicSystem() {
this.systems.set('music-system', new MusicSystem());
}

initializeUI() {
this.updateGlobalStatus();
}

switchSystem(systemId) {
// 隐藏所有系统
document.querySelectorAll('.system-panels').forEach(panel => {
panel.style.display = 'none';
});

// 更新导航标签
document.querySelectorAll('.nav-tab').forEach(tab => {
tab.classList.remove('active');
});

// 显示目标系统
document.getElementById(systemId).style.display = 'grid';
document.querySelector(`[data-tab="${systemId}"]`).classList.add('active');

this.currentSystem = systemId;
this.updateGlobalStatus();

this.showMessage(`切换到: ${this.getSystemName(systemId)}`, 'info');
}

getSystemName(systemId) {
const names = {
'rhyme-system': '谐音编程',
'music-system': '音乐合成',
'visual-system': '视觉反馈',
'experiment-system': '实验工坊'
};
return names[systemId] || '未知系统';
}

playCurrentSystem() {
const system = this.systems.get(this.currentSystem);
if (system && system.play) {
system.play();
}
}

stopCurrentSystem() {
const system = this.systems.get(this.currentSystem);
if (system && system.stop) {
system.stop();
}
}

updateGlobalStatus() {
document.getElementById('global-status').textContent = `[${this.getSystemName(this.currentSystem)}模式]`;
document.getElementById('system-mode').textContent = `模式: ${this.getSystemName(this.currentSystem)}`;
}

showMessage(message, type = 'info') {
const messageDiv = document.createElement('div');
messageDiv.className = `message message-${type}`;
messageDiv.textContent = message;

const messageSystem = document.getElementById('message-system');
messageSystem.appendChild(messageDiv);

setTimeout(() => {
messageDiv.remove();
}, 3000);
}

showHelp() {
const helpText = `
🎵 谐音编程与音乐合成实验室 - 使用指南

1. 🧠 谐音编程系统
- 通过发音直觉进行编程
- 每个谐音对应一个视觉动作
- 支持自定义谐音创建

2. 🎵 音乐合成系统
- 智能语音合成与音乐生成
- 情感控制影响演唱风格
- 多乐器伴奏支持

3. 🎨 视觉反馈系统
- 丰富的动画效果
- 实时可视化反馈
- 交互式视觉体验

4. 🔬 实验工坊
- 创意实验空间
- 自定义功能开发
- 模板和示例

快捷键:
- 空格键: 播放/暂停
- ESC键: 停止
- Ctrl+S: 保存
- Ctrl+R: 录制
`;
alert(helpText);
}
}

// ===== 谐音编程系统 =====
class RhymeSystem {
constructor() {
this.actions = new Map();
this.selectedElements = new Set();
this.initialize();
}

initialize() {
this.initializeActions();
this.initializeEventListeners();
this.initializeVisualStage();
}

initializeActions() {
// 基础谐音动作
this.actions.set('onckdck', {
execute: (target, param) => this.executeClick(target, param),
description: '点击动作'
});

this.actions.set('onckpck', {
execute: (target, param) => this.executePat(target, param),