切换图片画布抠图到 BiRefNet

新增图片画布去背景 BFF 配置与路由，服务端代理 BiRefNet 并持久化结果。将手动去背景、角色图、图标 spritesheet、UI 素材提取和角色动作帧抠图切到 BiRefNet。新增画布右上角任务侧栏并展示去背景任务耗时与状态。同步图片画布技术文档和项目决策记录。 (cherry picked from commit 495fcc8801)
2026-06-29 15:02:14 +08:00
parent f40a45e01b
commit 08f188e26e
16 changed files with 1056 additions and 277 deletions
@@ -6172,6 +6172,157 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
  background: rgba(255, 255, 255, 0.2);
 }

+.image-canvas-editor__task-sidebar {
+  position: absolute;
+  top: 0.85rem;
+  right: 0.85rem;
+  z-index: 20;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.45rem;
+  pointer-events: auto;
+}
+
+.image-canvas-editor__task-sidebar--closed {
+  width: auto;
+}
+
+.image-canvas-editor__task-sidebar-toggle {
+  flex: 0 0 auto;
+  border-color: var(--image-canvas-brand-border-soft);
+  background: #ffffff;
+  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
+}
+
+.image-canvas-editor__task-sidebar-panel {
+  width: min(20rem, calc(100vw - 5.6rem));
+  max-height: min(24rem, calc(100vh - 9rem));
+  overflow: hidden;
+  border: 1px solid var(--image-canvas-brand-border-soft);
+  border-radius: 0.5rem;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
+  backdrop-filter: blur(10px);
+}
+
+.image-canvas-editor__task-sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 0.68rem 0.78rem;
+  color: #0f172a;
+}
+
+.image-canvas-editor__task-sidebar-header strong {
+  font-size: 0.8rem;
+  font-weight: 850;
+}
+
+.image-canvas-editor__task-sidebar-header span {
+  display: inline-flex;
+  min-width: 1.35rem;
+  height: 1.35rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: #eff6ff;
+  color: #1d4ed8;
+  font-size: 0.72rem;
+  font-weight: 850;
+}
+
+.image-canvas-editor__task-sidebar-list {
+  display: grid;
+  max-height: calc(min(24rem, calc(100vh - 9rem)) - 2.8rem);
+  overflow-y: auto;
+  padding: 0.35rem;
+}
+
+.image-canvas-editor__task-sidebar-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.55rem;
+  width: 100%;
+  border: 0;
+  border-radius: 0.42rem;
+  background: transparent;
+  padding: 0.55rem;
+  color: #334155;
+  text-align: left;
+}
+
+.image-canvas-editor__task-sidebar-item:disabled {
+  color: #334155;
+  cursor: default;
+  opacity: 1;
+}
+
+.image-canvas-editor__task-sidebar-item:not(:disabled):hover {
+  background: #f8fafc;
+}
+
+.image-canvas-editor__task-sidebar-item-icon {
+  display: inline-flex;
+  width: 1.35rem;
+  height: 1.35rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: #e2e8f0;
+  color: #475569;
+}
+
+.image-canvas-editor__task-sidebar-item--running
+  .image-canvas-editor__task-sidebar-item-icon {
+  background: #ecfeff;
+  color: #0891b2;
+}
+
+.image-canvas-editor__task-sidebar-item--failed
+  .image-canvas-editor__task-sidebar-item-icon {
+  background: #fef2f2;
+  color: #dc2626;
+}
+
+.image-canvas-editor__task-sidebar-item--done
+  .image-canvas-editor__task-sidebar-item-icon {
+  background: #f0fdf4;
+  color: #16a34a;
+}
+
+.image-canvas-editor__task-sidebar-item-main {
+  display: grid;
+  min-width: 0;
+  gap: 0.12rem;
+}
+
+.image-canvas-editor__task-sidebar-item-title {
+  overflow: hidden;
+  color: #0f172a;
+  font-size: 0.78rem;
+  font-weight: 850;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__task-sidebar-item-detail {
+  overflow: hidden;
+  color: #64748b;
+  font-size: 0.7rem;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__task-sidebar-item-status {
+  color: #64748b;
+  font-size: 0.68rem;
+  font-weight: 800;
+}
+
 .image-canvas-editor__panel-dock {
  position: absolute;
  left: 0.85rem;