feat : 贴标秤缩略版标签设计

other-module/canteen-device/clean-veg-packaging-labeler/label-preview.html

@@ -35,7 +35,7 @@
 
     /* Tab 切换栏 */
     .tab-bar { display: flex; gap: 0; padding: 12px 20px 0; flex-shrink: 0; }
-    .tab-btn { padding: 8px 20px; border: 1px solid rgba(255,255,255,0.08); background: transparent; color: rgba(255,255,255,0.5); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: inherit; border-radius: 8px 8px 0 0; border-bottom: none; }
+    .tab-btn { padding: 8px 12px; border: 1px solid rgba(255,255,255,0.08); background: transparent; color: rgba(255,255,255,0.5); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: inherit; border-radius: 8px 8px 0 0; border-bottom: none; }
     .tab-btn:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.03); }
     .tab-btn.active { color: #fff; border-color: rgba(255,255,255,0.12); }
     .tab-btn--blue.active { background: #1a2b4a; }
@@ -107,6 +107,14 @@
     }
     .label-sticker__qrcode svg { display: block; width: 100%; height: 100%; }
 
+    /* ====== 小标签 — 半长热敏纸（宽度为大标签一半，字段精简逐行排布） ====== */
+    .label-sticker--small { width: 200px; min-height: 0; }
+    .label-sticker--small .label-sticker__body { padding: 5px 8px; gap: 1px; }
+    .label-sticker--small .label-info { font-size: 9px; }
+    .label-sticker--small .label-sticker__qrcode { width: 48px; height: 48px; }
+    /* 小标签字段单列堆叠 */
+    .label-info--col { flex-direction: column; gap: 1px; }
+
     /* 打印按钮 */
     .action-bar { display: flex; gap: 10px; justify-content: center; flex-shrink: 0; padding: 0 20px 16px; }
     .print-btn {
@@ -150,10 +158,16 @@
       <span class="tab-dot tab-dot--blue"></span>订单标签
     </button>
     <button class="tab-btn tab-btn--green" data-tab="veg" onclick="switchTab('veg')">
-      <span class="tab-dot tab-dot--green"></span>净菜包标签
+      <span class="tab-dot tab-dot--green"></span>净菜包标签-大
+    </button>
+    <button class="tab-btn tab-btn--green" data-tab="veg-s" onclick="switchTab('veg-s')">
+      <span class="tab-dot tab-dot--green"></span>净菜包标签-小
     </button>
     <button class="tab-btn tab-btn--orange" data-tab="meal" onclick="switchTab('meal')">
-      <span class="tab-dot tab-dot--orange"></span>餐品净菜包标签
+      <span class="tab-dot tab-dot--orange"></span>餐品净菜包标签-大
+    </button>
+    <button class="tab-btn tab-btn--orange" data-tab="meal-s" onclick="switchTab('meal-s')">
+      <span class="tab-dot tab-dot--orange"></span>餐品净菜包标签-小
     </button>
   </div>
 
@@ -161,10 +175,14 @@
   <div class="main-content" id="mainContent">
     <!-- 订单标签面板 -->
     <div class="label-panel active" id="panelOrder"></div>
-    <!-- 净菜标签面板 -->
+    <!-- 净菜包标签-大面积 -->
     <div class="label-panel" id="panelVeg"></div>
-    <!-- 餐品净菜包标签面板 -->
+    <!-- 净菜包标签-小面板 -->
+    <div class="label-panel" id="panelVegSmall"></div>
+    <!-- 餐品净菜包标签-大面积 -->
     <div class="label-panel" id="panelMeal"></div>
+    <!-- 餐品净菜包标签-小面板 -->
+    <div class="label-panel" id="panelMealSmall"></div>
   </div>
 
   <!-- 操作栏 -->
@@ -336,9 +354,9 @@
     panel.innerHTML = html;
   }
 
-  /* 生成二维码占位 SVG（9×9 网格 + 三角落定位图案） */
-  function qrSvg(code) {
-    var size = 56, cells = 9, cw = size / cells;
+  /* 生成二维码占位 SVG（9×9 网格 + 三角落定位图案），px 指定边长，默认 56 */
+  function qrSvg(code, px) {
+    var size = px || 56, cells = 9, cw = size / cells;
     var hash = 0, i;
     for (i = 0; i < code.length; i++) { hash = ((hash << 5) - hash) + code.charCodeAt(i); hash |= 0; }
     var rects = '';
@@ -357,10 +375,10 @@
         }
       }
     }
-    return '<div class="label-sticker__qrcode"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + size + ' ' + size + '" width="56" height="56"><rect width="' + size + '" height="' + size + '" fill="#fff"/>' + rects + '</svg></div>';
+    return '<div class="label-sticker__qrcode"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + size + ' ' + size + '" width="' + size + '" height="' + size + '"><rect width="' + size + '" height="' + size + '" fill="#fff"/>' + rects + '</svg></div>';
   }
 
-  /* ---- 渲染净菜包标签 ---- */
+  /* ---- 渲染净菜包标签-大 ---- */
   function renderVegLabels() {
     var panel = document.getElementById('panelVeg');
     var html = '';
@@ -398,7 +416,7 @@
     panel.innerHTML = html;
   }
 
-  /* ---- 渲染餐品净菜包标签 ---- */
+  /* ---- 渲染餐品净菜包标签-大 ---- */
   function renderMealLabels() {
     var panel = document.getElementById('panelMeal');
     var html = '';
@@ -434,39 +452,81 @@
     panel.innerHTML = html;
   }
 
+  /* ---- 小标签共用模板：半长热敏纸，字段为 订单号/名称/包装规格/包装日期/保质期，二维码居右 ---- */
+  function smallLabelHtml(nameLabel, name, specObj, shelfLife, code) {
+    return ''
+      + '<div class="label-sticker label-sticker--small">'
+      +   '<div class="label-sticker__body">'
+      +     '<div class="label-info label-info--col">'
+      +       '<div class="label-info__item"><span class="label-info__label">订单号：</span><span class="label-info__value">' + mockData.orderNo + '</span></div>'
+      +       '<div class="label-info__item"><span class="label-info__label">' + nameLabel + '：</span><span class="label-info__value">' + name + '</span></div>'
+      +       '<div class="label-info__item"><span class="label-info__label">包装规格：</span><span class="label-info__value">' + formatSpec(specObj) + '</span></div>'
+      +       '<div class="label-info__item"><span class="label-info__label">包装日期：</span><span class="label-info__value">' + mockData.packDate + '</span></div>'
+      +       '<div class="label-info__item"><span class="label-info__label">保质期：</span><span class="label-info__value">' + shelfLife + '</span></div>'
+      +     '</div>'
+      +   '</div>'
+      +   qrSvg(code, 48)
+      + '</div>';
+  }
+
+  /* ---- 渲染净菜包标签-小 ---- */
+  function renderVegSmallLabels() {
+    var panel = document.getElementById('panelVegSmall');
+    var html = '';
+    mockData.vegPacks.forEach(function(v) {
+      var specObj = typeof v.packSpec === 'object' ? v.packSpec : parseLegacyPackSpec(v.packSpec);
+      for (var p = 0; p < v.packSize; p++) {
+        var code = mockData.orderNo + '-V' + v.name.charAt(0) + (p + 1);
+        html += smallLabelHtml('净菜名称', v.name, specObj, v.shelfLife, code);
+      }
+    });
+    panel.innerHTML = html;
+  }
+
+  /* ---- 渲染餐品净菜包标签-小 ---- */
+  function renderMealSmallLabels() {
+    var panel = document.getElementById('panelMealSmall');
+    var html = '';
+    mockData.mealPacks.forEach(function(m) {
+      var specObj = typeof m.packSpec === 'object' ? m.packSpec : parseLegacyPackSpec(m.packSpec);
+      for (var p = 0; p < m.packSize; p++) {
+        var code = mockData.orderNo + '-M' + (p + 1);
+        html += smallLabelHtml('餐品名称', m.name, specObj, m.shelfLife, code);
+      }
+    });
+    panel.innerHTML = html;
+  }
+
   /* ---- Tab 切换 ---- */
   var currentTab = 'order';
+  var TAB_PANELS = { 'order': 'panelOrder', 'veg': 'panelVeg', 'veg-s': 'panelVegSmall', 'meal': 'panelMeal', 'meal-s': 'panelMealSmall' };
   function switchTab(tab) {
     currentTab = tab;
     document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active'); });
     document.querySelector('.tab-btn[data-tab="' + tab + '"]').classList.add('active');
     document.querySelectorAll('.label-panel').forEach(function(p) { p.classList.remove('active'); });
-    if (tab === 'order') {
-      document.getElementById('panelOrder').classList.add('active');
-    } else if (tab === 'veg') {
-      document.getElementById('panelVeg').classList.add('active');
-    } else if (tab === 'meal') {
-      document.getElementById('panelMeal').classList.add('active');
-    }
-    /* 更新打印按钮颜色 */
+    document.getElementById(TAB_PANELS[tab]).classList.add('active');
+    /* 更新打印按钮颜色：订单蓝 / 净菜绿 / 餐品橙 */
     var btn = document.getElementById('printBtn');
     btn.className = 'print-btn';
     if (tab === 'order') btn.classList.add('print-btn--blue');
-    else if (tab === 'veg') btn.classList.add('print-btn--green');
-    else if (tab === 'meal') btn.classList.add('print-btn--orange');
+    else if (tab === 'veg' || tab === 'veg-s') btn.classList.add('print-btn--green');
+    else btn.classList.add('print-btn--orange');
   }
 
   /* ---- 打印当前标签：按 packSize 计数 ---- */
   function handlePrintCurrent() {
     var labels = [];
     if (currentTab === 'order') labels.push('订单标签');
-    else if (currentTab === 'veg') {
+    else if (currentTab === 'veg' || currentTab === 'veg-s') {
+      var vegTag = currentTab === 'veg' ? '净菜包标签-大' : '净菜包标签-小';
       mockData.vegPacks.forEach(function(v) {
-        for (var p = 0; p < v.packSize; p++) { labels.push('净菜包标签 — ' + v.name); }
+        for (var p = 0; p < v.packSize; p++) { labels.push(vegTag + ' — ' + v.name); }
       });
-    } else if (currentTab === 'meal') {
+    } else {
+      var mealTag = currentTab === 'meal' ? '餐品净菜包标签-大' : '餐品净菜包标签-小';
       mockData.mealPacks.forEach(function(m) {
-        for (var p = 0; p < m.packSize; p++) { labels.push('餐品净菜包标签 — ' + m.name); }
+        for (var p = 0; p < m.packSize; p++) { labels.push(mealTag + ' — ' + m.name); }
       });
     }
     showToast('已发送打印指令：' + labels.length + ' 张标签', 2000, 'success');
@@ -513,7 +573,9 @@
   /* ---- 初始化 ---- */
   renderOrderLabels();
   renderVegLabels();
+  renderVegSmallLabels();
   renderMealLabels();
+  renderMealSmallLabels();
 </script>
 </body>
 </html>