apache · Pil0tXia · Mar 31, 2024 · Mar 6, 2024 · Mar 7, 2024 · Mar 7, 2024
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>
  )
  }