152 lines
3.7 KiB
Plaintext
152 lines
3.7 KiB
Plaintext
现在想要开发一个web版本的xshell工具，功能模仿xshell，但是要集成注册和登录
|
||
|
||
|
||
一、 用户与权限系统 (User Center)
|
||
这是最基础的门槛，确保数据隔离。
|
||
|
||
P0 - 注册与登录
|
||
|
||
用户注册（邮箱/手机号 + 密码）。
|
||
|
||
用户登录（JWT 或 Session 鉴权）。
|
||
|
||
密码找回/重置。
|
||
|
||
二、 资产管理 (Asset Management)
|
||
模仿 Xshell 左侧的“会话管理器”。
|
||
|
||
P0 - 服务器（会话）增删改查
|
||
|
||
添加服务器：主机名 (Name)、IP、端口 (Port)、用户名 (User)。
|
||
|
||
认证方式选择：密码认证、私钥 (PEM/PPK) 认证。
|
||
|
||
核心安全需求：所有密码和私钥在数据库中必须加密存储（使用 AES-256，密钥与用户 ID 绑定），绝不能明文存储。
|
||
|
||
P1 - 分组管理 (Tree View)
|
||
|
||
支持文件夹层级结构（类似 Xshell 左侧树状图）。
|
||
|
||
支持拖拽排序、归类。
|
||
|
||
P1 - 快速连接
|
||
|
||
不保存会话，直接输入 ssh user@ip 进行一次性连接。
|
||
|
||
三、 核心终端功能 (Terminal Core)
|
||
这是模仿 Xshell 体验的重中之重，前端通常使用 xterm.js，后端使用 SSH2 库。
|
||
|
||
P0 - SSH 连接与交互
|
||
|
||
基于 WebSocket 实现全双工通信。
|
||
|
||
支持标准的 Shell 操作（输入命令、回显、Ctrl+C 中断等）。
|
||
|
||
支持 Vim/Top 等全屏应用的正确渲染。
|
||
|
||
P0 - 终端自适应 (Resize)
|
||
|
||
浏览器窗口大小改变时，自动同步发送 window-change 信号给后端，防止 Vim 错位。
|
||
|
||
P1 - 复制粘贴
|
||
|
||
选中文本自动复制（模仿 Xshell 行为）。
|
||
|
||
右键菜单粘贴，或 Shift+Insert 粘贴。
|
||
|
||
P1 - 多标签页 (Tabs)
|
||
|
||
支持同时打开多个 SSH 会话，顶部 Tab 切换。
|
||
|
||
支持分屏显示（Split View，左右或上下分屏）。
|
||
|
||
P2 - 外观定制
|
||
|
||
字号调整、字体设置（如 Fira Code）。
|
||
|
||
配色方案切换（黑客绿、Solarized、Monokai 等）。
|
||
|
||
四、 文件传输 (SFTP)
|
||
Xshell 通常配合 Xftp 使用，Web 版需要集成轻量级文件管理。
|
||
|
||
P1 - 侧边栏文件树
|
||
|
||
在终端侧边展示当前目录的文件列表。
|
||
|
||
支持双击进入目录、返回上级。
|
||
|
||
P1 - 上传/下载
|
||
|
||
上传：支持拖拽本地文件到浏览器窗口，自动上传到当前目录。
|
||
|
||
下载：右键文件 -> 下载。
|
||
|
||
P2 - 在线编辑
|
||
|
||
双击文本文件，弹窗进行代码编辑，保存后自动上传覆盖（通过 SFTP 协议）。
|
||
|
||
五、 高级辅助功能 (Advanced Features)
|
||
这是让你的工具“像 Xshell”的关键。
|
||
|
||
P1 - 保持连接 (Keep-Alive)
|
||
|
||
发送心跳包，防止防火墙或 Nginx 切断 WebSocket 连接。
|
||
|
||
断线自动重连机制。
|
||
|
||
P2 - 快捷命令 (Snippets)
|
||
|
||
侧边栏或底部栏预设常用命令（如 tail -f logs, docker ps）。
|
||
|
||
点击按钮直接发送命令到终端。
|
||
|
||
P2 - 脚本录制与回放
|
||
|
||
记录操作日志（Asciinema 格式），用于审计。
|
||
|
||
推荐技术架构
|
||
为了实现上述需求，建议的技术选型如下：
|
||
|
||
前端 (Frontend)
|
||
|
||
框架： Vue3。
|
||
|
||
终端组件：xterm.js (业界标准，VS Code 也在用)。
|
||
|
||
UI 库：Ant Design 或 Element Plus (用于布局和表单)。
|
||
|
||
后端 (Backend)
|
||
|
||
语言： Node.js (生态好，SSH 库丰富)。
|
||
|
||
SSH 库：
|
||
|
||
Go: golang.org/x/crypto/ssh
|
||
|
||
Node.js: ssh2
|
||
|
||
WebSocket：
|
||
|
||
Node.js: socket.io 或 ws
|
||
|
||
Web 框架： NestJS/Express (Node)。
|
||
|
||
数据库
|
||
|
||
MySQL：存储用户信息、资产信息。
|
||
|
||
Redis：存储临时的 WebSocket Session 状态。
|
||
|
||
|
||
============================================
|
||
|
||
node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
|
||
方法2：使用在线工具生成
|
||
|
||
访问 https://www.random.org/strings/
|
||
生成32个字符的随机字符串（字母和数字组合）
|
||
方法3：手动创建32字节字符串
|
||
|
||
使用任何32个字符的组合，例如：
|
||
k3yF0rW3bSSH2024Pr0j3ctS3cur1ty!
|
||
MyS3cur3K3yF0rW3bSSHPr0j3ct2024 |