1088 lines
57 KiB
TypeScript
1088 lines
57 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
ArrowLeft,
|
|
Bot,
|
|
Workflow,
|
|
Target,
|
|
FileText,
|
|
Upload,
|
|
Clock,
|
|
User,
|
|
CheckCircle,
|
|
ChevronRight,
|
|
Sparkles,
|
|
Layers,
|
|
Users,
|
|
MessageSquare,
|
|
X,
|
|
} from 'lucide-react';
|
|
import { useTheme } from '@/contexts/ThemeContext';
|
|
import { PageType } from '@/components/Sidebar';
|
|
|
|
interface TaskCreateProps {
|
|
onNavigate: (page: PageType) => void;
|
|
}
|
|
|
|
// 可用场景列表
|
|
const availableScenes = [
|
|
{ id: 'strategy', name: '宣传策略生成', desc: '完整宣传策略方案生成', agents: 8 },
|
|
{ id: 'campaign', name: '宣传活动推演', desc: '活动方案推演与优化', agents: 6 },
|
|
{ id: 'crisis', name: '舆情应对', desc: '危机公关策略生成', agents: 5 },
|
|
{ id: 'product', name: '产品推广', desc: '产品上市推广策略', agents: 7 },
|
|
];
|
|
|
|
// 可用智能体列表
|
|
const availableAgents = [
|
|
{ id: 'goal', name: 'GoalAgent', role: '目标分析专家', category: '策略', icon: Target, desc: '专注目标设定、拆解与优先级排序' },
|
|
{ id: 'audience', name: 'AudienceAgent', role: '受众分析专家', category: '用户', icon: User, desc: '深度分析目标受众特征与需求' },
|
|
{ id: 'behavior', name: 'BehaviorAgent', role: '行为设计专家', category: '用户', icon: Sparkles, desc: '设计用户行为路径与激励机制' },
|
|
{ id: 'narrative', name: 'NarrativeAgent', role: '叙事策略专家', category: '内容', icon: FileText, desc: '构建故事框架与叙事逻辑' },
|
|
{ id: 'risk', name: 'RiskAgent', role: '风险评估专家', category: '策略', icon: CheckCircle, desc: '识别潜在风险并提供应对方案' },
|
|
{ id: 'channel', name: 'ChannelAgent', role: '渠道分析专家', category: '运营', icon: Bot, desc: '分析传播渠道特点与适用场景' },
|
|
{ id: 'creative', name: 'CreativeAgent', role: '创意生成专家', category: '内容', icon: Sparkles, desc: '提供创意方向与内容灵感' },
|
|
{ id: 'data', name: 'DataAgent', role: '数据分析专家', category: '策略', icon: CheckCircle, desc: '基于数据提供洞察与建议' },
|
|
];
|
|
|
|
const TaskCreate: React.FC<TaskCreateProps> = ({ onNavigate }) => {
|
|
const { theme } = useTheme();
|
|
const isDark = theme === 'dark';
|
|
const [step, setStep] = useState<'type' | 'single' | 'multi-agent' | 'consult' | 'scene'>('type');
|
|
const [taskType, setTaskType] = useState<'single' | 'multi-agent' | 'consult' | 'scene' | null>(null);
|
|
|
|
// 单智能体任务表单
|
|
const [singleTask, setSingleTask] = useState({
|
|
name: '',
|
|
agent: '',
|
|
input: '',
|
|
outputFormat: '',
|
|
});
|
|
|
|
// 多智能体协同分析表单
|
|
const [multiAgentTask, setMultiAgentTask] = useState({
|
|
name: '',
|
|
input: '',
|
|
selectedAgents: [] as string[],
|
|
agentSearchQuery: '',
|
|
agentCategory: 'all',
|
|
});
|
|
|
|
// 场景任务表单
|
|
const [sceneTask, setSceneTask] = useState({
|
|
name: '',
|
|
scene: '',
|
|
input: '',
|
|
deadline: '',
|
|
constraints: '',
|
|
});
|
|
|
|
const handleSelectType = (type: 'single' | 'multi-agent' | 'scene' | 'consult') => {
|
|
setTaskType(type);
|
|
setStep(type);
|
|
};
|
|
|
|
const handleCreateTask = () => {
|
|
if (taskType === 'single') {
|
|
onNavigate('task-single');
|
|
} else if (taskType === 'scene') {
|
|
onNavigate('task-scene');
|
|
} else if (taskType === 'multi-agent') {
|
|
onNavigate('multi-agent-qa');
|
|
} else {
|
|
onNavigate('task-consult-create');
|
|
}
|
|
};
|
|
|
|
// 处理智能体选择
|
|
const toggleAgent = (agentId: string) => {
|
|
setMultiAgentTask(prev => {
|
|
const isSelected = prev.selectedAgents.includes(agentId);
|
|
if (isSelected) {
|
|
return {
|
|
...prev,
|
|
selectedAgents: prev.selectedAgents.filter(id => id !== agentId)
|
|
};
|
|
} else {
|
|
// 最多选择8个
|
|
if (prev.selectedAgents.length >= 8) {
|
|
return prev;
|
|
}
|
|
return {
|
|
...prev,
|
|
selectedAgents: [...prev.selectedAgents, agentId]
|
|
};
|
|
}
|
|
});
|
|
};
|
|
|
|
// 获取过滤后的智能体列表
|
|
const getFilteredAgents = () => {
|
|
return availableAgents.filter(agent => {
|
|
const matchesSearch = agent.name.toLowerCase().includes(multiAgentTask.agentSearchQuery.toLowerCase()) ||
|
|
agent.role.toLowerCase().includes(multiAgentTask.agentSearchQuery.toLowerCase());
|
|
const matchesCategory = multiAgentTask.agentCategory === 'all' || agent.category === multiAgentTask.agentCategory;
|
|
return matchesSearch && matchesCategory;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* 顶部操作栏 */}
|
|
<div className={`rounded-xl p-4 ${isDark ? 'bg-slate-800/30 backdrop-blur-xl border border-blue-800/30' : 'bg-white border border-red-100 shadow-sm'}`}>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={() => {
|
|
if (step === 'type') {
|
|
onNavigate('task-list');
|
|
} else {
|
|
setStep('type');
|
|
setTaskType(null);
|
|
}
|
|
}}
|
|
className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
|
|
isDark
|
|
? 'bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300'
|
|
: 'bg-red-50 hover:bg-red-100 border border-red-200 text-red-600'
|
|
}`}
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
返回
|
|
</button>
|
|
<div className={`h-8 w-px ${isDark ? 'bg-blue-800/30' : 'bg-red-200'}`} />
|
|
<div>
|
|
<h1 className={`font-bold text-lg ${isDark ? 'text-white' : 'text-gray-900'}`}>新建任务</h1>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
{step === 'type' && '选择分析模式'}
|
|
{step === 'single' && '创建单智能体任务'}
|
|
{step === 'multi-agent' && '创建多智能体协同分析任务'}
|
|
{step === 'scene' && '创建场景任务'}
|
|
{step === 'consult' && '创建多智能体会商任务'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 步骤指示器 */}
|
|
<div className="flex items-center gap-2">
|
|
{['类型选择', '填写表单', '确认创建'].map((label, i) => (
|
|
<React.Fragment key={i}>
|
|
<div className="flex items-center gap-2">
|
|
<div
|
|
className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold ${
|
|
i === 0
|
|
? isDark ? 'bg-blue-600 text-white' : 'bg-red-600 text-white'
|
|
: i === 1 && step !== 'type'
|
|
? isDark ? 'bg-blue-600 text-white' : 'bg-red-600 text-white'
|
|
: i === 2 && step !== 'type'
|
|
? isDark ? 'bg-blue-600 text-white' : 'bg-red-600 text-white'
|
|
: isDark ? 'bg-slate-700 text-slate-400' : 'bg-gray-200 text-gray-500'
|
|
}`}
|
|
>
|
|
{i + 1}
|
|
</div>
|
|
<span className={`text-xs ${
|
|
i <= (step === 'type' ? 0 : 1)
|
|
? isDark ? 'text-white' : 'text-gray-900'
|
|
: isDark ? 'text-slate-500' : 'text-gray-400'
|
|
}`}>
|
|
{label}
|
|
</span>
|
|
</div>
|
|
{i < 2 && <ChevronRight className={`w-4 h-4 ${isDark ? 'text-slate-600' : 'text-gray-400'}`} />}
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 步骤1：选择分析模式 */}
|
|
{step === 'type' && (
|
|
<div className="max-w-5xl mx-auto">
|
|
<div className="text-center mb-8">
|
|
<h2 className={`font-semibold text-xl mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>选择分析模式</h2>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
请为本次任务选择最合适的处理方式
|
|
</p>
|
|
</div>
|
|
|
|
{/* 2x2 网格布局 */}
|
|
<div className="grid grid-cols-2 gap-6">
|
|
{/* 单智能体分析 */}
|
|
<button
|
|
onClick={() => handleSelectType('single')}
|
|
className={`p-6 rounded-2xl transition-all text-left border ${
|
|
isDark
|
|
? 'bg-slate-800/50 border-blue-800/30 hover:border-blue-500/50'
|
|
: 'bg-white border-red-100 hover:border-red-300 hover:shadow-md'
|
|
}`}
|
|
>
|
|
<div className={`w-14 h-14 rounded-xl flex items-center justify-center mb-4 ${
|
|
isDark ? 'bg-blue-500/20' : 'bg-blue-100'
|
|
}`}>
|
|
<Bot className={`w-7 h-7 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
|
|
</div>
|
|
<h3 className={`font-semibold text-lg mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>单智能体分析</h3>
|
|
<p className={`text-sm mb-4 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
选择一个智能体进行专项分析
|
|
</p>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
|
|
<span className={isDark ? 'text-slate-500' : 'text-gray-500'}>快速专项分析</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
|
|
<span className={isDark ? 'text-slate-500' : 'text-gray-500'}>单体独立工作</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
|
|
<span className={isDark ? 'text-slate-500' : 'text-gray-500'}>局部结果输出</span>
|
|
</div>
|
|
</div>
|
|
<div className={`mt-4 pt-4 border-t flex justify-between items-center ${isDark ? 'border-blue-800/30' : 'border-blue-100'}`}>
|
|
<span className={`text-xs ${isDark ? 'text-blue-400' : 'text-blue-500'}`}>适用：单点问题/快速试用</span>
|
|
<span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>输出：单体分析结果</span>
|
|
</div>
|
|
<div className={`mt-3 px-4 py-2 rounded-lg text-center text-sm font-medium ${
|
|
isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-blue-100 text-blue-600'
|
|
}`}>
|
|
选择该模式
|
|
</div>
|
|
</button>
|
|
|
|
{/* 多智能体协同分析 */}
|
|
<button
|
|
onClick={() => handleSelectType('multi-agent')}
|
|
className={`p-6 rounded-2xl transition-all text-left border ${
|
|
isDark
|
|
? 'bg-slate-800/50 border-green-800/30 hover:border-green-500/50'
|
|
: 'bg-white border-green-100 hover:border-green-300 hover:shadow-md'
|
|
}`}
|
|
>
|
|
<div className={`w-14 h-14 rounded-xl flex items-center justify-center mb-4 ${
|
|
isDark ? 'bg-green-500/20' : 'bg-green-100'
|
|
}`}>
|
|
<Layers className={`w-7 h-7 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
|
|
</div>
|
|
<h3 className={`font-semibold text-lg mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>多智能体协同分析</h3>
|
|
<p className={`text-sm mb-4 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
多个智能体并行分析并汇总报告
|
|
</p>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
|
|
<span className={isDark ? 'text-slate-500' : 'text-gray-500'}>多视角并行分析</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
|
|
<span className={isDark ? 'text-slate-500' : 'text-gray-500'}>人机协同判断</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
|
|
<span className={isDark ? 'text-slate-500' : 'text-gray-500'}>报告生成</span>
|
|
</div>
|
|
</div>
|
|
<div className={`mt-4 pt-4 border-t flex justify-between items-center ${isDark ? 'border-green-800/30' : 'border-green-100'}`}>
|
|
<span className={`text-xs ${isDark ? 'text-green-400' : 'text-green-500'}`}>适用：前期研判/多专业汇总</span>
|
|
<span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>输出：联合分析报告</span>
|
|
</div>
|
|
<div className={`mt-3 px-4 py-2 rounded-lg text-center text-sm font-medium ${
|
|
isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-600'
|
|
}`}>
|
|
选择该模式
|
|
</div>
|
|
</button>
|
|
|
|
{/* 多智能体会商 */}
|
|
<button
|
|
onClick={() => handleSelectType('consult')}
|
|
className={`p-6 rounded-2xl transition-all text-left border ${
|
|
isDark
|
|
? 'bg-slate-800/50 border-orange-800/30 hover:border-orange-500/50'
|
|
: 'bg-white border-orange-100 hover:border-orange-300 hover:shadow-md'
|
|
}`}
|
|
>
|
|
<div className={`w-14 h-14 rounded-xl flex items-center justify-center mb-4 ${
|
|
isDark ? 'bg-orange-500/20' : 'bg-orange-100'
|
|
}`}>
|
|
<Users className={`w-7 h-7 ${isDark ? 'text-orange-400' : 'text-orange-500'}`} />
|
|
</div>
|
|
<h3 className={`font-semibold text-lg mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>多智能体会商</h3>
|
|
<p className={`text-sm mb-4 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
多智能体讨论与推演
|
|
</p>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
|
|
<span className={isDark ? 'text-slate-500' : 'text-gray-500'}>观点碰撞</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
|
|
<span className={isDark ? 'text-slate-500' : 'text-gray-500'}>模拟推演</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
|
|
<span className={isDark ? 'text-slate-500' : 'text-gray-500'}>人工研判</span>
|
|
</div>
|
|
</div>
|
|
<div className={`mt-4 pt-4 border-t flex justify-between items-center ${isDark ? 'border-orange-800/30' : 'border-orange-100'}`}>
|
|
<span className={`text-xs ${isDark ? 'text-orange-400' : 'text-orange-500'}`}>适用：争议/比较/推演</span>
|
|
<span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>输出：会商结论</span>
|
|
</div>
|
|
<div className={`mt-3 px-4 py-2 rounded-lg text-center text-sm font-medium ${
|
|
isDark ? 'bg-orange-500/20 text-orange-400' : 'bg-orange-100 text-orange-600'
|
|
}`}>
|
|
选择该模式
|
|
</div>
|
|
</button>
|
|
|
|
{/* 场景执行 */}
|
|
<button
|
|
onClick={() => handleSelectType('scene')}
|
|
className={`p-6 rounded-2xl transition-all text-left border ${
|
|
isDark
|
|
? 'bg-slate-800/50 border-purple-800/30 hover:border-purple-500/50'
|
|
: 'bg-white border-purple-100 hover:border-purple-300 hover:shadow-md'
|
|
}`}
|
|
>
|
|
<div className={`w-14 h-14 rounded-xl flex items-center justify-center mb-4 ${
|
|
isDark ? 'bg-purple-500/20' : 'bg-purple-100'
|
|
}`}>
|
|
<Workflow className={`w-7 h-7 ${isDark ? 'text-purple-400' : 'text-purple-500'}`} />
|
|
</div>
|
|
<h3 className={`font-semibold text-lg mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>场景执行</h3>
|
|
<p className={`text-sm mb-4 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
按场景模板执行完整流程
|
|
</p>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
|
|
<span className={isDark ? 'text-slate-500' : 'text-gray-500'}>完整流程编排</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
|
|
<span className={isDark ? 'text-slate-500' : 'text-gray-500'}>多智能体协同</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
|
|
<span className={isDark ? 'text-slate-500' : 'text-gray-500'}>完整产出</span>
|
|
</div>
|
|
</div>
|
|
<div className={`mt-4 pt-4 border-t flex justify-between items-center ${isDark ? 'border-purple-800/30' : 'border-purple-100'}`}>
|
|
<span className={`text-xs ${isDark ? 'text-purple-400' : 'text-purple-500'}`}>适用：完整策略/推演</span>
|
|
<span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>输出：方案/报告</span>
|
|
</div>
|
|
<div className={`mt-3 px-4 py-2 rounded-lg text-center text-sm font-medium ${
|
|
isDark ? 'bg-purple-500/20 text-purple-400' : 'bg-purple-100 text-purple-600'
|
|
}`}>
|
|
选择该模式
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
{/* 底部按钮 */}
|
|
<div className="flex justify-between items-center mt-8">
|
|
<button
|
|
onClick={() => onNavigate('task-list')}
|
|
className={`px-6 py-2.5 rounded-lg text-sm transition-colors ${
|
|
isDark
|
|
? 'bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300'
|
|
: 'bg-gray-100 hover:bg-gray-200 border border-gray-200 text-gray-700'
|
|
}`}
|
|
>
|
|
取消
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 步骤2：单智能体任务表单 */}
|
|
{step === 'single' && (
|
|
<div className="max-w-3xl mx-auto">
|
|
<div className={`rounded-xl p-6 border ${isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'}`}>
|
|
<h2 className={`font-semibold text-lg mb-6 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
<Bot className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
|
|
单智能体任务配置
|
|
</h2>
|
|
|
|
<div className="space-y-6">
|
|
{/* 任务名称 */}
|
|
<div>
|
|
<label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>任务名称</label>
|
|
<input
|
|
type="text"
|
|
value={singleTask.name}
|
|
onChange={(e) => setSingleTask({ ...singleTask, name: e.target.value })}
|
|
placeholder="例如：五四青年节目标受众分析"
|
|
className={`w-full px-4 py-2.5 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
|
|
isDark
|
|
? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
|
|
: 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
|
|
}`}
|
|
/>
|
|
</div>
|
|
|
|
{/* 选择智能体 */}
|
|
<div>
|
|
<label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>选择智能体</label>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{availableAgents.map((agent) => {
|
|
const Icon = agent.icon;
|
|
const isSelected = singleTask.agent === agent.id;
|
|
return (
|
|
<button
|
|
key={agent.id}
|
|
onClick={() => setSingleTask({ ...singleTask, agent: agent.id })}
|
|
className={`p-4 rounded-lg border text-left transition-all ${
|
|
isSelected
|
|
? isDark
|
|
? 'bg-blue-500/20 border-blue-500/50'
|
|
: 'bg-red-50 border-red-300'
|
|
: isDark
|
|
? 'bg-slate-900/50 border-blue-800/30 hover:border-blue-500/30'
|
|
: 'bg-white border-red-100 hover:border-red-200'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
|
|
isDark ? 'bg-blue-500/20' : 'bg-red-100'
|
|
}`}>
|
|
<Icon className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
|
|
</div>
|
|
<div>
|
|
<p className={`text-sm font-medium ${isSelected ? (isDark ? 'text-blue-400' : 'text-red-600') : (isDark ? 'text-white' : 'text-gray-900')}`}>
|
|
{agent.name}
|
|
</p>
|
|
<p className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{agent.role}</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 输入内容 */}
|
|
<div>
|
|
<label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>任务输入</label>
|
|
<textarea
|
|
value={singleTask.input}
|
|
onChange={(e) => setSingleTask({ ...singleTask, input: e.target.value })}
|
|
placeholder="请详细描述您需要该智能体处理的任务..."
|
|
rows={6}
|
|
className={`w-full px-4 py-3 rounded-lg text-sm resize-none focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
|
|
isDark
|
|
? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
|
|
: 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
|
|
}`}
|
|
/>
|
|
</div>
|
|
|
|
{/* 输出格式要求 */}
|
|
<div>
|
|
<label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>输出格式要求（可选）</label>
|
|
<textarea
|
|
value={singleTask.outputFormat}
|
|
onChange={(e) => setSingleTask({ ...singleTask, outputFormat: e.target.value })}
|
|
placeholder="例如：输出JSON格式，包含受众画像、行为特征、需求分析等字段"
|
|
rows={3}
|
|
className={`w-full px-4 py-3 rounded-lg text-sm resize-none focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
|
|
isDark
|
|
? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
|
|
: 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
|
|
}`}
|
|
/>
|
|
</div>
|
|
|
|
{/* 提交按钮 */}
|
|
<div className={`flex justify-end gap-3 pt-4 border-t ${isDark ? 'border-blue-800/30' : 'border-red-100'}`}>
|
|
<button
|
|
onClick={() => setStep('type')}
|
|
className={`px-6 py-2.5 rounded-lg text-sm transition-colors ${
|
|
isDark
|
|
? 'bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300'
|
|
: 'bg-gray-100 hover:bg-gray-200 border border-gray-200 text-gray-700'
|
|
}`}
|
|
>
|
|
上一步
|
|
</button>
|
|
<button
|
|
onClick={handleCreateTask}
|
|
disabled={!singleTask.name || !singleTask.agent || !singleTask.input}
|
|
className={`px-6 py-2.5 rounded-lg text-sm font-medium transition-colors ${
|
|
isDark
|
|
? 'bg-blue-600 hover:bg-blue-500 disabled:bg-slate-700 disabled:text-slate-500 text-white'
|
|
: 'bg-red-600 hover:bg-red-500 disabled:bg-gray-400 text-white shadow-md'
|
|
}`}
|
|
>
|
|
创建任务
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 步骤2：多智能体协同分析任务表单 */}
|
|
{step === 'multi-agent' && (
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className={`rounded-xl p-6 border ${isDark ? 'bg-slate-800/30 backdrop-blur-xl border-green-800/30' : 'bg-white border-green-100 shadow-sm'}`}>
|
|
<h2 className={`font-semibold text-lg mb-6 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
<Layers className={`w-5 h-5 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
|
|
多智能体协同分析任务配置
|
|
</h2>
|
|
|
|
<div className="space-y-6">
|
|
{/* 任务名称 */}
|
|
<div>
|
|
<label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>任务名称</label>
|
|
<input
|
|
type="text"
|
|
value={multiAgentTask.name}
|
|
onChange={(e) => setMultiAgentTask({ ...multiAgentTask, name: e.target.value })}
|
|
placeholder="例如：五四青年节宣传方向多智能体分析"
|
|
className={`w-full px-4 py-2.5 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500/20 ${
|
|
isDark
|
|
? 'bg-slate-900/50 border border-green-800/30 text-white placeholder-slate-500'
|
|
: 'bg-white border border-green-200 text-gray-900 placeholder-gray-400'
|
|
}`}
|
|
/>
|
|
</div>
|
|
|
|
{/* 分析任务描述 */}
|
|
<div>
|
|
<label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>分析任务描述</label>
|
|
<textarea
|
|
value={multiAgentTask.input}
|
|
onChange={(e) => setMultiAgentTask({ ...multiAgentTask, input: e.target.value })}
|
|
placeholder="请详细描述您需要多智能体协同分析的任务内容、分析目标、业务背景等..."
|
|
rows={4}
|
|
className={`w-full px-4 py-3 rounded-lg text-sm resize-none focus:outline-none focus:ring-2 focus:ring-green-500/20 ${
|
|
isDark
|
|
? 'bg-slate-900/50 border border-green-800/30 text-white placeholder-slate-500'
|
|
: 'bg-white border border-green-200 text-gray-900 placeholder-gray-400'
|
|
}`}
|
|
/>
|
|
</div>
|
|
|
|
{/* 选择参与智能体 */}
|
|
<div>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-2">
|
|
<label className={`block text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
选择参与协同的智能体
|
|
</label>
|
|
<span className={`px-2 py-0.5 rounded text-xs font-medium ${
|
|
multiAgentTask.selectedAgents.length < 3
|
|
? isDark ? 'bg-amber-500/20 text-amber-400' : 'bg-amber-100 text-amber-600'
|
|
: isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-600'
|
|
}`}>
|
|
已选择：{multiAgentTask.selectedAgents.length}/8
|
|
</span>
|
|
</div>
|
|
{multiAgentTask.selectedAgents.length < 3 && (
|
|
<span className={`text-xs ${isDark ? 'text-amber-400' : 'text-amber-600'}`}>
|
|
请至少选择3个智能体
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* 搜索和筛选 */}
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className={`flex-1 relative ${
|
|
isDark ? 'text-slate-400' : 'text-gray-500'
|
|
}`}>
|
|
<Bot className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" />
|
|
<input
|
|
type="text"
|
|
value={multiAgentTask.agentSearchQuery}
|
|
onChange={(e) => setMultiAgentTask({ ...multiAgentTask, agentSearchQuery: e.target.value })}
|
|
placeholder="搜索智能体..."
|
|
className={`w-full pl-9 pr-4 py-2 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500/20 ${
|
|
isDark
|
|
? 'bg-slate-900/50 border border-green-800/30 text-white placeholder-slate-500'
|
|
: 'bg-white border border-green-200 text-gray-900 placeholder-gray-400'
|
|
}`}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{['all', '策略', '用户', '内容', '运营'].map((cat) => (
|
|
<button
|
|
key={cat}
|
|
onClick={() => setMultiAgentTask({ ...multiAgentTask, agentCategory: cat })}
|
|
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
|
|
multiAgentTask.agentCategory === cat
|
|
? isDark ? 'bg-green-500/30 text-green-400 border border-green-500/50' : 'bg-green-100 text-green-600 border border-green-300'
|
|
: isDark ? 'bg-slate-700/50 text-slate-400 border border-slate-600' : 'bg-gray-100 text-gray-500 border border-gray-200'
|
|
}`}
|
|
>
|
|
{cat === 'all' ? '全部' : cat}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 已选择的智能体 */}
|
|
{multiAgentTask.selectedAgents.length > 0 && (
|
|
<div className={`p-3 rounded-lg mb-4 ${isDark ? 'bg-green-500/10 border border-green-800/30' : 'bg-green-50 border border-green-200'}`}>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
|
|
<span className={`text-xs font-medium ${isDark ? 'text-green-400' : 'text-green-600'}`}>
|
|
已选择的智能体
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{multiAgentTask.selectedAgents.map((agentId) => {
|
|
const agent = availableAgents.find(a => a.id === agentId);
|
|
if (!agent) return null;
|
|
const Icon = agent.icon;
|
|
return (
|
|
<div
|
|
key={agentId}
|
|
className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-sm ${
|
|
isDark ? 'bg-green-500/20 text-green-400 border border-green-500/30' : 'bg-white text-green-600 border border-green-300'
|
|
}`}
|
|
>
|
|
<Icon className="w-3.5 h-3.5" />
|
|
<span>{agent.name}</span>
|
|
<button
|
|
onClick={() => toggleAgent(agentId)}
|
|
className={`ml-1 hover:text-red-400 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}
|
|
>
|
|
<X className="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 智能体卡片列表 */}
|
|
<div className="grid grid-cols-4 gap-3 max-h-64 overflow-y-auto custom-scrollbar pr-1">
|
|
{getFilteredAgents().map((agent) => {
|
|
const Icon = agent.icon;
|
|
const isSelected = multiAgentTask.selectedAgents.includes(agent.id);
|
|
const isDisabled = !isSelected && multiAgentTask.selectedAgents.length >= 8;
|
|
return (
|
|
<button
|
|
key={agent.id}
|
|
onClick={() => toggleAgent(agent.id)}
|
|
disabled={isDisabled}
|
|
className={`p-3 rounded-lg border text-left transition-all ${
|
|
isSelected
|
|
? isDark
|
|
? 'bg-green-500/20 border-green-500/50'
|
|
: 'bg-green-50 border-green-300'
|
|
: isDisabled
|
|
? isDark
|
|
? 'bg-slate-800/30 border-slate-700/50 opacity-50 cursor-not-allowed'
|
|
: 'bg-gray-50 border-gray-200 opacity-50 cursor-not-allowed'
|
|
: isDark
|
|
? 'bg-slate-900/50 border-green-800/30 hover:border-green-500/50'
|
|
: 'bg-white border-gray-200 hover:border-green-300'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
|
|
isSelected
|
|
? isDark ? 'bg-green-500/30' : 'bg-green-200'
|
|
: isDark ? 'bg-slate-700/50' : 'bg-gray-100'
|
|
}`}>
|
|
<Icon className={`w-4 h-4 ${isSelected ? (isDark ? 'text-green-400' : 'text-green-600') : (isDark ? 'text-slate-400' : 'text-gray-500')}`} />
|
|
</div>
|
|
{isSelected && (
|
|
<div className={`w-5 h-5 rounded-full flex items-center justify-center ${
|
|
isDark ? 'bg-green-500' : 'bg-green-500'
|
|
}`}>
|
|
<CheckCircle className="w-3.5 h-3.5 text-white" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<p className={`text-xs font-medium mb-0.5 ${isSelected ? (isDark ? 'text-green-400' : 'text-green-600') : (isDark ? 'text-white' : 'text-gray-900')}`}>
|
|
{agent.name}
|
|
</p>
|
|
<p className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>
|
|
{agent.role}
|
|
</p>
|
|
<p className={`text-xs mt-1 line-clamp-2 ${isDark ? 'text-slate-600' : 'text-gray-400'}`}>
|
|
{agent.desc}
|
|
</p>
|
|
<span className={`inline-block mt-2 px-1.5 py-0.5 rounded text-xs ${
|
|
isDark ? 'bg-slate-700/50 text-slate-500' : 'bg-gray-100 text-gray-500'
|
|
}`}>
|
|
{agent.category}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{getFilteredAgents().length === 0 && (
|
|
<div className={`text-center py-8 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
|
|
<Bot className="w-8 h-8 mx-auto mb-2 opacity-50" />
|
|
<p className="text-sm">未找到匹配的智能体</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 流程预览 */}
|
|
<div className={`rounded-xl p-4 ${isDark ? 'bg-green-500/10 border border-green-800/30' : 'bg-green-50 border border-green-200'}`}>
|
|
<h4 className={`font-medium text-sm mb-3 flex items-center gap-2 ${isDark ? 'text-green-400' : 'text-green-600'}`}>
|
|
<Sparkles className={`w-4 h-4`} />
|
|
多智能体协同分析流程
|
|
</h4>
|
|
<div className="grid grid-cols-5 gap-2">
|
|
{[
|
|
{ step: 1, label: '选择参与智能体' },
|
|
{ step: 2, label: '发送分析任务' },
|
|
{ step: 3, label: '并行获取分析' },
|
|
{ step: 4, label: '采纳/追问' },
|
|
{ step: 5, label: '汇总报告' },
|
|
].map((item) => (
|
|
<div key={item.step} className="text-center">
|
|
<div className={`w-8 h-8 rounded-full flex items-center justify-center mx-auto mb-1 ${
|
|
isDark ? 'bg-green-500/20 border border-green-500/50' : 'bg-green-100 border border-green-200'
|
|
}`}>
|
|
<span className={`text-xs font-medium ${isDark ? 'text-green-400' : 'text-green-600'}`}>{item.step}</span>
|
|
</div>
|
|
<p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{item.label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 特点说明 */}
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<div className={`p-3 rounded-lg text-center border ${isDark ? 'bg-green-500/10 border-green-800/30' : 'bg-green-50 border-green-100'}`}>
|
|
<Layers className={`w-5 h-5 mx-auto mb-1 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
|
|
<p className={`text-xs font-medium ${isDark ? 'text-green-400' : 'text-green-600'}`}>多智能体参与</p>
|
|
<p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>3-8个智能体并行</p>
|
|
</div>
|
|
<div className={`p-3 rounded-lg text-center border ${isDark ? 'bg-green-500/10 border-green-800/30' : 'bg-green-50 border-green-100'}`}>
|
|
<Bot className={`w-5 h-5 mx-auto mb-1 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
|
|
<p className={`text-xs font-medium ${isDark ? 'text-green-400' : 'text-green-600'}`}>独立并行分析</p>
|
|
<p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>互不干扰</p>
|
|
</div>
|
|
<div className={`p-3 rounded-lg text-center border ${isDark ? 'bg-green-500/10 border-green-800/30' : 'bg-green-50 border-green-100'}`}>
|
|
<FileText className={`w-5 h-5 mx-auto mb-1 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
|
|
<p className={`text-xs font-medium ${isDark ? 'text-green-400' : 'text-green-600'}`}>汇总报告</p>
|
|
<p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>人工整合输出</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 提交按钮 */}
|
|
<div className={`flex justify-end gap-3 pt-4 border-t ${isDark ? 'border-green-800/30' : 'border-green-100'}`}>
|
|
<button
|
|
onClick={() => setStep('type')}
|
|
className={`px-6 py-2.5 rounded-lg text-sm transition-colors ${
|
|
isDark
|
|
? 'bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300'
|
|
: 'bg-gray-100 hover:bg-gray-200 border border-gray-200 text-gray-700'
|
|
}`}
|
|
>
|
|
上一步
|
|
</button>
|
|
<button
|
|
onClick={handleCreateTask}
|
|
disabled={!multiAgentTask.name || !multiAgentTask.input || multiAgentTask.selectedAgents.length < 3}
|
|
className={`px-6 py-2.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 ${
|
|
multiAgentTask.name && multiAgentTask.input && multiAgentTask.selectedAgents.length >= 3
|
|
? isDark
|
|
? 'bg-green-600 hover:bg-green-500 text-white'
|
|
: 'bg-green-600 hover:bg-green-500 text-white shadow-md'
|
|
: isDark
|
|
? 'bg-slate-700 text-slate-500 cursor-not-allowed'
|
|
: 'bg-gray-300 text-gray-500 cursor-not-allowed'
|
|
}`}
|
|
>
|
|
<Layers className="w-4 h-4" />
|
|
进入协同分析
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 提示 */}
|
|
<div className={`mt-4 p-4 rounded-xl border ${isDark ? 'bg-blue-500/10 border-blue-500/30' : 'bg-blue-50 border-blue-200'}`}>
|
|
<div className="flex items-start gap-2">
|
|
<Sparkles className={`w-4 h-4 flex-shrink-0 mt-0.5 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
|
|
<p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
<span className={`font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>提示：</span>
|
|
多智能体协同分析将同时邀请多个智能体对同一问题进行分析，您可以选择采纳某个智能体的观点、
|
|
继续追问特定智能体，最终将多个观点汇总成联合分析报告。建议选择不同职能领域的智能体以获得更全面的分析视角。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 步骤2：场景任务表单 */}
|
|
{step === 'scene' && (
|
|
<div className="max-w-3xl mx-auto">
|
|
<div className={`rounded-xl p-6 border ${isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'}`}>
|
|
<h2 className={`font-semibold text-lg mb-6 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
<Workflow className={`w-5 h-5 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
|
|
场景任务配置
|
|
</h2>
|
|
|
|
<div className="space-y-6">
|
|
{/* 任务名称 */}
|
|
<div>
|
|
<label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>任务名称</label>
|
|
<input
|
|
type="text"
|
|
value={sceneTask.name}
|
|
onChange={(e) => setSceneTask({ ...sceneTask, name: e.target.value })}
|
|
placeholder="例如：五四青年节宣传活动策略生成"
|
|
className={`w-full px-4 py-2.5 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
|
|
isDark
|
|
? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
|
|
: 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
|
|
}`}
|
|
/>
|
|
</div>
|
|
|
|
{/* 选择场景 */}
|
|
<div>
|
|
<label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>选择场景模板</label>
|
|
<div className="space-y-3">
|
|
{availableScenes.map((scene) => {
|
|
const isSelected = sceneTask.scene === scene.id;
|
|
return (
|
|
<button
|
|
key={scene.id}
|
|
onClick={() => setSceneTask({ ...sceneTask, scene: scene.id })}
|
|
className={`w-full p-4 rounded-lg border text-left transition-all ${
|
|
isSelected
|
|
? isDark
|
|
? 'bg-purple-500/20 border-purple-500/50'
|
|
: 'bg-red-50 border-red-300'
|
|
: isDark
|
|
? 'bg-slate-900/50 border-blue-800/30 hover:border-purple-500/30'
|
|
: 'bg-white border-red-100 hover:border-red-200'
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
|
|
isDark ? 'bg-purple-500/20' : 'bg-red-100'
|
|
}`}>
|
|
<Layers className={`w-5 h-5 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
|
|
</div>
|
|
<div>
|
|
<p className={`text-sm font-medium ${isSelected ? (isDark ? 'text-purple-400' : 'text-red-600') : (isDark ? 'text-white' : 'text-gray-900')}`}>
|
|
{scene.name}
|
|
</p>
|
|
<p className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{scene.desc}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<span className={`px-2 py-1 rounded text-xs ${
|
|
isDark ? 'bg-slate-800 text-slate-400' : 'bg-gray-100 text-gray-500'
|
|
}`}>
|
|
{scene.agents} 个智能体
|
|
</span>
|
|
{isSelected && (
|
|
<CheckCircle className={`w-5 h-5 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 任务输入 */}
|
|
<div>
|
|
<label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>任务要求</label>
|
|
<textarea
|
|
value={sceneTask.input}
|
|
onChange={(e) => setSceneTask({ ...sceneTask, input: e.target.value })}
|
|
placeholder="请详细描述您的任务要求、业务背景、核心目标等..."
|
|
rows={6}
|
|
className={`w-full px-4 py-3 rounded-lg text-sm resize-none focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
|
|
isDark
|
|
? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
|
|
: 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
|
|
}`}
|
|
/>
|
|
</div>
|
|
|
|
{/* 时间要求 */}
|
|
<div>
|
|
<label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>完成时间要求（可选）</label>
|
|
<input
|
|
type="text"
|
|
value={sceneTask.deadline}
|
|
onChange={(e) => setSceneTask({ ...sceneTask, deadline: e.target.value })}
|
|
placeholder="例如：5月1日前完成"
|
|
className={`w-full px-4 py-2.5 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
|
|
isDark
|
|
? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
|
|
: 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
|
|
}`}
|
|
/>
|
|
</div>
|
|
|
|
{/* 约束条件 */}
|
|
<div>
|
|
<label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>特殊约束（可选）</label>
|
|
<textarea
|
|
value={sceneTask.constraints}
|
|
onChange={(e) => setSceneTask({ ...sceneTask, constraints: e.target.value })}
|
|
placeholder="例如：预算有限，需注重性价比；需要可量化评估..."
|
|
rows={3}
|
|
className={`w-full px-4 py-3 rounded-lg text-sm resize-none focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
|
|
isDark
|
|
? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
|
|
: 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
|
|
}`}
|
|
/>
|
|
</div>
|
|
|
|
{/* 提交按钮 */}
|
|
<div className={`flex justify-end gap-3 pt-4 border-t ${isDark ? 'border-blue-800/30' : 'border-red-100'}`}>
|
|
<button
|
|
onClick={() => setStep('type')}
|
|
className={`px-6 py-2.5 rounded-lg text-sm transition-colors ${
|
|
isDark
|
|
? 'bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300'
|
|
: 'bg-gray-100 hover:bg-gray-200 border border-gray-200 text-gray-700'
|
|
}`}
|
|
>
|
|
上一步
|
|
</button>
|
|
<button
|
|
onClick={handleCreateTask}
|
|
disabled={!sceneTask.name || !sceneTask.scene || !sceneTask.input}
|
|
className={`px-6 py-2.5 rounded-lg text-sm font-medium transition-colors ${
|
|
isDark
|
|
? 'bg-purple-600 hover:bg-purple-500 disabled:bg-slate-700 disabled:text-slate-500 text-white'
|
|
: 'bg-red-600 hover:bg-red-500 disabled:bg-gray-400 text-white shadow-md'
|
|
}`}
|
|
>
|
|
创建任务
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 步骤2：多智能体会商任务 - 快速入口 */}
|
|
{step === 'consult' && (
|
|
<div className="max-w-3xl mx-auto">
|
|
<div className={`rounded-xl p-6 border ${isDark ? 'bg-slate-800/30 backdrop-blur-xl border-orange-800/30' : 'bg-white border-red-100 shadow-sm'}`}>
|
|
<div className="text-center mb-6">
|
|
<div className={`w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 ${
|
|
isDark ? 'bg-orange-500/20' : 'bg-red-100'
|
|
}`}>
|
|
<Users className={`w-8 h-8 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
|
|
</div>
|
|
<h2 className={`font-semibold text-lg mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>多智能体会商任务</h2>
|
|
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
多智能体并行讨论，人类主导研判与决策，输出会商结论
|
|
</p>
|
|
</div>
|
|
|
|
{/* 会商流程预览 */}
|
|
<div className={`rounded-xl p-4 mb-6 ${isDark ? 'bg-slate-900/50' : 'bg-gray-50'}`}>
|
|
<h4 className={`font-medium text-sm mb-3 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
|
<Target className={`w-4 h-4 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
|
|
会商流程
|
|
</h4>
|
|
<div className="grid grid-cols-5 gap-2">
|
|
{[
|
|
{ step: 1, label: '选择参与智能体' },
|
|
{ step: 2, label: '设置会商规则' },
|
|
{ step: 3, label: '首轮独立发言' },
|
|
{ step: 4, label: '交叉讨论' },
|
|
{ step: 5, label: '人工整合' },
|
|
].map((item) => (
|
|
<div key={item.step} className="text-center">
|
|
<div className={`w-8 h-8 rounded-full flex items-center justify-center mx-auto mb-1 ${
|
|
isDark ? 'bg-orange-500/20 border border-orange-500/50' : 'bg-red-100 border border-red-200'
|
|
}`}>
|
|
<span className={`text-xs font-medium ${isDark ? 'text-orange-400' : 'text-red-600'}`}>{item.step}</span>
|
|
</div>
|
|
<p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{item.label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 特点说明 */}
|
|
<div className="grid grid-cols-3 gap-3 mb-6">
|
|
<div className={`p-3 rounded-lg text-center border ${isDark ? 'bg-orange-500/10 border-orange-500/20' : 'bg-red-50 border-red-100'}`}>
|
|
<Users className={`w-5 h-5 mx-auto mb-1 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
|
|
<p className={`text-xs font-medium ${isDark ? 'text-orange-400' : 'text-red-600'}`}>多智能体参与</p>
|
|
<p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>3-6个智能体并行</p>
|
|
</div>
|
|
<div className={`p-3 rounded-lg text-center border ${isDark ? 'bg-orange-500/10 border-orange-500/20' : 'bg-red-50 border-red-100'}`}>
|
|
<MessageSquare className={`w-5 h-5 mx-auto mb-1 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
|
|
<p className={`text-xs font-medium ${isDark ? 'text-orange-400' : 'text-red-600'}`}>多种讨论模式</p>
|
|
<p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>并行/交叉/人机共判</p>
|
|
</div>
|
|
<div className={`p-3 rounded-lg text-center border ${isDark ? 'bg-orange-500/10 border-orange-500/20' : 'bg-red-50 border-red-100'}`}>
|
|
<Sparkles className={`w-5 h-5 mx-auto mb-1 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
|
|
<p className={`text-xs font-medium ${isDark ? 'text-orange-400' : 'text-red-600'}`}>人工整合</p>
|
|
<p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>人类主导判断</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 适用场景 */}
|
|
<div className={`rounded-xl p-4 mb-6 ${isDark ? 'bg-slate-900/50' : 'bg-gray-50'}`}>
|
|
<h4 className={`font-medium text-sm mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>适用场景</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
<span className={`px-2 py-1 rounded text-xs ${isDark ? 'bg-orange-500/10 text-orange-400' : 'bg-red-100 text-red-600'}`}>前期方案研判</span>
|
|
<span className={`px-2 py-1 rounded text-xs ${isDark ? 'bg-orange-500/10 text-orange-400' : 'bg-red-100 text-red-600'}`}>多方案比较分析</span>
|
|
<span className={`px-2 py-1 rounded text-xs ${isDark ? 'bg-orange-500/10 text-orange-400' : 'bg-red-100 text-red-600'}`}>争议问题讨论</span>
|
|
<span className={`px-2 py-1 rounded text-xs ${isDark ? 'bg-orange-500/10 text-orange-400' : 'bg-red-100 text-red-600'}`}>策略方向选择</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 操作按钮 */}
|
|
<div className={`flex justify-end gap-3 pt-4 border-t ${isDark ? 'border-orange-800/30' : 'border-red-100'}`}>
|
|
<button
|
|
onClick={() => setStep('type')}
|
|
className={`px-6 py-2.5 rounded-lg text-sm transition-colors ${
|
|
isDark
|
|
? 'bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300'
|
|
: 'bg-gray-100 hover:bg-gray-200 border border-gray-200 text-gray-700'
|
|
}`}
|
|
>
|
|
上一步
|
|
</button>
|
|
<button
|
|
onClick={handleCreateTask}
|
|
className={`px-6 py-2.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 ${
|
|
isDark
|
|
? 'bg-orange-600 hover:bg-orange-500 text-white'
|
|
: 'bg-red-600 hover:bg-red-500 text-white shadow-md'
|
|
}`}
|
|
>
|
|
<MessageSquare className="w-4 h-4" />
|
|
进入会商配置
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 提示 */}
|
|
<div className={`mt-4 p-4 rounded-xl border ${isDark ? 'bg-blue-500/10 border-blue-500/30' : 'bg-blue-50 border-blue-200'}`}>
|
|
<div className="flex items-start gap-2">
|
|
<Sparkles className={`w-4 h-4 flex-shrink-0 mt-0.5 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
|
|
<p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
|
|
<span className={`font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>提示：</span>
|
|
会商任务将跳转到专门的会商配置页面，您可以在那里详细选择参与智能体、设置会商规则和模式。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TaskCreate;
|