仪表盘设计

仪表盘设计 是做什么的？

规则

• 侧边栏 + 主内容布局：固定侧边栏（w-64），主内容区域流式填充并带有内边距
• 侧边栏导航：图标 + 标签链接，高亮激活状态，移动端可折叠
• 顶部KPI卡片行：响应式网格中的3-4张卡片——包含指标名称、数值、趋势（上升/下降百分比），可选迷你趋势图
• 数据表格：可排序列，可筛选（通过搜索/状态），分页（默认每页10-25行）
• 使用 @tanstack/react-table 实现无头表格逻辑——搭配 shadcn/ui 的表格组件
• 响应式：侧边栏在 md 断点处折叠为汉堡菜单，卡片堆叠为1-2列
• 加载状态：与卡片/表格形状匹配的骨架占位符——绝不引起布局偏移
• 日期范围选择器用于筛选仪表盘数据——默认最近30天

布局结构

┌──────────┬────────────────────────────┐
│ 侧边栏   │  头部 / 面包屑导航          │
│          ├────────────────────────────┤
│ 导航链接 │  KPI 卡片 (3-4 列网格)      │
│          ├────────────────────────────┤
│          │  图表 / 图形               │
│          ├────────────────────────────┤
│          │  数据表格                  │
└──────────┴────────────────────────────┘

模式

// KPI 卡片
function KPICard({ title, value, change }: { title: string; value: string; change: number }) {
  return (
    <Card>
      <CardHeader className="pb-2">
        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">{value}</div>
        <p className={cn("text-xs", change >= 0 ? "text-green-600" : "text-red-600")}>
          {change >= 0 ? "+" : ""}{change}% 较上期
        </p>
      </CardContent>
    </Card>
  );
}

避免

• 固定宽度的主内容——始终使用流式布局填充可用空间
• 没有分页的表格——大数据集会损害性能和可用性
• 缺少加载/空状态——始终显示骨架屏或“无数据”提示
• 无法折叠的侧边栏——移动端用户需要全屏宽度
• 使用加载旋转器进行局部页面更新——应为特定部分使用骨架屏
• 塞入过多KPI——高亮3-5个关键指标，其余放在可展开区域
• 从头开始自定义侧边栏——使用 shadcn 的侧边栏组件
• 没有操作的空白状态——始终包含行动号召（“暂无活动。创建第一个 →”）