From 27a6ef0818ba644e6cbfc101a2a1260ea4f7a1a2 Mon Sep 17 00:00:00 2001
From: kang <wankang2050@gmail.com>
Date: Sun, 17 May 2026 14:38:19 +0800
Subject: [PATCH] refactor: unify audio result panel

---
 .memory/worklog.json                   | 13 +++++----
 docs/source-analysis.html              |  8 +++---
 web/components/ad-recreation-board.tsx | 38 +++++++++++++-------------
 3 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/.memory/worklog.json b/.memory/worklog.json
index 65b74f4..7f0d72c 100644
--- a/.memory/worklog.json
+++ b/.memory/worklog.json
@@ -1,11 +1,5 @@
 {
   "entries": [
-    {
-      "files_changed": 1,
-      "message": "Codex 会话活跃 · 最近命令：codex · 1 项未提交变更 · 最近提交：auto-save 2026-05-15 08:59 (~1)",
-      "ts": "2026-05-15T01:03:35Z",
-      "type": "session-heartbeat"
-    },
     {
       "files_changed": 1,
       "hash": "e9e2acc",
@@ -3271,6 +3265,13 @@
       "type": "session-heartbeat",
       "message": "Codex 会话活跃 · 最近命令：codex · 分支 main · 1 项未提交变更 · 最近提交：refactor: tighten audio result layout",
       "files_changed": 1
+    },
+    {
+      "ts": "2026-05-17T14:31:55+08:00",
+      "type": "commit",
+      "message": "refactor: place audio results side by side",
+      "hash": "78d47b8",
+      "files_changed": 3
     }
   ]
 }
diff --git a/docs/source-analysis.html b/docs/source-analysis.html
index a761d2a..c002cdc 100644
--- a/docs/source-analysis.html
+++ b/docs/source-analysis.html
@@ -588,7 +588,7 @@
                 <tr><td><code>web/next.config.mjs</code></td><td>Next.js 构建配置：静态导出、图片不走优化、禁用开发环境左下角 Next Dev Indicator，并移除 Next 16 已不支持的 <code>eslint</code> 顶层配置，避免本地 dev 出现配置 Issue 提示。</td></tr>
                 <tr><td><code>web/app/globals.css</code></td><td>全局主题变量、登录页视觉样式、ReactFlow 样式引用，以及本地开发态 <code>nextjs-portal</code> 遮挡隐藏规则。</td></tr>
                 <tr><td><code>web/app/page.tsx</code></td><td>产品工作台主状态：jobs、activeJobId、生成任务状态；主渲染为全屏素材输入列 + 音频解析工作表；“开始”编排状态只负责在下载完成后自动触发 <code>triggerTranscribe</code>，不再默认触发抽帧、Vision 扫描或分镜初稿保存；底部吸附音频条不再从主界面渲染。</td></tr>
-                <tr><td><code>web/components/ad-recreation-board.tsx</code></td><td>信息流广告音频解析工作表：左侧素材输入；右侧展示视频下载状态、默认折叠的音频文案依据，以及左右排列的逐句时间轴和讲话人/节奏/背景音分析。旧分镜卡、抽帧控制和视频生成组件仍保留在文件里，但当前主路径不渲染。</td></tr>
+                <tr><td><code>web/components/ad-recreation-board.tsx</code></td><td>信息流广告音频解析工作表：左侧素材输入；右侧展示视频下载状态、默认折叠的音频文案依据，以及统一的音频解析结果面板；面板顶部是一行讲话人/节奏/背景音摘要，下面是逐句时间轴。旧分镜卡、抽帧控制和视频生成组件仍保留在文件里，但当前主路径不渲染。</td></tr>
                 <tr><td><code>web/app/login/page.tsx</code></td><td>生产登录页：访问账号/访问密钥表单、保持登录、错误/成功状态；当前只在原版 Digital Oasis 动态背景上叠加一个组合登录框，桌面端左侧是动态角色，右侧是图标化登录表单；面板左上角展示官网 SKG 字标和中文“营销内容工作台”系统标识。</td></tr>
                 <tr><td><code>web/app/login/layout.tsx</code></td><td>登录路由专属 layout：覆盖全站默认网页标题和描述为空，避免 <code>/login</code> 继承工作台 metadata 后在页面源码里继续出现登录界面文字以外的文案。</td></tr>
                 <tr><td><code>web/components/login/oasis-canvas.tsx</code></td><td>登录页全屏动态视觉层：用 iframe 直接承载下载包 <code>web/public/oasis-source/index.html</code> 的原 WebGPU / Three.js 草场源码；父级登录页只覆盖自己的文案和表单，并在捕获阶段把全局鼠标坐标同时用原生事件和 <code>postMessage</code> 转发给 iframe，避免登录面板或输入框遮挡时草地失去鼠标响应。</td></tr>
@@ -625,7 +625,7 @@
 web/app/page.tsx
   -> 音频解析工作表：web/components/ad-recreation-board.tsx
   -> 开始：创建/激活 job → 下载完成后自动触发音频处理
-  -> 左侧素材输入列 + 右侧默认折叠的音频文案依据 + 左右排列的逐句时间轴 / 声音背景音分析
+  -> 左侧素材输入列 + 右侧默认折叠的音频文案依据 + 统一音频解析结果面板（声音摘要在上，逐句时间轴在下）
   -> 底部音频条：不再渲染，音频结果集中到右侧工作表
   -> 旧节点/深度素材面板：web/components/nodes/index.tsx、web/components/lightbox.tsx、web/components/storyboard-workbench.tsx（底层保留，当前不作为主入口）
   -> API 契约：web/lib/api.ts
@@ -863,7 +863,7 @@ SubjectAsset {
             </tr>
             <tr>
               <td><span class="tag gray">音频条</span></td>
-              <td>音频解析工作表顶部触发音频解析；全文音频文案依据默认折叠，主展示以左右两栏的逐句时间轴和声音/背景音分析区为准；底部 <code>AudioStrip</code> 当前不渲染。</td>
+              <td>音频解析工作表顶部触发音频解析；全文音频文案依据默认折叠，主展示以统一音频解析结果面板为准：声音/节奏/背景音摘要在上，逐句时间轴在下；底部 <code>AudioStrip</code> 当前不渲染。</td>
               <td>当前第一步不要默认展示底部音频条、新配音播放器、独立原文案提取大卡片，或把 MiniMax 配音当作已完成结果。</td>
               <td><code>web/components/audio-strip.tsx</code>、<code>pipeline_transcribe</code>、<code>AudioScript</code></td>
             </tr>
@@ -949,7 +949,7 @@ SubjectAsset {
             </header>
             <div class="body">
               <p><strong>问题：</strong>音频解析第一步顶部“音频文案依据”和主区域“原文案提取”同时展示全文，和逐句时间轴重复；逐句表格、讲话人/节奏/背景音分析也默认占用太多工作台版面。</p>
-              <p><strong>改动：</strong><code>web/components/ad-recreation-board.tsx</code> 将顶部“音频文案依据”改为默认折叠的 <code>details</code>；移除主面板里的“原文案提取”大卡片，让“逐句时间轴”成为音频解析后的主展示；时间轴改为紧凑可滚动表格，并与声音/背景音分析左右排列，声音/节奏/背景音保持同一行 3 个短摘要格。</p>
+              <p><strong>改动：</strong><code>web/components/ad-recreation-board.tsx</code> 将顶部“音频文案依据”改为默认折叠的 <code>details</code>；移除主面板里的“原文案提取”大卡片，不再把逐句时间轴和声音/背景音拆成两个并列区域；改为一个统一音频解析结果面板，顶部放声音/节奏/背景音 3 个短摘要，下面放紧凑可滚动逐句时间轴。</p>
               <p><strong>影响：</strong><code>web/components/ad-recreation-board.tsx</code>、<code>docs/source-analysis.html</code>。后续如果需要全文原文案，只展开“音频文案依据”；如果需要查看完整分析文本，用悬停或后续扩展详情入口，不要恢复独立大卡片。</p>
             </div>
           </article>
diff --git a/web/components/ad-recreation-board.tsx b/web/components/ad-recreation-board.tsx
index 634b1b4..c2873a3 100644
--- a/web/components/ad-recreation-board.tsx
+++ b/web/components/ad-recreation-board.tsx
@@ -553,12 +553,25 @@ function AudioIntakePanel({ job }: { job: Job | null }) {
   const processing = job.status === "transcribing" || script?.status === "rewriting"
 
   return (
-    <div className="grid items-start gap-2 xl:grid-cols-[minmax(0,1fr)_minmax(360px,0.62fr)]">
-      <section className="rounded-lg border border-white/10 bg-black/28 p-2.5">
-        <div className="mb-2 flex items-center justify-between gap-3">
-          <SectionTitle icon={<Film className="h-4 w-4" />} title="逐句时间轴" />
-          <span className="rounded-md border border-white/10 bg-black/35 px-2 py-1 text-[11px] text-white/45">{job.transcript.length} 段</span>
+    <section className="rounded-lg border border-white/10 bg-black/28 p-2.5">
+      <div className="mb-2 flex items-center justify-between gap-3">
+        <SectionTitle icon={<Film className="h-4 w-4" />} title="音频解析结果" />
+        <div className="flex items-center gap-2 font-mono text-[11px] text-white/38">
+          <span>{job.transcript.length} 段</span>
+          <span>{formatSeconds(job.duration)}</span>
         </div>
+      </div>
+
+      <div className="mb-2 grid grid-cols-3 gap-2">
+        {profiles.map((item) => (
+          <ProfileTile key={item.label} label={item.label} value={item.value} running={processing} />
+        ))}
+      </div>
+
+      <div className="mb-2 flex items-center justify-between gap-3 border-t border-white/8 pt-2">
+        <SectionTitle icon={<FileText className="h-4 w-4" />} title="逐句时间轴" />
+        <span className="rounded-md border border-white/10 bg-black/35 px-2 py-1 text-[11px] text-white/45">{job.transcript.length} 段</span>
+      </div>
         {job.transcript.length ? (
           <div className="overflow-hidden rounded-md border border-white/10">
             <div className="grid grid-cols-[82px_minmax(0,1fr)_minmax(0,1fr)] border-b border-white/10 bg-white/[0.04] px-3 py-1.5 text-[11px] font-semibold text-white/50">
@@ -579,20 +592,7 @@ function AudioIntakePanel({ job }: { job: Job | null }) {
         ) : (
           <EmptyState text={processing ? "音频解析中，完成后这里会按时间列出原文案和中文翻译。" : "下载完成后会自动解析音频；也可以点击右上角“解析音频”手动重试。"} />
         )}
-      </section>
-
-      <section className="rounded-lg border border-white/10 bg-black/28 p-2.5">
-        <div className="mb-2 flex items-center justify-between gap-3">
-          <SectionTitle icon={<Mic className="h-4 w-4" />} title="声音与背景音分析" />
-          <span className="font-mono text-[11px] text-white/38">{formatSeconds(job.duration)}</span>
-        </div>
-        <div className="grid grid-cols-3 gap-2">
-          {profiles.map((item) => (
-            <ProfileTile key={item.label} label={item.label} value={item.value} running={processing} />
-          ))}
-        </div>
-      </section>
-    </div>
+    </section>
   )
 }