vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

heropanel修改

Browse Source
This commit is contained in:
zzlgreat
2026-01-09 07:26:21 +08:00
parent 042dc0a62c
commit b9672bcef1
1 changed files with 112 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/views/Community/components/EventDailyStats.js
View File

@@ -17,6 +17,8 @@ import {
Tab,
TabPanels,
TabPanel,
Input,
Flex,
} from '@chakra-ui/react';
import {
FireOutlined,
@@ -24,6 +26,7 @@ import {
ThunderboltOutlined,
TrophyOutlined,
StockOutlined,
CalendarOutlined,
} from '@ant-design/icons';
import { getApiBase } from '@utils/apiConfig';
@@ -62,9 +65,8 @@ const getChgColor = (val) => {
*/
const WinRateGauge = ({ rate }) => {
const validRate = Math.min(100, Math.max(0, rate || 0));
const angle = (validRate / 100) * 180; // 0-180度
const angle = (validRate / 100) * 180;
// 根据胜率确定颜色
const getGaugeColor = (r) => {
if (r >= 70) return '#52C41A';
if (r >= 50) return '#FFD700';
@@ -74,23 +76,21 @@ const WinRateGauge = ({ rate }) => {
const gaugeColor = getGaugeColor(validRate);
return (
<Box position="relative" w="100%" h="90px" overflow="hidden">
{/* 仪表盘背景 */}
<Box position="relative" w="100%" h="80px" overflow="hidden">
<Box
position="absolute"
bottom="0"
left="50%"
transform="translateX(-50%)"
w="140px"
h="70px"
borderTopLeftRadius="70px"
borderTopRightRadius="70px"
w="120px"
h="60px"
borderTopLeftRadius="60px"
borderTopRightRadius="60px"
bg="rgba(255,255,255,0.05)"
border="3px solid rgba(255,255,255,0.1)"
borderBottom="none"
overflow="hidden"
>
{/* 填充弧 */}
<Box
position="absolute"
bottom="0"
@@ -103,13 +103,12 @@ const WinRateGauge = ({ rate }) => {
/>
</Box>
{/* 指针 */}
<Box
position="absolute"
bottom="3px"
left="50%"
w="3px"
h="50px"
w="2px"
h="42px"
bg={gaugeColor}
borderRadius="full"
transformOrigin="bottom center"
@@ -118,36 +117,33 @@ const WinRateGauge = ({ rate }) => {
transition="transform 0.5s ease-out"
/>
{/* 中心点 */}
<Box
position="absolute"
bottom="0"
left="50%"
transform="translateX(-50%)"
w="12px"
h="12px"
w="10px"
h="10px"
bg={gaugeColor}
borderRadius="full"
boxShadow={`0 0 8px ${gaugeColor}`}
/>
{/* 数值显示 */}
<VStack
position="absolute"
bottom="15px"
bottom="12px"
left="50%"
transform="translateX(-50%)"
spacing={0}
>
<Text fontSize="2xl" fontWeight="bold" color={gaugeColor} lineHeight="1">
<Text fontSize="xl" fontWeight="bold" color={gaugeColor} lineHeight="1">
{validRate.toFixed(0)}%
</Text>
<Text fontSize="xs" color="gray.500">胜率</Text>
<Text fontSize="2xs" color="gray.500">胜率</Text>
</VStack>
{/* 刻度标签 */}
<Text position="absolute" bottom="0" left="15px" fontSize="2xs" color="gray.600">0</Text>
<Text position="absolute" bottom="0" right="15px" fontSize="2xs" color="gray.600">100</Text>
<Text position="absolute" bottom="0" left="12px" fontSize="2xs" color="gray.600">0</Text>
<Text position="absolute" bottom="0" right="12px" fontSize="2xs" color="gray.600">100</Text>
</Box>
);
};
@@ -159,21 +155,21 @@ const CompactStatCard = ({ label, value, icon, color = '#FFD700', subText }) =>
<Box
bg="rgba(0,0,0,0.25)"
borderRadius="md"
p={2.5}
p={2}
border="1px solid"
borderColor="rgba(255,215,0,0.12)"
_hover={{ borderColor: 'rgba(255,215,0,0.25)' }}
transition="all 0.2s"
>
<HStack spacing={1.5} mb={1}>
<HStack spacing={1.5} mb={0.5}>
<Box color={color} fontSize="xs">
{icon}
</Box>
<Text fontSize="xs" color="gray.500" fontWeight="medium">
<Text fontSize="2xs" color="gray.500" fontWeight="medium">
{label}
</Text>
</HStack>
<Text fontSize="lg" fontWeight="bold" color={color} lineHeight="1.2">
<Text fontSize="md" fontWeight="bold" color={color} lineHeight="1.2">
{value}
</Text>
{subText && (
@@ -197,7 +193,7 @@ const TopEventItem = ({ event, rank }) => {
return (
<HStack
spacing={2}
py={1.5}
py={1}
px={2}
bg="rgba(0,0,0,0.2)"
borderRadius="md"
@@ -240,7 +236,7 @@ const TopStockItem = ({ stock, rank }) => {
return (
<HStack
spacing={2}
py={1.5}
py={1}
px={2}
bg="rgba(0,0,0,0.2)"
borderRadius="md"
@@ -257,7 +253,7 @@ const TopStockItem = ({ stock, rank }) => {
>
{rank}
</Badge>
<Text fontSize="xs" color="gray.400" w="60px">
<Text fontSize="xs" color="gray.400" w="55px">
{stock.stockCode?.split('.')[0] || '-'}
</Text>
<Text fontSize="xs" color="gray.300" flex="1" noOfLines={1}>
@@ -275,13 +271,15 @@ const EventDailyStats = () => {
const [stats, setStats] = useState(null);
const [error, setError] = useState(null);
const [activeTab, setActiveTab] = useState(0);
const [selectedDate, setSelectedDate] = useState('');
const fetchStats = useCallback(async () => {
const fetchStats = useCallback(async (dateStr = '') => {
setLoading(true);
setError(null);
try {
const apiBase = getApiBase();
const response = await fetch(`${apiBase}/api/v1/events/effectiveness-stats?days=1`);
const dateParam = dateStr ? `&date=${dateStr}` : '';
const response = await fetch(`${apiBase}/api/v1/events/effectiveness-stats?days=1${dateParam}`);
if (!response.ok) throw new Error('获取数据失败');
const data = await response.json();
if (data.success || data.code === 200) {
@@ -290,7 +288,7 @@ const EventDailyStats = () => {
throw new Error(data.message || '数据格式错误');
}
} catch (err) {
console.error('获取当日事件统计失败:', err);
console.error('获取事件统计失败:', err);
setError(err.message);
} finally {
setLoading(false);
@@ -298,10 +296,22 @@ const EventDailyStats = () => {
}, []);
useEffect(() => {
fetchStats();
const interval = setInterval(fetchStats, 5 * 60 * 1000);
return () => clearInterval(interval);
}, [fetchStats]);
fetchStats(selectedDate);
}, [fetchStats, selectedDate]);
// 自动刷新（仅当选择今天时）
useEffect(() => {
if (!selectedDate) {
const interval = setInterval(() => fetchStats(''), 5 * 60 * 1000);
return () => clearInterval(interval);
}
}, [selectedDate, fetchStats]);
const handleDateChange = (e) => {
setSelectedDate(e.target.value);
};
const isToday = !selectedDate;
if (loading) {
return (
@@ -312,7 +322,6 @@ const EventDailyStats = () => {
border="1px solid"
borderColor="rgba(255, 215, 0, 0.15)"
h="100%"
minH="380px"
>
<Center h="100%">
<Spinner size="md" color="yellow.400" thickness="3px" />
@@ -330,7 +339,6 @@ const EventDailyStats = () => {
border="1px solid"
borderColor="rgba(255, 215, 0, 0.15)"
h="100%"
minH="380px"
>
<Center h="100%">
<VStack spacing={2}>
@@ -354,6 +362,8 @@ const EventDailyStats = () => {
position="relative"
overflow="hidden"
h="100%"
display="flex"
flexDirection="column"
>
{/* 背景装饰 */}
<Box
@@ -366,23 +376,53 @@ const EventDailyStats = () => {
pointerEvents="none"
/>
{/* 标题 */}
<HStack spacing={2} mb={2}>
<Box
w="3px"
h="16px"
bg="linear-gradient(180deg, #FFD700, #FFA500)"
borderRadius="full"
/>
<Text fontSize="sm" fontWeight="bold" color="white" letterSpacing="wide">
今日统计
</Text>
<Badge colorScheme="yellow" variant="subtle" fontSize="2xs" px={1.5}>
实时
</Badge>
</HStack>
{/* 标题行 */}
<Flex justify="space-between" align="center" mb={2}>
<HStack spacing={2}>
<Box
w="3px"
h="16px"
bg="linear-gradient(180deg, #FFD700, #FFA500)"
borderRadius="full"
/>
<Text fontSize="sm" fontWeight="bold" color="white" letterSpacing="wide">
{isToday ? '今日统计' : '历史统计'}
</Text>
{isToday && (
<Badge colorScheme="yellow" variant="subtle" fontSize="2xs" px={1.5}>
实时
</Badge>
)}
</HStack>
<HStack spacing={1}>
<CalendarOutlined style={{ color: '#FFD700', fontSize: '12px' }} />
<Input
type="date"
size="xs"
value={selectedDate}
onChange={handleDateChange}
max={new Date().toISOString().split('T')[0]}
bg="rgba(0,0,0,0.3)"
border="1px solid rgba(255,215,0,0.2)"
borderRadius="md"
color="white"
fontSize="xs"
w="110px"
h="24px"
_hover={{ borderColor: 'rgba(255,215,0,0.4)' }}
_focus={{ borderColor: '#FFD700', boxShadow: 'none' }}
css={{
'&::-webkit-calendar-picker-indicator': {
filter: 'invert(1)',
cursor: 'pointer',
},
}}
/>
</HStack>
</Flex>
<VStack spacing={2} align="stretch">
{/* 内容区域 - 使用 flex: 1 填充剩余空间 */}
<VStack spacing={2} align="stretch" flex="1">
{/* 胜率仪表盘 */}
<WinRateGauge rate={summary?.positiveRate || 0} />
@@ -393,77 +433,78 @@ const EventDailyStats = () => {
value={summary?.totalEvents || 0}
icon={<FireOutlined />}
color="#FFD700"
subText="今日追踪"
subText="追踪中"
/>
<CompactStatCard
label="关联股票"
value={summary?.totalStocks || 0}
icon={<StockOutlined />}
color="#1890FF"
subText="去重统计"
subText="去重"
/>
<CompactStatCard
label="平均超额"
value={formatChg(summary?.avgChg)}
icon={<RiseOutlined />}
color={getChgColor(summary?.avgChg)}
subText="关联股票"
/>
<CompactStatCard
label="最大超额"
value={formatChg(summary?.maxChg)}
icon={<ThunderboltOutlined />}
color="#FF4D4F"
subText="单事件最佳"
/>
</Box>
{/* 分割线 */}
<Box h="1px" bg="rgba(255,215,0,0.1)" />
<Box h="1px" bg="rgba(255,215,0,0.1)" flexShrink={0} />
{/* TOP 表现 - Tab 切换 */}
<Box flex="1" overflow="hidden">
{/* TOP 表现 - Tab 切换，flex: 1 填充剩余空间 */}
<Box flex="1" display="flex" flexDirection="column" minH={0}>
<Tabs
variant="soft-rounded"
colorScheme="yellow"
size="sm"
index={activeTab}
onChange={setActiveTab}
display="flex"
flexDirection="column"
flex="1"
>
<TabList mb={2}>
<TabList mb={1} flexShrink={0}>
<Tab
fontSize="xs"
py={1}
px={3}
px={2}
_selected={{ bg: 'rgba(255,215,0,0.2)', color: '#FFD700' }}
color="gray.500"
>
<HStack spacing={1}>
<TrophyOutlined style={{ fontSize: '11px' }} />
<TrophyOutlined style={{ fontSize: '10px' }} />
<Text>事件TOP10</Text>
</HStack>
</Tab>
<Tab
fontSize="xs"
py={1}
px={3}
px={2}
_selected={{ bg: 'rgba(255,215,0,0.2)', color: '#FFD700' }}
color="gray.500"
>
<HStack spacing={1}>
<StockOutlined style={{ fontSize: '11px' }} />
<StockOutlined style={{ fontSize: '10px' }} />
<Text>股票TOP10</Text>
</HStack>
</Tab>
</TabList>
<TabPanels>
<TabPanels flex="1" minH={0}>
{/* 事件 TOP10 */}
<TabPanel p={0}>
<TabPanel p={0} h="100%">
<VStack
spacing={1}
align="stretch"
maxH="195px"
h="100%"
overflowY="auto"
pr={1}
css={{
@@ -485,11 +526,11 @@ const EventDailyStats = () => {
</TabPanel>
{/* 股票 TOP10 */}
<TabPanel p={0}>
<TabPanel p={0} h="100%">
<VStack
spacing={1}
align="stretch"
maxH="195px"
h="100%"
overflowY="auto"
pr={1}
css={{