| .. | ||
| src | ||
| .gitignore | ||
| index.html | ||
| package.json | ||
| README.md | ||
| vite.config.js | ||
交易推荐查看器
一个独立的React前端应用,用于查看实时交易推荐。
功能特点
- ✅ 实时查看交易推荐(基于当前行情数据)
- ✅ 每10秒自动刷新价格
- ✅ 支持按方向过滤(做多/做空)
- ✅ 显示详细的推荐信息(价格、止损、止盈、仓位、杠杆等)
- ✅ 显示技术指标详情
- ✅ 响应式设计,支持移动端
安装和运行
1. 安装依赖
cd recommendations-viewer
npm install
2. 配置API地址
开发环境(推荐使用代理):
- 默认使用Vite代理,无需配置
- 代理配置在
vite.config.js中,默认代理到http://asapi.deepx1.com - 如果遇到跨域问题,确保后端CORS配置包含了
http://localhost:3001
生产环境(部署后):
- 重要:必须在项目根目录创建
.env文件:
或如果使用HTTPS:VITE_API_URL=http://asapi.deepx1.comVITE_API_URL=https://asapi.deepx1.com - 构建时,Vite会将环境变量注入到代码中
- 确保后端CORS配置包含部署后的域名(如
http://r.deepx1.com或https://r.deepx1.com)
跨域问题排查:
- 开发环境:确保使用Vite代理(不要设置VITE_API_URL,或设置为空)
- 生产环境:必须设置
VITE_API_URL环境变量 - 检查后端CORS配置是否包含前端部署域名
- 查看浏览器控制台的错误信息
3. 启动开发服务器
npm run dev
应用将在 http://localhost:3001 启动
4. 构建生产版本
npm run build
构建后的文件在 dist 目录中
项目结构
recommendations-viewer/
├── src/
│ ├── components/
│ │ ├── RecommendationsViewer.jsx # 主组件
│ │ └── RecommendationsViewer.css # 样式文件
│ ├── services/
│ │ └── api.js # API服务
│ ├── main.jsx # 应用入口
│ └── index.css # 全局样式
├── index.html # HTML模板
├── package.json # 项目配置
├── vite.config.js # Vite配置
└── README.md # 说明文档
API接口
应用使用以下API接口:
GET /api/recommendations?type=realtime&direction=BUY&limit=50&min_signal_strength=5- 获取实时推荐列表
注意事项
- 这是一个只读应用,不包含任何操作功能(如标记、执行、取消等)
- 推荐数据每10秒自动刷新,确保价格信息实时更新
- 如果API服务不可用,会显示错误信息