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事件处理

### 数据结构
```typescript
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接口

### 配置管理
```typescript
// 获取当前配置
getCurrentPosterConfig(): Promise<PosterConfig>

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

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

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

## 🎨 预设模板

### 1. 经典模板
- **风格**：橙色渐变背景
- **布局**：左上角头像，居中二维码
- **适用**：通用推广场景

### 2. 简约模板
- **风格**：蓝色简洁背景
- **布局**：居中对称布局
- **适用**：专业商务场景

### 3. 活力模板
- **风格**：绿色活力背景
- **布局**：横向排列布局
- **适用**：年轻时尚场景

## 🛠️ 自定义开发

### 添加新模板
```typescript
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智能布局
- [ ] 视频海报支持

## 📞 技术支持

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