OpsXShell Dev
53274e2291
迁移: - better-sqlite3(原生C++) → sql.js(WASM纯JS), 兼容Node 24 - database-service.ts: PreparedStatement包装器保持API兼容 - main.ts: initialize()改为async/await - 移除@electron/rebuild和@types/better-sqlite3依赖 - 新增.npmrc阿里云镜像加速 UI/代码修复(任务1-6): 1. TerminalView: 清理111行调试日志(645→534行) 2. 设计系统: cyan/slate→accent-blue/dark-*颜色统一(FileRow/TransferItem/Breadcrumb/ContextMenu) 3. StatusBar: 重写接入实时连接状态,三区布局 4. SessionDialog: 私钥浏览按钮添加onClick处理 5. WelcomeView: 真实session数据替换硬编码假数据 6. SFTPView: emoji→Lucide图标(FolderOpen/Upload/Download/Trash2) 构建验证: tsc零错误 + vite build成功(Node 24.14.0)
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