card.classList.toggle('card-active', card.dataset.voice === voice);
});
document.getElementById('current-voice').textContent =
`发音人: ${this.getVoiceDisplayName(voice)}`;
}

updateInstrumentSelectionUI(instrument) {
document.querySelectorAll('[data-instrument]').forEach(card => {
card.classList.toggle('card-active', card.dataset.instrument === instrument);
});
}

updateEmotionUI(emotion, value) {
if (emotion && value !== undefined) {
document.getElementById(`${emotion}-value`).textContent = `${value}%`;
} else {
// 更新所有情感滑块
Object.keys(this.emotionSystem.profile).forEach(emotion => {
const value = this.emotionSystem.profile[emotion];
document.getElementById(`${emotion}-value`).textContent = `${value}%`;
document.querySelector(`[data-emotion="${emotion}"]`).value = value;
});
}
}

updateEffectUI(effect, value) {
if (effect && value !== undefined) {
document.getElementById(`${effect}-value`).textContent = `${value}%`;
} else {
// 更新所有效果滑块
Object.keys(this.effectSystem.profile).forEach(effect => {
const value = this.effectSystem.profile[effect];
document.getElementById(`${effect}-value`).textContent = `${value}%`;
document.querySelector(`[data-effect="${effect}"]`).value = value;
});
}
}

updateHarmonyIntensityUI(intensity) {
document.getElementById('harmony-intensity').value = intensity;
document.getElementById('harmony-intensity-value').textContent = `${intensity}%`;
}

updateSwingUI(swing) {
document.getElementById('swing').value = swing;
document.getElementById('swing-value').textContent = `${swing}%`;
}

updateProgressUI() {
const progress = (this.systemState.currentTime / this.systemState.totalTime) * 100;
document.getElementById('progress').style.width = `${progress}%`;
document.getElementById('current-time').textContent = this.formatTime(this.systemState.currentTime);
document.getElementById('total-time').textContent = this.formatTime(this.systemState.totalTime);
}

updateCurrentSectionUI(sectionName) {
document.getElementById('current-section').textContent = `[${sectionName}]`;
}

updateVisualizations() {
if (this.visualization && this.visualization.update) {
this.visualization.update();
}
}

updateAllVisualizations() {
this.visualization.waveform.update();
this.visualization.spectrum.update();
this.visualization.timeline.update();
}

// 工具方法
delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}

formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}

getVoiceDisplayName(voice) {
const names = {
female1: '温柔女声',
female2: '活泼女声',
male1: '沉稳男声',
male2: '激昂男声',
child: '童声'
};
return names[voice] || '未知声音';
}

getInstrumentDisplayName(instrument) {
const names = {
piano: '钢琴',
strings: '弦乐',
guitar: '吉他',
flute: '长笛',
drums: '鼓组',
bass: '贝斯'
};
return names[instrument] || '未知乐器';
}

// 消息系统
showMessage(message, type = 'info') {
const messageSystem = document.getElementById('message-system');
const messageEl = document.createElement('div');
messageEl.className = `message message-${type}`;
messageEl.textContent = message;

messageSystem.appendChild(messageEl);

setTimeout(() => {
if (messageEl.parentNode) {
messageEl.parentNode.removeChild(messageEl);
}
}, this.config.ux.messageTimeout);
}

// 加载系统
showLoading(message = '加载中...') {
const overlay = document.getElementById('loading-overlay');
overlay.style.display = 'flex';

// 设置加载超时
setTimeout(() => {
if (overlay.style.display !== 'none') {
this.hideLoading();
this.showMessage('加载超时，请检查系统状态', 'warning');
}
}, this.config.ux.loadingTimeout);
}

hideLoading() {
const overlay = document.getElementById('loading-overlay');
overlay.style.display = 'none';
}

// 错误处理
handleSystemError(context, error) {
console.error(`${context}:`, error);
this.showMessage(`${context}: ${error.message}`, 'error');

// 发布错误事件
this.emit('error:occurred', { context, error });
}

// 标签切换
switchTab(tabName) {
// 更新标签状态
document.querySelectorAll('.tab').forEach(tab => {
tab.classList.toggle('tab-active', tab.dataset.tab === tabName);
});

// 显示对应的编辑器
document.querySelectorAll('.editor').forEach(editor => {
editor.style.display = 'none';
});

const activeEditor = document.getElementById(`${tabName}-editor`);
if (activeEditor) {
activeEditor.style.display = 'block';
}
}

// 保存预设
savePreset() {
this.saveUserConfiguration();
this.showMessage('预设已保存', 'success');
}

// 加载预设
loadPreset(presetName) {
const presets = {
pop: { bpm: 120, voice: 'female2', instrument: 'piano', harmony: 'third' },
rock: { bpm: 140, voice: 'male2', instrument: 'guitar', harmony: 'fifth' },
ballad: { bpm: 80, voice: 'female1', instrument: 'strings', harmony: 'full' },
electronic: { bpm: 128, voice: 'male1', instrument: 'synth', harmony: 'octave' },