跳到主要内容
Termlib

布局模式 · 内容展示

仪表盘

Dashboard

也叫：数据概览、控制台首页、数据驾驶舱、工作台

在一屏内用指标卡、图表和简短列表汇总多组不同的关键数据，让人几秒内看出整体状况和异常。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

做一个仪表盘（Dashboard）首页：第一行放 4 个指标卡，每个显示指标名、大号数字和较昨日涨跌百分比；第二行左边 2/3 宽放近 30 天趋势折线图，右边 1/3 放渠道占比饼图；第三行放「最新订单」短列表，只显示 5 条并带「查看全部」链接。用 12 列网格排版，卡片白底、间距 16px。

发给

01判断

你的内容是这样吗？

对照两列，确认仪表盘是不是你要找的。

符合这些情况，用仪表盘

  • 需要在一屏内汇总多种不同类型的数据、快速掌握整体状况时
  • 内容以关键数字、趋势和占比为主，用户主要是看而不是编辑时
  • 各模块内容互不相同、每块只需要展示摘要时

是这些情况，换成别的

  • 内容是同一类数据的大量记录，需要逐条查看、筛选或比较时

    改用数据表

  • 用户需要录入、编辑大量字段时

  • 只有一两个指标，一个数字或一句话就能说清时

  • 需要展示某一条记录的完整详情时

    改用描述列表

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    模块塞得太多，每张图都很小，反而看不出重点

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    指标只有数字没有对比基准（环比、同比、目标值），看不出是好是坏

  3. 03

    把上百行的完整数据表直接塞进仪表盘，而不是放摘要加「查看全部」

  4. 04

    所有卡片一样大，重要指标和次要指标没有层级区分

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

顶部一排指标卡，下方是大小不一的图表卡片和短列表卡片，按网格拼成几行；重要模块占更大的格子。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1顶部一排带大号数字的指标卡
  2. 2多张折线图、柱状图、饼图卡片
  3. 3大小不一的卡片按网格拼成几行

04解释

详细解释

仪表盘是后台系统里最常见的首页形式：顶部一排指标卡，显示「今日订单 1,280」「销售额 ¥ 56,000」这类关键数字和涨跌幅；下面是折线图、柱状图、饼图，展示趋势和占比；再往下可能是「最新订单」「待办事项」这样的短列表。

它的目标是「一眼看懂」：打开页面几秒内就知道业务是否正常、哪里需要关注。所以每个模块只放最重要的信息，细节通过点击跳到对应的数据表或详情页查看。

布局上一般用网格把页面分成大小不同的卡片，重要的图表占更大的格子。它和卡片网格的区别是：仪表盘里每张卡片内容各不相同，是异质的；卡片网格里每张卡片结构一样，是同一类数据的多条记录。

开发者信息
术语 ID
layout-dashboard
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • main:has([class*="stat" i], [class*="kpi" i], [class*="metric" i]):has([class*="chart" i], canvas, [data-slot="chart"], .recharts-wrapper, [_echarts_instance_])
  • main:has(.grid > :is(.rounded-lg, .rounded-xl, .rounded-2xl) :is(.text-2xl, .text-3xl, .text-4xl):is(.font-bold, .font-semibold)):has(svg polyline, svg path[d*="C"], canvas, [data-slot="chart"])
  • main:has([data-slot="card"] .tabular-nums)
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • dashboard
  • dashboard-content
  • dashboard-main
  • dashboard-page
  • overview
  • analytics
  • dashboard-grid
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Dashboard
  • DashboardPage
  • Overview
  • Analytics
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 网格排列
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30