huangzhenbao/medical-mall

Fork 0

Files

huangzhenbao 3922409a25 完善

2026-02-03 21:35:57 +08:00

19 KiB

Raw Blame History

页面装修功能 - 完整文档

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

📑 目录

项目概述
核心功能
文件结构
页面功能详解
API文档
数据结构
使用指南
开发计划
与CRMEB对标

项目概述

功能定位

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

核心价值

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

技术栈

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

核心功能

🏠 1. 首页装修

功能特性:

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

使用场景:

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

功能入口:

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

📂 2. 分类页装修

功能特性:

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

使用场景:

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

功能入口:

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

分类装修列表:

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

🛍️ 3. 商品页装修

功能特性:

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

使用场景:

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

功能入口:

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

✏️ 4. 自定义页面

功能特性:

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

使用场景:

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

功能入口:

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

自定义页面管理:

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

🎨 5. 页面模板库

功能特性:

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

预设模板:

电商风格A - 简洁现代
- 简约配色，强调商品展示
- 适合高端品牌
- 突出产品品质
电商风格B - 豪华展示
- 丰富的视觉效果
- 适合大众商城
- 强调活动促销
精品风格 - 精品展示
- 精细的排版设计
- 适合精品商城
- 强调用户体验
商城风格 - 完整商城
- 功能完整的布局
- 适合综合商城
- 包含所有必要模块

功能入口:

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

🧩 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个功能模块切换
内容区域：各模块的具体功能显示
响应式布局：支持桌面、平板、手机

关键功能:

// 数据管理
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+行)

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

核心内容:

接口定义

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

API函数 (8个导出函数)
- getDesignList() // 获取装修列表
- getHomePageDesign() // 获取首页装修
- getProductPageDesign() // 获取商品页装修
- getCategoryDesigns() // 获取分类装修
- getCustomPages() // 获取自定义页面
- getTemplateLibrary() // 获取模板库
- getAvailableComponents() // 获取组件库
- saveDesign() // 保存装修
- publishDesign() // 发布装修
- deleteDesign() // 删除装修
工具函数
- 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?)

获取装修页面列表

const designs = await getDesignList()

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

2. getHomePageDesign()

获取首页装修详情

const homepage = await getHomePageDesign()

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

3. getCategoryDesigns()

获取分类装修列表

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

4. getCustomPages()

获取自定义页面列表

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

5. getTemplateLibrary()

获取页面模板库

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

6. getAvailableComponents()

获取可用组件库

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

7. saveDesign(design)

保存装修页面

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

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

8. publishDesign(designId)

发布装修页面

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

9. deleteDesign(designId)

删除装修页面

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

数据结构

DesignItem 装修页面

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

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 模板

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	-	⏳ 规划中

技术特性

设计系统集成

@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: 可以：

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

Q: 支持多少个组件?

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

Q: 如何备份装修数据?

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

Q: 装修后立即生效吗?

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

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

19 KiB Raw Blame History Unescape Escape

页面装修功能 - 完整文档

📑 目录

项目概述

功能定位

核心价值

技术栈

核心功能

🏠 1. 首页装修

📂 2. 分类页装修

🛍️ 3. 商品页装修

✏️ 4. 自定义页面

🎨 5. 页面模板库

🧩 6. 组件库

文件结构

目录结构

核心文件说明

index.uvue (898行)

design.uts (350+行)

页面功能详解

📋 UI布局结构

1. 页面头部

2. 导航选项卡

3. 首页装修模块

4. 分类页模块

5. 模板库模块

6. 组件库模块

API文档

主API函数

1. getDesignList(params?)

2. getHomePageDesign()

3. getCategoryDesigns()

4. getCustomPages()

5. getTemplateLibrary()

6. getAvailableComponents()

7. saveDesign(design)

8. publishDesign(designId)

9. deleteDesign(designId)

数据结构

DesignItem 装修页面

DesignComponent 组件

DesignTemplate 模板

使用指南

快速开始

步骤1: 访问装修页面

步骤2: 选择装修类型

步骤3: 编辑装修

步骤4: 发布上线

开发计划

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

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

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

与CRMEB对标

CRMEB标准功能对标

组件库对标

技术特性

设计系统集成

响应式设计

TypeScript 类型安全

常见问题

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

Q: 支持多少个组件?

Q: 如何备份装修数据?

Q: 装修后立即生效吗?

19 KiB

Raw Blame History