feat: 首页仪表盘调整

package.json

@@ -12,6 +12,7 @@
 	"dependencies": {
 		"@ant-design/icons": "^5.3.7",
 		"@ant-design/pro-components": "^2.7.10",
+		"@ant-design/pro-provider": "^2.14.7",
 		"@ant-design/use-emotion-css": "^1.0.4",
 		"@babel/preset-env": "^7.24.7",
 		"@types/crypto-js": "^4.2.2",

src/components/Main/Bucket/index.tsx

@@ -5,7 +5,7 @@ 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 StorageIcon from "@/constant/stroage-icon.ts";
 import { ReloadOutlined } from "@ant-design/icons";
 
 const Bucket: FunctionComponent = () => {

src/components/Main/File/index.tsx

@@ -26,7 +26,7 @@ import {
 import standard_dir from "@/assets/icons/standard_directory.svg";
 import useStore from "@/utils/store/useStore.tsx";
 import { observer } from "mobx-react";
-import FileIcon from "@/context/file-icon.ts";
+import FileIcon from "@/constant/file-icon.ts";
 import file_icon from "@/assets/icons/files/file.svg";
 const dataList: any = [
 	{

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

@@ -4,6 +4,7 @@
 }
 
 .home_content_head {
+	width: 100%;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
@@ -13,7 +14,7 @@
 }
 
 .home_content_head_left {
-	height: 51vh;
+	height: 50vh;
 	width: 43%;
 	display: flex;
 	flex-direction: row;

src/components/Main/Home/index.tsx

@@ -1,6 +1,6 @@
 /** @format */
-import { FunctionComponent, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
-import { Avatar, Card, Skeleton, Space, Tag } from "antd";
+import { Avatar, Card, Flex, Skeleton, Space, Tag } from "antd";
 import Meta from "antd/es/card/Meta";
 import styles from "./index.module.less";
 import ReactECharts from "echarts-for-react";
@@ -13,6 +13,7 @@ import aliyun from "@/assets/icons/aliyun.svg";
 // import * as echarts from "echarts/core";
 import CalendarHeatmap from "react-calendar-heatmap";
 import "react-calendar-heatmap/dist/styles.css";
+import { Tiny } from "@ant-design/plots";
 const defaultData = [
 	{
 		id: "1",
@@ -41,7 +42,7 @@ const defaultData = [
 ];
 
 type DataItem = (typeof defaultData)[number];
-const MainHome: FunctionComponent = () => {
+const MainHome: React.FC = () => {
 	const [loading, setLoading] = useState(true);
 	const [dataSource, setDataSource] = useState<DataItem[]>(defaultData);
 	const option = {
@@ -211,7 +212,22 @@ const MainHome: FunctionComponent = () => {
 			},
 		],
 	};
-
+	const data = [
+		264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513, 546
+	].map((value, index) => ({ value, index }));
+	const config = {
+		data,
+		padding: 10,
+		width: 150,
+		height: 80,
+		shapeField: "smooth",
+		xField: "index",
+		yField: "value",
+		style: {
+			fill: "linear-gradient(-90deg, white 0%, orange 100%)",
+			fillOpacity: 0.6,
+		},
+	};
 	useEffect(() => {
 		setTimeout(() => {
 			setLoading(false);
@@ -223,55 +239,155 @@ const MainHome: FunctionComponent = () => {
 				<div className={styles.home_content_head}>
 					<div className={styles.home_content_head_left}>
 						<Card
-							style={{ width: "13.5vw", height: "21vh" }}
+							style={{ width: "200px", height: "150px" }}
 							loading={false}
 							bordered
 							hoverable>
 							<Skeleton loading={loading} active avatar>
-								<Meta
+								<Flex vertical={true}>
-									avatar={<Avatar shape="square" size="large" src={storage} />}
+									<Flex
-									title="存储"
+										vertical={false}
-									description="This is the description"
+										align={"center"}
-								/>
+										justify={"space-between"}>
+										<Flex vertical={false} align={"center"}>
+											<Avatar
+												src={storage as any}
+												shape={"square"}
+												size={"large"}></Avatar>
+											<span
+												style={{
+													marginLeft: 10,
+													fontSize: 18,
+													fontWeight: "bolder",
+												}}>
+												{" "}
+												存储
+											</span>
+										</Flex>
+										<Flex vertical={false} align={"center"}>
+											<span style={{ fontSize: 15 }}>
+												{<span style={{fontSize: 30,color: "coral",fontWeight: "bolder"}}>{2}</span>}/个
+											</span>
+										</Flex>
+									</Flex>
+									<Flex vertical={false} align={"center"} style={{width: "150px",height: "80px"}}>
+										<Tiny.Area {...config} />
+									</Flex>
+								</Flex>
 							</Skeleton>
 						</Card>
 						<Card
-							style={{ width: "13.5vw", height: "21vh" }}
+							style={{ width: "200px", height: "150px" }}
 							loading={false}
 							bordered
 							hoverable>
 							<Skeleton loading={loading} active avatar>
-								<Meta
+								<Flex vertical={true}>
-									avatar={<Avatar shape="square" size="large" src={bucket} />}
+									<Flex
-									title="存储桶"
+										vertical={false}
-									description="This is the description"
+										align={"center"}
-								/>
+										justify={"space-between"}>
+										<Flex vertical={false} align={"center"}>
+											<Avatar
+												src={bucket as any}
+												shape={"square"}
+												size={"large"}></Avatar>
+											<span
+												style={{
+													marginLeft: 10,
+													fontSize: 18,
+													fontWeight: "bolder",
+												}}>
+												{" "}
+												存储桶
+											</span>
+										</Flex>
+										<Flex vertical={false} align={"center"}>
+											<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"}}>
+										<Tiny.Area {...config} />
+									</Flex>
+								</Flex>
 							</Skeleton>
 						</Card>
 						<Card
-							style={{ width: "13.5vw", height: "21vh" }}
+							style={{ width: "200px", height: "150px" }}
 							loading={false}
 							bordered
 							hoverable>
 							<Skeleton loading={loading} active avatar>
-								<Meta
+								<Flex vertical={true}>
-									avatar={<Avatar shape="square" size="large" src={file} />}
+									<Flex
-									title="文件"
+										vertical={false}
-									description="This is the description"
+										align={"center"}
-								/>
+										justify={"space-between"}>
+										<Flex vertical={false} align={"center"}>
+											<Avatar
+												src={file as any}
+												shape={"square"}
+												size={"large"}></Avatar>
+											<span
+												style={{
+													marginLeft: 10,
+													fontSize: 18,
+													fontWeight: "bolder",
+												}}>
+												{" "}
+												文件
+											</span>
+										</Flex>
+										<Flex vertical={false} align={"center"}>
+											<span style={{ fontSize: 15 }}>
+												{<span style={{fontSize: 30,color: "orange", fontWeight: "bolder"}}>{2}</span>}/个
+											</span>
+										</Flex>
+									</Flex>
+									<Flex vertical={false} align={"center"} style={{width: "10vw",height: "11vh"}}>
+										<Tiny.Area {...config} />
+									</Flex>
+								</Flex>
 							</Skeleton>
 						</Card>
 						<Card
-							style={{ width: "13.5vw", height: "21vh" }}
+							style={{ width: "200px", height: "150px" }}
 							loading={false}
 							bordered
 							hoverable>
 							<Skeleton loading={loading} active avatar>
-								<Meta
+								<Flex vertical={true}>
-									avatar={<Avatar shape="square" size="large" src={flux} />}
+									<Flex
-									title="总量"
+										vertical={false}
-									description="This is the description"
+										align={"center"}
-								/>
+										justify={"space-between"}>
+										<Flex vertical={false} align={"center"}>
+											<Avatar
+												src={flux as any}
+												shape={"square"}
+												size={"large"}></Avatar>
+											<span
+												style={{
+													marginLeft: 10,
+													fontSize: 18,
+													fontWeight: "bolder",
+												}}>
+												{" "}
+												总量
+											</span>
+										</Flex>
+										<Flex vertical={false} align={"center"}>
+											<span style={{ fontSize: 15 }}>
+												{<span style={{fontSize: 30,color: "lightgreen", fontWeight: "bolder"}}>{2}</span>}/M
+											</span>
+										</Flex>
+									</Flex>
+									<Flex vertical={false} align={"center"}  style={{width: "10vw",height: "11vh"}}>
+										<Tiny.Area {...config} />
+									</Flex>
+								</Flex>
 							</Skeleton>
 						</Card>
 					</div>
@@ -313,11 +429,13 @@ const MainHome: FunctionComponent = () => {
 							]}
 							weekdayLabels={["周日", "周一", "周二", "周三", "周四", "周五", "周六"]}
 							gutterSize={3}
-							values={[
+							values={
+								[
 									{ date: "2024-01-02", count: 12 },
 									{ date: "2024-05-3", count: 122 },
 									{ date: "2024-06-30", count: 38 },
-							]}></CalendarHeatmap>
+								] as any
+							}></CalendarHeatmap>
 					</ProCard>
 				</div>
 				<div className={styles.home_content_list}>

src/components/Main/Settings/index.tsx

@@ -6,7 +6,7 @@ import styles from "./index.module.less";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import { Suspense } from "react";
 import selectOptions from "@/components/Main/Settings/settings.ts";
-import StorageIcon from "@/context/stroage-icon.ts";
+import StorageIcon from "@/constant/stroage-icon.ts";
 export default () => {
 	const navigate = useNavigate();
 	const location = useLocation();

src/components/Main/User/UserSetting/index.tsx

@@ -18,7 +18,7 @@ import {
 } from "antd";
 import styles from "./index.module.less";
 import TextArea from "antd/es/input/TextArea";
-import { city } from "@/context/five-level-address.ts";
+import { city } from "@/constant/five-level-address.ts";
 
 const UserSetting: FunctionComponent = () => {
 	const [disable, setDisable] = useState(true);

tsconfig.json

@@ -35,7 +35,6 @@
     "src/**/*.d.ts",
     "src/**/*.tsx",
     "types/*.d.ts",
-    "vite.config.ts"
   ],
   "references": [
     {

vite.config.ts

@@ -1,6 +1,6 @@
 /** @format */
 
-import { defineConfig, loadEnv } from "vite";
+import { defineConfig, loadEnv, UserConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { resolve } from "path";
 import viteCompression from "vite-plugin-compression";
@@ -10,10 +10,7 @@ import postcssPresetEnv from "postcss-preset-env";
 import autoprefixer from "autoprefixer";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import svgr from "vite-plugin-svgr";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+export default defineConfig(({ mode }): any => {
-// @ts-expect-error
-//配置参数
-export default defineConfig(({ mode }) => {
 	const env = loadEnv(mode, process.cwd());
 	return {
 		base: "/",
@@ -131,8 +128,25 @@ export default defineConfig(({ mode }) => {
 			write: true, // 启用将构建后的文件写入磁盘
 			emptyOutDir: true, // 构建时清空该目录
 			brotliSize: true, // 启用 brotli 压缩大小报告
-			chunkSizeWarningLimit: 2000, // chunk 大小警告的限制
+			chunkSizeWarningLimit: 4000, // chunk 大小警告的限制
 			watch: null, // 设置为 {} 则会启用 rollup 的监听器
+			rollupOptions: {
+				output: {
+					// manualChunks 配置
+					manualChunks: {
+						// 将 React 相关库打包成单独的 chunk 中
+						"react-vendor": ["react", "react-dom"],
+						// 将组件库的代码打包
+						library: [
+							"antd",
+							"@ant-design/icons",
+							"@ant-design/pro-components",
+							"@ant-design/use-emotion-css",
+							"@ant-design/charts",
+						],
+					},
+				},
+			},
 		},
 		server: {
 			proxy: {