4351 lines
152 KiB
TypeScript
4351 lines
152 KiB
TypeScript
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||
import { useNavigate, useParams } from 'react-router-dom';
|
||
import { Alert, Avatar, Button, Card, Col, Divider, Drawer, Empty, Form, Input, List, Modal, Popover, Progress, QRCode, Radio, Row, Select, Skeleton, Space, Switch, Tag, Typography, App, Dropdown } from 'antd';
|
||
import {
|
||
AudioOutlined,
|
||
CaretRightFilled,
|
||
ClockCircleOutlined,
|
||
CopyOutlined,
|
||
DownloadOutlined,
|
||
EditOutlined,
|
||
FastForwardOutlined,
|
||
FileTextOutlined,
|
||
LeftOutlined,
|
||
LinkOutlined,
|
||
LoadingOutlined,
|
||
PauseOutlined,
|
||
RobotOutlined,
|
||
SyncOutlined,
|
||
UserOutlined,
|
||
PlusOutlined,
|
||
CheckCircleFilled,
|
||
FilePdfOutlined,
|
||
FileWordOutlined,
|
||
ShareAltOutlined, InfoCircleOutlined,
|
||
} from '@ant-design/icons';
|
||
import dayjs from 'dayjs';
|
||
import ReactMarkdown from 'react-markdown';
|
||
import {
|
||
downloadMeetingTranscript,
|
||
downloadMeetingSummary,
|
||
getMeetingDetail,
|
||
getMeetingChapters,
|
||
getMeetingProgress,
|
||
getMeetingShareConfig,
|
||
getTranscripts,
|
||
MeetingChapterVO,
|
||
MeetingProgress,
|
||
SummaryDetailLevel,
|
||
MeetingTranscriptVO,
|
||
MeetingVO,
|
||
reSummary,
|
||
resolveAudioMimeType,
|
||
resolveMeetingPlaybackAudioUrl,
|
||
retryMeetingChapter,
|
||
retryMeetingSummary,
|
||
retryMeetingTranscription,
|
||
retryScheduleMeeting,
|
||
updateMeetingBasic,
|
||
updateMeetingTranscript,
|
||
updateMeetingSummary,
|
||
updateSpeakerInfo,
|
||
} from '../../api/business/meeting';
|
||
import { getAiModelDefault, getAiModelPage, AiModelVO } from '../../api/business/aimodel';
|
||
import { getHotWordPage, getPinyinSuggestion, saveHotWord } from '../../api/business/hotword';
|
||
import { getPromptPage, PromptTemplateVO } from '../../api/business/prompt';
|
||
import { listUsers } from '../../api';
|
||
import { useDict } from '../../hooks/useDict';
|
||
import { SysUser } from '../../types';
|
||
import PageHeader from '../../components/shared/PageHeader';
|
||
import PageContainer from "../../components/shared/PageContainer";
|
||
|
||
const { Title, Text } = Typography;
|
||
const { Option } = Select;
|
||
|
||
type AnalysisChapter = {
|
||
time?: string;
|
||
title: string;
|
||
summary: string;
|
||
};
|
||
|
||
type AnalysisSpeakerSummary = {
|
||
speaker: string;
|
||
summary: string;
|
||
};
|
||
|
||
type AnalysisKeyPoint = {
|
||
title: string;
|
||
summary: string;
|
||
speaker?: string;
|
||
time?: string;
|
||
};
|
||
|
||
type MeetingAnalysis = {
|
||
overview: string;
|
||
keywords: string[];
|
||
chapters: AnalysisChapter[];
|
||
speakerSummaries: AnalysisSpeakerSummary[];
|
||
keyPoints: AnalysisKeyPoint[];
|
||
todos: string[];
|
||
};
|
||
|
||
type WorkspaceTab = 'catalog' | 'transcript';
|
||
|
||
type ChapterTranscriptLink = {
|
||
key: string;
|
||
title: string;
|
||
timeLabel: string;
|
||
transcriptIds: number[];
|
||
firstTranscriptId: number | null;
|
||
firstTranscriptStartTime: number | null;
|
||
};
|
||
|
||
type MeetingStateNotice = {
|
||
title: string;
|
||
description: string;
|
||
type: 'info' | 'warning';
|
||
hasFallbackContent: boolean;
|
||
scope: 'summary' | 'catalog' | 'global';
|
||
};
|
||
|
||
const QUEUED_RETRY_THRESHOLD_MS = 2 * 60 * 1000;
|
||
|
||
const ANALYSIS_EMPTY: MeetingAnalysis = {
|
||
overview: '',
|
||
keywords: [],
|
||
chapters: [],
|
||
speakerSummaries: [],
|
||
keyPoints: [],
|
||
todos: [],
|
||
};
|
||
|
||
const ACCESS_PASSWORD_PATTERN = /^[A-Za-z0-9]{4}$/;
|
||
const ACCESS_PASSWORD_SOURCE = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
|
||
|
||
const copyMeetingLink = async (text: string) => {
|
||
if (navigator.clipboard?.writeText) {
|
||
await navigator.clipboard.writeText(text);
|
||
return;
|
||
}
|
||
|
||
const textarea = document.createElement('textarea');
|
||
textarea.value = text;
|
||
textarea.setAttribute('readonly', 'true');
|
||
textarea.style.position = 'fixed';
|
||
textarea.style.opacity = '0';
|
||
document.body.appendChild(textarea);
|
||
textarea.select();
|
||
document.execCommand('copy');
|
||
document.body.removeChild(textarea);
|
||
};
|
||
|
||
const generateAccessPassword = () =>
|
||
Array.from({ length: 4 }, () => ACCESS_PASSWORD_SOURCE[Math.floor(Math.random() * ACCESS_PASSWORD_SOURCE.length)]).join('');
|
||
|
||
const normalizeAccessPasswordInput = (value?: string | null) => (value || '').replace(/[^A-Za-z0-9]/g, '').slice(0, 4);
|
||
|
||
const sanitizeDownloadFileName = (value?: string | null, fallback = 'meeting-recording') => {
|
||
const normalized = (value || '').replace(/[\\/:*?"<>|\r\n]/g, '_').trim();
|
||
return normalized || fallback;
|
||
};
|
||
|
||
const resolveAudioExtension = (audioUrl?: string) => {
|
||
const normalizedUrl = audioUrl?.split('#')[0]?.split('?')[0] || '';
|
||
return normalizedUrl.match(/\.([a-z0-9]+)$/i)?.[1]?.toLowerCase() || 'mp3';
|
||
};
|
||
|
||
const getMeetingAudioDownloadName = (meeting?: Pick<MeetingVO, 'title' | 'audioUrl' | 'playbackAudioUrl'> | null) => {
|
||
const audioUrl = resolveMeetingPlaybackAudioUrl(meeting);
|
||
const extension = resolveAudioExtension(audioUrl);
|
||
return `${sanitizeDownloadFileName(meeting?.title)}-录音.${extension}`;
|
||
};
|
||
|
||
const buildMeetingPreviewUrl = (baseUrl?: string, meetingId?: number, accessPassword?: string) => {
|
||
const normalizedBaseUrl = (baseUrl || '').trim();
|
||
if (!normalizedBaseUrl || !meetingId || Number.isNaN(meetingId)) {
|
||
return '';
|
||
}
|
||
const safeBaseUrl = normalizedBaseUrl.endsWith('/') ? normalizedBaseUrl.slice(0, -1) : normalizedBaseUrl;
|
||
const url = new URL(`${safeBaseUrl}/meetings/${meetingId}/preview`);
|
||
const normalizedPassword = (accessPassword || '').trim();
|
||
if (normalizedPassword) {
|
||
url.searchParams.set('accessPassword', normalizedPassword);
|
||
}
|
||
return url.toString();
|
||
};
|
||
|
||
|
||
const splitLines = (value?: string | null) =>
|
||
(value || '')
|
||
.split(/\r?\n/)
|
||
.map((line) => line.trim())
|
||
.filter(Boolean);
|
||
|
||
const parseLooseJson = (raw?: string | null) => {
|
||
const input = (raw || '').trim();
|
||
if (!input) return null;
|
||
|
||
const tryParse = (text: string) => {
|
||
try {
|
||
return JSON.parse(text);
|
||
} catch {
|
||
return null;
|
||
}
|
||
};
|
||
|
||
const direct = tryParse(input);
|
||
if (direct && typeof direct === 'object') return direct;
|
||
|
||
const fenced = input.match(/```(?:json)?\s*([\s\S]*?)```/i)?.[1]?.trim();
|
||
if (fenced) {
|
||
const fencedParsed = tryParse(fenced);
|
||
if (fencedParsed && typeof fencedParsed === 'object') return fencedParsed;
|
||
}
|
||
|
||
const start = input.indexOf('{');
|
||
const end = input.lastIndexOf('}');
|
||
if (start >= 0 && end > start) {
|
||
const wrapped = tryParse(input.slice(start, end + 1));
|
||
if (wrapped && typeof wrapped === 'object') return wrapped;
|
||
}
|
||
|
||
return null;
|
||
};
|
||
|
||
const extractSection = (markdown: string, aliases: string[]) => {
|
||
const lines = markdown.split(/\r?\n/);
|
||
const lowerAliases = aliases.map((item) => item.toLowerCase());
|
||
const cleanHeading = (line: string) => line.replace(/^#{1,6}\s*/, '').trim().toLowerCase();
|
||
|
||
let start = -1;
|
||
for (let index = 0; index < lines.length; index += 1) {
|
||
const line = lines[index].trim();
|
||
if (!line.startsWith('#')) continue;
|
||
const heading = cleanHeading(line);
|
||
if (lowerAliases.some((alias) => heading.includes(alias))) {
|
||
start = index + 1;
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (start < 0) return '';
|
||
|
||
const buffer: string[] = [];
|
||
for (let index = start; index < lines.length; index += 1) {
|
||
const line = lines[index];
|
||
if (line.trim().startsWith('#')) break;
|
||
buffer.push(line);
|
||
}
|
||
return buffer.join('\n').trim();
|
||
};
|
||
|
||
const parseBulletList = (content?: string | null) =>
|
||
splitLines(content)
|
||
.map((line) => line.replace(/^[-*鈥s]+/, '').replace(/^\d+[.)]\s*/, '').trim())
|
||
.filter(Boolean);
|
||
|
||
const parseOverviewSection = (markdown: string) =>
|
||
extractSection(markdown, ['全文概要', '概要', '摘要', '概览']) || markdown.replace(/^---[\s\S]*?---/, '').trim();
|
||
|
||
const parseKeywordsSection = (markdown: string, tags: string) => {
|
||
const section = extractSection(markdown, ['关键词', '关键字', '标签']);
|
||
const fromSection = parseBulletList(section)
|
||
.flatMap((line) => line.split(/[，,、/]/))
|
||
.map((item) => item.trim())
|
||
.filter(Boolean);
|
||
|
||
if (fromSection.length) {
|
||
return Array.from(new Set(fromSection)).slice(0, 12);
|
||
}
|
||
|
||
return Array.from(new Set((tags || '').split(',').map((item) => item.trim()).filter(Boolean))).slice(0, 12);
|
||
};
|
||
|
||
const buildMeetingAnalysis = (
|
||
sourceAnalysis: MeetingVO['analysis'] | undefined,
|
||
summaryContent: string | undefined,
|
||
tags: string,
|
||
): MeetingAnalysis => {
|
||
const parseStructured = (parsed: Record<string, any>): MeetingAnalysis => {
|
||
const chapters = Array.isArray(parsed.chapters) ? parsed.chapters : [];
|
||
const speakerSummaries = Array.isArray(parsed.speakerSummaries) ? parsed.speakerSummaries : [];
|
||
const keyPoints = Array.isArray(parsed.keyPoints) ? parsed.keyPoints : [];
|
||
const todos = Array.isArray(parsed.todos)
|
||
? parsed.todos
|
||
: Array.isArray(parsed.actionItems)
|
||
? parsed.actionItems
|
||
: [];
|
||
|
||
return {
|
||
overview: String(parsed.overview || '').trim(),
|
||
keywords: Array.from(
|
||
new Set((Array.isArray(parsed.keywords) ? parsed.keywords : []).map((item) => String(item).trim()).filter(Boolean)),
|
||
).slice(0, 12),
|
||
chapters: chapters
|
||
.map((item: any) => ({
|
||
time: item?.time ? String(item.time).trim() : undefined,
|
||
title: String(item?.title || '').trim(),
|
||
summary: String(item?.summary || '').trim(),
|
||
}))
|
||
.filter((item: AnalysisChapter) => item.title || item.summary),
|
||
speakerSummaries: speakerSummaries
|
||
.map((item: any) => ({
|
||
speaker: String(item?.speaker || '').trim(),
|
||
summary: String(item?.summary || '').trim(),
|
||
}))
|
||
.filter((item: AnalysisSpeakerSummary) => item.speaker || item.summary),
|
||
keyPoints: keyPoints
|
||
.map((item: any) => ({
|
||
title: String(item?.title || '').trim(),
|
||
summary: String(item?.summary || '').trim(),
|
||
speaker: item?.speaker ? String(item.speaker).trim() : undefined,
|
||
time: item?.time ? String(item.time).trim() : undefined,
|
||
}))
|
||
.filter((item: AnalysisKeyPoint) => item.title || item.summary),
|
||
todos: todos.map((item: any) => String(item).trim()).filter(Boolean).slice(0, 10),
|
||
};
|
||
};
|
||
|
||
if (sourceAnalysis) {
|
||
return parseStructured(sourceAnalysis as Record<string, any>);
|
||
}
|
||
|
||
const raw = (summaryContent || '').trim();
|
||
if (!raw && !tags) return ANALYSIS_EMPTY;
|
||
|
||
const loose = parseLooseJson(raw);
|
||
if (loose) {
|
||
return parseStructured(loose);
|
||
}
|
||
|
||
return {
|
||
overview: parseOverviewSection(raw),
|
||
keywords: parseKeywordsSection(raw, tags),
|
||
chapters: [],
|
||
speakerSummaries: [],
|
||
keyPoints: [],
|
||
todos: [],
|
||
};
|
||
};
|
||
|
||
function formatTime(ms: number) {
|
||
const seconds = Math.floor(ms / 1000);
|
||
const minutes = Math.floor(seconds / 60);
|
||
const remainSeconds = seconds % 60;
|
||
return `${minutes.toString().padStart(2, '0')}:${remainSeconds.toString().padStart(2, '0')}`;
|
||
}
|
||
|
||
function formatPlayerTime(seconds: number) {
|
||
const safeSeconds = Math.max(0, Math.floor(seconds || 0));
|
||
const hours = Math.floor(safeSeconds / 3600);
|
||
const minutes = Math.floor((safeSeconds % 3600) / 60);
|
||
const remainSeconds = safeSeconds % 60;
|
||
|
||
if (hours > 0) {
|
||
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainSeconds.toString().padStart(2, '0')}`;
|
||
}
|
||
|
||
return `${minutes.toString().padStart(2, '0')}:${remainSeconds.toString().padStart(2, '0')}`;
|
||
}
|
||
|
||
function parseChapterTimeToMs(value?: string) {
|
||
const raw = String(value || '').trim();
|
||
if (!raw) return null;
|
||
|
||
const matched = raw.match(/(\d{1,2}:\d{2}(?::\d{2})?)/)?.[1];
|
||
if (!matched) return null;
|
||
|
||
const parts = matched.split(':').map((item) => Number(item));
|
||
if (parts.some((item) => Number.isNaN(item))) {
|
||
return null;
|
||
}
|
||
|
||
const totalSeconds = parts.length === 3
|
||
? (parts[0] * 3600) + (parts[1] * 60) + parts[2]
|
||
: (parts[0] * 60) + parts[1];
|
||
|
||
return totalSeconds * 1000;
|
||
}
|
||
|
||
type MeetingProgressPhase = 'queued' | 'asr' | 'chapter' | 'summary' | 'terminal';
|
||
|
||
const meetingProgressTerminalRefreshCache = new Map<number, string>();
|
||
const meetingProgressPhaseRefreshCache = new Map<number, MeetingProgressPhase>();
|
||
const DETAIL_STAGE_STEP_ITEMS = [
|
||
{ code: 'INITIALIZING', label: '数据初始化', hint: '完成会议数据准备' },
|
||
{ code: 'TRANSCRIBING', label: '转译音频', hint: '完成语音转写' },
|
||
{ code: 'SUMMARIZING', label: '生成总结', hint: '完成 AI 内容处理' },
|
||
{ code: 'COMPLETED', label: '处理完成', hint: '已全部完成' },
|
||
] as const;
|
||
|
||
const resolveProgressPhase = (progress: MeetingProgress | null | undefined): MeetingProgressPhase => {
|
||
const unifiedStatusCode = progress?.unifiedStatus?.statusCode;
|
||
if (unifiedStatusCode?.startsWith('FAILED_') || unifiedStatusCode === 'COMPLETED') {
|
||
return 'terminal';
|
||
}
|
||
if (unifiedStatusCode === 'SUMMARIZING') {
|
||
return 'summary';
|
||
}
|
||
if (unifiedStatusCode === 'TRANSCRIBING') {
|
||
return 'asr';
|
||
}
|
||
if (unifiedStatusCode === 'INITIALIZING' || unifiedStatusCode === 'WAITING_UPLOAD') {
|
||
return 'queued';
|
||
}
|
||
const percent = progress?.percent ?? 0;
|
||
if (percent < 0 || percent >= 100) {
|
||
return 'terminal';
|
||
}
|
||
if (percent >= 90) {
|
||
return 'summary';
|
||
}
|
||
if (percent >= 85) {
|
||
return 'chapter';
|
||
}
|
||
if (percent >= 5) {
|
||
return 'asr';
|
||
}
|
||
return 'queued';
|
||
};
|
||
|
||
const MeetingProgressDisplay: React.FC<{
|
||
meetingId: number;
|
||
onComplete: () => void;
|
||
onRefreshNeeded?: (phase: MeetingProgressPhase) => void;
|
||
onProgressChange?: (progress: MeetingProgress | null) => void;
|
||
compact?: boolean;
|
||
inline?: boolean;
|
||
}> = ({ meetingId, onComplete, onRefreshNeeded, onProgressChange, compact, inline }) => {
|
||
const [progress, setProgress] = useState<MeetingProgress | null>(null);
|
||
|
||
const onCompleteRef = useRef(onComplete);
|
||
const onRefreshNeededRef = useRef(onRefreshNeeded);
|
||
const onProgressChangeRef = useRef(onProgressChange);
|
||
|
||
useEffect(() => {
|
||
onCompleteRef.current = onComplete;
|
||
onRefreshNeededRef.current = onRefreshNeeded;
|
||
onProgressChangeRef.current = onProgressChange;
|
||
}, [onComplete, onRefreshNeeded, onProgressChange]);
|
||
|
||
useEffect(() => {
|
||
let completed = false;
|
||
let timer: ReturnType<typeof setTimeout> | null = null;
|
||
let requesting = false;
|
||
|
||
const fetchProgress = async () => {
|
||
if (completed || requesting) {
|
||
return;
|
||
}
|
||
requesting = true;
|
||
let shouldContinue = true;
|
||
try {
|
||
const progressRes = await getMeetingProgress(meetingId, { suppressErrorToast: true });
|
||
if (progressRes.data?.data) {
|
||
const nextProgress = progressRes.data.data;
|
||
setProgress(nextProgress);
|
||
onProgressChangeRef.current?.(nextProgress);
|
||
const phase = resolveProgressPhase(nextProgress);
|
||
const previousPhase = meetingProgressPhaseRefreshCache.get(meetingId);
|
||
meetingProgressPhaseRefreshCache.set(meetingId, phase);
|
||
if ((phase === 'chapter' || phase === 'summary') && previousPhase !== phase) {
|
||
onRefreshNeededRef.current?.(phase);
|
||
}
|
||
if (nextProgress.percent === 100 || nextProgress.percent < 0) {
|
||
completed = true;
|
||
shouldContinue = false;
|
||
const terminalKey = `${nextProgress.updateAt}:${nextProgress.percent}`;
|
||
if (meetingProgressTerminalRefreshCache.get(meetingId) !== terminalKey) {
|
||
meetingProgressTerminalRefreshCache.set(meetingId, terminalKey);
|
||
onCompleteRef.current?.();
|
||
}
|
||
} else {
|
||
meetingProgressTerminalRefreshCache.delete(meetingId);
|
||
}
|
||
}
|
||
} catch {
|
||
// ignore
|
||
} finally {
|
||
requesting = false;
|
||
if (!completed && shouldContinue) {
|
||
timer = setTimeout(() => {
|
||
void fetchProgress();
|
||
}, 3000);
|
||
}
|
||
}
|
||
};
|
||
|
||
void fetchProgress();
|
||
return () => {
|
||
completed = true;
|
||
if (timer) {
|
||
clearTimeout(timer);
|
||
}
|
||
};
|
||
}, [meetingId]);
|
||
|
||
const percent = progress?.percent || 0;
|
||
const isError = percent < 0;
|
||
const unifiedStatusText = progress?.unifiedStatus?.statusText;
|
||
const unifiedStatusMessage = progress?.unifiedStatus?.message;
|
||
const primaryStatusText = unifiedStatusText || (isError ? '处理失败' : '处理中');
|
||
|
||
const formatEta = (seconds?: number) => {
|
||
if (!seconds || seconds <= 0) return '计算中';
|
||
if (seconds < 60) return `${seconds} 秒`;
|
||
const minutes = Math.floor(seconds / 60);
|
||
const remainSeconds = seconds % 60;
|
||
return remainSeconds > 0 ? `${minutes} 分 ${remainSeconds} 秒` : `${minutes} 分钟`;
|
||
};
|
||
|
||
if (inline) {
|
||
return (
|
||
<div
|
||
style={{
|
||
marginTop: 12,
|
||
padding: '12px 14px',
|
||
borderRadius: 12,
|
||
border: `1px solid ${isError ? '#ffccc7' : '#d6dbff'}`,
|
||
background: isError ? '#fff2f0' : '#f7f8ff',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
gap: 12,
|
||
marginBottom: 8,
|
||
}}
|
||
>
|
||
<Text strong style={{ color: isError ? '#cf1322' : '#4f46e5' }}>
|
||
{unifiedStatusMessage || unifiedStatusText || progress?.message || '正在生成最新结果...'}
|
||
</Text>
|
||
<Text strong style={{ color: isError ? '#cf1322' : '#4f46e5', whiteSpace: 'nowrap' }}>
|
||
{isError ? '失败' : `${percent}%`}
|
||
</Text>
|
||
</div>
|
||
<Progress
|
||
percent={isError ? 100 : percent}
|
||
status={isError ? 'exception' : percent === 100 ? 'success' : 'active'}
|
||
strokeColor={isError ? '#ff4d4f' : '#6c73ff'}
|
||
showInfo={false}
|
||
size="small"
|
||
style={{ marginBottom: 6 }}
|
||
/>
|
||
<Text type="secondary" style={{ fontSize: 12 }}>
|
||
{`预计剩余：${isError ? '--' : formatEta(progress?.eta)}`}
|
||
</Text>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (compact) {
|
||
return (
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
padding: '40px 20px',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
<Title level={4} style={{ marginBottom: 24 }}>
|
||
AI 智能总结中
|
||
</Title>
|
||
<Progress
|
||
type="circle"
|
||
percent={isError ? 100 : percent}
|
||
status={isError ? 'exception' : percent === 100 ? 'success' : 'active'}
|
||
strokeColor={isError ? '#ff4d4f' : { '0%': '#6c73ff', '100%': '#8d63ff' }}
|
||
size={140}
|
||
strokeWidth={10}
|
||
/>
|
||
<div style={{ marginTop: 24 }}>
|
||
<Text strong style={{ fontSize: 16, color: isError ? '#ff4d4f' : '#5d67ff', display: 'block', marginBottom: 4 }}>
|
||
{unifiedStatusMessage || unifiedStatusText || progress?.message || '正在分析内容...'}
|
||
</Text>
|
||
<Text type="secondary" style={{ fontSize: 13 }}>
|
||
{`预计剩余：${isError ? '--' : formatEta(progress?.eta)}`}
|
||
</Text>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
height: '100%',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
background: '#fff',
|
||
borderRadius: 16,
|
||
padding: 40,
|
||
}}
|
||
>
|
||
<div style={{ width: '100%', maxWidth: 600, textAlign: 'center' }}>
|
||
<Title level={3} style={{ marginBottom: 24 }}>
|
||
AI 智能分析中
|
||
</Title>
|
||
<Progress
|
||
type="circle"
|
||
percent={isError ? 100 : percent}
|
||
status={isError ? 'exception' : percent === 100 ? 'success' : 'active'}
|
||
strokeColor={isError ? '#ff4d4f' : { '0%': '#6c73ff', '100%': '#8d63ff' }}
|
||
size={180}
|
||
strokeWidth={8}
|
||
/>
|
||
<div style={{ marginTop: 32 }}>
|
||
<Text strong style={{ fontSize: 18, color: isError ? '#ff4d4f' : '#5d67ff', display: 'block', marginBottom: 8 }}>
|
||
{unifiedStatusMessage || unifiedStatusText || progress?.message || '正在准备计算资源...'}
|
||
</Text>
|
||
<Text type="secondary">分析进行中，请稍候，你可以先处理其他工作。</Text>
|
||
</div>
|
||
<Divider style={{ margin: '32px 0' }} />
|
||
<Row gutter={24}>
|
||
<Col span={8}>
|
||
<Space direction="vertical" size={0}>
|
||
<Text type="secondary">当前进度</Text>
|
||
<Title level={4} style={{ margin: 0 }}>
|
||
{isError ? 'ERROR' : `${percent}%`}
|
||
</Title>
|
||
</Space>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Space direction="vertical" size={0}>
|
||
<Text type="secondary">预计剩余</Text>
|
||
<Title level={4} style={{ margin: 0 }}>
|
||
{isError ? '--' : formatEta(progress?.eta)}
|
||
</Title>
|
||
</Space>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Space direction="vertical" size={0}>
|
||
<Text type="secondary">任务状态</Text>
|
||
<Title level={4} style={{ margin: 0, color: isError ? '#ff4d4f' : '#52c41a' }}>
|
||
{isError ? '失败' : '正常'}
|
||
</Title>
|
||
</Space>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const DETAIL_STAGE_STEP_DISPLAY_ITEMS = [
|
||
{ code: 'INITIALIZING', label: '数据初始化', hint: '完成会议数据准备' },
|
||
{ code: 'TRANSCRIBING', label: '转译音频', hint: '完成语音转写' },
|
||
{ code: 'SUMMARIZING', label: '生成总结', hint: '生成总结与 AI 目录' },
|
||
{ code: 'COMPLETED', label: '处理完成', hint: '全部任务处理完成' },
|
||
] as const;
|
||
|
||
const UnifiedMeetingProgressDisplay: React.FC<{
|
||
progress: MeetingProgress | null;
|
||
compact?: boolean;
|
||
inline?: boolean;
|
||
}> = ({ progress, compact, inline }) => {
|
||
const percent = progress?.percent || 0;
|
||
const isError = percent < 0;
|
||
const unifiedStatusCode = progress?.unifiedStatus?.statusCode;
|
||
const unifiedStatusText = progress?.unifiedStatus?.statusText;
|
||
const unifiedStatusMessage = progress?.unifiedStatus?.message;
|
||
const failedStageCode = progress?.unifiedStatus?.failedStageCode;
|
||
const primaryStatusText = unifiedStatusText || (isError ? '处理失败' : '处理中');
|
||
|
||
const formatEta = (seconds?: number) => {
|
||
if (!seconds || seconds <= 0) return '计算中';
|
||
if (seconds < 60) return `${seconds} 秒`;
|
||
const minutes = Math.floor(seconds / 60);
|
||
const remainSeconds = seconds % 60;
|
||
return remainSeconds > 0 ? `${minutes} 分 ${remainSeconds} 秒` : `${minutes} 分钟`;
|
||
};
|
||
|
||
const resolveStageCode = () => {
|
||
if (failedStageCode) {
|
||
return failedStageCode;
|
||
}
|
||
if (unifiedStatusCode === 'WAITING_UPLOAD' || unifiedStatusCode === 'INITIALIZING') {
|
||
return 'INITIALIZING';
|
||
}
|
||
if (unifiedStatusCode === 'TRANSCRIBING') {
|
||
return 'TRANSCRIBING';
|
||
}
|
||
if (unifiedStatusCode === 'SUMMARIZING') {
|
||
return 'SUMMARIZING';
|
||
}
|
||
if (unifiedStatusCode === 'COMPLETED') {
|
||
return 'COMPLETED';
|
||
}
|
||
const phase = resolveProgressPhase(progress);
|
||
if (phase === 'queued') {
|
||
return 'INITIALIZING';
|
||
}
|
||
if (phase === 'asr') {
|
||
return 'TRANSCRIBING';
|
||
}
|
||
if (phase === 'chapter' || phase === 'summary') {
|
||
return 'SUMMARIZING';
|
||
}
|
||
return 'COMPLETED';
|
||
};
|
||
|
||
const currentStageCode = resolveStageCode();
|
||
const currentStageIndex = Math.max(0, DETAIL_STAGE_STEP_DISPLAY_ITEMS.findIndex((item) => item.code === currentStageCode));
|
||
const isFailedStage = unifiedStatusCode?.startsWith('FAILED_') || isError;
|
||
const isCompletedStage = unifiedStatusCode === 'COMPLETED' || percent === 100;
|
||
const progressText = isError ? '--' : `${Math.max(percent, 0)}%`;
|
||
const currentStageLabel = DETAIL_STAGE_STEP_DISPLAY_ITEMS[currentStageIndex]?.label || primaryStatusText;
|
||
const currentStageDisplay = isFailedStage ? `${currentStageLabel}失败` : currentStageLabel;
|
||
const helperText = unifiedStatusMessage || progress?.message || (isError ? '当前阶段执行失败，请稍后重试。' : '阶段状态已与安卓端统一。');
|
||
|
||
const renderStageTimeline = (options?: {
|
||
compact?: boolean;
|
||
inline?: boolean;
|
||
}) => {
|
||
const compactMode = options?.compact;
|
||
const inlineMode = options?.inline;
|
||
const containerStyle: React.CSSProperties = inlineMode
|
||
? {
|
||
marginTop: 10,
|
||
display: 'grid',
|
||
gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
|
||
gap: 8,
|
||
}
|
||
: compactMode
|
||
? {
|
||
marginTop: 18,
|
||
display: 'grid',
|
||
gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
|
||
gap: 8,
|
||
width: '100%',
|
||
maxWidth: 560,
|
||
}
|
||
: {
|
||
display: 'flex',
|
||
alignItems: 'flex-start',
|
||
justifyContent: 'space-between',
|
||
gap: 12,
|
||
};
|
||
|
||
return (
|
||
<div style={containerStyle}>
|
||
{DETAIL_STAGE_STEP_DISPLAY_ITEMS.map((item, index) => {
|
||
const isCurrent = index === currentStageIndex;
|
||
const isDone = isCompletedStage || (!isFailedStage && index < currentStageIndex);
|
||
const isFailed = isFailedStage && isCurrent;
|
||
const dotBg = isFailed ? '#ff4d4f' : isDone ? '#52c41a' : isCurrent ? '#4f46e5' : '#d9d9d9';
|
||
const textColor = isFailed ? '#cf1322' : isDone || isCurrent ? '#1f1f1f' : '#8c8c8c';
|
||
const cardPadding = inlineMode ? '8px 6px' : compactMode ? '10px 8px' : '0';
|
||
const cardRadius = inlineMode || compactMode ? 12 : 0;
|
||
const cardBorder = inlineMode || compactMode
|
||
? `1px solid ${isFailed ? '#ffccc7' : isCurrent ? '#c7d2fe' : '#e5e7eb'}`
|
||
: 'none';
|
||
const cardBackground = inlineMode || compactMode
|
||
? isFailed ? '#fff2f0' : isCurrent ? '#eef2ff' : isDone ? '#f6ffed' : '#fafafa'
|
||
: 'transparent';
|
||
|
||
return (
|
||
<React.Fragment key={item.code}>
|
||
<div
|
||
style={{
|
||
flex: 1,
|
||
minWidth: 0,
|
||
padding: cardPadding,
|
||
borderRadius: cardRadius,
|
||
border: cardBorder,
|
||
background: cardBackground,
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
width: compactMode || inlineMode ? 28 : 36,
|
||
height: compactMode || inlineMode ? 28 : 36,
|
||
margin: `0 auto ${compactMode || inlineMode ? 8 : 12}px`,
|
||
borderRadius: '50%',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
background: dotBg,
|
||
color: '#fff',
|
||
fontWeight: 700,
|
||
boxShadow: isCurrent ? `0 0 0 ${compactMode || inlineMode ? 4 : 6}px ${isFailed ? 'rgba(255,77,79,0.12)' : 'rgba(79,70,229,0.12)'}` : 'none',
|
||
}}
|
||
>
|
||
{isDone ? '√' : index + 1}
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontSize: compactMode || inlineMode ? 12 : 15,
|
||
fontWeight: 600,
|
||
color: textColor,
|
||
marginBottom: compactMode || inlineMode ? 0 : 6,
|
||
}}
|
||
>
|
||
{isFailed && item.code === currentStageCode ? `${item.label}失败` : item.label}
|
||
</div>
|
||
{!compactMode && !inlineMode ? (
|
||
<Text type="secondary" style={{ fontSize: 12, lineHeight: 1.6 }}>
|
||
{item.hint}
|
||
</Text>
|
||
) : null}
|
||
</div>
|
||
{!inlineMode && !compactMode && index < DETAIL_STAGE_STEP_DISPLAY_ITEMS.length - 1 ? (
|
||
<div
|
||
style={{
|
||
flex: 1,
|
||
height: 2,
|
||
marginTop: 17,
|
||
background: (!isFailedStage && index < currentStageIndex) || isCompletedStage ? '#52c41a' : '#e5e7eb',
|
||
}}
|
||
/>
|
||
) : null}
|
||
</React.Fragment>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
if (inline) {
|
||
return (
|
||
<div
|
||
style={{
|
||
marginTop: 12,
|
||
padding: '12px 14px',
|
||
borderRadius: 12,
|
||
border: `1px solid ${isError ? '#ffccc7' : '#d6dbff'}`,
|
||
background: isError ? '#fff2f0' : '#f7f8ff',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
gap: 12,
|
||
marginBottom: 8,
|
||
}}
|
||
>
|
||
<Text strong style={{ color: isError ? '#cf1322' : '#4f46e5' }}>
|
||
{helperText}
|
||
</Text>
|
||
<Text strong style={{ color: isError ? '#cf1322' : '#4f46e5', whiteSpace: 'nowrap' }}>
|
||
{isError ? '失败' : `${percent}%`}
|
||
</Text>
|
||
</div>
|
||
<Progress
|
||
percent={isError ? 100 : percent}
|
||
status={isError ? 'exception' : percent === 100 ? 'success' : 'active'}
|
||
strokeColor={isError ? '#ff4d4f' : '#6c73ff'}
|
||
showInfo={false}
|
||
size="small"
|
||
style={{ marginBottom: 6 }}
|
||
/>
|
||
<Text type="secondary" style={{ fontSize: 12 }}>
|
||
{`预计剩余：${isError ? '--' : formatEta(progress?.eta)}`}
|
||
</Text>
|
||
{renderStageTimeline({ inline: true })}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (compact) {
|
||
return (
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
padding: '40px 20px',
|
||
textAlign: 'center',
|
||
}}
|
||
>
|
||
<Title level={4} style={{ marginBottom: 24 }}>
|
||
{primaryStatusText}
|
||
</Title>
|
||
<Progress
|
||
type="circle"
|
||
percent={isError ? 100 : percent}
|
||
status={isError ? 'exception' : percent === 100 ? 'success' : 'active'}
|
||
strokeColor={isError ? '#ff4d4f' : { '0%': '#6c73ff', '100%': '#8d63ff' }}
|
||
size={140}
|
||
strokeWidth={10}
|
||
/>
|
||
<div style={{ marginTop: 24 }}>
|
||
<Text strong style={{ fontSize: 16, color: isError ? '#ff4d4f' : '#5d67ff', display: 'block', marginBottom: 4 }}>
|
||
{helperText}
|
||
</Text>
|
||
<Text type="secondary" style={{ fontSize: 13 }}>
|
||
{`预计剩余：${isError ? '--' : formatEta(progress?.eta)}`}
|
||
</Text>
|
||
{renderStageTimeline({ compact: true })}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
height: '100%',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
background: '#fff',
|
||
borderRadius: 16,
|
||
padding: 40,
|
||
}}
|
||
>
|
||
<div style={{ width: '100%', maxWidth: 760, textAlign: 'center' }}>
|
||
<Title level={3} style={{ marginBottom: 8 }}>
|
||
{primaryStatusText}
|
||
</Title>
|
||
<Text type="secondary" style={{ fontSize: 15 }}>
|
||
{helperText}
|
||
</Text>
|
||
|
||
<div
|
||
style={{
|
||
marginTop: 28,
|
||
marginBottom: 32,
|
||
padding: '20px 24px',
|
||
borderRadius: 20,
|
||
background: isError ? 'linear-gradient(135deg, #fff2f0, #fff7f6)' : 'linear-gradient(135deg, #f5f7ff, #faf8ff)',
|
||
border: `1px solid ${isError ? '#ffccc7' : '#d9ddff'}`,
|
||
}}
|
||
>
|
||
<Text type="secondary" style={{ fontSize: 13 }}>
|
||
当前进度
|
||
</Text>
|
||
<div
|
||
style={{
|
||
marginTop: 6,
|
||
fontSize: 40,
|
||
lineHeight: 1,
|
||
fontWeight: 700,
|
||
color: isError ? '#cf1322' : '#4f46e5',
|
||
}}
|
||
>
|
||
{progressText}
|
||
</div>
|
||
<Progress
|
||
percent={isError ? 100 : percent}
|
||
status={isError ? 'exception' : percent === 100 ? 'success' : 'active'}
|
||
strokeColor={isError ? '#ff4d4f' : '#6c73ff'}
|
||
showInfo={false}
|
||
style={{ marginTop: 18, marginBottom: 12 }}
|
||
/>
|
||
<Text type="secondary" style={{ fontSize: 13 }}>
|
||
{`预计剩余：${isError ? '--' : formatEta(progress?.eta)}`}
|
||
</Text>
|
||
</div>
|
||
|
||
{renderStageTimeline()}
|
||
|
||
<Divider style={{ margin: '32px 0 24px' }} />
|
||
<Row gutter={24}>
|
||
<Col span={8}>
|
||
<Space direction="vertical" size={0}>
|
||
<Text type="secondary">当前阶段</Text>
|
||
<Title level={4} style={{ margin: 0 }}>
|
||
{DETAIL_STAGE_STEP_DISPLAY_ITEMS[currentStageIndex]?.label || primaryStatusText}
|
||
</Title>
|
||
</Space>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Space direction="vertical" size={0}>
|
||
<Text type="secondary">任务状态</Text>
|
||
<Title level={4} style={{ margin: 0, color: isError ? '#ff4d4f' : '#52c41a' }}>
|
||
{isError ? '失败' : isCompletedStage ? '已完成' : '处理中'}
|
||
</Title>
|
||
</Space>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Space direction="vertical" size={0}>
|
||
<Text type="secondary">可查看内容</Text>
|
||
<Title level={4} style={{ margin: 0, color: '#4f46e5' }}>
|
||
{[
|
||
progress?.unifiedStatus?.canViewTranscript ? '转录' : null,
|
||
progress?.unifiedStatus?.canViewAiChapters ? '目录' : null,
|
||
progress?.unifiedStatus?.canViewSummary ? '总结' : null,
|
||
].filter(Boolean).join(' / ') || '暂无'}
|
||
</Title>
|
||
</Space>
|
||
</Col>
|
||
</Row>
|
||
<div style={{ marginTop: 20 }}>
|
||
<Text type="secondary">处理进度仅作辅助展示，阶段状态以统一状态机为准。</Text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const SpeakerEditor: React.FC<{
|
||
meetingId: number;
|
||
speakerId: string;
|
||
initialName: string;
|
||
initialLabel: string;
|
||
onSuccess: () => void;
|
||
}> = ({ meetingId, speakerId, initialName, initialLabel, onSuccess }) => {
|
||
const [name, setName] = useState(initialName || speakerId);
|
||
const [label, setLabel] = useState(initialLabel);
|
||
const [loading, setLoading] = useState(false);
|
||
const { message } = App.useApp();
|
||
const { items: speakerLabels } = useDict('biz_speaker_label');
|
||
|
||
|
||
const handleSave = async (event: React.MouseEvent) => {
|
||
event.stopPropagation();
|
||
setLoading(true);
|
||
try {
|
||
await updateSpeakerInfo({ meetingId, speakerId, newName: name, label });
|
||
message.success('发言人信息已更新');
|
||
onSuccess();
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div style={{ width: 250, padding: '8px 4px' }} onClick={(event) => event.stopPropagation()}>
|
||
<div style={{ marginBottom: 12 }}>
|
||
<Text type="secondary">发言人姓名</Text>
|
||
<Input value={name} onChange={(event) => setName(event.target.value)} placeholder="输入姓名" size="small" style={{ marginTop: 4 }} />
|
||
</div>
|
||
<div style={{ marginBottom: 16 }}>
|
||
<Text type="secondary">角色标签</Text>
|
||
<Select value={label} onChange={setLabel} placeholder="选择角色" style={{ width: '100%', marginTop: 4 }} size="small" allowClear>
|
||
{speakerLabels.map((item) => (
|
||
<Select.Option key={item.itemValue} value={item.itemValue}>
|
||
{item.itemLabel}
|
||
</Select.Option>
|
||
))}
|
||
</Select>
|
||
</div>
|
||
<Button type="primary" size="small" block onClick={handleSave} loading={loading}>
|
||
同步到全局
|
||
</Button>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const renderContentWithHighlight = (content: string, keyword: string) => {
|
||
if (!keyword || !content.toLowerCase().includes(keyword.toLowerCase())) {
|
||
return content;
|
||
}
|
||
|
||
const parts = content.split(new RegExp(`(${keyword})`, 'gi'));
|
||
return (
|
||
<>
|
||
{parts.map((part, i) => (
|
||
part.toLowerCase() === keyword.toLowerCase() ? (
|
||
<span key={i} className="highlight-text">{part}</span>
|
||
) : part
|
||
))}
|
||
</>
|
||
);
|
||
};
|
||
|
||
type ActiveTranscriptRowProps = {
|
||
item: MeetingTranscriptVO;
|
||
meetingId: number;
|
||
isOwner: boolean;
|
||
isEditing: boolean;
|
||
isSaving: boolean;
|
||
speakerLabelMap: Map<string, string>;
|
||
onPlay: (timeMs: number) => void;
|
||
onStartEdit: (item: MeetingTranscriptVO, event: React.MouseEvent) => void;
|
||
onDraftBlur: (item: MeetingTranscriptVO, value: string) => void;
|
||
onDraftKeyDown: (item: MeetingTranscriptVO, value: string, event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
|
||
onSpeakerUpdated: () => void;
|
||
registerRow: (id: number, node: HTMLDivElement | null) => void;
|
||
isActive: boolean;
|
||
isLinkedHighlight: boolean;
|
||
audioPlaying: boolean;
|
||
highlightKeyword?: string;
|
||
};
|
||
|
||
const ActiveTranscriptRow = React.memo<ActiveTranscriptRowProps>(({
|
||
item,
|
||
meetingId,
|
||
isOwner,
|
||
isEditing,
|
||
isSaving,
|
||
speakerLabelMap,
|
||
onPlay,
|
||
onStartEdit,
|
||
onDraftBlur,
|
||
onDraftKeyDown,
|
||
onSpeakerUpdated,
|
||
registerRow,
|
||
isActive,
|
||
isLinkedHighlight,
|
||
audioPlaying,
|
||
highlightKeyword = '',
|
||
}) => {
|
||
const [draftValue, setDraftValue] = useState(item.content);
|
||
const rowRef = useRef<HTMLDivElement | null>(null);
|
||
|
||
useEffect(() => {
|
||
if (isEditing) {
|
||
setDraftValue(item.content);
|
||
}
|
||
}, [isEditing, item.content]);
|
||
|
||
useEffect(() => {
|
||
if ((isActive && audioPlaying) || (highlightKeyword && item.content.toLowerCase().includes(highlightKeyword.toLowerCase()))) {
|
||
if (rowRef.current) {
|
||
rowRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
}
|
||
}
|
||
}, [isActive, audioPlaying, highlightKeyword, item.content]);
|
||
|
||
const speakerTagLabel = item.speakerLabel ? (speakerLabelMap.get(item.speakerLabel) || item.speakerLabel) : '';
|
||
|
||
return (
|
||
<List.Item
|
||
className={`transcript-row ${isActive ? 'active' : ''} ${isLinkedHighlight ? 'linked' : ''}`}
|
||
onClick={() => onPlay(item.startTime)}
|
||
>
|
||
<div
|
||
className="transcript-entry"
|
||
ref={(node) => {
|
||
rowRef.current = node;
|
||
registerRow(item.id, node);
|
||
}}
|
||
>
|
||
<Avatar icon={<UserOutlined />} className="transcript-avatar" />
|
||
<div className="transcript-content-wrap">
|
||
<div className="transcript-meta">
|
||
{isOwner ? (
|
||
<Popover
|
||
content={(
|
||
<SpeakerEditor
|
||
meetingId={meetingId}
|
||
speakerId={item.speakerId}
|
||
initialName={item.speakerName}
|
||
initialLabel={item.speakerLabel}
|
||
onSuccess={onSpeakerUpdated}
|
||
/>
|
||
)}
|
||
title="编辑发言人"
|
||
trigger="click"
|
||
>
|
||
<span className="transcript-speaker editable" onClick={(event) => event.stopPropagation()}>
|
||
{item.speakerName || item.speakerId || '发言人'} <EditOutlined style={{ fontSize: 12 }} />
|
||
</span>
|
||
</Popover>
|
||
) : (
|
||
<span className="transcript-speaker">{item.speakerName || item.speakerId || '发言人'}</span>
|
||
)}
|
||
<Text type="secondary">{formatTime(item.startTime)}</Text>
|
||
{speakerTagLabel && <Tag color="blue">{speakerTagLabel}</Tag>}
|
||
</div>
|
||
{isEditing ? (
|
||
<div
|
||
className={`transcript-bubble transcript-bubble-editing ${isSaving ? 'is-saving' : ''}`}
|
||
onClick={(event) => event.stopPropagation()}
|
||
>
|
||
<Input.TextArea
|
||
autoFocus
|
||
value={draftValue}
|
||
style={{ width: '100%' }}
|
||
onChange={(event) => setDraftValue(event.target.value)}
|
||
onKeyDown={(event) => onDraftKeyDown(item, draftValue, event)}
|
||
onBlur={(event) => {
|
||
event.stopPropagation();
|
||
onDraftBlur(item, draftValue);
|
||
}}
|
||
autoSize={{ minRows: 1, maxRows: 8 }}
|
||
className="transcript-bubble-input"
|
||
bordered={false}
|
||
/>
|
||
</div>
|
||
) : (
|
||
<div
|
||
className={`transcript-bubble ${isOwner ? 'editable' : ''}`}
|
||
onDoubleClick={isOwner ? (event) => onStartEdit(item, event) : undefined}
|
||
>
|
||
{renderContentWithHighlight(item.content, highlightKeyword)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</List.Item>
|
||
);
|
||
}, (prevProps, nextProps) => (
|
||
prevProps.item === nextProps.item
|
||
&& prevProps.meetingId === nextProps.meetingId
|
||
&& prevProps.isOwner === nextProps.isOwner
|
||
&& prevProps.isEditing === nextProps.isEditing
|
||
&& prevProps.isSaving === nextProps.isSaving
|
||
&& prevProps.speakerLabelMap === nextProps.speakerLabelMap
|
||
&& prevProps.onPlay === nextProps.onPlay
|
||
&& prevProps.onStartEdit === nextProps.onStartEdit
|
||
&& prevProps.onDraftBlur === nextProps.onDraftBlur
|
||
&& prevProps.onDraftKeyDown === nextProps.onDraftKeyDown
|
||
&& prevProps.onSpeakerUpdated === nextProps.onSpeakerUpdated
|
||
&& prevProps.registerRow === nextProps.registerRow
|
||
&& prevProps.isActive === nextProps.isActive
|
||
&& prevProps.isLinkedHighlight === nextProps.isLinkedHighlight
|
||
&& prevProps.audioPlaying === nextProps.audioPlaying
|
||
&& prevProps.highlightKeyword === nextProps.highlightKeyword
|
||
));
|
||
|
||
|
||
const MeetingDetail: React.FC = () => {
|
||
const { message } = App.useApp();
|
||
const { id } = useParams<{ id: string }>();
|
||
const navigate = useNavigate();
|
||
const [form] = Form.useForm();
|
||
const [summaryForm] = Form.useForm();
|
||
|
||
const [meeting, setMeeting] = useState<MeetingVO | null>(null);
|
||
const [transcripts, setTranscripts] = useState<MeetingTranscriptVO[]>([]);
|
||
const [meetingChapters, setMeetingChapters] = useState<MeetingChapterVO[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [editVisible, setEditVisible] = useState(false);
|
||
const [summaryVisible, setSummaryVisible] = useState(false);
|
||
const [actionLoading, setActionLoading] = useState(false);
|
||
const [downloadLoading, setDownloadLoading] = useState<'pdf' | 'word' | 'transcript' | null>(null);
|
||
const [isEditingSummary, setIsEditingSummary] = useState(false);
|
||
const [summaryDraft, setSummaryDraft] = useState('');
|
||
const [expandKeywords, setExpandKeywords] = useState(false);
|
||
const [expandSummary, setExpandSummary] = useState(false);
|
||
const [selectedKeywords, setSelectedKeywords] = useState<string[]>([]);
|
||
const [workspaceTab, setWorkspaceTab] = useState<WorkspaceTab>('transcript');
|
||
const [addingHotwords, setAddingHotwords] = useState(false);
|
||
const [editingTranscriptId, setEditingTranscriptId] = useState<number | null>(null);
|
||
const [savingTranscriptId, setSavingTranscriptId] = useState<number | null>(null);
|
||
const [llmModels, setLlmModels] = useState<AiModelVO[]>([]);
|
||
const [prompts, setPrompts] = useState<PromptTemplateVO[]>([]);
|
||
const [userList, setUserList] = useState<SysUser[]>([]);
|
||
const { items: speakerLabels } = useDict('biz_speaker_label');
|
||
const [sharePopoverOpen, setSharePopoverOpen] = useState(false);
|
||
const [shareSaving, setShareSaving] = useState(false);
|
||
const [sharePasswordEnabled, setSharePasswordEnabled] = useState(false);
|
||
const [sharePasswordDraft, setSharePasswordDraft] = useState('');
|
||
const [highlightKeyword, setHighlightKeyword] = useState('');
|
||
const [linkedTranscriptIds, setLinkedTranscriptIds] = useState<number[]>([]);
|
||
const [linkedChapterKey, setLinkedChapterKey] = useState<string | null>(null);
|
||
const [meetingShareBaseUrl, setMeetingShareBaseUrl] = useState('');
|
||
|
||
const audioRef = useRef<HTMLAudioElement>(null);
|
||
const [audioCurrentTime, setAudioCurrentTime] = useState(0);
|
||
const [audioDuration, setAudioDuration] = useState(0);
|
||
const [audioPlaying, setAudioPlaying] = useState(false);
|
||
const [audioPlaybackRate, setAudioPlaybackRate] = useState(1);
|
||
|
||
const emptyTranscriptNoticeShownRef = useRef<number | null>(null);
|
||
const audioPlaybackErrorShownRef = useRef<string | null>(null);
|
||
|
||
const transcriptItemRefs = useRef<Record<number, HTMLDivElement | null>>({});
|
||
const pendingTranscriptScrollIdRef = useRef<number | null>(null);
|
||
const leftColumnRef = useRef<HTMLDivElement>(null);
|
||
const transcriptSectionRef = useRef<HTMLDivElement>(null);
|
||
const [showFloatingTranscriptPlayer, setShowFloatingTranscriptPlayer] = useState(false);
|
||
const [floatingTranscriptPlayerLayout, setFloatingTranscriptPlayerLayout] = useState<{ left: number; width: number } | null>(null);
|
||
const [generationProgress, setGenerationProgress] = useState<MeetingProgress | null>(null);
|
||
const autoOpenedCatalogAttemptRef = useRef<string | null>(null);
|
||
|
||
const fetchData = useCallback(async (meetingId: number) => {
|
||
try {
|
||
const [detailRes, transcriptRes, chapterRes, shareConfigRes, progressRes] = await Promise.all([
|
||
getMeetingDetail(meetingId),
|
||
getTranscripts(meetingId),
|
||
getMeetingChapters(meetingId),
|
||
getMeetingShareConfig().catch(() => null),
|
||
getMeetingProgress(meetingId, { suppressErrorToast: true }).catch(() => null),
|
||
]);
|
||
setMeeting(detailRes.data.data);
|
||
setTranscripts(transcriptRes.data.data || []);
|
||
setMeetingChapters(chapterRes.data.data || []);
|
||
setMeetingShareBaseUrl(shareConfigRes?.data?.data?.h5BaseUrl || '');
|
||
setGenerationProgress(progressRes?.data?.data || null);
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
const analysis = useMemo(
|
||
() => buildMeetingAnalysis(meeting?.analysis, meeting?.summaryContent, meeting?.tags || ''),
|
||
[meeting?.analysis, meeting?.summaryContent, meeting?.tags],
|
||
);
|
||
const hasAnalysis = !!(
|
||
analysis.overview ||
|
||
analysis.keywords.length ||
|
||
analysis.chapters.length ||
|
||
analysis.speakerSummaries.length ||
|
||
analysis.keyPoints.length ||
|
||
analysis.todos.length
|
||
);
|
||
const visibleKeywords = expandKeywords ? analysis.keywords : analysis.keywords.slice(0, 9);
|
||
const meetingTags = useMemo(
|
||
() => (meeting?.tags?.split(',').map((item) => item.trim()).filter(Boolean) || []),
|
||
[meeting?.tags],
|
||
);
|
||
const discussionItems = useMemo(() => {
|
||
if (analysis.keyPoints.length) {
|
||
return analysis.keyPoints;
|
||
}
|
||
return analysis.chapters.map((item) => ({
|
||
title: item.title,
|
||
summary: item.summary,
|
||
time: item.time,
|
||
}));
|
||
}, [analysis.chapters, analysis.keyPoints]);
|
||
const speakerLabelMap = useMemo(
|
||
() => new Map(speakerLabels.map((item) => [item.itemValue, item.itemLabel])),
|
||
[speakerLabels],
|
||
);
|
||
const previewAccessPassword = useMemo(() => (meeting?.accessPassword || '').trim(), [meeting?.accessPassword]);
|
||
const playbackAudioUrl = useMemo(() => resolveMeetingPlaybackAudioUrl(meeting), [meeting]);
|
||
const audioDownloadFileName = useMemo(() => getMeetingAudioDownloadName(meeting), [meeting]);
|
||
const audioDownloadFormatLabel = useMemo(
|
||
() => resolveAudioExtension(playbackAudioUrl).toUpperCase(),
|
||
[playbackAudioUrl],
|
||
);
|
||
const keywordItems = useMemo(
|
||
() => (analysis.keywords.length ? visibleKeywords : meetingTags),
|
||
[analysis.keywords.length, meetingTags, visibleKeywords],
|
||
);
|
||
const catalogChapterLinks = useMemo<ChapterTranscriptLink[]>(() => {
|
||
const transcriptIdToIndex = new Map(transcripts.map((item, index) => [item.id, index]));
|
||
const sourceChapters: MeetingChapterVO[] = meetingChapters.length
|
||
? meetingChapters
|
||
: analysis.chapters.map((item) => ({
|
||
title: item.title,
|
||
time: item.time,
|
||
} as MeetingChapterVO));
|
||
|
||
return sourceChapters.map((chapter, index) => {
|
||
let matchedTranscripts: MeetingTranscriptVO[] = [];
|
||
const sourceTranscriptIds = Array.isArray(chapter.sourceTranscriptIds)
|
||
? chapter.sourceTranscriptIds
|
||
.map((item: number) => Number(item))
|
||
.filter((item: number) => Number.isFinite(item) && transcriptIdToIndex.has(item))
|
||
: [];
|
||
|
||
if (sourceTranscriptIds.length) {
|
||
matchedTranscripts = sourceTranscriptIds
|
||
.map((item: number) => transcripts[transcriptIdToIndex.get(item)!])
|
||
.filter(Boolean);
|
||
} else if (chapter.startTranscriptId && chapter.endTranscriptId) {
|
||
const startIndex = transcriptIdToIndex.get(Number(chapter.startTranscriptId));
|
||
const endIndex = transcriptIdToIndex.get(Number(chapter.endTranscriptId));
|
||
if (startIndex !== undefined && endIndex !== undefined) {
|
||
matchedTranscripts = transcripts.slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex) + 1);
|
||
}
|
||
} else {
|
||
const startMs = typeof chapter.startTime === 'number' ? chapter.startTime : parseChapterTimeToMs(chapter.time);
|
||
const nextChapterStartMs = sourceChapters
|
||
.slice(index + 1)
|
||
.map((item: MeetingChapterVO) => (typeof item.startTime === 'number' ? item.startTime : parseChapterTimeToMs(item.time)))
|
||
.find((item): item is number => item !== null && startMs !== null && item > startMs);
|
||
|
||
if (startMs !== null) {
|
||
const firstTranscriptIndex = transcripts.findIndex((item) => item.endTime > startMs);
|
||
if (firstTranscriptIndex >= 0) {
|
||
const lastTranscriptIndex = nextChapterStartMs === undefined
|
||
? transcripts.length
|
||
: transcripts.findIndex((item) => item.startTime >= nextChapterStartMs);
|
||
matchedTranscripts = transcripts.slice(
|
||
firstTranscriptIndex,
|
||
lastTranscriptIndex >= 0 ? lastTranscriptIndex : transcripts.length,
|
||
);
|
||
}
|
||
}
|
||
}
|
||
|
||
return {
|
||
key: `${chapter.chapterNo ?? index}-${chapter.title || 'chapter'}`,
|
||
title: chapter.title || `章节 ${index + 1}`,
|
||
timeLabel: chapter.time || '--:--',
|
||
transcriptIds: matchedTranscripts.map((item) => item.id),
|
||
firstTranscriptId: matchedTranscripts[0]?.id ?? null,
|
||
firstTranscriptStartTime: matchedTranscripts[0]?.startTime ?? null,
|
||
};
|
||
});
|
||
}, [analysis.chapters, meetingChapters, transcripts]);
|
||
const sharePreviewUrl = useMemo(() => {
|
||
const meetingId = meeting?.id ?? (id ? Number(id) : NaN);
|
||
return buildMeetingPreviewUrl(meetingShareBaseUrl, meetingId);
|
||
}, [meetingShareBaseUrl, meeting?.id, id]);
|
||
const meetingPreviewUrl = useMemo(() => {
|
||
const meetingId = meeting?.id ?? (id ? Number(id) : NaN);
|
||
return buildMeetingPreviewUrl(meetingShareBaseUrl, meetingId, previewAccessPassword);
|
||
}, [meetingShareBaseUrl, meeting?.id, id, previewAccessPassword]);
|
||
const summaryModelDisplayName = useMemo(() => {
|
||
const matchedModel = llmModels.find((item) => item.id === meeting?.summaryModelId);
|
||
if (matchedModel?.modelName) {
|
||
return matchedModel.modelName;
|
||
}
|
||
if (meeting?.summaryModelId) {
|
||
return `模型 #${meeting.summaryModelId}`;
|
||
}
|
||
return '未配置';
|
||
}, [llmModels, meeting?.summaryModelId]);
|
||
const promptDisplayName = useMemo(() => {
|
||
const matchedPrompt = prompts.find((item) => item.id === meeting?.promptId);
|
||
if (matchedPrompt?.templateName) {
|
||
return matchedPrompt.templateName;
|
||
}
|
||
if (meeting?.promptId) {
|
||
return `模板 #${meeting.promptId}`;
|
||
}
|
||
return '未配置';
|
||
}, [meeting?.promptId, prompts]);
|
||
const hotWordGroupDisplayName = useMemo(() => {
|
||
if (meeting?.hotWordGroupName?.trim()) {
|
||
return meeting.hotWordGroupName.trim();
|
||
}
|
||
if (meeting?.hotWordGroupId) {
|
||
return `热词组 #${meeting.hotWordGroupId}`;
|
||
}
|
||
return '未使用';
|
||
}, [meeting?.hotWordGroupId, meeting?.hotWordGroupName]);
|
||
|
||
const isOwner = useMemo(() => {
|
||
if (!meeting) return false;
|
||
const profileStr = sessionStorage.getItem('userProfile');
|
||
if (profileStr) {
|
||
const profile = JSON.parse(profileStr);
|
||
return profile.isPlatformAdmin === true || profile.isTenantAdmin === true || profile.userId === meeting.creatorId;
|
||
}
|
||
return false;
|
||
}, [meeting]);
|
||
|
||
const aiCatalogEnabled = meeting?.aiCatalogEnabled !== false;
|
||
const canRetrySummary = isOwner
|
||
&& transcripts.length > 0
|
||
&& meeting?.status !== 1
|
||
&& meeting?.status !== 2
|
||
&& meeting?.latestSummaryAttemptStatus !== 3
|
||
&& (!aiCatalogEnabled || meeting?.latestChapterAttemptStatus !== 3);
|
||
const canRetryTranscription = isOwner && meeting?.status === 4 && transcripts.length === 0 && !!meeting?.audioUrl;
|
||
const canRetryFailedSummaryTask = isOwner && meeting?.latestSummaryAttemptStatus === 3 && meeting?.status !== 2;
|
||
const canRetryFailedChapterTask = aiCatalogEnabled && isOwner && meeting?.latestChapterAttemptStatus === 3 && meeting?.status !== 2;
|
||
|
||
const canRetrySchedule = isOwner && meeting?.status === 0 && (!generationProgress || generationProgress.percent <= 0) && !!generationProgress?.queuedAt && dayjs().diff(dayjs(generationProgress.queuedAt)) >= QUEUED_RETRY_THRESHOLD_MS;
|
||
|
||
const handleRetrySchedule = async () => {
|
||
if (!meeting) return;
|
||
setActionLoading(true);
|
||
try {
|
||
const response = await retryScheduleMeeting(meeting.id);
|
||
if (response.data?.data) {
|
||
message.success("已触发重新调度");
|
||
} else {
|
||
message.info("当前没有可重新调度的排队任务");
|
||
}
|
||
await fetchData(meeting.id);
|
||
} catch {
|
||
message.error("重新调度失败");
|
||
} finally {
|
||
setActionLoading(false);
|
||
}
|
||
};
|
||
|
||
const hasSummaryContent = Boolean(meeting?.summaryContent?.trim());
|
||
const hasCatalogContent = aiCatalogEnabled && catalogChapterLinks.length > 0;
|
||
const generationFailureNotice = useMemo<MeetingStateNotice | null>(() => {
|
||
if (!meeting || meeting.status !== 4) {
|
||
return null;
|
||
}
|
||
|
||
const hasFallbackContent = hasSummaryContent || hasCatalogContent;
|
||
if (aiCatalogEnabled && meeting.latestChapterAttemptStatus === 3) {
|
||
const detail = meeting.latestChapterAttemptErrorMsg || '章节生成失败';
|
||
return {
|
||
title: hasFallbackContent ? '历史内容仍可查看' : '本次 AI 目录生成失败',
|
||
description: hasFallbackContent
|
||
? `最近一次 AI 目录生成失败，当前展示的是最近一次成功生成的内容。失败原因：${detail}`
|
||
: `AI 目录生成失败，当前没有可展示的历史目录或总结内容。失败原因：${detail}`,
|
||
type: hasFallbackContent ? 'info' : 'warning',
|
||
hasFallbackContent,
|
||
scope: 'catalog',
|
||
};
|
||
}
|
||
|
||
if (meeting.latestSummaryAttemptStatus === 3) {
|
||
const detail = meeting.latestSummaryAttemptErrorMsg || '总结生成失败';
|
||
return {
|
||
title: hasFallbackContent ? '历史总结可用' : '本次总结生成失败',
|
||
description: hasFallbackContent
|
||
? `最近一次重新总结失败，当前展示的是最近一次成功生成的总结内容。失败原因：${detail}`
|
||
: `总结生成失败，当前没有可展示的历史总结内容。失败原因：${detail}`,
|
||
type: hasFallbackContent ? 'info' : 'warning',
|
||
hasFallbackContent,
|
||
scope: 'summary',
|
||
};
|
||
}
|
||
|
||
return {
|
||
title: '会议处理异常',
|
||
description: '会议在处理过程中遇到了问题。您可以尝试重新发起识别或总结。',
|
||
type: hasFallbackContent ? 'info' : 'warning',
|
||
hasFallbackContent,
|
||
scope: 'global',
|
||
};
|
||
}, [aiCatalogEnabled, hasCatalogContent, hasSummaryContent, meeting]);
|
||
const summaryPanelNotice = useMemo<MeetingStateNotice | null>(() => {
|
||
if (!meeting || !hasSummaryContent) {
|
||
return null;
|
||
}
|
||
if (meeting.status === 2) {
|
||
return {
|
||
title: '正在生成新版总结',
|
||
description: '当前展示的是上一版已成功生成的总结，系统会在新版完成后自动替换。',
|
||
type: 'info',
|
||
hasFallbackContent: true,
|
||
scope: 'summary',
|
||
};
|
||
}
|
||
return null;
|
||
}, [generationFailureNotice, hasSummaryContent, meeting]);
|
||
const catalogPanelNotice = useMemo<MeetingStateNotice | null>(() => {
|
||
if (!aiCatalogEnabled || !generationFailureNotice || generationFailureNotice.scope !== 'catalog') {
|
||
return null;
|
||
}
|
||
if (generationFailureNotice.hasFallbackContent && hasCatalogContent) {
|
||
return {
|
||
title: '当前展示的是历史成功目录',
|
||
description: generationFailureNotice.description,
|
||
type: generationFailureNotice.type,
|
||
hasFallbackContent: true,
|
||
scope: 'catalog',
|
||
};
|
||
}
|
||
return generationFailureNotice;
|
||
}, [aiCatalogEnabled, generationFailureNotice, hasCatalogContent]);
|
||
const emptyTranscriptFailureNotice = useMemo(() => {
|
||
if (!meeting || meeting.status !== 4 || transcripts.length > 0) {
|
||
return null;
|
||
}
|
||
|
||
return {
|
||
title: '识别已结束，但没有生成可用转录',
|
||
description: canRetryTranscription
|
||
? 'ASR 调用已返回，但当前没有写入任何转录文本，所以列表状态仍显示失败。你可以直接重新识别，或先检查录音是否静音、时长过短、音量过低。'
|
||
: 'ASR 调用已返回，但当前没有写入任何转录文本，所以列表状态仍显示失败。建议先检查录音是否静音、时长过短、音量过低或音质异常。',
|
||
hint: canRetryTranscription ? '可以直接点击“重新识别”继续处理。' : '当前没有可重试的音频入口，请先确认原始录音文件是否有效。',
|
||
};
|
||
}, [canRetryTranscription, meeting, transcripts.length]);
|
||
|
||
useEffect(() => {
|
||
if (meeting?.status !== 1 && meeting?.status !== 2) {
|
||
setGenerationProgress(null);
|
||
autoOpenedCatalogAttemptRef.current = null;
|
||
}
|
||
}, [meeting?.id, meeting?.status]);
|
||
|
||
useEffect(() => {
|
||
if (!aiCatalogEnabled && workspaceTab === 'catalog') {
|
||
setWorkspaceTab('transcript');
|
||
}
|
||
}, [aiCatalogEnabled, workspaceTab]);
|
||
|
||
useEffect(() => {
|
||
const attemptKey = String(meeting?.latestChapterAttemptTaskId ?? meeting?.latestSummaryAttemptTaskId ?? '');
|
||
if (meeting?.status !== 2 || !attemptKey) {
|
||
return;
|
||
}
|
||
if (!aiCatalogEnabled || (generationProgress?.percent ?? 0) < 88 || catalogChapterLinks.length === 0) {
|
||
return;
|
||
}
|
||
if (autoOpenedCatalogAttemptRef.current === attemptKey) {
|
||
return;
|
||
}
|
||
autoOpenedCatalogAttemptRef.current = attemptKey;
|
||
setWorkspaceTab('catalog');
|
||
}, [
|
||
aiCatalogEnabled,
|
||
catalogChapterLinks.length,
|
||
generationProgress?.percent,
|
||
meeting?.latestChapterAttemptTaskId,
|
||
meeting?.latestSummaryAttemptTaskId,
|
||
meeting?.status,
|
||
]);
|
||
|
||
useEffect(() => {
|
||
if (!playbackAudioUrl) {
|
||
setShowFloatingTranscriptPlayer(false);
|
||
setFloatingTranscriptPlayerLayout(null);
|
||
return undefined;
|
||
}
|
||
|
||
const updateFloatingPlayerState = () => {
|
||
const target = transcriptSectionRef.current;
|
||
if (!target) {
|
||
setShowFloatingTranscriptPlayer(false);
|
||
setFloatingTranscriptPlayerLayout(null);
|
||
return;
|
||
}
|
||
|
||
const rect = target.getBoundingClientRect();
|
||
const rootRect = leftColumnRef.current?.getBoundingClientRect();
|
||
|
||
setFloatingTranscriptPlayerLayout({
|
||
left: rect.left,
|
||
width: rect.width,
|
||
});
|
||
|
||
if (rootRect) {
|
||
const isVisible = rect.bottom > rootRect.top + 80 && rect.top < rootRect.bottom - 40;
|
||
setShowFloatingTranscriptPlayer(isVisible);
|
||
return;
|
||
}
|
||
|
||
const isVisible = rect.bottom > 120 && rect.top < window.innerHeight - 80;
|
||
setShowFloatingTranscriptPlayer(isVisible);
|
||
};
|
||
|
||
updateFloatingPlayerState();
|
||
|
||
const target = transcriptSectionRef.current;
|
||
const root = leftColumnRef.current;
|
||
const resizeObserver = target ? new ResizeObserver(() => updateFloatingPlayerState()) : null;
|
||
if (target && resizeObserver) {
|
||
resizeObserver.observe(target);
|
||
}
|
||
|
||
window.addEventListener('resize', updateFloatingPlayerState);
|
||
window.addEventListener('scroll', updateFloatingPlayerState, { passive: true });
|
||
root?.addEventListener('scroll', updateFloatingPlayerState, { passive: true });
|
||
|
||
return () => {
|
||
window.removeEventListener('resize', updateFloatingPlayerState);
|
||
window.removeEventListener('scroll', updateFloatingPlayerState);
|
||
root?.removeEventListener('scroll', updateFloatingPlayerState);
|
||
resizeObserver?.disconnect();
|
||
};
|
||
}, [meeting?.status, playbackAudioUrl]);
|
||
|
||
useEffect(() => {
|
||
if (!id) return;
|
||
fetchData(Number(id));
|
||
loadAiConfigs();
|
||
loadUsers();
|
||
}, [id, fetchData]);
|
||
|
||
useEffect(() => {
|
||
setSelectedKeywords((current) => current.filter((item) => analysis.keywords.includes(item)));
|
||
}, [analysis.keywords]);
|
||
|
||
useEffect(() => {
|
||
if (workspaceTab !== 'transcript') {
|
||
return;
|
||
}
|
||
|
||
const pendingId = pendingTranscriptScrollIdRef.current;
|
||
if (!pendingId) {
|
||
return;
|
||
}
|
||
|
||
const frameId = window.requestAnimationFrame(() => {
|
||
const target = transcriptItemRefs.current[pendingId];
|
||
if (target) {
|
||
target.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
pendingTranscriptScrollIdRef.current = null;
|
||
}
|
||
});
|
||
|
||
return () => window.cancelAnimationFrame(frameId);
|
||
}, [workspaceTab, transcripts, linkedTranscriptIds]);
|
||
|
||
useEffect(() => {
|
||
if (meeting?.audioSaveStatus === 'FAILED') {
|
||
message.warning(meeting.audioSaveMessage || '实时会议已完成，但音频保存失败，当前无法播放会议录音。转写和总结不受影响。');
|
||
}
|
||
}, [meeting?.id, meeting?.audioSaveStatus, meeting?.audioSaveMessage]);
|
||
|
||
useEffect(() => {
|
||
if (!meeting?.id || !emptyTranscriptFailureNotice) {
|
||
return;
|
||
}
|
||
if (emptyTranscriptNoticeShownRef.current === meeting.id) {
|
||
return;
|
||
}
|
||
|
||
message.warning({
|
||
content: emptyTranscriptFailureNotice.title,
|
||
duration: 4,
|
||
});
|
||
emptyTranscriptNoticeShownRef.current = meeting.id;
|
||
}, [emptyTranscriptFailureNotice, meeting?.id, message]);
|
||
|
||
useEffect(() => {
|
||
if (!sharePopoverOpen) {
|
||
return;
|
||
}
|
||
const normalizedPassword = normalizeAccessPasswordInput(meeting?.accessPassword);
|
||
setSharePasswordEnabled(!!normalizedPassword);
|
||
setSharePasswordDraft(normalizedPassword);
|
||
}, [sharePopoverOpen, meeting?.accessPassword]);
|
||
|
||
const loadAiConfigs = async () => {
|
||
try {
|
||
const [modelRes, promptRes, defaultRes] = await Promise.all([
|
||
getAiModelPage({ current: 1, size: 100, type: 'LLM' }),
|
||
getPromptPage({ current: 1, size: 100 }),
|
||
getAiModelDefault('LLM'),
|
||
]);
|
||
setLlmModels(modelRes.data.data.records.filter((item) => item.status === 1));
|
||
setPrompts(promptRes.data.data.records.filter((item) => item.status === 1));
|
||
summaryForm.setFieldsValue({ summaryModelId: defaultRes.data.data?.id });
|
||
} catch {
|
||
// ignore
|
||
}
|
||
};
|
||
|
||
const loadUsers = async () => {
|
||
try {
|
||
const users = await listUsers();
|
||
setUserList(users || []);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
};
|
||
|
||
const handleEditMeeting = () => {
|
||
if (!meeting || !isOwner) return;
|
||
form.setFieldsValue({
|
||
...meeting,
|
||
tags: meeting.tags?.split(',').filter(Boolean),
|
||
});
|
||
setEditVisible(true);
|
||
};
|
||
|
||
const handleUpdateBasic = async () => {
|
||
const values = await form.validateFields();
|
||
setActionLoading(true);
|
||
try {
|
||
await updateMeetingBasic({
|
||
...values,
|
||
meetingId: meeting?.id,
|
||
tags: values.tags?.join(','),
|
||
});
|
||
message.success('会议信息已更新');
|
||
setEditVisible(false);
|
||
fetchData(Number(id));
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
setActionLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleSaveSummary = async () => {
|
||
setActionLoading(true);
|
||
try {
|
||
await updateMeetingSummary({
|
||
meetingId: Number(id),
|
||
summaryContent: summaryDraft,
|
||
});
|
||
message.success('总结内容已更新');
|
||
setIsEditingSummary(false);
|
||
fetchData(Number(id));
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
setActionLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleReSummary = async () => {
|
||
const values = await summaryForm.validateFields();
|
||
setActionLoading(true);
|
||
try {
|
||
await reSummary({
|
||
meetingId: Number(id),
|
||
summaryModelId: values.summaryModelId,
|
||
promptId: values.promptId,
|
||
userPrompt: values.userPrompt,
|
||
summaryDetailLevel: values.summaryDetailLevel as SummaryDetailLevel,
|
||
});
|
||
setMeeting((current) => current ? {
|
||
...current,
|
||
status: 2,
|
||
latestSummaryAttemptStatus: 0,
|
||
latestSummaryAttemptErrorMsg: undefined,
|
||
} : current);
|
||
setGenerationProgress({
|
||
percent: 90,
|
||
message: '已重新发起总结任务',
|
||
updateAt: Date.now(),
|
||
eta: 0,
|
||
});
|
||
message.success('操作成功');
|
||
await fetchData(Number(id));
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
setActionLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleOpenSummaryDrawer = () => {
|
||
summaryForm.setFieldsValue({
|
||
summaryModelId:
|
||
summaryForm.getFieldValue('summaryModelId') ??
|
||
meeting?.summaryModelId ??
|
||
llmModels.find((model) => model.isDefault === 1)?.id ??
|
||
llmModels[0]?.id,
|
||
promptId:
|
||
summaryForm.getFieldValue('promptId') ??
|
||
meeting?.promptId ??
|
||
prompts[0]?.id,
|
||
userPrompt: meeting?.lastUserPrompt ?? '',
|
||
summaryDetailLevel:
|
||
summaryForm.getFieldValue('summaryDetailLevel') ??
|
||
meeting?.summaryDetailLevel ??
|
||
'STANDARD',
|
||
});
|
||
setSummaryVisible(true);
|
||
};
|
||
|
||
const seekTo = useCallback((timeMs: number) => {
|
||
if (!audioRef.current) return;
|
||
audioRef.current.currentTime = timeMs / 1000;
|
||
audioRef.current.play();
|
||
}, []);
|
||
|
||
const handleKeywordClick = useCallback((keyword: string) => {
|
||
const firstMatch = transcripts.find((item) =>
|
||
item.content.toLowerCase().includes(keyword.toLowerCase())
|
||
);
|
||
|
||
if (firstMatch) {
|
||
setWorkspaceTab('transcript');
|
||
setLinkedTranscriptIds([]);
|
||
setLinkedChapterKey(null);
|
||
setHighlightKeyword(keyword);
|
||
seekTo(firstMatch.startTime);
|
||
message.info(`已跳转至关键词 "${keyword}" 所在位置`);
|
||
} else {
|
||
message.warning(`在转录原文中未找到关键词 "${keyword}"`);
|
||
}
|
||
}, [transcripts, seekTo, message]);
|
||
|
||
const handleTranscriptRowPlay = useCallback((timeMs: number) => {
|
||
setLinkedTranscriptIds([]);
|
||
setLinkedChapterKey(null);
|
||
seekTo(timeMs);
|
||
}, [seekTo]);
|
||
|
||
const handleLocateChapterTranscript = useCallback((chapterIndex: number) => {
|
||
const targetLink = catalogChapterLinks[chapterIndex];
|
||
if (!targetLink || !targetLink.transcriptIds.length || targetLink.firstTranscriptId === null || targetLink.firstTranscriptStartTime === null) {
|
||
message.warning('当前章节暂未匹配到可关联的转录原文');
|
||
return;
|
||
}
|
||
|
||
setWorkspaceTab('transcript');
|
||
setHighlightKeyword('');
|
||
setLinkedTranscriptIds(targetLink.transcriptIds);
|
||
setLinkedChapterKey(targetLink.key);
|
||
pendingTranscriptScrollIdRef.current = targetLink.firstTranscriptId;
|
||
seekTo(targetLink.firstTranscriptStartTime);
|
||
}, [catalogChapterLinks, message, seekTo]);
|
||
|
||
const handleRetryTranscription = async () => {
|
||
setActionLoading(true);
|
||
try {
|
||
await retryMeetingTranscription(Number(id));
|
||
message.success('已重新提交识别任务');
|
||
await fetchData(Number(id));
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
setActionLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleRetrySummaryTask = async () => {
|
||
setActionLoading(true);
|
||
try {
|
||
await retryMeetingSummary(Number(id));
|
||
message.success('已重新提交总结任务');
|
||
setMeeting((current) => current ? {
|
||
...current,
|
||
status: 2,
|
||
latestSummaryAttemptStatus: 0,
|
||
latestSummaryAttemptErrorMsg: undefined,
|
||
} : current);
|
||
await fetchData(Number(id));
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
setActionLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleRetryChapterTask = async () => {
|
||
setActionLoading(true);
|
||
try {
|
||
await retryMeetingChapter(Number(id));
|
||
message.success('已重新提交 AI 目录任务');
|
||
setMeeting((current) => current ? {
|
||
...current,
|
||
status: 2,
|
||
latestChapterAttemptStatus: 0,
|
||
latestChapterAttemptErrorMsg: undefined,
|
||
} : current);
|
||
await fetchData(Number(id));
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
setActionLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleKeywordToggle = (keyword: string, checked: boolean) => {
|
||
setSelectedKeywords((current) => {
|
||
if (checked) {
|
||
return current.includes(keyword) ? current : [...current, keyword];
|
||
}
|
||
return current.filter((item) => item !== keyword);
|
||
});
|
||
};
|
||
|
||
const handleAddSelectedHotwords = async () => {
|
||
const keywords = selectedKeywords.map((item) => item.trim()).filter(Boolean);
|
||
if (!keywords.length) {
|
||
message.warning('请先选择关键词');
|
||
return;
|
||
}
|
||
|
||
setAddingHotwords(true);
|
||
try {
|
||
const existingRes = await getHotWordPage({ current: 1, size: 500, word: '' });
|
||
const existingWords = new Set(
|
||
(existingRes.data?.data?.records || [])
|
||
.map((item) => item.word?.trim())
|
||
.filter(Boolean),
|
||
);
|
||
const toCreate = keywords.filter((item) => !existingWords.has(item));
|
||
|
||
if (!toCreate.length) {
|
||
message.info('所选关键词已存在于热词库');
|
||
return;
|
||
}
|
||
|
||
await Promise.all(
|
||
toCreate.map((word) =>
|
||
(async () => {
|
||
let pinyinList: string[] = [];
|
||
try {
|
||
const pinyinRes = await getPinyinSuggestion(word);
|
||
pinyinList = (pinyinRes.data?.data || []).map((item) => item.trim()).filter(Boolean);
|
||
} catch {
|
||
pinyinList = [];
|
||
}
|
||
return saveHotWord({
|
||
word,
|
||
pinyinList,
|
||
matchStrategy: 1,
|
||
category: '',
|
||
weight: 2,
|
||
status: 1,
|
||
remark: meeting ? `来源于会议：${meeting.title}` : '来源于会议关键词',
|
||
});
|
||
})(),
|
||
),
|
||
);
|
||
|
||
const skippedCount = keywords.length - toCreate.length;
|
||
message.success(
|
||
skippedCount > 0
|
||
? `已新增 ${toCreate.length} 个热词，跳过 ${skippedCount} 个重复项`
|
||
: `已新增 ${toCreate.length} 个热词`,
|
||
);
|
||
setSelectedKeywords([]);
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
setAddingHotwords(false);
|
||
}
|
||
};
|
||
|
||
const handleStartEditTranscript = useCallback((item: MeetingTranscriptVO, event: React.MouseEvent) => {
|
||
event.stopPropagation();
|
||
setEditingTranscriptId(item.id);
|
||
}, []);
|
||
|
||
const handleCancelEditTranscript = useCallback((event?: React.SyntheticEvent) => {
|
||
event?.stopPropagation();
|
||
setEditingTranscriptId(null);
|
||
}, []);
|
||
|
||
const handleSaveTranscript = useCallback(async (item: MeetingTranscriptVO, nextContent?: string) => {
|
||
const content = (nextContent ?? item.content ?? '').trim();
|
||
if (!content) {
|
||
message.warning('转录内容不能为空');
|
||
return;
|
||
}
|
||
|
||
if (!meeting) return;
|
||
if (content === (item.content || '').trim()) {
|
||
handleCancelEditTranscript();
|
||
return;
|
||
}
|
||
|
||
setSavingTranscriptId(item.id);
|
||
try {
|
||
await updateMeetingTranscript({
|
||
meetingId: meeting.id,
|
||
transcriptId: item.id,
|
||
content,
|
||
});
|
||
message.success('原文已更新，如需同步摘要请重新总结');
|
||
handleCancelEditTranscript();
|
||
await fetchData(meeting.id);
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
setSavingTranscriptId(null);
|
||
}
|
||
}, [fetchData, handleCancelEditTranscript, meeting]);
|
||
|
||
const handleTranscriptDraftKeyDown = useCallback((item: MeetingTranscriptVO, value: string, event: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||
if (event.key === 'Escape') {
|
||
handleCancelEditTranscript();
|
||
return;
|
||
}
|
||
if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
|
||
event.preventDefault();
|
||
void handleSaveTranscript(item, value);
|
||
}
|
||
}, [handleCancelEditTranscript, handleSaveTranscript]);
|
||
|
||
const handleTranscriptDraftBlur = useCallback((item: MeetingTranscriptVO, value: string) => {
|
||
void handleSaveTranscript(item, value);
|
||
}, [handleSaveTranscript]);
|
||
|
||
const handleTranscriptSpeakerUpdated = useCallback(() => {
|
||
if (!meeting) return;
|
||
void fetchData(meeting.id);
|
||
}, [fetchData, meeting]);
|
||
|
||
const registerTranscriptRow = useCallback((transcriptId: number, node: HTMLDivElement | null) => {
|
||
transcriptItemRefs.current[transcriptId] = node;
|
||
}, []);
|
||
|
||
const handleAudioPlaybackError = useCallback(() => {
|
||
const currentAudioUrl = playbackAudioUrl || '';
|
||
if (!currentAudioUrl || audioPlaybackErrorShownRef.current === currentAudioUrl) {
|
||
return;
|
||
}
|
||
const normalizedUrl = currentAudioUrl.split('#')[0]?.split('?')[0]?.toLowerCase() || '';
|
||
const isM4a = normalizedUrl.endsWith('.m4a');
|
||
message.warning(
|
||
isM4a
|
||
? '当前 m4a 文件在本机浏览器中无法直接播放。已确认文件与服务端响应基本正常，更可能是浏览器对该录音参数或容器实现的兼容性问题。建议优先使用 mp3、wav，或下载到本地播放。'
|
||
: '当前音频文件无法播放，请检查文件是否损坏或格式是否兼容。',
|
||
);
|
||
audioPlaybackErrorShownRef.current = currentAudioUrl;
|
||
setAudioPlaying(false);
|
||
}, [message, playbackAudioUrl]);
|
||
|
||
useEffect(() => {
|
||
const audio = audioRef.current;
|
||
if (!audio) return undefined;
|
||
|
||
const handleLoadedMetadata = () => {
|
||
setAudioDuration(Number.isFinite(audio.duration) ? audio.duration : 0);
|
||
setAudioCurrentTime(audio.currentTime || 0);
|
||
audio.playbackRate = audioPlaybackRate;
|
||
};
|
||
const handleTimeUpdate = () => {
|
||
setAudioCurrentTime(audio.currentTime || 0);
|
||
};
|
||
const handlePlay = () => setAudioPlaying(true);
|
||
const handlePause = () => setAudioPlaying(false);
|
||
const handleEnded = () => setAudioPlaying(false);
|
||
const handleError = () => handleAudioPlaybackError();
|
||
|
||
audio.addEventListener('loadedmetadata', handleLoadedMetadata);
|
||
audio.addEventListener('durationchange', handleLoadedMetadata);
|
||
audio.addEventListener('canplay', handleLoadedMetadata);
|
||
audio.addEventListener('timeupdate', handleTimeUpdate);
|
||
audio.addEventListener('play', handlePlay);
|
||
audio.addEventListener('pause', handlePause);
|
||
audio.addEventListener('ended', handleEnded);
|
||
audio.addEventListener('error', handleError);
|
||
|
||
handleLoadedMetadata();
|
||
|
||
return () => {
|
||
audio.removeEventListener('loadedmetadata', handleLoadedMetadata);
|
||
audio.removeEventListener('durationchange', handleLoadedMetadata);
|
||
audio.removeEventListener('canplay', handleLoadedMetadata);
|
||
audio.removeEventListener('timeupdate', handleTimeUpdate);
|
||
audio.removeEventListener('play', handlePlay);
|
||
audio.removeEventListener('pause', handlePause);
|
||
audio.removeEventListener('ended', handleEnded);
|
||
audio.removeEventListener('error', handleError);
|
||
};
|
||
}, [audioPlaybackRate, meeting?.status, playbackAudioUrl, handleAudioPlaybackError]);
|
||
|
||
const toggleAudioPlayback = () => {
|
||
if (!audioRef.current) return;
|
||
if (audioRef.current.paused) {
|
||
audioRef.current.play();
|
||
} else {
|
||
audioRef.current.pause();
|
||
}
|
||
};
|
||
|
||
const handleAudioProgressChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||
const nextTime = Number(event.target.value || 0);
|
||
setAudioCurrentTime(nextTime);
|
||
if (audioRef.current) {
|
||
audioRef.current.currentTime = nextTime;
|
||
}
|
||
};
|
||
|
||
const cyclePlaybackRate = () => {
|
||
if (!audioRef.current) return;
|
||
const rates = [1, 1.25, 1.5, 2];
|
||
const currentIndex = rates.findIndex((item) => item === audioPlaybackRate);
|
||
const nextRate = rates[(currentIndex + 1) % rates.length];
|
||
audioRef.current.playbackRate = nextRate;
|
||
setAudioPlaybackRate(nextRate);
|
||
};
|
||
|
||
const getFileNameFromDisposition = (disposition?: string, fallback?: string) => {
|
||
if (!disposition) return fallback || 'summary';
|
||
const utf8Match = disposition.match(/filename\*=UTF-8''([^;]+)/i);
|
||
if (utf8Match?.[1]) return decodeURIComponent(utf8Match[1]);
|
||
const normalMatch = disposition.match(/filename="?([^";]+)"?/i);
|
||
return normalMatch?.[1] || fallback || 'summary';
|
||
};
|
||
|
||
const handleDownloadSummary = async (format: 'pdf' | 'word') => {
|
||
if (!meeting) return;
|
||
if (!meeting.summaryContent) {
|
||
message.warning('当前暂无可下载的 AI 总结');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
setDownloadLoading(format);
|
||
const res = await downloadMeetingSummary(meeting.id, format);
|
||
const contentType =
|
||
res.headers['content-type'] ||
|
||
(format === 'pdf'
|
||
? 'application/pdf'
|
||
: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document');
|
||
|
||
if (contentType.includes('application/json')) {
|
||
const text = await (res.data as Blob).text();
|
||
try {
|
||
const json = JSON.parse(text);
|
||
message.error(json?.msg || '下载失败');
|
||
} catch {
|
||
message.error('下载失败');
|
||
}
|
||
return;
|
||
}
|
||
|
||
const blob = new Blob([res.data], { type: contentType });
|
||
const url = window.URL.createObjectURL(blob);
|
||
const anchor = document.createElement('a');
|
||
anchor.href = url;
|
||
anchor.download = getFileNameFromDisposition(
|
||
res.headers['content-disposition'],
|
||
`${(meeting.title || 'meeting').replace(/[\\/:*?"<>|\r\n]/g, '_')}-AI纪要.${format === 'pdf' ? 'pdf' : 'docx'}`,
|
||
);
|
||
document.body.appendChild(anchor);
|
||
anchor.click();
|
||
anchor.remove();
|
||
window.URL.revokeObjectURL(url);
|
||
} catch (error) {
|
||
console.error(error);
|
||
message.error(`${format.toUpperCase()} 下载失败`);
|
||
} finally {
|
||
setDownloadLoading(null);
|
||
}
|
||
};
|
||
|
||
const handleDownloadTranscript = async () => {
|
||
if (!meeting) return;
|
||
if (transcripts.length === 0) {
|
||
message.warning('当前暂无可下载的会议转录');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
setDownloadLoading('transcript');
|
||
const res = await downloadMeetingTranscript(meeting.id);
|
||
const contentType = res.headers['content-type'] || 'text/markdown; charset=UTF-8';
|
||
|
||
if (contentType.includes('application/json')) {
|
||
const text = await (res.data as Blob).text();
|
||
try {
|
||
const json = JSON.parse(text);
|
||
message.error(json?.msg || '下载失败');
|
||
} catch {
|
||
message.error('下载失败');
|
||
}
|
||
return;
|
||
}
|
||
|
||
const blob = new Blob([res.data], { type: contentType });
|
||
const url = window.URL.createObjectURL(blob);
|
||
const anchor = document.createElement('a');
|
||
anchor.href = url;
|
||
anchor.download = getFileNameFromDisposition(
|
||
res.headers['content-disposition'],
|
||
`${sanitizeDownloadFileName(meeting.title, 'meeting-transcript')}-Transcript.md`,
|
||
);
|
||
document.body.appendChild(anchor);
|
||
anchor.click();
|
||
anchor.remove();
|
||
window.URL.revokeObjectURL(url);
|
||
} catch (error) {
|
||
console.error(error);
|
||
message.error('转录下载失败');
|
||
} finally {
|
||
setDownloadLoading(null);
|
||
}
|
||
};
|
||
|
||
const handleDownloadAudio = () => {
|
||
if (!playbackAudioUrl) {
|
||
message.warning('当前暂无可下载的会议录音');
|
||
return;
|
||
}
|
||
|
||
const anchor = document.createElement('a');
|
||
anchor.href = playbackAudioUrl;
|
||
anchor.download = audioDownloadFileName;
|
||
anchor.target = '_blank';
|
||
anchor.rel = 'noopener noreferrer';
|
||
document.body.appendChild(anchor);
|
||
anchor.click();
|
||
anchor.remove();
|
||
};
|
||
|
||
const handleCopyPreviewLink = async () => {
|
||
if (!sharePreviewUrl) {
|
||
message.error('预览链接暂不可用');
|
||
return;
|
||
}
|
||
try {
|
||
await copyMeetingLink(sharePreviewUrl);
|
||
message.success('预览链接已复制');
|
||
} catch (error) {
|
||
console.error(error);
|
||
message.error('复制预览链接失败');
|
||
}
|
||
};
|
||
|
||
const handleOpenPreview = () => {
|
||
if (!sharePreviewUrl) {
|
||
message.error('预览链接暂不可用');
|
||
return;
|
||
}
|
||
window.open(sharePreviewUrl, '_blank', 'noopener,noreferrer');
|
||
};
|
||
|
||
const handleSharePopoverOpenChange = (open: boolean) => {
|
||
setSharePopoverOpen(open);
|
||
};
|
||
|
||
const handleSharePasswordToggle = (checked: boolean) => {
|
||
setSharePasswordEnabled(checked);
|
||
setSharePasswordDraft((current) => {
|
||
const normalizedCurrent = normalizeAccessPasswordInput(current);
|
||
if (checked) {
|
||
return normalizedCurrent || generateAccessPassword();
|
||
}
|
||
return '';
|
||
});
|
||
};
|
||
|
||
const handleRegenerateSharePassword = () => {
|
||
setSharePasswordEnabled(true);
|
||
setSharePasswordDraft(generateAccessPassword());
|
||
};
|
||
|
||
const handleSaveShareAccess = async () => {
|
||
if (!meeting) {
|
||
return;
|
||
}
|
||
const normalizedPassword = normalizeAccessPasswordInput(sharePasswordDraft);
|
||
if (sharePasswordEnabled && !ACCESS_PASSWORD_PATTERN.test(normalizedPassword)) {
|
||
message.error('\u8bbf\u95ee\u5bc6\u7801\u9700\u4e3a 4 \u4f4d\u82f1\u6587\u6216\u6570\u5b57');
|
||
return;
|
||
}
|
||
|
||
setShareSaving(true);
|
||
try {
|
||
await updateMeetingBasic({
|
||
meetingId: meeting.id,
|
||
accessPassword: sharePasswordEnabled ? normalizedPassword : '',
|
||
});
|
||
const nextPassword = sharePasswordEnabled ? normalizedPassword : '';
|
||
setMeeting((current) => (current ? { ...current, accessPassword: nextPassword } : current));
|
||
message.success(
|
||
sharePasswordEnabled
|
||
? '\u9884\u89c8\u5bc6\u7801\u5df2\u66f4\u65b0'
|
||
: '\u9884\u89c8\u5bc6\u7801\u5df2\u5173\u95ed',
|
||
);
|
||
setSharePopoverOpen(false);
|
||
} catch (error) {
|
||
console.error(error);
|
||
message.error('\u4fdd\u5b58\u9884\u89c8\u5bc6\u7801\u5931\u8d25');
|
||
} finally {
|
||
setShareSaving(false);
|
||
}
|
||
};
|
||
|
||
const shareQrContent = sharePreviewUrl ? (
|
||
<div className="meeting-share-card">
|
||
|
||
{isOwner ? (
|
||
<div className="meeting-share-settings">
|
||
<div className="meeting-share-settings-row">
|
||
<div className="meeting-share-settings-copy">
|
||
<strong>{'\u9884\u89c8\u5bc6\u7801'}</strong>
|
||
<span>
|
||
{sharePasswordEnabled && previewAccessPassword
|
||
? `访问密码${previewAccessPassword}`
|
||
: '关闭后将不需要访问密码'}
|
||
</span>
|
||
</div>
|
||
<Switch
|
||
checked={sharePasswordEnabled}
|
||
checkedChildren={'\u5f00\u542f'}
|
||
unCheckedChildren={'\u5173\u95ed'}
|
||
onChange={handleSharePasswordToggle}
|
||
/>
|
||
</div>
|
||
{sharePasswordEnabled ? (
|
||
<div className="meeting-share-settings-actions">
|
||
<Input
|
||
value={sharePasswordDraft}
|
||
maxLength={4}
|
||
placeholder={'\u4f8b\u5982 A7K2'}
|
||
onChange={(event) => setSharePasswordDraft(normalizeAccessPasswordInput(event.target.value))}
|
||
/>
|
||
<Button onClick={handleRegenerateSharePassword}>{'\u91cd\u7f6e\u9ed8\u8ba4'}</Button>
|
||
</div>
|
||
) : null}
|
||
<Button type="primary" loading={shareSaving} onClick={handleSaveShareAccess}>
|
||
{'\u4fdd\u5b58\u5bc6\u7801\u8bbe\u7f6e'}
|
||
</Button>
|
||
</div>
|
||
) : null}
|
||
<div className="meeting-share-qr-wrap">
|
||
<QRCode
|
||
value={sharePreviewUrl}
|
||
type="svg"
|
||
size={172}
|
||
color="#1677ff"
|
||
bgColor="transparent"
|
||
errorLevel="H"
|
||
bordered={false}
|
||
/>
|
||
</div>
|
||
<div className="meeting-share-caption">
|
||
{'\u4f7f\u7528\u624b\u673a\u626b\u7801\u540e\u5c06\u8df3\u8f6c\u5230\u4f1a\u8bae\u9884\u89c8\u9875\uff0c\u82e5\u5df2\u5f00\u542f\u5bc6\u7801\u9700\u624b\u52a8\u8f93\u5165\u3002'}
|
||
</div>
|
||
<div className="meeting-share-link-box">
|
||
<LinkOutlined />
|
||
<span title={sharePreviewUrl}>{sharePreviewUrl}</span>
|
||
</div>
|
||
<div className="meeting-share-actions">
|
||
<Button size="small" icon={<CopyOutlined />} onClick={handleCopyPreviewLink}>
|
||
{'\u590d\u5236\u94fe\u63a5'}
|
||
</Button>
|
||
<Button size="small" type="primary" ghost onClick={handleOpenPreview}>
|
||
{'\u6253\u5f00\u9884\u89c8'}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
) : null;
|
||
|
||
if (loading) {
|
||
return (
|
||
<div style={{ padding: 24 }}>
|
||
<Skeleton active />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!meeting) {
|
||
return (
|
||
<div style={{ padding: 24 }}>
|
||
<Empty description="会议不存在" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="meeting-detail-page">
|
||
<PageHeader
|
||
className="meeting-detail-page-header"
|
||
title={(
|
||
<div className="meeting-detail-title-wrap">
|
||
<div className="meeting-detail-title-icon">
|
||
<FileTextOutlined />
|
||
</div>
|
||
<div className="meeting-detail-title-copy">
|
||
<div className="meeting-detail-title-row">
|
||
<span className="meeting-detail-title-text">{meeting.title}</span>
|
||
{isOwner && (
|
||
<button type="button" className="meeting-detail-title-edit" onClick={handleEditMeeting} aria-label="编辑会议信息">
|
||
<EditOutlined />
|
||
</button>
|
||
)}
|
||
</div>
|
||
<div className="meeting-detail-meta-row">
|
||
<span>
|
||
<ClockCircleOutlined /> {dayjs(meeting.meetingTime).format('YYYY-MM-DD HH:mm')}
|
||
</span>
|
||
<span>{meeting.participants || '未指定'}</span>
|
||
</div>
|
||
<div className="meeting-detail-config-row">
|
||
<span className="meeting-detail-config-item">
|
||
<Text type="secondary">总结模型</Text>
|
||
<strong>{summaryModelDisplayName}</strong>
|
||
</span>
|
||
<span className="meeting-detail-config-item">
|
||
<Text type="secondary">会议模板</Text>
|
||
<strong>{promptDisplayName}</strong>
|
||
</span>
|
||
<span className="meeting-detail-config-item">
|
||
<Text type="secondary">热词组</Text>
|
||
<strong>{hotWordGroupDisplayName}</strong>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
extra={(
|
||
<Space size={10} wrap>
|
||
<Button icon={<LeftOutlined />} onClick={() => navigate('/meetings')}>
|
||
返回
|
||
</Button>
|
||
{canRetrySchedule && (
|
||
<Button icon={<SyncOutlined />} onClick={handleRetrySchedule} loading={actionLoading}>
|
||
重新调度
|
||
</Button>
|
||
)}
|
||
{canRetrySummary && (
|
||
<Button icon={<SyncOutlined />} onClick={handleOpenSummaryDrawer} disabled={actionLoading}>
|
||
重新总结
|
||
</Button>
|
||
)}
|
||
{canRetryFailedChapterTask && (
|
||
<Button icon={<SyncOutlined />} onClick={handleRetryChapterTask} loading={actionLoading}>
|
||
重试 AI 目录
|
||
</Button>
|
||
)}
|
||
{canRetryFailedSummaryTask && (
|
||
<Button icon={<SyncOutlined />} onClick={handleRetrySummaryTask} loading={actionLoading}>
|
||
重试总结
|
||
</Button>
|
||
)}
|
||
{canRetryTranscription && (
|
||
<Button icon={<SyncOutlined />} onClick={handleRetryTranscription} loading={actionLoading}>
|
||
重新识别
|
||
</Button>
|
||
)}
|
||
{isOwner && meeting.status === 2 && (
|
||
<Button icon={<LoadingOutlined />} disabled loading>
|
||
正在总结
|
||
</Button>
|
||
)}
|
||
{(playbackAudioUrl || transcripts.length > 0 || hasSummaryContent) && (
|
||
<Dropdown
|
||
menu={{
|
||
items: [
|
||
...(playbackAudioUrl ? [{
|
||
key: 'audio',
|
||
label: `下载录音 (${audioDownloadFormatLabel})`,
|
||
icon: <AudioOutlined />,
|
||
onClick: handleDownloadAudio,
|
||
}] : []),
|
||
...(transcripts.length > 0 ? [{
|
||
key: 'transcript',
|
||
label: '下载转录 MD',
|
||
icon: <DownloadOutlined />,
|
||
onClick: handleDownloadTranscript,
|
||
disabled: downloadLoading === 'transcript',
|
||
}] : []),
|
||
...(hasSummaryContent ? [
|
||
{
|
||
key: 'pdf',
|
||
label: '下载 PDF',
|
||
icon: <FilePdfOutlined />,
|
||
onClick: () => handleDownloadSummary('pdf'),
|
||
disabled: downloadLoading === 'pdf',
|
||
},
|
||
{
|
||
key: 'word',
|
||
label: '下载 Word',
|
||
icon: <FileWordOutlined />,
|
||
onClick: () => handleDownloadSummary('word'),
|
||
disabled: downloadLoading === 'word',
|
||
},
|
||
] : []),
|
||
],
|
||
}}
|
||
placement="bottomRight"
|
||
>
|
||
<Button icon={<DownloadOutlined />} loading={!!downloadLoading}>
|
||
下载
|
||
</Button>
|
||
</Dropdown>
|
||
)}
|
||
{shareQrContent ? (
|
||
<Popover
|
||
content={shareQrContent}
|
||
trigger="click"
|
||
open={sharePopoverOpen}
|
||
onOpenChange={handleSharePopoverOpenChange}
|
||
placement="bottomRight"
|
||
overlayClassName="meeting-share-popover"
|
||
>
|
||
<Button type="primary" icon={<ShareAltOutlined />}>
|
||
分享
|
||
</Button>
|
||
</Popover>
|
||
) : null}
|
||
</Space>
|
||
)}
|
||
/>
|
||
|
||
<div className="meeting-detail-workspace">
|
||
{meeting.status === 0 || meeting.status === 1 ? (
|
||
<>
|
||
<div style={{ display: 'none' }}>
|
||
<MeetingProgressDisplay
|
||
meetingId={meeting.id}
|
||
onComplete={() => fetchData(meeting.id)}
|
||
onRefreshNeeded={() => { void fetchData(meeting.id); }}
|
||
onProgressChange={setGenerationProgress}
|
||
/>
|
||
</div>
|
||
<UnifiedMeetingProgressDisplay
|
||
progress={generationProgress}
|
||
/>
|
||
</>
|
||
) : (
|
||
<>
|
||
<Row gutter={24} style={{ height: '100%' }}>
|
||
<Col xs={24} xl={13} style={{ height: '100%' }}>
|
||
<div className="detail-side-column detail-left-column">
|
||
{(generationFailureNotice || emptyTranscriptFailureNotice || meeting.audioSaveStatus === 'FAILED') && (
|
||
<Alert
|
||
type={generationFailureNotice?.type || 'warning'}
|
||
showIcon
|
||
style={{ marginBottom: 16, borderRadius: 12 }}
|
||
message={
|
||
<div style={{ fontWeight: 600 }}>
|
||
{generationFailureNotice?.title || emptyTranscriptFailureNotice?.title || '会议处理提醒'}
|
||
</div>
|
||
}
|
||
description={
|
||
<div style={{ fontSize: 13, marginTop: 4 }}>
|
||
<div>{generationFailureNotice?.description || emptyTranscriptFailureNotice?.description}</div>
|
||
{meeting.audioSaveStatus === 'FAILED' && (
|
||
<div style={{ marginTop: 4, color: '#d48806' }}>
|
||
<InfoCircleOutlined style={{ marginRight: 4 }} />
|
||
{meeting.audioSaveMessage || '录音保存失败，当前无法播放'}
|
||
</div>
|
||
)}
|
||
{canRetryTranscription && (
|
||
<div style={{ marginTop: 8 }}>
|
||
{emptyTranscriptFailureNotice?.hint}
|
||
</div>
|
||
)}
|
||
</div>
|
||
}
|
||
/>
|
||
)}
|
||
<Card className="left-flow-card summary-panel" variant="borderless">
|
||
|
||
{(meeting.status === 1 || meeting.status === 2) && (
|
||
<div style={{ display: 'none' }}>
|
||
<MeetingProgressDisplay
|
||
meetingId={meeting.id}
|
||
onComplete={() => fetchData(meeting.id)}
|
||
onRefreshNeeded={() => { void fetchData(meeting.id); }}
|
||
onProgressChange={setGenerationProgress}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{meeting.status === 2 && !hasSummaryContent ? (
|
||
<div className="summary-progress-shell">
|
||
<UnifiedMeetingProgressDisplay
|
||
progress={generationProgress}
|
||
compact
|
||
/>
|
||
</div>
|
||
) : hasSummaryContent ? (
|
||
<div className="summary-content-box">
|
||
<div className="summary-head">
|
||
<div className="summary-title">会议总结</div>
|
||
</div>
|
||
{summaryPanelNotice && (
|
||
<Alert
|
||
type={summaryPanelNotice.type}
|
||
showIcon
|
||
style={{ marginBottom: 20, borderRadius: 14 }}
|
||
message={summaryPanelNotice.title}
|
||
description={
|
||
<div>
|
||
<div>{summaryPanelNotice.description}</div>
|
||
{meeting.status === 2 ? (
|
||
<UnifiedMeetingProgressDisplay
|
||
progress={generationProgress}
|
||
inline
|
||
/>
|
||
) : null}
|
||
</div>
|
||
}
|
||
/>
|
||
)}
|
||
{/* Keywords placed between title and overview */}
|
||
<div className="summary-section" style={{ marginBottom: 24 }}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
|
||
<div className="summary-section-title" style={{ marginBottom: 0 }}>关键词</div>
|
||
{isOwner && analysis.keywords.length > 0 && (
|
||
<Button
|
||
size="small"
|
||
type="primary"
|
||
ghost
|
||
disabled={!selectedKeywords.length}
|
||
loading={addingHotwords}
|
||
onClick={handleAddSelectedHotwords}
|
||
>
|
||
加入热词 {selectedKeywords.length > 0 ? `(${selectedKeywords.length})` : ''}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
<div className="record-tags">
|
||
{keywordItems.length ? (
|
||
keywordItems.map((tag) => {
|
||
const isSelected = selectedKeywords.includes(tag);
|
||
return (
|
||
<div
|
||
key={tag}
|
||
className={`tag selectable-tag ${isSelected ? 'selected' : ''}`}
|
||
onClick={() => {
|
||
if (isOwner && analysis.keywords.length) {
|
||
handleKeywordToggle(tag, !isSelected);
|
||
}
|
||
}}
|
||
>
|
||
<span>#{tag}</span>
|
||
{isOwner && isSelected && <CheckCircleFilled style={{ fontSize: 12 }} />}
|
||
</div>
|
||
);
|
||
})
|
||
) : (
|
||
<Text type="secondary">暂无关键词</Text>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="summary-section">
|
||
<div style={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginBottom: 12
|
||
}}>
|
||
<div className="summary-section-title" style={{marginBottom: 0}}>会议概述</div>
|
||
{isOwner ? (
|
||
isEditingSummary ? (
|
||
<Space size={8}>
|
||
<Button onClick={() => setIsEditingSummary(false)}>取消</Button>
|
||
<Button type="primary" onClick={handleSaveSummary} loading={actionLoading}>保存</Button>
|
||
</Space>
|
||
) : (
|
||
<Button
|
||
size="small"
|
||
type="primary"
|
||
ghost
|
||
icon={<EditOutlined/>}
|
||
onClick={() => {
|
||
setSummaryDraft(meeting.summaryContent || '');
|
||
setIsEditingSummary(true);
|
||
}}
|
||
>
|
||
编辑
|
||
</Button>
|
||
)
|
||
) : null}
|
||
</div>
|
||
<div className="markdown-body summary-markdown">
|
||
{isEditingSummary ? (
|
||
<Input.TextArea
|
||
value={summaryDraft}
|
||
onChange={(e) => setSummaryDraft(e.target.value)}
|
||
autoSize={{ minRows: 10 }}
|
||
className="summary-inline-edit"
|
||
/>
|
||
) : (
|
||
<ReactMarkdown>
|
||
{analysis.overview || meeting.summaryContent}
|
||
</ReactMarkdown>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{discussionItems.length > 0 && !isEditingSummary && (
|
||
<div className="summary-section" style={{ marginTop: 24 }}>
|
||
<div className="summary-section-title">主要讨论点</div>
|
||
<div className="discussion-list">
|
||
{discussionItems.map((item, index) => (
|
||
<div className="discussion-item" key={`${item.title}-${index}`}>
|
||
<div className="discussion-marker" />
|
||
<div className="discussion-body">
|
||
<div className="discussion-title-row">
|
||
<strong>{item.title || `讨论点 ${index + 1}`}</strong>
|
||
</div>
|
||
<div className="discussion-copy">{item.summary}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<div className="summary-empty-state">
|
||
<Empty description="暂无智能总结内容" />
|
||
</div>
|
||
)}
|
||
</Card>
|
||
|
||
{!emptyTranscriptFailureNotice && (
|
||
<div className="section-divider-note">
|
||
<div className="section-divider-line" />
|
||
<div className="section-divider-text">
|
||
智能内容由 AI 模型生成，我们不对内容准确性和完整性作任何保证，也不代表我们的观点或态度
|
||
</div>
|
||
<div className="section-divider-line" />
|
||
</div>
|
||
)}
|
||
|
||
<div ref={transcriptSectionRef} className="transcript-player-anchor">
|
||
<Card className="left-flow-card" variant="borderless" title={<span><AudioOutlined /> 原文</span>}>
|
||
{playbackAudioUrl && (
|
||
<audio ref={audioRef} style={{ display: 'none' }} preload="auto">
|
||
<source src={playbackAudioUrl} type={resolveAudioMimeType(playbackAudioUrl)} />
|
||
</audio>
|
||
)}
|
||
{emptyTranscriptFailureNotice && (
|
||
<div className="empty-transcript-inline-note">
|
||
<div className="empty-transcript-inline-note__title">当前没有可展示的转录内容</div>
|
||
<div className="empty-transcript-inline-note__text">{emptyTranscriptFailureNotice.description}</div>
|
||
</div>
|
||
)}
|
||
<List
|
||
className="transcript-list"
|
||
dataSource={transcripts}
|
||
style={{ paddingBottom: playbackAudioUrl ? 156 : 0 }}
|
||
renderItem={(item, index) => {
|
||
const nextStartTime = transcripts[index + 1]?.startTime || Infinity;
|
||
const isActive = (audioCurrentTime * 1000) >= item.startTime && (audioCurrentTime * 1000) < nextStartTime;
|
||
|
||
return (
|
||
<ActiveTranscriptRow
|
||
item={item}
|
||
meetingId={meeting.id}
|
||
isOwner={isOwner}
|
||
isEditing={editingTranscriptId === item.id}
|
||
isSaving={savingTranscriptId === item.id}
|
||
speakerLabelMap={speakerLabelMap}
|
||
onPlay={handleTranscriptRowPlay}
|
||
onStartEdit={handleStartEditTranscript}
|
||
onDraftBlur={handleTranscriptDraftBlur}
|
||
onDraftKeyDown={handleTranscriptDraftKeyDown}
|
||
onSpeakerUpdated={handleTranscriptSpeakerUpdated}
|
||
registerRow={registerTranscriptRow}
|
||
isActive={isActive}
|
||
isLinkedHighlight={linkedTranscriptIds.includes(item.id)}
|
||
audioPlaying={audioPlaying}
|
||
/>
|
||
);
|
||
}}
|
||
locale={{ emptyText: meeting.status < 3 ? '识别任务进行中...' : '暂无数据' }}
|
||
/>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
|
||
<Col xs={24} xl={11} style={{ height: '100%' }}>
|
||
<div ref={leftColumnRef} className="detail-side-column detail-right-column">
|
||
{(
|
||
<div ref={transcriptSectionRef} className="transcript-player-anchor">
|
||
<Card
|
||
className="left-flow-card transcript-workspace-card"
|
||
variant="borderless"
|
||
style={{ height: '100%' }}
|
||
styles={{ body: { padding: 0, height: '100%', display: 'flex', flexDirection: 'column', minHeight: 0 } }}
|
||
>
|
||
{playbackAudioUrl && (
|
||
<audio ref={audioRef} style={{ display: 'none' }} preload="auto">
|
||
<source src={playbackAudioUrl} type={resolveAudioMimeType(playbackAudioUrl)} />
|
||
</audio>
|
||
)}
|
||
|
||
<div className="transcript-stage-tabs">
|
||
{aiCatalogEnabled && (
|
||
<button
|
||
type="button"
|
||
className={workspaceTab === 'catalog' ? 'active' : ''}
|
||
onClick={() => setWorkspaceTab('catalog')}
|
||
>
|
||
AI目录
|
||
</button>
|
||
)}
|
||
<button
|
||
type="button"
|
||
className={workspaceTab === 'transcript' ? 'active' : ''}
|
||
onClick={() => setWorkspaceTab('transcript')}
|
||
>
|
||
转录原文
|
||
</button>
|
||
</div>
|
||
|
||
<div className="transcript-scroll-shell">
|
||
{aiCatalogEnabled && workspaceTab === 'catalog' ? (
|
||
<div className="catalog-list">
|
||
{catalogPanelNotice && (
|
||
<Alert
|
||
type={catalogPanelNotice.type}
|
||
showIcon
|
||
style={{ marginBottom: 16 }}
|
||
message="AI 目录生成失败"
|
||
description={catalogPanelNotice.description}
|
||
/>
|
||
)}
|
||
{catalogChapterLinks.length ? (
|
||
catalogChapterLinks.map((chapter, index) => (
|
||
<div
|
||
key={chapter.key}
|
||
className={`catalog-item-container ${linkedChapterKey === chapter.key ? 'active' : ''}`}
|
||
>
|
||
<div className="catalog-timeline-axis">
|
||
<div className="catalog-timeline-dot" />
|
||
<div className="catalog-timeline-line" />
|
||
</div>
|
||
<div
|
||
className="catalog-item-card"
|
||
onClick={() => handleLocateChapterTranscript(index)}
|
||
style={{ cursor: 'pointer' }}
|
||
>
|
||
<div className="catalog-item-time">{chapter.timeLabel}</div>
|
||
<div className="catalog-item-title-row" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginTop: 4 }}>
|
||
<div className="catalog-item-title">{chapter.title}</div>
|
||
<button
|
||
type="button"
|
||
className="catalog-item-link"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleLocateChapterTranscript(index);
|
||
}}
|
||
>
|
||
<LinkOutlined /> 关联原文
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div> ))
|
||
) : meeting.status === 2 ? (
|
||
<Alert
|
||
type="info"
|
||
showIcon
|
||
style={{ marginBottom: 16 }}
|
||
message="AI 目录生成中"
|
||
description={generationProgress?.message || '正在生成 AI 目录，章节完成后会自动展示。'}
|
||
/>
|
||
) : (
|
||
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无 AI 目录" />
|
||
)}
|
||
</div>
|
||
) : (
|
||
<>
|
||
{emptyTranscriptFailureNotice && (
|
||
<div className="empty-transcript-inline-note">
|
||
<div className="empty-transcript-inline-note__title">当前没有可展示的转录内容</div>
|
||
<div className="empty-transcript-inline-note__text">{emptyTranscriptFailureNotice.description}</div>
|
||
</div>
|
||
)}
|
||
<List
|
||
className="transcript-list"
|
||
dataSource={transcripts}
|
||
style={{ paddingBottom: playbackAudioUrl ? 156 : 0 }}
|
||
renderItem={(item, index) => {
|
||
const nextStartTime = transcripts[index + 1]?.startTime || Infinity;
|
||
const isActive = (audioCurrentTime * 1000) >= item.startTime && (audioCurrentTime * 1000) < nextStartTime;
|
||
|
||
return (
|
||
<ActiveTranscriptRow
|
||
item={item}
|
||
meetingId={meeting.id}
|
||
isOwner={isOwner}
|
||
isEditing={editingTranscriptId === item.id}
|
||
isSaving={savingTranscriptId === item.id}
|
||
speakerLabelMap={speakerLabelMap}
|
||
onPlay={handleTranscriptRowPlay}
|
||
onStartEdit={handleStartEditTranscript}
|
||
onDraftBlur={handleTranscriptDraftBlur}
|
||
onDraftKeyDown={handleTranscriptDraftKeyDown}
|
||
onSpeakerUpdated={handleTranscriptSpeakerUpdated}
|
||
registerRow={registerTranscriptRow}
|
||
isActive={isActive}
|
||
isLinkedHighlight={linkedTranscriptIds.includes(item.id)}
|
||
audioPlaying={audioPlaying}
|
||
highlightKeyword={highlightKeyword}
|
||
/>
|
||
);
|
||
}}
|
||
locale={{ emptyText: meeting.status < 3 ? '识别任务进行中...' : '暂无数据' }}
|
||
/>
|
||
</>
|
||
)}
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{playbackAudioUrl && showFloatingTranscriptPlayer && floatingTranscriptPlayerLayout && (
|
||
<div
|
||
className="transcript-player transcript-player--floating"
|
||
style={{ left: floatingTranscriptPlayerLayout.left, width: floatingTranscriptPlayerLayout.width }}
|
||
>
|
||
<button type="button" className="player-main-btn" onClick={toggleAudioPlayback} aria-label="toggle-audio">
|
||
{audioPlaying ? <PauseOutlined /> : <CaretRightFilled />}
|
||
</button>
|
||
<div className="player-progress-shell">
|
||
<div className="player-time-row">
|
||
<span>{formatPlayerTime(audioCurrentTime)}</span>
|
||
<span>{formatPlayerTime(audioDuration)}</span>
|
||
</div>
|
||
<input
|
||
className="player-range"
|
||
type="range"
|
||
min={0}
|
||
max={audioDuration || 0}
|
||
step={0.1}
|
||
value={Math.min(audioCurrentTime, audioDuration || 0)}
|
||
onChange={handleAudioProgressChange}
|
||
/>
|
||
</div>
|
||
<button type="button" className="player-ghost-btn" onClick={cyclePlaybackRate}>
|
||
<FastForwardOutlined />
|
||
{audioPlaybackRate}x
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
<style>{`
|
||
@keyframes highlight-pulse {
|
||
0% { box-shadow: 0 0 0 rgba(95, 81, 255, 0); transform: scale(1); }
|
||
50% { box-shadow: 0 0 15px rgba(95, 81, 255, 0.3); transform: scale(1.02); }
|
||
100% { box-shadow: 0 0 0 rgba(95, 81, 255, 0); transform: scale(1); }
|
||
}
|
||
.highlight-text {
|
||
background: linear-gradient(120deg, rgba(95, 81, 255, 0.15) 0%, rgba(108, 140, 255, 0.1) 100%);
|
||
border-bottom: 2px solid #5f51ff;
|
||
border-radius: 3px;
|
||
padding: 1px 4px;
|
||
color: #4335eb;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
display: inline-block;
|
||
line-height: 1.2;
|
||
margin: 0 1px;
|
||
cursor: pointer;
|
||
animation: highlight-pulse 2s infinite ease-in-out;
|
||
}
|
||
.highlight-text:hover {
|
||
background: rgba(95, 81, 255, 0.25);
|
||
transform: translateY(-1px);
|
||
}
|
||
/* 当转录行处于活动状态时，调整高亮样式以保持可读性 */
|
||
.ant-list-item.transcript-row.active .highlight-text {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-bottom-color: #fff;
|
||
color: #fff;
|
||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||
animation: none; /* 活动行内不需要闪烁，避免视觉混乱 */
|
||
}
|
||
.summary-keyword-link {
|
||
color: #5f51ff;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
padding: 0 2px;
|
||
border-radius: 2px;
|
||
transition: all 0.2s;
|
||
}
|
||
.summary-keyword-link:hover {
|
||
background: rgba(95, 81, 255, 0.1);
|
||
text-decoration: underline;
|
||
}
|
||
.meeting-detail-page {
|
||
padding: 24px;
|
||
height: calc(100vh - 64px);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background:
|
||
radial-gradient(circle at 20% 20%, rgba(95, 81, 255, 0.05) 0%, transparent 40%),
|
||
radial-gradient(circle at 80% 80%, rgba(108, 140, 255, 0.05) 0%, transparent 40%),
|
||
#fbfcfd;
|
||
position: relative;
|
||
}
|
||
.meeting-detail-page::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3%3Ffilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||
opacity: 0.015;
|
||
pointer-events: none;
|
||
}
|
||
.meeting-detail-page-header {
|
||
margin-bottom: 18px;
|
||
padding: 24px 32px;
|
||
border-radius: 28px;
|
||
border: 1px solid rgba(220, 226, 242, 0.5);
|
||
background: rgba(255, 255, 255, 0.8);
|
||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.03);
|
||
backdrop-filter: blur(20px);
|
||
}
|
||
.meeting-detail-title-wrap {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
}
|
||
.meeting-detail-title-icon {
|
||
width: 42px;
|
||
height: 42px;
|
||
border-radius: 14px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 20px;
|
||
background: linear-gradient(135deg, #5f51ff, #6c8cff);
|
||
box-shadow: 0 10px 24px rgba(95, 81, 255, 0.22);
|
||
flex-shrink: 0;
|
||
}
|
||
.meeting-detail-title-copy {
|
||
display: grid;
|
||
gap: 6px;
|
||
}
|
||
.meeting-detail-title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.meeting-detail-title-text {
|
||
color: #1a1f36;
|
||
font-size: 24px;
|
||
line-height: 1.2;
|
||
font-weight: 800;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
.meeting-detail-title-edit {
|
||
width: 28px;
|
||
height: 28px;
|
||
border: 0;
|
||
border-radius: 50%;
|
||
background: rgba(95, 81, 255, 0.08);
|
||
color: #5f51ff;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.meeting-detail-meta-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px 16px;
|
||
color: #6e7695;
|
||
font-size: 13px;
|
||
}
|
||
.meeting-detail-config-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px 12px;
|
||
margin-top: 2px;
|
||
}
|
||
.meeting-detail-config-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
min-height: 34px;
|
||
padding: 6px 12px;
|
||
border-radius: 999px;
|
||
background: rgba(244, 246, 255, 0.92);
|
||
border: 1px solid rgba(227, 232, 247, 0.95);
|
||
color: #58627f;
|
||
font-size: 13px;
|
||
line-height: 1;
|
||
}
|
||
.meeting-detail-config-item strong {
|
||
color: #313a5a;
|
||
font-weight: 700;
|
||
}
|
||
.meeting-detail-workspace {
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
.detail-side-column {
|
||
height: 100%;
|
||
min-height: 0;
|
||
min-width: 0;
|
||
}
|
||
.detail-left-column {
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
padding-right: 6px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 18px;
|
||
}
|
||
.detail-left-column > .section-divider-note,
|
||
.detail-left-column > .transcript-player-anchor {
|
||
display: none;
|
||
}
|
||
.detail-right-column {
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.left-flow-card {
|
||
min-width: 0;
|
||
border-radius: 24px;
|
||
border: 1px solid rgba(228, 232, 245, 0.96);
|
||
box-shadow: 0 18px 38px rgba(127, 139, 186, 0.08);
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.98));
|
||
}
|
||
.left-flow-card .ant-card-head,
|
||
.left-flow-card .ant-card-body {
|
||
min-width: 0;
|
||
}
|
||
.summary-panel .ant-card-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
padding: 24px;
|
||
}
|
||
.summary-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 4px;
|
||
}
|
||
.summary-title {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: #1a1f36;
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
}
|
||
.summary-content-box {
|
||
background: #f8faff;
|
||
border: 1px solid #eef1f9;
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
}
|
||
.summary-section-title {
|
||
color: #9aa0bd;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
margin-bottom: 12px;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
.summary-markdown {
|
||
font-size: 15px;
|
||
line-height: 1.8;
|
||
color: #2d3553;
|
||
}
|
||
.summary-markdown p {
|
||
margin-bottom: 16px;
|
||
}
|
||
.summary-markdown ul {
|
||
padding-left: 20px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.summary-markdown li {
|
||
margin-bottom: 8px;
|
||
position: relative;
|
||
}
|
||
.summary-markdown li::marker {
|
||
color: #5f51ff;
|
||
}
|
||
.keyword-panel .ant-card-body {
|
||
display: grid;
|
||
gap: 16px;
|
||
padding: 20px 24px 24px;
|
||
}
|
||
.keyword-panel-head {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.keyword-panel-title {
|
||
color: #2d3553;
|
||
font-size: 16px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.brief-section {
|
||
display: grid;
|
||
gap: 14px;
|
||
padding: 18px 18px 0;
|
||
border-top: 1px solid rgba(230, 235, 247, 0.95);
|
||
}
|
||
.brief-section:first-of-type {
|
||
padding-top: 0;
|
||
border-top: 0;
|
||
}
|
||
.brief-section-title {
|
||
color: #5d6685;
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.06em;
|
||
}
|
||
.meeting-share-popover .ant-popover-inner {
|
||
padding: 0;
|
||
overflow: hidden;
|
||
border-radius: 24px;
|
||
box-shadow: 0 24px 56px rgba(76, 61, 39, 0.18);
|
||
background:
|
||
radial-gradient(circle at top right, rgba(82, 164, 255, 0.12), transparent 32%),
|
||
radial-gradient(circle at top left, rgba(252, 208, 157, 0.18), transparent 26%),
|
||
linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(248, 241, 231, 0.98));
|
||
}
|
||
.empty-transcript-hero {
|
||
margin-bottom: 16px;
|
||
padding: 18px 20px;
|
||
border-radius: 24px;
|
||
border: 1px solid rgba(220, 170, 77, 0.24);
|
||
background:
|
||
radial-gradient(circle at top right, rgba(255, 233, 188, 0.72), transparent 34%),
|
||
linear-gradient(135deg, rgba(255, 252, 245, 0.98), rgba(255, 245, 223, 0.98));
|
||
box-shadow: 0 22px 48px rgba(188, 148, 68, 0.14);
|
||
}
|
||
.empty-transcript-hero__badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 6px 10px;
|
||
border-radius: 999px;
|
||
background: rgba(122, 80, 14, 0.08);
|
||
color: #9a6700;
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
}
|
||
.empty-transcript-hero__content {
|
||
margin-top: 14px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 18px;
|
||
}
|
||
.empty-transcript-hero__title {
|
||
color: #7a4f0f;
|
||
font-size: 20px;
|
||
font-weight: 800;
|
||
line-height: 1.3;
|
||
}
|
||
.empty-transcript-hero__description {
|
||
margin-top: 8px;
|
||
max-width: 760px;
|
||
color: #7a5b27;
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
}
|
||
.empty-transcript-hero__hint {
|
||
margin-top: 8px;
|
||
color: #b26a00;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
}
|
||
.empty-transcript-hero__actions {
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.empty-transcript-player {
|
||
margin-top: 16px;
|
||
max-width: 480px;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
}
|
||
.empty-transcript-inline-note {
|
||
margin-bottom: 16px;
|
||
padding: 14px 16px;
|
||
border-radius: 18px;
|
||
border: 1px solid rgba(220, 170, 77, 0.22);
|
||
background: linear-gradient(135deg, rgba(255, 250, 240, 0.96), rgba(255, 245, 224, 0.92));
|
||
}
|
||
.empty-transcript-inline-note__title {
|
||
color: #8a5a00;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
}
|
||
.empty-transcript-inline-note__text {
|
||
margin-top: 6px;
|
||
color: #876537;
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
}
|
||
.meeting-share-popover .ant-popover-inner-content {
|
||
padding: 0;
|
||
}
|
||
.meeting-share-card {
|
||
width: min(82vw, 300px);
|
||
padding: 18px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
color: #33261c;
|
||
}
|
||
.meeting-share-card-head {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
.meeting-share-kicker {
|
||
color: rgba(72, 53, 39, 0.64);
|
||
font-size: 11px;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
}
|
||
.meeting-share-title {
|
||
margin-top: 6px;
|
||
font-family: Georgia, 'Times New Roman', 'Songti SC', serif;
|
||
font-size: 22px;
|
||
line-height: 1.08;
|
||
color: #33261c;
|
||
}
|
||
.meeting-share-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 6px 10px;
|
||
border-radius: 999px;
|
||
background: rgba(49, 95, 139, 0.08);
|
||
color: #315f8b;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
}
|
||
.meeting-share-qr-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 16px;
|
||
border-radius: 22px;
|
||
background: rgba(255, 255, 255, 0.72);
|
||
border: 1px solid rgba(84, 57, 31, 0.08);
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||
}
|
||
.meeting-share-caption {
|
||
color: rgba(72, 53, 39, 0.76);
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
}
|
||
.meeting-share-settings {
|
||
display: grid;
|
||
gap: 12px;
|
||
padding: 14px;
|
||
border-radius: 18px;
|
||
background: rgba(255, 255, 255, 0.62);
|
||
border: 1px solid rgba(84, 57, 31, 0.08);
|
||
}
|
||
.meeting-share-settings-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
.meeting-share-settings-copy {
|
||
display: grid;
|
||
gap: 4px;
|
||
}
|
||
.meeting-share-settings-copy strong {
|
||
color: #33261c;
|
||
font-size: 14px;
|
||
}
|
||
.meeting-share-settings-copy span {
|
||
color: rgba(72, 53, 39, 0.72);
|
||
font-size: 12px;
|
||
line-height: 1.6;
|
||
}
|
||
.meeting-share-settings-actions {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
gap: 10px;
|
||
}
|
||
.meeting-share-link-box {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 12px;
|
||
border-radius: 14px;
|
||
background: rgba(255, 255, 255, 0.72);
|
||
border: 1px solid rgba(84, 57, 31, 0.08);
|
||
color: #315f8b;
|
||
font-size: 12px;
|
||
}
|
||
.meeting-share-link-box span {
|
||
flex: 1;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.meeting-share-actions {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 10px;
|
||
}
|
||
.record-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
.tag,
|
||
.summary-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 6px 14px;
|
||
border-radius: 999px;
|
||
background: rgba(22, 119, 255, 0.06);
|
||
color: var(--app-primary-color);
|
||
border: 1px solid rgba(22, 119, 255, 0.15);
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
}
|
||
.selectable-tag {
|
||
cursor: pointer;
|
||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||
}
|
||
.selectable-tag:hover {
|
||
background: rgba(22, 119, 255, 0.12);
|
||
border-color: rgba(22, 119, 255, 0.3);
|
||
transform: translateY(-1px);
|
||
}
|
||
.selectable-tag.selected {
|
||
background: linear-gradient(135deg, var(--app-primary-color), #36cfc9);
|
||
color: #ffffff;
|
||
border-color: transparent;
|
||
font-weight: 600;
|
||
box-shadow: 0 4px 12px rgba(22, 119, 255, 0.24);
|
||
}
|
||
.selectable-tag.selected:hover {
|
||
box-shadow: 0 6px 16px rgba(22, 119, 255, 0.35);
|
||
transform: translateY(-2px);
|
||
}
|
||
.summary-copy {
|
||
color: #465072;
|
||
font-size: 14px;
|
||
line-height: 1.92;
|
||
position: relative;
|
||
white-space: pre-wrap;
|
||
}
|
||
.summary-fade {
|
||
max-height: 162px;
|
||
overflow: hidden;
|
||
}
|
||
.summary-fade::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: 52px;
|
||
background: linear-gradient(180deg, rgba(248, 250, 255, 0), rgba(248, 250, 255, 0.98));
|
||
}
|
||
.summary-link {
|
||
width: fit-content;
|
||
padding: 0;
|
||
border: 0;
|
||
background: transparent;
|
||
color: #6470ff;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
}
|
||
.discussion-list {
|
||
display: grid;
|
||
gap: 16px;
|
||
}
|
||
.discussion-item {
|
||
display: grid;
|
||
grid-template-columns: 12px minmax(0, 1fr);
|
||
gap: 14px;
|
||
align-items: flex-start;
|
||
}
|
||
.discussion-marker {
|
||
width: 8px;
|
||
height: 8px;
|
||
margin-top: 10px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #5f51ff, #7f8dff);
|
||
box-shadow: 0 0 0 5px rgba(95, 81, 255, 0.08);
|
||
}
|
||
.discussion-body {
|
||
display: grid;
|
||
gap: 8px;
|
||
color: #4f5876;
|
||
line-height: 1.8;
|
||
}
|
||
.discussion-title-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.discussion-title-row strong {
|
||
color: #233053;
|
||
font-size: 15px;
|
||
}
|
||
.discussion-copy {
|
||
color: #4f5876;
|
||
line-height: 1.86;
|
||
}
|
||
.discussion-meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
.transcript-workspace-card {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
.transcript-keyword-bar {
|
||
padding: 18px 18px 12px;
|
||
border-bottom: 1px solid rgba(228, 232, 245, 0.92);
|
||
display: grid;
|
||
gap: 14px;
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.92));
|
||
}
|
||
.transcript-keyword-label {
|
||
color: #2d3553;
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.transcript-keyword-body {
|
||
display: grid;
|
||
gap: 12px;
|
||
}
|
||
.transcript-keyword-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.transcript-stage-tabs {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 32px;
|
||
padding: 0 24px;
|
||
min-height: 56px;
|
||
border-bottom: 1px solid #eef1f9;
|
||
background: #ffffff;
|
||
}
|
||
.transcript-stage-tabs button {
|
||
padding: 0;
|
||
border: 0;
|
||
background: transparent;
|
||
color: #6e7695;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
height: 100%;
|
||
cursor: pointer;
|
||
position: relative;
|
||
transition: color 0.2s;
|
||
}
|
||
.transcript-stage-tabs button:hover {
|
||
color: #5f51ff;
|
||
}
|
||
.transcript-stage-tabs button.active {
|
||
color: #5f51ff;
|
||
}
|
||
.transcript-stage-tabs button.active::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: 3px;
|
||
background: #5f51ff;
|
||
border-radius: 99px 99px 0 0;
|
||
}
|
||
.transcript-scroll-shell {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
padding: 18px 18px 0;
|
||
}
|
||
.catalog-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
padding: 10px 0 20px;
|
||
}
|
||
.catalog-item-container {
|
||
display: flex;
|
||
gap: 20px;
|
||
padding: 0 10px;
|
||
}
|
||
.catalog-timeline-axis {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 20px;
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
}
|
||
.catalog-timeline-dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
background: #5f51ff;
|
||
border-radius: 50%;
|
||
margin-top: 24px;
|
||
z-index: 2;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.catalog-timeline-line {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background: #eef1f9;
|
||
z-index: 1;
|
||
}
|
||
.catalog-item-container:first-child .catalog-timeline-line {
|
||
top: 24px;
|
||
}
|
||
.catalog-item-container:last-child .catalog-timeline-line {
|
||
bottom: calc(100% - 34px);
|
||
}
|
||
.catalog-item-card {
|
||
flex: 1;
|
||
background: #ffffff;
|
||
border: 1px solid #eef1f9;
|
||
border-radius: 12px;
|
||
padding: 16px 20px;
|
||
margin-bottom: 20px;
|
||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||
}
|
||
.catalog-item-card:hover {
|
||
background: #f9faff;
|
||
border-color: rgba(95, 81, 255, 0.2);
|
||
}
|
||
.catalog-item-link {
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
padding: 4px 10px;
|
||
border-radius: 6px;
|
||
border: 1px solid transparent;
|
||
background: rgba(95, 81, 255, 0.06);
|
||
color: #5f51ff;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.catalog-item-container:hover .catalog-item-link {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.summary-inline-edit {
|
||
width: 100% !important;
|
||
border-radius: 12px !important;
|
||
border: 1px solid #d9d9d9 !important;
|
||
padding: 12px 16px !important;
|
||
font-size: 15px !important;
|
||
line-height: 1.8 !important;
|
||
color: #2d3553 !important;
|
||
background: #fff !important;
|
||
}
|
||
.summary-inline-edit:focus {
|
||
border-color: #5f51ff !important;
|
||
box-shadow: 0 0 0 2px rgba(95, 81, 255, 0.1) !important;
|
||
}
|
||
.catalog-item-link:hover {
|
||
background: rgba(95, 81, 255, 0.12);
|
||
border-color: rgba(95, 81, 255, 0.2);
|
||
}
|
||
|
||
.tag,
|
||
.summary-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 5px 14px;
|
||
border-radius: 99px;
|
||
background: #ffffff;
|
||
color: #6e7695;
|
||
border: 1px solid #eef1f9;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.selectable-tag:hover {
|
||
border-color: #5f51ff;
|
||
color: #5f51ff;
|
||
background: rgba(95, 81, 255, 0.02);
|
||
}
|
||
.selectable-tag.selected {
|
||
border-color: #5f51ff;
|
||
background: rgba(95, 81, 255, 0.06);
|
||
color: #5f51ff;
|
||
}
|
||
.selectable-tag.highlighted-tag {
|
||
border-color: #5f51ff;
|
||
background: rgba(95, 81, 255, 0.05);
|
||
color: #5f51ff;
|
||
}
|
||
.segmented-tabs {
|
||
display: flex;
|
||
gap: 28px;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid rgba(226, 231, 245, 0.95);
|
||
}
|
||
.segmented-tabs button {
|
||
padding: 0 0 10px;
|
||
border: 0;
|
||
background: transparent;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: #9aa0bd;
|
||
cursor: pointer;
|
||
position: relative;
|
||
white-space: nowrap;
|
||
transition: color 0.2s ease;
|
||
}
|
||
.segmented-tabs button:hover {
|
||
color: #5a638f;
|
||
}
|
||
.segmented-tabs button.active {
|
||
color: #3a4476;
|
||
}
|
||
.segmented-tabs button.active::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: -9px;
|
||
height: 2px;
|
||
border-radius: 999px;
|
||
background: #6b73ff;
|
||
}
|
||
.chapter-list,
|
||
.speaker-summary-list,
|
||
.keypoint-list,
|
||
.todo-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
padding-top: 12px;
|
||
}
|
||
.chapter-item {
|
||
display: flex;
|
||
gap: 14px;
|
||
align-items: flex-start;
|
||
}
|
||
.chapter-time {
|
||
position: relative;
|
||
padding-top: 10px;
|
||
color: #58627f;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
flex-shrink: 0;
|
||
width: 64px;
|
||
}
|
||
.chapter-time::after {
|
||
content: "";
|
||
display: inline-block;
|
||
width: 8px;
|
||
height: 8px;
|
||
margin-left: 8px;
|
||
border-radius: 50%;
|
||
background: #6e76ff;
|
||
vertical-align: middle;
|
||
}
|
||
.chapter-card,
|
||
.speaker-summary-card,
|
||
.keypoint-card {
|
||
border-radius: 16px;
|
||
padding: 14px 16px;
|
||
background: rgba(244, 246, 255, 0.96);
|
||
border: 1px solid rgba(231, 235, 248, 0.98);
|
||
}
|
||
.chapter-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
.chapter-card strong,
|
||
.keypoint-content strong {
|
||
color: #414b78;
|
||
font-size: 15px;
|
||
}
|
||
.chapter-card span,
|
||
.speaker-summary-body,
|
||
.keypoint-content span {
|
||
color: #67718f;
|
||
line-height: 1.75;
|
||
}
|
||
.speaker-summary-card {
|
||
display: grid;
|
||
grid-template-columns: 96px minmax(0, 1fr);
|
||
gap: 16px;
|
||
align-items: start;
|
||
}
|
||
.speaker-summary-side {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.speaker-avatar {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 16px;
|
||
background: linear-gradient(135deg, #7480ff, #8c63ff);
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 800;
|
||
}
|
||
.speaker-summary-name {
|
||
color: #3d4774;
|
||
font-weight: 700;
|
||
}
|
||
.speaker-summary-meta,
|
||
.keypoint-meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-top: 10px;
|
||
color: #96a0c1;
|
||
font-size: 12px;
|
||
}
|
||
.keypoint-card {
|
||
display: flex;
|
||
gap: 14px;
|
||
align-items: start;
|
||
}
|
||
.keypoint-badge {
|
||
width: 36px;
|
||
height: 36px;
|
||
flex-shrink: 0;
|
||
border-radius: 12px;
|
||
background: rgba(107, 115, 255, 0.12);
|
||
color: #5c64ff;
|
||
font-weight: 800;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.keypoint-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
.todo-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
color: #495271;
|
||
line-height: 1.7;
|
||
padding: 12px 14px;
|
||
border-radius: 14px;
|
||
background: rgba(247, 249, 255, 0.98);
|
||
border: 1px solid rgba(232, 236, 248, 0.98);
|
||
}
|
||
.todo-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
margin-top: 9px;
|
||
border-radius: 50%;
|
||
background: #6e76ff;
|
||
flex: 0 0 auto;
|
||
}
|
||
.section-divider-note {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
color: #c0c6dc;
|
||
font-size: 12px;
|
||
padding: 2px 4px;
|
||
}
|
||
.section-divider-line {
|
||
flex: 1;
|
||
height: 1px;
|
||
background: linear-gradient(90deg, rgba(220, 225, 240, 0), rgba(220, 225, 240, 0.92), rgba(220, 225, 240, 0));
|
||
}
|
||
.section-divider-text {
|
||
white-space: nowrap;
|
||
}
|
||
.ant-list-item.transcript-row {
|
||
display: flex !important;
|
||
justify-content: flex-start !important;
|
||
align-items: flex-start !important;
|
||
gap: 12px;
|
||
padding: 12px 0 !important;
|
||
border-bottom: 0 !important;
|
||
cursor: pointer;
|
||
}
|
||
.ant-list-item.transcript-row.linked .transcript-bubble,
|
||
.ant-list-item.transcript-row.linked .transcript-bubble-editing {
|
||
background: linear-gradient(135deg, rgba(95, 81, 255, 0.08), rgba(108, 140, 255, 0.06));
|
||
border-color: rgba(95, 81, 255, 0.2);
|
||
box-shadow: 0 10px 24px rgba(95, 81, 255, 0.06);
|
||
}
|
||
.ant-list-item.transcript-row.active .transcript-bubble,
|
||
.ant-list-item.transcript-row.active .transcript-bubble-editing {
|
||
border-color: rgba(95, 81, 255, 0.16);
|
||
background: linear-gradient(135deg, #5b41ff, #6a5cff);
|
||
color: #ffffff;
|
||
box-shadow: 0 12px 28px rgba(95, 81, 255, 0.2);
|
||
}
|
||
.transcript-entry {
|
||
flex: 1;
|
||
justify-self: start;
|
||
text-align: left;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
.transcript-content-wrap {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
min-width: 0;
|
||
}
|
||
.transcript-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
color: #8e98b8;
|
||
font-size: 12px;
|
||
}
|
||
.transcript-avatar {
|
||
flex-shrink: 0;
|
||
background: linear-gradient(135deg, #d9ebff, #eaf2ff) !important;
|
||
color: #4362ff !important;
|
||
margin-top: 4px;
|
||
}
|
||
.transcript-speaker {
|
||
color: var(--app-text-main);
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
}
|
||
.transcript-speaker.editable {
|
||
color: var(--app-primary-color);
|
||
cursor: pointer;
|
||
}
|
||
.transcript-bubble {
|
||
display: block;
|
||
align-self: stretch;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 16px 22px;
|
||
border-radius: 20px;
|
||
background: #ffffff;
|
||
border: 1px solid rgba(228, 232, 245, 0.6);
|
||
color: #2d3553;
|
||
line-height: 1.8;
|
||
font-size: 15px;
|
||
white-space: pre-wrap;
|
||
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
|
||
}
|
||
.transcript-bubble:hover {
|
||
border-color: rgba(95, 81, 255, 0.2);
|
||
box-shadow: 0 12px 24px rgba(95, 81, 255, 0.05);
|
||
transform: translateY(-1px);
|
||
}
|
||
.transcript-bubble.editable {
|
||
cursor: text;
|
||
}
|
||
.transcript-bubble.editable:hover {
|
||
border-color: rgba(100, 112, 255, 0.24);
|
||
}
|
||
.transcript-bubble-editing {
|
||
display: block;
|
||
align-self: stretch;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
box-sizing: border-box;
|
||
outline: none;
|
||
}
|
||
.transcript-bubble-input {
|
||
display: block;
|
||
width: 100% !important;
|
||
max-width: 100%;
|
||
}
|
||
.transcript-bubble-input .ant-input-affix-wrapper,
|
||
.transcript-bubble-input .ant-input-textarea,
|
||
.transcript-bubble-editing .ant-input-textarea,
|
||
.transcript-bubble-editing .ant-input-textarea-show-count {
|
||
display: block;
|
||
width: 100% !important;
|
||
max-width: 100%;
|
||
}
|
||
.transcript-bubble-input .ant-input {
|
||
display: block;
|
||
width: 100% !important;
|
||
min-height: 1.86em;
|
||
padding: 0;
|
||
border: 0;
|
||
background: transparent;
|
||
color: #3f496a;
|
||
line-height: 1.86;
|
||
white-space: pre-wrap;
|
||
resize: none;
|
||
box-shadow: none;
|
||
direction: ltr;
|
||
text-align: left;
|
||
}
|
||
.transcript-bubble-input .ant-input:focus,
|
||
.transcript-bubble-input .ant-input:focus-within {
|
||
box-shadow: none;
|
||
}
|
||
.transcript-bubble-actions {
|
||
display: none;
|
||
}
|
||
.transcript-bubble-hint {
|
||
display: none;
|
||
}
|
||
.transcript-player-anchor {
|
||
position: relative;
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
}
|
||
.transcript-player-anchor > .transcript-workspace-card {
|
||
flex: 1;
|
||
}
|
||
.transcript-list {
|
||
min-width: 0;
|
||
padding-top: 4px;
|
||
}
|
||
.transcript-player {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding: 14px 16px;
|
||
border-radius: 20px;
|
||
background: rgba(255, 255, 255, 0.92);
|
||
border: 1px solid rgba(225, 231, 246, 0.95);
|
||
box-shadow: 0 18px 44px rgba(72, 86, 128, 0.16);
|
||
backdrop-filter: blur(24px);
|
||
}
|
||
.transcript-player--floating {
|
||
position: fixed;
|
||
bottom: 84px;
|
||
z-index: 100;
|
||
max-width: calc(100vw - 32px);
|
||
}
|
||
.player-main-btn,
|
||
.player-ghost-btn {
|
||
border: 0;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.player-main-btn {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #5f51ff, #6b7dff);
|
||
color: #fff;
|
||
font-size: 18px;
|
||
box-shadow: 0 10px 24px rgba(95, 81, 255, 0.28);
|
||
}
|
||
.player-ghost-btn {
|
||
gap: 6px;
|
||
padding: 0 12px;
|
||
height: 38px;
|
||
border-radius: 12px;
|
||
background: rgba(95, 81, 255, 0.08);
|
||
color: #5f51ff;
|
||
font-weight: 700;
|
||
}
|
||
.player-progress-shell {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
min-width: 0;
|
||
}
|
||
.player-time-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: #8b94b5;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
.player-range {
|
||
width: 100%;
|
||
appearance: none;
|
||
height: 6px;
|
||
border-radius: 999px;
|
||
background: linear-gradient(90deg, rgba(108, 117, 255, 0.92), rgba(108, 117, 255, 0.92)) 0/0% 100% no-repeat,
|
||
linear-gradient(90deg, rgba(219, 224, 247, 0.9), rgba(231, 235, 250, 0.95));
|
||
outline: none;
|
||
}
|
||
.player-range::-webkit-slider-thumb {
|
||
appearance: none;
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
border: 3px solid #6e75ff;
|
||
box-shadow: 0 4px 12px rgba(110, 117, 255, 0.24);
|
||
cursor: pointer;
|
||
}
|
||
.player-range::-moz-range-thumb {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
border: 3px solid #6e75ff;
|
||
box-shadow: 0 4px 12px rgba(110, 117, 255, 0.24);
|
||
cursor: pointer;
|
||
}
|
||
.summary-markdown {
|
||
font-size: 14px;
|
||
line-height: 1.9;
|
||
color: #3e4768;
|
||
min-width: 0;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
overflow-x: hidden;
|
||
padding-bottom: 12px;
|
||
box-sizing: border-box;
|
||
}
|
||
.markdown-body {
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
color: #333;
|
||
min-width: 0;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
max-width: 100%;
|
||
overflow-wrap: anywhere;
|
||
word-break: break-word;
|
||
}
|
||
.markdown-body p {
|
||
margin-bottom: 16px;
|
||
}
|
||
.markdown-body h1,
|
||
.markdown-body h2,
|
||
.markdown-body h3 {
|
||
margin-top: 24px;
|
||
margin-bottom: 16px;
|
||
font-weight: 600;
|
||
overflow-wrap: anywhere;
|
||
word-break: break-word;
|
||
}
|
||
.markdown-body ul,
|
||
.markdown-body ol,
|
||
.markdown-body li,
|
||
.markdown-body blockquote,
|
||
.markdown-body table,
|
||
.markdown-body tr,
|
||
.markdown-body td,
|
||
.markdown-body th,
|
||
.markdown-body a,
|
||
.markdown-body code,
|
||
.markdown-body pre {
|
||
max-width: 100%;
|
||
overflow-wrap: anywhere;
|
||
word-break: break-word;
|
||
}
|
||
.markdown-body pre {
|
||
overflow-x: auto;
|
||
padding: 12px 14px;
|
||
border-radius: 12px;
|
||
background: rgba(245, 247, 255, 0.96);
|
||
}
|
||
.markdown-body table {
|
||
display: block;
|
||
overflow-x: auto;
|
||
}
|
||
.markdown-body img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
@media (max-width: 1200px) {
|
||
.detail-left-column {
|
||
padding-right: 0;
|
||
}
|
||
.speaker-summary-card {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
@media (max-width: 992px) {
|
||
.empty-transcript-hero__content {
|
||
flex-direction: column;
|
||
}
|
||
.empty-transcript-hero__actions {
|
||
width: 100%;
|
||
flex-wrap: wrap;
|
||
}
|
||
.meeting-share-card {
|
||
width: min(86vw, 292px);
|
||
}
|
||
.detail-side-column {
|
||
height: auto;
|
||
}
|
||
.detail-left-column {
|
||
overflow: visible;
|
||
}
|
||
.transcript-player--floating {
|
||
bottom: 72px;
|
||
max-width: calc(100vw - 24px);
|
||
}
|
||
.section-divider-text {
|
||
white-space: normal;
|
||
text-align: center;
|
||
}
|
||
}
|
||
`}</style>
|
||
|
||
{isOwner && (
|
||
<Modal title="编辑会议信息" open={editVisible} onOk={handleUpdateBasic} onCancel={() => setEditVisible(false)} confirmLoading={actionLoading} width={600} forceRender>
|
||
<Form form={form} layout="vertical" style={{ marginTop: 16 }}>
|
||
<Form.Item name="title" label="会议标题" rules={[{ required: true }]}>
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item name="tags" label="业务标签">
|
||
<Select mode="tags" placeholder="输入标签后回车" />
|
||
</Form.Item>
|
||
<Form.Item name="participantIds" label="参会人员">
|
||
<Select mode="multiple" placeholder="请选择参会人" showSearch optionFilterProp="children">
|
||
{userList.map((u) => (
|
||
<Option key={u.userId} value={u.userId}>
|
||
<Space>
|
||
<Avatar size="small" icon={<UserOutlined />} />
|
||
{u.displayName || u.username}
|
||
</Space>
|
||
</Option>
|
||
))}
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
</Form>
|
||
</Modal>
|
||
)}
|
||
|
||
{isOwner && (
|
||
<Drawer
|
||
title="重新生成 AI 总结"
|
||
width={400}
|
||
onClose={() => setSummaryVisible(false)}
|
||
open={summaryVisible}
|
||
extra={<Button type="primary" onClick={handleReSummary} loading={actionLoading}>开始总结</Button>}
|
||
forceRender
|
||
>
|
||
<Form form={summaryForm} layout="vertical">
|
||
<Form.Item name="summaryModelId" label="总结模型 (LLM)" rules={[{ required: true }]}>
|
||
<Select placeholder="选择 LLM 模型">
|
||
{llmModels.map((model) => (
|
||
<Option key={model.id} value={model.id}>
|
||
{model.modelName} {model.isDefault === 1 && <Tag color="gold" style={{ marginLeft: 4 }}>默认</Tag>}
|
||
</Option>
|
||
))}
|
||
</Select>
|
||
</Form.Item>
|
||
<Form.Item name="promptId" label="提示词模板" rules={[{ required: true }]}>
|
||
<Select placeholder="选择模板">
|
||
{prompts.map((prompt) => (
|
||
<Option key={prompt.id} value={prompt.id}>{prompt.templateName}</Option>
|
||
))}
|
||
</Select>
|
||
</Form.Item>
|
||
<Form.Item name="summaryDetailLevel" label="总结详细程度" rules={[{ required: true }]}>
|
||
<Radio.Group>
|
||
<Radio value="DETAILED">详细</Radio>
|
||
<Radio value="STANDARD">标准</Radio>
|
||
<Radio value="BRIEF">简洁</Radio>
|
||
</Radio.Group>
|
||
</Form.Item>
|
||
<Form.Item
|
||
name="userPrompt"
|
||
label="用户提示词"
|
||
extra="可选，用于补充本次重新总结的关注重点、表达偏好或输出侧重点"
|
||
>
|
||
<Input.TextArea
|
||
placeholder="例如：请重点突出结论、待办事项和风险点"
|
||
autoSize={{ minRows: 4, maxRows: 8 }}
|
||
showCount
|
||
maxLength={1000}
|
||
/>
|
||
</Form.Item>
|
||
<Divider />
|
||
<Text type="secondary">重新总结会基于当前语音转录全文重新生成纪要，原有总结内容将被覆盖。</Text>
|
||
</Form>
|
||
</Drawer>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default MeetingDetail;
|