105 lines
3.3 KiB
JavaScript
105 lines
3.3 KiB
JavaScript
// 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;
|