!doctype html
html lang=zh-CN
head
meta charset=utf-8
meta name=viewport content=width=device-width,initial-scale=1,viewport-fit=cover
title待办提醒 · 自检title
style
  root{--bg#fbfbfd;--fg#1c1c1e;--muted#8e8e93;--card#fff;--line#e5e5ea;--ok#0a9d58;--bad#d70015}
  @media (prefers-color-schemedark){root{--bg#000;--fg#f2f2f7;--muted#8e8e93;--card#1c1c1e;--line#2c2c2e}}
  {box-sizingborder-box}
  html,body{margin0;height100%}
  body{backgroundvar(--bg);colorvar(--fg);
    font16px1.6 -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;
    displayflex;align-itemscenter;justify-contentcenter;padding24px;-webkit-font-smoothingantialiased}
  main{width100%;max-width420px}
  h1{font-size20px;font-weight600;margin0 0 4px}
  p.sub{colorvar(--muted);font-size13px;margin0 0 20px}
  .card{backgroundvar(--card);border1px solid var(--line);border-radius14px;padding16px}
  .row{displayflex;justify-contentspace-between;gap12px;padding8px 0;font-size14px}
  .row+.row{border-top1px solid var(--line)}
  .k{colorvar(--muted)}
  .v{font-variant-numerictabular-nums;text-alignright;word-breakbreak-all}
  .ok{colorvar(--ok)}.bad{colorvar(--bad)}
style
head
body
main
  h1待办提醒 · 自检h1
  p class=sub这一页只验证页面能打开 + 接口能调用，不是最终界面。p
  div class=card
    div class=rowspan class=k页面spanspan class=v ok已加载spandiv
    div class=rowspan class=k接口 apipingspanspan class=v id=api检测中…spandiv
    div class=rowspan class=k当前时间spanspan class=v id=now—spandiv
  div
  p class=sub style=margin-top16px两项都是绿色，就说明部署链路完整。p
main
script
  document.getElementById('now').textContent = new Date().toLocaleString('zh-CN');
  var el = document.getElementById('api');
  fetch('apiping', { cache 'no-store' })
    .then(function (r) { return r.ok  r.json()  Promise.reject('HTTP ' + r.status); })
    .then(function (d) { el.textContent = '正常 · ' + d.runtime; el.className = 'v ok'; })
    .catch(function (e) { el.textContent = '失败 · ' + e; el.className = 'v bad'; });
script
body
html