feat(planToggle): 添加 Plan 开关组件及其集成到输入区域

src/views/inputArea.ts

@@ -19,6 +19,11 @@ import {
   getContextCompressStyles,
   getContextCompressScript
 } from "./contextCompress";
+import {
+  getPlanToggleContent,
+  getPlanToggleStyles,
+  getPlanToggleScript
+} from "./planToggle";
 
 /**
  * 获取输入区域的 HTML 内容
@@ -31,16 +36,7 @@ export function getInputAreaContent(): string {
           <!-- 顶部工具栏 -->
           <div class="input-top-toolbar">
             ${getContextButtonContent()}
-
+            ${getPlanToggleContent()}
-            <!-- Plan 开关 -->
-            <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"
@@ -81,6 +77,7 @@ export function getInputAreaStyles(): string {
     ${getModelSelectorStyles()}
     ${getContextButtonStyles()}
     ${getContextCompressStyles()}
+    ${getPlanToggleStyles()}
     .input-area {
       border-top: 1px solid var(--vscode-panel-border);
       padding-top: 15px;
@@ -118,49 +115,6 @@ export function getInputAreaStyles(): string {
       margin-bottom: 8px;
       gap: 12px;
     }
-    .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;
@@ -306,6 +260,7 @@ export function getInputAreaScript(): string {
     ${getModelSelectorScript()}
     ${getContextButtonScript()}
     ${getContextCompressScript()}
+    ${getPlanToggleScript()}
 
     // 自动调整 textarea 高度
     function autoResizeTextarea() {
@@ -343,22 +298,6 @@ 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 = ''; // 保存原始文本用于撤回
 

src/views/planToggle.ts

@@ -0,0 +1,100 @@
+/**
+ * Plan 开关组件
+ */
+
+/**
+ * 获取 Plan 开关的 HTML 内容
+ */
+export function getPlanToggleContent(): string {
+  return `
+    <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>
+  `;
+}
+
+/**
+ * 获取 Plan 开关的样式
+ */
+export function getPlanToggleStyles(): string {
+  return `
+    /* Plan 开关样式 */
+    .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);
+    }
+  `;
+}
+
+/**
+ * 获取 Plan 开关的脚本
+ */
+export function getPlanToggleScript(): string {
+  return `
+    // 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 模式';
+        }
+      }
+    }
+  `;
+}