import React, { useState, useEffect } from "react"; import { Button } from "@/components/ui/button"; import { Download } from "lucide-react"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { getDictionary } from "@/lib/dictionary"; import { useLocale } from "@/hooks/useLocale"; import type { Messages } from "@/types/messages"; interface FileTransferButtonProps { onRequest: () => void; onSave?: () => void; // 新增:处理手动保存 isCurrentFileTransferring: boolean; isOtherFileTransferring: boolean; isSavedToDisk: boolean; isPendingSave?: boolean; // 新增:是否待保存状态 } // Manage buttons for different download statuses const FileTransferButton = ({ onRequest, onSave, isCurrentFileTransferring, isOtherFileTransferring, isSavedToDisk, isPendingSave = false, }: FileTransferButtonProps) => { const locale = useLocale(); const [messages, setMessages] = useState(null); // Button status judgment - 待保存状态时按钮应该可点击 const isDisabled = isCurrentFileTransferring || isSavedToDisk || (isOtherFileTransferring && !isPendingSave); useEffect(() => { getDictionary(locale) .then((dict) => setMessages(dict)) .catch((error) => console.error("Failed to load messages:", error)); }, [locale]); // Display different tooltips based on status const getTooltipContent = () => { if (isSavedToDisk) return messages!.text.FileTransferButton.SavedToDisk_tips; if (isCurrentFileTransferring) return messages!.text.FileTransferButton.CurrentFileTransferring_tips; if (isPendingSave) return messages!.text.FileTransferButton.PendingSave_tips; if (isOtherFileTransferring) return messages!.text.FileTransferButton.OtherFileTransferring_tips; return messages!.text.FileTransferButton.download_tips; }; // Set different button styles and class names based on status const getButtonStyles = () => { if (isSavedToDisk) { return { variant: "ghost" as const, className: "mr-2 text-gray-500", }; } if (isCurrentFileTransferring) { return { variant: "outline" as const, className: "mr-2 cursor-not-allowed", }; } if (isPendingSave) { return { variant: "default" as const, // 使用更明显的样式 className: "mr-2 bg-green-600 hover:bg-green-700 text-white", }; } if (isOtherFileTransferring) { return { variant: "outline" as const, className: "mr-2 cursor-not-allowed bg-gray-100 border-gray-300 text-gray-500", }; } return { variant: "outline" as const, className: "mr-2 hover:bg-blue-50", }; }; const buttonStyles = getButtonStyles(); if (messages === null) { return
Loading...
; } return ( {getTooltipContent()} ); }; export default FileTransferButton;