plc_control/docs/superpowers/plans/2026-03-25-dual-view-web.md

双视图 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 流会自动切换到新文件
• 前端会插入一条分隔提示，例如:

[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 通过