2026-04-18-19-23-31 - 修复视频分析模块空白、图片占位符尺寸自适应优化
This commit is contained in:
Administrator
@@ -489,16 +489,24 @@ export default function ReportEditor() {
|
||||
}, []);
|
||||
|
||||
const fillPlaceholderSrc = (placeholder: HTMLElement, src: string) => {
|
||||
const mw = placeholder.style.maxWidth || placeholder.style.width || '200px';
|
||||
const mh = placeholder.style.maxHeight || placeholder.style.height || '200px';
|
||||
placeholder.innerHTML = `
|
||||
<span class="delete-btn" contenteditable="false">×</span>
|
||||
<img src="${src}" style="max-width:100%;height:auto;display:block;margin:0 auto;" draggable="false">
|
||||
<img src="${src}" style="max-width:${mw};max-height:${mh};display:block;object-fit:contain;object-position:left top;" draggable="false">
|
||||
`;
|
||||
placeholder.classList.add('has-image');
|
||||
placeholder.style.border = 'none';
|
||||
placeholder.style.background = 'transparent';
|
||||
placeholder.style.height = 'auto';
|
||||
placeholder.style.width = 'auto';
|
||||
placeholder.style.height = 'auto';
|
||||
placeholder.style.lineHeight = 'normal';
|
||||
placeholder.style.maxWidth = mw;
|
||||
placeholder.style.maxHeight = mh;
|
||||
placeholder.style.textAlign = 'left';
|
||||
placeholder.style.verticalAlign = 'top';
|
||||
placeholder.style.justifyContent = 'flex-start';
|
||||
placeholder.style.alignItems = 'flex-start';
|
||||
if (editorRef.current) contentRef.current = editorRef.current.innerHTML;
|
||||
saveDraftToStorage();
|
||||
};
|
||||
@@ -664,14 +672,20 @@ export default function ReportEditor() {
|
||||
if (emptyPlaceholder) {
|
||||
emptyPlaceholder.innerHTML = `
|
||||
<span class="delete-btn" contenteditable="false">×</span>
|
||||
<img src="${newFrame.dataUrl}" style="max-width: 100%; height: auto; display: block; margin: 0 auto;" draggable="false">
|
||||
<img src="${newFrame.dataUrl}" style="max-width:${emptyPlaceholder.style.maxWidth || emptyPlaceholder.style.width || '200px'};max-height:${emptyPlaceholder.style.maxHeight || emptyPlaceholder.style.height || '200px'};display:block;object-fit:contain;object-position:left top;" draggable="false">
|
||||
`;
|
||||
emptyPlaceholder.classList.add('has-image');
|
||||
emptyPlaceholder.style.border = 'none';
|
||||
emptyPlaceholder.style.background = 'transparent';
|
||||
emptyPlaceholder.style.height = 'auto';
|
||||
emptyPlaceholder.style.width = 'auto';
|
||||
emptyPlaceholder.style.height = 'auto';
|
||||
emptyPlaceholder.style.lineHeight = 'normal';
|
||||
emptyPlaceholder.style.maxWidth = emptyPlaceholder.style.maxWidth || emptyPlaceholder.style.width || '200px';
|
||||
emptyPlaceholder.style.maxHeight = emptyPlaceholder.style.maxHeight || emptyPlaceholder.style.height || '200px';
|
||||
emptyPlaceholder.style.textAlign = 'left';
|
||||
emptyPlaceholder.style.verticalAlign = 'top';
|
||||
emptyPlaceholder.style.justifyContent = 'flex-start';
|
||||
emptyPlaceholder.style.alignItems = 'flex-start';
|
||||
contentRef.current = editorRef.current.innerHTML;
|
||||
saveDraftToStorage();
|
||||
}
|
||||
@@ -696,16 +710,24 @@ export default function ReportEditor() {
|
||||
};
|
||||
|
||||
const fillPlaceholder = (placeholder: HTMLElement, frame: CapturedFrame) => {
|
||||
const mw = placeholder.style.maxWidth || placeholder.style.width || '200px';
|
||||
const mh = placeholder.style.maxHeight || placeholder.style.height || '200px';
|
||||
placeholder.innerHTML = `
|
||||
<span class="delete-btn" contenteditable="false">×</span>
|
||||
<img src="${frame.dataUrl}" style="max-width:100%;height:auto;display:block;margin:0 auto;" draggable="false">
|
||||
<img src="${frame.dataUrl}" style="max-width:${mw};max-height:${mh};display:block;object-fit:contain;object-position:left top;" draggable="false">
|
||||
`;
|
||||
placeholder.classList.add('has-image');
|
||||
placeholder.style.border = 'none';
|
||||
placeholder.style.background = 'transparent';
|
||||
placeholder.style.height = 'auto';
|
||||
placeholder.style.width = 'auto';
|
||||
placeholder.style.height = 'auto';
|
||||
placeholder.style.lineHeight = 'normal';
|
||||
placeholder.style.maxWidth = mw;
|
||||
placeholder.style.maxHeight = mh;
|
||||
placeholder.style.textAlign = 'left';
|
||||
placeholder.style.verticalAlign = 'top';
|
||||
placeholder.style.justifyContent = 'flex-start';
|
||||
placeholder.style.alignItems = 'flex-start';
|
||||
if (editorRef.current) contentRef.current = editorRef.current.innerHTML;
|
||||
saveDraftToStorage();
|
||||
};
|
||||
@@ -1798,45 +1820,43 @@ export default function ReportEditor() {
|
||||
onChange={handleVideoUpload}
|
||||
/>
|
||||
|
||||
{videos.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex gap-2 overflow-x-auto pb-2 no-scrollbar">
|
||||
<button
|
||||
onClick={() => videoInputRef.current?.click()}
|
||||
className="shrink-0 w-24 h-[68px] flex flex-col items-center justify-center gap-1 border-2 border-dashed border-border rounded-xl hover:border-accent hover:bg-slate-50 transition-all text-text-muted hover:text-accent"
|
||||
<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}
|
||||
className={`shrink-0 w-24 p-1.5 border-2 rounded-xl cursor-pointer transition-all relative group ${
|
||||
currentVideoIndex === i ? 'border-accent bg-white shadow-sm' : 'border-transparent'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
onClick={() => selectVideo(i)}
|
||||
className="aspect-video bg-slate-900 rounded-lg flex items-center justify-center text-white"
|
||||
>
|
||||
<Video size={18} />
|
||||
<span className="text-[10px] font-bold">上传视频</span>
|
||||
<Play size={16} />
|
||||
</div>
|
||||
<div
|
||||
onClick={() => selectVideo(i)}
|
||||
className="text-[9px] font-bold text-text-main truncate mt-1.5 px-1"
|
||||
>{v.name}</div>
|
||||
<button
|
||||
onClick={() => removeVideo(v.id)}
|
||||
className="absolute -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center text-[10px] opacity-0 group-hover:opacity-100 transition-all shadow-sm"
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
{videos.map((v, i) => (
|
||||
<div
|
||||
key={v.id}
|
||||
className={`shrink-0 w-24 p-1.5 border-2 rounded-xl cursor-pointer transition-all relative group ${
|
||||
currentVideoIndex === i ? 'border-accent bg-white shadow-sm' : 'border-transparent'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
onClick={() => selectVideo(i)}
|
||||
className="aspect-video bg-slate-900 rounded-lg flex items-center justify-center text-white"
|
||||
>
|
||||
<Play size={16} />
|
||||
</div>
|
||||
<div
|
||||
onClick={() => selectVideo(i)}
|
||||
className="text-[9px] font-bold text-text-main truncate mt-1.5 px-1"
|
||||
>{v.name}</div>
|
||||
<button
|
||||
onClick={() => removeVideo(v.id)}
|
||||
className="absolute -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center text-[10px] opacity-0 group-hover:opacity-100 transition-all shadow-sm"
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{currentVideoIndex !== -1 && (
|
||||
<div className="space-y-2">
|
||||
{currentVideoIndex !== -1 && videos.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="relative bg-slate-900 rounded-2xl overflow-hidden aspect-video shadow-lg">
|
||||
<video
|
||||
ref={videoRef}
|
||||
@@ -1925,8 +1945,6 @@ export default function ReportEditor() {
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -1982,7 +2000,7 @@ export default function ReportEditor() {
|
||||
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-block;text-align:center;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;position:relative;';
|
||||
styleStr += `width:${w}px;height:${h}px;line-height:${h}px;`;
|
||||
styleStr += `width:${w}px;height:${h}px;max-width:${w}px;max-height:${h}px;line-height:${h}px;`;
|
||||
const showShortText = w > 0 && w < 80;
|
||||
const text = showShortText ? '插图' : hintText;
|
||||
html = `<span id="${id}" class="image-placeholder" data-placeholder="true" contenteditable="false"${modeAttr} style="${styleStr}"><span class="delete-btn" contenteditable="false">×</span><span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;display:inline-block;vertical-align:middle;line-height:normal;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">${text}</span></span>​`;
|
||||
|
||||
Reference in New Issue
Block a user