# 子项目：Flex Layout Builder (自定义布局生成器)

## 📝 项目概述
这是一个基于 Web 的自定义布局生成工具。
- **核心功能**：在固定的 1920x1080 画布上，通过拖拽组件自由组合生成模板布局。
- **应用场景**：大屏可视化布局设计、自定义面板生成。

## 🛠 技术栈
- **核心**: HTML5, CSS3, JavaScript (ES5/ES6+)
- **库/框架**: jQuery, Layui (UI组件库)
- **数据存储**: localStorage (本地持久化)

## 📂 项目结构
```text
demoHtml/flex/
├── css/                # 样式文件
├── js/                 # 逻辑脚本
├── layui/              # Layui 框架资源
├── data.json           # localStorage 数据结构示例（核心参考）
├── config.json         # 配置文件
├── index.html          # 主编辑器页面
└── list.html           # 列表/预览页面
```

## 📐 核心架构
### DOM 结构
```html
<div id="app">
    <!-- 左侧：组件列表 -->
    <div id="components-panel"></div>
    <!-- 中间：画布容器 (1920*1080) -->
    <div id="canvas-panel"></div>
    <!-- 右侧：属性配置 -->
    <div id="props-panel"></div>
</div>
```

### 数据规范
- **数据源**: 项目依赖 `localStorage` 进行状态保存。
- **结构定义**: 详细的数据结构定义 **必须** 参考 `data.json` 文件。在操作数据前，请务必读取该文件理解字段含义。

## 🤖 开发与交互规范 (继承全局规范)

### 核心指令
1.  **中文优先**：沟通、注释、日志均使用中文。
2.  **执行流程**：**必须** 遵循 `分析 (Understand) -> 计划 (Plan) -> 用户确认 (Approve) -> 执行 (Execute)` 的流程。
3.  **代码修改**：
    - **严禁破坏性修改**：**绝对禁止** 更改现有代码逻辑或删除现有注释，除非是为了修复明确的 Bug。
    - **增量开发**：优先通过新增函数/逻辑来满足新需求。
    - **jQuery/Layui 规范**：遵循 jQuery 的 DOM 操作模式和 Layui 的组件使用规范。

### 任务列表
- [ ] (在此处添加新任务)