feat(remote): 支持浏览系统磁盘目录

- 添加 getDrives() 方法获取磁盘驱动器列表
- 修改 browseDirectory() 支持 allowSystem 参数浏览系统路径
- 添加 /api/files/drives 路由
- 修改前端 RemoteFilePanel 支持显示驱动器和系统目录浏览

src/modules/remote/api.ts

@@ -72,9 +72,10 @@ export const fetchRemoteFiles = async (
   serverHost: string,
   port: number,
   path: string,
-  password?: string
+  password?: string,
+  allowSystem: boolean = true
 ): Promise<RemoteFileItem[]> => {
-  let url = `http://${serverHost}:${port}/api/files/browse?path=${encodeURIComponent(path)}`
+  let url = `http://${serverHost}:${port}/api/files/browse?path=${encodeURIComponent(path)}&allowSystem=${allowSystem}`
   if (password) {
     url += `&password=${encodeURIComponent(password)}`
   }
@@ -93,6 +94,30 @@ export const fetchRemoteFiles = async (
   }))
 }
 
+export const fetchRemoteDrives = async (
+  serverHost: string,
+  port: number,
+  password?: string
+): Promise<RemoteFileItem[]> => {
+  let url = `http://${serverHost}:${port}/api/files/drives`
+  if (password) {
+    url += `?password=${encodeURIComponent(password)}`
+  }
+  const response = await fetch(url)
+  if (!response.ok) {
+    throw new Error(`Failed to fetch remote drives: ${response.statusText}`)
+  }
+  const data = await response.json()
+  const items = data.items || []
+  return items.map((item: { name: string; isDirectory: boolean; size: number }) => ({
+    name: item.name,
+    path: item.name,
+    type: item.isDirectory ? 'dir' : 'file',
+    size: item.size,
+    modified: '',
+  }))
+}
+
 export const uploadFileToRemote = async (
   serverHost: string,
   port: number,

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react'
-import { Folder, FileText, ChevronLeft, RefreshCw } from 'lucide-react'
+import { Folder, FileText, ChevronLeft, RefreshCw, HardDrive } from 'lucide-react'
 import { clsx } from 'clsx'
-import { fetchRemoteFiles, type RemoteFileItem } from '../../api'
+import { fetchRemoteFiles, fetchRemoteDrives, type RemoteFileItem } from '../../api'
 
 interface RemoteFilePanelProps {
   serverHost: string
@@ -26,12 +26,28 @@ export const RemoteFilePanel: React.FC<RemoteFilePanelProps> = ({
   const [files, setFiles] = useState<RemoteFileItem[]>([])
   const [loading, setLoading] = useState(false)
   const [pathHistory, setPathHistory] = useState<string[]>([''])
+  const [showDrives, setShowDrives] = useState(true)
+
+  const loadDrives = useCallback(async () => {
+    setLoading(true)
+    try {
+      const drives = await fetchRemoteDrives(serverHost, port, password)
+      setFiles(drives)
+      setShowDrives(true)
+    } catch (err) {
+      console.error('Failed to load remote drives:', err)
+      setFiles([])
+    } finally {
+      setLoading(false)
+    }
+  }, [serverHost, port, password])
 
   const loadFiles = useCallback(async (path: string) => {
     setLoading(true)
     try {
-      const items = await fetchRemoteFiles(serverHost, port, path, password)
+      const items = await fetchRemoteFiles(serverHost, port, path, password, true)
       setFiles(items)
+      setShowDrives(false)
     } catch (err) {
       console.error('Failed to load remote files:', err)
       setFiles([])
@@ -41,10 +57,13 @@ export const RemoteFilePanel: React.FC<RemoteFilePanelProps> = ({
   }, [serverHost, port, password])
 
   useEffect(() => {
-    loadFiles(currentPath)
-  }, [currentPath, loadFiles])
+    loadDrives()
+  }, [loadDrives])
 
   const handleGoBack = () => {
+    if (showDrives) {
+      return
+    }
     if (pathHistory.length > 1) {
       const newHistory = [...pathHistory]
       newHistory.pop()
@@ -52,24 +71,45 @@ export const RemoteFilePanel: React.FC<RemoteFilePanelProps> = ({
       setPathHistory(newHistory)
       setCurrentPath(prevPath)
       onSelect(null)
+    } else {
+      loadDrives()
     }
   }
 
   const handleGoInto = (file: RemoteFileItem) => {
-    const newPath = currentPath ? `${currentPath}/${file.name}` : file.name
-    setPathHistory([...pathHistory, newPath])
-    setCurrentPath(newPath)
+    if (showDrives) {
+      const newPath = file.path + '\\'
+      setPathHistory(['', newPath])
+      setCurrentPath(newPath)
+      loadFiles(newPath)
+    } else {
+      const newPath = currentPath ? `${currentPath}\\${file.name}` : file.name
+      setPathHistory([...pathHistory, newPath])
+      setCurrentPath(newPath)
+      loadFiles(newPath)
+    }
     onSelect(null)
   }
 
   const handleRefresh = () => {
-    loadFiles(currentPath)
+    if (showDrives) {
+      loadDrives()
+    } else {
+      loadFiles(currentPath)
+    }
+  }
+
+  const handleGoToRoot = () => {
+    setPathHistory([''])
+    setCurrentPath('')
+    loadDrives()
+    onSelect(null)
   }
 
   const getDisplayPath = () => {
+    if (showDrives) return '选择驱动器'
     if (!currentPath) return '远程文件'
-    const parts = currentPath.split('/')
-    return parts[parts.length - 1] || currentPath
+    return currentPath
   }
 
   return (
@@ -78,13 +118,20 @@ export const RemoteFilePanel: React.FC<RemoteFilePanelProps> = ({
         <div className="flex items-center gap-2">
           <button
             onClick={handleGoBack}
-            disabled={pathHistory.length <= 1}
+            disabled={showDrives}
             className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed"
-            title="返回上级"
+            title={showDrives ? '已是根目录' : '返回上级'}
           >
             <ChevronLeft size={18} />
           </button>
-          <span className="text-base font-medium text-gray-700 dark:text-gray-300 truncate max-w-[180px]">
+          <button
+            onClick={handleGoToRoot}
+            className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700"
+            title="回到驱动器列表"
+          >
+            <HardDrive size={18} />
+          </button>
+          <span className="text-base font-medium text-gray-700 dark:text-gray-300 truncate max-w-[150px]">
             {getDisplayPath()}
           </span>
         </div>
@@ -113,28 +160,33 @@ export const RemoteFilePanel: React.FC<RemoteFilePanelProps> = ({
           </div>
         ) : (
           <div className="space-y-1">
-            {files.map((file) => (
-              <div
-                key={file.path}
-                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-md cursor-pointer transition-colors text-sm',
-                  selectedFile?.path === file.path
-                    ? '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-gray-500 dark:text-gray-400 shrink-0" />
-                ) : (
-                  <FileText size={16} className="text-gray-500 dark:text-gray-400 shrink-0" />
-                )}
-                <span className="flex-1 truncate">
-                  {file.name}
-                </span>
-              </div>
-            ))}
+            {files.map((file) => {
+              const isDrive = showDrives && file.name.length === 2 && file.name.endsWith(':')
+              return (
+                <div
+                  key={file.path}
+                  onClick={() => onSelect(selectedFile?.path === file.path ? null : file)}
+                  onDoubleClick={() => (file.type === 'dir' || isDrive) && handleGoInto(file)}
+                  className={clsx(
+                    'flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer transition-colors text-sm',
+                    selectedFile?.path === file.path
+                      ? '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'
+                  )}
+                >
+                  {isDrive ? (
+                    <HardDrive size={16} className="text-blue-500 dark:text-blue-400 shrink-0" />
+                  ) : file.type === 'dir' ? (
+                    <Folder size={16} className="text-gray-500 dark:text-gray-400 shrink-0" />
+                  ) : (
+                    <FileText size={16} className="text-gray-500 dark:text-gray-400 shrink-0" />
+                  )}
+                  <span className="flex-1 truncate">
+                    {file.name}
+                  </span>
+                </div>
+              )
+            })}
           </div>
         )}
       </div>