LeonMMcoset/leoncloud_temeplate
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

temeplate

Browse Source
This commit is contained in:
LeonMMcoset
2025-11-20 15:00:26 +08:00
parent e2885d6433
commit 392d553276
94 changed files with 249 additions and 3002 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/awa/first/page.tsx Normal file
View File

@@ -0,0 +1,20 @@
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import { Container } from '@mui/material';
export default function First() {
return (
<div>
<Container maxWidth="md" sx={{ py: { xs: 7, md: 16 }, textAlign: 'center' }}>
<Box sx={{ width: '100%', maxWidth: 500 }}>
<Typography variant='h1'>
First
</Typography><br />
<Typography>
在<code>/awa</code>底下的第一个页面
</Typography>
</Box>
</Container>
</div>
)
}

20
app/awa/second/page.tsx Normal file
View File

@@ -0,0 +1,20 @@
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import { Container } from '@mui/material';
export default function Second() {
return (
<div>
<Container maxWidth="md" sx={{ py: { xs: 7, md: 16 }, textAlign: 'center' }}>
<Box sx={{ width: '100%', maxWidth: 500 }}>
<Typography variant='h1'>
Second
</Typography><br />
<Typography>
在<code>/awa</code>底下的第二个页面
</Typography>
</Box>
</Container>
</div>
)
}

20
app/awa/third/page.tsx Normal file
View File

@@ -0,0 +1,20 @@
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import { Container } from '@mui/material';
export default function Third() {
return (
<div>
<Container maxWidth="md" sx={{ py: { xs: 7, md: 16 }, textAlign: 'center' }}>
<Box sx={{ width: '100%', maxWidth: 500 }}>
<Typography variant='h1'>
Third
</Typography><br />
<Typography>
在<code>/awa</code>底下的第三个页面
</Typography>
</Box>
</Container>
</div>
)
}

70
app/components/ClientLayout.tsx
View File

@@ -33,16 +33,6 @@ function colorLog(message: string, color: 'reset' | 'red' | 'green' | 'yellow' |
console.log(`${colors[color]}%s${colors.reset}`, message);
}
colorLog(`
_____ ______ __ __
| |_.-----.-----.-----.| | |.-----.--.--.--| |
| | -__| _ | || ---| || _ | | | _ |
|_______|_____|_____|__|__||______|__||_____|_____|_____|
`, 'blue')
colorLog('恭喜你发现了彩蛋！', 'red')
colorLog('LeonCloud是Leon突发奇想搞出来的 (=^ _ ^=)', 'green')
// 自定义内容标题样式
const StyledListHeader = styled(ListSubheader)({
backgroundImage: "var(--Paper-overlay)",
@@ -116,44 +106,44 @@ const ClientLayout: React.FC<ClientLayoutProps> = ({ children }) => {
type: 'link'
},
{
id: 'project',
label: '项目',
id: 'link',
label: 'Link',
href: '/test',
type: 'link'
},
{
id: 'Menu',
label: 'Menu',
href: '',
type: 'menu'
},
{
id: 'support',
label: '技术支持',
href: '/support',
type: 'link'
},
{
id: 'joinus',
label: '加入我们',
href: '/joinus',
type: 'link'
}
// {
// id: 'id',
// label: 'label',
// href: '/href',
// type: 'link'
// }
];
// 动态定义项目列表
const projectItems: ProjectItem[] = [
{
id: 'leonpan',
label: 'LeonPan',
href: '/project/leonpan',
category: 'Web'
id: 'first',
label: 'First',
href: '/awa/first',
category: '1'
},
{
id: 'leonapp',
label: 'LeonAPP',
href: '/project/leonapp',
category: 'Web'
id: 'second',
label: 'Second',
href: '/awa/second',
category: '1'
},
{
id: 'leonbasic',
label: 'LeonBasic',
href: '/project/leonbasic',
category: '其它'
id: 'third',
label: 'Third',
href: '/awa/third',
category: '2'
}
];
@@ -488,10 +478,10 @@ const ClientLayout: React.FC<ClientLayoutProps> = ({ children }) => {
mb: 6
}}>
<Typography variant="h5" gutterBottom fontWeight="bold">
LeonCloud
Test
</Typography>
<Typography variant="body1" sx={{ opacity: 0.8 }}>
LeonMMcoset的所有产品的运营商
这是页脚
</Typography>
</Box>
@@ -503,10 +493,10 @@ const ClientLayout: React.FC<ClientLayoutProps> = ({ children }) => {
}}></Box>
<Typography variant="body2" align="center" paragraph>
© {new Date().getFullYear()} LeonCloud. 保留所有权利。
© {new Date().getFullYear()} Test. 保留所有权利。
</Typography>
<Typography variant="caption" align="center" color="rgba(255,255,255,0.7)">
我们的宗旨是给用户提供简单、安全、高效、全方面的服务
你可以在ClientLayout.tsx修改这个页脚
</Typography>
</Container>
</Box>

412
app/joinus/page.tsx
View File

@@ -1,412 +0,0 @@
"use client";
import React from "react";
import Container from "@mui/material/Container";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import CardHeader from "@mui/material/CardHeader";
import Button from "@mui/material/Button";
import MailIcon from "@mui/icons-material/Mail";
import GroupIcon from "@mui/icons-material/Group";
import CodeIcon from "@mui/icons-material/Code";
import MessageIcon from "@mui/icons-material/Chat";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import Timeline from "@mui/lab/Timeline";
import TimelineItem from "@mui/lab/TimelineItem";
import TimelineSeparator from "@mui/lab/TimelineSeparator";
import TimelineConnector from "@mui/lab/TimelineConnector";
import TimelineContent from "@mui/lab/TimelineContent";
import TimelineDot from "@mui/lab/TimelineDot";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useTheme } from "@mui/material/styles";
import ClientLayout from "../components/ClientLayout";
const Joinus: React.FC = () => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const isMedium = useMediaQuery(theme.breakpoints.down('md'));
const handleEmailClick = () => {
window.location.href = 'mailto:leonmmcoset@outlook.com';
};
// 要求列表数据
const requirements = [
{ text: "能会至少一种编程语言的开发人员", icon: <CodeIcon /> },
{ text: "有良好的沟通能力和团队合作精神", icon: <MessageIcon /> },
{ text: "无违法前科", icon: <CheckCircleIcon /> },
{ text: "拥有微信或QQ账号", icon: <GroupIcon /> }
];
// 加入步骤数据
const steps = [
{
title: "发送申请",
description: "通过我们的邮箱发送你的申请意愿",
icon: <MailIcon />
},
{
title: "等待回复",
description: "我们会在三天内回复你的申请",
icon: <MessageIcon />
},
{
title: "加入群聊",
description: "获得微信/QQ内部群聊的邀请",
icon: <GroupIcon />
},
{
title: "讨论技术",
description: "在群聊中讨论你的技术方向和项目",
icon: <CodeIcon />
}
];
// 动画延迟函数
const getDelay = (index: number) => {
return `${index * 0.2}s`;
};
return (
<Container maxWidth="lg" sx={{ py: { xs: 8, md: 12 } }}>
{/* 页面标题 */}
<Box
sx={{
textAlign: 'center',
mb: { xs: 8, md: 12 },
animation: 'fadeInUp 0.8s ease-out',
'@keyframes fadeInUp': {
'from': {
opacity: 0,
transform: 'translateY(30px)'
},
'to': {
opacity: 1,
transform: 'translateY(0)'
}
}
}}
>
<Typography
variant={isMobile ? "h3" : "h2"}
component="h1"
gutterBottom
fontWeight="bold"
sx={{ color: 'primary.main' }}
>
加入我们
</Typography>
<Typography
variant="body1"
sx={{
maxWidth: 700,
mx: 'auto',
fontSize: { xs: '1rem', md: '1.125rem' },
lineHeight: 1.6
}}
>
我们是一个致力于推动技术创新的团队，致力于为客户提供高质量的服务。
加入我们，让我们的技术更上一层楼！
</Typography>
</Box>
{/* 要求部分 */}
<Box
sx={{
mb: { xs: 10, md: 16 },
animation: 'fadeInUp 0.8s ease-out 0.2s both',
}}
>
<Typography
variant="h4"
component="h2"
gutterBottom
sx={{
textAlign: 'center',
mb: { xs: 6, md: 8 },
position: 'relative',
'&::after': {
content: '""',
position: 'absolute',
bottom: -16,
left: '50%',
transform: 'translateX(-50%)',
width: 50,
height: 3,
backgroundColor: 'primary.main'
}
}}
>
我们需要
</Typography>
<Box
sx={{
display: 'grid',
gridTemplateColumns: {
xs: '1fr',
sm: '1fr 1fr',
md: '1fr 1fr 1fr 1fr'
},
gap: { xs: 4, md: 6 }
}}
>
{requirements.map((requirement, index) => (
<Card
key={index}
sx={{
height: '100%',
display: 'flex',
flexDirection: 'column',
transition: 'all 0.3s ease',
'&:hover': {
transform: 'translateY(-8px)',
boxShadow: '0 12px 20px rgba(0,0,0,0.1)',
},
animation: 'fadeInUp 0.6s ease-out both',
animationDelay: getDelay(index)
}}
elevation={2}
>
<CardHeader
avatar={
<Box sx={{
bgcolor: 'primary.light',
width: 50,
height: 50,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '50%',
color: 'primary.dark'
}}>
{requirement.icon}
</Box>
}
title={
<Typography
variant="h6"
component="div"
sx={{ fontWeight: 600 }}
>
{requirement.text}
</Typography>
}
/>
</Card>
))}
</Box>
<Box
sx={{
mt: 8,
textAlign: 'center',
animation: 'fadeInUp 0.8s ease-out 0.8s both',
}}
>
<Typography
variant="h6"
component="p"
sx={{
fontWeight: 600,
color: 'white',
backgroundColor: 'primary.light',
py: 2,
px: 4,
display: 'inline-block',
borderRadius: 2
}}
>
你只要满足以上条件，就可以加入我们的团队！
</Typography>
</Box>
</Box>
{/* 加入步骤 - 使用Timeline组件 */}
<Box
sx={{
mb: { xs: 10, md: 16 },
animation: 'fadeInUp 0.8s ease-out 0.4s both',
}}
>
<Typography
variant="h4"
component="h2"
gutterBottom
sx={{
textAlign: 'center',
mb: { xs: 8, md: 10 },
position: 'relative',
'&::after': {
content: '""',
position: 'absolute',
bottom: -16,
left: '50%',
transform: 'translateX(-50%)',
width: 50,
height: 3,
backgroundColor: 'primary.main'
}
}}
>
加入我们的步骤
</Typography>
<Box sx={{ px: { xs: 1, md: 4 } }}>
<Timeline position={isMobile ? "alternate" : "left"}>
{steps.map((step, index) => (
<TimelineItem key={index} sx={{ animation: 'fadeInUp 0.6s ease-out both', animationDelay: getDelay(index) }}>
<TimelineSeparator>
<TimelineDot
sx={{
bgcolor: 'primary.main',
color: 'white',
width: isMobile ? 48 : 56,
height: isMobile ? 48 : 56,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
'& .MuiSvgIcon-root': {
fontSize: isMobile ? 24 : 28
}
}}
>
{step.icon}
</TimelineDot>
{index < steps.length - 1 && <TimelineConnector sx={{ bgcolor: 'primary.light' }} />}
</TimelineSeparator>
<TimelineContent>
<Card
sx={{
maxWidth: isMobile ? '100%' : 600,
ml: isMobile ? 0 : 2,
transition: 'all 0.3s ease',
'&:hover': {
boxShadow: '0 8px 16px rgba(0,0,0,0.1)'
}
}}
elevation={3}
>
<CardContent sx={{ p: { xs: 3, md: 4 } }}>
<Typography
variant="h5"
component="h3"
gutterBottom
fontWeight="bold"
>
步骤 {index + 1}：{step.title}
</Typography>
<Typography
variant="body1"
sx={{
fontSize: { xs: '1rem', md: '1.0625rem' },
lineHeight: 1.7
}}
>
{step.description}
</Typography>
{index === 0 && (
<Button
variant="contained"
color="primary"
sx={{ mt: 3 }}
startIcon={<MailIcon />}
onClick={handleEmailClick}
>
立即发送申请
</Button>
)}
</CardContent>
</Card>
</TimelineContent>
</TimelineItem>
))}
</Timeline>
</Box>
</Box>
{/* CTA 区域 */}
<Box
sx={{
textAlign: 'center',
py: { xs: 8, md: 12 },
bgcolor: 'primary.light',
borderRadius: 4,
position: 'relative',
overflow: 'hidden',
animation: 'fadeInUp 0.8s ease-out 0.6s both',
'&::before': {
content: '""',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
bgcolor: 'primary.light',
opacity: 0.2,
zIndex: 0
}
}}
>
<Box sx={{ position: 'relative', zIndex: 1 }}>
<Typography
variant="h4"
component="h2"
gutterBottom
fontWeight="bold"
sx={{ color: 'white' }}
>
准备好加入我们了吗？
</Typography>
<Typography
variant="body1"
sx={{
maxWidth: 600,
mx: 'auto',
mb: 4,
fontSize: { xs: '1rem', md: '1.125rem' },
color: 'white'
}}
>
不要犹豫，立即发送邮件申请加入我们的团队！
</Typography>
<Button
variant="contained"
color="primary"
size={isMobile ? "large" : "medium"}
sx={{
px: { xs: 4, md: 5 },
py: { xs: 1.5, md: 1 },
fontWeight: 600,
'&:hover': {
transform: 'translateY(-2px)'
}
}}
startIcon={<MailIcon />}
onClick={handleEmailClick}
>
立即联系
</Button>
</Box>
</Box>
{/* 动画样式 */}
<style jsx global>{`
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
`}</style>
</Container>
);
};
export default Joinus;

4
app/layout.tsx
View File

@@ -5,8 +5,8 @@ import "./globals.css";
// 导出元数据
export const metadata: Metadata = {
title: "LeonCloud官网",
description: "LeonCloud（原LeonWeb）官网",
title: "Test模板",
description: "这是一个模板，改编于LeonCloud官网（https://jjmm.ink/）",
};
// 导入客户端组件

393
app/page.tsx
View File

@@ -1,383 +1,20 @@
'use client';
import { Box, Container, Typography, Card, CardContent, CardMedia, Button, useMediaQuery, useTheme } from '@mui/material';
import AttachFileIcon from '@mui/icons-material/AttachFile';
import PublicIcon from '@mui/icons-material/Public';
import WindowIcon from '@mui/icons-material/Window';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import { Container } from '@mui/material';
export default function Home() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const isTablet = useMediaQuery(theme.breakpoints.down('md'));
// 功能数据
const features = [
{
icon: <PublicIcon fontSize="large" color="primary" style={{ fontSize: isMobile ? 32 : 48 }} />,
title: "云端访问",
description: "随时随地访问您的项目和文件，无需担心设备限制"
},
{
icon: <WindowIcon fontSize="large" color="primary" style={{ fontSize: isMobile ? 32 : 48 }} />,
title: "响应式设计",
description: "完美适配各种设备，从手机到桌面电脑"
},
{
icon: <AttachFileIcon fontSize="large" color="primary" style={{ fontSize: isMobile ? 32 : 48 }} />,
title: "文件管理",
description: "高效管理您的所有项目文件，支持多种格式"
}
];
// 项目数据
const projects = [
{
name: "LeonPan",
description: "个人项目展示平台",
image: "/projects/leonpan/logo.png",
href: "/project/leonpan"
},
{
name: "LeonBasic",
description: "基于Rust的简单易学的编程语言",
image: "/nologo.png",
href: "/project/leonbasic"
},
{
name: "LeonApp",
description: "基于PHP的轻量级应用程序",
image: "/projects/leonapp/logo.jpeg",
href: "/project/leonapp"
},
];
// 扩展服务类别数据
const services = [
{
name: "云盘服务",
description: "安全可靠的云存储解决方案",
icon: <AttachFileIcon />
},
{
name: "社区论坛",
description: "用户交流与分享的平台",
icon: <PublicIcon />
},
{
name: "编程语言",
description: "创新的编程语言开发",
icon: <WindowIcon />
},
{
name: "操作系统",
description: "轻量级操作系统解决方案",
icon: <WindowIcon />
},
{
name: "我的世界服务器",
description: "稳定高效的游戏服务器",
icon: <PublicIcon />
},
{
name: "加密语言",
description: "安全通信解决方案",
icon: <AttachFileIcon />
}
];
return (
<Box sx={{ minHeight: '100vh', bgcolor: 'background.default' }}>
{/* 英雄区域 */}
<Box sx={{
bgcolor: 'primary.main',
color: 'white',
py: isMobile ? 10 : 16,
px: 2,
textAlign: 'center',
position: 'relative',
overflow: 'hidden',
'&::before': {
content: '""',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
background: 'radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%)',
zIndex: 1
}
}}>
<Container maxWidth="md" sx={{ position: 'relative', zIndex: 2 }}>
<Typography
variant={isMobile ? "h3" : "h2"}
component="h1"
gutterBottom
fontWeight="bold"
sx={{ mb: 3 }}
>
LeonCloud
</Typography>
<Typography
variant={isMobile ? "h6" : "h5"}
paragraph
sx={{ mb: 6, opacity: 0.9 }}
>
LeonMMcoset的所有产品的运营商
</Typography>
<Typography
variant="body1"
paragraph
sx={{
maxWidth: 600,
mx: 'auto',
opacity: 0.8,
mb: 8,
fontSize: isMobile ? '1rem' : '1.1rem'
}}
>
覆盖云盘、论坛、编程语言、操作系统、我的世界服务器、加密语言等各种服务
</Typography>
<Typography
variant="body1"
paragraph
sx={{
fontWeight: 'bold',
fontSize: isMobile ? '1rem' : '1.1rem',
backgroundColor: 'rgba(255,255,255,0.1)',
py: 2,
px: 4,
borderRadius: 2,
display: 'inline-block'
}}
>
我们的宗旨是给用户提供简单、安全、高效、全方面的服务
</Typography>
</Container>
<div>
<Container maxWidth="md" sx={{ py: { xs: 7, md: 16 }, textAlign: 'center' }}>
<Box sx={{ width: '100%', maxWidth: 500 }}>
<Typography variant='h1'>
这是主页
</Typography><br />
<Typography>
这个模板主要是mui库，官网：https://mui.com/material-ui/
</Typography>
</Box>
{/* 服务介绍区域 */}
<Box sx={{ py: isMobile ? 8 : 12, px: 2 }}>
<Container maxWidth="lg">
<Typography
variant={isMobile ? "h4" : "h3"}
component="h2"
align="center"
gutterBottom
fontWeight="bold"
sx={{ mb: 6 }}
>
我们的服务
</Typography>
<Box sx={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'center',
gap: { xs: 3, md: 4 }
}}>
{services.map((service, index) => (
<Box
key={index}
sx={{
width: { xs: '100%', sm: 'calc(50% - 16px)', md: 'calc(33.333% - 16px)' },
maxWidth: { xs: '100%', sm: 400, md: 350 },
bgcolor: 'background.paper',
borderRadius: 3,
boxShadow: 2,
p: 4,
transition: 'all 0.3s ease',
'&:hover': {
transform: 'translateY(-5px)',
boxShadow: 4,
},
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center'
}}
>
<Box sx={{
mb: 3,
color: 'primary.main',
fontSize: isMobile ? 2.5 : 3
}}>
{service.icon}
</Box>
<Typography variant="h6" gutterBottom fontWeight="bold">
{service.name}
</Typography>
<Typography variant="body2" color="text.secondary">
{service.description}
</Typography>
</Box>
))}
</Box>
</Container>
</Box>
{/* 项目展示区域 */}
<Box sx={{
py: isMobile ? 8 : 12,
px: 2,
bgcolor: 'grey.50'
}}>
<Container maxWidth="lg">
<Typography
variant={isMobile ? "h4" : "h3"}
component="h2"
align="center"
gutterBottom
fontWeight="bold"
sx={{ mb: 6 }}
>
精选项目
</Typography>
<Box sx={{
display: 'flex',
justifyContent: 'center',
gap: 4
}}>
{projects.map((project, index) => (
<Card
key={index}
sx={{
width: { xs: '100%', sm: 400, md: 500 },
maxWidth: '100%',
borderRadius: 3,
boxShadow: 3,
transition: 'all 0.3s ease',
'&:hover': {
transform: 'translateY(-5px)',
boxShadow: 6,
}
}}
>
<CardMedia
component="img"
height={200}
image={project.image}
alt={project.name}
sx={{ objectFit: 'contain', padding: 3, bgcolor: 'background.paper' }}
/>
<CardContent sx={{ textAlign: 'center' }}>
<Typography variant="h5" component="h3" gutterBottom fontWeight="bold">
{project.name}
</Typography>
<Typography variant="body1" color="text.secondary" paragraph sx={{ mb: 3 }}>
{project.description}
</Typography>
<Button
variant="contained"
color="primary"
size="large"
href={project.href}
fullWidth
sx={{ py: 1.2 }}
>
查看详情
</Button>
</CardContent>
</Card>
))}
</Box>
</Container>
</Box>
{/* 优势亮点 */}
<Box sx={{ py: isMobile ? 8 : 12, px: 2 }}>
<Container maxWidth="lg">
<Typography
variant={isMobile ? "h4" : "h3"}
component="h2"
align="center"
gutterBottom
fontWeight="bold"
sx={{ mb: 6 }}
>
我们的优势
</Typography>
<Box sx={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'center',
gap: { xs: 4, md: 6 }
}}>
<Box sx={{
width: { xs: '100%', md: '45%' },
maxWidth: 500,
textAlign: isMobile ? 'center' : 'left',
mb: { xs: 4, md: 0 }
}}>
{features.map((feature, index) => (
<Box
key={index}
sx={{
display: 'flex',
flexDirection: isMobile ? 'column' : 'row',
alignItems: isMobile ? 'center' : 'flex-start',
mb: 4,
gap: 3
}}
>
<Box sx={{ color: 'primary.main' }}>
{feature.icon}
</Box>
<Box>
<Typography variant="h6" gutterBottom fontWeight="bold">
{feature.title}
</Typography>
<Typography variant="body2" color="text.secondary">
{feature.description}
</Typography>
</Box>
</Box>
))}
</Box>
<Box sx={{
width: { xs: '100%', md: '45%' },
maxWidth: 500,
bgcolor: 'primary.main',
color: 'white',
p: 6,
borderRadius: 3,
boxShadow: 4,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center'
}}>
<Typography variant={isMobile ? "h5" : "h4"} gutterBottom fontWeight="bold">
我们的承诺
</Typography>
<Box sx={{ height: 2, bgcolor: 'white', opacity: 0.3, mb: 4 }}></Box>
<ul style={{ paddingLeft: isMobile ? 0 : 20, margin: 0, listStyleType: isMobile ? 'none' : 'disc' }}>
<li style={{ marginBottom: 16, fontSize: isMobile ? '0.9rem' : '1rem' }}>
简单易用的界面设计
</li>
<li style={{ marginBottom: 16, fontSize: isMobile ? '0.9rem' : '1rem' }}>
企业级安全保障
</li>
<li style={{ marginBottom: 16, fontSize: isMobile ? '0.9rem' : '1rem' }}>
高效稳定的系统性能
</li>
<li style={{ marginBottom: 16, fontSize: isMobile ? '0.9rem' : '1rem' }}>
全方面的服务支持
</li>
<li style={{ fontSize: isMobile ? '0.9rem' : '1rem' }}>
持续创新的技术研发
</li>
</ul>
</Box>
</Box>
</Container>
</Box>
</Box>
);
</Container>
</div>
)
}

502
app/project/leonapp/page.tsx
View File

@@ -1,502 +0,0 @@
"use client";
import {
Card,
CardContent,
Typography,
Button,
Grid,
Box,
Container,
ImageList,
ImageListItem,
Link as MuiLink,
} from "@mui/material";
import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
import GitHubIcon from "@mui/icons-material/GitHub";
import PublicIcon from "@mui/icons-material/Public";
import CodeIcon from "@mui/icons-material/Code";
import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
import SmartphoneIcon from "@mui/icons-material/Smartphone";
import RefreshIcon from "@mui/icons-material/Refresh";
import LinkIcon from "@mui/icons-material/Link";
export default function LeonAPP() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const isMedium = useMediaQuery(theme.breakpoints.down("md"));
// 项目特点
const features = [
{
icon: (
<ShoppingCartIcon
color="primary"
style={{ fontSize: isMobile ? 24 : 32 }}
/>
),
title: "应用商城",
description: "提供各类应用和工具的展示与下载服务",
},
{
icon: (
<SmartphoneIcon
color="primary"
style={{ fontSize: isMobile ? 24 : 32 }}
/>
),
title: "移动友好",
description: "完全适配移动设备，提供流畅的用户体验",
},
{
icon: (
<RefreshIcon color="primary" style={{ fontSize: isMobile ? 24 : 32 }} />
),
title: "持续更新",
description: "v2版本正在开发中，将带来全新的设计和实现",
},
{
icon: (
<CodeIcon color="primary" style={{ fontSize: isMobile ? 24 : 32 }} />
),
title: "开源项目",
description: "采用MIT开源协议，鼓励社区参与和贡献",
},
];
return (
<Container maxWidth="lg" sx={{ py: { xs: 4, md: 8 } }}>
{/* 英雄区域 */}
<Box
sx={{
textAlign: "center",
mb: { xs: 6, md: 10 },
p: { xs: 4, md: 8 },
borderRadius: 4,
background:
"linear-gradient(135deg, rgba(63,81,181,0.05) 0%, rgba(63,81,181,0.1) 100%)",
}}
>
<Typography
variant="h3"
component="h1"
gutterBottom
sx={{ fontWeight: 700, mb: 3 }}
>
LeonAPP
</Typography>
<Typography variant="h6" color="text.secondary" gutterBottom>
开源应用商城平台
</Typography>
<Typography
variant="body1"
sx={{
maxWidth: 600,
mx: "auto",
fontSize: { xs: "1rem", md: "1.1rem" },
}}
>
一个简单而强大的应用商城系统，由LeonCloud和武汉喵星创想互联网科技有限公司开发维护，致力于提供优质的应用分发服务。
</Typography>
<Box
sx={{
mt: 6,
display: "flex",
gap: 2,
justifyContent: "center",
flexWrap: "wrap",
}}
>
<Button
variant="contained"
startIcon={<PublicIcon />}
href="https://leon.miaostars.com"
target="_blank"
rel="noopener noreferrer"
sx={{ px: 3, py: 1.2 }}
>
访问官网
</Button>
<Button
variant="outlined"
startIcon={<GitHubIcon />}
href="http://leonmmcoset.jjxmm.win:2000/LeonMMcoset/leonapp"
target="_blank"
rel="noopener noreferrer"
sx={{ px: 3, py: 1.2 }}
>
开源仓库
</Button>
</Box>
</Box>
{/* 项目概述 */}
<Box sx={{ mb: { xs: 8, md: 12 } }}>
<Typography
variant="h4"
component="h2"
gutterBottom
sx={{ mb: 4, fontWeight: 600 }}
>
项目概述
</Typography>
<Grid container spacing={4}>
<Grid size={{ xs: 12, md: 6 }}>
<Typography variant="body1" sx={{ mb: 3, lineHeight: 1.8 }}>
LeonAPP是一个开源的应用商城项目，旨在为开发者提供一个简单易用的应用分发平台。
项目由LeonCloud和武汉喵星创想互联网科技有限公司共同拥有和维护，致力于打造一个开放、透明的应用生态系统。
</Typography>
<Typography variant="body1" sx={{ mb: 3, lineHeight: 1.8 }}>
目前LeonAPP
v1版本已发布，基于PHP和HTML5技术栈实现。同时，我们正在开发LeonAPP
v2版本，
该版本将完全重写，采用现代化的技术架构，提供更好的用户体验和更强大的功能。
</Typography>
<Typography variant="body1" sx={{ lineHeight: 1.8 }}>
项目采用MIT开源协议（PC客户端使用GPLv3开源），欢迎社区开发者参与贡献和改进。
</Typography>
</Grid>
<Grid size={{ xs: 12, md: 6 }}>
<Card sx={{ height: "100%", boxShadow: 3, borderRadius: 2 }}>
<CardContent>
<Typography
variant="h6"
gutterBottom
sx={{ mb: 2, fontWeight: 600 }}
>
平台特点
</Typography>
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
{features.map((feature, index) => (
<Box
key={index}
sx={{ display: "flex", alignItems: "flex-start", gap: 2 }}
>
<Box sx={{ color: theme.palette.primary.main, mt: 0.5 }}>
{feature.icon}
</Box>
<Box>
<Typography
variant="subtitle1"
sx={{ fontWeight: 600 }}
>
{feature.title}
</Typography>
<Typography variant="body2" color="text.secondary">
{feature.description}
</Typography>
</Box>
</Box>
))}
</Box>
</CardContent>
</Card>
</Grid>
</Grid>
</Box>
{/* 版本信息 */}
<Box sx={{ mb: { xs: 8, md: 12 } }}>
<Typography
variant="h4"
component="h2"
gutterBottom
sx={{ mb: 4, fontWeight: 600 }}
>
版本信息
</Typography>
<Grid container spacing={4}>
<Grid size={{ xs: 12, md: 6 }}>
<Card sx={{ height: "100%", boxShadow: 2, borderRadius: 2 }}>
<CardContent>
<Typography
variant="h6"
gutterBottom
sx={{
mb: 2,
fontWeight: 600,
color: theme.palette.primary.main,
}}
>
LeonAPP v1
</Typography>
<Typography
variant="body2"
color="text.secondary"
sx={{ mb: 2 }}
>
当前稳定版本
</Typography>
<Typography variant="body1" sx={{ mb: 3 }}>
基于PHP和HTML5技术栈实现的应用商城系统，提供基本的应用展示和下载功能。
</Typography>
<Button
variant="outlined"
size="small"
startIcon={<GitHubIcon />}
href="http://leonmmcoset.jjxmm.win:2000/LeonMMcoset/leonapp"
target="_blank"
rel="noopener noreferrer"
>
查看源码
</Button>
</CardContent>
</Card>
</Grid>
<Grid size={{ xs: 12, md: 6 }}>
<Card
sx={{
height: "100%",
boxShadow: 2,
borderRadius: 2,
borderLeft: `4px solid ${theme.palette.primary.main}`,
}}
>
<CardContent>
<Typography
variant="h6"
gutterBottom
sx={{
mb: 2,
fontWeight: 600,
color: theme.palette.primary.main,
}}
>
LeonAPP v2
</Typography>
<Typography
variant="body2"
color="text.secondary"
sx={{ mb: 2 }}
>
开发中
</Typography>
<Typography variant="body1" sx={{ mb: 3 }}>
全新重写的版本，将抛弃原有所有代码，采用现代化技术栈重新设计和实现，提供更优质的用户体验。
</Typography>
<Button
variant="outlined"
size="small"
disabled
startIcon={<RefreshIcon />}
>
开发中
</Button>
</CardContent>
</Card>
</Grid>
</Grid>
</Box>
{/* 截图展示 */}
<Box sx={{ mb: { xs: 8, md: 12 } }}>
<Typography
variant="h4"
component="h2"
gutterBottom
sx={{ mb: 4, fontWeight: 600 }}
>
截图展示
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
LeonAPP v1界面预览
</Typography>
<ImageList
sx={{ width: "100%", height: "auto" }}
cols={isMobile ? 1 : isMedium ? 2 : 3}
rowHeight={250}
>
<ImageListItem>
<img
src="/projects/leonapp/img1.png"
alt="LeonAPP v1截图1"
loading="lazy"
style={{
borderRadius: "8px",
width: "100%",
height: "100%",
objectFit: "cover",
}}
/>
</ImageListItem>
<ImageListItem>
<img
src="/projects/leonapp/img2.png"
alt="LeonAPP v1截图2"
loading="lazy"
style={{
borderRadius: "8px",
width: "100%",
height: "100%",
objectFit: "cover",
}}
/>
</ImageListItem>
<ImageListItem>
<img
src="/projects/leonapp/img3.png"
alt="LeonAPP v1截图3"
loading="lazy"
style={{
borderRadius: "8px",
width: "100%",
height: "100%",
objectFit: "cover",
}}
/>
</ImageListItem>
</ImageList>
</Box>
{/* 资源链接 */}
<Box sx={{ mb: 6 }}>
<Typography
variant="h4"
component="h2"
gutterBottom
sx={{ mb: 4, fontWeight: 600 }}
>
相关资源
</Typography>
<Grid container spacing={3}>
<Grid size={{ xs: 12, sm: 6, md: 4 }}>
<Card
sx={{
height: "100%",
transition: "transform 0.2s",
"&:hover": { transform: "translateY(-5px)" },
}}
>
<CardContent>
<LinkIcon
sx={{
fontSize: 40,
mb: 2,
color: theme.palette.primary.main,
}}
/>
<Typography variant="h6" gutterBottom>
官方网站
</Typography>
<Typography
variant="body2"
color="text.secondary"
sx={{ mb: 3 }}
>
访问LeonAPP官方网站，体验完整功能
</Typography>
<Button
variant="contained"
fullWidth
href="https://leon.miaostars.com"
target="_blank"
rel="noopener noreferrer"
>
立即访问
</Button>
</CardContent>
</Card>
</Grid>
<Grid size={{ xs: 12, sm: 6, md: 4 }}>
<Card
sx={{
height: "100%",
transition: "transform 0.2s",
"&:hover": { transform: "translateY(-5px)" },
}}
>
<CardContent>
<GitHubIcon
sx={{
fontSize: 40,
mb: 2,
color: theme.palette.primary.main,
}}
/>
<Typography variant="h6" gutterBottom>
开源仓库
</Typography>
<Typography
variant="body2"
color="text.secondary"
sx={{ mb: 3 }}
>
查看源码，参与贡献，了解项目技术细节
</Typography>
<Button
variant="outlined"
fullWidth
href="http://leonmmcoset.jjxmm.win:2000/LeonMMcoset/leonapp"
target="_blank"
rel="noopener noreferrer"
>
前往仓库
</Button>
</CardContent>
</Card>
</Grid>
<Grid size={{ xs: 12, sm: 6, md: 4 }}>
<Card
sx={{
height: "100%",
transition: "transform 0.2s",
"&:hover": { transform: "translateY(-5px)" },
}}
>
<CardContent>
<CodeIcon
sx={{
fontSize: 40,
mb: 2,
color: theme.palette.primary.main,
}}
/>
<Typography variant="h6" gutterBottom>
技术栈
</Typography>
<Typography
variant="body2"
color="text.secondary"
sx={{ mb: 3 }}
>
v1: PHP + HTML5
<br />
v2: 开发中...
</Typography>
<Button
variant="outlined"
fullWidth
href="http://leonmmcoset.jjxmm.win:2000/LeonMMcoset/leonapp"
target="_blank"
rel="noopener noreferrer"
>
了解更多
</Button>
</CardContent>
</Card>
</Grid>
</Grid>
</Box>
{/* 页脚 */}
<Box
sx={{
mt: 12,
pt: 6,
borderTop: "1px solid",
borderColor: "divider",
textAlign: "center",
}}
>
<Typography variant="body2" color="text.secondary">
© {new Date().getFullYear()} LeonCloud &
武汉喵星创想互联网科技有限公司
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
LeonAPP - 开源应用商城平台
</Typography>
</Box>
</Container>
);
}

256
app/project/leonbasic/page.tsx
View File

@@ -1,256 +0,0 @@
'use client';
import { Card, CardContent, Typography, Button, Grid, Box, Container } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
import CodeIcon from '@mui/icons-material/Code';
import GitHubIcon from '@mui/icons-material/GitHub';
import PublicIcon from '@mui/icons-material/Public';
import TerminalIcon from '@mui/icons-material/Terminal';
import BookIcon from '@mui/icons-material/Book';
import { Book } from '@mui/icons-material';
export default function LeonBasic() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const isMedium = useMediaQuery(theme.breakpoints.down('md'));
// 项目特点数据
const features = [
{
icon: <CodeIcon color="primary" style={{ fontSize: isMobile ? 24 : 32 }} />,
title: '简单易学',
description: '语法简洁明了，适合编程初学者快速入门'
},
{
icon: <TerminalIcon color="primary" style={{ fontSize: isMobile ? 24 : 32 }} />,
title: '基于Rust',
description: '底层使用Rust实现，保证高性能和内存安全'
},
{
icon: <BookIcon color="primary" style={{ fontSize: isMobile ? 24 : 32 }} />,
title: '混合语法',
description: '融合了Python的简洁和Swift的现代语法特性'
},
{
icon: <EmojiEventsIcon color="primary" style={{ fontSize: isMobile ? 24 : 32 }} />,
title: '高性能',
description: '编译型语言，运行效率高，资源占用少'
}
];
// 示例代码
const exampleCode = `// LeonBasic示例代码
require("basic");
var(input) = basic.input(string:"");
basic.print(string:"请输入一个数字:" + var(input));`;
return (
<Container maxWidth="lg" sx={{ py: { xs: 4, md: 8 } }}>
{/* 标题部分 */}
<Box
sx={{
textAlign: 'center',
mb: { xs: 6, md: 10 },
p: { xs: 4, md: 8 },
borderRadius: 4,
background: 'linear-gradient(135deg, rgba(103,58,183,0.05) 0%, rgba(103,58,183,0.1) 100%)'
}}
>
<Typography variant="h3" component="h1" gutterBottom sx={{ fontWeight: 700, mb: 3 }}>
LeonBasic
</Typography>
<Typography variant="h6" color="text.secondary" gutterBottom>
The LeonBasic Programming Language
</Typography>
<Typography variant="body1" sx={{ maxWidth: 600, mx: 'auto', fontSize: { xs: '1rem', md: '1.1rem' } }}>
一个简单易懂的编程语言，专为初学者设计，基于Rust实现，融合了Python的简洁和Swift的现代语法特性。
</Typography>
<Box sx={{ mt: 6, display: 'flex', gap: 2, justifyContent: 'center', flexWrap: 'wrap' }}>
<Button
variant="contained"
startIcon={<GitHubIcon />}
href="https://github.com/LeonMMcoset/LeonLang"
target="_blank"
rel="noopener noreferrer"
sx={{ px: 3, py: 1.2 }}
>
项目仓库
</Button>
<Button
variant="outlined"
startIcon={<PublicIcon />}
href="https://lb.jjmm.ink/"
target="_blank"
rel="noopener noreferrer"
sx={{ px: 3, py: 1.2 }}
>
官方网站
</Button>
</Box>
</Box>
{/* 项目概述 */}
<Box sx={{ mb: { xs: 8, md: 12 } }}>
<Typography variant="h4" component="h2" gutterBottom sx={{ mb: 4, fontWeight: 600 }}>
项目概述
</Typography>
<Grid container spacing={4}>
<Grid size={{ xs: 12, md: 6 }}>
<Typography variant="body1" sx={{ mb: 3, lineHeight: 1.8 }}>
LeonBasic是一门专为编程初学者设计的编程语言，旨在降低编程学习的门槛，同时保持良好的性能和现代语言特性。
该语言基于Rust实现，结合了Python的易读性和Swift的语法优雅，让初学者能够快速上手，同时也能接触到现代编程语言的核心概念。
</Typography>
<Typography variant="body1" sx={{ mb: 3, lineHeight: 1.8 }}>
无论是完全没有编程经验的新手，还是想要了解不同编程范式的开发者，都能从LeonBasic中获益。
简单易学的语法设计让学习过程更加轻松愉快，同时Rust的底层实现又保证了程序的性能和安全性。
</Typography>
</Grid>
<Grid size={{ xs: 12, md: 6 }}>
<Card sx={{ height: '100%', boxShadow: 3, borderRadius: 2 }}>
<CardContent>
<Typography variant="h6" gutterBottom sx={{ mb: 2, fontWeight: 600 }}>
语言特点
</Typography>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
{features.map((feature, index) => (
<Box key={index} sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
<Box sx={{ color: theme.palette.primary.main, mt: 0.5 }}>
{feature.icon}
</Box>
<Box>
<Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
{feature.title}
</Typography>
<Typography variant="body2" color="text.secondary">
{feature.description}
</Typography>
</Box>
</Box>
))}
</Box>
</CardContent>
</Card>
</Grid>
</Grid>
</Box>
{/* 语法示例 */}
<Box sx={{ mb: { xs: 8, md: 12 } }}>
<Typography variant="h4" component="h2" gutterBottom sx={{ mb: 4, fontWeight: 600 }}>
语法示例
</Typography>
<Card sx={{ backgroundColor: '#f5f5f5', borderRadius: 2, overflow: 'hidden' }}>
<Box
sx={{
p: 3,
fontSize: { xs: '0.875rem', md: '1rem' },
fontFamily: 'monospace',
lineHeight: 1.6,
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
color: '#333',
maxHeight: 400,
overflowY: 'auto',
'&::-webkit-scrollbar': {
width: '6px',
},
'&::-webkit-scrollbar-track': {
background: '#f1f1f1',
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: '#888',
borderRadius: '3px',
},
}}
>
{exampleCode}
</Box>
</Card>
</Box>
{/* 资源链接 */}
<Box sx={{ mb: 6 }}>
<Typography variant="h4" component="h2" gutterBottom sx={{ mb: 4, fontWeight: 600 }}>
相关资源
</Typography>
<Grid container spacing={3}>
<Grid size={{ xs: 12, sm: 6, md: 4 }}>
<Card sx={{ height: '100%', transition: 'transform 0.2s', '&:hover': { transform: 'translateY(-5px)' } }}>
<CardContent>
<GitHubIcon sx={{ fontSize: 40, mb: 2, color: theme.palette.primary.main }} />
<Typography variant="h6" gutterBottom>
GitHub 仓库
</Typography>
<Typography variant="body2" color="text.secondary" gutterBottom>
查看源码，参与贡献，提交问题反馈
</Typography>
<Button
variant="outlined"
fullWidth
href="https://github.com/LeonMMcoset/LeonLang"
target="_blank"
rel="noopener noreferrer"
>
访问仓库
</Button>
</CardContent>
</Card>
</Grid>
<Grid size={{ xs: 12, sm: 6, md: 4 }}>
<Card sx={{ height: '100%', transition: 'transform 0.2s', '&:hover': { transform: 'translateY(-5px)' } }}>
<CardContent>
<PublicIcon sx={{ fontSize: 40, mb: 2, color: theme.palette.primary.main }} />
<Typography variant="h6" gutterBottom>
官方网站
</Typography>
<Typography variant="body2" color="text.secondary" gutterBottom>
完整的文档，教程和示例
</Typography>
<Button
variant="outlined"
fullWidth
href="https://lb.jjmm.ink/"
target="_blank"
rel="noopener noreferrer"
>
访问官网
</Button>
</CardContent>
</Card>
</Grid>
<Grid size={{ xs: 12, sm: 6, md: 4 }}>
<Card sx={{ height: '100%', transition: 'transform 0.2s', '&:hover': { transform: 'translateY(-5px)' } }}>
<CardContent>
<BookIcon sx={{ fontSize: 40, mb: 2, color: theme.palette.primary.main }} />
<Typography variant="h6" gutterBottom>
学习资源
</Typography>
<Typography variant="body2" color="text.secondary" gutterBottom>
入门教程，示例代码和最佳实践
</Typography>
<Button
variant="outlined"
fullWidth
href="https://github.com/Leonmmcoset/LeonLang/tree/master/test"
target="_blank"
rel="noopener noreferrer"
>
查看文档
</Button>
</CardContent>
</Card>
</Grid>
</Grid>
</Box>
{/* 页脚 */}
<Box sx={{ textAlign: 'center', mt: 12, pt: 4, borderTop: '1px solid rgba(0,0,0,0.1)' }}>
<Typography variant="body2" color="text.secondary">
© {new Date().getFullYear()} LeonMMcoset
</Typography>
</Box>
</Container>
);
}

357
app/project/leonpan/page.tsx
View File

@@ -1,357 +0,0 @@
'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>
);
}

396
app/support/page.tsx
View File

@@ -1,396 +0,0 @@
"use client";
import React from "react";
import Container from "@mui/material/Container";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import CardHeader from "@mui/material/CardHeader";
import Button from "@mui/material/Button";
import MailIcon from "@mui/icons-material/Mail";
import SupportIcon from "@mui/icons-material/SupportAgent";
import CodeIcon from "@mui/icons-material/Code";
import WorkIcon from "@mui/icons-material/Work";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useTheme } from "@mui/material/styles";
import ClientLayout from "../components/ClientLayout";
export default function SupportPage() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const isMedium = useMediaQuery(theme.breakpoints.down('md'));
const handleEmailClick = () => {
window.location.href = 'mailto:leonmmcoset@outlook.com';
};
return (
<div>
<Container maxWidth="lg" sx={{ py: { xs: 8, md: 12 } }}>
{/* 页面标题 */}
<Box
sx={{
textAlign: 'center',
mb: { xs: 8, md: 12 },
opacity: 0,
transform: 'translateY(20px)',
animation: 'fadeInUp 0.8s ease-out forwards'
}}
>
<Typography
variant={isMobile ? 'h3' : 'h2'}
component="h1"
gutterBottom
sx={{
fontWeight: 700,
color: theme.palette.primary.main,
mb: 2
}}
>
技术支持服务
</Typography>
<Typography
variant="body1"
sx={{
maxWidth: '700px',
margin: '0 auto',
color: 'text.secondary',
fontSize: { xs: '1rem', md: '1.1rem' },
lineHeight: 1.6
}}
>
如果您在使用开源项目时遇到问题，或者需要外包项目开发，我们随时为您提供专业的技术支持
</Typography>
</Box>
{/* 服务介绍卡片 */}
<Box
sx={{
display: 'grid',
gridTemplateColumns: isMobile
? '1fr'
: isMedium
? 'repeat(2, 1fr)'
: 'repeat(3, 1fr)',
gap: { xs: 4, md: 6 },
mb: { xs: 12, md: 16 },
'& > *': {
opacity: 0,
transform: 'translateY(30px)',
animation: 'fadeInUp 0.6s ease-out forwards'
},
'& > *:nth-child(1)': { animationDelay: '0.2s' },
'& > *:nth-child(2)': { animationDelay: '0.4s' },
'& > *:nth-child(3)': { animationDelay: '0.6s' }
}}
>
{/* 支持介绍卡片 */}
<Card
elevation={3}
sx={{
borderRadius: '12px',
overflow: 'hidden',
transition: 'all 0.3s ease',
'&:hover': {
transform: 'translateY(-8px)',
boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
elevation: 5
}
}}
>
<CardHeader
avatar={
<Box sx={{ bgcolor: theme.palette.primary.light, p: 2, borderRadius: '50%' }}>
<SupportIcon fontSize="large" color="primary" />
</Box>
}
title="我们的服务"
titleTypographyProps={{
variant: 'h6',
fontWeight: 600
}}
/>
<CardContent>
<Typography variant="body1" paragraph sx={{ lineHeight: 1.6 }}>
如果您在使用一些开源项目遇到问题，需要帮助或者是外包项目，欢迎联系我们。
</Typography>
<Typography variant="body1" paragraph sx={{ lineHeight: 1.6 }}>
我们将提供最优质的服务，确保您的问题得到及时解决。
</Typography>
</CardContent>
</Card>
{/* 价格卡片 */}
<Card
elevation={3}
sx={{
borderRadius: '12px',
overflow: 'hidden',
transition: 'all 0.3s ease',
'&:hover': {
transform: 'translateY(-8px)',
boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
elevation: 5
}
}}
>
<CardHeader
avatar={
<Box sx={{ bgcolor: theme.palette.primary.light, p: 2, borderRadius: '50%' }}>
<CodeIcon fontSize="large" color="primary" />
</Box>
}
title="支持价格"
titleTypographyProps={{
variant: 'h6',
fontWeight: 600
}}
/>
<CardContent>
<Box sx={{ mb: 2, p: 2, bgcolor: 'primary.main', color: 'white', borderRadius: '8px' }}>
<Typography variant="body1" paragraph sx={{ fontWeight: 600 }}>
普通技术支持：￥20每次
</Typography>
</Box>
<Box sx={{ p: 2, bgcolor: 'primary.light', color: "white", borderRadius: '8px' }}>
<Typography variant="body1" paragraph sx={{ fontWeight: 600 }}>
外包项目：￥40/项目（大型项目￥70/项目）
</Typography>
</Box>
</CardContent>
</Card>
{/* 联系卡片 */}
<Card
elevation={3}
sx={{
borderRadius: '12px',
overflow: 'hidden',
transition: 'all 0.3s ease',
'&:hover': {
transform: 'translateY(-8px)',
boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
elevation: 5
}
}}
>
<CardHeader
avatar={
<Box sx={{ bgcolor: theme.palette.primary.light, p: 2, borderRadius: '50%' }}>
<MailIcon fontSize="large" color="primary" />
</Box>
}
title="联系我们"
titleTypographyProps={{
variant: 'h6',
fontWeight: 600
}}
/>
<CardContent>
<Typography variant="body1" paragraph sx={{ lineHeight: 1.6, mb: 3 }}>
如有需求请通过以下方式联系我们，我们会尽快回复您的咨询。
</Typography>
<Button
variant="contained"
startIcon={<MailIcon />}
onClick={handleEmailClick}
fullWidth
sx={{
py: 1.5,
borderRadius: '8px',
fontWeight: 600,
transition: 'all 0.3s ease',
'&:hover': {
transform: 'translateY(-2px)',
boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
}
}}
>
发送邮件咨询
</Button>
<Typography variant="body2" color="text.secondary" align="center" sx={{ mt: 2 }}>
leonmmcoset@outlook.com
</Typography>
</CardContent>
</Card>
</Box>
{/* 服务流程部分 */}
<Box
sx={{
textAlign: 'center',
mb: { xs: 8, md: 12 }
}}
>
<Typography
variant={isMobile ? 'h4' : 'h3'}
component="h2"
gutterBottom
sx={{
fontWeight: 700,
mb: 8,
color: theme.palette.primary.main
}}
>
服务流程
</Typography>
<Box
sx={{
display: 'flex',
flexDirection: isMobile ? 'column' : 'row',
justifyContent: 'space-around',
alignItems: isMobile ? 'center' : 'flex-start',
gap: { xs: 6, md: 4 },
'& > *': {
opacity: 0,
transform: 'translateY(30px)',
animation: 'fadeInUp 0.6s ease-out forwards'
},
'& > *:nth-child(1)': { animationDelay: '0.2s' },
'& > *:nth-child(2)': { animationDelay: '0.4s' },
'& > *:nth-child(3)': { animationDelay: '0.6s' },
'& > *:nth-child(4)': { animationDelay: '0.8s' }
}}
>
{[1, 2, 3, 4].map((step) => {
// 确保stepData始终有值
const getStepData = (stepNum: number) => {
const data = {
1: { title: '提交需求', icon: <MailIcon /> },
2: { title: '确认方案', icon: <CodeIcon /> },
3: { title: '执行服务', icon: <WorkIcon /> },
4: { title: '完成交付', icon: <SupportIcon /> }
};
return data[stepNum as keyof typeof data] || { title: '', icon: <SupportIcon /> };
};
const stepData = getStepData(step);
return (
<Box
key={step}
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
maxWidth: '200px',
textAlign: 'center'
}}
>
<Box
sx={{
width: 80,
height: 80,
borderRadius: '50%',
bgcolor: theme.palette.primary.light,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
mb: 3,
position: 'relative',
'&::before': {
content: `"${step}"`,
position: 'absolute',
top: '-12px',
right: '-12px',
width: 32,
height: 32,
borderRadius: '50%',
bgcolor: theme.palette.primary.main,
color: 'white',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontWeight: 'bold',
fontSize: '1rem'
}
}}
>
{React.cloneElement(stepData.icon as React.ReactElement<{ fontSize?: 'small' | 'medium' | 'large', color?: 'primary' | 'secondary' }>, {
fontSize: "large",
color: "primary"
})}
</Box>
<Typography variant="h6" sx={{ fontWeight: 600, mb: 1 }}>
{stepData.title}
</Typography>
<Typography variant="body2" color="text.secondary">
{step === 1 && '通过邮件描述您的技术问题或外包需求'}
{step === 2 && '我们确认服务细节和价格'}
{step === 3 && '专业团队为您提供技术支持或开发服务'}
{step === 4 && '完成服务并确保您满意'}
</Typography>
</Box>
);
})}
</Box>
</Box>
{/* CTA 区域 */}
<Box
sx={{
textAlign: 'center',
p: { xs: 6, md: 10 },
bgcolor: theme.palette.primary.main,
color: 'white',
borderRadius: '16px',
opacity: 0,
transform: 'translateY(30px)',
animation: 'fadeInUp 0.8s ease-out 1s forwards'
}}
>
<Typography
variant={isMobile ? 'h4' : 'h3'}
component="h2"
gutterBottom
sx={{
fontWeight: 700,
mb: 4
}}
>
准备好获取技术支持了吗？
</Typography>
<Typography variant="body1" sx={{ mb: 6, fontSize: { xs: '1rem', md: '1.1rem' } }}>
联系我们，让专业的技术团队为您解决问题
</Typography>
<Button
variant="contained"
startIcon={<MailIcon />}
onClick={handleEmailClick}
sx={{
bgcolor: 'white',
color: theme.palette.primary.main,
px: 6,
py: 1.5,
borderRadius: '8px',
fontWeight: 700,
fontSize: '1.1rem',
transition: 'all 0.3s ease',
'&:hover': {
bgcolor: 'rgba(255,255,255,0.9)',
transform: 'translateY(-3px)',
boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.2)'
}
}}
>
立即联系
</Button>
</Box>
</Container>
<style jsx global>{`
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
`}</style>
</div>
);
}

20
app/test/page.tsx Normal file
View File

@@ -0,0 +1,20 @@
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import { Container } from '@mui/material';
export default function Test() {
return (
<div>
<Container maxWidth="md" sx={{ py: { xs: 7, md: 16 }, textAlign: 'center' }}>
<Box sx={{ width: '100%', maxWidth: 500 }}>
<Typography variant='h1'>
这是一个测试页面
</Typography><br />
<Typography>
这个测试页面位于<code>/test</code>
</Typography>
</Box>
</Container>
</div>
)
}