From 2aff54de74fcc3b3ddf0d660f9b1ba4b10e05c71 Mon Sep 17 00:00:00 2001
From: XiaoFeng <117837368+Fzhiyu1@users.noreply.github.com>
Date: Tue, 30 Dec 2025 20:42:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- agentModeSelector 添加下拉菜单和模式切换逻辑
- planToggle 适配新的模式系统
---
 src/views/agentModeSelector.ts | 60 +++++++++++++++++++++++++++++-----
 src/views/planToggle.ts        | 19 +++++++++--
 2 files changed, 67 insertions(+), 12 deletions(-)

diff --git a/src/views/agentModeSelector.ts b/src/views/agentModeSelector.ts
index 04a3841..fbb298b 100644
--- a/src/views/agentModeSelector.ts
+++ b/src/views/agentModeSelector.ts
@@ -1,6 +1,12 @@
 /**
  * 模式选择器组件
- * 提供 Agent/Ask/Auto 三种模式的选择功能
+ * 提供 Plan/Ask/Agent/Auto 四种模式的选择功能
+ *
+ * 模式说明：
+ * - Plan: 只读模式，只能查询分析，不能写文件
+ * - Ask: 逐个确认，每个写操作需用户确认
+ * - Agent: 智能体自主，自动执行大部分操作
+ * - Auto: 完全自动，所有操作自动执行
  */
 
 /**
@@ -17,12 +23,25 @@ export function getModeSelectorContent(): string {
           </svg>
         </div>
         <div class="mode-dropdown" id="modeDropdown">
-          <div class="mode-option" data-value="agent" onclick="selectMode('agent', 'Agent')">Agent</div>
-          <div class="mode-option" data-value="ask" onclick="selectMode('ask', 'Ask')">Ask</div>
-          <div class="mode-option" data-value="auto" onclick="selectMode('auto', 'Auto')">Auto</div>
+          <div class="mode-option" data-value="plan" onclick="selectMode('plan', 'Plan')">
+            <span class="mode-option-label">Plan</span>
+            <span class="mode-option-desc">只读模式</span>
+          </div>
+          <div class="mode-option" data-value="ask" onclick="selectMode('ask', 'Ask')">
+            <span class="mode-option-label">Ask</span>
+            <span class="mode-option-desc">逐个确认</span>
+          </div>
+          <div class="mode-option selected" data-value="agent" onclick="selectMode('agent', 'Agent')">
+            <span class="mode-option-label">Agent</span>
+            <span class="mode-option-desc">智能体自主</span>
+          </div>
+          <div class="mode-option" data-value="auto" onclick="selectMode('auto', 'Auto')">
+            <span class="mode-option-label">Auto</span>
+            <span class="mode-option-desc">完全自动</span>
+          </div>
         </div>
       </div>
-      <span class="tooltiptext">切换模式</span>
+      <span class="tooltiptext" id="modeTooltip">智能体自主模式</span>
     </div>
   `;
 }
@@ -69,7 +88,7 @@ export function getModeSelectorStyles(): string {
       position: absolute;
       bottom: calc(100% + 2px);
       left: 0;
-      min-width: 100%;
+      min-width: 140px;
       background: var(--vscode-dropdown-background);
       border: 1px solid var(--vscode-dropdown-border);
       border-radius: 4px;
@@ -83,7 +102,10 @@ export function getModeSelectorStyles(): string {
     }
     /* 模式选择器的选项样式 */
     .mode-option {
-      padding: 6px 12px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 12px;
       font-size: 12px;
       cursor: pointer;
       transition: background 0.2s ease;
@@ -93,8 +115,15 @@ export function getModeSelectorStyles(): string {
       background: rgba(128, 128, 128, 0.3);
     }
     .mode-option.selected {
-      background: rgba(128, 128, 128, 0.5);
-      color: var(--vscode-foreground);
+      background: rgba(64, 158, 255, 0.2);
+    }
+    .mode-option-label {
+      font-weight: 500;
+    }
+    .mode-option-desc {
+      font-size: 10px;
+      color: var(--vscode-descriptionForeground);
+      margin-left: 12px;
     }
   `;
 }
@@ -124,10 +153,23 @@ export function getModeSelectorScript(): string {
     function selectMode(value, label) {
       currentMode = value;
       const modeValue = document.getElementById('modeValue');
+      const modeTooltip = document.getElementById('modeTooltip');
+
       if (modeValue) {
         modeValue.textContent = label;
       }
 
+      // 更新 tooltip
+      if (modeTooltip) {
+        const tooltipMap = {
+          'plan': '只读模式 - 只能查询分析',
+          'ask': '逐个确认 - 每个写操作需确认',
+          'agent': '智能体自主模式',
+          'auto': '完全自动 - 所有操作自动执行'
+        };
+        modeTooltip.textContent = tooltipMap[value] || '切换模式';
+      }
+
       // 更新选中状态
       const options = document.querySelectorAll('.mode-option');
       options.forEach(option => {
diff --git a/src/views/planToggle.ts b/src/views/planToggle.ts
index 68fb9d1..7f87b91 100644
--- a/src/views/planToggle.ts
+++ b/src/views/planToggle.ts
@@ -1,19 +1,21 @@
 /**
  * Plan 开关组件
+ * 注意：功能已移至模式选择器，此组件仅保留样式（已禁用）
  */
 
 /**
  * 获取 Plan 开关的 HTML 内容
+ * 已禁用，仅保留样式展示
  */
 export function getPlanToggleContent(): string {
   return `
     <div class="tooltip">
-      <label class="plan-toggle">
-        <input type="checkbox" id="planToggle" onchange="handlePlanToggle()">
+      <label class="plan-toggle plan-toggle-disabled">
+        <input type="checkbox" id="planToggle" disabled>
         <span class="plan-toggle-slider"></span>
         <span class="plan-toggle-label">Plan</span>
       </label>
-      <span class="tooltiptext" id="planTooltip">启用 Plan 模式</span>
+      <span class="tooltiptext" id="planTooltip">请使用模式选择器切换 Plan 模式</span>
     </div>
   `;
 }
@@ -73,6 +75,17 @@ export function getPlanToggleStyles(): string {
       font-weight: 500;
       color: var(--vscode-foreground);
     }
+
+    /* 禁用状态样式 */
+    .plan-toggle-disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    .plan-toggle-disabled .plan-toggle-slider {
+      background: var(--vscode-input-background);
+      border-color: var(--vscode-input-border);
+    }
   `;
 }