feat:实现文档集删除功能
- 文档集按钮添加tooltip - 实现删除的二次确认弹窗
This commit is contained in:
@ -38,6 +38,16 @@ export function getDocsetDialogContent(): string {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="delete-confirm-dialog" id="deleteConfirmDialog">
|
||||||
|
<div class="delete-confirm-content">
|
||||||
|
<div class="delete-confirm-title">确认删除</div>
|
||||||
|
<div class="delete-confirm-message" id="deleteConfirmMessage"></div>
|
||||||
|
<div class="delete-confirm-actions">
|
||||||
|
<button class="docset-btn-cancel" onclick="closeDeleteConfirm()">取消</button>
|
||||||
|
<button class="docset-btn-confirm" onclick="confirmDelete()">确定</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -198,6 +208,89 @@ export function getDocsetDialogStyles(): string {
|
|||||||
.docset-btn-confirm:hover {
|
.docset-btn-confirm:hover {
|
||||||
background: var(--vscode-button-hoverBackground);
|
background: var(--vscode-button-hoverBackground);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.docset-delete-btn {
|
||||||
|
position: relative;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px;
|
||||||
|
color: var(--vscode-foreground);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docset-delete-btn:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docset-delete-btn:hover::after {
|
||||||
|
content: attr(data-tooltip);
|
||||||
|
position: absolute;
|
||||||
|
bottom: 100%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
background: var(--vscode-editorHoverWidget-background);
|
||||||
|
color: var(--vscode-editorHoverWidget-foreground);
|
||||||
|
border: 1px solid var(--vscode-editorHoverWidget-border);
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-confirm-dialog {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.4);
|
||||||
|
z-index: 10000;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-confirm-dialog.active {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-confirm-content {
|
||||||
|
background: var(--vscode-editor-background);
|
||||||
|
border: 1px solid var(--vscode-panel-border);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 20px;
|
||||||
|
min-width: 300px;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-confirm-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-confirm-message {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--vscode-descriptionForeground);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-confirm-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-confirm-actions button {
|
||||||
|
padding: 6px 16px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -299,7 +392,7 @@ export function getDocsetDialogScript(): string {
|
|||||||
<div class="docset-item">
|
<div class="docset-item">
|
||||||
<div class="docset-name">\${ds.name}</div>
|
<div class="docset-name">\${ds.name}</div>
|
||||||
<div class="docset-meta">更新于 \${new Date(ds.updatedAt).toLocaleString('zh-CN')}</div>
|
<div class="docset-meta">更新于 \${new Date(ds.updatedAt).toLocaleString('zh-CN')}</div>
|
||||||
<button class="docset-delete-btn" onclick="deleteDocumentSet('\${ds.id}')">
|
<button class="docset-delete-btn" data-tooltip="删除" onclick="showDeleteConfirm('\${ds.id}', '\${ds.name}')">
|
||||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
|
||||||
<path d="M10 3h3v1h-1v9l-1 1H4l-1-1V4H2V3h3V2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v1zM9 2H6v1h3V2zM4 13h7V4H4v9zm2-8H5v7h1V5zm1 0h1v7H7V5zm2 0h1v7H9V5z"/>
|
<path d="M10 3h3v1h-1v9l-1 1H4l-1-1V4H2V3h3V2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v1zM9 2H6v1h3V2zM4 13h7V4H4v9zm2-8H5v7h1V5zm1 0h1v7H7V5zm2 0h1v7H9V5z"/>
|
||||||
</svg>
|
</svg>
|
||||||
@ -308,11 +401,25 @@ export function getDocsetDialogScript(): string {
|
|||||||
\`).join('');
|
\`).join('');
|
||||||
}
|
}
|
||||||
|
|
||||||
function deleteDocumentSet(id) {
|
let deleteTargetId = null;
|
||||||
if (confirm('确定删除此文档集?')) {
|
|
||||||
vscode.postMessage({ command: 'deleteDocumentSet', id });
|
window.showDeleteConfirm = function(id, name) {
|
||||||
|
deleteTargetId = id;
|
||||||
|
document.getElementById('deleteConfirmMessage').textContent = \`确定要删除文档集 "\${name}" 吗?此操作不可恢复。\`;
|
||||||
|
document.getElementById('deleteConfirmDialog').classList.add('active');
|
||||||
|
};
|
||||||
|
|
||||||
|
window.closeDeleteConfirm = function() {
|
||||||
|
document.getElementById('deleteConfirmDialog').classList.remove('active');
|
||||||
|
deleteTargetId = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
window.confirmDelete = function() {
|
||||||
|
if (deleteTargetId) {
|
||||||
|
vscode.postMessage({ command: 'deleteDocumentSet', id: deleteTargetId });
|
||||||
|
closeDeleteConfirm();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
window.addEventListener('message', event => {
|
window.addEventListener('message', event => {
|
||||||
const message = event.data;
|
const message = event.data;
|
||||||
|
|||||||
Reference in New Issue
Block a user