界面概览

【UI Overview】

Onlook 的界面设计直观，便于设计师使用，同时提供强大的功能用于编辑 React 组件。

【Onlook's interface is designed to be intuitive for designers while providing powerful capabilities for editing React components.】

主界面区域

【Main Interface Areas】

Onlook 界面分为几个关键区域：

【The Onlook interface is divided into several key areas:】

• 画布：显示并与组件交互的主要区域
• 图层面板：显示组件层次结构，类似于设计工具中的图层
• 属性面板：编辑所选组件的属性
• 样式编辑器：通过可视化界面修改 Tailwind 样式
• 代码面板：查看和编辑生成的代码
• AI 聊天：与 AI 互动，以帮助生成和修改组件

导航

【Navigation】

• 使用 项目选择器 在项目之间切换
• 文件浏览器允许你浏览项目文件
• 面包屑导航显示你在组件层次结构中的当前位置

键盘快捷键

【Keyboard Shortcuts】

Onlook 提供各种键盘快捷键来加快你的工作流程：

【Onlook provides various keyboard shortcuts to speed up your workflow:】

• Ctrl/Cmd + S：保存更改
• Ctrl/Cmd + Z：撤销
• Ctrl/Cmd + Shift + Z：重做
• Ctrl/Cmd + C：复制选中的组件
• Ctrl/Cmd + V：粘贴组件
• 删除：移除选中的组件
• Esc：取消当前选择