`;
document.body.appendChild(panel);
loadVoices().then(voices => {
state.voices = voices;
renderVoiceSelect();
// 初始化时同步配置区可见性
const volcanoToggle = document.getElementById('erp-volcano-toggle');
const tencentToggle = document.getElementById('erp-tencent-toggle');
if (volcanoToggle) volcanoToggle.style.display = state.voiceMode === 'volcano' ? '' : 'none';
if (tencentToggle) tencentToggle.style.display = state.voiceMode === 'tencent' ? '' : 'none';
});
bindUIEvents(fab, panel);
makeDraggable(panel, panel.querySelector('#erp-hd'));
}
// =====================================================
// 渲染音色下拉
// =====================================================
function renderVoiceSelect() {
const sel = document.getElementById('erp-voice');
const tip = document.getElementById('erp-tip');
const pitchRow = document.getElementById('erp-pitch-row');
if (!sel) return;
sel.innerHTML = '';
if (state.voiceMode === 'local') {
if (tip) { tip.className = 'erp-tip'; tip.textContent = ''; }
if (pitchRow) pitchRow.style.display = '';
const zh = state.voices.filter(v => /^(zh|cmn|yue)/i.test(v.lang));
const en = state.voices.filter(v => /^en/i.test(v.lang));
const others = state.voices.filter(v => !zh.includes(v) && !en.includes(v));
const addGroup = (label, list) => {
if (!list.length) return;
const og = document.createElement('optgroup');
og.label = label;
list.forEach(v => {
const o = document.createElement('option');
o.value = v.voiceURI;
o.textContent = getVoiceDisplayName(v);
if (v.voiceURI === state.selectedVoiceId) o.selected = true;
og.appendChild(o);
});
sel.appendChild(og);
};
addGroup('🇨🇳 中文音色', zh);
addGroup('🇺🇸 英文音色', en);
if (others.length) addGroup('🌐 其他', others);
if (!state.selectedVoiceId || !state.voices.find(v => v.voiceURI === state.selectedVoiceId)) {
const first = zh[0] || state.voices[0];
if (first) { state.selectedVoiceId = first.voiceURI; sel.value = first.voiceURI; }
} else {
sel.value = state.selectedVoiceId;
}
// 隐藏所有在线 Key 配置区
['erp-volcano-form','erp-volcano-toggle','erp-tencent-form','erp-tencent-toggle'].forEach(id => {
const el = document.getElementById(id);
if (el) el.style.display = 'none';
});
} else if (state.voiceMode === 'volcano') {
// 火山引擎网络音色
if (pitchRow) pitchRow.style.display = 'none';
const hasKey = VOLCANO_CFG.appid && VOLCANO_CFG.token;
if (tip) {
tip.className = 'erp-tip show' + (hasKey ? '' : ' err');
tip.innerHTML = hasKey
? '🌋 火山引擎 TTS · 已配置 AppID'
: '⚠ 未配置 AppID/Token，请展开下方设置';
}
// 按 group 分组渲染
const groupMap = {};
ONLINE_VOICES.forEach(v => {
if (!groupMap[v.group]) groupMap[v.group] = [];
groupMap[v.group].push(v);
});
Object.entries(groupMap).forEach(([label, list]) => {
const og = document.createElement('optgroup');
og.label = label;
list.forEach(v => {
const o = document.createElement('option');
o.value = v.id; o.textContent = v.name;
if (v.id === state.selectedVoiceId) o.selected = true;
og.appendChild(o);
});
sel.appendChild(og);
});
if (!state.selectedVoiceId || !ONLINE_VOICES.find(v => v.id === state.selectedVoiceId)) {
state.selectedVoiceId = ONLINE_VOICES[0].id;
}
sel.value = state.selectedVoiceId;
// 隐藏腾讯云、显示火山配置区
['erp-tencent-form','erp-tencent-toggle'].forEach(id => {
const el = document.getElementById(id); if (el) el.style.display = 'none';
});
renderVolcanoKeyForm();
const toggle = document.getElementById('erp-volcano-toggle');
if (toggle) toggle.style.display = '';
} else if (state.voiceMode === 'tencent') {
// 腾讯云网络音色
if (pitchRow) pitchRow.style.display = 'none';
const hasKey = TENCENT_CFG.secretId && TENCENT_CFG.secretKey;
if (tip) {
tip.className = 'erp-tip show' + (hasKey ? '' : ' err');
tip.innerHTML = hasKey
? '🐧 腾讯云 TTS · 已配置 SecretId'
: '⚠ 未配置 SecretId/SecretKey，请展开下方设置';
}
// 按 group 分组渲染
const tGroupMap = {};
TENCENT_VOICES.forEach(v => {
if (!tGroupMap[v.group]) tGroupMap[v.group] = [];
tGroupMap[v.group].push(v);
});
Object.entries(tGroupMap).forEach(([label, list]) => {
const og = document.createElement('optgroup');
og.label = label;
list.forEach(v => {
const o = document.createElement('option');
o.value = String(v.id); o.textContent = v.name;
if (String(v.id) === state.selectedVoiceId) o.selected = true;
og.appendChild(o);
});
sel.appendChild(og);
});
const firstId = String(TENCENT_VOICES[0].id);
if (!state.selectedVoiceId || !TENCENT_VOICES.find(v => String(v.id) === state.selectedVoiceId)) {
state.selectedVoiceId = firstId;
}
sel.value = state.selectedVoiceId;
// 隐藏火山引擎、显示腾讯云配置区
['erp-volcano-form','erp-volcano-toggle'].forEach(id => {
const el = document.getElementById(id); if (el) el.style.display = 'none';
});
renderTencentKeyForm();
const toggle = document.getElementById('erp-tencent-toggle');
if (toggle) toggle.style.display = '';
}
}
// =====================================================
// 火山引擎 Key 配置表单
// =====================================================
function renderVolcanoKeyForm() {
if (document.getElementById('erp-volcano-form')) return;
const settings = document.querySelector('#erp-panel .erp-settings');
if (!settings) return;
const div = document.createElement('div');
div.id = 'erp-volcano-form';
div.style.cssText = 'display:none';
div.innerHTML = `