paseo-req-kit 1.14.0-beta.2 → 1.14.0-beta.4

package/engine/src/review-assets/check.css

@@ -0,0 +1,57 @@
+:root {
+  --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f1f3f6; --text: #1c2430; --muted: #5d6b7c; --border: #dfe3e9;
+  --accent: #2457d6; --accent-text: #ffffff; --accent-soft: #e8eefc; --ok: #15803d; --ok-soft: #e7f6ec; --danger: #b91c1c; --danger-soft: #fdecec; --warn: #b45309; --warn-soft: #fdf3e2;
+  color-scheme: light;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #12161c; --surface: #1a2029; --surface-2: #222a35; --text: #e6eaf0; --muted: #9aa7b8; --border: #2e3846;
+    --accent: #6f9bff; --accent-text: #0d1420; --accent-soft: #1f2c47; --ok: #4ade80; --ok-soft: #173322; --danger: #f87171; --danger-soft: #3a1c1c; --warn: #fbbf24; --warn-soft: #3a2c12;
+    color-scheme: dark;
+  }
+}
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; padding-bottom: 96px; }
+.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 24px 8px; flex-wrap: wrap; }
+.eyebrow { font-size: 13px; color: var(--muted); }
+h1 { margin: 2px 0 4px; font-size: 22px; }
+.muted { color: var(--muted); }
+main { padding: 0 24px; max-width: 980px; }
+.intro { margin: 8px 0 16px; }
+.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin: 12px 0; }
+.notes h2, .card h2 { font-size: 15px; margin: 0 0 6px; }
+.notes ul { margin: 0; padding-left: 20px; }
+.items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
+.item { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 12px; padding: 14px 16px; }
+.item.pass { border-left-color: var(--ok); }
+.item.fail { border-left-color: var(--danger); }
+.item.skip { border-left-color: var(--warn); }
+.item-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
+.id { font-weight: 700; font-variant-numeric: tabular-nums; }
+.item-title { font-weight: 600; }
+.badge { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
+.badge.fail { background: var(--danger-soft); color: var(--danger); }
+.badge.unverified { background: var(--warn-soft); color: var(--warn); }
+.badge.pass { background: var(--ok-soft); color: var(--ok); }
+.details { margin: 8px 0 0; padding-left: 18px; }
+.details li { margin: 2px 0; }
+.evidence { font-size: 13px; color: var(--muted); margin-top: 6px; }
+.marks { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
+.btn { font: inherit; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: 6px 14px; cursor: pointer; min-height: 36px; }
+.btn:hover { border-color: var(--accent); }
+.btn:disabled { opacity: 0.5; cursor: default; }
+.btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
+.btn.on-pass { background: var(--ok); color: #fff; border-color: var(--ok); }
+.btn.on-fail { background: var(--danger); color: #fff; border-color: var(--danger); }
+.btn.on-skip { background: var(--warn); color: #fff; border-color: var(--warn); }
+textarea { width: 100%; margin-top: 8px; font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px; min-height: 64px; }
+.bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 16px; padding: 12px 24px; background: var(--surface); border-top: 1px solid var(--border); flex-wrap: wrap; }
+.summary { flex: 1; min-width: 200px; }
+.reviewer input { font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; width: 160px; }
+.toast { position: fixed; right: 24px; bottom: 84px; background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 10px; max-width: 520px; white-space: pre-line; }
+.services a { color: var(--accent); }
+pre.howto { white-space: pre-wrap; font: inherit; margin: 6px 0 0; }
+.done { background: var(--ok-soft); border-color: var(--ok); }
+
+@media (max-width: 640px) { body { padding-bottom: 200px; } }

package/engine/src/review-assets/check.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>验收清单</title>
+<link rel="stylesheet" href="check.css">
+</head>
+<body>
+<header class="top">
+  <div>
+    <div class="eyebrow" id="project"></div>
+    <h1 id="title">验收清单</h1>
+    <div class="muted" id="sub"></div>
+  </div>
+  <div class="top-actions">
+    <button id="try" class="btn">把它跑起来试用</button>
+    <button id="try-stop" class="btn" hidden>停止试用</button>
+  </div>
+</header>
+<main>
+  <section id="try-box" class="card" hidden></section>
+  <section id="notes" class="card notes" hidden></section>
+  <p class="muted intro">一条一条看：照着"前置条件"准备，按"操作"去做，看到的和"预期结果"一样就点<b>通过</b>；不一样点<b>不对</b>，写下看到了什么。流水线没验证或没通过的排在最前面。进度会自动保存。</p>
+  <ol id="items" class="items"></ol>
+</main>
+<footer class="bar">
+  <div class="summary" id="summary"></div>
+  <label class="reviewer">验收人 <input id="reviewer" placeholder="你的名字（可不填）" maxlength="60"></label>
+  <button id="submit" class="btn primary" disabled>提交验收结果</button>
+</footer>
+<div id="toast" class="toast" hidden></div>
+<script src="check.js"></script>
+</body>
+</html>

package/engine/src/review-assets/check.js

@@ -0,0 +1,258 @@
+// The acceptance checklist page (1.14). Plain script, no framework: the server serves it next to
+// its JSON API (api/info, api/draft, api/try, api/submit).
+(function () {
+  "use strict";
+  var state = { info: null, answers: {}, reviewer: "", saveTimer: null, busy: false };
+  var $ = function (id) {
+    return document.getElementById(id);
+  };
+
+  function el(tag, attrs, children) {
+    var node = document.createElement(tag);
+    Object.keys(attrs || {}).forEach(function (k) {
+      if (attrs[k] === null || attrs[k] === undefined) return;
+      if (k === "text") node.textContent = attrs[k];
+      else if (k === "className") node.className = attrs[k];
+      else if (k.indexOf("on") === 0) node.addEventListener(k.slice(2), attrs[k]);
+      else node.setAttribute(k, attrs[k]);
+    });
+    (children || []).forEach(function (c) {
+      if (c) node.appendChild(typeof c === "string" ? document.createTextNode(c) : c);
+    });
+    return node;
+  }
+
+  function toast(text) {
+    var t = $("toast");
+    t.textContent = text;
+    t.hidden = false;
+    clearTimeout(toast.timer);
+    toast.timer = setTimeout(function () {
+      t.hidden = true;
+    }, 6000);
+  }
+
+  function api(pathname, method, body) {
+    return fetch(pathname, { method: method || "GET", headers: body ? { "content-type": "application/json" } : {}, body: body ? JSON.stringify(body) : undefined }).then(function (r) {
+      return r.json().then(function (data) {
+        if (!r.ok && data && data.message) throw new Error(data.message);
+        return data;
+      });
+    });
+  }
+
+  var PIPELINE = { pass: ["流水线：通过", "pass"], fail: ["流水线：没通过", "fail"], unverified: ["流水线：没验证", "unverified"], unknown: ["流水线：没有记录", ""] };
+
+  function answersList() {
+    return Object.keys(state.answers).map(function (id) {
+      return { id: id, mark: state.answers[id].mark, note: state.answers[id].note || "" };
+    });
+  }
+
+  function save() {
+    if (state.info.readOnly) return;
+    clearTimeout(state.saveTimer);
+    state.saveTimer = setTimeout(function () {
+      api("api/draft", "PUT", { answers: answersList(), reviewer: state.reviewer }).catch(function () {});
+    }, 600);
+  }
+
+  function summary() {
+    var items = state.info.items;
+    var c = { pass: 0, fail: 0, skip: 0, open: 0 };
+    var missing = 0;
+    var failedRequired = 0;
+    items.forEach(function (i) {
+      var a = state.answers[i.id];
+      if (!a) c.open++;
+      else c[a.mark]++;
+      if (i.required && (!a || a.mark === "skip")) missing++;
+      if (i.required && a && a.mark === "fail") failedRequired++;
+    });
+    var verdict = failedRequired > 0 ? "不通过" : missing === 0 ? "通过" : null;
+    $("summary").textContent =
+      "共 " + items.length + " 条：通过 " + c.pass + "，不对 " + c.fail + "，先不验 " + c.skip + "，还没看 " + c.open + "。" +
+      (verdict === "通过" ? "可以提交：验收通过。" : verdict === "不通过" ? "提交后结论是“不通过”，不对的地方会转给需求的对话。" : "必须验的都核对完才能提交“通过”。");
+    $("submit").disabled = state.info.readOnly || state.busy || verdict === null;
+    $("submit").textContent = verdict === "不通过" ? "提交：验收不通过" : "提交：验收通过";
+  }
+
+  function renderItem(item, n) {
+    var a = state.answers[item.id];
+    var li = el("li", { className: "item" + (a ? " " + a.mark : "") });
+    var p = PIPELINE[item.pipeline] || PIPELINE.unknown;
+    li.appendChild(
+      el("div", { className: "item-head" }, [
+        el("span", { className: "id", text: n + ". " + item.id }),
+        el("span", { className: "item-title", text: item.title }),
+        item.kind === "criterion" ? el("span", { className: "badge " + p[1], text: p[0] }) : el("span", { className: "badge unverified", text: "请你表态" }),
+        item.required ? null : el("span", { className: "badge", text: "可以以后再说" }),
+      ]),
+    );
+    if (item.details.length) {
+      li.appendChild(
+        el(
+          "ul",
+          { className: "details" },
+          item.details.map(function (d) {
+            return el("li", { text: d });
+          }),
+        ),
+      );
+    }
+    if (item.evidence) li.appendChild(el("div", { className: "evidence", text: "流水线的记录：" + item.evidence }));
+    var labels = item.kind === "decision" ? [["pass", "同意"], ["fail", "不同意"], ["skip", "先不表态"]] : [["pass", "通过"], ["fail", "不对"], ["skip", "先不验"]];
+    var marks = el(
+      "div",
+      { className: "marks" },
+      labels.map(function (l) {
+        return el("button", {
+          className: "btn" + (a && a.mark === l[0] ? " on-" + l[0] : ""),
+          text: l[1],
+          disabled: state.info.readOnly ? "disabled" : null,
+          onclick: function () {
+            var cur = state.answers[item.id];
+            state.answers[item.id] = { mark: l[0], note: cur ? cur.note : "" };
+            save();
+            render();
+          },
+        });
+      }),
+    );
+    if (state.info.readOnly) marks.querySelectorAll("button").forEach(function (b) {
+      b.disabled = true;
+    });
+    li.appendChild(marks);
+    if (a && a.mark === "fail") {
+      var ta = el("textarea", { placeholder: item.kind === "decision" ? "为什么不同意？希望怎样？" : "看到了什么？应该是什么样？（例如：点导出后提示“失败”，应该下载文件）" });
+      ta.value = a.note || "";
+      ta.addEventListener("input", function () {
+        state.answers[item.id].note = ta.value;
+        save();
+      });
+      li.appendChild(ta);
+    }
+    return li;
+  }
+
+  function render() {
+    var list = $("items");
+    list.innerHTML = "";
+    state.info.items.forEach(function (item, i) {
+      list.appendChild(renderItem(item, i + 1));
+    });
+    summary();
+  }
+
+  function showTry(result) {
+    var box = $("try-box");
+    box.hidden = false;
+    box.innerHTML = "";
+    box.appendChild(el("h2", { text: result.ok ? "已经跑起来了" : "没能一键跑起来" }));
+    box.appendChild(el("div", { text: (result.message || "").split("\n")[0] }));
+    var running = (result.services || []).filter(function (s) {
+      return s.running && s.url;
+    });
+    if (running.length) {
+      box.appendChild(
+        el(
+          "ul",
+          { className: "services" },
+          running.map(function (s) {
+            return el("li", {}, [s.name + "：", el("a", { href: s.url, target: "_blank", rel: "noopener", text: s.url })]);
+          }),
+        ),
+      );
+      $("try-stop").hidden = false;
+    }
+    if (result.howTo && result.howTo.length) box.appendChild(el("pre", { className: "howto", text: result.howTo.join("\n") }));
+  }
+
+  function tryIt(stop) {
+    var button = stop ? $("try-stop") : $("try");
+    button.disabled = true;
+    button.textContent = stop ? "正在停止…" : "正在启动，可能要一两分钟…";
+    api("api/try", "POST", { stop: !!stop })
+      .then(function (r) {
+        if (stop) {
+          toast(r.message);
+          $("try-stop").hidden = true;
+          $("try-box").hidden = true;
+        } else showTry(r);
+      })
+      .catch(function (e) {
+        toast(e.message);
+      })
+      .then(function () {
+        button.disabled = false;
+        button.textContent = stop ? "停止试用" : "把它跑起来试用";
+      });
+  }
+
+  function submit() {
+    state.busy = true;
+    summary();
+    api("api/submit", "POST", { answers: answersList(), reviewer: state.reviewer })
+      .then(function (r) {
+        toast(r.message);
+        var done = el("section", { className: "card done" }, [el("h2", { text: "已提交：验收" + r.verdict }), el("div", { text: r.message })]);
+        document.querySelector("main").insertBefore(done, document.querySelector("main").firstChild);
+        window.scrollTo(0, 0);
+      })
+      .catch(function (e) {
+        toast(e.message);
+        state.busy = false;
+        summary();
+      });
+  }
+
+  function start() {
+    api("api/info").then(function (info) {
+      state.info = info;
+      document.title = "验收清单：" + info.title;
+      $("title").textContent = "验收清单：" + info.title;
+      $("project").textContent = info.project + " · " + info.featureDir;
+      $("sub").textContent = [info.reportVerdict ? "流水线结论：" + info.reportVerdict : null, info.accepted ? "上次验收：" + info.accepted : null, info.readOnly ? "只读：可以看，不能提交" : null]
+        .filter(Boolean)
+        .join("　");
+      (info.draft && info.draft.answers ? info.draft.answers : []).forEach(function (a) {
+        state.answers[a.id] = { mark: a.mark, note: a.note || "" };
+      });
+      state.reviewer = (info.draft && info.draft.reviewer) || "";
+      $("reviewer").value = state.reviewer;
+      if (info.notes && info.notes.length) {
+        var n = $("notes");
+        n.hidden = false;
+        n.appendChild(el("h2", { text: "先看一下（来自提测说明）" }));
+        n.appendChild(
+          el(
+            "ul",
+            {},
+            info.notes.map(function (t) {
+              return el("li", { text: t });
+            }),
+          ),
+        );
+      }
+      if (info.readOnly || info.running) $("try").hidden = true;
+      if (!info.items.length) $("items").appendChild(el("li", { className: "item", text: "需求说明里没有找到验收标准（AC-编号）。" }));
+      render();
+    }).catch(function (e) {
+      $("title").textContent = "打不开验收清单";
+      $("sub").textContent = e.message;
+    });
+    $("reviewer").addEventListener("input", function (e) {
+      state.reviewer = e.target.value;
+      save();
+    });
+    $("try").addEventListener("click", function () {
+      tryIt(false);
+    });
+    $("try-stop").addEventListener("click", function () {
+      tryIt(true);
+    });
+    $("submit").addEventListener("click", submit);
+  }
+
+  start();
+})();

package/engine/src/review-assets/code.css

@@ -0,0 +1,93 @@
+:root {
+  --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f1f3f6; --text: #1c2430; --muted: #5d6b7c; --border: #dfe3e9;
+  --accent: #2457d6; --accent-text: #ffffff; --ok: #15803d; --ok-soft: #e7f6ec; --danger: #b91c1c; --danger-soft: #fdecec; --warn: #b45309; --warn-soft: #fdf3e2;
+  --add: #e6f6ea; --del: #fdecec; --flash: #fff4c2;
+  color-scheme: light;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #12161c; --surface: #1a2029; --surface-2: #222a35; --text: #e6eaf0; --muted: #9aa7b8; --border: #2e3846;
+    --accent: #6f9bff; --accent-text: #0d1420; --ok: #4ade80; --ok-soft: #173322; --danger: #f87171; --danger-soft: #3a1c1c; --warn: #fbbf24; --warn-soft: #3a2c12;
+    --add: #15301f; --del: #3a1c1c; --flash: #4a3f12;
+    color-scheme: dark;
+  }
+}
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; padding-bottom: 110px; }
+.top { padding: 20px 24px 8px; }
+.eyebrow { font-size: 13px; color: var(--muted); }
+h1 { margin: 2px 0 4px; font-size: 22px; }
+h2 { font-size: 15px; margin: 0 0 6px; }
+.muted { color: var(--muted); }
+.small { font-size: 13px; }
+.pad { padding: 8px 12px; }
+.banner { margin: 8px 24px; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
+.banner.ok { background: var(--ok-soft); border-color: var(--ok); }
+.banner.warn { background: var(--warn-soft); border-color: var(--warn); }
+.layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; padding: 0 24px; }
+.files { position: sticky; top: 8px; align-self: start; max-height: calc(100vh - 140px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px; font-size: 13px; }
+.nav-title { font-weight: 600; margin-bottom: 6px; }
+.files a { display: flex; justify-content: space-between; gap: 6px; padding: 4px 6px; border-radius: 6px; color: var(--text); text-decoration: none; word-break: break-all; }
+.files a:hover { background: var(--surface-2); }
+.files a.doc { color: var(--muted); }
+main { min-width: 0; }
+.intro { margin: 8px 0 12px; }
+.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin: 0 0 12px; }
+.badge { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
+.badge.danger { background: var(--danger-soft); color: var(--danger); }
+.badge.warn { background: var(--warn-soft); color: var(--warn); }
+.badge.ok { background: var(--ok-soft); color: var(--ok); }
+.file { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
+.file-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; background: var(--surface-2); cursor: pointer; border-bottom: 1px solid var(--border); }
+.file.folded .file-body { display: none; }
+.file.folded .file-head { border-bottom: 0; }
+.path { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-weight: 600; word-break: break-all; }
+.plus { color: var(--ok); font-size: 13px; }
+.minus { color: var(--danger); font-size: 13px; }
+.file-body { overflow-x: auto; }
+table.diff { border-collapse: collapse; width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; }
+.diff td { padding: 0 8px; vertical-align: top; }
+.diff .num { width: 1%; min-width: 44px; text-align: right; color: var(--muted); user-select: none; }
+.diff .code { white-space: pre; }
+.diff .hunk td { color: var(--muted); background: var(--surface-2); padding: 2px 8px; }
+.diff .line { cursor: pointer; }
+.diff .line:hover td { outline: 1px solid var(--border); }
+.diff .add td { background: var(--add); }
+.diff .del td { background: var(--del); }
+.diff .flash td, .flash { background: var(--flash) !important; }
+.finding { border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 6px 0; background: var(--surface); font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; white-space: normal; }
+.finding.danger { border-left-color: var(--danger); }
+.finding.warn { border-left-color: var(--warn); }
+.finding.decided-ok { opacity: 0.6; }
+.finding-row td, .comment-row td { padding: 4px 12px 8px; }
+.finding-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.finding-text { margin: 4px 0; }
+.where { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--accent); }
+.marks { display: flex; gap: 8px; margin-top: 6px; }
+.comment { border: 1px solid var(--accent); border-radius: 8px; padding: 8px 10px; background: var(--surface); font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
+textarea, input { font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; width: 100%; }
+.note-input { margin-top: 6px; }
+.btn { font: inherit; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: 6px 14px; cursor: pointer; }
+.btn.small { padding: 2px 10px; font-size: 13px; }
+.btn.on-fix { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
+.btn.on-ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
+.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
+.btn.danger { border-color: var(--danger); color: var(--danger); }
+.btn:disabled { opacity: 0.5; cursor: default; }
+.bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 10px 24px; background: var(--surface); border-top: 1px solid var(--border); }
+.bar .summary { flex: 1 1 240px; font-size: 13px; }
+.field { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
+.field input { width: 200px; }
+.actions { display: flex; gap: 8px; }
+.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); max-width: min(640px, 92vw); background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.2); white-space: pre-line; }
+@media (max-width: 860px) {
+  .layout { grid-template-columns: minmax(0, 1fr); padding: 0 12px; }
+  .files { position: static; max-height: 220px; }
+  .top { padding: 16px 12px 6px; }
+  .banner { margin: 8px 12px; }
+  .bar { padding: 10px 12px; }
+  .field { flex: 1 1 100%; }
+  .field input { width: 100%; }
+  body { padding-bottom: 220px; }
+}

package/engine/src/review-assets/code.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>代码审查</title>
+<link rel="stylesheet" href="code.css">
+</head>
+<body>
+<header class="top">
+  <div>
+    <div class="eyebrow" id="project"></div>
+    <h1 id="title">代码审查</h1>
+    <div class="muted" id="sub"></div>
+  </div>
+</header>
+<section id="status" class="banner" hidden></section>
+<div class="layout">
+  <nav class="files" id="files" aria-label="改动的文件"></nav>
+  <main>
+    <section id="summary" class="card" hidden></section>
+    <section id="ai" class="card" hidden></section>
+    <p class="muted intro">点代码行写意见（只对这一行）；AI 的意见可以标<b>要改</b>或<b>不用改</b>。看完在下面选择<b>退回修改</b>（流水线会按意见改，改完再评审、再验证）或<b>评审通过</b>。进度会自动保存。</p>
+    <div id="diffs"></div>
+    <section class="card">
+      <h2>总体意见（可不填）</h2>
+      <textarea id="note" rows="3" placeholder="例如：整体可以，但导出接口要加权限校验"></textarea>
+    </section>
+  </main>
+</div>
+<footer class="bar">
+  <div class="summary" id="count"></div>
+  <label class="field">审核人 <input id="reviewers" placeholder="@用户名，用逗号分开"></label>
+  <label class="field">评审人 <input id="reviewer" placeholder="你的名字" maxlength="60"></label>
+  <div class="actions">
+    <button id="changes" class="btn danger" disabled>退回修改</button>
+    <button id="approve" class="btn primary" disabled>评审通过</button>
+  </div>
+</footer>
+<div id="toast" class="toast" hidden></div>
+<script src="code.js"></script>
+</body>
+</html>