</div>
<div class="panel-content">
<div class="status-system">
<div class="current-status" id="rhyme-status">就绪</div>
<div class="status-details">
<span id="rhyme-actions">已加载: 6个动作</span>
</div>
</div>
</div>
</div>
</div>

<!-- 中央工作区 -->
<div class="workspace-system">
<div class="panel">
<div class="panel-header">
<h3 class="panel-title">🎨 视觉舞台</h3>
</div>
<div class="panel-content">
<div class="rhyme-visual-stage" id="rhyme-stage">
<div class="rhyme-element" id="element1" style="top: 50px; left: 50px;">元素1</div>
<div class="rhyme-element" id="element2" style="top: 50px; left: 150px;">元素2</div>
<div class="rhyme-element" id="element3" style="top: 150px; left: 50px;">元素3</div>
<div class="rhyme-element" id="element4" style="top: 150px; left: 150px;">元素4</div>
</div>
</div>
</div>

<div class="panel">
<div class="panel-header">
<h3 class="panel-title">💻 代码实验区</h3>
</div>
<div class="panel-content">
<div class="editor-container">
<textarea class="editor" id="rhyme-code" placeholder="在这里编写谐音代码...&#10;例如：&#10;谐音系统.执行('onckpck', '拍开')&#10;谐音系统.执行('onckqck', '圈旋')">
// 谐音编程实验代码
谐音系统.执行('onckdck', 'element1')
谐音系统.执行('onckpck', '拍开')
谐音系统.执行('onckqck', '圈旋')</textarea>
<div class="btn-group">
<button class="btn btn-success" id="run-rhyme-code">▶️ 运行代码</button>
<button class="btn btn-outline" id="clear-rhyme-code">🗑️ 清空</button>
</div>
</div>
</div>
</div>
</div>

<!-- 右侧控制面板 -->
<div class="control-system">
<div class="panel">
<div class="panel-header">
<h3 class="panel-title">🎯 快速测试</h3>
</div>
<div class="panel-content">
<div class="btn-group" style="flex-direction: column;">
<button class="btn" data-quick-test="onckdck">🖱️ 测试点击</button>
<button class="btn btn-warning" data-quick-test="onckpck">👏 测试拍开</button>
<button class="btn btn-success" data-quick-test="onckyck">✅ 测试确认</button>
<button class="btn btn-danger" data-quick-test="onckfck">❌ 测试取消</button>
<button class="btn btn-info" data-quick-test="onckqck">🔄 测试圈旋</button>
</div>
</div>
</div>

<div class="panel">
<div class="panel-header">
<h3 class="panel-title">🔧 自定义谐音</h3>
</div>
<div class="panel-content">
<div class="input-group">
<label class="input-label">新谐音名称</label>
<input type="text" class="input-field" id="new-rhyme-name" placeholder="例如: onckick">
</div>
<div class="input-group">
<label class="input-label">动作描述</label>
<input type="text" class="input-field" id="new-rhyme-desc" placeholder="例如: 拆开动作">
</div>
<button class="btn btn-outline" id="create-rhyme">➕ 创建谐音</button>
</div>
</div>

<div class="panel">
<div class="panel-header">
<h3 class="panel-title">📖 使用说明</h3>
</div>
<div class="panel-content">
<div style="font-size: 0.875rem; line-height: 1.5; color: var(--gray-600);">
<p><strong>谐音编程系统</strong>让您通过发音直觉来编程：</p>
<ul style="margin-left: var(--space-4); margin-top: var(--space-2);">
<li>onckdck = 点开头 → 点击动作</li>
<li>onckpck = 拍开头 → 拍开动作</li>
<li>onckyck = 压开头 → 确认动作</li>
<li>onckfck = 放开头 → 取消动作</li>
<li>onckqck = 圈开头 → 圈旋动作</li>
</ul>
</div>
</div>
</div>
</div>
</div>

<!-- 其他系统面板将在这里添加 -->
<!-- 音乐合成系统 -->
<div class="system-panels" id="music-system" style="display: none;">
<!-- 音乐系统内容 -->
<div class="sidebar-system">
<div class="panel">
<div class="panel-header">
<h3 class="panel-title">🎤 发音人库</h3>
</div>
<div class="panel-content">
<div class="card-grid">
<div class="card active" data-voice="female1">
<div style="display: flex; align-items: center; gap: var(--space-3);">
<div style="width: 24px; height: 24px; border-radius: 50%; background: var(--primary-1); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.