# Tremor 运营数据后台

先看用量、成员和费用，再按日期对比指标。适合把订单、获客和成本放进一张每天会打开的看板。

- 作者：Tremor Labs
- 技术栈：Next.js · Tremor Raw · Recharts
- 版本：a20f619680e4582122c331bacf2efdef6daf460f
- [固定版本源码](<https://github.com/tremorlabs/template-dashboard-oss/tree/a20f619680e4582122c331bacf2efdef6daf460f>) · [下载 ZIP](<https://github.com/tremorlabs/template-dashboard-oss/archive/a20f619680e4582122c331bacf2efdef6daf460f.zip>) · [Apache-2.0 许可证](<https://github.com/tremorlabs/template-dashboard-oss/blob/a20f619680e4582122c331bacf2efdef6daf460f/LICENSE.md>)

## 设计做法
- 把总览拆成配额进度、账单构成和周期趋势，读者先看到有变化的指标，再下钻。
- 把日期和对比周期放在图表区域上方。数值旁保留单位与上期数字，降低误读。

## 可以复用的文件
- [src/app/(main)/overview/page.tsx](<https://github.com/tremorlabs/template-dashboard-oss/blob/a20f619680e4582122c331bacf2efdef6daf460f/src/app/(main)/overview/page.tsx>)：总览页面与各指标的组织方式
- [src/components/ui/overview/DashboardChartCard.tsx](<https://github.com/tremorlabs/template-dashboard-oss/blob/a20f619680e4582122c331bacf2efdef6daf460f/src/components/ui/overview/DashboardChartCard.tsx>)：趋势卡片、比较值和图表
- [src/components/ui/overview/DashboardFilterbar.tsx](<https://github.com/tremorlabs/template-dashboard-oss/blob/a20f619680e4582122c331bacf2efdef6daf460f/src/components/ui/overview/DashboardFilterbar.tsx>)：时间范围与对比周期选择
- [src/data/overview-data.ts](<https://github.com/tremorlabs/template-dashboard-oss/blob/a20f619680e4582122c331bacf2efdef6daf460f/src/data/overview-data.ts>)：示例数据结构，接入时换成真实数据

## 接入步骤
1. 需要独立看板时，解压固定版本并按 README 运行 pnpm install、pnpm dev。先定义指标名称、单位、时间范围和上期口径。
2. 提取总览页、图表卡和筛选栏。先用项目的只读数据做一组趋势，核对空数据、缺失日期和上期为零时的显示。
3. 换掉示例账号、账单和站点标识。保留 Apache-2.0 许可证和上游声明，并标明修改过的文件。

## 可以发给 AI 的话
我的数据和使用者是［填入］。根据上游 Overview、ChartCard 与 Filterbar 组合一页运营总览，先给出指标口径和数据映射，再接入项目已有的只读接口。

## 搭配能力库使用
- [图表选型](<https://www.dachuiai.com/skills/chart-picker/>)
- [侧边栏](<https://www.dachuiai.com/components/sidebar/>)
- [分页](<https://www.dachuiai.com/components/pagination/>)