280 lines
16 KiB
TypeScript
280 lines
16 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import { getTranslations, type Language } from '@/lib/languages';
|
||
|
||
export default function SupportPage({ params }: { params: { lang: string } }) {
|
||
const [isLoaded, setIsLoaded] = useState(false);
|
||
const [activeTab, setActiveTab] = useState('ticket');
|
||
const lang = params.lang as Language;
|
||
const t = getTranslations(lang);
|
||
|
||
useEffect(() => {
|
||
setIsLoaded(true);
|
||
}, []);
|
||
|
||
const supportChannels = [
|
||
{
|
||
key: 'ticket',
|
||
icon: '🎫',
|
||
color: 'from-blue-500 to-cyan-500',
|
||
data: t.pages.support.channels.ticket,
|
||
},
|
||
{
|
||
key: 'chat',
|
||
icon: '💬',
|
||
color: 'from-green-500 to-teal-500',
|
||
data: t.pages.support.channels.chat,
|
||
},
|
||
{
|
||
key: 'phone',
|
||
icon: '📞',
|
||
color: 'from-purple-500 to-pink-500',
|
||
data: t.pages.support.channels.phone,
|
||
},
|
||
];
|
||
|
||
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-green-400">{t.pages.support.title}</span>
|
||
</h1>
|
||
<p className="text-xl md:text-2xl text-cyan-400 mb-4">
|
||
{t.pages.support.subtitle}
|
||
</p>
|
||
<p className="text-lg text-gray-300 max-w-3xl mx-auto">
|
||
{t.pages.support.description}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Support Channels */}
|
||
<div className="grid md:grid-cols-3 gap-8 mb-20">
|
||
{supportChannels.map((channel) => (
|
||
<button
|
||
key={channel.key}
|
||
onClick={() => setActiveTab(channel.key)}
|
||
className={`group relative p-8 border rounded-lg backdrop-blur-sm transition-all duration-300 transform hover:scale-105 ${
|
||
activeTab === channel.key
|
||
? 'border-green-400 bg-green-500/10'
|
||
: 'border-green-500/30 hover:border-green-400'
|
||
}`}
|
||
>
|
||
<div
|
||
className={`absolute inset-0 bg-gradient-to-br ${channel.color} opacity-0 group-hover:opacity-10 rounded-lg transition-opacity duration-300`}
|
||
></div>
|
||
<div className="relative z-10 text-center">
|
||
<div className="text-6xl mb-6">{channel.icon}</div>
|
||
<h3 className="text-2xl font-bold text-green-400 mb-4">
|
||
{channel.data.title}
|
||
</h3>
|
||
<p className="text-gray-300">{channel.data.description}</p>
|
||
</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Support Content */}
|
||
<div className="bg-black/50 border border-green-500/30 rounded-lg p-8 mb-20">
|
||
{activeTab === 'ticket' && (
|
||
<div>
|
||
<h2 className="text-3xl font-bold text-green-400 mb-8 text-center">
|
||
提交工单
|
||
</h2>
|
||
<div className="max-w-2xl mx-auto">
|
||
<form className="space-y-6">
|
||
<div>
|
||
<label className="block text-green-400 mb-2">
|
||
问题类型
|
||
</label>
|
||
<select className="w-full p-3 bg-black border border-green-500/30 rounded text-gray-300 focus:border-green-400 focus:outline-none">
|
||
<option>技术问题</option>
|
||
<option>账单问题</option>
|
||
<option>产品咨询</option>
|
||
<option>其他</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="block text-green-400 mb-2">
|
||
问题标题
|
||
</label>
|
||
<input
|
||
type="text"
|
||
className="w-full p-3 bg-black border border-green-500/30 rounded text-gray-300 focus:border-green-400 focus:outline-none"
|
||
placeholder="请简要描述您的问题"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-green-400 mb-2">
|
||
详细描述
|
||
</label>
|
||
<textarea
|
||
rows={6}
|
||
className="w-full p-3 bg-black border border-green-500/30 rounded text-gray-300 focus:border-green-400 focus:outline-none"
|
||
placeholder="请详细描述您遇到的问题..."
|
||
></textarea>
|
||
</div>
|
||
<button
|
||
type="submit"
|
||
className="w-full px-6 py-3 bg-gradient-to-r from-green-500 to-teal-500 text-black font-bold rounded-lg hover:opacity-90 transition-all duration-300"
|
||
>
|
||
提交工单
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'chat' && (
|
||
<div>
|
||
<h2 className="text-3xl font-bold text-green-400 mb-8 text-center">
|
||
在线客服
|
||
</h2>
|
||
<div className="max-w-2xl mx-auto">
|
||
<div className="bg-black border border-green-500/30 rounded-lg p-6 h-96 mb-4 overflow-y-auto">
|
||
<div className="space-y-4">
|
||
<div className="flex items-start">
|
||
<div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-3">
|
||
🤖
|
||
</div>
|
||
<div className="bg-green-500/20 rounded-lg p-3 max-w-xs">
|
||
<p className="text-gray-300">
|
||
您好！我是CyberCloud智能客服，有什么可以帮助您的吗？
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start justify-end">
|
||
<div className="bg-blue-500/20 rounded-lg p-3 max-w-xs">
|
||
<p className="text-gray-300">
|
||
我想了解云服务器的配置选项
|
||
</p>
|
||
</div>
|
||
<div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center ml-3">
|
||
👤
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start">
|
||
<div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-3">
|
||
🤖
|
||
</div>
|
||
<div className="bg-green-500/20 rounded-lg p-3 max-w-xs">
|
||
<p className="text-gray-300">
|
||
我们提供多种云服务器配置，从入门级到企业级都有。您可以根据需求选择CPU、内存、存储等配置。需要我为您详细介绍吗？
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex">
|
||
<input
|
||
type="text"
|
||
className="flex-1 p-3 bg-black border border-green-500/30 rounded-l text-gray-300 focus:border-green-400 focus:outline-none"
|
||
placeholder="输入您的问题..."
|
||
/>
|
||
|
||
<button className="px-6 py-3 bg-gradient-to-r from-green-500 to-teal-500 text-black font-bold rounded-r hover:opacity-90 transition-all duration-300">
|
||
发送
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'phone' && (
|
||
<div>
|
||
<h2 className="text-3xl font-bold text-green-400 mb-8 text-center">
|
||
电话支持
|
||
</h2>
|
||
<div className="max-w-2xl mx-auto text-center">
|
||
<div className="grid md:grid-cols-2 gap-8">
|
||
<div className="p-6 border border-green-500/30 rounded-lg">
|
||
<h3 className="text-xl font-bold text-green-400 mb-4">
|
||
技术支持热线
|
||
</h3>
|
||
<p className="text-2xl font-bold text-cyan-400 mb-2">
|
||
400-123-4567
|
||
</p>
|
||
<p className="text-gray-400">7x24小时技术支持</p>
|
||
</div>
|
||
<div className="p-6 border border-green-500/30 rounded-lg">
|
||
<h3 className="text-xl font-bold text-green-400 mb-4">
|
||
销售咨询热线
|
||
</h3>
|
||
<p className="text-2xl font-bold text-cyan-400 mb-2">
|
||
400-765-4321
|
||
</p>
|
||
<p className="text-gray-400">工作日 9:00-18:00</p>
|
||
</div>
|
||
</div>
|
||
<div className="mt-8 p-6 bg-green-500/10 border border-green-500/30 rounded-lg">
|
||
<h3 className="text-xl font-bold text-green-400 mb-4">
|
||
紧急联系方式
|
||
</h3>
|
||
<p className="text-gray-300 mb-2">如遇紧急技术故障，请拨打：</p>
|
||
<p className="text-2xl font-bold text-red-400">400-999-0000</p>
|
||
<p className="text-gray-400 text-sm mt-2">
|
||
此热线仅用于紧急故障报告
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* FAQ Section */}
|
||
<div className="bg-black/50 border border-green-500/30 rounded-lg p-8">
|
||
<h2 className="text-3xl font-bold text-green-400 mb-8 text-center">常见问题</h2>
|
||
<div className="grid md:grid-cols-2 gap-8">
|
||
<div className="space-y-4">
|
||
{[
|
||
{
|
||
q: '如何创建云服务器实例？',
|
||
a: '登录控制台，选择云服务器产品，点击创建实例，按照向导完成配置即可。',
|
||
},
|
||
{
|
||
q: '支持哪些操作系统？',
|
||
a: '我们支持主流的Linux发行版和Windows Server版本。',
|
||
},
|
||
{
|
||
q: '如何备份数据？',
|
||
a: '可以使用自动快照功能或手动创建快照来备份数据。',
|
||
},
|
||
].map((faq, index) => (
|
||
<div key={index} className="p-4 border border-gray-700 rounded-lg">
|
||
<h4 className="text-green-400 font-bold mb-2">{faq.q}</h4>
|
||
<p className="text-gray-300 text-sm">{faq.a}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="space-y-4">
|
||
{[
|
||
{
|
||
q: '如何升级服务器配置？',
|
||
a: '在控制台中选择实例，点击升级配置，选择新的配置规格即可。',
|
||
},
|
||
{
|
||
q: '网络延迟如何优化？',
|
||
a: '选择距离用户最近的数据中心，使用CDN加速服务。',
|
||
},
|
||
{
|
||
q: '如何监控服务器状态？',
|
||
a: '使用云监控服务，可以实时查看CPU、内存、网络等指标。',
|
||
},
|
||
].map((faq, index) => (
|
||
<div key={index} className="p-4 border border-gray-700 rounded-lg">
|
||
<h4 className="text-green-400 font-bold mb-2">{faq.q}</h4>
|
||
<p className="text-gray-300 text-sm">{faq.a}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|