# GitHub 开源数据看板深度对标与 VOC 经营看板实施建议

> 调研快照：2026-08-07  
> 目标仓库：`E:\workspace\Saas-voc`  
> 目标页面：`/domestic/overview`  
> 证据范围：项目官方 GitHub 仓库、官方前端源码目录和官方文档。本文不以 Star 数代替产品判断。  
> 结论标签：`直接采用`、`调整后采用`、`暂缓`。

## 1. 结论先行

当前页面已经具备经营看板的基本骨架：经营结论、数据口径、4 个 KPI、7 日趋势、类目贡献、经营诊断和 Top 10 商品表。但与成熟系统的差距，不只是“图表数量少”，而是以下四个结构性问题：

1. **对比基线不成立**：当前代码把 7 天序列拆成前 4 天和后 3 天，直接比较求和结果。不同长度周期的 GMV、件数和退款额不可直接环比，会系统性压低后半段表现。该逻辑同时影响 KPI 和“本期执行结论”。见 `operating-overview.component.ts:317-351`、`:460-473`。
2. **首屏层级偏平**：页面头、执行结论、口径说明、4 张 KPI 卡依次占据首屏，真正回答“哪里异常、为什么、下一步看什么”的分析内容出现较晚。
3. **全局分析上下文不足**：时间固定为 7 日，缺少平台、店铺、类目、商品、对比周期、数据更新时间、刷新和 URL 状态。用户看到的是一张静态快照，不是可复用的经营分析工作台。
4. **数据状态不完整**：模板只有成功渲染和 loading 分支。数据为空、部分成功、陈旧、请求错误会被混为“持续加载”或空图，降低可信度。见 `operating-overview.component.ts:64-212`。

本项目不应照搬某一个开源产品，而应组合其最成熟的机制：

```text
Grafana 的全局时间、变量、刷新、状态与高密度表格
+ Superset 的语义指标、时间粒度、滚动值和真实基线比较
+ Metabase 的业务筛选、跨图点击与低学习成本钻取
+ OpenObserve 的部分/缓存/无数据/错误状态和依赖变量
+ Sentry 的异常优先、单卡放大、上下文探索与阈值
+ PostHog 的注释、日期覆盖规则和经营事件解释
```

最终目标不是“更多卡片”，而是提高**决策密度**：用户在首屏回答本期表现、相对基线、首要风险、影响对象和下一步入口；继续向下才查看归因、证据和完整排行。

## 2. 当前页面基线

### 2.1 已有能力

| 维度 | 当前实现 | 判断 |
| --- | --- | --- |
| 页面摘要 | 页面标题、平台、日期范围、商品列表入口 | 基础上下文已具备，但占高偏大且不可筛选 |
| 经营结论 | 规则生成 GMV 与退款结论，提供风险语气 | 有价值，应压缩为首屏异常摘要而非独占大卡 |
| 数据口径 | 显示日明细行数、自有/竞品评论数和日期 | 口径意识正确，应并入全局上下文和数据状态 |
| KPI | GMV、成交件数、访客转化率、退款金额占比；含 sparkline | 基础指标正确；对比算法、基线标签和指标层级需重做 |
| 趋势 | GMV 折线与订单柱状图，共用时间轴、双 Y 轴 | 可用，但双轴增加解码成本且没有真实对比线、注释和选区联动 |
| 类目 | 二级类目 GMV 排序横条 | 可扫描，但缺少占比、基线变化、退款/VOC 风险和点击筛选 |
| 诊断 | 增长主力、退款风险商品、VOC 证据准备度 | 方向正确，但与趋势、表格、行动状态未形成联动 |
| 商品表 | Top 10，6 列，商品可进入详情 | 可作为骨架；缺少排序、筛选、变化、风险、VOC、行动和列配置 |
| 移动端 | KPI 在 560px 以下单列；900px 表格横向滚动 | 基础不溢出，但信息路径过长，表格不适合反复经营查看 |

### 2.2 当前最需要先修的事实问题

#### P0-1 对比周期

当前逻辑：

```text
7 天数据 -> 前 4 天 previous + 后 3 天 current -> 比较两段求和
```

目标逻辑：

```text
当前 7 天 -> 紧邻的前 7 天
当前 14 天 -> 紧邻的前 14 天
当前自然周 -> 上一个完整自然周
自定义 N 天 -> 紧邻的前 N 天
```

比率型指标必须区分两种变化：

- 转化率 `3.2% -> 3.8%`：主显示 `+0.6 个百分点`，辅助显示相对变化 `+18.8%`。
- GMV `100 万 -> 120 万`：显示相对变化 `+20.0%`，并允许查看绝对变化 `+20 万`。
- 当前或基线分母为 0：显示“基线不足”，不显示无限大或伪造的 0%。

#### P0-2 数据可用性

当前页面明确说明“本品评论尚未接入”，因此自有 VOC 指标不能用 `0` 伪装成“没有负面反馈”。必须显示：

```text
未接入 / 无权限 / 无数据 / 已接入但本周期为 0
```

这四种状态的业务含义不同。竞品评论可以用于“市场风险观察”，不能直接成为本品满意度结论。

#### P0-3 URL 与返回恢复

时间、平台、类目、商品、对比基线、选中图表点和表格排序应进入 URL 查询参数。点击商品或证据再返回时，应恢复同一分析上下文，而不是回到默认 7 日视图。

## 3. 开源项目逐项对标

## 3.1 Grafana

官方证据：[GitHub 仓库](https://github.com/grafana/grafana)、[Dashboard 前端源码](https://github.com/grafana/grafana/tree/main/public/app/features/dashboard-scene)、[Dashboard 文档](https://grafana.com/docs/grafana/latest/dashboards/)、[时间范围与刷新](https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/)、[变量](https://grafana.com/docs/grafana/latest/dashboards/variables/)、[表格](https://grafana.com/docs/grafana/latest/panels-visualizations/visualizations/table/)、[Annotations](https://grafana.com/docs/grafana/latest/dashboards/annotations/)、[Panel options](https://grafana.com/docs/grafana/latest/panels-visualizations/configure-panel-options/)。

### 可学习机制

| 维度 | Grafana 做法 | 映射到 VOC/电商经营 |
| --- | --- | --- |
| 首屏信息架构 | 时间选择、变量、刷新等分析上下文固定在顶部，下面直接进入指标面板 | 把当前大段页面说明压缩为 44px 上下文栏，首屏尽快进入 KPI 和异常 |
| 指标层级 | Stat 面板把当前值、阈值、趋势和 sparkline 放在一个稳定单元 | KPI 同时展示当前值、真实基线差值、迷你趋势和状态，不再用说明文字填满卡片 |
| 时间范围 | 相对/绝对时间、时区、缩放、手动刷新、自动刷新均为一等控制；时间可进入 URL | 增加 7/14/30 天、自定义、上一周期、刷新和可分享 URL |
| 图表 | 时间序列、状态时间线、表格等围绕监控任务，不追求装饰 | 经营趋势保持克制，异常和数据状态使用状态条，不增加无意义饼图 |
| 表格密度 | 支持列过滤、分页、单元格色彩/背景/gauge/sparkline/data link；官方特别说明小屏应降低最小列宽 | 商品表加入变化列、风险色、in-cell sparkline、证据/详情链接；移动端改为核心列加详情，而非完整 900px 表格 |
| 筛选/钻取 | 变量改变后更新整个 Dashboard；panel/data link 将当前变量和时间传给下一视图 | 平台、类目、商品联动所有模块；进入商品详情时携带当前日期和对比基线 |
| 状态 | 面板标题、描述、阈值、链接和查询上下文相互独立 | 把“指标定义”放 tooltip/口径抽屉，把异常状态留在内容区域 |
| 移动 | 表格文档明确要求小屏降低最小列宽；核心值不依赖 hover | 手机使用 tap/focus 明细、固定点击区域和缩减列集 |

### 结论

- `直接采用`：全局时间栏、手动刷新、最后更新时间、URL 状态、KPI sparkline、表格单元格趋势和 data link。
- `调整后采用`：自动刷新。电商数据更新频率通常低于监控数据，默认关闭，只提供与数据源 SLA 对齐的 15 分钟、1 小时选项。
- `暂缓`：用户自由搭建任意面板、秒级实时刷新、完整 dashboard builder。当前更需要固定的经营语义和正确口径。

## 3.2 Apache Superset

官方证据：[GitHub 仓库](https://github.com/apache/superset)、[Dashboard 前端源码](https://github.com/apache/superset/tree/master/superset-frontend/src/dashboard)、[创建 Dashboard](https://superset.apache.org/docs/using-superset/creating-your-first-dashboard/)、[Explore 与 Advanced Analytics](https://superset.apache.org/docs/using-superset/exploring-data/)、[官方 README](https://github.com/apache/superset/blob/master/README.md)。

### 可学习机制

| 维度 | Superset 做法 | 映射到 VOC/电商经营 |
| --- | --- | --- |
| 首屏信息架构 | 可调整网格承载表格、时间序列和 Pivot Table，强调从 Dataset 到 Chart 再到 Dashboard | 页面模块应由统一指标语义生成，避免每张卡各算一遍同名指标 |
| 指标层级 | 轻量语义层定义 metric 和 dimension，图表只选择分组与聚合 | 建立 `gmv`、`conversion_rate`、`refund_to_gmv_rate` 等统一定义，列表、KPI、趋势共用 |
| 时间范围 | 时间列、Time Range、Time Grain 分离；Advanced Analytics 支持 7 日 rolling mean、time shift、绝对差值和重采样 | 用户选择“看多久”和“按日/周聚合”应分开；真实 previous-period 作为第二序列或差值展示 |
| 图表 | Table、Pivot Table、时间序列和多种分析图可在同一数据集上组合 | 类目/商品分析可用排序表、透视表和小多图，但首页只保留回答核心问题的图 |
| 表格密度 | 普通表负责明细，Pivot 负责多维汇总；Dashboard 卡片可调整尺寸 | 首页商品表负责行动排序，类目 x 指标透视放入展开态或独立分析页 |
| 筛选/钻取 | Dashboard 作为多个 Chart 的统一分析容器，Explore 保留从图回到查询配置的路径 | 首页负责“发现”，类目/商品详情负责“解释”，两者通过固定筛选契约连接 |
| 空/错误/陈旧 | Superset 更偏 BI 查询工作台，错误通常和查询/数据源上下文绑定 | 学习“让用户知道是哪张图、哪个查询失败”，但状态文案应换成业务语言 |
| 移动 | 可调整网格主要服务桌面分析，官方材料未把移动经营巡检作为核心范式 | 不复制其编辑网格；手机使用预定义阅读顺序 |

### 结论

- `直接采用`：统一 metric/dimension 语义、时间范围和时间粒度分离、equal-period time shift、滚动均值。
- `调整后采用`：Pivot Table 和可调整布局只用于分析详情/管理员配置，不进入默认首页。
- `暂缓`：SQL Lab、用户自由定义 Dataset/Chart、任意 Dashboard 编辑器。这会显著扩大产品和权限边界。

## 3.3 Metabase

官方证据：[GitHub 仓库](https://github.com/metabase/metabase)、[Dashboard 前端源码](https://github.com/metabase/metabase/tree/master/frontend/src/metabase/dashboard)、[Dashboard 介绍](https://www.metabase.com/docs/latest/dashboards/introduction)、[Dashboard filters](https://www.metabase.com/docs/latest/dashboards/filters)、[Dashboard interactivity](https://www.metabase.com/docs/latest/dashboards/interactive)、[Dashboard subscriptions](https://www.metabase.com/docs/latest/dashboards/subscriptions)。

### 可学习机制

| 维度 | Metabase 做法 | 映射到 VOC/电商经营 |
| --- | --- | --- |
| 首屏信息架构 | Dashboard 由问题卡、标题/文本、链接等组成，可通过 tab 分组；语言面向业务用户 | 本项目保持业务词汇，如“退款风险商品”，不要把查询、聚合器暴露给经营人员 |
| 指标层级 | 每张卡回答一个明确问题，文本/标题负责解释，不要求每个元素都做成重卡 | 页面按“结果、驱动、风险、对象”分带，减少嵌套卡片和重复说明 |
| 时间/刷新 | URL 可控制 fullscreen 和 auto-refresh | 筛选状态全部可分享；大屏模式和刷新策略可作为后续运营场景 |
| 筛选 | Filter widget 可连接多个问题；支持默认值、必填、多选和 linked filters | 店铺 -> 类目 -> 商品使用依赖筛选；大数据范围必须要求日期或店铺，避免无界查询 |
| 钻取 | Click behavior 可跳往 dashboard/question/URL，或更新 dashboard filter；官方称后者为 cross-filtering | 点击类目横条不应只弹 tooltip，而应筛选全页；点击风险商品进入带上下文的详情 |
| 表格/导出 | Dashboard 订阅可附 CSV/XLSX/PDF；PDF 保留 Dashboard 布局和 tab 分页 | 周报/订阅有价值，但应等指标口径和历史数据稳定后实施 |
| 空/错误/陈旧 | 强调业务问题卡的独立性，单卡可以单独解释或失效 | 单模块失败不应让整个页面失效；保留其他已成功结果 |
| 移动 | 官方文档重点是网格与交互，不提供足够的移动规范 | 采用其低学习成本交互，不照搬桌面网格尺寸 |

### 结论

- `直接采用`：点击图表更新全局筛选、依赖筛选、必填范围、URL 可恢复、业务化文案。
- `调整后采用`：tab 只用于“经营 / 风险 / 数据质量”等稳定信息域，不把首屏关键异常藏在 tab 后。
- `暂缓`：邮件/Slack/PDF 订阅，待基线、数据新鲜度和权限模型稳定后进入 P2。

## 3.4 OpenObserve

官方证据：[GitHub 仓库](https://github.com/openobserve/openobserve)、[Dashboard 前端源码](https://github.com/openobserve/openobserve/tree/main/web/src/views/Dashboards)、[Dashboard](https://openobserve.ai/docs/user-guide/analytics/dashboards/dashboards-in-openobserve/)、[Filters](https://openobserve.ai/docs/user-guide/analytics/dashboards/filters/)、[Variable dependencies](https://openobserve.ai/docs/user-guide/analytics/dashboards/variables/variable-dependencies/)、[Comparison Against](https://openobserve.ai/docs/user-guide/analytics/dashboards/comparison-against-in-dashboards/)、[Table Chart](https://openobserve.ai/docs/user-guide/analytics/dashboards/panels/table-chart/)、[Panel troubleshooting](https://openobserve.ai/docs/user-guide/analytics/dashboards/panels/troubleshooting/)。

### 可学习机制

| 维度 | OpenObserve 做法 | 映射到 VOC/电商经营 |
| --- | --- | --- |
| 首屏信息架构 | 实时/历史数据统一在 Dashboard，panel 可按 tab 组织 | 经营结果与数据质量可在同一工作台，但默认必须先展示经营结论 |
| 时间/基线 | Comparison Against 用同一查询、同一时长执行当前和过去时间框，并并列展示 | 后端用同一指标定义同时返回 current/baseline，杜绝前端拼两套口径 |
| 筛选 | Filter 支持静态值、动态变量、操作符、AND/OR 嵌套；变量支持 parent-child 依赖 | 平台 -> 店铺 -> 类目 -> 商品是天然的依赖链；高级组合条件放二级筛选抽屉 |
| 表格密度 | 支持列格式、Excel 式列过滤、分页、条件样式、转置和动态列 | 商品表可加入列筛选、分页、条件色、列配置；不需要照搬转置到首页 |
| 空状态 | 明确区分 loading placeholder、查询成功但 `No data`，并建议调整时间/筛选后刷新 | 首页必须把“本周期 0 条”与“接口失败”分开，空状态提供下一步动作 |
| 部分/陈旧 | Troubleshooting 明确提示查询被中断导致 partial/no data，以及缓存结果与选中时间不一致 | 引入 `partial`、`stale`，继续显示已有值并标注影响范围、更新时间和重试按钮 |
| 错误 | 错误图标和 panel toolbar 说明具体失败原因 | 错误应落到模块级，并提供“重试该模块”和“查看数据状态” |
| 移动 | 官方重心仍是桌面面板，表格功能复杂 | 手机只保留核心列，条件与完整列放详情抽屉；复杂 AND/OR 条件不占首屏 |

### 结论

- `直接采用`：同查询对比基线、依赖变量、`loading/empty/partial/stale/error` 明确分态、模块级重试。
- `调整后采用`：高级 AND/OR 筛选放“更多筛选”，默认栏只显示高频条件。
- `暂缓`：多 SQL query 面板、日志级实时刷新和用户自定义复杂查询。

## 3.5 Sentry

官方证据：[GitHub 仓库](https://github.com/getsentry/sentry)、[Dashboard 前端源码](https://github.com/getsentry/sentry/tree/master/static/app/views/dashboards)、[Dashboards](https://docs.sentry.io/product/dashboards/)、[Widget Builder](https://docs.sentry.io/product/dashboards/widget-builder/)、[Widget Library](https://docs.sentry.io/product/dashboards/widget-library/)。

### 可学习机制

| 维度 | Sentry 做法 | 映射到 VOC/电商经营 |
| --- | --- | --- |
| 首屏信息架构 | Dashboard 先给应用健康概览，再用 widget 指向错误、性能、日志等 explorer | 经营首页先给结果与风险，详细 VOC、退款和商品证据进入各自 explorer |
| 全局筛选 | project、environment、date range、release 统一作用于所有 widget；时间序列缩放会更新全页 | 平台、店铺、类目、商品、日期统一作用于全页；框选异常时间后其他模块同步 |
| 异常优先 | Widget 支持阈值；Issues/Errors 围绕“最需要处理的对象”排序 | 退款率、退款金额、负面 VOC 和未完成行动组合为优先级，不只按 GMV 排行 |
| 钻取 | Widget 菜单可打开 Errors、Traces、Logs、Replay、Metrics；Viewer 提供更强过滤、排序和导航 | 每个模块提供“进入退款分析 / VOC 证据 / 商品详情 / 行动中心”，不在首页塞完整明细 |
| 表格密度 | Widget viewer 可显示更多行、分页、排序、调列宽；图表展开后附分组结果表 | 首页表格保持 10-20 行，展开查看完整排行并共享当前 URL |
| 图表类型 | Big number、时间序列、表格都服务于错误/性能任务；多序列有上限 | 默认不展示超过 5 个类目/主题序列；长尾进入表格或展开态 |
| 空/错误/陈旧 | 模块按 dataset 和查询独立，失败和探索上下文可定位 | 经营数据与 VOC 数据独立标注状态，不能因评论源失败隐藏经营数据 |
| 移动 | 官方文档没有专门移动范式，但单 widget viewer 天然降低单屏复杂度 | 手机点击图表后打开全屏单模块查看器，代替桌面多栏原样缩放 |

### 结论

- `直接采用`：异常优先队列、阈值、模块级 explorer、单卡展开 viewer、全局时间缩放联动。
- `调整后采用`：Widget Library 改为受控的 VOC/经营模块库，由产品定义，不允许任意查询。
- `暂缓`：完整自助 Widget Builder 和跨数据集自由组合。

## 3.6 PostHog（补充）

官方证据：[GitHub 仓库](https://github.com/PostHog/posthog)、[Dashboard 前端源码](https://github.com/PostHog/posthog/tree/master/frontend/src/scenes/dashboard)、[Dashboards](https://posthog.com/docs/product-analytics/dashboards)、[Insights](https://posthog.com/docs/product-analytics/insights)、[Annotations](https://posthog.com/docs/data/annotations)。

### 可学习机制

- Dashboard 文档把 date range override、dashboard filter、tile-level filter precedence、单 tile 刷新、自动刷新和文本/按钮/widget 作为明确能力。这说明筛选优先级必须显式定义，不能由组件各自决定。
- Annotations 可把版本发布、营销活动和事件写在时间线上，帮助解释指标突变。映射到本项目，可标记调价、促销、换包装、物流策略、客服规则和行动完成时间。
- Trends/Funnels/Retention/Lifecycle 是产品行为分析语义。VOC 首页不应生搬漏斗留存，但“变化事件 + 指标结果”的解释方式值得采用。

### 结论

- `直接采用`：经营事件 annotation、dashboard 与模块筛选优先级规则、单模块刷新。
- `调整后采用`：AI refresh analysis 只能生成带证据的解释草稿，并显示数据范围、模型和生成时间。
- `暂缓`：产品行为 retention/lifecycle 模型，除非后续接入用户级行为事件且具备合规的数据边界。

## 4. 横向结论矩阵

| 能力 | 最强参考 | 本项目结论 | 优先级 |
| --- | --- | --- | --- |
| 首屏经营层级 | Sentry + Metabase | 结果 KPI -> 首要异常 -> 驱动趋势 -> 对象排行 | P0 |
| 时间与刷新 | Grafana | 7/14/30/自定义、刷新、更新时间、URL | P0 |
| 对比基线 | Superset + OpenObserve | 相同查询、相同长度、相邻周期；支持绝对差与相对差 | P0 |
| 指标语义 | Superset | 所有视图复用同一 metric definition | P0 |
| 依赖筛选 | Metabase + OpenObserve | 平台 -> 店铺 -> 类目 -> 商品 | P0 |
| 跨图联动 | Metabase + Sentry | 点击类目/时间范围更新全页或进入 explorer | P1 |
| 空/错/部分/陈旧 | OpenObserve | 模块级状态、已有数据保留、局部重试 | P0 |
| 高密度表格 | Grafana + Sentry + OpenObserve | 条件格式、变化列、排序、分页、列管理、展开 viewer | P1 |
| 时间线解释 | Grafana + PostHog | 促销、调价、版本、行动完成 annotation | P1 |
| 移动分析 | Sentry viewer 思路 + 本项目定制 | 单模块全屏、核心列、筛选底部抽屉 | P1 |
| 自助搭建 | Grafana/Superset/Metabase | 先固定业务模板，后续再评估 | P3/暂缓 |

## 5. 目标页面信息架构

## 5.1 桌面首屏（1366x768 也成立）

```text
┌ 经营概览 | 京东 / 店铺 / 类目 / 商品 | 近7天 | 对比上一周期 | 更新于 10:30 | 刷新 ┐
├ GMV ─┬ 订单 ─┬ 访客 ─┬ 转化率 ─┬ 退款占比 ─┬ 高风险商品 ┤
├ 本期关键结论：退款风险升高，影响 3 个高 GMV 商品；数据状态：经营完整 / 本品 VOC 未接入 ┤
├ 经营结果与基线趋势（8列，当前/基线/事件注释） ─────┬ 风险待办 Top 5（4列） ┤
└ 首屏底部露出“转化驱动 / 类目风险 / VOC 证据”下一分析带的标题或首行 ┘
```

首屏规则：

- 页面标题不使用大面积 hero，不重复解释系统能力。
- 筛选栏和数据更新时间保持可见；向下滚动时可收缩为 sticky compact bar。
- KPI 不超过 6 个，必须分为结果、效率、风险三类；颜色只表达状态，不为每张卡分配装饰色。
- “本期执行结论”和“数据口径”合并为一条 compact status band，避免连续两个大卡占满首屏。
- 主趋势与风险队列在首屏形成“发生了什么”和“先处理谁”的配对。
- 下一内容带应在首屏底部露出，避免用户误认为页面只有 KPI。

## 5.2 完整页面阅读顺序

### A. 全局上下文栏

字段：

- 平台：京东，后续可扩展天猫/抖音等。
- 店铺/账号：支持单选或多选，默认当前 workspace 主店铺。
- 类目：二级类目，依赖店铺。
- 商品：依赖类目，支持 SKU/名称搜索。
- 时间：近 7/14/30 天、自定义、自然周。
- 对比：上一等长周期、上周同期、无对比；同比在有足够历史后开放。
- 数据状态：完整/部分/陈旧，最后成功更新时间。
- 操作：刷新、复制当前视图链接；保存视图放 P2。

### B. 一级经营结果

默认 6 项：

1. 成交金额 GMV。
2. 成交订单数。当前页面只把订单藏在趋势与帮助文案中，应提升为首屏结果指标。
3. 访客数。
4. 访客转化率。
5. 退款金额占比。
6. 高风险商品数，必须带阈值版本和影响 GMV。

每项固定结构：

```text
指标名 | 当前值 | 对比差值 | 基线值 | sparkline | 状态/数据缺口 | 口径 tooltip
```

“成交件数”保留在二级驱动或订单详情中，首屏优先展示订单数，因为转化率分子使用订单数，语义链更一致。

### C. 经营结果与基线趋势

默认使用上下对齐的小多图，而不是当前双 Y 轴：

- 图 1：GMV 当前值与基线值，直接标注期末差值。
- 图 2：订单数或转化率当前值与基线值，共享 X 轴。
- annotation：促销、调价、库存、履约变更、行动完成时间。
- 交互：框选时间更新下方类目、商品和风险模块；“重置时间”清晰可见。

若空间受限，可通过 segmented control 在 `GMV / 订单 / 转化 / 退款` 间切换，但当前值、基线和差值始终同时可见。

### D. 风险待办 Top 5

按“影响规模 x 异常程度 x 证据可信度”排序，而不是只按退款率或 GMV：

```text
priorityScore = normalized(affectedGmv)
              * normalized(riskLift)
              * evidenceConfidence
```

每行显示：对象、异常、相对基线、影响 GMV、证据状态、已有行动状态、入口。不要把 AI 置信度当成业务严重度。

### E. 驱动与归因层

| 用户问题 | 推荐图形 | 当前数据适配 | 交互 |
| --- | --- | --- | --- |
| 流量在哪一步流失 | 同口径漏斗或逐步转化条 | impressions/clicks/cart/orders 均已有字段，但必须先校验同一人群和周期 | 点击阶段筛选商品排行 |
| 哪些类目贡献增长 | 排序横条，当前值 + 基线差值 | 已有二级类目 GMV，可直接扩展 | 点击类目 cross-filter 全页 |
| 哪些商品“规模大且风险高” | GMV x 退款占比散点，点大小为退款金额 | 已有 GMV、退款占比、退款金额 | 点击点打开商品 viewer |
| 经营变化是否伴随 VOC 变化 | 两个共享 X 轴的小多图 | 仅在本品 VOC 接入后开放；目前显示数据缺口 | 选中时间进入反馈证据 |
| 哪些主题在升温 | 主题 x 周期 heatmap 或排名变化表 | 需要稳定 taxonomy 和跨周期主题记录 | 点击主题打开证据列表 |

不建议：

- 用饼图展示多个接近的类目占比。
- 用 gauge 表达没有明确目标区间的普通指标。
- 用 word cloud 代替主题数量、占比和趋势。
- 在同一图上继续增加第三条不同量纲的 Y 轴。
- 仅靠红绿表达好坏；必须同时有箭头、文本和数值。

### F. 商品经营排行

桌面默认列：

| 列 | 表达 |
| --- | --- |
| 商品 | sticky，名称 + SKU，点击进入详情 |
| 类目 | 支持列筛选 |
| GMV | 当前值，右对齐 |
| GMV 变化 | 百分比 + in-cell sparkline |
| 订单 | 当前值 |
| 转化率 | 当前值 + 百分点变化 |
| 退款占比 | 条件色 + 基线变化 |
| 退款金额 | 影响规模 |
| VOC | `未接入` / 样本数 + 负向率；不把未接入显示成 0 |
| 主要问题 | 稳定 taxonomy 标签，点击看证据 |
| 行动 | open/in progress/blocked/completed 数量 |
| 更新时间 | 该行对应数据的新鲜度 |

表格规格：

- 行高默认 44px，可切换紧凑 36px；表头 sticky。
- 商品列和操作列固定，数值列右对齐并使用 tabular nums。
- 默认按风险优先或 GMV 排序，明确显示排序字段。
- 支持 10/20/50 行分页，完整结果进入 viewer，不无限拉长首页。
- 支持列显隐和当前视图导出，列宽持久化放 P2。
- 颜色只用于超过阈值的单元格，不整行铺红。

### G. 数据质量与证据准备度

不要继续用普通“诊断卡”描述数据缺口。改为紧凑状态表：

| 数据域 | 覆盖 | 最新时间 | 状态 | 影响 |
| --- | ---: | --- | --- | --- |
| 商品日经营 | N 行 / N 商品 | 时间戳 | 完整/部分/陈旧 | 影响 KPI、趋势和排行 |
| 本品评论 | N 条 / N 商品 | 时间戳 | 未接入/完整 | 影响本品 VOC 结论 |
| 竞品评论 | N 条 / N 商品 | 时间戳 | 完整/部分 | 仅用于竞品观察 |
| 行动项 | N 条 | 时间戳 | 正常/错误 | 影响风险闭环 |

状态行可跳到 `/data-status`，并保留当前筛选范围。

## 6. 指标与数据契约

## 6.1 指标层级

```text
L0 数据可信度
  source status / coverage / last successful update / partial reason

L1 经营结果
  GMV / orders / visitors / conversion rate / refund-to-GMV rate

L2 经营驱动
  impressions / clicks / CTR / cart units / sold units / average unit price

L3 风险与 VOC
  affected GMV / risky products / refund amount / own VOC volume
  negative rate / rising topics / competitor signals / evidence coverage

L4 执行闭环
  open actions / overdue actions / completed actions / validation result
```

L0 是其他层级能否被相信的前提，不能藏到页面底部；L3 的本品 VOC 数据未接入时只展示准备度，不生成正负结论。

## 6.2 前端查询状态

建议固定为可序列化契约：

```ts
interface DomesticOverviewQuery {
  platform: string;
  storeIds: string[];
  categoryIds: string[];
  productIds: string[];
  from: string;
  to: string;
  grain: 'day' | 'week';
  comparison: 'previous_period' | 'previous_week' | 'none';
  reviewScope: 'own' | 'competitor' | 'all';
}
```

URL 示例：

```text
/domestic/overview?from=2026-07-31&to=2026-08-06&compare=previous_period&category=厨电&sort=risk_desc
```

## 6.3 KPI 返回结构

```ts
interface DashboardMetric {
  key: string;
  label: string;
  unit: string;
  value: number | null;
  baselineValue: number | null;
  absoluteDelta: number | null;
  relativeDelta: number | null;
  deltaUnit: 'percent' | 'percentage_point' | 'absolute';
  series: Array<{ at: string; value: number | null }>;
  baselineSeries: Array<{ at: string; value: number | null }>;
  status: 'ready' | 'empty' | 'partial' | 'stale' | 'error';
  updatedAt: string | null;
  definitionVersion: string;
}
```

同名指标必须由一个 definition 产生。KPI、图表、表格总计不允许各自在组件内重新聚合。

## 6.4 页面状态机

| 状态 | 判定 | UI 行为 |
| --- | --- | --- |
| loading | 首次请求未完成 | 保留稳定布局 skeleton，不显示伪造 0 |
| ready | 所有关键数据源成功 | 正常显示值和更新时间 |
| empty | 请求成功但当前筛选无记录 | 说明是哪一范围无数据，提供清除筛选/扩大时间 |
| partial | 部分数据源或部分分片成功 | 保留成功数据，标注缺失模块、覆盖率和重试 |
| stale | 当前筛选下显示的是过期缓存/上次成功值 | 显示“截至时间”，不清空图表，提供刷新 |
| error | 模块请求失败且无可用缓存 | 模块级错误说明、重试和数据状态入口 |

页面顶部展示全局状态，模块内部展示局部状态。不得用 toast 作为唯一错误载体。

## 7. 筛选、钻取与联动契约

### 7.1 筛选优先级

```text
URL 显式参数
  > 用户当前会话选择
  > 保存视图默认值
  > workspace 默认值
  > 系统默认值
```

模块级筛选只能缩小范围，不能静默覆盖全局日期、店铺或权限范围。任何覆盖都要在模块标题附近可见。

### 7.2 Cross-filter 行为

- 点击类目横条：设置 `categoryIds`，更新 KPI、趋势、风险和商品表。
- 点击趋势区间：更新 `from/to`，保留原始范围为“重置”目标。
- 点击散点商品：打开单商品 viewer；“进入完整详情”再路由。
- 点击主题：打开证据抽屉，显示样本数、代表反馈和来源边界。
- 点击 KPI：进入对应 explorer，而不是 GMV、件数和转化率全部跳到同一个商品列表。

### 7.3 Drill-down 路径

```text
经营结果
  -> 异常指标
  -> 类目/商品影响对象
  -> 退款或 VOC 证据
  -> 已有关联行动
  -> 行动效果验证
```

每一级都携带当前查询状态，并支持浏览器返回恢复。

## 8. 移动端实施规范

390x844 不是桌面页面缩小版，应有独立阅读状态：

1. 顶部只保留标题、日期、状态和筛选按钮；完整筛选在 bottom sheet。
2. KPI 使用 2 列稳定网格，每卡约 104-116px 高；文字不随 viewport 缩放，长值采用单位缩写和完整值 tooltip/详情。
3. “本期关键结论”限制 2-3 行，展开后查看数据口径，不使用嵌套卡片。
4. 主趋势一次显示一个指标，使用 segmented control 切换；当前与基线仍同时存在。
5. hover 行为全部有 tap/focus 等价实现；tooltip 可固定并关闭。
6. 风险队列使用纵向 5 行列表，每行保持对象、异常、影响和入口。
7. 商品表改为排名列表，只展示商品、GMV、变化、退款风险；其余字段在全屏 viewer/抽屉查看。
8. 不允许页面级横向滚动。复杂图表和完整表格只在自身容器或 viewer 内处理。
9. 筛选、选中商品和滚动前的分析上下文进入 URL；从详情返回后恢复。

## 9. 采用决策清单

## 9.1 直接采用

| 能力 | 来源 | 本项目落点 |
| --- | --- | --- |
| 全局时间、刷新、更新时间 | Grafana | 顶部 compact context bar |
| 真实等长周期基线 | Superset/OpenObserve | 服务层一次返回 current/baseline |
| metric/dimension 统一定义 | Superset | analytics service/domain contract |
| linked filter 与 cross-filter | Metabase/OpenObserve | 平台 -> 店铺 -> 类目 -> 商品，全页联动 |
| 模块级 viewer/explorer | Sentry | 风险、商品、退款、VOC 独立展开 |
| empty/partial/stale/error | OpenObserve | 页面级 + 模块级状态机 |
| 高密度表格条件格式和 data link | Grafana/OpenObserve/Sentry | 商品排行与完整 viewer |
| 经营事件 annotation | Grafana/PostHog | 趋势图上的促销、调价和行动事件 |

## 9.2 调整后采用

| 能力 | 调整原因 | 调整方案 |
| --- | --- | --- |
| 自动刷新 | 电商数据不是秒级监控 | 默认关闭，按数据源 SLA 提供刷新周期 |
| Dashboard tabs | 关键异常可能被隐藏 | 只拆稳定信息域，默认总览仍露出风险 |
| Pivot/Heatmap | 手机和首屏解码成本高 | 放二级分析或全屏 viewer |
| Widget Library | 任意组合会破坏口径 | 只提供经过定义和验收的业务模块 |
| AI refresh analysis | 可能把数据缺口写成结论 | 只生成引用型解释草稿，标明模型、范围、证据和时间 |
| 高级 AND/OR 筛选 | 高频用户才需要 | 放“更多筛选”，支持保存视图后再推广 |

## 9.3 暂缓

- 用户自由拖拽和搭建任意 Dashboard。
- SQL Lab、自助 Dataset、任意查询表达式。
- 秒级实时刷新和大规模 streaming 图表。
- 任意第三方 iframe/widget。
- 用户级留存/lifecycle，直到存在合规且稳定的用户行为事件。
- 邮件/Slack/PDF 订阅，直到指标版本、权限、数据新鲜度均可审计。
- 3D、装饰性地图、word cloud 和不能形成行动的图表类型。

## 10. 分阶段实施建议

## P0：先把看板做“可信且可比较”

### 交付

1. 修复 4 天 vs 3 天对比，改为等长相邻周期。
2. 引入 `DomesticOverviewQuery`，时间、对比、平台/类目/商品进入 URL。
3. 顶部合并页面说明、数据口径和刷新状态为 compact context bar。
4. KPI 扩为 6 项，返回 current/baseline/delta/series/status/updatedAt。
5. 引入 `loading/ready/empty/partial/stale/error` 状态机。
6. 本品 VOC 未接入时显示缺口状态，不显示 0% 正负面率。
7. 趋势改为当前 vs 基线小多图，移除默认双 Y 轴。

### 建议代码落点

- `src/modules/domestic-voc/operating-overview.component.ts`
- `src/modules/domestic-voc/operating-overview.component.scss`
- `src/app/core/services/domestic-analytics.service.ts`
- `src/app/core/services/domestic-dataset.service.ts`
- 新增查询状态/指标契约时优先放 `src/app/core/models`，不要继续扩张组件内 interface。

### 验收

- 近 7 天只和紧邻前 7 天比较，单测覆盖 0 分母、缺日、奇数天、自定义日期。
- 比率变化用百分点，规模变化用百分比；tooltip 显示公式和基线范围。
- URL 刷新、复制、浏览器前进后退均恢复同一筛选。
- 任一数据源失败时，其他成功模块继续显示。
- stale 状态保留最后成功值并显示“截至时间”。
- 1366x768 首屏可见全局上下文、6 个 KPI、关键结论、主趋势和风险队列标题/主体。

## P1：提高分析密度与可行动性

### 交付

1. 类目横条 cross-filter，全页同步。
2. GMV x 退款风险散点和流量转化驱动模块。
3. 风险待办 Top 5，关联商品、退款/VOC 证据和 ActionItem。
4. 商品表加入变化、退款金额、VOC 状态、主要问题、行动和更新时间。
5. 完整表格 viewer：排序、分页、列管理、导出、可分享 URL。
6. annotation 模型与趋势图展示。
7. 移动端 KPI 2 列、单图切换、风险列表和商品 viewer。

### 验收

- 点击类目、趋势区间、风险商品后，所有关联模块使用同一 query state。
- 风险排行同时体现异常幅度和影响规模，排序理由可解释。
- 桌面表格 1440px 无截断；390px 页面无横向滚动，核心排行无需横移即可阅读。
- 键盘可访问所有筛选、图表数据点等价入口、表格排序和 viewer。
- 颜色之外同时提供文本、图标或数值状态。

## P2：保存、传播与 AI 解释

### 交付

1. 保存视图与角色默认视图。
2. 周报/PDF/消息订阅，保留筛选、指标版本、生成时间和数据状态。
3. AI 解释当前变化，但只引用结构化指标、annotation 和 evidence ID。
4. Dashboard 使用分析、慢查询和数据质量运营指标。

### 验收

- 同一保存视图在权限范围内得到相同口径和布局。
- 订阅报告能说明数据是否 partial/stale，不能把旧缓存包装成当前结果。
- AI 生成的每个数字与结论可回到具体指标或证据；无本品 VOC 时不生成本品满意度判断。

## 11. 设计与工程验收总表

| 类别 | 必须满足 |
| --- | --- |
| 数据正确性 | 等长基线；比率与规模变化口径区分；缺失不等于 0 |
| 首屏 | 上下文、KPI、关键异常、主趋势、风险入口形成完整阅读路径 |
| 图表 | 关键值不依赖 hover；直接标签；序列不超过可辨识上限；无无意义双轴 |
| 表格 | sticky 标识列、数值右对齐、明确排序、条件格式、分页、完整 viewer |
| 状态 | loading/empty/partial/stale/error 可区分；局部失败不清空全页 |
| 筛选 | 依赖关系、优先级、URL 序列化、返回恢复、权限边界明确 |
| 移动 | 390px 无页面级横向滚动；tap 等价；表格有移动阅读模式 |
| 可访问性 | 键盘操作、可见 focus、色彩冗余编码、图表文本摘要 |
| 性能 | 首屏关键数据优先；下方重图延迟加载；筛选防抖和请求取消 |
| 审计 | 指标定义版本、数据更新时间、筛选范围、AI 生成信息均可追踪 |

## 12. 最终判断

`/domestic/overview` 的下一轮不应继续以“新增若干漂亮卡片”为目标。正确顺序是：

```text
先修正比较事实
  -> 建立统一查询与状态契约
  -> 重排首屏决策层级
  -> 增加驱动、风险和对象密度
  -> 打通筛选、钻取、证据和行动
  -> 最后再做保存、订阅与 AI 解释
```

最值得立即落地的组合是：Grafana 的控制与表格、Superset 的指标和时间比较、Metabase 的业务交互、OpenObserve 的数据状态、Sentry 的异常工作流。PostHog 的 annotation 应作为 P1 增强。自助搭建、SQL 和任意 widget 暂不进入本项目主线。

## 13. 官方资料索引

### Grafana

- [GitHub](https://github.com/grafana/grafana)
- [Dashboard frontend](https://github.com/grafana/grafana/tree/main/public/app/features/dashboard-scene)
- [Dashboards](https://grafana.com/docs/grafana/latest/dashboards/)
- [Time range controls](https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/)
- [Variables](https://grafana.com/docs/grafana/latest/dashboards/variables/)
- [Table visualization](https://grafana.com/docs/grafana/latest/panels-visualizations/visualizations/table/)
- [Annotations](https://grafana.com/docs/grafana/latest/dashboards/annotations/)

### Apache Superset

- [GitHub](https://github.com/apache/superset)
- [Dashboard frontend](https://github.com/apache/superset/tree/master/superset-frontend/src/dashboard)
- [Creating your first dashboard](https://superset.apache.org/docs/using-superset/creating-your-first-dashboard/)
- [Exploring data and Advanced Analytics](https://superset.apache.org/docs/using-superset/exploring-data/)

### Metabase

- [GitHub](https://github.com/metabase/metabase)
- [Dashboard frontend](https://github.com/metabase/metabase/tree/master/frontend/src/metabase/dashboard)
- [Dashboard introduction](https://www.metabase.com/docs/latest/dashboards/introduction)
- [Dashboard filters](https://www.metabase.com/docs/latest/dashboards/filters)
- [Dashboard interactivity](https://www.metabase.com/docs/latest/dashboards/interactive)
- [Dashboard subscriptions](https://www.metabase.com/docs/latest/dashboards/subscriptions)

### OpenObserve

- [GitHub](https://github.com/openobserve/openobserve)
- [Dashboard frontend](https://github.com/openobserve/openobserve/tree/main/web/src/views/Dashboards)
- [Dashboards](https://openobserve.ai/docs/user-guide/analytics/dashboards/dashboards-in-openobserve/)
- [Filters](https://openobserve.ai/docs/user-guide/analytics/dashboards/filters/)
- [Variable dependencies](https://openobserve.ai/docs/user-guide/analytics/dashboards/variables/variable-dependencies/)
- [Comparison Against](https://openobserve.ai/docs/user-guide/analytics/dashboards/comparison-against-in-dashboards/)
- [Table Chart](https://openobserve.ai/docs/user-guide/analytics/dashboards/panels/table-chart/)
- [Panel troubleshooting](https://openobserve.ai/docs/user-guide/analytics/dashboards/panels/troubleshooting/)

### Sentry

- [GitHub](https://github.com/getsentry/sentry)
- [Dashboard frontend](https://github.com/getsentry/sentry/tree/master/static/app/views/dashboards)
- [Dashboards](https://docs.sentry.io/product/dashboards/)
- [Widget Builder](https://docs.sentry.io/product/dashboards/widget-builder/)
- [Widget Library](https://docs.sentry.io/product/dashboards/widget-library/)

### PostHog

- [GitHub](https://github.com/PostHog/posthog)
- [Dashboard frontend](https://github.com/PostHog/posthog/tree/master/frontend/src/scenes/dashboard)
- [Dashboards](https://posthog.com/docs/product-analytics/dashboards)
- [Insights](https://posthog.com/docs/product-analytics/insights)
- [Annotations](https://posthog.com/docs/data/annotations)

以上链接均在调研日直接访问核验。`latest` 文档会随上游版本更新；实施时应记录实际采用机制对应的版本或提交。