feat: 完成cardtable

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

+.tableBox {
+	display: flex;
+	justify-content: flex-start;
+	flex-wrap: wrap;
+}
+.itemBox {
+}

src/components/CommonComponents/CardTable/index.tsx

 import style from "./index.module.css";
 
 interface ICardTableProps {
-	data: Array<any>;
-	renderItem: any;
+	data: Array<any>; // 列表数据
+	renderItem: any; // 单个卡片的渲染函数
+	tableKey?: string; // 表格数据的key
+	numberOfColumns?: number; // 列数   每行渲染几个
+	horizontalSpacing?: number; // 水平方向的间隔
+	verticalSpacing?: number; // 垂直方向的间隔
 }
 
 const CardTable = (props: ICardTableProps) => {
-	const { data, renderItem } = props;
-	return <div>CardTable</div>;
+	const {
+		data,
+		renderItem,
+		tableKey = "id",
+		numberOfColumns = 3,
+		horizontalSpacing = 20,
+		verticalSpacing = 20,
+	} = props;
+	return (
+		<div
+			className={style.tableBox}
+			style={{
+				marginLeft: `-${horizontalSpacing / 2}px`,
+				marginRight: `-${horizontalSpacing / 2}px`,
+			}}
+		>
+			{data.map((item, index) => {
+				return (
+					<div
+						className={style.itemBox}
+						key={item[tableKey] ? item[tableKey] : index}
+						style={{
+							width: `${100 / numberOfColumns}%`,
+							paddingLeft: `${horizontalSpacing / 2}px`,
+							paddingRight: `${horizontalSpacing / 2}px`,
+							paddingBottom: `${verticalSpacing}px`,
+							boxSizing: "border-box",
+						}}
+					>
+						{renderItem(item, index)}
+					</div>
+				);
+			})}
+		</div>
+	);
 };
 
 export default CardTable;

src/components/MyRouter/useMyRouter.ts

@@ -51,9 +51,6 @@ const useMyRouter = () => {
           route.path = `${routeHead}/${item.id}${route.path}`
           if (Array.isArray(route.children)) {
             route.children.forEach((childrenItem: any, index: number) => {
-              console.log(route)
-              console.log(childrenItem)
-              console.log(routeHead)
               if (childrenItem.path) {
                 childrenRoutes.push({
                   ...childrenItem,
@@ -63,7 +60,6 @@ const useMyRouter = () => {
                 })
               }
             })
-            // http://localhost:8088/v3/product/resourceCenter/userResources/seeEnv
             route.children = route.children.filter((childrenItem: any) => !childrenItem.path)
           }
         }

src/views/demo/CardTableDemo/index.tsx

+import CardTable from "@/components/CommonComponents/CardTable";
+
 const CardTableDemo = () => {
-	return <div>CardTableDemo</div>;
+	const list = [
+		{
+			id: 1,
+		},
+		{
+			id: 2,
+		},
+		{
+			id: 3,
+		},
+		{
+			id: 4,
+		},
+		{
+			id: 5,
+		},
+		{
+			id: 6,
+		},
+		{
+			id: 7,
+		},
+		{
+			id: 8,
+		},
+		{
+			id: 9,
+		},
+		{
+			id: 10,
+		},
+		{
+			id: 11,
+		},
+		{
+			id: 12,
+		},
+		{
+			id: 13,
+		},
+	];
+	const renderItem = (item: any) => {
+		return (
+			<div style={{ border: "1px solid red", height: "200px" }}>{item.id}</div>
+		);
+	};
+	return (
+		<div>
+			CardTableDemo
+			<CardTable
+				data={list}
+				renderItem={renderItem}
+				numberOfColumns={4}
+			></CardTable>
+		</div>
+	);
 };
 
 export default CardTableDemo;