sunmicro-lvgl-designer/.agent/SKILL.md

LVGL Designer 技能文档

项目概述

LVGL Designer 是一个基于 LVGL 9.3 的图形化设计器，采用 Electron + Vue 3 + TypeScript 技术栈构建。该工具提供可视化的 UI 设计界面，支持拖拽式组件布局，可生成 LVGL 代码用于嵌入式 GUI 开发。

核心功能

1. 可视化设计器

• 画布拖拽操作，支持组件自由摆放
• 组件属性实时编辑
• 多页面管理与切换
• 层级结构查看与管理

2. 组件库

提供丰富的 LVGL 原生组件及自定义组件

3. 属性配置

• 位置与尺寸设置
• 背景与边框样式
• 字体与颜色配置
• 状态与标志位管理
• 动画效果配置

4. 资源管理

• 图片资源导入与管理
• 字体资源管理
• 多语言支持
• 主题配置

5. 代码生成

• 支持生成 C/C++ 代码
• 支持生成项目模板
• 代码预览与导出

技术栈

• 框架: Vue 3.5 + TypeScript
• UI 框架: Element Plus + Reka UI
• 构建工具: Electron Vite 7.1
• 状态管理: Pinia
• 路由: Vue Router
• 国际化: Vue I18n
• 编辑器: Monaco Editor
• 动画: Vue3 Moveable

项目结构

src/
├── main/                    # 主进程代码
│   ├── client.ts            # 客户端通信
│   ├── files.ts             # 文件操作
│   ├── pipe-server.ts       # 管道服务
│   └── index.ts             # 入口文件
├── preload/                 # 预加载脚本
└── renderer/                # 渲染进程
    └── src/
        ├── components/      # 公共组件
        ├── lvgl-widgets/    # LVGL 组件定义
        ├── views/           # 页面视图
        │   └── designer/    # 设计器主界面
        │       ├── config/   # 属性配置面板
        │       ├── sidebar/  # 侧边栏
        │       ├── tools/    # 工具栏
        │       └── workspace/# 工作区
        ├── store/           # 状态管理
        ├── types/           # 类型定义
        └── utils/           # 工具函数

开发指南

环境要求

• Node.js >= 20.x
• pnpm >= 8.x

安装依赖

pnpm install

开发模式

pnpm dev

构建命令

# Windows
pnpm build:win

# macOS
pnpm build:mac

# Linux
pnpm build:linux

代码检查

# 格式化
pnpm format

# 代码检查
pnpm lint

# 类型检查
pnpm typecheck

核心模块说明

1. 状态管理 (store)

• app.ts: 应用全局状态
• project.ts: 项目状态管理
• action.ts: 操作历史记录
• pipe.ts: 管道通信状态

2. 组件系统

每个 LVGL 组件包含：

• 组件定义文件 (*.vue)
• 样式配置 (style.json)
• 导出模块 (index.ts)

3. 属性配置

配置面板支持：

• 基础属性（位置、尺寸、ID）
• 样式属性（背景、边框、字体）
• 状态属性（标志位、状态列表）
• 动画配置（缓动函数、次数）

扩展能力

添加新组件

1. 在 src/renderer/src/lvgl-widgets/ 下创建组件目录
2. 创建组件 Vue 文件和样式配置
3. 在 index.ts 中注册组件

自定义主题

通过主题配置文件自定义颜色方案和样式

注意事项

• 组件 ID 需唯一，避免冲突
• 画布操作支持撤销/重做
• 项目文件使用 JSON5 格式存储
• 支持多语言切换（中文/英文）