feat:修改模式内容和增加icon

src/constants/toolIcons.ts

@@ -82,6 +82,11 @@ export const agentIconSvg = `
  */
 export const plannerIconSvg = `<svg t="1767143425474" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10954" width="16" height="16"><path d="M860.544 633.856c-82.368 0-152.128 69.632-158.464 152h-354.88c-31.616 0-63.296-31.68-63.296-63.296V437.376c12.608 0 25.344 6.4 44.288 6.4h380.16c12.672 69.696 76.032 126.656 152.128 126.656 88.704 0 158.336-69.696 158.336-158.4s-69.632-158.4-158.336-158.4c-76.096 0-139.456 57.024-152.128 126.656h-361.216c-31.616 0-63.296-31.68-63.296-63.296v-133.12h164.736c31.68 0 63.296-22.848 63.296-54.528a55.04 55.04 0 0 0-56-56h-380.16c-31.68 0-70.72 17.984-70.72 56s31.68 54.528 63.36 54.528h133.056v538.624c0 69.696 57.088 126.656 126.72 126.656h386.56c25.344 57.088 82.368 101.376 145.728 101.376a156.8 156.8 0 0 0 158.336-158.4 156.608 156.608 0 0 0-158.208-158.272z m0-316.8c50.624 0 94.912 44.288 94.912 94.976s-44.288 94.976-94.912 94.976c-50.752 0-95.104-44.288-95.104-94.976s44.352-94.976 95.104-94.976z m0 570.24c-50.752 0-95.104-44.352-95.104-95.04s44.352-95.04 95.104-95.04c50.624 0 94.912 44.352 94.912 95.04s-44.288 95.04-94.912 95.04z" p-id="10955" fill="#8a8a8a"></path></svg>`;
 
+/**
+ * Ask 模式图标 SVG
+ */
+export const askIconSvg = `<svg t="1767143500000" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="#8a8a8a"/><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420.4c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8 0-25.6 10.1-49.4 28.4-67.2 18.7-18.2 43.4-28.2 71.6-28.2s52.9 10 71.6 28.2c18.3 17.8 28.4 41.6 28.4 67.2 0 29.5-12.2 55.3-36.2 76.6-23.2 20.6-61.1 45.9-82.2 60.6-17.8 12.4-28.6 32.7-28.6 54.2V640c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-35.8c0-4.1 2.6-7.8 6.5-9.2 31.3-11.6 84.8-40.6 113.8-64.8 42.6-35.6 66.2-83.5 66.2-134.8 0-39.7-17.2-76.4-48.4-103.3z" fill="#8a8a8a"/><path d="M512 716m-40 0a40 40 0 1 0 80 0 40 40 0 1 0-80 0Z" fill="#8a8a8a"/></svg>`;
+
 /**
  * 保存知识库图标 SVG
  */

src/views/agentModeSelector.ts

@@ -8,6 +8,12 @@
  * - Agent: 智能体自主，自动执行大部分操作
  */
 
+import {
+  plannerIconSvg,
+  askIconSvg,
+  agentIconSvg,
+} from "../constants/toolIcons";
+
 /**
  * 获取模式选择器的 HTML 内容
  */
@@ -23,16 +29,25 @@ export function getModeSelectorContent(): string {
         </div>
         <div class="mode-dropdown" id="modeDropdown">
           <div class="mode-option" data-value="plan" onclick="selectMode('plan', 'Plan')">
+            <div class="mode-option-header">
+              <span class="mode-option-icon">${plannerIconSvg}</span>
               <span class="mode-option-label">Plan</span>
-            <span class="mode-option-desc">只读模式</span>
+            </div>
+            <span class="mode-option-desc">仅根据需求生成设计文档，之后由用户决定下一步，可以提高工程质量</span>
           </div>
           <div class="mode-option" data-value="ask" onclick="selectMode('ask', 'Ask')">
+            <div class="mode-option-header">
+              <span class="mode-option-icon">${askIconSvg}</span>
               <span class="mode-option-label">Ask</span>
-            <span class="mode-option-desc">逐个确认</span>
+            </div>
+            <span class="mode-option-desc">仅给与智能体读权限，用于依据项目回答用户问题，或者与用户进行探讨</span>
           </div>
           <div class="mode-option selected" data-value="agent" onclick="selectMode('agent', 'Agent')">
+            <div class="mode-option-header">
+              <span class="mode-option-icon">${agentIconSvg}</span>
               <span class="mode-option-label">Agent</span>
-            <span class="mode-option-desc">智能体自主</span>
+            </div>
+            <span class="mode-option-desc">用于快速生成工程、调试修改现有代码</span>
           </div>
         </div>
       </div>
@@ -83,7 +98,8 @@ export function getModeSelectorStyles(): string {
       position: absolute;
       bottom: calc(100% + 2px);
       left: 0;
-      min-width: 140px;
+      min-width: 200px;
+      max-width: 300px;
       background: var(--vscode-dropdown-background);
       border: 1px solid var(--vscode-dropdown-border);
       border-radius: 4px;
@@ -98,13 +114,12 @@ export function getModeSelectorStyles(): string {
     /* 模式选择器的选项样式 */
     .mode-option {
       display: flex;
-      justify-content: space-between;
+      flex-direction: column;
-      align-items: center;
+      align-items: flex-start;
       padding: 8px 12px;
       font-size: 12px;
       cursor: pointer;
       transition: background 0.2s ease;
-      white-space: nowrap;
     }
     .mode-option:hover {
       background: rgba(128, 128, 128, 0.3);
@@ -112,13 +127,31 @@ export function getModeSelectorStyles(): string {
     .mode-option.selected {
       background: rgba(64, 158, 255, 0.2);
     }
+    .mode-option-header {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 4px;
+    }
+    .mode-option-icon {
+      display: inline-flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+    .mode-option-icon svg {
+      width: 16px;
+      height: 16px;
+      display: block;
+    }
     .mode-option-label {
       font-weight: 500;
     }
     .mode-option-desc {
       font-size: 10px;
       color: var(--vscode-descriptionForeground);
-      margin-left: 12px;
+      line-height: 1.4;
+      word-wrap: break-word;
+      white-space: normal;
     }
   `;
 }
@@ -159,7 +192,7 @@ export function getModeSelectorScript(): string {
         const tooltipMap = {
           'plan': 'plan模式',
           'ask': 'ask模式',
-          'agent': 'agent模式',
+          'agent': 'agent模式'
         };
         modeTooltip.textContent = tooltipMap[value] || '切换模式';
       }