180 lines
4.5 KiB
Markdown
180 lines
4.5 KiB
Markdown
# 页面装修管理模块 - 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
|