修改面板样式

src/components/olmap/MonitoringPlaceOptimizationPanel.tsx

@@ -1,10 +1,18 @@
 "use client";
 
 import React, { useState } from "react";
-import { Box, Drawer, Tabs, Tab, Typography, IconButton } from "@mui/material";
 import {
-  ChevronRight as ChevronRightIcon,
-  ChevronLeft as ChevronLeftIcon,
+  Box,
+  Drawer,
+  Tabs,
+  Tab,
+  Typography,
+  IconButton,
+  Tooltip,
+} from "@mui/material";
+import {
+  ChevronRight,
+  ChevronLeft,
   Sensors as SensorsIcon,
   Analytics as AnalyticsIcon,
   Search as SearchIcon,
@@ -79,6 +87,7 @@ const MonitoringPlaceOptimizationPanel: React.FC<
         <Box
           className="absolute top-4 right-4 bg-white shadow-2xl rounded-lg cursor-pointer hover:shadow-xl transition-all duration-300 opacity-95 hover:opacity-100"
           onClick={handleToggle}
+          sx={{ zIndex: 1300 }}
         >
           <Box className="flex flex-col items-center py-3 px-3 gap-1">
             <SensorsIcon className="text-[#257DD4] w-5 h-5" />
@@ -89,7 +98,7 @@ const MonitoringPlaceOptimizationPanel: React.FC<
             >
               监测点优化
             </Typography>
-            <ChevronLeftIcon className="text-gray-600 w-4 h-4" />
+            <ChevronLeft className="text-gray-600 w-4 h-4" />
           </Box>
         </Box>
       )}
@@ -101,7 +110,8 @@ const MonitoringPlaceOptimizationPanel: React.FC<
         variant="persistent"
         hideBackdrop
         sx={{
-          width: isOpen ? drawerWidth : 0,
+          // 关键：根容器不占据布局空间，避免页面布局受影响
+          width: 0,
           flexShrink: 0,
           "& .MuiDrawer-paper": {
             width: drawerWidth,
@@ -116,7 +126,7 @@ 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: "all 0.3s ease-in-out",
+            transition: "transform 0.3s ease-in-out, opacity 0.3s ease-in-out",
             border: "none",
             "&:hover": {
               opacity: 1,
@@ -133,14 +143,15 @@ const MonitoringPlaceOptimizationPanel: React.FC<
                 监测点优化
               </Typography>
             </Box>
-            <IconButton
-              onClick={handleToggle}
-              size="small"
-              className="text-white hover:bg-white hover:bg-opacity-20 rounded-full p-1 transition-all duration-200"
-              aria-label="关闭"
-            >
-              <ChevronRightIcon className="w-5 h-5" />
-            </IconButton>
+            <Tooltip title="收起">
+              <IconButton
+                size="small"
+                onClick={handleToggle}
+                sx={{ color: "primary.contrastText" }}
+              >
+                <ChevronRight fontSize="small" />
+              </IconButton>
+            </Tooltip>
           </Box>
 
           {/* Tabs 导航 */}