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

package/CHANGELOG.md

@@ -2,6 +2,53 @@
 
 每个版本分为"使用者会看到的变化"和"升级须知"。升级步骤见 [docs/guide/安装与升级.md](docs/guide/安装与升级.md)。
 
+## 1.15.0-beta.3
+
+### 使用者会看到的变化
+
+- **文档站和首页换上了 req-kit 的新设计**（`req docs` 打开的本机文档站、GitHub Pages 和内网托管的副本都一样）：
+  - 首页：极光背景上的版本胶囊、标题和安装命令（npx / macOS·Linux / Windows 三个标签，一键复制）；下面是"对齐 → 方案 → 实现 → 评审 → 验证 → 验收"的步骤轨（要你拍板的两步是青柠色），Bento 卡片介绍对齐需求、审查原型、质量门、代码审查、验收清单和危险命令拦截，数字条里的版本数和设计决定记录数从仓库读取。
+  - 正文页：底色、文字、链接、按钮换成设计系统的颜色；侧边栏分组标题用等宽小字，当前页青柠底色；提示、注意、危险、说明四种提示框带图标、不用彩色左边框；代码块圆角带边框。
+  - 默认跟随系统深浅色，右上角可切换；标志和网页图标换成 req-kit 的新标志。
+
+### 升级须知
+
+- 文档站的颜色由 `scripts/tokens-build.mjs` 生成到 `site/.vitepress/theme/`（`rk-tokens.css`、`rk.css`、`rk-icons.ts`），标志复制到 `site/public/`；测试会检查它们和 `design/` 一致、主题样式里没有写死的颜色。
+- 非 main 分支和合并请求构建的文档站会作为 `site-dist` 保留 7 天，方便预览。
+
+## 1.15.0-beta.2
+
+### 使用者会看到的变化
+
+- **Paseo 插件换上了 req-kit 的新设计**：底色、文字、边框仍跟随 Paseo 的主题，req-kit 的样子靠青柠色的"要你做"、靛色的"AI 写的"、青色的"正在跑"带出来。
+  - 首页和统计页顶部有 req-kit 标志；需求分组用等宽小标题（NEEDS YOU / IN PROGRESS / READY TO TEST / DONE）。
+  - 需求列表每行前面有图标表示状态，下面一行等宽字体写"项目 · 功能目录"，右边是状态徽章和更新时间。
+  - "等你处理"的卡片用图标块代替彩色左边框；需求页顶部有放行轨，一眼看出走到了哪一步；每页只有一个青柠色主按钮（审查方案、代码审查、验收或第一个动作）。
+  - 按钮、徽章带图标；统计页的柱子用数据色。
+
+### 升级须知
+
+- 插件的颜色由 `scripts/tokens-build.mjs` 生成到 `paseo-plugin/shared/rk-colors.ts`，测试会检查插件代码里没有写死的颜色。
+- 插件随 npm 包发布；升级后照常运行 `req plugin install` 更新到 Paseo 里。
+- 文档站的新设计在下一个 beta 里做。
+
+## 1.15.0-beta.1
+
+### 使用者会看到的变化
+
+- **审查原型、验收清单、代码审查三个网页换上了 req-kit 的新设计**（设计规范见仓库 `design/`，和编排平台 CMASTER 同属一个设计家族，主色青柠绿）：
+  - 统一的顶栏（标志、需求名、功能目录、自动保存时间、只读标记、深浅色切换），底部固定的"决定栏"放这一页要你做的决定，每页只有一个青柠色主按钮；条件不满足时按钮旁边写明还差什么。
+  - 代码审查页：AI 评审意见（靛色卡片，带编号、轮次、级别和处理结果）和你写的意见（青柠描边卡片）分开显示；侧栏按"概要 / 代码 / 需求文档"分组；改动摘要卡片显示 AI 评审几轮、修复了几条、还开着几条。
+  - 验收清单页：前置条件、操作、预期结果排成表格；侧栏把"先看这些"（流水线没验证、没通过、要你表态的）和"流水线已验证"分开；试用放在一张卡片里。
+  - 审查原型页：原型放在点阵画布上；"要看的地方"用靛色虚线框和编号标出，你点选的地方是青柠图钉；有意见时主按钮是"提交修改意见"，没有意见时主按钮是"确认方案，开始写代码"。
+  - 默认跟随系统的深浅色，右上角可以切换并记住；手机宽度下侧栏变成可横向滑动的一行，决定栏的按钮占满一行。
+- 页面不加载外网字体，内网打开不会等字体超时。
+
+### 升级须知
+
+- 页面的接口和行为没有变化，只换了外观。审查服务多提供三个共用文件（`rk-tokens.css`、`rk.css`、`rk-icons.js`），由 `scripts/tokens-build.mjs` 从 `design/` 生成，测试会检查它们和 `design/` 一致。
+- Paseo 插件和文档站的新设计在后面的 beta 里做。
+
 ## 1.14.0
 
 稳定版：需求从对齐开始就在插件里，新建工作区能接着做，插件里能做代码审查和验收，危险命令和密钥有程序把关，评审、验收、合并之后的结果有记录可查。内容包括 1.14.0-beta.1 至 beta.5（详见下面各条）。

package/docs/guide//347/273/264/346/212/244/350/200/205/346/214/207/345/215/227.md

@@ -6,6 +6,7 @@
 
 - 先看 [SCOPE.md](../../SCOPE.md) 和 [.out-of-scope/](../../.out-of-scope/)：新提议须服务于"帮助非专职开发的同事把一个需求从对齐做到可验收"，至少有两个真实场景，并且无法通过项目配置或项目说明解决。
 - 改动已有的设计决定（[docs/adr/](../adr/)）时，新增一条 ADR 说明理由，并在旧的一条中注明被哪条取代。
+- 界面的颜色、字体、组件按 `design/`（设计规范，见其中的 README）来；改了 `design/tokens.json`、`design/reference/components.css` 或 `design/examples/icons.js`，运行 `node scripts/tokens-build.mjs` 更新审查网页里的副本。
 - 改动文件格式（spec、状态文件、结果文件、决策记录等）时，同时更新 [contracts/](../../contracts/)、代码和测试；状态文件的格式变化要加迁移（见 `contracts/state.md`）。
 
 ## 2. 改 skill 和提示词的规则
@@ -84,4 +85,5 @@
 | `evals/` | 评估：样例仓库、用例、对话剧本 |
 | `contracts/` | 文件格式约定 |
 | `docs/adr/` | 设计决定 |
+| `design/` | 界面设计规范：tokens、品牌手册、各界面规范、组件、效果图 |
 | `paseo-plugin/` | Paseo 插件：`client/`（界面，React Native）、`server/`（daemon 侧，运行 `req api`）、`shared/`（RPC 约定）。版本号与根目录的 `package.json` 相同，升版本时两处一起改 |

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

@@ -1,108 +1,57 @@
-:root {
-  --bg: #f6f7f9;
-  --surface: #ffffff;
-  --surface-2: #f1f3f6;
-  --text: #1c2430;
-  --muted: #5d6b7c;
-  --border: #dfe3e9;
-  --accent: #2457d6;
-  --accent-text: #ffffff;
-  --accent-soft: #e8eefc;
-  --region: #d97706;
-  --pin: #e11d48;
-  --ok: #15803d;
-  --danger: #b91c1c;
-  --shadow: 0 8px 28px rgba(20, 30, 50, 0.16);
-  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;
-    --region: #f59e0b;
-    --pin: #fb7185;
-    --ok: #4ade80;
-    --danger: #f87171;
-    --shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
-    color-scheme: dark;
-  }
-}
-* {
-  box-sizing: border-box;
-}
-[hidden] {
-  display: none !important;
-}
-html,
-body {
-  margin: 0;
-  background: var(--bg);
-  color: var(--text);
-  font: 14px/1.55 system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
-}
+/* The prototype review page (1.15): rk-tokens.css and rk.css first; this file lays out the page and
+   styles the parts the script builds (lists, chips, the pop-up). Colors only from --rk-* tokens. */
 button,
 input,
 textarea {
   font: inherit;
   color: inherit;
 }
-.top {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  background: var(--surface);
-  border-bottom: 1px solid var(--border);
-  padding: 12px 20px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px 24px;
-  align-items: center;
-  justify-content: space-between;
-}
-.heading {
+.ap-head {
   display: flex;
-  align-items: baseline;
-  gap: 10px;
-  min-width: 0;
+  flex-direction: column;
+  gap: 6px;
+  padding: var(--rk-space-6) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
 }
-.eyebrow {
-  font-size: 12px;
+.ap-head h1 {
+  margin: 0;
+  font-size: 22px;
+  line-height: 30px;
   font-weight: 600;
-  color: var(--accent);
-  white-space: nowrap;
+  text-wrap: balance;
 }
-h1 {
-  font-size: 17px;
+.hint {
   margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  color: var(--rk-text-secondary);
+  max-width: 68ch;
 }
-.pill {
-  font-size: 12px;
-  padding: 2px 10px;
-  border-radius: 999px;
-  background: var(--surface-2);
-  color: var(--muted);
-  white-space: nowrap;
-}
-.pill.wait {
-  background: var(--accent-soft);
-  color: var(--accent);
-  font-weight: 600;
+.layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 360px;
+  gap: var(--rk-space-6);
+  padding: var(--rk-space-4) max(16px, env(safe-area-inset-right, 0px)) 120px max(16px, env(safe-area-inset-left, 0px));
+  align-items: start;
 }
-.controls {
+@media (max-width: 1000px) {
+  .layout {
+    grid-template-columns: minmax(0, 1fr);
+    padding-bottom: 200px;
+  }
+}
+.stage {
+  min-width: 0;
+  border-radius: var(--rk-radius-xl);
+  border: 1px solid var(--rk-border-default);
+  overflow: hidden;
+  box-shadow: var(--rk-shadow-card);
+}
+.ap-bar {
   display: flex;
   flex-wrap: wrap;
   gap: 8px 16px;
   align-items: center;
+  padding: 8px var(--rk-space-4);
+  background: var(--rk-surface-1);
+  border-bottom: 1px solid var(--rk-border-default);
 }
 .group {
   display: flex;
@@ -110,79 +59,34 @@ h1 {
   gap: 6px;
 }
 .label {
-  color: var(--muted);
+  color: var(--rk-text-muted);
   font-size: 12px;
 }
-.seg {
-  display: inline-flex;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  overflow: hidden;
+.seg.rk-seg {
   flex-wrap: wrap;
 }
-.seg button {
-  border: 0;
-  background: transparent;
-  padding: 5px 11px;
-  cursor: pointer;
-  font-size: 13px;
-}
-.seg button + button {
-  border-left: 1px solid var(--border);
-}
-.seg button[aria-pressed="true"] {
-  background: var(--accent);
-  color: var(--accent-text);
-}
-.seg button:focus-visible,
-.chips button:focus-visible,
-.list button:focus-visible,
-.actions button:focus-visible,
-.pop button:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
 .check {
   display: inline-flex;
   gap: 6px;
   align-items: center;
   font-size: 13px;
+  color: var(--rk-text-secondary);
   cursor: pointer;
 }
-.layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 360px;
-  gap: 16px;
-  padding: 16px 20px 32px;
-  align-items: start;
-}
-@media (max-width: 1000px) {
-  .layout {
-    grid-template-columns: 1fr;
-  }
-}
-.stage {
-  min-width: 0;
-}
-.hint {
-  margin: 0 0 8px;
-  color: var(--muted);
-  font-size: 13px;
+.check input {
+  accent-color: var(--rk-brand-500);
 }
 .frame-wrap {
   overflow: auto;
-  background: repeating-conic-gradient(var(--surface-2) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 12px;
-  max-height: calc(100vh - 150px);
+  padding: var(--rk-space-4);
+  max-height: calc(100vh - 200px);
 }
 .sizer {
   position: relative;
   margin: 0 auto;
   overflow: hidden;
-  box-shadow: var(--shadow);
-  border-radius: 4px;
+  box-shadow: var(--rk-shadow-dialog);
+  border-radius: 6px;
   background: #fff;
 }
 iframe {
@@ -195,51 +99,68 @@ iframe {
   transform-origin: 0 0;
 }
 .empty {
-  padding: 40px;
+  padding: 48px 24px;
   text-align: center;
-  color: var(--muted);
-  background: var(--surface);
-  border: 1px dashed var(--border);
-  border-radius: 10px;
+  color: var(--rk-text-secondary);
+  background: var(--rk-surface-2);
 }
 .side {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--rk-space-3);
   position: sticky;
-  top: 80px;
-  max-height: calc(100vh - 96px);
+  top: 64px;
+  max-height: calc(100vh - 160px);
   overflow: auto;
 }
+@media (max-width: 1000px) {
+  .side {
+    position: static;
+    max-height: none;
+  }
+}
 .card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 12px 14px;
+  background: var(--rk-surface-2);
+  border: 1px solid var(--rk-border-default);
+  border-radius: var(--rk-radius-lg);
+  box-shadow: var(--rk-shadow-card);
+  padding: 14px var(--rk-space-4);
 }
 .card h2,
 .card summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   font-size: 14px;
   font-weight: 600;
-  margin: 0 0 8px;
+  margin: 0 0 10px;
 }
 .card summary {
   cursor: pointer;
   margin: 0;
 }
 details[open] summary {
-  margin-bottom: 6px;
+  margin-bottom: 8px;
 }
 .card ol {
   margin: 0;
   padding-left: 18px;
-  color: var(--muted);
+  color: var(--rk-text-secondary);
+  font-size: 13px;
 }
 .card ol li + li {
   margin-top: 4px;
 }
+.ap-key {
+  padding: 0 4px;
+  border-radius: 4px;
+}
+.ap-key--region {
+  outline: 1.5px dashed var(--rk-ai);
+  color: var(--rk-ai);
+}
 .count {
-  color: var(--muted);
+  color: var(--rk-text-muted);
   font-weight: 400;
 }
 .list {
@@ -248,42 +169,45 @@ details[open] summary {
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
 }
 .list li {
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 8px 10px;
-  background: var(--surface);
+  border: 1px solid var(--rk-border-default);
+  border-radius: var(--rk-radius-md);
+  padding: 10px 12px;
+  background: var(--rk-surface-1);
+}
+#comments li:has(.badge.pin) {
+  border-color: var(--rk-brand-edge);
 }
 .list li.flash {
-  border-color: var(--accent);
-  background: var(--accent-soft);
+  border-color: var(--rk-brand-500);
+  background: var(--rk-brand-tint);
 }
 .list .row {
   display: flex;
-  gap: 8px;
+  gap: 10px;
   align-items: flex-start;
 }
 .badge {
   flex: none;
   min-width: 22px;
   height: 22px;
-  border-radius: 999px;
+  border-radius: var(--rk-radius-pill);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
-  font-weight: 700;
+  font: 700 12px/1 var(--rk-font-mono);
   padding: 0 6px;
 }
 .badge.region {
-  background: var(--region);
-  color: #111;
+  background: var(--rk-ai-tint);
+  color: var(--rk-ai);
+  box-shadow: inset 0 0 0 1.5px var(--rk-ai);
 }
 .badge.pin {
-  background: var(--pin);
-  color: #fff;
+  background: var(--rk-brand-500);
+  color: var(--rk-on-brand);
 }
 .grow {
   flex: 1;
@@ -293,100 +217,88 @@ details[open] summary {
   font-weight: 600;
 }
 .muted {
-  color: var(--muted);
+  color: var(--rk-text-secondary);
 }
 .small {
   font-size: 12px;
+  line-height: 18px;
 }
 .linkish {
   border: 0;
   background: none;
-  color: var(--accent);
+  color: var(--rk-brand-text);
   cursor: pointer;
-  padding: 0 2px;
+  padding: 2px 4px;
   font-size: 12px;
+  font-weight: 600;
+  border-radius: 4px;
+}
+.linkish:hover {
+  background: var(--rk-surface-3);
 }
 .linkish.danger {
-  color: var(--danger);
+  color: var(--rk-status-failed);
+}
+.linkish:focus-visible,
+.chips button:focus-visible {
+  outline: 2px solid var(--rk-focus-ring);
+  outline-offset: 2px;
 }
 .field {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  margin-top: 8px;
+  margin-top: 10px;
 }
 .field span {
   font-size: 12px;
-  color: var(--muted);
+  font-weight: 600;
+  color: var(--rk-text-secondary);
 }
 .field input,
 .field textarea {
   width: 100%;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 7px 9px;
-  background: var(--surface);
+  box-sizing: border-box;
+  border: 1px solid var(--rk-border-default);
+  border-radius: var(--rk-radius-md);
+  padding: 7px 10px;
+  background: var(--rk-surface-3);
+  color: var(--rk-text-primary);
   resize: vertical;
 }
 .field input:focus,
 .field textarea:focus {
-  outline: 2px solid var(--accent);
-  outline-offset: 0;
-  border-color: transparent;
-}
-.actions {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.actions p {
-  margin: 0;
-}
-button.primary,
-button.secondary {
-  border-radius: 8px;
-  padding: 9px 14px;
-  cursor: pointer;
-  font-weight: 600;
-}
-button.primary {
-  background: var(--accent);
-  color: var(--accent-text);
-  border: 1px solid var(--accent);
-}
-button.secondary {
-  background: var(--surface);
-  border: 1px solid var(--border);
-}
-button:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
+  outline: none;
+  border-color: var(--rk-brand-edge);
+  box-shadow: 0 0 0 3px var(--rk-brand-tint);
 }
 .result.ok {
-  color: var(--ok);
+  color: var(--rk-status-success);
 }
 .result.err {
-  color: var(--danger);
+  color: var(--rk-status-failed);
 }
 .pop {
   position: fixed;
-  z-index: 50;
-  width: 340px;
+  z-index: var(--rk-z-modal);
+  width: 360px;
   max-width: calc(100vw - 24px);
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  box-shadow: var(--shadow);
-  padding: 12px 14px;
+  box-sizing: border-box;
+  background: var(--rk-surface-1);
+  border: 1px solid var(--rk-border-default);
+  border-radius: var(--rk-radius-xl);
+  box-shadow: var(--rk-shadow-dialog);
+  padding: var(--rk-space-4);
 }
 .pop-title {
   margin: 0;
+  font-size: 15px;
   font-weight: 600;
 }
 .pop-sub {
-  margin: 2px 0 8px;
+  margin: 2px 0 10px;
   font-size: 12px;
-  color: var(--muted);
+  color: var(--rk-text-muted);
 }
 .chips {
   display: flex;
@@ -394,27 +306,34 @@ button:disabled {
   gap: 6px;
 }
 .chips button {
-  border: 1px solid var(--border);
-  background: var(--surface);
-  border-radius: 999px;
-  padding: 4px 11px;
+  height: 30px;
+  border: 1px solid var(--rk-border-default);
+  background: var(--rk-surface-2);
+  color: var(--rk-text-secondary);
+  border-radius: var(--rk-radius-pill);
+  padding: 0 12px;
   cursor: pointer;
   font-size: 13px;
+  font-weight: 600;
+}
+.chips button:hover {
+  border-color: var(--rk-border-strong);
+  color: var(--rk-text-primary);
 }
 .chips button[aria-checked="true"] {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: var(--accent-text);
+  background: var(--rk-brand-500);
+  border-color: var(--rk-brand-edge);
+  color: var(--rk-on-brand);
 }
 .pop-actions {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
-  margin-top: 10px;
+  margin-top: 12px;
 }
 .diff-list {
   margin: 6px 0 0;
   padding-left: 18px;
-  color: var(--muted);
+  color: var(--rk-text-secondary);
   font-size: 13px;
 }