From 83db55c7906186a9300a3ba347fba88041898793 Mon Sep 17 00:00:00 2001
From: Roe-xin <xiang200308037300@qq.com>
Date: Mon, 29 Dec 2025 12:00:43 +0800
Subject: [PATCH] =?UTF-8?q?feat(planToggle):=20=E6=B7=BB=E5=8A=A0=20Plan?=
 =?UTF-8?q?=20=E5=BC=80=E5=85=B3=E7=BB=84=E4=BB=B6=E5=8F=8A=E5=85=B6?=
 =?UTF-8?q?=E9=9B=86=E6=88=90=E5=88=B0=E8=BE=93=E5=85=A5=E5=8C=BA=E5=9F=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/inputArea.ts  |  77 ++++---------------------------
 src/views/planToggle.ts | 100 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 108 insertions(+), 69 deletions(-)
 create mode 100644 src/views/planToggle.ts

diff --git a/src/views/inputArea.ts b/src/views/inputArea.ts
index bfa1fc1..0ef2653 100644
--- a/src/views/inputArea.ts
+++ b/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()}
-
-            <!-- 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>
+            ${getPlanToggleContent()}
           </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 = ''; // 保存原始文本用于撤回
 
diff --git a/src/views/planToggle.ts b/src/views/planToggle.ts
new file mode 100644
index 0000000..68fb9d1
--- /dev/null
+++ b/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 模式';
+        }
+      }
+    }
+  `;
+}