feat: 抽离关联描述组件

src/components/StockRelation/RelationDescription.tsx

@@ -0,0 +1,121 @@
+/**
+ * 关联描述组件
+ *
+ * 用于显示股票与事件的关联描述信息
+ * 固定标题为"关联描述:"
+ * 自动处理多种数据格式（字符串、对象数组）
+ *
+ * @example
+ * ```tsx
+ * // 基础使用 - 传入原始 relation_desc 数据
+ * <RelationDescription relationDesc={stock.relation_desc} />
+ *
+ * // 自定义样式
+ * <RelationDescription
+ *   relationDesc={stock.relation_desc}
+ *   fontSize="md"
+ *   titleColor="blue.700"
+ * />
+ * ```
+ */
+
+import React, { useMemo } from 'react';
+import { Box, Text, BoxProps } from '@chakra-ui/react';
+
+/**
+ * 关联描述数据类型
+ * - 字符串格式：直接的描述文本
+ * - 对象格式：包含多个句子的数组
+ */
+export type RelationDescType =
+  | string
+  | {
+      data: Array<{
+        query_part?: string;
+        sentences?: string;
+      }>;
+    }
+  | null
+  | undefined;
+
+export interface RelationDescriptionProps {
+  /** 原始关联描述数据（支持字符串或对象格式） */
+  relationDesc: RelationDescType;
+
+  /** 字体大小，默认 'sm' */
+  fontSize?: string;
+
+  /** 标题颜色，默认 'gray.700' */
+  titleColor?: string;
+
+  /** 文本颜色，默认 'gray.600' */
+  textColor?: string;
+
+  /** 行高，默认 '1.7' */
+  lineHeight?: string;
+
+  /** 容器额外属性 */
+  containerProps?: BoxProps;
+}
+
+export const RelationDescription: React.FC<RelationDescriptionProps> = ({
+  relationDesc,
+  fontSize = 'sm',
+  titleColor = 'gray.700',
+  textColor = 'gray.600',
+  lineHeight = '1.7',
+  containerProps = {}
+}) => {
+  // 处理关联描述（兼容对象和字符串格式）
+  const processedDesc = useMemo(() => {
+    if (!relationDesc) return null;
+
+    // 字符串格式：直接返回
+    if (typeof relationDesc === 'string') {
+      return relationDesc;
+    }
+
+    // 对象格式：提取并拼接文本
+    if (typeof relationDesc === 'object' && relationDesc.data && Array.isArray(relationDesc.data)) {
+      return (
+        relationDesc.data
+          .map((item) => item.query_part || item.sentences || '')
+          .filter((s) => s)
+          .join('；') || null
+      );
+    }
+
+    return null;
+  }, [relationDesc]);
+
+  // 如果没有有效的描述内容，不渲染组件
+  if (!processedDesc) {
+    return null;
+  }
+
+  return (
+    <Box
+      p={4}
+      borderTop="1px solid"
+      borderTopColor="gray.200"
+      {...containerProps}
+    >
+      <Text
+        fontSize={fontSize}
+        fontWeight="bold"
+        mb={2}
+        color={titleColor}
+      >
+        关联描述:
+      </Text>
+      <Text
+        fontSize={fontSize}
+        color={textColor}
+        lineHeight={lineHeight}
+        whiteSpace="pre-wrap"
+      >
+        {processedDesc}
+      </Text>
+    </Box>
+  );
+};