跨文档状态实验室

这是 SlexKit 最独特的能力之一：在同一个 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+W8jyIsCiAgICAgICJzdGF0OnNpemUiOiB7ICIkbGFiZWwiOiAiJ+Wtl+S9k+Wkp+Wwj++8micgKyBnLnNpemUgKyAncHgnIiwgIiR2YWx1ZSI6ICJnLmNvbG9yIiB9LAogICAgICAiY2FsbG91dDpwcmV2aWV3IjogewogICAgICAgICIkdG9uZSI6ICJnLnRoZW1lID09PSAnZGFyaycgPyAnZGFuZ2VyJyA6IGcudGhlbWUgPT09ICdpbmZvJyA/ICdpbmZvJyA6ICdzdWNjZXNzJyIsCiAgICAgICAgIiR0ZXh0IjogImcudGhlbWUgPT09ICdkYXJrJyA/ICfmmpfoibLmqKHlvI/vvJrpgILlkIjlpJzpl7TpmIXor7vnmoTphY3oibLmlrnmoYjjgIInIDogZy50aGVtZSA9PT0gJ2luZm8nID8gJ+S/oeaBr+aooeW8j++8mueUqOS6juW8uuiwg+aKgOacr+e7huiKguOAgicgOiAn5piO5Lqu5qih5byP77ya6buY6K6k55qE5paH5qGj6ZiF6K+76YWN6Imy44CCJyIKICAgICAgfQogICAgfQogIH0KfQ=="><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;stat:size&quot;: { &quot;$label&quot;: &quot;'字体大小：' + g.size + 'px'&quot;, &quot;$value&quot;: &quot;g.color&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 输出增强**：模型生成的多个可视化节点共享同一份推理结果


都是极其强大的模式。这不是一个 "组件库" 能做到的——这是 SlexKit 的核心设计。