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

update pay ui

Browse Source
This commit is contained in:
zzlgreat
2025-12-10 12:06:13 +08:00
parent 45339902aa
commit 92458a8705
5 changed files with 532 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/views/StockOverview/components/FlexScreen/hooks/useRealtimeQuote.ts
View File

@@ -34,6 +34,8 @@ import type {
/**
* 处理上交所消息
* 注意：上交所返回的 code 不带后缀，但通过 msg.type 区分 'stock' 和 'index'
* 存储时使用带后缀的完整代码作为 key（如 000001.SH）
*/
const handleSSEMessage = (
msg: SSEMessage,
@@ -47,12 +49,16 @@ const handleSSEMessage = (
const data = msg.data || {};
const updated: QuotesMap = { ...prevQuotes };
let hasUpdate = false;
const isIndex = msg.type === 'index';
Object.entries(data).forEach(([code, quote]: [string, SSEQuoteItem]) => {
if (subscribedCodes.has(code)) {
// 生成带后缀的完整代码（上交所统一用 .SH）
const fullCode = code.includes('.') ? code : `${code}.SH`;
if (subscribedCodes.has(code) || subscribedCodes.has(fullCode)) {
hasUpdate = true;
updated[code] = {
code: quote.security_id,
updated[fullCode] = {
code: fullCode,
name: quote.security_name,
price: quote.last_price,
prevClose: quote.prev_close,
@@ -78,6 +84,8 @@ const handleSSEMessage = (
/**
* 处理深交所实时消息
* 注意：深交所返回的 security_id 可能带后缀也可能不带
* 存储时统一使用带后缀的完整代码作为 key（如 000001.SZ）
*/
const handleSZSERealtimeMessage = (
msg: SZSERealtimeMessage,
@@ -85,9 +93,11 @@ const handleSZSERealtimeMessage = (
prevQuotes: QuotesMap
): QuotesMap | null => {
const { category, data, timestamp } = msg;
const code = data.security_id;
const rawCode = data.security_id;
// 生成带后缀的完整代码（深交所统一用 .SZ）
const fullCode = rawCode.includes('.') ? rawCode : `${rawCode}.SZ`;
if (!subscribedCodes.has(code)) {
if (!subscribedCodes.has(rawCode) && !subscribedCodes.has(fullCode)) {
return null;
}
@@ -99,9 +109,9 @@ const handleSZSERealtimeMessage = (
const { prices: bidPrices, volumes: bidVolumes } = extractOrderBook(stockData.bids);
const { prices: askPrices, volumes: askVolumes } = extractOrderBook(stockData.asks);
updated[code] = {
code,
name: prevQuotes[code]?.name || '',
updated[fullCode] = {
code: fullCode,
name: prevQuotes[fullCode]?.name || '',
price: stockData.last_px,
prevClose: stockData.prev_close,
open: stockData.open_px,
@@ -127,9 +137,9 @@ const handleSZSERealtimeMessage = (
case 'index': {
const indexData = data as SZSEIndexData;
updated[code] = {
code,
name: prevQuotes[code]?.name || '',
updated[fullCode] = {
code: fullCode,
name: prevQuotes[fullCode]?.name || '',
price: indexData.current_index,
prevClose: indexData.prev_close,
open: indexData.open_index,
@@ -154,9 +164,9 @@ const handleSZSERealtimeMessage = (
case 'bond': {
const bondData = data as SZSEBondData;
updated[code] = {
code,
name: prevQuotes[code]?.name || '',
updated[fullCode] = {
code: fullCode,
name: prevQuotes[fullCode]?.name || '',
price: bondData.last_px,
prevClose: bondData.prev_close,
open: bondData.open_px,
@@ -185,9 +195,9 @@ const handleSZSERealtimeMessage = (
const { prices: bidPrices, volumes: bidVolumes } = extractOrderBook(hkData.bids);
const { prices: askPrices, volumes: askVolumes } = extractOrderBook(hkData.asks);
updated[code] = {
code,
name: prevQuotes[code]?.name || '',
updated[fullCode] = {
code: fullCode,
name: prevQuotes[fullCode]?.name || '',
price: hkData.last_px,
prevClose: hkData.prev_close,
open: hkData.open_px,
@@ -215,9 +225,9 @@ const handleSZSERealtimeMessage = (
case 'afterhours_block':
case 'afterhours_trading': {
const afterhoursData = data as SZSEAfterhoursData;
const existing = prevQuotes[code];
const existing = prevQuotes[fullCode];
if (existing) {
updated[code] = {
updated[fullCode] = {
...existing,
afterhours: {
bidPx: afterhoursData.bid_px,
@@ -243,6 +253,7 @@ const handleSZSERealtimeMessage = (
/**
* 处理深交所快照消息
* 存储时统一使用带后缀的完整代码作为 key
*/
const handleSZSESnapshotMessage = (
msg: SZSESnapshotMessage,
@@ -254,13 +265,16 @@ const handleSZSESnapshotMessage = (
let hasUpdate = false;
stocks.forEach((s: SZSEStockData) => {
if (subscribedCodes.has(s.security_id)) {
const rawCode = s.security_id;
const fullCode = rawCode.includes('.') ? rawCode : `${rawCode}.SZ`;
if (subscribedCodes.has(rawCode) || subscribedCodes.has(fullCode)) {
hasUpdate = true;
const { prices: bidPrices, volumes: bidVolumes } = extractOrderBook(s.bids);
const { prices: askPrices, volumes: askVolumes } = extractOrderBook(s.asks);
updated[s.security_id] = {
code: s.security_id,
updated[fullCode] = {
code: fullCode,
name: '',
price: s.last_px,
prevClose: s.prev_close,
@@ -284,10 +298,13 @@ const handleSZSESnapshotMessage = (
});
indexes.forEach((i: SZSEIndexData) => {
if (subscribedCodes.has(i.security_id)) {
const rawCode = i.security_id;
const fullCode = rawCode.includes('.') ? rawCode : `${rawCode}.SZ`;
if (subscribedCodes.has(rawCode) || subscribedCodes.has(fullCode)) {
hasUpdate = true;
updated[i.security_id] = {
code: i.security_id,
updated[fullCode] = {
code: fullCode,
name: '',
price: i.current_index,
prevClose: i.prev_close,
@@ -309,10 +326,13 @@ const handleSZSESnapshotMessage = (
});
bonds.forEach((b: SZSEBondData) => {
if (subscribedCodes.has(b.security_id)) {
const rawCode = b.security_id;
const fullCode = rawCode.includes('.') ? rawCode : `${rawCode}.SZ`;
if (subscribedCodes.has(rawCode) || subscribedCodes.has(fullCode)) {
hasUpdate = true;
updated[b.security_id] = {
code: b.security_id,
updated[fullCode] = {
code: fullCode,
name: '',
price: b.last_px,
prevClose: b.prev_close,
@@ -433,12 +453,14 @@ export const useRealtimeQuote = (codes: string[] = []): UseRealtimeQuoteReturn =
setConnected(prev => ({ ...prev, [exchange]: true }));
if (exchange === 'SSE') {
const codes = Array.from(subscribedCodes.current.SSE);
if (codes.length > 0) {
// subscribedCodes 存的是带后缀的完整代码，发送给 WS 需要去掉后缀
const fullCodes = Array.from(subscribedCodes.current.SSE);
const baseCodes = fullCodes.map(c => normalizeCode(c));
if (baseCodes.length > 0) {
ws.send(JSON.stringify({
action: 'subscribe',
channels: ['stock', 'index'],
codes,
codes: baseCodes,
}));
}
}
@@ -481,17 +503,19 @@ export const useRealtimeQuote = (codes: string[] = []): UseRealtimeQuoteReturn =
}, [startHeartbeat, stopHeartbeat, handleMessage]);
const subscribe = useCallback((code: string) => {
const baseCode = normalizeCode(code);
const exchange = getExchange(code);
// 确保使用带后缀的完整代码
const fullCode = code.includes('.') ? code : `${code}.${exchange === 'SSE' ? 'SH' : 'SZ'}`;
const baseCode = normalizeCode(code);
subscribedCodes.current[exchange].add(baseCode);
subscribedCodes.current[exchange].add(fullCode);
const ws = wsRefs.current[exchange];
if (exchange === 'SSE' && ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({
action: 'subscribe',
channels: ['stock', 'index'],
codes: [baseCode],
codes: [baseCode], // 发送给 WS 用不带后缀的代码
}));
}
@@ -501,14 +525,15 @@ export const useRealtimeQuote = (codes: string[] = []): UseRealtimeQuoteReturn =
}, [createConnection]);
const unsubscribe = useCallback((code: string) => {
const baseCode = normalizeCode(code);
const exchange = getExchange(code);
// 确保使用带后缀的完整代码
const fullCode = code.includes('.') ? code : `${code}.${exchange === 'SSE' ? 'SH' : 'SZ'}`;
subscribedCodes.current[exchange].delete(baseCode);
subscribedCodes.current[exchange].delete(fullCode);
setQuotes(prev => {
const updated = { ...prev };
delete updated[baseCode];
delete updated[fullCode]; // 删除时也用带后缀的 key
return updated;
});
@@ -522,35 +547,40 @@ export const useRealtimeQuote = (codes: string[] = []): UseRealtimeQuoteReturn =
}, []);
// 初始化和 codes 变化处理
// 注意：codes 现在是带后缀的完整代码（如 000001.SH）
useEffect(() => {
if (!codes || codes.length === 0) return;
// 使用带后缀的完整代码作为内部 key
const newSseCodes = new Set<string>();
const newSzseCodes = new Set<string>();
codes.forEach(code => {
const baseCode = normalizeCode(code);
const exchange = getExchange(code);
// 确保代码带后缀
const fullCode = code.includes('.') ? code : `${code}.${exchange === 'SSE' ? 'SH' : 'SZ'}`;
if (exchange === 'SSE') {
newSseCodes.add(baseCode);
newSseCodes.add(fullCode);
} else {
newSzseCodes.add(baseCode);
newSzseCodes.add(fullCode);
}
});
// 更新上交所订阅
const oldSseCodes = subscribedCodes.current.SSE;
const sseToAdd = [...newSseCodes].filter(c => !oldSseCodes.has(c));
// 发送给 WebSocket 的代码需要去掉后缀
const sseToAddBase = sseToAdd.map(c => normalizeCode(c));
if (sseToAdd.length > 0 || newSseCodes.size !== oldSseCodes.size) {
subscribedCodes.current.SSE = newSseCodes;
const ws = wsRefs.current.SSE;
if (ws && ws.readyState === WebSocket.OPEN && sseToAdd.length > 0) {
if (ws && ws.readyState === WebSocket.OPEN && sseToAddBase.length > 0) {
ws.send(JSON.stringify({
action: 'subscribe',
channels: ['stock', 'index'],
codes: sseToAdd,
codes: sseToAddBase,
}));
}
@@ -582,7 +612,7 @@ export const useRealtimeQuote = (codes: string[] = []): UseRealtimeQuoteReturn =
}
}
// 清理已取消订阅的 quotes
// 清理已取消订阅的 quotes（使用带后缀的完整代码）
const allNewCodes = new Set([...newSseCodes, ...newSzseCodes]);
setQuotes(prev => {
const updated: QuotesMap = {};

40
src/views/StockOverview/components/FlexScreen/hooks/utils.ts
View File

@@ -7,19 +7,25 @@ import type { Exchange, OrderBookLevel } from '../types';
/**
* 判断证券代码属于哪个交易所
* @param code - 证券代码（可带或不带后缀）
* @param isIndex - 是否为指数（用于区分同代码的指数和股票，如 000001）
* @returns 交易所标识
*/
export const getExchange = (code: string): Exchange => {
const baseCode = code.split('.')[0];
export const getExchange = (code: string, isIndex?: boolean): Exchange => {
// 如果已带后缀，直接判断
if (code.includes('.')) {
return code.endsWith('.SH') ? 'SSE' : 'SZSE';
}
const baseCode = code;
// 6开头为上海股票
if (baseCode.startsWith('6')) {
return 'SSE';
}
// 000开头的6位数是深圳股票（如平安银行000001）
if (baseCode.startsWith('000') && baseCode.length === 6) {
return 'SZSE';
// 5开头是上海 ETF
if (baseCode.startsWith('5')) {
return 'SSE';
}
// 399开头是深证指数
@@ -27,16 +33,16 @@ export const getExchange = (code: string): Exchange => {
return 'SZSE';
}
// 000开头：如果是指数则为上交所（上证指数000001），否则为深交所（平安银行000001）
if (baseCode.startsWith('000')) {
return isIndex ? 'SSE' : 'SZSE';
}
// 0、3开头是深圳股票
if (baseCode.startsWith('0') || baseCode.startsWith('3')) {
return 'SZSE';
}
// 5开头是上海 ETF
if (baseCode.startsWith('5')) {
return 'SSE';
}
// 1开头是深圳 ETF/债券
if (baseCode.startsWith('1')) {
return 'SZSE';
@@ -46,6 +52,20 @@ export const getExchange = (code: string): Exchange => {
return 'SSE';
};
/**
* 获取证券代码的完整格式（带交易所后缀）
* @param code - 原始代码
* @param isIndex - 是否为指数
* @returns 带后缀的代码
*/
export const getFullCode = (code: string, isIndex?: boolean): string => {
if (code.includes('.')) {
return code; // 已带后缀
}
const exchange = getExchange(code, isIndex);
return `${code}.${exchange === 'SSE' ? 'SH' : 'SZ'}`;
};
/**
* 标准化证券代码为无后缀格式
* @param code - 原始代码

28
src/views/StockOverview/components/FlexScreen/index.tsx
View File

@@ -60,6 +60,7 @@ import {
} from 'react-icons/fa';
import { useRealtimeQuote } from './hooks';
import { getFullCode } from './hooks/utils';
import QuoteTile from './components/QuoteTile';
import { logger } from '@utils/logger';
import type { WatchlistItem, ConnectionStatus } from './types';
@@ -131,9 +132,9 @@ const FlexScreen: React.FC = () => {
const searchBg = useColorModeValue('gray.50', '#2a2a2a');
const hoverBg = useColorModeValue('gray.100', '#333');
// 获取订阅的证券代码列表
// 获取订阅的证券代码列表（带后缀，用于区分上证指数000001.SH和平安银行000001.SZ）
const subscribedCodes = useMemo(() => {
return watchlist.map(item => item.code);
return watchlist.map(item => getFullCode(item.code, item.isIndex));
}, [watchlist]);
// WebSocket 实时行情
@@ -463,16 +464,19 @@ const FlexScreen: React.FC = () => {
{/* 自选列表 */}
{watchlist.length > 0 ? (
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={4}>
{watchlist.map(item => (
<QuoteTile
key={item.code}
code={item.code}
name={item.name}
quote={quotes[item.code] || {}}
isIndex={item.isIndex}
onRemove={removeSecurity}
/>
))}
{watchlist.map(item => {
const fullCode = getFullCode(item.code, item.isIndex);
return (
<QuoteTile
key={fullCode}
code={item.code}
name={item.name}
quote={quotes[fullCode] || {}}
isIndex={item.isIndex}
onRemove={removeSecurity}
/>
);
})}
</SimpleGrid>
) : (
<Center py={8}>

490
src/views/StockOverview/components/HotspotOverview/components/ConceptAlertList.js
View File

@@ -1,8 +1,8 @@
/**
* 概念异动列表组件
* 展示当日的概念异动记录
* 概念异动列表组件 - V2
* 展示当日的概念异动记录，点击可展开显示相关股票
*/
import React from 'react';
import React, { useState, useCallback } from 'react';
import {
Box,
VStack,
@@ -13,222 +13,304 @@ import {
Tooltip,
useColorModeValue,
Flex,
Divider,
Collapse,
Spinner,
Progress,
Table,
Thead,
Tbody,
Tr,
Th,
Td,
TableContainer,
} from '@chakra-ui/react';
import { FaBolt, FaArrowUp, FaArrowDown, FaChartLine, FaFire, FaVolumeUp } from 'react-icons/fa';
import { FaArrowUp, FaArrowDown, FaFire, FaChevronDown, FaChevronRight } from 'react-icons/fa';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import { getAlertTypeLabel, formatScore, getScoreColor } from '../utils/chartHelpers';
/**
* Z-Score 指示器组件
* 紧凑型异动卡片
*/
const ZScoreIndicator = ({ value, label, tooltip }) => {
if (value === null || value === undefined) return null;
// Z-Score 颜色：越大越红，越小越绿
const getZScoreColor = (z) => {
const absZ = Math.abs(z);
if (absZ >= 3) return z > 0 ? 'red.600' : 'green.600';
if (absZ >= 2) return z > 0 ? 'red.500' : 'green.500';
if (absZ >= 1) return z > 0 ? 'orange.400' : 'teal.400';
return 'gray.400';
};
// Z-Score 强度条宽度（最大 5σ）
const barWidth = Math.min(Math.abs(value) / 5 * 100, 100);
return (
<Tooltip label={tooltip || `${label}: ${value.toFixed(2)}σ`} placement="left">
<HStack spacing={1} fontSize="xs">
<Text color="gray.500" w="20px">{label}</Text>
<Box position="relative" w="40px" h="6px" bg="gray.200" borderRadius="full" overflow="hidden">
<Box
position="absolute"
left={value >= 0 ? '50%' : `${50 - barWidth / 2}%`}
w={`${barWidth / 2}%`}
h="100%"
bg={getZScoreColor(value)}
borderRadius="full"
/>
</Box>
<Text color={getZScoreColor(value)} fontWeight="medium" w="28px" textAlign="right">
{value >= 0 ? '+' : ''}{value.toFixed(1)}
</Text>
</HStack>
</Tooltip>
);
};
/**
* 持续确认率指示器
*/
const ConfirmRatioIndicator = ({ ratio }) => {
if (ratio === null || ratio === undefined) return null;
const percent = Math.round(ratio * 100);
const color = percent >= 80 ? 'green' : percent >= 60 ? 'orange' : 'red';
return (
<Tooltip label={`持续确认率: ${percent}%（5分钟窗口内超标比例）`}>
<HStack spacing={1}>
<Box position="relative" w="32px" h="6px" bg="gray.200" borderRadius="full" overflow="hidden">
<Box w={`${percent}%`} h="100%" bg={`${color}.500`} borderRadius="full" />
</Box>
<Text fontSize="xs" color={`${color}.500`} fontWeight="medium">
{percent}%
</Text>
</HStack>
</Tooltip>
);
};
/**
* 单个异动项组件
*/
const AlertItem = ({ alert, onClick, isSelected }) => {
const AlertCard = ({ alert, isExpanded, onToggle, stocks, loadingStocks }) => {
const navigate = useNavigate();
const bgColor = useColorModeValue('white', '#1a1a1a');
const hoverBg = useColorModeValue('gray.50', '#2a2a2a');
const hoverBg = useColorModeValue('gray.50', '#252525');
const borderColor = useColorModeValue('gray.200', '#333');
const selectedBg = useColorModeValue('purple.50', '#2a2a3a');
const expandedBg = useColorModeValue('purple.50', '#1e1e2e');
const isUp = alert.alert_type !== 'surge_down';
const typeColor = isUp ? 'red' : 'green';
const isV2 = alert.is_v2;
// 获取异动类型图标
const getTypeIcon = (type) => {
switch (type) {
case 'surge_up':
case 'surge':
return FaArrowUp;
case 'surge_down':
return FaArrowDown;
case 'limit_up':
return FaFire;
case 'volume_spike':
return FaVolumeUp;
case 'rank_jump':
return FaChartLine;
default:
return FaBolt;
}
// 点击股票跳转
const handleStockClick = (e, stockCode) => {
e.stopPropagation();
navigate(`/company?scode=${stockCode}`);
};
return (
<Box
p={3}
bg={isSelected ? selectedBg : bgColor}
borderRadius="md"
bg={isExpanded ? expandedBg : bgColor}
borderRadius="lg"
borderWidth="1px"
borderColor={isSelected ? 'purple.400' : borderColor}
cursor="pointer"
borderColor={isExpanded ? 'purple.400' : borderColor}
overflow="hidden"
transition="all 0.2s"
_hover={{ bg: hoverBg, transform: 'translateX(4px)' }}
onClick={() => onClick?.(alert)}
_hover={{ borderColor: 'purple.300' }}
>
<Flex justify="space-between" align="flex-start">
{/* 左侧：概念名称和时间 */}
<VStack align="start" spacing={1} flex={1}>
<HStack spacing={2}>
<Icon as={getTypeIcon(alert.alert_type)} color={`${typeColor}.500`} boxSize={4} />
<Text fontWeight="bold" fontSize="sm" noOfLines={1}>
{/* 主卡片 - 点击展开 */}
<Box
p={3}
cursor="pointer"
onClick={onToggle}
_hover={{ bg: hoverBg }}
>
<Flex justify="space-between" align="center">
{/* 左侧：名称 + 类型 */}
<HStack spacing={2} flex={1} minW={0}>
<Icon
as={isExpanded ? FaChevronDown : FaChevronRight}
color="gray.400"
boxSize={3}
/>
<Icon
as={isUp ? FaArrowUp : FaArrowDown}
color={`${typeColor}.500`}
boxSize={3}
/>
<Text fontWeight="bold" fontSize="sm" noOfLines={1} flex={1}>
{alert.concept_name}
</Text>
{isV2 && (
<Badge colorScheme="purple" size="xs" variant="subtle" fontSize="10px">
<Badge colorScheme="purple" size="xs" variant="solid" fontSize="9px" px={1}>
V2
</Badge>
)}
</HStack>
<HStack spacing={2} fontSize="xs" color="gray.500">
{/* 右侧：分数 */}
<Badge
px={2}
py={0.5}
borderRadius="full"
bg={getScoreColor(alert.final_score)}
color="white"
fontSize="xs"
fontWeight="bold"
ml={2}
>
{formatScore(alert.final_score)}分
</Badge>
</Flex>
{/* 第二行：时间 + 关键指标 */}
<Flex mt={2} justify="space-between" align="center" fontSize="xs">
<HStack spacing={2} color="gray.500">
<Text>{alert.time}</Text>
<Badge colorScheme={typeColor} size="sm" variant="subtle">
{getAlertTypeLabel(alert.alert_type)}
</Badge>
{/* V2: 持续确认率 */}
{/* 确认率 */}
{isV2 && alert.confirm_ratio !== undefined && (
<ConfirmRatioIndicator ratio={alert.confirm_ratio} />
<HStack spacing={1}>
<Box w="30px" h="4px" bg="gray.200" borderRadius="full" overflow="hidden">
<Box
w={`${alert.confirm_ratio * 100}%`}
h="100%"
bg={alert.confirm_ratio >= 0.8 ? 'green.500' : 'orange.500'}
/>
</Box>
<Text>{Math.round(alert.confirm_ratio * 100)}%</Text>
</HStack>
)}
</HStack>
{/* V2: Z-Score 指标行 */}
{isV2 && (alert.alpha_zscore !== undefined || alert.amt_zscore !== undefined) && (
<HStack spacing={3} mt={1}>
<ZScoreIndicator value={alert.alpha_zscore} label="α" tooltip={`Alpha Z-Score: ${alert.alpha_zscore?.toFixed(2)}σ（相对于历史同时段）`} />
<ZScoreIndicator value={alert.amt_zscore} label="量" tooltip={`成交额 Z-Score: ${alert.amt_zscore?.toFixed(2)}σ`} />
{/* Alpha + Z-Score 简化显示 */}
<HStack spacing={3}>
{alert.alpha !== undefined && (
<Text color={alert.alpha >= 0 ? 'red.500' : 'green.500'} fontWeight="medium">
α {alert.alpha >= 0 ? '+' : ''}{alert.alpha.toFixed(2)}%
</Text>
)}
{isV2 && alert.alpha_zscore !== undefined && (
<Tooltip label={`Alpha Z-Score: ${alert.alpha_zscore.toFixed(2)}σ`}>
<HStack spacing={0.5}>
<Box
w="24px"
h="4px"
bg="gray.200"
borderRadius="full"
overflow="hidden"
position="relative"
>
<Box
position="absolute"
left={alert.alpha_zscore >= 0 ? '50%' : undefined}
right={alert.alpha_zscore < 0 ? '50%' : undefined}
w={`${Math.min(Math.abs(alert.alpha_zscore) / 5 * 50, 50)}%`}
h="100%"
bg={alert.alpha_zscore >= 0 ? 'red.500' : 'green.500'}
/>
</Box>
<Text color={alert.alpha_zscore >= 0 ? 'red.400' : 'green.400'}>
{alert.alpha_zscore >= 0 ? '+' : ''}{alert.alpha_zscore.toFixed(1)}σ
</Text>
</HStack>
</Tooltip>
)}
{alert.limit_up_ratio > 0.05 && (
<HStack spacing={0.5} color="orange.500">
<Icon as={FaFire} boxSize={3} />
<Text>{Math.round(alert.limit_up_ratio * 100)}%</Text>
</HStack>
)}
</HStack>
</Flex>
</Box>
{/* 展开的股票列表 */}
<Collapse in={isExpanded} animateOpacity>
<Box
borderTopWidth="1px"
borderColor={borderColor}
p={3}
bg={useColorModeValue('gray.50', '#151520')}
>
{loadingStocks ? (
<HStack justify="center" py={4}>
<Spinner size="sm" color="purple.500" />
<Text fontSize="sm" color="gray.500">加载相关股票...</Text>
</HStack>
)}
</VStack>
{/* 右侧：分数和关键指标 */}
<VStack align="end" spacing={1}>
{/* 综合得分 */}
{alert.final_score !== undefined && (
<Tooltip label={`规则: ${formatScore(alert.rule_score)} / ML: ${formatScore(alert.ml_score)}`}>
<Badge
px={2}
py={1}
borderRadius="full"
bg={getScoreColor(alert.final_score)}
color="white"
fontSize="xs"
fontWeight="bold"
>
{formatScore(alert.final_score)}分
</Badge>
</Tooltip>
)}
{/* Alpha 值 */}
{alert.alpha !== undefined && (
<Text fontSize="xs" color={alert.alpha >= 0 ? 'red.500' : 'green.500'} fontWeight="medium">
α {alert.alpha >= 0 ? '+' : ''}{alert.alpha.toFixed(2)}%
) : stocks && stocks.length > 0 ? (
<TableContainer maxH="200px" overflowY="auto">
<Table size="sm" variant="simple">
<Thead position="sticky" top={0} bg={useColorModeValue('gray.50', '#151520')} zIndex={1}>
<Tr>
<Th px={2} py={1} fontSize="xs" color="gray.500">股票</Th>
<Th px={2} py={1} fontSize="xs" color="gray.500" isNumeric>涨跌</Th>
<Th px={2} py={1} fontSize="xs" color="gray.500" maxW="120px">原因</Th>
</Tr>
</Thead>
<Tbody>
{stocks.slice(0, 10).map((stock, idx) => (
<Tr
key={idx}
cursor="pointer"
_hover={{ bg: hoverBg }}
onClick={(e) => handleStockClick(e, stock.code || stock.stock_code)}
>
<Td px={2} py={1.5}>
<Text fontSize="xs" color="cyan.400" fontWeight="medium">
{stock.name || stock.stock_name}
</Text>
</Td>
<Td px={2} py={1.5} isNumeric>
<Text
fontSize="xs"
fontWeight="bold"
color={
stock.change_pct > 0 ? 'red.400' :
stock.change_pct < 0 ? 'green.400' : 'gray.400'
}
>
{stock.change_pct !== undefined
? `${stock.change_pct > 0 ? '+' : ''}${stock.change_pct.toFixed(2)}%`
: '-'
}
</Text>
</Td>
<Td px={2} py={1.5} maxW="120px">
<Text fontSize="xs" color="gray.500" noOfLines={1}>
{stock.reason || '-'}
</Text>
</Td>
</Tr>
))}
</Tbody>
</Table>
{stocks.length > 10 && (
<Text fontSize="xs" color="gray.500" textAlign="center" mt={2}>
共 {stocks.length} 只相关股票，显示前 10 只
</Text>
)}
</TableContainer>
) : (
<Text fontSize="sm" color="gray.500" textAlign="center" py={2}>
暂无相关股票数据
</Text>
)}
{/* V2: 动量指标 */}
{isV2 && alert.momentum_5m !== undefined && Math.abs(alert.momentum_5m) > 0.3 && (
<HStack spacing={1}>
<Icon
as={alert.momentum_5m > 0 ? FaArrowUp : FaArrowDown}
color={alert.momentum_5m > 0 ? 'red.400' : 'green.400'}
boxSize={3}
/>
<Text fontSize="xs" color={alert.momentum_5m > 0 ? 'red.400' : 'green.400'}>
动量 {alert.momentum_5m > 0 ? '+' : ''}{alert.momentum_5m.toFixed(2)}
</Text>
</HStack>
)}
{/* 涨停数量 / 涨停比例 */}
{(alert.limit_up_count > 0 || (alert.limit_up_ratio > 0.05 && isV2)) && (
<HStack spacing={1}>
<Icon as={FaFire} color="orange.500" boxSize={3} />
<Text fontSize="xs" color="orange.500">
{alert.limit_up_count > 0
? `涨停 ${alert.limit_up_count}`
: `涨停 ${Math.round(alert.limit_up_ratio * 100)}%`
}
</Text>
</HStack>
)}
</VStack>
</Flex>
</Box>
</Collapse>
</Box>
);
};
/**
* 概念异动列表
* @param {Object} props
* @param {Array} props.alerts - 异动数据数组
* @param {Function} props.onAlertClick - 点击异动的回调
* @param {Object} props.selectedAlert - 当前选中的异动
* @param {number} props.maxHeight - 最大高度
*/
const ConceptAlertList = ({ alerts = [], onAlertClick, selectedAlert, maxHeight = '400px' }) => {
const textColor = useColorModeValue('gray.800', 'white');
const [expandedId, setExpandedId] = useState(null);
const [conceptStocks, setConceptStocks] = useState({});
const [loadingConcepts, setLoadingConcepts] = useState({});
const subTextColor = useColorModeValue('gray.500', 'gray.400');
// 获取概念相关股票
const fetchConceptStocks = useCallback(async (conceptId) => {
if (conceptStocks[conceptId] || loadingConcepts[conceptId]) {
return;
}
setLoadingConcepts(prev => ({ ...prev, [conceptId]: true }));
try {
// 调用后端 API 获取概念股票
const response = await axios.get(`/api/concept/${conceptId}/stocks`);
if (response.data?.success && response.data?.data?.stocks) {
setConceptStocks(prev => ({
...prev,
[conceptId]: response.data.data.stocks
}));
}
} catch (error) {
console.error('获取概念股票失败:', error);
// 如果 API 失败，尝试从 ES 直接获取
try {
const esResponse = await axios.get(`/api/es/concept/${conceptId}`);
if (esResponse.data?.stocks) {
setConceptStocks(prev => ({
...prev,
[conceptId]: esResponse.data.stocks
}));
}
} catch (esError) {
console.error('ES 获取也失败:', esError);
setConceptStocks(prev => ({ ...prev, [conceptId]: [] }));
}
} finally {
setLoadingConcepts(prev => ({ ...prev, [conceptId]: false }));
}
}, [conceptStocks, loadingConcepts]);
// 切换展开状态
const handleToggle = useCallback((alert) => {
const alertKey = `${alert.concept_id}-${alert.time}`;
if (expandedId === alertKey) {
setExpandedId(null);
} else {
setExpandedId(alertKey);
// 获取股票数据
if (alert.concept_id) {
fetchConceptStocks(alert.concept_id);
}
}
// 通知父组件
onAlertClick?.(alert);
}, [expandedId, fetchConceptStocks, onAlertClick]);
if (!alerts || alerts.length === 0) {
return (
<Box p={4} textAlign="center">
@@ -239,51 +321,29 @@ const ConceptAlertList = ({ alerts = [], onAlertClick, selectedAlert, maxHeight
);
}
// 按时间分组
const groupedAlerts = alerts.reduce((acc, alert) => {
const time = alert.time || '未知时间';
if (!acc[time]) {
acc[time] = [];
}
acc[time].push(alert);
return acc;
}, {});
// 按时间排序
const sortedTimes = Object.keys(groupedAlerts).sort();
// 按时间倒序排列
const sortedAlerts = [...alerts].sort((a, b) => {
const timeA = a.time || '00:00';
const timeB = b.time || '00:00';
return timeB.localeCompare(timeA);
});
return (
<Box maxH={maxHeight} overflowY="auto" pr={2}>
<VStack spacing={3} align="stretch">
{sortedTimes.map((time, timeIndex) => (
<Box key={time}>
{/* 时间分隔线 */}
{timeIndex > 0 && <Divider my={2} />}
{/* 时间标签 */}
<HStack spacing={2} mb={2}>
<Box w={2} h={2} borderRadius="full" bg="purple.500" />
<Text fontSize="xs" fontWeight="bold" color={subTextColor}>
{time}
</Text>
<Text fontSize="xs" color={subTextColor}>
({groupedAlerts[time].length}个异动)
</Text>
</HStack>
{/* 该时间点的异动 */}
<VStack spacing={2} align="stretch" pl={4}>
{groupedAlerts[time].map((alert, idx) => (
<AlertItem
key={`${alert.concept_id || alert.concept_name}-${idx}`}
alert={alert}
onClick={onAlertClick}
isSelected={selectedAlert?.concept_id === alert.concept_id && selectedAlert?.time === alert.time}
/>
))}
</VStack>
</Box>
))}
<Box maxH={maxHeight} overflowY="auto" pr={1}>
<VStack spacing={2} align="stretch">
{sortedAlerts.map((alert, idx) => {
const alertKey = `${alert.concept_id}-${alert.time}`;
return (
<AlertCard
key={alertKey || idx}
alert={alert}
isExpanded={expandedId === alertKey}
onToggle={() => handleToggle(alert)}
stocks={conceptStocks[alert.concept_id]}
loadingStocks={loadingConcepts[alert.concept_id]}
/>
);
})}
</VStack>
</Box>
);