feat: remove API documentation tab and clean up main content structure

workers/src/index.js

@@ -304,18 +304,8 @@ async function handleRequest(request) {
 
     <!-- 主内容 -->
     <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-      <div class="border-b border-gray-200">
-        <nav class="-mb-px flex space-x-8 justify-center" aria-label="Tabs">
-          <button class="tab-link py-4 px-1 text-ms-blue border-b-2 border-ms-blue hover:text-ms-dark-blue" data-tab="tab1">在线文本转语音</button>
-          <button class="tab-link py-4 px-1 text-gray-500 hover:text-ms-dark-blue" data-tab="tab2">API文档</button>
-          <button class="tab-link py-4 px-1 text-gray-500 hover:text-ms-dark-blue" data-tab="tab3">关于服务</button>
-        </nav>
-      </div>
-
-      <div id="tab1" class="tab-content mt-6">
-        <!-- 在线文本转语音表单内容 -->
       <div class="flex flex-col lg:flex-row gap-8">
-          <!-- 左边栏：语音转换 -->
+        <!-- 语音转换 -->
         <div class="lg:w-3/4 mx-auto">
           <div class="bg-white overflow-hidden shadow rounded-lg divide-y divide-gray-200">
             <div class="px-4 py-5 sm:px-6">
@@ -466,7 +456,6 @@ async function handleRequest(request) {
                     <div class="flex-shrink-0">
                       <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                         <path fill-rule="evenodd" d="M10 18a8 8 100-16 8 8 000 16zM8.707 7.293a1 1 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 101.414 1.414L10 11.414l1.293-1.293a1 1 001.414-1.414L11.414 10l1.293-1.293a1 1 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
-                        </svg>
                     </div>
                     <div class="ml-3">
                       <h3 class="text-sm font-medium text-red-800">无法加载语音列表</h3>
@@ -485,114 +474,6 @@ async function handleRequest(request) {
           </div>
         </div>
       </div>
-      </div>
-
-      <div id="tab2" class="tab-content mt-6" style="display: none;">
-        <!-- API文档部分 -->
-        <div class="w-full lg:w-2/3 mx-auto space-y-6">
-          <!-- API 文档链接 -->
-          <div class="bg-white overflow-hidden shadow rounded-lg divide-y divide-gray-200">
-            <div class="px-4 py-5 sm:px-6">
-              <h3 class="text-lg font-medium text-gray-900">API 文档</h3>
-            </div>
-            <div class="px-4 py-5 sm:p-6">
-              <h4 class="text-base font-medium text-gray-900 mb-2">文本转语音 API</h4>
-              <code class="text-sm block bg-gray-50 p-2 rounded mb-2 overflow-auto">/tts?api_key={key}&t={text}&v={voice}&r={rate}&p={pitch}&s={style}</code>
-              <ul class="list-disc pl-5 text-sm space-y-1">
-                <li><span class="text-red-600">api_key</span>: API密钥 [必填]</li>
-                <li><span class="text-red-600">t</span>: 文本内容 [必填]</li>
-                <li>v: 语音名称 [可选]</li>
-                <li>r: 语速调整 (-100~100) [可选]</li>
-                <li>p: 音调调整 (-100~100) [可选]</li>
-                <li>s: 语音风格 (general, cheerful, sad等) [可选]</li>
-              </ul>
-
-              <h4 class="text-base font-medium text-gray-900 mt-6 mb-2">OpenAI 兼容接口</h4>
-              <code class="text-sm block bg-gray-50 p-2 rounded mb-2 overflow-auto">/v1/audio/speech 或 /audio/speech</code>
-              <p class="text-sm mb-2">使用方式与 OpenAI TTS API 相同，支持以下参数：</p>
-              <ul class="list-disc pl-5 text-sm space-y-1">
-                <li><span class="text-red-600">model</span>: 模型名称 [必填]</li>
-                <li><span class="text-red-600">input</span>: 文本内容 [必填]</li>
-                <li>voice: 声音类型 (alloy, echo, fable, onyx, nova, shimmer)</li>
-                <li>speed: 语速 (0.25~4.0)</li>
-                <li>response_format: 输出格式 (mp3, opus)</li>
-              </ul>
-
-              <div class="mt-2 bg-gray-50 p-2 rounded">
-                <p class="text-xs text-gray-600 mb-1">示例请求:</p>
-                <code class="text-xs block overflow-auto whitespace-pre-wrap">
-curl -X POST ${baseUrl}/v1/audio/speech \\
-  -H "Authorization: Bearer your-secret-api-key" \\
-  -H "Content-Type: application/json" \\
-  -d '{
-    "model": "tts-1",
-    "input": "这是一个语音合成测试",
-    "voice": "alloy"
-  }' --output output.mp3
-                </code>
-              </div>
-
-              <h4 class="text-base font-medium text-gray-900 mt-6 mb-2">获取语音列表 API</h4>
-              <code class="text-sm block bg-gray-50 p-2 rounded mb-2 overflow-auto">/voices?l={locale}&f={format}</code>
-              <ul class="list-disc pl-5 text-sm space-y-1">
-                <li>l: 语言筛选 (如 'zh', 'en')</li>
-                <li>f: 返回格式 (0=TTS格式, 1=JSON格式)</li>
-              </ul>
-
-              <div class="mt-6 bg-amber-50 p-3 rounded-md">
-                <div class="flex">
-                  <div class="flex-shrink-0">
-                    <svg class="h-5 w-5 text-amber-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                      <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 11-2 0 1 1 12 0zm-1-8a1 1 00-1 1v3a1 1 001 1h1a1 1 100-2v-3a1 1 00-1-1H9z" clip-rule="evenodd" />
-                    </svg>
-                  </div>
-                  <div class="ml-3">
-                    <h3 class="text-sm font-medium text-amber-800">重要提示</h3>
-                    <div class="mt-2 text-sm text-amber-700">
-                      <ul class="list-disc pl-5 space-y-1">
-                        <li>所有请求必须提供有效的 API 密钥</li>
-                        <li>请确保中文文本进行 URL 编码</li>
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div id="tab3" class="tab-content mt-6" style="display: none;">
-        <!-- 关于服务部分 -->
-        <div class="w-full lg:w-2/3 mx-auto space-y-6">
-          <!-- 关于卡片 -->
-          <div class="bg-white overflow-hidden shadow rounded-lg">
-            <div class="px-4 py-5 sm:p-6">
-              <h3 class="text-lg leading-6 font-medium text-gray-900">关于服务</h3>
-              <div class="mt-2 max-w-xl text-sm text-gray-500">
-                <p>
-                  Microsoft TTS API 是一个高质量的文本转语音服务，支持多种语言和声音。
-                  通过简单的 API 调用，可以将文本转换为自然流畅的语音。
-                </p>
-              </div>
-              <div class="mt-3 bg-blue-50 p-3 rounded-md">
-                <div class="flex">
-                  <div class="flex-shrink-0">
-                    <svg class="h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0116 0zm-7-4a1 1 11-2 0 1 1 12 0zm-1-8a1 1 00-1 1v3a1 1 001 1h1a1 1 100-2v-3a1 1 00-1-1H9z" clip-rule="evenodd" />
-                    </svg>
-                  </div>
-                  <div class="ml-3 flex-1 md:flex md:justify-between">
-                    <p class="text-sm text-blue-700">
-                      支持 SSML 标签和 OpenAI 兼容接口
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
     </main>
 
     <!-- 页脚 -->
@@ -613,25 +494,6 @@ curl -X POST ${baseUrl}/v1/audio/speech \\
           updateStyleOptions(this.value);
         });
 
-        const tabLinks = document.querySelectorAll('.tab-link');
-        const tabContents = document.querySelectorAll('.tab-content');
-
-        tabLinks.forEach(link => {
-          link.addEventListener('click', () => {
-            tabLinks.forEach(l => {
-              l.classList.remove('text-ms-blue', 'border-ms-blue');
-              l.classList.add('text-gray-500');
-            });
-            link.classList.add('text-ms-blue', 'border-ms-blue');
-            link.classList.remove('text-gray-500');
-
-            const targetId = link.getAttribute('data-tab');
-            tabContents.forEach(tc => {
-              tc.style.display = (tc.id === targetId) ? '' : 'none';
-            });
-          });
-        });
-
         // 添加获取Reader链接按钮的事件监听
         document.getElementById('getReaderLinkBtn').addEventListener('click', function() {
           const apiKey = document.getElementById('apiKey').value || localStorage.getItem('tts_api_key') || '';
@@ -1110,7 +972,6 @@ addEventListener('fetch', event => {
 });
 
 
-
 async function getEndpoint() {
   const endpointUrl = 'https://dev.microsofttranslator.com/apps/endpoint?api-version=1.0';
   const headers = {
@@ -1168,7 +1029,7 @@ function getSsml(text, voiceName, rate, pitch, style = 'general') {
 function voiceList() {
   // 检查缓存是否有效
   if (voiceListCache && voiceListCacheTime && (Date.now() - voiceListCacheTime) < VOICE_CACHE_DURATION) {
-    console.log('使用缓存的语音列表数据，剩余有效期：',
+    console.log('使用缓存的语音列表数据，剩余有效<EFBFBD><EFBFBD><EFBFBD>：',
       Math.round((VOICE_CACHE_DURATION - (Date.now() - voiceListCacheTime)) / 60000), '分钟');
     return Promise.resolve(voiceListCache);
   }