121 lines
3.4 KiB
TypeScript
121 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import dynamic from "next/dynamic";
|
|
import { useParams, useSearchParams } from "next/navigation";
|
|
import { createContext, type ReactNode, useContext, useMemo } from "react";
|
|
import { CanvasLogoLoadingView } from "@/components/canvas/canvas-logo-loading";
|
|
import type { CanvasInitialProject } from "@/types/canvas";
|
|
|
|
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 = "",
|
|
initialSiteLogo = null,
|
|
initialSiteLogoDark = null,
|
|
initialSiteName = "AI Chatbot",
|
|
initialWorkspaceType = "",
|
|
initialProject = null,
|
|
}: {
|
|
initialId: string;
|
|
initialMode?: string;
|
|
initialSiteLogo?: string | null;
|
|
initialSiteLogoDark?: string | null;
|
|
initialSiteName?: string | null;
|
|
initialWorkspaceType?: string;
|
|
initialProject?: CanvasInitialProject | null;
|
|
}) {
|
|
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 ||
|
|
initialProject?.workspaceType ||
|
|
"";
|
|
const requestedAgentMode = mode === "agent";
|
|
const isVideoMode = !requestedAgentMode && (mode === "video" || requestedWorkspaceType === "video");
|
|
const legacyParams = useMemo(() => Promise.resolve({ id }), [id]);
|
|
const loadingBrand = useMemo(
|
|
() => ({
|
|
siteLogo: initialSiteLogo,
|
|
siteLogoDark: initialSiteLogoDark,
|
|
siteName: initialSiteName,
|
|
}),
|
|
[initialSiteLogo, initialSiteLogoDark, initialSiteName]
|
|
);
|
|
|
|
if (!id) {
|
|
return (
|
|
<CanvasLoadingBrandProvider value={loadingBrand}>
|
|
<CanvasRouteLoader label="正在加载画布..." />
|
|
</CanvasLoadingBrandProvider>
|
|
);
|
|
}
|
|
|
|
if (isVideoMode) {
|
|
return (
|
|
<CanvasLoadingBrandProvider value={loadingBrand}>
|
|
<LiblibVideoCanvasReplica canvasId={id} />
|
|
</CanvasLoadingBrandProvider>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<CanvasLoadingBrandProvider value={loadingBrand}>
|
|
<CanvasEditorLegacyPage
|
|
initialProject={initialProject}
|
|
params={legacyParams}
|
|
/>
|
|
</CanvasLoadingBrandProvider>
|
|
);
|
|
}
|
|
|
|
type CanvasLoadingBrand = {
|
|
siteLogo?: string | null;
|
|
siteLogoDark?: string | null;
|
|
siteName?: string | null;
|
|
};
|
|
|
|
const CanvasLoadingBrandContext = createContext<CanvasLoadingBrand>({});
|
|
|
|
function CanvasLoadingBrandProvider({
|
|
children,
|
|
value,
|
|
}: {
|
|
children: ReactNode;
|
|
value: CanvasLoadingBrand;
|
|
}) {
|
|
return (
|
|
<CanvasLoadingBrandContext.Provider value={value}>
|
|
{children}
|
|
</CanvasLoadingBrandContext.Provider>
|
|
);
|
|
}
|
|
|
|
function CanvasRouteLoader({ label }: { label: string }) {
|
|
const brand = useContext(CanvasLoadingBrandContext);
|
|
|
|
return (
|
|
<CanvasLogoLoadingView
|
|
label={label}
|
|
siteLogo={brand.siteLogo}
|
|
siteLogoDark={brand.siteLogoDark}
|
|
siteName={brand.siteName}
|
|
/>
|
|
);
|
|
}
|