update README

add text border for chart

Makefile

@@ -3,10 +3,10 @@ export CGO_ENABLED=0
 export GOOS=linux
 export GOARCH=amd64
 
-build: frps-multiuser
-	cp ./config/frps-multiuser.ini ./bin/frps-multiuser.ini
+build: frps-panel
+	cp ./config/frps-panel.ini ./bin/frps-panel.ini
 	cp -r ./assets/ ./bin/assets/
 
-frps-multiuser:
+frps-panel:
 	rm -rf ./bin
-	go build -o ./bin/frps-multiuser ./cmd/frps-multiuser
+	go build -o ./bin/frps-panel ./cmd/frps-panel

Makefile.cross-compiles

@@ -5,20 +5,20 @@ package: copy
 	sh ./package.sh
 
 copy: build
-	cp ./config/frps-multiuser.ini ./release/frps-multiuser.ini
+	cp ./config/frps-panel.ini ./release/frps-panel.ini
 	cp -r ./assets/ ./release/assets/
 
 build:
-	env CGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build -ldflags "$(LDFLAGS)" -o ./release/frps-multiuser-darwin-amd64 ./cmd/frps-multiuser
-	env CGO_ENABLED=0 GOOS=freebsd GOARCH=386 go build -ldflags "$(LDFLAGS)" -o ./release/frps-multiuser-freebsd-386 ./cmd/frps-multiuser
-	env CGO_ENABLED=0 GOOS=freebsd GOARCH=amd64 go build -ldflags "$(LDFLAGS)" -o ./release/frps-multiuser-freebsd-amd64 ./cmd/frps-multiuser
-	env CGO_ENABLED=0 GOOS=linux GOARCH=386 go build -ldflags "$(LDFLAGS)" -o ./release/frps-multiuser-linux-386 ./cmd/frps-multiuser
-	env CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags "$(LDFLAGS)" -o ./release/frps-multiuser-linux-amd64 ./cmd/frps-multiuser
-	env CGO_ENABLED=0 GOOS=linux GOARCH=arm go build -ldflags "$(LDFLAGS)" -o ./release/frps-multiuser-linux-arm ./cmd/frps-multiuser
-	env CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -ldflags "$(LDFLAGS)" -o ./release/frps-multiuser-linux-arm64 ./cmd/frps-multiuser
-	env CGO_ENABLED=0 GOOS=windows GOARCH=386 go build -ldflags "$(LDFLAGS)" -o ./release/frps-multiuser-windows-386.exe ./cmd/frps-multiuser
-	env CGO_ENABLED=0 GOOS=windows GOARCH=amd64 go build -ldflags "$(LDFLAGS)" -o ./release/frps-multiuser-windows-amd64.exe ./cmd/frps-multiuser
-	env CGO_ENABLED=0 GOOS=linux GOARCH=mips64 go build -ldflags "$(LDFLAGS)" -o ./release/frps-multiuser-linux-mips64 ./cmd/frps-multiuser
-	env CGO_ENABLED=0 GOOS=linux GOARCH=mips64le go build -ldflags "$(LDFLAGS)" -o ./release/frps-multiuser-linux-mips64le ./cmd/frps-multiuser
-	env CGO_ENABLED=0 GOOS=linux GOARCH=mips GOMIPS=softfloat go build -ldflags "$(LDFLAGS)" -o ./release/frps-multiuser-linux-mips ./cmd/frps-multiuser
-	env CGO_ENABLED=0 GOOS=linux GOARCH=mipsle GOMIPS=softfloat go build -ldflags "$(LDFLAGS)" -o ./release/frps-multiuser-linux-mipsle ./cmd/frps-multiuser
+	env CGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build -ldflags "$(LDFLAGS)" -o ./release/frps-panel-darwin-amd64 ./cmd/frps-panel
+	env CGO_ENABLED=0 GOOS=freebsd GOARCH=386 go build -ldflags "$(LDFLAGS)" -o ./release/frps-panel-freebsd-386 ./cmd/frps-panel
+	env CGO_ENABLED=0 GOOS=freebsd GOARCH=amd64 go build -ldflags "$(LDFLAGS)" -o ./release/frps-panel-freebsd-amd64 ./cmd/frps-panel
+	env CGO_ENABLED=0 GOOS=linux GOARCH=386 go build -ldflags "$(LDFLAGS)" -o ./release/frps-panel-linux-386 ./cmd/frps-panel
+	env CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags "$(LDFLAGS)" -o ./release/frps-panel-linux-amd64 ./cmd/frps-panel
+	env CGO_ENABLED=0 GOOS=linux GOARCH=arm go build -ldflags "$(LDFLAGS)" -o ./release/frps-panel-linux-arm ./cmd/frps-panel
+	env CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -ldflags "$(LDFLAGS)" -o ./release/frps-panel-linux-arm64 ./cmd/frps-panel
+	env CGO_ENABLED=0 GOOS=windows GOARCH=386 go build -ldflags "$(LDFLAGS)" -o ./release/frps-panel-windows-386.exe ./cmd/frps-panel
+	env CGO_ENABLED=0 GOOS=windows GOARCH=amd64 go build -ldflags "$(LDFLAGS)" -o ./release/frps-panel-windows-amd64.exe ./cmd/frps-panel
+	env CGO_ENABLED=0 GOOS=linux GOARCH=mips64 go build -ldflags "$(LDFLAGS)" -o ./release/frps-panel-linux-mips64 ./cmd/frps-panel
+	env CGO_ENABLED=0 GOOS=linux GOARCH=mips64le go build -ldflags "$(LDFLAGS)" -o ./release/frps-panel-linux-mips64le ./cmd/frps-panel
+	env CGO_ENABLED=0 GOOS=linux GOARCH=mips GOMIPS=softfloat go build -ldflags "$(LDFLAGS)" -o ./release/frps-panel-linux-mips ./cmd/frps-panel
+	env CGO_ENABLED=0 GOOS=linux GOARCH=mipsle GOMIPS=softfloat go build -ldflags "$(LDFLAGS)" -o ./release/frps-panel-linux-mipsle ./cmd/frps-panel

README.md

@@ -1,40 +1,33 @@
-# frps-multiuser
+# frps-panel
 
 [README](README.md) | [中文文档](README_zh.md)
 
-frp server plugin to support multiple users for [frp](https://github.com/fatedier/frp).
+frp server plugin to show server info and support multiple users for [frp](https://github.com/fatedier/frp).
 
-frps-multiuser will run as one single process and accept HTTP requests from frps.
+frps-panel will run as one single process and accept HTTP requests from frps.
 
+![支持英文](screenshots/i18n.png)
+![服务器信息](screenshots/server%20info.png)
 ![用户列表](screenshots/user%20list.png)
 ![新增列表](screenshots/new%20user.png)
-![支持英文](screenshots/i18n.png)
+![代理列表](screenshots/proxy%20list.png)
+![代理流量统计](screenshots/proxy%20traffic%20statistics.png)
 ![自动深色模式](screenshots/dark%20mode.png)
 
-## Update Notes
+### Features
 
-+ **the default tokens file is frps-multiuser.ini now,ini file support comment**
-+ **remove `-l`,it configure in `frps-multiuser.ini` now**
-+ **change `-f` to `-c`,the same as `frps`**
-+ **if \[users\] section is empty,the authentication will only be handle by frps**
-+ **if user under \[disabled\] section ,and the value is `disable`, it means that user is be disabled, and can not connect to server**
-+ **add a manage ui, and change color mode base on browser**
-+ **you can dynamic `add`,`remove`,`disable` or `enable` user now**
-+ **you can limit `ports`,`domains` and `subdomains` for each user now**
++ **Show frp server info**
++ **Support multiple user authentication by tokens saved in file.**
++ **Dynamic `add`,`remove`,`disable` or `enable` user now**
++ **Limit `ports`,`domains` and `subdomains` for each user now**
 
 ***when a user is dynamic been `remove` or `disable`,it will take some time to be effective***
 
 ***the limit of `ports`、`domains`、`subdomains` only effective at `NewProxy`***
 
-### Features
-
-* Support multiple user authentication by tokens saved in file.
-* Support dynamic `add`,`remove`,`disable` or `enable` user
-* Limit `ports`,`domains` and `subdomains` for each user
-
 ### Download
 
-Download frps-multiuser binary file from [Release](../../releases).
+Download frps-panel binary file from [Release](../../releases).
 
 ### Requirements
 
@@ -42,7 +35,7 @@ frp version >= v0.31.0
 
 ### Usage
 
-1. Create file `frps-multiuser.ini` including all support usernames and tokens.
+1. Create file `frps-panel.ini` including all support usernames and tokens.
 
 ```ini
 [common]
@@ -55,6 +48,13 @@ admin_user  = admin
 ;the password of manage ui,optional
 admin_pwd   = admin
 
+; frp server's dashboard config info, it's required and should be the same as frp server
+; otherwaise, this plugin cannot get server info
+dashboard_addr = 127.0.0.1
+dashboard_port = 7500
+dashboard_user = admin
+dashboard_pwd  = admin
+
 [users]
 ;user user1 with meta_token 123
 user1 = 123
@@ -80,9 +80,9 @@ user2 = disable
 
    One user each line. Username and token are split by `=`.
 
-2. Run frps-multiuser:
+2. Run frps-panel:
 
-   `./frps-multiuser -c ./frps-multiuser.ini`
+   `./frps-panel -c ./frps-panel.ini`
 
 3. Register plugin in frps.
 
@@ -135,8 +135,8 @@ remote_port = 6000
 
 this example is for `ubuntu` and with `root` user
 
-+ 1.unzip `frps-multiuser.zip` to dir `/root/frps-multiuser`
-+ 2.touch a file with command `touch frps-multiuser.service` in dir `/root/frps-multiuser`.the file content is:
++ 1.unzip `frps-panel.zip` to dir `/root/frps-panel`
++ 2.touch a file with command `touch frps-panel.service` in dir `/root/frps-panel`.the file content is:
 ```ini
 [Unit]
 Description = frp multiuser service
@@ -145,23 +145,23 @@ Wants = network.target
 
 [Service]
 Type = simple
-# config of frps-multiuser.ini,you should change the file path
-Environment=FRPS_MULTIUSER_OPTS="-c /root/frps-multiuser/frps-multiuser.ini"
-# command of run frps-multiuser,you should change the file path
-ExecStart = /root/frps-multiuser/frps-multiuser $FRPS_MULTIUSER_OPTS
+# config of frps-panel.ini,you should change the file path
+Environment=FRPS_PANEL_OPTS="-c /root/frps-panel/frps-panel.ini"
+# command of run frps-panel,you should change the file path
+ExecStart = /root/frps-panel/frps-panel $FRPS_PANEL_OPTS
 
 [Install]
 WantedBy = multi-user.target
 ```
-+ 3.copy `frps-multiuser.service` to `/etc/systemd/system/` with command `cp /root/frps-multiuser.service /etc/systemd/system/`
++ 3.copy `frps-panel.service` to `/etc/systemd/system/` with command `cp /root/frps-panel.service /etc/systemd/system/`
 + 4.reload service with command `systemctl daemon-reload`
-+ 5.start service with command `service frps-multiuser start`
++ 5.start service with command `service frps-panel start`
 
 ## Issues & Ideas
 
 ___If you want visit mange ui from internet, you should change `plugin_addr` to `0.0.0.0`___
 
-If you have any issues or ideas, put it on [issues](https://github.com/yhl452493373/frps-multiuser/issues). I will try my best to achieve it.
+If you have any issues or ideas, put it on [issues](https://github.com/yhl452493373/frps-panel/issues). I will try my best to achieve it.
 
 ## Credits
 

README_zh.md

@@ -1,37 +1,31 @@
-# frps-multiuser
+# frps-panel
 
 [README](README.md) | [中文文档](README_zh.md)
 
-frps-multiuser 是 [frp](https://github.com/fatedier/frp) 的一个服务端插件，用于支持多用户鉴权。
+frps-panel 是 [frp](https://github.com/fatedier/frp) 的一个服务端插件，用于查看服务器信息以及支持多用户鉴权。
 
-frps-multiuser 会以一个单独的进程运行，并接收 frps 发送过来的 HTTP 请求。
+frps-panel 会以一个单独的进程运行，并接收 frps 发送过来的 HTTP 请求。
 
+![支持英文](screenshots/i18n.png)
+![服务器信息](screenshots/server%20info.png)
 ![用户列表](screenshots/user%20list.png)
 ![新增列表](screenshots/new%20user.png)
-![支持英文](screenshots/i18n.png)
+![代理列表](screenshots/proxy%20list.png)
+![代理流量统计](screenshots/proxy%20traffic%20statistics.png)
 ![自动深色模式](screenshots/dark%20mode.png)
 
-## 更新说明
 
-+ **配置文件改为ini格式，便于增加注释**
-+ **删除-l参数，其需要的配置由`frps-multiuser.ini`决定**
-+ **指定配置文件的参数由`-f`改为`-c`，和`frps`一致**
-+ **配置文件中，\[users\]节下如无用户信息，则直接由frps的token认证**
-+ **配置文件中，\[disabled\]节下用户名对应的值如果为`disable`，则说明该账户被禁用，无法连接到服务器**
-+ **增加了管理界面，并且会根据浏览器主题自动切换深色或浅色模式**
-+ **新增动态`添加`、`删除`、`禁用`、`启用`用户**
-+ **新增对用户的`端口`、`域名`、`二级域名`进行限制**
+### 功能
+
++ **支持展示服务器信息**
++ **支持多用户鉴权**
++ **动态`添加`、`删除`、`禁用`、`启用`用户**
++ **对用户的`端口`、`域名`、`二级域名`进行限制**
 
 ***用户被`删除`或`禁用`后，不会马上生效，需要等一段时间***
 
 ***用户`端口`、`域名`、`二级域名`限制仅在建立新连接(`NewProxy`)时生效***
 
-### 功能
-
-* 通过配置文件配置所有支持的用户名和 Token，只允许匹配的 frpc 客户端登录。
-* 动态`添加`、`删除`、`禁用`、`启用`用户
-* 对每个用户进行`端口`、`域名`、`二级域名`限制
-
 ### 下载
 
 通过 [Release](../../releases) 页面下载对应系统版本的二进制文件到本地。
@@ -42,7 +36,7 @@ frps-multiuser 会以一个单独的进程运行，并接收 frps 发送过来
 
 ### 使用示例
 
-1. 创建 `frps-multiuser.ini` 文件，内容为所有支持的用户名和 token。
+1. 创建 `frps-panel.ini` 文件，内容为所有支持的用户名和 token。
 
 ```ini
 [common]
@@ -55,6 +49,12 @@ admin_user  = admin
 ;插件管理页面密码,与账号一起进行鉴权,可选
 admin_pwd   = admin
 
+; frp服务器的看板页面信息，必须配置，且与frp服务器一致，否则无法获取服务器信息
+dashboard_addr = 127.0.0.1
+dashboard_port = 7500
+dashboard_user = admin
+dashboard_pwd  = admin
+
 [users]
 ;user1的meta_token为123
 user1 = 123
@@ -80,9 +80,9 @@ user2 = disable
 
     每一个用户占一行，用户名和 token 之间以 `=` 号分隔。
 
-2. 运行 frps-multiuser，指定监听地址以及 token 存储文件路径。
+2. 运行 frps-panel，指定监听地址以及 token 存储文件路径。
 
-    `./frps-multiuser -c ./frps-multiuser.ini`
+    `./frps-panel -c ./frps-panel.ini`
 
 3. 在 frps 的配置文件中注册插件，并启动。
 
@@ -135,8 +135,8 @@ remote_port = 6000
 
 本实例是在 `ubuntu` 下， 以 `root` 用户执操作
 
-+ 1、解压 `frps-multiuser.zip` 到目录 `/root/frps-multiuser`
-+ 2、在目录 `/root/frps-multiuser` 下 用命令创建文件：`touch frps-multiuser.service`。创建后修改文件内容：
++ 1、解压 `frps-panel.zip` 到目录 `/root/frps-panel`
++ 2、在目录 `/root/frps-panel` 下 用命令创建文件：`touch frps-panel.service`。创建后修改文件内容：
 ```ini
 [Unit]
 Description = frp multiuser service
@@ -145,23 +145,23 @@ Wants = network.target
 
 [Service]
 Type = simple
-# 启动frps-multiuser的配置文件路径，需修改为您的frps-multiuser.ini的路径
-Environment=FRPS_MULTIUSER_OPTS="-c /root/frps-multiuser/frps-multiuser.ini"
-# 启动frps-multiuser的命令，需修改为您的frps-multiuser的安装路径
-ExecStart = /root/frps-multiuser/frps-multiuser $FRPS_MULTIUSER_OPTS
+# 启动frps-panel的配置文件路径，需修改为您的frps-panel.ini的路径
+Environment=FRPS_PANEL_OPTS="-c /root/frps-panel/frps-panel.ini"
+# 启动frps-panel的命令，需修改为您的frps-panel的安装路径
+ExecStart = /root/frps-panel/frps-panel $FRPS_PANEL_OPTS
 
 [Install]
 WantedBy = multi-user.target
 ```
-+ 3、复制服务文件： `cp /root/frps-multiuser.service /etc/systemd/system/`
++ 3、复制服务文件： `cp /root/frps-panel.service /etc/systemd/system/`
 + 4、重载服务： `systemctl daemon-reload`
-+ 5、启动服务： `service frps-multiuser start`
++ 5、启动服务： `service frps-panel start`
 
 ## 使用
 
 ___如果要从外网访问管理界面, 需要把配置中的 `plugin_addr` 改为 `0.0.0.0`___
 
-如果使用中有问题或者有其他想法，在[issues](https://github.com/yhl452493373/frps-multiuser/issues)上提出来。 如果我能搞定的话，我尽量搞。
+如果使用中有问题或者有其他想法，在[issues](https://github.com/yhl452493373/frps-panel/issues)上提出来。 如果我能搞定的话，我尽量搞。
 
 ## 致谢
 

assets/lang/en.json

@@ -1,6 +1,5 @@
 {
-  "User Manage": "User Manage",
-  "frps multiuser": "frps multiuser",
+  "Frps Panel": "Frps Panel",
   "User": "User",
   "Token": "Token",
   "Notes": "Notes",
@@ -46,5 +45,49 @@
   "Subdomains is invalid": "Subdomains is invalid",
   "Comment is invalid": "Comment is invalid, it cannot include line breaks",
   "Not limit": "Not limit",
-  "None": "None"
+  "None": "None",
+  "Server Info": "Server Info",
+  "Users": "Users",
+  "Proxies": "Proxies",
+  "Name": "Name",
+  "Port": "Port",
+  "Connections": "Connections",
+  "Traffic In": "Traffic In",
+  "Traffic Out": "Traffic Out",
+  "Client Version": "Client Version",
+  "Traffic Statistics": "Traffic Statistics",
+  "Type": "Type",
+  "Domains": "Domains",
+  "SubDomain": "SubDomain",
+  "Locations": "Locations",
+  "HostRewrite": "HostRewrite",
+  "Encryption": "Encryption",
+  "Compression": "Compression",
+  "Addr": "Addr",
+  "online": "online",
+  "offline": "offline",
+  "true": "Yes",
+  "false": "No",
+  "Last Start": "Last Start",
+  "Last Close": "Last Close",
+  "Network Traffic": "Network Traffic",
+  "today": "today",
+  "now": "now",
+  "Version": "Version",
+  "Bind Port": "Bind Port",
+  "KCP Bind Port": "KCP Bind Port",
+  "QUIC Bind Port": "QUIC Bind Port",
+  "HTTP Port": "HTTP Port",
+  "HTTPS Port": "HTTPS Port",
+  "TCPMUX Port": "TCPMUX Port",
+  "Subdomain Host": "Subdomain Host",
+  "Max Pool Count": "Max Pool Count",
+  "Max Ports Per Client": "Max Ports Per Client",
+  "Heart Beat Timeout": "Heart Beat Timeout",
+  "Allow Ports": "Allow Ports",
+  "TLS Only": "TLS Only",
+  "Current Connections": "Current Connections",
+  "Client Counts": "Client Counts",
+  "Proxy Counts": "Proxy Counts",
+  "Not Set": "Not Set"
 }

assets/lang/zh.json

@@ -1,6 +1,5 @@
 {
-  "User Manage": "用户管理",
-  "frps multiuser": "frps用户管理",
+  "Frps Panel": "Frps 面板",
   "User": "用户名(user)",
   "Token": "凭证(meta_token)",
   "Notes": "备注",
@@ -46,5 +45,49 @@
   "Subdomains is invalid": "子域名不正确",
   "Comment is invalid": "备注不正确,不能包含换行",
   "Not limit": "无限制",
-  "None": "无"
+  "None": "无",
+  "Server Info": "服务器信息",
+  "Users": "用户列表",
+  "Proxies": "代理列表",
+  "Name": "名称",
+  "Port": "端口",
+  "Connections": "连接数",
+  "Traffic In": "入站流量",
+  "Traffic Out": "出站流量",
+  "Client Version": "客户端版本",
+  "Traffic Statistics": "流量统计",
+  "Type": "连接类型",
+  "Domains": "自定义域名",
+  "SubDomain": "二级域名",
+  "Locations": "路由",
+  "HostRewrite": "自定义请求头",
+  "Encryption": "数据加密",
+  "Compression": "数据压缩",
+  "Addr": "使用端口",
+  "online": "在线",
+  "offline": "离线",
+  "true": "是",
+  "false": "否",
+  "Last Start": "上次连接时间",
+  "Last Close": "上次断开时间",
+  "Network Traffic": "网络流量",
+  "today": "今日",
+  "now": "当前",
+  "Version": "版本号",
+  "Bind Port": "TCP 端口",
+  "KCP Bind Port": "KCP 端口",
+  "QUIC Bind Port": "QUIC 端口",
+  "HTTP Port": "HTTP 端口",
+  "HTTPS Port": "HTTPS 端口",
+  "TCPMUX Port": "TCPMUX 端口",
+  "Subdomain Host": "二级域名后缀",
+  "Max Pool Count": "每个代理最大连接池大小",
+  "Max Ports Per Client": "单个客户端最大同时存在代理数",
+  "Heart Beat Timeout": "心跳连接超时时间",
+  "Allow Ports": "端口限制",
+  "TLS Only": "仅接受启用 TLS 的客户端",
+  "Current Connections": "当前连接数",
+  "Client Counts": "客户端总数",
+  "Proxy Counts": "代理总数",
+  "Not Set": "未配置"
 }

assets/static/css/index-color.css

@@ -1,6 +1,5 @@
-header {
-    background-color: #58b7ff;
-    color: #fff;
+.layui-bg-blue {
+    background-color: #58b7ff !important;
 }
 
 .layui-btn {
@@ -64,9 +63,59 @@ header {
     border-color: #79bbff;
 }
 
+.layui-nav-tree .layui-nav-child dd.layui-this,
+.layui-nav-tree .layui-nav-child dd.layui-this a,
+.layui-nav-tree .layui-this,
+.layui-nav-tree .layui-this > a,
+.layui-nav-tree .layui-this > a:hover {
+    background-color: #409eff;
+}
+
+.layui-nav-tree .layui-nav-bar {
+    background-color: #409eff;
+}
+
+.proxy-expand .layui-row .layui-row > div:first-child {
+    color: #99a9bf;
+}
+
+section.server-info .text-row .text-col:first-child {
+    color: #99a9bf;
+}
+
+section.proxy-list .proxy-info .layui-row .layui-row > div:first-child {
+    color: #99a9bf;
+}
+
+.online,
+.offline {
+    border-radius: 4px;
+    padding: 2px 10px;
+    font-size: 12px;
+    border-width: 1px;
+    border-style: solid;
+}
+
+.online {
+    color: #67c23a;
+    background-color: #f0f9eb;
+    border-color: #e1f3d8;
+}
+
+.offline {
+    color: #f56c6c;
+    background-color: #fef0f0;
+    border-color: #fde2e2;
+}
+
+.version a,
+.version span {
+    color: #99a9bf;
+}
+
 @media (prefers-color-scheme: dark) {
-    header {
-        background-color: #395c74;
+    .layui-bg-blue {
+        background-color: #395c74 !important;
     }
 
     .layui-btn {
@@ -125,4 +174,28 @@ header {
     .layui-table-cell-c:hover {
         border-color: #5f5f60;
     }
+
+    .layui-nav-tree .layui-nav-child dd.layui-this,
+    .layui-nav-tree .layui-nav-child dd.layui-this a,
+    .layui-nav-tree .layui-this,
+    .layui-nav-tree .layui-this > a,
+    .layui-nav-tree .layui-this > a:hover {
+        background-color: #4f80a1;
+    }
+
+    .layui-nav-tree .layui-nav-bar {
+        background-color: #4f80a1;
+    }
+
+    .online {
+        color: #67c23a;
+        background-color: #1c2518;
+        border-color: #25371c;
+    }
+
+    .offline {
+        color: #f56c6c;
+        background-color: #2b1d1d;
+        border-color: #412626;
+    }
 }

assets/static/css/index.css

@@ -3,14 +3,54 @@ html, body {
     word-break: break-all;
 }
 
-header .title {
-    padding: 10px 15px;
-    line-height: 40px;
-    font-size: 25px;
+section {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    padding: 15px;
+    overflow: hidden;
+    box-sizing: border-box;
 }
 
-section {
-    padding: 15px 15px 0 15px;
+.layui-header {
+    line-height: 60px;
+    font-size: 16px;
+}
+
+.layui-layout-admin .layui-side {
+    width: 225px !important;
+}
+
+.layui-side-scroll {
+    width: 245px !important;
+    position: absolute !important;
+    top: 0 !important;
+    bottom: 24px !important;
+    height: auto !important;
+}
+
+.layui-logo {
+    width: 225px !important;
+}
+
+.layui-title {
+    position: absolute;
+    left: 225px !important;
+    right: 0;
+    top: 0;
+    height: 100%;
+    padding: 0 15px;
+    box-sizing: border-box;
+}
+
+.layui-nav.layui-nav-tree {
+    width: 225px !important;
+}
+
+.layui-body {
+    left: 225px;
 }
 
 #searchForm input {
@@ -65,3 +105,79 @@ section {
 .layui-table-page {
     margin-bottom: 0;
 }
+
+section.server-info {
+    display: flex;
+}
+
+section.server-info .text-info,
+section.server-info .chart-info {
+    flex: 1;
+}
+
+section.server-info .text-info {
+    padding: 0 20px;
+}
+
+section.server-info .text-row {
+    display: flex;
+    font-size: 14px;
+    line-height: 40px;
+}
+
+section.server-info .text-row .text-col {
+    flex: 1;
+}
+
+section.server-info .chart-info {
+    display: flex;
+    flex-direction: column;
+}
+
+section.server-info .chart-info > .chart-traffic,
+section.server-info .chart-info > .chart-count {
+    display: flex;
+    justify-content: center;
+}
+
+section.server-info .chart-info > .chart-count {
+    margin-top: 30px;
+}
+
+section.server-info .chart-info #trafficPieChart,
+section.server-info .chart-info #countPieChart {
+    width: 400px;
+    height: 250px;
+}
+
+.toggle-proxy-info-arrow {
+    display: inline-block;
+    transition-duration: 0.2s;
+}
+
+.toggle-proxy-info-arrow.open {
+    transform: rotate(90deg);
+}
+
+.proxy-info .layui-row {
+    font-size: 14px !important;
+    padding: 10px;
+}
+
+.proxy-info .layui-col-xs6 .layui-row {
+    padding: 0;
+}
+
+#trafficBarChart {
+    height: 100%;
+}
+
+.version {
+    height: 24px;
+    line-height: 24px;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    font-size: 12px;
+}

assets/static/js/index-proxy-list.js

@@ -0,0 +1,257 @@
+var loadProxyInfo = (function ($) {
+    var size = filesize.partial({base: 2, standard: "jedec"});
+    var i18n = {};
+
+    /**
+     * get proxy info
+     * @param lang {{}} language json
+     * @param title page title
+     * @param proxyType proxy type
+     */
+    function loadProxyInfo(lang, title, proxyType) {
+        i18n = lang;
+        $("#title").text(title);
+        $('#content').empty();
+        var loading = layui.layer.load();
+
+        $.getJSON('/proxy/api/proxy/' + proxyType).done(function (result) {
+            if (result.success) {
+                $('#content').html($('#proxyListTableTemplate').html());
+                renderProxyListTable(JSON.parse(result.data)['proxies'], proxyType);
+            } else {
+                layui.layer.msg(result.message);
+            }
+        }).always(function () {
+            layui.layer.close(loading);
+        });
+    }
+
+    /**
+     * render proxy list table
+     * @param data proxy data
+     * @param proxyType proxy type
+     */
+    function renderProxyListTable(data, proxyType) {
+        proxyType = proxyType.toLowerCase();
+        data.forEach(function (temp) {
+            temp.conf = temp.conf || {
+                remote_port: 0,
+                use_encryption: false,
+                use_compression: false,
+                custom_domains: null,
+                subdomain: null,
+                locations: null,
+                host_header_rewrite: null
+            };
+
+            temp.client_version = temp.client_version || '-';
+            temp.conf.custom_domains = temp.conf.custom_domains || '-';
+            temp.conf.subdomain = temp.conf.subdomain || '-';
+            temp.conf.locations = temp.conf.locations || '-';
+            temp.conf.host_header_rewrite = temp.conf.host_header_rewrite || '-';
+
+            if (temp.conf.custom_domains !== '-') {
+                temp.conf.custom_domains = JSON.stringify(temp.conf.custom_domains);
+            }
+            if (proxyType === 'http') {
+                temp.conf.remote_port = http_port;
+            } else if (proxyType === 'https') {
+                temp.conf.remote_port = https_port;
+            }
+        });
+        var $section = $('#content > section');
+        var cols = [
+            {field: 'id', type: 'space', width: 60, align: 'center', templet: '#toggleProxyInfoArrowTemplate'},
+            {field: 'name', title: i18n['Name'], sort: true},
+            {
+                field: 'port',
+                title: i18n['Port'],
+                width: '12%',
+                sort: true,
+                templet: '<span>{{= d.conf.remote_port }}</span>'
+            },
+            {field: 'cur_conns', title: i18n['Connections'], minWidth: 140, width: '12%', sort: true},
+            {
+                field: 'today_traffic_in',
+                title: i18n['TrafficIn'],
+                minWidth: 140,
+                width: '12%',
+                sort: true,
+                templet: function (d) {
+                    return size(d.today_traffic_in);
+                }
+            },
+            {
+                field: 'today_traffic_out',
+                title: i18n['TrafficOut'],
+                minWidth: 140,
+                width: '12%',
+                sort: true,
+                templet: function (d) {
+                    return size(d.today_traffic_out);
+                }
+            },
+            {field: 'client_version', title: i18n['ClientVersion'], minWidth: 140, width: '12%', sort: true},
+            {
+                field: 'status', title: i18n['Status'], width: '12%', sort: true, templet: function (d) {
+                    return '<span class="' + d.status + '">' + i18n[d.status] + '</span>';
+                }
+            }
+        ];
+
+        var proxyListTable = layui.table.render({
+            elem: '#proxyListTable',
+            height: $section.height(),
+            text: {none: i18n['EmptyData']},
+            cols: [cols],
+            page: navigator.language.indexOf("zh") !== -1,
+            data: data,
+            done: function (res, curr, count, origin) {
+                //向每一行tr后面追加显示子table的tr
+                var $tr = $('.layui-table-view[lay-id=' + this.id + '] tbody tr');
+                var expandTrTemplateHtml = $('#expandTrTemplate').html();
+                for (var i = 0; i < $tr.length; i++) {
+                    var datum = res.data[i];
+                    var useEncryption = datum.conf.use_encryption;
+                    var useCompression = datum.conf.use_compression;
+                    datum.conf.use_encryption = i18n[useEncryption];
+                    datum.conf.use_compression = i18n[useCompression];
+                    console.log(datum)
+                    var html = layui.laytpl(expandTrTemplateHtml).render({
+                        index: i,
+                        colspan: cols.length - 1,
+                        proxyType: proxyType,
+                        data: datum
+                    });
+                    $($tr[i]).after(html);
+                }
+            }
+        });
+
+        layui.table.on('tool(proxyListTable)', function (obj) {
+            var index = obj.index;
+            $(this).toggleClass('open');
+            var open = $(this).hasClass('open');
+            $('#childTr_' + index).toggleClass('layui-hide', !open);
+            proxyListTable.resize();
+        });
+
+        window.onresize = function () {
+            proxyListTable.resize();
+        }
+    }
+
+    /**
+     * load traffic statistics data
+     */
+    function loadTrafficStatistics() {
+        var proxyName = $(this).closest('.layui-row').find('input').val();
+        var loading = layui.layer.load();
+        $.getJSON('/proxy/api/traffic/' + proxyName).done(function (result) {
+            if (result.success) {
+                renderTrafficChart(JSON.parse(result.data));
+            } else {
+                layui.layer.msg(result.message);
+            }
+        }).always(function () {
+            layui.layer.close(loading);
+        });
+    }
+
+    /**
+     * render traffic statistics chart
+     * @param data traffic data
+     */
+    function renderTrafficChart(data) {
+        var html = layui.laytpl($('#trafficStaticTemplate').html()).render();
+        var dates = [];
+        var now = new Date();
+        for (var i = 0; i < data.traffic_in.length; i++) {
+            dates.push(now.getFullYear() + "/" + (now.getMonth() + 1) + "/" + now.getDate());
+            now.setDate(now.getDate() - 1);
+        }
+        layui.layer.open({
+            title: i18n['TrafficStatistics'],
+            type: 1,
+            content: html,
+            area: ['800px', '400px'],
+            success: function () {
+                var chartDom = document.getElementById('trafficBarChart');
+                var chart = echarts.init(chartDom);
+                var option = {
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'shadow',
+                        },
+                        formatter: function (data) {
+                            var html = ''
+                            if (data.length > 0) {
+                                html += data[0].name + '<br/>'
+                            }
+                            for (var v of data) {
+                                var colorEl = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + v.color + '"></span>'
+                                html += colorEl + v.seriesName + ': ' + size(v.value) + '<br/>'
+                            }
+                            return html
+                        }
+                    },
+                    legend: {
+                        data: [i18n['TrafficIn'], i18n['TrafficOut']],
+                        textStyle: {
+                            textBorderColor: '#fff',
+                            textBorderWidth: 2
+                        }
+                    },
+                    grid: {
+                        left: '3%',
+                        right: '4%',
+                        bottom: '3%',
+                        containLabel: true,
+                    },
+                    xAxis: [
+                        {
+                            type: 'category',
+                            data: dates.reverse()
+                        }
+                    ],
+                    yAxis: [
+                        {
+                            type: 'value',
+                            axisLabel: {
+                                formatter: function (value) {
+                                    return size(value)
+                                }
+                            }
+                        }
+                    ],
+                    series: [
+                        {
+                            name: i18n['TrafficIn'],
+                            type: 'bar',
+                            data: data.traffic_in.reverse(),
+                        },
+                        {
+                            name: i18n['TrafficOut'],
+                            type: 'bar',
+                            data: data.traffic_out.reverse(),
+                        }
+                    ]
+                };
+
+                option && chart.setOption(option);
+            }
+        });
+    }
+
+    /**
+     * document event
+     */
+    (function bindDocumentEvent() {
+        $(document).on('click.trafficStatistics', '.traffic-statistics', function () {
+            loadTrafficStatistics.call(this);
+        });
+    })();
+
+    return loadProxyInfo;
+})(layui.$);

assets/static/js/index-server-info.js

@@ -0,0 +1,190 @@
+var loadServerInfo = (function ($) {
+    var size = filesize.partial({base: 2, standard: "jedec"});
+    var i18n = {};
+
+    /**
+     * get server info
+     * @param lang {{}} language json
+     * @param title page title
+     */
+    function loadServerInfo(lang, title) {
+        i18n = lang;
+        $("#title").text(title);
+        $('#content').empty();
+        var loading = layui.layer.load();
+
+        $.getJSON('/proxy/api/serverinfo').done(function (result) {
+            if (result.success) {
+                var data = JSON.parse(result.data);
+                data.proxy_counts = 0;
+                http_port = data.vhost_http_port;
+                https_port = data.vhost_https_port;
+                for (var proxy in data.proxy_type_count) {
+                    data.proxy_counts = data.proxy_counts + data.proxy_type_count[proxy];
+                }
+                data.bind_port = data.bind_port || i18n['Disable'];
+                data.kcp_bind_port = data.kcp_bind_port || i18n['Disable'];
+                data.quic_bind_port = data.quic_bind_port || i18n['Disable'];
+                data.vhost_http_port = data.vhost_http_port || i18n['Disable'];
+                data.vhost_https_port = data.vhost_https_port || i18n['Disable'];
+                data.tcpmux_httpconnect_port = data.tcpmux_httpconnect_port || i18n['Disable'];
+                data.subdomain_host = data.subdomain_host || i18n['NotSet'];
+                data.max_pool_count = data.max_pool_count || i18n['NotSet'];
+                data.max_ports_per_client = data.max_ports_per_client || i18n['NotLimit'];
+                data.heart_beat_timeout = data.heart_beat_timeout || i18n['NotSet'];
+                data.allow_ports_str = data.allow_ports_str || i18n['NotLimit'];
+                data.tls_only = i18n[data.tls_only || false];
+                renderServerInfo(data);
+            } else {
+                layui.layer.msg(result.message);
+            }
+        }).always(function () {
+            layui.layer.close(loading);
+        });
+    }
+
+    /**
+     * render server info page
+     * @param data server info data
+     */
+    function renderServerInfo(data) {
+        var html = layui.laytpl($('#serverInfoTemplate').html()).render(data);
+        $('#content').html(html);
+        $('#frpVersion').text(data.version);
+
+        renderTrafficChart(data);
+        renderCountChart(data);
+    }
+
+    /**
+     * render traffic chart with echarts
+     * @param data traffic data
+     */
+    function renderTrafficChart(data) {
+        var chartLegend = [i18n['TrafficIn'], i18n['TrafficOut']];
+        var chartData = [
+            {value: data.total_traffic_in, name: i18n['TrafficIn']},
+            {value: data.total_traffic_out, name: i18n['TrafficOut']}
+        ];
+        var chartDom = document.getElementById('trafficPieChart');
+        var chart = echarts.init(chartDom);
+        var option = {
+            title: {
+                text: i18n['NetworkTraffic'],
+                subtext: i18n['today'],
+                left: 'center',
+                textStyle: {
+                    textBorderColor: '#fff',
+                    textBorderWidth: 2
+                },
+                subtextStyle: {
+                    textBorderColor: '#fff',
+                    textBorderWidth: 2
+                }
+            },
+            tooltip: {
+                trigger: 'item',
+                formatter: function (v) {
+                    return size(v.value) + ' (' + v.percent + '%)';
+                },
+            },
+            legend: {
+                orient: 'vertical',
+                left: 'left',
+                data: chartLegend,
+                textStyle: {
+                    textBorderColor: '#fff',
+                    textBorderWidth: 2
+                }
+            },
+            series: [
+                {
+                    type: 'pie',
+                    radius: '55%',
+                    center: ['50%', '60%'],
+                    data: chartData,
+                    emphasis: {
+                        itemStyle: {
+                            shadowBlur: 10,
+                            shadowOffsetX: 0,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        }
+                    }
+                }
+            ]
+        };
+
+        option && chart.setOption(option);
+    }
+
+    /**
+     * render proxy count chat with echarts
+     * @param data proxy count data
+     */
+    function renderCountChart(data) {
+        var proxies = data.proxy_type_count;
+        var chartLegend = [];
+        var chartData = [];
+
+        for (var type in proxies) {
+            var temp = {
+                name: type.toUpperCase(),
+                value: proxies[type]
+            };
+            chartLegend.push(type.toUpperCase());
+            chartData.push(temp);
+        }
+
+        var chartDom = document.getElementById('countPieChart');
+        var chart = echarts.init(chartDom);
+        var option = {
+            title: {
+                text: i18n['Proxies'],
+                subtext: i18n['now'],
+                left: 'center',
+                textStyle: {
+                    textBorderColor: '#fff',
+                    textBorderWidth: 2
+                },
+                subtextStyle: {
+                    textBorderColor: '#fff',
+                    textBorderWidth: 2
+                }
+            },
+            tooltip: {
+                trigger: 'item',
+                formatter: function (v) {
+                    return v.value + ' (' + v.percent + '%)';
+                }
+            },
+            legend: {
+                orient: 'vertical',
+                left: 'left',
+                data: chartLegend,
+                textStyle: {
+                    textBorderColor: '#fff',
+                    textBorderWidth: 2
+                }
+            },
+            series: [
+                {
+                    type: 'pie',
+                    radius: '55%',
+                    center: ['50%', '60%'],
+                    data: chartData,
+                    emphasis: {
+                        itemStyle: {
+                            shadowBlur: 10,
+                            shadowOffsetX: 0,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        }
+                    }
+                }
+            ]
+        };
+
+        option && chart.setOption(option);
+    }
+
+    return loadServerInfo;
+})(layui.$);

assets/static/js/index-user-list.js

@@ -0,0 +1,658 @@
+var loadUserList = (function ($) {
+    var i18n = {};
+    var apiType = {
+        Remove: 1,
+        Enable: 2,
+        Disable: 3
+    };
+    var verifyRules = {
+        user: function (value, item) {
+            var result = verifyUser(value);
+            if (!result.valid) {
+                return i18n['UserFormatError'];
+            }
+            if (item != null) {
+                if (typeof item === "function") {
+                    item && item(result.trim);
+                } else {
+                    $(item).val(result.trim);
+                }
+            }
+        },
+        token: function (value, item) {
+            var result = verifyToken(value);
+            if (!result.valid) {
+                return i18n['TokenFormatError'];
+            }
+            if (item != null) {
+                if (typeof item === "function") {
+                    item && item(result.trim);
+                } else {
+                    $(item).val(result.trim);
+                }
+            }
+        },
+        comment: function (value, item) {
+            var result = verifyComment(value);
+            if (!result.valid) {
+                return i18n['CommentInvalid'];
+            }
+            if (item != null) {
+                if (typeof item === "function") {
+                    item && item(result.trim);
+                } else {
+                    $(item).val(result.trim);
+                }
+            }
+        },
+        ports: function (value, item) {
+            var result = verifyPorts(value);
+            if (!result.valid) {
+                return i18n['PortsInvalid'];
+            }
+            if (item != null) {
+                if (typeof item === "function") {
+                    item && item(result.trim);
+                } else {
+                    $(item).val(result.trim);
+                }
+            }
+        },
+        domains: function (value, item) {
+            var result = verifyDomains(value);
+            if (!result.valid) {
+                return i18n['DomainsInvalid'];
+            }
+            if (item != null) {
+                if (typeof item === "function") {
+                    item && item(result.trim);
+                } else {
+                    $(item).val(result.trim);
+                }
+            }
+        },
+        subdomains: function (value, item) {
+            var result = verifySubdomains(value);
+            if (!result.valid) {
+                return i18n['SubdomainsInvalid'];
+            }
+            if (item != null) {
+                if (typeof item === "function") {
+                    item && item(result.trim);
+                } else {
+                    $(item).val(result.trim);
+                }
+            }
+        }
+    };
+
+    /**
+     * verify user value
+     * @param username
+     */
+    function verifyUser(username) {
+        var valid = true;
+        if (username.trim() === '' || !/^\w+$/.test(username)) {
+            valid = false;
+        }
+        return {
+            valid: valid,
+            trim: username
+        };
+    }
+
+    /**
+     * verify token value
+     * @param token
+     */
+    function verifyToken(token) {
+        var valid = true;
+        if (token.trim() === '' || !/^[\w!@#$%^&*()]+$/.test(token)) {
+            valid = false;
+        }
+        return {
+            valid: valid,
+            trim: token.trim()
+        };
+    }
+
+    /**
+     * verify comment is valid
+     * @param comment
+     *
+     * @return {{valid:boolean, trim:string}}
+     */
+    function verifyComment(comment) {
+        var valid = true;
+        if (comment.trim() !== '' && /[\n\t\r]/.test(comment)) {
+            valid = false;
+        }
+        return {
+            valid: valid,
+            trim: comment.replace(/[\n\t\r]/g, '')
+        };
+    }
+
+    /**
+     * verify ports is valid
+     * @param ports
+     *
+     * @return {{valid:boolean, trim:string}}
+     */
+    function verifyPorts(ports) {
+        var valid = true;
+        if (ports.trim() !== '') {
+            try {
+                ports.split(",").forEach(function (port) {
+                    if (/^\s*\d{1,5}\s*$/.test(port)) {
+                        if (parseInt(port) < 1 || parseInt(port) > 65535) {
+                            valid = false;
+                        }
+                    } else if (/^\s*\d{1,5}\s*-\s*\d{1,5}\s*$/.test(port)) {
+                        var portRange = port.split('-');
+                        if (parseInt(portRange[0]) < 1 || parseInt(portRange[0]) > 65535) {
+                            valid = false;
+                        } else if (parseInt(portRange[1]) < 1 || parseInt(portRange[1]) > 65535) {
+                            valid = false;
+                        } else if (parseInt(portRange[0]) > parseInt(portRange[1])) {
+                            valid = false;
+                        }
+                    } else {
+                        valid = false;
+                    }
+                    if (valid === false) {
+                        throw 'break';
+                    }
+                });
+            } catch (e) {
+            }
+        }
+        return {
+            valid: valid,
+            trim: ports.replace(/\s/g, '')
+        };
+    }
+
+    /**
+     * verify domains is valid
+     * @param domains
+     *
+     * @return {{valid:boolean, trim:string}}
+     */
+    function verifyDomains(domains) {
+        var valid = true;
+        if (domains.trim() !== '') {
+            try {
+                domains.split(',').forEach(function (domain) {
+                    if (!/^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62}){1,3}$/.test(domain.trim())) {
+                        valid = false;
+                        throw 'break';
+                    }
+                });
+            } catch (e) {
+            }
+        }
+        return {
+            valid: valid,
+            trim: domains.replace(/\s/g, '')
+        };
+    }
+
+    /**
+     * verify subdomains is valid
+     * @param subdomains
+     *
+     * @return {{valid:boolean, trim:string}}
+     */
+    function verifySubdomains(subdomains) {
+        var valid = true;
+        if (subdomains.trim() !== '') {
+            try {
+                subdomains.split(',').forEach(function (subdomain) {
+                    if (!/^[a-zA-z0-9][a-zA-Z0-9-]{0,19}$/.test(subdomain.trim())) {
+                        valid = false;
+                        throw 'break';
+                    }
+                });
+            } catch (e) {
+            }
+        }
+        return {
+            valid: valid,
+            trim: subdomains.replace(/\s/g, '')
+        };
+    }
+
+    /**
+     * set verify rule of layui.form
+     */
+    (function setFormVerifyRule() {
+        layui.form.set({
+            verIncludeRequired: true,
+            verify: verifyRules
+        });
+    })();
+
+    /**
+     * load i18n language
+     * @param lang {{}} language json
+     * @param title page title
+     */
+    function loadUserList(lang, title) {
+        i18n = lang;
+        $("#title").text(title);
+        var html = layui.laytpl($('#userListTemplate').html()).render();
+        $('#content').html(html);
+
+        var $section = $('#content > section');
+        layui.table.render({
+            elem: '#tokenTable',
+            height: $section.height() - $('#searchForm').height() + 8,
+            text: {none: i18n['EmptyData']},
+            url: '/tokens',
+            method: 'get',
+            where: {},
+            dataType: 'json',
+            editTrigger: 'dblclick',
+            page: navigator.language.indexOf("zh") !== -1,
+            toolbar: '#userListToolbarTemplate',
+            defaultToolbar: false,
+            cols: [[
+                {type: 'checkbox'},
+                {field: 'user', title: i18n['User'], width: 150, sort: true},
+                {field: 'token', title: i18n['Token'], width: 200, sort: true, edit: true},
+                {field: 'comment', title: i18n['Notes'], sort: true, edit: 'textarea'},
+                {field: 'ports', title: i18n['AllowedPorts'], sort: true, edit: 'textarea'},
+                {field: 'domains', title: i18n['AllowedDomains'], sort: true, edit: 'textarea'},
+                {field: 'subdomains', title: i18n['AllowedSubdomains'], sort: true, edit: 'textarea'},
+                {
+                    field: 'status',
+                    title: i18n['Status'],
+                    width: 100,
+                    templet: '<span>{{d.status? "' + i18n['Enable'] + '":"' + i18n['Disable'] + '"}}</span>',
+                    sort: true
+                },
+                {title: i18n['Operation'], width: 150, toolbar: '#userListOperationTemplate'}
+            ]]
+        });
+
+        bindFormEvent();
+    }
+
+    /**
+     * bind event of layui.form
+     */
+    function bindFormEvent() {
+        layui.table.on('edit(tokenTable)', function (obj) {
+            var field = obj.field;
+            var value = obj.value;
+            var oldValue = obj.oldValue;
+            var before = $.extend(true, {}, obj.data);
+            var after = $.extend(true, {}, obj.data);
+            var verifyMsg = false;
+            if (field === 'token') {
+                verifyMsg = verifyRules.token(value, function (trim) {
+                    updateTableField(obj, field, trim)
+                });
+                if (verifyMsg) {
+                    layui.layer.msg(verifyMsg);
+                    return obj.reedit();
+                }
+
+                before.token = oldValue;
+                after.token = value;
+            } else if (field === 'comment') {
+                verifyMsg = verifyRules.comment(value, function (trim) {
+                    updateTableField(obj, field, trim)
+                });
+                if (verifyMsg) {
+                    layui.layer.msg(verifyMsg);
+                    return obj.reedit();
+                }
+
+                before.comment = oldValue;
+                after.comment = value;
+            } else if (field === 'ports') {
+                verifyMsg = verifyRules.ports(value, function (trim) {
+                    updateTableField(obj, field, trim)
+                });
+                if (verifyMsg) {
+                    layui.layer.msg(verifyMsg);
+                    return obj.reedit();
+                }
+
+                before.ports = oldValue;
+                after.ports = value;
+            } else if (field === 'domains') {
+                verifyMsg = verifyRules.domains(value, function (trim) {
+                    updateTableField(obj, field, trim)
+                });
+                if (verifyMsg) {
+                    layui.layer.msg(verifyMsg);
+                    return obj.reedit();
+                }
+
+                before.domains = oldValue;
+                after.domains = value;
+            } else if (field === 'subdomains') {
+                verifyMsg = verifyRules.subdomains(value, function (trim) {
+                    updateTableField(obj, field, trim)
+                });
+                if (verifyMsg) {
+                    layui.layer.msg(verifyMsg);
+                    return obj.reedit();
+                }
+
+                before.subdomains = oldValue;
+                after.subdomains = value;
+            }
+
+            update(before, after);
+        });
+
+        layui.table.on('toolbar(tokenTable)', function (obj) {
+            var id = obj.config.id;
+            var checkStatus = layui.table.checkStatus(id);
+            switch (obj.event) {
+                case 'add':
+                    addPopup();
+                    break
+                case 'remove':
+                    batchRemovePopup(checkStatus.data);
+                    break
+                case 'disable':
+                    batchDisablePopup(checkStatus.data);
+                    break
+                case 'enable':
+                    batchEnablePopup(checkStatus.data);
+                    break
+            }
+        });
+
+        layui.table.on('tool(tokenTable)', function (obj) {
+            var data = obj.data;
+            switch (obj.event) {
+                case 'remove':
+                    removePopup(data);
+                    break;
+                case 'disable':
+                    disablePopup(data);
+                    break;
+                case 'enable':
+                    enablePopup(data);
+                    break
+            }
+        });
+    }
+
+    /**
+     * update layui table data
+     * @param obj table update obj
+     * @param field update field
+     * @param trim new value
+     */
+    function updateTableField(obj, field, trim) {
+        var newData = {};
+        newData[field] = trim;
+        obj.update(newData);
+    }
+
+    /**
+     * add user popup
+     */
+    function addPopup() {
+        layui.layer.open({
+            type: 1,
+            title: i18n['NewUser'],
+            area: ['500px'],
+            content: layui.laytpl(document.getElementById('addUserTemplate').innerHTML).render(),
+            btn: [i18n['Confirm'], i18n['Cancel']],
+            btn1: function (index) {
+                if (layui.form.validate('#addUserForm')) {
+                    add(layui.form.val('addUserForm'), index);
+                }
+            },
+            btn2: function (index) {
+                layui.layer.close(index);
+            }
+        });
+    }
+
+    /**
+     * add user action
+     * @param data {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} user data
+     * @param index popup index
+     */
+    function add(data, index) {
+        var loading = layui.layer.load();
+        $.ajax({
+            url: '/add',
+            type: 'post',
+            contentType: 'application/json',
+            data: JSON.stringify(data),
+            success: function (result) {
+                if (result.success) {
+                    reloadTable();
+                    layui.layer.close(index);
+                    layui.layer.msg(i18n['OperateSuccess'], function (index) {
+                        layui.layer.close(index);
+                    });
+                } else {
+                    errorMsg(result);
+                }
+            },
+            complete: function () {
+                layui.layer.close(loading);
+            }
+        });
+    }
+
+    /**
+     * update user action
+     * @param before {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} data before update
+     * @param after {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} data after update
+     */
+    function update(before, after) {
+        var loading = layui.layer.load();
+        $.ajax({
+            url: '/update',
+            type: 'post',
+            contentType: 'application/json',
+            data: JSON.stringify({
+                before: before,
+                after: after,
+            }),
+            success: function (result) {
+                if (result.success) {
+                    layui.layer.msg(i18n['OperateSuccess']);
+                } else {
+                    errorMsg(result);
+                }
+            },
+            complete: function () {
+                layui.layer.close(loading);
+            }
+        });
+    }
+
+    /**
+     * batch remove user popup
+     * @param data {[{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}]} user data list
+     */
+    function batchRemovePopup(data) {
+        if (data.length === 0) {
+            layui.layer.msg(i18n['ShouldCheckUser']);
+            return;
+        }
+        layui.layer.confirm(i18n['ConfirmRemoveUser'], {
+            title: i18n['OperationConfirm'],
+            btn: [i18n['Confirm'], i18n['Cancel']]
+        }, function (index) {
+            operate(apiType.Remove, data, index);
+        });
+    }
+
+    /**
+     * batch disable user popup
+     * @param data {[{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}]} user data list
+     */
+    function batchDisablePopup(data) {
+        if (data.length === 0) {
+            layui.layer.msg(i18n['ShouldCheckUser']);
+            return;
+        }
+        layui.layer.confirm(i18n['ConfirmDisableUser'], {
+            title: i18n['OperationConfirm'],
+            btn: [i18n['Confirm'], i18n['Cancel']]
+        }, function (index) {
+            operate(apiType.Disable, data, index);
+        });
+    }
+
+    /**
+     * batch enable user popup
+     * @param data {[{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}]} user data list
+     */
+    function batchEnablePopup(data) {
+        if (data.length === 0) {
+            layui.layer.msg(i18n['ShouldCheckUser']);
+            return;
+        }
+        layui.layer.confirm(i18n['ConfirmEnableUser'], {
+            title: i18n['OperationConfirm'],
+            btn: [i18n['Confirm'], i18n['Cancel']]
+        }, function (index) {
+            operate(apiType.Enable, data, index);
+        });
+    }
+
+    /**
+     * remove one user popup
+     * @param data {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} user data
+     */
+    function removePopup(data) {
+        layui.layer.confirm(i18n['ConfirmRemoveUser'], {
+            title: i18n['OperationConfirm'],
+            btn: [i18n['Confirm'], i18n['Cancel']]
+        }, function (index) {
+            operate(apiType.Remove, [data], index);
+        });
+    }
+
+    /**
+     * disable one user popup
+     * @param data {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} user data
+     */
+    function disablePopup(data) {
+        layui.layer.confirm(i18n['ConfirmDisableUser'], {
+            title: i18n['OperationConfirm'],
+            btn: [i18n['Confirm'], i18n['Cancel']]
+        }, function (index) {
+            operate(apiType.Disable, [data], index);
+        });
+    }
+
+    /**
+     * enable one user popup
+     * @param data {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} user data
+     */
+    function enablePopup(data) {
+        layui.layer.confirm(i18n['ConfirmEnableUser'], {
+            title: i18n['OperationConfirm'],
+            btn: [i18n['Confirm'], i18n['Cancel']]
+        }, function (index) {
+            operate(apiType.Enable, [data], index);
+        });
+    }
+
+    /**
+     * operate actions
+     * @param type {apiType} action type
+     * @param data {[{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}]} user data list
+     * @param index popup index
+     */
+    function operate(type, data, index) {
+        var url;
+        var extendMessage = '';
+        if (type === apiType.Remove) {
+            url = "/remove";
+            extendMessage = ', ' + i18n['RemoveUser'] + i18n['TakeTimeMakeEffective'];
+        } else if (type === apiType.Disable) {
+            url = "/disable";
+            extendMessage = ', ' + i18n['RemoveUser'] + i18n['TakeTimeMakeEffective'];
+        } else if (type === apiType.Enable) {
+            url = "/enable";
+        } else {
+            layer.layer.msg(i18n['OperateError']);
+            return;
+        }
+        var loading = layui.layer.load();
+        $.post({
+            url: url,
+            type: 'post',
+            contentType: 'application/json',
+            data: JSON.stringify({
+                users: data
+            }),
+            success: function (result) {
+                if (result.success) {
+                    reloadTable();
+                    layui.layer.close(index);
+                    layui.layer.msg(i18n['OperateSuccess'] + extendMessage, function (index) {
+                        layui.layer.close(index);
+                    });
+                } else {
+                    errorMsg(result);
+                }
+            },
+            complete: function () {
+                layui.layer.close(loading);
+            }
+        });
+    }
+
+    /**
+     * reload user table
+     */
+    function reloadTable() {
+        var searchData = layui.form.val('searchForm');
+        layui.table.reloadData('tokenTable', {
+            where: searchData
+        }, true)
+    }
+
+    /**
+     * show error message popup
+     * @param result
+     */
+    function errorMsg(result) {
+        var reason = i18n['Other Error'];
+        if (result.code === 1)
+            reason = i18n['ParamError'];
+        else if (result.code === 2)
+            reason = i18n['UserExist'];
+        else if (result.code === 3)
+            reason = i18n['ParamError'];
+        else if (result.code === 4)
+            reason = i18n['UserFormatError'];
+        else if (result.code === 5)
+            reason = i18n['TokenFormatError'];
+        layui.layer.msg(i18n['OperateFailed'] + ',' + reason)
+    }
+
+    /**
+     * document event
+     */
+    (function bindDocumentEvent() {
+        $(document).on('click.search', '#searchBtn', function () {
+            reloadTable();
+            return false;
+        }).on('click.reset', '#resetBtn', function () {
+            $('#searchForm')[0].reset();
+            reloadTable();
+            return false;
+        });
+    })();
+
+    return loadUserList;
+})(layui.$)

assets/static/js/index.js

@@ -1,640 +1,26 @@
-var $ = layui.$;
+var http_port, https_port;
+(function ($) {
     $(function () {
-    var apiType = {
-        Remove: 1,
-        Enable: 2,
-        Disable: 3
-    }
-
-    /**
-     * verify user value
-     * @param username
-     */
-    function verifyUser(username) {
-        var valid = true;
-        if (username.trim() === '' || !/^\w+$/.test(username)) {
-            valid = false;
-        }
-        return {
-            valid: valid,
-            trim: username
-        };
-    }
-
-    /**
-     * verify token value
-     * @param token
-     */
-    function verifyToken(token) {
-        var valid = true;
-        if (token.trim() === '' || !/^[\w!@#$%^&*()]+$/.test(token)) {
-            valid = false;
-        }
-        return {
-            valid: valid,
-            trim: token.trim()
-        };
-    }
-
-    /**
-     * verify comment is valid
-     * @param comment
-     *
-     * @return {{valid:boolean, trim:string}}
-     */
-    function verifyComment(comment) {
-        var valid = true;
-        if (comment.trim() !== '' && /[\n\t\r]/.test(comment)) {
-            valid = false;
-        }
-        return {
-            valid: valid,
-            trim: comment.replace(/[\n\t\r]/g, '')
-        };
-    }
-
-    /**
-     * verify ports is valid
-     * @param ports
-     *
-     * @return {{valid:boolean, trim:string}}
-     */
-    function verifyPorts(ports) {
-        var valid = true;
-        if (ports.trim() !== '') {
-            try {
-                ports.split(",").forEach(function (port) {
-                    if (/^\s*\d{1,5}\s*$/.test(port)) {
-                        if (parseInt(port) < 1 || parseInt(port) > 65535) {
-                            valid = false;
-                        }
-                    } else if (/^\s*\d{1,5}\s*-\s*\d{1,5}\s*$/.test(port)) {
-                        var portRange = port.split('-');
-                        if (parseInt(portRange[0]) < 1 || parseInt(portRange[0]) > 65535) {
-                            valid = false;
-                        } else if (parseInt(portRange[1]) < 1 || parseInt(portRange[1]) > 65535) {
-                            valid = false;
-                        } else if (parseInt(portRange[0]) > parseInt(portRange[1])) {
-                            valid = false;
-                        }
-                    } else {
-                        valid = false;
-                    }
-                    if (valid === false) {
-                        throw 'break';
-                    }
-                });
-            } catch (e) {
-            }
-        }
-        return {
-            valid: valid,
-            trim: ports.replace(/\s/g, '')
-        };
-    }
-
-    /**
-     * verify domains is valid
-     * @param domains
-     *
-     * @return {{valid:boolean, trim:string}}
-     */
-    function verifyDomains(domains) {
-        var valid = true;
-        if (domains.trim() !== '') {
-            try {
-                domains.split(',').forEach(function (domain) {
-                    if (!/^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62}){1,3}$/.test(domain.trim())) {
-                        valid = false;
-                        throw 'break';
-                    }
-                });
-            } catch (e) {
-            }
-        }
-        return {
-            valid: valid,
-            trim: domains.replace(/\s/g, '')
-        };
-    }
-
-    /**
-     * verify subdomains is valid
-     * @param subdomains
-     *
-     * @return {{valid:boolean, trim:string}}
-     */
-    function verifySubdomains(subdomains) {
-        var valid = true;
-        if (subdomains.trim() !== '') {
-            try {
-                subdomains.split(',').forEach(function (subdomain) {
-                    if (!/^[a-zA-z0-9][a-zA-Z0-9-]{0,19}$/.test(subdomain.trim())) {
-                        valid = false;
-                        throw 'break';
-                    }
-                });
-            } catch (e) {
-            }
-        }
-        return {
-            valid: valid,
-            trim: subdomains.replace(/\s/g, '')
-        };
-    }
-
-    /**
-     * load i18n language
-     * @param lang {{}}
-     */
-    function langLoaded(lang) {
-        //set verify rules
-        var verifyRules = {
-            user: function (value, item) {
-                var result = verifyUser(value);
-                if (!result.valid) {
-                    return lang['UserFormatError'];
-                }
-                if (item != null) {
-                    if (typeof item === "function") {
-                        item && item(result.trim);
-                    } else {
-                        $(item).val(result.trim);
-                    }
-                }
-            },
-            token: function (value, item) {
-                var result = verifyToken(value);
-                if (!result.valid) {
-                    return lang['TokenFormatError'];
-                }
-                if (item != null) {
-                    if (typeof item === "function") {
-                        item && item(result.trim);
-                    } else {
-                        $(item).val(result.trim);
-                    }
-                }
-            },
-            comment: function (value, item) {
-                var result = verifyComment(value);
-                if (!result.valid) {
-                    return lang['CommentInvalid'];
-                }
-                if (item != null) {
-                    if (typeof item === "function") {
-                        item && item(result.trim);
-                    } else {
-                        $(item).val(result.trim);
-                    }
-                }
-            },
-            ports: function (value, item) {
-                var result = verifyPorts(value);
-                if (!result.valid) {
-                    return lang['PortsInvalid'];
-                }
-                if (item != null) {
-                    if (typeof item === "function") {
-                        item && item(result.trim);
-                    } else {
-                        $(item).val(result.trim);
-                    }
-                }
-            },
-            domains: function (value, item) {
-                var result = verifyDomains(value);
-                if (!result.valid) {
-                    return lang['DomainsInvalid'];
-                }
-                if (item != null) {
-                    if (typeof item === "function") {
-                        item && item(result.trim);
-                    } else {
-                        $(item).val(result.trim);
-                    }
-                }
-            },
-            subdomains: function (value, item) {
-                var result = verifySubdomains(value);
-                if (!result.valid) {
-                    return lang['SubdomainsInvalid'];
-                }
-                if (item != null) {
-                    if (typeof item === "function") {
-                        item && item(result.trim);
-                    } else {
-                        $(item).val(result.trim);
-                    }
-                }
-            }
-        };
-
-        layui.form.set({
-            verIncludeRequired: true,
-            verify: verifyRules
-        });
-
-        layui.table.render({
-            elem: '#tokenTable',
-            url: '/tokens',
-            method: 'get',
-            where: {},
-            dataType: 'json',
-            editTrigger: 'dblclick',
-            page: navigator.language.indexOf("zh") === 0,
-            toolbar: '#toolbarTemplate',
-            defaultToolbar: false,
-            text: {none: lang['EmptyData']},
-            cols: [[
-                {type: 'checkbox'},
-                {field: 'user', title: lang['User'], width: 150, sort: true},
-                {field: 'token', title: lang['Token'], width: 200, sort: true, edit: true},
-                {field: 'comment', title: lang['Notes'], sort: true, edit: 'textarea'},
-                {field: 'ports', title: lang['AllowedPorts'], sort: true, edit: 'textarea'},
-                {field: 'domains', title: lang['AllowedDomains'], sort: true, edit: 'textarea'},
-                {field: 'subdomains', title: lang['AllowedSubdomains'], sort: true, edit: 'textarea'},
-                {
-                    field: 'status',
-                    title: lang['Status'],
-                    width: 100,
-                    templet: '<span>{{d.status? "' + lang['Enable'] + '":"' + lang['Disable'] + '"}}</span>',
-                    sort: true
-                },
-                {title: lang['Operation'], width: 150, toolbar: '#operationTemplate'}
-            ]]
-        });
-
-        /**
-         * update layui table data
-         * @param obj table update obj
-         * @param field update field
-         * @param trim new value
-         */
-        function updateTableField(obj, field, trim) {
-            var newData = {};
-            newData[field] = trim;
-            obj.update(newData);
-        }
-
-        layui.table.on('edit(tokenTable)', function (obj) {
-            var field = obj.field;
-            var value = obj.value;
-            var oldValue = obj.oldValue;
-            var before = $.extend(true, {}, obj.data);
-            var after = $.extend(true, {}, obj.data);
-            var verifyMsg = false;
-            if (field === 'token') {
-                verifyMsg = verifyRules.token(value, function (trim) {
-                    updateTableField(obj, field, trim)
-                });
-                if (verifyMsg) {
-                    layui.layer.msg(verifyMsg);
-                    return obj.reedit();
-                }
-
-                before.token = oldValue;
-                after.token = value;
-            } else if (field === 'comment') {
-                verifyMsg = verifyRules.comment(value, function (trim) {
-                    updateTableField(obj, field, trim)
-                });
-                if (verifyMsg) {
-                    layui.layer.msg(verifyMsg);
-                    return obj.reedit();
-                }
-
-                before.comment = oldValue;
-                after.comment = value;
-            } else if (field === 'ports') {
-                verifyMsg = verifyRules.ports(value, function (trim) {
-                    updateTableField(obj, field, trim)
-                });
-                if (verifyMsg) {
-                    layui.layer.msg(verifyMsg);
-                    return obj.reedit();
-                }
-
-                before.ports = oldValue;
-                after.ports = value;
-            } else if (field === 'domains') {
-                verifyMsg = verifyRules.domains(value, function (trim) {
-                    updateTableField(obj, field, trim)
-                });
-                if (verifyMsg) {
-                    layui.layer.msg(verifyMsg);
-                    return obj.reedit();
-                }
-
-                before.domains = oldValue;
-                after.domains = value;
-            } else if (field === 'subdomains') {
-                verifyMsg = verifyRules.subdomains(value, function (trim) {
-                    updateTableField(obj, field, trim)
-                });
-                if (verifyMsg) {
-                    layui.layer.msg(verifyMsg);
-                    return obj.reedit();
-                }
-
-                before.subdomains = oldValue;
-                after.subdomains = value;
-            }
-
-            update(before, after);
-        });
-
-        layui.table.on('toolbar(tokenTable)', function (obj) {
-            var id = obj.config.id;
-            var checkStatus = layui.table.checkStatus(id);
-            switch (obj.event) {
-                case 'add':
-                    addPopup();
-                    break
-                case 'remove':
-                    batchRemovePopup(checkStatus.data);
-                    break
-                case 'disable':
-                    batchDisablePopup(checkStatus.data);
-                    break
-                case 'enable':
-                    batchEnablePopup(checkStatus.data);
-                    break
-            }
-        });
-        layui.table.on('tool(tokenTable)', function (obj) {
-            var data = obj.data;
-            switch (obj.event) {
-                case 'remove':
-                    removePopup(data);
-                    break;
-                case 'disable':
-                    disablePopup(data);
-                    break;
-                case 'enable':
-                    enablePopup(data);
-                    break
-            }
-        });
-
-        /**
-         * add user popup
-         */
-        function addPopup() {
-            layui.layer.open({
-                type: 1,
-                title: lang['NewUser'],
-                area: ['500px'],
-                content: layui.laytpl(document.getElementById('addTemplate').innerHTML).render(),
-                btn: [lang['Confirm'], lang['Cancel']],
-                btn1: function (index) {
-                    if (layui.form.validate('#addUserForm')) {
-                        add(layui.form.val('addUserForm'), index);
-                    }
-                },
-                btn2: function (index) {
-                    layui.layer.close(index);
-                }
-            });
-        }
-
-        /**
-         * add user action
-         * @param data {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} user data
-         * @param index popup index
-         */
-        function add(data, index) {
-            var loading = layui.layer.load();
-            $.ajax({
-                url: '/add',
-                type: 'post',
-                contentType: 'application/json',
-                data: JSON.stringify(data),
-                success: function (result) {
-                    if (result.success) {
-                        reloadTable();
-                        layui.layer.close(index);
-                        layui.layer.msg(lang['OperateSuccess'], function (index) {
-                            layui.layer.close(index);
-                        });
-                    } else {
-                        errorMsg(result);
-                    }
-                },
-                complete: function () {
-                    layui.layer.close(loading);
-                }
-            });
-        }
-
-        /**
-         * update user action
-         * @param before {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} data before update
-         * @param after {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} data after update
-         */
-        function update(before, after) {
-            var loading = layui.layer.load();
-            $.ajax({
-                url: '/update',
-                type: 'post',
-                contentType: 'application/json',
-                data: JSON.stringify({
-                    before: before,
-                    after: after,
-                }),
-                success: function (result) {
-                    if (result.success) {
-                        layui.layer.msg(lang['OperateSuccess']);
-                    } else {
-                        errorMsg(result);
-                    }
-                },
-                complete: function () {
-                    layui.layer.close(loading);
-                }
-            });
-        }
-
-        /**
-         * batch remove user popup
-         * @param data {[{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}]} user data list
-         */
-        function batchRemovePopup(data) {
-            if (data.length === 0) {
-                layui.layer.msg(lang['ShouldCheckUser']);
-                return;
-            }
-            layui.layer.confirm(lang['ConfirmRemoveUser'], {
-                title: lang['OperationConfirm'],
-                btn: [lang['Confirm'], lang['Cancel']]
-            }, function (index) {
-                operate(apiType.Remove, data, index);
-            });
-        }
-
-        /**
-         * batch disable user popup
-         * @param data {[{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}]} user data list
-         */
-        function batchDisablePopup(data) {
-            if (data.length === 0) {
-                layui.layer.msg(lang['ShouldCheckUser']);
-                return;
-            }
-            layui.layer.confirm(lang['ConfirmDisableUser'], {
-                title: lang['OperationConfirm'],
-                btn: [lang['Confirm'], lang['Cancel']]
-            }, function (index) {
-                operate(apiType.Disable, data, index);
-            });
-        }
-
-        /**
-         * batch enable user popup
-         * @param data {[{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}]} user data list
-         */
-        function batchEnablePopup(data) {
-            if (data.length === 0) {
-                layui.layer.msg(lang['ShouldCheckUser']);
-                return;
-            }
-            layui.layer.confirm(lang['ConfirmEnableUser'], {
-                title: lang['OperationConfirm'],
-                btn: [lang['Confirm'], lang['Cancel']]
-            }, function (index) {
-                operate(apiType.Enable, data, index);
-            });
-        }
-
-        /**
-         * remove one user popup
-         * @param data {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} user data
-         */
-        function removePopup(data) {
-            layui.layer.confirm(lang['ConfirmRemoveUser'], {
-                title: lang['OperationConfirm'],
-                btn: [lang['Confirm'], lang['Cancel']]
-            }, function (index) {
-                operate(apiType.Remove, [data], index);
-            });
-        }
-
-        /**
-         * disable one user popup
-         * @param data {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} user data
-         */
-        function disablePopup(data) {
-            layui.layer.confirm(lang['ConfirmDisableUser'], {
-                title: lang['OperationConfirm'],
-                btn: [lang['Confirm'], lang['Cancel']]
-            }, function (index) {
-                operate(apiType.Disable, [data], index);
-            });
-        }
-
-        /**
-         * enable one user popup
-         * @param data {{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}} user data
-         */
-        function enablePopup(data) {
-            layui.layer.confirm(lang['ConfirmEnableUser'], {
-                title: lang['OperationConfirm'],
-                btn: [lang['Confirm'], lang['Cancel']]
-            }, function (index) {
-                operate(apiType.Enable, [data], index);
-            });
-        }
-
-        /**
-         * operate actions
-         * @param type {apiType} action type
-         * @param data {[{user:string, token:string, comment:string, status:boolean, ports:string, domains:string, subdomains:string}]} user data list
-         * @param index popup index
-         */
-        function operate(type, data, index) {
-            var url;
-            var extendMessage = '';
-            if (type === apiType.Remove) {
-                url = "/remove";
-                extendMessage = ', ' + lang['RemoveUser'] + lang['TakeTimeMakeEffective'];
-            } else if (type === apiType.Disable) {
-                url = "/disable";
-                extendMessage = ', ' + lang['RemoveUser'] + lang['TakeTimeMakeEffective'];
-            } else if (type === apiType.Enable) {
-                url = "/enable";
-            } else {
-                layer.layer.msg(lang['OperateError']);
-                return;
-            }
-            var loading = layui.layer.load();
-            $.post({
-                url: url,
-                type: 'post',
-                contentType: 'application/json',
-                data: JSON.stringify({
-                    users: data
-                }),
-                success: function (result) {
-                    if (result.success) {
-                        reloadTable();
-                        layui.layer.close(index);
-                        layui.layer.msg(lang['OperateSuccess'] + extendMessage, function (index) {
-                            layui.layer.close(index);
-                        });
-                    } else {
-                        errorMsg(result);
-                    }
-                },
-                complete: function () {
-                    layui.layer.close(loading);
-                }
-            });
-        }
-
-        /**
-         * reload user table
-         */
-        function reloadTable() {
-            var searchData = layui.form.val('searchForm');
-            layui.table.reloadData('tokenTable', {
-                where: searchData
-            }, true)
-        }
-
-        /**
-         * show error message popup
-         * @param result
-         */
-        function errorMsg(result) {
-            var reason = lang['Other Error'];
-            if (result.code === 1)
-                reason = lang['ParamError'];
-            else if (result.code === 2)
-                reason = lang['UserExist'];
-            else if (result.code === 3)
-                reason = lang['ParamError'];
-            else if (result.code === 4)
-                reason = lang['UserFormatError'];
-            else if (result.code === 5)
-                reason = lang['TokenFormatError'];
-            layui.layer.msg(lang['OperateFailed'] + ',' + reason)
-        }
-
-        /**
-         * click event
-         */
-        $(document).on('click.search', '#searchBtn', function () {
-            reloadTable();
-            return false;
-        }).on('click.reset', '#resetBtn', function () {
-            $('#searchForm')[0].reset();
-            reloadTable();
-            return false;
-        });
-    }
-
         var langLoading = layui.layer.load()
-    $.getJSON('/lang').done(langLoaded).always(function () {
+        $.getJSON('/lang.json').done(function (lang) {
+            layui.element.on('nav(leftNav)', function (elem) {
+                var id = elem.attr('id');
+                var title = elem.text();
+                if (id === 'serverInfo') {
+                    loadServerInfo(lang, title.trim());
+                } else if (id === 'userList') {
+                    loadUserList(lang, title.trim());
+                } else if (elem.closest('.layui-nav-item').attr('id') === 'proxyList') {
+                    if (id != null && id.trim() !== '') {
+                        var suffix = elem.closest('.layui-nav-item').children('a').text().trim();
+                        loadProxyInfo(lang, title + " " + suffix, id);
+                    }
+                }
+            });
+
+            $('#leftNav .layui-this > a').click();
+        }).always(function () {
             layui.layer.close(langLoading);
         });
     });
+})(layui.$);

assets/static/lib/filesize.min.js

@@ -0,0 +1,6 @@
+/*!
+ 2022 Jason Mulligan <jason.mulligan@avoidwork.com>
+ @version 9.0.11
+*/
+!function(i,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(i="undefined"!=typeof globalThis?globalThis:i||self).filesize=t()}(this,(function(){"use strict";function i(t){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(i){return typeof i}:function(i){return i&&"function"==typeof Symbol&&i.constructor===Symbol&&i!==Symbol.prototype?"symbol":typeof i},i(t)}var t="array",o="bits",e="byte",n="bytes",r="",b="exponent",l="function",a="iec",d="Invalid number",f="Invalid rounding method",u="jedec",s="object",c=".",p="round",y="kbit",m="string",v={symbol:{iec:{bits:["bit","Kibit","Mibit","Gibit","Tibit","Pibit","Eibit","Zibit","Yibit"],bytes:["B","KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"]},jedec:{bits:["bit","Kbit","Mbit","Gbit","Tbit","Pbit","Ebit","Zbit","Ybit"],bytes:["B","KB","MB","GB","TB","PB","EB","ZB","YB"]}},fullform:{iec:["","kibi","mebi","gibi","tebi","pebi","exbi","zebi","yobi"],jedec:["","kilo","mega","giga","tera","peta","exa","zetta","yotta"]}};function g(g){var h=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},B=h.bits,M=void 0!==B&&B,S=h.pad,T=void 0!==S&&S,w=h.base,x=void 0===w?-1:w,E=h.round,j=void 0===E?2:E,N=h.locale,P=void 0===N?r:N,k=h.localeOptions,G=void 0===k?{}:k,K=h.separator,Y=void 0===K?r:K,Z=h.spacer,z=void 0===Z?" ":Z,I=h.symbols,L=void 0===I?{}:I,O=h.standard,q=void 0===O?r:O,A=h.output,C=void 0===A?m:A,D=h.fullform,F=void 0!==D&&D,H=h.fullforms,J=void 0===H?[]:H,Q=h.exponent,R=void 0===Q?-1:Q,U=h.roundingMethod,V=void 0===U?p:U,W=h.precision,X=void 0===W?0:W,$=R,_=Number(g),ii=[],ti=0,oi=r;-1===x&&0===q.length?(x=10,q=u):-1===x&&q.length>0?x=(q=q===a?a:u)===a?2:10:q=10===(x=2===x?2:10)||q===u?u:a;var ei=10===x?1e3:1024,ni=!0===F,ri=_<0,bi=Math[V];if(isNaN(g))throw new TypeError(d);if(i(bi)!==l)throw new TypeError(f);if(ri&&(_=-_),(-1===$||isNaN($))&&($=Math.floor(Math.log(_)/Math.log(ei)))<0&&($=0),$>8&&(X>0&&(X+=8-$),$=8),C===b)return $;if(0===_)ii[0]=0,oi=ii[1]=v.symbol[q][M?o:n][$];else{ti=_/(2===x?Math.pow(2,10*$):Math.pow(1e3,$)),M&&(ti*=8)>=ei&&$<8&&(ti/=ei,$++);var li=Math.pow(10,$>0?j:0);ii[0]=bi(ti*li)/li,ii[0]===ei&&$<8&&-1===R&&(ii[0]=1,$++),oi=ii[1]=10===x&&1===$?M?y:"kB":v.symbol[q][M?o:n][$]}if(ri&&(ii[0]=-ii[0]),X>0&&(ii[0]=ii[0].toPrecision(X)),ii[1]=L[ii[1]]||ii[1],!0===P?ii[0]=ii[0].toLocaleString():P.length>0?ii[0]=ii[0].toLocaleString(P,G):Y.length>0&&(ii[0]=ii[0].toString().replace(c,Y)),T&&!1===Number.isInteger(ii[0])&&j>0){var ai=Y||c,di=ii[0].toString().split(ai),fi=di[1]||r,ui=fi.length,si=j-ui;ii[0]="".concat(di[0]).concat(ai).concat(fi.padEnd(ui+si,"0"))}return ni&&(ii[1]=J[$]?J[$]:v.fullform[q][$]+(M?"bit":e)+(1===ii[0]?r:"s")),C===t?ii:C===s?{value:ii[0],symbol:ii[1],exponent:$,unit:oi}:ii.join(z)}return g.partial=function(i){return function(t){return g(t,i)}},g}));
+//# sourceMappingURL=filesize.min.js.map

assets/templates/index.html

@@ -1,15 +1,20 @@
-<!--suppress HtmlFormInputWithoutLabel -->
 <!DOCTYPE html>
+<html lang="">
 <head>
-    <title>${ .UserManage }</title>
-    <link rel="stylesheet" href="./static/layui/css/layui.css">
+    <title>${ .FrpsPanel }</title>
+    <link rel="stylesheet" href="./static/lib/layui/css/layui.css">
     <link rel="stylesheet" href="./static/css/layui-theme-dark.css">
     <link rel="stylesheet" href="./static/css/index.css">
     <link rel="stylesheet" href="./static/css/index-color.css">
-    <script src="./static/layui/layui.js"></script>
+    <script src="./static/lib/layui/layui.js"></script>
+    <script src="./static/lib/echarts.min.js"></script>
+    <script src="./static/lib/filesize.min.js"></script>
+    <script src="./static/js/index-server-info.js"></script>
+    <script src="./static/js/index-user-list.js"></script>
+    <script src="./static/js/index-proxy-list.js"></script>
     <script src="./static/js/index.js"></script>
     <style>
-        .layui-table-cell:empty::after {
+        section.user-list .layui-table-cell:empty::after {
             content: '${ .NotLimit }';
         }
 
@@ -17,12 +22,144 @@
             content: '${ .None }';
         }
     </style>
+    <style>
+        .layui-layout-admin .layui-body {
+            padding: 0;
+        }
+    </style>
 </head>
 <body>
-<header>
-    <div class="title">${ .FrpsMultiuser }</div>
-</header>
-<section>
+<div class="layui-layout layui-layout-admin">
+    <div class="layui-header layui-bg-blue">
+        <div class="layui-logo layui-hide-xs layui-bg-black">${ .FrpsPanel }</div>
+        <div class="layui-title" id="title"></div>
+    </div>
+    <div class="layui-side layui-bg-black">
+        <div class="layui-side-scroll">
+            <ul class="layui-nav layui-nav-tree" lay-filter="leftNav" id="leftNav">
+                <li class="layui-nav-item layui-this">
+                    <a href="javascript:void(0)" id="serverInfo">${ .ServerInfo }</a>
+                </li>
+                <li class="layui-nav-item">
+                    <a href="javascript:void(0)" id="userList">${ .Users }</a>
+                </li>
+                <li class="layui-nav-item layui-nav-itemed" id="proxyList">
+                    <a class="" href="javascript:void(0)">${ .Proxies }</a>
+                    <dl class="layui-nav-child">
+                        <dd>
+                            <a href="javascript:void(0)" id="tcp">TCP</a>
+                        </dd>
+                        <dd>
+                            <a href="javascript:void(0)" id="udp">UDP</a>
+                        </dd>
+                        <dd>
+                            <a href="javascript:void(0)" id="http">HTTP</a>
+                        </dd>
+                        <dd>
+                            <a href="javascript:void(0)" id="https">HTTPS</a>
+                        </dd>
+                        <dd>
+                            <a href="javascript:void(0)" id="stcp">STCP</a>
+                        </dd>
+                        <dd>
+                            <a href="javascript:void(0)" id="sudp">SUDP</a>
+                        </dd>
+                    </dl>
+                </li>
+            </ul>
+        </div>
+        <div class="version">
+            <a href="https://github.com/fatedier/frp" target="_blank">Frp <span id="frpVersion"></span></a>
+            <span> | </span>
+            <a href="https://github.com/yhl452493373/frps-panel" target="_blank">${ .FrpsPanel } ${ .version }</a>
+        </div>
+    </div>
+    <div class="layui-body" id="content"></div>
+</div>
+
+<!--服务器信息模板-->
+<script type="text/html" id="serverInfoTemplate">
+    <section class="server-info">
+        <div class="text-info">
+            <div class="text-row">
+                <div class="text-col">${ .Version }</div>
+                <div class="text-col">{{= d.version }}</div>
+            </div>
+            <div class="text-row">
+                <div class="text-col">${ .BindPort }</div>
+                <div class="text-col">{{= d.bind_port }}</div>
+            </div>
+            <div class="text-row">
+                <div class="text-col">${ .KCPBindPort }</div>
+                <div class="text-col">{{= d.kcp_bind_port }}</div>
+            </div>
+            <div class="text-row">
+                <div class="text-col">${ .QUICBindPort }</div>
+                <div class="text-col">{{= d.quic_bind_port }}</div>
+            </div>
+            <div class="text-row">
+                <div class="text-col">${ .HTTPPort }</div>
+                <div class="text-col">{{= d.vhost_http_port }}</div>
+            </div>
+            <div class="text-row">
+                <div class="text-col">${ .HTTPSPort }</div>
+                <div class="text-col">{{= d.vhost_https_port }}</div>
+            </div>
+            <div class="text-row">
+                <div class="text-col">${ .TCPMUXPort }</div>
+                <div class="text-col">{{= d.tcpmux_httpconnect_port }}</div>
+            </div>
+            <div class="text-row">
+                <div class="text-col">${ .SubdomainHost }</div>
+                <div class="text-col">{{= d.subdomain_host }}</div>
+            </div>
+            <div class="text-row">
+                <div class="text-col">${ .MaxPoolCount }</div>
+                <div class="text-col">{{= d.max_pool_count }}</div>
+            </div>
+            <div class="text-row">
+                <div class="text-col">${ .MaxPortsPerClient }</div>
+                <div class="text-col">{{= d.max_ports_per_client }}</div>
+            </div>
+            <div class="text-row">
+                <div class="text-col">${ .HeartBeatTimeout }</div>
+                <div class="text-col">{{= d.heart_beat_timeout }}</div>
+            </div>
+            <div class="text-row">
+                <div class="text-col">${ .AllowPorts }</div>
+                <div class="text-col">{{= d.allow_ports_str }}</div>
+            </div>
+            <div class="text-row">
+                <div class="text-col">${ .TLSOnly }</div>
+                <div class="text-col">{{= d.tls_only }}</div>
+            </div>
+            <div class="text-row">
+                <div class="text-col">${ .CurrentConnections }</div>
+                <div class="text-col">{{= d.cur_conns }}</div>
+            </div>
+            <div class="text-row">
+                <div class="text-col">${ .ClientCounts }</div>
+                <div class="text-col">{{= d.client_counts }}</div>
+            </div>
+            <div class="text-row">
+                <div class="text-col">${ .ProxyCounts }</div>
+                <div class="text-col">{{= d.proxy_counts }}</div>
+            </div>
+        </div>
+        <div class="chart-info">
+            <div class="chart-traffic">
+                <div id="trafficPieChart"></div>
+            </div>
+            <div class="chart-count">
+                <div id="countPieChart"></div>
+            </div>
+        </div>
+    </section>
+</script>
+
+<!--用户列表模板-->
+<script type="text/html" id="userListTemplate">
+    <section class="user-list">
         <form class="layui-form layui-row layui-col-space16" id="searchForm" lay-filter="searchForm">
             <div class="layui-col-md3">
                 <div class="layui-input-wrap">
@@ -54,14 +191,17 @@
             <div class="layui-col-md3">
                 <div class="layui-btn-container">
                     <button class="layui-btn layui-btn-sm" id="searchBtn">${ .Search }</button>
-                <button class="layui-btn layui-btn-sm layui-btn-primary" type="reset" id="resetBtn">${ .Reset }</button>
+                    <button class="layui-btn layui-btn-sm layui-btn-primary" type="reset" id="resetBtn">${ .Reset }
+                    </button>
                 </div>
             </div>
         </form>
         <table id="tokenTable" lay-filter="tokenTable"></table>
     </section>
+</script>
 
-<script type="text/html" id="toolbarTemplate">
+<!--用户列表-表格工具条按钮模板-->
+<script type="text/html" id="userListToolbarTemplate">
     <div class="layui-btn-container">
         <button class="layui-btn layui-btn-sm" lay-event="add">${ .NewUser }</button>
         <button class="layui-btn layui-btn-sm" lay-event="remove">${ .RemoveUser }</button>
@@ -69,7 +209,9 @@
         <button class="layui-btn layui-btn-sm" lay-event="enable">${ .EnableUser }</button>
     </div>
 </script>
-<script type="text/html" id="operationTemplate">
+
+<!--用户列表-操作按钮模板-->
+<script type="text/html" id="userListOperationTemplate">
     <div class="layui-clear-space">
         <a class="layui-btn layui-btn-xs" lay-event="remove">${ .Remove }</a>
         {{# if (d.status) { }}
@@ -79,7 +221,9 @@
         {{# } }}
     </div>
 </script>
-<script type="text/html" id="addTemplate">
+
+<!--用户列表-添加用户表单模板-->
+<script type="text/html" id="addUserTemplate">
     <form class="layui-form" id="addUserForm" lay-filter="addUserForm">
         <div class="layui-form-item">
             <label class="layui-form-label">${ .User }</label>
@@ -125,5 +269,165 @@
         </div>
     </form>
 </script>
+
+<!--代理列表-代理表格模板-->
+<script type="text/html" id="proxyListTableTemplate">
+    <section class="proxy-list">
+        <table id="proxyListTable" lay-filter="proxyListTable"></table>
+    </section>
+</script>
+
+<!--代理列表-代理表格展示代理详情的箭头模板-->
+<script type="text/html" id="toggleProxyInfoArrowTemplate">
+    <i class='layui-icon layui-icon-triangle-r toggle-proxy-info-arrow' data-index='{{ d.LAY_INDEX }}'
+       lay-event='toggleProxyInfo'></i>
+</script>
+
+<!--代理列表-代理列表每行展开后的表格模板-->
+<script type="text/html" id="expandTrTemplate">
+    <tr class="layui-hide proxy-info" id="childTr_{{= d.index }}">
+        <td></td>
+        <td colspan="{{= d.colspan }}">
+            <div class="layui-row">
+                <div class="layui-col-xs12">
+                    <div class="layui-row">
+                        <div class="layui-col-md12">
+                            <input type="hidden" value="{{= d.data.name }}">
+                            <div class="layui-btn traffic-statistics">${ .TrafficStatistics }</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {{# if (d.proxyType === 'http' || d.proxyType === 'https') { }}
+            <div class="layui-row">
+                <div class="layui-col-xs6">
+                    <div class="layui-row">
+                        <div class="layui-col-md3">${ .Name }</div>
+                        <div class="layui-col-md9">{{= d.data.name }}</div>
+                    </div>
+                </div>
+                <div class="layui-col-xs6">
+                    <div class="layui-row">
+                        <div class="layui-col-md3">${ .Type }</div>
+                        <div class="layui-col-md9">{{= d.proxyType.toUpperCase() }}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="layui-row">
+                <div class="layui-col-xs6">
+                    <div class="layui-row">
+                        <div class="layui-col-md3">${ .Domains }</div>
+                        <div class="layui-col-md9">{{= d.data.conf.custom_domains }}</div>
+                    </div>
+                </div>
+                <div class="layui-col-xs6">
+                    <div class="layui-row">
+                        <div class="layui-col-md3">${ .SubDomain }</div>
+                        <div class="layui-col-md9">{{= d.data.conf.subdomain }}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="layui-row">
+                <div class="layui-col-xs6">
+                    <div class="layui-row">
+                        <div class="layui-col-md3">${ .Locations }</div>
+                        <div class="layui-col-md9">{{= d.data.conf.locations }}</div>
+                    </div>
+                </div>
+                <div class="layui-col-xs6">
+                    <div class="layui-row">
+                        <div class="layui-col-md3">${ .HostRewrite }</div>
+                        <div class="layui-col-md9">{{= d.data.conf.host_header_rewrite }}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="layui-row">
+                <div class="layui-col-xs6">
+                    <div class="layui-row">
+                        <div class="layui-col-md3">${ .Encryption }</div>
+                        <div class="layui-col-md9">{{= d.data.conf.use_encryption }}</div>
+                    </div>
+                </div>
+                <div class="layui-col-xs6">
+                    <div class="layui-row">
+                        <div class="layui-col-md3">${ .Compression }</div>
+                        <div class="layui-col-md9">{{= d.data.conf.use_compression }}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="layui-row">
+                <div class="layui-col-xs6">
+                    <div class="layui-row">
+                        <div class="layui-col-md3">${ .LastStart }</div>
+                        <div class="layui-col-md9">{{= d.data.last_start_time }}</div>
+                    </div>
+                </div>
+                <div class="layui-col-xs6">
+                    <div class="layui-row">
+                        <div class="layui-col-md3">${ .LastClose }</div>
+                        <div class="layui-col-md9">{{= d.data.last_close_time }}</div>
+                    </div>
+                </div>
+            </div>
+            {{# } else { }}
+            <div class="layui-row">
+                <div class="layui-col-xs6">
+                    <div class="layui-row">
+                        <div class="layui-col-md3">${ .Name }</div>
+                        <div class="layui-col-md9">{{= d.data.name }}</div>
+                    </div>
+                </div>
+                <div class="layui-col-xs6">
+                    <div class="layui-row">
+                        <div class="layui-col-md3">${ .Type }</div>
+                        <div class="layui-col-md9">{{= d.proxyType.toUpperCase() }}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="layui-row">
+                <div class="layui-col-xs6">
+                    <div class="layui-row">
+                        <div class="layui-col-md3">${ .Addr }</div>
+                        <div class="layui-col-md9">{{= d.data.conf.remote_port }}</div>
+                    </div>
+                </div>
+                <div class="layui-col-xs6">
+                    <div class="layui-row">
+                        <div class="layui-col-md3">${ .Encryption }</div>
+                        <div class="layui-col-md9">{{= d.data.conf.use_encryption }}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="layui-row">
+                <div class="layui-col-xs6">
+                    <div class="layui-row">
+                        <div class="layui-col-md3">${ .Compression }</div>
+                        <div class="layui-col-md9">{{= d.data.conf.use_compression }}</div>
+                    </div>
+                </div>
+                <div class="layui-col-xs6">
+                    <div class="layui-row">
+                        <div class="layui-col-md3">${ .LastStart }</div>
+                        <div class="layui-col-md9">{{= d.data.last_start_time }}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="layui-row">
+                <div class="layui-col-xs6">
+                    <div class="layui-row">
+                        <div class="layui-col-md3">${ .LastClose }</div>
+                        <div class="layui-col-md9">{{= d.data.last_close_time }}</div>
+                    </div>
+                </div>
+            </div>
+            {{# } }}
+        </td>
+    </tr>
+</script>
+
+<!--代理列表-每个代理的最近7天流量统计模板-->
+<script type="text/html" id="trafficStaticTemplate">
+    <div id="trafficBarChart"></div>
+</script>
 </body>
 </html>

cmd/frps-panel/cmd.go

@@ -2,19 +2,18 @@ package main
 
 import (
 	"errors"
-	"frps-multiuser/pkg/server"
-	"frps-multiuser/pkg/server/controller"
+	"frps-panel/pkg/server"
+	"frps-panel/pkg/server/controller"
 	"github.com/spf13/cobra"
 	"gopkg.in/ini.v1"
 	"io/fs"
 	"log"
 	"os"
 	"path/filepath"
-	"strconv"
 	"strings"
 )
 
-const version = "0.0.2"
+const version = "1.4.0"
 
 var (
 	showVersion bool
@@ -22,13 +21,13 @@ var (
 )
 
 func init() {
-	rootCmd.PersistentFlags().BoolVarP(&showVersion, "version", "v", false, "version of frps-multiuser")
-	rootCmd.PersistentFlags().StringVarP(&configFile, "config", "c", "./frps-multiuser.ini", "config file of frps-multiuser")
+	rootCmd.PersistentFlags().BoolVarP(&showVersion, "version", "v", false, "version of frps-panel")
+	rootCmd.PersistentFlags().StringVarP(&configFile, "config", "c", "./frps-panel.ini", "config file of frps-panel")
 }
 
 var rootCmd = &cobra.Command{
-	Use:   "frps-multiuser",
-	Short: "frps-multiuser is the server plugin of frp to support multiple users.",
+	Use:   "frps-panel",
+	Short: "frps-panel is the server plugin of frp to support multiple users.",
 	RunE: func(cmd *cobra.Command, args []string) error {
 		if showVersion {
 			log.Println(version)
@@ -43,7 +42,7 @@ var rootCmd = &cobra.Command{
 
 		common, tokens, ports, domains, subdomains, iniFile, err := ParseConfigFile(configFile)
 		if err != nil {
-			log.Printf("fail to start frps-multiuser : %v", err)
+			log.Printf("fail to start frps-panel : %v", err)
 			return err
 		}
 		s, err := server.New(
@@ -56,6 +55,7 @@ var rootCmd = &cobra.Command{
 				Subdomains: subdomains,
 				ConfigFile: configFile,
 				IniFile:    iniFile,
+				Version:    version,
 			})
 		if err != nil {
 			return err
@@ -103,24 +103,14 @@ func ParseConfigFile(file string) (controller.CommonInfo, map[string]controller.
 		log.Printf("fail to get [common] section from file %s : %v", file, err)
 		return common, nil, nil, nil, nil, iniFile, err
 	}
-	pluginAddr := commonSection.Key("plugin_addr").Value()
-	if len(pluginAddr) != 0 {
-		common.PluginAddr = pluginAddr
-	} else {
-		common.PluginAddr = "0.0.0.0"
-	}
-	pluginPort := commonSection.Key("plugin_port").Value()
-	if len(pluginPort) != 0 {
-		port, err := strconv.Atoi(pluginPort)
-		if err != nil {
-			return common, nil, nil, nil, nil, iniFile, err
-		}
-		common.PluginPort = port
-	} else {
-		common.PluginPort = 7200
-	}
+	common.PluginAddr = commonSection.Key("plugin_addr").MustString("0.0.0.0")
+	common.PluginPort = commonSection.Key("plugin_port").MustInt(7200)
 	common.User = commonSection.Key("admin_user").Value()
 	common.Pwd = commonSection.Key("admin_pwd").Value()
+	common.DashboardAddr = commonSection.Key("dashboard_addr").MustString("127.0.0.1")
+	common.DashboardPort = commonSection.Key("dashboard_port").MustInt(7500)
+	common.DashboardUser = commonSection.Key("dashboard_user").Value()
+	common.DashboardPwd = commonSection.Key("dashboard_pwd").Value()
 
 	portsSection, err := iniFile.GetSection("ports")
 	if err != nil {

config/frps-panel.ini

@@ -1,9 +1,15 @@
 ; basic options
 [common]
+; frps panel config info
 plugin_addr    = 127.0.0.1
 plugin_port    = 7200
 admin_user     = admin
 admin_pwd      = admin
+; frp dashboard info
+dashboard_addr = 127.0.0.1
+dashboard_port = 7500
+dashboard_user = admin
+dashboard_pwd  = admin
 
 ; user tokens
 [users]

go.mod

@@ -1,4 +1,4 @@
-module frps-multiuser
+module frps-panel
 
 go 1.21
 

package.sh

@@ -1,12 +1,12 @@
 #!/bin/bash
 cd ./release || exit
 rm -rf *.zip
-list=$(ls frps-multiuser-*)
+list=$(ls frps-panel-*)
 echo "$list"
 for binFile in $list
   do
-    cp "$binFile" frps-multiuser
-    zip -r "$binFile".zip frps-multiuser frps-multiuser.ini assets -x "*.git*" "*.idea*" "*.DS_Store" "*.contentFlavour"
-    rm -rf "$binFile" frps-multiuser
+    cp "$binFile" frps-panel
+    zip -r "$binFile".zip frps-panel frps-panel.ini assets -x "*.git*" "*.idea*" "*.DS_Store" "*.contentFlavour"
+    rm -rf "$binFile" frps-panel
   done
-  rm -rf frps-multiuser.ini assets
+  rm -rf frps-panel.ini assets

pkg/server/controller/controller.go

@@ -1,16 +1,19 @@
 package controller
 
 import (
+	"encoding/base64"
 	"encoding/json"
 	"errors"
 	"fmt"
 	plugin "github.com/fatedier/frp/pkg/plugin/server"
 	ginI18n "github.com/gin-contrib/i18n"
 	"github.com/gin-gonic/gin"
+	"io"
 	"log"
 	"net/http"
 	"regexp"
 	"sort"
+	"strconv"
 	"strings"
 )
 
@@ -21,6 +24,7 @@ const (
 	SaveError        = 3
 	UserFormatError  = 4
 	TokenFormatError = 5
+	FrpServerError   = 6
 )
 
 var UserFormatReg = regexp.MustCompile("^\\w+$")
@@ -42,6 +46,10 @@ type CommonInfo struct {
 	PluginPort    int
 	User          string
 	Pwd           string
+	DashboardAddr string
+	DashboardPort int
+	DashboardUser string
+	DashboardPwd  string
 }
 
 type TokenInfo struct {
@@ -67,6 +75,11 @@ type OperationResponse struct {
 	Message string `json:"message"`
 }
 
+type ProxyResponse struct {
+	OperationResponse
+	Data string `json:"data"`
+}
+
 type TokenSearch struct {
 	TokenInfo
 	Page  int `form:"page"`
@@ -163,8 +176,8 @@ func (c *HandleController) MakeHandlerFunc() gin.HandlerFunc {
 func (c *HandleController) MakeManagerFunc() func(context *gin.Context) {
 	return func(context *gin.Context) {
 		context.HTML(http.StatusOK, "index.html", gin.H{
-			"UserManage":                   ginI18n.MustGetMessage(context, "User Manage"),
-			"FrpsMultiuser":                ginI18n.MustGetMessage(context, "frps multiuser"),
+			"version":                      c.Version,
+			"FrpsPanel":                    ginI18n.MustGetMessage(context, "Frps Panel"),
 			"User":                         ginI18n.MustGetMessage(context, "User"),
 			"Token":                        ginI18n.MustGetMessage(context, "Token"),
 			"Notes":                        ginI18n.MustGetMessage(context, "Notes"),
@@ -188,6 +201,37 @@ func (c *HandleController) MakeManagerFunc() func(context *gin.Context) {
 			"PleaseInputAllowedSubdomains": ginI18n.MustGetMessage(context, "Please input allowed subdomains"),
 			"NotLimit":                     ginI18n.MustGetMessage(context, "Not limit"),
 			"None":                         ginI18n.MustGetMessage(context, "None"),
+			"ServerInfo":                   ginI18n.MustGetMessage(context, "Server Info"),
+			"Users":                        ginI18n.MustGetMessage(context, "Users"),
+			"Proxies":                      ginI18n.MustGetMessage(context, "Proxies"),
+			"TrafficStatistics":            ginI18n.MustGetMessage(context, "Traffic Statistics"),
+			"Name":                         ginI18n.MustGetMessage(context, "Name"),
+			"Type":                         ginI18n.MustGetMessage(context, "Type"),
+			"Domains":                      ginI18n.MustGetMessage(context, "Domains"),
+			"SubDomain":                    ginI18n.MustGetMessage(context, "SubDomain"),
+			"Locations":                    ginI18n.MustGetMessage(context, "Locations"),
+			"HostRewrite":                  ginI18n.MustGetMessage(context, "HostRewrite"),
+			"Encryption":                   ginI18n.MustGetMessage(context, "Encryption"),
+			"Compression":                  ginI18n.MustGetMessage(context, "Compression"),
+			"Addr":                         ginI18n.MustGetMessage(context, "Addr"),
+			"LastStart":                    ginI18n.MustGetMessage(context, "Last Start"),
+			"LastClose":                    ginI18n.MustGetMessage(context, "Last Close"),
+			"Version":                      ginI18n.MustGetMessage(context, "Version"),
+			"BindPort":                     ginI18n.MustGetMessage(context, "Bind Port"),
+			"KCPBindPort":                  ginI18n.MustGetMessage(context, "KCP Bind Port"),
+			"QUICBindPort":                 ginI18n.MustGetMessage(context, "QUIC Bind Port"),
+			"HTTPPort":                     ginI18n.MustGetMessage(context, "HTTP Port"),
+			"HTTPSPort":                    ginI18n.MustGetMessage(context, "HTTPS Port"),
+			"TCPMUXPort":                   ginI18n.MustGetMessage(context, "TCPMUX Port"),
+			"SubdomainHost":                ginI18n.MustGetMessage(context, "Subdomain Host"),
+			"MaxPoolCount":                 ginI18n.MustGetMessage(context, "Max Pool Count"),
+			"MaxPortsPerClient":            ginI18n.MustGetMessage(context, "Max Ports Per Client"),
+			"HeartBeatTimeout":             ginI18n.MustGetMessage(context, "Heart Beat Timeout"),
+			"AllowPorts":                   ginI18n.MustGetMessage(context, "Allow Ports"),
+			"TLSOnly":                      ginI18n.MustGetMessage(context, "TLS Only"),
+			"CurrentConnections":           ginI18n.MustGetMessage(context, "Current Connections"),
+			"ClientCounts":                 ginI18n.MustGetMessage(context, "Client Counts"),
+			"ProxyCounts":                  ginI18n.MustGetMessage(context, "Proxy Counts"),
 		})
 	}
 }
@@ -220,6 +264,7 @@ func (c *HandleController) MakeLangFunc() func(context *gin.Context) {
 			"ShouldCheckUser":       ginI18n.MustGetMessage(context, "Please check at least one user"),
 			"OperationConfirm":      ginI18n.MustGetMessage(context, "Operation confirm"),
 			"EmptyData":             ginI18n.MustGetMessage(context, "Empty data"),
+			"NotLimit":              ginI18n.MustGetMessage(context, "Not limit"),
 			"AllowedPorts":          ginI18n.MustGetMessage(context, "Allowed ports"),
 			"AllowedDomains":        ginI18n.MustGetMessage(context, "Allowed domains"),
 			"AllowedSubdomains":     ginI18n.MustGetMessage(context, "Allowed subdomains"),
@@ -228,6 +273,22 @@ func (c *HandleController) MakeLangFunc() func(context *gin.Context) {
 			"SubdomainsInvalid":     ginI18n.MustGetMessage(context, "Subdomains is invalid"),
 			"CommentInvalid":        ginI18n.MustGetMessage(context, "Comment is invalid"),
 			"ParamError":            ginI18n.MustGetMessage(context, "Param error"),
+			"Name":                  ginI18n.MustGetMessage(context, "Name"),
+			"Port":                  ginI18n.MustGetMessage(context, "Port"),
+			"Connections":           ginI18n.MustGetMessage(context, "Connections"),
+			"TrafficIn":             ginI18n.MustGetMessage(context, "Traffic In"),
+			"TrafficOut":            ginI18n.MustGetMessage(context, "Traffic Out"),
+			"ClientVersion":         ginI18n.MustGetMessage(context, "Client Version"),
+			"TrafficStatistics":     ginI18n.MustGetMessage(context, "Traffic Statistics"),
+			"online":                ginI18n.MustGetMessage(context, "online"),
+			"offline":               ginI18n.MustGetMessage(context, "offline"),
+			"true":                  ginI18n.MustGetMessage(context, "true"),
+			"false":                 ginI18n.MustGetMessage(context, "false"),
+			"NetworkTraffic":        ginI18n.MustGetMessage(context, "Network Traffic"),
+			"today":                 ginI18n.MustGetMessage(context, "today"),
+			"now":                   ginI18n.MustGetMessage(context, "now"),
+			"Proxies":               ginI18n.MustGetMessage(context, "Proxies"),
+			"NotSet":                ginI18n.MustGetMessage(context, "Not Set"),
 		})
 	}
 }
@@ -632,3 +693,50 @@ func (c *HandleController) MakeEnableTokensFunc() func(context *gin.Context) {
 		context.JSON(http.StatusOK, &response)
 	}
 }
+
+func (c *HandleController) MakeProxyFunc() func(context *gin.Context) {
+	return func(context *gin.Context) {
+		res := ProxyResponse{}
+		host := c.CommonInfo.DashboardAddr
+		port := c.CommonInfo.DashboardPort
+		requestUrl := "http://" + host + ":" + strconv.Itoa(port) + context.Param("serverApi")
+		request, _ := http.NewRequest("GET", requestUrl, nil)
+		username := c.CommonInfo.DashboardUser
+		if len(strings.TrimSpace(username)) != 0 {
+			password := c.CommonInfo.DashboardPwd
+			userAndPwd := []byte(username + ":" + password)
+			authorization := "Basic " + base64.StdEncoding.EncodeToString(userAndPwd)
+			request.Header.Add("Authorization", authorization)
+			log.Printf("Proxy to %s with Authorization %s", requestUrl, authorization)
+		}
+		response, err := http.DefaultClient.Do(request)
+
+		if err != nil {
+			res.Code = FrpServerError
+			res.Success = false
+			res.Message = err.Error()
+			log.Print(err)
+			context.JSON(http.StatusOK, &res)
+			return
+		}
+
+		res.Code = response.StatusCode
+		body, err := io.ReadAll(response.Body)
+
+		if err != nil {
+			res.Success = false
+			res.Message = err.Error()
+		} else {
+			if res.Code == http.StatusOK {
+				res.Success = true
+				res.Data = string(body)
+				res.Message = "Proxy to " + requestUrl + " success"
+			} else {
+				res.Success = false
+				res.Message = "Proxy to " + requestUrl + " error: " + string(body)
+			}
+		}
+		log.Printf(res.Message)
+		context.JSON(http.StatusOK, &res)
+	}
+}

pkg/server/controller/op.go

@@ -20,6 +20,7 @@ type HandleController struct {
 	Subdomains map[string][]string
 	ConfigFile string
 	IniFile    *ini.File
+	Version    string
 }
 
 func NewHandleController(config *HandleController) *HandleController {
@@ -47,13 +48,14 @@ func (c *HandleController) Register(rootDir string, engine *gin.Engine) {
 	}
 	group.Static("/static", filepath.Join(assets, "static"))
 	group.GET("/", c.MakeManagerFunc())
-	group.GET("/lang", c.MakeLangFunc())
+	group.GET("/lang.json", c.MakeLangFunc())
 	group.GET("/tokens", c.MakeQueryTokensFunc())
 	group.POST("/add", c.MakeAddTokenFunc())
 	group.POST("/update", c.MakeUpdateTokensFunc())
 	group.POST("/remove", c.MakeRemoveTokensFunc())
 	group.POST("/disable", c.MakeDisableTokensFunc())
 	group.POST("/enable", c.MakeEnableTokensFunc())
+	group.GET("/proxy/*serverApi", c.MakeProxyFunc())
 }
 
 func (c *HandleController) HandleLogin(content *plugin.LoginContent) plugin.Response {

pkg/server/server.go

@@ -5,7 +5,7 @@ import (
 	"encoding/json"
 	"errors"
 	"fmt"
-	"frps-multiuser/pkg/server/controller"
+	"frps-panel/pkg/server/controller"
 	ginI18n "github.com/gin-contrib/i18n"
 	"github.com/gin-gonic/gin"
 	"golang.org/x/text/language"