refactor: SchedulesPageRoute.tsx, UserManagementPage.tsx, ProjectManagementPage.tsx

frontend/app/features/schedules/SchedulePage.tsx

@@ -21,11 +21,12 @@ import {
   type ScheduleRunSummary,
 } from "../../services/api";
 
-import { useApi } from "../../context/AuthContext";
+import { useApi, useAuth } from "../../context/AuthContext";
 import Icon from "../../components/common/Icon";
 import { ScheduleList } from "./ScheduleList";
 import { ArtifactList } from "./ArtifactList";
 import { ScheduleCanvasHeader } from "./ScheduleCanvasHeader";
+import { useSchedulesStore } from "./state/schedulesStore";
 import "../../styles/schedule.css";
 
 type Notice = {
@@ -231,17 +232,26 @@ export default function SchedulePage({
   onNotify: (notice: Notice) => void;
   onConnectionChange: (online: boolean) => void;
 }) {
-  const [schedules, setSchedules] = useState<Schedule[]>([]);
-  const [artifacts, setArtifacts] = useState<ScheduleArtifact[]>([]);
-  const [schedule, setSchedule] = useState<Schedule | null>(null);
-  const scheduleRef = useRef<Schedule | null>(null);
+  const { currentWorkspace } = useAuth();
+  const workspaceId = currentWorkspace?.workspace_id;
+
+  // 核心数据 state 迁 store(其余 form/dialog/selected/runs 仍用 useState)
+  const schedules = useSchedulesStore((s) => s.schedules);
+  const artifacts = useSchedulesStore((s) => s.artifacts);
+  const schedule = useSchedulesStore((s) => s.schedule);
+  const loading = useSchedulesStore((s) => s.loading);
+  const busy = useSchedulesStore((s) => s.busy);
+  const setSchedules = useSchedulesStore((s) => s.setSchedules);
+  const setArtifacts = useSchedulesStore((s) => s.setArtifacts);
+  const setSchedule = useSchedulesStore((s) => s.setSchedule);
+  const setLoading = useSchedulesStore((s) => s.setLoading);
+  const setBusy = useSchedulesStore((s) => s.setBusy);
+
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
   const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null);
   const [linkSourceId, setLinkSourceId] = useState<string | null>(null);
   const [scheduleKeyword, setScheduleKeyword] = useState("");
   const [artifactKeyword, setArtifactKeyword] = useState("");
-  const [loading, setLoading] = useState(true);
-  const [busy, setBusy] = useState<string | null>(null);
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
   const [newScheduleName, setNewScheduleName] = useState("");
   const [contextMenu, setContextMenu] = useState<ScheduleContextMenu | null>(null);
@@ -263,10 +273,6 @@ export default function SchedulePage({
     (item) => item.edge_id === selectedEdgeId,
   ) ?? null;
 
-  useEffect(() => {
-    scheduleRef.current = schedule;
-  }, [schedule]);
-
   useEffect(() => {
     if (schedule) setScheduleForm(scheduleToForm(schedule));
   }, [schedule?.schedule_id, schedule?.workflow_version]);
@@ -337,7 +343,7 @@ export default function SchedulePage({
         scheduleId,
         limit: 20,
       });
-      if (scheduleRef.current?.schedule_id === scheduleId) {
+      if (useSchedulesStore.getState().schedule?.schedule_id === scheduleId) {
         setRuns(items);
       }
       onConnectionChange(true);
@@ -360,7 +366,7 @@ export default function SchedulePage({
     setSchedules(scheduleItems);
     setArtifacts(artifactItems);
     const targetId = preferredScheduleId
-      ?? scheduleRef.current?.schedule_id
+      ?? useSchedulesStore.getState().schedule?.schedule_id
       ?? scheduleItems[0]?.schedule_id
       ?? null;
     if (!targetId) {
@@ -401,6 +407,17 @@ export default function SchedulePage({
     };
   }, []);
 
+  // 切 workspace 时清空 store 与 local state 并重新加载
+  useEffect(() => {
+    if (!workspaceId) return;
+    setSchedules([]);
+    setArtifacts([]);
+    setSchedule(null);
+    setRuns([]);
+    setRunsLoading(true);
+    void useSchedulesStore.getState().loadInitial();
+  }, [workspaceId, setSchedules, setArtifacts, setSchedule]);
+
   useEffect(() => {
     const scheduleId = schedule?.schedule_id;
     if (!scheduleId) {
@@ -443,7 +460,7 @@ export default function SchedulePage({
     fallback: string,
   ): Promise<void> => {
     if (error instanceof ApiRequestError && error.status === 412) {
-      const currentId = scheduleRef.current?.schedule_id;
+      const currentId = useSchedulesStore.getState().schedule?.schedule_id;
       if (currentId) {
         withSuppressedError(() => refreshLists(currentId));
       }
@@ -648,7 +665,7 @@ export default function SchedulePage({
       return;
     }
     setBusy("save-schedule");
-    let updated = scheduleRef.current ?? schedule;
+    let updated = useSchedulesStore.getState().schedule ?? schedule;
     try {
       for (const [nodeId, position] of Object.entries(
         positionDraftsRef.current,
@@ -682,7 +699,6 @@ export default function SchedulePage({
       onNotify({ tone: "success", message: "调度配置已保存" });
     } catch (error) {
       const localDraft = applyPositionDrafts(updated);
-      scheduleRef.current = localDraft;
       setSchedule(localDraft);
       await handleError(error, "调度配置保存失败");
     } finally {
@@ -830,7 +846,7 @@ export default function SchedulePage({
     if (Math.abs(deltaX) + Math.abs(deltaY) > 3) drag.moved = true;
     setSchedule((current) => {
       if (!current) return current;
-      const next = {
+      return {
         ...current,
         nodes: current.nodes.map((item) => (
           item.node_id === drag.nodeId
@@ -842,8 +858,6 @@ export default function SchedulePage({
             : item
         )),
       };
-      scheduleRef.current = next;
-      return next;
     });
   };
 
@@ -854,7 +868,7 @@ export default function SchedulePage({
     if (!drag || drag.pointerId !== event.pointerId) return;
     dragRef.current = null;
     if (!drag.moved) return;
-    const current = scheduleRef.current;
+    const current = useSchedulesStore.getState().schedule;
     const node = current?.nodes.find((item) => item.node_id === drag.nodeId);
     if (!current || !node) return;
     const position = {
@@ -868,14 +882,12 @@ export default function SchedulePage({
     setPositionDraftCount(Object.keys(positionDraftsRef.current).length);
     setSchedule((value) => {
       if (!value) return value;
-      const next = {
+      return {
         ...value,
         nodes: value.nodes.map((item) => (
           item.node_id === node.node_id ? { ...item, ...position } : item
         )),
       };
-      scheduleRef.current = next;
-      return next;
     });
   };