@@ -464,7 +485,8 @@ curl ${baseUrl}/v1/audio/speech \\
// 隐藏先前的错误信息
document.getElementById('apiErrorAlert').style.display = 'none';
- const apiKey = document.getElementById('apiKey').value;
+ // 获取API Key (从输入框或localStorage)
+ const apiKey = document.getElementById('apiKey').value || localStorage.getItem('tts_api_key') || '';
const text = encodeURIComponent(document.getElementById('text').value);
const voice = document.getElementById('voice').value;
const rate = document.getElementById('rate').value;
@@ -717,7 +739,64 @@ curl ${baseUrl}/v1/audio/speech \\
}
// 页面加载完成后加载语音列表
- window.onload = loadVoices;
+ window.onload = function() {
+ loadVoices();
+
+ // API Key 相关功能
+ const apiKeyInput = document.getElementById('apiKey');
+ const saveApiKeyBtn = document.getElementById('saveApiKey');
+ const editApiKeyBtn = document.getElementById('editApiKey');
+ const savedApiKeyInfo = document.getElementById('savedApiKeyInfo');
+ const apiKeyInputGroup = document.getElementById('apiKeyInputGroup');
+ const toggleApiKeyVisibilityBtn = document.getElementById('toggleApiKeyVisibility');
+
+ // 显示/隐藏API Key
+ toggleApiKeyVisibilityBtn.addEventListener('click', function() {
+ const type = apiKeyInput.getAttribute('type') === 'password' ? 'text' : 'password';
+ apiKeyInput.setAttribute('type', type);
+
+ // 修改图标
+ if (type === 'text') {
+ this.innerHTML = \`
\`;
+ } else {
+ this.innerHTML = \`
\`;
+ }
+ });
+
+ // 保存API Key到localStorage
+ saveApiKeyBtn.addEventListener('click', function() {
+ const apiKey = apiKeyInput.value.trim();
+ if (apiKey) {
+ localStorage.setItem('tts_api_key', apiKey);
+ apiKeyInputGroup.style.display = 'none';
+ saveApiKeyBtn.style.display = 'none';
+ savedApiKeyInfo.style.display = 'flex';
+ } else {
+ alert('请输入有效的API Key');
+ }
+ });
+
+ // 编辑已保存的API Key
+ editApiKeyBtn.addEventListener('click', function() {
+ apiKeyInputGroup.style.display = 'flex';
+ saveApiKeyBtn.style.display = 'inline-flex';
+ savedApiKeyInfo.style.display = 'none';
+ });
+
+ // 检查是否有保存的API Key
+ const savedApiKey = localStorage.getItem('tts_api_key');
+ if (savedApiKey) {
+ apiKeyInput.value = savedApiKey;
+ apiKeyInputGroup.style.display = 'none';
+ saveApiKeyBtn.style.display = 'none';
+ savedApiKeyInfo.style.display = 'flex';
+ }
+ };