用 Vaadin 的 AI Copilot 快速设计 UI

喂，这是 Markk 从 Vaadin 发来的，今天我要展示一下当你使用 Vaadin Copilot 辅助快速创建 UI 时，它可能会看起来是什么样子。我们正在开发这个内部后台应用，这个项目还在进行中，所以我们直接跳到问题跟踪器中获取一些问题。首先的问题是“添加欢迎屏幕的标题栏”，看起来相对简单。我先复制浏览器中的图片，然后找到欢迎页面，在欢迎页面打开后，我会启用 Copilot，可以从下方按钮中启用，或者使用快捷键，在 Mac 上按住 Shift 并双击 Command，Windows/Linux 上双击 Control。这样就可以快速切换 Copilot 的开关了。启用 Copilot 后，我可以看到这里的元素，可以选择某些元素，还有其他隐藏在侧边的功能，可以全面了解视图。不过目前我先直接将图片粘贴到这里，可能不想放在原位置，可以拖动上方的位置。我注意到这里有一个拼写错误，我会先修改一下“connect with colleagues” 为正确的内容。接下来我们跳到代码部分，点击 Source 会带我们到该组件添加的位置，可以看到这里是 Java 流视图，项目中同时有 React 和 Java 视图，这是 Java 视图，它已经将图片添加到 UI 中，并将其导入到 UI 组件中。它添加了这些布局元素，而实际字段定义在上面，这很方便。