修改页面结构

2026-02-02 20:07:37 +08:00
parent 3de5e9ebe9
commit 21f4a0fa96
209 changed files with 41824 additions and 2730 deletions
--- a/docs/admin/DESIGN_DECORATION_GUIDE.md
+++ b/docs/admin/DESIGN_DECORATION_GUIDE.md
@@ -0,0 +1,803 @@
+# 页面装修功能 - 完整文档
+
+> 参考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  
+**维护者**: 设计团队