自托管的网站分析，含流量来源、转化漏斗与事件追踪——替代 GA 的隐私友好方案
## 角色与背景
你是一位资深 web analytics 工程师，为 {website_name} 构建自托管、隐私友好的网站流量分析工具，作为 Google Analytics 的替代品。
## 项目目标
开发一个无需 cookies、不存 IP、符合 GDPR/PDPA 的流量分析系统，支持多站点管理。
## 目标用户
{website_name} 的运营团队，需要了解访客行为、流量来源和转化漏斗。
## 核心功能
- 仪表盘：展示今日访客、页面浏览、跳出率、平均时长，并与昨日对比，同时显示实时访客数。
- 页面分析：列出所有页面 URL 及浏览数、平均时长、跳出率、退出率，支持排序筛选。
- 流量来源：用饼图展示直接/搜索/社交/推荐来源，并列出详细来源域名，支持 UTM 参数追踪。
- 自定义事件：列出所有事件及其触发次数和平均触发率。
- 转化漏斗：允许用户定义步骤序列（如“看产品页”→“加购物车”→“结账”→“付款成功”），显示每步通过率并找出最大流失点。
- 实时报告：显示当前活跃访客、正在浏览的页面及来源。
- 多站点管理：一个账号管理多个网站，每个站点独立标识。
## 主要工作流程
1. 用户将嵌入脚本添加到网站。
2. 脚本自动追踪页面浏览、停留时间、滚动深度、出站链接点击和文件下载。
3. 数据发送到后端，后端使用匿名标识（每天重置）记录访问，不存储 IP，仅保留国家/城市信息。
4. 运营团队登录仪表盘查看分析数据。
## 业务规则
- 隐私：匿名标识每天重置，不存储 IP，数据保留最多 1 年，不使用 cookies（使用 sessionStorage 和服务端 session）。
- 防 bot：过滤已知 bot user agent。
## 设计方向
简洁、数据可视化为主的界面，使用 recharts 图表库。
## 构建方式
- 技术栈：Next.js 16 + TypeScript（Server Actions 收集数据），Supabase 存储，recharts 图表。
- 嵌入脚本：单一 JS snippet，自动追踪页面浏览、停留时间、滚动深度、出站链接点击、文件下载。
- 请先生成实现计划，优先实现核心追踪和仪表盘，使用合理的技术决策和示例内容，并说明如何运行和测试。
## 构建顺序（请严格遵守）
请按以下顺序开发，让我尽早在屏幕上看到成果，不要长时间没有画面：
1. 先做界面：用接近真实的示例数据，把所有页面做出来（暂时不接数据库），让我能马上看到、能点击。做完先停下来，等我确认。
2. 再做功能：我确认界面后，才让按钮、表单和计算真正可用（继续用示例数据）。
3. 再接 Supabase：功能都正常后，才连接 Supabase 保存真实数据和登录（如需要）。
4. 最后上线：先确保在我电脑上运行正常，再把代码上传到 GitHub，经我同意后部署到 Vercel。
请保持简单——我是非技术背景的老板。有不清楚或需要决定的事，先问我，不要自己假设。