B2B SaaS 多租户管理后台产品系统Vibe Coding

面向B2B SaaS场景的多租户运营管理后台，展示了一套微前端架构的管理控制台实现方案。在SaaS产品迭代过程中，组织管理、用户管理等不同业务域通常由独立团队负责，单体应用架构容易导致发布耦合、构建时间随代码量增长、技术栈升级困难等问题。本项目采用微前端拆分，以pnpm monorepo管理代码，覆盖租户组织管理、组织内用户管理、操作审计日志等典型B端业务场景，所有数据均为演示数据，用于展示中大型前端项目的架构设计与工程实践能力。

项目采用微前端架构，包含三个可独立部署的应用，以及跨应用的审计日志能力：
① 宿主应用（Admin Console） - 作为统一入口，负责整体布局、侧边导航、顶部账户菜单、会话状态管理，运行时动态加载其他业务应用，提供一致的用户体验。
② 组织管理应用（Organization Management） - 租户组织管理：高密度数据表格支持排序、分页、状态筛选、关键词搜索；组织详情展示基本信息、关联域名、成员/管理员统计；通过状态标签（活跃/停用/归档）直观展示组织状态。
③ 用户管理应用（User Management） - 组织内用户管理：用户列表支持按账号状态、角色筛选；支持通过邮箱添加用户到当前组织；用户详情展示注册时间、最近登录、角色分配等信息；内置多角色展示逻辑适配不同组织类型。
④ 审计日志能力（Activity Log） - 跨组织和用户维度的操作审计轨迹展示，规范化展示操作人、操作时间、操作类型、操作对象，支持追溯关键操作记录。
所有应用通过GraphQL客户端与外部BFF层通信，前后端职责清晰分离。

个人职责： 独立完成前端架构设计、三个应用的代码实现、monorepo工程化配置、模块联邦配置、GraphQL客户端集成，以及外部设计系统对接和后端联调。
技术栈： React 19 + TypeScript + Vite 8 + Module Federation + GraphQL（Apollo Client）+ Zustand + React Intl + MUI 9 + @hugo-ui/mui设计系统 + Vitest + pnpm workspaces。

架构与实现亮点：
1. 微前端拆分： 使用Module Federation将admin-console作为宿主，组织管理、用户管理作为独立应用，支持独立开发、构建、部署；公共依赖在应用间共享，通过共享策略约束版本保证运行时一致性。可将几个子应用拆分至独立仓库进行维护和部署。
2. pnpm monorepo工程化： 抽离admin-shared共享包，统一管理会话状态、通用组件等跨应用复用能力，各应用边界清晰，便于协作维护。可将其以私有 npm 包形式维护
3. React 19 Compiler渐进启用： 在业务应用中按组件粒度选择性开启自动渲染优化，兼顾性能与核心逻辑稳定性
4. 外部设计系统集成： 通过npm包引入独立维护的@hugo-ui/mui组件库，UI一致且设计开发解耦，本仓库不维护组件源码
5. GraphQL BFF对接： 通过Apollo Client统一对接外部GraphQL接口，精准获取数据
6. 完整验证流程： 建立类型检查、lint、单元测试、生产构建的完整验证链路，保障代码质量
7. 文档中包含CDN/边缘层路由规划示意，为生产部署提供参考思路