medical-mall/pages/mall/admin/design/README.md

页面装修管理模块 - 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	获取首页装修
getProductPageDesign()	无	Promise	获取商品页装修
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 装修页面

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 组件配置

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[]; // 子组件
}

💻 使用示例

// 导入服务
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();

📱 菜单配置

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

🚀 后续开发

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

---

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