重新设计diff功能:使用Monaco Editor实现专业级文件对比

新增功能:
- DiffViewer组件:基于Monaco Editor DiffEditor的专业代码对比
- DiffWindow组件:专用的diff对比窗口包装器
- 并排/内联视图切换功能
- 多语言语法高亮支持
- 智能文件类型检测
- 完整的工具栏(下载、刷新、视图切换、行号切换)

技术改进:
- 替代原来的两个独立文件窗口方案
- 使用Monaco Editor提供VS Code同级的对比体验
- 支持大文件错误处理和SSH连接自动重连
- 专业的差异高亮显示(新增/删除/修改)

依赖更新:
- 新增@monaco-editor/react依赖
This commit is contained in:
ZacharyZcR
2025-09-16 23:18:20 +08:00
parent 681a223bed
commit 3f90faf1d0
5 changed files with 444 additions and 44 deletions

View File

@@ -0,0 +1,75 @@
import React from 'react';
import { DraggableWindow } from './DraggableWindow';
import { DiffViewer } from './DiffViewer';
import { useWindowManager } from './WindowManager';
import type { FileItem, SSHHost } from '../../../../types/index.js';
interface DiffWindowProps {
windowId: string;
file1: FileItem;
file2: FileItem;
sshSessionId: string;
sshHost: SSHHost;
initialX?: number;
initialY?: number;
}
export function DiffWindow({
windowId,
file1,
file2,
sshSessionId,
sshHost,
initialX = 150,
initialY = 100
}: DiffWindowProps) {
const { closeWindow, minimizeWindow, maximizeWindow, focusWindow, windows } = useWindowManager();
const currentWindow = windows.find(w => w.id === windowId);
// 窗口操作处理
const handleClose = () => {
closeWindow(windowId);
};
const handleMinimize = () => {
minimizeWindow(windowId);
};
const handleMaximize = () => {
maximizeWindow(windowId);
};
const handleFocus = () => {
focusWindow(windowId);
};
if (!currentWindow) {
return null;
}
return (
<DraggableWindow
title={`文件对比: ${file1.name}${file2.name}`}
initialX={initialX}
initialY={initialY}
initialWidth={1200}
initialHeight={700}
minWidth={800}
minHeight={500}
onClose={handleClose}
onMinimize={handleMinimize}
onMaximize={handleMaximize}
onFocus={handleFocus}
isMaximized={currentWindow.isMaximized}
zIndex={currentWindow.zIndex}
>
<DiffViewer
file1={file1}
file2={file2}
sshSessionId={sshSessionId}
sshHost={sshHost}
/>
</DraggableWindow>
);
}