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

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

api/modules/remote/service.ts

@@ -73,6 +73,7 @@ export class RemoteService {
             serverHost: deviceConfig.serverHost || '',
             desktopPort: deviceConfig.desktopPort || 3000,
             gitPort: deviceConfig.gitPort || 3001,
+            password: deviceConfig.password || '',
           }
         } catch {
           return {
@@ -81,6 +82,7 @@ export class RemoteService {
             serverHost: '',
             desktopPort: 3000,
             gitPort: 3001,
+            password: '',
           }
         }
       })
@@ -114,6 +116,7 @@ export class RemoteService {
         serverHost: device.serverHost,
         desktopPort: device.desktopPort,
         gitPort: device.gitPort,
+        password: device.password || '',
       }
       await fs.writeFile(deviceConfigPath, JSON.stringify(deviceConfig, null, 2), 'utf-8')
     }

remote/src/routes/files.js

@@ -17,14 +17,25 @@ router.get('/', (req, res) => {
   }
 });
 
+router.get('/drives', (req, res) => {
+  try {
+    const drives = fileService.getDrives();
+    res.json({ items: drives });
+  } catch (error) {
+    logger.error('Failed to get drives', { error: error.message });
+    res.status(500).json({ error: 'Failed to get drives' });
+  }
+});
+
 router.get('/browse', (req, res) => {
   try {
-    const path = req.query.path || '';
+    const filePath = req.query.path || '';
-    const result = fileService.browseDirectory(path);
+    const allowSystem = req.query.allowSystem === 'true';
+    const result = fileService.browseDirectory(filePath, allowSystem);
     res.json(result);
   } catch (error) {
-    logger.error('Failed to browse directory', { error: error.message });
+    logger.error('Failed to browse directory', { error: error.message, stack: error.stack });
-    res.status(500).json({ error: 'Failed to browse directory' });
+    res.status(500).json({ error: error.message || 'Failed to browse directory' });
   }
 });
 

remote/src/services/file/FileService.js

@@ -136,48 +136,78 @@ class FileService {
     }
   }
 
-  browseDirectory(relativePath = '') {
+  getDrives() {
-    try {
+    const drives = [];
+    const letters = 'CDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
+    for (const letter of letters) {
+      const drivePath = `${letter}:\\`;
+      try {
+        fs.accessSync(drivePath);
+        drives.push({ name: `${letter}:`, isDirectory: true, size: 0 });
+      } catch {}
+    }
+    return drives;
+  }
+
+  browseDirectory(relativePath = '', allowSystem = false) {
+    let targetDir;
+    let currentPath;
+
+    if (allowSystem) {
+      currentPath = path.normalize(relativePath || '').replace(/^(\.\.(\/|\\|$))+/, '');
+      if (!currentPath) {
+        currentPath = '';
+      }
+      targetDir = currentPath || 'C:\\';
+    } else {
       const safePath = path.normalize(relativePath || '').replace(/^(\.\.(\/|\\|$))+/, '');
-      const targetDir = path.join(this.uploadDir, safePath);
+      targetDir = path.join(this.uploadDir, safePath);
+      currentPath = safePath;
 
       if (!targetDir.startsWith(this.uploadDir)) {
         return { error: 'Access denied', items: [], currentPath: '' };
       }
-
-      if (!fs.existsSync(targetDir)) {
-        return { error: 'Directory not found', items: [], currentPath: safePath };
-      }
-
-      const items = fs.readdirSync(targetDir).map(name => {
-        const itemPath = path.join(targetDir, name);
-        const stat = fs.statSync(itemPath);
-        const isDirectory = stat.isDirectory();
-        
-        return {
-          name,
-          isDirectory,
-          size: isDirectory ? 0 : stat.size,
-          modified: stat.mtime,
-          type: isDirectory ? 'directory' : path.extname(name)
-        };
-      });
-
-      items.sort((a, b) => {
-        if (a.isDirectory && !b.isDirectory) return -1;
-        if (!a.isDirectory && b.isDirectory) return 1;
-        return a.name.localeCompare(b.name);
-      });
-
-      return {
-        items,
-        currentPath: safePath,
-        parentPath: safePath ? path.dirname(safePath) : null
-      };
-    } catch (error) {
-      logger.error('Failed to browse directory', { error: error.message });
-      return { error: error.message, items: [], currentPath: relativePath };
     }
+
+    const items = [];
+    
+    try {
+      const files = fs.readdirSync(targetDir);
+      
+      for (const name of files) {
+        try {
+          const itemPath = path.join(targetDir, name);
+          const stat = fs.statSync(itemPath);
+          const isDirectory = stat.isDirectory();
+          items.push({
+            name,
+            isDirectory,
+            size: isDirectory ? 0 : stat.size,
+            modified: stat.mtime,
+            type: isDirectory ? 'directory' : path.extname(name)
+          });
+        } catch (err) {
+          logger.debug('Skipped inaccessible file', { name, error: err.message });
+        }
+      }
+    } catch (err) {
+      logger.warn('Failed to read directory', { targetDir, error: err.message });
+      return { items: [], currentPath: currentPath, parentPath: path.dirname(currentPath) || null };
+    }
+
+    items.sort((a, b) => {
+      if (a.isDirectory && !b.isDirectory) return -1;
+      if (!a.isDirectory && b.isDirectory) return 1;
+      return a.name.localeCompare(b.name);
+    });
+
+    const parentPath = currentPath ? path.dirname(currentPath) : null;
+
+    return {
+      items,
+      currentPath: currentPath,
+      parentPath: parentPath === currentPath ? null : parentPath
+    };
   }
 }
 

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)
+    loadDrives()
-  }, [currentPath, loadFiles])
+  }, [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
+    if (showDrives) {
-    setPathHistory([...pathHistory, newPath])
+      const newPath = file.path + '\\'
-    setCurrentPath(newPath)
+      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 currentPath
-    return parts[parts.length - 1] || 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) => (
+            {files.map((file) => {
-              <div
+              const isDrive = showDrives && file.name.length === 2 && file.name.endsWith(':')
-                key={file.path}
+              return (
-                onClick={() => onSelect(selectedFile?.path === file.path ? null : file)}
+                <div
-                onDoubleClick={() => file.type === 'dir' && handleGoInto(file)}
+                  key={file.path}
-                className={clsx(
+                  onClick={() => onSelect(selectedFile?.path === file.path ? null : file)}
-                  'flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer transition-colors text-sm',
+                  onDoubleClick={() => (file.type === 'dir' || isDrive) && handleGoInto(file)}
-                  selectedFile?.path === file.path
+                  className={clsx(
-                    ? 'bg-gray-100 text-gray-800 dark:bg-gray-700/60 dark:text-gray-200'
+                    'flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer transition-colors text-sm',
-                    : 'hover:bg-gray-100 dark:hover:bg-gray-700/50 text-gray-700 dark:text-gray-200'
+                    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" />
+                >
-                ) : (
+                  {isDrive ? (
-                  <FileText size={16} className="text-gray-500 dark:text-gray-400 shrink-0" />
+                    <HardDrive size={16} className="text-blue-500 dark:text-blue-400 shrink-0" />
-                )}
+                  ) : file.type === 'dir' ? (
-                <span className="flex-1 truncate">
+                    <Folder size={16} className="text-gray-500 dark:text-gray-400 shrink-0" />
-                  {file.name}
+                  ) : (
-                </span>
+                    <FileText size={16} className="text-gray-500 dark:text-gray-400 shrink-0" />
-              </div>
+                  )}
-            ))}
+                  <span className="flex-1 truncate">
+                    {file.name}
+                  </span>
+                </div>
+              )
+            })}
           </div>
         )}
       </div>