# cms-drag-generator

**Repository Path**: ndping/cms-drag-generator

## Basic Information

- **Project Name**: cms-drag-generator
- **Description**: cms-drag-generator
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-06
- **Last Updated**: 2026-08-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 HTML和JSON生成器

一个基于Vue3的拖拽式HTML和JSON生成器，支持组件化编辑和代码生成。

## 功能特性

- 🎯 **拖拽式组件编辑** - 通过拖拽方式添加和排列组件
- 📝 **HTML输入解析** - 支持粘贴HTML代码自动解析为组件
- 🖼️ **多种组件类型** - 支持单图、多图、视频等组件
- 🔗 **链接支持** - 图片组件支持添加链接
- 📱 **移动端适配** - 375px宽度预览，适合移动端开发
- 💾 **代码生成** - 一键生成HTML和JSON代码
- 👁️ **实时预览** - 支持代码预览和复制功能

## 组件类型

### 1. 单图组件 (single-image)
- 支持单个图片展示
- 可设置图片URL、描述(alt)和链接
- 自动生成带链接的HTML代码

### 2. 视频组件 (video)
- 支持视频播放器
- 可设置视频ID
- 自动生成视频播放脚本

### 3. 一行多图组件 (multi-image)
- 支持多个图片展示
- 自动判断mixed类型
- 每个图片可单独设置链接

## HTML解析功能

新增的HTML解析功能允许您直接粘贴HTML代码，系统会自动解析为对应的组件：

### 支持的HTML格式
```html
<div class="clarBox">
    <ul class="clarList">
        <li><img src="图片URL" alt="描述" /></li>
        <li><div class="video video_1"></div></li>
    </ul>
</div>
```

### 解析规则
- **图片组件**: 解析`<img>`标签，支持`src`、`alt`属性
- **链接支持**: 解析`<map>`和`<area>`标签获取链接信息
- **视频组件**: 解析`<div class="video video_X">`标签
- **多图组件**: 自动组合连续的图片，总宽度为750px（误差不超过4px）
- **批量处理**: 支持解析多个组件，自动清空现有组件

### 多图组件解析规则
系统会自动将连续的图片组合成多图组件，具体规则如下：

1. **宽度计算**: 每张图片默认宽度为375px
2. **组合规则**: 两张375px宽度的图片组合成一个多图组件（总宽度750px）
3. **误差容忍**: 总宽度误差不超过4px
4. **自动分割**: 当总宽度超过750px时，自动分割为多个组件
5. **智能识别**: 支持从图片URL中提取宽度信息

### 示例
```html
<!-- 输入HTML -->
<div class="clarBox">
    <ul class="clarList">
        <li><img src="OP1022372_01.jpg" alt="图片1" /></li>
        <li><img src="OP1022372_02.jpg" alt="图片2" /></li>
        <li><img src="OP1022372_03.jpg" alt="图片3" /></li>
        <li><img src="OP1022372_04.jpg" alt="图片4" /></li>
    </ul>
</div>

<!-- 解析结果 -->
- 多图组件1: [图片1, 图片2] (总宽度: 750px)
- 多图组件2: [图片3, 图片4] (总宽度: 750px)
```

### 使用方法
1. 点击工具栏中的"📝 解析HTML"按钮
2. 在弹出窗口中粘贴HTML代码
3. 点击"解析HTML"按钮
4. 系统会自动解析并添加对应的组件

## 使用方法

### 基本操作
1. **添加组件**: 从左侧组件库点击或拖拽组件到预览区域
2. **编辑属性**: 点击预览区域的组件，在右侧属性面板中编辑
3. **调整顺序**: 拖拽组件调整显示顺序
4. **删除组件**: 点击组件右上角的"×"按钮

### 代码生成
1. **生成HTML**: 点击"生成HTML"按钮生成HTML代码
2. **生成JSON**: 点击"生成JSON"按钮生成JSON数据
3. **预览代码**: 点击"👁️ 预览代码"查看生成的代码
4. **复制代码**: 在预览面板中点击"复制"按钮

### HTML解析
1. **打开解析器**: 点击"📝 解析HTML"按钮
2. **粘贴代码**: 在文本框中粘贴HTML代码
3. **解析组件**: 点击"解析HTML"按钮
4. **查看结果**: 系统会自动解析并显示组件

## 文件结构

```
vue3-drag-generator/
├── index.html          # 主页面
├── script.js           # Vue应用逻辑
├── styles.css          # 样式文件
├── test.html           # 功能测试页面
└── README.md           # 说明文档
```

## 技术栈

- **Vue 3** - 前端框架
- **Sortable.js** - 拖拽排序库
- **Vue Draggable** - Vue拖拽组件
- **原生JavaScript** - DOM操作和代码生成

## 浏览器支持

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 开发说明

### 添加新组件类型
1. 在`libraryComponents`数组中添加组件定义
2. 在`createComponent`方法中添加组件创建逻辑
3. 在`generateHtml`和`generateJson`方法中添加代码生成逻辑
4. 在HTML模板中添加组件预览和属性编辑界面

### 扩展HTML解析
1. 在`parseListItem`方法中添加新的解析逻辑
2. 支持新的HTML标签和属性
3. 更新解析规则和错误处理

## 更新日志

### v1.1.0 (最新)
- ✨ 新增HTML解析功能
- 📝 支持粘贴HTML代码自动解析为组件
- 🎯 支持图片、视频等多种组件类型解析
- 🔧 优化用户界面和交互体验

### v1.0.0
- 🎉 初始版本发布
- 📦 支持拖拽式组件编辑
- 🖼️ 支持单图、多图、视频组件
- 💾 支持HTML和JSON代码生成