- ${autoIcon ? `

` : ''}
-
Auto
+
+ ${
+ autoIcon
+ ? `

`
+ : ""
+ }
+
+ Auto
+ 智能匹配最优模型
+
-
- ${liteIcon ? `

` : ''}
-
Lite
+
+ ${
+ liteIcon
+ ? `

`
+ : ""
+ }
+
+ Lite
+ 基础模型,快速相应,适合简单任务
+
-
- ${syIcon ? `

` : ''}
-
Syntaxic
+
+ ${
+ syIcon
+ ? `

`
+ : ""
+ }
+
+ Syntaxic
+ 均衡成本和性能,节省credits同时保持可靠输出
+
-
- ${maxIcon ? `

` : ''}
-
Max
+
+ ${
+ maxIcon
+ ? `

`
+ : ""
+ }
+
+ Max
+ 最强性能,质量优先,适合复杂任务
+
-
-
选择模型
@@ -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');
- });
- });
- })();
`;
}
diff --git a/src/views/webviewContent.ts b/src/views/webviewContent.ts
index 3c37bb9..0888592 100644
--- a/src/views/webviewContent.ts
+++ b/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 `
@@ -409,12 +409,16 @@ export function getWebviewContent(
思考中...
`
+ : ""
+ }
${getInputAreaContent(autoIconUri, liteIconUri, syIconUri, maxIconUri)}