MuseMVP 文档
主题与布局

应用布局自定义

通过 config.ui.saas.layoutType 与 src/modules/layout 实现切换和扩展后台应用布局。

MuseMVP 在登录后的 SaaS 区域(/app/*)支持多种应用布局。布局选择由 config.ui.saas.layoutType 驱动。

布局入口

布局分发发生在:

  • src/app/(saas-page)/app/(account)/layout.tsx

该文件读取 config.ui.saas.layoutType,并映射到 src/modules/layout/* 下对应布局组件。

支持的布局类型

layoutType组件文件
defaultAppDefaultLayoutsrc/modules/layout/default/index.tsx
fortressAppFortressLayoutsrc/modules/layout/fortress/index.tsx
sidebar向后兼容别名,等价于 defaultsrc/app/(saas-page)/app/(account)/layout.tsx 中映射

兼容说明

sidebar 仅用于历史兼容,新项目建议直接使用 default

快速切换

修改配置项

src/config/index.ts 中修改布局类型。

// src/config/index.ts
ui: {
  saas: {
    layoutType: "fortress",
  },
}

确认类型约束

可选值由 src/config/types.ts 中的 SaasLayoutType 约束。

重启并验证页面

访问 /app/app/settings/*/app/admin/*,确认导航与间距符合你的产品要求。

结构差异

布局特点
default使用 shadcn sidebar 基础组件(SidebarProviderSidebar、可折叠行为),含个人菜单下拉,属于经典后台壳层
fortress使用独立视觉壳层,桌面端固定侧栏,移动端快捷入口,并使用专门的 LogoutButton

关键文件:

  • src/modules/layout/default/components/AppSidebar.tsx
  • src/modules/layout/default/components/ProfileDropdown.tsx
  • src/modules/layout/fortress/index.tsx
  • src/modules/layout/fortress/components/LogoutButton.tsx

新增一个布局变体

新建目录,例如 src/modules/layout/zen/index.tsx,实现接收用户信息 props 的布局组件。

src/app/(saas-page)/app/(account)/layout.tsx 的映射表中注册新布局。

扩展 src/config/types.tsSaasLayoutType,并将 config.ui.saas.layoutType 设置为新值。

保证功能一致性

新布局必须保证账号/管理路由可达,同时保留退出登录与会话失效跳转等核心行为。

相关文档