xuejianwu/yingxiangli-duanju
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: expand video library into general asset library

Browse Source
This commit is contained in:
xuejianwu
2026-08-05 17:04:06 +08:00
parent ce5ae57abc
commit a054fc3b2c
6 changed files with 157 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
public/index.html
View File

@@ -23,8 +23,8 @@
<button class="module-tab active" type="button" data-module="library">
<b>人物素材库</b><span>上传 1～3 张人物图片，审核后组合人物</span>
</button>
<button class="module-tab" type="button" data-module="video-library">
<b>视频素材库</b><span>上传、审核并复用历史视频素材</span>
<button class="module-tab" type="button" data-module="generic-library">
<b>通用素材库</b><span>上传、审核并复用图片与视频素材</span>
</button>
<button class="module-tab" type="button" data-module="production">
<b>短剧生产</b><span>选择本场角色，输入图片和视频后生成</span>
@@ -94,19 +94,20 @@
</ul>
</div>
</div>
<div class="video-library-only video-library-summary">
<div class="generic-library-only video-library-summary">
<div class="sidebar-title">
<span>视频素材</span>
<button class="link-button" type="button" id="refreshVideoAssets">刷新</button>
<span>通用素材</span>
<button class="link-button" type="button" id="refreshGenericAssets">刷新</button>
</div>
<div class="video-library-count"><strong id="videoAssetHistoryCount">0</strong><span>条已就绪视频素材</span></div>
<div class="video-library-count"><strong id="genericAssetHistoryCount">0</strong><span>条已就绪图片/视频素材</span></div>
<div class="rule-box">
<strong>视频入库要求</strong>
<strong>通用素材入库要求</strong>
<ul>
<li>提供公网可访问的视频 URL</li>
<li>格式：MP4 / MOV</li>
<li>提供公网可访问的图片或视频 URL</li>
<li>图片：JPG / PNG / WebP 等</li>
<li>视频：MP4 / MOV</li>
<li>入库审核通过后获得 asset:// 引用</li>
<li>可直接用于短剧片段的参考视频</li>
<li>可直接作为片段参考图片或参考视频</li>
</ul>
</div>
</div>
@@ -159,41 +160,44 @@
</div>
</div>
<div class="panel-header video-library-only">
<div class="panel-header generic-library-only">
<div>
<span class="section-kicker">视频素材</span>
<h2>上传视频素材</h2>
<span class="section-kicker">通用素材</span>
<h2>上传图片或视频素材</h2>
</div>
<span class="status-badge neutral" id="videoAssetStatus">未提交</span>
<span class="status-badge neutral" id="genericAssetStatus">未提交</span>
</div>
<form id="videoAssetForm" class="form-grid video-library-only">
<label class="field wide">
<span>视频公网 URL</span>
<input id="videoAssetUrl" type="url" required placeholder="https://example.com/reference.mp4" />
<small>支持 MP4 / MOV，必须可通过公网直接访问。</small>
<form id="genericAssetForm" class="form-grid generic-library-only">
<label class="field">
<span>素材类型</span>
<select id="genericAssetType"><option value="image">图片素材</option><option value="video">视频素材</option></select>
</label>
<label class="field">
<span>素材名称</span>
<input id="videoAssetPurpose" required placeholder="例如：电梯口上一片段 / 角色走路参考" />
<input id="genericAssetPurpose" required placeholder="例如：办公室场景 / 角色走路参考" />
</label>
<div class="field action-field">
<span>&nbsp;</span>
<button class="primary" type="submit" id="videoAssetSubmit">提交视频素材审核</button>
<label class="field wide">
<span>素材公网 URL</span>
<input id="genericAssetUrl" type="url" required placeholder="https://example.com/reference.jpg" />
<small id="genericAssetHint">支持 JPG / PNG / WebP 等图片格式，必须可通过公网直接访问。</small>
</label>
<div class="field action-field wide">
<button class="primary" type="submit" id="genericAssetSubmit">提交素材审核</button>
</div>
</form>
<div class="result-card hidden video-library-only" id="videoAssetResult">
<div class="result-card hidden generic-library-only" id="genericAssetResult">
<div class="result-icon">✓</div>
<div><strong>视频素材已通过审核</strong><p id="videoAssetResultText">可在下方历史素材中查看并用于短剧生产。</p></div>
<div><strong>通用素材已通过审核</strong><p id="genericAssetResultText">可在下方历史素材中查看并用于短剧生产。</p></div>
</div>
<section class="video-asset-history video-library-only">
<section class="video-asset-history generic-library-only">
<div class="video-asset-history-head">
<div><span class="section-kicker">历史素材</span><h3>已就绪视频</h3></div>
<div><span class="section-kicker">历史素材</span><h3>已就绪图片与视频</h3></div>
<span>点击“用于当前片段”可直接带入短剧生产</span>
</div>
<div class="video-asset-grid" id="videoAssetList"><div class="empty-small">暂无已就绪视频素材</div></div>
<div class="video-asset-grid" id="genericAssetList"><div class="empty-small">暂无已就绪通用素材</div></div>
</section>
<div class="storyboard production-only">
@@ -236,7 +240,7 @@
<button class="media-add-button" type="button" id="addReferenceVideoButton">＋ 添加视频</button>
</div>
<div class="media-url-list" id="referenceVideoInputs"></div>
<small>可填写公网 MP4/MOV，或从视频素材库选择 asset:// 引用；选择“引用上一片段”后系统会自动加入。</small>
<small>可填写公网 MP4/MOV，或从通用素材库选择视频；选择“引用上一片段”后系统会自动加入。</small>
</div>
</div>
<div class="input-quota wide" id="inputQuota">人物图片 0 张 · 其他图片 0 张 · 图片合计 0/9 · 视频 0 条</div>
@@ -347,6 +351,6 @@
</div>
<div class="toast hidden" id="toast"></div>
<script src="./app.js?v=32"></script>
<script src="./app.js?v=33"></script>
</body>
</html>