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>
57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { X } from 'lucide-react';
|
|
|
|
interface DetailDrawerProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
title?: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function DetailDrawer({ open, onClose, title = '详情', children }: DetailDrawerProps) {
|
|
return (
|
|
<AnimatePresence>
|
|
{open && (
|
|
<>
|
|
{/* 遮罩层 */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
className="fixed inset-0 bg-black/20 dark:bg-black/40 z-40"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* 抽屉面板 */}
|
|
<motion.aside
|
|
initial={{ x: '100%' }}
|
|
animate={{ x: 0 }}
|
|
exit={{ x: '100%' }}
|
|
transition={{ type: 'spring', damping: 25, stiffness: 300 }}
|
|
className="fixed right-0 top-0 bottom-0 w-[400px] bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-700 z-50 flex flex-col shadow-xl"
|
|
>
|
|
{/* 抽屉头部 */}
|
|
<header className="h-14 border-b border-gray-200 dark:border-gray-700 flex items-center px-4 flex-shrink-0">
|
|
<span className="font-medium text-gray-900 dark:text-gray-100">{title}</span>
|
|
<button
|
|
onClick={onClose}
|
|
className="ml-auto p-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg text-gray-500 dark:text-gray-400 transition-colors"
|
|
aria-label="关闭"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</header>
|
|
|
|
{/* 抽屉内容 */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
{children}
|
|
</div>
|
|
</motion.aside>
|
|
</>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|