671 lines
31 KiB
TypeScript
671 lines
31 KiB
TypeScript
import { useState, useEffect } from 'react';
|
||
import Head from 'next/head';
|
||
import { toast } from 'react-hot-toast';
|
||
import {
|
||
CogIcon,
|
||
ShieldCheckIcon,
|
||
CurrencyDollarIcon,
|
||
GlobeAltIcon,
|
||
BellIcon,
|
||
PhoneIcon,
|
||
CloudIcon,
|
||
KeyIcon
|
||
} from '@heroicons/react/24/outline';
|
||
import Layout from '@/components/Layout';
|
||
|
||
interface Settings {
|
||
// 基础设置
|
||
siteName: string;
|
||
siteDescription: string;
|
||
adminEmail: string;
|
||
supportEmail: string;
|
||
|
||
// 通话设置
|
||
maxCallDuration: number; // 分钟
|
||
callTimeout: number; // 秒
|
||
enableRecording: boolean;
|
||
enableVideoCall: boolean;
|
||
|
||
// 费用设置 - 修改为每个服务单独配置
|
||
serviceRates: {
|
||
ai_voice: number; // AI语音翻译费率（元/分钟）
|
||
ai_video: number; // AI视频翻译费率（元/分钟）
|
||
sign_language: number; // 手语翻译费率（元/分钟）
|
||
human_interpreter: number; // 真人翻译费率（元/分钟）
|
||
document_translation: number; // 文档翻译费率（元/字）
|
||
};
|
||
currency: string;
|
||
taxRate: number;
|
||
|
||
// 通知设置
|
||
emailNotifications: boolean;
|
||
smsNotifications: boolean;
|
||
pushNotifications: boolean;
|
||
|
||
// 安全设置
|
||
enableTwoFactor: boolean;
|
||
sessionTimeout: number; // 分钟
|
||
maxLoginAttempts: number;
|
||
|
||
// API设置
|
||
twilioAccountSid: string;
|
||
twilioAuthToken: string;
|
||
openaiApiKey: string;
|
||
|
||
// 语言设置
|
||
defaultLanguage: string;
|
||
supportedLanguages: string[];
|
||
}
|
||
|
||
export default function SettingsPage() {
|
||
const [settings, setSettings] = useState<Settings>({
|
||
siteName: '口译服务管理系统',
|
||
siteDescription: '专业的多语言口译服务平台',
|
||
adminEmail: 'admin@interpreter.com',
|
||
supportEmail: 'support@interpreter.com',
|
||
maxCallDuration: 120,
|
||
callTimeout: 30,
|
||
enableRecording: true,
|
||
enableVideoCall: true,
|
||
serviceRates: {
|
||
ai_voice: 2.0,
|
||
ai_video: 3.0,
|
||
sign_language: 5.0,
|
||
human_interpreter: 8.0,
|
||
document_translation: 0.1,
|
||
},
|
||
currency: 'CNY',
|
||
taxRate: 0.06,
|
||
emailNotifications: true,
|
||
smsNotifications: false,
|
||
pushNotifications: true,
|
||
enableTwoFactor: false,
|
||
sessionTimeout: 30,
|
||
maxLoginAttempts: 5,
|
||
twilioAccountSid: '',
|
||
twilioAuthToken: '',
|
||
openaiApiKey: '',
|
||
defaultLanguage: 'zh-CN',
|
||
supportedLanguages: ['zh-CN', 'en-US', 'ja-JP', 'ko-KR', 'fr-FR', 'de-DE', 'es-ES']
|
||
});
|
||
|
||
const [loading, setLoading] = useState(false);
|
||
const [activeTab, setActiveTab] = useState('basic');
|
||
|
||
// 保存设置
|
||
const saveSettings = async () => {
|
||
try {
|
||
setLoading(true);
|
||
|
||
// 这里应该调用API保存设置
|
||
// await api.updateSettings(settings);
|
||
|
||
// 模拟API调用
|
||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||
|
||
toast.success('设置保存成功');
|
||
} catch (error) {
|
||
console.error('Error saving settings:', error);
|
||
toast.error('保存设置失败');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 重置设置
|
||
const resetSettings = () => {
|
||
setSettings({
|
||
siteName: '口译服务管理系统',
|
||
siteDescription: '专业的多语言口译服务平台',
|
||
adminEmail: 'admin@interpreter.com',
|
||
supportEmail: 'support@interpreter.com',
|
||
maxCallDuration: 120,
|
||
callTimeout: 30,
|
||
enableRecording: true,
|
||
enableVideoCall: true,
|
||
serviceRates: {
|
||
ai_voice: 2.0,
|
||
ai_video: 3.0,
|
||
sign_language: 5.0,
|
||
human_interpreter: 8.0,
|
||
document_translation: 0.1,
|
||
},
|
||
currency: 'CNY',
|
||
taxRate: 0.06,
|
||
emailNotifications: true,
|
||
smsNotifications: false,
|
||
pushNotifications: true,
|
||
enableTwoFactor: false,
|
||
sessionTimeout: 30,
|
||
maxLoginAttempts: 5,
|
||
twilioAccountSid: '',
|
||
twilioAuthToken: '',
|
||
openaiApiKey: '',
|
||
defaultLanguage: 'zh-CN',
|
||
supportedLanguages: ['zh-CN', 'en-US', 'ja-JP', 'ko-KR', 'fr-FR', 'de-DE', 'es-ES']
|
||
});
|
||
toast.success('设置已重置为默认值');
|
||
};
|
||
|
||
const tabs = [
|
||
{ id: 'basic', name: '基础设置', icon: CogIcon },
|
||
{ id: 'call', name: '通话设置', icon: PhoneIcon },
|
||
{ id: 'billing', name: '费用设置', icon: CurrencyDollarIcon },
|
||
{ id: 'notifications', name: '通知设置', icon: BellIcon },
|
||
{ id: 'security', name: '安全设置', icon: ShieldCheckIcon },
|
||
{ id: 'api', name: 'API设置', icon: KeyIcon },
|
||
{ id: 'language', name: '语言设置', icon: GlobeAltIcon }
|
||
];
|
||
|
||
return (
|
||
<Layout>
|
||
<Head>
|
||
<title>系统设置 - 口译服务管理后台</title>
|
||
</Head>
|
||
|
||
<div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
||
<div className="px-4 py-6 sm:px-0">
|
||
{/* 页面标题 */}
|
||
<div className="flex items-center justify-between mb-6">
|
||
<h1 className="text-2xl font-bold text-gray-900">系统设置</h1>
|
||
<div className="flex space-x-3">
|
||
<button
|
||
onClick={resetSettings}
|
||
className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||
>
|
||
重置设置
|
||
</button>
|
||
<button
|
||
onClick={saveSettings}
|
||
disabled={loading}
|
||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50"
|
||
>
|
||
{loading ? '保存中...' : '保存设置'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white shadow rounded-lg">
|
||
<div className="flex">
|
||
{/* 侧边栏标签 */}
|
||
<div className="w-64 border-r border-gray-200">
|
||
<nav className="space-y-1 p-4">
|
||
{tabs.map((tab) => {
|
||
const Icon = tab.icon;
|
||
return (
|
||
<button
|
||
key={tab.id}
|
||
onClick={() => setActiveTab(tab.id)}
|
||
className={`w-full flex items-center px-3 py-2 text-sm font-medium rounded-md ${
|
||
activeTab === tab.id
|
||
? 'bg-blue-50 text-blue-700 border-blue-500'
|
||
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
|
||
}`}
|
||
>
|
||
<Icon className="h-5 w-5 mr-3" />
|
||
{tab.name}
|
||
</button>
|
||
);
|
||
})}
|
||
</nav>
|
||
</div>
|
||
|
||
{/* 主内容区域 */}
|
||
<div className="flex-1 p-6">
|
||
{/* 基础设置 */}
|
||
{activeTab === 'basic' && (
|
||
<div className="space-y-6">
|
||
<h3 className="text-lg font-medium text-gray-900">基础设置</h3>
|
||
|
||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">站点名称</label>
|
||
<input
|
||
type="text"
|
||
value={settings.siteName}
|
||
onChange={(e) => setSettings({...settings, siteName: e.target.value})}
|
||
className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">管理员邮箱</label>
|
||
<input
|
||
type="email"
|
||
value={settings.adminEmail}
|
||
onChange={(e) => setSettings({...settings, adminEmail: e.target.value})}
|
||
className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div className="sm:col-span-2">
|
||
<label className="block text-sm font-medium text-gray-700">站点描述</label>
|
||
<textarea
|
||
rows={3}
|
||
value={settings.siteDescription}
|
||
onChange={(e) => setSettings({...settings, siteDescription: e.target.value})}
|
||
className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">客服邮箱</label>
|
||
<input
|
||
type="email"
|
||
value={settings.supportEmail}
|
||
onChange={(e) => setSettings({...settings, supportEmail: e.target.value})}
|
||
className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 通话设置 */}
|
||
{activeTab === 'call' && (
|
||
<div className="space-y-6">
|
||
<h3 className="text-lg font-medium text-gray-900">通话设置</h3>
|
||
|
||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">最大通话时长 (分钟)</label>
|
||
<input
|
||
type="number"
|
||
value={settings.maxCallDuration}
|
||
onChange={(e) => setSettings({...settings, maxCallDuration: parseInt(e.target.value)})}
|
||
className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">呼叫超时时间 (秒)</label>
|
||
<input
|
||
type="number"
|
||
value={settings.callTimeout}
|
||
onChange={(e) => setSettings({...settings, callTimeout: parseInt(e.target.value)})}
|
||
className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div className="sm:col-span-2">
|
||
<div className="flex items-center">
|
||
<input
|
||
type="checkbox"
|
||
checked={settings.enableRecording}
|
||
onChange={(e) => setSettings({...settings, enableRecording: e.target.checked})}
|
||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||
/>
|
||
<label className="ml-2 block text-sm text-gray-900">启用通话录音</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">启用视频通话</label>
|
||
<div className="mt-1">
|
||
<input
|
||
type="checkbox"
|
||
checked={settings.enableVideoCall}
|
||
onChange={(e) => setSettings({...settings, enableVideoCall: e.target.checked})}
|
||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 费用设置 */}
|
||
{activeTab === 'billing' && (
|
||
<div className="space-y-6">
|
||
<div>
|
||
<h3 className="text-lg font-medium text-gray-900 mb-4">服务费率设置</h3>
|
||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">
|
||
AI语音翻译费率
|
||
</label>
|
||
<div className="mt-1 relative rounded-md shadow-sm">
|
||
<input
|
||
type="number"
|
||
step="0.1"
|
||
min="0"
|
||
className="focus:ring-indigo-500 focus:border-indigo-500 block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
|
||
value={settings.serviceRates.ai_voice}
|
||
onChange={(e) => setSettings({
|
||
...settings,
|
||
serviceRates: {
|
||
...settings.serviceRates,
|
||
ai_voice: parseFloat(e.target.value) || 0
|
||
}
|
||
})}
|
||
/>
|
||
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
||
<span className="text-gray-500 sm:text-sm">元/分钟</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">
|
||
AI视频翻译费率
|
||
</label>
|
||
<div className="mt-1 relative rounded-md shadow-sm">
|
||
<input
|
||
type="number"
|
||
step="0.1"
|
||
min="0"
|
||
className="focus:ring-indigo-500 focus:border-indigo-500 block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
|
||
value={settings.serviceRates.ai_video}
|
||
onChange={(e) => setSettings({
|
||
...settings,
|
||
serviceRates: {
|
||
...settings.serviceRates,
|
||
ai_video: parseFloat(e.target.value) || 0
|
||
}
|
||
})}
|
||
/>
|
||
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
||
<span className="text-gray-500 sm:text-sm">元/分钟</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">
|
||
手语翻译费率
|
||
</label>
|
||
<div className="mt-1 relative rounded-md shadow-sm">
|
||
<input
|
||
type="number"
|
||
step="0.1"
|
||
min="0"
|
||
className="focus:ring-indigo-500 focus:border-indigo-500 block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
|
||
value={settings.serviceRates.sign_language}
|
||
onChange={(e) => setSettings({
|
||
...settings,
|
||
serviceRates: {
|
||
...settings.serviceRates,
|
||
sign_language: parseFloat(e.target.value) || 0
|
||
}
|
||
})}
|
||
/>
|
||
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
||
<span className="text-gray-500 sm:text-sm">元/分钟</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">
|
||
真人翻译费率
|
||
</label>
|
||
<div className="mt-1 relative rounded-md shadow-sm">
|
||
<input
|
||
type="number"
|
||
step="0.1"
|
||
min="0"
|
||
className="focus:ring-indigo-500 focus:border-indigo-500 block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
|
||
value={settings.serviceRates.human_interpreter}
|
||
onChange={(e) => setSettings({
|
||
...settings,
|
||
serviceRates: {
|
||
...settings.serviceRates,
|
||
human_interpreter: parseFloat(e.target.value) || 0
|
||
}
|
||
})}
|
||
/>
|
||
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
||
<span className="text-gray-500 sm:text-sm">元/分钟</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">
|
||
文档翻译费率
|
||
</label>
|
||
<div className="mt-1 relative rounded-md shadow-sm">
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
min="0"
|
||
className="focus:ring-indigo-500 focus:border-indigo-500 block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
|
||
value={settings.serviceRates.document_translation}
|
||
onChange={(e) => setSettings({
|
||
...settings,
|
||
serviceRates: {
|
||
...settings.serviceRates,
|
||
document_translation: parseFloat(e.target.value) || 0
|
||
}
|
||
})}
|
||
/>
|
||
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
||
<span className="text-gray-500 sm:text-sm">元/字</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">
|
||
货币单位
|
||
</label>
|
||
<select
|
||
className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
|
||
value={settings.currency}
|
||
onChange={(e) => setSettings({...settings, currency: e.target.value})}
|
||
>
|
||
<option value="CNY">人民币 (CNY)</option>
|
||
<option value="USD">美元 (USD)</option>
|
||
<option value="EUR">欧元 (EUR)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">
|
||
税率 (%)
|
||
</label>
|
||
<input
|
||
type="number"
|
||
step="0.01"
|
||
min="0"
|
||
max="1"
|
||
className="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
|
||
value={settings.taxRate}
|
||
onChange={(e) => setSettings({...settings, taxRate: parseFloat(e.target.value) || 0})}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 通知设置 */}
|
||
{activeTab === 'notifications' && (
|
||
<div className="space-y-6">
|
||
<h3 className="text-lg font-medium text-gray-900">通知设置</h3>
|
||
|
||
<div className="space-y-4">
|
||
<div className="flex items-center">
|
||
<input
|
||
type="checkbox"
|
||
checked={settings.emailNotifications}
|
||
onChange={(e) => setSettings({...settings, emailNotifications: e.target.checked})}
|
||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||
/>
|
||
<label className="ml-2 block text-sm text-gray-900">邮件通知</label>
|
||
</div>
|
||
|
||
<div className="flex items-center">
|
||
<input
|
||
type="checkbox"
|
||
checked={settings.smsNotifications}
|
||
onChange={(e) => setSettings({...settings, smsNotifications: e.target.checked})}
|
||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||
/>
|
||
<label className="ml-2 block text-sm text-gray-900">短信通知</label>
|
||
</div>
|
||
|
||
<div className="flex items-center">
|
||
<input
|
||
type="checkbox"
|
||
checked={settings.pushNotifications}
|
||
onChange={(e) => setSettings({...settings, pushNotifications: e.target.checked})}
|
||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||
/>
|
||
<label className="ml-2 block text-sm text-gray-900">推送通知</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 安全设置 */}
|
||
{activeTab === 'security' && (
|
||
<div className="space-y-6">
|
||
<h3 className="text-lg font-medium text-gray-900">安全设置</h3>
|
||
|
||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||
<div className="sm:col-span-2">
|
||
<div className="flex items-center">
|
||
<input
|
||
type="checkbox"
|
||
checked={settings.enableTwoFactor}
|
||
onChange={(e) => setSettings({...settings, enableTwoFactor: e.target.checked})}
|
||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||
/>
|
||
<label className="ml-2 block text-sm text-gray-900">启用双因素认证</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">会话超时时间 (分钟)</label>
|
||
<input
|
||
type="number"
|
||
value={settings.sessionTimeout}
|
||
onChange={(e) => setSettings({...settings, sessionTimeout: parseInt(e.target.value)})}
|
||
className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">最大登录尝试次数</label>
|
||
<input
|
||
type="number"
|
||
value={settings.maxLoginAttempts}
|
||
onChange={(e) => setSettings({...settings, maxLoginAttempts: parseInt(e.target.value)})}
|
||
className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* API设置 */}
|
||
{activeTab === 'api' && (
|
||
<div className="space-y-6">
|
||
<h3 className="text-lg font-medium text-gray-900">API设置</h3>
|
||
|
||
<div className="space-y-6">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">Twilio Account SID</label>
|
||
<input
|
||
type="text"
|
||
value={settings.twilioAccountSid}
|
||
onChange={(e) => setSettings({...settings, twilioAccountSid: e.target.value})}
|
||
className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
||
placeholder="ACxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">Twilio Auth Token</label>
|
||
<input
|
||
type="password"
|
||
value={settings.twilioAuthToken}
|
||
onChange={(e) => setSettings({...settings, twilioAuthToken: e.target.value})}
|
||
className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
||
placeholder="••••••••••••••••••••••••••••••••"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">OpenAI API Key</label>
|
||
<input
|
||
type="password"
|
||
value={settings.openaiApiKey}
|
||
onChange={(e) => setSettings({...settings, openaiApiKey: e.target.value})}
|
||
className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
||
placeholder="sk-••••••••••••••••••••••••••••••••••••••••••••••••"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 语言设置 */}
|
||
{activeTab === 'language' && (
|
||
<div className="space-y-6">
|
||
<h3 className="text-lg font-medium text-gray-900">语言设置</h3>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700">默认语言</label>
|
||
<select
|
||
value={settings.defaultLanguage}
|
||
onChange={(e) => setSettings({...settings, defaultLanguage: e.target.value})}
|
||
className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
||
>
|
||
<option value="zh-CN">中文 (简体)</option>
|
||
<option value="en-US">English (US)</option>
|
||
<option value="ja-JP">日本語</option>
|
||
<option value="ko-KR">한국어</option>
|
||
<option value="es-ES">Español</option>
|
||
<option value="fr-FR">Français</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">支持的语言</label>
|
||
<div className="space-y-2">
|
||
{[
|
||
{ code: 'zh-CN', name: '中文 (简体)' },
|
||
{ code: 'en-US', name: 'English (US)' },
|
||
{ code: 'ja-JP', name: '日本語' },
|
||
{ code: 'ko-KR', name: '한국어' },
|
||
{ code: 'es-ES', name: 'Español' },
|
||
{ code: 'fr-FR', name: 'Français' }
|
||
].map((lang) => (
|
||
<div key={lang.code} className="flex items-center">
|
||
<input
|
||
type="checkbox"
|
||
checked={settings.supportedLanguages.includes(lang.code)}
|
||
onChange={(e) => {
|
||
if (e.target.checked) {
|
||
setSettings({
|
||
...settings,
|
||
supportedLanguages: [...settings.supportedLanguages, lang.code]
|
||
});
|
||
} else {
|
||
setSettings({
|
||
...settings,
|
||
supportedLanguages: settings.supportedLanguages.filter(l => l !== lang.code)
|
||
});
|
||
}
|
||
}}
|
||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||
/>
|
||
<label className="ml-2 block text-sm text-gray-900">{lang.name}</label>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
}
|