更新日志CHANGELOG怎么写
发版时不知道更新日志怎么组织,用户看不懂这版改了啥,自己也懒得从一堆 commit 里手动整理。
有人这样说「这版发完用户还问我改了啥,真头疼,每次都要翻commit看。」
能替你选的都选好了。不想动,直接点下面「交给 AI 办」,点一下就开始做;想改,就点一下要的那个。
已替你选好想改就点一下
只有你知道的不填就先空着,成品里留【待填】
还想怎么改可以不选
高级选项一般不用动 · 这件事通常 1 分钟左右做好
示例成品全文按上面这组示例选项真跑出来的
下面用 Vue 3 做一个浏览器直接跑的单文件工具。你只需要把 git log --pretty=format:"%s" 的输出粘贴进去,它就按 Conventional Commits 自动分类成版本说明,能复制 Markdown。
使用步骤
- 保存下面的完整代码为
changelog-generator.html - 用浏览器打开
- 在你的项目里执行:
git log v1.1.0..HEAD --pretty=format:"%s"如果还没有上一个 tag,就执行:
git log --pretty=format:"%s"- 把输出粘贴到左侧输入框,填版本号/日期,点“生成 CHANGELOG”
- 复制右侧 Markdown 到
CHANGELOG.md
如果 cdn.jsdelivr.net 打不开,就把代码里的 CDN 地址换成:
https://unpkg.com/vue@3/dist/vue.global.js完整代码
<!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>
<h1>CHANGELOG 快速生成器</h1>
<p>粘贴 <code>git log --pretty=format:"%s"</code> 的输出,自动按类型分类,生成用户能看懂的版本说明。</p>
<h2>输入</h2>
<label>版本号 <input type="text" v-model="version" placeholder="例如 v1.2.0"></label>
<label>日期 <input type="text" v-model="date" placeholder="YYYY-MM-DD"></label>