fix: 普通对话使用后台配置的LLM

- 从后台API(/api/config)获取智能体列表
- 热门智能体 = tags中包含hot标签
- 其他类别 = 根据category字段分类(basic/work/study/life)
- 游客限制从后台配置加载

www/admin.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>AI助手 - 后台管理</title>
+  <link rel="stylesheet" href="admin.css?v=3.6.6">
   <style>
     :root {
       --primary: #667eea;
@@ -318,6 +319,8 @@
       border-radius: 16px;
       max-width: 500px;
       width: 90%;
+      max-height: 80vh;
+      overflow-y: auto;
     }
     
     .modal-header {
@@ -432,6 +435,10 @@
           <span class="sidebar-icon">📊</span>
           <span>统计信息</span>
         </div>
+        <div class="sidebar-item" data-page="users">
+          <span class="sidebar-icon">👥</span>
+          <span>用户管理</span>
+        </div>
         <div class="sidebar-item" data-page="llm">
           <span class="sidebar-icon">🧠</span>
           <span>大模型配置</span>
@@ -470,6 +477,6 @@
     </div>
   </div>
   
-  <script src="admin.js?v=1.0.0"></script>
+  <script src="admin.js?v=3.6.6"></script>
 </body>
 </html>

www/admin.js

@@ -81,6 +81,9 @@ async function loadPage(page) {
     case 'stats':
       await loadStatsPage(content);
       break;
+    case 'users':
+      await loadUsersPage(content);
+      break;
     case 'llm':
       await loadLLMPage(content);
       break;
@@ -177,6 +180,367 @@ async function loadStatsPage(content) {
   `;
 }
 
+// ==================== 用户管理页面 ====================
+
+let users = [];
+
+async function loadUsersPage(content) {
+  users = await fetchAPI('/api/admin/users');
+  
+  content.innerHTML = `
+    <div class="content-header">
+      <h1 class="content-title">用户管理</h1>
+      <div style="display: flex; gap: 12px;">
+        <input type="text" class="form-input" id="userSearch" placeholder="搜索用户名/手机/邮箱" style="width: 200px;" onkeyup="searchUsers(event)">
+        <button class="add-btn" onclick="searchUsersBtn()">搜索</button>
+      </div>
+    </div>
+    
+    <div class="stats-grid" style="grid-template-columns: repeat(4, 1fr);">
+      <div class="stat-card">
+        <div class="stat-icon">👥</div>
+        <div class="stat-value">${users.length}</div>
+        <div class="stat-label">总用户数</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon">🆕</div>
+        <div class="stat-value">${users.filter(u => {
+          const today = new Date().toISOString().slice(0, 10);
+          return u.created_at && u.created_at.startsWith(today);
+        }).length}</div>
+        <div class="stat-label">今日新增</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon">📧</div>
+        <div class="stat-value">${users.filter(u => u.email).length}</div>
+        <div class="stat-label">已绑定邮箱</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon">📱</div>
+        <div class="stat-value">${users.length}</div>
+        <div class="stat-label">已绑定手机</div>
+      </div>
+    </div>
+    
+    <div class="data-table">
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>头像</th>
+            <th>用户名</th>
+            <th>手机号</th>
+            <th>邮箱</th>
+            <th>注册时间</th>
+            <th>最后登录</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${users.length === 0 ? '<tr><td colspan="8" style="text-align: center; color: #999;">暂无用户</td></tr>' : 
+            users.map(u => `
+              <tr>
+                <td>${u.id}</td>
+                <td style="font-size: 24px;">${u.avatar || '👤'}</td>
+                <td>${u.username}</td>
+                <td>${u.phone}</td>
+                <td>${u.email || '-'}</td>
+                <td>${formatDate(u.created_at)}</td>
+                <td>${u.last_login_at ? formatDate(u.last_login_at) : '从未登录'}</td>
+                <td>
+                  <div class="action-btns">
+                    <button class="action-btn edit" onclick="showEditUserModal(${u.id})">编辑</button>
+                    <button class="action-btn" style="background: #8b5cf6; color: white;" onclick="showUserConversations(${u.id}, '${u.username}')">查看对话</button>
+                    <button class="action-btn" style="background: #f59e0b; color: white;" onclick="showResetPasswordModal(${u.id})">重置密码</button>
+                    <button class="action-btn delete" onclick="deleteUser(${u.id})">删除</button>
+                  </div>
+                </td>
+              </tr>
+            `).join('')
+          }
+        </tbody>
+      </table>
+    </div>
+  `;
+}
+
+function formatDate(dateStr) {
+  if (!dateStr) return '-';
+  const d = new Date(dateStr);
+  return d.toLocaleDateString() + ' ' + d.toLocaleTimeString().slice(0, 5);
+}
+
+async function searchUsers(event) {
+  if (event && event.key !== 'Enter') return;
+  const search = document.getElementById('userSearch').value.trim();
+  users = await fetchAPI(`/api/admin/users?search=${encodeURIComponent(search)}`);
+  loadUsersPage(document.getElementById('mainContent'));
+}
+
+async function searchUsersBtn() {
+  const search = document.getElementById('userSearch').value.trim();
+  users = await fetchAPI(`/api/admin/users?search=${encodeURIComponent(search)}`);
+  loadUsersPage(document.getElementById('mainContent'));
+}
+
+function showEditUserModal(id) {
+  const user = users.find(u => u.id === id);
+  if (!user) return;
+  
+  const avatars = ['👤', '😊', '😎', '🤓', '🦸', '🧙', '🥷', '👨', '👩', '🧑', '👴', '👵', '👦', '👧', '🤖', '👽', '🧛', '🧜', '🧚', '🦊'];
+  
+  showModal('编辑用户', `
+    <div class="form-group">
+      <label class="form-label">用户名</label>
+      <input type="text" class="form-input" id="editUserName" value="${user.username}">
+    </div>
+    <div class="form-group">
+      <label class="form-label">手机号（不可修改）</label>
+      <input type="text" class="form-input" id="editUserPhone" value="${user.phone}" readonly style="background: #f5f7fa;">
+    </div>
+    <div class="form-group">
+      <label class="form-label">邮箱</label>
+      <input type="email" class="form-input" id="editUserEmail" value="${user.email || ''}">
+    </div>
+    <div class="form-group">
+      <label class="form-label">头像</label>
+      <select class="form-select" id="editUserAvatar">
+        ${avatars.map(a => `<option value="${a}" ${a === (user.avatar || '👤') ? 'selected' : ''}>${a}</option>`).join('')}
+      </select>
+    </div>
+    <div class="form-group">
+      <label class="form-label">个性签名</label>
+      <input type="text" class="form-input" id="editUserSignature" value="${user.signature || ''}" maxlength="50">
+    </div>
+    <div class="form-group">
+      <label class="form-label">性别</label>
+      <select class="form-select" id="editUserGender">
+        <option value="" ${!user.gender ? 'selected' : ''}>未设置</option>
+        <option value="male" ${user.gender === 'male' ? 'selected' : ''}>男</option>
+        <option value="female" ${user.gender === 'female' ? 'selected' : ''}>女</option>
+        <option value="other" ${user.gender === 'other' ? 'selected' : ''}>其他</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label class="form-label">年龄</label>
+      <input type="number" class="form-input" id="editUserAge" value="${user.age || ''}" min="1" max="150">
+    </div>
+    <div class="form-group">
+      <label class="form-label">地区</label>
+      <input type="text" class="form-input" id="editUserRegion" value="${user.region || ''}">
+    </div>
+    <button class="form-submit" onclick="updateUser(${id})">保存</button>
+  `);
+}
+
+async function updateUser(id) {
+  const data = {
+    username: document.getElementById('editUserName').value,
+    email: document.getElementById('editUserEmail').value,
+    avatar: document.getElementById('editUserAvatar').value,
+    signature: document.getElementById('editUserSignature').value,
+    gender: document.getElementById('editUserGender').value,
+    age: document.getElementById('editUserAge').value ? parseInt(document.getElementById('editUserAge').value) : null,
+    region: document.getElementById('editUserRegion').value
+  };
+  
+  if (!data.username) {
+    showToast('用户名不能为空');
+    return;
+  }
+  
+  await fetchAPI(`/api/admin/users/${id}`, 'PUT', data);
+  closeModal();
+  showToast('更新成功');
+  loadPage('users');
+}
+
+function showResetPasswordModal(id) {
+  const user = users.find(u => u.id === id);
+  if (!user) return;
+  
+  showModal('重置密码', `
+    <div style="padding: 16px; background: #f5f7fa; border-radius: 8px; margin-bottom: 16px;">
+      <p><strong>用户:</strong> ${user.username}</p>
+      <p><strong>手机:</strong> ${user.phone}</p>
+    </div>
+    <div class="form-group">
+      <label class="form-label">新密码</label>
+      <input type="text" class="form-input" id="resetPassword" placeholder="输入新密码（至少6位）">
+    </div>
+    <p style="color: #999; font-size: 12px;">⚠️ 重置后用户需使用新密码登录</p>
+    <button class="form-submit" onclick="resetPassword(${id})">确认重置</button>
+  `);
+}
+
+async function resetPassword(id) {
+  const password = document.getElementById('resetPassword').value;
+  
+  if (!password || password.length < 6) {
+    showToast('密码长度至少6位');
+    return;
+  }
+  
+  await fetchAPI(`/api/admin/users/${id}/password`, 'PUT', { password });
+  closeModal();
+  showToast('密码已重置');
+}
+
+async function deleteUser(id) {
+  const user = users.find(u => u.id === id);
+  if (!user) return;
+  
+  if (!confirm(`确定删除用户 "${user.username}"？\n此操作不可恢复！`)) return;
+  
+  await fetchAPI(`/api/admin/users/${id}`, 'DELETE');
+  showToast('删除成功');
+  loadPage('users');
+}
+
+// ==================== 查看用户对话记录 ====================
+
+async function showUserConversations(userId, username) {
+  // 加载用户对话列表
+  const conversations = await fetchAPI(`/api/user/${userId}/conversations`);
+  
+  const content = document.getElementById('mainContent');
+  
+  content.innerHTML = `
+    <div class="content-header">
+      <h1 class="content-title">用户对话记录 - ${username}</h1>
+      <button class="add-btn" style="background: #718096;" onclick="loadPage('users')">返回用户列表</button>
+    </div>
+    
+    <div class="stats-grid" style="grid-template-columns: repeat(3, 1fr);">
+      <div class="stat-card">
+        <div class="stat-icon">💬</div>
+        <div class="stat-value">${conversations.length}</div>
+        <div class="stat-label">对话总数</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon">🤖</div>
+        <div class="stat-value">${conversations.filter(c => c.agentId).length}</div>
+        <div class="stat-label">智能体对话</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon">📝</div>
+        <div class="stat-value">${conversations.reduce((sum, c) => sum + (c.messages?.length || 0), 0)}</div>
+        <div class="stat-label">消息总数</div>
+      </div>
+    </div>
+    
+    <div class="data-table">
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>标题</th>
+            <th>智能体</th>
+            <th>消息数</th>
+            <th>创建时间</th>
+            <th>更新时间</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${conversations.length === 0 ? '<tr><td colspan="7" style="text-align: center; color: #999;">暂无对话记录</td></tr>' : 
+            conversations.map(conv => `
+              <tr>
+                <td>${conv.id}</td>
+                <td>${conv.title || '新对话'}</td>
+                <td>${conv.agentId ? getAgentName(conv.agentId) : '普通对话'}</td>
+                <td>${conv.messages?.length || 0}</td>
+                <td>${formatDate(conv.createdAt || conv.created_at)}</td>
+                <td>${formatDate(conv.updatedAt || conv.updated_at)}</td>
+                <td>
+                  <div class="action-btns">
+                    <button class="action-btn edit" onclick="showConversationMessages(${userId}, ${conv.id}, '${conv.title || '新对话'}')">查看详情</button>
+                    <button class="action-btn delete" onclick="deleteUserConversation(${userId}, ${conv.id})">删除</button>
+                  </div>
+                </td>
+              </tr>
+            `).join('')
+          }
+        </tbody>
+      </table>
+    </div>
+  `;
+}
+
+function getAgentName(agentId) {
+  const agent = agents.find(a => a.agent_id === agentId);
+  return agent ? `${agent.avatar} ${agent.name}` : agentId;
+}
+
+async function showConversationMessages(userId, convId, title) {
+  // 获取对话详情
+  const conv = await fetchAPI(`/api/user/${userId}/conversations/${convId}`);
+  
+  const content = document.getElementById('mainContent');
+  
+  const messages = conv.messages || [];
+  
+  content.innerHTML = `
+    <div class="content-header">
+      <h1 class="content-title">对话详情 - ${title}</h1>
+      <button class="add-btn" style="background: #718096;" onclick="showUserConversations(${userId}, '用户')">返回对话列表</button>
+    </div>
+    
+    <div style="background: white; padding: 16px; border-radius: 12px; margin-bottom: 16px;">
+      <div style="display: flex; gap: 16px; color: #718096;">
+        <span>💬 消息数: ${messages.length}</span>
+        <span>🤖 智能体: ${conv.agentId ? getAgentName(conv.agentId) : '普通对话'}</span>
+        <span>📅 创建: ${formatDate(conv.createdAt || conv.created_at)}</span>
+      </div>
+    </div>
+    
+    <div class="data-table">
+      <table>
+        <thead>
+          <tr>
+            <th style="width: 60px;">序号</th>
+            <th style="width: 80px;">角色</th>
+            <th>内容</th>
+            <th style="width: 150px;">时间</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${messages.length === 0 ? '<tr><td colspan="4" style="text-align: center; color: #999;">暂无消息</td></tr>' : 
+            messages.map((msg, idx) => `
+              <tr>
+                <td>${idx + 1}</td>
+                <td style="color: ${msg.role === 'user' ? '#3b82f6' : '#10b981'};">
+                  ${msg.role === 'user' ? '👤 用户' : '🤖 AI'}
+                </td>
+                <td style="max-width: 500px; white-space: pre-wrap; word-break: break-all;">
+                  ${escapeHtml(msg.content?.slice(0, 500) || '')}${msg.content?.length > 500 ? '...' : ''}
+                  ${msg.thinking ? `<div style="color: #f59e0b; margin-top: 8px; font-size: 12px;">💭 思考: ${escapeHtml(msg.thinking?.slice(0, 200) || '')}...</div>` : ''}
+                </td>
+                <td>${formatDate(msg.timestamp || msg.createdAt)}</td>
+              </tr>
+            `).join('')
+          }
+        </tbody>
+      </table>
+    </div>
+  `;
+}
+
+async function deleteUserConversation(userId, convId) {
+  if (!confirm('确定删除此对话？此操作不可恢复！')) return;
+  
+  await fetchAPI(`/api/user/${userId}/conversations/${convId}`, 'DELETE');
+  showToast('删除成功');
+  showUserConversations(userId, '用户');
+}
+
+function escapeHtml(text) {
+  if (!text) return '';
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
 // ==================== 大模型配置页面 ====================
 
 async function loadLLMPage(content) {
@@ -361,14 +725,22 @@ async function deleteLLM(id) {
 async function loadAgentsPage(content) {
   agents = await fetchAPI('/api/admin/agents');
   llmConfigs = await fetchAPI('/api/admin/llm');
+  toolConfigs = await fetchAPI('/api/admin/tools');
   
   const categories = {
-    hot: '热门',
+    basic: '基础',
     work: '工作',
     study: '学习',
     life: '生活'
   };
   
+  const tagLabels = {
+    'hot': '🔥 热门',
+    'popular': '👍 推荐',
+    'new': '🆕 新品',
+    '': ''
+  };
+  
   content.innerHTML = `
     <div class="content-header">
       <h1 class="content-title">智能体管理</h1>
@@ -382,9 +754,9 @@ async function loadAgentsPage(content) {
             <th>头像</th>
             <th>名称</th>
             <th>类别</th>
-            <th>描述</th>
+            <th>标签</th>
             <th>热度</th>
-            <th>状态</th>
+            <th>上线状态</th>
             <th>操作</th>
           </tr>
         </thead>
@@ -394,9 +766,13 @@ async function loadAgentsPage(content) {
               <td style="font-size: 24px;">${a.avatar}</td>
               <td>${a.name}</td>
               <td>${categories[a.category] || a.category}</td>
-              <td style="max-width: 200px; overflow: hidden; text-overflow: ellipsis;">${a.description || '-'}</td>
+              <td>${a.tags ? a.tags.split(',').map(t => tagLabels[t] || t).filter(t => t).join(' ') : '-'}</td>
               <td>${a.heat || 0}</td>
-              <td>${a.is_active ? '✅ 启用' : '❌ 禁用'}</td>
+              <td>
+                <span style="cursor: pointer; color: ${a.is_online ? '#22c55e' : '#e53e3e'};" onclick="toggleAgentOnline('${a.agent_id}', ${a.is_online})">
+                  ${a.is_online ? '✅ 已上线' : '❌ 未上线'}
+                </span>
+              </td>
               <td>
                 <div class="action-btns">
                   <button class="action-btn edit" onclick="showEditAgentModal('${a.agent_id}')">编辑</button>
@@ -408,9 +784,34 @@ async function loadAgentsPage(content) {
         </tbody>
       </table>
     </div>
+    
+    <div style="margin-top: 24px; padding: 16px; background: white; border-radius: 12px;">
+      <h3 style="margin-bottom: 16px;">说明</h3>
+      <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;">
+        <div style="padding: 12px; background: #f5f7fa; border-radius: 8px;">
+          <strong>上线状态</strong>
+          <p style="color: #718096; font-size: 12px; margin-top: 4px;">点击可快速切换，未上线则APP不可见</p>
+        </div>
+        <div style="padding: 12px; background: #f5f7fa; border-radius: 8px;">
+          <strong>标签</strong>
+          <p style="color: #718096; font-size: 12px; margin-top: 4px;">hot=热门, popular=推荐, new=新品</p>
+        </div>
+        <div style="padding: 12px; background: #f5f7fa; border-radius: 8px;">
+          <strong>类别</strong>
+          <p style="color: #718096; font-size: 12px; margin-top: 4px;">basic/work/study/life</p>
+        </div>
+      </div>
+    </div>
   `;
 }
 
+async function toggleAgentOnline(agentId, currentStatus) {
+  const newStatus = currentStatus ? 0 : 1;
+  await fetchAPI(`/api/admin/agents/${agentId}/online`, 'POST', { is_online: newStatus });
+  showToast(newStatus ? '已上线' : '已下线');
+  loadPage('agents');
+}
+
 function showAddAgentModal() {
   showModal('添加智能体', `
     <div class="form-group">
@@ -432,12 +833,17 @@ function showAddAgentModal() {
     <div class="form-group">
       <label class="form-label">类别</label>
       <select class="form-select" id="agentCategory">
-        <option value="hot">热门</option>
+        <option value="basic">基础</option>
         <option value="work">工作</option>
         <option value="study">学习</option>
         <option value="life">生活</option>
       </select>
     </div>
+    <div class="form-group">
+      <label class="form-label">标签（逗号分隔）</label>
+      <input type="text" class="form-input" id="agentTags" placeholder="如：hot,popular">
+      <span style="color: #999; font-size: 12px;">可选: hot(热门), popular(推荐), new(新品)</span>
+    </div>
     <div class="form-group">
       <label class="form-label">描述</label>
       <input type="text" class="form-input" id="agentDescription" placeholder="智能体描述">
@@ -447,23 +853,24 @@ function showAddAgentModal() {
       <textarea class="form-textarea" id="agentPrompt" placeholder="系统提示词"></textarea>
     </div>
     <div class="form-group">
-      <label class="form-label">LLM配置</label>
+      <label class="form-label">LLM配置（可选）</label>
       <select class="form-select" id="agentLLM">
         <option value="">使用默认</option>
         ${llmConfigs.map(c => `<option value="${c.id}">${c.name}</option>`).join('')}
       </select>
     </div>
+    <div class="form-group">
+      <label class="form-label">可使用工具（逗号分隔）</label>
+      <input type="text" class="form-input" id="agentEnableTools" placeholder="如：search,calculator">
+      <span style="color: #999; font-size: 12px;">已配置工具: ${toolConfigs.map(t => t.tool_id).join(', ')}</span>
+    </div>
     <div class="form-group">
       <label class="form-label">热度</label>
       <input type="number" class="form-input" id="agentHeat" value="0">
     </div>
-    <div class="form-group">
-      <label class="form-label">标签</label>
-      <input type="text" class="form-input" id="agentTags" placeholder="多个标签用逗号分隔">
-    </div>
     <div class="form-group">
       <label style="display: flex; align-items: center; gap: 8px;">
-        <input type="checkbox" id="agentEnableSearch"> 启用联网搜索
+        <input type="checkbox" id="agentIsOnline" checked> 立即上线
       </label>
     </div>
     <button class="form-submit" onclick="saveAgent()">保存</button>
@@ -494,12 +901,17 @@ function showEditAgentModal(agentId) {
     <div class="form-group">
       <label class="form-label">类别</label>
       <select class="form-select" id="agentCategory">
-        <option value="hot" ${agent.category === 'hot' ? 'selected' : ''}>热门</option>
+        <option value="basic" ${agent.category === 'basic' ? 'selected' : ''}>基础</option>
         <option value="work" ${agent.category === 'work' ? 'selected' : ''}>工作</option>
         <option value="study" ${agent.category === 'study' ? 'selected' : ''}>学习</option>
         <option value="life" ${agent.category === 'life' ? 'selected' : ''}>生活</option>
       </select>
     </div>
+    <div class="form-group">
+      <label class="form-label">标签（逗号分隔）</label>
+      <input type="text" class="form-input" id="agentTags" value="${agent.tags || ''}">
+      <span style="color: #999; font-size: 12px;">可选: hot(热门), popular(推荐), new(新品)</span>
+    </div>
     <div class="form-group">
       <label class="form-label">描述</label>
       <input type="text" class="form-input" id="agentDescription" value="${agent.description || ''}">
@@ -509,23 +921,24 @@ function showEditAgentModal(agentId) {
       <textarea class="form-textarea" id="agentPrompt">${agent.system_prompt || ''}</textarea>
     </div>
     <div class="form-group">
-      <label class="form-label">LLM配置</label>
+      <label class="form-label">LLM配置（可选）</label>
       <select class="form-select" id="agentLLM">
-        <option value="">使用默认</option>
+        <option value="" ${!agent.llm_config_id ? 'selected' : ''}>使用默认</option>
         ${llmConfigs.map(c => `<option value="${c.id}" ${c.id === agent.llm_config_id ? 'selected' : ''}>${c.name}</option>`).join('')}
       </select>
     </div>
+    <div class="form-group">
+      <label class="form-label">可使用工具（逗号分隔）</label>
+      <input type="text" class="form-input" id="agentEnableTools" value="${agent.enable_tools || ''}">
+      <span style="color: #999; font-size: 12px;">已配置工具: ${toolConfigs.map(t => t.tool_id).join(', ')}</span>
+    </div>
     <div class="form-group">
       <label class="form-label">热度</label>
       <input type="number" class="form-input" id="agentHeat" value="${agent.heat || 0}">
     </div>
-    <div class="form-group">
-      <label class="form-label">标签</label>
-      <input type="text" class="form-input" id="agentTags" value="${agent.tags || ''}">
-    </div>
     <div class="form-group">
       <label style="display: flex; align-items: center; gap: 8px;">
-        <input type="checkbox" id="agentEnableSearch" ${agent.enable_search ? 'checked' : ''}> 启用联网搜索
+        <input type="checkbox" id="agentIsOnline" ${agent.is_online ? 'checked' : ''}> 已上线
       </label>
     </div>
     <button class="form-submit" onclick="updateAgent('${agentId}')">保存</button>
@@ -538,12 +951,13 @@ async function saveAgent() {
     name: document.getElementById('agentName').value,
     avatar: document.getElementById('agentAvatar').value,
     category: document.getElementById('agentCategory').value,
+    tags: document.getElementById('agentTags').value,
     description: document.getElementById('agentDescription').value,
     system_prompt: document.getElementById('agentPrompt').value,
     llm_config_id: document.getElementById('agentLLM').value || null,
+    enable_tools: document.getElementById('agentEnableTools').value,
     heat: parseInt(document.getElementById('agentHeat').value),
-    tags: document.getElementById('agentTags').value,
-    enable_search: document.getElementById('agentEnableSearch').checked ? 1 : 0
+    is_online: document.getElementById('agentIsOnline').checked ? 1 : 0
   };
   
   if (!data.agent_id || !data.name || !data.system_prompt) {
@@ -562,12 +976,13 @@ async function updateAgent(agentId) {
     name: document.getElementById('agentName').value,
     avatar: document.getElementById('agentAvatar').value,
     category: document.getElementById('agentCategory').value,
+    tags: document.getElementById('agentTags').value,
     description: document.getElementById('agentDescription').value,
     system_prompt: document.getElementById('agentPrompt').value,
     llm_config_id: document.getElementById('agentLLM').value || null,
+    enable_tools: document.getElementById('agentEnableTools').value,
     heat: parseInt(document.getElementById('agentHeat').value),
-    tags: document.getElementById('agentTags').value,
-    enable_search: document.getElementById('agentEnableSearch').checked ? 1 : 0
+    is_online: document.getElementById('agentIsOnline').checked ? 1 : 0
   };
   
   await fetchAPI(`/api/admin/agents/${agentId}`, 'PUT', data);
@@ -586,186 +1001,113 @@ async function deleteAgent(agentId) {
 // ==================== 对话配置页面 ====================
 
 async function loadChatConfigPage(content) {
-  chatConfigs = await fetchAPI('/api/admin/chat');
   llmConfigs = await fetchAPI('/api/admin/llm');
   toolConfigs = await fetchAPI('/api/admin/tools');
+  const chatConfig = await fetchAPI('/api/admin/chat');
   
   content.innerHTML = `
     <div class="content-header">
       <h1 class="content-title">对话配置</h1>
-      <button class="add-btn" onclick="showAddChatConfigModal()">+ 添加配置</button>
     </div>
     
-    <div class="data-table">
-      <table>
-        <thead>
-          <tr>
-            <th>配置名称</th>
-            <th>LLM</th>
-            <th>可用工具</th>
-            <th>历史记录数</th>
-            <th>Temperature</th>
-            <th>状态</th>
-            <th>操作</th>
-          </tr>
-        </thead>
-        <tbody>
-          ${chatConfigs.map(c => `
-            <tr>
-              <td>${c.name} ${c.is_default ? '<span class="default-badge">默认</span>' : ''}</td>
-              <td>${llmConfigs.find(l => l.id === c.llm_config_id)?.name || '未指定'}</td>
-              <td>${c.enable_tools || '无'}</td>
-              <td>${c.max_history || 20}</td>
-              <td>${c.temperature || 0.7}</td>
-              <td>${c.is_default ? '✅ 默认' : '-'}</td>
-              <td>
-                <div class="action-btns">
-                  <button class="action-btn edit" onclick="showEditChatConfigModal('${c.config_id}')">编辑</button>
-                  ${!c.is_default ? `<button class="action-btn default" onclick="setDefaultChatConfig('${c.config_id}')">设为默认</button>` : ''}
-                  <button class="action-btn delete" onclick="deleteChatConfig('${c.config_id}')">删除</button>
-                </div>
-              </td>
-            </tr>
-          `).join('')}
-        </tbody>
-      </table>
+    <div style="background: white; padding: 24px; border-radius: 12px;">
+      <p style="color: #718096; margin-bottom: 24px;">
+        此配置对所有用户的普通对话生效，修改后立即生效。
+      </p>
+      
+      <div class="form-group">
+        <label class="form-label">LLM 配置（对话使用的大模型）</label>
+        <select class="form-select" id="chatLLMConfig">
+          ${llmConfigs.map(l => `<option value="${l.id}" ${l.id === chatConfig.llm_config_id ? 'selected' : ''}>${l.name}</option>`).join('')}
+        </select>
+      </div>
+      
+      <div class="form-group">
+        <label style="display: flex; align-items: center; gap: 8px;">
+          <input type="checkbox" id="chatEnableSearch" ${chatConfig.enable_search ? 'checked' : ''} onchange="toggleEnableSearch()">
+          启用联网搜索
+        </label>
+        <span style="color: #999; font-size: 12px; margin-top: 4px;">开启后对话可联网搜索实时信息</span>
+      </div>
+      
+      <div class="form-group">
+        <label class="form-label">可用工具（逗号分隔）</label>
+        <input type="text" class="form-input" id="chatEnableTools" value="${chatConfig.enable_tools || ''}" placeholder="如：search,calculator">
+        <span style="color: #999; font-size: 12px;">已配置工具: ${toolConfigs.map(t => t.tool_id).join(', ')}</span>
+      </div>
+      
+      <div class="form-group">
+        <label class="form-label">历史记录数（对话上下文）</label>
+        <input type="number" class="form-input" id="chatMaxHistory" value="${chatConfig.max_history || 20}">
+        <span style="color: #999; font-size: 12px;">发送给模型的对话历史条数</span>
+      </div>
+      
+      <div class="form-group">
+        <label class="form-label">Temperature（创造性）</label>
+        <input type="number" class="form-input" id="chatTemperature" value="${chatConfig.temperature || 0.7}" step="0.1" min="0" max="2">
+        <span style="color: #999; font-size: 12px;">0-2之间，越高越随机创造性，越低越稳定精确</span>
+      </div>
+      
+      <div class="form-group">
+        <label class="form-label">系统提示词（可选）</label>
+        <textarea class="form-textarea" id="chatSystemPrompt" placeholder="全局系统提示词，对所有对话生效">${chatConfig.system_prompt || ''}</textarea>
+      </div>
+      
+      <button class="form-submit" onclick="saveChatConfig()">保存配置</button>
     </div>
     
     <div style="margin-top: 24px; padding: 16px; background: white; border-radius: 12px;">
-      <h3 style="margin-bottom: 16px;">对话配置说明</h3>
-      <p style="color: #718096; font-size: 14px;">
-        对话配置用于控制普通对话的各项参数。可以选择使用的大模型接口、启用的工具、历史记录数量等。
-        前端 APP 会自动使用默认配置进行对话。
-      </p>
+      <h3 style="margin-bottom: 16px;">参数说明</h3>
+      <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
+        <div style="padding: 12px; background: #f5f7fa; border-radius: 8px;">
+          <strong>🧠 LLM配置</strong>
+          <p style="color: #718096; font-size: 12px; margin-top: 4px;">选择对话使用的大模型接口</p>
+        </div>
+        <div style="padding: 12px; background: #f5f7fa; border-radius: 8px;">
+          <strong>🔍 启用联网搜索</strong>
+          <p style="color: #718096; font-size: 12px; margin-top: 4px;">用户可在对话中开启联网搜索</p>
+        </div>
+        <div style="padding: 12px; background: #f5f7fa; border-radius: 8px;">
+          <strong>🔧 可用工具</strong>
+          <p style="color: #718096; font-size: 12px; margin-top: 4px;">对话中可使用的工具列表</p>
+        </div>
+        <div style="padding: 12px; background: #f5f7fa; border-radius: 8px;">
+          <strong>📜 历史记录数</strong>
+          <p style="color: #718096; font-size: 12px; margin-top: 4px;">发送多少条历史对话给模型</p>
+        </div>
+      </div>
     </div>
   `;
 }
 
-function showAddChatConfigModal() {
-  showModal('添加对话配置', `
-    <div class="form-group">
-      <label class="form-label">配置ID</label>
-      <input type="text" class="form-input" id="chatConfigId" placeholder="如：default">
-    </div>
-    <div class="form-group">
-      <label class="form-label">配置名称</label>
-      <input type="text" class="form-input" id="chatConfigName" placeholder="如：默认对话配置">
-    </div>
-    <div class="form-group">
-      <label class="form-label">LLM 配置</label>
-      <select class="form-select" id="chatLLMConfig">
-        ${llmConfigs.map(l => `<option value="${l.id}">${l.name}</option>`).join('')}
-      </select>
-    </div>
-    <div class="form-group">
-      <label class="form-label">可用工具（逗号分隔）</label>
-      <input type="text" class="form-input" id="chatEnableTools" placeholder="如：search,calculator">
-      <span style="color: #999; font-size: 12px;">可用工具: ${toolConfigs.map(t => t.tool_id).join(', ')}</span>
-    </div>
-    <div class="form-group">
-      <label class="form-label">历史记录数</label>
-      <input type="number" class="form-input" id="chatMaxHistory" value="20">
-    </div>
-    <div class="form-group">
-      <label class="form-label">Temperature</label>
-      <input type="number" class="form-input" id="chatTemperature" value="0.7" step="0.1">
-    </div>
-    <div class="form-group">
-      <label class="form-label">系统提示词（可选）</label>
-      <textarea class="form-textarea" id="chatSystemPrompt" placeholder="全局系统提示词"></textarea>
-    </div>
-    <button class="form-submit" onclick="saveChatConfig()">保存</button>
-  `);
-}
-
-function showEditChatConfigModal(configId) {
-  const config = chatConfigs.find(c => c.config_id === configId);
-  if (!config) return;
+function toggleEnableSearch() {
+  const enableSearch = document.getElementById('chatEnableSearch').checked;
+  const toolsInput = document.getElementById('chatEnableTools');
   
-  showModal('编辑对话配置', `
-    <div class="form-group">
-      <label class="form-label">配置ID（不可修改）</label>
-      <input type="text" class="form-input" id="chatConfigId" value="${config.config_id}" readonly style="background: #f5f7fa;">
-    </div>
-    <div class="form-group">
-      <label class="form-label">配置名称</label>
-      <input type="text" class="form-input" id="chatConfigName" value="${config.name}">
-    </div>
-    <div class="form-group">
-      <label class="form-label">LLM 配置</label>
-      <select class="form-select" id="chatLLMConfig">
-        ${llmConfigs.map(l => `<option value="${l.id}" ${l.id === config.llm_config_id ? 'selected' : ''}>${l.name}</option>`).join('')}
-      </select>
-    </div>
-    <div class="form-group">
-      <label class="form-label">可用工具（逗号分隔）</label>
-      <input type="text" class="form-input" id="chatEnableTools" value="${config.enable_tools || ''}">
-      <span style="color: #999; font-size: 12px;">可用工具: ${toolConfigs.map(t => t.tool_id).join(', ')}</span>
-    </div>
-    <div class="form-group">
-      <label class="form-label">历史记录数</label>
-      <input type="number" class="form-input" id="chatMaxHistory" value="${config.max_history || 20}">
-    </div>
-    <div class="form-group">
-      <label class="form-label">Temperature</label>
-      <input type="number" class="form-input" id="chatTemperature" value="${config.temperature || 0.7}" step="0.1">
-    </div>
-    <div class="form-group">
-      <label class="form-label">系统提示词（可选）</label>
-      <textarea class="form-textarea" id="chatSystemPrompt">${config.system_prompt || ''}</textarea>
-    </div>
-    <button class="form-submit" onclick="updateChatConfig('${configId}')">保存</button>
-  `);
+  // 自动添加/移除 search 工具
+  let tools = toolsInput.value.split(',').filter(t => t.trim());
+  if (enableSearch) {
+    if (!tools.includes('search')) {
+      tools.push('search');
+    }
+  } else {
+    tools = tools.filter(t => t !== 'search');
+  }
+  toolsInput.value = tools.join(',');
 }
 
 async function saveChatConfig() {
   const data = {
-    config_id: document.getElementById('chatConfigId').value,
-    name: document.getElementById('chatConfigName').value,
     llm_config_id: parseInt(document.getElementById('chatLLMConfig').value),
+    enable_search: document.getElementById('chatEnableSearch').checked ? 1 : 0,
     enable_tools: document.getElementById('chatEnableTools').value,
     max_history: parseInt(document.getElementById('chatMaxHistory').value),
     temperature: parseFloat(document.getElementById('chatTemperature').value),
     system_prompt: document.getElementById('chatSystemPrompt').value
   };
   
-  if (!data.config_id || !data.name) {
-    showToast('请填写完整信息');
-    return;
-  }
-  
-  await fetchAPI('/api/admin/chat', 'POST', data);
-  closeModal();
-  showToast('添加成功');
-  loadPage('chat');
-}
-
-async function updateChatConfig(configId) {
-  const data = {
-    name: document.getElementById('chatConfigName').value,
-    llm_config_id: parseInt(document.getElementById('chatLLMConfig').value),
-    enable_tools: document.getElementById('chatEnableTools').value,
-    max_history: parseInt(document.getElementById('chatMaxHistory').value),
-    temperature: parseFloat(document.getElementById('chatTemperature').value),
-    system_prompt: document.getElementById('chatSystemPrompt').value
-  };
-  
-  await fetchAPI(`/api/admin/chat/${configId}`, 'PUT', data);
-  closeModal();
-  showToast('更新成功');
-  loadPage('chat');
-}
-
-async function setDefaultChatConfig(configId) {
-  await fetchAPI(`/api/admin/chat/${configId}/default`, 'POST');
-  showToast('已设为默认');
-  loadPage('chat');
-}
-
-async function deleteChatConfig(configId) {
-  if (!confirm('确定删除此配置？')) return;
-  await fetchAPI(`/api/admin/chat/${configId}`, 'DELETE');
-  showToast('删除成功');
+  await fetchAPI('/api/admin/chat', 'PUT', data);
+  showToast('保存成功');
   loadPage('chat');
 }
 
@@ -1014,10 +1356,23 @@ async function loadSystemPage(content) {
       </div>
       
       <div class="form-group">
-        <label style="display: flex; align-items: center; gap: 8px;">
-          <input type="checkbox" id="enableSearch" ${systemConfigs.enable_search?.value === 'true' ? 'checked' : ''}>
-          启用联网搜索
-        </label>
+        <label class="form-label">应用简介</label>
+        <input type="text" class="form-input" id="appDescription" value="${systemConfigs.app_description?.value || ''}" placeholder="如：提供智能对话、多种智能体服务">
+      </div>
+      
+      <div class="form-group">
+        <label class="form-label">技术基础</label>
+        <input type="text" class="form-input" id="appTechnology" value="${systemConfigs.app_technology?.value || ''}" placeholder="如：智谱 GLM-4.5-Air 大模型">
+      </div>
+      
+      <div class="form-group">
+        <label class="form-label">开发者</label>
+        <input type="text" class="form-input" id="appDeveloper" value="${systemConfigs.app_developer?.value || ''}" placeholder="如：OpenClaw Team">
+      </div>
+      
+      <div class="form-group">
+        <label class="form-label">更新日期</label>
+        <input type="text" class="form-input" id="appUpdateDate" value="${systemConfigs.app_update_date?.value || ''}" placeholder="如：2026-04-27">
       </div>
       
       <h3 style="margin: 24px 0 16px; padding-top: 16px; border-top: 1px solid #e2e8f0;">游客使用限制</h3>
@@ -1044,8 +1399,59 @@ 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">
+        <label class="form-label">隐私政策链接</label>
+        <input type="text" class="form-input" id="privacyPolicyUrl" value="${systemConfigs.privacy_policy_url?.value || ''}" placeholder="隐私政策页面URL">
+      </div>
+      
+      <div class="form-group">
+        <label class="form-label">用户协议链接</label>
+        <input type="text" class="form-input" id="userAgreementUrl" value="${systemConfigs.user_agreement_url?.value || ''}" placeholder="用户协议页面URL">
+      </div>
+      
       <button class="form-submit" onclick="saveSystemConfig()">保存设置</button>
     </div>
+    
+    <div style="margin-top: 16px; padding: 12px; background: #f5f7fa; border-radius: 8px;">
+      <p style="color: #718096; font-size: 13px;">
+        💡 提示：启用联网搜索等对话相关配置请前往"对话配置"页面设置
+      </p>
+    </div>
   `;
 }
 
@@ -1053,16 +1459,22 @@ async function saveSystemConfig() {
   const data = {
     app_name: document.getElementById('appName').value,
     app_version: document.getElementById('appVersion').value,
-    enable_search: document.getElementById('enableSearch').checked ? 'true' : 'false',
+    app_description: document.getElementById('appDescription').value,
+    app_technology: document.getElementById('appTechnology').value,
+    app_developer: document.getElementById('appDeveloper').value,
+    app_update_date: document.getElementById('appUpdateDate').value,
     guest_chat_sessions: document.getElementById('guestChatSessions').value,
     guest_chat_messages: document.getElementById('guestChatMessages').value,
     guest_agent_messages: document.getElementById('guestAgentMessages').value,
-    admin_password: document.getElementById('adminPassword').value
+    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);
   showToast('保存成功');
-  loadPage('system');
 }
 
 // ==================== 工具函数 ====================

www/style.css

@@ -1049,6 +1049,31 @@ body {
   box-shadow: 0 0 8px rgba(102, 126, 234, 0.3);
 }
 
+.avatar-upload-section {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+
+.avatar-upload-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 10px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.avatar-upload-btn:hover {
+  transform: scale(1.02);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
 .edit-input-group {
   margin-bottom: 16px;
 }
@@ -1705,6 +1730,16 @@ body {
   color: var(--primary);
 }
 
+.recent-agent-title {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .recent-agent-agent-name {
   font-size: 12px;
   color: var(--primary);
@@ -1782,7 +1817,17 @@ body {
   color: var(--primary);
 }
 
-.agent-history-agent {
+.agent-history-title {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-history-agent-name {
   font-size: 12px;
   color: var(--primary);
   background: rgba(102, 126, 234, 0.1);
@@ -2350,7 +2395,8 @@ body {
   font-size: 20px;
 }
 
-.clear-btn {
+/* TTS 语音播放按钮 */
+.tts-btn {
   background: rgba(255,255,255,0.2);
   border: none;
   border-radius: 8px;
@@ -2359,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;
@@ -2715,6 +2769,193 @@ body {
   flex-shrink: 0;
 }
 
+/* 更多工具按钮 */
+.tools-btn {
+  position: relative;
+}
+
+.tools-count {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  background: #ef4444;
+  color: white;
+  font-size: 11px;
+  font-weight: 600;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 工具选择弹窗 */
+.tools-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.tools-popup-content {
+  width: 90%;
+  max-width: 400px;
+  background: white;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.tools-popup-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%);
+  color: white;
+}
+
+.tools-popup-header h3 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.tools-popup-close {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  border-radius: 14px;
+  color: white;
+  font-size: 20px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.tools-popup-close:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.tools-popup-body {
+  padding: 16px 20px;
+}
+
+.tools-popup-tip {
+  color: #718096;
+  font-size: 13px;
+  margin-bottom: 16px;
+}
+
+.tools-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.tool-option {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: #f5f7fa;
+  border: 2px solid transparent;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.tool-option:hover {
+  background: #e8ecf1;
+}
+
+.tool-option.selected {
+  background: rgba(102, 126, 234, 0.1);
+  border-color: var(--primary);
+}
+
+.tool-checkbox {
+  flex-shrink: 0;
+  color: #718096;
+}
+
+.tool-option.selected .tool-checkbox {
+  color: var(--primary);
+}
+
+.tool-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  border-radius: 10px;
+  font-size: 20px;
+}
+
+.tool-info {
+  flex: 1;
+}
+
+.tool-name {
+  font-weight: 500;
+  color: #2d3748;
+}
+
+.tool-type {
+  font-size: 12px;
+  color: #718096;
+  margin-top: 2px;
+}
+
+.tools-popup-footer {
+  display: flex;
+  gap: 12px;
+  padding: 16px 20px;
+  background: #f5f7fa;
+}
+
+.tools-popup-btn {
+  flex: 1;
+  padding: 12px;
+  border: none;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.tools-popup-btn.cancel {
+  background: #e2e8f0;
+  color: #4a5568;
+}
+
+.tools-popup-btn.cancel:hover {
+  background: #cbd5e0;
+}
+
+.tools-popup-btn.confirm {
+  background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%);
+  color: white;
+}
+
+.tools-popup-btn.confirm:hover {
+  transform: scale(1.02);
+}
+
 /* 导航按钮样式 */
 .nav-btn {
   padding: 6px 8px;