RelatedStocksSection 重构为纯详细模式组件

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

@@ -1,21 +1,13 @@
 // src/views/Community/components/DynamicNewsDetail/RelatedStocksSection.js
 // 相关股票列表区组件（纯内容，不含标题）
 
-import React, { useState } from 'react';
-import {
-  VStack,
-  Flex,
-  Button,
-  ButtonGroup,
-  Wrap,
-  WrapItem,
-} from '@chakra-ui/react';
-import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
+import React from 'react';
+import { VStack } from '@chakra-ui/react';
 import StockListItem from './StockListItem';
-import CompactStockItem from './CompactStockItem';
 
 /**
  * 相关股票列表区组件（纯内容部分）
+ * 只负责渲染详细的股票列表，精简模式由外层 CollapsibleSection 的 simpleContent 提供
  * @param {Object} props
  * @param {Array<Object>} props.stocks - 股票数组
  * @param {Object} props.quotes - 股票行情字典 { [stockCode]: { change: number } }
@@ -30,67 +22,23 @@ const RelatedStocksSection = ({
   watchlistSet = new Set(),
   onWatchlistToggle
 }) => {
-  // 显示模式：'detail' 详情模式, 'compact' 精简模式
-  const [viewMode, setViewMode] = useState('detail');
-
   // 如果没有股票数据，不渲染
   if (!stocks || stocks.length === 0) {
     return null;
   }
 
   return (
-    <VStack align="stretch" spacing={4}>
-      {/* 模式切换按钮 */}
-      <Flex justify="flex-end">
-        <ButtonGroup size="sm" isAttached variant="outline">
-          <Button
-            leftIcon={<ViewIcon />}
-            colorScheme={viewMode === 'detail' ? 'blue' : 'gray'}
-            variant={viewMode === 'detail' ? 'solid' : 'outline'}
-            onClick={() => setViewMode('detail')}
-          >
-            详情模式
-          </Button>
-          <Button
-            leftIcon={<ViewOffIcon />}
-            colorScheme={viewMode === 'compact' ? 'blue' : 'gray'}
-            variant={viewMode === 'compact' ? 'solid' : 'outline'}
-            onClick={() => setViewMode('compact')}
-          >
-            精简模式
-          </Button>
-        </ButtonGroup>
-      </Flex>
-
-      {/* 详情模式 */}
-      {viewMode === 'detail' && (
-        <VStack align="stretch" spacing={3}>
-          {stocks.map((stock, index) => (
-            <StockListItem
-              key={index}
-              stock={stock}
-              quote={quotes[stock.stock_code]}
-              eventTime={eventTime}
-              isInWatchlist={watchlistSet.has(stock.stock_code)}
-              onWatchlistToggle={onWatchlistToggle}
-            />
-          ))}
-        </VStack>
-      )}
-
-      {/* 精简模式 */}
-      {viewMode === 'compact' && (
-        <Wrap spacing={4}>
-          {stocks.map((stock, index) => (
-            <WrapItem key={index}>
-              <CompactStockItem
-                stock={stock}
-                quote={quotes[stock.stock_code]}
-              />
-            </WrapItem>
-          ))}
-        </Wrap>
-      )}
+    <VStack align="stretch" spacing={3}>
+      {stocks.map((stock, index) => (
+        <StockListItem
+          key={index}
+          stock={stock}
+          quote={quotes[stock.stock_code]}
+          eventTime={eventTime}
+          isInWatchlist={watchlistSet.has(stock.stock_code)}
+          onWatchlistToggle={onWatchlistToggle}
+        />
+      ))}
     </VStack>
   );
 };