# storyboard-report.html 设计约定

与另外四份报告同一套视觉语言。改样式前先读这份，别凭感觉发挥。

## 基调

- 冷灰印张 + 铁锈红印记：`--paper:#eceded` `--panel:#f5f6f5` `--seal:#8a3324` `--seal-2:#c56a4e` `--ok:#3d6b4f`。配色跑过可视化验证器，别私自换色
- 页宽 1600，衬线标题 + 无衬线正文，零外部依赖，离线双击能开
- 模型产出的每一个字都过 `esc()`；内嵌 JSON 的 `<` 转 `<` 防 `</script` 截断

## 区块顺序

KPI 带 → 01 镜头节奏带 → 02 分集分镜表 → 03 生成批次单 → 04 配音对齐单 → 05 质量门。

## 分镜节奏带（招牌图）

- 每集一行：`E01 | 色带 | 合计`。色带按**生成段**分组（`.rseg` 粗分隔 = 段边界 = 一次生成），组内每个分镜一片，**片宽 = 分镜时长 ÷ 全集时长**，颜色 = 铁锈红按景别透明度分档（大远景 0.25 → 大特写 1.0）——深浅相间、长短相间就是好节奏，一眼可读
- 片是 `<a href="#seg-段号">`，点击跳到段卡；悬停 title 带段号#切序/秒数/景别/运镜

## 分集分镜表

- 每集一个块，**段卡**两列网格（`repeat(2,minmax(0,1fr))`，窄屏降档）；段卡区默认最多 760px 截断 + 渐隐 + 「展开全部段 / 收起」开关，加载后不超高的集自动放开并移除按钮
- 段卡：段头（段号 + 总秒·切数徽章 + 场景/光照 chips + 节拍认领范围）→ **主分镜图**按顶层 `aspectRatio` 排版（默认 16:9，竖屏剧 9:16；竖屏主图收窄居中，批次卡的场景设定图始终 16:9；旧数据的 `_meta.orientation` 与 frame 末尾标签只作兼容）（`<段号>/f1.png`，缺图显示「主分镜图 · #1 未生成」+ 提示词占位——**不猜、不骗**）→ **子分镜条**（`.subs` 四列缩略格，f2 起逐格，缺图小占位。类名是 `subf`——`sub` 会撞页眉的 `.sub`，踩过）→ **五五分栏**（`.duo`，`repeat(2,minmax(0,1fr))`）：左列分镜行（#序号、`0.00s 起 · 3s`、景别·运镜、人物道具 chips、画面摘要**从剧本认领的节拍自动带出**、悬停出现分镜图提示词复制），右列**提示词面板**——两个页签并列：H3（`h3Prompt` 原样）与 Seedance（程序现拼），默认 H3，复制键读当前激活的页签，列表超高自带细滚动条。分镜行在切头下方多一行构图量化字段（`.scomp`，焦距 · 机位 · 构图 · 视线 · 焦点 · 稳定性）；段卡在分镜图下方显示走位（`.seg-block`）
- `imageExists` 由 CLI 注入（render 时检查工作目录），renderHtml 本体不碰文件系统——可测性

## 生成批次单

- 同场景 + 同光照一批，两列卡片；有 `--art` 且在 `--images` 指定的目录（默认 `./images`）里找到场景设定图就嵌图（点击放大）
- 批次卡：编号 + 场景/光照 chips + 段号 chips（可点跳转）+ 一句「需要：谁的角色设定图 · 哪些道具」

## 配音对齐单

- 一张表：段号#切序（可点）/ 说话人 / 台词（衬线）/ 台词秒数——TTS 音频对到哪一段的第几切，全部自动汇总

## 质量门与交互

- 页眉徽章 + 病灶横幅 + 文末清单，对账门缺上游时「跳过（视为通过）」小字明说
- lightbox 点图放大（首帧图 + 批次场景图共用），Esc 关闭
- 复制按钮 `.copy[data-copy]` 事件委托；导出 JSON 内嵌 Blob 下载，`revokeObjectURL` 延迟 10 秒
- `@media print`：截断全展开、按钮隐藏、镜头卡双列、白底；`prefers-reduced-motion` 关动效