From 463eedf1dd1b9427da753d36f0317706a9e779ee Mon Sep 17 00:00:00 2001 From: Roe-xin Date: Wed, 24 Dec 2025 11:26:25 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=AE=9E=E7=8E=B0=E4=BA=86=E5=B7=A5?= =?UTF-8?q?=E5=85=B7=E8=B0=83=E7=94=A8=E7=9A=84icon=E6=9B=BF=E6=8D=A2=20-?= =?UTF-8?q?=20=E8=BF=98=E5=B0=86icon=E6=8A=BD=E5=8F=96=E5=87=BA=E6=9D=A5?= =?UTF-8?q?=E6=88=90=E4=B8=BA=E7=8B=AC=E7=AB=8B=E7=9A=84=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=EF=BC=8C=E6=96=B9=E4=BE=BF=E7=BB=9F=E4=B8=80=E7=AE=A1=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/toolIcons.ts | 52 +++++++++++++++++++++ src/views/messageArea.ts | 92 ++++++++++++++++++++++++-------------- 2 files changed, 110 insertions(+), 34 deletions(-) create mode 100644 src/constants/toolIcons.ts diff --git a/src/constants/toolIcons.ts b/src/constants/toolIcons.ts new file mode 100644 index 0000000..ca881be --- /dev/null +++ b/src/constants/toolIcons.ts @@ -0,0 +1,52 @@ +/** + * 工具图标定义 + * 包含各种工具的 SVG 图标 + */ + +/** + * 折叠图标 SVG（用于可折叠的工具结果） + */ +export const collapseIconSvg = ` + + + + + + +`; + +/** + * 文件写入完成图标 SVG + */ +export const fileWriteIconSvg = ` + + + + + + +`; + +/** + * 语法检查图标 SVG + */ +export const syntaxCheckIconSvg = ` + + + + + +`; + +/** + * 已检索代码图标 SVG + */ +export const SearchCode = ` + + + + + +`; diff --git a/src/views/messageArea.ts b/src/views/messageArea.ts index fc6fb46..3c5f4f2 100644 --- a/src/views/messageArea.ts +++ b/src/views/messageArea.ts @@ -10,6 +10,13 @@ * - 显示工具执行状态和加载指示器 */ +import { + collapseIconSvg, + fileWriteIconSvg, + syntaxCheckIconSvg, + SearchCode, +} from "../constants/toolIcons"; + /** * 获取消息区域的 HTML 内容 */ @@ -394,6 +401,39 @@ export function getMessageAreaStyles(): string { .tool-segment-header:not(.collapsed) .tool-collapse-icon { transform: rotate(0deg); } + .tool-file-write-icon { + width: 16px; + height: 16px; + flex-shrink: 0; + margin-right: 6px; + } + .tool-file-write-icon svg { + width: 100%; + height: 100%; + display: block; + } + .tool-syntax-check-icon { + width: 16px; + height: 16px; + flex-shrink: 0; + margin-right: 6px; + } + .tool-syntax-check-icon svg { + width: 100%; + height: 100%; + display: block; + } + .tool-search-code-icon { + width: 16px; + height: 16px; + flex-shrink: 0; + margin-right: 6px; + } + .tool-search-code-icon svg { + width: 100%; + height: 100%; + display: block; + } .tool-segment-content { overflow: hidden; transition: max-height 0.3s ease; @@ -491,15 +531,21 @@ export function getMessageAreaStyles(): string { */ export function getMessageAreaScript(): string { return ` + // 工具图标定义 + const collapseIconSvg = \`${collapseIconSvg}\`; + const fileWriteIconSvg = \`${fileWriteIconSvg}\`; + const syntaxCheckIconSvg = \`${syntaxCheckIconSvg}\`; + const searchCodeIconSvg = \`${SearchCode}\`; + // 工具名称映射 function getToolDisplayName(toolName) { const toolNameMap = { 'file_read': '已完成文件读取', 'file_write': '已完成文件写入', - 'file_list': '已读取目录', - 'syntax_check': '语法检查', - 'simulation': '仿真', - 'waveform_summary': '波形分析' + 'file_list': '已检索代码文件', + 'syntax_check': '已完成语法检查', + 'simulation': '已完成仿真', + 'waveform_summary': '已完成波形分析' }; return toolNameMap[toolName] || toolName; } @@ -719,29 +765,18 @@ export function getMessageAreaScript(): string { segmentDiv.className += ' segment-text'; segmentDiv.innerHTML = formatText(segment.content); } else if (segment.type === 'tool') { - const statusIcon = segment.toolStatus === 'success' ? '✅' : - segment.toolStatus === 'error' ? '❌' : '🔧'; + const statusIcon = segment.toolStatus === 'error' ? '❌' : '🔧'; const toolResult = segment.toolResult || ''; // 检查工具结果是否过长(超过一行显示不下) const shouldCollapse = toolResult && toolResult.length > 60; - // 折叠图标 SVG - const collapseIconSvg = \` - - - - - - - \`; - segmentDiv.innerHTML = \`
\${shouldCollapse ? collapseIconSvg : ''} - \${statusIcon} + \${!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 : ''} \${getToolDisplayName(segment.toolName) || '工具'} \${toolResult && !shouldCollapse ? \`\${toolResult}\` : ''}
@@ -910,29 +945,18 @@ export function getMessageAreaScript(): string { segmentDiv.className += ' segment-text'; segmentDiv.innerHTML = formatText(segment.content); } else if (segment.type === 'tool') { - const statusIcon = segment.toolStatus === 'success' ? '✅' : - segment.toolStatus === 'error' ? '❌' : '🔧'; + const statusIcon = segment.toolStatus === 'error' ? '❌' : '🔧'; const toolResult = segment.toolResult || ''; // 检查工具结果是否过长(超过一行显示不下) const shouldCollapse = toolResult && toolResult.length > 60; - // 折叠图标 SVG - const collapseIconSvg = \` - - - - - - - \`; - segmentDiv.innerHTML = \`
\${shouldCollapse ? collapseIconSvg : ''} - \${statusIcon} + \${!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 : ''} \${getToolDisplayName(segment.toolName) || '工具'} \${toolResult && !shouldCollapse ? \`\${toolResult}\` : ''}