From afe43c5ff9ec4c3eb5db2dc62dcae81e5dbe64a5 Mon Sep 17 00:00:00 2001
From: ssdfasd <2156608475@qq.com>
Date: Sun, 8 Mar 2026 17:03:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(remote):=20=E6=B7=BB=E5=8A=A0=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E4=BC=A0=E8=BE=93=E5=8A=9F=E8=83=BD=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 FileTransferPage 组件，支持本地与远程文件传输
- 添加 LocalFilePanel 和 RemoteFilePanel 组件
- 实现 TransferQueue 传输队列组件，支持拖动调整高度
- 优化侧边栏拖动条样式，修复拖动偏移问题
- 统一文件列表样式为灰白极简风格
- 支持 file-transfer-panel 协议打开文件传输标签页
---
 .../file-system/Sidebar/Sidebar.tsx           |   2 +-
 .../tabs/TabContentCache/TabContentCache.tsx  |  24 +++-
 src/hooks/ui/useSidebarResize.ts              |   7 +-
 src/modules/remote/RemotePage.tsx             |  11 +-
 src/modules/remote/api.ts                     |  80 ++++++++++-
 ...TransferPanel.tsx => FileTransferPage.tsx} | 130 ++++++++++--------
 .../file-transfer/LocalFilePanel.tsx          |  70 +++++-----
 .../file-transfer/RemoteFilePanel.tsx         |  61 ++++----
 .../file-transfer/TransferQueue.tsx           |  35 +++--
 src/modules/remote/types.ts                   |  20 +++
 src/stores/tabStore.ts                        |   1 +
 11 files changed, 294 insertions(+), 147 deletions(-)
 rename src/modules/remote/components/file-transfer/{FileTransferPanel.tsx => FileTransferPage.tsx} (52%)

diff --git a/src/components/file-system/Sidebar/Sidebar.tsx b/src/components/file-system/Sidebar/Sidebar.tsx
index 5236563..a8ba7d1 100644
--- a/src/components/file-system/Sidebar/Sidebar.tsx
+++ b/src/components/file-system/Sidebar/Sidebar.tsx
@@ -216,7 +216,7 @@ const SidebarContent = ({
       )}
 
       <div
-        className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize z-10"
+        className="absolute right-0 top-0 bottom-0 w-1 hover:bg-gray-300 dark:hover:bg-gray-600 cursor-col-resize transition-colors z-10"
         onMouseDown={onResizeStart}
       />
     </div>
diff --git a/src/components/tabs/TabContentCache/TabContentCache.tsx b/src/components/tabs/TabContentCache/TabContentCache.tsx
index e76d77a..e1ac657 100644
--- a/src/components/tabs/TabContentCache/TabContentCache.tsx
+++ b/src/components/tabs/TabContentCache/TabContentCache.tsx
@@ -4,6 +4,8 @@ import type { TOCItem } from '@/lib/utils'
 import { matchModule } from '@/lib/module-registry'
 import { MarkdownTabPage } from '../MarkdownTabPage'
 import { RemoteTabPage } from '@/modules/remote/RemoteTabPage'
+import { FileTransferPage } from '@/modules/remote/components/file-transfer/FileTransferPage'
+import { useTabStore } from '@/stores'
 
 interface TabContentCacheProps {
   openFiles: FileItem[]
@@ -18,6 +20,8 @@ export const TabContentCache: React.FC<TabContentCacheProps> = ({
   containerClassName = '',
   onTocUpdated
 }) => {
+  const { closeFile } = useTabStore()
+
   const handleTocUpdate = (filePath: string) => (toc: TOCItem[]) => {
     if (activeFile?.path === filePath) {
       onTocUpdated?.(filePath, toc)
@@ -31,6 +35,21 @@ export const TabContentCache: React.FC<TabContentCacheProps> = ({
       return <Component />
     }
     
+    // 检查是否是文件传输标签页
+    if (file.path.startsWith('file-transfer-panel')) {
+      const queryString = file.path.includes('?') ? file.path.split('?')[1] : ''
+      const urlParams = new URLSearchParams(queryString)
+      const serverHost = urlParams.get('host') || ''
+      const port = parseInt(urlParams.get('port') || '3000', 10)
+      return (
+        <FileTransferPage
+          serverHost={serverHost}
+          port={port}
+          onClose={() => closeFile(file)}
+        />
+      )
+    }
+    
     // 检查是否是远程桌面标签页
     if (file.path.startsWith('remote-desktop://') || file.path.startsWith('remote-git://')) {
       const urlParams = new URLSearchParams(file.path.split('?')[1])
@@ -46,12 +65,15 @@ export const TabContentCache: React.FC<TabContentCacheProps> = ({
     <div className="h-full w-full overflow-hidden">
       {openFiles.map((file) => {
         const isActive = activeFile?.path === file.path
+        
+        const isFileTransfer = file.path.startsWith('file-transfer-panel')
+        const paddingClass = isFileTransfer ? '' : containerClassName
 
         return (
           <div
             key={file.path}
             data-tab-scroll-container={file.path}
-            className={`h-full w-full overflow-y-auto ${containerClassName}`}
+            className={`h-full w-full ${isFileTransfer ? 'overflow-hidden' : 'overflow-y-auto'} ${paddingClass}`}
             style={{ display: isActive ? 'block' : 'none' }}
             aria-hidden={!isActive}
           >
diff --git a/src/hooks/ui/useSidebarResize.ts b/src/hooks/ui/useSidebarResize.ts
index 26acccd..cae74c2 100644
--- a/src/hooks/ui/useSidebarResize.ts
+++ b/src/hooks/ui/useSidebarResize.ts
@@ -1,11 +1,14 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
 export const useSidebarResize = (initialWidth: number = 250) => {
   const [sidebarWidth, setSidebarWidth] = useState(initialWidth)
   const [isResizing, setIsResizing] = useState(false)
+  const offsetX = useRef(0)
 
   const startResizing = useCallback((e: React.MouseEvent) => {
     e.preventDefault()
+    const rect = (e.target as HTMLElement).getBoundingClientRect()
+    offsetX.current = e.clientX - rect.left
     setIsResizing(true)
   }, [])
 
@@ -14,7 +17,7 @@ export const useSidebarResize = (initialWidth: number = 250) => {
 
     const stopResizing = () => setIsResizing(false)
     const resize = (e: MouseEvent) => {
-      const newWidth = e.clientX
+      const newWidth = e.clientX - offsetX.current
       if (newWidth > 150 && newWidth < 600) {
         setSidebarWidth(newWidth)
       }
diff --git a/src/modules/remote/RemotePage.tsx b/src/modules/remote/RemotePage.tsx
index 4f9e648..705ed56 100644
--- a/src/modules/remote/RemotePage.tsx
+++ b/src/modules/remote/RemotePage.tsx
@@ -187,9 +187,14 @@ export const RemotePage: React.FC = () => {
       setShowConfig(true)
       return
     }
-    const url = `http://${selectedConfig.serverHost}:${selectedConfig.desktopPort}/files`
-    const deviceName = selectedConfig.deviceName ? ` - ${selectedConfig.deviceName}` : ''
-    const fileItem = createRemoteDesktopFileItem(url, `文件传输${deviceName}`, selectedConfig.deviceName)
+    const url = `file-transfer-panel?host=${encodeURIComponent(selectedConfig.serverHost)}&port=${selectedConfig.desktopPort}`
+    const fileItem: FileItem = {
+      name: `文件传输 - ${selectedConfig.deviceName}`,
+      path: url,
+      type: 'file',
+      size: 0,
+      modified: new Date().toISOString(),
+    }
     selectFile(fileItem)
   }
 
diff --git a/src/modules/remote/api.ts b/src/modules/remote/api.ts
index 225cfaa..dc23729 100644
--- a/src/modules/remote/api.ts
+++ b/src/modules/remote/api.ts
@@ -1,6 +1,10 @@
 import { getModuleApi } from '@/lib/module-registry'
 import { type RemoteEndpoints } from '@shared/modules/remote'
-import type { RemoteConfig } from './types'
+import type { RemoteConfig, RemoteFileItem } from './types'
+import { fetchFiles as fetchSystemFiles } from '@/lib/api'
+
+export type { RemoteFileItem } from './types'
+export { fetchSystemFiles }
 
 const getApi = () => {
   const api = getModuleApi<RemoteEndpoints>('remote')
@@ -37,3 +41,77 @@ export const getDeviceData = async (deviceName?: string): Promise<{ lastConnecte
 export const saveDeviceData = async (deviceName: string, lastConnected: string): Promise<void> => {
   await getApi().post<null>('saveData', { deviceName, lastConnected })
 }
+
+export const fetchRemoteFiles = async (
+  serverHost: string,
+  port: number,
+  path: string,
+  password?: string
+): Promise<RemoteFileItem[]> => {
+  const url = `http://${serverHost}:${port}/api/files?path=${encodeURIComponent(path)}`
+  const response = await fetch(url)
+  if (!response.ok) {
+    throw new Error(`Failed to fetch remote files: ${response.statusText}`)
+  }
+  const data = await response.json()
+  return data.items || []
+}
+
+export const uploadFileToRemote = async (
+  serverHost: string,
+  port: number,
+  file: File,
+  remotePath: string,
+  password?: string,
+  onProgress?: (progress: number) => void
+): Promise<void> => {
+  const url = `http://${serverHost}:${port}/api/files/upload`
+  const formData = new FormData()
+  formData.append('file', file)
+  if (remotePath) {
+    formData.append('path', remotePath)
+  }
+
+  const xhr = new XMLHttpRequest()
+  
+  return new Promise((resolve, reject) => {
+    xhr.upload.addEventListener('progress', (event) => {
+      if (event.lengthComputable && onProgress) {
+        const progress = Math.round((event.loaded / event.total) * 100)
+        onProgress(progress)
+      }
+    })
+
+    xhr.addEventListener('load', () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        resolve()
+      } else {
+        reject(new Error(`Upload failed: ${xhr.statusText}`))
+      }
+    })
+
+    xhr.addEventListener('error', () => {
+      reject(new Error('Upload failed'))
+    })
+
+    xhr.open('POST', url)
+    xhr.send(formData)
+  })
+}
+
+export const downloadFileFromRemote = async (
+  serverHost: string,
+  port: number,
+  fileName: string,
+  remotePath: string,
+  password?: string,
+  onProgress?: (progress: number) => void
+): Promise<Blob> => {
+  const url = `http://${serverHost}:${port}/api/files/download?path=${encodeURIComponent(remotePath)}&name=${encodeURIComponent(fileName)}`
+  
+  const response = await fetch(url)
+  if (!response.ok) {
+    throw new Error(`Download failed: ${response.statusText}`)
+  }
+  return await response.blob()
+}
diff --git a/src/modules/remote/components/file-transfer/FileTransferPanel.tsx b/src/modules/remote/components/file-transfer/FileTransferPage.tsx
similarity index 52%
rename from src/modules/remote/components/file-transfer/FileTransferPanel.tsx
rename to src/modules/remote/components/file-transfer/FileTransferPage.tsx
index d1c3f47..6463020 100644
--- a/src/modules/remote/components/file-transfer/FileTransferPanel.tsx
+++ b/src/modules/remote/components/file-transfer/FileTransferPage.tsx
@@ -1,31 +1,28 @@
-import React from 'react'
-import { X } from 'lucide-react'
+import React, { useState, useCallback, useRef, useEffect } from 'react'
+import type { FileItem } from '@/lib/api'
+import { type RemoteFileItem, uploadFileToRemote, downloadFileFromRemote } from '../../api'
+import { type TransferItem } from '../../types'
 import { LocalFilePanel } from './LocalFilePanel'
 import { RemoteFilePanel } from './RemoteFilePanel'
 import { TransferQueue } from './TransferQueue'
-import type { FileItem } from '@/lib/api'
-import { type RemoteFileItem, uploadFileToRemote, downloadFileFromRemote } from '../../api'
-import type { TransferItem } from '../../types'
 
-interface FileTransferPanelProps {
+interface FileTransferPageProps {
   serverHost: string
   port: number
-  password?: string
   onClose: () => void
 }
 
-export const FileTransferPanel: React.FC<FileTransferPanelProps> = ({
-  serverHost,
-  port,
-  password,
-  onClose,
-}) => {
-  const [localSelected, setLocalSelected] = React.useState<FileItem | null>(null)
-  const [remoteSelected, setRemoteSelected] = React.useState<RemoteFileItem | null>(null)
-  const [transfers, setTransfers] = React.useState<TransferItem[]>([])
-  const [transferring, setTransferring] = React.useState(false)
+export const FileTransferPage: React.FC<FileTransferPageProps> = ({ serverHost, port, onClose }) => {
+  const [localSelected, setLocalSelected] = useState<FileItem | null>(null)
+  const [remoteSelected, setRemoteSelected] = useState<RemoteFileItem | null>(null)
+  const [transfers, setTransfers] = useState<TransferItem[]>([])
+  const [transferring, setTransferring] = useState(false)
+  const [transferQueueHeight, setTransferQueueHeight] = useState(128)
+  const [isDragging, setIsDragging] = useState(false)
+  const dragStartY = useRef(0)
+  const dragStartHeight = useRef(128)
 
-  const handleUpload = async () => {
+  const handleUpload = useCallback(async () => {
     if (!localSelected || !localSelected.path) return
 
     setTransferring(true)
@@ -45,7 +42,7 @@ export const FileTransferPanel: React.FC<FileTransferPanelProps> = ({
       const blob = await response.blob()
       const file = new File([blob], localSelected.name, { type: blob.type })
 
-      await uploadFileToRemote(serverHost, port, file, '', password, (progress) => {
+      await uploadFileToRemote(serverHost, port, file, '', undefined, (progress) => {
         setTransfers((prev) =>
           prev.map((t) => (t.id === transferId ? { ...t, progress } : t))
         )
@@ -69,9 +66,9 @@ export const FileTransferPanel: React.FC<FileTransferPanelProps> = ({
     } finally {
       setTransferring(false)
     }
-  }
+  }, [localSelected, serverHost, port])
 
-  const handleDownload = async () => {
+  const handleDownload = useCallback(async () => {
     if (!remoteSelected) return
 
     setTransferring(true)
@@ -87,7 +84,7 @@ export const FileTransferPanel: React.FC<FileTransferPanelProps> = ({
     setTransfers((prev) => [...prev, newTransfer])
 
     try {
-      await downloadFileFromRemote(serverHost, port, remoteSelected.name, '', password, (progress) => {
+      await downloadFileFromRemote(serverHost, port, remoteSelected.name, '', undefined, (progress) => {
         setTransfers((prev) =>
           prev.map((t) => (t.id === transferId ? { ...t, progress } : t))
         )
@@ -111,7 +108,7 @@ export const FileTransferPanel: React.FC<FileTransferPanelProps> = ({
     } finally {
       setTransferring(false)
     }
-  }
+  }, [remoteSelected, serverHost, port])
 
   const handleClearTransfers = () => {
     setTransfers((prev) => prev.filter((t) => t.status === 'transferring'))
@@ -121,43 +118,64 @@ export const FileTransferPanel: React.FC<FileTransferPanelProps> = ({
     setTransfers((prev) => prev.filter((t) => t.id !== id))
   }
 
+  const handleDragStart = useCallback((e: React.MouseEvent) => {
+    setIsDragging(true)
+    dragStartY.current = e.clientY
+    dragStartHeight.current = transferQueueHeight
+  }, [transferQueueHeight])
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDragging) return
+      const deltaY = dragStartY.current - e.clientY
+      const newHeight = Math.max(60, Math.min(400, dragStartHeight.current + deltaY))
+      setTransferQueueHeight(newHeight)
+    }
+
+    const handleMouseUp = () => {
+      setIsDragging(false)
+    }
+
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove)
+      document.addEventListener('mouseup', handleMouseUp)
+    }
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+    }
+  }, [isDragging])
+
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <div className="w-[900px] h-[600px] max-w-[95vw] max-h-[90vh] bg-white dark:bg-gray-900 rounded-xl shadow-2xl flex flex-col overflow-hidden">
-        <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700">
-          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-200">
-            文件传输
-          </h2>
-          <button
-            onClick={onClose}
-            className="p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500"
-          >
-            <X size={20} />
-          </button>
+    <div className="absolute inset-0 flex flex-col bg-gray-50 dark:bg-gray-900">
+      <div className="flex-1 flex min-h-0">
+        <div className="flex-1 min-w-0">
+          <LocalFilePanel
+            selectedFile={localSelected}
+            onSelect={setLocalSelected}
+            onUpload={handleUpload}
+            disabled={transferring}
+          />
         </div>
-
-        <div className="flex-1 flex gap-4 p-4 overflow-hidden">
-          <div className="flex-1 min-w-0">
-            <LocalFilePanel
-              selectedFile={localSelected}
-              onSelect={setLocalSelected}
-              onUpload={handleUpload}
-              disabled={transferring}
-            />
-          </div>
-          <div className="flex-1 min-w-0">
-            <RemoteFilePanel
-              serverHost={serverHost}
-              port={port}
-              password={password}
-              selectedFile={remoteSelected}
-              onSelect={setRemoteSelected}
-              onDownload={handleDownload}
-              disabled={transferring}
-            />
-          </div>
+        <div className="flex-1 min-w-0">
+          <RemoteFilePanel
+            serverHost={serverHost}
+            port={port}
+            selectedFile={remoteSelected}
+            onSelect={setRemoteSelected}
+            onDownload={handleDownload}
+            disabled={transferring}
+          />
         </div>
+      </div>
 
+      <div
+        className="h-2 -my-1 cursor-row-resize hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors relative z-10"
+        onMouseDown={handleDragStart}
+      />
+
+      <div style={{ height: transferQueueHeight }} className="flex-shrink-0">
         <TransferQueue
           transfers={transfers}
           onClear={handleClearTransfers}
diff --git a/src/modules/remote/components/file-transfer/LocalFilePanel.tsx b/src/modules/remote/components/file-transfer/LocalFilePanel.tsx
index e763b09..05a5849 100644
--- a/src/modules/remote/components/file-transfer/LocalFilePanel.tsx
+++ b/src/modules/remote/components/file-transfer/LocalFilePanel.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
-import { Folder, FileText, ArrowUp, ChevronRight, ChevronLeft, RefreshCw, HardDrive } from 'lucide-react'
+import React, { useState, useEffect, useCallback } from 'react'
+import { Folder, FileText, ChevronLeft, RefreshCw } from 'lucide-react'
 import { clsx } from 'clsx'
 import type { FileItem } from '@/lib/api'
-import { fetchSystemFiles } from '@/lib/api'
+import { fetchSystemFiles } from '../../api'
 
 interface LocalFilePanelProps {
   selectedFile: FileItem | null
@@ -17,12 +17,12 @@ export const LocalFilePanel: React.FC<LocalFilePanelProps> = ({
   onUpload,
   disabled,
 }) => {
-  const [currentPath, setCurrentPath] = React.useState('')
-  const [files, setFiles] = React.useState<FileItem[]>([])
-  const [loading, setLoading] = React.useState(false)
-  const [pathHistory, setPathHistory] = React.useState<string[]>([''])
+  const [currentPath, setCurrentPath] = useState('')
+  const [files, setFiles] = useState<FileItem[]>([])
+  const [loading, setLoading] = useState(false)
+  const [pathHistory, setPathHistory] = useState<string[]>([''])
 
-  const loadFiles = React.useCallback(async (systemPath: string) => {
+  const loadFiles = useCallback(async (systemPath: string) => {
     setLoading(true)
     try {
       const items = await fetchSystemFiles(systemPath)
@@ -34,7 +34,7 @@ export const LocalFilePanel: React.FC<LocalFilePanelProps> = ({
     }
   }, [])
 
-  React.useEffect(() => {
+  useEffect(() => {
     loadFiles(currentPath)
   }, [currentPath, loadFiles])
 
@@ -49,9 +49,9 @@ export const LocalFilePanel: React.FC<LocalFilePanelProps> = ({
     }
   }
 
-  const handleGoInto = (folder: FileItem) => {
-    setPathHistory([...pathHistory, folder.path])
-    setCurrentPath(folder.path)
+  const handleGoInto = (file: FileItem) => {
+    setPathHistory([...pathHistory, file.path])
+    setCurrentPath(file.path)
     onSelect(null)
   }
 
@@ -66,14 +66,9 @@ export const LocalFilePanel: React.FC<LocalFilePanelProps> = ({
     return parts[parts.length - 1] || currentPath
   }
 
-  const getFullPathDisplay = () => {
-    if (!currentPath) return ''
-    return currentPath
-  }
-
   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}
@@ -81,23 +76,27 @@ export const LocalFilePanel: React.FC<LocalFilePanelProps> = ({
             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">
             加载中...
@@ -111,28 +110,23 @@ export const LocalFilePanel: React.FC<LocalFilePanelProps> = ({
             {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>
@@ -143,9 +137,9 @@ export const LocalFilePanel: React.FC<LocalFilePanelProps> = ({
         <button
           onClick={onUpload}
           disabled={!selectedFile || disabled}
-          className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-blue-500 hover:bg-blue-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"
         >
-          <ArrowUp size={16} />
+          <span>↑</span>
           上传
         </button>
       </div>
diff --git a/src/modules/remote/components/file-transfer/RemoteFilePanel.tsx b/src/modules/remote/components/file-transfer/RemoteFilePanel.tsx
index 6d5156e..667ec24 100644
--- a/src/modules/remote/components/file-transfer/RemoteFilePanel.tsx
+++ b/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>
diff --git a/src/modules/remote/components/file-transfer/TransferQueue.tsx b/src/modules/remote/components/file-transfer/TransferQueue.tsx
index 90cfd21..a5bc0dd 100644
--- a/src/modules/remote/components/file-transfer/TransferQueue.tsx
+++ b/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)}
diff --git a/src/modules/remote/types.ts b/src/modules/remote/types.ts
index 210e67e..e3bb1b1 100644
--- a/src/modules/remote/types.ts
+++ b/src/modules/remote/types.ts
@@ -19,3 +19,23 @@ export interface RemoteDevice {
 export interface RemoteConfig {
   devices: RemoteDevice[]
 }
+
+export interface RemoteFileItem {
+  name: string
+  path: string
+  type: 'file' | 'dir'
+  size: number
+  modified?: string
+}
+
+export type TransferStatus = 'transferring' | 'completed' | 'error'
+
+export interface TransferItem {
+  id: string
+  name: string
+  type: 'upload' | 'download'
+  size: number
+  progress: number
+  status: TransferStatus
+  error?: string
+}
diff --git a/src/stores/tabStore.ts b/src/stores/tabStore.ts
index 1782cd5..fada79f 100644
--- a/src/stores/tabStore.ts
+++ b/src/stores/tabStore.ts
@@ -419,6 +419,7 @@ export const isSpecialTab = (file: FileItem | null): boolean => {
   if (!file) return false
   if (file.path.startsWith('remote-desktop://')) return true
   if (file.path.startsWith('remote-git://')) return true
+  if (file.path.startsWith('file-transfer-panel')) return true
   return matchModule(file) !== undefined
 }