Skip to content

fix(desktop): 打磨桌面 shell 顶栏与左下角运行控制 UI - #784

Open
LucasIcarus wants to merge 3 commits into
deepcoldy:masterfrom
LucasIcarus:fix/desktop-shell-ui-polish
Open

fix(desktop): 打磨桌面 shell 顶栏与左下角运行控制 UI#784
LucasIcarus wants to merge 3 commits into
deepcoldy:masterfrom
LucasIcarus:fix/desktop-shell-ui-polish

Conversation

@LucasIcarus

@LucasIcarus LucasIcarus commented Aug 7, 2026

Copy link
Copy Markdown
Contributor

改了什么

Botmux Desktop 原生 shell(src/desktop/renderer/)的 4 处 UI 细节打磨,均为纯样式/展示逻辑,不涉及功能行为变化:

  1. 顶栏 action 按钮字号对齐:「创建会话 / 添加机器人 / 文档 / 日志 / 打开目录」此前继承文档默认 16px 字号,明显大于侧边栏(13px)与胶囊(12px)。补上 font-size: 12px; font-weight: 650,并统一左右 padding。
  2. 顶栏布局:状态左、操作右:「在线 Daemon / 需要处理 / 已配置 Bot」是只读摘要,与 action 入口性质不同,改为左对齐;action 入口与中英文切换统一右对齐。样式上同步做出区隔:状态胶囊弱化(26px 高、低对比边框、11px 标签),action 按钮保持 32px 交互样式,整体风格仍统一。
  3. 左下角运行控制按状态显隐:运行中/启动中/需要处理只显示「停止 + 重启」,其余状态(已停止/需要配置/状态不可用)只显示「启动」。此前三个按钮常驻、靠 disabled 区分,运行中还挂着一个灰掉的「启动」。按钮组从固定 3 列 grid 改为 flex 自适应,可见按钮均分整行。
  4. 开机启动改为 macOS 风格滑动 switch:替换原生 checkbox,原生 input 视觉隐藏但保留在 DOM(label 联动、role="switch"、focus-visible 描边等 a11y 语义不变)。开启/关闭态做出区隔:开启态轨道用主题渐变色、文案变为「已设为开机启动」且亮色显示;关闭态保持灰色「开机启动 App」。新增 i18n key login.launchAtLoginOn(中英文)。
  5. 左下角整体改为三行均匀布局:开机自启 switch 上移至运行状态行右侧(状态左对齐、switch 右对齐,字号字重与状态文案对齐;出现多行运行详情时 switch 钉在首行不下坠);版本信息行水平居中、保持底部位置;sidebar-foot 改为 flex column 均匀排布三行(状态行 / 操作按钮组 / 版本行)。

另按桌面应用惯例,shell chrome(导航、胶囊、按钮、运行状态文案)整体 user-select: none;日志输出、版本号、运行时错误详情等诊断文本保留可选中,方便复制反馈。

影响面

  • 仅桌面 shell 渲染层:src/desktop/renderer/{index.html,style.css,app.ts} + 对应源码断言测试 test/desktop/desktop-dashboard-webview.test.ts
  • 不涉及 daemon / CLI 适配器 / 飞书链路 / dashboard web(webview 内嵌页面零改动,注入的 desktopShellInjectedCss 未动)。
  • paintControls 仅新增 hidden 赋值,原有 disabled 判定逐行保留,unmanagedRuntime / 桥接不可用等分支行为不变;takeover 按钮维持常驻隐藏,其兼容样式改为 flex: 1 1 100% 等价保留。
  • login-row 挪入 runtime-line(HTML 结构移动 + grid 加第三列 auto),footer-meta-row 仅剩版本行;aria-live="polite" 容器范围未变。
  • 开关交互链路(getLoginItem / setLoginItem、失败回滚、legacy autostart title 提示)未改,仅新增状态渲染 paintLoginState(),在初始化、切换语言、变更成功/失败后统一重绘。

验证

  • pnpm build
  • pnpm test 全量单测 ✅(首个 commit 全量 825 文件 / 13267 用例通过;第二个 commit 后复跑,desktop 相关全绿,全量运行中 codex-app-threads / cost-calculator-cache 出现的计时敏感用例失败经单独复跑 60/60 通过,确认为并发负载 flake,与本 PR 改动无交集)
  • test/desktop/ 19 个测试文件 / 144 用例全绿;本 PR 同步更新了按钮组布局与版本行对齐的源码断言,并新增两个用例:运行按钮按状态显隐、开机启动 switch 的结构/同行布局与开启态文案断言
  • 浏览器加载构建产物 + mock 桥接数据实测四种状态(运行中/已停止 × 开关开/关):胶囊左对齐、按钮显隐、switch 同行右对齐与文案切换、版本行居中均符合预期,截图见下

演示截图

截图为浏览器加载构建产物 + mock 桥接数据渲染(版本号、计数均为演示值),不含真实环境信息。

整体:顶栏状态胶囊左对齐 / action 右对齐 + 字号对齐

Before After
before-running after-running
before-stopped after-stopped

(第一行为运行中,第二行为已停止;整体图统一 2560×1600、特写统一 1000×608 同一裁剪区,便于逐格对比)

左下角特写:运行控制显隐 + 开机自启 switch

状态 Before After
运行中 / 自启开 foot-before-running foot-after-running
已停止 / 自启关 foot-before-stopped foot-after-stopped

- 顶栏 action 按钮补齐 12px 字号与字重,与侧边栏/胶囊风格对齐(此前继承 16px 文档默认字号偏大)
- 顶部状态胶囊(在线 Daemon/需要处理/已配置 Bot)改为左对齐并弱化为只读摘要样式,action 入口与语言切换统一右对齐
- 左下角运行控制按状态显隐:运行中/启动中/需要处理只显示停止+重启,其余状态只显示启动,按钮组改 flex 自适应铺满
- 开机启动改为 macOS 风格滑动 switch(隐藏原生 checkbox 保留 a11y/label 语义),开启态文案与颜色区隔并新增对应 i18n 文案
- 桌面 shell chrome 整体 user-select:none,日志输出/版本号/运行时详情等诊断文本保留可选中
@LucasIcarus
LucasIcarus requested a review from deepcoldy as a code owner August 7, 2026 14:40
- 开机自启 switch 上移至运行状态行右侧:状态左对齐、switch 右对齐,字号字重与状态文案对齐;多行运行详情时 switch 钉在首行不下坠
- 版本信息行水平居中,保持底部位置
- sidebar-foot 改为 flex column 均匀排布三行(状态行 / 操作按钮组 / 版本行)
运行状态文案与开机自启 label 的 line-height 从 1.2 改为精确 16px(等于 switch 高度),状态文字、switch、label 三者垂直中心完全重合(实测 delta 0),修复同行布局放大看存在的 0.3-0.5px 光学错位
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant