From b2d84dce5cf506b550a567a12c6d035a81918406 Mon Sep 17 00:00:00 2001 From: kang Date: Mon, 25 May 2026 15:17:21 +0800 Subject: [PATCH] fix: make home video results playable --- docs/source-analysis.html | 16 ++++++++++++++-- web/app/page.tsx | 3 +++ web/components/media-asset-tile.tsx | 4 +++- 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/docs/source-analysis.html b/docs/source-analysis.html index 8a11d91..e8bba28 100644 --- a/docs/source-analysis.html +++ b/docs/source-analysis.html @@ -597,7 +597,7 @@ web/next.config.mjsNext.js 构建配置：静态导出、图片不走优化、禁用开发环境左下角 Next Dev Indicator，并移除 Next 16 已不支持的 eslint 顶层配置，避免本地 dev 出现配置 Issue 提示。 web/app/globals.css全局主题变量、登录页视觉样式、信息流工作台玻璃拟态 token、ReactFlow 样式引用，以及本地开发态 nextjs-portal 遮挡隐藏规则。工作台在 skg-board-theme 内按 Figma 本地 MCP 参考改成黑灰玻璃系统：深灰背景、#383838 胶囊侧栏、rgba(255,255,255,.1) 玻璃面、backdrop-filter: blur(5px)、20px 圆角、10px 10px 10px rgba(0,0,0,.3) 阴影和绿黄状态色；新增 skg-board-shell、skg-board-rail、skg-glass-card、skg-glass-card--flat、skg-status-orb 等样式。侧栏改为跟随视口拉满工作台可用高度的悬停胶囊，桌面最小 600px，展开时在同一侧栏内承载素材输入抽屉。明暗主题已分开维护 shell、panel、glass、stat、action 和音频波形 token；暗色压低灰雾和面板底色，明亮模式改为暖白工作台，避免指标卡、按钮和波形继续残留黑底/白线；顶部指标卡增加紫、黄绿、琥珀、青绿、绿色光斑变量，接近原版多色玻璃卡效果。主/次按钮、指标卡和空状态继续走统一类，避免各板块散写不同玻璃效果。 - web/app/page.tsx当前默认首页：单对话框生成台。页面只保留顶部极轻量品牌和中央对话框，四个主按钮是文生视频、文生图、首帧生视频、首尾帧生视频；首帧 / 首尾帧模式才显示上传位，用户必须手写提示词后点击生成。页面启动时读取 getRuntimeHealth，按 image_options / video_options 显示模型下拉，按 image_size_options 显示文生图尺寸，按 video_size_options 和 video_duration_options 显示视频画幅和真实可用时长；当前 Doubao / Seedance 生产链路最多暴露 15 秒，不再把 30 秒作为单条可选项。每次生成都会创建新的轻量 Job，文生图调用 generateImage 并传图片模型和尺寸，视频调用 generateStoryboardVideo 并传视频模型、画幅和时长；首尾帧模式先用 createCreativeImageJob 保存首帧，再用 uploadReferenceFrame 保存尾帧并以 last_image 提交。图片/视频缩略图统一复用 MediaAssetTile，支持顶层 hover 预览和删除；旧 TK 复刻工作台组件仍保留在 web/components/ad-recreation-board.tsx，但不再作为默认首页渲染。 + web/app/page.tsx当前默认首页：单对话框生成台。页面只保留顶部极轻量品牌和中央对话框，四个主按钮是文生视频、文生图、首帧生视频、首尾帧生视频；首帧 / 首尾帧模式才显示上传位，用户必须手写提示词后点击生成。页面启动时读取 getRuntimeHealth，按 image_options / video_options 显示模型下拉，按 image_size_options 显示文生图尺寸，按 video_size_options 和 video_duration_options 显示视频画幅和真实可用时长；当前 Doubao / Seedance 生产链路最多暴露 15 秒，不再把 30 秒作为单条可选项。每次生成都会创建新的轻量 Job，文生图调用 generateImage 并传图片模型和尺寸，视频调用 generateStoryboardVideo 并传视频模型、画幅和时长；首尾帧模式先用 createCreativeImageJob 保存首帧，再用 uploadReferenceFrame 保存尾帧并以 last_image 提交。首页视频提交后每 2.6 秒轮询 getJob，完成后结果卡直接显示可播放 controls，避免完成视频只是静态首帧看起来“没有效果”。图片/视频缩略图统一复用 MediaAssetTile，支持顶层 hover 预览和删除；旧 TK 复刻工作台组件仍保留在 web/components/ad-recreation-board.tsx，但不再作为默认首页渲染。 web/app/detail/page.tsx任务详情页：静态导出路由 /detail/?job=<id>，通过 query 读取 job id，调用 getJob 恢复同一任务。页面展示参考图、全部生成图、视频候选、营销图文方案和历史提示词，可继续调用 generateImage、generateStoryboardVideo、generateCreativeCopy，并支持删除图片/视频。该页继续依赖后端 owner 过滤，用户不能通过切换 URL 读取别人的任务。 web/app/agent/page.tsx新增一键出片终端页：只保留 TikTok 链接、产品图上传、实时 Agent Terminal 和最终成片播放器；通过 POST /agent-runs 创建受限后台状态机任务，通过 GET /agent-runs/{id} 轮询日志、进度、审片图和最终 mp4。该页不替代旧工作台深度编辑能力，只承接“用户只看成品”的快速出片主路径。 web/components/ad-recreation-board.tsx信息流广告复刻工作表：外壳按 Figma “Dashboard Glassmorphism”参考整体改为黑灰玻璃工作台，WorkbenchRail 默认收起为拉满工作台可用高度的 65px 胶囊工具条，只保留真实动作入口：素材任务、资源库和主题切换；鼠标移入或键盘聚焦侧栏时，skg-board-rail 切换 is-open 并从左侧展开 320px 素材输入抽屉，点击素材任务按钮可固定展开。顶部从登录页式 brand strip 改为轻量生产控制条，左侧显示 未来健康 · 营销内容工作台、主标题 营销内容工作台 和副标题 信息流广告复刻生产，右侧保留素材/当前/视频/文案段/背景音指标，并用紫、黄绿、琥珀、青绿、绿色光斑卡片增强原版玻璃拟态的颜色层次。主内容只保留源视频拆解工作区，素材输入的数据流、接口、模型调用和状态推导不变。工作台外层已取消 1800x1000 固定基准画布、ResizeObserver 档位计算和 CSS zoom 整页缩放，改为正常流式桌面容器：min-height: 100vh、width: 100%、max-width: 1920px，并保留 min-width: 1280px 作为最低操作宽度；核心列宽不再被整体缩放，文字、图标和边线由浏览器原生字号渲染，避免小数缩放导致发虚。buildWorkflowSteps 仍统一生成 01-09 流程顺序、状态和判定依据，WorkflowStepBadge / PipelineLane / 分镜列标题也继续共用同一套编号；但完整 WorkflowOrderBar、右侧素材/视频/音频/文案/参考帧需求 chips、文案依据下拉和“音频文案、抽帧参考、主体重构、产品素材池”四个状态条不再默认渲染在工作区顶部。侧边素材输入面板只负责链接/上传和任务切换，不再重复放横版原视频预览；主画布源视频工作区直接进入核心操作。讲话人、节奏和背景音分析仍写入 AudioScript，但不再作为“音频解析结果”卡片默认渲染；源视频工作区撤销右上“布局调节”临时面板，不再读取或写入 localStorage["skg-source-workspace-layout:v1"]；当前固定为左侧原视频列 380px、9:16 视频高 500px、逐句时间轴最大高 360px、参考帧池 140px、主体空态 78px；转换层不再固定拉长，按内容自然高度显示，内容过多时最多到 560px 后在自身区域内滚动；上方是按 9:16 显示的竖版原视频播放器，播放器内覆盖“当前点抽帧”，按当前播放秒数手动补参考帧，播放器下方是逐句时间轴，英文和中文都最多显示两行；右侧上方是无标题的波形与切点参考框，下方主体链路改为上方参考帧池 + 转换层、下方主体元素结果栏。音频波形用参考图式的连续灰色包络显示响度、停顿和密集爆点，并通过 skg-audio-waveform 读取明暗主题变量，避免明亮模式继续使用黑底/白色波形；顶部把低/中/高密度按钮和当前播放秒数、总时长、鼠标指针停点秒数直接放在波形上方。视频播放时通过 requestAnimationFrame 平滑驱动波形播放线，同时同步高亮并滚动当前句；点击音频波形或字幕行会跳转原视频时间。音频波形下方同框渲染无标题的 TimelineFilmstrip 临时画面胶片，前端按低/中/高密度从源视频 canvas 截取预览缩略图，并按 frame.time / duration 的百分比定位到和波形同一条时间轴上；波形与胶片之间不显示分隔横线，胶片轨道贴近波形，缩略图轻微上下错落并倾斜重叠排列，hover 时用同一张胶片卡在原位置生成固定顶层克隆，约 4.8 倍放大并自动限制在视口内，避免被工作区、滚动容器或相邻面板遮挡；单击胶片只跳转视频时间点，不写入任务数据，双击胶片或拖进参考帧池时才调用手动抽帧并正式加入 job.frames，已加入的胶片显示“已添加”；胶片预览按 job、视频、密度和时长缓存，未切换低/中/高时返回页面不重新扫视频。参考帧池的主入口是“自动抽帧 12 张”，一键按动作峰值目标重新抽取 12 张源视频参考帧，优先抓手势、表情变化、节奏点和镜头变化；缩略图按竖版完整比例显示不裁切，点选状态直接叠在参考帧池缩略图上，鼠标停留会通过固定浮层放大展示完整帧。转换层改为轻量对话式生图确认区并拿到主操作宽度：左侧参考帧可点 + 或直接拖入转换层，本地图片拖入会通过 uploadReferenceFrame 保存为参考帧；转换层上方是参考输入区，下方不再显示当前要求摘要、保留元素副本或对话记录计数，只保留带张数控件的“发送消息”输入 composer；模型确认类回复不再逐条展示，生成英文 prompt 后发送区主按钮直接切换为“确认生成 N 张”，点击后才调用主体套图生成。主体元素结果栏在转换层下方，空态只占紧凑提示；有结果时按每次生成的套图文件夹显示，左侧横向展示当前套图，右侧切换套图包，保留单张重生和删除；缩略图上提供“重新生成这一张”和“删除这一张”，单张重生会用 replace_views=true 替换同一视角。前端对卡通重构传 subject_style=cartoon_subject，其他方向传 subject_style=source_actor；形象锁定或自主描述空文本可走 reconstruction_mode=same，其他参考创新走 similar 并把参考帧作为 /images/edits 的 image refs 一起提交。主体生成完成后会形成 subject_consensus_brief。音频结果下方是信息流复刻分镜工作台：顶部产品参考区是“同一产品素材池”，不限量上传产品图，不做不同产品身份判断；上传原图推荐长边 1200-2000px、短边至少 600px，但后端会统一生成最长边 1600px、JPEG 92 的 AI 工作副本，并回显尺寸、自动转换和风险标注；上传后按“套在脖子上的 U 形肩颈按摩仪”进行同一产品批量识别，左/右按佩戴者身体左右、上/下按佩戴方向，额外标注内外侧、开口方向、局部结构点、背景类型、用途标签、生成风险和备注，用户只检查备注，鼠标悬停通过固定浮层显示大图预览，能盖过滚动容器和分镜框架；缺视角补图失败时保留重试入口。脚本区在分镜行上方提供“作者想法”和“整片改写”，每行新口播文案可直接编辑并可单段 AI 改写。每条音频分镜默认是左侧三字段、右侧横向视频候选轨；高级区仍保留首尾帧 prompt、产品出现方式和旧 6 字段。ModelTrace 会在音频解析、产品识别/补图、主体重构视图包、脚本改写等入口旁直接展示模型名；生图入口会显示 gpt-image-2 / gemini-3-pro-image-preview 链路和短时熔断规则，点击后用固定浮层展示模型链路、输入输出和回退逻辑。旧分镜卡、抽帧控制和视频生成组件仍保留在文件里，但当前主路径不渲染。 @@ -606,7 +606,7 @@ web/components/resource-library/library-drawer.tsx全局资源中心浮窗：由工作台顶部“资源库”按钮打开，叠加在工作台上方但不阻塞主界面；尺寸、位置和当前 Tab 写入 localStorage["skg-resource-library-drawer"]。提示词 Tab 固定 5 列（场景描述、视频描述、主体描述、SKG 文案、产品角度），每列先显示 use_count 排名前 5 的“常用”，再按月份倒序分组；提示词节点常驻复制按钮，hover 可选英文/中文/双语复制，并调用 use 接口。素材 Tab 固定 4 列（主体、产品、场景、视频），节点不可拖动，按月份倒序硬编码排列；“应用到当前 job”只调用后端复制接口，得到普通 ImageRef(kind="asset") 后再写入产品素材池或复制 ID。浮窗顶部最近 24 小时横条混合显示提示词和素材；新建提示词、上传素材、删除前查引用、详情侧栏都在该组件内完成。 AdRecreationBoard 主题切换左侧中段 65px 胶囊工具条上方图标组里有 Sun / Moon 图标按钮，切换 skg-board-theme--light 类名，并把选择写入 localStorage["skg-board-theme"]。暗色仍是默认模式；明亮模式只改变工作台外观，不改变任务、素材、分镜、模型调用或接口数据。 SourceReferenceBuildPanel旧的“相似主体 / 主体模板”大面板代码仍保留在文件里，方便以后恢复模板库复用、入库命名和自定义视图选择；但当前源视频工作区主路径已经由 SourceSubjectPipeline 承接，不再在页面下方渲染这块，避免和“参考帧池 → 转换层 → 主体元素”重复。 - web/components/media-asset-tile.tsx项目内媒体素材缩略图基底组件：图片、视频、抽帧、产品图、相似主体图、首尾帧和视频候选默认从这里获得统一交互。组件负责缩略图显示、顶层固定浮层 hover 放大、删除按钮、下载/重新生成等操作按钮、忙碌遮罩和图片/视频共用预览，避免每个新板块重复手写不同的媒体交互。hover 预览支持 previewPlacement 和 previewMaxWidth，视频候选可让操作按钮常显，保证下载入口不是隐藏语义；参考帧池用左侧紧凑预览避免遮住转换层；画面胶片是例外：为了保持胶片原位浏览，不使用额外弹出预览，只让胶片缩略图自己在轨道内放大。 + web/components/media-asset-tile.tsx项目内媒体素材缩略图基底组件：图片、视频、抽帧、产品图、相似主体图、首尾帧和视频候选默认从这里获得统一交互。组件负责缩略图显示、顶层固定浮层 hover 放大、删除按钮、下载/重新生成等操作按钮、忙碌遮罩、图片/视频共用预览，以及按场景启用原生视频播放 controls，避免每个新板块重复手写不同的媒体交互。hover 预览支持 previewPlacement 和 previewMaxWidth，视频候选可让操作按钮常显，保证下载入口不是隐藏语义；参考帧池用左侧紧凑预览避免遮住转换层；画面胶片是例外：为了保持胶片原位浏览，不使用额外弹出预览，只让胶片缩略图自己在轨道内放大。 web/app/login/page.tsx生产登录页：先读取 /api/auth/config，飞书 OAuth 配好时显示“飞书免登录”主按钮，账号密码表单保留为备用入口；如果 feishu_enabled=true 且浏览器 UA 命中飞书 / Lark 客户端，会在登录页自动跳转 /api/auth/feishu/start，让飞书客户端内打开应用时不需要再点一次按钮；登录成功后由后端设置 HttpOnly 会话 Cookie。当前只在原版 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，避免登录面板或输入框遮挡时草地失去鼠标响应。 @@ -1183,6 +1183,18 @@ ProductRefStateItem {

变更记录

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

+
+
+

2026-05-25 · 首页完成视频结果卡直接可播放

+ UI + Media +
+
+

问题：生产最近视频任务已经完成并写入 mp4，但首页结果卡里的视频缩略图没有原生播放控件，用户点击完成视频时看起来没有任何反馈，只能依赖 hover 自动预览。

+

改动：MediaAssetTile 新增 videoControls 参数；web/app/page.tsx 在首页最新视频状态为 completed 时启用 controls，并在失败状态显示失败空态和错误详情。

+

影响：首页生成视频完成后可直接在结果卡里播放；详情页和旧分镜候选仍按原有缩略图 / hover 预览 / 下载按钮语义工作。

+
+

2026-05-25 · 飞书客户端内登录页自动发起免登录

diff --git a/web/app/page.tsx b/web/app/page.tsx index 0e6d62e..82977ab 100644 --- a/web/app/page.tsx +++ b/web/app/page.tsx @@ -530,8 +530,11 @@ export default function Home() { objectFit="cover" previewObjectFit="contain" className="aspect-video w-full rounded-xl" + videoControls={latestVideo.status === "completed"} label={latestVideo.model} meta={`${latestVideo.status} · ${Math.round(latestVideo.progress)}%`} + previewDetail={latestVideo.error || undefined} + emptyText={latestVideo.status === "failed" ? "失败" : undefined} busy={latestVideo.status === "queued" || latestVideo.status === "in_progress"} onDelete={() => deleteVideo(latestVideo)} /> diff --git a/web/components/media-asset-tile.tsx b/web/components/media-asset-tile.tsx index 4b0cb0a..f488548 100644 --- a/web/components/media-asset-tile.tsx +++ b/web/components/media-asset-tile.tsx @@ -33,6 +33,7 @@ type MediaAssetTileProps = { previewClassName?: string previewPlacement?: MediaAssetPreviewPlacement previewMaxWidth?: number + videoControls?: boolean selected?: boolean disabled?: boolean busy?: boolean @@ -94,6 +95,7 @@ export function MediaAssetTile({ previewClassName = "", previewPlacement = "auto", previewMaxWidth = 520, + videoControls = false, selected = false, disabled = false, busy = false, @@ -122,7 +124,7 @@ export function MediaAssetTile({ } const media = kind === "video" && src ? ( -