# ssh **Repository Path**: wjnxyq/ssh ## Basic Information - **Project Name**: ssh - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-10-24 - **Last Updated**: 2025-11-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 🚀 现代化SSH连接工具 一个基于 Electron、React 和 TypeScript 构建的现代化跨平台 SSH 客户端，提供专业级的远程连接管理和文件操作体验。 ## ✨ 核心特性 ### 🎯 当前版本：v0.2.0 (第二阶段完成) #### ✅ 第一阶段：基础框架 - [x] 现代化UI界面 - [x] 主题系统（深色/浅色/自动） - [x] 侧边栏导航 - [x] 状态栏组件 - [x] 路由管理 #### ✅ 第二阶段：SSH连接功能 **(最新)** - [x] **连接管理页面** - 连接列表展示（分组显示） - 搜索和筛选（按状态、系统、分组） - 批量导入/导出（JSON格式） - 连接操作（连接/编辑/删除） - [x] **新建/编辑连接** - 完整表单配置 - 双认证方式：密码认证、密钥认证 - 高级选项：标签、分组、连接超时、保持连接、重连 - 端口转发：本地转发、远程转发、动态转发 - [x] **数据持久化** - 使用 Zustand 状态管理 - localStorage 数据持久化 - 完整的 TypeScript 类型定义 - [x] **UI/UX 优化** - 响应式设计（移动端适配） - Ant Design 组件集成 - 现代化渐变背景 - 连接状态可视化（彩色状态点） #### 🚧 第三阶段：文件管理功能 (开发中) - [ ] SFTP文件浏览器 - [ ] 文件上传下载 - [ ] 传输队列管理 - [ ] 文件权限管理 #### ⏳ 第四阶段：AI助手功能 (规划中) - [ ] AI命令建议 - [ ] 智能命令解释 - [ ] 问题诊断分析 - [ ] 脚本生成 #### ⏳ 第五阶段：系统设置功能 (规划中) - [ ] 常规设置 - [ ] 外观自定义 - [ ] 安全设置 - [ ] 性能监控 --- ## 🛠 技术栈 ### 核心技术 - **Electron** ^27.0.0 - 跨平台桌面应用框架 - **React** ^18.2.0 - 前端UI库 - **TypeScript** ^5.2.2 - 类型安全的JavaScript - **Vite** ^4.4.9 - 快速构建工具 - **Ant Design** ^5.8.6 - 企业级UI组件库 - **Zustand** ^4.4.1 - 轻量级状态管理 ### SSH/网络 - **ssh2** ^1.14.0 - SSH客户端实现 - **ssh2-sftp-client** ^9.1.0 - SFTP文件传输 - **axios** ^1.5.0 - HTTP客户端 ### 开发工具 - **TypeScript** - 类型检查 - **ESLint** - 代码规范 - **Prettier** - 代码格式化 - **Jest** - 单元测试 - **Electron Builder** - 应用打包 --- ## 📁 项目结构 ``` ┌─────────────────────────────────┐ │ src/ │ │ ├── main/ │ │ │ ├── index.ts │ Electron主进程入口 │ │ ├── window.ts │ 窗口管理器 │ │ ├── menu.ts │ 菜单栏配置 │ │ └── ipc/ │ IPC通信处理 │ │ │ ├── renderer/ │ │ │ ├── index.tsx │ React渲染入口 │ │ ├── App.tsx │ 根组件 │ │ ├── router/ │ 路由配置 │ │ ├── stores/ │ 状态管理 │ │ │ ├── appStore.ts │ 应用状态 │ │ │ ├── themeStore.ts │ 主题状态 │ │ │ └── connectionsStore.ts │ 🔥 连接状态 │ │ │ │ │ ├── pages/ │ 页面组件 │ │ │ ├── ConnectionsPage/ │ 🔥 连接管理页面 │ │ │ ├── TerminalPage/ │ 终端页面 │ │ │ ├── FilesPage/ │ 文件管理页面 │ │ │ ├── AIAssistantPage/ │ AI助手页面 │ │ │ └── SettingsPage/ │ 设置页面 │ │ │ │ │ ├── components/ │ 通用组件 │ │ │ ├── Layout/ │ 布局组件 │ │ │ ├── Connections/ │ 🔥 连接相关组件 │ │ │ └── Common/ │ 公共组件 │ │ │ │ │ └── styles/ │ 样式文件 │ │ └── global.css │ 全局样式 │ │ │ └── shared/ │ 共享代码 │ ├── types/ │ TypeScript类型定义 │ └── constants/ │ 常量配置 │ ├── package.json │ 项目配置 ├── tsconfig.json │ TypeScript配置 └── vite.config.ts │ Vite构建配置 ``` --- ## 🚀 快速开始 ### 环境要求 - Node.js >= 16.0.0 - npm >= 8.0.0 - Windows / macOS / Linux ### 安装步骤 1. **克隆仓库** ```bash git clone https://gitee.com/wjnxyq/ssh.git cd ssh ``` 2. **安装依赖** ```bash npm install # 或者使用 yarn yarn install ``` 3. **启动开发服务器** ```bash npm run dev # 应用将在 http://localhost:3000 运行，并自动打开 Electron 窗口 ``` 4. **构建生产版本** ```bash npm run build ``` 5. **打包应用** ```bash # 所有平台 npm run build:all # Windows npm run dist:win # macOS npm run dist:mac # Linux npm run dist:linux ``` --- ## 📖 使用指南 ### 🔐 SSH连接管理 #### 1. 新建SSH连接 1. 点击顶部"新建连接"按钮 2. 填写连接信息： - 连接名称（如"生产服务器"） - 主机地址（IP或域名） - 端口（默认22） - 用户名 - 认证方式（密码或密钥） 3. 配置高级选项（可选） 4. 点击"保存" #### 2. 连接服务器 - 在连接列表中点击"连接"按钮 - 连接状态会变为绿色（已连接） - 右键菜单支持额外操作 #### 3. 管理连接 - **编辑**：点击编辑按钮或右键菜单 - **删除**：确认后删除连接配置 - **复制信息**：复制主机地址和用户名 - **导入/导出**：批量管理连接配置 #### 4. 搜索和筛选 - **搜索框**：按名称、IP、用户名搜索 - **状态筛选**：显示特定状态的连接 - **系统筛选**：按操作系统过滤 - **分组筛选**：按分组显示 #### 5. 端口转发配置 在编辑连接时，可以配置： - **本地转发**：将本地端口转发到远程 - **远程转发**：将远程端口转发到本地 - **动态转发**：SOCKS代理 --- ## 🎨 主题系统 ### 可用的主题 - 🌞 **浅色模式** - 明亮的现代化界面 - 🌙 **深色模式** - 护眼的专业外观 - 🔄 **自动模式** - 根据系统设置自动切换 ### 切换主题 ```typescript // 在设置页面或状态栏 const { theme, setTheme } = useThemeStore(); // setTheme('light' | 'dark' | 'auto') ``` --- ## 🛡️ 安全特性 - ✅ **密码加密存储** - 敏感信息加密保存 - ✅ **密钥认证支持** - 支持SSH密钥登录 - ✅ **本地数据存储** - 所有数据本地保存 - ✅ **键盘交互认证** - 支持2FA等高级认证 --- ## 📸 屏幕截图 ### 连接管理界面 > *显示连接列表、分组和筛选功能* ``` ┌────────────────────────────────────────────────────┐ │ 🔌 连接管理 │ │ │ │ [搜索框] [状态筛选] [系统筛选] [分组筛选] [重置] │ │ │ │ 📁 生产环境 (3) │ │ ┌────────────────────────────────────────┐ │ │ │ 🐧 服务器1 192.168.1.100:22 │ │ │ │ 用户: root 系统: Linux │ │ │ │ 最后连接: 2小时前 [连接] [编辑] [删除]│ │ │ └────────────────────────────────────────┘ │ │ │ │ 📁 测试环境 (2) │ │ ┌────────────────────────────────────────┐ │ │ │ 🪟 测试机 192.168.1.101:22 │ │ │ │ 用户: test 系统: Windows │ │ │ │ 最后连接: 1天前 [连接] [编辑] [删除]│ │ │ └────────────────────────────────────────┘ │ └────────────────────────────────────────────────────┘ ``` ### 连接配置窗口 > *创建或编辑SSH连接* ``` ┌────────────────────────────────────┐ │ 新建连接 [保存] [取消]│ ├────────────────────────────────────┤ │ 基本信息 │ │ 连接名称: [_______________] │ │ 主机地址: [_______________] │ │ 端口: [___] │ │ 用户名: [_______________] │ │ │ │ 认证方式: ○密码 ●密钥 │ │ 密码/密钥: [_______________] │ │ │ │ 高级选项 │ │ 分组: [▽ 选择分组 ▼] │ │ 标签: [linux, prod] │ │ 端口转发: 本地8080 → 127.0.0.1:80│ └────────────────────────────────────┘ ``` --- ## 📈 开发状态 | 阶段 | 功能模块 | 状态 | 预计完成 | 实际完成 | |------|---------|------|---------|---------| | 1 | 基础框架 | ✅ | 1周 | ✅ | | 2 | SSH连接 | ✅ | 2周 | ✅ | | 3 | 文件管理 | 🚧 | 3周 | 进行中 | | 4 | AI助手 | ⏳ | 4周 | 计划中 | | 5 | 系统设置 | ⏳ | 2周 | 计划中 | --- ## 🔧 开发注意事项 ### 代码规范 - 使用 TypeScript 严格模式 - 遵循 ESLint 规则 - 函数组件 + Hooks - 使用 CSS Modules 避免样式污染 ### Git工作流 ```bash # 创建功能分支 git checkout -b feature/ssh-connection # 开发完成后 git add . git commit -m "feat: add ssh connection management" git push origin feature/ssh-connection # 创建 Pull Request ``` ### 提交信息规范 - `feat:` 新功能 - `fix:` 修复bug - `docs:` 文档更新 - `style:` 样式调整 - `refactor:` 重构 - `test:` 测试 --- ## 🤝 贡献指南 欢迎贡献代码、提出问题或改进建议！ ### 如何贡献 1. **Fork 仓库** - 点击 GitHub 右上角的 Fork 按钮 2. **创建功能分支** ```bash git checkout -b feature/amazing-feature ``` 3. **提交更改** ```bash git add . git commit -m 'feat: add amazing feature' git push origin feature/amazing-feature ``` 4. **创建 Pull Request** - 在 GitHub 上提交 PR - 描述清楚功能点和测试方法 ### 报告问题 - 使用 GitHub Issues - 提供详细的复现步骤 - 附上错误日志和截图 --- ## 📝 文档索引 - 📊 [需求文档总览](需求文档总览.md) - 完整功能规划 - 🔧 [开发文档](开发文档.md) - 技术架构和设计决策 - 🎨 [用户界面设计](用户界面设计.md) - UI/UX规范 - 🗺️ [技术架构图](技术架构图.md) - 系统架构 - ⚙️ [配置文件示例](配置文件示例.md) - 配置说明 ### 阶段文档 - ✅ [第一阶段 - 基础框架](项目进度-第一阶段-更新.md) - ✅ [第二阶段 - SSH连接功能](项目进度-第二阶段-更新.md) ⬅️ 最新 - 🚧 [第三阶段 - 文件管理](项目进度-第三阶段-开发中.md) (待创建) --- ## 📄 许可证 该项目基于 **MIT 许可证** 开源，详见 [LICENSE](LICENSE) 文件。 --- ## 🎉 致谢 感谢以下开源项目和库的开发者： - [Electron](https://electronjs.org/) - 跨平台桌面应用框架 - [React](https://reactjs.org/) - UI库 - [Ant Design](https://ant.design/) - 组件库 - [Zustand](https://zustand-demo.pmnd.rs/) - 状态管理 - [ssh2](https://github.com/mscdex/ssh2) - SSH客户端 --- ## 📞 联系方式 如有问题或建议，请通过以下方式联系： - 📧 邮箱：wjnxyq@gmail.com - 🐙 GitHub：[wjnxyq](https://github.com/wjnxyq) - 🌐 Gitee：[wjnxyq](https://gitee.com/wjnxyq) --- **项目维护**: 老王 **最后更新**: 2025年11月20日 **版本**: v0.2.0