跳到主要内容

主子应用架构

本文定位

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

架构概述​

Lovrabet 采用微前端架构，分为主应用和子应用：

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

主应用：Lovrabet 工作台​

  • 由 AI 自动生成，无需开发
  • 覆盖 70% 的标准业务功能（增删改查、权限、审批等）
  • 提供统一的导航、菜单、用户体系
  • 业务人员直接使用

子应用：开发者扩展​

  • 由技术人员开发，处理复杂业务场景
  • 覆盖 30% 的定制化需求（数据大屏、复杂报表、特殊交互等）
  • 通过 Rabetbase（SDK、API、CLI）进行开发
  • 最终集成到主应用的菜单中

为什么需要主子应用架构？​

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

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

子应用开发流程​

第一步：创建项目​

使用 CLI 创建子应用项目：

lovrabet create

按提示输入项目名称和应用代码，CLI 会自动：

  • 创建项目结构
  • 配置 SDK
  • 拉取 API 配置

第二步：开发页面​

在 src/pages/ 目录下开发你的页面：

// src/pages/dashboard.tsx
/**
 * Title: 数据大屏
 */
import { lovrabetClient } from '@/api/client';

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

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

第三步：本地调试​

lovrabet start

子应用会在本地启动，你可以独立调试。

第四步：构建部署​

# 构建
lovrabet build

# 部署到 CDN
# 获得 JS/CSS 的 HTTPS 链接

第五步：集成到主应用​

使用 menu sync 将子应用页面同步到主应用菜单：

lovrabet menu sync

按提示选择要同步的页面，输入 CDN 链接，完成集成。

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

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

√ 菜单创建完成

现在打开 Lovrabet 工作台，就能看到你的子应用页面了。

子应用与主应用的交互​

共享用户体系​

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

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 创建的项目已经配置好这些要求。

菜单名称设置​

在页面文件顶部使用 Title 注释：

/**
 * Title: 数据大屏
 */
export default function Dashboard() {}

详见 同步菜单到工作台。

SDK 配置​

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

lovrabet api pull

详见 自动生成 SDK 配置。

常见问题​

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

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

需要处理跨域问题吗？​

不需要。子应用通过 SDK 访问数据，SDK 已经处理了认证和跨域问题。

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

  1. 修改代码
  2. 重新构建：lovrabet build
  3. 重新部署到 CDN
  4. 如果是新增页面，需要再次 menu sync

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

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

相关文档​