feat: v0.3.0 版本 - SSH终端、SFTP、端口转发功能实现

核心功能:
- SSH终端: 密码/密钥认证、XTerm.js终端、多主题配色、IP高亮
- SFTP管理: 双栏文件管理、上传下载、传输队列
- 端口转发: 本地/远程转发、SOCKS5动态代理、规则管理

架构改进:
- 拆分大型组件 (SFTPView/TabBar/Sidebar)
- 添加统一日志和错误处理
- 修复React严格模式下的终端黑屏问题

UI更新:
- 新增端口转发视图
- 更新UI预览文档
- 左侧栏右键菜单支持SFTP快捷打开
This commit is contained in:
Logan.Li committed 2026-04-06 01:20:47 +08:00
1 parent cf1c054381
commit 484d850abd
105 files changed
+25330 -64

No files matched your search

+89
View File
@@ -0,0 +1,89 @@
/**
* TabContextMenu - 标签右键菜单
*/
import { useRef, useEffect } from 'react'
interface MenuItem {
label: string
action: () => void
danger?: boolean
separator?: boolean
}
interface TabContextMenuProps {
isOpen: boolean
position: { x: number; y: number }
onClose: () => void
onCloseTab: () => void
onCloseOthers: () => void
onCloseRight: () => void
onCloseLeft: () => void
onCloseAll: () => void
onClone?: () => void
}
export function TabContextMenu({
isOpen,
position,
onClose,
onCloseTab,
onCloseOthers,
onCloseRight,
onCloseLeft,
onCloseAll,
onClone,
}: TabContextMenuProps) {
const menuRef = useRef<HTMLDivElement>(null)
useEffect(() => {
const handleClickOutside = (e: MouseEvent) => {
if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
onClose()
}
}
document.addEventListener('mousedown', handleClickOutside)
return () => document.removeEventListener('mousedown', handleClickOutside)
}, [onClose])
if (!isOpen) return null
const items: MenuItem[] = [
{ label: '关闭', action: onCloseTab },
{ label: '关闭其他', action: onCloseOthers },
{ label: '关闭右侧标签', action: onCloseRight },
{ label: '关闭左侧标签', action: onCloseLeft },
{ label: '关闭全部', action: onCloseAll, danger: true },
]
if (onClone) {
items.unshift({ label: '克隆标签', action: onClone })
}
return (
<div
ref={menuRef}
style={{ left: position.x, top: position.y }}
className="fixed z-50 bg-dark-800 border border-dark-700 rounded-lg shadow-xl py-1 min-w-[160px]"
>
{items.map((item, index) => (
<button
key={index}
onClick={() => {
item.action()
onClose()
}}
className={`
w-full px-4 py-2 text-left text-sm transition-colors
${item.danger
? 'text-red-400 hover:bg-red-500/20'
: 'text-gray-300 hover:bg-dark-700'
}
`}
>
{item.label}
</button>
))}
</div>
)
}