[ISSUE #79] Change to the new UI style (#80)

* added view code * added navigation interaction * added empty pages * add topic statistics ui * complete topic page style * update the UI style --------- Co-authored-by: SUN <350916525@qq.com>
apache · Mar 31, 2024 · 7430ee7 · 7430ee7
1 parent 13eae3f
commit 7430ee7
Show file tree

Hide file tree

Showing 12 changed files with 314 additions and 205 deletions.
diff --git 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`.
     -->
-    <title>React App</title>
+    <title>Admin | Eventmesh</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/eventmesh-dashboard-view/src/App.tsx b/eventmesh-dashboard-view/src/App.tsx
@@ -1,26 +1,38 @@
 import React from 'react'
 import { createTheme, ThemeProvider, CssBaseline } from '@mui/material'
 import AppRoutes from './routes/Routes'
+import GlobalStyles from '@mui/material/GlobalStyles'
+
+const inputGlobalStyles = (
+  <GlobalStyles
+    styles={{
+      backgroundColor: '#f9fafb'
+    }}
+  />
+)
 
 function App() {
   const theme = React.useMemo(
     () =>
       createTheme({
         palette: {
           primary: {
-            main: '#1f95fc'
-          }
+            main: '#43497a'
+          },
+          background: {}
         },
         typography: {
-          fontSize: 14
-        }
+          fontSize: 12
+        },
+
       }),
     []
   ) // [prefersDarkMode]
 
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
+      {inputGlobalStyles}
       <AppRoutes />
     </ThemeProvider>
   )

diff --git 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
@@ -15,7 +15,7 @@ const RootLayout = () => {
         bgcolor: grey[100]
       }}>
       <Navigation />
-      <Box sx={{ flexGrow: 1, overflow: 'hidden' }}>
+      <Box sx={{ flexGrow: 1, pl: 4, overflow: 'hidden' }}>
         <Outlet />
       </Box>
     </Stack>

diff --git a/eventmesh-dashboard-view/src/routes/navigation/Navigation.tsx b/eventmesh-dashboard-view/src/routes/navigation/Navigation.tsx
@@ -79,23 +79,27 @@ const Navigation = forwardRef<typeof Stack, NavigationProps>(
     )
 
     return (
-      <Stack sx={{ width: 240, boxShadow: 1, bgcolor: 'white' }}>
+      <Stack sx={{ width: 260, px: 3 }}>
         <Box
           sx={{
-            height: 120,
+            height: 80,
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'centers'
           }}>
-          <Icons.EventMeshLogo style={{ width: '80%' }} />
+          <Icons.EventMeshLogo style={{ width: '60%' }} />
         </Box>
         <Divider />
         <Stack
           direction="row"
           justifyContent="space-between"
           alignItems="center"
           sx={{ pl: 2, pr: 2, mt: 1, mb: 1 }}>
-          <Typography variant="overline" fontSize={12} color={grey[600]}>
+          <Typography
+            variant="overline"
+            fontSize={12}
+            fontWeight="bold"
+            color={grey[600]}>
             General
           </Typography>
 
@@ -109,7 +113,7 @@ const Navigation = forwardRef<typeof Stack, NavigationProps>(
             </Typography>
           </Stack>
         </Stack>
-        <Stack sx={{ pl: 2, pr: 2 }} spacing={0.5}>
+        <Stack sx={{ pl: 2, pr: 2 }} spacing={1}>
           {generalMenus.map((item) => {
             return (
               <NavigationItem
@@ -132,11 +136,15 @@ const Navigation = forwardRef<typeof Stack, NavigationProps>(
           justifyContent="space-between"
           alignItems="center"
           sx={{ pl: 2, pr: 2, mt: 1, mb: 1 }}>
-          <Typography variant="overline" fontSize={12} color={grey[600]}>
+          <Typography
+            variant="overline"
+            fontSize={12}
+            fontWeight="bold"
+            color={grey[600]}>
             System
           </Typography>
         </Stack>
-        <Stack sx={{ pl: 2, pr: 2 }} spacing={0.5}>
+        <Stack sx={{ pl: 2, pr: 2 }} spacing={1}>
           {DefSystemMenus.map((item) => {
             return (
               <NavigationItem

diff --git a/eventmesh-dashboard-view/src/routes/navigation/NavigationItem.tsx b/eventmesh-dashboard-view/src/routes/navigation/NavigationItem.tsx
@@ -6,16 +6,36 @@ import { grey } from '@mui/material/colors'
 const NavButton = styled(Button)({
   boxShadow: 'none',
   width: '100%',
+  paddingLeft: 15,
+  paddingRight: 15,
+  paddingTop: 8,
+  paddingBottom: 8,
+  borderRadius: 8,
   textTransform: 'none',
-  fontSize: 15,
-  color: grey[800],
+  color: '#43497a',
   justifyContent: 'flex-start',
 
   '& .MuiButton-startIcon': {
+    padding: 10,
     marginRight: 15,
-    color: 'inherit'
+    color: 'inherit',
+    backgroundColor: 'white',
+    borderRadius: 8,
+    boxShadow: '1px 1px 5px 1px rgba(0,0,0,0.05)'
+  },
+
+  '&.active': {
+    backgroundColor: 'white',
+    boxShadow: '2px 2px 20px 5px rgba(0,0,0,0.05)',
+
+    '& .MuiButton-startIcon': {
+      boxShadow: 'none',
+      color: 'white',
+      backgroundColor: '#17c8eb'
+    }
   }
 })
+
 interface NavigationItemProps extends ButtonProps {
   icon: React.ReactNode
   text: string
@@ -29,7 +49,8 @@ const NavigationItem = forwardRef<typeof NavButton, NavigationItemProps>(
       <NavButton
         startIcon={icon}
         variant={active ? 'contained' : 'text'}
-        sx={{ color: active ? 'white' : 'inherit' }}
+        className={active ? 'active' : ''}
+        // sx={{ color: active ? 'white' : 'inherit' }}
         onClick={onClick}>
         <Stack
           sx={{ width: 1 }}
@@ -42,7 +63,7 @@ const NavigationItem = forwardRef<typeof NavButton, NavigationItemProps>(
               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
@@ -9,7 +9,7 @@ interface TopicProps extends BoxProps {}
 const Topic = forwardRef<typeof Box, TopicProps>(({ ...props }, ref) => {
   return (
     <Page>
-      <Stack sx={{ width: 1, height: 1, p: 2 }} spacing={1}>
+      <Stack sx={{ width: 1, height: 1, p: 2 }} spacing={3}>
         <Stats />
         <TopicList />
       </Stack>

diff --git 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<typeof Paper, AbnormalTopicCountProps>(
     return (
       <Paper
         sx={{
-          height: 80,
-          pt: 1,
-          pb: 1,
-          pr: {
-            sm: 1,
-            md: 3
-          },
-          pl: {
-            sm: 1,
-            md: 3
-          }
+          width: 1,
+          py: 1,
+          px: 2,
+          borderRadius: 4,
+          boxShadow: '2px 2px 40px 2px rgba(0,0,0,.05)',
+          display: 'flex',
+          flexDirection: 'column'
         }}>
         <Stack
           direction="row"
           justifyContent="space-between"
           alignItems="center">
-          <Stack alignItems="flex-start">
-            <Typography paragraph variant="caption" sx={{ m: 0 }}>
-              异常状态 Topic 数量
-            </Typography>
-            <Button sx={{ fontSize: 13, mb: -2 }} size="small">
-              查看详情
-            </Button>
-          </Stack>
-          <Stack sx={{ width: 120 }} alignItems="center">
-            <Typography
-              variant="subtitle1"
-              sx={{
-                width: 32,
-                height: 32,
-                borderRadius: 16,
-                bgcolor: red[400],
-                boxSizing: 'content-box',
-                border: `8px solid ${red[50]}`,
-                textAlign: 'center',
-                fontWeight: 'bolder',
-                color: 'white'
-              }}>
-              2
-            </Typography>
-          </Stack>
+          <Typography
+            paragraph
+            variant="caption"
+            sx={{ m: 0 }}
+            fontWeight="bold"
+            color={grey[600]}>
+            异常状态 Topic 数量
+          </Typography>
+          <Button size="small">查看详情</Button>
         </Stack>
+        <Typography
+          paragraph
+          variant="h6"
+          color="primary"
+          sx={{ m: 0, fontWeight: 'bold', color: '#43497a' }}>
+          5
+        </Typography>
       </Paper>
     )
   }