2026-04-19-00-01-50 - 高亮样式柔化、点击空白取消、打印高亮隔离、下划线配置同步

src/pages/ReportEditor.tsx

@@ -55,6 +55,26 @@ export default function ReportEditor() {
   
   const [activeTab, setActiveTab] = useState<'info' | 'video'>('info');
   const [activeFieldKey, setActiveFieldKey] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!editorRef.current) return;
+    const allFields = editorRef.current.querySelectorAll('.field-value');
+    allFields.forEach(el => {
+      (el as HTMLElement).style.backgroundColor = '';
+      (el as HTMLElement).style.outline = '';
+      (el as HTMLElement).style.outlineOffset = '';
+    });
+    if (activeFieldKey) {
+      const targetEl = editorRef.current.querySelector(`.field-value[data-bind="${activeFieldKey}"]`) as HTMLElement;
+      if (targetEl) {
+        targetEl.style.backgroundColor = '#f1f5f9';
+        targetEl.style.outline = '1px solid #94a3b8';
+        targetEl.style.outlineOffset = '1px';
+        targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }
+    }
+  }, [activeFieldKey]);
+
   const [multiSelectOptions, setMultiSelectOptions] = useState<Record<string, string[]>>({
     surgeon: ['张医生', '李医生', '王医生'],
     assistant: ['赵医生', '钱医生', '孙医生'],
@@ -356,11 +376,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();
         };
@@ -401,6 +434,9 @@ export default function ReportEditor() {
         return;
       }
 
+      // 点击空白处清除高亮
+      setActiveFieldKey(null);
+
       const placeholder = targetEl.closest('.image-placeholder') as HTMLElement | null;
       if (!placeholder) return;
 
@@ -409,12 +445,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 {
@@ -532,6 +581,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' });
@@ -1413,9 +1475,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>
@@ -1486,7 +1548,7 @@ export default function ReportEditor() {
                     if (field.type === 'text' || field.type === 'date') {
                       const inputType = field.type === 'date' ? 'date' : 'text';
                       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">
                             {field.label} {isRequired && <span className="text-red-500">*</span>}
                           </label>
@@ -1506,7 +1568,7 @@ export default function ReportEditor() {
                       const isOpen = openDropdown === field.key;
                       const opts = field.options || (field.key === 'anesthesiaType' ? anesthesiaOptions : []);
                       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>
                           <div
                             className="w-full px-3 py-2 border border-border rounded-lg bg-white flex items-center min-h-[42px] cursor-text"
@@ -1615,7 +1677,7 @@ export default function ReportEditor() {
                       const currentInputText = multiInputText[field.key] !== undefined ? multiInputText[field.key] : displayText;
 
                       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>
                           <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"
@@ -1696,7 +1758,7 @@ export default function ReportEditor() {
                         const { h: h12, isPM } = from24h(h24val);
 
                         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>
                             <div className="flex items-center gap-2">
                               <select
@@ -1753,7 +1815,7 @@ export default function ReportEditor() {
                       const { h: h12g, isPM: isPMg } = from24h(h24);
 
                       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>
                           <div className="flex items-center gap-2">
                             <select
@@ -1821,13 +1883,6 @@ export default function ReportEditor() {
                   />
 
                   <div className="flex gap-2 overflow-x-auto pb-2 no-scrollbar items-center">
-                    <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>
                     {videos.map((v, i) => (
                       <div 
                         key={v.id}
@@ -1853,6 +1908,13 @@ 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 && videos.length > 0 && (
@@ -1996,14 +2058,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;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>&#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);
                 setPlaceholderModal({...placeholderModal, isOpen: false});
@@ -2062,7 +2124,7 @@ export default function ReportEditor() {
             <div className="space-y-3">
               <button
                 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 patient = reportData.patientName || '未知';
                   const hid = reportData.hospitalId || '无号';
@@ -2073,7 +2135,7 @@ export default function ReportEditor() {
               >导出 PDF</button>
               <button
                 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 patient = reportData.patientName || '未知';
                   const hid = reportData.hospitalId || '无号';

src/pages/ReportManage.tsx

@@ -178,7 +178,7 @@ export default function ReportManage() {
   const exportBulkJSON = () => {
     const selectedReports = reports.filter(r => selectedIds.includes(r.id));
     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`);
   };
 

src/pages/TemplateManage.tsx

@@ -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);
@@ -50,6 +52,7 @@ export default function TemplateManage() {
     isOpen: false, rows: '2', cols: '3'
   });
   const [imageAssets, setImageAssets] = useState<{ id: string; name: string; dataUrl: string }[]>([]);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
   const updatePageHeight = () => {
     if (!editorRef.current) return;
@@ -128,6 +131,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);
     }
@@ -385,6 +392,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', []);
@@ -404,7 +423,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>&#8203;`;
 
     const sel = window.getSelection();
@@ -480,6 +499,19 @@ export default function TemplateManage() {
     setFormFields(updated);
     storage.set('formFieldsConfig', updated);
     setEditingFieldKey(null);
+
+    // 同步更新编辑器中已插入字段的 classList
+    if (editorRef.current) {
+      const els = editorRef.current.querySelectorAll(`.field-value[data-bind="${key}"]`);
+      els.forEach(el => {
+        if (editFieldHasUnderline) {
+          el.classList.remove('no-underline');
+        } else {
+          el.classList.add('no-underline');
+        }
+      });
+      saveTemplateContent();
+    }
   };
 
   const addField = () => {
@@ -570,22 +602,91 @@ export default function TemplateManage() {
   };
 
   const handleDeleteTemplate = (id: string) => {
-    if (templates.length <= 1) {
-      alert('至少需要保留一个模板');
-      return;
-    }
     if (window.confirm('确定要删除此模板吗？')) {
       const allTemplates = storage.get<Template[]>('templates', []);
       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);
       if (currentTemplateId === id) {
-        const visible = updated.filter(t => templates.some(x => x.id === t.id));
-        setCurrentTemplateId(visible[0]?.id || null);
+        setCurrentTemplateId(updated[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 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', []);
@@ -603,14 +704,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;
@@ -651,6 +757,7 @@ export default function TemplateManage() {
       }
     }
     setIsModalOpen(false);
+    setImportedContent(null);
   };
 
   if (!currentUser) return null;
@@ -672,17 +779,48 @@ export default function TemplateManage() {
             <Plus size={16} />
           </button>
         </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">
           {templates.map(tpl => (
             <div 
               key={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 
                   ? 'bg-white border-accent shadow-sm' 
                   : 'bg-transparent border-transparent hover:bg-white hover:border-border'
               }`}
             >
+              <div className="flex items-start gap-2">
+                <input
+                  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}
@@ -696,14 +834,20 @@ export default function TemplateManage() {
                     >
                       编辑
                     </button>
-                {templates.length > 1 && (
+                    <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>
           ))}
@@ -813,9 +957,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>
@@ -912,7 +1056,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' });
@@ -1242,7 +1386,7 @@ export default function TemplateManage() {
             <div className="space-y-3">
               <button
                 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 || '模板';
                   printDocument(editorRef.current?.innerHTML || '', `${name}-${ts}`);
                   setExportModalOpen(false);
@@ -1251,7 +1395,7 @@ export default function TemplateManage() {
               >导出 PDF</button>
               <button
                 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 data = currentTemplate ? { ...currentTemplate, content: editorRef.current?.innerHTML } : { content: editorRef.current?.innerHTML };
                   const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
@@ -1279,6 +1423,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>
@@ -1303,7 +1460,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"
                 >
                   取消
@@ -1363,14 +1520,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;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>&#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');
                 wrapper.innerHTML = html;

src/types.ts

@@ -67,6 +67,7 @@ export interface Template {
   createdAt: string;
   updatedAt?: string;
   author: string;
+  fields?: FormField[];
 }
 
 export interface SystemSettings {
@@ -120,8 +121,8 @@ export interface FormField {
 }
 
 export const DEFAULT_FORM_FIELDS: FormField[] = [
-  { key: 'patientName', label: '患者姓名', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: true, hasUnderline: true },
-  { key: 'hospitalId', 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: false },
   { key: 'title', label: '手术名称', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: false },
   { key: 'patientGender', label: '患者性别', category: '单选', type: 'single_select', visibleInForm: true, isSystemLocked: false, options: ['男', '女'] },
   { key: 'patientAge', label: '患者年龄', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: false },

src/utils/defaultContent.ts

@@ -1,22 +1,20 @@
-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>&#8203;`;
+  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;`;
 };
 
 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;transform:translate(-5px,-5px);">
         <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>
+        <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>
 </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('patientGender')}&nbsp;
     年龄：${smartField('patientAge')}&nbsp;
@@ -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;">&nbsp;</p>

src/utils/print.ts

@@ -1,4 +1,6 @@
 export const printDocument = (htmlContent: string, docTitle: string = '图文报告') => {
+  const originalTitle = document.title;
+  document.title = docTitle;
   const iframe = document.createElement('iframe');
   iframe.style.position = 'fixed';
   iframe.style.right = '0';
@@ -17,6 +19,7 @@ export const printDocument = (htmlContent: string, docTitle: string = '图文报
       <html>
       <head>
         <meta charset="utf-8">
+        <title>${docTitle}</title>
         <style>
           @page { size: A4; margin: 15mm 10mm; }
           * { box-sizing: border-box; }
@@ -34,12 +37,12 @@ export const printDocument = (htmlContent: string, docTitle: string = '图文报
           .delete-btn { display: none !important; }
           .image-placeholder:not(.has-image) { display: none !important; }
           .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-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; }
           @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 { outline: none !important; box-shadow: none !important; 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; }
           }
         </style>
@@ -53,6 +56,7 @@ export const printDocument = (htmlContent: string, docTitle: string = '图文报
     win.focus();
     setTimeout(() => {
       win.print();
+      document.title = originalTitle;
       setTimeout(() => {
         if (iframe.parentNode) document.body.removeChild(iframe);
       }, 1000);

工程分析/实现方案-2026-04-18-19-37-56.md

@@ -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`，需验证所有占位符均满足。

工程分析/实现方案-2026-04-18-20-03-44.md

@@ -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`，避免影响下一次创建。

工程分析/实现方案-2026-04-18-22-59-10.md

@@ -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` 样式时，应使用精确的字符串匹配，避免误伤其他元素。

工程分析/实现方案-2026-04-18-23-19-44.md

@@ -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 小时偏差，但中国大陆不使用夏令时，所以安全。

工程分析/实现方案-2026-04-18-23-39-35.md

@@ -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;
+  ...
+}
+```
+
+## 需求 4：ReportEditor 表单逆向联动
+
+### 修改文件：`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` 规则。

工程分析/实现方案-2026-04-19-00-01-50.md

@@ -0,0 +1,65 @@
+# 实现方案 —— 2026-04-19-00-01-50
+
+## 方案目标
+修复高亮样式、实现点击空白取消、阻断打印高亮、同步字段下划线配置到已插入的 DOM。
+
+## 需求 1 & 2：优化高亮样式、点击空白取消、阻断打印
+
+### 修改文件 1：`src/pages/ReportEditor.tsx`
+
+1. **点击空白取消高亮**：在 `handleEditorClick` 中，如果点击目标不是 `.field-value`，则设置 `setActiveFieldKey(null)`。
+
+2. **柔和高亮样式**：修改 `activeFieldKey` 的 `useEffect`：
+   - 清除样式时：恢复为 `''`（空字符串）而非硬编码颜色，让 CSS 类重新接管
+   - 高亮时：`backgroundColor: '#f1f5f9'`（浅灰）、`outline: '1px solid #94a3b8'`（细灰边框）、`outlineOffset: '1px'`
+   - 不再使用 `box-shadow`
+
+### 修改文件 2：`src/utils/print.ts`
+
+在 `@media print` 中强制抹除 `outline` 和 `box-shadow`：
+```css
+@media print {
+  .smart-field-wrapper .field-value {
+    outline: none !important;
+    box-shadow: none !important;
+    border: none !important;
+    border-bottom: 1px solid #000 !important;
+    border-radius: 0 !important;
+    background: transparent !important;
+    padding: 0 2px 1px 2px !important;
+  }
+  .smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
+}
+```
+
+## 需求 3：修复下划线勾选无效
+
+### 修改文件：`src/pages/TemplateManage.tsx`
+
+在 `saveFieldEdit` 函数中，保存字段配置后，扫描编辑器中所有 `data-bind` 匹配的 `.field-value`，根据新的 `hasUnderline` 值动态添加/移除 `.no-underline` 类：
+```ts
+if (editorRef.current) {
+  const els = editorRef.current.querySelectorAll(`.field-value[data-bind="${editingFieldId}"]`);
+  els.forEach(el => {
+    if (editFieldHasUnderline) {
+      el.classList.remove('no-underline');
+    } else {
+      el.classList.add('no-underline');
+    }
+  });
+  saveTemplateContent();
+}
+```
+
+## 涉及文件及修改点
+| 文件 | 修改点 |
+|------|--------|
+| `src/pages/ReportEditor.tsx` | handleEditorClick 点击空白取消高亮；useEffect 柔和高亮样式 |
+| `src/utils/print.ts` | @media print 强制抹除 outline/box-shadow |
+| `src/pages/TemplateManage.tsx` | saveFieldEdit 同步更新已插入字段的 classList |
+
+## 风险与注意事项
+1. `handleEditorClick` 中增加 `setActiveFieldKey(null)` 时，需确保不会影响 `.image-placeholder` 的点击处理逻辑（placeholder 点击在 field-value 判断之后）。
+2. `useEffect` 中清除样式时使用 `style.backgroundColor = ''` 而非 `= '#f8fafc'`，这样可以让元素的 CSS 类样式重新生效，避免硬编码颜色与 CSS 类冲突。
+3. `saveFieldEdit` 中扫描 DOM 并修改 classList 后，必须调用 `saveTemplateContent()` 将变更持久化到 localStorage。
+4. 打印样式中 `outline: none !important` 和 `box-shadow: none !important` 的优先级需确保高于任何内联样式。

工程分析/测试方案-2026-04-18-19-37-56.md

@@ -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` 所在行同样适用，对齐时不破坏字段与文字的同行关系。
+
+## 回归测试
+- 确保视频上传、播放、关键帧摘取功能正常。
+- 确保图片占位符的插入、拖拽、自动帧填充功能正常。
+- 确保打印样式正常，图片和字段显示正确。
+
+## 测试通过标准
+所有用例均通过，无控制台报错，排版结构完整。

工程分析/测试方案-2026-04-18-20-03-44.md

@@ -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 占位符被删除。
+- 再次点击可打开图片选择器插入图片。
+
+## 回归测试
+- 确保模板列表的加载、编辑、删除功能正常。
+- 确保默认模板的其他部分（基础信息、手术步骤、图片表格等）不受影响。
+- 确保打印样式正常。
+
+## 测试通过标准
+所有用例均通过，无控制台报错，导入/导出数据完整准确。

工程分析/测试方案-2026-04-18-22-59-10.md

@@ -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. 分别检查各占位符的文字位置。
+**预期结果**：所有占位符文字均绝对居中。
+
+## 回归测试
+- 确保字段插入、编辑、删除功能正常。
+- 确保图片占位符的插入、删除、拖拽功能正常。
+- 确保打印样式正常。
+
+## 测试通过标准
+所有用例均通过，无控制台报错，排版居中对齐准确。

工程分析/测试方案-2026-04-18-23-19-44.md

@@ -0,0 +1,73 @@
+# 测试方案 —— 2026-04-18-23-19-44
+
+## 测试目标
+验证排版修复、导出文件名优化和模板批量操作的正确性。
+
+## 测试用例
+
+### TC-1：field-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. 选中所有模板并批量删除。
+**预期结果**：列表显示为空，无报错。
+
+## 回归测试
+- 确保打印功能正常，样式无异常。
+- 确保单个模板导出/导入功能正常。
+- 确保报告编辑、保存、加载功能正常。
+
+## 测试通过标准
+所有用例均通过，无控制台报错，排版对齐准确，文件名正确。

工程分析/测试方案-2026-04-18-23-39-35.md

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

工程分析/测试方案-2026-04-19-00-01-50.md

@@ -0,0 +1,48 @@
+# 测试方案 —— 2026-04-19-00-01-50
+
+## 测试目标
+验证高亮样式修复、点击空白取消、打印纯净度、下划线同步的有效性。
+
+## 测试用例
+
+### TC-1：高亮样式柔和
+**前置条件**：ReportEditor 已加载默认模板。  
+**步骤**：
+1. 点击中间模板中的任意字段。
+**预期结果**：字段显示浅灰色背景和细灰边框（不再是刺眼的蓝色）。
+
+### TC-2：点击空白取消高亮
+**前置条件**：ReportEditor 中某个字段已被高亮。  
+**步骤**：
+1. 点击模板中的空白区域（非字段、非占位符）。
+**预期结果**：字段高亮样式消失，恢复为默认状态。
+
+### TC-3：打印不带高亮框
+**前置条件**：ReportEditor 中某个字段处于高亮状态。  
+**步骤**：
+1. 点击打印预览。
+**预期结果**：打印内容中不显示任何高亮框、outline 或 box-shadow，字段显示正常。
+
+### TC-4：勾选下划线后打印生效
+**前置条件**：TemplateManage 中某字段已插入模板，且未勾选下划线。  
+**步骤**：
+1. 在字段管理中勾选该字段的「打印时显示下划线」。
+2. 保存字段编辑。
+3. 在 ReportEditor 中打印预览。
+**预期结果**：该字段显示下划线。
+
+### TC-5：取消下划线后打印不显示
+**前置条件**：TemplateManage 中某字段已勾选下划线并保存。  
+**步骤**：
+1. 取消勾选该字段的「打印时显示下划线」。
+2. 保存字段编辑。
+3. 在 ReportEditor 中打印预览。
+**预期结果**：该字段不显示下划线。
+
+## 回归测试
+- 确保字段插入、编辑、删除功能正常。
+- 确保双向联动（中间点击→右侧高亮、右侧点击→中间高亮）正常。
+- 确保打印样式整体正常。
+
+## 测试通过标准
+所有用例均通过，无控制台报错，打印内容纯净无高亮残留。

工程分析/经验记录.md

@@ -971,3 +971,255 @@ if ((settings.autoInsertDelay || 0) > 0) {
 - 当为 `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 = ''`，否则同一文件无法重复选择。
+
+---
+
+## 记录 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`，避免出现「选中已删除项」或「当前模板不存在」的异常状态。
+
+---
+
+## 记录 37：下划线默认修复、PDF 文件名、间距缩紧、表单逆向联动
+
+**A. 具体问题**
+1. 模板管理中「患者姓名」「住院号」的「打印时显示下划线」默认仍为勾选状态，且勾选与否在打印时都失去下划线效果。
+2. 导出 PDF 时浏览器默认文件名为「My Google AI Studio App.pdf」，与 JSON 文件名不一致。
+3. `.field-value` 内文字偏右，打印时左右间距过大。
+4. ReportEditor 中点击右侧表单输入框时，中间模板内的对应字段不会高亮，也不会滚动定位。
+
+**B. 产生问题原因**
+1. `DEFAULT_FORM_FIELDS` 中 `patientName` 和 `hospitalId` 硬编码了 `hasUnderline: true`；`defaultContent.ts` 中 `smartField()` 直接给所有字段加 `.no-underline`；`print.ts` 中 `@media print` 的 `.field-value` 默认显示下划线、`.no-underline` 时隐藏，逻辑正确但默认模板中的字段全部带有 `.no-underline`。
+2. `printDocument()` 虽设置了 `document.title = docTitle`，但 iframe 内部的 HTML 缺少 `<title>` 标签，某些浏览器优先使用父窗口的原始 title。
+3. `smartField()` 中 `padding:0 4px; margin:0 2px` 撑开了左右间距。
+4. 之前只实现了「点击中间模板 → 右侧表单高亮滚动」的单向联动，右侧表单缺少触发 `activeFieldKey` 的事件绑定。
+
+**C. 解决问题方案**
+1. **下划线修复**：
+   - `src/types.ts`：`DEFAULT_FORM_FIELDS` 中 `patientName` 和 `hospitalId` 的 `hasUnderline: true` → `false`
+   - `src/utils/print.ts`：`@media print` 下 `.field-value` 的 `padding-bottom:1px` → `0px`，使下划线紧贴文字
+2. **PDF 文件名**：在 iframe HTML 的 `<head>` 中注入 `<title>${docTitle}</title>`，确保浏览器打印对话框识别正确的默认文件名
+3. **间距缩紧**：
+   - `src/utils/defaultContent.ts`：`padding:0 4px;margin:0 2px;min-width:32px` → `padding:0 2px;margin:0;min-width:24px;text-align:center`
+   - `src/utils/print.ts`：同步缩小非打印和打印样式中的 padding/margin
+4. **表单逆向联动**：
+   - `src/pages/ReportEditor.tsx`：新增 `useEffect` 监听 `activeFieldKey`，实时修改中间模板中对应 `.field-value` 的 `backgroundColor` 和 `boxShadow`，并调用 `scrollIntoView({ block: 'center' })`
+   - 给右侧所有字段类型（text/date/single_select/multi_select/time）的容器 `div` 添加 `onClick={() => setActiveFieldKey(field.key)}`
+   - 给之前缺少高亮样式的通用 time 字段容器补充了 `activeFieldKey` 高亮类名
+
+**D. 后续如何避免问题**
+- 当修改 `DEFAULT_FORM_FIELDS` 的默认值时，需意识到已有用户的 `localStorage` 中保存的旧配置不会自动更新。如果默认值变更影响核心功能，应考虑在应用启动时做配置迁移或版本校验。
+- iframe 打印的文件名行为在不同浏览器间存在差异（Chrome 用父窗口 title，Safari 可能用 iframe title），最稳妥的方案是同时设置父窗口 `document.title` 和 iframe 内部 `<title>` 标签。
+- 双向联动时，`useEffect` 中的 DOM style 操作需要在组件卸载或 `activeFieldKey` 清空时清除，避免残留高亮。当前实现中 `activeFieldKey` 为 `null` 时会遍历清除所有高亮，逻辑已覆盖。
+- 给容器 div 添加 `onClick` 时需注意事件冒泡：容器内的子元素（如 input、button）的点击事件会自然冒泡到容器，如果子元素有自己的 onClick 处理（如 dropdown 选项），需确保已调用 `stopPropagation()`。
+
+
+---
+
+## 记录 38：高亮样式柔化、点击空白取消、打印高亮隔离、下划线配置同步
+
+**A. 具体问题**
+1. ReportEditor 中 `.field-value` 激活高亮使用蓝色 box-shadow（`0 0 0 2px #3b82f6`）+ `#eff6ff` 背景，视觉过于刺眼。
+2. 点击编辑器空白区域时，高亮样式不会自动清除，用户必须点击另一个字段才能切换高亮。
+3. 打印/PDF 导出时，高亮的内联样式（box-shadow、backgroundColor）会带入打印件，导致打印内容出现蓝框。
+4. TemplateManage 中编辑字段的「打印时显示下划线」勾选后，已插入到模板中的 `.field-value` 仍然保留旧的 `.no-underline` 类，打印时不显示下划线。
+
+**B. 产生问题原因**
+1. `activeFieldKey` 的 `useEffect` 中使用了高对比度的蓝色阴影和背景色，未考虑柔和视觉体验。
+2. `handleEditorClick` 的 capture 事件处理器仅在点击 `.field-value` 时设置 `activeFieldKey`，没有处理「点击非字段区域时清空」的逻辑。
+3. `print.ts` 的 `@media print` 中只重置了 `border` 和 `background`，遗漏了 `outline` 和 `box-shadow`。
+4. `saveFieldEdit` 仅更新了 JSON state 和 `localStorage` 中的字段配置，没有同步扫描 `editorRef.current` 中已存在的 DOM 元素并更新其 `classList`。
+
+**C. 解决问题方案**
+1. **柔和高亮**：将 `useEffect` 中的高亮样式改为 `backgroundColor: '#f1f5f9'`（浅灰背景）、`outline: '1px solid #94a3b8'`（细灰边框）、`outlineOffset: '1px'`；清除样式时用 `''` 而非硬编码颜色，让 CSS 类重新接管。
+2. **点击空白取消高亮**：在 `handleEditorClick` 中，`.field-value` 判断分支结束后增加 `setActiveFieldKey(null)`，使点击任何非字段区域都会清除高亮。
+3. **打印隔离高亮**：`print.ts` 的 `@media print` 中强制添加 `outline: none !important; box-shadow: none !important;`，确保打印输出不受任何高亮内联样式影响。
+4. **下划线配置同步**：`saveFieldEdit` 末尾增加 DOM 扫描逻辑：
+   ```ts
+   if (editorRef.current) {
+     const els = editorRef.current.querySelectorAll(`.field-value[data-bind="${key}"]`);
+     els.forEach(el => {
+       if (editFieldHasUnderline) el.classList.remove('no-underline');
+       else el.classList.add('no-underline');
+     });
+     saveTemplateContent();
+   }
+   ```
+
+**D. 后续如何避免问题**
+- 任何通过 JS 直接操作 DOM 添加的内联样式（如高亮），都必须在 `@media print` 中通过 `!important` 强制抹除，防止打印件被屏幕交互样式污染。
+- 当字段配置（如 `hasUnderline`）同时影响「未来插入的元素」和「已存在的 DOM 元素」时，保存逻辑必须包含对已插入 DOM 的同步更新，不能只更新 state。
+- `contentEditable` 中的 capture 阶段点击事件是处理全局点击行为（如点击空白取消）的理想位置，但需注意不要阻断其他正常交互路径（如 placeholder 点击）。

工程分析/需求分析-2026-04-18-19-37-56.md

@@ -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 结构

工程分析/需求分析-2026-04-18-20-03-44.md

@@ -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 结构
+- 模板创建流程需支持字段配置写入

工程分析/需求分析-2026-04-18-22-59-10.md

@@ -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 的下划线行为
+- 所有图片占位符的提示文字对齐方式

工程分析/需求分析-2026-04-18-23-19-44.md

@@ -0,0 +1,43 @@
+# 需求分析 —— 2026-04-18-23-19-44
+
+## 需求来源
+用户在实际使用和打印预览中发现多项排版和功能优化点。
+
+## 需求概述
+
+### 需求 1：修复 field-value 输入内容往上飘
+`.field-value` 输入框中的文字与模板正文不在同一基线上，总是向上偏移。即使去掉下划线，也希望文字内容与周围正文齐平。
+
+### 需求 2：姓名栏下方横线距离过远
+「姓名：」下方的横线（`border-bottom`）与「姓名：」文字之间的距离太远，希望缩小到约 1px。
+
+### 需求 3：手术记录标题距上方横线过远
+「手术记录」标题与上方医院名称的横线之间距离过大，希望缩小到约 2px。
+
+### 需求 4：Logo 插图位置微调
+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 位置）
+- 打印样式（下划线紧贴文字）
+- 导出文件名生成逻辑
+- 模板列表交互（复选框、批量操作）

工程分析/需求分析-2026-04-18-23-39-35.md

@@ -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。
+
+### 需求 4：ReportEditor 表单逆向联动
+当前实现了「点击中间模板字段 → 右侧表单高亮滚动」，但反向逻辑缺失：点击右侧表单输入框时，中间模板内的对应 `.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）
+
+## 需求影响范围
+- 字段默认配置数据
+- 打印样式逻辑
+- 输入框内边距/外边距
+- 编辑器双向联动交互

工程分析/需求分析-2026-04-19-00-01-50.md

@@ -0,0 +1,26 @@
+# 需求分析 —— 2026-04-19-00-01-50
+
+## 需求来源
+用户在实际使用中发现高亮样式刺眼、点击空白不取消高亮、以及下划线勾选无效的问题。
+
+## 需求概述
+
+### 需求 1：高亮蓝框太明显
+ReportEditor 中 `.field-value` 激活时的蓝框（`box-shadow: 0 0 0 2px #3b82f6` + `#eff6ff` 背景）过于刺眼，希望改为更柔和的选中效果（类似 TemplateManage 中的淡色高亮）。
+
+### 需求 2：点击空白处高亮不消失 + 打印带蓝框
+1. 点击模板空白区域时，`.field-value` 的高亮样式不会自动清除。
+2. 打印/PDF 导出时，高亮的内联样式（box-shadow、backgroundColor）会带入打印件，导致打印内容出现蓝框。
+
+### 需求 3：下划线勾选无效
+在 TemplateManage 的字段管理中勾选「打印时显示下划线」并保存后，已插入到模板中的 `.field-value` 仍然带有 `.no-underline` 类，导致打印时不显示下划线。
+
+## 涉及文件
+- `src/pages/ReportEditor.tsx`（需求 1、2）
+- `src/utils/print.ts`（需求 2）
+- `src/pages/TemplateManage.tsx`（需求 3）
+
+## 需求影响范围
+- 编辑器高亮交互体验
+- 打印样式纯净度
+- 字段配置与 DOM 的同步机制