构建一个 **Live Playground (实时演练场)** (用于展示引擎能力)

[hotlong]

对于 Object UI 这样一个“元数据驱动”的渲染引擎，Examples（示例/演示） 的设计至关重要。

普通的组件库（如 AntD）只需要展示“代码 vs 组件”。
但你需要展示的是 “JSON Schema vs 界面”。

** 构建一个 Live Playground (实时演练场) (用于展示引擎能力)。

我们重点讨论如何构建这个 Live Playground，因为这是你项目的“门面”。

---

1. 架构位置

建议在 Monorepo 中创建一个独立的 Vite 应用：

packages/
apps/
└── playground/        # 👈 对外发布的演示站点
    ├── package.json
    ├── src/
    │   ├── data/      # 预置的 JSON 案例
    │   ├── layout/    # 演练场的布局框架
    │   └── App.tsx
    └── vite.config.ts

---

2. 核心交互设计：Split View (左右分屏)

这是低代码引擎的标准演示形态。

• 左侧 (Editor): Monaco Editor (VS Code 风格编辑器)，显示 JSON/YAML。
• 右侧 (Preview): <SchemaRenderer /> 渲染结果。
• 功能：
• 实时编译： 左侧修改 JSON，右侧毫秒级更新。
• 错误高亮： 如果 JSON 格式错了，或者 Schema 校验不通过，直接标红。

---

3. 内容规划：你应该展示哪些 Case？

不要只放几个按钮，要按场景分类，证明你的引擎是“全能”的。

A. 基础原子 (Primitives)

展示你对 Shadcn 的封装能力。

• input.json: 各种状态的输入框（Required, Disabled, Error）。
• button.json: 不同 Level (Primary, Ghost, Destructive) 的按钮。

B. 复杂布局 (Layouts) - 这是你的杀手锏

证明你能搞定 B 端复杂的排版。

• grid-layout.json: 嵌套的 Grid，响应式 (col-span-1 md:col-span-2)。
• dashboard.json: 上面是 KPI 卡片，下面是图表和表格。
• tabs.json: 选项卡切换。

C. 数据联动 (Interactivity)

证明你不是静态的，支持数据域 (DataScope)。

• form-linkage.json:

• 当“国家”选择“中国”时，“省份”下拉框才显示。

• 表达式：visibleOn: "${country === 'cn'}"。

• crud-table.json: 一个带搜索栏、分页、操作列的完整表格。

---

4. 代码实现参考 (The Playground App)

你需要安装 @monaco-editor/react 来实现代码编辑体验。

// apps/playground/src/App.tsx
import React, { useState, useEffect } from 'react';
import Editor from '@monaco-editor/react';
import { SchemaRenderer } from '@object-ui/react';
import { standardComponents } from '@object-ui/components';
import { examples } from './data'; // 预置的案例列表

export default function Playground() {
  const [selectedExample, setSelectedExample] = useState('dashboard');
  const [code, setCode] = useState(examples['dashboard']);
  const [schema, setSchema] = useState(null);

  // 实时解析 JSON
  useEffect(() => {
    try {
      const parsed = JSON.parse(code);
      setSchema(parsed);
    } catch (e) {
      // JSON 语法错误时保持上一次的渲染，或显示错误提示
    }
  }, [code]);

  return (
    <div className="flex h-screen w-screen">
      {/* 1. 侧边栏：选择案例 */}
      <aside className="w-64 bg-slate-50 border-r p-4">
        <h1 className="font-bold mb-4">Object UI Examples</h1>
        {Object.keys(examples).map(key => (
          <button 
            key={key}
            onClick={() => { setSelectedExample(key); setCode(examples[key]); }}
            className={`block w-full text-left px-2 py-1 rounded ${key === selectedExample ? 'bg-blue-100 text-blue-600' : ''}`}
          >
            {key}
          </button>
        ))}
      </aside>

      {/* 2. 左侧：代码编辑器 */}
      <div className="w-1/2 h-full border-r">
        <Editor 
          height="100%" 
          defaultLanguage="json" 
          value={code} 
          onChange={(val) => setCode(val || '')}
          options={{ minimap: { enabled: false }, fontSize: 14 }}
        />
      </div>

      {/* 3. 右侧：实时预览 */}
      <div className="w-1/2 h-full bg-white overflow-auto p-8">
        <div className="max-w-4xl mx-auto border rounded-lg shadow-sm p-6 bg-white">
          {schema ? (
            <SchemaRenderer 
              schema={schema} 
              components={standardComponents} 
              // 模拟数据源，证明是 Standalone 的
              dataSource={{ find: async () => [] }} 
            />
          ) : (
             <div className="text-red-500">Invalid JSON</div>
          )}
        </div>
      </div>
    </div>
  );
}

---

5. 关键卖点植入

在 Playground 里，你还需要通过一些小细节来强化你的产品定位：

1. Tailwind Class 编辑:

• 在演示 button.json 时，故意加一行 "className": "bg-purple-500 hover:bg-purple-700"。
• 让用户修改这个字符串，右边按钮颜色立马变。
• 目的： 展示 "Tailwind Native" 的威力。

2. 移动端预览模式:

• 在右侧预览区加一个 [手机/平板/桌面] 的切换按钮，调整容器宽度。
• 目的： 展示 Responsive Grid 的能力。

3. Schema 导出:

• 加一个 "Copy Schema" 按钮。
• 目的： 方便开发者直接把调好的配置复制到他们的项目中。

总结

你的 apps/playground 是最好的销售工具。
它不需要后端，不需要 ObjectOS。它只需要证明：“给我一段 JSON，我还你一个漂亮的界面。”