Lovrabet 主子应用开发指引

使用前必读

• 当你需要把一个已存在、独立运行的前端项目（已有源码）无缝嵌入当前主应用，实现统一访问、样式与路由协同，又希望尽量少改动原项目结构时，可以使用本功能。
• 源码嵌入采用“icestark微前端”方案，请先理解微前端的基本技术概念
• 推荐使用 Rabetbase CLI，可一键同步源码子应用页面

使用场景

• 当Lovrabet AI生成的业务页面和扩展能力已无法满足业务诉求，可自定义开发任意页面进行扩展；
• 将多个独立前端（如技术栈不同）整合到一个主容器应用中，保持各自独立开发、独立部署；
• 渐进式重构：旧系统不必一次性重写，可先以子应用挂载再逐步替换

配置说明

配置入口

<grid> <column width-ratio="0.237320">

1. 新增页面 </column> <column width-ratio="0.762680">
2. 选择“源码页面” </column> </grid>

配置字段说明

• 路由路径（必须）：

  • 应用实际访问时链接url中的path部分（例如：https://app-6ff2b2ef.yuntooai.com/${path}）
  • 需要保证在整个应用中唯一，配置时会自动生成，需要注意微应用中也存在前端路由的情况需要对应

• 页面名称（必须）：

  • 应用实际访问时显示在菜单上的名称

• 微应用唯一标识：

  • 标记页面所属的源码微应用，多个页面可能属于同一个源码微应用
  • 可选字段，如不填写，则实际运行时会将“路由路径（path）”作为应用标识

• Basename

  • 指定微应用接收的basename，微应用包含前端路由的场景下需要使用
  • 可选字段，如不填写，则默认“路由路径（path）”即作为basename

• 资源加载方式

  • script（默认） - 默认加载方式，通过HTML <script /> 标签加载微应用脚本资源
  • fetch - 通过window.fetch 加载并缓存脚本资源，沙箱模式下使用
  • import - 加载ES modules 类型微应用的方式，通过vite构建的工程需要使用这种方式

• 资源加载列表（必须）

  • 微应用工程构建后的assets资源产物，可以是任意可访问到静态资源的地址，优先建议CDN；

配置示例

以演示应用中的首页配置为例：https://app.yuntooai.com/app/app-f4c03acb/pages/crm/crm-dashboard

源码工程接入详细指引

• 任意源码工程都可以通过改造为icestark微应用，完成接入，可参考官方文档：

  • React 为应用接入 / Vue为应用接入 / 其他框架接入

• 我们推荐使用 React 18 + antd 5 + vite 作为源码工程框架

Vite 工程接入示例

Vite 工程源码子应用接入自定义页面示例

Angular 工程接入示例

Angular 工程源码子应用接入自定义页面示例

Webpack 工程接入示例

TODO