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

feat(modeSelector): 添加模式选择器组件并集成到输入区域

Browse Source
This commit is contained in:
Roe-xin
2025-12-29 11:53:59 +08:00
parent 83f9e2f005
commit 94d41c3da9
2 changed files with 171 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
src/views/agentModeSelector.ts Normal file
View File

@ -0,0 +1,162 @@
/**
* 模式选择器组件
* 提供 Agent/Ask/Auto 三种模式的选择功能
*/
/**
* 获取模式选择器的 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="agent" onclick="selectMode('agent', 'Agent')">Agent</div>
<div class="mode-option" data-value="ask" onclick="selectMode('ask', 'Ask')">Ask</div>
<div class="mode-option" data-value="auto" onclick="selectMode('auto', 'Auto')">Auto</div>
</div>
</div>
<span class="tooltiptext">切换模式</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: 100%;
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 {
padding: 6px 12px;
font-size: 12px;
cursor: pointer;
transition: background 0.2s ease;
white-space: nowrap;
}
.mode-option:hover {
background: rgba(128, 128, 128, 0.3);
}
.mode-option.selected {
background: rgba(128, 128, 128, 0.5);
color: var(--vscode-foreground);
}
`;
}
/**
* 获取模式选择器的脚本
*/
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');
if (modeValue) {
modeValue.textContent = label;
}
// 更新选中状态
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');
}
});
`;
}

142
src/views/inputArea.ts
View File

@ -4,6 +4,11 @@ import {
getModelSelectorStyles,
getModelSelectorScript
} from "./modelSelector";
import {
getModeSelectorContent,
getModeSelectorStyles,
getModeSelectorScript
} from "./agentModeSelector";
import {
getContextButtonContent,
getContextButtonStyles,
@ -44,24 +49,7 @@ export function getInputAreaContent(): string {
></textarea>
<div class="input-bottom-row">
<div class="mode-selector">
<!-- 模式选择 -->
<div class="tooltip">
<div class="custom-select" id="customSelect">
<div class="select-trigger" onclick="toggleModeDropdown()">
<span class="select-value" id="selectValue">Agent</span>
<svg class="select-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="select-dropdown" id="selectDropdown">
<div class="select-option" data-value="agent" onclick="selectMode('agent', 'Agent')">Agent</div>
<div class="select-option" data-value="ask" onclick="selectMode('ask', 'Ask')">Ask</div>
<div class="select-option" data-value="auto" onclick="selectMode('auto', 'Auto')">Auto</div>
</div>
</div>
<span class="tooltiptext">切换模式</span>
</div>
${getModeSelectorContent()}
${getModelSelectorContent()}
</div>
<div class="input-actions">
@ -89,6 +77,7 @@ export function getInputAreaContent(): string {
*/
export function getInputAreaStyles(): string {
return `
${getModeSelectorStyles()}
${getModelSelectorStyles()}
${getContextButtonStyles()}
${getContextCompressStyles()}
@ -185,70 +174,6 @@ export function getInputAreaStyles(): string {
gap: 8px;
position: relative;
}
/* 自定义下拉框样式（用于模式选择） */
.custom-select {
position: relative;
user-select: none;
}
.select-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;
}
.select-trigger:hover {
background: var(--vscode-list-hoverBackground);
}
.select-value {
white-space: nowrap;
}
.select-arrow {
width: 12px;
height: 12px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.custom-select.active .select-arrow {
transform: rotate(180deg);
}
.select-dropdown {
position: absolute;
bottom: calc(100% + 2px);
left: 0;
min-width: 100%;
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;
}
.custom-select.active .select-dropdown {
display: block;
}
/* 模式选择器的选项样式 */
#selectDropdown .select-option {
padding: 6px 12px;
font-size: 12px;
cursor: pointer;
transition: background 0.2s ease;
white-space: nowrap;
}
#selectDropdown .select-option:hover {
background: rgba(128, 128, 128, 0.3);
}
#selectDropdown .select-option.selected {
background: rgba(128, 128, 128, 0.5);
color: var(--vscode-foreground);
}
.input-actions {
display: flex;
align-items: center;
@ -377,6 +302,7 @@ export function getInputAreaStyles(): string {
*/
export function getInputAreaScript(): string {
return `
${getModeSelectorScript()}
${getModelSelectorScript()}
${getContextButtonScript()}
${getContextCompressScript()}
@ -400,61 +326,11 @@ export function getInputAreaScript(): string {
messageInput.focus();
}
// 自定义下拉框相关变量
let currentMode = 'agent';
// 切换模式下拉框显示/隐藏
function toggleModeDropdown() {
const customSelect = document.getElementById('customSelect');
const modelSelect = document.getElementById('modelSelect');
if (customSelect) {
customSelect.classList.toggle('active');
// 关闭模型下拉框
if (modelSelect) {
modelSelect.classList.remove('active');
}
}
}
// 选择模式
function selectMode(value, label) {
currentMode = value;
const selectValue = document.getElementById('selectValue');
if (selectValue) {
selectValue.textContent = label;
}
// 更新选中状态
const options = document.querySelectorAll('#selectDropdown .select-option');
options.forEach(option => {
if (option.getAttribute('data-value') === value) {
option.classList.add('selected');
} else {
option.classList.remove('selected');
}
});
// 关闭下拉框
const customSelect = document.getElementById('customSelect');
if (customSelect) {
customSelect.classList.remove('active');
}
}
// 点击外部关闭下拉框
document.addEventListener('click', (event) => {
const customSelect = document.getElementById('customSelect');
if (customSelect && !customSelect.contains(event.target)) {
customSelect.classList.remove('active');
}
});
function sendMessage() {
const text = messageInput.value.trim();
if (!text) return;
const mode = currentMode;
const mode = getCurrentMode(); // 从模式选择器组件获取当前模式
const model = getCurrentModel(); // 从模型选择器组件获取当前模型
addMessage(text, 'user');