404
This commit is contained in:
502
app/project/leonapp/page.tsx
Normal file
502
app/project/leonapp/page.tsx
Normal file
@@ -0,0 +1,502 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user