feat: 添加算子静态页面完成

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

+.operatorList {
+	width: 226px;
+	height: calc(100% - 40px);
+	position: absolute;
+	top: 16px;
+	left: 16px;
+	background-color: #fff;
+	z-index: 10;
+}
+.searchBox {
+	height: 54px;
+	border-bottom: 1px solid rgba(240, 242, 245, 1);
+	box-sizing: border-box;
+	padding: 16px;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+.searchButton {
+	width: 22px;
+	height: 22px;
+}
+.searchIcon {
+	color: #999999;
+}
+.searchInput {
+	margin: 0 6px;
+	flex: 1;
+	color: #1e2633;
+	font-size: 14px;
+	line-height: 22px;
+}
+.list {
+	height: calc(100% - 55px);
+	overflow-y: auto;
+	padding: 15px 20px;
+	box-sizing: border-box;
+}
+.li {
+	background-color: RGBA(240, 242, 245, 1);
+	padding: 7px 7px 7px 28px;
+	color: rgba(30, 38, 51, 1);
+	font-size: 14px;
+	line-height: 22px;
+	margin-bottom: 12px;
+	position: relative;
+}
+.name {
+	margin-right: 8px;
+}
+.icon {
+	width: 6px;
+	height: 10px;
+	position: absolute;
+	top: 13px;
+	left: 9px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+.iconLi {
+	display: flex;
+	justify-content: space-between;
+}
+.iconItem {
+	width: 2px;
+	height: 2px;
+	background-color: rgba(86, 92, 102, 1);
+}

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

+import { InputBase, IconButton } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import styles from "./index.module.css";
+import { useState } from "react";
+
+const OperatorList = () => {
+	const [name, setName] = useState("");
+	const nameChange = (e: any) => {
+		setName(e.target.value);
+	};
+	const list = [
+		{
+			name: "这是中文",
+			version: "1.0.0",
+		},
+		{
+			name: "asdf",
+			version: "1.0.0",
+		},
+		{
+			name: "asdf",
+			version: "1.0.0",
+		},
+		{
+			name: "asdf",
+			version: "1.0.0",
+		},
+		{
+			name: "asdf",
+			version: "1.0.0",
+		},
+		{
+			name: "asdf",
+			version: "1.0.0",
+		},
+		{
+			name: "asdf",
+			version: "1.0.0",
+		},
+		{
+			name: "asdf",
+			version: "1.0.0",
+		},
+		{
+			name: "asdf",
+			version: "1.0.0",
+		},
+		{
+			name: "asdf",
+			version: "1.0.0",
+		},
+	];
+
+	const randerIcon = () => {
+		return (
+			<div className={styles.icon}>
+				<div className={styles.iconLi}>
+					<div className={styles.iconItem}></div>
+					<div className={styles.iconItem}></div>
+				</div>
+				<div className={styles.iconLi}>
+					<div className={styles.iconItem}></div>
+					<div className={styles.iconItem}></div>
+				</div>
+				<div className={styles.iconLi}>
+					<div className={styles.iconItem}></div>
+					<div className={styles.iconItem}></div>
+				</div>
+			</div>
+		);
+	};
+
+	return (
+		<div className={styles.operatorList}>
+			<div className={styles.searchBox}>
+				<IconButton
+					type="submit"
+					className={styles.searchButton}
+					aria-label="search"
+				>
+					<SearchIcon
+						className={styles.searchIcon}
+						style={{ color: "rgba(153, 153, 153, 1)" }}
+					/>
+				</IconButton>
+				<InputBase
+					className={styles.searchInput}
+					placeholder="请输入算子名称"
+					value={name}
+					onChange={nameChange}
+				/>
+			</div>
+			<div className={styles.list}>
+				{list.map((item, index) => {
+					return (
+						<div key={index} className={styles.li}>
+							{randerIcon()}
+							<span className={styles.name}>{item.name}</span>
+							<span className={styles.version}>{item.version}</span>
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+};
+
+export default OperatorList;

src/views/CustomOperator/index.tsx

@@ -2,6 +2,8 @@ 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 OperatorList from "./components/OperatorList";
+import Flow from "../Project/components/Flow";
 import styles from "./index.module.css";
 
 type IProps = {
@@ -19,7 +21,17 @@ const CustomOperator = observer((props: IProps) => {
 					<div className={styles.coTitle}>添加算子</div>
 					<MyButton text="添加"></MyButton>
 				</div>
-				<div className={styles.coContent}>123</div>
+				<div className={styles.coContent}>
+					<OperatorList />
+					<Flow
+						showControls={false}
+						// tasks={templateConfigInfo}
+						// setTasks={setTemplateConfigInfo}
+						type="edit"
+						// onFlowNodeClick={handleNodeClick}
+						// ListenState={!saveFormDialog}
+					/>
+				</div>
 			</div>
 		</FullScreenDrawer>
 	);

src/views/Project/components/Flow/index.tsx

@@ -42,6 +42,8 @@ interface IProps extends ReactFlowProps {
 	onFlowNodeClick?: (val: string) => void;
 	/** 监听事件的状态 */
 	ListenState?: boolean;
+	// 是否显示Controls（放大缩小全屏等按钮）
+	showControls?: boolean;
 }
 
 const Flow = (props: IProps) => {
@@ -54,6 +56,7 @@ const Flow = (props: IProps) => {
 		setTasks,
 		onFlowNodeClick,
 		ListenState = true,
+		showControls = true,
 		...other
 	} = props;
 	/** 自定义的节点类型 */
@@ -535,7 +538,7 @@ const Flow = (props: IProps) => {
 			onNodeClick={onNodeClick}
 			{...other}
 		>
-			<Controls />
+			{showControls && <Controls />}
 			<Background color="#aaa" gap={16} />
 		</ReactFlow>
 	);