From 38f27bda4b6a6ce07cd96ddbb1539e65854f1bdb Mon Sep 17 00:00:00 2001 From: chizhehui Date: Mon, 22 Jul 2024 13:26:17 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E7=B3=BB=E7=BB=9F?= =?UTF-8?q?=E7=9B=91=E6=8E=A7=E7=9A=84=E9=A1=B5=E9=9D=A2=E8=AE=BE=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/aliyun.svg | 6 + src/assets/icons/bucket.svg | 9 + src/assets/icons/eye-outline.svg | 5 + src/assets/icons/file.svg | 9 + src/assets/icons/flux.svg | 5 + src/assets/icons/share.svg | 7 + src/assets/icons/standard_directory.svg | 9 + src/assets/icons/storage.svg | 5 + src/assets/icons/user.svg | 11 + src/assets/icons/userInfo.svg | 5 + src/pages/Home/index.less | 3 - src/pages/Home/index.tsx | 34 ++- src/pages/Redis/index.tsx | 287 ++++++++++++++++++++++++ 13 files changed, 387 insertions(+), 8 deletions(-) create mode 100644 src/assets/icons/aliyun.svg create mode 100644 src/assets/icons/bucket.svg create mode 100644 src/assets/icons/eye-outline.svg create mode 100644 src/assets/icons/file.svg create mode 100644 src/assets/icons/flux.svg create mode 100644 src/assets/icons/share.svg create mode 100644 src/assets/icons/standard_directory.svg create mode 100644 src/assets/icons/storage.svg create mode 100644 src/assets/icons/user.svg create mode 100644 src/assets/icons/userInfo.svg delete mode 100644 src/pages/Home/index.less create mode 100644 src/pages/Redis/index.tsx diff --git a/src/assets/icons/aliyun.svg b/src/assets/icons/aliyun.svg new file mode 100644 index 0000000..5097517 --- /dev/null +++ b/src/assets/icons/aliyun.svg @@ -0,0 +1,6 @@ + + + + diff --git a/src/assets/icons/bucket.svg b/src/assets/icons/bucket.svg new file mode 100644 index 0000000..47e1eae --- /dev/null +++ b/src/assets/icons/bucket.svg @@ -0,0 +1,9 @@ + + + + + diff --git a/src/assets/icons/eye-outline.svg b/src/assets/icons/eye-outline.svg new file mode 100644 index 0000000..caa0f2c --- /dev/null +++ b/src/assets/icons/eye-outline.svg @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/src/assets/icons/file.svg b/src/assets/icons/file.svg new file mode 100644 index 0000000..fe9d94c --- /dev/null +++ b/src/assets/icons/file.svg @@ -0,0 +1,9 @@ + + + + + diff --git a/src/assets/icons/flux.svg b/src/assets/icons/flux.svg new file mode 100644 index 0000000..7b303ea --- /dev/null +++ b/src/assets/icons/flux.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/assets/icons/share.svg b/src/assets/icons/share.svg new file mode 100644 index 0000000..24d11ba --- /dev/null +++ b/src/assets/icons/share.svg @@ -0,0 +1,7 @@ + + + + diff --git a/src/assets/icons/standard_directory.svg b/src/assets/icons/standard_directory.svg new file mode 100644 index 0000000..b690349 --- /dev/null +++ b/src/assets/icons/standard_directory.svg @@ -0,0 +1,9 @@ + + + + + diff --git a/src/assets/icons/storage.svg b/src/assets/icons/storage.svg new file mode 100644 index 0000000..ab0bc64 --- /dev/null +++ b/src/assets/icons/storage.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/assets/icons/user.svg b/src/assets/icons/user.svg new file mode 100644 index 0000000..7a0a1be --- /dev/null +++ b/src/assets/icons/user.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/src/assets/icons/userInfo.svg b/src/assets/icons/userInfo.svg new file mode 100644 index 0000000..f8ec561 --- /dev/null +++ b/src/assets/icons/userInfo.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/pages/Home/index.less b/src/pages/Home/index.less deleted file mode 100644 index 06fdb67..0000000 --- a/src/pages/Home/index.less +++ /dev/null @@ -1,3 +0,0 @@ -.container { - padding-top: 80px; -} diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 327578a..b330610 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -4,7 +4,6 @@ import { Avatar, Card, Skeleton, Space, Tag } from 'antd'; import Meta from 'antd/es/card/Meta'; import ReactECharts from 'echarts-for-react'; import { FunctionComponent, useEffect, useState } from 'react'; -import styles from './index.module.less'; import aliyun from '@/assets/icons/aliyun.svg'; import eye from '@/assets/icons/eye-outline.svg'; @@ -12,8 +11,8 @@ import share from '@/assets/icons/share.svg'; import standard_directory from '@/assets/icons/standard_directory.svg'; import userInfo from '@/assets/icons/userInfo.svg'; // import * as echarts from "echarts/core"; - import 'react-calendar-heatmap/dist/styles.css'; + const defaultData = [ { id: '1', @@ -196,9 +195,34 @@ const MainHome: FunctionComponent = () => { }, []); return ( <> -
-
-
+
+
+
{ + const [loading, setLoading] = useState(true); + const [responsive, setResponsive] = useState(false); + 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: [ + '2024-02-01', + '2024-03-01', + '2024-04-01', + '2024-05-01', + '2024-06-01', + '2024-07-01', + ], + 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: [58, 90, 22, 13, 66, 28], + 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: [12, 56, 11, 22, 52, 13], + 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, + }, + ], + }; + + useEffect(() => { + setTimeout(() => { + setLoading(false); + }, 2000); + }, []); + return ( + <> +
+ + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + + + + +
+
+
+
+ { + setResponsive(offset.width < 596); + }} + > + + + + + + ), + }} + /> + + ), + }} + /> + + + + + + + + } + /> + + + } + /> + + +
+ + ); +}; +export default MainHome;