[r2cn] mega UI 树组件问题修复

[benjamin-747]

[任务] mega UI 树组件问题修复

[任务分值] 20 分

[背景描述]

在 mega 项目中，UI 界面包含一个树状组件，用于展示目录结构或数据层级关系，并在右侧提供目录或代码的预览区域。当前版本的树组件存在布局问题：树与右侧预览区域的宽度比例不合理，导致整体界面观感和可用性下降。此外，该问题属于历史遗留问题，代码结构和样式可能存在一定复杂性，需要在修复时兼顾兼容性与可维护性。

[需求描述]

1. 修复树组件的布局错落问题，使其节点层级和结构展示正常。
2. 调整树组件与右侧目录/代码预览区域的比例，使界面布局更加合理和美观。
3. 对历史遗留问题进行梳理，确保修复后代码结构清晰，避免再次引发同类问题。
4. 在必要时优化样式和组件逻辑，提高组件的可维护性和扩展性。

[代码标准]

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

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

[开发指导]

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]

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