工作台使用指南¶
工作台是BEKEN LVGL UI Designer 的核心工作区域，本指南详细介绍工作台各个模块的功能和使用方法。
📐 工作台布局¶
工作台主要分为 5 个功能区域：
五大功能区域¶
- 画布区域 - 可视化设计的核心区域
- 组件库 - 丰富的 UI 组件库
- 组件树 - 组件层级结构管理
- 属性面板 - 属性和样式编辑
- 事件系统 - 组件交互事件配置
- 多语言功能 - 多语言配置和使用
- 时间轴动画 - 动画轨道与关键帧配置
- 自定义字符 - 自定义字符配置和管理
- 自定义代码 - 设计器内自定义代码与外部 IDE 扩展
- 工具栏 - 项目管理、资源管理、预览及常用功能
- 存档与历史 - 保存当前版本、查看历史存档和恢复版本
- AI设计 - 使用 AI 工具辅助界面设计
快捷键¶
查看完整的快捷键列表，请参考 快捷键 文档。
📚 详细文档¶
点击下方链接查看各模块的详细使用说明：
核心功能模块¶
- 🎨 画布区域
- 视图控制（缩放、平移、网格）
- 标尺和参考线
- 组件操作（添加、选择、移动、调整大小）
-
组件对齐、层级、锁定和隐藏
- 系统组件库（30+ 种组件）
- 组件分类和搜索
-
自定义组件库的创建和使用
- 页面管理（创建、切换、删除、重命名）
- 组件层级显示
-
组件操作（选择、重命名、拖拽排序）
- 基础属性编辑
- 样式编辑器（部件、状态）
-
样式库功能
- 事件编辑器使用
- 事件类型和动作类型
-
事件配置和示例
- 项目设置中开启多语言
- 资源管理中配置语言和翻译
- 组件属性启用翻译
-
事件动作中使用多语言
- 动画轨道与关键帧管理
- 属性随时间变化配置
- 动画预览与调参
-
通过事件触发动画
- 启用/禁用自定义字符功能
- 配置字符和字符范围
- FontAwesome 图标支持
-
同步功能自动生成配置
- 设计器内：页面、事件、调用函数
- 外部 IDE：
BEKEN_USER_CODE区域 -
代码编辑器可编辑范围
- 项目信息和保存状态
- 编辑操作（撤销/重做）
- 视图控制
- 资源管理器
-
预览及代码生成
- 保存当前项目版本
- 查看历史存档并切换页面预览
-
恢复到指定历史版本
- 从工具栏启动 Cursor / Codex / TRAE / TRAE CN
- MCP 与 Skill 环境安装
- 自然语言描述界面需求
- 修改确认与常见问题
其他¶
- ⌨️ 快捷键
- 通用操作快捷键
- 组件操作快捷键
- 组件调整快捷键