390 lines
24 KiB
TypeScript
390 lines
24 KiB
TypeScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { useState, useEffect } from 'react';
|
|||
|
|
import { getTranslations, type Language } from '@/lib/languages';
|
|||
|
|
|
|||
|
|
export default function ConsolePage({ params }: { params: { lang: string } }) {
|
|||
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|||
|
|
const [activeSection, setActiveSection] = useState('overview');
|
|||
|
|
const lang = params.lang as Language;
|
|||
|
|
const t = getTranslations(lang);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
setIsLoaded(true);
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const menuItems = [
|
|||
|
|
{ key: 'overview', label: '概览', icon: '📊' },
|
|||
|
|
{ key: 'servers', label: '云服务器', icon: '💻' },
|
|||
|
|
{ key: 'storage', label: '存储', icon: '💾' },
|
|||
|
|
{ key: 'network', label: '网络', icon: '🌐' },
|
|||
|
|
{ key: 'security', label: '安全', icon: '🛡️' },
|
|||
|
|
{ key: 'monitoring', label: '监控', icon: '📈' },
|
|||
|
|
{ key: 'billing', label: '账单', icon: '💳' },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
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-purple-400">控制台</span>
|
|||
|
|
</h1>
|
|||
|
|
<p className="text-xl md:text-2xl text-cyan-400 mb-4">云资源管理中心</p>
|
|||
|
|
<p className="text-lg text-gray-300 max-w-3xl mx-auto">
|
|||
|
|
统一管理您的云服务器、存储、网络等资源
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Console Layout */}
|
|||
|
|
<div className="grid lg:grid-cols-4 gap-8">
|
|||
|
|
{/* Sidebar */}
|
|||
|
|
<div className="lg:col-span-1">
|
|||
|
|
<div className="bg-black/50 border border-purple-500/30 rounded-lg p-6">
|
|||
|
|
<h3 className="text-xl font-bold text-purple-400 mb-6">导航菜单</h3>
|
|||
|
|
<nav className="space-y-2">
|
|||
|
|
{menuItems.map((item) => (
|
|||
|
|
<button
|
|||
|
|
key={item.key}
|
|||
|
|
onClick={() => setActiveSection(item.key)}
|
|||
|
|
className={`w-full flex items-center p-3 rounded-lg transition-all duration-300 ${
|
|||
|
|
activeSection === item.key
|
|||
|
|
? 'bg-purple-500/20 border border-purple-400 text-purple-400'
|
|||
|
|
: 'text-gray-400 hover:text-purple-400 hover:bg-purple-500/10'
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<span className="mr-3 text-xl">{item.icon}</span>
|
|||
|
|
{item.label}
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Main Content */}
|
|||
|
|
<div className="lg:col-span-3">
|
|||
|
|
<div className="bg-black/50 border border-purple-500/30 rounded-lg p-8">
|
|||
|
|
{activeSection === 'overview' && (
|
|||
|
|
<div>
|
|||
|
|
<h2 className="text-3xl font-bold text-purple-400 mb-8">
|
|||
|
|
资源概览
|
|||
|
|
</h2>
|
|||
|
|
|
|||
|
|
{/* Quick Stats */}
|
|||
|
|
<div className="grid md:grid-cols-4 gap-6 mb-8">
|
|||
|
|
{[
|
|||
|
|
{
|
|||
|
|
label: '云服务器',
|
|||
|
|
value: '12',
|
|||
|
|
icon: '💻',
|
|||
|
|
color: 'text-blue-400',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '存储空间',
|
|||
|
|
value: '2.5TB',
|
|||
|
|
icon: '💾',
|
|||
|
|
color: 'text-green-400',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '网络流量',
|
|||
|
|
value: '156GB',
|
|||
|
|
icon: '🌐',
|
|||
|
|
color: 'text-cyan-400',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '本月费用',
|
|||
|
|
value: '¥1,234',
|
|||
|
|
icon: '💳',
|
|||
|
|
color: 'text-yellow-400',
|
|||
|
|
},
|
|||
|
|
].map((stat, index) => (
|
|||
|
|
<div
|
|||
|
|
key={index}
|
|||
|
|
className="p-4 border border-gray-700 rounded-lg text-center"
|
|||
|
|
>
|
|||
|
|
<div className="text-3xl mb-2">{stat.icon}</div>
|
|||
|
|
<div
|
|||
|
|
className={`text-2xl font-bold ${stat.color} mb-1`}
|
|||
|
|
>
|
|||
|
|
{stat.value}
|
|||
|
|
</div>
|
|||
|
|
<div className="text-gray-400 text-sm">
|
|||
|
|
{stat.label}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Recent Activities */}
|
|||
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|||
|
|
<div>
|
|||
|
|
<h3 className="text-xl font-bold text-purple-400 mb-4">
|
|||
|
|
最近活动
|
|||
|
|
</h3>
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
{[
|
|||
|
|
{
|
|||
|
|
action: '创建云服务器',
|
|||
|
|
time: '2分钟前',
|
|||
|
|
status: 'success',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
action: '备份数据',
|
|||
|
|
time: '1小时前',
|
|||
|
|
status: 'success',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
action: '升级配置',
|
|||
|
|
time: '3小时前',
|
|||
|
|
status: 'warning',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
action: '重启服务器',
|
|||
|
|
time: '1天前',
|
|||
|
|
status: 'info',
|
|||
|
|
},
|
|||
|
|
].map((activity, index) => (
|
|||
|
|
<div
|
|||
|
|
key={index}
|
|||
|
|
className="flex items-center justify-between p-3 border border-gray-700 rounded"
|
|||
|
|
>
|
|||
|
|
<div>
|
|||
|
|
<div className="text-gray-300">
|
|||
|
|
{activity.action}
|
|||
|
|
</div>
|
|||
|
|
<div className="text-gray-500 text-sm">
|
|||
|
|
{activity.time}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
className={`w-3 h-3 rounded-full ${
|
|||
|
|
activity.status === 'success'
|
|||
|
|
? 'bg-green-500'
|
|||
|
|
: activity.status === 'warning'
|
|||
|
|
? 'bg-yellow-500'
|
|||
|
|
: activity.status === 'info'
|
|||
|
|
? 'bg-blue-500'
|
|||
|
|
: 'bg-gray-500'
|
|||
|
|
}`}
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<h3 className="text-xl font-bold text-purple-400 mb-4">
|
|||
|
|
系统状态
|
|||
|
|
</h3>
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
{[
|
|||
|
|
{
|
|||
|
|
service: '云服务器',
|
|||
|
|
status: '正常',
|
|||
|
|
uptime: '99.9%',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
service: '云存储',
|
|||
|
|
status: '正常',
|
|||
|
|
uptime: '99.8%',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
service: '网络服务',
|
|||
|
|
status: '正常',
|
|||
|
|
uptime: '99.9%',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
service: '安全防护',
|
|||
|
|
status: '正常',
|
|||
|
|
uptime: '100%',
|
|||
|
|
},
|
|||
|
|
].map((service, index) => (
|
|||
|
|
<div
|
|||
|
|
key={index}
|
|||
|
|
className="flex items-center justify-between p-3 border border-gray-700 rounded"
|
|||
|
|
>
|
|||
|
|
<div>
|
|||
|
|
<div className="text-gray-300">
|
|||
|
|
{service.service}
|
|||
|
|
</div>
|
|||
|
|
<div className="text-gray-500 text-sm">
|
|||
|
|
可用性: {service.uptime}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-green-400 font-bold">
|
|||
|
|
{service.status}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{activeSection === 'servers' && (
|
|||
|
|
<div>
|
|||
|
|
<div className="flex justify-between items-center mb-8">
|
|||
|
|
<h2 className="text-3xl font-bold text-purple-400">
|
|||
|
|
云服务器管理
|
|||
|
|
</h2>
|
|||
|
|
<button className="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold rounded-lg hover:opacity-90 transition-all duration-300">
|
|||
|
|
创建实例
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{[
|
|||
|
|
{
|
|||
|
|
name: 'web-server-01',
|
|||
|
|
status: '运行中',
|
|||
|
|
cpu: '2核',
|
|||
|
|
memory: '4GB',
|
|||
|
|
ip: '192.168.1.10',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'db-server-01',
|
|||
|
|
status: '运行中',
|
|||
|
|
cpu: '4核',
|
|||
|
|
memory: '8GB',
|
|||
|
|
ip: '192.168.1.11',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'app-server-01',
|
|||
|
|
status: '已停止',
|
|||
|
|
cpu: '2核',
|
|||
|
|
memory: '4GB',
|
|||
|
|
ip: '192.168.1.12',
|
|||
|
|
},
|
|||
|
|
].map((server, index) => (
|
|||
|
|
<div
|
|||
|
|
key={index}
|
|||
|
|
className="p-6 border border-gray-700 rounded-lg"
|
|||
|
|
>
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div>
|
|||
|
|
<h3 className="text-xl font-bold text-purple-400 mb-2">
|
|||
|
|
{server.name}
|
|||
|
|
</h3>
|
|||
|
|
<div className="flex items-center space-x-4 text-gray-400">
|
|||
|
|
<span>{server.cpu}</span>
|
|||
|
|
<span>{server.memory}</span>
|
|||
|
|
<span>{server.ip}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center space-x-4">
|
|||
|
|
<span
|
|||
|
|
className={`px-3 py-1 rounded-full text-sm ${
|
|||
|
|
server.status === '运行中'
|
|||
|
|
? 'bg-green-500/20 text-green-400'
|
|||
|
|
: 'bg-red-500/20 text-red-400'
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
{server.status}
|
|||
|
|
</span>
|
|||
|
|
<button className="px-4 py-2 border border-purple-500/30 rounded text-purple-400 hover:border-purple-400 transition-colors">
|
|||
|
|
管理
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{activeSection === 'monitoring' && (
|
|||
|
|
<div>
|
|||
|
|
<h2 className="text-3xl font-bold text-purple-400 mb-8">
|
|||
|
|
监控中心
|
|||
|
|
</h2>
|
|||
|
|
|
|||
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|||
|
|
<div className="p-6 border border-gray-700 rounded-lg">
|
|||
|
|
<h3 className="text-xl font-bold text-purple-400 mb-4">
|
|||
|
|
CPU 使用率
|
|||
|
|
</h3>
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{[
|
|||
|
|
{ server: 'web-server-01', usage: 45 },
|
|||
|
|
{ server: 'db-server-01', usage: 78 },
|
|||
|
|
{ server: 'app-server-01', usage: 23 },
|
|||
|
|
].map((item, index) => (
|
|||
|
|
<div key={index}>
|
|||
|
|
<div className="flex justify-between mb-2">
|
|||
|
|
<span className="text-gray-300">
|
|||
|
|
{item.server}
|
|||
|
|
</span>
|
|||
|
|
<span className="text-purple-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-purple-500 to-pink-500 rounded-full"
|
|||
|
|
style={{ width: `${item.usage}%` }}
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="p-6 border border-gray-700 rounded-lg">
|
|||
|
|
<h3 className="text-xl font-bold text-purple-400 mb-4">
|
|||
|
|
内存使用率
|
|||
|
|
</h3>
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{[
|
|||
|
|
{ server: 'web-server-01', usage: 62 },
|
|||
|
|
{ server: 'db-server-01', usage: 89 },
|
|||
|
|
{ server: 'app-server-01', usage: 34 },
|
|||
|
|
].map((item, index) => (
|
|||
|
|
<div key={index}>
|
|||
|
|
<div className="flex justify-between mb-2">
|
|||
|
|
<span className="text-gray-300">
|
|||
|
|
{item.server}
|
|||
|
|
</span>
|
|||
|
|
<span className="text-purple-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>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Other sections can be added similarly */}
|
|||
|
|
{activeSection !== 'overview' &&
|
|||
|
|
activeSection !== 'servers' &&
|
|||
|
|
activeSection !== 'monitoring' && (
|
|||
|
|
<div className="text-center py-20">
|
|||
|
|
<div className="text-6xl mb-4">🚧</div>
|
|||
|
|
<h3 className="text-2xl font-bold text-purple-400 mb-4">
|
|||
|
|
功能开发中
|
|||
|
|
</h3>
|
|||
|
|
<p className="text-gray-400">
|
|||
|
|
该功能正在开发中，敬请期待...
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|