From 2e2998c5df9ea25bed19075eaafb844bc2b5f6ed Mon Sep 17 00:00:00 2001 From: kang Date: Mon, 18 May 2026 20:23:21 +0800 Subject: [PATCH] docs: document skg brand workbench theme --- docs/source-analysis.html | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/docs/source-analysis.html b/docs/source-analysis.html index c7456af..c14d122 100644 --- a/docs/source-analysis.html +++ b/docs/source-analysis.html @@ -591,18 +591,18 @@ - + - + - + - - + + @@ -653,8 +653,8 @@ api/main.py
你看到的区域信息流广告复刻工作表
-
主要源码AdRecreationBoard in web/components/ad-recreation-board.tsx；状态、轮询和接口回写仍在 web/app/page.tsx。
-
适合怎么描述“素材输入列、开始分析后的自动下载、音频文案路和视频视觉路怎样并行、四路状态条和声音背景音结果怎么展示”。
+
主要源码AdRecreationBoard in web/components/ad-recreation-board.tsx；品牌 token、暖光背景、主/次按钮、stat 卡片和空状态角色样式在 web/app/globals.css；状态、轮询和接口回写仍在 web/app/page.tsx。
+
适合怎么描述“登录页进工作台后的品牌条、米白主按钮、金色选中态、明亮/暗色模式、素材输入列、开始分析后的自动下载、音频文案路和视频视觉路怎样并行、四路状态条和声音背景音结果怎么展示”。
你看到的区域音频解析结果表
@@ -1038,6 +1038,18 @@ ProductRefStateItem {

变更记录

这个记录不是 git log 的替代品。它记录“产品理解发生了什么变化、影响了哪些源码、你以后描述需求时该怎么说”。后续每次改功能都要补一条。

+
+
+

2026-05-18 · 工作台视觉统一到登录页品牌语言

+ UI + Theme +
+
+

问题：登录页已经形成 SKG 卡通角色、暖橘光晕、金色聚焦色、米白主按钮和“未来健康 · 营销内容工作台”的品牌承诺，但进入信息流工作台后仍是纯黑高密度界面，主 CTA 和选中态混用 cyan、emerald、rose、violet 等颜色，视觉上像两个产品。

+

改动：web/app/globals.css 把登录页的金色、米白、暖光、8px 圆角、按钮阴影和明暗模式中性色抽成 skg-board-theme token，并新增 skg-board-brand、skg-stat-card、skg-primary-action、skg-secondary-action、skg-empty-state 等复用类。AdRecreationBoard 顶部改为 SKG brand strip，右侧统计改成米白 stat 卡片，开始分析、生成主体、整片改写、保存规划等主动作统一为登录页同源按钮；主体模板选中、处理中状态和重点输入焦点收敛到品牌金色，空状态复用 AnimatedLoginCharacters。

+

影响：后续描述工作台视觉时应按“登录页同源 SKG 营销内容工作台”理解，不再把它当成独立黑色工具页；新增图片/视频/表格板块时，主动作优先用 skg-primary-action，次动作用 skg-secondary-action，选中和聚焦用 SKG 金色，功能色只留给明确成功、等待、失败、信息语义。

+
+

2026-05-18 · 模型 prompt 语言策略切到英文主值

web/next.config.mjsNext.js 构建配置：静态导出、图片不走优化、禁用开发环境左下角 Next Dev Indicator，并移除 Next 16 已不支持的 eslint 顶层配置，避免本地 dev 出现配置 Issue 提示。
web/app/globals.css全局主题变量、登录页视觉样式、信息流工作台同源质感样式、ReactFlow 样式引用，以及本地开发态 nextjs-portal 遮挡隐藏规则。工作台新增 skg-board-theme / skg-board-panel / skg-board-topbar 等样式，把主界面的颜色、玻璃质感和金绿细节统一到登录页的暗场视觉语言；明亮模式通过 skg-board-theme--light 复用同一套结构，改成暖白底、浅绿金色层次和深色文本，不另起一套界面。
web/app/globals.css全局主题变量、登录页视觉样式、信息流工作台同源品牌 token、ReactFlow 样式引用，以及本地开发态 nextjs-portal 遮挡隐藏规则。工作台在 skg-board-theme 内定义 --skg-gold-1、--skg-gold-2、--skg-cream、--skg-bg-*、--skg-text-*、--skg-radius-* 和按钮阴影等变量，并新增 skg-board-brand、skg-stat-card、skg-primary-action、skg-secondary-action、skg-empty-state 等样式。暗色工作台复用登录页金色聚焦、米白主按钮和弱暖光氛围；明亮模式通过 skg-board-theme--light 复用同一套结构，改成暖白底、白色 panel、黑底主 CTA 和深色文本，不另起一套界面。
web/app/page.tsx产品工作台主状态：jobs、activeJobId、生成任务状态；主渲染为全屏素材输入列 + 信息流广告复刻工作表；“开始分析”会把 job 放入并行素材分析队列，下载完成后触发 triggerTranscribe 解析音频，并触发 analyzeJob 自动抽 12 张参考帧，形成“音频文案路 + 视频视觉路”同步推进；底部吸附音频条和旧全局浮动主题按钮不再从主界面渲染，避免和工作台内的明暗模式切换重复。
web/components/ad-recreation-board.tsx信息流广告复刻工作表：顶部由 buildWorkflowSteps 统一生成 01-09 流程顺序、状态和判定依据，WorkflowOrderBar 展示完整顺序，WorkflowStepBadge / PipelineLane / 分镜列标题共用同一套编号。左侧素材输入只负责链接/上传和任务切换，不再重复放横版原视频预览；右侧顶部用“音频文案、抽帧参考、相似主体、产品素材池”四个状态条显示后台并行进度。源视频工作区展示视频下载状态和默认折叠的文案依据。音频解析结果改成默认折叠的辅助信息，展开后同一行看讲话人/节奏/背景音；主工作区左侧放大为按 9:16 显示的竖版原视频播放器，播放器内覆盖“当前点抽帧”，按当前播放秒数手动补参考帧；右侧上方是音频波形 / 切点参考，下方左侧是参考帧池，右侧是逐句时间轴；下一行只保留“相似主体 / 主体模板”。音频波形用参考图式的连续灰色包络显示响度、停顿和密集爆点，顶部同时显示当前播放秒数、总时长和鼠标指针停点秒数。视频播放时通过 requestAnimationFrame 平滑驱动波形播放线，同时同步高亮并滚动当前句；点击音频波形或字幕行会跳转原视频时间。逐句时间轴左侧参考帧池的主入口是“自动抽帧 12 张”，一键按动作峰值目标重新抽取 12 张源视频参考帧，优先抓手势、表情变化、节奏点和镜头变化；缩略图按竖版完整比例显示不裁切并用更多列紧凑铺开，点选状态直接叠在参考帧池缩略图上，鼠标停留会通过固定浮层放大展示完整帧。“生成 10 张高清图”放在下方相似主体白底视图区，不和抽参考按钮平齐；如果用户没有勾选帧，默认把全部关键帧作为主体参考，勾选后只传已选帧；生成区可在“透明骨架 / 普通真人”之间切换，可选择桌面导入的 5 套内置形象作为创意方向，并可填写统一主体方向，例如年轻女性、更运动、更高级。关键帧和相似主体白底视图都用更小的竖版缩略图密排；白底视图只展示每个 view 的最新一张，缩略图上提供“重新生成这一张”和“删除这一张”，单张重生会用 replace_views=true 替换同一视角。前端调用 generateSubjectAssets 时按主体类型传 subject_style=transparent_human 或 source_actor，按需传 character_id，并使用 reconstruction_mode=similar；后端会把关键帧和内置形象视为同一个主体的创意证据，并锁定同一性别表现、年龄段、体型、材质、风格和视觉身份，同时生成全身多视角 + 肩颈正/左右近景 + 后颈肩背特写，避免整套图出现男女性别、老少年龄或样式混杂。主体生成完成后会形成 subject_consensus_brief，主体模板保存区可预览/编辑这段 brief。音频结果下方是信息流复刻分镜工作台：顶部产品参考区是“同一产品素材池”，不限量上传产品图，不做不同产品身份判断；上传原图推荐长边 1200-2000px、短边至少 600px，但后端会统一生成最长边 1600px、JPEG 92 的 AI 工作副本，并回显尺寸、自动转换和风险标注；上传后按“套在脖子上的 U 形肩颈按摩仪”进行同一产品批量识别，左/右按佩戴者身体左右、上/下按佩戴方向，额外标注内外侧、开口方向、局部结构点、背景类型、用途标签、生成风险和备注，用户只检查备注，鼠标悬停通过固定浮层显示大图预览，能盖过滚动容器和分镜框架；缺视角补图失败时保留重试入口。脚本区在分镜行上方提供“作者想法”和“整片改写”，每行新口播文案可直接编辑并可单段 AI 改写，分镜时间和原内容列压缩为窄摘要列，新口播列进一步收窄，把横向空间留给画面规划和首尾帧。每条音频分镜纵向排列，行内从左到右串起原内容、新口播文案、画面规划/产品融入和历史候选视频槽；画面规划区先选择镜头类型（人物/情绪、人物+产品、产品特写、场景过渡），再用人物/产品开关、首帧规划、尾帧规划和产品出现方式决定这一条到底需不需要产品图或相似主体参考。当前主流程暂停直接调用视频模型，不再提供“生成本条 · Seedance”或“一键提交全部”视频入口；行内新增“首尾帧闸门”，分别显示/生成首帧和尾帧，旧 keyframe 类型首尾帧会被忽略，只认真正的 asset 首尾帧。生成首尾帧时调用 generateSceneAsset，主体只传 subject_brief，不再传主体图；产品按端点选择最多 1-2 张硬参考图，默认正面，侧面/后颈/厚度/特写等关键词会额外补一张对应视角。关键帧只作为前置主体重构证据和行数据承载位置，不再作为后续视频首尾帧参考。视频候选槽只展示历史候选和待生成占位，按钮改为“保存本条规划 / 保存全部规划”。只有该行勾选“产品”时，首尾帧生成才会从产品素材池按端点视角策略自动挑选最多 1-2 张相关产品图；未勾选产品时不会把产品图提交给首尾帧/后续生视频模型，并走纯文字首尾帧。只有该行勾选“人物”时，才会把主体 brief 注入 prompt；否则 prompt 会明确禁止强行添加主角式透明骨架人，后端也不会再给产品特写强加透明骨架人约束。ModelTrace 会在音频解析、产品识别/补图、相似主体高清视图包、脚本改写等入口旁直接展示模型名；所有生图入口都显示并使用 gpt-image-2，没有其他图片模型 fallback；点击后用固定浮层展示模型链路、输入输出和回退逻辑。旧分镜卡、抽帧控制和视频生成组件仍保留在文件里，但当前主路径不渲染。
web/components/ad-recreation-board.tsx信息流广告复刻工作表：顶部先展示与登录页连续的 SKG brand strip，包含 SKG 字标、“未来健康 · 营销内容工作台”和“营销内容工作台 · TK 二创”；右侧素材/任务/视频/文案统计改为米白 stat 卡片，主动作按钮统一走 skg-primary-action，次动作走 skg-secondary-action，空状态复用 AnimatedLoginCharacters。顶部由 buildWorkflowSteps 统一生成 01-09 流程顺序、状态和判定依据，WorkflowOrderBar 展示完整顺序，WorkflowStepBadge / PipelineLane / 分镜列标题共用同一套编号。左侧素材输入只负责链接/上传和任务切换，不再重复放横版原视频预览；右侧顶部用“音频文案、抽帧参考、相似主体、产品素材池”四个状态条显示后台并行进度。源视频工作区展示视频下载状态和默认折叠的文案依据。音频解析结果改成默认折叠的辅助信息，展开后同一行看讲话人/节奏/背景音；主工作区左侧放大为按 9:16 显示的竖版原视频播放器，播放器内覆盖“当前点抽帧”，按当前播放秒数手动补参考帧；右侧上方是音频波形 / 切点参考，下方左侧是参考帧池，右侧是逐句时间轴；下一行只保留“相似主体 / 主体模板”。音频波形用参考图式的连续灰色包络显示响度、停顿和密集爆点，顶部同时显示当前播放秒数、总时长和鼠标指针停点秒数。视频播放时通过 requestAnimationFrame 平滑驱动波形播放线，同时同步高亮并滚动当前句；点击音频波形或字幕行会跳转原视频时间。逐句时间轴左侧参考帧池的主入口是“自动抽帧 12 张”，一键按动作峰值目标重新抽取 12 张源视频参考帧，优先抓手势、表情变化、节奏点和镜头变化；缩略图按竖版完整比例显示不裁切并用更多列紧凑铺开，点选状态直接叠在参考帧池缩略图上，鼠标停留会通过固定浮层放大展示完整帧。“生成 10 张高清图”放在下方相似主体白底视图区，不和抽参考按钮平齐；如果用户没有勾选帧，默认把全部关键帧作为主体参考，勾选后只传已选帧；生成区可在“透明骨架 / 普通真人”之间切换，可选择桌面导入的 5 套内置形象作为创意方向，并可填写统一主体方向，例如年轻女性、更运动、更高级。关键帧和相似主体白底视图都用更小的竖版缩略图密排；白底视图只展示每个 view 的最新一张，缩略图上提供“重新生成这一张”和“删除这一张”，单张重生会用 replace_views=true 替换同一视角。前端调用 generateSubjectAssets 时按主体类型传 subject_style=transparent_human 或 source_actor，按需传 character_id，并使用 reconstruction_mode=similar；后端会把关键帧和内置形象视为同一个主体的创意证据，并锁定同一性别表现、年龄段、体型、材质、风格和视觉身份，同时生成全身多视角 + 肩颈正/左右近景 + 后颈肩背特写，避免整套图出现男女性别、老少年龄或样式混杂。主体生成完成后会形成 subject_consensus_brief，主体模板保存区可预览/编辑这段 brief。音频结果下方是信息流复刻分镜工作台：顶部产品参考区是“同一产品素材池”，不限量上传产品图，不做不同产品身份判断；上传原图推荐长边 1200-2000px、短边至少 600px，但后端会统一生成最长边 1600px、JPEG 92 的 AI 工作副本，并回显尺寸、自动转换和风险标注；上传后按“套在脖子上的 U 形肩颈按摩仪”进行同一产品批量识别，左/右按佩戴者身体左右、上/下按佩戴方向，额外标注内外侧、开口方向、局部结构点、背景类型、用途标签、生成风险和备注，用户只检查备注，鼠标悬停通过固定浮层显示大图预览，能盖过滚动容器和分镜框架；缺视角补图失败时保留重试入口。脚本区在分镜行上方提供“作者想法”和“整片改写”，每行新口播文案可直接编辑并可单段 AI 改写，分镜时间和原内容列压缩为窄摘要列，新口播列进一步收窄，把横向空间留给画面规划和首尾帧。每条音频分镜纵向排列，行内从左到右串起原内容、新口播文案、画面规划/产品融入和历史候选视频槽；画面规划区先选择镜头类型（人物/情绪、人物+产品、产品特写、场景过渡），再用人物/产品开关、首帧规划、尾帧规划和产品出现方式决定这一条到底需不需要产品图或相似主体参考。当前主流程暂停直接调用视频模型，不再提供“生成本条 · Seedance”或“一键提交全部”视频入口；行内新增“首尾帧闸门”，分别显示/生成首帧和尾帧，旧 keyframe 类型首尾帧会被忽略，只认真正的 asset 首尾帧。生成首尾帧时调用 generateSceneAsset，主体只传 subject_brief，不再传主体图；产品按端点选择最多 1-2 张硬参考图，默认正面，侧面/后颈/厚度/特写等关键词会额外补一张对应视角。关键帧只作为前置主体重构证据和行数据承载位置，不再作为后续视频首尾帧参考。视频候选槽只展示历史候选和待生成占位，按钮改为“保存本条规划 / 保存全部规划”。只有该行勾选“产品”时，首尾帧生成才会从产品素材池按端点视角策略自动挑选最多 1-2 张相关产品图；未勾选产品时不会把产品图提交给首尾帧/后续生视频模型，并走纯文字首尾帧。只有该行勾选“人物”时，才会把主体 brief 注入 prompt；否则 prompt 会明确禁止强行添加主角式透明骨架人，后端也不会再给产品特写强加透明骨架人约束。ModelTrace 会在音频解析、产品识别/补图、相似主体高清视图包、脚本改写等入口旁直接展示模型名；所有生图入口都显示并使用 gpt-image-2，没有其他图片模型 fallback；点击后用固定浮层展示模型链路、输入输出和回退逻辑。旧分镜卡、抽帧控制和视频生成组件仍保留在文件里，但当前主路径不渲染。
AdRecreationBoard 主题切换顶部指标区左侧有“明亮/暗色”按钮，使用 Sun / Moon 图标切换 skg-board-theme--light 类名，并把选择写入 localStorage["skg-board-theme"]。暗色仍是默认模式；明亮模式只改变工作台外观，不改变任务、素材、分镜、模型调用或接口数据。
SourceReferenceBuildPanel“相似主体 / 主体模板”当前承担主体资产生成和主体模板复用的前端入口：顶部用 radio 区分“用模板生成”和“不用模板（从源视频关键帧创新）”，源视频相似 不再作为模板卡混进网格。模板库把 GET /subject-templates 数据库模板和 GET /character-library/skg 内置形象合并成 120px 竖排卡片，选中态统一用 cyan；当选择“不用模板”时模板网格会收起，避免把生成按钮和结果缩略图挤到折叠区域之外。保存为主体模板的名称、备注和按钮固定在模板区底部一行。下方“生成主体视图”独立显示模型链路，支持透明骨架/真人、全部 10 / 常用 4 / 自定义视图；同时新增“主体设定”，默认随机组合性别表现、年龄段、着装风格、地域人种、肤色、体型比例、发型和气质场景，也可切到手动指定。随机组合会在点击生成时解析成一套固定 profile 并传给后端 subject_profile，整包视图共用同一人设，不会一张男一张女或一张年轻一张银发。已有生成结果会优先显示在生成区标题下方，再显示控制项，避免用户生成后还要继续向下找图。主体缩略图放大为可单张重生、删除和 hover 放大的媒体卡；生成中会显示本次请求锁定的素材 ID 和主体设定，切换其他模块不会改变已经提交的生成目标。前端仍传 reconstruction_mode=similar，后端先用 VISION_MODEL 把关键帧/模板图转成非身份化文字 brief；如果 brief 失败，则继续用用户方向、模板文字、内置形象 brief 和结构化主体设定。最终主体图只走 gpt-image-2 的 /images/generations 文字生图，不再把原帧或模板图作为强 image-edit 锚点。
SourceReferenceBuildPanel“相似主体 / 主体模板”当前承担主体资产生成和主体模板复用的前端入口：顶部用 radio 区分“用模板生成”和“不用模板（从源视频关键帧创新）”，源视频相似 不再作为模板卡混进网格。模板库把 GET /subject-templates 数据库模板和 GET /character-library/skg 内置形象合并成 120px 竖排卡片，选中态统一用 SKG 金色；当选择“不用模板”时模板网格会收起，避免把生成按钮和结果缩略图挤到折叠区域之外。保存为主体模板的名称、备注和按钮固定在模板区底部一行。下方“生成主体视图”独立显示模型链路，支持透明骨架/真人、全部 10 / 常用 4 / 自定义视图；同时新增“主体设定”，默认随机组合性别表现、年龄段、着装风格、地域人种、肤色、体型比例、发型和气质场景，也可切到手动指定。随机组合会在点击生成时解析成一套固定 profile 并传给后端 subject_profile，整包视图共用同一人设，不会一张男一张女或一张年轻一张银发。已有生成结果会优先显示在生成区标题下方，再显示控制项，避免用户生成后还要继续向下找图。主体缩略图放大为可单张重生、删除和 hover 放大的媒体卡；生成中会显示本次请求锁定的素材 ID 和主体设定，切换其他模块不会改变已经提交的生成目标。前端仍传 reconstruction_mode=similar，后端先用 VISION_MODEL 把关键帧/模板图转成非身份化文字 brief；如果 brief 失败，则继续用用户方向、模板文字、内置形象 brief 和结构化主体设定。最终主体图只走 gpt-image-2 的 /images/generations 文字生图，不再把原帧或模板图作为强 image-edit 锚点。
web/components/media-asset-tile.tsx项目内媒体素材缩略图基底组件：图片、视频、抽帧、产品图、相似主体图、首尾帧和视频候选默认从这里获得统一交互。组件负责缩略图显示、顶层固定浮层 hover 放大、删除按钮、重新生成等操作按钮、忙碌遮罩和图片/视频共用预览，避免每个新板块重复手写不同的媒体交互。
web/app/login/page.tsx生产登录页：访问账号/访问密钥表单、保持登录、错误/成功状态；当前只在原版 Digital Oasis 动态背景上叠加一个组合登录框，桌面端左侧是动态角色，右侧是图标化登录表单；面板左上角展示官网 SKG 字标和中文“营销内容工作台”系统标识。
web/app/login/layout.tsx登录路由专属 layout：覆盖全站默认网页标题和描述为空，避免 /login 继承工作台 metadata 后在页面源码里继续出现登录界面文字以外的文案。
web/components/login/oasis-canvas.tsx登录页全屏动态视觉层：用 iframe 直接承载下载包 web/public/oasis-source/index.html 的原 WebGPU / Three.js 草场源码；父级登录页只覆盖自己的文案和表单，并在捕获阶段把全局鼠标坐标同时用原生事件和 postMessage 转发给 iframe，避免登录面板或输入框遮挡时草地失去鼠标响应。
web/public/oasis-source/index.html从下载包 remix-3d-website-the-digital-o 复制来的原始视觉源码。嵌入登录页时会隐藏 demo 站自己的导航、文字和设置面板，保留原多段滚动背景变化、WebGPU 草场、景深、风动和鼠标交互源码；末端阶段保留，只禁用原 footer 出现时把 canvas 上移的逻辑，避免底部露黑边。
web/public/skg-logo-black.svg从官网 https://cn.skg.com/logo-black.svg 获取的 SKG 官方黑色 SVG 字标；登录页通过 CSS 反相成白色玻璃标识使用。
web/components/login/animated-login-characters.tsx登录页四个几何动态角色组件：当前嵌入登录框顶部，去掉独立网格背景，保留鼠标眼神跟随、输入、显示密码、错误和成功状态反馈。
web/public/skg-logo-black.svg从官网 https://cn.skg.com/logo-black.svg 获取的 SKG 官方黑色 SVG 字标；登录页通过 CSS 反相成白色玻璃标识使用，工作台顶部 brand strip 通过米白 logo chip 直接复用。
web/components/login/animated-login-characters.tsx登录页四个几何动态角色组件：当前嵌入登录框顶部，去掉独立网格背景，保留鼠标眼神跟随、输入、显示密码、错误和成功状态反馈；工作台低密度空状态通过 AnimatedLoginCharacters 复用同一品牌角色，不在高密度分镜区堆叠角色。
web/components/nodes/index.tsx旧 DAG 节点和深度素材面板定义仍保留，当前主界面不再把这些节点挂到画布上。
web/components/audio-strip.tsx旧底部吸附音频条组件：当前主界面不再渲染，音频文案、翻译、讲话人、节奏和背景音统一在右侧复刻工作表里查看。
web/components/lightbox.tsx关键帧素材准备面板：清洗、统一主体候选、参考帧网格、六张主体重绘图、每帧去主体场景图、纵向 6 行产品融合镜头工作表和审核。