使用场景
在配置 GitHub 账号和 Token 后,用户点击“测试连接”确认配置是否可用。测试结果对后续使用很重要,但用户的视觉焦点通常集中在“测试连接”按钮及其附近。
诉求
希望连接测试结果能直接显示在“测试连接”按钮旁,而不只依赖页面上方弹出的提示:
- 测试成功时,显示一个小绿点,并显示“连接成功”;
- 测试失败时,显示一个小红点,并显示失败原因;
- 状态建议在按钮旁保持显示,直到配置被修改、连接状态失效或再次测试,以便用户能明确知道当前配置的最近一次测试结果。
建议方案
在“测试连接”按钮右侧增加内联状态区域。成功状态使用绿色圆点和“连接成功”文案;失败状态使用红色圆点和简明的失败原因。现有页面上方的成功或失败提示可以保留作为即时反馈,但按钮旁的状态应作为更醒目的结果摘要,避免用户错过顶部提示。
使用场景
在配置 GitHub 账号和 Token 后,用户点击“测试连接”确认配置是否可用。测试结果对后续使用很重要,但用户的视觉焦点通常集中在“测试连接”按钮及其附近。
诉求
希望连接测试结果能直接显示在“测试连接”按钮旁,而不只依赖页面上方弹出的提示:
建议方案
在“测试连接”按钮右侧增加内联状态区域。成功状态使用绿色圆点和“连接成功”文案;失败状态使用红色圆点和简明的失败原因。现有页面上方的成功或失败提示可以保留作为即时反馈,但按钮旁的状态应作为更醒目的结果摘要,避免用户错过顶部提示。