feat(remote): 添加文件传输功能页面

- 新增 FileTransferPage 组件，支持本地与远程文件传输
- 添加 LocalFilePanel 和 RemoteFilePanel 组件
- 实现 TransferQueue 传输队列组件，支持拖动调整高度
- 优化侧边栏拖动条样式，修复拖动偏移问题
- 统一文件列表样式为灰白极简风格
- 支持 file-transfer-panel 协议打开文件传输标签页

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { X, ArrowUp, ArrowDown, CheckCircle, XCircle, Loader } from 'lucide-react'
+import { X, CheckCircle, XCircle, Loader } from 'lucide-react'
 import type { TransferItem } from '../../types'
 
 interface TransferQueueProps {
@@ -9,13 +9,22 @@ interface TransferQueueProps {
 }
 
 export const TransferQueue: React.FC<TransferQueueProps> = ({ transfers, onClear, onRemove }) => {
+  const hasActiveTransfers = transfers.some(t => t.status === 'transferring')
+  const hasCompletedOrErrorTransfers = transfers.some(t => t.status === 'completed' || t.status === 'error')
+
   if (transfers.length === 0) {
-    return null
+    return (
+      <div className="border-t border-gray-200 dark:border-gray-700 px-3 py-2">
+        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+          传输队列
+        </span>
+      </div>
+    )
   }
 
   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">
+    <div className="h-full flex flex-col border-t border-gray-200 dark:border-gray-700 px-3 py-2">
+      <div className="flex items-center justify-between mb-2 shrink-0">
         <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
           传输队列 ({transfers.length})
         </span>
@@ -26,17 +35,15 @@ export const TransferQueue: React.FC<TransferQueueProps> = ({ transfers, onClear
           清空
         </button>
       </div>
-      <div className="space-y-2 max-h-32 overflow-y-auto">
+      <div className="flex-1 overflow-y-auto space-y-2 min-h-0">
         {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="text-gray-500">
+              {transfer.type === 'upload' ? '↑' : '↓'}
+            </span>
             <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
@@ -44,8 +51,8 @@ export const TransferQueue: React.FC<TransferQueueProps> = ({ transfers, onClear
                   transfer.status === 'error'
                     ? 'bg-red-500'
                     : transfer.status === 'completed'
-                    ? 'bg-green-500'
-                    : 'bg-blue-500'
+                    ? 'bg-gray-500'
+                    : 'bg-gray-600'
                 }`}
                 style={{ width: `${transfer.progress}%` }}
               />
@@ -57,8 +64,8 @@ export const TransferQueue: React.FC<TransferQueueProps> = ({ transfers, onClear
                 ? '失败'
                 : `${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 === 'transferring' && <Loader size={14} className="animate-spin text-gray-500" />}
+            {transfer.status === 'completed' && <CheckCircle size={14} className="text-gray-500" />}
             {transfer.status === 'error' && <XCircle size={14} className="text-red-500" />}
             <button
               onClick={() => onRemove(transfer.id)}