[teamai] Push 87 resource(s) from XingfenD

2026-09-10 16:10:45 +08:00
parent 425c9c078a
commit 65c04def51
1314 changed files with 211681 additions and 0 deletions
@@ -0,0 +1,86 @@
+# Raw 政策
+
+Raw 是 Beautiful Article 的关键表现力，但必须受**主题**和**文章性**约束。写 Raw 前先读
+选定主题的 `theme-profiles/<id>.md` 的 Raw 风格。
+
+## Raw 是完整的 Web 平台，不是"画 SVG"
+
+**Raw 里可以写任意 HTML / CSS / JS / React 组件 —— 整个 Web 平台都在你手里。** SVG 只是
+**其中一种**手段，绝不是默认或唯一。别把 Raw 想成"内联画图"，那会严重限制网页的想象力。
+按"哪种媒介最能讲清这一段"自由选择，例如：
+
+- **交互**：拖动条 / 切换 / 折叠 / 步进器 / 计算器 / 小型可调模型 / 假设演算。
+- **布局排版**：并排对比、时间线、卡片网格、分栏、引文大字、特殊标题节奏（用 HTML + CSS）。
+- **动效**：CSS transition / `@keyframes` / 滚动揭示 / 状态切换的动画。
+- **数据可视**：HTML/CSS 条形与热度、`<canvas>`、需要时才用 `<svg>` 折线 / slopegraph。
+- **嵌入与组合**：表格 + 控件 + 文本拼成的一次性小工具、可复制片段、对照面板。
+
+判断只问一句：**哪种实现最能服务这一段的理解 / 论证 / 节奏？** 用那个，而不是反射性地画 SVG。
+
+## 核心心法
+
+- **为 THIS 篇文章手写，不是 widget 库。** 每块 Raw 都应为它旁边的段落即时发明：写 token
+  成本？现写一个小拖动条；写两套方案？拼一个并排对照面板；写体积趋势？才考虑一条内联折线。
+  **绝不**把 Raw 做成一套固定小组件在文章间复用（同一条 pipeline / 同一套配色到处出现）——
+  那等于把自由层退化成又一组受限组件。
+- **自由但一致：用 token。** Raw 内部随便写 —— 任意 HTML / React 组件、`<style>` 与
+  `@keyframes`、行内样式、`<canvas>`、按需的 `<svg>`、一次性小交互 —— 但颜色 / 字体 / 间距
+  必须取自主题变量（`var(--ra-color-accent)`、`var(--ra-font-body)`、`var(--ra-space-4)` …），
+  这样每块都独一无二却又随主题切换。
+
+## 允许
+
+- 任意服务段落的 HTML / CSS / JS / React：轻量交互解释、可调小工具、自定义布局与排版、
+  并排对比、概念动效、阅读节奏中的视觉停顿，以及按需的 SVG / canvas 图解 —— 都是
+  为当前段落定制的一次性实现。
+
+## 禁止
+
+- 复杂表单、拖拽工作台、完整 dashboard、产品原型、和文章无关的动画、独立于主题的配色、
+  复用固定小组件冒充自由表达。
+
+## Raw by example（每次现写，别复用固定 widget）
+
+> 下面只是几种常见手段（SVG / CSS 动画 / React 交互），**不是穷举也不是优先级**。布局、
+> 排版、对照面板、`<canvas>`、嵌入式小工具同样都行 —— 按"最能讲清这一段"来选。
+
+```tsx
+// 1) 需要曲线时，才为这个数据点手画一条内联 SVG（不是默认手段）
+<Raw title="构建体积走势">
+  <svg viewBox="0 0 300 80" width="100%">
+    <polyline points={pts} fill="none" stroke="var(--ra-color-accent)" strokeWidth="2" />
+  </svg>
+</Raw>
+
+// 2) 带一次性 CSS / @keyframes 的 HTML 字符串（内联进产物）
+<Raw html={`
+  <style>@keyframes ra-rise{from{height:0}to{height:var(--h)}}</style>
+  <div style="display:flex;gap:8px;align-items:flex-end;height:80px">
+    <i style="--h:60%;flex:1;background:var(--ra-color-accent);animation:ra-rise .6s ease"></i>
+    <i style="--h:90%;flex:1;background:var(--ra-color-accent);animation:ra-rise .8s ease"></i>
+  </div>
+`} />
+
+// 3) 只为这篇文章定义的一个小交互组件
+function TokenScale() {
+  const [n, setN] = useState(50);
+  return (
+    <div>
+      <input type="range" value={n} onChange={(e) => setN(+e.target.value)} />
+      <span style={{ color: "var(--ra-color-accent)" }}>{n}%</span>
+    </div>
+  );
+}
+<Raw title="拖动感受差距"><TokenScale /></Raw>
+```
+
+整篇文章里变化这些 —— 不同媒介、不同布局、不同交互 —— 让没有两块 Raw 看起来一样。变化是好的，违反
+主题气质不行：`tufte` 的 Raw 不该变成发亮营销 dashboard，`press` 的 Raw 不该变成冷霓虹终端
+（除非主题 md 明确允许）。
+
+## Raw 自检
+
+- 这块 Raw 删掉后，文章理解是否会变差？
+- 它服务哪一个段落 / 论点？
+- 它是否使用 `--ra-*` token？是否符合主题 md？
+- 它是否让文章更像应用？（如果是，砍掉或收敛成服务阅读的解释性视觉 / 排版）