branch-commit-compare
Version:
Git branch comparison tool
1,910 lines (1,748 loc) • 136 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{title}}</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.header {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.header h1 {
margin: 0 0 10px 0;
color: #333;
}
.meta-info {
color: #666;
font-size: 14px;
margin-bottom: 15px;
}
.branch-legend {
background: #f8f9fa;
padding: 15px;
border-radius: 6px;
margin-bottom: 20px;
}
.legend-item {
display: inline-flex;
align-items: center;
margin-right: 20px;
padding: 5px 10px;
background: white;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.legend-icon {
margin-right: 8px;
font-size: 18px;
}
.timeline {
position: relative;
display: flex;
flex-direction: column;
padding: 20px 0;
max-width: 800px;
margin: 0 auto;
}
.commit-row {
display: flex;
margin-bottom: 30px;
position: relative;
width: 100%;
}
.commit-container {
max-width: 80%;
position: relative;
}
.commit-container.source {
align-self: flex-start;
margin-right: auto;
}
.commit-container.target {
align-self: flex-end;
margin-left: auto;
}
.commit-container.both {
align-self: center;
max-width: 95%;
margin: 0 auto;
}
.commit-container.both .commit {
border-top: 4px solid #28a745;
border-left: none;
border-right: none;
border-radius: 8px;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: #f0fff4;
}
.commit-container.both .commit.matched-by-message {
background-color: #e6f7ff11;
border-top: 4px solid #1890ff;
}
.commit {
display: flex;
flex-direction: column;
padding: 20px 15px;
border-radius: 12px;
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative;
}
.commit-container.source .commit {
border-left: 4px solid #28a745; /* 改为绿色 */
border-top-left-radius: 0;
background-color: rgba(40, 167, 69, 0.05); /* 淡绿色背景 */
}
.commit-container.target .commit {
border-right: 4px solid #ff9800; /* 改为橙色 */
border-top-right-radius: 0;
background-color: rgba(255, 152, 0, 0.05); /* 淡橙色背景 */
}
.commit-badge {
position: absolute;
top: -10px;
padding: 3px 10px;
border-radius: 12px;
font-size: 12px;
color: white;
font-weight: bold;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 2;
}
.commit-container.source .commit-badge {
left: 10px;
background-color: #28a745; /* 改为绿色 */
}
.commit-container.target .commit-badge {
right: 10px;
background-color: #ff9800; /* 改为橙色 */
}
.commit-container.both .commit-badge {
left: 50%;
transform: translateX(-50%);
background-color: #28a745;
padding: 3px 15px;
}
.commit-container.both .commit-badge.message-matched {
background-color: #1890ff !important;
}
.commit-time {
color: #666;
font-size: 12px;
margin-bottom: 5px;
margin-top: 15px;
display: flex;
align-items: center;
}
.commit-container.source .commit-time {
justify-content: flex-start;
}
.commit-container.target .commit-time {
justify-content: flex-end;
}
.commit-container.both .commit-time {
justify-content: center;
}
.commit-info {
flex-grow: 1;
}
.commit-message {
font-weight: 500;
color: #333;
margin-bottom: 8px;
cursor: pointer;
}
.commit-details {
display: flex;
flex-wrap: wrap;
font-size: 13px;
color: #666;
gap: 8px;
margin-bottom: 8px;
}
.commit-author {
margin-right: 8px;
}
.commit-container.target .commit-details {
justify-content: flex-end;
}
.commit-hash {
font-family: monospace;
cursor: pointer;
background: #f1f1f1;
padding: 2px 6px;
border-radius: 3px;
height: 20px;
display: inline-flex;
align-items: center;
}
.commit-hash:hover {
background: #e1e4e8;
}
.commit-indicator {
width: 50px;
text-align: center;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.ignore-button,
.remark-button,
.vscode-button,
.view-changes-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 20px;
vertical-align: middle;
margin: 0 4px;
}
.ignore-button,
.remark-button {
border: none;
padding: 2px 8px;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
opacity: 0.8;
}
.ignore-button {
background: #dc3545;
color: white;
}
.remark-button {
background: #0ea5e9 !important; /* 使用天蓝色 */
color: white;
}
.ignore-button:hover,
.remark-button:hover {
opacity: 1;
}
.remark-button {
background: #17a2b8;
}
.ignored {
opacity: 0.5;
background: #f8f9fa;
}
/* .ignored::after {
content: '(已忽略)';
color: #dc3545;
margin-left: 8px;
font-size: 12px;
} */
.filter-section {
margin-bottom: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 6px;
}
.filter-buttons {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.filter-button {
padding: 5px 15px;
border: 1px solid #ddd;
border-radius: 4px;
background: white;
cursor: pointer;
transition: all 0.2s;
}
.filter-button.active {
background: #0366d6;
color: white;
border-color: #0366d6;
}
.sub-filter-section {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin: 10px 0;
padding-left: 5px;
transition: all 0.3s ease;
max-height: 50px;
overflow: hidden;
}
.sub-filter-section.hidden {
max-height: 0;
margin: 0;
opacity: 0;
}
.filter-checkbox {
display: flex;
align-items: center;
cursor: pointer;
}
.filter-checkbox input {
margin-right: 5px;
}
.command-section {
margin-top: 30px;
background: #f8f9fa;
padding: 20px;
border-radius: 6px;
}
.command-tabs {
display: flex;
border-bottom: 1px solid #ddd;
margin-bottom: 15px;
}
.command-tab {
background: none;
border: none;
padding: 8px 15px;
cursor: pointer;
font-size: 14px;
color: #666;
position: relative;
transition: all 0.2s ease;
}
.command-tab:hover {
background-color: #f8f8f8;
}
.command-tab.active {
color: #007bff;
font-weight: bold;
border-bottom: 2px solid #007bff;
}
.command-content {
display: none;
}
.command-content.active {
display: block;
}
.command-content pre {
background: #2d2d2d;
color: #fff;
padding: 15px;
border-radius: 4px;
overflow-x: auto;
margin: 0;
}
.copy-button {
background: #0366d6;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
margin-left: 10px;
}
.copy-button:hover {
background: #0256b9;
}
.tooltip {
position: fixed;
background: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
}
.success-toast {
position: fixed;
top: 20px;
right: 20px;
background: #28a745;
color: white;
padding: 12px 20px;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
z-index: 9999;
font-size: 14px;
opacity: 0;
transform: translateY(-20px);
transition: all 0.3s ease;
}
.success-toast.show {
opacity: 1;
transform: translateY(0);
}
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.loading-overlay.show {
opacity: 1;
visibility: visible;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 5px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 24px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
}
.modal h3 {
margin-top: 0;
margin-bottom: 16px;
color: #333;
font-size: 18px;
}
.reason-list {
margin: 16px 0;
max-height: 300px;
overflow-y: auto;
}
.reason-option {
display: flex;
align-items: center;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 6px;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.2s;
}
.reason-option:hover {
background: #f8f9fa;
border-color: #aaa;
}
.reason-option.selected {
background: #e3f2fd;
border-color: #2196f3;
}
.reason-option input[type="radio"] {
margin-right: 10px;
width: 18px;
height: 18px;
}
.reason-option label {
flex: 1;
padding: 5px 0;
cursor: pointer;
}
.custom-reason {
display: none;
margin-top: 16px;
}
.custom-reason.show {
display: block;
}
.custom-reason input {
width: 100%;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
box-sizing: border-box;
}
.modal-buttons {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 24px;
}
.modal-button {
padding: 10px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: background 0.2s;
}
.modal-button:hover {
opacity: 0.9;
}
.modal-button.confirm {
background: #2196f3;
color: white;
}
.modal-button.cancel {
background: #f1f1f1;
color: #333;
}
.ignore-reason,
.commit-remark {
font-size: 13px;
color: #666;
margin: 8px 0 0 0;
padding: 4px 8px;
background: #f8f9fa;
border-radius: 4px;
line-height: 1.4;
display: flex;
align-items: center;
gap: 8px;
}
/* .ignore-reason {
border-left: 3px solid #dc3545;
}
.commit-remark {
border-left: 3px solid #17a2b8;
} */
.ignore-reason-title,
.commit-remark-title {
font-weight: 500;
color: #555;
margin-right: 6px;
}
.ignore-reason-content,
.commit-remark-content {
display: block;
padding-left: 24px;
}
.remark-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.remark-modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 24px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
width: 80%;
max-width: 420px;
box-sizing: border-box;
}
.remark-modal-content h3 {
margin-top: 0;
margin-bottom: 20px;
font-size: 18px;
color: #333;
font-weight: 500;
}
.remark-textarea {
width: 100%;
min-height: 120px;
margin: 10px 0;
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
resize: vertical;
font-size: 14px;
line-height: 1.5;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
color: #333;
}
.remark-textarea:focus {
outline: none;
border-color: #2196f3;
box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}
.remark-modal-buttons {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 20px;
}
.remark-modal-button {
padding: 10px 20px;
border-radius: 6px;
cursor: pointer;
border: none;
font-size: 14px;
transition: all 0.2s ease;
font-weight: 500;
}
.remark-modal-button:hover {
transform: translateY(-1px);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.remark-save {
background: #28a745;
color: white;
}
.remark-cancel {
background: #f1f1f1;
color: #333;
}
.remark-delete {
background: #dc3545;
color: white;
margin-right: auto;
}
@media (max-width: 768px) {
.commit {
flex-direction: column;
}
.commit-time {
width: 100%;
margin-bottom: 10px;
}
.commit-indicator {
width: 100%;
margin-top: 10px;
}
}
/* 添加返回顶部按钮样式 */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: #0366d6;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
font-size: 24px;
z-index: 999;
}
.back-to-top.show {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
/* 添加时间轴图例样式 */
.timeline-legend {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}
.timeline-legend .legend-item {
display: flex;
align-items: center;
background: white;
padding: 8px 15px;
border-radius: 20px;
/* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */
}
.legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 8px;
display: inline-block;
}
.legend-dot.source {
background-color: #28a745; /* 改为绿色 */
}
.legend-dot.target {
background-color: #ff9800; /* 改为橙色 */
}
.legend-dot.both {
background-color: #28a745;
}
/* 对提交哈希的展示增强，显示双分支哈希 */
.commit-hash-container {
display: flex;
align-items: center;
gap: 4px;
}
.commit-hash-pair {
display: flex;
flex-direction: column;
gap: 3px;
background: #f5f5f5;
padding: 5px;
border-radius: 4px;
margin-top: 5px;
}
.commit-hash-branch {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
border-radius: 6px;
margin-bottom: 8px;
}
/* 对比分支样式 */
.commit-hash-branch:last-child {
background-color: rgba(255, 152, 0, 0.1); /* 淡橙色背景 */
border: 1px solid rgba(255, 152, 0, 0.2);
}
.commit-hash-branch:last-child .branch-label {
color: #ff9800; /* 橙色文字 */
font-weight: 600;
}
.branch-label {
min-width: 100px;
display: inline-block;
}
.commit-hash-pair {
background: white;
padding: 12px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.theme-switcher {
display: flex;
align-items: center;
background-color: #f5f5f5;
border-radius: 24px;
padding: 4px;
}
.theme-button {
border: none;
background: none;
color: #666;
padding: 6px 12px;
border-radius: 20px;
cursor: pointer;
font-size: 13px;
display: flex;
align-items: center;
gap: 5px;
transition: all 0.2s ease;
}
.theme-button.active {
background-color: #0366d6;
color: white;
}
/* Add CSS for the flat layout */
.timeline.flat-layout .commit-row {
justify-content: center;
}
.timeline.flat-layout .commit-container {
max-width: 90%;
width: 90%;
margin: 0 auto;
align-self: center;
}
.timeline.flat-layout .commit-container.both {
max-width: 90%;
}
.timeline.flat-layout .commit {
display: flex;
flex-direction: column;
}
.timeline.flat-layout .commit-indicator {
position: absolute;
left: 15px;
top: 15px;
font-size: 16px;
}
/* Add branch indicator for flat layout */
.timeline.flat-layout .branch-indicator {
position: absolute;
top: 10px;
width: 12px;
height: 12px;
border-radius: 50%;
}
.timeline.flat-layout .commit-container.source .branch-indicator {
right: 10px; /* 改为right */
left: auto; /* 清除left */
background-color: #28a745;
}
.timeline.flat-layout .commit-container.target .branch-indicator {
left: 10px;
background-color: #ff9800;
}
.timeline.flat-layout .commit-container.both .branch-indicator {
background: linear-gradient(
135deg,
#28a745 50%,
#ff9800 50%
); /* 改为绿色和橙色 */
}
/* Adjust content padding in flat layout */
.timeline.flat-layout .commit-time,
.timeline.flat-layout .commit-info {
padding-left: 25px;
}
/* Add styling for the search box */
.search-section {
margin-top: 10px;
padding: 0 5px;
}
.search-input {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
margin-bottom: 5px;
}
.search-options {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.search-checkbox {
display: flex;
align-items: center;
margin-right: 10px;
}
.search-checkbox label {
margin-left: 5px;
font-size: 13px;
color: #666;
}
.highlight {
background-color: #ffffc0;
border-radius: 2px;
padding: 0 2px;
}
/* Add a clear button for the search input */
.search-container {
position: relative;
width: 100%;
display: flex;
align-items: center;
margin-bottom: 5px;
}
/* Set width for search input to make room for checkboxes */
.search-container .search-input {
width: calc(100% - 320px);
margin-bottom: 0;
margin-right: 10px;
}
/* Place checkboxes on the same line */
.search-container .search-options {
flex: 1;
margin: 0;
justify-content: flex-end;
}
.clear-search {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
border: none;
background: none;
color: #999;
cursor: pointer;
font-size: 16px;
display: none;
}
.clear-search.visible {
display: block;
}
/* Add VS Code icon button styles */
.vscode-button {
width: 20px;
background: #0066b8;
color: white;
border-radius: 3px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
border: none;
padding: 0;
}
.vscode-button:hover {
background: #005ca3;
transform: translateY(-1px);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}
.vscode-button svg {
width: 12px;
height: 12px;
fill: white;
}
/* Add tooltip for VS Code buttons */
.vscode-button::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
padding: 5px 8px;
background: rgba(0, 0, 0, 0.8);
color: white;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
z-index: 10;
}
.vscode-button:hover::after {
opacity: 1;
visibility: visible;
bottom: calc(100% + 5px);
}
/* Add style for compare buttons for matched commits */
.compare-in-vscode {
background: #0066b8;
color: white;
border: none;
padding: 2px 8px;
border-radius: 3px;
font-size: 12px;
cursor: pointer;
margin-top: 5px;
display: inline-flex;
align-items: center;
gap: 5px;
transition: all 0.2s ease;
}
.compare-in-vscode:hover {
background: #005ca3;
transform: translateY(-1px);
}
.compare-in-vscode svg {
width: 12px;
height: 12px;
fill: white;
}
/* 查看提交变更按钮样式 */
.view-changes-btn {
padding: 2px 8px;
background-color: #f0f0f0;
border: 1px solid #ddd;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
color: #333;
}
.view-changes-btn:hover {
background-color: #e0e0e0;
}
/* 差异查看器样式 */
.diff-viewer {
width: 100%;
max-height: 80vh;
overflow: auto;
background-color: #f8f9fa;
border-radius: 4px;
font-family: monospace;
line-height: 1.5;
margin-top: 15px;
}
.diff-file {
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
}
.diff-file-header {
background-color: #f1f1f1;
padding: 10px;
font-weight: bold;
border-bottom: 1px solid #ddd;
}
.diff-hunk-header {
background-color: #e8eaed;
padding: 5px 10px;
color: #666;
border-bottom: 1px solid #ddd;
}
.diff-line {
padding: 0 5px;
white-space: pre;
}
.diff-line-addition {
background-color: #e6ffed;
border-left: 4px solid #34d058;
}
.diff-line-deletion {
background-color: #ffeef0;
border-left: 4px solid #d73a49;
}
.diff-line-context {
background-color: #fff;
border-left: 4px solid transparent;
}
.diff-line-num {
display: inline-block;
width: 40px;
color: #999;
text-align: right;
padding-right: 10px;
user-select: none;
}
.diff-empty-msg {
padding: 20px;
color: #666;
text-align: center;
}
.diff-stats {
display: flex;
padding: 10px;
border-bottom: 1px solid #ddd;
background-color: #f8f9fa;
font-size: 14px;
}
.diff-stats-additions {
color: #28a745;
margin-right: 15px;
}
.diff-stats-deletions {
color: #d73a49;
}
.diff-loading {
text-align: center;
padding: 20px;
color: #666;
}
/* 修改共同提交的按钮布局 */
.commit-container.both .commit-details {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* 调整按钮样式，让它们在同一行 */
.ignore-button,
.remark-button {
background: #dc3545;
color: white;
border: none;
padding: 2px 6px;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
margin: 0;
opacity: 0.8;
display: inline-flex;
align-items: center;
height: 20px;
}
/* 命令复制按钮 */
.copy-button {
background-color: #f1f1f1;
border: 1px solid #ddd;
border-radius: 4px;
padding: 3px 8px;
cursor: pointer;
margin-left: 10px;
font-size: 12px;
color: #666;
}
.copy-line-button {
background-color: #f8f8f8;
border: 1px solid #ddd;
border-radius: 3px;
padding: 2px 6px;
font-size: 11px;
color: #666;
cursor: pointer;
margin-left: 8px;
transition: all 0.2s ease;
}
.copy-line-button:hover {
background-color: #e6e6e6;
color: #333;
}
.command-line {
display: flex;
align-items: center;
margin: 2px 0;
}
.command-line pre {
margin: 0;
flex-grow: 1;
font-family: monospace;
white-space: pre-wrap;
overflow-x: auto;
}
/* Cherry-pick 时间样式 */
.cherry-pick-time {
margin-top: 8px;
padding: 5px 10px;
background-color: #fff7e6;
border-left: 3px solid #f0ad4e;
border-radius: 3px;
font-size: 0.9em;
display: flex;
align-items: center;
gap: 8px;
}
.cherry-pick-label {
font-weight: bold;
color: #e07600;
}
.cherry-pick-timestamp {
color: #333;
}
</style>
</head>
<body data-layout="flat">
<!-- 添加忽略原因选择弹窗 -->
<div id="ignoreModal" class="modal">
<div class="modal-content">
<h3>选择忽略原因</h3>
<div class="reason-list" id="reasonList">
<!-- 原因选项将通过 JavaScript 动态添加 -->
</div>
<div id="customReasonInput" class="custom-reason">
<input
type="text"
placeholder="请输入忽略原因"
id="customReasonText"
/>
</div>
<div class="modal-buttons">
<button class="modal-button cancel" onclick="closeIgnoreModal()">
取消
</button>
<button class="modal-button confirm" onclick="confirmIgnore()">
确认
</button>
</div>
</div>
</div>
<!-- 添加备注弹窗 -->
<div id="remarkModal" class="remark-modal">
<div class="remark-modal-content">
<h3>编辑备注</h3>
<textarea
id="remarkText"
class="remark-textarea"
placeholder="请输入备注内容..."
></textarea>
<div class="remark-modal-buttons">
<button
class="remark-modal-button remark-delete"
id="deleteRemarkBtn"
onclick="deleteRemark()"
>
删除备注
</button>
<button
class="remark-modal-button remark-cancel"
onclick="closeRemarkModal()"
>
取消
</button>
<button
class="remark-modal-button remark-save"
onclick="confirmRemark()"
>
保存
</button>
</div>
</div>
</div>
<!-- 添加loading覆盖层 -->
<div id="loadingOverlay" class="loading-overlay">
<div class="loading-spinner"></div>
</div>
<!-- 添加返回顶部按钮 -->
<div id="backToTop" class="back-to-top">↑</div>
<div class="container">
<div class="header">
<div>
<h1>分支提交对比</h1>
<div class="meta-info">
<div>生成时间: {{generatedTime}}</div>
<div id="authorInfo" style="display: none">提交者: {{author}}</div>
<div id="timeRangeInfo" style="display: none">
时间范围: {{timeRange}}
</div>
</div>
</div>
<div class="timeline-legend">
<div class="legend-item">
<span class="legend-dot source"></span> {{sourceBranch}} (基准分支)
</div>
<div class="legend-item">
<span class="legend-dot target"></span> {{targetBranch}}
</div>
<div class="legend-item">
<span
class="legend-dot both"
style="background-color: #1890ff"
></span>
消息相同的共同提交
</div>
</div>
<div class="theme-switcher">
<button
id="chatLayoutBtn"
class="theme-button"
onclick="switchLayout('chat')"
>
<span>聊天布局</span>
<span class="layout-icon">💬</span>
</button>
<button
id="flatLayoutBtn"
class="theme-button active"
onclick="switchLayout('flat')"
>
<span>列表布局</span>
<span class="layout-icon">📑</span>
</button>
</div>
</div>
<div class="filter-section">
<div class="filter-buttons">
<button
class="filter-button active"
data-filter="all"
onclick="filterCommits('all')"
>
全部提交
</button>
<button
class="filter-button"
data-filter="source"
onclick="filterCommits('source')"
>
仅{{sourceBranch}}分支
</button>
<button
class="filter-button"
data-filter="target"
onclick="filterCommits('target')"
>
仅{{targetBranch}}分支
</button>
<button
class="filter-button"
data-filter="common"
onclick="filterCommits('common')"
>
共同提交
</button>
<button
class="filter-button"
data-filter="ignored"
onclick="filterCommits('ignored')"
>
已忽略提交
</button>
</div>
<div class="sub-filter-section" id="subFilterSection">
<label class="filter-checkbox">
<input
type="checkbox"
id="hideIgnoredCommits"
checked
onchange="applySubFilters()"
/>
<span>隐藏已忽略提交</span>
</label>
<label class="filter-checkbox">
<input
type="checkbox"
id="hideCommonCommits"
onchange="applySubFilters()"
/>
<span>隐藏共同提交</span>
</label>
</div>
<div class="search-section">
<div class="search-container">
<input
type="text"
class="search-input"
id="searchInput"
placeholder="搜索提交信息、作者或哈希..."
oninput="searchCommits()"
/>
<button
class="clear-search"
id="clearSearch"
onclick="clearSearch()"
>
✕
</button>
<div class="search-options">
<label class="search-checkbox">
<input
type="checkbox"
id="searchMessage"
checked
onchange="searchCommits()"
/>
<span>提交信息</span>
</label>
<label class="search-checkbox">
<input
type="checkbox"
id="searchAuthor"
checked
onchange="searchCommits()"
/>
<span>作者</span>
</label>
<label class="search-checkbox">
<input
type="checkbox"
id="searchHash"
onchange="searchCommits()"
/>
<span>哈希</span>
</label>
</div>
</div>
</div>
</div>
<div class="timeline" id="timeline"></div>
<div class="command-section">
<div class="command-tabs">
<button
class="command-tab active"
data-command="source-to-target"
onclick="switchCommandTab('source-to-target')"
>
{{sourceBranch}} → {{targetBranch}}
</button>
<button
class="command-tab"
data-command="target-to-source"
onclick="switchCommandTab('target-to-source')"
>
{{targetBranch}} → {{sourceBranch}}
</button>
</div>
<div id="source-to-target-content" class="command-content active">
<h3>
Cherry-pick 指令 ({{sourceBranch}} → {{targetBranch}})
<button
class="copy-button copy-source-to-target-button"
onclick="copyCommandBlock('source-to-target')"
>
复制全部
</button>
</h3>
<div id="source-to-target-commands-container"></div>
<pre
style="display: none"
><code id="source-to-target-commands"></code></pre>
</div>
<div id="target-to-source-content" class="command-content">
<h3>
Cherry-pick 指令 ({{targetBranch}} → {{sourceBranch}})
<button
class="copy-button copy-target-to-source-button"
onclick="copyCommandBlock('target-to-source')"
>
复制全部
</button>
</h3>
<div id="target-to-source-commands-container"></div>
<pre
style="display: none"
><code id="target-to-source-commands"></code></pre>
</div>
</div>
</div>
<script>
// 获取动态端口
const PORT = '{{port}}';
const API_BASE = `http://localhost:${PORT}`;
// 加载忽略的提交
async function loadIgnoredCommits() {
try {
const response = await fetch(`${API_BASE}/ignored-commits`);
const data = await response.json();
return data.ignoredCommits || [];
} catch (error) {
console.error('加载忽略的提交失败:', error);
return [];
}
}
// 保存忽略的提交
async function saveIgnoredCommits(commits) {
try {
const response = await fetch(`${API_BASE}/ignore-commit`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ ignoredCommits: commits })
});
return response.ok;
} catch (error) {
console.error('保存忽略的提交失败:', error);
return false;
}
}
// 加载提交备注
async function loadCommitRemarks() {
try {
const response = await fetch(`${API_BASE}/commit-remarks`);
const data = await response.json();
return data.commitRemarks || {};
} catch (error) {
console.error('加载提交备注失败:', error);
return {};
}
}
// 保存提交备注
async function saveCommitRemarks(remarks) {
try {
const response = await fetch(`${API_BASE}/commit-remarks`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ commitRemarks: remarks })
});
return response.ok;
} catch (error) {
console.error('保存提交备注失败:', error);
return false;
}
}
// Create a global variable to track current filter state correctly placed at the top
// Create a global variable at the beginning of the script
let currentFilterState = {
mainFilter: 'all',
hideIgnored: true,
hideCommon: false,
searchText: '',
searchMessage: true,
searchAuthor: true,
searchHash: false
};
// 初始化数据
const commits = {{commits}};
const sourceBranch = {{sourceBranch}};
const targetBranch = {{targetBranch}};
let ignoredCommits = {{ignoredCommits}} || []; // 确保有默认值
// 检查分支是否完整
if (!sourceBranch || !targetBranch) {
document.body.innerHTML = `
<div style="
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 20px;
background: #fff3f3;
border: 1px solid #dc3545;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
">
<h2 style="color: #dc3545; margin-bottom: 10px;">⚠️ 错误</h2>
<p style="color: #666; margin-bottom: 15px;">缺少必要的分支信息，无法进行比较。</p>
<p style="color: #666;">请确保同时指定源分支和目标分支。</p>
</div>
`;
// 阻止后续代码执行
throw new Error('Missing branch information');
}
// 确保备注数据是数组格式
let commitRemarks = [];
try {
const rawRemarks = {{commitRemarks}};
if (Array.isArray(rawRemarks)) {
// 已经是数组格式
commitRemarks = rawRemarks;
console.log('初始化: 备注数据已经是数组格式, 条数:', commitRemarks.length);
} else if (typeof rawRemarks === 'object' && rawRemarks !== null) {
// 转换对象格式为数组
for (const hash in rawRemarks) {
commitRemarks.push({
hash: hash,
content: rawRemarks[hash],
timestamp: new Date().toISOString()
});
}
console.log('初始化: 已将对象格式备注转换为数组, 条数:', commitRemarks.length);
} else {
console.warn('初始化: 无效的备注数据格式, 使用空数组');
}
} catch (e) {
console.error('初始化备注数据时出错:', e);
}
const author = {{author}};
const timeRange = {{timeRange}};
// 忽略原因选项
const IGNORE_REASONS = [
'已手动合并',
'不需要合并',
'存在冲突',
'待进一步确认',
'其他原因'
];
let currentIgnoreHash = null;
let currentIgnoreElement = null;
let currentCommitHash = null;
// 页面加载时获取最新的已忽略提交和备注
async function loadIgnoredCommits() {
console.log('正在加载已忽略提交和备注数据...');
try {
// 单独处理每个请求，避免一个失败影响另一个
try {
const ignoreResponse = await fetch('http://localhost:3000/ignored-commits');
if (ignoreResponse.ok) {
const ignoreData = await ignoreResponse.json();
if (Array.isArray(ignoreData.ignoredCommits)) {
ignoredCommits = ignoreData.ignoredCommits;
console.log('已忽略提交加载成功, 数量:', ignoredCommits.length);
}
} else {
console.error('加载已忽略提交失败:', ignoreResponse.status);
}
} catch (ignoreError) {
console.error('获取已忽略提交出错:', ignoreError);
}
// 加载备注数据
try {
console.log('开始加载备注数据...');
const remarkResponse = await fetch('http://localhost:3000/commit-remarks');
if (remarkResponse.ok) {
const remarkData = await remarkResponse.json();
console.log('收到备注数据响应:', remarkData);
if (remarkData.commitRemarks) {
if (Array.isArray(remarkData.commitRemarks)) {
commitRemarks = remarkData.commitRemarks;
console.log('备注数据加载成功(数组格式), 数量:', commitRemarks.length);
if (commitRemarks.length > 0) {
console.log('备注内容示例:');
commitRemarks.slice(0, 3).forEach((remark) => {
console.log(`- 哈希: ${remark.hash}, 内容: ${remark.content}`);
});
}
} else {
console.warn('服务器返回的备注不是数组格式, 正在转换...');
const tempArray = [];
for (const hash in remarkData.commitRemarks) {
tempArray.push({
hash: hash,
content: remarkData.commitRemarks[hash],
timestamp: new Date().toISOString()
});
}
commitRemarks = tempArray;
console.log('对象格式备注转换为数组成功, 数量:', commitRemarks.length);
}
} else {
console.warn('服务器返回的数据中没有commitRemarks字段');
}
} else {
console.error('加载备注数据失败:', remarkResponse.status);
}
} catch (remarkError) {
console.error('获取备注出错:', remarkError);
}
// 重新渲染提交列表
renderCommits(false); // Don't save filter state on initial load
console.log('提交列表渲染完成');
// Initialize filter state after data is loaded
initializeFilterState();
} catch (error) {
console.error('加载数据失败:', error);
// 如果加载失败，使用初始数据
renderCommits(false);
}
}
// 显示作者和时间范围信息（如果有）
if (author) {
document.getElementById('authorInfo').style.display = 'block';
}
if (timeRange) {
document.getElementById('timeRangeInfo').style.display = 'block';
}
// 显示忽略原因选择弹窗
function showIgnoreModal(hash, element) {
currentIgnoreHash = hash;
currentIgnoreElement = element;
// 生成忽略原因选项
const reasonListElement = document.getElementById('reasonList');
reasonListElement.innerHTML = '';
IGNORE_REASONS.forEach((reason, index) => {
const optionElement = document.createElement('div');
optionElement.className = 'reason-option';
// 创建radio输入
const radioInput = document.createElement('input');
radioInput.type = 'radio';
radioInput.id = `reason-${index}`;
radioInput.name = 'ignoreReason';
radioInput.value = reason;
if (index === 0) {
radioInput.checked = true;
}
// 创建label
const label = document.createElement('label');
label.htmlFor = `reason-${index}`;
label.textContent = reason;
// 添加到选项元素
optionElement.appendChild(radioInput);
optionElement.appendChild(label);
// 使整个选项可点击
optionElement.addEventListener('click', function(e) {
if (e.target !== radioInput) {
radioInput.checked = true;
// 处理自定义原因输入框显示逻辑
if (reason === '其他原因') {
document.getElementById('customReasonInput').classList.add('show');
} else {
document.getElementById('customReasonInput').classList.remove('show');
}
// 更新选中样式
document.querySelectorAll('.reason-option').forEach(opt => {
opt.classList.remove('selected');
});
this.classList.add('selected');
}
});
// 特殊处理自定义原因选项
if (reason === '其他原因') {
radioInput.addEventListener('change', function() {
document.getElementById('customReasonInput').classList.add('show');
// 更新选中样式
document.querySelectorAll('.reason-option').forEach(opt => {
opt.classList.remove('selected');
});
optionElement.classList.add('selected');
});
} else {
radioInput.addEventListener('change', function() {
document.getElementById('customReasonInput').classList.remove('show');
// 更新选中样式
document.querySelectorAll('.reason-option').forEach(opt => {
opt.classList.remove('selected');
});
optionElement.classList.add('selected');
});
}
reasonListElement.appendChild(optionElement);
});
// 重置自定义原因输入框
document.getElementById('customReasonText').value = '';
document.getElementById('customReasonInput').classList.remove('show');
// 显示弹窗
document.getElementById('ignoreModal').style.display = 'block';
}
// 获取备注内容
function getRemarkContent(hash) {
const remark = commitRemarks.find(r => r.hash === hash);
return remark ? remark.content : '';
}
// 判断是否有备注
function hasRemark(hash) {
return commitRemarks.some(r => r.hash === hash);
}
// 获取提交的备注对象
function getCommitRemark(hash) {
return commitRemarks.find(r => r.hash === hash);
}
// 保存备注到服务器
async function saveCommitRemarks() {
try {
console.log('准备保存备注数据, 备注总数:', commitRemarks.length);
// 确保commitRemarks是数组
if (!Array.isArray(commitRemarks)) {
console.error('ERROR: commitRemarks不是数组!', typeof commitRemarks, commitRemarks);
// 重置为空数组
commitRemarks = [];
console.warn('已将commitRemarks重置为空数组');
}
// 验证并清理备注数据
const validRemarks = commitRemarks.filter(remark =>
remark &&
remark.hash &&
typeof remark.hash === 'string' &&
remark.hash.trim().length > 0
);
if (validRemarks.length !== commitRemarks.length) {
console.warn(`过滤了 ${commitRemarks.length - validRemarks.length} 条无效备注`);
commitRemarks = validRemarks;
}
// 打印备注内容
if (commitRemarks.length === 0) {
console.log('没有备注需要保存');
} else {
console.log('备注详情:');
for (const remark of commitRemarks) {
console.log(`- 哈希: ${remark.hash}, 内容: ${remark.content || '(无内容)'}`);
}
}
console.log('发送POST请求到/commit-remarks...');
const postData = { commitRemarks: commitRemarks };
console.log('POST数据格式检查:',
'是数组:', Array.isArray(commitRemarks),
'长度:', commitRemarks.length);
// 添加重试逻辑
let attempts = 0;
const maxAttempts = 3;
let success = false;
let lastError = null;
while (attempts < maxAttempts && !success) {
attempts++;
try {
const response = await fetch('http://localhost:3000/commit-remarks', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(postData),
cache: 'no-cache' // 禁用缓存
});
if (!response.ok) {
const errorText = await response.text();
console.error(`尝试 ${attempts}/${maxAttempts} 失败:`, response.status, errorText);
lastError = new Error(`服务器返回错误: ${response.status} ${response.statusText}`);