refactor(HeroPanel): 提取日历和统计卡片组件
- CalendarCell: 日历单元格，memo 优化渲染 - CombinedCalendar: 综合日历组件，懒加载 DetailModal - HotKeywordsCloud: 热门关键词云，涨停分析 Tab 使用 - ZTStatsCards: 涨停统计卡片（连板分布、封板时间、公告驱动） - InfoModal: 使用说明弹窗 - index.js: 组件统一导出 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -0,0 +1,276 @@
|
||||
// HeroPanel - 日历单元格组件
|
||||
import React, { memo } from "react";
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Badge,
|
||||
Tooltip,
|
||||
Icon,
|
||||
} from "@chakra-ui/react";
|
||||
import { Flame, FileText, TrendingUp, TrendingDown } from "lucide-react";
|
||||
import { goldColors, textColors } from "../constants";
|
||||
import { getHeatColor } from "../utils";
|
||||
|
||||
/**
|
||||
* 趋势图标
|
||||
*/
|
||||
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";
|
||||
|
||||
/**
|
||||
* 日历单元格 - 显示涨停数和事件数（加大尺寸）
|
||||
* 新增：连续概念连接展示（connectLeft/connectRight 表示与左右格子是否同一概念）
|
||||
*/
|
||||
const CalendarCell = memo(
|
||||
({
|
||||
date,
|
||||
ztData,
|
||||
eventCount,
|
||||
previousZtData,
|
||||
isSelected,
|
||||
isToday,
|
||||
isWeekend,
|
||||
onClick,
|
||||
connectLeft,
|
||||
connectRight,
|
||||
}) => {
|
||||
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 || "";
|
||||
|
||||
// 是否有连接线（连续概念）
|
||||
const hasConnection = connectLeft || connectRight;
|
||||
|
||||
// 周末无数据显示"休市"
|
||||
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 && (
|
||||
<Box
|
||||
position="relative"
|
||||
w="full"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
>
|
||||
{/* 左连接线 */}
|
||||
{connectLeft && (
|
||||
<Box
|
||||
position="absolute"
|
||||
left="-12px"
|
||||
top="50%"
|
||||
transform="translateY(-50%)"
|
||||
w="12px"
|
||||
h="2px"
|
||||
bgGradient="linear(to-r, rgba(212,175,55,0.6), rgba(212,175,55,0.3))"
|
||||
/>
|
||||
)}
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color={
|
||||
hasConnection ? goldColors.primary : textColors.secondary
|
||||
}
|
||||
fontWeight={hasConnection ? "bold" : "normal"}
|
||||
noOfLines={1}
|
||||
maxW="70px"
|
||||
bg={hasConnection ? "rgba(212,175,55,0.15)" : "transparent"}
|
||||
px={hasConnection ? 1.5 : 0}
|
||||
py={hasConnection ? 0.5 : 0}
|
||||
borderRadius={hasConnection ? "full" : "none"}
|
||||
border={
|
||||
hasConnection ? "1px solid rgba(212,175,55,0.3)" : "none"
|
||||
}
|
||||
>
|
||||
{topSector}
|
||||
</Text>
|
||||
{/* 右连接线 */}
|
||||
{connectRight && (
|
||||
<Box
|
||||
position="absolute"
|
||||
right="-12px"
|
||||
top="50%"
|
||||
transform="translateY(-50%)"
|
||||
w="12px"
|
||||
h="2px"
|
||||
bgGradient="linear(to-l, rgba(212,175,55,0.6), rgba(212,175,55,0.3))"
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</VStack>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
CalendarCell.displayName = "CalendarCell";
|
||||
|
||||
export default CalendarCell;
|
||||
@@ -0,0 +1,263 @@
|
||||
// HeroPanel - 综合日历组件
|
||||
import React, { useState, useEffect, useCallback, Suspense, lazy } from "react";
|
||||
import {
|
||||
Box,
|
||||
HStack,
|
||||
VStack,
|
||||
Text,
|
||||
Icon,
|
||||
Center,
|
||||
Spinner,
|
||||
} from "@chakra-ui/react";
|
||||
import { Flame } from "lucide-react";
|
||||
import dayjs from "dayjs";
|
||||
import { GLASS_BLUR } from "@/constants/glassConfig";
|
||||
import { eventService } from "@services/eventService";
|
||||
import { getApiBase } from "@utils/apiConfig";
|
||||
import { textColors } from "../constants";
|
||||
import { formatDateStr } from "../utils";
|
||||
|
||||
// 懒加载 FullCalendar
|
||||
const FullCalendarPro = lazy(() =>
|
||||
import("@components/Calendar").then((module) => ({
|
||||
default: module.FullCalendarPro,
|
||||
}))
|
||||
);
|
||||
|
||||
/**
|
||||
* 综合日历组件 - 使用 FullCalendarPro 实现跨天事件条效果
|
||||
* @param {Object} props
|
||||
* @param {React.ComponentType} props.DetailModal - 详情弹窗组件
|
||||
*/
|
||||
const CombinedCalendar = ({ DetailModal }) => {
|
||||
const [currentMonth, setCurrentMonth] = useState(new Date());
|
||||
const [selectedDate, setSelectedDate] = useState(null);
|
||||
|
||||
// 日历综合数据（涨停 + 事件 + 上证涨跌幅）- 使用新的综合 API
|
||||
const [calendarData, setCalendarData] = useState([]);
|
||||
const [ztDailyDetails, setZtDailyDetails] = useState({});
|
||||
const [selectedZtDetail, setSelectedZtDetail] = useState(null);
|
||||
const [selectedEvents, setSelectedEvents] = useState([]);
|
||||
|
||||
const [detailLoading, setDetailLoading] = useState(false);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
// 加载日历综合数据（一次 API 调用获取所有数据）
|
||||
useEffect(() => {
|
||||
const loadCalendarCombinedData = async () => {
|
||||
try {
|
||||
const year = currentMonth.getFullYear();
|
||||
const month = currentMonth.getMonth() + 1;
|
||||
const response = await fetch(
|
||||
`${getApiBase()}/api/v1/calendar/combined-data?year=${year}&month=${month}`
|
||||
);
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
if (result.success && result.data) {
|
||||
// 转换为 FullCalendarPro 需要的格式
|
||||
const formattedData = result.data.map((item) => ({
|
||||
date: item.date,
|
||||
count: item.zt_count || 0,
|
||||
topSector: item.top_sector || "",
|
||||
eventCount: item.event_count || 0,
|
||||
indexChange: item.index_change,
|
||||
}));
|
||||
console.log(
|
||||
"[HeroPanel] 加载日历综合数据成功，数据条数:",
|
||||
formattedData.length
|
||||
);
|
||||
setCalendarData(formattedData);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to load calendar combined data:", error);
|
||||
}
|
||||
};
|
||||
loadCalendarCombinedData();
|
||||
}, [currentMonth]);
|
||||
|
||||
// 处理日期点击 - 打开弹窗
|
||||
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 handleMonthChange = useCallback((year, month) => {
|
||||
setCurrentMonth(new Date(year, month - 1, 1));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
bg="rgba(15, 15, 22, 0.6)"
|
||||
backdropFilter={GLASS_BLUR.md}
|
||||
borderRadius="xl"
|
||||
pt={5}
|
||||
px={5}
|
||||
pb={1}
|
||||
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
|
||||
spacing={3}
|
||||
position="absolute"
|
||||
top={4}
|
||||
right={4}
|
||||
flexWrap="wrap"
|
||||
justify="flex-end"
|
||||
zIndex={1}
|
||||
>
|
||||
<HStack spacing={1}>
|
||||
<Box
|
||||
w="16px"
|
||||
h="8px"
|
||||
borderRadius="sm"
|
||||
bgGradient="linear(135deg, #FFD700 0%, #FFA500 100%)"
|
||||
/>
|
||||
<Text fontSize="2xs" color={textColors.muted}>
|
||||
热门概念
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack spacing={1}>
|
||||
<Icon as={Flame} boxSize={2.5} color="#EF4444" />
|
||||
<Text fontSize="2xs" color={textColors.muted}>
|
||||
≥60
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack spacing={1}>
|
||||
<Icon as={Flame} boxSize={2.5} color="#F59E0B" />
|
||||
<Text fontSize="2xs" color={textColors.muted}>
|
||||
<60
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack spacing={1}>
|
||||
<Box
|
||||
w="12px"
|
||||
h="12px"
|
||||
borderRadius="full"
|
||||
bg="linear-gradient(135deg, #22C55E 0%, #16A34A 100%)"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Text fontSize="6px" fontWeight="bold" color="white">
|
||||
N
|
||||
</Text>
|
||||
</Box>
|
||||
<Text fontSize="2xs" color={textColors.muted}>
|
||||
事件
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack spacing={0.5}>
|
||||
<Text fontSize="2xs" fontWeight="600" color="#EF4444">
|
||||
+
|
||||
</Text>
|
||||
<Text fontSize="2xs" color={textColors.muted}>
|
||||
/
|
||||
</Text>
|
||||
<Text fontSize="2xs" fontWeight="600" color="#22C55E">
|
||||
-
|
||||
</Text>
|
||||
<Text fontSize="2xs" color={textColors.muted}>
|
||||
上证
|
||||
</Text>
|
||||
</HStack>
|
||||
</HStack>
|
||||
|
||||
{/* FullCalendar Pro - 炫酷跨天事件条日历（懒加载） */}
|
||||
<Suspense
|
||||
fallback={
|
||||
<Center h="300px">
|
||||
<VStack spacing={4}>
|
||||
<Spinner size="xl" color="gold" thickness="3px" />
|
||||
<Text color="whiteAlpha.600" fontSize="sm">
|
||||
加载日历组件...
|
||||
</Text>
|
||||
</VStack>
|
||||
</Center>
|
||||
}
|
||||
>
|
||||
<FullCalendarPro
|
||||
data={calendarData}
|
||||
currentMonth={currentMonth}
|
||||
onDateClick={handleDateClick}
|
||||
onMonthChange={handleMonthChange}
|
||||
/>
|
||||
</Suspense>
|
||||
</Box>
|
||||
|
||||
{/* 详情弹窗 */}
|
||||
{DetailModal && (
|
||||
<DetailModal
|
||||
isOpen={modalOpen}
|
||||
onClose={() => setModalOpen(false)}
|
||||
selectedDate={selectedDate}
|
||||
ztDetail={selectedZtDetail}
|
||||
events={selectedEvents}
|
||||
loading={detailLoading}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CombinedCalendar;
|
||||
@@ -0,0 +1,122 @@
|
||||
// 热门关键词云组件
|
||||
// 用于涨停分析 Tab 显示今日热词
|
||||
|
||||
import React from "react";
|
||||
import { FireOutlined } from "@ant-design/icons";
|
||||
|
||||
/**
|
||||
* 获取关键词样式（根据排名）
|
||||
*/
|
||||
const getKeywordStyle = (index) => {
|
||||
if (index < 3) {
|
||||
return {
|
||||
fontSize: "15px",
|
||||
fontWeight: "bold",
|
||||
background:
|
||||
"linear-gradient(135deg, rgba(255,215,0,0.3) 0%, rgba(255,165,0,0.2) 100%)",
|
||||
border: "1px solid rgba(255,215,0,0.5)",
|
||||
color: "#FFD700",
|
||||
padding: "6px 12px",
|
||||
};
|
||||
}
|
||||
if (index < 6) {
|
||||
return {
|
||||
fontSize: "14px",
|
||||
fontWeight: "600",
|
||||
background: "rgba(255,215,0,0.15)",
|
||||
border: "1px solid rgba(255,215,0,0.3)",
|
||||
color: "#D4A84B",
|
||||
padding: "4px 10px",
|
||||
};
|
||||
}
|
||||
return {
|
||||
fontSize: "13px",
|
||||
fontWeight: "normal",
|
||||
background: "rgba(255,255,255,0.08)",
|
||||
border: "1px solid rgba(255,255,255,0.15)",
|
||||
color: "#888",
|
||||
padding: "2px 8px",
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 热门关键词云组件
|
||||
* @param {Object} props
|
||||
* @param {Array} props.keywords - 关键词数组 [{ name: string }]
|
||||
*/
|
||||
const HotKeywordsCloud = ({ keywords }) => {
|
||||
if (!keywords || keywords.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: "16px",
|
||||
background:
|
||||
"linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(255, 140, 0, 0.05) 100%)",
|
||||
borderRadius: "12px",
|
||||
border: "1px solid rgba(255, 215, 0, 0.2)",
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{/* 装饰线 */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: "2px",
|
||||
background:
|
||||
"linear-gradient(to right, transparent, #FFD700, #FF8C00, #FFD700, transparent)",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "8px",
|
||||
marginBottom: "12px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding: "6px",
|
||||
background: "rgba(255,215,0,0.2)",
|
||||
borderRadius: "6px",
|
||||
}}
|
||||
>
|
||||
<FireOutlined style={{ color: "#FFD700", fontSize: "16px" }} />
|
||||
</div>
|
||||
<span style={{ fontSize: "16px", fontWeight: "bold", color: "gold" }}>
|
||||
今日热词
|
||||
</span>
|
||||
<span style={{ fontSize: "12px", color: "rgba(255,255,255,0.5)" }}>
|
||||
词频越高排名越前
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
|
||||
{keywords.map((kw, idx) => {
|
||||
const style = getKeywordStyle(idx);
|
||||
return (
|
||||
<span
|
||||
key={kw.name}
|
||||
style={{
|
||||
...style,
|
||||
borderRadius: "9999px",
|
||||
transition: "all 0.2s",
|
||||
cursor: "default",
|
||||
}}
|
||||
>
|
||||
{kw.name}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HotKeywordsCloud;
|
||||
152
src/views/Community/components/HeroPanel/components/InfoModal.js
Normal file
152
src/views/Community/components/HeroPanel/components/InfoModal.js
Normal file
@@ -0,0 +1,152 @@
|
||||
// HeroPanel - 使用说明弹窗组件
|
||||
import React, { useState } from "react";
|
||||
import { HStack, Icon, Text } from "@chakra-ui/react";
|
||||
import { Modal as AntModal, ConfigProvider, theme } from "antd";
|
||||
import { Info } from "lucide-react";
|
||||
import { GLASS_BLUR } from "@/constants/glassConfig";
|
||||
|
||||
/**
|
||||
* 使用说明弹窗组件
|
||||
*/
|
||||
const InfoModal = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const onOpen = () => setIsOpen(true);
|
||||
const onClose = () => setIsOpen(false);
|
||||
|
||||
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>
|
||||
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
algorithm: theme.darkAlgorithm,
|
||||
token: {
|
||||
colorBgElevated: 'rgba(15,15,30,0.98)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AntModal
|
||||
open={isOpen}
|
||||
onCancel={onClose}
|
||||
footer={null}
|
||||
width={550}
|
||||
centered
|
||||
title={
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||||
<div
|
||||
style={{
|
||||
padding: '8px',
|
||||
background: 'rgba(255,215,0,0.15)',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid rgba(255,215,0,0.3)',
|
||||
display: 'flex',
|
||||
}}
|
||||
>
|
||||
<Info size={20} color="gold" />
|
||||
</div>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '20px',
|
||||
fontWeight: 'bold',
|
||||
background: 'linear-gradient(to right, #FFD700, #FFA500)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
事件中心使用指南
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
styles={{
|
||||
header: {
|
||||
background: 'rgba(25,25,50,0.98)',
|
||||
borderBottom: '1px solid rgba(255,215,0,0.2)',
|
||||
paddingBottom: '16px',
|
||||
},
|
||||
body: {
|
||||
background: 'linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)',
|
||||
padding: '24px',
|
||||
},
|
||||
content: {
|
||||
background: '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: '16px',
|
||||
boxShadow: '0 25px 80px rgba(0,0,0,0.8)',
|
||||
},
|
||||
mask: {
|
||||
background: 'rgba(0,0,0,0.7)',
|
||||
backdropFilter: GLASS_BLUR.sm,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
|
||||
<div>
|
||||
<div style={{ fontSize: '16px', fontWeight: 'bold', color: 'rgba(255,255,255,0.9)', marginBottom: '8px' }}>
|
||||
📅 综合日历
|
||||
</div>
|
||||
<div style={{ fontSize: '16px', color: 'rgba(255,255,255,0.8)', lineHeight: '1.8' }}>
|
||||
日历同时展示
|
||||
<span style={{ color: '#d8b4fe', fontWeight: 'bold' }}>历史涨停数据</span>
|
||||
和
|
||||
<span style={{ color: '#86efac', fontWeight: 'bold' }}>未来事件</span>
|
||||
， 点击日期查看详细信息。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style={{ fontSize: '16px', fontWeight: 'bold', color: 'rgba(255,255,255,0.9)', marginBottom: '8px' }}>
|
||||
🔥 涨停板块
|
||||
</div>
|
||||
<div style={{ fontSize: '16px', color: 'rgba(255,255,255,0.8)', lineHeight: '1.8' }}>
|
||||
点击历史日期，查看当日涨停板块排行、涨停数量、涨停股票代码，帮助理解市场主线。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style={{ fontSize: '16px', fontWeight: 'bold', color: 'rgba(255,255,255,0.9)', marginBottom: '8px' }}>
|
||||
📊 未来事件
|
||||
</div>
|
||||
<div style={{ fontSize: '16px', color: 'rgba(255,255,255,0.8)', lineHeight: '1.8' }}>
|
||||
点击未来日期，查看事件详情，包括
|
||||
<span style={{ color: '#67e8f9', fontWeight: 'bold' }}>背景分析</span>
|
||||
、
|
||||
<span style={{ color: '#fdba74', fontWeight: 'bold' }}>未来推演</span>
|
||||
、
|
||||
<span style={{ color: '#86efac', fontWeight: 'bold' }}>相关股票</span>
|
||||
等。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ paddingTop: '12px', borderTop: '1px solid rgba(255,215,0,0.2)' }}>
|
||||
<div style={{ fontSize: '16px', color: '#fde047', textAlign: 'center', fontWeight: '500' }}>
|
||||
💡 颜色越深表示涨停数越多 · 绿色标记表示有未来事件
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AntModal>
|
||||
</ConfigProvider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default InfoModal;
|
||||
@@ -0,0 +1,171 @@
|
||||
// 涨停统计卡片组件
|
||||
// 显示连板分布、封板时间、公告驱动统计
|
||||
|
||||
import React from "react";
|
||||
|
||||
/**
|
||||
* 获取连板颜色
|
||||
*/
|
||||
const getContinuousColor = (key) => {
|
||||
if (key === "4连板+") return "#ff4d4f";
|
||||
if (key === "3连板") return "#fa541c";
|
||||
if (key === "2连板") return "#fa8c16";
|
||||
return "#52c41a";
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取时间颜色
|
||||
*/
|
||||
const getTimeColor = (key) => {
|
||||
if (key === "秒板") return "#ff4d4f";
|
||||
if (key === "早盘") return "#fa8c16";
|
||||
if (key === "盘中") return "#52c41a";
|
||||
return "#888";
|
||||
};
|
||||
|
||||
/**
|
||||
* 统计卡片基础样式
|
||||
*/
|
||||
const cardStyle = {
|
||||
flex: 1,
|
||||
minWidth: "200px",
|
||||
padding: "12px",
|
||||
background: "rgba(255,255,255,0.03)",
|
||||
borderRadius: "12px",
|
||||
border: "1px solid rgba(255,255,255,0.08)",
|
||||
};
|
||||
|
||||
/**
|
||||
* 涨停统计卡片组件
|
||||
* @param {Object} props
|
||||
* @param {Object} props.stats - 统计数据
|
||||
* @param {Object} props.stats.continuousStats - 连板分布
|
||||
* @param {Object} props.stats.timeStats - 时间分布
|
||||
* @param {number} props.stats.announcementCount - 公告驱动数
|
||||
* @param {number} props.stats.announcementRatio - 公告驱动占比
|
||||
*/
|
||||
const ZTStatsCards = ({ stats }) => {
|
||||
if (!stats) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", gap: "16px", flexWrap: "wrap" }}>
|
||||
{/* 连板分布 */}
|
||||
<div style={cardStyle}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "rgba(255,255,255,0.5)",
|
||||
display: "block",
|
||||
marginBottom: "8px",
|
||||
}}
|
||||
>
|
||||
连板分布
|
||||
</span>
|
||||
<div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
|
||||
{Object.entries(stats.continuousStats).map(([key, value]) => (
|
||||
<div
|
||||
key={key}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "18px",
|
||||
fontWeight: "bold",
|
||||
color: getContinuousColor(key),
|
||||
}}
|
||||
>
|
||||
{value}
|
||||
</span>
|
||||
<span
|
||||
style={{ fontSize: "10px", color: "rgba(255,255,255,0.5)" }}
|
||||
>
|
||||
{key}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 涨停时间分布 */}
|
||||
<div style={cardStyle}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "rgba(255,255,255,0.5)",
|
||||
display: "block",
|
||||
marginBottom: "8px",
|
||||
}}
|
||||
>
|
||||
封板时间
|
||||
</span>
|
||||
<div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
|
||||
{Object.entries(stats.timeStats).map(([key, value]) => (
|
||||
<div
|
||||
key={key}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "18px",
|
||||
fontWeight: "bold",
|
||||
color: getTimeColor(key),
|
||||
}}
|
||||
>
|
||||
{value}
|
||||
</span>
|
||||
<span
|
||||
style={{ fontSize: "10px", color: "rgba(255,255,255,0.5)" }}
|
||||
>
|
||||
{key}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 公告驱动 */}
|
||||
<div
|
||||
style={{
|
||||
padding: "12px",
|
||||
background: "rgba(255,255,255,0.03)",
|
||||
borderRadius: "12px",
|
||||
border: "1px solid rgba(255,255,255,0.08)",
|
||||
minWidth: "120px",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "rgba(255,255,255,0.5)",
|
||||
display: "block",
|
||||
marginBottom: "8px",
|
||||
}}
|
||||
>
|
||||
公告驱动
|
||||
</span>
|
||||
<div style={{ display: "flex", gap: "8px", alignItems: "baseline" }}>
|
||||
<span
|
||||
style={{ fontSize: "20px", fontWeight: "bold", color: "#A855F7" }}
|
||||
>
|
||||
{stats.announcementCount}
|
||||
</span>
|
||||
<span style={{ fontSize: "12px", color: "rgba(255,255,255,0.5)" }}>
|
||||
只 ({stats.announcementRatio}%)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ZTStatsCards;
|
||||
@@ -0,0 +1,7 @@
|
||||
// HeroPanel 子组件导出
|
||||
export * from "./DetailModal";
|
||||
export { default as CalendarCell } from "./CalendarCell";
|
||||
export { default as InfoModal } from "./InfoModal";
|
||||
export { default as CombinedCalendar } from "./CombinedCalendar";
|
||||
export { default as HotKeywordsCloud } from "./HotKeywordsCloud";
|
||||
export { default as ZTStatsCards } from "./ZTStatsCards";
|
||||
Reference in New Issue
Block a user