shiyue/Microsoft-tts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
王锦强
2025-03-13 23:14:36 +08:00
parent 57057688f5
commit 39c776998e
2 changed files with 33 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
web/static/js/app.js
View File

@@ -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 = '';
@@ -233,7 +229,6 @@ document.addEventListener('DOMContentLoaded', function() {
// 显示/隐藏API Key区域的按钮事件
if (toggleApiKeyButton) {
toggleApiKeyButton.addEventListener('click', function () {
console.log('API Key button clicked'); // 添加调试日志
if (apiKeyGroup) {
apiKeyGroup.classList.toggle('hidden');
@@ -265,8 +260,6 @@ document.addEventListener('DOMContentLoaded', function() {
});
}
// 删除原有的保存API Key事件绑定，使用HTML onclick
// 按Enter键保存API Key
if (apiKeyInput) {
apiKeyInput.addEventListener('keydown', function (event) {
@@ -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();
}
@@ -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;
});

51
web/templates/index.html
View File

@@ -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"