okooooooo/grok2api
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(video): 固定右侧历史栏并按工作区状态显示手动拼接入口

Browse Source
This commit is contained in:
root committed 2026-02-17 20:23:27 +08:00
1 parent 43e4220d02
commit 8b7bf243e9
3 files changed
+148 -127
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/static/public/css/video.css
+10 -6
View File
@@ -78,9 +78,16 @@ body {
margin-bottom: 24px;
}
.video-workbench-grid {
.video-main-grid {
display: grid;
grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 20px;
}
.video-main-left,
.video-main-right {
display: flex;
flex-direction: column;
gap: 20px;
}
@@ -119,10 +126,7 @@ body {
}
@media (max-width: 820px) {
.video-top-grid {
grid-template-columns: 1fr;
}
.video-workbench-grid {
.video-main-grid {
grid-template-columns: 1fr;
}
}
app/static/public/js/video.js
+15
View File
@@ -135,6 +135,17 @@
}
}
function updateManualActionsVisibility() {
const hasWorkspaceVideo = Boolean(String(selectedVideoUrl || '').trim());
if (pickMergeVideoBtn) {
pickMergeVideoBtn.style.display = hasWorkspaceVideo ? '' : 'none';
}
if (directMergeBtn) {
directMergeBtn.style.display = hasWorkspaceVideo ? '' : 'none';
directMergeBtn.disabled = !hasWorkspaceVideo;
}
}
function getParentMemoryApi() {
return window.ParentPostMemory || null;
}
@@ -400,6 +411,7 @@
closeEditPanel();
updateMergeLabels();
updateHistoryCount();
updateManualActionsVisibility();
}
if (durationValue) {
durationValue.textContent = '耗时 -';
@@ -1032,6 +1044,7 @@
lastFrameHash = '';
setEditMeta();
updateMergeLabels();
updateManualActionsVisibility();
bindMergeVideoA(safeUrl);
}
@@ -2341,6 +2354,8 @@
updateMeta();
updateMergeLabels();
updateHistoryCount();
updateManualActionsVisibility();
if (imageUrlInput && imageUrlInput.value.trim()) {
const resolved = resolveReferenceByText(imageUrlInput.value.trim());
setReferencePreview(resolved.url || resolved.sourceUrl || imageUrlInput.value.trim(), resolved.parentPostId || '');
app/static/public/pages/video.html
+123 -121
View File
@@ -18,7 +18,7 @@
<link href="https://cdn.jsdelivr.net/npm/geist@1.0.0/dist/fonts/geist-mono/style.css" rel="stylesheet">
<script src="/static/common/js/theme.js?v=0.1.0"></script>
<link href="/static/common/css/common.css?v=0.3.7" rel="stylesheet">
<link href="/static/public/css/video.css?v=0.3.9" rel="stylesheet">
<link href="/static/public/css/video.css?v=0.4.0" rel="stylesheet">
<link href="/static/common/css/toast.css" rel="stylesheet">
</head>
@@ -53,10 +53,11 @@
<div class="h-px bg-[var(--border)]"></div>
<div class="video-top-grid">
<div class="video-card">
<div class="card-title">生成设置</div>
<div class="settings-grid">
<div class="video-main-grid">
<div class="video-main-left">
<div class="video-card">
<div class="card-title">生成设置</div>
<div class="settings-grid">
<div class="settings-block prompt-block">
<label class="field-label" for="promptInput">提示词</label>
<textarea id="promptInput" class="geist-input video-textarea" placeholder="例如：街头霓虹雨夜，慢镜头，胶片质感"></textarea>
@@ -131,14 +132,100 @@
<label class="field-label">&nbsp;</label>
<button id="clearImageFileBtn" class="geist-button-outline text-xs px-3" type="button">清除</button>
</div>
</div>
</div>
<div id="editPanel" class="video-card edit-panel">
<div class="video-preview-header">
<div class="card-title">视频工作区</div>
<div class="preview-actions">
<button id="pickCachedVideoBtn" class="geist-button-outline text-xs px-3">选择视频</button>
<button id="clearBtn" class="geist-button-outline text-xs px-3">清空</button>
</div>
</div>
<div id="editHint" class="video-empty">请先选择或生成一个视频，工作区会始终展示当前视频。</div>
<div id="editBody">
<div class="meta-grid edit-meta-grid">
<div class="meta-item"><div class="meta-label">当前工作视频</div><div id="mergeVideoA" class="meta-value">-</div></div>
<div class="meta-item"><div class="meta-label">历史数量</div><div id="historyCount" class="meta-value">0</div></div>
</div>
<div class="edit-preview-wrap">
<video id="editVideo" controls preload="metadata"></video>
</div>
<div class="edit-slider-wrap">
<input id="editTimeline" type="range" min="0" max="100000" step="1" value="0">
<div class="progress-meta">
<span id="editTimeText">00:00.000</span>
<span id="editDurationText">总时长 -</span>
</div>
</div>
<div class="meta-grid edit-meta-grid">
<div class="meta-item"><div class="meta-label">frame_index</div><div id="editFrameIndex" class="meta-value">-</div></div>
<div class="meta-item"><div class="meta-label">timestamp_ms</div><div id="editTimestampMs" class="meta-value">-</div></div>
<div class="meta-item"><div class="meta-label">frame_hash</div><div id="editFrameHash" class="meta-value">-</div></div>
<div class="meta-item"><div class="meta-label">视频2(B)</div><div id="mergeVideoB" class="meta-value">-</div></div>
<div class="meta-item">
<div class="meta-label">拼接时长</div>
<select id="editLengthSelect" class="geist-input">
<option value="6" selected>6 秒</option>
<option value="10">10 秒</option>
<option value="15">15 秒</option>
</select>
</div>
</div>
<div class="settings-block prompt-block edit-prompt-block">
<label class="field-label" for="editPromptInput">拼接提示词</label>
<textarea id="editPromptInput" class="geist-input video-textarea" placeholder="描述后续要拼接的画面内容"></textarea>
</div>
<div class="preview-actions">
<button id="spliceBtn" class="geist-button text-xs px-3">拼接视频</button>
</div>
<div class="video-card manual-merge-card">
<div class="video-preview-header">
<div class="card-title">手动两段拼接</div>
<div class="preview-actions">
<button id="pickMergeVideoBtn" class="geist-button-outline text-xs px-3" type="button">选择视频2</button>
<button id="directMergeBtn" class="geist-button-outline text-xs px-3" type="button">手动拼接</button>
</div>
</div>
<div class="manual-merge-grid">
<div class="manual-merge-col">
<div class="meta-label">视频1拼接帧（取左侧）</div>
<div class="edit-preview-wrap">
<video id="mergeVideoPreviewA" controls preload="metadata"></video>
</div>
<div class="edit-slider-wrap">
<input id="mergeTimelineA" type="range" min="0" max="100000" step="1" value="0">
<div class="progress-meta">
<span id="mergeTimeTextA">00:00.000</span>
<span id="mergeDurationA">总时长 -</span>
</div>
</div>
</div>
<div class="manual-merge-col">
<div class="meta-label">视频2拼接帧（取右侧）</div>
<div class="edit-preview-wrap">
<video id="mergeVideoPreviewB" controls preload="metadata"></video>
</div>
<div class="edit-slider-wrap">
<input id="mergeTimelineB" type="range" min="0" max="100000" step="1" value="0">
<div class="progress-meta">
<span id="mergeTimeTextB">00:00.000</span>
<span id="mergeDurationB">总时长 -</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="video-card">
<div class="status-header">
<div class="card-title">运行状态</div>
<span id="statusText" class="status-text">未连接</span>
</div>
<aside class="video-main-right">
<div class="video-card">
<div class="status-header">
<div class="card-title">运行状态</div>
<span id="statusText" class="status-text">未连接</span>
</div>
<div class="progress-wrap">
<div id="progressBar" class="progress-bar">
<div id="progressFill" class="progress-fill"></div>
@@ -146,124 +233,39 @@
<div class="progress-meta">
<span id="progressText">0%</span>
<span id="durationValue">耗时 -</span>
</div>
</div>
</div>
<div class="meta-grid">
<div class="meta-item">
<div class="meta-label">比例</div>
<div id="aspectValue" class="meta-value">-</div>
</div>
<div class="meta-item">
<div class="meta-label">时长</div>
<div id="lengthValue" class="meta-value">-</div>
</div>
<div class="meta-item">
<div class="meta-label">分辨率</div>
<div id="resolutionValue" class="meta-value">-</div>
</div>
<div class="meta-item">
<div class="meta-label">预设</div>
<div id="presetValue" class="meta-value">-</div>
</div>
<div class="meta-item">
<div class="meta-label">并发</div>
<div id="countValue" class="meta-value">1</div>
</div>
</div>
</div>
</div>
<div class="video-workbench-grid">
<div id="editPanel" class="video-card edit-panel">
<div class="video-preview-header">
<div class="card-title">视频工作区</div>
<div class="preview-actions">
<button id="pickCachedVideoBtn" class="geist-button-outline text-xs px-3">选择视频</button>
<button id="clearBtn" class="geist-button-outline text-xs px-3">清空</button>
</div>
</div>
<div id="editHint" class="video-empty">请先选择或生成一个视频，工作区会始终展示当前视频。</div>
<div id="editBody">
<div class="meta-grid edit-meta-grid">
<div class="meta-item"><div class="meta-label">当前工作视频</div><div id="mergeVideoA" class="meta-value">-</div></div>
<div class="meta-item"><div class="meta-label">历史数量</div><div id="historyCount" class="meta-value">0</div></div>
</div>
<div class="edit-preview-wrap">
<video id="editVideo" controls preload="metadata"></video>
</div>
<div class="edit-slider-wrap">
<input id="editTimeline" type="range" min="0" max="100000" step="1" value="0">
<div class="progress-meta">
<span id="editTimeText">00:00.000</span>
<span id="editDurationText">总时长 -</span>
</div>
</div>
<div class="meta-grid edit-meta-grid">
<div class="meta-item"><div class="meta-label">frame_index</div><div id="editFrameIndex" class="meta-value">-</div></div>
<div class="meta-item"><div class="meta-label">timestamp_ms</div><div id="editTimestampMs" class="meta-value">-</div></div>
<div class="meta-item"><div class="meta-label">frame_hash</div><div id="editFrameHash" class="meta-value">-</div></div>
<div class="meta-item"><div class="meta-label">视频2(B)</div><div id="mergeVideoB" class="meta-value">-</div></div>
<div class="meta-grid">
<div class="meta-item">
<div class="meta-label">拼接时长</div>
<select id="editLengthSelect" class="geist-input">
<option value="6" selected>6 秒</option>
<option value="10">10 秒</option>
<option value="15">15 秒</option>
</select>
</div>
</div>
<div class="settings-block prompt-block edit-prompt-block">
<label class="field-label" for="editPromptInput">拼接提示词</label>
<textarea id="editPromptInput" class="geist-input video-textarea" placeholder="描述后续要拼接的画面内容"></textarea>
</div>
<div class="preview-actions">
<button id="spliceBtn" class="geist-button text-xs px-3">拼接视频</button>
</div>
<div class="video-card manual-merge-card">
<div class="video-preview-header">
<div class="card-title">手动两段拼接</div>
<div class="preview-actions">
<button id="pickMergeVideoBtn" class="geist-button-outline text-xs px-3" type="button">选择视频2</button>
<button id="directMergeBtn" class="geist-button-outline text-xs px-3" type="button">手动拼接</button>
<div class="meta-label">比例</div>
<div id="aspectValue" class="meta-value">-</div>
</div>
</div>
<div class="manual-merge-grid">
<div class="manual-merge-col">
<div class="meta-label">视频1拼接帧（取左侧）</div>
<div class="edit-preview-wrap">
<video id="mergeVideoPreviewA" controls preload="metadata"></video>
</div>
<div class="edit-slider-wrap">
<input id="mergeTimelineA" type="range" min="0" max="100000" step="1" value="0">
<div class="progress-meta">
<span id="mergeTimeTextA">00:00.000</span>
<span id="mergeDurationA">总时长 -</span>
</div>
</div>
<div class="meta-item">
<div class="meta-label">时长</div>
<div id="lengthValue" class="meta-value">-</div>
</div>
<div class="manual-merge-col">
<div class="meta-label">视频2拼接帧（取右侧）</div>
<div class="edit-preview-wrap">
<video id="mergeVideoPreviewB" controls preload="metadata"></video>
</div>
<div class="edit-slider-wrap">
<input id="mergeTimelineB" type="range" min="0" max="100000" step="1" value="0">
<div class="progress-meta">
<span id="mergeTimeTextB">00:00.000</span>
<span id="mergeDurationB">总时长 -</span>
</div>
</div>
<div class="meta-item">
<div class="meta-label">分辨率</div>
<div id="resolutionValue" class="meta-value">-</div>
</div>
<div class="meta-item">
<div class="meta-label">预设</div>
<div id="presetValue" class="meta-value">-</div>
</div>
<div class="meta-item">
<div class="meta-label">并发</div>
<div id="countValue" class="meta-value">1</div>
</div>
</div>
</div>
</div>
<aside class="video-card history-panel">
<div class="panel-head">
<div class="card-title">历史拼接视频</div>
</div>
<div id="videoEmpty" class="video-empty">拼接结果会在这里保存，点击可替换到工作区。</div>
<div id="videoStage" class="video-stage hidden"></div>
<aside class="video-card history-panel">
<div class="panel-head">
<div class="card-title">历史拼接视频</div>
</div>
<div id="videoEmpty" class="video-empty">拼接结果会在这里保存，点击可替换到工作区。</div>
<div id="videoStage" class="video-stage hidden"></div>
</aside>
</aside>
</div>
@@ -313,7 +315,7 @@
<script src="/static/common/js/pwa.js?v=0.1.1"></script>
<script src="/static/vendor/ffmpeg/ffmpeg.js?v=0.1.0"></script>
<script src="/static/vendor/ffmpeg/ffmpeg-util.js?v=0.1.0"></script>
<script src="/static/public/js/video.js?v=0.5.1"></script>
<script src="/static/public/js/video.js?v=0.5.2"></script>
</body>
</html>