6.3 KiB
6.3 KiB
设计模块使用指南
📌 概述
设计模块已升级为CRMEB风格的侧边栏菜单导航，用于管理商城页面的装修、模板和组件库。
🗺️ 导航结构
菜单组织
设 计
├── 页面装修
│ ├── 首页装修
│ ├── 分类页装修
│ ├── 商品页装修
│ └── 自定义页面
└── 设计库
├── 模板库
└── 组件库
访问路径
- 主入口:
/pages/mall/admin/design/index - 首页装修:
/pages/mall/admin/design/index?tab=homepage - 分类页装修:
/pages/mall/admin/design/index?tab=category - 商品页装修:
/pages/mall/admin/design/index?tab=product - 自定义页面:
/pages/mall/admin/design/index?tab=custom - 模板库:
/pages/mall/admin/design/index?tab=templates - 组件库:
/pages/mall/admin/design/index?tab=components
📖 功能说明
1️⃣ 首页装修
功能描述: 自定义商城首页的展示内容和布局
操作流程:
- 点击侧边栏 "首页装修"
- 查看首页布局设置卡片
- 点击 "编辑首页" 打开编辑器
- 点击 "预览效果" 预览效果
包含内容:
- 首页布局配置
- 内容顺序设置
- 样式自定义
2️⃣ 分类页装修
功能描述: 为不同的商品分类创建独特的展示页面
操作流程:
- 点击侧边栏 "分类页装修"
- 查看已有分类装修列表
- 点击 "新建装修" 创建新的装修
- 点击 "编辑" 修改已有装修
- 点击 "删除" 删除不需要的装修
功能特点:
- 支持多个分类独立装修
- 展示发布状态
- 显示更新时间
3️⃣ 商品页装修
功能描述: 自定义商品详情页的布局和展示方式
操作流程:
- 点击侧边栏 "商品页装修"
- 查看商品详情页布局卡片
- 点击 "编辑" 修改商品页布局
- 点击 "预览效果" 预览效果
优化项:
- 商品信息展示模块
- 推荐商品展示
- 营销组件配置
4️⃣ 自定义页面
功能描述: 创建独立的营销页面或专题页
操作流程:
- 点击侧边栏 "自定义页面"
- 查看已创建的自定义页面
- 点击 "新建页面" 创建新页面
- 设置页面名称和路径
- 点击 "编辑" 设计页面内容
应用场景:
- 新年促销活动页
- 品牌专题页
- 限时优惠活动页
- 新品首发页
5️⃣ 模板库
功能描述: 预设装修模板，快速构建页面
可用模板:
- 电商风格A - 简洁现代的电商布局
- 电商风格B - 豪华展示的电商布局
- 精品风格 - 精品商品展示布局
- 商城风格 - 完整商城功能布局
使用流程:
- 点击侧边栏 "模板库"
- 浏览可用模板
- 点击 "使用模板" 应用该模板
- 系统会根据选择的模板初始化页面
6️⃣ 组件库
功能描述: 丰富的页面组件，灵活构建页面
可用组件:
| 组件名 | 类型 | 说明 |
|---|---|---|
| 图片组件 | 媒体 | 展示图片和图片轮播 |
| 文本组件 | 文本 | 展示文本内容 |
| 商品组件 | 商品 | 展示商品列表和推荐 |
| 轮播组件 | 媒体 | 图片和内容轮播 |
| 分割线 | 布局 | 分割不同内容区域 |
| 间距组件 | 布局 | 调整元素间距 |
| 按钮组件 | 交互 | 创建点击按钮 |
| 表单组件 | 表单 | 收集用户输入 |
使用方式:
- 点击侧边栏 "组件库"
- 浏览可用组件
- 拖拽组件到页面编辑器
- 配置组件参数
🎯 工作流程
完整装修流程
新建装修 → 选择模板 → 添加组件 → 设计样式 → 预览 → 发布
↓ ↓ ↓ ↓ ↓ ↓
新建页面 快速搭建 灵活组合 个性化 检查效果 上线
示例：创建分类页装修
步骤 1: 点击 "分类页装修" → "新建装修" 步骤 2: 填写装修名称和目标分类 步骤 3: 选择合适的模板 步骤 4: 添加组件和内容 步骤 5: 点击预览检查效果 步骤 6: 点击发布上线
💡 最佳实践
1. 首页装修建议
- ✅ 优先展示热销商品
- ✅ 突出品牌和特色
- ✅ 定期更新活动信息
- ✅ 保持布局清爽简洁
2. 分类页装修建议
- ✅ 为不同品类设置不同风格
- ✅ 突出分类特点
- ✅ 添加分类相关的推荐商品
- ✅ 保持导航清晰
3. 商品页装修建议
- ✅ 突出商品信息
- ✅ 添加相关推荐
- ✅ 展示营销活动
- ✅ 优化转化流程
4. 自定义页面建议
- ✅ 为活动创建专属页面
- ✅ 使用高质量图片
- ✅ 明确的行动号召（CTA）
- ✅ 定期更新内容
5. 模板选择建议
- 新店铺 → 选择"商城风格"快速建站
- 品质商品 → 选择"精品风格"突出品质
- 活动营销 → 选择"电商风格A"或"B"
⚠️ 常见问题
Q: 修改后多久能看到效果？
A: 修改后需要点击"发布"才能上线，一般立即生效。
Q: 可以同时编辑多个装修吗？
A: 可以，但需要分别点击编辑，已编辑未保存的会提示确认。
Q: 删除的装修能恢复吗？
A: 删除后无法恢复，请谨慎操作。建议重要装修先备份。
Q: 分类页装修数量有限制吗？
A: 理论上无限制，但建议不超过100个以保证性能。
Q: 自定义页面的路径如何设置？
A: 路径需要遵循系统规范，建议使用英文和下划线，如 /pages/promotion/newyear
Q: 模板能修改吗？
A: 可以，使用模板后生成的页面可以任意修改。
🔄 更新记录
v2.0 (2026-01-31)
- ✅ 重构为侧边栏菜单导航
- ✅ 符合CRMEB设计标准
- ✅ 新增分组展示
- ✅ 优化用户体验
- ✅ 完善响应式设计
v1.0 (初始版本)
- ✅ 基础装修功能
- ✅ Tab导航
- ✅ 6个装修类型
📞 技术支持
如有问题，请联系：
- 技术团队: tech@example.com
- 文档地址: 设计模块重构报告
- API文档: design.uts
📚 相关资源
祝您使用愉快！ 🎉