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; } }