项目概述
面向浏览器端的在线代码运行工具，支持 HTML / CSS / JavaScript 的编写与实时预览。 编辑器采用 Monaco Editor，代码运行则通过
iframe 创建独立的执行环境， 将用户编写的代码生成预览页面并在浏览器中直接运行。
实践过程
第一版主要围绕代码编辑、运行和预览三个部分展开。 用户分别编辑 HTML、CSS 和 JavaScript，点击运行后将三部分代码进行处理并生成完整的 HTML 页面， 再交给
iframe 执行，从而实现编辑器与预览区域的基本联动。
在完成基础运行功能后，进一步处理运行环境与主页面之间的通信。 通过 postMessage 将 iframe 中产生的
console.log、console.warn 和 console.error 等信息传回主页面，并根据消息类型展示在控制台区域。
问题与处理
实际测试中发现，用户代码中的死循环可能导致 iframe 持续执行， 进而影响页面交互。针对这一问题增加超时检测， 当代码执行超过限定时间后销毁当前
iframe， 清理原有运行环境并重新创建执行环境，避免异常代码持续占用资源。
复盘
第一版的实现让我从一个简单的代码预览功能开始，逐步关注代码执行环境、 页面间通信以及异常运行状态等问题。后续在此基础上，项目进一步从单文件运行扩展到多文件项目管理， 也因此对前期的数据结构和运行逻辑进行了重新设计。
截图
