update pay ui

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}`,

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`;
     }
 
     // 默认返回原代码（可能是指数或其他）

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')) {
+      } else if (stockCode.startsWith('8') || stockCode.startsWith('9') || stockCode.startsWith('4')) {
-        stockCode = `${stockCode}.SH`;
+        // 北交所股票
+        stockCode = `${stockCode}.BJ`;
       }
     }
 

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"
                       >
                         <HStack spacing={3} flex={1}>
+                          {/* 股票名称 - 带迷你分时图悬停 */}
+                          <Popover trigger="hover" placement="left" isLazy>
+                            <PopoverTrigger>
                               <Text
                                 fontSize="sm"
                                 color="#60a5fa"
                                 fontWeight="medium"
-                            _hover={{ color: '#93c5fd' }}
+                                _hover={{ color: '#93c5fd', textDecoration: 'underline' }}
                               >
                                 {stockName}
                               </Text>
+                            </PopoverTrigger>
+                            <Portal>
+                              <PopoverContent
+                                w="200px"
+                                h="100px"
+                                bg="rgba(15, 15, 25, 0.95)"
+                                borderColor="rgba(255, 255, 255, 0.1)"
+                                boxShadow="0 8px 32px rgba(0, 0, 0, 0.5)"
+                                onClick={(e) => e.stopPropagation()}
+                              >
+                                <PopoverBody p={2}>
+                                  <Text fontSize="xs" color={colors.text.secondary} mb={1}>
+                                    {stockName} 分时走势
+                                  </Text>
+                                  <Box h="70px">
+                                    <MiniTimelineChart stockCode={stockCode} />
+                                  </Box>
+                                </PopoverBody>
+                              </PopoverContent>
+                            </Portal>
+                          </Popover>
                           <Text fontSize="xs" color={colors.text.muted}>
                             {stockCode}
                           </Text>

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);
+    setDrawerAlertData({
-    const alertKey = `${alert.concept_id}-${alert.time}`;
+      alerts: [alert],
-    setAutoExpandAlertKey(alertKey);
+      timeRange: alert.time,
-  }, []);
+      alertCount: 1,
+      time: alert.time,
+    });
+    onDrawerOpen();
+  }, [onDrawerOpen]);
 
   // 渲染加载状态 - Glassmorphism 风格
   if (loading) {
@@ -657,8 +655,7 @@ const HotspotOverview = ({ selectedDate }) => {
         {/* 异动列表 - Glassmorphism 横向滚动 */}
         {alerts.length > 0 && (
           <Box>
-            <Flex justify="space-between" align="center" mb={4}>
+            <HStack spacing={3} mb={4}>
-              <HStack spacing={3}>
               <Box
                 p={2}
                 borderRadius="12px"
@@ -673,24 +670,8 @@ const HotspotOverview = ({ selectedDate }) => {
                 />
               </Box>
               <Text fontSize="sm" fontWeight="bold" color={textColor}>异动记录</Text>
-                <Text fontSize="xs" color={colors.text.muted}>（点击卡片查看个股详情）</Text>
+              <Text fontSize="xs" color={colors.text.muted}>（点击卡片查看详情）</Text>
             </HStack>
-              <Tooltip label={showDetailList ? '收起详细列表' : '展开详细列表'} hasArrow>
-                <IconButton
-                  icon={<Icon as={showDetailList ? ChevronUp : ChevronDown} boxSize={4} />}
-                  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="切换详细列表"
-                />
-              </Tooltip>
-            </Flex>
 
             {/* 横向滚动卡片 */}
             <Box
@@ -713,48 +694,12 @@ const HotspotOverview = ({ selectedDate }) => {
                     <CompactAlertCard
                       key={`${alert.concept_id}-${alert.time}-${idx}`}
                       alert={alert}
-                      onClick={handleAlertClick}
+                      onClick={handleCardAlertClick}
                       isSelected={selectedAlert?.concept_id === alert.concept_id && selectedAlert?.time === alert.time}
                     />
                   ))}
               </HStack>
             </Box>
-
-            {/* 详细列表（可展开） - Glassmorphism */}
-            <Collapse in={showDetailList} animateOpacity>
-              <Box
-                mt={4}
-                bg={sectionBg}
-                backdropFilter={glassEffect.light.backdropFilter}
-                borderRadius="20px"
-                border={glassEffect.light.border}
-                p={5}
-                position="relative"
-                overflow="hidden"
-              >
-                {/* 背景光晕 */}
-                <Box
-                  position="absolute"
-                  top="50%"
-                  left="50%"
-                  transform="translate(-50%, -50%)"
-                  w="80%"
-                  h="200px"
-                  borderRadius="full"
-                  bg="rgba(139, 92, 246, 0.05)"
-                  filter="blur(60px)"
-                  pointerEvents="none"
-                />
-                <ConceptAlertList
-                  alerts={alerts}
-                  onAlertClick={handleAlertClick}
-                  selectedAlert={selectedAlert}
-                  maxHeight="400px"
-                  autoExpandAlertKey={autoExpandAlertKey}
-                  onAutoExpandComplete={() => setAutoExpandAlertKey(null)}
-                />
-              </Box>
-            </Collapse>
           </Box>
         )}