feat(sendButton): 添加发送和暂停按钮图标及其状态管理功能

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 {
             <div class="input-actions">
               ${getContextCompressContent()}
               ${getOptimizeButtonContent()}
-              <button onclick="sendMessage()">发送</button>
+              <button id="sendButton" onclick="handleSendOrStop()">
+                ${sendIconSvg}
+                <span style="display: none;">${stopIconSvg}</span>
+              </button>
             </div>
           </div>
         </div>
@@ -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(); // 重置输入框高度

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);
+    }
   </style>
 </head>
 <body>
@@ -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':