用途：设计并实现管理后台（ops/admin）与商业智能（BI）仪表盘，强调“一屏一个问题”，层级为 KPI→趋势→明细；没有明确决策或行动的仪表盘只是装饰。原则适用于任何前端，示例与组合基于 React。
设计前明确：受众（admin 需立即行动 vs BI 需比较理解）、看完后的决策动作（调查、审批、升级、导出）、更新节奏（实时/小时/天，决定 freshness 与自动刷新）、1–3 个核心指标，其余为辅助或下钻。复用设计系统的 shell、筛选栏与组件，不另造视觉语言。
结构：Shell（导航+头部）、Filter bar（范围、实体、分段）、KPI row（1–3 核心+变化）、Chart band（趋势/对比）、Detail（表格、队列、可操作列表）。admin 密度紧凑、优先 freshness 与操作；BI 更留白、重比较与导出。
设计要点：对齐网格，KPI 使用 tabular-nums；状态与变化用语义色而非彩虹色；避免“卡片汤”；必须覆盖 loading（骨架屏）、empty、error（重试）、partial（部分系列失败）状态；使用产品 token，不写死 hex，亮/暗色保持相同角色。
数据与筛选：明确契约（时间序列 t/value、维度、总量、asOf/时区）；大数据集筛选在服务端执行；筛选状态可序列化到 URL 以支持深链；明确时区与“今天”规则；刷新采用手动+合理间隔，避免激进轮询；每次查询与聚合都遵守 tenant/role 权限，仪表盘不是权限绕过。
React 用法：展示型组件保持纯函数，数据获取放在页面/hook/loader 边界，不藏进每个卡片；组合为 DashboardShell→FilterBar→KpiRow→ChartPanel→DataTable；图表库用项目既有方案并封装成 wrapper 便于替换；useMemo/memo 需有证据；大表虚拟化并在服务端分页/游标；避免筛选 prop-drilling。
图表选择：趋势用折线、对比用柱状、累计用面积、部分整体仅在 ≤5 类时用饼/环、分布用直方图/箱线。坐标轴可读，tooltip 含值与周期，图例不单靠颜色；同轴最多 3–5 系列；不用 3D 与长动画，尊重 prefers-reduced-motion；提供标题/描述与关键值的数据表替代；点击下钻。
反模式：12 个 KPI 无主次；装饰性图表；历史面板每秒刷新；百万行仅客户端筛选；通用“AI 风”玻璃卡片、紫色渐变、彩虹系列；混用 6 种时间粒度；KPI 无定义或无 asOf；用零值图表掩盖 empty/error。
实现流程：写清问题与 1–3 核心指标；定义筛选与数据契约（含授权）；搭建结构；实现可复用 React 组件与图表 wrapper；覆盖 loading/empty/error 并测试筛选深链；度量载荷、KPI 可用时间与表格交互。
完成标准：问题与受众清晰；层级可见；筛选正确且可分享；状态齐全；图表匹配问题且配色有限；查询遵守授权；真实数据量下性能可接受；与产品设计系统一致。