From 30a4c46e1d6b2a783a084537027749c09b22904a Mon Sep 17 00:00:00 2001
From: kang <wankang2050@gmail.com>
Date: Tue, 12 May 2026 19:14:42 +0800
Subject: [PATCH] auto-save 2026-05-12 19:14 (~3)

---
 .memory/worklog.json         |   7 ++
 web/app/page.tsx             |  13 ++-
 web/components/dashboard.tsx | 189 ++++++++++++++++++-----------------
 3 files changed, 112 insertions(+), 97 deletions(-)

diff --git a/.memory/worklog.json b/.memory/worklog.json
index bcdbc19..dfc0d98 100644
--- a/.memory/worklog.json
+++ b/.memory/worklog.json
@@ -223,6 +223,13 @@
       "message": "auto-save 2026-05-12 19:03 (~1)",
       "hash": "50d6390",
       "files_changed": 1
+    },
+    {
+      "ts": "2026-05-12T19:09:08+08:00",
+      "type": "commit",
+      "message": "auto-save 2026-05-12 19:08 (~3)",
+      "hash": "67bbdae",
+      "files_changed": 3
     }
   ]
 }
diff --git a/web/app/page.tsx b/web/app/page.tsx
index 1127ad3..7e177b6 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -226,7 +226,7 @@ export default function Home() {
   return (
     <>
       <div className="canvas-bg" />
-      <main className="relative h-screen w-screen overflow-hidden flex flex-col">
+      <main className="relative h-screen w-screen overflow-hidden flex">
         {/* 右上工具 */}
         <header className="absolute top-3 right-6 z-30 flex items-center gap-2 pointer-events-auto">
           {job && (
@@ -240,12 +240,15 @@ export default function Home() {
           <ThemeToggle />
         </header>
 
-        {/* 上区：折叠看板 — 默认仅一条 tile 栏，点击 tile 才展开 */}
-        <section className="relative z-10 flex-shrink-0">
+        {/* 左侧：竖向 tile 看板（固定 200px 宽） */}
+        <aside
+          className="relative z-10 flex-shrink-0 border-r border-white/5 bg-black/20 backdrop-blur-xl overflow-y-auto"
+          style={{ width: 200 }}
+        >
           <Dashboard data={nodeData} />
-        </section>
+        </aside>
 
-        {/* 下区：紧凑 DAG 节点流图（撑满剩余高度） */}
+        {/* 右区：紧凑 DAG 节点流图（撑满剩余宽度） */}
         <section className="relative flex-1 min-h-0">
           <ReactFlow
             nodes={nodes}
diff --git a/web/components/dashboard.tsx b/web/components/dashboard.tsx
index 1c6402c..b222070 100644
--- a/web/components/dashboard.tsx
+++ b/web/components/dashboard.tsx
@@ -140,7 +140,7 @@ export function Dashboard({ data }: Props) {
   }
   const closeTile = (_key: string) => setExpanded(new Set())
 
-  const Tile = ({ tkey, rowSpan }: { tkey: string; rowSpan?: boolean }) => {
+  const Tile = ({ tkey }: { tkey: string }) => {
     const t = TILES.find((x) => x.key === tkey)!
     const state = colState[t.key]
     const isOpen = expanded.has(t.key)
@@ -150,52 +150,53 @@ export function Dashboard({ data }: Props) {
         type="button"
         onClick={() => toggleTile(t.key)}
         title={colSummary[t.key]}
-        className={`group rounded-md overflow-hidden border flex items-stretch transition ${
-          rowSpan ? "row-span-2" : ""
-        } ${isOpen ? "border-violet-400/60 ring-2 ring-violet-400/40" : "border-white/10 hover:border-white/20"}`}
-        style={{ height: rowSpan ? "auto" : 30 }}
+        className={`group w-full rounded-md overflow-hidden border flex items-stretch transition ${
+          isOpen ? "border-violet-400/60 ring-2 ring-violet-400/40" : "border-white/10 hover:border-white/20"
+        }`}
+        style={{ height: 36 }}
       >
-        <div className="px-2 flex items-center gap-1.5" style={{ background: TYPE_GRAD[t.type] }}>
-          <span className="text-white/70 text-[9px] font-mono">{String(t.step).padStart(2, "0")}</span>
-          <span className="text-white">{t.icon}</span>
-          <span className="text-white text-[11.5px] font-medium whitespace-nowrap">{t.title}</span>
+        <div className="px-2.5 flex items-center gap-2 flex-1" style={{ background: TYPE_GRAD[t.type] }}>
+          <span className="text-white/70 text-[9.5px] font-mono shrink-0">{String(t.step).padStart(2, "0")}</span>
+          <span className="text-white shrink-0">{t.icon}</span>
+          <span className="text-white text-[12px] font-medium truncate">{t.title}</span>
         </div>
-        <div className="px-1.5 flex items-center gap-1 bg-black/40">
+        <div className="px-2 flex items-center gap-1 bg-black/40 shrink-0">
           <span className={`h-1.5 w-1.5 rounded-full ${STATE_DOT[state]}`} />
-          <ChevronDown className={`h-3 w-3 text-white/60 transition ${isOpen ? "rotate-180" : ""}`} />
+          <ChevronDown className={`h-3 w-3 text-white/60 transition ${isOpen ? "-rotate-90" : "-rotate-90"}`} />
         </div>
       </button>
     )
   }
 
   return (
-    <div className="w-full">
-      {/* Tile Bar — DAG 拓扑布局：input/download/split → (关键帧路 / 转录路) → compose */}
-      <div className="px-3 pt-2 pb-1.5 flex items-center gap-1.5">
-        <Tile tkey="input" />
-        <Tile tkey="download" />
-        <Tile tkey="split" />
-        {/* 分叉：上下两路 */}
-        <div className="flex-1 grid grid-rows-2 gap-1 mx-1">
-          <div className="flex gap-1.5 items-center">
-            <Tile tkey="keyframe" />
-            <Tile tkey="imagegen" />
-            <Tile tkey="videogen" />
-          </div>
-          <div className="flex gap-1.5 items-center">
-            <Tile tkey="asr" />
-            <Tile tkey="translate" />
-            <Tile tkey="rewrite" />
-          </div>
-        </div>
-        <Tile tkey="compose" />
+    <div className="h-full flex flex-col gap-1.5 p-2.5">
+      <div className="text-[9.5px] uppercase tracking-[0.25em] text-[var(--text-faint)] px-1 pb-0.5">Pipeline</div>
+      {/* 主线：input / download / split */}
+      <Tile tkey="input" />
+      <Tile tkey="download" />
+      <Tile tkey="split" />
+      {/* 分叉：上路 关键帧/生图/生视频 */}
+      <div className="border-l-2 border-violet-400/30 pl-2 ml-2 space-y-1.5">
+        <div className="text-[9px] uppercase tracking-widest text-[var(--text-faint)]">视频路</div>
+        <Tile tkey="keyframe" />
+        <Tile tkey="imagegen" />
+        <Tile tkey="videogen" />
       </div>
+      {/* 分叉：下路 转录/翻译/改写 */}
+      <div className="border-l-2 border-pink-400/30 pl-2 ml-2 space-y-1.5">
+        <div className="text-[9px] uppercase tracking-widest text-[var(--text-faint)]">音频路</div>
+        <Tile tkey="asr" />
+        <Tile tkey="translate" />
+        <Tile tkey="rewrite" />
+      </div>
+      {/* 合流 */}
+      <Tile tkey="compose" />
 
-      {/* 展开面板 — 从屏幕左侧滑出，竖向 sidebar drawer */}
+      {/* 展开面板 — 紧贴左侧 sidebar 右侧滑出，竖向单列 */}
       {expanded.size > 0 && (
         <div
-          className="fixed z-40 left-4 transition-transform duration-200"
-          style={{ top: 80, bottom: 16, width: 380 }}
+          className="fixed z-40 transition-transform duration-200"
+          style={{ left: 220, top: 16, bottom: 16, width: 380 }}
         >
           {TILES.filter((t) => expanded.has(t.key)).map((t) => (
             <section
@@ -435,81 +436,85 @@ export function Dashboard({ data }: Props) {
               )
             )}
 
-            {/* ---- Rewrite ---- */}
+            {/* ---- Rewrite — Kanban ---- */}
             {key === "rewrite" && (
-              <div className="grid grid-cols-2 gap-3 max-w-2xl">
-                <MiniCard>
-                  <div className="text-[10px] uppercase tracking-widest text-[var(--text-faint)] mb-1.5">产品信息</div>
+              <>
+                <KanbanCard tone="green" tags={["产品信息"]} title="SKG 产品卖点">
                   <textarea
-                    rows={4}
-                    placeholder="SKG 产品关键卖点（占位）"
+                    rows={5}
+                    placeholder="粘贴 SKG 产品关键卖点（占位）"
                     disabled
-                    className="w-full text-[12px] px-2 py-1.5 rounded-md bg-black/30 border border-dashed border-white/10 placeholder:text-[var(--text-faint)] text-[var(--text-strong)] resize-none opacity-70"
+                    className="w-full text-[12px] px-2 py-1.5 rounded-md bg-black/30 border border-dashed border-white/10 placeholder:text-[var(--text-faint)] text-[var(--text-strong)] resize-none opacity-70 mt-1"
                   />
-                </MiniCard>
-                <MiniCard>
-                  <div className="text-[10px] uppercase tracking-widest text-[var(--text-faint)] mb-1.5">模型 & 状态</div>
-                  <div className="text-[11.5px] text-[var(--text-soft)] mb-1">模型：<span className="font-mono text-[var(--text-strong)]">gemini-2.5-pro</span></div>
-                  <div className="text-[10.5px] text-[var(--text-faint)]">下一冲刺接入</div>
-                </MiniCard>
-              </div>
+                </KanbanCard>
+                <KanbanCard tone="green" tags={["模型"]} title="gemini-2.5-pro">
+                  <div className="text-[11px] text-[var(--text-soft)]">按英文转录 + 产品信息 → 输出改写中文文案</div>
+                  <div className="kanban-meta">下一冲刺接入</div>
+                </KanbanCard>
+              </>
             )}
 
-            {/* ---- ImageGen ---- */}
+            {/* ---- ImageGen — Kanban ---- */}
             {key === "imagegen" && (
-              <div className="space-y-3">
-                <MiniCard>
-                  <div className="grid grid-cols-2 gap-2 text-[11.5px]">
-                    <div className="rounded-md bg-violet-500/10 border border-violet-400/30 px-2.5 py-2">
-                      <div className="text-[9.5px] text-violet-300 uppercase tracking-widest">推荐</div>
-                      <div className="text-[var(--text-strong)]">nano-banana-pro</div>
-                      <div className="text-[10px] text-[var(--text-faint)]">Gemini 3 Pro Image</div>
-                    </div>
-                    <div className="rounded-md bg-white/[0.04] border border-white/10 px-2.5 py-2">
-                      <div className="text-[9.5px] text-[var(--text-faint)] uppercase tracking-widest">备选</div>
-                      <div className="text-[var(--text-strong)]">gpt-image-2</div>
-                      <div className="text-[10px] text-[var(--text-faint)]">OpenAI</div>
-                    </div>
-                  </div>
-                </MiniCard>
+              <>
+                <KanbanCard tone="rose" tags={["推荐"]} title="nano-banana-pro">
+                  <div className="text-[11px] text-[var(--text-soft)]">Gemini 3 Pro Image · 走 SKG 网关 /v1/images/generations</div>
+                </KanbanCard>
+                <KanbanCard tone="rose" tags={["备选"]} title="gpt-image-2">
+                  <div className="text-[11px] text-[var(--text-soft)]">OpenAI · SKG 网关待开通</div>
+                </KanbanCard>
                 {data.selectedFrames.size === 0 ? (
-                  <div className="text-[11.5px] text-[var(--text-faint)] py-3 text-center">在「关键帧」里勾选后启动</div>
+                  <KanbanCard tone="pink" tags={["待启动"]} title="未选关键帧">
+                    <div className="text-[11px] text-[var(--text-soft)]">在「关键帧」节点勾选 1+ 张后，每张关键帧 → 1 张生成图</div>
+                  </KanbanCard>
                 ) : (
-                  <div className="grid grid-cols-5 gap-3">
-                    {Array.from({ length: data.selectedFrames.size }).map((_, i) => (
-                      <MiniCard key={i} className="aspect-video flex items-center justify-center">
-                        <span className="text-[11px] text-[var(--text-faint)]">#{i + 1} 待生</span>
-                      </MiniCard>
-                    ))}
-                  </div>
+                  Array.from({ length: data.selectedFrames.size }).map((_, i) => (
+                    <KanbanCard
+                      key={i}
+                      tone="pink"
+                      tags={[`生成图 ${i + 1}`]}
+                      title={`分镜 ${i + 1} → AI 图`}
+                    >
+                      <div className="aspect-video bg-black/40 rounded-md flex items-center justify-center text-[11px] text-[var(--text-faint)]">
+                        待生成
+                      </div>
+                    </KanbanCard>
+                  ))
                 )}
-              </div>
+              </>
             )}
 
-            {/* ---- VideoGen ---- */}
+            {/* ---- VideoGen — Kanban ---- */}
             {key === "videogen" && (
-              <div className="grid grid-cols-3 gap-3 max-w-2xl">
-                {["Sora 2 · SKG", "Seedance · 外部", "Kling · 外部"].map((m) => (
-                  <MiniCard key={m}>
-                    <div className="text-[10.5px] text-[var(--text-soft)]">{m}</div>
-                  </MiniCard>
-                ))}
-              </div>
+              <>
+                <KanbanCard tone="violet" tags={["SKG 网关"]} title="Sora 2">
+                  <div className="text-[11px] text-[var(--text-soft)]">/v1/videos 待开通（IT）</div>
+                </KanbanCard>
+                <KanbanCard tone="violet" tags={["外部"]} title="Seedance">
+                  <div className="text-[11px] text-[var(--text-soft)]">字节跳动 · 需独立 API key</div>
+                </KanbanCard>
+                <KanbanCard tone="violet" tags={["外部"]} title="Kling">
+                  <div className="text-[11px] text-[var(--text-soft)]">快手 · 需独立 API key</div>
+                </KanbanCard>
+                <KanbanCard tone="rose" tags={["占位"]} title="生成视频列表">
+                  <div className="text-[11px] text-[var(--text-soft)]">每张生成图 → 1 段 5-10s 视频，按改写文案合成 prompt</div>
+                </KanbanCard>
+              </>
             )}
 
-            {/* ---- Compose ---- */}
+            {/* ---- Compose — Kanban ---- */}
             {key === "compose" && (
-              <div className="grid grid-cols-2 gap-3 max-w-2xl">
-                <MiniCard className="aspect-video flex items-center justify-center">
-                  <span className="text-[11.5px] text-[var(--text-faint)]">成品视频 · 待合成</span>
-                </MiniCard>
-                <MiniCard>
-                  <div className="text-[11px] text-[var(--text-soft)]">
-                    视频片段 + 字幕 / TTS
+              <>
+                <KanbanCard tone="cyan" tags={["成品"]} title="最终视频">
+                  <div className="aspect-video bg-black/40 rounded-md flex items-center justify-center text-[11.5px] text-[var(--text-faint)] mt-1">
+                    待合成
                   </div>
-                  <div className="text-[10px] text-[var(--text-faint)] mt-1">本地 ffmpeg · 零 API</div>
-                </MiniCard>
-              </div>
+                </KanbanCard>
+                <KanbanCard tone="cyan" tags={["ffmpeg"]} title="字幕 + TTS 合成">
+                  <div className="text-[11px] text-[var(--text-soft)]">视频片段 + 字幕（改写中文）+ TTS 配音 → 最终 mp4</div>
+                  <div className="kanban-meta">完全本地 · 零 API 调用</div>
+                </KanbanCard>
+              </>
             )}
       </div>
     )