feat: 任务中心批次弹窗加「加入资产库」状态+单图/一键切换 (row38)

任务中心点已完成批次的弹窗里,每张生成图现在:
- 显示「已入库」绿标 + 入库态橙描边
- 右下角单图「加入资产库 / 取消」按钮(单图粒度,复用 Asset.in_library 真门控)
- 弹窗头部「一键全部加入资产库 / 全部移出」批量切换
乐观更新 batchImgs+assets,失败回滚;生成时已扣费,此口只控是否进资产库列表、不二次扣费。
弹窗 createPortal 到 body 不在 .image-workbench 作用域,故 .modal 作用域补一份 gen 网格/徽标/按钮样式。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
zyc
2026-06-30 11:02:28 +08:00
co-authored by Claude Opus 4.8
parent 291a8bf394
commit 38881c3041
2 changed files with 100 additions and 1 deletions
+44
View File
@@ -955,6 +955,50 @@
}
.image-workbench .gen-adopt-badge svg { width: 11px; height: 11px; }
/* row38:任务中心批次弹窗(createPortal 到 body,不在 .image-workbench 作用域内)——
自带一份 gen 网格 + 入库徽标/单图加入按钮样式,复用主工作台视觉。 */
.modal .gen-images {
display: grid;
grid-template-columns: repeat(var(--cols, 4), 1fr);
gap: 10px;
}
.modal .gen-image {
position: relative;
aspect-ratio: var(--ratio, 1 / 1);
border-radius: var(--r-md);
overflow: hidden;
background:
repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.025) 0 1px, transparent 1px 12px),
var(--black-alpha-4);
}
.modal .gen-image-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.modal .gen-image .placeholder { position: absolute; inset: 0; display: grid; place-items: center; }
.modal .gen-image.adopted { outline: 2px solid var(--accent-forest); outline-offset: -2px; }
.modal .gen-adopt-badge {
position: absolute; top: 8px; left: 8px;
display: inline-flex; align-items: center; gap: 4px;
height: 22px; padding: 0 8px 0 6px;
background: var(--accent-forest); color: var(--accent-white);
font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .02em;
border-radius: var(--r-pill); z-index: 3;
}
.modal .gen-adopt-badge svg { width: 11px; height: 11px; }
/* 单图「加入资产库 / 取消」按钮:右下角悬浮,hover 出现;已入库态常驻橙 */
.tc-lib-btn {
position: absolute; right: 8px; bottom: 8px; z-index: 3;
display: inline-flex; align-items: center; gap: 4px;
height: 26px; padding: 0 10px;
border: 0; border-radius: var(--r-pill);
background: rgba(38, 38, 38, .82); color: var(--accent-white);
font-size: 11px; font-weight: 500; letter-spacing: .02em;
cursor: pointer; opacity: 0;
transition: opacity var(--t-base), background var(--t-base);
}
.modal .gen-image:hover .tc-lib-btn { opacity: 1; }
.tc-lib-btn.on { background: var(--heat); opacity: 1; }
.tc-lib-btn:disabled { opacity: .5; cursor: not-allowed; }
.tc-lib-btn svg { width: 13px; height: 13px; }
/* 底部操作按钮行(§4.18 .gen-card-actions · 二级 + ghost · 不放主橙) */
.image-workbench .gen-card-actions {
display: flex; gap: 8px;