75 lines
1.9 KiB
JavaScript
75 lines
1.9 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Card, Tabs, Typography, Space, Button, Empty } from 'antd';
|
|
import {
|
|
FileTextOutlined,
|
|
PartitionOutlined,
|
|
CopyOutlined,
|
|
PictureOutlined,
|
|
BulbOutlined
|
|
} from '@ant-design/icons';
|
|
import MarkdownRenderer from './MarkdownRenderer';
|
|
import MindMap from './MindMap';
|
|
|
|
const { Title, Text } = Typography;
|
|
|
|
const ContentViewer = ({
|
|
content,
|
|
title,
|
|
emptyMessage = "暂无内容",
|
|
summaryActions = null,
|
|
mindmapActions = null
|
|
}) => {
|
|
const [activeTab, setActiveTab] = useState('summary');
|
|
|
|
if (!content) {
|
|
return (
|
|
<Card bordered={false} style={{ borderRadius: 12 }}>
|
|
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={emptyMessage} />
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
const items = [
|
|
{
|
|
key: 'summary',
|
|
label: <Space><FileTextOutlined />智能摘要</Space>,
|
|
children: (
|
|
<div style={{ padding: '8px 0' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
|
|
<Space>{summaryActions}</Space>
|
|
</div>
|
|
<MarkdownRenderer content={content} />
|
|
</div>
|
|
)
|
|
},
|
|
{
|
|
key: 'mindmap',
|
|
label: <Space><PartitionOutlined />思维导图</Space>,
|
|
children: (
|
|
<div style={{ padding: '8px 0' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
|
|
<Space>{mindmapActions}</Space>
|
|
</div>
|
|
<div style={{ minHeight: 500, background: '#f8fafc', borderRadius: 12 }}>
|
|
<MindMap content={content} title={title} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
];
|
|
|
|
return (
|
|
<Card bordered={false} bodyStyle={{ padding: '12px 24px' }} style={{ borderRadius: 12 }}>
|
|
<Tabs
|
|
className="console-tabs"
|
|
activeKey={activeTab}
|
|
onChange={setActiveTab}
|
|
items={items}
|
|
size="large"
|
|
/>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default ContentViewer;
|