feat(hands): restructure Hands UI with Chinese localization
Major changes: - Add HandList.tsx component for left sidebar - Add HandTaskPanel.tsx for middle content area - Restructure Sidebar tabs: 分身/HANDS/Workflow - Remove Hands tab from RightPanel - Localize all UI text to Chinese - Archive legacy OpenClaw documentation - Add Hands integration lessons document - Update feature checklist with new components UI improvements: - Left sidebar now shows Hands list with status icons - Middle area shows selected Hand's tasks and results - Consistent styling with Tailwind CSS - Chinese status labels and buttons Documentation: - Create docs/archive/openclaw-legacy/ for old docs - Add docs/knowledge-base/hands-integration-lessons.md - Update docs/knowledge-base/feature-checklist.md - Update docs/knowledge-base/README.md Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
iven
277
desktop/src/components/HandTaskPanel.tsx
Normal file
277
desktop/src/components/HandTaskPanel.tsx
Normal file
@@ -0,0 +1,277 @@
|
||||
/**
|
||||
* HandTaskPanel - Hand 任务和结果面板
|
||||
*
|
||||
* 显示选中 Hand 的任务清单、执行历史和结果。
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useGatewayStore, type Hand } from '../store/gatewayStore';
|
||||
import {
|
||||
Zap,
|
||||
Loader2,
|
||||
Clock,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
AlertCircle,
|
||||
ChevronRight,
|
||||
Play,
|
||||
ArrowLeft,
|
||||
} from 'lucide-react';
|
||||
|
||||
interface HandTaskPanelProps {
|
||||
handId: string;
|
||||
onBack?: () => void;
|
||||
}
|
||||
|
||||
// 任务状态配置
|
||||
const RUN_STATUS_CONFIG: Record<string, { label: string; className: string; icon: React.ComponentType<{ className?: string }> }> = {
|
||||
pending: { label: '等待中', className: 'text-gray-500 bg-gray-100', icon: Clock },
|
||||
running: { label: '运行中', className: 'text-blue-600 bg-blue-100', icon: Loader2 },
|
||||
completed: { label: '已完成', className: 'text-green-600 bg-green-100', icon: CheckCircle },
|
||||
failed: { label: '失败', className: 'text-red-600 bg-red-100', icon: XCircle },
|
||||
cancelled: { label: '已取消', className: 'text-gray-500 bg-gray-100', icon: XCircle },
|
||||
needs_approval: { label: '待审批', className: 'text-yellow-600 bg-yellow-100', icon: AlertCircle },
|
||||
};
|
||||
|
||||
// 模拟任务数据（实际应从 API 获取）
|
||||
interface MockTask {
|
||||
id: string;
|
||||
name: string;
|
||||
status: string;
|
||||
startedAt: string;
|
||||
completedAt?: string;
|
||||
result?: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export function HandTaskPanel({ handId, onBack }: HandTaskPanelProps) {
|
||||
const { hands, loadHands, triggerHand } = useGatewayStore();
|
||||
const [selectedHand, setSelectedHand] = useState<Hand | null>(null);
|
||||
const [tasks, setTasks] = useState<MockTask[]>([]);
|
||||
const [isActivating, setIsActivating] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadHands();
|
||||
}, [loadHands]);
|
||||
|
||||
useEffect(() => {
|
||||
const hand = hands.find(h => h.id === handId || h.name === handId);
|
||||
setSelectedHand(hand || null);
|
||||
}, [hands, handId]);
|
||||
|
||||
// 模拟加载任务历史
|
||||
useEffect(() => {
|
||||
if (selectedHand) {
|
||||
// TODO: 实际应从 API 获取任务历史
|
||||
// 目前使用模拟数据
|
||||
setTasks([
|
||||
{
|
||||
id: '1',
|
||||
name: `${selectedHand.name} - 任务 1`,
|
||||
status: 'completed',
|
||||
startedAt: new Date(Date.now() - 3600000).toISOString(),
|
||||
completedAt: new Date(Date.now() - 3500000).toISOString(),
|
||||
result: '任务执行成功，生成了 5 个输出文件。',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: `${selectedHand.name} - 任务 2`,
|
||||
status: 'running',
|
||||
startedAt: new Date(Date.now() - 1800000).toISOString(),
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: `${selectedHand.name} - 任务 3`,
|
||||
status: 'needs_approval',
|
||||
startedAt: new Date(Date.now() - 600000).toISOString(),
|
||||
},
|
||||
]);
|
||||
}
|
||||
}, [selectedHand]);
|
||||
|
||||
const handleActivate = useCallback(async () => {
|
||||
if (!selectedHand) return;
|
||||
setIsActivating(true);
|
||||
try {
|
||||
await triggerHand(selectedHand.name);
|
||||
// 刷新 hands 列表
|
||||
await loadHands();
|
||||
} catch {
|
||||
// Error is handled in store
|
||||
} finally {
|
||||
setIsActivating(false);
|
||||
}
|
||||
}, [selectedHand, triggerHand, loadHands]);
|
||||
|
||||
if (!selectedHand) {
|
||||
return (
|
||||
<div className="p-8 text-center">
|
||||
<Zap className="w-12 h-12 mx-auto text-gray-300 mb-3" />
|
||||
<p className="text-sm text-gray-400">请从左侧选择一个 Hand</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const runningTasks = tasks.filter(t => t.status === 'running');
|
||||
const completedTasks = tasks.filter(t => t.status === 'completed' || t.status === 'failed');
|
||||
const pendingTasks = tasks.filter(t => t.status === 'pending' || t.status === 'needs_approval');
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
{/* 头部 */}
|
||||
<div className="p-4 border-b border-gray-200 bg-white flex-shrink-0">
|
||||
<div className="flex items-center gap-3">
|
||||
{onBack && (
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
<span className="text-2xl">{selectedHand.icon || '🤖'}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h2 className="text-lg font-semibold text-gray-900 truncate">
|
||||
{selectedHand.name}
|
||||
</h2>
|
||||
<p className="text-xs text-gray-500 truncate">{selectedHand.description}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleActivate}
|
||||
disabled={selectedHand.status !== 'idle' || isActivating}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{isActivating ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
启动中...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Play className="w-4 h-4" />
|
||||
执行任务
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 内容区域 */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
||||
{/* 运行中的任务 */}
|
||||
{runningTasks.length > 0 && (
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
|
||||
<h3 className="text-sm font-semibold text-blue-700 dark:text-blue-400 mb-3 flex items-center gap-2">
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
运行中 ({runningTasks.length})
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{runningTasks.map(task => (
|
||||
<TaskCard key={task.id} task={task} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 待处理任务 */}
|
||||
{pendingTasks.length > 0 && (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
|
||||
<h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
|
||||
<Clock className="w-4 h-4" />
|
||||
待处理 ({pendingTasks.length})
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{pendingTasks.map(task => (
|
||||
<TaskCard key={task.id} task={task} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 已完成任务 */}
|
||||
{completedTasks.length > 0 && (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
|
||||
<h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
|
||||
历史记录 ({completedTasks.length})
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{completedTasks.map(task => (
|
||||
<TaskCard key={task.id} task={task} expanded />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 空状态 */}
|
||||
{tasks.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Zap className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-1">暂无任务记录</p>
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500">
|
||||
点击"执行任务"按钮开始运行
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 任务卡片组件
|
||||
function TaskCard({ task, expanded = false }: { task: MockTask; expanded?: boolean }) {
|
||||
const [isExpanded, setIsExpanded] = useState(expanded);
|
||||
const config = RUN_STATUS_CONFIG[task.status] || RUN_STATUS_CONFIG.pending;
|
||||
const StatusIcon = config.icon;
|
||||
|
||||
return (
|
||||
<div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-3 border border-gray-100 dark:border-gray-700">
|
||||
<div
|
||||
className="flex items-center justify-between cursor-pointer"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<StatusIcon className={`w-4 h-4 flex-shrink-0 ${task.status === 'running' ? 'animate-spin' : ''}`} />
|
||||
<span className="text-sm font-medium text-gray-800 dark:text-gray-200 truncate">
|
||||
{task.name}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<span className={`text-xs px-2 py-0.5 rounded ${config.className}`}>
|
||||
{config.label}
|
||||
</span>
|
||||
<ChevronRight className={`w-4 h-4 text-gray-400 transition-transform ${isExpanded ? 'rotate-90' : ''}`} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 展开详情 */}
|
||||
{isExpanded && (
|
||||
<div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 space-y-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
<div className="flex justify-between">
|
||||
<span>开始时间</span>
|
||||
<span>{new Date(task.startedAt).toLocaleString()}</span>
|
||||
</div>
|
||||
{task.completedAt && (
|
||||
<div className="flex justify-between">
|
||||
<span>完成时间</span>
|
||||
<span>{new Date(task.completedAt).toLocaleString()}</span>
|
||||
</div>
|
||||
)}
|
||||
{task.result && (
|
||||
<div className="mt-2 p-2 bg-green-50 dark:bg-green-900/20 rounded border border-green-200 dark:border-green-800 text-green-700 dark:text-green-400">
|
||||
{task.result}
|
||||
</div>
|
||||
)}
|
||||
{task.error && (
|
||||
<div className="mt-2 p-2 bg-red-50 dark:bg-red-900/20 rounded border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400">
|
||||
{task.error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HandTaskPanel;
|
||||
Reference in New Issue
Block a user