feat: refine generation workspace experience

src/features/ecommerce/EcommerceVideoWorkspace.tsx

@@ -120,6 +120,7 @@ export default function EcommerceVideoWorkspace({
   const [error, setError] = useState<string | null>(null);
   const [actionNotice, setActionNotice] = useState<string | null>(null);
   const [previewMedia, setPreviewMedia] = useState<{ url: string; type: "image" | "video" } | null>(null);
+  const [flowZoom, setFlowZoom] = useState(1);
   const abortControllerRef = useRef<AbortController | null>(null);
   const renderAbortRef = useRef({ current: false });
   const actionNoticeTimerRef = useRef<number | null>(null);
@@ -616,6 +617,12 @@ export default function EcommerceVideoWorkspace({
           })}
         </div>
 
+        <div className="ecom-video-flowbar__zoom">
+          <button type="button" onClick={() => setFlowZoom((z) => Math.max(0.25, z - 0.1))} disabled={flowZoom <= 0.25} aria-label="缩小">−</button>
+          <span>{Math.round(flowZoom * 100)}%</span>
+          <button type="button" onClick={() => setFlowZoom((z) => Math.min(2, z + 0.1))} disabled={flowZoom >= 2} aria-label="放大">+</button>
+        </div>
+
         <div className="ecom-video-flowbar__actions">
           {onOpenHistory ? (
             <button type="button" className="ecom-video-flow-action ecom-video-flow-action--ghost" onClick={onOpenHistory} title="生成记录">
@@ -660,9 +667,10 @@ export default function EcommerceVideoWorkspace({
 
       {/* ── Flow canvas ──────────────────────────────────── */}
       <section className="ecom-video-flow-canvas" aria-label="视频分镜流程图">
+        <div style={{ zoom: flowZoom, flexShrink: 0, display: "flex", alignItems: "flex-start", justifyContent: "center", minWidth: "max-content" }}>
         {!sourceImage ? (
           <div className="ecom-video-empty">
-            <span>上传商品图并点击“一键策划”开始</span>
+            <span>上传商品图并点击"一键策划"开始</span>
           </div>
         ) : (
           <div className="ecom-video-tree">
@@ -778,6 +786,7 @@ export default function EcommerceVideoWorkspace({
             </div>
           </div>
         )}
+        </div>
 
         {/* ── Delivery dock ────────────────────────────── */}
         {primaryVideo ? (