From 5a3b88f232da34be7ee3be6b6c1da168cbff7c52 Mon Sep 17 00:00:00 2001 From: OpenClaw Agent Date: Thu, 16 Apr 2026 09:42:26 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B7=A5=E5=85=B7=E5=88=97=E8=A1=A8?= =?UTF-8?q?=E7=8B=AC=E7=AB=8B=E4=B8=BA=E5=B7=A5=E5=85=B7=E9=9D=A2=E6=9D=BF?= =?UTF-8?q?=E6=A8=A1=E6=80=81=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Header 新增 🔧 工具按钮，点击打开工具面板 - 新增 tools-modal.ts 组件 - 工具面板以卡片网格展示全部 12 个工具 - 每个工具显示名称、描述、自动/需确认标签 - run_command 开关内嵌在工具卡片中 - 设置面板简化为「查看全部工具」按钮 - 设置面板保留 run_command 开关同步 --- src/renderer/components/tools-modal.ts | 65 +++++++++++++++ src/renderer/index.html | 109 ++++++++++++++++++++----- src/renderer/main.ts | 3 + src/renderer/styles/style.css | 73 +++++++++++++++++ 4 files changed, 229 insertions(+), 21 deletions(-) create mode 100644 src/renderer/components/tools-modal.ts diff --git a/src/renderer/components/tools-modal.ts b/src/renderer/components/tools-modal.ts new file mode 100644 index 0000000..5499f9f --- /dev/null +++ b/src/renderer/components/tools-modal.ts @@ -0,0 +1,65 @@ +/** + * ToolsModal - 工具面板模态框 + * 展示所有可用工具的详细信息 + */ + +import { state, KEYS } from '../state/state.js'; +import { setToolEnabled } from '../services/tool-registry.js'; +import { showToast } from './toast.js'; +import { logInfo } from '../services/log-service.js'; +import type { ChatDB } from '../types.js'; + +let modalEl: HTMLElement; + +export function initToolsModal(): void { + modalEl = document.querySelector('#toolsModal')!; + + // Header 按钮 + document.querySelector('#btnTools')!.addEventListener('click', openToolsModal); + document.querySelector('#btnCloseTools')!.addEventListener('click', closeToolsModal); + modalEl.addEventListener('click', (e) => { + if (e.target === modalEl) closeToolsModal(); + }); + + // 设置中"查看全部工具"按钮 + document.querySelector('#btnOpenToolsFromSettings')?.addEventListener('click', () => { + (document.querySelector('#settingsModal') as HTMLElement).style.display = 'none'; + openToolsModal(); + }); + + // run_command 开关（模态框中） + const toggle2 = document.querySelector('#toggleRunCommand2') as HTMLInputElement; + if (toggle2) { + toggle2.addEventListener('change', async () => { + const db = state.get(KEYS.DB); + state.set('runCommandEnabled', toggle2.checked); + if (db) await db.saveSetting('runCommandEnabled', toggle2.checked); + setToolEnabled('run_command', toggle2.checked); + + // 同步设置面板的开关 + const toggle1 = document.querySelector('#toggleRunCommand') as HTMLInputElement; + if (toggle1) toggle1.checked = toggle2.checked; + + if (toggle2.checked) { + showToast('命令执行已开启（每次执行需确认）', 'info'); + logInfo('命令执行已开启'); + } else { + showToast('命令执行已关闭', 'info'); + logInfo('命令执行已关闭'); + } + }); + } +} + +export function openToolsModal(): void { + // 同步 run_command 开关状态 + const runCmdEnabled = state.get('runCommandEnabled', true); + const toggle2 = document.querySelector('#toggleRunCommand2') as HTMLInputElement; + if (toggle2) toggle2.checked = runCmdEnabled; + + modalEl.style.display = ''; +} + +export function closeToolsModal(): void { + modalEl.style.display = 'none'; +} diff --git a/src/renderer/index.html b/src/renderer/index.html index 0b8b336..de68fc0 100644 --- a/src/renderer/index.html +++ b/src/renderer/index.html @@ -52,6 +52,11 @@ + +
+ 💻 执行命令 +
-

⚠️ 高风险操作（写入/删除/命令执行）会弹出确认对话框。系统关键路径（/etc, /sys, ~/.ssh 等）已自动屏蔽。

+

⚠️ 高风险操作会弹出确认对话框。系统关键路径（/etc, /sys, ~/.ssh 等）已自动屏蔽。

@@ -387,6 +380,80 @@
+ + +