为登录后的页面新增切换项目弹窗

src/components/project/ProjectSelector.tsx

@@ -12,12 +12,15 @@ import {
   Box,
   Typography,
   Fade,
+  IconButton,
 } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
 import { useState } from "react";
 
 interface ProjectSelectorProps {
   open: boolean;
   onSelect: (workspace: string, networkName: string) => void;
+  onClose?: () => void;
 }
 
 const PROJECTS = [
@@ -29,6 +32,7 @@ const PROJECTS = [
 export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
   open,
   onSelect,
+  onClose,
 }) => {
   const [workspace, setWorkspace] = useState(PROJECTS[0].workspace);
   const [networkName, setNetworkName] = useState(PROJECTS[0].networkName);
@@ -41,7 +45,8 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
   return (
     <Dialog
       open={open}
-      disableEscapeKeyDown
+      disableEscapeKeyDown={!onClose}
+      onClose={onClose ? onClose : undefined}
       slotProps={{
         paper: {
           sx: {
@@ -50,12 +55,27 @@ export const ProjectSelector: React.FC<ProjectSelectorProps> = ({
             minWidth: 400,
             background: "rgba(255, 255, 255, 0.95)",
             backdropFilter: "blur(10px)",
+            position: "relative",
           }
         }
       }}
       slots={{ transition: Fade }}
       transitionDuration={500}
     >
+      {onClose && (
+        <IconButton
+          aria-label="close"
+          onClick={onClose}
+          sx={{
+            position: "absolute",
+            right: 8,
+            top: 8,
+            color: (theme) => theme.palette.grey[500],
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      )}
       <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", mb: 2 }}>
         <Box sx={{ transform: "scale(1.5)", mb: 2, mt: 1 }}>
           <Title />