From 9ed286b79468e209ab47eadb9d94dd39b4db4d6c Mon Sep 17 00:00:00 2001 From: root Date: Tue, 17 Feb 2026 20:55:31 +0800 Subject: [PATCH] =?UTF-8?q?feat(video-ui):=20=E5=8E=86=E5=8F=B2=E8=A7=86?= =?UTF-8?q?=E9=A2=91=E5=8D=A1=E7=89=87=E6=A0=87=E9=A2=98=E8=A7=84=E8=8C=83?= =?UTF-8?q?=E5=8C=96=E5=B9=B6=E5=86=85=E5=B5=8C=E6=93=8D=E4=BD=9C=E6=8C=89?= =?UTF-8?q?=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/static/public/css/video.css | 32 ++++++++++++++++++++++++--- app/static/public/js/video.js | 35 ++++++++++++++++++++++++++---- app/static/public/pages/video.html | 4 ++-- 3 files changed, 62 insertions(+), 9 deletions(-) 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 = '
生成中…
'; + body.appendChild(actions); const link = document.createElement('div'); link.className = 'video-item-link'; item.appendChild(header); item.appendChild(body); - item.appendChild(actions); item.appendChild(link); videoStage.appendChild(item); videoStage.classList.remove('hidden'); @@ -488,6 +506,8 @@ if (!item) return; const openBtn = item.querySelector('.video-open'); const downloadBtn = item.querySelector('.video-download'); + const editBtn = item.querySelector('.video-edit'); + const setBBtn = item.querySelector('.video-set-b'); const link = item.querySelector('.video-item-link'); const safeUrl = url || ''; item.dataset.url = safeUrl; @@ -508,6 +528,12 @@ downloadBtn.dataset.url = safeUrl; downloadBtn.disabled = !safeUrl; } + if (editBtn) { + editBtn.disabled = !safeUrl; + } + if (setBBtn) { + setBBtn.disabled = !safeUrl; + } if (safeUrl) { item.classList.remove('is-pending'); } @@ -1398,6 +1424,7 @@ previewCount = 0; for (const taskId of taskIds) { const previewItem = initPreviewSlot(); + setPreviewTitle(previewItem, buildHistoryTitle('generated', taskId)); taskStates.set(taskId, { taskId, source: null, @@ -1828,7 +1855,7 @@ if (item) { selectedVideoItemId = String(item.dataset.index || ''); item.dataset.url = mergedUrl; - setPreviewTitle(item, `视频 ${selectedVideoItemId} · 手动拼接`); + setPreviewTitle(item, buildHistoryTitle('splice', `manual-${Date.now()}`)); renderVideoFromUrl({ previewItem: item }, mergedUrl); refreshVideoSelectionUi(); } @@ -1894,7 +1921,7 @@ selectedVideoItemId = String(item.dataset.index || ''); item.dataset.url = mergedUrl; item.dataset.round = String(nextRound); - setPreviewTitle(item, `视频 ${selectedVideoItemId} · 第${nextRound}轮`); + setPreviewTitle(item, buildHistoryTitle('splice', taskId || String(nextRound))); const state = { previewItem: item }; renderVideoFromUrl(state, mergedUrl); refreshVideoSelectionUi(); diff --git a/app/static/public/pages/video.html b/app/static/public/pages/video.html index 3ace0ec..b7c554b 100644 --- a/app/static/public/pages/video.html +++ b/app/static/public/pages/video.html @@ -18,7 +18,7 @@ - + @@ -307,7 +307,7 @@ - +