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

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

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

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

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

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

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