{"id":30717813,"url":"https://github.com/terryso/ccpet-leaderboard","last_synced_at":"2025-09-05T16:02:51.370Z","repository":{"id":312434651,"uuid":"1047389144","full_name":"terryso/ccpet-leaderboard","owner":"terryso","description":"CCPet Leaderboard Page","archived":false,"fork":false,"pushed_at":"2025-08-30T14:57:50.000Z","size":84,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-30T16:27:59.930Z","etag":null,"topics":["ccpet","claude-code","leaderboard"],"latest_commit_sha":null,"homepage":"https://ccpet.surge.sh","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/terryso.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-30T10:03:18.000Z","updated_at":"2025-08-30T14:57:53.000Z","dependencies_parsed_at":"2025-08-30T16:28:01.916Z","dependency_job_id":"f33848f0-b1a8-4626-a6df-7628bf96db58","html_url":"https://github.com/terryso/ccpet-leaderboard","commit_stats":null,"previous_names":["terryso/ccpet-leaderboard"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/terryso/ccpet-leaderboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terryso%2Fccpet-leaderboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terryso%2Fccpet-leaderboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terryso%2Fccpet-leaderboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terryso%2Fccpet-leaderboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/terryso","download_url":"https://codeload.github.com/terryso/ccpet-leaderboard/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terryso%2Fccpet-leaderboard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273417342,"owners_count":25101817,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ccpet","claude-code","leaderboard"],"created_at":"2025-09-03T09:02:07.481Z","updated_at":"2025-09-03T09:04:13.402Z","avatar_url":"https://github.com/terryso.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🐾 CCPET 排行榜\n\n一个美观的实时排行榜应用，专为 Claude Code 虚拟宠物（CCPET）设计。使用 Next.js 15 和 Supabase 构建，实时追踪宠物的 token 使用量、成本和生存时间，提供引人入胜的竞技体验！\n\n## ✨ 核心功能\n\n### 🏆 实时排行榜\n- **多时间段排名**：今日、7天、30天、全时段排行榜\n- **智能排序**：按 token 使用量、成本或生存时间排序\n- **实时更新**：数据变化时自动刷新排名\n- **分页显示**：支持大量宠物数据的分页浏览\n\n### 🐾 宠物展示\n- **可爱表情符号**：根据宠物类型自动匹配表情符号（🐱🐶🐰等）\n- **生存状态**：清晰显示宠物存活状态（✅ 存活 / 💀 死亡）\n- **详细信息**：宠物名称、类型、生存天数\n- **使用统计**：输入/输出 token 数量和总成本\n\n### 📱 响应式设计\n- **移动端优化**：卡片式布局，完美适配手机屏幕\n- **桌面端表格**：详细的表格视图，展示完整数据\n- **自适应界面**：根据屏幕尺寸自动调整布局\n- **现代化UI**：使用 Shadcn/ui 组件库，界面美观统一\n\n### 🔧 技术特性\n- **错误边界**：完善的错误处理和恢复机制\n- **水合优化**：防止 SSR/CSR 不匹配问题\n- **请求管理**：AbortController 取消无效请求\n- **性能优化**：智能缓存和数据聚合\n\n## 🚀 快速开始\n\n### 环境要求\n- **Node.js** 18+ \n- **包管理器** npm/yarn/bun\n- **数据库** 配置好的 CCPET Supabase 实例\n\n### 安装步骤\n\n1. **克隆项目**\n   ```bash\n   git clone https://github.com/your-username/ccpet-leaderboard\n   cd ccpet-leaderboard\n   ```\n\n2. **安装依赖**\n   ```bash\n   npm install\n   # 或者\n   bun install\n   ```\n\n3. **配置数据库**\n   \n   在 `src/lib/supabase.ts` 中更新 Supabase 配置：\n   ```typescript\n   const supabaseUrl = 'your-supabase-url'\n   const supabaseAnonKey = 'your-supabase-anon-key'\n   ```\n\n4. **启动开发服务器**\n   ```bash\n   npm run dev\n   # 或者使用 Turbopack（更快）\n   npm run dev --turbo\n   ```\n\n5. **访问应用**\n   \n   打开浏览器访问 [http://localhost:3000](http://localhost:3000)\n\n## 🏗️ 项目架构\n\n```\nsrc/\n├── app/                    # Next.js App Router\n│   ├── page.tsx           # 主排行榜页面\n│   ├── layout.tsx         # 根布局（包含 ErrorBoundary）\n│   ├── ClientBody.tsx     # 客户端包装器（防水合问题）\n│   └── globals.css        # 全局样式\n├── components/\n│   ├── ui/                # Shadcn/ui 组件\n│   │   ├── badge.tsx      # 徽章组件\n│   │   ├── button.tsx     # 按钮组件\n│   │   ├── table.tsx      # 表格组件\n│   │   ├── tabs.tsx       # 标签页组件\n│   │   └── loading-skeleton.tsx # 加载和错误状态\n│   └── ErrorBoundary.tsx  # 错误边界组件\n├── hooks/\n│   └── useLeaderboard.ts  # 排行榜数据钩子\n└── lib/\n    ├── supabase.ts        # Supabase 客户端和类型定义\n    └── utils.tsx          # 工具函数\n```\n\n## 📊 数据库结构\n\n应用连接到 CCPET 的 Supabase 数据库，主要使用以下表：\n\n### `pet_records` 表\n- `id`: 宠物唯一标识\n- `pet_name`: 宠物名称\n- `animal_type`: 动物类型（cat, dog, rabbit 等）\n- `emoji`: 自定义表情符号\n- `birth_time`: 出生时间\n- `death_time`: 死亡时间（可为空）\n- `survival_days`: 生存天数\n\n### `token_usage` 表\n- `pet_id`: 关联的宠物ID\n- `usage_date`: 使用日期\n- `input_tokens`: 输入 token 数量\n- `output_tokens`: 输出 token 数量\n- `total_tokens`: 总 token 数量\n- `cost_usd`: 美元成本\n- `model_name`: 使用的模型名称\n\n## 🛠️ 技术栈\n\n### 前端框架\n- **[Next.js 15](https://nextjs.org/)** - React 全栈框架，使用 App Router\n- **[TypeScript](https://www.typescriptlang.org/)** - 类型安全的 JavaScript\n- **[React 18](https://react.dev/)** - 用户界面库\n\n### 样式和UI\n- **[Tailwind CSS](https://tailwindcss.com/)** - 实用优先的 CSS 框架\n- **[Shadcn/ui](https://ui.shadcn.com/)** - 现代化 React 组件库\n- **[Lucide React](https://lucide.dev/)** - 美观的图标库\n- **[Class Variance Authority](https://cva.style/)** - 组件变体管理\n\n### 后端和数据\n- **[Supabase](https://supabase.com/)** - 后端即服务，提供数据库和实时功能\n- **PostgreSQL** - 通过 Supabase 提供的关系型数据库\n\n### 开发工具\n- **[Biome](https://biomejs.dev/)** - 快速的代码格式化和检查工具\n- **[ESLint](https://eslint.org/)** - JavaScript/TypeScript 代码检查\n- **PostCSS** - CSS 后处理器\n\n## 🎯 核心功能详解\n\n### 🏆 排名系统\n- **动态排序**：支持按 token 使用量、成本、生存时间排序\n- **实时更新**：数据变化时自动重新计算排名\n- **分页支持**：处理大量宠物数据，默认显示前25名\n- **时间过滤**：支持今日、7天、30天、全时段的数据筛选\n\n### 📈 数据聚合\n- **智能聚合**：自动汇总同一宠物的多条 token 使用记录\n- **时间范围**：根据选择的时间段过滤数据\n- **性能优化**：使用 Map 数据结构提高聚合效率\n- **错误处理**：完善的数据验证和错误恢复\n\n### 🔄 状态管理\n- **请求取消**：使用 AbortController 取消无效请求\n- **加载状态**：优雅的加载动画和骨架屏\n- **错误恢复**：用户友好的错误提示和重试机制\n- **防抖优化**：避免频繁的数据请求\n\n### 🎨 用户体验\n- **响应式布局**：移动端卡片式，桌面端表格式\n- **平滑动画**：使用 Tailwind CSS 动画\n- **无障碍支持**：语义化 HTML 和键盘导航\n- **深色模式**：支持系统主题切换\n\n## 🚀 部署指南\n\n### Vercel（推荐）\n```bash\n# 安装 Vercel CLI\nnpm i -g vercel\n\n# 部署到生产环境\nvercel --prod\n```\n\n### Netlify\n```bash\n# 构建项目\nnpm run build\n\n# 部署到 Netlify\nnpx netlify-cli deploy --prod --dir=.next\n```\n\n### Surge.sh（快速部署）\n```bash\n# 使用内置脚本\nnpm run deploy:surge\n```\n\n### 静态导出\n```bash\n# 生成静态文件\nnpm run build\n\n# 静态文件位于 .next 目录\n```\n\n更多部署选项请参考 [DEPLOYMENT.md](./DEPLOYMENT.md)\n\n## 🔧 自定义配置\n\n### 修改宠物表情符号\n在 `src/lib/supabase.ts` 中的 `getAnimalEmoji` 函数：\n```typescript\nconst emojiMap: { [key: string]: string } = {\n  cat: '🐱',\n  dog: '🐶', \n  rabbit: '🐰',\n  // 添加更多映射...\n}\n```\n\n### 调整排序逻辑\n在 `src/hooks/useLeaderboard.ts` 中的 `sortLeaderboardData` 函数：\n```typescript\ncase 'custom':\n  sortedData.sort((a, b) =\u003e {\n    // 自定义排序逻辑\n  })\n  break\n```\n\n### 修改时间段\n在 `src/hooks/useLeaderboard.ts` 中的 `getDateFilter` 函数添加新的时间段选项。\n\n## 🔍 故障排除\n\n### 常见问题\n\n**1. 页面频繁刷新时出现错误**\n- 已实现 AbortController 取消机制\n- 增加了 15 秒超时时间\n- 添加了水合状态管理\n\n**2. 数据不显示**\n- 检查 Supabase 配置是否正确\n- 确认数据库中有 `pet_records` 和 `token_usage` 数据\n- 查看浏览器控制台的网络请求\n\n**3. 样式问题**\n- 确保 Tailwind CSS 正确配置\n- 检查 `globals.css` 是否正确导入\n- 验证 Shadcn/ui 组件是否正确安装\n\n### 调试模式\n开发环境下，ErrorBoundary 会显示详细的错误信息，帮助快速定位问题。\n\n## 🤝 贡献指南\n\n欢迎贡献代码！请遵循以下步骤：\n\n1. **Fork 项目**\n2. **创建功能分支** (`git checkout -b feature/amazing-feature`)\n3. **提交更改** (`git commit -m 'Add some amazing feature'`)\n4. **推送分支** (`git push origin feature/amazing-feature`)\n5. **创建 Pull Request**\n\n### 代码规范\n- 使用 TypeScript 进行类型检查\n- 遵循 Biome 的代码格式化规则\n- 编写有意义的提交信息\n- 添加必要的注释和文档\n\n## 📝 许可证\n\n本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。\n\n## 🙏 致谢\n\n- 感谢 CCPET 社区的支持和反馈\n- 感谢所有为项目做出贡献的开发者\n- 特别感谢那些让虚拟宠物保持活力的用户们！🐾\n\n---\n\n**快速开始命令：**\n```bash\nnpx ccpet  # 创建你的虚拟宠物\n```\n\n让你的宠物快乐成长，攀登排行榜！🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterryso%2Fccpet-leaderboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fterryso%2Fccpet-leaderboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterryso%2Fccpet-leaderboard/lists"}