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

事件中心的涨停原因里面和事件相关

Browse Source
This commit is contained in:
zzlgreat
2026-01-10 18:44:58 +08:00
parent 654c6cff04
commit 4d077adcf2
4 changed files with 389 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/views/LimitAnalyse/components/UnifiedSectorCard/components/RelatedEvents/RelatedEventCard.tsx
View File

@@ -2,7 +2,7 @@
* RelatedEventCard - 关联事件卡片组件 * RelatedEventCard - 关联事件卡片组件
* 在板块卡片内显示涨停归因的关联事件 * 在板块卡片内显示涨停归因的关联事件
*/ */
import React, { memo } from 'react'; import React, { memo } from "react";
import { import {
Box, Box,
HStack, HStack,
@@ -12,10 +12,10 @@ import {
Icon, Icon,
Progress, Progress,
Tooltip, Tooltip,
} from '@chakra-ui/react'; } from "@chakra-ui/react";
import { Newspaper, TrendingUp, ExternalLink } from 'lucide-react'; import { Newspaper, TrendingUp, ExternalLink } from "lucide-react";
import type { RelatedEvent } from '@/types/limitAnalyse'; import type { RelatedEvent } from "@/types/limitAnalyse";
import { textColors, bgColors } from '@/constants/limitAnalyseTheme'; import { textColors, bgColors } from "@/constants/limitAnalyseTheme";
interface RelatedEventCardProps { interface RelatedEventCardProps {
/** 事件数据 */ /** 事件数据 */
@@ -30,28 +30,25 @@ interface RelatedEventCardProps {
* 根据相关度分数获取颜色 * 根据相关度分数获取颜色
*/ */
const getRelevanceColor = (score: number): string => { const getRelevanceColor = (score: number): string => {
if (score >= 80) return '#10B981'; // 高相关 - 绿色 if (score >= 80) return "#10B981"; // 高相关 - 绿色
if (score >= 60) return '#F59E0B'; // 中相关 - 橙色 if (score >= 60) return "#F59E0B"; // 中相关 - 橙色
return '#6B7280'; // 低相关 - 灰色 return "#6B7280"; // 低相关 - 灰色
}; };
/** /**
* 根据相关度分数获取标签 * 根据相关度分数获取标签
*/ */
const getRelevanceLabel = (score: number): string => { const getRelevanceLabel = (score: number): string => {
if (score >= 80) return '高度相关'; if (score >= 80) return "高度相关";
if (score >= 60) return '中度相关'; if (score >= 60) return "中度相关";
return '参考'; return "参考";
}; };
/** /**
* RelatedEventCard 组件 * RelatedEventCard 组件
*/ */
const RelatedEventCard: React.FC<RelatedEventCardProps> = memo(({ const RelatedEventCard: React.FC<RelatedEventCardProps> = memo(
event, ({ event, compact = false, onClick }) => {
compact = false,
onClick
}) => {
const relevanceColor = getRelevanceColor(event.relevance_score || 0); const relevanceColor = getRelevanceColor(event.relevance_score || 0);
const relevanceLabel = getRelevanceLabel(event.relevance_score || 0); const relevanceLabel = getRelevanceLabel(event.relevance_score || 0);
@@ -66,13 +63,19 @@ const RelatedEventCard: React.FC<RelatedEventCardProps> = memo(({
p={2} p={2}
bg="rgba(96, 165, 250, 0.08)" bg="rgba(96, 165, 250, 0.08)"
borderRadius="md" borderRadius="md"
cursor={onClick ? 'pointer' : 'default'} cursor={onClick ? "pointer" : "default"}
onClick={handleClick} onClick={handleClick}
_hover={onClick ? { bg: 'rgba(96, 165, 250, 0.15)' } : undefined} _hover={onClick ? { bg: "rgba(96, 165, 250, 0.15)" } : undefined}
transition="background 0.2s" transition="background 0.2s"
> >
<HStack spacing={2} align="start"> <HStack spacing={2} align="start">
<Icon as={Newspaper} boxSize={3.5} color="#60A5FA" mt={0.5} flexShrink={0} /> <Icon
as={Newspaper}
boxSize={3.5}
color="#60A5FA"
mt={0.5}
flexShrink={0}
/>
<VStack align="start" spacing={0.5} flex={1} minW={0}> <VStack align="start" spacing={0.5} flex={1} minW={0}>
<Text <Text
fontSize="xs" fontSize="xs"
@@ -112,13 +115,17 @@ const RelatedEventCard: React.FC<RelatedEventCardProps> = memo(({
bg={bgColors.item} bg={bgColors.item}
borderRadius="12px" borderRadius="12px"
border="1px solid rgba(255, 255, 255, 0.06)" border="1px solid rgba(255, 255, 255, 0.06)"
cursor={onClick ? 'pointer' : 'default'} cursor={onClick ? "pointer" : "default"}
onClick={handleClick} onClick={handleClick}
_hover={onClick ? { _hover={
onClick
? {
bg: bgColors.hover, bg: bgColors.hover,
borderColor: 'rgba(96, 165, 250, 0.3)', borderColor: "rgba(96, 165, 250, 0.3)",
transform: 'translateY(-1px)', transform: "translateY(-1px)",
} : undefined} }
: undefined
}
transition="all 0.2s" transition="all 0.2s"
> >
<VStack align="stretch" spacing={3}> <VStack align="stretch" spacing={3}>
@@ -140,7 +147,7 @@ const RelatedEventCard: React.FC<RelatedEventCardProps> = memo(({
as={ExternalLink} as={ExternalLink}
boxSize={4} boxSize={4}
color={textColors.muted} color={textColors.muted}
_hover={{ color: '#60A5FA' }} _hover={{ color: "#60A5FA" }}
/> />
)} )}
</HStack> </HStack>
@@ -160,7 +167,7 @@ const RelatedEventCard: React.FC<RelatedEventCardProps> = memo(({
borderRadius="full" borderRadius="full"
bg="rgba(255, 255, 255, 0.1)" bg="rgba(255, 255, 255, 0.1)"
sx={{ sx={{
'& > div': { "& > div": {
background: `linear-gradient(90deg, ${relevanceColor}80, ${relevanceColor})`, background: `linear-gradient(90deg, ${relevanceColor}80, ${relevanceColor})`,
}, },
}} }}
@@ -232,8 +239,9 @@ const RelatedEventCard: React.FC<RelatedEventCardProps> = memo(({
</VStack> </VStack>
</Box> </Box>
); );
}); }
);
RelatedEventCard.displayName = 'RelatedEventCard'; RelatedEventCard.displayName = "RelatedEventCard";
export default RelatedEventCard; export default RelatedEventCard;

71
src/views/LimitAnalyse/components/UnifiedSectorCard/components/RelatedEvents/RelatedEventsModal.tsx
View File

@@ -2,7 +2,7 @@
* RelatedEventsModal - 关联事件弹窗 * RelatedEventsModal - 关联事件弹窗
* 显示板块完整的关联事件列表 * 显示板块完整的关联事件列表
*/ */
import React, { memo, useCallback } from 'react'; import React, { memo, useCallback } from "react";
import { import {
Modal, Modal,
ModalOverlay, ModalOverlay,
@@ -17,13 +17,18 @@ import {
Icon, Icon,
Box, Box,
Divider, Divider,
} from '@chakra-ui/react'; } from "@chakra-ui/react";
import { Newspaper, TrendingUp, Layers } from 'lucide-react'; import { Newspaper, TrendingUp, Layers } from "lucide-react";
import { useNavigate } from 'react-router-dom'; import { useNavigate } from "react-router-dom";
import type { RelatedEvent } from '@/types/limitAnalyse'; import type { RelatedEvent } from "@/types/limitAnalyse";
import { textColors, bgColors, borderColors, goldColors } from '@/constants/limitAnalyseTheme'; import {
import { scrollbarStyles } from '@/styles/limitAnalyseStyles'; textColors,
import RelatedEventCard from './RelatedEventCard'; bgColors,
borderColors,
goldColors,
} from "@/constants/limitAnalyseTheme";
import { scrollbarStyles } from "@/styles/limitAnalyseStyles";
import RelatedEventCard from "./RelatedEventCard";
interface RelatedEventsModalProps { interface RelatedEventsModalProps {
/** 是否打开 */ /** 是否打开 */
@@ -41,20 +46,18 @@ interface RelatedEventsModalProps {
/** /**
* RelatedEventsModal 组件 * RelatedEventsModal 组件
*/ */
const RelatedEventsModal: React.FC<RelatedEventsModalProps> = memo(({ const RelatedEventsModal: React.FC<RelatedEventsModalProps> = memo(
isOpen, ({ isOpen, onClose, sectorName, events, limitUpCount = 0 }) => {
onClose,
sectorName,
events,
limitUpCount = 0,
}) => {
const navigate = useNavigate(); const navigate = useNavigate();
// 点击事件跳转到事件详情 // 点击事件跳转到事件详情
const handleEventClick = useCallback((event: RelatedEvent) => { const handleEventClick = useCallback(
(event: RelatedEvent) => {
onClose(); onClose();
navigate(`/community?event_id=${event.event_id}`); navigate(`/community?event_id=${event.event_id}`);
}, [navigate, onClose]); },
[navigate, onClose]
);
// 按相关度排序 // 按相关度排序
const sortedEvents = [...events].sort( const sortedEvents = [...events].sort(
@@ -62,7 +65,9 @@ const RelatedEventsModal: React.FC<RelatedEventsModalProps> = memo(({
); );
// 高相关事件数量 // 高相关事件数量
const highRelevanceCount = events.filter(e => (e.relevance_score || 0) >= 80).length; const highRelevanceCount = events.filter(
(e) => (e.relevance_score || 0) >= 80
).length;
return ( return (
<Modal <Modal
@@ -84,7 +89,11 @@ const RelatedEventsModal: React.FC<RelatedEventsModalProps> = memo(({
<VStack align="start" spacing={2}> <VStack align="start" spacing={2}>
<HStack spacing={3}> <HStack spacing={3}>
<Icon as={Layers} boxSize={5} color={goldColors.primary} /> <Icon as={Layers} boxSize={5} color={goldColors.primary} />
<Text fontSize="lg" fontWeight="bold" color={textColors.primary}> <Text
fontSize="lg"
fontWeight="bold"
color={textColors.primary}
>
{sectorName} - 涨停归因分析 {sectorName} - 涨停归因分析
</Text> </Text>
</HStack> </HStack>
@@ -92,13 +101,21 @@ const RelatedEventsModal: React.FC<RelatedEventsModalProps> = memo(({
<HStack spacing={1.5}> <HStack spacing={1.5}>
<Icon as={TrendingUp} boxSize={4} color="#EF4444" /> <Icon as={TrendingUp} boxSize={4} color="#EF4444" />
<Text fontSize="sm" color={textColors.secondary}> <Text fontSize="sm" color={textColors.secondary}>
涨停 <Text as="span" color="#EF4444" fontWeight="bold">{limitUpCount}</Text> 只 涨停{" "}
<Text as="span" color="#EF4444" fontWeight="bold">
{limitUpCount}
</Text>{" "}
只
</Text> </Text>
</HStack> </HStack>
<HStack spacing={1.5}> <HStack spacing={1.5}>
<Icon as={Newspaper} boxSize={4} color="#60A5FA" /> <Icon as={Newspaper} boxSize={4} color="#60A5FA" />
<Text fontSize="sm" color={textColors.secondary}> <Text fontSize="sm" color={textColors.secondary}>
关联事件 <Text as="span" color="#60A5FA" fontWeight="bold">{events.length}</Text> 条 关联事件{" "}
<Text as="span" color="#60A5FA" fontWeight="bold">
{events.length}
</Text>{" "}
条
</Text> </Text>
</HStack> </HStack>
{highRelevanceCount > 0 && ( {highRelevanceCount > 0 && (
@@ -124,7 +141,12 @@ const RelatedEventsModal: React.FC<RelatedEventsModalProps> = memo(({
<ModalBody py={4} sx={scrollbarStyles}> <ModalBody py={4} sx={scrollbarStyles}>
{sortedEvents.length === 0 ? ( {sortedEvents.length === 0 ? (
<Box textAlign="center" py={10}> <Box textAlign="center" py={10}>
<Icon as={Newspaper} boxSize={10} color={textColors.muted} mb={3} /> <Icon
as={Newspaper}
boxSize={10}
color={textColors.muted}
mb={3}
/>
<Text color={textColors.muted}>暂无关联事件</Text> <Text color={textColors.muted}>暂无关联事件</Text>
</Box> </Box>
) : ( ) : (
@@ -143,8 +165,9 @@ const RelatedEventsModal: React.FC<RelatedEventsModalProps> = memo(({
</ModalContent> </ModalContent>
</Modal> </Modal>
); );
}); }
);
RelatedEventsModal.displayName = 'RelatedEventsModal'; RelatedEventsModal.displayName = "RelatedEventsModal";
export default RelatedEventsModal; export default RelatedEventsModal;

4
src/views/LimitAnalyse/components/UnifiedSectorCard/components/RelatedEvents/index.ts
View File

@@ -1,5 +1,5 @@
/** /**
* RelatedEvents 组件导出 * RelatedEvents 组件导出
*/ */
export { default as RelatedEventCard } from './RelatedEventCard'; export { default as RelatedEventCard } from "./RelatedEventCard";
export { default as RelatedEventsModal } from './RelatedEventsModal'; export { default as RelatedEventsModal } from "./RelatedEventsModal";

82
src/views/LimitAnalyse/components/UnifiedSectorCard/components/SectorItem.tsx
View File

@@ -2,7 +2,7 @@
* 单个板块项组件 * 单个板块项组件
* 支持 accordion 和 card 两种显示模式 * 支持 accordion 和 card 两种显示模式
*/ */
import React, { memo, useCallback, useMemo, useState } from "react"; import React, { memo, useCallback, useMemo } from "react";
import { import {
Box, Box,
VStack, VStack,
@@ -17,7 +17,6 @@ import {
WrapItem, WrapItem,
Tag, Tag,
TagLabel, TagLabel,
Accordion,
AccordionItem, AccordionItem,
AccordionButton, AccordionButton,
AccordionPanel, AccordionPanel,
@@ -26,15 +25,22 @@ import {
useDisclosure, useDisclosure,
Divider, Divider,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { Star, Zap, ChevronDown, ChevronUp, Sparkles, Newspaper, ChevronRight } from "lucide-react"; import {
import type { SectorData, LimitUpStock } from "@/types/limitAnalyse"; Star,
import { formatLimitUpTime, getSectorColor } from "@/utils/limitAnalyseUtils"; Zap,
ChevronDown,
ChevronUp,
Sparkles,
Newspaper,
ChevronRight,
} from "lucide-react";
import type { SectorData } from "@/types/limitAnalyse";
import { formatLimitUpTime } from "@/utils/limitAnalyseUtils";
import { import {
goldColors, goldColors,
textColors, textColors,
bgColors, bgColors,
marketColors, marketColors,
SECTOR_COLORS,
} from "@/constants/limitAnalyseTheme"; } from "@/constants/limitAnalyseTheme";
import StockListItem from "./StockListItem"; import StockListItem from "./StockListItem";
import { RelatedEventCard, RelatedEventsModal } from "./RelatedEvents"; import { RelatedEventCard, RelatedEventsModal } from "./RelatedEvents";
@@ -112,11 +118,13 @@ const SectorItem = memo<SectorItemProps>(
const sectorColor = getSectorSingleColor(sector); const sectorColor = getSectorSingleColor(sector);
// 关联事件弹窗控制 // 关联事件弹窗控制
const { isOpen: isEventsModalOpen, onOpen: onOpenEventsModal, onClose: onCloseEventsModal } = useDisclosure(); const {
isOpen: isEventsModalOpen,
onOpen: onOpenEventsModal,
onClose: onCloseEventsModal,
} = useDisclosure();
const firstLimitTime = leadingStock const firstLimitTime = leadingStock ? formatLimitUpTime(leadingStock) : "-";
? formatLimitUpTime(leadingStock)
: "-";
// 按时间排序的股票 // 按时间排序的股票
const sortedStocks = useMemo(() => { const sortedStocks = useMemo(() => {
@@ -133,10 +141,13 @@ const SectorItem = memo<SectorItemProps>(
}, [relatedEvents]); }, [relatedEvents]);
// 点击查看更多事件 // 点击查看更多事件
const handleViewMoreEvents = useCallback((e: React.MouseEvent) => { const handleViewMoreEvents = useCallback(
(e: React.MouseEvent) => {
e.stopPropagation(); e.stopPropagation();
onOpenEventsModal(); onOpenEventsModal();
}, [onOpenEventsModal]); },
[onOpenEventsModal]
);
// Card 模式 // Card 模式
if (displayMode === "card") { if (displayMode === "card") {
@@ -185,11 +196,19 @@ const SectorItem = memo<SectorItemProps>(
<VStack align="start" spacing={0} flex={1}> <VStack align="start" spacing={0} flex={1}>
<HStack spacing={2}> <HStack spacing={2}>
<Text fontWeight="bold" fontSize="md" color={textColors.primary}> <Text
fontWeight="bold"
fontSize="md"
color={textColors.primary}
>
{sector} {sector}
</Text> </Text>
{sector === "公告" && ( {sector === "公告" && (
<Icon as={Sparkles} boxSize={4} color={goldColors.primary} /> <Icon
as={Sparkles}
boxSize={4}
color={goldColors.primary}
/>
)} )}
</HStack> </HStack>
<HStack spacing={3} fontSize="xs" color={textColors.muted}> <HStack spacing={3} fontSize="xs" color={textColors.muted}>
@@ -214,7 +233,11 @@ const SectorItem = memo<SectorItemProps>(
<HStack spacing={4}> <HStack spacing={4}>
{leadingStock && ( {leadingStock && (
<HStack spacing={2}> <HStack spacing={2}>
<Text color={goldColors.light} fontWeight="500" fontSize="sm"> <Text
color={goldColors.light}
fontWeight="500"
fontSize="sm"
>
{leadingStock.sname} {leadingStock.sname}
</Text> </Text>
<Badge <Badge
@@ -270,14 +293,25 @@ const SectorItem = memo<SectorItemProps>(
{/* Body - 展开的个股明细 */} {/* Body - 展开的个股明细 */}
<Collapse in={isExpanded} animateOpacity> <Collapse in={isExpanded} animateOpacity>
<Box borderTop="1px solid rgba(255, 255, 255, 0.06)" bg="rgba(0, 0, 0, 0.2)"> <Box
borderTop="1px solid rgba(255, 255, 255, 0.06)"
bg="rgba(0, 0, 0, 0.2)"
>
{/* 关联事件区域 */} {/* 关联事件区域 */}
{relatedEvents.length > 0 && ( {relatedEvents.length > 0 && (
<Box px={4} py={3} borderBottom="1px solid rgba(255, 255, 255, 0.06)"> <Box
px={4}
py={3}
borderBottom="1px solid rgba(255, 255, 255, 0.06)"
>
<HStack justify="space-between" mb={2}> <HStack justify="space-between" mb={2}>
<HStack spacing={2}> <HStack spacing={2}>
<Icon as={Newspaper} boxSize={4} color="#60A5FA" /> <Icon as={Newspaper} boxSize={4} color="#60A5FA" />
<Text fontSize="sm" fontWeight="600" color={textColors.secondary}> <Text
fontSize="sm"
fontWeight="600"
color={textColors.secondary}
>
涨停归因 涨停归因
</Text> </Text>
<Badge <Badge
@@ -371,7 +405,11 @@ const SectorItem = memo<SectorItemProps>(
<VStack align="start" spacing={0} flex={1}> <VStack align="start" spacing={0} flex={1}>
<HStack spacing={2}> <HStack spacing={2}>
<Text fontWeight="bold" fontSize="md" color={textColors.primary}> <Text
fontWeight="bold"
fontSize="md"
color={textColors.primary}
>
{sector} {sector}
</Text> </Text>
{sector === "公告" && ( {sector === "公告" && (
@@ -399,7 +437,11 @@ const SectorItem = memo<SectorItemProps>(
<HStack justify="space-between" mb={2}> <HStack justify="space-between" mb={2}>
<HStack spacing={2}> <HStack spacing={2}>
<Icon as={Newspaper} boxSize={4} color="#60A5FA" /> <Icon as={Newspaper} boxSize={4} color="#60A5FA" />
<Text fontSize="sm" fontWeight="600" color={textColors.secondary}> <Text
fontSize="sm"
fontWeight="600"
color={textColors.secondary}
>
涨停归因 涨停归因
</Text> </Text>
<Badge <Badge