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-16 05:49:21 +08:00
2026-05-12 15:43:27 +08:00
2026-05-12 14:48:23 +08:00
2026-03-13 10:24:31 +08:00
2026-04-04 13:14:20 +08:00
2026-05-11 11:10:35 +08:00
2026-04-04 19:16:38 +08:00
2026-03-18 12:02:54 +08:00
2026-03-16 02:08:50 +08:00
2026-04-04 19:38:36 +08:00
2026-03-13 15:38:08 +08:00
2026-03-13 09:59:33 +08:00
2026-03-13 09:59:33 +08:00
2026-03-22 21:58:52 +08:00