feat: 完成算子列表滚动加载判断条件

src/utils/util.ts

@@ -113,3 +113,16 @@ export const getUrlThroughParams = (params: any, encodeArr: Array<string> = [],
   })
   return url
 }
+
+
+// 判断上拉滚动是否需要加载   scrollLoaderThreshold 加载阈值  如0.25表示 离底部四分之一高度（包裹盒子的高）触发加载
+export const getScrollLoader = (e: any, scrollLoaderThreshold: number = 0.25) => {
+  const clientHeight = e.target.clientHeight; // 滚动的外层盒子高度
+  const scrollHeight = e.target.scrollHeight; // 列表总高度
+  const scrollTop = e.target.scrollTop; // 滚动的高度
+  if (scrollTop + clientHeight * (1+scrollLoaderThreshold)> scrollHeight) {
+    return true
+  } else {
+    return false
+  }
+}
\ No newline at end of file

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 { getScrollLoader } from "@/utils/util";
 import { useState } from "react";
 
 const OperatorList = () => {
@@ -49,8 +50,299 @@ const OperatorList = () => {
 			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",
+		},
+		{
+			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",
+		},
+		{
+			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",
+		},
+		{
+			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",
+		},
+		{
+			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",
+		},
+		{
+			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",
+		},
+		{
+			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",
+		},
+		{
+			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",
+		},
 	];
 
+	window.onscroll = (e) => {
+		console.log(e);
+	};
+
+	const handleScroll = (e: any) => {
+		console.log(e);
+		if (getScrollLoader(e)) {
+			console.log("加载");
+		}
+	};
+
 	const randerIcon = () => {
 		return (
 			<div className={styles.icon}>
@@ -90,7 +382,7 @@ const OperatorList = () => {
 					onChange={nameChange}
 				/>
 			</div>
-			<div className={styles.list}>
+			<div className={styles.list} onScroll={(e) => handleScroll(e)}>
 				{list.map((item, index) => {
 					return (
 						<div key={index} className={styles.li}>

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

@@ -52,21 +52,6 @@
 	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 {
 	background: #e6e8eb;

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

@@ -211,8 +211,7 @@ const OperatorItem = (props: IOperatorItemProps) => {
 const OperatorList = observer((props: IOperatorListProps) => {
 	const { currentProjectStore } = useStores();
 	const productId = toJS(currentProjectStore.currentProductInfo.id);
-	const { templateConfigInfo, setTemplateConfigInfo, setShowCustomOperator } =
-		props;
+	const { templateConfigInfo, setTemplateConfigInfo } = props;
 	const [operatorListData, setOperatorListData] = useState<ITask[]>([]);
 	const [keyword, setKeyword] = useState<string>("");
 
@@ -278,9 +277,6 @@ 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,7 +17,6 @@ export interface IOperatorItemProps {
 }
 
 export interface IOperatorListProps {
-    setShowCustomOperator: any
     templateConfigInfo: ITask[]
     setTemplateConfigInfo: (val: ITask[]) => void
 }
\ No newline at end of file

src/views/WorkFlowEdit/index.module.css

@@ -36,6 +36,23 @@
 	height: 100%;
 	/* overflow-y: scroll; */
 	box-sizing: border-box;
+	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;
 }
 .swFlowBox {
 	flex: 1;

src/views/WorkFlowEdit/index.tsx

@@ -206,7 +206,6 @@ const WorkFlowEdit = observer((props: IProps) => {
 						<OperatorList
 							templateConfigInfo={templateConfigInfo}
 							setTemplateConfigInfo={setTemplateConfigInfo}
-							setShowCustomOperator={() => setShowCustomOperator(true)}
 						/>
 					)}
 					{leftContentType !== "list" && (
@@ -216,6 +215,12 @@ const WorkFlowEdit = observer((props: IProps) => {
 							taskId={selectTaskId || ""}
 						/>
 					)}
+					<div
+						className={styles.addOperator}
+						onClick={() => setShowCustomOperator(true)}
+					>
+						+
+					</div>
 				</div>
 				<div className={styles.swFlowBox} id="workFlowEditRight">
 					<Flow