diff --git a/src/pages/dashboard/Dashboard.css b/src/pages/dashboard/Dashboard.css index dbcf5cd..3a27923 100644 --- a/src/pages/dashboard/Dashboard.css +++ b/src/pages/dashboard/Dashboard.css @@ -167,21 +167,28 @@ } /* 当前价格和支撑压力位 */ +.future-price-container-new { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; +} + .future-price-new { font-size: 24px; font-weight: bold; - margin-bottom: 12px; } .future-levels-new { display: flex; - justify-content: space-between; - margin-bottom: 16px; - font-size: 14px; - color: #262626; + flex-direction: column; + align-items: flex-end; + font-size: 12px; + color: #8c8c8c; } .level-label-new { + margin-bottom: 4px; } /* 多周期趋势 */ diff --git a/src/pages/dashboard/Dashboard.jsx b/src/pages/dashboard/Dashboard.jsx index bdc92f3..32d643c 100644 --- a/src/pages/dashboard/Dashboard.jsx +++ b/src/pages/dashboard/Dashboard.jsx @@ -242,12 +242,14 @@ const Dashboard = () => { {/* 当前价格和支撑压力位 */} -
- {item.currentPrice.toFixed(2)} -
-
- 支撑: {item.tradingAdvice?.support?.toFixed(2) || '-'} - 压力: {item.tradingAdvice?.resistance?.toFixed(2) || '-'} +
+
+ {item.currentPrice.toFixed(2)} +
+
+ 支撑: {item.tradingAdvice?.support?.toFixed(2) || '-'} + 压力: {item.tradingAdvice?.resistance?.toFixed(2) || '-'} +
{/* 多周期趋势 */} diff --git a/src/pages/detail/Detail.jsx b/src/pages/detail/Detail.jsx index c940196..0ebce78 100644 --- a/src/pages/detail/Detail.jsx +++ b/src/pages/detail/Detail.jsx @@ -4,7 +4,7 @@ import { Card, Row, Col, Button, Select, Tag, Statistic, Alert, Spin } from 'ant import { ArrowUpOutlined, ArrowDownOutlined, LineChartOutlined, BarChartOutlined, AlertOutlined, CalculatorOutlined } from '@ant-design/icons'; import { fetchFutureDetail } from '../../store/futuresSlice'; import { useLocation, useNavigate } from 'react-router-dom'; -import { generateKlineData } from '../../utils/mockData'; +import { generateKlineData, generateFutureData } from '../../utils/mockData'; import './Detail.css'; // 导入TradingView Lightweight Charts @@ -18,8 +18,9 @@ const Detail = () => { const location = useLocation(); const chartRef = useRef(null); const chartInstance = useRef(null); - const { selectedFuture, loading } = useSelector(state => state.futures); + const { selectedFuture, loading, error } = useSelector(state => state.futures); const [timeframe, setTimeframe] = useState('1D'); + const [localData, setLocalData] = useState(null); // 解析URL参数获取品种信息 const getQueryParams = () => { @@ -31,15 +32,26 @@ const Detail = () => { }; const { code, name } = getQueryParams(); + + // 调试日志 + console.log('Detail page loaded with:', { code, name }); useEffect(() => { - // 获取品种详情数据 + // 尝试使用本地生成数据作为备选方案 + const fallbackData = generateFutureData(code, name); + setLocalData(fallbackData); + console.log('Generated fallback data:', fallbackData); + + // 同时尝试从Redux获取数据 + console.log('Dispatching fetchFutureDetail with:', { code, name }); dispatch(fetchFutureDetail({ code, name })); }, [dispatch, code, name]); useEffect(() => { // 初始化K线图表 - if (chartRef.current && selectedFuture) { + const dataToUse = selectedFuture || localData; + if (chartRef.current && dataToUse) { + console.log('Initializing chart with data:', dataToUse); if (chartInstance.current) { chartInstance.current.destroy(); } @@ -122,7 +134,7 @@ const Detail = () => { } }; } - }, [selectedFuture]); + }, [selectedFuture, localData]); const handleBack = () => { navigate('/'); @@ -142,24 +154,11 @@ const Detail = () => { return '#faad14'; }; - if (loading) { - return ( -
- -
- ); - } - - if (!selectedFuture) { - return ( -
- - -
- ); - } + // 使用Redux数据或本地数据 + const dataToDisplay = selectedFuture || localData; + + // 确保即使在加载状态下也能显示内容 + console.log('Rendering Detail component with state:', { loading, selectedFuture, localData, error }); return (
@@ -168,208 +167,235 @@ const Detail = () => { -

{selectedFuture.fullName}

+

{dataToDisplay ? dataToDisplay.fullName : `${name}-${code}`}

- {/* 基本信息 */} - - - - - - - - - - 60 ? '#52c41a' : selectedFuture.winRate > 40 ? '#faad14' : '#ff4d4f' }} - /> - - - - - - - - - - - - - - {/* K线图表 */} - - K线图表 - -
- } - className="detail-card" - style={{ marginBottom: 24 }} - > -
- - - {/* 多周期趋势分析 */} - 多周期趋势分析} - className="detail-card" - style={{ marginBottom: 24 }} - > - - {Object.entries(selectedFuture.trends).map(([period, trend]) => ( - - -
-

{period}

- - {trend.direction} - + {/* 错误信息 */} + {error && ( + + )} + + {/* 加载状态 */} + {loading && !dataToDisplay && ( +
+ +
+ )} + + {/* 数据内容 */} + {dataToDisplay && ( + <> + {/* 基本信息 */} + + + + + + + + + + 60 ? '#52c41a' : dataToDisplay.winRate > 40 ? '#faad14' : '#ff4d4f' }} + /> + + + + + + + + + + + + + + {/* K线图表 */} + + K线图表 + +
+ } + className="detail-card" + style={{ marginBottom: 24 }} + > +
+ + + {/* 多周期趋势分析 */} + 多周期趋势分析} + className="detail-card" + style={{ marginBottom: 24 }} + > + + {Object.entries(dataToDisplay.trends).map(([period, trend]) => ( + + +
+

{period}

+ + {trend.direction} + +
+
+ {trend.status} +
+
+ RSI: {trend.rsi} +
+ + + ))} + + + + {/* 技术指标 */} + + + +
+
MACD
+
{dataToDisplay.indicators.macd}
-
- {trend.status} + + +
+
RSI
+
{dataToDisplay.indicators.rsi}
-
- RSI: {trend.rsi} + + +
+
布林带
+
{dataToDisplay.indicators.bollinger}
- - - ))} - - - - {/* 技术指标 */} - - - -
-
MACD
-
{selectedFuture.indicators.macd}
-
- - -
-
RSI
-
{selectedFuture.indicators.rsi}
-
- - -
-
布林带
-
{selectedFuture.indicators.bollinger}
-
- - -
-
KDJ
-
{selectedFuture.indicators.kdj}
-
- - - - - {/* 交易建议 */} - 交易建议} - className="detail-card" - style={{ marginBottom: 24 }} - > - - - - - - - - - + +
+
KDJ
+
{dataToDisplay.indicators.kdj}
+
+ + + + + {/* 交易建议 */} + 交易建议} + className="detail-card" + style={{ marginBottom: 24 }} + > + + + + + + + + + + + + + + {/* 风险评估 */} + 风险评估} + className="detail-card" + > + + +
+
风险等级
+ + {dataToDisplay.riskLevel} + +
+ + +
+
波动率
+ + {dataToDisplay.volatility} + +
+ + + - - - - - {/* 风险评估 */} - 风险评估} - className="detail-card" - > - - -
-
风险等级
- - {selectedFuture.riskLevel} - -
- - -
-
波动率
- - {selectedFuture.volatility} - -
- - - - + + + )} + + {/* 无数据状态 */} + {!loading && !dataToDisplay && !error && ( +
+ + +
+ )}
); }; diff --git a/src/store/futuresSlice.js b/src/store/futuresSlice.js index 19aa971..63c8b69 100644 --- a/src/store/futuresSlice.js +++ b/src/store/futuresSlice.js @@ -83,10 +83,12 @@ const futuresSlice = createSlice({ .addCase(fetchFutureDetail.fulfilled, (state, action) => { state.loading = false; state.selectedFuture = action.payload; + console.log('fetchFutureDetail fulfilled with:', action.payload); }) .addCase(fetchFutureDetail.rejected, (state, action) => { state.loading = false; state.error = action.error.message; + console.log('fetchFutureDetail rejected with error:', action.error.message); }) // 处理fetchRiskAlerts