[r2cn] 重构files-changed 页面加载逻辑

[benjamin-747]

[任务] 重构files-changed 页面加载逻辑

[任务分值] 30 分

[背景描述]

files-changed 页面当前的实现方式是一次性加载所有变更文件及其树形目录结构。当提交涉及的文件数量较少时，整体体验尚可；但当提交包含大量文件变更（例如数百至上千个文件）时，现有实现会出现以下问题：
1. 树组件性能瓶颈：由于一次性加载所有文件数据，前端渲染时会造成明显卡顿，甚至页面无响应。
2. 文件列表滚动体验差：文件内容展示区域缺乏懒加载机制，加载过多文件时 DOM 节点过多，导致滚动和交互体验明显下降。

[需求描述]

1. 树组件优化

• 引入 按需渲染 或 虚拟化技术，避免一次性渲染完整树结构。
• 提供 懒加载文件夹节点 功能，只有用户展开时才去加载对应目录下的文件。
• 保持目录层级清晰的同时，降低初始加载压力。

2. 文件列表懒加载

• 针对文件内容（diff 展示），采用 按需加载 的方式，仅在用户滚动到对应位置时才渲染对应文件。
• 当用户点击某个文件时，再进行内容请求与渲染，避免一次性渲染所有 diff。
• 保证在大量文件（>500）的场景下仍然能流畅滚动与操作。

3. 用户体验

• 确保懒加载与按需渲染逻辑对用户透明，即用户在使用时感受到的是顺滑的交互。
• 保持 UI 一致性，支持用户对单个文件、批量文件展开/折叠操作。
• 在懒加载时提供轻量的加载中提示，避免用户误以为界面无响应。

4. 扩展性

• 设计时需考虑未来可能的扩展场景，例如：增量加载（仅加载最新变更的文件）、按文件类型筛选、文件搜索等功能。

[代码标准]

1. 所有 PR 提交必须签署 Signed-off-by 和 使用 GPG 签名，即提交代码时（使用 git commit 命令时）至少使用 -s -S 两个参数，参考 Contributing Guide；
2. 所有 PR 提交必须通过 GitHub Actions 自动化测试，提交 PR 后请关注 GitHub Actions 结果；
3. 代码注释均需要使用英文;

[PR 提交地址] 提交到 mega 仓库的 main 分支 `` 目录；

[开发指导]

1. 认领任务参考 r2cn 开源实习计划 - 任务认领与确认;

[导师及邮箱] 请申请此题目的同学使用邮件联系导师，或加入到 R2CN Discord 后在 #p-meta 频道和导师交流。

1. Quanyi Ma genedna@gmail.com
2. Tianxing Ye yetianxing2014@gmail.com

[备注]

1. 认领实习任务的同学，必须完成测试任务和注册流程，请参考： r2cn 开源实习计划 - 测试任务 和 r2cn 开源实习计划 - 学生注册与审核

[r2cn-bot]

任务创建成功。

[yumeowo]

/request-assign

[r2cn-bot]

认领成功：等待导师审核，请及时联系导师进行审核。

[benjamin-747]

/intern-approve

[r2cn-bot]

认领审核成功：已将该任务分配给学生。

[r2cn-bot]

任务更新成功，当前分值为: 30