示例成品 · 平台演示，按左边这组点选真跑出来的
下面用 Vue 3 做一个浏览器直接跑的单文件工具。你只需要把 `git log --pretty=format:"%s"` 的输出粘贴进去，它就按 Conventional Commits 自动分类成版本说明，能复制 Markdown。
## 使用步骤
1. 保存下面的完整代码为 `changelog-generator.html`
2. 用浏览器打开
3. 在你的项目里执行：
```bash
git log v1.1.0..HEAD --pretty=format:"%s"
```
如果还没有上一个 tag，就执行：
```bash
git log --pretty=format:"%s"
```
4. 把输出粘贴到左侧输入框，填版本号/日期，点“生成 CHANGELOG”
5. 复制右侧 Markdown 到 `CHANGELOG.md`
如果 `cdn.jsdelivr.net` 打不开，就把代码里的 CDN 地址换成：
```html
https://unpkg.com/vue@3/dist/vue.global.js
```
## 完整代码
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CHANGELOG 快速生成器</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<style>
:root {
--border: #e5e7eb;
--bg: #f9fafb;
--text: #111827;
--primary: #2563eb;
}
* { box-sizing: border-box; }
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
margin: 0;
background: #f3f4f6;
color: var(--text);
line-height: 1.5;
}
#app { max-width: 1280px; margin: 0 auto; padding: 24px; }
h1 { margin-top: 0; }
.card {
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
@media (max-width: 900px) {
.grid { grid-template-columns: 1fr; }
}
textarea {
width: 100%;
min-height: 280px;
resize: vertical;
padding: 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
font-size: 13px;
border: 1px solid var(--border);
border-radius: 6px;
}
input[type=text] {
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 6px;
font-size: 14px;
}
.form-row {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 12px;
flex-wrap: wrap;
}
.form-row label {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
}
button {
padding: 8px 14px;
background: var(--primary);
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
}
button.secondary {
background: #f3f4f6;
color: #111827;
border: 1px solid var(--border);
}
.preview {
max-height: 420px;
overflow: auto;
border-top: 1px solid var(--border);
padding-top: 8px;
margin-top: 12px;
}
pre {
background: #f9fafb;
border: 1px solid var(--border);
padding: 12px;
border-radius: 6px;
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
margin: 0;
}
.example { margin-top: 24px; }
.toolbar { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
.muted { font-size: 12px; color: #6b7280; }
</style>
</head>
<body>
<div id="app">
<h1>CHANGELOG 快速生成器</h1>
<p>粘贴 <code>git log --pretty=format:"%s"</code> 的输出，自动按类型分类，生成用户能看懂的版本说明。</p>
<div class="grid">
<div class="card">
<h2>输入</h2>
<div class="form-row">
<label>版本号 <input type="text" v-model="version" placeholder="例如 v1.2.0"></label>
<label>日期 <input type="text" v-model="date" placeholder="YYYY-MM-DD"></label>
</div>
点左边「开工 · 直接出成品」，出一份你自己的版本（文字免费）