diff --git a/src/index.css b/src/index.css
index f7903b5..0d85e13 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,10 +9,29 @@
-moz-osx-font-smoothing: grayscale;
}
+html {
+ overflow-y: scroll;
+ scrollbar-gutter: stable;
+}
+
body {
margin: 0;
min-width: 320px;
- background: #f7f4ee;
+ background:
+ linear-gradient(
+ 180deg,
+ rgba(253, 248, 240, 0.42) 0%,
+ rgba(252, 245, 234, 0.48) 40%,
+ rgba(248, 240, 228, 0.58) 100%
+ ),
+ radial-gradient(circle at 12% 18%, rgba(255, 214, 162, 0.22), transparent 45%),
+ radial-gradient(circle at 88% 22%, rgba(255, 170, 183, 0.2), transparent 42%),
+ url("/hero-bg.jpg");
+ background-size: cover;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+ overflow-x: hidden;
}
a {
diff --git a/src/layouts/RootLayout.tsx b/src/layouts/RootLayout.tsx
index a0d92a9..39585a3 100644
--- a/src/layouts/RootLayout.tsx
+++ b/src/layouts/RootLayout.tsx
@@ -1,34 +1,282 @@
-import { AppBar, Box, Button, Container, Stack, Toolbar, Typography } from '@mui/material'
-import { Link, Outlet } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import MenuIcon from '@mui/icons-material/Menu'
+import HomeIcon from '@mui/icons-material/Home'
+import PeopleAltIcon from '@mui/icons-material/PeopleAlt'
+import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'
+import RefreshIcon from '@mui/icons-material/Refresh'
+import TranslateIcon from '@mui/icons-material/Translate'
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
+import MuiDrawer from '@mui/material/Drawer'
+import {
+ AppBar,
+ Avatar,
+ Box,
+ Button,
+ Container,
+ Divider,
+ IconButton,
+ Stack,
+ Toolbar,
+ Typography,
+ useMediaQuery,
+} from '@mui/material'
+import {styled, useTheme} from '@mui/material/styles'
+import type {CSSObject, Theme} from '@mui/material/styles'
+import {Link, Outlet, useRouterState} from '@tanstack/react-router'
+import {TanStackRouterDevtools} from '@tanstack/react-router-devtools'
+import {useState} from 'react'
+
+const menuItems = [
+ {label: '首页', to: '/', icon: },
+ {label: '角色', to: '/characters', icon: },
+ {label: '神器', to: '/artifacts', icon: },
+]
+
+const drawerWidth = 260
+const collapsedWidth = 76
+
+const openedMixin = (theme: Theme): CSSObject => ({
+ width: drawerWidth,
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ overflowX: 'hidden',
+})
+
+const closedMixin = (theme: Theme): CSSObject => ({
+ width: collapsedWidth,
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ overflowX: 'hidden',
+})
+
+const StyledDrawer = styled(MuiDrawer, {
+ shouldForwardProp: (prop) => prop !== 'open',
+})(({theme, open}) => ({
+ width: drawerWidth,
+ flexShrink: 0,
+ whiteSpace: 'nowrap',
+ boxSizing: 'border-box',
+ ...(open && {
+ ...openedMixin(theme),
+ '& .MuiDrawer-paper': {
+ ...openedMixin(theme),
+ },
+ }),
+ ...(!open && {
+ ...closedMixin(theme),
+ '& .MuiDrawer-paper': {
+ ...closedMixin(theme),
+ },
+ }),
+ '& .MuiDrawer-paper': {
+ height: '100vh',
+ background:
+ 'linear-gradient(180deg, rgba(31,26,38,0.46) 0%, rgba(25,21,34,0.52) 100%)',
+ borderRight: 'none',
+ boxShadow: 'none',
+ },
+}))
export function RootLayout() {
- return (
-
-
-
-
- 第七史诗资料馆
-
-
-
-
-
-
-
-
+ const pathname = useRouterState({select: (state) => state.location.pathname})
+ const theme = useTheme()
+ const isMobile = useMediaQuery(theme.breakpoints.down('md'))
+ const [drawerOpen, setDrawerOpen] = useState(false)
+ const [collapsed, setCollapsed] = useState(false)
-
-
-
+ const sidebarContent = (
+
+
+
+
+ {collapsed ? null : (
+
+ 第七史诗资料馆
+
+ Epic Seven Archives
+
+
+ )}
+
+
- {import.meta.env.DEV ? : null}
-
- )
+
+
+
+ {menuItems.map((item) => {
+ const active = pathname === item.to
+ return (
+
+ )
+ })}
+
+
+
+
+
+ }
+ sx={{
+ justifyContent: collapsed ? 'center' : 'flex-start',
+ color: '#f3ede6',
+ background: 'rgba(255,255,255,0.06)',
+ borderRadius: 2,
+ textTransform: 'none',
+ minHeight: 40,
+ '& .MuiButton-startIcon': {margin: 0},
+ }}
+ >
+ {collapsed ? null : '中文'}
+
+ }
+ sx={{
+ justifyContent: collapsed ? 'center' : 'flex-start',
+ color: '#f3ede6',
+ background: 'rgba(255,255,255,0.06)',
+ borderRadius: 2,
+ textTransform: 'none',
+ minHeight: 40,
+ '& .MuiButton-startIcon': {margin: 0},
+ }}
+ >
+ {collapsed ? null : '刷新数据'}
+
+
+
+
+
+
+
+
+
+ )
+
+ return (
+
+ {isMobile ? (
+
+
+ setDrawerOpen(true)}>
+
+
+ 第七史诗资料馆
+
+
+ ) : null}
+
+
+ {isMobile ? null : (
+
+ {sidebarContent}
+
+ )}
+
+
+
+
+
+
+
+
+ setDrawerOpen(false)}
+ PaperProps={{
+ sx: {
+ background:
+ 'linear-gradient(180deg, rgba(31,26,38,0.46) 0%, rgba(25,21,34,0.52) 100%)',
+ borderRight: 'none',
+ boxShadow: 'none',
+ },
+ }}
+ >
+ {sidebarContent}
+
+
+ {import.meta.env.DEV ? : null}
+
+ )
}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 9d1f9e9..bdadc85 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,30 +1,191 @@
-import { Box, Divider, Paper, Stack, Typography } from '@mui/material'
+import {
+ Box,
+ Button,
+ Chip,
+ Divider,
+ Paper,
+ Stack,
+ TextField,
+ Typography,
+} from '@mui/material'
export function HomePage() {
return (
-
- 第七史诗资讯站
-
- 日式官方感视觉，聚合公告、更新、角色与神器资料。
-
+
+
+
+ 第七史诗资讯站
+
+ 日式官方感视觉，聚合公告、更新、角色与神器资料。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 最新公告
+
+
+ {[
+ '3月版本更新预告：全新支线与神器强化',
+ '限时活动：冬日庆典兑换商店开放',
+ '竞技场平衡调整说明',
+ ].map((item) => (
+
+ {item}
+
+ 2026-03-04 · 官方公告
+
+
+ ))}
+
+
+
+
+ 活动与更新
+
+
+ {[
+ { title: '节日活动入口', desc: '兑换、任务、挑战关卡' },
+ { title: '版本更新摘要', desc: '职业平衡与UI优化' },
+ { title: '新角色专题', desc: '技能、刻印与养成' },
+ { title: '装备周报', desc: '热门套装推荐' },
+ ].map((card) => (
+
+ {card.title}
+
+ {card.desc}
+
+
+ ))}
+
+
+
+
+
+
+ 快速入口
+
+
+
+
+
+
+
+
+
+ 热门角色
+
+
+ {['永恒·夏绿蒂', '流浪者·希格尔', '月光·优芬妮'].map((name) => (
+
+ {name}
+
+ 查看
+
+
+ ))}
+
+
+
+
+ 神器推荐
+
+
+ {['黎明之剑', '王座之冠', '圣域之铃'].map((name) => (
+
+ {name}
+
+ 查看
+
+
+ ))}
+
+
+
-
-
- 今日速览
-
-
- 这里将展示最新公告、活动入口、版本更新摘要。
-
-
-
-
- 角色与神器索引
-
-
- 快速进入角色库与神器库，支持后续的筛选与检索。
-
-
)
}