ethanfly/easyshell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance README.md with comprehensive project details

Browse Source 
- Updated project title and description with a cyberpunk theme.
- Added visual elements including logos and badges for versioning and technology stack.
- Included detailed sections for interface previews, features, project structure, quick start guide, and keyboard shortcuts.
- Improved clarity on mobile deployment and configuration steps.
- Enhanced security and data storage explanations, including MySQL cloud sync support.
This commit is contained in:
Ethanfly 2025-12-29 14:02:45 +08:00
parent 014bac08ea
commit 8393737b4c
9 changed files with 238 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

328
README.md
View File

@ -1,19 +1,92 @@
# EasyShell 🚀
<p align="center">
<img src="public/icon.svg" width="120" height="120" alt="EasyShell Logo">
</p>
> 赛博朋克风格跨平台远程 Shell 管理终端
<h1 align="center">EasyShell</h1>
支持 **Windows / macOS / Linux / Android** 多平台运行。
<p align="center">
<strong>🚀 赛博朋克风格的跨平台远程 Shell 管理终端</strong>
</p>
![EasyShell](https://img.shields.io/badge/version-1.0.0-blue) ![Electron](https://img.shields.io/badge/Electron-28-green) ![Capacitor](https://img.shields.io/badge/Capacitor-5.6-orange)
<p align="center">
<img src="https://img.shields.io/badge/版本-1.0.0-00d4ff?style=for-the-badge&labelColor=0a1628" alt="Version">
<img src="https://img.shields.io/badge/Electron-28-00ff88?style=for-the-badge&labelColor=0a1628" alt="Electron">
<img src="https://img.shields.io/badge/React-18-61dafb?style=for-the-badge&labelColor=0a1628" alt="React">
<img src="https://img.shields.io/badge/Capacitor-5.6-ff6b35?style=for-the-badge&labelColor=0a1628" alt="Capacitor">
</p>
<p align="center">
支持 <strong>Windows</strong> · <strong>macOS</strong> · <strong>Linux</strong> · <strong>Android</strong> 多平台运行
</p>
---
## 📸 界面预览
### 🏠 欢迎界面
精心设计的赛博朋克风格欢迎界面，霓虹光效与深色主题完美融合。
![欢迎界面](docs/1.png)
### ➕ 添加主机
便捷的主机配置面板，支持密码和 SSH 私钥两种认证方式，可自定义分组和标识颜色。
![添加主机](docs/2.png)
### 💻 SSH 终端
功能完整的 SSH 终端，基于 xterm.js 打造，支持完整的终端模拟体验。
![SSH终端](docs/4.png)
### 📁 SFTP 文件管理器
强大的 SFTP 文件管理功能，支持文件浏览、上传、下载、重命名、删除等操作。
![SFTP文件管理器](docs/5.png)
### 📊 主机信息面板
实时监控远程主机状态，包括 CPU、内存、磁盘使用情况和系统运行时间。
![主机信息面板](docs/6.png)
### ⌨️ 快捷命令面板
内置常用命令快捷面板，按 `Ctrl + K` 快速调出，支持 Docker、文件操作等常用命令。
![快捷命令](docs/7.png)
### 🗂️ 主机管理
集中管理所有 SSH 主机，支持分组、搜索、批量操作。
![主机管理](docs/8.png)
### ☁️ 云端同步
支持 MySQL 数据库云端同步，实现多设备主机配置共享。
![云端同步](docs/3.png)
---
## ✨ 功能特点
- 🎨 **赛博朋克 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
<table>
<tr>
<td align="center" width="25%">
**桌面端:**
- Electron 28
- electron-store
- ssh2
**前端**
**移动端:**
- Capacitor 5
- Socket.IO
</td>
<td align="center" width="25%">
**后端:**
- Express
- Socket.IO
- ssh2
**桌面端**
## 📄 许可证
</td>
<td align="center" width="25%">
MIT License
**移动端**
</td>
<td align="center" width="25%">
**后端**
</td>
</tr>
<tr>
<td align="center">
React 18<br>
Tailwind CSS<br>
Framer Motion<br>
xterm.js
</td>
<td align="center">
Electron 28<br>
electron-store<br>
ssh2<br>
sql.js
</td>
<td align="center">
Capacitor 5<br>
Socket.IO Client<br>
Android Studio
</td>
<td align="center">
Express<br>
Socket.IO<br>
ssh2<br>
mysql2
</td>
</tr>
</table>
---
Made with ❤️ and ⚡ by EasyShell Team
## 📦 脚本命令
```bash
npm start # 启动开发模式
npm run build # 构建 React 应用
npm run dist # 打包桌面应用
npm run icons # 生成应用图标
npm run server # 启动后端服务器
npm run android # 构建并打开 Android Studio
```
---
## 📄 许可证
[MIT License](LICENSE)
---
<p align="center">
Made with ❤️ and ⚡ by <strong>EasyShell Team</strong>
</p>
<p align="center">
<sub>© 2024 EasyShell - Cyberpunk Edition</sub>
</p>

BIN
docs/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 406 KiB

BIN
docs/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 404 KiB

BIN
docs/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

BIN
docs/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
docs/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 115 KiB

BIN
docs/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

BIN
docs/7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
docs/8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB