5. 构建 Dashboard
一个有用的 CRM Dashboard 应该在一屏内回答四个问题:本周有多少 lead、转化速度多快、pipeline 集中在哪里、本季度有多少会成交。
预计耗时:25 分钟。
5.1 布局
新建 Dashboard crm-overview,采用 12 列栅格:
| 行 | Widget | 宽度 |
|---|---|---|
| 1 | KPI:本周 Leads | 3 |
| 1 | KPI:转化率(qualified / 总数) | 3 |
| 1 | KPI:进行中 pipeline 价值 | 3 |
| 1 | KPI:本季度即将成交 | 3 |
| 2 | 柱状图:按 source 拆分的 lead | 6 |
| 2 | 漏斗:按 stage 拆分的 opportunity | 6 |
| 3 | 折线图:每周新建 vs 资格化 lead | 12 |
| 4 | 表格:按金额排序的 Top 10 opportunity | 12 |
从 Dashboard 列表页点 New dashboard 进入编辑器 —— 一个网格画布,每个单元是一个绑定到已保存查询的 widget。
5.2 定义查询
使用 Query Builder 为每个 widget 定义数据源。Query Builder 是可视化 SQL 组装器:选 source model,加 measure 与 dimension,配置 filter,然后把查询另存为 widget 可复用的数据源。
按 source 拆分 lead 的图表示例:
query:
source: crm_lead
groupBy: source
measures:
- { kind: count, alias: leads }
filters:
- field: created_at
op: gte
value: ${range.start}
- field: created_at
op: lte
value: ${range.end}${range.start} 与 ${range.end} 来自 Dashboard 级的日期范围筛选。
5.3 下钻
为漏斗 widget 配置点击行为:点一条柱时跳转到 /docs/...?stage=<x> —— 即打开按 stage 过滤的 Opportunity 列表页。这是每个 widget 的可选项:
"onClick": {
"type": "navigate",
"to": "crm_opportunity_list",
"params": { "stage": "${bar.key}" }
}5.4 验证
- 所有 KPI 与手工 SQL 计数一致
- 日期范围筛选会重新计算每个 widget
- 点击漏斗的一条柱可落到过滤后的列表页
- 在本地数据(约 10k 行)上 Dashboard 渲染时间小于 1 秒