feat(render): M2 — React 渲染内核 + 布局画廊(playground)

- core 新增 render 子路径(vibe-registry/render):PageView + WidgetView + LayoutGallery - layout 注册项支持 render 实现;缺省兜底 DefaultLayout - widget 注册项 component 挂真实 React 组件 - PageBlockDecl 增加 slot 字段(块落在布局哪个槽位) - playground:admin 布局真实骨架 + 组件 + 订单页,dev 预览 + 生产构建通过 - 全量回归:core/qa-orchestrator/playground typecheck 全绿
2026-09-03 00:59:31 +08:00
parent 8c93bde5f6
commit 2277d55ac9
16 changed files with 1628 additions and 4 deletions
@@ -0,0 +1,72 @@
+/**
+ * playground 业务 widget(真实 React 组件)
+ * 演示:注册表 widget → React 组件 → 渲染内核装配
+ */
+import React from 'react'
+
+/** 页头 */
+export function PageHeader({ title, subtitle }: { title?: string; subtitle?: string }): React.ReactElement {
+  return React.createElement(
+    'header',
+    { style: { marginBottom: 16 } },
+    React.createElement('h1', { style: { margin: '0 0 4px', fontSize: 20 } }, title ?? '未命名'),
+    subtitle ? React.createElement('p', { style: { margin: 0, color: '#6b7280', fontSize: 13 } }, subtitle) : null,
+  )
+}
+
+/** 数据表格 */
+export function DataTable({
+  columns = [],
+  rows = [],
+}: {
+  columns?: Array<{ key: string; title: string }>
+  rows?: Array<Record<string, unknown>>
+}): React.ReactElement {
+  return React.createElement(
+    'table',
+    { style: { borderCollapse: 'collapse', width: '100%', fontSize: 13 } },
+    React.createElement(
+      'thead',
+      {},
+      React.createElement(
+        'tr',
+        {},
+        ...(columns as Array<{ key: string; title: string }>).map((c) =>
+          React.createElement(
+            'th',
+            { key: c.key, style: { textAlign: 'left', padding: '6px 8px', borderBottom: '1px solid #d1d5db' } },
+            c.title,
+          ),
+        ),
+      ),
+    ),
+    React.createElement(
+      'tbody',
+      {},
+      ...(rows as Array<Record<string, unknown>>).map((r, i) =>
+        React.createElement(
+          'tr',
+          { key: i },
+          ...(columns as Array<{ key: string; title: string }>).map((c) =>
+            React.createElement('td', { key: c.key, style: { padding: '6px 8px', borderBottom: '1px solid #f3f4f6' } }, String(r[c.key] ?? '')),
+          ),
+        ),
+      ),
+    ),
+  )
+}
+
+/** 导航菜单 */
+export function NavMenu({ items = [] }: { items?: Array<{ label: string; active?: boolean }> }): React.ReactElement {
+  return React.createElement(
+    'ul',
+    { style: { listStyle: 'none', margin: 0, padding: 0 } },
+    ...(items as Array<{ label: string; active?: boolean }>).map((it, i) =>
+      React.createElement(
+        'li',
+        { key: i, style: { padding: '6px 8px', borderRadius: 6, marginBottom: 2, background: it.active ? '#e0e7ff' : 'transparent' } },
+        it.label,
+      ),
+    ),
+  )
+}