# 16. Web 端与手机端：离开电脑也能看着 AI 干活

> CC-Panes 不只是桌面应用。它内置一个 **Web 服务**（cc-panes-web），在浏览器里打开的就是和桌面端同一套界面、同一批数据、同一批终端会话；再配合 **手机 App**（Android），你躺在沙发上也能看 Claude 跑到哪了、卡住了就在手机上敲两下继续。

## 什么时候用

- 电脑上挂着几个长任务，人不在工位，想在手机 / 平板 / 另一台电脑上**看进度、随手接管**
- 想用浏览器当 CC-Panes 的入口（比如在 Mac 上远程操作 Windows 主机上的会话）
- AI 半夜跑任务问你要个确认，掏出手机点一下就行，不用回电脑前

核心是**多端共享同一批会话**：桌面端、浏览器、手机看到的是同一批 PTY 终端，任何一端输入，其它端实时看到。

---

## Web 端

### 一步开启

打开桌面端 **设置 → Web**：

1. 勾选 **「启动时启用 Web 端」**（或直接点底部的 **启动** 按钮）
2. 端口默认 **18080**，一般不用改
3. 点 **打开 Web**，浏览器里就是完整的 CC-Panes

只在本机浏览器用的话，到这就完了——不需要密码，服务只监听 `127.0.0.1`，外部访问不到。

> 设置页还有个「启动后自动打开浏览器」开关，适合把 Web 端当默认入口的人。改了端口 / 密码 / 局域网设置后，点 **重启** 才生效。

### 让局域网里的其它设备访问

想让手机或别的电脑连上来，必须先过安全门槛（不设密码就是不给开，这是硬性约束）：

1. 打开 **「账号密码登录」** 开关，账号默认 `admin`
2. **设置密码**并保存
3. 勾选 **「允许局域网访问」**（前两步没完成时这个勾选框是灰的）
4. 点 **重启**，服务改为监听 `0.0.0.0`
5. Windows 防火墙放行 18080 端口入站
6. 其它设备浏览器访问 `http://<你的电脑IP>:18080`，输入账号密码登录

可选的收紧项：

- **IP 白名单**：留空允许任意局域网客户端，填了就只放行名单里的 IP。
- **远程只读模式**：远程登录的会话只能看不能操作（本机浏览器不受影响）。如果开了只读又希望手机能真正敲终端，再打开子开关 **「允许已登录的远程会话写入」**。
- **空闲锁屏**：页面闲置 N 分钟后要求重新登录。

### 出了局域网怎么办：Tailscale（推荐）

不想暴露局域网端口、或人在外面（4G / 咖啡馆 Wi-Fi）时，推荐用 [Tailscale](https://tailscale.com/)：

```bash
tailscale serve --bg --https=443 http://127.0.0.1:18080
```

之后 tailnet 里的任何设备（包括手机）直接访问 `https://<你的机器名>.ts.net` 即可——CC-Panes 服务保持只监听本机，不用开「允许局域网访问」，流量走 Tailscale 加密隧道。账号密码登录仍然建议开着（经 Tailscale 进来的也算「远程」，受只读模式等策略约束）。

### Web 端能做什么

浏览器里跑的就是桌面端同一个前端：终端与分屏、启动 Claude / Codex、文件浏览与编辑、Git / Worktree、Todo、Memory、会话日志……基本上桌面端能点的它都能点。少数依赖本机能力的功能除外（比如系统托盘、截图快捷键）。

---

## 手机端（Android）

手机 App 是 cc-panes-web 的客户端——所以**先按上面把 Web 端配好**（账号密码 + 局域网访问，或 Tailscale），手机才有东西可连。

### 连接

第一次打开 App 是连接页，填三样：

| 项 | 填什么 |
| --- | --- |
| 服务器地址 | 局域网：`http://192.168.x.x:18080`；Tailscale：`https://<机器名>.ts.net` |
| 账号 | 默认 `admin` |
| 密码 | 你在桌面端设置的 Web 密码 |

连接信息保存在系统加密存储里，之后打开 App 自动登录。

> 如果提示「服务端拒绝了远程访问」，回桌面端检查：「允许局域网访问」开了没、密码设了没；开了「远程只读」的话，想操作终端还需要「允许已登录的远程会话写入」。

### 能干什么

首页两个标签：

- **工作区**：浏览工作空间 → 项目，直接在手机上**发起新任务**（选 Claude / Codex / 普通终端启动）。
- **终端**：**镜像电脑上正在跑的所有会话**，一眼看到每个实例的状态；点进去就是完整终端，能看输出、能输入。终端上方有一条快捷键条（Esc、方向键、Ctrl 组合等），补齐手机键盘发不出的按键。

典型用法：电脑上开工前把任务派好，出门后手机上盯着；Claude 停下来问「要不要继续」，在手机终端里回一句就行。

### 一个要知道的设计：手机默认不改终端尺寸

你在手机上打开的终端和桌面端是**同一个 PTY**。如果手机擅自把终端 resize 成手机屏幕的尺寸，桌面端那边的渲染就花了。所以手机端**默认只跟随、不 resize**——画面以电脑端的尺寸为准，手机上可能要横滚一下。

确定当前主要在手机上操作时,可以点终端页右上角的 **「适配尺寸」**,把 PTY 调成手机屏幕大小——代价是电脑端同一会话的显示会受影响,回到电脑前调整一下窗口即可恢复。

### 安装 / 构建

目前手机端以源码形式提供（`cc-panes-mobile/`，Flutter 项目），自行构建：

```bash
cd cc-panes-mobile
flutter pub get
flutter run          # 连接调试设备直接跑
flutter build apk    # 打 APK 装到手机
```

开发调试小抄：Android 模拟器连本机服务用 `http://10.0.2.2:18080`；真机 USB 调试可以 `adb reverse tcp:18080 tcp:18080` 后连 `http://127.0.0.1:18080`。

---

## 常见问题

- **浏览器 / 手机连不上？** 依次查：Web 服务是不是「运行中」（设置 → Web 的状态行）→ 密码设了没、「允许局域网访问」开了没 → 防火墙放行了没 → 手机和电脑是不是同一个局域网。
- **登录了但操作不了终端？** 大概率开了「远程只读模式」——要么关掉，要么打开「允许已登录的远程会话写入」。
- **改了设置不生效？** 端口、局域网、密码策略都要**重启 Web 服务**（设置页底部按钮）才生效。
- **手机上终端显示不全 / 有横向滚动？** 这是「默认不 resize」的设计（见上），需要的话点「适配尺寸」。

## 下一步

- 回到 [手册首页](README.md) 看完整目录
- 多端共享会话的另一半拼图：[Resume：恢复历史会话](14-resume.md)