update pay ui

src/views/StockOverview/components/HotspotOverview/index.js

@@ -23,6 +23,7 @@ import {
   IconButton,
   Collapse,
   SimpleGrid,
+  useDisclosure,
 } from '@chakra-ui/react';
 import { keyframes, css } from '@emotion/react';
 import {
@@ -40,7 +41,7 @@ import {
 } from 'lucide-react';
 
 import { useHotspotData } from './hooks';
-import { IndexMinuteChart, ConceptAlertList, AlertSummary } from './components';
+import { IndexMinuteChart, ConceptAlertList, AlertSummary, AlertDetailDrawer } from './components';
 import { ALERT_TYPE_CONFIG, getAlertTypeLabel } from './utils/chartHelpers';
 import {
   glassEffect,
@@ -200,6 +201,10 @@ const HotspotOverview = ({ selectedDate }) => {
   const [selectedAlert, setSelectedAlert] = useState(null);
   const [showDetailList, setShowDetailList] = useState(false);
   const [autoExpandAlertKey, setAutoExpandAlertKey] = useState(null);
+  const [drawerAlertData, setDrawerAlertData] = useState(null);
+
+  // 右边栏抽屉控制
+  const { isOpen: isDrawerOpen, onOpen: onDrawerOpen, onClose: onDrawerClose } = useDisclosure();
 
   // 获取数据
   const { loading, error, data } = useHotspotData(selectedDate);
@@ -212,7 +217,14 @@ const HotspotOverview = ({ selectedDate }) => {
   const sectionBg = glassEffect.light.bg;
   const scrollbarColor = 'rgba(139, 92, 246, 0.3)';
 
-  // 点击异动标注 - 自动展开详细列表并选中
+  // 点击分时图上的异动标注 - 打开右边栏抽屉显示详情
+  const handleChartAlertClick = useCallback((alertGroupData) => {
+    // alertGroupData 包含 { alerts, timeRange, alertCount, time }
+    setDrawerAlertData(alertGroupData);
+    onDrawerOpen();
+  }, [onDrawerOpen]);
+
+  // 点击底部异动卡片 - 展开详细列表并选中
   const handleAlertClick = useCallback((alert) => {
     setSelectedAlert(alert);
     // 自动展开详细列表并设置需要展开的项
@@ -637,7 +649,7 @@ const HotspotOverview = ({ selectedDate }) => {
           <IndexMinuteChart
             indexData={index}
             alerts={alerts}
-            onAlertClick={handleAlertClick}
+            onAlertClick={handleChartAlertClick}
             height="420px"
           />
         </Box>
@@ -790,6 +802,13 @@ const HotspotOverview = ({ selectedDate }) => {
           </Center>
         )}
       </Box>
+
+      {/* 异动详情右边栏抽屉 */}
+      <AlertDetailDrawer
+        isOpen={isDrawerOpen}
+        onClose={onDrawerClose}
+        alertData={drawerAlertData}
+      />
     </Box>
   );
 };