import React, { useState } from 'react'; import { useTheme } from '@/contexts/ThemeContext'; import { ArrowLeft, Bot, CheckCircle, Download, FileText, ChevronRight, Zap, AlertCircle, Check, Target, X, RefreshCw, } from 'lucide-react'; import { PageType } from '@/components/Sidebar'; interface TaskConsultResultProps { onNavigate: (page: PageType) => void; } const TaskConsultResult: React.FC = ({ 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<'conclusion' | 'opinions' | 'disputes'>('conclusion'); // 会商结论数据 const conclusion = { mainConclusion: '五四青年节宣传活动应聚焦"真实、有态度的青年故事"这一叙事方向，以18-25岁基层青年为核心受众，优先在短视频平台建立品牌认知。', recommendedDirection: [ '以真实人物故事为核心叙事内容', '采用平等对话而非说教式的传播语气', '优先布局抖音、小红书等短视频平台', '建立UGC激励机制促进用户参与', ], notRecommendedDirection: [ '过度包装的精致化内容', '单向输出的宣传式传播', '纯文字为主的长图文形式', ], pendingIssues: [ '叙事角度：事件叙事 vs 人物叙事（待进一步验证）', '渠道策略：短视频为主 vs 社交媒体为主', '预算在内容制作和达人投放的分配比例', ], nextSteps: [ '建议由 NarrativeAgent 细化叙事框架', '建议由 AudienceAgent 补充平台选择建议', '可考虑转入"宣传策略生成"场景任务进行完整方案输出', ], }; // 观点汇总数据 const agentOpinions = [ { agentId: 'goal', agentName: 'GoalAgent', agentRole: '目标分析专家', color: 'blue', coreOpinion: '建议聚焦提升品牌认知度这一核心目标，短期内不追求直接转化', adopted: true, notes: '与整体策略方向一致', }, { agentId: 'audience', agentName: 'AudienceAgent', agentRole: '受众分析专家', color: 'cyan', coreOpinion: '核心受众应为18-25岁基层青年群体，注重"真实感"和"态度感"', adopted: true, notes: '已采纳为策略基础', }, { agentId: 'narrative', agentName: 'NarrativeAgent', agentRole: '叙事策略专家', color: 'purple', coreOpinion: '应采用"真实、有态度的青年故事"叙事框架', adopted: true, notes: '核心建议，已采纳', }, { agentId: 'risk', agentName: 'RiskAgent', agentRole: '风险评估专家', color: 'red', coreOpinion: '需注意UGC质量不稳定和话题热度维持的风险', adopted: true, notes: '需在执行阶段重点关注', }, ]; // 分歧与待确认数据 const disputes = [ { id: 1, issue: '叙事角度选择', description: '人物叙事 vs 事件叙事', viewpoints: [ { agent: 'NarrativeAgent', opinion: '人物叙事更有情感穿透力', position: '支持人物叙事' }, { agent: 'GoalAgent', opinion: '事件叙事更聚焦目标达成', position: '支持事件叙事' }, ], status: '待确认', }, { id: 2, issue: '渠道策略选择', description: '短视频平台 vs 社交媒体', viewpoints: [ { agent: 'AudienceAgent', opinion: '核心受众在短视频平台活跃度更高', position: '支持短视频平台' }, { agent: 'GoalAgent', opinion: '品牌传播需要社交媒体的裂变效应', position: '支持社交媒体' }, ], status: '待确认', }, { id: 3, issue: '风险应对方案', description: '内容质量控制机制', viewpoints: [ { agent: 'RiskAgent', opinion: '需要建立严格的内容审核机制', position: '强调审核' }, { agent: 'NarrativeAgent', opinion: '审核流程可能影响内容时效性', position: '担忧时效' }, ], status: '需进一步讨论', }, ]; const getColorClasses = (color: string) => { const colors: Record = { blue: { bg: isDark ? 'bg-blue-500/20' : 'bg-blue-50', border: isDark ? 'border-blue-500/50' : 'border-blue-200', text: isDark ? 'text-blue-400' : 'text-blue-600' }, cyan: { bg: isDark ? 'bg-cyan-500/20' : 'bg-cyan-50', border: isDark ? 'border-cyan-500/50' : 'border-cyan-200', text: isDark ? 'text-cyan-400' : 'text-cyan-600' }, green: { bg: isDark ? 'bg-green-500/20' : 'bg-green-50', border: isDark ? 'border-green-500/50' : 'border-green-200', text: isDark ? 'text-green-400' : 'text-green-600' }, yellow: { bg: isDark ? 'bg-yellow-500/20' : 'bg-yellow-50', border: isDark ? 'border-yellow-500/50' : 'border-yellow-200', text: isDark ? 'text-yellow-400' : 'text-yellow-600' }, purple: { bg: isDark ? 'bg-purple-500/20' : 'bg-purple-50', border: isDark ? 'border-purple-500/50' : 'border-purple-200', text: isDark ? 'text-purple-400' : 'text-purple-600' }, red: { bg: isDark ? 'bg-red-500/20' : 'bg-red-50', border: isDark ? 'border-red-500/50' : 'border-red-200', text: isDark ? 'text-red-400' : 'text-red-600' }, }; return colors[color] || colors.blue; }; return (
{/* 顶部总览区 */}

五四青年节宣传策略会商

会商结果 · 已完成

会商完成
{/* 基本信息 */}

参与智能体

4

会商轮数

3

完成时间

2026-03-19

采纳观点

4/4

{/* 操作按钮 */}
{/* Tab切换 */}
{/* 内容区 */} {activeTab === 'conclusion' && (
{/* 会商结论 */}

本次会商结论

{conclusion.mainConclusion}

推荐采用方向

{conclusion.recommendedDirection.map((item, index) => (

{item}

))}

不建议采用方向

{conclusion.notRecommendedDirection.map((item, index) => (

{item}

))}
{/* 侧边栏 */}

待确认问题

{conclusion.pendingIssues.map((item, index) => (

{item}

))}

推荐下一步动作

{conclusion.nextSteps.map((item, index) => (

{item}

))}
)} {activeTab === 'opinions' && (

各智能体观点汇总

{agentOpinions.map((agent) => { const colors = getColorClasses(agent.color); return (

{agent.agentName}

{agent.adopted ? ( 已采纳 ) : ( 未采纳 )}

{agent.agentRole}

{agent.coreOpinion}

备注：{agent.notes}

); })}
)} {activeTab === 'disputes' && (

争议点与待确认事项

{disputes.map((dispute) => (

{dispute.issue}

{dispute.description}

{dispute.status}
{dispute.viewpoints.map((viewpoint, index) => (
{viewpoint.agent}

{viewpoint.opinion}

))}
))}
)}
); }; export default TaskConsultResult;