feat: 新增菜单下拉选择组件

src/components/mui/MyMenu.tsx

 import * as React from "react";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
+import CheckIcon from "@mui/icons-material/Check";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 
 type IOption = {
@@ -12,30 +13,49 @@ type IMyMenuProps = {
 	children: React.ReactNode;
 	options: Array<IOption>;
 	value: string;
+	setValue?: any;
 };
 
 const theme = createTheme({
 	components: {
-		// Name of the component
+		MuiMenu: {
+			styleOverrides: {
+				root: {
+					maxHeight: "260px",
+					overflowY: "scroll",
+				},
+			},
+		},
 		MuiMenuItem: {
 			styleOverrides: {
-				// Name of the slot
 				root: {
-					fontSize: "12px",
+					fontSize: "14px",
+					lineHeight: "36px",
+					display: "flex",
+					justifyContent: "space-between",
 					":hover": {
-						color: "red",
+						color: "rgba(19, 112, 255, 1)",
 					},
 					"&.Mui-selected": {
-						backgroundColor: "#2a68c9",
+						backgroundColor: "#fff",
+						color: "rgba(19, 112, 255, 1)",
 					},
 				},
 			},
 		},
+		MuiSvgIcon: {
+			styleOverrides: {
+				root: {
+					width: "16px",
+					height: "16px",
+				},
+			},
+		},
 	},
 });
 
 const MyMenu = (props: IMyMenuProps) => {
-	const { children, options, value } = props;
+	const { children, options, value, setValue } = props;
 	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 	const open = Boolean(anchorEl);
 	const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -43,7 +63,7 @@ const MyMenu = (props: IMyMenuProps) => {
 	};
 	const handleClose = (value: string) => {
 		setAnchorEl(null);
-		console.log(value);
+		setValue && setValue(value);
 	};
 
 	return (
@@ -66,8 +86,8 @@ const MyMenu = (props: IMyMenuProps) => {
 								selected={value === option.value}
 								key={index}
 							>
-								{option.label}
-								{value}
+								<span>{option.label}</span>
+								{value === option.value && <CheckIcon />}
 							</MenuItem>
 						);
 					})}

src/views/Project/ProjectWorkbench/index.tsx

@@ -12,7 +12,6 @@ import { observer } from "mobx-react-lite";
 import { useLocation } from "react-router-dom";
 
 import projectImg from "@/assets/project/projectIconSmall.svg";
-import MyMenu from "@/components/mui/MyMenu";
 import WorkbenchTemplate from "./workbenchTemplate";
 import WorkbenchList from "./workbenchList";
 import Tabs from "@/components/mui/Tabs";
@@ -26,16 +25,6 @@ const ProjectWorkbench = observer(() => {
 	const isPass = usePass();
 	const location: any = useLocation();
 
-	const options = [
-		{
-			value: "123",
-			label: "1234",
-		},
-		{
-			value: "456",
-			label: "4567",
-		},
-	];
 	const tabList = useMemo(() => {
 		return [
 			{
@@ -73,9 +62,6 @@ const ProjectWorkbench = observer(() => {
 
 	return (
 		<div style={{ padding: 24 }}>
-			<MyMenu options={options} value="123">
-				<div>123123</div>
-			</MyMenu>
 			<div style={{ display: "flex", alignItems: "center" }}>
 				<img src={projectImg} alt="项目logo" />
 				<span style={{ marginLeft: 12 }}>工作台</span>