SuperAPI AI 工具集

multi-surface-render

通用与其它

查看项目

更新于 10-16 01:11

技能介绍

用途:定义一次、处处渲染。同一份 json-render catalog 与 spec 可产出 React Web UI、PDF 报告、HTML 邮件、Remotion 演示视频、OG 图片等,每个渲染面使用自己的 registry,把 catalog 类型映射到平台原生组件。

主要能力:catalog 为 Zod 类型化组件契约,spec 为扁平树 JSON/YAML,registry 为平台实现,renderer 负责输出。覆盖目标包括 React、Next.js(0.16+,createNextApp 位于 /server 子路径)、Vue、Svelte、Svelte+shadcn、React Native、Ink 终端(0.15+,20+ 组件)、PDF(react-pdf)、Email(react-email)、Remotion、Image(Satori)、YAML、MCP、3D、Codegen。

使用方式:先 defineCatalog 定义共享 catalog;各平台分别 defineRegistry;再调用对应渲染函数,如 renderToBuffer/renderToFile/renderToStream(PDF)、renderToHtml(邮件)、renderToSvg/renderToPng(图片,可设 width/height)、Remotion 的 Renderer(props 为 spec、components)、Ink 的 Renderer(props 含 spec、catalog、registry)。

适用场景:Web 应用与仪表盘、报告与文档、通知与摘要邮件、演示视频与营销素材、OG 图片与社交卡片、CLI/TUI 与流式对话界面、移动端、3D 场景、由 spec 生成源码。

限制:需为每个平台单独编写 registry,不能共用一个;Satori 不支持 CSS grid、flexbox 支持有限;react-pdf 无 grid;邮件受 600px 容器、表格布局、内联样式、绝对图片 URL 约束;PDF 与 React Native 的 registry 布局存在上限;Remotion 渲染有成本与延迟预算。版本参考 @json-render/core 0.21.0,各渲染器对照 0.20.0 验证;0.20.0 新增命名 slots、嵌套 repeat、条目级可见性,ActionExecutionContext.executeAction 改为接收 ActionBinding。具体组件清单与完整签名以官方文档为准,本资料未逐一提供。