基于参考截图重新设计的 AI 编程工具 Token 用量排行榜。项目采用 Next.js App Router 全栈结构，默认内置演示数据，可直接部署到 Vercel；后续可平滑接入 Supabase 实现真实登录、数据持久化、反馈处理和截图存储。

• 排行榜：工具、模型、操作系统、区域、城市、时间范围筛选
• Token / 预估费用双口径排序
• 搜索、加载更多、关注用户、本地持久化
• 「如何上榜」：系统切换、命令复制、AI 代接入提示、诊断提交
• 「规则说明」：统计口径、数据字典、费用公式、公平与防作弊
• 「我的」：个人指标、趋势、城市资料、关注列表
• 「反馈」：分类、动态提示、截图预览、提交、反馈记录、消息页签
• 「设置」：隐私、城市、通知、费用显示偏好
• 响应式布局：桌面、平板、手机
• Next.js Route Handlers：排行榜查询与反馈提交接口

• Next.js 16 App Router
• React 19 + TypeScript
• 原生 CSS Design System（无第三方 UI 组件依赖）
• Next.js Route Handlers
• 浏览器 LocalStorage（演示态）
• Supabase Postgres / Auth / Storage（生产态预留，见 supabase/schema.sql）

npm install
npm run dev

访问 http://localhost:3000。

1. 在 Vercel 中导入该 GitHub 仓库。
2. Framework Preset 选择 Next.js（通常会自动识别）。
3. 无需配置环境变量即可部署演示版。
4. 生产接入 Supabase 后，再根据 .env.example 配置环境变量。

当前排行榜使用固定生成的演示数据，API 位于：

• GET /api/leaderboard
• POST /api/feedback

生产化时建议将 src/data/leaderboard.ts 替换为 Supabase 查询层，并启用行级安全策略。

• dev：开发与 Vercel Preview
• master：正式部署