2026-04-18-19-37-56 - 四项编辑器体验优化：视频按钮位置、占位符文字居中、删除恢复尺寸、安全对齐

2026-04-18 19:42:47 +08:00
parent 8ffb9162d3
commit f98177938f
6 changed files with 264 additions and 35 deletions
--- a/src/pages/ReportEditor.tsx
+++ b/src/pages/ReportEditor.tsx
@@ -356,11 +356,24 @@ export default function ReportEditor() {
        const reader = new FileReader();
        reader.onload = (event) => {
          const src = event.target?.result as string;
+          const mw = placeholder.style.maxWidth || placeholder.style.width || '200px';
+          const mh = placeholder.style.maxHeight || placeholder.style.height || '200px';
          placeholder.innerHTML = `
            <span class="delete-btn" contenteditable="false">×</span>
-            <img src="${src}" style="max-width: 100%; height: auto; display: block; margin: 0 auto;" draggable="false">
+            <img src="${src}" style="max-width:${mw};max-height:${mh};display:block;object-fit:contain;object-position:left top;" draggable="false">
          `;
          placeholder.classList.add('has-image');
+          placeholder.style.border = 'none';
+          placeholder.style.background = 'transparent';
+          placeholder.style.width = 'auto';
+          placeholder.style.height = 'auto';
+          placeholder.style.lineHeight = 'normal';
+          placeholder.style.maxWidth = mw;
+          placeholder.style.maxHeight = mh;
+          placeholder.style.textAlign = 'left';
+          placeholder.style.verticalAlign = 'top';
+          placeholder.style.justifyContent = 'flex-start';
+          placeholder.style.alignItems = 'flex-start';
          if (editorRef.current) contentRef.current = editorRef.current.innerHTML;
          saveDraftToStorage();
        };
@@ -409,12 +422,25 @@ export default function ReportEditor() {
        e.preventDefault();
        if (placeholder.classList.contains('has-image')) {
          placeholder.classList.remove('has-image');
+          const w = parseInt(placeholder.style.maxWidth || placeholder.style.width || '0');
+          const text = w > 0 && w < 80 ? '插图' : '插入/点击放置图片';
          placeholder.innerHTML = `
            <span class="delete-btn" contenteditable="false">×</span>
-            <span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span>
+            <span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:block;width:100%;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 +558,19 @@ export default function ReportEditor() {
    }
  };

+  const changeAlignment = (align: 'left' | 'center' | 'right' | 'justify') => {
+    const sel = window.getSelection();
+    if (!sel || !sel.rangeCount) return;
+    let node = sel.getRangeAt(0).commonAncestorContainer;
+    if (node.nodeType === Node.TEXT_NODE) node = node.parentNode as Node;
+    const block = (node as HTMLElement).closest('p, div, td, h1, h2, h3, li');
+    if (block) {
+      (block as HTMLElement).style.textAlign = align;
+      if (editorRef.current) contentRef.current = editorRef.current.innerHTML;
+      saveDraftToStorage();
+    }
+  };
+
  const insertTable = () => {
    editorRef.current?.focus();
    setTableModal({ isOpen: true, rows: '2', cols: '3' });
@@ -1413,9 +1452,9 @@ export default function ReportEditor() {
                </div>
              </div>
              <div className="flex gap-1 pr-3 mr-3 border-r border-border">
-                <button onClick={() => execCmd('justifyLeft')} className="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-white text-text-muted hover:text-text-main transition-colors" title="左对齐"><AlignLeft size={16} /></button>
-                <button onClick={() => execCmd('justifyCenter')} className="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-white text-text-muted hover:text-text-main transition-colors" title="居中"><AlignCenter size={16} /></button>
-                <button onClick={() => execCmd('justifyRight')} className="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-white text-text-muted hover:text-text-main transition-colors" title="右对齐"><AlignRight size={16} /></button>
+                <button onMouseDown={(e) => e.preventDefault()} onClick={() => changeAlignment('left')} className="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-white text-text-muted hover:text-text-main transition-colors" title="左对齐"><AlignLeft size={16} /></button>
+                <button onMouseDown={(e) => e.preventDefault()} onClick={() => changeAlignment('center')} className="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-white text-text-muted hover:text-text-main transition-colors" title="居中"><AlignCenter size={16} /></button>
+                <button onMouseDown={(e) => e.preventDefault()} onClick={() => changeAlignment('right')} className="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-white text-text-muted hover:text-text-main transition-colors" title="右对齐"><AlignRight size={16} /></button>
              </div>
              <div className="flex gap-1">
                <button onClick={insertTable} className="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-white text-text-muted hover:text-text-main transition-colors" title="表格"><Table size={16} /></button>
@@ -1821,13 +1860,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 +1885,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 +2035,14 @@ export default function ReportEditor() {
                const id = 'ph_' + Date.now();
                let html: string;
                if (inTable) {
-                  const styleStr = 'display:flex;align-items:center;justify-content:center;border:1px dashed #cbd5e1;background:#f8fafc;cursor:pointer;width:100%;height:100%;max-width:200px;max-height:200px;min-height:60px;margin:0 auto;';
-                  html = `<div id="${id}" class="image-placeholder" data-placeholder="true" contenteditable="false"${modeAttr} style="${styleStr}"><span class="delete-btn" contenteditable="false">×</span><span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;">${hintText}</span></div>`;
+                  const styleStr = 'position:relative;display:flex;align-items:center;justify-content:center;border:1px dashed #cbd5e1;background:#f8fafc;cursor:pointer;width:100%;height:100%;max-width:200px;max-height:200px;min-height:60px;margin:0 auto;';
+                  html = `<div id="${id}" class="image-placeholder" data-placeholder="true" contenteditable="false"${modeAttr} style="${styleStr}"><span class="delete-btn" contenteditable="false">×</span><span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:block;width:100%;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%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">${text}</span></span>&#8203;`;
                }
                execCmd('insertHTML', html);
                setPlaceholderModal({...placeholderModal, isOpen: false});
--- a/src/pages/TemplateManage.tsx
+++ b/src/pages/TemplateManage.tsx
@@ -385,6 +385,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', []);
@@ -813,9 +825,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>
@@ -1363,14 +1375,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%;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%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">${text}</span></span>&#8203;`;
                }
                const wrapper = document.createElement('div');
                wrapper.innerHTML = html;
--- a/src/utils/defaultContent.ts
+++ b/src/utils/defaultContent.ts
@@ -8,7 +8,7 @@ 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="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%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入图片</span>
    </span>
    <div style="text-align: center;">
        <div style="font-size: 14pt; font-family: SimSun; border-bottom: 1px solid #000; padding-bottom: 0; margin-bottom: 8px; display: inline-block; line-height: 1;">西 安 交 通 大 学 第 一 附 属 医 院</div>
@@ -81,46 +81,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%;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%;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%;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%;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%;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%;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 +145,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%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">插入/点击放置图片</span></span>
    </p>
    
    <p style="margin: 0; padding: 0; line-height: 1.5;">&nbsp;</p>
--- a/工程分析/实现方案-2026-04-18-19-37-56.md
+++ b/工程分析/实现方案-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`，需验证所有占位符均满足。
--- a/工程分析/测试方案-2026-04-18-19-37-56.md
+++ b/工程分析/测试方案-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` 所在行同样适用，对齐时不破坏字段与文字的同行关系。
+
+## 回归测试
+- 确保视频上传、播放、关键帧摘取功能正常。
+- 确保图片占位符的插入、拖拽、自动帧填充功能正常。
+- 确保打印样式正常，图片和字段显示正确。
+
+## 测试通过标准
+所有用例均通过，无控制台报错，排版结构完整。
--- a/工程分析/需求分析-2026-04-18-19-37-56.md
+++ b/工程分析/需求分析-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 结构