实现可执行文件检测和运行功能:支持终端集成和右键菜单操作
主要更新: - 后端添加可执行文件检测逻辑,支持脚本、二进制文件和权限检测 - 文件列表API返回executable字段标识可执行文件 - 右键菜单新增"打开终端"和"运行"功能 - 终端组件支持初始路径和自动执行命令 - 创建TerminalWindow组件提供完整窗口体验 - 运行功能通过终端执行,支持实时输出和交互 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -14,7 +14,9 @@ import {
|
||||
Clipboard,
|
||||
Eye,
|
||||
Share,
|
||||
ExternalLink
|
||||
ExternalLink,
|
||||
Terminal,
|
||||
Play
|
||||
} from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
@@ -27,6 +29,7 @@ interface FileItem {
|
||||
permissions?: string;
|
||||
owner?: string;
|
||||
group?: string;
|
||||
executable?: boolean;
|
||||
}
|
||||
|
||||
interface ContextMenuProps {
|
||||
@@ -49,6 +52,9 @@ interface ContextMenuProps {
|
||||
onPreview?: (file: FileItem) => void;
|
||||
hasClipboard?: boolean;
|
||||
onDragToDesktop?: () => void;
|
||||
onOpenTerminal?: (path: string) => void;
|
||||
onRunExecutable?: (file: FileItem) => void;
|
||||
currentPath?: string;
|
||||
}
|
||||
|
||||
interface MenuItem {
|
||||
@@ -80,7 +86,10 @@ export function FileManagerContextMenu({
|
||||
onPaste,
|
||||
onPreview,
|
||||
hasClipboard = false,
|
||||
onDragToDesktop
|
||||
onDragToDesktop,
|
||||
onOpenTerminal,
|
||||
onRunExecutable,
|
||||
currentPath
|
||||
}: ContextMenuProps) {
|
||||
const { t } = useTranslation();
|
||||
const [menuPosition, setMenuPosition] = useState({ x, y });
|
||||
@@ -181,12 +190,42 @@ export function FileManagerContextMenu({
|
||||
const isMultipleFiles = files.length > 1;
|
||||
const hasFiles = files.some(f => f.type === 'file');
|
||||
const hasDirectories = files.some(f => f.type === 'directory');
|
||||
const hasExecutableFiles = files.some(f => f.type === 'file' && f.executable);
|
||||
|
||||
// 构建菜单项
|
||||
const menuItems: MenuItem[] = [];
|
||||
|
||||
if (isFileContext) {
|
||||
// 文件/文件夹选中时的菜单
|
||||
|
||||
// 打开终端功能 - 支持文件和文件夹
|
||||
if (onOpenTerminal) {
|
||||
const targetPath = isSingleFile
|
||||
? (files[0].type === 'directory' ? files[0].path : files[0].path.substring(0, files[0].path.lastIndexOf('/')))
|
||||
: files[0].path.substring(0, files[0].path.lastIndexOf('/'));
|
||||
|
||||
menuItems.push({
|
||||
icon: <Terminal className="w-4 h-4" />,
|
||||
label: files[0].type === 'directory' ? "在此文件夹打开终端" : "在文件位置打开终端",
|
||||
action: () => onOpenTerminal(targetPath),
|
||||
shortcut: "Ctrl+T"
|
||||
});
|
||||
}
|
||||
|
||||
// 运行可执行文件功能 - 仅对单个可执行文件显示
|
||||
if (isSingleFile && hasExecutableFiles && onRunExecutable) {
|
||||
menuItems.push({
|
||||
icon: <Play className="w-4 h-4" />,
|
||||
label: "运行",
|
||||
action: () => onRunExecutable(files[0]),
|
||||
shortcut: "Enter"
|
||||
});
|
||||
}
|
||||
|
||||
if ((onOpenTerminal || (isSingleFile && hasExecutableFiles && onRunExecutable))) {
|
||||
menuItems.push({ separator: true } as MenuItem);
|
||||
}
|
||||
|
||||
if (hasFiles && onPreview) {
|
||||
menuItems.push({
|
||||
icon: <Eye className="w-4 h-4" />,
|
||||
@@ -278,6 +317,19 @@ export function FileManagerContextMenu({
|
||||
}
|
||||
} else {
|
||||
// 空白区域右键菜单
|
||||
|
||||
// 在当前目录打开终端
|
||||
if (onOpenTerminal && currentPath) {
|
||||
menuItems.push({
|
||||
icon: <Terminal className="w-4 h-4" />,
|
||||
label: "在此处打开终端",
|
||||
action: () => onOpenTerminal(currentPath),
|
||||
shortcut: "Ctrl+T"
|
||||
});
|
||||
|
||||
menuItems.push({ separator: true } as MenuItem);
|
||||
}
|
||||
|
||||
if (onUpload) {
|
||||
menuItems.push({
|
||||
icon: <Upload className="w-4 h-4" />,
|
||||
|
||||
@@ -23,6 +23,7 @@ import {
|
||||
Eye,
|
||||
Settings
|
||||
} from "lucide-react";
|
||||
import { TerminalWindow } from "./components/TerminalWindow";
|
||||
import type { SSHHost, FileItem } from "../../../types/index.js";
|
||||
import {
|
||||
listSSHFiles,
|
||||
@@ -1137,6 +1138,100 @@ function FileManagerContent({ initialHost, onClose }: FileManagerModernProps) {
|
||||
}
|
||||
}
|
||||
|
||||
// 打开终端处理函数
|
||||
function handleOpenTerminal(path: string) {
|
||||
if (!currentHost) {
|
||||
toast.error("没有选择主机");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Opening terminal at path:', path);
|
||||
|
||||
// 创建终端窗口
|
||||
const windowCount = Date.now() % 10;
|
||||
const offsetX = 200 + (windowCount * 40);
|
||||
const offsetY = 150 + (windowCount * 40);
|
||||
|
||||
const createTerminalComponent = (windowId: string) => (
|
||||
<TerminalWindow
|
||||
windowId={windowId}
|
||||
hostConfig={currentHost}
|
||||
initialPath={path}
|
||||
initialX={offsetX}
|
||||
initialY={offsetY}
|
||||
/>
|
||||
);
|
||||
|
||||
openWindow({
|
||||
title: `终端 - ${currentHost.name}:${path}`,
|
||||
x: offsetX,
|
||||
y: offsetY,
|
||||
width: 800,
|
||||
height: 500,
|
||||
isMaximized: false,
|
||||
isMinimized: false,
|
||||
component: createTerminalComponent
|
||||
});
|
||||
|
||||
toast.success(`在 ${path} 打开终端`);
|
||||
}
|
||||
|
||||
// 运行可执行文件处理函数
|
||||
function handleRunExecutable(file: FileItem) {
|
||||
if (!currentHost) {
|
||||
toast.error("没有选择主机");
|
||||
return;
|
||||
}
|
||||
|
||||
if (file.type !== 'file' || !file.executable) {
|
||||
toast.error("只能运行可执行文件");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Running executable file:', file.path);
|
||||
|
||||
// 获取文件所在目录
|
||||
const fileDir = file.path.substring(0, file.path.lastIndexOf('/'));
|
||||
const fileName = file.name;
|
||||
const executeCmd = `./${fileName}`;
|
||||
|
||||
console.log('Execute command details:', {
|
||||
filePath: file.path,
|
||||
fileDir,
|
||||
fileName,
|
||||
executeCommand: executeCmd
|
||||
});
|
||||
|
||||
// 创建执行用的终端窗口
|
||||
const windowCount = Date.now() % 10;
|
||||
const offsetX = 250 + (windowCount * 40);
|
||||
const offsetY = 200 + (windowCount * 40);
|
||||
|
||||
const createExecutionTerminal = (windowId: string) => (
|
||||
<TerminalWindow
|
||||
windowId={windowId}
|
||||
hostConfig={currentHost}
|
||||
initialPath={fileDir}
|
||||
initialX={offsetX}
|
||||
initialY={offsetY}
|
||||
executeCommand={executeCmd} // 自动执行命令
|
||||
/>
|
||||
);
|
||||
|
||||
openWindow({
|
||||
title: `运行 - ${file.name}`,
|
||||
x: offsetX,
|
||||
y: offsetY,
|
||||
width: 800,
|
||||
height: 500,
|
||||
isMaximized: false,
|
||||
isMinimized: false,
|
||||
component: createExecutionTerminal
|
||||
});
|
||||
|
||||
toast.success(`正在运行: ${file.name}`);
|
||||
}
|
||||
|
||||
// 过滤文件并添加新建的临时项目
|
||||
let filteredFiles = files.filter(file =>
|
||||
file.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
@@ -1320,6 +1415,9 @@ function FileManagerContent({ initialHost, onClose }: FileManagerModernProps) {
|
||||
onRefresh={() => loadDirectory(currentPath)}
|
||||
hasClipboard={!!clipboard}
|
||||
onDragToDesktop={() => handleDragToDesktop(contextMenu.files)}
|
||||
onOpenTerminal={(path) => handleOpenTerminal(path)}
|
||||
onRunExecutable={(file) => handleRunExecutable(file)}
|
||||
currentPath={currentPath}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
import React from 'react';
|
||||
import { DraggableWindow } from './DraggableWindow';
|
||||
import { Terminal } from '../../Terminal/Terminal';
|
||||
import { useWindowManager } from './WindowManager';
|
||||
|
||||
interface SSHHost {
|
||||
id: number;
|
||||
name: string;
|
||||
ip: string;
|
||||
port: number;
|
||||
username: string;
|
||||
password?: string;
|
||||
key?: string;
|
||||
keyPassword?: string;
|
||||
authType: 'password' | 'key';
|
||||
credentialId?: number;
|
||||
userId?: number;
|
||||
}
|
||||
|
||||
interface TerminalWindowProps {
|
||||
windowId: string;
|
||||
hostConfig: SSHHost;
|
||||
initialPath?: string;
|
||||
initialX?: number;
|
||||
initialY?: number;
|
||||
executeCommand?: string;
|
||||
}
|
||||
|
||||
export function TerminalWindow({
|
||||
windowId,
|
||||
hostConfig,
|
||||
initialPath,
|
||||
initialX = 200,
|
||||
initialY = 150,
|
||||
executeCommand
|
||||
}: TerminalWindowProps) {
|
||||
console.log('TerminalWindow props:', {
|
||||
windowId,
|
||||
initialPath,
|
||||
executeCommand,
|
||||
hasExecuteCommand: !!executeCommand
|
||||
});
|
||||
const { closeWindow, minimizeWindow, maximizeWindow, focusWindow, windows } = useWindowManager();
|
||||
|
||||
// 获取当前窗口状态
|
||||
const currentWindow = windows.find(w => w.id === windowId);
|
||||
if (!currentWindow) {
|
||||
console.warn(`Window with id ${windowId} not found`);
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
closeWindow(windowId);
|
||||
};
|
||||
|
||||
const handleMinimize = () => {
|
||||
minimizeWindow(windowId);
|
||||
};
|
||||
|
||||
const handleMaximize = () => {
|
||||
maximizeWindow(windowId);
|
||||
};
|
||||
|
||||
const handleFocus = () => {
|
||||
focusWindow(windowId);
|
||||
};
|
||||
|
||||
const terminalTitle = executeCommand
|
||||
? `运行 - ${hostConfig.name}:${executeCommand}`
|
||||
: initialPath
|
||||
? `终端 - ${hostConfig.name}:${initialPath}`
|
||||
: `终端 - ${hostConfig.name}`;
|
||||
|
||||
return (
|
||||
<DraggableWindow
|
||||
title={terminalTitle}
|
||||
initialX={initialX}
|
||||
initialY={initialY}
|
||||
initialWidth={800}
|
||||
initialHeight={500}
|
||||
minWidth={600}
|
||||
minHeight={400}
|
||||
onClose={handleClose}
|
||||
onMinimize={handleMinimize}
|
||||
onMaximize={handleMaximize}
|
||||
onFocus={handleFocus}
|
||||
isMaximized={currentWindow.isMaximized}
|
||||
zIndex={currentWindow.zIndex}
|
||||
>
|
||||
<Terminal
|
||||
hostConfig={hostConfig}
|
||||
isVisible={!currentWindow.isMinimized}
|
||||
initialPath={initialPath}
|
||||
executeCommand={executeCommand}
|
||||
onClose={handleClose}
|
||||
/>
|
||||
</DraggableWindow>
|
||||
);
|
||||
}
|
||||
@@ -21,12 +21,21 @@ interface SSHTerminalProps {
|
||||
showTitle?: boolean;
|
||||
splitScreen?: boolean;
|
||||
onClose?: () => void;
|
||||
initialPath?: string;
|
||||
executeCommand?: string;
|
||||
}
|
||||
|
||||
export const Terminal = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
|
||||
{ hostConfig, isVisible, splitScreen = false, onClose },
|
||||
{ hostConfig, isVisible, splitScreen = false, onClose, initialPath, executeCommand },
|
||||
ref,
|
||||
) {
|
||||
console.log('Terminal component props:', {
|
||||
hasHostConfig: !!hostConfig,
|
||||
isVisible,
|
||||
initialPath,
|
||||
executeCommand,
|
||||
hasExecuteCommand: !!executeCommand
|
||||
});
|
||||
const { t } = useTranslation();
|
||||
const { instance: terminal, ref: xtermRef } = useXTerm();
|
||||
const fitAddonRef = useRef<FitAddon | null>(null);
|
||||
@@ -249,10 +258,13 @@ export const Terminal = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
|
||||
}
|
||||
}, 10000);
|
||||
|
||||
const connectionData = { cols, rows, hostConfig, initialPath, executeCommand };
|
||||
console.log('Sending terminal connection data:', connectionData);
|
||||
|
||||
ws.send(
|
||||
JSON.stringify({
|
||||
type: "connectToHost",
|
||||
data: { cols, rows, hostConfig },
|
||||
data: connectionData,
|
||||
}),
|
||||
);
|
||||
terminal.onData((data) => {
|
||||
|
||||
Reference in New Issue
Block a user