From 9e859d8a209adcfe16c62f12482ab880767638d7 Mon Sep 17 00:00:00 2001 From: ZLY Date: Tue, 29 Jul 2025 16:27:54 +0800 Subject: [PATCH] =?UTF-8?q?refactor(webview):=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E7=BD=91=E9=A1=B5=E8=A7=86=E5=9B=BE=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 移除了 index.html 文件 - 优化了 MessageHandler.ts，增加了日志记录功能 - 更新了 script.js，改进了用户输入和请求取消的处理逻辑 - 调整了 style.css，移除了不必要的样式 - 更新了 webView.ts，同步了聊天输入表单的结构 --- media/webview/index.html | 83 ---------------------------------------- media/webview/script.js | 32 ++++++++++------ media/webview/style.css | 9 ----- src/MessageHandler.ts | 7 ++-- src/utils/webView.ts | 4 +- 5 files changed, 25 insertions(+), 110 deletions(-) delete mode 100644 media/webview/index.html diff --git a/media/webview/index.html b/media/webview/index.html deleted file mode 100644 index 3b18dfa..0000000 --- a/media/webview/index.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - AI Chat - - - - - -
- -
- - -
- - -
- 添加上下文 -
- - -
- - -
-

工作区变更

-
-
暂无文件变更
-
-
- - - - - - - - -
- - -
- -
- - - - - \ No newline at end of file diff --git a/media/webview/script.js b/media/webview/script.js index e1c86c2..a3c48f0 100644 --- a/media/webview/script.js +++ b/media/webview/script.js @@ -12,7 +12,7 @@ document.addEventListener('DOMContentLoaded', () => { const userInput = document.getElementById('user-input'); const chatBox = document.getElementById('chat-box'); const loading = document.getElementById('loading'); - const sendBtn = document.getElementById('send-btn'); // 获取发送按钮 + const sendBtn = document.getElementById('send-btn'); // 初始化显示工作区容器 const workspaceContainer = document.querySelector('.workspace-container'); @@ -22,23 +22,26 @@ document.addEventListener('DOMContentLoaded', () => { chatForm.addEventListener('submit', async (e) => { e.preventDefault(); + const text = userInput.value.trim(); + + // 如果输入为空，不执行任何操作 + if (!text && !isRequestInProgress) return; // 如果有请求正在进行，点击按钮将中断请求 if (isRequestInProgress) { + logToExtension("取消请求"); // 发送取消请求的消息到扩展 vscode.postMessage({ command: 'cancelRequest' }); + // 重置按钮状态 resetSendButton(); hideLoading(); return; } - const text = userInput.value.trim(); - if (!text) return; - - // 发送消息并禁用按钮 + // 发送消息 vscode.postMessage({ command: 'ask', text, @@ -46,15 +49,14 @@ document.addEventListener('DOMContentLoaded', () => { fileContentPath: contextFilePath // 添加文件路径 }); - showLoading(); - userInput.value = ''; - // 切换按钮为停止按钮 isRequestInProgress = true; if (sendBtn) { sendBtn.textContent = '停止'; sendBtn.classList.add('stop-button'); } + showLoading(); + userInput.value = ''; }); // 重置发送按钮为初始状态 @@ -102,9 +104,7 @@ document.addEventListener('DOMContentLoaded', () => { // 渲染内容 if (isMarkdown(content)) { - console.log("content:", content); msgDiv.innerHTML = marked.parse(content); - console.log("msgDiv.innerHTML:", msgDiv.innerHTML); } else { const div = document.createElement('div'); div.textContent = content; @@ -270,7 +270,9 @@ document.addEventListener('DOMContentLoaded', () => { streamingMessageContent = ''; } - isRequestInProgress = false + // 重置发送按钮状态 + resetSendButton(); + // 保存消息到历史记录 currentSessionHistory.push({role: 'assistant', content: content}); @@ -442,7 +444,6 @@ document.addEventListener('DOMContentLoaded', () => { window.addEventListener('message', (event) => { const message = event.data; - console.log(message) if (message.command === 'addMessage') { addMessage(message.role, message.content, message.codeDiff); } else if (message.command === 'startStream') { @@ -615,6 +616,13 @@ document.addEventListener('DOMContentLoaded', () => { language: language }); } + function logToExtension(...args) { + vscode.postMessage({ + command: 'log', + data: args + }); + } + // 简单的语言检测 diff --git a/media/webview/style.css b/media/webview/style.css index dab6f52..ca32615 100644 --- a/media/webview/style.css +++ b/media/webview/style.css @@ -501,12 +501,3 @@ code { color: var(--vscode-descriptionForeground); font-size: 12px; } - -.stop-button { - background-color: #f44336 !important; - color: white !important; -} - -.stop-button:hover { - background-color: #d32f2f !important; -} diff --git a/src/MessageHandler.ts b/src/MessageHandler.ts index 3b0c55c..140d3e2 100644 --- a/src/MessageHandler.ts +++ b/src/MessageHandler.ts @@ -63,6 +63,9 @@ export class MessageHandler { case 'restoreState': this.handleRestoreState(message); break; + case 'log' : + console.log( ...message.data); + break; } } @@ -149,7 +152,6 @@ export class MessageHandler { } catch (readError: any) { // 检查是否是由于取消请求导致的中断 if (readError.name === 'AbortError' || readError.message.includes('cancel')) { - console.log('请求已被用户中断'); // 通知前端请求已中断 this.provider._postMessage({command: 'requestCancelled'}); // 重置状态但不抛出错误 @@ -182,7 +184,6 @@ export class MessageHandler { } } - console.log("allCodeDiffs:",allCodeDiffs) // 通知前端流传输完成 this.provider._postMessage({ @@ -220,7 +221,6 @@ export class MessageHandler { } catch (error: any) { // 检查是否是由于取消请求导致的中断 if (error.name === 'AbortError' || error.message.includes('cancel') || error.message.includes('中断')) { - console.log('请求已被用户中断'); this.provider._postMessage({command: 'requestCancelled'}); } else { this.provider._postMessage({command: 'addMessage', role: 'ai', content: '调用失败：' + error.message}); @@ -475,7 +475,6 @@ export class MessageHandler { // 添加处理取消请求的方法 private async handleCancelRequest() { - console.log('收到取消请求'); if (this.currentReader) { try { await this.currentReader.cancel(); diff --git a/src/utils/webView.ts b/src/utils/webView.ts index 4abc6e1..3c34286 100644 --- a/src/utils/webView.ts +++ b/src/utils/webView.ts @@ -75,8 +75,8 @@ export function getWebviewContent(styleUri: vscode.Uri, scriptUri: vscode.Uri,hi
- - + +