html-effectiveness-report

08-report — 周期性报告

"Recurring documents — status updates, post-mortems — benefit most from a bit of structure and color. A small chart and a colored timeline turn something people skim into something they actually read."

何时用

用户说	用哪个范式	模板
"写一份这周的 engineering status"	状态周报	../../templates/status.html
"周报模板填一下"	同上	同上
"昨天那个 incident 的 postmortem"	事故报告	../../templates/postmortem.html
"RCA / SEV-2 总结"	同上	同上

---

范式 8.1 · 状态周报

空间形状：5 段，按"扫一眼 → 细看 → 跟进"顺序

1. 4 大数字 KPI — 顶部一行卡片，3 秒能看完
2. Highlights — 3 个 bullet（高亮事件，不是流水账）
3. Shipped — 表格 (PR / Title / Author / Risk)
4. Velocity — 7 天柱状图（小图，不喧宾夺主）
5. Carryover — 三段 in-review / blocked / slipped，用 border-left 颜色区分

关键 CSS：

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi { padding: 20px; border-radius: 12px; background: var(--white);
       border: 1px solid var(--gray-300); }
.kpi .num { font-size: 36px; font-weight: 500; line-height: 1; }
.kpi .label { color: var(--gray-700); font-size: 13px; margin-top: 6px; }
.kpi .delta.up { color: var(--success); }
.kpi .delta.down { color: var(--danger); }

.carryover .item { border-left: 3px solid; padding: 12px 16px;
                   background: var(--white); border-radius: 8px; }
.carryover .in-review { border-left-color: var(--info); }
.carryover .blocked   { border-left-color: var(--warning); }
.carryover .slipped   { border-left-color: var(--gray-500); }

Velocity 柱状图技巧（不需要 Chart.js）：

<div class="chart">
  <div class="bar"><div class="col" style="height:0%"  data-v="0"></div><small>Mon</small></div>
  <div class="bar"><div class="col" style="height:25%" data-v="1"></div><small>Tue</small></div>
  <!-- ... -->
</div>

.chart { display: flex; align-items: flex-end; gap: 12px; height: 140px; }
.bar { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.bar .col { width: 100%; max-width: 56px; background: var(--clay);
            border-radius: 4px 4px 0 0; position: relative; }
.bar .col::before { content: attr(data-v); position: absolute;
                    top: -22px; left: 50%; transform: translateX(-50%);
                    font-size: 12px; }