503 lines
16 KiB
TypeScript
503 lines
16 KiB
TypeScript
"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>
|
||
);
|
||
}
|