936 lines
46 KiB
TypeScript
936 lines
46 KiB
TypeScript
import React, { useState } from 'react';
|
||
import {
|
||
Target,
|
||
Clock,
|
||
User,
|
||
ChevronRight,
|
||
Play,
|
||
RotateCcw,
|
||
Download,
|
||
MessageSquare,
|
||
AlertTriangle,
|
||
CheckCircle,
|
||
Bot,
|
||
FileText,
|
||
Lightbulb,
|
||
ArrowRight,
|
||
RefreshCw,
|
||
Pause,
|
||
Eye,
|
||
Zap,
|
||
Shield,
|
||
AlertCircle,
|
||
UserCheck,
|
||
CheckCircle2,
|
||
XCircle,
|
||
Send,
|
||
Plus,
|
||
AtSign,
|
||
FileInput,
|
||
} from 'lucide-react';
|
||
import { useTheme } from '@/contexts/ThemeContext';
|
||
import { PageType } from '@/components/Sidebar';
|
||
|
||
interface TaskWorkspaceProps {
|
||
onNavigate: (page: PageType) => void;
|
||
}
|
||
|
||
const TaskWorkspace: React.FC<TaskWorkspaceProps> = ({ onNavigate }) => {
|
||
const { theme } = useTheme();
|
||
const isDark = theme === 'dark';
|
||
const [currentPhase, setCurrentPhase] = useState(3);
|
||
const [showHumanIntervention, setShowHumanIntervention] = useState(false);
|
||
const [inputType, setInputType] = useState('question');
|
||
const [sendTarget, setSendTarget] = useState('current');
|
||
const [inputMessage, setInputMessage] = useState('');
|
||
|
||
// 逻辑链一致性检查数据
|
||
const logicChainChecks = [
|
||
{ id: 'goal-behavior', label: '目标-行为', status: 'passed', detail: '行为与目标高度一致' },
|
||
{ id: 'behavior-driver', label: '行为-驱动', status: 'passed', detail: '驱动有效支撑行为' },
|
||
{ id: 'driver-narrative', label: '驱动-叙事', status: 'passed', detail: '叙事与驱动匹配' },
|
||
{ id: 'narrative-audience', label: '叙事-受众', status: 'warning', detail: '叙事需进一步收窄以匹配核心受众' },
|
||
];
|
||
|
||
// 待确认问题列表
|
||
const pendingQuestions = [
|
||
{ id: 1, type: 'field', title: '受众范围收窄', description: '是否聚焦基层青年而非全体青年？', priority: 'high' },
|
||
{ id: 2, type: 'conflict', title: '叙事方向待定', description: '真实性与话题性如何平衡？', priority: 'medium' },
|
||
];
|
||
|
||
const phases = [
|
||
{ id: 1, name: '目标分析', agent: 'GoalAgent', status: 'completed' },
|
||
{ id: 2, name: '受众分析', agent: 'AudienceAgent', status: 'completed' },
|
||
{ id: 3, name: '行为分析', agent: 'BehaviorAgent', status: 'active' },
|
||
{ id: 4, name: '驱动分析', agent: 'DriverAgent', status: 'pending' },
|
||
{ id: 5, name: '叙事分析', agent: 'NarrativeAgent', status: 'pending' },
|
||
{ id: 6, name: '逻辑链收敛', agent: 'LogicChainAgent', status: 'pending' },
|
||
{ id: 7, name: '风险评估', agent: 'RiskAgent', status: 'pending' },
|
||
{ id: 8, name: '方案生成', agent: 'DraftAgent', status: 'pending' },
|
||
];
|
||
|
||
const discussionCards = [
|
||
{
|
||
id: 1,
|
||
agent: 'GoalAgent',
|
||
phase: '目标分析',
|
||
time: '10:32',
|
||
type: 'judgment',
|
||
coreJudgment: '核心目标是提升品牌在年轻群体中的认知度和好感度',
|
||
outputFields: {
|
||
primary_goal: '提升品牌在Z世代用户中的认知度',
|
||
secondary_goal: '建立品牌年轻化形象',
|
||
},
|
||
releaseStatus: 'passed',
|
||
riskWarnings: [],
|
||
},
|
||
{
|
||
id: 2,
|
||
agent: 'AudienceAgent',
|
||
phase: '受众分析',
|
||
time: '11:15',
|
||
type: 'judgment',
|
||
coreJudgment: '核心受众应聚焦18-25岁基层青年群体，次级受众为25-30岁职场新人',
|
||
outputFields: {
|
||
core_audience: '18-25岁基层青年',
|
||
secondary_audience: '25-30岁职场新人',
|
||
audience_insights: ['社交媒体重度用户', '注重性价比', '偏好真实、有态度的品牌'],
|
||
},
|
||
releaseStatus: 'passed',
|
||
riskWarnings: ['受众范围可能过宽，建议进一步细化'],
|
||
},
|
||
{
|
||
id: 3,
|
||
agent: 'BehaviorAgent',
|
||
phase: '行为分析',
|
||
time: '14:20',
|
||
type: 'response',
|
||
coreJudgment: '目标行为是促使受众主动参与互动并生成UGC内容',
|
||
outputFields: {
|
||
target_behavior: '主动参与话题讨论、生成UGC内容',
|
||
key_conversion: '浏览 → 点赞 → 评论 → 转发 → 创作',
|
||
},
|
||
releaseStatus: 'pending',
|
||
riskWarnings: [],
|
||
},
|
||
];
|
||
|
||
const confirmedFields = {
|
||
goal: '提升品牌在Z世代用户中的认知度',
|
||
audience: '18-25岁基层青年',
|
||
behavior: '主动参与互动并生成UGC内容',
|
||
driver: '待分析',
|
||
narrative: '待分析',
|
||
};
|
||
|
||
const currentPhaseName = phases.find(p => p.status === 'active')?.name || '未知';
|
||
|
||
return (
|
||
<div className="h-[calc(100vh-140px)] flex flex-col">
|
||
{/* 顶部：运行状态栏（精简版 - 无流程图） */}
|
||
<div className={`rounded-xl p-4 flex-shrink-0 border ${
|
||
isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'
|
||
}`}>
|
||
<div className="flex items-center justify-between">
|
||
{/* 左侧：当前阶段和运行状态 */}
|
||
<div className="flex items-center gap-6">
|
||
<div className="flex items-center gap-3">
|
||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
|
||
isDark ? 'bg-blue-500/20' : 'bg-red-100'
|
||
}`}>
|
||
<Target className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
|
||
</div>
|
||
<div>
|
||
<p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>当前阶段</p>
|
||
<p className={`font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>{currentPhaseName}</p>
|
||
</div>
|
||
</div>
|
||
<div className={`h-8 w-px ${isDark ? 'bg-blue-800/30' : 'bg-red-200'}`} />
|
||
<span className={`px-3 py-1.5 rounded-full text-sm font-medium flex items-center gap-1.5 ${
|
||
isDark
|
||
? 'bg-blue-500/20 text-blue-400'
|
||
: 'bg-red-100 text-red-600'
|
||
}`}>
|
||
<span className={`w-2 h-2 rounded-full animate-pulse ${
|
||
isDark ? 'bg-blue-400' : 'bg-red-500'
|
||
}`} />
|
||
运行中
|
||
</span>
|
||
</div>
|
||
|
||
{/* 右侧：全局操作按钮 */}
|
||
<div className="flex items-center gap-2">
|
||
<button className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors border ${
|
||
isDark
|
||
? 'bg-yellow-500/20 hover:bg-yellow-500/30 border-yellow-500/30 text-yellow-400'
|
||
: 'bg-yellow-100 hover:bg-yellow-200 border-yellow-200 text-yellow-600'
|
||
}`}>
|
||
<Pause className="w-4 h-4" />
|
||
暂停
|
||
</button>
|
||
<button className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors ${
|
||
isDark
|
||
? 'bg-green-600 hover:bg-green-500 text-white'
|
||
: 'bg-green-600 hover:bg-green-500 text-white shadow-md'
|
||
}`}>
|
||
<Play className="w-4 h-4" />
|
||
开始
|
||
</button>
|
||
<button
|
||
onClick={() => onNavigate('strategy-result')}
|
||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors border ${
|
||
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-200 text-gray-700'
|
||
}`}
|
||
>
|
||
<Eye className="w-4 h-4" />
|
||
查看结果
|
||
</button>
|
||
<button className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors border ${
|
||
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-200 text-gray-700'
|
||
}`}>
|
||
<Download className="w-4 h-4" />
|
||
导出
|
||
</button>
|
||
<button className={`p-2 rounded-lg transition-colors border ${
|
||
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-200 text-gray-700'
|
||
}`}>
|
||
<ChevronRight className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 三栏式主工作区 */}
|
||
<div className="flex-1 grid grid-cols-12 gap-4 mt-4 min-h-0 overflow-hidden">
|
||
{/* 左栏 - 任务与流程区 (22%) */}
|
||
<div className="col-span-3 flex flex-col gap-4 min-h-0 overflow-y-auto">
|
||
{/* 任务信息卡 */}
|
||
<div className={`rounded-xl p-4 flex-shrink-0 border ${
|
||
isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'
|
||
}`}>
|
||
<h3 className={`font-semibold text-sm mb-3 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
||
<FileText className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
|
||
任务信息
|
||
</h3>
|
||
<div className="space-y-2 text-sm">
|
||
<div className="flex items-center justify-between">
|
||
<span className={isDark ? 'text-slate-500' : 'text-gray-500'}>任务标题</span>
|
||
<span className={`text-right truncate max-w-[140px] ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>五四青年节宣传活动策略</span>
|
||
</div>
|
||
<div className="flex items-center justify-between">
|
||
<span className={isDark ? 'text-slate-500' : 'text-gray-500'}>任务编号</span>
|
||
<span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-400'}`}>TASK-0319-001</span>
|
||
</div>
|
||
<div className="flex items-center justify-between">
|
||
<span className={isDark ? 'text-slate-500' : 'text-gray-500'}>所属场景</span>
|
||
<span className={`text-xs ${isDark ? 'text-blue-400' : 'text-red-600'}`}>宣传策略生成</span>
|
||
</div>
|
||
<div className={`pt-2 border-t ${isDark ? 'border-blue-800/30' : 'border-red-100'}`}>
|
||
<div className="flex items-center justify-between text-xs">
|
||
<span className={`flex items-center gap-1 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>
|
||
<User className="w-3 h-3" /> 张策略
|
||
</span>
|
||
<span className={`flex items-center gap-1 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>
|
||
<Clock className="w-3 h-3" /> 2026-03-19
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 流程节点区 */}
|
||
<div className={`rounded-xl p-4 flex-shrink-0 border ${
|
||
isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'
|
||
}`}>
|
||
<h3 className={`font-semibold text-sm mb-3 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
||
<Bot className={`w-4 h-4 ${isDark ? 'text-cyan-400' : 'text-red-500'}`} />
|
||
流程节点
|
||
</h3>
|
||
<div className="space-y-1.5">
|
||
{phases.map((phase) => (
|
||
<button
|
||
key={phase.id}
|
||
onClick={() => setCurrentPhase(phase.id)}
|
||
className={`w-full flex items-center gap-2 p-2 rounded-lg transition-all text-left border ${
|
||
phase.status === 'active'
|
||
? isDark
|
||
? 'bg-blue-500/20 border-blue-500/30'
|
||
: 'bg-red-50 border-red-200'
|
||
: phase.status === 'completed'
|
||
? isDark
|
||
? 'bg-slate-900/50 hover:bg-slate-800/50'
|
||
: 'bg-gray-50 hover:bg-gray-100'
|
||
: isDark
|
||
? 'bg-slate-900/30 opacity-50'
|
||
: 'bg-gray-50 opacity-50'
|
||
}`}
|
||
>
|
||
<div className={`w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 ${
|
||
phase.status === 'completed'
|
||
? isDark ? 'bg-green-500 text-white' : 'bg-green-500 text-white'
|
||
: phase.status === 'active'
|
||
? isDark ? 'bg-blue-500 text-white' : 'bg-blue-500 text-white'
|
||
: isDark ? 'bg-slate-700 text-slate-400' : 'bg-gray-200 text-gray-500'
|
||
}`}>
|
||
{phase.id}
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<p className={`text-xs font-medium truncate ${
|
||
phase.status === 'active' ? (isDark ? 'text-white' : 'text-gray-900') : (isDark ? 'text-slate-400' : 'text-gray-500')
|
||
}`}>
|
||
{phase.name}
|
||
</p>
|
||
<p className={`text-[10px] truncate ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{phase.agent}</p>
|
||
</div>
|
||
<span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${
|
||
phase.status === 'completed' ? (isDark ? 'bg-green-400' : 'bg-green-500') :
|
||
phase.status === 'active' ? (isDark ? 'bg-blue-400' : 'bg-blue-500') :
|
||
(isDark ? 'bg-slate-600' : 'bg-gray-300')
|
||
}`} />
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 快捷操作卡 */}
|
||
<div className={`rounded-xl p-4 flex-shrink-0 border ${
|
||
isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'
|
||
}`}>
|
||
<h3 className={`font-semibold text-sm mb-3 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
||
<Zap className={`w-4 h-4 ${isDark ? 'text-yellow-400' : 'text-red-500'}`} />
|
||
快捷操作
|
||
</h3>
|
||
<div className="space-y-2">
|
||
<button className={`w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors border ${
|
||
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-200 text-gray-700'
|
||
}`}>
|
||
<RefreshCw className="w-4 h-4" />
|
||
重新运行当前节点
|
||
</button>
|
||
<button className={`w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors border ${
|
||
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-200 text-gray-700'
|
||
}`}>
|
||
<RotateCcw className="w-4 h-4" />
|
||
发起回退
|
||
</button>
|
||
<button className={`w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors border ${
|
||
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-200 text-gray-700'
|
||
}`}>
|
||
<FileInput className="w-4 h-4" />
|
||
查看日志
|
||
</button>
|
||
<button
|
||
onClick={() => setShowHumanIntervention(true)}
|
||
className={`w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors border ${
|
||
isDark
|
||
? 'bg-purple-500/20 hover:bg-purple-500/30 border-purple-500/30 text-purple-400'
|
||
: 'bg-purple-100 hover:bg-purple-200 border-purple-200 text-purple-600'
|
||
}`}
|
||
>
|
||
<UserCheck className="w-4 h-4" />
|
||
人工介入
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 中栏 - 讨论区 (47%) */}
|
||
<div className="col-span-6 flex flex-col gap-4 min-h-0">
|
||
{/* 当前议题卡 */}
|
||
<div className={`rounded-xl p-4 flex-shrink-0 border ${
|
||
isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'
|
||
}`}>
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
|
||
isDark ? 'bg-cyan-500/20' : 'bg-red-100'
|
||
}`}>
|
||
<MessageSquare className={`w-4 h-4 ${isDark ? 'text-cyan-400' : 'text-red-500'}`} />
|
||
</div>
|
||
<div>
|
||
<p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>当前议题</p>
|
||
<p className={`text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>明确目标受众的行为模式和转化路径</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className={`px-2.5 py-1 rounded-full text-xs font-medium ${
|
||
isDark ? 'bg-cyan-500/20 text-cyan-400' : 'bg-red-100 text-red-600'
|
||
}`}>
|
||
BehaviorAgent
|
||
</span>
|
||
<button className={`px-2 py-1 rounded text-xs transition-colors border ${
|
||
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-200 text-gray-700'
|
||
}`}>
|
||
指定发言
|
||
</button>
|
||
<button className={`px-2 py-1 rounded text-xs transition-colors border ${
|
||
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-200 text-gray-700'
|
||
}`}>
|
||
结束本轮
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className={`mt-3 p-2 rounded-lg text-xs ${isDark ? 'bg-slate-900/50' : 'bg-gray-50'}`}>
|
||
<span className={isDark ? 'text-slate-500' : 'text-gray-400'}>上游输入：</span>
|
||
<span className={isDark ? 'text-cyan-400' : 'text-red-600'}>AudienceAgent 已确认输出</span>
|
||
<span className={`mx-2 ${isDark ? 'text-slate-400' : 'text-gray-400'}`}>→</span>
|
||
<span className={isDark ? 'text-slate-300' : 'text-gray-700'}>核心受众已明确：18-25岁基层青年群体</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 讨论消息流 */}
|
||
<div className={`flex-1 rounded-xl p-4 overflow-y-auto min-h-0 border ${
|
||
isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'
|
||
}`}>
|
||
<h3 className={`font-semibold text-sm mb-4 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
||
<Bot className={`w-4 h-4 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
|
||
讨论消息流
|
||
</h3>
|
||
<div className="space-y-4">
|
||
{discussionCards.map((card) => (
|
||
<div
|
||
key={card.id}
|
||
className={`p-4 rounded-xl border ${
|
||
card.releaseStatus === 'passed'
|
||
? isDark
|
||
? 'bg-slate-900/50 border-green-500/30'
|
||
: 'bg-green-50 border-green-200'
|
||
: card.releaseStatus === 'pending'
|
||
? isDark
|
||
? 'bg-blue-500/10 border-blue-500/30'
|
||
: 'bg-blue-50 border-blue-200'
|
||
: isDark
|
||
? 'bg-red-500/10 border-red-500/30'
|
||
: 'bg-red-50 border-red-200'
|
||
}`}
|
||
>
|
||
<div className="flex items-start justify-between mb-3">
|
||
<div className="flex items-center gap-2">
|
||
<div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
|
||
isDark ? 'bg-purple-500/20' : 'bg-red-100'
|
||
}`}>
|
||
<Bot className={`w-4 h-4 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
|
||
</div>
|
||
<div>
|
||
<div className="flex items-center gap-2">
|
||
<p className={`text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>{card.agent}</p>
|
||
<span className={`px-1.5 py-0.5 rounded text-[10px] ${isDark ? 'bg-slate-700 text-slate-400' : 'bg-gray-100 text-gray-500'}`}>
|
||
{card.type === 'judgment' ? '独立判断' : '回应'}
|
||
</span>
|
||
</div>
|
||
<p className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{card.phase} · {card.time}</p>
|
||
</div>
|
||
</div>
|
||
<span className={`px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1 ${
|
||
card.releaseStatus === 'passed'
|
||
? isDark
|
||
? 'bg-green-500/20 text-green-400'
|
||
: 'bg-green-100 text-green-600'
|
||
: card.releaseStatus === 'pending'
|
||
? isDark
|
||
? 'bg-yellow-500/20 text-yellow-400'
|
||
: 'bg-yellow-100 text-yellow-600'
|
||
: isDark
|
||
? 'bg-red-500/20 text-red-400'
|
||
: 'bg-red-100 text-red-600'
|
||
}`}>
|
||
{card.releaseStatus === 'passed' ? (
|
||
<><CheckCircle className="w-3 h-3" /> 已放行</>
|
||
) : card.releaseStatus === 'pending' ? (
|
||
<><Clock className="w-3 h-3" /> 待放行</>
|
||
) : (
|
||
<><AlertTriangle className="w-3 h-3" /> 未通过</>
|
||
)}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="mb-3">
|
||
<p className={`text-xs mb-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>核心观点</p>
|
||
<p className={`text-sm ${isDark ? 'text-white' : 'text-gray-900'}`}>{card.coreJudgment}</p>
|
||
</div>
|
||
|
||
<div className={`mb-3 p-3 rounded-lg ${isDark ? 'bg-slate-800/50' : 'bg-gray-50'}`}>
|
||
<p className={`text-xs mb-2 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>输出字段摘要</p>
|
||
<div className="space-y-1 text-xs">
|
||
{Object.entries(card.outputFields).map(([key, value]) => (
|
||
<div key={key} className="flex items-start gap-2">
|
||
<span className={`font-mono ${isDark ? 'text-cyan-400' : 'text-red-600'}`}>{key}:</span>
|
||
<span className={isDark ? 'text-slate-300' : 'text-gray-700'}>
|
||
{Array.isArray(value) ? value.join(', ') : value}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{card.riskWarnings.length > 0 && (
|
||
<div className={`mb-3 p-2 rounded-lg border ${
|
||
isDark ? 'bg-amber-500/10 border-amber-500/30' : 'bg-yellow-50 border-yellow-200'
|
||
}`}>
|
||
<p className={`text-xs font-medium flex items-center gap-1 ${
|
||
isDark ? 'text-amber-400' : 'text-yellow-600'
|
||
}`}>
|
||
<AlertTriangle className="w-3 h-3" /> 风险提示
|
||
</p>
|
||
<p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{card.riskWarnings[0]}</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className={`flex items-center gap-2 pt-2 border-t ${isDark ? 'border-blue-800/30' : 'border-gray-200'}`}>
|
||
<button className={`px-2.5 py-1.5 rounded text-xs transition-colors ${
|
||
isDark
|
||
? 'bg-green-600/50 hover:bg-green-600 text-white'
|
||
: 'bg-green-600 hover:bg-green-500 text-white'
|
||
}`}>
|
||
采纳
|
||
</button>
|
||
<button className={`px-2.5 py-1.5 rounded text-xs transition-colors border ${
|
||
isDark
|
||
? 'bg-yellow-500/20 hover:bg-yellow-500/30 border-yellow-500/30 text-yellow-400'
|
||
: 'bg-yellow-100 hover:bg-yellow-200 border-yellow-200 text-yellow-600'
|
||
}`}>
|
||
待确认
|
||
</button>
|
||
<button className={`px-2.5 py-1.5 rounded text-xs transition-colors border ${
|
||
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-200 text-gray-700'
|
||
}`}>
|
||
引用追问
|
||
</button>
|
||
<button className={`px-2.5 py-1.5 rounded text-xs transition-colors border ${
|
||
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-200 text-gray-700'
|
||
}`}>
|
||
写入策略链
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
{/* 系统摘要卡 */}
|
||
<div className={`p-4 rounded-xl border ${
|
||
isDark ? 'bg-blue-500/10 border-blue-500/30' : 'bg-blue-50 border-blue-200'
|
||
}`}>
|
||
<div className="flex items-center gap-2 mb-3">
|
||
<div className={`w-6 h-6 rounded flex items-center justify-center ${
|
||
isDark ? 'bg-blue-500/20' : 'bg-blue-100'
|
||
}`}>
|
||
<Lightbulb className={`w-3 h-3 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
|
||
</div>
|
||
<p className={`text-sm font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>系统摘要</p>
|
||
</div>
|
||
<div className="space-y-2 text-sm">
|
||
<div>
|
||
<p className={`text-xs mb-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>已形成结论：</p>
|
||
<ul className={`text-xs space-y-0.5 list-disc list-inside ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
|
||
<li>核心受众明确为18-25岁基层青年</li>
|
||
<li>目标行为建议拆分为参与和传播两层</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<p className={`text-xs mb-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>待确认：</p>
|
||
<ul className={`text-xs space-y-0.5 list-disc list-inside ${isDark ? 'text-yellow-400' : 'text-yellow-600'}`}>
|
||
<li>UGC创作是否纳入核心行为？</li>
|
||
</ul>
|
||
</div>
|
||
<div className={`pt-2 border-t ${isDark ? 'border-blue-800/30' : 'border-blue-200'}`}>
|
||
<p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>建议下一步：</p>
|
||
<p className={`text-xs ${isDark ? 'text-cyan-400' : 'text-red-600'}`}>邀请 DriverAgent 分析驱动因素</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-2 mt-3">
|
||
<button className={`px-3 py-1.5 rounded text-xs transition-colors ${
|
||
isDark
|
||
? 'bg-blue-600 hover:bg-blue-500 text-white'
|
||
: 'bg-blue-600 hover:bg-blue-500 text-white shadow-md'
|
||
}`}>
|
||
推进下一步
|
||
</button>
|
||
<button className={`px-3 py-1.5 rounded text-xs transition-colors border ${
|
||
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-200 text-gray-700'
|
||
}`}>
|
||
写入待确认
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 右栏 - 策略收敛区 (28%) */}
|
||
<div className="col-span-3 flex flex-col gap-4 min-h-0 overflow-y-auto">
|
||
{/* 策略链卡 */}
|
||
<div className={`rounded-xl p-4 flex-shrink-0 border ${
|
||
isDark
|
||
? 'bg-gradient-to-br from-blue-600/20 to-cyan-600/20 backdrop-blur-xl border-blue-500/30'
|
||
: 'bg-gradient-to-br from-red-50 to-red-100 border-red-200'
|
||
}`}>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h3 className={`font-semibold text-sm flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
||
<Lightbulb className={`w-4 h-4 ${isDark ? 'text-yellow-400' : 'text-red-500'}`} />
|
||
策略链
|
||
</h3>
|
||
<div className="flex items-center gap-1">
|
||
<button className={`p-1 rounded transition-colors ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'}`} title="复制">
|
||
<FileText className={`w-3.5 h-3.5 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
|
||
</button>
|
||
<button className={`p-1 rounded transition-colors ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'}`} title="编辑">
|
||
<RefreshCw className={`w-3.5 h-3.5 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className={`p-3 rounded-lg border ${
|
||
isDark ? 'bg-slate-900/50 border-blue-500/20' : 'bg-white border-red-100'
|
||
}`}>
|
||
<p className={`text-xs leading-relaxed ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
|
||
面向<span className={`font-medium ${isDark ? 'text-cyan-400' : 'text-red-600'}`}>【18-25岁基层青年】</span>，
|
||
围绕其<span className={`font-medium ${isDark ? 'text-yellow-400' : 'text-red-600'}`}>【社交认同与自我表达】</span>驱动，
|
||
传播<span className={`font-medium ${isDark ? 'text-purple-400' : 'text-red-600'}`}>【真实、有态度的青年故事】</span>叙事，
|
||
促使其产生<span className={`font-medium ${isDark ? 'text-green-400' : 'text-red-600'}`}>【主动参与互动并生成UGC内容】</span>行为，
|
||
从而实现<span className={`font-medium ${isDark ? 'text-blue-400' : 'text-red-600'}`}>【提升品牌在Z世代用户中的认知度】</span>目标。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 逻辑链一致性校验 */}
|
||
<div className={`rounded-xl p-4 flex-shrink-0 border ${
|
||
isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'
|
||
}`}>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h3 className={`font-semibold text-sm flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
||
<Shield className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-red-500'}`} />
|
||
逻辑链一致性
|
||
</h3>
|
||
<span className={`px-2 py-0.5 rounded text-xs ${
|
||
isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-600'
|
||
}`}>
|
||
3/4 通过
|
||
</span>
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
{logicChainChecks.map((check) => (
|
||
<div
|
||
key={check.id}
|
||
className={`p-2 rounded-lg border text-xs ${
|
||
check.status === 'passed'
|
||
? isDark
|
||
? 'bg-green-500/10 border-green-500/30'
|
||
: 'bg-green-50 border-green-200'
|
||
: check.status === 'warning'
|
||
? isDark
|
||
? 'bg-yellow-500/10 border-yellow-500/30'
|
||
: 'bg-yellow-50 border-yellow-200'
|
||
: isDark
|
||
? 'bg-red-500/10 border-red-500/30'
|
||
: 'bg-red-50 border-red-200'
|
||
}`}
|
||
>
|
||
<div className="flex items-center justify-between">
|
||
<span className={`font-medium ${
|
||
check.status === 'passed'
|
||
? isDark ? 'text-green-400' : 'text-green-600'
|
||
: check.status === 'warning'
|
||
? isDark ? 'text-yellow-400' : 'text-yellow-600'
|
||
: isDark ? 'text-red-400' : 'text-red-600'
|
||
}`}>
|
||
{check.label}
|
||
</span>
|
||
{check.status === 'passed' ? (
|
||
<CheckCircle2 className={`w-3.5 h-3.5 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
|
||
) : check.status === 'warning' ? (
|
||
<AlertCircle className={`w-3.5 h-3.5 ${isDark ? 'text-yellow-400' : 'text-yellow-500'}`} />
|
||
) : (
|
||
<XCircle className={`w-3.5 h-3.5 ${isDark ? 'text-red-400' : 'text-red-500'}`} />
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 已采纳观点 */}
|
||
<div className={`rounded-xl p-4 flex-shrink-0 border ${
|
||
isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'
|
||
}`}>
|
||
<h3 className={`font-semibold text-sm mb-3 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
||
<CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-red-500'}`} />
|
||
已采纳观点
|
||
</h3>
|
||
<div className="space-y-2">
|
||
{[
|
||
{ agent: 'GoalAgent', opinion: '主目标是提升认知度与好感度' },
|
||
{ agent: 'AudienceAgent', opinion: '核心受众为18-25岁基层青年' },
|
||
{ agent: 'BehaviorAgent', opinion: '目标行为应拆为参与和传播' },
|
||
].map((item, index) => (
|
||
<div key={index} className={`p-2 rounded-lg border ${
|
||
isDark ? 'bg-slate-900/50 border-green-500/20' : 'bg-green-50 border-green-200'
|
||
}`}>
|
||
<p className={`text-xs font-medium mb-0.5 ${isDark ? 'text-green-400' : 'text-green-600'}`}>{item.agent}</p>
|
||
<p className={`text-xs ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{item.opinion}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 待确认与分歧 */}
|
||
<div className={`rounded-xl p-4 flex-shrink-0 border ${
|
||
isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'
|
||
}`}>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h3 className={`font-semibold text-sm flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
||
<AlertTriangle className={`w-4 h-4 ${isDark ? 'text-amber-400' : 'text-red-500'}`} />
|
||
待确认与分歧
|
||
</h3>
|
||
<span className={`px-2 py-0.5 rounded text-xs ${
|
||
isDark ? 'bg-amber-500/20 text-amber-400' : 'bg-yellow-100 text-yellow-600'
|
||
}`}>
|
||
{pendingQuestions.length} 项
|
||
</span>
|
||
</div>
|
||
<div className="space-y-2">
|
||
{pendingQuestions.map((question) => (
|
||
<div
|
||
key={question.id}
|
||
className={`p-2 rounded-lg border ${
|
||
question.priority === 'high'
|
||
? isDark
|
||
? 'bg-red-500/10 border-red-500/30'
|
||
: 'bg-red-50 border-red-200'
|
||
: isDark
|
||
? 'bg-amber-500/10 border-amber-500/30'
|
||
: 'bg-yellow-50 border-yellow-200'
|
||
}`}
|
||
>
|
||
<p className={`text-xs font-medium ${
|
||
question.priority === 'high' ? (isDark ? 'text-red-400' : 'text-red-600') : (isDark ? 'text-amber-400' : 'text-yellow-600')
|
||
}`}>
|
||
{question.title}
|
||
</p>
|
||
<p className={`text-xs mt-0.5 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{question.description}</p>
|
||
<button className={`mt-1 text-xs flex items-center gap-1 ${
|
||
isDark ? 'text-blue-400 hover:text-blue-300' : 'text-blue-500 hover:text-blue-600'
|
||
}`}>
|
||
<UserCheck className="w-3 h-3" />
|
||
点名分析
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 底部：固定输入区 */}
|
||
<div className={`mt-4 rounded-xl p-4 flex-shrink-0 border ${
|
||
isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'
|
||
}`}>
|
||
<div className="flex items-center gap-3">
|
||
{/* 发送对象选择 */}
|
||
<select
|
||
value={sendTarget}
|
||
onChange={(e) => setSendTarget(e.target.value)}
|
||
className={`px-3 py-2 rounded-lg text-sm focus:outline-none ${
|
||
isDark
|
||
? 'bg-slate-900/50 border border-blue-800/30 text-white'
|
||
: 'bg-white border border-gray-200 text-gray-700'
|
||
}`}
|
||
>
|
||
<option value="current">当前智能体</option>
|
||
<option value="all">全部智能体</option>
|
||
<option value="host">主持人</option>
|
||
</select>
|
||
|
||
{/* 输入类型选择 */}
|
||
<select
|
||
value={inputType}
|
||
onChange={(e) => setInputType(e.target.value)}
|
||
className={`px-3 py-2 rounded-lg text-sm focus:outline-none ${
|
||
isDark
|
||
? 'bg-slate-900/50 border border-blue-800/30 text-white'
|
||
: 'bg-white border border-gray-200 text-gray-700'
|
||
}`}
|
||
>
|
||
<option value="question">提问</option>
|
||
<option value="instruction">指令</option>
|
||
<option value="judgment">人工判断</option>
|
||
<option value="note">批注</option>
|
||
</select>
|
||
|
||
{/* 主输入框 */}
|
||
<input
|
||
type="text"
|
||
value={inputMessage}
|
||
onChange={(e) => setInputMessage(e.target.value)}
|
||
placeholder="输入问题、指令、人工判断或批注..."
|
||
className={`flex-1 px-4 py-2 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-gray-200 text-gray-900 placeholder-gray-400'
|
||
}`}
|
||
/>
|
||
|
||
{/* 发送按钮 */}
|
||
<button className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||
isDark
|
||
? 'bg-blue-600 hover:bg-blue-500 text-white'
|
||
: 'bg-red-600 hover:bg-red-500 text-white shadow-md'
|
||
}`}>
|
||
<Send className="w-4 h-4" />
|
||
发送
|
||
</button>
|
||
</div>
|
||
|
||
{/* 第二行快捷操作 */}
|
||
<div className="flex items-center gap-4 mt-3">
|
||
<button className={`flex items-center gap-1.5 px-2 py-1 rounded text-xs transition-colors border ${
|
||
isDark
|
||
? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-400'
|
||
: 'bg-gray-100 hover:bg-gray-200 border-gray-200 text-gray-500'
|
||
}`}>
|
||
<AtSign className="w-3 h-3" />
|
||
@智能体
|
||
</button>
|
||
<button className={`flex items-center gap-1.5 px-2 py-1 rounded text-xs transition-colors border ${
|
||
isDark
|
||
? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-400'
|
||
: 'bg-gray-100 hover:bg-gray-200 border-gray-200 text-gray-500'
|
||
}`}>
|
||
<FileInput className="w-3 h-3" />
|
||
引用消息
|
||
</button>
|
||
<button className={`flex items-center gap-1.5 px-2 py-1 rounded text-xs transition-colors border ${
|
||
isDark
|
||
? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-400'
|
||
: 'bg-gray-100 hover:bg-gray-200 border-gray-200 text-gray-500'
|
||
}`}>
|
||
<Lightbulb className="w-3 h-3" />
|
||
生成摘要
|
||
</button>
|
||
<button className={`flex items-center gap-1.5 px-2 py-1 rounded text-xs transition-colors border ${
|
||
isDark
|
||
? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-400'
|
||
: 'bg-gray-100 hover:bg-gray-200 border-gray-200 text-gray-500'
|
||
}`}>
|
||
<Plus className="w-3 h-3" />
|
||
写入整合区
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 人工干预弹窗 */}
|
||
{showHumanIntervention && (
|
||
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50">
|
||
<div className={`rounded-2xl p-6 w-full max-w-lg border ${
|
||
isDark ? 'bg-slate-800 border-blue-800/50' : 'bg-white border-red-200'
|
||
}`}>
|
||
<div className="flex items-center justify-between mb-6">
|
||
<h3 className={`font-semibold text-lg flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
|
||
<UserCheck className={`w-5 h-5 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
|
||
人工干预
|
||
</h3>
|
||
<button
|
||
onClick={() => setShowHumanIntervention(false)}
|
||
className={`p-2 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-700' : 'hover:bg-gray-100'}`}
|
||
>
|
||
<XCircle className={`w-5 h-5 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
|
||
</button>
|
||
</div>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>干预类型</label>
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{[
|
||
{ value: 'correct', label: '人工修正', icon: RefreshCw },
|
||
{ value: 'approve', label: '提前放行', icon: CheckCircle2 },
|
||
{ value: 'override', label: '强制覆盖', icon: Zap },
|
||
{ value: 'reject', label: '终止本轮', icon: XCircle },
|
||
].map((type) => (
|
||
<button
|
||
key={type.value}
|
||
className={`flex items-center gap-2 p-3 rounded-lg transition-colors border ${
|
||
isDark
|
||
? 'bg-slate-900/50 hover:bg-slate-700/50 border-blue-800/30 text-slate-300'
|
||
: 'bg-gray-50 hover:bg-gray-100 border-gray-200 text-gray-700'
|
||
}`}
|
||
>
|
||
<type.icon className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
|
||
<span className="text-sm">{type.label}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>目标字段</label>
|
||
<select className={`w-full px-4 py-2.5 rounded-lg text-sm ${
|
||
isDark
|
||
? 'bg-slate-900/50 border border-blue-800/30 text-white'
|
||
: 'bg-white border border-gray-200 text-gray-700'
|
||
}`}>
|
||
<option value="">请选择要干预的字段</option>
|
||
<option value="audience">受众细分</option>
|
||
<option value="behavior">目标行为</option>
|
||
<option value="driver">核心驱动</option>
|
||
<option value="narrative">叙事策略</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>干预内容</label>
|
||
<textarea
|
||
rows={4}
|
||
className={`w-full px-4 py-2.5 rounded-lg text-sm resize-none ${
|
||
isDark
|
||
? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
|
||
: 'bg-white border border-gray-200 text-gray-900 placeholder-gray-400'
|
||
}`}
|
||
placeholder="请输入人工干预的具体内容或修正意见..."
|
||
/>
|
||
</div>
|
||
<div className="flex gap-3 pt-2">
|
||
<button
|
||
onClick={() => setShowHumanIntervention(false)}
|
||
className={`flex-1 px-4 py-2.5 rounded-lg text-sm transition-colors border ${
|
||
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-200 text-gray-700'
|
||
}`}
|
||
>
|
||
取消
|
||
</button>
|
||
<button className={`flex-1 px-4 py-2.5 rounded-lg text-sm transition-colors ${
|
||
isDark
|
||
? 'bg-purple-600 hover:bg-purple-500 text-white'
|
||
: 'bg-red-600 hover:bg-red-500 text-white shadow-md'
|
||
}`}>
|
||
确认干预
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default TaskWorkspace;
|