OpsXShell Dev
caba5f4c0d
任务1: 全局快捷键管理器 — useKeyboardShortcuts hook Ctrl+Tab/Shift+Tab标签切换, Ctrl+1~9跳转, F11全屏, Ctrl+Shift+N新建标签 任务2: 标签拖拽排序 — tabStore.moveTab + TabBar HTML5 DnD 不可变更新, 拖拽视觉反馈(opacity+指示线), 活跃标签底部accent-blue指示线 任务3: SFTP拖拽上传 + useSFTP调试清理 FileListPanel拖拽覆盖层(Upload图标+虚线边框), 5个调试函数→createLogger, disconnect()正确调用IPC, 删除mock data 任务4: SFTP右键菜单完善 — 重命名/复制路径/属性/权限 FilePropertiesDialog+ChmodDialog, sftpStat/sftpChmod IPC全栈实现 任务5-6: 侧边栏分组折叠动画 + 宽度可拖拽调整 Grid 0fr→1fr折叠动画, ChevronRight旋转, resize handle 180~400px, settings记忆 任务7: 响应式布局 + 视觉优化V1~V5 useMediaQuery hook, <800px侧边栏overlay模式, SFTP垂直堆叠, WelcomeView响应式grid 任务8: Loading/Skeleton骨架屏 Skeleton/SkeletonLine/SkeletonCircle/SkeletonBlock + FileListSkeleton/SessionTreeSkeleton/TabContentSkeleton 任务9: 空状态设计 EmptyState通用组件, SessionTree/FileListPanel/WelcomeView/SFTPView空状态引导 任务10: TerminalView组件拆分重构 711行→285行 useTerminalConnection(300行) + useTerminalSearch(123行) + TerminalOverlay(98行) + TerminalSearchBar(74行) 33 files changed, 2682 insertions(+), 872 deletions(-)
OpsXShell GUI
跨平台 SSH/SFTP 终端工具 · 简洁高效 · 安全可靠
功能特性
- 🔐 SSH 终端 - 支持密码、密钥认证，XTerm.js 高性能终端
- 📁 SFTP 文件管理 - 双栏可视化文件管理，上传下载，传输队列
- 🔄 端口转发 - 本地/远程/动态 SOCKS5 代理
- 📑 多标签页 - 类浏览器标签管理，连接池复用
- 🎨 现代 UI - 基于 Tailwind CSS 的深色主题界面，多主题配色
- 🔒 安全可靠 - 敏感数据 AES-256-GCM 加密存储
- 🌐 跨平台 - 支持 Windows、macOS、Linux
技术栈
| 层级 | 技术 |
|---|---|
| 框架 | Electron 28+ |
| 前端 | React 18 + TypeScript 5 |
| 构建 | Vite 5 |
| 状态管理 | Zustand |
| 样式 | Tailwind CSS |
| 终端 | XTerm.js |
| SSH/SFTP | node-ssh2 |
快速开始
环境要求
- Node.js 18+
- npm 9+ 或 yarn 1.22+
- Git
安装
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建应用
npm run build
# 打包分发
npm run dist
平台特定打包
# Windows
npm run dist:win
# macOS
npm run dist:mac
# Linux
npm run dist:linux
项目结构
opsxshell-gui/
├── electron/ # Electron 主进程
│ ├── main.ts # 主进程入口
│ ├── preload.ts # 预加载脚本
│ └── tsconfig.json # 主进程 TS 配置
├── src/ # 渲染进程 (React)
│ ├── components/ # 组件
│ │ ├── Sidebar.tsx # 侧边栏
│ │ ├── TabBar.tsx # 标签栏
│ │ ├── TabContent.tsx # 标签内容
│ │ ├── StatusBar.tsx # 状态栏
│ │ ├── WelcomeView.tsx # 欢迎页面
│ │ ├── TerminalView.tsx # 终端视图
│ │ ├── SFTPView.tsx # SFTP 视图
│ │ ├── SettingsView.tsx # 设置视图
│ │ ├── SessionDialog.tsx # 会话对话框
│ │ └── QuickConnectDialog.tsx # 快速连接对话框
│ ├── stores/ # 状态管理
│ │ ├── tabStore.ts # 标签状态
│ │ └── connectionStore.ts # 连接状态
│ ├── App.tsx # 根组件
│ ├── main.tsx # 渲染入口
│ └── index.css # 全局样式
├── package.json # 项目配置
├── vite.config.ts # Vite 配置
├── tailwind.config.js # Tailwind 配置
└── tsconfig.json # TypeScript 配置
界面预览
📱 在线预览: docs/ui-preview.html
在浏览器中打开 docs/ui-preview.html 文件可查看高清界面预览（支持切换终端/SFTP视图）：
终端视图
- 🎨 深色主题 - 基于 Tailwind CSS 的现代化深色界面
- 📑 标签页管理 - 悬停显示更多操作（
...）和关闭（×）按钮 - 🖥️ 终端区域 - 清晰显示 SSH 连接状态和命令提示符
- 📊 状态栏 - 实时显示连接状态、延迟和功能入口
SFTP 双栏视图
- 📂 双栏文件管理器 - 左侧本地目录，右侧远程服务器目录
- 🧭 面包屑导航 - 清晰的路径导航和返回/前进按钮
- 📋 文件列表 - 显示名称、修改时间、大小、类型/权限
- ⚡ 传输队列 - 实时显示上传/下载进度
- 🔍 Filter/Actions - 筛选和操作下拉菜单
提示：双击 HTML 文件即可在浏览器中查看完整效果，支持终端和 SFTP 视图切换。
快捷键
| 快捷键 | 功能 |
|---|---|
Cmd/Ctrl + N |
新建会话 |
Cmd/Ctrl + K |
快速连接 |
Cmd/Ctrl + T |
新建标签 |
Cmd/Ctrl + W |
关闭标签 |
Cmd/Ctrl + Tab |
切换标签 |
F11 |
全屏模式 |
开发计划
- 基础项目框架
- Electron 主进程
- React 前端界面
- 多标签页系统
- 会话管理
- SSH 连接集成 (node-ssh2)
- 终端模拟器 (XTerm.js)
- SFTP 文件传输
- 端口转发
- 数据持久化 (SQLite)
- 架构模块化重构
- 智能命令补全
- 断点续传
许可证
MIT License - 开源免费使用
Made with ❤️ by OpsXShell Team