App 子应用

• In 内部子应用
• Out 外部子应用
• 新建子应用

pbstar-admin 子应用是基于 Vue 3 + Element Plus 的后台管理系统模块，通过 Wujie 微前端框架 集成到主应用中。子应用采用 pnpm monorepo 工作区管理，支持独立开发和部署。

子应用清单以 apps/apps.json 为准，字段包括 appKey（唯一 key）、appType（in/out）、devPort（开发端口）、proUrl（线上地址）。列表如下：

appKey	appType	devPort	proUrl
system	in	8801	http://pbstar-admin-system.pbstar.cn/
example	in	8802	http://pbstar-admin-example.pbstar.cn/
out-app	out	8803	http://pbstar-admin-out-app.pbstar.cn/

In 内部子应用

内部子应用是指同 pbstar-admin 主应用共用一个 git 代码仓库的子应用，位于 apps/ 目录下，本仓库内即可见到其源码。

system (系统应用)

• 功能模块：
  • 用户管理
  • 角色管理
  • 权限管理

example (示例应用)

• 功能模块：
  • 用户列表
  • 图表（ECharts）
  • Markdown 编辑器
  • 富文本编辑器
  • 数据大屏

Out 外部子应用

外部子应用是指单独放在独立的 git 仓库中的子应用，位于 apps/ 目录下，需要配置 .gitmodules 文件并通过 git submodule update --init 拉取后才会出现源码。

out-app (外部应用)

• 功能模块：
  • 由独立仓库自行维护，示例项目仅作集成演示

新建子应用

使用交互式 CLI 一键创建：

pnpm run create

创建时会：

1. 校验 appKey（仅允许小写字母、数字、连字符，且不能为 main/components 保留名）
2. 选择类型：in（同仓库）或 out（独立 git 仓库，会补充要求填写 git 地址）
3. 在 apps/ 下生成子应用目录与模板代码
4. 自动更新 apps/apps.json、rsbuild.config.ts 等配置

新增/删除子应用请使用 pnpm run create 完成，不要手动修改 apps/apps.json 与 main 侧动态加载菜单的代码。

集成方式

1. 主应用通过 wujie startApp/destroyApp 加载子应用，路由由 main/src/router/index.ts 按 apps.json 动态生成
2. 子应用在 appInit.ts 中复用主应用的 Pinia（window.parent.$mainPinia），实现主子应用共享状态
3. 通过 window.$wujie.bus 进行主从应用事件通信，使用 useMicroApp 处理路由跳转与状态同步
4. 菜单统一在各子应用 src/constants/menus.ts 硬编码，主应用侧按 appKey 动态加载并做权限过滤

内部子应用与外部子应用区别

• 代码仓库：外部子应用有独立的代码仓库，需要在主应用项目中配置 .gitmodules 文件
• 开发前需先 git submodule update --init 拉取外部子应用源码，否则该应用目录为空、无法构建