④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 A） - 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。 - ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐： · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。 · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。 · 保留旧版有价值的要求：每项功能补齐做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；横向流程图每步写清页面／功能／操作／完成判据。 · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。 · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。 · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。 - 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图＋用户路径）。二、open-design 移到技能根（用户选候选 A） - `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。 - `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。 - 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与同根技能（`<技能根>/<技能名>/`）两类分开写。 - open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。 - 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md 当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。三、验收 - check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝通过 225 / 失败 0 / 提示 27。 - 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
@@ -0,0 +1,212 @@
+# Components
+
+Copy these markup shapes verbatim. Re-skin via the active `DESIGN.md`
+(color, typography, spacing tokens). Do not invent new component
+shapes — that's where AI-slop sneaks in.
+
+All snippets assume the CSS custom properties defined in
+`assets/template.html` (`--ink`, `--ink-2`, `--bg-soft`, `--accent`,
+`--line`, `--pill-*-bg/ink`, …).
+
+---
+
+## live-pill (top-right of the topbar)
+
+```html
+<div class="pill-live" id="livePill">
+  <span class="dot"></span>
+  <span id="liveText">Live · synced</span>
+</div>
+```
+
+Three states:
+
+| State    | Class on `.pill-live` | Dot color | Text                          |
+|---       |---                    |---        |---                            |
+| Idle     | (none)                | green     | `Live · synced`               |
+| Syncing  | `.syncing`            | accent    | `Syncing…`                    |
+| Stale    | `.stale`              | amber     | `Stale · 2 min ago`           |
+
+The green dot animates a 1.8s `pulse` keyframe. Disable on
+`prefers-reduced-motion`.
+
+---
+
+## kpi card (one cell of the KPI grid)
+
+```html
+<div class="kpi">
+  <div class="label">Total tasks</div>
+  <div class="value" id="kTotal">142</div>
+  <div class="delta up"><span class="arr">↑</span> 6 vs last week</div>
+</div>
+```
+
+Rules:
+- `.value` is `font-size: 32px; font-weight: 600; letter-spacing: -0.01em;
+  font-variant-numeric: tabular-nums`
+- `.label` is `12px uppercase letter-spacing .03em` color `--ink-2`
+- `.delta.up` → green; `.delta.down` → red; neutral `.delta` is grey
+- On refresh, tween `value` between old and new with a 600ms cubic
+  ease-out, and add `.flash` for 700ms (turns the number `--accent-ink`
+  briefly).
+- **Never** put a colored progress bar under the number.
+- **Never** put a sparkline inside a KPI card — sparklines belong in
+  the two-column block.
+
+---
+
+## sparkline (SVG, hand-rolled)
+
+```html
+<svg class="spark" viewBox="0 0 600 140" preserveAspectRatio="none">
+  <g class="spark-grid">
+    <line x1="0" y1="35"  x2="600" y2="35"/>
+    <line x1="0" y1="70"  x2="600" y2="70"/>
+    <line x1="0" y1="105" x2="600" y2="105"/>
+  </g>
+  <path class="spark-fill" d=""></path>
+  <path class="spark-line" d=""></path>
+  <g id="sparkDots"></g>
+  <g id="sparkLabels" class="spark-axis"></g>
+</svg>
+```
+
+CSS:
+- `.spark-fill` is `fill: rgba(<accent-rgb>, 0.10)`
+- `.spark-line` is `fill: none; stroke: var(--accent); stroke-width: 2`
+- `.spark-grid line` is `stroke: var(--line); stroke-dasharray: 2 3`
+- `.spark-dot` (circles, r=3) is `fill: var(--accent)`
+
+Compute paths from a length-7 series with padding 24/16/10/24 (L/R/T/B)
+inside the 600×140 viewBox. Today's bucket is at the right.
+
+Do not use Chart.js / Recharts / D3 — single artifact, no external deps.
+
+---
+
+## activity-feed row
+
+```html
+<div class="feed-row">
+  <span class="av" style="background:#f1c40f">SC</span>
+  <div class="body">
+    <span class="who">Sarah Chen</span>
+    <span class="what"> moved</span>
+    <span class="target"> 🚀 Q3 Roadmap planning</span>
+    <span class="what"> to In progress</span>
+  </div>
+  <div class="time">3 min ago</div>
+</div>
+```
+
+- Avatar: 26px round, two-letter initials, color stable per person.
+- `.target` gets a 1px dotted underline and `cursor: pointer`.
+- A "just inserted" row gets the `.new` class for 2s — applies a soft
+  `rgba(<accent>, .06)` background and a `•` bullet before the name.
+- Re-render relative timestamps every 15s.
+
+---
+
+## status pills (Notion canonical five-color set)
+
+```html
+<span class="pill done">Done</span>
+<span class="pill progress">In progress</span>
+<span class="pill blocked">Blocked</span>
+<span class="pill review">In review</span>
+<span class="pill todo">To do</span>
+```
+
+| Class      | Background      | Foreground      | Notion label   |
+|---         |---              |---              |---             |
+| `done`     | `#dbeddb`       | `#2b593f`       | Done           |
+| `progress` | `#fdecc8`       | `#976d23`       | In progress    |
+| `blocked`  | `#ffe2dd`       | `#b13b2c`       | Blocked        |
+| `review`   | `#d3e5ef`       | `#1f5b78`       | In review      |
+| `todo`     | `#e9e5e3`       | `#5a534f`       | To do          |
+
+Do not introduce extra states. Map any project-specific state into one
+of these five.
+
+---
+
+## linked-database row
+
+```html
+<div class="db-row">
+  <div class="db-cell">📐</div>
+  <div class="db-cell title"><span class="t">Design tokens v2 spec</span></div>
+  <div class="db-cell"><span class="pill review">In review</span></div>
+  <div class="db-cell"><span class="person">…avatar…<span>Lisa Zhao</span></span></div>
+  <div class="db-cell due">May 14</div>
+  <div class="db-cell priority">Med</div>
+</div>
+```
+
+- 6-column grid: `32px 2.4fr 1fr 1fr 0.9fr 0.9fr`
+- `.db-row.changed` triggers a 1.4s row-flash via the `rowflash`
+  keyframe.
+- Hover: `background: var(--bg-soft)`. No transform / shadow.
+
+---
+
+## refresh button (page header, primary)
+
+```html
+<button class="btn primary" id="refreshBtn">
+  <span class="ico" id="refreshIco">↻</span>
+  <span>Refresh from Notion</span>
+</button>
+```
+
+- Default: `background: var(--accent); color: #fff;`
+- Hover: `background: var(--accent-ink)`
+- During poll: add `.spin` to `.ico`, disable button taps via the
+  `busy` flag in JS (do **not** rely on `[disabled]` so visuals stay
+  identical).
+- Label adapts to connector: "Refresh from Notion" / "Refresh from
+  Linear" / "Refresh from Stripe" — never just "Refresh" alone.
+
+---
+
+## auto-toggle (page header, ghost)
+
+```html
+<button class="btn ghost" id="autoBtn" title="Auto refresh every 30s">
+  <span>⏱</span><span id="autoLbl">Auto · on</span>
+</button>
+```
+
+Toggles `setInterval(refresh, refresh_seconds * 1000)`. Persists to
+`localStorage.live_dashboard_auto` so a reload restores the state.
+
+---
+
+## toast (bottom-center, transient)
+
+```html
+<div class="toast" id="toast">Synced — 3 changes from Notion</div>
+```
+
+`position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);`
+1800ms auto-dismiss. Dark `#1f1f1f` background, white text. One toast
+at a time; subsequent calls reset the timer.
+
+---
+
+## callout (Notion idiom)
+
+```html
+<div class="callout">
+  <div class="emj">💡</div>
+  <div>
+    <div><strong>This page is a Live Artifact.</strong> Numbers below are pulled from
+    your <strong>Acme Studio</strong> Notion workspace via the Composio connector.</div>
+    <small>Refreshes on demand or when the page opens. Last 7 days only.</small>
+  </div>
+</div>
+```
+
+One short, declarative sentence + a smaller meta line. No marketing
+copy, no "Powered by", no exclamation marks.