feat: 完成自定义算子布局

src/components/CommonComponents/FullScreenDrawer/index.tsx

@@ -7,30 +7,25 @@ import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
 type IFullScreenDrawerProps = {
 	children: React.ReactNode;
 	handleClose: any;
+	zIndex?: any;
 };
 
 const FullScreenDrawer = (props: IFullScreenDrawerProps) => {
 	const { children, handleClose } = props;
-	// const [closeing, setCloseing] = useState(false);
 
 	const handleReadyToClose = () => {
-		// setCloseing(true);
-		// setCloseing(false);
 		handleClose();
-		// setTimeout(() => {
-		// }, 300);
 	};
 	return (
 		<div
 			className={classNames({
 				[style.drawerBox]: true,
-				// [style.drawerBoxHidden]: closeing,
 			})}
+			style={{ zIndex: props.zIndex }}
 		>
 			<div
 				className={classNames({
 					[style.closeBox]: true,
-					// [style.closeBoxHidden]: closeing,
 				})}
 			>
 				<CloseOutlinedIcon
@@ -41,7 +36,6 @@ const FullScreenDrawer = (props: IFullScreenDrawerProps) => {
 			<div
 				className={classNames({
 					[style.contentBox]: true,
-					// [style.contentBoxHidden]: closeing,
 				})}
 			>
 				{children}

src/views/CustomOperator/index.module.css

+.customOperator {
+	padding: 4px 32px 24px;
+	background-color: #fff;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	box-sizing: border-box;
+}
+.coTop {
+	display: flex;
+	justify-content: space-between;
+	padding: 17px 0;
+}
+.coTitle {
+	color: rgba(30, 38, 51, 1);
+	font-size: 18px;
+	line-height: 26px;
+	font-weight: 600;
+}
+.coContent {
+	flex: 1;
+	background-color: RGBA(247, 248, 250, 1);
+	position: relative;
+}

src/views/CustomOperator/index.tsx

+import React, { useCallback, useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
+import MyButton from "@/components/mui/MyButton";
+import styles from "./index.module.css";
+
+type IProps = {
+	setShowCustomOperator: any;
+};
+
+const CustomOperator = observer((props: IProps) => {
+	const { setShowCustomOperator } = props;
+	// const [showCustomOperator, setShowCustomOperator] = useState(false);
+
+	return (
+		<FullScreenDrawer handleClose={setShowCustomOperator} zIndex={1100}>
+			<div className={styles.customOperator}>
+				<div className={styles.coTop}>
+					<div className={styles.coTitle}>添加算子</div>
+					<MyButton text="添加"></MyButton>
+				</div>
+				<div className={styles.coContent}>123</div>
+			</div>
+		</FullScreenDrawer>
+	);
+});
+
+export default CustomOperator;

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

@@ -11,7 +11,6 @@ import Checkbox from "@mui/material/Checkbox";
 import useMyRequest from "@/hooks/useMyRequest";
 import AddIcon from "@mui/icons-material/Add";
 import WorkFlowEdit from "@/views/WorkFlowEdit";
-import _ from "lodash";
 import noData from "../../../../../../assets/project/noTemplate.svg";
 import { ICustomTemplate } from "../../interface";
 import { useMessage } from "@/components/MySnackbar";

src/views/Project/ProjectWorkbench/workbenchTemplate/components/addTemplate.tsx

-import { memo, useCallback, useEffect, useMemo, useState } from "react";
-import styles from "../index.module.css";
-import { Box, Typography } from "@mui/material";
-import MyButton from "@/components/mui/MyButton";
-import OutlinedInput from "@mui/material/OutlinedInput";
-import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
-import SearchIcon from "@mui/icons-material/Search";
-import Checkbox from "@mui/material/Checkbox";
-import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
-import noData from "../../../../../assets/project/noTemplate.svg";
-import _ from "lodash";
-
-const AddTemplate = (props: any) => {
-	const {
-		openAddTemplate,
-		closeAddTemplateBlock,
-		addTemplateList,
-		templateSelectCallback,
-		selectTemplateData,
-		addTemplateCallback,
-		searchTemplateNameCallback,
-	} = props;
-
-	const [templateType, setTemplateType] = useState("public");
-	const radioOptions = [
-		{
-			value: "public",
-			label: "公共",
-		},
-		{
-			value: "custom",
-			label: "自定义",
-		},
-	];
-
-	const handleRadio = (value: string) => {
-		setTemplateType(value);
-	};
-
-	return (
-		<Box
-			className={styles.addTemplateMask}
-			sx={{ display: openAddTemplate ? "flex" : "none" }}
-		>
-			<Box sx={{ height: "50px", display: "flex", alignItems: "center" }}>
-				<CloseOutlinedIcon
-					sx={{ color: "#ffffff", marginRight: "10px", cursor: "pointer" }}
-					onClick={() => {
-						closeAddTemplateBlock();
-					}}
-				/>
-			</Box>
-			<Box className={styles.addTemplateBlock}>
-				<Box sx={{ padding: "24px 32px" }}>
-					<Typography
-						sx={{ fontSize: "18px", fontWeight: "600", color: "#1E2633" }}
-					>
-						添加工作流模版
-					</Typography>
-					<Box
-						sx={{
-							display: "flex",
-							justifyContent: "space-between",
-							alignItems: "center",
-							marginBottom: "20px",
-						}}
-					>
-						<OutlinedInput
-							onChange={(e: any) => {
-								_.debounce(() => {
-									searchTemplateNameCallback(e.target.value);
-								}, 200)();
-							}}
-							placeholder="输入关键词搜索"
-							size="small"
-							sx={{ width: 340, height: 32, marginTop: "20px" }}
-							endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
-						/>
-						<Box
-							sx={{
-								display: "flex",
-								justifyContent: "flex-end",
-								alignItems: "center",
-							}}
-						>
-							<RadioGroupOfButtonStyle
-								value={templateType}
-								radioOptions={radioOptions}
-								handleRadio={handleRadio}
-							></RadioGroupOfButtonStyle>
-							<MyButton
-								onClick={addTemplateCallback}
-								size={"small"}
-								style={{
-									marginLeft: "12px",
-								}}
-								text={
-									"添加模版" +
-									(selectTemplateData.length === 0
-										? ""
-										: `(${selectTemplateData.length})`)
-								}
-							/>
-						</Box>
-					</Box>
-
-					{addTemplateList.length === 0 && (
-						<Box
-							sx={{
-								display: "flex",
-								alignItems: "center",
-								flexDirection: "column",
-								minHeight: "calc(100vh - 376px)",
-								justifyContent: "center",
-							}}
-						>
-							<img alt="" src={noData} />
-							<Typography
-								sx={{ fontSize: "12px", fontWeight: "400", color: "#8A9099" }}
-							>
-								暂无相关模版
-							</Typography>
-						</Box>
-					)}
-
-					<Box
-						sx={{
-							display: "flex",
-							flexWrap: "wrap",
-							overflowX: "hidden",
-							overflowY: "overlay",
-							marginLeft: "-8px",
-						}}
-					>
-						{addTemplateList.map((item: any, key: any) => {
-							return (
-								<Box
-									className={styles.addTemplateBox}
-									onClick={() => {
-										templateSelectCallback(item.id);
-									}}
-									sx={{
-										border: selectTemplateData.includes(item.id)
-											? "1px solid #1370FF"
-											: "1px solid #EBEDF0;",
-									}}
-									key={item.id}
-								>
-									<Box
-										sx={{
-											display: "flex",
-											justifyContent: "space-between",
-											alignItems: "center",
-										}}
-									>
-										<Typography
-											sx={{
-												fontSize: "14px",
-												fontWeight: "600",
-												color: "#1E2633",
-												marginBottom: "4px",
-												overflow: "hidden",
-												textOverflow: "ellipsis",
-											}}
-										>
-											{item.title}
-										</Typography>
-										<Checkbox
-											size="small"
-											sx={{ padding: "0px" }}
-											checked={selectTemplateData.includes(item.id)}
-										/>
-									</Box>
-									<Box sx={{ display: "flex", marginBottom: "8px" }}>
-										<Typography
-											sx={{
-												fontSize: "12px",
-												fontWeight: "400",
-												color: "#1370FF",
-												marginRight: "24px",
-											}}
-										>
-											版本：{item.version}
-										</Typography>
-										<Typography
-											sx={{
-												fontSize: "12px",
-												fontWeight: "400",
-												color: "#1370FF",
-											}}
-										>
-											更新时间：{item.updateTime}
-										</Typography>
-									</Box>
-									<Typography className={styles.templateDescText}>
-										{item.description}
-									</Typography>
-								</Box>
-							);
-						})}
-					</Box>
-				</Box>
-			</Box>
-		</Box>
-	);
-};
-
-export default memo(AddTemplate);

src/views/WorkFlowEdit/components/OperatorList/index.module.css

@@ -50,6 +50,22 @@
 .listBox {
 	overflow-y: scroll;
 	height: calc(100% - 48px);
+	position: relative;
+}
+.addOperator {
+	position: absolute;
+	right: 24px;
+	bottom: 20px;
+	width: 36px;
+	height: 36px;
+	border-radius: 50%;
+	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
+	font-size: 30px;
+	line-height: 36px;
+	text-align: center;
+	color: RGBA(66, 141, 255, 1);
+	cursor: pointer;
+	background-color: #fff;
 }
 
 .versionBox {

src/views/WorkFlowEdit/components/OperatorList/index.tsx

@@ -211,9 +211,8 @@ const OperatorItem = (props: IOperatorItemProps) => {
 const OperatorList = observer((props: IOperatorListProps) => {
 	const { currentProjectStore } = useStores();
 	const productId = toJS(currentProjectStore.currentProductInfo.id);
-
-	const { templateConfigInfo, setTemplateConfigInfo } = props;
-
+	const { templateConfigInfo, setTemplateConfigInfo, setShowCustomOperator } =
+		props;
 	const [operatorListData, setOperatorListData] = useState<ITask[]>([]);
 	const [keyword, setKeyword] = useState<string>("");
 
@@ -279,6 +278,9 @@ const OperatorList = observer((props: IOperatorListProps) => {
 						<span className={styles.noDataText}>没有找到相关算子</span>
 					</div>
 				)}
+				<div className={styles.addOperator} onClick={setShowCustomOperator}>
+					+
+				</div>
 			</div>
 		</div>
 	);

src/views/WorkFlowEdit/components/OperatorList/interface.ts

@@ -17,6 +17,7 @@ export interface IOperatorItemProps {
 }
 
 export interface IOperatorListProps {
+    setShowCustomOperator: any
     templateConfigInfo: ITask[]
     setTemplateConfigInfo: (val: ITask[]) => void
 }
\ No newline at end of file

src/views/WorkFlowEdit/index.tsx

@@ -23,6 +23,7 @@ import { ITask } from "../Project/ProjectSubmitWork/interface";
 import { fetchTemplateConfigInfo } from "@/api/project_api";
 import { getCustomTemplateParameterCheckResult } from "./util";
 import useMyRequest from "@/hooks/useMyRequest";
+import CustomOperator from "../CustomOperator";
 import SaveCustomTemplate from "./components/SaveCustomTemplate";
 
 import styles from "./index.module.css";
@@ -47,7 +48,7 @@ const WorkFlowEdit = observer((props: IProps) => {
 	const { onBack, id } = props;
 	const Message = useMessage();
 	const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>([]); // 算子大数组
-
+	const [showCustomOperator, setShowCustomOperator] = useState(false); // 是否显示自定义算子
 	const [saveFormDialog, setSaveFormDialog] = useState(false); // 保存弹窗显示与否控制
 	const [title, setTitle] = useState(""); // 自定义模板名称
 	const [version, setVersion] = useState("1.0.0"); // 自定义模板版本
@@ -205,6 +206,7 @@ const WorkFlowEdit = observer((props: IProps) => {
 						<OperatorList
 							templateConfigInfo={templateConfigInfo}
 							setTemplateConfigInfo={setTemplateConfigInfo}
+							setShowCustomOperator={() => setShowCustomOperator(true)}
 						/>
 					)}
 					{leftContentType !== "list" && (
@@ -248,6 +250,11 @@ const WorkFlowEdit = observer((props: IProps) => {
 					oldversion={oldversion}
 				/>
 			)}
+			{showCustomOperator && (
+				<CustomOperator
+					setShowCustomOperator={() => setShowCustomOperator(false)}
+				/>
+			)}
 		</div>
 	);
 });