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

2025-12-29 12:00:43 +08:00
parent 94d41c3da9
commit 83db55c790
2 changed files with 108 additions and 69 deletions
--- a/src/views/planToggle.ts
+++ 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 模式';
+        }
+      }
+    }
+  `;
+}