From afe5e8bfdf3807b16534b175c09c38c411fc9722 Mon Sep 17 00:00:00 2001
From: kang <wankang2050@gmail.com>
Date: Wed, 20 May 2026 10:01:21 +0800
Subject: [PATCH] fix: split generation workspace panels

---
 .memory/worklog.json          | 14 +++++++
 src/app/globals.css           | 69 +++++++++++++++++++++++++++++++++++
 src/app/page.tsx              | 36 ++++++++++--------
 src/components/PackPanel.tsx  | 68 ++++++++++++++++++----------------
 src/components/ResultGrid.tsx |  2 +-
 5 files changed, 142 insertions(+), 47 deletions(-)

diff --git a/.memory/worklog.json b/.memory/worklog.json
index 00f39d7..1022f11 100644
--- a/.memory/worklog.json
+++ b/.memory/worklog.json
@@ -1489,6 +1489,20 @@
       "message": "fix: loosen glass dashboard workspace",
       "hash": "7fcda19",
       "files_changed": 8
+    },
+    {
+      "ts": "2026-05-20T09:49:16+08:00",
+      "type": "commit",
+      "message": "auto-save 2026-05-20 09:49 (~3)",
+      "hash": "ccbfd3e",
+      "files_changed": 3
+    },
+    {
+      "ts": "2026-05-20T09:54:43+08:00",
+      "type": "commit",
+      "message": "auto-save 2026-05-20 09:54 (~3)",
+      "hash": "7ad323a",
+      "files_changed": 3
     }
   ]
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index 414ce98..159b92d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -354,6 +354,40 @@ input, textarea {
   backdrop-filter: blur(18px);
 }
 
+.session-workspace {
+  height: calc(100vh - 116px);
+  min-height: 640px;
+}
+
+.session-split {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
+  gap: 18px;
+  align-items: stretch;
+}
+
+.session-image-pane,
+.pack-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
+}
+
+.session-image-pane::-webkit-scrollbar,
+.pack-scroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+.session-image-pane::-webkit-scrollbar-thumb,
+.pack-scroll::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.16);
+}
+
+.session-pack-pane {
+  border-left: 1px solid rgba(255, 255, 255, 0.08);
+  padding-left: 18px;
+}
+
 .result-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
@@ -368,6 +402,41 @@ input, textarea {
   }
 }
 
+@media (min-width: 1760px) {
+  .session-split {
+    grid-template-columns: minmax(0, 1fr) minmax(400px, 480px);
+    gap: 22px;
+  }
+
+  .session-pack-pane {
+    padding-left: 22px;
+  }
+}
+
+@media (max-width: 1180px) {
+  .session-workspace {
+    height: auto;
+    min-height: 0;
+  }
+
+  .session-split {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .session-image-pane,
+  .session-pack-pane {
+    overflow: visible;
+  }
+
+  .session-pack-pane {
+    border-left: 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    padding-left: 0;
+    padding-top: 18px;
+  }
+}
+
 /* ===== Login (cloned from SKG source) ===== */
 .login-page {
   background:
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d27f247..82b2bba 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -353,8 +353,8 @@ export default function Home() {
               />
             )}
             {current && (
-              <section className="dashboard-workbench space-y-5 p-5">
-                <div className="flex items-end justify-between gap-4">
+              <section className="dashboard-workbench session-workspace flex flex-col gap-5 p-5">
+                <div className="flex shrink-0 items-end justify-between gap-4">
                   <div>
                     <span className="section-eyebrow">Step · 02 · Quick Screen</span>
                     <h2 className="mt-2 text-lg font-semibold text-white">本次生成</h2>
@@ -364,19 +364,25 @@ export default function Home() {
                   </div>
                   <code className="max-w-[220px] truncate text-[11px] text-white/30 font-mono">{current.id}</code>
                 </div>
-                <ResultGrid images={current.images} onAction={handleAction} />
-                <PackPanel
-                  session={current}
-                  loadingKind={loadingKind}
-                  allLoading={allLoading}
-                  characterLoading={characterLoading}
-                  videoLoading={videoLoading}
-                  onGenerate={handleGeneratePack}
-                  onGenerateAll={handleGenerateAll}
-                  onLockCharacter={handleLockCharacter}
-                  onRegenerateAsset={handleRegenerateAsset}
-                  onGenerateVideo={handleGenerateVideo}
-                />
+                <div className="session-split min-h-0 flex-1">
+                  <div className="session-image-pane min-h-0 overflow-y-auto pr-1">
+                    <ResultGrid images={current.images} onAction={handleAction} />
+                  </div>
+                  <aside className="session-pack-pane min-h-0 overflow-hidden">
+                    <PackPanel
+                      session={current}
+                      loadingKind={loadingKind}
+                      allLoading={allLoading}
+                      characterLoading={characterLoading}
+                      videoLoading={videoLoading}
+                      onGenerate={handleGeneratePack}
+                      onGenerateAll={handleGenerateAll}
+                      onLockCharacter={handleLockCharacter}
+                      onRegenerateAsset={handleRegenerateAsset}
+                      onGenerateVideo={handleGenerateVideo}
+                    />
+                  </aside>
+                </div>
               </section>
             )}
           </div>
diff --git a/src/components/PackPanel.tsx b/src/components/PackPanel.tsx
index b46d3b2..6acf5a9 100644
--- a/src/components/PackPanel.tsx
+++ b/src/components/PackPanel.tsx
@@ -60,10 +60,10 @@ function AssetRow({ template, asset, accent, onRegenerate }: {
     }
   }
   return (
-    <div className="grid grid-cols-[96px_minmax(0,1fr)_minmax(132px,auto)] gap-3 p-3 rounded-[8px] bg-white/[0.035] ring-1 ring-white/[0.06] hover:bg-white/[0.05] hover:ring-white/[0.12] transition-all">
+    <div className="grid grid-cols-[72px_minmax(0,1fr)_minmax(78px,auto)] gap-3 p-3 rounded-[8px] bg-white/[0.035] ring-1 ring-white/[0.06] hover:bg-white/[0.05] hover:ring-white/[0.12] transition-all 2xl:grid-cols-[84px_minmax(0,1fr)_minmax(104px,auto)]">
       {/* thumbnail */}
       <div
-        className="relative flex w-[92px] max-h-[110px] items-center justify-center overflow-visible rounded-[8px] bg-black/30 ring-1 ring-white/[0.08]"
+        className="relative flex w-[70px] max-h-[86px] items-center justify-center overflow-visible rounded-[8px] bg-black/30 ring-1 ring-white/[0.08] 2xl:w-[82px] 2xl:max-h-[98px]"
         style={{ aspectRatio: aspectCss(asset?.aspectRatio ?? template.aspectRatio) }}
       >
         {ready ? (
@@ -124,7 +124,7 @@ function AssetRow({ template, asset, accent, onRegenerate }: {
           {ready && onRegenerate && (
             <button
               onClick={() => setShowRedo(value => !value)}
-              className="mt-1 rounded-[8px] bg-white/[0.055] px-2.5 py-1.5 text-[10px] text-white/60 ring-1 ring-white/[0.08] transition-colors hover:bg-white/[0.10] hover:text-white"
+              className="mt-1 rounded-[8px] bg-white/[0.055] px-2 py-1.5 text-[10px] text-white/60 ring-1 ring-white/[0.08] transition-colors hover:bg-white/[0.10] hover:text-white 2xl:px-2.5"
             >
               {showRedo ? '收起重做' : '重做'}
             </button>
@@ -475,9 +475,13 @@ export default function PackPanel({
 
   if (!primaryImage) {
     return (
-      <section className="card p-6">
+      <section className="card h-full p-6">
         <div className="flex items-start gap-4">
-          <div className="w-8 h-8 rounded-[8px] bg-white/[0.05] border border-white/[0.08] flex items-center justify-center text-white/30 text-sm">⌗</div>
+          <div className="w-8 h-8 rounded-[8px] bg-white/[0.05] border border-white/[0.08] flex items-center justify-center text-white/30 text-sm">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" aria-hidden="true">
+              <path d="M4 7h16M7 4v16M17 4v16M4 17h16" strokeLinecap="round" />
+            </svg>
+          </div>
           <div>
             <span className="section-eyebrow">Step · 03 · Assets</span>
             <h2 className="mt-1.5 text-sm font-semibold text-white">选中主方案后展开资产清单</h2>
@@ -493,10 +497,10 @@ export default function PackPanel({
   const generatedTotal = packs.reduce((s, p) => s + p.assets.length, 0);
 
   return (
-    <div className="space-y-4">
+    <div className="flex h-full min-h-0 flex-col gap-4">
       {/* Step 03 header card */}
-      <section className="card p-5 space-y-4">
-        <div className="flex items-start justify-between gap-4">
+      <section className="card shrink-0 space-y-4 p-4">
+        <div className="flex flex-col gap-4 2xl:flex-row 2xl:items-start 2xl:justify-between">
           <div className="flex-1 min-w-0">
             <span className="section-eyebrow">Step · 03 · Lock & Generate</span>
             <h2 className="mt-1.5 text-base font-semibold text-white">角色锁定 & 资产清单</h2>
@@ -505,7 +509,7 @@ export default function PackPanel({
             </p>
           </div>
           {/* primary image + stats */}
-          <div className="flex items-center gap-4 shrink-0">
+          <div className="flex items-center justify-between gap-4 shrink-0 2xl:justify-end">
             <div className="text-right text-[11px] text-white/40 space-y-0.5">
               <div className="font-mono text-white/70">{generatedTotal} <span className="text-white/30">/ {totalImageSlots} 张</span></div>
               <div className="text-[10px]">图片位</div>
@@ -519,11 +523,11 @@ export default function PackPanel({
         </div>
 
         {/* action buttons */}
-        <div className="flex flex-wrap items-center gap-2">
+        <div className="grid grid-cols-1 gap-2 2xl:grid-cols-2">
           <button
             onClick={() => onLockCharacter(primaryImage)}
             disabled={characterLoading || !!loadingKind || allLoading}
-            className="btn btn-glass text-xs disabled:opacity-40"
+            className="btn btn-glass justify-center text-xs disabled:opacity-40"
           >
             {characterLoading ? (
               <svg width="12" height="12" viewBox="0 0 24 24" className="animate-spin" fill="none" stroke="currentColor" strokeWidth="2.5">
@@ -543,7 +547,7 @@ export default function PackPanel({
               if (ok) onGenerateAll(primaryImage);
             }}
             disabled={allLoading || !!loadingKind || characterLoading}
-            className="btn btn-primary text-xs disabled:opacity-40"
+            className="btn btn-primary justify-center text-xs disabled:opacity-40"
           >
             {allLoading ? (
               <>
@@ -590,26 +594,28 @@ export default function PackPanel({
         <SectionNav active={activeNav} onChange={setActiveNav} />
       </section>
 
-      {/* Pack sections */}
-      {PACK_ORDER.map(kind => {
-        const pack = packs.find(p => p.kind === kind && p.sourceImageId === primaryImage.id);
-        return (
-          <PackSection
-            key={kind}
-            kind={kind}
-            session={session}
-            primaryImage={primaryImage}
-            pack={pack}
-            isLoading={loadingKind === kind}
-            onGenerate={() => onGenerate(primaryImage, kind)}
-            onRegenerateAsset={onRegenerateAsset}
-          />
-        );
-      })}
+      <div className="pack-scroll min-h-0 flex-1 space-y-3 overflow-y-auto pr-1">
+        {/* Pack sections */}
+        {PACK_ORDER.map(kind => {
+          const pack = packs.find(p => p.kind === kind && p.sourceImageId === primaryImage.id);
+          return (
+            <PackSection
+              key={kind}
+              kind={kind}
+              session={session}
+              primaryImage={primaryImage}
+              pack={pack}
+              isLoading={loadingKind === kind}
+              onGenerate={() => onGenerate(primaryImage, kind)}
+              onRegenerateAsset={onRegenerateAsset}
+            />
+          );
+        })}
 
-      {/* Text + Video */}
-      <TextTemplateSection />
-      <VideoSection videoLoading={videoLoading} primaryImage={primaryImage} onGenerateVideo={onGenerateVideo} />
+        {/* Text + Video */}
+        <TextTemplateSection />
+        <VideoSection videoLoading={videoLoading} primaryImage={primaryImage} onGenerateVideo={onGenerateVideo} />
+      </div>
     </div>
   );
 }
diff --git a/src/components/ResultGrid.tsx b/src/components/ResultGrid.tsx
index bd4cff7..6e86caa 100644
--- a/src/components/ResultGrid.tsx
+++ b/src/components/ResultGrid.tsx
@@ -46,7 +46,7 @@ export default function ResultGrid({ images, onAction }: ResultGridProps) {
 
   return (
     <div className="space-y-4">
-      <div className="flex flex-wrap items-center justify-between gap-3">
+      <div className="sticky top-0 z-20 -mx-1 flex flex-wrap items-center justify-between gap-3 rounded-[8px] bg-[#202020]/82 px-1 py-2 backdrop-blur-xl">
         <div className="flex items-center gap-2 text-[11px] text-white/55">
           <kbd className="kbd">1</kbd>
           <span className="text-white/40">–</span>