diff --git a/app/static/public/css/video.css b/app/static/public/css/video.css index d9d90c0..a0127fd 100644 --- a/app/static/public/css/video.css +++ b/app/static/public/css/video.css @@ -99,7 +99,7 @@ body { } .history-panel .video-stage { - min-height: 260px; + min-height: 220px; max-height: 980px; overflow: auto; background: #fafafa; @@ -109,6 +109,9 @@ body { .history-panel .video-item { background: #fff; border: 1px solid var(--video-outline); + padding: 8px; + gap: 6px; + border-radius: 9px; } .history-panel .video-item-title, @@ -118,6 +121,7 @@ body { .history-panel .video-item-bar { display: block; + margin-bottom: 2px; } .history-panel .video-item-title { @@ -135,10 +139,14 @@ body { } .history-panel .video-item-actions { - margin-top: 10px; + margin-top: 0; display: flex; justify-content: flex-end; - gap: 6px; + gap: 5px; +} + +.history-panel .video-item-body { + min-height: 96px; } .history-panel .video-item-link { @@ -557,6 +565,23 @@ body { color: #e2e8f0; } +.video-item-actions-overlay { + position: absolute; + top: 8px; + right: 8px; + z-index: 3; + padding: 4px; + border-radius: 8px; + background: rgba(15, 23, 42, 0.42); + backdrop-filter: blur(2px); +} + +.video-item-actions-overlay .geist-button-outline { + height: 22px; + padding: 0 7px; + font-size: 10px; +} + .video-item-body { border-radius: 8px; background: #000; @@ -565,6 +590,7 @@ body { display: flex; align-items: center; justify-content: center; + position: relative; } .video-item video { diff --git a/app/static/public/js/video.js b/app/static/public/js/video.js index 3ab2edb..ef195df 100644 --- a/app/static/public/js/video.js +++ b/app/static/public/js/video.js @@ -89,6 +89,22 @@ let mergeTargetVideoName = ''; let mergeCutMsA = 0; let mergeCutMsB = 0; + + function compactTitleToken(value) { + const raw = String(value || '').trim(); + const cleaned = raw.replace(/[^a-zA-Z0-9]/g, ''); + if (cleaned) return cleaned.slice(0, 8); + const ts = String(Date.now()); + return ts.slice(Math.max(0, ts.length - 8)); + } + + function buildHistoryTitle(type, value) { + const token = compactTitleToken(value); + if (type === 'splice') { + return `拼接视频第${token}轮`; + } + return `生成视频${token}`; + } let cacheModalPickMode = 'edit'; let cacheModalAnchorEl = null; @@ -434,7 +450,7 @@ title.textContent = `视频 ${previewCount}`; const actions = document.createElement('div'); - actions.className = 'video-item-actions'; + actions.className = 'video-item-actions video-item-actions-overlay'; const openBtn = document.createElement('a'); openBtn.className = 'geist-button-outline text-xs px-3 video-open hidden'; @@ -452,11 +468,13 @@ editBtn.className = 'geist-button-outline text-xs px-3 video-edit'; editBtn.type = 'button'; editBtn.textContent = '编辑'; + editBtn.disabled = true; const setBBtn = document.createElement('button'); setBBtn.className = 'geist-button-outline text-xs px-3 video-set-b'; setBBtn.type = 'button'; setBBtn.textContent = '设为视频2'; + setBBtn.disabled = true; actions.appendChild(openBtn); actions.appendChild(downloadBtn); @@ -467,13 +485,13 @@ const body = document.createElement('div'); body.className = 'video-item-body'; body.innerHTML = '