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
@@ -1,56 +1,50 @@
-module.exports = {
-	"env": {
-		"browser": true,
-		"es2021": true,
-		"node": true
-	},
-	"extends": [
-		"eslint:recommended",
-		"plugin:@typescript-eslint/recommended",
-		"plugin:react/recommended",
-		"plugin:prettier/recommended"
-	],
-	"overrides": [
-		{
-			"env": {
-				"node": true
-			},
-			"files": [
-				".eslintrc.{js,cjs}"
-			],
-			"parserOptions": {
-				"sourceType": "script"
-			}
-		}
-	],
-	"parser": "@typescript-eslint/parser",
-	"parserOptions": {
-		"ecmaVersion": "latest",
-		"sourceType": "module"
-	},
-	"plugins": [
-		"@typescript-eslint",
-		"react",
-		"prettier"
-	],
-	"rules": {
-		"react/jsx-use-react": 0, // React V17开始JSX已经不再需要引入React
-		"react/react-in-jsx-scope": 0, // 同上
-		"import/first": 0, // 消除绝对路径必须要在相对路径前引入，
-		// 'no-mixed-spaces-and-tabs': 2, // 禁止空格和 tab 的混合缩进
-		"no-debugger": 2, // 禁止有debugger
-		"space-infix-ops": 2, // 要求操作符周围有空格
-		"space-before-blocks": 2, // 要求语句块之前有空格
-		"@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
-	}
-};
+module.exports = {
+	"env": {
+		"browser": true,
+		"es2021": true,
+		"node": true
+	},
+	"extends": [
+		"eslint:recommended",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:react/recommended",
+		"plugin:prettier/recommended"
+	],
+	"overrides": [
+		{
+			"env": {
+				"node": true
+			},
+			"files": [
+				".eslintrc.{js,cjs}"
+			],
+			"parserOptions": {
+				"sourceType": "script"
+			}
+		}
+	],
+	"parser": "@typescript-eslint/parser",
+	"parserOptions": {
+		"ecmaVersion": "latest",
+		"sourceType": "module"
+	},
+	"plugins": [
+		"@typescript-eslint",
+		"react",
+		"prettier"
+	],
+	"rules": {
+		"react/jsx-use-react": 0, // React V17开始JSX已经不再需要引入React
+		"react/react-in-jsx-scope": 0, // 同上
+		"import/first": 0, // 消除绝对路径必须要在相对路径前引入，
+		// 'no-mixed-spaces-and-tabs': 2, // 禁止空格和 tab 的混合缩进
+		"no-debugger": 2, // 禁止有debugger
+		"space-infix-ops": 2, // 要求操作符周围有空格
+		"space-before-blocks": 2, // 要求语句块之前有空格
+		"@typescript-eslint/explicit-function-return-type": 0, // 禁止函数必须要定义返回类型
+		"react/display-name": "off",
+		"@typescript-eslint/no-explicit-any": ["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,111 +464,140 @@ const MainHome: React.FC = () => {
 							marginTop: "30px",
 						}}
 						title={"文件上传热力图"}>
-						<CalendarHeatmap
-							startDate={new Date("2024-01-01")}
-							endDate={new Date("2024-12-31")}
-							showMonthLabels={true}
-							horizontal={true}
-							showWeekdayLabels={false}
-							monthLabels={[
-								"一月",
-								"二月",
-								"三月",
-								"四月",
-								"五月",
-								"六月",
-								"七月",
-								"八月",
-								"九月",
-								"十月",
-								"十一月",
-								"十二月",
-							]}
-							weekdayLabels={["周日", "周一", "周二", "周三", "周四", "周五", "周六"]}
-							gutterSize={3}
-							values={
-								[
-									{ date: "2024-01-02", count: 12 },
-									{ date: "2024-05-3", count: 122 },
-									{ date: "2024-06-30", count: 38 },
-								] as any
-							}></CalendarHeatmap>
+						<Skeleton
+							loading={loading}
+							active
+							paragraph={{
+								rows: 3,
+							}}>
+							<CalendarHeatmap
+								startDate={new Date("2024-01-01")}
+								endDate={new Date("2024-12-31")}
+								showMonthLabels={true}
+								horizontal={true}
+								showWeekdayLabels={false}
+								monthLabels={[
+									"一月",
+									"二月",
+									"三月",
+									"四月",
+									"五月",
+									"六月",
+									"七月",
+									"八月",
+									"九月",
+									"十月",
+									"十一月",
+									"十二月",
+								]}
+								weekdayLabels={[
+									"周日",
+									"周一",
+									"周二",
+									"周三",
+									"周四",
+									"周五",
+									"周六",
+								]}
+								gutterSize={3}
+								values={
+									[
+										{ date: "2024-01-02", count: 12 },
+										{ date: "2024-05-3", count: 122 },
+										{ date: "2024-06-30", count: 38 },
+									] as any
+								}></CalendarHeatmap>
+						</Skeleton>
 					</ProCard>
 				</div>
 				<div className={styles.home_content_list}>
 					<ProCard bordered boxShadow style={{ width: "49%" }}>
-						<ProList<DataItem>
-							rowKey="id"
-							headerTitle="最近上传文件"
-							dataSource={dataSource}
-							showActions="hover"
-							editable={{
-								onSave: async (key, record, originRow) => {
-									console.log(key, record, originRow);
-									return true;
-								},
-							}}
-							onDataSourceChange={setDataSource}
-							metas={{
-								title: {
-									dataIndex: "name",
-								},
-								avatar: {
-									dataIndex: "image",
-									editable: false,
-								},
-								description: {
-									dataIndex: "desc",
-								},
-								subTitle: {
-									render: () => {
-										return (
-											<Space size={0}>
-												<Tag color="blue">Ant Design</Tag>
-												<Tag color="#5BD8A6">TechUI</Tag>
-											</Space>
-										);
+						<Skeleton
+							loading={loading}
+							active
+							paragraph={{
+								rows: 8,
+							}}>
+							<ProList<DataItem>
+								rowKey="id"
+								headerTitle="最近上传文件"
+								dataSource={dataSource}
+								showActions="hover"
+								editable={{
+									onSave: async (key, record, originRow) => {
+										console.log(key, record, originRow);
+										return true;
 									},
-								},
-							}}
-						/>
+								}}
+								onDataSourceChange={setDataSource}
+								metas={{
+									title: {
+										dataIndex: "name",
+									},
+									avatar: {
+										dataIndex: "image",
+										editable: false,
+									},
+									description: {
+										dataIndex: "desc",
+									},
+									subTitle: {
+										render: () => {
+											return (
+												<Space size={0}>
+													<Tag color="blue">Ant Design</Tag>
+													<Tag color="#5BD8A6">TechUI</Tag>
+												</Space>
+											);
+										},
+									},
+								}}
+							/>
+						</Skeleton>
 					</ProCard>
 					<ProCard bordered boxShadow style={{ width: "49%" }}>
-						<ProList<DataItem>
-							rowKey="id"
-							headerTitle="最近浏览文件"
-							dataSource={dataSource}
-							showActions="hover"
-							editable={{
-								onSave: async (key, record, originRow) => {
-									console.log(key, record, originRow);
-									return true;
-								},
-							}}
-							onDataSourceChange={setDataSource}
-							metas={{
-								title: {
-									dataIndex: "name",
-								},
-								avatar: {
-									dataIndex: "image",
-									editable: false,
-								},
-								description: {
-									dataIndex: "desc",
-								},
-								subTitle: {
-									render: () => {
-										return (
-											<Space size={0}>
-												<Tag color="blue">Ant Design</Tag>
-												<Tag color="#5BD8A6">TechUI</Tag>
-											</Space>
-										);
+						<Skeleton
+							loading={loading}
+							active
+							paragraph={{
+								rows: 8,
+							}}>
+							<ProList<DataItem>
+								rowKey="id"
+								headerTitle="最近浏览文件"
+								dataSource={dataSource}
+								showActions="hover"
+								editable={{
+									onSave: async (key, record, originRow) => {
+										console.log(key, record, originRow);
+										return true;
 									},
-								},
-							}}
-						/>
+								}}
+								onDataSourceChange={setDataSource}
+								metas={{
+									title: {
+										dataIndex: "name",
+									},
+									avatar: {
+										dataIndex: "image",
+										editable: false,
+									},
+									description: {
+										dataIndex: "desc",
+									},
+									subTitle: {
+										render: () => {
+											return (
+												<Space size={0}>
+													<Tag color="blue">Ant Design</Tag>
+													<Tag color="#5BD8A6">TechUI</Tag>
+												</Space>
+											);
+										},
+									},
+								}}
+							/>
+						</Skeleton>
 					</ProCard>
 				</div>
 			</div>