116 lines
2.6 KiB
Markdown
116 lines
2.6 KiB
Markdown
# 双视图 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` 通过
|