232 lines
6.8 KiB
TypeScript
232 lines
6.8 KiB
TypeScript
/**
|
|
* 模式选择器组件
|
|
* 提供 Plan/Ask/Agent 四种模式的选择功能
|
|
*
|
|
* 模式说明：
|
|
* - Plan: 只读模式，只能查询分析，不能写文件
|
|
* - Ask: 逐个确认，每个写操作需用户确认
|
|
* - Agent: 智能体自主，自动执行大部分操作
|
|
*/
|
|
|
|
import {
|
|
plannerIconSvg,
|
|
askIconSvg,
|
|
agentIconSvg,
|
|
} from "../constants/toolIcons";
|
|
|
|
/**
|
|
* 获取模式选择器的 HTML 内容
|
|
*/
|
|
export function getModeSelectorContent(): string {
|
|
return `
|
|
<div class="tooltip">
|
|
<div class="mode-select" id="modeSelect">
|
|
<div class="mode-trigger" onclick="toggleModeDropdown()">
|
|
<span class="mode-value" id="modeValue">Agent</span>
|
|
<svg class="mode-arrow" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M507.8 727.728a30.016 30.016 0 0 1-21.288-8.824L231.104 463.496a30.088 30.088 0 0 1 0-42.568 30.088 30.088 0 0 1 42.568 0l234.128 234.128 234.16-234.128a30.088 30.088 0 0 1 42.568 0 30.088 30.088 0 0 1 0 42.568L529.08 718.904a30 30 0 0 1-21.28 8.824z" fill="#8a8a8a"/>
|
|
</svg>
|
|
</div>
|
|
<div class="mode-dropdown" id="modeDropdown">
|
|
<div class="mode-option" data-value="plan" onclick="selectMode('plan', 'Plan')">
|
|
<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')">
|
|
<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')">
|
|
<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>
|
|
<span class="tooltiptext" id="modeTooltip">智能体自主模式</span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* 获取模式选择器的样式
|
|
*/
|
|
export function getModeSelectorStyles(): string {
|
|
return `
|
|
/* 模式选择器样式 */
|
|
.mode-select {
|
|
position: relative;
|
|
user-select: none;
|
|
}
|
|
.mode-trigger {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 8px;
|
|
background: var(--vscode-input-background);
|
|
color: var(--vscode-foreground);
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
transition: background 0.2s ease;
|
|
}
|
|
.mode-trigger:hover {
|
|
background: var(--vscode-list-hoverBackground);
|
|
}
|
|
.mode-value {
|
|
white-space: nowrap;
|
|
}
|
|
.mode-arrow {
|
|
width: 12px;
|
|
height: 12px;
|
|
flex-shrink: 0;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
.mode-select.active .mode-arrow {
|
|
transform: rotate(180deg);
|
|
}
|
|
.mode-dropdown {
|
|
position: absolute;
|
|
bottom: calc(100% + 2px);
|
|
left: 0;
|
|
min-width: 200px;
|
|
max-width: 300px;
|
|
background: var(--vscode-dropdown-background);
|
|
border: 1px solid var(--vscode-dropdown-border);
|
|
border-radius: 4px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
z-index: 1100;
|
|
display: none;
|
|
overflow: hidden;
|
|
}
|
|
.mode-select.active .mode-dropdown {
|
|
display: block;
|
|
}
|
|
/* 模式选择器的选项样式 */
|
|
.mode-option {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
padding: 8px 12px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease;
|
|
}
|
|
.mode-option:hover {
|
|
background: rgba(128, 128, 128, 0.3);
|
|
}
|
|
.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);
|
|
line-height: 1.4;
|
|
word-wrap: break-word;
|
|
white-space: normal;
|
|
}
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* 获取模式选择器的脚本
|
|
*/
|
|
export function getModeSelectorScript(): string {
|
|
return `
|
|
// 模式选择器相关变量
|
|
let currentMode = 'agent';
|
|
|
|
// 切换模式下拉框显示/隐藏
|
|
function toggleModeDropdown() {
|
|
const modeSelect = document.getElementById('modeSelect');
|
|
const modelSelect = document.getElementById('modelSelect');
|
|
if (modeSelect) {
|
|
modeSelect.classList.toggle('active');
|
|
// 关闭模型下拉框
|
|
if (modelSelect) {
|
|
modelSelect.classList.remove('active');
|
|
}
|
|
}
|
|
}
|
|
|
|
// 选择模式
|
|
function selectMode(value, label) {
|
|
currentMode = value;
|
|
const modeValue = document.getElementById('modeValue');
|
|
const modeTooltip = document.getElementById('modeTooltip');
|
|
|
|
if (modeValue) {
|
|
modeValue.textContent = label;
|
|
}
|
|
|
|
// 更新 tooltip
|
|
if (modeTooltip) {
|
|
const tooltipMap = {
|
|
'plan': 'plan模式',
|
|
'ask': 'ask模式',
|
|
'agent': 'agent模式'
|
|
};
|
|
modeTooltip.textContent = tooltipMap[value] || '切换模式';
|
|
}
|
|
|
|
// 更新选中状态
|
|
const options = document.querySelectorAll('.mode-option');
|
|
options.forEach(option => {
|
|
if (option.getAttribute('data-value') === value) {
|
|
option.classList.add('selected');
|
|
} else {
|
|
option.classList.remove('selected');
|
|
}
|
|
});
|
|
|
|
// 关闭下拉框
|
|
const modeSelect = document.getElementById('modeSelect');
|
|
if (modeSelect) {
|
|
modeSelect.classList.remove('active');
|
|
}
|
|
}
|
|
|
|
// 获取当前模式
|
|
function getCurrentMode() {
|
|
return currentMode;
|
|
}
|
|
|
|
// 点击外部关闭模式下拉框
|
|
document.addEventListener('click', (event) => {
|
|
const modeSelect = document.getElementById('modeSelect');
|
|
|
|
if (modeSelect && !modeSelect.contains(event.target)) {
|
|
modeSelect.classList.remove('active');
|
|
}
|
|
});
|
|
`;
|
|
}
|