# 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

### 安装依赖

```bash
pnpm install
```

### 开发模式

```bash
pnpm dev
```

### 构建命令

```bash
# Windows
pnpm build:win

# macOS
pnpm build:mac

# Linux
pnpm build:linux
```

### 代码检查

```bash
# 格式化
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 格式存储
- 支持多语言切换（中文/英文）