跳到主要内容

将自定义页面集成到工作台

本文定位

本文介绍 Lovrabet 的主子应用架构，帮助你理解如何在 AI 生成的系统基础上进行扩展开发。

架构概述​

Lovrabet 采用微前端架构。简单说就是两部分：

  • 主应用：AI 自动生成的业务系统，覆盖增删改查、权限、审批等标准功能
  • 子应用：你开发的扩展功能，比如数据大屏、复杂报表、特殊交互

两者在用户看来是一个整体。

┌─────────────────────────────────────────────────────────┐
│                    Lovrabet 工作台                        │
│                     （主应用）                            │
│  ┌─────────────────────────────────────────────────────┐ │
│  │  AI 自动生成的业务系统                                │ │
│  │  • 数据管理页面                                      │ │
│  │  • 表单、列表、详情                                   │ │
│  │  • 权限控制、审批流程                                 │ │
│  └─────────────────────────────────────────────────────┘ │
│                          ▲                               │
│                          │ 集成                          │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐              │
│  │ 子应用 A  │  │ 子应用 B  │  │ 子应用 C  │              │
│  │ 数据大屏  │  │ 自定义报表 │  │ 特殊业务  │              │
│  └──────────┘  └──────────┘  └──────────┘              │
│       ↑              ↑              ↑                    │
│       └──────────────┼──────────────┘                    │
│                      │                                   │
│            技术人员基于 Rabetbase 开发                     │
└─────────────────────────────────────────────────────────┘

为什么需要这个架构？​

场景主应用能力需要子应用
标准数据表单AI 自动生成—
复杂数据大屏超出 AI 能力自定义开发
标准列表查询AI 自动生成—
跨表复杂报表超出 AI 能力自定义开发
审批流程AI 自动生成—
特殊业务逻辑超出 AI 能力自定义开发
第三方系统集成超出 AI 能力自定义开发

核心理念就是：让 AI 处理标准功能，让开发者专注复杂业务。

子应用开发流程​

整个流程分五步，CLI 会帮你处理大部分工作。

第一步：创建项目​

lovrabet create

按提示输入项目名称和应用代码，CLI 会自动创建项目结构、配置 SDK、拉取 API 配置。

第二步：开发页面​

在 src/pages/ 目录下编写你的页面：

// src/pages/dashboard.tsx
import { lovrabetClient } from "@/api/client";

function Dashboard() {
  const loadData = async () => {
    const orders = await lovrabetClient.models.orders.filter();
    const customers = await lovrabetClient.models.customers.filter();
    // 处理数据，渲染大屏
  };

  return <div className="dashboard">{/* 你的大屏组件 */}</div>;
}

// 设置菜单显示名称（重要！）
Dashboard.displayName = "数据大屏";

export default Dashboard;
设置 displayName

displayName 决定了菜单中显示的名称。如果不设置，菜单会显示英文组件名或文件路径。

第三步：本地调试​

lovrabet start

子应用在本地独立运行，你可以实时预览和调试。

第四步：构建部署​

lovrabet build
# 将 dist/ 目录部署到 CDN，拿到 JS/CSS 的 HTTPS 链接

第五步：集成到主应用​

首次部署，使用 sync 命令创建菜单：

lovrabet menu sync

按提示选择要同步的页面，输入 CDN 链接，菜单就出现在主应用里了。

  菜单名称      本地  线上
  数据大屏      ✓     ✗     (需要创建)
  自定义报表    ✓     ✗     (需要创建)

* JS 链接: https://cdn.example.com/assets/index.js
* CSS 链接: https://cdn.example.com/assets/index.css

√ 菜单创建完成

菜单名称设置​

菜单名称通过组件的 displayName 属性设置：

// ✅ 推荐：使用 displayName
function CustomerList() {
  return <div>客户列表</div>;
}
CustomerList.displayName = "客户列表";
export default CustomerList;

// ✅ 也支持：箭头函数写法
const OrderList = () => {
  return <div>订单列表</div>;
};
OrderList.displayName = "订单列表";
export default OrderList;

名称提取优先级​

displayName > 组件名 > 文件路径
方式示例菜单名称
displayName（推荐）Component.displayName = "客户列表"客户列表
组件名function CustomerList()CustomerList
文件路径src/pages/customer/list.tsxcustomer/list

迭代更新流程​

修改代码后重新部署，使用 update 命令更新资源链接：

# 1. 重新构建
lovrabet build

# 2. 上传到 CDN（得到新的链接）
# https://cdn.example.com/assets/index-v2.js
# https://cdn.example.com/assets/index-v2.css

# 3. 批量更新所有菜单的资源链接
lovrabet menu update

sync vs update​

命令用途使用场景
menu sync创建新菜单首次部署、新增页面
menu update更新资源链接修改代码后重新部署
最佳实践
  • 新增页面：lovrabet menu sync
  • 修改已有页面：重新构建部署后，lovrabet menu update

子应用与主应用的交互​

共享用户体系​

子应用自动继承主应用的登录状态，不需要单独做认证：

import { lovrabetClient } from "@/api/client";

// 直接使用，用户已登录
const user = await lovrabetClient.api.getCurrentUser();

共享数据访问​

子应用通过 SDK 访问主应用的所有数据集：

const orders = await lovrabetClient.models.orders.filter({
  where: { status: { $eq: "pending" } },
});

const customers = await lovrabetClient.models.customers.filter();

共享菜单导航​

子应用页面出现在主应用菜单中，用户无感知切换：

主应用菜单
├── 客户管理      ← AI 生成的页面
├── 订单管理      ← AI 生成的页面
├── 数据大屏      ← 你开发的子应用
└── 自定义报表    ← 你开发的子应用

技术要点​

子应用打包要求​

  • 构建产物需要是 UMD 或 ESM 格式
  • 需要导出为独立的 JS/CSS 文件
  • 必须部署到 HTTPS 可访问的地址

用 lovrabet create 创建的项目已经配置好这些要求，不需要额外操心。

SDK 配置​

子应用需要配置 SDK 才能访问数据。用 CLI 自动生成：

lovrabet api pull

详见 自动生成 SDK 配置。

常见问题​

子应用可以独立运行吗？​

可以。开发阶段通过 lovrabet start 独立运行调试，但生产环境需要集成到主应用中才能使用完整功能（用户认证、数据权限等）。

需要处理跨域问题吗？​

不需要。SDK 已经处理了认证和跨域问题。

如何更新已部署的子应用？​

  1. 修改代码
  2. lovrabet build 重新构建
  3. 上传到 CDN
  4. lovrabet menu update 更新资源链接

如果是新增页面，需要用 lovrabet menu sync 创建新菜单。

多个子应用可以共存吗？​

可以。每个子应用是独立的项目，可以用不同的技术栈，最终都集成到主应用菜单中。

菜单显示英文组件名？​

说明没有设置 displayName。在组件导出前添加：

ComponentName.displayName = "中文名称";

相关文档​