留档模板

新一周开工时把这个文件复制成 weekly/2026-W37.html， 改掉 data-page、标题、周期，然后逐段填。 下面每段都带填写说明，删掉说明即可用。

1. 页面骨架

<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2026-W37 周报 · xcmskills</title>
<link rel="stylesheet" href="../assets/site.css">
</head>
<body data-root="../" data-page="weekly/2026-W37.html">
<div class="layout">
<nav class="sidebar"></nav>       <!-- JS 填充，不要手写 -->
<main class="main">

  <!-- 正文在这里 -->

</main>
<aside class="toc"></aside>        <!-- JS 填充目录 -->
</div>
<script src="../assets/search-index.js"></script>
<script src="../assets/site.js"></script>
</body>
</html>

2. 正文结构（四大类固定顺序）

第一层永远是四大类，顺序固定，编号跟着大类走： W{周}-R{序} 需求 · -B{序} Bug · -E{序} 经验 · -P{序} 复盘。 某一类本周为空也要保留段落，放一个 <div class="sec-none"> 说明为什么空。

3. 现成积木

3.1 概要头

<div class="wk-head">
<!-- 四大类各一格，顺序固定，0 也要写出来 -->
<div><span class="wk-head-k">周期</span><span class="wk-head-v">09/07 – 09/13</span></div>
</div>

紧跟在概要头后面的是 kindbar 四大类跳转条：

<div class="kindbar">
<!-- k-req / k-bug / k-exp / k-post 决定配色，顺序不能改 -->
<a class="kind k-req" href="#req">
  <span class="kind-n">01</span>
  <span class="kind-t">需求</span>
  <span class="kind-c">1 个 · 关卡工具</span>
</a>
</div>

3.2 需求卡

固定四段背景 / 做法 / 影响面 / 验收，缺一段都不算留档。 真实例子见 W36-R01。

3.3 Bug 留档卡

<div class="rec">
<div class="rec-top">
<span class="rec-id">W37-01</span>
<span class="rec-t">标题</span>
</div>
<div class="rec-body">
<div class="rec-f"><span class="rec-fk">现象</span>
  <div class="rec-fv">...</div></div>
</div></div>

3.4 时序表

<div class="tl">
<!-- t-key = 红点关键节点，t-ok = 绿点，不加 = 灰点 -->
<div class="tl-row t-key">
  <span class="tl-time">18:25:02.613</span>
  <span class="tl-d">发生了什么</span>
</div></div>

3.5 经验 tip 块

§3 经验总结用这个。tip-src 不许省—— 没有「来源 + 适用场景」的经验，三周后自己都想不起来在说什么。

加 t-warn 变成警告色，用于「不这么做会出事」的那类：

<div class="tip">              <!-- t-warn = 警告色 -->
<div class="tip-t">W37-E01 · 标题</div>
<div class="tip-d">具体做法</div>
<div class="tip-src">来源：... · 适用：...</div>  <!-- 必填 -->
</div>

3.6 复盘块

§4 问题复盘用这个。四段固定： 当时怎么想的 → 实际 → 代价 → 下次怎么改。 前两段是 rec-f，后两段是 post-cl 里的两个 post-cell。

<div class="post" id="post-p01">
<div class="post-top">
  <span class="rec-id">W37-P01</span>
  <span class="post-t">标题</span>
  <!-- b-warn 白花时间 / b-err 方向全错 -->
  <span class="badge b-warn">白花时间</span>
</div>
<div class="post-body">
  <!-- rec-f ×2：当时怎么想的 / 实际 -->
  <div class="post-cl">
    <div class="post-cell pc-cost"><span class="post-ck">代价</span>...</div>
    <div class="post-cell pc-fix"><span class="post-ck">下次怎么改</span>...</div>
  </div>
</div></div>

3.7 附件路径

3.6 截图

<figure class="shot">
<!-- 图还没放进来时留这个占位，放好后删掉 -->
<div class="shot-miss">把截图放到 weekly/img/w37-01-xxx.png</div>
<img src="img/w37-01-xxx.png" alt="描述">
<figcaption><b>什么时候的图</b>：看点在哪</figcaption>
</figure>

3.7 跨周任务的进度块

只有大耗时跨周任务才用这个（判定见 周报总览 §3.4）。小任务只在完成周写一行「起止」就够。

<!-- 编号沿用首次出现那周，不随周次变 -->
<span class="rec-id">W36-09</span>
<span class="rec-span s-cont">第 2 周 / 共 3 周</span>  <!-- 完成周去掉 s-cont -->

<div class="prog">
  <div class="prog-bar"><div class="prog-fill" style="width:65%"></div></div>
  <!-- prog-fill p-block = 红（卡住），p-done = 绿（本周做完） -->
  <div class="prog-meta">
    <span class="prog-pct">65%</span>
    <span>本周投入 3 天</span><span>累计 5 天</span>
    <span class="prog-line"><b>已完成：</b>...</span>
    <span class="prog-line"><b>下周做：</b>...</span>
  </div>
</div>

4. 写完自查