fix(storyboard): 还原故事板 — 时间区间/缩略图/白底/字号对齐HTML
- E1 每场卡字号对齐 HTML:.nm 12→11.5、.sub 12→10.5、.asset-tag 12→11.5 - E2 故事板主图留白底色 --background-lighter(灰)→ --surface(白), contain 完整显示竖长拼图时不再透出「灰底大框」 - E3 每场 sub 由「#1」改为时间区间「0~15s」(累加脚本镜时长,无脚本回退序号) - E4 绑定资产前的占位圆点 → 已引用资产缩略图(groupMainUrl,无图回退圆点) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
seaislee1209
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
d7f7ed2bae
commit
8550d532ac
@@ -395,11 +395,12 @@
|
||||
.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: 12px; font-weight: 500; color: var(--accent-black); }
|
||||
.sb-scene-thumb .sub { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); }
|
||||
.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); }
|
||||
.sb-main-img { aspect-ratio: 16/9; min-height: 0; }
|
||||
/* 整张故事板是竖长拼图,cover 会裁掉上下 —— 用 contain 完整显示 */
|
||||
.sb-main-img.has-mock-media { background-size: contain; }
|
||||
/* 整张故事板是竖长拼图,cover 会裁掉上下 —— 用 contain 完整显示;
|
||||
留白底色用白(--surface)而非占位浅灰,避免「灰底大框」(对齐 HTML 干净白底) */
|
||||
.sb-main-img.has-mock-media { background-size: contain; background-color: var(--surface); }
|
||||
|
||||
.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; }
|
||||
@@ -430,8 +431,10 @@
|
||||
.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); }
|
||||
.asset-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-pill); font-size: 12px; }
|
||||
.asset-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; background: var(--background-lighter); border: 1px solid var(--border-faint); border-radius: var(--r-pill); font-size: 11.5px; }
|
||||
.asset-tag .dotc { width: 14px; height: 14px; background: var(--surface); border: 1px solid var(--border-faint); border-radius: 50%; }
|
||||
/* 绑定资产缩略图(替代占位圆点 · 一眼看出引用了哪张资产) */
|
||||
.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 · 视频 ============= */
|
||||
.content--fh .stage[data-stage-pane="4"].active > .video-grid { flex: 1 1 0; min-height: 0; overflow-y: auto; }
|
||||
|
||||
@@ -2825,16 +2825,21 @@ export function PipelinePage(props: {
|
||||
<div className="stage-storyboard">
|
||||
<div className="sb-canvas">
|
||||
<div className="sb-scenes-col" id="sb-scenes-row">
|
||||
{sbFrames.length ? sbFrames.map((frame, idx) => {
|
||||
{sbFrames.length ? (() => {
|
||||
// 每场显示时间区间(累加脚本镜时长 → 「0~5s」),对齐 HTML;无脚本时回退序号
|
||||
let cum = 0;
|
||||
const times = shots.map((s) => { const st = cum; cum += s.duration_seconds || 15; return `${st}~${cum}s`; });
|
||||
return sbFrames.map((frame, idx) => {
|
||||
const url = frameUrl(frame);
|
||||
return (
|
||||
<div className={`sb-scene-thumb${idx === sbSelected ? " selected" : ""}`} key={frame.id} data-sid={frame.id} onClick={() => setSbSelected(idx)}>
|
||||
<div className={`placeholder${url ? " has-mock-media" : ""}`} style={url ? mediaStyle(url) : undefined}><span className="ph-frame">场 {idx + 1}</span></div>
|
||||
<div className="nm">场 {idx + 1}</div>
|
||||
<div className="sub">#{frame.sort_order + 1}</div>
|
||||
<div className="sub">{times[idx] || `#${frame.sort_order + 1}`}</div>
|
||||
</div>
|
||||
);
|
||||
}) : sbExpectedShots ? (
|
||||
});
|
||||
})() : sbExpectedShots ? (
|
||||
/* 还没出图:按采用版脚本镜头数铺等量空占位,标「待生成」,让用户看出本该有几张 */
|
||||
Array.from({ length: sbExpectedShots }, (_, idx) => (
|
||||
<div className={`sb-scene-thumb${idx === sbSelected ? " selected" : ""}`} key={`ph-${idx}`} onClick={() => setSbSelected(idx)}>
|
||||
@@ -2912,12 +2917,13 @@ export function PipelinePage(props: {
|
||||
// 与 Stage 2 同源:用 metadata.label 取名(不依赖全局 assets 列表),排除三视图组并按名字去重,
|
||||
// 否则同一角色的立绘组+三视图组+多版本会各算一个,且名字会退化成「人物(人物)」。
|
||||
const bound = [
|
||||
...groupsByKind("product").filter((g) => g.adopted_asset).map((g) => ({ id: g.id, name: (g.metadata?.label || "").trim() || KIND_LABEL.product, kind: "product" as const })),
|
||||
...buildEntities("person").filter((e) => e.group.adopted_asset).map((e) => ({ id: e.key, name: e.name, kind: "person" as const })),
|
||||
...buildEntities("scene").filter((e) => e.group.adopted_asset).map((e) => ({ id: e.key, name: e.name, kind: "scene" as const })),
|
||||
...groupsByKind("product").filter((g) => g.adopted_asset).map((g) => ({ id: g.id, name: (g.metadata?.label || "").trim() || KIND_LABEL.product, kind: "product" as const, url: groupMainUrl(g) })),
|
||||
...buildEntities("person").filter((e) => e.group.adopted_asset).map((e) => ({ id: e.key, name: e.name, kind: "person" as const, url: groupMainUrl(e.group) })),
|
||||
...buildEntities("scene").filter((e) => e.group.adopted_asset).map((e) => ({ id: e.key, name: e.name, kind: "scene" as const, url: groupMainUrl(e.group) })),
|
||||
];
|
||||
// 圆点占位 → 已引用资产缩略图(一眼看出绑了哪张),无图时回退圆点
|
||||
return bound.length ? bound.map((b) => (
|
||||
<span className="asset-tag" key={b.id}><span className="dotc"></span>{b.name}({KIND_LABEL[b.kind]})</span>
|
||||
<span className="asset-tag" key={b.id}>{b.url ? <span className="asset-thumb" style={{ backgroundImage: `url(${b.url})` }} /> : <span className="dotc"></span>}{b.name}({KIND_LABEL[b.kind]})</span>
|
||||
)) : <span className="muted-2 mono" style={{ fontSize: "12px" }}>// 暂无绑定资产</span>;
|
||||
})()}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user