diff --git a/src/api/oss/minio/index.ts b/src/api/oss/minio/index.ts
index 5788cf4..b224962 100644
--- a/src/api/oss/minio/index.ts
+++ b/src/api/oss/minio/index.ts
@@ -32,3 +32,16 @@ export const getDirAndFileList = (userId: any, dirName: any, bucket: any) => {
 		},
 	});
 };
+/**
+ * 获取用户拥有的厂商
+ * @param userId
+ */
+export const getBrandsList = (userId: any) => {
+	return web.request({
+		url: "/oss/oss/minio/userId",
+		method: "get",
+		params: {
+			userId: userId,
+		},
+	});
+};
diff --git a/src/components/Main/Bucket/components/AliDrawer.tsx b/src/components/Main/Bucket/components/AliDrawer.tsx
new file mode 100644
index 0000000..b6e209f
--- /dev/null
+++ b/src/components/Main/Bucket/components/AliDrawer.tsx
@@ -0,0 +1,119 @@
+/** @format */
+
+import { Avatar, Button, message } from "antd";
+import {
+	DrawerForm,
+	ProCard,
+	ProForm,
+	ProFormText,
+} from "@ant-design/pro-components";
+import React, { createContext, useContext, useState } from "react";
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from "@ant-design/icons";
+import bucket from "../../../../assets/icons/bucket.svg";
+import styles from "./index.module.less";
+
+const DrawerContext = createContext<{
+	drawerVisit: boolean;
+	setDrawerVisit: React.Dispatch<React.SetStateAction<boolean>>;
+}>({} as any);
+const AliDrawer = () => {
+	const [drawerVisit, setDrawerVisit] = useState(false);
+	return (
+		<DrawerContext.Provider value={{ drawerVisit, setDrawerVisit }}>
+			<ProCardComponent />
+		</DrawerContext.Provider>
+	);
+};
+const ProCardComponent = () => {
+	const { drawerVisit, setDrawerVisit } = useContext(DrawerContext);
+	const list = [
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+	];
+
+	const bucketList = () => {
+		return (
+			<ProCard
+				title={"存储桶列表"}
+				headerBordered
+				extra={
+					<Button type="primary" onClick={() => setDrawerVisit(true)}>
+						创建存储桶
+					</Button>
+				}>
+				<div className={styles.div_proCard}>
+					{list.map((item, index) => {
+						return (
+							<ProCard
+								headStyle={{ backgroundColor: "#f0f2f5" }}
+								hoverable
+								bordered
+								key={index}
+								title={<b>名字：{item}</b>}
+								style={{
+									width: "180px",
+									borderWidth: "1px",
+								}}
+								actions={[
+									<SettingOutlined key="setting" />,
+									<EditOutlined key="edit" />,
+									<EllipsisOutlined key="ellipsis" />,
+								]}>
+								<Avatar shape={"square"} src={bucket} size={"large"} />
+								<b style={{ marginLeft: 10 }}> size</b>
+							</ProCard>
+						);
+					})}
+				</div>
+			</ProCard>
+		);
+	};
+
+	return (
+		<>
+			{bucketList()}
+			<DrawerForm
+				title="创建存储桶"
+				open={drawerVisit}
+				onOpenChange={setDrawerVisit}
+				onFinish={async (values) => {
+					console.log(values.name);
+					message.success("提交成功");
+					return true;
+				}}>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="name"
+						label="存储桶名字"
+						tooltip="最长为 24 位"
+						placeholder="请输入名称"
+					/>
+
+					<ProFormText
+						width="md"
+						name="capacity"
+						label="我方公司名称"
+						placeholder="请输入名称"
+					/>
+				</ProForm.Group>
+			</DrawerForm>
+		</>
+	);
+};
+
+export default AliDrawer;
diff --git a/src/components/Main/Bucket/components/BaiduDrawer.tsx b/src/components/Main/Bucket/components/BaiduDrawer.tsx
new file mode 100644
index 0000000..c426d2b
--- /dev/null
+++ b/src/components/Main/Bucket/components/BaiduDrawer.tsx
@@ -0,0 +1,119 @@
+/** @format */
+
+import { Avatar, Button, message } from "antd";
+import {
+	DrawerForm,
+	ProCard,
+	ProForm,
+	ProFormText,
+} from "@ant-design/pro-components";
+import React, { createContext, useContext, useState } from "react";
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from "@ant-design/icons";
+import bucket from "../../../../assets/icons/bucket.svg";
+import styles from "./index.module.less";
+
+const DrawerContext = createContext<{
+	drawerVisit: boolean;
+	setDrawerVisit: React.Dispatch<React.SetStateAction<boolean>>;
+}>({} as any);
+const BaiduDrawer = () => {
+	const [drawerVisit, setDrawerVisit] = useState(false);
+	return (
+		<DrawerContext.Provider value={{ drawerVisit, setDrawerVisit }}>
+			<ProCardComponent />
+		</DrawerContext.Provider>
+	);
+};
+const ProCardComponent = () => {
+	const { drawerVisit, setDrawerVisit } = useContext(DrawerContext);
+	const list = [
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+	];
+
+	const bucketList = () => {
+		return (
+			<ProCard
+				title={"存储桶列表"}
+				headerBordered
+				extra={
+					<Button type="primary" onClick={() => setDrawerVisit(true)}>
+						创建存储桶
+					</Button>
+				}>
+				<div className={styles.div_proCard}>
+					{list.map((item, index) => {
+						return (
+							<ProCard
+								headStyle={{ backgroundColor: "#f0f2f5" }}
+								hoverable
+								bordered
+								key={index}
+								title={<b>名字：{item}</b>}
+								style={{
+									width: "180px",
+									borderWidth: "1px",
+								}}
+								actions={[
+									<SettingOutlined key="setting" />,
+									<EditOutlined key="edit" />,
+									<EllipsisOutlined key="ellipsis" />,
+								]}>
+								<Avatar shape={"square"} src={bucket} size={"large"} />
+								<b style={{ marginLeft: 10 }}> size</b>
+							</ProCard>
+						);
+					})}
+				</div>
+			</ProCard>
+		);
+	};
+
+	return (
+		<>
+			{bucketList()}
+			<DrawerForm
+				title="创建存储桶"
+				open={drawerVisit}
+				onOpenChange={setDrawerVisit}
+				onFinish={async (values) => {
+					console.log(values.name);
+					message.success("提交成功");
+					return true;
+				}}>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="name"
+						label="存储桶名字"
+						tooltip="最长为 24 位"
+						placeholder="请输入名称"
+					/>
+
+					<ProFormText
+						width="md"
+						name="capacity"
+						label="我方公司名称"
+						placeholder="请输入名称"
+					/>
+				</ProForm.Group>
+			</DrawerForm>
+		</>
+	);
+};
+
+export default BaiduDrawer;
diff --git a/src/components/Main/Bucket/components/HuaweiDrawer.tsx b/src/components/Main/Bucket/components/HuaweiDrawer.tsx
new file mode 100644
index 0000000..9c85096
--- /dev/null
+++ b/src/components/Main/Bucket/components/HuaweiDrawer.tsx
@@ -0,0 +1,114 @@
+/** @format */
+
+import { Avatar, Button, message } from "antd";
+import { DrawerForm, ProCard, ProForm, ProFormText } from "@ant-design/pro-components";
+import React, { createContext, useContext, useState } from "react";
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from "@ant-design/icons";
+import bucket from "../../../../assets/icons/bucket.svg";
+import styles from "./index.module.less";
+
+const DrawerContext = createContext<{
+	drawerVisit: boolean;
+	setDrawerVisit: React.Dispatch<React.SetStateAction<boolean>>;
+}>({} as any);
+const HuaweiDrawer = () => {
+	const [drawerVisit, setDrawerVisit] = useState(false);
+	return (
+		<DrawerContext.Provider value={{ drawerVisit, setDrawerVisit }}>
+			<ProCardComponent />
+		</DrawerContext.Provider>
+	);
+};
+const ProCardComponent = () => {
+	const { drawerVisit, setDrawerVisit } = useContext(DrawerContext);
+	const list = [
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+	];
+
+	const bucketList = () => {
+		return (
+			<ProCard
+				title={"存储桶列表"}
+				headerBordered
+				extra={
+					<Button type="primary" onClick={() => setDrawerVisit(true)}>
+						创建存储桶
+					</Button>
+				}>
+				<div className={styles.div_proCard}>
+					{list.map((item, index) => {
+						return (
+							<ProCard
+								headStyle={{ backgroundColor: "#f0f2f5" }}
+								hoverable
+								bordered
+								key={index}
+								title={<b>名字：{item}</b>}
+								style={{
+									width: "180px",
+									borderWidth: "1px",
+								}}
+								actions={[
+									<SettingOutlined key="setting" />,
+									<EditOutlined key="edit" />,
+									<EllipsisOutlined key="ellipsis" />,
+								]}>
+								<Avatar shape={"square"} src={bucket} size={"large"} />
+								<b style={{ marginLeft: 10 }}> size</b>
+							</ProCard>
+						);
+					})}
+				</div>
+			</ProCard>
+		);
+	};
+
+	return (
+		<>
+			{bucketList()}
+			<DrawerForm
+				title="创建存储桶"
+				open={drawerVisit}
+				onOpenChange={setDrawerVisit}
+				onFinish={async (values) => {
+					console.log(values.name);
+					message.success("提交成功");
+					return true;
+				}}>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="name"
+						label="存储桶名字"
+						tooltip="最长为 24 位"
+						placeholder="请输入名称"
+					/>
+
+					<ProFormText
+						width="md"
+						name="capacity"
+						label="我方公司名称"
+						placeholder="请输入名称"
+					/>
+				</ProForm.Group>
+			</DrawerForm>
+		</>
+	);
+};
+
+export default HuaweiDrawer;
diff --git a/src/components/Main/Bucket/components/JdDrawer.tsx b/src/components/Main/Bucket/components/JdDrawer.tsx
new file mode 100644
index 0000000..3916b47
--- /dev/null
+++ b/src/components/Main/Bucket/components/JdDrawer.tsx
@@ -0,0 +1,119 @@
+/** @format */
+
+import { Avatar, Button, message } from "antd";
+import {
+	DrawerForm,
+	ProCard,
+	ProForm,
+	ProFormText,
+} from "@ant-design/pro-components";
+import React, { createContext, useContext, useState } from "react";
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from "@ant-design/icons";
+import bucket from "../../../../assets/icons/bucket.svg";
+import styles from "./index.module.less";
+
+const DrawerContext = createContext<{
+	drawerVisit: boolean;
+	setDrawerVisit: React.Dispatch<React.SetStateAction<boolean>>;
+}>({} as any);
+const JdDrawer = () => {
+	const [drawerVisit, setDrawerVisit] = useState(false);
+	return (
+		<DrawerContext.Provider value={{ drawerVisit, setDrawerVisit }}>
+			<ProCardComponent />
+		</DrawerContext.Provider>
+	);
+};
+const ProCardComponent = () => {
+	const { drawerVisit, setDrawerVisit } = useContext(DrawerContext);
+	const list = [
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+	];
+
+	const bucketList = () => {
+		return (
+			<ProCard
+				title={"存储桶列表"}
+				headerBordered
+				extra={
+					<Button type="primary" onClick={() => setDrawerVisit(true)}>
+						创建存储桶
+					</Button>
+				}>
+				<div className={styles.div_proCard}>
+					{list.map((item, index) => {
+						return (
+							<ProCard
+								headStyle={{ backgroundColor: "#f0f2f5" }}
+								hoverable
+								bordered
+								key={index}
+								title={<b>名字：{item}</b>}
+								style={{
+									width: "180px",
+									borderWidth: "1px",
+								}}
+								actions={[
+									<SettingOutlined key="setting" />,
+									<EditOutlined key="edit" />,
+									<EllipsisOutlined key="ellipsis" />,
+								]}>
+								<Avatar shape={"square"} src={bucket} size={"large"} />
+								<b style={{ marginLeft: 10 }}> size</b>
+							</ProCard>
+						);
+					})}
+				</div>
+			</ProCard>
+		);
+	};
+
+	return (
+		<>
+			{bucketList()}
+			<DrawerForm
+				title="创建存储桶"
+				open={drawerVisit}
+				onOpenChange={setDrawerVisit}
+				onFinish={async (values) => {
+					console.log(values.name);
+					message.success("提交成功");
+					return true;
+				}}>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="name"
+						label="存储桶名字"
+						tooltip="最长为 24 位"
+						placeholder="请输入名称"
+					/>
+
+					<ProFormText
+						width="md"
+						name="capacity"
+						label="我方公司名称"
+						placeholder="请输入名称"
+					/>
+				</ProForm.Group>
+			</DrawerForm>
+		</>
+	);
+};
+
+export default JdDrawer;
diff --git a/src/components/Main/Bucket/components/JinshanDrawer.tsx b/src/components/Main/Bucket/components/JinshanDrawer.tsx
new file mode 100644
index 0000000..3181f47
--- /dev/null
+++ b/src/components/Main/Bucket/components/JinshanDrawer.tsx
@@ -0,0 +1,119 @@
+/** @format */
+
+import { Avatar, Button, message } from "antd";
+import {
+	DrawerForm,
+	ProCard,
+	ProForm,
+	ProFormText,
+} from "@ant-design/pro-components";
+import React, { createContext, useContext, useState } from "react";
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from "@ant-design/icons";
+import bucket from "../../../../assets/icons/bucket.svg";
+import styles from "./index.module.less";
+
+const DrawerContext = createContext<{
+	drawerVisit: boolean;
+	setDrawerVisit: React.Dispatch<React.SetStateAction<boolean>>;
+}>({} as any);
+const JinshanDrawer = () => {
+	const [drawerVisit, setDrawerVisit] = useState(false);
+	return (
+		<DrawerContext.Provider value={{ drawerVisit, setDrawerVisit }}>
+			<ProCardComponent />
+		</DrawerContext.Provider>
+	);
+};
+const ProCardComponent = () => {
+	const { drawerVisit, setDrawerVisit } = useContext(DrawerContext);
+	const list = [
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+	];
+
+	const bucketList = () => {
+		return (
+			<ProCard
+				title={"存储桶列表"}
+				headerBordered
+				extra={
+					<Button type="primary" onClick={() => setDrawerVisit(true)}>
+						创建存储桶
+					</Button>
+				}>
+				<div className={styles.div_proCard}>
+					{list.map((item, index) => {
+						return (
+							<ProCard
+								headStyle={{ backgroundColor: "#f0f2f5" }}
+								hoverable
+								bordered
+								key={index}
+								title={<b>名字：{item}</b>}
+								style={{
+									width: "180px",
+									borderWidth: "1px",
+								}}
+								actions={[
+									<SettingOutlined key="setting" />,
+									<EditOutlined key="edit" />,
+									<EllipsisOutlined key="ellipsis" />,
+								]}>
+								<Avatar shape={"square"} src={bucket} size={"large"} />
+								<b style={{ marginLeft: 10 }}> size</b>
+							</ProCard>
+						);
+					})}
+				</div>
+			</ProCard>
+		);
+	};
+
+	return (
+		<>
+			{bucketList()}
+			<DrawerForm
+				title="创建存储桶"
+				open={drawerVisit}
+				onOpenChange={setDrawerVisit}
+				onFinish={async (values) => {
+					console.log(values.name);
+					message.success("提交成功");
+					return true;
+				}}>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="name"
+						label="存储桶名字"
+						tooltip="最长为 24 位"
+						placeholder="请输入名称"
+					/>
+
+					<ProFormText
+						width="md"
+						name="capacity"
+						label="我方公司名称"
+						placeholder="请输入名称"
+					/>
+				</ProForm.Group>
+			</DrawerForm>
+		</>
+	);
+};
+
+export default JinshanDrawer;
diff --git a/src/components/Main/Bucket/components/MinioDrawer.tsx b/src/components/Main/Bucket/components/MinioDrawer.tsx
new file mode 100644
index 0000000..72c8988
--- /dev/null
+++ b/src/components/Main/Bucket/components/MinioDrawer.tsx
@@ -0,0 +1,114 @@
+/** @format */
+
+import { Avatar, Button, message } from "antd";
+import { DrawerForm, ProCard, ProForm, ProFormText } from "@ant-design/pro-components";
+import React, { createContext, useContext, useState } from "react";
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from "@ant-design/icons";
+import bucket from "../../../../assets/icons/bucket.svg";
+import styles from "./index.module.less";
+
+const DrawerContext = createContext<{
+	drawerVisit: boolean;
+	setDrawerVisit: React.Dispatch<React.SetStateAction<boolean>>;
+}>({} as any);
+const MinioDrawer = () => {
+	const [drawerVisit, setDrawerVisit] = useState(false);
+	return (
+		<DrawerContext.Provider value={{ drawerVisit, setDrawerVisit }}>
+			<ProCardComponent />
+		</DrawerContext.Provider>
+	);
+};
+const ProCardComponent = () => {
+	const { drawerVisit, setDrawerVisit } = useContext(DrawerContext);
+	const list = [
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+	];
+
+	const bucketList = () => {
+		return (
+			<ProCard
+				title={"存储桶列表"}
+				headerBordered
+				extra={
+					<Button type="primary" onClick={() => setDrawerVisit(true)}>
+						创建存储桶
+					</Button>
+				}>
+				<div className={styles.div_proCard}>
+					{list.map((item, index) => {
+						return (
+							<ProCard
+								headStyle={{ backgroundColor: "#f0f2f5" }}
+								hoverable
+								bordered
+								key={index}
+								title={<b>名字：{item}</b>}
+								style={{
+									width: "180px",
+									borderWidth: "1px",
+								}}
+								actions={[
+									<SettingOutlined key="setting" />,
+									<EditOutlined key="edit" />,
+									<EllipsisOutlined key="ellipsis" />,
+								]}>
+								<Avatar shape={"square"} src={bucket} size={"large"} />
+								<b style={{ marginLeft: 10 }}> size</b>
+							</ProCard>
+						);
+					})}
+				</div>
+			</ProCard>
+		);
+	};
+
+	return (
+		<>
+			{bucketList()}
+			<DrawerForm
+				title="创建存储桶"
+				open={drawerVisit}
+				onOpenChange={setDrawerVisit}
+				onFinish={async (values) => {
+					console.log(values.name);
+					message.success("提交成功");
+					return true;
+				}}>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="name"
+						label="存储桶名字"
+						tooltip="最长为 24 位"
+						placeholder="请输入名称"
+					/>
+
+					<ProFormText
+						width="md"
+						name="capacity"
+						label="我方公司名称"
+						placeholder="请输入名称"
+					/>
+				</ProForm.Group>
+			</DrawerForm>
+		</>
+	);
+};
+
+export default MinioDrawer;
diff --git a/src/components/Main/Bucket/components/PinganDrawer.tsx b/src/components/Main/Bucket/components/PinganDrawer.tsx
new file mode 100644
index 0000000..4eb0f37
--- /dev/null
+++ b/src/components/Main/Bucket/components/PinganDrawer.tsx
@@ -0,0 +1,119 @@
+/** @format */
+
+import { Avatar, Button, message } from "antd";
+import {
+	DrawerForm,
+	ProCard,
+	ProForm,
+	ProFormText,
+} from "@ant-design/pro-components";
+import React, { createContext, useContext, useState } from "react";
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from "@ant-design/icons";
+import bucket from "../../../../assets/icons/bucket.svg";
+import styles from "./index.module.less";
+
+const DrawerContext = createContext<{
+	drawerVisit: boolean;
+	setDrawerVisit: React.Dispatch<React.SetStateAction<boolean>>;
+}>({} as any);
+const PinganDrawer = () => {
+	const [drawerVisit, setDrawerVisit] = useState(false);
+	return (
+		<DrawerContext.Provider value={{ drawerVisit, setDrawerVisit }}>
+			<ProCardComponent />
+		</DrawerContext.Provider>
+	);
+};
+const ProCardComponent = () => {
+	const { drawerVisit, setDrawerVisit } = useContext(DrawerContext);
+	const list = [
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+	];
+
+	const bucketList = () => {
+		return (
+			<ProCard
+				title={"存储桶列表"}
+				headerBordered
+				extra={
+					<Button type="primary" onClick={() => setDrawerVisit(true)}>
+						创建存储桶
+					</Button>
+				}>
+				<div className={styles.div_proCard}>
+					{list.map((item, index) => {
+						return (
+							<ProCard
+								headStyle={{ backgroundColor: "#f0f2f5" }}
+								hoverable
+								bordered
+								key={index}
+								title={<b>名字：{item}</b>}
+								style={{
+									width: "180px",
+									borderWidth: "1px",
+								}}
+								actions={[
+									<SettingOutlined key="setting" />,
+									<EditOutlined key="edit" />,
+									<EllipsisOutlined key="ellipsis" />,
+								]}>
+								<Avatar shape={"square"} src={bucket} size={"large"} />
+								<b style={{ marginLeft: 10 }}> size</b>
+							</ProCard>
+						);
+					})}
+				</div>
+			</ProCard>
+		);
+	};
+
+	return (
+		<>
+			{bucketList()}
+			<DrawerForm
+				title="创建存储桶"
+				open={drawerVisit}
+				onOpenChange={setDrawerVisit}
+				onFinish={async (values) => {
+					console.log(values.name);
+					message.success("提交成功");
+					return true;
+				}}>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="name"
+						label="存储桶名字"
+						tooltip="最长为 24 位"
+						placeholder="请输入名称"
+					/>
+
+					<ProFormText
+						width="md"
+						name="capacity"
+						label="我方公司名称"
+						placeholder="请输入名称"
+					/>
+				</ProForm.Group>
+			</DrawerForm>
+		</>
+	);
+};
+
+export default PinganDrawer;
diff --git a/src/components/Main/Bucket/components/QingyunDrawer.tsx b/src/components/Main/Bucket/components/QingyunDrawer.tsx
new file mode 100644
index 0000000..a220b30
--- /dev/null
+++ b/src/components/Main/Bucket/components/QingyunDrawer.tsx
@@ -0,0 +1,119 @@
+/** @format */
+
+import { Avatar, Button, message } from "antd";
+import {
+	DrawerForm,
+	ProCard,
+	ProForm,
+	ProFormText,
+} from "@ant-design/pro-components";
+import React, { createContext, useContext, useState } from "react";
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from "@ant-design/icons";
+import bucket from "../../../../assets/icons/bucket.svg";
+import styles from "./index.module.less";
+
+const DrawerContext = createContext<{
+	drawerVisit: boolean;
+	setDrawerVisit: React.Dispatch<React.SetStateAction<boolean>>;
+}>({} as any);
+const QingyunDrawer = () => {
+	const [drawerVisit, setDrawerVisit] = useState(false);
+	return (
+		<DrawerContext.Provider value={{ drawerVisit, setDrawerVisit }}>
+			<ProCardComponent />
+		</DrawerContext.Provider>
+	);
+};
+const ProCardComponent = () => {
+	const { drawerVisit, setDrawerVisit } = useContext(DrawerContext);
+	const list = [
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+	];
+
+	const bucketList = () => {
+		return (
+			<ProCard
+				title={"存储桶列表"}
+				headerBordered
+				extra={
+					<Button type="primary" onClick={() => setDrawerVisit(true)}>
+						创建存储桶
+					</Button>
+				}>
+				<div className={styles.div_proCard}>
+					{list.map((item, index) => {
+						return (
+							<ProCard
+								headStyle={{ backgroundColor: "#f0f2f5" }}
+								hoverable
+								bordered
+								key={index}
+								title={<b>名字：{item}</b>}
+								style={{
+									width: "180px",
+									borderWidth: "1px",
+								}}
+								actions={[
+									<SettingOutlined key="setting" />,
+									<EditOutlined key="edit" />,
+									<EllipsisOutlined key="ellipsis" />,
+								]}>
+								<Avatar shape={"square"} src={bucket} size={"large"} />
+								<b style={{ marginLeft: 10 }}> size</b>
+							</ProCard>
+						);
+					})}
+				</div>
+			</ProCard>
+		);
+	};
+
+	return (
+		<>
+			{bucketList()}
+			<DrawerForm
+				title="创建存储桶"
+				open={drawerVisit}
+				onOpenChange={setDrawerVisit}
+				onFinish={async (values) => {
+					console.log(values.name);
+					message.success("提交成功");
+					return true;
+				}}>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="name"
+						label="存储桶名字"
+						tooltip="最长为 24 位"
+						placeholder="请输入名称"
+					/>
+
+					<ProFormText
+						width="md"
+						name="capacity"
+						label="我方公司名称"
+						placeholder="请输入名称"
+					/>
+				</ProForm.Group>
+			</DrawerForm>
+		</>
+	);
+};
+
+export default QingyunDrawer;
diff --git a/src/components/Main/Bucket/components/QiniuDrawer.tsx b/src/components/Main/Bucket/components/QiniuDrawer.tsx
new file mode 100644
index 0000000..b7ca6fb
--- /dev/null
+++ b/src/components/Main/Bucket/components/QiniuDrawer.tsx
@@ -0,0 +1,119 @@
+/** @format */
+
+import { Avatar, Button, message } from "antd";
+import {
+	DrawerForm,
+	ProCard,
+	ProForm,
+	ProFormText,
+} from "@ant-design/pro-components";
+import React, { createContext, useContext, useState } from "react";
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from "@ant-design/icons";
+import bucket from "../../../../assets/icons/bucket.svg";
+import styles from "./index.module.less";
+
+const DrawerContext = createContext<{
+	drawerVisit: boolean;
+	setDrawerVisit: React.Dispatch<React.SetStateAction<boolean>>;
+}>({} as any);
+const QiniuDrawer = () => {
+	const [drawerVisit, setDrawerVisit] = useState(false);
+	return (
+		<DrawerContext.Provider value={{ drawerVisit, setDrawerVisit }}>
+			<ProCardComponent />
+		</DrawerContext.Provider>
+	);
+};
+const ProCardComponent = () => {
+	const { drawerVisit, setDrawerVisit } = useContext(DrawerContext);
+	const list = [
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+	];
+
+	const bucketList = () => {
+		return (
+			<ProCard
+				title={"存储桶列表"}
+				headerBordered
+				extra={
+					<Button type="primary" onClick={() => setDrawerVisit(true)}>
+						创建存储桶
+					</Button>
+				}>
+				<div className={styles.div_proCard}>
+					{list.map((item, index) => {
+						return (
+							<ProCard
+								headStyle={{ backgroundColor: "#f0f2f5" }}
+								hoverable
+								bordered
+								key={index}
+								title={<b>名字：{item}</b>}
+								style={{
+									width: "180px",
+									borderWidth: "1px",
+								}}
+								actions={[
+									<SettingOutlined key="setting" />,
+									<EditOutlined key="edit" />,
+									<EllipsisOutlined key="ellipsis" />,
+								]}>
+								<Avatar shape={"square"} src={bucket} size={"large"} />
+								<b style={{ marginLeft: 10 }}> size</b>
+							</ProCard>
+						);
+					})}
+				</div>
+			</ProCard>
+		);
+	};
+
+	return (
+		<>
+			{bucketList()}
+			<DrawerForm
+				title="创建存储桶"
+				open={drawerVisit}
+				onOpenChange={setDrawerVisit}
+				onFinish={async (values) => {
+					console.log(values.name);
+					message.success("提交成功");
+					return true;
+				}}>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="name"
+						label="存储桶名字"
+						tooltip="最长为 24 位"
+						placeholder="请输入名称"
+					/>
+
+					<ProFormText
+						width="md"
+						name="capacity"
+						label="我方公司名称"
+						placeholder="请输入名称"
+					/>
+				</ProForm.Group>
+			</DrawerForm>
+		</>
+	);
+};
+
+export default QiniuDrawer;
diff --git a/src/components/Main/Bucket/components/TencentDrawer.tsx b/src/components/Main/Bucket/components/TencentDrawer.tsx
new file mode 100644
index 0000000..5858acc
--- /dev/null
+++ b/src/components/Main/Bucket/components/TencentDrawer.tsx
@@ -0,0 +1,119 @@
+/** @format */
+
+import { Avatar, Button, message } from "antd";
+import {
+	DrawerForm,
+	ProCard,
+	ProForm,
+	ProFormText,
+} from "@ant-design/pro-components";
+import React, { createContext, useContext, useState } from "react";
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from "@ant-design/icons";
+import bucket from "../../../../assets/icons/bucket.svg";
+import styles from "./index.module.less";
+
+const DrawerContext = createContext<{
+	drawerVisit: boolean;
+	setDrawerVisit: React.Dispatch<React.SetStateAction<boolean>>;
+}>({} as any);
+const TencentDrawer = () => {
+	const [drawerVisit, setDrawerVisit] = useState(false);
+	return (
+		<DrawerContext.Provider value={{ drawerVisit, setDrawerVisit }}>
+			<ProCardComponent />
+		</DrawerContext.Provider>
+	);
+};
+const ProCardComponent = () => {
+	const { drawerVisit, setDrawerVisit } = useContext(DrawerContext);
+	const list = [
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+	];
+
+	const bucketList = () => {
+		return (
+			<ProCard
+				title={"存储桶列表"}
+				headerBordered
+				extra={
+					<Button type="primary" onClick={() => setDrawerVisit(true)}>
+						创建存储桶
+					</Button>
+				}>
+				<div className={styles.div_proCard}>
+					{list.map((item, index) => {
+						return (
+							<ProCard
+								headStyle={{ backgroundColor: "#f0f2f5" }}
+								hoverable
+								bordered
+								key={index}
+								title={<b>名字：{item}</b>}
+								style={{
+									width: "180px",
+									borderWidth: "1px",
+								}}
+								actions={[
+									<SettingOutlined key="setting" />,
+									<EditOutlined key="edit" />,
+									<EllipsisOutlined key="ellipsis" />,
+								]}>
+								<Avatar shape={"square"} src={bucket} size={"large"} />
+								<b style={{ marginLeft: 10 }}> size</b>
+							</ProCard>
+						);
+					})}
+				</div>
+			</ProCard>
+		);
+	};
+
+	return (
+		<>
+			{bucketList()}
+			<DrawerForm
+				title="创建存储桶"
+				open={drawerVisit}
+				onOpenChange={setDrawerVisit}
+				onFinish={async (values) => {
+					console.log(values.name);
+					message.success("提交成功");
+					return true;
+				}}>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="name"
+						label="存储桶名字"
+						tooltip="最长为 24 位"
+						placeholder="请输入名称"
+					/>
+
+					<ProFormText
+						width="md"
+						name="capacity"
+						label="我方公司名称"
+						placeholder="请输入名称"
+					/>
+				</ProForm.Group>
+			</DrawerForm>
+		</>
+	);
+};
+
+export default TencentDrawer;
diff --git a/src/components/Main/Bucket/components/UcloudDrawer.tsx b/src/components/Main/Bucket/components/UcloudDrawer.tsx
new file mode 100644
index 0000000..f2ec316
--- /dev/null
+++ b/src/components/Main/Bucket/components/UcloudDrawer.tsx
@@ -0,0 +1,119 @@
+/** @format */
+
+import { Avatar, Button, message } from "antd";
+import {
+	DrawerForm,
+	ProCard,
+	ProForm,
+	ProFormText,
+} from "@ant-design/pro-components";
+import React, { createContext, useContext, useState } from "react";
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from "@ant-design/icons";
+import bucket from "../../../../assets/icons/bucket.svg";
+import styles from "./index.module.less";
+
+const DrawerContext = createContext<{
+	drawerVisit: boolean;
+	setDrawerVisit: React.Dispatch<React.SetStateAction<boolean>>;
+}>({} as any);
+const UcloudDrawer = () => {
+	const [drawerVisit, setDrawerVisit] = useState(false);
+	return (
+		<DrawerContext.Provider value={{ drawerVisit, setDrawerVisit }}>
+			<ProCardComponent />
+		</DrawerContext.Provider>
+	);
+};
+const ProCardComponent = () => {
+	const { drawerVisit, setDrawerVisit } = useContext(DrawerContext);
+	const list = [
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+	];
+
+	const bucketList = () => {
+		return (
+			<ProCard
+				title={"存储桶列表"}
+				headerBordered
+				extra={
+					<Button type="primary" onClick={() => setDrawerVisit(true)}>
+						创建存储桶
+					</Button>
+				}>
+				<div className={styles.div_proCard}>
+					{list.map((item, index) => {
+						return (
+							<ProCard
+								headStyle={{ backgroundColor: "#f0f2f5" }}
+								hoverable
+								bordered
+								key={index}
+								title={<b>名字：{item}</b>}
+								style={{
+									width: "180px",
+									borderWidth: "1px",
+								}}
+								actions={[
+									<SettingOutlined key="setting" />,
+									<EditOutlined key="edit" />,
+									<EllipsisOutlined key="ellipsis" />,
+								]}>
+								<Avatar shape={"square"} src={bucket} size={"large"} />
+								<b style={{ marginLeft: 10 }}> size</b>
+							</ProCard>
+						);
+					})}
+				</div>
+			</ProCard>
+		);
+	};
+
+	return (
+		<>
+			{bucketList()}
+			<DrawerForm
+				title="创建存储桶"
+				open={drawerVisit}
+				onOpenChange={setDrawerVisit}
+				onFinish={async (values) => {
+					console.log(values.name);
+					message.success("提交成功");
+					return true;
+				}}>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="name"
+						label="存储桶名字"
+						tooltip="最长为 24 位"
+						placeholder="请输入名称"
+					/>
+
+					<ProFormText
+						width="md"
+						name="capacity"
+						label="我方公司名称"
+						placeholder="请输入名称"
+					/>
+				</ProForm.Group>
+			</DrawerForm>
+		</>
+	);
+};
+
+export default UcloudDrawer;
diff --git a/src/components/Main/Bucket/components/UpDrawer.tsx b/src/components/Main/Bucket/components/UpDrawer.tsx
new file mode 100644
index 0000000..bdc37b0
--- /dev/null
+++ b/src/components/Main/Bucket/components/UpDrawer.tsx
@@ -0,0 +1,119 @@
+/** @format */
+
+import { Avatar, Button, message } from "antd";
+import {
+	DrawerForm,
+	ProCard,
+	ProForm,
+	ProFormText,
+} from "@ant-design/pro-components";
+import React, { createContext, useContext, useState } from "react";
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from "@ant-design/icons";
+import bucket from "../../../../assets/icons/bucket.svg";
+import styles from "./index.module.less";
+
+const DrawerContext = createContext<{
+	drawerVisit: boolean;
+	setDrawerVisit: React.Dispatch<React.SetStateAction<boolean>>;
+}>({} as any);
+const UpDrawer = () => {
+	const [drawerVisit, setDrawerVisit] = useState(false);
+	return (
+		<DrawerContext.Provider value={{ drawerVisit, setDrawerVisit }}>
+			<ProCardComponent />
+		</DrawerContext.Provider>
+	);
+};
+const ProCardComponent = () => {
+	const { drawerVisit, setDrawerVisit } = useContext(DrawerContext);
+	const list = [
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+	];
+
+	const bucketList = () => {
+		return (
+			<ProCard
+				title={"存储桶列表"}
+				headerBordered
+				extra={
+					<Button type="primary" onClick={() => setDrawerVisit(true)}>
+						创建存储桶
+					</Button>
+				}>
+				<div className={styles.div_proCard}>
+					{list.map((item, index) => {
+						return (
+							<ProCard
+								headStyle={{ backgroundColor: "#f0f2f5" }}
+								hoverable
+								bordered
+								key={index}
+								title={<b>名字：{item}</b>}
+								style={{
+									width: "180px",
+									borderWidth: "1px",
+								}}
+								actions={[
+									<SettingOutlined key="setting" />,
+									<EditOutlined key="edit" />,
+									<EllipsisOutlined key="ellipsis" />,
+								]}>
+								<Avatar shape={"square"} src={bucket} size={"large"} />
+								<b style={{ marginLeft: 10 }}> size</b>
+							</ProCard>
+						);
+					})}
+				</div>
+			</ProCard>
+		);
+	};
+
+	return (
+		<>
+			{bucketList()}
+			<DrawerForm
+				title="创建存储桶"
+				open={drawerVisit}
+				onOpenChange={setDrawerVisit}
+				onFinish={async (values) => {
+					console.log(values.name);
+					message.success("提交成功");
+					return true;
+				}}>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="name"
+						label="存储桶名字"
+						tooltip="最长为 24 位"
+						placeholder="请输入名称"
+					/>
+
+					<ProFormText
+						width="md"
+						name="capacity"
+						label="我方公司名称"
+						placeholder="请输入名称"
+					/>
+				</ProForm.Group>
+			</DrawerForm>
+		</>
+	);
+};
+
+export default UpDrawer;
diff --git a/src/components/Main/Bucket/components/WangyiDrawer.tsx b/src/components/Main/Bucket/components/WangyiDrawer.tsx
new file mode 100644
index 0000000..c98fe2e
--- /dev/null
+++ b/src/components/Main/Bucket/components/WangyiDrawer.tsx
@@ -0,0 +1,119 @@
+/** @format */
+
+import { Avatar, Button, message } from "antd";
+import {
+	DrawerForm,
+	ProCard,
+	ProForm,
+	ProFormText,
+} from "@ant-design/pro-components";
+import React, { createContext, useContext, useState } from "react";
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from "@ant-design/icons";
+import bucket from "../../../../assets/icons/bucket.svg";
+import styles from "./index.module.less";
+
+const DrawerContext = createContext<{
+	drawerVisit: boolean;
+	setDrawerVisit: React.Dispatch<React.SetStateAction<boolean>>;
+}>({} as any);
+const WangyiDrawer = () => {
+	const [drawerVisit, setDrawerVisit] = useState(false);
+	return (
+		<DrawerContext.Provider value={{ drawerVisit, setDrawerVisit }}>
+			<ProCardComponent />
+		</DrawerContext.Provider>
+	);
+};
+const ProCardComponent = () => {
+	const { drawerVisit, setDrawerVisit } = useContext(DrawerContext);
+	const list = [
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+		"test3",
+		"test1",
+		"test2",
+		"test3",
+	];
+
+	const bucketList = () => {
+		return (
+			<ProCard
+				title={"存储桶列表"}
+				headerBordered
+				extra={
+					<Button type="primary" onClick={() => setDrawerVisit(true)}>
+						创建存储桶
+					</Button>
+				}>
+				<div className={styles.div_proCard}>
+					{list.map((item, index) => {
+						return (
+							<ProCard
+								headStyle={{ backgroundColor: "#f0f2f5" }}
+								hoverable
+								bordered
+								key={index}
+								title={<b>名字：{item}</b>}
+								style={{
+									width: "180px",
+									borderWidth: "1px",
+								}}
+								actions={[
+									<SettingOutlined key="setting" />,
+									<EditOutlined key="edit" />,
+									<EllipsisOutlined key="ellipsis" />,
+								]}>
+								<Avatar shape={"square"} src={bucket} size={"large"} />
+								<b style={{ marginLeft: 10 }}> size</b>
+							</ProCard>
+						);
+					})}
+				</div>
+			</ProCard>
+		);
+	};
+
+	return (
+		<>
+			{bucketList()}
+			<DrawerForm
+				title="创建存储桶"
+				open={drawerVisit}
+				onOpenChange={setDrawerVisit}
+				onFinish={async (values) => {
+					console.log(values.name);
+					message.success("提交成功");
+					return true;
+				}}>
+				<ProForm.Group>
+					<ProFormText
+						width="md"
+						name="name"
+						label="存储桶名字"
+						tooltip="最长为 24 位"
+						placeholder="请输入名称"
+					/>
+
+					<ProFormText
+						width="md"
+						name="capacity"
+						label="我方公司名称"
+						placeholder="请输入名称"
+					/>
+				</ProForm.Group>
+			</DrawerForm>
+		</>
+	);
+};
+
+export default WangyiDrawer;
diff --git a/src/components/Main/Bucket/components/index.module.less b/src/components/Main/Bucket/components/index.module.less
new file mode 100644
index 0000000..98a4024
--- /dev/null
+++ b/src/components/Main/Bucket/components/index.module.less
@@ -0,0 +1,19 @@
+.div_proCard{
+	height: 62vh;
+	max-height: 62vh;
+	gap: 20px;
+	width: 105%;
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: row;
+	overflow-y:scroll;
+	overflow-x: hidden;
+	justify-content: space-around;
+
+}
+.proCard{
+	height: 75vh;
+	max-height: 75vh;
+	width: 105%;
+}
+
diff --git a/src/components/Main/Bucket/index.module.less b/src/components/Main/Bucket/index.module.less
index 47bfce4..e02b304 100644
--- a/src/components/Main/Bucket/index.module.less
+++ b/src/components/Main/Bucket/index.module.less
@@ -1,10 +1,28 @@
 .proCard{
-	max-width: 100%;
-	margin: 10px;
+	max-width: 30%;
+	height: 75vh;
+	max-height: 75vh;
+
+
 }
+.proCardBucket{
+	height: 75vh;
+	max-height: 75vh;
+	width: 100%;
+}
+
 .div_proCard{
 	display: flex;
 	flex-direction: row;
 	gap: 20px;
-	flex-wrap: wrap;
+
 }
+.div_checkCardArea{
+	height: 65vh;
+	max-height: 65vh;
+	overflow-y:scroll;
+	overflow-x: hidden;
+}
+//.div_checkCardArea::-webkit-scrollbar {
+//
+//}
diff --git a/src/components/Main/Bucket/index.tsx b/src/components/Main/Bucket/index.tsx
index 3ee3de6..7919761 100644
--- a/src/components/Main/Bucket/index.tsx
+++ b/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;
diff --git a/src/components/Main/Bucket/index_createBucket.tsx b/src/components/Main/Bucket/index_createBucket.tsx
deleted file mode 100644
index ed5fc79..0000000
--- a/src/components/Main/Bucket/index_createBucket.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-/** @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;
diff --git a/src/router/modules/main/bucket/createBuckets/ali.ts b/src/router/modules/main/bucket/createBuckets/ali.ts
new file mode 100644
index 0000000..3c3bdc8
--- /dev/null
+++ b/src/router/modules/main/bucket/createBuckets/ali.ts
@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const aliBucket = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Bucket/components/AliDrawer.tsx"));
+		}),
+);
+export default aliBucket;
diff --git a/src/router/modules/main/bucket/createBuckets/baidu.ts b/src/router/modules/main/bucket/createBuckets/baidu.ts
new file mode 100644
index 0000000..199d61a
--- /dev/null
+++ b/src/router/modules/main/bucket/createBuckets/baidu.ts
@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const baiduBucket = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Bucket/components/BaiduDrawer.tsx"));
+		}),
+);
+export default baiduBucket;
diff --git a/src/router/modules/main/bucket/createBuckets/huawei.ts b/src/router/modules/main/bucket/createBuckets/huawei.ts
new file mode 100644
index 0000000..0f85a27
--- /dev/null
+++ b/src/router/modules/main/bucket/createBuckets/huawei.ts
@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const huaweiBucket = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Bucket/components/HuaweiDrawer.tsx"));
+		}),
+);
+export default huaweiBucket;
diff --git a/src/router/modules/main/bucket/createBuckets/jd.ts b/src/router/modules/main/bucket/createBuckets/jd.ts
new file mode 100644
index 0000000..de200d9
--- /dev/null
+++ b/src/router/modules/main/bucket/createBuckets/jd.ts
@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const jdBucket = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Bucket/components/JdDrawer.tsx"));
+		}),
+);
+export default jdBucket;
diff --git a/src/router/modules/main/bucket/createBuckets/jinshan.ts b/src/router/modules/main/bucket/createBuckets/jinshan.ts
new file mode 100644
index 0000000..314bb2e
--- /dev/null
+++ b/src/router/modules/main/bucket/createBuckets/jinshan.ts
@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const jinshanBucket = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Bucket/components/JinshanDrawer.tsx"));
+		}),
+);
+export default jinshanBucket;
diff --git a/src/router/modules/main/bucket/createBuckets/minio.ts b/src/router/modules/main/bucket/createBuckets/minio.ts
new file mode 100644
index 0000000..4cf8765
--- /dev/null
+++ b/src/router/modules/main/bucket/createBuckets/minio.ts
@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const minioBucket = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Bucket/components/MinioDrawer.tsx"));
+		}),
+);
+export default minioBucket;
diff --git a/src/router/modules/main/bucket/createBuckets/pingan.ts b/src/router/modules/main/bucket/createBuckets/pingan.ts
new file mode 100644
index 0000000..dda3716
--- /dev/null
+++ b/src/router/modules/main/bucket/createBuckets/pingan.ts
@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const pinganBucket = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Bucket/components/PinganDrawer.tsx"));
+		}),
+);
+export default pinganBucket;
diff --git a/src/router/modules/main/bucket/createBuckets/qingyun.ts b/src/router/modules/main/bucket/createBuckets/qingyun.ts
new file mode 100644
index 0000000..86a0e79
--- /dev/null
+++ b/src/router/modules/main/bucket/createBuckets/qingyun.ts
@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const qingyunBucket = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Bucket/components/QingyunDrawer.tsx"));
+		}),
+);
+export default qingyunBucket;
diff --git a/src/router/modules/main/bucket/createBuckets/qiniu.ts b/src/router/modules/main/bucket/createBuckets/qiniu.ts
new file mode 100644
index 0000000..d5cf235
--- /dev/null
+++ b/src/router/modules/main/bucket/createBuckets/qiniu.ts
@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const qiniuBucket = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Bucket/components/QiniuDrawer.tsx"));
+		}),
+);
+export default qiniuBucket;
diff --git a/src/router/modules/main/bucket/createBuckets/tencent.ts b/src/router/modules/main/bucket/createBuckets/tencent.ts
new file mode 100644
index 0000000..ee8d1ed
--- /dev/null
+++ b/src/router/modules/main/bucket/createBuckets/tencent.ts
@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const tencentBucket = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Bucket/components/MinioDrawer.tsx"));
+		}),
+);
+export default tencentBucket;
diff --git a/src/router/modules/main/bucket/createBuckets/ucloud.ts b/src/router/modules/main/bucket/createBuckets/ucloud.ts
new file mode 100644
index 0000000..257d100
--- /dev/null
+++ b/src/router/modules/main/bucket/createBuckets/ucloud.ts
@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const ucloudBucket = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Bucket/components/UcloudDrawer.tsx"));
+		}),
+);
+export default ucloudBucket;
diff --git a/src/router/modules/main/bucket/createBuckets/up.ts b/src/router/modules/main/bucket/createBuckets/up.ts
new file mode 100644
index 0000000..4744b5f
--- /dev/null
+++ b/src/router/modules/main/bucket/createBuckets/up.ts
@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const upBucket = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Bucket/components/UpDrawer.tsx"));
+		}),
+);
+export default upBucket;
diff --git a/src/router/modules/main/bucket/createBuckets/wangyi.ts b/src/router/modules/main/bucket/createBuckets/wangyi.ts
new file mode 100644
index 0000000..4a29ac1
--- /dev/null
+++ b/src/router/modules/main/bucket/createBuckets/wangyi.ts
@@ -0,0 +1,11 @@
+/** @format */
+
+import { lazy } from "react";
+
+const wangyiBucket = lazy(
+	() =>
+		new Promise((resolve: any) => {
+			resolve(import("@/components/Main/Bucket/components/WangyiDrawer.tsx"));
+		}),
+);
+export default wangyiBucket;
diff --git a/src/router/modules/register/index.ts b/src/router/modules/register/index.ts
index 048edd5..53a709e 100644
--- a/src/router/modules/register/index.ts
+++ b/src/router/modules/register/index.ts
@@ -1,9 +1,11 @@
-import { lazy } from 'react'
+/** @format */
+
+import { lazy } from "react";
 
 const register = lazy(
-    () =>
-        new Promise((resolve: any) => {
-            setTimeout(() => resolve(import('@/views/User/Register')), 500)
-        }),
-)
-export default register
+	() =>
+		new Promise((resolve: any) => {
+			setTimeout(() => resolve(import("@/views/User/Register")), 500);
+		}),
+);
+export default register;
diff --git a/src/router/routes.tsx b/src/router/routes.tsx
index b3f4f14..b9608fa 100644
--- a/src/router/routes.tsx
+++ b/src/router/routes.tsx
@@ -32,6 +32,19 @@ import Wangyi from "@/router/modules/main/settings/wangyi/wangyi.ts";
 import Jinshan from "@/router/modules/main/settings/jinshan/jinshan.ts";
 import Qiniu from "@/router/modules/main/settings/qiniu/qiniu.ts";
 import ShareList from "@/router/modules/main/share/modules/shareList.tsx";
+import minioBucket from "@/router/modules/main/bucket/createBuckets/minio.ts";
+import tencentBucket from "@/router/modules/main/bucket/createBuckets/tencent.ts";
+import aliBucket from "@/router/modules/main/bucket/createBuckets/ali.ts";
+import baiduBucket from "@/router/modules/main/bucket/createBuckets/baidu.ts";
+import huaweiBucket from "@/router/modules/main/bucket/createBuckets/huawei.ts";
+import jdBucket from "@/router/modules/main/bucket/createBuckets/jd.ts";
+import jinshanBucket from "@/router/modules/main/bucket/createBuckets/jinshan.ts";
+import pinganBucket from "@/router/modules/main/bucket/createBuckets/pingan.ts";
+import qingyunBucket from "@/router/modules/main/bucket/createBuckets/qingyun.ts";
+import qiniuBucket from "@/router/modules/main/bucket/createBuckets/qiniu.ts";
+import ucloudBucket from "@/router/modules/main/bucket/createBuckets/ucloud.ts";
+import upBucket from "@/router/modules/main/bucket/createBuckets/up.ts";
+import wangyiBucket from "@/router/modules/main/bucket/createBuckets/wangyi.ts";
 
 const routes: RouteObject[] = [
 	{
@@ -70,6 +83,60 @@ const routes: RouteObject[] = [
 			{
 				path: "/main/bucket",
 				Component: MainBucket,
+				children: [
+					{
+						path: "/main/bucket/minio",
+						Component: minioBucket,
+					},
+					{
+						path: "/main/bucket/ali",
+						Component: aliBucket,
+					},
+					{
+						path: "/main/bucket/tencent",
+						Component: tencentBucket,
+					},
+					{
+						path: "/main/bucket/baidu",
+						Component: baiduBucket,
+					},
+					{
+						path: "/main/bucket/huawei",
+						Component: huaweiBucket,
+					},
+					{
+						path: "/main/bucket/jd",
+						Component: jdBucket,
+					},
+					{
+						path: "/main/bucket/jinshan",
+						Component: jinshanBucket,
+					},
+					{
+						path: "/main/bucket/pingan",
+						Component: pinganBucket,
+					},
+					{
+						path: "/main/bucket/qingyun",
+						Component: qingyunBucket,
+					},
+					{
+						path: "/main/bucket/qiniu",
+						Component: qiniuBucket,
+					},
+					{
+						path: "/main/bucket/ucloud",
+						Component: ucloudBucket,
+					},
+					{
+						path: "/main/bucket/up",
+						Component: upBucket,
+					},
+					{
+						path: "/main/bucket/wangyi",
+						Component: wangyiBucket,
+					},
+				],
 			},
 			{
 				path: "/main/file",
diff --git a/src/router/useAuth.tsx b/src/router/useAuth.tsx
index 62c196d..e0dd7d0 100644
--- a/src/router/useAuth.tsx
+++ b/src/router/useAuth.tsx
@@ -32,14 +32,14 @@ export default function AuthRoute(props: { children: React.ReactNode }) {
 		return <Navigate to="/404" />;
 	}
 
-	if (!isLogin) {
-		message
-			.open({
-				content: "请先登录！",
-				type: "warning",
-			})
-			.then();
-		return <Navigate to="/login" />;
-	}
+	// if (!isLogin) {
+	// 	message
+	// 		.open({
+	// 			content: "请先登录！",
+	// 			type: "warning",
+	// 		})
+	// 		.then();
+	// 	return <Navigate to="/login" />;
+	// }
 	return props.children;
 }