From c21ad95963a29bf7f6e88fcae866459932119d52 Mon Sep 17 00:00:00 2001
From: XiaoFeng <117837368+Fzhiyu1@users.noreply.github.com>
Date: Tue, 16 Dec 2025 19:20:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E7=8A=B6=E6=80=81?=
=?UTF-8?q?=E6=A0=8F=E6=98=BE=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 在消息区域下方添加状态栏 UI（HTML、CSS、JS）
- 支持"思考中..."状态显示（蓝色脉冲动画）
- 支持"生成中..."状态显示（橙色脉冲动画）
- 支持工具执行时显示"正在执行 xxx..."
- 在 messageHandler 中添加状态栏消息发送逻辑
---
src/utils/messageHandler.ts | 21 +++++++++---
src/views/webviewContent.ts | 68 +++++++++++++++++++++++++++++++++++++
2 files changed, 84 insertions(+), 5 deletions(-)
diff --git a/src/utils/messageHandler.ts b/src/utils/messageHandler.ts
index 91ef177..150aec5 100644
--- a/src/utils/messageHandler.ts
+++ b/src/utils/messageHandler.ts
@@ -105,18 +105,29 @@ async function handleUserMessageWithBackend(
const historyManager = ChatHistoryManager.getInstance();
- // 显示加载状态
+ // 显示状态栏
panel.webview.postMessage({
- command: "showLoading",
- text: "正在思考...",
+ command: "updateStatus",
+ text: "思考中...",
+ type: "thinking",
});
return new Promise((resolve, reject) => {
currentSession!.sendMessage(text, {
onText: (fullText, isStreaming) => {
- // 暂时只在完成时发送消息（非流式）
- if (!isStreaming) {
+ if (isStreaming) {
+ // 流式时更新状态为"生成中"
+ panel.webview.postMessage({
+ command: "updateStatus",
+ text: "生成中...",
+ type: "working",
+ });
+ } else {
+ // 完成时发送消息并隐藏状态
console.log('[MessageHandler] 发送最终消息, 文本长度:', fullText.length);
+ panel.webview.postMessage({
+ command: "hideStatus",
+ });
panel.webview.postMessage({
command: "receiveMessage",
text: fullText,
diff --git a/src/views/webviewContent.ts b/src/views/webviewContent.ts
index 2b4fd18..0f64eef 100644
--- a/src/views/webviewContent.ts
+++ b/src/views/webviewContent.ts
@@ -680,6 +680,41 @@ export function getWebviewContent(iconUri?: string): string {
.question-message.answered .custom-input-container {
display: none;
}
+
+ /* 状态栏样式 */
+ .status-bar {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 16px;
+ background: var(--vscode-textBlockQuote-background);
+ border-radius: 6px;
+ margin: 8px 0;
+ font-size: 13px;
+ color: var(--vscode-descriptionForeground);
+ }
+ .status-indicator {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: var(--vscode-charts-blue);
+ animation: statusPulse 1.5s ease-in-out infinite;
+ }
+ @keyframes statusPulse {
+ 0%, 100% { opacity: 1; transform: scale(1); }
+ 50% { opacity: 0.5; transform: scale(0.8); }
+ }
+ .status-bar.working .status-indicator {
+ background: var(--vscode-charts-orange);
+ }
+ .status-bar.success .status-indicator {
+ background: var(--vscode-charts-green);
+ animation: none;
+ }
+ .status-bar.error .status-indicator {
+ background: var(--vscode-charts-red);
+ animation: none;
+ }
@@ -722,6 +757,12 @@ export function getWebviewContent(iconUri?: string): string {
+
+
+
@@ -1116,11 +1157,19 @@ export function getWebviewContent(iconUri?: string): string {
case 'hideLoading':
hideLoadingIndicator();
break;
+ case 'updateStatus':
+ updateStatusBar(message.text, message.type || 'thinking');
+ break;
+ case 'hideStatus':
+ hideStatusBar();
+ break;
case 'toolStart':
addToolStatus(message.toolName, 'start');
+ updateStatusBar('正在执行 ' + message.toolName + '...', 'working');
break;
case 'toolComplete':
addToolStatus(message.toolName, 'complete', message.result);
+ hideStatusBar();
break;
case 'toolError':
addToolStatus(message.toolName, 'error', message.error);
@@ -1224,6 +1273,25 @@ export function getWebviewContent(iconUri?: string): string {
}
}
+ // 更新状态栏
+ function updateStatusBar(text, type) {
+ const statusBar = document.getElementById('statusBar');
+ const statusText = document.getElementById('statusText');
+ if (statusBar && statusText) {
+ statusText.textContent = text;
+ statusBar.className = 'status-bar ' + (type || 'thinking');
+ statusBar.style.display = 'flex';
+ }
+ }
+
+ // 隐藏状态栏
+ function hideStatusBar() {
+ const statusBar = document.getElementById('statusBar');
+ if (statusBar) {
+ statusBar.style.display = 'none';
+ }
+ }
+
// 添加工具状态消息
function addToolStatus(toolName, status, detail) {
const statusIcons = {