游戏排行榜数据库 v2.0

一个现代化的游戏排行榜数据展示系统，使用 FastAPI + React + Ant Design Pro 技术栈重构。

🚀 技术栈

后端

• FastAPI: 高性能 Python Web 框架
• SQLite: 轻量级数据库
• Uvicorn: ASGI 服务器

前端

• React 18: 现代化前端框架
• Ant Design: 企业级 UI 组件库
• TypeScript: 类型安全
• ECharts: 数据可视化

✨ 主要特性

• 🎨 高度可定制: 支持自定义水印、主题、数字格式等
• ⚡ 高性能: 前后端分离，API 响应快速
• 📱 响应式设计: 支持桌面端和移动端
• 🔍 强大搜索: 支持多维度综合搜索
• 📊 数据可视化: 丰富的图表和统计分析
• 💡 用户友好: 直观的界面和良好的用户体验

📁 项目结构

ranking-dashboard/
├── backend/                 # 后端服务
│   ├── main.py             # FastAPI 主应用
│   ├── requirements.txt    # Python 依赖
│   └── start.bat          # 后端启动脚本
├── frontend/               # 前端应用
│   ├── src/
│   │   ├── components/     # React 组件
│   │   ├── services/       # API 服务
│   │   ├── types.ts       # TypeScript 类型定义
│   │   └── App.tsx        # 主应用组件
│   ├── package.json       # 前端依赖
│   └── start.bat         # 前端启动脚本
└── README.md             # 项目说明

🛠️ 安装和运行

📂 数据库文件位置

重要: 你的数据库文件应该放在以下位置：

ranking-dashboard/
└── backend/
    └── data/
        └── rankings.db    # 你的游戏排行榜数据库文件

如果你的数据库文件在其他位置，请将其复制到 backend/data/rankings.db

方法一：使用启动脚本（推荐）

1. 启动后端服务

   cd backend
   start.bat

2. 启动前端服务（新开一个终端）

   cd frontend
   start.bat

方法二：手动启动

1. 后端服务

   cd backend
   pip install -r requirements.txt
   python main.py

2. 前端服务

   cd frontend
   npm install
   npm start

🌐 访问地址

• 前端界面: http://localhost:3000
• 后端 API: http://localhost:8000
• API 文档: http://localhost:8000/docs

📖 功能说明

主要页面

1. ⚔️ 战力排行榜

   • 显示玩家战力排名
   • 支持按角色、服务器筛选
   • 支持分页浏览

2. 🐾 宠物排行榜

   • 显示宠物战力排名
   • 支持按宠物种类筛选
   • 显示宠物昵称、主人信息

3. 🐎 坐骑排行榜

   • 显示坐骑战力排名
   • 支持按坐骑种类筛选
   • 显示坐骑昵称、主人信息

4. 🔍 全局搜索

   • 支持多维度搜索
   • 按名称、UID、联盟搜索
   • 实时搜索结果统计

5. 📊 统计分析

   • 各类排行榜统计信息
   • 宠物/坐骑种类分布图表
   • 数据可视化展示

6. ⚙️ 系统设置

   • 自定义显示格式
   • 个性化配置选项
   • 水印文字设置

高级特性

• 水印保护: 页面背景自动添加水印，防止盗用
• 数字格式化: 支持万/亿单位显示，易于阅读
• 智能分页: 前端分页 + 后端数据限制，性能优化
• 响应式布局: 适配各种屏幕尺寸
• 错误处理: 完善的错误提示和重试机制

🔧 配置说明

后端配置

• 数据库路径在 database_manager.py 中配置
• CORS 设置在 main.py 中可调整
• 服务器端口默认 8000

前端配置

• API 代理在 package.json 中配置
• 主题色彩在 index.tsx 中调整
• 水印样式在 public/index.html 中定义

🎯 相比原版的优势

功能	原版 Streamlit	新版 React
页面定制性	有限	完全可定制
水印支持	不支持	原生支持
性能	较慢，每次交互重新加载	快速，局部更新
移动端支持	基础支持	完美适配
用户体验	一般	现代化UI
扩展性	受限	易于扩展
部署方式	单体应用	前后端分离

🚧 后续计划

• 添加用户权限管理
• 支持数据导出功能
• 增加更多图表类型
• 支持实时数据推送
• 添加数据缓存机制
• 支持多语言界面

📝 开发注意事项

1. 数据库兼容: 完全兼容原有的 SQLite 数据库结构
2. API 设计: RESTful 风格，便于后续扩展
3. 组件复用: React 组件高度模块化，易于维护
4. 类型安全: TypeScript 提供完整的类型检查

🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目！

📄 许可证

MIT License