- Plan
- 只读模式
+
+ 仅根据需求生成设计文档，之后由用户决定下一步，可以提高工程质量
- Ask
- 逐个确认
+
+ 仅给与智能体读权限，用于依据项目回答用户问题，或者与用户进行探讨
- Agent
- 智能体自主
+
+ 用于快速生成工程、调试修改现有代码
@@ -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;
}
`;
}
@@ -157,9 +190,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/contextButton.ts b/src/views/contextButton.ts
index b1d6fed..621069b 100644
--- a/src/views/contextButton.ts
+++ b/src/views/contextButton.ts
@@ -7,14 +7,78 @@
*/
export function getContextButtonContent(): string {
return `
-
-
-
添加文件或代码片段作为上下文
+
`;
}
@@ -24,6 +88,12 @@ export function getContextButtonContent(): string {
*/
export function getContextButtonStyles(): string {
return `
+ /* 上下文选择器容器 */
+ .context-selector-wrapper {
+ position: relative;
+ display: inline-block;
+ }
+
/* 添加上下文按钮样式 */
.add-context-button {
display: flex;
@@ -45,15 +115,218 @@ export function getContextButtonStyles(): string {
border-color: var(--vscode-focusBorder);
}
- .add-context-button svg {
+ .add-context-button svg.icon {
width: 16px;
height: 16px;
color: #409eff;
}
+ .add-context-button .dropdown-arrow {
+ width: 12px;
+ height: 12px;
+ transition: transform 0.2s ease;
+ }
+
+ .add-context-button.active .dropdown-arrow {
+ transform: rotate(180deg);
+ }
+
.add-context-label {
white-space: nowrap;
}
+
+ /* 上拉菜单样式 */
+ .context-menu {
+ position: absolute;
+ bottom: calc(100% + 8px);
+ left: 0;
+ background: var(--vscode-dropdown-background);
+ border: 1px solid var(--vscode-dropdown-border);
+ border-radius: 6px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+ min-width: 180px;
+ z-index: 1000;
+ display: none;
+ overflow: hidden;
+ }
+
+ .context-menu.show {
+ display: block;
+ animation: slideUp 0.2s ease;
+ }
+
+ @keyframes slideUp {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ .context-menu-item {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 10px 16px;
+ cursor: pointer;
+ transition: background 0.2s ease;
+ color: var(--vscode-foreground);
+ }
+
+ .context-menu-item:hover {
+ background: var(--vscode-list-hoverBackground);
+ }
+
+ .context-menu-item svg {
+ width: 18px;
+ height: 18px;
+ flex-shrink: 0;
+ color: var(--vscode-foreground);
+ opacity: 0.8;
+ }
+
+ .context-menu-item span {
+ font-size: 13px;
+ white-space: nowrap;
+ flex: 1;
+ }
+
+ .context-menu-item .arrow-right {
+ width: 14px;
+ height: 14px;
+ opacity: 0.6;
+ margin-left: auto;
+ }
+
+ /* 列表视图样式 */
+ .context-menu-list {
+ display: flex;
+ flex-direction: column;
+ max-height: 350px;
+ }
+
+ .context-menu-list-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 10px 12px;
+ border-bottom: 1px solid var(--vscode-panel-border);
+ }
+
+ .context-menu-back {
+ width: 28px;
+ height: 28px;
+ padding: 0;
+ border: none;
+ background: transparent;
+ color: var(--vscode-foreground);
+ cursor: pointer;
+ border-radius: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .context-menu-back:hover {
+ background: var(--vscode-toolbar-hoverBackground);
+ }
+
+ .context-menu-back svg {
+ width: 16px;
+ height: 16px;
+ }
+
+ .context-menu-list-header span {
+ font-size: 14px;
+ font-weight: 500;
+ flex: 1;
+ }
+
+ .context-menu-list-body {
+ flex: 1;
+ overflow-y: auto;
+ padding: 4px;
+ }
+
+ .context-menu-list-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 6px 8px;
+ cursor: pointer;
+ border-radius: 4px;
+ transition: background 0.2s ease;
+ }
+
+ .context-menu-list-item:hover {
+ background: var(--vscode-list-hoverBackground);
+ }
+
+ .context-menu-list-item.selected {
+ background: var(--vscode-list-activeSelectionBackground);
+ }
+
+ .context-menu-list-item input[type="checkbox"] {
+ width: 14px;
+ height: 14px;
+ flex-shrink: 0;
+ }
+
+ .context-menu-list-item label {
+ flex: 1;
+ font-size: 12px;
+ cursor: pointer;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .context-menu-list-footer {
+ padding: 8px 12px;
+ border-top: 1px solid var(--vscode-panel-border);
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+
+ .context-menu-list-footer input {
+ width: 100%;
+ padding: 6px 10px;
+ background: var(--vscode-input-background);
+ border: 1px solid var(--vscode-input-border);
+ border-radius: 4px;
+ color: var(--vscode-input-foreground);
+ font-size: 12px;
+ box-sizing: border-box;
+ }
+
+ .context-menu-list-actions {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .context-menu-list-footer span {
+ font-size: 12px;
+ color: var(--vscode-descriptionForeground);
+ }
+
+ .context-menu-list-footer button {
+ padding: 4px 12px;
+ background: var(--vscode-button-background);
+ color: var(--vscode-button-foreground);
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 12px;
+ }
+
+ .context-menu-list-footer button:hover {
+ background: var(--vscode-button-hoverBackground);
+ }
`;
}
@@ -62,10 +335,174 @@ export function getContextButtonStyles(): string {
*/
export function getContextButtonScript(): string {
return `
- // 添加上下文处理函数
- function handleAddContext() {
- // 发送添加上下文请求到扩展
- vscode.postMessage({ command: 'addContext' });
+ // 上下文菜单状态
+ let currentListData = [];
+ let currentListType = '';
+ let selectedItems = new Set();
+
+ // 切换上下文菜单显示/隐藏
+ function toggleContextMenu() {
+ const menu = document.getElementById('contextMenu');
+ const button = document.querySelector('.add-context-button');
+
+ if (menu && button) {
+ const isShown = menu.classList.contains('show');
+
+ if (isShown) {
+ menu.classList.remove('show');
+ button.classList.remove('active');
+ backToMainMenu(); // 关闭时回到主菜单
+ } else {
+ menu.classList.add('show');
+ button.classList.add('active');
+ }
+ }
}
+
+ // 点击外部关闭菜单
+ document.addEventListener('click', function(event) {
+ const wrapper = document.querySelector('.context-selector-wrapper');
+ const menu = document.getElementById('contextMenu');
+ const button = document.querySelector('.add-context-button');
+
+ if (wrapper && menu && button && !wrapper.contains(event.target)) {
+ menu.classList.remove('show');
+ button.classList.remove('active');
+ backToMainMenu();
+ }
+ });
+
+ // 显示文件列表
+ function showFileList() {
+ vscode.postMessage({ command: 'addContextFile' });
+ }
+
+ // 显示文件夹列表
+ function showFolderList() {
+ vscode.postMessage({ command: 'addContextFolder' });
+ }
+
+ // 返回主菜单
+ function backToMainMenu() {
+ const mainMenu = document.getElementById('contextMenuMain');
+ const listView = document.getElementById('contextMenuList');
+
+ if (mainMenu && listView) {
+ mainMenu.style.display = 'block';
+ listView.style.display = 'none';
+ }
+
+ selectedItems.clear();
+ currentListData = [];
+ }
+
+ // 切换到列表视图
+ function switchToListView(title, type, data) {
+ const mainMenu = document.getElementById('contextMenuMain');
+ const listView = document.getElementById('contextMenuList');
+ const titleEl = document.getElementById('contextMenuListTitle');
+
+ if (mainMenu && listView && titleEl) {
+ mainMenu.style.display = 'none';
+ listView.style.display = 'flex';
+ titleEl.textContent = title;
+
+ currentListType = type;
+ currentListData = data;
+ selectedItems.clear();
+
+ renderList(data);
+ updateSelectedCount();
+ }
+ }
+
+ // 渲染列表
+ function renderList(data) {
+ const body = document.getElementById('contextMenuListBody');
+ if (!body) return;
+
+ body.innerHTML = data.map((item, index) => \`
+
+ \`).join('');
+ }
+
+ // 切换项选择
+ function toggleItemSelection(index) {
+ const checkbox = document.getElementById('item-' + index);
+ const item = document.querySelectorAll('.context-menu-list-item')[index];
+
+ if (checkbox && item) {
+ checkbox.checked = !checkbox.checked;
+
+ if (checkbox.checked) {
+ selectedItems.add(index);
+ item.classList.add('selected');
+ } else {
+ selectedItems.delete(index);
+ item.classList.remove('selected');
+ }
+
+ updateSelectedCount();
+ }
+ }
+
+ // 更新选中数量
+ function updateSelectedCount() {
+ const countEl = document.getElementById('contextMenuListCount');
+ if (countEl) {
+ countEl.textContent = '已选择 ' + selectedItems.size + ' 项';
+ }
+ }
+
+ // 确认选择
+ function confirmSelection() {
+ const selected = Array.from(selectedItems).map(index => currentListData[index]);
+
+ if (selected.length > 0) {
+ selected.forEach(item => {
+ addContextItem(currentListType, item.path);
+ });
+ }
+
+ toggleContextMenu();
+ }
+
+ // 添加图片
+ function handleAddImage() {
+ vscode.postMessage({ command: 'addContextImage' });
+ toggleContextMenu();
+ }
+
+ // 添加文档
+ function handleAddDocument() {
+ vscode.postMessage({ command: 'addContextDocument' });
+ toggleContextMenu();
+ }
+
+ // 搜索功能
+ const searchInput = document.getElementById('contextMenuSearch');
+ if (searchInput) {
+ searchInput.addEventListener('input', function(e) {
+ const keyword = e.target.value.toLowerCase();
+ const filtered = currentListData.filter(item =>
+ item.relativePath.toLowerCase().includes(keyword)
+ );
+ renderList(filtered);
+ });
+ }
+
+ // 处理后端消息
+ window.addEventListener('message', event => {
+ const message = event.data;
+
+ if (message.command === 'showWorkspaceFileList') {
+ switchToListView('选择文件', 'file', message.files);
+ } else if (message.command === 'showWorkspaceFolderList') {
+ switchToListView('选择文件夹', 'folder', message.folders);
+ }
+ });
`;
}
diff --git a/src/views/contextDisplay.ts b/src/views/contextDisplay.ts
new file mode 100644
index 0000000..f1b0f7b
--- /dev/null
+++ b/src/views/contextDisplay.ts
@@ -0,0 +1,225 @@
+/**
+ * 上下文显示组件
+ * 用于显示已选择的文件、文件夹、图片和文档
+ */
+
+/**
+ * 获取上下文显示区域的 HTML 内容
+ */
+export function getContextDisplayContent(): string {
+ return `
+
+ `;
+}
+
+/**
+ * 获取上下文显示区域的样式
+ */
+export function getContextDisplayStyles(): string {
+ return `
+ /* 上下文显示区域 */
+ .context-display-area {
+ margin-bottom: 8px;
+ padding: 8px;
+ background: rgba(128, 128, 128, 0.1);
+ border-radius: 6px;
+ border: 1px solid var(--vscode-input-border);
+ }
+
+ .context-items-container {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ }
+
+ /* 上下文项样式 */
+ .context-item {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 6px 10px;
+ background: var(--vscode-input-background);
+ border: 1px solid var(--vscode-input-border);
+ border-radius: 4px;
+ font-size: 12px;
+ color: var(--vscode-foreground);
+ max-width: 300px;
+ transition: all 0.2s ease;
+ }
+
+ .context-item:hover {
+ background: var(--vscode-list-hoverBackground);
+ }
+
+ .context-item svg {
+ width: 14px;
+ height: 14px;
+ flex-shrink: 0;
+ opacity: 0.8;
+ }
+
+ .context-item-name {
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .context-item-remove {
+ width: 14px;
+ height: 14px;
+ cursor: pointer;
+ opacity: 0.6;
+ transition: opacity 0.2s ease;
+ flex-shrink: 0;
+ }
+
+ .context-item-remove:hover {
+ opacity: 1;
+ color: #f56c6c;
+ }
+
+ /* 图片预览样式 */
+ .context-item.image-item {
+ position: relative;
+ }
+
+ .context-item-preview {
+ width: 40px;
+ height: 40px;
+ object-fit: cover;
+ border-radius: 3px;
+ border: 1px solid var(--vscode-input-border);
+ }
+ `;
+}
+
+/**
+ * 获取上下文显示区域的脚本
+ */
+export function getContextDisplayScript(): string {
+ return `
+ // 存储上下文项
+ let contextItems = [];
+
+ // 获取文件图标 SVG
+ function getFileIcon() {
+ return '
';
+ }
+
+ // 获取文件夹图标 SVG
+ function getFolderIcon() {
+ return '
';
+ }
+
+ // 获取图片图标 SVG
+ function getImageIcon() {
+ return '
';
+ }
+
+ // 获取文档图标 SVG
+ function getDocumentIcon() {
+ return '
';
+ }
+
+ // 获取删除图标 SVG
+ function getRemoveIcon() {
+ return '
';
+ }
+
+ // 提取文件名
+ function getFileName(path) {
+ return path.split(/[\\\\/]/).pop();
+ }
+
+ // 添加上下文项
+ function addContextItem(type, path) {
+ const id = Date.now() + Math.random();
+ contextItems.push({ id, type, path });
+ renderContextItems();
+ }
+
+ // 删除上下文项
+ function removeContextItem(id) {
+ contextItems = contextItems.filter(item => item.id !== id);
+ renderContextItems();
+ }
+
+ // 渲染上下文项
+ function renderContextItems() {
+ const container = document.getElementById('contextItemsContainer');
+ const displayArea = document.getElementById('contextDisplayArea');
+
+ if (!container || !displayArea) return;
+
+ if (contextItems.length === 0) {
+ displayArea.style.display = 'none';
+ return;
+ }
+
+ displayArea.style.display = 'block';
+ container.innerHTML = contextItems.map(item => {
+ let icon = '';
+ switch(item.type) {
+ case 'file': icon = getFileIcon(); break;
+ case 'folder': icon = getFolderIcon(); break;
+ case 'image': icon = getImageIcon(); break;
+ case 'document': icon = getDocumentIcon(); break;
+ }
+
+ return \`
+
+ \${icon}
+ \${getFileName(item.path)}
+
+ \${getRemoveIcon()}
+
+
+ \`;
+ }).join('');
+ }
+
+ // 处理后端返回的文件选择结果
+ window.addEventListener('message', event => {
+ const message = event.data;
+
+ switch(message.command) {
+ case 'contextFilesSelected':
+ if (message.files && message.files.length > 0) {
+ message.files.forEach(file => addContextItem('file', file));
+ }
+ break;
+ case 'contextFoldersSelected':
+ if (message.folders && message.folders.length > 0) {
+ message.folders.forEach(folder => addContextItem('folder', folder));
+ }
+ break;
+ case 'contextImagesSelected':
+ if (message.images && message.images.length > 0) {
+ message.images.forEach(image => addContextItem('image', image));
+ }
+ break;
+ case 'contextDocumentsSelected':
+ if (message.documents && message.documents.length > 0) {
+ message.documents.forEach(doc => addContextItem('document', doc));
+ }
+ break;
+ }
+ });
+
+ // 获取所有上下文项（供发送消息时使用）
+ window.getContextItems = function() {
+ return contextItems;
+ };
+
+ // 清空上下文项（供清空对话时使用）
+ window.clearContextItems = function() {
+ contextItems = [];
+ renderContextItems();
+ };
+ `;
+}
diff --git a/src/views/inputArea.ts b/src/views/inputArea.ts
index 37e1ea0..8aa6815 100644
--- a/src/views/inputArea.ts
+++ b/src/views/inputArea.ts
@@ -14,6 +14,11 @@ import {
getContextButtonStyles,
getContextButtonScript,
} from "./contextButton";
+import {
+ getContextDisplayContent,
+ getContextDisplayStyles,
+ getContextDisplayScript,
+} from "./contextDisplay";
import {
getContextCompressContent,
getContextCompressStyles,
@@ -36,13 +41,15 @@ export function getInputAreaContent(
maxIcon: string = ''
): string {
return `
-