226 lines
6.8 KiB
TypeScript
226 lines
6.8 KiB
TypeScript
/**
|
|
* 上下文显示组件
|
|
* 用于显示已选择的文件、文件夹、图片和文档
|
|
*/
|
|
|
|
/**
|
|
* 获取上下文显示区域的 HTML 内容
|
|
*/
|
|
export function getContextDisplayContent(): string {
|
|
return `
|
|
<div class="context-display-area" id="contextDisplayArea" style="display: none;">
|
|
<div class="context-items-container" id="contextItemsContainer">
|
|
<!-- 动态添加的上下文项将显示在这里 -->
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* 获取上下文显示区域的样式
|
|
*/
|
|
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 viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7z" fill="currentColor"/></svg>';
|
|
}
|
|
|
|
// 获取文件夹图标 SVG
|
|
function getFolderIcon() {
|
|
return '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M880 298.4H521L403.7 186.2c-1.5-1.4-3.5-2.2-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32z" fill="currentColor"/></svg>';
|
|
}
|
|
|
|
// 获取图片图标 SVG
|
|
function getImageIcon() {
|
|
return '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z" fill="currentColor"/></svg>';
|
|
}
|
|
|
|
// 获取文档图标 SVG
|
|
function getDocumentIcon() {
|
|
return '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32z" fill="currentColor"/></svg>';
|
|
}
|
|
|
|
// 获取删除图标 SVG
|
|
function getRemoveIcon() {
|
|
return '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9c-4.4 5.2-.7 13.1 6.1 13.1h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" fill="currentColor"/></svg>';
|
|
}
|
|
|
|
// 提取文件名
|
|
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 \`
|
|
<div class="context-item" title="\${item.path}">
|
|
\${icon}
|
|
<span class="context-item-name">\${getFileName(item.path)}</span>
|
|
<span class="context-item-remove" onclick="removeContextItem(\${item.id})">
|
|
\${getRemoveIcon()}
|
|
</span>
|
|
</div>
|
|
\`;
|
|
}).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();
|
|
};
|
|
`;
|
|
}
|