# 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
```