diff --git a/src/views/agentModeSelector.ts b/src/views/agentModeSelector.ts index 272ab4c..414fc49 100644 --- a/src/views/agentModeSelector.ts +++ b/src/views/agentModeSelector.ts @@ -157,9 +157,9 @@ export function getModeSelectorScript(): string { // 更新 tooltip if (modeTooltip) { const tooltipMap = { - 'plan': '只读模式 - 只能查询分析', - 'ask': '逐个确认 - 每个写操作需确认', - 'agent': '智能体自主模式',' + 'plan': 'plan模式', + 'ask': 'ask模式', + 'agent': 'agent模式', }; modeTooltip.textContent = tooltipMap[value] || '切换模式'; } diff --git a/src/views/modelSelector.ts b/src/views/modelSelector.ts index aadad49..fdd7a37 100644 --- a/src/views/modelSelector.ts +++ b/src/views/modelSelector.ts @@ -6,10 +6,10 @@ * 获取模型选择器的 HTML 内容 */ export function getModelSelectorContent( - autoIcon: string = '', - liteIcon: string = '', - syIcon: string = '', - maxIcon: string = '' + autoIcon: string = "", + liteIcon: string = "", + syIcon: string = "", + maxIcon: string = "" ): string { return ` @@ -22,25 +22,51 @@ export function getModelSelectorContent(
-
- ${autoIcon ? `Auto` : ''} - Auto +
+ ${ + autoIcon + ? `Auto` + : "" + } +
+ Auto + 智能匹配最优模型 +
-
- ${liteIcon ? `Lite` : ''} - Lite +
+ ${ + liteIcon + ? `Lite` + : "" + } +
+ Lite + 基础模型,快速相应,适合简单任务 +
-
- ${syIcon ? `Syntaxic` : ''} - Syntaxic +
+ ${ + syIcon + ? `Syntaxic` + : "" + } +
+ Syntaxic + 均衡成本和性能,节省credits同时保持可靠输出 +
-
- ${maxIcon ? `Max` : ''} - Max +
+ ${ + maxIcon + ? `Max` + : "" + } +
+ 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( 思考中...
- ${showQuickActions ? `
+ ${ + showQuickActions + ? `
-
` : ''} +
` + : "" + } ${getInputAreaContent(autoIconUri, liteIconUri, syIconUri, maxIconUri)}
@@ -455,10 +459,9 @@ export function getWebviewContent( } if (modeTooltip) { const tooltipMap = { - 'plan': '只读模式 - 只能查询分析', - 'ask': '逐个确认 - 每个写操作需确认', - 'agent': '智能体自主模式', - 'auto': '完全自动 - 所有操作自动执行' + 'plan': 'plan模式', + 'ask': 'ask模式', + 'agent': 'agent模式' }; modeTooltip.textContent = tooltipMap[value] || '切换模式'; }