559 lines
28 KiB
TypeScript
559 lines
28 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useTheme } from '../contexts/ThemeContext';
|
|
import { PageType } from '../components/Sidebar';
|
|
import {
|
|
Settings,
|
|
User,
|
|
Bell,
|
|
Shield,
|
|
Database,
|
|
Palette,
|
|
Key,
|
|
Globe,
|
|
Monitor,
|
|
Smartphone,
|
|
Mail,
|
|
MessageSquare,
|
|
Clock,
|
|
Save,
|
|
RefreshCw,
|
|
CheckCircle,
|
|
AlertTriangle,
|
|
ChevronRight,
|
|
Building,
|
|
Users,
|
|
Bot,
|
|
Workflow,
|
|
FileText,
|
|
Zap,
|
|
} from 'lucide-react';
|
|
|
|
interface SystemSettingsProps {
|
|
onNavigate: (page: PageType) => void;
|
|
}
|
|
|
|
const SystemSettings: React.FC<SystemSettingsProps> = ({ onNavigate }) => {
|
|
const { theme } = useTheme();
|
|
const isDark = theme === 'dark';
|
|
|
|
// 主题颜色类
|
|
const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
|
|
const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-200';
|
|
const textPrimary = isDark ? 'text-white' : 'text-gray-900';
|
|
const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
|
|
const textMuted = isDark ? 'text-slate-500' : 'text-gray-500';
|
|
const btnSecondary = isDark ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300' : 'bg-gray-100 hover:bg-gray-200 border-gray-300 text-gray-700';
|
|
const btnPrimary = isDark ? 'bg-blue-600 hover:bg-blue-500' : 'bg-red-600 hover:bg-red-500';
|
|
const inputBg = isDark ? 'bg-slate-900/50' : 'bg-gray-50';
|
|
const inputBorder = isDark ? 'border-blue-800/30' : 'border-gray-300';
|
|
|
|
const [activeTab, setActiveTab] = useState('general');
|
|
const [settings, setSettings] = useState({
|
|
// 通用设置
|
|
systemName: '智能策略系统',
|
|
systemVersion: 'V1.0.0',
|
|
language: 'zh-CN',
|
|
timezone: 'Asia/Shanghai',
|
|
// 通知设置
|
|
emailNotification: true,
|
|
inAppNotification: true,
|
|
smsNotification: false,
|
|
// 安全设置
|
|
sessionTimeout: 30,
|
|
passwordExpiration: 90,
|
|
twoFactorAuth: false,
|
|
// 运行规则
|
|
maxDiscussionRounds: 10,
|
|
maxRollbackTimes: 3,
|
|
enableStateGate: true,
|
|
enableLogicChainCheck: true,
|
|
enableRiskReview: true,
|
|
allowPartialParallel: true,
|
|
});
|
|
|
|
const tabs = [
|
|
{ id: 'general', label: '通用设置', icon: Settings },
|
|
{ id: 'user', label: '用户管理', icon: Users },
|
|
{ id: 'agent', label: '智能体管理', icon: Bot },
|
|
{ id: 'notification', label: '通知设置', icon: Bell },
|
|
{ id: 'security', label: '安全设置', icon: Shield },
|
|
{ id: 'workflow', label: '运行规则', icon: Workflow },
|
|
{ id: 'template', label: '模板管理', icon: FileText },
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* 顶部标题栏 */}
|
|
<div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4`}>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
|
|
<Settings className="w-5 h-5 text-blue-400" />
|
|
</div>
|
|
<div>
|
|
<h1 className={`${textPrimary} font-bold text-lg`}>系统设置</h1>
|
|
<p className={`${textSecondary} text-sm`}>管理智能策略系统的各项配置</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className="px-3 py-1.5 bg-green-500/20 text-green-400 rounded-full text-sm font-medium flex items-center gap-1.5">
|
|
<span className="w-2 h-2 bg-green-400 rounded-full" />
|
|
系统运行正常
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-12 gap-6">
|
|
{/* 左侧导航 (20%) */}
|
|
<div className="col-span-3">
|
|
<div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4 sticky top-6`}>
|
|
<h3 className={`${textSecondary} text-xs font-medium mb-3 uppercase tracking-wider`}>设置分类</h3>
|
|
<nav className="space-y-1">
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left text-sm transition-colors ${
|
|
activeTab === tab.id
|
|
? 'bg-blue-600/20 text-blue-400 border border-blue-500/30'
|
|
: `${textSecondary} hover:bg-slate-700/50 hover:${textPrimary}`
|
|
}`}
|
|
>
|
|
<tab.icon className="w-4 h-4" />
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
|
|
{/* 系统信息 */}
|
|
<div className="mt-6 pt-4 border-t border-blue-800/30">
|
|
<h3 className={`${textSecondary} text-xs font-medium mb-3 uppercase tracking-wider`}>系统信息</h3>
|
|
<div className="space-y-2 text-xs">
|
|
<div className="flex justify-between">
|
|
<span className={textMuted}>版本号</span>
|
|
<span className="text-cyan-400">{settings.systemVersion}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className={textMuted}>运行环境</span>
|
|
<span className={textSecondary}>生产环境</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className={textMuted}>最后更新</span>
|
|
<span className={textSecondary}>2026-03-19</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 右侧设置区 (80%) */}
|
|
<div className="col-span-9">
|
|
{/* 通用设置 */}
|
|
{activeTab === 'general' && (
|
|
<div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6`}>
|
|
<h2 className={`${textPrimary} font-semibold text-lg mb-6 flex items-center gap-2`}>
|
|
<Settings className="w-5 h-5 text-blue-400" />
|
|
通用设置
|
|
</h2>
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label className={`block ${textSecondary} text-sm mb-2`}>系统名称</label>
|
|
<input
|
|
type="text"
|
|
value={settings.systemName}
|
|
onChange={(e) => setSettings({ ...settings, systemName: e.target.value })}
|
|
className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm`}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className={`block ${textSecondary} text-sm mb-2`}>系统版本</label>
|
|
<input
|
|
type="text"
|
|
value={settings.systemVersion}
|
|
disabled
|
|
className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textMuted} text-sm`}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className={`block ${textSecondary} text-sm mb-2`}>语言</label>
|
|
<select
|
|
value={settings.language}
|
|
onChange={(e) => setSettings({ ...settings, language: e.target.value })}
|
|
className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm`}
|
|
>
|
|
<option value="zh-CN">简体中文</option>
|
|
<option value="en-US">English</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className={`block ${textSecondary} text-sm mb-2`}>时区</label>
|
|
<select
|
|
value={settings.timezone}
|
|
onChange={(e) => setSettings({ ...settings, timezone: e.target.value })}
|
|
className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm`}
|
|
>
|
|
<option value="Asia/Shanghai">北京时间 (UTC+8)</option>
|
|
<option value="UTC">世界时间 (UTC)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-4 border-t border-blue-800/30">
|
|
<div className="flex items-center justify-between p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg">
|
|
<div className="flex items-center gap-3">
|
|
<Zap className="w-5 h-5 text-blue-400" />
|
|
<div>
|
|
<p className={`${textPrimary} text-sm font-medium`}>自动保存设置</p>
|
|
<p className={`${textSecondary} text-xs`}>开启后，系统会自动保存您的设置更改</p>
|
|
</div>
|
|
</div>
|
|
<button className={`px-4 py-2 ${btnPrimary} ${textPrimary} rounded-lg text-sm transition-colors`}>
|
|
已开启
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 用户管理 */}
|
|
{activeTab === 'user' && (
|
|
<div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6`}>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className={`${textPrimary} font-semibold text-lg flex items-center gap-2`}>
|
|
<Users className="w-5 h-5 text-cyan-400" />
|
|
用户管理
|
|
</h2>
|
|
<button className={`px-4 py-2 ${btnPrimary} ${textPrimary} rounded-lg text-sm transition-colors flex items-center gap-2`}>
|
|
<User className="w-4 h-4" />
|
|
添加用户
|
|
</button>
|
|
</div>
|
|
<div className="space-y-3">
|
|
{[
|
|
{ name: '张策略', role: '管理员', email: 'zhang@company.com', status: 'active' },
|
|
{ name: '李智能', role: '策略分析师', email: 'li@company.com', status: 'active' },
|
|
{ name: '王智能体', role: '智能体管理员', email: 'wang@company.com', status: 'active' },
|
|
{ name: '赵运维', role: '运维工程师', email: 'zhao@company.com', status: 'inactive' },
|
|
].map((user, i) => (
|
|
<div key={i} className={`flex items-center justify-between p-4 ${inputBg} ${inputBorder} rounded-lg`}>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center">
|
|
<User className="w-5 h-5 text-blue-400" />
|
|
</div>
|
|
<div>
|
|
<p className={`${textPrimary} text-sm font-medium`}>{user.name}</p>
|
|
<p className={`${textSecondary} text-xs`}>{user.email}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<span className={`px-3 py-1 rounded-full text-xs ${
|
|
user.role === '管理员' ? 'bg-purple-500/20 text-purple-400' : 'bg-blue-500/20 text-blue-400'
|
|
}`}>
|
|
{user.role}
|
|
</span>
|
|
<span className={`px-3 py-1 rounded-full text-xs ${
|
|
user.status === 'active' ? 'bg-green-500/20 text-green-400' : 'bg-slate-500/20 text-slate-400'
|
|
}`}>
|
|
{user.status === 'active' ? '在线' : '离线'}
|
|
</span>
|
|
<button className="p-2 hover:bg-slate-700 rounded-lg transition-colors">
|
|
<ChevronRight className={`w-4 h-4 ${textSecondary}`} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 智能体管理 */}
|
|
{activeTab === 'agent' && (
|
|
<div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6`}>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className={`${textPrimary} font-semibold text-lg flex items-center gap-2`}>
|
|
<Bot className="w-5 h-5 text-purple-400" />
|
|
智能体管理
|
|
</h2>
|
|
<button className={`px-4 py-2 ${btnPrimary} ${textPrimary} rounded-lg text-sm transition-colors flex items-center gap-2`}>
|
|
<Bot className="w-4 h-4" />
|
|
添加智能体
|
|
</button>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{[
|
|
{ name: 'GoalAgent', type: '目标分析', status: 'running', tasks: 156 },
|
|
{ name: 'AudienceAgent', type: '受众分析', status: 'running', tasks: 142 },
|
|
{ name: 'BehaviorAgent', type: '行为分析', status: 'idle', tasks: 98 },
|
|
{ name: 'DriverAgent', type: '驱动分析', status: 'idle', tasks: 87 },
|
|
{ name: 'NarrativeAgent', type: '叙事分析', status: 'idle', tasks: 76 },
|
|
{ name: 'LogicChainAgent', type: '逻辑链收敛', status: 'idle', tasks: 65 },
|
|
].map((agent, i) => (
|
|
<div key={i} className={`p-4 ${inputBg} ${inputBorder} rounded-lg`}>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-2">
|
|
<Bot className="w-4 h-4 text-purple-400" />
|
|
<span className={`${textPrimary} text-sm font-medium`}>{agent.name}</span>
|
|
</div>
|
|
<span className={`px-2 py-0.5 rounded text-xs ${
|
|
agent.status === 'running' ? 'bg-green-500/20 text-green-400' : 'bg-slate-500/20 text-slate-400'
|
|
}`}>
|
|
{agent.status === 'running' ? '运行中' : '空闲'}
|
|
</span>
|
|
</div>
|
|
<p className={`${textSecondary} text-xs mb-3`}>{agent.type}</p>
|
|
<div className="flex items-center justify-between text-xs">
|
|
<span className={textMuted}>已完成任务</span>
|
|
<span className="text-cyan-400">{agent.tasks}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 通知设置 */}
|
|
{activeTab === 'notification' && (
|
|
<div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6`}>
|
|
<h2 className={`${textPrimary} font-semibold text-lg mb-6 flex items-center gap-2`}>
|
|
<Bell className="w-5 h-5 text-amber-400" />
|
|
通知设置
|
|
</h2>
|
|
<div className="space-y-4">
|
|
{[
|
|
{ id: 'email', label: '邮件通知', description: '接收任务完成、风险提醒等邮件通知', icon: Mail, enabled: settings.emailNotification },
|
|
{ id: 'inApp', label: '站内通知', description: '在系统内显示通知消息', icon: MessageSquare, enabled: settings.inAppNotification },
|
|
{ id: 'sms', label: '短信通知', description: '发送重要事项的短信提醒', icon: Smartphone, enabled: settings.smsNotification },
|
|
].map((item) => (
|
|
<div key={item.id} className={`flex items-center justify-between p-4 ${inputBg} ${inputBorder} rounded-lg`}>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
|
|
<item.icon className="w-5 h-5 text-blue-400" />
|
|
</div>
|
|
<div>
|
|
<p className={`${textPrimary} text-sm font-medium`}>{item.label}</p>
|
|
<p className={`${textSecondary} text-xs`}>{item.description}</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => setSettings({ ...settings, [item.id === 'email' ? 'emailNotification' : item.id === 'inApp' ? 'inAppNotification' : 'smsNotification']: !item.enabled })}
|
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
|
item.enabled
|
|
? 'bg-green-600 hover:bg-green-500 text-white'
|
|
: btnSecondary
|
|
}`}
|
|
>
|
|
{item.enabled ? '已开启' : '已关闭'}
|
|
</button>
|
|
</div>
|
|
))}
|
|
|
|
<div className="pt-4 border-t border-blue-800/30">
|
|
<div>
|
|
<label className={`block ${textSecondary} text-sm mb-2`}>通知时段</label>
|
|
<div className="flex items-center gap-4">
|
|
<select className={`px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm`}>
|
|
<option>09:00</option>
|
|
<option>10:00</option>
|
|
<option>11:00</option>
|
|
</select>
|
|
<span className={textMuted}>至</span>
|
|
<select className={`px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm`}>
|
|
<option>18:00</option>
|
|
<option>19:00</option>
|
|
<option>20:00</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 安全设置 */}
|
|
{activeTab === 'security' && (
|
|
<div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6`}>
|
|
<h2 className={`${textPrimary} font-semibold text-lg mb-6 flex items-center gap-2`}>
|
|
<Shield className="w-5 h-5 text-red-400" />
|
|
安全设置
|
|
</h2>
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label className={`block ${textSecondary} text-sm mb-2`}>会话超时时间（分钟）</label>
|
|
<select
|
|
value={settings.sessionTimeout}
|
|
onChange={(e) => setSettings({ ...settings, sessionTimeout: Number(e.target.value) })}
|
|
className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm`}
|
|
>
|
|
<option value={15}>15 分钟</option>
|
|
<option value={30}>30 分钟</option>
|
|
<option value={60}>1 小时</option>
|
|
<option value={120}>2 小时</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className={`block ${textSecondary} text-sm mb-2`}>密码过期时间（天）</label>
|
|
<select
|
|
value={settings.passwordExpiration}
|
|
onChange={(e) => setSettings({ ...settings, passwordExpiration: Number(e.target.value) })}
|
|
className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm`}
|
|
>
|
|
<option value={30}>30 天</option>
|
|
<option value={60}>60 天</option>
|
|
<option value={90}>90 天</option>
|
|
<option value={180}>180 天</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={`flex items-center justify-between p-4 ${inputBg} ${inputBorder} rounded-lg`}>
|
|
<div className="flex items-center gap-4">
|
|
<Key className="w-5 h-5 text-purple-400" />
|
|
<div>
|
|
<p className={`${textPrimary} text-sm font-medium`}>双因素认证</p>
|
|
<p className={`${textSecondary} text-xs`}>登录时需要额外的验证码验证</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => setSettings({ ...settings, twoFactorAuth: !settings.twoFactorAuth })}
|
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
|
settings.twoFactorAuth
|
|
? 'bg-green-600 hover:bg-green-500 text-white'
|
|
: btnSecondary
|
|
}`}
|
|
>
|
|
{settings.twoFactorAuth ? '已开启' : '已关闭'}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="pt-4 border-t border-blue-800/30">
|
|
<button className="flex items-center gap-2 px-4 py-2.5 bg-red-600/20 hover:bg-red-600/30 border border-red-500/30 text-red-400 rounded-lg text-sm transition-colors">
|
|
<Shield className="w-4 h-4" />
|
|
重置所有安全设置
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 运行规则 */}
|
|
{activeTab === 'workflow' && (
|
|
<div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6`}>
|
|
<h2 className={`${textPrimary} font-semibold text-lg mb-6 flex items-center gap-2`}>
|
|
<Workflow className="w-5 h-5 text-green-400" />
|
|
运行规则配置
|
|
</h2>
|
|
<div className="space-y-4">
|
|
{[
|
|
{ id: 'enableStateGate', label: '启用状态门控', description: '智能体输出需要通过状态门控检查才能进入下一节点' },
|
|
{ id: 'enableLogicChainCheck', label: '启用逻辑链校验', description: '在逻辑链收敛阶段进行一致性检查' },
|
|
{ id: 'enableRiskReview', label: '启用风险强制复核', description: '高风险项必须经过人工确认才能继续' },
|
|
{ id: 'allowPartialParallel', label: '允许局部并行', description: '独立的流程节点可以并行执行' },
|
|
].map((item) => (
|
|
<div key={item.id} className={`flex items-center justify-between p-4 ${inputBg} ${inputBorder} rounded-lg`}>
|
|
<div>
|
|
<p className={`${textPrimary} text-sm font-medium`}>{item.label}</p>
|
|
<p className={`${textSecondary} text-xs mt-1`}>{item.description}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setSettings({ ...settings, [item.id]: !settings[item.id as keyof typeof settings] as boolean })}
|
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
|
settings[item.id as keyof typeof settings]
|
|
? 'bg-green-600 hover:bg-green-500 text-white'
|
|
: btnSecondary
|
|
}`}
|
|
>
|
|
{settings[item.id as keyof typeof settings] ? '已开启' : '已关闭'}
|
|
</button>
|
|
</div>
|
|
))}
|
|
|
|
<div className="grid grid-cols-2 gap-6 pt-4 border-t border-blue-800/30">
|
|
<div>
|
|
<label className={`block ${textSecondary} text-sm mb-2`}>最大讨论轮数</label>
|
|
<input
|
|
type="number"
|
|
value={settings.maxDiscussionRounds}
|
|
onChange={(e) => setSettings({ ...settings, maxDiscussionRounds: Number(e.target.value) })}
|
|
className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm`}
|
|
/>
|
|
<p className={`${textMuted} text-xs mt-1`}>超出此轮数将自动收敛</p>
|
|
</div>
|
|
<div>
|
|
<label className={`block ${textSecondary} text-sm mb-2`}>最大回退次数</label>
|
|
<input
|
|
type="number"
|
|
value={settings.maxRollbackTimes}
|
|
onChange={(e) => setSettings({ ...settings, maxRollbackTimes: Number(e.target.value) })}
|
|
className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm`}
|
|
/>
|
|
<p className={`${textMuted} text-xs mt-1`}>超出此次数将终止任务</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 模板管理 */}
|
|
{activeTab === 'template' && (
|
|
<div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6`}>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className={`${textPrimary} font-semibold text-lg flex items-center gap-2`}>
|
|
<FileText className="w-5 h-5 text-cyan-400" />
|
|
模板管理
|
|
</h2>
|
|
<button className={`px-4 py-2 ${btnPrimary} ${textPrimary} rounded-lg text-sm transition-colors flex items-center gap-2`}>
|
|
<FileText className="w-4 h-4" />
|
|
新建模板
|
|
</button>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-4">
|
|
{[
|
|
{ name: '宣传策略模板', type: '策略生成', fields: 24, updated: '2026-03-15' },
|
|
{ name: '活动方案模板', type: '方案推演', fields: 32, updated: '2026-03-10' },
|
|
{ name: '市场分析模板', type: '市场调研', fields: 18, updated: '2026-03-08' },
|
|
{ name: '产品推广模板', type: '产品营销', fields: 28, updated: '2026-03-05' },
|
|
{ name: '品牌公关模板', type: '公关传播', fields: 22, updated: '2026-03-01' },
|
|
{ name: '用户调研模板', type: '用户洞察', fields: 16, updated: '2026-02-28' },
|
|
].map((template, i) => (
|
|
<div key={i} className={`p-4 ${inputBg} ${inputBorder} rounded-lg hover:border-blue-500/50 transition-colors cursor-pointer`}>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-2">
|
|
<FileText className="w-4 h-4 text-cyan-400" />
|
|
<span className={`${textPrimary} text-sm font-medium`}>{template.name}</span>
|
|
</div>
|
|
<ChevronRight className={`w-4 h-4 ${textSecondary}`} />
|
|
</div>
|
|
<p className={`${textSecondary} text-xs mb-2`}>{template.type}</p>
|
|
<div className="flex items-center justify-between text-xs">
|
|
<span className={textMuted}>{template.fields} 个字段</span>
|
|
<span className={textMuted}>更新于 {template.updated}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 保存按钮 */}
|
|
<div className="mt-6 flex items-center justify-end gap-3">
|
|
<button className={`px-6 py-2.5 ${btnSecondary} rounded-lg text-sm transition-colors flex items-center gap-2`}>
|
|
<RefreshCw className="w-4 h-4" />
|
|
重置
|
|
</button>
|
|
<button className={`px-6 py-2.5 ${btnPrimary} ${textPrimary} rounded-lg text-sm transition-colors flex items-center gap-2`}>
|
|
<Save className="w-4 h-4" />
|
|
保存设置
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SystemSettings;
|