# 设计模块使用指南

## 📌 概述

设计模块已升级为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)

---

**祝您使用愉快！** 🎉