511 lines
16 KiB
TypeScript
511 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import AppBar from "@mui/material/AppBar";
|
|
import Box from "@mui/material/Box";
|
|
import Toolbar from "@mui/material/Toolbar";
|
|
import Typography from "@mui/material/Typography";
|
|
import Button from "@mui/material/Button";
|
|
import Menu from "@mui/material/Menu";
|
|
import MenuItem from "@mui/material/MenuItem";
|
|
import Container from "@mui/material/Container";
|
|
import { ThemeProvider, createTheme } from "@mui/material/styles";
|
|
import CssBaseline from "@mui/material/CssBaseline";
|
|
import { styled } from "@mui/material/styles";
|
|
import ListSubheader from "@mui/material/ListSubheader";
|
|
import useScrollTrigger from "@mui/material/useScrollTrigger";
|
|
import Drawer from "@mui/material/Drawer";
|
|
import IconButton from "@mui/material/IconButton";
|
|
import List from "@mui/material/List";
|
|
import ListItem from "@mui/material/ListItem";
|
|
import ListItemText from "@mui/material/ListItemText";
|
|
import Divider from "@mui/material/Divider";
|
|
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
|
|
|
|
function colorLog(message: string, color: 'reset' | 'red' | 'green' | 'yellow' | 'blue') {
|
|
const colors = {
|
|
reset: '\x1b[0m',
|
|
red: '\x1b[31m',
|
|
green: '\x1b[32m',
|
|
yellow: '\x1b[33m',
|
|
blue: '\x1b[34m'
|
|
};
|
|
console.log(`${colors[color]}%s${colors.reset}`, message);
|
|
}
|
|
|
|
colorLog(`
|
|
_____ ______ __ __
|
|
| |_.-----.-----.-----.| | |.-----.--.--.--| |
|
|
| | -__| _ | || ---| || _ | | | _ |
|
|
|_______|_____|_____|__|__||______|__||_____|_____|_____|
|
|
|
|
`, 'blue')
|
|
colorLog('恭喜你发现了彩蛋！', 'red')
|
|
colorLog('LeonCloud是Leon突发奇想搞出来的 (=^ _ ^=)', 'green')
|
|
|
|
// 自定义内容标题样式
|
|
const StyledListHeader = styled(ListSubheader)({
|
|
backgroundImage: "var(--Paper-overlay)",
|
|
});
|
|
|
|
// 创建MUI主题
|
|
const theme = createTheme({
|
|
typography: {
|
|
fontFamily: "inherit",
|
|
},
|
|
});
|
|
|
|
interface ClientLayoutProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
// 客户端组件负责MUI主题和UI组件
|
|
const ClientLayout: React.FC<ClientLayoutProps> = ({ children }) => {
|
|
// 将hooks移到组件内部
|
|
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
|
const [mobileDrawerOpen, setMobileDrawerOpen] = React.useState(false);
|
|
const [isMobile, setIsMobile] = React.useState(false);
|
|
|
|
// 监听窗口大小变化，判断是否为移动设备
|
|
React.useEffect(() => {
|
|
const handleResize = () => {
|
|
setIsMobile(window.innerWidth < 768); // 768px为移动端断点
|
|
};
|
|
|
|
// 初始化时判断
|
|
handleResize();
|
|
|
|
// 添加事件监听器
|
|
window.addEventListener('resize', handleResize);
|
|
|
|
// 清理函数
|
|
return () => window.removeEventListener('resize', handleResize);
|
|
}, []);
|
|
|
|
const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
// 定义顶栏导航项的类型
|
|
interface NavItem {
|
|
id: string;
|
|
label: string;
|
|
href: string;
|
|
type: 'link' | 'menu';
|
|
children?: NavItem[];
|
|
}
|
|
|
|
// 定义导航项目菜单的类型
|
|
interface ProjectItem {
|
|
id: string;
|
|
label: string;
|
|
href: string;
|
|
category: string;
|
|
}
|
|
|
|
// 动态定义顶部导航链接
|
|
const navItems: NavItem[] = [
|
|
{
|
|
id: 'home',
|
|
label: 'LeonCloud',
|
|
href: '/',
|
|
type: 'link'
|
|
},
|
|
{
|
|
id: 'project',
|
|
label: '项目',
|
|
href: '',
|
|
type: 'menu'
|
|
},
|
|
{
|
|
id: 'support',
|
|
label: '技术支持',
|
|
href: '/support',
|
|
type: 'link'
|
|
},
|
|
{
|
|
id: 'joinus',
|
|
label: '加入我们',
|
|
href: '/joinus',
|
|
type: 'link'
|
|
}
|
|
];
|
|
|
|
// 动态定义项目列表
|
|
const projectItems: ProjectItem[] = [
|
|
{
|
|
id: 'leonpan',
|
|
label: 'LeonPan',
|
|
href: '/project/leonpan',
|
|
category: 'Web'
|
|
},
|
|
{
|
|
id: 'leonapp',
|
|
label: 'LeonAPP',
|
|
href: '/project/leonapp',
|
|
category: 'Web'
|
|
},
|
|
{
|
|
id: 'leonbasic',
|
|
label: 'LeonBasic',
|
|
href: '/project/leonbasic',
|
|
category: '其它'
|
|
}
|
|
];
|
|
|
|
// 按分类组织项目
|
|
const projectsByCategory = projectItems.reduce((acc, item) => {
|
|
if (!acc[item.category]) {
|
|
acc[item.category] = [];
|
|
}
|
|
acc[item.category].push(item);
|
|
return acc;
|
|
}, {} as Record<string, ProjectItem[]>);
|
|
|
|
// 侧边栏开关控制
|
|
const toggleDrawer = (open: boolean) => () => {
|
|
setMobileDrawerOpen(open);
|
|
};
|
|
|
|
// 侧边栏项目点击处理
|
|
const handleDrawerItemClick = (href: string) => {
|
|
window.location.href = href;
|
|
setMobileDrawerOpen(false);
|
|
};
|
|
|
|
// 分类展开状态管理 - 现在在projectsByCategory定义之后初始化
|
|
const [expandedCategories, setExpandedCategories] = React.useState<Record<string, boolean>>({
|
|
// 直接初始化所有已知分类为展开状态
|
|
'Web': true,
|
|
'其它': true
|
|
});
|
|
|
|
// 项目部分的展开状态管理
|
|
const [projectsExpanded, setProjectsExpanded] = React.useState(false);
|
|
|
|
// 切换分类展开/收缩状态
|
|
const toggleCategory = (category: string) => {
|
|
setExpandedCategories(prev => ({
|
|
...prev,
|
|
[category]: !prev[category]
|
|
}));
|
|
};
|
|
|
|
interface Props {
|
|
/**
|
|
* Injected by the documentation to work in an iframe.
|
|
* You won't need it on your project.
|
|
*/
|
|
window?: () => Window;
|
|
children?: React.ReactElement<{ elevation?: number }>;
|
|
}
|
|
|
|
// function ElevationScroll(props: Props) {
|
|
// const { children, window } = props;
|
|
// // Note that you normally won't need to set the window ref as useScrollTrigger
|
|
// // will default to window.
|
|
// // This is only being set here because the demo is in an iframe.
|
|
// const trigger = useScrollTrigger({
|
|
// disableHysteresis: true,
|
|
// threshold: 0,
|
|
// target: window ? window() : undefined,
|
|
// });
|
|
|
|
// return children
|
|
// ? React.cloneElement(children, {
|
|
// elevation: trigger ? 4 : 0,
|
|
// })
|
|
// : null;
|
|
// }
|
|
|
|
return (
|
|
<ThemeProvider theme={theme}>
|
|
<CssBaseline />
|
|
<Box sx={{ flexGrow: 1 }}>
|
|
<AppBar position="static">
|
|
<Toolbar>
|
|
{/* 响应式顶栏 - 移动端显示汉堡菜单，桌面端显示完整导航 */}
|
|
<Box sx={{ display: "flex", alignItems: "center", flexGrow: 1 }}>
|
|
{/* 移动端：汉堡菜单按钮 */}
|
|
{isMobile && (
|
|
<IconButton
|
|
color="inherit"
|
|
aria-label="打开菜单"
|
|
edge="start"
|
|
onClick={toggleDrawer(true)}
|
|
sx={{ mr: 2 }}
|
|
>
|
|
<Box sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
width: 24,
|
|
height: 18
|
|
}}>
|
|
<Box sx={{ height: 2, bgcolor: 'white', width: '100%' }} />
|
|
<Box sx={{ height: 2, bgcolor: 'white', width: '100%' }} />
|
|
<Box sx={{ height: 2, bgcolor: 'white', width: '100%' }} />
|
|
</Box>
|
|
</IconButton>
|
|
)}
|
|
|
|
{/* 首页链接（在所有设备上都显示） */}
|
|
<Typography
|
|
variant={isMobile ? "h6" : "h6"}
|
|
component="div"
|
|
sx={{
|
|
cursor: 'pointer',
|
|
'&:hover': {
|
|
opacity: 0.8
|
|
}
|
|
}}
|
|
onClick={() => (window.location.href = '/')}
|
|
>
|
|
LeonCloud
|
|
</Typography>
|
|
|
|
{/* 桌面端：完整导航链接 */}
|
|
{!isMobile && (
|
|
<Box sx={{ display: "flex", alignItems: "center", ml: 2 }}>
|
|
{navItems.filter(item => item.id !== 'home').map((item) => {
|
|
if (item.type === 'link') {
|
|
return (
|
|
<Typography
|
|
key={item.id}
|
|
variant="body1"
|
|
component="div"
|
|
sx={{
|
|
mr: 2,
|
|
cursor: 'pointer',
|
|
'&:hover': {
|
|
opacity: 0.8
|
|
}
|
|
}}
|
|
onClick={() => (window.location.href = item.href)}
|
|
>
|
|
{item.label}
|
|
</Typography>
|
|
);
|
|
} else if (item.type === 'menu') {
|
|
return (
|
|
<Button
|
|
key={item.id}
|
|
id="menu-appbar"
|
|
aria-controls="menu-appbar"
|
|
aria-haspopup="true"
|
|
onClick={handleMenu}
|
|
color="inherit"
|
|
>
|
|
<Typography variant="body1" component="span">
|
|
{item.label}
|
|
</Typography>
|
|
</Button>
|
|
);
|
|
}
|
|
return null;
|
|
})}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
|
|
{/* 桌面端：项目下拉菜单 */}
|
|
{!isMobile && (
|
|
<Menu
|
|
id="menu-appbar"
|
|
anchorEl={anchorEl}
|
|
keepMounted
|
|
open={Boolean(anchorEl)}
|
|
onClose={handleClose}
|
|
>
|
|
{Object.entries(projectsByCategory).map(([category, items]) => (
|
|
<React.Fragment key={category}>
|
|
<StyledListHeader>{category}</StyledListHeader>
|
|
{items.map((project) => (
|
|
<MenuItem
|
|
key={project.id}
|
|
onClick={() => {
|
|
window.location.href = project.href;
|
|
handleClose();
|
|
}}
|
|
>
|
|
{project.label}
|
|
</MenuItem>
|
|
))}
|
|
</React.Fragment>
|
|
))}
|
|
</Menu>
|
|
)}
|
|
</Toolbar>
|
|
</AppBar>
|
|
</Box>
|
|
|
|
{/* 移动端侧边栏 */}
|
|
<Drawer
|
|
anchor="left"
|
|
open={mobileDrawerOpen}
|
|
onClose={toggleDrawer(false)}
|
|
>
|
|
<Box sx={{ width: 250 }} role="presentation">
|
|
{/* 侧边栏头部 */}
|
|
<Box sx={{
|
|
bgcolor: 'primary.main',
|
|
color: 'white',
|
|
p: 2,
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center'
|
|
}}>
|
|
<Typography variant="h6">导航菜单</Typography>
|
|
<IconButton
|
|
edge="end"
|
|
color="inherit"
|
|
onClick={toggleDrawer(false)}
|
|
aria-label="关闭菜单"
|
|
>
|
|
<ChevronRightIcon />
|
|
</IconButton>
|
|
</Box>
|
|
|
|
<Divider />
|
|
|
|
{/* 侧边栏导航链接 */}
|
|
<List>
|
|
{navItems.filter(item => item.id !== 'home').map((item) => {
|
|
if (item.type === 'link') {
|
|
return (
|
|
<ListItem
|
|
component="a"
|
|
href={item.href}
|
|
key={item.id}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
handleDrawerItemClick(item.href);
|
|
}}
|
|
>
|
|
<ListItemText primary={item.label} />
|
|
</ListItem>
|
|
);
|
|
} else if (item.type === 'menu') {
|
|
return (
|
|
<React.Fragment key={item.id}>
|
|
<ListItem
|
|
component="div"
|
|
onClick={() => setProjectsExpanded(prev => !prev)}
|
|
sx={{
|
|
pl: 1,
|
|
cursor: 'pointer',
|
|
'&:hover': { backgroundColor: 'rgba(0,0,0,0.04)' },
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
backgroundColor: 'rgba(0,0,0,0.02)',
|
|
fontWeight: 'bold'
|
|
}}
|
|
>
|
|
<ChevronRightIcon
|
|
fontSize="small"
|
|
sx={{
|
|
mr: 1,
|
|
transform: projectsExpanded ? 'rotate(90deg)' : 'none',
|
|
transition: 'transform 0.2s ease-in-out'
|
|
}}
|
|
/>
|
|
<ListItemText
|
|
primary={item.label}
|
|
/>
|
|
</ListItem>
|
|
{projectsExpanded && Object.entries(projectsByCategory).map(([category, projects]) => (
|
|
<React.Fragment key={category}>
|
|
<ListItem
|
|
component="div"
|
|
onClick={() => toggleCategory(category)}
|
|
sx={{
|
|
pl: 2,
|
|
cursor: 'pointer',
|
|
'&:hover': { backgroundColor: 'rgba(0,0,0,0.04)' },
|
|
display: 'flex',
|
|
alignItems: 'center'
|
|
}}
|
|
>
|
|
<ChevronRightIcon
|
|
fontSize="small"
|
|
sx={{
|
|
mr: 1,
|
|
transform: expandedCategories[category] ? 'rotate(90deg)' : 'none',
|
|
transition: 'transform 0.2s ease-in-out'
|
|
}}
|
|
/>
|
|
<ListItemText
|
|
primary={category}
|
|
primaryTypographyProps={{ fontSize: '0.7rem' }}
|
|
/>
|
|
</ListItem>
|
|
{expandedCategories[category] && projects.map((project) => (
|
|
<ListItem
|
|
component="a"
|
|
href={project.href}
|
|
key={project.id}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
handleDrawerItemClick(project.href);
|
|
}}
|
|
sx={{ pl: 6 }}
|
|
>
|
|
<ListItemText primary={project.label} />
|
|
</ListItem>
|
|
))}
|
|
</React.Fragment>
|
|
))}
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
return null;
|
|
})}
|
|
</List>
|
|
</Box>
|
|
</Drawer>
|
|
|
|
{children}
|
|
|
|
{/* 页脚区域 */}
|
|
<Box sx={{ bgcolor: 'primary.dark', color: 'white', py: 8, px: 2 }}>
|
|
<Container maxWidth="lg">
|
|
<Box sx={{
|
|
display: 'flex',
|
|
flexDirection: { xs: 'column', md: 'row' },
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
mb: 6
|
|
}}>
|
|
<Typography variant="h5" gutterBottom fontWeight="bold">
|
|
LeonCloud
|
|
</Typography>
|
|
<Typography variant="body1" sx={{ opacity: 0.8 }}>
|
|
LeonMMcoset的所有产品的运营商
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Box sx={{
|
|
height: 1,
|
|
bgcolor: 'white',
|
|
opacity: 0.1,
|
|
mb: 6
|
|
}}></Box>
|
|
|
|
<Typography variant="body2" align="center" paragraph>
|
|
© {new Date().getFullYear()} LeonCloud. 保留所有权利。
|
|
</Typography>
|
|
<Typography variant="caption" align="center" color="rgba(255,255,255,0.7)">
|
|
我们的宗旨是给用户提供简单、安全、高效、全方面的服务
|
|
</Typography>
|
|
</Container>
|
|
</Box>
|
|
</ThemeProvider>
|
|
);
|
|
};
|
|
|
|
export default ClientLayout;
|