From 385e1bb49ee026ba63998047a8b9160cd418f015 Mon Sep 17 00:00:00 2001
From: seaislee1209 <seaislee129@gmail.com>
Date: Tue, 12 May 2026 15:43:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(records):=20=E4=BB=BB=E5=8A=A1=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E5=BC=B9=E7=AA=97=E6=8E=92=E7=89=88=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=20=E2=80=94=20=E5=8F=82=E8=80=83=E7=B4=A0=E6=9D=90=E6=90=AC?=
 =?UTF-8?q?=E5=B7=A6=E4=BE=A7=20+=20tooltip=20+=20max-height?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用户反馈:右侧太挤,左侧视频下大片空白浪费,参考素材埋在右侧底部要滚才能看。

排版重组 (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>
---
 web/src/components/RecordDetailModal.tsx | 38 +++++++++++++++---------
 web/src/components/ReferenceList.tsx     |  2 +-
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/web/src/components/RecordDetailModal.tsx b/web/src/components/RecordDetailModal.tsx
index 2f46613..f68cee9 100644
--- a/web/src/components/RecordDetailModal.tsx
+++ b/web/src/components/RecordDetailModal.tsx
@@ -44,14 +44,22 @@ export function RecordDetailModal({ record: r, onClose, showTeam, showCost }: Pr
             <button style={closeBtn} onClick={onClose}>✕</button>
           </div>
 
-          {/* Body — 左视频 / 右信息 双栏 */}
+          {/* Body — 左:视频+参考素材 / 右:信息+提示词 */}
           <div style={body}>
-            {/* ── 左:视频 ── */}
+            {/* ── 左侧:视频 + 参考素材 ── */}
             <div style={mediaPanel}>
               <MediaArea record={r} />
+              {refs.length > 0 && (
+                <>
+                  <div style={sectionTitle}>参考素材({refs.length})</div>
+                  <div style={refScrollBox}>
+                    <ReferenceList references={refs} />
+                  </div>
+                </>
+              )}
             </div>
 
-            {/* ── 右:信息(原有内容整体搬过来,排版不动)── */}
+            {/* ── 右侧:信息 + 提示词 ── */}
             <div style={infoPanel}>
               {/* Status */}
               <div style={{ marginBottom: 16 }}>
@@ -72,7 +80,7 @@ export function RecordDetailModal({ record: r, onClose, showTeam, showCost }: Pr
               )}
 
               {/* Info Grid */}
-              <div style={sectionTitle}>基本信息</div>
+              <div style={{ ...sectionTitle, marginTop: 0 }}>基本信息</div>
               <div style={infoGrid}>
                 {r.ark_task_id && <InfoItem label="任务ID" value={r.ark_task_id} />}
                 {r.username && <InfoItem label="用户" value={r.username} />}
@@ -92,14 +100,6 @@ export function RecordDetailModal({ record: r, onClose, showTeam, showCost }: Pr
               {/* Prompt */}
               <div style={sectionTitle}>提示词</div>
               <div style={promptBox}>{r.prompt || '(无提示词)'}</div>
-
-              {/* References */}
-              {refs.length > 0 && (
-                <>
-                  <div style={sectionTitle}>参考素材({refs.length})</div>
-                  <ReferenceList references={refs} />
-                </>
-              )}
             </div>
           </div>
         </div>
@@ -217,13 +217,23 @@ const body: React.CSSProperties = {
   minHeight: 0,
 };
 
-/* 左侧媒体区 — 固定 480 宽 */
+/* 左侧媒体区 — 固定 480 宽,视频 + 参考素材纵向排列 */
 const mediaPanel: React.CSSProperties = {
   width: 480,
   flexShrink: 0,
   display: 'flex',
   flexDirection: 'column',
-  alignItems: 'center',
+  alignItems: 'stretch',
+  minHeight: 0,    /* 给内部 flex 让出收缩空间 */
+};
+
+/* 参考素材区:max-height + 内部滚动,避免视频高度被推下去
+   Seedance 最多 9 张 → 80px thumb × 5/行 = 1-2 行,250px 给足兜底 */
+const refScrollBox: React.CSSProperties = {
+  maxHeight: 250,
+  overflowY: 'auto',
+  marginTop: 8,
+  paddingRight: 4,
 };
 
 const mediaFrame: React.CSSProperties = {
diff --git a/web/src/components/ReferenceList.tsx b/web/src/components/ReferenceList.tsx
index 4d7f702..c200aa8 100644
--- a/web/src/components/ReferenceList.tsx
+++ b/web/src/components/ReferenceList.tsx
@@ -40,7 +40,7 @@ export function ReferenceList({ references }: Props) {
           const hasUrl = fullUrl && !fullUrl.startsWith('asset://');
 
           return (
-            <div key={i} style={refItem}>
+            <div key={i} style={refItem} title={label}>
               {/* Thumbnail area */}
               <div style={thumbWrap}>
                 {isAudio ? (