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 apiKeySaveButton = document.getElementById('apvi-key-save');
-    const apiKeyClearButton = document.getElementById('api-key-clear');
-    const apiKeyTestButton = document.getElementById('api-key-test');
     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() {
+            toggleApiKeyButton.addEventListener('click', function () {
-                console.log('API Key button clicked');  // 添加调试日志
                 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');
 };

web/templates/index.html

@@ -615,28 +615,6 @@
             transition: all 0.3s ease;
         }
 
-        .api-key-container::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            border-radius: 12px;
-            padding: 1px;
-            background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.3));
-            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-            -webkit-mask-composite: xor;
-            mask-composite: exclude;
-            z-index: 0;
-            opacity: 0.7;
-        }
-
-        .api-key-container:hover::before {
-            opacity: 1;
-            background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(37, 99, 235, 0.2), rgba(59, 130, 246, 0.4));
-        }
-
         .api-key-header {
             display: flex;
             justify-content: space-between;
@@ -808,20 +786,19 @@
 
         /* 管理API按钮增强 */
         .manage-api-btn {
-            background: rgba(59, 130, 246, 0.08);
+            background: rgba(59, 130, 246, 0);
             color: #3b82f6;
             padding: 0.35rem 0.75rem;
             border-radius: 6px;
-            font-size: 0.85rem;
+            font-size: 1rem;
             display: inline-flex;
             align-items: center;
             gap: 0.35rem;
             transition: all 0.2s ease;
-            border: 1px solid rgba(59, 130, 246, 0.15);
         }
 
         .manage-api-btn:hover {
-            background: rgba(59, 130, 246, 0.15);
+            background: rgba(59, 130, 246, 0);
             color: #2563eb;
             transform: translateY(-1px);
         }
@@ -1031,14 +1008,14 @@
 
         <main>
             <section class="panel-frosted bg-white/90 rounded-lg shadow-lg p-6 mb-6">
-                <!-- 替换原有的API Key管理按钮 -->
                 <div class="flex justify-end mb-4">
                     <button id="toggle-api-key" class="manage-api-btn inline-flex items-center gap-1.5 text-blue-600 bg-blue-50/80 px-3 py-1.5 rounded-md transition hover:bg-blue-100 hover:-translate-y-0.5">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 h-5">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+                             class="w-5 h-5">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                   d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
                         </svg>
-                        管理API Key
+                        <span id="api-key-text">设置</span>
                     </button>
                 </div>
 
@@ -1070,6 +1047,10 @@
                             </svg>
                         </button>
                     </div>
+
+                    <div class="api-key-buttons">
+                        <button id="api-key-save" class="api-key-button api-key-save" onclick="saveApiKey()">保存</button>
+                    </div>
                 </div>
 
                 <h2 class="text-xl font-bold mb-4 pb-2 border-b border-slate-200 text-slate-800">输入文本</h2>
@@ -1127,7 +1108,8 @@
                 </div>
 
                 <div class="flex justify-center mt-6">
-                    <button id="speak" class="btn-neo btn-neo-primary btn-neo-pulse btn-neo-icon inline-flex items-center gap-2 bg-gradient-to-b from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 text-white px-5 py-2.5 rounded-md font-medium shadow-lg shadow-blue-500/20 hover:shadow-blue-500/40 transition hover:-translate-y-0.5 active:translate-y-0 focus:outline-none focus:ring-2 focus:ring-blue-500/50">
+                    <button id="speak"
+                            class="btn-neo btn-neo-primary btn-neo-pulse btn-neo-icon inline-flex items-center gap-2 bg-gradient-to-b from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 text-white px-5 py-2.5 rounded-md font-medium shadow-lg shadow-blue-500/20 hover:shadow-blue-500/40 transition hover:-translate-y-0.5 active:translate-y-0 focus:outline-none focus:ring-2 focus:ring-blue-500/50">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                              stroke-width="2" class="w-5 h-5">
                             <path stroke-linecap="round" stroke-linejoin="round"
@@ -1143,7 +1125,8 @@
                 <div class="flex flex-col items-center">
                     <audio id="audioPlayer" controls class="w-full mb-4"></audio>
                     <div class="flex flex-wrap justify-center gap-2">
-                        <button id="download" class="btn-neo btn-neo-secondary btn-neo-icon inline-flex items-center gap-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-md transition hover:-translate-y-0.5 active:translate-y-0 shadow border border-slate-200">
+                        <button id="download"
+                                class="btn-neo btn-neo-secondary btn-neo-icon inline-flex items-center gap-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-md transition hover:-translate-y-0.5 active:translate-y-0 shadow border border-slate-200">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                  stroke="currentColor" stroke-width="2" class="w-5 h-5">
                                 <path stroke-linecap="round" stroke-linejoin="round"
@@ -1152,7 +1135,8 @@
                             下载音频
                         </button>
 
-                        <button id="copyLink" class="btn-neo btn-neo-secondary btn-neo-icon inline-flex items-center gap-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-md transition hover:-translate-y-0.5 active:translate-y-0 shadow border border-slate-200">
+                        <button id="copyLink"
+                                class="btn-neo btn-neo-secondary btn-neo-icon inline-flex items-center gap-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-md transition hover:-translate-y-0.5 active:translate-y-0 shadow border border-slate-200">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                  stroke="currentColor" stroke-width="2" class="w-5 h-5">
                                 <path stroke-linecap="round" stroke-linejoin="round"
@@ -1161,7 +1145,8 @@
                             复制链接
                         </button>
 
-                        <button id="copyHttpTtsLink" class="btn-neo btn-neo-secondary btn-neo-icon inline-flex items-center gap-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-md transition hover:-translate-y-0.5 active:translate-y-0 shadow border border-slate-200">
+                        <button id="copyHttpTtsLink"
+                                class="btn-neo btn-neo-secondary btn-neo-icon inline-flex items-center gap-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-md transition hover:-translate-y-0.5 active:translate-y-0 shadow border border-slate-200">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                  stroke="currentColor" stroke-width="2" class="w-5 h-5">
                                 <path stroke-linecap="round" stroke-linejoin="round"