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

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"