为工作台增加可选主题侧栏、配色编辑与保存导入导出

[Lynn-x]

关联功能建议：#81。需求与范围在 Issue 中讨论，代码实现和验证在本 PR 中审阅。

Closes #81

解决的问题

使用工作台制作影片时，希望能在保留文案、时间轨和单独调整的镜头属性的情况下，快速尝试另一套视觉配色，并把配色保存下来复用。

本 PR 在现有左侧素材栏中增加「主题」标签，不增加新的侧栏或编辑器框架。上半部分选择预设和已保存主题，下半部分调整配色、导入和导出。

例如：选中「珊瑚点缀」，将强调色改成蓝色，已适配的影片镜头与演示界面素材会同步更新；原有文案和剪辑保持不变。可撤销、恢复预设，或保存为「我的主题」。

功能范围

• 现有「素材 / 动效库 / 音效」旁新增「主题」标签。
• 预设选择和七项语义配色：背景、卡片、文字、次要文字、强调色、浅色填充、边框。
• 支持取色器与六位 HEX 输入；无效色值不会应用。
• 支持命名保存、应用和删除本地配色，以及 JSON 导入 / 导出。
• 工程保存 themeId 和可选 themeColors；主题与配色修改接入现有撤销 / 重做、工程 JSON 和浏览器保存流程。
• 选择其他预设会清除工程级自定义配色；单独编辑过的镜头颜色仍优先保留。

本分支也包含默认影片模板的适配及 9 个预设：纸质、现代浅色、暗黑、清新鼠尾草、珊瑚点缀、柔和鸢尾、深海蓝、黑曜紫、复古牛皮纸。牛皮纸使用固定随机种子的纸纹，避免播放时随机闪烁。

与原有 Gallery 的关系及兼容性

Gallery 已有丰富的动效样式，本功能补充的是工程级主题入口。并未把全部 Gallery 样式转换成可全局换色的主题。 目前模板中已适配的镜头使用主题；普通未适配卡片维持原行为。

• 未声明主题 / 配色的 manifest 无需迁移；主题面板显示对应提示。
• 原始 Ink Press 仍为默认主题，并保留原始截图质感，因此不提供整套配色编辑。其他 8 个预设支持编辑。
• 老工程在首次加载时对继承自默认主题的样式做一次归一化，之后不再根据颜色值推断是否为用户修改。
• 未知主题 ID 回退到默认主题。
• 编辑器本身的深色外观不随影片主题改变。
• 「我的主题」保存在当前浏览器的 localStorage，按 manifest 名称区分，最多 50 条；不是账号云同步。跨浏览器请使用 JSON 导出 / 导入。
• 导入支持本面板导出的 shotcraft-palette 版本 1 格式，验证文件大小、基础主题和完整 HEX 字段；尚不支持任意配色网站的 JSON 格式。

实现与素材说明

工作台通过可选 manifest 字段与统一属性解析传递主题，预览和导出共用这条路径。新增可编辑主题的七色配置集中于 template/src/themes/palettes.json，影片组件与演示界面使用同一来源。

模板继续共用一套场景、镜头时序和时间轨。可调界面素材来自本项目的虚构研究工作台 HTML：编译为 5 个页面和 27 个裁切定义，运行时用包含可信 HTML 的 SVG foreignObject 与校验后的颜色变量绘制。没有引入运行时截图服务；用户修改颜色也不需要重新生成 PNG。

本分支保留了前期生成的主题 PNG 快照、生成脚本和验证记录，因此文件数量较多（当前相对上游约 190 个文件）。新素材是虚构演示，不代表连接了真实产品或真实研究数据；保留仓库 Apache-2.0 许可和原有素材归属说明。珊瑚方向参考 Happy Hues 的用色层次，具体颜色针对本模板调整。

本机 Windows 启动兼容补丁、目录链接、独立预览副本、实验工程和本地验证输出没有包含在提交中。

使用与复现

1. 按仓库现有方式将工作台链接到 template 并启动。
2. 打开左侧「主题」，选择任一可编辑预设。
3. 在「替换配色」修改卡片色、文字或强调色，检查影片预览。
4. 测试撤销 / 重做、恢复预设，以及刷新后的工程配色恢复。
5. 输入名称，点击「保存配色」；在「我的主题」中重新应用。
6. 导出配色 JSON，切换其他预设，再导入该文件，检查基础主题与配色恢复。

完整说明见 template/THEMES.md，验证覆盖见 template/themes/PALETTE-VALIDATION.md。

已完成验证

• 工作台主题测试 7 项通过：配色校验、优先级、重置、JSON 往返、旧工程兼容、未适配卡片、时间轨保留等。
• 模板 TypeScript 检查通过。
• 最新工作台 TypeScript 编译和 Vite 生产打包通过；保留既有的大包体提示。
• 浏览器验证主题切换、配色编辑、恢复、撤销 / 重做、刷新保存、本地主题保存 / 删除、配色文件导入 / 导出及无效文件拒绝。
• 检查过窄侧栏的横向溢出，以及多个实际影片镜头中的主题素材加载。
• 配色适配阶段通过工作台导出路径渲染过 4 张自定义配色视频帧及 30 帧 H.264 样片，并检查了输出画面。

验证边界：以 Windows / Chromium 为主；最后新增牛皮纸与配色库功能后没有重跑整条影片导出，也未完成其他浏览器对 SVG foreignObject 的一致性验证。本机完整 npm run build 的 prebuild 曾因已有预览目录链接占用报 EBUSY，随后使用已生成索引直接执行 tsc -b 和 vite build 通过；该本机链接问题的修改未包含在 PR 中。

希望先确认的范围

感谢维护这个项目！目前以草稿提交，方便先讨论接口和范围，尚不请求直接合并整包改动。

如果更希望小步合并，我可以按维护者偏好整理为两步：

1. 工作台可选主题接口、侧栏配色 / 保存 / 导入导出、测试及最小示例。
2. 默认影片模板的完整适配、额外预设和素材生成链路。

尤其希望确认是否需要保留已有 PNG 快照，以及可编辑 SVG 素材方案是否符合项目方向。可以按反馈减少预设和调整接口。

[Vincentwei1021]

感谢这份 PR，也感谢写得这么完整的说明。我在 macOS 上做了独立验证，结论先说：方案方向接受，可编辑 SVG 素材这条路可以走；合并前请先改两处，其余问题可以合后再跟进。

已验证通过的部分（本机 macOS，Chromium headless，Remotion 4.0.484）：

• Ink Press 默认片对照上游 5e71af3，帧 150 / 240 / 470 / 845 / 1000 逐像素一致，最大通道差 0。
• workbench 的 npm run parity 4 帧全部一致。
• workbench tsc -b、template tsc --noEmit、npm run test:themes 7/7 通过。
• Modern Light / Coral / Midnight / Vintage Kraft 在 macOS 上的 foreignObject 渲染正常，你担心的跨浏览器一致性在这台机器上没有出问题。

合并前请改的两处

1. 删掉 PNG 快照和验证产物（回答你「是否保留 PNG」的问题：不保留）。

template/public/themes/** 下 5 套主题 × 27 张 PNG 共 23.3 MB，运行时实际到不了：visual-theme.tsx 的 themeAsset 只在 paletteAsset 找不到裁切定义时才回退到 PNG，而 palette-assets.json 的 27 个裁切正好覆盖了 textures/live 全部 27 张纹理。这些文件一旦合进 main，即使后续删除 blob 也会永远留在历史里。请一并移除：

• template/public/themes/**
• template/themes/capture-validation.json、VALIDATION.md、BRIGHT-VALIDATION.md、PALETTE-VALIDATION.md、template/themes/*.json 这些一行的 props 文件
• template/scripts/capture-themes.cjs（只服务 PNG 生成）

template/themes/ui.cjs 和 template/scripts/build-palette-assets.cjs 是重新生成 palette-assets.json 需要的，保留。验证记录可以搬到 PR 描述里。

2. 修 SVG 地址里未转义的括号，否则新主题下会出现空白卡片。

palette-assets.ts:19 用 encodeURIComponent 生成 data URI，它不转义 ( )，而嵌入的页面标记每页有 111 个 var(--…)。有两处把这个 URI 放进了不加引号的 CSS url()：

• template/src/aifl/live/SceneDetail.tsx:102 研究问题飞入行的 backgroundImage
• template/src/aifl/live/SceneOutroLive.tsx:214 片尾周报卡的 background

CSS 解析到第一个 ) 就截断了 url，整条属性作废。复现：{"theme":"modern-light"} 渲染帧 495 / 515，飞入的行是纯白空矩形；帧 1000 / 1040，片尾右上角的周报卡是一块空白。Ink Press 同帧正常。走 <Img src> 的地方不受影响。

建议在 palette-assets.ts encode 之后统一做 .replace(/\(/g,'%28').replace(/\)/g,'%29')，一处修好两边，比逐个给 url() 加引号更稳。

可以合后再修的问题（不阻塞，先记在这里）

• visual-theme.tsx:58-63 的 rgba 分桶：页面色要求 b > 220，暖白 rgba(255,241,214)（SceneOpen.tsx:433 聚光灯光斑）和 rgba(255,240,210)（SceneOpen.tsx:328 光束阴影）落到强调色分支，非纸质主题下中性高光变成一团主题色光晕，Modern Light 帧 150 能看到蓝晕。
• visual-theme.tsx:73 把 wbr 的 kicker 写成空字符串，manifest.tsx:23 又把它当样式键让主题覆盖，切到其他主题后「Weekly Brief · 2026-W28」消失，和「保留文案」的目标冲突。建议改字号或位置解决重叠，不要清空文案。
• ThemePanel.tsx:26 的 <input type="color"> 拖动时连续触发 onChange，经 updateColor 走 store.setProject，而 store.ts:154-157 每次都 commit() 并清空 selectedClipId。拖一次取色器会刷掉 50 条撤销历史，同时取消当前选中的片段。可以照 Inspector.tsx 的 begin() 节流模式，加一个不 commit 的 setThemeColors。
• 文档数量对不上：README / README_CN 写 6 套主题，THEMES.md 写 8 套，manifest.tsx 里 9 套。
• 非纸质主题的解说字幕改成 76px 白色胶囊，周报镜头（帧 845）会盖住页面内容。这是设计取舍，想听听你的想法，也可能我们合后再调。

CI 现在停在等待维护者批准运行，你推送更新后我会批准让 PR checks 跑一遍。