Initial commit

src/modules/remote/components/file-transfer/TransferQueue.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import { X, ArrowUp, ArrowDown, CheckCircle, XCircle, Loader } from 'lucide-react'
+import type { TransferItem } from '../../types'
+
+interface TransferQueueProps {
+  transfers: TransferItem[]
+  onClear: () => void
+  onRemove: (id: string) => void
+}
+
+export const TransferQueue: React.FC<TransferQueueProps> = ({ transfers, onClear, onRemove }) => {
+  if (transfers.length === 0) {
+    return null
+  }
+
+  return (
+    <div className="border-t border-gray-200 dark:border-gray-700 p-3 bg-gray-50 dark:bg-gray-800/50">
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+          传输队列 ({transfers.length})
+        </span>
+        <button
+          onClick={onClear}
+          className="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+        >
+          清空
+        </button>
+      </div>
+      <div className="space-y-2 max-h-32 overflow-y-auto">
+        {transfers.map((transfer) => (
+          <div
+            key={transfer.id}
+            className="flex items-center gap-2 text-sm bg-white dark:bg-gray-700 rounded px-2 py-1"
+          >
+            {transfer.type === 'upload' ? (
+              <ArrowUp size={14} className="text-blue-500" />
+            ) : (
+              <ArrowDown size={14} className="text-green-500" />
+            )}
+            <span className="flex-1 truncate max-w-[120px]">{transfer.name}</span>
+            <div className="flex-1 h-2 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
+              <div
+                className={`h-full transition-all ${
+                  transfer.status === 'error'
+                    ? 'bg-red-500'
+                    : transfer.status === 'completed'
+                    ? 'bg-green-500'
+                    : 'bg-blue-500'
+                }`}
+                style={{ width: `${transfer.progress}%` }}
+              />
+            </div>
+            <span className="text-xs text-gray-500 w-12">
+              {transfer.status === 'completed'
+                ? '完成'
+                : transfer.status === 'error'
+                ? '失败'
+                : `${transfer.progress}%`}
+            </span>
+            {transfer.status === 'transferring' && <Loader size={14} className="animate-spin text-blue-500" />}
+            {transfer.status === 'completed' && <CheckCircle size={14} className="text-green-500" />}
+            {transfer.status === 'error' && <XCircle size={14} className="text-red-500" />}
+            <button
+              onClick={() => onRemove(transfer.id)}
+              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+            >
+              <X size={12} />
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}