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

优化脚本

Browse Source
This commit is contained in:
Azmat@qq.com
2026-08-28 14:45:38 +08:00
parent 849b14a0f6
commit c0a0b9603b
37 changed files with 541 additions and 1893 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/frontend/src/pipeline-page.css
+10 -72
View File
@@ -1193,61 +1193,8 @@
/* 外层人物/场景卡提示词框:固定 5 行高(行高 1.55 + 内边距/边框),超长不撑高、框内上下滚动 */
.prompt-box { height: calc(5 * 1.55em + 22px); overflow-y: auto; box-sizing: border-box; }
/* ============= STAGE 3 · 故事板 ============= */
.stage[data-stage-pane="3"].active > .stage-storyboard { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.stage[data-stage-pane="3"].active > .stage-storyboard { gap: 0; }
.stage[data-stage-pane="3"].active > .stage-storyboard > .sb-canvas { border: 0; border-radius: 0; background: var(--surface); padding: 18px 14px 18px 28px; align-items: center; }
.stage[data-stage-pane="3"].active > .stage-storyboard > .sb-canvas > .sb-main-img { width: 100%; }
/* 有真图时大图占满画布整个高度(不再 16/9 居中留上下空白) */
.stage[data-stage-pane="3"].active > .stage-storyboard > .sb-canvas > .sb-main-img.has-mock-media { align-self: stretch; aspect-ratio: auto; }
/* 2:3 空占位:别被上面的 width:100% 撑成超高满框 —— 给个合理高度、按 2:3 推宽、居中 */
.stage[data-stage-pane="3"].active > .stage-storyboard > .sb-canvas > .sb-main-img:not(.has-mock-media) { width: auto; height: min(70vh, 540px); aspect-ratio: 2/3; justify-self: center; }
.stage[data-stage-pane="3"].active > .stage-storyboard > .sb-side { display: flex; flex-direction: column; min-height: 0; }
.stage[data-stage-pane="3"].active > .stage-storyboard > .sb-side > .pane { flex: 1 1 0; min-height: 0; overflow-y: auto; border: 0; border-radius: 0; background: var(--surface); padding: 18px 28px; }
.stage[data-stage-pane="3"].active .sb-scenes-col { max-height: none; }
.stage-storyboard { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: stretch; }
.sb-canvas { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 14px; display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 14px; }
.sb-scenes-col { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overflow-x: hidden; max-height: 560px; padding-right: 6px; scrollbar-width: thin; }
.sb-scenes-col::-webkit-scrollbar { width: 6px; }
.sb-scenes-col::-webkit-scrollbar-thumb { background: var(--border-faint); border-radius: 4px; }
.sb-scene-thumb { flex: 0 0 auto; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--border-faint); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--t-base), background var(--t-base); }
.sb-scene-thumb:hover { background: var(--background-lighter); }
.sb-scene-thumb.selected { border-color: var(--heat); background: var(--heat-12); }
.sb-scene-thumb .placeholder { aspect-ratio: 1; }
.sb-scene-thumb .nm { font-size: 11.5px; font-weight: 500; color: var(--accent-black); }
.sb-scene-thumb .sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--black-alpha-48); }
/* 整张故事板出图是竖屏 2:3(1024×1536),空占位也用 2:3,跟成品同形(不再 16:9 横框) */
.sb-main-img { aspect-ratio: 2/3; min-height: 0; }
/* 整张故事板是竖长拼图,cover 会裁掉上下 —— 用 contain 完整显示;
留白底色用白(--surface)而非占位浅灰,避免「灰底大框」(对齐 HTML 干净白底) */
.sb-main-img.has-mock-media { background-size: contain; background-color: var(--surface); }
/* 整张生成中:每张分镜占位上叠一层半透明遮罩 + 转圈 spinner(不全屏遮挡;样式同基础资产趴) */
/* 生成中遮罩(资产/三视图占位复用) */
.sb-gen-veil { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; border-radius: inherit; pointer-events: none; background: color-mix(in srgb, var(--surface) 62%, transparent); }
.sb-scene-thumb .sb-gen-veil .spinner { width: 16px; height: 16px; }
.sb-main-img .sb-gen-veil .spinner { width: 28px; height: 28px; }
/* 分镜图火山人像审核盾:缩略图角上只留盾(省地方),大图左上挂完整徽章 */
.sb-scene-thumb .placeholder .sb-frame-rv { position: absolute; top: 4px; left: 4px; z-index: 4; transform: scale(.82); transform-origin: top left; }
.sb-scene-thumb .placeholder .sb-frame-rv .rv-label { display: none; }
.sb-main-img .sb-main-rv { position: absolute; top: 10px; left: 10px; z-index: 4; }
.sb-rerun-note { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-bottom: 14px; background: rgba(180,83,9,.08); border: 1px solid rgba(180,83,9,.20); border-radius: var(--r-md); color: #7C3A05; line-height: 1.55; }
.sb-rerun-note .warn-ic { width: 22px; height: 22px; border-radius: var(--r-sm); background: rgba(180,83,9,.12); color: #B45309; display: grid; place-items: center; flex: 0 0 22px; }
.sb-rerun-note .warn-ic svg { width: 14px; height: 14px; }
.sb-rerun-note .note-copy { min-width: 0; font-size: 12px; }
.sb-rerun-note strong { color: #B45309; }
.sb-rerun-note a { color: #B45309; text-decoration: underline; text-underline-offset: 2px; }
.sb-stage-actions { display: flex; gap: 8px; margin-top: 14px; margin-bottom: 12px; }
.sb-history { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-faint); }
.sb-history-h { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.sb-history-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.sb-history-thumb { flex: 0 0 80px; min-width: 80px; display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--border-faint); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; transition: border-color var(--t-base); }
.sb-history-thumb:hover { border-color: var(--heat); }
.sb-history-thumb.current { border-color: var(--heat); background: var(--heat-12); }
.sb-history-thumb .placeholder { aspect-ratio: 1; }
.sb-history-thumb .ts { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); text-align: center; }
.sb-history-thumb.current .ts { color: var(--heat); font-weight: 600; }
.pill-cta { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 13px; cursor: pointer; font-family: inherit; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); }
.pill-cta.heat { background: var(--heat); color: var(--accent-white); border: 1px solid var(--heat); }
@@ -1256,7 +1203,6 @@
.pill-cta.ghost:hover { background: var(--background-lighter); border-color: var(--heat-20); color: var(--heat); }
.pill-cta svg { width: 13px; height: 13px; }
.sb-side .pane { padding: 18px; }
.prompt-edit { background: var(--background-base); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 12px 14px; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--accent-black); white-space: pre-wrap; min-height: 200px; outline: none; letter-spacing: .01em; cursor: text; transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base); }
.prompt-edit:hover { border-color: var(--heat-20); }
.prompt-edit:focus { border-color: var(--heat); background: var(--surface); box-shadow: 0 0 0 3px var(--heat-12); }
@@ -1265,9 +1211,9 @@
/* 绑定资产缩略图(替代占位圆点 · 一眼看出引用了哪张资产) */
.asset-tag .asset-thumb { width: 22px; height: 22px; flex: 0 0 22px; border-radius: var(--r-pill); background-size: cover; background-position: center; border: 1px solid var(--border-faint); }
/* ============= STAGE 4 · 视频 ============= */
.stage[data-stage-pane="4"].active > .queue-bar { border: 0; border-radius: 0; border-bottom: 1px solid var(--border-faint); margin: 0; padding: 14px 28px; flex: 0 0 auto; }
.stage[data-stage-pane="4"].active > .video-grid {
/* ============= STAGE 3 · 视频 ============= */
.stage[data-stage-pane="3"].active > .queue-bar { border: 0; border-radius: 0; border-bottom: 1px solid var(--border-faint); margin: 0; padding: 14px 28px; flex: 0 0 auto; }
.stage[data-stage-pane="3"].active > .video-grid {
flex: 1 1 0;
min-height: 0;
overflow-x: hidden;
@@ -1395,12 +1341,12 @@
.video-ver-badge { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; color: var(--black-alpha-48); transition: color var(--t-base); }
.video-ver-badge:hover { color: var(--heat); }
/* ============= STAGE 5 · 拼接编辑器 ============= */
.stage[data-stage-pane="5"].active > .editor { flex: 1 1 0; min-height: 0; overflow-y: auto; height: auto; }
.stage[data-stage-pane="5"].active > .editor { border: 0; border-radius: 0; }
.stage[data-stage-pane="5"].active > .editor > .editor-preview { padding-left: 28px; }
.stage[data-stage-pane="5"].active > .editor > .editor-props { padding-right: 28px; }
.stage[data-stage-pane="5"].active > .editor > .timeline { padding-left: 28px; padding-right: 28px; }
/* ============= STAGE 4 · 拼接编辑器 ============= */
.stage[data-stage-pane="4"].active > .editor { flex: 1 1 0; min-height: 0; overflow-y: auto; height: auto; }
.stage[data-stage-pane="4"].active > .editor { border: 0; border-radius: 0; }
.stage[data-stage-pane="4"].active > .editor > .editor-preview { padding-left: 28px; }
.stage[data-stage-pane="4"].active > .editor > .editor-props { padding-right: 28px; }
.stage[data-stage-pane="4"].active > .editor > .timeline { padding-left: 28px; padding-right: 28px; }
.editor { display: grid; grid-template-columns: 1fr 280px; grid-template-rows: 1fr auto; gap: 0; height: 580px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); }
.editor-preview { padding: 16px; border-right: 1px solid var(--border-faint); border-bottom: 1px solid var(--border-faint); display: flex; flex-direction: column; gap: 12px; }
@@ -1562,14 +1508,6 @@
.tri-missing-pop .pop-tip { font-size: 12px; line-height: 1.5; color: var(--black-alpha-56); }
.tri-missing-pop b { color: var(--heat); }
/* ── 底栏「确认故事板」点击气泡:没生成故事板时点确认 → 朝上弹提示(复用 pop 视觉) ── */
.sb-confirm-wrap { position: relative; display: inline-flex; }
.sb-confirm-pop { position: absolute; bottom: calc(100% + 10px); right: 0; width: 248px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(0,0,0,.14); display: flex; flex-direction: column; gap: 6px; z-index: 30; animation: sb-confirm-in var(--t-base); }
.sb-confirm-pop .pop-h { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--heat); }
.sb-confirm-pop .pop-body { font-size: 12px; line-height: 1.55; color: var(--accent-black); }
.sb-confirm-pop b { color: var(--heat); }
@keyframes sb-confirm-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
/* ── 行39 · 三视图选择弹窗 ── */
.tri-modal { width: min(720px, 100%); }
.tri-modal .tri-modal-tip { font-size: 13px; line-height: 1.55; color: var(--black-alpha-72); padding: 10px 12px; background: var(--heat-12); border: 1px solid var(--heat-20); border-radius: var(--r-md); margin-bottom: 16px; }