实现方案 —— 2026-04-18-19-23-31

方案目标

修复视频分析模块空白问题，重构图片占位符的填充后尺寸逻辑。

需求 1：修复视频分析模块空白

修改文件

src/pages/ReportEditor.tsx

修改内容

将「上传视频」按钮和视频缩略图列表从 videos.length > 0 条件内部移出，使其始终渲染。仅保留视频播放器和关键帧网格在 currentVideoIndex !== -1 && videos.length > 0 条件下渲染。

修改后结构：

{activeTab === 'video' && (
  <div className="space-y-2">
    <input ref={videoInputRef} ... />
    
    {/* 始终可见：上传按钮 + 视频缩略图列表 */}
    <div className="flex gap-2 overflow-x-auto pb-2 no-scrollbar items-center">
      <button>上传视频</button>
      {videos.map(...)}
    </div>
    
    {/* 条件渲染：视频播放器和关键帧 */}
    {currentVideoIndex !== -1 && videos.length > 0 && (
      <div className="space-y-2">...</div>
    )}
  </div>
)}

需求 2：图片占位符尺寸自适应

核心逻辑

插入占位符时：在 style 中注入 max-width 和 max-height，与 width/height 相同，便于后续读取限制值。
填充图片时：
- 读取占位符当前的 max-width / max-height（或回退到 width / height）
- 将这两个值赋给内部 <img> 的 max-width / max-height
- 设置 object-fit: contain; object-position: left top
- 将占位符外壳的 width、height、line-height 设为 auto / normal
- 保留 max-width、max-height 作为硬限制
- 设置 text-align: left; vertical-align: top

修改文件及位置

文件	函数/位置	修改内容
`src/pages/ReportEditor.tsx`	`fillPlaceholderSrc`	填充后读取限制值，设置 img 和外壳样式
`src/pages/ReportEditor.tsx`	`fillPlaceholder`	同上
`src/pages/ReportEditor.tsx`	`autoCaptureFrames`	同上
`src/pages/ReportEditor.tsx`	placeholderModal 确认插入	style 中增加 `max-width` / `max-height`
`src/pages/TemplateManage.tsx`	`fillPlaceholderSrc`	同上
`src/pages/TemplateManage.tsx`	placeholderModal 确认插入	style 中增加 `max-width` / `max-height`

样式值示例

const mw = placeholder.style.maxWidth || placeholder.style.width || '200px';
const mh = placeholder.style.maxHeight || placeholder.style.height || '200px';

placeholder.innerHTML = `
  <span class="delete-btn" contenteditable="false">×</span>
  <img src="${src}" style="max-width:100%;max-height:${mh};display:block;object-fit:contain;object-position:left top;" draggable="false">
`;

placeholder.style.width = 'auto';
placeholder.style.height = 'auto';
placeholder.style.maxWidth = mw;
placeholder.style.maxHeight = mh;
placeholder.style.lineHeight = 'normal';
placeholder.style.textAlign = 'left';
placeholder.style.verticalAlign = 'top';

需求 3：Logo 框大小保持 65px × 65px

默认模板中 Logo 占位符的 width:65px;height:65px 保持不变。此需求通过不修改 Logo 占位符相关代码即可满足。

风险与注意事项

视频按钮移出条件渲染后，需确保 videoInputRef 的引用始终有效。
占位符 width:auto 后，在表格单元格（td）内的表现需要验证，确保不会超出单元格。
object-position: left top 仅在 object-fit: contain 时生效。
需确保 max-width / max-height 在打印样式中不会被 @media print 规则覆盖。

3.5 KiB Raw Blame History Unescape Escape