2225 lines
108 KiB
TypeScript
2225 lines
108 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
|
||
} 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'>('info');
|
||
const [activeFieldKey, setActiveFieldKey] = useState<string | null>(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 [multiSelectOptions, setMultiSelectOptions] = useState<Record<string, string[]>>({
|
||
surgeon: ['张医生', '李医生', '王医生'],
|
||
assistant: ['赵医生', '钱医生', '孙医生'],
|
||
anesthesiologist: ['周医生', '吴医生', '郑医生']
|
||
});
|
||
const [anesthesiaOptions, setAnesthesiaOptions] = useState<string[]>(['全麻', '局麻', '腰麻', '硬膜外麻醉', '静脉麻醉', '吸入麻醉']);
|
||
const [openDropdown, setOpenDropdown] = useState<string | null>(null);
|
||
const [multiInputText, setMultiInputText] = useState<Record<string, string>>({});
|
||
const [touched, setTouched] = useState<Record<string, boolean>>({});
|
||
const [formFields, setFormFields] = useState<FormField[]>([]);
|
||
const [imagePickerOpen, setImagePickerOpen] = useState(false);
|
||
const [imagePickerTarget, setImagePickerTarget] = useState<HTMLElement | null>(null);
|
||
const [imageAssets, setImageAssets] = useState<{id: string; name: string; dataUrl: string}[]>([]);
|
||
const [placeholderModal, setPlaceholderModal] = useState({
|
||
isOpen: false, width: '200', height: '200', mode: 'frame' as 'frame' | 'manual'
|
||
});
|
||
const [tableModal, setTableModal] = useState({
|
||
isOpen: false, rows: '2', cols: '3'
|
||
});
|
||
|
||
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 savedMulti = storage.get<Record<string, string[]> | null>('multiSelectOptions', null);
|
||
if (savedMulti) setMultiSelectOptions(savedMulti);
|
||
const savedAnesthesia = storage.get<string[] | null>('anesthesiaOptions', null);
|
||
if (savedAnesthesia) setAnesthesiaOptions(savedAnesthesia);
|
||
|
||
const savedFields = storage.get<FormField[]>('formFieldsConfig', []);
|
||
if (savedFields.length > 0) {
|
||
setFormFields(savedFields);
|
||
} else {
|
||
setFormFields(DEFAULT_FORM_FIELDS);
|
||
storage.set('formFieldsConfig', DEFAULT_FORM_FIELDS);
|
||
}
|
||
|
||
const savedAssets = storage.get<{id: string; name: string; dataUrl: string}[]>('imageAssets', []);
|
||
setImageAssets(savedAssets);
|
||
|
||
const allTemplates = storage.get<Template[]>('templates', []);
|
||
const visibleTplIds = Array.isArray(user.visibleTemplates) ? user.visibleTemplates : allTemplates.map(t => t.id);
|
||
const filteredTemplates = allTemplates.filter(t => visibleTplIds.includes(t.id));
|
||
setTemplates(filteredTemplates);
|
||
|
||
if (reportId) {
|
||
const draft = storage.get<Record<string, any> | null>(draftKey, null);
|
||
if (draft && draft.draftReportId === reportId) {
|
||
if (draft.reportData) setReportData(draft.reportData);
|
||
if (draft.videos) {
|
||
setVideos(draft.videos);
|
||
if (draft.videos.length > 0) setCurrentVideoIndex(0);
|
||
prevVideoCountRef.current = draft.videos.length;
|
||
}
|
||
if (draft.capturedFrames) {
|
||
setCapturedFrames(draft.capturedFrames.sort((a: CapturedFrame, b: CapturedFrame) => a.time - b.time));
|
||
}
|
||
if (draft.activeTab) setActiveTab(draft.activeTab);
|
||
stateRef.current = {
|
||
...stateRef.current,
|
||
reportData: draft.reportData,
|
||
videos: draft.videos,
|
||
capturedFrames: draft.capturedFrames,
|
||
loadedTemplateId: draft.loadedTemplateId || ''
|
||
};
|
||
if (editorRef.current && typeof draft.content === 'string' && draft.content.trim().length > 0) {
|
||
editorRef.current.innerHTML = draft.content;
|
||
contentRef.current = draft.content;
|
||
contentLoadedRef.current = true;
|
||
setLoadedTemplateId(draft.loadedTemplateId || '');
|
||
setTimeout(() => updatePageHeight(), 0);
|
||
}
|
||
} else {
|
||
const reports = storage.get<Report[]>('reports', []);
|
||
const found = reports.find(r => r.id === reportId);
|
||
if (found) {
|
||
setReportData(found);
|
||
stateRef.current = {
|
||
...stateRef.current,
|
||
reportData: found,
|
||
videos: found.videos || [],
|
||
capturedFrames: found.capturedFrames || []
|
||
};
|
||
if (editorRef.current) {
|
||
const restoreContent = storage.getSession<string | null>(`restore_${reportId}`, null);
|
||
if (restoreFlag && restoreContent) {
|
||
editorRef.current.innerHTML = restoreContent;
|
||
storage.removeSession(`restore_${reportId}`);
|
||
} else {
|
||
editorRef.current.innerHTML = found.content;
|
||
contentRef.current = found.content;
|
||
}
|
||
contentLoadedRef.current = true;
|
||
setTimeout(() => updatePageHeight(), 0);
|
||
}
|
||
if (found.capturedFrames) {
|
||
setCapturedFrames(found.capturedFrames.sort((a, b) => a.time - b.time));
|
||
}
|
||
if (found.videos) {
|
||
setVideos(found.videos);
|
||
if (found.videos.length > 0) setCurrentVideoIndex(0);
|
||
prevVideoCountRef.current = found.videos.length;
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
const draft = storage.get<Record<string, any> | null>(draftKey, null);
|
||
if (draft && !draft.draftReportId) {
|
||
if (draft.reportData) setReportData(draft.reportData);
|
||
if (draft.videos) {
|
||
setVideos(draft.videos);
|
||
if (draft.videos.length > 0) setCurrentVideoIndex(0);
|
||
prevVideoCountRef.current = draft.videos.length;
|
||
}
|
||
if (draft.capturedFrames) {
|
||
setCapturedFrames(draft.capturedFrames.sort((a: CapturedFrame, b: CapturedFrame) => a.time - b.time));
|
||
}
|
||
if (draft.activeTab) setActiveTab(draft.activeTab);
|
||
stateRef.current = {
|
||
...stateRef.current,
|
||
reportData: draft.reportData,
|
||
videos: draft.videos,
|
||
capturedFrames: draft.capturedFrames,
|
||
loadedTemplateId: draft.loadedTemplateId || ''
|
||
};
|
||
if (editorRef.current && typeof draft.content === 'string' && draft.content.trim().length > 0) {
|
||
editorRef.current.innerHTML = draft.content;
|
||
contentRef.current = draft.content;
|
||
contentLoadedRef.current = true;
|
||
setLoadedTemplateId(draft.loadedTemplateId || '');
|
||
setTimeout(() => updatePageHeight(), 0);
|
||
}
|
||
}
|
||
if (!contentLoadedRef.current && editorRef.current) {
|
||
const settings = storage.get<SystemSettings>('systemSettings', {} as SystemSettings);
|
||
if (settings.defaultTemplate && filteredTemplates.length > 0) {
|
||
const tpl = filteredTemplates.find(t => t.id === settings.defaultTemplate);
|
||
if (tpl) {
|
||
setLoadedTemplateId(tpl.id);
|
||
stateRef.current = { ...stateRef.current, loadedTemplateId: tpl.id };
|
||
editorRef.current.innerHTML = tpl.content;
|
||
contentRef.current = tpl.content;
|
||
} else {
|
||
editorRef.current.innerHTML = defaultReportContent;
|
||
contentRef.current = defaultReportContent;
|
||
}
|
||
} else {
|
||
editorRef.current.innerHTML = defaultReportContent;
|
||
contentRef.current = defaultReportContent;
|
||
}
|
||
contentLoadedRef.current = true;
|
||
setTimeout(() => updatePageHeight(), 0);
|
||
}
|
||
}
|
||
}, [reportId, navigate, draftKey, restoreFlag]);
|
||
|
||
useEffect(() => {
|
||
const handleBeforeUnload = () => saveDraftToStorage();
|
||
const handleVisibilityChange = () => {
|
||
if (document.visibilityState === 'hidden') saveDraftToStorage();
|
||
};
|
||
window.addEventListener('beforeunload', handleBeforeUnload);
|
||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||
return () => {
|
||
window.removeEventListener('beforeunload', handleBeforeUnload);
|
||
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||
saveDraftToStorage();
|
||
};
|
||
}, [saveDraftToStorage]);
|
||
|
||
// Auto-fill current time for fields with timeDefault === 'current'
|
||
useEffect(() => {
|
||
if (formFields.length === 0) return;
|
||
let hasChange = false;
|
||
const updates: any = {};
|
||
formFields.forEach(field => {
|
||
if (field.timeDefault === 'current') {
|
||
if (field.type === 'date') {
|
||
const current = new Date().toISOString().split('T')[0];
|
||
if (!(reportData as any)[field.key]) {
|
||
updates[field.key] = current;
|
||
hasChange = true;
|
||
}
|
||
} else if (field.type === 'time') {
|
||
const now = new Date();
|
||
const hh = String(now.getHours()).padStart(2, '0');
|
||
const mm = String(now.getMinutes()).padStart(2, '0');
|
||
if (field.key === 'startTime') {
|
||
if (!reportData.startHour) {
|
||
updates.startHour = hh;
|
||
updates.startMinute = mm;
|
||
hasChange = true;
|
||
}
|
||
} else if (field.key === 'endTime') {
|
||
if (!reportData.endHour) {
|
||
updates.endHour = hh;
|
||
updates.endMinute = mm;
|
||
hasChange = true;
|
||
}
|
||
} else {
|
||
if (!(reportData as any)[field.key]) {
|
||
updates[field.key] = `${hh}:${mm}`;
|
||
hasChange = true;
|
||
}
|
||
}
|
||
}
|
||
} else if (field.timeDefault === 'specific' && field.fixedTimeValue) {
|
||
if (field.type === 'date') {
|
||
if (!(reportData as any)[field.key]) {
|
||
updates[field.key] = field.fixedTimeValue;
|
||
hasChange = true;
|
||
}
|
||
} else if (field.type === 'time') {
|
||
if (field.key === 'startTime') {
|
||
if (!reportData.startHour) {
|
||
const [hh, mm] = field.fixedTimeValue.split(':');
|
||
updates.startHour = hh || '';
|
||
updates.startMinute = mm || '';
|
||
hasChange = true;
|
||
}
|
||
} else if (field.key === 'endTime') {
|
||
if (!reportData.endHour) {
|
||
const [hh, mm] = field.fixedTimeValue.split(':');
|
||
updates.endHour = hh || '';
|
||
updates.endMinute = mm || '';
|
||
hasChange = true;
|
||
}
|
||
} else {
|
||
if (!(reportData as any)[field.key]) {
|
||
updates[field.key] = field.fixedTimeValue;
|
||
hasChange = true;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
if (hasChange) {
|
||
setReportData(prev => {
|
||
const next = { ...prev, ...updates };
|
||
stateRef.current = { ...stateRef.current, reportData: next };
|
||
return next;
|
||
});
|
||
}
|
||
}, [formFields]);
|
||
|
||
useEffect(() => {
|
||
if (!editorRef.current) return;
|
||
const observer = new MutationObserver(() => {
|
||
updatePageHeight();
|
||
});
|
||
observer.observe(editorRef.current, { childList: true, subtree: true, attributes: true, characterData: true });
|
||
return () => observer.disconnect();
|
||
}, [currentUser]);
|
||
|
||
const triggerPlaceholderUpload = (placeholder: HTMLElement) => {
|
||
const input = document.createElement('input');
|
||
input.type = 'file';
|
||
input.accept = 'image/*';
|
||
input.onchange = (ev) => {
|
||
const file = (ev.target as HTMLInputElement).files?.[0];
|
||
if (file) {
|
||
const reader = new FileReader();
|
||
reader.onload = (event) => {
|
||
const src = event.target?.result as string;
|
||
const mw = placeholder.style.maxWidth || placeholder.style.width || '200px';
|
||
const mh = placeholder.style.maxHeight || placeholder.style.height || '200px';
|
||
placeholder.innerHTML = `
|
||
<span class="delete-btn" contenteditable="false">×</span>
|
||
<img src="${src}" style="max-width:${mw};max-height:${mh};display:block;object-fit:contain;object-position:left top;" draggable="false">
|
||
`;
|
||
placeholder.classList.add('has-image');
|
||
placeholder.style.border = 'none';
|
||
placeholder.style.background = 'transparent';
|
||
placeholder.style.width = 'auto';
|
||
placeholder.style.height = 'auto';
|
||
placeholder.style.lineHeight = 'normal';
|
||
placeholder.style.maxWidth = mw;
|
||
placeholder.style.maxHeight = mh;
|
||
placeholder.style.textAlign = 'left';
|
||
placeholder.style.verticalAlign = 'top';
|
||
placeholder.style.justifyContent = 'flex-start';
|
||
placeholder.style.alignItems = 'flex-start';
|
||
if (editorRef.current) contentRef.current = editorRef.current.innerHTML;
|
||
saveDraftToStorage();
|
||
};
|
||
reader.readAsDataURL(file);
|
||
}
|
||
};
|
||
input.click();
|
||
};
|
||
|
||
// Handle image placeholder interactions via click capture for reliable contenteditable behavior
|
||
useEffect(() => {
|
||
const handleEditorClick = (e: MouseEvent) => {
|
||
// e.target may be a text node; safely resolve to an Element
|
||
let node: Node | null = e.target as Node;
|
||
if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
|
||
const targetEl = node as HTMLElement | null;
|
||
if (!targetEl) return;
|
||
|
||
// Handle click on field-value: switch to info tab, highlight and focus corresponding input
|
||
const fieldValue = targetEl.closest('.field-value') as HTMLElement | null;
|
||
if (fieldValue) {
|
||
const bindKey = fieldValue.getAttribute('data-bind');
|
||
if (bindKey) {
|
||
setActiveTab('info');
|
||
stateRef.current = { ...stateRef.current, activeTab: 'info' };
|
||
setActiveFieldKey(bindKey);
|
||
setTimeout(() => {
|
||
const inputEl = document.getElementById(`input-${bindKey}`);
|
||
if (inputEl) {
|
||
inputEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
const focusable = inputEl.querySelector('input, select') as HTMLElement | null;
|
||
if (focusable) {
|
||
focusable.focus();
|
||
}
|
||
}
|
||
}, 100);
|
||
}
|
||
return;
|
||
}
|
||
|
||
// 点击空白处清除高亮
|
||
setActiveFieldKey(null);
|
||
|
||
const placeholder = targetEl.closest('.image-placeholder') as HTMLElement | null;
|
||
if (!placeholder) return;
|
||
|
||
if (targetEl.closest('.delete-btn')) {
|
||
e.stopPropagation();
|
||
e.preventDefault();
|
||
if (placeholder.classList.contains('has-image')) {
|
||
placeholder.classList.remove('has-image');
|
||
const w = parseInt(placeholder.style.maxWidth || placeholder.style.width || '0');
|
||
const text = w > 0 && w < 80 ? '插图' : '插入/点击放置图片';
|
||
placeholder.innerHTML = `
|
||
<span class="delete-btn" contenteditable="false">×</span>
|
||
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:block;width:100%;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">${text}</span>
|
||
`;
|
||
placeholder.style.border = '1px dashed #cbd5e1';
|
||
placeholder.style.background = '#f8fafc';
|
||
const mw = placeholder.style.maxWidth;
|
||
const mh = placeholder.style.maxHeight;
|
||
if (mw) placeholder.style.width = mw;
|
||
if (mh) {
|
||
placeholder.style.height = mh;
|
||
placeholder.style.lineHeight = mh;
|
||
}
|
||
placeholder.style.textAlign = 'center';
|
||
placeholder.style.verticalAlign = 'middle';
|
||
placeholder.style.justifyContent = 'center';
|
||
placeholder.style.alignItems = 'center';
|
||
if (editorRef.current) contentRef.current = editorRef.current.innerHTML;
|
||
saveDraftToStorage();
|
||
} else {
|
||
const range = document.createRange();
|
||
range.selectNode(placeholder);
|
||
const sel = window.getSelection();
|
||
sel?.removeAllRanges();
|
||
sel?.addRange(range);
|
||
document.execCommand('delete');
|
||
if (editorRef.current) contentRef.current = editorRef.current.innerHTML;
|
||
saveDraftToStorage();
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (!placeholder.classList.contains('has-image')) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
setImagePickerTarget(placeholder);
|
||
setImagePickerOpen(true);
|
||
}
|
||
};
|
||
|
||
const editor = editorRef.current;
|
||
if (editor) {
|
||
editor.addEventListener('click', handleEditorClick, true);
|
||
}
|
||
return () => {
|
||
if (editor) {
|
||
editor.removeEventListener('click', handleEditorClick, true);
|
||
}
|
||
};
|
||
}, [saveDraftToStorage, currentUser]);
|
||
|
||
// Prevent backspace from deleting image-placeholder elements
|
||
useEffect(() => {
|
||
const editor = editorRef.current;
|
||
if (!editor) return;
|
||
|
||
const handleKeyDown = (e: KeyboardEvent) => {
|
||
if (e.key !== 'Backspace' && e.key !== 'Delete') return;
|
||
const sel = window.getSelection();
|
||
if (!sel || sel.rangeCount === 0) return;
|
||
const range = sel.getRangeAt(0);
|
||
|
||
// If selection is inside a placeholder, or if the range intersects a placeholder
|
||
let node: Node | null = range.commonAncestorContainer;
|
||
if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
|
||
const placeholder = (node as HTMLElement)?.closest('.image-placeholder');
|
||
if (placeholder) {
|
||
e.preventDefault();
|
||
return;
|
||
}
|
||
|
||
// If collapsed and next/previous sibling is a placeholder
|
||
if (range.collapsed) {
|
||
const container = range.startContainer;
|
||
const offset = range.startOffset;
|
||
if (container.nodeType === Node.ELEMENT_NODE) {
|
||
const next = (container as Element).children[offset];
|
||
const prev = (container as Element).children[offset - 1];
|
||
if ((e.key === 'Delete' && next?.classList?.contains('image-placeholder')) ||
|
||
(e.key === 'Backspace' && prev?.classList?.contains('image-placeholder'))) {
|
||
e.preventDefault();
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
editor.addEventListener('keydown', handleKeyDown);
|
||
return () => editor.removeEventListener('keydown', handleKeyDown);
|
||
}, []);
|
||
|
||
const fillPlaceholderSrc = (placeholder: HTMLElement, src: string) => {
|
||
const mw = placeholder.style.maxWidth || placeholder.style.width || '200px';
|
||
const mh = placeholder.style.maxHeight || placeholder.style.height || '200px';
|
||
placeholder.innerHTML = `
|
||
<span class="delete-btn" contenteditable="false">×</span>
|
||
<img src="${src}" style="max-width:${mw};max-height:${mh};display:block;object-fit:contain;object-position:left top;" draggable="false">
|
||
`;
|
||
placeholder.classList.add('has-image');
|
||
placeholder.style.border = 'none';
|
||
placeholder.style.background = 'transparent';
|
||
placeholder.style.width = 'auto';
|
||
placeholder.style.height = 'auto';
|
||
placeholder.style.lineHeight = 'normal';
|
||
placeholder.style.maxWidth = mw;
|
||
placeholder.style.maxHeight = mh;
|
||
placeholder.style.textAlign = 'left';
|
||
placeholder.style.verticalAlign = 'top';
|
||
placeholder.style.justifyContent = 'flex-start';
|
||
placeholder.style.alignItems = 'flex-start';
|
||
if (editorRef.current) contentRef.current = editorRef.current.innerHTML;
|
||
saveDraftToStorage();
|
||
};
|
||
|
||
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 changeLineHeight = (height: string) => {
|
||
const sel = window.getSelection();
|
||
if (!sel || !sel.rangeCount) return;
|
||
let node = sel.getRangeAt(0).commonAncestorContainer;
|
||
if (node.nodeType === Node.TEXT_NODE) node = node.parentNode as Node;
|
||
const block = (node as HTMLElement).closest('p, div, td, h1, h2, h3, li');
|
||
if (block) {
|
||
(block as HTMLElement).style.lineHeight = height;
|
||
if (editorRef.current) contentRef.current = editorRef.current.innerHTML;
|
||
saveDraftToStorage();
|
||
}
|
||
};
|
||
|
||
const changeAlignment = (align: 'left' | 'center' | 'right' | 'justify') => {
|
||
const sel = window.getSelection();
|
||
if (!sel || !sel.rangeCount) return;
|
||
let node = sel.getRangeAt(0).commonAncestorContainer;
|
||
if (node.nodeType === Node.TEXT_NODE) node = node.parentNode as Node;
|
||
const block = (node as HTMLElement).closest('p, div, td, h1, h2, h3, li');
|
||
if (block) {
|
||
(block as HTMLElement).style.textAlign = align;
|
||
if (editorRef.current) contentRef.current = editorRef.current.innerHTML;
|
||
saveDraftToStorage();
|
||
}
|
||
};
|
||
|
||
const insertTable = () => {
|
||
editorRef.current?.focus();
|
||
setTableModal({ isOpen: true, rows: '2', cols: '3' });
|
||
};
|
||
|
||
const insertImage = () => {
|
||
editorRef.current?.focus();
|
||
setPlaceholderModal({ isOpen: true, width: '200', height: '200', mode: 'frame' });
|
||
};
|
||
|
||
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
|
||
}));
|
||
const combined = [...videos, ...newVideos];
|
||
setVideos(combined);
|
||
stateRef.current = { ...stateRef.current, videos: combined };
|
||
setCurrentVideoIndex(videos.length); // select first newly uploaded video
|
||
if (videoInputRef.current) videoInputRef.current.value = '';
|
||
saveDraftToStorage();
|
||
};
|
||
|
||
const removeVideo = (id: string) => {
|
||
const idx = videos.findIndex(v => v.id === id);
|
||
const updated = videos.filter(v => v.id !== id);
|
||
setVideos(updated);
|
||
stateRef.current = { ...stateRef.current, videos: updated };
|
||
if (currentVideoIndex >= updated.length) {
|
||
setCurrentVideoIndex(updated.length > 0 ? 0 : -1);
|
||
} else if (currentVideoIndex === idx && updated.length > 0) {
|
||
setCurrentVideoIndex(0);
|
||
}
|
||
const nextFrames = capturedFrames.filter(f => f.videoIndex !== idx).map(f => {
|
||
if (f.videoIndex > idx) return { ...f, videoIndex: f.videoIndex - 1 };
|
||
return f;
|
||
}).sort((a, b) => a.time - b.time);
|
||
setCapturedFrames(nextFrames);
|
||
stateRef.current = { ...stateRef.current, capturedFrames: nextFrames };
|
||
saveDraftToStorage();
|
||
};
|
||
|
||
const selectVideo = (index: number) => {
|
||
setCurrentVideoIndex(index);
|
||
setIsPlaying(false);
|
||
};
|
||
|
||
const togglePlay = () => {
|
||
if (!videoRef.current) return;
|
||
if (isPlaying) videoRef.current.pause();
|
||
else videoRef.current.play();
|
||
setIsPlaying(!isPlaying);
|
||
};
|
||
|
||
const captureFrame = () => {
|
||
if (!videoRef.current || !canvasRef.current || currentVideoIndex === -1) return;
|
||
const video = videoRef.current;
|
||
const canvas = canvasRef.current;
|
||
const MAX_WIDTH = 800;
|
||
const scale = Math.min(1, MAX_WIDTH / 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.6),
|
||
isManual: true
|
||
};
|
||
const nextFrames = [...capturedFrames, newFrame].sort((a, b) => a.time - b.time);
|
||
setCapturedFrames(nextFrames);
|
||
stateRef.current = { ...stateRef.current, capturedFrames: nextFrames };
|
||
saveDraftToStorage();
|
||
};
|
||
|
||
const autoCaptureFrames = async () => {
|
||
if (!videoRef.current || currentVideoIndex === -1) return;
|
||
const video = videoRef.current;
|
||
const settings = storage.get<SystemSettings>('systemSettings', {} as SystemSettings);
|
||
const positions = settings.framePositions || [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60];
|
||
const dur = video.duration || 1;
|
||
|
||
const canvas = canvasRef.current;
|
||
if (!canvas) return;
|
||
const ctx = canvas.getContext('2d');
|
||
if (!ctx) return;
|
||
|
||
const wasPlaying = !video.paused;
|
||
if (wasPlaying) video.pause();
|
||
|
||
let accumulatedFrames = [...capturedFrames];
|
||
for (let i = 0; i < positions.length; i++) {
|
||
const pos = positions[i];
|
||
const time = (pos / 100) * dur;
|
||
video.currentTime = time;
|
||
await new Promise<void>(resolve => {
|
||
const onSeeked = () => {
|
||
video.removeEventListener('seeked', onSeeked);
|
||
resolve();
|
||
};
|
||
video.addEventListener('seeked', onSeeked);
|
||
});
|
||
const MAX_WIDTH = 800;
|
||
const scale = Math.min(1, MAX_WIDTH / video.videoWidth);
|
||
canvas.width = video.videoWidth * scale;
|
||
canvas.height = video.videoHeight * scale;
|
||
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||
const newFrame: CapturedFrame = {
|
||
id: Date.now() + Math.random(),
|
||
videoIndex: currentVideoIndex,
|
||
videoName: videos[currentVideoIndex].name,
|
||
time,
|
||
timeFormatted: formatTime(time),
|
||
dataUrl: canvas.toDataURL('image/jpeg', 0.6),
|
||
isManual: false
|
||
};
|
||
accumulatedFrames = [...accumulatedFrames, newFrame].sort((a, b) => a.time - b.time);
|
||
flushSync(() => {
|
||
setCapturedFrames(accumulatedFrames);
|
||
});
|
||
stateRef.current = { ...stateRef.current, capturedFrames: accumulatedFrames };
|
||
if (settings.autoInsertFrames && settings.autoInsertFrameIndices?.includes(i)) {
|
||
const baseDelay = (settings.autoInsertDelay || 0) * 1000;
|
||
const insertOrderIndex = settings.autoInsertFrameIndices.indexOf(i);
|
||
const actualDelay = baseDelay > 0 ? baseDelay * (insertOrderIndex + 1) : 0;
|
||
|
||
setTimeout(() => {
|
||
if (!editorRef.current) return;
|
||
const emptyPlaceholder = editorRef.current.querySelector('.image-placeholder:not(.has-image):not([data-mode="manual"])') as HTMLElement | null;
|
||
if (emptyPlaceholder) {
|
||
emptyPlaceholder.innerHTML = `
|
||
<span class="delete-btn" contenteditable="false">×</span>
|
||
<img src="${newFrame.dataUrl}" style="max-width:${emptyPlaceholder.style.maxWidth || emptyPlaceholder.style.width || '200px'};max-height:${emptyPlaceholder.style.maxHeight || emptyPlaceholder.style.height || '200px'};display:block;object-fit:contain;object-position:left top;" draggable="false">
|
||
`;
|
||
emptyPlaceholder.classList.add('has-image');
|
||
emptyPlaceholder.style.border = 'none';
|
||
emptyPlaceholder.style.background = 'transparent';
|
||
emptyPlaceholder.style.width = 'auto';
|
||
emptyPlaceholder.style.height = 'auto';
|
||
emptyPlaceholder.style.lineHeight = 'normal';
|
||
emptyPlaceholder.style.maxWidth = emptyPlaceholder.style.maxWidth || emptyPlaceholder.style.width || '200px';
|
||
emptyPlaceholder.style.maxHeight = emptyPlaceholder.style.maxHeight || emptyPlaceholder.style.height || '200px';
|
||
emptyPlaceholder.style.textAlign = 'left';
|
||
emptyPlaceholder.style.verticalAlign = 'top';
|
||
emptyPlaceholder.style.justifyContent = 'flex-start';
|
||
emptyPlaceholder.style.alignItems = 'flex-start';
|
||
contentRef.current = editorRef.current.innerHTML;
|
||
saveDraftToStorage();
|
||
}
|
||
}, actualDelay);
|
||
}
|
||
}
|
||
if (settings.autoInsertFrames && editorRef.current) {
|
||
contentRef.current = editorRef.current.innerHTML;
|
||
}
|
||
if (wasPlaying) video.play();
|
||
saveDraftToStorage();
|
||
};
|
||
|
||
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 handleDragStart = (e: React.DragEvent, frame: CapturedFrame) => {
|
||
e.dataTransfer.setData('frameId', frame.id.toString());
|
||
};
|
||
|
||
const fillPlaceholder = (placeholder: HTMLElement, frame: CapturedFrame) => {
|
||
const mw = placeholder.style.maxWidth || placeholder.style.width || '200px';
|
||
const mh = placeholder.style.maxHeight || placeholder.style.height || '200px';
|
||
placeholder.innerHTML = `
|
||
<span class="delete-btn" contenteditable="false">×</span>
|
||
<img src="${frame.dataUrl}" style="max-width:${mw};max-height:${mh};display:block;object-fit:contain;object-position:left top;" draggable="false">
|
||
`;
|
||
placeholder.classList.add('has-image');
|
||
placeholder.style.border = 'none';
|
||
placeholder.style.background = 'transparent';
|
||
placeholder.style.width = 'auto';
|
||
placeholder.style.height = 'auto';
|
||
placeholder.style.lineHeight = 'normal';
|
||
placeholder.style.maxWidth = mw;
|
||
placeholder.style.maxHeight = mh;
|
||
placeholder.style.textAlign = 'left';
|
||
placeholder.style.verticalAlign = 'top';
|
||
placeholder.style.justifyContent = 'flex-start';
|
||
placeholder.style.alignItems = 'flex-start';
|
||
if (editorRef.current) contentRef.current = editorRef.current.innerHTML;
|
||
saveDraftToStorage();
|
||
};
|
||
|
||
const handleDrop = (e: React.DragEvent, placeholder: HTMLElement) => {
|
||
e.preventDefault();
|
||
if (placeholder.getAttribute('data-mode') === 'manual') {
|
||
alert('此处为静态图片占位符，仅支持点击插入（如Logo/签名），不支持拖入关键帧');
|
||
return;
|
||
}
|
||
const frameId = e.dataTransfer.getData('frameId');
|
||
const frame = capturedFrames.find(f => f.id.toString() === frameId);
|
||
if (frame) {
|
||
fillPlaceholder(placeholder, frame);
|
||
}
|
||
};
|
||
|
||
const insertFrameToPlaceholder = (frame: CapturedFrame) => {
|
||
if (!editorRef.current) {
|
||
alert('编辑器未准备好');
|
||
return;
|
||
}
|
||
const emptyPlaceholder = editorRef.current.querySelector('.image-placeholder:not(.has-image):not([data-mode="manual"])') as HTMLElement | null;
|
||
if (!emptyPlaceholder) {
|
||
alert('没有可插入图片的空位');
|
||
return;
|
||
}
|
||
fillPlaceholder(emptyPlaceholder, frame);
|
||
};
|
||
|
||
const seekToFrame = (frame: CapturedFrame) => {
|
||
if (!videoRef.current) return;
|
||
if (frame.videoIndex !== currentVideoIndex) {
|
||
setCurrentVideoIndex(frame.videoIndex);
|
||
}
|
||
setTimeout(() => {
|
||
if (videoRef.current) {
|
||
videoRef.current.currentTime = frame.time;
|
||
}
|
||
}, 50);
|
||
};
|
||
|
||
const handleFrameKeyNav = (direction: 'left' | 'right') => {
|
||
if (!videoRef.current) return;
|
||
const delta = direction === 'left' ? -5 : 5;
|
||
videoRef.current.currentTime = Math.max(0, Math.min(duration, videoRef.current.currentTime + delta));
|
||
};
|
||
|
||
useEffect(() => {
|
||
const handleKeyDown = (e: KeyboardEvent) => {
|
||
if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
|
||
// Only if video tab is active or video element is focused
|
||
if (activeTab === 'video' || document.activeElement === videoRef.current) {
|
||
handleFrameKeyNav(e.key === 'ArrowLeft' ? 'left' : 'right');
|
||
}
|
||
}
|
||
};
|
||
window.addEventListener('keydown', handleKeyDown);
|
||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||
}, [activeTab, duration]);
|
||
|
||
// Auto-capture frames when new videos are uploaded
|
||
useEffect(() => {
|
||
if (videos.length > prevVideoCountRef.current && currentVideoIndex !== -1) {
|
||
const timer = setTimeout(() => {
|
||
if (videoRef.current && videoRef.current.duration) {
|
||
autoCaptureFrames();
|
||
} else if (videoRef.current) {
|
||
const onMeta = () => {
|
||
autoCaptureFrames();
|
||
videoRef.current?.removeEventListener('loadedmetadata', onMeta);
|
||
};
|
||
videoRef.current.addEventListener('loadedmetadata', onMeta);
|
||
}
|
||
}, 300);
|
||
return () => clearTimeout(timer);
|
||
}
|
||
prevVideoCountRef.current = videos.length;
|
||
}, [videos.length, currentVideoIndex]);
|
||
|
||
// Apply selected template content
|
||
useEffect(() => {
|
||
if (pendingTemplateId && editorRef.current) {
|
||
const tpl = templates.find(t => t.id === pendingTemplateId);
|
||
if (tpl) {
|
||
editorRef.current.innerHTML = tpl.content;
|
||
contentRef.current = tpl.content;
|
||
const nextReportData: any = {
|
||
title: tpl.name || '腹腔镜胆囊切除术报告',
|
||
patientName: '',
|
||
hospitalId: '',
|
||
patientGender: '',
|
||
patientAge: '',
|
||
department: '',
|
||
bedNumber: '',
|
||
surgeryDate: '',
|
||
startHour: '',
|
||
startMinute: '',
|
||
endHour: '',
|
||
endMinute: '',
|
||
surgeon: [],
|
||
assistant: [],
|
||
anesthesiologist: [],
|
||
anesthesiaType: '',
|
||
status: 'draft'
|
||
};
|
||
formFields.forEach(field => {
|
||
if (field.category === '时间') {
|
||
if (field.timeDefault === 'specific' && field.fixedTimeValue) {
|
||
if (field.type === 'date') {
|
||
nextReportData[field.key] = field.fixedTimeValue;
|
||
} else if (field.type === 'time') {
|
||
const [hh, mm] = field.fixedTimeValue.split(':');
|
||
if (field.key === 'startTime') {
|
||
nextReportData.startHour = hh || '';
|
||
nextReportData.startMinute = mm || '';
|
||
} else if (field.key === 'endTime') {
|
||
nextReportData.endHour = hh || '';
|
||
nextReportData.endMinute = mm || '';
|
||
} else {
|
||
nextReportData[field.key] = field.fixedTimeValue;
|
||
}
|
||
}
|
||
} else if (field.timeDefault === 'current') {
|
||
if (field.type === 'date') {
|
||
nextReportData[field.key] = new Date().toISOString().split('T')[0];
|
||
} else if (field.type === 'time') {
|
||
const now = new Date();
|
||
const hh = String(now.getHours()).padStart(2, '0');
|
||
const mm = String(now.getMinutes()).padStart(2, '0');
|
||
if (field.key === 'startTime') {
|
||
nextReportData.startHour = hh;
|
||
nextReportData.startMinute = mm;
|
||
} else if (field.key === 'endTime') {
|
||
nextReportData.endHour = hh;
|
||
nextReportData.endMinute = mm;
|
||
} else {
|
||
nextReportData[field.key] = `${hh}:${mm}`;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
if (!nextReportData.surgeryDate) {
|
||
nextReportData.surgeryDate = new Date().toISOString().split('T')[0];
|
||
}
|
||
setLoadedTemplateId(tpl.id);
|
||
setReportData(nextReportData);
|
||
setVideos([]);
|
||
setCapturedFrames([]);
|
||
setCurrentVideoIndex(-1);
|
||
prevVideoCountRef.current = 0;
|
||
stateRef.current = {
|
||
...stateRef.current,
|
||
loadedTemplateId: tpl.id,
|
||
reportData: nextReportData,
|
||
videos: [],
|
||
capturedFrames: [],
|
||
activeTab: stateRef.current.activeTab
|
||
};
|
||
updatePageHeight();
|
||
saveDraftToStorage();
|
||
}
|
||
setPendingTemplateId(null);
|
||
}
|
||
}, [pendingTemplateId, templates]);
|
||
|
||
// Safety net: ensure editor gets initialized if ref was not ready during init effect
|
||
React.useLayoutEffect(() => {
|
||
if (contentLoadedRef.current || !editorRef.current) return;
|
||
|
||
const user = storage.get<User | null>('currentUser', null);
|
||
const key = user ? `reportEditorDraft_${user.username}` : '';
|
||
const draft = key ? storage.get<Record<string, any> | null>(key, null) : null;
|
||
|
||
if (reportId) {
|
||
if (draft && draft.draftReportId === reportId && typeof draft.content === 'string' && draft.content.trim().length > 0) {
|
||
editorRef.current.innerHTML = draft.content;
|
||
contentRef.current = draft.content;
|
||
contentLoadedRef.current = true;
|
||
setLoadedTemplateId(draft.loadedTemplateId || '');
|
||
stateRef.current = {
|
||
...stateRef.current,
|
||
reportData: draft.reportData,
|
||
videos: draft.videos,
|
||
capturedFrames: draft.capturedFrames,
|
||
loadedTemplateId: draft.loadedTemplateId || ''
|
||
};
|
||
setTimeout(() => updatePageHeight(), 0);
|
||
return;
|
||
}
|
||
const reports = storage.get<Report[]>('reports', []);
|
||
const found = reports.find(r => r.id === reportId);
|
||
if (found) {
|
||
const restoreContent = storage.getSession<string | null>(`restore_${reportId}`, null);
|
||
if (restoreFlag && restoreContent) {
|
||
editorRef.current.innerHTML = restoreContent;
|
||
storage.removeSession(`restore_${reportId}`);
|
||
} else {
|
||
editorRef.current.innerHTML = found.content;
|
||
}
|
||
contentLoadedRef.current = true;
|
||
stateRef.current = {
|
||
...stateRef.current,
|
||
reportData: found,
|
||
videos: found.videos || [],
|
||
capturedFrames: found.capturedFrames || []
|
||
};
|
||
setTimeout(() => updatePageHeight(), 0);
|
||
return;
|
||
}
|
||
} else {
|
||
if (draft && !draft.draftReportId && typeof draft.content === 'string' && draft.content.trim().length > 0) {
|
||
editorRef.current.innerHTML = draft.content;
|
||
contentRef.current = draft.content;
|
||
contentLoadedRef.current = true;
|
||
setLoadedTemplateId(draft.loadedTemplateId || '');
|
||
stateRef.current = {
|
||
...stateRef.current,
|
||
reportData: draft.reportData,
|
||
videos: draft.videos,
|
||
capturedFrames: draft.capturedFrames,
|
||
loadedTemplateId: draft.loadedTemplateId || ''
|
||
};
|
||
setTimeout(() => updatePageHeight(), 0);
|
||
return;
|
||
}
|
||
}
|
||
|
||
const settings = storage.get<SystemSettings>('systemSettings', {} as SystemSettings);
|
||
const allTemplates = storage.get<Template[]>('templates', []);
|
||
const userData = storage.get<User | null>('currentUser', null);
|
||
const visibleTplIds = Array.isArray(userData?.visibleTemplates) ? userData.visibleTemplates : allTemplates.map(t => t.id);
|
||
const filteredTemplates = allTemplates.filter(t => visibleTplIds.includes(t.id));
|
||
if (settings.defaultTemplate && filteredTemplates.length > 0) {
|
||
const tpl = filteredTemplates.find(t => t.id === settings.defaultTemplate);
|
||
if (tpl) {
|
||
setLoadedTemplateId(tpl.id);
|
||
stateRef.current = { ...stateRef.current, loadedTemplateId: tpl.id };
|
||
editorRef.current.innerHTML = tpl.content;
|
||
} else {
|
||
editorRef.current.innerHTML = defaultReportContent;
|
||
}
|
||
} else {
|
||
editorRef.current.innerHTML = defaultReportContent;
|
||
}
|
||
contentLoadedRef.current = true;
|
||
setTimeout(() => updatePageHeight(), 0);
|
||
}, []);
|
||
|
||
const hourOptions = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0'));
|
||
const hour12Options = Array.from({ length: 12 }, (_, i) => ((i + 1).toString().padStart(2, '0')));
|
||
const minuteOptions = Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0'));
|
||
|
||
const formatDateDisplay = (isoDate: string, fmt?: string): string => {
|
||
if (!isoDate || !fmt) return isoDate || '';
|
||
const [y, m, d] = isoDate.split('-');
|
||
return fmt
|
||
.replace(/YYYY/g, y || '')
|
||
.replace(/MM/g, m || '')
|
||
.replace(/DD/g, d || '');
|
||
};
|
||
|
||
const formatTimeDisplay = (timeStr: string, fmt?: string): string => {
|
||
if (!timeStr || !fmt) return timeStr || '';
|
||
if (fmt === '24h') fmt = 'HH:mm';
|
||
const [h24str, mstr] = timeStr.split(':');
|
||
const h24 = parseInt(h24str) || 0;
|
||
const isPM = h24 >= 12;
|
||
let h12 = h24 % 12;
|
||
if (h12 === 0) h12 = 12;
|
||
return fmt
|
||
.replace(/HH/g, String(h24).padStart(2, '0'))
|
||
.replace(/mm/g, mstr || '00')
|
||
.replace(/hh/g, String(h12).padStart(2, '0'))
|
||
.replace(/A/g, isPM ? '下午' : '上午');
|
||
};
|
||
|
||
const parseDateFromFormat = (text: string, fmt?: string): string => {
|
||
if (!text || !fmt) return text;
|
||
const nums = text.match(/\d+/g);
|
||
if (!nums) return text;
|
||
let y = '', m = '', d = '';
|
||
if (nums.length >= 3) { y = nums[0].padStart(4, '0'); m = nums[1].padStart(2, '0'); d = nums[2].padStart(2, '0'); }
|
||
else if (nums.length === 2) { m = nums[0].padStart(2, '0'); d = nums[1].padStart(2, '0'); y = new Date().getFullYear().toString(); }
|
||
return `${y}-${m}-${d}`;
|
||
};
|
||
|
||
const parseTimeFromFormat = (text: string, fmt?: string): string => {
|
||
if (!text || !fmt) return text;
|
||
const nums = text.match(/\d+/g);
|
||
const ampm = text.match(/上午|下午/);
|
||
if (!nums || nums.length < 2) return text;
|
||
let h = parseInt(nums[0]);
|
||
if (ampm) {
|
||
const isPM = ampm[0] === '下午';
|
||
if (isPM && h !== 12) h += 12;
|
||
if (!isPM && h === 12) h = 0;
|
||
}
|
||
return `${String(h).padStart(2, '0')}:${nums[1].padStart(2, '0')}`;
|
||
};
|
||
|
||
const to24h = (h12: number, isPM: boolean): number => {
|
||
if (isPM && h12 !== 12) return h12 + 12;
|
||
if (!isPM && h12 === 12) return 0;
|
||
return h12;
|
||
};
|
||
|
||
const from24h = (h24: number): { h: number; isPM: boolean } => {
|
||
const isPM = h24 >= 12;
|
||
let h = h24 % 12;
|
||
if (h === 0) h = 12;
|
||
return { h, isPM };
|
||
};
|
||
|
||
const addTag = (field: string, value: string) => {
|
||
const current = (reportData as any)[field] || [];
|
||
if (!current.includes(value)) {
|
||
const next = { ...reportData, [field]: [...current, value] };
|
||
setReportData(next);
|
||
stateRef.current = { ...stateRef.current, reportData: next };
|
||
saveDraftToStorage();
|
||
}
|
||
// Persist custom value to global options for future reuse
|
||
const opts = multiSelectOptions[field] || [];
|
||
if (!opts.includes(value)) {
|
||
const next = { ...multiSelectOptions, [field]: [...opts, value] };
|
||
setMultiSelectOptions(next);
|
||
storage.set('multiSelectOptions', next);
|
||
}
|
||
// Sync to formFieldsConfig
|
||
const fieldDef = formFields.find(f => f.key === field);
|
||
if (fieldDef && fieldDef.options && !fieldDef.options.includes(value)) {
|
||
const updatedFields = formFields.map(f => f.key === field ? { ...f, options: [...(f.options || []), value] } : f);
|
||
setFormFields(updatedFields);
|
||
storage.set('formFieldsConfig', updatedFields);
|
||
}
|
||
};
|
||
|
||
const removeTag = (field: string, value: string) => {
|
||
const current = (reportData as any)[field] || [];
|
||
const next = { ...reportData, [field]: current.filter((v: string) => v !== value) };
|
||
setReportData(next);
|
||
stateRef.current = { ...stateRef.current, reportData: next };
|
||
saveDraftToStorage();
|
||
};
|
||
|
||
const removeMultiOption = (field: string, value: string) => {
|
||
const current = multiSelectOptions[field] || [];
|
||
const next = { ...multiSelectOptions, [field]: current.filter(v => v !== value) };
|
||
setMultiSelectOptions(next);
|
||
storage.set('multiSelectOptions', next);
|
||
// Sync to formFieldsConfig
|
||
const fieldDef = formFields.find(f => f.key === field);
|
||
if (fieldDef && fieldDef.options) {
|
||
const updatedFields = formFields.map(f => f.key === field ? { ...f, options: (f.options || []).filter(v => v !== value) } : f);
|
||
setFormFields(updatedFields);
|
||
storage.set('formFieldsConfig', updatedFields);
|
||
}
|
||
};
|
||
|
||
const removeAnesthesiaOption = (value: string) => {
|
||
const next = anesthesiaOptions.filter(v => v !== value);
|
||
setAnesthesiaOptions(next);
|
||
storage.set('anesthesiaOptions', next);
|
||
};
|
||
|
||
// Close dropdowns on outside click
|
||
useEffect(() => {
|
||
const handleDocClick = (e: MouseEvent) => {
|
||
const target = e.target as HTMLElement;
|
||
if (!target.closest('.select-dropdown-root')) {
|
||
setOpenDropdown(null);
|
||
}
|
||
};
|
||
document.addEventListener('click', handleDocClick);
|
||
return () => document.removeEventListener('click', handleDocClick);
|
||
}, []);
|
||
|
||
const saveReport = (status: 'draft' | 'completed') => {
|
||
if (status === 'completed' && (!reportData.patientName || !reportData.hospitalId)) {
|
||
alert('请填写患者姓名和住院号');
|
||
return;
|
||
}
|
||
|
||
if (status === 'completed') {
|
||
const hasSignatureField = editorRef.current?.querySelector('[data-bind="surgeonSignature"]');
|
||
if (hasSignatureField) {
|
||
const hasSignatureImage = !!currentUser?.signature;
|
||
if (!hasSignatureImage) {
|
||
const proceed = window.confirm('提示：模板中包含【手术者签名】字段，但您的账号尚未上传电子签名图片。报告中将不显示签名图片，是否继续完成？');
|
||
if (!proceed) return;
|
||
}
|
||
}
|
||
}
|
||
|
||
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: Report[];
|
||
if (reportId) {
|
||
const old = reports.find(r => r.id === reportId);
|
||
const history = old?.history ? [...old.history] : [];
|
||
if (old) {
|
||
history.push({
|
||
content: old.content,
|
||
updatedAt: old.updatedAt || old.createdAt,
|
||
updatedBy: currentUser?.name || currentUser?.username || '',
|
||
action: status === 'completed' ? 'complete_report' : 'save_draft'
|
||
});
|
||
}
|
||
updatedReports = reports.map(r => r.id === reportId ? { ...finalReport, history } : r);
|
||
} else {
|
||
updatedReports = [...reports, finalReport];
|
||
if (draftKey) storage.remove(draftKey);
|
||
}
|
||
|
||
storage.set('reports', updatedReports);
|
||
if (draftKey) storage.remove(draftKey);
|
||
setIsSaved(true);
|
||
setTimeout(() => setIsSaved(false), 3000);
|
||
if (status === 'completed') navigate('/report-manage');
|
||
};
|
||
|
||
const handleEditorInput = (e: React.FormEvent<HTMLDivElement>) => {
|
||
if (editorRef.current) {
|
||
contentRef.current = editorRef.current.innerHTML;
|
||
}
|
||
updatePageHeight();
|
||
saveDraftToStorage();
|
||
|
||
const target = e.target as HTMLElement;
|
||
if (target && target.hasAttribute('data-bind')) {
|
||
const fieldKey = target.getAttribute('data-bind')!;
|
||
const newValue = target.innerText;
|
||
|
||
const fieldDef = formFields.find(f => f.key === fieldKey);
|
||
if (fieldKey === 'startTime') {
|
||
let raw = newValue;
|
||
if (fieldDef?.timeFormat && (fieldDef.timeFormat.includes('hh') || fieldDef.timeFormat.includes('A'))) {
|
||
raw = parseTimeFromFormat(newValue, fieldDef.timeFormat);
|
||
}
|
||
const parts = raw.split(':');
|
||
setReportData((prev) => {
|
||
const next = { ...prev, startHour: parts[0] || '', startMinute: parts[1] || '' };
|
||
stateRef.current = { ...stateRef.current, reportData: next };
|
||
return next;
|
||
});
|
||
} else if (fieldKey === 'endTime') {
|
||
let raw = newValue;
|
||
if (fieldDef?.timeFormat && (fieldDef.timeFormat.includes('hh') || fieldDef.timeFormat.includes('A'))) {
|
||
raw = parseTimeFromFormat(newValue, fieldDef.timeFormat);
|
||
}
|
||
const parts = raw.split(':');
|
||
setReportData((prev) => {
|
||
const next = { ...prev, endHour: parts[0] || '', endMinute: parts[1] || '' };
|
||
stateRef.current = { ...stateRef.current, reportData: next };
|
||
return next;
|
||
});
|
||
} else {
|
||
let raw = newValue;
|
||
if (fieldDef?.type === 'date') {
|
||
raw = parseDateFromFormat(newValue, fieldDef.timeFormat);
|
||
} else if (fieldDef?.type === 'time') {
|
||
raw = parseTimeFromFormat(newValue, fieldDef.timeFormat);
|
||
}
|
||
setReportData((prev) => {
|
||
const next = { ...prev, [fieldKey]: raw };
|
||
stateRef.current = { ...stateRef.current, reportData: next };
|
||
return next;
|
||
});
|
||
}
|
||
}
|
||
};
|
||
|
||
// Sync form state -> rich text field values
|
||
useEffect(() => {
|
||
if (!editorRef.current) return;
|
||
const bindNodes = editorRef.current.querySelectorAll('[data-bind]');
|
||
bindNodes.forEach((node) => {
|
||
const el = node as HTMLElement;
|
||
const fieldKey = el.getAttribute('data-bind')!;
|
||
|
||
if (fieldKey === 'surgeonSignature') {
|
||
const signatureData = currentUser?.signature;
|
||
if (signatureData) {
|
||
const imgHtml = `<img src="${signatureData}" class="report-signature-img" alt="签名" draggable="false" />`;
|
||
if (el.innerHTML !== imgHtml) {
|
||
el.innerHTML = imgHtml;
|
||
el.style.border = 'none';
|
||
el.style.backgroundColor = 'transparent';
|
||
}
|
||
} else {
|
||
const placeholder = '【请上传电子签】';
|
||
if (el.innerText !== placeholder) {
|
||
el.innerText = placeholder;
|
||
el.style.border = '';
|
||
el.style.backgroundColor = '';
|
||
}
|
||
}
|
||
return;
|
||
}
|
||
|
||
let newValue = '';
|
||
const fieldDef = formFields.find(f => f.key === fieldKey);
|
||
if (fieldKey === 'startTime') {
|
||
newValue = `${reportData.startHour || ''}:${reportData.startMinute || ''}`;
|
||
if (newValue === ':') newValue = '';
|
||
newValue = formatTimeDisplay(newValue, fieldDef?.timeFormat);
|
||
} else if (fieldKey === 'endTime') {
|
||
newValue = `${reportData.endHour || ''}:${reportData.endMinute || ''}`;
|
||
if (newValue === ':') newValue = '';
|
||
newValue = formatTimeDisplay(newValue, fieldDef?.timeFormat);
|
||
} else {
|
||
const rawValue = (reportData as any)[fieldKey];
|
||
if (Array.isArray(rawValue)) {
|
||
newValue = rawValue.join(', ');
|
||
} else if (rawValue !== undefined && rawValue !== null) {
|
||
newValue = String(rawValue);
|
||
}
|
||
if (fieldDef?.type === 'date') {
|
||
newValue = formatDateDisplay(newValue, fieldDef.timeFormat);
|
||
} else if (fieldDef?.type === 'time') {
|
||
newValue = formatTimeDisplay(newValue, fieldDef.timeFormat);
|
||
}
|
||
}
|
||
|
||
if (el.innerText !== newValue) {
|
||
el.innerText = newValue;
|
||
}
|
||
});
|
||
}, [reportData]);
|
||
|
||
if (!currentUser) return null;
|
||
|
||
const hasVisibleTemplates = templates.length > 0;
|
||
|
||
return (
|
||
<div className="flex h-screen bg-bg overflow-hidden">
|
||
<Sidebar />
|
||
|
||
<div className="flex-1 flex flex-col overflow-hidden">
|
||
{/* Header */}
|
||
<header className="h-20 bg-white border-b border-border flex items-center justify-between px-8 shrink-0">
|
||
<div className="flex items-center gap-4">
|
||
<button
|
||
onClick={() => navigate('/report-manage')}
|
||
className="p-2 rounded-lg hover:bg-slate-100 text-text-muted transition-colors"
|
||
>
|
||
<ChevronLeft size={24} />
|
||
</button>
|
||
<div>
|
||
<h1 className="text-lg font-bold text-text-main">图文报告生成</h1>
|
||
<p className="text-[10px] text-text-muted mt-0.5 uppercase tracking-wider font-bold">
|
||
{reportId ? `编辑报告: ${reportId}` : '新建手术报告'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-4">
|
||
<div className="flex items-center gap-1">
|
||
<span className="text-xs text-text-muted whitespace-nowrap">当前模板（及重置模板）：</span>
|
||
<select
|
||
value=""
|
||
onChange={(e) => {
|
||
const tplId = e.target.value;
|
||
const tpl = templates.find(t => t.id === tplId);
|
||
if (tpl && window.confirm(`确定要应用模板 "${tpl.name}" 吗？当前内容、基本信息、视频分析将被重置。`)) {
|
||
setPendingTemplateId(tplId);
|
||
}
|
||
}}
|
||
className="h-8 px-2 border border-border rounded-lg text-xs bg-white cursor-pointer focus:outline-hidden focus:border-accent"
|
||
>
|
||
<option value="" disabled>
|
||
{templates.find(t => t.id === loadedTemplateId)?.name || '无'}
|
||
</option>
|
||
{templates.map(tpl => (
|
||
<option key={tpl.id} value={tpl.id}>{tpl.name}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
{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-6 py-2.5 bg-slate-100 text-text-muted rounded-lg text-sm font-semibold hover:bg-slate-200 transition-colors"
|
||
>
|
||
保存草稿
|
||
</button>
|
||
<button
|
||
onClick={() => saveReport('completed')}
|
||
className="btn-accent inline-flex items-center gap-2"
|
||
>
|
||
<Check size={16} />
|
||
完成报告
|
||
</button>
|
||
<button
|
||
onClick={() => setExportModalOpen(true)}
|
||
className="p-2.5 rounded-lg bg-slate-100 text-text-muted hover:bg-slate-200 transition-colors"
|
||
title="下载"
|
||
>
|
||
<Download size={18} />
|
||
</button>
|
||
<button
|
||
onClick={() => editorRef.current && printDocument(editorRef.current.innerHTML)}
|
||
className="p-2.5 rounded-lg bg-slate-100 text-text-muted hover:bg-slate-200 transition-colors"
|
||
>
|
||
<Printer size={18} />
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div className="flex-1 flex overflow-hidden">
|
||
{/* Editor Main */}
|
||
<div className="flex-1 flex flex-col overflow-hidden border-r border-border">
|
||
{/* Toolbar */}
|
||
<div className="flex items-center gap-1 p-3 border-b border-border bg-slate-50 shrink-0 overflow-x-auto no-scrollbar">
|
||
<div className="flex gap-1 pr-3 mr-3 border-r border-border">
|
||
<button onClick={() => execCmd('undo')} className="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-white text-text-muted hover:text-text-main transition-colors" title="撤销"><Undo size={16} /></button>
|
||
<button onClick={() => execCmd('redo')} className="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-white text-text-muted hover:text-text-main transition-colors" title="重做"><Redo size={16} /></button>
|
||
</div>
|
||
<div className="flex gap-1 pr-3 mr-3 border-r border-border">
|
||
<select
|
||
onMouseDown={(e) => e.preventDefault()}
|
||
onChange={(e) => { execCmd('fontName', e.target.value); e.target.value = ''; }}
|
||
className="h-9 px-3 border border-border rounded-lg text-xs bg-white cursor-pointer focus:outline-hidden focus:border-accent"
|
||
>
|
||
<option value="">字体</option>
|
||
<option value="SimSun">宋体</option>
|
||
<option value="Microsoft YaHei">微软雅黑</option>
|
||
<option value="SimHei">黑体</option>
|
||
<option value="KaiTi">楷体</option>
|
||
</select>
|
||
<select
|
||
onMouseDown={(e) => e.preventDefault()}
|
||
onChange={(e) => { if (e.target.value) { execCmd('fontSize', e.target.value); } e.target.value = ''; }}
|
||
className="h-9 px-3 border border-border rounded-lg text-xs bg-white cursor-pointer focus:outline-hidden focus:border-accent"
|
||
>
|
||
<option value="">字号</option>
|
||
<option value="3">12pt</option>
|
||
<option value="4">14pt</option>
|
||
<option value="5">18pt</option>
|
||
<option value="6">24pt</option>
|
||
</select>
|
||
<select
|
||
onMouseDown={(e) => e.preventDefault()}
|
||
onChange={(e) => { if (e.target.value) { changeLineHeight(e.target.value); } e.target.value = ''; }}
|
||
className="h-9 px-3 border border-border rounded-lg text-xs bg-white cursor-pointer focus:outline-hidden focus:border-accent"
|
||
>
|
||
<option value="">行距</option>
|
||
<option value="1">1.0</option>
|
||
<option value="1.5">1.5</option>
|
||
<option value="2">2.0</option>
|
||
</select>
|
||
</div>
|
||
<div className="flex gap-1 pr-3 mr-3 border-r border-border">
|
||
<button onClick={() => execCmd('bold')} className="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-white text-text-muted hover:text-text-main transition-colors" title="粗体"><Bold size={16} /></button>
|
||
<button onClick={() => execCmd('italic')} className="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-white text-text-muted hover:text-text-main transition-colors" title="斜体"><Italic size={16} /></button>
|
||
<button onClick={() => execCmd('underline')} className="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-white text-text-muted hover:text-text-main transition-colors" title="下划线"><Underline size={16} /></button>
|
||
<div className="relative flex items-center">
|
||
<input
|
||
type="color"
|
||
onChange={(e) => execCmd('foreColor', e.target.value)}
|
||
className="w-9 h-9 p-1.5 bg-transparent border-none cursor-pointer rounded-lg hover:bg-white transition-colors"
|
||
title="文字颜色"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-1 pr-3 mr-3 border-r border-border">
|
||
<button onMouseDown={(e) => e.preventDefault()} onClick={() => changeAlignment('left')} className="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-white text-text-muted hover:text-text-main transition-colors" title="左对齐"><AlignLeft size={16} /></button>
|
||
<button onMouseDown={(e) => e.preventDefault()} onClick={() => changeAlignment('center')} className="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-white text-text-muted hover:text-text-main transition-colors" title="居中"><AlignCenter size={16} /></button>
|
||
<button onMouseDown={(e) => e.preventDefault()} onClick={() => changeAlignment('right')} className="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-white text-text-muted hover:text-text-main transition-colors" title="右对齐"><AlignRight size={16} /></button>
|
||
</div>
|
||
<div className="flex gap-1">
|
||
<button onClick={insertTable} className="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-white text-text-muted hover:text-text-main transition-colors" title="表格"><Table size={16} /></button>
|
||
<button onClick={insertImage} className="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-white text-text-muted hover:text-text-main transition-colors" title="插入图片占位符"><ImageIcon size={16} /></button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Editor Content */}
|
||
<div
|
||
className="editor-content-wrapper print-wrapper"
|
||
onDragOver={(e) => e.preventDefault()}
|
||
onDrop={(e) => {
|
||
const target = e.target as HTMLElement;
|
||
const placeholder = target.closest('.image-placeholder') as HTMLElement;
|
||
if (placeholder) handleDrop(e, placeholder);
|
||
}}
|
||
>
|
||
<div
|
||
ref={editorRef}
|
||
contentEditable
|
||
onInput={handleEditorInput}
|
||
onBlur={() => { contentRef.current = editorRef.current?.innerHTML || ''; saveDraftToStorage(); }}
|
||
className="editor-content print-content"
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right Sidebar */}
|
||
<aside className="w-[380px] bg-sidebar-bg flex flex-col shrink-0 overflow-hidden">
|
||
<div className="flex border-b border-border">
|
||
{(['info', 'video'] as const).map(tab => (
|
||
<button
|
||
key={tab}
|
||
onClick={() => { setActiveTab(tab); stateRef.current = { ...stateRef.current, activeTab: tab }; saveDraftToStorage(); }}
|
||
className={`flex-1 py-4 text-xs font-bold transition-all border-b-2 uppercase tracking-wider ${
|
||
activeTab === tab ? 'text-accent border-accent' : 'text-text-muted border-transparent hover:text-text-main'
|
||
}`}
|
||
>
|
||
{tab === 'info' ? '基本信息' : '视频分析'}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-y-auto p-6 space-y-8">
|
||
{activeTab === 'info' && (
|
||
<div className="report-info-form space-y-4">
|
||
{(() => {
|
||
const topKeys = ['patientName', 'hospitalId', 'title'];
|
||
const contentHtml = contentRef.current || editorRef.current?.innerHTML || '';
|
||
return [...formFields.filter(f => f.visibleInForm)].sort((a, b) => {
|
||
const aTop = topKeys.indexOf(a.key);
|
||
const bTop = topKeys.indexOf(b.key);
|
||
if (aTop !== -1 && bTop !== -1) return aTop - bTop;
|
||
if (aTop !== -1) return -1;
|
||
if (bTop !== -1) return 1;
|
||
const aIndex = contentHtml.indexOf(`data-bind="${a.key}"`);
|
||
const bIndex = contentHtml.indexOf(`data-bind="${b.key}"`);
|
||
if (aIndex === -1 && bIndex === -1) return 0;
|
||
if (aIndex === -1) return 1;
|
||
if (bIndex === -1) return -1;
|
||
return aIndex - bIndex;
|
||
});
|
||
})().map(field => {
|
||
const isRequired = field.isSystemLocked;
|
||
const hasError = isRequired && touched[field.key] && !(reportData as any)[field.key];
|
||
|
||
if (field.type === 'text' || field.type === 'date') {
|
||
const inputType = field.type === 'date' ? 'date' : 'text';
|
||
return (
|
||
<div key={field.key} id={`input-${field.key}`} onClick={() => setActiveFieldKey(field.key)} className={`${field.category === '填空' && formFields.filter(f2 => f2.visibleInForm && f2.type === 'text' && f2.isSystemLocked).length > 1 && (field.key === 'patientName' || field.key === 'hospitalId') ? 'flex-1 space-y-1' : 'space-y-1'} p-2 -mx-2 rounded-xl transition-all duration-300 ${activeFieldKey === field.key ? 'bg-blue-50 ring-1 ring-accent shadow-sm' : ''}`}>
|
||
<label className="block text-xs font-bold text-text-main">
|
||
{field.label} {isRequired && <span className="text-red-500">*</span>}
|
||
</label>
|
||
<input
|
||
type={inputType}
|
||
value={(reportData as any)[field.key] || ''}
|
||
onChange={(e) => { const next = { ...reportData, [field.key]: e.target.value }; setReportData(next); stateRef.current = { ...stateRef.current, reportData: next }; saveDraftToStorage(); }}
|
||
onBlur={() => setTouched(t => ({ ...t, [field.key]: true }))}
|
||
className={`input-minimal ${hasError ? 'border-red-500' : ''}`}
|
||
placeholder={field.label}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (field.type === 'single_select') {
|
||
const isOpen = openDropdown === field.key;
|
||
const opts = field.options || (field.key === 'anesthesiaType' ? anesthesiaOptions : []);
|
||
return (
|
||
<div key={field.key} id={`input-${field.key}`} onClick={() => setActiveFieldKey(field.key)} className={`space-y-1 select-dropdown-root relative p-2 -mx-2 rounded-xl transition-all duration-300 ${activeFieldKey === field.key ? 'bg-blue-50 ring-1 ring-accent shadow-sm' : ''}`}>
|
||
<label className="block text-xs font-bold text-text-main">{field.label}</label>
|
||
<div
|
||
className="w-full px-3 py-2 border border-border rounded-lg bg-white flex items-center min-h-[42px] cursor-text"
|
||
onClick={() => setOpenDropdown(field.key)}
|
||
>
|
||
<input
|
||
type="text"
|
||
className="outline-none text-sm flex-1 bg-transparent"
|
||
placeholder={`输入或选择${field.label}`}
|
||
value={(reportData as any)[field.key] || ''}
|
||
onChange={(e) => { const next = { ...reportData, [field.key]: e.target.value }; setReportData(next); stateRef.current = { ...stateRef.current, reportData: next }; saveDraftToStorage(); }}
|
||
onFocus={() => setOpenDropdown(field.key)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault();
|
||
const val = (e.target as HTMLInputElement).value.trim();
|
||
if (val) {
|
||
const next = { ...reportData, [field.key]: val };
|
||
setReportData(next);
|
||
stateRef.current = { ...stateRef.current, reportData: next };
|
||
saveDraftToStorage();
|
||
if (!opts.includes(val)) {
|
||
const updatedOpts = [...opts, val];
|
||
if (field.key === 'anesthesiaType') {
|
||
setAnesthesiaOptions(updatedOpts);
|
||
storage.set('anesthesiaOptions', updatedOpts);
|
||
}
|
||
const updatedFields = formFields.map(f => f.key === field.key ? { ...f, options: updatedOpts } : f);
|
||
setFormFields(updatedFields);
|
||
storage.set('formFieldsConfig', updatedFields);
|
||
}
|
||
setOpenDropdown(null);
|
||
}
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
{isOpen && (
|
||
<div className="absolute z-10 left-0 right-0 top-full mt-1 bg-white border border-border rounded-lg shadow-lg max-h-[150px] overflow-y-auto">
|
||
{opts.map(opt => (
|
||
<div
|
||
key={opt}
|
||
className="px-3 py-2 text-sm hover:bg-slate-50 cursor-pointer flex justify-between items-center"
|
||
onClick={() => { const next = { ...reportData, [field.key]: opt }; setReportData(next); stateRef.current = { ...stateRef.current, reportData: next }; saveDraftToStorage(); setOpenDropdown(null); }}
|
||
>
|
||
<span>{opt}</span>
|
||
<span
|
||
className="text-red-500 text-xs hover:bg-red-50 px-1 rounded"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
const updatedOpts = opts.filter(v => v !== opt);
|
||
if (field.key === 'anesthesiaType') {
|
||
setAnesthesiaOptions(updatedOpts);
|
||
storage.set('anesthesiaOptions', updatedOpts);
|
||
}
|
||
const updatedFields = formFields.map(f => f.key === field.key ? { ...f, options: updatedOpts } : f);
|
||
setFormFields(updatedFields);
|
||
storage.set('formFieldsConfig', updatedFields);
|
||
}}
|
||
>×</span>
|
||
</div>
|
||
))}
|
||
{opts.length === 0 && (
|
||
<div className="px-3 py-2 text-xs text-text-muted">暂无选项</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (field.type === 'multi_select') {
|
||
const isOpen = openDropdown === field.key;
|
||
const opts = field.options || multiSelectOptions[field.key] || [];
|
||
const rawValue = (reportData as any)[field.key];
|
||
const currentValues = Array.isArray(rawValue) ? rawValue : (rawValue ? [String(rawValue)] : []);
|
||
const displayText = currentValues.join(', ');
|
||
|
||
const parseMultiInput = (text: string): string[] => {
|
||
return Array.from(new Set(text.split(/[,，;；、]/).map(s => s.trim()).filter(Boolean)));
|
||
};
|
||
|
||
const handleMultiCommit = (text: string) => {
|
||
const values = parseMultiInput(text);
|
||
const next = { ...reportData, [field.key]: values };
|
||
setReportData(next);
|
||
stateRef.current = { ...stateRef.current, reportData: next };
|
||
saveDraftToStorage();
|
||
|
||
const currentOpts = field.options || multiSelectOptions[field.key] || [];
|
||
const newOpts = values.filter(v => !currentOpts.includes(v));
|
||
if (newOpts.length > 0) {
|
||
const mergedOpts = [...currentOpts, ...newOpts];
|
||
const nextMulti = { ...multiSelectOptions, [field.key]: mergedOpts };
|
||
setMultiSelectOptions(nextMulti);
|
||
storage.set('multiSelectOptions', nextMulti);
|
||
const fieldDef = formFields.find(f => f.key === field.key);
|
||
if (fieldDef) {
|
||
const updatedFields = formFields.map(f => f.key === field.key ? { ...f, options: mergedOpts } : f);
|
||
setFormFields(updatedFields);
|
||
storage.set('formFieldsConfig', updatedFields);
|
||
}
|
||
}
|
||
};
|
||
|
||
const currentInputText = multiInputText[field.key] !== undefined ? multiInputText[field.key] : displayText;
|
||
|
||
return (
|
||
<div key={field.key} id={`input-${field.key}`} onClick={() => setActiveFieldKey(field.key)} className={`space-y-1 select-dropdown-root relative p-2 -mx-2 rounded-xl transition-all duration-300 ${activeFieldKey === field.key ? 'bg-blue-50 ring-1 ring-accent shadow-sm' : ''}`}>
|
||
<label className="block text-xs font-bold text-text-main">{field.label}（可多选）</label>
|
||
<div
|
||
className="w-full px-3 py-2 border border-border rounded-lg bg-white flex flex-wrap gap-1 items-center min-h-[42px] cursor-text"
|
||
onClick={() => setOpenDropdown(field.key)}
|
||
>
|
||
<input
|
||
type="text"
|
||
className="outline-none text-sm w-full bg-transparent"
|
||
placeholder="输入或选择，多个用逗号分隔"
|
||
value={currentInputText}
|
||
onChange={(e) => {
|
||
setMultiInputText(prev => ({ ...prev, [field.key]: e.target.value }));
|
||
}}
|
||
onFocus={() => setOpenDropdown(field.key)}
|
||
onBlur={(e) => {
|
||
handleMultiCommit(e.target.value);
|
||
setMultiInputText(prev => {
|
||
const next = { ...prev };
|
||
delete next[field.key];
|
||
return next;
|
||
});
|
||
}}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault();
|
||
handleMultiCommit((e.target as HTMLInputElement).value);
|
||
setMultiInputText(prev => {
|
||
const next = { ...prev };
|
||
delete next[field.key];
|
||
return next;
|
||
});
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
{isOpen && (
|
||
<div className="absolute z-10 left-0 right-0 top-full mt-1 bg-white border border-border rounded-lg shadow-lg max-h-[150px] overflow-y-auto">
|
||
{opts.map(opt => (
|
||
<div
|
||
key={opt}
|
||
className="px-3 py-2 text-sm hover:bg-slate-50 cursor-pointer flex justify-between items-center"
|
||
onClick={() => {
|
||
const base = multiInputText[field.key] !== undefined ? multiInputText[field.key] : displayText;
|
||
const newText = base.length > 0 ? `${base}, ${opt}` : opt;
|
||
setMultiInputText(prev => ({ ...prev, [field.key]: newText }));
|
||
handleMultiCommit(newText);
|
||
setMultiInputText(prev => {
|
||
const next = { ...prev };
|
||
delete next[field.key];
|
||
return next;
|
||
});
|
||
}}
|
||
>
|
||
<span>{opt}</span>
|
||
<span
|
||
className="text-red-500 text-xs hover:bg-red-50 px-1 rounded"
|
||
onClick={(e) => { e.stopPropagation(); removeMultiOption(field.key, opt); }}
|
||
>×</span>
|
||
</div>
|
||
))}
|
||
{opts.length === 0 && (
|
||
<div className="px-3 py-2 text-xs text-text-muted">暂无选项</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (field.type === 'time') {
|
||
const is12h = field.timeFormat ? (field.timeFormat.includes('hh') || field.timeFormat.includes('A')) : false;
|
||
|
||
if (field.key === 'startTime' || field.key === 'endTime') {
|
||
const hourKey = field.key === 'startTime' ? 'startHour' : 'endHour';
|
||
const minuteKey = field.key === 'startTime' ? 'startMinute' : 'endMinute';
|
||
const h24val = parseInt((reportData as any)[hourKey]) || 0;
|
||
const m = (reportData as any)[minuteKey] || '';
|
||
const { h: h12, isPM } = from24h(h24val);
|
||
|
||
return (
|
||
<div key={field.key} id={`input-${field.key}`} onClick={() => setActiveFieldKey(field.key)} className={`space-y-1 p-2 -mx-2 rounded-xl transition-all duration-300 ${activeFieldKey === field.key ? 'bg-blue-50 ring-1 ring-accent shadow-sm' : ''}`}>
|
||
<label className="block text-xs font-bold text-text-main">{field.label}</label>
|
||
<div className="flex items-center gap-2">
|
||
<select
|
||
value={is12h ? String(h12).padStart(2, '0') : ((reportData as any)[hourKey] || '')}
|
||
onChange={(e) => {
|
||
let h24new = parseInt(e.target.value) || 0;
|
||
if (is12h) {
|
||
const currentPM = from24h(parseInt((reportData as any)[hourKey]) || 0).isPM;
|
||
h24new = to24h(h24new, currentPM);
|
||
}
|
||
const next = { ...reportData, [hourKey]: String(h24new).padStart(2, '0') };
|
||
setReportData(next); stateRef.current = { ...stateRef.current, reportData: next }; saveDraftToStorage();
|
||
}}
|
||
className="input-minimal bg-white flex-1"
|
||
>
|
||
<option value="">--</option>
|
||
{(is12h ? hour12Options : hourOptions).map(h => <option key={h} value={h}>{h}</option>)}
|
||
</select>
|
||
<span className="text-text-muted">:</span>
|
||
<select
|
||
value={m}
|
||
onChange={(e) => { const next = { ...reportData, [minuteKey]: e.target.value }; setReportData(next); stateRef.current = { ...stateRef.current, reportData: next }; saveDraftToStorage(); }}
|
||
className="input-minimal bg-white flex-1"
|
||
>
|
||
<option value="">--</option>
|
||
{minuteOptions.map(mo => <option key={mo} value={mo}>{mo}</option>)}
|
||
</select>
|
||
{is12h && (
|
||
<select
|
||
value={isPM ? '下午' : '上午'}
|
||
onChange={(e) => {
|
||
const isPMnew = e.target.value === '下午';
|
||
const currentH12 = from24h(parseInt((reportData as any)[hourKey]) || 0).h;
|
||
const h24new = to24h(currentH12, isPMnew);
|
||
const next = { ...reportData, [hourKey]: String(h24new).padStart(2, '0') };
|
||
setReportData(next); stateRef.current = { ...stateRef.current, reportData: next }; saveDraftToStorage();
|
||
}}
|
||
className="input-minimal bg-white flex-1"
|
||
>
|
||
<option value="上午">上午</option>
|
||
<option value="下午">下午</option>
|
||
</select>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 通用 time 字段
|
||
const timeVal = (reportData as any)[field.key] || '';
|
||
const [h24str, mstr] = timeVal.split(':');
|
||
const h24 = parseInt(h24str) || 0;
|
||
const m = mstr || '';
|
||
const { h: h12g, isPM: isPMg } = from24h(h24);
|
||
|
||
return (
|
||
<div key={field.key} id={`input-${field.key}`} onClick={() => setActiveFieldKey(field.key)} className={`space-y-1 p-2 -mx-2 rounded-xl transition-all duration-300 ${activeFieldKey === field.key ? 'bg-blue-50 ring-1 ring-accent shadow-sm' : ''}`}>
|
||
<label className="block text-xs font-bold text-text-main">{field.label}</label>
|
||
<div className="flex items-center gap-2">
|
||
<select
|
||
value={is12h ? String(h12g).padStart(2, '0') : (h24str || '')}
|
||
onChange={(e) => {
|
||
let h24new = parseInt(e.target.value) || 0;
|
||
if (is12h) h24new = to24h(h24new, isPMg);
|
||
const nextVal = `${String(h24new).padStart(2, '0')}:${m || '00'}`;
|
||
const next = { ...reportData, [field.key]: nextVal };
|
||
setReportData(next); stateRef.current = { ...stateRef.current, reportData: next }; saveDraftToStorage();
|
||
}}
|
||
className="input-minimal bg-white flex-1"
|
||
>
|
||
<option value="">--</option>
|
||
{(is12h ? hour12Options : hourOptions).map(h => <option key={h} value={h}>{h}</option>)}
|
||
</select>
|
||
<span className="text-text-muted">:</span>
|
||
<select
|
||
value={m}
|
||
onChange={(e) => {
|
||
const nextVal = `${String(h24).padStart(2, '0')}:${e.target.value}`;
|
||
const next = { ...reportData, [field.key]: nextVal };
|
||
setReportData(next); stateRef.current = { ...stateRef.current, reportData: next }; saveDraftToStorage();
|
||
}}
|
||
className="input-minimal bg-white flex-1"
|
||
>
|
||
<option value="">--</option>
|
||
{minuteOptions.map(mo => <option key={mo} value={mo}>{mo}</option>)}
|
||
</select>
|
||
{is12h && (
|
||
<select
|
||
value={isPMg ? '下午' : '上午'}
|
||
onChange={(e) => {
|
||
const isPMnew = e.target.value === '下午';
|
||
const h24new = to24h(h12g, isPMnew);
|
||
const nextVal = `${String(h24new).padStart(2, '0')}:${m || '00'}`;
|
||
const next = { ...reportData, [field.key]: nextVal };
|
||
setReportData(next); stateRef.current = { ...stateRef.current, reportData: next }; saveDraftToStorage();
|
||
}}
|
||
className="input-minimal bg-white flex-1"
|
||
>
|
||
<option value="上午">上午</option>
|
||
<option value="下午">下午</option>
|
||
</select>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return null;
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'video' && (
|
||
<div className="space-y-2">
|
||
<input
|
||
ref={videoInputRef}
|
||
type="file"
|
||
accept="video/*"
|
||
multiple
|
||
className="hidden"
|
||
onChange={handleVideoUpload}
|
||
/>
|
||
|
||
<div className="flex gap-2 overflow-x-auto pb-2 no-scrollbar items-center">
|
||
{videos.map((v, i) => (
|
||
<div
|
||
key={v.id}
|
||
className={`shrink-0 w-24 p-1.5 border-2 rounded-xl cursor-pointer transition-all relative group ${
|
||
currentVideoIndex === i ? 'border-accent bg-white shadow-sm' : 'border-transparent'
|
||
}`}
|
||
>
|
||
<div
|
||
onClick={() => selectVideo(i)}
|
||
className="aspect-video bg-slate-900 rounded-lg flex items-center justify-center text-white"
|
||
>
|
||
<Play size={16} />
|
||
</div>
|
||
<div
|
||
onClick={() => selectVideo(i)}
|
||
className="text-[9px] font-bold text-text-main truncate mt-1.5 px-1"
|
||
>{v.name}</div>
|
||
<button
|
||
onClick={() => removeVideo(v.id)}
|
||
className="absolute -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center text-[10px] opacity-0 group-hover:opacity-100 transition-all shadow-sm"
|
||
>
|
||
<X size={12} />
|
||
</button>
|
||
</div>
|
||
))}
|
||
<button
|
||
onClick={() => videoInputRef.current?.click()}
|
||
className="shrink-0 w-24 h-[68px] flex flex-col items-center justify-center gap-1 border-2 border-dashed border-border rounded-xl hover:border-accent hover:bg-slate-50 transition-all text-text-muted hover:text-accent"
|
||
>
|
||
<Video size={18} />
|
||
<span className="text-[10px] font-bold">上传视频</span>
|
||
</button>
|
||
</div>
|
||
|
||
{currentVideoIndex !== -1 && videos.length > 0 && (
|
||
<div className="space-y-2">
|
||
<div className="relative bg-slate-900 rounded-2xl overflow-hidden aspect-video shadow-lg">
|
||
<video
|
||
ref={videoRef}
|
||
src={videos[currentVideoIndex].url}
|
||
className="w-full h-full"
|
||
onTimeUpdate={() => setCurrentTime(videoRef.current?.currentTime || 0)}
|
||
onLoadedMetadata={() => {
|
||
const dur = videoRef.current?.duration || 0;
|
||
setDuration(dur);
|
||
setVideos(prev => prev.map((v, i) => i === currentVideoIndex ? { ...v, duration: dur } : v));
|
||
}}
|
||
/>
|
||
{!isPlaying && (
|
||
<div className="absolute inset-0 flex items-center justify-center bg-black/40 cursor-pointer" onClick={togglePlay}>
|
||
<div className="w-16 h-16 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center text-white">
|
||
<Play size={32} fill="currentColor" />
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div className="absolute bottom-4 right-4 bg-black/60 backdrop-blur-md text-white text-[10px] font-bold px-3 py-1.5 rounded-full">
|
||
{formatTime(currentTime)} / {formatTime(duration)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-4">
|
||
<button onClick={togglePlay} className="w-10 h-10 flex items-center justify-center bg-slate-100 rounded-xl text-text-main hover:bg-slate-200 transition-colors">
|
||
{isPlaying ? <Pause size={18} /> : <Play size={18} />}
|
||
</button>
|
||
<div className="flex-1 h-2 bg-slate-100 rounded-full overflow-hidden cursor-pointer relative" onClick={(e) => {
|
||
const rect = e.currentTarget.getBoundingClientRect();
|
||
const pos = (e.clientX - rect.left) / rect.width;
|
||
if (videoRef.current) videoRef.current.currentTime = pos * duration;
|
||
}}>
|
||
<div className="h-full bg-accent" style={{ width: `${(currentTime / duration) * 100}%` }} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex justify-between items-center pt-1 border-t border-border">
|
||
<span className="text-[10px] font-bold text-text-main uppercase tracking-wider">关键帧摘取</span>
|
||
<button
|
||
onClick={captureFrame}
|
||
className="px-4 py-2 bg-accent text-white rounded-lg text-[10px] font-bold uppercase tracking-wider hover:bg-blue-700 transition-colors shadow-sm"
|
||
>
|
||
截取当前帧
|
||
</button>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-3 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
|
||
{capturedFrames.filter(f => f.videoIndex === currentVideoIndex).map((frame) => (
|
||
<div
|
||
key={frame.id}
|
||
draggable
|
||
onDragStart={(e) => handleDragStart(e, frame)}
|
||
onClick={() => seekToFrame(frame)}
|
||
className={`group relative card-minimal p-1 border-2 cursor-grab active:cursor-grabbing hover:shadow-md transition-all ${
|
||
frame.isManual ? 'border-yellow-400 hover:border-yellow-500' : 'border-transparent hover:border-accent'
|
||
}`}
|
||
>
|
||
<div className="relative">
|
||
<img src={frame.dataUrl} className="w-full aspect-video object-cover rounded-lg" />
|
||
{frame.isManual && <span className="manual-frame-badge">手动</span>}
|
||
</div>
|
||
<div className="text-[9px] font-bold text-text-muted mt-1.5 px-1 flex justify-between items-center">
|
||
<span>{frame.timeFormatted}</span>
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
onClick={(e) => { e.stopPropagation(); insertFrameToPlaceholder(frame); }}
|
||
className="px-2 py-0.5 bg-accent text-white text-[9px] font-bold rounded-full shadow-sm opacity-0 group-hover:opacity-100 transition-opacity hover:bg-blue-700"
|
||
>
|
||
插入
|
||
</button>
|
||
<span className="text-accent opacity-0 group-hover:opacity-100 transition-opacity">可拖拽</span>
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={(e) => { e.stopPropagation(); setCapturedFrames(prev => prev.filter(f => f.id !== frame.id).sort((a, b) => a.time - b.time)); saveDraftToStorage(); }}
|
||
className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-all shadow-md"
|
||
>
|
||
<X size={14} />
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<p className="text-[10px] text-text-muted text-center">
|
||
提示：点击关键帧可跳转视频位置，按键盘 ← → 键可微调进度
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
<canvas ref={canvasRef} className="hidden" />
|
||
|
||
{placeholderModal.isOpen && (
|
||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
|
||
<div className="bg-white rounded-2xl p-6 w-full max-w-[360px] shadow-2xl border border-border">
|
||
<h3 className="text-lg font-bold text-text-main mb-4">插入图片占位符</h3>
|
||
<div className="space-y-3">
|
||
<div className="flex gap-2">
|
||
<div className="flex-1">
|
||
<label className="block text-xs mb-1">宽度(px)</label>
|
||
<input type="number" value={placeholderModal.width} onChange={e => setPlaceholderModal({...placeholderModal, width: e.target.value})} className="w-full px-2 py-1 text-xs border border-border rounded" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<label className="block text-xs mb-1">高度(px)</label>
|
||
<input type="number" value={placeholderModal.height} onChange={e => setPlaceholderModal({...placeholderModal, height: e.target.value})} className="w-full px-2 py-1 text-xs border border-border rounded" />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label className="block text-xs mb-1">占位符类型</label>
|
||
<div className="flex gap-2">
|
||
<button onClick={() => setPlaceholderModal({...placeholderModal, mode: 'frame'})} className={`flex-1 py-1.5 text-xs rounded border ${placeholderModal.mode === 'frame' ? 'bg-accent text-white border-accent' : 'bg-white text-slate-600 border-border'}`}>手术影像占位<br/><span className="text-[10px] opacity-80">（支持自动/拖拽插入）</span></button>
|
||
<button onClick={() => setPlaceholderModal({...placeholderModal, mode: 'manual'})} className={`flex-1 py-1.5 text-xs rounded border ${placeholderModal.mode === 'manual' ? 'bg-accent text-white border-accent' : 'bg-white text-slate-600 border-border'}`}>静态图片占位<br/><span className="text-[10px] opacity-80">（仅支持点击插入）</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-5 flex justify-end gap-2">
|
||
<button onClick={() => setPlaceholderModal({...placeholderModal, isOpen: false})} className="px-4 py-2 bg-slate-100 text-slate-600 rounded text-sm">取消</button>
|
||
<button onClick={() => {
|
||
const sel = window.getSelection();
|
||
let node: Node | null = sel?.anchorNode ?? null;
|
||
let inTable = false;
|
||
while (node) {
|
||
if ((node as Element).nodeName === 'TD' || (node as Element).nodeName === 'TH') {
|
||
inTable = true;
|
||
break;
|
||
}
|
||
node = node.parentNode;
|
||
}
|
||
const w = parseInt(placeholderModal.width) || 200;
|
||
const h = parseInt(placeholderModal.height) || 200;
|
||
const modeAttr = placeholderModal.mode === 'manual' ? ' data-mode="manual"' : '';
|
||
const hintText = '插入/点击放置图片';
|
||
const id = 'ph_' + Date.now();
|
||
let html: string;
|
||
if (inTable) {
|
||
const styleStr = 'position:relative;display:flex;align-items:center;justify-content:center;border:1px dashed #cbd5e1;background:#f8fafc;cursor:pointer;width:100%;height:100%;max-width:200px;max-height:200px;min-height:60px;margin:0 auto;';
|
||
html = `<div id="${id}" class="image-placeholder" data-placeholder="true" contenteditable="false"${modeAttr} style="${styleStr}"><span class="delete-btn" contenteditable="false">×</span><span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:block;width:100%;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">${hintText}</span></div>`;
|
||
} else {
|
||
let styleStr = 'display:inline-block;text-align:center;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;position:relative;';
|
||
styleStr += `width:${w}px;height:${h}px;max-width:${w}px;max-height:${h}px;line-height:${h}px;`;
|
||
const showShortText = w > 0 && w < 80;
|
||
const text = showShortText ? '插图' : hintText;
|
||
html = `<span id="${id}" class="image-placeholder" data-placeholder="true" contenteditable="false"${modeAttr} style="${styleStr}"><span class="delete-btn" contenteditable="false">×</span><span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:block;width:100%;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">${text}</span></span>​`;
|
||
}
|
||
execCmd('insertHTML', html);
|
||
setPlaceholderModal({...placeholderModal, isOpen: false});
|
||
}} className="px-4 py-2 bg-accent text-white rounded text-sm">确认插入</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{tableModal.isOpen && (
|
||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
|
||
<div className="bg-white rounded-2xl p-6 w-full max-w-[360px] shadow-2xl border border-border">
|
||
<h3 className="text-lg font-bold text-text-main mb-4">插入表格</h3>
|
||
<div className="space-y-3">
|
||
<div className="flex gap-2">
|
||
<div className="flex-1">
|
||
<label className="block text-xs mb-1">行数</label>
|
||
<input type="number" min="1" value={tableModal.rows} onChange={e => setTableModal({...tableModal, rows: e.target.value})} className="w-full px-2 py-1 text-xs border border-border rounded" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<label className="block text-xs mb-1">列数</label>
|
||
<input type="number" min="1" value={tableModal.cols} onChange={e => setTableModal({...tableModal, cols: e.target.value})} className="w-full px-2 py-1 text-xs border border-border rounded" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-5 flex justify-end gap-2">
|
||
<button onClick={() => setTableModal({...tableModal, isOpen: false})} className="px-4 py-2 bg-slate-100 text-slate-600 rounded text-sm">取消</button>
|
||
<button onClick={() => {
|
||
const rows = parseInt(tableModal.rows);
|
||
const cols = parseInt(tableModal.cols);
|
||
if (isNaN(rows) || isNaN(cols) || rows < 1 || cols < 1) {
|
||
setTableModal({...tableModal, isOpen: false});
|
||
return;
|
||
}
|
||
let table = '<table style="width: 100%; border-collapse: collapse; margin: 16px 0; table-layout: fixed;">';
|
||
for (let i = 0; i < rows; i++) {
|
||
table += '<tr>';
|
||
for (let j = 0; j < cols; j++) {
|
||
table += '<td style="padding: 8px; border: 1px solid #e2e8f0; vertical-align: top;">单元格</td>';
|
||
}
|
||
table += '</tr>';
|
||
}
|
||
table += '</table><p></p>';
|
||
execCmd('insertHTML', table);
|
||
setTableModal({...tableModal, isOpen: false});
|
||
}} className="px-4 py-2 bg-accent text-white rounded text-sm">确认插入</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{exportModalOpen && (
|
||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
|
||
<div className="bg-white rounded-2xl p-6 w-full max-w-[360px] shadow-2xl border border-border">
|
||
<h3 className="text-lg font-bold text-text-main mb-4">导出报告</h3>
|
||
<div className="space-y-3">
|
||
<button
|
||
onClick={() => {
|
||
const ts = new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().replace(/[:.]/g, '-').slice(0, 16);
|
||
const title = reportData.title || '无标题';
|
||
const patient = reportData.patientName || '未知';
|
||
const hid = reportData.hospitalId || '无号';
|
||
printDocument(editorRef.current?.innerHTML || '', `图文报告-${title}-${patient}-${hid}-${ts}`);
|
||
setExportModalOpen(false);
|
||
}}
|
||
className="w-full py-2.5 bg-accent text-white rounded text-sm font-semibold hover:opacity-90 transition-colors"
|
||
>导出 PDF</button>
|
||
<button
|
||
onClick={() => {
|
||
const ts = new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().replace(/[:.]/g, '-').slice(0, 16);
|
||
const title = reportData.title || '无标题';
|
||
const patient = reportData.patientName || '未知';
|
||
const hid = reportData.hospitalId || '无号';
|
||
const blob = new Blob([JSON.stringify(reportData, null, 2)], { type: 'application/json' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = `图文报告-${title}-${patient}-${hid}-${ts}.json`;
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
setExportModalOpen(false);
|
||
}}
|
||
className="w-full py-2.5 bg-slate-100 text-slate-700 rounded text-sm font-semibold hover:bg-slate-200 transition-colors"
|
||
>导出 JSON</button>
|
||
<button
|
||
onClick={() => setExportModalOpen(false)}
|
||
className="w-full py-2.5 border border-border text-text-main rounded text-sm font-semibold hover:bg-slate-50 transition-colors"
|
||
>取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{imagePickerOpen && imagePickerTarget && (
|
||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
|
||
<div className="bg-white rounded-2xl p-6 w-full max-w-[360px] shadow-2xl border border-border">
|
||
<h3 className="text-lg font-bold text-text-main mb-4">选择图片来源</h3>
|
||
<div className="space-y-3">
|
||
<button
|
||
onClick={() => {
|
||
const input = document.createElement('input');
|
||
input.type = 'file';
|
||
input.accept = 'image/*';
|
||
input.onchange = (ev) => {
|
||
const file = (ev.target as HTMLInputElement).files?.[0];
|
||
if (file) {
|
||
const reader = new FileReader();
|
||
reader.onload = (event) => {
|
||
const src = event.target?.result as string;
|
||
fillPlaceholderSrc(imagePickerTarget, src);
|
||
setImagePickerOpen(false);
|
||
setImagePickerTarget(null);
|
||
};
|
||
reader.readAsDataURL(file);
|
||
}
|
||
};
|
||
input.click();
|
||
}}
|
||
className="w-full py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded text-sm font-semibold"
|
||
>本地上传</button>
|
||
<button
|
||
onClick={() => {
|
||
if (currentUser?.signature) {
|
||
fillPlaceholderSrc(imagePickerTarget, currentUser.signature);
|
||
}
|
||
setImagePickerOpen(false);
|
||
setImagePickerTarget(null);
|
||
}}
|
||
disabled={!currentUser?.signature}
|
||
className={`w-full py-2 rounded text-sm font-semibold ${currentUser?.signature ? 'bg-slate-100 hover:bg-slate-200 text-slate-700' : 'bg-slate-50 text-slate-400 cursor-not-allowed'}`}
|
||
>我的签名 {!currentUser?.signature && '(未上传)'}</button>
|
||
<div>
|
||
<div className="text-xs text-slate-500 mb-2">系统素材</div>
|
||
<div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto">
|
||
{imageAssets.map(asset => (
|
||
<button
|
||
key={asset.id}
|
||
onClick={() => { fillPlaceholderSrc(imagePickerTarget, asset.dataUrl); setImagePickerOpen(false); setImagePickerTarget(null); }}
|
||
className="w-16 h-16 border rounded overflow-hidden hover:ring-2 ring-accent"
|
||
>
|
||
<img src={asset.dataUrl} alt={asset.name} className="w-full h-full object-cover" />
|
||
</button>
|
||
))}
|
||
{imageAssets.length === 0 && <div className="text-xs text-slate-400">暂无素材</div>}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-5 flex justify-end">
|
||
<button onClick={() => { setImagePickerOpen(false); setImagePickerTarget(null); }} className="px-4 py-2 bg-slate-100 text-slate-600 rounded text-sm">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|