# 页面装修管理模块 - README

> 基于CRMEB项目标准，实现完整的页面装修和DIY功能

## 📋 文件结构

```
pages/mall/admin/design/
├── index.uvue          # 装修管理主界面（898行）
├── design.uts          # 业务逻辑和数据管理（350+行）
├── editor.uvue         # 装修编辑器（待实现）
├── preview.uvue        # 装修预览页面（待实现）
└── README.md           # 本文件
```

## 🎯 核心功能

### 1. 首页装修 (Homepage)

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

### 2. 分类页装修 (Category)

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

### 3. 商品页装修 (Product)

- 自定义商品详情页布局
- 支持商品图、信息、评价等模块
- 提升商品转化率
- A/B测试支持

### 4. 自定义页面 (Custom)

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

### 5. 页面模板库 (Templates)

- 预设4套电商风格模板
- 一键应用模板快速建站
- 模板库不断扩充
- 自定义模板保存

### 6. 组件库 (Components)

- 8种预设装修组件：
  - 图片组件 (Image)
  - 文本组件 (Text)
  - 商品组件 (Product)
  - 轮播组件 (Carousel)
  - 分割线 (Divider)
  - 间距组件 (Spacer)
  - 按钮组件 (Button)
  - 表单组件 (Form)

## 🔧 API 函数列表

| 函数                       | 参数       | 返回值                     | 说明             |
| -------------------------- | ---------- | -------------------------- | ---------------- |
| `getDesignList(params?)`   | 查询参数   | Promise<DesignItem[]>      | 获取装修列表     |
| `getHomePageDesign()`      | 无         | Promise<DesignItem>        | 获取首页装修     |
| `getProductPageDesign()`   | 无         | Promise<DesignItem>        | 获取商品页装修   |
| `getCategoryDesigns()`     | 无         | Promise<DesignItem[]>      | 获取分类装修列表 |
| `getCustomPages()`         | 无         | Promise<DesignItem[]>      | 获取自定义页面   |
| `getTemplateLibrary()`     | 无         | Promise<DesignTemplate[]>  | 获取模板库       |
| `getAvailableComponents()` | 无         | Promise<DesignComponent[]> | 获取可用组件     |
| `saveDesign(design)`       | DesignItem | Promise<{id, message}>     | 保存装修         |
| `publishDesign(id)`        | 装修ID     | Promise<{message}>         | 发布装修         |
| `deleteDesign(id)`         | 装修ID     | Promise<{message}>         | 删除装修         |

## 📊 数据结构

### DesignItem 装修页面

```typescript
interface DesignItem {
  id: string | number; // 装修ID
  name: string; // 装修名称
  type: "homepage" | "category" | "product" | "custom";
  status: 0 | 1; // 0=草稿, 1=已发布
  content: DesignComponent[]; // 组件内容
  categoryId?: string | number; // 分类ID
  categoryName?: string; // 分类名称
  path?: string; // 页面路径
  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; // 组件描述
  config?: Record<string, any>; // 配置参数
  children?: DesignComponent[]; // 子组件
}
```

## 💻 使用示例

```typescript
// 导入服务
import {
  getDesignList,
  saveDesign,
  publishDesign,
  getAvailableComponents,
} from "./design.uts";

// 获取列表
const designs = await getDesignList();

// 保存装修
await saveDesign({
  id: 1,
  name: "首页",
  type: "homepage",
  status: 0,
  content: [],
});

// 发布装修
await publishDesign(1);

// 获取组件库
const components = await getAvailableComponents();
```

## 📱 菜单配置

```json
{
  "id": "design",
  "title": "设计",
  "children": [
    {
      "id": "design-home",
      "title": "页面装修",
      "path": "/pages/mall/admin/design/index"
    }
  ]
}
```

## 🚀 后续开发

- [ ] editor.uvue - 装修编辑器
- [ ] preview.uvue - 装修预览
- [ ] 拖拽排序功能
- [ ] 版本管理
- [ ] 模板库管理

---

**最后更新**: 2026-01-31  
**版本**: 1.0.0