agentcss 0.0.0-stage → 0.11.2

package/04-recipes/analysis-report/analysis-report.css

@@ -0,0 +1,187 @@
+/* ============================================================================
+   analysis-report/analysis-report.css — 研究报告 recipe 的局部样式
+   ============================================================================
+   依赖：01-tokens/tokens.css（只消费令牌，不写死颜色/间距）
+         01-tokens/page.css（提供 .page / .wrap / .lede / .note 骨架）
+
+   🔴 这个 recipe 存在的意义：证明本库能组合出**不只是单栏长文**的页面。
+      longform 证明的是长文排版；这里要证明：
+        · 正文 + 辅助栏的**并排**布局（窄屏自然退回单栏，不是缩小桌面版）
+        · 关键发现区、数据区、引用区的**信息层级**
+        · 表格 / 图表 / 代码块在同一页里**协调**而不是各说各话
+   ============================================================================ */
+
+/* 报告比普通长文宽：正文列 + 15rem 辅助栏 */
+.report { max-width: calc(var(--measure-page) + 16rem); }
+
+/* ---------- 页头 ---------- */
+.report__kicker {
+  margin: 0 0 var(--sp-2);
+  font-size: var(--fs-xs);
+  letter-spacing: .08em;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+}
+.report__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-1) var(--sp-4);
+  margin: var(--sp-4) 0 0;
+  padding-top: var(--sp-3);
+  border-top: 1px solid var(--border-decor);
+  font-size: var(--fs-xs);
+  color: var(--text-tertiary);
+}
+.report__meta b { font-weight: 500; color: var(--text-secondary); }
+
+/* ---------- 主体：桌面并排，窄屏单栏 ---------- */
+.report__body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);       /* 默认单栏 —— 窄屏天然成立 */
+  gap: var(--sp-6);
+  margin-top: var(--sp-6);
+}
+
+/* 🔴 断点写不了 var()：--bp-lg = 64rem = 1024px（见 tokens.css）
+   并排是"内容有位置放"之后才发生的事，不是把所有东西缩小塞进去 */
+@media (min-width: 64rem) {
+  .report__body {
+    grid-template-columns: minmax(0, 1fr) 15rem;
+    gap: var(--sp-7);
+  }
+  .report__aside {
+    position: sticky;
+    top: var(--sp-4);
+    align-self: start;            /* sticky 要在 grid 里生效必须写这句 */
+    max-height: calc(100vh - var(--sp-8));
+    overflow: auto;
+  }
+}
+
+/* ---------- 正文节奏 ---------- */
+.report__main > section + section { margin-top: var(--sp-6); }
+.report__main h2 { margin-top: 0; }
+.report__main p { margin: var(--sp-3) 0; }
+.report__main ul,
+.report__main ol { margin: var(--sp-3) 0; padding-inline-start: var(--sp-5); }
+.report__main li + li { margin-top: var(--sp-1); }
+
+/* ---------- 关键发现区 ---------- */
+/* 🔴 关键发现：竖条 → 淡色底 + 圆角（0.8.4 · 统一竖条政策）
+   原来这里是 `border-inline-start: 3px solid var(--accent)`，
+   而全库另外三处（typography / form-validation / overlay）**都已经删掉竖条**，
+   理由写在各自的注释里：
+     ① 竖条在页面上拉出一条**与内容无关的硬边**，视觉噪声大于信息量
+     ② 真实产品（GitHub callout / Vercel / Stripe）都是纯底色 + 圆角
+   ⇒ 这个组件是"该次清理漏掉的原始设计"，不是有意为之的特例。
+   颜色没有被丢掉，只是**从竖条转移进底色**（info-bg），语义强度不变。
+   ⚠️ 顺带修一个性质差异：原来用的 `border-inline-start`（逻辑属性，RTL 自动镜像）
+      已不需要—— 因为不再有竖条。 */
+.kf {
+  margin: var(--sp-4) 0;
+  padding: var(--sp-4);
+  background: var(--info-bg);
+  border-radius: var(--r-md);
+}
+.kf__title {
+  margin: 0 0 var(--sp-2);
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+.kf ol { margin: 0; padding-inline-start: var(--sp-5); }
+.kf li { margin-top: var(--sp-2); }
+.kf strong { color: var(--text-primary); }
+
+/* ---------- 引用块 ---------- */
+/* 🔴 引语块：竖条保留但降级（0.8.4 · 统一竖条政策）
+   引语块是**唯一**竖条有语义的地方 —— 竖条标记"这是别人说的话"，
+   是内容属性不是装饰（学术排版里这个惯例也很稳）。
+   但它原来用 `var(--border-decor-str)`，对比度太弱、存在感太轻，
+   读者会以为这是普通段落的缩进。
+   ⇒ 改用`--border-decor`（明确的分隔线色）+ 保留逻辑属性（RTL 自动镜像）。
+   ⚠️ 这条是**本库唯一保留的竖条**，理由已写在这里；
+      以后新增竖条必须同样写明"为什么它不是装饰"。 */
+.report__quote {
+  margin: var(--sp-4) 0;
+  padding: var(--sp-3) var(--sp-4);
+  border-inline-start: 3px solid var(--border-decor);
+  color: var(--text-secondary);
+  font-style: italic;
+}
+.report__quote cite {
+  display: block;
+  margin-top: var(--sp-2);
+  font-size: var(--fs-xs);
+  font-style: normal;
+  color: var(--text-tertiary);
+}
+
+/* ---------- 代码块：承载"实验参数"这类结构化信息 ---------- */
+.report__code {
+  margin: var(--sp-4) 0;
+  padding: var(--sp-3) var(--sp-4);
+  background: var(--surface-sunken);
+  border: 1px solid var(--border-decor);
+  border-radius: var(--r-md);
+  overflow-x: auto;
+  font-family: var(--mono);
+  font-size: var(--fs-xs);
+  line-height: var(--lh-loose);
+  color: var(--text-secondary);
+  white-space: pre;
+}
+
+/* ---------- 辅助栏 ----------
+   🔴 用现有 card 组件（02-primitives/card），不另造一个"侧栏卡片" ——
+      重复造会在换主题时多一个不一致的源头。
+      这里只补排布与紧凑排版。 */
+.report__aside .card + .card { margin-top: var(--sp-3); }
+.report__aside .card__title {
+  font-size: var(--fs-xs);
+  letter-spacing: .04em;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+}
+.report__aside dl { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); }
+.report__aside dt {
+  margin-top: var(--sp-2);
+  font-size: var(--fs-xs);
+  color: var(--text-tertiary);
+}
+.report__aside dd { margin: 0; color: var(--text-primary); }
+/* 🔴 不用 inline style 写字号颜色：inline 的优先级高于一切样式表（INVARIANT I-4），
+      使用者想覆盖它只能再加 !important —— 演示页不该教这个。 */
+.report__aside p { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); }
+
+/* ---------- 图表容器 ---------- */
+.report__fig {
+  margin: var(--sp-5) 0;
+  padding: var(--sp-3);
+  background: var(--surface);
+  border: 1px solid var(--border-decor);
+  border-radius: var(--r-md);
+  overflow-x: auto;
+}
+.report__fig figcaption {
+  margin-top: var(--sp-2);
+  font-size: var(--fs-xs);
+  color: var(--text-tertiary);
+}
+
+/* ---------- 页脚来源 ---------- */
+.report__foot {
+  margin-top: var(--sp-8);
+  padding-top: var(--sp-4);
+  border-top: 1px solid var(--border-decor);
+  font-size: var(--fs-xs);
+  color: var(--text-tertiary);
+}
+.report__foot ol { padding-inline-start: var(--sp-5); }
+.report__foot li + li { margin-top: var(--sp-1); }
+
+/* ---------- 打印：辅助栏不再粘住，避免整页错位 ---------- */
+@media print {
+  .report__aside { position: static; max-height: none; overflow: visible; }
+  .report__body { grid-template-columns: 1fr; }
+}

package/04-recipes/analysis-report/demo.html

@@ -0,0 +1,274 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" href="data:,">
+<title>analysis-report · 组合型研究报告 · frontend-lib</title>
+
+<!-- 骨架必须在组件之前：组件靠"后来者同特异性胜出"覆盖骨架，不用 !important -->
+<link rel="stylesheet" href="../../01-tokens/tokens.css">
+<link rel="stylesheet" href="../../01-tokens/typography.css">
+<link rel="stylesheet" href="../../01-tokens/focus-ring.css">
+<link rel="stylesheet" href="../../01-tokens/page.css">
+
+<link rel="stylesheet" href="../../02-primitives/card/card.css">
+<link rel="stylesheet" href="../../02-primitives/badge/badge.css">
+<link rel="stylesheet" href="../../04-recipes/table/table.css">
+<link rel="stylesheet" href="../../09-assets/scientific-plot/scientific-plot.css">
+
+<link rel="stylesheet" href="analysis-report.css">
+</head>
+<body class="page">
+<main class="wrap report">
+
+  <!-- ============================================================ 页头 -->
+  <header>
+    <p class="report__kicker">材料科学 · 实验报告</p>
+    <h1>高镍正极材料在高电压下的循环衰减与表面包覆效果</h1>
+    <p class="lede">
+      对比三种表面处理方案在 4.4&nbsp;V 截止电压下的 300 周容量保持表现，
+      并给出可复现的实验条件。
+    </p>
+    <p class="report__meta">
+      <span><b>报告编号</b> MR-2026-0417</span>
+      <span><b>版本</b> v1.2</span>
+      <span><b>状态</b> <span class="badge badge--warning">待同行评议</span></span>
+      <span><b>数据截止</b> 2026-04-10</span>
+    </p>
+  </header>
+
+  <div class="report__body">
+
+    <!-- ======================================================== 正文 -->
+    <article class="report__main">
+
+      <section>
+        <h2>1 · 摘要</h2>
+        <p>
+          高镍层状氧化物（LiNi<sub>0.8</sub>Co<sub>0.1</sub>Mn<sub>0.1</sub>O<sub>2</sub>，下称 NCM811）
+          在提升能量密度的同时，其高电压循环下的界面副反应会加速容量衰减。
+          本报告比较未包覆、Al<sub>2</sub>O<sub>3</sub> 包覆与
+          Li<sub>3</sub>PO<sub>4</sub> 包覆三种方案，在相同电解液体系与截止电压下的循环表现。
+        </p>
+
+        <div class="kf">
+          <p class="kf__title">关键发现</p>
+          <ol>
+            <li>
+              300 周后容量保持率：未包覆 <strong>57.3%</strong>、
+              Al<sub>2</sub>O<sub>3</sub> <strong>76.4%</strong>、
+              Li<sub>3</sub>PO<sub>4</sub> <strong>82.1%</strong>。
+            </li>
+            <li>
+              两种包覆方案在 <strong>前 50 周</strong>差异不显著（&lt; 1 个百分点），
+              分化主要发生在 100 周之后。
+            </li>
+            <li>
+              首次库仑效率的差异（87.2% / 88.1% / 89.3%）<strong>不足以</strong>
+              单独解释 300 周时的容量差距 —— 包覆主要影响的是<strong>衰减速率</strong>，不是起始容量。
+            </li>
+            <li>
+              本报告<strong>不主张</strong>任何方案具备统计显著性：
+              每组仅 2 个平行电池，样本量不足以做显著性检验。
+            </li>
+          </ol>
+        </div>
+      </section>
+
+      <section>
+        <h2>2 · 方法与实验条件</h2>
+        <p>
+          所有样品采用同一来源前驱体，包覆在流化床中进行。电化学测试使用扣式电池，
+          每组成 2 个平行样，取算术平均。
+        </p>
+
+        <pre class="report__code">电解液     1 M LiPF6 in EC:EMC:DMC = 3:5:2 (v/v) + 2 wt% VC
+截止电压   3.0 – 4.4 V (vs. Li/Li+)
+倍率       0.5C 充电 / 1.0C 放电
+温度       25 ± 1 °C
+包覆量     Al2O3 0.8 wt% · Li3PO4 1.0 wt%（以正极活性物质计）</pre>
+
+        <p>三种样品的基础电化学参数如下：</p>
+
+        <div class="table table--financial" tabindex="0" role="region" aria-label="财务数据表（可横向滚动）">
+          <table>
+            <caption class="table__cap">表 1 · 三种样品的基础电化学参数（每组 n = 2，取算术平均）</caption>
+            <thead>
+              <tr>
+                <th scope="col">样品</th>
+                <th scope="col">首次放电容量 <span class="table__unit">mAh/g</span></th>
+                <th scope="col">首次库仑效率 <span class="table__unit">%</span></th>
+                <th scope="col">300 周容量保持率 <span class="table__unit">%</span></th>
+                <th scope="col">平均粒径 <span class="table__unit">µm</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">未包覆</th>
+                <td class="num">208</td><td class="num">87.2</td>
+                <td class="num">57.3</td><td class="num">11.2</td>
+              </tr>
+              <tr>
+                <th scope="row">Al<sub>2</sub>O<sub>3</sub> 包覆</th>
+                <td class="num">204</td><td class="num">88.1</td>
+                <td class="num">76.4</td><td class="num">11.5</td>
+              </tr>
+              <tr>
+                <th scope="row">Li<sub>3</sub>PO<sub>4</sub> 包覆</th>
+                <td class="num">206</td><td class="num">89.3</td>
+                <td class="num">82.1</td><td class="num">11.3</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <p class="table__foot">
+          注：容量保持率以第 1 周放电容量为基准归一化。粒径为激光粒度仪 D50。
+        </p>
+      </section>
+
+      <section>
+        <h2>3 · 结果</h2>
+        <p>
+          下图给出三种方案的容量保持率随循环次数的变化。阴影带为两个平行样之间的
+          极差范围 —— 它是<strong>两个测量值之间的实际差异</strong>，不是置信区间。
+        </p>
+
+        <figure class="report__fig">
+          <div id="cycleChart"></div>
+          <figcaption>
+            图 1 · 300 周循环容量保持率。阴影为两个平行样之间的极差（n = 2）。
+            数据为示例，用于演示本库的组合排版。
+          </figcaption>
+        </figure>
+
+        <p>
+          值得注意的不是三条曲线的<strong>位置</strong>，而是它们的<strong>斜率</strong>：
+          未包覆样品在 100 周后开始出现明显加速衰减，而两种包覆样品的衰减速率在
+          150–300 周区间基本保持线性。
+        </p>
+      </section>
+
+      <section>
+        <h2>4 · 讨论</h2>
+        <p>
+          界面包覆的常见解释是抑制电解液与高活性表面的直接接触，从而减缓
+          Ni<sup>2+</sup>/Ni<sup>4+</sup> 的可逆性损失。本报告的数据与这一机制方向一致，
+          但<strong>不足以证明</strong>因果 —— 缺少表面成分与阻抗谱的对照数据。
+        </p>
+
+        <blockquote class="report__quote">
+          「包覆层的核心作用是延缓界面副反应的累积，而不是提高材料的本征容量。
+          因此评估包覆效果时，循环后期的衰减速率比首周容量更具信息量。」
+          <cite>— 引自内部技术备忘录 TM-2026-003</cite>
+        </blockquote>
+
+        <p>
+          本次未测量交流阻抗与表面 XPS，因此无法把衰减速率差异归因到具体的界面反应路径。
+          后续计划补充这两项表征。
+        </p>
+      </section>
+
+    </article>
+
+    <!-- ======================================================== 辅助栏 -->
+    <aside class="report__aside">
+      <section class="card card--compact">
+        <div class="card__body">
+          <h3 class="card__title">数据速览</h3>
+          <dl>
+            <dt>样品数</dt><dd>3 组 × 2 平行样</dd>
+            <dt>循环周数</dt><dd>300</dd>
+            <dt>截止电压</dt><dd>4.4 V</dd>
+            <dt>最高保持率</dt><dd>82.1%（Li<sub>3</sub>PO<sub>4</sub>）</dd>
+            <dt>最低保持率</dt><dd>57.3%（未包覆）</dd>
+          </dl>
+        </div>
+      </section>
+
+      <section class="card card--compact">
+        <div class="card__body">
+          <h3 class="card__title">术语</h3>
+          <dl>
+            <dt>NCM811</dt><dd>LiNi<sub>0.8</sub>Co<sub>0.1</sub>Mn<sub>0.1</sub>O<sub>2</sub></dd>
+            <dt>首效</dt><dd>首次库仑效率</dd>
+            <dt>D50</dt><dd>体积分布中位径</dd>
+            <dt>极差</dt><dd>最大值与最小值之差</dd>
+          </dl>
+        </div>
+      </section>
+
+      <section class="card card--compact">
+        <div class="card__body">
+          <h3 class="card__title">本报告不承诺</h3>
+          <p>
+            不做统计显著性判断（n = 2 不足）；
+            不外推至其他截止电压或电解液体系；
+            不给出循环寿命预测。
+          </p>
+        </div>
+      </section>
+    </aside>
+
+  </div>
+
+  <!-- ============================================================ 页脚 -->
+  <footer class="report__foot">
+    <p><strong>数据来源与限制</strong></p>
+    <ol>
+      <li>全部数值为演示用示例数据，<strong>不是真实实验结果</strong>。</li>
+      <li>每组样本量 n = 2，不足以支持任何统计推断。</li>
+      <li>本页同时演示本库的表格、图表、并排布局与辅助栏，不代表任何材料学结论。</li>
+    </ol>
+  </footer>
+
+</main>
+
+<script src="../../09-assets/scientific-plot/scientific-plot.js"></script>
+<script>
+(function () {
+  'use strict';
+  if (!window.ScientificPlot) return;
+
+  /* 循环数据：容量保持率（%） */
+  var CYC  = [0, 50, 100, 150, 200, 250, 300];
+  var BARE = [100, 92.1, 85.3, 78.0, 70.8, 63.9, 57.3];
+  var AL2O = [100, 96.2, 92.4, 88.1, 84.3, 80.2, 76.4];
+  var LPO4 = [100, 97.1, 94.0, 91.2, 88.4, 85.3, 82.1];
+
+  /* 极差半宽（两个平行样之间的实际差异 / 2）—— 是**测量值**，不是统计区间 */
+  var HW = [0, 0.9, 1.3, 1.6, 1.9, 2.2, 2.4];
+
+  function pts(arr) { return CYC.map(function (c, i) { return [c, arr[i]]; }); }
+  function band(arr) {
+    return CYC.map(function (c, i) {
+      var hw = HW[i] * (arr === BARE ? 1.4 : arr === AL2O ? 1.0 : 0.8);
+      return [c, arr[i] - hw, arr[i] + hw];
+    });
+  }
+
+  window.ScientificPlot.render(document.getElementById('cycleChart'), {
+    width: 700, height: 360,
+    title: '容量保持率随循环次数的变化',
+    desc: '三组包覆方案，阴影为平行样极差',
+    x: { label: '循环次数', unit: '周', scale: 'linear', domain: [0, 300] },
+    y: { label: '容量保持率', unit: '%', scale: 'linear', domain: [50, 102] },
+    /* 🔴 **每条 series 都要给 `name`** —— 这是"逻辑系列"的身份。
+       同一材料的「区间带」和「曲线」必须写**同一个名字**：
+       · 写了 ⇒ 它们共用一个色号，读者一看就知道这个带属于这条线
+       · 不写 ⇒ 每条记录各吃一个色号 ⇒ 带是红的、线是绿的，看着像两种材料
+       （评审 VIZ-REPORT-01 · P0-2 抓的正是"不写 ⇒ 六条同色"，
+          而"每条一个色"是另一个反方向的错误 —— 两边都不能要。） */
+    series: [
+      { type: 'band', data: band(BARE), name: '未包覆' },
+      { type: 'band', data: band(AL2O), name: 'Al₂O₃ 包覆' },
+      { type: 'band', data: band(LPO4), name: 'Li₃PO₄ 包覆' },
+      { type: 'line', data: pts(BARE),  name: '未包覆' },
+      { type: 'line', data: pts(AL2O),  name: 'Al₂O₃ 包覆' },
+      { type: 'line', data: pts(LPO4),  name: 'Li₃PO₄ 包覆' }
+    ]
+  });
+})();
+</script>
+</body>
+</html>

package/04-recipes/data-showcase/README.md

@@ -0,0 +1,45 @@
+# data-showcase · 数据展示能力对照
+
+一页对照四种数据表达方式，用来回答「我该用哪个」。
+
+| 表达方式 | 组件 | 回答的问题 |
+|---|---|---|
+| 迷你趋势 | `09-assets/sparkline` | 指标是涨还是跌 |
+| 科学坐标图 | `09-assets/scientific-plot` | 值落在哪、误差多大 |
+| 学术表格 | `04-recipes/table`（`--academic`） | 哪个方案在哪个指标上更好 |
+| 统计结果表 | `04-recipes/table`（`--stats`） | 效应大小与确定程度 |
+
+它们**共享**设计令牌、字体、容器与响应式基础，
+但**不共享**坐标规则与数据格式 —— 所以是四个用途，不是同一个组件的四种皮肤。
+
+## 文件
+
+| 文件 | 说明 |
+|---|---|
+| `demo.html` | 对照示例页（可直接打开） |
+
+样式全部复用库内已有资产，本示例页只用了 `<style>` 里少量排布规则（KPI 卡、图表框），
+没有新增运行时依赖。
+
+## 依赖
+
+```
+01-tokens/tokens.css
+01-tokens/typography.css
+01-tokens/page.css
+09-assets/sparkline/sparkline.css + .js
+09-assets/scientific-plot/scientific-plot.css + .js
+04-recipes/table/table.css
+```
+
+## 预览
+
+```bash
+python -m http.server 8000
+# http://127.0.0.1:8000/04-recipes/data-showcase/demo.html
+```
+
+## 说明
+
+页面内所有数值均为**示例数据**，不构成任何业务或科研结论。
+留这句是因为「长得像真实数据」的示例最容易被误引用。