diff --git a/src/components/Main/Bucket/index.module.less b/src/components/Main/Bucket/index.module.less
new file mode 100644
index 0000000..47bfce4
--- /dev/null
+++ b/src/components/Main/Bucket/index.module.less
@@ -0,0 +1,10 @@
+.proCard{
+	max-width: 100%;
+	margin: 10px;
+}
+.div_proCard{
+	display: flex;
+	flex-direction: row;
+	gap: 20px;
+	flex-wrap: wrap;
+}
diff --git a/src/components/Main/Bucket/index.tsx b/src/components/Main/Bucket/index.tsx
index d526060..3ee3de6 100644
--- a/src/components/Main/Bucket/index.tsx
+++ b/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;
diff --git a/src/components/Main/Bucket/index_createBucket.tsx b/src/components/Main/Bucket/index_createBucket.tsx
new file mode 100644
index 0000000..ed5fc79
--- /dev/null
+++ b/src/components/Main/Bucket/index_createBucket.tsx
@@ -0,0 +1,87 @@
+/** @format */
+
+import { FunctionComponent, useState } from "react";
+import {
+	ModalForm,
+	ProForm,
+	ProFormDateRangePicker,
+	ProFormSelect,
+	ProFormText,
+} from "@ant-design/pro-components";
+import { message } from "antd";
+
+const createBucket: FunctionComponent = () => {
+	const [modalVisit, setModalVisit] = useState(false);
+	return (
+		<>
+			<ModalForm
+				title="新建表单"
+				open={modalVisit}
+				onFinish={async () => {
+					message.success("提交成功");
+					return true;
+				}}
+				onOpenChange={setModalVisit}>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="name"
+						label="签约客户名称"
+						tooltip="最长为 24 位"
+						placeholder="请输入名称"
+					/>
+
+					<ProFormText
+						width="md"
+						name="company"
+						label="我方公司名称"
+						placeholder="请输入名称"
+					/>
+				</ProForm.Group>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="contract"
+						label="合同名称"
+						placeholder="请输入名称"
+					/>
+					<ProFormDateRangePicker name="contractTime" label="合同生效时间" />
+				</ProForm.Group>
+				<ProForm.Group>
+					<ProFormSelect
+						options={[
+							{
+								value: "chapter",
+								label: "盖章后生效",
+							},
+						]}
+						width="xs"
+						name="useMode"
+						label="合同约定生效方式"
+					/>
+					<ProFormSelect
+						width="xs"
+						options={[
+							{
+								value: "time",
+								label: "履行完终止",
+							},
+						]}
+						name="unusedMode"
+						label="合同约定失效效方式"
+					/>
+				</ProForm.Group>
+				<ProFormText width="sm" name="id" label="主合同编号" />
+				<ProFormText name="project" disabled label="项目名称" initialValue="xxxx项目" />
+				<ProFormText
+					width="xs"
+					name="mangerName"
+					disabled
+					label="商务经理"
+					initialValue="启途"
+				/>
+			</ModalForm>
+		</>
+	);
+};
+export default createBucket;