diff --git a/src/mocks/handlers/concept.js b/src/mocks/handlers/concept.js index 8a516bb4..1aa7e524 100644 --- a/src/mocks/handlers/concept.js +++ b/src/mocks/handlers/concept.js @@ -307,7 +307,13 @@ export const conceptHandlers = [ const count = Math.min(limit, stockPool.length); for (let i = 0; i < count; i++) { const stock = stockPool[i]; - const suffix = stock.code.startsWith('6') ? '.SH' : '.SZ'; + // 根据股票代码判断交易所后缀 + let suffix = '.SZ'; + if (stock.code.startsWith('6')) { + suffix = '.SH'; + } else if (stock.code.startsWith('8') || stock.code.startsWith('9') || stock.code.startsWith('4')) { + suffix = '.BJ'; + } stocks.push({ stock_code: `${stock.code}${suffix}`, code: `${stock.code}${suffix}`, diff --git a/src/services/eventService.js b/src/services/eventService.js index 5f8d386c..a43c4919 100755 --- a/src/services/eventService.js +++ b/src/services/eventService.js @@ -17,9 +17,9 @@ const formatStockCode = (code) => { // 根据股票代码规则添加后缀 // 6开头 -> 上海 .SH - // 0、3开头 -> 深圳 .SZ // 688开头 -> 科创板(上海).SH - // 8开头(北交所)-> .BJ(暂不处理,大部分场景不需要) + // 0、3开头 -> 深圳 .SZ + // 8、9、4开头 -> 北交所 .BJ const firstChar = code.charAt(0); const prefix = code.substring(0, 3); @@ -27,6 +27,9 @@ const formatStockCode = (code) => { return `${code}.SH`; } else if (firstChar === '0' || firstChar === '3') { return `${code}.SZ`; + } else if (firstChar === '8' || firstChar === '9' || firstChar === '4') { + // 北交所股票 + return `${code}.BJ`; } // 默认返回原代码(可能是指数或其他) diff --git a/src/views/Dashboard/components/InvestmentCalendarChakra.js b/src/views/Dashboard/components/InvestmentCalendarChakra.js index 5c5a10fd..4f1a72e9 100644 --- a/src/views/Dashboard/components/InvestmentCalendarChakra.js +++ b/src/views/Dashboard/components/InvestmentCalendarChakra.js @@ -285,8 +285,9 @@ export default function InvestmentCalendarChakra() { stockCode = `${stockCode}.SH`; } else if (stockCode.startsWith('0') || stockCode.startsWith('3')) { stockCode = `${stockCode}.SZ`; - } else if (stockCode.startsWith('688')) { - stockCode = `${stockCode}.SH`; + } else if (stockCode.startsWith('8') || stockCode.startsWith('9') || stockCode.startsWith('4')) { + // 北交所股票 + stockCode = `${stockCode}.BJ`; } } diff --git a/src/views/StockOverview/components/HotspotOverview/components/AlertDetailDrawer.js b/src/views/StockOverview/components/HotspotOverview/components/AlertDetailDrawer.js index 7244b4c5..ea3b213e 100644 --- a/src/views/StockOverview/components/HotspotOverview/components/AlertDetailDrawer.js +++ b/src/views/StockOverview/components/HotspotOverview/components/AlertDetailDrawer.js @@ -18,9 +18,13 @@ import { Icon, Collapse, Spinner, - Divider, Tooltip, Flex, + Popover, + PopoverTrigger, + PopoverContent, + PopoverBody, + Portal, } from '@chakra-ui/react'; import { keyframes, css } from '@emotion/react'; import { @@ -310,14 +314,38 @@ const AlertDetailCard = ({ alert, isExpanded, onToggle, stocks, loadingStocks }) justify="space-between" > - - {stockName} - + {/* 股票名称 - 带迷你分时图悬停 */} + + + + {stockName} + + + + e.stopPropagation()} + > + + + {stockName} 分时走势 + + + + + + + + {stockCode} diff --git a/src/views/StockOverview/components/HotspotOverview/index.js b/src/views/StockOverview/components/HotspotOverview/index.js index fb641b01..f93b4535 100644 --- a/src/views/StockOverview/components/HotspotOverview/index.js +++ b/src/views/StockOverview/components/HotspotOverview/index.js @@ -20,8 +20,6 @@ import { Flex, Spacer, Tooltip, - IconButton, - Collapse, SimpleGrid, useDisclosure, } from '@chakra-ui/react'; @@ -30,8 +28,6 @@ import { Flame, List, LineChart, - ChevronDown, - ChevronUp, Info, Zap, AlertCircle, @@ -41,7 +37,7 @@ import { } from 'lucide-react'; import { useHotspotData } from './hooks'; -import { IndexMinuteChart, ConceptAlertList, AlertSummary, AlertDetailDrawer } from './components'; +import { IndexMinuteChart, AlertDetailDrawer } from './components'; import { ALERT_TYPE_CONFIG, getAlertTypeLabel } from './utils/chartHelpers'; import { glassEffect, @@ -199,8 +195,6 @@ const CompactAlertCard = ({ alert, onClick, isSelected }) => { */ const HotspotOverview = ({ selectedDate }) => { const [selectedAlert, setSelectedAlert] = useState(null); - const [showDetailList, setShowDetailList] = useState(false); - const [autoExpandAlertKey, setAutoExpandAlertKey] = useState(null); const [drawerAlertData, setDrawerAlertData] = useState(null); // 右边栏抽屉控制 @@ -224,14 +218,18 @@ const HotspotOverview = ({ selectedDate }) => { onDrawerOpen(); }, [onDrawerOpen]); - // 点击底部异动卡片 - 展开详细列表并选中 - const handleAlertClick = useCallback((alert) => { + // 点击底部异动卡片 - 打开右边栏抽屉显示单个异动详情 + const handleCardAlertClick = useCallback((alert) => { setSelectedAlert(alert); - // 自动展开详细列表并设置需要展开的项 - setShowDetailList(true); - const alertKey = `${alert.concept_id}-${alert.time}`; - setAutoExpandAlertKey(alertKey); - }, []); + // 构造单个异动的数据格式 + setDrawerAlertData({ + alerts: [alert], + timeRange: alert.time, + alertCount: 1, + time: alert.time, + }); + onDrawerOpen(); + }, [onDrawerOpen]); // 渲染加载状态 - Glassmorphism 风格 if (loading) { @@ -657,40 +655,23 @@ const HotspotOverview = ({ selectedDate }) => { {/* 异动列表 - Glassmorphism 横向滚动 */} {alerts.length > 0 && ( - - - - - - 异动记录 - (点击卡片查看个股详情) - - - } - size="sm" - variant="ghost" - borderRadius="12px" - color={colors.text.secondary} - _hover={{ - bg: 'rgba(255,255,255,0.05)', - color: textColor, - }} - onClick={() => setShowDetailList(!showDetailList)} - aria-label="切换详细列表" + + + - - + + 异动记录 + (点击卡片查看详情) + {/* 横向滚动卡片 */} { ))} - - {/* 详细列表(可展开) - Glassmorphism */} - - - {/* 背景光晕 */} - - setAutoExpandAlertKey(null)} - /> - - )}