[Feature] SSH 远程主机较多时点击“添加”后新增表单不可见，容易误认为按钮无响应

[qsoyq]

问题描述

在「设置 → 远程连接 → SSH 远程主机」中，当已经配置了较多远程主机时，点击右上角的“添加”按钮，当前视口没有明显变化，用户容易误认为点击没有生效。

实际上，新增主机表单已经正常打开，但它固定显示在整个 SSH 主机列表的末尾。列表较长时，表单位于当前视口下方，需要用户手动滚动到页面底部才能看到。

该问题不影响新增远程主机的实际功能：用户滚动到表单位置后，仍可正常填写和提交。主要影响是缺少即时、可见的操作反馈，导致用户难以感知“添加”操作已经生效。

复现步骤

1. 打开「设置 → 远程连接」。
2. 展开「SSH 远程主机」。
3. 配置足够多的 SSH 主机，使主机列表高度超过设置页当前可视区域。
4. 将页面停留在列表上方，确保列表末尾不可见。
5. 点击“添加”。

实际表现

• 点击后，当前视口没有明显变化。
• 新增主机表单实际上已经正常打开，但位于全部主机条目的下方。
• 用户必须手动继续向下滚动，才能发现新增表单。
• 从用户感知上看，“添加”按钮像是没有响应。
• 滚动到表单后，新增主机的填写和提交功能仍可正常使用。

期望表现

点击“添加”后，应立即让用户感知到操作已经生效，并能直接看到或定位到新增主机表单。

建议至少满足：

• 新增表单自动进入当前可视区域；
• 用户不需要主动寻找或手动滚动到列表底部；
• 首个可编辑字段获得焦点，用户可以直接输入。

原因分析

当前交互中：

1. “添加”按钮只切换新增表单的显示状态，没有执行滚动或焦点定位：
   • apps/desktop/src/renderer/components/settings/RemoteSection.tsx:881
2. SSH 主机列表通过 hosts.map(...) 依次渲染：
   • apps/desktop/src/renderer/components/settings/RemoteSection.tsx:914
3. 新增表单固定渲染在整个主机列表之后：
   • apps/desktop/src/renderer/components/settings/RemoteSection.tsx:955
4. SSH 主机列表本身没有高度上限或独立滚动区域：
   • apps/desktop/src/renderer/components/settings/RemoteSection.tsx:897
5. 当前由整个设置页右侧内容区域统一负责滚动：
   • apps/desktop/src/renderer/components/settings/SettingsView.tsx:253

因此，当主机列表较长时，打开表单只会增加设置页的总内容高度，不会改变当前滚动位置，也不会自动把新增表单带入视口。

优化建议

优先采用不改变现有页面结构的轻量优化：

1. 点击“添加”并完成表单渲染后，自动将新增表单滚动到可视区域；
2. 同时聚焦“别名”或第一个可编辑输入框，让用户可以直接输入；
3. 保留现有内联表单及整页滚动方式，避免不必要的布局调整。

可进一步评估是否需要限制 SSH 主机列表的显示高度并设置独立滚动区域，但这不是解决当前体验问题的必要条件。如果采用独立滚动区域，需要确保新增表单不会再次落在不可见位置。

验收标准

• 准备足够多的 SSH 主机，使列表高度超过设置页可视区域。
• 页面停留在 SSH 主机列表上方时点击“添加”，新增表单会自动进入当前视口。
• 用户不需要手动滚动到列表底部寻找表单。
• 打开表单后，第一个可编辑输入框获得焦点，可以直接输入。
• SSH 主机数量为 0、1 或很多时，添加行为保持一致。
• 较小窗口高度下，表单仍可通过正常滚动完整访问，不会被父容器裁切。
• 点击“取消”或再次点击“添加”可以正常关闭表单。
• 添加成功后，现有的列表刷新、表单关闭和成功提示行为不受影响。
• 折叠并重新展开 SSH 远程主机区域后，不发生异常滚动。
• macOS 和 Windows 下的交互表现一致。

影响范围

• 仅影响桌面端设置页中 SSH 远程主机管理的操作感知和交互体验。
• 不影响 SSH 连接、新增主机提交、主机数据保存等实际功能。
• 不涉及 SSH 协议、IPC 参数或远程主机数据结构。
• 不涉及设备互联的 IPC 白名单。
• 手机版当前不提供该桌面端 SSH 主机配置入口，因此不涉及手机版 UI。

[DavidShenXD]

处理结果

已按修改预期完成：点击“添加”后，新增 SSH 主机表单现在显示在所有现有主机之前，主机数量较多时也能立即看到。

变更

• 将新增表单从 SSH 主机列表末尾移动到列表首位。
• 调整表单与第一条主机之间的分隔线，避免表单置顶后出现多余顶部边线。
• 新增回归测试，锁定新增表单必须位于 hosts.map(...) 之前。

验证

• pnpm --filter desktop typecheck：通过。
• 定向 Vitest：1 个测试通过。
• 定向 ESLint：通过。
• 新增测试 Prettier 检查与 git diff --check：通过。

备注

当前改动尚未创建 commit 或 PR，等待验收。

[DavidShenXD]

@qsoyq 关联 PR makecindy/cindy-temp#86 已合并，请验收本次处理结果。如发现问题请继续反馈。

[qsoyq]

验收通过

[DavidShenXD]

@qsoyq 关联 PR #4057 已合并，请验收本次处理结果。如发现问题请继续反馈。