UD5工具箱
核心功能特性
本工具精心打造了八大核心功能模块，全方位满足开发者对 dialog 元素构建和配置的需求。
模态对话框构建
模态对话框是最常见的对话框类型，通过 showModal() 方法打开，会显示 backdrop 遮罩层并阻止用户与页面其他部分交互。
标题设置：在属性面板的"对话框标题"输入框中，输入对话框的标题文本。标题会显示在对话框的顶部区域，使用 Bootstrap 的 modal-header 样式。
内容编辑：点击对话框的内容区域，可以输入对话框的主体内容。支持纯文本和简单的 HTML 标签。内容会显示在对话框的 body 区域。
尺寸控制：提供小（sm）、默认、大（lg）和全屏（xl）四种尺寸选项。不同尺寸适用于不同内容量的对话框场景。
关闭按钮：对话框标题右侧自动包含一个关闭按钮（X 图标）。点击该按钮会触发 dialog 的 close() 方法，关闭对话框。
打开方式：通过 showModal() 方法打开对话框。工具会生成 dialog.showModal() 的 JavaScript 调用代码。
非模态对话框
非模态对话框通过 show() 方法打开，不显示 backdrop，用户可以同时与对话框和页面其他部分交互。
模式切换：在属性面板的"打开方式"区域，选择"非模态（show）"选项。工具会自动切换对话框的打开方式，生成对应的代码。
行为差异：非模态对话框不显示 backdrop 遮罩层，不会阻止用户与页面其他部分的交互。用户可以点击对话框外部的元素，对话框保持打开状态。
焦点管理：非模态对话框不实施焦点陷阱，Tab 键可以在对话框和页面其他元素之间自由移动。
ESC 关闭：非模态对话框默认也支持 ESC 键关闭，但可以通过 removeAttribute('open') 或调用 close() 方法来控制。
适用场景：非模态对话框适用于需要用户同时参考对话框内容和页面内容的场景，如浮动帮助面板、实时预览窗口、浮动工具面板等。
表单集成
表单集成是 dialog 元素的重要应用场景。本工具提供了完整的表单嵌入和提交处理功能。
启用表单：在属性面板中开启"表单集成"开关，对话框的内容区域会自动切换为表单布局，包含表单字段容器和提交按钮。
method 配置：选择表单的提交方法——GET 或 POST。GET 方法将表单数据附加到 URL，适用于搜索和筛选场景；POST 方法将表单数据放在请求体中，适用于数据提交场景。
action 配置：设置表单的提交目标 URL。如果留空，表单会提交到当前页面的 URL。
FormData 处理：工具会生成 JavaScript 代码，使用 FormData API 提取表单数据。代码示例包括遍历所有表单字段、将数据转换为对象格式、以及在控制台输出数据。
提交后关闭：配置表单提交后是否自动关闭对话框。通过 event.preventDefault() 阻止默认的表单提交行为，在 JavaScript 中处理数据后调用 dialog.close() 关闭对话框。
方法设置
dialog 元素支持两种打开方法，本工具提供了完整的配置和代码生成能力。
showModal() 方法：以模态方式打开对话框。浏览器会自动创建 backdrop 遮罩层，将对话框居中显示，并实施焦点陷阱。用户必须关闭对话框后才能与页面其他部分交互。
show() 方法：以非模态方式打开对话框。对话框以块级元素形式显示在文档流中，不创建 backdrop，不实施焦点陷阱。用户可以同时与对话框和页面其他部分交互。
方法选择：在属性面板的"打开方式"区域，通过单选按钮选择 showModal 或 show。选择后，预览区域和代码区域会立即更新，展示对应方法的效果和代码。
代码生成：工具会根据选择的方法生成对应的 JavaScript 代码。showModal 模式生成 dialog.showModal()，show 模式生成 dialog.show()。代码中还包含打开按钮的事件监听器设置。
初始状态：对话框默认处于关闭状态（不设置 open 属性）。用户需要通过 JavaScript 代码调用 showModal() 或 show() 来打开对话框。
关闭方式配置
对话框的关闭方式直接影响用户体验。本工具提供了灵活的关闭方式配置。
关闭按钮：默认在对话框标题右侧显示一个 X 图标关闭按钮。点击该按钮会调用 dialog.close() 方法关闭对话框。可以通过开关禁用此按钮。
Backdrop 点击：在模态模式下，用户点击 backdrop 遮罩层可以关闭对话框。工具会生成 backdrop 的点击事件监听器代码。可以通过开关禁用此行为。
ESC 键关闭：模态对话框默认支持 ESC 键关闭。浏览器会自动处理此行为，无需额外的 JavaScript 代码。非模态对话框也支持此行为，但需要通过 JavaScript 监听 keydown 事件实现。
formmethod="dialog"：在表单中设置 button 元素的 formmethod="dialog" 属性，点击该按钮会关闭对话框而不提交表单。这是关闭包含表单的对话框的推荐方式。
自定义关闭：工具还提供了通过 JavaScript 调用 close() 方法关闭对话框的代码示例，适用于需要自定义关闭逻辑的场景。
backdrop 样式
backdrop 遮罩层是模态对话框的重要视觉元素，本工具提供了全面的样式定制能力。
背景颜色：通过颜色选择器设置 backdrop 的背景颜色。默认为黑色（rgba(0,0,0,0.5)），支持自定义为任何颜色。
透明度调节：通过滑块调整 backdrop 的透明度，范围为 0（完全透明）到 1（完全不透明）。推荐值为 0.3-0.6，过高的透明度会影响背景内容的可见性。
模糊效果：支持为 backdrop 添加高斯模糊效果（backdrop-filter: blur）。通过滑块调整模糊半径，范围为 0px 到 20px。模糊效果可以创建毛玻璃般的视觉风格。
过渡动画：提供 backdrop 的进入和退出动画效果，包括淡入淡出、缩放和滑动。动画时长和缓动函数均可自定义配置。
CSS 生成：根据选择的样式参数，工具会自动生成配套的 CSS 代码。代码使用 ::backdrop 伪元素选择器，确保样式正确应用到 backdrop 元素上。
代码预览
代码预览功能让开发者实时查看生成的 HTML、CSS 和 JavaScript 代码。
实时同步：每当对话框配置发生变化，代码预览区域会立即更新，确保代码与预览效果始终一致。
分文件显示：代码按 HTML、CSS、JavaScript 三个标签页分别显示。开发者可以切换标签页查看不同类型代码的完整内容。
语法高亮：所有代码使用语法高亮显示，不同类型的标签、属性、选择器和关键字使用不同的颜色区分。
格式化输出：代码经过自动格式化处理，缩进统一（2 空格），遵循 Web 开发最佳实践。HTML 代码包含完整的文档结构，CSS 代码包含选择器和属性定义，JavaScript 代码包含事件监听和方法调用。
代码注释：在关键代码位置自动添加注释，解释代码的功能和使用方式，帮助其他开发者快速理解代码逻辑。
复制代码
代码复制功能是将生成的代码应用到实际项目的关键步骤。
一键复制：每个代码标签页都有独立的"复制"按钮，点击后对应的代码会被复制到剪贴板。还有"复制全部"按钮可以一次性复制所有代码。
代码验证：在复制前，工具会自动验证生成的代码是否符合语法规范，确保复制到剪贴板的代码不会产生解析错误。
完整代码：生成的代码包含完整的 HTML 结构、CSS 样式和 JavaScript 逻辑。开发者可以直接粘贴到 HTML 文件中使用，无需额外的依赖或配置。
代码分离：对于需要将 CSS 和 JavaScript 分离到独立文件的项目，开发者可以分别复制每个标签页的代码，粘贴到对应的文件中。
使用提示：复制完成后，工具会显示简短的使用提示，指导开发者如何将代码集成到项目中。提示内容包括文件位置、依赖检查和测试建议。