From db7d0fd586634d93402c5704262a921e091ecf27 Mon Sep 17 00:00:00 2001 From: hubian <908234780@qq.com> Date: Tue, 14 Apr 2026 17:11:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B7=A5=E5=85=B7=E9=80=89=E6=8B=A9?= =?UTF-8?q?=E6=8A=98=E5=8F=A0=E9=9D=A2=E6=9D=BF=EF=BC=8C=E4=B8=8D=E5=8D=A0?= =?UTF-8?q?=E7=94=A8=E5=BF=AB=E6=8D=B7=E8=AF=AD=E5=8F=A5=E5=8C=BA=E5=9F=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- templates/index.html | 123 ++++++++++++++++++++++++++++++++----------- 1 file changed, 93 insertions(+), 30 deletions(-) diff --git a/templates/index.html b/templates/index.html index f23de02..9bbad75 100644 --- a/templates/index.html +++ b/templates/index.html @@ -130,10 +130,39 @@ /* 快捷语句 - 横向扁平 */ .quick-phrases-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; position: relative; } - .tool-toggle-item { display: inline-flex; align-items: center; gap: 4px; } - .tool-toggle-item input { width: 14px; height: 14px; } - .tool-toggle-item label { font-size: 12px; color: #666; } - .tool-toggle-item label i { color: #10a37f; } + + /* 工具折叠面板 */ + .tools-collapsible { position: relative; margin-bottom: 8px; } + .tools-toggle-btn { + padding: 8px 12px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px; + cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #666; + transition: all 0.2s; + } + .tools-toggle-btn:hover { background: #e8e8e8; border-color: #10a37f; color: #10a37f; } + .tools-toggle-btn.active { background: #e8f5e9; border-color: #10a37f; color: #10a37f; } + .tools-badge { + background: #10a37f; color: white; font-size: 11px; padding: 1px 5px; border-radius: 10px; + min-width: 16px; text-align: center; + } + .tools-panel { + display: none; position: absolute; bottom: 100%; left: 0; margin-bottom: 8px; + background: white; border: 1px solid #e0e0e0; border-radius: 12px; + box-shadow: 0 4px 20px rgba(0,0,0,0.15); min-width: 200px; z-index: 100; + } + .tools-panel.show { display: block; } + .tools-panel-header { + display: flex; justify-content: space-between; align-items: center; + padding: 12px 16px; border-bottom: 1px solid #eee; font-weight: 500; color: #333; + } + .tools-panel-header button { background: none; border: none; color: #999; cursor: pointer; padding: 4px; } + .tools-panel-header button:hover { color: #666; } + .tools-panel-content { padding: 12px 16px; max-height: 300px; overflow-y: auto; } + .tool-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; } + .tool-item input { width: 16px; height: 16px; } + .tool-item label { cursor: pointer; font-size: 14px; color: #333; display: flex; align-items: center; gap: 6px; } + .tool-item label i { color: #10a37f; } + .tool-item.disabled { opacity: 0.5; } + .tool-item.disabled label { color: #999; cursor: not-allowed; } .add-phrase-btn { padding: 6px 10px; background: #f0f0f0; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; font-size: 12px; color: #666; white-space: nowrap; flex-shrink: 0; } .add-phrase-btn:hover { background: #e8e8e8; } .phrase-list-wrapper { flex: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } @@ -197,6 +226,23 @@
+ +
+ +
+
+ 工具设置 + +
+
+
+ + +
+
@@ -205,7 +251,6 @@
-
@@ -317,13 +362,16 @@ // 获取当前Agent不支持的工具列表（用户已启用但Agent不支持） function getUnsupportedTools() { const unsupported = []; - // 检查所有工具checkbox - const toolCheckboxes = document.querySelectorAll('.tool-checkbox'); + // 检查所有工具checkbox（排除disabled的） + const toolCheckboxes = document.querySelectorAll('.tool-checkbox:not([disabled])'); toolCheckboxes.forEach(cb => { - if (cb.checked && !checkAgentToolSupport(cb.dataset.toolType)) { - // 获取工具显示名称 - const label = cb.nextElementSibling?.textContent?.trim() || cb.dataset.toolType; - unsupported.push(label); + if (cb.checked) { + // 检查Agent是否支持 + if (!checkAgentToolSupport(cb.dataset.toolType)) { + // 获取工具显示名称 + const label = cb.closest('.tool-item')?.querySelector('label')?.textContent?.trim() || cb.dataset.toolType; + unsupported.push(label); + } } }); return unsupported; @@ -331,7 +379,7 @@ // 渲染工具选择区域（根据系统工具列表） function renderToolToggles() { - const container = document.getElementById('toolToggleArea'); + const container = document.getElementById('toolsPanelContent'); if (!container || toolsData.length === 0) return; // 获取当前Agent支持的工具 @@ -344,16 +392,37 @@ const toolType = t.tool_type || 'unknown'; const isSupported = agentTools.includes(toolType); const icon = getToolIconFrontend(toolType); - html += `
- - + const disabledClass = isSupported ? '' : 'disabled'; + html += `
+ +
`; }); - // 保留原有的结构，只更新工具checkbox部分 - const existingWarning = document.getElementById('tool-warning-tip'); - container.innerHTML = html; - if (existingWarning) container.appendChild(existingWarning); + container.innerHTML = html || '
暂无可用工具
'; + + // 更新工具数量badge + updateToolsBadge(); + } + + // 更新工具数量badge + function updateToolsBadge() { + const badge = document.getElementById('toolsBadge'); + const selectedCount = document.querySelectorAll('.tool-checkbox:checked').length; + if (selectedCount > 0) { + badge.textContent = selectedCount; + badge.style.display = 'inline'; + } else { + badge.style.display = 'none'; + } + } + + // 切换工具面板显示 + function toggleToolsPanel() { + const panel = document.getElementById('toolsPanel'); + const btn = document.querySelector('.tools-toggle-btn'); + panel.classList.toggle('show'); + btn.classList.toggle('active'); } // 前端工具图标 @@ -381,6 +450,8 @@ // 显示工具不支持提示 function showToolWarning() { + updateToolsBadge(); // 更新badge数量 + const unsupported = getUnsupportedTools(); const warningDiv = document.getElementById('tool-warning-tip'); @@ -389,20 +460,12 @@ const agentName = agent?.display_name || agent?.name || '当前Agent'; const msg = ` ${agentName} 不支持 ${unsupported.join('、')} 工具，请关闭或切换Agent`; - if (warningDiv) { - warningDiv.innerHTML = msg; - warningDiv.style.display = 'block'; - } else { - const newWarning = document.createElement('div'); - newWarning.id = 'tool-warning-tip'; - newWarning.style.cssText = 'margin-top:8px;padding:8px 12px;background:#fff3cd;border:1px solid #ffc107;border-radius:6px;font-size:13px;color:#856404;'; - newWarning.innerHTML = msg; - document.getElementById('toolToggleArea').appendChild(newWarning); - } + warningDiv.innerHTML = msg; + warningDiv.style.display = 'block'; // 禁用发送按钮 document.getElementById('sendBtn').disabled = true; } else { - if (warningDiv) warningDiv.style.display = 'none'; + warningDiv.style.display = 'none'; document.getElementById('sendBtn').disabled = false; } }