From 656bc60194a30df092794201fad57a56e6cce292 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 5 Nov 2025 11:09:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=82=A1=E7=A5=A8?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=B8=83=E5=B1=80=E5=92=8C=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E6=80=A7=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../DynamicNewsDetail/StockListItem.js        | 102 +++++++++---------
 1 file changed, 48 insertions(+), 54 deletions(-)

diff --git a/src/views/Community/components/DynamicNewsDetail/StockListItem.js b/src/views/Community/components/DynamicNewsDetail/StockListItem.js
index 62d7e684..1a3ea80d 100644
--- a/src/views/Community/components/DynamicNewsDetail/StockListItem.js
+++ b/src/views/Community/components/DynamicNewsDetail/StockListItem.js
@@ -6,7 +6,6 @@ import {
   Box,
   Flex,
   VStack,
-  SimpleGrid,
   Text,
   Button,
   IconButton,
@@ -167,56 +166,49 @@ const StockListItem = ({
             </Flex>
           </Flex>
 
-          {/* 第二行：公司名称（彩色高亮） */}
-          <Text
-            fontSize="sm"
-            fontWeight="medium"
-            color={codeColor}
-            bg={useColorModeValue('blue.50', 'blue.900')}
-            px={2}
-            py={0.5}
-            borderRadius="sm"
-            width="fit-content"
-          >
-            {stock.stock_name}
-          </Text>
+          {/* 第二行：公司名称 + 分时图 + K线图 */}
+          <Flex align="center" gap={3}>
+            {/* 左侧：公司名称 */}
+            <Text
+              fontSize="sm"
+              fontWeight="medium"
+              color={codeColor}
+              bg={useColorModeValue('blue.50', 'blue.900')}
+              px={2}
+              py={0.5}
+              borderRadius="sm"
+              whiteSpace="nowrap"
+              flexShrink={0}
+            >
+              {stock.stock_name}
+            </Text>
+
+            {/* 右侧：分时图 + K线图 */}
+            <Flex gap={2} flex={1} onClick={(e) => e.stopPropagation()}>
+              {/* 分时图 */}
+              <Box flex={1} minW={0}>
+                <MiniTimelineChart
+                  stockCode={stock.stock_code}
+                  eventTime={eventTime}
+                  onClick={() => setIsModalOpen(true)}
+                />
+              </Box>
+
+              {/* K线图 */}
+              <Box flex={1} minW={0}>
+                <MiniKLineChart
+                  stockCode={stock.stock_code}
+                  eventTime={eventTime}
+                  onClick={() => setIsModalOpen(true)}
+                />
+              </Box>
+            </Flex>
+          </Flex>
         </VStack>
 
         {/* 分隔线 */}
         <Box borderTop="1px solid" borderColor={dividerColor} />
 
-        {/* 分时图 & K线图 - 左右布局 */}
-        <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}
-                onClick={() => setIsModalOpen(true)}
-              />
-            </Box>
-
-            {/* 右侧：K线图 */}
-            <Box onClick={(e) => e.stopPropagation()}>
-              <Text fontSize="xs" color={descColor} mb={1} textAlign="center">
-                日K线
-              </Text>
-              <MiniKLineChart
-                stockCode={stock.stock_code}
-                eventTime={eventTime}
-                onClick={() => setIsModalOpen(true)}
-              />
-            </Box>
-          </SimpleGrid>
-        </Box>
-
-        {/* 分隔线 */}
-        <Box borderTop="1px solid" borderColor={dividerColor} />
-
         {/* 关联描述 */}
         {relationText && relationText !== '--' && (
           <Box>
@@ -269,14 +261,16 @@ const StockListItem = ({
       </VStack>
     </Box>
 
-    {/* 股票详情弹窗 */}
-    <StockChartModal
-      isOpen={isModalOpen}
-      onClose={() => setIsModalOpen(false)}
-      stock={stock}
-      eventTime={eventTime}
-      size="6xl"
-    />
+    {/* 股票详情弹窗 - 未打开时不渲染 */}
+    {isModalOpen && (
+      <StockChartModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        stock={stock}
+        eventTime={eventTime}
+        size="6xl"
+      />
+    )}
     </>
   );
 };