Lxy
/
AlphaFuturesPro
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修复卡片样式

Browse Source
master
Lxy 3 months ago
parent 578e88dbf0
commit f19d765d5f
4 changed files with 267 additions and 230 deletions
Show Stats Download Patch File Download Diff File

17
src/pages/dashboard/Dashboard.css
Unescape View File

@ -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;
}
/* 多周期趋势 */

14
src/pages/dashboard/Dashboard.jsx
Unescape View File

@ -242,12 +242,14 @@ const Dashboard = () => {
</div>
{/* 当前价格和支撑压力位 */}
<div className="future-price-new" style={{ color: getChangeColor(item.changePercent) }}>
{item.currentPrice.toFixed(2)}
</div>
<div className="future-levels-new">
<span className="level-label-new">支撑: {item.tradingAdvice?.support?.toFixed(2) || '-'}</span>
<span className="level-label-new">压力: {item.tradingAdvice?.resistance?.toFixed(2) || '-'}</span>
<div className="future-price-container-new">
<div className="future-price-new" style={{ color: getChangeColor(item.changePercent) }}>
{item.currentPrice.toFixed(2)}
</div>
<div className="future-levels-new">
<span className="level-label-new">支撑: {item.tradingAdvice?.support?.toFixed(2) || '-'}</span>
<span className="level-label-new">压力: {item.tradingAdvice?.resistance?.toFixed(2) || '-'}</span>
</div>
</div>
{/* 多周期趋势 */}

464
src/pages/detail/Detail.jsx
Unescape View File

@ -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 = () => {
@ -32,14 +33,25 @@ 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 (
<div className="loading-container">
<Spin size="large" tip="加载数据中..." />
</div>
);
}
if (!selectedFuture) {
return (
<div className="error-container">
<Alert message="未找到品种数据" type="error" />
<Button type="primary" onClick={handleBack} style={{ marginTop: 16 }}>
返回主页
</Button>
</div>
);
}
// 使用Redux数据或本地数据
const dataToDisplay = selectedFuture || localData;
// 确保即使在加载状态下也能显示内容
console.log('Rendering Detail component with state:', { loading, selectedFuture, localData, error });
return (
<div className="detail">
@ -168,208 +167,235 @@ const Detail = () => {
<Button type="default" onClick={handleBack} style={{ marginBottom: 16 }}>
返回主页
</Button>
<h2>{selectedFuture.fullName}</h2>
<h2>{dataToDisplay ? dataToDisplay.fullName : `${name}-${code}`}</h2>
</div>
{/* 基本信息 */}
<Card className="detail-card" style={{ marginBottom: 24 }}>
<Row gutter={[16, 16]}>
<Col span={8}>
<Statistic
title="当前价格"
value={selectedFuture.currentPrice}
valueStyle={{ color: '#262626' }}
/>
</Col>
<Col span={8}>
<Statistic
title="涨跌幅"
value={Math.abs(selectedFuture.changePercent)}
suffix="%"
valueStyle={{ color: getChangeColor(selectedFuture.changePercent) }}
prefix={getChangeIcon(selectedFuture.changePercent)}
/>
</Col>
<Col span={8}>
<Statistic
title="胜率"
value={selectedFuture.winRate}
suffix="%"
valueStyle={{ color: selectedFuture.winRate > 60 ? '#52c41a' : selectedFuture.winRate > 40 ? '#faad14' : '#ff4d4f' }}
/>
</Col>
<Col span={8}>
<Statistic
title="ATR"
value={selectedFuture.atr}
valueStyle={{ color: '#1890ff' }}
/>
</Col>
<Col span={8}>
<Statistic
title="ADX"
value={selectedFuture.adx}
valueStyle={{ color: '#1890ff' }}
/>
</Col>
<Col span={8}>
<Statistic
title="趋势状态"
value={selectedFuture.adxStatus}
valueStyle={{ color: '#1890ff' }}
/>
</Col>
</Row>
</Card>
{/* K线图表 */}
<Card
title={
<div className="chart-title">
<LineChartOutlined /> K线图表
<Select
defaultValue="1D"
style={{ width: 120, marginLeft: 16 }}
onChange={setTimeframe}
>
<Option value="5MIN">5分钟</Option>
<Option value="30MIN">30分钟</Option>
<Option value="1H">1小时</Option>
<Option value="1D">1天</Option>
<Option value="1W">1周</Option>
</Select>
</div>
}
className="detail-card"
style={{ marginBottom: 24 }}
>
<div ref={chartRef} className="kline-chart"></div>
</Card>
{/* 多周期趋势分析 */}
<Card
title={<span><BarChartOutlined /> 多周期趋势分析</span>}
className="detail-card"
style={{ marginBottom: 24 }}
>
<Row gutter={[16, 16]}>
{Object.entries(selectedFuture.trends).map(([period, trend]) => (
<Col span={6} key={period}>
<Card className="trend-card">
<div className="trend-header">
<h4>{period}</h4>
<Tag color={getTrendColor(trend.direction)}>
{trend.direction}
</Tag>
{/* 错误信息 */}
{error && (
<Alert message="加载失败" description={error} type="error" showIcon style={{ marginBottom: 24 }} />
)}
{/* 加载状态 */}
{loading && !dataToDisplay && (
<div className="loading-container">
<Spin size="large" tip="加载数据中..." />
</div>
)}
{/* 数据内容 */}
{dataToDisplay && (
<>
{/* 基本信息 */}
<Card className="detail-card" style={{ marginBottom: 24 }}>
<Row gutter={[16, 16]}>
<Col span={8}>
<Statistic
title="当前价格"
value={dataToDisplay.currentPrice}
valueStyle={{ color: '#262626' }}
/>
</Col>
<Col span={8}>
<Statistic
title="涨跌幅"
value={Math.abs(dataToDisplay.changePercent)}
suffix="%"
valueStyle={{ color: getChangeColor(dataToDisplay.changePercent) }}
prefix={getChangeIcon(dataToDisplay.changePercent)}
/>
</Col>
<Col span={8}>
<Statistic
title="胜率"
value={dataToDisplay.winRate}
suffix="%"
valueStyle={{ color: dataToDisplay.winRate > 60 ? '#52c41a' : dataToDisplay.winRate > 40 ? '#faad14' : '#ff4d4f' }}
/>
</Col>
<Col span={8}>
<Statistic
title="ATR"
value={dataToDisplay.atr}
valueStyle={{ color: '#1890ff' }}
/>
</Col>
<Col span={8}>
<Statistic
title="ADX"
value={dataToDisplay.adx}
valueStyle={{ color: '#1890ff' }}
/>
</Col>
<Col span={8}>
<Statistic
title="趋势状态"
value={dataToDisplay.adxStatus}
valueStyle={{ color: '#1890ff' }}
/>
</Col>
</Row>
</Card>
{/* K线图表 */}
<Card
title={
<div className="chart-title">
<LineChartOutlined /> K线图表
<Select
defaultValue="1D"
style={{ width: 120, marginLeft: 16 }}
onChange={setTimeframe}
>
<Option value="5MIN">5分钟</Option>
<Option value="30MIN">30分钟</Option>
<Option value="1H">1小时</Option>
<Option value="1D">1天</Option>
<Option value="1W">1周</Option>
</Select>
</div>
}
className="detail-card"
style={{ marginBottom: 24 }}
>
<div ref={chartRef} className="kline-chart"></div>
</Card>
{/* 多周期趋势分析 */}
<Card
title={<span><BarChartOutlined /> 多周期趋势分析</span>}
className="detail-card"
style={{ marginBottom: 24 }}
>
<Row gutter={[16, 16]}>
{Object.entries(dataToDisplay.trends).map(([period, trend]) => (
<Col span={6} key={period}>
<Card className="trend-card">
<div className="trend-header">
<h4>{period}</h4>
<Tag color={getTrendColor(trend.direction)}>
{trend.direction}
</Tag>
</div>
<div className="trend-status">
{trend.status}
</div>
<div className="trend-rsi">
RSI: {trend.rsi}
</div>
</Card>
</Col>
))}
</Row>
</Card>
{/* 技术指标 */}
<Card
title="技术指标"
className="detail-card"
style={{ marginBottom: 24 }}
>
<Row gutter={[16, 16]}>
<Col span={6}>
<div className="indicator-item">
<div className="indicator-label">MACD</div>
<div className="indicator-value">{dataToDisplay.indicators.macd}</div>
</div>
<div className="trend-status">
{trend.status}
</Col>
<Col span={6}>
<div className="indicator-item">
<div className="indicator-label">RSI</div>
<div className="indicator-value">{dataToDisplay.indicators.rsi}</div>
</div>
<div className="trend-rsi">
RSI: {trend.rsi}
</Col>
<Col span={6}>
<div className="indicator-item">
<div className="indicator-label">布林带</div>
<div className="indicator-value">{dataToDisplay.indicators.bollinger}</div>
</div>
</Card>
</Col>
))}
</Row>
</Card>
{/* 技术指标 */}
<Card
title="技术指标"
className="detail-card"
style={{ marginBottom: 24 }}
>
<Row gutter={[16, 16]}>
<Col span={6}>
<div className="indicator-item">
<div className="indicator-label">MACD</div>
<div className="indicator-value">{selectedFuture.indicators.macd}</div>
</div>
</Col>
<Col span={6}>
<div className="indicator-item">
<div className="indicator-label">RSI</div>
<div className="indicator-value">{selectedFuture.indicators.rsi}</div>
</div>
</Col>
<Col span={6}>
<div className="indicator-item">
<div className="indicator-label">布林带</div>
<div className="indicator-value">{selectedFuture.indicators.bollinger}</div>
</div>
</Col>
<Col span={6}>
<div className="indicator-item">
<div className="indicator-label">KDJ</div>
<div className="indicator-value">{selectedFuture.indicators.kdj}</div>
</div>
</Col>
</Row>
</Card>
{/* 交易建议 */}
<Card
title={<span><CalculatorOutlined /> 交易建议</span>}
className="detail-card"
style={{ marginBottom: 24 }}
>
<Row gutter={[16, 16]}>
<Col span={8}>
<Statistic
title="入场价"
value={selectedFuture.tradingAdvice.entry}
valueStyle={{ color: '#1890ff' }}
/>
</Col>
<Col span={8}>
<Statistic
title="止损价"
value={selectedFuture.tradingAdvice.stopLoss}
valueStyle={{ color: '#ff4d4f' }}
/>
</Col>
<Col span={8}>
<Statistic
title="目标价"
value={selectedFuture.tradingAdvice.target}
valueStyle={{ color: '#52c41a' }}
</Col>
<Col span={6}>
<div className="indicator-item">
<div className="indicator-label">KDJ</div>
<div className="indicator-value">{dataToDisplay.indicators.kdj}</div>
</div>
</Col>
</Row>
</Card>
{/* 交易建议 */}
<Card
title={<span><CalculatorOutlined /> 交易建议</span>}
className="detail-card"
style={{ marginBottom: 24 }}
>
<Row gutter={[16, 16]}>
<Col span={8}>
<Statistic
title="入场价"
value={dataToDisplay.tradingAdvice.entry}
valueStyle={{ color: '#1890ff' }}
/>
</Col>
<Col span={8}>
<Statistic
title="止损价"
value={dataToDisplay.tradingAdvice.stopLoss}
valueStyle={{ color: '#ff4d4f' }}
/>
</Col>
<Col span={8}>
<Statistic
title="目标价"
value={dataToDisplay.tradingAdvice.target}
valueStyle={{ color: '#52c41a' }}
/>
</Col>
</Row>
</Card>
{/* 风险评估 */}
<Card
title={<span><AlertOutlined /> 风险评估</span>}
className="detail-card"
>
<Row gutter={[16, 16]}>
<Col span={12}>
<div className="risk-item">
<div className="risk-label">风险等级</div>
<Tag color={dataToDisplay.riskLevel === '高' ? 'red' : dataToDisplay.riskLevel === '中等' ? 'orange' : 'green'}>
{dataToDisplay.riskLevel}
</Tag>
</div>
</Col>
<Col span={12}>
<div className="risk-item">
<div className="risk-label">波动率</div>
<Tag color={dataToDisplay.volatility === '高' ? 'red' : dataToDisplay.volatility === '中等' ? 'orange' : 'green'}>
{dataToDisplay.volatility}
</Tag>
</div>
</Col>
</Row>
<Alert
message="风险提示"
description="期货交易具有高风险，请根据自身风险承受能力合理控制仓位，严格执行止损策略。"
type="warning"
showIcon
style={{ marginTop: 16 }}
/>
</Col>
</Row>
</Card>
{/* 风险评估 */}
<Card
title={<span><AlertOutlined /> 风险评估</span>}
className="detail-card"
>
<Row gutter={[16, 16]}>
<Col span={12}>
<div className="risk-item">
<div className="risk-label">风险等级</div>
<Tag color={selectedFuture.riskLevel === '高' ? 'red' : selectedFuture.riskLevel === '中等' ? 'orange' : 'green'}>
{selectedFuture.riskLevel}
</Tag>
</div>
</Col>
<Col span={12}>
<div className="risk-item">
<div className="risk-label">波动率</div>
<Tag color={selectedFuture.volatility === '高' ? 'red' : selectedFuture.volatility === '中等' ? 'orange' : 'green'}>
{selectedFuture.volatility}
</Tag>
</div>
</Col>
</Row>
<Alert
message="风险提示"
description="期货交易具有高风险，请根据自身风险承受能力合理控制仓位，严格执行止损策略。"
type="warning"
showIcon
style={{ marginTop: 16 }}
/>
</Card>
</Card>
</>
)}
{/* 无数据状态 */}
{!loading && !dataToDisplay && !error && (
<div className="error-container">
<Alert message="未找到品种数据" type="error" />
<Button type="primary" onClick={handleBack} style={{ marginTop: 16 }}>
返回主页
</Button>
</div>
)}
</div>
);
};

2
src/store/futuresSlice.js
Unescape View File

@ -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

Write Preview
Loading…
Cancel
Save