84 lines
2.4 KiB
React
84 lines
2.4 KiB
React
|
import React from 'react';
|
|||
|
|
import { Tabs } from 'antd';
|
|||
|
|
import { FileText, Brain } from 'lucide-react';
|
|||
|
|
import MindMap from './MindMap';
|
|||
|
|
import MarkdownRenderer from './MarkdownRenderer';
|
|||
|
|
import './ContentViewer.css';
|
|||
|
|
|
|||
|
|
const { TabPane } = Tabs;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* ContentViewer - 纯展示组件，用于显示Markdown内容和脑图
|
|||
|
|
*
|
|||
|
|
* 设计原则：
|
|||
|
|
* 1. 组件只负责纯展示，不处理数据获取
|
|||
|
|
* 2. 父组件负责数据准备和导出功能
|
|||
|
|
* 3. 通过props传入已准备好的content
|
|||
|
|
*
|
|||
|
|
* @param {Object} props
|
|||
|
|
* @param {string} props.content - Markdown格式的内容（必须由父组件准备好）
|
|||
|
|
* @param {string} props.title - 标题（用于脑图显示）
|
|||
|
|
* @param {string} props.emptyMessage - 内容为空时的提示消息
|
|||
|
|
* @param {React.ReactNode} props.summaryActions - 总结tab的额外操作按钮（如导出）
|
|||
|
|
* @param {React.ReactNode} props.mindmapActions - 脑图tab的额外操作按钮（如导出）
|
|||
|
|
*/
|
|||
|
|
const ContentViewer = ({
|
|||
|
|
content,
|
|||
|
|
title,
|
|||
|
|
emptyMessage = '暂无内容',
|
|||
|
|
summaryActions,
|
|||
|
|
mindmapActions
|
|||
|
|
}) => {
|
|||
|
|
return (
|
|||
|
|
<div className="content-viewer">
|
|||
|
|
<Tabs defaultActiveKey="content">
|
|||
|
|
<TabPane
|
|||
|
|
tab={
|
|||
|
|
<span>
|
|||
|
|
<FileText size={16} /> 摘要
|
|||
|
|
</span>
|
|||
|
|
}
|
|||
|
|
key="content"
|
|||
|
|
>
|
|||
|
|
<div className="tab-header">
|
|||
|
|
<h2><FileText size={20} /> AI总结</h2>
|
|||
|
|
{summaryActions && <div className="tab-actions">{summaryActions}</div>}
|
|||
|
|
</div>
|
|||
|
|
<div className="content-markdown">
|
|||
|
|
<MarkdownRenderer
|
|||
|
|
content={content}
|
|||
|
|
className=""
|
|||
|
|
emptyMessage={emptyMessage}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</TabPane>
|
|||
|
|
|
|||
|
|
<TabPane
|
|||
|
|
tab={
|
|||
|
|
<span>
|
|||
|
|
<Brain size={16} /> 脑图
|
|||
|
|
</span>
|
|||
|
|
}
|
|||
|
|
key="mindmap"
|
|||
|
|
>
|
|||
|
|
<div className="tab-header">
|
|||
|
|
<h2><Brain size={18} /> 思维导图</h2>
|
|||
|
|
{mindmapActions && <div className="tab-actions">{mindmapActions}</div>}
|
|||
|
|
</div>
|
|||
|
|
{content ? (
|
|||
|
|
<MindMap
|
|||
|
|
content={content}
|
|||
|
|
title={title}
|
|||
|
|
initialScale={1.8}
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<div className="empty-content">等待内容生成后查看脑图</div>
|
|||
|
|
)}
|
|||
|
|
</TabPane>
|
|||
|
|
</Tabs>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default ContentViewer;
|