用途:Symfony UX 是 Symfony 的现代前端技术栈,遵循渐进增强理念——从纯 HTML 出发,只在需要处添加交互,优先服务端渲染而非客户端 JavaScript。本技能提供决策树与编排指南,帮助为具体问题挑选最简单的工具。
主要能力与选择逻辑:需要纯 JavaScript 行为(DOM 操作、事件、第三方库)用 Stimulus;需要导航或局部页面更新用 Turbo(整页 AJAX 用 Turbo Drive,单区块用 Turbo Frame,多区块用 Turbo Stream);需要可复用 UI 组件时,静态用 TwigComponent,交互后重渲染用 LiveComponent;需要图标用 UX Icons(内联 SVG,支持 200+ Iconify 图标集或本地文件);需要交互地图用 UX Map(Leaflet 或 Google Maps,支持标记、多边形、圆);实时更新用 Turbo Stream + Mercure。各工具可自然组合,典型页面同时使用多种。
使用方式:安装命令为 composer require symfony/ux-turbo symfony/stimulus-bundle symfony/ux-twig-component symfony/ux-live-component,也可单独安装各包;UX Map 需再添加渲染器(symfony/ux-leaflet-map 免费,symfony/ux-google-map 需 API key)。组件放在 src/Twig/Components,模板放在 templates/components,Stimulus 控制器放在 assets/controllers。
适用场景:SPA 式导航、局部刷新、内联编辑、分页、模态加载、实时校验表单、实时搜索、图标渲染、交互地图等。
限制与注意:静态内容不要用 LiveComponent,单区块更新不必用 Turbo Stream,Turbo 能处理时不要写 Stimulus;地图容器必须显式设置高度;部署前运行 php bin/console ux:icons:lock 避免运行时请求 Iconify API。具体版本、收费与性能数据暂未提供。