webui4frpc: 独立可用的可视化 frpc 控制器 (M0)

- 零 frp 源码依赖,单二进制 (Go + Vue3 + VueFlow + Element Plus)
- 画布多对多连线,渲染 tcp/udp/http/https frpc 配置
- worker 进程管理:自愈、日志轮转、崩溃退避重启
- frpc 一键安装 (GitHub Releases) + 手动指定路径
- 三页 UI:状态(默认)/连接配置/设置
- 状态页实时节点/转发状态,节点可增删改启停
- 画布冲突检查:端口/域名冲突标红 + 弹窗拦截保存
- backend 单测覆盖 store/render/process/httpapi/install
- plan.md + FRPC_FEATURES_AUDIT.md 文档
This commit is contained in:
2026-08-17 11:00:26 +08:00
commit c1936887a2
40 changed files with 7868 additions and 0 deletions

93
README.md Normal file
View File

@ -0,0 +1,93 @@
# webui4frpc
一个**独立于 frp 源码**的可视化 frpc 控制器。用画布方式把「本地转发项」连到「远程服务器」,自动为每台远程服务器生成 frpc 配置并拉起独立 worker 进程,免去运维反复手写 frpc 配置的麻烦。
> 本仓库**不捆绑、不包含任何 frp 源码**。frpc 可执行文件由用户一键从官方 GitHub Releases 下载,或手动指定路径。
## 特性
- **Scratch 风格画布**本地转发项local与远程服务器remote可视化连线一个 local 可连多个 remote一个 remote 可连多个 local
- **曲线连线 + 端口标签**:每条连线独立曲线,标签为远程端口,可拖拽调整曲线位置,端口可点开编辑
- **一键生成配置**:保存画布即渲染每台 remote 的 frpc JSON 配置,自动拉起/重启对应 worker
- **worker 自愈**:崩溃自动重启(指数退避),随 webui 启停
- **frpc 一键安装**:从官方 Releases 下载任意版本 frpc或手动指定二进制路径
- **token 可视化**remote 支持 token/URL 等字段
## 构建
### 后端Go 1.25+
```bash
go build -o webui4frpc ./cmd/webui4frpc
```
### 前端Node 20+
```bash
cd web && npm install && npm run build
```
前端产物会进入 `web/dist`,需要拷贝到 `internal/httpapi/dist` 以便 Go `embed` 打包进单一二进制:
```bash
rm -rf internal/httpapi/dist && cp -r web/dist internal/httpapi/dist
```
## 运行
```bash
./webui4frpc -addr 127.0.0.1:7500 -user admin -password admin123 -workdir ./data
```
打开 http://127.0.0.1:7500/ ,输入账号密码进入画布。首次使用可到「设置」页一键安装 frpc或手动指定路径然后回到画布创建 local / remote 并连线、保存。
参数:
| 参数 | 默认 | 说明 |
|---|---|---|
| `-addr` | `127.0.0.1:7500` | 监听地址 |
| `-user` / `-password` | `admin`/`admin` | Basic 认证 |
| `-workdir` | `./webui4frpc` | 数据目录db/配置/日志/bin |
| `-bin` | 空 | 初始 frpc 路径(可选) |
## 数据目录
```
<workdir>
├── manager.db # SQLite 状态locals/remotes/links/settings
├── configs/<name>.json # 每台 remote 渲染的 frpc 配置
├── logs/<name>.log # worker 日志(按大小轮转)
└── bin/frpc-<v> # 一键安装的 frpc
```
## 架构
```
webui4frpc单二进制无 frp 依赖)
├── cmds/webui4frpc 入口HTTP 服务 + 生命周期
├── internal/store SQLite 持久化
├── internal/canvas 画布模型local/remote/link
├── internal/render 渲染 frpc JSON 配置
├── internal/process worker 进程管理spawn/stop/restart/自愈)
├── internal/httpapi REST API + 静态资源
└── internal/install 一键下载官方 frpc
```
## API
| 方法 | 路径 | 说明 |
|---|---|---|
| GET | `/api/manager/status` | 总览状态 |
| GET/PUT | `/api/manager/canvas` | 读写画布 |
| GET/PUT | `/api/manager/settings` | 读写运行策略 |
| POST | `/api/manager/binary/install` | 一键安装 frpc |
| POST | `/api/manager/profiles/{name}/start\|stop\|restart` | worker 启停 |
| GET | `/api/manager/profiles/{name}/config\|logs` | 查看配置/日志 |
## 测试
```bash
go test ./...
# 前端
cd web && npm run type-check
```