%E7%BE%8E%E5%9B%BD%E7%89%88/Food%20Labeling%20Management%20Platform/LabelTemplateEditor_Full.md

# 标签模板编辑器（Label Template Editor）
> **超级完整 · 前端开发规格说明**
>  
> 适用对象：AI 前端开发模型 / 前端工程师  
> 技术范围：仅前端页面（Vue / React 均可）  
> 数据范围：仅前端内存 / LocalStorage  
> 不包含：后端、接口、登录、权限、真实打印  
---
## 一、项目目标（必须理解）
本系统用于实现一个 **所见即所得（WYSIWYG）的标签模板编辑器**，用于配置和设计可打印的商品标签、价格标签、营养标签等。
系统最终产物：
- 一个可交互的前端页面
- 一份可导出的 JSON 标签模板结构
---
## 二、整体页面布局（强约束）
页面必须为 **三栏布局**，不可合并、不可简化：
```
┌──────────────┬────────────────────────────┬────────────────────┐
│ 左侧标签库   │        中央标签画布          │ 右侧属性设置面板   │
│ Elements     │        Label Canvas         │ Properties         │
└──────────────┴────────────────────────────┴────────────────────┘
```
---
## 三、核心数据模型（绝对不可改）
### 3.1 标签模板（LabelTemplate）
```json
{
  "id": "template-001",
  "name": "Price Label",
  "labelType": "PRICE",
  "unit": "cm",
  "width": 6,
  "height": 4,
  "appliedLocation": "ALL",
  "showRuler": true,
  "elements": []
}
```
字段说明：
| 字段 | 说明 |
|----|----|
| id | 模板唯一标识 |
| name | 模板名称 |
| labelType | 标签类型（PRICE / NUTRITION / SHIPPING） |
| unit | 尺寸单位（cm / inch） |
| width | 标签宽度 |
| height | 标签高度 |
| appliedLocation | 适用门店 |
| showRuler | 是否显示刻度 |
| elements | 标签元素集合 |
---
### 3.2 标签元素（LabelElement）
```json
{
  "id": "el-001",
  "type": "TEXT_PRICE",
  "x": 10,
  "y": 20,
  "width": 120,
  "height": 30,
  "rotation": "horizontal",
  "border": "none",
  "config": {}
}
```
通用字段说明：
| 字段 | 说明 |
|----|----|
| id | 元素唯一标识 |
| type | 元素类型 |
| x / y | 在画布中的坐标 |
| width / height | 元素尺寸 |
| rotation | horizontal / vertical |
| border | none / line / dotted |
| config | 元素专属配置 |
---
## 四、左侧标签库（Elements Panel）
> **100% 对照 Excel，不允许遗漏**
### A. 基础文字类（Excel: Text, Price, etc）
| UI名称 | type |
|----|----|
| 普通文本 | TEXT_STATIC |
| 商品名称 | TEXT_PRODUCT |
| 商品价格 | TEXT_PRICE |
---
### B. 编码类（Excel: Barcode / QR Code）
| UI名称 | type |
|----|----|
| 一维条码 | BARCODE |
| 二维码 | QRCODE |
---
### C. 图形类（Excel: Image, Logo）
| UI名称 | type |
|----|----|
| 图片 / Logo | IMAGE |
---
### D. 时间日期类（Excel: Current Date / Time / Duration）
| UI名称 | type |
|----|----|
| 当前日期 | DATE |
| 当前时间 | TIME |
| 保质期 / 有效期 | DURATION |
---
### E. 重量与计价类（Excel: Weight / Weight Based）
| UI名称 | type |
|----|----|
| 重量 | WEIGHT |
| 按重量计价 | WEIGHT_PRICE |
---
### F. 结构辅助类（Excel: Blank Space）
| UI名称 | type |
|----|----|
| 空白占位 | BLANK |
---
### G. 复合结构类（Excel: Nutrition Facts）
| UI名称 | type |
|----|----|
| 营养成分表 | NUTRITION |
---
## 五、中央画布（Label Canvas）
### 5.1 画布规则
- 画布尺寸 = 模板 width × height
- 根据 unit 自动换算 px
- 可显示刻度尺
- 背景为白色
### 5.2 元素交互规则
- 拖拽移动
- 拖拽缩放（四角）
- 单击选中
- Delete 删除
- 仅允许单选
---
## 六、右侧属性面板（Properties Panel）
### 6.1 状态一：未选中元素（模板级）
字段：
- Template Name
- Starter Template
- Label Type
- Applied Location
- Width / Height
- Unit
- Show Ruler
---
### 6.2 状态二：选中元素（通用）
字段：
- X / Y
- Width / Height
- Rotation
- Border
---
### 6.3 状态三：元素专属属性（完整定义）
#### TEXT_STATIC / TEXT_PRODUCT / TEXT_PRICE
```json
{
  "contentType": "STATIC | PRODUCT | PRICE",
  "text": "Apple",
  "fontFamily": "Arial",
  "fontSize": 14,
  "fontWeight": "normal | bold",
  "textAlign": "left | center | right",
  "prefix": "￥",
  "decimal": 2
}
```
---
#### BARCODE
```json
{
  "barcodeType": "CODE128 | EAN13",
  "data": "123456789",
  "showText": true
}
```
---
#### QRCODE
```json
{
  "data": "https://example.com",
  "errorLevel": "L | M | Q | H"
}
```
---
#### IMAGE
```json
{
  "src": "base64 / url",
  "scaleMode": "contain | cover"
}
```
---
#### DATE / TIME / DURATION
```json
{
  "format": "YYYY-MM-DD HH:mm",
  "offsetDays": 3
}
```
---
#### WEIGHT
```json
{
  "unit": "g | kg | lb",
  "value": 500
}
```
---
#### WEIGHT_PRICE
```json
{
  "unitPrice": 10,
  "weight": 0.5,
  "currency": "￥"
}
```
---
#### NUTRITION
```json
{
  "calories": 120,
  "fat": "5g",
  "protein": "3g",
  "carbs": "10g",
  "layout": "standard"
}
```
---
## 七、模板保存与导出
- 保存至 LocalStorage
- Key：label-template-{id}
- 支持导出 JSON 文件
---
## 八、Excel Sheet 覆盖性校验（结论）
Excel 中所有 Sheet 均已覆盖：
- Text, Price, etc
- Barcode
- QR Code
- Image, Logo
- Blank Space
- Nutrition Facts
- Weight Based
- Weight
- Duration
- Current Date
- Current Time
- Label Type
- How-to
- Label ID
- Multiple Options / DateTime
**无遗漏功能点**
---
## 九、给 AI 的最终开发指令（强约束）
> 请严格按照本文档实现前端标签模板编辑器  
> 不得修改数据结构  
> 不得自行简化功能  
> 不得引入后端或接口  
---