1. 概述
可视化拖拽编辑器采用”搭积木”式的编辑方式，您无需编写任何代码，只需从组件库拖入模块、修改参数，即可像搭乐高一样快速搭建出精美的二维码落地页。
1.1 与富文本编辑器的对比
| 维度 | 富文本编辑器 | 可视化拖拽编辑器 |
|---|
| 操作方式 | 像 Word 一样输入 | 像搭积木一样拖拽 |
| 适合内容 | 图文混排的说明文档 | 营销活动页、产品落地页 |
| 页面风格 | 线性、单栏为主 | 多区块、自由布局 |
| 学习成本 | 低 | 中 |
1.2 编辑器入口
- 登录系统，进入 落地页管理 页面
- 点击 「+ 新建落地页」 或选择已有落地页的 「编辑」 操作
- 在第 1 步「选择编辑器」中选择 「可视化拖拽编辑器」
- 在第 2 步「选择二维码落地页模板」中选择模板（空白 / 内置模板 / 自定义模板 / 从已有二维码落地页创建）
- 进入第 3 步「编辑内容」，即可看到编辑器界面
2. 界面总览
编辑器整体分为四个区域：
| 区域 | 功能 |
|---|
| ① 组件库（左侧） | 列出全部 17 个组件，按”布局 / 内容 / 交互 / 装饰”分类 |
| ② 画布（中央） | 实时可视化预览，支持拖拽组件进/出、调换顺序 |
| ③ 属性面板（右侧） | 编辑选中组件的字段参数 |
| ④ 底部工具栏 | 撤销 / 重做 / 视口切换（桌面 / 平板 / 移动端） |
3. 顶部设置栏
顶部设置栏位于编辑器最上方，包含三部分：
3.1 标题输入
- 在输入框中输入落地页标题
- 标题将显示在管理列表、用户扫码页面顶部
- 标题为 必填项，未填写时「保存」按钮会被禁用
3.2 状态选择（已发布 / 草稿 / 待审）
| 状态 | 适用场景 |
|---|
| 已发布 | 内容已确认，对外可见 |
| 草稿 | 编辑中，暂不对外可见 |
| 待审 | 已提交，等待审核 |
3.3 操作按钮
- 保存：提交当前编辑内容
- 返回：放弃当前编辑，返回上一步（编辑模式）/ 上一步（创建模式）
4. 组件库（左侧）
4.1 四大分类
| 分类 | 用途 |
|---|
| 布局 | 搭建页面的整体结构（容器、间距、栏位、标签页） |
| 内容 | 展示具体信息（文字、图片、视频、表格、列表等） |
| 交互 | 提供点击、引导等可交互元素（按钮、CTA、图标文本） |
| 装饰 | 提升视觉表现（横幅、分隔线） |
4.2 全部 17 个组件一览
| 分类 | 组件 | 中文名 | 用途 |
|---|
| 布局 | Columns | 双栏布局 | 把画布分成左右两栏，可自定义比例、间距和对齐 |
| 布局 | Section | 区块容器 | 带背景色与内边距的容器，用于组织多个子组件 |
| 布局 | Spacer | 间距 | 仅控制垂直空白距离 |
| 布局 | Tab | 标签页 | 把内容切成 2-6 个切换面板 |
| 内容 | Heading | 标题 | H1-H4 标题，可调字号、颜色、对齐 |
| 内容 | TextBlock | 文本 | 支持 HTML 的段落文本 |
| 内容 | RichText | 富文本 | Tiptap 富文本（粗体、列表、链接等） |
| 内容 | ImageBlock | 图片 | 上传 / 选择图片，可设置链接、圆角 |
| 内容 | Video | 视频 | 嵌入 YouTube / Vimeo 视频 |
| 内容 | Card | 卡片 | 图文卡片，可整体可点击 |
| 内容 | Table | 表格 | 通过 CSV 文本快速创建表格 |
| 内容 | ListBlock | 列表 | 有序 / 无序列表，可调标记样式 |
| 交互 | ButtonBlock | 按钮 | 单独按钮组件，可自定义颜色 |
| 交互 | CTA | 行动号召 | 主色背景的整块行动区（标题+按钮） |
| 交互 | IconText | 图标文本 | 图标 + 标题 + 描述的组合 |
| 装饰 | Hero | 横幅 | 顶部大幅标题区，可加背景图 |
| 装饰 | Divider | 分隔线 | 简单的水平分隔线 |
5. 画布（中央）操作
5.1 添加组件
方法一：拖拽插入
- 在左侧组件库选中目标组件
- 按住鼠标左键将其拖到画布中想要的位置
- 松开鼠标，组件即被插入
方法二：点击插入（容器内）
对于 Section（区块容器）、Columns（双栏布局）、Tab（标签页）等带插槽的组件：
- 在画布中单击选中该容器
- 在右侧属性面板顶部或中部，找到 「+ 添加组件到容器」 按钮
- 点击后在弹出的下拉框中选择要插入的组件
- 组件会自动追加到该容器内部末尾
💡 Tab 组件内的添加：选中 Tab 后，右侧属性面板会为每个标签页提供独立的「添加组件到 Tab N」按钮。
5.2 选中组件
- 在画布中点击组件即可选中（出现蓝色虚线边框）
- 选中后，右侧属性面板会自动切换到该组件的字段
5.3 调整顺序
- 鼠标按住组件左上角的 拖动手柄（⋮⋮ 图标）
- 上下拖动到目标位置
- 蓝色横线指示器显示插入位置
5.4 删除组件
- 选中目标组件
- 按
Delete 键，或点击组件右上角出现的 删除图标
- 在确认提示中点击 确认
5.5 复制组件
- 选中目标组件
- 按
Ctrl + D（macOS: Cmd + D）复制
- 复制的组件会自动出现在原组件下方
5.6 撤销 / 重做
| 操作 | Windows | macOS |
|---|
| 撤销 | Ctrl + Z | Cmd + Z |
| 重做 | Ctrl + Shift + Z | Cmd + Shift + Z |
也可在底部工具栏点击 撤销 / 重做 按钮。
5.7 视口切换（预览不同设备）
底部工具栏提供 3 种视口宽度：
| 视口 | 宽度 | 适用场景 |
|---|
| Desktop（桌面） | 100% | 桌面电脑、平板横屏 |
| Tablet（平板） | 768px | 平板竖屏 |
| Mobile（移动端） | 375px | 手机屏幕 |
切换视口后，画布宽度会自动调整，所见即所得地查看用户扫码后在对应设备上的实际效果。
6. 属性面板（右侧）
选中任意组件后，右侧属性面板会显示该组件的全部可编辑字段。
6.1 字段类型速查
| 类型 | 用途 | 例子 |
|---|
| text | 单行文本 | 标题文字、URL |
| textarea | 多行文本 | 文本内容、CSV |
| number | 数字 | 字号、内边距 |
| select | 下拉单选 | 对齐、级别、颜色 |
| radio | 单选按钮组 | 列表类型、表头样式 |
| array | 列表项 | 列表项编辑 |
| slot | 容器插槽 | 区块容器的内容区 |
| custom | 自定义控件 | 图片上传器、媒体库 |
| richtext | 富文本编辑器 | RichText 内容 |
6.2 公共属性组件详解
Columns（双栏布局）
| 字段 | 说明 |
|---|
| 列比例 | 1:1 / 2:1 / 1:2 / 3:1 |
| 双栏间距 (px) | 左右栏之间的间距（0-96） |
| 垂直对齐 | 顶部对齐 / 垂直居中 / 底部对齐 / 自动拉伸 |
| 左栏 / 右栏 | 拖入子组件或通过”添加组件”按钮 |
Section（区块容器）
| 字段 | 说明 |
|---|
| 背景颜色 | HEX 颜色，如 #f5f5f5 |
| 内边距 | 内部留白（0-96 px） |
| 最大宽度 | 全宽 / 1200px / 800px |
| 排列方向 | 纵向排列（默认） / 横向排列 |
| 横向自适应换行 | 自动换行 / 不换行 |
| 子项对齐 | 左对齐 / 居中 / 右对齐 |
| 子项间距 (px) | 子组件之间的距离 |
| 内容 | 拖入子组件 |
Spacer（间距）
Tab（标签页）
| 字段 | 说明 |
|---|
| 标签页数量 | 2-6 个标签页 |
| 标签页 N 标题 | 第 N 个标签页的标题文字 |
| 标签页 N 内容 | 在每个标签页内部插入组件 |
Heading（标题）
| 字段 | 说明 |
|---|
| 标题文字 | 内容 |
| 级别 | H1 / H2 / H3 / H4 |
| 对齐 | 左对齐 / 居中 / 右对齐 |
| 颜色 | HEX 颜色值 |
TextBlock（文本）
| 字段 | 说明 |
|---|
| 内容（HTML） | 支持 <p> <strong> <a> 等 HTML 标签 |
| 字号 | 数字（px） |
| 颜色 | HEX 颜色值 |
| 对齐 | 左对齐 / 居中 / 右对齐 |
RichText（富文本）
| 字段 | 说明 |
|---|
| 内容 | Tiptap 富文本编辑工具栏，支持：粗体、斜体、下划线、删除线、6 级标题、有序/无序列表、链接、引用、代码、对齐、分割线 |
ImageBlock（图片）
| 字段 | 说明 |
|---|
| 图片 URL | 见下方”图片上传三种方式” |
| 替代文本 | alt 文字，建议填写提升无障碍体验 |
| 链接地址（可选） | 点击图片跳转的目标 URL |
| 宽度 | 例 100% 或 400px |
| 圆角 | 数字（px），例如 8 表示 8px 圆角 |
图片上传三种方式（与富文本编辑器一致）：
| 方式 | 操作 |
|---|
| 本地上传 | 点击上传区选择本地文件（≤5MB，支持 JPG / PNG / GIF / WebP） |
| URL 输入 | 在 URL 输入框中粘贴公网图片地址 |
| 媒体库选择 | 点击「从媒体库选择」按钮，从已上传的图片中挑选 |
Video（视频）
| 字段 | 说明 |
|---|
| 视频地址（YouTube / Vimeo） | 视频 URL |
| 宽高比 | 16:9 / 4:3 / 1:1 |
| 最大宽度 (px) | 320-1920 |
Card（卡片）
| 字段 | 说明 |
|---|
| 显示模式 | 卡片 / 扁平 |
| 标题 | 卡片标题文字 |
| 描述 | 卡片描述文字 |
| 图片 URL（可选） | 卡片封面图 |
| 链接地址（可选） | 点击卡片跳转目标 |
| 样式 | 阴影 / 边框 |
| 内边距 | 0-64 px |
Table（表格）
| 字段 | 说明 |
|---|
| 行数 / 列数 | 1-20 |
| 表头样式 | 启用 / 禁用 |
| 边框宽度 / 颜色 | 控制表格外观 |
| 单元格内边距 | 0-32 px |
| 文本对齐 | 左对齐 / 居中 / 右对齐 |
| 表格内容 (CSV) | 粘贴 CSV 文本（用英文逗号分隔，\n 换行） |
💡 CSV 示例：
成分,含量,单位
蛋白质,12.5,g
脂肪,8.2,g
碳水化合物,65.0,g
ListBlock（列表）
| 字段 | 说明 |
|---|
| 列表类型 | 无序列表（●）/ 有序列表（1.） |
| 标记样式 | 列表标记的样式（按类型动态切换可选项） |
| 列表项 | 增删 / 编辑每一项文本 |
| 字号 / 颜色 / 项间距 | 视觉调节 |
| 对齐方式 | 左对齐 / 居中 / 右对齐 |
💡 标记样式动态切换：选择无序列表时，可选：实心圆点 / 空心圆 / 方块 / 无。选择有序列表时，可选：数字 / 小写字母 / 大写字母 / 小写罗马 / 大写罗马 / 无。
ButtonBlock（按钮）
| 字段 | 说明 |
|---|
| 按钮文字 | 按钮上显示的文字 |
| 链接地址 | 点击按钮跳转的目标 |
| 样式 | 主色 / 次要 |
| 主色（HEX 颜色） | 自定义按钮颜色 |
| 对齐 | 左对齐 / 居中 / 右对齐 |
CTA（行动号召）
| 字段 | 说明 |
|---|
| 标题 | 主标题 |
| 副标题 | 副标题文字 |
| 按钮文字 / 按钮链接 | 内嵌按钮 |
| 背景颜色 | 整块背景色 |
| 对齐 | 左对齐 / 居中 |
IconText（图标文本）
| 字段 | 说明 |
|---|
| 图标 | 14 种常用图标（对勾、星标、箭头、信息、盾牌、包裹、心形、购物车、闪电、礼物、灯泡、警告、位置、时钟） |
| 对齐方式 | 左对齐 / 居中 / 右对齐 |
| 标题 | 标题文字 |
| 描述 | 描述文字 |
| 图标颜色 | 图标的颜色 |
Hero（横幅）
| 字段 | 说明 |
|---|
| 标题 / 副标题 | 横幅标题与副标题 |
| 背景图片 URL | 横幅背景图 |
| 背景颜色 | 横幅背景色 |
| 对齐方式 | 左对齐 / 居中 |
Divider（分隔线）
7. 容器与插槽规则
编辑器中的「容器」类组件（Section / Columns / Tab）的内部都使用 Slot（插槽） 来存放子组件。
7.1 Section（区块容器）
适合作为”页面区块”的整体容器，带背景色和内边距。
典型用法：
- 顶部 Hero 区
- 产品特色介绍区
- 底部 CTA 区
7.2 Columns（双栏布局）
适合需要左右并列展示内容的场景。
典型用法：
7.3 Tab（标签页）
适合需要分类展示大量内容的场景。
典型用法：
- 产品规格 / 营养成分 / 用户评价
- 使用说明 / 注意事项 / 售后服务
- 多个不同时期的版本说明
⚠️ 禁止嵌套：Tab 内部不能再嵌套 Tab，避免无限嵌套导致页面卡顿。
