search

haishanh / yacd

Yet Another Clash Dashboard
http://yacd.haishan.me
MIT License
4.16k stars 736 forks source link

优化代理延迟测速时的 UI 显示 #741

Closed lyc8503 closed 1 year ago

lyc8503 commented 1 year ago

作者您好, 一直在使用您的 yacd, 觉得很简洁好用, 不过遇到了一个小问题: 当点击节点测速时, 要等待所有的节点的测速完成才会一并更新结果, 且如果有个节点测速失败(比如超时), 它会保留上一次的延迟显示而不会更新.

当节点较多/存在无法连通的节点时这样给用户的体验感觉不太好, 要等满 5s 超时才能看到结果, 而不能直观地看出节点延迟的高低, 而且对于本次测速失败的节点仍然保留上一次的延迟可能会给用户带来误导.

所以我修改了一下相关代码, 把节点测速的行为改成了下面这样:

刚点击测速时显示如下图, 全部变为 - ms: image

先测速完成的节点先显示结果, 测速出现错误的会显示错误原因: image

本次所有节点测速完成后会更新全部的 UI, 更新有依赖项目的延迟 (比如上面的例子中, Internet 的延迟应该是 direct 的延迟, 测速完成后会一并更新).

请作者 review 一下代码~ (不太熟悉 ts, 部分地方可能改得不好qvq 因为没怎么搞懂原来多代理测速这里的逻辑, 为什么用到 dedup, 什么情况下会发生重复吗, 只更新一次是为了性能考量吗?)

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated
yacd ✅ Ready (Inspect) Visit Preview 💬 Add your feedback Feb 2, 2023 at 1:51PM (UTC)
haishanh commented 1 year ago

感谢贡献。全测速完成才更新延迟确实是为了性能考量， 目前每个 <Proxy /> 的状态并没有做到独立，所以更新单个 <Proxy /> 的延迟也会渲染整个列表。当然这个 app 结构比较简单，这个优化意义也没那么大。而且从用户体验上说，每个 proxy 测速完立即更新延迟显示也确实会比较好。 你现在的改法，并没有考虑 proxy provider 的情况。其中的 dedup map 是为了 dedup proxy 中由 provider 引入的子 proxy 项。

haishanh commented 1 year ago

我稍微改了下 https://github.com/haishanh/yacd/commit/759d742b8b58136ef9f20951162a52f61bb17dc2 proxy 的延迟会立即显示，provider health check 还是会等到所有的 provider 都 check 完才更新。