feat: move enhance pro into realtime canvas workspace

app/canvas/[id]/realtime/page.tsx

@@ -1,16 +1,19 @@
 "use client";
 
+import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useCallback } from "react";
-import { useParams, useRouter } from "next/navigation";
 import { toast } from "sonner";
 import { RealtimeCanvasDialog } from "@/components/canvas/RealtimeCanvasDialog";
 import { canvasService } from "@/services/canvas";
-import { useCanvasStore, canvasSelectors } from "@/store/canvas";
+import { canvasSelectors, useCanvasStore } from "@/store/canvas";
 
 export default function CanvasRealtimePage() {
   const router = useRouter();
   const routeParams = useParams();
+  const searchParams = useSearchParams();
   const id = String(routeParams?.id || "");
+  const initialMode =
+    searchParams?.get("mode") === "enhance-pro" ? "enhance-pro" : "realtime";
 
   const viewport = useCanvasStore(canvasSelectors.viewport);
   const selectedNodeIds = useCanvasStore(canvasSelectors.selectedNodeIds);
@@ -20,7 +23,9 @@ export default function CanvasRealtimePage() {
 
   const selectedImageNode =
     selectedNodeIds.length === 1
-      ? nodes.find((node) => node.id === selectedNodeIds[0] && node.type === "image")
+      ? nodes.find(
+          (node) => node.id === selectedNodeIds[0] && node.type === "image"
+        )
       : null;
 
   const handleOpenChange = useCallback(
@@ -33,17 +38,47 @@ export default function CanvasRealtimePage() {
   );
 
   const handleApplyResult = useCallback(
-    async ({ imageUrl, prompt }: { imageUrl: string; prompt: string }) => {
+    async ({
+      imageUrl,
+      prompt,
+      title,
+      model,
+      width,
+      height,
+    }: {
+      imageUrl: string;
+      prompt: string;
+      title?: string;
+      model?: string;
+      width?: number;
+      height?: number;
+    }) => {
       const viewportX = viewport.x || 0;
       const viewportY = viewport.y || 0;
       const viewportZoom = viewport.zoom || 1;
-      const stageWidth = typeof window !== "undefined" ? window.innerWidth : 1280;
-      const stageHeight = typeof window !== "undefined" ? window.innerHeight : 720;
-      const targetWidth = 360;
-      const targetHeight = 360;
+      const stageWidth =
+        typeof window !== "undefined" ? window.innerWidth : 1280;
+      const stageHeight =
+        typeof window !== "undefined" ? window.innerHeight : 720;
+      const safeWidth = Number(width);
+      const safeHeight = Number(height);
+      const hasNaturalSize = safeWidth > 0 && safeHeight > 0;
+      const maxPreviewEdge = 420;
+      const fallbackSize = 360;
+      const scale = hasNaturalSize
+        ? Math.min(1, maxPreviewEdge / Math.max(safeWidth, safeHeight))
+        : 1;
+      const targetWidth = hasNaturalSize
+        ? Math.max(140, Math.round(safeWidth * scale))
+        : fallbackSize;
+      const targetHeight = hasNaturalSize
+        ? Math.max(140, Math.round(safeHeight * scale))
+        : fallbackSize;
 
-      const x = (stageWidth * 0.45 - viewportX) / viewportZoom - targetWidth / 2;
-      const y = (stageHeight * 0.45 - viewportY) / viewportZoom - targetHeight / 2;
+      const x =
+        (stageWidth * 0.45 - viewportX) / viewportZoom - targetWidth / 2;
+      const y =
+        (stageHeight * 0.45 - viewportY) / viewportZoom - targetHeight / 2;
 
       addNode({
         type: "image",
@@ -52,9 +87,9 @@ export default function CanvasRealtimePage() {
         data: {
           src: imageUrl,
           status: "completed",
-          title: "实时画布结果",
+          title: title || "实时画布结果",
           prompt,
-          model: "bfl/flux-2",
+          model: model || "bfl/flux-2",
         },
         connections: [],
       });
@@ -65,18 +100,23 @@ export default function CanvasRealtimePage() {
         console.error("[RealtimeCanvasPage] 保存结果失败:", error);
       }
 
-      toast.success("实时画布结果已添加");
+      toast.success(`${title || "结果"}已添加到画布`);
     },
     [addNode, getCanvasState, id, viewport.x, viewport.y, viewport.zoom]
   );
 
   return (
     <RealtimeCanvasDialog
-      standalone
-      open
-      onOpenChange={handleOpenChange}
-      initialImageUrl={selectedImageNode ? ((selectedImageNode.data as any)?.src as string) : null}
+      initialImageUrl={
+        selectedImageNode
+          ? ((selectedImageNode.data as any)?.src as string)
+          : null
+      }
+      initialMode={initialMode}
       onApplyResult={handleApplyResult}
+      onOpenChange={handleOpenChange}
+      open
+      standalone
     />
   );
 }

services/canvas/index.ts

@@ -53,7 +53,9 @@ export interface EnhanceProImageResult {
 }
 
 export interface EnhanceProRequestParams {
-  imageUrl: string;
+  imageUrl?: string;
+  image_base64?: string;
+  mimeType?: string;
   prompt?: string;
   chatId?: string | null;
   messageId?: string | null;