From cdffc4ba083e5610b328d52c91c88521c67f5eca Mon Sep 17 00:00:00 2001 From: kang Date: Mon, 18 May 2026 16:26:08 +0800 Subject: [PATCH] style: align board with login visual system --- docs/source-analysis.html | 14 ++++- web/app/globals.css | 76 ++++++++++++++++++++++++++ web/components/ad-recreation-board.tsx | 34 ++++++------ 3 files changed, 106 insertions(+), 18 deletions(-) diff --git a/docs/source-analysis.html b/docs/source-analysis.html index 04535f2..097ae7e 100644 --- a/docs/source-analysis.html +++ b/docs/source-analysis.html @@ -591,7 +591,7 @@ - + @@ -1023,6 +1023,18 @@ ProductRefStateItem {

变更记录

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

+
+
+

2026-05-18 · 主工作台视觉质感对齐登录页

+ UI + Style +
+
+

问题：登录页已经形成黑底、草场绿、SKG 金色和玻璃登录卡片的质感，但进入工作台后仍偏黑红/青色，前后像两个不同系统。

+

改动：AdRecreationBoard 根节点增加 skg-board-theme，顶部、流程条、素材列和主工作区使用 skg-board-panel / skg-board-topbar；globals.css 增加暗场径向光、细网格、金绿边框、玻璃阴影和金色 focus 状态。流程状态和主按钮从玫红/高饱和青色收敛到登录页同源的 SKG 金色与草绿色。

+

影响：这次只改颜色、质感和系统感觉，不改变素材输入、抽帧、音频解析、主体模板、分镜规划等功能链路。

+
+

2026-05-18 · 相似主体区接入主体模板数据库

diff --git a/web/app/globals.css b/web/app/globals.css index 1d946cf..09e1643 100644 --- a/web/app/globals.css +++ b/web/app/globals.css @@ -464,6 +464,82 @@ nextjs-portal { min-width: 0; transform: translateY(44px); } + +/* ============================================================ + 信息流工作台 · 登录页同源质感 + ============================================================ */ +.skg-board-theme { + background: + radial-gradient(circle at 12% 2%, rgba(214, 179, 106, 0.13), transparent 31%), + radial-gradient(circle at 82% 8%, rgba(143, 176, 113, 0.1), transparent 26%), + linear-gradient(120deg, #050706 0%, #070b09 42%, #030303 100%); +} + +.skg-board-theme::before { + content: ""; + position: absolute; + inset: 0; + z-index: 0; + pointer-events: none; + background: + linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px), + linear-gradient(180deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px); + background-size: 64px 64px; + opacity: 0.44; +} + +.skg-board-theme::after { + content: ""; + position: absolute; + inset: 0; + z-index: 0; + pointer-events: none; + background: + linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 42%, rgba(0, 0, 0, 0.4)), + linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 38%, rgba(0, 0, 0, 0.24)); +} + +.skg-board-ambient { + background: + radial-gradient(circle at 22% 18%, rgba(214, 179, 106, 0.16), transparent 26%), + radial-gradient(circle at 68% 10%, rgba(143, 176, 113, 0.11), transparent 28%), + radial-gradient(circle at 52% 100%, rgba(214, 179, 106, 0.08), transparent 36%); +} + +.skg-board-topbar, +.skg-board-panel { + border-color: rgba(160, 182, 129, 0.14) !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.026)), + rgba(6, 11, 8, 0.58) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.06), + 0 18px 54px rgba(0, 0, 0, 0.34); + backdrop-filter: blur(10px); +} + +.skg-board-topbar { + background: + linear-gradient(100deg, rgba(214, 179, 106, 0.08), rgba(143, 176, 113, 0.035) 42%, rgba(255, 255, 255, 0.03)), + rgba(4, 8, 6, 0.62) !important; +} + +.skg-board-theme input:focus, +.skg-board-theme textarea:focus, +.skg-board-theme select:focus { + border-color: rgba(214, 179, 106, 0.58) !important; + box-shadow: 0 0 0 2px rgba(214, 179, 106, 0.14); +} + +.skg-board-theme input[type="checkbox"] { + accent-color: #d6b36a; +} + +.skg-board-theme ::selection { + background: rgba(214, 179, 106, 0.28); + color: #fff; +} + .login-hero { isolation: isolate; color: #282828; diff --git a/web/components/ad-recreation-board.tsx b/web/components/ad-recreation-board.tsx index 1d92c54..ecb2e3c 100644 --- a/web/components/ad-recreation-board.tsx +++ b/web/components/ad-recreation-board.tsx @@ -1477,10 +1477,10 @@ export function AdRecreationBoard({ } return ( -
-
-
-
+
+
+
+
feed ad recreation worksheet

信息流广告复刻工作表

@@ -1510,12 +1510,12 @@ export function AdRecreationBoard({ onStartProduction={startProduction} /> -
+
- +

源视频解析与参考帧

@@ -1615,10 +1615,10 @@ function MaterialColumn({ onStartProduction: () => void }) { return ( -
+
- +

素材输入

@@ -1637,7 +1637,7 @@ function MaterialColumn({ type="button" onClick={onStartProduction} disabled={data.submitting || (!url.trim() && !job)} - className="inline-flex h-10 items-center justify-center rounded-md bg-rose-600 px-3 text-[13px] font-semibold text-white transition hover:bg-rose-500 disabled:cursor-not-allowed disabled:opacity-45" + className="inline-flex h-10 items-center justify-center rounded-md bg-[#f0ead8] px-3 text-[13px] font-semibold text-black shadow-[0_14px_28px_rgba(0,0,0,0.28)] transition hover:bg-[#fff7df] disabled:cursor-not-allowed disabled:opacity-45" > 开始分析 @@ -4267,7 +4267,7 @@ function MaterialCard({
web/next.config.mjsNext.js 构建配置：静态导出、图片不走优化、禁用开发环境左下角 Next Dev Indicator，并移除 Next 16 已不支持的 eslint 顶层配置，避免本地 dev 出现配置 Issue 提示。
web/app/globals.css全局主题变量、登录页视觉样式、ReactFlow 样式引用，以及本地开发态 nextjs-portal 遮挡隐藏规则。
web/app/globals.css全局主题变量、登录页视觉样式、信息流工作台同源质感样式、ReactFlow 样式引用，以及本地开发态 nextjs-portal 遮挡隐藏规则。工作台新增 skg-board-theme / skg-board-panel / skg-board-topbar 等样式，把主界面的颜色、玻璃质感和金绿细节统一到登录页的暗场视觉语言。
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；后端会把关键帧和内置形象视为同一个主体的创意证据，并锁定同一性别表现、年龄段、体型、材质、风格和视觉身份，同时生成全身多视角 + 肩颈正/左右近景 + 后颈肩背特写，避免整套图出现男女性别、老少年龄或样式混杂。音频结果下方是信息流复刻分镜工作台：顶部产品参考区是“同一产品素材池”，不限量上传产品图，不做不同产品身份判断；上传原图推荐长边 1200-2000px、短边至少 600px，但后端会统一生成最长边 1600px、JPEG 92 的 AI 工作副本，并回显尺寸、自动转换和风险标注；上传后按“套在脖子上的 U 形肩颈按摩仪”进行同一产品批量识别，左/右按佩戴者身体左右、上/下按佩戴方向，额外标注内外侧、开口方向、局部结构点、背景类型、用途标签、生成风险和备注，用户只检查备注，鼠标悬停通过固定浮层显示大图预览，能盖过滚动容器和分镜框架；缺视角补图失败时保留重试入口。脚本区在分镜行上方提供“作者想法”和“整片改写”，每行新口播文案可直接编辑并可单段 AI 改写，分镜时间和原内容列压缩为窄摘要列，新口播列进一步收窄，把横向空间留给画面规划和首尾帧。每条音频分镜纵向排列，行内从左到右串起原内容、新口播文案、画面规划/产品融入和历史候选视频槽；画面规划区先选择镜头类型（人物/情绪、人物+产品、产品特写、场景过渡），再用人物/产品开关、首帧规划、尾帧规划和产品出现方式决定这一条到底需不需要产品图或相似主体参考。当前主流程暂停直接调用视频模型，不再提供“生成本条 · Seedance”或“一键提交全部”视频入口；行内新增“首尾帧闸门”，分别显示/生成首帧和尾帧，旧 keyframe 类型首尾帧会被忽略，只认真正的 asset 首尾帧。生成首尾帧时调用 generateSceneAsset，先按人物描述、镜头类型、首尾状态和产品佩戴需求，从相似主体 6/10 视图里自动挑选最多 5 张最相关主体视角，再传入 subject_images 和该行自动挑选的产品图 product_images；关键帧只作为前置主体重构证据和行数据承载位置，不再作为后续视频首尾帧参考。视频候选槽只展示历史候选和待生成占位，按钮改为“保存本条规划 / 保存全部规划”。只有该行勾选“产品”时，首尾帧生成才会从产品素材池按分镜角色、视角优先级、用途标签、置信度和风险自动挑选最多 6 张相关产品图；未勾选产品时不会把产品图提交给首尾帧/后续生视频模型。只有该行勾选“人物”时，才会传按需筛选后的相似主体参考图；否则 prompt 会明确禁止强行添加主角式透明骨架人，后端也不会再给产品特写强加透明骨架人约束。ModelTrace 会在音频解析、产品识别/补图、相似主体高清视图包、脚本改写等入口旁直接展示模型名；所有生图入口都显示并使用 gpt-image-2，没有其他图片模型 fallback；点击后用固定浮层展示模型链路、输入输出和回退逻辑。旧分镜卡、抽帧控制和视频生成组件仍保留在文件里，但当前主路径不渲染。
SourceReferenceBuildPanel“相似主体 / 主体模板”当前承担主体资产生成和主体模板复用的前端入口：面板先分成“主体模板库”和“本次生成 / 入库草稿”。模板库优先读取 GET /subject-templates 数据库模板，并保留 GET /character-library/skg 的内置形象作为策划初始模板；入库草稿显示本次来源、生成数量、模板命名和备注，点击保存会调用 saveSubjectTemplate 把当前主体视图复制到主体模板库。选择数据库模板后，后续 generateSubjectAssets 会传 subject_template_id，让后端以已保存模板视图作为新主体参考。