diff --git a/components/canvas/RealtimeCanvasDialog.tsx b/components/canvas/RealtimeCanvasDialog.tsx
index 22d0cc274..7603ad1ea 100644
--- a/components/canvas/RealtimeCanvasDialog.tsx
+++ b/components/canvas/RealtimeCanvasDialog.tsx
@@ -1,14 +1,36 @@
 "use client";
 
 import {
+  Circle as CircleIcon,
+  Eraser,
+  FolderOpen,
+  Layers3,
+  Loader2,
+  MousePointer2,
+  Paintbrush,
+  Plus,
+  Redo2,
+  Save,
+  Send,
+  Slash,
+  SlidersHorizontal,
+  Sparkles,
+  Square,
+  Undo2,
+  Upload,
+  X,
+} from "lucide-react";
+import {
+  type ChangeEvent,
+  type PointerEvent as ReactPointerEvent,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
-  type ChangeEvent,
-  type PointerEvent as ReactPointerEvent,
 } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -16,35 +38,22 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { Slider } from "@/components/ui/slider";
 import { Textarea } from "@/components/ui/textarea";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-import { buildImageProxyUrl } from "@/lib/image-delivery";
 import {
-  FolderOpen,
-  Eraser,
-  Layers3,
-  Loader2,
-  MousePointer2,
-  Paintbrush,
-  Plus,
-  Square,
-  Circle as CircleIcon,
-  Slash,
-  Upload,
-  Sparkles,
-  Save,
-  SlidersHorizontal,
-  Undo2,
-  Redo2,
-  Send,
-  X,
-} from "lucide-react";
-import { toast } from "sonner";
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { buildImageProxyUrl } from "@/lib/image-delivery";
+import { cn } from "@/lib/utils";
 
 type RealtimeConfig = {
   transport: {
@@ -70,7 +79,13 @@ type RealtimeConfig = {
 };
 
 type RealtimeStatus = "idle" | "connecting" | "live" | "error";
-type RealtimeBrushMode = "select" | "brush" | "eraser" | "rect" | "circle" | "line";
+type RealtimeBrushMode =
+  | "select"
+  | "brush"
+  | "eraser"
+  | "rect"
+  | "circle"
+  | "line";
 type LayerResizeHandle = "nw" | "ne" | "sw" | "se";
 
 type ImageLayer = {
@@ -155,7 +170,10 @@ function readRealtimeProjectsFromStorage() {
 
 function writeRealtimeProjectsToStorage(projects: SavedRealtimeProject[]) {
   if (typeof window === "undefined") return;
-  window.localStorage.setItem(REALTIME_PROJECTS_STORAGE_KEY, JSON.stringify(projects));
+  window.localStorage.setItem(
+    REALTIME_PROJECTS_STORAGE_KEY,
+    JSON.stringify(projects)
+  );
 }
 
 const defaultRealtimeConfig: RealtimeConfig = {
@@ -186,7 +204,7 @@ function isShapeMode(mode: RealtimeBrushMode) {
 }
 
 function createSessionSeed() {
-  return Math.floor(Math.random() * 2147483647);
+  return Math.floor(Math.random() * 2_147_483_647);
 }
 
 function imageDataHasVisiblePixels(imageData: ImageData) {
@@ -224,7 +242,9 @@ async function canvasToJpegDataUri(
     }
 
     tempCtx.fillStyle = rawColor;
-    const normalized = String(tempCtx.fillStyle || "").trim().toLowerCase();
+    const normalized = String(tempCtx.fillStyle || "")
+      .trim()
+      .toLowerCase();
     if (normalized.startsWith("#")) {
       const hex = normalized.slice(1);
       if (hex.length === 3) {
@@ -261,17 +281,27 @@ async function canvasToJpegDataUri(
     const longestSide = Math.max(sourceWidth, sourceHeight);
     const analysisScale = longestSide > 320 ? 320 / longestSide : 1;
     const analysisWidth = Math.max(48, Math.round(sourceWidth * analysisScale));
-    const analysisHeight = Math.max(48, Math.round(sourceHeight * analysisScale));
+    const analysisHeight = Math.max(
+      48,
+      Math.round(sourceHeight * analysisScale)
+    );
     const analysisCanvas = document.createElement("canvas");
     analysisCanvas.width = analysisWidth;
     analysisCanvas.height = analysisHeight;
-    const analysisCtx = analysisCanvas.getContext("2d", { willReadFrequently: true });
+    const analysisCtx = analysisCanvas.getContext("2d", {
+      willReadFrequently: true,
+    });
     if (!analysisCtx) return null;
     analysisCtx.fillStyle = backgroundColor;
     analysisCtx.fillRect(0, 0, analysisWidth, analysisHeight);
     analysisCtx.drawImage(canvas, 0, 0, analysisWidth, analysisHeight);
 
-    const imageData = analysisCtx.getImageData(0, 0, analysisWidth, analysisHeight);
+    const imageData = analysisCtx.getImageData(
+      0,
+      0,
+      analysisWidth,
+      analysisHeight
+    );
     const data = imageData.data;
     const totalPixels = analysisWidth * analysisHeight;
     const mask = new Uint8Array(totalPixels);
@@ -436,8 +466,12 @@ async function canvasToJpegDataUri(
     const boxWidth = Math.max(1, boxRight - boxX);
     const boxHeight = Math.max(1, boxBottom - boxY);
     const foregroundRatio = Math.min(1, bestArea / totalPixels);
-    const paddingRatio = foregroundRatio < 0.08 ? 0.34 : foregroundRatio < 0.2 ? 0.28 : 0.22;
-    const padding = Math.max(16, Math.floor(Math.max(boxWidth, boxHeight) * paddingRatio));
+    const paddingRatio =
+      foregroundRatio < 0.08 ? 0.34 : foregroundRatio < 0.2 ? 0.28 : 0.22;
+    const padding = Math.max(
+      16,
+      Math.floor(Math.max(boxWidth, boxHeight) * paddingRatio)
+    );
     const x = Math.max(0, boxX - padding);
     const y = Math.max(0, boxY - padding);
     const right = Math.min(sourceWidth, boxRight + padding);
@@ -462,7 +496,8 @@ async function canvasToJpegDataUri(
 
   const autoCropEnabled = Boolean(options?.autoCrop && cropBox);
   const longestSide = Math.max(drawSourceWidth, drawSourceHeight);
-  const scale = longestSide > maxInputResolution ? maxInputResolution / longestSide : 1;
+  const scale =
+    longestSide > maxInputResolution ? maxInputResolution / longestSide : 1;
   const exportWidth = autoCropEnabled
     ? Math.max(512, maxInputResolution)
     : Math.max(1, Math.round(drawSourceWidth * scale));
@@ -483,7 +518,10 @@ async function canvasToJpegDataUri(
 
   if (autoCropEnabled) {
     const fitRatio = (cropBox?.foregroundRatio || 0) < 0.12 ? 0.9 : 0.94;
-    const fitScale = Math.min((exportWidth * fitRatio) / drawSourceWidth, (exportHeight * fitRatio) / drawSourceHeight);
+    const fitScale = Math.min(
+      (exportWidth * fitRatio) / drawSourceWidth,
+      (exportHeight * fitRatio) / drawSourceHeight
+    );
     const targetWidth = Math.max(1, Math.round(drawSourceWidth * fitScale));
     const targetHeight = Math.max(1, Math.round(drawSourceHeight * fitScale));
     const targetX = Math.round((exportWidth - targetWidth) / 2);
@@ -688,7 +726,9 @@ export function RealtimeCanvasDialog({
   const pendingFlushModeRef = useRef<FlushMode | null>(null);
   const pendingFlushForceRef = useRef(false);
   const latencyEmaRef = useRef<number | null>(null);
-  const baseThrottleMsRef = useRef<number>(defaultRealtimeConfig.transport.throttleInterval);
+  const baseThrottleMsRef = useRef<number>(
+    defaultRealtimeConfig.transport.throttleInterval
+  );
   const pumpFlushRef = useRef<(() => void) | null>(null);
   const warningMessageRef = useRef("");
   const seqRef = useRef(0);
@@ -696,7 +736,9 @@ export function RealtimeCanvasDialog({
   const lastRenderedSeqRef = useRef(0);
   const layerRenderSeqRef = useRef(0);
   const metricsQueueRef = useRef<any[]>([]);
-  const sessionIdRef = useRef(`rt-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`);
+  const sessionIdRef = useRef(
+    `rt-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
+  );
   const seedRef = useRef<number>(createSessionSeed());
   const hasLoadedInitialImageRef = useRef(false);
   const canvasBackgroundRef = useRef(CANVAS_BACKGROUND);
@@ -706,7 +748,7 @@ export function RealtimeCanvasDialog({
   const sidebarDraggingLayerIdRef = useRef<string | null>(null);
   const drawingHasContentRef = useRef(false);
   const dragDepthRef = useRef(0);
-  
+
   // History Management
   const historyRef = useRef<HistorySnapshot[]>([]);
   const historyIndexRef = useRef(-1);
@@ -722,11 +764,15 @@ export function RealtimeCanvasDialog({
   const [previewUrl, setPreviewUrl] = useState("");
   const [brushMode, setBrushMode] = useState<RealtimeBrushMode>("select");
   const [brushColor, setBrushColor] = useState<string>(DEFAULT_BRUSH_COLOR);
-  const [canvasBackground, setCanvasBackground] = useState<string>(canvasBackgroundRef.current);
+  const [canvasBackground, setCanvasBackground] = useState<string>(
+    canvasBackgroundRef.current
+  );
   const [imageLayers, setImageLayers] = useState<ImageLayer[]>([]);
   const [selectedLayerId, setSelectedLayerId] = useState<string>(DRAW_LAYER_ID);
   const [brushSize, setBrushSize] = useState(6);
-  const [savedProjects, setSavedProjects] = useState<SavedRealtimeProject[]>([]);
+  const [savedProjects, setSavedProjects] = useState<SavedRealtimeProject[]>(
+    []
+  );
   const [projectPanelOpen, setProjectPanelOpen] = useState(false);
   const [saveProjectDialogOpen, setSaveProjectDialogOpen] = useState(false);
   const [pendingProjectName, setPendingProjectName] = useState("");
@@ -739,11 +785,13 @@ export function RealtimeCanvasDialog({
   const [siteLogo, setSiteLogo] = useState<string | null>(null);
 
   const statusBadge = useMemo(() => {
-    if (status === "live") return { label: "实时中", className: "bg-emerald-50 text-emerald-700" };
+    if (status === "live")
+      return { label: "实时中", className: "bg-emerald-50 text-emerald-700" };
     if (status === "connecting") {
       return { label: "连接中", className: "bg-blue-50 text-blue-700" };
     }
-    if (status === "error") return { label: "异常", className: "bg-rose-50 text-rose-700" };
+    if (status === "error")
+      return { label: "异常", className: "bg-rose-50 text-rose-700" };
     return { label: "待启动", className: "bg-zinc-100 text-zinc-600" };
   }, [status]);
 
@@ -764,7 +812,10 @@ export function RealtimeCanvasDialog({
         }
         if (typeof data.siteLogo === "string" && data.siteLogo.trim()) {
           setSiteLogo(data.siteLogo.trim());
-        } else if (typeof data.siteLogoDark === "string" && data.siteLogoDark.trim()) {
+        } else if (
+          typeof data.siteLogoDark === "string" &&
+          data.siteLogoDark.trim()
+        ) {
           setSiteLogo(data.siteLogoDark.trim());
         }
       })
@@ -786,7 +837,10 @@ export function RealtimeCanvasDialog({
 
   const flushMetrics = useCallback(async () => {
     if (!open || metricsQueueRef.current.length === 0) return;
-    const events = metricsQueueRef.current.splice(0, metricsQueueRef.current.length);
+    const events = metricsQueueRef.current.splice(
+      0,
+      metricsQueueRef.current.length
+    );
     try {
       await fetch("/api/realtime/metrics", {
         method: "POST",
@@ -824,7 +878,9 @@ export function RealtimeCanvasDialog({
   const loadRenderableImage = useCallback((src: string) => {
     return new Promise<HTMLImageElement>((resolve, reject) => {
       const image = new Image();
-      const resolvedSrc = /^https?:\/\//i.test(src) ? buildImageProxyUrl(src) : src;
+      const resolvedSrc = /^https?:\/\//i.test(src)
+        ? buildImageProxyUrl(src)
+        : src;
       image.crossOrigin = "anonymous";
       image.onload = () => resolve(image);
       image.onerror = () => reject(new Error("图层图片加载失败"));
@@ -848,7 +904,10 @@ export function RealtimeCanvasDialog({
       for (const layer of imageLayersRef.current) {
         try {
           const image = await loadRenderableImage(layer.src);
-          if (options?.renderSeq && options.renderSeq !== layerRenderSeqRef.current) {
+          if (
+            options?.renderSeq &&
+            options.renderSeq !== layerRenderSeqRef.current
+          ) {
             ctx.restore();
             return false;
           }
@@ -870,16 +929,28 @@ export function RealtimeCanvasDialog({
     if (!ctx) return;
     const renderSeq = layerRenderSeqRef.current + 1;
     layerRenderSeqRef.current = renderSeq;
-    const cssWidth = Math.max(1, parseFloat(layerCanvas.style.width) || layerCanvas.width);
-    const cssHeight = Math.max(1, parseFloat(layerCanvas.style.height) || layerCanvas.height);
+    const cssWidth = Math.max(
+      1,
+      Number.parseFloat(layerCanvas.style.width) || layerCanvas.width
+    );
+    const cssHeight = Math.max(
+      1,
+      Number.parseFloat(layerCanvas.style.height) || layerCanvas.height
+    );
     await drawImageLayersToContext(ctx, cssWidth, cssHeight, { renderSeq });
   }, [drawImageLayersToContext]);
 
   const buildCompositeCanvas = useCallback(async () => {
     const drawingCanvas = canvasRef.current;
     if (!drawingCanvas) return null;
-    const cssWidth = Math.max(1, parseFloat(drawingCanvas.style.width) || drawingCanvas.width);
-    const cssHeight = Math.max(1, parseFloat(drawingCanvas.style.height) || drawingCanvas.height);
+    const cssWidth = Math.max(
+      1,
+      Number.parseFloat(drawingCanvas.style.width) || drawingCanvas.width
+    );
+    const cssHeight = Math.max(
+      1,
+      Number.parseFloat(drawingCanvas.style.height) || drawingCanvas.height
+    );
     const dpr = Math.max(1, drawingCanvas.width / cssWidth);
 
     const compositeCanvas = document.createElement("canvas");
@@ -915,7 +986,11 @@ export function RealtimeCanvasDialog({
       const canvasHeight = Math.max(1, rect.height);
       const maxWidth = canvasWidth * 0.82;
       const maxHeight = canvasHeight * 0.82;
-      const scale = Math.min(maxWidth / image.width, maxHeight / image.height, 1);
+      const scale = Math.min(
+        maxWidth / image.width,
+        maxHeight / image.height,
+        1
+      );
       const drawWidth = Math.max(24, image.width * scale);
       const drawHeight = Math.max(24, image.height * scale);
       const offsetX = (canvasWidth - drawWidth) / 2;
@@ -937,7 +1012,11 @@ export function RealtimeCanvasDialog({
   );
 
   const findLayerAtPoint = useCallback((point: { x: number; y: number }) => {
-    for (let index = imageLayersRef.current.length - 1; index >= 0; index -= 1) {
+    for (
+      let index = imageLayersRef.current.length - 1;
+      index >= 0;
+      index -= 1
+    ) {
       const layer = imageLayersRef.current[index];
       const withinX = point.x >= layer.x && point.x <= layer.x + layer.width;
       const withinY = point.y >= layer.y && point.y <= layer.y + layer.height;
@@ -949,7 +1028,10 @@ export function RealtimeCanvasDialog({
   }, []);
 
   const getResizeHandleAtPoint = useCallback(
-    (point: { x: number; y: number }, layer: ImageLayer | null): LayerResizeHandle | null => {
+    (
+      point: { x: number; y: number },
+      layer: ImageLayer | null
+    ): LayerResizeHandle | null => {
       if (!layer) return null;
       const handleSize = 14;
       const half = handleSize / 2;
@@ -961,8 +1043,10 @@ export function RealtimeCanvasDialog({
       ];
 
       for (const handle of handles) {
-        const withinX = point.x >= handle.x - half && point.x <= handle.x + half;
-        const withinY = point.y >= handle.y - half && point.y <= handle.y + half;
+        const withinX =
+          point.x >= handle.x - half && point.x <= handle.x + half;
+        const withinY =
+          point.y >= handle.y - half && point.y <= handle.y + half;
         if (withinX && withinY) {
           return handle.key;
         }
@@ -973,24 +1057,34 @@ export function RealtimeCanvasDialog({
     []
   );
 
-  const updateLayerPosition = useCallback((layerId: string, x: number, y: number) => {
-    const nextLayers = imageLayersRef.current.map((layer) =>
-      layer.id === layerId ? { ...layer, x, y } : layer
-    );
-    imageLayersRef.current = nextLayers;
-    setImageLayers(nextLayers);
-    return nextLayers;
-  }, []);
+  const updateLayerPosition = useCallback(
+    (layerId: string, x: number, y: number) => {
+      const nextLayers = imageLayersRef.current.map((layer) =>
+        layer.id === layerId ? { ...layer, x, y } : layer
+      );
+      imageLayersRef.current = nextLayers;
+      setImageLayers(nextLayers);
+      return nextLayers;
+    },
+    []
+  );
 
   const resizeLayerFromHandle = useCallback(
-    (layerId: string, point: { x: number; y: number }, origin: NonNullable<typeof layerResizeOriginRef.current>) => {
+    (
+      layerId: string,
+      point: { x: number; y: number },
+      origin: NonNullable<typeof layerResizeOriginRef.current>
+    ) => {
       const canvas = canvasRef.current;
       if (!canvas) return;
 
       const rect = canvas.getBoundingClientRect();
       const canvasWidth = Math.max(1, rect.width);
       const canvasHeight = Math.max(1, rect.height);
-      const aspectRatio = Math.max(0.01, origin.layerWidth / Math.max(1, origin.layerHeight));
+      const aspectRatio = Math.max(
+        0.01,
+        origin.layerWidth / Math.max(1, origin.layerHeight)
+      );
       const minSize = 24;
 
       let anchorX = origin.layerX;
@@ -1032,14 +1126,22 @@ export function RealtimeCanvasDialog({
         targetWidth = targetHeight * aspectRatio;
       }
 
-      const fitRatio = Math.min(1, maxWidth / targetWidth, maxHeight / targetHeight);
+      const fitRatio = Math.min(
+        1,
+        maxWidth / targetWidth,
+        maxHeight / targetHeight
+      );
       targetWidth = Math.max(minSize, targetWidth * fitRatio);
       targetHeight = Math.max(minSize, targetHeight * fitRatio);
 
       const nextX =
-        origin.handle === "ne" || origin.handle === "se" ? anchorX : anchorX - targetWidth;
+        origin.handle === "ne" || origin.handle === "se"
+          ? anchorX
+          : anchorX - targetWidth;
       const nextY =
-        origin.handle === "sw" || origin.handle === "se" ? anchorY : anchorY - targetHeight;
+        origin.handle === "sw" || origin.handle === "se"
+          ? anchorY
+          : anchorY - targetHeight;
 
       const nextLayers = imageLayersRef.current.map((layer) =>
         layer.id === layerId
@@ -1099,41 +1201,48 @@ export function RealtimeCanvasDialog({
     });
   }, []);
 
-  const saveHistory = useCallback((layersOverride?: ImageLayer[], backgroundOverride?: string) => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext("2d", { willReadFrequently: true });
-    if (!ctx) return;
+  const saveHistory = useCallback(
+    (layersOverride?: ImageLayer[], backgroundOverride?: string) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d", { willReadFrequently: true });
+      if (!ctx) return;
 
-    // If we are not at the end of history, truncate future history
-    if (historyIndexRef.current < historyRef.current.length - 1) {
-      historyRef.current = historyRef.current.slice(0, historyIndexRef.current + 1);
-    }
+      // If we are not at the end of history, truncate future history
+      if (historyIndexRef.current < historyRef.current.length - 1) {
+        historyRef.current = historyRef.current.slice(
+          0,
+          historyIndexRef.current + 1
+        );
+      }
 
-    try {
-      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-      drawingHasContentRef.current = imageDataHasVisiblePixels(imageData);
-      historyRef.current.push({
-        imageData,
-        imageLayers: cloneImageLayers(layersOverride || imageLayersRef.current),
-        canvasBackground: backgroundOverride || canvasBackgroundRef.current,
-      });
-      historyIndexRef.current = historyRef.current.length - 1;
-    } catch (error) {
-      console.warn("[RealtimeCanvas] saveHistory skipped:", error);
-      return;
-    }
+      try {
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        drawingHasContentRef.current = imageDataHasVisiblePixels(imageData);
+        historyRef.current.push({
+          imageData,
+          imageLayers: cloneImageLayers(
+            layersOverride || imageLayersRef.current
+          ),
+          canvasBackground: backgroundOverride || canvasBackgroundRef.current,
+        });
+        historyIndexRef.current = historyRef.current.length - 1;
+      } catch (error) {
+        console.warn("[RealtimeCanvas] saveHistory skipped:", error);
+        return;
+      }
 
-    // Limit history size
-    if (historyRef.current.length > 50) {
-      historyRef.current.shift();
-      historyIndexRef.current--;
-    }
-
-    setCanUndo(historyIndexRef.current > 0);
-    setCanRedo(false);
-  }, []);
+      // Limit history size
+      if (historyRef.current.length > 50) {
+        historyRef.current.shift();
+        historyIndexRef.current--;
+      }
 
+      setCanUndo(historyIndexRef.current > 0);
+      setCanRedo(false);
+    },
+    []
+  );
 
   const markCanvasDirty = useCallback((region?: NormalizedRegion | null) => {
     dirtyRef.current = true;
@@ -1157,7 +1266,11 @@ export function RealtimeCanvasDialog({
   );
 
   const markCanvasDirtyStroke = useCallback(
-    (from: { x: number; y: number }, to: { x: number; y: number }, lineWidth: number) => {
+    (
+      from: { x: number; y: number },
+      to: { x: number; y: number },
+      lineWidth: number
+    ) => {
       const pad = Math.max(6, Math.ceil(lineWidth * 1.2));
       markCanvasDirtyRect({
         minX: Math.min(from.x, to.x) - pad,
@@ -1219,7 +1332,8 @@ export function RealtimeCanvasDialog({
         const shouldUseMask =
           Boolean(dirtyRegionAtSend) &&
           mode !== "refine" &&
-          (dirtyRegionAtSend?.width || 0) * (dirtyRegionAtSend?.height || 0) < 0.92;
+          (dirtyRegionAtSend?.width || 0) * (dirtyRegionAtSend?.height || 0) <
+            0.92;
         const maskImageUrl =
           shouldUseMask && dirtyRegionAtSend
             ? await createMaskDataUri(
@@ -1273,12 +1387,15 @@ export function RealtimeCanvasDialog({
           throw new Error(payload.message || payload.error || "实时生成失败");
         }
 
-        const nextPreviewUrl = String(payload.imageDataURI || payload.imageUrl || "");
+        const nextPreviewUrl = String(
+          payload.imageDataURI || payload.imageUrl || ""
+        );
         if (!nextPreviewUrl) {
           throw new Error("实时生成未返回图像");
         }
 
-        const startedAt = requestStartMapRef.current.get(requestId) || Date.now();
+        const startedAt =
+          requestStartMapRef.current.get(requestId) || Date.now();
         const latencyMs = Date.now() - startedAt;
         requestStartMapRef.current.delete(requestId);
 
@@ -1304,7 +1421,9 @@ export function RealtimeCanvasDialog({
 
         const previousLatency = latencyEmaRef.current;
         const nextLatency =
-          previousLatency === null ? latencyMs : previousLatency * 0.72 + latencyMs * 0.28;
+          previousLatency === null
+            ? latencyMs
+            : previousLatency * 0.72 + latencyMs * 0.28;
         latencyEmaRef.current = nextLatency;
         const computedThrottle = Math.round(
           Math.max(baseThrottleMsRef.current, Math.min(520, nextLatency * 0.45))
@@ -1352,7 +1471,15 @@ export function RealtimeCanvasDialog({
         }
       }
     },
-    [adaptiveThrottleMs, buildCompositeCanvas, config, hasRenderableInput, open, prompt, pushMetric]
+    [
+      adaptiveThrottleMs,
+      buildCompositeCanvas,
+      config,
+      hasRenderableInput,
+      open,
+      prompt,
+      pushMetric,
+    ]
   );
 
   const pumpFlush = useCallback(() => {
@@ -1403,12 +1530,22 @@ export function RealtimeCanvasDialog({
 
   const reorderLayersFromSidebar = useCallback(
     (draggedLayerId: string, targetLayerId: string) => {
-      if (!draggedLayerId || !targetLayerId || draggedLayerId === targetLayerId) return;
+      if (!draggedLayerId || !targetLayerId || draggedLayerId === targetLayerId)
+        return;
 
       const displayLayers = [...imageLayersRef.current].reverse();
-      const sourceIndex = displayLayers.findIndex((layer) => layer.id === draggedLayerId);
-      const targetIndex = displayLayers.findIndex((layer) => layer.id === targetLayerId);
-      if (sourceIndex === -1 || targetIndex === -1 || sourceIndex === targetIndex) return;
+      const sourceIndex = displayLayers.findIndex(
+        (layer) => layer.id === draggedLayerId
+      );
+      const targetIndex = displayLayers.findIndex(
+        (layer) => layer.id === targetLayerId
+      );
+      if (
+        sourceIndex === -1 ||
+        targetIndex === -1 ||
+        sourceIndex === targetIndex
+      )
+        return;
 
       const nextDisplayLayers = [...displayLayers];
       const [movedLayer] = nextDisplayLayers.splice(sourceIndex, 1);
@@ -1455,7 +1592,13 @@ export function RealtimeCanvasDialog({
       scheduleFlush(true);
       return nextLayerBatch.length;
     },
-    [createPlacedLayer, fileToDataUrl, markCanvasDirty, saveHistory, scheduleFlush]
+    [
+      createPlacedLayer,
+      fileToDataUrl,
+      markCanvasDirty,
+      saveHistory,
+      scheduleFlush,
+    ]
   );
 
   const triggerGenerate = useCallback(() => {
@@ -1470,38 +1613,45 @@ export function RealtimeCanvasDialog({
 
   const refreshSavedProjects = useCallback(() => {
     const projects = readRealtimeProjectsFromStorage().sort(
-      (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+      (a, b) =>
+        new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
     );
     setSavedProjects(projects);
     return projects;
   }, []);
 
-  const loadDrawingLayerFromDataUrl = useCallback(async (dataUrl: string) => {
-    if (!dataUrl) {
+  const loadDrawingLayerFromDataUrl = useCallback(
+    async (dataUrl: string) => {
+      if (!dataUrl) {
+        clearDrawingCanvas();
+        drawingHasContentRef.current = false;
+        return;
+      }
+
+      const canvas = canvasRef.current;
+      const ctx = canvas?.getContext("2d");
+      if (!canvas || !ctx) return;
+
       clearDrawingCanvas();
-      drawingHasContentRef.current = false;
-      return;
-    }
-
-    const canvas = canvasRef.current;
-    const ctx = canvas?.getContext("2d");
-    if (!canvas || !ctx) return;
-
-    clearDrawingCanvas();
-    const image = await loadRenderableImage(dataUrl);
-    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
-    drawingHasContentRef.current = true;
-  }, [clearDrawingCanvas, loadRenderableImage]);
+      const image = await loadRenderableImage(dataUrl);
+      ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+      drawingHasContentRef.current = true;
+    },
+    [clearDrawingCanvas, loadRenderableImage]
+  );
 
   const openSavedProject = useCallback(
     async (projectId: string) => {
-      const project = readRealtimeProjectsFromStorage().find((item) => item.id === projectId);
+      const project = readRealtimeProjectsFromStorage().find(
+        (item) => item.id === projectId
+      );
       if (!project) {
         toast.error("未找到项目");
         return;
       }
 
-      canvasBackgroundRef.current = project.canvasBackground || CANVAS_BACKGROUND;
+      canvasBackgroundRef.current =
+        project.canvasBackground || CANVAS_BACKGROUND;
       setCanvasBackground(project.canvasBackground || CANVAS_BACKGROUND);
       const nextLayers = cloneImageLayers(project.imageLayers || []);
       imageLayersRef.current = nextLayers;
@@ -1522,7 +1672,9 @@ export function RealtimeCanvasDialog({
   );
 
   const deleteSavedProject = useCallback((projectId: string) => {
-    const nextProjects = readRealtimeProjectsFromStorage().filter((item) => item.id !== projectId);
+    const nextProjects = readRealtimeProjectsFromStorage().filter(
+      (item) => item.id !== projectId
+    );
     writeRealtimeProjectsToStorage(nextProjects);
     setSavedProjects(nextProjects);
     toast.success("项目已删除");
@@ -1564,7 +1716,8 @@ export function RealtimeCanvasDialog({
       imageLayers: cloneImageLayers(imageLayersRef.current),
       drawingLayerDataUrl: exportDrawingLayerDataUrl(),
       coverImageUrl,
-      previewUrl: previewUrl || compositeCanvas?.toDataURL("image/jpeg", 0.72) || "",
+      previewUrl:
+        previewUrl || compositeCanvas?.toDataURL("image/jpeg", 0.72) || "",
     };
     const nextProjects = [project, ...existingProjects].slice(0, 30);
     writeRealtimeProjectsToStorage(nextProjects);
@@ -1606,8 +1759,8 @@ export function RealtimeCanvasDialog({
     if (!open) return;
 
     const handlePaste = async (event: ClipboardEvent) => {
-      const imageFiles = Array.from(event.clipboardData?.files || []).filter((file) =>
-        file.type.startsWith("image/")
+      const imageFiles = Array.from(event.clipboardData?.files || []).filter(
+        (file) => file.type.startsWith("image/")
       );
       if (imageFiles.length === 0) return;
       event.preventDefault();
@@ -1635,21 +1788,24 @@ export function RealtimeCanvasDialog({
 
   const undo = useCallback(() => {
     if (historyIndexRef.current <= 0) return;
-    
+
     historyIndexRef.current--;
     const snapshot = historyRef.current[historyIndexRef.current];
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext("2d");
-    
+
     if (canvas && ctx && snapshot) {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       ctx.putImageData(snapshot.imageData, 0, 0);
-      drawingHasContentRef.current = imageDataHasVisiblePixels(snapshot.imageData);
+      drawingHasContentRef.current = imageDataHasVisiblePixels(
+        snapshot.imageData
+      );
       canvasBackgroundRef.current = snapshot.canvasBackground;
       setCanvasBackground(snapshot.canvasBackground);
       setImageLayers(cloneImageLayers(snapshot.imageLayers));
       setSelectedLayerId((current) =>
-        current !== DRAW_LAYER_ID && snapshot.imageLayers.some((layer) => layer.id === current)
+        current !== DRAW_LAYER_ID &&
+        snapshot.imageLayers.some((layer) => layer.id === current)
           ? current
           : DRAW_LAYER_ID
       );
@@ -1666,16 +1822,19 @@ export function RealtimeCanvasDialog({
     const snapshot = historyRef.current[historyIndexRef.current];
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext("2d");
-    
+
     if (canvas && ctx && snapshot) {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       ctx.putImageData(snapshot.imageData, 0, 0);
-      drawingHasContentRef.current = imageDataHasVisiblePixels(snapshot.imageData);
+      drawingHasContentRef.current = imageDataHasVisiblePixels(
+        snapshot.imageData
+      );
       canvasBackgroundRef.current = snapshot.canvasBackground;
       setCanvasBackground(snapshot.canvasBackground);
       setImageLayers(cloneImageLayers(snapshot.imageLayers));
       setSelectedLayerId((current) =>
-        current !== DRAW_LAYER_ID && snapshot.imageLayers.some((layer) => layer.id === current)
+        current !== DRAW_LAYER_ID &&
+        snapshot.imageLayers.some((layer) => layer.id === current)
           ? current
           : DRAW_LAYER_ID
       );
@@ -1697,10 +1856,16 @@ export function RealtimeCanvasDialog({
     historyRef.current = [];
     historyIndexRef.current = -1;
     saveHistory();
-  }, [clearDrawingCanvas, renderImageLayers, revokeAllLayerObjectUrls, saveHistory]);
+  }, [
+    clearDrawingCanvas,
+    renderImageLayers,
+    revokeAllLayerObjectUrls,
+    saveHistory,
+  ]);
 
   const drawInitialImage = useCallback(async () => {
-    if (!open || !initialImageUrl || hasLoadedInitialImageRef.current) return false;
+    if (!open || !initialImageUrl || hasLoadedInitialImageRef.current)
+      return false;
     const nextLayer = await createPlacedLayer({
       src: initialImageUrl,
       name: "参考图",
@@ -1748,21 +1913,29 @@ export function RealtimeCanvasDialog({
     previewCtx.setTransform(1, 0, 0, 1, 0, 0);
     previewCtx.scale(dpr, dpr);
     ctx.clearRect(0, 0, canvas.width, canvas.height);
-    imageLayerCtx.clearRect(0, 0, imageLayerCanvas.width, imageLayerCanvas.height);
+    imageLayerCtx.clearRect(
+      0,
+      0,
+      imageLayerCanvas.width,
+      imageLayerCanvas.height
+    );
     previewCtx.clearRect(0, 0, previewCanvas.width, previewCanvas.height);
     resetCanvas();
     hasLoadedInitialImageRef.current = false;
   }, [resetCanvas]);
 
-  const getCanvasPoint = useCallback((event: ReactPointerEvent<HTMLCanvasElement>) => {
-    const canvas = canvasRef.current;
-    if (!canvas) return null;
-    const rect = canvas.getBoundingClientRect();
-    return {
-      x: event.clientX - rect.left,
-      y: event.clientY - rect.top,
-    };
-  }, []);
+  const getCanvasPoint = useCallback(
+    (event: ReactPointerEvent<HTMLCanvasElement>) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return null;
+      const rect = canvas.getBoundingClientRect();
+      return {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
+      };
+    },
+    []
+  );
 
   const drawStroke = useCallback(
     (from: { x: number; y: number }, to: { x: number; y: number }) => {
@@ -1924,7 +2097,7 @@ export function RealtimeCanvasDialog({
   const handlePointerLeave = useCallback(() => {
     const wasDrawing = pointerDownRef.current;
     if (cursorRef.current) {
-      cursorRef.current.style.opacity = '0';
+      cursorRef.current.style.opacity = "0";
     }
     if (draggingLayerIdRef.current || resizingLayerIdRef.current) {
       return;
@@ -1956,7 +2129,9 @@ export function RealtimeCanvasDialog({
       const point = getCanvasPoint(event);
       if (point && cursorRef.current) {
         const resizeHandle =
-          brushMode === "select" ? getResizeHandleAtPoint(point, selectedImageLayer) : null;
+          brushMode === "select"
+            ? getResizeHandleAtPoint(point, selectedImageLayer)
+            : null;
         event.currentTarget.style.cursor = resizeHandle
           ? getResizeCursor(resizeHandle)
           : brushMode === "select" && selectedImageLayer
@@ -1980,7 +2155,11 @@ export function RealtimeCanvasDialog({
       if (!pointerDownRef.current) return;
       if (!point || !lastPointRef.current) return;
       if (resizingLayerIdRef.current && layerResizeOriginRef.current) {
-        resizeLayerFromHandle(resizingLayerIdRef.current, point, layerResizeOriginRef.current);
+        resizeLayerFromHandle(
+          resizingLayerIdRef.current,
+          point,
+          layerResizeOriginRef.current
+        );
         markCanvasDirty(null);
         scheduleFlush(false, false, "preview");
         return;
@@ -1994,9 +2173,11 @@ export function RealtimeCanvasDialog({
 
         const rect = canvas.getBoundingClientRect();
         const nextX =
-          layerDragOriginRef.current.layerX + (point.x - layerDragOriginRef.current.pointerX);
+          layerDragOriginRef.current.layerX +
+          (point.x - layerDragOriginRef.current.pointerX);
         const nextY =
-          layerDragOriginRef.current.layerY + (point.y - layerDragOriginRef.current.pointerY);
+          layerDragOriginRef.current.layerY +
+          (point.y - layerDragOriginRef.current.pointerY);
         const maxX = Math.max(0, rect.width - activeLayer.width);
         const maxY = Math.max(0, rect.height - activeLayer.height);
 
@@ -2121,7 +2302,9 @@ export function RealtimeCanvasDialog({
   const deleteSelectedImageLayer = useCallback(() => {
     if (selectedLayerId === DRAW_LAYER_ID) return;
 
-    const nextLayers = imageLayersRef.current.filter((layer) => layer.id !== selectedLayerId);
+    const nextLayers = imageLayersRef.current.filter(
+      (layer) => layer.id !== selectedLayerId
+    );
     if (nextLayers.length === imageLayersRef.current.length) return;
 
     imageLayersRef.current = nextLayers;
@@ -2144,20 +2327,20 @@ export function RealtimeCanvasDialog({
         activeElement?.isContentEditable;
 
       // Undo/Redo
-      if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
+      if ((e.metaKey || e.ctrlKey) && e.key === "z") {
         e.preventDefault();
         if (e.shiftKey) {
-           redo();
+          redo();
         } else {
-           undo();
+          undo();
         }
       }
       // Brush Size
-      if (e.key === '[') {
-         setBrushSize(prev => Math.max(2, prev - 2));
+      if (e.key === "[") {
+        setBrushSize((prev) => Math.max(2, prev - 2));
       }
-      if (e.key === ']') {
-         setBrushSize(prev => Math.min(50, prev + 2));
+      if (e.key === "]") {
+        setBrushSize((prev) => Math.min(50, prev + 2));
       }
       if (
         !isTypingTarget &&
@@ -2168,8 +2351,8 @@ export function RealtimeCanvasDialog({
         deleteSelectedImageLayer();
       }
     };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
   }, [deleteSelectedImageLayer, open, redo, selectedLayerId, undo]);
 
   useEffect(() => {
@@ -2214,11 +2397,18 @@ export function RealtimeCanvasDialog({
     const start = async () => {
       try {
         let configResponse: Response | null = null;
-        let configJson: Partial<RealtimeConfig> & { message?: string; retryAfter?: number } = {};
+        let configJson: Partial<RealtimeConfig> & {
+          message?: string;
+          retryAfter?: number;
+        } = {};
 
         for (let attempt = 0; attempt < 3; attempt += 1) {
-          configResponse = await fetch("/api/realtime/config", { cache: "no-store" });
-          configJson = (await configResponse.json().catch(() => ({}))) as Partial<RealtimeConfig> & {
+          configResponse = await fetch("/api/realtime/config", {
+            cache: "no-store",
+          });
+          configJson = (await configResponse
+            .json()
+            .catch(() => ({}))) as Partial<RealtimeConfig> & {
             message?: string;
             retryAfter?: number;
           };
@@ -2230,8 +2420,13 @@ export function RealtimeCanvasDialog({
             throw new Error(configJson.message || "无法加载实时配置");
           }
 
-          const retryDelay = retryAfterSeconds > 0 ? retryAfterSeconds * 1000 : 700 * (attempt + 1);
-          await new Promise((resolve) => window.setTimeout(resolve, retryDelay));
+          const retryDelay =
+            retryAfterSeconds > 0
+              ? retryAfterSeconds * 1000
+              : 700 * (attempt + 1);
+          await new Promise((resolve) =>
+            window.setTimeout(resolve, retryDelay)
+          );
         }
 
         if (!configResponse?.ok) {
@@ -2245,17 +2440,23 @@ export function RealtimeCanvasDialog({
               configJson.transport?.throttleInterval ||
               defaultRealtimeConfig.transport.throttleInterval,
             maxBuffering:
-              configJson.transport?.maxBuffering || defaultRealtimeConfig.transport.maxBuffering,
+              configJson.transport?.maxBuffering ||
+              defaultRealtimeConfig.transport.maxBuffering,
           },
           image: {
             maxInputResolution:
-              configJson.image?.maxInputResolution || defaultRealtimeConfig.image.maxInputResolution,
-            jpegQuality: configJson.image?.jpegQuality || defaultRealtimeConfig.image.jpegQuality,
+              configJson.image?.maxInputResolution ||
+              defaultRealtimeConfig.image.maxInputResolution,
+            jpegQuality:
+              configJson.image?.jpegQuality ||
+              defaultRealtimeConfig.image.jpegQuality,
           },
           model: {
             id: configJson.model?.id || defaultRealtimeConfig.model.id,
             defaults: {
-              steps: configJson.model?.defaults?.steps || defaultRealtimeConfig.model.defaults.steps,
+              steps:
+                configJson.model?.defaults?.steps ||
+                defaultRealtimeConfig.model.defaults.steps,
               cfgScale:
                 configJson.model?.defaults?.cfgScale ||
                 defaultRealtimeConfig.model.defaults.cfgScale,
@@ -2288,7 +2489,9 @@ export function RealtimeCanvasDialog({
         if (cancelled) return;
         console.error("[RealtimeCanvas] init failed:", error);
         setStatus("error");
-        setStatusMessage(error instanceof Error ? error.message : "实时初始化失败");
+        setStatusMessage(
+          error instanceof Error ? error.message : "实时初始化失败"
+        );
       }
     };
 
@@ -2350,32 +2553,45 @@ export function RealtimeCanvasDialog({
     [importFilesAsLayers]
   );
 
-  const handleDragEnter = useCallback((event: React.DragEvent<HTMLDivElement>) => {
-    if (!Array.from(event.dataTransfer?.types || []).includes("Files")) return;
-    event.preventDefault();
-    dragDepthRef.current += 1;
-    setIsDragImportActive(true);
-  }, []);
+  const handleDragEnter = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      if (!Array.from(event.dataTransfer?.types || []).includes("Files"))
+        return;
+      event.preventDefault();
+      dragDepthRef.current += 1;
+      setIsDragImportActive(true);
+    },
+    []
+  );
 
-  const handleDragOver = useCallback((event: React.DragEvent<HTMLDivElement>) => {
-    if (!Array.from(event.dataTransfer?.types || []).includes("Files")) return;
-    event.preventDefault();
-    event.dataTransfer.dropEffect = "copy";
-    setIsDragImportActive(true);
-  }, []);
+  const handleDragOver = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      if (!Array.from(event.dataTransfer?.types || []).includes("Files"))
+        return;
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "copy";
+      setIsDragImportActive(true);
+    },
+    []
+  );
 
-  const handleDragLeave = useCallback((event: React.DragEvent<HTMLDivElement>) => {
-    if (!Array.from(event.dataTransfer?.types || []).includes("Files")) return;
-    event.preventDefault();
-    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
-    if (dragDepthRef.current === 0) {
-      setIsDragImportActive(false);
-    }
-  }, []);
+  const handleDragLeave = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      if (!Array.from(event.dataTransfer?.types || []).includes("Files"))
+        return;
+      event.preventDefault();
+      dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+      if (dragDepthRef.current === 0) {
+        setIsDragImportActive(false);
+      }
+    },
+    []
+  );
 
   const handleDropUpload = useCallback(
     async (event: React.DragEvent<HTMLDivElement>) => {
-      if (!Array.from(event.dataTransfer?.types || []).includes("Files")) return;
+      if (!Array.from(event.dataTransfer?.types || []).includes("Files"))
+        return;
       event.preventDefault();
       dragDepthRef.current = 0;
       setIsDragImportActive(false);
@@ -2414,7 +2630,9 @@ export function RealtimeCanvasDialog({
     }
 
     const anchor = document.createElement("a");
-    anchor.href = /^https?:\/\//i.test(previewUrl) ? buildImageProxyUrl(previewUrl) : previewUrl;
+    anchor.href = /^https?:\/\//i.test(previewUrl)
+      ? buildImageProxyUrl(previewUrl)
+      : previewUrl;
     anchor.download = `realtime-preview-${Date.now()}.png`;
     anchor.rel = "noopener";
     anchor.click();
@@ -2437,7 +2655,8 @@ export function RealtimeCanvasDialog({
 
   const compactToolButtonClass =
     "h-9 w-9 rounded-[16px] text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-900";
-  const compactToolButtonActiveClass = "bg-black text-white hover:bg-black hover:text-white";
+  const compactToolButtonActiveClass =
+    "bg-black text-white hover:bg-black hover:text-white";
   const currentModeLabel =
     brushMode === "select"
       ? "鼠标"
@@ -2465,1008 +2684,1082 @@ export function RealtimeCanvasDialog({
 
   const content = (
     <>
-        {standalone ? (
-          <div className="sr-only">
-            <h2>实时画布</h2>
-            <p>左侧绘制草图，右侧实时预览。</p>
-          </div>
-        ) : (
-          <DialogHeader className="sr-only">
-            <DialogTitle>实时画布</DialogTitle>
-            <DialogDescription>左侧绘制草图，右侧实时预览。</DialogDescription>
-          </DialogHeader>
-        )}
-        <div className="hidden absolute left-4 right-4 top-4 z-50 pointer-events-none">
-          <div className="pointer-events-auto rounded-[24px] border border-black/10 bg-white/98 shadow-[0_12px_36px_rgba(15,23,42,0.1)]">
-            <div className="flex items-center gap-2 overflow-x-auto px-2 py-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-              <div className="flex h-10 shrink-0 items-center gap-2 rounded-full border border-black/10 bg-zinc-50 px-3">
-                <div className="flex items-center gap-2 pr-1">
-                  {siteLogo ? (
-                    <img
-                      src={/^https?:\/\//i.test(siteLogo) ? buildImageProxyUrl(siteLogo) : siteLogo}
-                      alt={siteName}
-                      className="h-5 w-5 rounded object-contain"
-                    />
-                  ) : (
-                    <div className="flex h-5 w-5 items-center justify-center rounded bg-zinc-900 text-white">
-                      <Sparkles className="h-3 w-3" />
-                    </div>
-                  )}
-                  <span className="max-w-[11rem] truncate text-sm font-semibold text-zinc-900">
-                    {siteName}
-                  </span>
-                </div>
+      {standalone ? (
+        <div className="sr-only">
+          <h2>实时画布</h2>
+          <p>左侧绘制草图，右侧实时预览。</p>
+        </div>
+      ) : (
+        <DialogHeader className="sr-only">
+          <DialogTitle>实时画布</DialogTitle>
+          <DialogDescription>左侧绘制草图，右侧实时预览。</DialogDescription>
+        </DialogHeader>
+      )}
+      <div className="pointer-events-none absolute top-4 right-4 left-4 z-50 hidden">
+        <div className="pointer-events-auto rounded-[24px] border border-border/40 bg-background/95 shadow-xl backdrop-blur-md">
+          <div className="flex items-center gap-2 overflow-x-auto px-2 py-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+            <div className="flex h-10 shrink-0 items-center gap-2 rounded-full border border-border/40 bg-background/80 px-3 shadow-sm backdrop-blur-md">
+              <div className="flex items-center gap-2 pr-1">
+                {siteLogo ? (
+                  <img
+                    alt={siteName}
+                    className="h-5 w-5 rounded object-contain"
+                    src={
+                      /^https?:\/\//i.test(siteLogo)
+                        ? buildImageProxyUrl(siteLogo)
+                        : siteLogo
+                    }
+                  />
+                ) : (
+                  <div className="flex h-5 w-5 items-center justify-center rounded bg-zinc-900 text-white">
+                    <Sparkles className="h-3 w-3" />
+                  </div>
+                )}
+                <span className="max-w-[11rem] truncate font-semibold text-sm text-zinc-900">
+                  {siteName}
+                </span>
+              </div>
+              <span
+                className={cn(
+                  "flex items-center gap-1.5 rounded-full px-2 py-1 font-medium text-xs",
+                  statusBadge.className
+                )}
+              >
                 <span
                   className={cn(
-                    "flex items-center gap-1.5 rounded-full px-2 py-1 text-xs font-medium",
-                    statusBadge.className
+                    "h-2 w-2 rounded-full",
+                    status === "live"
+                      ? "animate-pulse bg-emerald-500"
+                      : status === "error"
+                        ? "bg-rose-500"
+                        : "bg-zinc-400"
                   )}
-                >
-                  <span
-                    className={cn(
-                      "h-2 w-2 rounded-full",
-                      status === "live"
-                        ? "bg-emerald-500 animate-pulse"
-                        : status === "error"
-                          ? "bg-rose-500"
-                          : "bg-zinc-400"
-                    )}
-                  />
-                  {statusBadge.label}
-                </span>
-                <span className="hidden text-xs text-zinc-500 sm:inline">
-                  延迟 {adaptiveThrottleMs}ms
-                </span>
-              </div>
-
-              <div className="flex h-10 shrink-0 items-center gap-0.5 rounded-full border border-black/10 bg-white px-1">
-                <Button
-                  type="button"
-                  size="icon"
-                  variant="ghost"
-                  className="h-8 w-8 rounded-full"
-                  onClick={() => void saveCurrentProject()}
-                  title="保存项目"
-                >
-                  <Save className="h-4 w-4" />
-                </Button>
-                <Button
-                  type="button"
-                  size="icon"
-                  variant="ghost"
-                  className="h-8 w-8 rounded-full"
-                  onClick={() => {
-                    refreshSavedProjects();
-                    setProjectPanelOpen((openState) => !openState);
-                  }}
-                  title="项目列表"
-                >
-                  <FolderOpen className="h-4 w-4" />
-                </Button>
-                <Button
-                  type="button"
-                  size="icon"
-                  variant="ghost"
-                  className="h-8 w-8 rounded-full"
-                  onClick={startBlankProject}
-                  title="新建空白"
-                >
-                  <Plus className="h-4 w-4" />
-                </Button>
-              </div>
-
-              <div className="flex h-10 shrink-0 items-center gap-0.5 rounded-full border border-black/10 bg-white px-1">
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className={cn(
-                    "h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
-                    brushMode === "select" && "bg-black text-white hover:bg-black"
-                  )}
-                  onClick={() => {
-                    setSelectedLayerId(DRAW_LAYER_ID);
-                    setBrushMode("select");
-                  }}
-                  title="鼠标"
-                >
-                  <MousePointer2 className="h-4.5 w-4.5" />
-                </Button>
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className={cn(
-                    "h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
-                    brushMode === "brush" && "bg-black text-white hover:bg-black"
-                  )}
-                  onClick={() => {
-                    setSelectedLayerId(DRAW_LAYER_ID);
-                    setBrushMode("brush");
-                  }}
-                  title="画笔"
-                >
-                  <Paintbrush className="h-5 w-5" />
-                </Button>
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className={cn(
-                    "h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
-                    brushMode === "eraser" && "bg-black text-white hover:bg-black"
-                  )}
-                  onClick={() => {
-                    setSelectedLayerId(DRAW_LAYER_ID);
-                    setBrushMode("eraser");
-                  }}
-                  title="橡皮"
-                >
-                  <Eraser className="h-5 w-5" />
-                </Button>
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className={cn(
-                    "h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
-                    brushMode === "rect" && "bg-black text-white hover:bg-black"
-                  )}
-                  onClick={() => {
-                    setSelectedLayerId(DRAW_LAYER_ID);
-                    setBrushMode("rect");
-                  }}
-                  title="矩形"
-                >
-                  <Square className="h-5 w-5" />
-                </Button>
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className={cn(
-                    "h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
-                    brushMode === "circle" && "bg-black text-white hover:bg-black"
-                  )}
-                  onClick={() => {
-                    setSelectedLayerId(DRAW_LAYER_ID);
-                    setBrushMode("circle");
-                  }}
-                  title="圆形"
-                >
-                  <CircleIcon className="h-5 w-5" />
-                </Button>
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className={cn(
-                    "h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
-                    brushMode === "line" && "bg-black text-white hover:bg-black"
-                  )}
-                  onClick={() => {
-                    setSelectedLayerId(DRAW_LAYER_ID);
-                    setBrushMode("line");
-                  }}
-                  title="直线"
-                >
-                  <Slash className="h-5 w-5" />
-                </Button>
-              </div>
-
-              <div className="flex h-10 shrink-0 items-center gap-2 rounded-full border border-black/10 bg-zinc-50 px-3">
-                <button
-                  type="button"
-                  className="flex h-8 items-center gap-2 rounded-full border border-black/10 bg-white px-3 text-xs font-medium text-zinc-700 transition hover:bg-zinc-50"
-                  onClick={() => colorInputRef.current?.click()}
-                  title="选择画笔颜色"
-                >
-                  <span
-                    className="h-5 w-5 rounded-full border border-black/15 shadow-inner"
-                    style={{ backgroundColor: brushColor }}
-                  />
-                  颜色
-                </button>
-                <input
-                  ref={colorInputRef}
-                  type="color"
-                  value={brushColor}
-                  onChange={(event) => setBrushColor(event.target.value)}
-                  className="sr-only"
-                  title="自定义颜色"
                 />
-                <div className="flex w-[210px] items-center gap-3 rounded-full border border-black/10 bg-white px-3 py-1.5">
-                  <span className="whitespace-nowrap text-xs font-medium text-zinc-600">
-                    粗细 {brushSize}
-                  </span>
-                  <Slider
-                    value={[brushSize]}
-                    min={2}
-                    max={50}
-                    step={1}
-                    onValueChange={([val]) => setBrushSize(val)}
-                    className="min-w-[140px] flex-1"
-                    trackClassName="h-2.5 bg-zinc-200 shadow-inner"
-                    rangeClassName="bg-sky-500"
-                    thumbClassName="h-5 w-5 border border-zinc-300 bg-white shadow-sm"
-                  />
-                </div>
-              </div>
-
-              <div className="flex h-10 shrink-0 items-center gap-0.5 rounded-full border border-black/10 bg-white px-1">
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100"
-                  onClick={undo}
-                  disabled={!canUndo}
-                  title="撤销"
-                >
-                  <Undo2 className="h-5 w-5" />
-                </Button>
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100"
-                  onClick={redo}
-                  disabled={!canRedo}
-                  title="重做"
-                >
-                  <Redo2 className="h-5 w-5" />
-                </Button>
-              </div>
-
-              {standalone ? (
-                <div className="flex h-10 shrink-0 items-center rounded-full border border-black bg-black px-1 shadow-sm">
-                  <Button
-                    type="button"
-                    size="icon"
-                    variant="ghost"
-                    className="h-8 w-8 rounded-full text-white hover:bg-white/10 hover:text-white"
-                    onClick={() => onOpenChange(false)}
-                    title="关闭页面"
-                  >
-                    <X className="h-4 w-4" />
-                  </Button>
-                </div>
-              ) : null}
-
+                {statusBadge.label}
+              </span>
+              <span className="hidden text-xs text-zinc-500 sm:inline">
+                延迟 {adaptiveThrottleMs}ms
+              </span>
             </div>
+
+            <div className="flex h-10 shrink-0 items-center gap-0.5 rounded-full border border-border/40 bg-background/80 px-1 shadow-sm backdrop-blur-md">
+              <Button
+                className="h-8 w-8 rounded-full"
+                onClick={() => void saveCurrentProject()}
+                size="icon"
+                title="保存项目"
+                type="button"
+                variant="ghost"
+              >
+                <Save className="h-4 w-4" />
+              </Button>
+              <Button
+                className="h-8 w-8 rounded-full"
+                onClick={() => {
+                  refreshSavedProjects();
+                  setProjectPanelOpen((openState) => !openState);
+                }}
+                size="icon"
+                title="项目列表"
+                type="button"
+                variant="ghost"
+              >
+                <FolderOpen className="h-4 w-4" />
+              </Button>
+              <Button
+                className="h-8 w-8 rounded-full"
+                onClick={startBlankProject}
+                size="icon"
+                title="新建空白"
+                type="button"
+                variant="ghost"
+              >
+                <Plus className="h-4 w-4" />
+              </Button>
+            </div>
+
+            <div className="flex h-10 shrink-0 items-center gap-0.5 rounded-full border border-border/40 bg-background/80 px-1 shadow-sm backdrop-blur-md">
+              <Button
+                className={cn(
+                  "h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
+                  brushMode === "select" && "bg-black text-white hover:bg-black"
+                )}
+                onClick={() => {
+                  setSelectedLayerId(DRAW_LAYER_ID);
+                  setBrushMode("select");
+                }}
+                size="icon"
+                title="鼠标"
+                variant="ghost"
+              >
+                <MousePointer2 className="h-4.5 w-4.5" />
+              </Button>
+              <Button
+                className={cn(
+                  "h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
+                  brushMode === "brush" && "bg-black text-white hover:bg-black"
+                )}
+                onClick={() => {
+                  setSelectedLayerId(DRAW_LAYER_ID);
+                  setBrushMode("brush");
+                }}
+                size="icon"
+                title="画笔"
+                variant="ghost"
+              >
+                <Paintbrush className="h-5 w-5" />
+              </Button>
+              <Button
+                className={cn(
+                  "h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
+                  brushMode === "eraser" && "bg-black text-white hover:bg-black"
+                )}
+                onClick={() => {
+                  setSelectedLayerId(DRAW_LAYER_ID);
+                  setBrushMode("eraser");
+                }}
+                size="icon"
+                title="橡皮"
+                variant="ghost"
+              >
+                <Eraser className="h-5 w-5" />
+              </Button>
+              <Button
+                className={cn(
+                  "h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
+                  brushMode === "rect" && "bg-black text-white hover:bg-black"
+                )}
+                onClick={() => {
+                  setSelectedLayerId(DRAW_LAYER_ID);
+                  setBrushMode("rect");
+                }}
+                size="icon"
+                title="矩形"
+                variant="ghost"
+              >
+                <Square className="h-5 w-5" />
+              </Button>
+              <Button
+                className={cn(
+                  "h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
+                  brushMode === "circle" && "bg-black text-white hover:bg-black"
+                )}
+                onClick={() => {
+                  setSelectedLayerId(DRAW_LAYER_ID);
+                  setBrushMode("circle");
+                }}
+                size="icon"
+                title="圆形"
+                variant="ghost"
+              >
+                <CircleIcon className="h-5 w-5" />
+              </Button>
+              <Button
+                className={cn(
+                  "h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
+                  brushMode === "line" && "bg-black text-white hover:bg-black"
+                )}
+                onClick={() => {
+                  setSelectedLayerId(DRAW_LAYER_ID);
+                  setBrushMode("line");
+                }}
+                size="icon"
+                title="直线"
+                variant="ghost"
+              >
+                <Slash className="h-5 w-5" />
+              </Button>
+            </div>
+
+            <div className="flex h-10 shrink-0 items-center gap-2 rounded-full border border-border/40 bg-background/80 px-3 shadow-sm backdrop-blur-md">
+              <button
+                className="flex h-8 items-center gap-2 rounded-full border border-border/10 bg-background px-3 font-medium text-foreground text-xs transition hover:bg-muted"
+                onClick={() => colorInputRef.current?.click()}
+                title="选择画笔颜色"
+                type="button"
+              >
+                <span
+                  className="h-5 w-5 rounded-full border border-border/20 shadow-inner"
+                  style={{ backgroundColor: brushColor }}
+                />
+                颜色
+              </button>
+              <input
+                className="sr-only"
+                onChange={(event) => setBrushColor(event.target.value)}
+                ref={colorInputRef}
+                title="自定义颜色"
+                type="color"
+                value={brushColor}
+              />
+              <div className="flex w-[210px] items-center gap-3 rounded-full border border-border/10 bg-background px-3 py-1.5">
+                <span className="whitespace-nowrap font-medium text-xs text-zinc-600">
+                  粗细 {brushSize}
+                </span>
+                <Slider
+                  className="min-w-[140px] flex-1"
+                  max={50}
+                  min={2}
+                  onValueChange={([val]) => setBrushSize(val)}
+                  rangeClassName="bg-sky-500"
+                  step={1}
+                  thumbClassName="h-5 w-5 border border-zinc-300 bg-white shadow-sm"
+                  trackClassName="h-2.5 bg-zinc-200 shadow-inner"
+                  value={[brushSize]}
+                />
+              </div>
+            </div>
+
+            <div className="flex h-10 shrink-0 items-center gap-0.5 rounded-full border border-border/40 bg-background/80 px-1 shadow-sm backdrop-blur-md">
+              <Button
+                className="h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100"
+                disabled={!canUndo}
+                onClick={undo}
+                size="icon"
+                title="撤销"
+                variant="ghost"
+              >
+                <Undo2 className="h-5 w-5" />
+              </Button>
+              <Button
+                className="h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100"
+                disabled={!canRedo}
+                onClick={redo}
+                size="icon"
+                title="重做"
+                variant="ghost"
+              >
+                <Redo2 className="h-5 w-5" />
+              </Button>
+            </div>
+
+            {standalone ? (
+              <div className="flex h-10 shrink-0 items-center rounded-full border border-black bg-black px-1 shadow-sm">
+                <Button
+                  className="h-8 w-8 rounded-full text-white hover:bg-white/10 hover:text-white"
+                  onClick={() => onOpenChange(false)}
+                  size="icon"
+                  title="关闭页面"
+                  type="button"
+                  variant="ghost"
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            ) : null}
           </div>
         </div>
-        {saveProjectDialogOpen ? (
-          <div className="absolute left-1/2 top-24 z-40 w-[22rem] max-w-[calc(100vw-2rem)] -translate-x-1/2 rounded-[24px] border border-black/10 bg-white/95 p-4 shadow-2xl backdrop-blur-xl">
-            <div className="flex items-center justify-between">
-              <div>
-                <div className="text-sm font-semibold text-zinc-900">保存项目</div>
-                <div className="text-xs text-zinc-400">请输入项目名称后保存当前画布</div>
+      </div>
+      {saveProjectDialogOpen ? (
+        <div className="-translate-x-1/2 absolute top-24 left-1/2 z-40 w-[22rem] max-w-[calc(100vw-2rem)] rounded-[24px] border border-border/40 bg-background/95 p-4 shadow-2xl backdrop-blur-xl">
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="font-semibold text-sm text-zinc-900">
+                保存项目
+              </div>
+              <div className="text-xs text-zinc-400">
+                请输入项目名称后保存当前画布
               </div>
-              <Button
-                type="button"
-                size="icon"
-                variant="ghost"
-                className="h-8 w-8 rounded-full"
-                onClick={() => setSaveProjectDialogOpen(false)}
-              >
-                <X className="h-4 w-4" />
-              </Button>
-            </div>
-            <Input
-              value={pendingProjectName}
-              onChange={(event) => setPendingProjectName(event.target.value)}
-              onKeyDown={(event) => {
-                if (event.key === "Enter") {
-                  event.preventDefault();
-                  void confirmSaveCurrentProject();
-                }
-              }}
-              placeholder="请输入项目名称"
-              className="mt-4 h-11 rounded-2xl border-black/10"
-              autoFocus
-            />
-            <div className="mt-4 flex gap-2">
-              <Button
-                type="button"
-                variant="outline"
-                className="h-10 flex-1 rounded-2xl"
-                onClick={() => setSaveProjectDialogOpen(false)}
-              >
-                取消
-              </Button>
-              <Button
-                type="button"
-                className="h-10 flex-1 rounded-2xl bg-black text-white hover:bg-black/90"
-                onClick={() => void confirmSaveCurrentProject()}
-              >
-                保存
-              </Button>
             </div>
+            <Button
+              className="h-8 w-8 rounded-full"
+              onClick={() => setSaveProjectDialogOpen(false)}
+              size="icon"
+              type="button"
+              variant="ghost"
+            >
+              <X className="h-4 w-4" />
+            </Button>
           </div>
-        ) : null}
-        {projectPanelOpen ? (
-          <div className="absolute left-4 top-20 z-40 w-[22rem] max-w-[calc(100vw-2rem)] rounded-[24px] border border-black/10 bg-white/95 p-4 shadow-2xl backdrop-blur-xl">
-            <div className="flex items-center justify-between">
-              <div>
-                <div className="text-sm font-semibold text-zinc-900">项目列表</div>
-                <div className="text-xs text-zinc-400">本地保存，便于下次继续编辑</div>
+          <Input
+            autoFocus
+            className="mt-4 h-11 rounded-2xl border-border/40 bg-background/50"
+            onChange={(event) => setPendingProjectName(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                void confirmSaveCurrentProject();
+              }
+            }}
+            placeholder="请输入项目名称"
+            value={pendingProjectName}
+          />
+          <div className="mt-4 flex gap-2">
+            <Button
+              className="h-10 flex-1 rounded-2xl"
+              onClick={() => setSaveProjectDialogOpen(false)}
+              type="button"
+              variant="outline"
+            >
+              取消
+            </Button>
+            <Button
+              className="h-10 flex-1 rounded-2xl bg-black text-white hover:bg-black/90"
+              onClick={() => void confirmSaveCurrentProject()}
+              type="button"
+            >
+              保存
+            </Button>
+          </div>
+        </div>
+      ) : null}
+      {projectPanelOpen ? (
+        <div className="absolute top-20 left-4 z-40 w-[22rem] max-w-[calc(100vw-2rem)] rounded-[24px] border border-border/40 bg-background/95 p-4 shadow-2xl backdrop-blur-xl">
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="font-semibold text-sm text-zinc-900">
+                项目列表
+              </div>
+              <div className="text-xs text-zinc-400">
+                本地保存，便于下次继续编辑
               </div>
-              <Button
-                type="button"
-                size="icon"
-                variant="ghost"
-                className="h-8 w-8 rounded-full"
-                onClick={() => setProjectPanelOpen(false)}
-              >
-                <X className="h-4 w-4" />
-              </Button>
             </div>
-            <div className="mt-4 max-h-[55vh] min-h-0 space-y-2 overflow-y-auto overscroll-contain pr-1">
-              {savedProjects.length === 0 ? (
-                <div className="rounded-2xl border border-dashed border-black/10 px-4 py-8 text-center text-sm text-zinc-400">
-                  暂无保存的项目
-                </div>
-              ) : (
-                savedProjects.map((project) => (
-                  <div key={project.id} className="rounded-2xl border border-black/10 bg-white p-2.5 shadow-sm">
-                    <div className="flex gap-3">
-                      <div className="h-16 w-16 overflow-hidden rounded-xl border border-black/10 bg-zinc-100">
-                        {project.coverImageUrl || project.previewUrl ? (
-                          <img
-                            src={
-                              /^https?:\/\//i.test(project.coverImageUrl || project.previewUrl || "")
-                                ? buildImageProxyUrl(project.coverImageUrl || project.previewUrl || "")
-                                : project.coverImageUrl || project.previewUrl || ""
-                            }
-                            alt={project.name}
-                            className="h-full w-full object-contain"
-                          />
-                        ) : (
-                          <div className="flex h-full items-center justify-center text-[11px] text-zinc-400">
-                            无预览
-                          </div>
-                        )}
-                      </div>
-                      <div className="min-w-0 flex-1 pt-1">
-                        <div className="truncate text-sm font-medium text-zinc-900">{project.name}</div>
-                      </div>
+            <Button
+              className="h-8 w-8 rounded-full"
+              onClick={() => setProjectPanelOpen(false)}
+              size="icon"
+              type="button"
+              variant="ghost"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+          <div className="mt-4 max-h-[55vh] min-h-0 space-y-2 overflow-y-auto overscroll-contain pr-1">
+            {savedProjects.length === 0 ? (
+              <div className="rounded-2xl border border-border/40 border-dashed px-4 py-8 text-center text-muted-foreground text-sm">
+                暂无保存的项目
+              </div>
+            ) : (
+              savedProjects.map((project) => (
+                <div
+                  className="rounded-2xl border border-black/10 bg-white p-2.5 shadow-sm"
+                  key={project.id}
+                >
+                  <div className="flex gap-3">
+                    <div className="h-16 w-16 overflow-hidden rounded-xl border border-border/10 bg-muted">
+                      {project.coverImageUrl || project.previewUrl ? (
+                        <img
+                          alt={project.name}
+                          className="h-full w-full object-contain"
+                          src={
+                            /^https?:\/\//i.test(
+                              project.coverImageUrl || project.previewUrl || ""
+                            )
+                              ? buildImageProxyUrl(
+                                  project.coverImageUrl ||
+                                    project.previewUrl ||
+                                    ""
+                                )
+                              : project.coverImageUrl ||
+                                project.previewUrl ||
+                                ""
+                          }
+                        />
+                      ) : (
+                        <div className="flex h-full items-center justify-center text-[11px] text-zinc-400">
+                          无预览
+                        </div>
+                      )}
                     </div>
-                    <div className="mt-3 flex gap-2">
-                      <Button
-                        type="button"
-                        size="sm"
-                        className="h-8 flex-1 rounded-xl"
-                        onClick={() => void openSavedProject(project.id)}
-                      >
-                        打开
-                      </Button>
-                      <Button
-                        type="button"
-                        size="sm"
-                        variant="outline"
-                        className="h-8 rounded-xl"
-                        onClick={() => deleteSavedProject(project.id)}
-                      >
-                        删除
-                      </Button>
+                    <div className="min-w-0 flex-1 pt-1">
+                      <div className="truncate font-medium text-sm text-zinc-900">
+                        {project.name}
+                      </div>
                     </div>
                   </div>
+                  <div className="mt-3 flex gap-2">
+                    <Button
+                      className="h-8 flex-1 rounded-xl"
+                      onClick={() => void openSavedProject(project.id)}
+                      size="sm"
+                      type="button"
+                    >
+                      打开
+                    </Button>
+                    <Button
+                      className="h-8 rounded-xl"
+                      onClick={() => deleteSavedProject(project.id)}
+                      size="sm"
+                      type="button"
+                      variant="outline"
+                    >
+                      删除
+                    </Button>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      ) : null}
+
+      {/* Main Canvas Area - Split View */}
+      <div className="relative flex h-full w-full bg-muted/30">
+        {/* Left: Input Canvas */}
+        <div className="relative flex flex-1 flex-col items-center justify-center overflow-hidden border-border/10 border-r">
+          <div
+            className="relative flex h-full w-full items-center justify-center bg-background"
+            onDragEnter={handleDragEnter}
+            onDragLeave={handleDragLeave}
+            onDragOver={handleDragOver}
+            onDrop={handleDropUpload}
+            ref={canvasWrapRef}
+          >
+            <div className="pattern-grid-lg pointer-events-none absolute inset-0 opacity-[0.03]" />
+            {isDragImportActive ? (
+              <div className="absolute inset-6 z-20 flex items-center justify-center rounded-[28px] border-2 border-sky-400 border-dashed bg-sky-50/90 font-medium text-sky-700 text-sm shadow-inner">
+                松开鼠标，上传图片到图层
+              </div>
+            ) : null}
+
+            <div className="relative">
+              <canvas
+                className="pointer-events-none block shadow-sm"
+                ref={imageLayerCanvasRef}
+              />
+              <canvas
+                className={cn(
+                  "absolute inset-0 block touch-none shadow-sm",
+                  brushMode === "select" && selectedImageLayer
+                    ? "cursor-move"
+                    : brushMode === "brush" || brushMode === "eraser"
+                      ? "cursor-none"
+                      : brushMode === "select"
+                        ? "cursor-default"
+                        : "cursor-crosshair"
+                )}
+                onPointerCancel={handlePointerUp}
+                onPointerDown={handlePointerDown}
+                onPointerEnter={handlePointerEnter}
+                onPointerLeave={handlePointerLeave}
+                onPointerMove={handlePointerMove}
+                onPointerUp={handlePointerUp}
+                ref={canvasRef}
+              />
+              <canvas
+                className="pointer-events-none absolute inset-0 touch-none"
+                ref={previewCanvasRef}
+              />
+              {selectedImageLayer && brushMode === "select" ? (
+                <div
+                  className="pointer-events-none absolute border border-sky-500 border-dashed shadow-[0_0_0_1px_rgba(14,165,233,0.25)]"
+                  style={{
+                    left: selectedImageLayer.x,
+                    top: selectedImageLayer.y,
+                    width: selectedImageLayer.width,
+                    height: selectedImageLayer.height,
+                  }}
+                />
+              ) : null}
+              {selectedImageLayer && brushMode === "select"
+                ? (
+                    [
+                      {
+                        key: "nw",
+                        left: selectedImageLayer.x,
+                        top: selectedImageLayer.y,
+                      },
+                      {
+                        key: "ne",
+                        left: selectedImageLayer.x + selectedImageLayer.width,
+                        top: selectedImageLayer.y,
+                      },
+                      {
+                        key: "sw",
+                        left: selectedImageLayer.x,
+                        top: selectedImageLayer.y + selectedImageLayer.height,
+                      },
+                      {
+                        key: "se",
+                        left: selectedImageLayer.x + selectedImageLayer.width,
+                        top: selectedImageLayer.y + selectedImageLayer.height,
+                      },
+                    ] as const
+                  ).map((handle) => (
+                    <div
+                      className="-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute z-20 h-3.5 w-3.5 rounded-full border border-white bg-black shadow-[0_2px_8px_rgba(0,0,0,0.2)]"
+                      key={handle.key}
+                      style={{
+                        left: handle.left,
+                        top: handle.top,
+                      }}
+                    />
+                  ))
+                : null}
+              {/* Custom Brush Cursor */}
+              <div
+                className="pointer-events-none absolute top-0 left-0 z-10 rounded-full border border-zinc-500/50 bg-zinc-500/10 backdrop-invert transition-opacity duration-75"
+                ref={cursorRef}
+                style={{
+                  width: brushSize,
+                  height: brushSize,
+                  opacity: 0,
+                  willChange: "transform, width, height",
+                }}
+              />
+            </div>
+          </div>
+          <div className="absolute top-28 bottom-4 left-4 z-10 flex w-16 max-w-[18vw] flex-col rounded-[24px] border border-border/40 bg-background/80 p-2 shadow-xl backdrop-blur-md">
+            <div className="flex items-center justify-center border-border/10 border-b pb-3">
+              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted text-foreground">
+                <Layers3 className="h-4 w-4" />
+              </div>
+            </div>
+            <div className="mt-2 flex flex-1 flex-col items-center space-y-2 overflow-y-auto py-1">
+              {imageLayers.length === 0 ? (
+                <div className="rounded-2xl border border-black/10 border-dashed px-1 py-4 text-center text-[10px] text-zinc-400 leading-4">
+                  暂无图层
+                </div>
+              ) : (
+                [...imageLayers].reverse().map((layer) => (
+                  <button
+                    className={cn(
+                      "flex h-12 w-12 shrink-0 items-center justify-center rounded-[18px] p-1.5 transition hover:bg-muted",
+                      selectedLayerId === layer.id
+                        ? "bg-muted shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)]"
+                        : ""
+                    )}
+                    draggable
+                    key={layer.id}
+                    onClick={() => setSelectedLayerId(layer.id)}
+                    onDragEnd={() => {
+                      sidebarDraggingLayerIdRef.current = null;
+                    }}
+                    onDragOver={(event) => {
+                      event.preventDefault();
+                      event.dataTransfer.dropEffect = "move";
+                    }}
+                    onDragStart={() => {
+                      sidebarDraggingLayerIdRef.current = layer.id;
+                    }}
+                    onDrop={(event) => {
+                      event.preventDefault();
+                      const draggingId = sidebarDraggingLayerIdRef.current;
+                      if (draggingId) {
+                        reorderLayersFromSidebar(draggingId, layer.id);
+                      }
+                      sidebarDraggingLayerIdRef.current = null;
+                    }}
+                    title={layer.name}
+                    type="button"
+                  >
+                    <img
+                      alt={layer.name}
+                      className="h-full w-full rounded-[14px] object-contain"
+                      src={
+                        /^https?:\/\//i.test(layer.src)
+                          ? buildImageProxyUrl(layer.src)
+                          : layer.src
+                      }
+                    />
+                  </button>
                 ))
               )}
             </div>
+            <Button
+              className="mt-2 h-10 rounded-xl bg-background px-0 hover:bg-muted"
+              onClick={() => uploadInputRef.current?.click()}
+              title="添加图片图层"
+              type="button"
+              variant="outline"
+            >
+              <Upload className="h-4 w-4" />
+            </Button>
           </div>
-        ) : null}
+        </div>
 
-        {/* Main Canvas Area - Split View */}
-        <div className="relative flex h-full w-full bg-[#f4f4f5] dark:bg-[#09090b]">
-          {/* Left: Input Canvas */}
-          <div className="relative flex-1 flex flex-col items-center justify-center overflow-hidden border-r border-border/10">
-             <div
-                ref={canvasWrapRef}
-                className="relative h-full w-full flex items-center justify-center bg-white dark:bg-[#18181b]"
-                onDragEnter={handleDragEnter}
-                onDragOver={handleDragOver}
-                onDragLeave={handleDragLeave}
-                onDrop={handleDropUpload}
-              >
-                <div className="absolute inset-0 pattern-grid-lg opacity-[0.03] pointer-events-none" />
-                {isDragImportActive ? (
-                  <div className="absolute inset-6 z-20 flex items-center justify-center rounded-[28px] border-2 border-dashed border-sky-400 bg-sky-50/90 text-sm font-medium text-sky-700 shadow-inner">
-                    松开鼠标，上传图片到图层
-                  </div>
-                ) : null}
-                
-                <div className="relative">
-                    <canvas
-                      ref={imageLayerCanvasRef}
-                      className="pointer-events-none shadow-sm block"
-                    />
-                    <canvas
-                      ref={canvasRef}
-                      className={cn(
-                        "absolute inset-0 touch-none shadow-sm block",
-                        brushMode === "select" && selectedImageLayer
-                          ? "cursor-move"
-                          : brushMode === "brush" || brushMode === "eraser"
-                            ? "cursor-none"
-                            : brushMode === "select"
-                              ? "cursor-default"
-                              : "cursor-crosshair"
-                      )}
-                      onPointerDown={handlePointerDown}
-                      onPointerMove={handlePointerMove}
-                      onPointerUp={handlePointerUp}
-                      onPointerCancel={handlePointerUp}
-                      onPointerEnter={handlePointerEnter}
-                      onPointerLeave={handlePointerLeave}
-                    />
-                    <canvas
-                      ref={previewCanvasRef}
-                      className="pointer-events-none absolute inset-0 touch-none"
-                    />
-                    {selectedImageLayer && brushMode === "select" ? (
-                      <div
-                        className="pointer-events-none absolute border border-dashed border-sky-500 shadow-[0_0_0_1px_rgba(14,165,233,0.25)]"
-                        style={{
-                          left: selectedImageLayer.x,
-                          top: selectedImageLayer.y,
-                          width: selectedImageLayer.width,
-                          height: selectedImageLayer.height,
-                        }}
-                      />
-                    ) : null}
-                    {selectedImageLayer && brushMode === "select"
-                      ? ([
-                          { key: "nw", left: selectedImageLayer.x, top: selectedImageLayer.y },
-                          {
-                            key: "ne",
-                            left: selectedImageLayer.x + selectedImageLayer.width,
-                            top: selectedImageLayer.y,
-                          },
-                          {
-                            key: "sw",
-                            left: selectedImageLayer.x,
-                            top: selectedImageLayer.y + selectedImageLayer.height,
-                          },
-                          {
-                            key: "se",
-                            left: selectedImageLayer.x + selectedImageLayer.width,
-                            top: selectedImageLayer.y + selectedImageLayer.height,
-                          },
-                        ] as const).map((handle) => (
-                          <div
-                            key={handle.key}
-                            className="pointer-events-none absolute z-20 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-white bg-black shadow-[0_2px_8px_rgba(0,0,0,0.2)]"
-                            style={{
-                              left: handle.left,
-                              top: handle.top,
-                            }}
-                          />
-                        ))
-                      : null}
-                    {/* Custom Brush Cursor */}
-                    <div 
-                        ref={cursorRef}
-                        className="pointer-events-none absolute top-0 left-0 rounded-full border border-zinc-500/50 bg-zinc-500/10 backdrop-invert transition-opacity duration-75 z-10"
-                        style={{ 
-                            width: brushSize, 
-                            height: brushSize, 
-                            opacity: 0,
-                            willChange: 'transform, width, height'
-                        }}
-                    />
-                </div>
-             </div>
-             <div className="absolute left-4 top-28 bottom-4 z-10 flex w-16 max-w-[18vw] flex-col rounded-[24px] border border-black/10 bg-white/96 p-2 shadow-[0_12px_36px_rgba(15,23,42,0.12)]">
-                <div className="flex items-center justify-center border-b border-black/10 pb-3">
-                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-50 text-zinc-900">
-                    <Layers3 className="h-4 w-4" />
-                  </div>
-                </div>
-                <div className="mt-2 flex flex-1 flex-col items-center space-y-2 overflow-y-auto py-1">
-                  {imageLayers.length === 0 ? (
-                    <div className="rounded-2xl border border-dashed border-black/10 px-1 py-4 text-center text-[10px] leading-4 text-zinc-400">
-                      暂无图层
-                    </div>
-                  ) : (
-                    [...imageLayers].reverse().map((layer) => (
-                      <button
-                        key={layer.id}
-                        type="button"
-                        draggable
-                        className={cn(
-                          "flex h-12 w-12 shrink-0 items-center justify-center rounded-[18px] p-1.5 transition hover:bg-zinc-50",
-                          selectedLayerId === layer.id
-                            ? "bg-zinc-100 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)]"
-                            : ""
-                        )}
-                        onClick={() => setSelectedLayerId(layer.id)}
-                        onDragStart={() => {
-                          sidebarDraggingLayerIdRef.current = layer.id;
-                        }}
-                        onDragEnd={() => {
-                          sidebarDraggingLayerIdRef.current = null;
-                        }}
-                        onDragOver={(event) => {
-                          event.preventDefault();
-                          event.dataTransfer.dropEffect = "move";
-                        }}
-                        onDrop={(event) => {
-                          event.preventDefault();
-                          const draggingId = sidebarDraggingLayerIdRef.current;
-                          if (draggingId) {
-                            reorderLayersFromSidebar(draggingId, layer.id);
-                          }
-                          sidebarDraggingLayerIdRef.current = null;
-                        }}
-                        title={layer.name}
-                      >
-                        <img
-                          src={/^https?:\/\//i.test(layer.src) ? buildImageProxyUrl(layer.src) : layer.src}
-                          alt={layer.name}
-                          className="h-full w-full rounded-[14px] object-contain"
-                        />
-                      </button>
-                    ))
-                  )}
-                </div>
+        {/* Right: Output Preview */}
+        <div className="relative flex flex-1 flex-col items-center justify-center overflow-hidden bg-muted/10">
+          <div className="relative flex h-full w-full items-center justify-center">
+            {previewUrl ? (
+              <img
+                alt="实时预览"
+                className="max-h-full max-w-full object-contain shadow-sm"
+                src={previewUrl}
+              />
+            ) : (
+              <div className="flex flex-col items-center justify-center gap-3 text-zinc-400">
+                {status === "connecting" ? (
+                  <>
+                    <Loader2 className="h-8 w-8 animate-spin opacity-50" />
+                    <span className="text-sm">Connecting...</span>
+                  </>
+                ) : (
+                  <>
+                    <Sparkles className="h-8 w-8 opacity-20" />
+                    <span className="text-sm">Start drawing to generate</span>
+                  </>
+                )}
+              </div>
+            )}
+            {previewUrl ? (
+              <div className="absolute right-5 bottom-5">
                 <Button
+                  className="h-10 rounded-full bg-background px-4 font-medium text-foreground text-sm shadow-lg hover:bg-muted"
+                  onClick={handleDownloadPreview}
+                  size="sm"
                   type="button"
-                  variant="outline"
-                  className="mt-2 h-10 rounded-xl bg-white px-0"
-                  onClick={() => uploadInputRef.current?.click()}
-                  title="添加图片图层"
                 >
-                  <Upload className="h-4 w-4" />
+                  下载图片
                 </Button>
-             </div>
+              </div>
+            ) : null}
           </div>
+        </div>
+      </div>
 
-          {/* Right: Output Preview */}
-          <div className="relative flex-1 flex flex-col items-center justify-center overflow-hidden bg-zinc-50 dark:bg-[#0c0c0e]">
-            <div className="relative h-full w-full flex items-center justify-center">
-              {previewUrl ? (
-                <img src={previewUrl} alt="实时预览" className="max-h-full max-w-full object-contain shadow-sm" />
-              ) : (
-                <div className="flex flex-col items-center justify-center text-zinc-400 gap-3">
-                   {status === "connecting" ? (
-                      <>
-                        <Loader2 className="h-8 w-8 animate-spin opacity-50" />
-                        <span className="text-sm">Connecting...</span>
-                      </>
-                   ) : (
-                      <>
-                        <Sparkles className="h-8 w-8 opacity-20" />
-                        <span className="text-sm">Start drawing to generate</span>
-                      </>
-                   )}
-                </div>
-              )}
-              {previewUrl ? (
-                <div className="absolute bottom-5 right-5">
+      <input
+        accept="image/*"
+        className="hidden"
+        multiple
+        onChange={handleSketchUpload}
+        ref={uploadInputRef}
+        type="file"
+      />
+      <div className="-translate-x-1/2 pointer-events-none absolute bottom-4 left-1/2 z-30 flex w-[min(600px,calc(100vw-2rem))] flex-col items-center gap-2.5">
+        <TooltipProvider delayDuration={120}>
+          <div className="pointer-events-auto flex w-full flex-wrap items-center justify-center gap-1.5">
+            <div className="flex items-center justify-center gap-1 rounded-[24px] border border-border/40 bg-background/80 px-1.5 py-1.5 shadow-xl backdrop-blur-md">
+              <Tooltip>
+                <TooltipTrigger asChild>
                   <Button
+                    className={cn(
+                      compactToolButtonClass,
+                      brushMode === "select" && compactToolButtonActiveClass
+                    )}
+                    onClick={() => {
+                      setSelectedLayerId(DRAW_LAYER_ID);
+                      setBrushMode("select");
+                    }}
+                    size="icon"
                     type="button"
-                    size="sm"
-                    className="h-10 rounded-full bg-white px-4 text-sm font-medium text-zinc-900 shadow-[0_10px_30px_rgba(15,23,42,0.12)] hover:bg-zinc-100"
-                    onClick={handleDownloadPreview}
+                    variant="ghost"
                   >
-                    下载图片
+                    <MousePointer2 className="h-4.5 w-4.5" />
                   </Button>
-                </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <div className="font-medium text-sm">鼠标</div>
+                  <div className="text-xs text-zinc-500">
+                    选择图层并拖动位置
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    className={cn(
+                      compactToolButtonClass,
+                      brushMode === "brush" && compactToolButtonActiveClass
+                    )}
+                    onClick={() => {
+                      setSelectedLayerId(DRAW_LAYER_ID);
+                      setBrushMode("brush");
+                    }}
+                    size="icon"
+                    type="button"
+                    variant="ghost"
+                  >
+                    <Paintbrush className="h-4.5 w-4.5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <div className="font-medium text-sm">画笔</div>
+                  <div className="text-xs text-zinc-500">在画布上自由绘制</div>
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    className={cn(
+                      compactToolButtonClass,
+                      brushMode === "eraser" && compactToolButtonActiveClass
+                    )}
+                    onClick={() => {
+                      setSelectedLayerId(DRAW_LAYER_ID);
+                      setBrushMode("eraser");
+                    }}
+                    size="icon"
+                    type="button"
+                    variant="ghost"
+                  >
+                    <Eraser className="h-4.5 w-4.5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <div className="font-medium text-sm">橡皮</div>
+                  <div className="text-xs text-zinc-500">擦除当前草图笔触</div>
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <Popover>
+                  <TooltipTrigger asChild>
+                    <PopoverTrigger asChild>
+                      <Button
+                        className={cn(
+                          compactToolButtonClass,
+                          isShapeMode(brushMode) && compactToolButtonActiveClass
+                        )}
+                        size="icon"
+                        type="button"
+                        variant="ghost"
+                      >
+                        <Square className="h-4.5 w-4.5" />
+                      </Button>
+                    </PopoverTrigger>
+                  </TooltipTrigger>
+                  <PopoverContent className="w-[220px] rounded-[18px] border-border/40 bg-background/95 p-3 shadow-xl backdrop-blur-md">
+                    <div className="mb-2 font-medium text-xs text-zinc-500">
+                      形状工具
+                    </div>
+                    <div className="grid grid-cols-3 gap-2">
+                      <Button
+                        className={cn(
+                          "h-10 rounded-xl",
+                          brushMode === "rect" &&
+                            "bg-black text-white hover:bg-black"
+                        )}
+                        onClick={() => {
+                          setSelectedLayerId(DRAW_LAYER_ID);
+                          setBrushMode("rect");
+                        }}
+                        type="button"
+                        variant="ghost"
+                      >
+                        <Square className="h-4.5 w-4.5" />
+                      </Button>
+                      <Button
+                        className={cn(
+                          "h-10 rounded-xl",
+                          brushMode === "circle" &&
+                            "bg-black text-white hover:bg-black"
+                        )}
+                        onClick={() => {
+                          setSelectedLayerId(DRAW_LAYER_ID);
+                          setBrushMode("circle");
+                        }}
+                        type="button"
+                        variant="ghost"
+                      >
+                        <CircleIcon className="h-4.5 w-4.5" />
+                      </Button>
+                      <Button
+                        className={cn(
+                          "h-10 rounded-xl",
+                          brushMode === "line" &&
+                            "bg-black text-white hover:bg-black"
+                        )}
+                        onClick={() => {
+                          setSelectedLayerId(DRAW_LAYER_ID);
+                          setBrushMode("line");
+                        }}
+                        type="button"
+                        variant="ghost"
+                      >
+                        <Slash className="h-4.5 w-4.5" />
+                      </Button>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+                <TooltipContent>
+                  <div className="font-medium text-sm">形状</div>
+                  <div className="text-xs text-zinc-500">矩形、圆形与直线</div>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+
+            <div className="flex items-center justify-center gap-1 rounded-[24px] border border-border/40 bg-background/80 px-1.5 py-1.5 shadow-xl backdrop-blur-md">
+              <Tooltip>
+                <Popover>
+                  <TooltipTrigger asChild>
+                    <PopoverTrigger asChild>
+                      <Button
+                        className={compactToolButtonClass}
+                        size="icon"
+                        type="button"
+                        variant="ghost"
+                      >
+                        <SlidersHorizontal className="h-4.5 w-4.5" />
+                      </Button>
+                    </PopoverTrigger>
+                  </TooltipTrigger>
+                  <PopoverContent className="w-[250px] rounded-[18px] border-border/40 bg-background/95 p-4 shadow-xl backdrop-blur-md">
+                    <div className="space-y-4">
+                      <div className="space-y-2">
+                        <div className="font-medium text-xs text-zinc-500">
+                          颜色
+                        </div>
+                        <button
+                          className="flex h-10 w-full items-center justify-between rounded-xl border border-black/10 bg-white px-3 font-medium text-sm text-zinc-700"
+                          onClick={() => colorInputRef.current?.click()}
+                          type="button"
+                        >
+                          <span>选择颜色</span>
+                          <span
+                            className="h-5 w-5 rounded-full border border-border/20 shadow-inner"
+                            style={{ backgroundColor: brushColor }}
+                          />
+                        </button>
+                        <input
+                          className="sr-only"
+                          onChange={(event) =>
+                            setBrushColor(event.target.value)
+                          }
+                          ref={colorInputRef}
+                          title="自定义颜色"
+                          type="color"
+                          value={brushColor}
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between font-medium text-xs text-zinc-500">
+                          <span>粗细</span>
+                          <span className="w-8 text-right text-zinc-900">
+                            {brushSize}
+                          </span>
+                        </div>
+                        <Slider
+                          className="w-full"
+                          max={50}
+                          min={2}
+                          onValueChange={([val]) => setBrushSize(val)}
+                          rangeClassName="bg-black"
+                          step={1}
+                          thumbClassName="h-5 w-5 border border-zinc-300 bg-white shadow-sm"
+                          trackClassName="h-2.5 bg-zinc-200 shadow-inner"
+                          value={[brushSize]}
+                        />
+                      </div>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+                <TooltipContent>
+                  <div className="font-medium text-sm">画笔设置</div>
+                  <div className="text-xs text-zinc-500">调整颜色和粗细</div>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+
+            <div className="flex items-center justify-center gap-1 rounded-[24px] border border-border/40 bg-background/80 px-1.5 py-1.5 shadow-xl backdrop-blur-md">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    className={compactToolButtonClass}
+                    onClick={() => uploadInputRef.current?.click()}
+                    size="icon"
+                    type="button"
+                    variant="ghost"
+                  >
+                    <Upload className="h-4.5 w-4.5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <div className="font-medium text-sm">上传图片</div>
+                  <div className="text-xs text-zinc-500">添加新的图片图层</div>
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    className={compactToolButtonClass}
+                    onClick={() => void saveCurrentProject()}
+                    size="icon"
+                    type="button"
+                    variant="ghost"
+                  >
+                    <Save className="h-4.5 w-4.5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <div className="font-medium text-sm">保存项目</div>
+                  <div className="text-xs text-zinc-500">保存当前画布状态</div>
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    className={compactToolButtonClass}
+                    onClick={() => {
+                      refreshSavedProjects();
+                      setProjectPanelOpen((openState) => !openState);
+                    }}
+                    size="icon"
+                    type="button"
+                    variant="ghost"
+                  >
+                    <FolderOpen className="h-4.5 w-4.5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <div className="font-medium text-sm">项目列表</div>
+                  <div className="text-xs text-zinc-500">打开已保存项目</div>
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    className={compactToolButtonClass}
+                    onClick={startBlankProject}
+                    size="icon"
+                    type="button"
+                    variant="ghost"
+                  >
+                    <Plus className="h-4.5 w-4.5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <div className="font-medium text-sm">新建空白</div>
+                  <div className="text-xs text-zinc-500">清空并开始新项目</div>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+
+            <div className="flex items-center justify-center gap-1 rounded-[24px] border border-border/40 bg-background/80 px-1.5 py-1.5 shadow-xl backdrop-blur-md">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    className={compactToolButtonClass}
+                    disabled={!canUndo}
+                    onClick={undo}
+                    size="icon"
+                    type="button"
+                    variant="ghost"
+                  >
+                    <Undo2 className="h-4.5 w-4.5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <div className="font-medium text-sm">撤销</div>
+                  <div className="text-xs text-zinc-500">回退上一步编辑</div>
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    className={compactToolButtonClass}
+                    disabled={!canRedo}
+                    onClick={redo}
+                    size="icon"
+                    type="button"
+                    variant="ghost"
+                  >
+                    <Redo2 className="h-4.5 w-4.5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <div className="font-medium text-sm">重做</div>
+                  <div className="text-xs text-zinc-500">恢复已撤销操作</div>
+                </TooltipContent>
+              </Tooltip>
+              {standalone ? (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      className="h-9 w-9 rounded-[16px] bg-black text-white transition hover:bg-black/90 hover:text-white"
+                      onClick={() => onOpenChange(false)}
+                      size="icon"
+                      type="button"
+                      variant="ghost"
+                    >
+                      <X className="h-4.5 w-4.5" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <div className="font-medium text-sm">关闭页面</div>
+                    <div className="text-xs text-zinc-500">返回上一层画布</div>
+                  </TooltipContent>
+                </Tooltip>
               ) : null}
             </div>
           </div>
-        </div>
+        </TooltipProvider>
 
-        <input
-          ref={uploadInputRef}
-          type="file"
-          accept="image/*"
-          multiple
-          className="hidden"
-          onChange={handleSketchUpload}
-        />
-        <div className="absolute bottom-4 left-1/2 z-30 flex w-[min(600px,calc(100vw-2rem))] -translate-x-1/2 flex-col items-center gap-2.5 pointer-events-none">
-          <TooltipProvider delayDuration={120}>
-            <div className="pointer-events-auto flex w-full flex-wrap items-center justify-center gap-1.5">
-              <div className="flex items-center justify-center gap-1 rounded-[24px] border border-black/10 bg-white/94 px-1.5 py-1.5 shadow-[0_12px_32px_rgba(15,23,42,0.12)]">
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      type="button"
-                      size="icon"
-                      variant="ghost"
-                      className={cn(compactToolButtonClass, brushMode === "select" && compactToolButtonActiveClass)}
-                      onClick={() => {
-                        setSelectedLayerId(DRAW_LAYER_ID);
-                        setBrushMode("select");
-                      }}
-                    >
-                      <MousePointer2 className="h-4.5 w-4.5" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <div className="text-sm font-medium">鼠标</div>
-                    <div className="text-xs text-zinc-500">选择图层并拖动位置</div>
-                  </TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      type="button"
-                      size="icon"
-                      variant="ghost"
-                      className={cn(compactToolButtonClass, brushMode === "brush" && compactToolButtonActiveClass)}
-                      onClick={() => {
-                        setSelectedLayerId(DRAW_LAYER_ID);
-                        setBrushMode("brush");
-                      }}
-                    >
-                      <Paintbrush className="h-4.5 w-4.5" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <div className="text-sm font-medium">画笔</div>
-                    <div className="text-xs text-zinc-500">在画布上自由绘制</div>
-                  </TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      type="button"
-                      size="icon"
-                      variant="ghost"
-                      className={cn(compactToolButtonClass, brushMode === "eraser" && compactToolButtonActiveClass)}
-                      onClick={() => {
-                        setSelectedLayerId(DRAW_LAYER_ID);
-                        setBrushMode("eraser");
-                      }}
-                    >
-                      <Eraser className="h-4.5 w-4.5" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <div className="text-sm font-medium">橡皮</div>
-                    <div className="text-xs text-zinc-500">擦除当前草图笔触</div>
-                  </TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                  <Popover>
-                    <TooltipTrigger asChild>
-                      <PopoverTrigger asChild>
-                        <Button
-                          type="button"
-                          size="icon"
-                          variant="ghost"
-                          className={cn(compactToolButtonClass, isShapeMode(brushMode) && compactToolButtonActiveClass)}
-                        >
-                          <Square className="h-4.5 w-4.5" />
-                        </Button>
-                      </PopoverTrigger>
-                    </TooltipTrigger>
-                    <PopoverContent className="w-[220px] rounded-[18px] border-black/10 bg-white/95 p-3 shadow-[0_14px_36px_rgba(15,23,42,0.14)]">
-                      <div className="mb-2 text-xs font-medium text-zinc-500">形状工具</div>
-                      <div className="grid grid-cols-3 gap-2">
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          className={cn("h-10 rounded-xl", brushMode === "rect" && "bg-black text-white hover:bg-black")}
-                          onClick={() => {
-                            setSelectedLayerId(DRAW_LAYER_ID);
-                            setBrushMode("rect");
-                          }}
-                        >
-                          <Square className="h-4.5 w-4.5" />
-                        </Button>
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          className={cn("h-10 rounded-xl", brushMode === "circle" && "bg-black text-white hover:bg-black")}
-                          onClick={() => {
-                            setSelectedLayerId(DRAW_LAYER_ID);
-                            setBrushMode("circle");
-                          }}
-                        >
-                          <CircleIcon className="h-4.5 w-4.5" />
-                        </Button>
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          className={cn("h-10 rounded-xl", brushMode === "line" && "bg-black text-white hover:bg-black")}
-                          onClick={() => {
-                            setSelectedLayerId(DRAW_LAYER_ID);
-                            setBrushMode("line");
-                          }}
-                        >
-                          <Slash className="h-4.5 w-4.5" />
-                        </Button>
-                      </div>
-                    </PopoverContent>
-                  </Popover>
-                  <TooltipContent>
-                    <div className="text-sm font-medium">形状</div>
-                    <div className="text-xs text-zinc-500">矩形、圆形与直线</div>
-                  </TooltipContent>
-                </Tooltip>
-              </div>
-
-              <div className="flex items-center justify-center gap-1 rounded-[24px] border border-black/10 bg-white/94 px-1.5 py-1.5 shadow-[0_12px_32px_rgba(15,23,42,0.12)]">
-                <Tooltip>
-                  <Popover>
-                    <TooltipTrigger asChild>
-                      <PopoverTrigger asChild>
-                        <Button
-                          type="button"
-                          size="icon"
-                          variant="ghost"
-                          className={compactToolButtonClass}
-                        >
-                          <SlidersHorizontal className="h-4.5 w-4.5" />
-                        </Button>
-                      </PopoverTrigger>
-                    </TooltipTrigger>
-                    <PopoverContent className="w-[250px] rounded-[18px] border-black/10 bg-white/95 p-4 shadow-[0_14px_36px_rgba(15,23,42,0.14)]">
-                      <div className="space-y-4">
-                        <div className="space-y-2">
-                          <div className="text-xs font-medium text-zinc-500">颜色</div>
-                          <button
-                            type="button"
-                            className="flex h-10 w-full items-center justify-between rounded-xl border border-black/10 bg-white px-3 text-sm font-medium text-zinc-700"
-                            onClick={() => colorInputRef.current?.click()}
-                          >
-                            <span>选择颜色</span>
-                            <span
-                              className="h-5 w-5 rounded-full border border-black/10"
-                              style={{ backgroundColor: brushColor }}
-                            />
-                          </button>
-                          <input
-                            ref={colorInputRef}
-                            type="color"
-                            value={brushColor}
-                            onChange={(event) => setBrushColor(event.target.value)}
-                            className="sr-only"
-                            title="自定义颜色"
-                          />
-                        </div>
-                        <div className="space-y-2">
-                          <div className="flex items-center justify-between text-xs font-medium text-zinc-500">
-                            <span>粗细</span>
-                            <span className="w-8 text-right text-zinc-900">{brushSize}</span>
-                          </div>
-                          <Slider
-                            value={[brushSize]}
-                            min={2}
-                            max={50}
-                            step={1}
-                            onValueChange={([val]) => setBrushSize(val)}
-                            className="w-full"
-                            trackClassName="h-2.5 bg-zinc-200 shadow-inner"
-                            rangeClassName="bg-black"
-                            thumbClassName="h-5 w-5 border border-zinc-300 bg-white shadow-sm"
-                          />
-                        </div>
-                      </div>
-                    </PopoverContent>
-                  </Popover>
-                  <TooltipContent>
-                    <div className="text-sm font-medium">画笔设置</div>
-                    <div className="text-xs text-zinc-500">调整颜色和粗细</div>
-                  </TooltipContent>
-                </Tooltip>
-              </div>
-
-              <div className="flex items-center justify-center gap-1 rounded-[24px] border border-black/10 bg-white/94 px-1.5 py-1.5 shadow-[0_12px_32px_rgba(15,23,42,0.12)]">
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      type="button"
-                      size="icon"
-                      variant="ghost"
-                      className={compactToolButtonClass}
-                      onClick={() => uploadInputRef.current?.click()}
-                    >
-                      <Upload className="h-4.5 w-4.5" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <div className="text-sm font-medium">上传图片</div>
-                    <div className="text-xs text-zinc-500">添加新的图片图层</div>
-                  </TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      type="button"
-                      size="icon"
-                      variant="ghost"
-                      className={compactToolButtonClass}
-                      onClick={() => void saveCurrentProject()}
-                    >
-                      <Save className="h-4.5 w-4.5" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <div className="text-sm font-medium">保存项目</div>
-                    <div className="text-xs text-zinc-500">保存当前画布状态</div>
-                  </TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      type="button"
-                      size="icon"
-                      variant="ghost"
-                      className={compactToolButtonClass}
-                      onClick={() => {
-                        refreshSavedProjects();
-                        setProjectPanelOpen((openState) => !openState);
-                      }}
-                    >
-                      <FolderOpen className="h-4.5 w-4.5" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <div className="text-sm font-medium">项目列表</div>
-                    <div className="text-xs text-zinc-500">打开已保存项目</div>
-                  </TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      type="button"
-                      size="icon"
-                      variant="ghost"
-                      className={compactToolButtonClass}
-                      onClick={startBlankProject}
-                    >
-                      <Plus className="h-4.5 w-4.5" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <div className="text-sm font-medium">新建空白</div>
-                    <div className="text-xs text-zinc-500">清空并开始新项目</div>
-                  </TooltipContent>
-                </Tooltip>
-              </div>
-
-              <div className="flex items-center justify-center gap-1 rounded-[24px] border border-black/10 bg-white/94 px-1.5 py-1.5 shadow-[0_12px_32px_rgba(15,23,42,0.12)]">
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      type="button"
-                      size="icon"
-                      variant="ghost"
-                      className={compactToolButtonClass}
-                      onClick={undo}
-                      disabled={!canUndo}
-                    >
-                      <Undo2 className="h-4.5 w-4.5" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <div className="text-sm font-medium">撤销</div>
-                    <div className="text-xs text-zinc-500">回退上一步编辑</div>
-                  </TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      type="button"
-                      size="icon"
-                      variant="ghost"
-                      className={compactToolButtonClass}
-                      onClick={redo}
-                      disabled={!canRedo}
-                    >
-                      <Redo2 className="h-4.5 w-4.5" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <div className="text-sm font-medium">重做</div>
-                    <div className="text-xs text-zinc-500">恢复已撤销操作</div>
-                  </TooltipContent>
-                </Tooltip>
-                {standalone ? (
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        type="button"
-                        size="icon"
-                        variant="ghost"
-                        className="h-9 w-9 rounded-[16px] bg-black text-white transition hover:bg-black/90 hover:text-white"
-                        onClick={() => onOpenChange(false)}
-                      >
-                        <X className="h-4.5 w-4.5" />
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <div className="text-sm font-medium">关闭页面</div>
-                      <div className="text-xs text-zinc-500">返回上一层画布</div>
-                    </TooltipContent>
-                  </Tooltip>
-                ) : null}
-              </div>
-            </div>
-          </TooltipProvider>
-
-          <div className="pointer-events-auto w-full rounded-[28px] border border-black/10 bg-white/96 p-[18px] shadow-[0_16px_40px_rgba(15,23,42,0.14)]">
-            <Textarea
-              value={prompt}
-              onChange={(e) => setPrompt(e.target.value)}
-              onBlur={() => scheduleFlush(true, false)}
-              onKeyDown={(event) => {
-                if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
-                  event.preventDefault();
-                  triggerGenerate();
-                }
-              }}
-              placeholder="输入指令，基于当前画布实时生成"
-              className="min-h-[102px] resize-none border-0 bg-transparent p-0 text-[15px] leading-7 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
-            />
-            <div className="mt-4 flex flex-col gap-2.5 sm:flex-row sm:items-end sm:justify-between">
-              <div className="flex flex-wrap items-center gap-2">
+        <div className="pointer-events-auto w-full rounded-[28px] border border-border/40 bg-background/80 p-[18px] shadow-2xl backdrop-blur-md">
+          <Textarea
+            className="min-h-[102px] resize-none border-0 bg-transparent p-0 text-[15px] leading-7 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+            onBlur={() => scheduleFlush(true, false)}
+            onChange={(e) => setPrompt(e.target.value)}
+            onKeyDown={(event) => {
+              if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+                event.preventDefault();
+                triggerGenerate();
+              }
+            }}
+            placeholder="输入指令，基于当前画布实时生成"
+            value={prompt}
+          />
+          <div className="mt-4 flex flex-col gap-2.5 sm:flex-row sm:items-end sm:justify-between">
+            <div className="flex flex-wrap items-center gap-2">
+              <span
+                className={cn(
+                  "flex items-center gap-1.5 rounded-full px-2.5 py-1.5 font-medium text-[11px]",
+                  statusBadge.className
+                )}
+              >
                 <span
                   className={cn(
-                    "flex items-center gap-1.5 rounded-full px-2.5 py-1.5 text-[11px] font-medium",
-                    statusBadge.className
+                    "h-2 w-2 rounded-full",
+                    status === "live"
+                      ? "animate-pulse bg-emerald-500"
+                      : status === "error"
+                        ? "bg-rose-500"
+                        : "bg-zinc-400"
                   )}
-                >
-                  <span
-                    className={cn(
-                      "h-2 w-2 rounded-full",
-                      status === "live"
-                        ? "bg-emerald-500 animate-pulse"
-                        : status === "error"
-                          ? "bg-rose-500"
-                          : "bg-zinc-400"
-                    )}
-                  />
-                  {statusBadge.label}
-                </span>
-                <span className="rounded-full bg-zinc-100 px-2.5 py-1.5 text-[11px] text-zinc-600">
-                  延迟 {adaptiveThrottleMs}ms
-                </span>
-                <span className="rounded-full bg-black px-2.5 py-1.5 text-[11px] font-medium text-white">
-                  当前工具 {currentModeLabel}
-                </span>
-                <span className="rounded-full bg-zinc-100 px-2.5 py-1.5 text-[11px] text-zinc-600">
-                  {currentModeDescription}
-                </span>
-              </div>
-              <div className="flex items-center gap-2">
-                <Button
-                  size="sm"
-                  className="h-9 shrink-0 rounded-full bg-black px-4 font-medium text-white hover:bg-black/90"
-                  onClick={triggerGenerate}
-                  disabled={status === "connecting"}
-                >
-                  {status === "connecting" ? (
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                  ) : (
-                    "生成"
-                  )}
-                </Button>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  className="h-9 shrink-0 rounded-full px-4 font-medium"
-                  onClick={handleApplyToCanvas}
-                  disabled={!previewUrl}
-                >
-                  <Send className="mr-1.5 h-4 w-4" />
-                  发送到画布
-                </Button>
-              </div>
+                />
+                {statusBadge.label}
+              </span>
+              <span className="rounded-full bg-zinc-100 px-2.5 py-1.5 text-[11px] text-zinc-600">
+                延迟 {adaptiveThrottleMs}ms
+              </span>
+              <span className="rounded-full bg-black px-2.5 py-1.5 font-medium text-[11px] text-white">
+                当前工具 {currentModeLabel}
+              </span>
+              <span className="rounded-full bg-zinc-100 px-2.5 py-1.5 text-[11px] text-zinc-600">
+                {currentModeDescription}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                className="h-9 shrink-0 rounded-full bg-black px-4 font-medium text-white hover:bg-black/90"
+                disabled={status === "connecting"}
+                onClick={triggerGenerate}
+                size="sm"
+              >
+                {status === "connecting" ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  "生成"
+                )}
+              </Button>
+              <Button
+                className="h-9 shrink-0 rounded-full px-4 font-medium"
+                disabled={!previewUrl}
+                onClick={handleApplyToCanvas}
+                size="sm"
+                variant="outline"
+              >
+                <Send className="mr-1.5 h-4 w-4" />
+                发送到画布
+              </Button>
             </div>
           </div>
         </div>
+      </div>
     </>
   );
 
   if (standalone) {
     return (
       <div className="h-dvh w-full overflow-hidden bg-background">
-        <div className="relative h-full w-full overflow-hidden bg-background">{content}</div>
+        <div className="relative h-full w-full overflow-hidden bg-background">
+          {content}
+        </div>
       </div>
     );
   }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <Dialog onOpenChange={onOpenChange} open={open}>
       <DialogContent className="h-[97vh] w-[98vw] max-w-[1800px] overflow-hidden rounded-[20px] border-0 bg-background p-0 shadow-2xl sm:rounded-[20px] md:rounded-[24px]">
         {content}
       </DialogContent>
diff --git a/components/scene-fusion-view.tsx b/components/scene-fusion-view.tsx
index 0fbfd2d6b..b5388c5c3 100644
--- a/components/scene-fusion-view.tsx
+++ b/components/scene-fusion-view.tsx
@@ -1,9 +1,8 @@
 "use client";
 
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import useSWR from "swr";
 import {
   Download,
+  Eraser,
   Image as ImageIcon,
   Layers,
   Loader2,
@@ -13,22 +12,29 @@ import {
   Trash2,
   Upload,
   Wand2,
-  Eraser,
   X,
 } from "lucide-react";
+import type React from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
+import useSWR from "swr";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "@/components/ui/select";
 import { requestLongTaskResult } from "@/lib/client/long-task";
-import { cn } from "@/lib/utils";
 import {
   SCENE_FUSION_ASPECT_RATIO_OPTIONS,
   SCENE_FUSION_IMAGE_SIZE_OPTIONS,
   type SceneFusionCapabilitySummary,
 } from "@/lib/scene-fusion/output-capabilities";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
+import { cn } from "@/lib/utils";
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
 const MAX_BATCH_ITEMS = 10;
@@ -38,7 +44,13 @@ const MULTI_PRODUCT_FAILOVER_RETRY_DELAY_MS = 1500;
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
-type BatchMode = "scene-fission" | "multi-product-scene" | "random-bg" | "rmbg" | "enhance" | "watermark";
+type BatchMode =
+  | "scene-fission"
+  | "multi-product-scene"
+  | "random-bg"
+  | "rmbg"
+  | "enhance"
+  | "watermark";
 type ItemStatus = "pending" | "processing" | "completed" | "failed";
 
 interface ProcessItem {
@@ -72,13 +84,48 @@ const randomBackgroundStyles = [
   "高端商业橱窗",
 ];
 
-const modeOptions: Array<{ id: BatchMode; label: string; description: string; icon: React.ComponentType<{ className?: string }> }> = [
-  { id: "scene-fission", label: "裂变场景", description: "1张产品图 + 多张参考图", icon: Layers },
-  { id: "multi-product-scene", label: "多产品替换", description: "10张产品图 + 1张参考图", icon: ImageIcon },
-  { id: "random-bg", label: "随机换背景", description: "1张图随机生成多种背景", icon: Wand2 },
-  { id: "rmbg", label: "批量抠图", description: "多图同步去背景", icon: Eraser },
-  { id: "enhance", label: "批量变清晰", description: "多图同步增强画质", icon: Sparkles },
-  { id: "watermark", label: "批量去水印", description: "多图同步去除水印", icon: RefreshCw },
+const modeOptions: Array<{
+  id: BatchMode;
+  label: string;
+  description: string;
+  icon: React.ComponentType<{ className?: string }>;
+}> = [
+  {
+    id: "scene-fission",
+    label: "裂变场景",
+    description: "1张产品图 + 多张参考图",
+    icon: Layers,
+  },
+  {
+    id: "multi-product-scene",
+    label: "多产品替换",
+    description: "10张产品图 + 1张参考图",
+    icon: ImageIcon,
+  },
+  {
+    id: "random-bg",
+    label: "随机换背景",
+    description: "1张图随机生成多种背景",
+    icon: Wand2,
+  },
+  {
+    id: "rmbg",
+    label: "批量抠图",
+    description: "多图同步去背景",
+    icon: Eraser,
+  },
+  {
+    id: "enhance",
+    label: "批量变清晰",
+    description: "多图同步增强画质",
+    icon: Sparkles,
+  },
+  {
+    id: "watermark",
+    label: "批量去水印",
+    description: "多图同步去除水印",
+    icon: RefreshCw,
+  },
 ];
 
 function getModeActionLabel(mode: BatchMode, count: number) {
@@ -117,14 +164,19 @@ export function SceneFusionView({
   onBatchAddToCanvas,
 }: SceneFusionViewProps) {
   const { data: configData } = useSWR("/api/scene-fusion/config", fetcher);
-  const config = configData as {
-    enabled?: boolean;
-    defaultPrompt?: string;
-    maxScenes?: number;
-    outputCapabilities?: SceneFusionCapabilitySummary;
-  } | undefined;
+  const config = configData as
+    | {
+        enabled?: boolean;
+        defaultPrompt?: string;
+        maxScenes?: number;
+        outputCapabilities?: SceneFusionCapabilitySummary;
+      }
+    | undefined;
 
-  const maxScenes = Math.min(config?.maxScenes ?? MAX_BATCH_ITEMS, MAX_BATCH_ITEMS);
+  const maxScenes = Math.min(
+    config?.maxScenes ?? MAX_BATCH_ITEMS,
+    MAX_BATCH_ITEMS
+  );
   const outputCapabilities = config?.outputCapabilities;
   const availableAspectRatioOptions = useMemo(
     () =>
@@ -134,7 +186,10 @@ export function SceneFusionView({
           : !outputCapabilities?.aspectRatio?.options?.length ||
             outputCapabilities.aspectRatio.options.includes(option.value)
       ),
-    [outputCapabilities?.aspectRatio?.enabled, outputCapabilities?.aspectRatio?.options]
+    [
+      outputCapabilities?.aspectRatio?.enabled,
+      outputCapabilities?.aspectRatio?.options,
+    ]
   );
   const availableImageSizeOptions = useMemo(
     () =>
@@ -144,7 +199,10 @@ export function SceneFusionView({
           : !outputCapabilities?.imageSize?.options?.length ||
             outputCapabilities.imageSize.options.includes(option.value)
       ),
-    [outputCapabilities?.imageSize?.enabled, outputCapabilities?.imageSize?.options]
+    [
+      outputCapabilities?.imageSize?.enabled,
+      outputCapabilities?.imageSize?.options,
+    ]
   );
   const showAspectRatioSetting = availableAspectRatioOptions.length > 0;
   const showImageSizeSetting = availableImageSizeOptions.length > 0;
@@ -154,15 +212,21 @@ export function SceneFusionView({
   const [aspectRatio, setAspectRatio] = useState("auto");
   const [imageSize, setImageSize] = useState("2K");
   const showOutputSettings =
-    mode === "scene-fission" || mode === "random-bg" || mode === "multi-product-scene";
+    mode === "scene-fission" ||
+    mode === "random-bg" ||
+    mode === "multi-product-scene";
 
   const [productImage, setProductImage] = useState<string | null>(null);
-  const [productImagePreview, setProductImagePreview] = useState<string | null>(null);
+  const [productImagePreview, setProductImagePreview] = useState<string | null>(
+    null
+  );
   const [productName, setProductName] = useState(initialProductName || "");
 
   const [sceneItems, setSceneItems] = useState<ProcessItem[]>([]);
   const [multiProductItems, setMultiProductItems] = useState<ProcessItem[]>([]);
-  const [referenceSceneImage, setReferenceSceneImage] = useState<string | null>(null);
+  const [referenceSceneImage, setReferenceSceneImage] = useState<string | null>(
+    null
+  );
   const [referenceTargetName, setReferenceTargetName] = useState("");
   const [referenceCustomPrompt, setReferenceCustomPrompt] = useState("");
   const [randomItems, setRandomItems] = useState<ProcessItem[]>([]);
@@ -171,7 +235,8 @@ export function SceneFusionView({
 
   const [batchItems, setBatchItems] = useState<ProcessItem[]>([]);
   const [previewImageUrl, setPreviewImageUrl] = useState<string | null>(null);
-  const [previewImageTitle, setPreviewImageTitle] = useState<string>("处理结果预览");
+  const [previewImageTitle, setPreviewImageTitle] =
+    useState<string>("处理结果预览");
 
   const productInputRef = useRef<HTMLInputElement>(null);
   const sceneInputRef = useRef<HTMLInputElement>(null);
@@ -188,19 +253,40 @@ export function SceneFusionView({
   }, [batchItems, mode, multiProductItems, randomItems, sceneItems]);
 
   const modeCanStart = useMemo(() => {
-    if (mode === "scene-fission") return Boolean(productImage) && sceneItems.length > 0;
-    if (mode === "multi-product-scene") return multiProductItems.length > 0 && Boolean(referenceSceneImage);
+    if (mode === "scene-fission")
+      return Boolean(productImage) && sceneItems.length > 0;
+    if (mode === "multi-product-scene")
+      return multiProductItems.length > 0 && Boolean(referenceSceneImage);
     if (mode === "random-bg") return Boolean(productImage) && randomCount > 0;
     return batchItems.length > 0;
-  }, [batchItems.length, mode, multiProductItems.length, productImage, randomCount, referenceSceneImage, sceneItems.length]);
+  }, [
+    batchItems.length,
+    mode,
+    multiProductItems.length,
+    productImage,
+    randomCount,
+    referenceSceneImage,
+    sceneItems.length,
+  ]);
 
-  const selectedModeOption = useMemo(() => modeOptions.find((option) => option.id === mode), [mode]);
+  const selectedModeOption = useMemo(
+    () => modeOptions.find((option) => option.id === mode),
+    [mode]
+  );
   const completedResultItems = useMemo(
-    () => resultItems.filter((item) => item.status === "completed" && (item.originalUrl || item.result)),
+    () =>
+      resultItems.filter(
+        (item) =>
+          item.status === "completed" && (item.originalUrl || item.result)
+      ),
     [resultItems]
   );
   const resultAllFinished = useMemo(
-    () => resultItems.length > 0 && resultItems.every((item) => item.status !== "processing" && item.status !== "pending"),
+    () =>
+      resultItems.length > 0 &&
+      resultItems.every(
+        (item) => item.status !== "processing" && item.status !== "pending"
+      ),
     [resultItems]
   );
   const sceneFusionOutputPayload = useMemo(
@@ -211,7 +297,10 @@ export function SceneFusionView({
     [aspectRatio, imageSize, showAspectRatioSetting, showImageSizeSetting]
   );
 
-  const updateProductPreview = (previewUrl: string | null, isObjectUrl = false) => {
+  const updateProductPreview = (
+    previewUrl: string | null,
+    isObjectUrl = false
+  ) => {
     if (productPreviewObjectUrlRef.current) {
       URL.revokeObjectURL(productPreviewObjectUrlRef.current);
       productPreviewObjectUrlRef.current = null;
@@ -245,7 +334,9 @@ export function SceneFusionView({
   useEffect(() => {
     if (showAspectRatioSetting) {
       const nextAspectRatio =
-        availableAspectRatioOptions.find((option) => option.value === aspectRatio)?.value ||
+        availableAspectRatioOptions.find(
+          (option) => option.value === aspectRatio
+        )?.value ||
         outputCapabilities?.aspectRatio?.defaultValue ||
         availableAspectRatioOptions[0]?.value ||
         "auto";
@@ -268,7 +359,8 @@ export function SceneFusionView({
   useEffect(() => {
     if (showImageSizeSetting) {
       const nextImageSize =
-        availableImageSizeOptions.find((option) => option.value === imageSize)?.value ||
+        availableImageSizeOptions.find((option) => option.value === imageSize)
+          ?.value ||
         outputCapabilities?.imageSize?.defaultValue ||
         availableImageSizeOptions[0]?.value ||
         "2K";
@@ -378,7 +470,9 @@ export function SceneFusionView({
     e.target.value = "";
   };
 
-  const handleReferenceSceneUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleReferenceSceneUpload = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
     const file = e.target.files?.[0];
     if (!file) return;
     if (file.size > 50 * 1024 * 1024) {
@@ -427,7 +521,9 @@ export function SceneFusionView({
   };
 
   const updateSceneItem = (id: string, patch: Partial<ProcessItem>) => {
-    setSceneItems((prev) => prev.map((item) => (item.id === id ? { ...item, ...patch } : item)));
+    setSceneItems((prev) =>
+      prev.map((item) => (item.id === id ? { ...item, ...patch } : item))
+    );
   };
 
   const removeSceneItem = (id: string) => {
@@ -445,7 +541,13 @@ export function SceneFusionView({
   const updateBatchItemsStatus = (ids: string[], status: ItemStatus) => {
     setBatchItems((prev) =>
       prev.map((item) =>
-        ids.includes(item.id) ? { ...item, status, error: status === "processing" ? undefined : item.error } : item
+        ids.includes(item.id)
+          ? {
+              ...item,
+              status,
+              error: status === "processing" ? undefined : item.error,
+            }
+          : item
       )
     );
   };
@@ -457,13 +559,24 @@ export function SceneFusionView({
   ) => {
     setter((prev) =>
       prev.map((item) =>
-        ids.includes(item.id) ? { ...item, status, error: status === "processing" ? undefined : item.error } : item
+        ids.includes(item.id)
+          ? {
+              ...item,
+              status,
+              error: status === "processing" ? undefined : item.error,
+            }
+          : item
       )
     );
   };
 
   const runSceneFusion = async (
-    scenesPayload: Array<{ id: string; image: string; targetName?: string; customPrompt?: string }>,
+    scenesPayload: Array<{
+      id: string;
+      image: string;
+      targetName?: string;
+      customPrompt?: string;
+    }>,
     setter: React.Dispatch<React.SetStateAction<ProcessItem[]>>
   ) => {
     if (!productImage) return;
@@ -531,14 +644,21 @@ export function SceneFusionView({
       }) => {
         if (msg.type === "agent_meta" && msg.data) {
           const detectedProductName =
-            typeof msg.data.productName === "string" ? msg.data.productName.trim() : "";
+            typeof msg.data.productName === "string"
+              ? msg.data.productName.trim()
+              : "";
           if (!productName.trim() && detectedProductName) {
             setProductName(detectedProductName);
           }
-          if (Array.isArray(msg.data.sceneTargets) && msg.data.sceneTargets.length > 0) {
+          if (
+            Array.isArray(msg.data.sceneTargets) &&
+            msg.data.sceneTargets.length > 0
+          ) {
             setter((prev) =>
               prev.map((item) => {
-                const detected = msg.data?.sceneTargets?.find((entry) => entry.id === item.id);
+                const detected = msg.data?.sceneTargets?.find(
+                  (entry) => entry.id === item.id
+                );
                 if (!detected?.targetName) return item;
                 const currentTargetName = (item.targetName || "").trim();
                 if (currentTargetName) return item;
@@ -625,7 +745,10 @@ export function SceneFusionView({
             };
             handleParsedMessage(msg);
           } catch (parseError) {
-            console.warn("[SceneFusionView] Ignore invalid stream line:", parseError);
+            console.warn(
+              "[SceneFusionView] Ignore invalid stream line:",
+              parseError
+            );
           }
         }
       }
@@ -654,15 +777,23 @@ export function SceneFusionView({
           };
           handleParsedMessage(msg);
         } catch (parseError) {
-          console.warn("[SceneFusionView] Ignore trailing stream buffer:", parseError);
+          console.warn(
+            "[SceneFusionView] Ignore trailing stream buffer:",
+            parseError
+          );
         }
       }
 
       if (streamErrorMessage) {
         setter((prev) =>
           prev.map((item) =>
-            scenesPayload.some((scene) => scene.id === item.id) && item.status === "processing"
-              ? { ...item, status: "failed", error: streamErrorMessage || "处理失败" }
+            scenesPayload.some((scene) => scene.id === item.id) &&
+            item.status === "processing"
+              ? {
+                  ...item,
+                  status: "failed",
+                  error: streamErrorMessage || "处理失败",
+                }
               : item
           )
         );
@@ -679,7 +810,8 @@ export function SceneFusionView({
       toast.error(message);
       setter((prev) =>
         prev.map((item) =>
-          scenesPayload.some((scene) => scene.id === item.id) && item.status === "processing"
+          scenesPayload.some((scene) => scene.id === item.id) &&
+          item.status === "processing"
             ? { ...item, status: "failed", error: message }
             : item
         )
@@ -754,7 +886,10 @@ export function SceneFusionView({
           if (msg.data.status === "completed") {
             return {
               result: msg.data.result || params.sceneImageInput,
-              originalUrl: msg.data.originalUrl || msg.data.result || params.sceneImageInput,
+              originalUrl:
+                msg.data.originalUrl ||
+                msg.data.result ||
+                params.sceneImageInput,
             };
           }
           throw new Error(msg.data.error || "生成失败");
@@ -778,7 +913,11 @@ export function SceneFusionView({
   }) => {
     let lastError: Error | null = null;
 
-    for (let round = 1; round <= MULTI_PRODUCT_FAILOVER_MAX_ROUNDS; round += 1) {
+    for (
+      let round = 1;
+      round <= MULTI_PRODUCT_FAILOVER_MAX_ROUNDS;
+      round += 1
+    ) {
       try {
         return await runSingleSceneFusionAttempt({
           ...params,
@@ -816,7 +955,9 @@ export function SceneFusionView({
       return;
     }
 
-    let itemsToProcess = multiProductItems.filter((item) => item.status === "pending" || item.status === "failed");
+    let itemsToProcess = multiProductItems.filter(
+      (item) => item.status === "pending" || item.status === "failed"
+    );
     if (itemsToProcess.length === 0) {
       itemsToProcess = multiProductItems;
     }
@@ -896,13 +1037,17 @@ export function SceneFusionView({
     if (successCount > 0 && failedCount === 0) {
       toast.success(`多产品替换完成：${successCount} 张`);
     } else {
-      toast.warning(`多产品替换完成：${successCount} 成功，${failedCount} 失败`);
+      toast.warning(
+        `多产品替换完成：${successCount} 成功，${failedCount} 失败`
+      );
     }
   };
 
   const buildRandomItems = () => {
     const count = Math.max(1, Math.min(MAX_BATCH_ITEMS, randomCount));
-    const stylePool = [...randomBackgroundStyles].sort(() => Math.random() - 0.5);
+    const stylePool = [...randomBackgroundStyles].sort(
+      () => Math.random() - 0.5
+    );
     return Array.from({ length: count }).map((_, index) => {
       const style = stylePool[index % stylePool.length];
       const customPrompt = `请保持产品主体清晰完整，背景必须明显变化为“${style}”风格（不得与原背景相似），光影自然。${randomPrompt ? `补充要求：${randomPrompt}` : ""}`;
@@ -932,7 +1077,8 @@ export function SceneFusionView({
       }
       return {
         result: payload.thumbnail_url || payload.original_url || item.image,
-        originalUrl: payload.original_url || payload.thumbnail_url || item.image,
+        originalUrl:
+          payload.original_url || payload.thumbnail_url || item.image,
       };
     }
 
@@ -952,7 +1098,8 @@ export function SceneFusionView({
       }
       return {
         result: payload.thumbnail_url || payload.original_url || item.image,
-        originalUrl: payload.original_url || payload.thumbnail_url || item.image,
+        originalUrl:
+          payload.original_url || payload.thumbnail_url || item.image,
       };
     }
 
@@ -968,7 +1115,8 @@ export function SceneFusionView({
       }
       return {
         result: payload.thumbnail_url || payload.original_url || item.image,
-        originalUrl: payload.original_url || payload.thumbnail_url || item.image,
+        originalUrl:
+          payload.original_url || payload.thumbnail_url || item.image,
       };
     }
 
@@ -981,7 +1129,9 @@ export function SceneFusionView({
       return;
     }
 
-    let itemsToProcess = batchItems.filter((item) => item.status === "pending" || item.status === "failed");
+    let itemsToProcess = batchItems.filter(
+      (item) => item.status === "pending" || item.status === "failed"
+    );
     if (itemsToProcess.length === 0) {
       itemsToProcess = batchItems;
     }
@@ -1065,7 +1215,9 @@ export function SceneFusionView({
         return;
       }
 
-      let scenesToProcess = sceneItems.filter((item) => item.status === "pending" || item.status === "failed");
+      let scenesToProcess = sceneItems.filter(
+        (item) => item.status === "pending" || item.status === "failed"
+      );
       if (scenesToProcess.length === 0) {
         scenesToProcess = sceneItems;
       }
@@ -1145,7 +1297,9 @@ export function SceneFusionView({
       }
       setMultiProductItems((prev) =>
         prev.map((productItem) =>
-          productItem.id === item.id ? { ...productItem, status: "pending", error: undefined } : productItem
+          productItem.id === item.id
+            ? { ...productItem, status: "pending", error: undefined }
+            : productItem
         )
       );
       await runMultiProductSceneMode();
@@ -1154,7 +1308,9 @@ export function SceneFusionView({
 
     setBatchItems((prev) =>
       prev.map((batchItem) =>
-        batchItem.id === item.id ? { ...batchItem, status: "pending", error: undefined } : batchItem
+        batchItem.id === item.id
+          ? { ...batchItem, status: "pending", error: undefined }
+          : batchItem
       )
     );
     await runBatchImageMode();
@@ -1178,14 +1334,19 @@ export function SceneFusionView({
   };
 
   const downloadAll = async () => {
-    const completed = resultItems.filter((item) => item.status === "completed" && (item.originalUrl || item.result));
+    const completed = resultItems.filter(
+      (item) => item.status === "completed" && (item.originalUrl || item.result)
+    );
     if (completed.length === 0) {
       toast.error("没有可下载的图片");
       return;
     }
     for (let i = 0; i < completed.length; i += 1) {
       const item = completed[i]!;
-      await downloadImage(item.originalUrl || item.result!, `batch-result-${i + 1}.png`);
+      await downloadImage(
+        item.originalUrl || item.result!,
+        `batch-result-${i + 1}.png`
+      );
       await new Promise((resolve) => setTimeout(resolve, 400));
     }
     toast.success(`已下载 ${completed.length} 张图片`);
@@ -1219,50 +1380,64 @@ export function SceneFusionView({
   };
 
   return (
-    <div className="flex h-full min-h-0 w-full flex-col bg-white dark:bg-zinc-950">
+    <div className="flex h-full min-h-0 w-full flex-col bg-background">
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden md:flex-row">
-        <div className="w-full md:w-[420px] border-r flex min-h-0 flex-col bg-white dark:bg-zinc-950 shrink-0">
-          <div className="border-b h-16 px-4 shrink-0 bg-white dark:bg-zinc-950 flex items-center">
+        <div className="flex min-h-0 w-full shrink-0 flex-col border-r bg-background md:w-[420px]">
+          <div className="flex h-16 shrink-0 items-center border-b bg-background px-4">
             <div className="flex items-center gap-2">
-              <Layers className="w-4 h-4 text-primary" />
+              <Layers className="h-4 w-4 text-primary" />
               <span className="font-medium">批量处理</span>
             </div>
           </div>
 
-          <div className="flex-1 min-h-0 overflow-y-auto overscroll-contain px-4 py-4">
+          <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4">
             <div className="space-y-6">
               <div className="space-y-2">
-                <Label className="text-base font-medium">处理模式</Label>
-                <Select value={mode} onValueChange={(value) => setMode(value as BatchMode)} disabled={isProcessing}>
-                  <SelectTrigger className="h-10 bg-white dark:bg-zinc-950">
+                <Label className="font-medium text-base">处理模式</Label>
+                <Select
+                  disabled={isProcessing}
+                  onValueChange={(value) => setMode(value as BatchMode)}
+                  value={mode}
+                >
+                  <SelectTrigger className="h-10 bg-background">
                     <span className="truncate">
                       {selectedModeOption?.label || "请选择处理模式"}
                     </span>
                   </SelectTrigger>
-                  <SelectContent className="z-[30000] !bg-white !dark:bg-zinc-950">
+                  <SelectContent className="z-[30000] bg-background">
                     {modeOptions.map((option) => (
-                      <SelectItem key={option.id} value={option.id} className="items-start py-2">
+                      <SelectItem
+                        className="items-start py-2"
+                        key={option.id}
+                        value={option.id}
+                      >
                         <div className="flex flex-col">
                           <span className="text-sm">{option.label}</span>
-                          <span className="text-xs text-muted-foreground">{option.description}</span>
+                          <span className="text-muted-foreground text-xs">
+                            {option.description}
+                          </span>
                         </div>
                       </SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
-                <p className="text-xs text-muted-foreground">单次处理硬限制：最多 {MAX_BATCH_ITEMS} 张图片。</p>
+                <p className="text-muted-foreground text-xs">
+                  单次处理硬限制：最多 {MAX_BATCH_ITEMS} 张图片。
+                </p>
               </div>
 
               {(mode === "scene-fission" || mode === "random-bg") && (
                 <div className="space-y-2">
                   <div className="flex items-center justify-between">
-                    <Label className="text-base font-medium">主图 A (必须)</Label>
+                    <Label className="font-medium text-base">
+                      主图 A (必须)
+                    </Label>
                     {(productImagePreview || productImage) && (
                       <Button
-                        variant="ghost"
-                        size="sm"
-                        className="h-6 text-xs text-muted-foreground hover:text-destructive"
+                        className="h-6 text-muted-foreground text-xs hover:text-destructive"
                         onClick={clearProductImage}
+                        size="sm"
+                        variant="ghost"
                       >
                         清除
                       </Button>
@@ -1271,31 +1446,34 @@ export function SceneFusionView({
 
                   <div
                     className={cn(
-                      "border-2 border-dashed rounded-lg p-4 transition-colors text-center cursor-pointer relative group",
+                      "group relative cursor-pointer rounded-lg border-2 border-dashed p-4 text-center transition-colors",
                       productImagePreview || productImage
                         ? "border-primary/50 bg-primary/5"
                         : "border-muted-foreground/25 hover:border-primary/50 hover:bg-muted/50"
                     )}
-                    onClick={() => !(productImagePreview || productImage) && productInputRef.current?.click()}
+                    onClick={() =>
+                      !(productImagePreview || productImage) &&
+                      productInputRef.current?.click()
+                    }
                   >
                     <input
-                      type="file"
-                      ref={productInputRef}
-                      className="hidden"
                       accept="image/png,image/jpeg,image/webp"
+                      className="hidden"
                       onChange={handleProductUpload}
+                      ref={productInputRef}
+                      type="file"
                     />
                     {productImagePreview || productImage ? (
-                      <div className="relative aspect-square w-full max-w-[200px] mx-auto">
+                      <div className="relative mx-auto aspect-square w-full max-w-[200px]">
                         <img
-                          src={productImagePreview || productImage || ""}
                           alt="主图"
-                          className="w-full h-full object-contain rounded-md"
+                          className="h-full w-full rounded-md object-contain"
+                          src={productImagePreview || productImage || ""}
                         />
                       </div>
                     ) : (
-                      <div className="py-8 flex flex-col items-center gap-2 text-muted-foreground">
-                        <Upload className="w-8 h-8 opacity-50" />
+                      <div className="flex flex-col items-center gap-2 py-8 text-muted-foreground">
+                        <Upload className="h-8 w-8 opacity-50" />
                         <span className="text-sm">点击上传主图</span>
                       </div>
                     )}
@@ -1303,11 +1481,11 @@ export function SceneFusionView({
 
                   {(productImagePreview || productImage) && (
                     <Input
-                      placeholder="主图名称（如：沙发、椅子）"
-                      value={productName}
-                      onChange={(e) => setProductName(e.target.value)}
                       className="h-9 text-sm"
                       disabled={isProcessing}
+                      onChange={(e) => setProductName(e.target.value)}
+                      placeholder="主图名称（如：沙发、椅子）"
+                      value={productName}
                     />
                   )}
                 </div>
@@ -1316,30 +1494,36 @@ export function SceneFusionView({
               {showOutputSettings && (
                 <div className="space-y-3">
                   <div className="space-y-1">
-                    <Label className="text-base font-medium">输出设置</Label>
+                    <Label className="font-medium text-base">输出设置</Label>
                     {outputCapabilities?.strategyLabel ? (
-                      <p className="text-xs text-muted-foreground">{outputCapabilities.strategyLabel}</p>
+                      <p className="text-muted-foreground text-xs">
+                        {outputCapabilities.strategyLabel}
+                      </p>
                     ) : null}
                     {outputCapabilities?.note ? (
-                      <p className="text-xs text-muted-foreground">{outputCapabilities.note}</p>
+                      <p className="text-muted-foreground text-xs">
+                        {outputCapabilities.note}
+                      </p>
                     ) : null}
                   </div>
 
                   {showAspectRatioSetting ? (
                     <div className="space-y-1.5">
-                      <label className="text-xs text-muted-foreground">图片比例</label>
+                      <label className="text-muted-foreground text-xs">
+                        图片比例
+                      </label>
                       <div className="flex flex-wrap gap-1.5">
                         {availableAspectRatioOptions.map((option) => (
                           <button
+                            className={cn(
+                              "rounded-md border px-2.5 py-1 text-xs transition-colors",
+                              aspectRatio === option.value
+                                ? "border-primary bg-primary text-primary-foreground"
+                                : "border-input bg-background hover:bg-muted"
+                            )}
+                            disabled={isProcessing}
                             key={option.value}
                             onClick={() => setAspectRatio(option.value)}
-                            disabled={isProcessing}
-                            className={cn(
-                              "px-2.5 py-1 text-xs rounded-md border transition-colors",
-                              aspectRatio === option.value
-                                ? "bg-primary text-primary-foreground border-primary"
-                                : "bg-background hover:bg-muted border-input"
-                            )}
                           >
                             {option.label}
                           </button>
@@ -1348,8 +1532,10 @@ export function SceneFusionView({
                     </div>
                   ) : (
                     <div className="space-y-1">
-                      <label className="text-xs text-muted-foreground">图片比例</label>
-                      <p className="text-xs text-muted-foreground">
+                      <label className="text-muted-foreground text-xs">
+                        图片比例
+                      </label>
+                      <p className="text-muted-foreground text-xs">
                         当前模型链路不支持自定义图片比例，将按模型默认比例生成。
                       </p>
                     </div>
@@ -1357,19 +1543,21 @@ export function SceneFusionView({
 
                   {showImageSizeSetting ? (
                     <div className="space-y-1.5">
-                      <label className="text-xs text-muted-foreground">输出分辨率</label>
+                      <label className="text-muted-foreground text-xs">
+                        输出分辨率
+                      </label>
                       <div className="flex flex-wrap gap-1.5">
                         {availableImageSizeOptions.map((option) => (
                           <button
+                            className={cn(
+                              "rounded-md border px-2.5 py-1 text-xs transition-colors",
+                              imageSize === option.value
+                                ? "border-primary bg-primary text-primary-foreground"
+                                : "border-input bg-background hover:bg-muted"
+                            )}
+                            disabled={isProcessing}
                             key={option.value}
                             onClick={() => setImageSize(option.value)}
-                            disabled={isProcessing}
-                            className={cn(
-                              "px-2.5 py-1 text-xs rounded-md border transition-colors",
-                              imageSize === option.value
-                                ? "bg-primary text-primary-foreground border-primary"
-                                : "bg-background hover:bg-muted border-input"
-                            )}
                           >
                             {option.label}
                           </button>
@@ -1378,8 +1566,10 @@ export function SceneFusionView({
                     </div>
                   ) : (
                     <div className="space-y-1">
-                      <label className="text-xs text-muted-foreground">输出分辨率</label>
-                      <p className="text-xs text-muted-foreground">
+                      <label className="text-muted-foreground text-xs">
+                        输出分辨率
+                      </label>
+                      <p className="text-muted-foreground text-xs">
                         当前模型链路不支持自定义分辨率，将按模型默认清晰度生成。
                       </p>
                     </div>
@@ -1390,72 +1580,93 @@ export function SceneFusionView({
               {mode === "scene-fission" && (
                 <div className="space-y-2">
                   <div className="flex items-center justify-between">
-                    <Label className="text-base font-medium">
+                    <Label className="font-medium text-base">
                       场景参考图 ({sceneItems.length}/{maxScenes})
                     </Label>
                     <Button
-                      variant="outline"
-                      size="sm"
-                      className="h-7 text-xs gap-1"
-                      onClick={() => sceneInputRef.current?.click()}
+                      className="h-7 gap-1 text-xs"
                       disabled={sceneItems.length >= maxScenes || isProcessing}
+                      onClick={() => sceneInputRef.current?.click()}
+                      size="sm"
+                      variant="outline"
                     >
-                      <Plus className="w-3 h-3" /> 批量添加
+                      <Plus className="h-3 w-3" /> 批量添加
                     </Button>
                     <input
-                      type="file"
-                      ref={sceneInputRef}
+                      accept="image/png,image/jpeg,image/webp"
                       className="hidden"
                       multiple
-                      accept="image/png,image/jpeg,image/webp"
                       onChange={handleSceneUpload}
+                      ref={sceneInputRef}
+                      type="file"
                     />
                   </div>
 
                   <div className="space-y-3">
                     {sceneItems.length === 0 && (
                       <div
-                        className="border-2 border-dashed border-muted-foreground/25 rounded-lg p-8 text-center cursor-pointer hover:bg-muted/50 transition-colors"
+                        className="cursor-pointer rounded-lg border-2 border-muted-foreground/25 border-dashed p-8 text-center transition-colors hover:bg-muted/50"
                         onClick={() => sceneInputRef.current?.click()}
                       >
-                        <ImageIcon className="w-8 h-8 mx-auto opacity-20 mb-2" />
-                        <p className="text-sm text-muted-foreground">点击添加场景参考图</p>
-                        <p className="text-xs text-muted-foreground/60 mt-1">最多 {maxScenes} 张</p>
+                        <ImageIcon className="mx-auto mb-2 h-8 w-8 opacity-20" />
+                        <p className="text-muted-foreground text-sm">
+                          点击添加场景参考图
+                        </p>
+                        <p className="mt-1 text-muted-foreground/60 text-xs">
+                          最多 {maxScenes} 张
+                        </p>
                       </div>
                     )}
                     {sceneItems.map((item, index) => (
-                      <div key={item.id} className="border rounded-lg p-3 bg-background relative group">
+                      <div
+                        className="group relative rounded-lg border bg-background p-3"
+                        key={item.id}
+                      >
                         <div className="flex gap-3">
-                          <div className="w-20 h-20 shrink-0 bg-muted rounded-md overflow-hidden border">
-                            <img src={item.image} alt={`场景 ${index + 1}`} className="w-full h-full object-cover" />
+                          <div className="h-20 w-20 shrink-0 overflow-hidden rounded-md border bg-muted">
+                            <img
+                              alt={`场景 ${index + 1}`}
+                              className="h-full w-full object-cover"
+                              src={item.image}
+                            />
                           </div>
                           <div className="flex-1 space-y-1.5">
                             <div className="flex items-center justify-between">
-                              <span className="text-xs font-medium text-muted-foreground">场景 {index + 1}</span>
+                              <span className="font-medium text-muted-foreground text-xs">
+                                场景 {index + 1}
+                              </span>
                               {!isProcessing && (
                                 <Button
-                                  variant="ghost"
-                                  size="icon"
                                   className="h-6 w-6 text-muted-foreground hover:text-destructive"
                                   onClick={() => removeSceneItem(item.id)}
+                                  size="icon"
+                                  variant="ghost"
                                 >
-                                  <Trash2 className="w-3.5 h-3.5" />
+                                  <Trash2 className="h-3.5 w-3.5" />
                                 </Button>
                               )}
                             </div>
                             <Input
+                              className="h-7 text-xs"
+                              disabled={isProcessing}
+                              onChange={(e) =>
+                                updateSceneItem(item.id, {
+                                  targetName: e.target.value,
+                                })
+                              }
                               placeholder="被替换物体（如：椅子、桌子）"
                               value={item.targetName || ""}
-                              onChange={(e) => updateSceneItem(item.id, { targetName: e.target.value })}
-                              className="h-7 text-xs"
-                              disabled={isProcessing}
                             />
                             <Input
-                              placeholder="修改要求（可选）"
-                              value={item.customPrompt || ""}
-                              onChange={(e) => updateSceneItem(item.id, { customPrompt: e.target.value })}
                               className="h-7 text-xs"
                               disabled={isProcessing}
+                              onChange={(e) =>
+                                updateSceneItem(item.id, {
+                                  customPrompt: e.target.value,
+                                })
+                              }
+                              placeholder="修改要求（可选）"
+                              value={item.customPrompt || ""}
                             />
                           </div>
                         </div>
@@ -1469,57 +1680,89 @@ export function SceneFusionView({
                 <div className="space-y-4">
                   <div className="space-y-2">
                     <div className="flex items-center justify-between">
-                      <Label className="text-base font-medium">产品图列表 ({multiProductItems.length}/{MAX_BATCH_ITEMS})</Label>
+                      <Label className="font-medium text-base">
+                        产品图列表 ({multiProductItems.length}/{MAX_BATCH_ITEMS}
+                        )
+                      </Label>
                       <Button
-                        variant="outline"
-                        size="sm"
-                        className="h-7 text-xs gap-1"
+                        className="h-7 gap-1 text-xs"
+                        disabled={
+                          multiProductItems.length >= MAX_BATCH_ITEMS ||
+                          isProcessing
+                        }
                         onClick={() => multiProductInputRef.current?.click()}
-                        disabled={multiProductItems.length >= MAX_BATCH_ITEMS || isProcessing}
+                        size="sm"
+                        variant="outline"
                       >
-                        <Plus className="w-3 h-3" /> 批量添加
+                        <Plus className="h-3 w-3" /> 批量添加
                       </Button>
                       <input
-                        type="file"
-                        ref={multiProductInputRef}
+                        accept="image/png,image/jpeg,image/webp"
                         className="hidden"
                         multiple
-                        accept="image/png,image/jpeg,image/webp"
                         onChange={handleMultiProductUpload}
+                        ref={multiProductInputRef}
+                        type="file"
                       />
                     </div>
                     {multiProductItems.length === 0 ? (
                       <div
-                        className="border-2 border-dashed border-muted-foreground/25 rounded-lg p-8 text-center cursor-pointer hover:bg-muted/50 transition-colors"
+                        className="cursor-pointer rounded-lg border-2 border-muted-foreground/25 border-dashed p-8 text-center transition-colors hover:bg-muted/50"
                         onClick={() => multiProductInputRef.current?.click()}
                       >
-                        <ImageIcon className="w-8 h-8 mx-auto opacity-20 mb-2" />
-                        <p className="text-sm text-muted-foreground">点击上传产品图（可多张）</p>
-                        <p className="text-xs text-muted-foreground/60 mt-1">最多 {MAX_BATCH_ITEMS} 张</p>
+                        <ImageIcon className="mx-auto mb-2 h-8 w-8 opacity-20" />
+                        <p className="text-muted-foreground text-sm">
+                          点击上传产品图（可多张）
+                        </p>
+                        <p className="mt-1 text-muted-foreground/60 text-xs">
+                          最多 {MAX_BATCH_ITEMS} 张
+                        </p>
                       </div>
                     ) : (
                       <div className="space-y-3">
                         {multiProductItems.map((item, index) => (
-                          <div key={item.id} className="border rounded-lg p-3 bg-background relative group">
-                            <div className="flex gap-3 items-center">
-                              <div className="w-20 h-20 shrink-0 bg-muted rounded-md overflow-hidden border">
-                                <img src={item.image} alt={`产品 ${index + 1}`} className="w-full h-full object-cover" />
+                          <div
+                            className="group relative rounded-lg border bg-background p-3"
+                            key={item.id}
+                          >
+                            <div className="flex items-center gap-3">
+                              <div className="h-20 w-20 shrink-0 overflow-hidden rounded-md border bg-muted">
+                                <img
+                                  alt={`产品 ${index + 1}`}
+                                  className="h-full w-full object-cover"
+                                  src={item.image}
+                                />
                               </div>
                               <div className="flex-1">
-                                <div className="text-xs font-medium text-muted-foreground">产品 {index + 1}</div>
-                                <div className="text-xs text-muted-foreground mt-1">
-                                  状态：{item.status === "pending" ? "等待" : item.status === "processing" ? "处理中" : item.status === "completed" ? "完成" : "失败"}
+                                <div className="font-medium text-muted-foreground text-xs">
+                                  产品 {index + 1}
                                 </div>
-                                {item.error && <div className="text-xs text-destructive mt-1 line-clamp-2">{item.error}</div>}
+                                <div className="mt-1 text-muted-foreground text-xs">
+                                  状态：
+                                  {item.status === "pending"
+                                    ? "等待"
+                                    : item.status === "processing"
+                                      ? "处理中"
+                                      : item.status === "completed"
+                                        ? "完成"
+                                        : "失败"}
+                                </div>
+                                {item.error && (
+                                  <div className="mt-1 line-clamp-2 text-destructive text-xs">
+                                    {item.error}
+                                  </div>
+                                )}
                               </div>
                               {!isProcessing && (
                                 <Button
-                                  variant="ghost"
-                                  size="icon"
                                   className="h-7 w-7 text-muted-foreground hover:text-destructive"
-                                  onClick={() => removeMultiProductItem(item.id)}
+                                  onClick={() =>
+                                    removeMultiProductItem(item.id)
+                                  }
+                                  size="icon"
+                                  variant="ghost"
                                 >
-                                  <Trash2 className="w-3.5 h-3.5" />
+                                  <Trash2 className="h-3.5 w-3.5" />
                                 </Button>
                               )}
                             </div>
@@ -1531,13 +1774,15 @@ export function SceneFusionView({
 
                   <div className="space-y-2">
                     <div className="flex items-center justify-between">
-                      <Label className="text-base font-medium">参考图 B（统一替换目标）</Label>
+                      <Label className="font-medium text-base">
+                        参考图 B（统一替换目标）
+                      </Label>
                       {referenceSceneImage && (
                         <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-6 text-xs text-muted-foreground hover:text-destructive"
+                          className="h-6 text-muted-foreground text-xs hover:text-destructive"
                           onClick={() => setReferenceSceneImage(null)}
+                          size="sm"
+                          variant="ghost"
                         >
                           清除
                         </Button>
@@ -1545,49 +1790,52 @@ export function SceneFusionView({
                     </div>
                     <div
                       className={cn(
-                        "border-2 border-dashed rounded-lg p-4 transition-colors text-center cursor-pointer relative group",
+                        "group relative cursor-pointer rounded-lg border-2 border-dashed p-4 text-center transition-colors",
                         referenceSceneImage
                           ? "border-primary/50 bg-primary/5"
                           : "border-muted-foreground/25 hover:border-primary/50 hover:bg-muted/50"
                       )}
-                      onClick={() => !referenceSceneImage && referenceSceneInputRef.current?.click()}
+                      onClick={() =>
+                        !referenceSceneImage &&
+                        referenceSceneInputRef.current?.click()
+                      }
                     >
                       <input
-                        type="file"
-                        ref={referenceSceneInputRef}
-                        className="hidden"
                         accept="image/png,image/jpeg,image/webp"
+                        className="hidden"
                         onChange={handleReferenceSceneUpload}
+                        ref={referenceSceneInputRef}
+                        type="file"
                       />
                       {referenceSceneImage ? (
-                        <div className="relative aspect-square w-full max-w-[220px] mx-auto">
+                        <div className="relative mx-auto aspect-square w-full max-w-[220px]">
                           <img
-                            src={referenceSceneImage}
                             alt="参考图"
-                            className="w-full h-full object-cover rounded-md"
+                            className="h-full w-full rounded-md object-cover"
+                            src={referenceSceneImage}
                           />
                         </div>
                       ) : (
-                        <div className="py-8 flex flex-col items-center gap-2 text-muted-foreground">
-                          <Upload className="w-8 h-8 opacity-50" />
+                        <div className="flex flex-col items-center gap-2 py-8 text-muted-foreground">
+                          <Upload className="h-8 w-8 opacity-50" />
                           <span className="text-sm">点击上传参考图</span>
                         </div>
                       )}
                     </div>
 
                     <Input
+                      className="h-8 text-xs"
+                      disabled={isProcessing}
+                      onChange={(e) => setReferenceTargetName(e.target.value)}
                       placeholder="被替换物体（可选，如：椅子、花瓶）"
                       value={referenceTargetName}
-                      onChange={(e) => setReferenceTargetName(e.target.value)}
-                      className="h-8 text-xs"
-                      disabled={isProcessing}
                     />
                     <Input
-                      placeholder="补充要求（可选）"
-                      value={referenceCustomPrompt}
-                      onChange={(e) => setReferenceCustomPrompt(e.target.value)}
                       className="h-8 text-xs"
                       disabled={isProcessing}
+                      onChange={(e) => setReferenceCustomPrompt(e.target.value)}
+                      placeholder="补充要求（可选）"
+                      value={referenceCustomPrompt}
                     />
                   </div>
                 </div>
@@ -1595,93 +1843,135 @@ export function SceneFusionView({
 
               {mode === "random-bg" && (
                 <div className="space-y-3">
-                  <Label className="text-base font-medium">随机背景参数</Label>
+                  <Label className="font-medium text-base">随机背景参数</Label>
                   <div className="space-y-1.5">
-                    <label className="text-xs text-muted-foreground">生成张数（最多10）</label>
+                    <label className="text-muted-foreground text-xs">
+                      生成张数（最多10）
+                    </label>
                     <Input
-                      type="number"
-                      min={1}
+                      className="h-9 text-sm"
+                      disabled={isProcessing}
                       max={MAX_BATCH_ITEMS}
+                      min={1}
+                      onChange={(e) =>
+                        setRandomCount(
+                          Math.max(
+                            1,
+                            Math.min(
+                              MAX_BATCH_ITEMS,
+                              Number(e.target.value) || 1
+                            )
+                          )
+                        )
+                      }
+                      type="number"
                       value={randomCount}
-                      disabled={isProcessing}
-                      onChange={(e) => setRandomCount(Math.max(1, Math.min(MAX_BATCH_ITEMS, Number(e.target.value) || 1)))}
-                      className="h-9 text-sm"
                     />
                   </div>
                   <div className="space-y-1.5">
-                    <label className="text-xs text-muted-foreground">补充要求（可选）</label>
+                    <label className="text-muted-foreground text-xs">
+                      补充要求（可选）
+                    </label>
                     <Input
-                      value={randomPrompt}
-                      onChange={(e) => setRandomPrompt(e.target.value)}
-                      disabled={isProcessing}
-                      placeholder="例如：暖色调、真实摄影感、商业海报风"
                       className="h-9 text-sm"
+                      disabled={isProcessing}
+                      onChange={(e) => setRandomPrompt(e.target.value)}
+                      placeholder="例如：暖色调、真实摄影感、商业海报风"
+                      value={randomPrompt}
                     />
                   </div>
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-muted-foreground text-xs">
                     使用与“裂变场景”同一套生图模型池，自动随机背景风格生成。
                   </p>
                 </div>
               )}
 
-              {(mode === "rmbg" || mode === "enhance" || mode === "watermark") && (
+              {(mode === "rmbg" ||
+                mode === "enhance" ||
+                mode === "watermark") && (
                 <div className="space-y-2">
                   <div className="flex items-center justify-between">
-                    <Label className="text-base font-medium">
+                    <Label className="font-medium text-base">
                       待处理图片 ({batchItems.length}/{MAX_BATCH_ITEMS})
                     </Label>
                     <Button
-                      variant="outline"
-                      size="sm"
-                      className="h-7 text-xs gap-1"
+                      className="h-7 gap-1 text-xs"
+                      disabled={
+                        batchItems.length >= MAX_BATCH_ITEMS || isProcessing
+                      }
                       onClick={() => batchInputRef.current?.click()}
-                      disabled={batchItems.length >= MAX_BATCH_ITEMS || isProcessing}
+                      size="sm"
+                      variant="outline"
                     >
-                      <Plus className="w-3 h-3" /> 批量添加
+                      <Plus className="h-3 w-3" /> 批量添加
                     </Button>
                     <input
-                      type="file"
-                      ref={batchInputRef}
+                      accept="image/png,image/jpeg,image/webp"
                       className="hidden"
                       multiple
-                      accept="image/png,image/jpeg,image/webp"
                       onChange={handleBatchUpload}
+                      ref={batchInputRef}
+                      type="file"
                     />
                   </div>
 
                   <div className="space-y-3">
                     {batchItems.length === 0 && (
                       <div
-                        className="border-2 border-dashed border-muted-foreground/25 rounded-lg p-8 text-center cursor-pointer hover:bg-muted/50 transition-colors"
+                        className="cursor-pointer rounded-lg border-2 border-muted-foreground/25 border-dashed p-8 text-center transition-colors hover:bg-muted/50"
                         onClick={() => batchInputRef.current?.click()}
                       >
-                        <ImageIcon className="w-8 h-8 mx-auto opacity-20 mb-2" />
-                        <p className="text-sm text-muted-foreground">点击上传待处理图片</p>
-                        <p className="text-xs text-muted-foreground/60 mt-1">最多 {MAX_BATCH_ITEMS} 张</p>
+                        <ImageIcon className="mx-auto mb-2 h-8 w-8 opacity-20" />
+                        <p className="text-muted-foreground text-sm">
+                          点击上传待处理图片
+                        </p>
+                        <p className="mt-1 text-muted-foreground/60 text-xs">
+                          最多 {MAX_BATCH_ITEMS} 张
+                        </p>
                       </div>
                     )}
 
                     {batchItems.map((item, index) => (
-                      <div key={item.id} className="border rounded-lg p-3 bg-background relative group">
-                        <div className="flex gap-3 items-center">
-                          <div className="w-20 h-20 shrink-0 bg-muted rounded-md overflow-hidden border">
-                            <img src={item.image} alt={`图片 ${index + 1}`} className="w-full h-full object-cover" />
+                      <div
+                        className="group relative rounded-lg border bg-background p-3"
+                        key={item.id}
+                      >
+                        <div className="flex items-center gap-3">
+                          <div className="h-20 w-20 shrink-0 overflow-hidden rounded-md border bg-muted">
+                            <img
+                              alt={`图片 ${index + 1}`}
+                              className="h-full w-full object-cover"
+                              src={item.image}
+                            />
                           </div>
                           <div className="flex-1">
-                            <div className="text-xs font-medium text-muted-foreground">图片 {index + 1}</div>
-                            <div className="text-xs text-muted-foreground mt-1">
-                              状态：{item.status === "pending" ? "等待" : item.status === "processing" ? "处理中" : item.status === "completed" ? "完成" : "失败"}
+                            <div className="font-medium text-muted-foreground text-xs">
+                              图片 {index + 1}
                             </div>
-                            {item.error && <div className="text-xs text-destructive mt-1 line-clamp-2">{item.error}</div>}
+                            <div className="mt-1 text-muted-foreground text-xs">
+                              状态：
+                              {item.status === "pending"
+                                ? "等待"
+                                : item.status === "processing"
+                                  ? "处理中"
+                                  : item.status === "completed"
+                                    ? "完成"
+                                    : "失败"}
+                            </div>
+                            {item.error && (
+                              <div className="mt-1 line-clamp-2 text-destructive text-xs">
+                                {item.error}
+                              </div>
+                            )}
                           </div>
                           {!isProcessing && (
                             <Button
-                              variant="ghost"
-                              size="icon"
                               className="h-7 w-7 text-muted-foreground hover:text-destructive"
                               onClick={() => removeBatchItem(item.id)}
+                              size="icon"
+                              variant="ghost"
                             >
-                              <Trash2 className="w-3.5 h-3.5" />
+                              <Trash2 className="h-3.5 w-3.5" />
                             </Button>
                           )}
                         </div>
@@ -1693,48 +1983,55 @@ export function SceneFusionView({
             </div>
           </div>
 
-          <div className="p-4 border-t bg-background shrink-0">
+          <div className="shrink-0 border-t bg-background p-4">
             <Button
-              className="w-full h-12 text-base font-semibold shadow-sm bg-primary text-primary-foreground hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground disabled:opacity-100"
-              size="lg"
-              onClick={startProcessing}
+              className="h-12 w-full bg-primary font-semibold text-base text-primary-foreground shadow-sm hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground disabled:opacity-100"
               disabled={isProcessing || !modeCanStart}
+              onClick={startProcessing}
+              size="lg"
             >
               {isProcessing ? (
                 <>
-                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                   处理中...
                 </>
               ) : (
                 <>
-                  <Sparkles className="w-4 h-4 mr-2" />
-                  {getModeActionLabel(mode, mode === "random-bg" ? randomCount : resultItems.length)}
+                  <Sparkles className="mr-2 h-4 w-4" />
+                  {getModeActionLabel(
+                    mode,
+                    mode === "random-bg" ? randomCount : resultItems.length
+                  )}
                 </>
               )}
             </Button>
           </div>
         </div>
 
-        <div className="flex h-full min-h-0 flex-1 flex-col bg-white dark:bg-zinc-950">
-          <div className="h-16 px-4 pr-14 border-b flex items-center justify-between bg-white dark:bg-zinc-950 shrink-0">
+        <div className="flex h-full min-h-0 flex-1 flex-col bg-background">
+          <div className="flex h-16 shrink-0 items-center justify-between border-b bg-background px-4 pr-14">
             <h3 className="font-medium">处理结果</h3>
             {(completedResultItems.length > 0 || onBatchAddToCanvas) && (
               <div className="flex items-center gap-2">
                 {onBatchAddToCanvas && completedResultItems.length > 0 && (
                   <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={handleBatchAddToCanvas}
                     disabled={!resultAllFinished}
-                    title={resultAllFinished ? "将处理结果批量添加到画布" : "请等待所有任务处理完成"}
+                    onClick={handleBatchAddToCanvas}
+                    size="sm"
+                    title={
+                      resultAllFinished
+                        ? "将处理结果批量添加到画布"
+                        : "请等待所有任务处理完成"
+                    }
+                    variant="outline"
                   >
-                    <Plus className="w-4 h-4 mr-2" />
+                    <Plus className="mr-2 h-4 w-4" />
                     批量添加到画布
                   </Button>
                 )}
                 {completedResultItems.length > 0 && (
-                  <Button variant="outline" size="sm" onClick={downloadAll}>
-                    <Download className="w-4 h-4 mr-2" />
+                  <Button onClick={downloadAll} size="sm" variant="outline">
+                    <Download className="mr-2 h-4 w-4" />
                     全部下载
                   </Button>
                 )}
@@ -1742,27 +2039,33 @@ export function SceneFusionView({
             )}
           </div>
 
-          <ScrollArea className="flex-1 min-h-0">
+          <ScrollArea className="min-h-0 flex-1">
             <div className="p-4">
               {resultItems.length === 0 ? (
-                <div className="h-full flex flex-col items-center justify-center text-muted-foreground opacity-50 min-h-[300px]">
-                  <Wand2 className="w-16 h-16 mb-4" />
+                <div className="flex h-full min-h-[300px] flex-col items-center justify-center text-muted-foreground opacity-50">
+                  <Wand2 className="mb-4 h-16 w-16" />
                   <p>选择模式并上传图片后，结果会显示在这里</p>
                 </div>
               ) : (
-                <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
+                <div className="grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-4">
                   {resultItems.map((item, index) => (
-                    <div key={item.id} className="border rounded-lg overflow-hidden bg-white dark:bg-zinc-950 shadow-sm flex flex-col">
-                      <div className="p-2 border-b text-xs text-muted-foreground bg-muted/30 flex justify-between items-center">
+                    <div
+                      className="flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm"
+                      key={item.id}
+                    >
+                      <div className="flex items-center justify-between border-b bg-muted/30 p-2 text-muted-foreground text-xs">
                         <span>任务 {index + 1}</span>
                         <span
                           className={cn(
-                            "capitalize px-1.5 py-0.5 rounded text-[10px]",
-                            item.status === "completed" && "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
-                            item.status === "failed" && "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+                            "rounded px-1.5 py-0.5 text-[10px] capitalize",
+                            item.status === "completed" &&
+                              "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+                            item.status === "failed" &&
+                              "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
                             item.status === "processing" &&
                               "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
-                            item.status === "pending" && "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
+                            item.status === "pending" &&
+                              "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
                           )}
                         >
                           {item.status === "completed"
@@ -1777,44 +2080,68 @@ export function SceneFusionView({
 
                       <div
                         className={cn(
-                          "aspect-[3/4] bg-muted/20 relative group",
-                          item.status === "completed" && (item.result || item.originalUrl) && "cursor-zoom-in"
+                          "group relative aspect-[3/4] bg-muted/20",
+                          item.status === "completed" &&
+                            (item.result || item.originalUrl) &&
+                            "cursor-zoom-in"
                         )}
                         onClick={() => {
                           const previewUrl = item.originalUrl || item.result;
                           if (item.status === "completed" && previewUrl) {
-                            openResultPreview(previewUrl, `任务 ${index + 1} 预览`);
+                            openResultPreview(
+                              previewUrl,
+                              `任务 ${index + 1} 预览`
+                            );
                           }
                         }}
                         onKeyDown={(event) => {
-                          if (event.key !== "Enter" && event.key !== " ") return;
+                          if (event.key !== "Enter" && event.key !== " ")
+                            return;
                           const previewUrl = item.originalUrl || item.result;
                           if (item.status === "completed" && previewUrl) {
                             event.preventDefault();
-                            openResultPreview(previewUrl, `任务 ${index + 1} 预览`);
+                            openResultPreview(
+                              previewUrl,
+                              `任务 ${index + 1} 预览`
+                            );
                           }
                         }}
                         role="button"
-                        tabIndex={item.status === "completed" && (item.result || item.originalUrl) ? 0 : -1}
+                        tabIndex={
+                          item.status === "completed" &&
+                          (item.result || item.originalUrl)
+                            ? 0
+                            : -1
+                        }
                       >
                         {item.result ? (
-                          <img src={item.result} alt="处理结果" className="w-full h-full object-cover" />
+                          <img
+                            alt="处理结果"
+                            className="h-full w-full object-cover"
+                            src={item.result}
+                          />
                         ) : (
-                          <div className="w-full h-full flex flex-col items-center justify-center p-0 relative overflow-hidden">
-                            <img src={item.image} alt="原图" className="absolute inset-0 w-full h-full object-cover opacity-35" />
+                          <div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden p-0">
+                            <img
+                              alt="原图"
+                              className="absolute inset-0 h-full w-full object-cover opacity-35"
+                              src={item.image}
+                            />
                             {item.status === "processing" ? (
                               <div className="relative z-10 flex flex-col items-center gap-2">
-                                <Loader2 className="w-7 h-7 animate-spin text-primary" />
-                                <span className="text-xs text-white/95 bg-black/50 px-2 py-1 rounded">处理中...</span>
+                                <Loader2 className="h-7 w-7 animate-spin text-primary" />
+                                <span className="rounded bg-black/50 px-2 py-1 text-white/95 text-xs">
+                                  处理中...
+                                </span>
                               </div>
                             ) : item.status === "failed" ? (
-                              <div className="relative z-10 text-center px-3">
-                                <p className="text-xs text-white bg-black/55 px-2 py-1 rounded line-clamp-2">
+                              <div className="relative z-10 px-3 text-center">
+                                <p className="line-clamp-2 rounded bg-black/55 px-2 py-1 text-white text-xs">
                                   {item.error || "处理失败"}
                                 </p>
                               </div>
                             ) : (
-                              <span className="relative z-10 text-xs font-medium bg-black/50 text-white px-2 py-1 rounded">
+                              <span className="relative z-10 rounded bg-black/50 px-2 py-1 font-medium text-white text-xs">
                                 等待处理
                               </span>
                             )}
@@ -1822,26 +2149,29 @@ export function SceneFusionView({
                         )}
 
                         {item.status === "completed" && (
-                          <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                          <div className="absolute inset-0 flex items-center justify-center gap-2 bg-black/60 opacity-0 transition-opacity group-hover:opacity-100">
                             <Button
-                              size="icon"
-                              variant="secondary"
                               onClick={(event) => {
                                 event.stopPropagation();
-                                downloadImage(item.originalUrl || item.result!, `batch-${index + 1}.png`);
+                                downloadImage(
+                                  item.originalUrl || item.result!,
+                                  `batch-${index + 1}.png`
+                                );
                               }}
-                            >
-                              <Download className="w-4 h-4" />
-                            </Button>
-                            <Button
                               size="icon"
                               variant="secondary"
+                            >
+                              <Download className="h-4 w-4" />
+                            </Button>
+                            <Button
                               onClick={(event) => {
                                 event.stopPropagation();
                                 retrySingleItem(item);
                               }}
+                              size="icon"
+                              variant="secondary"
                             >
-                              <RefreshCw className="w-4 h-4" />
+                              <RefreshCw className="h-4 w-4" />
                             </Button>
                           </div>
                         )}
@@ -1856,24 +2186,24 @@ export function SceneFusionView({
       </div>
       {previewImageUrl && (
         <div
-          className="fixed inset-0 z-[31000] bg-black/80 backdrop-blur-sm flex items-center justify-center p-4"
+          className="fixed inset-0 z-[31000] flex items-center justify-center bg-black/80 p-4 backdrop-blur-sm"
           onClick={closeResultPreview}
         >
           <div
-            className="relative w-full max-w-6xl max-h-[90vh] bg-background rounded-lg border shadow-xl overflow-hidden"
+            className="relative max-h-[90vh] w-full max-w-6xl overflow-hidden rounded-lg border bg-background shadow-xl"
             onClick={(event) => event.stopPropagation()}
           >
             <div className="flex h-12 items-center justify-between border-b px-4">
-              <span className="text-sm font-medium">{previewImageTitle}</span>
-              <Button size="icon" variant="ghost" onClick={closeResultPreview}>
-                <X className="w-4 h-4" />
+              <span className="font-medium text-sm">{previewImageTitle}</span>
+              <Button onClick={closeResultPreview} size="icon" variant="ghost">
+                <X className="h-4 w-4" />
               </Button>
             </div>
             <div className="flex items-center justify-center bg-black/5 p-3">
               <img
-                src={previewImageUrl}
                 alt={previewImageTitle}
-                className="max-h-[calc(90vh-72px)] w-auto max-w-full object-contain rounded"
+                className="max-h-[calc(90vh-72px)] w-auto max-w-full rounded object-contain"
+                src={previewImageUrl}
               />
             </div>
           </div>