338 lines
11 KiB
JavaScript
338 lines
11 KiB
JavaScript
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, Image, Loader } from 'lucide-react';
|
||
import html2canvas from 'html2canvas';
|
||
|
||
const MindMap = ({ meetingId, meetingTitle, meeting, formatDateTime }) => {
|
||
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]);
|
||
|
||
// 提取关键短语的函数
|
||
const extractKeyPhrases = (text) => {
|
||
// 移除markdown格式
|
||
const cleanText = text.replace(/\*\*([^*]+)\*\*/g, '$1');
|
||
|
||
// 按标点符号分割
|
||
const phrases = cleanText.split(/[，。；、：]/);
|
||
const keyPhrases = [];
|
||
|
||
phrases.forEach(phrase => {
|
||
const trimmed = phrase.trim();
|
||
// 只保留包含重要关键词的短语，且长度适中
|
||
if (trimmed.length > 4 && trimmed.length < 40) {
|
||
const hasKeywords = /(?:项目|收入|问题|产品|团队|开发|验收|成本|功能|市场|合作|资源|计划|目标|业务|投入|效率|协作|管理|分析|讨论|决策|优化|整合)/.test(trimmed);
|
||
if (hasKeywords) {
|
||
keyPhrases.push(trimmed);
|
||
}
|
||
}
|
||
});
|
||
|
||
// 如果没有找到关键短语，至少保留一个总结性的短语
|
||
if (keyPhrases.length === 0 && phrases.length > 0) {
|
||
const firstPhrase = phrases[0].trim();
|
||
if (firstPhrase.length > 0 && firstPhrase.length < 50) {
|
||
keyPhrases.push(firstPhrase);
|
||
}
|
||
}
|
||
|
||
// 最多返回3个关键短语
|
||
return keyPhrases.slice(0, 3);
|
||
};
|
||
|
||
// 预处理markdown，确保格式适合生成思维导图
|
||
const preprocessMarkdownForMindMap = (markdown) => {
|
||
if (!markdown || markdown.trim() === '') return '# 暂无内容';
|
||
|
||
let processed = markdown.trim();
|
||
|
||
// 移除分隔线
|
||
processed = processed.replace(/^---+$/gm, '');
|
||
|
||
// 如果没有主标题，添加一个
|
||
if (!processed.startsWith('# ')) {
|
||
processed = `# 会议总结\n\n${processed}`;
|
||
}
|
||
|
||
const lines = processed.split('\n');
|
||
const processedLines = [];
|
||
let i = 0;
|
||
|
||
while (i < lines.length) {
|
||
const line = lines[i].trim();
|
||
|
||
if (line === '') {
|
||
i++;
|
||
continue;
|
||
}
|
||
|
||
// 处理标题行 - 保持标题格式不变
|
||
if (line.match(/^#+\s+/)) {
|
||
// 清理标题格式，移除粗体和多余符号，但保持标题符号
|
||
let cleanTitle = line.replace(/\*\*([^*]+)\*\*/g, '$1'); // 移除粗体
|
||
processedLines.push(cleanTitle);
|
||
|
||
// 获取标题级别
|
||
const titleLevel = (line.match(/^#+/) || [''])[0].length;
|
||
}
|
||
// 处理现有列表项（有序和无序） - 保持其原始结构
|
||
else if (line.match(/^\s*([-*+]|\d+\.)\s+/)) {
|
||
// 只移除加粗格式，保留原始行，包括缩进和列表标记
|
||
const cleanedLine = line.replace(/\*\*([^*]+)\*\*/g, '$1');
|
||
processedLines.push(cleanedLine);
|
||
}
|
||
// 将区块引用转换为列表项
|
||
else if (line.startsWith('>')) {
|
||
const content = line.replace(/^>+\s*/, '');
|
||
processedLines.push(`- ${content}`);
|
||
}
|
||
// 保持表格原样，让markmap自己处理
|
||
else if (line.includes('|')) {
|
||
processedLines.push(line);
|
||
}
|
||
// 处理其他普通段落 - 保留原样
|
||
else if (line.length > 0 && !line.match(/\*\*总字数：\d+字\*\*/)) {
|
||
processedLines.push(line);
|
||
}
|
||
|
||
i++;
|
||
}
|
||
|
||
// 清理结果
|
||
const result = processedLines
|
||
.filter(line => line.trim().length > 0)
|
||
.join('\n');
|
||
|
||
return result;
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (loading || !markdown || !svgRef.current) return;
|
||
|
||
try {
|
||
const processedMarkdown = preprocessMarkdownForMindMap(markdown);
|
||
console.log('=== 思维导图数据调试 ===');
|
||
console.log('原始markdown内容:');
|
||
console.log(markdown);
|
||
console.log('预处理后的markdown:');
|
||
console.log(processedMarkdown);
|
||
|
||
const transformer = new Transformer();
|
||
const { root } = transformer.transform(processedMarkdown);
|
||
|
||
if (markmapRef.current) {
|
||
markmapRef.current.setData(root);
|
||
} else {
|
||
markmapRef.current = Markmap.create(svgRef.current, null, root);
|
||
}
|
||
|
||
markmapRef.current.fit();
|
||
|
||
// 延迟一下再次调用fit，确保内容完全渲染
|
||
setTimeout(() => {
|
||
if (markmapRef.current) {
|
||
markmapRef.current.fit();
|
||
}
|
||
}, 500);
|
||
|
||
} catch (error) {
|
||
console.error('思维导图渲染失败:', error);
|
||
setError('思维导图渲染失败');
|
||
}
|
||
|
||
}, [markdown, loading]);
|
||
|
||
const handleExportImage = async () => {
|
||
if (!svgRef.current || !hasSummary) {
|
||
alert('思维导图尚未渲染或无总结内容，无法导出。');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 获取SVG元素
|
||
const svgElement = svgRef.current;
|
||
|
||
// 获取SVG的viewBox或实际内容边界
|
||
const svgBBox = svgElement.querySelector('g')?.getBBox() || { width: 800, height: 600 };
|
||
const svgRect = svgElement.getBoundingClientRect();
|
||
|
||
// 使用更保守的尺寸计算，确保内容完整
|
||
const contentWidth = Math.max(svgBBox.width, svgRect.width, 800);
|
||
const contentHeight = Math.max(svgBBox.height, svgRect.height, 400);
|
||
|
||
// 添加足够的边距
|
||
const containerWidth = contentWidth + 200; // 左右各100px边距
|
||
const containerHeight = contentHeight + 200; // 上下各100px边距
|
||
|
||
// 创建导出容器
|
||
const exportContainer = document.createElement('div');
|
||
exportContainer.style.cssText = `
|
||
position: fixed;
|
||
top: -10000px;
|
||
left: -10000px;
|
||
width: ${containerWidth}px;
|
||
background: white;
|
||
padding: 40px;
|
||
font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
|
||
`;
|
||
|
||
// 克隆SVG元素
|
||
const svgClone = svgElement.cloneNode(true);
|
||
svgClone.style.width = `${contentWidth}px`;
|
||
svgClone.style.height = `${contentHeight}px`;
|
||
svgClone.style.display = 'block';
|
||
|
||
exportContainer.innerHTML = `
|
||
<div style="margin-bottom: 40px;">
|
||
<h1 style="color: #2563eb; font-size: 28px; margin-bottom: 30px; border-bottom: 2px solid #e5e7eb; padding-bottom: 15px; text-align: center;">
|
||
${meetingTitle || '会议思维导图'}
|
||
</h1>
|
||
|
||
<div style="background: #f9fafb; padding: 25px; margin-bottom: 35px; border-radius: 8px; border: 1px solid #e5e7eb;">
|
||
<h2 style="color: #374151; font-size: 20px; margin: 0 0 20px; border-bottom: 1px solid #d1d5db; padding-bottom: 10px;">
|
||
📋 会议信息
|
||
</h2>
|
||
${meeting ? `
|
||
<p style="margin: 12px 0; font-size: 16px;"><strong>会议时间：</strong>${formatDateTime ? formatDateTime(meeting.meeting_time) : new Date(meeting.meeting_time).toLocaleString('zh-CN')}</p>
|
||
<p style="margin: 12px 0; font-size: 16px;"><strong>创建人：</strong>${meeting.creator_username}</p>
|
||
<p style="margin: 12px 0; font-size: 16px;"><strong>参会人数：</strong>${meeting.attendees.length}人</p>
|
||
<p style="margin: 12px 0; font-size: 16px;"><strong>参会人员：</strong>${meeting.attendees.map(attendee =>
|
||
typeof attendee === 'string' ? attendee : attendee.caption
|
||
).join('、')}</p>
|
||
` : `
|
||
<p style="margin: 12px 0; font-size: 16px; color: #6b7280;">会议信息加载中...</p>
|
||
`}
|
||
</div>
|
||
|
||
<div>
|
||
<h2 style="color: #374151; font-size: 20px; margin: 0 0 20px; border-bottom: 1px solid #d1d5db; padding-bottom: 10px;">
|
||
🧠 思维导图
|
||
</h2>
|
||
<div id="mindmap-wrapper" style="
|
||
border: 2px solid #e5e7eb;
|
||
border-radius: 12px;
|
||
padding: 30px;
|
||
background: #fafafa;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: ${contentWidth + 60}px;
|
||
height: ${contentHeight + 60}px;
|
||
overflow: visible;
|
||
">
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 40px; padding-top: 20px; border-top: 1px solid #e5e7eb; text-align: center; color: #6b7280; font-size: 14px;">
|
||
导出时间：${new Date().toLocaleString('zh-CN')}
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// 添加SVG到容器
|
||
const mapContainer = exportContainer.querySelector('#mindmap-wrapper');
|
||
mapContainer.appendChild(svgClone);
|
||
|
||
document.body.appendChild(exportContainer);
|
||
|
||
// 等待渲染完成
|
||
await new Promise(resolve => setTimeout(resolve, 500));
|
||
|
||
// 使用html2canvas生成图片
|
||
const canvas = await html2canvas(exportContainer, {
|
||
width: containerWidth + 80, // 加上padding
|
||
height: exportContainer.offsetHeight,
|
||
scale: 2, // 高分辨率
|
||
useCORS: true,
|
||
allowTaint: true,
|
||
backgroundColor: '#ffffff',
|
||
scrollX: 0,
|
||
scrollY: 0,
|
||
logging: false
|
||
});
|
||
|
||
// 创建下载链接
|
||
const link = document.createElement('a');
|
||
link.download = `${meetingTitle || '思维导图'}_脑图_${new Date().toISOString().slice(0, 10)}.png`;
|
||
link.href = canvas.toDataURL('image/png', 1.0);
|
||
|
||
// 触发下载
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
|
||
// 清理DOM
|
||
document.body.removeChild(exportContainer);
|
||
|
||
} catch (error) {
|
||
console.error('图片导出失败:', error);
|
||
alert('图片导出失败，请重试。');
|
||
}
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="mindmap-loading">
|
||
<Loader className="animate-spin" />
|
||
<p>正在加载思维导图...</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="mindmap-container">
|
||
<div className="mindmap-header">
|
||
<h3><Brain size={18} /> 思维导图</h3>
|
||
{hasSummary && (
|
||
<button onClick={handleExportImage} className="export-pdf-btn-main" disabled={loading || !!error}>
|
||
<Image size={16} />
|
||
<span>导出图片</span>
|
||
</button>
|
||
)}
|
||
</div>
|
||
<div className="markmap-render-area">
|
||
<svg ref={svgRef} style={{ width: '100%', height: '100%' }} />
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default MindMap;
|