Browse Source

节点修改分支

feature/new_node
TianYun 1 month ago
parent
commit
b38d4b339e
  1. 117
      src/app/canvas/page.tsx
  2. 115
      src/app/page.tsx

117
src/app/canvas/page.tsx

@ -0,0 +1,117 @@
"use client";
import { Suspense, useEffect, useState } from "react";
import { ReactFlowProvider } from "@xyflow/react";
import { Header } from "@/components/Header";
import { WorkflowCanvas } from "@/components/WorkflowCanvas";
import { FloatingActionBar } from "@/components/FloatingActionBar";
import { AnnotationModal } from "@/components/AnnotationModal";
import { PopiaiEmbedBridge } from "@/components/PopiaiEmbedBridge";
import { useWorkflowStore } from "@/store/workflowStore";
import { FTUXModal } from "@/components/onboarding/FTUXModal";
import { getFTUXCompleted, setFTUXCompleted } from "@/store/utils/localStorage";
import { useFTUXStore } from "@/store/ftuxStore";
import { useSearchParams } from "next/navigation";
import { getStoredLoginToken, useUserStore } from "@/store/userStore";
import { installAuthFetchInterceptor } from "@/utils/authFetch";
import { useModelStore } from "@/store/modelStore";
import { isPopiProviderMode } from "@/lib/providerMode";
import { LoginModal } from "@/components/auth/LoginModal";
if (typeof window !== "undefined") {
installAuthFetchInterceptor();
}
function CanvasPageContent() {
const initializeAutoSave = useWorkflowStore(
(state) => state.initializeAutoSave
);
const cleanupAutoSave = useWorkflowStore((state) => state.cleanupAutoSave);
const setShowQuickstart = useWorkflowStore((state) => state.setShowQuickstart);
const fetchUserInfo = useUserStore((state) => state.fetchUserInfo);
const initializePopiModels = useModelStore((state) => state.initializePopiModels);
const [showFTUX, setShowFTUX] = useState(false);
const searchParams = useSearchParams();
const token = searchParams.get("token") || '';
useEffect(() => {
if (token || getStoredLoginToken()) {
void fetchUserInfo(token, { forceRefresh: true });
}
}, [fetchUserInfo, token]);
useEffect(() => {
if (!isPopiProviderMode()) return;
void initializePopiModels();
}, [initializePopiModels]);
useEffect(() => {
initializeAutoSave();
return () => cleanupAutoSave();
}, [initializeAutoSave, cleanupAutoSave]);
useEffect(() => {
const handleBeforeUnload = (e: BeforeUnloadEvent) => {
if (useWorkflowStore.getState().hasUnsavedChanges) {
e.preventDefault();
}
};
window.addEventListener("beforeunload", handleBeforeUnload);
return () => window.removeEventListener("beforeunload", handleBeforeUnload);
}, []);
// Client-side only FTUX check (SSR-safe)
useEffect(() => {
const isPopiaiEmbed = new URLSearchParams(window.location.search).get("embed") === "popiai";
if (isPopiaiEmbed) {
setShowFTUX(false);
setShowQuickstart(false);
useFTUXStore.getState().resetTutorial();
return;
}
if (!getFTUXCompleted()) {
setShowFTUX(true);
}
}, [setShowQuickstart]);
const handleFTUXComplete = () => {
setShowFTUX(false);
setFTUXCompleted(true);
};
const handleStartTutorial = () => {
setShowFTUX(false);
setFTUXCompleted(true);
setShowQuickstart(false); // Close WelcomeModal if open
useFTUXStore.getState().startTutorial();
};
return (
<ReactFlowProvider>
<div className="h-screen flex flex-col">
<Header />
<WorkflowCanvas />
<FloatingActionBar />
<AnnotationModal />
<PopiaiEmbedBridge />
<LoginModal />
{showFTUX && (
<FTUXModal
onComplete={handleFTUXComplete}
onStartTutorial={handleStartTutorial}
/>
)}
</div>
</ReactFlowProvider>
);
}
export default function Home() {
return (
<Suspense fallback={null}>
<CanvasPageContent />
</Suspense>
);
}

115
src/app/page.tsx

@ -1,117 +1,6 @@
"use client";
import { Suspense, useEffect, useState } from "react";
import { ReactFlowProvider } from "@xyflow/react";
import { Header } from "@/components/Header";
import { WorkflowCanvas } from "@/components/WorkflowCanvas";
import { FloatingActionBar } from "@/components/FloatingActionBar";
import { AnnotationModal } from "@/components/AnnotationModal";
import { PopiaiEmbedBridge } from "@/components/PopiaiEmbedBridge";
import { useWorkflowStore } from "@/store/workflowStore";
import { FTUXModal } from "@/components/onboarding/FTUXModal";
import { getFTUXCompleted, setFTUXCompleted } from "@/store/utils/localStorage";
import { useFTUXStore } from "@/store/ftuxStore";
import { useSearchParams } from "next/navigation";
import { getStoredLoginToken, useUserStore } from "@/store/userStore";
import { installAuthFetchInterceptor } from "@/utils/authFetch";
import { useModelStore } from "@/store/modelStore";
import { isPopiProviderMode } from "@/lib/providerMode";
import { LoginModal } from "@/components/auth/LoginModal";
if (typeof window !== "undefined") {
installAuthFetchInterceptor();
}
function CanvasPageContent() {
const initializeAutoSave = useWorkflowStore(
(state) => state.initializeAutoSave
);
const cleanupAutoSave = useWorkflowStore((state) => state.cleanupAutoSave);
const setShowQuickstart = useWorkflowStore((state) => state.setShowQuickstart);
const fetchUserInfo = useUserStore((state) => state.fetchUserInfo);
const initializePopiModels = useModelStore((state) => state.initializePopiModels);
const [showFTUX, setShowFTUX] = useState(false);
const searchParams = useSearchParams();
const token = searchParams.get("token") || '';
useEffect(() => {
if (token || getStoredLoginToken()) {
void fetchUserInfo(token, { forceRefresh: true });
}
}, [fetchUserInfo, token]);
useEffect(() => {
if (!isPopiProviderMode()) return;
void initializePopiModels();
}, [initializePopiModels]);
useEffect(() => {
initializeAutoSave();
return () => cleanupAutoSave();
}, [initializeAutoSave, cleanupAutoSave]);
useEffect(() => {
const handleBeforeUnload = (e: BeforeUnloadEvent) => {
if (useWorkflowStore.getState().hasUnsavedChanges) {
e.preventDefault();
}
};
window.addEventListener("beforeunload", handleBeforeUnload);
return () => window.removeEventListener("beforeunload", handleBeforeUnload);
}, []);
// Client-side only FTUX check (SSR-safe)
useEffect(() => {
const isPopiaiEmbed = new URLSearchParams(window.location.search).get("embed") === "popiai";
if (isPopiaiEmbed) {
setShowFTUX(false);
setShowQuickstart(false);
useFTUXStore.getState().resetTutorial();
return;
}
if (!getFTUXCompleted()) {
setShowFTUX(true);
}
}, [setShowQuickstart]);
const handleFTUXComplete = () => {
setShowFTUX(false);
setFTUXCompleted(true);
};
const handleStartTutorial = () => {
setShowFTUX(false);
setFTUXCompleted(true);
setShowQuickstart(false); // Close WelcomeModal if open
useFTUXStore.getState().startTutorial();
};
return (
<ReactFlowProvider>
<div className="h-screen flex flex-col">
<Header />
<WorkflowCanvas />
<FloatingActionBar />
<AnnotationModal />
<PopiaiEmbedBridge />
<LoginModal />
{showFTUX && (
<FTUXModal
onComplete={handleFTUXComplete}
onStartTutorial={handleStartTutorial}
/>
)}
</div>
</ReactFlowProvider>
);
}
export default function Home() {
return (
<Suspense fallback={null}>
<CanvasPageContent />
</Suspense>
<div>11111111111111</div>
);
}
}
Loading…
Cancel
Save