277 lines
6.3 KiB
Markdown
277 lines
6.3 KiB
Markdown
# 设计模块使用指南
|
||
|
||
## 📌 概述
|
||
|
||
设计模块已升级为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️⃣ 首页装修
|
||
|
||
**功能描述**: 自定义商城首页的展示内容和布局
|
||
|
||
**操作流程**:
|
||
|
||
1. 点击侧边栏 "首页装修"
|
||
2. 查看首页布局设置卡片
|
||
3. 点击 "编辑首页" 打开编辑器
|
||
4. 点击 "预览效果" 预览效果
|
||
|
||
**包含内容**:
|
||
|
||
- 首页布局配置
|
||
- 内容顺序设置
|
||
- 样式自定义
|
||
|
||
### 2️⃣ 分类页装修
|
||
|
||
**功能描述**: 为不同的商品分类创建独特的展示页面
|
||
|
||
**操作流程**:
|
||
|
||
1. 点击侧边栏 "分类页装修"
|
||
2. 查看已有分类装修列表
|
||
3. 点击 "新建装修" 创建新的装修
|
||
4. 点击 "编辑" 修改已有装修
|
||
5. 点击 "删除" 删除不需要的装修
|
||
|
||
**功能特点**:
|
||
|
||
- 支持多个分类独立装修
|
||
- 展示发布状态
|
||
- 显示更新时间
|
||
|
||
### 3️⃣ 商品页装修
|
||
|
||
**功能描述**: 自定义商品详情页的布局和展示方式
|
||
|
||
**操作流程**:
|
||
|
||
1. 点击侧边栏 "商品页装修"
|
||
2. 查看商品详情页布局卡片
|
||
3. 点击 "编辑" 修改商品页布局
|
||
4. 点击 "预览效果" 预览效果
|
||
|
||
**优化项**:
|
||
|
||
- 商品信息展示模块
|
||
- 推荐商品展示
|
||
- 营销组件配置
|
||
|
||
### 4️⃣ 自定义页面
|
||
|
||
**功能描述**: 创建独立的营销页面或专题页
|
||
|
||
**操作流程**:
|
||
|
||
1. 点击侧边栏 "自定义页面"
|
||
2. 查看已创建的自定义页面
|
||
3. 点击 "新建页面" 创建新页面
|
||
4. 设置页面名称和路径
|
||
5. 点击 "编辑" 设计页面内容
|
||
|
||
**应用场景**:
|
||
|
||
- 新年促销活动页
|
||
- 品牌专题页
|
||
- 限时优惠活动页
|
||
- 新品首发页
|
||
|
||
### 5️⃣ 模板库
|
||
|
||
**功能描述**: 预设装修模板，快速构建页面
|
||
|
||
**可用模板**:
|
||
|
||
- 电商风格A - 简洁现代的电商布局
|
||
- 电商风格B - 豪华展示的电商布局
|
||
- 精品风格 - 精品商品展示布局
|
||
- 商城风格 - 完整商城功能布局
|
||
|
||
**使用流程**:
|
||
|
||
1. 点击侧边栏 "模板库"
|
||
2. 浏览可用模板
|
||
3. 点击 "使用模板" 应用该模板
|
||
4. 系统会根据选择的模板初始化页面
|
||
|
||
### 6️⃣ 组件库
|
||
|
||
**功能描述**: 丰富的页面组件，灵活构建页面
|
||
|
||
**可用组件**:
|
||
| 组件名 | 类型 | 说明 |
|
||
|-------|------|------|
|
||
| 图片组件 | 媒体 | 展示图片和图片轮播 |
|
||
| 文本组件 | 文本 | 展示文本内容 |
|
||
| 商品组件 | 商品 | 展示商品列表和推荐 |
|
||
| 轮播组件 | 媒体 | 图片和内容轮播 |
|
||
| 分割线 | 布局 | 分割不同内容区域 |
|
||
| 间距组件 | 布局 | 调整元素间距 |
|
||
| 按钮组件 | 交互 | 创建点击按钮 |
|
||
| 表单组件 | 表单 | 收集用户输入 |
|
||
|
||
**使用方式**:
|
||
|
||
1. 点击侧边栏 "组件库"
|
||
2. 浏览可用组件
|
||
3. 拖拽组件到页面编辑器
|
||
4. 配置组件参数
|
||
|
||
---
|
||
|
||
## 🎯 工作流程
|
||
|
||
### 完整装修流程
|
||
|
||
```
|
||
新建装修 → 选择模板 → 添加组件 → 设计样式 → 预览 → 发布
|
||
↓ ↓ ↓ ↓ ↓ ↓
|
||
新建页面 快速搭建 灵活组合 个性化 检查效果 上线
|
||
```
|
||
|
||
### 示例：创建分类页装修
|
||
|
||
**步骤 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
|
||
- 文档地址: [设计模块重构报告](DESIGN_MODULE_UPGRADE_REPORT.md)
|
||
- API文档: [design.uts](../pages/mall/admin/design/design.uts)
|
||
|
||
---
|
||
|
||
## 📚 相关资源
|
||
|
||
- [Admin布局指南](ADMIN_LAYOUT_GUIDE.md)
|
||
- [uni-app-x 页面修复指南](UNI_APP_X_PAGE_FIX_GUIDE.md)
|
||
- [CRMEB仪表板指南](CRMEB_DASHBOARD_GUIDE.md)
|
||
|
||
---
|
||
|
||
**祝您使用愉快！** 🎉
|