fix: preserve route state when switching same-route tabs (dashboard time range resets)

[feitianbubu]

📝 变更描述 / Description

现象 / Symptom
在「数据看板」里选好一个时间范围(比如 7 天)后,点击同一个页面里的其它子标签(分流 / 用户统计),时间范围会悄悄跳回默认值;再切回来时范围和时间粒度也乱了。其它使用子标签的页面(使用日志、模型、系统设置)同样存在这种「切标签就丢状态」的问题。

原因 / Root cause
这些子标签本质上是同一个路由、只是 :section 参数不同(例如 /dashboard/$section)。负责页面切换动画的 AnimatedOutlet 把动画容器的 React key 设成了完整的 pathname。切换子标签时 pathname 变化 → key 变化 → React 会把整个页面卸载并重建,于是页面里用 useState 保存的筛选条件(时间范围等)全部丢失,回落到默认值。

旁证:开启系统「减少动画」的用户不会遇到这个问题,因为该分支不带 key、不会重挂。

修改 / Fix
把 key 改成「当前匹配到的路由 id」而不是完整 pathname:

// before —— 同路由换参数也会换 key,导致整页重挂
select: (s) => s.location.pathname,
// after —— 同路由内换参数 key 不变,跨页面才变
select: (s) => s.matches.at(-1)?.routeId ?? s.location.pathname,

• 同一路由内只换参数(切子标签)→ key 不变 → 原地重渲染,组件状态保留;
• 跳转到真正不同的页面 → 路由 id 变 → key 变 → 仍然播放进场动画。

🚀 变更类型 / Type of change

• 🐛 Bug 修复 (Bug fix)
• ✨ 新功能 (New feature)
• ⚡ 性能优化 / 重构 (Refactor)
• 📝 文档更新 (Documentation)

🔗 关联任务 / Related Issue

无单独 Issue(改动微小且自包含)。

✅ 提交前检查项 / Checklist

• 人工确认: 描述为人工整理撰写。
• 非重复提交: 已搜索现有 Issues 与 PRs,未发现重复。
• Bug fix 说明: 确为行为缺陷(切换同路由子标签导致路由组件被重挂、状态丢失),非设计取舍。
• 变更理解: 已理解其原理与影响。
• 范围聚焦: 仅改动 1 个文件、5 行。
• 本地验证: 见下方运行证明。
• 安全合规: 无敏感凭据,符合规范。

📸 运行证明 / Proof of Work

数据看板-->选择7天, 点击分流 再点回来
修复前:

修复后:

Summary by CodeRabbit

• Bug Fixes
  • Improved page transition behavior when navigating between routes that share the same route definition, so animations now restart more consistently for route changes with different parameters.

[coderabbitai]

Walkthrough

In AnimatedOutlet, the routeKey used to key page transitions is changed from location.pathname to the last matched route's routeId (with a location.pathname fallback), altering when the transition motion.div remounts during navigation.

Changes

Route-based page transition keying

Layer / File(s)	Summary
routeKey uses routeId with pathname fallback web/default/src/components/page-transition.tsx	routeKey now reads s.matches.at(-1)?.routeId instead of s.location.pathname, so transitions only restart when navigating between distinct route definitions, not on param-only changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5 minutes

Poem

🐇 Hopping routes, same old trail,
No more flashing, no more flail!
routeId leads the bunny's way,
Params may change — transitions stay.
One smooth leap into the fray! 🌟

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly reflects the main bug fix: preserving state when switching tabs on the same route, including the dashboard time range reset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}