weitao
/
popiart-node-canvas
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

节点修改分支

feature/new_node
TianYun 1 month ago
parent
21954ef9d8
commit
b38d4b339e
2 changed files with 119 additions and 113 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 117
      src/app/canvas/page.tsx
  2. 115
      src/app/page.tsx

117
src/app/canvas/page.tsx
View File

@ -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
View File

@ -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() { export default function Home() {
return ( return (
<Suspense fallback={null}> <div>11111111111111</div>
<CanvasPageContent />
</Suspense>
); );
} }
Write Preview
Loading…
Cancel
Save