35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import { AppBar, Box, Button, Container, Stack, Toolbar, Typography } from '@mui/material'
|
|
import { Link, Outlet } from '@tanstack/react-router'
|
|
import { TanStackRouterDevtools } from '@tanstack/router-devtools'
|
|
|
|
export function RootLayout() {
|
|
return (
|
|
<Box sx={{ minHeight: '100vh', background: 'linear-gradient(180deg, #f7f4ee 0%, #efe8dc 100%)' }}>
|
|
<AppBar position="sticky" color="primary" elevation={0}>
|
|
<Toolbar sx={{ gap: 2, flexWrap: 'wrap' }}>
|
|
<Typography variant="h6" sx={{ fontWeight: 700, letterSpacing: 1 }}>
|
|
第七史诗资料馆
|
|
</Typography>
|
|
<Stack direction="row" spacing={1} sx={{ ml: 'auto' }}>
|
|
<Button component={Link} to="/" color="inherit">
|
|
首页
|
|
</Button>
|
|
<Button component={Link} to="/characters" color="inherit">
|
|
角色
|
|
</Button>
|
|
<Button component={Link} to="/artifacts" color="inherit">
|
|
神器
|
|
</Button>
|
|
</Stack>
|
|
</Toolbar>
|
|
</AppBar>
|
|
|
|
<Container sx={{ py: 4 }}>
|
|
<Outlet />
|
|
</Container>
|
|
|
|
{import.meta.env.DEV ? <TanStackRouterDevtools position="bottom-right" /> : null}
|
|
</Box>
|
|
)
|
|
}
|