feat: 卡片列表适配调整

src/components/CommonComponents/CardTable/index.module.css

@@ -4,4 +4,5 @@
 	flex-wrap: wrap;
 }
 .itemBox {
+	/* flex: 1; */
 }

src/components/CommonComponents/CardTable/index.tsx

+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import style from "./index.module.css";
 
 interface ICardTableProps {
 	data: Array<any>; // 列表数据
 	renderItem: any; // 单个卡片的渲染函数
+	itemMinWidth?: number; // 单个卡片的最小宽度，有这个参数时numberOfColumns参数失效，效果为根据屏幕大小和单个卡片的最小宽度来适配每行渲染个数
 	tableKey?: string; // 表格数据的key
 	numberOfColumns?: number; // 列数   每行渲染几个
 	horizontalSpacing?: number; // 水平方向的间隔
@@ -14,10 +16,41 @@ const CardTable = (props: ICardTableProps) => {
 		data,
 		renderItem,
 		tableKey = "id",
-		numberOfColumns = 3,
+		numberOfColumns: propsNumberOfColumns = 3,
 		horizontalSpacing = 20,
 		verticalSpacing = 20,
+		itemMinWidth,
 	} = props;
+
+	const [numberOfColumns, setNumberOfColumns] = useState(3);
+
+	const getNumberOfColumns = useCallback(() => {
+		if (itemMinWidth) {
+			const boxWidth = tableBoxRef?.current?.offsetWidth;
+			if (boxWidth) {
+				setNumberOfColumns(Math.floor(boxWidth / itemMinWidth));
+			} else {
+				setNumberOfColumns(propsNumberOfColumns);
+			}
+		} else {
+			setNumberOfColumns(propsNumberOfColumns);
+		}
+	}, [itemMinWidth, propsNumberOfColumns]);
+
+	useEffect(() => {
+		getNumberOfColumns();
+	}, [getNumberOfColumns]);
+
+	const tableBoxRef: any = useRef(null);
+
+	const boxWidth = useMemo(() => {
+		return `${100 / numberOfColumns}%`;
+	}, [numberOfColumns]);
+
+	window.onresize = () => {
+		getNumberOfColumns();
+	};
+
 	return (
 		<div
 			className={style.tableBox}
@@ -25,6 +58,7 @@ const CardTable = (props: ICardTableProps) => {
 				marginLeft: `-${horizontalSpacing / 2}px`,
 				marginRight: `-${horizontalSpacing / 2}px`,
 			}}
+			ref={tableBoxRef}
 		>
 			{data.map((item, index) => {
 				return (
@@ -32,7 +66,7 @@ const CardTable = (props: ICardTableProps) => {
 						className={style.itemBox}
 						key={item[tableKey] ? item[tableKey] : index}
 						style={{
-							width: `${100 / numberOfColumns}%`,
+							width: boxWidth,
 							paddingLeft: `${horizontalSpacing / 2}px`,
 							paddingRight: `${horizontalSpacing / 2}px`,
 							paddingBottom: `${verticalSpacing}px`,

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

@@ -162,7 +162,11 @@ const UserResourcesTemplate = observer(() => {
 				</div>
 			</div>
 			<div className={style.tableBox}>
-				<CardTable data={list} renderItem={renderItem}></CardTable>
+				<CardTable
+					data={list}
+					renderItem={renderItem}
+					minWidth={377}
+				></CardTable>
 			</div>
 			{showAddTemplate && (
 				<WorkFlowEdit