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

feat:修改模式内容和增加icon

Browse Source
This commit is contained in:
Roe-xin
2026-01-05 16:22:52 +08:00
parent ef2a0dc16e
commit 5c53d7f0e9
2 changed files with 50 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/views/agentModeSelector.ts
View File

@ -8,6 +8,12 @@
* - Agent: 智能体自主，自动执行大部分操作
*/
import {
plannerIconSvg,
askIconSvg,
agentIconSvg,
} from "../constants/toolIcons";
/**
* 获取模式选择器的 HTML 内容
*/
@ -23,16 +29,25 @@ export function getModeSelectorContent(): string {
</div>
<div class="mode-dropdown" id="modeDropdown">
<div class="mode-option" data-value="plan" onclick="selectMode('plan', 'Plan')">
<span class="mode-option-label">Plan</span>
<span class="mode-option-desc">只读模式</span>
<div class="mode-option-header">
<span class="mode-option-icon">${plannerIconSvg}</span>
<span class="mode-option-label">Plan</span>
</div>
<span class="mode-option-desc">仅根据需求生成设计文档，之后由用户决定下一步，可以提高工程质量</span>
</div>
<div class="mode-option" data-value="ask" onclick="selectMode('ask', 'Ask')">
<span class="mode-option-label">Ask</span>
<span class="mode-option-desc">逐个确认</span>
<div class="mode-option-header">
<span class="mode-option-icon">${askIconSvg}</span>
<span class="mode-option-label">Ask</span>
</div>
<span class="mode-option-desc">仅给与智能体读权限，用于依据项目回答用户问题，或者与用户进行探讨</span>
</div>
<div class="mode-option selected" data-value="agent" onclick="selectMode('agent', 'Agent')">
<span class="mode-option-label">Agent</span>
<span class="mode-option-desc">智能体自主</span>
<div class="mode-option-header">
<span class="mode-option-icon">${agentIconSvg}</span>
<span class="mode-option-label">Agent</span>
</div>
<span class="mode-option-desc">用于快速生成工程、调试修改现有代码</span>
</div>
</div>
</div>
@ -83,7 +98,8 @@ export function getModeSelectorStyles(): string {
position: absolute;
bottom: calc(100% + 2px);
left: 0;
min-width: 140px;
min-width: 200px;
max-width: 300px;
background: var(--vscode-dropdown-background);
border: 1px solid var(--vscode-dropdown-border);
border-radius: 4px;
@ -98,13 +114,12 @@ export function getModeSelectorStyles(): string {
/* 模式选择器的选项样式 */
.mode-option {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
align-items: flex-start;
padding: 8px 12px;
font-size: 12px;
cursor: pointer;
transition: background 0.2s ease;
white-space: nowrap;
}
.mode-option:hover {
background: rgba(128, 128, 128, 0.3);
@ -112,13 +127,31 @@ export function getModeSelectorStyles(): string {
.mode-option.selected {
background: rgba(64, 158, 255, 0.2);
}
.mode-option-header {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
.mode-option-icon {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.mode-option-icon svg {
width: 16px;
height: 16px;
display: block;
}
.mode-option-label {
font-weight: 500;
}
.mode-option-desc {
font-size: 10px;
color: var(--vscode-descriptionForeground);
margin-left: 12px;
line-height: 1.4;
word-wrap: break-word;
white-space: normal;
}
`;
}
@ -159,7 +192,7 @@ export function getModeSelectorScript(): string {
const tooltipMap = {
'plan': 'plan模式',
'ask': 'ask模式',
'agent': 'agent模式',
'agent': 'agent模式'
};
modeTooltip.textContent = tooltipMap[value] || '切换模式';
}