手机前端框架(让终端触手可及 - 手机上的 RemotrCLI自由之旅)

RemoteCLI让终端触手可及 - 手机上的 PowerShell 自由之旅English | 简体中文为什么选择 RemoteCLI？你是否经历过这些时刻？约会中的紧急修复 - 周五晚上，你正和心仪的人共进晚餐。突然，线上服务挂了。如果有一种方式，能在手机上直接 SSH 进服务器排查问题，是不是就能优雅地处理完危机，继续享受美食？通勤路上的灵感时刻 - 早高峰的地铁上，你突然想到昨晚代码中的一个 bug。你想立刻验证修复方案，但地铁里打开笔记本电脑简直是奢望。如果手机能秒连终端，那些碎片时间就能变成 productive time。躺在床上写代码 - 凌晨两点，你刚躺下准备睡觉，脑子里突然冒出一个绝妙的实现思路。打开电脑？太麻烦了。如果手机就能连接到你的开发环境，躺着就能把灵感变成代码。外出时的服务器维护 - 你在咖啡馆、在公园、在机场。服务器需要重启一个服务，或者需要查看一下日志。以前你必须带着笔记本电脑，现在呢？RemoteCLI 为自由而生。核心特性多终端同时管理支持同时连接多个 Agent，一键切换。你可以管理家里的 NAS、公司服务器、云主机，所有终端集中在一个界面，无需多个 App。跨平台会话集中管理无论你使用 iOS Safari、Android Chrome、Windows/Mac/Linux 浏览器，都能获得一致的终端体验。一个账号，随处访问。多用户多 Agent 管理支持多用户独立账号每个 Agent 可绑定特定用户权限管理：控制谁能访问哪些 AgentAgent 自动注册：新机器一键接入会话自动恢复当你关闭浏览器，或手机锁屏，或网络断开 —— 终端会话不会丢失。30 分钟内重新连接，一切如初：当前目录不变命令历史保留正在运行的程序也会继续执行会话快捷方式常用连接一键直达。你可以在主屏幕添加快捷方式，点击即刻进入指定终端。文件上传下载需要在服务器上传个脚本？或者下载日志文件分析？直接拖拽，简单直观。用户权限管理管理员可以管理所有用户控制用户对 Agent 的访问权限安全隔离，各司其职快捷键加持手机上也能用快捷键：Ctrl+C 中断命令、Ctrl+D 退出会话、支持自定义快捷键映射，外接键盘体验更佳。为什么选择 RemoteCLI？零配置穿透传统远程访问需要公网 IP、端口转发、DDNS 服务或 VPN。RemoteCLI 采用 反向隧道架构：Agent 主动连接服务器，无需任何网络配置。即使你的电脑在 NAT 后面、在公司内网、在咖啡厅 WiFi 下，都能被访问。PWA 支持添加到主屏幕，就像原生 App：全屏体验、离线缓存、推送通知（规划中）。安全可靠JWT 身份认证WebSocket 加密传输敏感信息加密存储会话超时自动断开架构┌─────────────┐     ┌─────────────────┐     ┌─────────────┐│ 手机浏览器   │◄───►│ 云服务器        │◄───►│ Windows Agent││ (任意设备)   │  WS │ (中转节点)      │  WS │ (你的电脑)   │└─────────────┘     └─────────────────┘     └─────────────┘反向隧道架构: Windows Agent 主动连接云服务器，无需公网 IP 或端口转发。快速开始前置要求Node.js 18+pnpm 8+Windows: Visual Studio Build Tools (用于编译 node-pty)1. 安装依赖git clone https://github.com/fangguoliang/RemoteCLI.gitcd RemoteCLIpnpm install# 如果 node-pty 编译失败，运行：pnpm approve-builds# 然后选择 node-pty2. 启动服务端cd packages/servercp .env.example .env# 编辑 .env 配置 JWT_SECRET 和 ADMIN_PASSWORDpnpm dev服务端将在端口 3000 启动，提供：HTTP API: http://localhost:3000/api/*WebSocket: ws://localhost:3000/ws/browser, ws://localhost:3000/ws/agent环境变量说明变量描述默认值PORT服务端口3000JWT_SECRETJWT 签名密钥dev-secret-keyDATABASE_PATHSQLite 数据库路径./data/remotecli.dbADMIN_PASSWORDadmin 用户初始密码admin重要: 生产环境请务必修改 JWT_SECRET 和 ADMIN_PASSWORD！3. 启动 Agent (Windows)重要: Agent 安装前必须先配置绑定的用户名！详见下方 Agent 用户绑定。cd packages/agentcp .env.example .env# 编辑 .env 配置:# SERVER_URL=ws://your-server:3000/ws/agent# USERNAME=your-username  # 绑定到此用户，默认为 admin# AGENT_ID=unique-agent-id  # 可选，不填则自动生成pnpm devAgent 将自动连接服务器并等待终端会话请求。Agent 环境变量说明变量描述默认值SERVER_URL服务器 WebSocket 地址必填USERNAME绑定的用户名adminAGENT_IDAgent 唯一标识自动生成SECRET注册密钥（需与服务器配置一致）dev-secretAgent 用户绑定每个 Agent 必须绑定到一个用户，只有该用户及其被授权的用户才能访问此 Agent。配置方法：在服务器上先创建用户（通过 admin 账户或注册）编辑 Agent 的 .env 文件，设置 USERNAME 为目标用户名启动 Agent，它会自动绑定到该用户示例：# .envSERVER_URL=wss://your-server.com/ws/agentUSERNAME=test01SECRET=your-secret权限说明：Agent 所有者：完全控制 Agent被授权用户：可通过 Admin 授权访问该 AgentAdmin 用户：可管理所有 Agent 的权限注意：如果 Agent 已注册后修改 USERNAME，重启 Agent 会将所有权转移到新用户。4. 启动前端cd packages/webpnpm dev前端将在端口 5173 启动。5. 访问打开浏览器访问 http://localhost:5173点击"设置"配置 API 地址注册新用户登录后点击 Agent 开始终端会话项目结构RemoteCLI/├── packages/│   ├── shared/      # 共享 TypeScript 类型定义│   ├── server/      # 云服务器端 (Node.js + Fastify + WebSocket)│   ├── agent/       # Windows Agent (Node.js + node-pty + WebSocket)│   └── web/         # 手机前端 (Vue 3 + xterm.js + PWA)├── package.json└── pnpm-workspace.yamlAPI 接口认证方法路径描述POST/api/auth/register注册用户POST/api/auth/login登录获取令牌POST/api/auth/refresh刷新访问令牌POST/api/auth/logout登出POST/api/auth/change-password修改密码GET/api/auth/me获取当前用户信息管理员 (仅 admin 用户)方法路径描述GET/api/admin/users获取用户列表POST/api/admin/users创建用户POST/api/admin/reset-password重置用户密码为用户名POST/api/admin/disable-user禁用用户POST/api/admin/enable-user启用用户GET/api/admin/user-status/:username查看用户状态POST/api/admin/delete-user删除用户GET/api/admin/agents获取所有 Agent 及所有者GET/api/admin/agents/:agentId/permissions获取 Agent 授权用户GET/api/admin/users/:userId/permissions获取用户可访问的 AgentPOST/api/admin/agent-permissions批量授权用户访问 AgentDELETE/api/admin/agent-permissions批量撤销权限POST/api/admin/agent-permissions/transfer-owner转移 Agent 所有权健康检查方法路径描述GET/api/health服务健康状态WebSocket 协议消息格式interface Message {  type: MessageType;  payload: unknown;  sessionId?: string;  timestamp: number;}消息类型类型方向描述registerAgent -> ServerAgent 注册register:resultServer -> Agent注册结果authBrowser -> Server浏览器认证auth:resultServer -> Browser认证结果session:createBrowser -> Server创建终端会话session:createdServer -> Browser会话创建结果session:startServer -> Agent启动 PTY 会话session:startedAgent -> Server会话已启动session:inputBrowser -> Agent终端输入session:outputAgent -> Browser终端输出session:resizeBrowser -> Agent调整终端大小session:closeBoth关闭会话ping/pongBoth心跳部署Linux 服务端构建并上传 server 包到服务器安装依赖: pnpm install --prod配置环境变量使用 PM2 管理进程:pm2 start dist/index.js --name remotecli-serverNginx 反向代理配置:server {    listen 80;    server_name your-domain.com;    location / {        proxy_pass http://127.0.0.1:3000;        proxy_http_version 1.1;        proxy_set_header Upgrade $http_upgrade;        proxy_set_header Connection "upgrade";        proxy_set_header Host $host;    }}Windows Agent安装 Node.js 18+复制 agent 包到目标机器安装依赖: pnpm install --prod配置 .env 文件使用 NSSM 注册为 Windows 服务:nssm install RemoteCliAgent "C:\Program Files\nodejs\node.exe"nssm set RemoteCliAgent AppParameters "C:\path\to\agent\dist\index.js"nssm set RemoteCliAgent AppDirectory "C:\path\to\agent"nssm start RemoteCliAgent开发运行测试cd packages/serverpnpm test构建# 构建所有包pnpm build# 构建单个包cd packages/server && pnpm build技术栈组件技术前端Vue 3, TypeScript, xterm.js, Pinia, Vue Router, Vite服务端Node.js, Fastify, ws, sql.js, bcryptAgentNode.js, node-pty, ws适用人群程序员：随时随地写代码、查日志、修 bug运维工程师：7x24 服务器监控和故障处理学生：在宿舍、图书馆、教室都能访问实验室服务器自由职业者：真正的数字游民，咖啡店就是办公室技术爱好者：管理家里的 NAS、智能家居、自建服务许可证MIT让终端，无处不在。如果这个项目对你有帮助，请给一个 ⭐ Star 支持一下！