From ebda949077225ac281379e86506bbf8e395ccb2f Mon Sep 17 00:00:00 2001 From: root Date: Tue, 17 Feb 2026 20:06:53 +0800 Subject: [PATCH] =?UTF-8?q?feat(video):=20=E9=87=8D=E6=9E=84=E4=B8=BA?= =?UTF-8?q?=E8=A7=86=E9=A2=91=E5=B7=A5=E4=BD=9C=E5=8C=BA=E4=B8=8E=E5=8F=B3?= =?UTF-8?q?=E4=BE=A7=E5=8E=86=E5=8F=B2=E6=8B=BC=E6=8E=A5=E6=A0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/static/public/css/video.css | 43 ++++++++++++++++ app/static/public/js/video.js | 43 ++++++++++------ app/static/public/pages/video.html | 80 +++++++++++++++--------------- 3 files changed, 111 insertions(+), 55 deletions(-) diff --git a/app/static/public/css/video.css b/app/static/public/css/video.css index 462d09e..5307abe 100644 --- a/app/static/public/css/video.css +++ b/app/static/public/css/video.css @@ -78,10 +78,53 @@ body { margin-bottom: 24px; } +.video-workbench-grid { + display: grid; + grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); + gap: 20px; +} + +.history-panel .panel-head { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 12px; +} + +.history-panel .video-stage { + min-height: 260px; + max-height: 980px; + overflow: auto; + background: #fafafa; + border-color: var(--video-outline); +} + +.history-panel .video-item { + background: #fff; + border: 1px solid var(--video-outline); +} + +.history-panel .video-item-title, +.history-panel .video-item-bar { + color: var(--accents-7); +} + +.history-panel .video-item-actions .geist-button-outline { + color: var(--accents-7); + border-color: var(--video-outline); +} + +.history-panel .video-item-link { + color: var(--accents-4); +} + @media (max-width: 1024px) { .video-top-grid { grid-template-columns: 1fr; } + .video-workbench-grid { + grid-template-columns: 1fr; + } } .video-card { diff --git a/app/static/public/js/video.js b/app/static/public/js/video.js index b5fe790..e296870 100644 --- a/app/static/public/js/video.js +++ b/app/static/public/js/video.js @@ -62,6 +62,7 @@ const referencePreviewImg = document.getElementById('referencePreviewImg'); const referencePreviewMeta = document.getElementById('referencePreviewMeta'); const refDropZone = document.getElementById('refDropZone'); + const historyCount = document.getElementById('historyCount'); let taskStates = new Map(); let activeTaskIds = []; @@ -119,6 +120,12 @@ if (editFrameHash) editFrameHash.textContent = shortHash(lastFrameHash); } + function updateHistoryCount() { + if (!historyCount || !videoStage) return; + const count = videoStage.querySelectorAll('.video-item').length; + historyCount.textContent = String(count); + } + function updateMergeLabels() { if (mergeVideoA) { mergeVideoA.textContent = selectedVideoUrl ? shortHash(selectedVideoUrl) : '-'; @@ -381,6 +388,10 @@ previewCount = 0; selectedVideoItemId = ''; selectedVideoUrl = ''; + if (editVideo) { + editVideo.removeAttribute('src'); + editVideo.load(); + } mergeTargetVideoUrl = ''; mergeTargetVideoName = ''; mergeCutMsA = 0; @@ -388,6 +399,7 @@ if (enterEditBtn) enterEditBtn.disabled = true; closeEditPanel(); updateMergeLabels(); + updateHistoryCount(); } if (durationValue) { durationValue.textContent = '耗时 -'; @@ -456,6 +468,7 @@ if (videoEmpty) { videoEmpty.classList.add('hidden'); } + updateHistoryCount(); return item; } @@ -1008,6 +1021,9 @@ function bindEditVideoSource(url) { const safeUrl = String(url || '').trim(); selectedVideoUrl = safeUrl; + if (editHint) { + editHint.classList.toggle('hidden', Boolean(safeUrl)); + } if (!editVideo) return; editVideo.src = safeUrl; editVideo.load(); @@ -1040,29 +1056,23 @@ } function openEditPanel() { - if (!editPanel || !editHint || !editBody) return; const item = getSelectedVideoItem(); const url = item ? String(item.dataset.url || '').trim() : String(selectedVideoUrl || '').trim(); if (!url) { - editPanel.classList.remove('hidden'); - editHint.classList.remove('hidden'); - editBody.classList.add('hidden'); + if (editHint) editHint.classList.remove('hidden'); toast('请先选中一个已生成视频', 'warning'); return; } - editPanel.classList.remove('hidden'); - editHint.classList.add('hidden'); - editBody.classList.remove('hidden'); + if (editHint) editHint.classList.add('hidden'); + if (editBody) editBody.classList.remove('hidden'); bindEditVideoSource(url); } function closeEditPanel() { - if (!editPanel || !editHint || !editBody) return; - editHint.classList.remove('hidden'); - editBody.classList.add('hidden'); - editPanel.classList.add('hidden'); + if (editHint) editHint.classList.remove('hidden'); + if (editBody) editBody.classList.remove('hidden'); } function openCacheVideoModal() { @@ -1220,6 +1230,13 @@ } else if (info.url) { renderVideoFromUrl(taskState, info.url); } + const item = taskState.previewItem || null; + const itemUrl = item ? String(item.dataset.url || '').trim() : ''; + if (item && itemUrl) { + selectedVideoItemId = String(item.dataset.index || ''); + refreshVideoSelectionUi(); + bindEditVideoSource(itemUrl); + } } return; } @@ -2081,9 +2098,7 @@ return; } if (!target.classList.contains('video-download')) { - if (editPanel && !editPanel.classList.contains('hidden')) { - openEditPanel(); - } + bindEditVideoSource(selectedVideoUrl); return; } event.preventDefault(); diff --git a/app/static/public/pages/video.html b/app/static/public/pages/video.html index 37da0da..0cac8d1 100644 --- a/app/static/public/pages/video.html +++ b/app/static/public/pages/video.html @@ -18,7 +18,7 @@ - + @@ -26,7 +26,7 @@
-
+
@@ -173,31 +173,24 @@
-
-
-
视频预览
-
- - - -
-
-
等待生成视频
- -
- -