feat: 添加悬浮弹窗能力

2025-10-15 18:22:02 +08:00
parent c88aafcc04
commit 0bc1892086
3 changed files with 375 additions and 0 deletions
--- a/src/components/Citation/CitedContent.js
+++ b/src/components/Citation/CitedContent.js
@@ -0,0 +1,104 @@
+// src/components/Citation/CitedContent.js
+import React from 'react';
+import { Typography, Space, Tag } from 'antd';
+import { RobotOutlined, FileSearchOutlined } from '@ant-design/icons';
+import CitationMark from './CitationMark';
+import { processCitationData } from '../../utils/citationUtils';
+
+const { Text } = Typography;
+
+/**
+ * 带引用标注的内容组件
+ * 展示拼接的文本，每句话后显示上标引用【1】【2】【3】
+ * 支持鼠标悬浮和点击查看引用来源
+ *
+ * @param {Object} props
+ * @param {Object} props.data - API 返回的原始数据 { data: [...] }
+ * @param {string} props.title - 标题文本，默认 "AI 分析结果"
+ * @param {boolean} props.showAIBadge - 是否显示 AI 生成标识，默认 true
+ * @param {Object} props.containerStyle - 容器额外样式（可选）
+ *
+ * @example
+ * <CitedContent
+ *   data={apiData}
+ *   title="关联描述"
+ *   showAIBadge={true}
+ *   containerStyle={{ marginTop: 16 }}
+ * />
+ */
+const CitedContent = ({
+    data,
+    title = 'AI 分析结果',
+    showAIBadge = true,
+    containerStyle = {}
+}) => {
+    // 处理数据
+    const processed = processCitationData(data);
+
+    // 如果数据无效，不渲染
+    if (!processed) {
+        console.warn('CitedContent: Invalid data, not rendering');
+        return null;
+    }
+
+    return (
+        <div
+            style={{
+                backgroundColor: '#f5f5f5',
+                borderRadius: 6,
+                padding: 16,
+                ...containerStyle
+            }}
+        >
+            {/* 标题栏 */}
+            <Space
+                style={{
+                    width: '100%',
+                    justifyContent: 'space-between',
+                    marginBottom: 12
+                }}
+            >
+                <Space>
+                    <FileSearchOutlined style={{ color: '#1890ff', fontSize: 16 }} />
+                    <Text strong style={{ fontSize: 14 }}>
+                        {title}
+                    </Text>
+                </Space>
+                {showAIBadge && (
+                    <Tag
+                        icon={<RobotOutlined />}
+                        color="purple"
+                        style={{ margin: 0 }}
+                    >
+                        AI 生成
+                    </Tag>
+                )}
+            </Space>
+
+            {/* 带引用的文本内容 */}
+            <div style={{ lineHeight: 1.8 }}>
+                {processed.segments.map((segment, index) => (
+                    <React.Fragment key={`segment-${segment.citationId}`}>
+                        {/* 文本片段 */}
+                        <Text style={{ fontSize: 14 }}>
+                            {segment.text}
+                        </Text>
+
+                        {/* 引用标记 */}
+                        <CitationMark
+                            citationId={segment.citationId}
+                            citation={processed.citations[segment.citationId]}
+                        />
+
+                        {/* 在片段之间添加逗号分隔符（最后一个不加） */}
+                        {index < processed.segments.length - 1 && (
+                            <Text style={{ fontSize: 14 }}>，</Text>
+                        )}
+                    </React.Fragment>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default CitedContent;