init

src/layouts/RootLayout.tsx

@@ -0,0 +1,34 @@
+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>
+  )
+}