auto_trade_sys/recommendations-viewer/README.md

交易推荐查看器

一个独立的React前端应用，用于查看实时交易推荐。

功能特点

• ✅ 实时查看交易推荐（基于当前行情数据）
• ✅ 每10秒自动刷新价格
• ✅ 支持按方向过滤（做多/做空）
• ✅ 显示详细的推荐信息（价格、止损、止盈、仓位、杠杆等）
• ✅ 显示技术指标详情
• ✅ 响应式设计，支持移动端

安装和运行

1. 安装依赖

cd recommendations-viewer
npm install

2. 配置API地址

开发环境（推荐使用代理）：

• 默认使用Vite代理，无需配置
• 代理配置在 vite.config.js 中，默认代理到 http://asapi.deepx1.com
• 如果遇到跨域问题，确保后端CORS配置包含了 http://localhost:3001

生产环境（部署后）：

• 重要：必须在项目根目录创建 .env 文件：

  VITE_API_URL=http://asapi.deepx1.com
  

  或如果使用HTTPS：

  VITE_API_URL=https://asapi.deepx1.com
  

• 构建时，Vite会将环境变量注入到代码中
• 确保后端CORS配置包含部署后的域名（如 http://r.deepx1.com 或 https://r.deepx1.com）

跨域问题排查：

1. 开发环境：确保使用Vite代理（不要设置VITE_API_URL，或设置为空）
2. 生产环境：必须设置 VITE_API_URL 环境变量
3. 检查后端CORS配置是否包含前端部署域名
4. 查看浏览器控制台的错误信息

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服务不可用，会显示错误信息