fix(sensor-placement): smooth result editor transitions

src/components/olmap/MonitoringPlaceOptimization/MonitoringPlaceOptimizationPanel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import {
   Box,
   Drawer,
@@ -52,6 +52,39 @@ const TabPanel: React.FC<TabPanelProps> = ({ children, value, index }) => {
   );
 };
 
+const PANEL_MOTION_DURATION_MS = 280;
+const PANEL_MOTION_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
+
+export const getTabIndicatorTransform = (tabIndex: number) =>
+  `translateX(${tabIndex * 100}%)`;
+
+export const getTabIndicatorSx = (tabIndex: number) => ({
+  backgroundColor: "#257DD4",
+  left: "0 !important",
+  width: "33.333333% !important",
+  transform: getTabIndicatorTransform(tabIndex),
+  transition: `transform ${PANEL_MOTION_DURATION_MS}ms ${PANEL_MOTION_EASING}`,
+  "@media (prefers-reduced-motion: reduce)": {
+    transition: "none",
+  },
+});
+
+interface PreparedSchemeEditorProps
+  extends React.ComponentProps<typeof SchemeEditor> {
+  onReady?: () => void;
+}
+
+const PreparedSchemeEditor: React.FC<PreparedSchemeEditorProps> = ({
+  onReady,
+  ...props
+}) => {
+  useEffect(() => {
+    onReady?.();
+  }, [onReady]);
+
+  return <SchemeEditor {...props} />;
+};
+
 interface MonitoringPlaceOptimizationPanelProps {
   open?: boolean;
   onToggle?: () => void;
@@ -65,6 +98,9 @@ const MonitoringPlaceOptimizationPanel: React.FC<
   const [activeScheme, setActiveScheme] =
     useState<SensorPlacementScheme | null>(null);
   const [loadingScheme, setLoadingScheme] = useState(false);
+  const [pendingOpenSchemeId, setPendingOpenSchemeId] = useState<number | null>(
+    null,
+  );
   const { open: notify } = useNotification();
 
   // 持久化方案查询结果
@@ -91,11 +127,18 @@ const MonitoringPlaceOptimizationPanel: React.FC<
 
   const drawerWidth = currentTab === 1 ? 820 : 520;
 
+  const handleSchemeEditorReady = useCallback(() => {
+    setCurrentTab(1);
+    setPendingOpenSchemeId(null);
+  }, []);
+
   const handleOpenScheme = async (schemeId: number) => {
     setLoadingScheme(true);
-    setCurrentTab(1);
     try {
-      setActiveScheme(await getSensorPlacementScheme(NETWORK_NAME, schemeId));
+      const scheme = await getSensorPlacementScheme(NETWORK_NAME, schemeId);
+      setActiveScheme(scheme);
+      setLoadingScheme(false);
+      setPendingOpenSchemeId(scheme.id);
     } catch (error) {
       const detail =
         (error as { response?: { data?: { detail?: string } } }).response?.data
@@ -105,8 +148,6 @@ const MonitoringPlaceOptimizationPanel: React.FC<
         message: "方案加载失败",
         description: detail,
       });
-      setCurrentTab(2);
-    } finally {
       setLoadingScheme(false);
     }
   };
@@ -173,11 +214,17 @@ const MonitoringPlaceOptimizationPanel: React.FC<
               "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
             backdropFilter: "blur(8px)",
             opacity: 0.95,
-            transition: "transform 0.3s ease-in-out, opacity 0.3s ease-in-out",
+            transition:
+              `width ${PANEL_MOTION_DURATION_MS}ms ${PANEL_MOTION_EASING}, ` +
+              "transform 300ms ease-in-out, opacity 300ms ease-in-out",
+            willChange: "width, transform, opacity",
             border: "none",
             "&:hover": {
               opacity: 1,
             },
+            "@media (prefers-reduced-motion: reduce)": {
+              transition: "none",
+            },
           },
         }}
       >
@@ -219,9 +266,7 @@ const MonitoringPlaceOptimizationPanel: React.FC<
                 "& .Mui-selected": {
                   color: "#257DD4",
                 },
-                "& .MuiTabs-indicator": {
-                  backgroundColor: "#257DD4",
-                },
+                "& .MuiTabs-indicator": getTabIndicatorSx(currentTab),
               }}
             >
               <Tab
@@ -278,11 +323,16 @@ const MonitoringPlaceOptimizationPanel: React.FC<
                 <CircularProgress size={30} />
               </Box>
             ) : activeScheme ? (
-              <SchemeEditor
+              <PreparedSchemeEditor
                 scheme={activeScheme}
                 network={NETWORK_NAME}
                 active={isOpen && currentTab === 1}
                 onSaved={handleSchemeSaved}
+                onReady={
+                  pendingOpenSchemeId === activeScheme.id
+                    ? handleSchemeEditorReady
+                    : undefined
+                }
               />
             ) : (
               <PanelEmptyState