feat: 优化代码变更面板样式和交互
- 优化变更面板和 diff 视图样式 - 新增全部采纳和全部拒绝按钮 - 修复删除文件的变更追踪和采纳逻辑 - 整个标题栏可点击展开/收起 - 增强视觉效果和用户体验
This commit is contained in:
@ -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({
|
||||
|
||||
Reference in New Issue
Block a user