feat: 调整关联描述UI

src/components/StockChart/StockChartModal.js

@@ -1,5 +1,5 @@
 // src/components/StockChart/StockChartModal.js - 统一的股票图表组件
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Button, ButtonGroup, VStack, HStack, Text, Badge, Box, Flex, CircularProgress } from '@chakra-ui/react';
 import ReactECharts from 'echarts-for-react';
 import * as echarts from 'echarts';
@@ -24,24 +24,26 @@ const StockChartModal = ({
     const [chartData, setChartData] = useState(null);
     const [preloadedData, setPreloadedData] = useState({});
 
-    // 处理关联描述（兼容对象和字符串格式）
-    const getRelationDesc = () => {
-        const relationDesc = stock?.relation_desc;
+    // 处理关联描述（兼容对象和字符串格式）- 使用 useMemo 缓存计算结果
+    const relationDesc = useMemo(() => {
+        const desc = stock?.relation_desc;
 
-        if (!relationDesc) return null;
+        if (!desc) return null;
 
-        if (typeof relationDesc === 'string') {
-            return relationDesc;
-        } else if (typeof relationDesc === 'object' && relationDesc.data && Array.isArray(relationDesc.data)) {
+        if (typeof desc === 'string') {
+            return desc;
+        }
+
+        if (typeof desc === 'object' && desc.data && Array.isArray(desc.data)) {
             // 新格式：{data: [{query_part: "...", sentences: "..."}]}
-            return relationDesc.data
+            return desc.data
                 .map(item => item.query_part || item.sentences || '')
                 .filter(s => s)
                 .join('；') || null;
         }
 
         return null;
-    };
+    }, [stock?.relation_desc]);
 
     // 预加载数据
     const preloadData = async (type) => {
@@ -540,7 +542,8 @@ const StockChartModal = ({
                 </ModalHeader>
                 <ModalCloseButton />
                 <ModalBody p={0} overflowY="auto" maxH="calc(90vh - 120px)">
-                    <Box h="400px" w="100%" position="relative">
+                    {/* 图表区域 */}
+                    <Box h="500px" w="100%" position="relative">
                         {loading && (
                             <Flex
                                 position="absolute"
@@ -559,10 +562,20 @@ const StockChartModal = ({
                         <div ref={chartRef} style={{ height: '100%', width: '100%', minHeight: '500px' }} />
                     </Box>
 
-                    {getRelationDesc() && (
+                    {/* 关联描述 */}
+                    {relationDesc && (
                         <Box p={4} borderTop="1px solid" borderTopColor="gray.200">
-                            <Text fontSize="sm" fontWeight="bold" mb={2}>关联描述:</Text>
-                            <Text fontSize="sm" color="gray.600">{getRelationDesc()}</Text>
+                            <Text fontSize="sm" fontWeight="bold" mb={2} color="gray.700">
+                                关联描述:
+                            </Text>
+                            <Text
+                                fontSize="sm"
+                                color="gray.600"
+                                lineHeight="1.7"
+                                whiteSpace="pre-wrap"
+                            >
+                                {relationDesc}
+                            </Text>
                         </Box>
                     )}