3518fc8ece
Phase 4 completion: - Add ApprovalQueue component for managing pending approvals - Add ExecutionResult component for displaying hand/workflow results - Update Sidebar navigation to use unified AutomationPanel - Replace separate 'hands' and 'workflow' tabs with single 'automation' tab - Fix TypeScript type safety issues with unknown types in JSX expressions Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { ClipboardList } from 'lucide-react';
|
|
import { Button } from './ui';
|
|
|
|
interface TopBarProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
onOpenDetail?: () => void;
|
|
showDetailButton?: boolean;
|
|
}
|
|
|
|
export function TopBar({
|
|
title,
|
|
subtitle,
|
|
onOpenDetail,
|
|
showDetailButton = true
|
|
}: TopBarProps) {
|
|
return (
|
|
<header className="h-14 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 flex items-center px-4 flex-shrink-0">
|
|
{/* 左侧标题 */}
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8 bg-gradient-to-br from-emerald-400 to-teal-500 rounded-lg flex items-center justify-center text-white font-bold shadow-sm">
|
|
<span className="text-sm">Z</span>
|
|
</div>
|
|
<div>
|
|
<span className="font-bold text-lg text-gray-900 dark:text-gray-100">{title}</span>
|
|
{subtitle && (
|
|
<span className="ml-2 text-sm text-gray-500 dark:text-gray-400">{subtitle}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 中间区域 */}
|
|
<div className="flex-1" />
|
|
|
|
{/* 右侧按钮 */}
|
|
<div className="flex items-center gap-1">
|
|
{/* 详情按钮 */}
|
|
{showDetailButton && onOpenDetail && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={onOpenDetail}
|
|
className="flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
|
|
title="显示详情面板"
|
|
>
|
|
<ClipboardList className="w-4 h-4" />
|
|
<span className="text-sm">详情</span>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|