仪表盘布局
为你的应用选择合适的仪表盘布局和侧边栏配置
仪表盘布局
ProductReady 提供多种仪表盘布局选项，以适应不同的应用结构和导航模式。选择最适合你使用场景的布局。
可用布局
1. 标准仪表盘 (/dashboard)
默认的单级仪表盘，带有可折叠侧边栏。
适用场景：
- 简单的扁平导航应用
- 中小型功能集
- 快速原型开发
特性：
- 侧边栏单级导航
- 可折叠侧边栏
- 简洁的设计
- 移动端响应式
使用方法：
// 自动应用于 /dashboard 下的路由
export default function DashboardLayout({ children }) {
return <div>{children}</div>;
}路由：
/dashboard- 主仪表盘页面/dashboard/settings- 设置页面/dashboard/profile- 个人资料页面
2. 嵌套仪表盘 (/dashboard-nested)
两级嵌套侧边栏布局，适用于具有层级导航的复杂应用。
适用场景：
- 功能丰富的大型应用
- 层级化内容组织
- 多租户应用
- 功能丰富的 SaaS 产品
特性：
- 两级嵌套导航
- 可展开/折叠的分组
- 更好地组织复杂应用
- 上下文感知导航
使用方法：
// 使用嵌套仪表盘的路由
app/
dashboard-nested/
layout.tsx // 嵌套仪表盘布局
page.tsx // 主嵌套仪表盘页面
settings/
page.tsx // 嵌套布局下的设置路由：
/dashboard-nested- 主嵌套仪表盘页面/dashboard-nested/projects- 项目区域/dashboard-nested/projects/[id]- 单个项目/dashboard-nested/settings- 设置
配置：
嵌套侧边栏结构在布局中定义：
// src/app/[locale]/(authed)/dashboard-nested/layout.tsx
export default function NestedDashboardLayout({ children }) {
return (
<NestedDashboardLayoutComponent>
{children}
</NestedDashboardLayoutComponent>
);
}选择合适的布局
决策指南：使用下面的流程图选择合适的布局
使用标准仪表盘的场景：
- ✅ 主要功能<10 个
- ✅ 导航层级是扁平的（无子类别）
- ✅ 用户需要快速访问所有功能
- ✅ 你正在构建 MVP 或原型
使用嵌套仪表盘的场景：
- ✅ 有许多功能（10+ 菜单项）
- ✅ 功能按逻辑分组到类别中
- ✅ 不同用户角色需要不同导航
- ✅ 需要层级化组织（例如：项目 → 任务 → 详情）
自定义布局
侧边栏配置
两种布局都支持通过配置自定义侧边栏：
// 示例：自定义侧边栏项
const sidebarItems = [
{
title: '仪表盘',
href: '/dashboard',
icon: HomeIcon,
},
{
title: '项目',
icon: FolderIcon,
items: [
{ title: '所有项目', href: '/dashboard/projects' },
{ title: '已归档', href: '/dashboard/projects/archived' },
],
},
];布局样式
使用 CSS 变量自定义布局：
/* tailwind.config.ts 或 global.css */
:root {
--sidebar-width: 280px;
--sidebar-collapsed-width: 80px;
--sidebar-bg: hsl(var(--background));
--sidebar-border: hsl(var(--border));
}布局间迁移
重要：切换布局可能需要更改路由结构
从标准到嵌套
- 移动路由：将路由文件从
/dashboard/*复制到/dashboard-nested/* - 更新链接：更改所有内部链接以使用新路径
- 更新导航：配置嵌套侧边栏项
- 彻底测试：验证所有路由正常工作
从嵌套到标准
- 扁平化结构：将嵌套路由移到顶层
- 简化导航：删除嵌套菜单项
- 更新所有链接：将路径从
/dashboard-nested/*更改为/dashboard/*
性能考虑
标准仪表盘
- ✅ 更轻量的包体积
- ✅ 更快的初始加载
- ✅ 更简单的路由逻辑
- ⚠️ 大型应用组织有限
嵌套仪表盘
- ✅ 复杂应用更好的用户体验
- ✅ 可扩展的导航结构
- ⚠️ 包体积略大
- ⚠️ 更复杂的状态管理
示例
标准仪表盘示例
// app/[locale]/(authed)/dashboard/page.tsx
export default function DashboardPage() {
return (
<div className="p-6">
<h1>欢迎来到仪表盘</h1>
<div className="grid grid-cols-3 gap-4">
<DashboardCard title="项目" count={12} />
<DashboardCard title="任务" count={45} />
<DashboardCard title="用户" count={8} />
</div>
</div>
);
}嵌套仪表盘示例
// app/[locale]/(authed)/dashboard-nested/projects/page.tsx
export default function ProjectsPage() {
return (
<div className="p-6">
<h1>项目</h1>
<div className="space-y-4">
<ProjectList />
</div>
</div>
);
}最佳实践
专业提示：使用仪表盘布局的技巧
- 从简单开始：先使用标准仪表盘，需要时再迁移到嵌套
- 保持一致：在整个应用中使用相同的布局
- 移动优先：两种布局都是响应式的，但要在移动设备上测试
- 无障碍性：确保两种布局中键盘导航正常工作
- 状态持久化：在 localStorage 中保存侧边栏折叠状态
相关文档
需要帮助？
在选择合适的布局时遇到困难？考虑以下因素：
- 功能数量和复杂度
- 用户导航模式
- 团队反馈和可用性测试
- 性能要求
从标准仪表盘开始，当应用复杂度增长时再迁移到嵌套仪表盘。