seaislee1209 385e1bb49e feat(records): 任务详情弹窗排版优化 — 参考素材搬左侧 + tooltip + max-height
用户反馈:右侧太挤,左侧视频下大片空白浪费,参考素材埋在右侧底部要滚才能看。

排版重组 (RecordDetailModal.tsx):
  - 左侧 mediaPanel:视频 + 参考素材(纵向排列)
    - 视频固定 480×270 (16:9 + object-fit contain)
    - 参考素材区紧贴视频下方,有标题"参考素材(N)"
  - 右侧 infoPanel:状态 / 失败原因 / 基本信息 / 提示词
    - prompt 区域宽度从挤压改为可读宽度
    - 不再有参考素材占下方位置
  - 整体不再有"空白左下角"+ "右侧挤死"+"参考要滚"问题

参考素材区限高 (RecordDetailModal.tsx refScrollBox):
  - max-height: 250px + overflow-y: auto
  - Seedance 单任务最多 9 张图(memory: project_seedance_max_refs),
    80px thumb × 5/行 = 1-2 行,250px 兜底有余
  - 极端情况(未来扩 audio/video 参考)走内部滚动,不推视频上去

Tooltip (ReferenceList.tsx):
  - refItem 加 title={label},hover thumb 弹原生 tooltip 显示完整文件名
  - 解决长文件名 "公司年会现场抓拍-高分辨率-竖屏-第3版.jpg" 被省略号截断后看不全的问题
  - 零成本(浏览器原生),无 JS 开销

新增 memory:
  ~/.claude/.../memory/project_seedance_max_refs.md
  - 火山 Seedance API 单任务最多 9 张参考图片
  - 防止以后又按"上百张"做 UI 假设

验证:
  - TS 编译过
  - modal screenshot 4 张更新 (docs/screenshots/v2/modal/)
  - 视频 + 参考素材左侧贴齐,右侧 prompt 区宽松

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-12 15:43:27 +08:00
2026-03-13 10:03:12 +08:00
2026-03-13 10:03:12 +08:00
2026-04-04 14:04:53 +08:00
2026-04-04 10:15:23 +08:00
2026-04-04 10:15:23 +08:00
Description
火山视频生成
97 MiB
Languages
TypeScript 51.6%
Python 27.3%
HTML 11.1%
CSS 9.9%
Dockerfile 0.1%