56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
import { Container, Typography, Box, AppBar, Toolbar, Button, Stack } from '@mui/material'
|
|
import { Routes, Route, Link } from 'react-router-dom'
|
|
import { useAppStore } from './stores/appStore'
|
|
import RegistryImageList from './pages/RegistryImageList'
|
|
|
|
function App() {
|
|
const { count, increment, decrement, reset } = useAppStore()
|
|
|
|
return (
|
|
<Box sx={{ flexGrow: 1, minHeight: '100vh' }}>
|
|
<AppBar position="static">
|
|
<Toolbar>
|
|
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
|
Cluster
|
|
</Typography>
|
|
<Button color="inherit" component={Link} to="/">首页</Button>
|
|
<Button color="inherit" component={Link} to="/registry/image">镜像列表</Button>
|
|
</Toolbar>
|
|
</AppBar>
|
|
<Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
|
|
<Routes>
|
|
<Route path="/registry/image" element={<RegistryImageList />} />
|
|
<Route path="/" element={
|
|
<Box>
|
|
<Typography variant="h4" component="h1" gutterBottom>
|
|
欢迎使用 Cluster
|
|
</Typography>
|
|
<Box sx={{ mt: 4 }}>
|
|
<Typography variant="h6" gutterBottom>
|
|
Zustand 状态管理示例
|
|
</Typography>
|
|
<Stack direction="row" spacing={2} alignItems="center" justifyContent="center" sx={{ mt: 2 }}>
|
|
<Button variant="contained" onClick={decrement}>
|
|
-
|
|
</Button>
|
|
<Typography variant="h5" sx={{ minWidth: 60 }}>
|
|
{count}
|
|
</Typography>
|
|
<Button variant="contained" onClick={increment}>
|
|
+
|
|
</Button>
|
|
<Button variant="outlined" onClick={reset} sx={{ ml: 2 }}>
|
|
重置
|
|
</Button>
|
|
</Stack>
|
|
</Box>
|
|
</Box>
|
|
} />
|
|
</Routes>
|
|
</Container>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default App
|