diff --git a/src/assets/model/Auto.png b/src/assets/model/Auto.png new file mode 100644 index 0000000..5bc7b9b Binary files /dev/null and b/src/assets/model/Auto.png differ diff --git a/src/assets/model/Max.png b/src/assets/model/Max.png new file mode 100644 index 0000000..9ebb168 Binary files /dev/null and b/src/assets/model/Max.png differ diff --git a/src/assets/model/Sy.png b/src/assets/model/Sy.png new file mode 100644 index 0000000..7d40403 Binary files /dev/null and b/src/assets/model/Sy.png differ diff --git a/src/assets/model/lite.png b/src/assets/model/lite.png new file mode 100644 index 0000000..d08a93b Binary files /dev/null and b/src/assets/model/lite.png differ diff --git a/src/panels/ICHelperPanel.ts b/src/panels/ICHelperPanel.ts index df0a0b0..107f301 100644 --- a/src/panels/ICHelperPanel.ts +++ b/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( diff --git a/src/views/ICViewProvider.ts b/src/views/ICViewProvider.ts index 74fce75..0c981b2 100644 --- a/src/views/ICViewProvider.ts +++ b/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( diff --git a/src/views/inputArea.ts b/src/views/inputArea.ts index 49f13d2..37e1ea0 100644 --- a/src/views/inputArea.ts +++ b/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 `
@@ -46,7 +51,7 @@ export function getInputAreaContent(): string {
${getModeSelectorContent()} - ${getModelSelectorContent()} + ${getModelSelectorContent(autoIcon, liteIcon, syIcon, maxIcon)}
${getContextCompressContent()} diff --git a/src/views/modelSelector.ts b/src/views/modelSelector.ts index 5d7ed88..aadad49 100644 --- a/src/views/modelSelector.ts +++ b/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 `
@@ -17,10 +22,22 @@ export function getModelSelectorContent(): string {
-
Auto
-
Lite
-
Syntaxic
-
Max
+
+ ${autoIcon ? `Auto` : ''} + Auto +
+
+ ${liteIcon ? `Lite` : ''} + Lite +
+
+ ${syIcon ? `Syntaxic` : ''} + Syntaxic +
+
+ ${maxIcon ? `Max` : ''} + Max +
@@ -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; diff --git a/src/views/webviewContent.ts b/src/views/webviewContent.ts index 2eb90e6..61a0995 100644 --- a/src/views/webviewContent.ts +++ b/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 ` @@ -398,7 +404,7 @@ export function getWebviewContent(iconUri?: string): string {
--> - ${getInputAreaContent()} + ${getInputAreaContent(autoIconUri, liteIconUri, syIconUri, maxIconUri)}