【优化】Header 处的按钮交互

[521xueweihan]

为防止用户重复点击 header 处的 首页、月刊、排行榜、文章 等按钮，所以需要优化 header 的交互：

1. hover 状态，有一个 blue-500 的横条
2. active 和 当前所在页面下，按钮的文字为 text-blue-500
3. 处于当前页面和已点击状态下，不会被重复点击发起任何请求或中断之前的请求

注意：以上均为 PC 端，移动端可适当统一 header 上按钮的选中或 active 状态下的样式。

示意图：

更加详细的交互，可参考掘金和知乎 header 部分。

[github-actions[bot]]

Branch i73-【优化】header_处的按钮交互 created!

[RJM1996]

1. hover 状态，有一个 blue-500 的横条

2. active 和 当前所在页面下，按钮的文字为 text-blue-500

   

3. 处于当前页面和已点击状态下，不会被重复点击发起任何请求或中断之前的请求 目前还未想到好的解决方法，先在按钮点击函数加了一个防抖，防止重复点击

   

[521xueweihan]

@RJM1996 是不是可以给 onClick 函数加一个状态数值，用来判断是否被点过。

[RJM1996]

@RJM1996 是不是可以给 onClick 函数加一个状态数值，用来判断是否被点过。

可是这个状态怎么存呢？万一点击之后网络异常，页面没有成功跳转，那再次点击时怎么办呢 目前有进度条和防抖，其实感觉够用了。不会存在那种点击后完全没有任何反应的情况了，多次连续点击也只会请求一次