agentcss 0.0.0-stage → 0.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (274) hide show
  1. package/01-tokens/README.md +236 -0
  2. package/01-tokens/behavior/dismissable.js +132 -0
  3. package/01-tokens/behavior/emit.js +76 -0
  4. package/01-tokens/behavior/focus-return.js +81 -0
  5. package/01-tokens/behavior/roving.js +152 -0
  6. package/01-tokens/behavior/typeahead.js +124 -0
  7. package/01-tokens/focus-ring-demo.html +133 -0
  8. package/01-tokens/focus-ring.css +102 -0
  9. package/01-tokens/page.css +244 -0
  10. package/01-tokens/polyfill.js +116 -0
  11. package/01-tokens/responsive-demo.html +171 -0
  12. package/01-tokens/scrollbar-demo.html +194 -0
  13. package/01-tokens/scrollbar.css +179 -0
  14. package/01-tokens/theme-toggle.js +103 -0
  15. package/01-tokens/tokens.css +972 -0
  16. package/01-tokens/typography.css +156 -0
  17. package/02-primitives/badge/README.md +71 -0
  18. package/02-primitives/badge/badge.css +141 -0
  19. package/02-primitives/badge/demo.html +101 -0
  20. package/02-primitives/button/README.md +99 -0
  21. package/02-primitives/button/button.css +353 -0
  22. package/02-primitives/button/demo.html +200 -0
  23. package/02-primitives/card/README.md +145 -0
  24. package/02-primitives/card/card.css +246 -0
  25. package/02-primitives/card/demo.html +170 -0
  26. package/02-primitives/choice/README.md +161 -0
  27. package/02-primitives/choice/choice.css +395 -0
  28. package/02-primitives/choice/demo.html +277 -0
  29. package/02-primitives/combobox/README.md +79 -0
  30. package/02-primitives/combobox/combobox.css +223 -0
  31. package/02-primitives/combobox/combobox.js +485 -0
  32. package/02-primitives/combobox/demo.html +109 -0
  33. package/02-primitives/date-range/README.md +100 -0
  34. package/02-primitives/date-range/date-range.css +206 -0
  35. package/02-primitives/date-range/date-range.js +301 -0
  36. package/02-primitives/date-range/demo.html +104 -0
  37. package/02-primitives/input/README.md +170 -0
  38. package/02-primitives/input/demo.html +246 -0
  39. package/02-primitives/input/input.css +239 -0
  40. package/02-primitives/popover/README.md +80 -0
  41. package/02-primitives/popover/demo.html +150 -0
  42. package/02-primitives/popover/popover.css +187 -0
  43. package/02-primitives/popover/popover.js +331 -0
  44. package/02-primitives/progress/README.md +82 -0
  45. package/02-primitives/progress/demo.html +154 -0
  46. package/02-primitives/progress/progress.css +172 -0
  47. package/02-primitives/select/README.md +95 -0
  48. package/02-primitives/select/demo.html +121 -0
  49. package/02-primitives/select/select.css +151 -0
  50. package/02-primitives/select/select.js +549 -0
  51. package/02-primitives/separator/README.md +63 -0
  52. package/02-primitives/separator/demo.html +84 -0
  53. package/02-primitives/separator/separator.css +73 -0
  54. package/02-primitives/skeleton/README.md +69 -0
  55. package/02-primitives/skeleton/demo.html +110 -0
  56. package/02-primitives/skeleton/skeleton.css +96 -0
  57. package/02-primitives/switch/README.md +65 -0
  58. package/02-primitives/switch/demo.html +115 -0
  59. package/02-primitives/switch/switch.css +370 -0
  60. package/03-patterns/accordion/README.md +121 -0
  61. package/03-patterns/accordion/accordion.css +453 -0
  62. package/03-patterns/accordion/accordion.js +369 -0
  63. package/03-patterns/accordion/demo.html +223 -0
  64. package/03-patterns/content/README.md +103 -0
  65. package/03-patterns/content/content.css +286 -0
  66. package/03-patterns/content/demo.html +88 -0
  67. package/03-patterns/drawer/README.md +79 -0
  68. package/03-patterns/drawer/demo.html +101 -0
  69. package/03-patterns/drawer/drawer.css +129 -0
  70. package/03-patterns/drawer/drawer.js +258 -0
  71. package/03-patterns/dropdown/README.md +78 -0
  72. package/03-patterns/dropdown/demo.html +101 -0
  73. package/03-patterns/dropdown/dropdown.css +135 -0
  74. package/03-patterns/dropdown/dropdown.js +451 -0
  75. package/03-patterns/form-validation/README.md +147 -0
  76. package/03-patterns/form-validation/demo.html +280 -0
  77. package/03-patterns/form-validation/form-validation.css +263 -0
  78. package/03-patterns/list/README.md +150 -0
  79. package/03-patterns/list/demo.html +225 -0
  80. package/03-patterns/list/flip.js +201 -0
  81. package/03-patterns/list/list.css +162 -0
  82. package/03-patterns/nav/README.md +225 -0
  83. package/03-patterns/nav/demo.html +131 -0
  84. package/03-patterns/nav/nav.css +314 -0
  85. package/03-patterns/nav/nav.js +430 -0
  86. package/03-patterns/nav/toc.js +111 -0
  87. package/03-patterns/overlay/README.md +196 -0
  88. package/03-patterns/overlay/demo.html +241 -0
  89. package/03-patterns/overlay/overlay.css +319 -0
  90. package/03-patterns/overlay/overlay.js +563 -0
  91. package/03-patterns/pagination/README.md +114 -0
  92. package/03-patterns/pagination/demo.html +165 -0
  93. package/03-patterns/pagination/pagination.css +195 -0
  94. package/03-patterns/pagination/pagination.js +395 -0
  95. package/03-patterns/reveal/README.md +91 -0
  96. package/03-patterns/reveal/demo.html +106 -0
  97. package/03-patterns/reveal/reveal.css +93 -0
  98. package/03-patterns/reveal/reveal.js +172 -0
  99. package/03-patterns/states/README.md +141 -0
  100. package/03-patterns/states/demo.html +240 -0
  101. package/03-patterns/states/states.css +252 -0
  102. package/03-patterns/tabs/README.md +84 -0
  103. package/03-patterns/tabs/demo.html +139 -0
  104. package/03-patterns/tabs/tabs.css +172 -0
  105. package/03-patterns/tabs/tabs.js +307 -0
  106. package/03-patterns/tooltip/README.md +96 -0
  107. package/03-patterns/tooltip/demo.html +78 -0
  108. package/03-patterns/tooltip/tooltip.css +89 -0
  109. package/03-patterns/tooltip/tooltip.js +288 -0
  110. package/03-patterns/tree/README.md +94 -0
  111. package/03-patterns/tree/demo.html +138 -0
  112. package/03-patterns/tree/tree.css +113 -0
  113. package/03-patterns/tree/tree.js +456 -0
  114. package/04-recipes/analysis-report/README.md +80 -0
  115. package/04-recipes/analysis-report/analysis-report.css +187 -0
  116. package/04-recipes/analysis-report/demo.html +274 -0
  117. package/04-recipes/data-showcase/README.md +45 -0
  118. package/04-recipes/data-showcase/demo.html +247 -0
  119. package/04-recipes/detail-page/README.md +93 -0
  120. package/04-recipes/detail-page/demo.html +55 -0
  121. package/04-recipes/detail-page/detail-page.css +190 -0
  122. package/04-recipes/detail-page/full.html +60 -0
  123. package/04-recipes/detail-page/null.html +60 -0
  124. package/04-recipes/detail-page/partial.html +60 -0
  125. package/04-recipes/detail-page/verify-skeleton.py +19 -0
  126. package/04-recipes/longform/README.md +93 -0
  127. package/04-recipes/longform/agc-memory.svg +4 -0
  128. package/04-recipes/longform/content.html +610 -0
  129. package/04-recipes/longform/content.md +51 -0
  130. package/04-recipes/longform/longform.html +627 -0
  131. package/04-recipes/report/README.md +176 -0
  132. package/04-recipes/report/demo.html +355 -0
  133. package/04-recipes/report/report.css +364 -0
  134. package/04-recipes/table/README.md +103 -0
  135. package/04-recipes/table/demo.html +455 -0
  136. package/04-recipes/table/table.css +372 -0
  137. package/04-recipes/tierA-tokens.css +189 -0
  138. package/09-assets/README.md +74 -0
  139. package/09-assets/bar/README.md +94 -0
  140. package/09-assets/bar/bar.css +166 -0
  141. package/09-assets/bar/bar.js +320 -0
  142. package/09-assets/bar/demo.html +176 -0
  143. package/09-assets/echarts-adapter/demo.html +192 -0
  144. package/09-assets/echarts-adapter/echarts-adapter.js +277 -0
  145. package/09-assets/model-viewer/README.md +155 -0
  146. package/09-assets/model-viewer/demo.html +105 -0
  147. package/09-assets/model-viewer/model-viewer.css +143 -0
  148. package/09-assets/model-viewer/model-viewer.js +423 -0
  149. package/09-assets/scientific-plot/README.md +94 -0
  150. package/09-assets/scientific-plot/demo.html +252 -0
  151. package/09-assets/scientific-plot/scientific-plot.css +141 -0
  152. package/09-assets/scientific-plot/scientific-plot.js +610 -0
  153. package/09-assets/sparkline/README.md +153 -0
  154. package/09-assets/sparkline/demo.html +163 -0
  155. package/09-assets/sparkline/sparkline.css +158 -0
  156. package/09-assets/sparkline/sparkline.js +508 -0
  157. package/API.md +332 -0
  158. package/CHANGELOG.md +3116 -0
  159. package/CODE_OF_CONDUCT.md +64 -0
  160. package/CONTRIBUTING.md +89 -0
  161. package/ERRORS.md +1658 -0
  162. package/LICENSE +21 -0
  163. package/README.md +491 -2
  164. package/SECURITY.md +72 -0
  165. package/START-HERE.md +164 -0
  166. package/SUPPORT.md +109 -0
  167. package/adapters/presentation/README.md +113 -0
  168. package/adapters/presentation/check.js +101 -0
  169. package/adapters/presentation/deck.schema.json +74 -0
  170. package/adapters/presentation/to-doc.js +138 -0
  171. package/ai/START-HERE.md +104 -0
  172. package/ai/behaviors.json +380 -0
  173. package/ai/behaviors.schema.json +61 -0
  174. package/ai/capabilities.json +56 -0
  175. package/ai/cli.js +387 -0
  176. package/ai/components.json +1944 -0
  177. package/ai/components.meta.json +168 -0
  178. package/ai/components.schema.json +220 -0
  179. package/ai/contract.schema.json +147 -0
  180. package/ai/deprecations.json +55 -0
  181. package/ai/deprecations.schema.json +85 -0
  182. package/ai/motion-policy.json +22 -0
  183. package/ai/patch.js +323 -0
  184. package/ai/patch.schema.json +63 -0
  185. package/ai/profiles.json +92 -0
  186. package/ai/tokens.audience.json +55 -0
  187. package/ai/tokens.audience.schema.json +73 -0
  188. package/ai/tokens.json +762 -0
  189. package/ai/tokens.schema.json +58 -0
  190. package/ai/tokens.tree.json +752 -0
  191. package/ai/tokens.tree.schema.json +56 -0
  192. package/ai/validate.js +383 -0
  193. package/dist/01-tokens/behavior/dismissable.js +60 -0
  194. package/dist/01-tokens/behavior/emit.js +21 -0
  195. package/dist/01-tokens/behavior/focus-return.js +31 -0
  196. package/dist/01-tokens/behavior/roving.js +77 -0
  197. package/dist/01-tokens/behavior/typeahead.js +61 -0
  198. package/dist/01-tokens/focus-ring.css +1 -0
  199. package/dist/01-tokens/page.css +1 -0
  200. package/dist/01-tokens/polyfill.js +78 -0
  201. package/dist/01-tokens/scrollbar.css +1 -0
  202. package/dist/01-tokens/theme-toggle.js +61 -0
  203. package/dist/01-tokens/tokens.css +1 -0
  204. package/dist/01-tokens/typography.css +1 -0
  205. package/dist/02-primitives/badge/badge.css +1 -0
  206. package/dist/02-primitives/button/button.css +1 -0
  207. package/dist/02-primitives/card/card.css +1 -0
  208. package/dist/02-primitives/choice/choice.css +1 -0
  209. package/dist/02-primitives/combobox/combobox.css +1 -0
  210. package/dist/02-primitives/combobox/combobox.js +439 -0
  211. package/dist/02-primitives/date-range/date-range.css +1 -0
  212. package/dist/02-primitives/date-range/date-range.js +267 -0
  213. package/dist/02-primitives/input/input.css +1 -0
  214. package/dist/02-primitives/popover/popover.css +1 -0
  215. package/dist/02-primitives/popover/popover.js +257 -0
  216. package/dist/02-primitives/progress/progress.css +1 -0
  217. package/dist/02-primitives/select/select.css +1 -0
  218. package/dist/02-primitives/select/select.js +449 -0
  219. package/dist/02-primitives/separator/separator.css +1 -0
  220. package/dist/02-primitives/skeleton/skeleton.css +1 -0
  221. package/dist/02-primitives/switch/switch.css +1 -0
  222. package/dist/03-patterns/accordion/accordion.css +1 -0
  223. package/dist/03-patterns/accordion/accordion.js +219 -0
  224. package/dist/03-patterns/content/content.css +1 -0
  225. package/dist/03-patterns/drawer/drawer.css +1 -0
  226. package/dist/03-patterns/drawer/drawer.js +229 -0
  227. package/dist/03-patterns/dropdown/dropdown.css +1 -0
  228. package/dist/03-patterns/dropdown/dropdown.js +365 -0
  229. package/dist/03-patterns/form-validation/form-validation.css +1 -0
  230. package/dist/03-patterns/list/flip.js +117 -0
  231. package/dist/03-patterns/list/list.css +1 -0
  232. package/dist/03-patterns/nav/nav.css +1 -0
  233. package/dist/03-patterns/nav/nav.js +322 -0
  234. package/dist/03-patterns/nav/toc.js +76 -0
  235. package/dist/03-patterns/overlay/overlay.css +1 -0
  236. package/dist/03-patterns/overlay/overlay.js +398 -0
  237. package/dist/03-patterns/pagination/pagination.css +1 -0
  238. package/dist/03-patterns/pagination/pagination.js +273 -0
  239. package/dist/03-patterns/reveal/reveal.css +1 -0
  240. package/dist/03-patterns/reveal/reveal.js +138 -0
  241. package/dist/03-patterns/states/states.css +1 -0
  242. package/dist/03-patterns/tabs/tabs.css +1 -0
  243. package/dist/03-patterns/tabs/tabs.js +242 -0
  244. package/dist/03-patterns/tooltip/tooltip.css +1 -0
  245. package/dist/03-patterns/tooltip/tooltip.js +213 -0
  246. package/dist/03-patterns/tree/tree.css +1 -0
  247. package/dist/03-patterns/tree/tree.js +383 -0
  248. package/dist/04-recipes/analysis-report/analysis-report.css +1 -0
  249. package/dist/04-recipes/detail-page/detail-page.css +1 -0
  250. package/dist/04-recipes/report/report.css +1 -0
  251. package/dist/04-recipes/table/table.css +1 -0
  252. package/dist/04-recipes/tierA-tokens.css +1 -0
  253. package/dist/09-assets/bar/bar.css +1 -0
  254. package/dist/09-assets/bar/bar.js +222 -0
  255. package/dist/09-assets/echarts-adapter/echarts-adapter.js +185 -0
  256. package/dist/09-assets/model-viewer/model-viewer.css +1 -0
  257. package/dist/09-assets/model-viewer/model-viewer.js +320 -0
  258. package/dist/09-assets/scientific-plot/scientific-plot.css +1 -0
  259. package/dist/09-assets/scientific-plot/scientific-plot.js +568 -0
  260. package/dist/09-assets/sparkline/sparkline.css +1 -0
  261. package/dist/09-assets/sparkline/sparkline.js +265 -0
  262. package/dist/COSTS.md +56 -0
  263. package/docs/AI-CONTRACT.md +197 -0
  264. package/docs/BACKLOG.md +127 -0
  265. package/docs/BENCHMARK.md +252 -0
  266. package/docs/GUIDANCE.md +154 -0
  267. package/docs/INVARIANT.md +372 -0
  268. package/docs/LAYER-BASELINE.md +158 -0
  269. package/docs/RELEASING.md +275 -0
  270. package/docs/RFC-THEME-SCOPE.md +141 -0
  271. package/docs/ROADMAP.md +182 -0
  272. package/index.html +82 -0
  273. package/package.json +107 -4
  274. package/types/index.d.ts +310 -0
package/04-recipes/data-showcase/demo.html ADDED
@@ -0,0 +1,247 @@
1
+ <!doctype html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <link rel="icon" href="data:,">
7
+ <title>data-showcase · 数据展示能力对照 · frontend-lib</title>
8
+
9
+ <link rel="stylesheet" href="../../01-tokens/tokens.css">
10
+ <link rel="stylesheet" href="../../01-tokens/typography.css">
11
+ <link rel="stylesheet" href="../../01-tokens/focus-ring.css">
12
+ <link rel="stylesheet" href="../../01-tokens/page.css">
13
+
14
+ <link rel="stylesheet" href="../../09-assets/sparkline/sparkline.css">
15
+ <link rel="stylesheet" href="../../09-assets/scientific-plot/scientific-plot.css">
16
+ <link rel="stylesheet" href="../../04-recipes/table/table.css">
17
+
18
+ <style>
19
+ /* 本示例页自己的排布，不属于组件 */
20
+ .row4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
21
+ gap: var(--sp-3); margin: var(--sp-4) 0; }
22
+ .kpi { padding: var(--sp-3); background: var(--surface-raised);
23
+ border: 1px solid var(--border-decor); border-radius: var(--r-md); }
24
+ .kpi__label { font-size: var(--fs-xs); color: var(--text-tertiary); margin: 0 0 var(--sp-1); }
25
+ .kpi__value { font-size: var(--fs-xl); font-weight: 600; margin: 0 0 var(--sp-2);
26
+ font-variant-numeric: tabular-nums; }
27
+ .kpi__foot { font-size: var(--fs-xs); color: var(--text-tertiary); margin: var(--sp-2) 0 0; }
28
+ .when { font-size: var(--fs-sm); color: var(--text-secondary); }
29
+ .when b { color: var(--text-primary); }
30
+ .figbox { border: 1px solid var(--border-decor); border-radius: var(--r-md);
31
+ padding: var(--sp-3); background: var(--surface); margin: var(--sp-4) 0;
32
+ overflow-x: auto; }
33
+ /* 图注：写在图纸外面以免挡住数据；用 figcaption 而不是 <p> ——
34
+ 屏幕阅读器会把它读成「图 1 的说明」，语义本身就是信息。 */
35
+ .figbox figcaption { margin-top: var(--sp-2); font-size: var(--fs-xs);
36
+ color: var(--text-tertiary); }
37
+ </style>
38
+ </head>
39
+ <body class="page">
40
+ <main class="wrap">
41
+
42
+ <h1>数据展示能力对照</h1>
43
+ <p class="lede">
44
+ 同一套设计令牌，四种不同的表达方式。它们回答的问题不一样，
45
+ 所以<strong>不能用同一个组件凑合</strong>。
46
+ </p>
47
+ <p class="note">
48
+ 本页用于对照"各自的适用场景"，不是组件大集合。每节只放该能力最典型的一种形态。
49
+ </p>
50
+
51
+ <!-- ================================================================= -->
52
+ <h2 class="rule-top">1 · BI 迷你趋势（经营指标）</h2>
53
+ <p class="when">
54
+ 回答的问题：<b>"这个指标最近是涨还是跌？"</b>
55
+ —— 只给形状，不给精确数值。适合放在标题旁、卡片角上，一屏能扫过十几个。
56
+ </p>
57
+
58
+ <div class="row4">
59
+ <div class="kpi">
60
+ <p class="kpi__label">月活跃用户</p>
61
+ <p class="kpi__value num-lg">128.4 万</p>
62
+ <span class="sparkline" data-spark="98,104,101,112,109,118,121,117,124,126,123,128"
63
+ data-spark-height="28" data-spark-last="yes"></span>
64
+ <p class="kpi__foot">近 12 个月</p>
65
+ </div>
66
+ <div class="kpi">
67
+ <p class="kpi__label">订单转化率</p>
68
+ <p class="kpi__value num-lg">3.42%</p>
69
+ <span class="sparkline" data-spark="2.1,2.4,2.3,2.7,2.9,2.8,3.0,3.1,3.0,3.3,3.4,3.42"
70
+ data-spark-height="28" data-spark-color="var(--success)"></span>
71
+ <p class="kpi__foot">近 12 个月</p>
72
+ </div>
73
+ <div class="kpi">
74
+ <p class="kpi__label">退款率</p>
75
+ <p class="kpi__value num-lg">1.08%</p>
76
+ <span class="sparkline" data-spark="1.9,1.8,1.7,1.6,1.5,1.6,1.4,1.3,1.3,1.2,1.1,1.08"
77
+ data-spark-type="bar" data-spark-height="28" data-spark-color="var(--text-tertiary)"></span>
78
+ <p class="kpi__foot">近 12 个月</p>
79
+ </div>
80
+ </div>
81
+ <p class="table__foot">数据来源：示例数据，用于演示 sparkline 的三种形态（线 / 面积 / 柱）。</p>
82
+
83
+ <!-- ================================================================= -->
84
+ <h2 class="rule-top">2 · 科学坐标图（数值 + 不确定性）</h2>
85
+ <p class="when">
86
+ 回答的问题：<b>"这些测量值落在哪？误差多大？"</b>
87
+ —— 需要真实坐标轴、单位、误差棒。BI 迷你趋势给不了这些：
88
+ 它没有数值轴，也不表达不确定性。
89
+ </p>
90
+
91
+ <figure class="figbox">
92
+ <div id="scatter"></div>
93
+ <figcaption>
94
+ 图 1 · 反应温度与转化率的关系（散点为实测均值，误差棒为 ±1 标准差）。
95
+ 示例数据，非真实实验结果。
96
+ </figcaption>
97
+ </figure>
98
+
99
+ <!-- ================================================================= -->
100
+ <h2 class="rule-top">3 · 学术出版表格</h2>
101
+ <p class="when">
102
+ 回答的问题：<b>"哪个方案在哪个指标上更好？"</b>
103
+ —— 需要逐格比对数值，所以去掉竖线与斑马纹，只留三条线。
104
+ 多级表头用 <code>scope</code> 标明层级。
105
+ </p>
106
+
107
+ <div class="table table--academic">
108
+ <table>
109
+ <caption class="table__cap">表 1 · 三种干燥工艺的成品性能对比（示例数据）</caption>
110
+ <thead>
111
+ <tr>
112
+ <th scope="col" rowspan="2">工艺</th>
113
+ <th scope="colgroup" colspan="2">含水率</th>
114
+ <th scope="colgroup" colspan="2">机械强度</th>
115
+ </tr>
116
+ <tr>
117
+ <th scope="col">均值 <span class="table__unit">%</span></th>
118
+ <th scope="col">极差 <span class="table__unit">%</span></th>
119
+ <th scope="col">抗压 <span class="table__unit">MPa</span></th>
120
+ <th scope="col">抗折 <span class="table__unit">MPa</span></th>
121
+ </tr>
122
+ </thead>
123
+ <tbody>
124
+ <tr>
125
+ <th scope="row">热风干燥</th>
126
+ <td class="num">4.2</td><td class="num">1.8</td>
127
+ <td class="num">38.4</td><td class="num">7.1</td>
128
+ </tr>
129
+ <tr>
130
+ <th scope="row">微波干燥</th>
131
+ <td class="num">2.7</td><td class="num">0.9</td>
132
+ <td class="num">41.2</td><td class="num">7.6</td>
133
+ </tr>
134
+ <tr>
135
+ <th scope="row">真空冷冻干燥</th>
136
+ <td class="num">1.4</td><td class="num">0.3</td>
137
+ <td class="num">35.8</td><td class="num">6.9</td>
138
+ </tr>
139
+ </tbody>
140
+ </table>
141
+ </div>
142
+ <p class="table__foot">注：每组 n = 5；含水率为干燥结束时的质量分数。示例数据。</p>
143
+
144
+ <!-- ================================================================= -->
145
+ <h2 class="rule-top">4 · 统计结果表</h2>
146
+ <p class="when">
147
+ 回答的问题：<b>"这个效应有多大？有多确定？"</b>
148
+ —— 估计值、标准误、置信区间、p 值各有书写惯例，
149
+ 不能用同一个数字格式化函数打发。<strong>本表不推断显著性，也不计算统计量。</strong>
150
+ </p>
151
+
152
+ <div class="table table--stats">
153
+ <table>
154
+ <caption class="table__cap">表 2 · 干燥工艺对含水率的影响（OLS 估计，示例数据，n = 60）</caption>
155
+ <thead>
156
+ <tr>
157
+ <th scope="col">变量</th>
158
+ <th scope="col">估计值 <span class="table__unit">(标准误)</span></th>
159
+ <th scope="col">95% 置信区间</th>
160
+ <th scope="col">p 值</th>
161
+ </tr>
162
+ </thead>
163
+ <tbody>
164
+ <tr>
165
+ <th scope="row">截距</th>
166
+ <td class="num">4.186 <span class="stat__se">(0.214)</span></td>
167
+ <td class="num stat__ci">[3.757, 4.615]</td>
168
+ <td class="num stat__p stat__p--sig">&lt; .001</td>
169
+ </tr>
170
+ <tr>
171
+ <th scope="row">微波干燥</th>
172
+ <td class="num">−1.492 <span class="stat__se">(0.301)</span></td>
173
+ <td class="num stat__ci">[−2.095, −0.889]</td>
174
+ <td class="num stat__p stat__p--sig">&lt; .001</td>
175
+ </tr>
176
+ <tr>
177
+ <th scope="row">真空冷冻干燥</th>
178
+ <td class="num">−2.774 <span class="stat__se">(0.301)</span></td>
179
+ <td class="num stat__ci">[−3.377, −2.171]</td>
180
+ <td class="num stat__p stat__p--sig">&lt; .001</td>
181
+ </tr>
182
+ <tr>
183
+ <th scope="row">初始含水率</th>
184
+ <td class="num">0.041 <span class="stat__se">(0.058)</span></td>
185
+ <td class="num stat__ci">[−0.075, 0.157]</td>
186
+ <td class="num stat__p">.482</td>
187
+ </tr>
188
+ </tbody>
189
+ </table>
190
+ </div>
191
+ <p class="table__foot">
192
+ 注：参照组为「热风干燥」；括号内为标准误。
193
+ 置信区间与 p 值由调用方计算并提供，本表只负责呈现。
194
+ 示例数据，非真实研究结果。
195
+ </p>
196
+
197
+ <!-- ================================================================= -->
198
+ <h2 class="rule-top">5 · 它们的分工</h2>
199
+ <div class="table">
200
+ <table>
201
+ <caption class="table__cap">表 3 · 四种表达方式各自回答什么问题</caption>
202
+ <thead>
203
+ <tr>
204
+ <th scope="col">表达方式</th>
205
+ <th scope="col">回答的问题</th>
206
+ <th scope="col">不负责</th>
207
+ </tr>
208
+ </thead>
209
+ <tbody>
210
+ <tr><th scope="row">迷你趋势</th><td>指标是涨还是跌</td><td>精确数值、单位、不确定性</td></tr>
211
+ <tr><th scope="row">科学坐标图</th><td>值落在哪、误差多大</td><td>统计推断、显著性</td></tr>
212
+ <tr><th scope="row">学术表格</th><td>哪个方案在哪个指标上更好</td><td>趋势形状、时间序列</td></tr>
213
+ <tr><th scope="row">统计结果表</th><td>效应大小与确定程度</td><td>原始测值的分布</td></tr>
214
+ </tbody>
215
+ </table>
216
+ </div>
217
+
218
+ </main>
219
+
220
+ <script src="../../09-assets/sparkline/sparkline.js"></script>
221
+ <script src="../../09-assets/scientific-plot/scientific-plot.js"></script>
222
+ <script>
223
+ (function () {
224
+ 'use strict';
225
+ if (!window.ScientificPlot) return;
226
+
227
+ /* 温度 – 转化率：均值 + ±1 标准差 */
228
+ var data = [
229
+ [300, 12.4, 2.1], [320, 21.7, 2.6], [340, 33.2, 3.0],
230
+ [360, 41.5, 2.8], [380, 47.3, 3.4], [400, 51.8, 3.1]
231
+ ];
232
+
233
+ window.ScientificPlot.render(document.getElementById('scatter'), {
234
+ width: 700, height: 340,
235
+ title: '反应温度与转化率的关系',
236
+ desc: '误差棒为 ±1 标准差',
237
+ x: { label: '反应温度', unit: 'K', scale: 'linear', domain: [290, 410] },
238
+ y: { label: '转化率', unit: '%', scale: 'linear', domain: [0, 60] },
239
+ series: [
240
+ { type: 'errorbar', data: data },
241
+ { type: 'scatter', data: data.map(function (p) { return [p[0], p[1]]; }) }
242
+ ]
243
+ });
244
+ })();
245
+ </script>
246
+ </body>
247
+ </html>
package/04-recipes/detail-page/README.md ADDED
@@ -0,0 +1,93 @@
1
+ # detail-page · 实体详情页骨架
2
+
3
+ 同一张图纸装三种数据状态：**字段齐全 / 部分缺失 / 一条数据都没有**。
4
+ 三个变体的 DOM 结构**完全一致**，差异只在文案、数值、说明块。
5
+
6
+ ## 为什么需要它
7
+
8
+ 产品里"同一类对象、字段多少不一"是常态：有的字段齐全，有的只接了一半，
9
+ 有的还没接。常见做法是每遇到一种情况就改一版结构 —— 结果是同一类页面越改越不像，
10
+ 最后没人能说清"这页到底应该长什么样"。
11
+
12
+ 这张配方把结构钉死，把差异收进三个变量层：
13
+
14
+ | 允许变的 | 不许变的 |
15
+ |---|---|
16
+ | 文案 / 数值 / 说明块写什么 | DOM 结构（节点数量与嵌套） |
17
+ | 色对（换肤挂在 `section` 上） | 组件层级与语义标签 |
18
+ | 媒体策略（缺图时的占位方式） | 类名 |
19
+
20
+ ## 三个变体
21
+
22
+ | 文件 | 状态 | 关键点 |
23
+ |---|---|---|
24
+ | `full.html` | 字段齐全 | 说明块承担"数据完整度"的告知 |
25
+ | `partial.html` | 部分缺失 | 缺的那项写「未披露」+ 弱化色，**不是 0，也不是删节点** |
26
+ | `null.html` | 无数据 | 不隐藏、不冒充零、必须写清原因 |
27
+ | `demo.html` | 入口页 | 三者的索引 + 规则摘要 |
28
+
29
+ ## 用法
30
+
31
+ ```html
32
+ <link rel="stylesheet" href="agentcss/recipes/detail-page/detail-page.css">
33
+
34
+ <section class="detail-page">
35
+ <div class="detail-hero">
36
+ <div class="detail-hero__deco" aria-hidden="true"></div>
37
+ <div class="detail-hero__body">
38
+ <p class="detail-hero__eyebrow">分类 · 编号</p>
39
+ <h1 class="detail-hero__title">对象名</h1>
40
+ <p class="detail-hero__meta"><span>属性一</span><span>属性二</span></p>
41
+ </div>
42
+ </div>
43
+
44
+ <div class="detail-kpis">
45
+ <div class="detail-kpi">
46
+ <span class="detail-kpi__label">指标名</span>
47
+ <span class="num detail-kpi__value">128</span>
48
+ <span class="num detail-kpi__delta">较上月 +6%</span>
49
+ </div>
50
+ </div>
51
+
52
+ <div class="detail-null">
53
+ <p class="detail-null__title">数据完整度：3 / 3</p>
54
+ <p class="detail-null__reason">三项指标均已接入，更新至 2026-10-22。</p>
55
+ </div>
56
+ </section>
57
+ ```
58
+
59
+ 数值一律带 `num` 类（来自 `01-tokens/typography.css`）——本库只有一套等宽数字规则，
60
+ 组件不许自己写 `font-variant-numeric`（`numeric-gate` 会查）。
61
+
62
+ ## 三条结构规则
63
+
64
+ 1. **装饰层与内容层是平级兄弟**，不是父子。
65
+ 装饰层必须 `pointer-events: none` 且不含内容 —— 否则它会吃掉点击、挤走内容。
66
+ 2. **皮肤挂在 `section`（`.detail-page`）上，不挂 `body`**。
67
+ 同一页不同区块可以各自换肤，这是"每块长得不一样但共用一套 CSS"的结构前提。
68
+ 3. **DOM 不许变**。字段缺失是"值缺失"，不是"节点缺失"。
69
+
70
+ ## 无数据态的三条硬规则
71
+
72
+ | 规则 | 为什么 |
73
+ |---|---|
74
+ | 不隐藏 | 整块消失会让读者以为"这页没有这项"，而不是"这项没有数据" |
75
+ | 不用 0 冒充 | 0 是"确实是零"，缺失是"没有数据"，语义相反，会直接导致错误结论 |
76
+ | 必须给理由 | 读者要知道"为什么看不到"；只留白等于让人猜 |
77
+
78
+ ## 校验收口
79
+
80
+ ```bash
81
+ python 04-recipes/detail-page/verify-skeleton.py # 三变体同构 + 都进视觉基线
82
+ python 05-audit/no-data-gate.py # 无数据态三条规则
83
+ ```
84
+
85
+ `verify-skeleton.py` 是转发入口，实现在 `05-audit/detail-page-contract.py` ——
86
+ **同一份代码**，避免门禁与配方各写一套然后慢慢漂移。
87
+
88
+ ## 边界
89
+
90
+ - **不含业务字段**：示例用中性的"对象 / 指标"，不写营收、净利这类字段。
91
+ 一旦把某个业务的字段写进通用库，库的边界就没了。
92
+ - **不做图表**：指标卡只放数字。要图请用 `09-assets/` 的图表组件。
93
+ - **不做标签页 / 折叠**：那是 `03-patterns/` 的组件，这里只给骨架。
package/04-recipes/detail-page/demo.html ADDED
@@ -0,0 +1,55 @@
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <link rel="icon" href="data:,">
7
+ <title>detail-page · 实体详情页骨架</title>
8
+ <link rel="stylesheet" href="../../01-tokens/tokens.css">
9
+ <link rel="stylesheet" href="../../01-tokens/typography.css">
10
+ <link rel="stylesheet" href="../../01-tokens/page.css">
11
+ <link rel="stylesheet" href="../../02-primitives/button/button.css">
12
+ <link rel="stylesheet" href="detail-page.css">
13
+ <style>
14
+ .dp-links { display: grid; gap: 12px; margin: 16px 0 24px; }
15
+ .dp-link { display: block; padding: 14px 16px; border-radius: var(--r-md);
16
+ border: 1px solid var(--border-decor); background: var(--surface-raised);
17
+ text-decoration: none; color: var(--text-primary); }
18
+ .dp-link__t { font-weight: 600; }
19
+ .dp-link__d { display: block; margin-top: 4px; font-size: var(--fs-sm);
20
+ color: var(--text-secondary); }
21
+ </style>
22
+ </head>
23
+ <body class="page">
24
+ <main class="wrap">
25
+ <h1>detail-page · 实体详情页骨架</h1>
26
+ <p class="lede">
27
+ 同一张图纸要装下三种数据状态，而 <strong>DOM 结构一个节点都不变</strong>：
28
+ 差异只在文案、数值、以及说明块写什么。三个变体见下，结构由
29
+ <code>05-audit/detail-page-contract.py</code> 逐标签比对。
30
+ </p>
31
+
32
+ <nav class="dp-links">
33
+ <a class="dp-link" href="full.html">
34
+ <span class="dp-link__t">① 字段齐全（full）</span>
35
+ <span class="dp-link__d">三项指标都有值，说明块承担"数据完整度"的告知。</span>
36
+ </a>
37
+ <a class="dp-link" href="partial.html">
38
+ <span class="dp-link__t">② 部分缺失（partial）</span>
39
+ <span class="dp-link__d">缺的那项写"未披露"并用弱化色 —— 不是 0，也不是删掉节点。</span>
40
+ </a>
41
+ <a class="dp-link" href="null.html">
42
+ <span class="dp-link__t">③ 无数据（null）</span>
43
+ <span class="dp-link__d">一条数据都没有时页面仍然成立：不隐藏、不冒充零、必须说清原因。</span>
44
+ </a>
45
+ </nav>
46
+
47
+ <h2 class="rule-top">三条结构规则</h2>
48
+ <p>
49
+ ① 装饰层与内容层是<strong>平级兄弟</strong>，装饰不吃点击（<code>pointer-events: none</code>）；<br>
50
+ ② 皮肤挂在 <code>section</code> 上，不挂 <code>body</code>；<br>
51
+ ③ <strong>DOM 不许变</strong>，字段缺失是值缺失，不是节点缺失。
52
+ </p>
53
+ </main>
54
+ </body>
55
+ </html>
package/04-recipes/detail-page/detail-page.css ADDED
@@ -0,0 +1,190 @@
1
+ /* ============================================================================
2
+ detail-page — 实体详情页骨架
3
+ ============================================================================
4
+ 🔴 它解决的是"同一类页面，字段多少不一，但结构必须一致"这件事。
5
+ ---------------------------------------------------------------------------
6
+ 同一张图纸要能装下三种数据状态：
7
+ full 字段齐全
8
+ partial 部分缺失（有的有、有的没）
9
+ null 一条数据都没有
10
+ 三个变体的 **DOM 结构完全相同**，差异只在三处：
11
+ ① 文案 ② 数值 ③ 有无说明块
12
+ ⇒ `verify-skeleton.py` 用标签序列比对来守这件事。
13
+ 没有它，"同构"会在第二次修改时悄悄失效。
14
+
15
+ 🔴 三条结构规则（比任何样式细节都值钱）
16
+ ---------------------------------------------------------------------------
17
+ 1. **装饰层与内容层是平级兄弟**，不是父子。
18
+ 装饰永远不能影响内容布局，也不能吃点击（pointer-events: none）。
19
+ 父子关系会让装饰的内边距/定位把内容挤走 —— 这是最常见的翻车方式。
20
+ 2. **皮肤挂在 section 上，不挂 body**。
21
+ 同一页里不同区块可以各自换肤；挂 body 就只能整页一个肤色。
22
+ 3. **DOM 不许变**。差异只允许出现在色对 / 媒体策略 / 尾部说明块。
23
+ 字段缺失是"值缺失"，不是"节点缺失"。
24
+
25
+ 🔴 无数据态是一等状态（本文件最重要的一条）
26
+ ---------------------------------------------------------------------------
27
+ · 不隐藏：整块消失会让读者以为"这页没有这项"
28
+ · 不用 0 冒充：0 是"确实是零"，缺失是"没有数据"，语义相反
29
+ · 必须给理由：读者要知道"为什么看不到"，而不是猜
30
+ ⇒ 这三条由 `05-audit/no-data-gate.py` 机检。
31
+
32
+ 🔴 视觉强度按产品页取，不按作品集取
33
+ ---------------------------------------------------------------------------
34
+ 1px 描边 / 字重 500–600 / 行高 ≥1.4。3px 描边 + 900 字重
35
+ 在高密度页面上会把内容压死。
36
+ ========================================================================= */
37
+
38
+ .detail-page {
39
+ --detail-gap: var(--sp-4);
40
+ display: block;
41
+ }
42
+
43
+ /* 示例页顶部的"这是哪个变体"标签。
44
+ 🔴 刻意不用 h1：页面主标题是 .detail-hero__title（对象名），
45
+ 一个页面只该有一个 h1 —— 否则照着这份模板抄的人会复制出两个。 */
46
+ .dp-demo {
47
+ margin: 0 0 var(--sp-3);
48
+ font-size: var(--fs-xs);
49
+ color: var(--text-tertiary);
50
+ letter-spacing: .02em;
51
+ }
52
+
53
+ /* ---- 1 · 头部：装饰层与内容层平级 ---- */
54
+ .detail-hero {
55
+ position: relative;
56
+ padding: var(--sp-5) var(--sp-4);
57
+ border: 1px solid var(--border-decor);
58
+ border-radius: var(--r-lg);
59
+ background: var(--surface-raised);
60
+ overflow: hidden;
61
+ }
62
+
63
+ /* 装饰层：不吃点击、不参与布局、读屏忽略 */
64
+ .detail-hero__deco {
65
+ position: absolute;
66
+ inset: 0;
67
+ pointer-events: none;
68
+ background:
69
+ radial-gradient(120% 80% at 100% 0%, var(--accent-soft) 0%, transparent 60%);
70
+ opacity: .9;
71
+ }
72
+
73
+ .detail-hero__body {
74
+ position: relative; /* 压在装饰层之上，但布局不受它影响 */
75
+ }
76
+
77
+ .detail-hero__eyebrow {
78
+ margin: 0 0 var(--sp-1);
79
+ font-size: var(--fs-xs);
80
+ color: var(--text-tertiary);
81
+ letter-spacing: .02em;
82
+ }
83
+
84
+ .detail-hero__title {
85
+ margin: 0;
86
+ font-size: var(--fs-xl);
87
+ line-height: 1.3;
88
+ font-weight: 600;
89
+ color: var(--text-primary);
90
+ }
91
+
92
+ .detail-hero__meta {
93
+ margin: var(--sp-2) 0 0;
94
+ display: flex;
95
+ gap: var(--sp-2);
96
+ flex-wrap: wrap;
97
+ font-size: var(--fs-sm);
98
+ color: var(--text-secondary);
99
+ }
100
+
101
+ /* ---- 2 · 关键指标：网格，缺哪个都不断版 ---- */
102
+ .detail-kpis {
103
+ display: grid;
104
+ grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
105
+ gap: var(--detail-gap);
106
+ margin: var(--detail-gap) 0;
107
+ }
108
+
109
+ .detail-kpi {
110
+ padding: var(--sp-3);
111
+ border: 1px solid var(--border-decor);
112
+ border-radius: var(--r-md);
113
+ background: var(--surface);
114
+ }
115
+
116
+ .detail-kpi__label {
117
+ display: block;
118
+ font-size: var(--fs-xs);
119
+ color: var(--text-tertiary);
120
+ }
121
+
122
+ .detail-kpi__value {
123
+ display: block;
124
+ margin-top: var(--sp-1);
125
+ font-size: var(--fs-lg);
126
+ font-weight: 600;
127
+ color: var(--text-primary);
128
+ }
129
+
130
+ .detail-kpi__delta {
131
+ display: block;
132
+ margin-top: var(--sp-1);
133
+ font-size: var(--fs-xs);
134
+ color: var(--text-secondary);
135
+ }
136
+
137
+ /* 缺失值：用文本表达，不用 0，也不用空字符串 */
138
+ /* 缺失值是"文本"，不是"数字"：用正文档字号，不跟着指标字号走。
139
+ 否则 393 宽下三列会折成两行（实测「暂无数／据」）。 */
140
+ .detail-kpi__value--missing {
141
+ color: var(--text-tertiary);
142
+ font-weight: 500;
143
+ font-size: var(--fs-md);
144
+ white-space: nowrap;
145
+ }
146
+
147
+ /* ---- 3 · 无数据说明块：可解释，不占位 ---- */
148
+ .detail-null {
149
+ padding: var(--sp-4);
150
+ border: 1px dashed var(--border-decor-str);
151
+ border-radius: var(--r-md);
152
+ background: var(--surface-sunken);
153
+ }
154
+
155
+ .detail-null__title {
156
+ margin: 0 0 var(--sp-2);
157
+ font-size: var(--fs-md);
158
+ font-weight: 600;
159
+ color: var(--text-primary);
160
+ }
161
+
162
+ .detail-null__reason {
163
+ margin: 0;
164
+ font-size: var(--fs-sm);
165
+ line-height: 1.5;
166
+ color: var(--text-secondary);
167
+ }
168
+
169
+ /* ---- 4 · 正文 ---- */
170
+ .detail-body {
171
+ margin-top: var(--detail-gap);
172
+ }
173
+
174
+ .detail-body__section + .detail-body__section {
175
+ margin-top: var(--sp-4);
176
+ }
177
+
178
+ .detail-body__heading {
179
+ margin: 0 0 var(--sp-2);
180
+ font-size: var(--fs-md);
181
+ font-weight: 600;
182
+ color: var(--text-primary);
183
+ }
184
+
185
+ .detail-body__text {
186
+ margin: 0;
187
+ font-size: var(--fs-sm);
188
+ line-height: 1.6;
189
+ color: var(--text-secondary);
190
+ }
package/04-recipes/detail-page/full.html ADDED
@@ -0,0 +1,60 @@
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <link rel="icon" href="data:,">
7
+ <title>detail-page · 完整数据</title>
8
+ <link rel="stylesheet" href="../../01-tokens/tokens.css">
9
+ <link rel="stylesheet" href="../../01-tokens/typography.css">
10
+ <link rel="stylesheet" href="../../01-tokens/page.css">
11
+ <link rel="stylesheet" href="detail-page.css">
12
+ </head>
13
+ <body class="page">
14
+ <main class="wrap">
15
+ <p class="dp-demo">detail-page · 字段齐全</p>
16
+ <p class="lede">同一张图纸的三种数据状态之一。三个变体的 DOM 结构完全一致，差别只在文案与数值。</p>
17
+
18
+ <section class="detail-page" data-state="full">
19
+ <div class="detail-hero">
20
+ <div class="detail-hero__deco" aria-hidden="true"></div>
21
+ <div class="detail-hero__body">
22
+ <p class="detail-hero__eyebrow">服务 · SVC-1024</p>
23
+ <h1 class="detail-hero__title">示例对象 A</h1>
24
+ <p class="detail-hero__meta"><span>分类：基础服务</span><span>状态：运行中</span></p>
25
+ </div>
26
+ </div>
27
+
28
+ <div class="detail-kpis">
29
+ <div class="detail-kpi">
30
+ <span class="detail-kpi__label">月度调用量</span>
31
+ <span class="num detail-kpi__value">1,284 万</span>
32
+ <span class="num detail-kpi__delta">较上月 +6.2%</span>
33
+ </div>
34
+ <div class="detail-kpi">
35
+ <span class="detail-kpi__label">平均响应</span>
36
+ <span class="num detail-kpi__value">128 ms</span>
37
+ <span class="num detail-kpi__delta">较上月 -11 ms</span>
38
+ </div>
39
+ <div class="detail-kpi">
40
+ <span class="detail-kpi__label">可用率</span>
41
+ <span class="num detail-kpi__value">99.95%</span>
42
+ <span class="num detail-kpi__delta">近 30 天</span>
43
+ </div>
44
+ </div>
45
+
46
+ <div class="detail-null">
47
+ <p class="detail-null__title">数据完整度：3 / 3</p>
48
+ <p class="detail-null__reason">三项指标均已接入，更新至 2026-10-22。</p>
49
+ </div>
50
+
51
+ <article class="detail-body">
52
+ <section class="detail-body__section">
53
+ <h2 class="detail-body__heading">概览</h2>
54
+ <p class="detail-body__text">字段齐全时，指标区三张卡都填满；说明块此时承担"数据完整度"的告知职责，而不是占位。</p>
55
+ </section>
56
+ </article>
57
+ </section>
58
+ </main>
59
+ </body>
60
+ </html>