币安合约数据实时仪表板 V4

实时显示币安合约市场数据的仪表板应用，包括K线图表、涨幅榜单和资金费率排行。

✨ 功能特性

• 📊 实时K线图表：使用 lightweight-charts 库，完全本地渲染，无需外部网络依赖
• ⏱️ 多时间周期：支持 1m、5m、15m、1h、4h、1d 六种时间周期
• 📈 涨幅榜单：实时显示涨幅最大的合约，支持排序
• 💰 资金费率排行：显示资金费率最高的合约，支持排序
• 🎨 三列布局：图表占60%，两个榜单各占20%，布局清晰
• 🌙 深色主题：专业的深色配色方案
• 🚀 纯前端应用：无需后端服务器，可部署到任何静态托管平台

🛠️ 技术栈

• React 18 - UI 框架
• TypeScript - 类型安全
• Vite - 构建工具
• Lightweight Charts - 图表库
• Zustand - 状态管理
• Tailwind CSS - 样式框架
• Axios - HTTP 客户端

📦 安装和运行

前置要求

• Node.js 18+
• npm 或 yarn

本地开发

# 进入项目目录
cd web/binance-dashboard

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 访问 http://localhost:3000

生产构建

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

🚀 部署

本项目支持部署到多个平台：

• Zeabur（当前使用）
• Vercel
• Netlify
• GitHub Pages
• Cloudflare Pages

详细部署指南请查看 DEPLOYMENT_GUIDE.md

Zeabur 部署配置

• Root Directory: web/binance-dashboard
• Build Command: npm run build
• Output Directory: dist
• Install Command: npm install

📖 文档

• 部署指南 - 详细的部署说明
• 测试检查清单 - 完整的测试项目
• V4快速开始 - V4版本说明
• 需求文档
• 设计文档
• 任务清单

🎯 V4 版本更新

V4 版本主要改进：

1. ✅ 恢复 lightweight-charts：移除 TradingView 依赖，解决网络连接问题
2. ✅ 三列布局：图表、涨幅榜、资金费率榜 6:2:2 比例显示
3. ✅ 时间周期选择器：恢复多时间周期切换功能
4. ✅ 完全本地渲染：无需外部网络，图表稳定可靠
5. ✅ 性能优化：代码分割，优化加载速度

🔧 项目结构

web/binance-dashboard/
├── src/
│   ├── components/          # React 组件
│   │   ├── LightweightChart.tsx    # K线图表组件
│   │   ├── ChartHeader.tsx         # 图表头部
│   │   ├── MainContent.tsx         # 主内容区
│   │   ├── GainersRanking.tsx      # 涨幅榜单
│   │   └── FundingRateRanking.tsx  # 资金费率榜单
│   ├── store/               # 状态管理
│   │   └── useDashboardStore.ts
│   ├── types/               # TypeScript 类型定义
│   └── App.tsx              # 应用入口
├── public/                  # 静态资源
├── package.json
├── vite.config.ts          # Vite 配置
├── tailwind.config.js      # Tailwind 配置
└── tsconfig.json           # TypeScript 配置

📊 数据来源

所有数据来自币安公开 API：

• K线数据：https://fapi.binance.com/fapi/v1/klines
• 24小时行情：https://fapi.binance.com/fapi/v1/ticker/24hr

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

🙏 致谢

• Binance API - 数据来源
• Lightweight Charts - 图表库
• React - UI 框架
• Vite - 构建工具

---

在线演示：[你的 Zeabur 部署地址]

问题反馈：GitHub Issues