|
|
|
@ -1,29 +1,53 @@
|
|
|
|
## 项目概述
|
|
|
|
# 子项目:Flex Layout Builder (自定义布局生成器)
|
|
|
|
这个一个指定1920*1080大小画布,自由拖动组合生成模板布局的项目
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 技术栈
|
|
|
|
## 📝 项目概述
|
|
|
|
- **html5**
|
|
|
|
这是一个基于 Web 的自定义布局生成工具。
|
|
|
|
- **css3**
|
|
|
|
- **核心功能**:在固定的 1920x1080 画布上,通过拖拽组件自由组合生成模板布局。
|
|
|
|
- **javascript**
|
|
|
|
- **应用场景**:大屏可视化布局设计、自定义面板生成。
|
|
|
|
- **jquery**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## DOM结构
|
|
|
|
## 🛠 技术栈
|
|
|
|
|
|
|
|
- **核心**: 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
|
|
|
|
```html
|
|
|
|
<div id="app">
|
|
|
|
<div id="app">
|
|
|
|
<!-- 组件列表 -->
|
|
|
|
<!-- 左侧:组件列表 -->
|
|
|
|
<div id="components-panel"></div>
|
|
|
|
<div id="components-panel"></div>
|
|
|
|
<!-- 画布容器 -->
|
|
|
|
<!-- 中间:画布容器 (1920*1080) -->
|
|
|
|
<div id="canvas-panel"></div>
|
|
|
|
<div id="canvas-panel"></div>
|
|
|
|
<!-- 当前选中组件属性 -->
|
|
|
|
<!-- 右侧:属性配置 -->
|
|
|
|
<div id="props-panel"></div>
|
|
|
|
<div id="props-panel"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## localStorage 数据结构
|
|
|
|
### 数据规范
|
|
|
|
**localStorage存储的数据结构放置在data.json中**
|
|
|
|
- **数据源**: 项目依赖 `localStorage` 进行状态保存。
|
|
|
|
|
|
|
|
- **结构定义**: 详细的数据结构定义 **必须** 参考 `data.json` 文件。在操作数据前,请务必读取该文件理解字段含义。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 🤖 开发与交互规范 (继承全局规范)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 核心指令
|
|
|
|
|
|
|
|
1. **中文优先**:沟通、注释、日志均使用中文。
|
|
|
|
|
|
|
|
2. **执行流程**:**必须** 遵循 `分析 (Understand) -> 计划 (Plan) -> 用户确认 (Approve) -> 执行 (Execute)` 的流程。
|
|
|
|
|
|
|
|
3. **代码修改**:
|
|
|
|
|
|
|
|
- **严禁破坏性修改**:**绝对禁止** 更改现有代码逻辑或删除现有注释,除非是为了修复明确的 Bug。
|
|
|
|
|
|
|
|
- **增量开发**:优先通过新增函数/逻辑来满足新需求。
|
|
|
|
|
|
|
|
- **jQuery/Layui 规范**:遵循 jQuery 的 DOM 操作模式和 Layui 的组件使用规范。
|
|
|
|
|
|
|
|
|
|
|
|
## 请阅读以下要求,必须严格遵守
|
|
|
|
### 任务列表
|
|
|
|
* 执行任何任务的时候,请先输出你的思路,等待我确认之后再修改代码
|
|
|
|
- [ ] (在此处添加新任务)
|
|
|
|
* 有任何不确认的地方,请先向我确认再执行任务
|
|
|
|
|
|
|
|
* 请任何时候使用中文与我沟通或者确认,包括项目中使用注释也使用中文
|
|
|
|
|
|
|
|
* 不要更改之前的代码逻辑,包括删除注释等,只允许添加代码,或者当老代码不能满足需求的时候才允许修改
|
|
|
|
|
|
|
|
|