feat: 首页仪表盘调整
This commit is contained in:
landaiqing
@@ -1,3 +1,3 @@
|
|||||||
node_modules
|
node_modules
|
||||||
.eslintrc.cjs
|
.eslintrc.cjs
|
||||||
dist
|
dist
|
||||||
|
|||||||
@@ -12,6 +12,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ant-design/icons": "^5.3.7",
|
"@ant-design/icons": "^5.3.7",
|
||||||
"@ant-design/pro-components": "^2.7.10",
|
"@ant-design/pro-components": "^2.7.10",
|
||||||
|
"@ant-design/pro-provider": "^2.14.7",
|
||||||
"@ant-design/use-emotion-css": "^1.0.4",
|
"@ant-design/use-emotion-css": "^1.0.4",
|
||||||
"@babel/preset-env": "^7.24.7",
|
"@babel/preset-env": "^7.24.7",
|
||||||
"@types/crypto-js": "^4.2.2",
|
"@types/crypto-js": "^4.2.2",
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import styles from "./index.module.less";
|
|||||||
|
|
||||||
import { Outlet, useNavigate } from "react-router-dom";
|
import { Outlet, useNavigate } from "react-router-dom";
|
||||||
import { Button, Empty } from "antd";
|
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";
|
import { ReloadOutlined } from "@ant-design/icons";
|
||||||
|
|
||||||
const Bucket: FunctionComponent = () => {
|
const Bucket: FunctionComponent = () => {
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ import {
|
|||||||
import standard_dir from "@/assets/icons/standard_directory.svg";
|
import standard_dir from "@/assets/icons/standard_directory.svg";
|
||||||
import useStore from "@/utils/store/useStore.tsx";
|
import useStore from "@/utils/store/useStore.tsx";
|
||||||
import { observer } from "mobx-react";
|
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";
|
import file_icon from "@/assets/icons/files/file.svg";
|
||||||
const dataList: any = [
|
const dataList: any = [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -1,32 +1,33 @@
|
|||||||
.home_content_main {
|
.home_content_main {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home_content_head {
|
.home_content_head {
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: row;
|
display: flex;
|
||||||
justify-content: space-between;
|
flex-direction: row;
|
||||||
align-items: center;
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
}
|
|
||||||
|
}
|
||||||
.home_content_head_left {
|
|
||||||
height: 51vh;
|
.home_content_head_left {
|
||||||
width: 43%;
|
height: 50vh;
|
||||||
display: flex;
|
width: 43%;
|
||||||
flex-direction: row;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: row;
|
||||||
justify-content: space-around;
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
justify-content: space-around;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
|
||||||
|
}
|
||||||
.home_content_list {
|
|
||||||
display: flex;
|
.home_content_list {
|
||||||
flex-direction: row;
|
display: flex;
|
||||||
justify-content: space-between;
|
flex-direction: row;
|
||||||
margin-top: 30px;
|
justify-content: space-between;
|
||||||
|
margin-top: 30px;
|
||||||
}
|
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,403 +1,521 @@
|
|||||||
/** @format */
|
/** @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 Meta from "antd/es/card/Meta";
|
||||||
import styles from "./index.module.less";
|
import styles from "./index.module.less";
|
||||||
import ReactECharts from "echarts-for-react";
|
import ReactECharts from "echarts-for-react";
|
||||||
import { ProCard, ProList } from "@ant-design/pro-components";
|
import { ProCard, ProList } from "@ant-design/pro-components";
|
||||||
import storage from "@/assets/icons/storage.svg";
|
import storage from "@/assets/icons/storage.svg";
|
||||||
import bucket from "@/assets/icons/bucket.svg";
|
import bucket from "@/assets/icons/bucket.svg";
|
||||||
import file from "@/assets/icons/file.svg";
|
import file from "@/assets/icons/file.svg";
|
||||||
import flux from "@/assets/icons/flux.svg";
|
import flux from "@/assets/icons/flux.svg";
|
||||||
import aliyun from "@/assets/icons/aliyun.svg";
|
import aliyun from "@/assets/icons/aliyun.svg";
|
||||||
// import * as echarts from "echarts/core";
|
// import * as echarts from "echarts/core";
|
||||||
import CalendarHeatmap from "react-calendar-heatmap";
|
import CalendarHeatmap from "react-calendar-heatmap";
|
||||||
import "react-calendar-heatmap/dist/styles.css";
|
import "react-calendar-heatmap/dist/styles.css";
|
||||||
const defaultData = [
|
import { Tiny } from "@ant-design/plots";
|
||||||
{
|
const defaultData = [
|
||||||
id: "1",
|
{
|
||||||
name: "语雀的天空",
|
id: "1",
|
||||||
image: aliyun,
|
name: "语雀的天空",
|
||||||
desc: "我是一条测试的描述",
|
image: aliyun,
|
||||||
},
|
desc: "我是一条测试的描述",
|
||||||
{
|
},
|
||||||
id: "2",
|
{
|
||||||
name: "Ant Design",
|
id: "2",
|
||||||
image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
|
name: "Ant Design",
|
||||||
desc: "我是一条测试的描述",
|
image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
|
||||||
},
|
desc: "我是一条测试的描述",
|
||||||
{
|
},
|
||||||
id: "3",
|
{
|
||||||
name: "蚂蚁金服体验科技",
|
id: "3",
|
||||||
image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
|
name: "蚂蚁金服体验科技",
|
||||||
desc: "我是一条测试的描述",
|
image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
|
||||||
},
|
desc: "我是一条测试的描述",
|
||||||
{
|
},
|
||||||
id: "4",
|
{
|
||||||
name: "TechUI",
|
id: "4",
|
||||||
image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
|
name: "TechUI",
|
||||||
desc: "我是一条测试的描述",
|
image: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
|
||||||
},
|
desc: "我是一条测试的描述",
|
||||||
];
|
},
|
||||||
|
];
|
||||||
type DataItem = (typeof defaultData)[number];
|
|
||||||
const MainHome: FunctionComponent = () => {
|
type DataItem = (typeof defaultData)[number];
|
||||||
const [loading, setLoading] = useState(true);
|
const MainHome: React.FC = () => {
|
||||||
const [dataSource, setDataSource] = useState<DataItem[]>(defaultData);
|
const [loading, setLoading] = useState(true);
|
||||||
const option = {
|
const [dataSource, setDataSource] = useState<DataItem[]>(defaultData);
|
||||||
tooltip: {
|
const option = {
|
||||||
trigger: "axis",
|
tooltip: {
|
||||||
},
|
trigger: "axis",
|
||||||
legend: {
|
},
|
||||||
color: ["#F58080", "#47D8BE", "#F9A589"],
|
legend: {
|
||||||
data: ["文件", "流量", "存储桶"],
|
color: ["#F58080", "#47D8BE", "#F9A589"],
|
||||||
left: "center",
|
data: ["文件", "流量", "存储桶"],
|
||||||
bottom: "bottom",
|
left: "center",
|
||||||
},
|
bottom: "bottom",
|
||||||
grid: {
|
},
|
||||||
top: "middle",
|
grid: {
|
||||||
left: "3%",
|
top: "middle",
|
||||||
right: "4%",
|
left: "3%",
|
||||||
bottom: "3%",
|
right: "4%",
|
||||||
height: "80%",
|
bottom: "3%",
|
||||||
containLabel: true,
|
height: "80%",
|
||||||
},
|
containLabel: true,
|
||||||
xAxis: {
|
},
|
||||||
type: "category",
|
xAxis: {
|
||||||
data: [100, 200, 20, 30, 60, 89],
|
type: "category",
|
||||||
axisLine: {
|
data: [100, 200, 20, 30, 60, 89],
|
||||||
lineStyle: {
|
axisLine: {
|
||||||
color: "#999",
|
lineStyle: {
|
||||||
},
|
color: "#999",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
},
|
||||||
type: "value",
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
splitLine: {
|
||||||
type: "dashed",
|
lineStyle: {
|
||||||
color: "#DDD",
|
type: "dashed",
|
||||||
},
|
color: "#DDD",
|
||||||
},
|
},
|
||||||
axisLine: {
|
},
|
||||||
show: false,
|
axisLine: {
|
||||||
lineStyle: {
|
show: false,
|
||||||
color: "#333",
|
lineStyle: {
|
||||||
},
|
color: "#333",
|
||||||
},
|
},
|
||||||
nameTextStyle: {
|
},
|
||||||
color: "#999",
|
nameTextStyle: {
|
||||||
},
|
color: "#999",
|
||||||
splitArea: {
|
},
|
||||||
show: false,
|
splitArea: {
|
||||||
},
|
show: false,
|
||||||
},
|
},
|
||||||
series: [
|
},
|
||||||
{
|
series: [
|
||||||
name: "文件",
|
{
|
||||||
type: "line",
|
name: "文件",
|
||||||
data: [800, 900, 220, 130, 660, 289],
|
type: "line",
|
||||||
color: "#F58080",
|
data: [800, 900, 220, 130, 660, 289],
|
||||||
lineStyle: {
|
color: "#F58080",
|
||||||
width: 5,
|
lineStyle: {
|
||||||
color: {
|
width: 5,
|
||||||
type: "linear",
|
color: {
|
||||||
|
type: "linear",
|
||||||
colorStops: [
|
|
||||||
{
|
colorStops: [
|
||||||
offset: 0,
|
{
|
||||||
color: "#FFCAD4", // 0% 处的颜色
|
offset: 0,
|
||||||
},
|
color: "#FFCAD4", // 0% 处的颜色
|
||||||
{
|
},
|
||||||
offset: 0.4,
|
{
|
||||||
color: "#F58080", // 100% 处的颜色
|
offset: 0.4,
|
||||||
},
|
color: "#F58080", // 100% 处的颜色
|
||||||
{
|
},
|
||||||
offset: 1,
|
{
|
||||||
color: "#F58080", // 100% 处的颜色
|
offset: 1,
|
||||||
},
|
color: "#F58080", // 100% 处的颜色
|
||||||
],
|
},
|
||||||
globalCoord: false, // 缺省为 false
|
],
|
||||||
},
|
globalCoord: false, // 缺省为 false
|
||||||
shadowColor: "rgba(245,128,128, 0.5)",
|
},
|
||||||
shadowBlur: 10,
|
shadowColor: "rgba(245,128,128, 0.5)",
|
||||||
shadowOffsetY: 7,
|
shadowBlur: 10,
|
||||||
},
|
shadowOffsetY: 7,
|
||||||
itemStyle: {
|
},
|
||||||
color: "#F58080",
|
itemStyle: {
|
||||||
borderWidth: 10,
|
color: "#F58080",
|
||||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
borderWidth: 10,
|
||||||
shadowBlur: 100,*/
|
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||||
borderColor: "#F58080",
|
shadowBlur: 100,*/
|
||||||
},
|
borderColor: "#F58080",
|
||||||
smooth: true,
|
},
|
||||||
},
|
smooth: true,
|
||||||
{
|
},
|
||||||
name: "流量",
|
{
|
||||||
type: "line",
|
name: "流量",
|
||||||
data: [123, 568, 111, 222, 123, 56],
|
type: "line",
|
||||||
lineStyle: {
|
data: [123, 568, 111, 222, 123, 56],
|
||||||
width: 5,
|
lineStyle: {
|
||||||
color: {
|
width: 5,
|
||||||
type: "linear",
|
color: {
|
||||||
|
type: "linear",
|
||||||
colorStops: [
|
|
||||||
{
|
colorStops: [
|
||||||
offset: 0,
|
{
|
||||||
color: "#AAF487", // 0% 处的颜色
|
offset: 0,
|
||||||
},
|
color: "#AAF487", // 0% 处的颜色
|
||||||
{
|
},
|
||||||
offset: 0.4,
|
{
|
||||||
color: "#47D8BE", // 100% 处的颜色
|
offset: 0.4,
|
||||||
},
|
color: "#47D8BE", // 100% 处的颜色
|
||||||
{
|
},
|
||||||
offset: 1,
|
{
|
||||||
color: "#47D8BE", // 100% 处的颜色
|
offset: 1,
|
||||||
},
|
color: "#47D8BE", // 100% 处的颜色
|
||||||
],
|
},
|
||||||
globalCoord: false, // 缺省为 false
|
],
|
||||||
},
|
globalCoord: false, // 缺省为 false
|
||||||
shadowColor: "rgba(71,216,190, 0.5)",
|
},
|
||||||
shadowBlur: 10,
|
shadowColor: "rgba(71,216,190, 0.5)",
|
||||||
shadowOffsetY: 7,
|
shadowBlur: 10,
|
||||||
},
|
shadowOffsetY: 7,
|
||||||
itemStyle: {
|
},
|
||||||
color: "#AAF487",
|
itemStyle: {
|
||||||
borderWidth: 10,
|
color: "#AAF487",
|
||||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
borderWidth: 10,
|
||||||
shadowBlur: 100,*/
|
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||||
borderColor: "#AAF487",
|
shadowBlur: 100,*/
|
||||||
},
|
borderColor: "#AAF487",
|
||||||
smooth: true,
|
},
|
||||||
},
|
smooth: true,
|
||||||
{
|
},
|
||||||
name: "存储桶",
|
{
|
||||||
type: "line",
|
name: "存储桶",
|
||||||
data: [125, 568, 25, 36, 784, 56],
|
type: "line",
|
||||||
lineStyle: {
|
data: [125, 568, 25, 36, 784, 56],
|
||||||
width: 5,
|
lineStyle: {
|
||||||
color: {
|
width: 5,
|
||||||
type: "linear",
|
color: {
|
||||||
|
type: "linear",
|
||||||
colorStops: [
|
|
||||||
{
|
colorStops: [
|
||||||
offset: 0,
|
{
|
||||||
color: "#F6D06F", // 0% 处的颜色
|
offset: 0,
|
||||||
},
|
color: "#F6D06F", // 0% 处的颜色
|
||||||
{
|
},
|
||||||
offset: 0.4,
|
{
|
||||||
color: "#F9A589", // 100% 处的颜色
|
offset: 0.4,
|
||||||
},
|
color: "#F9A589", // 100% 处的颜色
|
||||||
{
|
},
|
||||||
offset: 1,
|
{
|
||||||
color: "#F9A589", // 100% 处的颜色
|
offset: 1,
|
||||||
},
|
color: "#F9A589", // 100% 处的颜色
|
||||||
],
|
},
|
||||||
globalCoord: false, // 缺省为 false
|
],
|
||||||
},
|
globalCoord: false, // 缺省为 false
|
||||||
shadowColor: "rgba(249,165,137, 0.5)",
|
},
|
||||||
shadowBlur: 10,
|
shadowColor: "rgba(249,165,137, 0.5)",
|
||||||
shadowOffsetY: 7,
|
shadowBlur: 10,
|
||||||
},
|
shadowOffsetY: 7,
|
||||||
itemStyle: {
|
},
|
||||||
color: "#F6D06F",
|
itemStyle: {
|
||||||
borderWidth: 10,
|
color: "#F6D06F",
|
||||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
borderWidth: 10,
|
||||||
shadowBlur: 100,*/
|
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||||
borderColor: "#F6D06F",
|
shadowBlur: 100,*/
|
||||||
},
|
borderColor: "#F6D06F",
|
||||||
smooth: true,
|
},
|
||||||
},
|
smooth: true,
|
||||||
],
|
},
|
||||||
};
|
],
|
||||||
|
};
|
||||||
useEffect(() => {
|
const data = [
|
||||||
setTimeout(() => {
|
264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513, 546
|
||||||
setLoading(false);
|
].map((value, index) => ({ value, index }));
|
||||||
}, 2000);
|
const config = {
|
||||||
}, []);
|
data,
|
||||||
return (
|
padding: 10,
|
||||||
<>
|
width: 150,
|
||||||
<div className={styles.home_content_main}>
|
height: 80,
|
||||||
<div className={styles.home_content_head}>
|
shapeField: "smooth",
|
||||||
<div className={styles.home_content_head_left}>
|
xField: "index",
|
||||||
<Card
|
yField: "value",
|
||||||
style={{ width: "13.5vw", height: "21vh" }}
|
style: {
|
||||||
loading={false}
|
fill: "linear-gradient(-90deg, white 0%, orange 100%)",
|
||||||
bordered
|
fillOpacity: 0.6,
|
||||||
hoverable>
|
},
|
||||||
<Skeleton loading={loading} active avatar>
|
};
|
||||||
<Meta
|
useEffect(() => {
|
||||||
avatar={<Avatar shape="square" size="large" src={storage} />}
|
setTimeout(() => {
|
||||||
title="存储"
|
setLoading(false);
|
||||||
description="This is the description"
|
}, 2000);
|
||||||
/>
|
}, []);
|
||||||
</Skeleton>
|
return (
|
||||||
</Card>
|
<>
|
||||||
<Card
|
<div className={styles.home_content_main}>
|
||||||
style={{ width: "13.5vw", height: "21vh" }}
|
<div className={styles.home_content_head}>
|
||||||
loading={false}
|
<div className={styles.home_content_head_left}>
|
||||||
bordered
|
<Card
|
||||||
hoverable>
|
style={{ width: "200px", height: "150px" }}
|
||||||
<Skeleton loading={loading} active avatar>
|
loading={false}
|
||||||
<Meta
|
bordered
|
||||||
avatar={<Avatar shape="square" size="large" src={bucket} />}
|
hoverable>
|
||||||
title="存储桶"
|
<Skeleton loading={loading} active avatar>
|
||||||
description="This is the description"
|
<Flex vertical={true}>
|
||||||
/>
|
<Flex
|
||||||
</Skeleton>
|
vertical={false}
|
||||||
</Card>
|
align={"center"}
|
||||||
<Card
|
justify={"space-between"}>
|
||||||
style={{ width: "13.5vw", height: "21vh" }}
|
<Flex vertical={false} align={"center"}>
|
||||||
loading={false}
|
<Avatar
|
||||||
bordered
|
src={storage as any}
|
||||||
hoverable>
|
shape={"square"}
|
||||||
<Skeleton loading={loading} active avatar>
|
size={"large"}></Avatar>
|
||||||
<Meta
|
<span
|
||||||
avatar={<Avatar shape="square" size="large" src={file} />}
|
style={{
|
||||||
title="文件"
|
marginLeft: 10,
|
||||||
description="This is the description"
|
fontSize: 18,
|
||||||
/>
|
fontWeight: "bolder",
|
||||||
</Skeleton>
|
}}>
|
||||||
</Card>
|
{" "}
|
||||||
<Card
|
存储
|
||||||
style={{ width: "13.5vw", height: "21vh" }}
|
</span>
|
||||||
loading={false}
|
</Flex>
|
||||||
bordered
|
<Flex vertical={false} align={"center"}>
|
||||||
hoverable>
|
<span style={{ fontSize: 15 }}>
|
||||||
<Skeleton loading={loading} active avatar>
|
{<span style={{fontSize: 30,color: "coral",fontWeight: "bolder"}}>{2}</span>}/个
|
||||||
<Meta
|
</span>
|
||||||
avatar={<Avatar shape="square" size="large" src={flux} />}
|
</Flex>
|
||||||
title="总量"
|
</Flex>
|
||||||
description="This is the description"
|
<Flex vertical={false} align={"center"} style={{width: "150px",height: "80px"}}>
|
||||||
/>
|
<Tiny.Area {...config} />
|
||||||
</Skeleton>
|
</Flex>
|
||||||
</Card>
|
</Flex>
|
||||||
</div>
|
</Skeleton>
|
||||||
<div style={{ width: "55%" }}>
|
</Card>
|
||||||
<ProCard bordered boxShadow>
|
<Card
|
||||||
<Skeleton loading={loading} active>
|
style={{ width: "200px", height: "150px" }}
|
||||||
<ReactECharts option={option} />
|
loading={false}
|
||||||
</Skeleton>
|
bordered
|
||||||
</ProCard>
|
hoverable>
|
||||||
</div>
|
<Skeleton loading={loading} active avatar>
|
||||||
</div>
|
<Flex vertical={true}>
|
||||||
<div>
|
<Flex
|
||||||
<ProCard
|
vertical={false}
|
||||||
bordered
|
align={"center"}
|
||||||
boxShadow
|
justify={"space-between"}>
|
||||||
style={{
|
<Flex vertical={false} align={"center"}>
|
||||||
marginTop: "30px",
|
<Avatar
|
||||||
}}
|
src={bucket as any}
|
||||||
title={"文件上传热力图"}>
|
shape={"square"}
|
||||||
<CalendarHeatmap
|
size={"large"}></Avatar>
|
||||||
startDate={new Date("2024-01-01")}
|
<span
|
||||||
endDate={new Date("2024-12-31")}
|
style={{
|
||||||
showMonthLabels={true}
|
marginLeft: 10,
|
||||||
horizontal={true}
|
fontSize: 18,
|
||||||
showWeekdayLabels={false}
|
fontWeight: "bolder",
|
||||||
monthLabels={[
|
}}>
|
||||||
"一月",
|
{" "}
|
||||||
"二月",
|
存储桶
|
||||||
"三月",
|
</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>
|
||||||
weekdayLabels={["周日", "周一", "周二", "周三", "周四", "周五", "周六"]}
|
</Flex>
|
||||||
gutterSize={3}
|
</Skeleton>
|
||||||
values={[
|
</Card>
|
||||||
{ date: "2024-01-02", count: 12 },
|
<Card
|
||||||
{ date: "2024-05-3", count: 122 },
|
style={{ width: "200px", height: "150px" }}
|
||||||
{ date: "2024-06-30", count: 38 },
|
loading={false}
|
||||||
]}></CalendarHeatmap>
|
bordered
|
||||||
</ProCard>
|
hoverable>
|
||||||
</div>
|
<Skeleton loading={loading} active avatar>
|
||||||
<div className={styles.home_content_list}>
|
<Flex vertical={true}>
|
||||||
<ProCard bordered boxShadow style={{ width: "49%" }}>
|
<Flex
|
||||||
<ProList<DataItem>
|
vertical={false}
|
||||||
rowKey="id"
|
align={"center"}
|
||||||
headerTitle="最近上传文件"
|
justify={"space-between"}>
|
||||||
dataSource={dataSource}
|
<Flex vertical={false} align={"center"}>
|
||||||
showActions="hover"
|
<Avatar
|
||||||
editable={{
|
src={file as any}
|
||||||
onSave: async (key, record, originRow) => {
|
shape={"square"}
|
||||||
console.log(key, record, originRow);
|
size={"large"}></Avatar>
|
||||||
return true;
|
<span
|
||||||
},
|
style={{
|
||||||
}}
|
marginLeft: 10,
|
||||||
onDataSourceChange={setDataSource}
|
fontSize: 18,
|
||||||
metas={{
|
fontWeight: "bolder",
|
||||||
title: {
|
}}>
|
||||||
dataIndex: "name",
|
{" "}
|
||||||
},
|
文件
|
||||||
avatar: {
|
</span>
|
||||||
dataIndex: "image",
|
</Flex>
|
||||||
editable: false,
|
<Flex vertical={false} align={"center"}>
|
||||||
},
|
<span style={{ fontSize: 15 }}>
|
||||||
description: {
|
{<span style={{fontSize: 30,color: "orange", fontWeight: "bolder"}}>{2}</span>}/个
|
||||||
dataIndex: "desc",
|
</span>
|
||||||
},
|
</Flex>
|
||||||
subTitle: {
|
</Flex>
|
||||||
render: () => {
|
<Flex vertical={false} align={"center"} style={{width: "10vw",height: "11vh"}}>
|
||||||
return (
|
<Tiny.Area {...config} />
|
||||||
<Space size={0}>
|
</Flex>
|
||||||
<Tag color="blue">Ant Design</Tag>
|
</Flex>
|
||||||
<Tag color="#5BD8A6">TechUI</Tag>
|
</Skeleton>
|
||||||
</Space>
|
</Card>
|
||||||
);
|
<Card
|
||||||
},
|
style={{ width: "200px", height: "150px" }}
|
||||||
},
|
loading={false}
|
||||||
}}
|
bordered
|
||||||
/>
|
hoverable>
|
||||||
</ProCard>
|
<Skeleton loading={loading} active avatar>
|
||||||
<ProCard bordered boxShadow style={{ width: "49%" }}>
|
<Flex vertical={true}>
|
||||||
<ProList<DataItem>
|
<Flex
|
||||||
rowKey="id"
|
vertical={false}
|
||||||
headerTitle="最近浏览文件"
|
align={"center"}
|
||||||
dataSource={dataSource}
|
justify={"space-between"}>
|
||||||
showActions="hover"
|
<Flex vertical={false} align={"center"}>
|
||||||
editable={{
|
<Avatar
|
||||||
onSave: async (key, record, originRow) => {
|
src={flux as any}
|
||||||
console.log(key, record, originRow);
|
shape={"square"}
|
||||||
return true;
|
size={"large"}></Avatar>
|
||||||
},
|
<span
|
||||||
}}
|
style={{
|
||||||
onDataSourceChange={setDataSource}
|
marginLeft: 10,
|
||||||
metas={{
|
fontSize: 18,
|
||||||
title: {
|
fontWeight: "bolder",
|
||||||
dataIndex: "name",
|
}}>
|
||||||
},
|
{" "}
|
||||||
avatar: {
|
总量
|
||||||
dataIndex: "image",
|
</span>
|
||||||
editable: false,
|
</Flex>
|
||||||
},
|
<Flex vertical={false} align={"center"}>
|
||||||
description: {
|
<span style={{ fontSize: 15 }}>
|
||||||
dataIndex: "desc",
|
{<span style={{fontSize: 30,color: "lightgreen", fontWeight: "bolder"}}>{2}</span>}/M
|
||||||
},
|
</span>
|
||||||
subTitle: {
|
</Flex>
|
||||||
render: () => {
|
</Flex>
|
||||||
return (
|
<Flex vertical={false} align={"center"} style={{width: "10vw",height: "11vh"}}>
|
||||||
<Space size={0}>
|
<Tiny.Area {...config} />
|
||||||
<Tag color="blue">Ant Design</Tag>
|
</Flex>
|
||||||
<Tag color="#5BD8A6">TechUI</Tag>
|
</Flex>
|
||||||
</Space>
|
</Skeleton>
|
||||||
);
|
</Card>
|
||||||
},
|
</div>
|
||||||
},
|
<div style={{ width: "55%" }}>
|
||||||
}}
|
<ProCard bordered boxShadow>
|
||||||
/>
|
<Skeleton loading={loading} active>
|
||||||
</ProCard>
|
<ReactECharts option={option} />
|
||||||
</div>
|
</Skeleton>
|
||||||
</div>
|
</ProCard>
|
||||||
</>
|
</div>
|
||||||
);
|
</div>
|
||||||
};
|
<div>
|
||||||
export default MainHome;
|
<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 { Outlet, useLocation, useNavigate } from "react-router-dom";
|
||||||
import { Suspense } from "react";
|
import { Suspense } from "react";
|
||||||
import selectOptions from "@/components/Main/Settings/settings.ts";
|
import selectOptions from "@/components/Main/Settings/settings.ts";
|
||||||
import StorageIcon from "@/context/stroage-icon.ts";
|
import StorageIcon from "@/constant/stroage-icon.ts";
|
||||||
export default () => {
|
export default () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ import {
|
|||||||
} from "antd";
|
} from "antd";
|
||||||
import styles from "./index.module.less";
|
import styles from "./index.module.less";
|
||||||
import TextArea from "antd/es/input/TextArea";
|
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 UserSetting: FunctionComponent = () => {
|
||||||
const [disable, setDisable] = useState(true);
|
const [disable, setDisable] = useState(true);
|
||||||
|
|||||||
@@ -1,74 +1,74 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
|
|
||||||
import jpg from "@/assets/icons/files/jpg.svg";
|
import jpg from "@/assets/icons/files/jpg.svg";
|
||||||
import png from "@/assets/icons/files/png.svg";
|
import png from "@/assets/icons/files/png.svg";
|
||||||
import pdf from "@/assets/icons/files/pdf.svg";
|
import pdf from "@/assets/icons/files/pdf.svg";
|
||||||
import java from "@/assets/icons/files/java.svg";
|
import java from "@/assets/icons/files/java.svg";
|
||||||
import ai from "@/assets/icons/files/ai.svg";
|
import ai from "@/assets/icons/files/ai.svg";
|
||||||
import avi from "@/assets/icons/files/avi.svg";
|
import avi from "@/assets/icons/files/avi.svg";
|
||||||
import css from "@/assets/icons/files/css.svg";
|
import css from "@/assets/icons/files/css.svg";
|
||||||
import csv from "@/assets/icons/files/csv.svg";
|
import csv from "@/assets/icons/files/csv.svg";
|
||||||
import dbf from "@/assets/icons/files/dbf.svg";
|
import dbf from "@/assets/icons/files/dbf.svg";
|
||||||
import doc from "@/assets/icons/files/doc.svg";
|
import doc from "@/assets/icons/files/doc.svg";
|
||||||
import dwg from "@/assets/icons/files/dwg.svg";
|
import dwg from "@/assets/icons/files/dwg.svg";
|
||||||
import exe from "@/assets/icons/files/exe.svg";
|
import exe from "@/assets/icons/files/exe.svg";
|
||||||
import fla from "@/assets/icons/files/fla.svg";
|
import fla from "@/assets/icons/files/fla.svg";
|
||||||
import flash from "@/assets/icons/files/flash.svg";
|
import flash from "@/assets/icons/files/flash.svg";
|
||||||
import gif from "@/assets/icons/files/gif.svg";
|
import gif from "@/assets/icons/files/gif.svg";
|
||||||
import html from "@/assets/icons/files/html.svg";
|
import html from "@/assets/icons/files/html.svg";
|
||||||
import iso from "@/assets/icons/files/iso.svg";
|
import iso from "@/assets/icons/files/iso.svg";
|
||||||
import javascript from "@/assets/icons/files/javascript.svg";
|
import javascript from "@/assets/icons/files/javascript.svg";
|
||||||
import json from "@/assets/icons/files/json-file.svg";
|
import json from "@/assets/icons/files/json-file.svg";
|
||||||
import mp3 from "@/assets/icons/files/mp3.svg";
|
import mp3 from "@/assets/icons/files/mp3.svg";
|
||||||
import mp4 from "@/assets/icons/files/mp4.svg";
|
import mp4 from "@/assets/icons/files/mp4.svg";
|
||||||
import ppt from "@/assets/icons/files/ppt.svg";
|
import ppt from "@/assets/icons/files/ppt.svg";
|
||||||
import psd from "@/assets/icons/files/psd.svg";
|
import psd from "@/assets/icons/files/psd.svg";
|
||||||
import rtf from "@/assets/icons/files/rtf.svg";
|
import rtf from "@/assets/icons/files/rtf.svg";
|
||||||
import search from "@/assets/icons/files/search.svg";
|
import search from "@/assets/icons/files/search.svg";
|
||||||
import svg from "@/assets/icons/files/svg.svg";
|
import svg from "@/assets/icons/files/svg.svg";
|
||||||
import trash from "@/assets/icons/files/trash.svg";
|
import trash from "@/assets/icons/files/trash.svg";
|
||||||
import trashbox from "@/assets/icons/files/trashbox.svg";
|
import trashbox from "@/assets/icons/files/trashbox.svg";
|
||||||
import txt from "@/assets/icons/files/txt.svg";
|
import txt from "@/assets/icons/files/txt.svg";
|
||||||
import xls from "@/assets/icons/files/xls.svg";
|
import xls from "@/assets/icons/files/xls.svg";
|
||||||
import xml from "@/assets/icons/files/xml.svg";
|
import xml from "@/assets/icons/files/xml.svg";
|
||||||
import zip from "@/assets/icons/files/zip.svg";
|
import zip from "@/assets/icons/files/zip.svg";
|
||||||
import rar from "@/assets/icons/files/rar.svg";
|
import rar from "@/assets/icons/files/rar.svg";
|
||||||
import gz from "@/assets/icons/files/gz.svg";
|
import gz from "@/assets/icons/files/gz.svg";
|
||||||
const FileIcon: any = {
|
const FileIcon: any = {
|
||||||
jpg: jpg,
|
jpg: jpg,
|
||||||
png: png,
|
png: png,
|
||||||
pdf: pdf,
|
pdf: pdf,
|
||||||
java: java,
|
java: java,
|
||||||
ai: ai,
|
ai: ai,
|
||||||
avi: avi,
|
avi: avi,
|
||||||
css: css,
|
css: css,
|
||||||
csv: csv,
|
csv: csv,
|
||||||
dbf: dbf,
|
dbf: dbf,
|
||||||
doc: doc,
|
doc: doc,
|
||||||
docx: doc,
|
docx: doc,
|
||||||
dwg: dwg,
|
dwg: dwg,
|
||||||
exe: exe,
|
exe: exe,
|
||||||
fla: fla,
|
fla: fla,
|
||||||
flash: flash,
|
flash: flash,
|
||||||
gif: gif,
|
gif: gif,
|
||||||
html: html,
|
html: html,
|
||||||
iso: iso,
|
iso: iso,
|
||||||
javascript: javascript,
|
javascript: javascript,
|
||||||
json: json,
|
json: json,
|
||||||
mp3: mp3,
|
mp3: mp3,
|
||||||
mp4: mp4,
|
mp4: mp4,
|
||||||
ppt: ppt,
|
ppt: ppt,
|
||||||
psd: psd,
|
psd: psd,
|
||||||
rtf: rtf,
|
rtf: rtf,
|
||||||
search: search,
|
search: search,
|
||||||
svg: svg,
|
svg: svg,
|
||||||
trash: trash,
|
trash: trash,
|
||||||
trashbox: trashbox,
|
trashbox: trashbox,
|
||||||
txt: txt,
|
txt: txt,
|
||||||
xls: xls,
|
xls: xls,
|
||||||
xml: xml,
|
xml: xml,
|
||||||
zip: zip,
|
zip: zip,
|
||||||
rar: rar,
|
rar: rar,
|
||||||
gz: gz,
|
gz: gz,
|
||||||
};
|
};
|
||||||
export default FileIcon;
|
export default FileIcon;
|
||||||
@@ -1,34 +1,34 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
|
|
||||||
import aliyun from "@/assets/icons/aliyun.svg";
|
import aliyun from "@/assets/icons/aliyun.svg";
|
||||||
import tencent from "@/assets/icons/tencent.svg";
|
import tencent from "@/assets/icons/tencent.svg";
|
||||||
import huawei from "@/assets/icons/huawei.svg";
|
import huawei from "@/assets/icons/huawei.svg";
|
||||||
import baiduyun from "@/assets/icons/baiduyun.svg";
|
import baiduyun from "@/assets/icons/baiduyun.svg";
|
||||||
import minio from "@/assets/icons/minio.svg";
|
import minio from "@/assets/icons/minio.svg";
|
||||||
import jdyun from "@/assets/icons/jdyun.svg";
|
import jdyun from "@/assets/icons/jdyun.svg";
|
||||||
import aws from "@/assets/icons/aws.svg";
|
import aws from "@/assets/icons/aws.svg";
|
||||||
import wangyi from "@/assets/icons/wangyi.svg";
|
import wangyi from "@/assets/icons/wangyi.svg";
|
||||||
import qiniu from "@/assets/icons/qiniu.svg";
|
import qiniu from "@/assets/icons/qiniu.svg";
|
||||||
import upyun from "@/assets/icons/upyun.svg";
|
import upyun from "@/assets/icons/upyun.svg";
|
||||||
import pinanyun from "@/assets/icons/pinanyun.svg";
|
import pinanyun from "@/assets/icons/pinanyun.svg";
|
||||||
import qingyun from "@/assets/icons/qingyun.svg";
|
import qingyun from "@/assets/icons/qingyun.svg";
|
||||||
import ucloud from "@/assets/icons/ucloud.svg";
|
import ucloud from "@/assets/icons/ucloud.svg";
|
||||||
import jinshan from "@/assets/icons/jinshan.svg";
|
import jinshan from "@/assets/icons/jinshan.svg";
|
||||||
|
|
||||||
const StorageIcon: any = {
|
const StorageIcon: any = {
|
||||||
ali: aliyun,
|
ali: aliyun,
|
||||||
tencent: tencent,
|
tencent: tencent,
|
||||||
huawei: huawei,
|
huawei: huawei,
|
||||||
baidu: baiduyun,
|
baidu: baiduyun,
|
||||||
minio: minio,
|
minio: minio,
|
||||||
jd: jdyun,
|
jd: jdyun,
|
||||||
aws: aws,
|
aws: aws,
|
||||||
wangyi: wangyi,
|
wangyi: wangyi,
|
||||||
qiniu: qiniu,
|
qiniu: qiniu,
|
||||||
up: upyun,
|
up: upyun,
|
||||||
pinan: pinanyun,
|
pinan: pinanyun,
|
||||||
qingyun: qingyun,
|
qingyun: qingyun,
|
||||||
ucloud: ucloud,
|
ucloud: ucloud,
|
||||||
jinshan: jinshan,
|
jinshan: jinshan,
|
||||||
};
|
};
|
||||||
export default StorageIcon;
|
export default StorageIcon;
|
||||||
@@ -1,45 +1,44 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"esModuleInterop": true,
|
"esModuleInterop": true,
|
||||||
"target": "ES2020",
|
"target": "ES2020",
|
||||||
"useDefineForClassFields": true,
|
"useDefineForClassFields": true,
|
||||||
"lib": [
|
"lib": [
|
||||||
"ES2020",
|
"ES2020",
|
||||||
"DOM",
|
"DOM",
|
||||||
"DOM.Iterable"
|
"DOM.Iterable"
|
||||||
],
|
],
|
||||||
"module": "ESNext",
|
"module": "ESNext",
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
/* Bundler mode */
|
/* Bundler mode */
|
||||||
"moduleResolution": "bundler",
|
"moduleResolution": "bundler",
|
||||||
"allowImportingTsExtensions": true,
|
"allowImportingTsExtensions": true,
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"noEmit": true,
|
"noEmit": true,
|
||||||
"experimentalDecorators": true,
|
"experimentalDecorators": true,
|
||||||
"jsx": "react-jsx",
|
"jsx": "react-jsx",
|
||||||
/* Linting */
|
/* Linting */
|
||||||
"strict": true,
|
"strict": true,
|
||||||
"noUnusedLocals": true,
|
"noUnusedLocals": true,
|
||||||
"noUnusedParameters": true,
|
"noUnusedParameters": true,
|
||||||
"noFallthroughCasesInSwitch": true,
|
"noFallthroughCasesInSwitch": true,
|
||||||
"baseUrl": "./",
|
"baseUrl": "./",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": [
|
"@/*": [
|
||||||
"./src/*"
|
"./src/*"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"src/**/*.ts",
|
"src/**/*.ts",
|
||||||
"src/**/*.d.ts",
|
"src/**/*.d.ts",
|
||||||
"src/**/*.tsx",
|
"src/**/*.tsx",
|
||||||
"types/*.d.ts",
|
"types/*.d.ts",
|
||||||
"vite.config.ts"
|
],
|
||||||
],
|
"references": [
|
||||||
"references": [
|
{
|
||||||
{
|
"path": "./tsconfig.node.json"
|
||||||
"path": "./tsconfig.node.json"
|
}
|
||||||
}
|
]
|
||||||
]
|
}
|
||||||
}
|
|
||||||
|
|||||||
312
vite.config.ts
312
vite.config.ts
@@ -1,149 +1,163 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
|
|
||||||
import { defineConfig, loadEnv } from "vite";
|
import { defineConfig, loadEnv, UserConfig } from "vite";
|
||||||
import react from "@vitejs/plugin-react";
|
import react from "@vitejs/plugin-react";
|
||||||
import { resolve } from "path";
|
import { resolve } from "path";
|
||||||
import viteCompression from "vite-plugin-compression";
|
import viteCompression from "vite-plugin-compression";
|
||||||
import { createHtmlPlugin } from "vite-plugin-html";
|
import { createHtmlPlugin } from "vite-plugin-html";
|
||||||
import legacy from "@vitejs/plugin-legacy";
|
import legacy from "@vitejs/plugin-legacy";
|
||||||
import postcssPresetEnv from "postcss-preset-env";
|
import postcssPresetEnv from "postcss-preset-env";
|
||||||
import autoprefixer from "autoprefixer";
|
import autoprefixer from "autoprefixer";
|
||||||
import { nodePolyfills } from "vite-plugin-node-polyfills";
|
import { nodePolyfills } from "vite-plugin-node-polyfills";
|
||||||
import svgr from "vite-plugin-svgr";
|
import svgr from "vite-plugin-svgr";
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
export default defineConfig(({ mode }): any => {
|
||||||
// @ts-expect-error
|
const env = loadEnv(mode, process.cwd());
|
||||||
//配置参数
|
return {
|
||||||
export default defineConfig(({ mode }) => {
|
base: "/",
|
||||||
const env = loadEnv(mode, process.cwd());
|
plugins: [
|
||||||
return {
|
react(),
|
||||||
base: "/",
|
nodePolyfills(),
|
||||||
plugins: [
|
svgr({ svgrOptions: { icon: true } }),
|
||||||
react(),
|
legacy({
|
||||||
nodePolyfills(),
|
targets: [
|
||||||
svgr({ svgrOptions: { icon: true } }),
|
"ie >= 11",
|
||||||
legacy({
|
"chrome 52",
|
||||||
targets: [
|
"Chrome > 70",
|
||||||
"ie >= 11",
|
"Safari 12.1",
|
||||||
"chrome 52",
|
"last 2 versions and since 2018 and > 0.5%",
|
||||||
"Chrome > 70",
|
"iOS >= 9",
|
||||||
"Safari 12.1",
|
"Android >= 4.4",
|
||||||
"last 2 versions and since 2018 and > 0.5%",
|
"last 2 versions",
|
||||||
"iOS >= 9",
|
],
|
||||||
"Android >= 4.4",
|
additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
|
||||||
"last 2 versions",
|
renderLegacyChunks: true,
|
||||||
],
|
polyfills: [
|
||||||
additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
|
"es.promise.all-settled",
|
||||||
renderLegacyChunks: true,
|
"es.symbol",
|
||||||
polyfills: [
|
"es.array.filter",
|
||||||
"es.promise.all-settled",
|
"es.promise",
|
||||||
"es.symbol",
|
"es.promise.finally",
|
||||||
"es.array.filter",
|
"es/map",
|
||||||
"es.promise",
|
"es/set",
|
||||||
"es.promise.finally",
|
"es.array.for-each",
|
||||||
"es/map",
|
"es.object.define-properties",
|
||||||
"es/set",
|
"es.object.define-property",
|
||||||
"es.array.for-each",
|
"es.object.get-own-property-descriptor",
|
||||||
"es.object.define-properties",
|
"es.object.get-own-property-descriptors",
|
||||||
"es.object.define-property",
|
"es.object.keys",
|
||||||
"es.object.get-own-property-descriptor",
|
"es.object.to-string",
|
||||||
"es.object.get-own-property-descriptors",
|
"web.dom-collections.for-each",
|
||||||
"es.object.keys",
|
"esnext.global-this",
|
||||||
"es.object.to-string",
|
"esnext.string.match-all",
|
||||||
"web.dom-collections.for-each",
|
],
|
||||||
"esnext.global-this",
|
modernPolyfills: ["es.promise.all-settled", "es.object.entries"],
|
||||||
"esnext.string.match-all",
|
}),
|
||||||
],
|
viteCompression({
|
||||||
modernPolyfills: ["es.promise.all-settled", "es.object.entries"],
|
verbose: true, // 是否在控制台中输出压缩结果
|
||||||
}),
|
disable: false,
|
||||||
viteCompression({
|
threshold: 10240, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反
|
||||||
verbose: true, // 是否在控制台中输出压缩结果
|
algorithm: "gzip", // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
|
||||||
disable: false,
|
ext: ".gz",
|
||||||
threshold: 10240, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反
|
deleteOriginFile: true, // 源文件压缩后是否删除
|
||||||
algorithm: "gzip", // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
|
}),
|
||||||
ext: ".gz",
|
createHtmlPlugin({
|
||||||
deleteOriginFile: true, // 源文件压缩后是否删除
|
minify: true,
|
||||||
}),
|
/**
|
||||||
createHtmlPlugin({
|
* 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除
|
||||||
minify: true,
|
* @default src/main.ts
|
||||||
/**
|
*/
|
||||||
* 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除
|
entry: "src/main.tsx",
|
||||||
* @default src/main.ts
|
/**
|
||||||
*/
|
* 如果你想将 `index.html`存放在指定文件夹，可以修改它，否则不需要配置
|
||||||
entry: "src/main.tsx",
|
* @default index.html
|
||||||
/**
|
*/
|
||||||
* 如果你想将 `index.html`存放在指定文件夹，可以修改它，否则不需要配置
|
template: "index.html",
|
||||||
* @default index.html
|
/**
|
||||||
*/
|
* 需要注入 index.html ejs 模版的数据
|
||||||
template: "index.html",
|
*/
|
||||||
/**
|
inject: {
|
||||||
* 需要注入 index.html ejs 模版的数据
|
data: {
|
||||||
*/
|
title: env.VITE_TITLE_NAME,
|
||||||
inject: {
|
},
|
||||||
data: {
|
},
|
||||||
title: env.VITE_TITLE_NAME,
|
}),
|
||||||
},
|
],
|
||||||
},
|
resolve: {
|
||||||
}),
|
alias: {
|
||||||
],
|
"@": resolve(__dirname, "src"),
|
||||||
resolve: {
|
},
|
||||||
alias: {
|
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"], // 默认值，这些文件引入时不需要写后缀
|
||||||
"@": resolve(__dirname, "src"),
|
},
|
||||||
},
|
css: {
|
||||||
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"], // 默认值，这些文件引入时不需要写后缀
|
modules: {
|
||||||
},
|
// 一般我们可以通过 generateScopedName 属性来对生成的类名进行自定义
|
||||||
css: {
|
// 其中，name 表示当前文件名，local 表示类名
|
||||||
modules: {
|
generateScopedName: "[name]__[local]___[hash:base64:5]",
|
||||||
// 一般我们可以通过 generateScopedName 属性来对生成的类名进行自定义
|
},
|
||||||
// 其中，name 表示当前文件名，local 表示类名
|
postcss: {
|
||||||
generateScopedName: "[name]__[local]___[hash:base64:5]",
|
plugins: [
|
||||||
},
|
postcssPresetEnv(),
|
||||||
postcss: {
|
autoprefixer({
|
||||||
plugins: [
|
// 自动添加前缀
|
||||||
postcssPresetEnv(),
|
overrideBrowserslist: [
|
||||||
autoprefixer({
|
"Android 4.1",
|
||||||
// 自动添加前缀
|
"iOS 7.1",
|
||||||
overrideBrowserslist: [
|
"Chrome > 31",
|
||||||
"Android 4.1",
|
"ff > 31",
|
||||||
"iOS 7.1",
|
"ie >= 8",
|
||||||
"Chrome > 31",
|
],
|
||||||
"ff > 31",
|
}),
|
||||||
"ie >= 8",
|
],
|
||||||
],
|
},
|
||||||
}),
|
preprocessorOptions: {
|
||||||
],
|
less: {
|
||||||
},
|
javascriptEnabled: true,
|
||||||
preprocessorOptions: {
|
},
|
||||||
less: {
|
},
|
||||||
javascriptEnabled: true,
|
},
|
||||||
},
|
esbuild: {
|
||||||
},
|
// drop: ["console", "debugger"],
|
||||||
},
|
},
|
||||||
esbuild: {
|
build: {
|
||||||
// drop: ["console", "debugger"],
|
outDir: "dist", // 指定输出路径
|
||||||
},
|
assetsDir: "assets", // 指定生成静态文件目录
|
||||||
build: {
|
assetsInlineLimit: "4096", // 小于此阈值的导入或引用资源将内联为 base64 编码
|
||||||
outDir: "dist", // 指定输出路径
|
cssCodeSplit: true, // 启用 CSS 代码拆分
|
||||||
assetsDir: "assets", // 指定生成静态文件目录
|
sourcemap: false, // 构建后是否生成 source map 文件
|
||||||
assetsInlineLimit: "4096", // 小于此阈值的导入或引用资源将内联为 base64 编码
|
minify: "esbuild", // 指定使用哪种混淆器
|
||||||
cssCodeSplit: true, // 启用 CSS 代码拆分
|
write: true, // 启用将构建后的文件写入磁盘
|
||||||
sourcemap: false, // 构建后是否生成 source map 文件
|
emptyOutDir: true, // 构建时清空该目录
|
||||||
minify: "esbuild", // 指定使用哪种混淆器
|
brotliSize: true, // 启用 brotli 压缩大小报告
|
||||||
write: true, // 启用将构建后的文件写入磁盘
|
chunkSizeWarningLimit: 4000, // chunk 大小警告的限制
|
||||||
emptyOutDir: true, // 构建时清空该目录
|
watch: null, // 设置为 {} 则会启用 rollup 的监听器
|
||||||
brotliSize: true, // 启用 brotli 压缩大小报告
|
rollupOptions: {
|
||||||
chunkSizeWarningLimit: 2000, // chunk 大小警告的限制
|
output: {
|
||||||
watch: null, // 设置为 {} 则会启用 rollup 的监听器
|
// manualChunks 配置
|
||||||
},
|
manualChunks: {
|
||||||
server: {
|
// 将 React 相关库打包成单独的 chunk 中
|
||||||
proxy: {
|
"react-vendor": ["react", "react-dom"],
|
||||||
[env.VITE_APP_BASE_API]: {
|
// 将组件库的代码打包
|
||||||
//后端接口的baseurl
|
library: [
|
||||||
target: env.VITE_API_BASE_URL,
|
"antd",
|
||||||
//是否允许跨域
|
"@ant-design/icons",
|
||||||
changeOrigin: true,
|
"@ant-design/pro-components",
|
||||||
rewrite: (path) => path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), ""),
|
"@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