UD5工具箱
功能特性
组件预览沙盒 提供了丰富的功能来支持 React 和 Vue3 组件的在线开发和预览。以下是各功能模块的详细介绍：
React 模式
支持使用 React 框架编写和预览组件。在 React 模式下，开发者可以在代码编辑器中编写 JSX 语法的组件代码，工具内置的 Babel Standalone 编译器会将 JSX 语法实时编译为 React.createElement 调用，然后在 iframe 沙盒中使用 ReactDOM.render（或 createRoot）渲染组件。React 模式支持 useState、useEffect、useRef、useCallback 等常用 Hooks，支持事件处理、条件渲染、列表渲染等常见的 React 组件编写模式。预设示例包括一个简单的计数器组件（展示 useState 和事件处理）、一个 TodoList 组件（展示列表渲染和状态管理）、以及一个表单组件（展示表单元素和受控组件模式）。
Vue3 模式
支持使用 Vue3 框架编写和预览组件。在 Vue3 模式下，开发者可以使用 Composition API 风格编写组件代码，通过 setup 函数或 script setup 语法组织组件逻辑。Vue3 模式使用 Vue3 的 createApp 和 mount 方法将组件挂载到沙盒容器中，支持响应式数据（ref、reactive）、计算属性（computed）、侦听器（watch）以及生命周期钩子等核心功能。预设示例包括一个计数器组件（展示 ref 和事件绑定）、一个 TodoList 组件（展示 reactive 状态管理和列表渲染）、以及一个双向绑定演示组件（展示 v-model 指令和表单元素的双向数据流）。
Babel Standalone 实时编译
工具内置了 Babel Standalone 编译器，能够在浏览器端实时将 JSX 语法编译为标准的 JavaScript 代码。Babel Standalone 是 Babel 编译器的浏览器版本，无需 Node.js 环境即可运行。在 React 模式下，Babel 将 JSX 语法转换为 React.createElement 调用；在 Vue3 模式下，Babel 将组件代码编译为 Vue3 兼容的渲染函数。编译过程在每次代码变更时自动触发，编译结果会在编译成功后立即更新到预览面板中。如果代码存在语法错误，编译器会在编辑器中显示错误提示信息，帮助开发者快速修复问题。
iframe 沙盒隔离
所有组件的渲染和执行都在一个独立的 iframe 沙盒中进行，与工具的主界面完全隔离。这种隔离机制确保了组件代码的执行不会影响到工具本身的功能和稳定性。iframe 沙盒还提供了样式隔离，组件中定义的 CSS 样式不会泄漏到主界面，主界面的样式也不会影响到组件的渲染效果。每个预设示例的切换都会重新创建 iframe 沙盒，确保不同示例之间的状态完全隔离，避免变量污染和状态残留。
控制台输出面板
提供了一个独立的控制台输出面板，能够捕获和显示组件代码中 console.log、console.warn、console.error 等控制台方法的输出信息。控制台面板使用拦截技术覆写了 iframe 沙盒中的 console 对象方法，在保留原始控制台功能的同时，将输出内容同步显示到工具界面的控制台面板中。输出信息按照日志级别进行颜色编码：普通日志显示为黑色、警告信息显示为黄色、错误信息显示为红色。控制台面板支持一键清空，方便开发者查看新的输出内容。
复制、重置与全屏预览
工具操作栏提供了三个便捷功能按钮：(1) 复制代码——一键将编辑器中的代码内容复制到系统剪贴板，方便开发者将代码保存到本地文件或分享给同事；(2) 重置代码——将编辑器内容恢复为当前选择的预设示例的初始状态，清除所有手动修改，方便重新开始编辑；(3) 全屏预览——将组件预览区域扩展为浏览器全屏模式，隐藏编辑器和控制台面板，提供最大的可视区域来查看组件的渲染效果，特别适合演示和截图场景。全屏模式下可以通过按 Esc 键或点击退出按钮返回正常视图。
6 个预设示例
内置了6个精心设计的预设示例，涵盖 React 和 Vue3 两种框架的常见组件类型。React 示例包括：(1) 计数器组件——展示 useState Hook 的使用和按钮点击事件处理；(2) TodoList 组件——展示数组状态管理、列表渲染和条件渲染；(3) 表单组件——展示受控输入框、复选框和提交处理。Vue3 示例包括：(1) 计数器组件——展示 ref 响应式数据和事件绑定；(2) TodoList 组件——展示 reactive 对象状态管理和 v-for 列表渲染；(3) 双向绑定组件——展示 v-model 指令在表单元素中的应用。每个示例都包含了完整的组件代码、样式定义和交互逻辑，是学习框架组件编写方式的优质参考。