import React, { useState, useEffect, useRef } from 'react'; import { Transformer } from 'markmap-lib'; import { Markmap } from 'markmap-view'; import apiClient from '../utils/apiClient'; import { API_ENDPOINTS } from '../config/api'; import { Brain, Download, Loader } from 'lucide-react'; const MindMap = ({ meetingId, meetingTitle }) => { const [markdown, setMarkdown] = useState(''); const [loading, setLoading] = useState(true); const [error, setError] = useState(''); const [hasSummary, setHasSummary] = useState(false); const svgRef = useRef(null); const markmapRef = useRef(null); useEffect(() => { const fetchSummary = async () => { try { setLoading(true); const endpoint = API_ENDPOINTS.MEETINGS.DETAIL(meetingId); const response = await apiClient.get(endpoint); const summary = response.data?.summary; if (summary) { setMarkdown(summary); setHasSummary(true); } else { setMarkdown('# 暂无会议总结\n\n请先生成AI总结，才能查看思维导图。'); setHasSummary(false); } } catch (err) { console.error('Failed to fetch summary for mind map:', err); setError('无法加载会议总结内容。'); setMarkdown('# 加载失败\n\n无法加载会议总结内容，请稍后重试。'); setHasSummary(false); } finally { setLoading(false); } }; if (meetingId) { fetchSummary(); } }, [meetingId]); useEffect(() => { if (loading || !markdown || !svgRef.current) return; const transformer = new Transformer(); const { root } = transformer.transform(markdown); if (markmapRef.current) { markmapRef.current.setData(root); } else { markmapRef.current = Markmap.create(svgRef.current, null, root); } markmapRef.current.fit(); }, [markdown, loading]); const handleExportPDF = async () => { if (!svgRef.current) { alert('思维导图尚未渲染，无法导出。'); return; } try { // 获取SVG元素 const svgElement = svgRef.current; const svgHTML = svgElement.outerHTML; if (!svgHTML.trim()) { alert('思维导图内容为空，无法导出。'); return; } // 获取SVG的尺寸 const svgRect = svgElement.getBoundingClientRect(); const svgWidth = svgRect.width || 800; const svgHeight = svgRect.height || 600; // 创建一个隐藏的iframe用于打印 const printFrame = document.createElement('iframe'); printFrame.style.position = 'fixed'; printFrame.style.width = '0'; printFrame.style.height = '0'; printFrame.style.border = 'none'; printFrame.style.left = '-9999px'; document.body.appendChild(printFrame); // 创建HTML内容 const htmlContent = ` ${meetingTitle || '会议思维导图'}

${meetingTitle || '会议思维导图'}

${svgHTML}

`; // 使用Blob创建URL以确保正确的编码 const blob = new Blob([htmlContent], { type: 'text/html; charset=UTF-8' }); const url = URL.createObjectURL(blob); // 设置iframe的src为blob URL printFrame.src = url; // 等待iframe加载完成 printFrame.onload = () => { setTimeout(() => { try { // 执行打印 printFrame.contentWindow.focus(); printFrame.contentWindow.print(); } catch(e) { console.error("Print failed:", e); alert("导出PDF失败，您的浏览器可能阻止了打印操作。"); } // 清理资源 setTimeout(() => { URL.revokeObjectURL(url); document.body.removeChild(printFrame); }, 2000); }, 500); }; } catch (error) { console.error('PDF导出失败:', error); alert('PDF导出失败，请重试。'); } }; if (loading) { return (

正在加载思维导图...

); } return (

思维导图

{hasSummary && ( )}

); }; export default MindMap;