feat: 全部厂商和存储桶管理

src/components/Main/Bucket/index.tsx

@@ -1,97 +1,71 @@
 /** @format */
-import { FunctionComponent } from "react";
-import { ProCard } from "@ant-design/pro-components";
-import { Avatar, Button } from "antd";
-import {
-	EditOutlined,
-	EllipsisOutlined,
-	PlusCircleFilled,
-	SettingOutlined,
-} from "@ant-design/icons";
-import bucket from "@/assets/icons/bucket.svg";
-import selectOptions from "@/components/Main/Settings/defaultSettings.ts";
-import StorageIcon from "@/context/stroage-icon.ts";
+import { FunctionComponent, Suspense } from "react";
+import { CheckCard, ProCard } from "@ant-design/pro-components";
 import styles from "./index.module.less";
 
+import { Outlet, useNavigate } from "react-router-dom";
+import { Button, Empty } from "antd";
+import StorageIcon from "@/context/stroage-icon.ts";
+import { ReloadOutlined } from "@ant-design/icons";
+
 const Bucket: FunctionComponent = () => {
-	// const [modalVisit, setModalVisit] = useState(false);
-	const bucketList = selectOptions.map((storage, index) => {
-		return (
+	const navigate = useNavigate();
+	const checkList = ["minio", "ali", "tencent", "huawei", "baidu", "jd"];
+	return (
+		<div className={styles.div_proCard}>
 			<ProCard
-				className={styles.proCard}
-				key={index}
-				boxShadow
-				bordered
-				onCollapse={(collapsed) => {
-					console.log(collapsed);
-				}}
-				title={
-					<span>
-						<Avatar src={StorageIcon[storage.value]} size={"default"}></Avatar>
-						<b> {storage.name}</b>
-					</span>
-				}
-				headerBordered
-				collapsible
-				defaultCollapsed
 				extra={
 					<Button
-						style={{ borderWidth: "1px" }}
-						icon={<PlusCircleFilled />}
-						size="middle"
-						onClick={() => {
-							// setDrawerVisit(true);
-						}}>
-						创建
-					</Button>
-				}>
-				<div className={styles.div_proCard}>
-					<ProCard
-						hoverable
-						bordered
-						title="存储桶"
-						style={{
-							width: "200px",
-						}}
-						actions={[
-							<SettingOutlined key="setting" />,
-							<EditOutlined key="edit" />,
-							<EllipsisOutlined key="ellipsis" />,
-						]}>
-						<Avatar shape={"square"} src={bucket} size={"large"} />
-						<b style={{ marginLeft: 10 }}> size</b>
-					</ProCard>
-					<ProCard
-						hoverable
-						bordered
-						title="存储桶"
-						style={{
-							width: "200px",
-						}}
-						actions={[
-							<SettingOutlined key="setting" />,
-							<EditOutlined key="edit" />,
-							<EllipsisOutlined key="ellipsis" />,
-						]}>
-						<Avatar shape={"square"} src={bucket} size={"large"} />
-					</ProCard>
-				</div>
+						type="primary"
+						shape={"circle"}
+						icon={<ReloadOutlined />}
+						onClick={() => navigate("/main/bucket/add")}></Button>
+				}
+				title="存储商"
+				headerBordered
+				className={styles.proCard}
+				boxShadow={true}
+				colSpan={"100%"}
+				bordered>
+				<CheckCard.Group
+					onChange={(value) => {
+						console.log("value", value);
+					}}>
+					<div className={styles.div_checkCardArea}>
+						{checkList.map((item) => {
+							return (
+								<CheckCard
+									key={item}
+									avatar={StorageIcon[item]}
+									style={{ width: "100%" }}
+									title={item}
+									description="点击查看"
+									value={item}
+									onChange={() => {
+										console.log(`/main/bucket/${item}`);
+										navigate(`/main/bucket/${item}`);
+									}}
+								/>
+							);
+						})}
+					</div>
+				</CheckCard.Group>
 			</ProCard>
-		);
-	});
-
-	return (
-		<>
-			<div
-				style={{
-					display: "flex",
-					flexDirection: "column",
-					padding: 24,
-					gap: 12,
-				}}>
-				{bucketList}
-			</div>
-		</>
+			<ProCard className={styles.proCardBucket} bordered boxShadow>
+				{location.pathname === "/main/bucket" || location.pathname === "/main/bucket/" ? (
+					<>
+						<div></div>
+						<Empty description={"请选择存储商"} />
+					</>
+				) : (
+					<>
+						<Suspense>
+							<Outlet />
+						</Suspense>
+					</>
+				)}
+			</ProCard>
+		</div>
 	);
 };
 export default Bucket;