Enhance README.md with comprehensive project details

- 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.

README.md

@@ -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 文件管理** - 远程文件浏览、上传、下载
+| 🎨 **赛博朋克 UI** | 霓虹色调、玻璃拟态、动态光效，打造独特视觉体验 |
-- 📊 **主机信息面板** - 实时系统状态监控
+| 🖥️ **SSH 终端** | 完整的 xterm.js 终端模拟，支持各种终端操作 |
-- ☁️ **云端同步** - MySQL 数据库同步支持
+| 📁 **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     # 数据库服务
+│   │   ├── database.js     # 数据库服务 (SQLite/MySQL)
-│   │   ├── ssh.js          # SSH 服务 (Electron)
+│   │   ├── ssh.js          # SSH 服务
-│   │   └── sftp.js         # SFTP 服务 (Electron)
+│   │   └── 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. 点击右上角设置图标
+3. 进入设置配置服务器地址
-4. 输入电脑 IP 地址，如 `http://192.168.1.100:3001`
+4. 输入电脑 IP，如 `http://192.168.1.100:3001`
-5. 点击测试连接，确认成功后保存
+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 同步 | ✅ | ❌ 暂不支持 |
-| 窗口控制 | ✅ | ❌ 不需要 |
 
 ## 🤝 技术栈
 
-**前端:**
+<table>
-- React 18
+<tr>
-- Tailwind CSS
+<td align="center" width="25%">
-- Framer Motion
-- xterm.js
 
-**桌面端:**
+**前端**
-- Electron 28
-- electron-store
-- ssh2
 
-**移动端:**
+</td>
-- Capacitor 5
+<td align="center" width="25%">
-- Socket.IO
 
-**后端:**
+**桌面端**
-- 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>