https://warmeaf.github.io/element-tree-copy/
基于稳定源代码和 AI 的渐进式学习方法，从 0 到 1 复刻ElementUI tree组件
- 配合 AI 并运用公式进行学习，产出文档
阅读源码，根据我提供的公式生成可供参考的源码学习文档。
公式：架构 + 数据结构 + 经验
● 架构
○ 组件化 + 状态管理 + 分层思想
● 数据结构
○ 树形数据，并随开发过程不断完善
● 经验
○ 面向对象编程。树节点的数据模型类和树的全局数据存储和管理类
○ 原生拖拽 API 的使用
同时注意以下几点：
● 如果存在我漏掉的部分，请自行完善补充。完善补充的内容要归纳到给定的公式定义里
● 不要过多探究细节，重点在于把握实现的整体脉络
@src/ @源码学习文档.md- 配合 AI 一步一步复刻实现，每一步都是一个代码分支，比如：step-1、step-2（重点和关键步骤）
现在我想基于源码自行复刻一个 tree 组件，所以需要规划复刻步骤，复刻步骤的文档要求如下：
- 基于公式（架构 + 数据结构 + 经验）指导实现
- 根据复刻步骤，做到功能 100% 一致
- 每一步都要有标题、具体要达到的效果、该做什么不该做什么、分支命名
@src/ @复刻步骤.md @源码学习文档.md参考源码：@src/ ，实现步骤 1，@src/ 。plan 用中文从 数据层和状态管理、视图渲染结构、交互行为、配置 这四个层面审查步骤 1 是否与源码保持一致。运行 pnpm test src\tree\_\_tests\_\_\tree.checkbox.spec.js 分析单测报错。以源码：@src/ 为标准分析是单测问题还是代码实现的问题，如果实现的代码和源码一致就调整单测。你是一个前端讲师，非常擅长以通俗的语言讲解专业的前端知识。
先比较当前分支与 feature/tree-step2-node-model 分支在 src\tree\src 文件夹下代码的不同，专注于当前分支的代码更改，然后再讲解当前分支相关功能的代码实现。首先不涉及过多的代码细节，讲整体的实现思路，然后循序渐进的讲解完整的实现流程。