# 整版酒单功能使用指南

## 功能概述

整版酒单功能允许用户创建包含多款啤酒的整页图片模板，支持2-12款酒的灵活布局，并可在小程序端一键生成个性化酒单图片。

## 核心特性

- ✅ **灵活规格选择** - 支持A4竖版/横版、正方形、自定义尺寸
- ✅ **多商品布局** - 支持2-12款酒的网格、列表、自由布局
- ✅ **可视化编辑** - 基于FastPoster的拖拽式设计器
- ✅ **变量绑定** - 自动生成变量名，支持动态数据填充
- ✅ **示例数据** - 内置示例数据，实时预览设计效果
- ✅ **模板管理** - 支持模板保存、复制、编辑、删除
- ✅ **小程序集成** - 无缝对接现有酒单生成流程

## 系统架构

```
frontend-store (管理端)     frontend-fastposter (编辑器)     小程序端
      ↓                           ↓                         ↓
  模板规格选择    →    可视化设计器 + 自动生成    →    数据填充 + 图片生成
      ↓                           ↓                         ↓
  模板列表管理    ←    模板保存 + 预览图        ←    Base64/OSS 图片
```

## 使用流程

### 1. 创建整版模板 (管理端)

1. **登录管理系统**
   - 访问 `http://store.beerape.com/template/menu`

2. **选择规格**
   - 点击"新建整版酒单"
   - 选择画布尺寸、商品数量、布局方向
   - 输入模板名称和描述

3. **设计模板**
   - 自动跳转到FastPoster编辑器
   - 系统自动生成对应数量的酒款区块
   - 拖拽调整布局、修改样式、添加背景等

4. **保存模板**
   - 点击编辑器中的"保存"按钮
   - 选择私有/公共模板权限

### 2. 生成酒单图片 (小程序端)

1. **选择酒款**
   - 在酒单页面点击"整页导出"
   - 进入多选模式，选择要包含的酒款

2. **选择模板**
   - 点击"下一步"进入模板选择页面
   - 系统显示匹配商品数量的模板
   - 选择心仪的模板样式

3. **生成图片**
   - 点击"生成图片"
   - 系统自动填充酒款数据到模板
   - 生成高清图片供预览和保存

## 技术实现详情

### 前端组件结构

```
frontend-store/src/views/template/menu/
├── index.vue                    # 模板管理主页面
├── components/
│   ├── SpecSelector.vue         # 规格选择组件
│   └── MenuDesignWizard.vue     # 设计向导组件
└── api/
    └── template.js              # 模板API接口
```

### 变量命名规范

系统采用 `beer{index}_{field}` 的命名规范：

```javascript
// 第一款酒的变量
beer0_name    // 酒款名称
beer0_style   // 酒款风格
beer0_abv     // 酒精度
beer0_ibu     // 苦度值
beer0_price   // 价格
beer0_spec    // 规格
beer0_img     // 图片URL

// 第二款酒以此类推
beer1_name, beer1_style, ...
```

### FastPoster集成

**自动生成功能：**
```javascript
// URL参数格式
/fastposter?mode=menu&itemCount=6&layout=grid&width=794&height=1123

// 自动生成的模板包含：
- 1个背景组件
- 1个标题组件 (vd: menu_title)
- N组酒款区块，每组包含7个组件：
  - 背景框
  - 酒款图片 (vd: beer{i}_img)
  - 酒款名称 (vd: beer{i}_name)
  - 酒款风格 (vd: beer{i}_style)
  - 酒精度   (vd: beer{i}_abv)
  - 苦度值   (vd: beer{i}_ibu)
  - 价格     (vd: beer{i}_price)
  - 规格     (vd: beer{i}_spec)
```

### 小程序数据映射

```javascript
// 小程序端数据映射示例
const params = { uuid: templateId }
selectedBeers.forEach((beer, i) => {
  params[`beer${i}_name`]  = beer.name
  params[`beer${i}_style`] = beer.customStyle || ''
  params[`beer${i}_abv`]   = beer.abv || ''
  params[`beer${i}_ibu`]   = beer.ibu || ''
  params[`beer${i}_price`] = beer.price1
  params[`beer${i}_spec`]  = beer.spec1
  params[`beer${i}_img`]   = beer.image
})

// 调用生成接口
genPoster(params).then(result => {
  // result.base64 或 result.url
})
```

## 部署说明

### 1. 前端部署

**frontend-store 更新：**
```bash
# 安装依赖
npm install

# 构建生产版本
npm run build

# 部署到服务器
cp -r dist/* /var/www/store.beerape.com/
```

**frontend-fastposter 更新：**
```bash
# 安装依赖
npm install

# 构建生产版本
npm run build

# 部署到服务器
cp -r dist/* /var/www/bar.beerape.com/fastposter/
```

### 2. 后端配置

无需修改后端代码，现有的 `/bar/poster/genPoster` 接口已支持多变量模板。

### 3. 小程序更新

只需更新 `templateSelect.vue` 中的参数映射逻辑即可。

## 常见问题

### Q1: 模板生成后为什么看不到酒款信息？
A1: 需要在编辑器中应用示例数据或手动填入变量值才能看到效果。保存后在小程序端会自动填充真实数据。

### Q2: 如何修改单个酒款区块的样式？
A2: 在FastPoster编辑器中选中对应的组件（文字/图片），在右侧属性面板调整字体、颜色、大小等样式。

### Q3: 模板支持的最大酒款数量是多少？
A3: 理论上支持20款，但建议不超过12款以保证显示效果和性能。

### Q4: 如何让空位自动隐藏？
A4: 在组件的vd绑定完成后，FastPoster会自动处理空值情况。如果变量值为空或null，对应组件不会显示。

### Q5: 生成的图片分辨率如何？
A5: 图片分辨率与模板画布设置一致，A4模板通常为794×1123px，可在规格选择时自定义更高分辨率。

## 后续优化建议

1. **批量操作增强** - 完善克隆、对齐等批量操作工具
2. **模板市场** - 建立公共模板分享机制
3. **样式预设** - 提供多种设计风格预设
4. **动态布局** - 支持可变行数的自适应布局
5. **数据源对接** - 支持直接从酒款库选择示例数据

---

## 技术支持

如有问题请联系开发团队或查看 [技术实现方案文档](./技术实现方案文档——"整版酒单生成"功能.md)。