vue3-mgt-template/demoHtml/flex/GEMINI.md

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

📝 项目概述

这是一个基于 Web 的自定义布局生成工具。

• 核心功能：在固定的 1920x1080 画布上，通过拖拽组件自由组合生成模板布局。
• 应用场景：大屏可视化布局设计、自定义面板生成。

🛠 技术栈

• 核心: HTML5, CSS3, JavaScript (ES5/ES6+)
• 库/框架: jQuery, Layui (UI组件库)
• 数据存储: localStorage (本地持久化)

📂 项目结构

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

📐 核心架构

DOM 结构

<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 的组件使用规范。

任务列表

• (在此处添加新任务)