569 lines
21 KiB
JavaScript
569 lines
21 KiB
JavaScript
import React, { useState, useEffect } from 'react'
|
||
import { api } from '../services/api'
|
||
import './Recommendations.css'
|
||
|
||
function Recommendations() {
|
||
const [recommendations, setRecommendations] = useState([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [error, setError] = useState(null)
|
||
const [typeFilter, setTypeFilter] = useState('realtime') // 'realtime' 或 'bookmarked'
|
||
const [statusFilter, setStatusFilter] = useState('')
|
||
const [directionFilter, setDirectionFilter] = useState('')
|
||
const [generating, setGenerating] = useState(false)
|
||
const [showDetails, setShowDetails] = useState({})
|
||
const [bookmarking, setBookmarking] = useState({}) // 记录正在标记的推荐ID
|
||
|
||
useEffect(() => {
|
||
loadRecommendations()
|
||
|
||
// 如果是查看实时推荐，每10秒静默更新价格（不触发loading状态）
|
||
let interval = null
|
||
if (typeFilter === 'realtime') {
|
||
interval = setInterval(async () => {
|
||
// 静默更新：只更新价格，不显示loading
|
||
try {
|
||
const result = await api.getRecommendations({ type: 'realtime' })
|
||
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 () => {
|
||
if (interval) {
|
||
clearInterval(interval)
|
||
}
|
||
}
|
||
}, [typeFilter, statusFilter, directionFilter])
|
||
|
||
const loadRecommendations = async () => {
|
||
try {
|
||
setLoading(true)
|
||
setError(null)
|
||
|
||
const params = { type: typeFilter }
|
||
if (typeFilter === 'bookmarked') {
|
||
// 已标记的推荐：支持状态和方向过滤
|
||
if (statusFilter) params.status = statusFilter
|
||
if (directionFilter) params.direction = directionFilter
|
||
params.limit = 50
|
||
} else {
|
||
// 实时推荐：只支持方向过滤
|
||
if (directionFilter) params.direction = directionFilter
|
||
params.limit = 50
|
||
params.min_signal_strength = 5
|
||
}
|
||
|
||
const result = await api.getRecommendations(params)
|
||
const data = result.data || []
|
||
|
||
setRecommendations(data)
|
||
} catch (err) {
|
||
setError(err.message)
|
||
console.error('加载推荐失败:', err)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const handleBookmark = async (rec) => {
|
||
try {
|
||
setBookmarking(prev => ({ ...prev, [rec.symbol || rec.id]: true }))
|
||
|
||
await api.bookmarkRecommendation(rec)
|
||
|
||
// 标记成功后，可以显示提示或更新状态
|
||
alert('推荐已标记到数据库，可用于复盘')
|
||
|
||
// 如果当前查看的是已标记推荐，重新加载
|
||
if (typeFilter === 'bookmarked') {
|
||
loadRecommendations()
|
||
}
|
||
} catch (err) {
|
||
alert('标记失败: ' + err.message)
|
||
console.error('标记推荐失败:', err)
|
||
} finally {
|
||
setBookmarking(prev => {
|
||
const newState = { ...prev }
|
||
delete newState[rec.symbol || rec.id]
|
||
return newState
|
||
})
|
||
}
|
||
}
|
||
|
||
const handleGenerate = async () => {
|
||
try {
|
||
setGenerating(true)
|
||
setError(null)
|
||
await api.generateRecommendations(5, 20)
|
||
await loadRecommendations()
|
||
alert('推荐生成成功！')
|
||
} catch (err) {
|
||
setError(err.message)
|
||
alert(`生成推荐失败: ${err.message}`)
|
||
} finally {
|
||
setGenerating(false)
|
||
}
|
||
}
|
||
|
||
const handleMarkExecuted = async (id) => {
|
||
if (!window.confirm('确认标记为已执行？')) return
|
||
|
||
try {
|
||
await api.markRecommendationExecuted(id)
|
||
await loadRecommendations()
|
||
alert('已标记为执行')
|
||
} catch (err) {
|
||
alert(`标记失败: ${err.message}`)
|
||
}
|
||
}
|
||
|
||
const handleCancel = async (id) => {
|
||
const notes = window.prompt('请输入取消原因（可选）:')
|
||
if (notes === null) return
|
||
|
||
try {
|
||
await api.cancelRecommendation(id, notes || null)
|
||
await loadRecommendations()
|
||
alert('推荐已取消')
|
||
} catch (err) {
|
||
alert(`取消失败: ${err.message}`)
|
||
}
|
||
}
|
||
|
||
const toggleDetails = (id) => {
|
||
setShowDetails(prev => ({
|
||
...prev,
|
||
[id]: !prev[id]
|
||
}))
|
||
}
|
||
|
||
const formatTime = (timeStr) => {
|
||
if (!timeStr) return '-'
|
||
try {
|
||
// 处理时区问题：如果时间字符串包含时区信息，直接解析
|
||
// 否则假设是UTC时间，转换为本地时间
|
||
const date = new Date(timeStr)
|
||
|
||
// 检查日期是否有效
|
||
if (isNaN(date.getTime())) {
|
||
return timeStr
|
||
}
|
||
|
||
// 使用本地时区格式化（显示北京时间，如果服务器返回的是UTC时间）
|
||
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 getStatusBadge = (status) => {
|
||
const statusMap = {
|
||
active: { text: '有效', class: 'status-active' },
|
||
executed: { text: '已执行', class: 'status-executed' },
|
||
expired: { text: '已过期', class: 'status-expired' },
|
||
cancelled: { text: '已取消', class: 'status-cancelled' }
|
||
}
|
||
const statusInfo = statusMap[status] || { text: status, class: 'status-unknown' }
|
||
return <span className={`status-badge ${statusInfo.class}`}>{statusInfo.text}</span>
|
||
}
|
||
|
||
const getSignalStrengthColor = (strength) => {
|
||
if (strength >= 8) return 'signal-strong'
|
||
if (strength >= 6) return 'signal-medium'
|
||
return 'signal-weak'
|
||
}
|
||
|
||
return (
|
||
<div className="recommendations-container">
|
||
<div className="recommendations-header">
|
||
<h2>交易推荐</h2>
|
||
<div className="header-actions">
|
||
<button
|
||
className="btn-generate"
|
||
onClick={handleGenerate}
|
||
disabled={generating}
|
||
>
|
||
{generating ? '生成中...' : '生成推荐'}
|
||
</button>
|
||
<button
|
||
className="btn-refresh"
|
||
onClick={loadRecommendations}
|
||
disabled={loading}
|
||
>
|
||
刷新
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="filters">
|
||
<select
|
||
value={typeFilter}
|
||
onChange={(e) => {
|
||
setTypeFilter(e.target.value)
|
||
setStatusFilter('') // 切换类型时重置状态过滤
|
||
}}
|
||
className="filter-select"
|
||
>
|
||
<option value="realtime">实时推荐</option>
|
||
<option value="bookmarked">已标记推荐</option>
|
||
</select>
|
||
|
||
{typeFilter === 'bookmarked' && (
|
||
<select
|
||
value={statusFilter}
|
||
onChange={(e) => setStatusFilter(e.target.value)}
|
||
className="filter-select"
|
||
>
|
||
<option value="">全部状态</option>
|
||
<option value="active">有效</option>
|
||
<option value="executed">已执行</option>
|
||
<option value="expired">已过期</option>
|
||
<option value="cancelled">已取消</option>
|
||
</select>
|
||
)}
|
||
|
||
<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>
|
||
<button className="btn-generate" onClick={handleGenerate}>
|
||
生成推荐
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div className="recommendations-list">
|
||
{recommendations.map((rec) => (
|
||
<div key={rec.id || rec.symbol} 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>
|
||
{getStatusBadge(rec.status)}
|
||
</div>
|
||
<div className="card-meta">
|
||
<span className={`signal-strength ${getSignalStrengthColor(rec.signal_strength)}`}>
|
||
信号强度: {rec.signal_strength}/10
|
||
</span>
|
||
<span className="time">{formatTime(rec.recommendation_time)}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="card-content">
|
||
{/* 推荐分类和风险等级标签 */}
|
||
{(rec.recommendation_category || rec.risk_level) && (
|
||
<div className="recommendation-tags">
|
||
{rec.recommendation_category && (
|
||
<span className={`category-tag category-${rec.recommendation_category?.replace(/[（\(\)）]/g, '').replace(/\s+/g, '-').toLowerCase() || 'default'}`}>
|
||
{rec.recommendation_category}
|
||
</span>
|
||
)}
|
||
{rec.risk_level && (
|
||
<span className={`risk-tag risk-${rec.risk_level?.replace(/\s+/g, '-').toLowerCase() || 'medium'}`}>
|
||
风险: {rec.risk_level}
|
||
</span>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
<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>
|
||
|
||
{/* 用户指南（人话版计划） */}
|
||
{rec.user_guide && (
|
||
<div className="user-guide">
|
||
<strong>📋 操作计划:</strong>
|
||
<pre className="user-guide-content">{rec.user_guide}</pre>
|
||
</div>
|
||
)}
|
||
|
||
{/* 交易教程（如果存在） */}
|
||
{rec.trading_tutorial && (
|
||
<div className="trading-tutorial">
|
||
<strong>💡 交易提示:</strong>
|
||
<p>{rec.trading_tutorial}</p>
|
||
</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 limit">
|
||
限价单
|
||
</span>
|
||
</div>
|
||
{rec.suggested_limit_price && (
|
||
<div className="param-item limit-price highlight">
|
||
<label>建议挂单价:</label>
|
||
<span className="limit-price-value highlight-price">
|
||
{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>
|
||
|
||
<div className="card-actions">
|
||
{typeFilter === 'realtime' && (
|
||
<button
|
||
className="btn-bookmark"
|
||
onClick={() => handleBookmark(rec)}
|
||
disabled={bookmarking[rec.symbol || rec.id]}
|
||
title="标记到数据库用于复盘"
|
||
>
|
||
{bookmarking[rec.symbol || rec.id] ? '标记中...' : '📌 标记'}
|
||
</button>
|
||
)}
|
||
<button
|
||
className="btn-toggle-details"
|
||
onClick={() => toggleDetails(rec.id || rec.symbol)}
|
||
>
|
||
{showDetails[rec.id || rec.symbol] ? '隐藏' : '显示'}详细信息
|
||
</button>
|
||
</div>
|
||
|
||
{/* 预期持仓时间（如果存在） */}
|
||
{rec.expected_hold_time && (
|
||
<div className="expected-hold-time">
|
||
<strong>⏱️ 预期持仓时间:</strong>
|
||
<span>{rec.expected_hold_time}</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* 最大持仓天数提醒 */}
|
||
{rec.max_hold_days && (
|
||
<div className="max-hold-warning">
|
||
<strong>⚠️ 退出提醒:</strong>
|
||
<span>若持仓超过{rec.max_hold_days}天仍未触及第一目标，建议平仓离场重新评估</span>
|
||
</div>
|
||
)}
|
||
|
||
{showDetails[rec.id || rec.symbol] && (
|
||
<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.ema20_4h && (
|
||
<div className="indicator-item">
|
||
<label>EMA20(4H):</label>
|
||
<span>{parseFloat(rec.ema20_4h).toFixed(4)}</span>
|
||
</div>
|
||
)}
|
||
{rec.atr && (
|
||
<div className="indicator-item">
|
||
<label>ATR:</label>
|
||
<span>{parseFloat(rec.atr).toFixed(4)}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="details-section">
|
||
<h4>市场状态</h4>
|
||
<div className="market-info">
|
||
<div className="info-item">
|
||
<label>市场状态:</label>
|
||
<span>{rec.market_regime === 'trending' ? '趋势' : rec.market_regime === 'ranging' ? '震荡' : '-'}</span>
|
||
</div>
|
||
<div className="info-item">
|
||
<label>4H趋势:</label>
|
||
<span>
|
||
{rec.trend_4h === 'up' ? '向上' : rec.trend_4h === 'down' ? '向下' : rec.trend_4h === 'neutral' ? '中性' : '-'}
|
||
</span>
|
||
</div>
|
||
{rec.volume_24h && (
|
||
<div className="info-item">
|
||
<label>24h成交量:</label>
|
||
<span>{(parseFloat(rec.volume_24h) / 1000000).toFixed(2)}M USDT</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{rec.bollinger_upper && (
|
||
<div className="details-section">
|
||
<h4>布林带</h4>
|
||
<div className="bollinger-info">
|
||
<div className="bollinger-item">
|
||
<label>上轨:</label>
|
||
<span>{parseFloat(rec.bollinger_upper).toFixed(4)}</span>
|
||
</div>
|
||
<div className="bollinger-item">
|
||
<label>中轨:</label>
|
||
<span>{parseFloat(rec.bollinger_middle).toFixed(4)}</span>
|
||
</div>
|
||
<div className="bollinger-item">
|
||
<label>下轨:</label>
|
||
<span>{parseFloat(rec.bollinger_lower).toFixed(4)}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{rec.status === 'active' && (
|
||
<div className="card-actions">
|
||
<button
|
||
className="btn-execute"
|
||
onClick={() => handleMarkExecuted(rec.id)}
|
||
>
|
||
标记已执行
|
||
</button>
|
||
<button
|
||
className="btn-cancel"
|
||
onClick={() => handleCancel(rec.id)}
|
||
>
|
||
取消推荐
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Recommendations
|