主题与布局
应用布局自定义
通过 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 值 | 组件 | 文件 |
|---|---|---|
default | AppDefaultLayout | src/modules/layout/default/index.tsx |
fortress | AppFortressLayout | src/modules/layout/fortress/index.tsx |
sidebar | 向后兼容别名,等价于 default | 在 src/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 基础组件(SidebarProvider、Sidebar、可折叠行为),含个人菜单下拉,属于经典后台壳层 |
fortress | 使用独立视觉壳层,桌面端固定侧栏,移动端快捷入口,并使用专门的 LogoutButton |
关键文件:
src/modules/layout/default/components/AppSidebar.tsxsrc/modules/layout/default/components/ProfileDropdown.tsxsrc/modules/layout/fortress/index.tsxsrc/modules/layout/fortress/components/LogoutButton.tsx
新增一个布局变体
新建目录,例如 src/modules/layout/zen/index.tsx,实现接收用户信息 props 的布局组件。
在 src/app/(saas-page)/app/(account)/layout.tsx 的映射表中注册新布局。
扩展 src/config/types.ts 的 SaasLayoutType,并将 config.ui.saas.layoutType 设置为新值。
保证功能一致性
新布局必须保证账号/管理路由可达,同时保留退出登录与会话失效跳转等核心行为。