重写ssh前端组件，通用化

frontend/src/components/FileManager/ServerFilePanel.tsx

@@ -15,7 +15,7 @@ import {
     AlertDialogHeader,
     AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import { ChevronRight, Folder, File, Home, ArrowLeft, Plus, Trash2, RefreshCw, Link } from 'lucide-react';
+import { ChevronRight, Folder, File, Home, ArrowLeft, Plus, Trash2, RefreshCw, Link, Copy, FileText } from 'lucide-react';
 import { browseDirectory, createDirectory, removeFile, pathUtils, type RemoteFileInfo } from '@/services/fileService';
 import { message } from 'antd';
 import type { ServerFilePanelProps } from './types';
@@ -224,22 +224,20 @@ export const ServerFilePanel: React.FC<ServerFilePanelProps> = ({
 
             {/* 文件列表 */}
             <div className="flex-1 overflow-y-auto" style={{ minHeight: 0 }}>
-                {/* 表头 */}
+                {/* 表头 - 固定显示 */}
-                {!loading && files.length > 0 && (
                 <div className="sticky top-0 bg-gray-50 dark:bg-gray-900 border-b px-2 py-1 flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-400 z-10">
                     <div className="flex-1 min-w-[150px]">名称</div>
                     <div className="w-20 text-right flex-shrink-0">大小</div>
                     <div className="w-24 flex-shrink-0">权限</div>
                     <div className="w-16 flex-shrink-0">所有者</div>
                     <div className="w-28 flex-shrink-0">修改时间</div>
-                        <div className="w-8 flex-shrink-0"></div>
+                    <div className="w-24 flex-shrink-0"></div>
                 </div>
-                )}
 
                 <div className="p-2 min-h-[200px]">
                     {loading ? (
                         <div className="space-y-2">
-                            {/* 骨架屏 - 模拟文件列表 */}
+                            {/* 骨架屏 - 仅模拟数据行 */}
                             {Array.from({ length: 8 }).map((_, i) => (
                                 <div key={i} className="flex items-center gap-2 px-2 py-1.5">
                                     <Skeleton className="h-4 w-4 rounded flex-shrink-0" />
@@ -248,6 +246,7 @@ export const ServerFilePanel: React.FC<ServerFilePanelProps> = ({
                                     <Skeleton className="h-4 w-24 flex-shrink-0" />
                                     <Skeleton className="h-4 w-16 flex-shrink-0" />
                                     <Skeleton className="h-4 w-28 flex-shrink-0" />
+                                    <Skeleton className="h-4 w-24 flex-shrink-0" />
                                 </div>
                             ))}
                         </div>
@@ -306,16 +305,46 @@ export const ServerFilePanel: React.FC<ServerFilePanelProps> = ({
                                     })}
                                 </span>
                                 
+                                {/* 操作按钮 */}
+                                <div className="flex items-center gap-1 w-24 flex-shrink-0">
+                                    {/* 复制文件名按钮 */}
+                                    <Button
+                                        size="sm"
+                                        variant="ghost"
+                                        className="h-6 w-8 p-0 opacity-0 group-hover:opacity-100"
+                                        onClick={() => {
+                                            navigator.clipboard.writeText(file.name);
+                                            message.success('文件名已复制');
+                                        }}
+                                        title="复制文件名"
+                                    >
+                                        <FileText className="h-3.5 w-3.5 text-blue-500" />
+                                    </Button>
+                                    {/* 复制路径按钮 */}
+                                    <Button
+                                        size="sm"
+                                        variant="ghost"
+                                        className="h-6 w-8 p-0 opacity-0 group-hover:opacity-100"
+                                        onClick={() => {
+                                            navigator.clipboard.writeText(file.path);
+                                            message.success('路径已复制');
+                                        }}
+                                        title="复制路径"
+                                    >
+                                        <Copy className="h-3.5 w-3.5 text-gray-500" />
+                                    </Button>
                                     {/* 删除按钮 */}
                                     <Button
                                         size="sm"
                                         variant="ghost"
-                                    className="h-6 w-8 p-0 opacity-0 group-hover:opacity-100 flex-shrink-0"
+                                        className="h-6 w-8 p-0 opacity-0 group-hover:opacity-100"
                                         onClick={() => handleDelete(file)}
+                                        title="删除"
                                     >
                                         <Trash2 className="h-3.5 w-3.5 text-red-500" />
                                     </Button>
                                 </div>
+                            </div>
                         ))}
                         </div>
                     )}

frontend/src/components/FileManager/UploadPanel.tsx

@@ -4,6 +4,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Progress } from '@/components/ui/progress';
+import { Input } from '@/components/ui/input';
 import {
     AlertDialog,
     AlertDialogAction,
@@ -39,6 +40,7 @@ export const UploadPanel: React.FC<UploadPanelProps> = ({
     const [isDragging, setIsDragging] = useState(false);
     const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
     const [pendingOverwriteItem, setPendingOverwriteItem] = useState<UploadFileItem | null>(null);
+    const [renameFileName, setRenameFileName] = useState<string>(''); // 重命名的新文件名
     const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
     const [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null);
     const [clearConfirmOpen, setClearConfirmOpen] = useState(false);
@@ -96,10 +98,17 @@ export const UploadPanel: React.FC<UploadPanelProps> = ({
         // 如果正在上传，先取消任务
         if (item?.status === 'uploading' && item.taskId) {
             try {
-                await cancelUploadTask(serverId, item.taskId);
+                const cancelled = await cancelUploadTask(serverId, item.taskId);
+                if (cancelled) {
                     message.success('上传已取消');
-            } catch (error) {
+                } else {
+                    message.error('取消上传失败：任务未能成功取消');
+                    return; // 取消失败，不移除文件
+                }
+            } catch (error: any) {
                 console.error('取消上传失败:', error);
+                message.error(error.response?.data?.message || '取消上传失败');
+                return; // 出错，不移除文件
             }
         }
         
@@ -129,6 +138,37 @@ export const UploadPanel: React.FC<UploadPanelProps> = ({
         setPendingDeleteId(null);
     };
 
+    // 生成重命名文件名（自动添加(1), (2), (3)等）
+    const generateRenamedFileName = async (originalName: string): Promise<string> => {
+        try {
+            const files = await browseDirectory(serverId, currentPath);
+            const existingNames = new Set(files.map(f => f.name));
+            
+            // 解析文件名和扩展名
+            const lastDotIndex = originalName.lastIndexOf('.');
+            const baseName = lastDotIndex > 0 ? originalName.substring(0, lastDotIndex) : originalName;
+            const extension = lastDotIndex > 0 ? originalName.substring(lastDotIndex) : '';
+            
+            // 尝试生成不冲突的文件名
+            let counter = 1;
+            let newName = `${baseName}(${counter})${extension}`;
+            
+            while (existingNames.has(newName) && counter < 100) {
+                counter++;
+                newName = `${baseName}(${counter})${extension}`;
+            }
+            
+            return newName;
+        } catch (error) {
+            console.error('生成重命名文件名失败:', error);
+            // 如果失败，默认返回(1)
+            const lastDotIndex = originalName.lastIndexOf('.');
+            const baseName = lastDotIndex > 0 ? originalName.substring(0, lastDotIndex) : originalName;
+            const extension = lastDotIndex > 0 ? originalName.substring(lastDotIndex) : '';
+            return `${baseName}(1)${extension}`;
+        }
+    };
+
     // 上传单个文件（异步上传+轮询）
     const uploadSingleFile = async (item: UploadFileItem, overwrite: boolean = false, skipCheck: boolean = false) => {
         const remotePath = pathUtils.join(currentPath, item.file.name);
@@ -141,7 +181,9 @@ export const UploadPanel: React.FC<UploadPanelProps> = ({
                 const fileExists = files.some(f => f.name === item.file.name && !f.isDirectory);
                 
                 if (fileExists) {
-                    // 文件已存在，弹出确认对话框
+                    // 文件已存在，生成建议的重命名文件名
+                    const suggestedName = await generateRenamedFileName(item.file.name);
+                    setRenameFileName(suggestedName);
                     setPendingOverwriteItem(item);
                     setConfirmDialogOpen(true);
                     return; // 暂停上传，等待用户决定
@@ -196,6 +238,37 @@ export const UploadPanel: React.FC<UploadPanelProps> = ({
             // 以覆盖模式重新上传，跳过检查
             await uploadSingleFile(pendingOverwriteItem, true, true);
             setPendingOverwriteItem(null);
+            setRenameFileName('');
+        }
+    };
+
+    // 处理用户重命名上传
+    const handleRename = async () => {
+        setConfirmDialogOpen(false);
+        if (pendingOverwriteItem && renameFileName.trim()) {
+            // 创建新的文件项，使用重命名后的文件名
+            const renamedFile = new File([pendingOverwriteItem.file], renameFileName, {
+                type: pendingOverwriteItem.file.type,
+            });
+            
+            const renamedItem: UploadFileItem = {
+                ...pendingOverwriteItem,
+                file: renamedFile,
+            };
+            
+            // 更新文件列表中的文件名
+            setUploadFiles(prev =>
+                prev.map(f =>
+                    f.id === pendingOverwriteItem.id
+                        ? renamedItem
+                        : f
+                )
+            );
+            
+            // 使用新文件名上传，跳过检查
+            await uploadSingleFile(renamedItem, false, true);
+            setPendingOverwriteItem(null);
+            setRenameFileName('');
         }
     };
 
@@ -207,11 +280,12 @@ export const UploadPanel: React.FC<UploadPanelProps> = ({
             setUploadFiles(prev =>
                 prev.map(f =>
                     f.id === pendingOverwriteItem.id
-                        ? { ...f, status: 'error', errorMessage: '用户取消覆盖' }
+                        ? { ...f, status: 'error', errorMessage: '用户取消上传' }
                         : f
                 )
             );
             setPendingOverwriteItem(null);
+            setRenameFileName('');
         }
     };
 
@@ -447,7 +521,7 @@ export const UploadPanel: React.FC<UploadPanelProps> = ({
                                             </div>
                                         </div>
                                         <div className="flex items-center gap-2 mt-1">
-                                            <span className="text-xs text-gray-500">
+                                            <span className="text-xs text-gray-500 w-20 flex-shrink-0">
                                                 {formatFileSize(item.file.size)}
                                             </span>
                                             {item.status === 'uploading' && (
@@ -482,14 +556,39 @@ export const UploadPanel: React.FC<UploadPanelProps> = ({
                 <AlertDialogContent>
                     <AlertDialogHeader>
                         <AlertDialogTitle>文件已存在</AlertDialogTitle>
-                        <AlertDialogDescription>
+                        <AlertDialogDescription className="space-y-3">
-                            文件 <span className="font-semibold text-foreground">{pendingOverwriteItem?.file.name}</span> 已存在，是否覆盖？
+                            <div>
+                                文件 <span className="font-semibold text-foreground">{pendingOverwriteItem?.file.name}</span> 已存在
+                            </div>
+                            <div className="space-y-2">
+                                <label className="text-sm font-medium text-foreground">
+                                    重命名为：
+                                </label>
+                                <Input
+                                    value={renameFileName}
+                                    onChange={(e) => setRenameFileName(e.target.value)}
+                                    placeholder="输入新文件名"
+                                    className="w-full"
+                                    onKeyDown={(e) => {
+                                        if (e.key === 'Enter' && renameFileName.trim()) {
+                                            handleRename();
+                                        }
+                                    }}
+                                />
+                            </div>
                         </AlertDialogDescription>
                     </AlertDialogHeader>
                     <AlertDialogFooter>
                         <AlertDialogCancel onClick={handleCancelOverwrite}>
                             取消
                         </AlertDialogCancel>
+                        <Button
+                            onClick={handleRename}
+                            disabled={!renameFileName.trim()}
+                            variant="outline"
+                        >
+                            重命名
+                        </Button>
                         <AlertDialogAction onClick={handleConfirmOverwrite}>
                             覆盖
                         </AlertDialogAction>

frontend/src/components/Terminal/Terminal.tsx

@@ -10,7 +10,7 @@ import { TerminalToolbar } from './TerminalToolbar';
 import { FileManager } from '@/components/FileManager';
 import type { TerminalProps, TerminalToolbarConfig } from './types';
 import { TERMINAL_THEMES, getThemeByName } from './themes';
-import { Loader2, XCircle, ChevronUp, ChevronDown, X } from 'lucide-react';
+import { Loader2, XCircle, ChevronUp, ChevronDown, X, WifiOff } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { message } from 'antd';
 import { TerminalInstanceManager } from './core/TerminalInstanceManager';
@@ -425,6 +425,20 @@ export const Terminal: React.FC<TerminalProps> = ({
                     </div>
                 )}
 
+                {/* 已断开连接 */}
+                {connectionStatus === 'disconnected' && (
+                    <div className={`${styles.statusOverlay} ${styles.disconnected}`}>
+                        <WifiOff className={styles.statusIcon} />
+                        <p className={styles.statusText}>已断开连接</p>
+                        {errorMessage && (
+                            <p className={styles.statusDetail}>{errorMessage}</p>
+                        )}
+                        <Button onClick={handleReconnect} variant="outline">
+                            重新连接
+                        </Button>
+                    </div>
+                )}
+
                 {/* 错误 */}
                 {connectionStatus === 'error' && (
                     <div className={`${styles.statusOverlay} ${styles.error}`}>

frontend/src/components/Terminal/index.module.less

@@ -137,6 +137,10 @@
   color: #fb923c;
 }
 
+.disconnected {
+  color: #94a3b8;
+}
+
 .error {
   color: #ef4444;
 }

frontend/src/components/Terminal/strategies/SSHConnectionStrategy.ts

@@ -55,10 +55,12 @@ export class SSHConnectionStrategy extends BaseConnectionStrategy {
             try {
                 const ws = new WebSocket(wsUrl);
                 this.ws = ws;
+                let isResolved = false;
 
                 ws.onopen = () => {
                     this.notifyStatusChange('connected');
                     this.reconnectAttempts = 0;
+                    isResolved = true;
                     resolve();
                 };
 
@@ -68,18 +70,27 @@ export class SSHConnectionStrategy extends BaseConnectionStrategy {
 
                 ws.onerror = (error) => {
                     console.error('[SSHConnectionStrategy] WebSocket error:', error);
-                    this.notifyStatusChange('error');
+                    // WebSocket错误时不立即设置状态，等待onclose处理
-                    this.notifyError('WebSocket 连接错误');
-                    reject(error);
                 };
 
                 ws.onclose = () => {
+                    console.log('[SSHConnectionStrategy] WebSocket closed, current status:', this.status);
+                    
+                    const wasConnecting = this.status === 'connecting';
                     
                     // 只有在已连接状态下关闭才尝试重连
                     if (this.status === 'connected' && this.config.autoReconnect) {
                         this.handleReconnect();
                     } else {
+                        // 其他情况统一显示为"已断开连接"
                         this.notifyStatusChange('disconnected');
+                        if (wasConnecting) {
+                            // 初次连接失败
+                            this.notifyError('无法连接到服务器');
+                            if (!isResolved) {
+                                reject(new Error('无法连接到服务器'));
+                            }
+                        }
                     }
                 };
             } catch (error) {