在完成了 Go 后端的硬核逻辑后，压力来到了前端。Mole 的前端并没有复杂的全家桶，而是回归本质，将精力集中在与 Wails 3 的运行时（Runtime）交互上。
本文将重点拆解：前端如何调用后端服务，以及如何处理“激励视频”这种跨端异步逻辑。
一、 桥梁：引入运行时与绑定 在 Wails 3 中，前端不再需要通过 HTTP 接口访问后端，而是通过自动生成的 Bindings。在 main.js 中，这几行代码是整个应用的灵魂：
import { Events, Browser } from "@wailsio/runtime"; // 由 Wails 3 自动生成的绑定代码 import { HandleStopFrp, HandleStartFrp, GetDomainURL, } from "../bindings/mole/MoleService"; Events: 核心组件，用于监听后端的主动推送到前端的消息（如日志、状态变更）。
HandleStartFrp 等: 它们看起来是 JS 函数，但执行时会直接触发 Go 后端对应 Service 的方法。
二、 核心实战：扫码激励的异步闭环 Mole 的核心业务是“看广告换带宽”。这就带来一个挑战：用户点击“连接”后，由于没看广告，流程会中断并弹出小程序码。前端如何知道用户什么时候看完了广告？
拦截与判断
我们不能在前端写 if(adWatched)，因为前端代码是透明的。逻辑必须在 Go 后端：如果后端判断该用户需要看广告，HandleStartFrp 会返回特定的状态码（如 2）。 状态机：从“连接中”到“等待验证”
看看这段核心的 connect 逻辑： async function connect() { const hint = document.getElementById("hint"); try { const res = await HandleStartFrp(); // 发起 Go 调用 if (res.code === 1) { // 情况 A: 验证通过，直接分配域名并连接 document.getElementById("subdomain-url").innerText = res.content; setUIConnected(true); addLog("成功连接到服务器", "system"); } else if (res.code === 2) { // 情况 B: 触发激励逻辑，弹出小程序码 showAdModal(res.content); // res.content 包含小程序码 Base64 或 URL addLog("请扫码完成验证后继续", "info"); // 【关键】注册一次性监听事件，等待后端“发令枪” const unsubscribe = Events.On("ad-status", (data) => { closeAdModal(); // 关闭弹窗 unsubscribe(); // 销毁监听，防止重复触发 if (data.status === "done") { addLog("验证成功，正在连接...", "system"); connect(); // 再次发起连接请求，此时后端将通过验证 } else { // 处理异常（如超时、未看完） hint.innerText = data.message; hint.classList.add("error-shake"); addLog(`验证未完成: ${data.message}`, "error"); setUIConnected(false); } }); } } catch (err) { setUIConnected(false); } } 三、 为什么这样设计？（经验总结） 安全性（Security First）：
连接逻辑的“入场券”完全由 Go 后端控制。前端只是一个 UI 展示层，即便用户强行修改 JS 调用 connect()，如果后端没有收到广告系统的回调信号，依然不会分配 frp 配置。 订阅-发布模式（Events）：
使用 Events.On 而不是轮询（Polling）。当用户在手机上看完广告，后端 API 收到微信的回调后，会通过 app.Emit(“ad-status”, …) 通知前端。这种实时性让用户体验非常丝滑——手机看完，电脑屏幕上的弹窗瞬间自动消失并连接。 UI 细节：单页面布局（Zero-Config UI）：
由于 Mole 的界面追求极致精简，所有的 CSS 样式、HTML 布局和 JS 逻辑都高度集成在 index.html 和 main.js 中。对于这类工具软件，减少资源加载链比追求组件化更重要。 四、 结语 前端在 Wails 3 项目中扮演的是 “状态反馈器” 的角色。通过 Bindings 调用 Go 方法，通过 Events 监听实时动态。
...