From f0f567bc16ed3c22a58fe43abb9c78fcab1cab70 Mon Sep 17 00:00:00 2001
From: kang <wankang2050@gmail.com>
Date: Wed, 20 May 2026 20:09:39 +0800
Subject: [PATCH] fix: center scaled workbench vertically

---
 docs/source-analysis.html              | 12 ++++++++++++
 web/components/ad-recreation-board.tsx | 23 ++++++++++++++++++-----
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/docs/source-analysis.html b/docs/source-analysis.html
index 518f57f..412779c 100644
--- a/docs/source-analysis.html
+++ b/docs/source-analysis.html
@@ -1132,6 +1132,18 @@ ProductRefStateItem {
         <h2>变更记录</h2>
         <p>这个记录不是 git log 的替代品。它记录“产品理解发生了什么变化、影响了哪些源码、你以后描述需求时该怎么说”。后续每次改功能都要补一条。</p>
         <div class="changelog">
+          <article class="change">
+            <header>
+              <h3>2026-05-20 · 工作台缩放后按视口高度居中</h3>
+              <span class="tag violet">UI</span>
+              <span class="tag cyan">Responsive</span>
+            </header>
+            <div class="body">
+              <p><strong>问题：</strong>常见尺寸档位让宽度稳定了，但 1440x900、1728x1117、2560x1440 这类窗口里，缩放后的 <code>1800x1000</code> 工作台高度小于视口却仍贴顶，底部会出现明显空白，视觉上像整体尺寸调错。</p>
+              <p><strong>改动：</strong><code>AdRecreationBoard</code> 记录工作台视口宽高，在缩放后画布可完整放入视口高度时上下居中；当缩放后高度等于或超过视口时仍保持顶部对齐和滚动。</p>
+              <p><strong>影响：</strong>不同显示器继续使用同一套框架和缩放档位，但短窗口不再贴顶留黑边，高窗口会保留更均衡的上下呼吸感。</p>
+            </div>
+          </article>
           <article class="change">
             <header>
               <h3>2026-05-20 · 工作台缩放改为常见尺寸档位</h3>
diff --git a/web/components/ad-recreation-board.tsx b/web/components/ad-recreation-board.tsx
index 2fb946a..98b4e12 100644
--- a/web/components/ad-recreation-board.tsx
+++ b/web/components/ad-recreation-board.tsx
@@ -2229,6 +2229,7 @@ export function AdRecreationBoard({
   const [runtimeModels, setRuntimeModels] = useState<RuntimeModels | undefined>()
   const [boardTheme, setBoardTheme] = useState<BoardThemeMode>("dark")
   const [boardScale, setBoardScale] = useState(1)
+  const [boardViewportSize, setBoardViewportSize] = useState({ width: 0, height: 0 })
   const [libraryOpen, setLibraryOpen] = useState(false)
   const fileRef = useRef<HTMLInputElement | null>(null)
   const boardViewportRef = useRef<HTMLElement | null>(null)
@@ -2283,8 +2284,13 @@ export function AdRecreationBoard({
     const updateBoardScale = () => {
       const node = boardViewportRef.current
       if (!node) return
-      const nextScale = resolveBoardScale(node.clientWidth)
+      const nextWidth = node.clientWidth
+      const nextHeight = node.clientHeight
+      const nextScale = resolveBoardScale(nextWidth)
       setBoardScale((current) => (Math.abs(current - nextScale) < 0.001 ? current : nextScale))
+      setBoardViewportSize((current) =>
+        current.width === nextWidth && current.height === nextHeight ? current : { width: nextWidth, height: nextHeight },
+      )
     }
 
     updateBoardScale()
@@ -2501,15 +2507,21 @@ export function AdRecreationBoard({
 
   const boardScaledWidth = Math.round(BOARD_FRAME_WIDTH * boardScale)
   const boardScaledHeight = Math.round(BOARD_FRAME_HEIGHT * boardScale)
+  const boardViewportHeight = boardViewportSize.height || boardScaledHeight
+  const boardShouldCenterVertically = boardScaledHeight < boardViewportHeight
 
   return (
     <section ref={boardViewportRef} className={`skg-board-theme ${boardTheme === "light" ? "skg-board-theme--light" : ""} relative z-20 h-screen w-screen overflow-auto bg-black text-white`}>
       <div className="skg-board-ambient pointer-events-none fixed inset-0" />
-      <div className="relative z-10 mx-auto" style={{ width: boardScaledWidth, height: boardScaledHeight }}>
       <div
-        className="flex h-[1000px] w-[1800px] max-w-none flex-col px-4 py-4"
-        style={{ zoom: boardScale, transformOrigin: "top left" }}
+        className={`relative z-10 flex min-h-screen justify-center ${boardShouldCenterVertically ? "items-center" : "items-start"}`}
+        style={{ minWidth: boardScaledWidth, minHeight: Math.max(boardScaledHeight, boardViewportHeight) }}
       >
+        <div style={{ width: boardScaledWidth, height: boardScaledHeight }}>
+        <div
+          className="flex h-[1000px] w-[1800px] max-w-none flex-col px-4 py-4"
+          style={{ zoom: boardScale, transformOrigin: "top left" }}
+        >
         <header className="skg-board-topbar mb-3 flex items-center justify-between gap-4 rounded-lg border border-white/10 bg-white/[0.04] px-4 py-3">
           <div className="skg-board-brand">
             <div className="skg-board-brand__logo-chip" aria-hidden="true">
@@ -2610,7 +2622,8 @@ export function AdRecreationBoard({
               />
             </div>
           </section>
-        </div>
+      </div>
+      </div>
       </div>
       </div>
       <LibraryDrawer