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

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;