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

awa

Browse Source
This commit is contained in:
Leonmmcoset
2025-11-16 21:58:57 +08:00
parent b4e745b3a8
commit bf8951fbc3
75 changed files with 628 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

396
app/support/page.tsx Normal file
View File

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