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

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,
+		},
+	});
+};

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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%;
+}
+

src/components/Main/Bucket/index.module.less

@@ -1,10 +1,28 @@
 .proCard{
-	max-width: 100%;
+	max-width: 30%;
-	margin: 10px;
+	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 {
+//
+//}

src/components/Main/Bucket/index.tsx

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

src/components/Main/Bucket/index_createBucket.tsx

@@ -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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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) => {
+		new Promise((resolve: any) => {
-            setTimeout(() => resolve(import('@/views/User/Register')), 500)
+			setTimeout(() => resolve(import("@/views/User/Register")), 500);
-        }),
+		}),
-)
+);
-export default register
+export default register;

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",

src/router/useAuth.tsx

@@ -32,14 +32,14 @@ export default function AuthRoute(props: { children: React.ReactNode }) {
 		return <Navigate to="/404" />;
 	}
 
-	if (!isLogin) {
+	// if (!isLogin) {
-		message
+	// 	message
-			.open({
+	// 		.open({
-				content: "请先登录！",
+	// 			content: "请先登录！",
-				type: "warning",
+	// 			type: "warning",
-			})
+	// 		})
-			.then();
+	// 		.then();
-		return <Navigate to="/login" />;
+	// 	return <Navigate to="/login" />;
-	}
+	// }
 	return props.children;
 }