仪表盘
Dashboard
别名:后台管理首页仪表盘后台首页数据看板管理面板首页数据大盘admin 后台
这是什么
把关键数据与操作入口聚在一屏内的后台首页，用区域化网格组织：顶栏与侧栏负责导航， 中部依次铺指标卡、图表区和主表格，让用户打开就能看到系统当前状态并直接下钻。 它是后台产品信息架构的核心页面，密度与分区方式决定了整站的阅读节奏。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 需要一屏总览业务关键指标的后台系统
- 用户进入后先看状态、再下钻到详情
- 多种数据形态（数字、图表、表格）需要同屏
✕ 不适用场景
- 面向公众的营销页（用落地页更合适）
- 只有单一操作、无数据可看的工具页
- 移动端主流程（指标应降级为列表或卡片流）
常见形式
侧栏仪表盘
Sidebar Dashboard
左侧栏 + 内容区，最经典的 SaaS 后台布局
顶部导航仪表盘
Top Navigation Dashboard
顶栏承担导航，内容区横向更宽
高密度仪表盘
Dense Dashboard
更多指标与更密的表格，面向专业运营
卡片仪表盘
Card Dashboard
内容全部卡片化的便当格布局
分析型仪表盘
Analytical Dashboard
图表为主体，表格与筛选为辅
页面结构
- 01
顶栏
品牌、全局搜索、通知与账户菜单，固定不随内容滚动。
- 02
侧栏
一级导航分组，可折叠；移动端收为抽屉。
- 03
指标卡
3–5 个核心指标，数值 + 环比趋势，最上排。
- 04
图表区
一个主图 + 一个辅图，共享同一时间范围选择。
- 05
主表格
可排序、分页、行内操作；列密度可切换。
- 06
筛选区
时间范围与维度筛选，作用于整页数据。
实现要点
gridflexgapgrid-template-columns: repeat(auto-fit, minmax(240px, 1fr))布局骨架用 flex：顶栏 + 下方（侧栏 + 内容区）；内容区内部用 CSS Grid 划分指标、图表、表格三个层级。 指标卡建议 repeat(auto-fit, minmax(180px, 1fr)) 自适应；图表区保持固定高度避免跳动。 数据未到时用骨架屏占位；筛选区吸附在表格上方或侧栏顶部。
相关概念
固定在页面一侧（通常左侧）的垂直导航区，承载产品的主要层级入口。 后台管理系统的事实标准：顶部放品牌与全局搜索，侧边栏放模块树，内容区专注任务。
组件包含组件用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件包含组件用行与列精确对齐数据的二维表格：一行一条记录、一列一个字段，适合逐列比较、排序与大容量数据浏览。 行可悬停高亮、点击选中，列头通常带排序控制。
组件包含组件集中承载筛选条件的面板，常驻列表侧边或以抽屉、浮层唤起：复选组、单选、滑杆组合出当前查询。 与列表实时联动刷新结果数，并支持已选条件回显与一键清除。
组件包含组件用与真实内容结构一致的灰色占位块表示加载状态，通常带轻微的微光扫过或呼吸动画。 它告诉用户"内容马上就位，结构长这样"，而不是让用户盯着空白或转圈等待。
交互模式使用模式