1
/**
2
 * 更新日志数据生成脚本
3
 * 读取 git 提交历史，按日期倒序分组，输出到 src/constants/changelog.json
4
 * 页面 src/pages/changelog.astro 读取渲染
5
 *
6
 * 用法：node scripts/generate-changelog.mjs
7
 */
8
import { spawnSync } from "node:child_process";
9
import { writeFileSync, mkdirSync } from "node:fs";
10
import { join, dirname } from "node:path";
11
import { fileURLToPath } from "node:url";
12

13
const __dirname = dirname(fileURLToPath(import.meta.url));
14
const ROOT_DIR = join(__dirname, "..");
15
const OUTPUT_FILE = join(ROOT_DIR, "src", "constants", "changelog.json");
16

17
// 提交类型 → 中文标签（Conventional Commits 前缀）
18
const TYPE_LABELS = {
19
    feat: "新功能",
20
    fix: "修复",
21
    perf: "优化",
22
    docs: "文档",
23
    refactor: "重构",
24
    style: "样式",
25
    test: "测试",
26
    build: "构建",
27
    ci: "CI",
28
    chore: "杂项",
29
    revert: "回退",
30
    merge: "合并",
31
    update: "更新",
32
    improve: "改进",
33
};
34

35
function detectType(subject) {
36
    const m = subject.match(/^([a-z]+)(\([^)]*\))?[:：]/);
37
    if (m && TYPE_LABELS[m[1]]) return m[1];
38
    return "other";
39
}
40

41
// 拉深历史（应对 CF Pages / CI 浅克隆 depth=1），失败忽略
42
spawnSync("git", ["fetch", "--unshallow"], {
43
    cwd: ROOT_DIR,
44
    stdio: "ignore",
45
});
46

47
console.log("读取 git 提交历史...");
48
const r = spawnSync("git", ["log", "--pretty=format:%h|%aI|%an|%s"], {
49
    cwd: ROOT_DIR,
50
    encoding: "utf8",
51
    maxBuffer: 64 * 1024 * 1024,
52
});
53

54
// 容错：git 不可用（浅克隆 / 无 git 环境 / CI 限制）时生成空数据，不中断构建
55
if (r.status !== 0) {
56
    console.warn(
57
        "[changelog] 警告: git log 执行失败（可能是浅克隆或无 git 环境），生成空数据。",
58
    );
59
    const empty = {
60
        generatedAt: new Date().toISOString(),
61
        total: 0,
62
        groups: [],
63
    };
64
    mkdirSync(dirname(OUTPUT_FILE), { recursive: true });
65
    writeFileSync(OUTPUT_FILE, JSON.stringify(empty, null, 2));
66
    console.log(`✅ 已生成空数据 ${OUTPUT_FILE}（total: 0）`);
67
    process.exit(0);
68
}
69
const log = r.stdout;
70

71
const groups = {};
72
const lines = log.split("\n").filter(Boolean);
73
for (const line of lines) {
74
    const [hash, isoDate, author, subject] = line.split("|");
75
    if (!hash || !isoDate) continue;
76
    const date = isoDate.slice(0, 10);
77
    const type = detectType(subject);
78
    (groups[date] ??= []).push({
79
        hash,
80
        date,
81
        time: isoDate.slice(11, 19),
82
        author,
83
        subject,
84
        type,
85
    });
86
}
87

88
const data = {
89
    generatedAt: new Date().toISOString(),
90
    total: lines.length,
91
    groups: Object.entries(groups)
92
        .map(([date, commits]) => ({ date, commits }))
93
        .sort((a, b) => b.date.localeCompare(a.date)),
94
};
95

96
mkdirSync(dirname(OUTPUT_FILE), { recursive: true });
97
writeFileSync(OUTPUT_FILE, JSON.stringify(data, null, 2));
98
console.log(`✅ 已生成 ${OUTPUT_FILE}`);
99
console.log(`   共 ${data.total} 次提交，${data.groups.length} 个日期分组`);

1
---
2
import { siteConfig } from "@/config/siteConfig";
3
import MainGridLayout from "@/layouts/MainGridLayout.astro";
4
import changelog from "@/constants/changelog.json";
5

6
// 检查页面是否启用
7
if (!siteConfig.pages.changelog) {
8
  return Astro.redirect("/404/");
9
}
10

11
interface Commit {
12
  hash: string;
13
  date: string;
14
  time: string;
15
  author: string;
16
  subject: string;
17
  type: string;
18
}
19

20
// 提交类型 → 中文标签 + 语义色（与 scripts/generate-changelog.mjs 一致）
21
const TYPE_META: Record<string, { label: string; color: string }> = {
22
  feat: { label: "新功能", color: "#22c55e" },
23
  fix: { label: "修复", color: "#ef4444" },
24
  perf: { label: "优化", color: "#3b82f6" },
25
  docs: { label: "文档", color: "#8b5cf6" },
26
  refactor: { label: "重构", color: "#f59e0b" },
27
  style: { label: "样式", color: "#14b8a6" },
28
  test: { label: "测试", color: "#a855f7" },
29
  build: { label: "构建", color: "#64748b" },
30
  ci: { label: "CI", color: "#64748b" },
31
  chore: { label: "杂项", color: "#64748b" },
32
  revert: { label: "回退", color: "#ef4444" },
33
  merge: { label: "合并", color: "#06b6d4" },
34
  update: { label: "更新", color: "#0ea5e9" },
35
  improve: { label: "改进", color: "#10b981" },
36
  other: { label: "提交", color: "#94a3b8" },
37
};
38

39
const groups = changelog.groups as { date: string; commits: Commit[] }[];
40
const EXPANDED_COUNT = 10; // 默认展开最近 10 组
41
const generatedDate = changelog.generatedAt
42
  ? new Date(changelog.generatedAt).toLocaleDateString("zh-CN")
43
  : "";
44
---
45

46
<MainGridLayout title="更新日志">
47
  <div
48
    class="flex w-full rounded-(--radius-large) overflow-hidden relative min-h-32"
49
  >
50
    <div class="card-base z-10 px-9 py-6 relative w-full">
51
      <!-- 页面标题 -->
52
      <div class="flex flex-col items-start justify-center mb-8">
53
        <h1
54
          class="text-4xl font-bold text-black/90 dark:text-white/90 mb-2 relative before:w-1 before:h-8 before:rounded-md before:bg-(--primary) before:absolute before:top-1/2 before:-translate-y-1/2 before:-left-4"
55
        >
56
          更新日志
57
        </h1>
58
        <p class="text-sm text-black/60 dark:text-white/60">
59
          共 {changelog.total} 次提交 · {groups.length} 个日期
60
          {generatedDate && <>· 数据更新于 {generatedDate}</>}
61
        </p>
62
      </div>
63

64
      <!-- 提交列表 -->
65
      <div class="flex flex-col gap-4">
66
        {
67
          groups.map((group, gi) => (
68
            group.commits.length > 0 && (
69
              gi < EXPANDED_COUNT ? (
70
                // 展开的分组
71
                <div class="changelog-group">
72
                  <div class="changelog-date-row">
73
                    <span class="changelog-date-badge">{group.date}</span>
74
                    <span class="changelog-date-count">{group.commits.length} 条提交</span>
75
                  </div>
76
                  <div class="changelog-list">
77
                    {
78
                      group.commits.map((c) => (
79
                        <div class="changelog-item">
80
                          <span
81
                            class="changelog-type"
82
                            style={`color: ${TYPE_META[c.type]?.color ?? "#94a3b8"}; background: color-mix(in srgb, ${TYPE_META[c.type]?.color ?? "#94a3b8"} 12%, transparent);`}
83
                          >
84
                            {TYPE_META[c.type]?.label ?? "提交"}
85
                          </span>
86
                          <span class="changelog-subject">{c.subject}</span>
87
                          <span class="changelog-meta">
88
                            <span class="changelog-hash">{c.hash}</span>
89
                            <span class="changelog-time">{c.time}</span>
90
                          </span>
91
                        </div>
92
                      ))
93
                    }
94
                  </div>
95
                </div>
96
              ) : (
97
                // 折叠的旧分组
98
                <details class="changelog-collapse">
99
                  <summary class="changelog-collapse-summary">
100
                    <span class="inline-flex items-center gap-2 text-sm text-(--content-meta) cursor-pointer select-none">
101
                      <span class="changelog-collapse-icon">▸</span>
102
                      <span class="font-medium">{group.date}</span>
103
                      <span class="text-xs opacity-70">（{group.commits.length} 条提交）</span>
104
                    </span>
105
                  </summary>
106
                  <div class="changelog-collapse-body">
107
                    <div class="changelog-group mt-2">
108
                      <div class="changelog-list">
109
                        {
110
                          group.commits.map((c) => (
111
                            <div class="changelog-item">
112
                              <span
113
                                class="changelog-type"
114
                                style={`color: ${TYPE_META[c.type]?.color ?? "#94a3b8"}; background: color-mix(in srgb, ${TYPE_META[c.type]?.color ?? "#94a3b8"} 12%, transparent);`}
115
                              >
116
                                {TYPE_META[c.type]?.label ?? "提交"}
117
                              </span>
118
                              <span class="changelog-subject">{c.subject}</span>
119
                              <span class="changelog-meta">
120
                                <span class="changelog-hash">{c.hash}</span>
121
                                <span class="changelog-time">{c.time}</span>
122
                              </span>
123
                            </div>
124
                          ))
125
                        }
126
                      </div>
127
                    </div>
128
                  </div>
129
                </details>
130
              )
131
            )
132
          ))
133
        }
134
      </div>
135

136
      <!-- 页脚说明 -->
137
      <p class="text-xs text-(--content-meta) mt-8 pt-4 border-t border-(--line-divider)">
138
        数据由 <code class="text-(--primary)">scripts/generate-changelog.mjs</code> 在构建时从 git 提交历史自动生成。
139
      </p>
140
    </div>
141
  </div>
142
</MainGridLayout>
143

144
<style>
145
  /* 日期分组 */
146
  .changelog-group {
147
    display: flex;
148
    flex-direction: column;
149
    gap: 0.5rem;
150
  }
151

152
  .changelog-date-row {
153
    display: flex;
154
    align-items: center;
155
    gap: 0.75rem;
156
    margin-bottom: 0.25rem;
157
  }
158

159
  .changelog-date-badge {
160
    display: inline-flex;
161
    align-items: center;
162
    padding: 0.2rem 0.75rem;
163
    border-radius: 9999px;
164
    font-size: 0.8rem;
165
    font-weight: 600;
166
    font-variant-numeric: tabular-nums;
167
    color: var(--primary);
168
    background: color-mix(in oklch, var(--primary) 12%, transparent);
169
    border: 1px solid color-mix(in oklch, var(--primary) 25%, transparent);
170
  }
171

172
  .changelog-date-count {
173
    font-size: 0.75rem;
174
    color: var(--content-meta);
175
  }
176

177
  /* 提交列表 */
178
  .changelog-list {
179
    display: flex;
180
    flex-direction: column;
181
    border: 1px solid var(--line-divider);
182
    border-radius: 0.75rem;
183
    overflow: hidden;
184
  }
185

186
  .changelog-item {
187
    display: flex;
188
    align-items: center;
189
    gap: 0.75rem;
190
    padding: 0.55rem 0.9rem;
191
    font-size: 0.85rem;
192
    transition: background 0.2s ease;
193
  }
194

195
  .changelog-item:not(:last-child) {
196
    border-bottom: 1px dashed var(--line-divider);
197
  }
198

199
  .changelog-item:hover {
200
    background: var(--btn-plain-bg-hover);
201
  }
202

203
  .changelog-type {
204
    flex-shrink: 0;
205
    display: inline-flex;
206
    align-items: center;
207
    padding: 0.1rem 0.5rem;
208
    border-radius: 0.4rem;
209
    font-size: 0.7rem;
210
    font-weight: 600;
211
    white-space: nowrap;
212
  }
213

214
  .changelog-subject {
215
    flex: 1;
216
    min-width: 0;
217
    font-weight: 500;
218
    color: var(--deep-text);
219
    overflow: hidden;
220
    text-overflow: ellipsis;
221
    white-space: nowrap;
222
  }
223

224
  .changelog-meta {
225
    flex-shrink: 0;
226
    display: inline-flex;
227
    align-items: center;
228
    gap: 0.5rem;
229
    font-size: 0.7rem;
230
    font-variant-numeric: tabular-nums;
231
  }
232

233
  .changelog-hash {
234
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
235
    color: var(--primary);
236
    opacity: 0.75;
237
  }
238

239
  .changelog-time {
240
    color: var(--content-meta);
241
  }
242

243
  /* 折叠分组 */
244
  .changelog-collapse {
245
    border: 1px solid var(--line-divider);
246
    border-radius: 0.75rem;
247
    overflow: hidden;
248
  }
249

250
  .changelog-collapse-summary {
251
    list-style: none;
252
    padding: 0.6rem 0.9rem;
253
    cursor: pointer;
254
    transition: background 0.2s ease;
255
  }
256

257
  .changelog-collapse-summary:hover {
258
    background: var(--btn-plain-bg-hover);
259
  }
260

261
  .changelog-collapse-summary::-webkit-details-marker {
262
    display: none;
263
  }
264

265
  .changelog-collapse[open] .changelog-collapse-icon {
266
    transform: rotate(90deg);
267
  }
268

269
  .changelog-collapse-icon {
270
    display: inline-block;
271
    transition: transform 0.2s ease;
272
    font-size: 0.7rem;
273
  }
274

275
  .changelog-collapse-body {
276
    padding: 0 0.75rem 0.75rem;
277
  }
278

279
  /* 暗色适配 */
280
  :global(.dark) .changelog-subject {
281
    color: rgba(255, 255, 255, 0.88);
282
  }
283
</style>