Skip to content

实现局部页面加载优化,消除导航切换时的白屏闪烁 Implement partial page loading to eliminate white flash on navigation#43

Open
lanpartis wants to merge 2 commits intoTianyiDataScience:mainfrom
lanpartis:partial-reload
Open

实现局部页面加载优化,消除导航切换时的白屏闪烁 Implement partial page loading to eliminate white flash on navigation#43
lanpartis wants to merge 2 commits intoTianyiDataScience:mainfrom
lanpartis:partial-reload

Conversation

@lanpartis
Copy link
Copy Markdown

@lanpartis lanpartis commented Mar 18, 2026

之前切换tab有点闪眼睛,这个PR是为了避免重新渲染页面

更改内容 / Changes:

  • 添加CSS过渡效果,为中间栏和右侧栏添加淡入淡出动画 Add CSS transitions for fade in/out animations on main panel and sidebar
  • 修改现有点击监听器,跳过导航链接让新逻辑处理 Modify existing click listener to skip nav-links for new handler
  • 添加局部导航逻辑:拦截导航点击,用fetch获取新页面,只更新中间栏和右侧栏内容 Add partial navigation: intercept nav clicks, fetch new page, update only main and sidebar
  • 同步导航链接的激活状态到当前页面 Sync navigation link active state to current page
  • 处理浏览器后退/前进按钮 Handle browser back/forward buttons

效果
修改前:
修改前
https://github.com/user-attachments/assets/b9a196d4-3a76-4e2a-8bb7-1164f9702300
更新后:
修改后
https://github.com/user-attachments/assets/3ef95fcf-9683-4eb3-b646-1dd1afb7862f

lan and others added 2 commits March 18, 2026 17:27
Implement partial page loading to eliminate white flash on navigation

更改内容 / Changes:
- 添加CSS过渡效果,为中间栏和右侧栏添加淡入淡出动画
  Add CSS transitions for fade in/out animations on main panel and sidebar
- 修改现有点击监听器,跳过导航链接让新逻辑处理
  Modify existing click listener to skip nav-links for new handler
- 添加局部导航逻辑:拦截导航点击,用fetch获取新页面,只更新中间栏和右侧栏内容
  Add partial navigation: intercept nav clicks, fetch new page, update only main and sidebar
- 同步导航链接的激活状态到当前页面
  Sync navigation link active state to current page
- 处理浏览器后退/前进按钮
  Handle browser back/forward buttons

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Fix avatars not rendering after partial navigation

更改内容 / Changes:
- 添加 initAvatars 函数,用于初始化新的头像元素
  Add initAvatars function to initialize new avatar elements
- 监听 partial-navigation-complete 事件,重新扫描并渲染新页面中的头像
  Listen for partial-navigation-complete event to scan and render avatars in new content
- 新头像添加后立即渲染一帧,确保即时显示
  Render new avatars immediately after adding to ensure instant display

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@TianyiDataScience
Copy link
Copy Markdown
Owner

谢谢你做这条 PR,也谢谢你把白屏闪一下这个体验问题认真拿出来解决。方向我认同。

这次我先没有直接 merge,主要是因为它现在把 src/ui/server.ts 里的导航生命周期接管得比较深,而最新 main 上又刚落了 hall / token / diagnostics 这几块。现在直接合进去,回归面会比较大,尤其是 hall、task room、file workbench、浏览器前进/后退这些状态面。

如果你愿意继续推,我很建议下一版:

  • 先 rebase 到最新 main
  • 最好补上 hall / task-room / back-forward 的 smoke 覆盖
  • 如果能把“过渡动画”和“局部替换逻辑”拆开,会更容易往前合

这条不是方向不行,而是我想把合入风险压低一点。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants