四种布局模式
支持网格布局、水平分栏、垂直堆叠和标签页四种预览模式。网格布局自动排列子应用卡片,适合同时预览多个应用;水平分栏将应用左右并排,适合对比展示;垂直堆叠上下排列,适合纵向页面组合;标签页通过选项卡切换显示,适合逐个查看。不同布局适配不同集成场景,用户可根据实际需求灵活切换,无需修改任何代码配置,切换时已有子应用会自动重新排列。
子应用管理
通过左侧面板添加子应用,输入应用名称和 URL 即可将子应用嵌入预览区域。每个子应用独立显示在 iframe 中,支持单独刷新和在新窗口中打开。用户可随时删除不需要的子应用,灵活管理集成列表,操作直观简便。
iframe 集成
基于 iframe 标准技术嵌入子应用,每个子应用运行在独立的浏览上下文中,天然实现样式和脚本隔离。iframe 使用 sandbox 属性进行安全沙箱控制,可配置 allow-scripts、allow-same-origin 等权限策略,确保子应用之间的安全隔离。
本地数据持久化
所有配置数据自动保存在浏览器 localStorage 中,刷新页面或关闭浏览器后数据不会丢失。用户无需注册登录,所有操作均在本地完成,保障数据隐私安全。配置信息也可导出为 JSON 文件进行备份或跨设备迁移。
预设模板快速开始
工具提供预设演示模板,用户点击即可加载示例子应用列表,快速体验组合器的功能。无需手动查找 URL,降低学习成本,适合初次使用微前端概念的新手用户快速上手体验。
批量操作
支持一键刷新全部子应用和全部在新窗口打开的功能。当子应用数量较多时,批量操作可以显著提升调试效率,避免逐个手动操作的繁琐流程,让集成调试工作更加高效便捷。
响应式设计
界面采用响应式布局,在桌面端和移动端均可正常使用。左侧控制面板和右侧预览区域根据屏幕尺寸自适应调整,确保在不同设备上都有良好的使用体验。
UD5工具箱