823 lines
39 KiB
TypeScript
823 lines
39 KiB
TypeScript
import React, { useEffect, useState, useRef } from 'react';
|
||
import { flushSync } from 'react-dom';
|
||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||
import Sidebar from '../components/Sidebar';
|
||
import {
|
||
Check, Printer, Undo, Redo, Bold, Italic, Underline,
|
||
AlignLeft, AlignCenter, AlignRight, Table, Image as ImageIcon,
|
||
Video, Play, Pause, Plus, X, ChevronLeft, Download, Bot, Sparkles, Send, Loader2,
|
||
Mic, MicOff, ImagePlus
|
||
} from 'lucide-react';
|
||
import { User, Report, Template, CapturedFrame, SystemSettings, FormField, DEFAULT_FORM_FIELDS } from '../types';
|
||
import { defaultReportContent } from '../utils/defaultContent';
|
||
import { printDocument } from '../utils/print';
|
||
import { storage } from '../utils/storage';
|
||
|
||
export default function ReportEditor() {
|
||
const navigate = useNavigate();
|
||
const [searchParams] = useSearchParams();
|
||
const reportId = searchParams.get('id');
|
||
const restoreFlag = searchParams.get('restore');
|
||
|
||
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
||
const [reportData, setReportData] = useState<Partial<Report>>({
|
||
title: '腹腔镜胆囊切除术报告',
|
||
patientName: '',
|
||
hospitalId: '',
|
||
patientGender: '',
|
||
patientAge: '',
|
||
department: '',
|
||
bedNumber: '',
|
||
surgeryDate: '',
|
||
startHour: '',
|
||
startMinute: '',
|
||
endHour: '',
|
||
endMinute: '',
|
||
surgeon: [],
|
||
assistant: [],
|
||
anesthesiologist: [],
|
||
anesthesiaType: '',
|
||
reportNote: '',
|
||
status: 'draft'
|
||
});
|
||
|
||
const [templates, setTemplates] = useState<Template[]>([]);
|
||
const [videos, setVideos] = useState<{id: string, name: string, url: string, duration: number}[]>([]);
|
||
const [currentVideoIndex, setCurrentVideoIndex] = useState(-1);
|
||
const [capturedFrames, setCapturedFrames] = useState<CapturedFrame[]>([]);
|
||
const [isPlaying, setIsPlaying] = useState(false);
|
||
const [currentTime, setCurrentTime] = useState(0);
|
||
const [duration, setDuration] = useState(0);
|
||
const [isSaved, setIsSaved] = useState(false);
|
||
const [exportModalOpen, setExportModalOpen] = useState(false);
|
||
const [loadedTemplateId, setLoadedTemplateId] = useState('');
|
||
const [pendingTemplateId, setPendingTemplateId] = useState<string | null>(null);
|
||
const prevVideoCountRef = useRef(0);
|
||
|
||
const [activeTab, setActiveTab] = useState<'info' | 'video' | 'ai'>('info');
|
||
const [activeFieldKey, setActiveFieldKey] = useState<string | null>(null);
|
||
|
||
// AI 撰写相关状态
|
||
const [chatInput, setChatInput] = useState<string>('');
|
||
const [chatMessages, setChatMessages] = useState<{id: string, role: 'user'|'model', content: string}[]>([]);
|
||
const [isGenerating, setIsGenerating] = useState(false);
|
||
const [aiSelectedFrames, setAiSelectedFrames] = useState<number[]>([]);
|
||
const [aiTargetRegion, setAiTargetRegion] = useState<string>('surgical-steps');
|
||
const [aiModifyEnabled, setAiModifyEnabled] = useState(true);
|
||
const [isListening, setIsListening] = useState(false);
|
||
const [aiUploadedImages, setAiUploadedImages] = useState<{id: number, dataUrl: string}[]>([]);
|
||
const speechRecognitionRef = useRef<any>(null);
|
||
|
||
useEffect(() => {
|
||
if (!editorRef.current) return;
|
||
const allFields = editorRef.current.querySelectorAll('.field-value');
|
||
allFields.forEach(el => {
|
||
(el as HTMLElement).style.backgroundColor = '';
|
||
(el as HTMLElement).style.outline = '';
|
||
(el as HTMLElement).style.outlineOffset = '';
|
||
});
|
||
if (activeFieldKey) {
|
||
const targetEl = editorRef.current.querySelector(`.field-value[data-bind="\${activeFieldKey}"]`) as HTMLElement;
|
||
if (targetEl) {
|
||
targetEl.style.backgroundColor = '#f1f5f9';
|
||
targetEl.style.outline = '1px solid #94a3b8';
|
||
targetEl.style.outlineOffset = '1px';
|
||
targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
}
|
||
}
|
||
}, [activeFieldKey]);
|
||
|
||
const [formFields, setFormFields] = useState<FormField[]>([]);
|
||
const [openDropdown, setOpenDropdown] = useState<string | null>(null);
|
||
const [touched, setTouched] = useState<Record<string, boolean>>({});
|
||
|
||
const editorRef = useRef<HTMLDivElement>(null);
|
||
const videoRef = useRef<HTMLVideoElement>(null);
|
||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||
const videoInputRef = useRef<HTMLInputElement>(null);
|
||
const contentLoadedRef = useRef(false);
|
||
const contentRef = useRef('');
|
||
const stateRef = useRef({ reportData, videos, capturedFrames, activeTab, loadedTemplateId });
|
||
|
||
const draftKey = currentUser ? `reportEditorDraft_\${currentUser.username}` : '';
|
||
|
||
const updatePageHeight = () => {
|
||
if (!editorRef.current) return;
|
||
const contentHeight = editorRef.current.scrollHeight;
|
||
const pageHeightMm = 297;
|
||
const mmToPx = 3.7795275591;
|
||
const pages = Math.max(2, Math.ceil(contentHeight / (pageHeightMm * mmToPx)));
|
||
editorRef.current.style.minHeight = `\${pages * pageHeightMm}mm`;
|
||
};
|
||
|
||
const saveDraftToStorage = React.useCallback(() => {
|
||
const user = storage.get<User | null>('currentUser', null);
|
||
const key = user ? `reportEditorDraft_\${user.username}` : '';
|
||
if (key) {
|
||
const currentContent = contentRef.current || editorRef.current?.innerHTML || '';
|
||
storage.set(key, {
|
||
content: currentContent,
|
||
draftReportId: reportId || null,
|
||
reportData: stateRef.current.reportData,
|
||
videos: stateRef.current.videos,
|
||
capturedFrames: stateRef.current.capturedFrames,
|
||
activeTab: stateRef.current.activeTab,
|
||
loadedTemplateId: stateRef.current.loadedTemplateId
|
||
});
|
||
}
|
||
}, [reportId]);
|
||
|
||
useEffect(() => {
|
||
const user = storage.get<User | null>('currentUser', null);
|
||
if (!user) { navigate('/'); return; }
|
||
setCurrentUser(user);
|
||
|
||
const savedFields = storage.get<FormField[]>('formFieldsConfig', []);
|
||
if (savedFields.length > 0) {
|
||
setFormFields(savedFields);
|
||
} else {
|
||
setFormFields(DEFAULT_FORM_FIELDS);
|
||
storage.set('formFieldsConfig', DEFAULT_FORM_FIELDS);
|
||
}
|
||
|
||
const allTemplates = storage.get<Template[]>('templates', []);
|
||
setTemplates(allTemplates);
|
||
|
||
if (reportId) {
|
||
const reports = storage.get<Report[]>('reports', []);
|
||
const found = reports.find(r => r.id === reportId);
|
||
if (found) {
|
||
setReportData(found);
|
||
if (found.capturedFrames) setCapturedFrames(found.capturedFrames);
|
||
if (found.videos) setVideos(found.videos);
|
||
if (editorRef.current) {
|
||
editorRef.current.innerHTML = found.content;
|
||
contentRef.current = found.content;
|
||
contentLoadedRef.current = true;
|
||
setTimeout(() => updatePageHeight(), 0);
|
||
}
|
||
}
|
||
} else if (!contentLoadedRef.current && editorRef.current) {
|
||
editorRef.current.innerHTML = defaultReportContent;
|
||
contentRef.current = defaultReportContent;
|
||
contentLoadedRef.current = true;
|
||
setTimeout(() => updatePageHeight(), 0);
|
||
}
|
||
}, [reportId, navigate]);
|
||
|
||
const execCmd = (command: string, value: string | undefined = undefined) => {
|
||
editorRef.current?.focus();
|
||
document.execCommand(command, false, value);
|
||
editorRef.current?.focus();
|
||
if (editorRef.current) contentRef.current = editorRef.current.innerHTML;
|
||
saveDraftToStorage();
|
||
};
|
||
|
||
const handleVideoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const files = Array.from(e.target.files || []) as File[];
|
||
const newVideos = files.map(file => ({
|
||
id: Math.random().toString(36).substr(2, 9),
|
||
name: file.name,
|
||
url: URL.createObjectURL(file),
|
||
duration: 0
|
||
}));
|
||
setVideos([...videos, ...newVideos]);
|
||
if (currentVideoIndex === -1 && newVideos.length > 0) setCurrentVideoIndex(0);
|
||
};
|
||
|
||
const togglePlay = () => {
|
||
if (!videoRef.current) return;
|
||
if (isPlaying) videoRef.current.pause();
|
||
else videoRef.current.play();
|
||
setIsPlaying(!isPlaying);
|
||
};
|
||
|
||
const formatTime = (seconds: number) => {
|
||
const mins = Math.floor(seconds / 60);
|
||
const secs = Math.floor(seconds % 60);
|
||
return `\${mins.toString().padStart(2, '0')}:\${secs.toString().padStart(2, '0')}`;
|
||
};
|
||
|
||
const captureFrame = () => {
|
||
if (!videoRef.current || !canvasRef.current || currentVideoIndex === -1) return;
|
||
const video = videoRef.current;
|
||
const canvas = canvasRef.current;
|
||
|
||
// Create an unconstrained canvas to get native resolution or properly scaled frame
|
||
const scale = Math.min(1, 800 / video.videoWidth);
|
||
canvas.width = video.videoWidth * scale;
|
||
canvas.height = video.videoHeight * scale;
|
||
const ctx = canvas.getContext('2d');
|
||
ctx?.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||
|
||
const newFrame: CapturedFrame = {
|
||
id: Date.now(),
|
||
videoIndex: currentVideoIndex,
|
||
videoName: videos[currentVideoIndex].name,
|
||
time: video.currentTime,
|
||
timeFormatted: formatTime(video.currentTime),
|
||
dataUrl: canvas.toDataURL('image/jpeg', 0.8),
|
||
isManual: true
|
||
};
|
||
|
||
setCapturedFrames([...capturedFrames, newFrame]);
|
||
};
|
||
|
||
const saveReport = (status: 'draft' | 'completed') => {
|
||
const content = editorRef.current?.innerHTML || '';
|
||
const now = new Date().toISOString();
|
||
const finalReport: Report = {
|
||
...(reportData as Report),
|
||
id: reportId || 'RPT_' + Date.now(),
|
||
content,
|
||
author: currentUser?.username || '',
|
||
authorName: currentUser?.name || '',
|
||
createdAt: reportData.createdAt || now.split('T')[0],
|
||
status,
|
||
capturedFrames,
|
||
videos,
|
||
updatedAt: now
|
||
};
|
||
|
||
const reports = storage.get<Report[]>('reports', []);
|
||
let updatedReports;
|
||
if (reportId) {
|
||
updatedReports = reports.map(r => r.id === reportId ? finalReport : r);
|
||
} else {
|
||
updatedReports = [...reports, finalReport];
|
||
}
|
||
|
||
storage.set('reports', updatedReports);
|
||
setIsSaved(true);
|
||
setTimeout(() => setIsSaved(false), 3000);
|
||
if (status === 'completed') navigate('/report-manage');
|
||
};
|
||
|
||
const handleAiLocalImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const files = e.target.files;
|
||
if (!files) return;
|
||
Array.from(files).forEach((file: File) => {
|
||
const reader = new FileReader();
|
||
reader.onload = (ev) => {
|
||
if (ev.target?.result) {
|
||
setAiUploadedImages(prev => [...prev, { id: Date.now() + Math.random(), dataUrl: ev.target!.result as string }]);
|
||
}
|
||
};
|
||
reader.readAsDataURL(file);
|
||
});
|
||
// reset input
|
||
e.target.value = '';
|
||
};
|
||
|
||
const toggleListening = () => {
|
||
if (isListening) {
|
||
setIsListening(false);
|
||
if (speechRecognitionRef.current) {
|
||
speechRecognitionRef.current.stop();
|
||
}
|
||
} else {
|
||
const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
|
||
if (!SpeechRecognition) {
|
||
alert("您的浏览器不支持语音识别功能，请使用 Chrome 等支持该特性的浏览器。");
|
||
return;
|
||
}
|
||
const recognition = new SpeechRecognition();
|
||
recognition.lang = 'zh-CN';
|
||
recognition.continuous = false;
|
||
recognition.interimResults = false;
|
||
|
||
recognition.onstart = () => setIsListening(true);
|
||
recognition.onresult = (event: any) => {
|
||
const transcript = event.results[0][0].transcript;
|
||
setChatInput(prev => prev + (prev ? ' ' : '') + transcript);
|
||
};
|
||
recognition.onerror = (event: any) => {
|
||
console.error("Speech recognition error", event.error);
|
||
setIsListening(false);
|
||
};
|
||
recognition.onend = () => {
|
||
setIsListening(false);
|
||
};
|
||
|
||
speechRecognitionRef.current = recognition;
|
||
recognition.start();
|
||
}
|
||
};
|
||
|
||
const handleAIGenerate = async (text: string) => {
|
||
if (!text.trim()) return;
|
||
|
||
const userMsgId = Date.now().toString();
|
||
const newUserMsg = { id: userMsgId, role: 'user' as const, content: text };
|
||
setChatMessages(prev => [...prev, newUserMsg]);
|
||
setChatInput('');
|
||
setIsGenerating(true);
|
||
|
||
try {
|
||
const { GoogleGenAI, Type } = await import('@google/genai');
|
||
const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });
|
||
const sysSettings = storage.get<SystemSettings>('systemSettings', {} as SystemSettings);
|
||
const modelName = sysSettings.geminiModel || 'gemini-3-flash-preview';
|
||
|
||
const historyContents = chatMessages.map(msg => ({
|
||
role: msg.role === 'user' ? 'user' : 'model',
|
||
parts: [{ text: msg.content }]
|
||
}));
|
||
|
||
const currentParts: any[] = [];
|
||
const selectedFrameDataUrls = aiSelectedFrames
|
||
.map(id => capturedFrames.find(f => f.id === id)?.dataUrl)
|
||
.filter(Boolean) as string[];
|
||
|
||
const allImages = [...selectedFrameDataUrls, ...aiUploadedImages.map(i => i.dataUrl)];
|
||
|
||
allImages.forEach(url => {
|
||
const match = url.match(/^data:(image\/[a-z]+);base64,(.+)$/);
|
||
if (match) {
|
||
currentParts.push({ inlineData: { mimeType: match[1], data: match[2] } });
|
||
}
|
||
});
|
||
// 清空本地上传的图片以备下次
|
||
setAiUploadedImages([]);
|
||
|
||
const targetRegion = editorRef.current?.querySelector(`.ai-region[data-ai-id="${aiTargetRegion}"]`);
|
||
const currentHtml = targetRegion ? targetRegion.innerHTML : '';
|
||
|
||
if (aiModifyEnabled) {
|
||
currentParts.push({
|
||
text: `【当前待修改内容的 HTML 源码】:\n${currentHtml}\n\n【医生的期望/修改要求】: ${text}`
|
||
});
|
||
} else {
|
||
currentParts.push({
|
||
text: `【医生的指令/要求】: ${text}`
|
||
});
|
||
}
|
||
|
||
historyContents.push({ role: 'user', parts: currentParts });
|
||
|
||
const systemInstruction = aiModifyEnabled
|
||
? "你是一名专业的外科医生助理。根据用户提供的（图像）和（修改要求），修改（当前待修改内容的 HTML 源码）。\n" +
|
||
"你需要返回 JSON 数据，其中包含两部分：\n" +
|
||
"1. 'reply': 向医生报告您做了哪些修改（友好的文本对话回复，如‘好的，我已为您更新了相关描述。’）。\n" +
|
||
"2. 'updatedHtml': 修改后的完整 HTML 代码片段（保留原有的 HTML 格式，如 `<p>` 标签和行内样式）。\n" +
|
||
"你的输出必须严格符合 JSON 结构，不要包含 markdown 代码块的包裹。"
|
||
: "你是一名专业的外科医生助理。根据用户提供的（图像）和（指令），回答问题、提取信息或生成段落总结。\n" +
|
||
"你只需要返回 JSON 数据中的 'reply' 字段即可（友好的文本对话回复）。不要返回 updatedHtml。\n" +
|
||
"你的输出必须严格符合 JSON 结构，不要包含 markdown 代码块的包裹。";
|
||
|
||
const responseSchema = aiModifyEnabled
|
||
? {
|
||
type: Type.OBJECT,
|
||
properties: {
|
||
reply: { type: Type.STRING },
|
||
updatedHtml: { type: Type.STRING }
|
||
},
|
||
required: ["reply", "updatedHtml"]
|
||
}
|
||
: {
|
||
type: Type.OBJECT,
|
||
properties: {
|
||
reply: { type: Type.STRING }
|
||
},
|
||
required: ["reply"]
|
||
};
|
||
|
||
const response = await ai.models.generateContent({
|
||
model: modelName,
|
||
contents: historyContents as any,
|
||
config: {
|
||
systemInstruction,
|
||
responseMimeType: "application/json",
|
||
responseSchema,
|
||
}
|
||
});
|
||
|
||
const responseJson = JSON.parse(response.text || '{}');
|
||
if (responseJson.reply) {
|
||
setChatMessages(prev => [...prev, { id: Date.now().toString(), role: 'model', content: responseJson.reply }]);
|
||
}
|
||
if (responseJson.updatedHtml) {
|
||
injectAIText(responseJson.updatedHtml);
|
||
}
|
||
|
||
} catch (error: any) {
|
||
console.error(error);
|
||
setChatMessages(prev => [...prev, { id: Date.now().toString(), role: 'model', content: `[系统错误]: ${error.message}` }]);
|
||
} finally {
|
||
setIsGenerating(false);
|
||
}
|
||
};
|
||
|
||
const injectAIText = (htmlContent: string) => {
|
||
if (!editorRef.current) return;
|
||
const targetRegion = editorRef.current.querySelector(`.ai-region[data-ai-id="${aiTargetRegion}"]`);
|
||
if (targetRegion) {
|
||
const regionTitle = availableAiRegions.find(r => r.id === aiTargetRegion)?.title || '';
|
||
const badgeLabel = regionTitle ? `${regionTitle}-AI可编辑区域` : 'AI可编辑区域';
|
||
targetRegion.innerHTML = `
|
||
<div contenteditable="false" style="position: absolute; top: -10px; right: 12px; background: #3b82f6; color: white; font-size: 10px; padding: 2px 8px; border-radius: 12px; cursor: default; white-space: nowrap; z-index: 10; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">${badgeLabel}</div>
|
||
${htmlContent}
|
||
`;
|
||
contentRef.current = editorRef.current.innerHTML;
|
||
saveDraftToStorage();
|
||
const targetElement = targetRegion as HTMLElement;
|
||
targetElement.style.transition = 'background-color 0.5s';
|
||
targetElement.style.backgroundColor = '#dbeafe';
|
||
setTimeout(() => {
|
||
targetElement.style.backgroundColor = '#eff6ff';
|
||
}, 500);
|
||
} else {
|
||
execCmd('insertHTML', htmlContent);
|
||
}
|
||
};
|
||
|
||
const checkAiRegions = () => {
|
||
if (!editorRef.current) return [];
|
||
const regions = Array.from(editorRef.current.querySelectorAll('.ai-region'));
|
||
return regions.map((el: any) => {
|
||
const id = el.getAttribute('data-ai-id') || '';
|
||
const title = el.getAttribute('data-ai-title') || id;
|
||
return { id, title };
|
||
});
|
||
};
|
||
|
||
const availableAiRegions = checkAiRegions();
|
||
|
||
return (
|
||
<div className="flex bg-slate-50 h-screen overflow-hidden">
|
||
<Sidebar />
|
||
|
||
<div className="flex-1 flex flex-col h-full overflow-hidden">
|
||
{/* Header */}
|
||
<header className="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 shrink-0 z-10">
|
||
<div className="flex items-center gap-4">
|
||
<button
|
||
onClick={() => navigate('/report-manage')}
|
||
className="p-2 rounded-lg hover:bg-slate-100 text-slate-500 transition-colors"
|
||
>
|
||
<ChevronLeft size={20} />
|
||
</button>
|
||
<h1 className="text-lg font-bold text-slate-800">
|
||
{reportId ? `编辑报告: \${reportId}` : '新建手术报告'}
|
||
</h1>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
{isSaved && (
|
||
<span className="text-xs text-green-600 font-bold flex items-center gap-1">
|
||
<Check size={14} /> 已保存
|
||
</span>
|
||
)}
|
||
<button
|
||
onClick={() => saveReport('draft')}
|
||
className="px-4 py-2 bg-slate-100 text-slate-600 rounded text-sm font-medium hover:bg-slate-200"
|
||
>
|
||
保存草稿
|
||
</button>
|
||
<button
|
||
onClick={() => saveReport('completed')}
|
||
className="px-4 py-2 bg-blue-600 text-white flex items-center gap-2 rounded text-sm font-medium hover:bg-blue-700"
|
||
>
|
||
<Check size={16} />
|
||
完成报告
|
||
</button>
|
||
<button
|
||
onClick={() => editorRef.current && printDocument(editorRef.current.innerHTML)}
|
||
className="p-2 rounded bg-slate-100 text-slate-600 hover:bg-slate-200"
|
||
>
|
||
<Printer size={18} />
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div className="flex-1 flex overflow-hidden">
|
||
{/* Main Editor Section */}
|
||
<div className="flex-1 flex flex-col bg-slate-200 border-r border-slate-200 overflow-hidden relative">
|
||
<div className="flex items-center gap-1 p-2 bg-white border-b border-slate-200 shrink-0">
|
||
{/* 简化版工具栏 */}
|
||
<button onClick={() => execCmd('undo')} className="p-1.5 hover:bg-slate-100 rounded text-slate-600"><Undo size={16}/></button>
|
||
<button onClick={() => execCmd('redo')} className="p-1.5 hover:bg-slate-100 rounded text-slate-600"><Redo size={16}/></button>
|
||
<div className="w-px h-6 bg-slate-300 mx-1"></div>
|
||
<button onClick={() => execCmd('bold')} className="p-1.5 hover:bg-slate-100 rounded text-slate-600"><Bold size={16}/></button>
|
||
<button onClick={() => execCmd('italic')} className="p-1.5 hover:bg-slate-100 rounded text-slate-600"><Italic size={16}/></button>
|
||
<button onClick={() => execCmd('underline')} className="p-1.5 hover:bg-slate-100 rounded text-slate-600"><Underline size={16}/></button>
|
||
<div className="w-px h-6 bg-slate-300 mx-1"></div>
|
||
<button onClick={(e) => { e.preventDefault(); execCmd('justifyLeft'); }} className="p-1.5 hover:bg-slate-100 rounded text-slate-600"><AlignLeft size={16}/></button>
|
||
<button onClick={(e) => { e.preventDefault(); execCmd('justifyCenter'); }} className="p-1.5 hover:bg-slate-100 rounded text-slate-600"><AlignCenter size={16}/></button>
|
||
<button onClick={(e) => { e.preventDefault(); execCmd('justifyRight'); }} className="p-1.5 hover:bg-slate-100 rounded text-slate-600"><AlignRight size={16}/></button>
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-y-auto w-full flex justify-center py-8">
|
||
<div
|
||
ref={editorRef}
|
||
contentEditable
|
||
className="bg-white shadow-md p-10 w-[800px] min-h-[1100px] outline-none"
|
||
style={{ fontFamily: 'SimSun', lineHeight: '1.5', transition: 'width 0.2s', paddingBottom: '100px' }}
|
||
onInput={(e) => { contentRef.current = editorRef.current?.innerHTML || ''; }}
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right Sidebar */}
|
||
<aside className="w-[360px] bg-white flex flex-col shrink-0">
|
||
<div className="flex border-b border-slate-200 shrink-0">
|
||
<button
|
||
onClick={() => setActiveTab('info')}
|
||
className={`flex-1 py-3 text-sm font-medium border-b-2 \${activeTab === 'info' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-800'}`}
|
||
>信息录入</button>
|
||
<button
|
||
onClick={() => setActiveTab('video')}
|
||
className={`flex-1 py-3 text-sm font-medium border-b-2 \${activeTab === 'video' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-800'}`}
|
||
>视频分析</button>
|
||
<button
|
||
onClick={() => setActiveTab('ai')}
|
||
className={`flex-1 py-3 text-sm font-medium border-b-2 flex items-center justify-center gap-1 \${activeTab === 'ai' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-800'}`}
|
||
>
|
||
<Bot size={16} /> AI撰写
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-y-auto p-4 custom-scrollbar">
|
||
{activeTab === 'info' && (
|
||
<div className="space-y-4">
|
||
<div className="bg-blue-50 p-3 rounded-lg border border-blue-100 text-sm text-blue-800">
|
||
您可以在这里编辑右侧表单。这些值会自动同步到中间的报告占位符中。
|
||
</div>
|
||
{/* Basic bindings for the most common fields */}
|
||
<div className="space-y-1">
|
||
<label className="text-xs font-semibold text-slate-600">患者姓名</label>
|
||
<input type="text" className="w-full px-3 py-2 border rounded" value={(reportData as any).patientName || ''} onChange={(e) => {
|
||
const val = e.target.value; setReportData({...reportData, patientName: val});
|
||
// Sync to span
|
||
const s = editorRef.current?.querySelector('[data-bind="patientName"]') as HTMLElement;
|
||
if(s) s.innerText = val;
|
||
}} />
|
||
</div>
|
||
<div className="space-y-1">
|
||
<label className="text-xs font-semibold text-slate-600">住院号</label>
|
||
<input type="text" className="w-full px-3 py-2 border rounded" value={(reportData as any).hospitalId || ''} onChange={(e) => {
|
||
const val = e.target.value; setReportData({...reportData, hospitalId: val});
|
||
const s = editorRef.current?.querySelector('[data-bind="hospitalId"]') as HTMLElement;
|
||
if(s) s.innerText = val;
|
||
}} />
|
||
</div>
|
||
<div className="space-y-1">
|
||
<label className="text-xs font-semibold text-slate-600">手术名称</label>
|
||
<input type="text" className="w-full px-3 py-2 border rounded" value={(reportData as any).title || ''} onChange={(e) => {
|
||
const val = e.target.value; setReportData({...reportData, title: val});
|
||
const s = editorRef.current?.querySelector('[data-bind="title"]') as HTMLElement;
|
||
if(s) s.innerText = val;
|
||
}} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'video' && (
|
||
<div className="space-y-4">
|
||
<input
|
||
ref={videoInputRef}
|
||
type="file"
|
||
accept="video/*"
|
||
multiple
|
||
className="hidden"
|
||
onChange={handleVideoUpload}
|
||
/>
|
||
<button
|
||
onClick={() => videoInputRef.current?.click()}
|
||
className="w-full py-3 flex items-center justify-center gap-2 border-2 border-dashed border-slate-300 rounded-lg hover:border-blue-500 hover:text-blue-600 text-slate-500 transition-colors"
|
||
>
|
||
<Video size={18} />
|
||
<span className="text-sm font-medium">上传手术视频</span>
|
||
</button>
|
||
|
||
{videos.length > 0 && currentVideoIndex !== -1 && (
|
||
<div className="space-y-3">
|
||
<div className="relative bg-slate-900 rounded-lg overflow-hidden aspect-video">
|
||
<video
|
||
ref={videoRef}
|
||
src={videos[currentVideoIndex].url}
|
||
className="w-full h-full"
|
||
onTimeUpdate={() => setCurrentTime(videoRef.current?.currentTime || 0)}
|
||
onLoadedMetadata={() => setDuration(videoRef.current?.duration || 0)}
|
||
/>
|
||
{!isPlaying && (
|
||
<div className="absolute inset-0 flex items-center justify-center bg-black/40 cursor-pointer" onClick={togglePlay}>
|
||
<div className="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center text-white">
|
||
<Play size={24} fill="currentColor" />
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div className="absolute bottom-2 right-2 bg-black/60 text-white text-[10px] px-2 py-1 rounded">
|
||
{formatTime(currentTime)} / {formatTime(duration)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-2">
|
||
<button onClick={togglePlay} className="px-3 py-2 bg-slate-100 rounded text-slate-700 hover:bg-slate-200">
|
||
{isPlaying ? <Pause size={16} /> : <Play size={16} />}
|
||
</button>
|
||
<button onClick={captureFrame} className="flex-1 bg-blue-600 text-white py-2 rounded text-sm font-medium hover:bg-blue-700">
|
||
截取当前画面并保存
|
||
</button>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-2 mt-4">
|
||
{capturedFrames.map((frame) => (
|
||
<div key={frame.id} className="relative group border border-slate-200 rounded p-1 bg-white">
|
||
<img src={frame.dataUrl} className="w-full aspect-video object-cover rounded" />
|
||
<div className="text-[10px] text-slate-500 mt-1 flex justify-between">
|
||
<span>{frame.timeFormatted}</span>
|
||
<span className="text-blue-600 cursor-pointer hover:underline" onClick={() => {
|
||
// Simple insert helper
|
||
execCmd('insertHTML', `<img src="\${frame.dataUrl}" style="max-width:200px" />`);
|
||
}}>插入插入文档</span>
|
||
</div>
|
||
<button
|
||
onClick={() => setCapturedFrames(prev => prev.filter(f => f.id !== frame.id))}
|
||
className="absolute top-0 right-0 bg-red-500 text-white p-1 rounded-bl group-hover:opacity-100 opacity-0 transition-opacity"
|
||
>
|
||
<X size={12} />
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'ai' && (
|
||
<div className="flex flex-col h-full bg-slate-50 overflow-hidden">
|
||
{/* Chat History */}
|
||
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
||
{chatMessages.length === 0 ? (
|
||
<div className="text-center flex flex-col items-center justify-center h-full text-slate-400 space-y-3">
|
||
<Bot size={48} className="text-slate-300" />
|
||
<p className="text-xs">我是您的 AI 智能撰写助手，请在下方选择参考框架和图片后随时与我对话。</p>
|
||
</div>
|
||
) : (
|
||
chatMessages.map(msg => (
|
||
<div key={msg.id} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
|
||
<div className={`rounded-2xl px-4 py-2.5 max-w-[85%] text-sm ${msg.role === 'user' ? 'bg-blue-600 text-white rounded-tr-none' : 'bg-white border border-slate-200 text-slate-700 rounded-tl-none shadow-sm'}`}>
|
||
{msg.content}
|
||
</div>
|
||
</div>
|
||
))
|
||
)}
|
||
{isGenerating && (
|
||
<div className="flex justify-start">
|
||
<div className="bg-white border border-slate-200 rounded-2xl rounded-tl-none px-4 py-2.5 shadow-sm flex gap-1 items-center">
|
||
<div className="w-1.5 h-1.5 bg-blue-500 rounded-full animate-bounce" />
|
||
<div className="w-1.5 h-1.5 bg-blue-500 rounded-full animate-bounce delay-75" />
|
||
<div className="w-1.5 h-1.5 bg-blue-500 rounded-full animate-bounce delay-150" />
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Settings and Input Box */}
|
||
<div className="bg-white border-t border-slate-200 p-4 space-y-3 shrink-0">
|
||
<div className="flex flex-col gap-2">
|
||
<div className="flex items-center gap-4">
|
||
<div className="flex items-center gap-2 flex-1">
|
||
<label className="text-[11px] font-bold text-slate-500 shrink-0">指定修改区域</label>
|
||
<select
|
||
value={aiTargetRegion}
|
||
onChange={(e) => setAiTargetRegion(e.target.value)}
|
||
disabled={!aiModifyEnabled}
|
||
className="flex-1 w-0 px-2 py-1.5 border border-slate-300 rounded text-xs bg-slate-50 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:opacity-50"
|
||
>
|
||
{availableAiRegions.length > 0 ? (
|
||
availableAiRegions.map(r => (
|
||
<option key={r.id} value={r.id}>{r.title}</option>
|
||
))
|
||
) : (
|
||
<option value="none">无区域 (将插入光标处)</option>
|
||
)}
|
||
</select>
|
||
</div>
|
||
<div className="flex items-center gap-1 shrink-0">
|
||
<input
|
||
type="checkbox"
|
||
id="aiModifyEnabled"
|
||
checked={aiModifyEnabled}
|
||
onChange={(e) => setAiModifyEnabled(e.target.checked)}
|
||
className="w-3.5 h-3.5 text-blue-600 rounded border-slate-300 focus:ring-blue-500 cursor-pointer"
|
||
/>
|
||
<label htmlFor="aiModifyEnabled" className="text-[11px] text-slate-600 cursor-pointer select-none font-bold">
|
||
修改内容
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
{capturedFrames.length > 0 && (
|
||
<div className="flex flex-col gap-1.5">
|
||
<label className="text-[11px] font-bold text-slate-500 shrink-0">参考关键帧</label>
|
||
<div className="flex gap-2 overflow-x-auto pb-1 custom-scrollbar">
|
||
{capturedFrames.map(frame => {
|
||
const isSelected = aiSelectedFrames.includes(frame.id);
|
||
return (
|
||
<div
|
||
key={frame.id}
|
||
onClick={() => {
|
||
setAiSelectedFrames(prev =>
|
||
isSelected ? prev.filter(id => id !== frame.id) : [...prev, frame.id]
|
||
);
|
||
}}
|
||
className={`relative shrink-0 w-16 aspect-video rounded overflow-hidden border-2 cursor-pointer transition-all ${isSelected ? 'border-blue-600 scale-105' : 'border-transparent opacity-60 hover:opacity-100'}`}
|
||
>
|
||
<img src={frame.dataUrl} className="w-full h-full object-cover" />
|
||
{isSelected && (
|
||
<div className="absolute top-0.5 right-0.5 bg-blue-600 rounded-full w-3 h-3 flex items-center justify-center">
|
||
<Check size={8} className="text-white" />
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Quick Prompts */}
|
||
<div className="flex flex-wrap gap-1.5 pb-1">
|
||
{['请详细描述手术步骤', '提取术中关键病灶信息', '生成简短的术后总结'].map(p => (
|
||
<button key={p} onClick={() => setChatInput(p)} className="px-2.5 py-1 bg-slate-100 hover:bg-slate-200 text-slate-600 text-[10px] rounded-full transition-colors whitespace-nowrap">
|
||
{p}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<div className="relative">
|
||
{/* 上传图片的预览区 */}
|
||
{aiUploadedImages.length > 0 && (
|
||
<div className="absolute top-2 left-2 flex gap-2 z-10 bg-white/80 p-1 rounded">
|
||
{aiUploadedImages.map(img => (
|
||
<div key={img.id} className="relative w-10 h-10 rounded overflow-hidden border border-slate-200 shadow-sm shrink-0">
|
||
<img src={img.dataUrl} className="w-full h-full object-cover" />
|
||
<button
|
||
onClick={() => setAiUploadedImages(prev => prev.filter(i => i.id !== img.id))}
|
||
className="absolute top-0 right-0 bg-red-500/80 hover:bg-red-500 text-white p-0.5 rounded-bl-md transition-colors"
|
||
>
|
||
<X size={10}/>
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<textarea
|
||
value={chatInput}
|
||
onChange={(e) => setChatInput(e.target.value)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter' && !e.shiftKey) {
|
||
e.preventDefault();
|
||
if (chatInput.trim() && !isGenerating) {
|
||
handleAIGenerate(chatInput);
|
||
}
|
||
}
|
||
}}
|
||
style={{ paddingTop: aiUploadedImages.length > 0 ? '56px' : '8px' }}
|
||
placeholder={isListening ? "正在聆听中..." : "输入修改意见... （按 Enter 发送）"}
|
||
className="w-full h-24 px-3 pr-[50px] border border-slate-300 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none transition-all custom-scrollbar"
|
||
/>
|
||
|
||
<div className="absolute bottom-2 right-2 flex flex-col gap-1 items-end">
|
||
{/* 额外动作栏: 语音、上传图片 */}
|
||
<div className="flex bg-white rounded-full border border-slate-200 shadow-sm overflow-hidden mb-1">
|
||
<button
|
||
onClick={toggleListening}
|
||
className={`p-1.5 transition-colors ${isListening ? 'text-red-500 bg-red-50' : 'text-slate-400 hover:text-slate-600 hover:bg-slate-50'}`}
|
||
title={isListening ? "停止语音输入" : "语音输入"}
|
||
>
|
||
{isListening ? <Mic size={14} className="animate-pulse" /> : <MicOff size={14} />}
|
||
</button>
|
||
|
||
<label className="p-1.5 text-slate-400 hover:text-slate-600 hover:bg-slate-50 cursor-pointer transition-colors" title="上传本地图片">
|
||
<input type="file" accept="image/*" multiple className="hidden" onChange={handleAiLocalImageUpload} />
|
||
<ImagePlus size={14} />
|
||
</label>
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => handleAIGenerate(chatInput)}
|
||
disabled={isGenerating || !chatInput.trim()}
|
||
className="p-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||
>
|
||
{isGenerating ? <Loader2 size={16} className="animate-spin" /> : <Sparkles size={16} />}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
<canvas ref={canvasRef} className="hidden" />
|
||
</div>
|
||
);
|
||
}
|