基于 Cloudflare Worker + KV 打造 Serverless GitHub 仓库更新监控系统

在日常运维与开源项目关注中，我们经常需要及时跟踪上游仓库的 最新 Release 发版 或 代码 Commit 提交（例如面板更新、工具脚本更新、核心依赖发版等）。

传统的监控做法通常是在服务器上使用 Python / Go 编写一个常驻后台服务，借助 cron 或定时器轮询 GitHub API，并将已推送的记录保存在本地文件中。然而，这种常驻方案存在明显弊端：

占用服务器资源：需要 24 小时常驻 VPS 占用内存与进程守护；
受服务器状态影响：一旦服务器重启、网络波动或进程异常退出，就会漏掉发版提醒；
维护成本高：需要管理本地状态文件与日志，且难以直观查看当前监控状态。

本文介绍如何利用 Cloudflare Worker（Cron Triggers 定时调度） 结合 Cloudflare KV（边缘键值存储），零服务器资源占用、零成本搭建一个高可用的 GitHub 仓库更新实时监控系统。

架构拓扑#

1
+-----------------------+       +-------------------------+       +-------------------+
2
|  Cloudflare Cron 调度 | ----> |    Cloudflare Worker    | ----> | GitHub REST API   |
3
| (如每 6 小时自动触发) |       |  (检查更新 / 状态比对)  |       | (Commits/Releases)|
4
+-----------------------+       +-------------------------+       +-------------------+
5
                                       |             |
6
                                       v             v
7
                              +----------------+  +-------------------+
8
                              | Cloudflare KV  |  | Webhook 消息网关  |
9
                              | (记录最新 SHA) |  | (企业微信/Bark等) |
10
                              +----------------+  +-------------------+

核心特性#

Serverless 零服务器常驻：无需 VPS 虚拟机，完全依托 Cloudflare 边缘全球网络运行。
Commit 与 Release 双模式监控：
- Commit 模式：监控指定分支最新提交，获取 Commit SHA、提交信息与提交时间；
- Release 模式：监控仓库最新发版，支持仅监控正式版（排除 Prerelease 与 Draft）。
Cloudflare KV 智能防重与初始化：
- 首次运行自动将当前最新版本录入 KV 作为基准，杜绝冷启动误报和刷屏；
- 每次检测比对 KV 历史记录，仅当检测到真正的新提交/新版本时才触发通知。
现代化护眼温润 Web 看板：
- 访问 Worker 域名可直观查看每个仓库的监控类型、当前基准版本与最近巡检时间；
- 纯只读状态监控面板，不公开暴露外部触发接口；
- 采用 #f8fafc 浅色护眼配色体系，长时间浏览舒适自然。

环境变量与 KV 绑定#

在 Cloudflare 控制台创建 Worker 后，配置如下绑定：

1. KV 命名空间绑定#

变量名称：REPO_KV
绑定目标：创建并绑定一个 KV 命名空间（例如 REPO_MONITOR_KV），用于持久化存储各个仓库最新已推送记录。

2. 环境变量与机密（Variables and Secrets）#

变量名	类型	示例值	说明
`PUSH_URL`	Plaintext	`https://sms.example.com/message`	Webhook 推送网关接口地址
`PUSH_TOKEN`	Plaintext / Secret	`your_push_token`	推送接口认证密钥
`GITHUB_TOKEN`	Secret	`ghp_xxxxxxxxxxxx`	（可选）GitHub Personal Access Token，避免触发匿名 API 限流
`REPOS_CONFIG`	Plaintext	`[...]`	（可选）JSON 字符串覆盖默认监控仓库配置

3. Cron 触发器设置（Schedules）#

在 Worker 的 Settings -> Triggers -> Cron Triggers 中添加定时调度规则，如 0 */6 * * *（每 6 小时自动巡检一次）。

完整 Worker 源码#

1
/**
2
 * Cloudflare Worker: GitHub Repository Update Monitor (Serverless)
3
 * 特性：
4
 * 1. 深度优化柔和暖调护眼浅色（消除纯白眩光）+ 微微黑柔和暗色自由切换
5
 * 2. 宽屏（30寸/2K/4K）多列自适应卡片 + 手机端全端自适应 + 专属 Favicon
6
 * 3. 内部巡检 Token 鉴权保护
7
 */
8

9
const FAVICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
10
  <defs>
11
    <linearGradient id="grad" x1="8" y1="8" x2="56" y2="56" gradientUnits="userSpaceOnUse">
12
      <stop stop-color="#0284c7"/>
13
      <stop offset="1" stop-color="#059669"/>
14
    </linearGradient>
15
  </defs>
16
  <rect width="64" height="64" rx="16" fill="#eef2f6"/>
17
  <rect x="1.5" y="1.5" width="61" height="61" rx="14.5" stroke="#cbd5e1" stroke-width="2"/>
18
  <circle cx="20" cy="22" r="5.5" fill="#0284c7"/>
19
  <circle cx="44" cy="22" r="5.5" fill="#059669"/>
20
  <circle cx="32" cy="44" r="5.5" fill="#10b981"/>
21
  <path d="M20 22V32C20 36 24 40 28 42L32 44M44 22V32C44 36 40 40 36 42L32 44" stroke="url(#grad)" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
22
</svg>`;
23

24
export default {
25
  // Cloudflare Cron 定时调度（每 6 小时自动触发）
26
  async scheduled(event, env, ctx) {
27
    ctx.waitUntil(runMonitor(env, false));
28
  },
29

30
  async fetch(request, env, ctx) {
31
    const url = new URL(request.url);
32
    const path = url.pathname;
33

34
    if (path === '/favicon.ico' || path === '/favicon.svg') {
35
      return new Response(FAVICON_SVG, {
36
        headers: {
37
          'Content-Type': 'image/svg+xml; charset=utf-8',
38
          'Cache-Control': 'public, max-age=604800, immutable'
39
        }
40
      });
41
    }
42

43
    // 内部调试接口：必须携带有效 token 鉴权
44
    if (path === '/check' || path === '/api/check') {
45
      const token = url.searchParams.get('token') || request.headers.get('x-token');
46
      const validToken = env.ADMIN_TOKEN || env.PUSH_TOKEN || 'fdngkee5yt';
47
      if (!token || token !== validToken) {
48
        return new Response(JSON.stringify({ status: 'fail', error: '未授权：请提供有效的管理员 token' }), {
49
          status: 403,
50
          headers: { 'Content-Type': 'application/json; charset=utf-8' }
51
        });
52
      }
53
      const result = await runMonitor(env, false);
54
      return new Response(JSON.stringify(result, null, 2), {
55
        headers: { 'Content-Type': 'application/json; charset=utf-8' }
56
      });
57
    }
58

59
    if (path === '/health' || path === '/status') {
60
      const status = await getStatus(env);
61
      return new Response(JSON.stringify(status, null, 2), {
62
        headers: { 'Content-Type': 'application/json; charset=utf-8' }
63
      });
64
    }
65

66
    // 纯只读展示看板
67
    return handleDashboard(request, env);
68
  }
69
};
70

71
const DEFAULT_REPOS = [
72
  {
73
    repo: "cedar2025/Xboard",
74
    alias: "V面板",
75
    monitor_commits: true,
76
    monitor_releases: false,
77
    branch: "master"
78
  },
79
  {
80
    repo: "pppscn/SmsForwarder",
81
    alias: "SmsForwarder",
82
    monitor_commits: false,
83
    monitor_releases: true,
84
    stable_only: true
85
  },
86
  {
87
    repo: "massgravel/Microsoft-Activation-Scripts",
88
    alias: "KMS脚本",
89
    monitor_commits: false,
90
    monitor_releases: true,
91
    stable_only: true
92
  },
93
  {
94
    repo: "cmontage/mas-cn",
95
    alias: "MAS中文版",
96
    monitor_commits: false,
97
    monitor_releases: true,
98
    stable_only: true
99
  }
100
];
101

102
function getReposConfig(env) {
103
  if (env.REPOS_CONFIG) {
104
    try {
105
      return JSON.parse(env.REPOS_CONFIG);
106
    } catch (e) {
107
      console.error("Failed to parse REPOS_CONFIG:", e);
108
    }
109
  }
110
  return DEFAULT_REPOS;
111
}
112

113
function formatBeijingTime(date) {
114
  if (!date) return "未知时间";
115
  const d = date instanceof Date ? date : new Date(date);
116
  if (isNaN(d.getTime())) return String(date);
117
  return new Intl.DateTimeFormat("zh-CN", {
118
    timeZone: "Asia/Shanghai",
119
    year: "numeric",
120
    month: "2-digit",
121
    day: "2-digit",
122
    hour: "2-digit",
123
    minute: "2-digit",
124
    second: "2-digit",
125
    hour12: false
126
  }).format(d).replace(/\//g, "-");
127
}
128

129
async function runMonitor(env, isTest = false) {
130
  const repos = getReposConfig(env);
131
  const results = [];
132
  const pushUrl = env.PUSH_URL || "https://sms.onepve.com/message";
133
  const pushToken = env.PUSH_TOKEN || "fdngkee5yt";
134
  const ghToken = env.GITHUB_TOKEN || "";
135

136
  const headers = {
137
    "User-Agent": "Cloudflare-Worker-Repo-Monitor/1.0",
138
    "Accept": "application/vnd.github.v3+json"
139
  };
140
  if (ghToken) {
141
    headers["Authorization"] = `token ${ghToken}`;
142
  }
143

144
  for (const repoCfg of repos) {
145
    const { repo, alias, monitor_commits, monitor_releases, stable_only, branch } = repoCfg;
146
    const itemResult = { repo, alias, checked_at: formatBeijingTime(new Date()), status: "ok" };
147

148
    try {
149
      if (monitor_commits) {
150
        let commitUrl = `https://api.github.com/repos/${repo}/commits?per_page=1`;
151
        if (branch) commitUrl += `&sha=${encodeURIComponent(branch)}`;
152

153
        const resp = await fetch(commitUrl, { headers });
154
        if (!resp.ok) throw new Error(`GitHub Commits API HTTP ${resp.status}`);
155
        const commits = await resp.json();
156
        if (commits && commits.length > 0) {
157
          const latest = commits[0];
158
          const sha = latest.sha;
159
          const shortSha = sha.substring(0, 7);
160
          const commitMsg = (latest.commit?.message || "").split("
161
")[0];
162
          const commitDate = latest.commit?.author?.date || latest.commit?.committer?.date;
163

164
          const kvKey = `commit:${repo}`;
165
          const recordedRaw = await env.REPO_KV.get(kvKey);
166
          let recorded = null;
167
          if (recordedRaw) {
168
            try { recorded = JSON.parse(recordedRaw); } catch(e){}
169
          }
170

171
          const isFirstInit = !recorded;
172
          const isNew = recorded && recorded.sha !== sha;
173

174
          itemResult.commit = {
175
            latest_sha: shortSha,
176
            message: commitMsg,
177
            date: formatBeijingTime(commitDate),
178
            is_new: isNew || (isTest && !isFirstInit)
179
          };
180

181
          if (isFirstInit) {
182
            await env.REPO_KV.put(kvKey, JSON.stringify({
183
              sha,
184
              short_sha: shortSha,
185
              message: commitMsg,
186
              date: commitDate,
187
              updated_at: new Date().toISOString()
188
            }));
189
            itemResult.commit.action = "initialized";
190
          } else if (isNew || isTest) {
191
            const title = `📢 ${alias} Commit更新`;
192
            const content = [
193
              `仓库名：${alias}`,
194
              `Commit ID：${shortSha}`,
195
              `提交信息：${commitMsg}`,
196
              `更新时间：${formatBeijingTime(commitDate)}`,
197
              `仓库地址：https://github.com/${repo}/commit/${sha}`
198
            ].join("
199
");
200

201
            const pushSuccess = await sendPush(pushUrl, pushToken, title, content);
202
            if (pushSuccess) {
203
              await env.REPO_KV.put(kvKey, JSON.stringify({
204
                sha,
205
                short_sha: shortSha,
206
                message: commitMsg,
207
                date: commitDate,
208
                updated_at: new Date().toISOString()
209
              }));
210
              itemResult.commit.action = "pushed";
211
            } else {
212
              itemResult.commit.action = "push_failed";
213
            }
214
          } else {
215
            itemResult.commit.action = "no_change";
216
          }
217
        }
218
      }
219

220
      if (monitor_releases) {
221
        const relUrl = `https://api.github.com/repos/${repo}/releases?per_page=5`;
222
        const resp = await fetch(relUrl, { headers });
223
        if (!resp.ok) throw new Error(`GitHub Releases API HTTP ${resp.status}`);
224
        const releases = await resp.json();
225

226
        let targetReleases = Array.isArray(releases) ? releases : [];
227
        if (stable_only) {
228
          targetReleases = targetReleases.filter(r => !r.prerelease && !r.draft);
229
        }
230

231
        if (targetReleases.length > 0) {
232
          const latest = targetReleases[0];
233
          const tagName = latest.tag_name;
234
          const releaseName = latest.name || tagName;
235
          const publishedAt = latest.published_at;
236
          const htmlUrl = latest.html_url;
237
          const isStable = !latest.prerelease;
238

239
          const kvKey = `release:${repo}`;
240
          const recordedRaw = await env.REPO_KV.get(kvKey);
241
          let recorded = null;
242
          if (recordedRaw) {
243
            try { recorded = JSON.parse(recordedRaw); } catch(e){}
244
          }
245

246
          const isFirstInit = !recorded;
247
          const isNew = recorded && recorded.tag_name !== tagName;
248

249
          itemResult.release = {
250
            tag_name: tagName,
251
            name: releaseName,
252
            published_at: formatBeijingTime(publishedAt),
253
            is_new: isNew || (isTest && !isFirstInit)
254
          };
255

256
          if (isFirstInit) {
257
            await env.REPO_KV.put(kvKey, JSON.stringify({
258
              tag_name: tagName,
259
              name: releaseName,
260
              published_at: publishedAt,
261
              html_url: htmlUrl,
262
              updated_at: new Date().toISOString()
263
            }));
264
            itemResult.release.action = "initialized";
265
          } else if (isNew || isTest) {
266
            const title = `📢 ${alias} 新增Releases`;
267
            const contentLines = [
268
              `仓库名：${alias}`
269
            ];
270
            if (tagName.trim() === releaseName.trim()) {
271
              contentLines.push(`版本：${releaseName}`);
272
            } else {
273
              contentLines.push(`标签：${tagName}`);
274
              contentLines.push(`名称：${releaseName}`);
275
            }
276
            contentLines.push(`是否正式版：${isStable ? "true" : "false"}`);
277
            contentLines.push(`发布时间：${formatBeijingTime(publishedAt)}`);
278
            contentLines.push(`地址：${htmlUrl}`);
279

280
            const content = contentLines.join("
281
");
282
            const pushSuccess = await sendPush(pushUrl, pushToken, title, content);
283
            if (pushSuccess) {
284
              await env.REPO_KV.put(kvKey, JSON.stringify({
285
                tag_name: tagName,
286
                name: releaseName,
287
                published_at: publishedAt,
288
                html_url: htmlUrl,
289
                updated_at: new Date().toISOString()
290
              }));
291
              itemResult.release.action = "pushed";
292
            } else {
293
              itemResult.release.action = "push_failed";
294
            }
295
          } else {
296
            itemResult.release.action = "no_change";
297
          }
298
        } else {
299
          itemResult.release = { action: "no_releases_found" };
300
        }
301
      }
302

303
    } catch (err) {
304
      console.error(`Error monitoring ${repo}:`, err);
305
      itemResult.status = "error";
306
      itemResult.error = err.message;
307
    }
308

309
    results.push(itemResult);
310
  }
311

312
  await env.REPO_KV.put("last_check_meta", JSON.stringify({
313
    time: new Date().toISOString(),
314
    formatted: formatBeijingTime(new Date()),
315
    summary: results
316
  }));
317

318
  return {
319
    success: true,
320
    checked_at: formatBeijingTime(new Date()),
321
    results
322
  };
323
}
324

325
async function sendPush(url, token, title, content) {
326
  try {
327
    const targetUrl = new URL(url);
328
    targetUrl.searchParams.set("token", token);
329

330
    const resp = await fetch(targetUrl.toString(), {
331
      method: "POST",
332
      headers: {
333
        "Content-Type": "application/json; charset=utf-8",
334
        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36"
335
      },
336
      body: JSON.stringify({ title, content })
337
    });
338
    return resp.ok;
339
  } catch (e) {
340
    console.error("sendPush failed:", e);
341
    return false;
342
  }
343
}
344

345
async function getStatus(env) {
346
  const repos = getReposConfig(env);
347
  const list = [];
348
  for (const r of repos) {
349
    const commitRaw = await env.REPO_KV.get(`commit:${r.repo}`);
350
    const releaseRaw = await env.REPO_KV.get(`release:${r.repo}`);
351
    list.push({
352
      ...r,
353
      saved_commit: commitRaw ? JSON.parse(commitRaw) : null,
354
      saved_release: releaseRaw ? JSON.parse(releaseRaw) : null
355
    });
356
  }
357
  const lastCheck = await env.REPO_KV.get("last_check_meta");
358
  return {
359
    status: "healthy",
360
    last_check: lastCheck ? JSON.parse(lastCheck) : null,
361
    repos: list
362
  };
363
}
364

365
async function handleDashboard(request, env) {
366
  const status = await getStatus(env);
367
  const reposHtml = status.repos.map(r => {
368
    let detail = "";
369
    if (r.monitor_commits) {
370
      const c = r.saved_commit;
371
      detail += `
372
        <div class="tag">
373
          <div class="tag-top">
374
            <div class="tag-left">
375
              <span class="type-badge commit-badge">Commit 监控</span>
376
              ${c ? `<code>${c.short_sha || c.sha.substring(0,7)}</code>` : '<span class="desc">尚未初始化</span>'}
377
            </div>
378
            ${c?.date ? `<span class="tag-time">${formatBeijingTime(c.date)}</span>` : ''}
379
          </div>
380
          ${c?.message ? `<div class="desc">${c.message}</div>` : ''}
381
        </div>
382
      `;
383
    }
384
    if (r.monitor_releases) {
385
      const rel = r.saved_release;
386
      detail += `
387
        <div class="tag">
388
          <div class="tag-top">
389
            <div class="tag-left">
390
              <span class="type-badge release-badge">Release 监控</span>
391
              ${rel ? `<code>${rel.tag_name}</code>` : '<span class="desc">尚未初始化</span>'}
392
            </div>
393
            ${rel?.published_at ? `<span class="tag-time">${formatBeijingTime(rel.published_at)}</span>` : ''}
394
          </div>
395
          ${rel?.name && rel.name !== rel.tag_name ? `<div class="desc">${rel.name}</div>` : ''}
396
        </div>
397
      `;
398
    }
399
    return `
400
      <div class="card">
401
        <div class="card-header">
402
          <div class="alias-wrap">
403
            <span class="alias">${r.alias}</span>
404
            <span class="repo-sub">${r.repo}</span>
405
          </div>
406
          <a href="https://github.com/${r.repo}" target="_blank" class="repo-link">访问仓库 ↗</a>
407
        </div>
408
        <div class="card-body">
409
          ${detail}
410
        </div>
411
      </div>
412
    `;
413
  }).join("");
414

415
  const lastCheckTime = status.last_check?.formatted || "尚未运行";
416

417
  const html = `<!DOCTYPE html>
418
<html lang="zh-CN">
419
<head>
420
  <meta charset="UTF-8">
421
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
422
  <link rel="icon" type="image/svg+xml" href="/favicon.ico">
423
  <title>GitHub 仓库监控网关</title>
424
  <style>
425
    :root {
426
      --bg: #ebeff4;
427
      --surface: #f6f8fb;
428
      --surface-sub: #e2e8f0;
429
      --border: #d1d8e2;
430
      --border-sub: #b8c3d2;
431
      --accent: #0284c7;
432
      --accent-hover: #0369a1;
433
      --accent-light: rgba(2, 132, 199, 0.12);
434
      --text: #1e293b;
435
      --text-muted: #576579;
436
      --success: #059669;
437
      --success-bg: #def7ec;
438
      --success-border: #9ee3c3;
439
      --code-bg: #e5ebf2;
440
    }
441
    [data-theme="dark"] {
442
      --bg: #0b1120;
443
      --surface: #1e293b;
444
      --surface-sub: #2d3a4f;
445
      --border: #334155;
446
      --border-sub: #475569;
447
      --accent: #38bdf8;
448
      --accent-hover: #0ea5e9;
449
      --accent-light: rgba(56, 189, 248, 0.15);
450
      --text: #f1f5f9;
451
      --text-muted: #94a3b8;
452
      --success: #10b981;
453
      --success-bg: rgba(16, 185, 129, 0.14);
454
      --success-border: rgba(16, 185, 129, 0.35);
455
      --code-bg: #0f172a;
456
    }
457
    * { box-sizing: border-box; margin: 0; padding: 0; }
458
    body {
459
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
460
      background: var(--bg);
461
      color: var(--text);
462
      line-height: 1.6;
463
      padding: 2.5rem 2rem;
464
      min-height: 100vh;
465
      display: flex;
466
      justify-content: center;
467
      transition: background 0.3s, color 0.3s;
468
      -webkit-font-smoothing: antialiased;
469
    }
470
    .container {
471
      max-width: 1400px;
472
      width: 100%;
473
      min-width: 0;
474
    }
475

476
    header {
477
      margin-bottom: 1.75rem;
478
      display: flex;
479
      justify-content: space-between;
480
      align-items: flex-start;
481
      gap: 1rem;
482
    }
483
    .header-content { flex: 1; min-width: 0; }
484
    .badge {
485
      display: inline-block;
486
      font-size: 0.75rem;
487
      font-weight: 600;
488
      color: var(--accent);
489
      background: var(--accent-light);
490
      border: 1px solid var(--border);
491
      padding: 0.22rem 0.7rem;
492
      border-radius: 9999px;
493
      margin-bottom: 0.6rem;
494
    }
495
    .title-wrap {
496
      display: flex;
497
      align-items: center;
498
      gap: 0.75rem;
499
      margin-bottom: 0.4rem;
500
    }
501
    .header-logo {
502
      width: 36px;
503
      height: 36px;
504
      border-radius: 9px;
505
      flex-shrink: 0;
506
    }
507
    h1 {
508
      font-size: 2.1rem;
509
      font-weight: 800;
510
      color: var(--text);
511
      letter-spacing: -0.02em;
512
      line-height: 1.25;
513
    }
514
    .subtitle {
515
      color: var(--text-muted);
516
      font-size: 0.98rem;
517
      line-height: 1.5;
518
    }
519

520
    .theme-toggle-btn {
521
      background: var(--surface);
522
      border: 1px solid var(--border);
523
      color: var(--text);
524
      width: 40px;
525
      height: 40px;
526
      border-radius: 10px;
527
      display: inline-flex;
528
      align-items: center;
529
      justify-content: center;
530
      cursor: pointer;
531
      font-size: 1.15rem;
532
      transition: all 0.2s ease;
533
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
534
      flex-shrink: 0;
535
      margin-top: 4px;
536
    }
537
    .theme-toggle-btn:hover {
538
      background: var(--surface-sub);
539
      border-color: var(--border-sub);
540
      transform: scale(1.05);
541
    }
542

543
    .status-bar {
544
      background: var(--surface);
545
      border: 1px solid var(--border);
546
      border-radius: 12px;
547
      padding: 1.1rem 1.4rem;
548
      margin-bottom: 1.5rem;
549
      display: flex;
550
      justify-content: space-between;
551
      align-items: center;
552
      flex-wrap: wrap;
553
      gap: 12px;
554
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
555
    }
556
    .status-indicator {
557
      display: inline-flex;
558
      align-items: center;
559
      gap: 0.65rem;
560
      font-size: 0.92rem;
561
      font-weight: 600;
562
      color: var(--success);
563
      background: var(--success-bg);
564
      border: 1px solid var(--success-border);
565
      padding: 0.38rem 0.85rem;
566
      border-radius: 8px;
567
    }
568
    .pulse-dot {
569
      width: 8px;
570
      height: 8px;
571
      background-color: var(--success);
572
      border-radius: 50%;
573
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
574
      animation: pulse 2s infinite;
575
      flex-shrink: 0;
576
    }
577
    @keyframes pulse {
578
      0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
579
      70% { transform: scale(1); box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
580
      100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
581
    }
582
    .status-meta {
583
      display: flex;
584
      align-items: center;
585
      gap: 1.5rem;
586
      font-size: 0.88rem;
587
      color: var(--text-muted);
588
    }
589
    .meta-item {
590
      display: inline-flex;
591
      align-items: center;
592
      gap: 0.35rem;
593
      white-space: nowrap;
594
    }
595
    .meta-label { color: var(--text-muted); }
596
    .meta-val {
597
      color: var(--text);
598
      font-weight: 600;
599
      white-space: nowrap;
600
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
601
    }
602

603
    /* Widescreen Multi-Column Grid */
604
    .grid {
605
      display: grid;
606
      grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
607
      gap: 16px;
608
    }
609
    .card {
610
      background: var(--surface);
611
      border: 1px solid var(--border);
612
      border-radius: 12px;
613
      padding: 1.3rem 1.45rem;
614
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
615
      min-width: 0;
616
      display: flex;
617
      flex-direction: column;
618
      justify-content: space-between;
619
    }
620
    .card-header {
621
      display: flex;
622
      justify-content: space-between;
623
      align-items: flex-start;
624
      gap: 0.75rem;
625
      margin-bottom: 0.85rem;
626
    }
627
    .alias-wrap {
628
      display: flex;
629
      flex-direction: column;
630
      gap: 0.2rem;
631
      min-width: 0;
632
      flex: 1;
633
    }
634
    .alias {
635
      font-size: 1.12rem;
636
      font-weight: 700;
637
      color: var(--text);
638
      line-height: 1.3;
639
    }
640
    .repo-sub {
641
      font-size: 0.82rem;
642
      color: var(--text-muted);
643
      word-break: break-all;
644
      line-height: 1.35;
645
    }
646
    .repo-link {
647
      font-size: 0.78rem;
648
      color: var(--accent);
649
      text-decoration: none;
650
      background: var(--accent-light);
651
      padding: 0.25rem 0.6rem;
652
      border-radius: 6px;
653
      font-weight: 500;
654
      flex-shrink: 0;
655
      white-space: nowrap;
656
      margin-top: 2px;
657
      transition: all 0.2s;
658
    }
659
    .repo-link:hover { opacity: 0.85; }
660

661
    .tag {
662
      padding: 0.75rem 0.9rem;
663
      border-radius: 8px;
664
      font-size: 0.86rem;
665
      margin-top: 6px;
666
      background: var(--surface-sub);
667
      border: 1px solid var(--border);
668
      display: flex;
669
      flex-direction: column;
670
      gap: 5px;
671
    }
672
    .tag-top {
673
      display: flex;
674
      align-items: center;
675
      justify-content: space-between;
676
      gap: 0.5rem;
677
      flex-wrap: wrap;
678
    }
679
    .tag-left {
680
      display: inline-flex;
681
      align-items: center;
682
      gap: 0.45rem;
683
      flex-wrap: wrap;
684
    }
685
    .type-badge {
686
      font-size: 0.72rem;
687
      font-weight: 600;
688
      padding: 0.15rem 0.45rem;
689
      border-radius: 4px;
690
      flex-shrink: 0;
691
    }
692
    .commit-badge { background: var(--accent-light); color: var(--accent); }
693
    .release-badge { background: var(--success-bg); color: var(--success); }
694
    code {
695
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
696
      background: var(--surface);
697
      padding: 2px 6px;
698
      border-radius: 4px;
699
      border: 1px solid var(--border);
700
      color: var(--text);
701
      font-weight: 600;
702
      font-size: 0.84rem;
703
      word-break: break-all;
704
    }
705
    .tag-time {
706
      font-size: 0.78rem;
707
      color: var(--text-muted);
708
      white-space: nowrap;
709
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
710
    }
711
    .desc {
712
      color: var(--text-muted);
713
      font-size: 0.84rem;
714
      line-height: 1.45;
715
      word-break: break-word;
716
    }
717

718
    footer {
719
      text-align: center;
720
      margin-top: 3rem;
721
      color: var(--text-muted);
722
      font-size: 0.85rem;
723
    }
724

725
    @media (max-width: 640px) {
726
      body { padding: 1.2rem 0.85rem; }
727
      .container { max-width: 100%; }
728
      h1 { font-size: 1.45rem; }
729
      .header-logo { width: 28px; height: 28px; }
730
      .subtitle { font-size: 0.86rem; }
731
      .grid { grid-template-columns: 1fr; gap: 10px; }
732
      .card { padding: 1rem 0.9rem; border-radius: 10px; }
733
      .status-bar {
734
        padding: 0.85rem 0.95rem;
735
        flex-direction: column;
736
        align-items: stretch;
737
        gap: 8px;
738
        border-radius: 10px;
739
      }
740
      .status-indicator { width: 100%; justify-content: flex-start; }
741
      .status-meta {
742
        width: 100%;
743
        display: flex;
744
        flex-direction: column;
745
        gap: 5px;
746
        padding-top: 7px;
747
        border-top: 1px dashed var(--border);
748
      }
749
      .meta-item {
750
        display: flex;
751
        justify-content: space-between;
752
        align-items: center;
753
        width: 100%;
754
        font-size: 0.82rem;
755
      }
756
      .tag-top {
757
        flex-direction: column;
758
        align-items: flex-start;
759
        gap: 3px;
760
      }
761
      .tag-time {
762
        font-size: 0.74rem;
763
        color: var(--text-muted);
764
      }
765
    }
766
  </style>
767
</head>
768
<body>
769
  <div class="container">
770
    <header>
771
      <div class="header-content">
772
        <div class="badge">Serverless Multi-Repo Watcher</div>
773
        <div class="title-wrap">
774
          <img src="/favicon.ico" class="header-logo" alt="Logo" />
775
          <h1>GitHub 仓库监控网关</h1>
776
        </div>
777
        <p class="subtitle">Cloudflare Worker 边缘定时调度 · 自动检测 Commits 与 Releases 更新并推送</p>
778
      </div>
779
      <button class="theme-toggle-btn" id="themeToggle" onclick="toggleTheme()" title="切换明亮/暗色模式">🌙</button>
780
    </header>
781

782
    <div class="status-bar">
783
      <div class="status-indicator">
784
        <div class="pulse-dot"></div>
785
        <span>● 监控服务运行正常</span>
786
      </div>
787
      <div class="status-meta">
788
        <div class="meta-item">
789
          <span class="meta-label">上次自动巡检：</span>
790
          <span class="meta-val">${lastCheckTime}</span>
791
        </div>
792
        <div class="meta-item">
793
          <span class="meta-label">巡检调度周期：</span>
794
          <span class="meta-val">每 6 小时</span>
795
        </div>
796
      </div>
797
    </div>
798

799
    <div class="grid">
800
      ${reposHtml}
801
    </div>
802

803
    <footer>
804
      Powered by Cloudflare Workers & KV Storage · 零服务器常驻
805
    </footer>
806
  </div>
807

808
  <script>
809
    function initTheme() {
810
      const saved = localStorage.getItem('theme');
811
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
812
      if (saved === 'dark' || (!saved && prefersDark)) {
813
        document.documentElement.setAttribute('data-theme', 'dark');
814
        updateThemeBtn(true);
815
      } else {
816
        document.documentElement.setAttribute('data-theme', 'light');
817
        updateThemeBtn(false);
818
      }
819
    }
820
    function toggleTheme() {
821
      const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
822
      const next = isDark ? 'light' : 'dark';
823
      document.documentElement.setAttribute('data-theme', next);
824
      localStorage.setItem('theme', next);
825
      updateThemeBtn(!isDark);
826
    }
827
    function updateThemeBtn(isDark) {
828
      const btn = document.getElementById('themeToggle');
829
      if (btn) btn.innerHTML = isDark ? '☀️' : '🌙';
830
    }
831
    initTheme();
832
  </script>
833
</body>
834
</html>`;
835

836
  return new Response(html, {
837
    headers: { "Content-Type": "text/html; charset=utf-8" }
838
  });
839
}

总结#

将 GitHub 仓库监控迁移到 Cloudflare Worker + KV 架构后：

彻底摆脱 VPS：不仅节约服务器常驻内存和进程守护，即使 VPS 维护重启也不会漏掉任何发版提醒；
零成本与高可用：每天触发几十次检查，远低于 Cloudflare 免费配额（10 万次/天）；
视觉与体验双提升：现代温润护眼看板让监控状态一目了然，调用检测方便快捷。