226 lines
12 KiB
TypeScript
226 lines
12 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState, useEffect } from 'react';
|
||
|
|
import { getTranslations, type Language } from '@/lib/languages';
|
||
|
|
|
||
|
|
export default function DatacenterPageClient({ params }: { params: { lang: string } }) {
|
||
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
||
|
|
const [selectedRegion, setSelectedRegion] = useState('asia');
|
||
|
|
const lang = params.lang as Language;
|
||
|
|
const t = getTranslations(lang);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setIsLoaded(true);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const regions = [
|
||
|
|
{
|
||
|
|
key: 'asia',
|
||
|
|
icon: '🌏',
|
||
|
|
color: 'from-blue-500 to-cyan-500',
|
||
|
|
data: t.pages.datacenter.locations.asia,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 'america',
|
||
|
|
icon: '🌎',
|
||
|
|
color: 'from-green-500 to-teal-500',
|
||
|
|
data: t.pages.datacenter.locations.america,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 'europe',
|
||
|
|
icon: '🌍',
|
||
|
|
color: 'from-purple-500 to-pink-500',
|
||
|
|
data: t.pages.datacenter.locations.europe,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="max-w-7xl mx-auto px-6 py-20">
|
||
|
|
<div
|
||
|
|
className={`transform transition-all duration-1000 ${isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`}
|
||
|
|
>
|
||
|
|
{/* Header */}
|
||
|
|
<div className="text-center mb-16">
|
||
|
|
<h1 className="text-5xl md:text-7xl font-bold mb-6">
|
||
|
|
<span className="text-blue-400">{t.pages.datacenter.title}</span>
|
||
|
|
</h1>
|
||
|
|
<p className="text-xl md:text-2xl text-cyan-400 mb-4">
|
||
|
|
{t.pages.datacenter.subtitle}
|
||
|
|
</p>
|
||
|
|
<p className="text-lg text-gray-300 max-w-3xl mx-auto">
|
||
|
|
{t.pages.datacenter.description}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Global Map Visualization */}
|
||
|
|
<div className="mb-20 relative">
|
||
|
|
<div className="bg-black/50 border border-blue-500/30 rounded-lg p-8 text-center">
|
||
|
|
<h2 className="text-3xl font-bold text-blue-400 mb-8">全球数据中心分布</h2>
|
||
|
|
<div className="grid md:grid-cols-3 gap-6">
|
||
|
|
{regions.map((region) => (
|
||
|
|
<button
|
||
|
|
key={region.key}
|
||
|
|
onClick={() => setSelectedRegion(region.key)}
|
||
|
|
className={`p-6 border rounded-lg transition-all duration-300 ${
|
||
|
|
selectedRegion === region.key
|
||
|
|
? 'border-blue-400 bg-blue-500/10'
|
||
|
|
: 'border-blue-500/30 hover:border-blue-400'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<div className="text-6xl mb-4">{region.icon}</div>
|
||
|
|
<h3 className="text-xl font-bold text-blue-400 mb-2">
|
||
|
|
{region.data.title}
|
||
|
|
</h3>
|
||
|
|
<p className="text-gray-400">
|
||
|
|
{region.data.cities.length} 个城市
|
||
|
|
</p>
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Selected Region Details */}
|
||
|
|
<div className="mb-20">
|
||
|
|
{regions.map(
|
||
|
|
(region) =>
|
||
|
|
selectedRegion === region.key && (
|
||
|
|
<div
|
||
|
|
key={region.key}
|
||
|
|
className="bg-black/50 border border-blue-500/30 rounded-lg p-8"
|
||
|
|
>
|
||
|
|
<h2 className="text-3xl font-bold text-blue-400 mb-8 text-center">
|
||
|
|
{region.data.title}
|
||
|
|
</h2>
|
||
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
|
|
{region.data.cities.map((city, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="group p-6 border border-blue-500/30 rounded-lg hover:border-blue-400 transition-all duration-300 transform hover:scale-105"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className={`absolute inset-0 bg-gradient-to-br ${region.color} opacity-0 group-hover:opacity-10 rounded-lg transition-opacity duration-300`}
|
||
|
|
></div>
|
||
|
|
<div className="relative z-10 text-center">
|
||
|
|
<div className="text-4xl mb-4">🏢</div>
|
||
|
|
<h3 className="text-xl font-bold text-blue-400 mb-2">
|
||
|
|
{city}
|
||
|
|
</h3>
|
||
|
|
<div className="space-y-1 text-sm text-gray-400">
|
||
|
|
<div>延迟: <10ms</div>
|
||
|
|
<div>带宽: 10Gbps</div>
|
||
|
|
<div>状态: 正常</div>
|
||
|
|
</div>
|
||
|
|
<div className="mt-4">
|
||
|
|
<div className="w-full bg-gray-700 rounded-full h-2">
|
||
|
|
<div
|
||
|
|
className={`h-2 bg-gradient-to-r ${region.color} rounded-full`}
|
||
|
|
style={{
|
||
|
|
width: `${85 + Math.random() * 15}%`,
|
||
|
|
}}
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
<div className="text-xs text-gray-500 mt-1">
|
||
|
|
负载
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Infrastructure Stats */}
|
||
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-20">
|
||
|
|
{[
|
||
|
|
{ label: '数据中心', value: '50+', icon: '🏢', color: 'text-blue-400' },
|
||
|
|
{ label: '服务器', value: '10,000+', icon: '💻', color: 'text-cyan-400' },
|
||
|
|
{
|
||
|
|
label: '网络容量',
|
||
|
|
value: '100Tbps',
|
||
|
|
icon: '🌐',
|
||
|
|
color: 'text-green-400',
|
||
|
|
},
|
||
|
|
{ label: '可用性', value: '99.99%', icon: '⚡', color: 'text-yellow-400' },
|
||
|
|
].map((stat, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="text-center p-6 border border-blue-500/30 rounded-lg backdrop-blur-sm hover:border-blue-400 transition-all duration-300"
|
||
|
|
>
|
||
|
|
<div className="text-4xl mb-2">{stat.icon}</div>
|
||
|
|
<div className={`text-3xl font-bold ${stat.color} mb-2`}>
|
||
|
|
{stat.value}
|
||
|
|
</div>
|
||
|
|
<div className="text-gray-400">{stat.label}</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Network Performance */}
|
||
|
|
<div className="bg-black/50 border border-blue-500/30 rounded-lg p-8">
|
||
|
|
<h2 className="text-3xl font-bold text-blue-400 mb-8 text-center">
|
||
|
|
网络性能监控
|
||
|
|
</h2>
|
||
|
|
<div className="grid md:grid-cols-2 gap-8">
|
||
|
|
<div>
|
||
|
|
<h3 className="text-xl font-bold text-blue-400 mb-4">实时延迟</h3>
|
||
|
|
<div className="space-y-4">
|
||
|
|
{[
|
||
|
|
{ region: '亚太地区', latency: '8ms', status: 'excellent' },
|
||
|
|
{ region: '美洲地区', latency: '12ms', status: 'good' },
|
||
|
|
{ region: '欧洲地区', latency: '15ms', status: 'good' },
|
||
|
|
].map((item, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="flex items-center justify-between p-3 border border-gray-700 rounded"
|
||
|
|
>
|
||
|
|
<span className="text-gray-300">{item.region}</span>
|
||
|
|
<div className="flex items-center">
|
||
|
|
<span className="text-blue-400 font-bold mr-2">
|
||
|
|
{item.latency}
|
||
|
|
</span>
|
||
|
|
<div
|
||
|
|
className={`w-3 h-3 rounded-full ${
|
||
|
|
item.status === 'excellent'
|
||
|
|
? 'bg-green-500'
|
||
|
|
: 'bg-yellow-500'
|
||
|
|
}`}
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 className="text-xl font-bold text-blue-400 mb-4">带宽使用率</h3>
|
||
|
|
<div className="space-y-4">
|
||
|
|
{[
|
||
|
|
{ region: '亚太地区', usage: 75 },
|
||
|
|
{ region: '美洲地区', usage: 60 },
|
||
|
|
{ region: '欧洲地区', usage: 45 },
|
||
|
|
].map((item, index) => (
|
||
|
|
<div key={index} className="p-3 border border-gray-700 rounded">
|
||
|
|
<div className="flex justify-between mb-2">
|
||
|
|
<span className="text-gray-300">{item.region}</span>
|
||
|
|
<span className="text-blue-400">{item.usage}%</span>
|
||
|
|
</div>
|
||
|
|
<div className="w-full bg-gray-700 rounded-full h-2">
|
||
|
|
<div
|
||
|
|
className="h-2 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full"
|
||
|
|
style={{ width: `${item.usage}%` }}
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|