事件中心UI优化

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

@@ -1,11 +1,18 @@
 // src/views/Community/components/DynamicNewsDetail/RelatedStocksSection.js
 // 相关股票列表区组件（纯内容，不含标题）
 
-import React from 'react';
+import React, { useState } from 'react';
 import {
   VStack,
+  Flex,
+  Button,
+  ButtonGroup,
+  Wrap,
+  WrapItem,
 } from '@chakra-ui/react';
+import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 import StockListItem from './StockListItem';
+import CompactStockItem from './CompactStockItem';
 
 /**
  * 相关股票列表区组件（纯内容部分）
@@ -23,23 +30,67 @@ 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={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 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>
   );
 };