mp-vue/docs/分销海报功能说明.md

分销海报功能说明

🎨 功能概述

分销海报功能是一个完整的海报设计和生成系统，允许管理员设置海报模板，分销商可以生成个性化的推广海报。

✨ 主要特性

1. 可视化编辑器

• 实时预览海报效果
• 拖拽调整元素位置
• 所见即所得的编辑体验

2. 预设模板系统

• 多种精美模板可选
• 一键应用模板配置
• 支持自定义模板

3. 元素自定义

• 头像设置：支持圆形/方形，可调整大小
• 昵称设置：自定义字体大小和颜色
• 二维码设置：可调整大小和位置
• 背景图片：支持上传自定义背景

4. 智能布局

• 响应式设计，适配不同屏幕
• 元素位置智能约束
• 防止元素超出画布边界

📁 文件结构

src/views/shop/shopDealerPoster/
├── index.vue                 # 主页面组件
src/api/shop/shopDealerPoster/
├── index.ts                  # API接口
└── model/
    └── index.ts             # 数据模型

🔧 技术实现

核心组件

• Vue 3 Composition API：响应式状态管理
• Ant Design Vue：UI组件库
• Canvas API：海报生成（预留）
• 拖拽交互：原生DOM事件处理

数据结构

interface PosterConfig {
  backgroundImage: string;     // 背景图片
  showAvatar: boolean;         // 是否显示头像
  avatarWidth: number;         // 头像宽度
  avatarShape: string;         // 头像形状
  showNickname: boolean;       // 是否显示昵称
  nicknameFontSize: number;    // 昵称字体大小
  nicknameColor: string;       // 昵称颜色
  showQrcode: boolean;         // 是否显示二维码
  qrcodeWidth: number;         // 二维码宽度
  elements: {                  // 元素位置
    avatar: { x: number; y: number };
    nickname: { x: number; y: number };
    qrcode: { x: number; y: number };
  };
}

🎯 使用流程

管理员设置

1. 进入分销海报设置页面
2. 选择预设模板或自定义设计
3. 调整元素位置和样式
4. 上传背景图片
5. 保存配置

分销商使用

1. 进入分销中心
2. 选择海报模板
3. 系统自动填充个人信息
4. 生成个性化海报
5. 分享推广

🔌 API接口

配置管理

// 获取当前配置
getCurrentPosterConfig(): Promise<PosterConfig>

// 保存配置
savePosterConfig(config: PosterConfig): Promise<string>

// 上传背景图片
uploadPosterBackground(file: File): Promise<{url: string}>

海报生成

// 生成用户海报
generatePoster(userId: number, config?: PosterConfig): Promise<{url: string}>

🎨 预设模板

1. 经典模板

• 风格：橙色渐变背景
• 布局：左上角头像，居中二维码
• 适用：通用推广场景

2. 简约模板

• 风格：蓝色简洁背景
• 布局：居中对称布局
• 适用：专业商务场景

3. 活力模板

• 风格：绿色活力背景
• 布局：横向排列布局
• 适用：年轻时尚场景

🛠️ 自定义开发

添加新模板

const newTemplate = {
  id: 4,
  name: '新模板',
  preview: 'template-preview.jpg',
  config: {
    backgroundImage: 'background.jpg',
    elements: {
      avatar: { x: 100, y: 100 },
      nickname: { x: 200, y: 120 },
      qrcode: { x: 300, y: 400 }
    },
    // 其他配置...
  }
};

扩展元素类型

1. 在 PosterConfig 中添加新元素配置
2. 在模板中添加新元素渲染
3. 在设置面板中添加对应控制项
4. 更新拖拽和样式处理逻辑

📱 响应式支持

• 桌面端：完整功能，左右布局
• 平板端：上下布局，保持功能完整
• 移动端：简化操作，核心功能可用

🔍 性能优化

• 图片懒加载：预览图片按需加载
• 防抖处理：拖拽操作防抖优化
• 缓存机制：配置数据本地缓存
• 压缩上传：图片自动压缩处理

🚀 未来扩展

• 更多元素类型（文字、图标、形状）
• 动画效果支持
• 批量生成功能
• 模板市场
• AI智能布局
• 视频海报支持

📞 技术支持

如有问题或建议，请联系开发团队。