第5章 Web UI：OpenClaw的图形化管理中心

本章前置检查：
□ OpenClaw已成功部署并运行（完成第2章内容）
□ 了解CLI的基本操作
□ 有一台可以打开浏览器的电脑

本章预估总时长：4.5小时

本章难点提示：

5.2节（远程访问安全配置）是本章最需要谨慎对待的部分。不要跳过安全说明直接改配置，暴露端口的风险比你想象的大。 
5.3节（界面布局）偏视觉描述，建议一边阅读一边打开浏览器对照，实际操作中更容易记住。
5.4节（核心功能）中的工具调用可视化是日常调试利器，花点时间熟悉面板布局，能为你今后排查Agent行为节省大量时间。
5.6节（WebChat）是macOS专属功能，非macOS用户可跳过该节。

🎯 本章教学目标：熟练掌握OpenClaw Web UI的全部功能，能够通过图形化界面高效管理Agent、监控运行状态、调试Skill，并根据需求安全地配置远程访问。

5.1 Control UI概述：为什么需要Web界面

🎯 本节目标：理解Control UI和TUI的区别，知道何时用哪个。

预计时长：0.5小时

两个“UI”，各有所长

OpenClaw提供了两种用户界面：

界面	特点	适用场景
TUI（终端用户界面）	纯终端命令行，轻量、无需浏览器	服务器/SSH远程操作、无图形界面环境、快速单次查询
Control UI（Web界面）	图形化浏览器界面，支持鼠标操作	本地可视化管理、调试、日常使用

龙马注：很多人误以为TUI和Web UI是两个独立的东西，选了就不能换。其实它们共享同一个Gateway实例，TUI发送的消息会同步到Web端，反之亦然。你可以SSH到服务器跑TUI做运维，回到家打开浏览器用Web UI——两边的会话记录是通的，Agent状态也是通的。真正需要选择的是“初始化方式”，但初始化完成后两个界面都可以随时用。

官方文档指出：Gateway网关会在与WebSocket相同的端口上提供Control UI，默认地址http://<host>:18789/。Control UI是一个基于Vite + Lit构建的单页应用（Single Page Application, SPA），用于与AI代理进行聊天和管理Gateway网关。 

Control UI能做什么

Control UI是一个全功能的图形化管理工具，它提供：

功能	说明
可视化聊天	直接在浏览器里和AI对话，支持Markdown渲染、代码高亮
工具调用监控	实时显示Agent调用工具的每一步
会话管理	查看、切换、删除历史会话
Agent管理	查看所有Agent状态，切换当前使用的Agent
配置热更新	在UI中修改`~/.openclaw/openclaw.json`，无需手动编辑文件
Cron任务管理	可视化添加/编辑/启用/禁用定时任务
Skills管理	启用/禁用Skill、更新API密钥
执行审批	对需要用户确认的操作进行可视化审批
设备管理	跨设备访问时必须经过的设备配对和授权

从源码实现来看，Control UI采用控制器-视图模式（Controller-View Pattern），其中Controllers处理数据获取和状态变更，Views则是Lit模板，用于渲染聊天、概览和配置等不同标签页。这种架构使得UI响应迅速且易于维护。 

龙马注：我最喜欢的功能是“配置写入包含基于哈希的保护，以防覆盖并发编辑”。以前手动改openclaw.json时，经常忘记重启Gateway，改了等于白改。现在在Web UI里改，它会自动校验、自动重启对应模块，省了很多事。 

🛠️ 实践任务（本节）：打开终端，运行以下两个命令，对比体验：

bash

# TUI方式
openclaw message send --message "介绍一下你自己"

# 打开Web UI
openclaw dashboard

在Web UI中发送相同的问题，感受两者的区别。

💭 本节总结（不看书写3行）：

📊 用时记录：计划____min → 实际____min → 偏差原因：________

5.2 Control UI的安装与启动

🎯 本节目标：掌握Control UI的启动方式，能通过Web界面与Agent交互。

预计时长：1小时

5.2.1 基础启动：两种方法

方法一：初始化时直接选择Web端（适合全新安装）

如果你还没有完成openclaw onboard流程：

运行openclaw onboard
在“How do you want to hatch your bot?”步骤，用方向键选择“Hatch in Web UI”
按回车确认，后续会自动生成Web端访问链接（默认http://localhost:18789）
完成配置后，在浏览器中打开该地址即可进入Web管理面板

方法二：已完成TUI初始化，后续切换Web端（最常见）

如果你已经完成了TUI初始化，无需重新配置，直接通过以下步骤启动Web端：

确保Gateway正在运行：bash复制下载openclaw gateway start终端会输出：Gateway启动状态、Web UI访问地址和访问令牌
打开Web控制面板：bash复制下载openclaw dashboard这个命令会自动在默认浏览器中打开Web UI。如果你的环境是无头服务器（没有图形界面），它会显示SSH隧道提示和访问地址，方便你从本地机器转发访问。 如果浏览器没有自动打开，可以手动访问http://127.0.0.1:18789。

龙马注：方法二是我最常用的。TUI初始化走完了不代表你被“锁”在终端里。任何时候想切到Web界面，一条openclaw dashboard就够了。两种界面的会话是同步的——你在TUI里问的问题，Web端能看到对话历史；在Web端调好的Agent配置，TUI里也能直接生效。

5.2.2 Web UI的认证机制

Control UI默认要求认证。安装向导会默认生成一个Gateway token（即使在loopback上也会生成）。 

当你从浏览器访问Control UI时：

访问方式	认证要求
本地访问（127.0.0.1/localhost）	通常自动批准
Tailnet/LAN/公网访问	需要设备配对（显式批准）

首次连接时的设备配对：

当你从新的浏览器或设备连接到Control UI时，Gateway会要求进行一次性配对批准。你会看到：

disconnected (1008): pairing required

此时需要在终端执行：

bash

# 列出待处理的配对请求
openclaw devices list

# 按请求ID批准
openclaw devices approve <requestId>

注意：直接本地loopback连接（127.0.0.1/localhost）会被自动批准；但Tailnet和LAN浏览器连接即使来自同一台机器，仍然需要显式批准。每个浏览器配置文件都会生成唯一的设备ID，切换浏览器或清除浏览器数据需要重新配对。 

认证方式：

Control UI支持多种认证方式，通过WebSocket握手时传递以下参数完成认证：

connect.params.auth.token：共享密钥token方式
connect.params.auth.password：密码方式
Tailscale Serve身份头：当gateway.auth.allowTailscale: true时自动识别
trusted-proxy身份头：当gateway.auth.mode: "trusted-proxy"时使用

安装向导默认会创建共享密钥auth，并通常会生成一个Gateway token（即使在loopback上）。openclaw dashboard命令可以通过URL片段一次性传递token用于初始引导，而Control UI会将其保存在当前浏览器标签页会话对应的sessionStorage中，而不是localStorage。 

5.2.3 局域网访问配置

默认情况下，Gateway只监听127.0.0.1（localhost），这意味着它只接受来自本机的请求，拒绝外部局域网设备的访问。

要让同Wi-Fi下的其他设备（如手机、平板）访问Control UI：

修改配置文件~/.openclaw/openclaw.json：json复制下载{ “gateway”: { “port”: 18789, “bind”: “lan” } }bind支持的值：loopback（默认，仅本机）、lan（局域网）、tailnet（Tailscale网络）、all（所有接口）。
关键安全提醒：如果需要通过局域网IP（如http://192.168.1.100:18789）访问，必须显式设置gateway.controlUi.allowedOrigins：json复制下载{ “gateway”: { “controlUi”: { “allowedOrigins”: [ “http://localhost:18789”, “http://127.0.0.1:18789”, “http://192.168.1.100:18789” // 你的局域网IP ] } } }如果不设置allowedOrigins，Gateway会默认拒绝启动，防止意外暴露。 设置时需填写完整origin（包括协议和端口）。
重启Gateway：bash复制下载openclaw gateway restart

访问认证：局域网（LAN）浏览器连接仍然需要显式的设备批准，即使它们来自同一台机器。 

龙马注：bind: "lan"是给局域网内其他设备访问的，不是给公网的。别搞混。而且改完一定要配置allowedOrigins，否则Gateway会拒绝启动，这个坑我踩过一次。局域网访问还需要设备配对，第一次访问时在终端敲一下openclaw devices list就能看到待批准的请求ID。

⚠️ 安全警告：Control UI是一个管理界面，拥有完整的聊天、配置和命令审批权限。不要将其直接暴露在公网上。如果需要远程访问，请走安全的隧道方案（见5.2.3节）。UI将token存储在sessionStorage中，并在加载后从URL中移除，以提高安全性。 

5.2.4 自定义Control UI构建（高级）

如果你维护了本地化或自定义的控制面板构建，可以将gateway.controlUi.root指向一个包含已构建静态资源和index.html的目录：

bash

mkdir -p "$HOME/.openclaw/control-ui-custom"
# 将你的静态文件复制到该目录

配置示例：

json

{
  "gateway": {
    "controlUi": {
      "enabled": true,
      "root": "$HOME/.openclaw/control-ui-custom"
    }
  }
}

重启Gateway后重新打开仪表盘即可生效。 

✏️ 即时自测：局域网其他设备无法访问Control UI，应该依次检查哪几项？

🛠️ 实践任务（本节）：

运行openclaw dashboard，确认浏览器中控制台能正常加载
如果终端提示需要配对，执行openclaw devices list和openclaw devices approve完成首次批准
在另一台设备（如手机）上尝试通过局域网IP访问Control UI，记录配置步骤

💭 本节总结（不看书写3行）：

📊 用时记录：计划____min → 实际____min → 偏差原因：________

✏️ 自测答案：检查(1)Gateway是否已启动；(2)gateway.bind是否设为lan而非默认的loopback；(3)Control UI的allowedOrigins是否包含访问设备的IP；(4)是否过了设备配对流程。

5.3 Control UI界面布局详解

🎯 本节目标：熟悉Control UI的三栏布局，知道每个区域有什么功能。

预计时长：1小时

Control UI采用三栏式布局，从左到右依次是：左侧边栏（Sidebar）、中间聊天区（Main Chat）、右侧面板（Panel）。 

5.3.1 左侧边栏（Sidebar）

区块	功能说明
New Chat	新建对话。点击后可设置Model、Thinking级别、Temperature、Max Tokens等参数
Sessions	历史会话列表。支持右键重命名、删除、拖拽排序
Settings	全局设置入口
Status	Gateway系统状态监控

5.3.2 中间主区域（Main Chat）

这是与Agent交互的主要区域：

消息展示区：显示对话历史，支持Markdown格式渲染和代码块高亮
底部输入框：输入消息的地方
- Ctrl+Enter：换行（区别于单Enter发送）
- @提及：可引用工具或上下文内容
- 支持文件上传（图片、文档等）——Agent可以读取上传的文件内容进行分析

5.3.3 右侧面板（Panel）

右侧面板包含三个标签页：

标签页	内容
Tools	可用工具列表，显示每个工具的状态（可用/受限/禁用）
Context	当前会话的上下文信息，包括Agent配置、记忆状态等
Usage	Token用量统计，帮助你控制成本

语言本地化：Control UI可在首次加载时根据你的浏览器语言环境进行本地化，你也可以稍后通过Access卡片中的语言选择器进行覆盖。支持的语言环境包括en、zh-CN、zh-TW、pt-BR、de、es；非英文翻译会在浏览器中按需懒加载，缺失的翻译键会回退为英文。所选语言环境会保存在浏览器存储中，并在未来访问时复用。 

龙马注：Control UI的操作逻辑和主流聊天工具很像，没什么上手门槛。真正值钱的是右侧那两栏——Tools让你一眼看到Agent手里有什么牌，有没有被禁用；Usage让你知道这次对话烧了多少token。我每次调完Skill都会瞄一眼Usage，如果token消耗异常高，说明Skill的工作流设计有问题，需要优化。

🛠️ 实践任务（本节）：打开Control UI，依次点击每个标签页，记录你看到的内容。然后创建一个新会话，在右侧Panel中观察Tools和Context的变化。

💭 本节总结（不看书写3行）：

📊 用时记录：计划____min → 实际____min → 偏差原因：________

5.4 核心功能详解

🎯 本节目标：掌握Control UI中最常用的功能，能够独立完成对话、工具监控、会话管理和配置热更新。

预计时长：1小时

5.4.1 对话交互与工具调用可视化

Control UI最核心的功能是聊天交互。当你在输入框中发送消息后：

Gateway将消息路由到对应的Agent
Agent处理请求，判断是否需要调用工具
UI会实时显示工具调用过程：
- 工具名称
- 传入参数
- 执行结果
- 耗时统计
最终回复以Markdown格式流式显示（逐词/逐句渲染）

这种“流式显示工具调用卡片”的方式在调试Skill和工作流时极为实用——你能清楚地看到Agent每一步做了什么，而不是只看到一个最终的“黑箱”回复。 

5.4.2 会话管理

Control UI的左侧边栏维护了所有历史会话列表：

操作	方法
查看历史会话	点击左侧Sessions列表中的任一会话
新建会话	点击New Chat按钮
重命名会话	右键点击会话 → 重命名
删除会话	右键点击会话 → 删除
调整顺序	拖拽会话重新排序

会话与Agent的关系：每个会话绑定一个Agent实例。通过切换会话，你可以在不同的上下文（不同的Agent、不同的话题）之间快速跳转。

龙马注：多会话管理是Control UI的天赋技能。TUI虽然也能切会话，但做不到这样的可视化体验。我日常用法是：为每个研究课题保持一个独立会话，比如“因子挖掘-0251”“策略回测-0402”，半年后回来追溯思路时，内容清晰可见。

5.4.3 配置管理（Settings）

Control UI支持可视化编辑openclaw.json配置文件：

点击左下角的“Settings”进入配置页面
可以查看、编辑JSON格式的配置文件
修改后点击“Apply”，Gateway会自动校验配置合法性，如果通过则应用并重启相关模块 
如果不同步，刷新浏览器再次进配置页时能看到这轮的修改内容

龙马注：config.set、config.patch和config.apply这些RPC接口在后台做的事，Web UI把复杂度全包住了。以前手动改配置漏括号、忘引号是家常便饭，现在Web UI会帮你校验，校验不通过会提示，防止你把自己玩挂掉。

5.4.4 多Agent可视化管理

Control UI提供多Agent的可视化管理能力：

Agent列表：显示所有已注册Agent及其名称、类型、工作区位置 
当前Agent切换：在聊天界面中快速切换当前对话绑定的Agent（下拉选择或通过会话切换器）
Agent状态监控：查看每个Agent的运行状态（是否在线、处理中、空闲等）

5.4.5 系统状态与诊断

Control UI提供多个诊断功能：

Status面板：Gateway健康状态、内存占用、运行时长，以及每个渠道的连接状态和QR登录信息
Debug面板（可通过URL参数激活）：健康检查、模型快照、事件日志、手动RPC调用
Update面板：执行包更新并重启Gateway

✏️ 即时自测：调试一个不工作的Skill时，控制UI的哪个面板最能帮你定位问题？

🛠️ 实践任务（本节）：在Control UI中完成以下任务：

创建一个新的会话，切换到一个不同的Agent
发送一个需要调用工具的消息，观察右侧Tools区域的变化和消息流中出现的工具卡片
进入Settings，浏览openclaw.json的内容，不做修改
查看Status面板，确认Gateway和各渠道的运行状态

💭 本节总结（不看书写3行）：

📊 用时记录：计划____min → 实际____min → 偏差原因：________

✏️ 自测答案：工具调用可视化——它会把Agent调用工具的每一步都显示成可读的事件卡片，你一眼就能看出是Agent没找到工具、工具执行失败还是工具返回了错误数据。

5.5 高级主题：Control UI的远程安全访问

🎯 本节目标：学会在不暴露安全风险的前提下，通过Tailscale或Cloudflare Tunnel实现对Control UI的远程访问。

预计时长：1小时（含5.2节相关内容整合）

5.5.1 为什么不能直接暴露端口

当你需要从公网访问Control UI时，最“直觉”的想法是：修改gateway.bind: "all"，监听0.0.0.0:18789，然后通过路由器做端口转发。但这样做极其危险。

2024年8月，安全研究人员披露了一个被称为“0.0.0.0 Day”的重大漏洞，影响所有主流浏览器——Chrome、Firefox、Safari。恶意网站可以绕过浏览器安全限制，直接与本地网络中的服务互动。如果你有服务绑定了0.0.0.0，远程攻击者就能直接访问它。 

仅以Ollama为例：2024年11月有超过3,000台服务器暴露在公网上且无认证；到2025年，这个数字飙升至超过10,000台。这些暴露的服务器导致数据泄露、模型被窃取甚至远程代码执行。 

OpenClaw官方警示：“bind: \"loopback\" unless you’re sure you need remote exposure.”“不暴露端口，反向代理 + Tunnel + Zero Trust才是现代做法。” 

一个被攻破的Gateway可能带来：API Keys受损、配置文件和本地文件被读取，甚至从暴露的服务进入内网进行横向移动。 

5.5.2 推荐方案一：Tailscale Serve（官方推荐）

Tailscale为OpenClaw提供了原生的安全访问方案。核心架构：Gateway只监听loopback，让Tailscale Serve为其做反向代理，身份认证和安全管控由Tailscale的Zero Trust机制处理。

集成Serve模式配置（推荐用于个人远程访问）：

json

{
  "gateway": {
    "bind": "loopback",
    "tailscale": {
      "mode": "serve"
    },
    "auth": {
      "allowTailscale": true
    }
  }
}

启动Gateway后，访问https://<magicdns>/（或你配置的gateway.controlUi.basePath）即可。Tailscale Serve会通过身份头满足Control UI/WebSocket认证，无需额外token/password。 

5.5.3 推荐方案二：Cloudflare Tunnel + Zero Trust

如果你不想用Tailscale，Cloudflare Tunnel是另一个成熟方案。

核心架构：Gateway保持bind: loopback（只监听本机，安全边界明确）→ Cloudflare Tunnel负责公网入口 → Cloudflare Access做Zero Trust登录认证 → 只有经过Access的请求才能通过Tunnel到达Gateway。 

Step 1：保持Gateway默认配置

bash

openclaw gateway start

输出应显示：Gateway: bind=loopback (127.0.0.1), port=18789 

Step 2：安装cloudflared

bash复制下载

# macOS
brew install cloudflared
# 其他系统：https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/

Step 3：运行Tunnel

bash

cloudflared tunnel --url http://127.0.0.1:18789

你会得到一个https://xxx.trycloudflare.com的公网地址。

Step 4：添加Access认证（强烈推荐）

登录Cloudflare Zero Trust Dashboard
配置Access Policy，要求访问者通过SSO（Google/GitHub/邮件验证码）登录
只有通过认证的请求才能进入Tunnel

Step 5（可选）：绑定自定义域名

创建Cloudflare Tunnel，配置Ingress规则指向http://127.0.0.1:18789
在DNS面板配置CNAME记录指向Tunnel
在Access Policy中绑定该域名

龙马注：如果只是临时远程看几眼，用cloudflared tunnel --url http://localhost:18789就够了，会生成一个一次性URL。如果你打算长期用，建议走完整的Access Policy配置——花10分钟配置好，后面一劳永逸。

5.5.4 方案对比与选型

方案	适用场景	配置难度	安全性	成本
Tailscale Serve	个人多设备访问（笔记本、手机、iPad）	低（原生集成）	高	免费（个人版）
Cloudflare Tunnel	公开分享或团队访问	中等（需注册Cloudflare）	最高	免费（有使用限制）
SSH隧道	临时访问	低	中（依赖SSH）	免费
直接暴露端口	严禁使用	低	极低	免费但代价高昂

SSH隧道备用方案（最简单、无需额外账号）：

本地机器执行：

bash

ssh -N -L 18789:127.0.0.1:18789 user@your-server

然后在本地浏览器访问http://127.0.0.1:18789即可。

龙马注：SSH隧道是我的“紧急备用方案”——离开前提前把SSH连好，在外边随时能连回家里服务器看监控。不需要注册任何账号，也符合Zero Trust原则（SSH本身提供加密和认证）。缺点是网络不好的时候容易掉线，不适合长期稳定访问。

🔐 安全最佳实践总结：

永远不要将gateway.bind设为all（0.0.0.0）直接暴露端口
优先使用Tailscale Serve（最简单、官方推荐）
如果必须走公网，使用Cloudflare Tunnel + Access Policy
无论使用哪种远程访问方式，都要保护浏览器存储的token：不随随便便把device approval委托给不信任的机器
定期用openclaw devices list查看已批准的设备，删除不再使用的

只要Gateway保持bind: loopback，外界无法直接接触你的AI Agent。唯一的外部入口是安全隧道+身份认证，风险可控。 

🛠️ 实践任务（本节）：选择一种远程访问方案（推荐Tailscale Serve），完成配置并测试从另一台设备（如手机流量）访问Control UI。

💭 本节总结（不看书写3行）：

📊 用时记录：计划____min → 实际____min → 偏差原因：________

5.6 WebChat：嵌入式聊天客户端（macOS专有功能）

🎯 本节目标：了解macOS菜单栏WebChat应用的功能和使用场景。

预计时长：0.5小时

什么是WebChat？

WebChat是OpenClaw的macOS菜单栏应用，它将聊天UI嵌入为原生SwiftUI视图。该应用连接到Gateway网关，默认使用所选智能体的主会话，同时提供会话切换器以便切换到其他会话。 

安装与启动

与Gateway捆绑：macOS版本的OpenClaw安装包中已包含WebChat应用
手动启动：从Lobster菜单或应用目录启动
调试模式：运行dist/OpenClaw.app/Contents/MacOS/OpenClaw --webchat可在测试时自动打开WebChat窗口

主要功能

功能	说明
原生SwiftUI界面	比浏览器Control UI更轻量，与macOS系统风格一致
菜单栏集成	可从菜单栏快速唤出对话窗口，不占用Dock空间
会话切换	内置会话切换器，支持在主会话和其他会话间快速切换
本地模式	直接连接到本地Gateway WebSocket

与Control UI的关系

WebChat本质上是一个“专用于聊天”的轻量客户端，而Control UI是一个完整的管理面板（包含配置、监控、审批等）。两者各有所长：

日常对话：用WebChat（macOS下更便捷）
系统管理/调试：用Control UI（功能更全）

WebChat会默认使用所选Agent的主会话。由于这一特性，它在一个统一的界面中为你提供了该Agent的跨渠道上下文。类似地，Control UI也能让WebChat作为一个内置频道。 

龙马注：WebChat只适用于macOS用户。如果你用Windows或Linux，浏览器里开着Control UI用聊天功能是一样的效果，不需要特别羡慕macOS用户。另外，openclaw dashboard命令在Windows的WSL2 Ubuntu终端输入后，其实也能自动唤起宿主机浏览器——Gateway在WSL2内监听端口时，浏览器访问localhost:18789一样能打开Control UI，和macOS体验差不多。简单来说，WebChat只是个native皮肤的快捷方式，核心能力Control UI里都有。

🛠️ 实践任务（本节）：如果你在使用macOS，找到并打开WebChat应用，发送一条消息，观察它与浏览器Control UI聊天界面的异同。

💭 本节总结（不看书写3行）：

📊 用时记录：计划____min → 实际____min → 偏差原因：________

5.7 Control UI实战训练（一节课）

🎯 本节目标：通过一系列实战任务，巩固本章所学内容。

预计时长：0.5小时

任务清单

任务1：在Control UI中新建一个会话，完成一次完整的对话交互

点击“New Chat”
发送消息：“帮我写一首关于夏天的诗”
观察流式输出效果

任务2：上传一个本地文件，让AI分析文件内容

点击输入框旁边的文件上传图标
选择一个文本文件（如test.txt）
发送消息：“请总结这个文件的主要内容”

任务3：查看某个工具调用的完整执行过程

发送一条需要调用工具的消息（如“查询北京的天气”或“搜索当前AI新闻”）
在消息流中观察展开的工具卡片：工具名称、输入参数、执行结果和耗时
如果工具执行失败，检查右侧Tools区域确认该工具是否被禁用

任务4：切换不同Agent，观察行为差异

打开左侧Sessions列表，切换到一个不同的Agent（如果没有多个Agent，可以先按第3章快速创建一个）
发送相同的问题，对比回复风格和内容的差异

任务5：查看Token用量统计，分析成本消耗

发送几条消息
打开右侧“Usage”面板
查看本次会话的Token消耗（输入Token数、输出Token数和总计）
尝试提出一个消耗Token更多的问题（如“请把这段文字翻译成5国语言”），观察用量变化

✏️ 即时自测：任务3中，如果工具调用没有显示卡片，可能是什么原因？

🛠️ 实践任务（本节）：完成以上5个任务，需要截图的话可以自行截屏保存并将成果保存到chapter5_practice_screenshots文件夹。

💭 本节总结（不看书写3行）：

📊 用时记录：计划____min → 实际____min → 偏差原因：________

✏️ 自测答案：(1)Agent没有调用工具的意图（消息内容未触发）；(2)所需的Skill未安装或被禁用；(3)Agent在AGENTS.md中没有被授权使用该工具，这通常对应右侧Tools面板中该工具显示为灰色或不可用状态。

第5章参考资料与扩展阅读

OpenClaw Web UI官方文档（英文） https://docs.openclaw.ai/web
OpenClaw Web UI官方文档（中文） https://docs.openclaw.ai/zh-CN/web
Control UI详细说明（官方文档） https://docs.openclaw.ai/zh-CN/web/control-ui
仪表盘使用指南（官方文档） https://docs.openclaw.ai/zh-CN/web/dashboard
WebChat for macOS（官方文档） https://docs.openclaw.ai/web/webchat
Tailscale Serve配置详解（官方文档） https://docs.openclaw.ai/zh-CN/gateway/tailscale
安全配置参考（官方文档） https://docs.openclaw.ai/zh-CN/gateway/security
OpenClaw从TUI切换到Web端完整方案（CSDN） https://blog.csdn.net/mimica/article/details/160119275
使用Cloudflare Tunnel安全远程存取OpenClaw控制台 https://www.frank.hk/posts/2026/secure-remote-access-openclaw-cloudflare-tunnel/
实战指南：公网上安全使用OpenClaw Gateway https://javaforall.net/254993.html
解决OpenClaw Gateway仪表盘登录问题——CORS与设备配对实战 https://blog.csdn.net/chenwiehuang/article/details/160480206
Devices CLI设备管理命令 https://docs.openclaw.ai/cli/devices

本章综合实践（第5章完成后）

任务：完成以下所有检查项，并记录输出。

Control UI能正常打开，并能通过聊天界面与Agent交互
能成功从TUI初始化切换到Web UI（如适用）
理解Control UI的三栏布局，能说出每个区域的主要功能
能在Control UI中查看工具调用过程、切换会话、查看Usage统计
完成了5.7节的5个实战训练任务
（可选）配置了Tailscale Serve或Cloudflare Tunnel，实现安全的远程访问

完成后，保存一个截图，命名为chapter5_control_ui_success.png（展示Control UI正常运行的界面）。如果配置了远程访问，额外保存配置文件和访问过程的说明，命名为chapter5_remote_access_notes.md。

龙马的评审：

“第5章安全配得很全，但有两点想补充分享。其一，如果是用Cloudflare Tunnel，cloudflared tunnel跑起来记得把URL中的token记好，默认是一串随机字符串，建议直接在Cloudflare Zero Trust上申请一个固定子域名。allowedOrigins配置时别忘了加上Cloudflare的HTTPS域名，不然跨域会报错。其二，关于设备配对，每个浏览器都视为不同设备。如果你打算同时用Chrome、Safari和手机访问，每台设备都要走一次openclaw devices approve流程——批准过的请求在openclaw devices list里可以看到，用完后一定记得openclaw devices revoke掉，安全审计习惯要从头建立。”

沈飞的评审：

“Control UI的bind: \"lan\"+allowedOrigins在量化实盘部署时我需要再三强调风险：如果你是7×24跑策略的服务器，Web UI只是一个偶尔用来调参数的辅助界面，不值得为它承担风险。最佳的远程方式还是通过SSH隧道或Tailscale，策略服务器不直接暴露任何端口是量化底线。另外，在量化场景里可以聊聊Control UI的实际使用场景：多Agent团队跑起来以后，我会在Control UI里专门留一个‘监控会话’，每个交易日开盘时打开看风控告警和交易执行流水。结合右侧Usage面板统计Token消耗，对优化策略调用的API成本很有用。最后建议本章在5.4节增加一个小段落：如何利用/system面板调取Gateway性能和存储状态——运维可观测性对长时间跑实盘的Agent系统是硬门槛。”

下一章预告：第6章 OpenClaw进阶配置与性能优化 —— 你将学会如何使用子Agent（Spawn机制）实现复杂任务委托，配置Cron定时任务让Agent在指定时间自动执行任务并进行多渠道精细化路由，还涉及系统层面的Token消耗追踪、记忆清理和Gateway状态监控——让你的多Agent系统在生产环境中长久稳定运行。

文章版权归作者所有，未经允许请勿转载。

THE END