fix: 修改卡片样式

src/pages/dashboard/Dashboard.jsx

@@ -66,37 +66,96 @@ const Dashboard = () => {
     >
       <Row gutter={[16, 16]}>
         <Col span={24}>
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
-            <div style={{ fontWeight: 'bold', fontSize: '16px' }}>{item.name} ({item.code})</div>
+            <div>
-            <Badge 
+              <div style={{ fontWeight: 'bold', fontSize: '16px' }}>{item.name}-{item.code}2603</div>
-              status={item.changePercent > 0 ? 'success' : 'error'} 
+              <div style={{ fontSize: '12px', color: '#8c8c8c', marginTop: 2 }}>ATR: {item.atr} | ADX: {item.adx}</div>
-              text={`${item.changePercent > 0 ? '+' : ''}${item.changePercent}%`}
+            </div>
-            />
+            <div style={{ textAlign: 'right' }}>
+              <div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: 2 }}>胜率: {item.winRate}%</div>
+              <Badge 
+                status={item.changePercent > 0 ? 'success' : 'error'} 
+                text={`${item.changePercent > 0 ? '+' : ''}${item.changePercent}%`}
+              />
+            </div>
           </div>
         </Col>
         
+        {/* 当前价格、支撑、压力 */}
         <Col span={24}>
-          <Statistic 
+          <Row gutter={[16, 0]} align="middle">
-            title="当前价格" 
+            <Col flex="auto">
-            value={item.currentPrice} 
+              <div style={{ 
-            valueStyle={{ color: item.changePercent > 0 ? '#52c41a' : '#ff4d4f' }}
+                fontSize: '20px', 
-            suffix="元"
+                fontWeight: 'bold', 
-            size="small"
+                color: item.changePercent > 0 ? '#52c41a' : '#ff4d4f'
-          />
+              }}>
+                {item.currentPrice}
+              </div>
+            </Col>
+            <Col flex="none">
+              <div style={{ fontSize: '12px', color: '#8c8c8c', marginRight: 16 }}>
+                支撑: {item.support}
+              </div>
+            </Col>
+            <Col flex="none">
+              <div style={{ fontSize: '12px', color: '#8c8c8c' }}>
+                压力: {item.resistance}
+              </div>
+            </Col>
+          </Row>
         </Col>
         
-        <Col span={12}>
+        {/* 多周期趋势 */}
-          <div style={{ fontSize: '12px', color: '#8c8c8c' }}>胜率: {item.winRate}%</div>
+        <Col span={24}>
-        </Col>
+          <div style={{ fontSize: '12px', fontWeight: 'bold', marginBottom: 4 }}>多周期趋势:</div>
-        <Col span={12}>
+          <Row gutter={[8, 4]}>
-          <div style={{ fontSize: '12px', color: '#8c8c8c' }}>ATR: {item.atr}</div>
+            {['15MIN', '30MIN', '60MIN', '1DAY'].map(period => (
+              <Col key={period} span={6}>
+                <div style={{ 
+                  fontSize: '11px', 
+                  textAlign: 'center',
+                  padding: '6px 4px',
+                  borderRadius: '2px',
+                  backgroundColor: item.trends[period].direction === '看多' ? 'rgba(82, 196, 26, 0.1)' : 'rgba(255, 77, 79, 0.1)',
+                  color: item.trends[period].direction === '看多' ? '#52c41a' : '#ff4d4f'
+                }}>
+                  {period.replace('MIN', 'min').replace('DAY', 'day')}<br />
+                  {item.trends[period].direction}<br />
+                  <span style={{ fontSize: '10px', color: '#8c8c8c' }}>{item.trends[period].status}</span><br />
+                  <span style={{ fontSize: '10px', color: '#8c8c8c' }}>RSI: {item.trends[period].rsi}</span>
+                </div>
+              </Col>
+            ))}
+          </Row>
         </Col>
         
-        <Col span={12}>
+        {/* 整体预判 */}
-          <div style={{ fontSize: '12px', color: '#8c8c8c' }}>ADX: {item.adx}</div>
+        <Col span={24}>
+          <div style={{ fontSize: '12px', color: '#8c8c8c' }}>整体预判: 
+            <span style={{ 
+              marginLeft: '4px',
+              padding: '2px 8px',
+              borderRadius: '10px',
+              backgroundColor: item.overallView === '多头排列' ? 'rgba(82, 196, 26, 0.1)' : 
+                               item.overallView === '空头排列' ? 'rgba(255, 77, 79, 0.1)' : 
+                               'rgba(250, 173, 20, 0.1)',
+              color: item.overallView === '多头排列' ? '#52c41a' : 
+                     item.overallView === '空头排列' ? '#ff4d4f' : 
+                     '#faad14'
+            }}>
+              {item.overallView}
+            </span>
+          </div>
         </Col>
-        <Col span={12}>
+        
-          <div style={{ fontSize: '12px', color: '#8c8c8c' }}>趋势: {item.adxStatus}</div>
+        {/* AI分析 */}
+        <Col span={24}>
+          <div style={{ fontSize: '12px', fontWeight: 'bold', marginBottom: 4 }}>AI分析:</div>
+          <div style={{ fontSize: '11px', color: '#8c8c8c', lineHeight: 1.4 }}>
+            MACD: {item.aiAnalysis.macd}<br />
+            {item.aiAnalysis.rsi}
+          </div>
         </Col>
       </Row>
     </Card>

src/utils/mockData.js

@@ -56,6 +56,13 @@ export const generateFutureData = (code, name) => {
     adxStatus = '弱趋势';
   }
   
+  // 生成压力位和支撑位
+  const support = (currentPrice * (1 - 0.03)).toFixed(2);
+  const resistance = (currentPrice * (1 + 0.03)).toFixed(2);
+  
+  // 生成整体预判
+  const overallView = ['观望', '中线', '多头排列', '空头排列', '震荡'][Math.floor(Math.random() * 5)];
+  
   return {
     code,
     name,
@@ -68,8 +75,9 @@ export const generateFutureData = (code, name) => {
     winRate,
     trends: {
       '5MIN': { direction: Math.random() > 0.5 ? '看多' : '看空', status: Math.random() > 0.5 ? '多头趋势' : '空头趋势', rsi: Math.floor(Math.random() * 100) },
+      '15MIN': { direction: Math.random() > 0.5 ? '看多' : '看空', status: Math.random() > 0.5 ? '多头趋势' : '空头趋势', rsi: Math.floor(Math.random() * 100) },
       '30MIN': { direction: Math.random() > 0.5 ? '看多' : '看空', status: Math.random() > 0.5 ? '多头趋势' : '空头趋势', rsi: Math.floor(Math.random() * 100) },
-      '1HOUR': { direction: Math.random() > 0.5 ? '看多' : '看空', status: Math.random() > 0.5 ? '多头趋势' : '空头趋势', rsi: Math.floor(Math.random() * 100) },
+      '60MIN': { direction: Math.random() > 0.5 ? '看多' : '看空', status: Math.random() > 0.5 ? '多头趋势' : '空头趋势', rsi: Math.floor(Math.random() * 100) },
       '1DAY': { direction: Math.random() > 0.5 ? '看多' : '看空', status: Math.random() > 0.5 ? '多头趋势' : '空头趋势', rsi: Math.floor(Math.random() * 100) }
     },
     indicators: {
@@ -83,6 +91,15 @@ export const generateFutureData = (code, name) => {
       stopLoss: (currentPrice * (1 - 0.02)).toFixed(2),
       target: (currentPrice * (1 + 0.03)).toFixed(2)
     },
+    support,
+    resistance,
+    overallView,
+    aiAnalysis: {
+      macd: Math.random() > 0.5 ? '金叉向上' : '死叉向下',
+      rsi: `RSI: ${Math.floor(Math.random() * 100)}`,
+      bollinger: `布林带: ${['触及上轨', '触及下轨', '在轨道内'][Math.floor(Math.random() * 3)]}`,
+      kdj: Math.random() > 0.5 ? 'KDJ:金叉向上' : 'KDJ:死叉向下'
+    },
     riskLevel: ['低', '中等', '高'][Math.floor(Math.random() * 3)],
     volatility: ['低', '中等', '高'][Math.floor(Math.random() * 3)]
   };