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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user