feat: 抽离关联描述组件

src/components/StockChart/StockChartModal.js

@@ -7,6 +7,7 @@ import dayjs from 'dayjs';
 import { stockService } from '../../services/eventService';
 import { logger } from '../../utils/logger';
 import RiskDisclaimer from '../RiskDisclaimer';
+import { RelationDescription } from '../StockRelation';
 
 const StockChartModal = ({
     isOpen,
@@ -24,27 +25,6 @@ const StockChartModal = ({
     const [chartData, setChartData] = useState(null);
     const [preloadedData, setPreloadedData] = useState({});
 
-    // 处理关联描述（兼容对象和字符串格式）- 使用 useMemo 缓存计算结果
-    const relationDesc = useMemo(() => {
-        const desc = stock?.relation_desc;
-
-        if (!desc) return null;
-
-        if (typeof desc === 'string') {
-            return desc;
-        }
-
-        if (typeof desc === 'object' && desc.data && Array.isArray(desc.data)) {
-            // 新格式：{data: [{query_part: "...", sentences: "..."}]}
-            return desc.data
-                .map(item => item.query_part || item.sentences || '')
-                .filter(s => s)
-                .join('；') || null;
-        }
-
-        return null;
-    }, [stock?.relation_desc]);
-
     // 预加载数据
     const preloadData = async (type) => {
         if (!stock || preloadedData[type]) return;
@@ -563,21 +543,7 @@ const StockChartModal = ({
                     </Box>
 
                     {/* 关联描述 */}
-                    {relationDesc && (
-                        <Box p={4} borderTop="1px solid" borderTopColor="gray.200">
-                            <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>
-                    )}
+                    <RelationDescription relationDesc={stock?.relation_desc} />
 
                     {/* 风险提示 */}
                     <Box px={4} pb={4}>