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

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

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

@@ -1,5 +1,5 @@
-import React from 'react'
-import { Folder, FileText, ArrowDown, ChevronRight, ChevronLeft, RefreshCw } from 'lucide-react'
+import React, { useState, useEffect, useCallback } from 'react'
+import { Folder, FileText, ChevronLeft, RefreshCw } from 'lucide-react'
 import { clsx } from 'clsx'
 import { fetchRemoteFiles, type RemoteFileItem } from '../../api'
 
@@ -22,12 +22,12 @@ export const RemoteFilePanel: React.FC<RemoteFilePanelProps> = ({
   onDownload,
   disabled,
 }) => {
-  const [currentPath, setCurrentPath] = React.useState('')
-  const [files, setFiles] = React.useState<RemoteFileItem[]>([])
-  const [loading, setLoading] = React.useState(false)
-  const [pathHistory, setPathHistory] = React.useState<string[]>([''])
+  const [currentPath, setCurrentPath] = useState('')
+  const [files, setFiles] = useState<RemoteFileItem[]>([])
+  const [loading, setLoading] = useState(false)
+  const [pathHistory, setPathHistory] = useState<string[]>([''])
 
-  const loadFiles = React.useCallback(async (path: string) => {
+  const loadFiles = useCallback(async (path: string) => {
     setLoading(true)
     try {
       const items = await fetchRemoteFiles(serverHost, port, path, password)
@@ -40,7 +40,7 @@ export const RemoteFilePanel: React.FC<RemoteFilePanelProps> = ({
     }
   }, [serverHost, port, password])
 
-  React.useEffect(() => {
+  useEffect(() => {
     loadFiles(currentPath)
   }, [currentPath, loadFiles])
 
@@ -55,8 +55,8 @@ export const RemoteFilePanel: React.FC<RemoteFilePanelProps> = ({
     }
   }
 
-  const handleGoInto = (folder: RemoteFileItem) => {
-    const newPath = currentPath ? `${currentPath}/${folder.name}` : folder.name
+  const handleGoInto = (file: RemoteFileItem) => {
+    const newPath = currentPath ? `${currentPath}/${file.name}` : file.name
     setPathHistory([...pathHistory, newPath])
     setCurrentPath(newPath)
     onSelect(null)
@@ -73,8 +73,8 @@ export const RemoteFilePanel: React.FC<RemoteFilePanelProps> = ({
   }
 
   return (
-    <div className="flex flex-col h-full border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
-      <div className="flex items-center justify-between px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+    <div className="flex flex-col h-full border border-gray-200 dark:border-gray-700 overflow-hidden">
+      <div className="h-12 flex items-center justify-between px-4 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
         <div className="flex items-center gap-2">
           <button
             onClick={handleGoBack}
@@ -82,23 +82,27 @@ export const RemoteFilePanel: React.FC<RemoteFilePanelProps> = ({
             className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed"
             title="返回上级"
           >
-            <ChevronLeft size={16} />
+            <ChevronLeft size={18} />
           </button>
-          <span className="text-sm font-medium text-gray-700 dark:text-gray-300 truncate max-w-[120px]">
+          <span className="text-base font-medium text-gray-700 dark:text-gray-300 truncate max-w-[180px]">
             {getDisplayPath()}
           </span>
         </div>
         <button
           onClick={handleRefresh}
           disabled={loading}
-          className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700"
+          className="p-1.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700"
           title="刷新"
         >
-          <RefreshCw size={14} className={clsx(loading && 'animate-spin')} />
+          <RefreshCw size={16} className={clsx(loading && 'animate-spin')} />
         </button>
       </div>
 
-      <div className="flex-1 overflow-y-auto p-2">
+      <div className="flex-1 overflow-y-auto p-2" onClick={(e) => {
+        if ((e.target as HTMLElement).classList.contains('space-y-1') || (e.target as HTMLElement).classList.contains('p-2')) {
+          onSelect(null)
+        }
+      }}>
         {loading ? (
           <div className="flex items-center justify-center h-full text-gray-400">
             加载中...
@@ -112,28 +116,23 @@ export const RemoteFilePanel: React.FC<RemoteFilePanelProps> = ({
             {files.map((file) => (
               <div
                 key={file.path}
-                onClick={() => onSelect(file.type === 'dir' ? null : file)}
+                onClick={() => onSelect(selectedFile?.path === file.path ? null : file)}
                 onDoubleClick={() => file.type === 'dir' && handleGoInto(file)}
                 className={clsx(
-                  'flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer transition-colors',
+                  'flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer transition-colors text-sm',
                   selectedFile?.path === file.path
-                    ? 'bg-blue-100 dark:bg-blue-900/30'
-                    : 'hover:bg-gray-100 dark:hover:bg-gray-700/50'
+                    ? 'bg-gray-100 text-gray-800 dark:bg-gray-700/60 dark:text-gray-200'
+                    : 'hover:bg-gray-100 dark:hover:bg-gray-700/50 text-gray-700 dark:text-gray-200'
                 )}
               >
                 {file.type === 'dir' ? (
-                  <Folder size={16} className="text-yellow-500 flex-shrink-0" />
+                  <Folder size={16} className="text-gray-500 dark:text-gray-400 shrink-0" />
                 ) : (
-                  <FileText size={16} className="text-gray-400 flex-shrink-0" />
+                  <FileText size={16} className="text-gray-500 dark:text-gray-400 shrink-0" />
                 )}
-                <span className="flex-1 truncate text-sm text-gray-700 dark:text-gray-300">
+                <span className="flex-1 truncate">
                   {file.name}
                 </span>
-                {selectedFile?.path === file.path && (
-                  <div className="w-4 h-4 rounded-full bg-blue-500 flex items-center justify-center">
-                    <span className="text-white text-xs">✓</span>
-                  </div>
-                )}
               </div>
             ))}
           </div>
@@ -144,9 +143,9 @@ export const RemoteFilePanel: React.FC<RemoteFilePanelProps> = ({
         <button
           onClick={onDownload}
           disabled={!selectedFile || disabled}
-          className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-green-500 hover:bg-green-600 disabled:bg-gray-300 dark:disabled:bg-gray-600 text-white rounded-lg transition-colors"
+          className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-gray-600 hover:bg-gray-700 disabled:bg-gray-400 dark:disabled:bg-gray-700 dark:disabled:text-gray-500 text-white rounded-lg transition-colors"
         >
-          <ArrowDown size={16} />
+          <span>↓</span>
           下载
         </button>
       </div>