feat: 添加相关股票模块

src/views/Community/components/DynamicNewsDetail/RelatedStocksSection.js

@@ -0,0 +1,66 @@
+// src/views/Community/components/DynamicNewsDetail/RelatedStocksSection.js
+// 相关股票列表区组件（可折叠，网格布局）
+
+import React from 'react';
+import {
+  Box,
+  SimpleGrid,
+  Collapse,
+} from '@chakra-ui/react';
+import CollapsibleHeader from './CollapsibleHeader';
+import StockListItem from './StockListItem';
+
+/**
+ * 相关股票列表区组件
+ * @param {Object} props
+ * @param {Array<Object>} props.stocks - 股票数组
+ * @param {Object} props.quotes - 股票行情字典 { [stockCode]: { change: number } }
+ * @param {string} props.eventTime - 事件时间
+ * @param {Set} props.watchlistSet - 自选股代码集合
+ * @param {boolean} props.isOpen - 是否展开
+ * @param {Function} props.onToggle - 切换展开/收起的回调
+ * @param {Function} props.onWatchlistToggle - 切换自选股回调
+ */
+const RelatedStocksSection = ({
+  stocks,
+  quotes = {},
+  eventTime = null,
+  watchlistSet = new Set(),
+  isOpen,
+  onToggle,
+  onWatchlistToggle
+}) => {
+  // 如果没有股票数据，不渲染
+  if (!stocks || stocks.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box>
+      <CollapsibleHeader
+        title="相关股票"
+        isOpen={isOpen}
+        onToggle={onToggle}
+        count={stocks.length}
+      />
+      <Collapse in={isOpen} animateOpacity>
+        <Box mt={3}>
+          <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={4}>
+            {stocks.map((stock, index) => (
+              <StockListItem
+                key={index}
+                stock={stock}
+                quote={quotes[stock.stock_code]}
+                eventTime={eventTime}
+                isInWatchlist={watchlistSet.has(stock.stock_code)}
+                onWatchlistToggle={onWatchlistToggle}
+              />
+            ))}
+          </SimpleGrid>
+        </Box>
+      </Collapse>
+    </Box>
+  );
+};
+
+export default RelatedStocksSection;