代码修改

2026-05-27 19:43:15 +08:00
1 parent 8f5af46ec2
commit 8f75e12871
@@ -0,0 +1,431 @@
+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<TaskConsultResultProps> = ({ 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<string, { bg: string; border: string; text: string }> = {
+      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 (
+    <div className="space-y-6">
+      {/* 顶部总览区 */}
+      <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => onNavigate('task-list')}
+              className={`flex items-center gap-2 px-3 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}
+            >
+              <ArrowLeft className="w-4 h-4" />
+              返回
+            </button>
+            <div className={`h-8 w-px ${isDark ? 'bg-blue-800/30' : 'bg-red-200'}`} />
+            <div>
+              <h1 className={`${textPrimary} font-bold text-lg`}>五四青年节宣传策略会商</h1>
+              <p className={`${textMuted} text-sm`}>会商结果 · 已完成</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <span className={`px-3 py-1.5 ${isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-700'} rounded-full text-sm font-medium flex items-center gap-1.5`}>
+              <CheckCircle className="w-4 h-4" />
+              会商完成
+            </span>
+          </div>
+        </div>
+
+        {/* 基本信息 */}
+        <div className={`grid grid-cols-4 gap-4 p-4 ${inputBg} rounded-lg`}>
+          <div className="text-center">
+            <p className={`${textMuted} text-xs mb-1`}>参与智能体</p>
+            <p className={`${textPrimary} font-medium text-lg`}>4</p>
+          </div>
+          <div className="text-center">
+            <p className={`${textMuted} text-xs mb-1`}>会商轮数</p>
+            <p className={`${textPrimary} font-medium text-lg`}>3</p>
+          </div>
+          <div className="text-center">
+            <p className={`${textMuted} text-xs mb-1`}>完成时间</p>
+            <p className={`${textPrimary} font-medium text-lg`}>2026-03-19</p>
+          </div>
+          <div className="text-center">
+            <p className={`${textMuted} text-xs mb-1`}>采纳观点</p>
+            <p className={`${isDark ? 'text-green-400' : 'text-green-600'} font-medium text-lg`}>4/4</p>
+          </div>
+        </div>
+
+        {/* 操作按钮 */}
+        <div className="flex items-center gap-3 mt-4">
+          <button className={`flex items-center gap-2 px-4 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}>
+            <Download className="w-4 h-4" />
+            导出纪要
+          </button>
+          <button className={`flex items-center gap-2 px-4 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}>
+            <FileText className="w-4 h-4" />
+            导出结论
+          </button>
+          <button className={`flex items-center gap-2 px-4 py-2 ${isDark ? 'bg-cyan-600/20 hover:bg-cyan-600/30 border-cyan-500/50 text-cyan-400' : 'bg-cyan-100 hover:bg-cyan-200 border-cyan-300 text-cyan-700'} rounded-lg text-sm transition-colors`}>
+            <Bot className="w-4 h-4" />
+            转为单智能体任务
+          </button>
+          <button className={`flex items-center gap-2 px-4 py-2 ${isDark ? 'bg-purple-600/20 hover:bg-purple-600/30 border-purple-500/50 text-purple-400' : 'bg-purple-100 hover:bg-purple-200 border-purple-300 text-purple-700'} rounded-lg text-sm transition-colors`}>
+            <Zap className="w-4 h-4" />
+            转为场景任务
+          </button>
+          <button className={`flex items-center gap-2 px-4 py-2 ${btnPrimary} text-white rounded-lg text-sm transition-colors ml-auto`}>
+            <RefreshCw className="w-4 h-4" />
+            重新发起会商
+          </button>
+        </div>
+      </div>
+
+      {/* Tab切换 */}
+      <div className={`flex items-center gap-1 ${cardBg} p-1 rounded-lg w-fit`}>
+        <button
+          onClick={() => setActiveTab('conclusion')}
+          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            activeTab === 'conclusion'
+              ? `${btnPrimary} text-white`
+              : `${textSecondary} ${isDark ? 'hover:text-white hover:bg-slate-700/50' : 'hover:text-gray-900 hover:bg-gray-200'}`
+          }`}
+        >
+          会商结论
+        </button>
+        <button
+          onClick={() => setActiveTab('opinions')}
+          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            activeTab === 'opinions'
+              ? `${btnPrimary} text-white`
+              : `${textSecondary} ${isDark ? 'hover:text-white hover:bg-slate-700/50' : 'hover:text-gray-900 hover:bg-gray-200'}`
+          }`}
+        >
+          观点汇总
+        </button>
+        <button
+          onClick={() => setActiveTab('disputes')}
+          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            activeTab === 'disputes'
+              ? `${btnPrimary} text-white`
+              : `${textSecondary} ${isDark ? 'hover:text-white hover:bg-slate-700/50' : 'hover:text-gray-900 hover:bg-gray-200'}`
+          }`}
+        >
+          分歧与待确认
+        </button>
+      </div>
+
+      {/* 内容区 */}
+      {activeTab === 'conclusion' && (
+        <div className="grid grid-cols-12 gap-6">
+          {/* 会商结论 */}
+          <div className="col-span-8 space-y-6">
+            <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+              <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+                <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
+                本次会商结论
+              </h3>
+              <div className={`p-4 ${isDark ? 'bg-green-500/10 border-green-500/30' : 'bg-green-50 border-green-200'} rounded-lg`}>
+                <p className={`${isDark ? 'text-green-300' : 'text-green-800'} leading-relaxed`}>{conclusion.mainConclusion}</p>
+              </div>
+            </div>
+
+            <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+              <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+                <Check className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
+                推荐采用方向
+              </h3>
+              <div className="space-y-2">
+                {conclusion.recommendedDirection.map((item, index) => (
+                  <div key={index} className={`flex items-center gap-3 p-3 ${isDark ? 'bg-green-500/10 border-green-500/30' : 'bg-green-50 border-green-200'} rounded-lg`}>
+                    <div className={`w-6 h-6 rounded-full ${isDark ? 'bg-green-500/20' : 'bg-green-100'} flex items-center justify-center`}>
+                      <Check className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
+                    </div>
+                    <p className={`${isDark ? 'text-green-300' : 'text-green-800'} text-sm`}>{item}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+              <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+                <X className={`w-4 h-4 ${isDark ? 'text-red-400' : 'text-red-600'}`} />
+                不建议采用方向
+              </h3>
+              <div className="space-y-2">
+                {conclusion.notRecommendedDirection.map((item, index) => (
+                  <div key={index} className={`flex items-center gap-3 p-3 ${isDark ? 'bg-red-500/10 border-red-500/30' : 'bg-red-50 border-red-200'} rounded-lg`}>
+                    <div className={`w-6 h-6 rounded-full ${isDark ? 'bg-red-500/20' : 'bg-red-100'} flex items-center justify-center`}>
+                      <X className={`w-4 h-4 ${isDark ? 'text-red-400' : 'text-red-600'}`} />
+                    </div>
+                    <p className={`${isDark ? 'text-red-300' : 'text-red-800'} text-sm`}>{item}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* 侧边栏 */}
+          <div className="col-span-4 space-y-6">
+            <div className={`${cardBg} backdrop-blur-xl ${isDark ? 'border-yellow-800/30' : 'border-yellow-200'} rounded-xl p-5`}>
+              <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+                <AlertCircle className={`w-4 h-4 ${isDark ? 'text-yellow-400' : 'text-yellow-600'}`} />
+                待确认问题
+              </h3>
+              <div className="space-y-2">
+                {conclusion.pendingIssues.map((item, index) => (
+                  <div key={index} className={`p-3 ${isDark ? 'bg-yellow-500/10 border-yellow-500/30' : 'bg-yellow-50 border-yellow-200'} rounded-lg`}>
+                    <p className={`${isDark ? 'text-yellow-300' : 'text-yellow-800'} text-sm`}>{item}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className={`${cardBg} backdrop-blur-xl ${isDark ? 'border-purple-800/30' : 'border-purple-200'} rounded-xl p-5`}>
+              <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+                <ChevronRight className={`w-4 h-4 ${isDark ? 'text-purple-400' : 'text-purple-600'}`} />
+                推荐下一步动作
+              </h3>
+              <div className="space-y-2">
+                {conclusion.nextSteps.map((item, index) => (
+                  <div key={index} className={`p-3 ${isDark ? 'bg-purple-500/10 border-purple-500/30' : 'bg-purple-50 border-purple-200'} rounded-lg`}>
+                    <p className={`${isDark ? 'text-purple-300' : 'text-purple-800'} text-sm`}>{item}</p>
+                  </div>
+                ))}
+              </div>
+              <button className={`w-full mt-4 flex items-center justify-center gap-2 px-4 py-3 ${btnPrimary} text-white rounded-xl text-sm font-medium transition-colors`}>
+                <Zap className="w-4 h-4" />
+                转入宣传策略生成场景
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {activeTab === 'opinions' && (
+        <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+          <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+            <Bot className={`w-4 h-4 ${isDark ? 'text-cyan-400' : 'text-cyan-600'}`} />
+            各智能体观点汇总
+          </h3>
+          <div className="space-y-4">
+            {agentOpinions.map((agent) => {
+              const colors = getColorClasses(agent.color);
+              return (
+                <div key={agent.agentId} className={`p-4 ${inputBg} ${inputBorder} rounded-xl`}>
+                  <div className="flex items-start justify-between mb-3">
+                    <div className="flex items-center gap-3">
+                      <div className={`w-10 h-10 rounded-lg ${colors.bg} flex items-center justify-center`}>
+                        <Bot className={`w-5 h-5 ${colors.text}`} />
+                      </div>
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <p className={`text-sm font-medium ${colors.text}`}>{agent.agentName}</p>
+                          {agent.adopted ? (
+                            <span className={`px-1.5 py-0.5 ${isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-700'} rounded text-xs`}>
+                              已采纳
+                            </span>
+                          ) : (
+                            <span className={`px-1.5 py-0.5 ${isDark ? 'bg-slate-500/20 text-slate-400' : 'bg-gray-200 text-gray-600'} rounded text-xs`}>
+                              未采纳
+                            </span>
+                          )}
+                        </div>
+                        <p className={`${textMuted} text-xs`}>{agent.agentRole}</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="pl-13">
+                    <p className={`${textSecondary} text-sm mb-2`}>{agent.coreOpinion}</p>
+                    <p className={`${textMuted} text-xs`}>备注：{agent.notes}</p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {activeTab === 'disputes' && (
+        <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+          <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+            <AlertCircle className={`w-4 h-4 ${isDark ? 'text-yellow-400' : 'text-yellow-600'}`} />
+            争议点与待确认事项
+          </h3>
+          <div className="space-y-4">
+            {disputes.map((dispute) => (
+              <div key={dispute.id} className={`p-4 ${inputBg} ${isDark ? 'border-yellow-800/30' : 'border-yellow-200'} rounded-xl`}>
+                <div className="flex items-center justify-between mb-3">
+                  <div>
+                    <p className={`${textPrimary} font-medium text-sm`}>{dispute.issue}</p>
+                    <p className={`${textMuted} text-xs mt-0.5`}>{dispute.description}</p>
+                  </div>
+                  <span className={`px-2 py-1 ${isDark ? 'bg-yellow-500/20 text-yellow-400' : 'bg-yellow-100 text-yellow-700'} rounded text-xs`}>
+                    {dispute.status}
+                  </span>
+                </div>
+                <div className="space-y-2">
+                  {dispute.viewpoints.map((viewpoint, index) => (
+                    <div key={index} className={`p-3 ${isDark ? 'bg-yellow-500/5 border-yellow-500/20' : 'bg-yellow-50 border-yellow-200'} rounded-lg`}>
+                      <div className="flex items-center gap-2 mb-1">
+                        <Bot className={`w-4 h-4 ${textMuted}`} />
+                        <span className={`${textMuted} text-xs`}>{viewpoint.agent}</span>
+                      </div>
+                      <p className={`${isDark ? 'text-yellow-300' : 'text-yellow-800'} text-sm`}>{viewpoint.opinion}</p>
+                    </div>
+                  ))}
+                </div>
+                <button className={`mt-3 flex items-center gap-1 px-3 py-1.5 ${isDark ? 'bg-yellow-500/20 hover:bg-yellow-500/30 border-yellow-500/50 text-yellow-400' : 'bg-yellow-100 hover:bg-yellow-200 border-yellow-300 text-yellow-700'} rounded text-xs transition-colors`}>
+                  <Target className="w-3 h-3" />
+                  发起单智能体分析
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TaskConsultResult;