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)}
- />
-
-
)}