feat: 优化股票卡片布局和弹窗性能

布局优化：
- 将分时图和K线图移至第二行公司名称后面
- 第二行布局：公司名称（左）+ 分时图 + K线图（右）
- 删除图表标题文字，使布局更紧凑
- 移除未使用的 SimpleGrid 导入

性能优化：
- 股票详情弹窗改为条件渲染
- 弹窗关闭时完全从 DOM 移除
- 减少不必要的组件渲染和内存占用
- 与四排模式弹窗保持一致的实现方式

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

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

@@ -6,7 +6,6 @@ import {
   Box,
   Flex,
   VStack,
-  SimpleGrid,
   Text,
   Button,
   IconButton,
@@ -167,7 +166,9 @@ const StockListItem = ({
             </Flex>
           </Flex>
 
-          {/* 第二行：公司名称（彩色高亮） */}
+          {/* 第二行：公司名称 + 分时图 + K线图 */}
+          <Flex align="center" gap={3}>
+            {/* 左侧：公司名称 */}
             <Text
               fontSize="sm"
               fontWeight="medium"
@@ -176,23 +177,16 @@ const StockListItem = ({
               px={2}
               py={0.5}
               borderRadius="sm"
-            width="fit-content"
+              whiteSpace="nowrap"
+              flexShrink={0}
             >
               {stock.stock_name}
             </Text>
-        </VStack>
 
-        {/* 分隔线 */}
+            {/* 右侧：分时图 + K线图 */}
-        <Box borderTop="1px solid" borderColor={dividerColor} />
+            <Flex gap={2} flex={1} onClick={(e) => e.stopPropagation()}>
-
+              {/* 分时图 */}
-        {/* 分时图 & K线图 - 左右布局 */}
+              <Box flex={1} minW={0}>
-        <Box>
-          <SimpleGrid columns={2} spacing={3}>
-            {/* 左侧：分时图 */}
-            <Box onClick={(e) => e.stopPropagation()}>
-              <Text fontSize="xs" color={descColor} mb={1} textAlign="center">
-                分时图
-              </Text>
                 <MiniTimelineChart
                   stockCode={stock.stock_code}
                   eventTime={eventTime}
@@ -200,19 +194,17 @@ const StockListItem = ({
                 />
               </Box>
 
-            {/* 右侧：K线图 */}
+              {/* K线图 */}
-            <Box onClick={(e) => e.stopPropagation()}>
+              <Box flex={1} minW={0}>
-              <Text fontSize="xs" color={descColor} mb={1} textAlign="center">
-                日K线
-              </Text>
                 <MiniKLineChart
                   stockCode={stock.stock_code}
                   eventTime={eventTime}
                   onClick={() => setIsModalOpen(true)}
                 />
               </Box>
-          </SimpleGrid>
+            </Flex>
-        </Box>
+          </Flex>
+        </VStack>
 
         {/* 分隔线 */}
         <Box borderTop="1px solid" borderColor={dividerColor} />
@@ -269,7 +261,8 @@ const StockListItem = ({
       </VStack>
     </Box>
 
-    {/* 股票详情弹窗 */}
+    {/* 股票详情弹窗 - 未打开时不渲染 */}
+    {isModalOpen && (
       <StockChartModal
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
@@ -277,6 +270,7 @@ const StockListItem = ({
         eventTime={eventTime}
         size="6xl"
       />
+    )}
     </>
   );
 };