Alpha代币交易量监控平台

GitHub 仓库: https://github.com/leo-web3/binance-alpha-volume-frontend

一个基于 Next.js 和 shadcn/ui 构建的实时代币交易数据监控平台，专门用于展示 Binance Alpha 代币的交易量和市场数据。

🌟 主要功能

• 📊 实时数据展示 - 显示代币价格、24小时涨跌、交易量、市值等关键数据
• 🔍 智能搜索 - 支持按代币名称或符号快速搜索
• 📅 时间过滤 - 可选择显示全部时间/最近7天/30天/90天上市的代币
• 📈 数据排序 - 支持按价格、涨跌幅、交易量、市值等多维度排序
• 🔄 实时刷新 - 一键刷新获取最新市场数据
• 📱 响应式设计 - 适配桌面端和移动端设备

🛠 技术栈

• 前端框架: Next.js 15.5.2 (Pages Router)
• UI 库: shadcn/ui + Radix UI
• 样式: Tailwind CSS 4
• 语言: TypeScript 5
• 图标: Lucide React
• 数据来源: Binance Alpha API

🚀 快速开始

环境要求

• Node.js 18+
• npm 或 pnpm

安装依赖

npm install
# 或
pnpm install

启动开发服务器

npm run dev
# 或
pnpm dev

访问 http://localhost:3000 查看应用。

构建生产版本

npm run build
npm start

📊 数据来源

项目使用 Binance Alpha API 获取实时代币数据：

• 代币列表: https://www.binance.com/bapi/defi/v1/public/wallet-direct/buw/wallet/cex/alpha/all/token/list

🎨 界面展示

主要功能区域

1. 标题区域 - 显示平台名称和代币总数统计
2. 工具栏 - 包含搜索框、时间过滤器和刷新按钮
3. 数据表格 - 展示代币的详细交易数据

数据字段说明

字段	说明
序号	代币排名
代币	代币图标、符号、名称
价格	当前价格 (USD)
24小时涨跌	24小时价格变化百分比
24小时交易量	24小时交易总量
市值	当前市值
流动性	流动性池总值
上市时间	代币上市日期

🔧 项目结构

├── components/           # UI 组件
│   └── ui/              # shadcn/ui 组件
├── lib/                 # 工具函数和 API
│   ├── api.ts          # API 接口定义
│   └── utils.ts        # 工具函数
├── pages/              # Next.js 页面
│   ├── _app.tsx        # 应用入口
│   ├── index.tsx       # 首页
│   └── volume.tsx      # 交易量页面
└── styles/             # 样式文件
    └── globals.css     # 全局样式

📱 响应式设计

• 桌面端: 完整表格展示，所有功能可用
• 平板端: 自适应布局，保持数据完整性
• 移动端: 优化表格显示，保证核心信息可见

🎯 核心特性

搜索功能

• 实时搜索，无需提交
• 支持代币名称和符号模糊匹配
• 搜索结果即时更新

时间过滤

• 全部时间：显示所有代币
• 最近7天：显示最近7天上市的代币
• 最近30天：显示最近30天上市的代币
• 最近90天：显示最近90天上市的代币

数据排序

• 点击表头可切换升序/降序
• 支持多维度排序：价格、涨跌幅、交易量、市值、流动性、上市时间
• 默认按交易量降序排列

🔄 数据更新

• 支持手动刷新获取最新数据
• 刷新过程有加载状态提示
• 自动处理 API 请求错误

🌐 浏览器兼容性

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📞 联系方式

如有问题或建议，请通过以下方式联系：

• 创建 GitHub Issue
• 发送邮件联系开发者

---

⭐ 如果这个项目对你有帮助，请给它一个 Star！