多源接入与清洗
支持 JDBC、Kafka、对象存储与 REST 四类数据源，字段级血缘自动登记。
- 单表接入 ≤ 3 步配置，字段映射自动推荐
- 脏数据拦截率目标 ≥ 99.2%
- 接入后 5 分钟内产出可用宽表
交付指标：接入耗时 ↓ 65%
Visual Panel
数据可视化面板：把口径、阈值与趋势放进同一视线
左侧为四大业务域的聚合完成度与偏离度，右侧为数据源结构占比。所有图形均由 CSS 与内联 SVG 绘制，不引入任何第三方图表库。
业务域数据健康度
数据源结构占比
实时流 42%（Kafka 主题 26 个）
离线批 32%（日分区 1.8TB）
外部接口 26%（日均 320 万请求）
Core Ability
核心能力卡片：四张阶梯错位卡覆盖分析全链路
四张卡按 16px 列距阶梯错位排布，视觉上形成递进节奏，信息上按「接入—建模—可视化—交付」顺序推进。
指标建模与口径治理
指标卡与计算逻辑一一绑定，改口径即改卡片，避免同名不同义。
- 原子指标 / 派生指标分层，命名强约束
- 变更走审批流，留全量 diff 记录
- 口径一致率目标 ≥ 98%
交付指标：口径争议 ↓ 70%
可视化与卡片编排
趋势、分布、归因、预警四类卡片可自由拼装成叙事看板。
- 图表渲染与卡片同源，减少样式漂移
- 大屏 2560px 下每列 ≥ 340px 可读宽度
- 移动端纵向单列，图表高度自适应
交付指标：看板搭建 ↓ 80%
洞察交付与协作
卡片可导出为图片、CSV 或嵌入链接，评论与标注附着在具体卡片上。
- 单卡粒度的权限与留痕控制
- 异常自动生成待办并指派责任人
- 结论回溯平均 ≤ 2 次点击
交付指标：结论触达 ↑ 2.4 倍
Checklist
实用指导清单：卡片式数据平台落地的 6 个关键动作
以下每一条都对应可验收的量化标准，建议在需求评审时逐项确认。
- 先定栅格再画卡片。以 12 列为基准，定义 16px 列间距与 24px 卡内边距；卡片宽度只允许跨 3/4/6/12 列，禁止出现 5 列等无法对齐的跨列数，否则大屏下必然出现半像素错位。
- 一张卡只讲一件事。每张卡片绑定单一指标与唯一时间窗口，卡片标题控制在 18 字内；超过 3 个维度的信息拆成子卡，否则首屏阅读完成率会从 76% 掉到 40% 以下。
- 给图表设阈值而非只设颜色。预警卡的黄/红阈值写成可配置参数（如偏离基线 ±2σ），而非硬编码色值；阈值变更需记录版本，便于回看历史告警是否误报。
- 首屏加载做分层。骨架屏先出卡片框架（≤ 300ms），数值区延迟 1 帧填充；单卡请求超过 800ms 时先展示缓存值与「更新中」标识，避免用户误判数据为空。
- 响应式按内容断点收敛。1024px 以下卡片从 4 列降为 2 列，640px 降为单列；用 minmax(0,1fr) 写列宽，防止长指标名撑破容器造成横向滚动。
- 可用性验收三条硬线。对比度正文 ≥ 4.5:1、点按区 ≥ 44px、键盘 Tab 可遍历所有卡片操作；上线前用三档视口（320 / 1024 / 2560）各跑一遍溢出检查。
Workflow
从原始数据到决策看板：左右交错的时间轴
四个阶段左右交错展开，桌面端中线对齐，移动端自动收敛为左侧单列轴线。
阶段一 · 第 1—2 天
数据盘点与口径对齐
梳理 6 张核心宽表与 24 个原子指标，输出字段级血缘清单，确认统计周期与过滤条件。
阶段二 · 第 3—5 天
卡片原型与栅格验证
按 12 列画出卡片草图，标注跨列数；在 320 / 1024 / 2560 三档视口验证无溢出与无孤字数。
阶段三 · 第 6—8 天
可视化实现与性能压测
图表与卡片同源渲染，压测 50 万行聚合查询，目标首屏可交互 ≤ 1.2s，交互响应 ≤ 200ms。
阶段四 · 第 9—10 天
灰度发布与体验回收
面向 3 个业务组灰度，收集卡片点击热区与停留时长，2 轮迭代后收敛交互路径。
Scenarios
应用场景图集：同一套卡片体系覆盖四类分析诉求
图像统一 4:3 裁切、28px 圆角、hover 缓慢放大，叠加极淡暖色光晕以软化界面质感。
运营增长分析
渠道漏斗卡 + 分群对比卡，定位转化断层节点。
实时风控预警
偏离基线 ±2σ 自动亮起预警卡并生成待办。
供应链履约监控
2560px 大屏四列布局，每列保持 ≥ 340px 可读宽度。
移动端随行查阅
640px 以下单列堆叠，图表高度自适应不裁切。
跨团队评审
评论与标注附着在具体卡片上，结论回溯 ≤ 2 次点击。
设计规范交付
间距、圆角、阴影、字号全部来自统一令牌，减少样式漂移。
FAQ
常见问题：卡片式数据平台落地前最常被追问的 6 件事
以下回答基于实际交付经验，包含具体参数与处理方式，可直接用于技术评审。
卡片数量多了会不会变成信息噪音？
按「首屏 8±2 张卡」控制密度，其余卡片收进二级抽屉。每张卡只保留 1 个主指标 + 最多 2 个辅助维度，超出即拆卡。实测首屏卡数从 14 降到 8 后，关键指标平均阅读完成率由 41% 提升到 76%。
栅格在大屏和移动端怎么保持一致？
列数随断点变化、令牌不变：≥1600px 用四列并放宽容器到 1680px，1024px 降为两列，640px 降为单列。列宽一律写 minmax(0,1fr)，间距仍引用同一组 --sp-* 令牌，因此视觉节奏不因断点跳变。
指标口径变更后历史看板怎么办？
口径变更走审批并生成版本号，历史卡片按当时版本冻结渲染，同时提供「按新口径重算」按钮。变更记录保留全量 diff，便于回溯某次告警是否源于口径调整而非真实波动。
强调色应该用在哪里？
遵守 60-30-10：约 60% 为暖米白中性底、30% 为主色（卡片边框、序号、进度条）、10% 为强调色。强调色只用于关键数字、激活态与细高亮，例如占比 42% 的实时流数字用强调色，绝不用它铺整卡背景。
图表渲染如何避免布局跳动？
所有媒体容器先用 aspect-ratio 固定比例（图像 4:3、主视觉 16:10），再让内部元素 object-fit:cover 填充；数值区预留等宽字位，刷新时用占位骨架替代空值，累计布局位移控制在 0.02 以内。
无障碍需要做到什么程度？
正文对比度 ≥ 4.5:1，大字号 ≥ 3:1；所有可点元素 ≥ 44px 且可被 Tab 遍历，焦点用 2px 强调色描边；纯装饰的圆点刻度、光晕统一 aria-hidden，图表附带文字化结论，保证读屏可获取完整信息。
Metrics
关键数据条：平台上线后的阶段性量化结果
数据取自灰度期的三个业务组，统计窗口为连续 30 个自然日。
1.2s
首屏可交互时间（50 万行聚合）
200ms
卡片交互响应上限
98.6%
指标口径一致率
3 步
从首页到目标卡片的平均路径