feat: 样式优化

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/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx

@@ -572,7 +572,7 @@ const AddOperator = observer((props: IAddOperator) => {
 									style={{
 										position: "absolute",
 										fontSize: "14px",
-										bottom: "7px",
+										top: "216px",
 										right: "12px",
 										color:
 											Number(formData?.description?.length) >= 300

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>
 	);
 };