添加自建 Web 控制台的文档 (#217)

* 添加自建 Web 控制台的文档

Added instructions for self-hosting EasyTier Web Console, including service architecture and common parameters.

* 添加注意事项

Add warning about default admin account in web console

* Update web console documentation for default accounts

* Document self-hosted web console configuration

Added documentation for self-hosted web console setup and usage.

* Add files via upload

* Update images in web-console documentation

* Update image syntax and correct username placeholder

* Update guide/network/web-console.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update guide/network/web-console.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: Tangent-90C

assets/web-api-host-config.png

@@ -56,3 +56,69 @@ Configure
 ![alt text](/assets/web-device-run-network.png)
 
 The subsequent configuration steps are the same as configuring a program with a GUI.
+
+
+# Self-Hosted Web Console
+
+EasyTier supports self-hosting a web console for managing EasyTier nodes. The EasyTier Web Console adopts a separated front-end and back-end architecture, consisting of 3 services in design:
+
+1. Web Frontend (default port 11211)
+2. Web API Backend (default port 11211)
+3. Configuration Delivery Service (default port 22020, UDP protocol)
+
+The web frontend and web API backend are bound to the same port by default, and the configuration delivery service is part of the web API backend.
+
+EasyTier's web console has 2 versions:
+- `easytier-web` (web API backend only)
+- `easytier-web-embed` (web frontend + web API backend)
+
+Below is an example of deploying both front-end and back-end using `easytier-web-embed`:
+
+```sh
+./easytier-web-embed \
+    --api-server-port 11211 \
+    --api-host "http://127.0.0.1:11211" \
+    --config-server-port 22020 \
+    --config-server-protocol udp
+```
+
+If no content is displayed after running, the deployment is successful.
+
+Here are the descriptions of common parameters for `easytier-web-embed`:
+- `--api-server-port`: Port for the web front-end and back-end
+- `--api-host`: Specify the access address of the web API backend in the web frontend. Without this setting, you can only manually specify the API backend address in the web frontend.
+- `--config-server-port`: Port of the configuration delivery service for easytier-core connection
+- `--config-server-protocol`: Protocol of the configuration delivery service for easytier-core connection (tested to support tcp, udp, ws)
+- `--web-server-port`: Additional port for listening to the web frontend (note: this setting is not affected by --no-web)
+- `--no-web`: Do not run the web frontend (disable the front-end function on the --api-server-port)
+
+After that, open the web console at `http://127.0.0.1:11211` to see the page.
+
+![alt text](/assets/web-api-host-config.png)
+
+Click `Register` to create an account. If the verification code fails to load, your `--api-host` setting is incorrect.
+
+![alt text](/assets/web-no-captcha.png)
+
+::: tip Note
+
+You can use the official EasyTier frontend `https://easytier.cn/web` to access your self-hosted Web API backend without needing to self-host the frontend.
+
+:::
+
+## Connecting to the Self-Hosted Web Console
+
+Previously, we set up the web console locally with the configuration delivery port 22020 and UDP protocol. The command for EasyTier to connect to the self-hosted console is:
+
+```sh
+./easytier-core -w udp://127.0.0.1:22020/<your_username_on_the_self-hosted_web_console>
+```
+
+Subsequent usage is the same as the official console.
+
+::: tip Attention
+
+The web console has two default accounts. The usernames and passwords are `admin` and `user` respectively. Although these are regular accounts, their existence should still be noted.
+
+:::
+

assets/web-no-captcha.png

@@ -56,3 +56,70 @@ sudo ./easytier-core -w <你的用户名> --machine-id abc123
 ![alt text](/assets/web-device-run-network.png)
 
 接下来的配置步骤与之前配置带 GUI 的程序相同。
+
+
+# 自建 Web 控制台
+
+EasyTier 支持自建 Web 控制台来管理 EasyTier 节点，EasyTier Web 控制台采用前后端分离的架构，在设计上共有3个服务
+
+1. Web 前端（默认11211端口）
+2. Web API 后端（默认11211端口）
+3. 配置下发端（默认22020端口，UDP协议）
+
+其中，web前端与web api后端默认绑定在同一端口，配置下发端则是web api后端的一部分。
+
+EasyTier的web控制台有2个版本
+- `easytier-web`（仅web api后端）
+- `easytier-web-embed`（web前端 + web api后端）
+
+下面举一个用`easytier-web-embed`前后端同时部署的例子
+
+```sh
+./easytier-web-embed \
+    --api-server-port 11211 \
+    --api-host "http://127.0.0.1:11211" \
+    --config-server-port 22020 \
+    --config-server-protocol udp
+```
+
+运行后若无任何内容显示则成功。
+
+下面是`easytier-web-embed`常用参数的说明：
+- `--api-server-port`: web前后端的端口
+- `--api-host`: 在web前端指定web api后端的访问地址（不设你就只能在web前端手动指定api后端地址）
+- `--config-server-port`: 用于easytier-core连接的配置下发端的端口
+- `--config-server-protocol`: 用于easytier-core连接的配置下发端的协议（实测支持 tcp, udp, ws）
+- `--web-server-port`: 额外监听web前端的端口（注：此设置不受 --no-web 影响）
+- `--no-web`: 不运行web前端（关闭 --api-server-port 端口的前端功能）
+
+之后打开 Web 控制台 `http://127.0.0.1:11211`就可以看到这个页面。
+
+![alt text](/assets/web-api-host-config.png)
+
+点击`Register`注册一个账户，若刷新不出验证码则说明你`--api-host`设置有误。
+
+![alt text](/assets/web-no-captcha.png)
+
+::: tip 提示
+
+你可以用EasyTier官方前端`https://easytier.cn/web`访问你的Web API后端，无需自建前端。
+
+:::
+
+
+
+## 接入自建 Web 控制台
+
+前面我们本地搭建好了web控制台，并且配置下发端口为22020，协议UDP，那么easytier接入自建控制台的指令就是
+
+```sh
+./easytier-core -w udp://127.0.0.1:22020/<你在自建web控制台上的用户名>
+```
+
+接下来的用法就和官方控制台一样了。
+
+::: tip 注意
+
+Web 控制台有了两个默认账户，用户名与密码分别为`admin`和`user`。虽然这属于普通账户，但仍需留意其存在。
+
+:::