432 lines
21 KiB
TypeScript
432 lines
21 KiB
TypeScript
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;
|