feat: improve code consistency by standardizing event listener syntax and removing unused API Key buttons

web/static/js/app.js

@@ -26,7 +26,7 @@ function saveApiKey() {
     }
 }
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
     // 获取DOM元素
     const textInput = document.getElementById('text');
     const voiceSelect = document.getElementById('voice');
@@ -37,7 +37,6 @@ document.addEventListener('DOMContentLoaded', function() {
     const pitchValue = document.getElementById('pitchValue');
     const apiKeyInput = document.getElementById('api-key');
     const apiKeyGroup = document.getElementById('api-key-group');
-    const apiKeyButtons = document.getElementById('api-key-buttons');
     const speakButton = document.getElementById('speak');
     const downloadButton = document.getElementById('download');
     const copyLinkButton = document.getElementById('copyLink');
@@ -47,11 +46,8 @@ document.addEventListener('DOMContentLoaded', function() {
     const charCount = document.getElementById('charCount');
     const toggleApiKeyButton = document.getElementById('toggle-api-key');
     const apiKeyStatus = document.getElementById('api-key-status');
-    const apiKeySaveButton = document.getElementById('api-key-save');
-    const apiKeyClearButton = document.getElementById('api-key-clear');
-    const apiKeyTestButton = document.getElementById('api-key-test');
+    const apiKeySaveButton = document.getElementById('apvi-key-save');
     const togglePasswordButton = document.getElementById('toggle-password');
-    const apiKeyHelp = document.getElementById('api-key-help');
 
     // 保存最后一个音频URL
     let lastAudioUrl = '';
@@ -64,24 +60,24 @@ document.addEventListener('DOMContentLoaded', function() {
     loadApiKeyFromLocalStorage(); // 加载API Key
 
     // 更新字符计数
-    textInput.addEventListener('input', function() {
+    textInput.addEventListener('input', function () {
         charCount.textContent = this.value.length;
     });
 
     // 更新语速值显示
-    rateInput.addEventListener('input', function() {
+    rateInput.addEventListener('input', function () {
         const value = this.value;
         rateValue.textContent = value + '%';
     });
 
     // 更新语调值显示
-    pitchInput.addEventListener('input', function() {
+    pitchInput.addEventListener('input', function () {
         const value = this.value;
         pitchValue.textContent = value + '%';
     });
 
     // 语音选择变化时更新可用风格
-    voiceSelect.addEventListener('change', function() {
+    voiceSelect.addEventListener('change', function () {
         updateStyleOptions();
     });
 
@@ -185,7 +181,7 @@ document.addEventListener('DOMContentLoaded', function() {
         speakButton.addEventListener('click', generateSpeech);
 
         // 下载按钮点击事件
-        downloadButton.addEventListener('click', function() {
+        downloadButton.addEventListener('click', function () {
             if (lastAudioUrl) {
                 const a = document.createElement('a');
                 a.href = lastAudioUrl;
@@ -197,7 +193,7 @@ document.addEventListener('DOMContentLoaded', function() {
         });
 
         // 复制链接按钮点击事件
-        copyLinkButton.addEventListener('click', function() {
+        copyLinkButton.addEventListener('click', function () {
             if (lastAudioUrl) {
                 // 获取完整的URL，包括域名部分
                 const fullUrl = new URL(lastAudioUrl, window.location.origin).href;
@@ -206,7 +202,7 @@ document.addEventListener('DOMContentLoaded', function() {
         });
 
         // 复制HttpTTS链接按钮点击事件
-        copyHttpTtsLinkButton.addEventListener('click', function() {
+        copyHttpTtsLinkButton.addEventListener('click', function () {
             const text = textInput.value.trim();
             if (!text) {
                 showCustomAlert('请输入要转换的文本', 'warning');
@@ -232,8 +228,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
         // 显示/隐藏API Key区域的按钮事件
         if (toggleApiKeyButton) {
-            toggleApiKeyButton.addEventListener('click', function() {
-                console.log('API Key button clicked');  // 添加调试日志
+            toggleApiKeyButton.addEventListener('click', function () {
                 if (apiKeyGroup) {
                     apiKeyGroup.classList.toggle('hidden');
 
@@ -247,7 +242,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
         // API Key显示/隐藏功能
         if (togglePasswordButton) {
-            togglePasswordButton.addEventListener('click', function() {
+            togglePasswordButton.addEventListener('click', function () {
                 const type = apiKeyInput.getAttribute('type') === 'password' ? 'text' : 'password';
                 apiKeyInput.setAttribute('type', type);
 
@@ -265,11 +260,9 @@ document.addEventListener('DOMContentLoaded', function() {
             });
         }
 
-        // 删除原有的保存API Key事件绑定，使用HTML onclick
-
         // 按Enter键保存API Key
         if (apiKeyInput) {
-            apiKeyInput.addEventListener('keydown', function(event) {
+            apiKeyInput.addEventListener('keydown', function (event) {
                 if (event.key === 'Enter') {
                     event.preventDefault();
                     saveApiKey(); // 直接调用全局保存函数
@@ -277,72 +270,6 @@ document.addEventListener('DOMContentLoaded', function() {
             });
         }
 
-        // 清除API Key
-        if (apiKeyClearButton) {
-            apiKeyClearButton.addEventListener('click', function() {
-                apiKeyInput.value = '';
-                localStorage.removeItem('apiKey');
-                showNotification('API Key 已清除', 'success');
-
-                // 更新状态提示
-                apiKeyStatus.textContent = '';
-                apiKeyStatus.className = 'api-key-status hidden';
-            });
-        }
-
-        // 测试API Key
-        if (apiKeyTestButton) {
-            apiKeyTestButton.addEventListener('click', function() {
-                const apiKey = apiKeyInput.value.trim();
-                if (!apiKey) {
-                    showNotification('请先输入API Key再测试', 'warning');
-                    apiKeyInput.focus();
-                    return;
-                }
-
-                apiKeyTestButton.disabled = true;
-                apiKeyTestButton.innerHTML = '<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> 测试中...';
-
-                // 使用一个简单请求测试API Key
-                fetch(`${config.basePath}/voices?limit=1`, {
-                    headers: {
-                        'Authorization': `Bearer ${apiKey}`
-                    }
-                })
-                .then(response => {
-                    if (response.ok) {
-                        apiKeyStatus.textContent = 'API Key 有效';
-                        apiKeyStatus.className = 'api-key-status valid';
-                        apiKeyStatus.classList.remove('hidden');
-                        showNotification('API Key 验证成功', 'success');
-                    } else {
-                        apiKeyStatus.textContent = 'API Key 无效';
-                        apiKeyStatus.className = 'api-key-status invalid';
-                        apiKeyStatus.classList.remove('hidden');
-                        showNotification('API Key 验证失败', 'error');
-                    }
-                })
-                .catch(error => {
-                    console.error('测试API Key时出错:', error);
-                    apiKeyStatus.textContent = '测试失败，请检查网络';
-                    apiKeyStatus.className = 'api-key-status invalid';
-                    apiKeyStatus.classList.remove('hidden');
-                    showNotification('无法完成API Key测试', 'error');
-                })
-                .finally(() => {
-                    apiKeyTestButton.disabled = false;
-                    apiKeyTestButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg> 测试';
-                });
-            });
-        }
-
-        // 显示帮助信息
-        if (apiKeyHelp) {
-            apiKeyHelp.addEventListener('click', function() {
-                showNotification('Azure API Key 可在Microsoft Azure门户中的认知服务资源下找到。更多信息请访问帮助文档。', 'info', 8000);
-            });
-        }
-
         // 增强音频播放器
         enhanceAudioPlayer();
     }
@@ -479,7 +406,7 @@ document.addEventListener('DOMContentLoaded', function() {
         });
 
         // 开始观察DOM变化
-        observer.observe(document.body, { childList: true, subtree: true });
+        observer.observe(document.body, {childList: true, subtree: true});
     }
 
     // 复制内容到剪贴板的通用函数
@@ -520,7 +447,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
         // 添加图标
         let icon = '';
-        switch(type) {
+        switch (type) {
             case 'success':
                 icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="#10b981"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>';
                 break;
@@ -554,38 +481,6 @@ document.addEventListener('DOMContentLoaded', function() {
             }, 300);
         }, duration);
     }
-
-    // 添加特定的初始化函数来确保API Key按钮功能正常
-    function ensureApiKeyFunctionality() {
-        const saveApiKeyBtn = document.getElementById('api-key-save');
-        if (saveApiKeyBtn && !saveApiKeyBtn.hasEventListener) {
-            saveApiKeyBtn.hasEventListener = true;
-            saveApiKeyBtn.addEventListener('click', function() {
-                console.log('Save API Key button clicked (fallback)');
-
-                const apiKeyInput = document.getElementById('api-key');
-                if (apiKeyInput) {
-                    const apiKey = apiKeyInput.value.trim();
-                    if (apiKey) {
-                        localStorage.setItem('apiKey', apiKey);
-                        showCustomAlert('API Key 已成功保存', 'success');
-
-                        const apiKeyGroup = document.getElementById('api-key-group');
-                        if (apiKeyGroup) {
-                            apiKeyGroup.classList.add('hidden');
-                        }
-                    } else {
-                        showCustomAlert('请输入有效的API Key', 'warning');
-                        apiKeyInput.focus();
-                    }
-                }
-            });
-        }
-    }
-
-    // 确保API Key功能在DOM加载后初始化
-    setTimeout(ensureApiKeyFunctionality, 500);
-
     // 添加自定义alert函数到全局范围
     window.showCustomAlert = showCustomAlert;
 });
@@ -683,6 +578,6 @@ function showCustomAlert(message, type = 'info', title = '', duration = 3000) {
 
 // 替换全局的alert函数（可选，谨慎使用）
 const originalAlert = window.alert;
-window.alert = function(message) {
+window.alert = function (message) {
     showCustomAlert(message, 'info');
 };