feat: 添加模型图标支持并更新相关组件以显示图标

src/panels/ICHelperPanel.ts

@@ -60,7 +60,10 @@ export async function showICHelperPanel(
     {
       enableScripts: true,
       retainContextWhenHidden: true,
-      localResourceRoots: [vscode.Uri.joinPath(context.extensionUri, "media")],
+      localResourceRoots: [
+        vscode.Uri.joinPath(context.extensionUri, "media"),
+        vscode.Uri.joinPath(context.extensionUri, "src", "assets")
+      ],
     }
   );
 
@@ -82,8 +85,28 @@ export async function showICHelperPanel(
     vscode.Uri.joinPath(context.extensionUri, "media", "icon.png")
   );
 
+  // 获取模型图标URI
+  const autoIconUri = panel.webview.asWebviewUri(
+    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Auto.png")
+  );
+  const liteIconUri = panel.webview.asWebviewUri(
+    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "lite.png")
+  );
+  const syIconUri = panel.webview.asWebviewUri(
+    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Sy.png")
+  );
+  const maxIconUri = panel.webview.asWebviewUri(
+    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Max.png")
+  );
+
   // 设置HTML内容
-  panel.webview.html = getWebviewContent(iconUri.toString());
+  panel.webview.html = getWebviewContent(
+    iconUri.toString(),
+    autoIconUri.toString(),
+    liteIconUri.toString(),
+    syIconUri.toString(),
+    maxIconUri.toString()
+  );
 
   // 处理消息
   panel.webview.onDidReceiveMessage(

src/views/ICViewProvider.ts

@@ -24,7 +24,10 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
     {
       enableScripts: true,
       retainContextWhenHidden: true,
-      localResourceRoots: [vscode.Uri.joinPath(context.extensionUri, "media")],
+      localResourceRoots: [
+        vscode.Uri.joinPath(context.extensionUri, "media"),
+        vscode.Uri.joinPath(context.extensionUri, "src", "assets")
+      ],
     }
   );
 
@@ -39,8 +42,29 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
   const iconUri = panel.webview.asWebviewUri(
     vscode.Uri.joinPath(context.extensionUri, "media", "icon.png")
   );
+
+  // 获取模型图标URI
+  const autoIconUri = panel.webview.asWebviewUri(
+    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Auto.png")
+  );
+  const liteIconUri = panel.webview.asWebviewUri(
+    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "lite.png")
+  );
+  const syIconUri = panel.webview.asWebviewUri(
+    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Sy.png")
+  );
+  const maxIconUri = panel.webview.asWebviewUri(
+    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Max.png")
+  );
+
   // 设置HTML内容
-  panel.webview.html = getWebviewContent(iconUri.toString());
+  panel.webview.html = getWebviewContent(
+    iconUri.toString(),
+    autoIconUri.toString(),
+    liteIconUri.toString(),
+    syIconUri.toString(),
+    maxIconUri.toString()
+  );
 
   // 处理消息
   panel.webview.onDidReceiveMessage(

src/views/inputArea.ts

@@ -29,7 +29,12 @@ import { sendIconSvg, stopIconSvg } from "../constants/toolIcons";
 /**
  * 获取输入区域的 HTML 内容
  */
-export function getInputAreaContent(): string {
+export function getInputAreaContent(
+  autoIcon: string = '',
+  liteIcon: string = '',
+  syIcon: string = '',
+  maxIcon: string = ''
+): string {
   return `
     <div class="input-area">
       <div class="input-group">
@@ -46,7 +51,7 @@ export function getInputAreaContent(): string {
           <div class="input-bottom-row">
             <div class="mode-selector">
               ${getModeSelectorContent()}
-              ${getModelSelectorContent()}
+              ${getModelSelectorContent(autoIcon, liteIcon, syIcon, maxIcon)}
             </div>
             <div class="input-actions">
               ${getContextCompressContent()}

src/views/modelSelector.ts

@@ -5,7 +5,12 @@
 /**
  * 获取模型选择器的 HTML 内容
  */
-export function getModelSelectorContent(): string {
+export function getModelSelectorContent(
+  autoIcon: string = '',
+  liteIcon: string = '',
+  syIcon: string = '',
+  maxIcon: string = ''
+): string {
   return `
     <!-- 模型选择 -->
     <div class="tooltip">
@@ -17,10 +22,22 @@ export function getModelSelectorContent(): string {
           </svg>
         </div>
         <div class="select-dropdown" id="modelDropdown">
-          <div class="select-option selected" data-value="auto" data-tooltip="自动选择最佳模型" onclick="selectModel('auto', 'Auto')">Auto</div>
+          <div class="select-option selected" data-value="auto" data-tooltip="自动选择最佳模型" onclick="selectModel('auto', 'Auto')">
-          <div class="select-option" data-value="lite" data-tooltip="快速响应，适合简单任务" onclick="selectModel('lite', 'Lite')">Lite</div>
+            ${autoIcon ? `<img src="${autoIcon}" class="model-icon" alt="Auto">` : ''}
-          <div class="select-option" data-value="syntaxic" data-tooltip="语法分析和代码理解" onclick="selectModel('syntaxic', 'Syntaxic')">Syntaxic</div>
+            <span class="option-label">Auto</span>
-          <div class="select-option" data-value="max" data-tooltip="最强性能，复杂任务" onclick="selectModel('max', 'Max')">Max</div>
+          </div>
+          <div class="select-option" data-value="lite" data-tooltip="快速响应，适合简单任务" onclick="selectModel('lite', 'Lite')">
+            ${liteIcon ? `<img src="${liteIcon}" class="model-icon" alt="Lite">` : ''}
+            <span class="option-label">Lite</span>
+          </div>
+          <div class="select-option" data-value="syntaxic" data-tooltip="语法分析和代码理解" onclick="selectModel('syntaxic', 'Syntaxic')">
+            ${syIcon ? `<img src="${syIcon}" class="model-icon" alt="Syntaxic">` : ''}
+            <span class="option-label">Syntaxic</span>
+          </div>
+          <div class="select-option" data-value="max" data-tooltip="最强性能，复杂任务" onclick="selectModel('max', 'Max')">
+            ${maxIcon ? `<img src="${maxIcon}" class="model-icon" alt="Max">` : ''}
+            <span class="option-label">Max</span>
+          </div>
         </div>
         <!-- 模型选择器的 tooltip 容器 -->
         <div id="modelTooltip" class="model-tooltip"></div>
@@ -88,10 +105,12 @@ export function getModelSelectorStyles(): string {
     #modelDropdown .select-option {
       position: relative;
       padding: 6px 12px;
-      font-size: 12px;
       cursor: pointer;
       transition: background 0.2s ease;
-      white-space: nowrap;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
     }
     #modelDropdown .select-option:hover {
       background: rgba(128, 128, 128, 0.3);
@@ -100,6 +119,17 @@ export function getModelSelectorStyles(): string {
       background: rgba(128, 128, 128, 0.5);
       color: var(--vscode-foreground);
     }
+    .model-icon {
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+      object-fit: contain;
+    }
+    .option-label {
+      font-size: 12px;
+      color: var(--vscode-foreground);
+      white-space: nowrap;
+    }
     /* 模型选择器的 tooltip 样式 */
     .model-tooltip {
       position: fixed;

src/views/webviewContent.ts

@@ -21,7 +21,13 @@ import { getAgentCardStyles, getAgentCardScript } from "./agentCard";
 /**
  * 获取 WebView 面板的 HTML 内容
  */
-export function getWebviewContent(iconUri?: string): string {
+export function getWebviewContent(
+  iconUri?: string,
+  autoIconUri?: string,
+  liteIconUri?: string,
+  syIconUri?: string,
+  maxIconUri?: string
+): string {
   return `<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
@@ -398,7 +404,7 @@ export function getWebviewContent(iconUri?: string): string {
       <button class="quick-btn" onclick="quickAction('explore')">知识探索</button>
     </div> -->
 
-    ${getInputAreaContent()}
+    ${getInputAreaContent(autoIconUri, liteIconUri, syIconUri, maxIconUri)}
   </div>
 
   <script>