kever/epic7-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
hu xiaotong
2026-03-04 16:55:13 +08:00
parent fc8e8cfcfa
commit 4ea6c97074
3 changed files with 480 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/index.css
View File

@@ -9,10 +9,29 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
html {
overflow-y: scroll;
scrollbar-gutter: stable;
}
body { body {
margin: 0; margin: 0;
min-width: 320px; 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 { a {

286
src/layouts/RootLayout.tsx
View File

@@ -1,34 +1,282 @@
import { AppBar, Box, Button, Container, Stack, Toolbar, Typography } from '@mui/material' import MenuIcon from '@mui/icons-material/Menu'
import { Link, Outlet } from '@tanstack/react-router' import HomeIcon from '@mui/icons-material/Home'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools' 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: <HomeIcon fontSize="small"/>},
{label: '角色', to: '/characters', icon: <PeopleAltIcon fontSize="small"/>},
{label: '神器', to: '/artifacts', icon: <AutoAwesomeIcon fontSize="small"/>},
]
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() { export function RootLayout() {
return ( const pathname = useRouterState({select: (state) => state.location.pathname})
<Box sx={{ minHeight: '100vh', background: 'linear-gradient(180deg, #f7f4ee 0%, #efe8dc 100%)' }}> const theme = useTheme()
<AppBar position="sticky" color="primary" elevation={0}> const isMobile = useMediaQuery(theme.breakpoints.down('md'))
<Toolbar sx={{ gap: 2, flexWrap: 'wrap' }}> const [drawerOpen, setDrawerOpen] = useState(false)
<Typography variant="h6" sx={{ fontWeight: 700, letterSpacing: 1 }}> const [collapsed, setCollapsed] = useState(false)
第七史诗资料馆
const sidebarContent = (
<Box
sx={{
height: '100%',
color: '#f3ede6',
display: 'flex',
flexDirection: 'column',
}}
>
<Stack spacing={2} sx={{p: 2.5}}>
<Stack
direction="row"
spacing={1.5}
alignItems="center"
justifyContent={collapsed ? 'center' : 'flex-start'}
>
<Avatar
src="/hero-avatar.png"
sx={{
width: 36,
height: 36,
border: '1px solid rgba(255,255,255,0.2)',
background: 'rgba(255,255,255,0.08)',
}}
/>
{collapsed ? null : (
<Stack spacing={0.2}>
<Typography sx={{fontWeight: 700, letterSpacing: 1}}>第七史诗资料馆</Typography>
<Typography variant="body2" sx={{color: 'rgba(243,237,230,0.72)'}}>
Epic Seven Archives
</Typography> </Typography>
<Stack direction="row" spacing={1} sx={{ ml: 'auto' }}> </Stack>
<Button component={Link} to="/" color="inherit"> )}
首页 </Stack>
</Stack>
<Divider sx={{borderColor: 'rgba(255,255,255,0.12)'}}/>
<Stack spacing={1} sx={{px: 1.5, py: 2, flex: 1}}>
{menuItems.map((item) => {
const active = pathname === item.to
return (
<Button
key={item.to}
component={Link}
to={item.to}
startIcon={item.icon}
onClick={() => setDrawerOpen(false)}
sx={{
justifyContent: collapsed ? 'center' : 'flex-start',
color: active ? '#1f1a26' : '#f3ede6',
background: active ? '#f7d9b4' : 'rgba(255,255,255,0.06)',
borderRadius: 2,
textTransform: 'none',
fontWeight: 600,
minHeight: 44,
position: 'relative',
overflow: 'hidden',
transition: 'transform 160ms ease, background 160ms ease, box-shadow 160ms ease',
'& .MuiButton-startIcon': {
margin: 0,
},
'&::after': {
content: '""',
position: 'absolute',
inset: 0,
background:
active
? 'radial-gradient(circle at 18% 50%, rgba(255,229,196,0.6), transparent 60%)'
: 'none',
opacity: 0.9,
},
'&:hover': {
transform: collapsed ? 'none' : 'translateX(2px)',
background: active ? '#f4cfa2' : 'rgba(255,255,255,0.12)',
boxShadow: '0 6px 18px rgba(0,0,0,0.2)',
},
}}
>
{collapsed ? null : item.label}
</Button> </Button>
<Button component={Link} to="/characters" color="inherit"> )
角色 })}
</Stack>
<Divider sx={{borderColor: 'rgba(255,255,255,0.12)'}}/>
<Stack spacing={1} sx={{px: 1.5, py: 2}}>
<Button
startIcon={<TranslateIcon fontSize="small"/>}
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 : '中文'}
</Button> </Button>
<Button component={Link} to="/artifacts" color="inherit"> <Button
神器 startIcon={<RefreshIcon fontSize="small"/>}
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 : '刷新数据'}
</Button> </Button>
</Stack> </Stack>
<Divider sx={{borderColor: 'rgba(255,255,255,0.12)'}}/>
<Box sx={{p: 1.5}}>
<Button
fullWidth
onClick={() => setCollapsed((prev) => !prev)}
startIcon={collapsed ? <ChevronRightIcon fontSize="small"/> : <ChevronLeftIcon fontSize="small"/>}
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 : '收起菜单'}
</Button>
</Box>
</Box>
)
return (
<Box
sx={{
minHeight: '100vh',
}}
>
{isMobile ? (
<AppBar position="sticky" elevation={0} sx={{background: 'rgba(31,26,38,0.75)'}}>
<Toolbar sx={{gap: 1.5}}>
<IconButton color="inherit" onClick={() => setDrawerOpen(true)}>
<MenuIcon/>
</IconButton>
<Typography sx={{fontWeight: 700, letterSpacing: 1}}>第七史诗资料馆</Typography>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
) : null}
<Container sx={{ py: 4 }}> <Box sx={{display: 'flex', minHeight: '100vh'}}>
<Outlet /> {isMobile ? null : (
<StyledDrawer variant="permanent" open={!collapsed}>
{sidebarContent}
</StyledDrawer>
)}
<Box sx={{flex: 1, minWidth: 0}}>
<Container sx={{py: {xs: 3, md: 4}}}>
<Outlet/>
</Container> </Container>
</Box>
</Box>
{import.meta.env.DEV ? <TanStackRouterDevtools position="bottom-right" /> : null} <MuiDrawer
anchor="left"
open={drawerOpen}
onClose={() => 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',
},
}}
>
<Box sx={{width: 260}}>{sidebarContent}</Box>
</MuiDrawer>
{import.meta.env.DEV ? <TanStackRouterDevtools position="bottom-right"/> : null}
</Box> </Box>
) )
} }

175
src/pages/HomePage.tsx
View File

@@ -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() { export function HomePage() {
return ( return (
<Stack spacing={3}> <Stack spacing={3}>
<Paper
sx={{
p: { xs: 2.5, md: 4 },
border: '1px solid #e6ded1',
background: 'linear-gradient(120deg, rgba(255,250,242,0.95), rgba(255,245,230,0.9))',
}}
>
<Stack spacing={2}>
<Box> <Box>
<Typography variant="h1">第七史诗资讯站</Typography> <Typography variant="h1">第七史诗资讯站</Typography>
<Typography color="text.secondary"> <Typography color="text.secondary">
日式官方感视觉，聚合公告、更新、角色与神器资料。 日式官方感视觉，聚合公告、更新、角色与神器资料。
</Typography> </Typography>
</Box> </Box>
<TextField
placeholder="搜索角色、神器、活动或公告"
fullWidth
size="medium"
sx={{
background: '#fffdf8',
borderRadius: 2,
'& .MuiOutlinedInput-notchedOutline': { borderColor: '#eadfce' },
}}
/>
<Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
<Chip label="最新公告" color="primary" variant="outlined" />
<Chip label="版本更新" variant="outlined" />
<Chip label="节日活动" variant="outlined" />
<Chip label="新角色" variant="outlined" />
<Chip label="神器推荐" variant="outlined" />
</Stack>
</Stack>
</Paper>
<Box
sx={{
display: 'grid',
gap: 2.5,
gridTemplateColumns: { xs: '1fr', md: '2fr 1fr' },
}}
>
<Stack spacing={2.5}>
<Paper sx={{ p: 3, border: '1px solid #e6ded1', background: '#fffaf2' }}> <Paper sx={{ p: 3, border: '1px solid #e6ded1', background: '#fffaf2' }}>
<Typography variant="h2">今日速览</Typography> <Typography variant="h2">最新公告</Typography>
<Divider sx={{ my: 2 }} /> <Divider sx={{ my: 2 }} />
<Typography color="text.secondary"> <Stack spacing={1.5}>
这里将展示最新公告、活动入口、版本更新摘要。 {[
'3月版本更新预告：全新支线与神器强化',
'限时活动：冬日庆典兑换商店开放',
'竞技场平衡调整说明',
].map((item) => (
<Box
key={item}
sx={{
p: 1.5,
borderRadius: 2,
background: '#fffdf8',
border: '1px solid #efe3d2',
}}
>
<Typography sx={{ fontWeight: 600 }}>{item}</Typography>
<Typography color="text.secondary" variant="body2">
2026-03-04 · 官方公告
</Typography> </Typography>
</Box>
))}
</Stack>
</Paper> </Paper>
<Paper sx={{ p: 3, border: '1px solid #e6ded1', background: '#fffaf2' }}> <Paper sx={{ p: 3, border: '1px solid #e6ded1', background: '#fffaf2' }}>
<Typography variant="h2">角色与神器索引</Typography> <Typography variant="h2">活动与更新</Typography>
<Divider sx={{ my: 2 }} /> <Divider sx={{ my: 2 }} />
<Typography color="text.secondary"> <Box
快速进入角色库与神器库，支持后续的筛选与检索。 sx={{
display: 'grid',
gap: 2,
gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr' },
}}
>
{[
{ title: '节日活动入口', desc: '兑换、任务、挑战关卡' },
{ title: '版本更新摘要', desc: '职业平衡与UI优化' },
{ title: '新角色专题', desc: '技能、刻印与养成' },
{ title: '装备周报', desc: '热门套装推荐' },
].map((card) => (
<Box
key={card.title}
sx={{
p: 2,
borderRadius: 2,
background: '#fffdf8',
border: '1px solid #efe3d2',
}}
>
<Typography sx={{ fontWeight: 600 }}>{card.title}</Typography>
<Typography color="text.secondary" variant="body2">
{card.desc}
</Typography> </Typography>
</Box>
))}
</Box>
</Paper> </Paper>
</Stack> </Stack>
<Stack spacing={2.5}>
<Paper sx={{ p: 3, border: '1px solid #e6ded1', background: '#fffaf2' }}>
<Typography variant="h2">快速入口</Typography>
<Divider sx={{ my: 2 }} />
<Stack spacing={1}>
<Button variant="contained" color="primary">
角色资料库
</Button>
<Button variant="outlined" color="primary">
神器资料库
</Button>
<Button variant="outlined" color="primary">
公告归档
</Button>
</Stack>
</Paper>
<Paper sx={{ p: 3, border: '1px solid #e6ded1', background: '#fffaf2' }}>
<Typography variant="h2">热门角色</Typography>
<Divider sx={{ my: 2 }} />
<Stack spacing={1}>
{['永恒·夏绿蒂', '流浪者·希格尔', '月光·优芬妮'].map((name) => (
<Box
key={name}
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
p: 1.2,
borderRadius: 2,
background: '#fffdf8',
border: '1px solid #efe3d2',
}}
>
<Typography sx={{ fontWeight: 600 }}>{name}</Typography>
<Typography variant="body2" color="text.secondary">
查看
</Typography>
</Box>
))}
</Stack>
</Paper>
<Paper sx={{ p: 3, border: '1px solid #e6ded1', background: '#fffaf2' }}>
<Typography variant="h2">神器推荐</Typography>
<Divider sx={{ my: 2 }} />
<Stack spacing={1}>
{['黎明之剑', '王座之冠', '圣域之铃'].map((name) => (
<Box
key={name}
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
p: 1.2,
borderRadius: 2,
background: '#fffdf8',
border: '1px solid #efe3d2',
}}
>
<Typography sx={{ fontWeight: 600 }}>{name}</Typography>
<Typography variant="body2" color="text.secondary">
查看
</Typography>
</Box>
))}
</Stack>
</Paper>
</Stack>
</Box>
</Stack>
) )
} }