feat: 样式优化

src/components/CommonComponents/VirtuallyTable/index.module.scss

@@ -5,11 +5,25 @@
 	padding: 12px 16px;
 	white-space: nowrap;
 	font-weight: 400;
+	box-sizing: border-box;
 }
 .VTHeaderRow {
 	background-color: rgba(247, 248, 250, 1);
 	box-sizing: border-box;
 }
 .VTRow {
-	background-color: yellow;
+	background-color: #fff;
+	box-sizing: border-box;
+	&:hover {
+		background-color: rgba(245, 246, 247, 1);
+	}
+}
+.VTRowColumn {
+	text-align: left;
+	box-sizing: border-box;
+	font-size: 14px;
+	line-height: 22px;
+	color: rgba(30, 38, 51, 1);
+	padding: 16px;
+	border-bottom: 1px solid rgba(240, 242, 245, 1);
 }

src/components/CommonComponents/VirtuallyTable/index.tsx

 import React from "react";
-import { useCallback, useEffect, useState, useRef } from "react";
+import { useCallback, useEffect, useState, useRef, useMemo } from "react";
 import { Column, Table, AutoSizer } from "react-virtualized";
 import style from "./index.module.scss";
 import "react-virtualized/styles.css"; // only needs to be imported once
+import MyCircularProgress from "@/components/mui/MyCircularProgress";
 
 type Order = "ASC" | "DESC"; // 升序为asc，降序为desc。
 
@@ -60,35 +61,6 @@ const VirtuallyTable = (props: IVirtuallyTableProps) => {
 	const [width, setWidth] = useState(0);
 	const [height, setHeight] = useState(0);
 
-	// const list = [
-	// 	{ name: "Brian Vaughn", description: "Software engineer" },
-	// 	{ name: "Brian Vaughn", description: "Software engineer" },
-	// 	{ name: "Brian Vaughn", description: "Software engineer" },
-	// 	{ name: "Brian Vaughn", description: "Software engineer" },
-	// 	{ name: "Brian Vaughn", description: "Software engineer" },
-	// 	{ name: "Brian Vaughn", description: "Software engineer" },
-	// 	{ name: "Brian Vaughn", description: "Software engineer" },
-	// 	{ name: "Brian Vaughn", description: "Software engineer" },
-	// 	{ name: "Brian Vaughn", description: "Software engineer" },
-	// 	{ name: "Brian Vaughn", description: "Software engineer" },
-	// 	{ name: "Brian Vaughn", description: "Software engineer" },
-	// 	{ name: "Brian Vaughn", description: "Software engineer" },
-	// 	{ name: "Brian Vaughn", description: "Software engineer" },
-	// 	// And so on...
-	// ];
-	console.log(rows);
-	console.log(headCells);
-
-	// const getCodeWidth = () => {
-	// 	const addEnvironmentCodeElement =
-	// 		document.getElementById("addEnvironmentCode");
-	// 	setCodeWidth(addEnvironmentCodeElement?.offsetWidth || 0);
-	// };
-
-	// useEffect(() => {
-	// 	getCodeWidth();
-	// }, []);
-
 	const getTableWidthHeight = () => {
 		setWidth(virtuallyTableBoxRef?.current?.offsetWidth || 1000);
 		setHeight(virtuallyTableBoxRef?.current?.offsetHeight || 300);
@@ -105,15 +77,16 @@ const VirtuallyTable = (props: IVirtuallyTableProps) => {
 	return (
 		<div
 			ref={virtuallyTableBoxRef}
-			style={{ width: "100%", height: "100%", border: "1px solid red" }}
+			style={{ width: "100%", height: "100%", position: "relative" }}
 		>
+			<MyCircularProgress loading={loading} />
 			{width && height && (
 				<Table
 					ref={virtuallyTableRef}
 					width={width}
 					height={height}
 					headerHeight={59}
-					rowHeight={30}
+					rowHeight={54}
 					rowCount={rows.length}
 					rowGetter={({ index }: any) => rows[index]}
 					headerClassName={style.VTHeader}
@@ -124,9 +97,9 @@ const VirtuallyTable = (props: IVirtuallyTableProps) => {
 							return style.VTRow;
 						}
 					}}
-					// rowClassName={style.VTRow}
 				>
 					{headCells.map((headCell) => {
+						console.log(headCell.cellRenderer);
 						return (
 							<Column
 								key={headCell.id}
@@ -136,13 +109,12 @@ const VirtuallyTable = (props: IVirtuallyTableProps) => {
 								flexGrow={headCell.flexGrow || 0}
 								cellRenderer={
 									headCell.cellRenderer
-										? (data: any) => {
-												headCell.cellRenderer(data);
-										  }
+										? headCell.cellRenderer
 										: (data: any) => {
 												return data.cellData;
 										  }
 								}
+								className={style.VTRowColumn}
 							/>
 						);
 					})}

src/components/mui/MySelect.tsx

@@ -182,10 +182,14 @@ export default function MySelect(props: IProps) {
 				styleOverrides: {
 					root: {
 						boxShadow: "0px 3px 10px 0px rgba(0,24,57,0.14)",
+						"&.MuiPopover-paper": {
+							maxHeight: "300px",
+						},
 					},
 				},
 			},
 
+			// .css-kdgfg8-MuiPaper-root-MuiMenu-paper-MuiPaper-root-MuiPopover-paper
 			// MuiFormControl: {
 			// 	styleOverrides: {
 			// 		root: {

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

@@ -234,7 +234,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
 								setTitle(e.target.value);
 							}}
 							onKeyUp={handleKeyWordChangeKeyUp}
-							placeholder="输入关键词搜索"
+							placeholder="输入关键词按回车搜索"
 							size="small"
 							sx={{ width: 340, height: 32 }}
 							endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}

src/views/demo/VirtuallyListDemo/index.tsx

@@ -74,7 +74,7 @@ const VirtuallyListDemo = () => {
 			id: "c",
 			label: "属性c",
 			width: 150,
-			flexGrow: 2,
+			// flexGrow: 2,
 		},
 		{
 			id: "d",
@@ -86,7 +86,16 @@ const VirtuallyListDemo = () => {
 			id: "caozuo",
 			label: "操作",
 			width: 150,
-			cellRenderer: (data: any) => {},
+			cellRenderer: (data: any) => {
+				return (
+					<MyButton
+						text="删除"
+						onClick={() => {
+							// handleDelete(row.id);
+						}}
+					></MyButton>
+				);
+			},
 		},
 	];