ObjectUI
面向专业前端团队的 Schema 驱动 React 界面
ObjectUI 面向前端开发者:从 ObjectStack 元数据渲染对象、表单、仪表盘、页面与插件视图,同时保留 React、Tailwind、Shadcn、自定义路由、自定义认证与自有后端的控制权。同一份元数据也会驱动 API 与 AI 工具。
魔法
声明元数据;ObjectUI 通过 App Shell 与 Providers 渲染真实界面。
{
"type": "dataTable",
"schema": "users",
"columns": [
{ "field": "name", "sortable": true },
{ "field": "email", "sortable": true },
{ "field": "role", "filterable": true }
],
"actions": [
{
"label": "Edit",
"type": "navigate",
"route": "/users/:id/edit"
},
{
"label": "Delete",
"type": "confirm",
"variant": "destructive"
}
],
"pagination": true,
"search": true
}为什么选择 ObjectUI?
模块化前端工具包:需要时用完整 Console,不需要时把 app-shell/provider 包组合进自己的 React 应用。
为 React 团队构建
使用熟悉的 React 原语、Tailwind 工具类、Radix/Shadcn 组件和现有设计系统。ObjectUI 从元数据渲染,但不会把你关进黑盒。
元数据,但不失去控制
视图、页面、仪表盘、表单、字段与动作可以来自元数据;路由、认证、布局边界与组件覆盖仍留在你的前端代码里。
完整 Console 或嵌入式 Shell
运行完整 ObjectStack Console,或嵌入 @object-ui/app-shell 与 @object-ui/providers,构建连接到 REST、GraphQL 或 ObjectOS 后端的小型自定义界面。
前端插件表面
注册自定义字段、组件、视图类型,以及 kanban、calendar、charts、reports、map、AI、workflow 等插件视图。
如何工作
Metadata -> Providers -> App Shell/Renderers,可接入你的后端或 ObjectOS。
步骤 1:元数据
对象、视图、仪表盘、页面、字段、标签与动作都是结构化定义,可以懒加载,并按约定做本地化。
步骤 2:Providers
DataSourceProvider、MetadataProvider 与 ThemeProvider 把 ObjectUI 连接到 ObjectOS,或连接到你的 REST/GraphQL/自定义 API。
步骤 3:Renderers
AppShell、ObjectRenderer、DashboardRenderer、PageRenderer 与 FormRenderer 把元数据映射成可访问的 React 组件。
用例
从快速原型到生产级企业系统。
管理仪表板与内部工具
从 Schema 生成完整的管理界面。CRUD 操作、高级过滤、批量操作——全部声明性定义。在几小时内而不是几周内交付内部工具。
动态表单与工作流
多步向导、条件逻辑、复杂验证。构建无需编写状态管理代码即可适应用户输入的入职流程、调查和数据收集表单。
数据密集型应用
具有虚拟化、实时更新、导出功能的表格。可流畅处理数百万行的仪表板小部件、分析面板和报告界面。
不仅仅是玩具
针对复杂要求的生产级可扩展性。
注册自定义 React 组件并在 JSON Schema 中使用它们。ObjectUI 不会锁定您——它是您构建的基础。当您需要特定功能时,编写一次 React 组件,并在所有协议驱动的界面中重复使用它。
// 1. Register your custom component
import { SignaturePad } from '@/components/custom';
objectUI.registerComponent('signaturePad', SignaturePad);
// 2. Use it in your JSON schema
{
"type": "form",
"fields": [
{ "name": "name", "type": "text" },
{
"name": "signature",
"type": "signaturePad", // Your custom component
"label": "Please sign here",
"required": true
}
]
}
// 3. It just works
// ✓ Validation integrated
// ✓ State management handled
// ✓ Reusable across all formsObjectStack 的一部分
完整的协议驱动开发平台。
ObjectUI 可以通过 providers 独立接入任何后端,但它与 ObjectOS 和 ObjectStack 元数据天然对齐。ObjectQL 只是部分对象背后的数据引擎,并不是每个 UI 集成都必须围绕它。
Standalone
用 @object-ui/app-shell + @object-ui/providers 接入自有后端
Integrated
完整 ObjectOS Console 与 ObjectStack 元数据集成