开发一套 Web 版轻量远程管理 + 海外网页渲染系统

一、项目整体定位

我要开发一套 Web 版轻量远程管理 + 海外网页渲染系统,类似简化版 JumpServer、Next Terminal,但更轻量、无冗余、无 Docker、宝塔可直接部署。

同时支持:网页端 + Windows exe / Mac / Linux 桌面端(一套代码通用)。


二、前后端技术架构

1. 前端架构要求

框架:Vue 3 + Vite

UI 库:Element Plus

终端组件:xterm.js(实现 Web SSH)

桌面端打包:Tauri(一套代码同时打包:网页 + exe + Mac + Linux)

通信:axios + WebSocket

部署:纯静态文件 dist,可直接放在宝塔网站运行

2. 后端架构要求

语言:Node.js

框架:Express

不用编译、不用构建,代码上传即可运行

数据库:SQLite(单文件,无服务、无配置)

必须支持:

RESTful API

WebSocket 转发(SSH / RDP / VNC)

会话管理、登录鉴权

部署方式:

宝塔直接新建网站

使用 Supervisor 进程守护

命令:node server.js 直接启动

3. 协议网关(必须集成)

使用 guacd(Apache Guacamole Server)

作用:实现 Web RDP / Web VNC / 远程桌面

支持:Windows / Linux 都能安装

不依赖 Docker

本地 Windows 可直接运行 guacd.exe

4. 整体部署要求(极简)

无 Docker

无复杂环境

宝塔面板一键部署

前端:静态文件

后端:Node 直接运行

网关:系统直接安装 guacd

数据库:SQLite 单文件


三、系统核心功能模块(逐条清晰,AI 可直接开发)

模块 1:用户权限系统(基础必备)

登录、退出

管理员 / 普通用户角色

密码加密存储

接口鉴权、路由守卫

日志记录(谁、什么时间、做了什么)

模块 2:主机资产管理(核心)

添加主机:

SSH 主机

RDP 主机(Windows)

VNC 主机

主机信息:

IP / 端口 / 账号 / 密码 / 备注

按分组管理

权限控制:不同用户只能看到自己的主机

模块 3:Web SSH 功能(必须实现)

浏览器内直接打开 Linux 终端

支持:

256 色

复制粘贴

窗口大小自适应

断网重连

后端通过 WebSocket 转发 SSH 流量

不使用第三方服务,全部自研

模块 4:Web RDP 功能(Windows 远程)

浏览器直接打开 Windows 远程桌面

基于 guacd 实现

支持:

鼠标键盘

剪贴板

分辨率自适应

不安装客户端,纯网页访问

模块 5:Web VNC 功能

通用 VNC 服务器远程控制

网页实时画面

鼠标 / 键盘操作

模块 6:海外网页渲染系统(你的核心业务)

6.1 架构逻辑

前端代理(本系统)作为安全守门人

后端请求转发到香港渲染机

香港机:公网 IP 直连海外网站,无代理、无绕路

真实 IP 隐藏,外人无法访问

6.2 功能流程

用户在网页提交:要渲染的海外网址

系统验证身份、限流

转发请求到香港渲染机

渲染机使用无头浏览器打开目标网站

截图 / 网页源代码 / PDF / 渲染结果返回前端

全程不暴露渲染机真实地址

6.3 核心特点

安全:渲染机隐身

快速:香港 IP 直连,无多层代理

稳定:少依赖、少故障点

模块 7:会话管理与审计

在线会话查看

操作日志

连接记录

可手动断开会话

模块 8:系统设置

端口设置

guacd 地址配置

上传限制

限流、安全策略

四、业务实现逻辑(AI 最需要的逻辑说明)

1. SSH 实现逻辑

前端 xterm.js <=> WebSocket <=> Node 后端 <=> SSH 连接目标主机

全程流式传输

2. RDP/VNC 实现逻辑

前端 <=> WebSocket <=> Node <=> guacd <=> 目标 Windows 主机

guacd 负责协议转换,输出网页可识别的流

3. 海外渲染实现逻辑

用户 → 前端代理(本系统)→ 香港渲染机(无头浏览器)→ 目标海外网站

渲染机只对内开放,不暴露公网

安全、高效、无攻击风险

五、界面风格要求

后台管理系统风格

简洁、清爽、深色 / 浅色模式均可

功能优先,不搞复杂动画

你接下来只要说一句:

“按照以上需求,帮我生成完整项目架构 + 代码。”

AI 就能直接给你开工。

如果你愿意,我还能帮你继续生成:

前端完整目录结构

后端完整目录结构

数据库表结构(SQLite)

API 接口文档

前端页面与路由

WebSocket 通信流程图