pengyejiatu/IC-Coder-Plugin
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Roe-xin
2026-01-04 10:56:57 +08:00
parent c27b08cccf
commit acf3f9ff37
9 changed files with 103 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/model/Auto.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/model/Max.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
src/assets/model/Sy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/model/lite.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

27
src/panels/ICHelperPanel.ts
View File

@ -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(

28
src/views/ICViewProvider.ts
View File

@ -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(

9
src/views/inputArea.ts
View File

@ -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()}

44
src/views/modelSelector.ts
View File

@ -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" data-value="lite" data-tooltip="快速响应，适合简单任务" onclick="selectModel('lite', 'Lite')">Lite</div>
<div class="select-option" data-value="syntaxic" data-tooltip="语法分析和代码理解" onclick="selectModel('syntaxic', 'Syntaxic')">Syntaxic</div>
<div class="select-option" data-value="max" data-tooltip="最强性能，复杂任务" onclick="selectModel('max', 'Max')">Max</div>
<div class="select-option selected" data-value="auto" data-tooltip="自动选择最佳模型" onclick="selectModel('auto', 'Auto')">
${autoIcon ? `<img src="${autoIcon}" class="model-icon" alt="Auto">` : ''}
<span class="option-label">Auto</span>
</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;

10
src/views/webviewContent.ts
View File

@ -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>