为登录后的页面新增切换项目弹窗
This commit is contained in:
JIANG
@@ -3,15 +3,25 @@
|
||||
import { ColorModeContext } from "@contexts/color-mode";
|
||||
import DarkModeOutlined from "@mui/icons-material/DarkModeOutlined";
|
||||
import LightModeOutlined from "@mui/icons-material/LightModeOutlined";
|
||||
import Logout from "@mui/icons-material/Logout";
|
||||
import SwapHoriz from "@mui/icons-material/SwapHoriz";
|
||||
import AppBar from "@mui/material/AppBar";
|
||||
import Avatar from "@mui/material/Avatar";
|
||||
import ButtonBase from "@mui/material/ButtonBase";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import ListItemIcon from "@mui/material/ListItemIcon";
|
||||
import ListItemText from "@mui/material/ListItemText";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import Toolbar from "@mui/material/Toolbar";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useGetIdentity } from "@refinedev/core";
|
||||
import { useGetIdentity, useLogout } from "@refinedev/core";
|
||||
import { HamburgerMenu, RefineThemedLayoutHeaderProps } from "@refinedev/mui";
|
||||
import React, { useContext } from "react";
|
||||
import React, { useContext, useState } from "react";
|
||||
import { ProjectSelector } from "@components/project/ProjectSelector";
|
||||
import { setMapWorkspace, setNetworkName } from "@config/config";
|
||||
|
||||
type IUser = {
|
||||
id: number;
|
||||
@@ -23,9 +33,35 @@ export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
|
||||
sticky = true,
|
||||
}) => {
|
||||
const { mode, setMode } = useContext(ColorModeContext);
|
||||
const { mutate: logout } = useLogout();
|
||||
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
||||
const [showProjectSelector, setShowProjectSelector] = useState(false);
|
||||
const open = Boolean(anchorEl);
|
||||
|
||||
const { data: user } = useGetIdentity<IUser>();
|
||||
|
||||
const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleMenuClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const handleSwitchProjectClick = () => {
|
||||
handleMenuClose();
|
||||
setShowProjectSelector(true);
|
||||
};
|
||||
|
||||
const handleProjectSelect = (workspace: string, networkName: string) => {
|
||||
setMapWorkspace(workspace);
|
||||
setNetworkName(networkName);
|
||||
localStorage.setItem("NEXT_PUBLIC_MAP_WORKSPACE", workspace);
|
||||
localStorage.setItem("NEXT_PUBLIC_NETWORK_NAME", networkName);
|
||||
setShowProjectSelector(false);
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
return (
|
||||
<AppBar position={sticky ? "sticky" : "relative"}>
|
||||
<Toolbar>
|
||||
@@ -52,27 +88,118 @@ export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({
|
||||
</IconButton>
|
||||
|
||||
{(user?.avatar || user?.name) && (
|
||||
<Stack
|
||||
direction="row"
|
||||
gap="16px"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
{user?.name && (
|
||||
<Typography
|
||||
sx={{
|
||||
display: {
|
||||
xs: "none",
|
||||
sm: "inline-block",
|
||||
},
|
||||
}}
|
||||
variant="subtitle2"
|
||||
<>
|
||||
<ButtonBase
|
||||
onClick={handleMenuOpen}
|
||||
sx={{
|
||||
borderRadius: "30px",
|
||||
padding: "6px 12px",
|
||||
marginLeft: "8px",
|
||||
transition: "all 0.3s ease",
|
||||
border: "1px solid transparent",
|
||||
"&:hover": {
|
||||
backgroundColor:
|
||||
mode === "dark"
|
||||
? "rgba(255, 255, 255, 0.05)"
|
||||
: "rgba(0, 0, 0, 0.04)",
|
||||
transform: "translateY(-1px)",
|
||||
border: `1px solid ${mode === "dark"
|
||||
? "rgba(255, 255, 255, 0.2)"
|
||||
: "rgba(0, 0, 0, 0.1)"
|
||||
}`,
|
||||
boxShadow:
|
||||
mode === "dark"
|
||||
? "0 4px 12px rgba(0,0,0,0.3)"
|
||||
: "0 4px 12px rgba(0,0,0,0.08)",
|
||||
},
|
||||
"&:active": {
|
||||
transform: "translateY(0px)",
|
||||
boxShadow: "none",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
direction="row"
|
||||
gap="12px"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
{user?.name}
|
||||
</Typography>
|
||||
)}
|
||||
<Avatar src={user?.avatar} alt={user?.name} />
|
||||
</Stack>
|
||||
{user?.name && (
|
||||
<Typography
|
||||
sx={{
|
||||
display: {
|
||||
xs: "none",
|
||||
sm: "inline-block",
|
||||
},
|
||||
fontWeight: 500,
|
||||
}}
|
||||
variant="subtitle2"
|
||||
>
|
||||
{user?.name}
|
||||
</Typography>
|
||||
)}
|
||||
<Avatar
|
||||
src={user?.avatar}
|
||||
alt={user?.name}
|
||||
sx={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
border: `2px solid ${mode === "dark"
|
||||
? "rgba(255,255,255,0.2)"
|
||||
: "rgba(0,0,0,0.1)"
|
||||
}`,
|
||||
transition: "transform 0.3s ease",
|
||||
".MuiButtonBase-root:hover &": {
|
||||
transform: "rotate(5deg) scale(1.05)",
|
||||
borderColor: "primary.main",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
</ButtonBase>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
open={open}
|
||||
onClose={handleMenuClose}
|
||||
transformOrigin={{ horizontal: "right", vertical: "top" }}
|
||||
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
borderRadius: 2,
|
||||
minWidth: 180,
|
||||
marginTop: "8px",
|
||||
background:
|
||||
mode === "dark"
|
||||
? "rgba(30, 30, 30, 0.95)"
|
||||
: "rgba(255, 255, 255, 0.95)",
|
||||
backdropFilter: "blur(10px)",
|
||||
boxShadow:
|
||||
mode === "dark"
|
||||
? "0px 4px 20px rgba(0, 0, 0, 0.5)"
|
||||
: "0px 4px 20px rgba(0, 0, 0, 0.1)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={handleSwitchProjectClick}>
|
||||
<ListItemIcon>
|
||||
<SwapHoriz fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>切换项目</ListItemText>
|
||||
</MenuItem>
|
||||
<Divider />
|
||||
<MenuItem onClick={() => logout()}>
|
||||
<ListItemIcon>
|
||||
<Logout fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>登出</ListItemText>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
<ProjectSelector
|
||||
open={showProjectSelector}
|
||||
onSelect={handleProjectSelect}
|
||||
onClose={() => setShowProjectSelector(false)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
@@ -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 />
|
||||
|
||||
Reference in New Issue
Block a user