增加推荐站
This commit is contained in:
薇薇安
parent
e00cbeb1fe
commit
37d766865b
30
recommendations-viewer/.gitignore
vendored
Normal file
30
recommendations-viewer/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
# Environment variables
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.production.local
|
||||||
|
.env.development.local
|
||||||
79
recommendations-viewer/README.md
Normal file
79
recommendations-viewer/README.md
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
# 交易推荐查看器
|
||||||
|
|
||||||
|
一个独立的React前端应用，用于查看实时交易推荐。
|
||||||
|
|
||||||
|
## 功能特点
|
||||||
|
|
||||||
|
- ✅ 实时查看交易推荐（基于当前行情数据）
|
||||||
|
- ✅ 每10秒自动刷新价格
|
||||||
|
- ✅ 支持按方向过滤（做多/做空）
|
||||||
|
- ✅ 显示详细的推荐信息（价格、止损、止盈、仓位、杠杆等）
|
||||||
|
- ✅ 显示技术指标详情
|
||||||
|
- ✅ 响应式设计，支持移动端
|
||||||
|
|
||||||
|
## 安装和运行
|
||||||
|
|
||||||
|
### 1. 安装依赖
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd recommendations-viewer
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 配置API地址（可选）
|
||||||
|
|
||||||
|
如果需要修改API地址，可以：
|
||||||
|
|
||||||
|
- 在项目根目录创建 `.env` 文件：
|
||||||
|
```
|
||||||
|
VITE_API_URL=http://your-api-url.com
|
||||||
|
```
|
||||||
|
|
||||||
|
- 或者修改 `vite.config.js` 中的代理配置
|
||||||
|
|
||||||
|
### 3. 启动开发服务器
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
应用将在 `http://localhost:3001` 启动
|
||||||
|
|
||||||
|
### 4. 构建生产版本
|
||||||
|
|
||||||
|
```bash
|
||||||
|
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服务不可用，会显示错误信息
|
||||||
12
recommendations-viewer/index.html
Normal file
12
recommendations-viewer/index.html
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />
|
||||||
|
<title>交易推荐查看</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
18
recommendations-viewer/package.json
Normal file
18
recommendations-viewer/package.json
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"name": "recommendations-viewer",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-react": "^4.2.0",
|
||||||
|
"vite": "^5.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
412
recommendations-viewer/src/components/RecommendationsViewer.css
Normal file
412
recommendations-viewer/src/components/RecommendationsViewer.css
Normal file
|
|
@ -0,0 +1,412 @@
|
||||||
|
.recommendations-viewer {
|
||||||
|
padding: 20px;
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer-header h1 {
|
||||||
|
margin: 0;
|
||||||
|
color: #333;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.update-info {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-refresh {
|
||||||
|
padding: 8px 16px;
|
||||||
|
background-color: #2196F3;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-refresh:hover:not(:disabled) {
|
||||||
|
background-color: #0b7dda;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-refresh:disabled {
|
||||||
|
background-color: #cccccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 15px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-select {
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
background-color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
padding: 12px;
|
||||||
|
background-color: #ffebee;
|
||||||
|
color: #c62828;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
|
color: #666;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
text-align: center;
|
||||||
|
padding: 60px 20px;
|
||||||
|
color: #666;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state p {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recommendations-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recommendation-card {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: box-shadow 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recommendation-card:hover {
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.symbol {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.direction {
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.direction.buy {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.direction.sell {
|
||||||
|
background-color: #f44336;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-meta {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signal-strength {
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signal-strong {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signal-medium {
|
||||||
|
background-color: #FF9800;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signal-weak {
|
||||||
|
background-color: #9E9E9E;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-info {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-item label {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-item .positive {
|
||||||
|
color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-item .negative {
|
||||||
|
color: #f44336;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-updated-badge {
|
||||||
|
margin-left: 5px;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recommendation-reason {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recommendation-reason strong {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recommendation-reason p {
|
||||||
|
margin: 0;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.suggested-params {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||||
|
gap: 15px;
|
||||||
|
padding: 15px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.param-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.param-item label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.param-item span {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.param-item.order-type {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-type-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-type-badge.limit {
|
||||||
|
background-color: #2196F3;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-type-badge.market {
|
||||||
|
background-color: #FF9800;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.param-item.limit-price {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.limit-price-value {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-diff {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #666;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-toggle-details {
|
||||||
|
padding: 8px 16px;
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-toggle-details:hover {
|
||||||
|
background-color: #d0d0d0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details-panel {
|
||||||
|
margin-top: 15px;
|
||||||
|
padding: 15px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details-section {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details-section:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details-section h4 {
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
color: #333;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicators-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 8px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-item label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-item span {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.recommendations-viewer {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer-header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-info {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-meta {
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.suggested-params {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.param-item.order-type,
|
||||||
|
.param-item.limit-price {
|
||||||
|
grid-column: span 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
349
recommendations-viewer/src/components/RecommendationsViewer.jsx
Normal file
349
recommendations-viewer/src/components/RecommendationsViewer.jsx
Normal file
|
|
@ -0,0 +1,349 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { api } from '../services/api';
|
||||||
|
import './RecommendationsViewer.css';
|
||||||
|
|
||||||
|
function RecommendationsViewer() {
|
||||||
|
const [recommendations, setRecommendations] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
const [directionFilter, setDirectionFilter] = useState('');
|
||||||
|
const [showDetails, setShowDetails] = useState({});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadRecommendations();
|
||||||
|
|
||||||
|
// 每10秒静默更新价格（不触发loading状态）
|
||||||
|
const interval = setInterval(async () => {
|
||||||
|
try {
|
||||||
|
const result = await api.getRecommendations({
|
||||||
|
type: 'realtime',
|
||||||
|
direction: directionFilter,
|
||||||
|
limit: 50,
|
||||||
|
min_signal_strength: 5
|
||||||
|
});
|
||||||
|
const newData = result.data || [];
|
||||||
|
|
||||||
|
// 使用setState直接更新，不触发loading状态
|
||||||
|
setRecommendations(prevRecommendations => {
|
||||||
|
if (newData.length === 0) {
|
||||||
|
return prevRecommendations;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 实时推荐没有id，使用symbol作为key
|
||||||
|
const newDataMap = new Map(newData.map(rec => [rec.symbol, rec]));
|
||||||
|
const prevMap = new Map(prevRecommendations.map(rec => [rec.symbol || rec.id, rec]));
|
||||||
|
|
||||||
|
// 合并数据：优先使用新数据（包含实时价格更新）
|
||||||
|
const updated = prevRecommendations.map(prevRec => {
|
||||||
|
const key = prevRec.symbol || prevRec.id;
|
||||||
|
const newRec = newDataMap.get(key);
|
||||||
|
if (newRec) {
|
||||||
|
return newRec;
|
||||||
|
}
|
||||||
|
return prevRec;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加新出现的推荐
|
||||||
|
const newItems = newData.filter(newRec => !prevMap.has(newRec.symbol));
|
||||||
|
|
||||||
|
// 合并并去重（按symbol）
|
||||||
|
const merged = [...updated, ...newItems];
|
||||||
|
const uniqueMap = new Map();
|
||||||
|
merged.forEach(rec => {
|
||||||
|
const key = rec.symbol || rec.id;
|
||||||
|
if (!uniqueMap.has(key)) {
|
||||||
|
uniqueMap.set(key, rec);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return Array.from(uniqueMap.values());
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
// 静默失败，不显示错误
|
||||||
|
console.debug('静默更新价格失败:', err);
|
||||||
|
}
|
||||||
|
}, 10000); // 每10秒刷新
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearInterval(interval);
|
||||||
|
};
|
||||||
|
}, [directionFilter]);
|
||||||
|
|
||||||
|
const loadRecommendations = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
type: 'realtime',
|
||||||
|
limit: 50,
|
||||||
|
min_signal_strength: 5
|
||||||
|
};
|
||||||
|
|
||||||
|
if (directionFilter) {
|
||||||
|
params.direction = directionFilter;
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await api.getRecommendations(params);
|
||||||
|
const data = result.data || [];
|
||||||
|
|
||||||
|
setRecommendations(data);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.message);
|
||||||
|
console.error('加载推荐失败:', err);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleDetails = (key) => {
|
||||||
|
setShowDetails(prev => ({
|
||||||
|
...prev,
|
||||||
|
[key]: !prev[key]
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatTime = (timeStr) => {
|
||||||
|
if (!timeStr) return '-';
|
||||||
|
try {
|
||||||
|
const date = new Date(timeStr);
|
||||||
|
return date.toLocaleString('zh-CN', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: '2-digit',
|
||||||
|
day: '2-digit',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
second: '2-digit',
|
||||||
|
timeZone: 'Asia/Shanghai'
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
return timeStr;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSignalStrengthColor = (strength) => {
|
||||||
|
if (strength >= 8) return 'signal-strong';
|
||||||
|
if (strength >= 6) return 'signal-medium';
|
||||||
|
return 'signal-weak';
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="recommendations-viewer">
|
||||||
|
<div className="viewer-header">
|
||||||
|
<h1>交易推荐</h1>
|
||||||
|
<div className="header-info">
|
||||||
|
<span className="update-info">每10秒自动更新</span>
|
||||||
|
<button
|
||||||
|
className="btn-refresh"
|
||||||
|
onClick={loadRecommendations}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{loading ? '刷新中...' : '手动刷新'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="filters">
|
||||||
|
<select
|
||||||
|
value={directionFilter}
|
||||||
|
onChange={(e) => setDirectionFilter(e.target.value)}
|
||||||
|
className="filter-select"
|
||||||
|
>
|
||||||
|
<option value="">全部方向</option>
|
||||||
|
<option value="BUY">做多</option>
|
||||||
|
<option value="SELL">做空</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="error-message">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="loading">加载中...</div>
|
||||||
|
) : recommendations.length === 0 ? (
|
||||||
|
<div className="empty-state">
|
||||||
|
<p>暂无推荐记录</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="recommendations-list">
|
||||||
|
{recommendations.map((rec) => {
|
||||||
|
const key = rec.id || rec.symbol;
|
||||||
|
return (
|
||||||
|
<div key={key} className="recommendation-card">
|
||||||
|
<div className="card-header">
|
||||||
|
<div className="card-title">
|
||||||
|
<span className="symbol">{rec.symbol}</span>
|
||||||
|
<span className={`direction ${rec.direction.toLowerCase()}`}>
|
||||||
|
{rec.direction === 'BUY' ? '做多' : '做空'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="card-meta">
|
||||||
|
<span className={`signal-strength ${getSignalStrengthColor(rec.signal_strength)}`}>
|
||||||
|
信号强度: {rec.signal_strength}/10
|
||||||
|
</span>
|
||||||
|
{rec.recommendation_time && (
|
||||||
|
<span className="time">{formatTime(rec.recommendation_time)}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="card-content">
|
||||||
|
<div className="price-info">
|
||||||
|
<div className="price-item">
|
||||||
|
<label>当前价格:</label>
|
||||||
|
<span>
|
||||||
|
{parseFloat(rec.current_price || 0).toFixed(4)} USDT
|
||||||
|
{rec.price_updated && (
|
||||||
|
<span className="price-updated-badge" title="价格已通过WebSocket实时更新">🟢</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{rec.change_percent !== undefined && rec.change_percent !== null && (
|
||||||
|
<div className="price-item">
|
||||||
|
<label>24h涨跌:</label>
|
||||||
|
<span className={rec.change_percent >= 0 ? 'positive' : 'negative'}>
|
||||||
|
{rec.change_percent >= 0 ? '+' : ''}{parseFloat(rec.change_percent).toFixed(2)}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="recommendation-reason">
|
||||||
|
<strong>推荐原因:</strong>
|
||||||
|
<p>{rec.recommendation_reason || '-'}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="suggested-params">
|
||||||
|
<div className="param-item order-type">
|
||||||
|
<label>订单类型:</label>
|
||||||
|
<span className={`order-type-badge ${(rec.order_type || 'LIMIT').toLowerCase()}`}>
|
||||||
|
{rec.order_type === 'LIMIT' ? '限价单' : '市价单'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{rec.order_type === 'LIMIT' && rec.suggested_limit_price && (
|
||||||
|
<div className="param-item limit-price">
|
||||||
|
<label>建议挂单价:</label>
|
||||||
|
<span className="limit-price-value">
|
||||||
|
{parseFloat(rec.suggested_limit_price || 0).toFixed(4)} USDT
|
||||||
|
{rec.current_price && (
|
||||||
|
<span className="price-diff">
|
||||||
|
({rec.direction === 'BUY' ? '低于' : '高于'}当前价
|
||||||
|
{Math.abs(((rec.suggested_limit_price - rec.current_price) / rec.current_price) * 100).toFixed(2)}%)
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="param-item">
|
||||||
|
<label>建议止损:</label>
|
||||||
|
<span>{parseFloat(rec.suggested_stop_loss || 0).toFixed(4)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="param-item">
|
||||||
|
<label>第一目标:</label>
|
||||||
|
<span>{parseFloat(rec.suggested_take_profit_1 || 0).toFixed(4)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="param-item">
|
||||||
|
<label>第二目标:</label>
|
||||||
|
<span>{parseFloat(rec.suggested_take_profit_2 || 0).toFixed(4)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="param-item">
|
||||||
|
<label>建议仓位:</label>
|
||||||
|
<span>{(parseFloat(rec.suggested_position_percent || 0) * 100).toFixed(2)}%</span>
|
||||||
|
</div>
|
||||||
|
<div className="param-item">
|
||||||
|
<label>建议杠杆:</label>
|
||||||
|
<span>{rec.suggested_leverage || 10}x</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="btn-toggle-details"
|
||||||
|
onClick={() => toggleDetails(key)}
|
||||||
|
>
|
||||||
|
{showDetails[key] ? '隐藏' : '显示'}详细信息
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{showDetails[key] && (
|
||||||
|
<div className="details-panel">
|
||||||
|
<div className="details-section">
|
||||||
|
<h4>技术指标</h4>
|
||||||
|
<div className="indicators-grid">
|
||||||
|
{rec.rsi && (
|
||||||
|
<div className="indicator-item">
|
||||||
|
<label>RSI:</label>
|
||||||
|
<span>{parseFloat(rec.rsi).toFixed(2)}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{rec.macd_histogram !== null && rec.macd_histogram !== undefined && (
|
||||||
|
<div className="indicator-item">
|
||||||
|
<label>MACD:</label>
|
||||||
|
<span>{parseFloat(rec.macd_histogram).toFixed(6)}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{rec.ema20 && (
|
||||||
|
<div className="indicator-item">
|
||||||
|
<label>EMA20:</label>
|
||||||
|
<span>{parseFloat(rec.ema20).toFixed(4)}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{rec.ema50 && (
|
||||||
|
<div className="indicator-item">
|
||||||
|
<label>EMA50:</label>
|
||||||
|
<span>{parseFloat(rec.ema50).toFixed(4)}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{rec.atr && (
|
||||||
|
<div className="indicator-item">
|
||||||
|
<label>ATR:</label>
|
||||||
|
<span>{parseFloat(rec.atr).toFixed(4)}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{rec.market_regime && (
|
||||||
|
<div className="details-section">
|
||||||
|
<h4>市场状态</h4>
|
||||||
|
<p>{rec.market_regime === 'trending' ? '趋势市场' : '震荡市场'}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{rec.trend_4h && (
|
||||||
|
<div className="details-section">
|
||||||
|
<h4>4H趋势</h4>
|
||||||
|
<p>
|
||||||
|
{rec.trend_4h === 'up' ? '上涨' :
|
||||||
|
rec.trend_4h === 'down' ? '下跌' : '中性'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{rec.volume_24h && (
|
||||||
|
<div className="details-section">
|
||||||
|
<h4>24小时成交量</h4>
|
||||||
|
<p>{parseFloat(rec.volume_24h).toFixed(2)}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{rec.volatility && (
|
||||||
|
<div className="details-section">
|
||||||
|
<h4>波动率</h4>
|
||||||
|
<p>{parseFloat(rec.volatility).toFixed(4)}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default RecommendationsViewer;
|
||||||
24
recommendations-viewer/src/index.css
Normal file
24
recommendations-viewer/src/index.css
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||||
|
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||||
|
sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||||
|
monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
#root {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
10
recommendations-viewer/src/main.jsx
Normal file
10
recommendations-viewer/src/main.jsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom/client'
|
||||||
|
import RecommendationsViewer from './components/RecommendationsViewer'
|
||||||
|
import './index.css'
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<RecommendationsViewer />
|
||||||
|
</React.StrictMode>,
|
||||||
|
)
|
||||||
26
recommendations-viewer/src/services/api.js
Normal file
26
recommendations-viewer/src/services/api.js
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
// API服务 - 只包含推荐查询功能
|
||||||
|
const API_BASE_URL = import.meta.env.VITE_API_URL || (import.meta.env.DEV ? '' : 'http://localhost:8000');
|
||||||
|
|
||||||
|
const buildUrl = (path) => {
|
||||||
|
const baseUrl = API_BASE_URL.endsWith('/') ? API_BASE_URL.slice(0, -1) : API_BASE_URL;
|
||||||
|
const cleanPath = path.startsWith('/') ? path : `/${path}`;
|
||||||
|
return baseUrl ? `${baseUrl}${cleanPath}` : cleanPath;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const api = {
|
||||||
|
// 获取实时推荐
|
||||||
|
getRecommendations: async (params = {}) => {
|
||||||
|
// 默认使用实时推荐
|
||||||
|
if (!params.type) {
|
||||||
|
params.type = 'realtime';
|
||||||
|
}
|
||||||
|
const query = new URLSearchParams(params).toString();
|
||||||
|
const url = query ? `${buildUrl('/api/recommendations')}?${query}` : buildUrl('/api/recommendations');
|
||||||
|
const response = await fetch(url);
|
||||||
|
if (!response.ok) {
|
||||||
|
const error = await response.json().catch(() => ({ detail: '获取推荐失败' }));
|
||||||
|
throw new Error(error.detail || '获取推荐失败');
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
};
|
||||||
15
recommendations-viewer/vite.config.js
Normal file
15
recommendations-viewer/vite.config.js
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
server: {
|
||||||
|
port: 3001,
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://asapi.deepx1.com',
|
||||||
|
changeOrigin: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user