feat(library): 资产库重做为「成品库」— 图片成品三类 + 视频成品按项目素材包

定义:资产 = 平台产出的成品。原料(商品/模特)归各自的库、半成品(角色/三视图/场景/分镜)归项目,
资产库只装成品 —— tab 从 9 个收成 5 个。

- 后端 /api/assets/video-packs/:视频成品按项目素材包(与「导出全部」同源,取 VideoSegment.adopted_version
  真实视频资产,给 TOS 直链 url 供 <video> 播放/取首帧);summary 改只数成品(tryon/kits/creations/others)
- 资产库 _tab_q 加 others(我的上传+未归类兜底);角色/场景/商品图/素材 tab 移除(各回各家)
- 前端 library:tab→模特上身图/平台套图/自由创作/视频成品/其他;视频成品=项目包卡(<video>首帧封面)
  → 点开弹窗看该项目所有片段(可播);图片成品/其他复用原网格
- 单测 VideoPacksTests:按项目分组 + 软删片段排除

验收:后端单测绿(基线 4 失败零新增);tsc+build 绿;无头 0 报错(5 tab + 视频包弹窗 3 段)
注:图片成品「按生成批次成组」待图片趴有真实数据时接线(当前 demo 已清空)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
seaislee1209
2026-06-21 20:54:42 +08:00
parent a39d2b8603
commit 4571991deb
7 changed files with 216 additions and 22 deletions
+19
View File
@@ -212,3 +212,22 @@ body.edit-mode .library-page .asset-card .card-del-btn { opacity: 0 !important;
.upload-modal .modal-f { align-items: center; }
.upload-foot-meta { flex: 1; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-foot-meta .accent { color: var(--heat); font-weight: 600; }
/* ── 资产库成品化:视频成品「项目素材包」 ── */
.library-page .packs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.library-page .pack-card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); cursor: pointer; transition: background .15s, border-color .15s; position: relative; overflow: hidden; }
.library-page .pack-card:hover { background: var(--background-lighter); border-color: var(--black-alpha-48); }
.library-page .pack-thumb { position: relative; width: 100%; aspect-ratio: 9 / 16; max-height: 280px; }
.library-page .pack-thumb video, .library-page .pack-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.library-page .pack-count { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--black-alpha-56); color: var(--accent-white); font-size: 11px; letter-spacing: .02em; }
/* 素材包弹窗(portal 到 body) */
.pack-modal-bg { position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; padding: 32px; }
.pack-modal { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); width: min(900px, 92vw); max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; }
.pack-modal-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-faint); }
.pack-modal-h h2 { font-size: 16px; font-weight: 600; color: var(--accent-black); }
.pack-modal-h .x { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--black-alpha-48); border-radius: var(--r-sm); cursor: pointer; flex-shrink: 0; }
.pack-modal-h .x:hover { background: var(--black-alpha-8); color: var(--accent-black); }
.pack-clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 18px 20px; overflow-y: auto; }
.pack-clip video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-sm); background: #000; display: block; }
.pack-clip-name { font-size: 11px; color: var(--black-alpha-48); margin-top: 4px; text-align: center; letter-spacing: .02em; }