1105 lines
41 KiB
JavaScript
1105 lines
41 KiB
JavaScript
import React, { useState, useEffect, useRef } from 'react';
|
||
import { useParams, Link, useNavigate } from 'react-router-dom';
|
||
import axios from 'axios';
|
||
import { ArrowLeft, Clock, Users, FileText, User, Calendar, Play, Pause, Volume2, MessageCircle, Edit, Trash2, Settings, Save, X, Edit3, Brain, Sparkles, Download } from 'lucide-react';
|
||
import ReactMarkdown from 'react-markdown';
|
||
import remarkGfm from 'remark-gfm';
|
||
import rehypeRaw from 'rehype-raw';
|
||
import rehypeSanitize from 'rehype-sanitize';
|
||
import { buildApiUrl, API_ENDPOINTS, API_BASE_URL } from '../config/api';
|
||
import './MeetingDetails.css';
|
||
|
||
const MeetingDetails = ({ user }) => {
|
||
const { meeting_id } = useParams();
|
||
const navigate = useNavigate();
|
||
const [meeting, setMeeting] = useState(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState('');
|
||
const [isPlaying, setIsPlaying] = useState(false);
|
||
const [currentTime, setCurrentTime] = useState(0);
|
||
const [duration, setDuration] = useState(0);
|
||
const [volume, setVolume] = useState(1);
|
||
const [transcript, setTranscript] = useState([]);
|
||
const [showTranscript, setShowTranscript] = useState(true);
|
||
const [audioUrl, setAudioUrl] = useState(null);
|
||
const [audioFileName, setAudioFileName] = useState(null);
|
||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||
const [showSpeakerEdit, setShowSpeakerEdit] = useState(false);
|
||
const [editingSpeakers, setEditingSpeakers] = useState({});
|
||
const [speakerList, setSpeakerList] = useState([]);
|
||
const [showTranscriptEdit, setShowTranscriptEdit] = useState(false);
|
||
const [editingTranscriptIndex, setEditingTranscriptIndex] = useState(-1);
|
||
const [editingTranscripts, setEditingTranscripts] = useState({});
|
||
const [currentSubtitle, setCurrentSubtitle] = useState('');
|
||
const [currentSpeaker, setCurrentSpeaker] = useState('');
|
||
const [showSummaryModal, setShowSummaryModal] = useState(false);
|
||
const [summaryLoading, setSummaryLoading] = useState(false);
|
||
const [summaryResult, setSummaryResult] = useState(null);
|
||
const [userPrompt, setUserPrompt] = useState('');
|
||
const [summaryHistory, setSummaryHistory] = useState([]);
|
||
const [currentHighlightIndex, setCurrentHighlightIndex] = useState(-1);
|
||
const audioRef = useRef(null);
|
||
const transcriptRefs = useRef([]);
|
||
|
||
useEffect(() => {
|
||
fetchMeetingDetails();
|
||
}, [meeting_id]);
|
||
|
||
const fetchMeetingDetails = async () => {
|
||
try {
|
||
setLoading(true);
|
||
|
||
// Fallback URL construction in case config fails
|
||
const baseUrl = ""
|
||
const detailEndpoint = API_ENDPOINTS?.MEETINGS?.DETAIL?.(meeting_id) || `/api/meetings/${meeting_id}`;
|
||
const audioEndpoint = API_ENDPOINTS?.MEETINGS?.AUDIO?.(meeting_id) || `/api/meetings/${meeting_id}/audio`;
|
||
const transcriptEndpoint = API_ENDPOINTS?.MEETINGS?.TRANSCRIPT?.(meeting_id) || `/api/meetings/${meeting_id}/transcript`;
|
||
|
||
const response = await axios.get(`${baseUrl}${detailEndpoint}`);
|
||
setMeeting(response.data);
|
||
|
||
// Fetch audio file if available
|
||
try {
|
||
const audioResponse = await axios.get(`${baseUrl}${audioEndpoint}`);
|
||
// Construct URL using uploads path and relative path from database
|
||
setAudioUrl(`${baseUrl}${audioResponse.data.file_path}`);
|
||
setAudioFileName(audioResponse.data.file_name);
|
||
} catch (audioError) {
|
||
console.warn('No audio file available:', audioError);
|
||
setAudioUrl(null);
|
||
setAudioFileName(null);
|
||
}
|
||
|
||
// Fetch transcript segments from database
|
||
try {
|
||
const transcriptResponse = await axios.get(`${baseUrl}${transcriptEndpoint}`);
|
||
setTranscript(transcriptResponse.data);
|
||
|
||
console.log('First transcript item:', transcriptResponse.data[0]);
|
||
|
||
// 现在使用speaker_id字段进行分组
|
||
const allSpeakerIds = transcriptResponse.data
|
||
.map(item => item.speaker_id)
|
||
.filter(speakerId => speakerId !== null && speakerId !== undefined);
|
||
|
||
console.log('Extracted speaker IDs:', allSpeakerIds);
|
||
|
||
const uniqueSpeakers = [...new Set(allSpeakerIds)]
|
||
.map(speakerId => {
|
||
const segment = transcriptResponse.data.find(item => item.speaker_id === speakerId);
|
||
return {
|
||
speaker_id: speakerId,
|
||
speaker_tag: segment ? (segment.speaker_tag || `发言人 ${speakerId}`) : `发言人 ${speakerId}`
|
||
};
|
||
})
|
||
.sort((a, b) => a.speaker_id - b.speaker_id); // 按speaker_id数值排序
|
||
|
||
console.log('Final unique speakers:', uniqueSpeakers);
|
||
setSpeakerList(uniqueSpeakers);
|
||
|
||
// 初始化编辑状态
|
||
const initialEditingState = {};
|
||
uniqueSpeakers.forEach(speaker => {
|
||
initialEditingState[speaker.speaker_id] = speaker.speaker_tag;
|
||
});
|
||
setEditingSpeakers(initialEditingState);
|
||
|
||
} catch (transcriptError) {
|
||
console.warn('No transcript data available:', transcriptError);
|
||
setTranscript([]);
|
||
setSpeakerList([]);
|
||
}
|
||
} catch (err) {
|
||
console.error('Error fetching meeting details:', err);
|
||
setError('无法加载会议详情，请稍后重试。');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const formatDateTime = (dateTimeString) => {
|
||
if (!dateTimeString) return '时间待定';
|
||
const date = new Date(dateTimeString);
|
||
return date.toLocaleString('zh-CN', {
|
||
year: 'numeric', month: 'long', day: 'numeric',
|
||
hour: '2-digit', minute: '2-digit'
|
||
});
|
||
};
|
||
|
||
const formatTime = (seconds) => {
|
||
const mins = Math.floor(seconds / 60);
|
||
const secs = Math.floor(seconds % 60);
|
||
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||
};
|
||
|
||
const handlePlayPause = () => {
|
||
if (audioRef.current) {
|
||
if (isPlaying) {
|
||
audioRef.current.pause();
|
||
} else {
|
||
audioRef.current.play();
|
||
}
|
||
setIsPlaying(!isPlaying);
|
||
}
|
||
};
|
||
|
||
const handleTimeUpdate = () => {
|
||
if (audioRef.current) {
|
||
const currentTime = audioRef.current.currentTime;
|
||
setCurrentTime(currentTime);
|
||
|
||
// 更新字幕显示
|
||
updateSubtitle(currentTime);
|
||
}
|
||
};
|
||
|
||
const updateSubtitle = (currentTime) => {
|
||
const currentTimeMs = currentTime * 1000;
|
||
const currentSegment = transcript.find(item =>
|
||
currentTimeMs >= item.start_time_ms && currentTimeMs <= item.end_time_ms
|
||
);
|
||
|
||
if (currentSegment) {
|
||
setCurrentSubtitle(currentSegment.text_content);
|
||
// 确保使用 speaker_tag 来保持一致性
|
||
setCurrentSpeaker(currentSegment.speaker_tag || `发言人 ${currentSegment.speaker_id}`);
|
||
|
||
// 找到当前segment在transcript数组中的索引
|
||
const currentIndex = transcript.findIndex(item => item.segment_id === currentSegment.segment_id);
|
||
setCurrentHighlightIndex(currentIndex);
|
||
|
||
// 滚动到对应的转录条目
|
||
if (currentIndex !== -1 && transcriptRefs.current[currentIndex]) {
|
||
transcriptRefs.current[currentIndex].scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'center'
|
||
});
|
||
}
|
||
} else {
|
||
setCurrentSubtitle('');
|
||
setCurrentSpeaker('');
|
||
setCurrentHighlightIndex(-1);
|
||
}
|
||
};
|
||
|
||
const handleLoadedMetadata = () => {
|
||
if (audioRef.current) {
|
||
setDuration(audioRef.current.duration);
|
||
}
|
||
};
|
||
|
||
const handleSeek = (e) => {
|
||
if (!audioRef.current || !duration) return;
|
||
|
||
const rect = e.currentTarget.getBoundingClientRect();
|
||
const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
|
||
const seekTime = percent * duration;
|
||
|
||
audioRef.current.currentTime = seekTime;
|
||
setCurrentTime(seekTime);
|
||
};
|
||
|
||
const handleProgressMouseDown = (e) => {
|
||
e.preventDefault();
|
||
const handleMouseMove = (moveEvent) => {
|
||
handleSeek(moveEvent);
|
||
};
|
||
|
||
const handleMouseUp = () => {
|
||
document.removeEventListener('mousemove', handleMouseMove);
|
||
document.removeEventListener('mouseup', handleMouseUp);
|
||
};
|
||
|
||
document.addEventListener('mousemove', handleMouseMove);
|
||
document.addEventListener('mouseup', handleMouseUp);
|
||
|
||
handleSeek(e);
|
||
};
|
||
|
||
const handleVolumeChange = (e) => {
|
||
const newVolume = parseFloat(e.target.value);
|
||
setVolume(newVolume);
|
||
if (audioRef.current) {
|
||
audioRef.current.volume = newVolume;
|
||
}
|
||
};
|
||
|
||
const jumpToTime = (timestamp) => {
|
||
if (audioRef.current) {
|
||
audioRef.current.currentTime = timestamp;
|
||
setCurrentTime(timestamp);
|
||
audioRef.current.play();
|
||
setIsPlaying(true);
|
||
}
|
||
};
|
||
|
||
const handleDeleteMeeting = async () => {
|
||
try {
|
||
await axios.delete(buildApiUrl(API_ENDPOINTS.MEETINGS.DELETE(meeting_id)));
|
||
navigate('/dashboard');
|
||
} catch (err) {
|
||
console.error('Error deleting meeting:', err);
|
||
setError('删除会议失败，请重试');
|
||
}
|
||
};
|
||
|
||
const handleSpeakerTagUpdate = async (speakerId, newTag) => {
|
||
try {
|
||
const baseUrl = "";
|
||
await axios.put(`${baseUrl}/api/meetings/${meeting_id}/speaker-tags`, {
|
||
speaker_id: speakerId,
|
||
new_tag: newTag
|
||
});
|
||
|
||
// 更新本地状态
|
||
setTranscript(prev => prev.map(item =>
|
||
item.speaker_id === speakerId
|
||
? { ...item, speaker_tag: newTag }
|
||
: item
|
||
));
|
||
|
||
setSpeakerList(prev => prev.map(speaker =>
|
||
speaker.speaker_id === speakerId
|
||
? { ...speaker, speaker_tag: newTag }
|
||
: speaker
|
||
));
|
||
|
||
} catch (err) {
|
||
console.error('Error updating speaker tag:', err);
|
||
setError('更新发言人标签失败，请重试');
|
||
}
|
||
};
|
||
|
||
const handleBatchSpeakerUpdate = async () => {
|
||
try {
|
||
const baseUrl = "";
|
||
const updates = Object.entries(editingSpeakers).map(([speakerId, newTag]) => ({
|
||
speaker_id: parseInt(speakerId), // 确保传递整数类型
|
||
new_tag: newTag
|
||
}));
|
||
|
||
await axios.put(`${baseUrl}/api/meetings/${meeting_id}/speaker-tags/batch`, {
|
||
updates: updates
|
||
});
|
||
|
||
// 更新本地状态
|
||
setTranscript(prev => prev.map(item => {
|
||
const newTag = editingSpeakers[item.speaker_id];
|
||
return newTag ? { ...item, speaker_tag: newTag } : item;
|
||
}));
|
||
|
||
setSpeakerList(prev => prev.map(speaker => ({
|
||
...speaker,
|
||
speaker_tag: editingSpeakers[speaker.speaker_id] || speaker.speaker_tag
|
||
})));
|
||
|
||
setShowSpeakerEdit(false);
|
||
|
||
} catch (err) {
|
||
console.error('Error batch updating speaker tags:', err);
|
||
setError('批量更新发言人标签失败，请重试');
|
||
}
|
||
};
|
||
|
||
const handleEditingSpeakerChange = (speakerId, newTag) => {
|
||
setEditingSpeakers(prev => ({
|
||
...prev,
|
||
[speakerId]: newTag
|
||
}));
|
||
};
|
||
|
||
const handleSpeakerEditOpen = () => {
|
||
console.log('Opening speaker edit modal');
|
||
console.log('Current transcript:', transcript);
|
||
console.log('Current speakerList:', speakerList);
|
||
console.log('Current editingSpeakers:', editingSpeakers);
|
||
setShowSpeakerEdit(true);
|
||
};
|
||
|
||
const handleTranscriptEdit = (index) => {
|
||
setEditingTranscriptIndex(index);
|
||
|
||
// 获取前一条、当前条、后一条的数据
|
||
const editItems = [];
|
||
if (index > 0) editItems.push({ ...transcript[index - 1], originalIndex: index - 1 });
|
||
editItems.push({ ...transcript[index], originalIndex: index });
|
||
if (index < transcript.length - 1) editItems.push({ ...transcript[index + 1], originalIndex: index + 1 });
|
||
|
||
// 初始化编辑状态
|
||
const initialEditState = {};
|
||
editItems.forEach(item => {
|
||
initialEditState[item.originalIndex] = item.text_content;
|
||
});
|
||
setEditingTranscripts(initialEditState);
|
||
setShowTranscriptEdit(true);
|
||
};
|
||
|
||
const handleTranscriptTextChange = (index, newText) => {
|
||
setEditingTranscripts(prev => ({
|
||
...prev,
|
||
[index]: newText
|
||
}));
|
||
};
|
||
|
||
const handleSaveTranscriptEdits = async () => {
|
||
try {
|
||
const baseUrl = "";
|
||
const updates = Object.entries(editingTranscripts).map(([index, text_content]) => ({
|
||
segment_id: transcript[index].segment_id,
|
||
text_content: text_content
|
||
}));
|
||
|
||
await axios.put(`${baseUrl}/api/meetings/${meeting_id}/transcript/batch`, {
|
||
updates: updates
|
||
});
|
||
|
||
// 更新本地状态
|
||
setTranscript(prev => prev.map((item, idx) => {
|
||
const newText = editingTranscripts[idx];
|
||
return newText !== undefined ? { ...item, text_content: newText } : item;
|
||
}));
|
||
|
||
setShowTranscriptEdit(false);
|
||
setEditingTranscripts({});
|
||
setEditingTranscriptIndex(-1);
|
||
|
||
} catch (err) {
|
||
console.error('Error updating transcript:', err);
|
||
setError('更新转录内容失败，请重试');
|
||
}
|
||
};
|
||
|
||
const getEditingItems = () => {
|
||
if (editingTranscriptIndex === -1) return [];
|
||
|
||
const items = [];
|
||
const index = editingTranscriptIndex;
|
||
|
||
if (index > 0) items.push({ ...transcript[index - 1], originalIndex: index - 1, position: 'prev' });
|
||
items.push({ ...transcript[index], originalIndex: index, position: 'current' });
|
||
if (index < transcript.length - 1) items.push({ ...transcript[index + 1], originalIndex: index + 1, position: 'next' });
|
||
|
||
return items;
|
||
};
|
||
|
||
// AI总结相关函数
|
||
const generateSummary = async () => {
|
||
if (summaryLoading) return;
|
||
|
||
setSummaryLoading(true);
|
||
try {
|
||
const baseUrl = "";
|
||
const response = await axios.post(`${baseUrl}/api/meetings/${meeting_id}/generate-summary`, {
|
||
user_prompt: userPrompt
|
||
});
|
||
|
||
setSummaryResult(response.data);
|
||
|
||
// 刷新总结历史
|
||
await fetchSummaryHistory();
|
||
|
||
} catch (err) {
|
||
console.error('Error generating summary:', err);
|
||
setError('生成AI总结失败，请重试');
|
||
} finally {
|
||
setSummaryLoading(false);
|
||
}
|
||
};
|
||
|
||
const fetchSummaryHistory = async () => {
|
||
try {
|
||
const baseUrl = "";
|
||
const response = await axios.get(`${baseUrl}/api/meetings/${meeting_id}/summaries`);
|
||
setSummaryHistory(response.data.summaries);
|
||
} catch (err) {
|
||
console.error('Error fetching summary history:', err);
|
||
}
|
||
};
|
||
|
||
const openSummaryModal = async () => {
|
||
setShowSummaryModal(true);
|
||
setUserPrompt('');
|
||
setSummaryResult(null);
|
||
await fetchSummaryHistory();
|
||
};
|
||
|
||
const exportToPDF = async () => {
|
||
try {
|
||
// 检查是否有总结内容
|
||
let summaryContent = summaryResult?.content ||
|
||
meeting?.summary ||
|
||
(summaryHistory.length > 0 ? summaryHistory[0].content : null);
|
||
|
||
if (!summaryContent) {
|
||
alert('暂无会议总结内容，请先生成AI总结。');
|
||
return;
|
||
}
|
||
|
||
// 创建一个临时的React容器用于渲染Markdown
|
||
const tempDiv = document.createElement('div');
|
||
tempDiv.style.position = 'fixed';
|
||
tempDiv.style.top = '-9999px';
|
||
tempDiv.style.width = '800px';
|
||
tempDiv.style.padding = '20px';
|
||
tempDiv.style.backgroundColor = 'white';
|
||
|
||
// 导入markdown-to-html转换所需的模块
|
||
const ReactMarkdown = (await import('react-markdown')).default;
|
||
const { createRoot } = await import('react-dom/client');
|
||
|
||
document.body.appendChild(tempDiv);
|
||
const root = createRoot(tempDiv);
|
||
|
||
// 渲染Markdown内容并获取HTML
|
||
await new Promise((resolve) => {
|
||
root.render(
|
||
React.createElement(ReactMarkdown, {
|
||
remarkPlugins: [remarkGfm],
|
||
rehypePlugins: [rehypeRaw, rehypeSanitize],
|
||
children: summaryContent
|
||
})
|
||
);
|
||
setTimeout(resolve, 100); // 等待渲染完成
|
||
});
|
||
|
||
const renderedHTML = tempDiv.innerHTML;
|
||
|
||
// 创建一个隐藏的HTML容器用于生成PDF
|
||
const printContainer = document.createElement('div');
|
||
printContainer.style.position = 'fixed';
|
||
printContainer.style.top = '-9999px';
|
||
printContainer.style.width = '210mm';
|
||
printContainer.style.padding = '20mm';
|
||
printContainer.style.backgroundColor = 'white';
|
||
printContainer.style.fontFamily = 'Arial, sans-serif';
|
||
printContainer.style.fontSize = '14px';
|
||
printContainer.style.lineHeight = '1.6';
|
||
printContainer.style.color = '#333';
|
||
|
||
// 创建PDF内容的HTML，使用渲染后的Markdown内容
|
||
const meetingTime = formatDateTime(meeting.meeting_time);
|
||
const attendeesList = meeting.attendees.map(attendee =>
|
||
typeof attendee === 'string' ? attendee : attendee.caption
|
||
).join('、');
|
||
|
||
printContainer.innerHTML = `
|
||
<div>
|
||
<h1 style="color: #2563eb; margin-bottom: 30px; font-size: 24px; border-bottom: 2px solid #e5e7eb; padding-bottom: 10px;">
|
||
${meeting.title || '会议总结'}
|
||
</h1>
|
||
|
||
<div style="margin-bottom: 30px; background: #f9fafb; padding: 20px; border-radius: 8px;">
|
||
<h2 style="color: #374151; font-size: 16px; margin-bottom: 15px;">会议信息</h2>
|
||
<p style="margin: 8px 0;"><strong>会议时间：</strong>${meetingTime}</p>
|
||
<p style="margin: 8px 0;"><strong>创建人：</strong>${meeting.creator_username}</p>
|
||
<p style="margin: 8px 0;"><strong>参会人数：</strong>${meeting.attendees.length}人</p>
|
||
<p style="margin: 8px 0;"><strong>参会人员：</strong>${attendeesList}</p>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 30px;">
|
||
<h2 style="color: #374151; font-size: 16px; margin-bottom: 15px;">会议摘要</h2>
|
||
<div style="line-height: 1.8;">${renderedHTML}</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 50px; padding-top: 20px; border-top: 1px solid #e5e7eb; font-size: 12px; color: #6b7280;">
|
||
<p>导出时间：${new Date().toLocaleString('zh-CN')}</p>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
document.body.appendChild(printContainer);
|
||
|
||
// 使用浏览器的打印功能生成PDF
|
||
const originalContent = document.body.innerHTML;
|
||
const originalTitle = document.title;
|
||
|
||
// 临时替换页面内容
|
||
document.body.innerHTML = printContainer.innerHTML;
|
||
document.title = `${meeting.title || '会议总结'}_${new Date().toISOString().split('T')[0]}`;
|
||
|
||
// 添加打印样式
|
||
const printStyles = document.createElement('style');
|
||
printStyles.innerHTML = `
|
||
@media print {
|
||
body { margin: 0; padding: 20px; font-family: 'Microsoft YaHei', Arial, sans-serif; }
|
||
h1 { page-break-before: avoid; }
|
||
h2 { page-break-before: avoid; }
|
||
h3 { margin-top: 1.5rem; margin-bottom: 0.75rem; color: #1e293b; }
|
||
h4 { margin-top: 1rem; margin-bottom: 0.5rem; color: #1e293b; }
|
||
p { margin-bottom: 0.75rem; color: #475569; line-height: 1.6; }
|
||
ul, ol { margin: 0.75rem 0; padding-left: 1.5rem; }
|
||
li { margin-bottom: 0.25rem; color: #475569; }
|
||
strong { color: #1e293b; font-weight: 600; }
|
||
code { background: #f1f5f9; padding: 2px 4px; border-radius: 3px; color: #dc2626; }
|
||
.page-break { page-break-before: always; }
|
||
}
|
||
`;
|
||
document.head.appendChild(printStyles);
|
||
|
||
// 打开打印对话框
|
||
window.print();
|
||
|
||
// 清理：恢复原始内容
|
||
setTimeout(() => {
|
||
document.body.innerHTML = originalContent;
|
||
document.title = originalTitle;
|
||
document.head.removeChild(printStyles);
|
||
document.body.removeChild(printContainer);
|
||
document.body.removeChild(tempDiv);
|
||
|
||
// 重新初始化React组件（这是一个简化的处理）
|
||
window.location.reload();
|
||
}, 1000);
|
||
|
||
} catch (error) {
|
||
console.error('PDF导出失败:', error);
|
||
alert('PDF导出失败，请重试。建议使用浏览器的打印功能并选择"保存为PDF"。');
|
||
}
|
||
};
|
||
|
||
const isCreator = meeting && user && String(meeting.creator_id) === String(user.user_id);
|
||
|
||
if (loading) {
|
||
return <div className="loading-container"><div className="loading-spinner"></div><p>加载中...</p></div>;
|
||
}
|
||
|
||
if (error) {
|
||
return <div className="error-container"><p>{error}</p><Link to="/dashboard"><span className="btn-secondary">返回首页</span></Link></div>;
|
||
}
|
||
|
||
if (!meeting) {
|
||
return <div className="error-container"><p>未找到会议信息。</p><Link to="/dashboard"><span className="btn-secondary">返回首页</span></Link></div>;
|
||
}
|
||
|
||
return (
|
||
<div className="meeting-details-page">
|
||
<div className="details-header">
|
||
<Link to="/dashboard">
|
||
<span className="back-link">
|
||
<ArrowLeft size={20} />
|
||
<span>返回首页</span>
|
||
</span>
|
||
</Link>
|
||
{isCreator && (
|
||
<div className="meeting-actions">
|
||
<Link to={`/meetings/edit/${meeting_id}`} className="action-btn edit-btn">
|
||
<Edit size={16} />
|
||
<span>编辑会议</span>
|
||
</Link>
|
||
<button
|
||
className="action-btn delete-btn"
|
||
onClick={() => setShowDeleteConfirm(true)}
|
||
>
|
||
<Trash2 size={16} />
|
||
<span>删除会议</span>
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="details-layout">
|
||
<div className="main-content">
|
||
<div className="details-content-card">
|
||
<header className="card-header">
|
||
<h1>{meeting.title}</h1>
|
||
<div className="meta-grid">
|
||
<div className="meta-item">
|
||
<Calendar size={18} />
|
||
<strong>会议日期:</strong>
|
||
<span>{formatDateTime(meeting.meeting_time).split(' ')[0]}</span>
|
||
</div>
|
||
<div className="meta-item">
|
||
<Clock size={18} />
|
||
<strong>会议时间:</strong>
|
||
<span>{formatDateTime(meeting.meeting_time).split(' ')[1]}</span>
|
||
</div>
|
||
<div className="meta-item">
|
||
<User size={18} />
|
||
<strong>创建人:</strong>
|
||
<span>{meeting.creator_username}</span>
|
||
</div>
|
||
<div className="meta-item">
|
||
<Users size={18} />
|
||
<strong>参会人数:</strong>
|
||
<span>{meeting.attendees.length}</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<section className="card-section">
|
||
<h2><Users size={20} /> 参会人员</h2>
|
||
<div className="attendees-list">
|
||
{meeting.attendees.map((attendee, index) => (
|
||
<div key={index} className="attendee-chip">
|
||
<User size={16} />
|
||
<span>{typeof attendee === 'string' ? attendee : attendee.caption}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* Audio Player Section */}
|
||
<section className="card-section audio-section">
|
||
<h2><Volume2 size={20} /> 会议录音</h2>
|
||
{audioUrl ? (
|
||
<div className="audio-player">
|
||
{audioFileName && (
|
||
<div className="audio-file-info">
|
||
<span className="audio-file-name">{audioFileName}</span>
|
||
</div>
|
||
)}
|
||
<audio
|
||
ref={audioRef}
|
||
onTimeUpdate={handleTimeUpdate}
|
||
onLoadedMetadata={handleLoadedMetadata}
|
||
onEnded={() => setIsPlaying(false)}
|
||
>
|
||
<source src={audioUrl} type="audio/mpeg" />
|
||
您的浏览器不支持音频播放。
|
||
</audio>
|
||
|
||
<div className="player-controls">
|
||
<button className="play-button" onClick={handlePlayPause}>
|
||
{isPlaying ? <Pause size={24} /> : <Play size={24} />}
|
||
</button>
|
||
|
||
<div className="time-info">
|
||
<span>{formatTime(currentTime)}</span>
|
||
</div>
|
||
|
||
<div className="progress-container"
|
||
onClick={handleSeek}
|
||
onMouseDown={handleProgressMouseDown}>
|
||
<div className="progress-bar">
|
||
<div
|
||
className="progress-fill"
|
||
style={{ width: `${duration ? (currentTime / duration) * 100 : 0}%` }}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="time-info">
|
||
<span>{formatTime(duration)}</span>
|
||
</div>
|
||
|
||
<div className="volume-control">
|
||
<Volume2 size={18} />
|
||
<input
|
||
type="range"
|
||
min="0"
|
||
max="1"
|
||
step="0.1"
|
||
value={volume}
|
||
onChange={handleVolumeChange}
|
||
className="volume-slider"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 分割线 */}
|
||
<div className="audio-divider"></div>
|
||
|
||
{/* 动态字幕显示 */}
|
||
<div className="subtitle-display">
|
||
{currentSubtitle ? (
|
||
<div className="subtitle-content">
|
||
<div className="speaker-indicator">
|
||
{currentSpeaker}
|
||
</div>
|
||
<div className="subtitle-text">
|
||
{currentSubtitle}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="subtitle-placeholder">
|
||
<div className="placeholder-text">播放音频时将在此处显示实时字幕</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="no-audio">
|
||
<div className="no-audio-icon">
|
||
<Volume2 size={48} />
|
||
</div>
|
||
<p className="no-audio-message">该会议没有录音文件</p>
|
||
<p className="no-audio-hint">录音功能可能未开启或录音文件丢失</p>
|
||
</div>
|
||
)}
|
||
</section>
|
||
|
||
<section className="card-section">
|
||
<div className="summary-header">
|
||
<h2><FileText size={20} /> 会议摘要</h2>
|
||
{meeting?.summary && (
|
||
<button
|
||
className="export-pdf-btn-main"
|
||
onClick={exportToPDF}
|
||
title="导出PDF"
|
||
>
|
||
<Download size={16} />
|
||
<span>导出PDF</span>
|
||
</button>
|
||
)}
|
||
</div>
|
||
<div className="summary-content">
|
||
{meeting?.summary ? (
|
||
<div className="markdown-content">
|
||
<ReactMarkdown
|
||
remarkPlugins={[remarkGfm]}
|
||
rehypePlugins={[rehypeRaw, rehypeSanitize]}
|
||
>
|
||
{meeting.summary}
|
||
</ReactMarkdown>
|
||
</div>
|
||
) : (
|
||
<div className="no-summary">
|
||
<div className="no-summary-content">
|
||
<FileText size={48} />
|
||
<h3>暂无会议总结</h3>
|
||
<p>该会议尚未生成总结内容</p>
|
||
{isCreator && (
|
||
<button
|
||
className="generate-summary-cta"
|
||
onClick={openSummaryModal}
|
||
>
|
||
<Brain size={16} />
|
||
<span>生成AI总结</span>
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Transcript Sidebar */}
|
||
<div className="transcript-sidebar">
|
||
<div className="transcript-header">
|
||
<h3><MessageCircle size={20} /> 对话转录</h3>
|
||
<div className="transcript-controls">
|
||
{isCreator && (
|
||
<>
|
||
<button
|
||
className="edit-speakers-btn"
|
||
onClick={handleSpeakerEditOpen}
|
||
title="编辑发言人标签"
|
||
>
|
||
<Settings size={16} />
|
||
<span>编辑标签</span>
|
||
</button>
|
||
<button
|
||
className="ai-summary-btn"
|
||
onClick={openSummaryModal}
|
||
title="AI总结"
|
||
>
|
||
<Brain size={16} />
|
||
<span>AI总结</span>
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="transcript-content">
|
||
{transcript.map((item, index) => (
|
||
<div
|
||
key={item.segment_id}
|
||
ref={(el) => transcriptRefs.current[index] = el}
|
||
className={`transcript-item ${currentHighlightIndex === index ? 'active' : ''}`}
|
||
>
|
||
<div className="transcript-header-item">
|
||
<span
|
||
className="speaker-name clickable"
|
||
onClick={() => jumpToTime(item.start_time_ms / 1000)}
|
||
title="跳转到此时间点播放"
|
||
>
|
||
{item.speaker_tag}
|
||
</span>
|
||
<div className="transcript-item-actions">
|
||
<span
|
||
className="timestamp clickable"
|
||
onClick={() => jumpToTime(item.start_time_ms / 1000)}
|
||
title="跳转到此时间点播放"
|
||
>
|
||
{formatTime(item.start_time_ms / 1000)}
|
||
</span>
|
||
{isCreator && (
|
||
<button
|
||
className="edit-transcript-btn"
|
||
onClick={() => handleTranscriptEdit(index)}
|
||
title="编辑转录内容"
|
||
>
|
||
<Edit3 size={14} />
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div
|
||
className="transcript-text clickable"
|
||
onClick={() => jumpToTime(item.start_time_ms / 1000)}
|
||
title="跳转到此时间点播放"
|
||
>
|
||
{item.text_content}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Delete Confirmation Modal */}
|
||
{showDeleteConfirm && (
|
||
<div className="delete-modal-overlay" onClick={() => setShowDeleteConfirm(false)}>
|
||
<div className="delete-modal" onClick={(e) => e.stopPropagation()}>
|
||
<h3>确认删除</h3>
|
||
<p>确定要删除会议 "{meeting.title}" 吗？此操作无法撤销。</p>
|
||
<div className="modal-actions">
|
||
<button
|
||
className="btn-cancel"
|
||
onClick={() => setShowDeleteConfirm(false)}
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
className="btn-delete"
|
||
onClick={handleDeleteMeeting}
|
||
>
|
||
确定删除
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Speaker Tags Edit Modal */}
|
||
{showSpeakerEdit && (
|
||
<div className="speaker-edit-modal-overlay" onClick={() => setShowSpeakerEdit(false)}>
|
||
<div className="speaker-edit-modal" onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal-header">
|
||
<h3>编辑发言人标签</h3>
|
||
<button
|
||
className="close-btn"
|
||
onClick={() => setShowSpeakerEdit(false)}
|
||
>
|
||
<X size={20} />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="speaker-edit-content">
|
||
<p className="modal-description">根据AI识别的发言人ID，为每个发言人设置自定义标签：</p>
|
||
|
||
<div className="speaker-list">
|
||
{speakerList.length > 0 ? (
|
||
speakerList.map((speaker) => {
|
||
const segmentCount = transcript.filter(item => item.speaker_id === speaker.speaker_id).length;
|
||
return (
|
||
<div key={speaker.speaker_id} className="speaker-edit-item">
|
||
<div className="speaker-info">
|
||
<label className="speaker-id">发言人 {speaker.speaker_id}</label>
|
||
<span className="segment-count">({segmentCount} 条发言)</span>
|
||
</div>
|
||
<input
|
||
type="text"
|
||
value={editingSpeakers[speaker.speaker_id] || ''}
|
||
onChange={(e) => handleEditingSpeakerChange(speaker.speaker_id, e.target.value)}
|
||
className="speaker-tag-input"
|
||
placeholder="输入发言人姓名或标签"
|
||
/>
|
||
</div>
|
||
);
|
||
})
|
||
) : (
|
||
<div className="no-speakers-message">
|
||
<p>暂无发言人数据，请检查转录内容是否正确加载。</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="modal-actions">
|
||
<button
|
||
className="btn-cancel"
|
||
onClick={() => setShowSpeakerEdit(false)}
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
className="btn-save"
|
||
onClick={handleBatchSpeakerUpdate}
|
||
>
|
||
<Save size={16} />
|
||
保存修改
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Transcript Edit Modal */}
|
||
{showTranscriptEdit && (
|
||
<div className="transcript-edit-modal-overlay" onClick={() => setShowTranscriptEdit(false)}>
|
||
<div className="transcript-edit-modal" onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal-header">
|
||
<h3>编辑转录内容</h3>
|
||
<button
|
||
className="close-btn"
|
||
onClick={() => setShowTranscriptEdit(false)}
|
||
>
|
||
<X size={20} />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="transcript-edit-content">
|
||
<p className="modal-description">修改选中转录条目及其上下文内容：</p>
|
||
|
||
<div className="transcript-edit-list">
|
||
{getEditingItems().map((item) => (
|
||
<div key={item.originalIndex} className={`transcript-edit-item ${item.position}`}>
|
||
<div className="transcript-edit-header">
|
||
<span className="speaker-name">{item.speaker_tag}</span>
|
||
<span className="timestamp">{formatTime(item.start_time_ms / 1000)}</span>
|
||
{item.position === 'current' && (
|
||
<span className="current-indicator">当前编辑</span>
|
||
)}
|
||
</div>
|
||
<textarea
|
||
value={editingTranscripts[item.originalIndex] || item.text_content}
|
||
onChange={(e) => handleTranscriptTextChange(item.originalIndex, e.target.value)}
|
||
className="transcript-edit-textarea"
|
||
rows={3}
|
||
placeholder="输入转录内容..."
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="modal-actions">
|
||
<button
|
||
className="btn-cancel"
|
||
onClick={() => setShowTranscriptEdit(false)}
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
className="btn-save"
|
||
onClick={handleSaveTranscriptEdits}
|
||
>
|
||
<Save size={16} />
|
||
保存修改
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* AI Summary Modal */}
|
||
{showSummaryModal && (
|
||
<div className="summary-modal-overlay" onClick={() => setShowSummaryModal(false)}>
|
||
<div className="summary-modal" onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal-header">
|
||
<h3><Brain size={20} /> AI会议总结</h3>
|
||
<button
|
||
className="close-btn"
|
||
onClick={() => setShowSummaryModal(false)}
|
||
>
|
||
<X size={20} />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="summary-modal-content">
|
||
<div className="summary-input-section">
|
||
<h4>生成新的总结</h4>
|
||
<p className="input-description">
|
||
系统将使用通用提示词分析会议转录，您可以添加额外要求：
|
||
</p>
|
||
<textarea
|
||
value={userPrompt}
|
||
onChange={(e) => setUserPrompt(e.target.value)}
|
||
className="user-prompt-input"
|
||
placeholder="请输入您希望AI重点关注的内容，如：请重点分析决策事项和待办任务..."
|
||
rows={3}
|
||
/>
|
||
<button
|
||
className="generate-summary-btn"
|
||
onClick={generateSummary}
|
||
disabled={summaryLoading}
|
||
>
|
||
{summaryLoading ? (
|
||
<>
|
||
<div className="loading-spinner small"></div>
|
||
<span>正在生成总结...</span>
|
||
</>
|
||
) : (
|
||
<>
|
||
<Sparkles size={16} />
|
||
<span>生成AI总结</span>
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
|
||
{summaryResult && (
|
||
<div className="summary-result-section">
|
||
<div className="summary-result-header">
|
||
<h4>最新生成的总结</h4>
|
||
<button
|
||
className="export-pdf-btn"
|
||
onClick={exportToPDF}
|
||
title="导出PDF"
|
||
>
|
||
<Download size={14} />
|
||
<span>导出PDF</span>
|
||
</button>
|
||
</div>
|
||
<div className="summary-result-content">
|
||
<ReactMarkdown
|
||
remarkPlugins={[remarkGfm]}
|
||
rehypePlugins={[rehypeRaw, rehypeSanitize]}
|
||
>
|
||
{summaryResult.content}
|
||
</ReactMarkdown>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{summaryHistory.length > 0 && (
|
||
<div className="summary-history-section">
|
||
<h4>历史总结记录</h4>
|
||
<div className="summary-history-list">
|
||
{summaryHistory.map((summary, index) => (
|
||
<div key={summary.id} className="summary-history-item">
|
||
<div className="summary-history-header">
|
||
<span className="summary-date">
|
||
{new Date(summary.created_at).toLocaleString('zh-CN')}
|
||
</span>
|
||
{summary.user_prompt && (
|
||
<span className="user-prompt-tag">自定义要求</span>
|
||
)}
|
||
</div>
|
||
{summary.user_prompt && (
|
||
<div className="user-prompt-display">
|
||
<strong>用户要求：</strong>{summary.user_prompt}
|
||
</div>
|
||
)}
|
||
<div className="summary-content-preview">
|
||
{summary.content.substring(0, 200)}...
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default MeetingDetails;
|