MuseMVP 文档
主题与布局

应用布局自定义

在 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/layoutAppLayout。嵌套的设置/管理 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(SidebarProviderSidebar、可折叠图标模式),顶栏带命令搜索、主题/语言切换和头像菜单。

定制壳层

导航只改一处

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.jsonzh/mvp.json。不要把衍生文案写进 default.json

保留会话行为

除非你在改鉴权流程,否则不要动 layout.tsx 的跳转和 SessionUnavailableState

验证

打开 /app/app/settings/*,以及管理员的 /app/admin/*,确认导航、搜索和退出登录仍符合产品预期。

定制 /app 首页正文

壳里面的工作台和壳层本身是两层。

部分文件
路由src/app/(saas-page)/app/(account)/page.tsx
首页 UIsrc/modules/dashboard/components/AppHomeOverview.tsx
首页辅助逻辑src/modules/dashboard/lib/
首页文案mvp.jsonapp.workbench.*

默认首页是欢迎语、套餐/有效期/API 密钥/安全四张卡,以及「开始使用」清单。旧的 mock 活动表(MockRecentActivityTable)仍作为表格范例留在仓库里;路由里注释掉它,而不是删文件。

替换首页时:

  1. 保留 page.tsx 里的 session 检查。
  2. 如需重新启用,再注释 <MockRecentActivityTable />,然后渲染 src/modules/dashboard/ 下的组件。
  3. 新首页文案只写进两份 mvp.json

设置页卡片

设置页页头和内容卡(SettingsShellSettingsPanelItem)使用 rounded-xl,与壳层和 shadcn Card 对齐。要统一改所有设置页样式,改这两个共用组件即可。

相关文档

On this page