+
+
+
+ 🚀 赛博朋克风格的跨平台远程 Shell 管理终端 +
-   +
+ 
+ 支持 Windows · macOS · Linux · Android 多平台运行 +
+ +--- + +## 📸 界面预览 + +### 🏠 欢迎界面 + +精心设计的赛博朋克风格欢迎界面，霓虹光效与深色主题完美融合。 + + + +### ➕ 添加主机 + +便捷的主机配置面板，支持密码和 SSH 私钥两种认证方式，可自定义分组和标识颜色。 + + + +### 💻 SSH 终端 + +功能完整的 SSH 终端，基于 xterm.js 打造，支持完整的终端模拟体验。 + + + +### 📁 SFTP 文件管理器 + +强大的 SFTP 文件管理功能，支持文件浏览、上传、下载、重命名、删除等操作。 + + + +### 📊 主机信息面板 + +实时监控远程主机状态，包括 CPU、内存、磁盘使用情况和系统运行时间。 + + + +### ⌨️ 快捷命令面板 + +内置常用命令快捷面板，按 `Ctrl + K` 快速调出，支持 Docker、文件操作等常用命令。 + + + +### 🗂️ 主机管理 + +集中管理所有 SSH 主机，支持分组、搜索、批量操作。 + + + +### ☁️ 云端同步 + +支持 MySQL 数据库云端同步，实现多设备主机配置共享。 + + + +--- ## ✨ 功能特点 -- 🎨 **赛博朋克 UI** - 霓虹色调、玻璃拟态、动态特效 -- 🖥️ **SSH 终端** - 完整的 xterm.js 终端模拟 -- 📁 **SFTP 文件管理** - 远程文件浏览、上传、下载 -- 📊 **主机信息面板** - 实时系统状态监控 -- ☁️ **云端同步** - MySQL 数据库同步支持 -- 📱 **跨平台** - 桌面端和移动端统一体验 +| 功能 | 描述 | +|------|------| +| 🎨 **赛博朋克 UI** | 霓虹色调、玻璃拟态、动态光效，打造独特视觉体验 | +| 🖥️ **SSH 终端** | 完整的 xterm.js 终端模拟，支持各种终端操作 | +| 📁 **SFTP 文件管理** | 远程文件浏览、上传、下载、权限修改 | +| 📊 **主机监控** | 实时 CPU、内存、磁盘使用率监控 | +| ⌨️ **快捷命令** | 内置常用命令，Ctrl+K 快速调出 | +| ☁️ **云端同步** | MySQL 数据库同步，多设备配置共享 | +| 🏷️ **分组管理** | 主机分组、颜色标识、便捷管理 | +| 📱 **跨平台** | 桌面端和移动端统一体验 | + +--- ## 🏗️ 项目结构 @@ -21,46 +94,83 @@ easyshell/ ├── src/ # React 前端源码 │ ├── components/ # UI 组件 +│ │ ├── Terminal.js # SSH 终端组件 +│ │ ├── SFTPBrowser.js # SFTP 文件管理器 +│ │ ├── HostInfoPanel.js # 主机信息面板 +│ │ ├── HostManager.js # 主机管理器 +│ │ ├── Sidebar.js # 侧边栏 +│ │ └── TitleBar.js # 标题栏 │ ├── services/ # 服务层 │ │ ├── api.js # 跨平台 API 适配层 -│ │ ├── database.js # 数据库服务 -│ │ ├── ssh.js # SSH 服务 (Electron) -│ │ └── sftp.js # SFTP 服务 (Electron) -│ └── ... +│ │ ├── database.js # 数据库服务 (SQLite/MySQL) +│ │ ├── ssh.js # SSH 服务 +│ │ └── sftp.js # SFTP 服务 +│ └── App.js # 主应用组件 ├── server/ # 后端服务器 (移动端需要) │ ├── index.js # Express + Socket.IO 服务 │ └── package.json ├── android/ # Android 原生项目 (Capacitor) +├── public/ # 静态资源 +│ ├── icon.svg # 应用图标 (SVG) +│ ├── icon.png # 应用图标 (PNG) +│ └── icon.ico # 应用图标 (Windows) +├── docs/ # 文档和截图 ├── main.js # Electron 主进程 ├── preload.js # Electron 预加载脚本 -└── capacitor.config.ts # Capacitor 配置 +├── capacitor.config.ts # Capacitor 配置 +└── tailwind.config.js # Tailwind CSS 配置 ``` +--- + ## 🚀 快速开始 +### 环境要求 + +- Node.js >= 16 +- npm >= 8 +- (可选) Android Studio (构建 Android 版本) + ### 安装依赖 ```bash +# 克隆项目 +git clone https://github.com/your-username/easyshell.git +cd easyshell + # 安装前端依赖 npm install -# 安装服务器依赖 +# 安装服务器依赖 (如需移动端) cd server && npm install && cd .. ``` ### 桌面端开发 ```bash -# 启动 Electron 开发模式 +# 启动开发模式 (React + Electron) npm start ``` -### 移动端开发 - -#### 1. 启动后端服务器 +### 构建发布版 ```bash -# 在电脑上启动服务器 +# 构建 Windows 安装包 +npm run dist + +# 生成的安装包位于 dist/ 目录 +``` + +--- + +## 📱 移动端部署 + +### 1. 启动后端服务器 + +移动端需要通过后端服务器代理 SSH 连接： + +```bash +# 启动服务器 npm run server # 或开发模式 (自动重启) @@ -69,10 +179,10 @@ npm run server:dev 服务器将在 `http://0.0.0.0:3001` 启动。 -#### 2. 构建并运行安卓应用 +### 2. 构建 Android 应用 ```bash -# 首次使用需要初始化 +# 首次使用需要添加 Android 平台 npm run cap:add:android # 构建并打开 Android Studio @@ -82,103 +192,141 @@ npm run android npm run android:run ``` -#### 3. 在手机上配置 +### 3. 手机配置 1. 确保手机和电脑在同一局域网 2. 打开 EasyShell 应用 -3. 点击右上角设置图标 -4. 输入电脑 IP 地址，如 `http://192.168.1.100:3001` -5. 点击测试连接，确认成功后保存 +3. 进入设置配置服务器地址 +4. 输入电脑 IP，如 `http://192.168.1.100:3001` +5. 测试连接成功后即可使用 -## 📦 构建发布 +--- -### 桌面端 +## ⌨️ 快捷键 -```bash -# Windows -npm run dist +| 快捷键 | 功能 | +|--------|------| +| `Ctrl + K` | 打开命令面板 | +| `Ctrl + F` | SFTP 搜索文件 | +| `Enter` | 执行选中命令 | +| `Esc` | 关闭面板/弹窗 | -# macOS (需要在 Mac 上构建) -npm run dist - -# Linux -npm run dist -``` - -### 安卓端 - -```bash -# 构建 Release APK -npm run build -npx cap sync android -cd android && ./gradlew assembleRelease -``` - -APK 位于 `android/app/build/outputs/apk/release/` +--- ## 🔧 配置说明 -### 服务器配置 +### 数据存储 -服务器默认端口 `3001`，可通过环境变量修改： +- **桌面端**: 使用 `electron-store` + SQLite 本地存储 +- **移动端**: 使用 `localStorage` 存储配置 -```bash -PORT=8080 npm run server -``` +### 云端同步 -### Capacitor 配置 +支持 MySQL 数据库同步，配置步骤： -编辑 `capacitor.config.ts` 可以修改： +1. 点击设置按钮 +2. 切换到「数据库同步」标签 +3. 填写 MySQL 连接信息 +4. 点击「连接数据库」 -- 应用 ID -- 状态栏样式 -- 背景颜色 -- 等等 +数据库不存在时会自动创建。 + +--- ## 🛡️ 安全说明 -- SSH 密码和私钥存储在本地 (桌面端使用 electron-store，移动端使用 localStorage) +- SSH 密码和私钥加密存储在本地 - 移动端通过 WebSocket 与后端服务器通信 - 建议在受信任的网络环境中使用 - 生产环境建议配置 HTTPS/WSS -## 📱 移动端限制 - -由于浏览器安全限制，移动端有以下差异： - -| 功能 | 桌面端 | 移动端 | -|------|--------|--------| -| SSH 连接 | 直连 | 通过服务器代理 | -| SFTP 上传 | ✅ | ⚠️ 需要文件选择器 | -| MySQL 同步 | ✅ | ❌ 暂不支持 | -| 窗口控制 | ✅ | ❌ 不需要 | +--- ## 🤝 技术栈 -**前端:** -- React 18 -- Tailwind CSS -- Framer Motion -- xterm.js +| -**桌面端:** -- Electron 28 -- electron-store -- ssh2 +**前端** -**移动端:** -- Capacitor 5 -- Socket.IO + | +-**后端:** -- Express -- Socket.IO -- ssh2 +**桌面端** -## 📄 许可证 + | +-MIT License +**移动端** + + | ++ +**后端** + + | +
|
+
+React 18 +Tailwind CSS +Framer Motion +xterm.js + + |
+
+
+Electron 28 +electron-store +ssh2 +sql.js + + |
+
+
+Capacitor 5 +Socket.IO Client +Android Studio + + |
+
+
+Express +Socket.IO +ssh2 +mysql2 + + |
+
+ Made with ❤️ and ⚡ by EasyShell Team +
+ ++ © 2024 EasyShell - Cyberpunk Edition +
diff --git a/docs/1.png b/docs/1.png new file mode 100644 index 0000000..e7a7c04 Binary files /dev/null and b/docs/1.png differ diff --git a/docs/2.png b/docs/2.png new file mode 100644 index 0000000..bf2f7c2 Binary files /dev/null and b/docs/2.png differ diff --git a/docs/3.png b/docs/3.png new file mode 100644 index 0000000..8ff50d1 Binary files /dev/null and b/docs/3.png differ diff --git a/docs/4.png b/docs/4.png new file mode 100644 index 0000000..8280d5e Binary files /dev/null and b/docs/4.png differ diff --git a/docs/5.png b/docs/5.png new file mode 100644 index 0000000..f2cfca3 Binary files /dev/null and b/docs/5.png differ diff --git a/docs/6.png b/docs/6.png new file mode 100644 index 0000000..609ab7c Binary files /dev/null and b/docs/6.png differ diff --git a/docs/7.png b/docs/7.png new file mode 100644 index 0000000..57656ab Binary files /dev/null and b/docs/7.png differ diff --git a/docs/8.png b/docs/8.png new file mode 100644 index 0000000..77ed5c5 Binary files /dev/null and b/docs/8.png differ