`;
document.body.appendChild(settingsPanel);
bindSettingsEvents();
updatePresetList();
return settingsPanel;
}
function bindSettingsEvents() {
// 关闭按钮
settingsPanel.querySelector('.settings-close').addEventListener('click', (e) => {
e.stopPropagation();
settingsPanel.style.display = 'none';
});
// 透明度滑块
const opacitySlider = settingsPanel.querySelector('#opacity-slider');
const opacityValue = settingsPanel.querySelector('#opacity-value');
opacitySlider.addEventListener('input', () => {
opacityValue.textContent = `${opacitySlider.value}%`;
});
opacitySlider.addEventListener('click', (e) => {
e.stopPropagation();
});
// 切换模式单选按钮
settingsPanel.querySelectorAll('input[name="switchMode"]').forEach(radio => {
radio.addEventListener('click', (e) => {
e.stopPropagation();
});
});
// 添加预设
settingsPanel.querySelector('#add-preset').addEventListener('click', (e) => {
e.stopPropagation();
config.presetVolumes.push(50);
updatePresetList();
});
// 保存设置
settingsPanel.querySelector('#save-settings').addEventListener('click', (e) => {
e.stopPropagation();
const newConfig = { ...config };
newConfig.switchMode = settingsPanel.querySelector('input[name="switchMode"]:checked').value;
newConfig.buttonOpacity = parseInt(opacitySlider.value) / 100;
// 收集预设值
const presetInputs = settingsPanel.querySelectorAll('.preset-item input');
newConfig.presetVolumes = Array.from(presetInputs)
.map(input => parseInt(input.value) || 0)
.filter(v => v >= 0 && v <= 100)
.sort((a, b) => a - b);
saveConfig(newConfig);
settingsPanel.style.display = 'none';
alert('设置已保存！');
});
// 恢复默认
settingsPanel.querySelector('#reset-settings').addEventListener('click', (e) => {
e.stopPropagation();
if (confirm('确定要恢复默认设置吗？')) {
saveConfig({ ...DEFAULT_CONFIG });
updatePresetList();
opacitySlider.value = DEFAULT_CONFIG.buttonOpacity * 100;
opacityValue.textContent = `${DEFAULT_CONFIG.buttonOpacity * 100}%`;
settingsPanel.querySelector(`input[name="switchMode"][value="${DEFAULT_CONFIG.switchMode}"]`).checked = true;
}
});
}
function updatePresetList() {
const presetList = settingsPanel.querySelector('#preset-list');
presetList.innerHTML = '';
config.presetVolumes.forEach((vol, index) => {
const item = document.createElement('div');
item.className = 'preset-item';
item.innerHTML = `