跨文档状态实验室

同一篇 Markdown 中的多个 slex 代码块可以通过相同 namespace 共享 g 状态。

下面是三个独立的 `

## 主控面板

slex { slex: "0.1", namespace: "example_cross_doc_lab", g: { color: "blue", size: 16, theme: "light", style: function () { return 'color: ' + this.color + '; font-size: ' + this.size + 'px;'; } }, layout: { "section:control": { eyebrow: "平台能力", title: "跨文档状态实验室 · 主控面板", subtitle: "修改以下任何参数——下方两个独立 fence 块的卡片会同步更新。", "grid:controls": { columns: 1, mdColumns: 3, "select:color": { label: "文字颜色", "$value": "g.color", options: [ { label: "蓝色", value: "blue" }, { label: "绿色", value: "green" }, { label: "橙色", value: "orange" }, { label: "紫色", value: "purple" } ], onchange: "g.color = String($event)" }, "slider:size": { label: "字体大小", "$value": "g.size", min: 8, max: 48, step: 2, unit: "px", onchange: "g.size = Number($event)" }, "select:theme": { label: "卡片主题", "$value": "g.theme", options: [ { label: "明亮", value: "light" }, { label: "暗色", value: "dark" }, { label: "信息", value: "info" } ], onchange: "g.theme = String($event)" } }, "badge:note": { "$label": "'样式 ' + g.color + ' ' + g.size + 'px'", tone: "info" } } } }


## 观察面板 A（同一 namespace，不同 fence 块）

<div class="slex-prerender-placeholder" data-slex-source="c2xleDogIjAuMSIsCiAgbmFtZXNwYWNlOiAiZXhhbXBsZV9jcm9zc19kb2NfbGFiIiwKICBsYXlvdXQ6IHsKICAgICJjYXJkOmEiOiB7CiAgICAgIHRpdGxlOiAi6KeC5a+f6Z2i5p2/IEEg4oCUIOe6r+aWh+acrOagt+W8jyIsCiAgICAgICJjb2x1bW46c3R5bGVQcmV2aWV3IjogewogICAgICAgICJ0ZXh0OnN0eWxlTWV0YSI6IHsgIiR0ZXh0IjogIiflrZfkvZPlpKflsI/vvJonICsgZy5zaXplICsgJ3B4JyIgfSwKICAgICAgICAidGV4dDpzdHlsZWRWYWx1ZSI6IHsgIiR0ZXh0IjogImcuY29sb3IiLCAiJGNvbG9yIjogImcuY29sb3IiLCAiJHNpemUiOiAiZy5zaXplIiB9CiAgICAgIH0sCiAgICAgICJjYWxsb3V0OnByZXZpZXciOiB7CiAgICAgICAgIiR0b25lIjogImcudGhlbWUgPT09ICdkYXJrJyA/ICdkYW5nZXInIDogZy50aGVtZSA9PT0gJ2luZm8nID8gJ2luZm8nIDogJ3N1Y2Nlc3MnIiwKICAgICAgICAiJHRleHQiOiAiZy50aGVtZSA9PT0gJ2RhcmsnID8gJ+aal+iJsuaooeW8j++8mumAguWQiOWknOmXtOmYheivu+eahOmFjeiJsuaWueahiOOAgicgOiBnLnRoZW1lID09PSAnaW5mbycgPyAn5L+h5oGv5qih5byP77ya55So5LqO5by66LCD5oqA5pyv57uG6IqC44CCJyA6ICfmmI7kuq7mqKHlvI/vvJrpu5jorqTnmoTmlofmoaPpmIXor7vphY3oibLjgIInIgogICAgICB9CiAgICB9CiAgfQp9"><pre><code class="language-slex">slex: &quot;0.1&quot;,
  namespace: &quot;example_cross_doc_lab&quot;,
  layout: {
    &quot;card:a&quot;: {
      title: &quot;观察面板 A — 纯文本样式&quot;,
      &quot;column:stylePreview&quot;: {
        &quot;text:styleMeta&quot;: { &quot;$text&quot;: &quot;'字体大小：' + g.size + 'px'&quot; },
        &quot;text:styledValue&quot;: { &quot;$text&quot;: &quot;g.color&quot;, &quot;$color&quot;: &quot;g.color&quot;, &quot;$size&quot;: &quot;g.size&quot; }
      },
      &quot;callout:preview&quot;: {
        &quot;$tone&quot;: &quot;g.theme === 'dark' ? 'danger' : g.theme === 'info' ? 'info' : 'success'&quot;,
        &quot;$text&quot;: &quot;g.theme === 'dark' ? '暗色模式：适合夜间阅读的配色方案。' : g.theme === 'info' ? '信息模式：用于强调技术细节。' : '明亮模式：默认的文档阅读配色。'&quot;
      }
    }
  }
}</code></pre></div>

## 观察面板 B

<div class="slex-prerender-placeholder" data-slex-source="c2xleDogIjAuMSIsCiAgbmFtZXNwYWNlOiAiZXhhbXBsZV9jcm9zc19kb2NfbGFiIiwKICBsYXlvdXQ6IHsKICAgICJjYXJkOmIiOiB7CiAgICAgIHRpdGxlOiAi6KeC5a+f6Z2i5p2/IEIg4oCUIOWPguaVsOivpuaDhSIsCiAgICAgICJncmlkOnBhcmFtcyI6IHsKICAgICAgICBjb2x1bW5zOiAxLCBtZENvbHVtbnM6IDMsCiAgICAgICAgInN0YXQ6Y29sIjogeyBsYWJlbDogIuminOiJsiIsICIkdmFsdWUiOiAiZy5jb2xvciIgfSwKICAgICAgICAic3RhdDpzeiI6IHsgbGFiZWw6ICLlrZflj7ciLCAiJHZhbHVlIjogImcuc2l6ZSIsIHVuaXQ6ICJweCIgfSwKICAgICAgICAic3RhdDp0aCI6IHsgbGFiZWw6ICLkuLvpopgiLCAiJHZhbHVlIjogImcudGhlbWUiIH0KICAgICAgfSwKICAgICAgImJhZGdlOnN5bmMiOiB7ICIkbGFiZWwiOiAiJ+W3suWQjOatpSAnICsgZy5jb2xvciIsICIkdG9uZSI6ICJnLmNvbG9yID09PSAnYmx1ZScgPyAnaW5mbycgOiBnLmNvbG9yID09PSAnZ3JlZW4nID8gJ3N1Y2Nlc3MnIDogZy5jb2xvciA9PT0gJ29yYW5nZScgPyAnd2FybmluZycgOiAnaW5mbyciIH0KICAgIH0KICB9Cn0="><pre><code class="language-slex">slex: &quot;0.1&quot;,
  namespace: &quot;example_cross_doc_lab&quot;,
  layout: {
    &quot;card:b&quot;: {
      title: &quot;观察面板 B — 参数详情&quot;,
      &quot;grid:params&quot;: {
        columns: 1, mdColumns: 3,
        &quot;stat:col&quot;: { label: &quot;颜色&quot;, &quot;$value&quot;: &quot;g.color&quot; },
        &quot;stat:sz&quot;: { label: &quot;字号&quot;, &quot;$value&quot;: &quot;g.size&quot;, unit: &quot;px&quot; },
        &quot;stat:th&quot;: { label: &quot;主题&quot;, &quot;$value&quot;: &quot;g.theme&quot; }
      },
      &quot;badge:sync&quot;: { &quot;$label&quot;: &quot;'已同步 ' + g.color&quot;, &quot;$tone&quot;: &quot;g.color === 'blue' ? 'info' : g.color === 'green' ? 'success' : g.color === 'orange' ? 'warning' : 'info'&quot; }
    }
  }
}</code></pre></div>

**三个 fence 块**，同一个 `namespace: "example_cross_doc_lab"`，所有组件共享 `g` 对象。主控面板中的颜色和大小变化会同步到两个观察面板。

---

### 这意味着什么？

在一篇长篇 Markdown 文档中：

[控制面板 — 选择行业/指标/时间范围] ... 30 段 Markdown 叙事 ... [图表 A — 自动反映控制面板的选项] ... 更多分析文字 ... [图表 B — 同一份状态的不同可视化]


每个 ` ```slex ` 块可以独立渲染；namespace 相同时，它们共享状态。常见用法包括：

- **技术白皮书**：顶部选参数，中间分析，底部结论，全程联动
- **项目协作文档**：状态跟踪表格在顶部，各团队任务卡片散布在正文中
- **AI 输出增强**：模型生成的多个可视化节点共享同一份推理结果

这些场景都依赖同一个机制：多块 fence 共享同一份状态，而不是把每块 UI 当成完全独立的组件。