界面概览

🌐 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：取消当前选择