From 5287d483d8ec20eca6ca35d4a1219254081abe70 Mon Sep 17 00:00:00 2001 From: Roe-xin Date: Wed, 31 Dec 2025 09:43:30 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E6=89=80=E6=9C=89=E5=B7=A5?= =?UTF-8?q?=E5=85=B7=E6=B7=BB=E5=8A=A0=E5=9B=BE=E6=A0=87=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增多个工具图标定义（文件读取、删除、仿真、波形分析等） - 添加 getToolIcon 函数统一管理工具图标映射 - 优化工具显示逻辑，所有工具现在都显示对应图标 - 新增 addStateTransition 工具的图标和名称映射 - 添加所有新图标的 CSS 样式 --- src/constants/toolIcons.ts | 84 ++++++++++++++++++++++++ src/views/messageArea.ts | 131 ++++++++++++++++++++++++++++++++++--- 2 files changed, 207 insertions(+), 8 deletions(-) diff --git a/src/constants/toolIcons.ts b/src/constants/toolIcons.ts index d7c0edd..6fff308 100644 --- a/src/constants/toolIcons.ts +++ b/src/constants/toolIcons.ts @@ -81,3 +81,87 @@ export const agentIconSvg = ` * planner 图标 SVG */ export const plannerIconSvg = ``; + +/** + * 保存知识库图标 SVG + */ +export const saveKnowledgeIconSvg = ` + + + + + +`; + +/** + * 文件读取图标 SVG + */ +export const fileReadIconSvg = ` + + + + + + +`; + +/** + * 文件删除图标 SVG + */ +export const fileDeleteIconSvg = ` + + + + + + +`; + +/** + * 仿真图标 SVG + */ +export const simulationIconSvg = ` + + + + + + +`; + +/** + * 波形分析图标 SVG + */ +export const waveformIconSvg = ` + + + + + + +`; + +/** + * 知识库加载图标 SVG + */ +export const knowledgeLoadIconSvg = ` + + + + + + +`; + +/** + * 状态转换图标 SVG + */ +export const stateTransitionIconSvg = ` + + + + + + + +`; diff --git a/src/views/messageArea.ts b/src/views/messageArea.ts index 37432f6..498710b 100644 --- a/src/views/messageArea.ts +++ b/src/views/messageArea.ts @@ -13,9 +13,16 @@ import { collapseIconSvg, fileWriteIconSvg, + fileReadIconSvg, + fileDeleteIconSvg, syntaxCheckIconSvg, SearchCode, agentIconSvg, + saveKnowledgeIconSvg, + simulationIconSvg, + waveformIconSvg, + knowledgeLoadIconSvg, + stateTransitionIconSvg, } from "../constants/toolIcons"; import { getWaveformPreviewContent, @@ -419,6 +426,28 @@ export function getMessageAreaStyles(): string { height: 100%; display: block; } + .tool-file-read-icon { + width: 16px; + height: 16px; + flex-shrink: 0; + margin-right: 6px; + } + .tool-file-read-icon svg { + width: 100%; + height: 100%; + display: block; + } + .tool-file-delete-icon { + width: 16px; + height: 16px; + flex-shrink: 0; + margin-right: 6px; + } + .tool-file-delete-icon svg { + width: 100%; + height: 100%; + display: block; + } .tool-syntax-check-icon { width: 16px; height: 16px; @@ -441,6 +470,61 @@ export function getMessageAreaStyles(): string { height: 100%; display: block; } + .tool-save-knowledge-icon { + width: 16px; + height: 16px; + flex-shrink: 0; + margin-right: 6px; + } + .tool-save-knowledge-icon svg { + width: 100%; + height: 100%; + display: block; + } + .tool-simulation-icon { + width: 16px; + height: 16px; + flex-shrink: 0; + margin-right: 6px; + } + .tool-simulation-icon svg { + width: 100%; + height: 100%; + display: block; + } + .tool-waveform-icon { + width: 16px; + height: 16px; + flex-shrink: 0; + margin-right: 6px; + } + .tool-waveform-icon svg { + width: 100%; + height: 100%; + display: block; + } + .tool-knowledge-load-icon { + width: 16px; + height: 16px; + flex-shrink: 0; + margin-right: 6px; + } + .tool-knowledge-load-icon svg { + width: 100%; + height: 100%; + display: block; + } + .tool-state-transition-icon { + width: 16px; + height: 16px; + flex-shrink: 0; + margin-right: 6px; + } + .tool-state-transition-icon svg { + width: 100%; + height: 100%; + display: block; + } .tool-segment-content { overflow: hidden; transition: max-height 0.3s ease; @@ -547,13 +631,49 @@ export function getMessageAreaScript(): string { // 工具图标定义 const collapseIconSvg = \`${collapseIconSvg}\`; const fileWriteIconSvg = \`${fileWriteIconSvg}\`; + const fileReadIconSvg = \`${fileReadIconSvg}\`; + const fileDeleteIconSvg = \`${fileDeleteIconSvg}\`; const syntaxCheckIconSvg = \`${syntaxCheckIconSvg}\`; const searchCodeIconSvg = \`${SearchCode}\`; + const saveKnowledgeIconSvg = \`${saveKnowledgeIconSvg}\`; + const simulationIconSvg = \`${simulationIconSvg}\`; + const waveformIconSvg = \`${waveformIconSvg}\`; + const knowledgeLoadIconSvg = \`${knowledgeLoadIconSvg}\`; + const stateTransitionIconSvg = \`${stateTransitionIconSvg}\`; ${getAgentCardScript()} ${getPlanCardScript()} + // 获取工具图标 + function getToolIcon(toolName) { + const iconMap = { + 'file_read': fileReadIconSvg, + 'file_write': fileWriteIconSvg, + 'file_delete': fileDeleteIconSvg, + 'file_list': searchCodeIconSvg, + 'syntax_check': syntaxCheckIconSvg, + 'simulation': simulationIconSvg, + 'waveform_summary': waveformIconSvg, + 'knowledge_save': saveKnowledgeIconSvg, + 'knowledge_load': knowledgeLoadIconSvg, + 'queryKnowledgeSummary': knowledgeLoadIconSvg, + 'queryRules': knowledgeLoadIconSvg, + 'setModule': fileWriteIconSvg, + 'addSignal': fileWriteIconSvg, + 'addSignalExample': fileWriteIconSvg, + 'validateKnowledgeGraph': syntaxCheckIconSvg, + 'querySignals': searchCodeIconSvg, + 'addPlan': fileWriteIconSvg, + 'addEdge': fileWriteIconSvg, + 'showPlan': searchCodeIconSvg, + 'addRule': fileWriteIconSvg, + 'updateNode': fileWriteIconSvg, + 'addStateTransition': stateTransitionIconSvg + }; + return iconMap[toolName] || ''; + } + // 工具名称映射 function getToolDisplayName(toolName) { const toolNameMap = { @@ -578,6 +698,7 @@ export function getMessageAreaScript(): string { 'showPlan': '已显示计划', 'addRule': '已添加规则', 'updateNode': '已更新节点', + 'addStateTransition': '已添加状态转换', 'spawnExplorer': '代码探索' }; return toolNameMap[toolName] || toolName; @@ -823,10 +944,7 @@ export function getMessageAreaScript(): string { segmentDiv.innerHTML = \`
- \${shouldCollapse ? collapseIconSvg : ''} - \${!shouldCollapse && segment.toolStatus === 'success' && segment.toolName === 'file_write' ? fileWriteIconSvg : ''} - \${!shouldCollapse && segment.toolStatus === 'success' && segment.toolName === 'syntax_check' ? syntaxCheckIconSvg : ''} - \${!shouldCollapse && segment.toolStatus === 'success' && segment.toolName === 'file_list' ? searchCodeIconSvg : ''} + \${shouldCollapse ? collapseIconSvg : getToolIcon(segment.toolName)} \${getToolDisplayName(segment.toolName) || '工具'} \${toolResult && !shouldCollapse ? \`\${toolResult}\` : ''}
@@ -1031,10 +1149,7 @@ export function getMessageAreaScript(): string { segmentDiv.innerHTML = \`
- \${shouldCollapse ? collapseIconSvg : ''} - \${!shouldCollapse && segment.toolStatus === 'success' && segment.toolName === 'file_write' ? fileWriteIconSvg : ''} - \${!shouldCollapse && segment.toolStatus === 'success' && segment.toolName === 'syntax_check' ? syntaxCheckIconSvg : ''} - \${!shouldCollapse && segment.toolStatus === 'success' && segment.toolName === 'file_list' ? searchCodeIconSvg : ''} + \${shouldCollapse ? collapseIconSvg : getToolIcon(segment.toolName)} \${getToolDisplayName(segment.toolName) || '工具'} \${toolResult && !shouldCollapse ? \`\${toolResult}\` : ''}