Issue #169：增加分支下拉列表搜索框高度，协调输入区与列表的比例

• 类型：优化
• 状态：已实现并通过本地验收，PR 待合并
• Issue：https://github.com/ShaoClean/Alune/issues/169
• PR：https://github.com/ShaoClean/Alune/pull/173
• 最近更新：2026-10-02
• 初始排查基线：140b81f9ad68c5347a6a4bc97f5f848d65d66690
• 实现基线：378192e6fd3688b3d3cbabe86a8751b4ac81b393
• 实现提交：ef20519

背景与问题

用户反馈分支下拉列表顶部“筛选分支…”搜索框高度偏小。提供的截图中，搜索输入区相对下方分支行与“新建分支…”入口显得扁，文字、图标与上下留白的比例不协调。

操作场景：打开仓库，点击工具栏当前分支，展开切换分支浮层并使用顶部搜索框。

原始截图对应的应用版本、系统与缩放比例未提供；需求草案阶段仅做静态核对。后续运行时复现、实测成因与环境见下方实现及验收记录。

目标

提高搜索框的可读性和点击舒适度，使输入框高度、图标、文字、内边距与分支列表形成统一的尺寸节奏。

需求与范围

• 调整搜索输入框的高度及垂直内边距，文字、搜索图标与清除按钮垂直居中。
• 协调搜索区、分组标题、分支行和底部新建入口的间距、圆角与视觉层级。
• 覆盖普通、hover、focus、输入内容及清除按钮显示时的状态，避免尺寸跳动。
• 保持本地／远程分组、大小写不敏感筛选、清空搜索、分支切换、新建分支、加载与空结果提示、Escape 关闭和焦点恢复等现有能力。

初始方案建议与代码线索

静态检查代码基线 140b81f9ad68c5347a6a4bc97f5f848d65d66690：

• BranchPicker.tsx：搜索框显式使用 Input size="small"，可以从控件尺寸配置及其实际计算样式排查。
• workspace-layout.css：相关入口为 .branch-picker__search、.branch-picker__list、.branch-picker__option 与 .branch-picker__create。
• 优先复用 @alune/ui 的输入框尺寸与主题变量；可评估 32–36 CSS px 的候选高度，最终以实际缩放和列表比例验证为准。该数值是设计建议，并非截图测量结论。

验收标准

• 搜索框不再显得过扁，文字、图标和清除按钮垂直居中，点击区域舒适。
• 搜索区与分组、分支行、新建入口的留白、圆角和高度比例协调。
• hover／focus／有输入／清空时无裁切、抖动或高度变化，键盘焦点清晰。
• 浅色／深色主题、窄窗口、长分支名、长搜索词与多分支滚动场景显示正常。
• 本地／远程筛选、切换、新建、空结果、加载、Escape 关闭及焦点恢复无回归。

验证方案

使用包含本地、远程及长名称分支的仓库，在实际应用中对比调整前后截图；覆盖默认缩放与放大显示、浅色／深色、窄窗口、多分支滚动和键盘操作。记录最终采用的 CSS 高度、内边距与行高，并补充实际交互验证结果。

风险与待确认

已运行时核对共享 Input 与业务覆盖关系，34px 采用现有共享默认值；后续 #170 统一视觉时需保留紧凑选择器场景。原始截图环境仍未知，本次复验环境与未覆盖平台见下方。

补充资料

用户于 2026-10-02 提供的分支下拉列表截图（应用版本、系统与缩放比例未提供）：

关联需求：[优化] 重新设计整体 UI，统一工作区与共享组件的视觉体系。

验证记录

日期	环境／依据	场景	结果
2026-10-02	用户截图与上述代码基线	记录需求、核对代码入口	已创建需求草案；未修改应用代码，未进行运行时复现或实现验收
2026-10-02	ef20519，macOS／Chromium／Electron	实现与实际交互、窄窗、缩放、构建及测试	本地验收通过，详见下方；PR #173 待合并

实现与尺寸决策（2026-10-02）

场景为桌面工作区中的紧凑分支选择浮层，沿用 UI 规范 的共享主题、字段圆角与密集列表层级。本次按 Issue 的 32–36px 候选范围复用当前共享 Input 的标准高度 34px；这是紧凑上下文选择器的尺寸选择，全局表单 38px 的规范推广仍属于 #170。

运行时复现确认：原搜索框显式 size="small"，又被业务 CSS 覆盖为 12px 字号，最终高度约 20.85px，上下内边距为 0。修复将 Input 设为 size="middle"，移除局部字号覆盖，直接采用 @alune/ui 的配置与样式，无共享组件或全局主题改动。

部位	修改前实测	修改后默认缩放实测
搜索输入框	高 20.85px；padding 0 7px；字 12px；行高 18.857px	高 34px；padding 5px 11px；字 14px；行高 22px；圆角 10px
分支行	高 28px；padding 5px 8px；行高 18px；圆角 6px	高 32px；padding 6px 8px；行高 20px；圆角使用 --r-chip（7px）
新建入口	高 33px；行高 18px	高 36px；padding 7px 8px；行高 20px；底部圆角使用 --r-chip
浮层	padding 8px；区块间距 6px	padding 8px；区块间距 8px；列表行间距 2px
分组标题	padding 6px 8px 2px	首组 padding 4px 8px；后续组 8px 8px 4px；行高 16px

加载与空结果使用相同的辅助文字间距，移除默认段落 margin。分支名称保持单行省略，滚动限于最高 260px 的列表，搜索与新建入口固定在列表外。

窄窗口复验还发现原 bottomRight 定位仅左右翻转时仍可能越界（390px 视口，浮层右缘到 424px）。本次保留右下锚点，通过 Popover align.overflow.shiftX 使用组件内置的水平避让，并保留垂直翻转。修改后 390px 视口内浮层完整显示。既有定位测试相应允许窗口边缘避让，仍禁止以文件列表坐标或自定义 offset 改写锚点。

实际验收（2026-10-02）

环境：macOS 15.5 arm64，Node 25.5.0，Alune 0.6.0 开发源码，Chromium 152.0.7977.54 与 Electron 44.2.0。浏览器加载实际生产 Web 构建与 Nest 服务，使用隔离 SQLite、本地临时 Git 仓库和本机 bare 远程；初始 36 个本地／远程分支，真实切换与新建后为 38 个。没有修改用户仓库或连接数据。

项目	结果与依据
构建	npm run build -w @alune/shared、npm run build -w @alune/ssh-client、npm run build -w server、npm run build -w web 通过。Vite 的已有大 chunk 提示仍存在。
Web 测试	最终 npm test -w web：229/229 通过。新增水平避让后原静态测试禁止任何 align，已按其“禁止文件列表定位偏移”的原意调整并重跑通过。
格式与提交	Prettier、git diff --check 与 commitlint 通过。
默认／hover／focus／输入／清除	浅色和深色都验证；搜索框均为 34px，文字、搜索图标、清除按钮垂直中心差为 0，无裁切或高度变化，焦点环可见。
筛选	sEaRcH-CoMfOrT 与带首尾空格的搜索同时命中本地与远程组；清除后恢复全部分支；长搜索词不会撑宽，空结果正确显示。
加载与滚动	对真实接口施加延迟，确认“正在读取分支…”及恢复；38 个分支滚动时搜索区、新建入口位置不变，列表无水平溢出。
键盘	Escape 关闭并将焦点恢复至分支按钮；ArrowDown 打开；Tab 到搜索框。
切换与新建	点击切换到 Feature/Search-Comfort；远程 origin/remote-only 创建跟踪分支且 upstream 正确；从新建入口创建并切换分支；同时核对真实 Git HEAD／upstream。
窄窗口	390 × 780 CSS px，浅色／深色、长分支名及长搜索词通过；水平避让后浮层与输入区处于可视范围内。
放大显示	Electron 隔离渲染器加载同一生产 Web 构建，使用 webContents.setZoomFactor(1) 与 1.25。两种主题下输入／清空不改变高度，图标居中，浮层完整可见。100% 时 34 CSS px；125% 时约 33.6 CSS px（缩放后边框像素取整），该缩放下各状态一致。

原始测量：浏览器状态与尺寸、Electron 缩放测量。

未验证：Windows／Linux 原生界面、实际 SSH 主机、完整桌面安装包。Electron 验收是生产 Web 构建的隔离渲染器，不代表完整安装包验收。CI 状态以 PR #173 为准。

修改前后

以下为同一临时仓库实际运行截图。前图为初始 36 分支；后图包含交互验收中新建的分支。截图视口不同，请以尺寸表中的 CSS 测量比较高度。