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

feat: 添加消息推送能力

Browse Source
This commit is contained in:
zdl
2025-10-21 15:48:38 +08:00
parent 955e0db740
commit 38499ce650
8 changed files with 2485 additions and 417 deletions
Download Patch File Download Diff File Expand all files Collapse all files

298
src/components/NotificationContainer/index.js
View File

@@ -1,9 +1,10 @@
// src/components/NotificationContainer/index.js
/**
* 通知容器组件 - 右下角层叠显示实时通知
* 金融资讯通知容器组件 - 右下角层叠显示实时通知
*/
import React from 'react';
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
Box,
VStack,
@@ -11,56 +12,69 @@ import {
Text,
IconButton,
Icon,
Badge,
Button,
useColorModeValue,
Slide,
ScaleFade,
} from '@chakra-ui/react';
import { MdClose, MdCheckCircle, MdError, MdWarning, MdInfo } from 'react-icons/md';
import { MdClose, MdOpenInNew, MdSchedule, MdExpandMore, MdExpandLess } from 'react-icons/md';
import { useNotification } from '../../contexts/NotificationContext';
// 通知类型对应的图标和颜色
const NOTIFICATION_STYLES = {
success: {
icon: MdCheckCircle,
colorScheme: 'green',
bg: 'green.50',
borderColor: 'green.400',
iconColor: 'green.500',
},
error: {
icon: MdError,
colorScheme: 'red',
bg: 'red.50',
borderColor: 'red.400',
iconColor: 'red.500',
},
warning: {
icon: MdWarning,
colorScheme: 'orange',
bg: 'orange.50',
borderColor: 'orange.400',
iconColor: 'orange.500',
},
info: {
icon: MdInfo,
colorScheme: 'blue',
bg: 'blue.50',
borderColor: 'blue.400',
iconColor: 'blue.500',
},
};
import {
NOTIFICATION_TYPE_CONFIGS,
NOTIFICATION_TYPES,
PRIORITY_CONFIGS,
NOTIFICATION_CONFIG,
formatNotificationTime,
} from '../../constants/notificationTypes';
/**
* 单个通知项组件
*/
const NotificationItem = ({ notification, onClose, isNewest = false }) => {
const { id, severity = 'info', title, message } = notification;
const style = NOTIFICATION_STYLES[severity] || NOTIFICATION_STYLES.info;
const navigate = useNavigate();
const { id, type, priority, title, content, isAIGenerated, clickable, link, author, publishTime, pushTime, extra } = notification;
const bgColor = useColorModeValue(style.bg, `${style.colorScheme}.900`);
const borderColor = useColorModeValue(style.borderColor, `${style.colorScheme}.500`);
// 严格判断可点击性：只有 clickable=true 且 link 存在才可点击
const isActuallyClickable = clickable && link;
// 判断是否为预测通知
const isPrediction = extra?.isPrediction;
// 获取类型配置
let typeConfig = NOTIFICATION_TYPE_CONFIGS[type] || NOTIFICATION_TYPE_CONFIGS[NOTIFICATION_TYPES.EVENT_ALERT];
// 股票动向需要根据涨跌动态配置
if (type === NOTIFICATION_TYPES.STOCK_ALERT && extra?.priceChange) {
const priceChange = extra.priceChange;
typeConfig = {
...typeConfig,
icon: typeConfig.getIcon(priceChange),
colorScheme: typeConfig.getColorScheme(priceChange),
bg: typeConfig.getBg(priceChange),
borderColor: typeConfig.getBorderColor(priceChange),
iconColor: typeConfig.getIconColor(priceChange),
hoverBg: typeConfig.getHoverBg(priceChange),
};
}
// 获取优先级配置
const priorityConfig = PRIORITY_CONFIGS[priority] || PRIORITY_CONFIGS.normal;
const bgColor = useColorModeValue(typeConfig.bg, `${typeConfig.colorScheme}.900`);
const borderColor = useColorModeValue(typeConfig.borderColor, `${typeConfig.colorScheme}.500`);
const textColor = useColorModeValue('gray.800', 'white');
const subTextColor = useColorModeValue('gray.600', 'gray.300');
const metaTextColor = useColorModeValue('gray.500', 'gray.400');
const hoverBg = typeConfig.hoverBg;
const closeButtonHoverBg = useColorModeValue(`${typeConfig.colorScheme}.200`, `${typeConfig.colorScheme}.700`);
// 点击处理（只有真正可点击时才执行）
const handleClick = () => {
if (isActuallyClickable) {
navigate(link);
}
};
return (
<ScaleFade initialScale={0.9} in={true}>
@@ -69,72 +83,160 @@ const NotificationItem = ({ notification, onClose, isNewest = false }) => {
borderLeft="4px solid"
borderColor={borderColor}
borderRadius="md"
boxShadow={isNewest ? '2xl' : 'lg'} // 最新消息更强的阴影
boxShadow={isNewest ? '2xl' : 'lg'}
p={4}
minW="350px"
maxW="450px"
w="400px" // 统一宽度
position="relative"
_hover={{
cursor={isActuallyClickable ? 'pointer' : 'default'} // 严格判断
onClick={isActuallyClickable ? handleClick : undefined} // 严格判断
_hover={isActuallyClickable ? {
boxShadow: 'xl',
transform: 'translateX(-4px)',
}}
transform: 'translateY(-2px)',
bg: hoverBg,
} : {}} // 不可点击时无 hover 效果
transition="all 0.2s"
// 最新消息添加微妙的高亮边框
{...(isNewest && {
borderRight: '1px solid',
borderRightColor: borderColor,
borderTop: '1px solid',
borderTopColor: useColorModeValue(`${style.colorScheme}.100`, `${style.colorScheme}.700`),
borderTopColor: useColorModeValue(`${typeConfig.colorScheme}.100`, `${typeConfig.colorScheme}.700`),
})}
>
<HStack spacing={3} align="start">
{/* 图标 */}
{/* 头部区域：图标 + 标题 + 优先级 + AI标识 */}
<HStack spacing={2} align="start" mb={2}>
{/* 类型图标 */}
<Icon
as={style.icon}
w={6}
h={6}
color={style.iconColor}
as={typeConfig.icon}
w={5}
h={5}
color={typeConfig.iconColor}
mt={0.5}
flexShrink={0}
/>
{/* 内容 */}
<VStack align="start" spacing={1} flex={1} mr={6}>
<Text
fontSize="md"
fontWeight="bold"
color={textColor}
lineHeight="short"
{/* 标题 */}
<Text
fontSize="sm"
fontWeight="bold"
color={textColor}
lineHeight="short"
flex={1}
noOfLines={2}
>
{title}
</Text>
{/* 优先级标签 */}
{priorityConfig.show && (
<Badge
colorScheme={priorityConfig.colorScheme}
size="sm"
flexShrink={0}
>
{title}
</Text>
{message && (
<Text
fontSize="sm"
color={subTextColor}
lineHeight="short"
>
{message}
</Text>
)}
</VStack>
{priorityConfig.label}
</Badge>
)}
{/* 预测标识 */}
{isPrediction && (
<Badge
colorScheme="gray"
size="sm"
flexShrink={0}
>
预测
</Badge>
)}
{/* AI 生成标识 */}
{isAIGenerated && (
<Badge
colorScheme="purple"
size="sm"
flexShrink={0}
>
AI
</Badge>
)}
{/* 关闭按钮 */}
<IconButton
icon={<MdClose />}
size="sm"
size="xs"
variant="ghost"
colorScheme={style.colorScheme}
colorScheme={typeConfig.colorScheme}
aria-label="关闭通知"
onClick={() => onClose(id)}
position="absolute"
top={2}
right={2}
onClick={(e) => {
e.stopPropagation();
onClose(id);
}}
flexShrink={0}
_hover={{
bg: useColorModeValue(`${style.colorScheme}.100`, `${style.colorScheme}.800`),
bg: closeButtonHoverBg,
}}
/>
</HStack>
{/* 内容区域 */}
<Text
fontSize="sm"
color={subTextColor}
lineHeight="short"
noOfLines={3}
mb={3}
pl={7} // 与图标对齐
>
{content}
</Text>
{/* 底部元数据区域 */}
<HStack
spacing={2}
fontSize="xs"
color={metaTextColor}
pl={7} // 与图标对齐
flexWrap="wrap"
>
{/* 作者信息（仅分析报告） */}
{author && (
<HStack spacing={1}>
<Text>👤</Text>
<Text>{author.name} - {author.organization}</Text>
<Text>|</Text>
</HStack>
)}
{/* 时间信息 */}
<HStack spacing={1}>
<Text>📅</Text>
<Text>
{publishTime && formatNotificationTime(publishTime)}
{!publishTime && pushTime && formatNotificationTime(pushTime)}
</Text>
</HStack>
{/* 状态提示（仅预测通知） */}
{extra?.statusHint && (
<>
<Text>|</Text>
<HStack spacing={1} color="gray.400">
<Icon as={MdSchedule} w={3} h={3} />
<Text>{extra.statusHint}</Text>
</HStack>
</>
)}
{/* 可点击提示（仅真正可点击的通知） */}
{isActuallyClickable && (
<>
<Text>|</Text>
<HStack spacing={1}>
<Icon as={MdOpenInNew} w={3} h={3} />
<Text>查看详情</Text>
</HStack>
</>
)}
</HStack>
</Box>
</ScaleFade>
);
@@ -145,12 +247,24 @@ const NotificationItem = ({ notification, onClose, isNewest = false }) => {
*/
const NotificationContainer = () => {
const { notifications, removeNotification } = useNotification();
const [isExpanded, setIsExpanded] = useState(false);
// 如果没有通知，不渲染
if (notifications.length === 0) {
return null;
}
// 根据展开状态决定显示的通知
const maxVisible = NOTIFICATION_CONFIG.maxVisible;
const hasMore = notifications.length > maxVisible;
const visibleNotifications = isExpanded ? notifications : notifications.slice(0, maxVisible);
const hiddenCount = notifications.length - maxVisible;
// 颜色配置
const collapseBg = useColorModeValue('gray.100', 'gray.700');
const collapseHoverBg = useColorModeValue('gray.200', 'gray.600');
const collapseTextColor = useColorModeValue('gray.700', 'gray.200');
return (
<Box
position="fixed"
@@ -164,10 +278,10 @@ const NotificationContainer = () => {
align="flex-end"
pointerEvents="auto"
>
{notifications.map((notification, index) => (
{visibleNotifications.map((notification, index) => (
<Slide
key={notification.id}
direction="right"
direction="bottom"
in={true}
style={{
position: 'relative',
@@ -181,6 +295,28 @@ const NotificationContainer = () => {
/>
</Slide>
))}
{/* 折叠/展开按钮 */}
{hasMore && (
<ScaleFade initialScale={0.9} in={true}>
<Button
size="sm"
variant="solid"
bg={collapseBg}
color={collapseTextColor}
_hover={{ bg: collapseHoverBg }}
leftIcon={<Icon as={isExpanded ? MdExpandLess : MdExpandMore} />}
onClick={() => setIsExpanded(!isExpanded)}
boxShadow="md"
borderRadius="md"
>
{isExpanded
? '收起通知'
: NOTIFICATION_CONFIG.collapse.textTemplate.replace('{count}', hiddenCount)
}
</Button>
</ScaleFade>
)}
</VStack>
</Box>
);

486
src/components/NotificationTestTool/index.js
View File

@@ -1,7 +1,7 @@
// src/components/NotificationTestTool/index.js
/**
* 通知测试工具 - 仅在开发环境显示
* 用于手动测试通知功能
* 金融资讯通知测试工具 - 仅在开发环境显示
* 用于手动测试4种通知类型
*/
import React, { useState } from 'react';
@@ -15,87 +15,299 @@ import {
Collapse,
useDisclosure,
Badge,
Divider,
} from '@chakra-ui/react';
import { MdNotifications, MdClose, MdVolumeOff, MdVolumeUp } from 'react-icons/md';
import { MdNotifications, MdClose, MdVolumeOff, MdVolumeUp, MdCampaign, MdTrendingUp, MdArticle, MdAssessment } from 'react-icons/md';
import { useNotification } from '../../contexts/NotificationContext';
import { SOCKET_TYPE } from '../../services/socket';
import { NOTIFICATION_TYPES, PRIORITY_LEVELS } from '../../constants/notificationTypes';
const NotificationTestTool = () => {
const { isOpen, onToggle } = useDisclosure();
const { addNotification, soundEnabled, toggleSound, isConnected, clearAllNotifications, notifications } = useNotification();
const { addNotification, soundEnabled, toggleSound, isConnected, clearAllNotifications, notifications, browserPermission, requestBrowserPermission } = useNotification();
const [testCount, setTestCount] = useState(0);
// 浏览器权限状态标签
const getPermissionLabel = () => {
switch (browserPermission) {
case 'granted':
return '已授权';
case 'denied':
return '已拒绝';
case 'default':
return '未授权';
default:
return '不支持';
}
};
const getPermissionColor = () => {
switch (browserPermission) {
case 'granted':
return 'green';
case 'denied':
return 'red';
case 'default':
return 'gray';
default:
return 'gray';
}
};
// 请求浏览器权限
const handleRequestPermission = async () => {
await requestBrowserPermission();
};
// 只在开发环境显示
if (process.env.NODE_ENV !== 'development') {
return null;
}
const testNotifications = [
{
severity: 'success',
title: '买入成功',
message: '您的订单已成功执行：买入 贵州茅台(600519) 100股',
},
{
severity: 'error',
title: '委托失败',
message: '卖出订单失败：资金不足',
},
{
severity: 'warning',
title: '价格预警',
message: '您关注的股票已触达预设价格',
},
{
severity: 'info',
title: '持仓提醒',
message: '您持有的股票今日涨幅达 5.2%',
},
];
const handleTestNotification = (index) => {
const notif = testNotifications[index];
// 公告通知测试数据
const testAnnouncement = () => {
addNotification({
...notif,
type: 'trade_alert',
autoClose: 8000,
type: NOTIFICATION_TYPES.ANNOUNCEMENT,
priority: PRIORITY_LEVELS.IMPORTANT,
title: '【测试】贵州茅台发布2024年度财报公告',
content: '2024年度营收同比增长15.2%，净利润创历史新高，董事会建议每10股派息180元',
publishTime: Date.now(),
pushTime: Date.now(),
isAIGenerated: false,
clickable: true,
link: '/event-detail/test001',
extra: {
announcementType: '财报',
companyCode: '600519',
companyName: '贵州茅台',
},
autoClose: 10000,
});
setTestCount(prev => prev + 1);
};
const handleMultipleNotifications = () => {
testNotifications.forEach((notif, index) => {
setTimeout(() => {
addNotification({
...notif,
type: 'trade_alert',
autoClose: 10000,
});
}, index * 600);
// 股票动向测试数据（涨）
const testStockAlertUp = () => {
addNotification({
type: NOTIFICATION_TYPES.STOCK_ALERT,
priority: PRIORITY_LEVELS.URGENT,
title: '【测试】您关注的股票触发预警',
content: '宁德时代(300750) 当前价格 ¥245.50，盘中涨幅达 +5.2%，已触达您设置的目标价位',
publishTime: Date.now(),
pushTime: Date.now(),
isAIGenerated: false,
clickable: true,
link: '/stock-overview?code=300750',
extra: {
stockCode: '300750',
stockName: '宁德时代',
priceChange: '+5.2%',
currentPrice: '245.50',
},
autoClose: 10000,
});
setTestCount(prev => prev + testNotifications.length);
setTestCount(prev => prev + 1);
};
const handleMaxLimitTest = () => {
// 测试最大限制：快速发送6条，验证只保留最新5条
for (let i = 1; i <= 6; i++) {
// 股票动向测试数据（跌）
const testStockAlertDown = () => {
addNotification({
type: NOTIFICATION_TYPES.STOCK_ALERT,
priority: PRIORITY_LEVELS.IMPORTANT,
title: '【测试】您关注的股票异常波动',
content: '比亚迪(002594) 5分钟内跌幅达 -3.8%，当前价格 ¥198.20，建议关注',
publishTime: Date.now(),
pushTime: Date.now(),
isAIGenerated: false,
clickable: true,
link: '/stock-overview?code=002594',
extra: {
stockCode: '002594',
stockName: '比亚迪',
priceChange: '-3.8%',
currentPrice: '198.20',
},
autoClose: 10000,
});
setTestCount(prev => prev + 1);
};
// 事件动向测试数据
const testEventAlert = () => {
addNotification({
type: NOTIFICATION_TYPES.EVENT_ALERT,
priority: PRIORITY_LEVELS.IMPORTANT,
title: '【测试】央行宣布降准0.5个百分点',
content: '中国人民银行宣布下调金融机构存款准备金率0.5个百分点，释放长期资金约1万亿元，利好股市',
publishTime: Date.now(),
pushTime: Date.now(),
isAIGenerated: false,
clickable: true,
link: '/event-detail/test003',
extra: {
eventId: 'test003',
relatedStocks: 12,
impactLevel: '重大利好',
},
autoClose: 12000,
});
setTestCount(prev => prev + 1);
};
// 分析报告测试数据（非AI）
const testAnalysisReport = () => {
addNotification({
type: NOTIFICATION_TYPES.ANALYSIS_REPORT,
priority: PRIORITY_LEVELS.IMPORTANT,
title: '【测试】医药行业深度报告：创新药迎来政策拐点',
content: 'CXO板块持续受益于全球创新药研发外包需求，建议关注药明康德、凯莱英等龙头企业',
publishTime: Date.now(),
pushTime: Date.now(),
author: {
name: '李明',
organization: '中信证券',
},
isAIGenerated: false,
clickable: true,
link: '/forecast-report?id=test004',
extra: {
reportType: '行业研报',
industry: '医药',
},
autoClose: 12000,
});
setTestCount(prev => prev + 1);
};
// AI分析报告测试数据
const testAIReport = () => {
addNotification({
type: NOTIFICATION_TYPES.ANALYSIS_REPORT,
priority: PRIORITY_LEVELS.NORMAL,
title: '【测试】AI产业链投资机会分析',
content: '随着大模型应用加速落地，算力、数据、应用三大方向均存在投资机会，重点关注海光信息、寒武纪',
publishTime: Date.now(),
pushTime: Date.now(),
author: {
name: 'AI分析师',
organization: '价值前沿',
},
isAIGenerated: true,
clickable: true,
link: '/forecast-report?id=test005',
extra: {
reportType: '策略报告',
industry: '人工智能',
},
autoClose: 12000,
});
setTestCount(prev => prev + 1);
};
// 预测通知测试数据（不可跳转）
const testPrediction = () => {
addNotification({
type: NOTIFICATION_TYPES.EVENT_ALERT,
priority: PRIORITY_LEVELS.NORMAL,
title: '【测试】【预测】央行可能宣布降准政策',
content: '基于最新宏观数据分析，预计央行将在本周宣布降准0.5个百分点，释放长期资金',
publishTime: Date.now(),
pushTime: Date.now(),
isAIGenerated: true,
clickable: false, // ❌ 不可点击
link: null,
extra: {
isPrediction: true,
statusHint: '详细报告生成中...',
},
autoClose: 15000,
});
setTestCount(prev => prev + 1);
};
// 预测→详情流程测试（先推预测，5秒后推详情）
const testPredictionFlow = () => {
// 阶段 1: 推送预测
addNotification({
type: NOTIFICATION_TYPES.EVENT_ALERT,
priority: PRIORITY_LEVELS.NORMAL,
title: '【测试】【预测】新能源汽车补贴政策将延期',
content: '根据政策趋势分析，预计财政部将宣布新能源汽车购置补贴政策延长至2025年底',
publishTime: Date.now(),
pushTime: Date.now(),
isAIGenerated: true,
clickable: false,
link: null,
extra: {
isPrediction: true,
statusHint: '详细报告生成中...',
relatedPredictionId: 'pred_test_001',
},
autoClose: 15000,
});
setTestCount(prev => prev + 1);
// 阶段 2: 5秒后推送详情
setTimeout(() => {
addNotification({
type: NOTIFICATION_TYPES.EVENT_ALERT,
priority: PRIORITY_LEVELS.IMPORTANT,
title: '【测试】新能源汽车补贴政策延期至2025年底',
content: '财政部宣布新能源汽车购置补贴政策延长至2025年底，涉及比亚迪、理想汽车等5家龙头企业',
publishTime: Date.now(),
pushTime: Date.now(),
isAIGenerated: false,
clickable: true, // ✅ 可点击
link: '/event-detail/test_pred_001',
extra: {
isPrediction: false,
relatedPredictionId: 'pred_test_001',
eventId: 'test_pred_001',
relatedStocks: 5,
impactLevel: '重大利好',
},
autoClose: 12000,
});
setTestCount(prev => prev + 1);
}, 5000);
};
// 测试全部类型（层叠效果）
const testAllTypes = () => {
const tests = [testAnnouncement, testStockAlertUp, testEventAlert, testAnalysisReport];
tests.forEach((test, index) => {
setTimeout(() => test(), index * 600);
});
};
// 测试优先级
const testPriority = () => {
[
{ priority: PRIORITY_LEVELS.URGENT, label: '紧急' },
{ priority: PRIORITY_LEVELS.IMPORTANT, label: '重要' },
{ priority: PRIORITY_LEVELS.NORMAL, label: '普通' },
].forEach((item, index) => {
setTimeout(() => {
addNotification({
severity: i % 2 === 0 ? 'success' : 'info',
title: `测试消息 #${i}`,
message: `这是第 ${i} 条测试消息（共6条，应只保留最新5条）`,
type: 'trade_alert',
autoClose: 12000,
type: NOTIFICATION_TYPES.ANNOUNCEMENT,
priority: item.priority,
title: `【测试】${item.label}优先级通知`,
content: `这是一条${item.label}优先级的测试通知，用于验证优先级标签显示`,
publishTime: Date.now(),
pushTime: Date.now(),
isAIGenerated: false,
clickable: false,
autoClose: 10000,
});
}, i * 400);
}
setTestCount(prev => prev + 6);
setTestCount(prev => prev + 1);
}, index * 600);
});
};
return (
<Box
position="fixed"
top={4}
top="316px"
right={4}
zIndex={9998}
bg="white"
@@ -114,7 +326,7 @@ const NotificationTestTool = () => {
>
<MdNotifications size={20} />
<Text fontSize="sm" fontWeight="bold">
通知测试工具
金融资讯测试工具
</Text>
<Badge colorScheme={isConnected ? 'green' : 'red'} ml="auto">
{isConnected ? 'Connected' : 'Disconnected'}
@@ -122,6 +334,9 @@ const NotificationTestTool = () => {
<Badge colorScheme="purple">
{SOCKET_TYPE}
</Badge>
<Badge colorScheme={getPermissionColor()}>
浏览器: {getPermissionLabel()}
</Badge>
<IconButton
icon={isOpen ? <MdClose /> : <MdNotifications />}
size="xs"
@@ -133,60 +348,151 @@ const NotificationTestTool = () => {
{/* 工具面板 */}
<Collapse in={isOpen} animateOpacity>
<VStack p={4} spacing={3} align="stretch" minW="250px">
<Text fontSize="xs" color="gray.600">
点击按钮测试不同类型的通知
<VStack p={4} spacing={3} align="stretch" minW="280px">
<Text fontSize="xs" color="gray.600" fontWeight="bold">
通知类型测试
</Text>
{/* 测试按钮 */}
<Button
size="sm"
colorScheme="green"
onClick={() => handleTestNotification(0)}
>
成功通知
</Button>
<Button
size="sm"
colorScheme="red"
onClick={() => handleTestNotification(1)}
>
错误通知
</Button>
<Button
size="sm"
colorScheme="orange"
onClick={() => handleTestNotification(2)}
>
警告通知
</Button>
{/* 公告通知 */}
<Button
size="sm"
colorScheme="blue"
onClick={() => handleTestNotification(3)}
leftIcon={<MdCampaign />}
onClick={testAnnouncement}
>
信息通知
公告通知
</Button>
{/* 股票动向 */}
<HStack spacing={2}>
<Button
size="sm"
colorScheme="red"
leftIcon={<MdTrendingUp />}
onClick={testStockAlertUp}
flex={1}
>
股票上涨
</Button>
<Button
size="sm"
colorScheme="green"
leftIcon={<MdTrendingUp style={{ transform: 'rotate(180deg)' }} />}
onClick={testStockAlertDown}
flex={1}
>
股票下跌
</Button>
</HStack>
{/* 事件动向 */}
<Button
size="sm"
colorScheme="purple"
onClick={handleMultipleNotifications}
colorScheme="orange"
leftIcon={<MdArticle />}
onClick={testEventAlert}
>
层叠通知（4条）
事件动向
</Button>
{/* 分析报告 */}
<HStack spacing={2}>
<Button
size="sm"
colorScheme="purple"
leftIcon={<MdAssessment />}
onClick={testAnalysisReport}
flex={1}
>
分析报告
</Button>
<Badge colorScheme="purple" alignSelf="center">AI</Badge>
<Button
size="sm"
colorScheme="purple"
variant="outline"
onClick={testAIReport}
flex={1}
>
AI报告
</Button>
</HStack>
{/* 预测通知 */}
<Button
size="sm"
colorScheme="gray"
leftIcon={<MdArticle />}
onClick={testPrediction}
>
预测通知（不可跳转）
</Button>
<Divider />
<Text fontSize="xs" color="gray.600" fontWeight="bold">
组合测试
</Text>
{/* 层叠测试 */}
<Button
size="sm"
colorScheme="teal"
onClick={testAllTypes}
>
层叠测试（4种类型）
</Button>
{/* 优先级测试 */}
<Button
size="sm"
colorScheme="pink"
onClick={handleMaxLimitTest}
onClick={testPriority}
>
测试最大限制（6条→5条）
优先级测试（3个级别）
</Button>
{/* 预测→详情流程测试 */}
<Button
size="sm"
colorScheme="cyan"
onClick={testPredictionFlow}
>
预测→详情流程（5秒延迟）
</Button>
<Divider />
<Text fontSize="xs" color="gray.600" fontWeight="bold">
浏览器通知
</Text>
{/* 请求权限按钮 */}
{browserPermission !== 'granted' && (
<Button
size="sm"
colorScheme={browserPermission === 'denied' ? 'red' : 'blue'}
onClick={handleRequestPermission}
isDisabled={browserPermission === 'denied'}
>
{browserPermission === 'denied' ? '权限已拒绝' : '请求浏览器权限'}
</Button>
)}
{/* 浏览器通知状态说明 */}
{browserPermission === 'granted' && (
<Text fontSize="xs" color="green.500">
✅ 浏览器通知已启用
</Text>
)}
{browserPermission === 'denied' && (
<Text fontSize="xs" color="red.500">
❌ 请在浏览器设置中允许通知
</Text>
)}
<Divider />
{/* 功能按钮 */}
<HStack spacing={2}>
<Button

40
src/components/Subscription/SubscriptionButton.js
View File

@@ -17,26 +17,28 @@ export default function SubscriptionButton({ subscriptionInfo, onClick }) {
const getButtonStyles = () => {
if (subscriptionInfo.type === 'max') {
return {
bg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
color: 'white',
bg: 'transparent',
color: '#3182CE',
icon: '👑',
label: 'Max',
shadow: '0 4px 12px rgba(118, 75, 162, 0.4)',
hoverShadow: '0 6px 16px rgba(118, 75, 162, 0.5)',
border: 'none',
accentColor: '#764ba2',
shadow: 'none',
hoverShadow: '0 2px 8px rgba(49, 130, 206, 0.2)',
border: '1.5px solid',
borderColor: '#4299E1',
accentColor: '#3182CE',
};
}
if (subscriptionInfo.type === 'pro') {
return {
bg: 'linear-gradient(135deg, #667eea 0%, #3182CE 100%)',
color: 'white',
bg: 'transparent',
color: '#667eea',
icon: '💎',
label: 'Pro',
shadow: '0 4px 12px rgba(49, 130, 206, 0.4)',
hoverShadow: '0 6px 16px rgba(49, 130, 206, 0.5)',
border: 'none',
accentColor: '#3182CE',
shadow: 'none',
hoverShadow: '0 2px 8px rgba(102, 126, 234, 0.2)',
border: '1.5px solid',
borderColor: '#667eea',
accentColor: '#667eea',
};
}
// 基础版
@@ -168,11 +170,11 @@ export default function SubscriptionButton({ subscriptionInfo, onClick }) {
<Box
as="button"
onClick={onClick}
px={3}
py={2}
minW="60px"
h="40px"
borderRadius="lg"
px={2}
py={1}
w="70px"
h="32px"
borderRadius="md"
bg={styles.bg}
color={styles.color}
border={styles.border}
@@ -184,7 +186,7 @@ export default function SubscriptionButton({ subscriptionInfo, onClick }) {
alignItems="center"
justifyContent="center"
_hover={{
transform: 'translateY(-2px)',
transform: 'translateY(-1px)',
boxShadow: styles.hoverShadow,
}}
_active={{
@@ -192,7 +194,7 @@ export default function SubscriptionButton({ subscriptionInfo, onClick }) {
}}
>
<Text fontSize="sm" fontWeight="600" lineHeight="1">
{styles.icon} {styles.label}
<Text as="span" fontSize="md">{styles.icon}</Text> {styles.label}
</Text>
</Box>
</Tooltip>

181
src/constants/notificationTypes.js Normal file
View File

@@ -0,0 +1,181 @@
// src/constants/notificationTypes.js
/**
* 金融资讯通知系统 - 类型定义和常量
*/
import { MdCampaign, MdTrendingUp, MdTrendingDown, MdArticle, MdAssessment } from 'react-icons/md';
// 通知类型
export const NOTIFICATION_TYPES = {
ANNOUNCEMENT: 'announcement', // 公告通知
STOCK_ALERT: 'stock_alert', // 股票动向
EVENT_ALERT: 'event_alert', // 事件动向
ANALYSIS_REPORT: 'analysis_report', // 分析报告
};
// 优先级
export const PRIORITY_LEVELS = {
URGENT: 'urgent', // 紧急
IMPORTANT: 'important', // 重要
NORMAL: 'normal', // 普通
};
// 通知状态（用于预测通知）
export const NOTIFICATION_STATUS = {
PREDICTION: 'prediction', // 预测状态（详情未就绪）
READY: 'ready', // 详情已就绪
};
// 通知系统配置
export const NOTIFICATION_CONFIG = {
// 显示策略
maxVisible: 3, // 最多显示3条通知
maxHistory: 15, // 历史保留15条（折叠区）
// 自动关闭时长（毫秒）- 按优先级区分
autoCloseDuration: {
[PRIORITY_LEVELS.URGENT]: 0, // 紧急：不自动关闭
[PRIORITY_LEVELS.IMPORTANT]: 30000, // 重要：30秒
[PRIORITY_LEVELS.NORMAL]: 15000, // 普通：15秒
},
// 推送频率配置（测试模式）
mockPush: {
interval: 60000, // 60秒推送一次
minBatch: 1, // 最少1条
maxBatch: 2, // 最多2条
},
// 折叠配置
collapse: {
threshold: 3, // 超过3条开始折叠
textTemplate: '还有 {count} 条通知', // 折叠提示文案
},
};
// 优先级标签配置
export const PRIORITY_CONFIGS = {
[PRIORITY_LEVELS.URGENT]: {
label: '紧急',
colorScheme: 'red',
show: true,
},
[PRIORITY_LEVELS.IMPORTANT]: {
label: '重要',
colorScheme: 'orange',
show: true,
},
[PRIORITY_LEVELS.NORMAL]: {
label: '',
colorScheme: 'gray',
show: false, // 普通优先级不显示标签
},
};
// 通知类型样式配置
export const NOTIFICATION_TYPE_CONFIGS = {
[NOTIFICATION_TYPES.ANNOUNCEMENT]: {
name: '公告通知',
icon: MdCampaign,
colorScheme: 'blue',
bg: 'blue.50',
borderColor: 'blue.400',
iconColor: 'blue.500',
hoverBg: 'blue.100',
},
[NOTIFICATION_TYPES.STOCK_ALERT]: {
name: '股票动向',
// 图标根据涨跌动态设置
getIcon: (priceChange) => {
if (!priceChange) return MdTrendingUp;
return priceChange.startsWith('+') ? MdTrendingUp : MdTrendingDown;
},
// 颜色根据涨跌动态设置
getColorScheme: (priceChange) => {
if (!priceChange) return 'red';
return priceChange.startsWith('+') ? 'red' : 'green';
},
getBg: (priceChange) => {
const scheme = NOTIFICATION_TYPE_CONFIGS[NOTIFICATION_TYPES.STOCK_ALERT].getColorScheme(priceChange);
return `${scheme}.50`;
},
getBorderColor: (priceChange) => {
const scheme = NOTIFICATION_TYPE_CONFIGS[NOTIFICATION_TYPES.STOCK_ALERT].getColorScheme(priceChange);
return `${scheme}.400`;
},
getIconColor: (priceChange) => {
const scheme = NOTIFICATION_TYPE_CONFIGS[NOTIFICATION_TYPES.STOCK_ALERT].getColorScheme(priceChange);
return `${scheme}.500`;
},
getHoverBg: (priceChange) => {
const scheme = NOTIFICATION_TYPE_CONFIGS[NOTIFICATION_TYPES.STOCK_ALERT].getColorScheme(priceChange);
return `${scheme}.100`;
},
},
[NOTIFICATION_TYPES.EVENT_ALERT]: {
name: '事件动向',
icon: MdArticle,
colorScheme: 'orange',
bg: 'orange.50',
borderColor: 'orange.400',
iconColor: 'orange.500',
hoverBg: 'orange.100',
},
[NOTIFICATION_TYPES.ANALYSIS_REPORT]: {
name: '分析报告',
icon: MdAssessment,
colorScheme: 'purple',
bg: 'purple.50',
borderColor: 'purple.400',
iconColor: 'purple.500',
hoverBg: 'purple.100',
},
};
// 时间格式化辅助函数
export const formatNotificationTime = (timestamp) => {
const date = new Date(timestamp);
const now = new Date();
const diff = now - date;
// 小于1分钟
if (diff < 60000) {
return '刚刚';
}
// 小于1小时
if (diff < 3600000) {
return `${Math.floor(diff / 60000)}分钟前`;
}
// 小于24小时
if (diff < 86400000) {
return `${Math.floor(diff / 3600000)}小时前`;
}
// 今天
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const dateDay = new Date(date.getFullYear(), date.getMonth(), date.getDate());
if (dateDay.getTime() === today.getTime()) {
return `今天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
}
// 昨天
const yesterday = new Date(today);
yesterday.setDate(yesterday.getDate() - 1);
if (dateDay.getTime() === yesterday.getTime()) {
return `昨天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
}
// 其他
return `${date.getMonth() + 1}-${date.getDate()} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
};
export default {
NOTIFICATION_TYPES,
PRIORITY_LEVELS,
NOTIFICATION_STATUS,
PRIORITY_CONFIGS,
NOTIFICATION_TYPE_CONFIGS,
formatNotificationTime,
};

198
src/contexts/NotificationContext.js
View File

@@ -7,6 +7,8 @@ import React, { createContext, useContext, useState, useEffect, useCallback, use
import { logger } from '../utils/logger';
import socket, { SOCKET_TYPE } from '../services/socket';
import notificationSound from '../assets/sounds/notification.wav';
import { browserNotificationService } from '../services/browserNotificationService';
import { PRIORITY_LEVELS, NOTIFICATION_CONFIG } from '../constants/notificationTypes';
// 创建通知上下文
const NotificationContext = createContext();
@@ -25,6 +27,7 @@ export const NotificationProvider = ({ children }) => {
const [notifications, setNotifications] = useState([]);
const [isConnected, setIsConnected] = useState(false);
const [soundEnabled, setSoundEnabled] = useState(true);
const [browserPermission, setBrowserPermission] = useState(browserNotificationService.getPermissionStatus());
const audioRef = useRef(null);
// 初始化音频
@@ -57,54 +60,6 @@ export const NotificationProvider = ({ children }) => {
}
}, [soundEnabled]);
/**
* 添加通知到队列
* @param {object} notification - 通知对象
*/
const addNotification = useCallback((notification) => {
const newNotification = {
id: notification.id || `notif_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
type: notification.type || 'info',
severity: notification.severity || 'info',
title: notification.title || '通知',
message: notification.message || '',
timestamp: notification.timestamp || Date.now(),
autoClose: notification.autoClose !== undefined ? notification.autoClose : 8000,
...notification,
};
logger.info('NotificationContext', 'Adding notification', newNotification);
// 新消息插入到数组开头，最多保留5条
setNotifications(prev => {
const updated = [newNotification, ...prev];
const maxNotifications = 5;
// 如果超过最大数量，移除最旧的（数组末尾）
if (updated.length > maxNotifications) {
const removed = updated.slice(maxNotifications);
removed.forEach(old => {
logger.info('NotificationContext', 'Auto-removing old notification', { id: old.id });
});
return updated.slice(0, maxNotifications);
}
return updated;
});
// 播放音效
playNotificationSound();
// 自动关闭
if (newNotification.autoClose && newNotification.autoClose > 0) {
setTimeout(() => {
removeNotification(newNotification.id);
}, newNotification.autoClose);
}
return newNotification.id;
}, [playNotificationSound]);
/**
* 移除通知
* @param {string} id - 通知ID
@@ -133,6 +88,144 @@ export const NotificationProvider = ({ children }) => {
});
}, []);
/**
* 请求浏览器通知权限
*/
const requestBrowserPermission = useCallback(async () => {
logger.info('NotificationContext', 'Requesting browser notification permission');
const permission = await browserNotificationService.requestPermission();
setBrowserPermission(permission);
return permission;
}, []);
/**
* 发送浏览器通知
*/
const sendBrowserNotification = useCallback((notificationData) => {
if (browserPermission !== 'granted') {
logger.warn('NotificationContext', 'Browser permission not granted');
return;
}
const { priority, title, content, link, type } = notificationData;
// 生成唯一 tag
const tag = `${type}_${Date.now()}`;
// 判断是否需要用户交互（紧急通知不自动关闭）
const requireInteraction = priority === PRIORITY_LEVELS.URGENT;
// 发送浏览器通知
const notification = browserNotificationService.sendNotification({
title: title || '新通知',
body: content || '',
tag,
requireInteraction,
data: { link },
autoClose: requireInteraction ? 0 : 8000,
});
// 设置点击处理（聚焦窗口并跳转）
if (notification && link) {
notification.onclick = () => {
window.focus();
// 使用 window.location 跳转（不需要 React Router）
window.location.hash = link;
notification.close();
};
}
logger.info('NotificationContext', 'Browser notification sent', { title, tag });
}, [browserPermission]);
/**
* 添加网页通知（内部方法）
*/
const addWebNotification = useCallback((newNotification) => {
// 新消息插入到数组开头，最多保留 maxHistory 条
setNotifications(prev => {
const updated = [newNotification, ...prev];
const maxNotifications = NOTIFICATION_CONFIG.maxHistory;
// 如果超过最大数量，移除最旧的（数组末尾）
if (updated.length > maxNotifications) {
const removed = updated.slice(maxNotifications);
removed.forEach(old => {
logger.info('NotificationContext', 'Auto-removing old notification', { id: old.id });
});
return updated.slice(0, maxNotifications);
}
return updated;
});
// 播放音效
playNotificationSound();
// 自动关闭
if (newNotification.autoClose && newNotification.autoClose > 0) {
setTimeout(() => {
removeNotification(newNotification.id);
}, newNotification.autoClose);
}
}, [playNotificationSound, removeNotification]);
/**
* 添加通知到队列
* @param {object} notification - 通知对象
*/
const addNotification = useCallback((notification) => {
// 根据优先级获取自动关闭时长
const priority = notification.priority || PRIORITY_LEVELS.NORMAL;
const defaultAutoClose = NOTIFICATION_CONFIG.autoCloseDuration[priority];
const newNotification = {
id: notification.id || `notif_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
type: notification.type || 'info',
severity: notification.severity || 'info',
title: notification.title || '通知',
message: notification.message || '',
timestamp: notification.timestamp || Date.now(),
priority: priority,
autoClose: notification.autoClose !== undefined ? notification.autoClose : defaultAutoClose,
...notification,
};
logger.info('NotificationContext', 'Adding notification', newNotification);
const isPageHidden = document.hidden; // 页面是否在后台
// ========== 智能分发策略 ==========
// 策略 1: 紧急通知 - 双重保障（浏览器 + 网页）
if (priority === PRIORITY_LEVELS.URGENT) {
logger.info('NotificationContext', 'Urgent notification: sending browser + web');
// 总是发送浏览器通知
sendBrowserNotification(newNotification);
// 如果在前台，也显示网页通知
if (!isPageHidden) {
addWebNotification(newNotification);
}
}
// 策略 2: 重要通知 - 智能切换（后台=浏览器，前台=网页）
else if (priority === PRIORITY_LEVELS.IMPORTANT) {
if (isPageHidden) {
logger.info('NotificationContext', 'Important notification (background): sending browser');
sendBrowserNotification(newNotification);
} else {
logger.info('NotificationContext', 'Important notification (foreground): sending web');
addWebNotification(newNotification);
}
}
// 策略 3: 普通通知 - 仅网页通知
else {
logger.info('NotificationContext', 'Normal notification: sending web only');
addWebNotification(newNotification);
}
return newNotification.id;
}, [sendBrowserNotification, addWebNotification]);
// 连接到 Socket 服务
useEffect(() => {
logger.info('NotificationContext', 'Initializing socket connection...');
@@ -147,9 +240,10 @@ export const NotificationProvider = ({ children }) => {
// 如果使用 mock，可以启动定期推送
if (SOCKET_TYPE === 'MOCK') {
// 启动模拟推送：每20秒推送1-2条消息
socket.startMockPush(20000, 2);
logger.info('NotificationContext', 'Mock push started');
// 启动模拟推送：使用配置的间隔和数量
const { interval, maxBatch } = NOTIFICATION_CONFIG.mockPush;
socket.startMockPush(interval, maxBatch);
logger.info('NotificationContext', 'Mock push started', { interval, maxBatch });
}
});
@@ -191,10 +285,12 @@ export const NotificationProvider = ({ children }) => {
notifications,
isConnected,
soundEnabled,
browserPermission,
addNotification,
removeNotification,
clearAllNotifications,
toggleSound,
requestBrowserPermission,
};
return (

208
src/services/browserNotificationService.js Normal file
View File

@@ -0,0 +1,208 @@
// src/services/browserNotificationService.js
/**
* 浏览器原生通知服务
* 提供系统级通知功能（Web Notifications API）
*/
import { logger } from '../utils/logger';
class BrowserNotificationService {
constructor() {
this.permission = this.isSupported() ? Notification.permission : 'denied';
this.activeNotifications = new Map(); // 存储活跃的通知
}
/**
* 检查浏览器是否支持通知 API
*/
isSupported() {
return 'Notification' in window;
}
/**
* 获取当前权限状态
* @returns {string} 'granted' | 'denied' | 'default'
*/
getPermissionStatus() {
if (!this.isSupported()) {
return 'denied';
}
return Notification.permission;
}
/**
* 请求通知权限
* @returns {Promise<string>} 权限状态
*/
async requestPermission() {
if (!this.isSupported()) {
logger.warn('browserNotificationService', 'Notifications not supported');
return 'denied';
}
if (this.permission === 'granted') {
logger.info('browserNotificationService', 'Permission already granted');
return 'granted';
}
try {
const permission = await Notification.requestPermission();
this.permission = permission;
logger.info('browserNotificationService', `Permission ${permission}`);
return permission;
} catch (error) {
logger.error('browserNotificationService', 'requestPermission', error);
return 'denied';
}
}
/**
* 发送浏览器通知
* @param {Object} options 通知选项
* @param {string} options.title 标题
* @param {string} options.body 内容
* @param {string} options.icon 图标路径
* @param {string} options.tag 标签（防止重复）
* @param {boolean} options.requireInteraction 是否需要用户交互才关闭
* @param {Object} options.data 自定义数据（如跳转链接）
* @param {number} options.autoClose 自动关闭时间（毫秒）
* @returns {Notification|null} 通知对象
*/
sendNotification({
title,
body,
icon = '/logo192.png',
tag,
requireInteraction = false,
data = {},
autoClose = 0,
}) {
if (!this.isSupported()) {
logger.warn('browserNotificationService', 'Notifications not supported');
return null;
}
if (this.permission !== 'granted') {
logger.warn('browserNotificationService', 'Permission not granted');
return null;
}
try {
// 关闭相同 tag 的旧通知
if (tag && this.activeNotifications.has(tag)) {
const oldNotification = this.activeNotifications.get(tag);
oldNotification.close();
}
// 创建通知
const notification = new Notification(title, {
body,
icon,
badge: '/badge.png',
tag: tag || `notification_${Date.now()}`,
requireInteraction,
data,
silent: false, // 允许声音
});
// 存储通知引用
if (tag) {
this.activeNotifications.set(tag, notification);
}
// 自动关闭
if (autoClose > 0 && !requireInteraction) {
setTimeout(() => {
notification.close();
}, autoClose);
}
// 通知关闭时清理引用
notification.onclose = () => {
if (tag) {
this.activeNotifications.delete(tag);
}
};
logger.info('browserNotificationService', 'Notification sent', { title, tag });
return notification;
} catch (error) {
logger.error('browserNotificationService', 'sendNotification', error);
return null;
}
}
/**
* 设置通知点击处理
* @param {Notification} notification 通知对象
* @param {Function} navigate React Router navigate 函数
*/
setupClickHandler(notification, navigate) {
if (!notification) return;
notification.onclick = (event) => {
event.preventDefault();
// 聚焦窗口
window.focus();
// 跳转链接
if (notification.data?.link) {
navigate(notification.data.link);
}
// 关闭通知
notification.close();
logger.info('browserNotificationService', 'Notification clicked', notification.data);
};
}
/**
* 关闭所有活跃通知
*/
closeAll() {
this.activeNotifications.forEach(notification => {
notification.close();
});
this.activeNotifications.clear();
logger.info('browserNotificationService', 'All notifications closed');
}
/**
* 根据通知数据发送浏览器通知
* @param {Object} notificationData 通知数据
* @param {Function} navigate React Router navigate 函数
*/
sendFromNotificationData(notificationData, navigate) {
const { type, priority, title, content, link, extra } = notificationData;
// 生成唯一 tag
const tag = `${type}_${Date.now()}`;
// 判断是否需要用户交互（紧急通知不自动关闭）
const requireInteraction = priority === 'urgent';
// 发送通知
const notification = this.sendNotification({
title: title || '新通知',
body: content || '',
tag,
requireInteraction,
data: { link, ...extra },
autoClose: requireInteraction ? 0 : 8000, // 紧急通知不自动关闭
});
// 设置点击处理
if (notification && navigate) {
this.setupClickHandler(notification, navigate);
}
return notification;
}
}
// 导出单例
export const browserNotificationService = new BrowserNotificationService();
export default browserNotificationService;

324
src/services/mockSocketService.js
View File

@@ -1,61 +1,303 @@
// src/services/mockSocketService.js
/**
* Mock Socket 服务 - 用于开发环境模拟实时推送
* 模拟交易提醒、系统通知等实时消息推送
* 模拟金融资讯、事件动向、分析报告等实时消息推送
*/
import { logger } from '../utils/logger';
import { NOTIFICATION_TYPES, PRIORITY_LEVELS } from '../constants/notificationTypes';
// 模拟交易提醒数据
const mockTradeAlerts = [
// 模拟金融资讯数据
const mockFinancialNews = [
// ========== 公告通知 ==========
{
type: 'trade_alert',
severity: 'success',
title: '买入成功',
message: '您的订单已成功执行：买入 贵州茅台(600519) 100股，成交价 ¥1,850.00',
timestamp: Date.now(),
autoClose: 8000,
},
{
type: 'trade_alert',
severity: 'warning',
title: '价格预警',
message: '您关注的股票 比亚迪(002594) 当前价格 ¥245.50，已触达预设价格',
timestamp: Date.now(),
type: NOTIFICATION_TYPES.ANNOUNCEMENT,
priority: PRIORITY_LEVELS.IMPORTANT,
title: '贵州茅台发布2024年度财报公告',
content: '2024年度营收同比增长15.2%，净利润创历史新高，董事会建议每10股派息180元',
publishTime: new Date('2024-03-28T15:30:00').getTime(),
pushTime: Date.now(),
isAIGenerated: false,
clickable: true,
link: '/event-detail/ann001',
extra: {
announcementType: '财报',
companyCode: '600519',
companyName: '贵州茅台',
},
autoClose: 10000,
},
{
type: 'trade_alert',
severity: 'info',
title: '持仓提醒',
message: '您持有的 宁德时代(300750) 今日涨幅达 5.2%，当前盈利 +¥12,350',
timestamp: Date.now(),
autoClose: 8000,
},
{
type: 'trade_alert',
severity: 'error',
title: '委托失败',
message: '卖出订单失败：五粮液(000858) 当前处于停牌状态，无法交易',
timestamp: Date.now(),
type: NOTIFICATION_TYPES.ANNOUNCEMENT,
priority: PRIORITY_LEVELS.URGENT,
title: '宁德时代发布重大资产重组公告',
content: '公司拟收购某新能源材料公司100%股权，交易金额约120亿元，预计增厚业绩20%',
publishTime: new Date('2024-03-28T09:00:00').getTime(),
pushTime: Date.now(),
isAIGenerated: false,
clickable: true,
link: '/event-detail/ann002',
extra: {
announcementType: '重组',
companyCode: '300750',
companyName: '宁德时代',
},
autoClose: 12000,
},
{
type: 'system_notification',
severity: 'info',
title: '系统公告',
message: '市场将于15:00收盘，请注意及时调整持仓',
timestamp: Date.now(),
type: NOTIFICATION_TYPES.ANNOUNCEMENT,
priority: PRIORITY_LEVELS.NORMAL,
title: '中国平安发布分红派息公告',
content: '2023年度利润分配方案：每10股派发现金红利23.0元（含税），分红率达30.5%',
publishTime: new Date('2024-03-27T16:00:00').getTime(),
pushTime: Date.now(),
isAIGenerated: false,
clickable: true,
link: '/event-detail/ann003',
extra: {
announcementType: '分红',
companyCode: '601318',
companyName: '中国平安',
},
autoClose: 10000,
},
// ========== 股票动向 ==========
{
type: NOTIFICATION_TYPES.STOCK_ALERT,
priority: PRIORITY_LEVELS.URGENT,
title: '您关注的股票触发预警',
content: '宁德时代(300750) 当前价格 ¥245.50，盘中涨幅达 +5.2%，已触达您设置的目标价位',
publishTime: Date.now(),
pushTime: Date.now(),
isAIGenerated: false,
clickable: true,
link: '/stock-overview?code=300750',
extra: {
stockCode: '300750',
stockName: '宁德时代',
priceChange: '+5.2%',
currentPrice: '245.50',
triggerType: '目标价',
},
autoClose: 10000,
},
{
type: 'trade_alert',
severity: 'success',
title: '分红到账',
message: '您持有的 中国平安(601318) 分红已到账，金额 ¥560.00',
timestamp: Date.now(),
type: NOTIFICATION_TYPES.STOCK_ALERT,
priority: PRIORITY_LEVELS.IMPORTANT,
title: '您关注的股票异常波动',
content: '比亚迪(002594) 5分钟内跌幅达 -3.8%，当前价格 ¥198.20，建议关注',
publishTime: Date.now(),
pushTime: Date.now(),
isAIGenerated: false,
clickable: true,
link: '/stock-overview?code=002594',
extra: {
stockCode: '002594',
stockName: '比亚迪',
priceChange: '-3.8%',
currentPrice: '198.20',
triggerType: '异常波动',
},
autoClose: 10000,
},
{
type: NOTIFICATION_TYPES.STOCK_ALERT,
priority: PRIORITY_LEVELS.NORMAL,
title: '持仓股票表现',
content: '隆基绿能(601012) 今日表现优异，涨幅 +4.5%，您当前持仓浮盈 +¥8,200',
publishTime: Date.now(),
pushTime: Date.now(),
isAIGenerated: false,
clickable: true,
link: '/trading-simulation',
extra: {
stockCode: '601012',
stockName: '隆基绿能',
priceChange: '+4.5%',
profit: '+8200',
},
autoClose: 8000,
},
// ========== 事件动向 ==========
{
type: NOTIFICATION_TYPES.EVENT_ALERT,
priority: PRIORITY_LEVELS.IMPORTANT,
title: '央行宣布降准0.5个百分点',
content: '中国人民银行宣布下调金融机构存款准备金率0.5个百分点，释放长期资金约1万亿元，利好股市',
publishTime: new Date('2024-03-28T09:00:00').getTime(),
pushTime: Date.now(),
isAIGenerated: false,
clickable: true,
link: '/event-detail/evt001',
extra: {
eventId: 'evt001',
relatedStocks: 12,
impactLevel: '重大利好',
sectors: ['银行', '地产', '基建'],
},
autoClose: 12000,
},
{
type: NOTIFICATION_TYPES.EVENT_ALERT,
priority: PRIORITY_LEVELS.IMPORTANT,
title: '新能源汽车补贴政策延期',
content: '财政部宣布新能源汽车购置补贴政策延长至2024年底，涉及比亚迪、理想汽车等5家龙头企业',
publishTime: new Date('2024-03-28T10:30:00').getTime(),
pushTime: Date.now(),
isAIGenerated: false,
clickable: true,
link: '/event-detail/evt002',
extra: {
eventId: 'evt002',
relatedStocks: 5,
impactLevel: '重大利好',
sectors: ['新能源汽车'],
},
autoClose: 12000,
},
{
type: NOTIFICATION_TYPES.EVENT_ALERT,
priority: PRIORITY_LEVELS.NORMAL,
title: '芯片产业扶持政策出台',
content: '工信部发布《半导体产业发展指导意见》，未来三年投入500亿专项资金支持芯片研发',
publishTime: new Date('2024-03-27T14:00:00').getTime(),
pushTime: Date.now(),
isAIGenerated: false,
clickable: true,
link: '/event-detail/evt003',
extra: {
eventId: 'evt003',
relatedStocks: 8,
impactLevel: '中长期利好',
sectors: ['半导体', '芯片设计'],
},
autoClose: 10000,
},
// ========== 预测通知 ==========
{
type: NOTIFICATION_TYPES.EVENT_ALERT,
priority: PRIORITY_LEVELS.NORMAL,
title: '【预测】央行可能宣布降准政策',
content: '基于最新宏观数据分析，预计央行将在本周宣布降准0.5个百分点，释放长期资金',
publishTime: Date.now(),
pushTime: Date.now(),
isAIGenerated: true,
clickable: false, // ❌ 不可点击
link: null,
extra: {
isPrediction: true,
statusHint: '详细报告生成中...',
relatedPredictionId: 'pred_001',
},
autoClose: 15000,
},
{
type: NOTIFICATION_TYPES.EVENT_ALERT,
priority: PRIORITY_LEVELS.NORMAL,
title: '【预测】新能源补贴政策或将延期',
content: '根据政策趋势分析，财政部可能宣布新能源汽车购置补贴政策延长至2025年底',
publishTime: Date.now(),
pushTime: Date.now(),
isAIGenerated: true,
clickable: false, // ❌ 不可点击
link: null,
extra: {
isPrediction: true,
statusHint: '详细报告生成中...',
relatedPredictionId: 'pred_002',
},
autoClose: 15000,
},
// ========== 分析报告 ==========
{
type: NOTIFICATION_TYPES.ANALYSIS_REPORT,
priority: PRIORITY_LEVELS.IMPORTANT,
title: '医药行业深度报告：创新药迎来政策拐点',
content: 'CXO板块持续受益于全球创新药研发外包需求，建议关注药明康德、凯莱英等龙头企业',
publishTime: new Date('2024-03-28T08:00:00').getTime(),
pushTime: Date.now(),
author: {
name: '李明',
organization: '中信证券',
},
isAIGenerated: false,
clickable: true,
link: '/forecast-report?id=rpt001',
extra: {
reportType: '行业研报',
industry: '医药',
rating: '强烈推荐',
},
autoClose: 12000,
},
{
type: NOTIFICATION_TYPES.ANALYSIS_REPORT,
priority: PRIORITY_LEVELS.IMPORTANT,
title: 'AI产业链投资机会分析',
content: '随着大模型应用加速落地，算力、数据、应用三大方向均存在投资机会，重点关注海光信息、寒武纪',
publishTime: new Date('2024-03-28T07:30:00').getTime(),
pushTime: Date.now(),
author: {
name: '王芳',
organization: '招商证券',
},
isAIGenerated: true,
clickable: true,
link: '/forecast-report?id=rpt002',
extra: {
reportType: '策略报告',
industry: '人工智能',
rating: '推荐',
},
autoClose: 12000,
},
{
type: NOTIFICATION_TYPES.ANALYSIS_REPORT,
priority: PRIORITY_LEVELS.NORMAL,
title: '比亚迪：新能源汽车龙头业绩持续超预期',
content: '2024年销量目标400万辆，海外市场拓展顺利，维持"买入"评级，目标价280元',
publishTime: new Date('2024-03-27T09:00:00').getTime(),
pushTime: Date.now(),
author: {
name: '张伟',
organization: '国泰君安',
},
isAIGenerated: false,
clickable: true,
link: '/forecast-report?id=rpt003',
extra: {
reportType: '公司研报',
industry: '新能源汽车',
rating: '买入',
targetPrice: '280',
},
autoClose: 10000,
},
{
type: NOTIFICATION_TYPES.ANALYSIS_REPORT,
priority: PRIORITY_LEVELS.NORMAL,
title: '2024年A股市场展望：结构性行情延续',
content: 'AI应用、高端制造、自主可控三大主线贯穿全年，建议关注科技成长板块配置机会',
publishTime: new Date('2024-03-26T16:00:00').getTime(),
pushTime: Date.now(),
author: {
name: 'AI分析师',
organization: '价值前沿',
},
isAIGenerated: true,
clickable: true,
link: '/forecast-report?id=rpt004',
extra: {
reportType: '策略报告',
industry: '市场策略',
rating: '谨慎乐观',
},
autoClose: 10000,
},
];
class MockSocketService {
@@ -194,9 +436,9 @@ class MockSocketService {
for (let i = 0; i < count; i++) {
// 从模拟数据中随机选择一条
const randomIndex = Math.floor(Math.random() * mockTradeAlerts.length);
const randomIndex = Math.floor(Math.random() * mockFinancialNews.length);
const alert = {
...mockTradeAlerts[randomIndex],
...mockFinancialNews[randomIndex],
timestamp: Date.now(),
id: `mock_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
};