Skip to content

README.md

Latest commit

 

History

History
136 lines (117 loc) · 5.85 KB

README.md

File metadata and controls

136 lines (117 loc) · 5.85 KB

Vue3 LeetCode 算法可视化辅助工具

技术实施 Skill 文档（AI 生成代码专用·最终优化版）

核心定位

Vue3 工程化实现的 LeetCode 专属刷题辅助工具，支持粘贴/编写 LeetCode 标准 JS 算法代码，自动解析语法与数据结构，实时生成 2D+3D 融合可视化结构，实现代码逐行执行 ↔ 动态节点生成/变化强绑定；内置代码编辑器、测试用例运行、本地判题，完美贴合 LeetCode 刷题流程，轻量化可直接运行。

一、强制技术栈（不可修改）

分类 技术选型 核心用途
核心框架 Vue3.4 + Vite + <script setup> 工程化开发、组件化渲染
状态管理 Pinia 全局管理代码、可视化状态、LeetCode 题目配置
UI 组件 Element Plus 布局、按钮、表单、弹窗、控制台面板
代码编辑 Monaco Editor（vue3 适配） LeetCode 代码编写、语法高亮、逐行标记
2D 渲染 原生 Canvas 2D API 代码快照、执行日志、数据轨迹、测试用例展示
3D 渲染 Three.js r160+ 数组/链表/二叉树 3D 节点、动画、连线渲染
核心能力 原生 JS 代码解析 + 安全沙箱 解析 LeetCode 代码、隔离执行、节点联动调度
动画控制 requestAnimationFrame 2D+3D 帧同步渲染，无延迟、无卡顿

二、AI 核心强制规则（LeetCode 专属）

  1. LeetCode 100% 适配
    • 自动识别 LeetCode 标准函数：twoSum/reverseList/inorderTraversal 等
    • 自动识别内置数据结构：ListNode(链表)、TreeNode(二叉树)
    • 自动加载 LeetCode 测试用例、匹配输入输出格式
  2. 可视化强关联 一行 LeetCode 代码 = 2D 代码高亮 + 3D 节点操作（生成/移动/变色/连线）
  3. 2D+3D 分工
    • 2D：代码编辑、执行日志、测试用例、数据平面快照
    • 3D：数据结构立体可视化、动态动画、节点关联
  4. 安全规范 沙箱执行代码，禁止恶意操作，无全局污染

三、全局架构设计

src/
├── api/              # 模拟 LeetCode 题目/测试用例接口
├── components/        # 核心业务组件
│   ├── CodeEditor.vue      # LeetCode 代码编辑器（Monaco）
│   ├── VisualCanvas2D.vue  # 2D 可视化组件
│   ├── VisualThree3D.vue   # 3D 可视化组件
│   └── LeetCodeTestCase.vue # 测试用例管理
├── stores/            # Pinia 状态
│   ├── codeStore.js   # 代码/执行状态
│   └── visualStore.js # 2D+3D 可视化状态
├── utils/             # 工具库
│   ├── codeParser.js  # LeetCode 代码解析器
│   ├── sandBox.js     # 安全沙箱执行
│   └── syncCore.js    # 代码-2D-3D 联动核心
├── views/
│   └── Index.vue      # 主页面
├── App.vue
└── main.js

四、核心功能模块（优先级：高→低）

模块 1：LeetCode 代码编辑器（最高优先级）

  1. 集成 Monaco Editor，默认填充 LeetCode 官方 JS 代码模板
  2. 支持直接粘贴 LeetCode 刷题代码，自动语法校验、高亮
  3. 逐行执行标记：当前行高亮黄、已执行灰、完成绿
  4. 一键重置为 LeetCode 原始模板

模块 2：LeetCode 代码自动解析（最高优先级）

  1. 解析范围：数组、链表、二叉树、循环、判断、赋值、交换
  2. 自动识别：ListNode/TreeNode、函数入参、循环体、核心逻辑
  3. 输出执行步骤队列，用于驱动可视化
  4. 语法错误实时提示，定位代码行

模块 3：2D+3D 融合可视化（最高优先级）

3.1 2D Canvas 能力

  • 实时绘制 LeetCode 数据结构平面快照
  • 输出执行日志：对应代码行+节点操作
  • 展示测试用例输入输出

3.2 3D Three.js 能力

  • 数组：3D 柱状体（高度=数值）
  • 链表：球体节点 + 圆柱体指针连线
  • 二叉树：层级球体节点 + 父子连线
  • 动画：交换位移、高亮变色、节点生成/销毁

3.3 联动规则

  • 初始化 → 生成 3D 节点
  • 循环/比较 → 节点标黄
  • 赋值/交换 → 节点动画
  • 执行完成 → 全部节点变绿

模块 4：执行控制中心

  1. 按钮：运行、单步执行、暂停、重置、速度调节
  2. 绑定 LeetCode 测试用例，一键运行校验
  3. 执行状态实时展示：执行中/完成/错误

模块 5：LeetCode 刷题辅助（优化核心）

  1. 内置高频 LeetCode 题目代码模板
  2. 自动匹配测试用例，本地判题
  3. 执行结果对标 LeetCode 官方输出
  4. 算法思路/复杂度提示面板

五、Vue3 编码强制规范

  1. 统一使用 <script setup> 语法，无 Options API
  2. 组件化拆分：代码编辑器/2D/3D 独立组件，解耦维护
  3. Pinia 统一管理全局状态，禁止全局变量
  4. 可视化逻辑抽离到 utils/，组件仅负责渲染
  5. 全中文注释，标注 LeetCode 代码 ↔ 可视化节点 关联关系
  6. 响应式布局，适配 PC 端刷题场景

六、AI 一键生成指令（直接复制）

严格按照此文档生成 Vue3+Vite 完整项目：
1. 使用 Vue3 <script setup> + Pinia + Element Plus + Monaco Editor
2. 实现 LeetCode 专属代码编辑器，支持粘贴官方 JS 代码
3. 自动解析 LeetCode 代码，识别 ListNode/TreeNode/数组/循环
4. 集成 Canvas 2D + Three.js 实现 2D+3D 融合可视化
5. 代码逐行执行与 2D 高亮、3D 节点实时强关联
6. 支持运行/单步/暂停/重置、测试用例运行、本地判题
7. 输出完整可运行项目，包含所有文件、依赖、配置
8. 项目可直接 npm install 安装依赖并运行

七、快速运行命令

npm create vite@latest leetcode-algo-visual -- --template vue
cd leetcode-algo-visual
npm install pinia element-plus three monaco-editor-vue3
npm run dev