feat: 首页仪表盘调整
This commit is contained in:
landaiqing
@@ -1,3 +1,3 @@
|
||||
node_modules
|
||||
.eslintrc.cjs
|
||||
dist
|
||||
node_modules
|
||||
.eslintrc.cjs
|
||||
dist
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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 = () => {
|
||||
|
||||
@@ -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 = [
|
||||
{
|
||||
|
||||
@@ -1,32 +1,33 @@
|
||||
.home_content_main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.home_content_head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.home_content_head_left {
|
||||
height: 51vh;
|
||||
width: 43%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
|
||||
}
|
||||
|
||||
.home_content_list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-top: 30px;
|
||||
|
||||
}
|
||||
.home_content_main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.home_content_head {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.home_content_head_left {
|
||||
height: 50vh;
|
||||
width: 43%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
|
||||
}
|
||||
|
||||
.home_content_list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-top: 30px;
|
||||
|
||||
}
|
||||
|
||||
@@ -1,403 +1,521 @@
|
||||
/** @format */
|
||||
import { FunctionComponent, useEffect, useState } from "react";
|
||||
import { Avatar, Card, Skeleton, Space, Tag } from "antd";
|
||||
import Meta from "antd/es/card/Meta";
|
||||
import styles from "./index.module.less";
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import { ProCard, ProList } from "@ant-design/pro-components";
|
||||
import storage from "@/assets/icons/storage.svg";
|
||||
import bucket from "@/assets/icons/bucket.svg";
|
||||
import file from "@/assets/icons/file.svg";
|
||||
import flux from "@/assets/icons/flux.svg";
|
||||
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";
|
||||
const defaultData = [
|
||||
{
|
||||
id: "1",
|
||||
name: "语雀的天空",
|
||||
image: aliyun,
|
||||
desc: "我是一条测试的描述",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Ant Design",
|
||||
image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
|
||||
desc: "我是一条测试的描述",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "蚂蚁金服体验科技",
|
||||
image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
|
||||
desc: "我是一条测试的描述",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "TechUI",
|
||||
image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
|
||||
desc: "我是一条测试的描述",
|
||||
},
|
||||
];
|
||||
|
||||
type DataItem = (typeof defaultData)[number];
|
||||
const MainHome: FunctionComponent = () => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [dataSource, setDataSource] = useState<DataItem[]>(defaultData);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
color: ["#F58080", "#47D8BE", "#F9A589"],
|
||||
data: ["文件", "流量", "存储桶"],
|
||||
left: "center",
|
||||
bottom: "bottom",
|
||||
},
|
||||
grid: {
|
||||
top: "middle",
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
height: "80%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [100, 200, 20, 30, 60, 89],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#DDD",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#333",
|
||||
},
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "文件",
|
||||
type: "line",
|
||||
data: [800, 900, 220, 130, 660, 289],
|
||||
color: "#F58080",
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
color: {
|
||||
type: "linear",
|
||||
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#FFCAD4", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.4,
|
||||
color: "#F58080", // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#F58080", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: "rgba(245,128,128, 0.5)",
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 7,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#F58080",
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 100,*/
|
||||
borderColor: "#F58080",
|
||||
},
|
||||
smooth: true,
|
||||
},
|
||||
{
|
||||
name: "流量",
|
||||
type: "line",
|
||||
data: [123, 568, 111, 222, 123, 56],
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
color: {
|
||||
type: "linear",
|
||||
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#AAF487", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.4,
|
||||
color: "#47D8BE", // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#47D8BE", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: "rgba(71,216,190, 0.5)",
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 7,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#AAF487",
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 100,*/
|
||||
borderColor: "#AAF487",
|
||||
},
|
||||
smooth: true,
|
||||
},
|
||||
{
|
||||
name: "存储桶",
|
||||
type: "line",
|
||||
data: [125, 568, 25, 36, 784, 56],
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
color: {
|
||||
type: "linear",
|
||||
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#F6D06F", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.4,
|
||||
color: "#F9A589", // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#F9A589", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: "rgba(249,165,137, 0.5)",
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 7,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#F6D06F",
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 100,*/
|
||||
borderColor: "#F6D06F",
|
||||
},
|
||||
smooth: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<div className={styles.home_content_main}>
|
||||
<div className={styles.home_content_head}>
|
||||
<div className={styles.home_content_head_left}>
|
||||
<Card
|
||||
style={{ width: "13.5vw", height: "21vh" }}
|
||||
loading={false}
|
||||
bordered
|
||||
hoverable>
|
||||
<Skeleton loading={loading} active avatar>
|
||||
<Meta
|
||||
avatar={<Avatar shape="square" size="large" src={storage} />}
|
||||
title="存储"
|
||||
description="This is the description"
|
||||
/>
|
||||
</Skeleton>
|
||||
</Card>
|
||||
<Card
|
||||
style={{ width: "13.5vw", height: "21vh" }}
|
||||
loading={false}
|
||||
bordered
|
||||
hoverable>
|
||||
<Skeleton loading={loading} active avatar>
|
||||
<Meta
|
||||
avatar={<Avatar shape="square" size="large" src={bucket} />}
|
||||
title="存储桶"
|
||||
description="This is the description"
|
||||
/>
|
||||
</Skeleton>
|
||||
</Card>
|
||||
<Card
|
||||
style={{ width: "13.5vw", height: "21vh" }}
|
||||
loading={false}
|
||||
bordered
|
||||
hoverable>
|
||||
<Skeleton loading={loading} active avatar>
|
||||
<Meta
|
||||
avatar={<Avatar shape="square" size="large" src={file} />}
|
||||
title="文件"
|
||||
description="This is the description"
|
||||
/>
|
||||
</Skeleton>
|
||||
</Card>
|
||||
<Card
|
||||
style={{ width: "13.5vw", height: "21vh" }}
|
||||
loading={false}
|
||||
bordered
|
||||
hoverable>
|
||||
<Skeleton loading={loading} active avatar>
|
||||
<Meta
|
||||
avatar={<Avatar shape="square" size="large" src={flux} />}
|
||||
title="总量"
|
||||
description="This is the description"
|
||||
/>
|
||||
</Skeleton>
|
||||
</Card>
|
||||
</div>
|
||||
<div style={{ width: "55%" }}>
|
||||
<ProCard bordered boxShadow>
|
||||
<Skeleton loading={loading} active>
|
||||
<ReactECharts option={option} />
|
||||
</Skeleton>
|
||||
</ProCard>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ProCard
|
||||
bordered
|
||||
boxShadow
|
||||
style={{
|
||||
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 },
|
||||
]}></CalendarHeatmap>
|
||||
</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>
|
||||
);
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</ProCard>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default MainHome;
|
||||
/** @format */
|
||||
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";
|
||||
import { ProCard, ProList } from "@ant-design/pro-components";
|
||||
import storage from "@/assets/icons/storage.svg";
|
||||
import bucket from "@/assets/icons/bucket.svg";
|
||||
import file from "@/assets/icons/file.svg";
|
||||
import flux from "@/assets/icons/flux.svg";
|
||||
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",
|
||||
name: "语雀的天空",
|
||||
image: aliyun,
|
||||
desc: "我是一条测试的描述",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Ant Design",
|
||||
image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
|
||||
desc: "我是一条测试的描述",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "蚂蚁金服体验科技",
|
||||
image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
|
||||
desc: "我是一条测试的描述",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "TechUI",
|
||||
image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
|
||||
desc: "我是一条测试的描述",
|
||||
},
|
||||
];
|
||||
|
||||
type DataItem = (typeof defaultData)[number];
|
||||
const MainHome: React.FC = () => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [dataSource, setDataSource] = useState<DataItem[]>(defaultData);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
color: ["#F58080", "#47D8BE", "#F9A589"],
|
||||
data: ["文件", "流量", "存储桶"],
|
||||
left: "center",
|
||||
bottom: "bottom",
|
||||
},
|
||||
grid: {
|
||||
top: "middle",
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
height: "80%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [100, 200, 20, 30, 60, 89],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#DDD",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#333",
|
||||
},
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "文件",
|
||||
type: "line",
|
||||
data: [800, 900, 220, 130, 660, 289],
|
||||
color: "#F58080",
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
color: {
|
||||
type: "linear",
|
||||
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#FFCAD4", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.4,
|
||||
color: "#F58080", // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#F58080", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: "rgba(245,128,128, 0.5)",
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 7,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#F58080",
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 100,*/
|
||||
borderColor: "#F58080",
|
||||
},
|
||||
smooth: true,
|
||||
},
|
||||
{
|
||||
name: "流量",
|
||||
type: "line",
|
||||
data: [123, 568, 111, 222, 123, 56],
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
color: {
|
||||
type: "linear",
|
||||
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#AAF487", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.4,
|
||||
color: "#47D8BE", // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#47D8BE", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: "rgba(71,216,190, 0.5)",
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 7,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#AAF487",
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 100,*/
|
||||
borderColor: "#AAF487",
|
||||
},
|
||||
smooth: true,
|
||||
},
|
||||
{
|
||||
name: "存储桶",
|
||||
type: "line",
|
||||
data: [125, 568, 25, 36, 784, 56],
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
color: {
|
||||
type: "linear",
|
||||
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#F6D06F", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.4,
|
||||
color: "#F9A589", // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#F9A589", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: "rgba(249,165,137, 0.5)",
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 7,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#F6D06F",
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 100,*/
|
||||
borderColor: "#F6D06F",
|
||||
},
|
||||
smooth: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
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);
|
||||
}, 2000);
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<div className={styles.home_content_main}>
|
||||
<div className={styles.home_content_head}>
|
||||
<div className={styles.home_content_head_left}>
|
||||
<Card
|
||||
style={{ width: "200px", height: "150px" }}
|
||||
loading={false}
|
||||
bordered
|
||||
hoverable>
|
||||
<Skeleton loading={loading} active avatar>
|
||||
<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: "200px", height: "150px" }}
|
||||
loading={false}
|
||||
bordered
|
||||
hoverable>
|
||||
<Skeleton loading={loading} active avatar>
|
||||
<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: "200px", height: "150px" }}
|
||||
loading={false}
|
||||
bordered
|
||||
hoverable>
|
||||
<Skeleton loading={loading} active avatar>
|
||||
<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: "200px", height: "150px" }}
|
||||
loading={false}
|
||||
bordered
|
||||
hoverable>
|
||||
<Skeleton loading={loading} active avatar>
|
||||
<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>
|
||||
<div style={{ width: "55%" }}>
|
||||
<ProCard bordered boxShadow>
|
||||
<Skeleton loading={loading} active>
|
||||
<ReactECharts option={option} />
|
||||
</Skeleton>
|
||||
</ProCard>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ProCard
|
||||
bordered
|
||||
boxShadow
|
||||
style={{
|
||||
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>
|
||||
</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>
|
||||
);
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</ProCard>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default MainHome;
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -1,74 +1,74 @@
|
||||
/** @format */
|
||||
|
||||
import jpg from "@/assets/icons/files/jpg.svg";
|
||||
import png from "@/assets/icons/files/png.svg";
|
||||
import pdf from "@/assets/icons/files/pdf.svg";
|
||||
import java from "@/assets/icons/files/java.svg";
|
||||
import ai from "@/assets/icons/files/ai.svg";
|
||||
import avi from "@/assets/icons/files/avi.svg";
|
||||
import css from "@/assets/icons/files/css.svg";
|
||||
import csv from "@/assets/icons/files/csv.svg";
|
||||
import dbf from "@/assets/icons/files/dbf.svg";
|
||||
import doc from "@/assets/icons/files/doc.svg";
|
||||
import dwg from "@/assets/icons/files/dwg.svg";
|
||||
import exe from "@/assets/icons/files/exe.svg";
|
||||
import fla from "@/assets/icons/files/fla.svg";
|
||||
import flash from "@/assets/icons/files/flash.svg";
|
||||
import gif from "@/assets/icons/files/gif.svg";
|
||||
import html from "@/assets/icons/files/html.svg";
|
||||
import iso from "@/assets/icons/files/iso.svg";
|
||||
import javascript from "@/assets/icons/files/javascript.svg";
|
||||
import json from "@/assets/icons/files/json-file.svg";
|
||||
import mp3 from "@/assets/icons/files/mp3.svg";
|
||||
import mp4 from "@/assets/icons/files/mp4.svg";
|
||||
import ppt from "@/assets/icons/files/ppt.svg";
|
||||
import psd from "@/assets/icons/files/psd.svg";
|
||||
import rtf from "@/assets/icons/files/rtf.svg";
|
||||
import search from "@/assets/icons/files/search.svg";
|
||||
import svg from "@/assets/icons/files/svg.svg";
|
||||
import trash from "@/assets/icons/files/trash.svg";
|
||||
import trashbox from "@/assets/icons/files/trashbox.svg";
|
||||
import txt from "@/assets/icons/files/txt.svg";
|
||||
import xls from "@/assets/icons/files/xls.svg";
|
||||
import xml from "@/assets/icons/files/xml.svg";
|
||||
import zip from "@/assets/icons/files/zip.svg";
|
||||
import rar from "@/assets/icons/files/rar.svg";
|
||||
import gz from "@/assets/icons/files/gz.svg";
|
||||
const FileIcon: any = {
|
||||
jpg: jpg,
|
||||
png: png,
|
||||
pdf: pdf,
|
||||
java: java,
|
||||
ai: ai,
|
||||
avi: avi,
|
||||
css: css,
|
||||
csv: csv,
|
||||
dbf: dbf,
|
||||
doc: doc,
|
||||
docx: doc,
|
||||
dwg: dwg,
|
||||
exe: exe,
|
||||
fla: fla,
|
||||
flash: flash,
|
||||
gif: gif,
|
||||
html: html,
|
||||
iso: iso,
|
||||
javascript: javascript,
|
||||
json: json,
|
||||
mp3: mp3,
|
||||
mp4: mp4,
|
||||
ppt: ppt,
|
||||
psd: psd,
|
||||
rtf: rtf,
|
||||
search: search,
|
||||
svg: svg,
|
||||
trash: trash,
|
||||
trashbox: trashbox,
|
||||
txt: txt,
|
||||
xls: xls,
|
||||
xml: xml,
|
||||
zip: zip,
|
||||
rar: rar,
|
||||
gz: gz,
|
||||
};
|
||||
export default FileIcon;
|
||||
/** @format */
|
||||
|
||||
import jpg from "@/assets/icons/files/jpg.svg";
|
||||
import png from "@/assets/icons/files/png.svg";
|
||||
import pdf from "@/assets/icons/files/pdf.svg";
|
||||
import java from "@/assets/icons/files/java.svg";
|
||||
import ai from "@/assets/icons/files/ai.svg";
|
||||
import avi from "@/assets/icons/files/avi.svg";
|
||||
import css from "@/assets/icons/files/css.svg";
|
||||
import csv from "@/assets/icons/files/csv.svg";
|
||||
import dbf from "@/assets/icons/files/dbf.svg";
|
||||
import doc from "@/assets/icons/files/doc.svg";
|
||||
import dwg from "@/assets/icons/files/dwg.svg";
|
||||
import exe from "@/assets/icons/files/exe.svg";
|
||||
import fla from "@/assets/icons/files/fla.svg";
|
||||
import flash from "@/assets/icons/files/flash.svg";
|
||||
import gif from "@/assets/icons/files/gif.svg";
|
||||
import html from "@/assets/icons/files/html.svg";
|
||||
import iso from "@/assets/icons/files/iso.svg";
|
||||
import javascript from "@/assets/icons/files/javascript.svg";
|
||||
import json from "@/assets/icons/files/json-file.svg";
|
||||
import mp3 from "@/assets/icons/files/mp3.svg";
|
||||
import mp4 from "@/assets/icons/files/mp4.svg";
|
||||
import ppt from "@/assets/icons/files/ppt.svg";
|
||||
import psd from "@/assets/icons/files/psd.svg";
|
||||
import rtf from "@/assets/icons/files/rtf.svg";
|
||||
import search from "@/assets/icons/files/search.svg";
|
||||
import svg from "@/assets/icons/files/svg.svg";
|
||||
import trash from "@/assets/icons/files/trash.svg";
|
||||
import trashbox from "@/assets/icons/files/trashbox.svg";
|
||||
import txt from "@/assets/icons/files/txt.svg";
|
||||
import xls from "@/assets/icons/files/xls.svg";
|
||||
import xml from "@/assets/icons/files/xml.svg";
|
||||
import zip from "@/assets/icons/files/zip.svg";
|
||||
import rar from "@/assets/icons/files/rar.svg";
|
||||
import gz from "@/assets/icons/files/gz.svg";
|
||||
const FileIcon: any = {
|
||||
jpg: jpg,
|
||||
png: png,
|
||||
pdf: pdf,
|
||||
java: java,
|
||||
ai: ai,
|
||||
avi: avi,
|
||||
css: css,
|
||||
csv: csv,
|
||||
dbf: dbf,
|
||||
doc: doc,
|
||||
docx: doc,
|
||||
dwg: dwg,
|
||||
exe: exe,
|
||||
fla: fla,
|
||||
flash: flash,
|
||||
gif: gif,
|
||||
html: html,
|
||||
iso: iso,
|
||||
javascript: javascript,
|
||||
json: json,
|
||||
mp3: mp3,
|
||||
mp4: mp4,
|
||||
ppt: ppt,
|
||||
psd: psd,
|
||||
rtf: rtf,
|
||||
search: search,
|
||||
svg: svg,
|
||||
trash: trash,
|
||||
trashbox: trashbox,
|
||||
txt: txt,
|
||||
xls: xls,
|
||||
xml: xml,
|
||||
zip: zip,
|
||||
rar: rar,
|
||||
gz: gz,
|
||||
};
|
||||
export default FileIcon;
|
||||
@@ -1,34 +1,34 @@
|
||||
/** @format */
|
||||
|
||||
import aliyun from "@/assets/icons/aliyun.svg";
|
||||
import tencent from "@/assets/icons/tencent.svg";
|
||||
import huawei from "@/assets/icons/huawei.svg";
|
||||
import baiduyun from "@/assets/icons/baiduyun.svg";
|
||||
import minio from "@/assets/icons/minio.svg";
|
||||
import jdyun from "@/assets/icons/jdyun.svg";
|
||||
import aws from "@/assets/icons/aws.svg";
|
||||
import wangyi from "@/assets/icons/wangyi.svg";
|
||||
import qiniu from "@/assets/icons/qiniu.svg";
|
||||
import upyun from "@/assets/icons/upyun.svg";
|
||||
import pinanyun from "@/assets/icons/pinanyun.svg";
|
||||
import qingyun from "@/assets/icons/qingyun.svg";
|
||||
import ucloud from "@/assets/icons/ucloud.svg";
|
||||
import jinshan from "@/assets/icons/jinshan.svg";
|
||||
|
||||
const StorageIcon: any = {
|
||||
ali: aliyun,
|
||||
tencent: tencent,
|
||||
huawei: huawei,
|
||||
baidu: baiduyun,
|
||||
minio: minio,
|
||||
jd: jdyun,
|
||||
aws: aws,
|
||||
wangyi: wangyi,
|
||||
qiniu: qiniu,
|
||||
up: upyun,
|
||||
pinan: pinanyun,
|
||||
qingyun: qingyun,
|
||||
ucloud: ucloud,
|
||||
jinshan: jinshan,
|
||||
};
|
||||
export default StorageIcon;
|
||||
/** @format */
|
||||
|
||||
import aliyun from "@/assets/icons/aliyun.svg";
|
||||
import tencent from "@/assets/icons/tencent.svg";
|
||||
import huawei from "@/assets/icons/huawei.svg";
|
||||
import baiduyun from "@/assets/icons/baiduyun.svg";
|
||||
import minio from "@/assets/icons/minio.svg";
|
||||
import jdyun from "@/assets/icons/jdyun.svg";
|
||||
import aws from "@/assets/icons/aws.svg";
|
||||
import wangyi from "@/assets/icons/wangyi.svg";
|
||||
import qiniu from "@/assets/icons/qiniu.svg";
|
||||
import upyun from "@/assets/icons/upyun.svg";
|
||||
import pinanyun from "@/assets/icons/pinanyun.svg";
|
||||
import qingyun from "@/assets/icons/qingyun.svg";
|
||||
import ucloud from "@/assets/icons/ucloud.svg";
|
||||
import jinshan from "@/assets/icons/jinshan.svg";
|
||||
|
||||
const StorageIcon: any = {
|
||||
ali: aliyun,
|
||||
tencent: tencent,
|
||||
huawei: huawei,
|
||||
baidu: baiduyun,
|
||||
minio: minio,
|
||||
jd: jdyun,
|
||||
aws: aws,
|
||||
wangyi: wangyi,
|
||||
qiniu: qiniu,
|
||||
up: upyun,
|
||||
pinan: pinanyun,
|
||||
qingyun: qingyun,
|
||||
ucloud: ucloud,
|
||||
jinshan: jinshan,
|
||||
};
|
||||
export default StorageIcon;
|
||||
@@ -1,45 +1,44 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"esModuleInterop": true,
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": [
|
||||
"ES2020",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"experimentalDecorators": true,
|
||||
"jsx": "react-jsx",
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.d.ts",
|
||||
"src/**/*.tsx",
|
||||
"types/*.d.ts",
|
||||
"vite.config.ts"
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
{
|
||||
"compilerOptions": {
|
||||
"esModuleInterop": true,
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": [
|
||||
"ES2020",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"experimentalDecorators": true,
|
||||
"jsx": "react-jsx",
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.d.ts",
|
||||
"src/**/*.tsx",
|
||||
"types/*.d.ts",
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
312
vite.config.ts
312
vite.config.ts
@@ -1,149 +1,163 @@
|
||||
/** @format */
|
||||
|
||||
import { defineConfig, loadEnv } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import { resolve } from "path";
|
||||
import viteCompression from "vite-plugin-compression";
|
||||
import { createHtmlPlugin } from "vite-plugin-html";
|
||||
import legacy from "@vitejs/plugin-legacy";
|
||||
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 }) => {
|
||||
const env = loadEnv(mode, process.cwd());
|
||||
return {
|
||||
base: "/",
|
||||
plugins: [
|
||||
react(),
|
||||
nodePolyfills(),
|
||||
svgr({ svgrOptions: { icon: true } }),
|
||||
legacy({
|
||||
targets: [
|
||||
"ie >= 11",
|
||||
"chrome 52",
|
||||
"Chrome > 70",
|
||||
"Safari 12.1",
|
||||
"last 2 versions and since 2018 and > 0.5%",
|
||||
"iOS >= 9",
|
||||
"Android >= 4.4",
|
||||
"last 2 versions",
|
||||
],
|
||||
additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
|
||||
renderLegacyChunks: true,
|
||||
polyfills: [
|
||||
"es.promise.all-settled",
|
||||
"es.symbol",
|
||||
"es.array.filter",
|
||||
"es.promise",
|
||||
"es.promise.finally",
|
||||
"es/map",
|
||||
"es/set",
|
||||
"es.array.for-each",
|
||||
"es.object.define-properties",
|
||||
"es.object.define-property",
|
||||
"es.object.get-own-property-descriptor",
|
||||
"es.object.get-own-property-descriptors",
|
||||
"es.object.keys",
|
||||
"es.object.to-string",
|
||||
"web.dom-collections.for-each",
|
||||
"esnext.global-this",
|
||||
"esnext.string.match-all",
|
||||
],
|
||||
modernPolyfills: ["es.promise.all-settled", "es.object.entries"],
|
||||
}),
|
||||
viteCompression({
|
||||
verbose: true, // 是否在控制台中输出压缩结果
|
||||
disable: false,
|
||||
threshold: 10240, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反
|
||||
algorithm: "gzip", // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
|
||||
ext: ".gz",
|
||||
deleteOriginFile: true, // 源文件压缩后是否删除
|
||||
}),
|
||||
createHtmlPlugin({
|
||||
minify: true,
|
||||
/**
|
||||
* 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除
|
||||
* @default src/main.ts
|
||||
*/
|
||||
entry: "src/main.tsx",
|
||||
/**
|
||||
* 如果你想将 `index.html`存放在指定文件夹，可以修改它，否则不需要配置
|
||||
* @default index.html
|
||||
*/
|
||||
template: "index.html",
|
||||
/**
|
||||
* 需要注入 index.html ejs 模版的数据
|
||||
*/
|
||||
inject: {
|
||||
data: {
|
||||
title: env.VITE_TITLE_NAME,
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": resolve(__dirname, "src"),
|
||||
},
|
||||
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"], // 默认值，这些文件引入时不需要写后缀
|
||||
},
|
||||
css: {
|
||||
modules: {
|
||||
// 一般我们可以通过 generateScopedName 属性来对生成的类名进行自定义
|
||||
// 其中，name 表示当前文件名，local 表示类名
|
||||
generateScopedName: "[name]__[local]___[hash:base64:5]",
|
||||
},
|
||||
postcss: {
|
||||
plugins: [
|
||||
postcssPresetEnv(),
|
||||
autoprefixer({
|
||||
// 自动添加前缀
|
||||
overrideBrowserslist: [
|
||||
"Android 4.1",
|
||||
"iOS 7.1",
|
||||
"Chrome > 31",
|
||||
"ff > 31",
|
||||
"ie >= 8",
|
||||
],
|
||||
}),
|
||||
],
|
||||
},
|
||||
preprocessorOptions: {
|
||||
less: {
|
||||
javascriptEnabled: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
esbuild: {
|
||||
// drop: ["console", "debugger"],
|
||||
},
|
||||
build: {
|
||||
outDir: "dist", // 指定输出路径
|
||||
assetsDir: "assets", // 指定生成静态文件目录
|
||||
assetsInlineLimit: "4096", // 小于此阈值的导入或引用资源将内联为 base64 编码
|
||||
cssCodeSplit: true, // 启用 CSS 代码拆分
|
||||
sourcemap: false, // 构建后是否生成 source map 文件
|
||||
minify: "esbuild", // 指定使用哪种混淆器
|
||||
write: true, // 启用将构建后的文件写入磁盘
|
||||
emptyOutDir: true, // 构建时清空该目录
|
||||
brotliSize: true, // 启用 brotli 压缩大小报告
|
||||
chunkSizeWarningLimit: 2000, // chunk 大小警告的限制
|
||||
watch: null, // 设置为 {} 则会启用 rollup 的监听器
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
[env.VITE_APP_BASE_API]: {
|
||||
//后端接口的baseurl
|
||||
target: env.VITE_API_BASE_URL,
|
||||
//是否允许跨域
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), ""),
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
/** @format */
|
||||
|
||||
import { defineConfig, loadEnv, UserConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import { resolve } from "path";
|
||||
import viteCompression from "vite-plugin-compression";
|
||||
import { createHtmlPlugin } from "vite-plugin-html";
|
||||
import legacy from "@vitejs/plugin-legacy";
|
||||
import postcssPresetEnv from "postcss-preset-env";
|
||||
import autoprefixer from "autoprefixer";
|
||||
import { nodePolyfills } from "vite-plugin-node-polyfills";
|
||||
import svgr from "vite-plugin-svgr";
|
||||
export default defineConfig(({ mode }): any => {
|
||||
const env = loadEnv(mode, process.cwd());
|
||||
return {
|
||||
base: "/",
|
||||
plugins: [
|
||||
react(),
|
||||
nodePolyfills(),
|
||||
svgr({ svgrOptions: { icon: true } }),
|
||||
legacy({
|
||||
targets: [
|
||||
"ie >= 11",
|
||||
"chrome 52",
|
||||
"Chrome > 70",
|
||||
"Safari 12.1",
|
||||
"last 2 versions and since 2018 and > 0.5%",
|
||||
"iOS >= 9",
|
||||
"Android >= 4.4",
|
||||
"last 2 versions",
|
||||
],
|
||||
additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
|
||||
renderLegacyChunks: true,
|
||||
polyfills: [
|
||||
"es.promise.all-settled",
|
||||
"es.symbol",
|
||||
"es.array.filter",
|
||||
"es.promise",
|
||||
"es.promise.finally",
|
||||
"es/map",
|
||||
"es/set",
|
||||
"es.array.for-each",
|
||||
"es.object.define-properties",
|
||||
"es.object.define-property",
|
||||
"es.object.get-own-property-descriptor",
|
||||
"es.object.get-own-property-descriptors",
|
||||
"es.object.keys",
|
||||
"es.object.to-string",
|
||||
"web.dom-collections.for-each",
|
||||
"esnext.global-this",
|
||||
"esnext.string.match-all",
|
||||
],
|
||||
modernPolyfills: ["es.promise.all-settled", "es.object.entries"],
|
||||
}),
|
||||
viteCompression({
|
||||
verbose: true, // 是否在控制台中输出压缩结果
|
||||
disable: false,
|
||||
threshold: 10240, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反
|
||||
algorithm: "gzip", // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
|
||||
ext: ".gz",
|
||||
deleteOriginFile: true, // 源文件压缩后是否删除
|
||||
}),
|
||||
createHtmlPlugin({
|
||||
minify: true,
|
||||
/**
|
||||
* 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除
|
||||
* @default src/main.ts
|
||||
*/
|
||||
entry: "src/main.tsx",
|
||||
/**
|
||||
* 如果你想将 `index.html`存放在指定文件夹，可以修改它，否则不需要配置
|
||||
* @default index.html
|
||||
*/
|
||||
template: "index.html",
|
||||
/**
|
||||
* 需要注入 index.html ejs 模版的数据
|
||||
*/
|
||||
inject: {
|
||||
data: {
|
||||
title: env.VITE_TITLE_NAME,
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": resolve(__dirname, "src"),
|
||||
},
|
||||
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"], // 默认值，这些文件引入时不需要写后缀
|
||||
},
|
||||
css: {
|
||||
modules: {
|
||||
// 一般我们可以通过 generateScopedName 属性来对生成的类名进行自定义
|
||||
// 其中，name 表示当前文件名，local 表示类名
|
||||
generateScopedName: "[name]__[local]___[hash:base64:5]",
|
||||
},
|
||||
postcss: {
|
||||
plugins: [
|
||||
postcssPresetEnv(),
|
||||
autoprefixer({
|
||||
// 自动添加前缀
|
||||
overrideBrowserslist: [
|
||||
"Android 4.1",
|
||||
"iOS 7.1",
|
||||
"Chrome > 31",
|
||||
"ff > 31",
|
||||
"ie >= 8",
|
||||
],
|
||||
}),
|
||||
],
|
||||
},
|
||||
preprocessorOptions: {
|
||||
less: {
|
||||
javascriptEnabled: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
esbuild: {
|
||||
// drop: ["console", "debugger"],
|
||||
},
|
||||
build: {
|
||||
outDir: "dist", // 指定输出路径
|
||||
assetsDir: "assets", // 指定生成静态文件目录
|
||||
assetsInlineLimit: "4096", // 小于此阈值的导入或引用资源将内联为 base64 编码
|
||||
cssCodeSplit: true, // 启用 CSS 代码拆分
|
||||
sourcemap: false, // 构建后是否生成 source map 文件
|
||||
minify: "esbuild", // 指定使用哪种混淆器
|
||||
write: true, // 启用将构建后的文件写入磁盘
|
||||
emptyOutDir: true, // 构建时清空该目录
|
||||
brotliSize: true, // 启用 brotli 压缩大小报告
|
||||
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: {
|
||||
[env.VITE_APP_BASE_API]: {
|
||||
//后端接口的baseurl
|
||||
target: env.VITE_API_BASE_URL,
|
||||
//是否允许跨域
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), ""),
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user