feat: update

2024-07-12 11:33:41 +08:00
parent 59cd675028
commit 8677b975db
4 changed files with 310 additions and 180 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -44,12 +44,6 @@ module.exports = {
 		"@typescript-eslint/explicit-function-return-type": 0, // 禁止函数必须要定义返回类型
 		"react/display-name": "off",
 		"@typescript-eslint/no-explicit-any": ["off"],
-		"@typescript-eslint/no-var-requires": ["off"],
-		"@typescript-eslint/no-use-before-define": ["off"],
-		"@typescript-eslint/no-empty-function": ["off"],
-		"@typescript-eslint/no-empty-interface": ["off"],
-		"@typescript-eslint/no-unused-vars": ["off"],
-		"@typescript-eslint/no-non-null-assertion": ["off"],
 		"no-control-regex": "off",
 		"no-eval": 0
 	}
--- a/src/components/Main/File/components/FileUpload.tsx
+++ b/src/components/Main/File/components/FileUpload.tsx
@@ -0,0 +1,40 @@
+/** @format */
+
+import React from "react";
+import { message, Upload } from "antd";
+import { InboxOutlined } from "@ant-design/icons";
+
+const { Dragger } = Upload;
+const props: any = {
+	name: "file",
+	multiple: true,
+	action: "https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload",
+	onChange(info) {
+		const { status } = info.file;
+		if (status !== "uploading") {
+			console.log(info.file, info.fileList);
+		}
+		if (status === "done") {
+			message.success(`${info.file.name} file uploaded successfully.`);
+		} else if (status === "error") {
+			message.error(`${info.file.name} file upload failed.`);
+		}
+	},
+	onDrop(e) {
+		console.log("Dropped files", e.dataTransfer.files);
+	},
+};
+const FileUpload: React.FC = () => {
+	return (
+		<>
+			<Dragger {...props}>
+				<p className="ant-upload-drag-icon">
+					<InboxOutlined />
+				</p>
+				<p className="ant-upload-text">单击或拖动文件到此区域进行上传</p>
+				<p className="ant-upload-hint">支持单次或批量上传。</p>
+			</Dragger>
+		</>
+	);
+};
+export default FileUpload;
--- a/src/components/Main/File/index.tsx
+++ b/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>
 		</>
 	);
 };
--- a/src/components/Main/Home/index.tsx
+++ b/src/components/Main/Home/index.tsx
@@ -213,7 +213,7 @@ const MainHome: React.FC = () => {
 		],
 	};
 	const data = [
-		264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513, 546
+		264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513, 546,
 	].map((value, index) => ({ value, index }));
 	const config = {
 		data,
@@ -266,11 +266,24 @@ const MainHome: React.FC = () => {
 										</Flex>
 										<Flex vertical={false} align={"center"}>
 											<span style={{ fontSize: 15 }}>
-												{<span style={{fontSize: 30,color: "coral",fontWeight: "bolder"}}>{2}</span>}/个
+												{
+													<span
+														style={{
+															fontSize: 30,
+															color: "coral",
+															fontWeight: "bolder",
+														}}>
+														{2}
+													</span>
+												}
+												/个
 											</span>
 										</Flex>
 									</Flex>
-									<Flex vertical={false} align={"center"} style={{width: "150px",height: "80px"}}>
+									<Flex
+										vertical={false}
+										align={"center"}
+										style={{ width: "150px", height: "80px" }}>
 										<Tiny.Area {...config} />
 									</Flex>
 								</Flex>
@@ -303,12 +316,25 @@ const MainHome: React.FC = () => {
 											</span>
 										</Flex>
 										<Flex vertical={false} align={"center"}>
-											<span style={{ fontSize: 15}}>
-												{<span style={{fontSize: 30,color: "lightblue", fontWeight: "bolder" }}>{2}</span>}/个
+											<span style={{ fontSize: 15 }}>
+												{
+													<span
+														style={{
+															fontSize: 30,
+															color: "lightblue",
+															fontWeight: "bolder",
+														}}>
+														{2}
+													</span>
+												}
+												/个
 											</span>
 										</Flex>
 									</Flex>
-									<Flex vertical={false} align={"center"}  style={{width: "10vw",height: "11vh"}}>
+									<Flex
+										vertical={false}
+										align={"center"}
+										style={{ width: "10vw", height: "11vh" }}>
 										<Tiny.Area {...config} />
 									</Flex>
 								</Flex>
@@ -342,11 +368,24 @@ const MainHome: React.FC = () => {
 										</Flex>
 										<Flex vertical={false} align={"center"}>
 											<span style={{ fontSize: 15 }}>
-												{<span style={{fontSize: 30,color: "orange", fontWeight: "bolder"}}>{2}</span>}/个
+												{
+													<span
+														style={{
+															fontSize: 30,
+															color: "orange",
+															fontWeight: "bolder",
+														}}>
+														{2}
+													</span>
+												}
+												/个
 											</span>
 										</Flex>
 									</Flex>
-									<Flex vertical={false} align={"center"} style={{width: "10vw",height: "11vh"}}>
+									<Flex
+										vertical={false}
+										align={"center"}
+										style={{ width: "10vw", height: "11vh" }}>
 										<Tiny.Area {...config} />
 									</Flex>
 								</Flex>
@@ -380,11 +419,24 @@ const MainHome: React.FC = () => {
 										</Flex>
 										<Flex vertical={false} align={"center"}>
 											<span style={{ fontSize: 15 }}>
-												{<span style={{fontSize: 30,color: "lightgreen", fontWeight: "bolder"}}>{2}</span>}/M
+												{
+													<span
+														style={{
+															fontSize: 30,
+															color: "lightgreen",
+															fontWeight: "bolder",
+														}}>
+														{2}
+													</span>
+												}
+												/M
 											</span>
 										</Flex>
 									</Flex>
-									<Flex vertical={false} align={"center"}  style={{width: "10vw",height: "11vh"}}>
+									<Flex
+										vertical={false}
+										align={"center"}
+										style={{ width: "10vw", height: "11vh" }}>
 										<Tiny.Area {...config} />
 									</Flex>
 								</Flex>
@@ -393,7 +445,12 @@ const MainHome: React.FC = () => {
 					</div>
 					<div style={{ width: "55%" }}>
 						<ProCard bordered boxShadow>
-							<Skeleton loading={loading} active>
+							<Skeleton
+								loading={loading}
+								active
+								paragraph={{
+									rows: 7,
+								}}>
 								<ReactECharts option={option} />
 							</Skeleton>
 						</ProCard>
@@ -407,6 +464,12 @@ const MainHome: React.FC = () => {
 							marginTop: "30px",
 						}}
 						title={"文件上传热力图"}>
+						<Skeleton
+							loading={loading}
+							active
+							paragraph={{
+								rows: 3,
+							}}>
 							<CalendarHeatmap
 								startDate={new Date("2024-01-01")}
 								endDate={new Date("2024-12-31")}
@@ -427,7 +490,15 @@ const MainHome: React.FC = () => {
 									"十一月",
 									"十二月",
 								]}
-							weekdayLabels={["周日", "周一", "周二", "周三", "周四", "周五", "周六"]}
+								weekdayLabels={[
+									"周日",
+									"周一",
+									"周二",
+									"周三",
+									"周四",
+									"周五",
+									"周六",
+								]}
 								gutterSize={3}
 								values={
 									[
@@ -436,10 +507,17 @@ const MainHome: React.FC = () => {
 										{ date: "2024-06-30", count: 38 },
 									] as any
 								}></CalendarHeatmap>
+						</Skeleton>
 					</ProCard>
 				</div>
 				<div className={styles.home_content_list}>
 					<ProCard bordered boxShadow style={{ width: "49%" }}>
+						<Skeleton
+							loading={loading}
+							active
+							paragraph={{
+								rows: 8,
+							}}>
 							<ProList<DataItem>
 								rowKey="id"
 								headerTitle="最近上传文件"
@@ -475,8 +553,15 @@ const MainHome: React.FC = () => {
 									},
 								}}
 							/>
+						</Skeleton>
 					</ProCard>
 					<ProCard bordered boxShadow style={{ width: "49%" }}>
+						<Skeleton
+							loading={loading}
+							active
+							paragraph={{
+								rows: 8,
+							}}>
 							<ProList<DataItem>
 								rowKey="id"
 								headerTitle="最近浏览文件"
@@ -512,6 +597,7 @@ const MainHome: React.FC = () => {
 									},
 								}}
 							/>
+						</Skeleton>
 					</ProCard>
 				</div>
 			</div>