feat:模型切换的样式定义

src/views/webviewContent.ts

@@ -61,17 +61,99 @@ export function getWebviewContent(iconUri?: string): string {
     .input-group {
       display: flex;
       gap: 10px;
+      align-items: flex-end;
+      background: var(--vscode-input-background);
+      border: 1px solid var(--vscode-input-border);
+      border-radius: 8px;
+      padding: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
+      transition: all 0.3s ease;
+    }
+    .input-group:hover {
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.15);
+    }
+    .input-group:focus-within {
+      border-color: var(--vscode-focusBorder);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 3px 10px rgba(0, 0, 0, 0.2);
+    }
+    .input-wrapper {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .mode-selector {
+      display: flex;
+      align-items: center;
+      position: relative;
+    }
+    .mode-selector select {
+      padding: 2px 4px;
+      background: transparent;
+      color: var(--vscode-foreground);
+      border: none;
+      cursor: pointer;
+      font-size: 12px;
+      outline: none;
+    }
+    .mode-selector select:hover {
+      background: var(--vscode-list-hoverBackground);
+    }
+    /* Tooltip 样式 */
+    .tooltip {
+      position: relative;
+      display: inline-block;
+    }
+    .tooltip .tooltiptext {
+      visibility: hidden;
+      width: auto;
+      background: #1e1e1e;
+      color: #ffffff;
+      text-align: center;
+      border-radius: 6px;
+      padding: 6px 12px;
+      position: absolute;
+      z-index: 1000;
+      bottom: 150%;
+      left: 50%;
+      transform: translateX(-50%) translateY(10px);
+      opacity: 0;
+      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+      font-size: 12px;
+      font-weight: 500;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
+      white-space: nowrap;
+      letter-spacing: 0.3px;
+    }
+    .tooltip .tooltiptext::after {
+      content: "";
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: -6px;
+      border-width: 6px;
+      border-style: solid;
+      border-color: #1e1e1e transparent transparent transparent;
+      filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
+    }
+    .tooltip:hover .tooltiptext {
+      visibility: visible;
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
     }
     textarea {
-      flex: 1;
+      width: 100%;
       padding: 10px;
-      background: var(--vscode-input-background);
+      background: transparent;
       color: var(--vscode-input-foreground);
-      border: 1px solid var(--vscode-input-border);
+      border: none;
       border-radius: 4px;
       font-family: inherit;
       resize: none;
       min-height: 40px;
+      outline: none;
+      box-sizing: border-box;
     }
     button {
       padding: 0 20px;
@@ -228,11 +310,23 @@ export function getWebviewContent(iconUri?: string): string {
 
     <div class="input-area">
       <div class="input-group">
-        <textarea
+        <div class="input-wrapper">
-          id="messageInput"
+          <textarea
-          placeholder="输入您的问题..."
+            id="messageInput"
-          onkeydown="if(event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); sendMessage(); }"
+            placeholder="输入您的问题..."
-        ></textarea>
+            onkeydown="if(event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); sendMessage(); }"
+          ></textarea>
+          <div class="mode-selector">
+            <div class="tooltip">
+              <select id="modeSelect">
+                <option value="agent" selected>Agent</option>
+                <option value="ask">Ask</option>
+                <option value="plan">Plan</option>
+              </select>
+              <span class="tooltiptext">切换模型</span>
+            </div>
+          </div>
+        </div>
         <button onclick="sendMessage()">发送</button>
       </div>
     </div>
@@ -242,6 +336,7 @@ export function getWebviewContent(iconUri?: string): string {
     const vscode = acquireVsCodeApi();
     const messagesEl = document.getElementById('messages');
     const messageInput = document.getElementById('messageInput');
+    const modeSelect = document.getElementById('modeSelect');
     const filePathInput = document.getElementById('filePathInput');
     const fileContentEl = document.getElementById('fileContent');
     const errorMessageEl = document.getElementById('errorMessage');
@@ -255,8 +350,9 @@ export function getWebviewContent(iconUri?: string): string {
       const text = messageInput.value.trim();
       if (!text) return;
 
+      const mode = modeSelect.value;
       addMessage(text, 'user');
-      vscode.postMessage({ command: 'sendMessage', text: text });
+      vscode.postMessage({ command: 'sendMessage', text: text, mode: mode });
       messageInput.value = '';
       messageInput.focus();
     }