`;
document.body.appendChild(panel);
// 面板拖拽
const hd = panel.querySelector('.erp-hd');
let isDragging = false;
let offsetX, offsetY;
hd.addEventListener('mousedown', (e) => {
isDragging = true;
const rect = panel.getBoundingClientRect();
offsetX = e.clientX - rect.left;
offsetY = e.clientY - rect.top;
panel.style.transition = 'none';
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
panel.style.left = `${e.clientX - offsetX}px`;
panel.style.top = `${e.clientY - offsetY}px`;
panel.style.bottom = 'auto';
panel.style.right = 'auto';
});
document.addEventListener('mouseup', () => {
isDragging = false;
panel.style.transition = 'opacity 0.2s, transform 0.2s';
});
// 绑定面板事件
panel.querySelector('.erp-hd-close').addEventListener('click', () => {
panel.classList.remove('open');
state.panelOpen = false;
});
// 音色模式切换
panel.querySelectorAll('.erp-tab').forEach(tab => {
tab.addEventListener('click', () => {
panel.querySelectorAll('.erp-tab').forEach(t => t.classList.remove('active'));
tab.classList.add('active');
state.voiceMode = tab.dataset.mode;
GM_setValue('voiceMode', state.voiceMode);
// 网络音色隐藏音调调节
document.getElementById('erp-pitch-row').style.display = state.voiceMode === 'online' ? 'none' : '';
renderVoiceSelect();
stopPlayback();
});
});
// 音色选择
panel.querySelector('#erp-voice-select').addEventListener('change', (e) => {
state.selectedVoiceId = e.target.value;
GM_setValue('selectedVoiceId', state.selectedVoiceId);
const voiceName = e.target.options[e.target.selectedIndex].text;
panel.querySelector('#erp-voice-name').textContent = voiceName;
stopPlayback();
});
// 语速调节
const rateInput = panel.querySelector('#erp-rate');
const rateVal = panel.querySelector('#erp-rate-val');
rateInput.addEventListener('input', (e) => {
state.rate = parseFloat(e.target.value);
rateVal.textContent = `${state.rate.toFixed(1)}x`;
GM_setValue('rate', state.rate);
if (state.utterance) state.utterance.rate = state.rate;
});
// 音调调节
const pitchInput = panel.querySelector('#erp-pitch');
const pitchVal = panel.querySelector('#erp-pitch-val');
pitchInput.addEventListener('input', (e) => {
state.pitch = parseFloat(e.target.value);
pitchVal.textContent = `${state.pitch.toFixed(1)}x`;
GM_setValue('pitch', state.pitch);
if (state.utterance) state.utterance.pitch = state.pitch;
});
// 音量调节
const volumeInput = panel.querySelector('#erp-volume');
const volumeVal = panel.querySelector('#erp-volume-val');
volumeInput.addEventListener('input', (e) => {
state.volume = parseFloat(e.target.value);
volumeVal.textContent = `${state.volume.toFixed(1)}x`;
GM_setValue('volume', state.volume);
if (state.utterance) state.utterance.volume = state.volume;
if (state.audioEl) state.audioEl.volume = state.volume;
});
// 播放控制按钮
panel.querySelector('.erp-play-btn').addEventListener('click', togglePlayPause);
panel.querySelector('.erp-stop-btn').addEventListener('click', stopPlayback);
panel.querySelector('.erp-prev-btn').addEventListener('click', playPrevParagraph);
panel.querySelector('.erp-next-btn').addEventListener('click', playNextParagraph);
// API配置面板展开/收起
const configToggle = panel.querySelector('#erp-config-toggle');
const configPanel = panel.querySelector('#erp-config-panel');
configToggle.addEventListener('click', () => {
configPanel.classList.toggle('show');
});
// 保存API配置
panel.querySelector('#erp-save-config').addEventListener('click', () => {
// 保存火山引擎
API_CONFIG.volc.ak = document.getElementById('volc-ak').value;
API_CONFIG.volc.sk = document.getElementById('volc-sk').value;
API_CONFIG.volc.appId = document.getElementById('volc-appId').value;
GM_setValue('volc_ak', API_CONFIG.volc.ak);
GM_setValue('volc_sk', API_CONFIG.volc.sk);
GM_setValue('volc_appId', API_CONFIG.volc.appId);
// 保存腾讯云
API_CONFIG.tencent.secretId = document.getElementById('tencent-secretId').value;
API_CONFIG.tencent.secretKey = document.getElementById('tencent-secretKey').value;
API_CONFIG.tencent.appId = document.getElementById('tencent-appId').value;
GM_setValue('tencent_secretId', API_CONFIG.tencent.secretId);
GM_setValue('tencent_secretKey', API_CONFIG.tencent.secretKey);
GM_setValue('tencent_appId', API_CONFIG.tencent.appId);
// 保存标贝
API_CONFIG.biaobei.apiKey = document.getElementById('biaobei-apiKey').value;
GM_setValue('biaobei_apiKey', API_CONFIG.biaobei.apiKey);
// 保存思必驰
API_CONFIG.sbc.apiKey = document.getElementById('sbc-apiKey').value;
GM_setValue('sbc_apiKey', API_CONFIG.sbc.apiKey);
// 保存出门问问
API_CONFIG.cwmw.apiKey = document.getElementById('cwmw-apiKey').value;
GM_setValue('cwmw_apiKey', API_CONFIG.cwmw.apiKey);
showTip('✅ API配置保存成功', 'ok');
});
}
function createFAB() {
// 避免重复创建
if (document.querySelector('#erp-fab')) return;
const fab = document.createElement('button');
fab.id = 'erp-fab';
fab.innerHTML = '