Issue 161 - ShaoClean/Alune GitHub Wiki

Issue #161：补齐工作区按钮 hover 与提示，去除推送顶部白线

背景与问题

侧栏打开本地仓库、隐藏左侧工作区、顶部打开仓库及右侧面板开关缺少一致的可感知悬停效果与功能提示。运行检查确认面板展开态与 hover 使用相同背景和图标颜色。推送主按钮和下拉按钮的内阴影包含顶部高光，形成多余白线。

用户截图的原始运行平台和版本未提供。本次运行证据来自 macOS arm64 的 Web 隔离 fixture，并非原始环境复现。

目标与范围

四个按钮在悬停时显示明显背景和轮廓变化，并使用应用现有 Tooltip 告知操作；键盘聚焦能获取说明。面板文案随显示状态变化，不可用面板说明原因并禁止操作。移除推送顶部高光，同时保留原有渐变填充、几何与焦点反馈。

方案与取舍

  • Layout、RepositoryTabs 与 PanelToggle 使用现有 Ant Design Tooltip，采用默认延迟、底部定位与 hover/focus 触发。移除按钮原生 title，避免重复提示。
  • 展开态保留柔和背景，hover 增加主题蓝混色背景与内轮廓；浅色、深色使用同一组主题变量。
  • 不可用面板采用 aria-disabled 与点击守卫，保留可聚焦性和焦点轮廓，使键盘用户能读取“当前视图没有右侧面板”。禁用态不采用可执行 hover 样式。
  • .toolbar-button--primary 取消顶部内阴影，保留既有主题背景、圆角、边框声明和分体结构。

验收标准

  • 四个按钮 hover 有额外视觉变化，移出后恢复。
  • 四个按钮使用准确的 Tooltip，无原生 title 重复提示。
  • 面板展开/收起文案更新，点击和快捷键正常。
  • 不可用面板说明原因；鼠标、Enter、Space、快捷键均不执行切换。
  • 浅色/深色 Tooltip 可读，键盘焦点保留；720px 窄窗口右侧提示位于视口内。
  • 两个打开按钮进入本地仓库打开弹窗。
  • 推送主体和下拉顶部内阴影移除；推送与下拉获取请求正常。
  • 原生 macOS/Windows/Linux 桌面及真实仓库打开、真实远端 Git 操作验收。

验证记录

日期：2026-10-01。环境：macOS arm64、Node v25.5.0、ego-browser；Web 使用 production build 与 workspace-fixture.mjs。同步验收使用临时 fixture 副本，补充内存中的 origin/upstream；请求仅修改隔离内存，不连接真实 SSH 或 Git 远端。

命令或场景 结果
npm test -w web 218 项通过
npm run build -w web 通过；存在既有大体积 chunk 警告
git diff --check 通过
四按钮浅色/深色 hover、移出恢复、Tooltip 文案和边界、键盘 focus-visible 通过
面板点击、显示/隐藏文案及 Ctrl+B / Ctrl+Shift+B 通过
不可用右侧面板 hover/focus 原因说明，鼠标/Enter/Space/快捷键阻止切换 通过
720px 窄窗口右侧 Tooltip 视口边界 通过
顶部和侧栏打开仓库入口 均进入 /repositories?open=local，显示打开本地仓库弹窗
推送与下拉获取 fixture 记录 push 与 fetch 请求；执行完成
推送主体和下拉的内阴影 浅色/深色均为 none
原生桌面、真实仓库打开与真实远端同步 未运行：本次采用 Web 隔离 fixture

验证过程中的脚本曾错误假定下拉按钮也具有 aria-disabled=true；该断言失败，实际下拉维持既有可打开行为，菜单操作项按同步状态禁用。没有将这次脚本失败记为通过。最终记录按实际请求和按钮阴影检查确认上述结果。

前后截图

截图中的仓库、路径、主机均为 fixture 数据。修改前为 60edb08，修改后为 9995a55。

修改前：

Alune 修改前：面板展开态无额外 hover 反馈，推送顶部存在高光

修改后，浅色：

Alune 浅色修改后：左侧面板 hover 轮廓与干净的推送顶部

修改后，深色：

Alune 深色修改后：左侧面板 hover 轮廓与干净的推送顶部

不可用面板键盘焦点 · 窄窗口右侧提示 · 浅色推送 · 深色推送

风险、未决事项与回退

禁用按钮保持键盘可聚焦，这是为了读取不可用原因；操作由点击守卫及既有快捷键可用性判断阻止。没有数据迁移。原生桌面与真实远端操作仍待验收；这里的 Web 结果不代表原生三平台通过。

代码可回退本 PR 的提交；Wiki 为独立历史，回退时需单独核对本文与分类索引。

关联资料