branch-commit-compare
Version:
Git branch comparison tool
307 lines (290 loc) • 11.2 kB
HTML
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{title}}</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
<style>
{{inlinedCSS}}
</style>
</head>
<body data-layout="chat">
<!-- 添加忽略原因选择弹窗 -->
<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">取消</button>
<button class="modal-button confirm">确认</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"
>
删除备注
</button>
<button class="remark-modal-button remark-cancel">取消</button>
<button class="remark-modal-button remark-save">保存</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 active">
<span>聊天布局</span>
<span class="layout-icon">💬</span>
</button>
<button id="flatLayoutBtn" class="theme-button">
<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">
全部提交
</button>
<button class="filter-button" data-filter="source">
仅{{sourceBranch}}分支
</button>
<button class="filter-button" data-filter="target">
仅{{targetBranch}}分支
</button>
<button class="filter-button" data-filter="common">共同提交</button>
<button class="filter-button" data-filter="ignored">
已忽略提交
</button>
</div>
<div class="sub-filter-section" id="subFilterSection">
<label class="filter-checkbox">
<input type="checkbox" id="hideIgnoredCommits" />
<span>隐藏已忽略提交</span>
</label>
<label class="filter-checkbox">
<input type="checkbox" id="hideCommonCommits" />
<span>隐藏共同提交</span>
</label>
</div>
<div class="search-section">
<div class="search-container">
<input
type="text"
class="search-input"
id="searchInput"
placeholder="搜索提交信息、作者或哈希..."
/>
<button class="clear-search" id="clearSearch">✕</button>
<div class="search-options">
<label class="search-checkbox">
<input type="checkbox" id="searchMessage" checked />
<span>提交信息</span>
</label>
<label class="search-checkbox">
<input type="checkbox" id="searchAuthor" checked />
<span>作者</span>
</label>
<label class="search-checkbox">
<input type="checkbox" id="searchHash" />
<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">
<span class="branch-badge source">
<svg
class="branch-icon"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z"
/>
</svg>
{{sourceBranch}}
</span>
<svg
class="arrow-icon"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 12H19M19 12L12 5M19 12L12 19"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span class="branch-badge target">
<svg
class="branch-icon"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z"
/>
</svg>
{{targetBranch}}
</span>
</button>
<button class="command-tab" data-command="target-to-source">
<span class="branch-badge target">
<svg
class="branch-icon"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z"
/>
</svg>
{{targetBranch}}
</span>
<svg
class="arrow-icon"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 12H19M19 12L12 5M19 12L12 19"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<span class="branch-badge source">
<svg
class="branch-icon"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z"
/>
</svg>
{{sourceBranch}}
</span>
</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">
复制全部
</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">
复制全部
</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}`;
// 从模板注入的数据
const commits = {{commits}};
const sourceBranch = {{sourceBranch}};
const targetBranch = {{targetBranch}};
let ignoredCommits = {{ignoredCommits}} || [];
let commitRemarks = {{commitRemarks}} || [];
const author = {{author}};
const timeRange = {{timeRange}};
// 忽略原因选项
const IGNORE_REASONS = [
'已手动合并',
'不需要合并',
'存在冲突',
'待进一步确认',
'其他原因'
];
</script>
<script>
{{inlinedJS}}
</script>
</body>
</html>