feat: 优化代码变更面板样式和交互

- 优化变更面板和 diff 视图样式
   - 新增全部采纳和全部拒绝按钮
   - 修复删除文件的变更追踪和采纳逻辑
   - 整个标题栏可点击展开/收起
   - 增强视觉效果和用户体验
This commit is contained in:
Roe-xin
2026-03-02 10:37:45 +08:00
parent 4c7ec65577
commit 5f88c7ceac
4 changed files with 201 additions and 43 deletions

View File

@ -5,7 +5,7 @@
* 使用场景:对话结束后展示代码变更供用户审查
*/
import { getDiffStyles } from '../utils/diffRenderer';
import { getDiffStyles } from "../utils/diffRenderer";
/**
* 获取变更面板的 HTML 内容
@ -13,15 +13,22 @@ import { getDiffStyles } from '../utils/diffRenderer';
export function getChangePanelContent(): string {
return `
<div class="change-panel" id="changePanel" style="display: none;">
<div class="change-panel-header">
<div class="change-panel-header" onclick="toggleChangePanel()">
<div class="change-panel-title">
<span class="change-icon">📝</span>
<span>代码变更</span>
<span class="change-count" id="changeCount">0</span>
</div>
<button class="change-toggle-btn" id="changePanelToggle" onclick="toggleChangePanel()">
<span class="toggle-icon">▼</span>
</button>
<div class="change-panel-actions" onclick="event.stopPropagation()">
<button class="batch-action-btn accept-all-btn" onclick="acceptAllChanges()" title="采纳全部">
<span>✓ 全部采纳</span>
</button>
<button class="batch-action-btn reject-all-btn" onclick="rejectAllChanges()" title="拒绝全部">
<span>✕ 全部拒绝</span>
</button>
<button class="change-toggle-btn" id="changePanelToggle">
<span class="toggle-icon">▼</span>
</button>
</div>
</div>
<div class="change-panel-body" id="changePanelBody" style="display: none;">
<div class="change-list" id="changeList">
@ -49,10 +56,11 @@ export function getChangePanelStyles(): string {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
padding: 6px 16px;
background: var(--vscode-sideBar-background);
cursor: pointer;
user-select: none;
border-bottom: 2px solid var(--vscode-panel-border);
cursor: pointer;
}
.change-panel-header:hover {
@ -62,22 +70,66 @@ export function getChangePanelStyles(): string {
.change-panel-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
gap: 10px;
font-size: 14px;
font-weight: 600;
}
.change-icon {
font-size: 16px;
font-size: 18px;
}
.change-count {
background: var(--vscode-badge-background);
color: var(--vscode-badge-foreground);
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
min-width: 24px;
text-align: center;
}
.change-panel-actions {
display: flex;
align-items: center;
gap: 8px;
}
.batch-action-btn {
padding: 6px 12px;
border: none;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 4px;
}
.batch-action-btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.accept-all-btn {
background: #28a745;
color: white;
}
.accept-all-btn:hover {
background: #218838;
}
.reject-all-btn {
background: #dc3545;
color: white;
}
.reject-all-btn:hover {
background: #c82333;
}
.change-toggle-btn {
@ -110,24 +162,31 @@ export function getChangePanelStyles(): string {
}
.change-list {
padding: 8px;
padding: 0px;
}
.change-item {
border: 1px solid var(--vscode-panel-border);
border-radius: 4px;
margin-bottom: 8px;
border-radius: 6px;
margin-bottom: 10px;
overflow: hidden;
background: var(--vscode-editor-background);
transition: all 0.2s;
}
.change-item:hover {
border-color: var(--vscode-focusBorder);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.change-item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
padding: 6px 16px;
background: var(--vscode-sideBar-background);
cursor: pointer;
transition: background 0.2s;
}
.change-item-header:hover {
@ -143,11 +202,12 @@ export function getChangePanelStyles(): string {
}
.change-type-badge {
padding: 2px 6px;
border-radius: 3px;
font-size: 10px;
font-weight: 600;
padding: 4px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.change-type-create {
@ -157,7 +217,7 @@ export function getChangePanelStyles(): string {
.change-type-modify {
background: #ffc107;
color: black;
color: #000;
}
.change-type-delete {
@ -166,7 +226,8 @@ export function getChangePanelStyles(): string {
}
.change-file-path {
font-size: 12px;
font-size: 13px;
font-weight: 500;
color: var(--vscode-foreground);
overflow: hidden;
text-overflow: ellipsis;
@ -179,16 +240,18 @@ export function getChangePanelStyles(): string {
}
.change-action-btn {
padding: 4px 10px;
padding: 6px 14px;
border: none;
border-radius: 3px;
font-size: 11px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: opacity 0.2s;
transition: all 0.2s;
}
.change-action-btn:hover {
opacity: 0.8;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.accept-btn {
@ -196,11 +259,19 @@ export function getChangePanelStyles(): string {
color: white;
}
.accept-btn:hover {
background: #218838;
}
.reject-btn {
background: #dc3545;
color: white;
}
.reject-btn:hover {
background: #c82333;
}
.change-item-diff {
padding: 12px;
background: var(--vscode-editor-background);
@ -237,6 +308,58 @@ export function getChangePanelScript(): string {
}
}
// 全部采纳
window.acceptAllChanges = function() {
const changeList = document.getElementById('changeList');
if (!changeList) {
console.error('changeList not found');
return;
}
const items = Array.from(changeList.querySelectorAll('.change-item'));
console.log('Found items:', items.length);
if (items.length === 0) {
alert('没有待处理的变更');
return;
}
items.forEach(item => {
const changeId = item.id.replace('change-item-', '');
console.log('Accepting change:', changeId);
vscode.postMessage({
command: 'acceptChange',
changeId: changeId
});
});
};
// 全部拒绝
window.rejectAllChanges = function() {
const changeList = document.getElementById('changeList');
if (!changeList) {
console.error('changeList not found');
return;
}
const items = Array.from(changeList.querySelectorAll('.change-item'));
console.log('Found items:', items.length);
if (items.length === 0) {
alert('没有待处理的变更');
return;
}
items.forEach(item => {
const changeId = item.id.replace('change-item-', '');
console.log('Rejecting change:', changeId);
vscode.postMessage({
command: 'rejectChange',
changeId: changeId
});
});
};
// 打开文件 diff在 VS Code 中打开)
function openFileDiff(changeId) {
vscode.postMessage({