community增加事件详情

src/views/Community/components/HeroPanel.js

@@ -418,6 +418,7 @@ 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 [expandedSectors, setExpandedSectors] = useState({}); // 跟踪展开的板块
   const [stocksDrawerVisible, setStocksDrawerVisible] = useState(false);
   const [selectedEventStocks, setSelectedEventStocks] = useState([]);
   const [selectedEventTime, setSelectedEventTime] = useState(null);
@@ -442,13 +443,25 @@ const DetailModal = ({ isOpen, onClose, selectedDate, ztDetail, events, loading
   }, [ztDetail]);
 
   // 股票详情数据处理 - 支持两种字段名：stocks 和 stock_infos
+  // 按连板天数降序排列（高连板在前）
   const stockList = useMemo(() => {
     const stocksData = ztDetail?.stocks || ztDetail?.stock_infos;
     if (!stocksData) return [];
-    return stocksData.map(stock => ({
-      ...stock,
-      key: stock.scode,
-    }));
+
+    // 解析连板天数的辅助函数
+    const parseContinuousDays = (text) => {
+      if (!text || text === '首板') return 1;
+      const match = text.match(/(\d+)/);
+      return match ? parseInt(match[1]) : 1;
+    };
+
+    return stocksData
+      .map(stock => ({
+        ...stock,
+        key: stock.scode,
+        _continuousDays: parseContinuousDays(stock.continuous_days), // 用于排序
+      }))
+      .sort((a, b) => b._continuousDays - a._continuousDays); // 降序排列
   }, [ztDetail]);
 
   // 热门关键词
@@ -942,65 +955,90 @@ const DetailModal = ({ isOpen, onClose, selectedDate, ztDetail, events, loading
       title: '涨停股票',
       dataIndex: 'stocks',
       key: 'stocks',
-      render: (stocks) => {
+      render: (stocks, record) => {
         // 根据股票代码查找股票详情
         const getStockInfo = (code) => {
           const stockInfo = stockList.find(s => s.scode === code);
           return stockInfo || { sname: code, scode: code };
         };
+
+        const sectorName = record.name;
+        const isExpanded = expandedSectors[sectorName];
+        const displayStocks = isExpanded ? stocks : stocks.slice(0, 5);
+        const hasMore = stocks.length > 5;
+
+        const toggleExpand = (e) => {
+          e.stopPropagation();
+          setExpandedSectors(prev => ({
+            ...prev,
+            [sectorName]: !prev[sectorName]
+          }));
+        };
+
         return (
-          <HStack spacing={2} flexWrap="wrap">
-            {stocks.slice(0, 5).map((code) => {
-              const info = getStockInfo(code);
-              return (
-                <Tooltip
-                  key={code}
-                  title={
-                    <Box>
-                      <div style={{ fontWeight: 'bold', marginBottom: 4 }}>{info.sname}</div>
-                      <div style={{ fontSize: '12px', color: '#888' }}>{code}</div>
-                      {info.core_sectors && (
-                        <div style={{ fontSize: '11px', marginTop: 4 }}>
-                          {info.core_sectors.slice(0, 2).join(' · ')}
-                        </div>
-                      )}
-                    </Box>
-                  }
-                  placement="top"
-                >
-                  <Tag
-                    style={{
-                      cursor: 'pointer',
-                      margin: '2px',
-                      background: 'rgba(59, 130, 246, 0.15)',
-                      border: '1px solid rgba(59, 130, 246, 0.3)',
-                      borderRadius: '6px',
-                    }}
+          <VStack align="start" spacing={1}>
+            <HStack spacing={2} flexWrap="wrap">
+              {displayStocks.map((code) => {
+                const info = getStockInfo(code);
+                return (
+                  <Tooltip
+                    key={code}
+                    title={
+                      <Box>
+                        <div style={{ fontWeight: 'bold', marginBottom: 4 }}>{info.sname}</div>
+                        <div style={{ fontSize: '12px', color: '#888' }}>{code}</div>
+                        {info.core_sectors && (
+                          <div style={{ fontSize: '11px', marginTop: 4 }}>
+                            {info.core_sectors.slice(0, 2).join(' · ')}
+                          </div>
+                        )}
+                        {info.continuous_days && (
+                          <div style={{ fontSize: '11px', marginTop: 2, color: '#fa8c16' }}>
+                            {info.continuous_days}
+                          </div>
+                        )}
+                      </Box>
+                    }
+                    placement="top"
                   >
-                    <a
-                      href={`https://valuefrontier.cn/company?scode=${code}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      style={{ color: '#60A5FA', fontSize: '13px' }}
+                    <Tag
+                      style={{
+                        cursor: 'pointer',
+                        margin: '2px',
+                        background: 'rgba(59, 130, 246, 0.15)',
+                        border: '1px solid rgba(59, 130, 246, 0.3)',
+                        borderRadius: '6px',
+                      }}
                     >
-                      {info.sname}
-                    </a>
-                  </Tag>
-                </Tooltip>
-              );
-            })}
-            {stocks.length > 5 && (
-              <Tag style={{
-                margin: '2px',
-                background: 'rgba(255,255,255,0.1)',
-                border: '1px solid rgba(255,255,255,0.2)',
-                borderRadius: '6px',
-                color: '#888'
-              }}>
-                +{stocks.length - 5}
-              </Tag>
+                      <a
+                        href={`https://valuefrontier.cn/company?scode=${code}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{ color: '#60A5FA', fontSize: '13px' }}
+                      >
+                        {info.sname}
+                      </a>
+                    </Tag>
+                  </Tooltip>
+                );
+              })}
+            </HStack>
+            {hasMore && (
+              <Button
+                type="link"
+                size="small"
+                onClick={toggleExpand}
+                style={{
+                  padding: 0,
+                  height: 'auto',
+                  fontSize: '12px',
+                  color: isExpanded ? '#888' : '#FFD700',
+                }}
+              >
+                {isExpanded ? '收起 ▲' : `展开全部 ${stocks.length} 只 ▼`}
+              </Button>
             )}
-          </HStack>
+          </VStack>
         );
       },
     },