update ui

src/components/Citation/CitedContent.js

@@ -21,6 +21,8 @@ const { Text } = Typography;
  * @param {Object} props.prefixStyle - 前缀标签的自定义样式（可选）
  * @param {boolean} props.showAIBadge - 是否显示右上角 AI 标识，默认 true（可选）
  * @param {Object} props.containerStyle - 容器额外样式（可选）
+ * @param {string} props.textColor - 文本颜色，默认自动判断背景色（可选）
+ * @param {string} props.titleColor - 标题颜色，默认继承 textColor（可选）
  *
  * @example
  * <CitedContent
@@ -30,6 +32,7 @@ const { Text } = Typography;
  *   prefixStyle={{ color: '#666' }}
  *   showAIBadge={true}
  *   containerStyle={{ marginTop: 16 }}
+ *   textColor="#E2E8F0"
  * />
  */
 const CitedContent = ({
@@ -38,7 +41,9 @@ const CitedContent = ({
     prefix = '',
     prefixStyle = {},
     showAIBadge = true,
-    containerStyle = {}
+    containerStyle = {},
+    textColor,
+    titleColor
 }) => {
     // 处理数据
     const processed = processCitationData(data);
@@ -52,6 +57,19 @@ const CitedContent = ({
         return null;
     }
 
+    // 自动判断文本颜色：如果容器背景是深色，使用浅色文本
+    const bgColor = containerStyle.backgroundColor;
+    const isDarkBg = bgColor && (
+        bgColor.includes('rgba(0,0,0') ||
+        bgColor.includes('rgba(0, 0, 0') ||
+        bgColor === 'transparent' ||
+        bgColor.includes('#1A202C') ||
+        bgColor.includes('#171923')
+    );
+
+    const finalTextColor = textColor || (isDarkBg ? '#E2E8F0' : '#262626');
+    const finalTitleColor = titleColor || finalTextColor;
+
     return (
         <div
             style={{
@@ -87,7 +105,7 @@ const CitedContent = ({
             {/* 标题栏 */}
             {title && (
                 <div style={{ marginBottom: 12, paddingRight: 80 }}>
-                    <Text strong style={{ fontSize: 14 }}>
+                    <Text strong style={{ fontSize: 14, color: finalTitleColor }}>
                         {title}
                     </Text>
                 </div>
@@ -105,6 +123,7 @@ const CitedContent = ({
                         fontWeight: 'bold',
                         display: 'inline',
                         marginRight: 4,
+                        color: finalTextColor,
                         ...prefixStyle
                     }}>
                         {prefix}
@@ -114,7 +133,7 @@ const CitedContent = ({
                 {processed.segments.map((segment, index) => (
                     <React.Fragment key={`segment-${segment.citationId}`}>
                         {/* 文本片段 */}
-                        <Text style={{ fontSize: 14, display: 'inline' }}>
+                        <Text style={{ fontSize: 14, display: 'inline', color: finalTextColor }}>
                             {segment.text}
                         </Text>
 
@@ -126,7 +145,7 @@ const CitedContent = ({
 
                         {/* 在片段之间添加逗号分隔符（最后一个不加） */}
                         {index < processed.segments.length - 1 && (
-                            <Text style={{ fontSize: 14, display: 'inline' }}>，</Text>
+                            <Text style={{ fontSize: 14, display: 'inline', color: finalTextColor }}>，</Text>
                         )}
                     </React.Fragment>
                 ))}