feat:修改模型描述的展现形式和内容

src/views/agentModeSelector.ts

@@ -157,9 +157,9 @@ export function getModeSelectorScript(): string {
       // 更新 tooltip
       if (modeTooltip) {
         const tooltipMap = {
-          'plan': '只读模式 - 只能查询分析',
-          'ask': '逐个确认 - 每个写操作需确认',
-          'agent': '智能体自主模式','
+          'plan': 'plan模式',
+          'ask': 'ask模式',
+          'agent': 'agent模式',
         };
         modeTooltip.textContent = tooltipMap[value] || '切换模式';
       }

src/views/modelSelector.ts

@@ -6,10 +6,10 @@
  * 获取模型选择器的 HTML 内容
  */
 export function getModelSelectorContent(
-  autoIcon: string = '',
-  liteIcon: string = '',
-  syIcon: string = '',
-  maxIcon: string = ''
+  autoIcon: string = "",
+  liteIcon: string = "",
+  syIcon: string = "",
+  maxIcon: string = ""
 ): string {
   return `
     <!-- 模型选择 -->
@@ -22,25 +22,51 @@ export function getModelSelectorContent(
           </svg>
         </div>
         <div class="select-dropdown" id="modelDropdown">
-          <div class="select-option selected" data-value="auto" data-tooltip="自动选择最佳模型" onclick="selectModel('auto', 'Auto')">
-            ${autoIcon ? `<img src="${autoIcon}" class="model-icon" alt="Auto">` : ''}
+          <div class="select-option selected" data-value="auto" onclick="selectModel('auto', 'Auto')">
+            ${
+              autoIcon
+                ? `<img src="${autoIcon}" class="model-icon" alt="Auto">`
+                : ""
+            }
+            <div class="option-content">
               <span class="option-label">Auto</span>
+              <span class="option-desc">智能匹配最优模型</span>
             </div>
-          <div class="select-option" data-value="lite" data-tooltip="快速响应，适合简单任务" onclick="selectModel('lite', 'Lite')">
-            ${liteIcon ? `<img src="${liteIcon}" class="model-icon" alt="Lite">` : ''}
+          </div>
+          <div class="select-option" data-value="lite" onclick="selectModel('lite', 'Lite')">
+            ${
+              liteIcon
+                ? `<img src="${liteIcon}" class="model-icon" alt="Lite">`
+                : ""
+            }
+            <div class="option-content">
               <span class="option-label">Lite</span>
+              <span class="option-desc">基础模型，快速相应，适合简单任务</span>
             </div>
-          <div class="select-option" data-value="syntaxic" data-tooltip="语法分析和代码理解" onclick="selectModel('syntaxic', 'Syntaxic')">
-            ${syIcon ? `<img src="${syIcon}" class="model-icon" alt="Syntaxic">` : ''}
+          </div>
+          <div class="select-option" data-value="syntaxic" onclick="selectModel('syntaxic', 'Syntaxic')">
+            ${
+              syIcon
+                ? `<img src="${syIcon}" class="model-icon" alt="Syntaxic">`
+                : ""
+            }
+            <div class="option-content">
               <span class="option-label">Syntaxic</span>
+              <span class="option-desc">均衡成本和性能，节省credits同时保持可靠输出</span>
             </div>
-          <div class="select-option" data-value="max" data-tooltip="最强性能，复杂任务" onclick="selectModel('max', 'Max')">
-            ${maxIcon ? `<img src="${maxIcon}" class="model-icon" alt="Max">` : ''}
+          </div>
+          <div class="select-option" data-value="max" onclick="selectModel('max', 'Max')">
+            ${
+              maxIcon
+                ? `<img src="${maxIcon}" class="model-icon" alt="Max">`
+                : ""
+            }
+            <div class="option-content">
               <span class="option-label">Max</span>
+              <span class="option-desc">最强性能，质量优先，适合复杂任务</span>
+            </div>
           </div>
         </div>
-        <!-- 模型选择器的 tooltip 容器 -->
-        <div id="modelTooltip" class="model-tooltip"></div>
       </div>
       <span class="tooltiptext">选择模型</span>
     </div>
@@ -104,13 +130,13 @@ export function getModelSelectorStyles(): string {
     /* 模型选择器的选项样式 */
     #modelDropdown .select-option {
       position: relative;
-      padding: 6px 12px;
+      padding: 8px 12px;
       cursor: pointer;
       transition: background 0.2s ease;
       display: flex;
       flex-direction: row;
       align-items: center;
-      gap: 8px;
+      gap: 10px;
     }
     #modelDropdown .select-option:hover {
       background: rgba(128, 128, 128, 0.3);
@@ -125,54 +151,22 @@ export function getModelSelectorStyles(): string {
       flex-shrink: 0;
       object-fit: contain;
     }
+    .option-content {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      flex: 1;
+    }
     .option-label {
-      font-size: 12px;
+      font-size: 13px;
       color: var(--vscode-foreground);
+      font-weight: 500;
       white-space: nowrap;
     }
-    /* 模型选择器的 tooltip 样式 */
-    .model-tooltip {
-      position: fixed;
-      background: #1e1e1e;
-      color: #ffffff;
-      padding: 8px 12px;
-      border-radius: 6px;
-      font-size: 12px;
+    .option-desc {
+      font-size: 11px;
+      color: var(--vscode-descriptionForeground);
       white-space: nowrap;
-      pointer-events: none;
-      z-index: 10000;
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
-      opacity: 0;
-      visibility: hidden;
-      transition: opacity 0.2s ease, visibility 0.2s ease;
-    }
-    .model-tooltip.show {
-      opacity: 1;
-      visibility: visible;
-    }
-    /* tooltip 箭头 */
-    .model-tooltip::before {
-      content: "";
-      position: absolute;
-      right: 100%;
-      top: 50%;
-      transform: translateY(-50%);
-      border-width: 7px;
-      border-style: solid;
-      border-color: transparent rgba(255, 255, 255, 0.2) transparent transparent;
-      z-index: -1;
-    }
-    .model-tooltip::after {
-      content: "";
-      position: absolute;
-      right: 100%;
-      top: 50%;
-      transform: translateY(-50%);
-      border-width: 6px;
-      border-style: solid;
-      border-color: transparent #1e1e1e transparent transparent;
-      margin-right: 1px;
     }
   `;
 }
@@ -235,46 +229,5 @@ export function getModelSelectorScript(): string {
     function getCurrentModel() {
       return currentModel;
     }
-
-    // 模型选择器 tooltip 功能
-    (function initModelTooltip() {
-      const modelDropdown = document.getElementById('modelDropdown');
-      const modelTooltip = document.getElementById('modelTooltip');
-
-      if (!modelDropdown || !modelTooltip) return;
-
-      // 为每个选项添加鼠标事件
-      const options = modelDropdown.querySelectorAll('.select-option');
-
-      options.forEach(option => {
-        option.addEventListener('mouseenter', function(e) {
-          const tooltipText = this.getAttribute('data-tooltip');
-          if (!tooltipText) return;
-
-          // 设置 tooltip 内容
-          modelTooltip.textContent = tooltipText;
-
-          // 获取选项的位置
-          const rect = this.getBoundingClientRect();
-
-          // 计算 tooltip 位置（在选项右侧）
-          const tooltipRect = modelTooltip.getBoundingClientRect();
-          const left = rect.right + 12;
-          const top = rect.top + (rect.height / 2) - (tooltipRect.height / 2);
-
-          // 设置位置
-          modelTooltip.style.left = left + 'px';
-          modelTooltip.style.top = top + 'px';
-
-          // 显示 tooltip
-          modelTooltip.classList.add('show');
-        });
-
-        option.addEventListener('mouseleave', function() {
-          // 隐藏 tooltip
-          modelTooltip.classList.remove('show');
-        });
-      });
-    })();
   `;
 }

src/views/webviewContent.ts

@@ -36,7 +36,7 @@ export function getWebviewContent(
 ): string {
   // 获取当前环境，只在 dev 和 test 环境下显示快速操作按钮
   const currentEnv = getCurrentEnv();
-  const showQuickActions = currentEnv === 'dev' || currentEnv === 'test';
+  const showQuickActions = currentEnv === "dev" || currentEnv === "test";
 
   return `<!DOCTYPE html>
 <html lang="zh-CN">
@@ -409,12 +409,16 @@ export function getWebviewContent(
       <span id="statusText">思考中...</span>
     </div>
 
-    ${showQuickActions ? `<div class="quick-actions">
+    ${
+      showQuickActions
+        ? `<div class="quick-actions">
       <button class="quick-btn" onclick="quickAction('counter')">生成计数器</button>
       <button class="quick-btn" onclick="quickAction('fsm')">生成状态机</button>
       <button class="quick-btn" onclick="quickAction('testbench')">生成测试平台</button>
       <button class="quick-btn" onclick="quickAction('explore')">知识探索</button>
-    </div>` : ''}
+    </div>`
+        : ""
+    }
 
     ${getInputAreaContent(autoIconUri, liteIconUri, syIconUri, maxIconUri)}
   </div>
@@ -455,10 +459,9 @@ export function getWebviewContent(
       }
       if (modeTooltip) {
         const tooltipMap = {
-          'plan': '只读模式 - 只能查询分析',
-          'ask': '逐个确认 - 每个写操作需确认',
-          'agent': '智能体自主模式',
-          'auto': '完全自动 - 所有操作自动执行'
+          'plan': 'plan模式',
+          'ask': 'ask模式',
+          'agent': 'agent模式'
         };
         modeTooltip.textContent = tooltipMap[value] || '切换模式';
       }