feat: 存储桶管理

src/components/Main/Bucket/index.tsx

@@ -1,7 +1,97 @@
 /** @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 styles from "./index.module.less";
 
 const Bucket: FunctionComponent = () => {
-	return <div>存储桶</div>;
+	// const [modalVisit, setModalVisit] = useState(false);
+	const bucketList = selectOptions.map((storage, index) => {
+		return (
+			<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>
+			</ProCard>
+		);
+	});
+
+	return (
+		<>
+			<div
+				style={{
+					display: "flex",
+					flexDirection: "column",
+					padding: 24,
+					gap: 12,
+				}}>
+				{bucketList}
+			</div>
+		</>
+	);
 };
 export default Bucket;