203 lines
9.7 KiB
TypeScript
203 lines
9.7 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
|
||
interface Product {
|
||
name: string;
|
||
desc: string;
|
||
price: string;
|
||
features: string[];
|
||
badge?: string;
|
||
popular?: boolean;
|
||
}
|
||
|
||
interface ProductModalProps {
|
||
product: Product | null;
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
contactText: string;
|
||
locale: string;
|
||
}
|
||
|
||
export default function ProductModal({ product, isOpen, onClose, contactText, locale }: ProductModalProps) {
|
||
const [isVisible, setIsVisible] = useState(false);
|
||
|
||
useEffect(() => {
|
||
if (isOpen) {
|
||
setIsVisible(true);
|
||
// 保存原始的overflow值
|
||
const originalOverflow = document.body.style.overflow;
|
||
document.body.style.overflow = 'hidden';
|
||
|
||
return () => {
|
||
// 恢复原始的overflow值
|
||
document.body.style.overflow = originalOverflow || 'unset';
|
||
};
|
||
} else {
|
||
// 延迟恢复overflow，允许动画完成
|
||
const timer = setTimeout(() => {
|
||
document.body.style.overflow = 'unset';
|
||
}, 300);
|
||
|
||
return () => {
|
||
clearTimeout(timer);
|
||
};
|
||
}
|
||
}, [isOpen]);
|
||
|
||
const handleClose = () => {
|
||
setIsVisible(false);
|
||
setTimeout(() => {
|
||
onClose();
|
||
}, 300);
|
||
};
|
||
|
||
if (!isOpen || !product) return null;
|
||
|
||
return (
|
||
<div className={`fixed inset-0 z-50 flex items-center justify-center p-4 transition-opacity duration-300 ${
|
||
isVisible ? 'opacity-100' : 'opacity-0'
|
||
}`}>
|
||
{/* 背景遮罩 */}
|
||
<div
|
||
className="absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"
|
||
onClick={handleClose}
|
||
/>
|
||
|
||
{/* 模态框内容 */}
|
||
<div className={`relative bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto transform transition-all duration-300 ${
|
||
isVisible ? 'scale-100 translate-y-0' : 'scale-95 translate-y-4'
|
||
}`}>
|
||
{/* 关闭按钮 */}
|
||
<button
|
||
onClick={handleClose}
|
||
title="关闭"
|
||
aria-label="关闭产品详情"
|
||
className="absolute top-4 right-4 z-10 w-8 h-8 bg-gray-100 hover:bg-gray-200 rounded-full flex items-center justify-center transition-colors duration-200"
|
||
>
|
||
<svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
|
||
{/* 产品标签 */}
|
||
<div className="absolute top-4 left-4 z-10 flex gap-2">
|
||
{product.badge && (
|
||
<span className="bg-blue-600 text-white text-xs font-semibold px-3 py-1 rounded-full shadow-lg">
|
||
{product.badge}
|
||
</span>
|
||
)}
|
||
{product.popular && (
|
||
<span className="bg-gradient-to-r from-orange-400 to-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg">
|
||
🔥 热门
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className="p-8 pt-16">
|
||
{/* 产品标题和价格 */}
|
||
<div className="mb-6">
|
||
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
||
{product.name}
|
||
</h2>
|
||
<div className="text-4xl font-bold text-blue-600 mb-4">
|
||
{product.price}
|
||
{product.price.includes('/月') && (
|
||
<span className="text-lg text-gray-500 ml-2 font-normal">
|
||
按月计费
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 产品描述 */}
|
||
<div className="mb-8">
|
||
<h3 className="text-lg font-semibold text-gray-900 mb-3">产品介绍</h3>
|
||
<p className="text-gray-700 leading-relaxed">
|
||
{product.desc}
|
||
</p>
|
||
</div>
|
||
|
||
{/* 功能特性 */}
|
||
<div className="mb-8">
|
||
<h3 className="text-lg font-semibold text-gray-900 mb-4">功能特性</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
{product.features.map((feature, index) => (
|
||
<div key={index} className="flex items-center">
|
||
<svg
|
||
className="w-5 h-5 text-green-500 mr-3 flex-shrink-0"
|
||
fill="currentColor"
|
||
viewBox="0 0 20 20"
|
||
>
|
||
<path
|
||
fillRule="evenodd"
|
||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||
clipRule="evenodd"
|
||
/>
|
||
</svg>
|
||
<span className="text-gray-700">{feature}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 适用场景 */}
|
||
<div className="mb-8">
|
||
<h3 className="text-lg font-semibold text-gray-900 mb-3">适用场景</h3>
|
||
<div className="bg-blue-50 rounded-lg p-4">
|
||
<p className="text-blue-800 text-sm">
|
||
{getUseCases(product.name)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 操作按钮 */}
|
||
<div className="flex flex-col sm:flex-row gap-4">
|
||
<a
|
||
href={locale === 'zh-CN' ? '/contact' : `/${locale}/contact`}
|
||
className={`flex-1 py-4 px-6 rounded-lg font-semibold text-center transition-all duration-300 ${
|
||
product.popular
|
||
? 'bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-700 hover:to-purple-700 shadow-lg'
|
||
: 'bg-blue-600 text-white hover:bg-blue-700'
|
||
}`}
|
||
>
|
||
{contactText}
|
||
</a>
|
||
<button
|
||
onClick={handleClose}
|
||
className="flex-1 py-4 px-6 border-2 border-gray-300 text-gray-700 rounded-lg font-semibold hover:bg-gray-50 transition-colors duration-300"
|
||
>
|
||
关闭
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function getUseCases(productName: string): string {
|
||
const useCases: { [key: string]: string } = {
|
||
'轻量云服务器': '个人博客、小型企业官网、开发测试环境、学习实验、小型应用部署',
|
||
'EC2通用型服务器': 'Web应用、企业级应用、微服务架构、API服务、中等规模网站',
|
||
'EC2计算优化型': '科学计算、机器学习训练、高性能Web服务、数据分析、视频处理',
|
||
'站群服务器': 'SEO优化、多站点管理、内容分发、营销推广、大规模网站集群',
|
||
'高防服务器': '游戏服务器、金融应用、电商平台、直播平台、高价值业务系统',
|
||
'WAF Web防火墙': 'Web应用保护、API安全、电商网站、企业门户、在线服务平台',
|
||
'SSL证书服务': '网站HTTPS加密、API接口安全、移动应用、电商交易、数据传输保护',
|
||
'S3对象存储': '网站静态资源、数据备份归档、大数据分析、内容分发、移动应用存储',
|
||
'EBS块存储': '数据库存储、文件系统、企业应用、高IOPS应用、关键业务数据',
|
||
'EFS文件存储': '内容管理系统、Web服务、大数据分析、媒体处理、共享文件存储',
|
||
'RDS关系型数据库': '企业应用、电商系统、CRM系统、ERP系统、数据仓库',
|
||
'Redis缓存服务': '会话存储、实时排行榜、消息队列、计数器、高并发缓存',
|
||
'MongoDB文档数据库': '内容管理、物联网数据、实时分析、移动应用、社交平台',
|
||
'CDN内容分发': '网站加速、视频点播、游戏更新、软件下载、全球内容分发',
|
||
'负载均衡器': '高可用架构、流量分发、故障转移、弹性扩容、微服务架构',
|
||
'VPN专线服务': '企业组网、远程办公、数据中心互联、混合云架构、安全连接',
|
||
'机器学习平台': '模型训练、数据挖掘、预测分析、推荐系统、智能决策',
|
||
'图像识别API': '人脸识别、内容审核、智能相册、安防监控、医疗影像',
|
||
'语音识别API': '智能客服、语音助手、会议记录、语音翻译、语音控制'
|
||
};
|
||
|
||
return useCases[productName] || '适用于各种业务场景，具体请咨询我们的技术专家';
|
||
}
|