feat: 新增MYMENU组件

src/components/CommonComponents/RadioGroupOfButtonStyle/index.module.css

@@ -23,6 +23,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	white-space: nowrap;
 }
 .radioActive {
 	color: #1370ff;

src/components/mui/MyMenu.tsx

+import * as React from "react";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+
+type IOption = {
+	label: string;
+	value: string;
+};
+
+type IMyMenuProps = {
+	children: React.ReactNode;
+	options: Array<IOption>;
+	value: string;
+};
+
+const theme = createTheme({
+	components: {
+		// Name of the component
+		MuiMenuItem: {
+			styleOverrides: {
+				// Name of the slot
+				root: {
+					fontSize: "12px",
+					":hover": {
+						color: "red",
+					},
+					"&.Mui-selected": {
+						backgroundColor: "#2a68c9",
+					},
+				},
+			},
+		},
+	},
+});
+
+const MyMenu = (props: IMyMenuProps) => {
+	const { children, options, value } = props;
+	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+	const open = Boolean(anchorEl);
+	const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handleClose = (value: string) => {
+		setAnchorEl(null);
+		console.log(value);
+	};
+
+	return (
+		<ThemeProvider theme={theme}>
+			<div>
+				<div onClick={handleClick}>{children}</div>
+				<Menu
+					id="basic-menu"
+					anchorEl={anchorEl}
+					open={open}
+					onClose={handleClose}
+					MenuListProps={{
+						"aria-labelledby": "basic-button",
+					}}
+				>
+					{options.map((option, index) => {
+						return (
+							<MenuItem
+								onClick={() => handleClose(option.value)}
+								selected={value === option.value}
+								key={index}
+							>
+								{option.label}
+								{value}
+							</MenuItem>
+						);
+					})}
+				</Menu>
+			</div>
+		</ThemeProvider>
+	);
+};
+
+export default MyMenu;

src/views/Project/ProjectWorkbench/index.tsx

@@ -12,68 +12,82 @@ 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";
 import usePass from "@/hooks/usePass";
-import Template from "@/assets/project/workbenchTemplate.svg"
-import Template_select from "@/assets/project/workbenchTemplate_select.svg"
-import List from "@/assets/project/workbenchList.svg"
-import List_select from "@/assets/project/workbenchList_select.svg"
-
-
+import Template from "@/assets/project/workbenchTemplate.svg";
+import Template_select from "@/assets/project/workbenchTemplate_select.svg";
+import List from "@/assets/project/workbenchList.svg";
+import List_select from "@/assets/project/workbenchList_select.svg";
 
 const ProjectWorkbench = observer(() => {
-  const isPass = usePass();
-  const location: any = useLocation()
-  const tabList = useMemo(() => {
-    return [
-      {
-        label: "工作流模版",
-        value: "workbenchTemplate",
-        component: <WorkbenchTemplate />,
-        hide: !isPass("PROJECT_WORKBENCH_FLOES"),
-        icon: Template,
-        iconed: Template_select,
-      },
-      {
-        label: "任务列表",
-        value: "workbenchList",
-        component: <WorkbenchList />,
-        hide: !isPass("PROJECT_WORKBENCH_JOBS"),
-        icon: List,
-        iconed: List_select,
-      },
-      //   {
-      //     label: "按钮组件",
-      //     value: "MUI_BUTTON",
-      //     component: <ButtonDemo />,
-      //     icon: List,
-      //     iconed: List_select,
-      //   },
-      //   {
-      //     label: "输入框组件",
-      //     value: "MUI_INPUT",
-      //     component: <InputDemo />,
-      //     icon: List,
-      //     iconed: List_select,
-      //   },
-    ];
-  }, [isPass]);
+	const isPass = usePass();
+	const location: any = useLocation();
+
+	const options = [
+		{
+			value: "123",
+			label: "1234",
+		},
+		{
+			value: "456",
+			label: "4567",
+		},
+	];
+	const tabList = useMemo(() => {
+		return [
+			{
+				label: "工作流模版",
+				value: "workbenchTemplate",
+				component: <WorkbenchTemplate />,
+				hide: !isPass("PROJECT_WORKBENCH_FLOES"),
+				icon: Template,
+				iconed: Template_select,
+			},
+			{
+				label: "任务列表",
+				value: "workbenchList",
+				component: <WorkbenchList />,
+				hide: !isPass("PROJECT_WORKBENCH_JOBS"),
+				icon: List,
+				iconed: List_select,
+			},
+			//   {
+			//     label: "按钮组件",
+			//     value: "MUI_BUTTON",
+			//     component: <ButtonDemo />,
+			//     icon: List,
+			//     iconed: List_select,
+			//   },
+			//   {
+			//     label: "输入框组件",
+			//     value: "MUI_INPUT",
+			//     component: <InputDemo />,
+			//     icon: List,
+			//     iconed: List_select,
+			//   },
+		];
+	}, [isPass]);
 
-    return (
-        <div style={{ padding: 24 }}>
-            <div style={{ display: "flex", alignItems: "center" }}>
-                <img src={projectImg} alt="项目logo" />
-                <span style={{ marginLeft: 12 }}>
-                    工作台
-                </span>
-            </div>
-            <Box sx={{ width: "100%", typography: "body1" }}>
-                <Tabs tabList={tabList} defaultValue={location?.state?.type || 'workbenchTemplate'}  />
-            </Box>
-        </div>
-    );
+	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>
+			</div>
+			<Box sx={{ width: "100%", typography: "body1" }}>
+				<Tabs
+					tabList={tabList}
+					defaultValue={location?.state?.type || "workbenchTemplate"}
+				/>
+			</Box>
+		</div>
+	);
 });
 
 export default memo(ProjectWorkbench);

src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.tsx

@@ -72,10 +72,17 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
 	/** 是否显示自定义模版编辑并带有参数 */
 	const [customTemplateInfo, setCustomTemplateInfo] = useState<ICustomTemplate>(
 		{
-			show: true,
+			show: false,
 		}
 	);
 
+	// 显示新增、编辑自定义模板弹窗
+	const handleAddCustomTemplate = () => {
+		setCustomTemplateInfo({
+			show: true,
+		});
+	};
+
 	useEffect(() => {
 		getAddTemplateList({
 			projectId: projectId as string,
@@ -182,6 +189,7 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
 								[style.templateLi]: true,
 								[style.addCustomTemplate]: true,
 							})}
+							onClick={handleAddCustomTemplate}
 						>
 							<AddIcon />
 							<span className={style.addCustomTemplateText}>