# mms-editor

**Repository Path**: mmsAdmin/mms-editor

## Basic Information

- **Project Name**: mms-editor
- **Description**: 多功能页面布局编辑器
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-27
- **Last Updated**: 2025-11-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 📦 MMS Editor - 可视化页面编辑器

> 一个功能强大、易于使用的拖拽式页面编辑器，帮助您快速构建精美的营销页面。

---

## ✨ 特性亮点

- 🎨 **拖拽式编辑** - 直观的拖放操作，所见即所得
- 🧩 **7种组件** - 轮播图、按钮、文本、图片、卡片、列表、视频
- 📐 **灵活布局** - 1-4列网格布局，支持组件跨列
- ⚙️ **属性配置** - 可视化编辑器，实时预览效果
- 📱 **响应式设计** - 自动适配桌面、平板、手机
- 📤 **一键导出** - 生成完整的 HTML 代码
- 👀 **实时预览** - 弹窗预览最终效果
- 🎯 **简单易用** - 零学习成本，上手即用

---

## 📸 效果展示

### 主编辑界面

![主编辑界面](./imgs/01.png)

*拖拽式组件编辑、实时预览、属性配置一体化界面*

### 组件库与画布

![组件库与画布](./imgs/02.png)

*左侧组件库、中央画布区、右侧属性面板的三栏布局*

### 属性编辑面板

![属性编辑面板](./imgs/04.png)

*丰富的组件属性配置选项，支持样式、内容、布局等多维度编辑*

### 实时预览效果

![实时预览效果](./imgs/06.png)

*一键预览最终页面效果，支持导出完整 HTML 代码*

---

## 📁 文件结构

```
mms-editor/
├── src/
│   ├── components/mms-editor/
│   │   ├── PageEditor.vue          # 主编辑器组件
│   │   ├── ComponentBlock.vue      # 组件块
│   │   ├── PropertyEditor.vue      # 属性编辑器
│   │   └── simple-database.sql     # 数据库表结构
│   ├── types/
│   │   └── mms-editor.ts           # TypeScript类型定义
│   ├── api/
│   │   └── mms-editor.ts           # API接口定义
│   └── views/
│       └── EditorDemo.vue          # 演示页面
├── imgs/                           # 效果图
├── 接口文档.md                      # 接口文档
├── 使用说明.md                      # 使用手册
├── 布局说明.md                      # 布局指南
└── README.md                       # 本文件
```

---

## 🚀 快速开始

### 1. 安装依赖

```bash
npm install vue@^3.4.0 element-plus@^2.8.8 vuedraggable@^4.1.0
```

### 2. 引入组件

```vue
<template>
  <PageEditor />
</template>

<script setup>
import PageEditor from '@/components/mms-editor/PageEditor.vue'
</script>
```

### 3. 运行项目

```bash
npm run dev
```

---

## 📚 文档导航

### 📖 [使用说明.md](./使用说明.md)
完整的用户手册，包含：
- 组件库介绍
- 基础操作指南
- 属性配置说明
- 导出与预览
- 最佳实践
- 常见问题解答

### 🔧 [接口文档.md](./接口文档.md)
技术接口文档，包含：
- 组件 API 说明
- Props/Events 定义
- 数据结构说明
- 样式变量参考

### 📐 [布局说明.md](./布局说明.md)
布局系统详解，包含：
- 1-4列布局模式
- 组件跨列规则
- 响应式设计
- 布局模板推荐

### 📦 layout-examples.json
5个实战案例，包含：
1. 移动端营销落地页
2. 电商商品展示页
3. 企业官网首页
4. 内容聚合页
5. 混合布局复杂案例

---

## 🎯 核心功能

### 组件库

| 组件 | 图标 | 说明 | 主要用途 |
|------|------|------|----------|
| 轮播图 | 🎠 | 多图轮播展示 | 首页广告、产品展示 |
| 按钮 | 🔘 | 交互操作按钮 | CTA、导航链接 |
| 文本 | 📝 | 富文本内容 | 标题、段落、说明 |
| 图片 | 🖼️ | 单张图片展示 | 产品图、装饰图 |
| 卡片 | 🎴 | 容器组件 | 商品卡片、信息模块 |
| 列表 | 📋 | 垂直列表 | 功能清单、导航菜单 |
| 视频 | 🎬 | 视频播放器 | 产品演示、宣传片 |

### 布局系统

- **1列布局** - 适合移动端单列展示
- **2列布局** - 常用双栏布局
- **3列布局** - 适合商品网格展示
- **4列布局** - 密集型内容展示

### 属性编辑

所有组件支持以下属性配置：
- ✅ 背景颜色、文字颜色
- ✅ 字体大小、粗细、对齐
- ✅ 内边距、外边距、圆角
- ✅ 宽度、高度
- ✅ 边框样式

---

## 💡 使用示例

### 导入案例数据

```javascript
// 在 PageEditor.vue 中
import exampleData from './layout-examples.json'

// 导入第一个案例（营销落地页）
const components = ref(exampleData.examples[0].components)

// 导入第二个案例（电商展示页）
const components = ref(exampleData.examples[1].components)
```

### 手动创建组件

```javascript
const addBanner = () => {
  components.value.push({
    id: Date.now().toString(),
    type: 'banner',
    images: [
      'https://via.placeholder.com/800x400/667eea/ffffff?text=广告1'
    ],
    height: '300px',
    borderRadius: 12,
    colSpan: 1
  })
}
```

---

## 🎨 自定义样式

### 修改主题色

在 `PageEditor.vue` 的 `<style>` 部分修改：

```css
/* 主色调 */
.preview-btn,
.copy-html-btn {
  background: linear-gradient(135deg, #your-color-1, #your-color-2) !important;
}

/* 选中状态边框 */
.component-block.selected {
  border: 2px solid #your-color !important;
}
```

### 自定义组件样式

修改 `ComponentBlock.vue` 中对应组件的样式：

```css
.banner-component {
  /* 自定义轮播图样式 */
}

.button-component {
  /* 自定义按钮样式 */
}
```

---

## 📊 浏览器兼容性

| 浏览器 | 版本要求 |
|--------|----------|
| Chrome | ≥ 90 |
| Firefox | ≥ 88 |
| Safari | ≥ 14 |
| Edge | ≥ 90 |

---

## 🔧 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **Element Plus** - Vue 3 组件库
- **VueDraggable** - 拖拽排序库
- **Vite** - 下一代前端构建工具

---

## 📝 更新日志

### v1.0.0 (2024-11-27)

**首次发布** 🎉

- ✅ 7种基础组件
- ✅ 拖拽编辑功能
- ✅ 1-4列网格布局
- ✅ 组件跨列支持
- ✅ 属性可视化编辑
- ✅ 实时预览
- ✅ HTML 一键导出
- ✅ 响应式设计
- ✅ 完整文档和案例

---

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

### 开发步骤

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交改动 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

---

## 📄 许可证

MIT License

---

## 💬 联系我们

如有问题或建议，请通过以下方式联系：

- 🌐 官网: [www.sxpcwlkj.com](http://www.sxpcwlkj.com)
- 💬 Issue: [Gitee Issues](https://gitee.com/mmsAdmin/mms-editor/issues)
- 📖 文档: 查看本目录下的文档文件

---

## 🌟 特别感谢

感谢以下开源项目：

- [Vue.js](https://vuejs.org/)
- [Element Plus](https://element-plus.org/)
- [VueDraggable](https://github.com/SortableJS/vue.draggable.next)

---

**Made with ❤️ by MMS Team**

🎉 **祝您使用愉快！**