agentcss 0.0.0-stage → 0.11.2

package/09-assets/sparkline/README.md

@@ -0,0 +1,153 @@
+# sparkline · 迷你趋势图
+
+在一行里显示"最近走势"。**它是辅助，不是图表。**
+
+## 用法
+
+```html
+<span class="sparkline" data-spark="12,18,15,24,22,31,28"></span>
+```
+
+| 属性 | 值 | 默认 |
+|---|---|---|
+| `data-spark` | 逗号分隔的数字 | — |
+| `data-spark-type` | `line` / `bar` / `area` | `line` |
+| `data-spark-height` | 像素 | `32` |
+| `data-spark-color` | CSS 颜色或 `var(--x)` | `var(--accent)` |
+| `data-spark-fill` | `no` 关闭面积填充 | 填 |
+| `data-spark-last` | `yes` 标出最后一个点 | 不标 |
+| `data-spark-animate` | `no` 关闭入场动画 | 开 |
+
+更新数据：
+
+```js
+el.setAttribute('data-spark', '1,2,3');
+Chart.emit(el);          // 重画这一个
+Chart.update(container); // 重画某区域内全部
+```
+
+## 🔴 无障碍：它没有可读的文本等价物
+
+纯 SVG 路径对读屏**没有意义** —— 读屏只会说"图像"。
+
+⇒ 本组件**刻意不加 `role="img"`**（那会让人以为它有可读的替代文本，而它没有）
+⇒ SVG 标了 `aria-hidden="true"` + `focusable="false"`
+⇒ **要给出可读的值**：在旁边放数字，或用「名字 + 当前值 + 涨跌」的组合
+⇒ **必须**配文字的场景：数值重要时（如"营收 128 万，同比 +3.2%"）。
+纯装饰的小图可以不配。
+
+**只放 sparkline 不放数字 = 把视觉当成唯一通道**，这是反例。
+
+## 动画
+
+用 `stroke-dasharray` 做"从左往右画出来"的效果。
+
+**为什么不用 JS 逐帧**：
+① 零 JS 帧循环，动画交给合成器
+② **可被 `prefers-reduced-motion` 一行 CSS 关掉**
+③ 几十个同时动画也不掉帧
+
+**关掉动画的三种情况**（CSS 里都做了）：
+① 用户在系统里说了"减少动态效果"（WCAG 2.3.3，前庭功能障碍者会眩晕）
+② 打印时（`@media print`）
+③ 元素上写 `data-spark-animate="no"`
+
+## 为什么自己写而不引库
+
+调研了 GitHub 上几个零依赖方案，最小的 `mitjafelicijan/sparklines`
+是 **6390 字节 / 195 行 / gzip 1675 字节**、**BSD-2 许可**（可商用）——
+**它做得很好，值得参考**。
+
+但没有直接引，两个原因（都不是嫌它差）：
+
+| | 它 | 本库要求 |
+|---|---|---|
+| 语法 | `const` + 箭头函数（ES6）| **ES5**（精简档 跑在 某项目 的 WebView，版本不确定）|
+| 颜色 | data 属性传 HEX / 颜色名 | **令牌驱动**（换主题要跟着变）|
+
+⇒ **借鉴它的接口设计**（data 属性驱动、零依赖、BSD 思路），
+实现按本库约束重写。
+
+**当前体量**：`sparkline.js` 约 8 KB · `sparkline.css` 约 2 KB · 零依赖。
+
+## 🔴 修两个把线画坏的 bug（真机实测截图指出）
+
+### ① `preserveAspectRatio="none"` ⇒ 横向拉伸
+
+它允许 **x/y 独立缩放**。本组件 viewBox 宽度已经是容器**实际像素宽**，
+`width:100%` 渲染到同一宽度 ⇒ **横向本来就不该缩放**，
+但 `none` 仍会在容器宽 ≠ viewBox 宽时（整数舍入 / 滚动条 / flex 未稳定）
+把图形**拉变形**。
+
+⇒ 删掉，走默认 `xMidYMid meet`：**1px 就是 1px**，比例有出入也只等比留边。
+
+### ② 🔴 CSS 的 `fill` 覆盖了 `fill="none"` 属性
+
+我原来写「path / rect / circle 一律 `fill: var(--spark-c)`」——
+**CSS 优先级高于 SVG presentation attribute**，
+JS 里写的 `fill="none"` **被完全无视**。
+
+实测：`fill` 属性 = `none`，**计算值 = `rgb(27,77,143)`** ⇒
+**折线被填成实心多边形** ⇒ 看起来是「扁平的色带」而不是趋势线。
+
+**这才是"色带"的直接原因**（① 只是让它更扁）。
+
+⇒ 修法：**按类型分四类**，不靠属性覆盖（属性打不过 CSS）：
+`.spark-line` 描边 / `.spark-area` 填充 / `.spark-bar` 填充 / `.spark-dot` 填充。
+
+### ③ 连带发现：动画类被牵连（真 bug）
+
+重写外观后 `spark-line` 必须**常驻**（它负责 `fill:none`），
+于是旧逻辑「没动画就不加 `spark-line` 类」**形同虚设** ——
+**动画会无视设置照播**。
+
+⇒ 拆出独立的 `.spark-anim` 专管动画。契约测试已改判据并锁住。
+
+## 🔴 MISSING != ZERO（最重要的一条）
+
+**空值和 0 是两件事。**
+
+| 写法 | 含义 | 画成什么 |
+|---|---|---|
+| `data-spark="1,0,3"` | 1、**真的 0**、3 | 一条连续的线，中间有个低谷 |
+| `data-spark="1,,3"` | 1、**没数据**、3 | **两段线，中间断开** |
+| `data-spark="1,2,3,4,"` | 末点没数据 | 两段线，**不画末点圆点** |
+
+**为什么这么重要**：一条横跨缺失点的线，等于在说"从 1 平滑升到 3，
+中间一切正常" —— 而真相是"中间没数据"。
+**数据缺失被画成了平稳过渡**，这是图表最容易忽略、最会误导人的一种错。
+
+**契约来源**（不是我想的）：`ChartsPage.tsx` 第 10 行自己写着
+> 「MISSING != ZERO / INVALID != MISSING / 过滤必须可见」
+
+它自己做到了 `connectNulls={false}` 且 0 处遗漏 —— 本库照它做，
+并在自己的契约测试里锁死这六条。
+
+**实现要点**：
+- `parsePoints` 把空值 / `-` / `null` / `NaN` 都保留成 `null`（**不是 0**）
+- `scale` 求最值时**排除 null**（否则 `Math.min(1, null, 3) === 1` 会把图压扁）
+- `draw` 把序列切成**连续段**，每段画一条 path，**段间留空**
+- 柱状图：缺失点**不画柱**（画成 0 高度等于假装"这里是 0"）
+
+## 边界情况（都实测过）
+
+| 输入 | 行为 |
+|---|---|
+| 少于 2 个**有效**点 | 不画（画不出趋势）|
+| **全部缺失**（`,,,,`）| 不画，且**不崩**（`scale` 返回 null 有防护）|
+| 中间缺失 | **断开成两段**，不连线 |
+| **全部相同**（`10,10,10`）| 人工造上下界，**不除零**，画成一条水平线 |
+| 单点成段 | 画成一个小圆点（否则那段"什么都不画"，用户以为图坏了）|
+| 元素宽度为 0（隐藏中）| 用 `data-spark-width` 或等布局就绪 |
+
+## 验证
+
+**28 项全过**，含 `MISSING != ZERO` 六条：
+连续=1 段 · 中间缺失=2 段 · **两段有真实间隔（381px）** · 中间是 0 仍 1 段 ·
+全缺失不崩 · 末点缺失不画圆点。
+
+另：`aria-hidden` 9/9 · `role=img` 0 个 · axe 0 违规 / 19 通过。
+
+**两个判别力验证**：
+① 复现"类名不一致"那个真 bug ⇒ 8 项 FAIL
+② 注入"空值丢弃"老写法 ⇒ 3 项 FAIL

package/09-assets/sparkline/demo.html

@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>sparkline · 迷你趋势图</title>
+<link rel="stylesheet" href="../../01-tokens/tokens.css">
+<link rel="stylesheet" href="../../01-tokens/typography.css">
+<link rel="stylesheet" href="../../01-tokens/page.css">
+<link rel="stylesheet" href="../../02-primitives/button/button.css">
+<link rel="stylesheet" href="../../09-assets/sparkline/sparkline.css">
+<style>
+.row { display: flex; align-items: center; gap: var(--sp-4);
+         padding: var(--sp-3) 0; }
+.name { width: 82px; flex: 0 0 auto; font-size: var(--fs-sm); }
+.val { width: 96px; flex: 0 0 auto; font-family: var(--mono);
+          font-size: var(--fs-sm); text-align: right; }
+.chg { width: 68px; flex: 0 0 auto; font-size: var(--fs-xs); }
+.up { color: var(--danger); }
+/* A 股习惯：涨红 */
+.down { color: var(--success); }
+/* 🔴 修：原来这里 flex:1 1 auto 加在 .sparkline 上， 而组件的 .sparkline 自带 width:100% ⇒ **宽度算两遍**， 在 flex 行里被压成 **5px 宽**（实测）⇒ 趋势图变成一条竖线、 与旁边的文字糊在一起。 ⇒ 解法：flex 作用在**包装层**，组件本身只管自己的宽度。 🔴 修 iOS 实机报的「趋势图出边框」（实测溢出 76px）： `.row` 是 `flex-wrap: nowrap`，前三列固定宽（82+96+68=246px） 已吃掉 300px 里的大部分，而我给 `.spark-wrap` 设了 **`min-width: 80px` 阻止它收缩** ⇒ flex 放不下 ⇒ **必然溢出**。 ⚠️ 我一度判断成「inline 元素 flex 无效」—— **那是错的**（实测 display:block）。 ⇒ ① `min-width: 0`+`flex: 1 1 0`（**允许被压到任意窄**，flex 收缩的必要条件） ⚠️ 试过 `flex-wrap: wrap`（让极窄屏换行）—— **不行**： 换行后 spark-wrap 独占整行 300px，但里面的 `.sparkline` 仍被 压成 5px 竖线（截图实测）。**换行不解决宽度计算问题，只会让布局更乱**。 ⚠️ 试过只给 spark-wrap 收缩 —— **也不行**，实测压成 **5px**： 三个固定列（`flex: 0 0 auto`）已经吃掉 246px+gap， 393px 屏里**真的没有空间**给第四列了 （320px 时连 0px 都没有）。 ⇒ **真正的解法：数字列必须允许收缩**。 它们的 `flex: 0 0 auto` 是错的 —— 数字宽度虽固定， 但**优先牺牲它、保证走势图可见**才是对的优先级 （走势图是这一行的信息主体，数字可以截断）。 ⚠️ 这是**布局优先级**问题，不是 flex 语法问题。 */
+.row { flex-wrap: nowrap; }
+.name, .val, .chg { flex: 0 1 auto; min-width: 0; }
+/* 🔴 允许收缩 */
+.val { flex-shrink: 2; }
+/* 🔴 数字先让位 */
+.spark-wrap { flex: 1 1 0; min-width: 0; }
+/* 走势图至少 40px */
+.spark-wrap { min-width: 40px; }
+
+                    /* 🔴 但别小于 40 */
+</style>
+</head>
+<body class="page page">
+<main class="wrap">
+  <h1>sparkline · 迷你趋势图</h1>
+  <p class="lede">
+    在一行里显示"最近走势"。它是<strong>辅助</strong>不是图表 ——
+    读屏读不出路径，所以<strong>旁边必须有数字</strong>。
+  </p>
+
+  <h2 class="rule-top">真实语境（数字 + 涨跌 + 走势）</h2>
+  <div class="box">
+    <div class="row">
+      <span class="name">600519</span>
+      <span class="val">1,684.20</span>
+      <span class="chg up">+2.31%</span>
+      <span class="spark-wrap"><span class="sparkline" data-spark="1602,1618,1609,1631,1625,1648,1662,1655,1684"></span></span>
+    </div>
+    <div class="row">
+      <span class="name">000001</span>
+      <span class="val">11.87</span>
+      <span class="chg down">−0.84%</span>
+      <span class="spark-wrap"><span class="sparkline" data-spark="12.05,12.11,12.02,11.96,11.99,11.92,11.88,11.91,11.87"></span></span>
+    </div>
+    <div class="row">
+      <span class="name">688981</span>
+      <span class="val">86.40</span>
+      <span class="chg up">+5.12%</span>
+      <span class="spark-wrap"><span class="sparkline" data-spark="82.1,82.8,83.4,83.1,84.2,84.9,85.3,85.0,86.4"></span></span>
+    </div>
+  </div>
+  <p class="small">
+    每行都有<strong>名字 + 当前值 + 涨跌</strong>，走势图是第四层信息。
+    这就是为什么<strong>不能只有 sparkline</strong>。
+  </p>
+
+  <h2 class="rule-top">三种形态</h2>
+  <div class="box">
+    <p class="small">折线（默认）</p>
+    <span class="sparkline" data-spark="12,18,15,24,22,31,28" data-spark-height="48"
+          data-spark-last="yes"></span>
+
+    <p class="small" style="margin-top:var(--sp-5)">面积（fill=yes）</p>
+    <span class="sparkline" data-spark-type="area" data-spark="12,18,15,24,22,31,28"
+          data-spark-height="48" data-spark-last="yes"></span>
+
+    <p class="small" style="margin-top:var(--sp-5)">柱状</p>
+    <span class="sparkline" data-spark-type="bar" data-spark="12,18,15,24,22,31,28"
+          data-spark-height="48"></span>
+  </div>
+
+  <h2 class="rule-top">换主题会自动跟着变</h2>
+  <div class="box">
+    <p class="small">
+      颜色默认是 <code>var(--accent)</code>，<strong>不是写死的蓝</strong> ——
+      切到暗色它会跟着变。
+    </p>
+    <span class="sparkline" data-spark="12,18,15,24,22,31,28" data-spark-height="52"
+          data-spark-color="var(--danger)"></span>
+    <p class="small" style="margin-top:var(--sp-3)">
+      上面这条是 <code>var(--danger)</code>（本库的涨红）。
+    </p>
+  </div>
+
+  <h2 class="rule-top">点击更新数据</h2>
+  <div class="box">
+    <span class="sparkline" id="upd" data-spark="12,18,15,24,22,31,28"
+          data-spark-height="56" data-spark-last="yes"></span>
+    <p style="margin-top:var(--sp-4)">
+      <button class="btn btn--md btn--secondary" id="btn">换一组数据</button>
+    </p>
+    <p class="small">
+      更新只需改 <code>data-spark</code> 再调 <code>Chart.emit(el)</code>。
+    </p>
+  </div>
+
+  <h2 class="rule-top">🔴 无障碍：它没有可读的文本等价物</h2>
+  <div class="box bad">
+    <p>
+      纯 SVG 路径对读屏<strong>没有意义</strong> ——
+      读屏只会说"图像"，不会说"最近上涨 2.3%"。
+    </p>
+    <p class="small">
+      ⇒ 所以本组件<strong>刻意不加 <code>role="img"</code></strong>
+      （那会让人以为它有可读的替代文本，而它没有）。
+      ⇒ <strong>要给出可读的值</strong>：在旁边放数字，
+      或用上面那种「名字 + 当前值 + 涨跌」的组合。
+      ⇒ 什么时候<strong>必须</strong>配文字：数值重要时
+      （例如"营收 128 万，同比 +3.2%"）。纯装饰的小图可以不配。
+    </p>
+  </div>
+
+  <h2 class="rule-top">反例</h2>
+  <div class="box bad">
+    <h3>反例：只放 sparkline，没有数字</h3>
+    <p class="small">
+      视觉上"很有信息"，但读屏用户<strong>什么都不知道</strong> ——
+      这是把视觉当成了唯一通道。
+    </p>
+    <span class="sparkline" data-spark="12,18,15,24,22,31,28" data-spark-height="40"></span>
+  </div>
+  <div class="box bad">
+    <h3>反例：动画不管 reduced-motion</h3>
+    <p class="small">
+      前庭功能障碍者会因动画眩晕（WCAG 2.3.3）。
+      本组件在 <code>@media (prefers-reduced-motion: reduce)</code> 下
+      <strong>完全关掉动画</strong>，且打印时也不动。
+    </p>
+  </div>
+</main>
+<script src="sparkline.js"></script>
+<script>
+  // 仅为 demo：换数据
+  (function () {
+    var el = document.getElementById('upd');
+    var sets = [
+      '12,18,15,24,22,31,28',
+      '4,9,6,14,11,22,19,30',
+      '28,24,25,18,20,12,14,6',
+      '10,10,10,10,10,10,10'   // 全平 —— 看几何怎么处理除零
+    ];
+    var i = 0;
+    document.getElementById('btn').addEventListener('click', function () {
+      i = (i + 1) % sets.length;
+      el.setAttribute('data-spark', sets[i]);
+      window.Chart.emit(el);
+    });
+  })();
+</script>
+</body>
+</html>

package/09-assets/sparkline/sparkline.css

@@ -0,0 +1,158 @@
+/* ============================================================================
+   sparkline — 迷你趋势图的样式
+   ============================================================================
+   🔴 为什么要单独一个 CSS 文件（它只有一个类）
+   ----------------------------------------------------------------------------
+   因为**动画**。SVG 的 path 动画属于"视觉层"，放 JS 里就变成内联 style，
+   换主题与 reduced-motion 都难管。放 CSS 里才能被 motion 门禁盯住。
+
+   🔴 动画为什么用 stroke-dasharray 而不是 JS 逐帧
+   ----------------------------------------------------------------------------
+   ① **零 JS 帧循环** —— 动画完全交给合成器，JS 只画一次路径。
+   ② **可被 prefers-reduced-motion 关掉** —— 一行 CSS 的事，
+      写在 JS 里要自己写 if 判断（而且容易漏）。
+   ③ **不阻塞主线程** —— 几十个 sparkline 同时动画也不会掉帧。
+ */
+
+/* 🔴 **修 真机实测反馈的"趋势图和文字重叠"**
+
+   根因（实测，不是猜的）：
+     ① 这里 `height: 32px` 是**写死的**，但 JS 按 `data-spark-height`
+        可以画成 48 / 52 / 56px ⇒ **容器装不下**
+     ② `overflow: visible` ⇒ 溢出的部分**直接画到容器外面**，
+        压在下面一行的文字上
+
+   ⭐ 这个判断是对的，而且这是**通用设计规范**：
+        **任何图都不能与文字重叠。** 图要么在自己的框里，
+        要么明确留出间距 —— 不能靠"溢出"去侵占别的元素的空间。
+
+   ⇒ 修法：
+     ① 容器高度**由 JS 同步写入**（消除"容器与图不一致"这个根）
+     ② overflow 改 hidden（溢出即被裁，不会压到别处）
+        ⚠️ 这里**不能用 visible**：末尾那个"标出最后一点"的圆点
+           是画在 path 上的，不会出框；改成 hidden 是安全的。 */
+.sparkline {
+  display: block;
+  /* 🔴 iOS 实机报的「出边框」修复：
+     `width: 100%` 在**两层**都会被算：
+       外层 `.spark-wrap` 是 flex 项（要收缩）
+       内层 `.sparkline` 又是 100%
+     ⇒ **同一个宽度算两遍**，收缩量被吃掉，组件被压成 5px 竖线。
+     修法：**`min-width: 0` 允许 flex 收缩**（这是 flex 收缩的前提），
+     宽度仍交给 `width:100%`—— 但父层必须允许它被压。 */
+  min-width: 0;
+  width: 100%;
+  height: var(--spark-h, 32px);
+  overflow: hidden;
+  /* 🔴 图与文字之间的间距：组件自己给，不靠调用方记得留 */
+  margin: var(--sp-1) 0;
+}
+
+.sparkline svg {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* 🔴 颜色**一律走 CSS**，不用 stroke="var(--x)" 属性。
+   presentation attribute 上的 var() 各浏览器支持不一致（规范没保证，
+   Safari 尤其不可靠）。JS 只写 --spark-c，具体取值由这里决定 ——
+   顺带得到一个好处：**调用方可以用 CSS 覆盖颜色，不必改 data 属性**。 */
+/* 🔴 **修「趋势图变成扁平色带」**（真机实测截图指出的）
+
+   ⚠️ 我原来写成「path / rect / circle 一律 fill: var(--spark-c)」——
+      **这会把折线也填成面**！因为
+      **CSS 的优先级高于 SVG presentation attribute**，
+      JS 里写的 `fill="none"` **被完全无视**。
+      实测：fill 属性 = none，但计算值 = rgb(27,77,143) ⇒
+      折线被填成了实心多边形 ⇒ 看起来是「扁平的色带」而不是趋势线。
+
+   ⇒ 修法：**按类型分开**，不靠属性覆盖（属性打不过 CSS）：
+
+       .spark-line  → 只描边，不填充（折线）
+       .spark-area  → 填充（面积图）
+       .spark-bar   → 填充（柱状图）
+       .spark-dot   → 填充（端点/单点） */
+.spark-line {
+  stroke: var(--spark-c, var(--accent));
+  fill: none;
+}
+.spark-area {
+  stroke: none;
+  fill: var(--spark-c, var(--accent));
+}
+.spark-bar {
+  stroke: none;
+  fill: var(--spark-c, var(--accent));
+}
+.spark-dot {
+  stroke: none;
+  fill: var(--spark-c, var(--accent));
+}
+
+/* 放在一行里（表格/列表右侧那种）时不该有上下外边距，
+   否则会把那一行撑高、看起来错位 */
+.row > .sparkline,
+td > .sparkline,
+.spark { margin: 0; }
+
+/* 🔴 动画独立成 `.spark-anim`（原来复用 .spark-line，
+   重写外观后那个判断就失效了 —— 动画会无视设置照播）。
+
+   🔴 0.8.0 修：**基态必须是"看得见"，动画负责"从不可见到可见"**
+   ----------------------------------------------------------------------------
+   原来写反了：
+     .spark-anim { stroke-dashoffset: var(--spark-len, 1000);   ← 基态：整条推出可见区
+                   animation: spark-draw … forwards }           ← 靠它才变可见
+     @keyframes spark-draw { to { stroke-dashoffset: 0 } }
+
+   这个写法有个致命性质：**动画一旦被取消，线就整条消失**
+   （取消 ⇒ 回落到基态 = 完全偏移 ⇒ 没有可见线段）。
+   实测踩到两处，都不是理论推演：
+
+     ① **视觉门禁假红**。`shot-baseline.py` 为了"冻结动画再截图"会注入
+        `animation:none !important` ⇒ sparkline 的线整条不见 ⇒
+        报"21 个块变化、观感不一致"，重跑又绿 —— 表现为**偶发假红**。
+        （为什么偶发：`.spark-anim` 只在**首绘**时加；ResizeObserver 会紧接着
+          再绘一次且**不加**这个类 ⇒ 截到"首绘态"就看不见、截到"重绘态"就正常。
+          ⇒ 每次截图落在哪个态，取决于 RO 回调与截图的先后 —— 纯竞态。）
+     ② **任何第三方 CSS 重置 / 用户样式**把动画关掉，线都会消失。
+        这不是假设：`@media print` 与 `prefers-reduced-motion` 都得自己
+        再补一行 `stroke-dashoffset: 0` 才不出错 —— 那正是"写反了"的味道。
+
+   ⇒ 正确写法：基态 `0`（可见），动画的 `from` 才是"完全偏移"。
+     取消动画最多是"少一次动效"，绝不会变成"少一张图"。
+
+   ⚠️ `--spark-len` 兜底 1000 是**承重的**：dasharray 必须 ≥ 路径长度，
+      否则"偏移 1000"落不到可见区之外，入场效果会变形。
+      目前全库没有任何 JS 去写这个变量（早先的注释说 JS 会写，是错的），
+      所以 1000 就是实际生效值。超过 1000px 宽的 sparkline 不在本库场景内。 */
+.spark-anim {
+  stroke-dasharray: var(--spark-len, 1000);
+  stroke-dashoffset: 0;
+  animation: spark-draw var(--dur-slow, 600ms) var(--ease-out) forwards;
+}
+
+@keyframes spark-draw {
+  from { stroke-dashoffset: var(--spark-len, 1000); }
+  to   { stroke-dashoffset: 0; }
+}
+
+/* 🔴 关掉动画的三种情况（缺一不可）：
+
+   ① 用户在系统里说了"减少动态效果" —— 这是**必须尊重的**
+      （前庭功能障碍者会因动画眩晕，WCAG 2.3.3）。
+   ② 屏幕上的图是**纯装饰**（旁边已经有完整数字）—— 动它只是噪音。
+   ③ 页面在后台（切走了还在动就是浪费电量）。
+*/
+@media (prefers-reduced-motion: reduce) {
+  .spark-anim {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+}
+
+/* 打印时也别动 —— 打印是静态的，动画只会拖慢 */
+@media print {
+  .spark-anim { animation: none; stroke-dashoffset: 0; }
+}