同步菜单到工作台
本文定位
本文介绍如何使用 lovrabet menu sync 命令，将你本地开发的页面自动同步到 Lovrabet 工作台的菜单中。
这是微前端集成的关键步骤——让你的自定义页面出现在 Lovrabet 工作台里。
这个命令解决什么问题？
当你用 Rabetbase 开发自定义页面时，需要把页面"挂载"到 Lovrabet 工作台的菜单里：
┌─────────────────────────────────────────────────────────┐
│ 你的本地项目 Lovrabet 工作台 │
├─────────────────────────────────────────────────────────┤
│ src/pages/ │
│ ├── dashboard.tsx ─────► 📊 仪表盘 │
│ ├── user/profile.tsx ─────► 👤 用户资料 │
│ └── orders/list.tsx ─────► 📦 订单列表 │
└─────────────────────────────────────────────────────────┘
没有这个命令：你需要手动登录 Lovrabet 后台，一个个创建菜单，配置路径、资源链接...
有了这个命令：一键扫描本地页面，自动创建菜单。
前置条件
- 已登录：
lovrabet auth - 已配置应用：
lovrabet config set app your-app-code - 项目已构建并部署到 CDN（需要 JS/CSS 的 HTTPS 链接）
使用方式
第一步：构建并部署项目
# 构建项目
lovrabet build # 或 npm run build
# 部署到 CDN，获得资源链接
# 例如：https://cdn.example.com/assets/index.js
# 例如：https://cdn.example.com/assets/index.css
第二步：运行同步命令
lovrabet menu sync
第三步：按提示操作
- 选择要同步的菜单（CLI 会自动对比本地和线上，列出差异）
- 输入 JS 资源链接（HTTPS，以 .js 结尾）
- 输入 CSS 资源链接（HTTPS，以 .css 结尾）
- 完成，菜单自动创建
菜单名称 本地 线上
仪表盘 ✓ ✓ (已存在，跳过)
用户资料 ✓ ✗ (需要创建)
订单列表 ✓ ✗ (需要创建)
* 请选择要同步的菜单:
[✓] 用户资料
[✓] 订单列表
* JS 链接: https://cdn.example.com/assets/index.js
* CSS 链接: https://cdn.example.com/assets/index.css
√ 菜单创建完成
如何设置菜单名称？
CLI 会自动从你的页面代码中提取菜单名称。推荐使用 Title 注释：
/**
* Title: 用户资料
*/
export default function UserProfile() {
return <div>用户资料页面</div>;
}
菜单名称将显示为：用户资料
优先级规则
Title 注释（推荐） > displayName > 组件名 > 文件路径
| 方式 | 示例 | 菜单名称 |
|---|---|---|
| Title 注释 | /** Title: 用户资料 */ | 用户资料 |
| displayName | Component.displayName = "用户资料" | 用户资料 |
| 组件名 | export default function UserProfile() | UserProfile |
| 文件路径 | src/pages/user/profile.tsx | user/profile |
最佳实践
在每个页面顶部加上 Title: 中文名称，这样菜单名称清晰易懂。
更新已同步的菜单资源
当你迭代开发、重新构建后，资源文件的地址会变化（如 index-abc123.js → index-def456.js）。
这时需要批量更新已同步菜单的资源链接：
lovrabet menu update
使用场景
第一次发布 迭代更新后
index-v1.0.js ─── sync ───► 菜单已创建
│
index-v1.1.js ─── update ──► 更新资源链接
操作流程
# 1. 重新构建
lovrabet build
# 2. 部署到 CDN，获得新的资源链接
# https://cdn.example.com/assets/index-v1.1.js
# https://cdn.example.com/assets/index-v1.1.css
# 3. 批量更新菜单资源
lovrabet menu update
CLI 会提示你输入新的 JS/CSS 链接，然后批量更新所有已同步的菜单：
* 新的 JS 链接: https://cdn.example.com/assets/index-v1.1.js
* 新的 CSS 链接: https://cdn.example.com/assets/index-v1.1.css
√ 已更新 3 个菜单的资源链接
sync vs update
| 命令 | 用途 |
|---|---|
menu sync | 首次同步，创建新菜单 |
menu update | 迭代更新，更新已有菜单的资源链接 |
常见问题
为什么需要 CDN 链接？
Lovrabet 工作台是在浏览器中加载你的前端代码，所以需要公网可访问的 HTTPS 链接。
没有 CDN 怎么办？
可以使用：
- 阿里云/腾讯云 OSS
- 自己的服务器（需配置 HTTPS）
- Vercel/Netlify 等托管服务
更新代码后需要重新 sync 吗？
- 新增页面：需要
menu sync创建新菜单 - 修改已有页面代码：重新构建部署后，使用
menu update批量更新资源链接 - 修改菜单名称：需要在 Lovrabet 后台手动修改，或删除后重新 sync
菜单显示英文组件名？
说明没有设置 Title 注释。在页面文件最顶部添加：
/**
* Title: 你想要的中文名称
*/
完整示例
项目结构：
src/pages/
├── dashboard.tsx # Title: 仪表盘
├── user/
│ └── profile.tsx # Title: 用户资料
└── orders/
└── list.tsx # Title: 订单列表
操作流程：
# 1. 构建
lovrabet build
# 2. 部署到 CDN（假设得到以下链接）
# https://cdn.myapp.com/v1/index.js
# https://cdn.myapp.com/v1/index.css
# 3. 同步菜单
lovrabet menu sync
# 4. 按提示输入 JS/CSS 链接，完成
结果：Lovrabet 工作台菜单中出现"仪表盘"、"用户资料"、"订单列表"三个菜单项。