# 页面装修功能 - 完整文档

> 参考CRMEB项目标准，实现完整的页面装修和DIY设计系统

## 📑 目录

1. [项目概述](#项目概述)
2. [核心功能](#核心功能)
3. [文件结构](#文件结构)
4. [页面功能详解](#页面功能详解)
5. [API文档](#api文档)
6. [数据结构](#数据结构)
7. [使用指南](#使用指南)
8. [开发计划](#开发计划)
9. [与CRMEB对标](#与crmeb对标)

---

## 项目概述

### 功能定位

页面装修模块是一个可视化的页面DIY系统，允许商城管理员通过拖拽和配置组件来自定义页面内容和布局，无需编码即可创建和维护多种展示页面。

### 核心价值

- **降低运营成本**: 无需技术人员，运营即可完成页面装修
- **提高灵活性**: 快速响应市场变化，实时调整页面内容
- **增强转化**: 通过优化页面布局和展示方式，提升用户转化率
- **品牌展示**: 展现品牌特色和商城个性，增强用户体验

### 技术栈

- **框架**: uni-app-x (Vue3 + TypeScript)
- **组件库**: uni.scss 设计系统
- **数据管理**: Promise-based 异步API
- **布局**: Flexbox + Grid 响应式设计

---

## 核心功能

### 🏠 1. 首页装修

**功能特性**:

- 自定义首页布局和显示内容
- 支持轮播图、商品展示、文本等多种组件
- 实时预览装修效果
- 版本管理和发布上线

**使用场景**:

- 节日活动首页设计
- 品牌形象展示
- 商品推荐展示
- 营销信息发布

**功能入口**:

```
系统 → 设计 → 页面装修 → [首页装修] 标签页 → 编辑首页
```

### 📂 2. 分类页装修

**功能特性**:

- 为不同商品分类创建独立的装修页面
- 支持多套分类装修方案并存
- 按分类自动应用对应装修效果
- 快速切换和对比装修效果

**使用场景**:

- 分类专题页设计
- 品类运营和推广
- A/B测试对比
- 季节性活动专页

**功能入口**:

```
系统 → 设计 → 页面装修 → [分类页] 标签页 → 新建装修
```

**分类装修列表**:

- 显示所有已创建的分类装修
- 展示关联分类名称
- 显示发布状态
- 支持编辑、预览、删除操作

### 🛍️ 3. 商品页装修

**功能特性**:

- 自定义商品详情页的布局和模块
- 支持商品图、信息、评价、推荐等模块
- 优化转化漏斗，提升销售额
- 支持A/B测试验证效果

**使用场景**:

- 提升商品详情页转化率
- 突出商品卖点
- 展示用户评价和反馈
- 推荐相关商品

**功能入口**:

```
系统 → 设计 → 页面装修 → [商品页] 标签页 → 编辑商品页
```

### ✏️ 4. 自定义页面

**功能特性**:

- 创建完全自定义的营销和推广页面
- 灵活的页面路径设置
- 独立的装修配置和管理
- 活动和推广专用

**使用场景**:

- 限时促销活动页
- 新品发布页面
- 品牌故事展示页
- 用户专享页面

**功能入口**:

```
系统 → 设计 → 页面装修 → [自定义] 标签页 → 新建页面
```

**自定义页面管理**:

- 显示所有自定义页面列表
- 展示页面路径和访问地址
- 管理发布状态
- 支持编辑、预览、删除

### 🎨 5. 页面模板库

**功能特性**:

- 预设4套精心设计的电商风格模板
- 一键应用模板，快速建站
- 模板库不断扩充和升级
- 支持自定义模板保存

**预设模板**:

1. **电商风格A** - 简洁现代
   - 简约配色，强调商品展示
   - 适合高端品牌
   - 突出产品品质

2. **电商风格B** - 豪华展示
   - 丰富的视觉效果
   - 适合大众商城
   - 强调活动促销

3. **精品风格** - 精品展示
   - 精细的排版设计
   - 适合精品商城
   - 强调用户体验

4. **商城风格** - 完整商城
   - 功能完整的布局
   - 适合综合商城
   - 包含所有必要模块

**功能入口**:

```
系统 → 设计 → 页面装修 → [模板库] 标签页 → 选择模板 → 使用模板
```

### 🧩 6. 组件库

**功能特性**:

- 提供8种预设装修组件
- 组件库持续扩充
- 支持自定义组件配置
- 灵活的嵌套和组合

**8类预设组件**:

| 组件     | 类型     | 图标 | 描述               | 用途               |
| -------- | -------- | ---- | ------------------ | ------------------ |
| 图片组件 | image    | I    | 展示图片和图片轮播 | 产品展示、活动推广 |
| 文本组件 | text     | T    | 展示文本内容和段落 | 文案描述、说明文字 |
| 商品组件 | product  | P    | 展示商品列表和推荐 | 商品展示、推荐引流 |
| 轮播组件 | carousel | C    | 图片和内容轮播     | 焦点图、内容轮播   |
| 分割线   | divider  | D    | 分割不同内容区域   | 版面分割、结构分明 |
| 间距组件 | spacer   | S    | 调整元素间距       | 布局美化、层级区分 |
| 按钮组件 | button   | B    | 创建点击按钮       | 行动召唤、用户转化 |
| 表单组件 | form     | F    | 收集用户输入数据   | 用户信息、意见反馈 |

**功能入口**:

```
系统 → 设计 → 页面装修 → [组件库] 标签页 → 查看可用组件
```

---

## 文件结构

### 目录结构

```
mall/
├── pages/mall/admin/design/
│   ├── index.uvue              # 装修管理主界面 (898行)
│   │   ├── 页面头部
│   │   ├── 导航选项卡
│   │   ├── 首页装修模块
│   │   ├── 分类装修模块
│   │   ├── 商品装修模块
│   │   ├── 自定义页面模块
│   │   ├── 模板库模块
│   │   └── 组件库模块
│   │
│   ├── design.uts              # 业务逻辑 (350+行)
│   │   ├── 接口定义
│   │   ├── API函数
│   │   ├── 工具函数
│   │   └── 验证函数
│   │
│   ├── editor.uvue             # 装修编辑器 (待实现)
│   ├── preview.uvue            # 装修预览 (待实现)
│   └── README.md               # 模块说明文档
│
├── docs/
│   ├── DESIGN_DECORATION_GUIDE.md       # 本文档
│   ├── DESIGN_IMPLEMENTATION_REPORT.md  # 实现报告
│   └── ...
│
└── menu.uts                    # 菜单配置 (包含设计菜单)
```

### 核心文件说明

#### index.uvue (898行)

**职责**: 装修管理的主UI界面

**主要模块**:

- 页面头部：标题和副标题
- 导航选项卡：6个功能模块切换
- 内容区域：各模块的具体功能显示
- 响应式布局：支持桌面、平板、手机

**关键功能**:

```typescript
// 数据管理
const activeTab = ref<string>('homepage')
const categoryDesigns = ref<any[]>([])
const customPages = ref<any[]>([])

// 事件处理
const handleEditPage = (pageType: string)
const handleCreateCategory = ()
const handleDeleteCategory = (id: number)
// ... 更多事件

// 样式系统
@import '@/uni.scss'  // 集成设计系统
```

#### design.uts (350+行)

**职责**: 装修功能的所有业务逻辑和数据管理

**核心内容**:

1. **接口定义**

   ```typescript
   interface DesignItem        // 装修页面数据
   interface DesignComponent   // 装修组件数据
   interface DesignTemplate    // 装修模板数据
   interface DesignConstraints // 约束条件
   ```

2. **API函数** (8个导出函数)
   - getDesignList() // 获取装修列表
   - getHomePageDesign() // 获取首页装修
   - getProductPageDesign() // 获取商品页装修
   - getCategoryDesigns() // 获取分类装修
   - getCustomPages() // 获取自定义页面
   - getTemplateLibrary() // 获取模板库
   - getAvailableComponents() // 获取组件库
   - saveDesign() // 保存装修
   - publishDesign() // 发布装修
   - deleteDesign() // 删除装修

3. **工具函数**
   - formatDateTime() // 日期格式化
   - validateComponent() // 组件验证
   - generateComponentId() // 生成组件ID
   - getDesignConstraints() // 获取约束条件
   - cloneDesign() // 深度克隆
   - validateDesign() // 装修验证
   - exportDesignJSON() // 导出JSON
   - importDesignJSON() // 导入JSON

---

## 页面功能详解

### 📋 UI布局结构

#### 1. 页面头部

```
┌──────────────────────────────────────┐
│ 页面装修                             │
│ 设计和装修您的商城页面              │
└──────────────────────────────────────┘
```

- 大标题: "页面装修"
- 副标题: "设计和装修您的商城页面"

#### 2. 导航选项卡

```
[ H首页装修 ] [ C分类页 ] [ P商品页 ] [ +自定义 ] [ T模板库 ] [ B组件库 ]
```

- 点击切换不同功能模块
- 当前活跃选项卡高亮显示
- 支持键盘快捷键（可扩展）

#### 3. 首页装修模块

```
内容标题          [编辑按钮]
┌────────────────────────────┐
│                            │
│  设计卡片布局              │
│  └─ 卡片信息               │
│     └─ 操作按钮            │
│        [编辑] [预览]       │
│                            │
└────────────────────────────┘
```

#### 4. 分类页模块

```
内容标题          [新建装修]
┌────────────────────────────┐
│  分类1  [状态] [编辑][删除] │
│  分类2  [状态] [编辑][删除] │
│  分类3  [状态] [编辑][删除] │
└────────────────────────────┘
```

#### 5. 模板库模块

```
┌──────────┬──────────┬──────────┬──────────┐
│ 模板卡1  │ 模板卡2  │ 模板卡3  │ 模板卡4  │
├──────────┼──────────┼──────────┼──────────┤
│ [预览]   │ [预览]   │ [预览]   │ [预览]   │
│ 名称     │ 名称     │ 名称     │ 名称     │
│ 描述     │ 描述     │ 描述     │ 描述     │
└──────────┴──────────┴──────────┴──────────┘
```

#### 6. 组件库模块

```
┌──────────┬──────────┬──────────┬──────────┐
│ 组件卡1  │ 组件卡2  │ 组件卡3  │ 组件卡4  │
├──────────┼──────────┼──────────┼──────────┤
│ [图标]   │ [图标]   │ [图标]   │ [图标]   │
│ 名称     │ 名称     │ 名称     │ 名称     │
│ 描述     │ 描述     │ 描述     │ 描述     │
│ [添加]   │ [添加]   │ [添加]   │ [添加]   │
└──────────┴──────────┴──────────┴──────────┘
```

---

## API文档

### 主API函数

#### 1. getDesignList(params?)

获取装修页面列表

```typescript
const designs = await getDesignList()

// 返回值示例
[
  {
    id: 1,
    name: '首页装修',
    type: 'homepage',
    status: 1,
    content: [],
    updated_at: '2026-01-30 14:30:00'
  },
  // ...
]
```

#### 2. getHomePageDesign()

获取首页装修详情

```typescript
const homepage = await getHomePageDesign()

// 返回包含的组件内容
{
  id: 'homepage',
  name: '首页装修',
  type: 'homepage',
  content: [
    { id: 'carousel-1', type: 'carousel', ... },
    { id: 'product-1', type: 'product', ... }
  ]
}
```

#### 3. getCategoryDesigns()

获取分类装修列表

```typescript
const categories =
  await getCategoryDesigns()[
    // 返回示例
    {
      id: 1,
      name: "默认分类装修",
      type: "category",
      status: 1,
      categoryId: 0,
      categoryName: "全部分类",
    }
  ];
```

#### 4. getCustomPages()

获取自定义页面列表

```typescript
const pages =
  await getCustomPages()[
    // 返回示例
    {
      id: 1,
      name: "新年促销页",
      type: "custom",
      status: 1,
      path: "/pages/promotion/newyear",
    }
  ];
```

#### 5. getTemplateLibrary()

获取页面模板库

```typescript
const templates =
  await getTemplateLibrary()[
    // 返回示例
    {
      id: 1,
      name: "电商风格A",
      description: "简洁现代的电商布局",
      type: "homepage",
      preview: "@/static/images/template-a.png",
    }
  ];
```

#### 6. getAvailableComponents()

获取可用组件库

```typescript
const components =
  await getAvailableComponents()[
    // 返回示例
    {
      id: "image",
      type: "image",
      name: "图片组件",
      icon: "I",
      description: "展示图片和图片轮播",
      componentName: "ImageComponent",
    }
  ];
```

#### 7. saveDesign(design)

保存装修页面

```typescript
const result = await saveDesign({
  id: 1,
  name: '新建装修',
  type: 'homepage',
  status: 0,
  content: []
})

// 返回示例
{ id: 1, message: '保存成功' }
```

#### 8. publishDesign(designId)

发布装修页面

```typescript
await publishDesign(1);
// 返回: { message: '发布成功' }
```

#### 9. deleteDesign(designId)

删除装修页面

```typescript
await deleteDesign(1);
// 返回: { message: '删除成功' }
```

---

## 数据结构

### DesignItem 装修页面

```typescript
interface DesignItem {
  id: string | number;
  name: string; // 装修名称
  type: "homepage" | "category" | "product" | "custom";
  status: 0 | 1; // 0=草稿, 1=已发布
  categoryId?: string | number; // 分类ID
  categoryName?: string; // 分类名称
  path?: string; // 自定义页面路径
  preview_url?: string; // 预览图URL
  content: DesignComponent[]; // 组件列表
  version?: string; // 版本号
  created_at?: string; // 创建时间
  updated_at?: string; // 更新时间
}
```

### DesignComponent 组件

```typescript
interface DesignComponent {
  id: string; // 组件唯一ID
  type:
    | "image"
    | "text"
    | "product"
    | "carousel"
    | "divider"
    | "spacer"
    | "button"
    | "form";
  name: string; // 组件名称
  icon: string; // 组件图标
  description?: string; // 组件描述
  componentName?: string; // Vue组件名
  config?: Record<string, any>; // 配置参数
  children?: DesignComponent[]; // 子组件
}
```

### DesignTemplate 模板

```typescript
interface DesignTemplate {
  id: string | number;
  name: string; // 模板名称
  description: string; // 模板描述
  type: string; // 模板类型
  preview: string; // 预览图URL
  content: DesignComponent[]; // 模板内容
  created_at?: string; // 创建时间
}
```

---

## 使用指南

### 快速开始

#### 步骤1: 访问装修页面

```
1. 登录管理后台
2. 点击左侧菜单 "系统" → "设计" → "页面装修"
3. 进入装修管理主界面
```

#### 步骤2: 选择装修类型

```
点击对应标签页:
- 首页装修: 自定义商城首页
- 分类页: 为分类创建装修
- 商品页: 自定义商品详情页
- 自定义: 创建营销推广页
- 模板库: 使用预设模板
- 组件库: 查看可用组件
```

#### 步骤3: 编辑装修

```
1. 点击 [编辑] 按钮或卡片
2. 进入装修编辑器
3. 拖拽组件到页面
4. 配置组件参数
5. 实时预览效果
```

#### 步骤4: 发布上线

```
1. 编辑完成后点击 [发布]
2. 确认发布内容
3. 确认后装修即刻生效
```

---

## 开发计划

### Phase 1: 基础编辑器 (优先级: 高)

- [ ] **editor.uvue** - 装修编辑器界面
  - 组件编辑面板
  - 实时预览窗口
  - 属性配置区
  - 撤销/重做功能

- [ ] **拖拽排序** - 组件拖拽和排序
  - 拖拽添加组件
  - 拖拽排序组件
  - 删除组件

- [ ] **属性配置** - 组件参数设置
  - 基本属性编辑
  - 样式自定义
  - 响应式设置

### Phase 2: 高级功能 (优先级: 中)

- [ ] **版本管理** - 版本控制和回滚
  - 版本列表
  - 版本对比
  - 版本回滚
  - 自动保存草稿

- [ ] **模板管理** - 模板库功能
  - 模板列表
  - 模板预览
  - 模板应用
  - 自定义模板保存

- [ ] **页面克隆** - 快速复制功能
  - 克隆装修页面
  - 保留配置结构
  - 快速修改

### Phase 3: 智能特性 (优先级: 低)

- [ ] **AI建议** - 人工智能优化
  - 布局建议
  - 色彩搭配
  - 文案优化

- [ ] **数据分析** - 性能监控
  - 页面访问统计
  - 用户转化分析
  - 性能指标

---

## 与CRMEB对标

### CRMEB标准功能对标

| 功能       | CRMEB | mall | 状态      |
| ---------- | ----- | ---- | --------- |
| 首页装修   | Y     | Y    | ✓ 已实现  |
| 分类页装修 | Y     | Y    | ✓ 已实现  |
| 商品页装修 | Y     | Y    | ✓ 已实现  |
| 自定义页面 | Y     | Y    | ✓ 已实现  |
| 组件库     | Y     | Y    | ✓ 已实现  |
| 模板库     | Y     | Y    | ✓ 已实现  |
| 拖拽编辑器 | Y     | -    | ⏳ 开发中 |
| 实时预览   | Y     | -    | ⏳ 规划中 |
| 版本管理   | Y     | -    | ⏳ 规划中 |
| AI布局建议 | -     | -    | ⏳ 规划中 |

### 组件库对标

| 组件     | CRMEB | mall | 说明      |
| -------- | ----- | ---- | --------- |
| 图片轮播 | Y     | Y    | ✓ 支持    |
| 商品列表 | Y     | Y    | ✓ 支持    |
| 分类导航 | Y     | -    | ⏳ 规划中 |
| 搜索框   | Y     | -    | ⏳ 规划中 |
| 优惠券   | Y     | -    | ⏳ 规划中 |
| 倒计时   | Y     | -    | ⏳ 规划中 |
| 视频     | Y     | -    | ⏳ 规划中 |
| 直播     | Y     | -    | ⏳ 规划中 |

---

## 技术特性

### 设计系统集成

```typescript
@import '@/uni.scss'

// 颜色系统
$brand-primary: #1890ff
$brand-success: #52c41a
$text-primary: #000000
$background-secondary: #f5f5f5

// 间距系统
$space-sm: 8px
$space-md: 16px
$space-lg: 24px

// 圆角系统
$radius: 8px
$radius-sm: 4px
```

### 响应式设计

```
桌面版 (≥1024px)  : 4列网格
平板版 (768-1023px): 3列网格 + 响应式菜单
手机版 (≤767px)   : 2列网格 + 单列列表
```

### TypeScript 类型安全

所有接口和数据结构都使用TypeScript定义，确保类型安全和IDE支持。

---

## 常见问题

### Q: 如何快速创建首页装修?

A: 可以：

1. 进入模板库选择合适模板
2. 一键应用模板内容
3. 在编辑器中修改细节
4. 发布上线

### Q: 支持多少个组件?

A: 单个装修页面最多支持50个组件，可根据需要调整。

### Q: 如何备份装修数据?

A: 可以使用导出JSON功能备份，然后可随时导入恢复。

### Q: 装修后立即生效吗?

A: 点击发布后立即生效，无需其他步骤。

---

**文档版本**: 1.0.0  
**最后更新**: 2026-01-31  
**维护者**: 设计团队