一个现代化、炫酷的加密货币实时行情展示网站，具有全屏价格显示和实时 K 线图功能。
- 实时价格更新 - 通过 WebSocket 连接获取实时加密货币价格
- 全屏价格显示 - 点击卡片可进入炫酷的全屏价格展示模式
- 简约 K 线图 - 实时显示简化版的蜡烛图表
- 多交易所支持 - 支持币安(Binance)和 OKX 两大交易所
- 多语言支持 - 中文/英文双语切换
- 深色/浅色主题 - 自动跟随系统主题或手动切换
- 响应式设计 - 完美适配桌面端和移动端
- 现代化设计 - 使用 Tailwind CSS 和 Framer Motion 打造炫酷动效
- 玻璃质感 - 毛玻璃效果的现代化界面
- 动态背景 - 浮动的渐变背景元素
- 实时动画 - 价格变化时的动态效果
- TypeScript - 完整的类型安全
- SEO 优化 - 完善的 meta 标签和结构化数据
- 性能优化 - 代码分割和懒加载
- PWA 就绪 - 可作为渐进式 Web 应用
- Bitcoin (BTC)
- Ethereum (ETH)
- Binance Coin (BNB)
- Cardano (ADA)
- Solana (SOL)
- Dogecoin (DOGE)
- Polygon (MATIC)
- Avalanche (AVAX)
- 实时显示热门加密货币价格卡片
- 价格变化动画效果
- 连接状态指示器
- 主题和语言切换
- 大字体价格显示
- 实时价格变化动画
- 简约版 K 线图
- 24小时成交量信息
- 按 ESC 键或点击关闭按钮退出
- 前端框架: React 18 + TypeScript
- 构建工具: Vite
- 样式: Tailwind CSS
- 动画: Framer Motion
- 图表: 自定义 SVG K 线图
- 图标: Lucide React
- 国际化: React i18next
- WebSocket: 原生 WebSocket API
npm installnpm run devnpm run buildnpm run preview币安 (Binance)
- WebSocket URL:
wss://stream.binance.com:9443/ws/!ticker@arr - 支持实时 ticker 和 K 线数据
OKX
- WebSocket URL:
wss://ws.okx.com:8443/ws/v5/public - 支持实时 ticker 和蜡烛图数据
项目无需额外的环境变量，直接使用公共 WebSocket 接口。
- 查看实时价格: 主页显示热门加密货币的实时价格和变化
- 切换交易所: 在头部选择币安或 OKX 数据源
- 全屏显示: 点击卡片右上角的全屏按钮进入全屏模式
- 主题切换: 点击头部的主题按钮切换深色/浅色模式
- 语言切换: 点击头部的语言按钮切换中文/英文
- 退出全屏: 按 ESC 键或点击关闭按钮
- 炫酷动效: 价格变化时的缩放和发光效果
- 实时更新: 毫秒级的价格变化响应
- 可视化图表: 简约而美观的实时 K 线图
- 沉浸式体验: 黑色背景配合动态光效
- 玻璃质感: backdrop-blur 毛玻璃效果
- 渐变背景: 动态渐变色彩
- 微交互: 悬停、点击时的细腻动效
- 响应式布局: 完美适配各种屏幕尺寸
- 虚拟化列表: 大量数据时的性能保证
- WebSocket 连接管理: 智能重连机制
- 代码分割: 按需加载减少初始包大小
- 图片优化: WebP 格式和懒加载
MIT License
欢迎提交 Issue 和 Pull Request！
CoinPrice Pro - 让加密货币行情展示更加炫酷！ 🚀