Schisandra-Cloud-Storage/schisandra-cloud-storage-front-react
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 首页仪表盘调整

Browse Source
This commit is contained in:
landaiqing
2024-07-12 10:48:43 +08:00
parent e79b193b27
commit 59cd675028
13 changed files with 877 additions and 744 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

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

2
src/components/Main/Bucket/index.tsx
View File

@@ -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 = () => {

2
src/components/Main/File/index.tsx
View File

@@ -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 = [
{

3
src/components/Main/Home/index.module.less
View File

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

178
src/components/Main/Home/index.tsx
View File

@@ -1,6 +1,6 @@
/** @format */
import { FunctionComponent, useEffect, useState } from "react";
import { Avatar, Card, Skeleton, Space, Tag } from "antd";
import React, { useEffect, useState } from "react";
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
avatar={<Avatar shape="square" size="large" src={storage} />}
title="存储"
description="This is the description"
/>
<Flex vertical={true}>
<Flex
vertical={false}
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
avatar={<Avatar shape="square" size="large" src={bucket} />}
title="存储桶"
description="This is the description"
/>
<Flex vertical={true}>
<Flex
vertical={false}
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
avatar={<Avatar shape="square" size="large" src={file} />}
title="文件"
description="This is the description"
/>
<Flex vertical={true}>
<Flex
vertical={false}
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
avatar={<Avatar shape="square" size="large" src={flux} />}
title="总量"
description="This is the description"
/>
<Flex vertical={true}>
<Flex
vertical={false}
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}>

2
src/components/Main/Settings/index.tsx
View File

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

2
src/components/Main/User/UserSetting/index.tsx
View File

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

0
src/context/file-icon.ts → src/constant/file-icon.ts
View File

0
src/context/five-level-address.ts → src/constant/five-level-address.ts
View File

0
src/context/stroage-icon.ts → src/constant/stroage-icon.ts
View File

1
tsconfig.json
View File

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

26
vite.config.ts
View File

@@ -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
// @ts-expect-error
//配置参数
export default defineConfig(({ mode }) => {
export default defineConfig(({ mode }): any => {
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: {