# koa-h5 **Repository Path**: sun-guowei_admin/koa-h5 ## Basic Information - **Project Name**: koa-h5 - **Description**: 这是一个，正在开发的H5可视化编辑工具。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-09-29 - **Last Updated**: 2025-10-09 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # H5营销活动页面构建器 一个基于Koa.js的H5营销活动页面可视化构建工具，支持拖拽式页面设计、实时预览和页面保存功能。 ## 🚀 项目特性 ### 核心功能 - **可视化页面构建**：拖拽式界面，所见即所得 - **多元素支持**：文本、图片、按钮、表单、网格布局 - **实时属性编辑**：位置、大小、颜色、字体等属性实时调整 - **页面保存/加载**：JSON格式保存页面配置，支持多页面管理 - **实时预览**：生成HTML预览页面，支持移动端适配 - **响应式设计**：375px标准移动端宽度，完美适配H5页面 ### 技术特性 - **模块化架构**：功能模块分离，代码结构清晰 - **现代前端技术**：ES6+、CSS3、HTML5 - **后端API**：Koa.js提供RESTful API - **自定义UI组件**：Toast通知、手风琴菜单、网格选择器 ## 📁 项目结构 ``` koa-h5/ ├── app.js # Koa服务器主文件 ├── package.json # 项目依赖配置 ├── README.md # 项目说明文档 ├── data/ # 页面数据存储目录 │ ├── *.json # 保存的页面配置文件 ├── public/ # 静态资源目录 │ ├── index.html # 主页面 │ ├── css/ │ │ └── style.css # 样式文件 │ ├── js/ # JavaScript模块目录 │ │ ├── PageBuilder.js # 主应用类 │ │ ├── modules/ # 功能模块 │ │ │ ├── ElementManager.js # 元素管理模块 │ │ │ ├── DragDropManager.js # 拖拽管理模块 │ │ │ ├── StructureManager.js# 结构库管理模块 │ │ │ ├── AccordionManager.js# 手风琴管理模块 │ │ │ └── ApiManager.js # API管理模块 │ │ └── utils/ # 工具模块 │ │ └── toast.js # Toast通知工具 │ ├── images/ # 图片资源 │ │ ├── demo.webp # 默认图片 │ │ └── demo.svg # 备用图片 │ └── previews/ # 预览页面目录 │ └── preview_*.html # 生成的预览页面 └── node_modules/ # 依赖包目录 ``` ## 🛠️ 功能模块详解 ### 1. 元素管理模块 (ElementManager.js) **功能**：负责页面元素的创建、渲染、样式管理 - `createElement(type, x, y, cols)` - 创建新元素 - `renderElement(element)` - 渲染元素到画布 - `selectElement(element)` - 选择/取消选择元素 - `updateElementStyle(element, inputId, value)` - 更新元素样式 - `getDefaultStyle(type)` - 获取元素默认样式 - `getDefaultContent(type)` - 获取元素默认内容 **支持的元素类型**： - **文本元素**：支持内容编辑、字体大小、颜色、对齐方式 - **图片元素**：支持图片路径、尺寸调整、对象适配 - **按钮元素**：支持文字编辑、背景颜色、点击效果 - **输入框元素**：支持占位符、样式定制 - **网格元素**：支持多列布局、子元素拖拽 ### 2. 拖拽管理模块 (DragDropManager.js) **功能**：处理元素库到画布的拖拽交互 - `setupDragAndDrop()` - 初始化拖拽功能 - `refreshDragAndDrop()` - 刷新拖拽功能（动态元素） **拖拽特性**： - 支持从元素库拖拽到画布 - 支持拖拽到网格容器内 - 实时位置反馈 - 边界检测和限制 ### 3. 结构库管理模块 (StructureManager.js) **功能**：管理网格结构的选择和创建 - `setupStructureLibrary()` - 初始化结构库功能 - `createFullWidthGrid(cols)` - 创建全宽网格 - `positionTooltip(target, tooltip)` - 定位选择气泡 **网格特性**： - 支持2列、3列、4列网格选择 - 点击式交互（非悬停） - 可视化预览 - 全宽布局（375px） ### 4. 手风琴管理模块 (AccordionManager.js) **功能**：管理侧边栏的展开/收起 - `setupAccordion()` - 初始化手风琴功能 - `expand(targetId)` - 展开指定内容 - `collapse(targetId)` - 收起指定内容 - `toggle(targetId)` - 切换展开状态 **手风琴特性**： - 仅主分类支持手风琴（元素库、结构库） - 子分类直接显示（文本、图片、按钮、表单） - 平滑动画过渡 - 状态记忆 ### 5. API管理模块 (ApiManager.js) **功能**：处理与后端API的交互 - `savePage(pageData, filename)` - 保存页面数据 - `loadPage(filename)` - 加载页面数据 - `getPageList()` - 获取页面列表 - `generatePreview(pageData, filename)` - 生成预览页面 **API端点**： - `POST /api/save` - 保存页面 - `GET /api/load/:filename` - 加载页面 - `GET /api/pages` - 获取页面列表 - `POST /api/preview` - 生成预览 ### 6. Toast通知工具 (toast.js) **功能**：提供自定义的提示消息系统 - `show(message, type, duration)` - 显示消息 - `success(message, duration)` - 成功消息 - `error(message, duration)` - 错误消息 - `warning(message, duration)` - 警告消息 - `info(message, duration)` - 信息消息 - `confirm(message, onConfirm, onCancel)` - 确认对话框 - `prompt(message, placeholder, onConfirm, onCancel)` - 输入对话框 **Toast特性**： - 多种消息类型（成功、错误、警告、信息） - 自定义显示时长 - 确认和输入对话框 - 自动消失和手动关闭 - 响应式设计 ## 🎨 界面设计 ### 布局结构 - **顶部工具栏**：清空、保存、加载、预览功能 - **左侧边栏**：元素库、结构库（手风琴式） - **中央画布**：375px标准移动端宽度，拖拽设计区域 - **右侧属性面板**：选中元素的属性编辑 ### 视觉特性 - **现代化UI**：扁平化设计，圆角边框 - **两列布局**：元素库采用两列网格布局，空间利用率高 - **实时反馈**：拖拽、选择、编辑都有视觉反馈 - **响应式设计**：适配不同屏幕尺寸 ## 🚀 快速开始 ### 环境要求 - Node.js 14.0+ - npm 6.0+ ### 安装步骤 ```bash # 1. 克隆项目 git clone cd koa-h5 # 2. 安装依赖 npm install # 3. 启动服务器 npm start # 4. 访问应用 # 浏览器打开 http://localhost:3000 ``` ### 使用指南 #### 1. 创建页面元素 - 从左侧元素库拖拽元素到画布 - 支持文本、图片、按钮、输入框等元素类型 - 元素会自动定位到拖拽位置 #### 2. 编辑元素属性 - 点击选中画布中的元素 - 在右侧属性面板中编辑属性 - 支持位置、大小、颜色、字体等属性 #### 3. 使用网格布局 - 点击结构库中的"网格"选项 - 选择列数（2列、3列、4列） - 将其他元素拖拽到网格中 #### 4. 设置页面背景 - 点击顶部工具栏的"背景设置" - 选择颜色或图片背景 - 背景仅应用于当前画布 #### 5. 保存和加载页面 - 点击"保存"按钮保存当前页面 - 点击"加载"按钮加载已保存的页面 - 支持多页面管理 #### 6. 生成预览 - 点击"预览"按钮生成HTML预览页面 - 预览页面支持移动端访问 - 可分享给其他人查看 ## 🔧 开发说明 ### 模块化架构 项目采用模块化设计，每个功能模块独立开发，便于维护和扩展： - **单一职责**：每个模块只负责特定功能 - **低耦合**：模块间通过接口通信 - **高内聚**：相关功能集中在同一模块 - **易扩展**：新功能可独立开发并集成 ### 代码规范 - 使用ES6+语法 - 采用JSDoc注释规范 - 遵循单一职责原则 - 保持代码简洁和可读性 ### 扩展指南 1. **添加新元素类型**：在ElementManager中添加新的元素类型支持 2. **添加新功能模块**：创建新的模块文件并集成到PageBuilder中 3. **自定义样式**：修改CSS文件中的样式定义 4. **API扩展**：在ApiManager中添加新的API接口 ## 📱 移动端适配 ### 设计标准 - **画布宽度**：375px（标准移动端宽度） - **单位系统**：使用px单位，确保精确控制 - **响应式布局**：元素支持拖拽和调整大小 - **触摸支持**：支持触摸设备的拖拽操作 ### 预览特性 - 生成的预览页面完全适配移动端 - 支持移动端浏览器访问 - 保持与编辑器一致的视觉效果 ## 🐛 已知问题 1. **图片加载**：部分图片可能加载失败，已添加错误处理 2. **浏览器兼容**：建议使用现代浏览器（Chrome、Firefox、Safari） 3. **性能优化**：大量元素时可能存在性能问题 ## 🔮 未来规划 ### 短期目标 - [ ] 添加更多元素类型（视频、音频、轮播图） - [ ] 优化移动端触摸体验 - [ ] 添加撤销/重做功能 - [ ] 支持元素复制/粘贴 ### 长期目标 - [ ] 支持模板系统 - [ ] 添加动画效果 - [ ] 支持多页面项目 - [ ] 集成第三方服务（图片上传、数据统计） ## 📄 许可证 MIT License ## 🤝 贡献指南 欢迎提交Issue和Pull Request来改进项目！ --- **H5营销活动页面构建器** - 让页面设计变得简单高效！