# 双视图 Web UI 实现计划

## 当前状态

该计划对应的双视图页面已经完成，本文档同步到当前实现，并补充最近的日志流轮转修复。

## 已完成范围

- 已实现顶部 `Ops / Config` 视图切换
- 已实现运维视图单元侧栏和设备卡片区
- 已实现配置视图日志流面板
- 已实现基于 WebSocket 的信号灯和运行时状态更新
- 已实现批量启动 / 批量停止自动控制按钮
- 已实现 SSE 日志流接入

## 当前页面结构

### 运维视图

- 左侧: 控制单元列表
- 右侧: 设备卡片区
- 底部: 系统事件面板

### 配置视图

- 保留原有配置面板布局
- 底部中间区域显示实时日志流

## 关键实现说明

### 1. 单元与设备视图

前端在 `ops` 视图中:

- 展示单元运行状态、启用状态、累计时长
- 展示设备的 `REM / RUN / FLT` 信号状态
- 为 `coal_feeder` 和 `distributor` 提供手动 `Start / Stop`
- 自动控制启用时，禁用对应设备卡片上的手动按钮

相关文件:

- `web/js/ops.js`
- `web/js/units.js`
- `web/js/app.js`
- `web/js/state.js`
- `web/styles.css`

### 2. 运行时更新

`UnitRuntimeChanged` WebSocket 消息会驱动:

- 单元列表状态刷新
- 运维视图单元卡片刷新
- 设备手动按钮禁用状态同步

点位实时值更新会驱动:

- 配置视图点位列表刷新
- 运维视图信号灯颜色刷新
- 图表数据追加

### 3. 日志流面板

配置视图使用 SSE 订阅 `/api/logs/stream`。

当前行为:

- 默认跟随最新的 `app.log*`
- 后端每 800ms 检查一次增量内容
- 如果日志轮转到了新文件，SSE 流会自动切换到新文件
- 前端会插入一条分隔提示，例如:

```text
[log switched to app.log.1]
```

然后继续追加新文件内容，不清空旧内容。

相关文件:

- `src/handler/log.rs`
- `web/js/logs.js`

## 最近补充修复

### 日志轮转跟随

新增修复后:

- `GET /api/logs/stream` 在未指定 `file` 时，会持续跟随最新日志文件
- 一旦文件切换，后端返回 `reset = true` 和新的 `file`
- 前端用分隔提示标识轮转点

这解决了旧实现只盯住启动时选中文件、轮转后不再显示新日志的问题。

## 相关文件

- `web/index.html`
- `web/html/topbar.html`
- `web/html/ops-panel.html`
- `web/html/log-stream-panel.html`
- `web/js/app.js`
- `web/js/ops.js`
- `web/js/logs.js`
- `web/js/state.js`
- `web/js/dom.js`
- `web/styles.css`

## 验证状态

最近一次日志流相关修复完成后，已确认:

- `cargo check` 通过
- 日志轮转切换逻辑的后端测试通过
- `node --check web/js/logs.js` 通过