feat: TTS文本清理，过滤Markdown特殊字符和表情

backend/app.py

@@ -4,7 +4,7 @@ AI Chat App - 后台管理服务
 端口: 19021 (与前端同一端口)
 """
 
-from flask import Flask, jsonify, request, send_from_directory
+from flask import Flask, jsonify, request, send_from_directory, Response
 from flask_cors import CORS
 import os
 import json
@@ -12,6 +12,8 @@ import sqlite3
 from datetime import datetime
 import hashlib
 import base64
+import asyncio
+import edge_tts
 
 app = Flask(__name__, static_folder='../www')
 CORS(app)
@@ -273,6 +275,8 @@ def init_db():
             ('app_description', '提供智能对话、多种智能体服务', '应用简介'),
             ('privacy_policy_url', '', '隐私政策链接'),
             ('user_agreement_url', '', '用户协议链接'),
+            ('tts_provider', 'edge', 'TTS方案'),
+            ('tts_voice', 'zh-CN-XiaoxiaoNeural', 'TTS语音'),
         ]
         for key, value, desc in default_configs:
             cursor.execute('INSERT INTO system_configs (key, value, description) VALUES (?, ?, ?)', (key, value, desc))
@@ -285,6 +289,8 @@ def init_db():
             ('app_description', '提供智能对话、多种智能体服务', '应用简介'),
             ('privacy_policy_url', '', '隐私政策链接'),
             ('user_agreement_url', '', '用户协议链接'),
+            ('tts_provider', 'edge', 'TTS方案'),
+            ('tts_voice', 'zh-CN-XiaoxiaoNeural', 'TTS语音'),
         ]
         for key, value, desc in default_configs:
             cursor.execute('SELECT COUNT(*) FROM system_configs WHERE key=?', (key,))
@@ -501,8 +507,9 @@ def get_users():
 
 
 @app.route('/api/admin/users/<int:id>', methods=['GET'])
+@app.route('/api/user/<int:id>', methods=['GET'])
 def get_user(id):
-    """获取单个用户"""
+    """获取单个用户信息"""
     conn = get_db()
     cursor = conn.cursor()
     cursor.execute('SELECT * FROM users WHERE id = ?', (id,))
@@ -1385,12 +1392,62 @@ def get_frontend_config():
             'description': system.get('app_description', '提供智能对话、多种智能体服务'),
             'privacyPolicyUrl': system.get('privacy_policy_url', ''),
             'userAgreementUrl': system.get('user_agreement_url', ''),
+            'ttsProvider': system.get('tts_provider', 'edge'),
+            'ttsVoice': system.get('tts_voice', 'zh-CN-XiaoxiaoNeural'),
         }
     }
     
     return jsonify(config)
 
 
+# ==================== TTS 语音合成 ====================
+
+@app.route('/api/tts', methods=['POST'])
+def generate_tts():
+    """使用 Edge TTS 生成语音"""
+    data = request.json
+    text = data.get('text', '')
+    voice = data.get('voice', 'zh-CN-XiaoxiaoNeural')  # 默认中文女声
+    
+    if not text:
+        return jsonify({'error': '缺少文本内容'}), 400
+    
+    try:
+        # 使用 asyncio 运行 edge_tts
+        async def generate_audio():
+            communicate = edge_tts.Communicate(text, voice)
+            audio_data = b''
+            for chunk in communicate.stream_sync():
+                if chunk['type'] == 'audio':
+                    audio_data += chunk['data']
+            return audio_data
+        
+        audio_data = asyncio.run(generate_audio())
+        
+        # 返回音频数据（MP3格式）
+        return Response(audio_data, mimetype='audio/mpeg')
+    
+    except Exception as e:
+        return jsonify({'error': f'TTS生成失败: {str(e)}'}), 500
+
+
+@app.route('/api/tts/voices', methods=['GET'])
+def get_tts_voices():
+    """获取可用的 TTS 语音列表"""
+    try:
+        voices = asyncio.run(edge_tts.list_voices())
+        # 过滤中文语音
+        chinese_voices = [v for v in voices if v['Locale'].startswith('zh-')]
+        voice_list = [{
+            'name': v['ShortName'],
+            'gender': v['Gender'],
+            'locale': v['Locale']
+        } for v in chinese_voices]
+        return jsonify({'voices': voice_list})
+    except Exception as e:
+        return jsonify({'error': f'获取语音列表失败: {str(e)}'}), 500
+
+
 # ==================== 启动 ====================
 
 if __name__ == '__main__':

www/admin.js

@@ -1399,6 +1399,39 @@ async function loadSystemPage(content) {
         <input type="text" class="form-input" id="adminPassword" value="${systemConfigs.admin_password?.value || ''}" placeholder="修改管理员密码">
       </div>
       
+      <h3 style="margin: 24px 0 16px; padding-top: 16px; border-top: 1px solid #e2e8f0;">TTS语音配置</h3>
+      
+      <div class="form-group">
+        <label class="form-label">TTS方案</label>
+        <select class="form-input" id="ttsProvider">
+          <option value="edge" ${systemConfigs.tts_provider?.value === 'edge' ? 'selected' : ''}>Edge TTS（免费）</option>
+        </select>
+        <span style="color: #999; font-size: 12px;">目前仅支持 Edge TTS，后续将添加更多方案</span>
+      </div>
+      
+      <div class="form-group">
+        <label class="form-label">TTS语音</label>
+        <select class="form-input" id="ttsVoice">
+          <option value="zh-CN-XiaoxiaoNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaoxiaoNeural' ? 'selected' : ''}>晓晓（女声）</option>
+          <option value="zh-CN-YunxiNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-YunxiNeural' ? 'selected' : ''}>云希（男声）</option>
+          <option value="zh-CN-YunjianNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-YunjianNeural' ? 'selected' : ''}>云健（男声）</option>
+          <option value="zh-CN-XiaoyiNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaoyiNeural' ? 'selected' : ''}>晓伊（女声）</option>
+          <option value="zh-CN-YunfengNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-YunfengNeural' ? 'selected' : ''}>云枫（男声）</option>
+          <option value="zh-CN-XiaochenNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaochenNeural' ? 'selected' : ''}>晓辰（女声）</option>
+          <option value="zh-CN-XiaohanNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaohanNeural' ? 'selected' : ''}>晓涵（女声）</option>
+          <option value="zh-CN-XiaomengNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaomengNeural' ? 'selected' : ''}>晓梦（女声）</option>
+          <option value="zh-CN-XiaomoNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaomoNeural' ? 'selected' : ''}>晓墨（女声）</option>
+          <option value="zh-CN-XiaoruiNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaoruiNeural' ? 'selected' : ''}>晓睿（女声）</option>
+          <option value="zh-CN-XiaoshuangNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaoshuangNeural' ? 'selected' : ''}>晓双（女声）</option>
+          <option value="zh-CN-XiaoxuanNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaoxuanNeural' ? 'selected' : ''}>晓萱（女声）</option>
+          <option value="zh-CN-XiaoyanNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaoyanNeural' ? 'selected' : ''}>晓颜（女声）</option>
+          <option value="zh-CN-XiaoyouNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaoyouNeural' ? 'selected' : ''}>晓悠（女声）</option>
+          <option value="zh-CN-YunyaNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-YunyaNeural' ? 'selected' : ''}>云雅（女声）</option>
+          <option value="zh-CN-YunyangNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-YunyangNeural' ? 'selected' : ''}>云扬（男声）</option>
+        </select>
+        <span style="color: #999; font-size: 12px;">选择AI回复的朗读语音</span>
+      </div>
+      
       <h3 style="margin: 24px 0 16px; padding-top: 16px; border-top: 1px solid #e2e8f0;">链接配置</h3>
       
       <div class="form-group">
@@ -1436,6 +1469,8 @@ async function saveSystemConfig() {
     admin_password: document.getElementById('adminPassword').value,
     privacy_policy_url: document.getElementById('privacyPolicyUrl').value,
     user_agreement_url: document.getElementById('userAgreementUrl').value,
+    tts_provider: document.getElementById('ttsProvider').value,
+    tts_voice: document.getElementById('ttsVoice').value,
   };
   
   await fetchAPI('/api/admin/system', 'POST', data);

www/app.js

@@ -52,6 +52,13 @@ let backendConfig = null;  // 从API获取的配置
 // 用户状态
 let currentUser = null;  // 当前登录用户 { username, password, registeredAt }
 
+// TTS 语音播放状态
+let enableTTS = false;  // 是否启用语音播放（默认关闭）
+let currentPlayingAudio = null;  // 当前播放的音频对象
+let ttsVoice = 'zh-CN-XiaoxiaoNeural';  // TTS 语音
+let ttsQueue = [];  // TTS 待播放队列
+let isTTSPlaying = false;  // 是否正在播放队列
+
 // 每日使用统计（未登录用户）
 let dailyUsage = {
   date: null,           // 日期 YYYY-MM-DD
@@ -127,6 +134,8 @@ async function loadBackendConfig() {
     // 将后台系统配置赋值到 CONFIG
     if (backendConfig.system) {
       CONFIG.system = backendConfig.system;
+      // 加载 TTS 配置
+      ttsVoice = backendConfig.system.ttsVoice || 'zh-CN-XiaoxiaoNeural';
     }
     
     // 将后台 LLM 配置赋值到 CONFIG
@@ -3130,6 +3139,10 @@ async function openAgent(agentId) {
     }
   }
   
+  // 重置 TTS 状态（新对话默认关闭）
+  enableTTS = false;
+  stopTTSQueue();
+  
   // 创建新对话并设置智能体
   const newConv = {
     id: backendId || Date.now().toString(),
@@ -3152,6 +3165,9 @@ async function openAgent(agentId) {
 function showAgentChatPage() {
   if (!currentAgent || !currentConversation) return;
   
+  // 停止之前的 TTS 播放
+  stopTTSQueue();
+  
   const chatHtml = `
     <div class="chat-page">
       <header class="chat-header">
@@ -3165,6 +3181,9 @@ function showAgentChatPage() {
             <p class="agent-desc-header">${currentAgent.desc}</p>
           </div>
         </div>
+        <button class="feature-btn tts-btn ${enableTTS ? 'active' : ''}" id="ttsBtn" title="语音播放">
+          <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.54 7-8.77s-2.99-7.86-7-8.77z"/></svg>
+        </button>
       </header>
       
       <div class="messages-container" id="messagesContainer">
@@ -3257,6 +3276,21 @@ function showAgentChatPage() {
     });
   }
   
+  // 绑定 TTS 开关按钮（智能体对话）
+  const ttsBtn = document.getElementById('ttsBtn');
+  if (ttsBtn) {
+    ttsBtn.addEventListener('click', () => {
+      enableTTS = !enableTTS;
+      ttsBtn.classList.toggle('active', enableTTS);
+      showToast(enableTTS ? '语音播放已开启' : '语音播放已关闭');
+      // 如果关闭，停止当前播放
+      if (!enableTTS && currentPlayingAudio) {
+        currentPlayingAudio.pause();
+        currentPlayingAudio = null;
+      }
+    });
+  }
+  
   // 绑定功能开关按钮事件
   if (thinkingBtn) {
     thinkingBtn.addEventListener('click', () => {
@@ -3591,6 +3625,10 @@ async function createNewConversation() {
     return;
   }
   
+  // 重置 TTS 状态（新对话默认关闭）
+  enableTTS = false;
+  stopTTSQueue();
+  
   // 如果用户已登录，先在 backend 创建对话
   let backendId = null;
   if (currentUser && currentUser.id) {
@@ -3628,6 +3666,9 @@ async function createNewConversation() {
 
 // 打开对话
 function openConversation(id) {
+  // 停止之前的 TTS 播放
+  stopTTSQueue();
+  
   currentConversation = conversations.find(c => c.id === id);
   if (!currentConversation) {
     showConversationList();
@@ -3649,8 +3690,8 @@ function openConversation(id) {
           <span class="logo">🤖</span>
           <h1>${escapeHtml(currentConversation.title)}</h1>
         </div>
-        <button class="clear-btn" id="clearBtn" title="清空对话">
+        <button class="feature-btn tts-btn ${enableTTS ? 'active' : ''}" id="ttsBtn" title="语音播放">
-          <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
+          <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.54 7-8.77s-2.99-7.86-7-8.77z"/></svg>
         </button>
       </header>
 
@@ -3748,8 +3789,20 @@ function openConversation(id) {
   const backBtn = document.getElementById('backBtn');
   if (backBtn) backBtn.addEventListener('click', showConversationList);
   
-  const clearBtn = document.getElementById('clearBtn');
+  // 绑定 TTS 开关按钮
-  if (clearBtn) clearBtn.addEventListener('click', clearCurrentChat);
+  const ttsBtn = document.getElementById('ttsBtn');
+  if (ttsBtn) {
+    ttsBtn.addEventListener('click', () => {
+      enableTTS = !enableTTS;
+      ttsBtn.classList.toggle('active', enableTTS);
+      showToast(enableTTS ? '语音播放已开启' : '语音播放已关闭');
+      // 如果关闭，停止当前播放
+      if (!enableTTS && currentPlayingAudio) {
+        currentPlayingAudio.pause();
+        currentPlayingAudio = null;
+      }
+    });
+  }
   
   // 绑定功能开关按钮事件
   if (thinkingBtn) {
@@ -4051,6 +4104,8 @@ async function streamGenerate(userMsgIndex) {
     let buffer = '';
     let thinkingOutputStarted = false;  // 正式内容是否开始输出
     let abortController = new AbortController();  // 用于中断流
+    let ttsAccumulatedText = '';  // TTS 累计文本
+    let ttsLastPlayedIndex = 0;   // 上次播放的文本位置
     
     // 绑定停止按钮事件
     const stopBtn = document.getElementById('stopGenerateBtn');
@@ -4120,6 +4175,32 @@ async function streamGenerate(userMsgIndex) {
                 
                 currentConversation.messages[aiMessageIndex].content += delta.content;
                 contentEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].content) + '<span class="streaming-cursor">▌</span>';
+                
+                // 流式TTS播放：积累文本并播放
+                if (enableTTS) {
+                  ttsAccumulatedText += delta.content;
+                  // 每80字符播放一段（避免太短频繁请求）
+                  if (ttsAccumulatedText.length >= 80) {
+                    // 找到合适的断句点（句子结束）
+                    const breakPoints = ['。', '！', '？', '；', '.', '!', '?', ';', '\n'];
+                    let breakIndex = -1;
+                    for (let i = ttsAccumulatedText.length - 1; i >= ttsLastPlayedIndex + 40; i--) {
+                      if (breakPoints.includes(ttsAccumulatedText[i])) {
+                        breakIndex = i;
+                        break;
+                      }
+                    }
+                    // 如果找到断句点，或者积累超过120字符强制播放
+                    if (breakIndex >= 0 || ttsAccumulatedText.length - ttsLastPlayedIndex >= 120) {
+                      const textToPlay = ttsAccumulatedText.slice(ttsLastPlayedIndex, breakIndex >= 0 ? breakIndex + 1 : ttsAccumulatedText.length);
+                      if (textToPlay.trim()) {
+                        addToTTSQueue(textToPlay.trim());
+                      }
+                      ttsLastPlayedIndex = breakIndex >= 0 ? breakIndex + 1 : ttsAccumulatedText.length;
+                    }
+                  }
+                }
+                
                 scrollToBottom();
               }
             }
@@ -4133,11 +4214,21 @@ async function streamGenerate(userMsgIndex) {
       thinkingEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].thinking);
     }
     contentEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].content);
+    
+    // 播放剩余未播放的文本（流式TTS）
+    if (enableTTS && ttsAccumulatedText && ttsLastPlayedIndex < ttsAccumulatedText.length) {
+      const remainingText = ttsAccumulatedText.slice(ttsLastPlayedIndex).trim();
+      if (remainingText) {
+        addToTTSQueue(remainingText);
+      }
+    }
 
   } catch (error) {
     console.error('Error:', error);
     currentConversation.messages[aiMessageIndex].content = `抱歉，出现了错误：${error.message}\n\n请检查网络连接后重试。`;
     contentEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].content);
+    // 出错时停止TTS队列
+    stopTTSQueue();
   } finally {
     isLoading = false;
     sendBtn.disabled = false;
@@ -4647,6 +4738,8 @@ function renderMessages() {
     
     const copyIcon = `<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>`;
     
+    const playIcon = `<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.54 7-8.77s-2.99-7.86-7-8.77z"/></svg>`;
+    
     const actions = isUser 
       ? `<div class="message-actions">
           <button class="action-btn copy-btn" data-index="${index}" title="复制">${copyIcon}</button>
@@ -4655,6 +4748,7 @@ function renderMessages() {
           </button>
         </div>`
       : `<div class="message-actions">
+          <button class="action-btn tts-btn" data-index="${index}" title="语音播放">${playIcon}</button>
           <button class="action-btn copy-btn" data-index="${index}" title="复制">${copyIcon}</button>
           <button class="action-btn regenerate-btn" data-index="${index}" title="重新生成">
             <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
@@ -4678,6 +4772,9 @@ function renderMessages() {
   }).join('');
 
   // 绑定消息操作按钮事件（事件委托）
+  messagesDiv.querySelectorAll('.tts-btn').forEach(btn => {
+    btn.addEventListener('click', () => playTTS(parseInt(btn.dataset.index)));
+  });
   messagesDiv.querySelectorAll('.copy-btn').forEach(btn => {
     btn.addEventListener('click', () => copyMessage(parseInt(btn.dataset.index)));
   });
@@ -4691,6 +4788,204 @@ function renderMessages() {
   scrollToBottom();
 }
 
+// ==================== TTS 队列播放 ====================
+
+// 清理 TTS 文本（过滤Markdown特殊字符和表情）
+function cleanTTSText(text) {
+  if (!text) return '';
+  
+  let cleaned = text;
+  
+  // 移除代码块（```code```）
+  cleaned = cleaned.replace(/```[\s\S]*?```/g, '');
+  
+  // 移除行内代码（`code`）
+  cleaned = cleaned.replace(/`[^`]+`/g, '');
+  
+  // 移除标题符号（#、##、###等）
+  cleaned = cleaned.replace(/^#{1,6}\s*/gm, '');
+  
+  // 移除列表符号（-、*、+）
+  cleaned = cleaned.replace(/^[\-\*\+]\s+/gm, '');
+  
+  // 移除数字列表（1.、2.等）
+  cleaned = cleaned.replace(/^\d+\.\s+/gm, '');
+  
+  // 处理链接 [text](url) -> 只保留text
+  cleaned = cleaned.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1');
+  
+  // 移除粗体/斜体符号（**text**、*text*、__text__、_text_）
+  cleaned = cleaned.replace(/\*\*([^*]+)\*\*/g, '$1');
+  cleaned = cleaned.replace(/\*([^*]+)\*/g, '$1');
+  cleaned = cleaned.replace(/__([^_]+)__/g, '$1');
+  cleaned = cleaned.replace(/_([^_]+)_/g, '$1');
+  
+  // 移除引用符号（>）
+  cleaned = cleaned.replace(/^>\s*/gm, '');
+  
+  // 移除分割线（---、***）
+  cleaned = cleaned.replace(/^[\-\*]{3,}$/gm, '');
+  
+  // 移除表情符号（常见emoji范围）
+  cleaned = cleaned.replace(/[\u{1F600}-\u{1F64F}]/gu, '');  // 表情
+  cleaned = cleaned.replace(/[\u{1F300}-\u{1F5FF}]/gu, '');  // 符号和图形
+  cleaned = cleaned.replace(/[\u{1F680}-\u{1F6FF}]/gu, '');  // 交通和地图
+  cleaned = cleaned.replace(/[\u{1F700}-\u{1F77F}]/gu, '');  // 占星术
+  cleaned = cleaned.replace(/[\u{1F780}-\u{1F7FF}]/gu, '');  // 几何图形
+  cleaned = cleaned.replace(/[\u{1F800}-\u{1F8FF}]/gu, '');  // 补充箭头
+  cleaned = cleaned.replace(/[\u{1F900}-\u{1F9FF}]/gu, '');  // 补充符号
+  cleaned = cleaned.replace(/[\u{1FA00}-\u{1FA6F}]/gu, '');  // 游戏符号
+  cleaned = cleaned.replace(/[\u{1FA70}-\u{1FAFF}]/gu, '');  // 补充符号B
+  cleaned = cleaned.replace(/[\u{2600}-\u{26FF}]/gu, '');    // 杂项符号
+  cleaned = cleaned.replace(/[\u{2700}-\u{27BF}]/gu, '');    // 装饰符号
+  cleaned = cleaned.replace(/[\u{FE00}-\u{FE0F}]/gu, '');    // 变体选择符
+  cleaned = cleaned.replace(/[\u{1F1E0}-\u{1F1FF}]/gu, '');  // 旗帜
+  
+  // 移除HTML实体
+  cleaned = cleaned.replace(/&[a-zA-Z]+;/g, '');
+  
+  // 清理多余空白
+  cleaned = cleaned.replace(/\s+/g, ' ').trim();
+  
+  return cleaned;
+}
+
+// 添加文本到 TTS 队列
+async function addToTTSQueue(text) {
+  if (!text || !enableTTS) return;
+  
+  ttsQueue.push(text);
+  
+  // 如果没有在播放，开始播放队列
+  if (!isTTSPlaying) {
+    playTTSQueue();
+  }
+}
+
+// 播放 TTS 队列
+async function playTTSQueue() {
+  if (ttsQueue.length === 0) {
+    isTTSPlaying = false;
+    return;
+  }
+  
+  isTTSPlaying = true;
+  
+  while (ttsQueue.length > 0 && enableTTS) {
+    const rawText = ttsQueue.shift();
+    const text = cleanTTSText(rawText);  // 清理文本
+    
+    if (!text) continue;  // 跳过空文本
+    
+    try {
+      const response = await fetch('/api/tts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text, voice: ttsVoice })
+      });
+      
+      if (!response.ok || !enableTTS) break;
+      
+      const audioBlob = await response.blob();
+      const audioUrl = URL.createObjectURL(audioBlob);
+      
+      // 播放音频
+      currentPlayingAudio = new Audio(audioUrl);
+      await currentPlayingAudio.play();
+      
+      // 等待播放完成
+      await new Promise(resolve => {
+        currentPlayingAudio.onended = resolve;
+        currentPlayingAudio.onerror = resolve;
+      });
+      
+      URL.revokeObjectURL(audioUrl);
+      currentPlayingAudio = null;
+      
+    } catch (e) {
+      console.error('TTS播放失败:', e);
+      break;
+    }
+  }
+  
+  isTTSPlaying = false;
+  ttsQueue = [];  // 清空队列
+}
+
+// 停止 TTS 队列播放
+function stopTTSQueue() {
+  ttsQueue = [];
+  isTTSPlaying = false;
+  if (currentPlayingAudio) {
+    currentPlayingAudio.pause();
+    currentPlayingAudio = null;
+  }
+}
+
+// TTS 手动播放（点击消息上的播放按钮）
+async function playTTS(index) {
+  if (!currentConversation || index < 0) return;
+  
+  const msg = currentConversation.messages[index];
+  if (!msg || msg.role !== 'assistant') return;
+  
+  const rawText = msg.content;
+  if (!rawText) {
+    showToast('没有可播放的内容');
+    return;
+  }
+  
+  const text = cleanTTSText(rawText);  // 清理文本
+  if (!text) {
+    showToast('没有可播放的内容');
+    return;
+  }
+  
+  // 如果正在播放或队列中有内容，停止
+  if (currentPlayingAudio || isTTSPlaying) {
+    stopTTSQueue();
+    showToast('已停止播放');
+    return;
+  }
+  
+  // 调用后端 TTS API
+  try {
+    showToast('正在生成语音...');
+    
+    const response = await fetch('/api/tts', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ text, voice: ttsVoice })
+    });
+    
+    if (!response.ok) {
+      const error = await response.json();
+      showToast(error.error || '语音生成失败');
+      return;
+    }
+    
+    // 获取音频数据
+    const audioBlob = await response.blob();
+    const audioUrl = URL.createObjectURL(audioBlob);
+    
+    // 播放音频
+    currentPlayingAudio = new Audio(audioUrl);
+    await currentPlayingAudio.play();
+    
+    showToast('开始播放');
+    
+    // 播放完成后释放资源
+    currentPlayingAudio.onended = () => {
+      URL.revokeObjectURL(audioUrl);
+      currentPlayingAudio = null;
+    };
+    
+  } catch (e) {
+    console.error('TTS播放失败:', e);
+    showToast('语音播放失败');
+  }
+}
+
 // 折叠/展开思考内容
 function toggleThinking(block) {
   block.classList.toggle('expanded');

www/style.css

@@ -2395,7 +2395,8 @@ body {
   font-size: 20px;
 }
 
-.clear-btn {
+/* TTS 语音播放按钮 */
+.tts-btn {
   background: rgba(255,255,255,0.2);
   border: none;
   border-radius: 8px;
@@ -2404,10 +2405,18 @@ body {
   cursor: pointer;
 }
 
-.clear-btn:active {
+.tts-btn:hover {
   background: rgba(255,255,255,0.3);
 }
 
+.tts-btn.active {
+  background: rgba(255,255,255,0.4);
+}
+
+.tts-btn svg {
+  display: block;
+}
+
 .messages-container {
   flex: 1;
   overflow-y: auto;