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

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

@@ -2,59 +2,68 @@
 <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>原型审查 · req-kit</title>
+    <link rel="stylesheet" href="rk-tokens.css" />
+    <link rel="stylesheet" href="rk.css" />
     <link rel="stylesheet" href="app.css" />
+    <script src="rk-icons.js"></script>
   </head>
   <body>
-    <header class="top">
-      <div class="heading">
-        <span class="eyebrow">原型审查</span>
-        <h1 id="title">正在打开…</h1>
-        <span id="status" class="pill" hidden></span>
-      </div>
-      <div class="controls">
-        <div class="group" id="filesGroup" hidden><span class="label">页面</span><div class="seg" id="files"></div></div>
-        <div class="group" id="statesGroup" hidden><span class="label">状态</span><div class="seg" id="states"></div></div>
-        <div class="group"><span class="label">宽度</span><div class="seg" id="widths"></div></div>
-        <div class="group"><span class="label">操作</span><div class="seg" id="modes"></div></div>
-        <label class="check"><input type="checkbox" id="showRegions" checked /> 标出要看的地方</label>
-        <label class="check" id="diffWrap" hidden><input type="checkbox" id="showDiff" /> 标出这一版改了哪里</label>
-      </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 id="status" class="rk-badge rk-badge--muted" hidden></span>
+      <span class="rk-top__spacer"></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>
 
+    <div class="ap-head">
+      <span class="rk-eyebrow">Prototype review</span>
+      <h1>在原型上点要改的地方，没问题就确认方案</h1>
+      <p class="hint" id="hint"></p>
+    </div>
+
     <main class="layout">
       <section class="stage" aria-label="原型">
-        <p class="hint" id="hint"></p>
-        <div class="frame-wrap" id="frameWrap">
+        <div class="ap-bar">
+          <div class="group" id="filesGroup" hidden><span class="label">页面</span><div class="seg rk-seg" id="files"></div></div>
+          <div class="group" id="statesGroup" hidden><span class="label">状态</span><div class="seg rk-seg" id="states"></div></div>
+          <div class="group"><span class="label">宽度</span><div class="seg rk-seg" id="widths"></div></div>
+          <div class="group"><span class="label">操作</span><div class="seg rk-seg" id="modes"></div></div>
+          <label class="check"><input type="checkbox" id="showRegions" checked /> 标出要看的地方</label>
+          <label class="check" id="diffWrap" hidden><input type="checkbox" id="showDiff" /> 标出这一版改了哪里</label>
+        </div>
+        <div class="frame-wrap rk-dots" id="frameWrap">
           <div class="sizer" id="sizer"><iframe id="frame" title="界面原型"></iframe></div>
         </div>
-        <p class="empty" id="empty" hidden></p>
+        <div class="empty" id="empty" hidden></div>
       </section>
 
       <aside class="side">
         <details class="card" id="guide" open>
           <summary>怎么用</summary>
           <ol>
-            <li>先看标出来的地方（①②③），它们是这次要改的，右边有对应的验收标准。</li>
+            <li>先看<span class="ap-key ap-key--region">虚线框</span>标出来的地方（①②③），它们是这次要改的，下面有对应的验收标准。</li>
             <li>想改哪里，就<strong>点哪里</strong>：选一种改法，再用自己的话补一句，不用专业词汇。</li>
             <li>想换文字，<strong>双击文字</strong>直接改成你想要的字。</li>
-            <li>都看完了，在最下面提交修改意见；没有要改的，就同意开始写代码。</li>
+            <li>都看完了，在最下面提交修改意见；没有要改的，就确认方案、开始写代码。</li>
           </ol>
         </details>
 
         <section class="card">
-          <h2>要看的地方</h2>
+          <h2><svg class="ic ic-sm" data-i="sparkles" style="color: var(--rk-ai)"></svg>要看的地方</h2>
           <ul class="list" id="regions"></ul>
         </section>
 
         <section class="card" id="changesCard" hidden>
-          <h2>这一版的变化</h2>
+          <h2><svg class="ic ic-sm" data-i="history"></svg>这一版的变化</h2>
           <div id="changes"></div>
         </section>
 
         <section class="card">
-          <h2>我的意见 <span class="count" id="count"></span></h2>
+          <h2><svg class="ic ic-sm" data-i="message-square-plus" style="color: var(--rk-brand-text)"></svg>我的意见 <span class="count" id="count"></span></h2>
           <ul class="list" id="comments"></ul>
           <label class="field">
             <span>总体意见（可以不写）</span>
@@ -62,16 +71,19 @@
           </label>
           <p class="muted small" id="saved"></p>
         </section>
-
-        <section class="card actions" id="actions">
-          <p class="muted" id="actionNote"></p>
-          <button type="button" class="primary" id="submitChanges">提交修改意见</button>
-          <button type="button" class="secondary" id="approve">没有要改的，同意开始写代码</button>
-          <p id="result" class="result" role="status" aria-live="polite"></p>
-        </section>
       </aside>
     </main>
 
+    <footer class="rk-decide" id="actions">
+      <div class="rk-decide__in">
+        <div class="rk-decide__sum"><b id="actionNote"></b><span id="result" class="result rk-cap" role="status" aria-live="polite"></span></div>
+        <div class="rk-decide__acts">
+          <button type="button" class="rk-btn" id="approve">确认方案，开始写代码</button>
+          <button type="button" class="rk-btn rk-btn--primary" id="submitChanges">提交修改意见</button>
+        </div>
+      </div>
+    </footer>
+
     <div class="pop" id="pop" role="dialog" aria-modal="false" aria-labelledby="popTitle" hidden>
       <p class="pop-title" id="popTitle"></p>
       <p class="pop-sub" id="popSub"></p>
@@ -85,8 +97,8 @@
         <textarea id="note" rows="2"></textarea>
       </label>
       <div class="pop-actions">
-        <button type="button" class="secondary" id="popCancel">取消</button>
-        <button type="button" class="primary" id="popOk">添加</button>
+        <button type="button" class="rk-btn rk-btn--ghost" id="popCancel">取消</button>
+        <button type="button" class="rk-btn rk-btn--primary" id="popOk">添加</button>
       </div>
     </div>
 

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

@@ -169,15 +169,15 @@
     const style = d.createElement("style");
     style.id = "rk-style";
     style.textContent = `
-      .rk-hover { outline: 2px solid #2457d6 !important; outline-offset: 2px !important; cursor: pointer !important; }
-      .rk-region { outline: 2px dashed #d97706 !important; outline-offset: 4px !important; }
+      .rk-hover { outline: 2px solid #65a30d !important; outline-offset: 2px !important; cursor: pointer !important; }
+      .rk-region { outline: 2px dashed #6366f1 !important; outline-offset: 4px !important; }
       .rk-changed { outline: 2px solid #10b981 !important; outline-offset: 2px !important; box-shadow: inset 0 0 0 9999px rgba(16,185,129,.10) !important; }
       .rk-edited { box-shadow: inset 0 0 0 9999px rgba(250,204,21,.35) !important; }
-      .rk-flash { outline: 3px solid #e11d48 !important; outline-offset: 3px !important; }
+      .rk-flash { outline: 3px solid #a8e01f !important; outline-offset: 3px !important; box-shadow: 0 0 0 9999px rgba(168,224,31,.12) !important; }
       #rk-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2147483646; }
-      #rk-layer > * { position: absolute; font: 700 12px/22px system-ui, sans-serif; border-radius: 999px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
-      .rk-badge { background: #d97706; color: #111; padding: 0 7px; pointer-events: none; white-space: nowrap; }
-      .rk-pin { background: #e11d48; color: #fff; min-width: 22px; height: 22px; padding: 0 5px; cursor: pointer; }
+      #rk-layer > * { position: absolute; font: 700 12px/22px ui-monospace, Consolas, monospace; border-radius: 999px; text-align: center; box-shadow: 0 0 0 2px #05070d, 0 4px 12px rgba(0,0,0,.35); }
+      .rk-badge { background: #4f46e5; color: #fff; padding: 0 7px; pointer-events: none; white-space: nowrap; }
+      .rk-pin { background: #a8e01f; color: #0f1a02; min-width: 22px; height: 22px; padding: 0 5px; cursor: pointer; }
       [contenteditable="true"] { outline: 2px solid #f59e0b !important; background: #fffbe6 !important; color: #111 !important; }
     `;
     d.head.appendChild(style);
@@ -854,6 +854,10 @@
       approve.disabled = true;
     }
     approve.hidden = !info.waitingForApproval;
+    // 1.15: one lime button, the next step: send the notes when there are any, else confirm the design.
+    const notesFirst = hasAny || !info.waitingForApproval;
+    changes.className = notesFirst ? "rk-btn rk-btn--primary" : "rk-btn";
+    approve.className = notesFirst ? "rk-btn" : "rk-btn rk-btn--primary";
   }
 
   async function submit(action) {
@@ -906,7 +910,7 @@
     const pill = $("status");
     pill.hidden = false;
     pill.textContent = label;
-    pill.className = waiting ? "pill wait" : "pill";
+    pill.className = waiting ? "rk-badge rk-badge--needs" : "rk-badge rk-badge--muted";
     $("diffWrap").hidden = !view.info.versions.previous;
     renderActions();
   }

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

@@ -1,57 +1,12 @@
-: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;
+/* The acceptance checklist page (1.15): only what the design system (rk.css) does not cover. */
+#reviewer { width: 160px; }
+.ck-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rk-space-3); }
+.rk-check { scroll-margin-top: 64px; }
+.rk-check ul.ck-details { margin: 0; padding-left: 18px; font-size: 13px; line-height: 22px; color: var(--rk-text-secondary); }
+.rk-check textarea.rk-input { width: 100%; box-sizing: border-box; }
+.ck-services { margin: 0; padding-left: 18px; }
+.ck-howto { margin: 0; padding: 10px 12px; border-radius: var(--rk-radius-md); background: var(--rk-surface-3); font: 12.5px/20px var(--rk-font-mono); white-space: pre-wrap; overflow-x: auto; }
+#notes ul { margin: 4px 0 0; padding-left: 18px; }
+@media (max-width: 640px) {
+  #reviewer { width: 100%; }
 }
-@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

@@ -2,34 +2,60 @@
 <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="check.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>
-  <div class="top-actions">
-    <button id="try" class="btn">把它跑起来试用</button>
-    <button id="try-stop" class="btn" hidden>停止试用</button>
-  </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>
-<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>
+
+<div class="rk-layout">
+  <nav class="rk-side" id="nav" aria-label="验收项"></nav>
+  <main class="rk-main" id="main">
+    <div class="rk-head">
+      <span class="rk-eyebrow">Acceptance</span>
+      <h1>按验收标准逐条核对，再提交验收</h1>
+      <p id="sub"></p>
+      <p class="rk-cap">照着"前置条件"准备，按"操作"去做，看到的和"预期结果"一样就点"通过"；不一样点"不对"，写下看到了什么。流水线没验证或没通过的排在最前面。进度会自动保存。</p>
+    </div>
+    <section class="rk-card rk-card--sm" id="try-card">
+      <div class="rk-row" style="justify-content:space-between">
+        <span class="rk-card__label rk-card__label--data"><svg class="ic ic-sm" data-i="play"></svg>试用</span>
+        <span id="try-state"></span>
+      </div>
+      <div id="try-box"><p>在这个需求自己的工作区里把它跑起来，给出访问地址和提测说明里的测试账号、数据。</p></div>
+      <div class="rk-row">
+        <button class="rk-btn" id="try" type="button"><svg class="ic" data-i="play"></svg><span>把它跑起来试用</span></button>
+        <button class="rk-btn rk-btn--sm" id="try-stop" type="button" hidden>停止试用</button>
+      </div>
+    </section>
+    <section class="rk-callout rk-callout--note" id="notes" hidden></section>
+    <ol class="ck-items" id="items"></ol>
+  </main>
+</div>
+
+<footer class="rk-decide">
+  <div class="rk-decide__in">
+    <div class="rk-decide__sum"><b id="summary"></b><span class="rk-cap" id="summary-sub"></span></div>
+    <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--primary" id="submit" type="button" disabled><svg class="ic" data-i="clipboard-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="check.js"></script>
 </body>
 </html>