feat: v0.3.0 版本 - SSH终端、SFTP、端口转发功能实现

核心功能: - SSH终端: 密码/密钥认证、XTerm.js终端、多主题配色、IP高亮 - SFTP管理: 双栏文件管理、上传下载、传输队列 - 端口转发: 本地/远程转发、SOCKS5动态代理、规则管理架构改进: - 拆分大型组件 (SFTPView/TabBar/Sidebar) - 添加统一日志和错误处理 - 修复React严格模式下的终端黑屏问题 UI更新: - 新增端口转发视图 - 更新UI预览文档 - 左侧栏右键菜单支持SFTP快捷打开
2026-04-06 01:20:47 +08:00
1 parent cf1c054381
commit 484d850abd
@@ -1,93 +1,147 @@
-# opsxshell
+# OpsXShell GUI

+跨平台 SSH/SFTP 终端工具 · 简洁高效 · 安全可靠

+## 功能特性

-## Getting started
+- 🔐 **SSH 终端** - 支持密码、密钥、SSH Agent 多种认证方式
+- 📁 **SFTP 文件管理** - 双栏可视化文件管理，拖拽上传下载
+- 🔄 **端口转发** - 本地/远程/动态端口转发
+- 📑 **多标签页** - 类浏览器标签管理，支持会话恢复
+- 🎨 **现代 UI** - 基于 Tailwind CSS 的深色主题界面
+- 🔒 **安全可靠** - 敏感数据加密存储
+- 🌐 **跨平台** - 支持 Windows、macOS、Linux

-To make it easy for you to get started with GitLab, here's a list of recommended next steps.
+## 技术栈

-Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
+| 层级 | 技术 |
+|------|------|
+| 框架 | Electron 28+ |
+| 前端 | React 18 + TypeScript 5 |
+| 构建 | Vite 5 |
+| 状态管理 | Zustand |
+| 样式 | Tailwind CSS |
+| 终端 | XTerm.js |
+| SSH/SFTP | node-ssh2 |

-## Add your files
+## 快速开始

- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
+### 环境要求

-```
-cd existing_repo
-git remote add origin http://gitlab.opsx.vip:9000/devops/opsxshell.git
-git branch -M main
-git push -uf origin main
+- Node.js 18+
+- npm 9+ 或 yarn 1.22+
+- Git
+
+### 安装
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+
+# 构建应用
+npm run build
+
+# 打包分发
+npm run dist
 ```

-## Integrate with your tools
+### 平台特定打包

- [ ] [Set up project integrations](http://gitlab.opsx.vip:9000/devops/opsxshell/-/settings/integrations)
+```bash
+# Windows
+npm run dist:win

-## Collaborate with your team
+# macOS
+npm run dist:mac

- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
- [ ] [Set auto-merge](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
+# Linux
+npm run dist:linux
+```

-## Test and Deploy
+## 项目结构

-Use the built-in continuous integration in GitLab.
+```
+opsxshell-gui/
+├── electron/                 # Electron 主进程
+│   ├── main.ts              # 主进程入口
+│   ├── preload.ts           # 预加载脚本
+│   └── tsconfig.json        # 主进程 TS 配置
+├── src/                     # 渲染进程 (React)
+│   ├── components/          # 组件
+│   │   ├── Sidebar.tsx      # 侧边栏
+│   │   ├── TabBar.tsx       # 标签栏
+│   │   ├── TabContent.tsx   # 标签内容
+│   │   ├── StatusBar.tsx    # 状态栏
+│   │   ├── WelcomeView.tsx  # 欢迎页面
+│   │   ├── TerminalView.tsx # 终端视图
+│   │   ├── SFTPView.tsx     # SFTP 视图
+│   │   ├── SettingsView.tsx # 设置视图
+│   │   ├── SessionDialog.tsx      # 会话对话框
+│   │   └── QuickConnectDialog.tsx # 快速连接对话框
+│   ├── stores/              # 状态管理
+│   │   ├── tabStore.ts      # 标签状态
+│   │   └── connectionStore.ts # 连接状态
+│   ├── App.tsx              # 根组件
+│   ├── main.tsx             # 渲染入口
+│   └── index.css            # 全局样式
+├── package.json             # 项目配置
+├── vite.config.ts           # Vite 配置
+├── tailwind.config.js       # Tailwind 配置
+└── tsconfig.json            # TypeScript 配置
+```

- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing (SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
+## 界面预览

-***
+📱 **在线预览**: [docs/ui-preview.html](./docs/ui-preview.html)

-# Editing this README
+在浏览器中打开 `docs/ui-preview.html` 文件可查看高清界面预览（支持切换终端/SFTP视图）：

-When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thanks to [makeareadme.com](https://www.makeareadme.com/) for this template.
+### 终端视图
+- 🎨 **深色主题** - 基于 Tailwind CSS 的现代化深色界面
+- 📑 **标签页管理** - 悬停显示更多操作（`...`）和关闭（`×`）按钮
+- 🖥️ **终端区域** - 清晰显示 SSH 连接状态和命令提示符
+- 📊 **状态栏** - 实时显示连接状态、延迟和功能入口

-## Suggestions for a good README
+### SFTP 双栏视图
+- 📂 **双栏文件管理器** - 左侧本地目录，右侧远程服务器目录
+- 🧭 **面包屑导航** - 清晰的路径导航和返回/前进按钮
+- 📋 **文件列表** - 显示名称、修改时间、大小、类型/权限
+- ⚡ **传输队列** - 实时显示上传/下载进度
+- 🔍 **Filter/Actions** - 筛选和操作下拉菜单

-Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
+> 提示：双击 HTML 文件即可在浏览器中查看完整效果，支持终端和 SFTP 视图切换。

-## Name
-Choose a self-explaining name for your project.
+## 快捷键

-## Description
-Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
+| 快捷键 | 功能 |
+|--------|------|
+| `Cmd/Ctrl + N` | 新建会话 |
+| `Cmd/Ctrl + K` | 快速连接 |
+| `Cmd/Ctrl + T` | 新建标签 |
+| `Cmd/Ctrl + W` | 关闭标签 |
+| `Cmd/Ctrl + Tab` | 切换标签 |
+| `F11` | 全屏模式 |

-## Badges
-On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
+## 开发计划

-## Visuals
-Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
+- [x] 基础项目框架
+- [x] Electron 主进程
+- [x] React 前端界面
+- [x] 多标签页系统
+- [x] 会话管理
+- [ ] SSH 连接集成 (node-ssh2)
+- [ ] 终端模拟器 (XTerm.js)
+- [ ] SFTP 文件传输
+- [ ] 端口转发
+- [ ] 数据持久化 (SQLite)

-## Installation
-Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
+## 许可证

-## Usage
-Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
+MIT License - 开源免费使用

-## Support
-Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
+---

-## Roadmap
-If you have ideas for releases in the future, it is a good idea to list them in the README.
-
-## Contributing
-State if you are open to contributions and what your requirements are for accepting them.
-
-For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
-
-You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
-
-## Authors and acknowledgment
-Show your appreciation to those who have contributed to the project.
-
-## License
-For open source projects, say how it is licensed.
-
-## Project status
-If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
+Made with ❤️ by OpsXShell Team