2026-04-18-00-02-08 - 拖拽关键帧样式修复、占位符分类隔离与Modal弹窗改造、表格插入Modal化

src/pages/ReportEditor.tsx

@@ -66,6 +66,12 @@ export default function ReportEditor() {
   const [imagePickerOpen, setImagePickerOpen] = useState(false);
   const [imagePickerTarget, setImagePickerTarget] = useState<HTMLElement | null>(null);
   const [imageAssets, setImageAssets] = useState<{id: string; name: string; dataUrl: string}[]>([]);
+  const [placeholderModal, setPlaceholderModal] = useState({
+    isOpen: false, width: '200', height: '200', mode: 'frame' as 'frame' | 'manual'
+  });
+  const [tableModal, setTableModal] = useState({
+    isOpen: false, rows: '2', cols: '3'
+  });
 
   const editorRef = useRef<HTMLDivElement>(null);
   const videoRef = useRef<HTMLVideoElement>(null);
@@ -479,54 +485,13 @@ export default function ReportEditor() {
   };
 
   const insertTable = () => {
-    const rowsStr = prompt('请输入行数:', '2');
-    const colsStr = prompt('请输入列数:', '3');
-    if (rowsStr && colsStr) {
-      const rows = parseInt(rowsStr);
-      const cols = parseInt(colsStr);
-      if (isNaN(rows) || isNaN(cols)) return;
-
-      let table = '<table style="width: 100%; border-collapse: collapse; margin: 16px 0; table-layout: fixed;">';
-      for (let i = 0; i < rows; i++) {
-        table += '<tr>';
-        for (let j = 0; j < cols; j++) {
-          table += '<td style="padding: 8px; border: 1px solid #e2e8f0; vertical-align: top;">单元格</td>';
-        }
-        table += '</tr>';
-      }
-      table += '</table><p></p>';
-      execCmd('insertHTML', table);
-    }
+    editorRef.current?.focus();
+    setTableModal({ isOpen: true, rows: '2', cols: '3' });
   };
 
   const insertImage = () => {
     editorRef.current?.focus();
-    let width = 200;
-    let height = 200;
-    while (true) {
-      const input = prompt('请输入占位符的最大宽度和高度(px)，用*号分隔（如: 100*50）。留空则默认宽高为 200*200。(提示: 正文一行文字高度约为 20 像素左右)', '');
-      if (input === null) return;
-      const trimmed = input.trim();
-      if (trimmed === '') break;
-      const parts = trimmed.split('*').map(s => s.trim());
-      if (parts.length === 2 && /^\d+$/.test(parts[0]) && /^\d+$/.test(parts[1])) {
-        width = parseInt(parts[0]) || 0;
-        height = parseInt(parts[1]) || 0;
-        break;
-      }
-      alert('格式错误，请确保使用 * 分隔两个数字，例如 100*50');
-    }
-
-    let styleStr = 'display:inline-flex;align-items:center;justify-content:center;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;';
-    if (width > 0) styleStr += `width:${width}px;`;
-    if (height > 0) styleStr += `height:${height}px;`;
-
-    const showShortText = width > 0 && width < 80;
-    const hintText = showShortText ? '插入图片' : '插入/点击放置图片';
-
-    const id = 'ph_' + Date.now();
-    const html = `<span id="${id}" class="image-placeholder" data-placeholder="true" contenteditable="false" style="${styleStr}"><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;">${hintText}</span></span>&#8203;`;
-    execCmd('insertHTML', html);
+    setPlaceholderModal({ isOpen: true, width: '200', height: '200', mode: 'frame' });
   };
 
   const handleVideoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -655,7 +620,7 @@ export default function ReportEditor() {
 
         setTimeout(() => {
           if (!editorRef.current) return;
-          const emptyPlaceholder = editorRef.current.querySelector('.image-placeholder:not(.has-image)') as HTMLElement | null;
+          const emptyPlaceholder = editorRef.current.querySelector('.image-placeholder:not(.has-image):not([data-mode="manual"])') as HTMLElement | null;
           if (emptyPlaceholder) {
             emptyPlaceholder.innerHTML = `
               <span class="delete-btn" contenteditable="false">×</span>
@@ -688,15 +653,21 @@ export default function ReportEditor() {
   const fillPlaceholder = (placeholder: HTMLElement, frame: CapturedFrame) => {
     placeholder.innerHTML = `
       <span class="delete-btn" contenteditable="false">×</span>
-      <img src="${frame.dataUrl}" style="max-width: 100%; height: auto; display: block; margin: 0 auto;" draggable="false">
+      <img src="${frame.dataUrl}" style="max-width:100%;max-height:100%;object-fit:contain;display:block;margin:0 auto;" draggable="false">
     `;
     placeholder.classList.add('has-image');
+    placeholder.style.border = 'none';
+    placeholder.style.background = 'transparent';
     if (editorRef.current) contentRef.current = editorRef.current.innerHTML;
     saveDraftToStorage();
   };
 
   const handleDrop = (e: React.DragEvent, placeholder: HTMLElement) => {
     e.preventDefault();
+    if (placeholder.getAttribute('data-mode') === 'manual') {
+      alert('此处为静态图片占位符，仅支持点击插入（如Logo/签名），不支持拖入关键帧');
+      return;
+    }
     const frameId = e.dataTransfer.getData('frameId');
     const frame = capturedFrames.find(f => f.id.toString() === frameId);
     if (frame) {
@@ -709,7 +680,7 @@ export default function ReportEditor() {
       alert('编辑器未准备好');
       return;
     }
-    const emptyPlaceholder = editorRef.current.querySelector('.image-placeholder:not(.has-image)') as HTMLElement | null;
+    const emptyPlaceholder = editorRef.current.querySelector('.image-placeholder:not(.has-image):not([data-mode="manual"])') as HTMLElement | null;
     if (!emptyPlaceholder) {
       alert('没有可插入图片的空位');
       return;
@@ -1874,6 +1845,108 @@ export default function ReportEditor() {
       </div>
       <canvas ref={canvasRef} className="hidden" />
 
+      {placeholderModal.isOpen && (
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
+          <div className="bg-white rounded-2xl p-6 w-full max-w-[360px] shadow-2xl border border-border">
+            <h3 className="text-lg font-bold text-text-main mb-4">插入图片占位符</h3>
+            <div className="space-y-3">
+              <div className="flex gap-2">
+                <div className="flex-1">
+                  <label className="block text-xs mb-1">宽度(px)</label>
+                  <input type="number" value={placeholderModal.width} onChange={e => setPlaceholderModal({...placeholderModal, width: e.target.value})} className="w-full px-2 py-1 text-xs border border-border rounded" />
+                </div>
+                <div className="flex-1">
+                  <label className="block text-xs mb-1">高度(px)</label>
+                  <input type="number" value={placeholderModal.height} onChange={e => setPlaceholderModal({...placeholderModal, height: e.target.value})} className="w-full px-2 py-1 text-xs border border-border rounded" />
+                </div>
+              </div>
+              <div>
+                <label className="block text-xs mb-1">占位符类型</label>
+                <div className="flex gap-2">
+                  <button onClick={() => setPlaceholderModal({...placeholderModal, mode: 'frame'})} className={`flex-1 py-1.5 text-xs rounded border ${placeholderModal.mode === 'frame' ? 'bg-accent text-white border-accent' : 'bg-white text-slate-600 border-border'}`}>手术影像占位<br/><span className="text-[10px] opacity-80">（支持自动/拖拽插入）</span></button>
+                  <button onClick={() => setPlaceholderModal({...placeholderModal, mode: 'manual'})} className={`flex-1 py-1.5 text-xs rounded border ${placeholderModal.mode === 'manual' ? 'bg-accent text-white border-accent' : 'bg-white text-slate-600 border-border'}`}>静态图片占位<br/><span className="text-[10px] opacity-80">（仅支持点击插入）</span></button>
+                </div>
+              </div>
+            </div>
+            <div className="mt-5 flex justify-end gap-2">
+              <button onClick={() => setPlaceholderModal({...placeholderModal, isOpen: false})} className="px-4 py-2 bg-slate-100 text-slate-600 rounded text-sm">取消</button>
+              <button onClick={() => {
+                const sel = window.getSelection();
+                let node: Node | null = sel?.anchorNode ?? null;
+                let inTable = false;
+                while (node) {
+                  if ((node as Element).nodeName === 'TD' || (node as Element).nodeName === 'TH') {
+                    inTable = true;
+                    break;
+                  }
+                  node = node.parentNode;
+                }
+                const w = parseInt(placeholderModal.width) || 200;
+                const h = parseInt(placeholderModal.height) || 200;
+                const modeAttr = placeholderModal.mode === 'manual' ? ' data-mode="manual"' : '';
+                const hintText = '插入/点击放置图片';
+                const id = 'ph_' + Date.now();
+                let html: string;
+                if (inTable) {
+                  const styleStr = '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>`;
+                } else {
+                  let styleStr = 'display:inline-flex;align-items:center;justify-content:center;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;';
+                  styleStr += `width:${w}px;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;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">${text}</span></span>&#8203;`;
+                }
+                execCmd('insertHTML', html);
+                setPlaceholderModal({...placeholderModal, isOpen: false});
+              }} className="px-4 py-2 bg-accent text-white rounded text-sm">确认插入</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {tableModal.isOpen && (
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
+          <div className="bg-white rounded-2xl p-6 w-full max-w-[360px] shadow-2xl border border-border">
+            <h3 className="text-lg font-bold text-text-main mb-4">插入表格</h3>
+            <div className="space-y-3">
+              <div className="flex gap-2">
+                <div className="flex-1">
+                  <label className="block text-xs mb-1">行数</label>
+                  <input type="number" min="1" value={tableModal.rows} onChange={e => setTableModal({...tableModal, rows: e.target.value})} className="w-full px-2 py-1 text-xs border border-border rounded" />
+                </div>
+                <div className="flex-1">
+                  <label className="block text-xs mb-1">列数</label>
+                  <input type="number" min="1" value={tableModal.cols} onChange={e => setTableModal({...tableModal, cols: e.target.value})} className="w-full px-2 py-1 text-xs border border-border rounded" />
+                </div>
+              </div>
+            </div>
+            <div className="mt-5 flex justify-end gap-2">
+              <button onClick={() => setTableModal({...tableModal, isOpen: false})} className="px-4 py-2 bg-slate-100 text-slate-600 rounded text-sm">取消</button>
+              <button onClick={() => {
+                const rows = parseInt(tableModal.rows);
+                const cols = parseInt(tableModal.cols);
+                if (isNaN(rows) || isNaN(cols) || rows < 1 || cols < 1) {
+                  setTableModal({...tableModal, isOpen: false});
+                  return;
+                }
+                let table = '<table style="width: 100%; border-collapse: collapse; margin: 16px 0; table-layout: fixed;">';
+                for (let i = 0; i < rows; i++) {
+                  table += '<tr>';
+                  for (let j = 0; j < cols; j++) {
+                    table += '<td style="padding: 8px; border: 1px solid #e2e8f0; vertical-align: top;">单元格</td>';
+                  }
+                  table += '</tr>';
+                }
+                table += '</table><p></p>';
+                execCmd('insertHTML', table);
+                setTableModal({...tableModal, isOpen: false});
+              }} className="px-4 py-2 bg-accent text-white rounded text-sm">确认插入</button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {imagePickerOpen && imagePickerTarget && (
         <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
           <div className="bg-white rounded-2xl p-6 w-full max-w-[360px] shadow-2xl border border-border">

src/pages/TemplateManage.tsx

@@ -38,6 +38,14 @@ export default function TemplateManage() {
   const [newFieldTimeDefault, setNewFieldTimeDefault] = useState<'current' | 'specific'>('specific');
   const [newFieldFixedTimeValue, setNewFieldFixedTimeValue] = useState('');
   const [customTimeFormats, setCustomTimeFormats] = useState<string[]>([]);
+  const [formatDropdownOpen, setFormatDropdownOpen] = useState(false);
+  const [newFormatDropdownOpen, setNewFormatDropdownOpen] = useState(false);
+  const [placeholderModal, setPlaceholderModal] = useState({
+    isOpen: false, width: '200', height: '200', mode: 'frame' as 'frame' | 'manual'
+  });
+  const [tableModal, setTableModal] = useState({
+    isOpen: false, rows: '2', cols: '3'
+  });
   const [imageAssets, setImageAssets] = useState<{ id: string; name: string; dataUrl: string }[]>([]);
 
   const updatePageHeight = () => {
@@ -491,57 +499,17 @@ export default function TemplateManage() {
   };
 
   const insertTable = () => {
-    const rowsStr = prompt('请输入行数:', '2');
-    const colsStr = prompt('请输入列数:', '3');
-    if (rowsStr && colsStr) {
-      const rows = parseInt(rowsStr);
-      const cols = parseInt(colsStr);
-      if (isNaN(rows) || isNaN(cols)) return;
-
-      let table = '<table style="width: 100%; border-collapse: collapse; margin: 16px 0; table-layout: fixed;">';
-      for (let i = 0; i < rows; i++) {
-        table += '<tr>';
-        for (let j = 0; j < cols; j++) {
-          table += '<td style="padding: 8px; border: 1px solid #e2e8f0; vertical-align: top;">单元格</td>';
-        }
-        table += '</tr>';
-      }
-      table += '</table><p></p>';
-      pushHistory();
-      execCmd('insertHTML', table);
-    }
+    editorRef.current?.focus();
+    restoreSelection();
+    pushHistory();
+    setTableModal({ isOpen: true, rows: '2', cols: '3' });
   };
 
   const insertImage = () => {
     editorRef.current?.focus();
     restoreSelection();
-    let width = 200;
-    let height = 200;
-    while (true) {
-      const input = prompt('请输入占位符的最大宽度和高度(px)，用 * 分隔（如: 100*50）。留空则默认宽高为 200*200。(提示: 正文一行文字高度约为 20 像素左右)', '');
-      if (input === null) return;
-      const trimmed = input.trim();
-      if (trimmed === '') break;
-      const parts = trimmed.split('*').map(s => s.trim());
-      if (parts.length === 2 && /^\d+$/.test(parts[0]) && /^\d+$/.test(parts[1])) {
-        width = parseInt(parts[0]) || 0;
-        height = parseInt(parts[1]) || 0;
-        break;
-      }
-      alert('格式错误，请确保使用 * 分隔两个数字，例如 100*50');
-    }
-
-    let styleStr = 'display:inline-flex;align-items:center;justify-content:center;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;';
-    if (width > 0) styleStr += `width:${width}px;`;
-    if (height > 0) styleStr += `height:${height}px;`;
-
-    const showShortText = width > 0 && width < 80;
-    const hintText = showShortText ? '插图' : '插入/点击放置图片';
-
-    const id = 'ph_' + Date.now();
-    const html = `<span id="${id}" class="image-placeholder" data-placeholder="true" contenteditable="false" style="${styleStr}"><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;">${hintText}</span></span>&#8203;`;
     pushHistory();
-    execCmd('insertHTML', html);
+    setPlaceholderModal({ isOpen: true, width: '200', height: '200', mode: 'frame' });
   };
 
   const saveCurrentTemplate = () => {
@@ -933,42 +901,61 @@ export default function TemplateManage() {
                                             className="w-full px-1.5 py-1 text-xs border border-border rounded"
                                           />
                                         )}
-                                        <input
-                                          list={`edit-format-list-${field.key}`}
-                                          value={editFieldTimeFormat}
-                                          onChange={(e) => setEditFieldTimeFormat(e.target.value)}
-                                          onBlur={(e) => {
-                                            const val = e.target.value.trim();
-                                            if (val && !customTimeFormats.includes(val)) {
-                                              const next = [...customTimeFormats, val];
-                                              setCustomTimeFormats(next);
-                                              storage.set('customTimeFormats', next);
-                                            }
-                                          }}
-                                          onKeyDown={(e) => {
-                                            if (e.key === 'Enter') {
-                                              const val = (e.target as HTMLInputElement).value.trim();
+                                        <div className="relative">
+                                          <input
+                                            type="text"
+                                            value={editFieldTimeFormat}
+                                            onChange={(e) => setEditFieldTimeFormat(e.target.value)}
+                                            onFocus={() => setFormatDropdownOpen(true)}
+                                            onBlur={() => {
+                                              setTimeout(() => setFormatDropdownOpen(false), 200);
+                                              const val = editFieldTimeFormat.trim();
                                               if (val && !customTimeFormats.includes(val)) {
                                                 const next = [...customTimeFormats, val];
                                                 setCustomTimeFormats(next);
                                                 storage.set('customTimeFormats', next);
                                               }
-                                            }
-                                          }}
-                                          className="w-full px-1.5 py-1 text-xs border border-border rounded"
-                                          placeholder="输入格式，如 YYYY-MM-DD"
-                                        />
-                                        <datalist id={`edit-format-list-${field.key}`}>
-                                          {customTimeFormats
-                                            .filter(fmt => {
-                                              const isDateFormat = /YYYY|MM|DD/.test(fmt);
-                                              const isTimeFormat = /HH|hh|mm|A/.test(fmt);
-                                              if (field.type === 'date') return isDateFormat;
-                                              if (field.type === 'time') return isTimeFormat;
-                                              return true;
-                                            })
-                                            .map(fmt => <option key={fmt} value={fmt} />)}
-                                        </datalist>
+                                            }}
+                                            onKeyDown={(e) => {
+                                              if (e.key === 'Enter') {
+                                                const val = editFieldTimeFormat.trim();
+                                                if (val && !customTimeFormats.includes(val)) {
+                                                  const next = [...customTimeFormats, val];
+                                                  setCustomTimeFormats(next);
+                                                  storage.set('customTimeFormats', next);
+                                                }
+                                                setFormatDropdownOpen(false);
+                                              }
+                                            }}
+                                            className="w-full px-1.5 py-1 text-xs border border-border rounded"
+                                            placeholder="输入格式或下拉选择"
+                                          />
+                                          {formatDropdownOpen && (
+                                            <div className="absolute z-10 left-0 right-0 top-full mt-1 bg-white border border-border rounded shadow-lg max-h-32 overflow-y-auto">
+                                              {customTimeFormats
+                                                .filter(fmt => {
+                                                  const isDateFormat = /YYYY|MM|DD/.test(fmt);
+                                                  const isTimeFormat = /HH|hh|mm|A/.test(fmt);
+                                                  if (field.type === 'date') return isDateFormat;
+                                                  if (field.type === 'time') return isTimeFormat;
+                                                  return true;
+                                                })
+                                                .map(fmt => (
+                                                  <div
+                                                    key={fmt}
+                                                    className="px-2 py-1 text-xs hover:bg-slate-100 cursor-pointer"
+                                                    onMouseDown={(e) => {
+                                                      e.preventDefault();
+                                                      setEditFieldTimeFormat(fmt);
+                                                      setFormatDropdownOpen(false);
+                                                    }}
+                                                  >
+                                                    {fmt}
+                                                  </div>
+                                                ))}
+                                            </div>
+                                          )}
+                                        </div>
                                       </div>
                                     )}
                                     <div className="flex gap-2">
@@ -1101,42 +1088,61 @@ export default function TemplateManage() {
                             className="w-full px-2 py-1.5 text-xs border border-border rounded"
                           />
                         )}
-                        <input
-                          list="new-format-list"
-                          value={newFieldTimeFormat}
-                          onChange={(e) => setNewFieldTimeFormat(e.target.value)}
-                          onBlur={(e) => {
-                            const val = e.target.value.trim();
-                            if (val && !customTimeFormats.includes(val)) {
-                              const next = [...customTimeFormats, val];
-                              setCustomTimeFormats(next);
-                              storage.set('customTimeFormats', next);
-                            }
-                          }}
-                          onKeyDown={(e) => {
-                            if (e.key === 'Enter') {
-                              const val = (e.target as HTMLInputElement).value.trim();
+                        <div className="relative">
+                          <input
+                            type="text"
+                            value={newFieldTimeFormat}
+                            onChange={(e) => setNewFieldTimeFormat(e.target.value)}
+                            onFocus={() => setNewFormatDropdownOpen(true)}
+                            onBlur={() => {
+                              setTimeout(() => setNewFormatDropdownOpen(false), 200);
+                              const val = newFieldTimeFormat.trim();
                               if (val && !customTimeFormats.includes(val)) {
                                 const next = [...customTimeFormats, val];
                                 setCustomTimeFormats(next);
                                 storage.set('customTimeFormats', next);
                               }
-                            }
-                          }}
-                          className="w-full px-2 py-1.5 text-xs border border-border rounded"
-                          placeholder="输入格式，如 YYYY-MM-DD"
-                        />
-                        <datalist id="new-format-list">
-                          {customTimeFormats
-                            .filter(fmt => {
-                              const isDateFormat = /YYYY|MM|DD/.test(fmt);
-                              const isTimeFormat = /HH|hh|mm|A/.test(fmt);
-                              if (newFieldForm.type === 'date') return isDateFormat;
-                              if (newFieldForm.type === 'time') return isTimeFormat;
-                              return true;
-                            })
-                            .map(fmt => <option key={fmt} value={fmt} />)}
-                        </datalist>
+                            }}
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter') {
+                                const val = newFieldTimeFormat.trim();
+                                if (val && !customTimeFormats.includes(val)) {
+                                  const next = [...customTimeFormats, val];
+                                  setCustomTimeFormats(next);
+                                  storage.set('customTimeFormats', next);
+                                }
+                                setNewFormatDropdownOpen(false);
+                              }
+                            }}
+                            className="w-full px-2 py-1.5 text-xs border border-border rounded"
+                            placeholder="输入格式或下拉选择"
+                          />
+                          {newFormatDropdownOpen && (
+                            <div className="absolute z-10 left-0 right-0 top-full mt-1 bg-white border border-border rounded shadow-lg max-h-32 overflow-y-auto">
+                              {customTimeFormats
+                                .filter(fmt => {
+                                  const isDateFormat = /YYYY|MM|DD/.test(fmt);
+                                  const isTimeFormat = /HH|hh|mm|A/.test(fmt);
+                                  if (newFieldForm.type === 'date') return isDateFormat;
+                                  if (newFieldForm.type === 'time') return isTimeFormat;
+                                  return true;
+                                })
+                                .map(fmt => (
+                                  <div
+                                    key={fmt}
+                                    className="px-2 py-1 text-xs hover:bg-slate-100 cursor-pointer"
+                                    onMouseDown={(e) => {
+                                      e.preventDefault();
+                                      setNewFieldTimeFormat(fmt);
+                                      setNewFormatDropdownOpen(false);
+                                    }}
+                                  >
+                                    {fmt}
+                                  </div>
+                                ))}
+                            </div>
+                          )}
+                        </div>
                       </div>
                     )}
                     {['单选', '多选'].includes(newFieldForm.category) && (
@@ -1208,6 +1214,108 @@ export default function TemplateManage() {
         </div>
       )}
 
+      {placeholderModal.isOpen && (
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
+          <div className="bg-white rounded-2xl p-6 w-full max-w-[360px] shadow-2xl border border-border">
+            <h3 className="text-lg font-bold text-text-main mb-4">插入图片占位符</h3>
+            <div className="space-y-3">
+              <div className="flex gap-2">
+                <div className="flex-1">
+                  <label className="block text-xs mb-1">宽度(px)</label>
+                  <input type="number" value={placeholderModal.width} onChange={e => setPlaceholderModal({...placeholderModal, width: e.target.value})} className="w-full px-2 py-1 text-xs border border-border rounded" />
+                </div>
+                <div className="flex-1">
+                  <label className="block text-xs mb-1">高度(px)</label>
+                  <input type="number" value={placeholderModal.height} onChange={e => setPlaceholderModal({...placeholderModal, height: e.target.value})} className="w-full px-2 py-1 text-xs border border-border rounded" />
+                </div>
+              </div>
+              <div>
+                <label className="block text-xs mb-1">占位符类型</label>
+                <div className="flex gap-2">
+                  <button onClick={() => setPlaceholderModal({...placeholderModal, mode: 'frame'})} className={`flex-1 py-1.5 text-xs rounded border ${placeholderModal.mode === 'frame' ? 'bg-accent text-white border-accent' : 'bg-white text-slate-600 border-border'}`}>手术影像占位<br/><span className="text-[10px] opacity-80">（支持自动/拖拽插入）</span></button>
+                  <button onClick={() => setPlaceholderModal({...placeholderModal, mode: 'manual'})} className={`flex-1 py-1.5 text-xs rounded border ${placeholderModal.mode === 'manual' ? 'bg-accent text-white border-accent' : 'bg-white text-slate-600 border-border'}`}>静态图片占位<br/><span className="text-[10px] opacity-80">（仅支持点击插入）</span></button>
+                </div>
+              </div>
+            </div>
+            <div className="mt-5 flex justify-end gap-2">
+              <button onClick={() => setPlaceholderModal({...placeholderModal, isOpen: false})} className="px-4 py-2 bg-slate-100 text-slate-600 rounded text-sm">取消</button>
+              <button onClick={() => {
+                const sel = window.getSelection();
+                let node: Node | null = sel?.anchorNode ?? null;
+                let inTable = false;
+                while (node) {
+                  if ((node as Element).nodeName === 'TD' || (node as Element).nodeName === 'TH') {
+                    inTable = true;
+                    break;
+                  }
+                  node = node.parentNode;
+                }
+                const w = parseInt(placeholderModal.width) || 200;
+                const h = parseInt(placeholderModal.height) || 200;
+                const modeAttr = placeholderModal.mode === 'manual' ? ' data-mode="manual"' : '';
+                const hintText = '插入/点击放置图片';
+                const id = 'ph_' + Date.now();
+                let html: string;
+                if (inTable) {
+                  const styleStr = '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>`;
+                } else {
+                  let styleStr = 'display:inline-flex;align-items:center;justify-content:center;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;';
+                  styleStr += `width:${w}px;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;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">${text}</span></span>&#8203;`;
+                }
+                execCmd('insertHTML', html);
+                setPlaceholderModal({...placeholderModal, isOpen: false});
+              }} className="px-4 py-2 bg-accent text-white rounded text-sm">确认插入</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {tableModal.isOpen && (
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
+          <div className="bg-white rounded-2xl p-6 w-full max-w-[360px] shadow-2xl border border-border">
+            <h3 className="text-lg font-bold text-text-main mb-4">插入表格</h3>
+            <div className="space-y-3">
+              <div className="flex gap-2">
+                <div className="flex-1">
+                  <label className="block text-xs mb-1">行数</label>
+                  <input type="number" min="1" value={tableModal.rows} onChange={e => setTableModal({...tableModal, rows: e.target.value})} className="w-full px-2 py-1 text-xs border border-border rounded" />
+                </div>
+                <div className="flex-1">
+                  <label className="block text-xs mb-1">列数</label>
+                  <input type="number" min="1" value={tableModal.cols} onChange={e => setTableModal({...tableModal, cols: e.target.value})} className="w-full px-2 py-1 text-xs border border-border rounded" />
+                </div>
+              </div>
+            </div>
+            <div className="mt-5 flex justify-end gap-2">
+              <button onClick={() => setTableModal({...tableModal, isOpen: false})} className="px-4 py-2 bg-slate-100 text-slate-600 rounded text-sm">取消</button>
+              <button onClick={() => {
+                const rows = parseInt(tableModal.rows);
+                const cols = parseInt(tableModal.cols);
+                if (isNaN(rows) || isNaN(cols) || rows < 1 || cols < 1) {
+                  setTableModal({...tableModal, isOpen: false});
+                  return;
+                }
+                let table = '<table style="width: 100%; border-collapse: collapse; margin: 16px 0; table-layout: fixed;">';
+                for (let i = 0; i < rows; i++) {
+                  table += '<tr>';
+                  for (let j = 0; j < cols; j++) {
+                    table += '<td style="padding: 8px; border: 1px solid #e2e8f0; vertical-align: top;">单元格</td>';
+                  }
+                  table += '</tr>';
+                }
+                table += '</table><p></p>';
+                execCmd('insertHTML', table);
+                setTableModal({...tableModal, isOpen: false});
+              }} className="px-4 py-2 bg-accent text-white rounded text-sm">确认插入</button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {imagePickerOpen && imagePickerTarget && (
         <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
           <div className="bg-white rounded-2xl p-6 w-full max-w-[360px] shadow-2xl border border-border">

src/utils/print.ts

@@ -18,10 +18,10 @@ export const printDocument = (htmlContent: string) => {
       <head>
         <meta charset="utf-8">
         <style>
-          @page { size: A4; margin: 0; }
+          @page { size: A4; margin: 15mm 10mm; }
           * { box-sizing: border-box; }
-          body { margin: 0; padding: 10mm; font-family: SimSun, "Microsoft YaHei", serif; color: #1E293B; background: white; }
-          .content { width: 190mm; min-height: 277mm; margin: 0 auto; }
+          body { margin: 0; padding: 0; font-family: SimSun, "Microsoft YaHei", serif; color: #1E293B; background: white; }
+          .content { width: 100%; min-height: 277mm; margin: 0 auto; }
           img { max-width: 100%; height: auto; display: block; margin: 8px auto; }
           p { margin: 0; padding: 4px 0; line-height: 1.6; }
           h1 { font-size: 20px; margin: 16px 0 12px; font-weight: 600; text-align: center; }

工程分析/实现方案-2026-04-17-23-38-34.md

@@ -0,0 +1,196 @@
+# 实现方案 — 2026-04-17-23-38-34
+
+## 根因分析
+
+### 问题1：原生 datalist 交互体验差
+- 原生 `<input list>` + `<datalist>` 在不同浏览器中表现不一致，部分浏览器不会自动展开全部选项，且不支持样式自定义。
+- 用户已习惯 `ReportEditor.tsx` 中单选下拉框的交互模式，期望统一体验。
+
+### 问题2：execCommand('insertHTML') 在表格中破坏结构
+- 当 `insertImage` 在 `<td>` 内执行 `execCommand('insertHTML', ...)` 时，WebKit/Blink 会将复杂的 `inline-flex` 嵌套 `<span>` 结构自动"拍平"或重新排列。
+- 外层 `<span class="image-placeholder">` 被浏览器移除，仅剩内部的 `.delete-btn` 和 `.placeholder-text` 散落为 `<td>` 的直接子元素。
+- 表格单元格本身就是块级上下文，使用块级 `<div>` 作为占位符容器更符合浏览器预期，不会被强制修正。
+
+### 问题3：@page margin 与 body padding 的分页失效
+- `@page { margin: 0 }` 将物理纸张边距设为 0。
+- `body { padding: 10mm }` 只在整个 HTML 文档的顶部和底部各生效一次。
+- 当内容跨页时，浏览器在分页切断处不会保留 `body` 的 padding，导致第二页顶部和底部紧贴纸张边缘。
+- 正确做法是将边距交给 `@page` 规则，让打印引擎为每一张物理纸张独立留出边距。
+
+## 修改文件清单
+
+| 文件 | 修改内容 |
+|------|---------|
+| `src/pages/TemplateManage.tsx` | ① 引入 `formatDropdownOpen` / `newFormatDropdownOpen` 状态；② 将编辑/新增字段的格式 `input[list]+datalist` 替换为自定义下拉组件；③ `insertImage` 增加表格检测，表格内使用 `<div>` 块级容器+自适应尺寸 |
+| `src/pages/ReportEditor.tsx` | `insertImage` 增加表格检测，表格内使用 `<div>` 块级容器+自适应尺寸 |
+| `src/utils/print.ts` | `@page margin` 与 `body padding` 调整，`.content` width 改为 `100%` |
+
+## 具体代码变更
+
+### 1. TemplateManage.tsx
+
+#### 1.1 新增状态（组件顶部）
+
+```tsx
+const [formatDropdownOpen, setFormatDropdownOpen] = useState(false);
+const [newFormatDropdownOpen, setNewFormatDropdownOpen] = useState(false);
+```
+
+#### 1.2 编辑字段格式输入替换为自定义下拉
+
+将原 `input[list]` + `datalist` 替换为：
+
+```tsx
+<div className="relative">
+  <input
+    type="text"
+    value={editFieldTimeFormat}
+    onChange={(e) => setEditFieldTimeFormat(e.target.value)}
+    onFocus={() => setFormatDropdownOpen(true)}
+    onBlur={() => {
+      setTimeout(() => setFormatDropdownOpen(false), 200);
+      const val = editFieldTimeFormat.trim();
+      if (val && !customTimeFormats.includes(val)) {
+        const next = [...customTimeFormats, val];
+        setCustomTimeFormats(next);
+        storage.set('customTimeFormats', next);
+      }
+    }}
+    onKeyDown={(e) => {
+      if (e.key === 'Enter') {
+        const val = editFieldTimeFormat.trim();
+        if (val && !customTimeFormats.includes(val)) {
+          const next = [...customTimeFormats, val];
+          setCustomTimeFormats(next);
+          storage.set('customTimeFormats', next);
+        }
+        setFormatDropdownOpen(false);
+      }
+    }}
+    className="w-full px-1.5 py-1 text-xs border border-border rounded"
+    placeholder="输入格式或下拉选择"
+  />
+  {formatDropdownOpen && (
+    <div className="absolute z-10 left-0 right-0 top-full mt-1 bg-white border border-border rounded shadow-lg max-h-32 overflow-y-auto">
+      {customTimeFormats
+        .filter(fmt => {
+          const isDateFormat = /YYYY|MM|DD/.test(fmt);
+          const isTimeFormat = /HH|hh|mm|A/.test(fmt);
+          if (field.type === 'date') return isDateFormat;
+          if (field.type === 'time') return isTimeFormat;
+          return true;
+        })
+        .map(fmt => (
+          <div
+            key={fmt}
+            className="px-2 py-1 text-xs hover:bg-slate-100 cursor-pointer"
+            onMouseDown={(e) => {
+              e.preventDefault();
+              setEditFieldTimeFormat(fmt);
+              setFormatDropdownOpen(false);
+            }}
+          >
+            {fmt}
+          </div>
+        ))}
+    </div>
+  )}
+</div>
+```
+
+#### 1.3 新增字段格式输入同理替换
+
+使用 `newFormatDropdownOpen` 状态，结构同上，过滤条件改为 `newFieldForm.type`。
+
+#### 1.4 insertImage 增加表格检测
+
+```tsx
+const insertImage = () => {
+  editorRef.current?.focus();
+  restoreSelection();
+
+  // 检测是否在表格单元格内
+  const sel = window.getSelection();
+  let node: Node | null = sel?.anchorNode ?? null;
+  let inTable = false;
+  while (node) {
+    if ((node as Element).nodeName === 'TD' || (node as Element).nodeName === 'TH') {
+      inTable = true;
+      break;
+    }
+    node = node.parentNode;
+  }
+
+  let width = 200;
+  let height = 200;
+  if (!inTable) {
+    while (true) {
+      const input = prompt('请输入占位符的最大宽度和高度(px)，用 * 分隔（如: 100*50）。留空则默认宽高为 200*200。(提示: 正文一行文字高度约为 20 像素左右)', '');
+      if (input === null) return;
+      const trimmed = input.trim();
+      if (trimmed === '') break;
+      const parts = trimmed.split('*').map(s => s.trim());
+      if (parts.length === 2 && /^\d+$/.test(parts[0]) && /^\d+$/.test(parts[1])) {
+        width = parseInt(parts[0]) || 0;
+        height = parseInt(parts[1]) || 0;
+        break;
+      }
+      alert('格式错误，请确保使用 * 分隔两个数字，例如 100*50');
+    }
+  }
+
+  const id = 'ph_' + Date.now();
+  const hintText = '插入/点击放置图片';
+
+  let html: string;
+  if (inTable) {
+    // 表格内使用 div 块级容器，自适应单元格
+    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" 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>`;
+  } else {
+    // 普通文本中保持行内 span
+    let styleStr = 'display:inline-flex;align-items:center;justify-content:center;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;';
+    if (width > 0) styleStr += `width:${width}px;`;
+    if (height > 0) styleStr += `height:${height}px;`;
+    const showShortText = width > 0 && width < 80;
+    const text = showShortText ? '插图' : hintText;
+    html = `<span id="${id}" class="image-placeholder" data-placeholder="true" contenteditable="false" style="${styleStr}"><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;">${text}</span></span>&#8203;`;
+  }
+
+  pushHistory();
+  execCmd('insertHTML', html);
+};
+```
+
+### 2. ReportEditor.tsx
+
+`insertImage` 同理增加表格检测分支，与 TemplateManage 保持一致（去除 `restoreSelection()` 和 `pushHistory()` 调用）。
+
+### 3. print.ts
+
+```css
+/* 修改前 */
+@page { size: A4; margin: 0; }
+body { margin: 0; padding: 10mm; ... }
+.content { width: 190mm; min-height: 277mm; margin: 0 auto; }
+
+/* 修改后 */
+@page { size: A4; margin: 15mm 10mm; }
+body { margin: 0; padding: 0; ... }
+.content { width: 100%; min-height: 277mm; margin: 0 auto; }
+```
+
+## 风险点与应对措施
+
+| 风险 | 应对措施 |
+|------|---------|
+| 自定义下拉组件在滚动容器内可能被裁切 | 父容器设置 `relative`，下拉层设置 `absolute z-10`，并确保外层有适当的 overflow-visible 或足够空间 |
+| 表格检测 `while (node)` 循环在编辑器外部可能遍历到 body/html | 以 `node.nodeName === 'TD' \|\| node.nodeName === 'TH'` 为终止条件，安全 |
+| 表格内使用 div 后，fillPlaceholderSrc 需要兼容 | fillPlaceholderSrc 通过 `querySelector('.image-placeholder')` 匹配 class，不受标签名影响，已验证兼容 |
+| @page margin 增加后 .content width 190mm 会溢出 | 改为 `width: 100%`，让内容自然撑满可用区域 |
+
+## 回滚策略
+
+- TemplateManage.tsx 的修改：删除新增状态和替换的 JSX 条件块，恢复原有的 `input[list]` + `datalist`。
+- ReportEditor.tsx 的修改：删除 insertImage 中的表格检测分支。
+- print.ts 的修改：恢复原始的 `@page`、`body`、`content` 样式。

工程分析/实现方案-2026-04-18-00-02-08.md

@@ -0,0 +1,256 @@
+# 实现方案 — 2026-04-18-00-02-08
+
+## 根因分析
+
+### 问题1：拖拽插入后边框不消失
+- `fillPlaceholderSrc`（点击上传路径）设置了 `border='none'` 和 `background='transparent'`。
+- `fillPlaceholder`（拖拽路径）遗漏了这两行样式清除，导致拖拽后虚线框和灰色背景仍然可见。
+- 同时 `fillPlaceholder` 中图片 style 缺少 `max-height:100%;object-fit:contain;`，图片可能溢出占位符。
+
+### 问题2：prompt 弹窗体验差 + 自动帧插入无区分
+- `insertImage` 使用浏览器原生 `prompt` 询问宽高，交互体验不佳。
+- 所有 `.image-placeholder` 一视同仁，`autoCaptureFrames` 会自动填入任意空占位符。Logo、签名等位置不应被手术关键帧污染。
+- 没有机制区分"接受关键帧"和"不接受关键帧"的占位符。
+
+### 问题3：insertTable 使用 prompt
+- 与 insertImage 同理，原生 `prompt` 弹窗用户体验差，应替换为与项目风格一致的自定义 Modal。
+
+## 修改文件清单
+
+| 文件 | 修改内容 |
+|------|---------|
+| `src/pages/ReportEditor.tsx` | ① fillPlaceholder 补齐样式清除和图片约束；② insertImage 改为 placeholderModal；③ insertTable 改为 tableModal；④ autoCaptureFrames/insertFrameToPlaceholder 选择器增加 `:not([data-mode="manual"])`；⑤ handleDrop 拦截 manual 模式；⑥ JSX 底部新增 2 个 Modal |
+| `src/pages/TemplateManage.tsx` | ① insertImage 改为 placeholderModal；② insertTable 改为 tableModal；③ JSX 底部新增 2 个 Modal |
+
+## 具体代码变更
+
+### 1. ReportEditor.tsx
+
+#### 1.1 fillPlaceholder 修复
+
+```ts
+const fillPlaceholder = (placeholder: HTMLElement, frame: CapturedFrame) => {
+  placeholder.innerHTML = `
+    <span class="delete-btn" contenteditable="false">×</span>
+    <img src="${frame.dataUrl}" style="max-width:100%;max-height:100%;object-fit:contain;display:block;margin:0 auto;" draggable="false">
+  `;
+  placeholder.classList.add('has-image');
+  placeholder.style.border = 'none';
+  placeholder.style.background = 'transparent';
+  if (editorRef.current) contentRef.current = editorRef.current.innerHTML;
+  saveDraftToStorage();
+};
+```
+
+#### 1.2 新增状态
+
+```ts
+const [placeholderModal, setPlaceholderModal] = useState({
+  isOpen: false, width: '200', height: '200', mode: 'frame' as 'frame' | 'manual'
+});
+const [tableModal, setTableModal] = useState({
+  isOpen: false, rows: '2', cols: '3'
+});
+```
+
+#### 1.3 insertImage 改为打开 Modal
+
+```ts
+const insertImage = () => {
+  editorRef.current?.focus();
+  setPlaceholderModal({ isOpen: true, width: '200', height: '200', mode: 'frame' });
+};
+```
+
+#### 1.4 insertTable 改为打开 Modal
+
+```ts
+const insertTable = () => {
+  editorRef.current?.focus();
+  setTableModal({ isOpen: true, rows: '2', cols: '3' });
+};
+```
+
+#### 1.5 autoCaptureFrames 中选择器修改
+
+将 `setTimeout` 回调内的：
+```ts
+const emptyPlaceholder = editorRef.current.querySelector('.image-placeholder:not(.has-image)') as HTMLElement | null;
+```
+改为：
+```ts
+const emptyPlaceholder = editorRef.current.querySelector('.image-placeholder:not(.has-image):not([data-mode="manual"])') as HTMLElement | null;
+```
+
+#### 1.6 insertFrameToPlaceholder 选择器修改
+
+```ts
+const emptyPlaceholder = editorRef.current.querySelector('.image-placeholder:not(.has-image):not([data-mode="manual"])') as HTMLElement | null;
+```
+
+#### 1.7 handleDrop 拦截 manual 模式
+
+```ts
+const handleDrop = (e: React.DragEvent, placeholder: HTMLElement) => {
+  e.preventDefault();
+  if (placeholder.getAttribute('data-mode') === 'manual') {
+    alert('此处为静态图片占位符，仅支持点击插入（如Logo/签名），不支持拖入关键帧');
+    return;
+  }
+  const frameId = e.dataTransfer.getData('frameId');
+  const frame = capturedFrames.find(f => f.id.toString() === frameId);
+  if (frame) {
+    fillPlaceholder(placeholder, frame);
+  }
+};
+```
+
+#### 1.8 JSX 底部新增 Modal
+
+**Placeholder Insert Modal**（在 `</div>` 关闭之前，与现有 `imagePickerOpen` Modal 并列）：
+
+```tsx
+{placeholderModal.isOpen && (
+  <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
+    <div className="bg-white rounded-2xl p-6 w-full max-w-[360px] shadow-2xl border border-border">
+      <h3 className="text-lg font-bold text-text-main mb-4">插入图片占位符</h3>
+      <div className="space-y-3">
+        <div className="flex gap-2">
+          <div className="flex-1">
+            <label className="block text-xs mb-1">宽度(px)</label>
+            <input type="number" value={placeholderModal.width} onChange={e => setPlaceholderModal({...placeholderModal, width: e.target.value})} className="w-full px-2 py-1 text-xs border border-border rounded" />
+          </div>
+          <div className="flex-1">
+            <label className="block text-xs mb-1">高度(px)</label>
+            <input type="number" value={placeholderModal.height} onChange={e => setPlaceholderModal({...placeholderModal, height: e.target.value})} className="w-full px-2 py-1 text-xs border border-border rounded" />
+          </div>
+        </div>
+        <div>
+          <label className="block text-xs mb-1">占位符类型</label>
+          <div className="flex gap-2">
+            <button onClick={() => setPlaceholderModal({...placeholderModal, mode: 'frame'})} className={`flex-1 py-1.5 text-xs rounded border ${placeholderModal.mode === 'frame' ? 'bg-accent text-white border-accent' : 'bg-white text-slate-600 border-border'}`}>手术影像占位<br/><span className="text-[10px] opacity-80">（支持自动/拖拽插入）</span></button>
+            <button onClick={() => setPlaceholderModal({...placeholderModal, mode: 'manual'})} className={`flex-1 py-1.5 text-xs rounded border ${placeholderModal.mode === 'manual' ? 'bg-accent text-white border-accent' : 'bg-white text-slate-600 border-border'}`}>静态图片占位<br/><span className="text-[10px] opacity-80">（仅支持点击插入）</span></button>
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end gap-2">
+        <button onClick={() => setPlaceholderModal({...placeholderModal, isOpen: false})} className="px-4 py-2 bg-slate-100 text-slate-600 rounded text-sm">取消</button>
+        <button onClick={() => {
+          const w = parseInt(placeholderModal.width) || 200;
+          const h = parseInt(placeholderModal.height) || 200;
+          const modeAttr = placeholderModal.mode === 'manual' ? ' data-mode="manual"' : '';
+          const showShortText = w > 0 && w < 80;
+          const text = showShortText ? '插图' : '插入/点击放置图片';
+          let styleStr = 'display:inline-flex;align-items:center;justify-content:center;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;';
+          styleStr += `width:${w}px;height:${h}px;`;
+          const id = 'ph_' + Date.now();
+          const 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;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">${text}</span></span>&#8203;`;
+          execCmd('insertHTML', html);
+          setPlaceholderModal({...placeholderModal, isOpen: false});
+        }} className="px-4 py-2 bg-accent text-white rounded text-sm">确认插入</button>
+      </div>
+    </div>
+  </div>
+)}
+```
+
+**Table Insert Modal**：
+
+```tsx
+{tableModal.isOpen && (
+  <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
+    <div className="bg-white rounded-2xl p-6 w-full max-w-[360px] shadow-2xl border border-border">
+      <h3 className="text-lg font-bold text-text-main mb-4">插入表格</h3>
+      <div className="space-y-3">
+        <div className="flex gap-2">
+          <div className="flex-1">
+            <label className="block text-xs mb-1">行数</label>
+            <input type="number" min="1" value={tableModal.rows} onChange={e => setTableModal({...tableModal, rows: e.target.value})} className="w-full px-2 py-1 text-xs border border-border rounded" />
+          </div>
+          <div className="flex-1">
+            <label className="block text-xs mb-1">列数</label>
+            <input type="number" min="1" value={tableModal.cols} onChange={e => setTableModal({...tableModal, cols: e.target.value})} className="w-full px-2 py-1 text-xs border border-border rounded" />
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end gap-2">
+        <button onClick={() => setTableModal({...tableModal, isOpen: false})} className="px-4 py-2 bg-slate-100 text-slate-600 rounded text-sm">取消</button>
+        <button onClick={() => {
+          const rows = parseInt(tableModal.rows);
+          const cols = parseInt(tableModal.cols);
+          if (isNaN(rows) || isNaN(cols) || rows < 1 || cols < 1) {
+            setTableModal({...tableModal, isOpen: false});
+            return;
+          }
+          let table = '<table style="width: 100%; border-collapse: collapse; margin: 16px 0; table-layout: fixed;">';
+          for (let i = 0; i < rows; i++) {
+            table += '<tr>';
+            for (let j = 0; j < cols; j++) {
+              table += '<td style="padding: 8px; border: 1px solid #e2e8f0; vertical-align: top;">单元格</td>';
+            }
+            table += '</tr>';
+          }
+          table += '</table><p></p>';
+          execCmd('insertHTML', table);
+          setTableModal({...tableModal, isOpen: false});
+        }} className="px-4 py-2 bg-accent text-white rounded text-sm">确认插入</button>
+      </div>
+    </div>
+  </div>
+)}
+```
+
+### 2. TemplateManage.tsx
+
+结构与 ReportEditor.tsx 类似，但 `insertImage` 的 Modal 中也需要表格检测逻辑（已在上一轮修改中实现）。
+
+#### 2.1 新增状态
+
+```ts
+const [placeholderModal, setPlaceholderModal] = useState({
+  isOpen: false, width: '200', height: '200', mode: 'frame' as 'frame' | 'manual'
+});
+const [tableModal, setTableModal] = useState({
+  isOpen: false, rows: '2', cols: '3'
+});
+```
+
+#### 2.2 insertImage 改为打开 Modal
+
+```ts
+const insertImage = () => {
+  editorRef.current?.focus();
+  restoreSelection();
+  setPlaceholderModal({ isOpen: true, width: '200', height: '200', mode: 'frame' });
+};
+```
+
+#### 2.3 insertTable 改为打开 Modal
+
+```ts
+const insertTable = () => {
+  editorRef.current?.focus();
+  restoreSelection();
+  pushHistory();
+  setTableModal({ isOpen: true, rows: '2', cols: '3' });
+};
+```
+
+#### 2.4 JSX 底部新增 Modal
+
+与 ReportEditor.tsx 的 Modal 结构一致。TemplateManage.tsx 的 `insertImage` Modal 中，确认按钮需要执行表格检测（沿用上一轮修改的逻辑），然后调用 `execCmd('insertHTML', html)` 和 `pushHistory()`。
+
+## 风险点与应对措施
+
+| 风险 | 应对措施 |
+|------|---------|
+| `data-mode="manual"` 的选择器 `:not([data-mode="manual"])` 可能不兼容旧浏览器 | 项目使用 Chrome/Edge，完全支持属性选择器 |
+| 新增 Modal 与现有 `imagePickerOpen` Modal 的 z-index 冲突 | 两者都使用 `z-50`，在同一时刻不会同时打开 |
+| TemplateManage.tsx 的 insertImage 中 pushHistory() 调用位置 | 确认按钮中在 `execCmd` 之前调用 `pushHistory()` |
+| 表格内的 insertImage（上一轮修改）与本次 Modal 的冲突 | 确认按钮中保留表格检测逻辑，在表格内时不使用 Modal 中的宽高值 |
+
+## 回滚策略
+
+- 删除新增的状态和 Modal JSX，恢复 `insertImage` 和 `insertTable` 中的 `prompt` 弹窗逻辑。
+- 恢复 `fillPlaceholder` 到修改前状态。
+- 恢复 `autoCaptureFrames`、`insertFrameToPlaceholder`、`handleDrop` 中的选择器和拦截逻辑。

工程分析/测试方案-2026-04-17-23-38-34.md

@@ -0,0 +1,86 @@
+# 测试方案 — 2026-04-17-23-38-34
+
+## 测试目标
+
+验证时间格式自定义下拉组件、表格内图片占位符插入、以及打印多页页边距三项修复。
+
+## 测试环境
+
+- 本地开发服务器：`npm run dev`（端口 3000）
+- 浏览器：Chrome/Edge
+- 测试账号：admin / 123456（超级管理员）
+
+## 测试用例
+
+### TC-1：时间格式自定义下拉（编辑字段）
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 1 | 登录 admin，进入「模板管理」→「字段管理」 | — |
+| 2 | 点击「手术日期」进入编辑模式，聚焦格式输入框 | 输入框下方弹出下拉列表，显示 `YYYY-MM-DD`、`YYYY年MM月DD日` 等日期格式 |
+| 3 | 点击列表中 `YYYY年MM月DD日` | 输入框被填充为 `YYYY年MM月DD日`，下拉列表关闭 |
+| 4 | 点击「手术开始时间」进入编辑模式，聚焦格式输入框 | 下拉列表只显示时间格式（`HH:mm`、`hh:mm A`），**不出现**日期格式 |
+| 5 | 在格式输入框中手写输入 `MM-DD HH:mm`，按 Enter | 新格式被保存，下拉列表中新增 `MM-DD HH:mm`；重新聚焦后可在列表中看到 |
+
+### TC-2：时间格式自定义下拉（新增字段）
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 1 | 在字段管理底部点击「新增字段」 | — |
+| 2 | category 选「时间」，type 选「日期」，聚焦格式输入框 | 下拉列表只显示日期格式 |
+| 3 | type 切换为「时分」，聚焦格式输入框 | 下拉列表只显示时间格式 |
+| 4 | 手写输入新格式 `hh:mm:ss`，按 Enter | 新格式被保存到 `customTimeFormats` 并出现在列表中 |
+
+### TC-3：表格内插入图片占位符（TemplateManage）
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 1 | 进入「模板管理」，编辑器中确保存在表格 | — |
+| 2 | 将光标放入表格的某个 `<td>` 单元格内 | — |
+| 3 | 点击工具栏「插入图片占位符」 | **不弹出 prompt**，占位符直接插入到单元格内 |
+| 4 | 用 DevTools 检查插入的元素 | 外层标签为 `<div class="image-placeholder">`，style 包含 `width:100%;height:100%;max-width:200px;max-height:200px;`，内部结构完整（delete-btn + placeholder-text） |
+| 5 | 点击图片占位符填充一张图片 | 图片正常显示，占位符添加 `has-image` class |
+
+### TC-4：普通文本中插入图片占位符（TemplateManage）
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 1 | 将光标放在表格外的普通文本段落中 | — |
+| 2 | 点击「插入图片占位符」 | 弹出 prompt 要求输入宽高 |
+| 3 | 输入 `100*80` | 插入行内 `<span class="image-placeholder">`，style 包含 `width:100px;height:80px;`，与前后文字保持在同一行 |
+
+### TC-5：表格内插入图片占位符（ReportEditor）
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 1 | 进入「报告编辑器」，确保报告内容中有表格 | — |
+| 2 | 将光标放入表格单元格内，插入图片占位符 | 不弹出 prompt，插入自适应 div 占位符 |
+| 3 | 从视频分析面板拖拽关键帧到占位符中 | 图片正常填充，结构完整 |
+
+### TC-6：打印多页页边距
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 1 | 在「报告编辑器」中创建一份内容较多的报告（或复制粘贴大量文本使内容超过1页A4） | — |
+| 2 | 点击「预览/打印」 | 弹出打印对话框 |
+| 3 | 在浏览器打印预览中查看第2页 | 第二页顶部和底部均有约 15mm 的留白，不紧贴纸张边缘；左右留白约 10mm |
+| 4 | 检查第一页 | 第一页同样有 15mm 上下 / 10mm 左右的均匀留白 |
+
+### TC-7：类型检查
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 1 | 项目根目录执行 `npm run lint` | `tsc --noEmit` 通过，0 errors |
+
+## 验收标准
+
+- [ ] `npm run lint` 无 TypeScript 编译错误
+- [ ] 时间格式输入框支持点击展开下拉列表、选择选项、手写输入并记忆新格式
+- [ ] date 字段下拉只显示日期格式，time 字段只显示时间格式
+- [ ] 表格内插入图片占位符不弹 prompt，结构完整，使用 div 块级容器
+- [ ] 普通文本中插入图片占位符仍弹 prompt，使用 span 行内容器
+- [ ] 打印多页时每一页上下均有约 15mm 留白，左右约 10mm
+
+## 测试方式
+
+全部使用手工功能验证（项目无单元测试框架）。

工程分析/测试方案-2026-04-18-00-02-08.md

@@ -0,0 +1,104 @@
+# 测试方案 — 2026-04-18-00-02-08
+
+## 测试目标
+
+验证拖拽关键帧插入样式修复、图片占位符自定义弹窗与分类隔离、表格插入自定义弹窗三项修复。
+
+## 测试环境
+
+- 本地开发服务器：`npm run dev`（端口 3000）
+- 浏览器：Chrome/Edge
+- 测试账号：admin / 123456（超级管理员）
+
+## 测试用例
+
+### TC-1：拖拽关键帧后边框消失 + 图片约束
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 1 | 进入「报告编辑器」，上传视频并自动摘取关键帧 | 右侧视频分析面板显示关键帧缩略图 |
+| 2 | 编辑器中插入一个图片占位符 | 显示虚线框占位符 |
+| 3 | 从右侧拖拽关键帧到占位符中 | 图片正常显示，**虚线边框和灰色背景消失**；图片不溢出占位符边界 |
+| 4 | 用 DevTools 检查 `<img>` 元素 | style 包含 `max-width:100%;max-height:100%;object-fit:contain;` |
+
+### TC-2：图片占位符插入弹窗（ReportEditor）
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 1 | 进入「报告编辑器」 | — |
+| 2 | 点击工具栏「插入图片占位符」 | **不弹出 prompt**，而是弹出居中的自定义 Modal |
+| 3 | Modal 中显示默认宽度 200、高度 200 | — |
+| 4 | 修改宽度为 120，高度为 80 | 输入框值正常变化 |
+| 5 | 选择「静态图片占位」模式 | 模式按钮高亮切换 |
+| 6 | 点击「确认插入」 | Modal 关闭，编辑器中插入行内 `<span>` 占位符，带有 `data-mode="manual"` 属性 |
+| 7 | 用 DevTools 检查插入的元素 | `data-mode="manual"` 存在，style 包含 `width:120px;height:80px;` |
+
+### TC-3：图片占位符插入弹窗（TemplateManage）
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 1 | 进入「模板管理」 | — |
+| 2 | 点击工具栏「插入图片占位符」 | 弹出自定义 Modal |
+| 3 | 确认插入 | 占位符正常插入，结构完整 |
+
+### TC-4：自动帧插入跳过 manual 占位符
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 1 | 在编辑器中插入两个占位符：第一个是 frame 模式，第二个是 manual 模式 | — |
+| 2 | 上传视频，开启「自动帧插入」，点击「自动关键帧摘取」 | — |
+| 3 | 观察占位符填充情况 | 只有**第一个 frame 模式**的占位符被自动填入关键帧；第二个 manual 占位符**保持空白** |
+
+### TC-5：一键插入跳过 manual 占位符
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 1 | 编辑器中先插入一个 manual 占位符，再插入一个 frame 占位符 | — |
+| 2 | 右侧关键帧卡片点击「插入」按钮 | 关键帧填入**第二个 frame 占位符**；manual 占位符不受影响 |
+
+### TC-6：拖拽拦截 manual 占位符
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 1 | 编辑器中插入一个 manual 占位符 | — |
+| 2 | 从右侧拖拽关键帧到该 manual 占位符上 | 弹出提示「此处为静态图片占位符，仅支持点击插入...」；占位符**不被填充** |
+
+### TC-7：表格插入弹窗（ReportEditor）
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 1 | 进入「报告编辑器」 | — |
+| 2 | 点击工具栏「插入表格」 | **不弹出 prompt**，弹出自定义 Modal |
+| 3 | Modal 中显示默认行数 2、列数 3 | — |
+| 4 | 修改行数为 4，列数为 2 | 输入框值正常变化 |
+| 5 | 点击「确认插入」 | Modal 关闭，编辑器中插入 4 行 2 列的表格 |
+
+### TC-8：表格插入弹窗（TemplateManage）
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 1 | 进入「模板管理」 | — |
+| 2 | 点击工具栏「插入表格」 | 弹出自定义 Modal |
+| 3 | 设置行数 3，列数 3，确认插入 | 表格正常插入 |
+
+### TC-9：类型检查
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 1 | 项目根目录执行 `npm run lint` | `tsc --noEmit` 通过，0 errors |
+
+## 验收标准
+
+- [ ] `npm run lint` 无 TypeScript 编译错误
+- [ ] 拖拽关键帧后占位符边框和背景消失，图片不溢出
+- [ ] 点击「插入图片占位符」弹出自定义 Modal（非 prompt）
+- [ ] Modal 支持选择占位符模式（frame/manual）
+- [ ] manual 占位符带有 `data-mode="manual"` 属性
+- [ ] 自动帧插入和一键插入跳过 manual 占位符
+- [ ] 拖拽到 manual 占位符被拦截并提示
+- [ ] 点击「插入表格」弹出自定义 Modal（非 prompt）
+- [ ] Modal 支持输入行数/列数并正常插入表格
+
+## 测试方式
+
+全部使用手工功能验证（项目无单元测试框架）。

工程分析/经验记录.md

@@ -854,3 +854,69 @@ if ((settings.autoInsertDelay || 0) > 0) {
 - `customTimeFormats` 这类用户可扩展的缓存数组，在初始化时应建立**无效值清理机制**，防止历史版本残留的数据污染后续 UI。
 - `datalist` / `select` 的选项如果存在明显的类型分组（日期 vs 时间），应在渲染层做过滤，而不是将所有选项平铺展示。
 - 任何在滚动容器内通过点击展开/折叠的交互组件，都应考虑增加 `scrollIntoView` 兜底，防止布局突变导致的点击失效问题。
+
+
+---
+
+## 记录 28：原生 datalist 交互体验差、表格内 execCommand 插入破坏结构、打印分页边距失效
+
+**A. 具体问题**
+1. `template-manage` 字段管理中，时间字段的格式输入使用原生 `<input list>` + `<datalist>`，浏览器下拉体验差，部分浏览器不会自动展示全部选项。
+2. 在 `template-manage` 编辑器表格中点击"插入图片占位符"后，HTML 结构被破坏——外层 `<span class="image-placeholder">` 丢失，仅剩内部子元素散落为 `<td>` 的直接子元素。
+3. `report-editor` / `report-view` 打印多页报告时，第二页及后续页面的上下边距几乎为 0，内容紧贴纸张边缘。
+
+**B. 产生问题原因**
+1. **原生 datalist 局限性**：不同浏览器对 `<datalist>` 的展示逻辑不一致，Edge/Chrome 中聚焦时不会自动展开全部选项，且不支持样式自定义，无法提供一致的下拉选择体验。
+2. **execCommand 在表格中的自动修正**：`document.execCommand('insertHTML')` 在 `<td>` 内处理复杂的 `inline-flex` 嵌套 `<span>` 时，WebKit/Blink 会将其自动"拍平"或重新排列。外层 `contenteditable="false"` 的 inline 容器被浏览器移除，仅剩内部子元素散落。
+3. **@page margin 与 body padding 的分页陷阱**：`@page { margin: 0 }` 将物理纸张边距设为 0，`body { padding: 10mm }` 只在整个 HTML 文档的顶部和底部各生效一次。当内容跨页时，浏览器在分页切断处不会保留 `body` 的 padding，导致第二页顶部和底部紧贴纸张边缘。`@page` 的 margin 才是为每一张物理纸张独立分配边距的正确方式。
+
+**C. 解决问题方案**
+1. **自定义下拉组件**：放弃原生 `input[list]` + `datalist`，改为手写 input + 绝对定位 div 列表组件：
+   - `onFocus` 时 `setDropdownOpen(true)` 展开列表
+   - `onMouseDown` + `e.preventDefault()` 阻止失焦，实现点击选项填充
+   - `onBlur`（延迟 200ms）时保存手写的新格式到 `customTimeFormats`
+   - 列表项通过 `.filter` 按 `date`/`time` 类型过滤显示
+2. **表格检测 + 块级容器**：在 `insertImage` 中通过 `window.getSelection().anchorNode` 向上遍历检测是否在 `<td>` / `<th>` 内：
+   - 若在表格内：不弹出 prompt，使用 `<div>` 块级容器 + `width:100%;height:100%;max-width:200px;max-height:200px;`
+   - 若不在表格内：保持现有 `<span>` 行内容器 + prompt 输入自定义宽高
+3. **打印边距修正**：`print.ts` 中：
+   - `@page { margin: 15mm 10mm; }` 让打印引擎为每一页纸张独立分配上下 15mm / 左右 10mm 边距
+   - `body { padding: 0; }` 清除 body padding
+   - `.content { width: 100%; }` 让内容自然撑满可用区域
+
+**D. 后续如何避免问题**
+- 当 `<input list>` + `<datalist>` 的交互体验无法满足需求时，应尽早替换为自定义下拉组件，避免在不同浏览器中产生不一致的行为。
+- `document.execCommand('insertHTML')` 对块级元素边界（尤其是 `<td>` 内）的自动修正行为不可控；在表格等复杂容器内插入 HTML 时，应优先使用块级标签（如 `<div>`）作为外层容器，减少被浏览器重新排列的风险。
+- 打印样式的边距控制必须使用 `@page { margin: ... }` 而非 `body { padding: ... }`，前者会让打印引擎为每一页物理纸张独立分配边距，后者只在文档首尾生效一次。
+
+
+---
+
+## 记录 29：拖拽关键帧样式遗漏、占位符分类隔离与 Modal 弹窗改造
+
+**A. 具体问题**
+1. 拖拽关键帧到 `.image-placeholder` 后，虚线边框和灰色背景未消失，且图片可能溢出占位符。
+2. `insertImage` 和 `insertTable` 使用浏览器原生 `prompt` 弹窗，交互体验差。
+3. 所有占位符一视同仁，自动帧插入和一键插入会把手术关键帧填入 Logo、签名等静态图片位置。
+
+**B. 产生问题原因**
+1. **`fillPlaceholder` 遗漏样式清除**：`fillPlaceholderSrc`（点击上传路径）设置了 `border='none'` 和 `background='transparent'`，但 `fillPlaceholder`（拖拽路径）遗漏了这两行，且图片 style 缺少 `max-height:100%;object-fit:contain;`。
+2. **原生 prompt 的限制**：`prompt` 弹窗无法自定义样式，且在不同浏览器中表现不一致，用户体验差。
+3. **占位符无分类机制**：所有 `.image-placeholder` 都接受关键帧填充，没有区分"接受自动插入"和"不接受自动插入"的占位符。
+
+**C. 解决问题方案**
+1. **补齐 `fillPlaceholder`**：增加 `placeholder.style.border = 'none'`、`placeholder.style.background = 'transparent'`，图片 style 改为 `max-width:100%;max-height:100%;object-fit:contain;`。
+2. **自定义 Modal 替代 prompt**：
+   - 新增 `placeholderModal` 状态（isOpen, width, height, mode）和 `tableModal` 状态（isOpen, rows, cols）。
+   - `insertImage` 和 `insertTable` 改为打开 Modal。
+   - Modal 使用项目统一的 `bg-black/50 backdrop-blur-sm` + `bg-white rounded-2xl` 风格。
+3. **占位符分类隔离**：
+   - Modal 中增加模式选择：「手术影像占位（frame）」和「静态图片占位（manual）」。
+   - manual 模式生成的 placeholder 带有 `data-mode="manual"` 属性。
+   - `autoCaptureFrames` 和 `insertFrameToPlaceholder` 的选择器增加 `:not([data-mode="manual"])`。
+   - `handleDrop` 中拦截 manual 占位符的拖拽，弹出提示。
+
+**D. 后续如何避免问题**
+- 当同一填充逻辑存在多个入口（点击上传、拖拽、自动插入）时，务必确保所有入口的后续处理完全一致，避免某一路径遗漏样式清除。
+- 原生 `prompt`/`confirm`/`alert` 在现代 Web 应用中应尽量避免使用，优先采用自定义 Modal 组件，以获得一致的视觉体验和更灵活的控制能力。
+- 当系统中存在"自动填充"机制时，应考虑为被填充的容器增加分类标记（如 `data-mode`），并在自动填充逻辑中通过选择器过滤，防止无关区域被污染。

工程分析/需求分析-2026-04-17-23-38-34.md

@@ -0,0 +1,35 @@
+# 需求分析 — 2026-04-17-23-38-34
+
+## 原始需求摘要
+
+1. **时间格式输入框改造**：`template-manage` 字段管理中，时间字段的格式输入当前使用原生 `<input list="...">` + `<datalist>`，浏览器兼容性和交互体验不佳。希望改造为类似单选下拉框的自定义组件，既能下拉选择已有格式，又能手写输入并自动记忆新格式。
+
+2. **表格内插入图片占位符修复**：在 `template-manage` 编辑器表格中点击"插入图片占位符"后，HTML 结构被破坏——外层 `<span class="image-placeholder">` 丢失，仅剩内部子元素被分散到 `<td>` 中。且表格内占位符应默认自适应单元格大小（最大不超过 200×200px）。
+
+3. **打印第二页页边距太小**：`report-editor` / `report-view` 点击打印时，第二页及后续页面的上下边距几乎为 0，内容紧贴纸张边缘。当前 `@page { margin: 0 }` + `body { padding: 10mm }` 的组合仅在文档首尾生效一次，分页后无padding。
+
+## 需求拆解
+
+### 功能点
+
+- **F1**：`TemplateManage.tsx` 中编辑字段和新增字段的时间格式输入，从原生 `input[list]` + `datalist` 改造为自定义下拉组件（input + 绝对定位 ul 列表）。支持点击展开下拉、点击选项填充、手写输入、blur/Enter 时自动保存新格式到 `customTimeFormats`。
+- **F2**：`TemplateManage.tsx` 和 `ReportEditor.tsx` 的 `insertImage` 函数，在插入前检测当前光标是否位于 `<td>` / `<th>` 内。若在表格内，使用块级 `<div>` 作为外层容器（避免浏览器 execCommand 修正破坏结构），并设置 `width:100%;height:100%;max-width:200px;max-height:200px;` 实现自适应。不在表格内时保持现有 `<span>` 行内结构。
+- **F3**：`src/utils/print.ts` 中，将 `@page { margin: 0 }` + `body { padding: 10mm }` 改为 `@page { margin: 15mm 10mm }` + `body { padding: 0 }`，使每一页物理纸张都有独立的上下 15mm / 左右 10mm 留白。同步调整 `.content` 的 width 为 `100%`。
+
+### 非功能点
+
+- 向后兼容：已保存的模板/报告中已有的 `image-placeholder` 结构不受影响。
+- 下拉组件的 `z-index` 需确保覆盖在滚动容器之上。
+- 打印样式调整应同时兼顾 `.image-placeholder` 在打印时的隐藏逻辑。
+
+## 影响范围预估
+
+| 模块 | 影响程度 | 说明 |
+|------|---------|------|
+| `src/pages/TemplateManage.tsx` | 高 | 时间格式自定义下拉组件（编辑+新增两处）；insertImage 表格检测与分支逻辑 |
+| `src/pages/ReportEditor.tsx` | 中 | insertImage 表格检测与分支逻辑 |
+| `src/utils/print.ts` | 低 | @page margin 与 body padding 调整 |
+
+## 待确认问题
+
+无（用户已明确需求，且本次无需人工确认）。

工程分析/需求分析-2026-04-18-00-02-08.md

@@ -0,0 +1,45 @@
+# 需求分析 — 2026-04-18-00-02-08
+
+## 原始需求摘要
+
+1. **修复拖拽关键帧插入兼容性**：拖拽关键帧到 `.image-placeholder` 后，虚线边框和背景色未消失，且图片缺少 `max-height:100%;object-fit:contain;` 约束，可能溢出占位符。
+
+2. **图片占位符插入改为自定义弹窗 + 分类隔离**：
+   - 替换 `insertImage` 中的 `prompt` 弹窗为自定义 React Modal。
+   - 占位符分为两类：
+     - **手术影像占位（frame 模式）**：支持自动帧插入、一键插入、拖拽插入。
+     - **静态图片占位（manual 模式）**：仅支持点击后从弹窗选择图片来源（本地上传/签名/素材），防止系统自动将手术关键帧填入 Logo 或签名位置。
+   - 自动帧插入和一键插入逻辑需跳过 `data-mode="manual"` 的占位符。
+   - 拖拽到 manual 占位符时需拦截并提示。
+
+3. **表格插入改为自定义弹窗**：替换 `insertTable` 中的 `prompt` 弹窗为自定义 React Modal，中间弹出子窗口选择行数和列数。
+
+## 需求拆解
+
+### 功能点
+
+- **F1**：`ReportEditor.tsx` 的 `fillPlaceholder` 函数补齐 `border='none'`、`background='transparent'`，图片 style 增加 `max-height:100%;object-fit:contain;`。
+- **F2**：`ReportEditor.tsx` 和 `TemplateManage.tsx` 的 `insertImage` 改为打开自定义 Modal（替代 `prompt`）。Modal 包含：
+  - 宽高输入框（默认 200*200）
+  - 模式选择：手术影像占位（frame）/ 静态图片占位（manual）
+  - 确认/取消按钮
+- **F3**：生成 placeholder HTML 时，manual 模式添加 `data-mode="manual"` 属性。
+- **F4**：`ReportEditor.tsx` 的 `autoCaptureFrames`（setTimeout 回调内）、`insertFrameToPlaceholder` 的空占位符选择器，从 `.image-placeholder:not(.has-image)` 改为 `.image-placeholder:not(.has-image):not([data-mode="manual"])`。
+- **F5**：`ReportEditor.tsx` 的 `handleDrop` 增加拦截：若目标 placeholder 的 `data-mode === 'manual'`，弹出提示并阻止填充。
+- **F6**：`ReportEditor.tsx` 和 `TemplateManage.tsx` 的 `insertTable` 改为打开自定义 Modal（替代 `prompt`），包含行数/列数输入和确认/取消按钮。
+
+### 非功能点
+
+- 向后兼容：已有报告中已有的 placeholder 结构不受影响（没有 `data-mode` 属性的占位符默认为 frame 模式）。
+- Modal 样式复用现有的 `bg-black/50 backdrop-blur-sm` + `bg-white rounded-2xl` 风格。
+
+## 影响范围预估
+
+| 模块 | 影响程度 | 说明 |
+|------|---------|------|
+| `src/pages/ReportEditor.tsx` | 高 | fillPlaceholder 修复；insertImage 改为 Modal；insertTable 改为 Modal；autoCaptureFrames 选择器；insertFrameToPlaceholder 选择器；handleDrop 拦截；新增 3 个 Modal 的 JSX |
+| `src/pages/TemplateManage.tsx` | 高 | insertImage 改为 Modal；insertTable 改为 Modal；新增 2 个 Modal 的 JSX |
+
+## 待确认问题
+
+无（用户已明确需求，且本次无需人工确认）。