60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { Loader2 } from "lucide-react";
|
|
import dynamic from "next/dynamic";
|
|
import { useParams, useSearchParams } from "next/navigation";
|
|
import { useMemo } from "react";
|
|
|
|
const CanvasEditorLegacyPage = dynamic(() => import("./CanvasEditorLegacyPageClient"), {
|
|
loading: () => <CanvasRouteLoader label="正在加载画布..." />,
|
|
ssr: false,
|
|
});
|
|
|
|
const LiblibVideoCanvasReplica = dynamic(
|
|
() => import("@/components/canvas/LiblibVideoCanvasReplica").then((module) => module.LiblibVideoCanvasReplica),
|
|
{
|
|
loading: () => <CanvasRouteLoader label="正在加载视频画布..." />,
|
|
ssr: false,
|
|
}
|
|
);
|
|
|
|
export function CanvasPageClientRouter({
|
|
initialId,
|
|
initialMode = "",
|
|
initialWorkspaceType = "",
|
|
}: {
|
|
initialId: string;
|
|
initialMode?: string;
|
|
initialWorkspaceType?: string;
|
|
}) {
|
|
const routeParams = useParams();
|
|
const searchParams = useSearchParams();
|
|
const routeId = routeParams?.id;
|
|
const id = Array.isArray(routeId) ? routeId[0] || initialId : typeof routeId === "string" ? routeId : initialId;
|
|
const mode = searchParams.get("mode") || initialMode;
|
|
const requestedWorkspaceType =
|
|
searchParams.get("workspaceType") || initialWorkspaceType;
|
|
const requestedAgentMode = mode === "agent";
|
|
const isVideoMode = !requestedAgentMode && (mode === "video" || requestedWorkspaceType === "video");
|
|
const legacyParams = useMemo(() => Promise.resolve({ id }), [id]);
|
|
|
|
if (!id) {
|
|
return <CanvasRouteLoader label="正在加载画布..." />;
|
|
}
|
|
|
|
if (isVideoMode) {
|
|
return <LiblibVideoCanvasReplica canvasId={id} />;
|
|
}
|
|
|
|
return <CanvasEditorLegacyPage params={legacyParams} />;
|
|
}
|
|
|
|
function CanvasRouteLoader({ label }: { label: string }) {
|
|
return (
|
|
<div className="flex h-dvh w-full items-center justify-center bg-[#151515] text-white/70">
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
{label}
|
|
</div>
|
|
);
|
|
}
|