UD5工具箱
预设风格系统
工具内置5种精心设计的预设风格，每种风格都经过视觉设计师的专业调校，确保开箱即用的美观效果：
- 默认风格：采用中性配色方案，适用于大多数通用场景，如信息提示、操作确认等，不会抢夺页面主要内容的视觉焦点。
- 简约风格：去除多余装饰元素，使用极简的边框和阴影，适合追求简洁设计语言的产品，特别适用于工具类、效率类应用。
- 现代风格：运用渐变色彩和微妙的阴影层次，营造时尚感和科技感，适合互联网产品、SaaS平台等场景。
- 优雅风格：采用柔和的色调和精致的细节处理，传递品质感和信任感，适合品牌展示、高端产品页面。
- 醒目风格：使用高对比度色彩和醒目的视觉元素，适用于需要强烈引起用户注意的场景，如促销活动、紧急通知等。
内容设置功能
模态框的内容设置提供了高度灵活的自定义能力：
- 标题设置：支持自定义模态框标题文字，标题是用户打开弹窗后首先看到的内容，清晰的标题可以帮助用户快速理解弹窗的目的和作用。
- 内容文字：支持自定义模态框主体内容，可以是纯文本描述、功能说明、条款内容等，内容区域支持多行文本输入。
尺寸设置功能
工具提供6种预设尺寸档位，覆盖从紧凑型到全屏展示的各种需求：
- 小尺寸（400px）：适用于简单信息提示、确认操作等场景，占据页面空间小，不会打断用户的主要操作流程。
- 中尺寸（550px）：最常用的尺寸，适用于登录表单、注册表单、内容编辑等中等复杂度的交互场景。
- 大尺寸（700px）：适用于需要展示较多内容的场景，如详细信息展示、复杂表单、数据列表等。
- 超大尺寸（900px）：适用于内容密集型场景，如完整的文章阅读、详细的产品介绍、多步骤表单流程等。
- 全屏尺寸（95vw）：几乎占据整个视口宽度，适用于沉浸式体验场景，如图片画廊、视频播放器、全屏编辑器等。
此外，尺寸设置还包括圆角半径和阴影强度两个微调参数。圆角半径控制模态框四角的弯曲程度，从直角到大圆角均可调节；阴影强度控制模态框的投影效果，从无阴影到深阴影，影响模态框的立体感和层次感。
样式设置功能
样式设置模块提供了三个核心视觉参数的自定义能力：
- 主题色设置：用户可以自定义模态框的主色调，影响标题栏背景、按钮颜色、边框颜色等关键视觉元素，确保模态框与网站整体品牌风格保持一致。
- 遮罩颜色：遮罩层（Overlay）是模态框背后的半透明覆盖层，用户可以设置遮罩的颜色，通常使用黑色或深色，也可以根据品牌需要使用其他颜色。
- 遮罩透明度：控制遮罩层的透明程度，从完全透明到完全不透明，影响背景内容的可见程度和模态框的视觉突出程度。
动画效果功能
工具提供5种动画效果，为模态框的出现和消失增添流畅的视觉过渡：
- 淡入（Fade In）：模态框从完全透明平滑过渡到完全可见，视觉效果温和自然，适用于大多数场景。
- 从上滑入（Slide From Top）：模态框从视口顶部向下滑动进入，适合从顶部触发的操作场景。
- 从下滑入（Slide From Bottom）：模态框从视口底部向上滑动进入，类似于移动应用的底部弹窗效果。
- 缩放弹出（Scale Pop）：模态框从中心点从小到大缩放出现，视觉冲击力强，适合需要强调的场景。
- 无动画：模态框瞬间出现，适用于不需要过渡效果或追求极简体验的场景。
按钮设置功能
按钮设置模块支持对模态框底部操作按钮的全面定制：
- 确认按钮文字：自定义主操作按钮的文案，如"确定"、"提交"、"保存"、"立即注册"等，引导用户执行目标操作。
- 取消按钮文字：自定义次操作按钮的文案，如"取消"、"关闭"、"稍后再说"等，提供退出弹窗的途径。
- 按钮圆角：控制按钮的圆角程度，从直角按钮到完全圆角按钮均可设置，影响按钮的视觉风格。
行为设置功能
行为设置模块控制模态框的交互行为，提升用户体验：
- 显示关闭按钮：是否在模态框右上角显示×关闭按钮，为用户提供直观的关闭入口。
- 点击遮罩关闭：点击模态框背后的遮罩层是否关闭弹窗，符合用户点击空白处关闭弹窗的操作习惯。
- 按ESC键关闭：按下键盘ESC键是否关闭模态框，遵循Web无障碍交互规范，提升可访问性。
代码输出功能
工具支持三种代码输出格式，满足不同的项目集成需求：
- 完整HTML：包含HTML结构、内联CSS样式和JavaScript交互逻辑的完整页面代码，可以直接在浏览器中打开运行。
- HTML片段：仅输出模态框的HTML结构代码，适用于已具备CSS和JavaScript基础设施的项目，开发者可以将片段嵌入现有页面结构中。
- CSS样式：仅输出模态框的CSS样式代码，适用于需要样式复用或自定义JavaScript交互逻辑的场景。