OpsXShell Dev
07c4a5b14f
功能: - 代理类型定义 (ProxyType, ProxyConfig) - 代理工具函数 (验证、解析、构建URL) + 24 测试 - SSH 连接通过 HTTP CONNECT / SOCKS5 隧道 - 数据库 proxy 列持久化 (JSON) - SessionDialog 代理配置 UI (可折叠面板) - 连接池传递 proxy 到 IPC - sessionStore 类型添加 proxy 支持
156 lines
4.6 KiB
Markdown
156 lines
4.6 KiB
Markdown
# OpsXShell GUI
|
||
|
||
跨平台 SSH/SFTP 终端工具 · 简洁高效 · 安全可靠
|
||
|
||
## 功能特性
|
||
|
||
- 🔐 **SSH 终端** - 支持密码、密钥、SSH Agent 认证，XTerm.js 高性能终端
|
||
- 📁 **SFTP 文件管理** - 双栏可视化文件管理，拖拽上传下载，传输队列
|
||
- 🔄 **端口转发** - 本地/远程/动态 SOCKS5 代理
|
||
- 📑 **多标签页** - 类浏览器标签管理，连接池复用，会话恢复
|
||
- 🎨 **现代 UI** - 多主题系统 (Dark/Light/System)，命令面板，命令片段库
|
||
- ⌨️ **快捷键自定义** - 可重映射所有快捷键，实时冲突检测
|
||
- 🛡️ **代理支持** - HTTP/SOCKS5 代理，按会话独立配置
|
||
- 🔒 **安全可靠** - AES-256-GCM 加密存储，PBKDF2 600K 迭代密钥派生
|
||
- 🌐 **跨平台** - 支持 Windows、macOS、Linux
|
||
|
||
## 技术栈
|
||
|
||
| 层级 | 技术 |
|
||
|------|------|
|
||
| 框架 | Electron 28+ |
|
||
| 前端 | React 18 + TypeScript 5 |
|
||
| 构建 | Vite 5 |
|
||
| 状态管理 | Zustand 4.4+ |
|
||
| 样式 | Tailwind CSS 3.3+ |
|
||
| 终端 | XTerm.js 5.5+ |
|
||
| SSH/SFTP | ssh2 1.15+ |
|
||
| 图标 | Lucide React |
|
||
| 数据库 | sql.js (SQLite WASM) 1.11+ |
|
||
| 测试 | Vitest 4.1+ |
|
||
|
||
## 快速开始
|
||
|
||
### 环境要求
|
||
|
||
- Node.js 18+
|
||
- npm 9+ 或 yarn 1.22+
|
||
- Git
|
||
|
||
### 安装
|
||
|
||
```bash
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 启动开发服务器
|
||
npm run dev
|
||
|
||
# 构建应用
|
||
npm run build
|
||
|
||
# 打包分发
|
||
npm run dist
|
||
```
|
||
|
||
### 平台特定打包
|
||
|
||
```bash
|
||
# 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)
|
||
|
||
在浏览器中打开 `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` | 全屏模式 |
|
||
|
||
## 开发计划
|
||
|
||
- [x] 基础项目框架
|
||
- [x] Electron 主进程
|
||
- [x] React 前端界面
|
||
- [x] 多标签页系统
|
||
- [x] 会话管理
|
||
- [x] SSH 连接集成 (node-ssh2)
|
||
- [x] 终端模拟器 (XTerm.js)
|
||
- [x] SFTP 文件传输
|
||
- [x] 端口转发
|
||
- [x] 数据持久化 (SQLite)
|
||
- [x] 架构模块化重构
|
||
- [ ] 智能命令补全
|
||
- [ ] 断点续传
|
||
|
||
## 许可证
|
||
|
||
MIT License - 开源免费使用
|
||
|
||
---
|
||
|
||
Made with ❤️ by OpsXShell Team
|