vibe-registry/examples/playground/src/registry.ts

/**
 * playground 集中注册:widget 挂真实组件,layout 挂真实骨架
 * 这就是"项目侧注册"的完整形态 —— 之后 AI 生成页面只用 id,不碰实现
 */
import { registerLayout, registerWidget } from 'vibe-registry'
import { AdminLayout } from './layouts/admin.tsx'
import { DashboardLayout } from './layouts/dashboard.tsx'
import { PageHeader, DataTable, NavMenu, StatGrid } from './widgets.tsx'

// ── 布局注册(带真实渲染骨架 + demo 预览数据)──────────────────

registerLayout({
  kind: 'layout',
  id: 'admin',
  slots: ['sidebar', 'header', 'content', 'footer'],
  description: '后台管理骨架(侧栏+顶栏+内容)',
  render: AdminLayout,
  preview: {
    title: 'Admin 后台管理',
    demoBlocks: [
      { slot: 'sidebar', widget: 'nav-menu', props: { items: [{ label: '订单', active: true }, { label: '商品' }, { label: '客户' }] } },
      { slot: 'header', widget: 'page-header', props: { title: '订单管理', subtitle: '近 30 天全部订单' } },
      {
        slot: 'content',
        widget: 'data-table',
        props: {
          columns: [
            { key: 'id', title: '订单号' },
            { key: 'customer', title: '客户' },
            { key: 'amount', title: '金额' },
            { key: 'status', title: '状态' },
          ],
          rows: [
            { id: 'A1001', customer: '张三', amount: '¥1,299', status: '已支付' },
            { id: 'A1002', customer: '李四', amount: '¥88', status: '待发货' },
          ],
        },
      },
    ],
  },
})

registerLayout({
  kind: 'layout',
  id: 'dashboard',
  slots: ['stats', 'content'],
  description: '数据看板(顶部指标 + 主内容)',
  render: DashboardLayout,
  preview: {
    title: 'Dashboard 数据看板',
    demoBlocks: [
      {
        slot: 'stats',
        widget: 'stat-grid',
        props: {
          stats: [
            { label: '今日订单', value: 128, delta: '+12%' },
            { label: '销售额', value: '¥45,200', delta: '+8%' },
            { label: '失败率', value: '1.2%', delta: '-0.3%' },
          ],
        },
      },
      {
        slot: 'content',
        widget: 'data-table',
        props: {
          columns: [
            { key: 'name', title: '指标' },
            { key: 'value', title: '数值' },
          ],
          rows: [
            { name: '订单转化率', value: '3.4%' },
            { name: '客单价', value: '¥353' },
          ],
        },
      },
    ],
  },
})

registerLayout({
  kind: 'layout',
  id: 'app-shell',
  slots: ['header', 'content'],
  description: '通用外壳(顶栏+内容),无自定义 render → 走缺省兜底',
  preview: {
    title: 'App Shell 通用外壳',
    demoBlocks: [
      { slot: 'header', widget: 'page-header', props: { title: '欢迎使用', subtitle: '无 render 的布局由 DefaultLayout 兜底' } },
      {
        slot: 'content',
        widget: 'data-table',
        props: {
          columns: [
            { key: 'k', title: '项' },
            { key: 'v', title: '值' },
          ],
          rows: [
            { k: '布局', v: 'app-shell' },
            { k: '渲染', v: 'DefaultLayout 兜底' },
          ],
        },
      },
    ],
  },
})

// ── widget 注册(挂真实组件)──────────────────────────────
registerWidget({
  kind: 'widget',
  id: 'page-header',
  component: PageHeader,
  description: '页头(标题 + 副标题)',
})
registerWidget({
  kind: 'widget',
  id: 'nav-menu',
  component: NavMenu,
  description: '侧栏导航菜单',
})
registerWidget({
  kind: 'widget',
  id: 'data-table',
  component: DataTable,
  description: '通用数据表格(列定义来自声明 props)',
})
registerWidget({
  kind: 'widget',
  id: 'stat-grid',
  component: StatGrid,
  description: '指标格栅(仪表盘统计)',
})