community增加事件详情

src/views/Community/components/HeroPanel.js

@@ -51,6 +51,7 @@ import { eventService } from '@services/eventService';
 import { getApiBase } from '@utils/apiConfig';
 import ReactMarkdown from 'react-markdown';
 import dayjs from 'dayjs';
+import RelatedStocksSection from '@components/EventDetailPanel/RelatedStocksSection';
 
 const { TabPane } = Tabs;
 const { Text: AntText } = Typography;
@@ -410,6 +411,10 @@ const DetailModal = ({ isOpen, onClose, selectedDate, ztDetail, events, loading
   const [detailDrawerVisible, setDetailDrawerVisible] = useState(false);
   const [selectedContent, setSelectedContent] = useState(null);
   const [ztViewMode, setZtViewMode] = useState('sector'); // 'sector' | 'stock'
+  const [stocksDrawerVisible, setStocksDrawerVisible] = useState(false);
+  const [selectedEventStocks, setSelectedEventStocks] = useState([]);
+  const [selectedEventTime, setSelectedEventTime] = useState(null);
+  const [selectedEventTitle, setSelectedEventTitle] = useState('');
 
   // 板块数据处理 - 必须在条件返回之前调用所有hooks
   const sectorList = useMemo(() => {
@@ -698,23 +703,22 @@ const DetailModal = ({ isOpen, onClose, selectedDate, ztDetail, events, loading
       dataIndex: 'related_stocks',
       key: 'stocks',
       width: 120,
-      render: (stocks) => {
+      render: (stocks, record) => {
         const hasStocks = stocks && stocks.length > 0;
         if (!hasStocks) {
           return <AntText type="secondary">无</AntText>;
         }
-        // 构建股票列表内容
-        const stockContent = stocks.map(s => {
-          const code = s.stock_code || s.code || s;
-          const name = s.stock_name || s.name || code;
-          return `${name}(${code})`;
-        }).join('\n');
         return (
           <Button
             type="link"
             size="small"
             icon={<StockOutlined />}
-            onClick={() => showContentDetail(stockContent, `相关股票 (${stocks.length}只)`)}
+            onClick={() => {
+              setSelectedEventStocks(stocks);
+              setSelectedEventTime(record.calendar_time);
+              setSelectedEventTitle(record.title);
+              setStocksDrawerVisible(true);
+            }}
           >
             {stocks.length}只
           </Button>
@@ -964,6 +968,51 @@ const DetailModal = ({ isOpen, onClose, selectedDate, ztDetail, events, loading
           </DrawerBody>
         </DrawerContent>
       </Drawer>
+
+      {/* 相关股票详情抽屉 */}
+      <Drawer
+        isOpen={stocksDrawerVisible}
+        placement="right"
+        size="xl"
+        onClose={() => setStocksDrawerVisible(false)}
+      >
+        <DrawerOverlay bg="blackAlpha.600" />
+        <DrawerContent
+          bg="linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)"
+          borderLeft="1px solid rgba(255,215,0,0.2)"
+          maxW="900px"
+        >
+          <DrawerCloseButton color="whiteAlpha.600" />
+          <DrawerHeader borderBottom="1px solid rgba(255,215,0,0.2)" color="white">
+            <HStack spacing={3}>
+              <Icon as={StockOutlined} color="gold" />
+              <VStack align="start" spacing={0}>
+                <Text fontSize="lg">相关股票</Text>
+                {selectedEventTitle && (
+                  <Text fontSize="sm" color="whiteAlpha.600" fontWeight="normal" noOfLines={1}>
+                    {selectedEventTitle}
+                  </Text>
+                )}
+              </VStack>
+              <Badge colorScheme="blue" ml={2}>
+                {selectedEventStocks?.length || 0}只
+              </Badge>
+            </HStack>
+          </DrawerHeader>
+          <DrawerBody py={4}>
+            {selectedEventStocks && selectedEventStocks.length > 0 ? (
+              <RelatedStocksSection
+                stocks={selectedEventStocks}
+                eventTime={selectedEventTime}
+              />
+            ) : (
+              <Center h="200px">
+                <Text color="whiteAlpha.500">暂无相关股票</Text>
+              </Center>
+            )}
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
     </>
   );
 };