宜博 / 2080tiserver

Commit c07ee7721c42deb86a4a13ea65770beffc921b83

Authored by yibo
1 parent 6e1cffe4

h3-console: 参考图文件名 caption 挪到图片上方（之前在下面，用户反馈不够显眼） 

任务详情页(viewThumb)和上传表单缩略图(wrapWithDelete)都是同一个模式：caption跟media
的DOM顺序对调即可，.thumb-wrap是flex-direction:column，顺序决定视觉位置，不用改CSS。
顺带排查了用户反馈的另一个问题"点击图片变下载"——查了一个具体任务(1cc42a8669a1)的参考图
实际引用的是外部图床(shadiao-2d.oss-cn-aliyuncs.com)，那边响应头自己带了
Content-Disposition:attachment，是外部服务器强制的，不是咱们代码的bug；对比测试过咱们
自己/v1/assets上传的图片没有这个问题。

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Inline Side-by-side
Showing 1 changed file with 15 additions and 11 deletions
h3-console/static/index.html
  View file @c07ee77
... ... @@ -347,12 +347,18 @@ function filenameFromUrl(u) {
347 347 } catch (e) { return u; }
348 348 }
349 349  
350   -// 每个预览项都包一层 .thumb-wrap，媒体本体再包一层 .thumb-media 挂 × 删除按钮，
351   -// 下面接一行文件名 caption——上传上去选错了/传多了，之前只能整个表单清空重来，
352   -// 2026-08-24 用户要求能单个删；文件名是 2026-08-24 补的，之前只有个位置标签看不出传的是哪个文件。
  350 +// 每个预览项都包一层 .thumb-wrap，文件名 caption 放在最上面、媒体本体再包一层
  351 +// .thumb-media 挂 × 删除按钮——上传上去选错了/传多了，之前只能整个表单清空重来，
  352 +// 2026-08-24 用户要求能单个删；文件名是 2026-08-24 补的，之前只有个位置标签看不出传的是
  353 +// 哪个文件；2026-08-25 改成放图片上方（之前放下面，用户反馈不够显眼，容易当成没显示）。
353 354 function wrapWithDelete(mediaEl, onDelete, caption) {
354 355 const wrap = document.createElement('span');
355 356 wrap.className = 'thumb-wrap';
  357 + if (caption) {
  358 + const cap = document.createElement('span');
  359 + cap.className = 'thumb-name'; cap.textContent = caption; cap.title = caption;
  360 + wrap.appendChild(cap);
  361 + }
356 362 const mediaWrap = document.createElement('span');
357 363 mediaWrap.className = 'thumb-media';
358 364 const del = document.createElement('button');
... ... @@ -360,11 +366,6 @@ function wrapWithDelete(mediaEl, onDelete, caption) {
360 366 del.onclick = onDelete;
361 367 mediaWrap.appendChild(mediaEl); mediaWrap.appendChild(del);
362 368 wrap.appendChild(mediaWrap);
363   - if (caption) {
364   - const cap = document.createElement('span');
365   - cap.className = 'thumb-name'; cap.textContent = caption; cap.title = caption;
366   - wrap.appendChild(cap);
367   - }
368 369 return wrap;
369 370 }
370 371  
... ... @@ -827,11 +828,14 @@ async function refreshDetail() {
827 828 if (req.first_frame_url) imgs.push(['首帧', req.first_frame_url]);
828 829 if (req.last_frame_url) imgs.push(['尾帧', req.last_frame_url]);
829 830 (req.reference_image_urls || []).forEach((u, i) => imgs.push(['参考图'+(i+1), u]));
830   - // 图片点开看大图，参考视频/音频跟生成结果的视频一样用原生播放器直接预览；每个媒体下面
831   - // 再带一行文件名（从上传时 server.py 塞进 URL 里的原名反解出来，见 filenameFromUrl）。
  831 + // 图片点开看大图，参考视频/音频跟生成结果的视频一样用原生播放器直接预览；每个媒体上面
  832 + // 带一行文件名（从上传时 server.py 塞进 URL 里的原名反解出来，见 filenameFromUrl——
  833 + // 引用外部图床的旧任务URL里没有这个原名分段，会退化成显示URL里的原始文件名/hash，
  834 + // 不算错误，只是没有更好的名字可用）。2026-08-25：caption 挪到图片上方（之前在下面，
  835 + // 用户反馈不够显眼）。
832 836 const thumbCap = (label, u) => `${label} · ${filenameFromUrl(u)}`.replace(/</g, '&lt;');
833 837 const viewThumb = (mediaHtml, label, u) =>
834   - `<span class="thumb-wrap"><span class="thumb-media">${mediaHtml}</span><span class="thumb-name" title="${thumbCap(label,u)}">${thumbCap(label,u)}</span></span>`;
  838 + `<span class="thumb-wrap"><span class="thumb-name" title="${thumbCap(label,u)}">${thumbCap(label,u)}</span><span class="thumb-media">${mediaHtml}</span></span>`;
835 839 const imgTags = imgs.map(([label, u]) =>
836 840 viewThumb(`<a href="${u}" target="_blank" title="${label}，点击查看大图"><img src="${u}" title="${label}"></a>`, label, u)).join('');
837 841 const videoTags = (req.reference_video_urls || []).map((u, i) =>
... ...