6 Commits

16 changed files with 818 additions and 72 deletions

View File

@@ -55,6 +55,24 @@ export default function ReportEditor() {
const [activeTab, setActiveTab] = useState<'info' | 'video'>('info'); const [activeTab, setActiveTab] = useState<'info' | 'video'>('info');
const [activeFieldKey, setActiveFieldKey] = useState<string | null>(null); 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 = '#f8fafc';
(el as HTMLElement).style.boxShadow = 'none';
});
if (activeFieldKey) {
const targetEl = editorRef.current.querySelector(`.field-value[data-bind="${activeFieldKey}"]`) as HTMLElement;
if (targetEl) {
targetEl.style.backgroundColor = '#eff6ff';
targetEl.style.boxShadow = '0 0 0 2px #3b82f6';
targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
}, [activeFieldKey]);
const [multiSelectOptions, setMultiSelectOptions] = useState<Record<string, string[]>>({ const [multiSelectOptions, setMultiSelectOptions] = useState<Record<string, string[]>>({
surgeon: ['张医生', '李医生', '王医生'], surgeon: ['张医生', '李医生', '王医生'],
assistant: ['赵医生', '钱医生', '孙医生'], assistant: ['赵医生', '钱医生', '孙医生'],
@@ -426,7 +444,7 @@ export default function ReportEditor() {
const text = w > 0 && w < 80 ? '插图' : '插入/点击放置图片'; const text = w > 0 && w < 80 ? '插图' : '插入/点击放置图片';
placeholder.innerHTML = ` placeholder.innerHTML = `
<span class="delete-btn" contenteditable="false">×</span> <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%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">${text}</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.border = '1px dashed #cbd5e1';
placeholder.style.background = '#f8fafc'; placeholder.style.background = '#f8fafc';
@@ -1525,7 +1543,7 @@ export default function ReportEditor() {
if (field.type === 'text' || field.type === 'date') { if (field.type === 'text' || field.type === 'date') {
const inputType = field.type === 'date' ? 'date' : 'text'; const inputType = field.type === 'date' ? 'date' : 'text';
return ( return (
<div key={field.key} id={`input-${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' : ''}`}> <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"> <label className="block text-xs font-bold text-text-main">
{field.label} {isRequired && <span className="text-red-500">*</span>} {field.label} {isRequired && <span className="text-red-500">*</span>}
</label> </label>
@@ -1545,7 +1563,7 @@ export default function ReportEditor() {
const isOpen = openDropdown === field.key; const isOpen = openDropdown === field.key;
const opts = field.options || (field.key === 'anesthesiaType' ? anesthesiaOptions : []); const opts = field.options || (field.key === 'anesthesiaType' ? anesthesiaOptions : []);
return ( return (
<div key={field.key} id={`input-${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' : ''}`}> <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> <label className="block text-xs font-bold text-text-main">{field.label}</label>
<div <div
className="w-full px-3 py-2 border border-border rounded-lg bg-white flex items-center min-h-[42px] cursor-text" className="w-full px-3 py-2 border border-border rounded-lg bg-white flex items-center min-h-[42px] cursor-text"
@@ -1654,7 +1672,7 @@ export default function ReportEditor() {
const currentInputText = multiInputText[field.key] !== undefined ? multiInputText[field.key] : displayText; const currentInputText = multiInputText[field.key] !== undefined ? multiInputText[field.key] : displayText;
return ( return (
<div key={field.key} id={`input-${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' : ''}`}> <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> <label className="block text-xs font-bold text-text-main">{field.label}</label>
<div <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" 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"
@@ -1735,7 +1753,7 @@ export default function ReportEditor() {
const { h: h12, isPM } = from24h(h24val); const { h: h12, isPM } = from24h(h24val);
return ( return (
<div key={field.key} id={`input-${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' : ''}`}> <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> <label className="block text-xs font-bold text-text-main">{field.label}</label>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<select <select
@@ -1792,7 +1810,7 @@ export default function ReportEditor() {
const { h: h12g, isPM: isPMg } = from24h(h24); const { h: h12g, isPM: isPMg } = from24h(h24);
return ( return (
<div key={field.key} id={`input-${field.key}`} className="space-y-1"> <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> <label className="block text-xs font-bold text-text-main">{field.label}</label>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<select <select
@@ -2036,13 +2054,13 @@ export default function ReportEditor() {
let html: string; let html: string;
if (inTable) { 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;'; 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%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">${hintText}</span></div>`; 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 { } 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;'; 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;`; 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 showShortText = w > 0 && w < 80;
const text = showShortText ? '插图' : hintText; 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%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">${text}</span></span>&#8203;`; 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>&#8203;`;
} }
execCmd('insertHTML', html); execCmd('insertHTML', html);
setPlaceholderModal({...placeholderModal, isOpen: false}); setPlaceholderModal({...placeholderModal, isOpen: false});
@@ -2101,7 +2119,7 @@ export default function ReportEditor() {
<div className="space-y-3"> <div className="space-y-3">
<button <button
onClick={() => { onClick={() => {
const ts = new Date().toISOString().replace(/[:.]/g, '-'); const ts = new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().replace(/[:.]/g, '-').slice(0, 16);
const title = reportData.title || '无标题'; const title = reportData.title || '无标题';
const patient = reportData.patientName || '未知'; const patient = reportData.patientName || '未知';
const hid = reportData.hospitalId || '无号'; const hid = reportData.hospitalId || '无号';
@@ -2112,7 +2130,7 @@ export default function ReportEditor() {
> PDF</button> > PDF</button>
<button <button
onClick={() => { onClick={() => {
const ts = new Date().toISOString().replace(/[:.]/g, '-'); const ts = new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().replace(/[:.]/g, '-').slice(0, 16);
const title = reportData.title || '无标题'; const title = reportData.title || '无标题';
const patient = reportData.patientName || '未知'; const patient = reportData.patientName || '未知';
const hid = reportData.hospitalId || '无号'; const hid = reportData.hospitalId || '无号';

View File

@@ -178,7 +178,7 @@ export default function ReportManage() {
const exportBulkJSON = () => { const exportBulkJSON = () => {
const selectedReports = reports.filter(r => selectedIds.includes(r.id)); const selectedReports = reports.filter(r => selectedIds.includes(r.id));
const data = selectedReports.map(r => buildExportData(r)); const data = selectedReports.map(r => buildExportData(r));
const timestamp = new Date().toISOString().replace(/[:.]/g, '-'); const timestamp = new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().replace(/[:.]/g, '-').slice(0, 16);
downloadJSON(data, `reports_export_${timestamp}.json`); downloadJSON(data, `reports_export_${timestamp}.json`);
}; };

View File

@@ -37,11 +37,11 @@ export default function TemplateManage() {
const [editFieldTimeFormat, setEditFieldTimeFormat] = useState(''); const [editFieldTimeFormat, setEditFieldTimeFormat] = useState('');
const [editFieldTimeDefault, setEditFieldTimeDefault] = useState<'current' | 'specific'>('specific'); const [editFieldTimeDefault, setEditFieldTimeDefault] = useState<'current' | 'specific'>('specific');
const [editFieldFixedTimeValue, setEditFieldFixedTimeValue] = useState(''); const [editFieldFixedTimeValue, setEditFieldFixedTimeValue] = useState('');
const [editFieldHasUnderline, setEditFieldHasUnderline] = useState(true); const [editFieldHasUnderline, setEditFieldHasUnderline] = useState(false);
const [newFieldTimeFormat, setNewFieldTimeFormat] = useState('YYYY年MM月DD日'); const [newFieldTimeFormat, setNewFieldTimeFormat] = useState('YYYY年MM月DD日');
const [newFieldTimeDefault, setNewFieldTimeDefault] = useState<'current' | 'specific'>('specific'); const [newFieldTimeDefault, setNewFieldTimeDefault] = useState<'current' | 'specific'>('specific');
const [newFieldFixedTimeValue, setNewFieldFixedTimeValue] = useState(''); const [newFieldFixedTimeValue, setNewFieldFixedTimeValue] = useState('');
const [newFieldHasUnderline, setNewFieldHasUnderline] = useState(true); const [newFieldHasUnderline, setNewFieldHasUnderline] = useState(false);
const [customTimeFormats, setCustomTimeFormats] = useState<string[]>([]); const [customTimeFormats, setCustomTimeFormats] = useState<string[]>([]);
const [formatDropdownOpen, setFormatDropdownOpen] = useState(false); const [formatDropdownOpen, setFormatDropdownOpen] = useState(false);
const [newFormatDropdownOpen, setNewFormatDropdownOpen] = useState(false); const [newFormatDropdownOpen, setNewFormatDropdownOpen] = useState(false);
@@ -52,6 +52,7 @@ export default function TemplateManage() {
isOpen: false, rows: '2', cols: '3' isOpen: false, rows: '2', cols: '3'
}); });
const [imageAssets, setImageAssets] = useState<{ id: string; name: string; dataUrl: string }[]>([]); const [imageAssets, setImageAssets] = useState<{ id: string; name: string; dataUrl: string }[]>([]);
const [selectedIds, setSelectedIds] = useState<string[]>([]);
const updatePageHeight = () => { const updatePageHeight = () => {
if (!editorRef.current) return; if (!editorRef.current) return;
@@ -422,7 +423,7 @@ export default function TemplateManage() {
} }
pushHistory(); pushHistory();
const underlineClass = field.hasUnderline === false ? ' no-underline' : ''; const underlineClass = field.hasUnderline !== true ? ' no-underline' : '';
const html = `<span class="smart-field-wrapper" contenteditable="false" style="white-space:nowrap;position:relative;"><span class="field-value${underlineClass}" data-bind="${field.key}" contenteditable="true" style="min-width:32px;padding:0 4px;margin:0 2px;border:1px solid #cbd5e1;border-radius:2px;display:inline-block;background:#f8fafc;color:#0f172a;line-height:1.2;font-size:inherit;vertical-align:text-bottom;box-sizing:border-box;min-height:1.2em;outline:none;"> </span><span class="delete-btn" contenteditable="false">×</span></span>&#8203;`; const html = `<span class="smart-field-wrapper" contenteditable="false" style="white-space:nowrap;position:relative;"><span class="field-value${underlineClass}" data-bind="${field.key}" contenteditable="true" style="min-width:32px;padding:0 4px;margin:0 2px;border:1px solid #cbd5e1;border-radius:2px;display:inline-block;background:#f8fafc;color:#0f172a;line-height:1.2;font-size:inherit;vertical-align:text-bottom;box-sizing:border-box;min-height:1.2em;outline:none;"> </span><span class="delete-btn" contenteditable="false">×</span></span>&#8203;`;
const sel = window.getSelection(); const sel = window.getSelection();
@@ -588,22 +589,49 @@ export default function TemplateManage() {
}; };
const handleDeleteTemplate = (id: string) => { const handleDeleteTemplate = (id: string) => {
if (templates.length <= 1) {
alert('至少需要保留一个模板');
return;
}
if (window.confirm('确定要删除此模板吗?')) { if (window.confirm('确定要删除此模板吗?')) {
const allTemplates = storage.get<Template[]>('templates', []); const allTemplates = storage.get<Template[]>('templates', []);
const updated = allTemplates.filter(t => t.id !== id); const updated = allTemplates.filter(t => t.id !== id);
setTemplates(updated.filter(t => templates.some(x => x.id === t.id))); setTemplates(updated);
storage.set('templates', updated); storage.set('templates', updated);
if (currentTemplateId === id) { if (currentTemplateId === id) {
const visible = updated.filter(t => templates.some(x => x.id === t.id)); setCurrentTemplateId(updated[0]?.id || null);
setCurrentTemplateId(visible[0]?.id || null);
} }
setSelectedIds(prev => prev.filter(sid => sid !== id));
} }
}; };
const handleBatchDelete = () => {
if (selectedIds.length === 0) return;
if (!window.confirm(`确定要删除选中的 ${selectedIds.length} 个模板吗?`)) return;
const allTemplates = storage.get<Template[]>('templates', []);
const updated = allTemplates.filter(t => !selectedIds.includes(t.id));
setTemplates(updated);
storage.set('templates', updated);
if (currentTemplateId && selectedIds.includes(currentTemplateId)) {
setCurrentTemplateId(updated[0]?.id || null);
}
setSelectedIds([]);
};
const handleBatchExport = () => {
if (selectedIds.length === 0) return;
const targets = templates.filter(t => selectedIds.includes(t.id));
const ts = new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().replace(/[:.]/g, '-').slice(0, 16);
const exportData = {
version: '1.0',
type: 'surclaw_template_package_batch',
templates: targets
};
const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `模板批量导出-${ts}.json`;
a.click();
URL.revokeObjectURL(url);
};
const handleImportFile = (e: React.ChangeEvent<HTMLInputElement>) => { const handleImportFile = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0]; const file = e.target.files?.[0];
if (!file) return; if (!file) return;
@@ -738,45 +766,76 @@ export default function TemplateManage() {
<Plus size={16} /> <Plus size={16} />
</button> </button>
</div> </div>
{selectedIds.length > 0 && (
<div className="px-4 pt-3 pb-1 flex items-center justify-between bg-slate-50 border-b border-border">
<span className="text-xs text-text-muted font-bold"> {selectedIds.length} </span>
<div className="flex gap-2">
<button
onClick={handleBatchExport}
className="px-2 py-1 rounded-md bg-blue-50 text-blue-600 text-[10px] font-bold hover:bg-blue-100 transition-colors"
>
</button>
<button
onClick={handleBatchDelete}
className="px-2 py-1 rounded-md bg-red-50 text-red-600 text-[10px] font-bold hover:bg-red-100 transition-colors"
>
</button>
</div>
</div>
)}
<div className="flex-1 overflow-y-auto p-4 space-y-2"> <div className="flex-1 overflow-y-auto p-4 space-y-2">
{templates.map(tpl => ( {templates.map(tpl => (
<div <div
key={tpl.id} key={tpl.id}
onClick={() => setCurrentTemplateId(tpl.id)} onClick={() => setCurrentTemplateId(tpl.id)}
className={`p-4 rounded-xl border transition-all group ${ className={`p-4 rounded-xl border transition-all group cursor-pointer ${
currentTemplateId === tpl.id currentTemplateId === tpl.id
? 'bg-white border-accent shadow-sm' ? 'bg-white border-accent shadow-sm'
: 'bg-transparent border-transparent hover:bg-white hover:border-border' : 'bg-transparent border-transparent hover:bg-white hover:border-border'
}`} }`}
> >
<div className="flex justify-between items-start mb-1"> <div className="flex items-start gap-2">
<div className={`text-sm font-bold ${currentTemplateId === tpl.id ? 'text-accent' : 'text-text-main'}`}> <input
{tpl.name} type="checkbox"
checked={selectedIds.includes(tpl.id)}
onChange={(e) => {
e.stopPropagation();
setSelectedIds(prev => e.target.checked ? [...prev, tpl.id] : prev.filter(id => id !== tpl.id));
}}
onClick={(e) => e.stopPropagation()}
className="mt-1 shrink-0"
/>
<div className="flex-1 min-w-0">
<div className="flex justify-between items-start mb-1">
<div className={`text-sm font-bold ${currentTemplateId === tpl.id ? 'text-accent' : 'text-text-main'}`}>
{tpl.name}
</div>
</div>
<div className="text-[10px] text-text-muted line-clamp-1 mb-2">{tpl.desc || '无描述'}</div>
<div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={(e) => { e.stopPropagation(); handleEditInfo(tpl); }}
className="px-2 py-1 rounded-md bg-slate-100 text-slate-600 text-[10px] font-bold hover:bg-slate-200 transition-colors"
>
</button>
<button
onClick={(e) => { e.stopPropagation(); handleExportTemplate(tpl); }}
className="px-2 py-1 rounded-md bg-blue-50 text-blue-600 text-[10px] font-bold hover:bg-blue-100 transition-colors"
>
</button>
<button
onClick={(e) => { e.stopPropagation(); handleDeleteTemplate(tpl.id); }}
className="px-2 py-1 rounded-md bg-red-50 text-red-600 text-[10px] font-bold hover:bg-red-100 transition-colors"
>
</button>
</div>
</div> </div>
</div> </div>
<div className="text-[10px] text-text-muted line-clamp-1 mb-2">{tpl.desc || '无描述'}</div>
<div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={(e) => { e.stopPropagation(); handleEditInfo(tpl); }}
className="px-2 py-1 rounded-md bg-slate-100 text-slate-600 text-[10px] font-bold hover:bg-slate-200 transition-colors"
>
</button>
<button
onClick={(e) => { e.stopPropagation(); handleExportTemplate(tpl); }}
className="px-2 py-1 rounded-md bg-blue-50 text-blue-600 text-[10px] font-bold hover:bg-blue-100 transition-colors"
>
</button>
{templates.length > 1 && (
<button
onClick={(e) => { e.stopPropagation(); handleDeleteTemplate(tpl.id); }}
className="px-2 py-1 rounded-md bg-red-50 text-red-600 text-[10px] font-bold hover:bg-red-100 transition-colors"
>
</button>
)}
</div>
</div> </div>
))} ))}
{templates.length === 0 && ( {templates.length === 0 && (
@@ -984,7 +1043,7 @@ export default function TemplateManage() {
setEditFieldTimeFormat(field.timeFormat || ''); setEditFieldTimeFormat(field.timeFormat || '');
setEditFieldTimeDefault(field.timeDefault || 'specific'); setEditFieldTimeDefault(field.timeDefault || 'specific');
setEditFieldFixedTimeValue(field.fixedTimeValue || ''); setEditFieldFixedTimeValue(field.fixedTimeValue || '');
setEditFieldHasUnderline(field.hasUnderline !== false); setEditFieldHasUnderline(field.hasUnderline ?? false);
const target = e.currentTarget; const target = e.currentTarget;
setTimeout(() => { setTimeout(() => {
target.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
@@ -1314,7 +1373,7 @@ export default function TemplateManage() {
<div className="space-y-3"> <div className="space-y-3">
<button <button
onClick={() => { onClick={() => {
const ts = new Date().toISOString().replace(/[:.]/g, '-'); const ts = new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().replace(/[:.]/g, '-').slice(0, 16);
const name = currentTemplate?.name || '模板'; const name = currentTemplate?.name || '模板';
printDocument(editorRef.current?.innerHTML || '', `${name}-${ts}`); printDocument(editorRef.current?.innerHTML || '', `${name}-${ts}`);
setExportModalOpen(false); setExportModalOpen(false);
@@ -1323,7 +1382,7 @@ export default function TemplateManage() {
> PDF</button> > PDF</button>
<button <button
onClick={() => { onClick={() => {
const ts = new Date().toISOString().replace(/[:.]/g, '-'); const ts = new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().replace(/[:.]/g, '-').slice(0, 16);
const name = currentTemplate?.name || '模板'; const name = currentTemplate?.name || '模板';
const data = currentTemplate ? { ...currentTemplate, content: editorRef.current?.innerHTML } : { content: editorRef.current?.innerHTML }; const data = currentTemplate ? { ...currentTemplate, content: editorRef.current?.innerHTML } : { content: editorRef.current?.innerHTML };
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
@@ -1449,13 +1508,13 @@ export default function TemplateManage() {
let html: string; let html: string;
if (inTable) { 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;'; 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%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">${hintText}</span></div>`; 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 { } 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;'; 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;`; 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 showShortText = w > 0 && w < 80;
const text = showShortText ? '插图' : hintText; 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%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">${text}</span></span>&#8203;`; 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>&#8203;`;
} }
const wrapper = document.createElement('div'); const wrapper = document.createElement('div');
wrapper.innerHTML = html; wrapper.innerHTML = html;

View File

@@ -121,8 +121,8 @@ export interface FormField {
} }
export const DEFAULT_FORM_FIELDS: FormField[] = [ export const DEFAULT_FORM_FIELDS: FormField[] = [
{ key: 'patientName', label: '患者姓名', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: true, hasUnderline: true }, { key: 'patientName', label: '患者姓名', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: true, hasUnderline: false },
{ key: 'hospitalId', label: '住院号', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: true, hasUnderline: true }, { key: 'hospitalId', label: '住院号', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: true, hasUnderline: false },
{ key: 'title', label: '手术名称', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: false }, { key: 'title', label: '手术名称', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: false },
{ key: 'patientGender', label: '患者性别', category: '单选', type: 'single_select', visibleInForm: true, isSystemLocked: false, options: ['男', '女'] }, { key: 'patientGender', label: '患者性别', category: '单选', type: 'single_select', visibleInForm: true, isSystemLocked: false, options: ['男', '女'] },
{ key: 'patientAge', label: '患者年龄', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: false }, { key: 'patientAge', label: '患者年龄', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: false },

View File

@@ -1,22 +1,20 @@
const noUnderlineKeys = ['patientName', 'patientGender', 'patientAge', 'department', 'bedNumber', 'hospitalId'];
const smartField = (key: string) => { const smartField = (key: string) => {
const noUlClass = noUnderlineKeys.includes(key) ? ' no-underline' : ''; return `<span class="smart-field-wrapper" contenteditable="false" style="white-space:nowrap;position:relative;"><span class="field-value no-underline" data-bind="${key}" contenteditable="true" style="min-width:24px;padding:0 2px;margin:0;border:1px solid #cbd5e1;border-radius:2px;display:inline-block;background:#f8fafc;color:#0f172a;line-height:inherit;font-size:inherit;vertical-align:baseline;box-sizing:border-box;outline:none;text-align:center;"> </span><span class="delete-btn" contenteditable="false">×</span></span>&#8203;`;
return `<span class="smart-field-wrapper" contenteditable="false" style="white-space:nowrap;position:relative;"><span class="field-value${noUlClass}" data-bind="${key}" contenteditable="true" style="min-width:32px;padding:0 4px;margin:0 2px;border:1px solid #cbd5e1;border-radius:2px;display:inline-block;background:#f8fafc;color:#0f172a;line-height:1.2;font-size:inherit;vertical-align:text-bottom;box-sizing:border-box;min-height:1.2em;outline:none;"> </span><span class="delete-btn" contenteditable="false">×</span></span>&#8203;`;
}; };
export const defaultReportContent = ` export const defaultReportContent = `
<div style="display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 4px;"> <div style="display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 4px;">
<span class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="manual" style="display:inline-block;text-align:center;width:65px;height:65px;line-height:65px;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;position:relative;"> <span class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="manual" style="display:inline-block;text-align:center;width:65px;height:65px;line-height:65px;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;position:relative;transform:translate(-5px,-5px);">
<span class="delete-btn" contenteditable="false">×</span> <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%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">LOGO</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;">LOGO</span>
</span> </span>
<div style="text-align: center;"> <div style="text-align: center;">
<div style="font-size: 14pt; font-family: SimSun; border-bottom: 1px solid #000; padding-bottom: 0; margin-bottom: 8px; display: inline-block; line-height: 1;">西 安 交 通 大 学 第 一 附 属 医 院</div> <div style="font-size: 14pt; font-family: SimSun; border-bottom: 1px solid #000; padding-bottom: 1px; margin-bottom: 2px; display: inline-block; line-height: 1;">西 安 交 通 大 学 第 一 附 属 医 院</div>
<div style="font-size: 16pt; font-family: SimSun;">手术记录</div> <div style="font-size: 16pt; font-family: SimSun;">手术记录</div>
</div> </div>
</div> </div>
<p style="font-family: SimSun; font-size: 11pt; font-weight: normal; margin: 0; padding: 0 0 1px 0; line-height: 1.2; border-bottom: 1px solid #000;"> <p style="font-family: SimSun; font-size: 11pt; font-weight: normal; margin: 0; padding: 0; line-height: 1; border-bottom: 1px solid #000;">
姓名:${smartField('patientName')}&nbsp; 姓名:${smartField('patientName')}&nbsp;
性别:${smartField('patientGender')}&nbsp; 性别:${smartField('patientGender')}&nbsp;
年龄:${smartField('patientAge')}&nbsp; 年龄:${smartField('patientAge')}&nbsp;
@@ -83,21 +81,21 @@ export const defaultReportContent = `
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;"> <td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="position:relative;border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;"> <div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="position:relative;border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
<span class="delete-btn" contenteditable="false">×</span> <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%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</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;">插入/点击放置图片</span>
</div> </div>
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图A 腹腔镜探查</p> <p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图A 腹腔镜探查</p>
</td> </td>
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;"> <td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="position:relative;border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;"> <div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="position:relative;border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
<span class="delete-btn" contenteditable="false">×</span> <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%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</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;">插入/点击放置图片</span>
</div> </div>
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图B 胆囊管夹闭与离断</p> <p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图B 胆囊管夹闭与离断</p>
</td> </td>
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;"> <td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="position:relative;border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;"> <div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="position:relative;border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
<span class="delete-btn" contenteditable="false">×</span> <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%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</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;">插入/点击放置图片</span>
</div> </div>
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图C 胆囊动脉夹闭与离断</p> <p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图C 胆囊动脉夹闭与离断</p>
</td> </td>
@@ -106,21 +104,21 @@ export const defaultReportContent = `
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;"> <td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="position:relative;border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;"> <div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="position:relative;border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
<span class="delete-btn" contenteditable="false">×</span> <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%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</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;">插入/点击放置图片</span>
</div> </div>
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图D 胆囊剥离与床面止血</p> <p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图D 胆囊剥离与床面止血</p>
</td> </td>
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;"> <td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="position:relative;border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;"> <div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="position:relative;border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
<span class="delete-btn" contenteditable="false">×</span> <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%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</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;">插入/点击放置图片</span>
</div> </div>
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图E 胆囊取出与钛夹确认</p> <p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图E 胆囊取出与钛夹确认</p>
</td> </td>
<td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;"> <td style="width: 33%; text-align: center; padding: 10px; vertical-align: top; border: 1px solid #e2e8f0;">
<div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="position:relative;border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;"> <div class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="frame" style="position:relative;border: 1px dashed #cbd5e1; background: #f8fafc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; min-height: 60px; margin: 0px auto; display: flex; align-items: center; justify-content: center; cursor: pointer;">
<span class="delete-btn" contenteditable="false">×</span> <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%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</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;">插入/点击放置图片</span>
</div> </div>
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图F 止血材料覆盖及检查</p> <p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图F 止血材料覆盖及检查</p>
</td> </td>
@@ -145,7 +143,7 @@ export const defaultReportContent = `
</p> </p>
<p style="text-align: right; font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0; white-space: nowrap;"> <p style="text-align: right; font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0; white-space: nowrap;">
手术者签名:<span class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="manual" style="display:inline-block;text-align:center;width:200px;height:40px;line-height:40px;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;position:relative;"><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%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span></span> 手术者签名:<span class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="manual" style="display:inline-block;text-align:center;width:200px;height:40px;line-height:40px;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;position:relative;"><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;">插入/点击放置图片</span></span>
</p> </p>
<p style="margin: 0; padding: 0; line-height: 1.5;">&nbsp;</p> <p style="margin: 0; padding: 0; line-height: 1.5;">&nbsp;</p>

View File

@@ -1,4 +1,6 @@
export const printDocument = (htmlContent: string, docTitle: string = '图文报告') => { export const printDocument = (htmlContent: string, docTitle: string = '图文报告') => {
const originalTitle = document.title;
document.title = docTitle;
const iframe = document.createElement('iframe'); const iframe = document.createElement('iframe');
iframe.style.position = 'fixed'; iframe.style.position = 'fixed';
iframe.style.right = '0'; iframe.style.right = '0';
@@ -17,6 +19,7 @@ export const printDocument = (htmlContent: string, docTitle: string = '图文报
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>${docTitle}</title>
<style> <style>
@page { size: A4; margin: 15mm 10mm; } @page { size: A4; margin: 15mm 10mm; }
* { box-sizing: border-box; } * { box-sizing: border-box; }
@@ -34,12 +37,12 @@ export const printDocument = (htmlContent: string, docTitle: string = '图文报
.delete-btn { display: none !important; } .delete-btn { display: none !important; }
.image-placeholder:not(.has-image) { display: none !important; } .image-placeholder:not(.has-image) { display: none !important; }
.template-info-section { position: relative; margin-bottom: 16px; } .template-info-section { position: relative; margin-bottom: 16px; }
.smart-field-wrapper { display: inline-flex; align-items: center; margin: 0 2px; vertical-align: text-bottom; } .smart-field-wrapper { display: inline-flex; align-items: baseline; margin: 0; vertical-align: baseline; }
.smart-field-wrapper .field-label { color: #64748b; user-select: none; } .smart-field-wrapper .field-label { color: #64748b; user-select: none; }
.smart-field-wrapper .field-value { min-width: 32px; padding: 0 4px; margin: 0 2px; border: 1px solid #cbd5e1; border-radius: 2px; display: inline-block; background: #f8fafc; color: #0f172a; line-height: 1.2; font-size: inherit; vertical-align: text-bottom; box-sizing: border-box; min-height: 1.2em; outline: none; } .smart-field-wrapper .field-value { min-width: 24px; padding: 0 2px; margin: 0; border: 1px solid #cbd5e1; border-radius: 2px; display: inline-block; background: #f8fafc; color: #0f172a; line-height: inherit; font-size: inherit; vertical-align: baseline; box-sizing: border-box; outline: none; text-align: center; }
.report-signature-img { max-width: 120px; max-height: 40px; width: auto; height: auto; object-fit: contain; vertical-align: middle; display: inline-block; } .report-signature-img { max-width: 120px; max-height: 40px; width: auto; height: auto; object-fit: contain; vertical-align: middle; display: inline-block; }
@media print { @media print {
.smart-field-wrapper .field-value { border: none !important; border-bottom: 1px solid #000 !important; border-radius: 0 !important; background: transparent !important; padding: 0 2px !important; } .smart-field-wrapper .field-value { border: none !important; border-bottom: 1px solid #000 !important; border-radius: 0 !important; background: transparent !important; padding: 0 2px 0px 2px !important; }
.smart-field-wrapper .field-value.no-underline { border-bottom: none !important; } .smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
} }
</style> </style>
@@ -53,6 +56,7 @@ export const printDocument = (htmlContent: string, docTitle: string = '图文报
win.focus(); win.focus();
setTimeout(() => { setTimeout(() => {
win.print(); win.print();
document.title = originalTitle;
setTimeout(() => { setTimeout(() => {
if (iframe.parentNode) document.body.removeChild(iframe); if (iframe.parentNode) document.body.removeChild(iframe);
}, 1000); }, 1000);

View File

@@ -0,0 +1,66 @@
# 实现方案 —— 2026-04-18-22-59-10
## 方案目标
将字段下划线默认行为改为「默认不显示」,修复占位符提示文字居中问题。
## 需求 1所有字段默认打印时不显示下划线
### 修改文件 1`src/pages/TemplateManage.tsx`
1. **新增字段默认状态**
```ts
const [newFieldHasUnderline, setNewFieldHasUnderline] = useState(false);
```
2. **编辑字段回显默认值**:在 `startEditField` 或等效函数中:
```ts
setEditFieldHasUnderline(field.hasUnderline ?? false);
```
3. **插入字段类名判断**:在 `insertSmartField` 中:
```ts
const underlineClass = field.hasUnderline !== true ? ' no-underline' : '';
```
### 修改文件 2`src/utils/defaultContent.ts`
移除 `noUnderlineKeys` 数组,直接在 `smartField()` 中给所有字段加 `.no-underline`
```ts
const smartField = (key: string) => {
return `<span class="smart-field-wrapper" contenteditable="false" style="white-space:nowrap;position:relative;"><span class="field-value no-underline" data-bind="${key}" contenteditable="true" style="min-width:32px;padding:0 4px;margin:0 2px;border:1px solid #cbd5e1;border-radius:2px;display:inline-block;background:#f8fafc;color:#0f172a;line-height:1.2;font-size:inherit;vertical-align:text-bottom;box-sizing:border-box;min-height:1.2em;outline:none;"> </span><span class="delete-btn" contenteditable="false">×</span></span>&#8203;`;
};
```
## 需求 2修复占位符文字偏左
### 修改文件
`src/pages/ReportEditor.tsx`、`src/pages/TemplateManage.tsx`、`src/utils/defaultContent.ts`
### 修改内容
在所有 `.placeholder-text` 的 `style` 属性中追加 `text-align:center;`。
需要修改的位置:
1. `defaultContent.ts`Logo 占位符 + 6 个表格占位符 + 签名占位符
2. `ReportEditor.tsx`
- `handleEditorClick` 删除恢复逻辑中的 `.placeholder-text`
- `placeholderModal` 确认插入时的 `.placeholder-text`table 内 + inline-block
3. `TemplateManage.tsx`
- `handleEditorClick` 删除恢复逻辑中的 `.placeholder-text`
- `placeholderModal` 确认插入时的 `.placeholder-text`table 内 + inline-block
统一的新样式:
```
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;
```
## 涉及文件及修改点
| 文件 | 修改点 |
|------|--------|
| `src/pages/TemplateManage.tsx` | `newFieldHasUnderline` 默认 `false`;编辑回显默认 `false``insertSmartField` 判断逻辑placeholder-text 样式 |
| `src/utils/defaultContent.ts` | `smartField()` 直接加 `.no-underline`;所有 placeholder-text 加 `text-align:center` |
| `src/pages/ReportEditor.tsx` | 所有 placeholder-text 加 `text-align:center` |
## 风险与注意事项
1. `smartField()` 中移除 `noUnderlineKeys` 后,所有默认模板字段将统一无下划线。此前通过 `hasUnderline` 配置自定义下划线的机制仍然保留(`field.hasUnderline === true` 时不加 `.no-underline`),只是默认值变为 `false`。
2. `text-align:center` 追加时需注意不破坏已有的其他样式属性顺序。
3. 批量替换 `placeholder-text` 样式时,应使用精确的字符串匹配,避免误伤其他元素。

View File

@@ -0,0 +1,90 @@
# 实现方案 —— 2026-04-18-23-19-44
## 方案目标
修复排版对齐问题,优化导出文件名,实现模板批量操作。
## 需求 1修复 field-value 输入内容往上飘
### 修改文件
`src/utils/defaultContent.ts``src/utils/print.ts`
### 修改内容
- `defaultContent.ts``smartField()`
- `vertical-align:text-bottom``vertical-align:baseline`
- `line-height:1.2;min-height:1.2em;``line-height:inherit;`
- `print.ts``.field-value` 打印样式同步修改 `vertical-align:baseline; line-height:inherit;`
- 打印时下划线 `padding-bottom` 改为 `1px` 以紧贴文字
## 需求 2、3、4微调排版间距和 Logo 位置
### 修改文件
`src/utils/defaultContent.ts`
### 修改内容
- 姓名栏横线:`padding-bottom: 1px;`(原来是 `padding: 0 0 1px 0`,可能需要调整)
- 手术记录标题:`margin-top: 2px;`(原来是 `margin-bottom: 8px` 等,需要精确调整)
- Logo使用 `position:absolute` 向左上偏移 5px或调整父容器 `gap`/`margin`
## 需求 5导出 PDF 文件名修正
### 修改文件
`src/utils/print.ts`
### 修改内容
`printDocument` 函数中:
1. 保存原始 `document.title`
2. 设置 `document.title = docTitle`
3. 打印完成后恢复 `document.title = originalTitle`
这样浏览器在 `window.print()` 时会使用正确的文件名。
## 需求 6导出 JSON 时间使用北京时间
### 修改文件
`src/pages/ReportEditor.tsx``src/pages/ReportManage.tsx``src/pages/TemplateManage.tsx`
### 修改内容
定义一个全局格式化函数 `getBeijingTimeStr()`
```ts
const getBeijingTimeStr = () => {
const d = new Date();
const bjTime = new Date(d.getTime() + (8 * 60 * 60 * 1000));
return bjTime.toISOString().replace(/T/, '-').replace(/:/g, '-').slice(0, 16);
};
```
替换所有 `new Date().toISOString().replace(/[:.]/g, '-')` 的调用。
## 需求 7模板管理批量操作
### 修改文件
`src/pages/TemplateManage.tsx`
### 修改内容
1. **新增状态**`const [selectedIds, setSelectedIds] = useState<string[]>([]);`
2. **批量删除**`handleBatchDelete()` 过滤掉选中 ID清空 `selectedIds`
3. **批量导出**`handleBatchExport()` 将选中模板打包为 JSON 数组下载
4. **UI 调整**
- 模板列表每行前增加复选框
- 当有选中项时,显示批量操作工具栏(批量删除 + 批量导出)
5. **允许空列表**:移除 `templates.length > 1` 对删除按钮的限制(改为只在批量删除时确认)
### 冲突检查
- 现有 `handleDeleteTemplate` 单个删除逻辑可复用
- `Login.tsx` 中的默认模板初始化逻辑需要检查:如果用户删除了所有模板,系统是否会在登录时强制创建默认模板
## 涉及文件及修改点
| 文件 | 修改点 |
|------|--------|
| `src/utils/defaultContent.ts` | smartField 基线对齐姓名栏间距手术记录间距Logo 位置 |
| `src/utils/print.ts` | field-value 打印样式document.title 动态设置 |
| `src/pages/ReportEditor.tsx` | 导出文件名使用北京时间 |
| `src/pages/ReportManage.tsx` | 导出文件名使用北京时间 |
| `src/pages/TemplateManage.tsx` | 导出文件名使用北京时间;批量操作状态和 UI |
## 风险与注意事项
1. `vertical-align:baseline` 后,需要验证不同字号混合时(如 11pt 正文 + 12pt 字段)的对齐效果。
2. Logo 使用 `position:absolute` 时需要确保父容器有 `position:relative`,且不会遮挡其他元素。
3. 修改 `document.title` 后需确保在打印失败或用户取消时也能恢复。
4. 批量删除后如果 `currentTemplateId` 被删除,需要重置为 `null` 或自动选中其他模板。
5. 北京时间计算 `new Date(d.getTime() + (8 * 60 * 60 * 1000))` 在夏令时转换时可能有 1 小时偏差,但中国大陆不使用夏令时,所以安全。

View File

@@ -0,0 +1,108 @@
# 实现方案 —— 2026-04-18-23-39-35
## 方案目标
修复下划线功能、统一导出文件名、缩紧输入框间距、实现表单逆向联动。
## 需求 1修复下划线勾选状态异常及打印失效
### 修改文件 1`src/types.ts`
`DEFAULT_FORM_FIELDS` 数组中,为所有字段显式设置 `hasUnderline: false`(如果当前为 `true` 或未指定)。
### 修改文件 2`src/pages/TemplateManage.tsx`
在编辑字段的回显逻辑中:
```ts
setEditFieldHasUnderline(field.hasUnderline === true);
```
确保 `undefined` 时默认不勾选。
### 修改文件 3`src/utils/print.ts`
恢复默认显示下划线的白名单机制:
```css
@media print {
.smart-field-wrapper .field-value {
border: none !important;
border-bottom: 1px solid #000 !important;
border-radius: 0 !important;
background: transparent !important;
padding: 0 2px 0px 2px !important;
}
.smart-field-wrapper .field-value.no-underline {
border-bottom: none !important;
}
}
```
## 需求 2统一 PDF 和 JSON 导出文件名
### 修改文件:`src/utils/print.ts`
确保 `printDocument` 中:
1. 保存原始 `document.title`
2. 设置 `document.title = docTitle`
3. iframe HTML 中也写入 `<title>${docTitle}</title>`
4. 打印完成后恢复 `document.title`
同时检查 `ReportEditor.tsx``ReportManage.tsx` 中调用 `printDocument` 时传入的 `docTitle` 是否与 JSON 文件名一致。
## 需求 3缩紧 field-value 内文字间距
### 修改文件 1`src/utils/defaultContent.ts`
```ts
// padding:0 4px → padding:0 2px
// margin:0 2px → margin:0
// min-width:32px → min-width:24px
// 增加 text-align:center 让文字居中
```
### 修改文件 2`src/utils/print.ts`
同步修改打印样式中的 `.field-value`
```css
.smart-field-wrapper .field-value {
min-width: 24px;
padding: 0;
margin: 0;
...
}
```
## 需求 4ReportEditor 表单逆向联动
### 修改文件:`src/pages/ReportEditor.tsx`
1. **新增 useEffect 监听 activeFieldKey**
```ts
useEffect(() => {
if (!editorRef.current) return;
const allFields = editorRef.current.querySelectorAll('.field-value');
allFields.forEach(el => {
(el as HTMLElement).style.backgroundColor = '#f8fafc';
(el as HTMLElement).style.boxShadow = 'none';
});
if (activeFieldKey) {
const targetEl = editorRef.current.querySelector(`.field-value[data-bind="${activeFieldKey}"]`) as HTMLElement;
if (targetEl) {
targetEl.style.backgroundColor = '#eff6ff';
targetEl.style.boxShadow = '0 0 0 2px #3b82f6';
targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
}, [activeFieldKey]);
```
2. **右侧表单添加 onFocus/onClick**
在右侧表单字段容器的 `onClick` 中增加 `setActiveFieldKey(field.key)`,在 input/select 的 `onFocus` 中也增加 `setActiveFieldKey(field.key)`
## 涉及文件及修改点
| 文件 | 修改点 |
|------|--------|
| `src/types.ts` | DEFAULT_FORM_FIELDS 中 hasUnderline 设为 false |
| `src/pages/TemplateManage.tsx` | 编辑字段回显逻辑 |
| `src/utils/print.ts` | 打印下划线白名单机制document.title 设置field-value 间距 |
| `src/utils/defaultContent.ts` | smartField padding/margin 缩小text-align:center |
| `src/pages/ReportEditor.tsx` | activeFieldKey useEffect 高亮滚动;表单 onFocus 联动 |
| `src/pages/ReportManage.tsx` | 检查导出文件名一致性 |
## 风险与注意事项
1. `DEFAULT_FORM_FIELDS` 修改后,现有用户的 localStorage 中已保存的字段配置不会自动更新,需要手动编辑或清除 `formFieldsConfig` 才能看到效果。
2. `activeFieldKey` 的 useEffect 直接操作 DOM style需要确保在组件卸载或切换 tab 时清除高亮。
3. 缩小 padding/margin 后需要验证在表格单元格td内的显示是否正常。
4. 打印样式中 `.field-value.no-underline` 的优先级必须高于基础 `.field-value` 规则。

View File

@@ -0,0 +1,54 @@
# 测试方案 —— 2026-04-18-22-59-10
## 测试目标
验证字段下划线默认行为和占位符文字居中修复。
## 测试用例
### TC-1新增字段默认不下划线
**前置条件**:进入模板管理 → 字段管理 → 新增字段。
**步骤**
1. 点击「添加字段」。
2. 观察「打印时显示下划线」复选框状态。
**预期结果**:复选框默认未勾选。
### TC-2插入字段默认带 no-underline 类
**前置条件**:模板管理中已有字段(默认或新增)。
**步骤**
1. 在编辑器中插入任意字段。
2. 检查生成的 HTML。
**预期结果**`.field-value` 带有 `.no-underline` 类。
### TC-3显式勾选下划线后打印正常显示
**前置条件**:某个字段的「打印时显示下划线」已勾选。
**步骤**
1. 插入该字段。
2. 点击打印预览。
**预期结果**:该字段显示下划线,其他未勾选字段不显示。
### TC-4默认模板所有字段打印无下划线
**前置条件**:新建报告,加载默认模板。
**步骤**
1. 点击打印预览。
2. 检查「姓名、性别、年龄、科别、床号、住院号」等字段。
**预期结果**:所有字段均不显示下划线。
### TC-5删除图片后占位符文字居中
**前置条件**:模板中有图片占位符,已插入图片。
**步骤**
1. 点击图片右上角的「×」删除。
**预期结果**:提示文字(如「插入/点击放置图片」或「LOGO」在虚线框正中心不偏左。
### TC-6不同尺寸占位符文字均居中
**前置条件**模板中有不同尺寸的占位符65px Logo、200px 表格占位符)。
**步骤**
1. 分别检查各占位符的文字位置。
**预期结果**:所有占位符文字均绝对居中。
## 回归测试
- 确保字段插入、编辑、删除功能正常。
- 确保图片占位符的插入、删除、拖拽功能正常。
- 确保打印样式正常。
## 测试通过标准
所有用例均通过,无控制台报错,排版居中对齐准确。

View File

@@ -0,0 +1,73 @@
# 测试方案 —— 2026-04-18-23-19-44
## 测试目标
验证排版修复、导出文件名优化和模板批量操作的正确性。
## 测试用例
### TC-1field-value 文字与正文齐平
**前置条件**:新建报告,加载默认模板。
**步骤**
1. 在「姓名」字段中输入文字。
2. 观察文字与「姓名:」的基线对齐情况。
**预期结果**:字段中的文字与周围正文在同一水平线上,无明显上浮。
### TC-2打印时下划线紧贴文字
**前置条件**:模板中有带下划线的字段。
**步骤**
1. 点击打印预览。
2. 观察下划线与文字的距离。
**预期结果**:下划线与文字底部距离约 1px不悬空。
### TC-3排版间距微调
**前置条件**:默认模板已加载。
**步骤**
1. 观察「姓名:」与下方横线的距离。
2. 观察「手术记录」与上方横线的距离。
3. 观察 Logo 与医院名称的相对位置。
**预期结果**
- 姓名栏横线紧贴文字下方(约 1px
- 手术记录距上方横线约 2px
- Logo 比原来偏左上约 5px
### TC-4导出 PDF 文件名正确
**前置条件**:报告已填写完整信息。
**步骤**
1. 点击「导出报告」→「导出 PDF」。
**预期结果**:浏览器保存对话框中的默认文件名为 `图文报告-{title}-{patient}-{hid}-{time}.pdf`而非「My Google AI Studio App.pdf」。
### TC-5导出 JSON 时间使用北京时间
**前置条件**:任意可导出 JSON 的页面。
**步骤**
1. 点击导出 JSON。
2. 查看文件名中的时间戳。
**预期结果**:时间戳为北京时间(如当前是北京时间 23:19文件名中应显示 23-19 而非 15-19
### TC-6模板批量删除
**前置条件**:模板列表中有多个模板。
**步骤**
1. 选中 2 个模板的复选框。
2. 点击「批量删除」。
3. 确认删除。
**预期结果**:选中的模板被删除,列表中不再显示。未选中的模板保留。
### TC-7模板批量导出
**前置条件**:模板列表中有多个模板。
**步骤**
1. 选中 2 个模板的复选框。
2. 点击「批量导出」。
**预期结果**:下载的 JSON 文件包含 2 个模板的完整数据(名称、描述、内容、字段配置)。
### TC-8允许空模板列表
**前置条件**:模板列表中有模板。
**步骤**
1. 选中所有模板并批量删除。
**预期结果**:列表显示为空,无报错。
## 回归测试
- 确保打印功能正常,样式无异常。
- 确保单个模板导出/导入功能正常。
- 确保报告编辑、保存、加载功能正常。
## 测试通过标准
所有用例均通过,无控制台报错,排版对齐准确,文件名正确。

View File

@@ -0,0 +1,64 @@
# 测试方案 —— 2026-04-18-23-39-35
## 测试目标
验证下划线修复、文件名统一、间距缩紧和双向联动的正确性。
## 测试用例
### TC-1基础字段默认不勾选下划线
**前置条件**:进入模板管理 → 字段管理。
**步骤**
1. 点击「患者姓名」或「住院号」的编辑按钮。
**预期结果**:「打印时显示下划线」复选框默认未勾选。
### TC-2勾选下划线后打印生效
**前置条件**:某个字段已勾选「打印时显示下划线」。
**步骤**
1. 在编辑器中插入该字段。
2. 点击打印预览。
**预期结果**:该字段显示下划线,且下划线紧贴文字底部。
### TC-3未勾选下划线打印不显示
**前置条件**:某个字段未勾选下划线。
**步骤**
1. 在编辑器中插入该字段。
2. 点击打印预览。
**预期结果**:该字段不显示下划线。
### TC-4PDF 与 JSON 文件名一致
**前置条件**:报告已填写完整信息。
**步骤**
1. 分别点击「导出 PDF」和「导出 JSON」。
**预期结果**:两个文件的文件名前缀完全一致(如 `图文报告-腹腔镜胆囊切除术报告-未知-无号-2026-04-18T23-28`)。
### TC-5field-value 间距缩紧
**前置条件**:模板中有 field-value 字段。
**步骤**
1. 观察字段框内文字与边框的距离。
2. 打印预览中观察间距。
**预期结果**:文字紧贴边框,左右无明显空白。
### TC-6表单逆向联动
**前置条件**ReportEditor 已加载默认模板。
**步骤**
1. 点击右侧「基本信息」中「手术名称」输入框。
2. 观察中间模板区域。
**预期结果**
- 中间模板中「手术名称」字段高亮显示(蓝色背景 + 蓝色描边)。
- 页面平滑滚动到该字段位置(视野中央)。
### TC-7正向联动仍正常
**前置条件**ReportEditor 已加载默认模板。
**步骤**
1. 点击中间模板中的「患者姓名」字段。
**预期结果**
- 右侧表单中高亮「患者姓名」输入框。
- 右侧滚动到该输入框位置。
## 回归测试
- 确保字段插入、编辑、删除功能正常。
- 确保打印样式正常,所有字段类型显示正确。
- 确保视频分析、图片占位符功能正常。
## 测试通过标准
所有用例均通过,无控制台报错,下划线逻辑正确,双向联动流畅。

View File

@@ -1047,3 +1047,106 @@ if ((settings.autoInsertDelay || 0) > 0) {
- 当修改 `image-placeholder` 的创建或恢复逻辑时,必须在所有入口同步更新:`defaultContent.ts`(静态模板)、`ReportEditor.tsx`(运行时插入/填充/删除恢复)、`TemplateManage.tsx`(模板管理)。 - 当修改 `image-placeholder` 的创建或恢复逻辑时,必须在所有入口同步更新:`defaultContent.ts`(静态模板)、`ReportEditor.tsx`(运行时插入/填充/删除恢复)、`TemplateManage.tsx`(模板管理)。
- 任何涉及 `execCommand` 的富文本操作都应评估其安全性,优先使用直接 DOM 样式操作(如 `style.textAlign`、`style.lineHeight`)替代,避免浏览器原生命令对复杂 DOM 结构的不可控修改。 - 任何涉及 `execCommand` 的富文本操作都应评估其安全性,优先使用直接 DOM 样式操作(如 `style.textAlign`、`style.lineHeight`)替代,避免浏览器原生命令对复杂 DOM 结构的不可控修改。
- 绝对定位的居中方案(`transform: translate(-50%, -50%)`)虽然效果稳定,但要求父容器必须带有 `position: relative`,修改时需同步检查所有父容器的样式。 - 绝对定位的居中方案(`transform: translate(-50%, -50%)`)虽然效果稳定,但要求父容器必须带有 `position: relative`,修改时需同步检查所有父容器的样式。
---
## 记录 34模板导入导出迁移与 Logo 占位符替换
**A. 具体问题**
1. 模板管理模块缺乏数据迁移能力:用户无法将配置好的模板(含字段管理配置)导出为文件,也无法在新建模板时通过文件导入已有配置。
2. 默认模板顶部 Logo 虽然已是 `image-placeholder`,但使用的是 `display:inline-flex` 布局,与运行时插入的占位符(`display:inline-block`)样式不一致,导致交互体验不统一。
**B. 产生问题原因**
1. 系统设计初期未考虑模板迁移场景Template 类型缺少 `fields` 属性,字段配置仅保存在全局 `formFieldsConfig` 中。
2. Logo 占位符在默认模板中独立硬编码,未与运行时插入逻辑保持一致的标准结构。
**C. 解决问题方案**
1. **Template 类型扩展**:在 `src/types.ts` 的 `Template` 接口中新增 `fields?: FormField[]`。
2. **模板导出功能**:在 `TemplateManage.tsx` 中新增 `handleExportTemplate` 函数,导出 JSON 结构包含 `version`、`type`、`title`、`description`、`content`、`fields`。
3. **模板导入功能**
- 新增 `importedContent` 状态(`{content: string; fields: FormField[]}`)和 `fileInputRef`
- 新增 `handleImportFile` 函数:解析 JSON验证 `type === 'surclaw_template_package'`,自动填充名称和描述,暂存内容和字段
- 在新增模板 Modal 中增加导入 UI使用用户指定的 `w-8 h-8 bg-accent...` 样式类名)
- 修改 `handleModalSubmit`:新建模板时优先使用 `importedContent.content` 和 `importedContent.fields`,并同步保存到全局 `formFieldsConfig`
- 切换模板时(`currentTemplateId` 变化),如果模板有 `fields` 则加载到编辑器并同步保存到全局配置
4. **Logo 占位符标准化**:将 `defaultContent.ts` 中 Logo 的 `display:inline-flex` 改为 `display:inline-block`,统一使用 `text-align:center` + `line-height:65px` 的垂直居中方式提示文字改为「LOGO」。
**D. 后续如何避免问题**
- 当扩展数据类型(如 Template 接口)时,应评估是否需要同步修改所有使用该类型的持久化/序列化逻辑(如 storage 读写、导入/导出)。
- 默认模板中的占位符结构必须与运行时插入逻辑保持完全一致(`display`、居中方式、`data-mode` 等),任何差异都可能导致交互体验不一致。
- 新增文件上传/导入功能时,必须在 onChange 事件末尾清空 `e.target.value = ''`,否则同一文件无法重复选择。
---
## 记录 35字段默认不下划线与占位符文字居中修复
**A. 具体问题**
1. 模板管理中新增字段时,「打印时显示下划线」复选框默认勾选,用户希望改为默认不勾选。
2. 删除图片占位符中的图片后,提示文字(如「插入/点击放置图片」)在虚线框内偏左,未真正居中。
**B. 产生问题原因**
1. `newFieldHasUnderline` 和 `editFieldHasUnderline` 的 `useState` 默认值为 `true``insertSmartField` 中的判断逻辑是 `field.hasUnderline === false ? ' no-underline' : ''`,导致只有显式关闭时才无下划线。
2. 虽然给 `.placeholder-text` 使用了 `position:absolute + transform:translate(-50%, -50%)` 实现居中,但元素本身设置了 `display:block; width:100%`,其内部文本流默认 `text-align:left`,导致文字靠左。
3. 上一轮对 `TemplateManage.tsx` 中 `handleEditorClick` 删除恢复逻辑的修改未完全生效,该文件中的删除恢复逻辑仍使用旧代码(无 absolute 定位、无尺寸恢复)。
**C. 解决问题方案**
1. **字段默认不下划线**
- `src/pages/TemplateManage.tsx``newFieldHasUnderline` 和 `editFieldHasUnderline` 默认值从 `true` 改为 `false`
- `src/pages/TemplateManage.tsx``insertSmartField` 中判断改为 `field.hasUnderline !== true ? ' no-underline' : ''`
- `src/pages/TemplateManage.tsx`:编辑字段回显改为 `field.hasUnderline ?? false`
- `src/utils/defaultContent.ts`:移除 `noUnderlineKeys` 数组,`smartField()` 直接给所有字段加 `.no-underline`
2. **占位符文字居中**
- 在所有 `.placeholder-text` 的 style 中追加 `text-align:center;`
- 修改范围覆盖 `src/utils/defaultContent.ts`8 个占位符)、`src/pages/ReportEditor.tsx`3 处)、`src/pages/TemplateManage.tsx`3 处)
- 补全 `TemplateManage.tsx` 中 `handleEditorClick` 删除恢复逻辑的旧代码,添加 absolute 居中、尺寸恢复、`text-align:center`
**D. 后续如何避免问题**
- 当修改默认值(如 `useState(true)` → `useState(false)`)时,应同时检查所有回显/回退逻辑(如 `field.hasUnderline !== false` → `field.hasUnderline ?? false`),确保数据兼容性。
- 使用 `display:block; width:100%` 的绝对居中元素,必须显式设置 `text-align:center;` 以控制内部文本流的对齐方向。
- 批量替换字符串时,应通过 grep 验证所有匹配位置是否都已更新,避免遗漏(如此次 `TemplateManage.tsx` 中 handleEditorClick 的旧代码)。
---
## 记录 36七项排版与功能优化集中实施
**A. 具体问题**
1. `.field-value` 输入框中的文字与正文不在同一基线上,视觉上向上偏移。
2. 「姓名:」下方横线与文字之间距离过大。
3. 「手术记录」标题与上方医院名称横线之间距离过大。
4. Logo 占位符相对于医院名称文字整体偏右下。
5. 导出 PDF 时浏览器默认文件名为「My Google AI Studio App.pdf」而非自定义名称。
6. 导出 JSON 文件名中的时间戳使用 UTC 时间,不符合国内用户习惯。
7. 模板管理模块缺乏批量操作能力,只能逐个删除/导出。
**B. 产生问题原因**
1. `smartField()` 中使用了 `vertical-align:text-bottom` 和 `line-height:1.2;min-height:1.2em`,导致内联块元素基线计算偏移。
2. 姓名栏 `<p>` 的 `padding-bottom:1px` 叠加 `line-height:1.2`,导致 border-bottom 距文字约 2-3px。
3. 医院名称的 `margin-bottom:8px` 过大。
4. Logo 位于 flex 容器中,使用默认的 `gap:12px` 和 `align-items:center`,位置不够精确。
5. `printDocument()` 虽接受 `docTitle` 参数并写入 iframe 的 `<title>`,但浏览器打印时优先使用父窗口的 `document.title`。
6. `new Date().toISOString()` 返回 UTC 时间字符串。
7. 模板列表 UI 仅设计了单条操作按钮,未设计复选框和批量操作状态。
**C. 解决问题方案**
1. **基线对齐修复**
- `defaultContent.ts``vertical-align:text-bottom` → `vertical-align:baseline``line-height:1.2;min-height:1.2em` → `line-height:inherit;`
- `print.ts`:同步修改 `.smart-field-wrapper` 和 `.field-value` 的 `vertical-align:baseline` 和 `line-height:inherit`
2. **姓名栏间距**`<p>` 的 `padding:0 0 1px 0` → `padding:0``line-height:1.2` → `line-height:1`,使 border-bottom 紧贴文字
3. **手术记录间距**:医院名称 `margin-bottom:8px` → `margin-bottom:2px``padding-bottom:0` → `padding-bottom:1px`
4. **Logo 微调**:给 Logo 的 `<span>` 添加 `transform:translate(-5px,-5px)`
5. **PDF 文件名**:在 `printDocument()` 中保存并临时设置 `document.title = docTitle`,打印完成后恢复
6. **北京时间**:统一替换所有 `new Date().toISOString()` 为 `new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().slice(0, 16)`,并保留原有的 `replace(/[:.]/g, '-')`
7. **模板批量操作**
- 新增 `selectedIds` 状态
- 新增 `handleBatchDelete` 和 `handleBatchExport`
- 模板卡片内增加复选框(阻止冒泡避免触发选中)
- 选中时显示批量操作浮动工具栏
- 移除 `templates.length <= 1` 的单条删除限制,允许列表为空
- 删除后自动同步 `currentTemplateId` 和 `selectedIds`
**D. 后续如何避免问题**
- 排版微调时,应同时检查编辑器显示、打印预览两处的表现,因为 `print.ts` 中有独立的样式覆盖。
- `vertical-align` 属性对内联块元素的基线影响显著,混合使用 `text-bottom`、`middle`、`baseline` 时需谨慎测试。
- 浏览器打印的文件名行为不一致(有的用 iframe title有的用父窗口 title最稳妥的方案是在打印前后动态修改 `document.title`。
- 批量操作 UI 中,复选框的点击事件必须 `stopPropagation()`,否则会触发卡片点击导致状态混乱。
- 批量删除后必须同步清理 `selectedIds` 和 `currentTemplateId`,避免出现「选中已删除项」或「当前模板不存在」的异常状态。

View File

@@ -0,0 +1,32 @@
# 需求分析 —— 2026-04-18-22-59-10
## 需求来源
用户希望调整字段默认下划线行为,并修复占位符文字居中的样式问题。
## 需求概述
### 需求 1所有字段默认打印时不显示下划线
当前字段管理中,新增字段的「打印时显示下划线」复选框默认勾选(`hasUnderline` 默认为 `true`)。用户希望改为默认不勾选,即所有现有字段和新增字段在打印时默认不显示下划线。
具体改动点:
- `newFieldHasUnderline` 状态默认值从 `true` 改为 `false`
- 编辑字段回显时,`hasUnderline` 回退值从 `true` 改为 `false`
- `insertSmartField` 中类名判断逻辑改为:只要 `hasUnderline !== true` 就加 `.no-underline`
- `defaultContent.ts``smartField()` 直接给所有字段加 `.no-underline`
### 需求 2修复删除图片后占位符文字偏左
删除图片后,占位符恢复为默认状态,但提示文字(如「插入/点击放置图片」)在虚线框内偏左,未真正居中。
原因分析:虽然使用了 `position:absolute + transform:translate(-50%, -50%)`,但 `placeholder-text``display:block; width:100%` 的块级元素,其内部文本流默认 `text-align:left`,导致文字靠左。
修复方案:在所有 `.placeholder-text` 的 style 中追加 `text-align:center;`
## 涉及文件
- `src/pages/TemplateManage.tsx`(需求 1、2
- `src/utils/defaultContent.ts`(需求 1、2
- `src/pages/ReportEditor.tsx`(需求 2
## 需求影响范围
- 字段管理的默认值和插入逻辑
- 默认模板中所有 smartField 的下划线行为
- 所有图片占位符的提示文字对齐方式

View File

@@ -0,0 +1,43 @@
# 需求分析 —— 2026-04-18-23-19-44
## 需求来源
用户在实际使用和打印预览中发现多项排版和功能优化点。
## 需求概述
### 需求 1修复 field-value 输入内容往上飘
`.field-value` 输入框中的文字与模板正文不在同一基线上,总是向上偏移。即使去掉下划线,也希望文字内容与周围正文齐平。
### 需求 2姓名栏下方横线距离过远
「姓名:」下方的横线(`border-bottom`)与「姓名:」文字之间的距离太远,希望缩小到约 1px。
### 需求 3手术记录标题距上方横线过远
「手术记录」标题与上方医院名称的横线之间距离过大,希望缩小到约 2px。
### 需求 4Logo 插图位置微调
Logo 占位符相对于「西安交通大学第一附属医院 手术记录」的文字整体偏右下,希望向左移动 5px向上移动 5px。
### 需求 5导出 PDF 文件名修正
点击「导出报告」导出 PDF 时浏览器默认文件名为「My Google AI Studio App.pdf」希望改为与报告内容相关的自定义文件名`图文报告-{title}-{patient}-{hid}-{time}.pdf`)。
### 需求 6导出 JSON 文件名时间使用北京时间
导出 JSON 时文件名中的时间戳使用 `new Date().toISOString()`UTC 时间希望改为北京时间UTC+8
### 需求 7模板管理批量操作
在模板列表中为每个模板增加复选框,支持:
- 批量导出(将选中的多个模板打包为一个 JSON 文件)
- 批量删除(删除选中的多个模板)
- 允许列表中不留任何模板
## 涉及文件
- `src/utils/defaultContent.ts`(需求 1、2、3、4
- `src/utils/print.ts`(需求 1、5
- `src/pages/ReportEditor.tsx`(需求 5、6
- `src/pages/ReportManage.tsx`(需求 6
- `src/pages/TemplateManage.tsx`(需求 6、7
## 需求影响范围
- 默认模板排版细节基线对齐、间距、Logo 位置)
- 打印样式(下划线紧贴文字)
- 导出文件名生成逻辑
- 模板列表交互(复选框、批量操作)

View File

@@ -0,0 +1,34 @@
# 需求分析 —— 2026-04-18-23-39-35
## 需求来源
用户在实际使用中发现下划线功能异常、导出文件名不一致、输入框间距过大、以及表单缺乏逆向联动等问题。
## 需求概述
### 需求 1修复下划线勾选状态异常及打印失效
1. **默认勾选未取消**`DEFAULT_FORM_FIELDS` 中的基础字段(如患者姓名、住院号)默认 `hasUnderline` 仍为 `true` 或未指定,导致编辑弹窗中仍显示为勾选状态。
2. **打印失效**`print.ts``@media print` 的样式逻辑有问题,导致无论是否勾选「打印时显示下划线」,打印时都不显示下划线。
3. **下划线紧贴文字**:用户希望勾选后的下划线紧贴文字底部。
### 需求 2统一 PDF 和 JSON 导出文件名
当前 PDF 导出文件名与 JSON 不一致(缺少时间后缀或格式不同),希望两者完全一致。
### 需求 3缩紧 field-value 内文字间距
`.field-value` 当前有 `padding:0 4px; margin:0 2px`,导致框内文字偏右,打印时左右间距过大。希望缩小 padding 和 margin。
### 需求 4ReportEditor 表单逆向联动
当前实现了「点击中间模板字段 → 右侧表单高亮滚动」,但反向逻辑缺失:点击右侧表单输入框时,中间模板内的对应 `.field-value` 不会高亮,也不会滚动到对应位置。
## 涉及文件
- `src/types.ts`(需求 1
- `src/pages/TemplateManage.tsx`(需求 1
- `src/utils/print.ts`(需求 1、2、3
- `src/utils/defaultContent.ts`(需求 3
- `src/pages/ReportEditor.tsx`(需求 2、4
- `src/pages/ReportManage.tsx`(需求 2
## 需求影响范围
- 字段默认配置数据
- 打印样式逻辑
- 输入框内边距/外边距
- 编辑器双向联动交互