first
This commit is contained in:
commit
95f842f6cb
33
.gitignore
vendored
Normal file
33
.gitignore
vendored
Normal file
@ -0,0 +1,33 @@
|
||||
# Dependencies
|
||||
node_modules/
|
||||
|
||||
# Build outputs
|
||||
build/
|
||||
dist/
|
||||
|
||||
# Local database
|
||||
*.db
|
||||
|
||||
# Environment files
|
||||
.env
|
||||
.env.local
|
||||
|
||||
# IDE
|
||||
.idea/
|
||||
.vscode/
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
# OS files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Debug logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Electron
|
||||
out/
|
||||
*.asar
|
||||
|
||||
184
README.md
Normal file
184
README.md
Normal file
@ -0,0 +1,184 @@
|
||||
# 🚀 EasyShell
|
||||
|
||||
高颜值远程 Shell 管理终端 - 一款现代化的 SSH 连接管理工具
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## ✨ 特性
|
||||
|
||||
- 🎨 **高颜值界面** - 现代化深色主题，精心设计的 UI/UX
|
||||
- 🔐 **SSH 连接管理** - 支持密码和私钥认证方式
|
||||
- 💾 **双模式存储** - 本地 SQLite + 远程 MySQL 同步
|
||||
- 📝 **智能命令提示** - 内置常用命令，支持搜索和使用频率排序
|
||||
- 🔄 **数据同步** - 自动建库建表，一键上传/下载数据
|
||||
- 📑 **多标签终端** - 同时管理多个 SSH 会话
|
||||
- ⌨️ **快捷键支持** - Ctrl+K 打开命令面板
|
||||
|
||||
## 📸 界面预览
|
||||
|
||||
应用采用深色主题设计，包含：
|
||||
- 可折叠侧边栏（主机列表分组显示）
|
||||
- 多标签终端区域
|
||||
- 命令面板（Ctrl+K 快速调用）
|
||||
- 主机管理弹窗
|
||||
- 数据库连接设置
|
||||
|
||||
## 🛠️ 技术栈
|
||||
|
||||
- **Electron** - 跨平台桌面应用框架
|
||||
- **React** - 用户界面库
|
||||
- **TailwindCSS** - 原子化 CSS 框架
|
||||
- **Framer Motion** - 动画库
|
||||
- **XTerm.js** - 终端模拟器
|
||||
- **SSH2** - SSH 连接库
|
||||
- **better-sqlite3** - 本地数据库
|
||||
- **mysql2** - MySQL 连接库
|
||||
|
||||
## 📦 安装
|
||||
|
||||
### 环境要求
|
||||
|
||||
- Node.js >= 18.0.0
|
||||
- npm >= 9.0.0
|
||||
- Python 3.x（用于编译原生模块）
|
||||
- Visual Studio Build Tools（Windows）/ Xcode（macOS）
|
||||
|
||||
### 安装步骤
|
||||
|
||||
```bash
|
||||
# 克隆项目
|
||||
git clone https://github.com/your-username/easyshell.git
|
||||
cd easyshell
|
||||
|
||||
# 安装依赖
|
||||
npm install
|
||||
|
||||
# 重新编译原生模块（如果遇到问题）
|
||||
npm rebuild better-sqlite3 --build-from-source
|
||||
npm rebuild ssh2 --build-from-source
|
||||
|
||||
# 启动开发模式
|
||||
npm start
|
||||
```
|
||||
|
||||
### 构建发布版本
|
||||
|
||||
```bash
|
||||
# 构建生产版本
|
||||
npm run dist
|
||||
```
|
||||
|
||||
## 🚀 使用说明
|
||||
|
||||
### 本地模式
|
||||
|
||||
应用默认使用本地 SQLite 数据库存储数据，无需任何配置即可使用。
|
||||
|
||||
### 远程同步模式
|
||||
|
||||
1. 点击左下角「本地模式」或设置图标
|
||||
2. 输入 MySQL 服务器信息：
|
||||
- 主机地址
|
||||
- 端口（默认 3306）
|
||||
- 用户名
|
||||
- 密码
|
||||
- 数据库名（默认 easyshell）
|
||||
3. 点击「连接数据库」
|
||||
4. 系统将自动创建数据库和所需的表结构
|
||||
|
||||
### 添加主机
|
||||
|
||||
1. 点击侧边栏的 ➕ 按钮或「添加主机」
|
||||
2. 填写主机信息：
|
||||
- 名称（显示名）
|
||||
- 分组（用于分类）
|
||||
- 主机地址
|
||||
- 端口（默认 22）
|
||||
- 用户名
|
||||
- 密码或 SSH 私钥
|
||||
3. 可选择标识颜色
|
||||
4. 点击「测试连接」验证配置
|
||||
5. 点击「添加主机」保存
|
||||
|
||||
### 命令提示
|
||||
|
||||
- 按 `Ctrl+K` 打开命令面板
|
||||
- 搜索或浏览预设命令
|
||||
- 使用方向键选择，回车执行
|
||||
- 命令会直接发送到当前终端
|
||||
|
||||
## 📁 项目结构
|
||||
|
||||
```
|
||||
easyshell/
|
||||
├── main.js # Electron 主进程
|
||||
├── preload.js # 预加载脚本（IPC 桥接）
|
||||
├── package.json # 项目配置
|
||||
├── tailwind.config.js # TailwindCSS 配置
|
||||
├── public/
|
||||
│ └── index.html # HTML 模板
|
||||
└── src/
|
||||
├── index.js # React 入口
|
||||
├── index.css # 全局样式
|
||||
├── App.js # 主应用组件
|
||||
├── components/
|
||||
│ ├── TitleBar.js # 标题栏
|
||||
│ ├── Sidebar.js # 侧边栏
|
||||
│ ├── Terminal.js # 终端组件
|
||||
│ ├── HostManager.js # 主机管理
|
||||
│ ├── Settings.js # 设置面板
|
||||
│ └── CommandPalette.js # 命令面板
|
||||
└── services/
|
||||
├── database.js # 数据库服务
|
||||
└── ssh.js # SSH 服务
|
||||
```
|
||||
|
||||
## ⌨️ 快捷键
|
||||
|
||||
| 快捷键 | 功能 |
|
||||
|--------|------|
|
||||
| `Ctrl+K` | 打开命令面板 |
|
||||
| `Esc` | 关闭弹窗 |
|
||||
| `↑/↓` | 命令面板中导航 |
|
||||
| `Enter` | 执行选中命令 |
|
||||
|
||||
## 🔧 数据库结构
|
||||
|
||||
### hosts 表（主机信息）
|
||||
| 字段 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| id | INT | 主键 |
|
||||
| name | VARCHAR | 主机名称 |
|
||||
| host | VARCHAR | 主机地址 |
|
||||
| port | INT | SSH 端口 |
|
||||
| username | VARCHAR | 用户名 |
|
||||
| password | TEXT | 密码（加密存储建议） |
|
||||
| private_key | TEXT | SSH 私钥 |
|
||||
| group_name | VARCHAR | 分组名 |
|
||||
| color | VARCHAR | 标识颜色 |
|
||||
| description | TEXT | 备注 |
|
||||
|
||||
### commands 表（命令提示）
|
||||
| 字段 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| id | INT | 主键 |
|
||||
| command | TEXT | 命令内容 |
|
||||
| description | TEXT | 命令描述 |
|
||||
| category | VARCHAR | 分类 |
|
||||
| usage_count | INT | 使用次数 |
|
||||
|
||||
## 🤝 贡献
|
||||
|
||||
欢迎提交 Issue 和 Pull Request！
|
||||
|
||||
## 📄 许可证
|
||||
|
||||
MIT License
|
||||
|
||||
---
|
||||
|
||||
Made with ❤️ by EasyShell Team
|
||||
|
||||
228
main.js
Normal file
228
main.js
Normal file
@ -0,0 +1,228 @@
|
||||
/**
|
||||
* EasyShell - Electron 主进程
|
||||
*/
|
||||
const { app, BrowserWindow, ipcMain, Menu } = require('electron');
|
||||
const path = require('path');
|
||||
const databaseService = require('./src/services/database');
|
||||
const sshService = require('./src/services/ssh');
|
||||
|
||||
let mainWindow;
|
||||
const isDev = process.env.NODE_ENV !== 'production' || !app.isPackaged;
|
||||
|
||||
// 活动的SSH连接
|
||||
const activeConnections = new Map();
|
||||
|
||||
function createWindow() {
|
||||
mainWindow = new BrowserWindow({
|
||||
width: 1400,
|
||||
height: 900,
|
||||
minWidth: 1000,
|
||||
minHeight: 700,
|
||||
frame: false,
|
||||
backgroundColor: '#0a0e14',
|
||||
webPreferences: {
|
||||
nodeIntegration: false,
|
||||
contextIsolation: true,
|
||||
preload: path.join(__dirname, 'preload.js'),
|
||||
},
|
||||
icon: path.join(__dirname, 'public/icon.png'),
|
||||
});
|
||||
|
||||
// 加载应用
|
||||
if (isDev) {
|
||||
mainWindow.loadURL('http://localhost:3000');
|
||||
mainWindow.webContents.openDevTools();
|
||||
} else {
|
||||
mainWindow.loadFile(path.join(__dirname, 'build/index.html'));
|
||||
}
|
||||
|
||||
// 隐藏菜单栏
|
||||
Menu.setApplicationMenu(null);
|
||||
|
||||
mainWindow.on('closed', () => {
|
||||
mainWindow = null;
|
||||
});
|
||||
}
|
||||
|
||||
// 应用启动
|
||||
app.whenReady().then(async () => {
|
||||
// 初始化本地数据库 (异步)
|
||||
await databaseService.initLocalDatabase();
|
||||
|
||||
createWindow();
|
||||
|
||||
app.on('activate', () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) {
|
||||
createWindow();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
// 关闭所有SSH连接
|
||||
sshService.disconnectAll();
|
||||
// 关闭数据库
|
||||
databaseService.close();
|
||||
|
||||
if (process.platform !== 'darwin') {
|
||||
app.quit();
|
||||
}
|
||||
});
|
||||
|
||||
// ========== 窗口控制 IPC ==========
|
||||
|
||||
ipcMain.on('window:minimize', () => {
|
||||
mainWindow?.minimize();
|
||||
});
|
||||
|
||||
ipcMain.on('window:maximize', () => {
|
||||
if (mainWindow?.isMaximized()) {
|
||||
mainWindow.unmaximize();
|
||||
} else {
|
||||
mainWindow?.maximize();
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.on('window:close', () => {
|
||||
mainWindow?.close();
|
||||
});
|
||||
|
||||
ipcMain.handle('window:isMaximized', () => {
|
||||
return mainWindow?.isMaximized();
|
||||
});
|
||||
|
||||
// ========== 数据库 IPC ==========
|
||||
|
||||
// MySQL连接
|
||||
ipcMain.handle('db:connectMySQL', async (event, config) => {
|
||||
return await databaseService.connectMySQL(config);
|
||||
});
|
||||
|
||||
ipcMain.handle('db:disconnectMySQL', async () => {
|
||||
return await databaseService.disconnectMySQL();
|
||||
});
|
||||
|
||||
ipcMain.handle('db:isRemoteConnected', () => {
|
||||
return databaseService.isRemoteConnected;
|
||||
});
|
||||
|
||||
// 同步
|
||||
ipcMain.handle('db:syncToRemote', async () => {
|
||||
return await databaseService.syncToRemote();
|
||||
});
|
||||
|
||||
ipcMain.handle('db:syncFromRemote', async () => {
|
||||
return await databaseService.syncFromRemote();
|
||||
});
|
||||
|
||||
// 主机管理
|
||||
ipcMain.handle('hosts:getAll', () => {
|
||||
return databaseService.getAllHosts();
|
||||
});
|
||||
|
||||
ipcMain.handle('hosts:getById', (event, id) => {
|
||||
return databaseService.getHostById(id);
|
||||
});
|
||||
|
||||
ipcMain.handle('hosts:add', (event, host) => {
|
||||
return databaseService.addHost(host);
|
||||
});
|
||||
|
||||
ipcMain.handle('hosts:update', (event, { id, host }) => {
|
||||
return databaseService.updateHost(id, host);
|
||||
});
|
||||
|
||||
ipcMain.handle('hosts:delete', (event, id) => {
|
||||
return databaseService.deleteHost(id);
|
||||
});
|
||||
|
||||
// 命令
|
||||
ipcMain.handle('commands:search', (event, keyword) => {
|
||||
return databaseService.searchCommands(keyword);
|
||||
});
|
||||
|
||||
ipcMain.handle('commands:getAll', () => {
|
||||
return databaseService.getAllCommands();
|
||||
});
|
||||
|
||||
ipcMain.handle('commands:add', (event, command) => {
|
||||
return databaseService.addCommand(command);
|
||||
});
|
||||
|
||||
ipcMain.handle('commands:incrementUsage', (event, id) => {
|
||||
return databaseService.incrementCommandUsage(id);
|
||||
});
|
||||
|
||||
// 命令片段
|
||||
ipcMain.handle('snippets:getAll', () => {
|
||||
return databaseService.getAllSnippets();
|
||||
});
|
||||
|
||||
ipcMain.handle('snippets:add', (event, snippet) => {
|
||||
return databaseService.addSnippet(snippet);
|
||||
});
|
||||
|
||||
ipcMain.handle('snippets:delete', (event, id) => {
|
||||
return databaseService.deleteSnippet(id);
|
||||
});
|
||||
|
||||
// ========== SSH IPC ==========
|
||||
|
||||
ipcMain.handle('ssh:connect', async (event, hostConfig) => {
|
||||
// 预先生成 connectionId
|
||||
const connectionId = `${hostConfig.host}:${hostConfig.port || 22}-${Date.now()}`;
|
||||
|
||||
try {
|
||||
const connection = await sshService.connect(hostConfig, connectionId, {
|
||||
onData: (data) => {
|
||||
mainWindow?.webContents.send(`ssh:data:${connectionId}`, data);
|
||||
},
|
||||
onClose: () => {
|
||||
mainWindow?.webContents.send(`ssh:close:${connectionId}`);
|
||||
activeConnections.delete(connectionId);
|
||||
},
|
||||
onError: (error) => {
|
||||
mainWindow?.webContents.send(`ssh:error:${connectionId}`, error.message);
|
||||
},
|
||||
});
|
||||
|
||||
activeConnections.set(connectionId, connection);
|
||||
|
||||
// 更新最后连接时间
|
||||
if (hostConfig.id) {
|
||||
databaseService.updateLastConnected(hostConfig.id);
|
||||
}
|
||||
|
||||
return { success: true, connectionId: connectionId };
|
||||
} catch (error) {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.on('ssh:write', (event, { connectionId, data }) => {
|
||||
const connection = activeConnections.get(connectionId);
|
||||
if (connection) {
|
||||
connection.write(data);
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.on('ssh:resize', (event, { connectionId, cols, rows }) => {
|
||||
const connection = activeConnections.get(connectionId);
|
||||
if (connection) {
|
||||
connection.resize(cols, rows);
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.on('ssh:disconnect', (event, connectionId) => {
|
||||
sshService.disconnect(connectionId);
|
||||
activeConnections.delete(connectionId);
|
||||
});
|
||||
|
||||
ipcMain.handle('ssh:test', async (event, hostConfig) => {
|
||||
return await sshService.testConnection(hostConfig);
|
||||
});
|
||||
|
||||
ipcMain.handle('ssh:exec', async (event, { hostConfig, command }) => {
|
||||
return await sshService.exec(hostConfig, command);
|
||||
});
|
||||
|
||||
20937
package-lock.json
generated
Normal file
20937
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
63
package.json
Normal file
63
package.json
Normal file
@ -0,0 +1,63 @@
|
||||
{
|
||||
"name": "easyshell",
|
||||
"version": "1.0.0",
|
||||
"description": "高颜值远程Shell管理终端",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"start": "concurrently \"npm run react\" \"wait-on http://localhost:3000 && electron .\"",
|
||||
"react": "cross-env BROWSER=none react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"electron": "electron .",
|
||||
"pack": "electron-builder --dir",
|
||||
"dist": "npm run build && electron-builder"
|
||||
},
|
||||
"build": {
|
||||
"appId": "com.easyshell.app",
|
||||
"productName": "EasyShell",
|
||||
"directories": {
|
||||
"output": "dist"
|
||||
},
|
||||
"files": [
|
||||
"build/**/*",
|
||||
"main.js",
|
||||
"preload.js",
|
||||
"src/services/**/*"
|
||||
],
|
||||
"win": {
|
||||
"target": "nsis",
|
||||
"icon": "public/icon.ico"
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"electron-store": "^8.1.0",
|
||||
"framer-motion": "^10.16.16",
|
||||
"mysql2": "^3.6.5",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^4.12.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"sql.js": "^1.10.0",
|
||||
"ssh2": "^1.15.0",
|
||||
"@xterm/xterm": "^5.5.0",
|
||||
"@xterm/addon-fit": "^0.10.0",
|
||||
"@xterm/addon-web-links": "^0.11.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.16",
|
||||
"concurrently": "^8.2.2",
|
||||
"cross-env": "^10.1.0",
|
||||
"electron": "^28.0.0",
|
||||
"electron-builder": "^24.9.1",
|
||||
"postcss": "^8.4.32",
|
||||
"tailwindcss": "^3.4.0",
|
||||
"wait-on": "^7.2.0"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
"last 1 electron version"
|
||||
],
|
||||
"development": [
|
||||
"last 1 electron version"
|
||||
]
|
||||
}
|
||||
}
|
||||
7
postcss.config.js
Normal file
7
postcss.config.js
Normal file
@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
||||
76
preload.js
Normal file
76
preload.js
Normal file
@ -0,0 +1,76 @@
|
||||
/**
|
||||
* EasyShell - 预加载脚本
|
||||
* 安全地暴露Node.js API给渲染进程
|
||||
*/
|
||||
const { contextBridge, ipcRenderer } = require('electron');
|
||||
|
||||
contextBridge.exposeInMainWorld('electronAPI', {
|
||||
// 窗口控制
|
||||
window: {
|
||||
minimize: () => ipcRenderer.send('window:minimize'),
|
||||
maximize: () => ipcRenderer.send('window:maximize'),
|
||||
close: () => ipcRenderer.send('window:close'),
|
||||
isMaximized: () => ipcRenderer.invoke('window:isMaximized'),
|
||||
},
|
||||
|
||||
// 数据库操作
|
||||
db: {
|
||||
connectMySQL: (config) => ipcRenderer.invoke('db:connectMySQL', config),
|
||||
disconnectMySQL: () => ipcRenderer.invoke('db:disconnectMySQL'),
|
||||
isRemoteConnected: () => ipcRenderer.invoke('db:isRemoteConnected'),
|
||||
syncToRemote: () => ipcRenderer.invoke('db:syncToRemote'),
|
||||
syncFromRemote: () => ipcRenderer.invoke('db:syncFromRemote'),
|
||||
},
|
||||
|
||||
// 主机管理
|
||||
hosts: {
|
||||
getAll: () => ipcRenderer.invoke('hosts:getAll'),
|
||||
getById: (id) => ipcRenderer.invoke('hosts:getById', id),
|
||||
add: (host) => ipcRenderer.invoke('hosts:add', host),
|
||||
update: (id, host) => ipcRenderer.invoke('hosts:update', { id, host }),
|
||||
delete: (id) => ipcRenderer.invoke('hosts:delete', id),
|
||||
},
|
||||
|
||||
// 命令
|
||||
commands: {
|
||||
search: (keyword) => ipcRenderer.invoke('commands:search', keyword),
|
||||
getAll: () => ipcRenderer.invoke('commands:getAll'),
|
||||
add: (command) => ipcRenderer.invoke('commands:add', command),
|
||||
incrementUsage: (id) => ipcRenderer.invoke('commands:incrementUsage', id),
|
||||
},
|
||||
|
||||
// 命令片段
|
||||
snippets: {
|
||||
getAll: () => ipcRenderer.invoke('snippets:getAll'),
|
||||
add: (snippet) => ipcRenderer.invoke('snippets:add', snippet),
|
||||
delete: (id) => ipcRenderer.invoke('snippets:delete', id),
|
||||
},
|
||||
|
||||
// SSH
|
||||
ssh: {
|
||||
connect: (hostConfig) => ipcRenderer.invoke('ssh:connect', hostConfig),
|
||||
write: (connectionId, data) => ipcRenderer.send('ssh:write', { connectionId, data }),
|
||||
resize: (connectionId, cols, rows) => ipcRenderer.send('ssh:resize', { connectionId, cols, rows }),
|
||||
disconnect: (connectionId) => ipcRenderer.send('ssh:disconnect', connectionId),
|
||||
test: (hostConfig) => ipcRenderer.invoke('ssh:test', hostConfig),
|
||||
exec: (hostConfig, command) => ipcRenderer.invoke('ssh:exec', { hostConfig, command }),
|
||||
|
||||
// 事件监听
|
||||
onData: (connectionId, callback) => {
|
||||
const channel = `ssh:data:${connectionId}`;
|
||||
ipcRenderer.on(channel, (event, data) => callback(data));
|
||||
return () => ipcRenderer.removeAllListeners(channel);
|
||||
},
|
||||
onClose: (connectionId, callback) => {
|
||||
const channel = `ssh:close:${connectionId}`;
|
||||
ipcRenderer.on(channel, () => callback());
|
||||
return () => ipcRenderer.removeAllListeners(channel);
|
||||
},
|
||||
onError: (connectionId, callback) => {
|
||||
const channel = `ssh:error:${connectionId}`;
|
||||
ipcRenderer.on(channel, (event, error) => callback(error));
|
||||
return () => ipcRenderer.removeAllListeners(channel);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
43
public/index.html
Normal file
43
public/index.html
Normal file
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#0a0e14" />
|
||||
<meta name="description" content="EasyShell - 高颜值远程Shell管理终端" />
|
||||
<title>EasyShell</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
overflow: hidden;
|
||||
background: #0a0e14;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #161b22;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #30363d;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #484f58;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>您需要启用 JavaScript 才能运行此应用。</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
281
src/App.js
Normal file
281
src/App.js
Normal file
@ -0,0 +1,281 @@
|
||||
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import TitleBar from './components/TitleBar';
|
||||
import Sidebar from './components/Sidebar';
|
||||
import Terminal from './components/Terminal';
|
||||
import HostManager from './components/HostManager';
|
||||
import Settings from './components/Settings';
|
||||
import CommandPalette from './components/CommandPalette';
|
||||
|
||||
function App() {
|
||||
const [hosts, setHosts] = useState([]);
|
||||
const [activeTabs, setActiveTabs] = useState([]);
|
||||
const [activeTabId, setActiveTabId] = useState(null);
|
||||
const [showHostManager, setShowHostManager] = useState(false);
|
||||
const [editingHost, setEditingHost] = useState(null);
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
const [showCommandPalette, setShowCommandPalette] = useState(false);
|
||||
const [isRemoteConnected, setIsRemoteConnected] = useState(false);
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||
|
||||
// 加载主机列表
|
||||
const loadHosts = useCallback(async () => {
|
||||
if (window.electronAPI) {
|
||||
const hostList = await window.electronAPI.hosts.getAll();
|
||||
setHosts(hostList);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 检查远程连接状态
|
||||
const checkRemoteStatus = useCallback(async () => {
|
||||
if (window.electronAPI) {
|
||||
const connected = await window.electronAPI.db.isRemoteConnected();
|
||||
setIsRemoteConnected(connected);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadHosts();
|
||||
checkRemoteStatus();
|
||||
}, [loadHosts, checkRemoteStatus]);
|
||||
|
||||
// 键盘快捷键
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e) => {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
setShowCommandPalette(true);
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
setShowCommandPalette(false);
|
||||
setShowHostManager(false);
|
||||
setShowSettings(false);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, []);
|
||||
|
||||
// 连接主机
|
||||
const connectHost = useCallback((host) => {
|
||||
const tabId = `terminal-${host.id}-${Date.now()}`;
|
||||
const newTab = {
|
||||
id: tabId,
|
||||
hostId: host.id,
|
||||
title: host.name,
|
||||
host: host.host,
|
||||
type: 'terminal',
|
||||
connected: false,
|
||||
};
|
||||
|
||||
setActiveTabs((prev) => [...prev, newTab]);
|
||||
setActiveTabId(tabId);
|
||||
setShowHostManager(false);
|
||||
}, []);
|
||||
|
||||
// 关闭标签页
|
||||
const closeTab = useCallback((tabId) => {
|
||||
setActiveTabs((prev) => {
|
||||
const newTabs = prev.filter((t) => t.id !== tabId);
|
||||
return newTabs;
|
||||
});
|
||||
setActiveTabId((prevActiveId) => {
|
||||
if (prevActiveId === tabId) {
|
||||
const remainingTabs = activeTabs.filter((t) => t.id !== tabId);
|
||||
return remainingTabs.length > 0 ? remainingTabs[remainingTabs.length - 1].id : null;
|
||||
}
|
||||
return prevActiveId;
|
||||
});
|
||||
}, [activeTabs]);
|
||||
|
||||
// 更新连接状态
|
||||
const handleConnectionChange = useCallback((tabId, connected) => {
|
||||
setActiveTabs((prev) =>
|
||||
prev.map((t) => (t.id === tabId ? { ...t, connected } : t))
|
||||
);
|
||||
}, []);
|
||||
|
||||
// 处理主机更新
|
||||
const handleHostsUpdate = useCallback(() => {
|
||||
loadHosts();
|
||||
}, [loadHosts]);
|
||||
|
||||
// 编辑主机
|
||||
const handleEditHost = useCallback((host) => {
|
||||
setEditingHost(host);
|
||||
setShowHostManager(true);
|
||||
}, []);
|
||||
|
||||
const openHostManager = useCallback(() => {
|
||||
setEditingHost(null);
|
||||
setShowHostManager(true);
|
||||
}, []);
|
||||
|
||||
const openSettings = useCallback(() => {
|
||||
setShowSettings(true);
|
||||
}, []);
|
||||
|
||||
const openCommandPalette = useCallback(() => {
|
||||
setShowCommandPalette(true);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="h-screen flex flex-col gradient-bg">
|
||||
<TitleBar />
|
||||
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
<Sidebar
|
||||
hosts={hosts}
|
||||
activeTabs={activeTabs}
|
||||
activeTabId={activeTabId}
|
||||
onSelectTab={setActiveTabId}
|
||||
onCloseTab={closeTab}
|
||||
onConnectHost={connectHost}
|
||||
onOpenHostManager={openHostManager}
|
||||
onEditHost={handleEditHost}
|
||||
onOpenSettings={openSettings}
|
||||
isRemoteConnected={isRemoteConnected}
|
||||
collapsed={sidebarCollapsed}
|
||||
onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
|
||||
/>
|
||||
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
{/* 标签栏 */}
|
||||
{activeTabs.length > 0 && (
|
||||
<div className="h-10 bg-shell-surface/50 border-b border-shell-border flex items-center px-2 gap-1 overflow-x-auto custom-scrollbar flex-shrink-0">
|
||||
{activeTabs.map((tab) => (
|
||||
<div
|
||||
key={tab.id}
|
||||
className={`
|
||||
flex items-center gap-2 px-3 py-1.5 rounded-md cursor-pointer
|
||||
transition-all duration-200 group min-w-0 flex-shrink-0
|
||||
${activeTabId === tab.id
|
||||
? 'bg-shell-accent/20 text-shell-accent border border-shell-accent/30'
|
||||
: 'hover:bg-shell-card text-shell-text-dim hover:text-shell-text border border-transparent'
|
||||
}
|
||||
`}
|
||||
onClick={() => setActiveTabId(tab.id)}
|
||||
>
|
||||
<span className={`w-2 h-2 rounded-full flex-shrink-0 ${
|
||||
tab.connected ? 'status-online' : 'status-offline'
|
||||
}`} />
|
||||
<span className="truncate text-sm font-medium max-w-[120px]">
|
||||
{tab.title}
|
||||
</span>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
closeTab(tab.id);
|
||||
}}
|
||||
className="opacity-0 group-hover:opacity-100 hover:text-shell-error transition-opacity ml-1"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 终端内容 - 所有终端都渲染，通过显示/隐藏切换 */}
|
||||
<div className="flex-1 relative">
|
||||
{activeTabs.length === 0 ? (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="text-6xl mb-6 opacity-20">🚀</div>
|
||||
<h2 className="text-2xl font-bold text-shell-text mb-3">
|
||||
欢迎使用 EasyShell
|
||||
</h2>
|
||||
<p className="text-shell-text-dim mb-6">
|
||||
高颜值远程 Shell 管理终端
|
||||
</p>
|
||||
<div className="flex gap-4 justify-center">
|
||||
<button
|
||||
onClick={openHostManager}
|
||||
className="px-6 py-3 bg-shell-accent/20 border border-shell-accent/50
|
||||
rounded-lg text-shell-accent hover:bg-shell-accent/30
|
||||
transition-all btn-glow font-medium"
|
||||
>
|
||||
添加主机
|
||||
</button>
|
||||
<button
|
||||
onClick={openSettings}
|
||||
className="px-6 py-3 bg-shell-card border border-shell-border
|
||||
rounded-lg text-shell-text-dim hover:text-shell-text
|
||||
hover:border-shell-accent/30 transition-all font-medium"
|
||||
>
|
||||
连接数据库
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-shell-text-dim text-sm mt-8">
|
||||
按 <kbd className="code-highlight">Ctrl+K</kbd> 打开命令面板
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
activeTabs.map((tab) => (
|
||||
<div
|
||||
key={tab.id}
|
||||
className="absolute inset-0"
|
||||
style={{ display: activeTabId === tab.id ? 'block' : 'none' }}
|
||||
>
|
||||
<Terminal
|
||||
tabId={tab.id}
|
||||
hostId={tab.hostId}
|
||||
onConnectionChange={(connected) => handleConnectionChange(tab.id, connected)}
|
||||
onShowCommandPalette={openCommandPalette}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 弹窗 */}
|
||||
<AnimatePresence>
|
||||
{showHostManager && (
|
||||
<HostManager
|
||||
hosts={hosts}
|
||||
initialEditHost={editingHost}
|
||||
onClose={() => { setShowHostManager(false); setEditingHost(null); }}
|
||||
onConnect={connectHost}
|
||||
onUpdate={handleHostsUpdate}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<AnimatePresence>
|
||||
{showSettings && (
|
||||
<Settings
|
||||
onClose={() => setShowSettings(false)}
|
||||
isRemoteConnected={isRemoteConnected}
|
||||
onConnectionChange={(connected) => {
|
||||
setIsRemoteConnected(connected);
|
||||
if (connected) loadHosts();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<AnimatePresence>
|
||||
{showCommandPalette && (
|
||||
<CommandPalette
|
||||
onClose={() => setShowCommandPalette(false)}
|
||||
onSelectCommand={(cmd) => {
|
||||
if (activeTabId) {
|
||||
const event = new CustomEvent('terminal-command', {
|
||||
detail: { tabId: activeTabId, command: cmd },
|
||||
});
|
||||
window.dispatchEvent(event);
|
||||
}
|
||||
setShowCommandPalette(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
220
src/components/CommandPalette.js
Normal file
220
src/components/CommandPalette.js
Normal file
@ -0,0 +1,220 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { FiSearch, FiCommand, FiClock, FiTag } from 'react-icons/fi';
|
||||
|
||||
function CommandPalette({ onClose, onSelectCommand }) {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [commands, setCommands] = useState([]);
|
||||
const [filteredCommands, setFilteredCommands] = useState([]);
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
const inputRef = useRef(null);
|
||||
const listRef = useRef(null);
|
||||
|
||||
// 加载命令列表
|
||||
useEffect(() => {
|
||||
const loadCommands = async () => {
|
||||
if (window.electronAPI) {
|
||||
const allCommands = await window.electronAPI.commands.getAll();
|
||||
setCommands(allCommands);
|
||||
setFilteredCommands(allCommands.slice(0, 15));
|
||||
}
|
||||
};
|
||||
loadCommands();
|
||||
inputRef.current?.focus();
|
||||
}, []);
|
||||
|
||||
// 搜索命令
|
||||
useEffect(() => {
|
||||
const search = async () => {
|
||||
if (searchTerm.trim()) {
|
||||
if (window.electronAPI) {
|
||||
const results = await window.electronAPI.commands.search(searchTerm);
|
||||
setFilteredCommands(results);
|
||||
}
|
||||
} else {
|
||||
setFilteredCommands(commands.slice(0, 15));
|
||||
}
|
||||
setSelectedIndex(0);
|
||||
};
|
||||
search();
|
||||
}, [searchTerm, commands]);
|
||||
|
||||
// 键盘导航
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e) => {
|
||||
switch (e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
setSelectedIndex((prev) =>
|
||||
prev < filteredCommands.length - 1 ? prev + 1 : prev
|
||||
);
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
setSelectedIndex((prev) => (prev > 0 ? prev - 1 : 0));
|
||||
break;
|
||||
case 'Enter':
|
||||
e.preventDefault();
|
||||
if (filteredCommands[selectedIndex]) {
|
||||
handleSelect(filteredCommands[selectedIndex]);
|
||||
} else if (searchTerm.trim()) {
|
||||
// 如果没有匹配项，直接发送输入的命令
|
||||
onSelectCommand(searchTerm.trim());
|
||||
}
|
||||
break;
|
||||
case 'Escape':
|
||||
onClose();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [filteredCommands, selectedIndex, searchTerm, onClose, onSelectCommand]);
|
||||
|
||||
// 滚动到选中项
|
||||
useEffect(() => {
|
||||
const selectedElement = listRef.current?.children[selectedIndex];
|
||||
if (selectedElement) {
|
||||
selectedElement.scrollIntoView({ block: 'nearest' });
|
||||
}
|
||||
}, [selectedIndex]);
|
||||
|
||||
const handleSelect = async (command) => {
|
||||
if (window.electronAPI && command.id) {
|
||||
await window.electronAPI.commands.incrementUsage(command.id);
|
||||
}
|
||||
onSelectCommand(command.command);
|
||||
};
|
||||
|
||||
// 按分类分组命令
|
||||
const groupedCommands = filteredCommands.reduce((acc, cmd) => {
|
||||
const category = cmd.category || '通用';
|
||||
if (!acc[category]) acc[category] = [];
|
||||
acc[category].push(cmd);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
let flatIndex = 0;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-start justify-center z-50 pt-[15vh]"
|
||||
onClick={(e) => e.target === e.currentTarget && onClose()}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.95, opacity: 0, y: -20 }}
|
||||
animate={{ scale: 1, opacity: 1, y: 0 }}
|
||||
exit={{ scale: 0.95, opacity: 0, y: -20 }}
|
||||
className="command-hint w-full max-w-2xl rounded-xl overflow-hidden"
|
||||
>
|
||||
{/* 搜索框 */}
|
||||
<div className="p-4 border-b border-shell-border">
|
||||
<div className="relative">
|
||||
<FiSearch className="absolute left-4 top-1/2 -translate-y-1/2 text-shell-text-dim" size={20} />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-12 pr-4 py-3 bg-shell-bg border border-shell-border rounded-lg
|
||||
text-shell-text placeholder-shell-text-dim text-lg
|
||||
focus:border-shell-accent focus:ring-1 focus:ring-shell-accent/50"
|
||||
placeholder="搜索命令或直接输入..."
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 mt-3 text-xs text-shell-text-dim">
|
||||
<span className="flex items-center gap-1">
|
||||
<kbd className="px-1.5 py-0.5 bg-shell-card rounded border border-shell-border">↑↓</kbd>
|
||||
导航
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<kbd className="px-1.5 py-0.5 bg-shell-card rounded border border-shell-border">Enter</kbd>
|
||||
执行
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<kbd className="px-1.5 py-0.5 bg-shell-card rounded border border-shell-border">Esc</kbd>
|
||||
关闭
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 命令列表 */}
|
||||
<div ref={listRef} className="max-h-[50vh] overflow-y-auto custom-scrollbar">
|
||||
{Object.entries(groupedCommands).map(([category, categoryCommands]) => (
|
||||
<div key={category}>
|
||||
<div className="px-4 py-2 text-xs font-medium text-shell-text-dim uppercase tracking-wider bg-shell-bg/50 sticky top-0">
|
||||
<span className="flex items-center gap-2">
|
||||
<FiTag size={12} />
|
||||
{category}
|
||||
</span>
|
||||
</div>
|
||||
{categoryCommands.map((cmd) => {
|
||||
const currentIndex = flatIndex++;
|
||||
return (
|
||||
<div
|
||||
key={cmd.id || cmd.command}
|
||||
onClick={() => handleSelect(cmd)}
|
||||
className={`
|
||||
px-4 py-3 cursor-pointer flex items-center gap-4 transition-all
|
||||
${currentIndex === selectedIndex
|
||||
? 'bg-shell-accent/20 border-l-2 border-shell-accent'
|
||||
: 'hover:bg-shell-card border-l-2 border-transparent'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className="w-10 h-10 rounded-lg bg-shell-card flex items-center justify-center flex-shrink-0">
|
||||
<FiCommand className="text-shell-accent" size={18} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-mono text-shell-text text-sm truncate">
|
||||
{cmd.command}
|
||||
</div>
|
||||
{cmd.description && (
|
||||
<div className="text-xs text-shell-text-dim truncate mt-0.5">
|
||||
{cmd.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{cmd.usage_count > 0 && (
|
||||
<div className="flex items-center gap-1 text-xs text-shell-text-dim">
|
||||
<FiClock size={12} />
|
||||
<span>{cmd.usage_count}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{filteredCommands.length === 0 && (
|
||||
<div className="p-8 text-center text-shell-text-dim">
|
||||
<FiCommand className="mx-auto text-3xl mb-3 opacity-50" />
|
||||
<p>没有找到匹配的命令</p>
|
||||
<p className="text-sm mt-1">
|
||||
按 <kbd className="code-highlight">Enter</kbd> 执行输入的命令
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 底部提示 */}
|
||||
<div className="px-4 py-3 border-t border-shell-border bg-shell-bg/50 text-xs text-shell-text-dim">
|
||||
<span className="flex items-center gap-2">
|
||||
<FiCommand size={12} />
|
||||
提示：直接输入命令并按 Enter 可快速执行
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CommandPalette;
|
||||
|
||||
477
src/components/HostManager.js
Normal file
477
src/components/HostManager.js
Normal file
@ -0,0 +1,477 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
FiX,
|
||||
FiPlus,
|
||||
FiEdit2,
|
||||
FiTrash2,
|
||||
FiServer,
|
||||
FiCheck,
|
||||
FiLoader,
|
||||
FiKey,
|
||||
FiEye,
|
||||
FiEyeOff,
|
||||
} from 'react-icons/fi';
|
||||
|
||||
const colors = [
|
||||
'#58a6ff', '#3fb950', '#d29922', '#f85149', '#bc8cff',
|
||||
'#56d4dd', '#ffa657', '#ff7b72', '#d2a8ff', '#76e3ea',
|
||||
];
|
||||
|
||||
function HostManager({ hosts, initialEditHost, onClose, onConnect, onUpdate }) {
|
||||
const [isEditing, setIsEditing] = useState(!!initialEditHost);
|
||||
const [editingHost, setEditingHost] = useState(initialEditHost || null);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [testing, setTesting] = useState(false);
|
||||
const [testResult, setTestResult] = useState(null);
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
host: '',
|
||||
port: 22,
|
||||
username: '',
|
||||
password: '',
|
||||
privateKey: '',
|
||||
groupName: '默认分组',
|
||||
color: '#58a6ff',
|
||||
description: '',
|
||||
});
|
||||
|
||||
// 初始化编辑状态
|
||||
useEffect(() => {
|
||||
if (initialEditHost) {
|
||||
setEditingHost(initialEditHost);
|
||||
setIsEditing(true);
|
||||
}
|
||||
}, [initialEditHost]);
|
||||
|
||||
useEffect(() => {
|
||||
if (editingHost) {
|
||||
setFormData({
|
||||
name: editingHost.name || '',
|
||||
host: editingHost.host || '',
|
||||
port: editingHost.port || 22,
|
||||
username: editingHost.username || '',
|
||||
password: editingHost.password || '',
|
||||
privateKey: editingHost.private_key || '',
|
||||
groupName: editingHost.group_name || '默认分组',
|
||||
color: editingHost.color || '#58a6ff',
|
||||
description: editingHost.description || '',
|
||||
});
|
||||
}
|
||||
}, [editingHost]);
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData({
|
||||
name: '',
|
||||
host: '',
|
||||
port: 22,
|
||||
username: '',
|
||||
password: '',
|
||||
privateKey: '',
|
||||
groupName: '默认分组',
|
||||
color: '#58a6ff',
|
||||
description: '',
|
||||
});
|
||||
setEditingHost(null);
|
||||
setIsEditing(false);
|
||||
setTestResult(null);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!window.electronAPI) return;
|
||||
|
||||
try {
|
||||
if (editingHost) {
|
||||
await window.electronAPI.hosts.update(editingHost.id, formData);
|
||||
} else {
|
||||
await window.electronAPI.hosts.add(formData);
|
||||
}
|
||||
onUpdate();
|
||||
resetForm();
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
if (!window.electronAPI) return;
|
||||
if (window.confirm('确定要删除这个主机吗？')) {
|
||||
await window.electronAPI.hosts.delete(id);
|
||||
onUpdate();
|
||||
}
|
||||
};
|
||||
|
||||
const handleTest = async () => {
|
||||
if (!window.electronAPI) return;
|
||||
|
||||
setTesting(true);
|
||||
setTestResult(null);
|
||||
|
||||
try {
|
||||
const result = await window.electronAPI.ssh.test({
|
||||
host: formData.host,
|
||||
port: formData.port,
|
||||
username: formData.username,
|
||||
password: formData.password,
|
||||
privateKey: formData.privateKey,
|
||||
});
|
||||
setTestResult(result);
|
||||
} catch (error) {
|
||||
setTestResult({ success: false, message: error.message });
|
||||
} finally {
|
||||
setTesting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4"
|
||||
onClick={(e) => e.target === e.currentTarget && onClose()}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.95, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.95, opacity: 0 }}
|
||||
className="bg-shell-surface border border-shell-border rounded-xl shadow-2xl w-full max-w-4xl max-h-[85vh] overflow-hidden"
|
||||
>
|
||||
{/* 头部 */}
|
||||
<div className="px-6 py-4 border-b border-shell-border flex items-center justify-between">
|
||||
<h2 className="text-xl font-bold text-shell-text">
|
||||
{isEditing ? (editingHost ? '编辑主机' : '添加主机') : '主机管理'}
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 rounded-lg hover:bg-shell-card text-shell-text-dim hover:text-shell-text transition-colors"
|
||||
>
|
||||
<FiX size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex h-[calc(85vh-130px)]">
|
||||
{/* 主机列表 */}
|
||||
<div className="w-80 border-r border-shell-border overflow-y-auto custom-scrollbar">
|
||||
<div className="p-4">
|
||||
<button
|
||||
onClick={() => {
|
||||
resetForm();
|
||||
setIsEditing(true);
|
||||
}}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-3
|
||||
bg-shell-accent/20 border border-shell-accent/30 rounded-lg
|
||||
text-shell-accent hover:bg-shell-accent/30 transition-all btn-glow"
|
||||
>
|
||||
<FiPlus size={18} />
|
||||
<span>添加新主机</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="px-4 pb-4 space-y-2">
|
||||
{hosts.map((host) => (
|
||||
<div
|
||||
key={host.id}
|
||||
className="group p-3 rounded-lg border border-shell-border hover:border-shell-accent/30
|
||||
bg-shell-card/50 hover:bg-shell-card transition-all cursor-pointer"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: `${host.color}20` }}
|
||||
>
|
||||
<FiServer size={18} style={{ color: host.color }} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium text-shell-text truncate">
|
||||
{host.name}
|
||||
</div>
|
||||
<div className="text-xs text-shell-text-dim truncate">
|
||||
{host.username}@{host.host}:{host.port}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 mt-3 pt-3 border-t border-shell-border">
|
||||
<button
|
||||
onClick={() => onConnect(host)}
|
||||
className="flex-1 px-3 py-1.5 bg-shell-accent/20 text-shell-accent text-sm
|
||||
rounded-md hover:bg-shell-accent/30 transition-colors"
|
||||
>
|
||||
连接
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditingHost(host);
|
||||
setIsEditing(true);
|
||||
}}
|
||||
className="p-1.5 rounded-md hover:bg-shell-border text-shell-text-dim
|
||||
hover:text-shell-text transition-colors"
|
||||
>
|
||||
<FiEdit2 size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(host.id)}
|
||||
className="p-1.5 rounded-md hover:bg-shell-error/20 text-shell-text-dim
|
||||
hover:text-shell-error transition-colors"
|
||||
>
|
||||
<FiTrash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{hosts.length === 0 && (
|
||||
<div className="text-center py-8 text-shell-text-dim">
|
||||
暂无主机，点击上方按钮添加
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 编辑表单 */}
|
||||
<div className="flex-1 overflow-y-auto custom-scrollbar p-6">
|
||||
{isEditing ? (
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{/* 名称 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-shell-text-dim mb-2">
|
||||
名称 *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
className="w-full px-4 py-2.5 bg-shell-bg border border-shell-border rounded-lg
|
||||
text-shell-text placeholder-shell-text-dim/50
|
||||
focus:border-shell-accent focus:ring-1 focus:ring-shell-accent/50"
|
||||
placeholder="生产服务器"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 分组 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-shell-text-dim mb-2">
|
||||
分组
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.groupName}
|
||||
onChange={(e) => setFormData({ ...formData, groupName: e.target.value })}
|
||||
className="w-full px-4 py-2.5 bg-shell-bg border border-shell-border rounded-lg
|
||||
text-shell-text placeholder-shell-text-dim/50
|
||||
focus:border-shell-accent focus:ring-1 focus:ring-shell-accent/50"
|
||||
placeholder="默认分组"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{/* 主机 */}
|
||||
<div className="col-span-2">
|
||||
<label className="block text-sm font-medium text-shell-text-dim mb-2">
|
||||
主机地址 *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={formData.host}
|
||||
onChange={(e) => setFormData({ ...formData, host: e.target.value })}
|
||||
className="w-full px-4 py-2.5 bg-shell-bg border border-shell-border rounded-lg
|
||||
text-shell-text placeholder-shell-text-dim/50
|
||||
focus:border-shell-accent focus:ring-1 focus:ring-shell-accent/50"
|
||||
placeholder="192.168.1.100 或 example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 端口 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-shell-text-dim mb-2">
|
||||
端口
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.port}
|
||||
onChange={(e) => setFormData({ ...formData, port: parseInt(e.target.value) || 22 })}
|
||||
className="w-full px-4 py-2.5 bg-shell-bg border border-shell-border rounded-lg
|
||||
text-shell-text placeholder-shell-text-dim/50
|
||||
focus:border-shell-accent focus:ring-1 focus:ring-shell-accent/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 用户名 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-shell-text-dim mb-2">
|
||||
用户名 *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={formData.username}
|
||||
onChange={(e) => setFormData({ ...formData, username: e.target.value })}
|
||||
className="w-full px-4 py-2.5 bg-shell-bg border border-shell-border rounded-lg
|
||||
text-shell-text placeholder-shell-text-dim/50
|
||||
focus:border-shell-accent focus:ring-1 focus:ring-shell-accent/50"
|
||||
placeholder="root"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 密码 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-shell-text-dim mb-2">
|
||||
密码
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={formData.password}
|
||||
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
|
||||
className="w-full px-4 py-2.5 pr-12 bg-shell-bg border border-shell-border rounded-lg
|
||||
text-shell-text placeholder-shell-text-dim/50
|
||||
focus:border-shell-accent focus:ring-1 focus:ring-shell-accent/50"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-shell-text-dim
|
||||
hover:text-shell-text transition-colors"
|
||||
>
|
||||
{showPassword ? <FiEyeOff size={18} /> : <FiEye size={18} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 私钥 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-shell-text-dim mb-2">
|
||||
<span className="flex items-center gap-2">
|
||||
<FiKey size={14} />
|
||||
SSH 私钥 (可选)
|
||||
</span>
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.privateKey}
|
||||
onChange={(e) => setFormData({ ...formData, privateKey: e.target.value })}
|
||||
rows={4}
|
||||
className="w-full px-4 py-2.5 bg-shell-bg border border-shell-border rounded-lg
|
||||
text-shell-text placeholder-shell-text-dim/50 font-mono text-sm
|
||||
focus:border-shell-accent focus:ring-1 focus:ring-shell-accent/50 resize-none"
|
||||
placeholder="-----BEGIN RSA PRIVATE KEY-----..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 颜色选择 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-shell-text-dim mb-2">
|
||||
标识颜色
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
{colors.map((color) => (
|
||||
<button
|
||||
key={color}
|
||||
type="button"
|
||||
onClick={() => setFormData({ ...formData, color })}
|
||||
className={`w-8 h-8 rounded-lg transition-all ${
|
||||
formData.color === color
|
||||
? 'ring-2 ring-offset-2 ring-offset-shell-surface ring-white/50 scale-110'
|
||||
: 'hover:scale-105'
|
||||
}`}
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 描述 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-shell-text-dim mb-2">
|
||||
备注说明
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
rows={2}
|
||||
className="w-full px-4 py-2.5 bg-shell-bg border border-shell-border rounded-lg
|
||||
text-shell-text placeholder-shell-text-dim/50
|
||||
focus:border-shell-accent focus:ring-1 focus:ring-shell-accent/50 resize-none"
|
||||
placeholder="关于这台服务器的备注..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 测试结果 */}
|
||||
{testResult && (
|
||||
<div
|
||||
className={`p-4 rounded-lg border ${
|
||||
testResult.success
|
||||
? 'bg-shell-success/10 border-shell-success/30 text-shell-success'
|
||||
: 'bg-shell-error/10 border-shell-error/30 text-shell-error'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{testResult.success ? <FiCheck size={18} /> : <FiX size={18} />}
|
||||
<span>{testResult.message}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className="flex items-center justify-between pt-4 border-t border-shell-border">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleTest}
|
||||
disabled={testing || !formData.host || !formData.username}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-shell-card border border-shell-border
|
||||
rounded-lg text-shell-text-dim hover:text-shell-text hover:border-shell-accent/30
|
||||
disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
||||
>
|
||||
{testing ? (
|
||||
<FiLoader className="animate-spin" size={16} />
|
||||
) : (
|
||||
<FiCheck size={16} />
|
||||
)}
|
||||
<span>测试连接</span>
|
||||
</button>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={resetForm}
|
||||
className="px-4 py-2 border border-shell-border rounded-lg text-shell-text-dim
|
||||
hover:text-shell-text hover:bg-shell-card transition-all"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-6 py-2 bg-shell-accent rounded-lg text-white font-medium
|
||||
hover:bg-shell-accent/80 transition-all btn-glow"
|
||||
>
|
||||
{editingHost ? '保存修改' : '添加主机'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<div className="h-full flex items-center justify-center text-shell-text-dim">
|
||||
<div className="text-center">
|
||||
<FiServer className="mx-auto text-5xl mb-4 opacity-30" />
|
||||
<p>选择一个主机进行编辑</p>
|
||||
<p className="text-sm mt-1">或点击"添加新主机"创建</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HostManager;
|
||||
|
||||
361
src/components/Settings.js
Normal file
361
src/components/Settings.js
Normal file
@ -0,0 +1,361 @@
|
||||
import React, { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
FiX,
|
||||
FiDatabase,
|
||||
FiCloud,
|
||||
FiCloudOff,
|
||||
FiRefreshCw,
|
||||
FiDownload,
|
||||
FiUpload,
|
||||
FiCheck,
|
||||
FiLoader,
|
||||
FiAlertCircle,
|
||||
} from 'react-icons/fi';
|
||||
|
||||
function Settings({ onClose, isRemoteConnected, onConnectionChange }) {
|
||||
const [activeTab, setActiveTab] = useState('database');
|
||||
const [connecting, setConnecting] = useState(false);
|
||||
const [syncing, setSyncing] = useState(false);
|
||||
const [message, setMessage] = useState(null);
|
||||
const [mysqlConfig, setMysqlConfig] = useState({
|
||||
host: '',
|
||||
port: 3306,
|
||||
user: '',
|
||||
password: '',
|
||||
database: 'easyshell',
|
||||
});
|
||||
|
||||
const handleConnect = async () => {
|
||||
if (!window.electronAPI) return;
|
||||
|
||||
setConnecting(true);
|
||||
setMessage(null);
|
||||
|
||||
try {
|
||||
const result = await window.electronAPI.db.connectMySQL(mysqlConfig);
|
||||
if (result.success) {
|
||||
setMessage({ type: 'success', text: '数据库连接成功！已自动创建数据库和表结构' });
|
||||
onConnectionChange(true);
|
||||
} else {
|
||||
setMessage({ type: 'error', text: `连接失败: ${result.error}` });
|
||||
onConnectionChange(false);
|
||||
}
|
||||
} catch (error) {
|
||||
setMessage({ type: 'error', text: `连接失败: ${error.message}` });
|
||||
} finally {
|
||||
setConnecting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDisconnect = async () => {
|
||||
if (!window.electronAPI) return;
|
||||
|
||||
await window.electronAPI.db.disconnectMySQL();
|
||||
onConnectionChange(false);
|
||||
setMessage({ type: 'success', text: '已断开远程数据库连接' });
|
||||
};
|
||||
|
||||
const handleSyncToRemote = async () => {
|
||||
if (!window.electronAPI) return;
|
||||
|
||||
setSyncing(true);
|
||||
setMessage(null);
|
||||
|
||||
try {
|
||||
const result = await window.electronAPI.db.syncToRemote();
|
||||
if (result.success) {
|
||||
setMessage({ type: 'success', text: `同步成功！已上传 ${result.synced} 条主机信息` });
|
||||
} else {
|
||||
setMessage({ type: 'error', text: `同步失败: ${result.error}` });
|
||||
}
|
||||
} catch (error) {
|
||||
setMessage({ type: 'error', text: `同步失败: ${error.message}` });
|
||||
} finally {
|
||||
setSyncing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSyncFromRemote = async () => {
|
||||
if (!window.electronAPI) return;
|
||||
|
||||
setSyncing(true);
|
||||
setMessage(null);
|
||||
|
||||
try {
|
||||
const result = await window.electronAPI.db.syncFromRemote();
|
||||
if (result.success) {
|
||||
setMessage({
|
||||
type: 'success',
|
||||
text: `同步成功！已下载 ${result.hosts} 条主机信息和 ${result.commands} 条命令`
|
||||
});
|
||||
} else {
|
||||
setMessage({ type: 'error', text: `同步失败: ${result.error}` });
|
||||
}
|
||||
} catch (error) {
|
||||
setMessage({ type: 'error', text: `同步失败: ${error.message}` });
|
||||
} finally {
|
||||
setSyncing(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4"
|
||||
onClick={(e) => e.target === e.currentTarget && onClose()}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.95, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.95, opacity: 0 }}
|
||||
className="bg-shell-surface border border-shell-border rounded-xl shadow-2xl w-full max-w-2xl"
|
||||
>
|
||||
{/* 头部 */}
|
||||
<div className="px-6 py-4 border-b border-shell-border flex items-center justify-between">
|
||||
<h2 className="text-xl font-bold text-shell-text">设置</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 rounded-lg hover:bg-shell-card text-shell-text-dim hover:text-shell-text transition-colors"
|
||||
>
|
||||
<FiX size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 标签页 */}
|
||||
<div className="px-6 pt-4 border-b border-shell-border">
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={() => setActiveTab('database')}
|
||||
className={`pb-3 px-2 border-b-2 transition-colors ${
|
||||
activeTab === 'database'
|
||||
? 'border-shell-accent text-shell-accent'
|
||||
: 'border-transparent text-shell-text-dim hover:text-shell-text'
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<FiDatabase size={16} />
|
||||
数据库同步
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 内容区 */}
|
||||
<div className="p-6">
|
||||
{activeTab === 'database' && (
|
||||
<div className="space-y-6">
|
||||
{/* 连接状态 */}
|
||||
<div className={`p-4 rounded-lg border flex items-center justify-between ${
|
||||
isRemoteConnected
|
||||
? 'bg-shell-success/10 border-shell-success/30'
|
||||
: 'bg-shell-card border-shell-border'
|
||||
}`}>
|
||||
<div className="flex items-center gap-3">
|
||||
{isRemoteConnected ? (
|
||||
<FiCloud className="text-shell-success" size={24} />
|
||||
) : (
|
||||
<FiCloudOff className="text-shell-text-dim" size={24} />
|
||||
)}
|
||||
<div>
|
||||
<div className="font-medium text-shell-text">
|
||||
{isRemoteConnected ? '已连接远程数据库' : '本地离线模式'}
|
||||
</div>
|
||||
<div className="text-sm text-shell-text-dim">
|
||||
{isRemoteConnected
|
||||
? '数据将自动同步到MySQL服务器'
|
||||
: '数据仅保存在本地SQLite数据库'
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{isRemoteConnected && (
|
||||
<button
|
||||
onClick={handleDisconnect}
|
||||
className="px-3 py-1.5 border border-shell-error/50 text-shell-error
|
||||
rounded-md hover:bg-shell-error/10 transition-colors text-sm"
|
||||
>
|
||||
断开连接
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* MySQL配置表单 */}
|
||||
{!isRemoteConnected && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-shell-text">MySQL 连接配置</h3>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="col-span-2">
|
||||
<label className="block text-sm font-medium text-shell-text-dim mb-2">
|
||||
主机地址
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={mysqlConfig.host}
|
||||
onChange={(e) => setMysqlConfig({ ...mysqlConfig, host: e.target.value })}
|
||||
className="w-full px-4 py-2.5 bg-shell-bg border border-shell-border rounded-lg
|
||||
text-shell-text placeholder-shell-text-dim/50
|
||||
focus:border-shell-accent focus:ring-1 focus:ring-shell-accent/50"
|
||||
placeholder="localhost 或 IP地址"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-shell-text-dim mb-2">
|
||||
端口
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={mysqlConfig.port}
|
||||
onChange={(e) => setMysqlConfig({ ...mysqlConfig, port: parseInt(e.target.value) || 3306 })}
|
||||
className="w-full px-4 py-2.5 bg-shell-bg border border-shell-border rounded-lg
|
||||
text-shell-text placeholder-shell-text-dim/50
|
||||
focus:border-shell-accent focus:ring-1 focus:ring-shell-accent/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-shell-text-dim mb-2">
|
||||
用户名
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={mysqlConfig.user}
|
||||
onChange={(e) => setMysqlConfig({ ...mysqlConfig, user: e.target.value })}
|
||||
className="w-full px-4 py-2.5 bg-shell-bg border border-shell-border rounded-lg
|
||||
text-shell-text placeholder-shell-text-dim/50
|
||||
focus:border-shell-accent focus:ring-1 focus:ring-shell-accent/50"
|
||||
placeholder="root"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-shell-text-dim mb-2">
|
||||
密码
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={mysqlConfig.password}
|
||||
onChange={(e) => setMysqlConfig({ ...mysqlConfig, password: e.target.value })}
|
||||
className="w-full px-4 py-2.5 bg-shell-bg border border-shell-border rounded-lg
|
||||
text-shell-text placeholder-shell-text-dim/50
|
||||
focus:border-shell-accent focus:ring-1 focus:ring-shell-accent/50"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-shell-text-dim mb-2">
|
||||
数据库名称
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={mysqlConfig.database}
|
||||
onChange={(e) => setMysqlConfig({ ...mysqlConfig, database: e.target.value })}
|
||||
className="w-full px-4 py-2.5 bg-shell-bg border border-shell-border rounded-lg
|
||||
text-shell-text placeholder-shell-text-dim/50
|
||||
focus:border-shell-accent focus:ring-1 focus:ring-shell-accent/50"
|
||||
placeholder="easyshell"
|
||||
/>
|
||||
<p className="text-xs text-shell-text-dim mt-1">
|
||||
如果数据库不存在，将自动创建
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleConnect}
|
||||
disabled={connecting || !mysqlConfig.host || !mysqlConfig.user}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-3
|
||||
bg-shell-accent rounded-lg text-white font-medium
|
||||
hover:bg-shell-accent/80 disabled:opacity-50
|
||||
disabled:cursor-not-allowed transition-all btn-glow"
|
||||
>
|
||||
{connecting ? (
|
||||
<>
|
||||
<FiLoader className="animate-spin" size={18} />
|
||||
连接中...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<FiDatabase size={18} />
|
||||
连接数据库
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 同步操作 */}
|
||||
{isRemoteConnected && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-shell-text">数据同步</h3>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<button
|
||||
onClick={handleSyncToRemote}
|
||||
disabled={syncing}
|
||||
className="flex items-center justify-center gap-2 px-4 py-3
|
||||
bg-shell-card border border-shell-border rounded-lg
|
||||
hover:border-shell-accent/50 hover:bg-shell-card/80
|
||||
disabled:opacity-50 transition-all"
|
||||
>
|
||||
{syncing ? (
|
||||
<FiLoader className="animate-spin" size={18} />
|
||||
) : (
|
||||
<FiUpload size={18} />
|
||||
)}
|
||||
<span>上传到远程</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleSyncFromRemote}
|
||||
disabled={syncing}
|
||||
className="flex items-center justify-center gap-2 px-4 py-3
|
||||
bg-shell-card border border-shell-border rounded-lg
|
||||
hover:border-shell-accent/50 hover:bg-shell-card/80
|
||||
disabled:opacity-50 transition-all"
|
||||
>
|
||||
{syncing ? (
|
||||
<FiLoader className="animate-spin" size={18} />
|
||||
) : (
|
||||
<FiDownload size={18} />
|
||||
)}
|
||||
<span>从远程下载</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 消息提示 */}
|
||||
{message && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className={`p-4 rounded-lg border flex items-start gap-3 ${
|
||||
message.type === 'success'
|
||||
? 'bg-shell-success/10 border-shell-success/30 text-shell-success'
|
||||
: 'bg-shell-error/10 border-shell-error/30 text-shell-error'
|
||||
}`}
|
||||
>
|
||||
{message.type === 'success' ? (
|
||||
<FiCheck size={20} className="flex-shrink-0 mt-0.5" />
|
||||
) : (
|
||||
<FiAlertCircle size={20} className="flex-shrink-0 mt-0.5" />
|
||||
)}
|
||||
<span>{message.text}</span>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Settings;
|
||||
|
||||
228
src/components/Sidebar.js
Normal file
228
src/components/Sidebar.js
Normal file
@ -0,0 +1,228 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
FiServer,
|
||||
FiPlus,
|
||||
FiSettings,
|
||||
FiCloud,
|
||||
FiCloudOff,
|
||||
FiChevronLeft,
|
||||
FiChevronRight,
|
||||
FiTerminal,
|
||||
FiEdit2,
|
||||
} from 'react-icons/fi';
|
||||
|
||||
function Sidebar({
|
||||
hosts,
|
||||
activeTabs,
|
||||
activeTabId,
|
||||
onSelectTab,
|
||||
onCloseTab,
|
||||
onConnectHost,
|
||||
onOpenHostManager,
|
||||
onEditHost,
|
||||
onOpenSettings,
|
||||
isRemoteConnected,
|
||||
collapsed,
|
||||
onToggleCollapse,
|
||||
}) {
|
||||
// 按分组组织主机
|
||||
const groupedHosts = hosts.reduce((acc, host) => {
|
||||
const group = host.group_name || '默认分组';
|
||||
if (!acc[group]) acc[group] = [];
|
||||
acc[group].push(host);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={{ width: collapsed ? 56 : 260 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="bg-shell-surface/50 border-r border-shell-border flex flex-col h-full overflow-hidden"
|
||||
>
|
||||
{/* 顶部操作区 */}
|
||||
<div className="p-3 border-b border-shell-border flex-shrink-0">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
{!collapsed && (
|
||||
<motion.span
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="text-sm font-semibold text-shell-text"
|
||||
>
|
||||
主机列表
|
||||
</motion.span>
|
||||
)}
|
||||
<div className={`flex items-center gap-1 ${collapsed ? 'flex-col' : ''}`}>
|
||||
<button
|
||||
onClick={onOpenHostManager}
|
||||
className="p-2 rounded-lg hover:bg-shell-card text-shell-accent
|
||||
transition-colors"
|
||||
title="添加主机"
|
||||
>
|
||||
<FiPlus size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={onToggleCollapse}
|
||||
className="p-2 rounded-lg hover:bg-shell-card text-shell-text-dim
|
||||
hover:text-shell-text transition-colors"
|
||||
title={collapsed ? '展开' : '收起'}
|
||||
>
|
||||
{collapsed ? <FiChevronRight size={18} /> : <FiChevronLeft size={18} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 主机列表 */}
|
||||
<div className="flex-1 overflow-y-auto custom-scrollbar p-2">
|
||||
{Object.entries(groupedHosts).map(([groupName, groupHosts]) => (
|
||||
<div key={groupName} className="mb-4">
|
||||
{!collapsed && (
|
||||
<div className="px-2 py-1 text-xs font-medium text-shell-text-dim uppercase tracking-wider">
|
||||
{groupName}
|
||||
</div>
|
||||
)}
|
||||
{groupHosts.map((host) => {
|
||||
const isActive = activeTabs.some((t) => t.hostId === host.id);
|
||||
return (
|
||||
<motion.div
|
||||
key={host.id}
|
||||
whileHover={{ x: collapsed ? 0 : 2 }}
|
||||
className={`
|
||||
flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer mb-1
|
||||
transition-all duration-200 group relative
|
||||
${isActive
|
||||
? 'bg-shell-accent/15 border border-shell-accent/30'
|
||||
: 'hover:bg-shell-card border border-transparent'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{/* 点击连接 */}
|
||||
<div
|
||||
className="flex items-center gap-3 flex-1 min-w-0"
|
||||
onClick={() => onConnectHost(host)}
|
||||
>
|
||||
<div
|
||||
className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
style={{ backgroundColor: `${host.color}20` }}
|
||||
>
|
||||
<FiServer size={16} style={{ color: host.color }} />
|
||||
</div>
|
||||
{!collapsed && (
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium text-shell-text truncate">
|
||||
{host.name}
|
||||
</div>
|
||||
<div className="text-xs text-shell-text-dim truncate">
|
||||
{host.username}@{host.host}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 编辑按钮 */}
|
||||
{!collapsed && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEditHost && onEditHost(host);
|
||||
}}
|
||||
className="opacity-0 group-hover:opacity-100 p-1.5 rounded-md
|
||||
hover:bg-shell-border text-shell-text-dim hover:text-shell-text
|
||||
transition-all flex-shrink-0"
|
||||
title="编辑主机"
|
||||
>
|
||||
<FiEdit2 size={14} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{!collapsed && isActive && (
|
||||
<div className="w-2 h-2 rounded-full status-online flex-shrink-0" />
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{hosts.length === 0 && !collapsed && (
|
||||
<div className="text-center py-8">
|
||||
<FiTerminal className="mx-auto text-3xl text-shell-text-dim mb-3 opacity-50" />
|
||||
<p className="text-sm text-shell-text-dim">暂无主机</p>
|
||||
<button
|
||||
onClick={onOpenHostManager}
|
||||
className="mt-3 text-sm text-shell-accent hover:underline"
|
||||
>
|
||||
添加第一个主机
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 折叠状态下的空状态提示 */}
|
||||
{hosts.length === 0 && collapsed && (
|
||||
<div className="text-center py-4">
|
||||
<button
|
||||
onClick={onOpenHostManager}
|
||||
className="p-2 rounded-lg hover:bg-shell-card text-shell-text-dim"
|
||||
title="添加主机"
|
||||
>
|
||||
<FiTerminal size={20} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 底部状态栏 */}
|
||||
<div className="p-3 border-t border-shell-border flex-shrink-0">
|
||||
<div className={`flex items-center ${collapsed ? 'flex-col gap-2' : 'justify-between'}`}>
|
||||
{/* 数据库连接状态 */}
|
||||
<div
|
||||
className={`
|
||||
flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer
|
||||
transition-colors ${collapsed ? 'justify-center w-full' : ''}
|
||||
${isRemoteConnected
|
||||
? 'bg-shell-success/10 text-shell-success'
|
||||
: 'bg-shell-card text-shell-text-dim hover:text-shell-text'
|
||||
}
|
||||
`}
|
||||
onClick={onOpenSettings}
|
||||
title={isRemoteConnected ? '已连接远程数据库' : '未连接远程数据库'}
|
||||
>
|
||||
{isRemoteConnected ? <FiCloud size={16} /> : <FiCloudOff size={16} />}
|
||||
{!collapsed && (
|
||||
<span className="text-xs font-medium">
|
||||
{isRemoteConnected ? '已同步' : '本地模式'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!collapsed && (
|
||||
<button
|
||||
onClick={onOpenSettings}
|
||||
className="p-2 rounded-lg hover:bg-shell-card text-shell-text-dim
|
||||
hover:text-shell-text transition-colors"
|
||||
title="设置"
|
||||
>
|
||||
<FiSettings size={18} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 折叠状态下的设置按钮 */}
|
||||
{collapsed && (
|
||||
<button
|
||||
onClick={onOpenSettings}
|
||||
className="p-2 rounded-lg hover:bg-shell-card text-shell-text-dim
|
||||
hover:text-shell-text transition-colors w-full flex justify-center"
|
||||
title="设置"
|
||||
>
|
||||
<FiSettings size={18} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Sidebar;
|
||||
380
src/components/Terminal.js
Normal file
380
src/components/Terminal.js
Normal file
@ -0,0 +1,380 @@
|
||||
import React, { useEffect, useRef, useState, useCallback } from 'react';
|
||||
import { Terminal as XTerm } from '@xterm/xterm';
|
||||
import { FitAddon } from '@xterm/addon-fit';
|
||||
import { WebLinksAddon } from '@xterm/addon-web-links';
|
||||
import '@xterm/xterm/css/xterm.css';
|
||||
import { FiCommand, FiRefreshCw } from 'react-icons/fi';
|
||||
|
||||
function Terminal({ tabId, hostId, onConnectionChange, onShowCommandPalette }) {
|
||||
const containerRef = useRef(null);
|
||||
const terminalRef = useRef(null);
|
||||
const xtermRef = useRef(null);
|
||||
const fitAddonRef = useRef(null);
|
||||
const connectionIdRef = useRef(null);
|
||||
const cleanupListenersRef = useRef(null);
|
||||
const isConnectingRef = useRef(false);
|
||||
const isMountedRef = useRef(true);
|
||||
const initTimerRef = useRef(null);
|
||||
const hasConnectedRef = useRef(false); // 防止重复连接
|
||||
const resizeObserverRef = useRef(null);
|
||||
|
||||
// 用 ref 存储回调，避免作为依赖
|
||||
const onConnectionChangeRef = useRef(onConnectionChange);
|
||||
onConnectionChangeRef.current = onConnectionChange;
|
||||
|
||||
const [connectionId, setConnectionId] = useState(null);
|
||||
const [isConnecting, setIsConnecting] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const [isReady, setIsReady] = useState(false);
|
||||
|
||||
// 连接SSH - 不依赖 onConnectionChange
|
||||
const connect = useCallback(async () => {
|
||||
// 防止重复连接
|
||||
if (!window.electronAPI || !hostId || isConnectingRef.current || connectionIdRef.current || hasConnectedRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
hasConnectedRef.current = true;
|
||||
isConnectingRef.current = true;
|
||||
setIsConnecting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const host = await window.electronAPI.hosts.getById(hostId);
|
||||
if (!host) {
|
||||
throw new Error('主机信息不存在');
|
||||
}
|
||||
|
||||
const result = await window.electronAPI.ssh.connect({
|
||||
id: host.id,
|
||||
host: host.host,
|
||||
port: host.port,
|
||||
username: host.username,
|
||||
password: host.password,
|
||||
privateKey: host.private_key,
|
||||
});
|
||||
|
||||
if (!isMountedRef.current) return;
|
||||
|
||||
if (result.success) {
|
||||
connectionIdRef.current = result.connectionId;
|
||||
setConnectionId(result.connectionId);
|
||||
onConnectionChangeRef.current?.(true);
|
||||
|
||||
const removeDataListener = window.electronAPI.ssh.onData(result.connectionId, (data) => {
|
||||
xtermRef.current?.write(data);
|
||||
});
|
||||
|
||||
const removeCloseListener = window.electronAPI.ssh.onClose(result.connectionId, () => {
|
||||
if (isMountedRef.current) {
|
||||
onConnectionChangeRef.current?.(false);
|
||||
xtermRef.current?.writeln('\r\n\x1b[33m连接已断开\x1b[0m');
|
||||
connectionIdRef.current = null;
|
||||
setConnectionId(null);
|
||||
// 断开后允许重连
|
||||
hasConnectedRef.current = false;
|
||||
}
|
||||
});
|
||||
|
||||
const removeErrorListener = window.electronAPI.ssh.onError(result.connectionId, (err) => {
|
||||
xtermRef.current?.writeln(`\r\n\x1b[31m错误: ${err}\x1b[0m`);
|
||||
});
|
||||
|
||||
cleanupListenersRef.current = () => {
|
||||
removeDataListener();
|
||||
removeCloseListener();
|
||||
removeErrorListener();
|
||||
};
|
||||
|
||||
// 延迟一点再发送终端尺寸，确保 shell 准备好
|
||||
setTimeout(() => {
|
||||
if (fitAddonRef.current && xtermRef.current) {
|
||||
try {
|
||||
fitAddonRef.current.fit();
|
||||
if (connectionIdRef.current && window.electronAPI) {
|
||||
window.electronAPI.ssh.resize(
|
||||
connectionIdRef.current,
|
||||
xtermRef.current.cols,
|
||||
xtermRef.current.rows
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('fit 失败:', e);
|
||||
}
|
||||
}
|
||||
}, 50);
|
||||
} else {
|
||||
hasConnectedRef.current = false;
|
||||
throw new Error(result.error);
|
||||
}
|
||||
} catch (err) {
|
||||
hasConnectedRef.current = false;
|
||||
if (isMountedRef.current) {
|
||||
setError(err.message);
|
||||
onConnectionChangeRef.current?.(false);
|
||||
xtermRef.current?.writeln(`\x1b[31m连接失败: ${err.message}\x1b[0m`);
|
||||
}
|
||||
} finally {
|
||||
isConnectingRef.current = false;
|
||||
if (isMountedRef.current) {
|
||||
setIsConnecting(false);
|
||||
}
|
||||
}
|
||||
}, [hostId]); // 只依赖 hostId
|
||||
|
||||
// 调整终端尺寸
|
||||
const fitTerminal = useCallback(() => {
|
||||
if (!xtermRef.current || !fitAddonRef.current || !terminalRef.current) return;
|
||||
|
||||
try {
|
||||
fitAddonRef.current.fit();
|
||||
|
||||
// 通知 SSH 服务器尺寸变化
|
||||
if (connectionIdRef.current && window.electronAPI) {
|
||||
window.electronAPI.ssh.resize(
|
||||
connectionIdRef.current,
|
||||
xtermRef.current.cols,
|
||||
xtermRef.current.rows
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('调整终端尺寸失败:', e);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 初始化终端
|
||||
const initTerminal = useCallback(() => {
|
||||
if (!terminalRef.current || xtermRef.current) return false;
|
||||
|
||||
const container = terminalRef.current;
|
||||
// 确保容器有有效尺寸
|
||||
if (container.clientWidth < 100 || container.clientHeight < 100) {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
const term = new XTerm({
|
||||
cursorBlink: true,
|
||||
cursorStyle: 'bar',
|
||||
fontSize: 14,
|
||||
fontFamily: "'JetBrains Mono', 'Fira Code', Consolas, monospace",
|
||||
lineHeight: 1.4,
|
||||
scrollback: 1000,
|
||||
theme: {
|
||||
background: '#0d1117',
|
||||
foreground: '#e6edf3',
|
||||
cursor: '#58a6ff',
|
||||
cursorAccent: '#0d1117',
|
||||
selectionBackground: 'rgba(88, 166, 255, 0.3)',
|
||||
black: '#0d1117',
|
||||
red: '#f85149',
|
||||
green: '#3fb950',
|
||||
yellow: '#d29922',
|
||||
blue: '#58a6ff',
|
||||
magenta: '#bc8cff',
|
||||
cyan: '#56d4dd',
|
||||
white: '#e6edf3',
|
||||
brightBlack: '#484f58',
|
||||
brightRed: '#ff7b72',
|
||||
brightGreen: '#56d364',
|
||||
brightYellow: '#e3b341',
|
||||
brightBlue: '#79c0ff',
|
||||
brightMagenta: '#d2a8ff',
|
||||
brightCyan: '#76e3ea',
|
||||
brightWhite: '#ffffff',
|
||||
},
|
||||
allowProposedApi: true,
|
||||
});
|
||||
|
||||
// 加载插件
|
||||
const fitAddon = new FitAddon();
|
||||
const webLinksAddon = new WebLinksAddon();
|
||||
term.loadAddon(fitAddon);
|
||||
term.loadAddon(webLinksAddon);
|
||||
|
||||
// 打开终端
|
||||
term.open(container);
|
||||
xtermRef.current = term;
|
||||
fitAddonRef.current = fitAddon;
|
||||
|
||||
// 首次调整尺寸
|
||||
setTimeout(() => {
|
||||
fitAddon.fit();
|
||||
}, 0);
|
||||
|
||||
// 监听用户输入
|
||||
term.onData((data) => {
|
||||
if (connectionIdRef.current && window.electronAPI) {
|
||||
window.electronAPI.ssh.write(connectionIdRef.current, data);
|
||||
}
|
||||
});
|
||||
|
||||
// 监听容器尺寸变化
|
||||
resizeObserverRef.current = new ResizeObserver(() => {
|
||||
fitTerminal();
|
||||
});
|
||||
resizeObserverRef.current.observe(container);
|
||||
|
||||
return true;
|
||||
} catch (e) {
|
||||
console.error('终端初始化失败:', e);
|
||||
return false;
|
||||
}
|
||||
}, [fitTerminal]);
|
||||
|
||||
// 等待容器就绪后初始化
|
||||
useEffect(() => {
|
||||
isMountedRef.current = true;
|
||||
|
||||
const tryInit = () => {
|
||||
if (!isMountedRef.current) return;
|
||||
|
||||
if (initTerminal()) {
|
||||
setIsReady(true);
|
||||
// 初始化成功后连接
|
||||
setTimeout(() => {
|
||||
if (isMountedRef.current) {
|
||||
connect();
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
// 容器未就绪，继续尝试
|
||||
initTimerRef.current = setTimeout(tryInit, 100);
|
||||
}
|
||||
};
|
||||
|
||||
// 延迟开始尝试初始化
|
||||
initTimerRef.current = setTimeout(tryInit, 200);
|
||||
|
||||
return () => {
|
||||
isMountedRef.current = false;
|
||||
|
||||
if (initTimerRef.current) {
|
||||
clearTimeout(initTimerRef.current);
|
||||
}
|
||||
|
||||
if (resizeObserverRef.current) {
|
||||
resizeObserverRef.current.disconnect();
|
||||
resizeObserverRef.current = null;
|
||||
}
|
||||
|
||||
if (cleanupListenersRef.current) {
|
||||
cleanupListenersRef.current();
|
||||
cleanupListenersRef.current = null;
|
||||
}
|
||||
|
||||
if (connectionIdRef.current && window.electronAPI) {
|
||||
window.electronAPI.ssh.disconnect(connectionIdRef.current);
|
||||
connectionIdRef.current = null;
|
||||
}
|
||||
|
||||
if (xtermRef.current) {
|
||||
xtermRef.current.dispose();
|
||||
xtermRef.current = null;
|
||||
}
|
||||
fitAddonRef.current = null;
|
||||
};
|
||||
}, [initTerminal, connect]);
|
||||
|
||||
// 监听命令面板发送的命令
|
||||
useEffect(() => {
|
||||
const handleCommand = (e) => {
|
||||
if (e.detail.tabId === tabId && connectionIdRef.current && window.electronAPI) {
|
||||
window.electronAPI.ssh.write(connectionIdRef.current, e.detail.command + '\n');
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('terminal-command', handleCommand);
|
||||
return () => window.removeEventListener('terminal-command', handleCommand);
|
||||
}, [tabId]);
|
||||
|
||||
// 重连
|
||||
const handleReconnect = useCallback(() => {
|
||||
if (cleanupListenersRef.current) {
|
||||
cleanupListenersRef.current();
|
||||
cleanupListenersRef.current = null;
|
||||
}
|
||||
if (connectionIdRef.current && window.electronAPI) {
|
||||
window.electronAPI.ssh.disconnect(connectionIdRef.current);
|
||||
}
|
||||
connectionIdRef.current = null;
|
||||
isConnectingRef.current = false;
|
||||
hasConnectedRef.current = false; // 重置连接标志
|
||||
setConnectionId(null);
|
||||
setError(null);
|
||||
|
||||
// 完全重置终端（清屏+重置光标位置）
|
||||
if (xtermRef.current) {
|
||||
xtermRef.current.reset();
|
||||
}
|
||||
|
||||
setTimeout(() => connect(), 100);
|
||||
}, [connect]);
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className="h-full flex flex-col bg-shell-bg">
|
||||
{/* 终端工具栏 */}
|
||||
<div className="h-10 bg-shell-surface/50 border-b border-shell-border flex items-center px-4 justify-between flex-shrink-0">
|
||||
<div className="flex items-center gap-4">
|
||||
{!isReady ? (
|
||||
<div className="flex items-center gap-2 text-shell-text-dim text-sm">
|
||||
<div className="w-3 h-3 border-2 border-shell-text-dim border-t-transparent rounded-full animate-spin" />
|
||||
初始化...
|
||||
</div>
|
||||
) : isConnecting ? (
|
||||
<div className="flex items-center gap-2 text-shell-warning text-sm">
|
||||
<div className="w-3 h-3 border-2 border-shell-warning border-t-transparent rounded-full animate-spin" />
|
||||
连接中...
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="flex items-center gap-2 text-shell-error text-sm">
|
||||
<span className="w-2 h-2 rounded-full bg-shell-error" />
|
||||
连接失败
|
||||
</div>
|
||||
) : connectionId ? (
|
||||
<div className="flex items-center gap-2 text-shell-success text-sm">
|
||||
<span className="w-2 h-2 rounded-full status-online" />
|
||||
已连接
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 text-shell-text-dim text-sm">
|
||||
<span className="w-2 h-2 rounded-full bg-shell-text-dim" />
|
||||
未连接
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={onShowCommandPalette}
|
||||
className="flex items-center gap-2 px-3 py-1.5 rounded-md bg-shell-card
|
||||
border border-shell-border hover:border-shell-accent/50
|
||||
text-shell-text-dim hover:text-shell-text transition-all text-sm"
|
||||
title="命令面板 (Ctrl+K)"
|
||||
>
|
||||
<FiCommand size={14} />
|
||||
<span className="hidden sm:inline">命令提示</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={handleReconnect}
|
||||
disabled={!isReady}
|
||||
className="p-2 rounded-md hover:bg-shell-card text-shell-text-dim
|
||||
hover:text-shell-text transition-colors disabled:opacity-50"
|
||||
title="重新连接"
|
||||
>
|
||||
<FiRefreshCw size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 终端内容 */}
|
||||
<div
|
||||
ref={terminalRef}
|
||||
className="flex-1 p-2 terminal-container overflow-hidden"
|
||||
style={{ minHeight: '300px', minWidth: '400px' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Terminal;
|
||||
78
src/components/TitleBar.js
Normal file
78
src/components/TitleBar.js
Normal file
@ -0,0 +1,78 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { FiMinus, FiSquare, FiX, FiMaximize2 } from 'react-icons/fi';
|
||||
|
||||
function TitleBar() {
|
||||
const [isMaximized, setIsMaximized] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const checkMaximized = async () => {
|
||||
if (window.electronAPI) {
|
||||
const maximized = await window.electronAPI.window.isMaximized();
|
||||
setIsMaximized(maximized);
|
||||
}
|
||||
};
|
||||
checkMaximized();
|
||||
}, []);
|
||||
|
||||
const handleMinimize = () => {
|
||||
window.electronAPI?.window.minimize();
|
||||
};
|
||||
|
||||
const handleMaximize = async () => {
|
||||
window.electronAPI?.window.maximize();
|
||||
const maximized = await window.electronAPI?.window.isMaximized();
|
||||
setIsMaximized(maximized);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
window.electronAPI?.window.close();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-9 bg-shell-surface/80 border-b border-shell-border flex items-center justify-between px-4 drag-region">
|
||||
{/* Logo 和标题 */}
|
||||
<div className="flex items-center gap-3 no-drag">
|
||||
<div className="w-5 h-5 rounded-md bg-gradient-to-br from-shell-accent to-shell-purple flex items-center justify-center">
|
||||
<span className="text-xs font-bold text-white">E</span>
|
||||
</div>
|
||||
<span className="text-sm font-semibold text-shell-text">
|
||||
EasyShell
|
||||
</span>
|
||||
<span className="text-xs text-shell-text-dim px-2 py-0.5 bg-shell-card rounded-full">
|
||||
v1.0.0
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 窗口控制按钮 */}
|
||||
<div className="flex items-center gap-1 no-drag">
|
||||
<button
|
||||
onClick={handleMinimize}
|
||||
className="w-8 h-6 flex items-center justify-center rounded hover:bg-shell-card
|
||||
text-shell-text-dim hover:text-shell-text transition-colors"
|
||||
title="最小化"
|
||||
>
|
||||
<FiMinus size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleMaximize}
|
||||
className="w-8 h-6 flex items-center justify-center rounded hover:bg-shell-card
|
||||
text-shell-text-dim hover:text-shell-text transition-colors"
|
||||
title={isMaximized ? '还原' : '最大化'}
|
||||
>
|
||||
{isMaximized ? <FiMaximize2 size={12} /> : <FiSquare size={12} />}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="w-8 h-6 flex items-center justify-center rounded hover:bg-shell-error
|
||||
text-shell-text-dim hover:text-white transition-colors"
|
||||
title="关闭"
|
||||
>
|
||||
<FiX size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TitleBar;
|
||||
|
||||
215
src/index.css
Normal file
215
src/index.css
Normal file
@ -0,0 +1,215 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* 全局样式 */
|
||||
* {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Space Grotesk', system-ui, sans-serif;
|
||||
background: linear-gradient(135deg, #0a0e14 0%, #0d1117 50%, #161b22 100%);
|
||||
color: #e6edf3;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* 终端字体 */
|
||||
.font-mono {
|
||||
font-family: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;
|
||||
}
|
||||
|
||||
/* 可拖拽区域 */
|
||||
.drag-region {
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
.no-drag {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
/* 自定义滚动条 */
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #30363d;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: #484f58;
|
||||
}
|
||||
|
||||
/* 玻璃态效果 */
|
||||
.glass {
|
||||
background: rgba(22, 27, 34, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(48, 54, 61, 0.6);
|
||||
}
|
||||
|
||||
.glass-hover:hover {
|
||||
background: rgba(30, 36, 44, 0.9);
|
||||
border-color: rgba(88, 166, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 发光边框 */
|
||||
.glow-border {
|
||||
box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.3),
|
||||
0 0 20px rgba(88, 166, 255, 0.1);
|
||||
}
|
||||
|
||||
.glow-border-active {
|
||||
box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.5),
|
||||
0 0 30px rgba(88, 166, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 输入框样式 */
|
||||
input, textarea {
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
input:focus, textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 按钮悬停效果 */
|
||||
.btn-glow {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-glow:hover {
|
||||
box-shadow: 0 0 20px rgba(88, 166, 255, 0.4);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-glow:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* 卡片悬停效果 */
|
||||
.card-hover {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* 终端样式 */
|
||||
.terminal-container {
|
||||
background: #0d1117;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.xterm {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.xterm-viewport::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.xterm-viewport::-webkit-scrollbar-track {
|
||||
background: #161b22;
|
||||
}
|
||||
|
||||
.xterm-viewport::-webkit-scrollbar-thumb {
|
||||
background: #30363d;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 动画类 */
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.shimmer {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(88, 166, 255, 0.1) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
|
||||
/* 脉冲点 */
|
||||
.pulse-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* 状态颜色 */
|
||||
.status-online {
|
||||
background: #3fb950;
|
||||
box-shadow: 0 0 8px rgba(63, 185, 80, 0.6);
|
||||
}
|
||||
|
||||
.status-offline {
|
||||
background: #8b949e;
|
||||
}
|
||||
|
||||
.status-error {
|
||||
background: #f85149;
|
||||
box-shadow: 0 0 8px rgba(248, 81, 73, 0.6);
|
||||
}
|
||||
|
||||
/* 渐变背景 */
|
||||
.gradient-bg {
|
||||
background: radial-gradient(ellipse at top left, rgba(88, 166, 255, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at bottom right, rgba(188, 140, 255, 0.08) 0%, transparent 50%),
|
||||
linear-gradient(135deg, #0a0e14 0%, #0d1117 100%);
|
||||
}
|
||||
|
||||
/* 标签页效果 */
|
||||
.tab-active {
|
||||
background: linear-gradient(180deg, rgba(88, 166, 255, 0.2) 0%, transparent 100%);
|
||||
border-bottom: 2px solid #58a6ff;
|
||||
}
|
||||
|
||||
/* 命令提示框 */
|
||||
.command-hint {
|
||||
background: rgba(22, 27, 34, 0.95);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(48, 54, 61, 0.8);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* 代码高亮 */
|
||||
.code-highlight {
|
||||
color: #58a6ff;
|
||||
background: rgba(88, 166, 255, 0.1);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
7
src/index.js
Normal file
7
src/index.js
Normal file
@ -0,0 +1,7 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(<App />);
|
||||
509
src/services/database.js
Normal file
509
src/services/database.js
Normal file
@ -0,0 +1,509 @@
|
||||
/**
|
||||
* 数据库服务 - 支持MySQL远程同步和SQLite本地存储
|
||||
* 使用 sql.js (SQLite WASM版本) 无需原生编译
|
||||
*/
|
||||
const initSqlJs = require('sql.js');
|
||||
const mysql = require('mysql2/promise');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const { app } = require('electron');
|
||||
|
||||
class DatabaseService {
|
||||
constructor() {
|
||||
this.mysqlConnection = null;
|
||||
this.sqliteDb = null;
|
||||
this.SQL = null;
|
||||
this.isRemoteConnected = false;
|
||||
this.dbPath = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取SQLite数据库路径
|
||||
*/
|
||||
getSqlitePath() {
|
||||
const userDataPath = app?.getPath('userData') || process.cwd();
|
||||
return path.join(userDataPath, 'easyshell.db');
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存数据库到文件
|
||||
*/
|
||||
saveDatabase() {
|
||||
if (this.sqliteDb && this.dbPath) {
|
||||
const data = this.sqliteDb.export();
|
||||
const buffer = Buffer.from(data);
|
||||
fs.writeFileSync(this.dbPath, buffer);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化本地SQLite数据库
|
||||
*/
|
||||
async initLocalDatabase() {
|
||||
try {
|
||||
// 初始化 sql.js
|
||||
this.SQL = await initSqlJs();
|
||||
this.dbPath = this.getSqlitePath();
|
||||
|
||||
// 尝试加载现有数据库
|
||||
if (fs.existsSync(this.dbPath)) {
|
||||
const fileBuffer = fs.readFileSync(this.dbPath);
|
||||
this.sqliteDb = new this.SQL.Database(fileBuffer);
|
||||
} else {
|
||||
this.sqliteDb = new this.SQL.Database();
|
||||
}
|
||||
|
||||
this.createLocalTables();
|
||||
this.saveDatabase();
|
||||
console.log('✅ 本地数据库初始化成功');
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
console.error('❌ 本地数据库初始化失败:', error);
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建本地表结构
|
||||
*/
|
||||
createLocalTables() {
|
||||
// 主机信息表
|
||||
this.sqliteDb.run(`
|
||||
CREATE TABLE IF NOT EXISTS hosts (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
name TEXT NOT NULL,
|
||||
host TEXT NOT NULL,
|
||||
port INTEGER DEFAULT 22,
|
||||
username TEXT NOT NULL,
|
||||
password TEXT,
|
||||
private_key TEXT,
|
||||
group_name TEXT DEFAULT '默认分组',
|
||||
color TEXT DEFAULT '#58a6ff',
|
||||
description TEXT,
|
||||
last_connected_at TEXT,
|
||||
created_at TEXT DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TEXT DEFAULT CURRENT_TIMESTAMP,
|
||||
is_synced INTEGER DEFAULT 0
|
||||
)
|
||||
`);
|
||||
|
||||
// 命令提示/历史表
|
||||
this.sqliteDb.run(`
|
||||
CREATE TABLE IF NOT EXISTS commands (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
command TEXT NOT NULL UNIQUE,
|
||||
description TEXT,
|
||||
category TEXT DEFAULT '通用',
|
||||
usage_count INTEGER DEFAULT 0,
|
||||
host_id INTEGER,
|
||||
created_at TEXT DEFAULT CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (host_id) REFERENCES hosts(id)
|
||||
)
|
||||
`);
|
||||
|
||||
// 命令片段/快捷命令表
|
||||
this.sqliteDb.run(`
|
||||
CREATE TABLE IF NOT EXISTS snippets (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
name TEXT NOT NULL,
|
||||
command TEXT NOT NULL,
|
||||
description TEXT,
|
||||
category TEXT DEFAULT '通用',
|
||||
hotkey TEXT,
|
||||
created_at TEXT DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TEXT DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
`);
|
||||
|
||||
// 同步记录表
|
||||
this.sqliteDb.run(`
|
||||
CREATE TABLE IF NOT EXISTS sync_log (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
sync_type TEXT NOT NULL,
|
||||
sync_time TEXT DEFAULT CURRENT_TIMESTAMP,
|
||||
status TEXT,
|
||||
details TEXT
|
||||
)
|
||||
`);
|
||||
|
||||
// 插入默认命令提示
|
||||
const defaultCommands = [
|
||||
{ command: 'ls -la', description: '列出所有文件详细信息', category: '文件操作' },
|
||||
{ command: 'cd', description: '切换目录', category: '文件操作' },
|
||||
{ command: 'pwd', description: '显示当前目录', category: '文件操作' },
|
||||
{ command: 'mkdir', description: '创建目录', category: '文件操作' },
|
||||
{ command: 'rm -rf', description: '强制删除文件/目录', category: '文件操作' },
|
||||
{ command: 'cp -r', description: '递归复制文件/目录', category: '文件操作' },
|
||||
{ command: 'mv', description: '移动/重命名文件', category: '文件操作' },
|
||||
{ command: 'cat', description: '查看文件内容', category: '文件操作' },
|
||||
{ command: 'tail -f', description: '实时查看日志', category: '日志查看' },
|
||||
{ command: 'grep', description: '文本搜索', category: '文本处理' },
|
||||
{ command: 'ps aux', description: '查看所有进程', category: '系统管理' },
|
||||
{ command: 'top', description: '实时系统监控', category: '系统管理' },
|
||||
{ command: 'htop', description: '增强版系统监控', category: '系统管理' },
|
||||
{ command: 'df -h', description: '查看磁盘使用情况', category: '系统管理' },
|
||||
{ command: 'free -m', description: '查看内存使用情况', category: '系统管理' },
|
||||
{ command: 'netstat -tunlp', description: '查看网络连接', category: '网络' },
|
||||
{ command: 'systemctl status', description: '查看服务状态', category: '服务管理' },
|
||||
{ command: 'systemctl restart', description: '重启服务', category: '服务管理' },
|
||||
{ command: 'docker ps', description: '查看运行中的容器', category: 'Docker' },
|
||||
{ command: 'docker logs -f', description: '实时查看容器日志', category: 'Docker' },
|
||||
];
|
||||
|
||||
for (const cmd of defaultCommands) {
|
||||
try {
|
||||
this.sqliteDb.run(
|
||||
`INSERT OR IGNORE INTO commands (command, description, category) VALUES (?, ?, ?)`,
|
||||
[cmd.command, cmd.description, cmd.category]
|
||||
);
|
||||
} catch (e) {
|
||||
// 忽略重复插入错误
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 连接MySQL远程数据库
|
||||
*/
|
||||
async connectMySQL(config) {
|
||||
try {
|
||||
// 如果是 localhost，转换为 127.0.0.1 强制使用 IPv4
|
||||
let host = config.host;
|
||||
if (host === 'localhost') {
|
||||
host = '127.0.0.1';
|
||||
}
|
||||
|
||||
// 先不指定数据库连接，这样可以创建数据库
|
||||
this.mysqlConnection = await mysql.createConnection({
|
||||
host: host,
|
||||
port: config.port || 3306,
|
||||
user: config.user,
|
||||
password: config.password,
|
||||
connectTimeout: 10000,
|
||||
});
|
||||
|
||||
// 自动建库建表
|
||||
await this.initRemoteDatabase(config.database || 'easyshell');
|
||||
|
||||
this.isRemoteConnected = true;
|
||||
console.log('✅ MySQL远程数据库连接成功');
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
console.error('❌ MySQL连接失败:', error);
|
||||
this.isRemoteConnected = false;
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化远程MySQL数据库（自动建库建表）
|
||||
*/
|
||||
async initRemoteDatabase(dbName) {
|
||||
try {
|
||||
// 创建数据库 - 使用 query 而不是 execute
|
||||
await this.mysqlConnection.query(
|
||||
`CREATE DATABASE IF NOT EXISTS \`${dbName}\` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci`
|
||||
);
|
||||
|
||||
// 使用数据库 - 使用 query 而不是 execute
|
||||
await this.mysqlConnection.query(`USE \`${dbName}\``);
|
||||
|
||||
// 创建主机表
|
||||
await this.mysqlConnection.query(`
|
||||
CREATE TABLE IF NOT EXISTS hosts (
|
||||
id INT PRIMARY KEY AUTO_INCREMENT,
|
||||
name VARCHAR(255) NOT NULL,
|
||||
host VARCHAR(255) NOT NULL,
|
||||
port INT DEFAULT 22,
|
||||
username VARCHAR(255) NOT NULL,
|
||||
password TEXT,
|
||||
private_key TEXT,
|
||||
group_name VARCHAR(100) DEFAULT '默认分组',
|
||||
color VARCHAR(20) DEFAULT '#58a6ff',
|
||||
description TEXT,
|
||||
last_connected_at DATETIME,
|
||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
|
||||
`);
|
||||
|
||||
// 创建命令表
|
||||
await this.mysqlConnection.query(`
|
||||
CREATE TABLE IF NOT EXISTS commands (
|
||||
id INT PRIMARY KEY AUTO_INCREMENT,
|
||||
command TEXT NOT NULL,
|
||||
description TEXT,
|
||||
category VARCHAR(100) DEFAULT '通用',
|
||||
usage_count INT DEFAULT 0,
|
||||
host_id INT,
|
||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (host_id) REFERENCES hosts(id) ON DELETE SET NULL
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
|
||||
`);
|
||||
|
||||
// 创建命令片段表
|
||||
await this.mysqlConnection.query(`
|
||||
CREATE TABLE IF NOT EXISTS snippets (
|
||||
id INT PRIMARY KEY AUTO_INCREMENT,
|
||||
name VARCHAR(255) NOT NULL,
|
||||
command TEXT NOT NULL,
|
||||
description TEXT,
|
||||
category VARCHAR(100) DEFAULT '通用',
|
||||
hotkey VARCHAR(50),
|
||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
|
||||
`);
|
||||
|
||||
console.log('✅ 远程数据库表结构初始化完成');
|
||||
} catch (error) {
|
||||
console.error('❌ 远程数据库初始化失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 断开MySQL连接
|
||||
*/
|
||||
async disconnectMySQL() {
|
||||
if (this.mysqlConnection) {
|
||||
await this.mysqlConnection.end();
|
||||
this.mysqlConnection = null;
|
||||
this.isRemoteConnected = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 同步数据到远程
|
||||
*/
|
||||
async syncToRemote() {
|
||||
if (!this.isRemoteConnected) {
|
||||
return { success: false, error: '未连接到远程数据库' };
|
||||
}
|
||||
|
||||
try {
|
||||
// 获取本地未同步的主机
|
||||
const localHosts = this.runQuery('SELECT * FROM hosts WHERE is_synced = 0');
|
||||
|
||||
for (const host of localHosts) {
|
||||
await this.mysqlConnection.execute(`
|
||||
INSERT INTO hosts (name, host, port, username, password, private_key, group_name, color, description)
|
||||
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
|
||||
ON DUPLICATE KEY UPDATE
|
||||
name = VALUES(name),
|
||||
port = VALUES(port),
|
||||
username = VALUES(username),
|
||||
password = VALUES(password),
|
||||
private_key = VALUES(private_key),
|
||||
group_name = VALUES(group_name),
|
||||
color = VALUES(color),
|
||||
description = VALUES(description)
|
||||
`, [host.name, host.host, host.port, host.username, host.password, host.private_key, host.group_name, host.color, host.description]);
|
||||
|
||||
// 标记为已同步
|
||||
this.sqliteDb.run('UPDATE hosts SET is_synced = 1 WHERE id = ?', [host.id]);
|
||||
}
|
||||
|
||||
this.saveDatabase();
|
||||
|
||||
// 记录同步日志
|
||||
this.sqliteDb.run(
|
||||
`INSERT INTO sync_log (sync_type, status, details) VALUES ('upload', 'success', ?)`,
|
||||
[JSON.stringify({ synced_hosts: localHosts.length })]
|
||||
);
|
||||
this.saveDatabase();
|
||||
|
||||
return { success: true, synced: localHosts.length };
|
||||
} catch (error) {
|
||||
console.error('❌ 同步到远程失败:', error);
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 从远程同步数据
|
||||
*/
|
||||
async syncFromRemote() {
|
||||
if (!this.isRemoteConnected) {
|
||||
return { success: false, error: '未连接到远程数据库' };
|
||||
}
|
||||
|
||||
try {
|
||||
// 获取远程主机
|
||||
const [remoteHosts] = await this.mysqlConnection.execute('SELECT * FROM hosts');
|
||||
|
||||
for (const host of remoteHosts) {
|
||||
this.sqliteDb.run(`
|
||||
INSERT OR REPLACE INTO hosts (id, name, host, port, username, password, private_key, group_name, color, description, is_synced)
|
||||
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 1)
|
||||
`, [host.id, host.name, host.host, host.port, host.username, host.password, host.private_key, host.group_name, host.color, host.description]);
|
||||
}
|
||||
|
||||
// 同步命令
|
||||
const [remoteCommands] = await this.mysqlConnection.execute('SELECT * FROM commands');
|
||||
|
||||
for (const cmd of remoteCommands) {
|
||||
this.sqliteDb.run(`
|
||||
INSERT OR REPLACE INTO commands (id, command, description, category, usage_count)
|
||||
VALUES (?, ?, ?, ?, ?)
|
||||
`, [cmd.id, cmd.command, cmd.description, cmd.category, cmd.usage_count]);
|
||||
}
|
||||
|
||||
this.saveDatabase();
|
||||
|
||||
// 记录同步日志
|
||||
this.sqliteDb.run(
|
||||
`INSERT INTO sync_log (sync_type, status, details) VALUES ('download', 'success', ?)`,
|
||||
[JSON.stringify({ hosts: remoteHosts.length, commands: remoteCommands.length })]
|
||||
);
|
||||
this.saveDatabase();
|
||||
|
||||
return { success: true, hosts: remoteHosts.length, commands: remoteCommands.length };
|
||||
} catch (error) {
|
||||
console.error('❌ 从远程同步失败:', error);
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 执行查询并返回结果数组
|
||||
*/
|
||||
runQuery(sql, params = []) {
|
||||
const stmt = this.sqliteDb.prepare(sql);
|
||||
stmt.bind(params);
|
||||
const results = [];
|
||||
while (stmt.step()) {
|
||||
results.push(stmt.getAsObject());
|
||||
}
|
||||
stmt.free();
|
||||
return results;
|
||||
}
|
||||
|
||||
/**
|
||||
* 执行查询并返回单个结果
|
||||
*/
|
||||
runQuerySingle(sql, params = []) {
|
||||
const results = this.runQuery(sql, params);
|
||||
return results.length > 0 ? results[0] : null;
|
||||
}
|
||||
|
||||
// ========== 主机管理方法 ==========
|
||||
|
||||
getAllHosts() {
|
||||
return this.runQuery('SELECT * FROM hosts ORDER BY group_name, name');
|
||||
}
|
||||
|
||||
getHostById(id) {
|
||||
return this.runQuerySingle('SELECT * FROM hosts WHERE id = ?', [id]);
|
||||
}
|
||||
|
||||
addHost(host) {
|
||||
this.sqliteDb.run(`
|
||||
INSERT INTO hosts (name, host, port, username, password, private_key, group_name, color, description)
|
||||
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
|
||||
`, [
|
||||
host.name, host.host, host.port || 22, host.username,
|
||||
host.password, host.privateKey, host.groupName || '默认分组',
|
||||
host.color || '#58a6ff', host.description
|
||||
]);
|
||||
this.saveDatabase();
|
||||
|
||||
// 获取最后插入的ID
|
||||
const result = this.runQuerySingle('SELECT last_insert_rowid() as id');
|
||||
return { id: result.id };
|
||||
}
|
||||
|
||||
updateHost(id, host) {
|
||||
this.sqliteDb.run(`
|
||||
UPDATE hosts SET
|
||||
name = ?, host = ?, port = ?, username = ?, password = ?,
|
||||
private_key = ?, group_name = ?, color = ?, description = ?,
|
||||
updated_at = CURRENT_TIMESTAMP, is_synced = 0
|
||||
WHERE id = ?
|
||||
`, [
|
||||
host.name, host.host, host.port, host.username, host.password,
|
||||
host.privateKey, host.groupName, host.color, host.description, id
|
||||
]);
|
||||
this.saveDatabase();
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
deleteHost(id) {
|
||||
this.sqliteDb.run('DELETE FROM hosts WHERE id = ?', [id]);
|
||||
this.saveDatabase();
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
updateLastConnected(id) {
|
||||
this.sqliteDb.run(`UPDATE hosts SET last_connected_at = CURRENT_TIMESTAMP WHERE id = ?`, [id]);
|
||||
this.saveDatabase();
|
||||
}
|
||||
|
||||
// ========== 命令提示方法 ==========
|
||||
|
||||
searchCommands(keyword) {
|
||||
return this.runQuery(`
|
||||
SELECT * FROM commands
|
||||
WHERE command LIKE ? OR description LIKE ?
|
||||
ORDER BY usage_count DESC, command
|
||||
LIMIT 20
|
||||
`, [`%${keyword}%`, `%${keyword}%`]);
|
||||
}
|
||||
|
||||
getAllCommands() {
|
||||
return this.runQuery('SELECT * FROM commands ORDER BY category, command');
|
||||
}
|
||||
|
||||
incrementCommandUsage(id) {
|
||||
this.sqliteDb.run('UPDATE commands SET usage_count = usage_count + 1 WHERE id = ?', [id]);
|
||||
this.saveDatabase();
|
||||
}
|
||||
|
||||
addCommand(command) {
|
||||
this.sqliteDb.run(`
|
||||
INSERT INTO commands (command, description, category)
|
||||
VALUES (?, ?, ?)
|
||||
`, [command.command, command.description, command.category || '通用']);
|
||||
this.saveDatabase();
|
||||
|
||||
const result = this.runQuerySingle('SELECT last_insert_rowid() as id');
|
||||
return { id: result.id };
|
||||
}
|
||||
|
||||
// ========== 命令片段方法 ==========
|
||||
|
||||
getAllSnippets() {
|
||||
return this.runQuery('SELECT * FROM snippets ORDER BY category, name');
|
||||
}
|
||||
|
||||
addSnippet(snippet) {
|
||||
this.sqliteDb.run(`
|
||||
INSERT INTO snippets (name, command, description, category, hotkey)
|
||||
VALUES (?, ?, ?, ?, ?)
|
||||
`, [snippet.name, snippet.command, snippet.description, snippet.category, snippet.hotkey]);
|
||||
this.saveDatabase();
|
||||
|
||||
const result = this.runQuerySingle('SELECT last_insert_rowid() as id');
|
||||
return { id: result.id };
|
||||
}
|
||||
|
||||
deleteSnippet(id) {
|
||||
this.sqliteDb.run('DELETE FROM snippets WHERE id = ?', [id]);
|
||||
this.saveDatabase();
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
// ========== 关闭数据库 ==========
|
||||
|
||||
close() {
|
||||
if (this.sqliteDb) {
|
||||
this.saveDatabase();
|
||||
this.sqliteDb.close();
|
||||
}
|
||||
if (this.mysqlConnection) {
|
||||
this.mysqlConnection.end();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = new DatabaseService();
|
||||
209
src/services/ssh.js
Normal file
209
src/services/ssh.js
Normal file
@ -0,0 +1,209 @@
|
||||
/**
|
||||
* SSH连接服务
|
||||
*/
|
||||
const { Client } = require('ssh2');
|
||||
|
||||
class SSHService {
|
||||
constructor() {
|
||||
this.connections = new Map();
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建SSH连接
|
||||
*/
|
||||
connect(hostConfig, connectionId, callbacks = {}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const conn = new Client();
|
||||
let resolved = false;
|
||||
|
||||
conn.on('ready', () => {
|
||||
console.log(`✅ SSH连接成功: ${hostConfig.host}`);
|
||||
this.connections.set(connectionId, conn);
|
||||
|
||||
// 创建shell
|
||||
conn.shell({ term: 'xterm-256color' }, (err, stream) => {
|
||||
if (err) {
|
||||
if (!resolved) {
|
||||
resolved = true;
|
||||
reject(err);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
stream.on('data', (data) => {
|
||||
if (callbacks.onData) {
|
||||
callbacks.onData(data.toString());
|
||||
}
|
||||
});
|
||||
|
||||
stream.on('close', () => {
|
||||
console.log(`📤 SSH会话关闭: ${hostConfig.host}`);
|
||||
this.disconnect(connectionId);
|
||||
if (callbacks.onClose) {
|
||||
callbacks.onClose();
|
||||
}
|
||||
});
|
||||
|
||||
stream.stderr.on('data', (data) => {
|
||||
if (callbacks.onData) {
|
||||
callbacks.onData(data.toString());
|
||||
}
|
||||
});
|
||||
|
||||
if (!resolved) {
|
||||
resolved = true;
|
||||
resolve({
|
||||
connectionId,
|
||||
stream,
|
||||
write: (data) => stream.write(data),
|
||||
resize: (cols, rows) => stream.setWindow(rows, cols, 0, 0),
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
conn.on('error', (err) => {
|
||||
console.error(`❌ SSH连接错误: ${err.message}`);
|
||||
if (callbacks.onError) {
|
||||
callbacks.onError(err);
|
||||
}
|
||||
if (!resolved) {
|
||||
resolved = true;
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
|
||||
conn.on('close', () => {
|
||||
this.connections.delete(connectionId);
|
||||
if (callbacks.onClose) {
|
||||
callbacks.onClose();
|
||||
}
|
||||
});
|
||||
|
||||
// 连接配置
|
||||
const connectConfig = {
|
||||
host: hostConfig.host,
|
||||
port: hostConfig.port || 22,
|
||||
username: hostConfig.username,
|
||||
readyTimeout: 20000, // 增加超时时间
|
||||
keepaliveInterval: 10000,
|
||||
};
|
||||
|
||||
// 使用密码或私钥
|
||||
if (hostConfig.privateKey && hostConfig.privateKey.trim()) {
|
||||
connectConfig.privateKey = hostConfig.privateKey;
|
||||
}
|
||||
if (hostConfig.password && hostConfig.password.trim()) {
|
||||
connectConfig.password = hostConfig.password;
|
||||
}
|
||||
|
||||
// 如果没有提供认证方式
|
||||
if (!connectConfig.privateKey && !connectConfig.password) {
|
||||
if (!resolved) {
|
||||
resolved = true;
|
||||
reject(new Error('请提供密码或SSH私钥'));
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
conn.connect(connectConfig);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 断开连接
|
||||
*/
|
||||
disconnect(connectionId) {
|
||||
const conn = this.connections.get(connectionId);
|
||||
if (conn) {
|
||||
conn.end();
|
||||
this.connections.delete(connectionId);
|
||||
console.log(`📤 SSH连接已断开: ${connectionId}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 断开所有连接
|
||||
*/
|
||||
disconnectAll() {
|
||||
for (const [id, conn] of this.connections) {
|
||||
conn.end();
|
||||
}
|
||||
this.connections.clear();
|
||||
}
|
||||
|
||||
/**
|
||||
* 执行单个命令
|
||||
*/
|
||||
exec(hostConfig, command) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const conn = new Client();
|
||||
let output = '';
|
||||
let errorOutput = '';
|
||||
|
||||
conn.on('ready', () => {
|
||||
conn.exec(command, (err, stream) => {
|
||||
if (err) {
|
||||
conn.end();
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
|
||||
stream.on('close', (code) => {
|
||||
conn.end();
|
||||
resolve({
|
||||
code,
|
||||
stdout: output,
|
||||
stderr: errorOutput,
|
||||
});
|
||||
});
|
||||
|
||||
stream.on('data', (data) => {
|
||||
output += data.toString();
|
||||
});
|
||||
|
||||
stream.stderr.on('data', (data) => {
|
||||
errorOutput += data.toString();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
conn.on('error', reject);
|
||||
|
||||
const connectConfig = {
|
||||
host: hostConfig.host,
|
||||
port: hostConfig.port || 22,
|
||||
username: hostConfig.username,
|
||||
};
|
||||
|
||||
if (hostConfig.privateKey) {
|
||||
connectConfig.privateKey = hostConfig.privateKey;
|
||||
} else if (hostConfig.password) {
|
||||
connectConfig.password = hostConfig.password;
|
||||
}
|
||||
|
||||
conn.connect(connectConfig);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 测试连接
|
||||
*/
|
||||
async testConnection(hostConfig) {
|
||||
try {
|
||||
const result = await this.exec(hostConfig, 'echo "connected"');
|
||||
return {
|
||||
success: true,
|
||||
message: '连接成功',
|
||||
};
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
message: error.message,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = new SSHService();
|
||||
|
||||
68
tailwind.config.js
Normal file
68
tailwind.config.js
Normal file
@ -0,0 +1,68 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
"./src/**/*.{js,jsx,ts,tsx}",
|
||||
"./public/index.html"
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'shell': {
|
||||
'bg': '#0a0e14',
|
||||
'surface': '#0d1117',
|
||||
'card': '#161b22',
|
||||
'border': '#30363d',
|
||||
'accent': '#58a6ff',
|
||||
'accent-glow': '#1f6feb',
|
||||
'success': '#3fb950',
|
||||
'warning': '#d29922',
|
||||
'error': '#f85149',
|
||||
'text': '#e6edf3',
|
||||
'text-dim': '#8b949e',
|
||||
'cyan': '#56d4dd',
|
||||
'purple': '#bc8cff',
|
||||
'orange': '#ffa657',
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
'mono': ['JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'monospace'],
|
||||
'display': ['Space Grotesk', 'SF Pro Display', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
boxShadow: {
|
||||
'glow': '0 0 20px rgba(88, 166, 255, 0.3)',
|
||||
'glow-lg': '0 0 40px rgba(88, 166, 255, 0.4)',
|
||||
'card': '0 8px 32px rgba(0, 0, 0, 0.4)',
|
||||
},
|
||||
animation: {
|
||||
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
'glow': 'glow 2s ease-in-out infinite alternate',
|
||||
'slide-up': 'slideUp 0.3s ease-out',
|
||||
'slide-in': 'slideIn 0.2s ease-out',
|
||||
'fade-in': 'fadeIn 0.2s ease-out',
|
||||
},
|
||||
keyframes: {
|
||||
glow: {
|
||||
'0%': { boxShadow: '0 0 5px rgba(88, 166, 255, 0.2)' },
|
||||
'100%': { boxShadow: '0 0 20px rgba(88, 166, 255, 0.6)' },
|
||||
},
|
||||
slideUp: {
|
||||
'0%': { transform: 'translateY(10px)', opacity: '0' },
|
||||
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||||
},
|
||||
slideIn: {
|
||||
'0%': { transform: 'translateX(-10px)', opacity: '0' },
|
||||
'100%': { transform: 'translateX(0)', opacity: '1' },
|
||||
},
|
||||
fadeIn: {
|
||||
'0%': { opacity: '0' },
|
||||
'100%': { opacity: '1' },
|
||||
},
|
||||
},
|
||||
backdropBlur: {
|
||||
'xs': '2px',
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user