feat: 视频列表无限滚动 + 虚拟列表 | Infinite Scroll & Virtual List for Video List Page

[thazjswe42700]

📌 需求描述 | Description

在视频路径列表页面增加无限滚动效果，用户一直往下滚动时会持续加载更多视频内容。
同时为了优化性能（避免 DOM 节点过多导致页面卡顿），需要使用**虚拟列表（虚拟滚动）**的逻辑来实现无限滚动。

Add an infinite scroll effect on the video list page — as the user scrolls down, more videos are loaded continuously.
To avoid excessive DOM nodes causing performance issues, implement this using virtual scrolling (virtual list) logic.

---

🎯 具体需求 | Requirements

1. 无限滚动 | Infinite Scroll

• 用户滚动到页面底部时自动加载下一批视频
• 加载过程中显示 loading 状态（骨架屏或 spinner）
• 所有视频加载完毕后停止触发加载
• Auto-load the next batch of videos when user scrolls to the bottom
• Show loading state (skeleton screen or spinner) during loading
• Stop triggering loads when all videos have been fetched

2. 虚拟列表 | Virtual List

• 只渲染可视区域内的 DOM 节点，不可见节点不渲染或回收
• 滚动时动态替换可视区域内的列表项
• 保持滚动条高度与实际内容总量一致（模拟完整列表高度）
• Only render DOM nodes within the viewport; recycle or skip off-screen nodes
• Dynamically swap list items as the user scrolls
• Maintain scrollbar height consistent with total content length (simulate full list height)

3. 兼容性 | Compatibility

• 与现有视频播放和路由系统兼容
• 支持浏览器前进/后退（滚动位置恢复）
• Compatible with existing video playback and routing
• Support browser forward/back navigation (scroll position restoration)

---

💡 可参考方案 | Suggested Approach

• 使用 react-window、react-virtuoso 或 @tanstack/virtual 作为虚拟列表库
• 结合 Intersection Observer 或滚动事件监听做无限加载触发
• 如果数据总量未知，可采用分页游标（cursor-based pagination）模式

Libraries to consider: react-window, react-virtuoso, or @tanstack/virtual for virtual list.
Use Intersection Observer or scroll event listeners for infinite load triggering.
Use cursor-based pagination if total data count is unknown.

---

🏷️ 优先级 | Priority

P2 — 功能增强 (Feature Enhancement)