azmat1127/yingqing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pipeline): 基础资产页提取闸门简化为单按钮 + 卡式 loading + 顶栏重新提取

Browse Source 
- 进资产页遮罩上从「3 个按钮(只提取/提取+生成/全套)」简化为单个醒目 CTA「提取角色 / 场景」
  (走 only 模式:只提取不出图,生成仍由用户后续手动点);提取时用脚本同款卡式 loading
  (spinner + 标题 + 跳点 + 扫光进度条;sgv-* 样式解作用域以复用)
- 内容区右上角(团队头像正下方)加「重新提取」按钮 —— 仅基础资产页且已提取过时露出,点击重提

验收:tsc+build 绿;无头核对(空项目显单按钮闸门「提取角色/场景」、已提取项目显「重新提取」、0 console error)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
seaislee1209
2026-06-22 14:12:39 +08:00
parent 1d40e89418
commit fda0385d2f
3 changed files with 53 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/frontend/src/pipeline-page.css
+16 -11
View File
@@ -151,17 +151,17 @@
/* 行: 生成时左侧脚本区罩子(整体)/ 单镜罩子 + 转圈 */
.script-gen-veil { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--background-base) 86%, transparent); }
/* 方案 B · 品牌生成卡:icon-box 转圈 + 标题 + 动态点 + 橙色扫光进度条 */
.script-gen-veil .sgv-card { display: flex; align-items: center; gap: 12px; padding: 14px 18px; min-width: 252px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); box-shadow: var(--shadow-floating); }
.script-gen-veil .sgv-ico { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; background: var(--heat-12); border-radius: var(--r-sm); }
.script-gen-veil .sgv-ico .spinner { width: 18px; height: 18px; border: 2.5px solid var(--heat-20); border-top-color: var(--heat); border-radius: 50%; animation: assetSpin .7s linear infinite; }
.script-gen-veil .sgv-body { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.script-gen-veil .sgv-title { font-size: 13px; font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; gap: 4px; }
.script-gen-veil .sgv-dots { display: inline-flex; gap: 3px; align-items: center; }
.script-gen-veil .sgv-dots i { width: 3px; height: 3px; border-radius: 50%; background: var(--heat); animation: sgvBlink 1.2s infinite; }
.script-gen-veil .sgv-dots i:nth-child(2) { animation-delay: .2s; }
.script-gen-veil .sgv-dots i:nth-child(3) { animation-delay: .4s; }
.script-gen-veil .sgv-bar { position: relative; height: 4px; border-radius: 999px; background: var(--heat-12); overflow: hidden; }
.script-gen-veil .sgv-bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 42%; border-radius: 999px; background: var(--heat); animation: sgvBar 1.15s ease-in-out infinite; }
.sgv-card { display: flex; align-items: center; gap: 12px; padding: 14px 18px; min-width: 252px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); box-shadow: var(--shadow-floating); }
.sgv-ico { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; background: var(--heat-12); border-radius: var(--r-sm); }
.sgv-ico .spinner { width: 18px; height: 18px; border: 2.5px solid var(--heat-20); border-top-color: var(--heat); border-radius: 50%; animation: assetSpin .7s linear infinite; }
.sgv-body { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.sgv-title { font-size: 13px; font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; gap: 4px; }
.sgv-dots { display: inline-flex; gap: 3px; align-items: center; }
.sgv-dots i { width: 3px; height: 3px; border-radius: 50%; background: var(--heat); animation: sgvBlink 1.2s infinite; }
.sgv-dots i:nth-child(2) { animation-delay: .2s; }
.sgv-dots i:nth-child(3) { animation-delay: .4s; }
.sgv-bar { position: relative; height: 4px; border-radius: 999px; background: var(--heat-12); overflow: hidden; }
.sgv-bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 42%; border-radius: 999px; background: var(--heat); animation: sgvBar 1.15s ease-in-out infinite; }
.shot-gen-veil { position: absolute; inset: 0; z-index: 4; display: flex; gap: 8px; align-items: center; justify-content: center; background: color-mix(in srgb, var(--background-base) 80%, transparent); border-radius: var(--r-sm); }
.shot-gen-veil .mono { font-size: 12px; color: var(--ink-3); letter-spacing: .04em; }
.script-gen-veil .spinner, .shot-gen-veil .spinner { width: 26px; height: 26px; border: 2.5px solid var(--heat-20); border-top-color: var(--heat); border-radius: 50%; animation: assetSpin .7s linear infinite; flex: 0 0 auto; }
@@ -855,3 +855,8 @@
.rg-actions .btn-primary { flex: 1; }
.rg-force { display: inline-flex; align-items: baseline; gap: 5px; }
.rg-warn { font-size: 10px; font-family: var(--font-mono); color: var(--black-alpha-48); }
/* 基础资产页:右上角(头像正下方)重新提取按钮 */
.pipeline-reextract { position: absolute; top: 14px; right: 28px; z-index: 5; }
/* 提取闸门单按钮:醒目主 CTA */
.eg-extract-btn { margin-top: 24px; min-width: 220px; }