feat:实现plan的开关的前端展示效果

src/views/inputArea.ts

@@ -8,6 +8,17 @@ export function getInputAreaContent(): string {
     <div class="input-area">
       <div class="input-group">
         <div class="input-wrapper">
+          <!-- Plan 开关 -->
+          <div class="plan-toggle-container">
+            <div class="tooltip">
+              <label class="plan-toggle">
+                <input type="checkbox" id="planToggle" onchange="handlePlanToggle()">
+                <span class="plan-toggle-slider"></span>
+                <span class="plan-toggle-label">Plan</span>
+              </label>
+              <span class="tooltiptext" id="planTooltip">启用 Plan 模式</span>
+            </div>
+          </div>
           <textarea
             id="messageInput"
             placeholder="输入您的问题..."
@@ -19,7 +30,7 @@ export function getInputAreaContent(): string {
                 <select id="modeSelect">
                   <option value="agent" selected>Agent</option>
                   <option value="ask">Ask</option>
-                  <option value="plan">Plan</option>
+                  <option value="auto">Auto</option>
                 </select>
                 <span class="tooltiptext">切换模型</span>
               </div>
@@ -112,6 +123,55 @@ export function getInputAreaStyles(): string {
       gap: 8px;
       width: 100%;
     }
+    /* Plan 开关样式 */
+    .plan-toggle-container {
+      display: flex;
+      justify-content: flex-end;
+      margin-bottom: -4px;
+    }
+    .plan-toggle {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      user-select: none;
+    }
+    .plan-toggle input[type="checkbox"] {
+      display: none;
+    }
+    .plan-toggle-slider {
+      position: relative;
+      width: 36px;
+      height: 20px;
+      background: var(--vscode-input-background);
+      border: 1px solid var(--vscode-input-border);
+      border-radius: 10px;
+      transition: all 0.3s ease;
+    }
+    .plan-toggle-slider::before {
+      content: "";
+      position: absolute;
+      width: 14px;
+      height: 14px;
+      left: 2px;
+      top: 2px;
+      background: var(--vscode-foreground);
+      border-radius: 50%;
+      transition: all 0.3s ease;
+    }
+    .plan-toggle input[type="checkbox"]:checked + .plan-toggle-slider {
+      background: #409eff;
+      border-color: #409eff;
+    }
+    .plan-toggle input[type="checkbox"]:checked + .plan-toggle-slider::before {
+      transform: translateX(16px);
+      background: white;
+    }
+    .plan-toggle-label {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--vscode-foreground);
+    }
     .input-bottom-row {
       display: flex;
       align-items: center;
@@ -414,7 +474,7 @@ export function getInputAreaScript(): string {
 
       const modeSelect = document.getElementById('modeSelect');
       const mode = modeSelect ? modeSelect.value : 'agent';
-      
+
       addMessage(text, 'user');
       vscode.postMessage({ command: 'sendMessage', text: text, mode: mode });
       messageInput.value = '';
@@ -425,6 +485,22 @@ export function getInputAreaScript(): string {
       resetOptimizeButton();
     }
 
+    // Plan 开关处理函数
+    function handlePlanToggle() {
+      const planToggle = document.getElementById('planToggle');
+      const planTooltip = document.getElementById('planTooltip');
+
+      if (planToggle && planTooltip) {
+        if (planToggle.checked) {
+          // 开启 Plan 模式
+          planTooltip.textContent = '关闭 Plan 模式';
+        } else {
+          // 关闭 Plan 模式
+          planTooltip.textContent = '启用 Plan 模式';
+        }
+      }
+    }
+
     let isOptimized = false; // 标记是否已优化
     let originalText = ''; // 保存原始文本用于撤回