From 5b6ac43e131e80781a004f72e21680c653af73f0 Mon Sep 17 00:00:00 2001 From: Roe-xin Date: Mon, 29 Dec 2025 14:41:15 +0800 Subject: [PATCH] =?UTF-8?q?feat(sendButton):=20=E6=B7=BB=E5=8A=A0=E5=8F=91?= =?UTF-8?q?=E9=80=81=E5=92=8C=E6=9A=82=E5=81=9C=E6=8C=89=E9=92=AE=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=E5=8F=8A=E5=85=B6=E7=8A=B6=E6=80=81=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/toolIcons.ts | 20 +++++++++++ src/views/inputArea.ts | 72 ++++++++++++++++++++++++++++++++++++- src/views/webviewContent.ts | 25 +++++++++++++ 3 files changed, 116 insertions(+), 1 deletion(-) diff --git a/src/constants/toolIcons.ts b/src/constants/toolIcons.ts index ca881be..8d866f9 100644 --- a/src/constants/toolIcons.ts +++ b/src/constants/toolIcons.ts @@ -50,3 +50,23 @@ export const SearchCode = ` `; + +/** + * 发送按钮图标 SVG（向上箭头） + */ +export const sendIconSvg = ` + + + + +`; + +/** + * 暂停按钮图标 SVG（圆形边框内的方块） + */ +export const stopIconSvg = ` + + + + +`; diff --git a/src/views/inputArea.ts b/src/views/inputArea.ts index 638eb96..a0ec703 100644 --- a/src/views/inputArea.ts +++ b/src/views/inputArea.ts @@ -29,6 +29,10 @@ import { getOptimizeButtonStyles, getOptimizeButtonScript } from "./optimizeButton"; +import { + sendIconSvg, + stopIconSvg +} from "../constants/toolIcons"; /** * 获取输入区域的 HTML 内容 @@ -56,7 +60,10 @@ export function getInputAreaContent(): string {
${getContextCompressContent()} ${getOptimizeButtonContent()} - +
@@ -221,6 +228,30 @@ export function getInputAreaStyles(): string { border: none; border-radius: 4px; cursor: pointer; + transition: background 0.2s ease; + display: flex; + align-items: center; + justify-content: center; + } + button:hover { + background: var(--vscode-button-hoverBackground); + } + /* 发送按钮状态样式 */ + #sendButton { + position: relative; + min-width: 32px; + padding: 6px 8px; + } + #sendButton svg { + width: 14px; + height: 14px; + display: block; + } + #sendButton.sending { + background: var(--vscode-button-background); + } + #sendButton.sending:hover { + background: var(--vscode-button-hoverBackground); } `; } @@ -237,6 +268,9 @@ export function getInputAreaScript(): string { ${getPlanToggleScript()} ${getOptimizeButtonScript()} + // 对话状态管理 + let isConversationActive = false; + // 自动调整 textarea 高度 function autoResizeTextarea() { if (messageInput) { @@ -256,6 +290,38 @@ export function getInputAreaScript(): string { messageInput.focus(); } + // 切换发送按钮状态 + function setSendButtonState(isSending) { + const sendButton = document.getElementById('sendButton'); + const children = sendButton.children; + const sendIconContainer = children[0]; // 第一个子元素是发送图标的 SVG + const stopIconContainer = children[1]; // 第二个子元素是包含暂停图标的 span + + if (isSending) { + sendButton.classList.add('sending'); + sendIconContainer.style.display = 'none'; + stopIconContainer.style.display = 'block'; + isConversationActive = true; + } else { + sendButton.classList.remove('sending'); + sendIconContainer.style.display = 'block'; + stopIconContainer.style.display = 'none'; + isConversationActive = false; + } + } + + // 处理发送或停止 + function handleSendOrStop() { + if (isConversationActive) { + // 当前正在对话，执行停止操作 + vscode.postMessage({ command: 'abortDialog' }); + setSendButtonState(false); + } else { + // 当前未在对话，执行发送操作 + sendMessage(); + } + } + function sendMessage() { const text = messageInput.value.trim(); if (!text) return; @@ -264,6 +330,10 @@ export function getInputAreaScript(): string { const model = getCurrentModel(); // 从模型选择器组件获取当前模型 addMessage(text, 'user'); + + // 切换按钮为暂停状态 + setSendButtonState(true); + vscode.postMessage({ command: 'sendMessage', text: text, mode: mode, model: model }); messageInput.value = ''; autoResizeTextarea(); // 重置输入框高度 diff --git a/src/views/webviewContent.ts b/src/views/webviewContent.ts index f1d2c29..3991909 100644 --- a/src/views/webviewContent.ts +++ b/src/views/webviewContent.ts @@ -347,6 +347,27 @@ export function getWebviewContent(iconUri?: string): string { background: var(--vscode-charts-red); animation: none; } + + /* 快捷操作按钮样式 */ + .quick-actions { + display: flex; + gap: 10px; + margin-bottom: 15px; + flex-wrap: wrap; + } + .quick-btn { + padding: 8px 16px; + background: var(--vscode-button-secondaryBackground); + color: var(--vscode-button-secondaryForeground); + border: 1px solid var(--vscode-button-border); + border-radius: 6px; + cursor: pointer; + font-size: 13px; + transition: all 0.2s; + } + .quick-btn:hover { + background: var(--vscode-button-secondaryHoverBackground); + } @@ -437,6 +458,10 @@ export function getWebviewContent(iconUri?: string): string { // 实时更新分段消息（按后端返回顺序） console.log('[WebView] 实时更新段落, segments:', message.segments); updateSegmentsRealtime(message.segments, message.isComplete); + // 如果对话完成，恢复发送按钮状态 + if (message.isComplete && typeof setSendButtonState === 'function') { + setSendButtonState(false); + } break; case 'receiveSegments':