feat: update

src/components/Main/File/index.tsx

@@ -11,23 +11,20 @@ import {
 	Dropdown,
 	FloatButton,
 	message,
+	Modal,
 	Select,
 	Tooltip,
 } from "antd";
 import ali from "@/assets/icons/aliyun.svg";
 import bucket from "@/assets/icons/bucket.svg";
 import tencent from "@/assets/icons/tencent.svg";
-import {
-	CommentOutlined,
-	CustomerServiceOutlined,
-	EllipsisOutlined,
-	LeftOutlined,
-} from "@ant-design/icons";
+import { CloudUploadOutlined, EllipsisOutlined, LeftOutlined } from "@ant-design/icons";
 import standard_dir from "@/assets/icons/standard_directory.svg";
 import useStore from "@/utils/store/useStore.tsx";
 import { observer } from "mobx-react";
 import FileIcon from "@/constant/file-icon.ts";
 import file_icon from "@/assets/icons/files/file.svg";
+import FileUpload from "@/components/Main/File/components/FileUpload.tsx";
 const dataList: any = [
 	{
 		name: "demo01.java",
@@ -86,6 +83,8 @@ const fileList: any = [
 const File: FunctionComponent = () => {
 	const store = useStore("file");
 	const [files, setFiles] = useState<any>([]);
+	const [loading, setLoading] = useState<boolean>(true);
+	const [open, setOpen] = useState<boolean>(false);
 	async function getFile() {
 		setFiles(dataList);
 	}
@@ -96,6 +95,9 @@ const File: FunctionComponent = () => {
 
 	useEffect(() => {
 		getFile().then();
+		setTimeout(() => {
+			setLoading(false);
+		}, 2000);
 	}, []);
 	return (
 		<>
@@ -120,7 +122,7 @@ const File: FunctionComponent = () => {
 										flexDirection: "row",
 									}}
 									size={"small"}>
-									<Avatar src={ali} size={"small"} />
+									<Avatar src={ali as any} size={"small"} />
 									<span style={{ marginLeft: "10px", fontWeight: "bolder" }}>
 										阿里云OSS
 									</span>
@@ -136,7 +138,7 @@ const File: FunctionComponent = () => {
 									}}
 									bordered={false}
 									size={"small"}>
-									<Avatar src={tencent} size={"small"} />{" "}
+									<Avatar src={tencent as any} size={"small"} />{" "}
 									<span style={{ marginLeft: "10px", fontWeight: "bolder" }}>
 										腾讯云COS
 									</span>
@@ -152,7 +154,7 @@ const File: FunctionComponent = () => {
 								<CheckCard
 									style={{ width: "100%" }}
 									title="schisandra"
-									avatar={bucket}
+									avatar={bucket as any}
 									description="100Mb"
 									value="schisandra"
 									extra={
@@ -184,7 +186,7 @@ const File: FunctionComponent = () => {
 								<CheckCard
 									style={{ width: "100%" }}
 									title="schisandra2"
-									avatar={bucket}
+									avatar={bucket as any}
 									description="100Mb"
 									value="schisandra2"
 									extra={
@@ -274,7 +276,7 @@ const File: FunctionComponent = () => {
 																	alignItems: "center",
 																}}>
 																<Avatar
-																	src={standard_dir}
+																	src={standard_dir as any}
 																	shape={"square"}
 																	size={"large"}
 																/>
@@ -379,14 +381,22 @@ const File: FunctionComponent = () => {
 				</div>
 			</div>
 
-			<FloatButton.Group
+			<FloatButton
 				trigger="click"
 				type="primary"
 				style={{ right: "5%" }}
-				icon={<CustomerServiceOutlined />}>
-				<FloatButton />
-				<FloatButton icon={<CommentOutlined />} />
-			</FloatButton.Group>
+				icon={<CloudUploadOutlined />}
+				onClick={() => setOpen(true)}
+			/>
+			<Modal
+				title={<p>文件上传</p>}
+				loading={loading}
+				footer={false}
+				open={open}
+				width={"50%"}
+				onCancel={() => setOpen(false)}>
+				<FileUpload></FileUpload>
+			</Modal>
 		</>
 	);
 };