Merge branch 'feat-20221012-environment' into 'release'

cn-Feat 20221012 environment

See merge request !170

package-lock.json

@@ -10561,6 +10561,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -10594,6 +10599,19 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-virtualized": {
+      "version": "9.22.3",
+      "resolved": "https://registry.npmmirror.com/react-virtualized/-/react-virtualized-9.22.3.tgz",
+      "integrity": "sha512-MKovKMxWTcwPSxE1kK1HcheQTWfuCxAuBoSTf2gwyMM21NdX/PXUhnoP8Uc5dRKd+nKm8v41R36OellhdCpkrw==",
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "clsx": "^1.0.4",
+        "dom-helpers": "^5.1.3",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",

package.json

@@ -74,6 +74,7 @@
 		"react-flow-renderer": "^10.3.7",
 		"react-refresh": "^0.11.0",
 		"react-router-dom": "^6.3.0",
+		"react-virtualized": "^9.22.3",
 		"resolve": "^1.20.0",
 		"resolve-url-loader": "^4.0.0",
 		"sass": "^1.55.0",

src/components/CommonComponents/CardTable/index.tsx

@@ -61,7 +61,7 @@ const CardTable = (props: ICardTableProps) => {
 			}}
 			ref={tableBoxRef}
 		>
-			{renderBefore && (
+			{renderBefore && renderBefore() && (
 				<div
 					className={style.itemBox}
 					style={{

src/components/CommonComponents/VirtuallyList/index.tsx

+import { List } from "react-virtualized";
+
+interface IVirtuallyListProps {
+	list: Array<any>;
+	renderRow: any;
+}
+
+const VirtuallyList = (props: IVirtuallyListProps) => {
+	const { list, renderRow } = props;
+	return (
+		<List
+			width={300}
+			height={300}
+			rowCount={list.length}
+			rowHeight={20}
+			rowRenderer={renderRow}
+			overscanRowCount={20}
+		/>
+	);
+};
+export default VirtuallyList;

src/react-app-env.d.ts

@@ -86,4 +86,6 @@ declare module "tus-js-client";
 declare module "uuid";
 declare module "kekule";
 declare module 'ngl';
+declare module 'react-virtualized';
+
 

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

@@ -52,7 +52,13 @@ const OperatorList = (props: IProps) => {
 				};
 			});
 			setIsLastPage(res?.data?.last);
-			setList([...list, ...arr]);
+
+			/** 兼容更改其他条件初始化，重置数据 */
+			if (res?.data?.pageable?.pageNumber === 0) {
+				setList(arr);
+			} else {
+				setList([...list, ...arr]);
+			}
 		},
 	});
 

src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.module.css

@@ -33,12 +33,12 @@
 
 .content {
 	display: flex;
-	/* position: relative; */
-	/* overflow: hidden; */
+	position: relative;
 	border-radius: 4px;
 	margin-bottom: 20px;
 	height: 600px;
 }
+
 .form {
 	width: 368px;
 	min-width: 368px;
@@ -109,3 +109,23 @@
 .react-flow > div:last-child {
 	display: none;
 }
+
+.formOpen {
+	position: absolute;
+	height: 100%;
+	left: -420px;
+}
+
+.formClose {
+	height: 100%;
+}
+
+.helpOpen {
+	height: 100%;
+}
+
+.helpClose {
+	position: absolute;
+	height: 100%;
+	right: -420px;
+}

src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-18 16:12:55
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-31 11:23:34
+ * @LastEditTime: 2022-10-31 19:54:43
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -392,12 +392,13 @@ const AddOperator = observer((props: IAddOperator) => {
 						/>
 					</div>
 				) : null}
-
 				<div className={style.content}>
 					<div
 						className={classNames({
 							[style.form]: batchBuildType === "ENVIRONMENT",
 							[style.newForm]: batchBuildType !== "ENVIRONMENT",
+							[style.formOpen]: tipsOpen,
+							[style.formClose]: !tipsOpen,
 						})}
 					>
 						<FormItemBox
@@ -572,7 +573,7 @@ const AddOperator = observer((props: IAddOperator) => {
 									style={{
 										position: "absolute",
 										fontSize: "14px",
-										bottom: "7px",
+										top: "216px",
 										right: "12px",
 										color:
 											Number(formData?.description?.length) >= 300
@@ -585,8 +586,15 @@ const AddOperator = observer((props: IAddOperator) => {
 							</FormItemBox>
 						</div>
 					)}
-					{/* <div style={{ width: "368px", backgroundColor: "red" }}></div> */}
+					<div
+						style={{ width: "368px", backgroundColor: "red" }}
+						className={classNames({
+							[style.helpOpen]: tipsOpen,
+							[style.helpClose]: !tipsOpen,
+						})}
+					></div>
 				</div>
+
 				{taskType === "FLOW" ? null : (
 					<div
 						className={style.parameterConfigBox}

src/views/ResourceCenter/UserResources/WorkflowOperator/index.module.css

@@ -16,3 +16,6 @@
 .contentBox {
 	padding: 0 20px 24px;
 }
+.noDataHeight {
+	height: calc(100vh - 177px);
+}

src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx

@@ -143,7 +143,7 @@ const WorkflowOperator = observer(() => {
 							></CardTable>
 						</div>
 					) : (
-						<div style={{ height: 300 }}>
+						<div className={styles.noDataHeight}>
 							<NoData text="暂无工作流算子"></NoData>
 						</div>
 					)}

src/views/demo/VirtuallyListDemo/index.tsx

+import VirtuallyList from "@/components/CommonComponents/VirtuallyList";
+
+const VirtuallyListDemo = () => {
+	let listData: Array<any> = [];
+	for (let i = 0; i < 10000; i++) {
+		listData.push({
+			name: "data" + i,
+			id: "data" + i,
+		});
+	}
+	const renderRow = ({
+		index,
+		isScrolling,
+		isVisible,
+		key,
+		parent,
+		style,
+	}: any) => {
+		// const name = listData[index].name;
+
+		// // const content = isScrolling ? "..." : <div>{name}</div>;
+		// const content = <div>{name}</div>;
+		return (
+			<div key={key} style={style}>
+				<div
+					style={{
+						display: "flex",
+						justifyContent: "space-between",
+						alignItems: "center",
+					}}
+				>
+					<div>{listData[index].name}</div>
+					<div>{listData[index].name}</div>
+					<div>{listData[index].name}</div>
+					<div>{listData[index].name}</div>
+					<div>{listData[index].name}</div>
+					<div>{listData[index].name}</div>
+					<div>{listData[index].name}</div>
+				</div>
+			</div>
+		);
+	};
+	return (
+		<div>
+			<div>
+				<VirtuallyList list={listData} renderRow={renderRow}></VirtuallyList>;
+			</div>
+			<div style={{ width: "300px", height: "300px", overflow: "auto" }}>
+				{listData.map((item, index) => {
+					return (
+						<div
+							key={index}
+							style={{
+								display: "flex",
+								justifyContent: "space-between",
+								alignItems: "center",
+							}}
+						>
+							<div>{listData[index].name}</div>
+							<div>{listData[index].name}</div>
+							<div>{listData[index].name}</div>
+							<div>{listData[index].name}</div>
+							<div>{listData[index].name}</div>
+							<div>{listData[index].name}</div>
+							<div>{listData[index].name}</div>
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+};
+
+export default VirtuallyListDemo;

src/views/demo/index.tsx

@@ -2,6 +2,7 @@ import MyTableDemo from "./MyTableDemo";
 import QueueSelectDemo from "./QueueSelectDemo";
 import IconfontDemo from "./IconfontDemo";
 import CardTableDemo from "./CardTableDemo";
+import VirtuallyListDemo from "./VirtuallyListDemo";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
 import { useState } from "react";
 import styles from "./index.module.css";
@@ -9,6 +10,10 @@ import style from "./index.module.scss";
 
 const Demo = () => {
 	const radioOptionsArr = [
+		{
+			value: "virtuallyListDemo",
+			label: "virtuallyListDemo",
+		},
 		{
 			value: "cardTable",
 			label: "cardTable",
@@ -33,7 +38,7 @@ const Demo = () => {
 	const handleRadio = (e: string) => {
 		setSelectDemo(e);
 	};
-	const [selectDemo, setSelectDemo] = useState("cardTable");
+	const [selectDemo, setSelectDemo] = useState("virtuallyListDemo");
 
 	return (
 		<div className={styles.demoBox}>
@@ -43,13 +48,15 @@ const Demo = () => {
 				handleRadio={handleRadio}
 			/>
 			<div className={styles.demoContentBox}>
+				{selectDemo === "virtuallyListDemo" && (
+					<VirtuallyListDemo></VirtuallyListDemo>
+				)}
 				{selectDemo === "cardTable" && <CardTableDemo></CardTableDemo>}
 				{selectDemo === "iconfont" && <IconfontDemo></IconfontDemo>}
 				{selectDemo === "队列选择器" && <QueueSelectDemo></QueueSelectDemo>}
 				{selectDemo === "表格" && <MyTableDemo></MyTableDemo>}
 				{selectDemo === "box" && <div>box</div>}
 			</div>
-			<div className={style.box}>123</div>
 		</div>
 	);
 };