paseo-req-kit 1.14.0 → 1.15.0-beta.1

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

@@ -1,16 +1,19 @@
-// 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).
+// The acceptance checklist page (1.14; design system 1.15). 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);
   };
+  var icon = function (name, cls) {
+    return window.RkIcon ? window.RkIcon(name, cls) : null;
+  };
 
   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 (attrs[k] === null || attrs[k] === undefined || attrs[k] === false) 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]);
@@ -22,6 +25,10 @@
     return node;
   }
 
+  function badge(kind, iconName, text) {
+    return el("span", { className: "rk-badge rk-badge--" + kind }, [iconName ? icon(iconName) : null, text]);
+  }
+
   function toast(text) {
     var t = $("toast");
     t.textContent = text;
@@ -41,7 +48,14 @@
     });
   }
 
-  var PIPELINE = { pass: ["流水线：通过", "pass"], fail: ["流水线：没通过", "fail"], unverified: ["流水线：没验证", "unverified"], unknown: ["流水线：没有记录", ""] };
+  // What the pipeline found for each criterion: badge kind, icon, words.
+  var PIPELINE = { pass: ["success", "circle-check", "流水线已验证"], fail: ["failed", "circle-x", "流水线没通过"], unverified: ["muted", "circle-dashed", "流水线没验证"], unknown: ["muted", "circle-dashed", "流水线没有记录"] };
+  var DETAIL = /^(前置条件|操作|预期结果|预期)[:：]\s*(.*)$/;
+
+  function hhmm() {
+    var d = new Date();
+    return (d.getHours() < 10 ? "0" : "") + d.getHours() + ":" + (d.getMinutes() < 10 ? "0" : "") + d.getMinutes();
+  }
 
   function answersList() {
     return Object.keys(state.answers).map(function (id) {
@@ -53,7 +67,13 @@
     if (state.info.readOnly) return;
     clearTimeout(state.saveTimer);
     state.saveTimer = setTimeout(function () {
-      api("api/draft", "PUT", { answers: answersList(), reviewer: state.reviewer }).catch(function () {});
+      api("api/draft", "PUT", { answers: answersList(), reviewer: state.reviewer })
+        .then(function () {
+          $("saved").textContent = "已自动保存 " + hhmm();
+        })
+        .catch(function () {
+          $("saved").textContent = "没保存上，网络恢复后再改一下会重试";
+        });
     }, 600);
   }
 
@@ -70,44 +90,55 @@
       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 === "不通过" ? "提交后结论是“不通过”，不对的地方会转给需求的对话。" : "必须验的都核对完才能提交“通过”。");
+    $("summary").textContent = "已核对 " + (c.pass + c.fail) + " / " + items.length + (c.fail ? " · " + c.fail + " 项不对" : "") + (c.skip ? " · 先不验 " + c.skip : "");
+    $("summary-sub").textContent = state.info.readOnly
+      ? "这是只读链接，只能查看"
+      : verdict === "通过"
+        ? "可以提交：验收通过"
+        : verdict === "不通过"
+          ? "提交后结论是“不通过”，不对的地方会转给需求的对话处理"
+          : "还有 " + missing + " 条必须验的没有核对；核对完，或者有不对的标“不对”后才能提交";
     $("submit").disabled = state.info.readOnly || state.busy || verdict === null;
-    $("submit").textContent = verdict === "不通过" ? "提交：验收不通过" : "提交：验收通过";
+    $("submit").lastChild.textContent = verdict === "不通过" ? "提交验收（不通过）" : "提交验收";
+  }
+
+  function details(item) {
+    var rows = [];
+    var rest = [];
+    item.details.forEach(function (d) {
+      var m = DETAIL.exec(d.replace(/^\s*[-*]\s+/, ""));
+      if (m) rows.push(el("dt", { text: m[1] === "预期" ? "预期结果" : m[1] }), el("dd", { text: m[2] }));
+      else rest.push(el("li", { text: d.replace(/^\s*[-*]\s+/, "") }));
+    });
+    return [rows.length ? el("dl", {}, rows) : null, rest.length ? el("ul", { className: "ck-details" }, rest) : null];
   }
 
-  function renderItem(item, n) {
+  function renderItem(item) {
     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: "可以以后再说" }),
+    var li = el("li", { className: "rk-check" + (a && a.mark === "fail" ? " is-fail" : a && a.mark === "pass" ? " is-pass" : ""), id: "item-" + item.id });
+    li.appendChild(el("span", { className: "rk-check__id", text: item.id }));
+    var main = el("div", { className: "rk-check__main" });
+    main.appendChild(
+      el("div", { className: "rk-check__title" }, [
+        el("span", { text: item.title }),
+        item.kind === "criterion" ? badge(p[0], p[1], p[2]) : badge("needs", "circle-dot", "请你表态"),
+        item.required ? null : badge("outline", null, "可以以后再说"),
       ]),
     );
-    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(
+    details(item).forEach(function (n) {
+      if (n) main.appendChild(n);
+    });
+    if (item.evidence) main.appendChild(el("div", { className: "rk-check__evidence", text: (item.kind === "criterion" ? "流水线的记录：" : "") + item.evidence }));
+    var labels = item.kind === "decision" ? [["pass", "同意", "is-pass"], ["fail", "不同意", "is-fix"], ["skip", "先不表态", ""]] : [["pass", "通过", "is-pass"], ["fail", "不对", "is-fix"], ["skip", "先不验", ""]];
+    var seg = el(
       "div",
-      { className: "marks" },
+      { className: "rk-seg", role: "group", "aria-label": item.kind === "decision" ? "表态" : "核对结果", style: "align-self:flex-start" },
       labels.map(function (l) {
         return el("button", {
-          className: "btn" + (a && a.mark === l[0] ? " on-" + l[0] : ""),
+          type: "button",
+          className: l[2],
+          "aria-pressed": String(!!(a && a.mark === l[0])),
           text: l[1],
           disabled: state.info.readOnly ? "disabled" : null,
           onclick: function () {
@@ -115,49 +146,94 @@
             state.answers[item.id] = { mark: l[0], note: cur ? cur.note : "" };
             save();
             render();
+            if (l[0] === "fail") setTimeout(function () {
+              var t = document.querySelector("#item-" + CSS.escape(item.id) + " textarea");
+              if (t && !t.value) t.focus();
+            });
           },
         });
       }),
     );
-    if (state.info.readOnly) marks.querySelectorAll("button").forEach(function (b) {
-      b.disabled = true;
-    });
-    li.appendChild(marks);
+    main.appendChild(seg);
     if (a && a.mark === "fail") {
-      var ta = el("textarea", { placeholder: item.kind === "decision" ? "为什么不同意？希望怎样？" : "看到了什么？应该是什么样？（例如：点导出后提示“失败”，应该下载文件）" });
+      var ta = el("textarea", { className: "rk-input", rows: "2", "aria-label": "看到了什么", placeholder: item.kind === "decision" ? "为什么不同意？希望怎样？" : "看到了什么？应该是什么样？（例如：点导出后提示“失败”，应该下载文件）" });
       ta.value = a.note || "";
+      ta.disabled = !!state.info.readOnly;
       ta.addEventListener("input", function () {
         state.answers[item.id].note = ta.value;
         save();
       });
-      li.appendChild(ta);
+      main.appendChild(ta);
     }
+    li.appendChild(main);
     return li;
   }
 
+  function navIcon(item) {
+    var a = state.answers[item.id];
+    if (a && a.mark === "pass") return ["circle-check", "var(--rk-status-success)"];
+    if (a && a.mark === "fail") return ["circle-x", "var(--rk-status-failed)"];
+    if (item.kind === "decision") return ["circle-dot", "var(--rk-brand-text)"];
+    if (item.pipeline === "fail") return ["circle-x", "var(--rk-status-failed)"];
+    if (item.pipeline === "pass") return ["circle-check", "var(--rk-text-muted)"];
+    return ["circle-dashed", "var(--rk-text-muted)"];
+  }
+
+  function renderNav() {
+    var nav = $("nav");
+    nav.textContent = "";
+    var first = state.info.items.filter(function (i) {
+      return i.kind === "decision" || i.pipeline !== "pass";
+    });
+    var rest = state.info.items.filter(function (i) {
+      return first.indexOf(i) < 0;
+    });
+    [["先看这些", first], ["流水线已验证", rest]].forEach(function (g) {
+      if (!g[1].length) return;
+      nav.appendChild(el("div", { className: "rk-side__group", text: g[0] }));
+      g[1].forEach(function (item) {
+        var ic = navIcon(item);
+        var svg = icon(ic[0]);
+        if (svg) svg.style.color = ic[1];
+        nav.appendChild(
+          el("a", { href: "#item-" + item.id, onclick: function (e) {
+            e.preventDefault();
+            var t = $("item-" + item.id);
+            if (t) t.scrollIntoView({ block: "start", behavior: "smooth" });
+          } }, [svg, el("span", { text: item.id + " " + item.title })]),
+        );
+      });
+    });
+  }
+
   function render() {
     var list = $("items");
-    list.innerHTML = "";
-    state.info.items.forEach(function (item, i) {
-      list.appendChild(renderItem(item, i + 1));
+    list.textContent = "";
+    if (!state.info.items.length) {
+      list.appendChild(el("li", { className: "rk-card rk-card--sm" }, [el("div", { className: "rk-empty" }, [icon("clipboard-check", "ic ic-xl"), el("h3", { text: "没有找到验收标准" }), el("p", { text: "需求说明里没有 AC 编号的验收标准。请在需求的对话里补上，或者按完成报告验收。" })])]));
+    }
+    state.info.items.forEach(function (item) {
+      list.appendChild(renderItem(item));
     });
+    renderNav();
     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] }));
+    box.textContent = "";
+    $("try-state").textContent = "";
     var running = (result.services || []).filter(function (s) {
       return s.running && s.url;
     });
+    $("try-state").appendChild(result.ok && running.length ? badge("running", null, "正在运行") : badge(result.ok ? "success" : "warning", result.ok ? "circle-check" : "triangle-alert", result.ok ? "已启动" : "没能一键跑起来"));
+    if (result.ok && running.length) $("try-state").firstChild.insertBefore(el("span", { className: "rk-spin" }), $("try-state").firstChild.firstChild);
+    box.appendChild(el("p", { text: (result.message || "").split("\n")[0] }));
     if (running.length) {
       box.appendChild(
         el(
           "ul",
-          { className: "services" },
+          { className: "ck-services" },
           running.map(function (s) {
             return el("li", {}, [s.name + "：", el("a", { href: s.url, target: "_blank", rel: "noopener", text: s.url })]);
           }),
@@ -165,19 +241,20 @@
       );
       $("try-stop").hidden = false;
     }
-    if (result.howTo && result.howTo.length) box.appendChild(el("pre", { className: "howto", text: result.howTo.join("\n") }));
+    if (result.howTo && result.howTo.length) box.appendChild(el("pre", { className: "ck-howto", text: result.howTo.join("\n") }));
   }
 
   function tryIt(stop) {
     var button = stop ? $("try-stop") : $("try");
+    var label = stop ? button : button.lastChild;
     button.disabled = true;
-    button.textContent = stop ? "正在停止…" : "正在启动，可能要一两分钟…";
+    label.textContent = stop ? "正在停止…" : "正在启动，可能要一两分钟…";
     api("api/try", "POST", { stop: !!stop })
       .then(function (r) {
         if (stop) {
           toast(r.message);
           $("try-stop").hidden = true;
-          $("try-box").hidden = true;
+          $("try-state").textContent = "";
         } else showTry(r);
       })
       .catch(function (e) {
@@ -185,7 +262,7 @@
       })
       .then(function () {
         button.disabled = false;
-        button.textContent = stop ? "停止试用" : "把它跑起来试用";
+        label.textContent = stop ? "停止试用" : "把它跑起来试用";
       });
   }
 
@@ -195,8 +272,9 @@
     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);
+        var ok = r.verdict === "通过";
+        var done = el("div", { className: "rk-banner " + (ok ? "rk-banner--ok" : "rk-banner--warn") }, [icon(ok ? "circle-check" : "undo-2"), el("span", { text: "已提交：验收" + r.verdict + "。" + r.message })]);
+        $("main").insertBefore(done, $("main").firstChild);
         window.scrollTo(0, 0);
       })
       .catch(function (e) {
@@ -207,40 +285,45 @@
   }
 
   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 || "" };
+    api("api/info")
+      .then(function (info) {
+        state.info = info;
+        document.title = "验收清单 · " + info.title;
+        $("title").textContent = info.title;
+        $("project").textContent = info.featureDir;
+        $("project").hidden = false;
+        $("readonly").hidden = !info.readOnly;
+        $("sub").textContent = [info.reportVerdict ? "流水线结论：" + info.reportVerdict : null, info.accepted ? "上次验收：" + info.accepted : 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;
+        $("reviewer").disabled = !!info.readOnly;
+        if (info.notes && info.notes.length) {
+          var n = $("notes");
+          n.hidden = false;
+          n.appendChild(icon("info"));
+          n.appendChild(
+            el("div", {}, [
+              el("b", { text: "先看一下（来自提测说明）" }),
+              el(
+                "ul",
+                {},
+                info.notes.map(function (t) {
+                  return el("li", { text: t });
+                }),
+              ),
+            ]),
+          );
+        }
+        if (info.readOnly || info.running) $("try-card").hidden = true;
+        render();
+      })
+      .catch(function (e) {
+        $("title").textContent = "打不开验收清单";
+        $("sub").textContent = e.message;
       });
-      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();

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

@@ -1,93 +1,16 @@
-: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; }
+/* The code review page (1.15): only what the design system (rk.css) does not cover. */
+#reviewers { width: 200px; }
+#reviewer { width: 130px; }
+.cr-files-n { font: 12px/1 var(--rk-font-mono); color: var(--rk-text-muted); }
+.cr-files-n.has-ai { color: var(--rk-ai); }
+.rk-side a.is-doc span:first-of-type { color: var(--rk-text-muted); }
+.rk-finding .rk-input { height: 32px; }
+.rk-finding textarea.rk-input { height: auto; width: 100%; }
+.rk-finding a.rk-finding__where { text-decoration: none; }
+.rk-finding a.rk-finding__where:hover { text-decoration: underline; }
+.rk-finding.is-ok { opacity: 0.7; }
+.cr-summary li::marker { color: var(--rk-status-success); }
+.cr-summary { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--rk-text-secondary); }
+@media (max-width: 640px) {
+  #reviewers, #reviewer { width: 100%; }
 }

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

@@ -2,42 +2,57 @@
 <html lang="zh-CN">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 <title>代码审查</title>
+<link rel="stylesheet" href="rk-tokens.css">
+<link rel="stylesheet" href="rk.css">
 <link rel="stylesheet" href="code.css">
+<script src="rk-icons.js"></script>
 </head>
 <body>
-<header class="top">
-  <div>
-    <div class="eyebrow" id="project"></div>
-    <h1 id="title">代码审查</h1>
-    <div class="muted" id="sub"></div>
-  </div>
+<header class="rk-top">
+  <span class="rk-brand"><svg data-logo style="--ground:var(--rk-surface-0)"></svg><span>req<i>-</i>kit</span></span>
+  <span class="rk-top__sep rk-top__hide-sm"></span>
+  <span class="rk-top__title" id="title">代码审查</span>
+  <span class="rk-code" id="project" hidden></span>
+  <span class="rk-top__spacer"></span>
+  <span class="rk-cap rk-top__hide-sm" id="saved"></span>
+  <span class="rk-badge rk-badge--outline" id="readonly" hidden><svg class="ic" data-i="lock"></svg>只读</span>
+  <button class="rk-btn rk-btn--ghost rk-btn--sm" type="button" data-rk-theme title="切换深浅色" aria-label="切换深浅色"><svg class="ic" data-i="sun"></svg></button>
 </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>
+
+<div class="rk-layout">
+  <nav class="rk-side" id="files" aria-label="改动的文件"></nav>
+  <main class="rk-main">
+    <div class="rk-banner" id="status" hidden></div>
+    <div class="rk-head">
+      <span class="rk-eyebrow">Code review</span>
+      <h1>看一下这次的改动，决定退回修改还是评审通过</h1>
+      <p id="sub"></p>
+      <p class="rk-cap">点代码行写意见（只对这一行）；AI 的意见可以标"要改"或"不用改"。退回后流水线会按意见修改，改完再评审、再验证。进度会自动保存。</p>
+    </div>
+    <section class="rk-card rk-card--sm" id="summary" hidden></section>
+    <section class="rk-card rk-card--sm" id="ai" hidden></section>
+    <div class="rk-col" id="diffs"></div>
+    <section class="rk-card rk-card--sm">
+      <label class="rk-field" for="note">总体意见（可不填）</label>
+      <textarea class="rk-input" 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>
+
+<footer class="rk-decide">
+  <div class="rk-decide__in">
+    <div class="rk-decide__sum"><b id="count"></b><span class="rk-cap" id="countsub"></span></div>
+    <label class="rk-field">审核人<input class="rk-input" id="reviewers" placeholder="@用户名，用逗号分开"></label>
+    <label class="rk-field">评审人<input class="rk-input" id="reviewer" placeholder="你的名字" maxlength="60"></label>
+    <div class="rk-decide__acts">
+      <button class="rk-btn rk-btn--danger-outline" id="changes" type="button" disabled><svg class="ic" data-i="undo-2"></svg><span>退回修改</span></button>
+      <button class="rk-btn rk-btn--primary" id="approve" type="button" disabled><svg class="ic" data-i="check"></svg><span>评审通过</span></button>
+    </div>
   </div>
 </footer>
-<div id="toast" class="toast" hidden></div>
+<div class="rk-toast" id="toast" role="status" hidden></div>
 <script src="code.js"></script>
 </body>
 </html>