import React, { useState } from 'react'; import { FileText, ArrowLeft, ArrowRight, Download, Edit3, Send, CheckCircle, Clock, Bot, Target, Users, TrendingUp, MessageSquare, Megaphone, Shield, ChevronDown, ChevronRight, RefreshCw, MoreHorizontal, Share2, Printer, History, AlertCircle, Check, X, } from 'lucide-react'; import { useTheme } from '../contexts/ThemeContext'; import { PageType } from '../components/Sidebar'; interface ResultDetailProps { taskId?: string; onNavigate: (page: PageType, taskId?: string) => void; onBack?: () => void; } // 模拟任务详情数据 const mockTaskDetail = { id: 'task-001', title: '五四青年节宣传活动策略', category: '规划任务', subCategory: '叙事策略', status: 'completed', createdAt: '2026-03-19 10:30', updatedAt: '2026-03-19 15:30', completedAt: '2026-03-19 15:30', reportType: 'strategy', agentCount: 6, description: '针对五四青年节的品牌传播策略方案', scene: '宣传策略生成', duration: '5小时32分', conclusion: { main: '五四青年节宣传活动应聚焦"真实、有态度的青年故事"这一叙事方向，以18-25岁基层青年为核心受众，优先在短视频平台建立品牌认知。', recommended: [ '以真实人物故事为核心叙事内容', '采用平等对话而非说教式的传播语气', '优先布局抖音、小红书等短视频平台', '建立UGC激励机制促进用户参与', ], notRecommended: [ '过度包装的精致化内容', '单向输出的宣传式传播', '纯文字为主的长图文形式', ], pendingIssues: [ '叙事角度：事件叙事 vs 人物叙事（待进一步验证）', '渠道策略：短视频为主 vs 社交媒体为主', '预算在内容制作和达人投放的分配比例', ], }, strategyChain: [ { id: 1, name: '目标', icon: Target, color: 'blue', status: 'completed', result: '提升品牌在Z世代用户中的认知度' }, { id: 2, name: '受众', icon: Users, color: 'cyan', status: 'completed', result: '18-25岁基层青年' }, { id: 3, name: '行为', icon: TrendingUp, color: 'green', status: 'completed', result: '主动参与话题讨论、生成UGC内容' }, { id: 4, name: '驱动', icon: MessageSquare, color: 'yellow', status: 'completed', result: '社交认同与自我表达' }, { id: 5, name: '叙事', icon: Megaphone, color: 'purple', status: 'completed', result: '真实、有态度的青年故事' }, { id: 6, name: '风险', icon: Shield, color: 'red', status: 'completed', result: 'UGC质量不稳定、话题热度维持' }, ], versionHistory: [ { version: 'V3', time: '2026-03-19 15:30', changes: ['叙事由"事件主导"改为"人物+事件结合"', '风险项已修正'] }, { version: 'V2', time: '2026-03-19 14:20', changes: ['受众由"全体青年"收窄为"基层青年"', '目标行为已明确'] }, { version: 'V1', time: '2026-03-19 10:30', changes: ['初始版本生成'] }, ], agentOpinions: [ { agentName: 'GoalAgent', role: '目标分析专家', opinion: '建议聚焦提升品牌认知度这一核心目标，短期内不追求直接转化', adopted: true, color: 'blue' }, { agentName: 'AudienceAgent', role: '受众分析专家', opinion: '核心受众应为18-25岁基层青年群体，注重"真实感"和"态度感"', adopted: true, color: 'cyan' }, { agentName: 'NarrativeAgent', role: '叙事策略专家', opinion: '应采用"真实、有态度的青年故事"叙事框架', adopted: true, color: 'purple' }, { agentName: 'RiskAgent', role: '风险评估专家', opinion: '需注意UGC质量不稳定和话题热度维持的风险', adopted: true, color: 'red' }, ], disputes: [ { issue: '叙事角度选择', description: '人物叙事 vs 事件叙事', viewpoints: [ { agent: 'NarrativeAgent', opinion: '人物叙事更有情感穿透力' }, { agent: 'GoalAgent', opinion: '事件叙事更聚焦目标达成' }, ], status: '待确认', }, ], }; const ResultDetail: React.FC = ({ taskId, onNavigate, onBack }) => { const { theme } = useTheme(); const isDark = theme === 'dark'; // 主题颜色类 const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white'; const cardBorder = isDark ? 'border-blue-800/30' : 'border-gray-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 btnPrimary = isDark ? 'bg-blue-600 hover:bg-blue-500' : 'bg-red-600 hover:bg-red-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 inputBg = isDark ? 'bg-slate-900/50' : 'bg-gray-50'; const [activeTab, setActiveTab] = useState<'conclusion' | 'process' | 'opinions' | 'history'>('conclusion'); const [expandedSection, setExpandedSection] = useState('goal'); const [showReportMenu, setShowReportMenu] = useState(false); const task = mockTaskDetail; const toggleSection = (section: string) => { setExpandedSection(expandedSection === section ? null : section); }; const getColorClasses = (color: string) => { const colors: Record = { blue: { bg: isDark ? 'bg-blue-500/20' : 'bg-blue-50', text: isDark ? 'text-blue-400' : 'text-blue-600' }, cyan: { bg: isDark ? 'bg-cyan-500/20' : 'bg-cyan-50', text: isDark ? 'text-cyan-400' : 'text-cyan-600' }, green: { bg: isDark ? 'bg-green-500/20' : 'bg-green-50', text: isDark ? 'text-green-400' : 'text-green-600' }, yellow: { bg: isDark ? 'bg-yellow-500/20' : 'bg-yellow-50', text: isDark ? 'text-yellow-400' : 'text-yellow-600' }, purple: { bg: isDark ? 'bg-purple-500/20' : 'bg-purple-50', text: isDark ? 'text-purple-400' : 'text-purple-600' }, red: { bg: isDark ? 'bg-red-500/20' : 'bg-red-50', text: isDark ? 'text-red-400' : 'text-red-600' }, }; return colors[color] || colors.blue; }; const handleBack = () => { if (onBack) { onBack(); } else { onNavigate('result-management'); } }; return (
{/* 顶部信息栏 */}

{task.title}

{task.subCategory} · {task.status === 'completed' ? '已完成' : '进行中'}

{showReportMenu && (
)}
{/* 基本信息 */}

使用场景

{task.scene}

运行时长

{task.duration}

参与智能体

{task.agentCount}个

当前版本

V{task.versionHistory.length}

完成时间

{task.completedAt}

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

本次会商结论

{task.conclusion.main}

推荐采用方向

{task.conclusion.recommended.map((item, index) => (

{item}

))}

不建议采用方向

{task.conclusion.notRecommended.map((item, index) => (

{item}

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

待确认问题

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

{item}

))}

操作

)} {activeTab === 'process' && (
{/* 策略链可视化 */}

策略链结果

{task.strategyChain.map((item, index) => { const Icon = item.icon; const colors = getColorClasses(item.color); return (
{item.name} 已确认
{index < task.strategyChain.length - 1 && ( )} ); })}
{/* 详细结果可折叠展开 */}
{task.strategyChain.map((section) => { const Icon = section.icon; const colors = getColorClasses(section.color); const isExpanded = expandedSection === section.name; return (
{isExpanded && (

详细分析内容将在此处展示，包含智能体推理过程和依据。

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

各智能体观点汇总

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

{agent.agentName}

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

{agent.role}

{agent.opinion}

); })} {/* 分歧点 */} {task.disputes.length > 0 && (

争议点

{task.disputes.map((dispute, idx) => (

{dispute.issue}

{dispute.description}

{dispute.viewpoints.map((vp, i) => (
{vp.agent}: {vp.opinion}
))}
))}
)}
)} {activeTab === 'history' && (

版本迭代记录

{task.versionHistory.map((version, index) => (
{version.version} {version.time}
    {version.changes.map((change, i) => (
  • • {change}
    • ))}
))}
)}
); }; export default ResultDetail;