update pay ui

2025-12-11 14:10:59 +08:00
parent 3cc7f2ca6e
commit 429c2a4531
5 changed files with 81 additions and 98 deletions
--- 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}`,
--- 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`;
    }

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

--- 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"
                      >
                        <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>
--- 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,8 +655,7 @@ const HotspotOverview = ({ selectedDate }) => {
        {/* 异动列表 - Glassmorphism 横向滚动 */}
        {alerts.length > 0 && (
          <Box>
-            <Flex justify="space-between" align="center" mb={4}>
-              <HStack spacing={3}>
+            <HStack spacing={3} mb={4}>
              <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>
        )}