1912 lines
59 KiB
JavaScript
1912 lines
59 KiB
JavaScript
// src/views/Community/components/HeroPanel.js
|
||
// 综合日历面板：融合涨停分析 + 投资日历
|
||
// 点击日期弹出详情弹窗（TAB切换历史涨停/未来事件）
|
||
|
||
import React, { useEffect, useState, useCallback, useMemo, memo } from 'react';
|
||
import { useSelector, useDispatch } from 'react-redux';
|
||
import { loadWatchlist, toggleWatchlist } from '@store/slices/stockSlice';
|
||
import {
|
||
Box,
|
||
Card,
|
||
CardBody,
|
||
Flex,
|
||
VStack,
|
||
HStack,
|
||
Text,
|
||
Heading,
|
||
useColorModeValue,
|
||
useDisclosure,
|
||
Icon,
|
||
Spinner,
|
||
Center,
|
||
Modal,
|
||
ModalOverlay,
|
||
ModalContent,
|
||
ModalHeader,
|
||
ModalBody,
|
||
ModalCloseButton,
|
||
Tooltip,
|
||
Badge,
|
||
SimpleGrid,
|
||
IconButton,
|
||
Drawer,
|
||
DrawerOverlay,
|
||
DrawerContent,
|
||
DrawerHeader,
|
||
DrawerBody,
|
||
DrawerCloseButton,
|
||
} from '@chakra-ui/react';
|
||
import { Table, Tabs, Tag, Space, Button, Spin, Typography, message } from 'antd';
|
||
import {
|
||
CalendarOutlined,
|
||
StarFilled,
|
||
LinkOutlined,
|
||
StockOutlined,
|
||
TagsOutlined,
|
||
ClockCircleOutlined,
|
||
RobotOutlined,
|
||
FireOutlined,
|
||
LineChartOutlined,
|
||
StarOutlined,
|
||
} from '@ant-design/icons';
|
||
import { AlertCircle, Clock, Info, Calendar, ChevronLeft, ChevronRight, Flame, TrendingUp, TrendingDown, FileText, Star } from 'lucide-react';
|
||
import { GLASS_BLUR } from '@/constants/glassConfig';
|
||
import { eventService } from '@services/eventService';
|
||
import { getApiBase } from '@utils/apiConfig';
|
||
import ReactMarkdown from 'react-markdown';
|
||
import dayjs from 'dayjs';
|
||
import KLineChartModal from '@components/StockChart/KLineChartModal';
|
||
|
||
const { TabPane } = Tabs;
|
||
const { Text: AntText } = Typography;
|
||
|
||
// 定义动画和深色主题样式
|
||
const animations = `
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; transform: scale(1); }
|
||
50% { opacity: 0.6; transform: scale(1.1); }
|
||
}
|
||
@keyframes shimmer {
|
||
0% { background-position: -200% 0; }
|
||
100% { background-position: 200% 0; }
|
||
}
|
||
|
||
/* Ant Design 深色主题覆盖 - 弹窗专用 */
|
||
.hero-panel-modal .ant-tabs {
|
||
color: rgba(255, 255, 255, 0.85);
|
||
}
|
||
.hero-panel-modal .ant-tabs-nav::before {
|
||
border-color: rgba(255, 215, 0, 0.2) !important;
|
||
}
|
||
.hero-panel-modal .ant-tabs-tab {
|
||
color: rgba(255, 255, 255, 0.65) !important;
|
||
font-size: 15px !important;
|
||
}
|
||
.hero-panel-modal .ant-tabs-tab:hover {
|
||
color: #FFD700 !important;
|
||
}
|
||
.hero-panel-modal .ant-tabs-tab-active .ant-tabs-tab-btn {
|
||
color: #FFD700 !important;
|
||
}
|
||
.hero-panel-modal .ant-tabs-ink-bar {
|
||
background: linear-gradient(90deg, #FFD700, #FFA500) !important;
|
||
}
|
||
|
||
/* 表格深色主题 */
|
||
.hero-panel-modal .ant-table {
|
||
background: transparent !important;
|
||
color: rgba(255, 255, 255, 0.85) !important;
|
||
}
|
||
.hero-panel-modal .ant-table-thead > tr > th {
|
||
background: rgba(255, 215, 0, 0.1) !important;
|
||
color: #FFD700 !important;
|
||
border-bottom: 1px solid rgba(255, 215, 0, 0.2) !important;
|
||
font-weight: 600 !important;
|
||
font-size: 14px !important;
|
||
}
|
||
.hero-panel-modal .ant-table-tbody > tr > td {
|
||
background: transparent !important;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||
color: rgba(255, 255, 255, 0.85) !important;
|
||
font-size: 14px !important;
|
||
}
|
||
.hero-panel-modal .ant-table-tbody > tr:hover > td {
|
||
background: rgba(255, 215, 0, 0.08) !important;
|
||
}
|
||
.hero-panel-modal .ant-table-tbody > tr.ant-table-row:hover > td {
|
||
background: rgba(255, 215, 0, 0.1) !important;
|
||
}
|
||
.hero-panel-modal .ant-table-cell-row-hover {
|
||
background: rgba(255, 215, 0, 0.08) !important;
|
||
}
|
||
.hero-panel-modal .ant-table-placeholder {
|
||
background: transparent !important;
|
||
}
|
||
.hero-panel-modal .ant-empty-description {
|
||
color: rgba(255, 255, 255, 0.45) !important;
|
||
}
|
||
|
||
/* 滚动条样式 */
|
||
.hero-panel-modal .ant-table-body::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
.hero-panel-modal .ant-table-body::-webkit-scrollbar-track {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 3px;
|
||
}
|
||
.hero-panel-modal .ant-table-body::-webkit-scrollbar-thumb {
|
||
background: rgba(255, 215, 0, 0.3);
|
||
border-radius: 3px;
|
||
}
|
||
.hero-panel-modal .ant-table-body::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(255, 215, 0, 0.5);
|
||
}
|
||
|
||
/* Tag 样式优化 */
|
||
.hero-panel-modal .ant-tag {
|
||
border-radius: 4px !important;
|
||
}
|
||
|
||
/* Button link 样式 */
|
||
.hero-panel-modal .ant-btn-link {
|
||
color: #FFD700 !important;
|
||
}
|
||
.hero-panel-modal .ant-btn-link:hover {
|
||
color: #FFA500 !important;
|
||
}
|
||
.hero-panel-modal .ant-btn-link:disabled {
|
||
color: rgba(255, 255, 255, 0.25) !important;
|
||
}
|
||
|
||
/* Typography 样式 */
|
||
.hero-panel-modal .ant-typography {
|
||
color: rgba(255, 255, 255, 0.85) !important;
|
||
}
|
||
.hero-panel-modal .ant-typography-secondary {
|
||
color: rgba(255, 255, 255, 0.45) !important;
|
||
}
|
||
|
||
/* Spin 加载样式 */
|
||
.hero-panel-modal .ant-spin-text {
|
||
color: #FFD700 !important;
|
||
}
|
||
.hero-panel-modal .ant-spin-dot-item {
|
||
background-color: #FFD700 !important;
|
||
}
|
||
`;
|
||
|
||
// 注入样式
|
||
if (typeof document !== 'undefined') {
|
||
const styleId = 'hero-panel-animations';
|
||
if (!document.getElementById(styleId)) {
|
||
const styleSheet = document.createElement('style');
|
||
styleSheet.id = styleId;
|
||
styleSheet.innerText = animations;
|
||
document.head.appendChild(styleSheet);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 判断当前是否在交易时间内
|
||
*/
|
||
const isInTradingTime = () => {
|
||
const now = new Date();
|
||
const timeInMinutes = now.getHours() * 60 + now.getMinutes();
|
||
return timeInMinutes >= 570 && timeInMinutes <= 900;
|
||
};
|
||
|
||
// 主题色配置
|
||
const goldColors = {
|
||
primary: '#D4AF37',
|
||
light: '#F4D03F',
|
||
dark: '#B8860B',
|
||
glow: 'rgba(212, 175, 55, 0.4)',
|
||
};
|
||
|
||
const textColors = {
|
||
primary: '#ffffff',
|
||
secondary: 'rgba(255, 255, 255, 0.85)',
|
||
muted: 'rgba(255, 255, 255, 0.5)',
|
||
};
|
||
|
||
// 热度级别配置
|
||
const HEAT_LEVELS = [
|
||
{ key: 'high', threshold: 80, colors: { bg: 'rgba(147, 51, 234, 0.55)', text: '#d8b4fe', border: 'rgba(147, 51, 234, 0.65)' } },
|
||
{ key: 'medium', threshold: 60, colors: { bg: 'rgba(239, 68, 68, 0.50)', text: '#fca5a5', border: 'rgba(239, 68, 68, 0.60)' } },
|
||
{ key: 'low', threshold: 40, colors: { bg: 'rgba(251, 146, 60, 0.45)', text: '#fed7aa', border: 'rgba(251, 146, 60, 0.55)' } },
|
||
{ key: 'cold', threshold: 0, colors: { bg: 'rgba(59, 130, 246, 0.35)', text: '#93c5fd', border: 'rgba(59, 130, 246, 0.45)' } },
|
||
];
|
||
|
||
const DEFAULT_HEAT_COLORS = {
|
||
bg: 'rgba(60, 60, 70, 0.12)',
|
||
text: textColors.muted,
|
||
border: 'transparent',
|
||
};
|
||
|
||
const getHeatColor = (count) => {
|
||
if (!count) return DEFAULT_HEAT_COLORS;
|
||
const level = HEAT_LEVELS.find((l) => count >= l.threshold);
|
||
return level?.colors || DEFAULT_HEAT_COLORS;
|
||
};
|
||
|
||
// 日期格式化
|
||
const formatDateStr = (date) => {
|
||
if (!date) return '';
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
return `${year}${month}${day}`;
|
||
};
|
||
|
||
const WEEK_DAYS = ['日', '一', '二', '三', '四', '五', '六'];
|
||
const MONTH_NAMES = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
||
|
||
/**
|
||
* 趋势图标
|
||
*/
|
||
const TrendIcon = memo(({ current, previous }) => {
|
||
if (!current || !previous) return null;
|
||
const diff = current - previous;
|
||
if (diff === 0) return null;
|
||
|
||
const isUp = diff > 0;
|
||
return (
|
||
<Icon
|
||
as={isUp ? TrendingUp : TrendingDown}
|
||
boxSize={3}
|
||
color={isUp ? '#22c55e' : '#ef4444'}
|
||
/>
|
||
);
|
||
});
|
||
|
||
TrendIcon.displayName = 'TrendIcon';
|
||
|
||
/**
|
||
* 日历单元格 - 显示涨停数和事件数（加大尺寸）
|
||
*/
|
||
const CalendarCell = memo(({ date, ztData, eventCount, previousZtData, isSelected, isToday, isWeekend, onClick }) => {
|
||
if (!date) {
|
||
return <Box minH="75px" />;
|
||
}
|
||
|
||
const hasZtData = !!ztData;
|
||
const hasEventData = eventCount > 0;
|
||
const ztCount = ztData?.count || 0;
|
||
const heatColors = getHeatColor(ztCount);
|
||
const topSector = ztData?.top_sector || '';
|
||
|
||
// 周末无数据显示"休市"
|
||
if (isWeekend && !hasZtData && !hasEventData) {
|
||
return (
|
||
<Box
|
||
p={2}
|
||
borderRadius="10px"
|
||
bg="rgba(30, 30, 40, 0.3)"
|
||
border="1px solid rgba(255, 255, 255, 0.03)"
|
||
textAlign="center"
|
||
minH="75px"
|
||
display="flex"
|
||
flexDirection="column"
|
||
justifyContent="center"
|
||
alignItems="center"
|
||
>
|
||
<Text fontSize="md" fontWeight="400" color="rgba(255, 255, 255, 0.25)">
|
||
{date.getDate()}
|
||
</Text>
|
||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.2)">
|
||
休市
|
||
</Text>
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
// 正常日期
|
||
return (
|
||
<Tooltip
|
||
label={
|
||
<VStack spacing={1} align="start" p={1}>
|
||
<Text fontWeight="bold" fontSize="md">{`${date.getMonth() + 1}月${date.getDate()}日`}</Text>
|
||
{hasZtData && <Text>涨停: {ztCount}家 {topSector && `| ${topSector}`}</Text>}
|
||
{hasEventData && <Text>未来事件: {eventCount}个</Text>}
|
||
{!hasZtData && !hasEventData && <Text color="gray.400">暂无数据</Text>}
|
||
</VStack>
|
||
}
|
||
placement="top"
|
||
hasArrow
|
||
bg="rgba(15, 15, 22, 0.95)"
|
||
border="1px solid rgba(212, 175, 55, 0.3)"
|
||
borderRadius="10px"
|
||
>
|
||
<Box
|
||
as="button"
|
||
p={2}
|
||
borderRadius="10px"
|
||
bg={hasZtData ? heatColors.bg : hasEventData ? 'rgba(34, 197, 94, 0.2)' : 'rgba(40, 40, 50, 0.3)'}
|
||
border={
|
||
isSelected
|
||
? `2px solid ${goldColors.primary}`
|
||
: isToday
|
||
? `2px solid ${goldColors.light}`
|
||
: hasZtData
|
||
? `1px solid ${heatColors.border}`
|
||
: hasEventData
|
||
? '1px solid rgba(34, 197, 94, 0.4)'
|
||
: '1px solid rgba(255, 255, 255, 0.08)'
|
||
}
|
||
boxShadow={isSelected ? `0 0 15px ${goldColors.glow}` : isToday ? `0 0 10px ${goldColors.glow}` : 'none'}
|
||
position="relative"
|
||
cursor="pointer"
|
||
transition="all 0.2s"
|
||
_hover={{
|
||
transform: 'scale(1.05)',
|
||
boxShadow: '0 6px 20px rgba(0, 0, 0, 0.4)',
|
||
borderColor: goldColors.primary,
|
||
}}
|
||
onClick={() => onClick && onClick(date)}
|
||
w="full"
|
||
minH="75px"
|
||
>
|
||
{/* 今天标记 */}
|
||
{isToday && (
|
||
<Badge
|
||
position="absolute"
|
||
top="2px"
|
||
right="2px"
|
||
bg="rgba(239, 68, 68, 0.9)"
|
||
color="white"
|
||
fontSize="9px"
|
||
px={1}
|
||
borderRadius="sm"
|
||
>
|
||
今天
|
||
</Badge>
|
||
)}
|
||
|
||
<VStack spacing={0.5} align="center">
|
||
{/* 日期 */}
|
||
<Text
|
||
fontSize="lg"
|
||
fontWeight={isSelected || isToday ? 'bold' : '600'}
|
||
color={isSelected ? goldColors.primary : isToday ? goldColors.light : textColors.primary}
|
||
>
|
||
{date.getDate()}
|
||
</Text>
|
||
|
||
{/* 涨停数 + 趋势 */}
|
||
{hasZtData && (
|
||
<HStack spacing={1} justify="center">
|
||
<Icon as={Flame} boxSize={3} color={heatColors.text} />
|
||
<Text fontSize="sm" fontWeight="bold" color={heatColors.text}>
|
||
{ztCount}
|
||
</Text>
|
||
<TrendIcon current={ztCount} previous={previousZtData?.count} />
|
||
</HStack>
|
||
)}
|
||
|
||
{/* 事件数 */}
|
||
{hasEventData && (
|
||
<HStack spacing={1} justify="center">
|
||
<Icon as={FileText} boxSize={3} color="#22c55e" />
|
||
<Text fontSize="sm" fontWeight="bold" color="#22c55e">
|
||
{eventCount}
|
||
</Text>
|
||
</HStack>
|
||
)}
|
||
|
||
{/* 主要板块 */}
|
||
{hasZtData && topSector && (
|
||
<Text fontSize="xs" color={textColors.secondary} noOfLines={1} maxW="70px">
|
||
{topSector}
|
||
</Text>
|
||
)}
|
||
</VStack>
|
||
</Box>
|
||
</Tooltip>
|
||
);
|
||
});
|
||
|
||
CalendarCell.displayName = 'CalendarCell';
|
||
|
||
/**
|
||
* 详情弹窗组件 - 完整展示涨停分析和事件详情
|
||
*/
|
||
const DetailModal = ({ isOpen, onClose, selectedDate, ztDetail, events, loading }) => {
|
||
const dispatch = useDispatch();
|
||
const reduxWatchlist = useSelector(state => state.stock.watchlist);
|
||
|
||
const [detailDrawerVisible, setDetailDrawerVisible] = useState(false);
|
||
const [selectedContent, setSelectedContent] = useState(null);
|
||
const [ztViewMode, setZtViewMode] = useState('sector'); // 'sector' | 'stock'
|
||
const [stocksDrawerVisible, setStocksDrawerVisible] = useState(false);
|
||
const [selectedEventStocks, setSelectedEventStocks] = useState([]);
|
||
const [selectedEventTime, setSelectedEventTime] = useState(null);
|
||
const [selectedEventTitle, setSelectedEventTitle] = useState('');
|
||
const [stockQuotes, setStockQuotes] = useState({});
|
||
const [stockQuotesLoading, setStockQuotesLoading] = useState(false);
|
||
const [expandedReasons, setExpandedReasons] = useState({});
|
||
const [klineModalVisible, setKlineModalVisible] = useState(false);
|
||
const [selectedKlineStock, setSelectedKlineStock] = useState(null);
|
||
|
||
// 板块数据处理 - 必须在条件返回之前调用所有hooks
|
||
const sectorList = useMemo(() => {
|
||
if (!ztDetail?.sector_data) return [];
|
||
return Object.entries(ztDetail.sector_data)
|
||
.filter(([name]) => name !== '其他')
|
||
.map(([name, data]) => ({
|
||
name,
|
||
count: data.count,
|
||
stocks: data.stock_codes || [],
|
||
}))
|
||
.sort((a, b) => b.count - a.count);
|
||
}, [ztDetail]);
|
||
|
||
// 股票详情数据处理
|
||
const stockList = useMemo(() => {
|
||
if (!ztDetail?.stock_infos) return [];
|
||
return ztDetail.stock_infos.map(stock => ({
|
||
...stock,
|
||
key: stock.scode,
|
||
}));
|
||
}, [ztDetail]);
|
||
|
||
// 热门关键词
|
||
const hotKeywords = useMemo(() => {
|
||
if (!ztDetail?.word_freq_data) return [];
|
||
return ztDetail.word_freq_data.slice(0, 12);
|
||
}, [ztDetail]);
|
||
|
||
// 获取六位股票代码（去掉后缀）- 纯函数，不是hook
|
||
const getSixDigitCode = (code) => {
|
||
if (!code) return code;
|
||
return code.split('.')[0];
|
||
};
|
||
|
||
// 检查股票是否已在自选中 - 必须在条件返回之前
|
||
const isStockInWatchlist = useCallback((stockCode) => {
|
||
const sixDigitCode = getSixDigitCode(stockCode);
|
||
return reduxWatchlist?.some(item =>
|
||
getSixDigitCode(item.stock_code) === sixDigitCode
|
||
);
|
||
}, [reduxWatchlist]);
|
||
|
||
// 条件返回必须在所有hooks之后
|
||
if (!selectedDate) return null;
|
||
|
||
const dateStr = `${selectedDate.getFullYear()}年${selectedDate.getMonth() + 1}月${selectedDate.getDate()}日`;
|
||
const isPastDate = selectedDate < new Date(new Date().setHours(0, 0, 0, 0));
|
||
|
||
// 渲染重要性星级
|
||
const renderStars = (star) => {
|
||
const stars = [];
|
||
for (let i = 1; i <= 5; i++) {
|
||
stars.push(
|
||
<StarFilled
|
||
key={i}
|
||
style={{
|
||
color: i <= star ? '#faad14' : '#d9d9d9',
|
||
fontSize: '14px'
|
||
}}
|
||
/>
|
||
);
|
||
}
|
||
return <span>{stars}</span>;
|
||
};
|
||
|
||
// 显示内容详情
|
||
const showContentDetail = (content, title) => {
|
||
setSelectedContent({ content, title });
|
||
setDetailDrawerVisible(true);
|
||
};
|
||
|
||
// 加载股票行情
|
||
const loadStockQuotes = async (stocks) => {
|
||
if (!stocks || stocks.length === 0) return;
|
||
setStockQuotesLoading(true);
|
||
const quotes = {};
|
||
|
||
for (const stock of stocks) {
|
||
const code = getSixDigitCode(stock.code);
|
||
try {
|
||
const response = await fetch(`${getApiBase()}/api/market/trade/${code}?days=1`);
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
if (data.success && data.data && data.data.length > 0) {
|
||
const latest = data.data[data.data.length - 1];
|
||
quotes[stock.code] = {
|
||
price: latest.close,
|
||
change: latest.change_amount,
|
||
changePercent: latest.change_percent
|
||
};
|
||
}
|
||
}
|
||
} catch (err) {
|
||
console.error('加载股票行情失败:', code, err);
|
||
}
|
||
}
|
||
|
||
setStockQuotes(quotes);
|
||
setStockQuotesLoading(false);
|
||
};
|
||
|
||
// 显示相关股票
|
||
const showRelatedStocks = (stocks, eventTime, eventTitle) => {
|
||
if (!stocks || stocks.length === 0) return;
|
||
|
||
// 归一化股票数据格式
|
||
const normalizedStocks = stocks.map(stock => {
|
||
if (typeof stock === 'object' && !Array.isArray(stock)) {
|
||
return {
|
||
code: stock.code || stock.stock_code || '',
|
||
name: stock.name || stock.stock_name || '',
|
||
description: stock.description || stock.relation_desc || '',
|
||
score: stock.score || 0,
|
||
report: stock.report || null,
|
||
};
|
||
}
|
||
if (Array.isArray(stock)) {
|
||
return {
|
||
code: stock[0] || '',
|
||
name: stock[1] || '',
|
||
description: stock[2] || '',
|
||
score: stock[3] || 0,
|
||
report: null,
|
||
};
|
||
}
|
||
return null;
|
||
}).filter(Boolean);
|
||
|
||
// 按相关度排序
|
||
const sortedStocks = normalizedStocks.sort((a, b) => (b.score || 0) - (a.score || 0));
|
||
|
||
setSelectedEventStocks(sortedStocks);
|
||
setSelectedEventTime(eventTime);
|
||
setSelectedEventTitle(eventTitle);
|
||
setStocksDrawerVisible(true);
|
||
setExpandedReasons({});
|
||
loadStockQuotes(sortedStocks);
|
||
};
|
||
|
||
// 添加交易所后缀
|
||
const addExchangeSuffix = (code) => {
|
||
const sixDigitCode = getSixDigitCode(code);
|
||
if (code.includes('.')) return code;
|
||
if (sixDigitCode.startsWith('6')) {
|
||
return `${sixDigitCode}.SH`;
|
||
} else if (sixDigitCode.startsWith('0') || sixDigitCode.startsWith('3')) {
|
||
return `${sixDigitCode}.SZ`;
|
||
}
|
||
return sixDigitCode;
|
||
};
|
||
|
||
// 显示K线图
|
||
const showKline = (stock) => {
|
||
const code = stock.code;
|
||
const name = stock.name;
|
||
const stockCode = addExchangeSuffix(code);
|
||
|
||
setSelectedKlineStock({
|
||
stock_code: stockCode,
|
||
stock_name: name,
|
||
});
|
||
setKlineModalVisible(true);
|
||
};
|
||
|
||
// 添加单只股票到自选
|
||
const addSingleToWatchlist = async (stock) => {
|
||
const code = stock.code;
|
||
const name = stock.name;
|
||
const stockCode = getSixDigitCode(code);
|
||
|
||
if (isStockInWatchlist(code)) {
|
||
message.info(`${name} 已在自选中`);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await dispatch(toggleWatchlist({
|
||
stockCode,
|
||
stockName: name,
|
||
isInWatchlist: false
|
||
})).unwrap();
|
||
|
||
message.success(`已将 ${name}(${stockCode}) 添加到自选`);
|
||
} catch (error) {
|
||
console.error('添加自选失败:', error);
|
||
message.error('添加失败，请重试');
|
||
}
|
||
};
|
||
|
||
// 相关股票表格列定义（和投资日历保持一致）
|
||
const stockColumns = [
|
||
{
|
||
title: '代码',
|
||
dataIndex: 'code',
|
||
key: 'code',
|
||
width: 90,
|
||
render: (code) => {
|
||
const sixDigitCode = getSixDigitCode(code);
|
||
return (
|
||
<a
|
||
href={`https://valuefrontier.cn/company?scode=${sixDigitCode}`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
style={{ color: '#3B82F6' }}
|
||
>
|
||
{sixDigitCode}
|
||
</a>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
title: '名称',
|
||
dataIndex: 'name',
|
||
key: 'name',
|
||
width: 100,
|
||
render: (name, record) => {
|
||
const sixDigitCode = getSixDigitCode(record.code);
|
||
return (
|
||
<a
|
||
href={`https://valuefrontier.cn/company?scode=${sixDigitCode}`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
<AntText strong>{name}</AntText>
|
||
</a>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
title: '现价',
|
||
key: 'price',
|
||
width: 80,
|
||
render: (_, record) => {
|
||
const quote = stockQuotes[record.code];
|
||
if (quote && quote.price !== undefined) {
|
||
return (
|
||
<AntText type={quote.change > 0 ? 'danger' : 'success'}>
|
||
{quote.price?.toFixed(2)}
|
||
</AntText>
|
||
);
|
||
}
|
||
return <AntText>-</AntText>;
|
||
}
|
||
},
|
||
{
|
||
title: '涨跌幅',
|
||
key: 'change',
|
||
width: 100,
|
||
render: (_, record) => {
|
||
const quote = stockQuotes[record.code];
|
||
if (quote && quote.changePercent !== undefined) {
|
||
const changePercent = quote.changePercent || 0;
|
||
return (
|
||
<Tag color={changePercent > 0 ? 'red' : changePercent < 0 ? 'green' : 'default'}>
|
||
{changePercent > 0 ? '+' : ''}{changePercent.toFixed(2)}%
|
||
</Tag>
|
||
);
|
||
}
|
||
return <AntText>-</AntText>;
|
||
}
|
||
},
|
||
{
|
||
title: '关联理由',
|
||
dataIndex: 'description',
|
||
key: 'reason',
|
||
render: (description, record) => {
|
||
const stockCode = record.code;
|
||
const isExpanded = expandedReasons[stockCode] || false;
|
||
const reason = typeof description === 'string' ? description : '';
|
||
const shouldTruncate = reason && reason.length > 80;
|
||
|
||
const toggleExpanded = () => {
|
||
setExpandedReasons(prev => ({
|
||
...prev,
|
||
[stockCode]: !prev[stockCode]
|
||
}));
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
<AntText style={{ fontSize: '13px', lineHeight: '1.6' }}>
|
||
{isExpanded || !shouldTruncate
|
||
? reason || '-'
|
||
: `${reason?.slice(0, 80)}...`
|
||
}
|
||
</AntText>
|
||
{shouldTruncate && (
|
||
<Button
|
||
type="link"
|
||
size="small"
|
||
onClick={toggleExpanded}
|
||
style={{ padding: 0, marginLeft: 4, fontSize: '12px' }}
|
||
>
|
||
({isExpanded ? '收起' : '展开'})
|
||
</Button>
|
||
)}
|
||
{reason && (
|
||
<div style={{ marginTop: 4 }}>
|
||
<AntText type="secondary" style={{ fontSize: '11px' }}>(AI合成)</AntText>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
title: '研报引用',
|
||
dataIndex: 'report',
|
||
key: 'report',
|
||
width: 180,
|
||
render: (report) => {
|
||
if (!report || !report.title) {
|
||
return <AntText type="secondary">-</AntText>;
|
||
}
|
||
return (
|
||
<div style={{ fontSize: '12px' }}>
|
||
<Tooltip title={report.sentences || report.title}>
|
||
<div>
|
||
<AntText strong style={{ display: 'block', marginBottom: 2 }}>
|
||
{report.title.length > 18 ? `${report.title.slice(0, 18)}...` : report.title}
|
||
</AntText>
|
||
{report.author && (
|
||
<AntText type="secondary" style={{ display: 'block', fontSize: '11px' }}>
|
||
{report.author}
|
||
</AntText>
|
||
)}
|
||
{report.declare_date && (
|
||
<AntText type="secondary" style={{ fontSize: '11px' }}>
|
||
{dayjs(report.declare_date).format('YYYY-MM-DD')}
|
||
</AntText>
|
||
)}
|
||
{report.match_score && (
|
||
<Tag color={report.match_score === '好' ? 'green' : 'blue'} style={{ marginLeft: 4, fontSize: '10px' }}>
|
||
匹配度: {report.match_score}
|
||
</Tag>
|
||
)}
|
||
</div>
|
||
</Tooltip>
|
||
</div>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
title: 'K线图',
|
||
key: 'kline',
|
||
width: 80,
|
||
render: (_, record) => (
|
||
<Button
|
||
type="primary"
|
||
size="small"
|
||
icon={<LineChartOutlined />}
|
||
onClick={() => showKline(record)}
|
||
>
|
||
查看
|
||
</Button>
|
||
)
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
width: 90,
|
||
render: (_, record) => {
|
||
const inWatchlist = isStockInWatchlist(record.code);
|
||
return (
|
||
<Button
|
||
type={inWatchlist ? 'primary' : 'default'}
|
||
size="small"
|
||
icon={inWatchlist ? <StarFilled /> : <StarOutlined />}
|
||
onClick={() => addSingleToWatchlist(record)}
|
||
disabled={inWatchlist}
|
||
>
|
||
{inWatchlist ? '已添加' : '加自选'}
|
||
</Button>
|
||
);
|
||
}
|
||
},
|
||
];
|
||
|
||
// 涨停板块表格列
|
||
const sectorColumns = [
|
||
{
|
||
title: '排名',
|
||
key: 'rank',
|
||
width: 55,
|
||
align: 'center',
|
||
render: (_, __, index) => (
|
||
<Tag color={index < 3 ? 'gold' : 'default'} style={{ fontWeight: 'bold', margin: 0 }}>
|
||
{index + 1}
|
||
</Tag>
|
||
),
|
||
},
|
||
{
|
||
title: '板块',
|
||
dataIndex: 'name',
|
||
key: 'name',
|
||
width: 120,
|
||
render: (name) => (
|
||
<AntText strong style={{ color: '#FFD700' }}>{name}</AntText>
|
||
),
|
||
},
|
||
{
|
||
title: '涨停数',
|
||
dataIndex: 'count',
|
||
key: 'count',
|
||
width: 80,
|
||
align: 'center',
|
||
render: (count) => (
|
||
<Tag color={count >= 8 ? 'red' : count >= 5 ? 'volcano' : count >= 3 ? 'orange' : 'blue'}>
|
||
<FireOutlined style={{ marginRight: 3 }} />
|
||
{count}
|
||
</Tag>
|
||
),
|
||
},
|
||
{
|
||
title: '涨停股票',
|
||
dataIndex: 'stocks',
|
||
key: 'stocks',
|
||
render: (stocks) => {
|
||
// 根据股票代码查找股票名称
|
||
const getStockName = (code) => {
|
||
const stockInfo = stockList.find(s => s.scode === code);
|
||
return stockInfo?.sname || code;
|
||
};
|
||
return (
|
||
<Space wrap size={[4, 4]}>
|
||
{stocks.slice(0, 6).map((code) => (
|
||
<Tag
|
||
key={code}
|
||
style={{ cursor: 'pointer', margin: 0 }}
|
||
color="processing"
|
||
>
|
||
<a
|
||
href={`https://valuefrontier.cn/company?scode=${code}`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
style={{ color: 'inherit' }}
|
||
>
|
||
{getStockName(code)}
|
||
</a>
|
||
</Tag>
|
||
))}
|
||
{stocks.length > 6 && (
|
||
<Tag style={{ margin: 0 }}>+{stocks.length - 6}</Tag>
|
||
)}
|
||
</Space>
|
||
);
|
||
},
|
||
},
|
||
];
|
||
|
||
// 涨停股票详情表格列
|
||
const ztStockColumns = [
|
||
{
|
||
title: '股票',
|
||
key: 'stock',
|
||
width: 120,
|
||
fixed: 'left',
|
||
render: (_, record) => (
|
||
<a
|
||
href={`https://valuefrontier.cn/company?scode=${record.scode}`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
style={{ color: '#FFD700', fontWeight: 'bold' }}
|
||
>
|
||
{record.sname}
|
||
</a>
|
||
),
|
||
},
|
||
{
|
||
title: '涨停时间',
|
||
dataIndex: 'formatted_time',
|
||
key: 'time',
|
||
width: 85,
|
||
align: 'center',
|
||
render: (time) => (
|
||
<Tag color={time <= '09:30:00' ? 'red' : time <= '10:00:00' ? 'volcano' : 'default'}>
|
||
{time?.substring(0, 5) || '-'}
|
||
</Tag>
|
||
),
|
||
},
|
||
{
|
||
title: '连板',
|
||
dataIndex: 'continuous_days',
|
||
key: 'continuous',
|
||
width: 75,
|
||
align: 'center',
|
||
render: (text) => {
|
||
if (!text || text === '首板') return <Tag>首板</Tag>;
|
||
const match = text.match(/(\d+)/);
|
||
const days = match ? parseInt(match[1]) : 1;
|
||
return (
|
||
<Tag color={days >= 5 ? 'red' : days >= 3 ? 'volcano' : days >= 2 ? 'orange' : 'default'}>
|
||
{text}
|
||
</Tag>
|
||
);
|
||
},
|
||
},
|
||
{
|
||
title: '核心板块',
|
||
dataIndex: 'core_sectors',
|
||
key: 'sectors',
|
||
width: 180,
|
||
render: (sectors) => (
|
||
<Space wrap size={[2, 2]}>
|
||
{(sectors || []).slice(0, 3).map((sector, idx) => (
|
||
<Tag key={idx} color="gold" style={{ margin: 0, fontSize: '12px' }}>
|
||
{sector}
|
||
</Tag>
|
||
))}
|
||
</Space>
|
||
),
|
||
},
|
||
{
|
||
title: '涨停简报',
|
||
dataIndex: 'brief',
|
||
key: 'brief',
|
||
ellipsis: true,
|
||
render: (text) => {
|
||
if (!text) return <AntText type="secondary">-</AntText>;
|
||
// 移除HTML标签
|
||
const cleanText = text.replace(/<br\s*\/?>/gi, ' ').replace(/<[^>]+>/g, '');
|
||
return (
|
||
<Tooltip title={cleanText} placement="topLeft" overlayStyle={{ maxWidth: 500 }}>
|
||
<Button
|
||
type="link"
|
||
size="small"
|
||
onClick={() => showContentDetail(text.replace(/<br\s*\/?>/gi, '\n\n'), '涨停简报')}
|
||
style={{ padding: 0, height: 'auto', whiteSpace: 'normal', textAlign: 'left' }}
|
||
>
|
||
{cleanText.length > 40 ? cleanText.substring(0, 40) + '...' : cleanText}
|
||
</Button>
|
||
</Tooltip>
|
||
);
|
||
},
|
||
},
|
||
];
|
||
|
||
// 事件表格列（参考投资日历）- 去掉相关概念列
|
||
const eventColumns = [
|
||
{
|
||
title: '时间',
|
||
dataIndex: 'calendar_time',
|
||
key: 'time',
|
||
width: 80,
|
||
render: (time) => (
|
||
<Space>
|
||
<ClockCircleOutlined />
|
||
<AntText>{dayjs(time).format('HH:mm')}</AntText>
|
||
</Space>
|
||
),
|
||
},
|
||
{
|
||
title: '重要度',
|
||
dataIndex: 'star',
|
||
key: 'star',
|
||
width: 120,
|
||
render: renderStars,
|
||
},
|
||
{
|
||
title: '标题',
|
||
dataIndex: 'title',
|
||
key: 'title',
|
||
ellipsis: true,
|
||
render: (text) => (
|
||
<Tooltip title={text}>
|
||
<AntText strong style={{ fontSize: '14px' }}>{text}</AntText>
|
||
</Tooltip>
|
||
),
|
||
},
|
||
{
|
||
title: '背景',
|
||
dataIndex: 'former',
|
||
key: 'former',
|
||
width: 80,
|
||
render: (text) => (
|
||
<Button
|
||
type="link"
|
||
size="small"
|
||
icon={<LinkOutlined />}
|
||
onClick={() => showContentDetail(text, '事件背景')}
|
||
disabled={!text}
|
||
>
|
||
查看
|
||
</Button>
|
||
),
|
||
},
|
||
{
|
||
title: '未来推演',
|
||
dataIndex: 'forecast',
|
||
key: 'forecast',
|
||
width: 90,
|
||
render: (text) => (
|
||
<Button
|
||
type="link"
|
||
size="small"
|
||
icon={<RobotOutlined />}
|
||
onClick={() => showContentDetail(text, '未来推演')}
|
||
disabled={!text}
|
||
>
|
||
{text ? '查看' : '无'}
|
||
</Button>
|
||
),
|
||
},
|
||
{
|
||
title: '相关股票',
|
||
dataIndex: 'related_stocks',
|
||
key: 'stocks',
|
||
width: 120,
|
||
render: (stocks, record) => {
|
||
const hasStocks = stocks && stocks.length > 0;
|
||
if (!hasStocks) {
|
||
return <AntText type="secondary">无</AntText>;
|
||
}
|
||
return (
|
||
<Button
|
||
type="link"
|
||
size="small"
|
||
icon={<StockOutlined />}
|
||
onClick={() => showRelatedStocks(stocks, record.calendar_time, record.title)}
|
||
>
|
||
{stocks.length}只
|
||
</Button>
|
||
);
|
||
},
|
||
},
|
||
];
|
||
|
||
return (
|
||
<>
|
||
<Modal
|
||
isOpen={isOpen}
|
||
onClose={onClose}
|
||
size="6xl"
|
||
scrollBehavior="inside"
|
||
>
|
||
<ModalOverlay bg="blackAlpha.700" backdropFilter={GLASS_BLUR.sm} />
|
||
<ModalContent
|
||
maxW="1300px"
|
||
bg="linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)"
|
||
border="1px solid rgba(255,215,0,0.2)"
|
||
borderRadius="2xl"
|
||
>
|
||
<ModalHeader borderBottom="1px solid rgba(255,215,0,0.2)" py={4}>
|
||
<HStack spacing={4}>
|
||
<Box
|
||
p={2}
|
||
bg="rgba(255,215,0,0.15)"
|
||
borderRadius="lg"
|
||
border="1px solid rgba(255,215,0,0.3)"
|
||
>
|
||
<Icon as={Calendar} color="gold" boxSize={6} />
|
||
</Box>
|
||
<VStack align="start" spacing={0}>
|
||
<Text fontSize="xl" fontWeight="bold" color="white">
|
||
{dateStr}
|
||
</Text>
|
||
<HStack spacing={2}>
|
||
<Badge colorScheme={isPastDate ? 'purple' : 'green'} fontSize="sm">
|
||
{isPastDate ? '历史数据' : '未来事件'}
|
||
</Badge>
|
||
{ztDetail && (
|
||
<Badge colorScheme="red" fontSize="sm">
|
||
涨停 {ztDetail.total_stocks || 0} 家
|
||
</Badge>
|
||
)}
|
||
{events?.length > 0 && (
|
||
<Badge colorScheme="blue" fontSize="sm">
|
||
事件 {events.length} 个
|
||
</Badge>
|
||
)}
|
||
</HStack>
|
||
</VStack>
|
||
</HStack>
|
||
</ModalHeader>
|
||
<ModalCloseButton color="whiteAlpha.600" _hover={{ color: 'white' }} size="lg" />
|
||
|
||
<ModalBody py={6} px={6} className="hero-panel-modal">
|
||
{loading ? (
|
||
<Center h="300px">
|
||
<Spin size="large" tip="加载中..." />
|
||
</Center>
|
||
) : (
|
||
<Tabs
|
||
defaultActiveKey={isPastDate ? 'zt' : 'event'}
|
||
size="large"
|
||
tabBarStyle={{ marginBottom: 24 }}
|
||
>
|
||
{/* 涨停分析 Tab */}
|
||
<TabPane
|
||
tab={
|
||
<span style={{ fontSize: '16px' }}>
|
||
<FireOutlined style={{ marginRight: 8 }} />
|
||
涨停分析 ({ztDetail?.total_stocks || 0})
|
||
</span>
|
||
}
|
||
key="zt"
|
||
disabled={!ztDetail}
|
||
>
|
||
{(sectorList.length > 0 || stockList.length > 0) ? (
|
||
<VStack spacing={4} align="stretch">
|
||
{/* 热门关键词 */}
|
||
{hotKeywords.length > 0 && (
|
||
<Box
|
||
p={3}
|
||
bg="rgba(255, 215, 0, 0.05)"
|
||
borderRadius="lg"
|
||
border="1px solid rgba(255, 215, 0, 0.15)"
|
||
>
|
||
<HStack spacing={2} mb={2}>
|
||
<FireOutlined style={{ color: '#FFD700' }} />
|
||
<Text fontSize="sm" fontWeight="bold" color="gold">
|
||
今日热词
|
||
</Text>
|
||
</HStack>
|
||
<Space wrap size={[6, 6]}>
|
||
{hotKeywords.map((kw, idx) => (
|
||
<Tag
|
||
key={kw.name}
|
||
color={idx < 3 ? 'gold' : idx < 6 ? 'orange' : 'default'}
|
||
style={{
|
||
fontSize: idx < 3 ? '14px' : '13px',
|
||
fontWeight: idx < 3 ? 'bold' : 'normal',
|
||
}}
|
||
>
|
||
{kw.name}
|
||
</Tag>
|
||
))}
|
||
</Space>
|
||
</Box>
|
||
)}
|
||
|
||
{/* 视图切换按钮 */}
|
||
<HStack justify="space-between" align="center">
|
||
<HStack spacing={2}>
|
||
<Button
|
||
size="small"
|
||
type={ztViewMode === 'sector' ? 'primary' : 'default'}
|
||
onClick={() => setZtViewMode('sector')}
|
||
icon={<TagsOutlined />}
|
||
>
|
||
按板块 ({sectorList.length})
|
||
</Button>
|
||
<Button
|
||
size="small"
|
||
type={ztViewMode === 'stock' ? 'primary' : 'default'}
|
||
onClick={() => setZtViewMode('stock')}
|
||
icon={<StockOutlined />}
|
||
>
|
||
按个股 ({stockList.length})
|
||
</Button>
|
||
</HStack>
|
||
<Text fontSize="sm" color="whiteAlpha.600">
|
||
共 {ztDetail?.total_stocks || 0} 只涨停
|
||
</Text>
|
||
</HStack>
|
||
|
||
{/* 板块视图 */}
|
||
{ztViewMode === 'sector' && (
|
||
<Table
|
||
dataSource={sectorList}
|
||
columns={sectorColumns}
|
||
rowKey="name"
|
||
size="small"
|
||
pagination={false}
|
||
scroll={{ y: 350 }}
|
||
/>
|
||
)}
|
||
|
||
{/* 个股视图 */}
|
||
{ztViewMode === 'stock' && (
|
||
<Table
|
||
dataSource={stockList}
|
||
columns={ztStockColumns}
|
||
rowKey="scode"
|
||
size="small"
|
||
pagination={false}
|
||
scroll={{ x: 800, y: 350 }}
|
||
/>
|
||
)}
|
||
</VStack>
|
||
) : (
|
||
<Center h="200px">
|
||
<VStack>
|
||
<FireOutlined style={{ fontSize: 48, color: '#666' }} />
|
||
<AntText type="secondary" style={{ fontSize: 16 }}>暂无涨停数据</AntText>
|
||
</VStack>
|
||
</Center>
|
||
)}
|
||
</TabPane>
|
||
|
||
{/* 未来事件 Tab */}
|
||
<TabPane
|
||
tab={
|
||
<span style={{ fontSize: '16px' }}>
|
||
<CalendarOutlined style={{ marginRight: 8 }} />
|
||
未来事件 ({events?.length || 0})
|
||
</span>
|
||
}
|
||
key="event"
|
||
disabled={!events?.length}
|
||
>
|
||
{events?.length > 0 ? (
|
||
<Table
|
||
dataSource={events}
|
||
columns={eventColumns}
|
||
rowKey="id"
|
||
size="small"
|
||
pagination={false}
|
||
scroll={{ x: 900, y: 420 }}
|
||
/>
|
||
) : (
|
||
<Center h="200px">
|
||
<VStack>
|
||
<CalendarOutlined style={{ fontSize: 48, color: '#666' }} />
|
||
<AntText type="secondary" style={{ fontSize: 16 }}>暂无事件数据</AntText>
|
||
</VStack>
|
||
</Center>
|
||
)}
|
||
</TabPane>
|
||
</Tabs>
|
||
)}
|
||
</ModalBody>
|
||
</ModalContent>
|
||
</Modal>
|
||
|
||
{/* 内容详情抽屉 */}
|
||
<Drawer
|
||
isOpen={detailDrawerVisible}
|
||
placement="right"
|
||
size="lg"
|
||
onClose={() => setDetailDrawerVisible(false)}
|
||
>
|
||
<DrawerOverlay bg="blackAlpha.600" />
|
||
<DrawerContent
|
||
bg="linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)"
|
||
borderLeft="1px solid rgba(255,215,0,0.2)"
|
||
>
|
||
<DrawerCloseButton color="whiteAlpha.600" />
|
||
<DrawerHeader borderBottom="1px solid rgba(255,215,0,0.2)" color="white">
|
||
{selectedContent?.title}
|
||
</DrawerHeader>
|
||
<DrawerBody py={6}>
|
||
<Box
|
||
className="markdown-content"
|
||
color="whiteAlpha.900"
|
||
fontSize="md"
|
||
lineHeight="1.8"
|
||
sx={{
|
||
'& p': { mb: 4 },
|
||
'& h1, & h2, & h3': { color: 'gold', mb: 3 },
|
||
'& ul, & ol': { pl: 6 },
|
||
'& li': { mb: 2 },
|
||
}}
|
||
>
|
||
<ReactMarkdown>
|
||
{typeof selectedContent?.content === 'string'
|
||
? selectedContent.content
|
||
: selectedContent?.content?.data
|
||
? selectedContent.content.data.map(item => item.sentence || '').join('\n\n')
|
||
: '暂无内容'}
|
||
</ReactMarkdown>
|
||
<Text fontSize="sm" color="whiteAlpha.500" mt={6} fontStyle="italic">
|
||
(AI合成内容)
|
||
</Text>
|
||
</Box>
|
||
</DrawerBody>
|
||
</DrawerContent>
|
||
</Drawer>
|
||
|
||
{/* 相关股票弹窗 */}
|
||
<Modal
|
||
isOpen={stocksDrawerVisible}
|
||
onClose={() => {
|
||
setStocksDrawerVisible(false);
|
||
setExpandedReasons({});
|
||
}}
|
||
size="6xl"
|
||
scrollBehavior="inside"
|
||
>
|
||
<ModalOverlay bg="blackAlpha.700" backdropFilter={GLASS_BLUR.sm} />
|
||
<ModalContent
|
||
maxW="1100px"
|
||
maxH="85vh"
|
||
bg="linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)"
|
||
border="1px solid rgba(255,215,0,0.2)"
|
||
borderRadius="2xl"
|
||
>
|
||
<ModalHeader borderBottom="1px solid rgba(255,215,0,0.2)" py={4}>
|
||
<HStack spacing={3}>
|
||
<StockOutlined style={{ color: '#FFD700', fontSize: '20px' }} />
|
||
<VStack align="start" spacing={0}>
|
||
<Text fontSize="lg" color="white">相关股票</Text>
|
||
{selectedEventTitle && (
|
||
<Text fontSize="sm" color="whiteAlpha.600" fontWeight="normal" noOfLines={1} maxW="800px">
|
||
{selectedEventTitle}
|
||
</Text>
|
||
)}
|
||
</VStack>
|
||
<Badge colorScheme="blue" ml={2}>
|
||
{selectedEventStocks?.length || 0}只
|
||
</Badge>
|
||
{stockQuotesLoading && <Spin size="small" />}
|
||
</HStack>
|
||
</ModalHeader>
|
||
<ModalCloseButton color="whiteAlpha.600" />
|
||
<ModalBody py={4} className="hero-panel-modal">
|
||
{selectedEventStocks && selectedEventStocks.length > 0 ? (
|
||
<Box maxH="calc(85vh - 120px)" overflowY="auto">
|
||
<Table
|
||
dataSource={selectedEventStocks}
|
||
columns={stockColumns}
|
||
rowKey={(record) => record.code}
|
||
size="middle"
|
||
pagination={false}
|
||
/>
|
||
</Box>
|
||
) : (
|
||
<Center h="200px">
|
||
<Text color="whiteAlpha.500">暂无相关股票</Text>
|
||
</Center>
|
||
)}
|
||
</ModalBody>
|
||
</ModalContent>
|
||
</Modal>
|
||
|
||
{/* K线图弹窗 */}
|
||
{selectedKlineStock && (
|
||
<KLineChartModal
|
||
isOpen={klineModalVisible}
|
||
onClose={() => {
|
||
setKlineModalVisible(false);
|
||
setSelectedKlineStock(null);
|
||
}}
|
||
stock={selectedKlineStock}
|
||
eventTime={selectedEventTime}
|
||
size="5xl"
|
||
/>
|
||
)}
|
||
</>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* 综合日历组件（无左侧面板，点击弹窗）
|
||
*/
|
||
const CombinedCalendar = () => {
|
||
const [currentMonth, setCurrentMonth] = useState(new Date());
|
||
const [selectedDate, setSelectedDate] = useState(null);
|
||
|
||
// 涨停数据
|
||
const [ztDatesData, setZtDatesData] = useState([]);
|
||
const [ztDailyDetails, setZtDailyDetails] = useState({});
|
||
const [selectedZtDetail, setSelectedZtDetail] = useState(null);
|
||
|
||
// 投资日历数据
|
||
const [eventCounts, setEventCounts] = useState([]);
|
||
const [selectedEvents, setSelectedEvents] = useState([]);
|
||
|
||
const [loading, setLoading] = useState(true);
|
||
const [detailLoading, setDetailLoading] = useState(false);
|
||
const [modalOpen, setModalOpen] = useState(false);
|
||
|
||
// 加载涨停 dates.json
|
||
useEffect(() => {
|
||
const loadZtDatesData = async () => {
|
||
try {
|
||
const response = await fetch('/data/zt/dates.json');
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
setZtDatesData(data.dates || []);
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to load zt dates.json:', error);
|
||
}
|
||
};
|
||
loadZtDatesData();
|
||
}, []);
|
||
|
||
// 加载投资日历事件数量
|
||
useEffect(() => {
|
||
const loadEventCounts = async () => {
|
||
try {
|
||
const year = currentMonth.getFullYear();
|
||
const month = currentMonth.getMonth() + 1;
|
||
const response = await eventService.calendar.getEventCounts(year, month);
|
||
if (response.success) {
|
||
setEventCounts(response.data || []);
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to load event counts:', error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
loadEventCounts();
|
||
}, [currentMonth]);
|
||
|
||
// 获取当月涨停板块详情
|
||
useEffect(() => {
|
||
const loadMonthZtDetails = async () => {
|
||
const year = currentMonth.getFullYear();
|
||
const month = currentMonth.getMonth();
|
||
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
||
|
||
const details = {};
|
||
const promises = [];
|
||
|
||
for (let day = 1; day <= daysInMonth; day++) {
|
||
const dateStr = `${year}${String(month + 1).padStart(2, '0')}${String(day).padStart(2, '0')}`;
|
||
const hasData = ztDatesData.some(d => d.date === dateStr);
|
||
if (hasData && !ztDailyDetails[dateStr]) {
|
||
promises.push(
|
||
fetch(`/data/zt/daily/${dateStr}.json`)
|
||
.then(res => res.ok ? res.json() : null)
|
||
.then(data => {
|
||
if (data && data.sector_data) {
|
||
let maxSector = '';
|
||
let maxCount = 0;
|
||
Object.entries(data.sector_data).forEach(([sector, info]) => {
|
||
if (info.count > maxCount) {
|
||
maxCount = info.count;
|
||
maxSector = sector;
|
||
}
|
||
});
|
||
details[dateStr] = { top_sector: maxSector, fullData: data };
|
||
}
|
||
})
|
||
.catch(() => null)
|
||
);
|
||
}
|
||
}
|
||
|
||
if (promises.length > 0) {
|
||
await Promise.all(promises);
|
||
setZtDailyDetails(prev => ({ ...prev, ...details }));
|
||
}
|
||
};
|
||
|
||
if (ztDatesData.length > 0) {
|
||
loadMonthZtDetails();
|
||
}
|
||
}, [currentMonth, ztDatesData]);
|
||
|
||
// 构建日期数据映射
|
||
const ztDataMap = useMemo(() => {
|
||
const map = new Map();
|
||
ztDatesData.forEach(d => {
|
||
const detail = ztDailyDetails[d.date] || {};
|
||
map.set(d.date, {
|
||
date: d.date,
|
||
count: d.count,
|
||
top_sector: detail.top_sector,
|
||
});
|
||
});
|
||
return map;
|
||
}, [ztDatesData, ztDailyDetails]);
|
||
|
||
const eventCountMap = useMemo(() => {
|
||
const map = new Map();
|
||
eventCounts.forEach(d => {
|
||
map.set(d.date, d.count);
|
||
});
|
||
return map;
|
||
}, [eventCounts]);
|
||
|
||
// 生成日历天数
|
||
const days = useMemo(() => {
|
||
const year = currentMonth.getFullYear();
|
||
const month = currentMonth.getMonth();
|
||
const firstDay = new Date(year, month, 1);
|
||
const lastDay = new Date(year, month + 1, 0);
|
||
const daysInMonth = lastDay.getDate();
|
||
const startingDayOfWeek = firstDay.getDay();
|
||
|
||
const result = [];
|
||
for (let i = 0; i < startingDayOfWeek; i++) {
|
||
result.push(null);
|
||
}
|
||
for (let i = 1; i <= daysInMonth; i++) {
|
||
result.push(new Date(year, month, i));
|
||
}
|
||
return result;
|
||
}, [currentMonth]);
|
||
|
||
// 预计算日历格子数据
|
||
const calendarCellsData = useMemo(() => {
|
||
const today = new Date();
|
||
const todayStr = today.toDateString();
|
||
const selectedDateStr = selectedDate?.toDateString();
|
||
|
||
return days.map((date, index) => {
|
||
if (!date) {
|
||
return { key: `empty-${index}`, date: null };
|
||
}
|
||
|
||
const ztDateStr = formatDateStr(date);
|
||
const eventDateStr = dayjs(date).format('YYYY-MM-DD');
|
||
const ztData = ztDataMap.get(ztDateStr) || null;
|
||
const eventCount = eventCountMap.get(eventDateStr) || 0;
|
||
const dayOfWeek = date.getDay();
|
||
|
||
const prevDate = new Date(date);
|
||
prevDate.setDate(prevDate.getDate() - 1);
|
||
const previousZtData = ztDataMap.get(formatDateStr(prevDate)) || null;
|
||
|
||
return {
|
||
key: ztDateStr || `day-${index}`,
|
||
date,
|
||
ztData,
|
||
eventCount,
|
||
previousZtData,
|
||
isSelected: date.toDateString() === selectedDateStr,
|
||
isToday: date.toDateString() === todayStr,
|
||
isWeekend: dayOfWeek === 0 || dayOfWeek === 6,
|
||
};
|
||
});
|
||
}, [days, ztDataMap, eventCountMap, selectedDate]);
|
||
|
||
// 处理日期点击 - 打开弹窗
|
||
const handleDateClick = useCallback(async (date) => {
|
||
setSelectedDate(date);
|
||
setModalOpen(true);
|
||
setDetailLoading(true);
|
||
|
||
const ztDateStr = formatDateStr(date);
|
||
const eventDateStr = dayjs(date).format('YYYY-MM-DD');
|
||
|
||
// 加载涨停详情
|
||
const detail = ztDailyDetails[ztDateStr];
|
||
if (detail?.fullData) {
|
||
setSelectedZtDetail(detail.fullData);
|
||
} else {
|
||
try {
|
||
const response = await fetch(`/data/zt/daily/${ztDateStr}.json`);
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
setSelectedZtDetail(data);
|
||
setZtDailyDetails(prev => ({
|
||
...prev,
|
||
[ztDateStr]: { ...prev[ztDateStr], fullData: data }
|
||
}));
|
||
} else {
|
||
setSelectedZtDetail(null);
|
||
}
|
||
} catch {
|
||
setSelectedZtDetail(null);
|
||
}
|
||
}
|
||
|
||
// 加载事件详情
|
||
try {
|
||
const response = await eventService.calendar.getEventsForDate(eventDateStr);
|
||
if (response.success) {
|
||
setSelectedEvents(response.data || []);
|
||
} else {
|
||
setSelectedEvents([]);
|
||
}
|
||
} catch {
|
||
setSelectedEvents([]);
|
||
}
|
||
|
||
setDetailLoading(false);
|
||
}, [ztDailyDetails]);
|
||
|
||
// 月份导航
|
||
const handlePrevMonth = useCallback(() => {
|
||
setCurrentMonth(prev => new Date(prev.getFullYear(), prev.getMonth() - 1));
|
||
}, []);
|
||
|
||
const handleNextMonth = useCallback(() => {
|
||
setCurrentMonth(prev => new Date(prev.getFullYear(), prev.getMonth() + 1));
|
||
}, []);
|
||
|
||
return (
|
||
<>
|
||
<Box
|
||
bg="rgba(15, 15, 22, 0.6)"
|
||
backdropFilter={GLASS_BLUR.md}
|
||
borderRadius="20px"
|
||
border="1px solid rgba(212, 175, 55, 0.2)"
|
||
p={5}
|
||
position="relative"
|
||
overflow="hidden"
|
||
>
|
||
{/* 顶部装饰条 */}
|
||
<Box
|
||
position="absolute"
|
||
top={0}
|
||
left={0}
|
||
right={0}
|
||
h="3px"
|
||
bgGradient="linear(to-r, transparent, #D4AF37, #F4D03F, #D4AF37, transparent)"
|
||
animation="shimmer 3s linear infinite"
|
||
backgroundSize="200% 100%"
|
||
/>
|
||
|
||
{/* 月份导航 */}
|
||
<HStack justify="space-between" mb={4}>
|
||
<IconButton
|
||
icon={<ChevronLeft size={22} />}
|
||
variant="ghost"
|
||
size="md"
|
||
color={textColors.secondary}
|
||
_hover={{ color: goldColors.primary, bg: 'rgba(255, 255, 255, 0.05)' }}
|
||
onClick={handlePrevMonth}
|
||
aria-label="上个月"
|
||
/>
|
||
<HStack spacing={3}>
|
||
<Icon as={Calendar} boxSize={5} color={goldColors.primary} />
|
||
<Text fontSize="xl" fontWeight="bold" color={textColors.primary}>
|
||
{currentMonth.getFullYear()}年{MONTH_NAMES[currentMonth.getMonth()]}
|
||
</Text>
|
||
<Text fontSize="sm" color={textColors.muted}>
|
||
综合日历
|
||
</Text>
|
||
</HStack>
|
||
<IconButton
|
||
icon={<ChevronRight size={22} />}
|
||
variant="ghost"
|
||
size="md"
|
||
color={textColors.secondary}
|
||
_hover={{ color: goldColors.primary, bg: 'rgba(255, 255, 255, 0.05)' }}
|
||
onClick={handleNextMonth}
|
||
aria-label="下个月"
|
||
/>
|
||
</HStack>
|
||
|
||
{/* 星期标题 */}
|
||
<SimpleGrid columns={7} spacing={2} mb={3}>
|
||
{WEEK_DAYS.map((day, idx) => (
|
||
<Text
|
||
key={day}
|
||
textAlign="center"
|
||
fontSize="md"
|
||
fontWeight="600"
|
||
color={idx === 0 || idx === 6 ? 'orange.300' : textColors.secondary}
|
||
>
|
||
{day}
|
||
</Text>
|
||
))}
|
||
</SimpleGrid>
|
||
|
||
{/* 日历格子 */}
|
||
{loading ? (
|
||
<Center h="300px">
|
||
<Spinner size="xl" color={goldColors.primary} thickness="3px" />
|
||
</Center>
|
||
) : (
|
||
<SimpleGrid columns={7} spacing={2}>
|
||
{calendarCellsData.map((cellData) => (
|
||
<CalendarCell
|
||
key={cellData.key}
|
||
date={cellData.date}
|
||
ztData={cellData.ztData}
|
||
eventCount={cellData.eventCount}
|
||
previousZtData={cellData.previousZtData}
|
||
isSelected={cellData.isSelected}
|
||
isToday={cellData.isToday}
|
||
isWeekend={cellData.isWeekend}
|
||
onClick={handleDateClick}
|
||
/>
|
||
))}
|
||
</SimpleGrid>
|
||
)}
|
||
|
||
{/* 图例 */}
|
||
<HStack spacing={5} mt={4} justify="center" flexWrap="wrap">
|
||
<HStack spacing={2}>
|
||
<Icon as={Flame} boxSize={4} color="purple.400" />
|
||
<Text fontSize="sm" color={textColors.muted}>涨停≥80</Text>
|
||
</HStack>
|
||
<HStack spacing={2}>
|
||
<Icon as={Flame} boxSize={4} color="red.400" />
|
||
<Text fontSize="sm" color={textColors.muted}>涨停≥60</Text>
|
||
</HStack>
|
||
<HStack spacing={2}>
|
||
<Icon as={Flame} boxSize={4} color="orange.400" />
|
||
<Text fontSize="sm" color={textColors.muted}>涨停≥40</Text>
|
||
</HStack>
|
||
<HStack spacing={2}>
|
||
<Icon as={FileText} boxSize={4} color="#22c55e" />
|
||
<Text fontSize="sm" color={textColors.muted}>未来事件</Text>
|
||
</HStack>
|
||
</HStack>
|
||
</Box>
|
||
|
||
{/* 详情弹窗 */}
|
||
<DetailModal
|
||
isOpen={modalOpen}
|
||
onClose={() => setModalOpen(false)}
|
||
selectedDate={selectedDate}
|
||
ztDetail={selectedZtDetail}
|
||
events={selectedEvents}
|
||
loading={detailLoading}
|
||
/>
|
||
</>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* 使用说明弹窗组件
|
||
*/
|
||
const InfoModal = () => {
|
||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||
|
||
return (
|
||
<>
|
||
<HStack
|
||
spacing={1.5}
|
||
px={3}
|
||
py={1.5}
|
||
bg="rgba(255,215,0,0.08)"
|
||
border="1px solid rgba(255,215,0,0.2)"
|
||
borderRadius="full"
|
||
cursor="pointer"
|
||
transition="all 0.2s"
|
||
_hover={{
|
||
bg: 'rgba(255,215,0,0.15)',
|
||
borderColor: 'rgba(255,215,0,0.4)',
|
||
transform: 'scale(1.02)',
|
||
}}
|
||
onClick={onOpen}
|
||
>
|
||
<Icon as={Info} color="gold" boxSize={4} />
|
||
<Text fontSize="sm" color="gold" fontWeight="medium">
|
||
使用说明
|
||
</Text>
|
||
</HStack>
|
||
|
||
<Modal isOpen={isOpen} onClose={onClose} size="lg" isCentered motionPreset="slideInBottom">
|
||
<ModalOverlay bg="blackAlpha.700" backdropFilter={GLASS_BLUR.sm} />
|
||
<ModalContent
|
||
bg="linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)"
|
||
border="1px solid rgba(255,215,0,0.3)"
|
||
borderRadius="2xl"
|
||
boxShadow="0 25px 80px rgba(0,0,0,0.8)"
|
||
maxW="550px"
|
||
mx={4}
|
||
>
|
||
<ModalHeader borderBottom="1px solid rgba(255,215,0,0.2)" pb={4}>
|
||
<HStack spacing={3}>
|
||
<Box p={2} bg="rgba(255,215,0,0.15)" borderRadius="lg" border="1px solid rgba(255,215,0,0.3)">
|
||
<Icon as={Info} color="gold" boxSize={5} />
|
||
</Box>
|
||
<Text fontSize="xl" fontWeight="bold" bgGradient="linear(to-r, #FFD700, #FFA500)" bgClip="text">
|
||
事件中心使用指南
|
||
</Text>
|
||
</HStack>
|
||
</ModalHeader>
|
||
<ModalCloseButton color="whiteAlpha.600" _hover={{ color: 'white' }} />
|
||
|
||
<ModalBody py={6} px={6}>
|
||
<VStack align="stretch" spacing={5}>
|
||
<Box>
|
||
<Text fontSize="md" fontWeight="bold" color="whiteAlpha.900" mb={2}>📅 综合日历</Text>
|
||
<Text fontSize="md" color="whiteAlpha.800" lineHeight="1.8">
|
||
日历同时展示<Text as="span" color="purple.300" fontWeight="bold">历史涨停数据</Text>和
|
||
<Text as="span" color="green.300" fontWeight="bold">未来事件</Text>，
|
||
点击日期查看详细信息。
|
||
</Text>
|
||
</Box>
|
||
|
||
<Box>
|
||
<Text fontSize="md" fontWeight="bold" color="whiteAlpha.900" mb={2}>🔥 涨停板块</Text>
|
||
<Text fontSize="md" color="whiteAlpha.800" lineHeight="1.8">
|
||
点击历史日期，查看当日涨停板块排行、涨停数量、涨停股票代码，帮助理解市场主线。
|
||
</Text>
|
||
</Box>
|
||
|
||
<Box>
|
||
<Text fontSize="md" fontWeight="bold" color="whiteAlpha.900" mb={2}>📊 未来事件</Text>
|
||
<Text fontSize="md" color="whiteAlpha.800" lineHeight="1.8">
|
||
点击未来日期，查看事件详情，包括<Text as="span" color="cyan.300" fontWeight="bold">背景分析</Text>、
|
||
<Text as="span" color="orange.300" fontWeight="bold">未来推演</Text>、
|
||
<Text as="span" color="green.300" fontWeight="bold">相关股票</Text>等。
|
||
</Text>
|
||
</Box>
|
||
|
||
<Box pt={3} borderTop="1px solid rgba(255,215,0,0.2)">
|
||
<Text fontSize="md" color="yellow.300" textAlign="center" fontWeight="medium">
|
||
💡 颜色越深表示涨停数越多 · 绿色标记表示有未来事件
|
||
</Text>
|
||
</Box>
|
||
</VStack>
|
||
</ModalBody>
|
||
</ModalContent>
|
||
</Modal>
|
||
</>
|
||
);
|
||
};
|
||
|
||
/**
|
||
* 顶部说明面板主组件
|
||
*/
|
||
const HeroPanel = () => {
|
||
const gradientBg = 'linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 25%, #16213e 50%, #1a1a2e 75%, #0a0a0a 100%)';
|
||
const borderColor = useColorModeValue('rgba(255, 215, 0, 0.3)', 'rgba(255, 215, 0, 0.25)');
|
||
|
||
return (
|
||
<Card
|
||
bg={gradientBg}
|
||
borderColor={borderColor}
|
||
borderWidth="1px"
|
||
boxShadow="0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,215,0,0.1) inset"
|
||
mb={6}
|
||
overflow="hidden"
|
||
position="relative"
|
||
>
|
||
{/* 装饰性光晕 */}
|
||
<Box
|
||
position="absolute"
|
||
top="-50%"
|
||
right="-30%"
|
||
width="600px"
|
||
height="600px"
|
||
borderRadius="full"
|
||
bg="radial-gradient(circle, rgba(255,215,0,0.08) 0%, transparent 70%)"
|
||
pointerEvents="none"
|
||
filter="blur(40px)"
|
||
/>
|
||
<Box
|
||
position="absolute"
|
||
bottom="-40%"
|
||
left="-20%"
|
||
width="400px"
|
||
height="400px"
|
||
borderRadius="full"
|
||
bg="radial-gradient(circle, rgba(100,150,255,0.05) 0%, transparent 70%)"
|
||
pointerEvents="none"
|
||
filter="blur(50px)"
|
||
/>
|
||
|
||
<CardBody p={{ base: 4, md: 6 }}>
|
||
{/* 标题行 */}
|
||
<Flex align="center" justify="space-between" mb={5} wrap="wrap" gap={3}>
|
||
<HStack spacing={4}>
|
||
<Heading size="xl">
|
||
<Text
|
||
bgGradient="linear(to-r, #FFD700, #FFA500, #FFD700)"
|
||
bgClip="text"
|
||
backgroundSize="200% 100%"
|
||
animation="shimmer 3s linear infinite"
|
||
fontWeight="extrabold"
|
||
>
|
||
事件中心
|
||
</Text>
|
||
</Heading>
|
||
<InfoModal />
|
||
{isInTradingTime() && (
|
||
<HStack
|
||
spacing={2}
|
||
px={3}
|
||
py={1.5}
|
||
borderRadius="full"
|
||
bg="rgba(0,218,60,0.1)"
|
||
border="1px solid rgba(0,218,60,0.3)"
|
||
>
|
||
<Box
|
||
w="8px"
|
||
h="8px"
|
||
borderRadius="full"
|
||
bg="#00da3c"
|
||
animation="pulse 1.5s infinite"
|
||
boxShadow="0 0 10px #00da3c"
|
||
/>
|
||
<Text fontSize="sm" color="#00da3c" fontWeight="bold">
|
||
交易中
|
||
</Text>
|
||
</HStack>
|
||
)}
|
||
</HStack>
|
||
</Flex>
|
||
|
||
{/* 综合日历 */}
|
||
<CombinedCalendar />
|
||
</CardBody>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
export default HeroPanel;
|