Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
48337c382c | ||
|
|
726bbc5bac | ||
|
|
c5648077e8 | ||
|
|
9c09e6cccc | ||
|
|
f98177938f | ||
|
|
8ffb9162d3 | ||
|
|
32f8b2a7ec | ||
|
|
519cc6fc82 |
@@ -356,11 +356,24 @@ export default function ReportEditor() {
|
||||
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: 100%; height: auto; display: block; margin: 0 auto;" draggable="false">
|
||||
<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();
|
||||
};
|
||||
@@ -409,12 +422,25 @@ export default function ReportEditor() {
|
||||
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;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;">${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 {
|
||||
@@ -489,16 +515,24 @@ export default function ReportEditor() {
|
||||
}, []);
|
||||
|
||||
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:100%;height:auto;display:block;margin:0 auto;" draggable="false">
|
||||
<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.height = 'auto';
|
||||
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();
|
||||
};
|
||||
@@ -524,6 +558,19 @@ export default function ReportEditor() {
|
||||
}
|
||||
};
|
||||
|
||||
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' });
|
||||
@@ -664,14 +711,20 @@ export default function ReportEditor() {
|
||||
if (emptyPlaceholder) {
|
||||
emptyPlaceholder.innerHTML = `
|
||||
<span class="delete-btn" contenteditable="false">×</span>
|
||||
<img src="${newFrame.dataUrl}" style="max-width: 100%; height: auto; display: block; margin: 0 auto;" draggable="false">
|
||||
<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.height = 'auto';
|
||||
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();
|
||||
}
|
||||
@@ -696,16 +749,24 @@ export default function ReportEditor() {
|
||||
};
|
||||
|
||||
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:100%;height:auto;display:block;margin:0 auto;" draggable="false">
|
||||
<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.height = 'auto';
|
||||
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();
|
||||
};
|
||||
@@ -1391,9 +1452,9 @@ export default function ReportEditor() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-1 pr-3 mr-3 border-r border-border">
|
||||
<button onClick={() => execCmd('justifyLeft')} 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 onClick={() => execCmd('justifyCenter')} 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 onClick={() => execCmd('justifyRight')} 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>
|
||||
<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>
|
||||
@@ -1798,16 +1859,7 @@ export default function ReportEditor() {
|
||||
onChange={handleVideoUpload}
|
||||
/>
|
||||
|
||||
{videos.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex gap-2 overflow-x-auto pb-2 no-scrollbar">
|
||||
<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 className="flex gap-2 overflow-x-auto pb-2 no-scrollbar items-center">
|
||||
{videos.map((v, i) => (
|
||||
<div
|
||||
key={v.id}
|
||||
@@ -1833,9 +1885,16 @@ export default function ReportEditor() {
|
||||
</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 && (
|
||||
{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
|
||||
@@ -1928,8 +1987,6 @@ export default function ReportEditor() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1978,14 +2035,14 @@ export default function ReportEditor() {
|
||||
const id = 'ph_' + Date.now();
|
||||
let html: string;
|
||||
if (inTable) {
|
||||
const styleStr = '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;">${hintText}</span></div>`;
|
||||
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;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 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;display:inline-block;vertical-align:middle;line-height:normal;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">${text}</span></span>​`;
|
||||
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});
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
import { Plus, Edit, Trash2, Save, Printer, Undo, Redo, Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, Table, Image as ImageIcon, Check, Download } from 'lucide-react';
|
||||
import { Plus, Edit, Trash2, Save, Printer, Undo, Redo, Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, Table, Image as ImageIcon, Check, Download, Upload } from 'lucide-react';
|
||||
import { User, Template, FormField, FieldType, DEFAULT_FORM_FIELDS } from '../types';
|
||||
import { defaultReportContent } from '../utils/defaultContent';
|
||||
import { printDocument } from '../utils/print';
|
||||
@@ -16,6 +16,8 @@ export default function TemplateManage() {
|
||||
const [exportModalOpen, setExportModalOpen] = useState(false);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [formData, setFormData] = useState({ name: '', desc: '' });
|
||||
const [importedContent, setImportedContent] = useState<{content: string; fields: FormField[]} | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [isSaved, setIsSaved] = useState(false);
|
||||
const editorRef = useRef<HTMLDivElement>(null);
|
||||
const savedRangeRef = useRef<Range | null>(null);
|
||||
@@ -35,11 +37,11 @@ export default function TemplateManage() {
|
||||
const [editFieldTimeFormat, setEditFieldTimeFormat] = useState('');
|
||||
const [editFieldTimeDefault, setEditFieldTimeDefault] = useState<'current' | 'specific'>('specific');
|
||||
const [editFieldFixedTimeValue, setEditFieldFixedTimeValue] = useState('');
|
||||
const [editFieldHasUnderline, setEditFieldHasUnderline] = useState(true);
|
||||
const [editFieldHasUnderline, setEditFieldHasUnderline] = useState(false);
|
||||
const [newFieldTimeFormat, setNewFieldTimeFormat] = useState('YYYY年MM月DD日');
|
||||
const [newFieldTimeDefault, setNewFieldTimeDefault] = useState<'current' | 'specific'>('specific');
|
||||
const [newFieldFixedTimeValue, setNewFieldFixedTimeValue] = useState('');
|
||||
const [newFieldHasUnderline, setNewFieldHasUnderline] = useState(true);
|
||||
const [newFieldHasUnderline, setNewFieldHasUnderline] = useState(false);
|
||||
const [customTimeFormats, setCustomTimeFormats] = useState<string[]>([]);
|
||||
const [formatDropdownOpen, setFormatDropdownOpen] = useState(false);
|
||||
const [newFormatDropdownOpen, setNewFormatDropdownOpen] = useState(false);
|
||||
@@ -128,6 +130,10 @@ export default function TemplateManage() {
|
||||
const template = templates.find(t => t.id === currentTemplateId);
|
||||
if (template) {
|
||||
editorRef.current.innerHTML = template.content;
|
||||
if (template.fields && template.fields.length > 0) {
|
||||
setFormFields(template.fields);
|
||||
storage.set('formFieldsConfig', template.fields);
|
||||
}
|
||||
}
|
||||
setTimeout(() => updatePageHeight(), 0);
|
||||
}
|
||||
@@ -143,16 +149,24 @@ export default function TemplateManage() {
|
||||
}, [currentUser]);
|
||||
|
||||
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:100%;height:auto;display:block;margin:0 auto;" draggable="false">
|
||||
<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.height = 'auto';
|
||||
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';
|
||||
saveTemplateContent();
|
||||
};
|
||||
|
||||
@@ -377,6 +391,18 @@ export default function TemplateManage() {
|
||||
}
|
||||
};
|
||||
|
||||
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;
|
||||
saveTemplateContent();
|
||||
}
|
||||
};
|
||||
|
||||
const saveTemplateContent = () => {
|
||||
if (!currentTemplateId || !editorRef.current) return;
|
||||
const allTemplates = storage.get<Template[]>('templates', []);
|
||||
@@ -396,7 +422,7 @@ export default function TemplateManage() {
|
||||
}
|
||||
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>​`;
|
||||
|
||||
const sel = window.getSelection();
|
||||
@@ -578,6 +604,48 @@ export default function TemplateManage() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleImportFile = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
try {
|
||||
const json = JSON.parse(event.target?.result as string);
|
||||
if (json.type !== 'surclaw_template_package') {
|
||||
alert('无效的模板包文件');
|
||||
return;
|
||||
}
|
||||
setFormData({ name: json.title || '', desc: json.description || '' });
|
||||
setImportedContent({
|
||||
content: json.content || '',
|
||||
fields: Array.isArray(json.fields) ? json.fields : []
|
||||
});
|
||||
} catch {
|
||||
alert('文件解析失败，请检查 JSON 格式');
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
if (e.target) e.target.value = '';
|
||||
};
|
||||
|
||||
const handleExportTemplate = (template: Template) => {
|
||||
const exportData = {
|
||||
version: '1.0',
|
||||
type: 'surclaw_template_package',
|
||||
title: template.name,
|
||||
description: template.desc || '',
|
||||
content: template.content,
|
||||
fields: template.fields || formFields
|
||||
};
|
||||
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 = `模板导出-${template.name}.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const handleModalSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const allTemplates = storage.get<Template[]>('templates', []);
|
||||
@@ -595,14 +663,19 @@ export default function TemplateManage() {
|
||||
id: 'tpl_' + Date.now(),
|
||||
name: formData.name,
|
||||
desc: formData.desc,
|
||||
content: defaultReportContent,
|
||||
content: importedContent?.content || defaultReportContent,
|
||||
createdAt: new Date().toISOString(),
|
||||
author: currentUser?.username || 'admin'
|
||||
author: currentUser?.username || 'admin',
|
||||
fields: importedContent?.fields || formFields
|
||||
};
|
||||
const updated = [...allTemplates, newTpl];
|
||||
setTemplates([...templates, newTpl]);
|
||||
storage.set('templates', updated);
|
||||
setCurrentTemplateId(newTpl.id);
|
||||
if (importedContent?.fields && importedContent.fields.length > 0) {
|
||||
setFormFields(importedContent.fields);
|
||||
storage.set('formFieldsConfig', importedContent.fields);
|
||||
}
|
||||
|
||||
const savedUsers = storage.get<User[]>('users', []);
|
||||
let updatedUsers = savedUsers;
|
||||
@@ -643,6 +716,7 @@ export default function TemplateManage() {
|
||||
}
|
||||
}
|
||||
setIsModalOpen(false);
|
||||
setImportedContent(null);
|
||||
};
|
||||
|
||||
if (!currentUser) return null;
|
||||
@@ -688,6 +762,12 @@ export default function TemplateManage() {
|
||||
>
|
||||
编辑
|
||||
</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); }}
|
||||
@@ -805,9 +885,9 @@ export default function TemplateManage() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-1 pr-3 mr-3 border-r border-border">
|
||||
<button onMouseDown={(e) => e.preventDefault()} onClick={() => execCmd('justifyLeft')} 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={() => execCmd('justifyCenter')} 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={() => execCmd('justifyRight')} 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>
|
||||
<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 onMouseDown={(e) => e.preventDefault()} 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>
|
||||
@@ -904,7 +984,7 @@ export default function TemplateManage() {
|
||||
setEditFieldTimeFormat(field.timeFormat || '');
|
||||
setEditFieldTimeDefault(field.timeDefault || 'specific');
|
||||
setEditFieldFixedTimeValue(field.fixedTimeValue || '');
|
||||
setEditFieldHasUnderline(field.hasUnderline !== false);
|
||||
setEditFieldHasUnderline(field.hasUnderline ?? false);
|
||||
const target = e.currentTarget;
|
||||
setTimeout(() => {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
@@ -1271,6 +1351,19 @@ export default function TemplateManage() {
|
||||
<div className="bg-white rounded-2xl p-10 w-full max-w-[500px] shadow-2xl border border-border">
|
||||
<h3 className="text-xl font-bold text-text-main mb-2">{isEditing ? '编辑模板信息' : '新增模板'}</h3>
|
||||
<p className="text-sm text-text-muted mb-8">设置模板的基本名称和描述</p>
|
||||
{!isEditing && (
|
||||
<div className="flex items-center gap-3 mb-6 p-3 bg-slate-50 rounded-xl border border-dashed border-slate-200">
|
||||
<div className="text-xs text-text-muted flex-1">已有模板文件？点击右侧图标导入</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="w-8 h-8 bg-accent text-white rounded-lg flex items-center justify-center hover:bg-blue-700 transition-colors shadow-sm"
|
||||
>
|
||||
<Upload size={16} />
|
||||
</button>
|
||||
<input ref={fileInputRef} type="file" accept=".json" className="hidden" onChange={handleImportFile} />
|
||||
</div>
|
||||
)}
|
||||
<form onSubmit={handleModalSubmit} className="space-y-6">
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-xs font-bold text-text-main uppercase tracking-wider">模板名称 *</label>
|
||||
@@ -1295,7 +1388,7 @@ export default function TemplateManage() {
|
||||
<div className="flex justify-end gap-3 pt-4 border-t border-border">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsModalOpen(false)}
|
||||
onClick={() => { setIsModalOpen(false); setImportedContent(null); }}
|
||||
className="px-6 py-2.5 bg-slate-100 text-text-muted rounded-lg text-sm font-semibold hover:bg-slate-200 transition-colors"
|
||||
>
|
||||
取消
|
||||
@@ -1355,14 +1448,14 @@ export default function TemplateManage() {
|
||||
const id = 'ph_' + Date.now();
|
||||
let html: string;
|
||||
if (inTable) {
|
||||
const styleStr = '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;">${hintText}</span></div>`;
|
||||
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;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 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;display:inline-block;vertical-align:middle;line-height:normal;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">${text}</span></span>​`;
|
||||
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>​`;
|
||||
}
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.innerHTML = html;
|
||||
|
||||
@@ -67,6 +67,7 @@ export interface Template {
|
||||
createdAt: string;
|
||||
updatedAt?: string;
|
||||
author: string;
|
||||
fields?: FormField[];
|
||||
}
|
||||
|
||||
export interface SystemSettings {
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
const noUnderlineKeys = ['patientName', 'patientGender', 'patientAge', 'department', 'bedNumber', 'hospitalId'];
|
||||
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${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>​`;
|
||||
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>​`;
|
||||
};
|
||||
|
||||
export const defaultReportContent = `
|
||||
<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="position:relative;display:inline-flex;align-items:center;justify-content:center;width:65px;height:65px;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;cursor:pointer;">
|
||||
<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="delete-btn" contenteditable="false">×</span>
|
||||
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;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;">LOGO</span>
|
||||
</span>
|
||||
<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>
|
||||
@@ -81,46 +79,46 @@ export const defaultReportContent = `
|
||||
<table style="width: 100%; border-collapse: collapse; margin: 20px 0; table-layout: fixed;">
|
||||
<tbody><tr>
|
||||
<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="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="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;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>
|
||||
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图A 腹腔镜探查</p>
|
||||
</td>
|
||||
<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="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="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;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>
|
||||
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图B 胆囊管夹闭与离断</p>
|
||||
</td>
|
||||
<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="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="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;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>
|
||||
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图C 胆囊动脉夹闭与离断</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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="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="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;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>
|
||||
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图D 胆囊剥离与床面止血</p>
|
||||
</td>
|
||||
<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="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="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;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>
|
||||
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图E 胆囊取出与钛夹确认</p>
|
||||
</td>
|
||||
<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="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="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;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>
|
||||
<p style="color: #64748b; font-size: 13px; margin: 0; padding: 0; line-height: 1.5;">图F 止血材料覆盖及检查</p>
|
||||
</td>
|
||||
@@ -145,7 +143,7 @@ export const defaultReportContent = `
|
||||
</p>
|
||||
|
||||
<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;display:inline-block;vertical-align:middle;line-height:normal;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 style="margin: 0; padding: 0; line-height: 1.5;"> </p>
|
||||
|
||||
82
工程分析/实现方案-2026-04-18-19-23-31.md
Normal file
82
工程分析/实现方案-2026-04-18-19-23-31.md
Normal file
@@ -0,0 +1,82 @@
|
||||
# 实现方案 —— 2026-04-18-19-23-31
|
||||
|
||||
## 方案目标
|
||||
修复视频分析模块空白问题，重构图片占位符的填充后尺寸逻辑。
|
||||
|
||||
## 需求 1：修复视频分析模块空白
|
||||
|
||||
### 修改文件
|
||||
`src/pages/ReportEditor.tsx`
|
||||
|
||||
### 修改内容
|
||||
将「上传视频」按钮和视频缩略图列表从 `videos.length > 0` 条件内部移出，使其始终渲染。仅保留视频播放器和关键帧网格在 `currentVideoIndex !== -1 && videos.length > 0` 条件下渲染。
|
||||
|
||||
修改后结构：
|
||||
```tsx
|
||||
{activeTab === 'video' && (
|
||||
<div className="space-y-2">
|
||||
<input ref={videoInputRef} ... />
|
||||
|
||||
{/* 始终可见：上传按钮 + 视频缩略图列表 */}
|
||||
<div className="flex gap-2 overflow-x-auto pb-2 no-scrollbar items-center">
|
||||
<button>上传视频</button>
|
||||
{videos.map(...)}
|
||||
</div>
|
||||
|
||||
{/* 条件渲染：视频播放器和关键帧 */}
|
||||
{currentVideoIndex !== -1 && videos.length > 0 && (
|
||||
<div className="space-y-2">...</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
```
|
||||
|
||||
## 需求 2：图片占位符尺寸自适应
|
||||
|
||||
### 核心逻辑
|
||||
1. **插入占位符时**：在 `style` 中注入 `max-width` 和 `max-height`，与 `width`/`height` 相同，便于后续读取限制值。
|
||||
2. **填充图片时**：
|
||||
- 读取占位符当前的 `max-width` / `max-height`（或回退到 `width` / `height`）
|
||||
- 将这两个值赋给内部 `<img>` 的 `max-width` / `max-height`
|
||||
- 设置 `object-fit: contain; object-position: left top`
|
||||
- 将占位符外壳的 `width`、`height`、`line-height` 设为 `auto` / `normal`
|
||||
- 保留 `max-width`、`max-height` 作为硬限制
|
||||
- 设置 `text-align: left; vertical-align: top`
|
||||
|
||||
### 修改文件及位置
|
||||
| 文件 | 函数/位置 | 修改内容 |
|
||||
|------|-----------|----------|
|
||||
| `src/pages/ReportEditor.tsx` | `fillPlaceholderSrc` | 填充后读取限制值，设置 img 和外壳样式 |
|
||||
| `src/pages/ReportEditor.tsx` | `fillPlaceholder` | 同上 |
|
||||
| `src/pages/ReportEditor.tsx` | `autoCaptureFrames` | 同上 |
|
||||
| `src/pages/ReportEditor.tsx` | placeholderModal 确认插入 | style 中增加 `max-width` / `max-height` |
|
||||
| `src/pages/TemplateManage.tsx` | `fillPlaceholderSrc` | 同上 |
|
||||
| `src/pages/TemplateManage.tsx` | placeholderModal 确认插入 | style 中增加 `max-width` / `max-height` |
|
||||
|
||||
### 样式值示例
|
||||
```ts
|
||||
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:100%;max-height:${mh};display:block;object-fit:contain;object-position:left top;" draggable="false">
|
||||
`;
|
||||
|
||||
placeholder.style.width = 'auto';
|
||||
placeholder.style.height = 'auto';
|
||||
placeholder.style.maxWidth = mw;
|
||||
placeholder.style.maxHeight = mh;
|
||||
placeholder.style.lineHeight = 'normal';
|
||||
placeholder.style.textAlign = 'left';
|
||||
placeholder.style.verticalAlign = 'top';
|
||||
```
|
||||
|
||||
## 需求 3：Logo 框大小保持 65px × 65px
|
||||
默认模板中 Logo 占位符的 `width:65px;height:65px` 保持不变。此需求通过不修改 Logo 占位符相关代码即可满足。
|
||||
|
||||
## 风险与注意事项
|
||||
1. 视频按钮移出条件渲染后，需确保 `videoInputRef` 的引用始终有效。
|
||||
2. 占位符 `width:auto` 后，在表格单元格（`td`）内的表现需要验证，确保不会超出单元格。
|
||||
3. `object-position: left top` 仅在 `object-fit: contain` 时生效。
|
||||
4. 需确保 `max-width` / `max-height` 在打印样式中不会被 `@media print` 规则覆盖。
|
||||
101
工程分析/实现方案-2026-04-18-19-37-56.md
Normal file
101
工程分析/实现方案-2026-04-18-19-37-56.md
Normal file
@@ -0,0 +1,101 @@
|
||||
# 实现方案 —— 2026-04-18-19-37-56
|
||||
|
||||
## 方案目标
|
||||
修复编辑器中的 4 个体验问题，提升视频面板、图片占位符和对齐功能的稳定性。
|
||||
|
||||
## 需求 1：视频上传按钮位置调整
|
||||
|
||||
### 修改文件
|
||||
`src/pages/ReportEditor.tsx`
|
||||
|
||||
### 修改内容
|
||||
在「视频分析」面板的缩略图滚动容器中，将 `<button>上传视频</button>` 从 `videos.map()` 之前移至之后。保持按钮样式和点击逻辑不变。
|
||||
|
||||
## 需求 2：图片占位符提示文字绝对居中
|
||||
|
||||
### 修改文件
|
||||
`src/pages/ReportEditor.tsx`、`src/pages/TemplateManage.tsx`、`src/utils/defaultContent.ts`
|
||||
|
||||
### 修改内容
|
||||
将 `.placeholder-text` 的样式改为绝对定位居中：
|
||||
```css
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: block;
|
||||
width: 100%;
|
||||
```
|
||||
|
||||
需要确保 `.image-placeholder` 父容器带有 `position: relative;`（默认模板和运行时插入逻辑中已具备）。
|
||||
|
||||
修改位置：
|
||||
1. `defaultContent.ts` 中 8 个占位符的 `.placeholder-text` style
|
||||
2. `ReportEditor.tsx` 中 `placeholderModal` 确认插入时的 `.placeholder-text` style
|
||||
3. `TemplateManage.tsx` 中 `placeholderModal` 确认插入时的 `.placeholder-text` style
|
||||
4. `ReportEditor.tsx` 和 `TemplateManage.tsx` 中 `handleEditorClick` 删除图片后重建 `.placeholder-text` 的 innerHTML
|
||||
|
||||
## 需求 3：删除图片后占位符恢复原始大小
|
||||
|
||||
### 修改文件
|
||||
`src/pages/ReportEditor.tsx`、`src/pages/TemplateManage.tsx`
|
||||
|
||||
### 修改内容
|
||||
在 `handleEditorClick` 中处理 `.delete-btn` 点击、恢复占位符为空的逻辑中，增加尺寸恢复：
|
||||
```ts
|
||||
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';
|
||||
```
|
||||
|
||||
同时需要恢复其他被修改的样式：
|
||||
- `border: 1px dashed #cbd5e1`
|
||||
- `background: #f8fafc`
|
||||
- `vertical-align: middle`（inline-block 占位符）
|
||||
- `justify-content: center; align-items: center`（flex 占位符）
|
||||
|
||||
由于无法直接区分 flex 和 inline-block，可以通过检查 `placeholder.style.display` 或简单地将 `justifyContent` 和 `alignItems` 重置为 `center`（对 inline-block 无影响）。
|
||||
|
||||
## 需求 4：对齐按钮改用安全的 DOM 操作
|
||||
|
||||
### 修改文件
|
||||
`src/pages/ReportEditor.tsx`、`src/pages/TemplateManage.tsx`
|
||||
|
||||
### 修改内容
|
||||
1. **新增 `changeAlignment` 方法**：
|
||||
```ts
|
||||
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, h4, h5, h6, li');
|
||||
if (block) {
|
||||
(block as HTMLElement).style.textAlign = align;
|
||||
if (editorRef.current) {
|
||||
contentRef.current = editorRef.current.innerHTML;
|
||||
saveDraftToStorage(); // ReportEditor
|
||||
// saveTemplateContent(); // TemplateManage
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
2. **替换工具栏按钮**：将三个对齐按钮的 `onClick={() => execCmd('justifyLeft')}` 等替换为 `onClick={() => changeAlignment('left')}` 等。保留 `onMouseDown={(e) => e.preventDefault()}` 以防止编辑器失焦。
|
||||
|
||||
## 涉及文件及修改点
|
||||
| 文件 | 修改点 |
|
||||
|------|--------|
|
||||
| `src/pages/ReportEditor.tsx` | 视频按钮位置；placeholder-text 样式（3 处：插入、删除恢复、Modal）；删除恢复时尺寸复原；新增 changeAlignment；替换对齐按钮 |
|
||||
| `src/pages/TemplateManage.tsx` | placeholder-text 样式（3 处）；删除恢复时尺寸复原；新增 changeAlignment；替换对齐按钮 |
|
||||
| `src/utils/defaultContent.ts` | 8 个占位符的 placeholder-text 样式更新为绝对居中 |
|
||||
|
||||
## 风险与注意事项
|
||||
1. `changeAlignment` 中 `closest('p, div, ...')` 如果选中了编辑器根容器（`contenteditable` div），可能会对齐整个文档。但由于工具栏按钮要求编辑器已聚焦，通常选区在正文内部，风险较低。
|
||||
2. 占位符删除恢复时，`maxWidth`/`maxHeight` 的回退逻辑需确保在所有场景下（默认模板、运行时插入）都能正确读取。
|
||||
3. 绝对居中的 `position:absolute` 需要父容器 `position:relative`，需验证所有占位符均满足。
|
||||
130
工程分析/实现方案-2026-04-18-20-03-44.md
Normal file
130
工程分析/实现方案-2026-04-18-20-03-44.md
Normal file
@@ -0,0 +1,130 @@
|
||||
# 实现方案 —— 2026-04-18-20-03-44
|
||||
|
||||
## 方案目标
|
||||
实现模板的导入/导出迁移能力，统一默认模板 Logo 的交互行为。
|
||||
|
||||
## 需求 1：模板导出功能
|
||||
|
||||
### 修改文件
|
||||
`src/pages/TemplateManage.tsx`
|
||||
|
||||
### 修改内容
|
||||
在模板列表的每个模板行操作列中增加「导出」按钮（使用 Download 图标）。点击时：
|
||||
```ts
|
||||
const handleExportTemplate = (template: Template) => {
|
||||
const exportData = {
|
||||
version: '1.0',
|
||||
type: 'surclaw_template_package',
|
||||
title: template.title,
|
||||
description: template.description,
|
||||
content: template.content,
|
||||
fields: template.fields || []
|
||||
};
|
||||
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 = `模板导出-${template.title}.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
```
|
||||
|
||||
## 需求 2：模板导入功能
|
||||
|
||||
### 修改文件
|
||||
`src/pages/TemplateManage.tsx`
|
||||
|
||||
### 修改内容
|
||||
1. **新增状态**：
|
||||
```ts
|
||||
const [importedContent, setImportedContent] = useState<{content: string, fields: FormField[]} | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
```
|
||||
|
||||
2. **新增导入处理函数**：
|
||||
```ts
|
||||
const handleImportFile = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
try {
|
||||
const json = JSON.parse(event.target?.result as string);
|
||||
if (json.type !== 'surclaw_template_package') {
|
||||
alert('无效的模板包文件');
|
||||
return;
|
||||
}
|
||||
setNewTemplateTitle(json.title || '');
|
||||
setNewTemplateDescription(json.description || '');
|
||||
setImportedContent({
|
||||
content: json.content || '',
|
||||
fields: Array.isArray(json.fields) ? json.fields : []
|
||||
});
|
||||
} catch {
|
||||
alert('文件解析失败，请检查 JSON 格式');
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
};
|
||||
```
|
||||
|
||||
3. **修改创建逻辑**：在 `handleCreateTemplate` 中，如果有 `importedContent`，优先使用导入的内容和字段：
|
||||
```ts
|
||||
const newTemplate: Template = {
|
||||
id: 'tmpl_' + Date.now(),
|
||||
title: newTemplateTitle,
|
||||
description: newTemplateDescription,
|
||||
content: importedContent?.content || `<div style="font-size:12pt;line-height:1.5;"><p>请输入模板内容...</p></div>`,
|
||||
fields: importedContent?.fields || [],
|
||||
createdAt: new Date().toISOString()
|
||||
};
|
||||
```
|
||||
|
||||
4. **UI 调整**：在新增模板 Modal 中标题下方加入导入区域：
|
||||
```tsx
|
||||
<div className="flex items-center gap-3 mb-4 p-3 bg-slate-50 rounded-xl border border-dashed border-slate-200">
|
||||
<div className="text-xs text-text-muted flex-1">已有模板文件？点击右侧图标导入</div>
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="w-8 h-8 bg-accent text-white rounded-lg flex items-center justify-center hover:bg-blue-700 transition-colors shadow-sm"
|
||||
>
|
||||
<Upload size={16} />
|
||||
</button>
|
||||
<input ref={fileInputRef} type="file" accept=".json" className="hidden" onChange={handleImportFile} />
|
||||
</div>
|
||||
```
|
||||
|
||||
5. **关闭 Modal 时重置**：`setImportedContent(null)`
|
||||
|
||||
## 需求 3：Logo 替换为可交互占位符
|
||||
|
||||
### 修改文件
|
||||
`src/utils/defaultContent.ts`
|
||||
|
||||
### 修改内容
|
||||
将默认模板顶部的 Logo HTML 替换为标准 `image-placeholder`：
|
||||
```html
|
||||
<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="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="image-placeholder"`：触发编辑器中的占位符交互逻辑
|
||||
- `data-mode="manual"`：标记为静态图片占位，不支持自动帧插入
|
||||
- `position:relative` + `position:absolute` 居中：确保提示文字绝对居中
|
||||
- `delete-btn`：支持点击右上方的「×」删除
|
||||
|
||||
## 涉及文件及修改点
|
||||
| 文件 | 修改点 |
|
||||
|------|--------|
|
||||
| `src/pages/TemplateManage.tsx` | 新增 `handleExportTemplate`；新增 `importedContent` 状态和 `handleImportFile`；修改 `handleCreateTemplate` 使用导入数据；新增模板 Modal 中增加导入 UI；模板列表操作列增加导出按钮 |
|
||||
| `src/utils/defaultContent.ts` | 顶部 Logo 替换为标准 `image-placeholder` |
|
||||
|
||||
## 风险与注意事项
|
||||
1. 导入的 JSON 中 `fields` 数组需要与 `FormField` 类型结构兼容。由于 JSON 导入的是纯数据，直接赋值给 `template.fields` 即可（TypeScript 编译时类型校验通过）。
|
||||
2. 导出文件名中包含模板标题，需注意标题中的特殊字符可能影响文件名（但浏览器通常会自动处理）。
|
||||
3. Logo 占位符替换后，原有「西安交通大学第一附属医院」的样式应保持不变，仅替换 Logo 部分。
|
||||
4. 新增模板弹窗关闭时，需同步重置 `importedContent` 为 `null`，避免影响下一次创建。
|
||||
66
工程分析/实现方案-2026-04-18-22-59-10.md
Normal file
66
工程分析/实现方案-2026-04-18-22-59-10.md
Normal 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>​`;
|
||||
};
|
||||
```
|
||||
|
||||
## 需求 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` 样式时，应使用精确的字符串匹配，避免误伤其他元素。
|
||||
54
工程分析/测试方案-2026-04-18-19-23-31.md
Normal file
54
工程分析/测试方案-2026-04-18-19-23-31.md
Normal file
@@ -0,0 +1,54 @@
|
||||
# 测试方案 —— 2026-04-18-19-23-31
|
||||
|
||||
## 测试目标
|
||||
验证视频分析模块空白修复和图片占位符自适应逻辑。
|
||||
|
||||
## 测试用例
|
||||
|
||||
### TC-1：视频分析模块无视频时显示上传按钮
|
||||
**前置条件**：新建报告，切换到「视频分析」Tab，尚未上传任何视频。
|
||||
**步骤**：
|
||||
1. 点击「视频分析」Tab。
|
||||
**预期结果**：
|
||||
- 面板显示「上传视频」按钮（缩小版，在水平滚动区域首位）。
|
||||
- 面板不显示视频播放器和关键帧区域。
|
||||
- 点击上传按钮可正常打开文件选择器。
|
||||
|
||||
### TC-2：视频分析模块有视频时正常显示
|
||||
**前置条件**：已上传至少一个视频。
|
||||
**步骤**：
|
||||
1. 切换到「视频分析」Tab。
|
||||
**预期结果**：
|
||||
- 上传按钮和视频缩略图列表均可见。
|
||||
- 选中视频后，播放器和关键帧区域正常显示。
|
||||
|
||||
### TC-3：图片占位符填充后尺寸自适应（小图片）
|
||||
**前置条件**：模板中有 200×200 的图片占位符，准备一张 100×80 的小图片。
|
||||
**步骤**：
|
||||
1. 将小图片插入占位符。
|
||||
**预期结果**：
|
||||
- 占位符宽度收缩为约 100px，高度收缩为约 80px。
|
||||
- 图片靠左上方放置，无多余空白。
|
||||
|
||||
### TC-4：图片占位符填充后尺寸自适应（大图片）
|
||||
**前置条件**：模板中有 200×200 的图片占位符，准备一张 800×600 的大图片。
|
||||
**步骤**：
|
||||
1. 将大图片插入占位符。
|
||||
**预期结果**：
|
||||
- 图片等比例缩小，最大不超过 200×200。
|
||||
- 占位符宽度收缩为缩小后的图片宽度（≤200px），高度同理。
|
||||
- 图片靠左上方放置。
|
||||
|
||||
### TC-5：Logo 占位符大小保持 65px × 65px
|
||||
**前置条件**：默认模板已加载。
|
||||
**步骤**：
|
||||
1. 检查顶部 Logo 占位符。
|
||||
**预期结果**：占位符尺寸为 65px × 65px，不受本次修改影响。
|
||||
|
||||
## 回归测试
|
||||
- 确保视频播放、关键帧摘取、拖拽插入功能正常。
|
||||
- 确保 `template-manage` 中的图片占位符同样支持尺寸自适应。
|
||||
- 确保打印样式正常，图片不会被截断。
|
||||
|
||||
## 测试通过标准
|
||||
所有用例均通过，无控制台报错，视频模块和图片占位符行为符合预期。
|
||||
48
工程分析/测试方案-2026-04-18-19-37-56.md
Normal file
48
工程分析/测试方案-2026-04-18-19-37-56.md
Normal file
@@ -0,0 +1,48 @@
|
||||
# 测试方案 —— 2026-04-18-19-37-56
|
||||
|
||||
## 测试目标
|
||||
验证 4 项编辑器体验修复的正确性和稳定性。
|
||||
|
||||
## 测试用例
|
||||
|
||||
### TC-1：视频上传按钮位于列表末尾
|
||||
**前置条件**：已上传至少一个视频。
|
||||
**步骤**：
|
||||
1. 切换到「视频分析」Tab。
|
||||
**预期结果**：
|
||||
- 视频缩略图列表中，已有视频在前，「上传视频」按钮在最后。
|
||||
- 点击上传按钮可正常打开文件选择器。
|
||||
|
||||
### TC-2：图片占位符提示文字绝对居中
|
||||
**前置条件**：默认模板已加载。
|
||||
**步骤**：
|
||||
1. 查看顶部 Logo 占位符和表格内图片占位符。
|
||||
**预期结果**：
|
||||
- 「插入图片」或「插入/点击放置图片」文字在占位框正中心，不偏上也不偏下。
|
||||
- 占位符高度不同时（65px vs 200px），文字始终居中。
|
||||
|
||||
### TC-3：删除图片后占位符恢复原始大小
|
||||
**前置条件**：模板中有 200×200 的图片占位符，已插入图片。
|
||||
**步骤**：
|
||||
1. 点击图片上的「×」删除按钮。
|
||||
**预期结果**：
|
||||
- 占位符恢复为虚线框，宽度恢复为 200px，高度恢复为 200px。
|
||||
- 提示文字居中显示。
|
||||
- 占位符仍可重新插入图片。
|
||||
|
||||
### TC-4：对齐按钮不破坏混合排版
|
||||
**前置条件**：默认模板已加载，「手术者签名：」行包含文字和签名占位符。
|
||||
**步骤**：
|
||||
1. 将光标放在「手术者签名：」这一行。
|
||||
2. 分别点击「左对齐」「居中」「右对齐」按钮。
|
||||
**预期结果**：
|
||||
- 整行（文字 + 占位符）作为一个整体对齐，不会换行分离。
|
||||
- `.field-value` 所在行同样适用，对齐时不破坏字段与文字的同行关系。
|
||||
|
||||
## 回归测试
|
||||
- 确保视频上传、播放、关键帧摘取功能正常。
|
||||
- 确保图片占位符的插入、拖拽、自动帧填充功能正常。
|
||||
- 确保打印样式正常，图片和字段显示正确。
|
||||
|
||||
## 测试通过标准
|
||||
所有用例均通过，无控制台报错，排版结构完整。
|
||||
62
工程分析/测试方案-2026-04-18-20-03-44.md
Normal file
62
工程分析/测试方案-2026-04-18-20-03-44.md
Normal file
@@ -0,0 +1,62 @@
|
||||
# 测试方案 —— 2026-04-18-20-03-44
|
||||
|
||||
## 测试目标
|
||||
验证模板导入/导出功能和默认模板 Logo 替换的正确性。
|
||||
|
||||
## 测试用例
|
||||
|
||||
### TC-1：模板导出
|
||||
**前置条件**：模板列表中已有至少一个模板，且该模板有内容和字段配置。
|
||||
**步骤**：
|
||||
1. 在模板列表中找到目标模板。
|
||||
2. 点击操作列的「导出」按钮。
|
||||
**预期结果**：
|
||||
- 浏览器下载一个 JSON 文件，文件名为 `模板导出-{模板名称}.json`。
|
||||
- JSON 内容包含 `version`、`type`、`title`、`description`、`content`、`fields` 字段。
|
||||
- `fields` 数组与模板原有的字段配置一致。
|
||||
|
||||
### TC-2：模板导入（自动填充名称和描述）
|
||||
**前置条件**：已有一个有效的模板导出 JSON 文件。
|
||||
**步骤**：
|
||||
1. 点击「新增模板」按钮。
|
||||
2. 在弹窗中点击导入图标，选择 JSON 文件。
|
||||
**预期结果**：
|
||||
- 模板名称输入框自动填充为 JSON 中的 `title`。
|
||||
- 模板描述输入框自动填充为 JSON 中的 `description`。
|
||||
- 无控制台报错。
|
||||
|
||||
### TC-3：模板导入后创建
|
||||
**前置条件**：已完成 TC-2 的导入操作。
|
||||
**步骤**：
|
||||
1. 点击「创建」按钮。
|
||||
2. 在新创建的模板中点击「编辑模板」。
|
||||
**预期结果**：
|
||||
- 编辑器中显示的内容与导入 JSON 中的 `content` 一致。
|
||||
- 字段管理中的配置与导入 JSON 中的 `fields` 一致。
|
||||
|
||||
### TC-4：导入无效文件
|
||||
**前置条件**：准备一个非 JSON 文件或格式错误的 JSON。
|
||||
**步骤**：
|
||||
1. 在新增模板弹窗中选择无效文件。
|
||||
**预期结果**：
|
||||
- 弹出提示「文件解析失败，请检查 JSON 格式」或「无效的模板包文件」。
|
||||
- 表单保持空白，不填充任何数据。
|
||||
|
||||
### TC-5：Logo 占位符交互
|
||||
**前置条件**：新建报告，默认模板已加载。
|
||||
**步骤**：
|
||||
1. 查看顶部 Logo 区域。
|
||||
2. 点击 Logo 占位符右上方的「×」。
|
||||
3. 再次点击 Logo 区域。
|
||||
**预期结果**：
|
||||
- Logo 区域显示为虚线框，提示文字「LOGO」居中显示。
|
||||
- 点击「×」后 Logo 占位符被删除。
|
||||
- 再次点击可打开图片选择器插入图片。
|
||||
|
||||
## 回归测试
|
||||
- 确保模板列表的加载、编辑、删除功能正常。
|
||||
- 确保默认模板的其他部分（基础信息、手术步骤、图片表格等）不受影响。
|
||||
- 确保打印样式正常。
|
||||
|
||||
## 测试通过标准
|
||||
所有用例均通过，无控制台报错，导入/导出数据完整准确。
|
||||
54
工程分析/测试方案-2026-04-18-22-59-10.md
Normal file
54
工程分析/测试方案-2026-04-18-22-59-10.md
Normal 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. 分别检查各占位符的文字位置。
|
||||
**预期结果**：所有占位符文字均绝对居中。
|
||||
|
||||
## 回归测试
|
||||
- 确保字段插入、编辑、删除功能正常。
|
||||
- 确保图片占位符的插入、删除、拖拽功能正常。
|
||||
- 确保打印样式正常。
|
||||
|
||||
## 测试通过标准
|
||||
所有用例均通过，无控制台报错，排版居中对齐准确。
|
||||
133
工程分析/经验记录.md
133
工程分析/经验记录.md
@@ -942,3 +942,136 @@ if ((settings.autoInsertDelay || 0) > 0) {
|
||||
**D. 后续如何避免问题**
|
||||
- 当为 `image-placeholder` 引入新的核心属性（如 `data-mode`、`data-allow-source`）时，必须同步检索 `defaultContent.ts` 和任何预置模板文件，确保静态模板中的占位符结构与运行时插入逻辑保持一致。
|
||||
- 默认模板修改后，应通过「新建报告 → 检查 DOM」快速验证所有占位符是否携带了最新属性。
|
||||
|
||||
---
|
||||
|
||||
## 记录 31：六项 UI/UX 优化集中实施
|
||||
|
||||
**A. 具体问题**
|
||||
用户提出六项体验优化需求：基础信息字段打印无下划线、编辑器字段联动高亮、视频上传按钮整合、视频面板间距紧凑化、签名与日期之间空行、图片占位符填充后高度自适应。
|
||||
|
||||
**B. 产生问题原因**
|
||||
均为长期使用中积累的交互和排版细节问题：
|
||||
1. 默认模板的基础字段（姓名/性别/年龄/科别/床号/住院号）打印时默认带下划线，但临床场景中这些字段通常不需要下划线。
|
||||
2. 编辑器中点击正文 `field-value` 后右侧没有视觉反馈，用户不知道对应哪个输入框。
|
||||
3. 视频上传按钮独立占一行，浪费垂直空间。
|
||||
4. 视频面板各区域间距过大，挤压了关键帧列表的展示空间。
|
||||
5. 签名和日期之间缺少空行，排版拥挤。
|
||||
6. 图片占位符填充后仍保留固定高度（如 200px），导致图片下方出现大片空白。
|
||||
|
||||
**C. 解决问题方案**
|
||||
1. **基础字段无下划线**：在 `defaultContent.ts` 的 `smartField()` 中硬编码 6 个 key（`patientName`, `patientGender`, `patientAge`, `department`, `bedNumber`, `hospitalId`），自动注入 `.no-underline` 类；同时保留 `hasUnderline` 配置机制供 TemplateManage 自定义。
|
||||
2. **字段联动高亮**：新增 `activeFieldKey` 状态；点击 `field-value` 时设置该状态并滚动到对应 `id={`input-${bindKey}`}` 元素；为右侧所有字段类型（text/date/single_select/multi_select/time）的容器统一添加 `p-2 -mx-2 rounded-xl transition-all duration-300 ${activeFieldKey === field.key ? 'bg-blue-50 ring-1 ring-accent shadow-sm' : ''}`。
|
||||
3. **视频按钮整合**：删除独立的大按钮，在缩略图滚动容器的首位插入缩小版按钮（`shrink-0 w-24 h-[68px]`），样式与视频卡片一致。
|
||||
4. **视频间距紧凑**：将 `space-y-4` 逐层改为 `space-y-2`；关键帧摘取标题区域改为 `pt-1 border-t border-border`。
|
||||
5. **签名空行**：在签名 `<p>` 和日期 `<p>` 之间插入 `<p style="margin:0;padding:0;line-height:1.5;"> </p>`。
|
||||
6. **占位符高度自适应**：在 `fillPlaceholderSrc`、`fillPlaceholder`、`autoCaptureFrames`（ReportEditor）以及 `fillPlaceholderSrc`（TemplateManage）中，填充图片后统一设置 `placeholder.style.height = 'auto'; placeholder.style.width = 'auto'; placeholder.style.lineHeight = 'normal';`，并将图片 style 中的 `max-height:100%;object-fit:contain` 改为 `height:auto`。
|
||||
|
||||
**D. 后续如何避免问题**
|
||||
- 当为 `image-placeholder` 修改填充后的样式行为时，必须同步检索所有填充入口（`fillPlaceholderSrc`、`fillPlaceholder`、自动帧插入、拖拽填充等），并同步到 `TemplateManage.tsx`。
|
||||
- 右侧表单字段容器样式如果统一（如高亮背景），应在所有字段类型的渲染分支中同步添加，避免某些类型遗漏。
|
||||
- 默认模板修改后应通过「新建报告 → 检查 DOM 结构」快速验证。
|
||||
|
||||
---
|
||||
|
||||
## 记录 32：视频分析模块空白修复与图片占位符自适应逻辑重构
|
||||
|
||||
**A. 具体问题**
|
||||
1. 上一轮优化中将「上传视频」按钮移入了 `videos.length > 0` 条件渲染内部，导致无视频时整个「视频分析」面板空白，用户无法上传第一个视频。
|
||||
2. 图片占位符填充后仅将 `height` 设为 `auto`，但宽度仍保持预设值（如 200px），导致图片周围有大量空白，用户希望占位符能紧缩包围图片。
|
||||
|
||||
**B. 产生问题原因**
|
||||
1. **视频按钮位置错误**：重构视频面板时，将上传按钮和缩略图列表全部包裹在 `{videos.length > 0 && (...)}` 中，未意识到上传按钮必须始终可见。
|
||||
2. **占位符尺寸逻辑不完整**：此前仅将 `height` 改为 `auto`，未同步处理 `width`，也未利用 `max-width`/`max-height` 作为硬限制来实现等比例缩放。
|
||||
|
||||
**C. 解决问题方案**
|
||||
1. **修复视频面板**：将上传按钮和缩略图列表移出 `videos.length > 0` 条件，使其始终渲染；仅保留视频播放器和关键帧网格在 `{currentVideoIndex !== -1 && videos.length > 0 && (...)}` 中条件渲染。注意：移出后需同步删除对应的 `</div>)}` 关闭标签，否则会导致 JSX 结构不匹配（esbuild 报错「Unexpected closing tag」）。
|
||||
2. **重构占位符尺寸逻辑**：
|
||||
- **插入时**：在 `placeholderModal` 确认插入的 `styleStr` 中，为 inline-block 占位符追加 `max-width:${w}px;max-height:${h}px;`（表格内占位符原本就有）。
|
||||
- **填充时**：在 `fillPlaceholderSrc`、`fillPlaceholder`、`autoCaptureFrames`（ReportEditor）和 `fillPlaceholderSrc`（TemplateManage）中统一执行以下步骤：
|
||||
- 读取 `placeholder.style.maxWidth || placeholder.style.width` 和 `placeholder.style.maxHeight || placeholder.style.height` 作为硬限制值 `mw` / `mh`
|
||||
- 将 `<img>` 的 style 设为 `max-width:${mw};max-height:${mh};display:block;object-fit:contain;object-position:left top;`
|
||||
- 将占位符外壳设为 `width:auto;height:auto;line-height:normal;max-width:${mw};max-height:${mh};text-align:left;vertical-align:top;justify-content:flex-start;align-items:flex-start;`
|
||||
- 这样，小图片会 shrink-wrap 到实际尺寸，大图片会等比例缩小到限制范围内，且靠左上方放置。
|
||||
|
||||
**D. 后续如何避免问题**
|
||||
- 重构条件渲染的 JSX 结构时，必须仔细核对打开和关闭标签的数量和层级。建议使用编辑器格式化或 build 工具（如 esbuild）立即验证。
|
||||
- `image-placeholder` 的尺寸逻辑涉及「创建时预设」和「填充后自适应」两个阶段，修改时必须同时考虑：
|
||||
- 创建时是否写入了 `max-width`/`max-height`
|
||||
- 填充时是否正确读取并应用这些限制值
|
||||
- 所有填充入口（本地上传、签名插入、系统素材、自动帧插入、拖拽填充）是否同步更新
|
||||
- 默认模板中的占位符如果没有 `max-width`/`max-height`，回退逻辑 `|| placeholder.style.width` 仍能正确获取限制值，但后续修改默认模板时应注意统一添加 `max-width`/`max-height` 以显式声明意图。
|
||||
|
||||
---
|
||||
|
||||
## 记录 33：四项编辑器体验优化集中实施
|
||||
|
||||
**A. 具体问题**
|
||||
1. 视频分析面板中「上传视频」按钮位于视频缩略图列表首位，不符合「先列出现有项，最后提供添加操作」的操作直觉。
|
||||
2. 图片占位符内的提示文字未在框中绝对居中，当占位符高度较大时文字明显偏上。
|
||||
3. 删除占位符内已插入的图片后，占位符保持收缩后的 `width:auto; height:auto` 尺寸，未恢复为原始预设大小。
|
||||
4. 点击「左对齐/居中/右对齐」按钮时，浏览器原生 `execCommand('justifyLeft')` 会用 `<div align="left">` 包裹选区，导致包含 `.field-value` 或 `.image-placeholder` 的段落被肢解，文字与输入框/图片强制换行分离。
|
||||
|
||||
**B. 产生问题原因**
|
||||
1. 上一轮重构视频面板时，将上传按钮移入了缩略图列表，但放在了首位而非末尾。
|
||||
2. 占位符提示文字使用默认的行内流布局居中，依赖于 `line-height` 和父容器的 `align-items: center`，在填充后 `line-height` 被改为 `normal`，导致文字不再居中。
|
||||
3. 删除恢复逻辑仅重置了 `border` 和 `background`，未恢复 `width`、`height`、`lineHeight` 等尺寸属性。
|
||||
4. `execCommand` 的对齐命令实现过于粗暴，会直接修改 DOM 树结构以创建对齐容器，无法安全地处理混合排版（文字 + 交互元素）。
|
||||
|
||||
**C. 解决问题方案**
|
||||
1. **视频按钮位置**：将上传按钮从 `videos.map()` 之前移至之后，保持所有样式和点击逻辑不变。
|
||||
2. **占位符文字绝对居中**：
|
||||
- 将 `.placeholder-text` 的样式统一改为 `position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:block; width:100%;`
|
||||
- 给所有表格内的 `.image-placeholder` 父容器添加 `position:relative;`（inline-block 和签名占位符原本已有）
|
||||
- 修改范围覆盖 `defaultContent.ts`（8 个占位符）、`ReportEditor.tsx`（Modal 插入 + 删除恢复）、`TemplateManage.tsx`（Modal 插入 + 删除恢复）
|
||||
3. **删除后恢复尺寸**：在删除恢复逻辑中增加：
|
||||
```ts
|
||||
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';
|
||||
```
|
||||
同时根据占位符原始宽度（`maxWidth || width`）判断显示「插图」（<80px）或「插入/点击放置图片」。
|
||||
4. **安全对齐**：弃用 `execCommand('justifyLeft'/'justifyCenter'/'justifyRight')`，新增 `changeAlignment(align)` 方法：
|
||||
- 通过 `window.getSelection()` 获取选区
|
||||
- 使用 `closest('p, div, td, h1, h2, h3, li')` 找到最近的块级祖先
|
||||
- 直接设置 `(block as HTMLElement).style.textAlign = align`
|
||||
- 同步保存内容快照
|
||||
- 对齐按钮增加 `onMouseDown={(e) => e.preventDefault()}` 防止编辑器失焦
|
||||
|
||||
**D. 后续如何避免问题**
|
||||
- 当修改 `image-placeholder` 的创建或恢复逻辑时，必须在所有入口同步更新：`defaultContent.ts`（静态模板）、`ReportEditor.tsx`（运行时插入/填充/删除恢复）、`TemplateManage.tsx`（模板管理）。
|
||||
- 任何涉及 `execCommand` 的富文本操作都应评估其安全性，优先使用直接 DOM 样式操作（如 `style.textAlign`、`style.lineHeight`）替代，避免浏览器原生命令对复杂 DOM 结构的不可控修改。
|
||||
- 绝对定位的居中方案（`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 = ''`，否则同一文件无法重复选择。
|
||||
|
||||
30
工程分析/需求分析-2026-04-18-19-23-31.md
Normal file
30
工程分析/需求分析-2026-04-18-19-23-31.md
Normal file
@@ -0,0 +1,30 @@
|
||||
# 需求分析 —— 2026-04-18-19-23-31
|
||||
|
||||
## 需求来源
|
||||
用户在实际使用中发现两个问题，要求进行修复和优化。
|
||||
|
||||
## 需求概述
|
||||
|
||||
### 需求 1：修复视频分析模块空白问题
|
||||
在 `ReportEditor` 中，上一轮修改将「上传视频」按钮移入了 `videos.length > 0` 的条件渲染内部，导致当没有视频时，整个「视频分析」面板变为空白，用户无法上传第一个视频。
|
||||
|
||||
**预期行为**：无论是否有已上传视频，「上传视频」按钮和缩略图滚动列表都应始终可见。
|
||||
|
||||
### 需求 2：图片占位符尺寸自适应与等比例缩放限制
|
||||
当前图片占位符填充图片后，虽然高度变为 `auto`，但宽度仍保持预设值（如 200px），导致图片在占位符内居中显示，周围仍有大量空白。用户希望：
|
||||
- 预设的宽高仅作为**最大限制**（`max-width` / `max-height`）
|
||||
- 如果图片超出限制，则等比例缩小
|
||||
- 图片靠左上方放置（`object-position: left top`）
|
||||
- 占位符自身的虚线框大小要**紧缩包围（shrink-wrap）**成图片实际缩放后的尺寸
|
||||
|
||||
### 需求 3：Logo 框大小保持 65px × 65px
|
||||
默认模板中顶部医院 Logo 占位符的尺寸应保持 65px × 65px 不变。
|
||||
|
||||
## 涉及文件
|
||||
- `src/pages/ReportEditor.tsx`（需求 1、2）
|
||||
- `src/pages/TemplateManage.tsx`（需求 2）
|
||||
|
||||
## 需求影响范围
|
||||
- 视频分析面板的可见性逻辑
|
||||
- 图片占位符的填充后样式行为
|
||||
- 打印/预览时的图片尺寸表现
|
||||
29
工程分析/需求分析-2026-04-18-19-37-56.md
Normal file
29
工程分析/需求分析-2026-04-18-19-37-56.md
Normal file
@@ -0,0 +1,29 @@
|
||||
# 需求分析 —— 2026-04-18-19-37-56
|
||||
|
||||
## 需求来源
|
||||
用户在实际使用中发现 4 个编辑器体验问题，要求进行修复和优化。
|
||||
|
||||
## 需求概述
|
||||
|
||||
### 需求 1：视频上传按钮位置调整
|
||||
在 `ReportEditor` 的「视频分析」面板中，「上传视频」按钮当前位于视频缩略图列表的首位。用户希望将其移至列表末尾，以符合「先列出已有视频，最后提供添加操作」的操作直觉。
|
||||
|
||||
### 需求 2：图片占位符提示文字绝对居中
|
||||
图片占位符（`.image-placeholder`）内的提示文字（如「插入/点击放置图片」）目前未在框中绝对居中。当占位符高度较大或行高不一时，文字会偏上或偏下。用户希望文字在占位符内绝对居中显示。
|
||||
|
||||
### 需求 3：删除图片后占位符恢复原始大小
|
||||
当向图片占位符插入图片后，占位符会收缩到图片实际尺寸（`width:auto; height:auto`）。但点击「×」删除图片后，占位符不会恢复为原始预设大小，而是保持收缩后的尺寸。用户希望删除后占位符能恢复为最初创建时的宽度和高度。
|
||||
|
||||
### 需求 4：对齐按钮导致混合排版换行
|
||||
点击富文本工具栏的「左对齐/居中/右对齐」按钮时，浏览器原生的 `document.execCommand('justifyLeft')` 等命令会粗暴地用 `<div align="left">` 包裹选区，导致包含 `.field-value` 或 `.image-placeholder` 的段落被肢解，文字与输入框/图片强制换行分离。用户希望对齐操作安全地作用于整个段落，不破坏混合排版结构。
|
||||
|
||||
## 涉及文件
|
||||
- `src/pages/ReportEditor.tsx`（需求 1、2、3、4）
|
||||
- `src/pages/TemplateManage.tsx`（需求 2、3、4）
|
||||
- `src/utils/defaultContent.ts`（需求 2、3）
|
||||
|
||||
## 需求影响范围
|
||||
- 视频分析面板布局
|
||||
- 图片占位符的视觉表现和交互反馈
|
||||
- 富文本对齐功能的实现方式
|
||||
- 默认模板中占位符的 HTML 结构
|
||||
52
工程分析/需求分析-2026-04-18-20-03-44.md
Normal file
52
工程分析/需求分析-2026-04-18-20-03-44.md
Normal file
@@ -0,0 +1,52 @@
|
||||
# 需求分析 —— 2026-04-18-20-03-44
|
||||
|
||||
## 需求来源
|
||||
用户希望增强模板管理模块的数据迁移能力和默认模板的交互一致性。
|
||||
|
||||
## 需求概述
|
||||
|
||||
### 需求 1：模板导出功能
|
||||
在 `TemplateManage` 的模板列表中，新增「导出」按钮。导出内容需包含：
|
||||
- 模板名称（`title`）
|
||||
- 模板描述（`description`）
|
||||
- 模板内容（`content`）
|
||||
- 字段管理配置（`fields`）
|
||||
|
||||
导出格式为 JSON，结构如下：
|
||||
```json
|
||||
{
|
||||
"version": "1.0",
|
||||
"type": "surclaw_template_package",
|
||||
"title": "...",
|
||||
"description": "...",
|
||||
"content": "...",
|
||||
"fields": []
|
||||
}
|
||||
```
|
||||
|
||||
### 需求 2：模板导入功能
|
||||
在「新增模板」弹窗中，新增「导入本地模板」选项。用户选择 JSON 文件后：
|
||||
- 自动解析并填充模板名称和描述到表单
|
||||
- 暂存模板内容和字段配置
|
||||
- 点击「创建」时，将暂存的内容和字段一并写入新模板
|
||||
|
||||
导入 UI 使用指定的样式类名：`w-8 h-8 bg-accent text-white rounded-lg flex items-center justify-center hover:bg-blue-700 transition-colors shadow-sm`
|
||||
|
||||
### 需求 3：Logo 替换为可交互占位符
|
||||
默认模板 `defaultContent.ts` 中顶部医院 Logo 当前为硬编码的 `<span>` 结构（非标准 `image-placeholder`），导致：
|
||||
- 无法点击右上方的「×」删除
|
||||
- 无法触发图片上传/选择逻辑
|
||||
- 与编辑器中其他图片占位符的交互不一致
|
||||
|
||||
需将其替换为标准的 65×65 `image-placeholder`（`data-mode="manual"`），使其支持删除、点击插入等完整交互。
|
||||
|
||||
## 涉及文件
|
||||
- `src/pages/TemplateManage.tsx`（需求 1、2）
|
||||
- `src/utils/defaultContent.ts`（需求 3）
|
||||
- `src/types.ts`（确认 Template 类型结构）
|
||||
|
||||
## 需求影响范围
|
||||
- 模板列表操作列新增导出按钮
|
||||
- 新增模板弹窗新增导入 UI 和逻辑
|
||||
- 默认模板头部 Logo 的 HTML 结构
|
||||
- 模板创建流程需支持字段配置写入
|
||||
32
工程分析/需求分析-2026-04-18-22-59-10.md
Normal file
32
工程分析/需求分析-2026-04-18-22-59-10.md
Normal 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 的下划线行为
|
||||
- 所有图片占位符的提示文字对齐方式
|
||||
Reference in New Issue
Block a user