应用布局自定义
在 src/modules/layout 中定制登录后 SaaS 壳层,并替换 /app 首页内容。
MuseMVP 登录后的 /app/* 共用一套壳,改 src/modules/layout 即可:侧栏、顶栏、命令搜索、头像菜单和模拟登录横幅。页面正文(/app 首页、设置、管理后台)渲染在这套壳里面。
本页只覆盖登录后 /app 壳层和首页正文。公开落地页的 header/footer 仍只改配置;落地页正文在 src/app/(landing-page)/[locale]/... 里顺序拼装。见自定义落地页。把 Muse Collection 刊面接到这条基线上,见落地页模板。
布局入口
会话检查和壳层挂载在:
src/app/(saas-page)/app/(account)/layout.tsx
该文件校验 session,未登录则跳转,然后渲染 src/modules/layout 的 AppLayout。嵌套的设置/管理 layout 不要再套一层 <main>。
壳层文件
src/modules/layout/
├── index.tsx # AppLayout
├── app-layout-shell.tsx # 侧栏 + 顶栏 + 主内容区
├── lib/
│ ├── use-app-nav.ts # 侧栏与搜索共用的导航
│ └── is-active-app-route.ts
└── components/
├── AppSidebar.tsx
├── AppHeaderSearch.tsx
├── ProfileDropdown.tsx
└── ImpersonationBanner.tsx壳层使用 shadcn sidebar(SidebarProvider、Sidebar、可折叠图标模式),顶栏带命令搜索、主题/语言切换和头像菜单。
定制壳层
导航只改一处
在 src/modules/layout/lib/use-app-nav.ts 里增删或重排入口。侧栏和命令搜索都读这份列表。头像菜单如果指向同一批路由,也要保持一致。
调整外壳
顶栏/主区间距改 app-layout-shell.tsx,侧栏改 AppSidebar.tsx,⌘K 搜索改 AppHeaderSearch.tsx,头像菜单改 ProfileDropdown.tsx。
新文案写进 mvp.json
派生产品的壳层可见文案写在 src/i18n/translations/en/mvp.json 和 zh/mvp.json。不要把衍生文案写进 default.json。
保留会话行为
除非你在改鉴权流程,否则不要动 layout.tsx 的跳转和 SessionUnavailableState。
验证
打开 /app、/app/settings/*,以及管理员的 /app/admin/*,确认导航、搜索和退出登录仍符合产品预期。
定制 /app 首页正文
壳里面的工作台和壳层本身是两层。
| 部分 | 文件 |
|---|---|
| 路由 | src/app/(saas-page)/app/(account)/page.tsx |
| 首页 UI | src/modules/dashboard/components/AppHomeOverview.tsx |
| 首页辅助逻辑 | src/modules/dashboard/lib/ |
| 首页文案 | mvp.json(app.workbench.*) |
默认首页是欢迎语、套餐/有效期/API 密钥/安全四张卡,以及「开始使用」清单。旧的 mock 活动表(MockRecentActivityTable)仍作为表格范例留在仓库里;路由里注释掉它,而不是删文件。
替换首页时:
- 保留
page.tsx里的 session 检查。 - 如需重新启用,再注释
<MockRecentActivityTable />,然后渲染src/modules/dashboard/下的组件。 - 新首页文案只写进两份
mvp.json。
设置页卡片
设置页页头和内容卡(SettingsShell、SettingsPanelItem)使用 rounded-xl,与壳层和 shadcn Card 对齐。要统一改所有设置页样式,改这两个共用组件即可。