feat(render): 布局模板画廊 —— live 缩略预览 + 点选完整预览

- LayoutGallery 升级:每模板卡片 = 真实渲染缩略图(scale 0.4),点选看完整预览
- demoPageFrom:由 preview.demoBlocks 构造可渲染 demo 页(预览即真实)
- playground 新增 dashboard 布局 + stat-grid widget;app-shell 验证 DefaultLayout 兜底
- 三个模板(admin/dashboard/app-shell)全部 live 渲染验证通过

examples/playground/src/registry.ts

@@ -4,21 +4,103 @@
  */
 import { registerLayout, registerWidget } from 'vibe-registry'
 import { AdminLayout } from './layouts/admin.tsx'
-import { PageHeader, DataTable, NavMenu } from './widgets.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: '后台管理骨架',
+  description: '后台管理骨架(侧栏+顶栏+内容)',
   render: AdminLayout,
   preview: {
-    title: 'Admin · 后台管理',
+    title: 'Admin 后台管理',
     demoBlocks: [
-      { slot: 'sidebar', widget: 'nav-menu', props: { items: [{ label: '订单', active: true }, { label: '商品' }] } },
-      { slot: 'header', widget: 'page-header', props: { title: '订单管理', subtitle: '全部订单' } },
-      { slot: 'content', widget: 'data-table' },
+      { 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 兜底' },
+          ],
+        },
+      },
     ],
   },
 })
@@ -42,3 +124,9 @@ registerWidget({
   component: DataTable,
   description: '通用数据表格(列定义来自声明 props)',
 })
+registerWidget({
+  kind: 'widget',
+  id: 'stat-grid',
+  component: StatGrid,
+  description: '指标格栅(仪表盘统计)',
+})