LabelTemplateEditor_Full.md 5.8 KB

Edit Raw Blame History Permalink


标签模板编辑器（Label Template Editor）

超级完整 · 前端开发规格说明

适用对象：AI 前端开发模型 / 前端工程师

技术范围：仅前端页面（Vue / React 均可）

数据范围：仅前端内存 / LocalStorage

不包含：后端、接口、登录、权限、真实打印  


一、项目目标（必须理解）
本系统用于实现一个 所见即所得（WYSIWYG）的标签模板编辑器，用于配置和设计可打印的商品标签、价格标签、营养标签等。

系统最终产物：


一个可交互的前端页面
一份可导出的 JSON 标签模板结构


二、整体页面布局（强约束）
页面必须为 三栏布局，不可合并、不可简化：
┌──────────────┬────────────────────────────┬────────────────────┐
│ 左侧标签库   │        中央标签画布          │ 右侧属性设置面板   │
│ Elements     │        Label Canvas         │ Properties         │
└──────────────┴────────────────────────────┴────────────────────┘


三、核心数据模型（绝对不可改）
3.1 标签模板（LabelTemplate）
{
  "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）
{
  "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
{
  "contentType": "STATIC | PRODUCT | PRICE",
  "text": "Apple",
  "fontFamily": "Arial",
  "fontSize": 14,
  "fontWeight": "normal | bold",
  "textAlign": "left | center | right",
  "prefix": "￥",
  "decimal": 2
}


BARCODE
{
  "barcodeType": "CODE128 | EAN13",
  "data": "123456789",
  "showText": true
}


QRCODE
{
  "data": "https://example.com",
  "errorLevel": "L | M | Q | H"
}


IMAGE
{
  "src": "base64 / url",
  "scaleMode": "contain | cover"
}


DATE / TIME / DURATION
{
  "format": "YYYY-MM-DD HH:mm",
  "offsetDays": 3
}


WEIGHT
{
  "unit": "g | kg | lb",
  "value": 500
}


WEIGHT_PRICE
{
  "unitPrice": 10,
  "weight": 0.5,
  "currency": "￥"
}


NUTRITION
{
  "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 的最终开发指令（强约束）

请严格按照本文档实现前端标签模板编辑器

不得修改数据结构

不得自行简化功能

不得引入后端或接口