feat(ui): 子站 UI 重设计 — 工业 HMI 中文版 by Karl-Dai · Pull Request #2 · Karl-Dai/ModbusSim

Karl-Dai · 2026-04-20T16:49:57Z

Summary

按 brainstorm 共识（B 风格 · 中文 · 高对比黑底 + 蓝/绿/橙语义色）重设计子站 UI，消除「布局/字体/颜色都奇怪」的整体违和感。

核心改动（按 crate）：

modbussim-ui-shared/theme.rs：palette 由 Darcula 暖灰 + 橙换为 GitHub-dark 冷蓝 + 绿数值；新增 11 个语义 helper（accent/accent_fg/success/warn/danger/alias/border_subtle/border_strong/text_primary/text_body/text_muted）；TextStyle 字号梯度拉开（Heading 15 / Body 12.5 / Small 10.5）；spacing (8,4)→(10,6)；interact_size 22→24；新增 text::tiny_caps / text::crumb helper。
modbussim-ui-shared/ui.rs：shadcn palette 同步冷蓝；primary_button 切到绿色（"+ 批量添加"）；card/accent_card inner_margin 统一 (14,12) + corner_radius 4.0；新增 panel_header(title, crumb) 与 link_action(label, danger)。
modbussim-ui-shared/log_panel.rs：标题/复选/列头三行整合为单行；新增 collapsed 折叠；RX/TX 改 ←/→ 配 success/accent_fg 色；FC 列改 warn 橙；表头走 tiny_caps；关闭 striped。
modbussim-egui/app.rs：
- SidePanel 320→240、头部 tiny_caps「连接」+ link_action「+ 新建」、底部 footer「停止/删除连接」、激活树节点 2px 蓝竖线 + 15% alpha 蓝底 + accent_fg 粗体
- 主区头改用 panel_header（标题 + 面包屑）
- 新增 fmt-pill 工具栏（圆角 12 + L2 底 + accent_fg 蓝字 ComboBox）
- 寄存器表格色彩语义化：地址 muted 右对齐、HEX warn 橙、Binary muted 11px；表头 tiny_caps + 2px accent 下划线；关闭 striped
- 值解析受 value_parse_open 控制（V 切换 / 视图菜单 checkbox）
- 新增底部 22px 状态栏（● 就绪 + N 连接 · M 从站 + 版本号）
- 快捷键 V / L / / / Esc
- 视图菜单加「显示值解析 (V) / 显示通信日志 / 浅色深色切换」
顺手修了若干 egui 0.33 deprecation：Frame::none → Frame::new、SelectableLabel → Button::selectable、menu::bar → MenuBar::new、close_menu → close_kind、derivable_impls

已知 concerns（实施时记录）：

表头下划线用 painter().line_segment(x=-8000..8000) 依赖 egui clip rect，理论可能 1–2px 偏差
值解析仍是 inline StripBuilder（受 value_parse_open 控制），不是 spec 描述的 SidePanel::right 滑入抽屉，功能等价但无动画
行 hover/选中底色依赖 egui 内置 selection.bg_fill（已通过新 bg_selected_row token 间接生效），未显式 painter rect_filled

Documentation

Spec：docs/superpowers/specs/2026-04-21-slave-ui-redesign-design.md
Plan：docs/superpowers/plans/2026-04-21-slave-ui-redesign.md

Test plan

cargo check --workspace
cargo clippy -p modbussim-egui -p modbussim-ui-shared --no-deps -- -D warnings 干净
cargo test --workspace --exclude modbussim-app --exclude modbusmaster-app
cargo fmt --all -- --check
视觉冒烟（人眼）：cargo run -p modbussim-egui --release，深色 + 浅色双主题肉眼可辨；快捷键 V/L/Esc/` 全通
mbpoll 烟测：mbpoll -m tcp -p 5502 -t 4 -r 14984 写值，表格绿粗体 1450 / HEX 0x05AA 橙 / 日志 ← FC03
CI 三平台（macOS / Linux / Windows）通过

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

更新 spec 文件确保完整对标 brainstorm 第 1-170 行内容，特别是： - 字号 Token tiny_caps 规格改为 letter-spacing - 工具栏 pill 增加实现细节 - 值解析抽屉内容细节补全 - 通信日志头部、列宽、快捷键规格对齐 - 状态栏默认菜单项调整 - 主要修改文件清单补全 value_panel.rs 和 fonts.rs Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

card_colors 切到 Layer::L2 + border_subtle token；shadcn 按钮 primary 改绿、accent 改蓝、border/bg/fg 全部对齐新 palette；新增 panel_header （标题+面包屑两行）和 link_action（无边框文字操作，hover 变 accent 或 danger）。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

LogPanelState 新增 collapsed 字段；render 把"标题/复选/列头"三行合并为单行（折叠箭头 + 标题 + 计数 + RX/TX/过滤/清空/导出/关闭）；方向列宽 40→28、文本 RX/TX 改为 ←/→ 符号配 success/accent_fg 色； FC 列改 warn 橙、详情列改 text_body；表头走 tiny_caps；striped 关闭。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

宽度 320→240、min_width 200；frame inner_margin 统一 (14,12)； heading "连接" 改 tiny_caps；"新建 TCP 连接" 加 + 前缀；表单内 "创建" 按钮改用 shadcn primary_button (绿)。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

寄存器视图头部：heading + caption 合并成 panel_header（标题 + 面包屑 "slave_id · 从站 N"），搜索框宽度 160→220 给"地址 / 别名"留位；表头高度 22→26，表头文字全部走 tiny_caps（10.5 蓝小大写）； Hex/Binary 改中文 "HEX/二进制"；两段 TableBuilder 都关掉 striped （与未来选中/hover 行底色冲突）。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

新增 SlaveApp.value_parse_open: bool 字段（默认 true）。寄存器视图工具栏加 ◧ toggle，关闭后 StripBuilder 切换为表格独占全宽 + 右 cell 0 宽（保持三段链结构）。底部 status_bar 重新装饰：固定 22px、L0 chrome 底，左侧 ●（绿/红）+ 状态文字 / 就绪 + "N 连接 · M 从站"，右侧版本号。"清除" 改用 link_action（无边框）。 update 顶部加快捷键（无 widget 焦点时生效）：V 切值解析、L 折叠日志、Esc 清空选中行。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

修复工作区累积的格式偏差。无逻辑改动，只是 rustfmt 重排。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

- Step 5.2: 将 ComboBox 包裹进 pill 样式 Frame（L2 背景 + border_strong 边框 + corner_radius 12 + accent_fg 文字），旁加 tiny_caps "格式" 标签；工具栏右侧"清零选中"link_action；共N行/已选N行 crumb - Step 5.3: 地址列 text_muted monospace；HEX 列 warn(橙) monospace； Binary 列 text_muted size11 monospace；多字模式地址列同步 text_muted - Step 5.4: 每个 TableBuilder 的尾 header col 底边画 2px accent 蓝线，覆盖 x=[-8000..8000] 以贯穿全行（bool 和 u16 两种布局均处理） - 修复 Frame::none() → Frame::new() (2处 status_bar / CentralPanel) - 修复 SelectableLabel::new → Button::selectable (2处) - 修复 menu::bar → MenuBar::new().ui - 修复 close_menu → close_kind(UiKind::Menu) (4处) - 修复 needless_borrows in set_file_name Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

修因：「+ 新建」是全局连接入口但用 link_action 灰字埋没，「+ 批量添加」是局部操作但用 primary_button Md 绿色喧宾夺主。两个按钮的视觉重量与功能层级颠倒。改动：新增 ui::secondary_button_sm（shadcn Outline + Sm size）；左侧栏「+ 新建」与主区/设备摘要两处「+ 批量添加」全部切换。两侧同级、轻量 outline、不再有"被埋"或"过大"的反差。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Task 1+2 of conn-status-feedback plan — 准备 destructive 二次确认用的 button helper 与状态字段，后续 Task 5 footer 删除按钮逻辑会消费它。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Task 3 of conn-status-feedback plan — render_tree 中 connection row 新增： - 左侧状态圆点（Running: success 填充 + 1.5s alpha 脉动；Stopped: text_muted 描边） - Running 整行 success @ 8% alpha 染色（与 selected/hover 互斥） - tag 文本与 label 分两次绘制，tag 配色（success/text_muted） Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Task 4 of conn-status-feedback plan — render_tree 内 per-connection 按钮区由 small_button 三连（启动/停止/删除）改为： - 状态色 icon (▶ 绿 / ■ 黄) RichText label - 单个 secondary_button_sm 文本（"启动" / "停止"） "删除" 按钮完整移除，留给 Task 5 的 footer 处理。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Task 5 of conn-status-feedback plan — SidePanel footer 由原启动/停止/ 删除连接三 link_action 改为： - 仅保留删除（启动/停止已挪到 Task 4 的树节点按钮） - danger_button_sm（红色 outline Sm）+ 文字含选中连接名 - 第一次点击 → label 变 "× 再点一次确认"，3 秒内再点真删 - 利用 SlaveApp.pending_delete 字段；3 秒后自动恢复，无需主动清 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Task 6 of conn-status-feedback plan — status_bar BottomPanel "no error/no status" 默认分支由静态 ●就绪改为三态： - 0 连接 → ○ 未连接（muted 静态） - 任一运行中 → ● 运行中（success 1.5s 脉动 alpha） - 全部停止 → ○ 已停止（muted 静态）全局 ctx.request_repaint_after(50ms) 仅在 any_running 时调用，驱动树节点 + 状态栏所有脉动；停止时 UI 静止零 CPU。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

bug: perturb_u16 用 base*pct/100 计算 delta，base=max(value,1) 时当寄存器初值是 0（新建场景常见）→ base=1，pct∈[-10,10] → delta = 1*pct/100 = 0（整数截断），寄存器永远不动。用户感知：FC03/FC04 在新建后开启 jitter 后从不变化，而 FC01/FC02 （走 flip_bools，与值无关）正常翻转，造成"3/4 号功能码不动"的 bug。修：pct≠0 但 delta 被截断为 0 时，强制 delta = pct.signum()，保证至少 ±1 起步漂移。漂移量积累后 base 增大，恢复正常 % 行为。加 zero_seeded_holding_registers_actually_drift 回归测试。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

bug: app.rs:423-432 的后台 data source runner 把 RegisterType match 的 Coil / DiscreteInput 走 _ => {} 分支完全丢弃，用户配置的随机变化源（DataSource）只会更新 holding/input 寄存器，FC01/FC02 无效。与上一 commit 修的 jitter bug 是两个独立问题。修：补齐两个分支，u16 → bool 用 v != 0 转换（约定非零为 true）。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Karl-Dai and others added 25 commits April 21, 2026 00:29

docs(slave-ui): 落地 spec + plan + gitignore 排除 brainstorm 产物

274539f

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

feat(theme): 切换冷蓝 palette + 拉开字号梯度 + 新增语义色 token

07e00a6

docs(ui-shared): 更新模块注释反映冷蓝 palette 与新 helper

bb46073

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat(slave-app): SidePanel 重构 — 240px + 头/树/footer 三段

bcaf0e2

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

style(workspace): cargo fmt --all 整体规整

1ab3072

修复工作区累积的格式偏差。无逻辑改动，只是 rustfmt 重排。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

chore(slave-app): Frame::none → Frame::new (egui 0.33 deprecated)

2293044

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

style: cargo fmt --all 整体规整

b760c9d

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

docs(slave-ui): 连接状态反馈与按钮分工 spec

0314dd1

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

docs(slave-ui): 连接状态反馈 implementation plan (7 task / ~30 step)

203fc1c

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

style: cargo fmt --all

a1595f0

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Karl-Dai merged commit c28543b into main Apr 21, 2026
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): 子站 UI 重设计 — 工业 HMI 中文版#2

feat(ui): 子站 UI 重设计 — 工业 HMI 中文版#2
Karl-Dai merged 25 commits intomainfrom
feat/slave-ui-redesign-2026-04

Karl-Dai commented Apr 20, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

Karl-Dai commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Documentation

Test plan

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Karl-Dai commented Apr 20, 2026 •

edited

Loading