feat(docs): add appearance sandbox example

2026-09-21 17:09:54 +08:00
parent a9d6856ab8
commit fb985edb20
8 changed files with 92 additions and 0 deletions
@@ -9,6 +9,8 @@ toc:
    title: 组合主题卡片
  - id: connected-layer
    title: 状态连接层
+  - id: live-preview
+    title: 在线预览
 ---

 ## 受控原子组件 {#controlled-atoms}
@@ -39,3 +41,18 @@ toc:
 ## 状态连接层 {#connected-layer}

 `AppearanceSettings` 是原子组件与共享 `PreferencesProvider` 之间的默认连接层。自定义界面可以直接使用 `@workspace/preferences` 的 `usePreference` 读取单个字段，而不必复用默认布局。
+
+## 在线预览 {#live-preview}
+
+文档 Sandbox 可以加载通过类型检查的多文件示例，而不需要把实现细节内联到 MDX：
+
+<Sandbox example="appearance/theme-colors" title="主题颜色控件" />
+
+单文件示例不需要创建 Manifest，直接导入组件和原始源码即可：
+
+```mdx
+import Demo from "./Demo"
+import source from "./Demo.tsx?raw"
+
+<SingleFileSandbox component={Demo} filename="Demo.tsx" source={source} />
+```