diff --git a/src/views/Community/components/EventDailyStats.js b/src/views/Community/components/EventDailyStats.js index d59b5069..ee0bf845 100644 --- a/src/views/Community/components/EventDailyStats.js +++ b/src/views/Community/components/EventDailyStats.js @@ -64,121 +64,113 @@ const getChgColor = (val) => { * 获取胜率颜色(>50%红色,<50%绿色) */ const getRateColor = (rate) => { - if (rate >= 50) return '#FF4D4F'; // 红色(上涨多) - return '#52C41A'; // 绿色(下跌多) + if (rate >= 50) return '#F31260'; // HeroUI 红色 + return '#17C964'; // HeroUI 绿色 }; /** - * 半圆仪表盘组件 - 使用 SVG 实现渐变弧线 - * 渐变色:左侧绿色 -> 中间黄色 -> 右侧红色 + * HeroUI 风格圆环仪表盘 */ -const SemiCircleGauge = ({ rate, label, size = 'normal' }) => { +const CircularGauge = ({ rate, label, icon }) => { const validRate = Math.min(100, Math.max(0, rate || 0)); - // 角度:0% = -90deg (左), 50% = 0deg (上), 100% = 90deg (右) - const needleAngle = (validRate / 100) * 180 - 90; - const gaugeColor = getRateColor(validRate); - const isSmall = size === 'small'; - const svgSize = isSmall ? 80 : 100; - const strokeWidth = isSmall ? 6 : 8; - const radius = (svgSize - strokeWidth) / 2; - const needleLength = isSmall ? 28 : 35; - const gradientId = `gauge-gradient-${label.replace(/\s/g, '-')}`; - - // 计算半圆弧的路径(从左到右) - const arcPath = `M ${strokeWidth / 2} ${svgSize / 2} A ${radius} ${radius} 0 0 1 ${svgSize - strokeWidth / 2} ${svgSize / 2}`; + const circumference = 2 * Math.PI * 42; // 半径42 + const strokeDashoffset = circumference - (validRate / 100) * circumference; return ( - - {/* SVG 半圆弧 */} - - - - - - - - - - + + {/* 圆环仪表盘 */} +
+ + + {/* 背景圆环 */} + + {/* 渐变定义 */} + + + + + + + {/* 进度圆环 */} + + + {/* 中心数值 */} + + + {validRate.toFixed(1)} + + % + + +
- {/* 指针 */} - - - {/* 指针中心点 */} - - - {/* 刻度标记 */} - - 0 - - - 100 - - - {/* 数值和标签 */} - - - {validRate.toFixed(1)}% + {/* 标签 */} + + {icon} + + {label} - {label} - + ); }; /** - * 胜率对比组件 - 双仪表盘 + * HeroUI 风格胜率对比面板 */ const WinRateGauge = ({ eventRate, marketRate, marketStats }) => { const eventRateVal = eventRate || 0; @@ -186,60 +178,122 @@ const WinRateGauge = ({ eventRate, marketRate, marketStats }) => { return ( - {/* 双仪表盘对比 */} - - - - - - - - + {/* 双仪表盘对比 - HeroUI 毛玻璃卡片 */} + + } + /> + } + /> - {/* 市场统计 */} - {marketStats && ( - - - - {marketStats.risingCount}涨 + {/* 市场统计 - 毛玻璃条 */} + {marketStats && marketStats.totalCount > 0 && ( + + + 沪深两市实时 + {marketStats.totalCount} 只 - - - {marketStats.flatCount}平 + {/* 进度条 */} + + + + + {/* 数字统计 */} + + + + {marketStats.risingCount} + + + + + {marketStats.flatCount} + + + + + {marketStats.fallingCount} + + - - - {marketStats.fallingCount}跌 - - + )} ); }; /** - * 紧凑数据卡片 + * HeroUI 风格紧凑数据卡片 */ -const CompactStatCard = ({ label, value, icon, color = '#FFD700', subText }) => ( +const CompactStatCard = ({ label, value, icon, color = '#7C3AED', subText }) => ( - - + + {icon} - + {label} - + {value} {subText && ( @@ -424,90 +478,137 @@ const EventDailyStats = () => { return ( - {/* 背景装饰 */} + {/* 背景光效 */} + {/* 标题行 */} - - + + - + {isToday ? '今日统计' : '历史统计'} {isToday && ( - - 实时 - - )} - - - {/* 今天按钮 - 仅在查看历史时显示 */} - {!isToday && ( setSelectedDate('')} + bg="rgba(23, 201, 100, 0.15)" + border="1px solid rgba(23, 201, 100, 0.3)" + borderRadius="full" > - 今天 + + + 实时 + )} - - + + + {/* 今天按钮 - 仅在查看历史时显示 */} + {!isToday && ( + setSelectedDate('')} + > + 返回今天 + + )} + + + + {/* 内容区域 - 使用 flex: 1 填充剩余空间 */} - + {/* 胜率对比仪表盘 */} { }; /** - * 右侧 Tab 面板 - 连板情绪监测 / 综合日历 + * 右侧 Tab 面板 - HeroUI 风格毛玻璃 */ const RightPanelTabs = () => { - const [activeTab, setActiveTab] = useState('comet'); + // 默认显示日历 + const [activeTab, setActiveTab] = useState('calendar'); return ( + {/* 背景光效 */} + + {/* Tab 切换头 */} setActiveTab('calendar')} + > + + + 涨停与未来日历 + + + setActiveTab('comet')} > @@ -2579,32 +2615,18 @@ const RightPanelTabs = () => { 连板情绪监测 - setActiveTab('calendar')} - > - - - 事件日历 - - - {/* Tab 内容区域 */} - + {/* Tab 内容区域 - 固定高度确保一致 */} + {activeTab === 'comet' ? ( - + + + ) : ( - + + + )}