ai-coding/deploy-ease-platform
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重写ssh前端组件，通用化

Browse Source
This commit is contained in:
dengqichen 2025-12-07 18:26:26 +08:00
parent 7309d05bcb
commit 4d4ffabe05
5 changed files with 193 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
frontend/src/components/FileManager/ServerFilePanel.tsx
View File

@ -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>
)}
{/* 表头 - 固定显示 */}
<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-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,15 +305,45 @@ export const ServerFilePanel: React.FC<ServerFilePanelProps> = ({
})}
</span>
{/* 删除按钮 */}
<Button
size="sm"
variant="ghost"
className="h-6 w-8 p-0 opacity-0 group-hover:opacity-100 flex-shrink-0"
onClick={() => handleDelete(file)}
>
<Trash2 className="h-3.5 w-3.5 text-red-500" />
</Button>
{/* 操作按钮 */}
<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"
onClick={() => handleDelete(file)}
title="删除"
>
<Trash2 className="h-3.5 w-3.5 text-red-500" />
</Button>
</div>
</div>
))}
</div>

115
frontend/src/components/FileManager/UploadPanel.tsx
View File

@ -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);
message.success('上传已取消');
} catch (error) {
const cancelled = await cancelUploadTask(serverId, item.taskId);
if (cancelled) {
message.success('上传已取消');
} 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>
文件 <span className="font-semibold text-foreground">{pendingOverwriteItem?.file.name}</span> 已存在，是否覆盖？
<AlertDialogDescription className="space-y-3">
<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>

16
frontend/src/components/Terminal/Terminal.tsx
View File

@ -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}`}>

4
frontend/src/components/Terminal/index.module.less
View File

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

19
frontend/src/components/Terminal/strategies/SSHConnectionStrategy.ts
View File

@ -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.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');
this.notifyError('WebSocket 连接错误');
reject(error);
// WebSocket错误时不立即设置状态，等待onclose处理
};
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) {