排行榜无法切换 Tab

[ding113]

v0.3.5 版本中，进入排行榜页面，两个 Tab 均无法切换。页面闪动后并没有成功切换。
点击切换后能看到网络请求被发起，但是又被重新带回了第一个 Tab，疑似是代码冲突。

[ding113]

你好 @ding113！

我已经找到了问题的根本原因 🎯

问题分析

在 src/app/[locale]/dashboard/leaderboard/_components/leaderboard-view.tsx:48 中，存在一个无限循环问题：

useEffect(() => {
  const urlScope = searchParams.get("scope");
  const normalizedScope = urlScope === "provider" && isAdmin ? "provider" : "user";

  if (normalizedScope !== scope) {
    setScope(normalizedScope);  // ← 这会触发状态更新
  }

  const urlPeriod = searchParams.get("period");
  const normalizedPeriod = urlPeriod === "monthly" ? "monthly" : "daily";

  if (normalizedPeriod !== period) {
    setPeriod(normalizedPeriod);  // ← 这也会触发状态更新
  }
}, [isAdmin, searchParams, scope, period]);  // ← scope 和 period 在依赖数组中
//                          ^^^^^^^^^^^^
//                          问题在这里！

导致的后果：

1. 用户点击切换 Tab → setScope() 或 setPeriod() 被调用
2. 状态更新 → scope 或 period 发生变化
3. useEffect 依赖项变化 → 重新执行
4. useEffect 内部检测到 normalizedScope !== scope → 又调用 setScope()
5. 回到步骤 2，形成无限循环 ♻️

这就是你看到页面闪动、网络请求被发起但又被带回第一个 Tab 的原因。

解决方案

需要从 useEffect 的依赖数组中移除 scope 和 period，只保留外部输入（URL 查询参数）：

useEffect(() => {
  // ... 同样的逻辑
}, [isAdmin, searchParams]);  // ✅ 只依赖外部输入

这样 useEffect 只会在 URL 查询参数或管理员状态变化时执行，而不会因为内部状态更新而重复触发。

受影响的版本

这个问题是在 PR #168 (commit 281ed80) 中引入的，当时添加了从供应商页面跳转到排行榜的功能。

---

如果你希望我创建修复的 PR，请回复 @claude please fix this，我会立即为你处理 🚀

🤖 This is an automated response from Claude AI