357 lines
14 KiB
TypeScript
357 lines
14 KiB
TypeScript
'use client';
|
||
|
||
import { Box, Container, Typography, Card, CardContent, CardMedia, Button, useMediaQuery, useTheme, Tabs, Tab } from '@mui/material';
|
||
import { Code, Star, Download, GitHub, Link, Monitor, Smartphone, Storage } from '@mui/icons-material';
|
||
import { useState } from 'react';
|
||
|
||
export default function LeonPan() {
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
|
||
const isTablet = useMediaQuery(theme.breakpoints.down('md'));
|
||
const [currentTab, setCurrentTab] = useState(0);
|
||
|
||
// 项目截图
|
||
const screenshots = [
|
||
'/projects/leonpan/img1.png',
|
||
'/projects/leonpan/img2.png',
|
||
'/projects/leonpan/img3.png'
|
||
];
|
||
|
||
// 功能特点
|
||
const features = [
|
||
{
|
||
icon: <Monitor color="primary" style={{ fontSize: isMobile ? 24 : 32 }} />,
|
||
title: "Web支持",
|
||
description: "无需安装任何客户端就可以快速使用"
|
||
},
|
||
{
|
||
icon: <Smartphone color="primary" style={{ fontSize: isMobile ? 24 : 32 }} />,
|
||
title: "PC客户端",
|
||
description: "完美适配Windows 10以上的系统"
|
||
},
|
||
{
|
||
icon: <Storage color="primary" style={{ fontSize: isMobile ? 24 : 32 }} />,
|
||
title: "精美设计",
|
||
description: "提供简洁而专业的用户界面，操作方便"
|
||
},
|
||
{
|
||
icon: <Code color="primary" style={{ fontSize: isMobile ? 24 : 32 }} />,
|
||
title: "开源可定制",
|
||
description: "基于GPLv3协议开源，可自由修改和定制"
|
||
}
|
||
];
|
||
|
||
// 技术栈
|
||
// const techStack = [
|
||
// { name: "Go", level: 90 },
|
||
// { name: "Vue.js", level: 85 },
|
||
// { name: "Element UI", level: 80 },
|
||
// { name: "MySQL", level: 75 },
|
||
// { name: "Redis", level: 70 }
|
||
// ];
|
||
|
||
return (
|
||
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default' }}>
|
||
{/* 项目头部 */}
|
||
<Box sx={{
|
||
bgcolor: 'primary.main',
|
||
color: 'white',
|
||
py: isMobile ? 8 : 12,
|
||
px: 2,
|
||
textAlign: 'center',
|
||
position: 'relative',
|
||
overflow: 'hidden',
|
||
'&::after': {
|
||
content: '""',
|
||
position: 'absolute',
|
||
bottom: -50,
|
||
right: -50,
|
||
width: 200,
|
||
height: 200,
|
||
borderRadius: '50%',
|
||
bgcolor: 'rgba(255,255,255,0.1)',
|
||
}
|
||
}}>
|
||
<Container maxWidth="md" sx={{ position: 'relative', zIndex: 1 }}>
|
||
<Typography variant={isMobile ? "h3" : "h2"} component="h1" gutterBottom fontWeight="bold">
|
||
LeonPan
|
||
</Typography>
|
||
<Typography variant="body1" paragraph sx={{ maxWidth: 600, mx: 'auto', opacity: 0.9 }}>
|
||
LeonPan是一个开源项目，改编自Cloudreve开源项目，使用GPLv3协议开源。提供强大的文件管理功能。
|
||
</Typography>
|
||
<Box sx={{ mt: 4, display: 'flex', flexWrap: 'wrap', gap: 2, justifyContent: 'center' }}>
|
||
<Button
|
||
variant="contained"
|
||
color="secondary"
|
||
size={isMobile ? "small" : "medium"}
|
||
startIcon={<GitHub />}
|
||
sx={{ px: 3 }}
|
||
onClick={() => window.open('http://leonmmcoset.jjxmm.win:2000/leonmmcoset/leonpan', '_blank')}
|
||
>
|
||
Git仓库
|
||
</Button>
|
||
<Button
|
||
variant="outlined"
|
||
color="inherit"
|
||
size={isMobile ? "small" : "medium"}
|
||
startIcon={<Download />}
|
||
sx={{ px: 3, borderColor: 'white', color: 'white', '&:hover': { borderColor: 'rgba(255,255,255,0.8)' } }}
|
||
onClick={() => window.open('http://leonmmcoset.jjxmm.win:5212/', '_blank')}
|
||
>
|
||
进入LeonAPP
|
||
</Button>
|
||
</Box>
|
||
</Container>
|
||
</Box>
|
||
|
||
{/* 项目概述 */}
|
||
<Box sx={{ py: isMobile ? 6 : 10, px: 2 }}>
|
||
<Container maxWidth="lg">
|
||
<Box sx={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 4 : 6, alignItems: 'center', width: '100%' }}>
|
||
<Box sx={{ width: '100%' }}>
|
||
<Typography variant={isMobile ? "h4" : "h3"} component="h2" gutterBottom fontWeight="bold">
|
||
项目概述
|
||
</Typography>
|
||
<Typography variant="body1" paragraph sx={{ mb: 3, color: 'text.secondary' }}>
|
||
LeonPan是基于Cloudreve开发的文件管理系统，提供了丰富的功能和友好的用户界面。
|
||
它支持多种存储方式，包括本地存储、对象存储等，可以满足不同用户的需求。
|
||
</Typography>
|
||
<Typography variant="body1" paragraph sx={{ mb: 3, color: 'text.secondary' }}>
|
||
项目致力于提供安全、稳定、高效的文件管理解决方案，适用于个人用户和团队协作场景。
|
||
</Typography>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mt: 4 }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
<Star color="secondary" fontSize="small" style={{ fontSize: 16 }} />
|
||
<Typography variant="body2">开源免费</Typography>
|
||
</Box>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
<Code color="primary" fontSize="small" style={{ fontSize: 16 }} />
|
||
<Typography variant="body2">GPLv3协议</Typography>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
<Box sx={{ width: '100%' }}>
|
||
<Card sx={{ boxShadow: 4, borderRadius: 2, overflow: 'hidden' }}>
|
||
<CardMedia
|
||
component="img"
|
||
height={isMobile ? 200 : 300}
|
||
image={screenshots[0]}
|
||
alt="LeonPan 截图"
|
||
sx={{ objectFit: 'cover' }}
|
||
/>
|
||
</Card>
|
||
</Box>
|
||
</Box>
|
||
</Container>
|
||
</Box>
|
||
|
||
{/* 功能特点 */}
|
||
<Box sx={{ py: isMobile ? 6 : 10, px: 2, bgcolor: 'grey.50' }}>
|
||
<Container maxWidth="lg">
|
||
<Typography variant={isMobile ? "h4" : "h3"} component="h2" align="center" gutterBottom fontWeight="bold">
|
||
功能特点
|
||
</Typography>
|
||
<Typography variant="body1" align="center" paragraph sx={{ mb: 8, maxWidth: 600, mx: 'auto', color: 'text.secondary' }}>
|
||
LeonPan提供丰富的功能，满足您的文件管理需求
|
||
</Typography>
|
||
|
||
<Box sx={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: isMobile ? 3 : 4, width: '100%' }}>
|
||
{features.map((feature, index) => (
|
||
<Box sx={{ width: isMobile ? '100%' : 'calc(50% - 16px)', key: index }}>
|
||
<Card sx={{
|
||
height: '100%',
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
padding: 3,
|
||
boxShadow: 2,
|
||
borderRadius: 2,
|
||
transition: 'transform 0.3s, box-shadow 0.3s',
|
||
'&:hover': {
|
||
transform: 'translateY(-3px)',
|
||
boxShadow: 4,
|
||
}
|
||
}}>
|
||
<Box sx={{ mr: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', minWidth: 60 }}>
|
||
{feature.icon}
|
||
</Box>
|
||
<Box>
|
||
<Typography variant="h6" component="h3" gutterBottom fontWeight="bold">
|
||
{feature.title}
|
||
</Typography>
|
||
<Typography variant="body2" color="text.secondary">
|
||
{feature.description}
|
||
</Typography>
|
||
</Box>
|
||
</Card>
|
||
</Box>
|
||
))}
|
||
</Box>
|
||
</Container>
|
||
</Box>
|
||
|
||
{/* 截图展示 */}
|
||
<Box sx={{ py: isMobile ? 6 : 10, px: 2 }}>
|
||
<Container maxWidth="lg">
|
||
<Typography variant={isMobile ? "h4" : "h3"} component="h2" align="center" gutterBottom fontWeight="bold">
|
||
界面展示
|
||
</Typography>
|
||
<Typography variant="body1" align="center" paragraph sx={{ mb: 8, maxWidth: 600, mx: 'auto', color: 'text.secondary' }}>
|
||
查看LeonPan的精美界面
|
||
</Typography>
|
||
|
||
{/* 截图切换标签 */}
|
||
{!isMobile && (
|
||
<Box sx={{ mb: 4, display: 'flex', justifyContent: 'center' }}>
|
||
<Tabs
|
||
value={currentTab}
|
||
onChange={(_, newValue) => setCurrentTab(newValue)}
|
||
variant="scrollable"
|
||
scrollButtons="auto"
|
||
indicatorColor="primary"
|
||
textColor="primary"
|
||
>
|
||
{screenshots.map((_, index) => (
|
||
<Tab key={index} label={`截图 ${index + 1}`} />
|
||
))}
|
||
</Tabs>
|
||
</Box>
|
||
)}
|
||
|
||
{/* 主要截图展示 */}
|
||
<Box sx={{ textAlign: 'center' }}>
|
||
<Card sx={{ display: 'inline-block', boxShadow: 5, borderRadius: 2, overflow: 'hidden', maxWidth: '100%' }}>
|
||
<CardMedia
|
||
component="img"
|
||
height={isMobile ? 250 : 400}
|
||
image={screenshots[currentTab]}
|
||
alt={`LeonPan 截图 ${currentTab + 1}`}
|
||
sx={{ objectFit: 'contain', maxWidth: '100%' }}
|
||
/>
|
||
</Card>
|
||
</Box>
|
||
|
||
{/* 移动端缩略图导航 */}
|
||
{isMobile && (
|
||
<Box sx={{ mt: 4, display: 'flex', gap: 2, justifyContent: 'center', overflowX: 'auto', pb: 2 }}>
|
||
{screenshots.map((screenshot, index) => (
|
||
<Button
|
||
key={index}
|
||
variant={currentTab === index ? "contained" : "outlined"}
|
||
size="small"
|
||
onClick={() => setCurrentTab(index)}
|
||
sx={{
|
||
minWidth: 60,
|
||
height: 60,
|
||
p: 1,
|
||
border: currentTab === index ? 0 : 1,
|
||
}}
|
||
>
|
||
<img
|
||
src={screenshot}
|
||
alt={`缩略图 ${index + 1}`}
|
||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||
/>
|
||
</Button>
|
||
))}
|
||
</Box>
|
||
)}
|
||
</Container>
|
||
</Box>
|
||
|
||
{/* 技术栈 */}
|
||
{/* <Box sx={{ py: isMobile ? 6 : 10, px: 2, bgcolor: 'grey.50' }}>
|
||
<Container maxWidth="lg">
|
||
<Typography variant={isMobile ? "h4" : "h3"} component="h2" align="center" gutterBottom fontWeight="bold">
|
||
技术栈
|
||
</Typography>
|
||
<Typography variant="body1" align="center" paragraph sx={{ mb: 8, maxWidth: 600, mx: 'auto', color: 'text.secondary' }}>
|
||
LeonPan基于现代技术栈开发，保证系统的高性能和稳定性
|
||
</Typography>
|
||
|
||
<Box sx={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: isMobile ? 3 : 4, width: '100%' }}>
|
||
{techStack.map((tech, index) => (
|
||
<Box sx={{ width: isMobile ? '100%' : isTablet ? 'calc(50% - 16px)' : 'calc(33.333% - 20px)', key: index }}>
|
||
<Card sx={{
|
||
height: '100%',
|
||
boxShadow: 2,
|
||
borderRadius: 2,
|
||
transition: 'transform 0.3s, box-shadow 0.3s',
|
||
'&:hover': {
|
||
transform: 'translateY(-3px)',
|
||
boxShadow: 4,
|
||
}
|
||
}}>
|
||
<CardContent>
|
||
<Typography variant="h6" component="h3" gutterBottom fontWeight="bold">
|
||
{tech.name}
|
||
</Typography>
|
||
<Box sx={{ mt: 2 }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
|
||
<Typography variant="caption" color="text.secondary" sx={{ minWidth: 40 }}>
|
||
熟练度
|
||
</Typography>
|
||
<Typography variant="caption" color="text.secondary">
|
||
{tech.level}%
|
||
</Typography>
|
||
</Box>
|
||
<Box sx={{
|
||
width: '100%',
|
||
height: 8,
|
||
bgcolor: 'grey.200',
|
||
borderRadius: 4,
|
||
overflow: 'hidden'
|
||
}}>
|
||
<Box sx={{
|
||
width: `${tech.level}%`,
|
||
height: '100%',
|
||
bgcolor: 'primary.main',
|
||
borderRadius: 4,
|
||
transition: 'width 0.5s ease-in-out'
|
||
}} />
|
||
</Box>
|
||
</Box>
|
||
</CardContent>
|
||
</Card>
|
||
</Box>
|
||
))}
|
||
</Box>
|
||
</Container>
|
||
</Box> */}
|
||
|
||
{/* 行动号召 */}
|
||
<Box sx={{ py: isMobile ? 8 : 12, px: 2, bgcolor: 'primary.main', color: 'white', textAlign: 'center' }}>
|
||
<Container maxWidth="md">
|
||
<Typography variant={isMobile ? "h4" : "h3"} component="h2" gutterBottom fontWeight="bold">
|
||
开始使用 LeonPan
|
||
</Typography>
|
||
<Typography variant="body1" paragraph sx={{ mb: 6, opacity: 0.9 }}>
|
||
立即体验LeonPan带来的高效文件管理体验，开源免费，功能强大
|
||
</Typography>
|
||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 3, justifyContent: 'center' }}>
|
||
<Button
|
||
variant="contained"
|
||
color="secondary"
|
||
size={isMobile ? "small" : "large"}
|
||
startIcon={<GitHub />}
|
||
sx={{ px: 4, py: 1.5 }}
|
||
onClick={() => window.open('http://leonmmcoset.jjxmm.win:2000/leonmmcoset/leonpan', '_blank')}
|
||
>
|
||
访问Git仓库
|
||
</Button>
|
||
<Button
|
||
variant="outlined"
|
||
color="inherit"
|
||
size={isMobile ? "small" : "large"}
|
||
startIcon={<Download />}
|
||
sx={{ px: 4, py: 1.5, borderColor: 'white', color: 'white', '&:hover': { borderColor: 'rgba(255,255,255,0.8)' } }}
|
||
onClick={() => window.open('http://leonmmcoset.jjxmm.win:5212/', '_blank')}
|
||
>
|
||
立即访问LeonAPP
|
||
</Button>
|
||
</Box>
|
||
</Container>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
} |