From 7f2bd825a7cbc07689c045ec8876e092e39d68bd Mon Sep 17 00:00:00 2001 From: SUN <350916525@qq.com> Date: Sun, 31 Mar 2024 16:19:50 +0800 Subject: [PATCH] update the UI style --- eventmesh-dashboard-view/public/index.html | 2 +- eventmesh-dashboard-view/src/App.tsx | 20 ++- eventmesh-dashboard-view/src/index.css | 13 -- eventmesh-dashboard-view/src/index.tsx | 1 - .../src/routes/RootLayout.tsx | 2 +- .../src/routes/navigation/Navigation.tsx | 22 ++- .../src/routes/navigation/NavigationItem.tsx | 31 +++- .../src/routes/topic/Topic.tsx | 2 +- .../routes/topic/stats/AbnormalTopicCount.tsx | 61 +++---- .../src/routes/topic/stats/Stats.tsx | 150 +++++++++--------- .../src/routes/topic/stats/StatsChart.tsx | 128 ++++++++++++--- .../src/routes/topic/stats/TopicCount.tsx | 54 ++++--- .../src/routes/topic/topic-list/TopicList.tsx | 46 +++--- 13 files changed, 314 insertions(+), 218 deletions(-) delete mode 100644 eventmesh-dashboard-view/src/index.css diff --git a/eventmesh-dashboard-view/public/index.html b/eventmesh-dashboard-view/public/index.html index aa069f27..d99ea62d 100644 --- a/eventmesh-dashboard-view/public/index.html +++ b/eventmesh-dashboard-view/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + Admin | Eventmesh diff --git a/eventmesh-dashboard-view/src/App.tsx b/eventmesh-dashboard-view/src/App.tsx index b3a6fd07..fa5dc7a7 100644 --- a/eventmesh-dashboard-view/src/App.tsx +++ b/eventmesh-dashboard-view/src/App.tsx @@ -1,6 +1,15 @@ import React from 'react' import { createTheme, ThemeProvider, CssBaseline } from '@mui/material' import AppRoutes from './routes/Routes' +import GlobalStyles from '@mui/material/GlobalStyles' + +const inputGlobalStyles = ( + +) function App() { const theme = React.useMemo( @@ -8,12 +17,14 @@ function App() { createTheme({ palette: { primary: { - main: '#1f95fc' - } + main: '#43497a' + }, + background: {} }, typography: { - fontSize: 14 - } + fontSize: 12 + }, + }), [] ) // [prefersDarkMode] @@ -21,6 +32,7 @@ function App() { return ( + {inputGlobalStyles} ) diff --git a/eventmesh-dashboard-view/src/index.css b/eventmesh-dashboard-view/src/index.css deleted file mode 100644 index ec2585e8..00000000 --- a/eventmesh-dashboard-view/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/eventmesh-dashboard-view/src/index.tsx b/eventmesh-dashboard-view/src/index.tsx index efe2c924..362d8c7e 100644 --- a/eventmesh-dashboard-view/src/index.tsx +++ b/eventmesh-dashboard-view/src/index.tsx @@ -1,6 +1,5 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import './index.css' import App from './App' import reportWebVitals from './reportWebVitals' import { BrowserRouter } from 'react-router-dom' diff --git a/eventmesh-dashboard-view/src/routes/RootLayout.tsx b/eventmesh-dashboard-view/src/routes/RootLayout.tsx index d7bc0aff..11d20938 100644 --- a/eventmesh-dashboard-view/src/routes/RootLayout.tsx +++ b/eventmesh-dashboard-view/src/routes/RootLayout.tsx @@ -15,7 +15,7 @@ const RootLayout = () => { bgcolor: grey[100] }}> - + diff --git a/eventmesh-dashboard-view/src/routes/navigation/Navigation.tsx b/eventmesh-dashboard-view/src/routes/navigation/Navigation.tsx index ac389322..b5054009 100644 --- a/eventmesh-dashboard-view/src/routes/navigation/Navigation.tsx +++ b/eventmesh-dashboard-view/src/routes/navigation/Navigation.tsx @@ -79,15 +79,15 @@ const Navigation = forwardRef( ) return ( - + - + ( justifyContent="space-between" alignItems="center" sx={{ pl: 2, pr: 2, mt: 1, mb: 1 }}> - + General @@ -109,7 +113,7 @@ const Navigation = forwardRef( - + {generalMenus.map((item) => { return ( ( justifyContent="space-between" alignItems="center" sx={{ pl: 2, pr: 2, mt: 1, mb: 1 }}> - + System - + {DefSystemMenus.map((item) => { return ( ( ( sx={{ height: 15, fontSize: 13, - bgcolor: active ? 'white' : grey[200] + bgcolor: active ? grey[200] : 'white' }} size="small" color="default" diff --git a/eventmesh-dashboard-view/src/routes/topic/Topic.tsx b/eventmesh-dashboard-view/src/routes/topic/Topic.tsx index 55665337..e05c0dfe 100644 --- a/eventmesh-dashboard-view/src/routes/topic/Topic.tsx +++ b/eventmesh-dashboard-view/src/routes/topic/Topic.tsx @@ -9,7 +9,7 @@ interface TopicProps extends BoxProps {} const Topic = forwardRef(({ ...props }, ref) => { return ( - + diff --git a/eventmesh-dashboard-view/src/routes/topic/stats/AbnormalTopicCount.tsx b/eventmesh-dashboard-view/src/routes/topic/stats/AbnormalTopicCount.tsx index 0c413cd7..07cae351 100644 --- a/eventmesh-dashboard-view/src/routes/topic/stats/AbnormalTopicCount.tsx +++ b/eventmesh-dashboard-view/src/routes/topic/stats/AbnormalTopicCount.tsx @@ -1,6 +1,6 @@ import React, { forwardRef } from 'react' import { Paper, PaperProps, Stack, Typography, Button } from '@mui/material' -import { red } from '@mui/material/colors' +import { grey } from '@mui/material/colors' interface AbnormalTopicCountProps extends PaperProps {} @@ -9,48 +9,35 @@ const AbnormalTopicCount = forwardRef( return ( - - - 异常状态 Topic 数量 - - - - - - 2 - - + + 异常状态 Topic 数量 + + + + 5 + ) } diff --git a/eventmesh-dashboard-view/src/routes/topic/stats/Stats.tsx b/eventmesh-dashboard-view/src/routes/topic/stats/Stats.tsx index ad0e316e..57ad7206 100644 --- a/eventmesh-dashboard-view/src/routes/topic/stats/Stats.tsx +++ b/eventmesh-dashboard-view/src/routes/topic/stats/Stats.tsx @@ -1,17 +1,10 @@ import React, { forwardRef, useState } from 'react' -import { - Stack, - StackProps, - Box, - Select, - MenuItem, - Paper, - Grid -} from '@mui/material' +import { Stack, StackProps, Select, MenuItem, Grid, Box } from '@mui/material' import TopicCount from './TopicCount' import AbnormalTopicCount from './AbnormalTopicCount' import { Icons } from '../../../assets/icons' import StatsChart from './StatsChart' +import { grey } from '@mui/material/colors' enum TimeOptionEnum { LatestHour = 'LATEST_HOUR' @@ -31,77 +24,82 @@ const Stats = forwardRef(({ ...props }, ref) => { }) return ( - - - - - - - - - - - + + + + + + + + + + - - + + + + - + - - - - - - - - - - - + + - + + + + + + + + + + + + ) }) diff --git a/eventmesh-dashboard-view/src/routes/topic/stats/StatsChart.tsx b/eventmesh-dashboard-view/src/routes/topic/stats/StatsChart.tsx index fb89be2b..cde2c664 100644 --- a/eventmesh-dashboard-view/src/routes/topic/stats/StatsChart.tsx +++ b/eventmesh-dashboard-view/src/routes/topic/stats/StatsChart.tsx @@ -1,44 +1,71 @@ import React, { forwardRef, useRef, useEffect } from 'react' -import { Box, BoxProps } from '@mui/material' +import { Box, BoxProps, Paper } from '@mui/material' import echarts from '../../../utils/chart' +import { grey } from '@mui/material/colors' -interface StatsChartProps extends BoxProps {} +interface StatsChartProps extends BoxProps { + title?: string + small?: boolean +} const StatsChart = forwardRef( - ({ ...props }, ref) => { + ({ title, small = false, sx, ...props }, ref) => { const chartElemRef = useRef(null) const chartInsRef = useRef(null) useEffect(() => { if (!chartInsRef.current) { const chartIns = echarts.init(chartElemRef.current) - const chartOptions = getChartOptions() + const chartOptions = small + ? getChartOptionsSmall(title) + : getChartOptions(title) chartIns.setOption(chartOptions) chartInsRef.current = chartIns } }, []) - return + return ( + + + + ) } ) StatsChart.displayName = 'StatsChart' export default StatsChart -const getChartOptions = () => { +const getChartOptionsSmall = (title?: string) => { return { - grid: { + title: { + text: title, top: 10, - left: 40, - right: 10, - bottom: 20 + left: 10, + textStyle: { + fontSize: 12, + color: grey[600] + } + }, + grid: { + top: 50, + left: 50, + right: 20, + bottom: 30 }, xAxis: { type: 'category', splitLine: { show: true, lineStyle: { - type: 'dashed' + type: 'dashed', + color: grey[200] } }, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] @@ -48,30 +75,79 @@ const getChartOptions = () => { splitLine: { show: true, lineStyle: { - type: 'dashed' + type: 'dashed', + color: grey[200] } + }, + axisTick: { + color: grey[200] + } + }, + series: [ + { + data: [20, 32, 51, 934, 190, 130, 320], + type: 'line', + smooth: true, + showSymbol: false, + lineStyle: { + width: 2, + color: '#17c8eb' + } + } + ] + } +} + +const getChartOptions = (title?: string) => { + return { + title: { + text: title, + top: 15, + left: 10, + textStyle: { + fontSize: 12, + color: grey[600] + } + }, + grid: { + top: 60, + left: 60, + right: 40, + bottom: 40 + }, + xAxis: { + type: 'category', + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: grey[200] + } + }, + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }, + yAxis: { + type: 'value', + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: grey[200] + } + }, + axisTick: { + color: grey[200] } }, series: [ { - data: [820, 932, 901, 934, 1290, 1330, 1320], + data: [20, 32, 51, 934, 190, 130, 320], type: 'line', smooth: true, showSymbol: false, lineStyle: { - width: 0 - }, - areaStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: 'rgb(92, 216, 244)' - }, - { - offset: 1, - color: 'rgb(115, 189, 255)' - } - ]) + width: 2, + color: '#17c8eb' } } ] diff --git a/eventmesh-dashboard-view/src/routes/topic/stats/TopicCount.tsx b/eventmesh-dashboard-view/src/routes/topic/stats/TopicCount.tsx index f3dc06ee..ed706ba1 100644 --- a/eventmesh-dashboard-view/src/routes/topic/stats/TopicCount.tsx +++ b/eventmesh-dashboard-view/src/routes/topic/stats/TopicCount.tsx @@ -1,6 +1,6 @@ import React, { forwardRef } from 'react' -import { Paper, PaperProps, Stack, Typography } from '@mui/material' -import { Icons } from '../../../assets/icons' +import { Paper, PaperProps, Stack, Typography, Button } from '@mui/material' +import { grey } from '@mui/material/colors' interface TopicCountProps extends PaperProps {} @@ -9,36 +9,38 @@ const TopicCount = forwardRef( return ( - - - - Topic 总数量 - - - 5 - - + + Topic 总数量 + + + + + 5 + ) } diff --git a/eventmesh-dashboard-view/src/routes/topic/topic-list/TopicList.tsx b/eventmesh-dashboard-view/src/routes/topic/topic-list/TopicList.tsx index 77f8e363..5c136e3f 100644 --- a/eventmesh-dashboard-view/src/routes/topic/topic-list/TopicList.tsx +++ b/eventmesh-dashboard-view/src/routes/topic/topic-list/TopicList.tsx @@ -8,37 +8,43 @@ interface TopicListProps extends StackProps {} const TopicList = forwardRef( ({ ...props }, ref) => { return ( - + - + - - - - + + + ) } )