模板管理

本文档介绍店铺装修的模板管理功能，通过可视化拖拽编辑器快速创建和配置移动端页面模板。

功能概述

模板管理功能允许用户通过可视化编辑器创建移动端页面模板。整个流程包括：

1. 模板列表管理 - 查看、新增、编辑模板
2. 可视化编辑 - 通过拖拽方式添加和配置页面组件
3. 组件配置 - 为每个组件设置内容和样式
4. 模板保存 - 将编辑好的模板保存到系统中

模板管理操作流程

第一步：进入模板列表

在模板列表页面，可以查看所有已创建的模板，包括模板名称、添加时间和更新时间等信息。

模板列表界面：

第二步：新增或编辑模板

新增模板

点击列表右上方的 "新增" 按钮，进入在线设计编辑器页面创建新模板。

编辑模板

点击列表操作列的 "编辑" 按钮，可以编辑已存在的模板。系统会加载该模板已保存的配置数据。

第三步：使用可视化编辑器

在线设计编辑器采用三栏布局设计，提供直观的可视化编辑体验。

编辑器界面：

编辑器布局说明：

左侧面板：组件库

组件库按照类型分为三类：

• 基础组件 - 包含基础展示类组件
• 营销组件 - 包含营销活动类组件
• 工具组件 - 包含功能辅助组件

中间面板：手机预览区

手机预览区模拟真实手机屏幕，展示页面编辑效果。

预览区操作：

• 添加组件：从左侧组件库拖拽组件到预览区
• 选择组件：点击预览区的组件进行选中
• 删除组件：选中组件后，点击右上角的删除按钮
• 调整顺序：拖拽组件进行排序（注意：商品列表组件必须在最底部）

右侧面板：组件配置区

选中组件后，右侧面板显示该组件的配置选项。

配置区特点：

• 根据组件类型显示不同的配置选项
• 通常包含"内容设置"和"样式设置"两个标签页
• 修改配置后实时更新预览效果

第四步：配置组件

在预览区"选中组件"后，右侧配置面板会显示该组件的配置选项。不同组件类型会显示不同的配置内容。

配置流程：

1. 选择组件：在预览区点击需要配置的组件
2. 查看配置选项：右侧面板显示该组件的所有配置项
3. 修改配置：根据组件类型，在配置面板中进行相应的设置
   • 内容设置：配置组件显示的内容，如文本、图片、链接等
   • 样式设置：配置组件的样式，如间距、颜色、大小等
4. 实时预览：配置修改后，预览区会实时显示效果

配置说明：

• 每个组件都有独特的配置选项，请根据组件类型进行相应配置
• 配置修改后立即生效，可在预览区实时查看效果
• 部分组件可能需要上传资源文件，请注意文件格式和大小限制

第五步：保存模板

完成组件配置后，点击预览区上方的 "保存模版" 按钮。

保存说明：

• 模板名称必填
• 编辑模式下，系统会自动填充原有模板名称
• 保存成功后，可以返回列表页查看更新后的模板

组件使用规范

商品列表组件限制

• 数量限制：每个模板只能添加一个商品列表组件
• 位置限制：商品列表组件必须放置在页面最底部
• 自动调整：如果商品列表不在底部，系统会自动将其移到最后，并提示警告信息

组件权限控制

• 组件库中的组件根据用户权限动态显示
• 只有拥有相应权限的组件才会显示在组件库中
• 权限检查规则：online:{组件名称}(该配置由技术员完成)

实际操作演示

下面以热区组件为例，演示完整的组件配置流程。

演示场景

创建一个包含热区导航的推荐页模板，用于展示活动海报并支持点击跳转。

操作步骤

1. 添加热区组件

1. 在模板列表页面点击 "新增" 按钮，进入在线设计编辑器
2. 在左侧组件库找到 "基础组件" 分类
3. 找到 "热区" 组件（图标为图片图标）
4. 将热区组件拖拽到中间预览区

2. 上传图片

1. 在预览区点击热区组件，右侧显示配置面板
2. 切换到 "内容设置" 标签页
3. 点击上传区域，选择活动海报图片
4. 等待上传完成，预览区显示上传的图片

注意事项：

• 支持格式：常见图片格式
• 文件大小限制：不超过 0.5MB
• 建议尺寸：350px 宽度

3. 编辑热区

1. 在 "内容设置" 标签页中，点击 "编辑热区" 按钮，打开热区编辑弹窗
2. 框选热区：
   • 在图片上长按鼠标 300ms 后，拖拽框选第一个热区范围
   • 热区框选完成后，会自动添加到右侧热区列表中
   • 重复操作，可以添加多个热区
3. 设置链接：
   • 在右侧热区列表中，点击某个热区的 "请选择链接"
   • 选择链接类型（页面或商品）
   • 选择具体的页面或商品
   • 重复以上步骤，为其他热区设置链接
4. 点击右上角 "完成" 按钮保存热区配置

热区编辑说明：

• 左侧：图片展示区域，可框选热区
• 右侧：热区列表，显示已创建的热区
• 添加热区：长按鼠标 300ms 后拖拽框选区域
• 删除热区：点击热区右上角的删除按钮，或在右侧列表中点击删除
• 设置链接：支持页面（模板）链接和商品链接两种类型 1页面链接：跳转子页面 2商品链接：跳转对应商品详情

4. 配置样式

1. 切换到 "样式设置" 标签页
2. 根据需要操作面板调整样式
3. 观察预览区的实时变化效果

5. 保存模板

1. 点击预览区上方的 "保存模版" 按钮
2. 在弹出的对话框中输入模板名称
3. 点击 "确定" 按钮
4. 等待保存成功提示
5. 返回模板列表，查看新创建的模板

常见问题

1. 为什么有些组件不显示？

组件库中的组件根据用户权限动态显示。如果某个组件不显示，可能是因为：

• 用户没有该组件的使用权限
• 需要联系管理员开通相应权限

2. 商品列表组件为什么要放在最后？

商品列表组件通常用于展示商品列表，1、实现触底加载，2、放在页面底部符合用户的浏览习惯。系统会自动确保商品列表组件位于页面最底部。

3. 如何删除已添加的组件？

1. 在预览区点击要删除的组件
2. 组件被选中后，右上角会显示删除按钮
3. 点击删除按钮即可移除组件

4. 组件选择跳转链接，但链接列表为空怎么办？

• 页面链接请检查模板列表是否有已保存的模板，链接事实上是已装修好的模板页面
• 商品链接请检查是否有已上架的商品

总结

模板管理系统提供了强大的可视化编辑功能，通过拖拽和配置的方式，用户可以快速创建个性化的移动端页面模板。