561 lines
19 KiB
TypeScript
561 lines
19 KiB
TypeScript
/**
|
||
* 毛玻璃风格私域管理系统首页
|
||
* @author 阿瑞
|
||
* @description 展示现代简约毛玻璃质感UI效果和系统概览的首页
|
||
* @version 3.0.0
|
||
* @created 2024-12-19
|
||
* @updated 重新设计的现代化UI布局
|
||
*/
|
||
|
||
import React from 'react';
|
||
import {
|
||
Layout,
|
||
Typography,
|
||
Button,
|
||
Card,
|
||
Space,
|
||
Row,
|
||
Col,
|
||
Avatar,
|
||
Statistic,
|
||
Badge,
|
||
Tag,
|
||
Divider,
|
||
FloatButton,
|
||
App,
|
||
} from 'antd';
|
||
import {
|
||
RocketOutlined,
|
||
ApiOutlined,
|
||
BulbOutlined,
|
||
TeamOutlined,
|
||
ThunderboltOutlined,
|
||
QuestionCircleOutlined,
|
||
SecurityScanOutlined,
|
||
ArrowRightOutlined,
|
||
PlayCircleOutlined,
|
||
CheckCircleOutlined,
|
||
GlobalOutlined,
|
||
SafetyOutlined,
|
||
LineChartOutlined,
|
||
} from '@ant-design/icons';
|
||
import { useTheme } from '../hooks/useTheme'; // 关键代码行注释：使用独立的useTheme Hook
|
||
import { MdDarkMode, MdLightMode } from "react-icons/md";
|
||
const { Header, Content, Footer } = Layout;
|
||
const { Title, Paragraph, Text } = Typography;
|
||
|
||
// 模块级注释：特性数据接口
|
||
interface FeatureType {
|
||
title: string;
|
||
description: string;
|
||
icon: React.ReactNode;
|
||
color: string;
|
||
}
|
||
|
||
// 模块级注释：核心特性数据
|
||
const coreFeatures = [
|
||
{
|
||
title: '智能多租户架构',
|
||
description: '企业级数据隔离，确保每个团队的数据安全独立，支持灵活的权限管理和资源分配',
|
||
icon: <SecurityScanOutlined />,
|
||
},
|
||
{
|
||
title: '实时数据洞察',
|
||
description: '强大的数据分析引擎，提供实时业务指标监控，智能预警和趋势分析',
|
||
icon: <LineChartOutlined />,
|
||
},
|
||
{
|
||
title: '无缝团队协作',
|
||
description: '集成化协作平台，支持实时消息、任务管理、文档共享和视频会议',
|
||
icon: <TeamOutlined />,
|
||
},
|
||
{
|
||
title: '企业级安全',
|
||
description: 'SOC2认证的安全架构，端到端加密，支持SSO和多因素认证',
|
||
icon: <SafetyOutlined />,
|
||
}
|
||
];
|
||
|
||
// 模块级注释：统计数据
|
||
const statsData = [
|
||
{
|
||
title: '全球企业用户',
|
||
value: 50000,
|
||
suffix: '+',
|
||
prefix: '',
|
||
icon: <GlobalOutlined />,
|
||
color: '#667eea',
|
||
growth: '+127%',
|
||
},
|
||
{
|
||
title: '月活跃团队',
|
||
value: 12543,
|
||
suffix: '',
|
||
prefix: '',
|
||
icon: <TeamOutlined />,
|
||
color: '#f093fb',
|
||
growth: '+23.6%',
|
||
},
|
||
{
|
||
title: 'API调用次数',
|
||
value: 98.7,
|
||
suffix: 'M',
|
||
prefix: '',
|
||
icon: <ApiOutlined />,
|
||
color: '#4facfe',
|
||
growth: '+45.2%',
|
||
},
|
||
{
|
||
title: '系统可用性',
|
||
value: 99.9,
|
||
suffix: '%',
|
||
prefix: '',
|
||
icon: <CheckCircleOutlined />,
|
||
color: '#06d7b2',
|
||
growth: '99.9%',
|
||
}
|
||
];
|
||
|
||
// 模块级注释：技术栈特性数据
|
||
const techFeatures: FeatureType[] = [
|
||
{
|
||
title: 'React 19',
|
||
description: '使用最新的 React 19 特性构建现代化应用',
|
||
icon: <RocketOutlined />,
|
||
color: '#2d7ff9',
|
||
},
|
||
{
|
||
title: 'Next.js 15',
|
||
description: '基于 Next.js 15 的强大全栈框架',
|
||
icon: <ApiOutlined />,
|
||
color: '#06d7b2',
|
||
},
|
||
{
|
||
title: 'Ant Design 5',
|
||
description: '使用 Ant Design 5.x 构建优雅的用户界面',
|
||
icon: <BulbOutlined />,
|
||
color: '#ff9640',
|
||
},
|
||
{
|
||
title: 'TypeScript',
|
||
description: '完整的 TypeScript 支持，提供类型安全',
|
||
icon: <ThunderboltOutlined />,
|
||
color: '#8e6bff',
|
||
},
|
||
];
|
||
|
||
export default function HomePage(): React.ReactElement {
|
||
// 关键代码行注释：状态管理 - 使用_app.tsx的useTheme Hook确保mounted状态
|
||
const { isDark, toggleTheme, mounted } = useTheme(); // 关键代码行注释：解构获取所需的状态
|
||
const { message, notification, modal } = App.useApp();
|
||
|
||
// 关键代码行注释：如果还未挂载，显示加载状态避免闪烁
|
||
if (!mounted) {
|
||
return <div style={{ height: '100vh', background: '#f6f9fc' }} />;
|
||
}
|
||
|
||
// 模块级注释：事件处理函数
|
||
const handleStartClick = (): void => {
|
||
message.success('欢迎使用现代化私域管理系统！');
|
||
};
|
||
|
||
const handleLearnMoreClick = (): void => {
|
||
notification.info({
|
||
message: '了解更多',
|
||
description: '感谢您对我们平台的关注。更多功能正在开发中，敬请期待！',
|
||
placement: 'topRight',
|
||
});
|
||
};
|
||
|
||
const handleHelpClick = (): void => {
|
||
modal.info({
|
||
title: '帮助中心',
|
||
content: (
|
||
<div>
|
||
<p>欢迎使用帮助中心！</p>
|
||
<p>如果您有任何问题，请随时联系我们。</p>
|
||
<p>技术支持：support@example.com</p>
|
||
</div>
|
||
),
|
||
});
|
||
};
|
||
|
||
return (
|
||
<Layout className="modern-layout">
|
||
{/* 模块级注释：现代化顶部导航栏 */}
|
||
<Header className="modern-header">
|
||
<div className="header-container">
|
||
{/* 左侧品牌区域 */}
|
||
<div className="brand-section">
|
||
<div className="brand-logo">
|
||
<div className="logo-icon">⚡</div>
|
||
<div className="logo-text">
|
||
<Title level={4} className="brand-title">SaaS管理平台</Title>
|
||
<Text className="brand-subtitle">Enterprise Edition</Text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 中间导航菜单 */}
|
||
<nav className="nav-menu">
|
||
<a href="#features" className="nav-item">产品功能</a>
|
||
<a href="#pricing" className="nav-item">价格方案</a>
|
||
<a href="#docs" className="nav-item">开发文档</a>
|
||
<a href="#components" className="nav-item">组件库</a>
|
||
<a href="#about" className="nav-item">关于我们</a>
|
||
</nav>
|
||
|
||
{/* 右侧操作区域 */}
|
||
<div className="header-actions">
|
||
|
||
{/* 切换主题 使用react-icons*/}
|
||
<Button
|
||
type="text"
|
||
shape="round"
|
||
onClick={toggleTheme}
|
||
icon={isDark ? <MdLightMode /> : <MdDarkMode />}
|
||
className="theme-switch"
|
||
/>
|
||
<Button type="text" className="login-btn">
|
||
登录
|
||
</Button>
|
||
<Button type="primary" className="signup-btn">
|
||
免费试用
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Header>
|
||
|
||
{/* 模块级注释：现代化主要内容区域 */}
|
||
<Content className="modern-content">
|
||
{/* 模块级注释：重新设计的英雄区域 */}
|
||
<section className="hero-section-modern">
|
||
<div className="hero-background">
|
||
<div className="hero-decoration hero-decoration-1"></div>
|
||
<div className="hero-decoration hero-decoration-2"></div>
|
||
<div className="hero-decoration hero-decoration-3"></div>
|
||
</div>
|
||
|
||
<div className="hero-container">
|
||
<div className="hero-content-modern">
|
||
<div className="hero-badge">
|
||
<Badge count="NEW" className="version-badge" />
|
||
<Text className="version-text">Version 3.0 已发布</Text>
|
||
</div>
|
||
|
||
<Title level={1} className="hero-title-modern">
|
||
<span className="title-line">构建未来的</span>
|
||
<span className="title-line title-gradient">企业协作平台</span>
|
||
</Title>
|
||
|
||
<Paragraph className="hero-description-modern">
|
||
专为现代企业打造的智能化SaaS管理平台，集成多租户架构、实时数据分析、团队协作于一体，
|
||
<br />
|
||
助力企业实现数字化转型，提升运营效率
|
||
</Paragraph>
|
||
|
||
<div className="hero-buttons-modern">
|
||
<Button
|
||
type="primary"
|
||
size="large"
|
||
onClick={handleStartClick}
|
||
className="primary-cta-btn"
|
||
icon={<RocketOutlined />}
|
||
>
|
||
立即开始免费试用
|
||
</Button>
|
||
<Button
|
||
size="large"
|
||
onClick={handleLearnMoreClick}
|
||
className="secondary-cta-btn"
|
||
icon={<PlayCircleOutlined />}
|
||
>
|
||
观看产品演示
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="hero-stats">
|
||
<div className="stat-item">
|
||
<Text className="stat-number">50K+</Text>
|
||
<Text className="stat-label">企业用户</Text>
|
||
</div>
|
||
<div className="stat-divider"></div>
|
||
<div className="stat-item">
|
||
<Text className="stat-number">99.9%</Text>
|
||
<Text className="stat-label">系统稳定性</Text>
|
||
</div>
|
||
<div className="stat-divider"></div>
|
||
<div className="stat-item">
|
||
<Text className="stat-number">24/7</Text>
|
||
<Text className="stat-label">技术支持</Text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="hero-visual">
|
||
<div className="dashboard-mockup">
|
||
<div className="mockup-header">
|
||
<div className="mockup-controls">
|
||
<span className="control-dot red"></span>
|
||
<span className="control-dot yellow"></span>
|
||
<span className="control-dot green"></span>
|
||
</div>
|
||
<Text className="mockup-title">SaaS Dashboard</Text>
|
||
</div>
|
||
<div className="mockup-content">
|
||
<div className="mockup-sidebar">
|
||
<div className="sidebar-item active"></div>
|
||
<div className="sidebar-item"></div>
|
||
<div className="sidebar-item"></div>
|
||
<div className="sidebar-item"></div>
|
||
</div>
|
||
<div className="mockup-main">
|
||
<div className="chart-container">
|
||
<div className="chart-bars">
|
||
<div className="chart-bar" style={{ height: '60%' }}></div>
|
||
<div className="chart-bar" style={{ height: '80%' }}></div>
|
||
<div className="chart-bar" style={{ height: '45%' }}></div>
|
||
<div className="chart-bar" style={{ height: '70%' }}></div>
|
||
<div className="chart-bar" style={{ height: '90%' }}></div>
|
||
</div>
|
||
</div>
|
||
<div className="metrics-grid">
|
||
<div className="metric-card"></div>
|
||
<div className="metric-card"></div>
|
||
<div className="metric-card"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 模块级注释：核心功能展示区域 */}
|
||
<section className="features-section-modern">
|
||
<div className="section-container">
|
||
<div className="section-header">
|
||
<Title level={2} className="section-title">
|
||
为什么选择我们的平台
|
||
</Title>
|
||
<Paragraph className="section-description">
|
||
先进的技术架构和丰富的功能特性，为您的企业提供完整的数字化解决方案
|
||
</Paragraph>
|
||
</div>
|
||
|
||
<Row gutter={[32, 32]} className="features-grid">
|
||
{coreFeatures.map((feature, index) => (
|
||
<Col xs={24} md={12} lg={6} key={index}>
|
||
<Card className="feature-card-modern" hoverable>
|
||
<div className="feature-content">
|
||
<div className={`feature-icon-modern gradient-${index + 1}`}>
|
||
{feature.icon}
|
||
</div>
|
||
<Title level={4} className="feature-title-modern">
|
||
{feature.title}
|
||
</Title>
|
||
<Paragraph className="feature-description-modern">
|
||
{feature.description}
|
||
</Paragraph>
|
||
<div className="feature-action">
|
||
<Button type="link" icon={<ArrowRightOutlined />}>
|
||
了解更多
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</Col>
|
||
))}
|
||
</Row>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 模块级注释：数据统计展示区域 */}
|
||
<section className="stats-section-modern">
|
||
<div className="section-container">
|
||
<div className="stats-header">
|
||
<Title level={2} className="stats-title">
|
||
数据驱动的成功
|
||
</Title>
|
||
<Paragraph className="stats-description">
|
||
我们的平台正在帮助全球企业实现数字化转型
|
||
</Paragraph>
|
||
</div>
|
||
|
||
<Row gutter={[24, 24]} className="stats-grid">
|
||
{statsData.map((stat, index) => (
|
||
<Col xs={24} sm={12} lg={6} key={index}>
|
||
<Card className="stat-card-modern">
|
||
<div className="stat-content">
|
||
<div className="stat-icon" style={{ color: stat.color }}>
|
||
{stat.icon}
|
||
</div>
|
||
<div className="stat-info">
|
||
<Statistic
|
||
value={stat.value}
|
||
suffix={stat.suffix}
|
||
prefix={stat.prefix}
|
||
className="stat-number"
|
||
/>
|
||
<Text className="stat-title">{stat.title}</Text>
|
||
<Text className="stat-growth">{stat.growth}</Text>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</Col>
|
||
))}
|
||
</Row>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 模块级注释：技术栈展示区域 */}
|
||
<section className="tech-section-modern">
|
||
<div className="section-container">
|
||
<div className="tech-header">
|
||
<Title level={2} className="tech-title">
|
||
现代化技术栈
|
||
</Title>
|
||
<Paragraph className="tech-description">
|
||
采用业界领先的技术栈，确保系统的稳定性、可扩展性和安全性
|
||
</Paragraph>
|
||
</div>
|
||
|
||
<Row gutter={[24, 24]} className="tech-grid">
|
||
{techFeatures.map((tech, index) => (
|
||
<Col xs={24} sm={12} md={6} key={index}>
|
||
<Card className="tech-card-modern" hoverable>
|
||
<div className="tech-content">
|
||
<Avatar
|
||
size={64}
|
||
style={{ backgroundColor: tech.color }}
|
||
icon={tech.icon}
|
||
className="tech-avatar"
|
||
/>
|
||
<Title level={4} className="tech-name">
|
||
{tech.title}
|
||
</Title>
|
||
<Paragraph className="tech-desc">
|
||
{tech.description}
|
||
</Paragraph>
|
||
</div>
|
||
</Card>
|
||
</Col>
|
||
))}
|
||
</Row>
|
||
|
||
<div className="tech-tags">
|
||
<Title level={5}>完整技术生态</Title>
|
||
<Space wrap size="middle" className="tags-container">
|
||
<Tag color="blue">React 19</Tag>
|
||
<Tag color="green">Next.js 15</Tag>
|
||
<Tag color="orange">Ant Design 5</Tag>
|
||
<Tag color="purple">TypeScript</Tag>
|
||
<Tag color="cyan">Tailwind CSS</Tag>
|
||
<Tag color="red">MongoDB</Tag>
|
||
<Tag color="geekblue">Mongoose 8.x</Tag>
|
||
<Tag color="volcano">pnpm</Tag>
|
||
</Space>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 模块级注释：CTA区域 */}
|
||
<section className="cta-section-modern">
|
||
<div className="section-container">
|
||
<Card className="cta-card">
|
||
<div className="cta-content">
|
||
<Title level={2} className="cta-title">
|
||
准备开始您的数字化之旅了吗？
|
||
</Title>
|
||
<Paragraph className="cta-description">
|
||
立即注册，享受30天免费试用，体验企业级SaaS管理平台的强大功能
|
||
</Paragraph>
|
||
<Space size="large" className="cta-buttons">
|
||
<Button
|
||
type="primary"
|
||
size="large"
|
||
icon={<RocketOutlined />}
|
||
className="cta-primary-btn"
|
||
>
|
||
开始免费试用
|
||
</Button>
|
||
<Button
|
||
size="large"
|
||
icon={<QuestionCircleOutlined />}
|
||
className="cta-secondary-btn"
|
||
>
|
||
联系销售团队
|
||
</Button>
|
||
</Space>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</section>
|
||
</Content>
|
||
|
||
{/* 模块级注释：现代化页脚 */}
|
||
<Footer className="modern-footer">
|
||
<div className="footer-container">
|
||
<div className="footer-content">
|
||
<div className="footer-brand">
|
||
<div className="footer-logo">
|
||
<div className="logo-icon">⚡</div>
|
||
<Title level={4} className="footer-brand-title">SaaS管理平台</Title>
|
||
</div>
|
||
<Paragraph className="footer-brand-desc">
|
||
为现代企业提供智能化的数字化解决方案
|
||
</Paragraph>
|
||
</div>
|
||
|
||
<div className="footer-links">
|
||
<div className="link-group">
|
||
<Title level={5}>产品</Title>
|
||
<a href="#features">功能特性</a>
|
||
<a href="#pricing">价格方案</a>
|
||
<a href="#security">安全保障</a>
|
||
</div>
|
||
|
||
<div className="link-group">
|
||
<Title level={5}>开发者</Title>
|
||
<a href="#docs">API文档</a>
|
||
<a href="#sdk">SDK下载</a>
|
||
<a href="#github">GitHub</a>
|
||
</div>
|
||
|
||
<div className="link-group">
|
||
<Title level={5}>支持</Title>
|
||
<a href="#help">帮助中心</a>
|
||
<a href="#contact">联系我们</a>
|
||
<a href="#status">系统状态</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Divider />
|
||
|
||
<div className="footer-bottom">
|
||
<Text className="copyright">
|
||
© 2024 SaaS管理平台. All rights reserved.
|
||
</Text>
|
||
<Space split={<Divider type="vertical" />}>
|
||
<a href="#privacy">隐私政策</a>
|
||
<a href="#terms">服务条款</a>
|
||
<a href="#cookies">Cookie政策</a>
|
||
</Space>
|
||
</div>
|
||
</div>
|
||
</Footer>
|
||
|
||
{/* 模块级注释：浮动操作按钮 */}
|
||
<FloatButton.Group>
|
||
<FloatButton
|
||
icon={<QuestionCircleOutlined />}
|
||
tooltip="帮助中心"
|
||
onClick={handleHelpClick}
|
||
/>
|
||
<FloatButton.BackTop tooltip="回到顶部" />
|
||
</FloatButton.Group>
|
||
</Layout>
|
||
);
|
||
}
|