标签打印系统（Label Print System）

一个基于 Vue 3 + Vite + Tailwind CSS + Headless UI 的标签排版与打印工具。把一张 A4 标签纸按 4 列 × 11 行 = 44 格 排版，每格对应一枚实际标签，可批量排版、逐格编辑，并按打印边距输出。

---

功能简介

标签版面

• 一张纸固定 44 格（4 × 11），每格尺寸 48.5mm × 25.4mm，版面宽 194mm；
• 屏幕预览模拟真实标签纸，格子带序号角标（1–44），打印时不输出角标；
• 空格显示为浅色虚线圈，有内容的格子显示内容边框。

内置标签模板

模板	说明
I5_10400F_16G_256G_1060 / I5_10400F_16G_512G_2060 / I5_9400F_16G_256G_1060	台式机配置标签（CPU / 内存 / 硬盘 / 显卡）
I5_4590_8G_120G / I3_4130_8G_120G / G3260_8G_120G	台式机配置标签（CPU / 内存 / 硬盘 / 系统）
22寸一体机_4G_120G / 24寸一体机_I5_3代_8G_256G	一体机标签（标题 / CPU / 内存 / 硬盘）
HardDisk	硬盘标签（系统 / 分区 / 硬盘 / 品牌）
Error	售后/故障标签（标题 / 说明 / 时间）
CustomTag	自定义文字标签：行数可自由增删

模板都包含左侧固定信息区（二维码图片、店铺名、电话）与右侧规格区。 二维码图片需放在站点根目录（如 public/qrcode.png）才会显示。

批量填充

• 顶栏选择“批量模板”→ 在「① 批量填充设置」中配置内容 → 点「保存模板配置」→ 点「批量添加」；
• “批量添加”会按设置的数量，从第一个空格开始依次填入模板副本，适合快速铺满同类标签。

逐格自定义编辑

• 单击任意格子：在「② 编辑第 N 格」中为该格选择模板并单独填写内容（「填入该格」/「保存到该格」），每格内容相互独立；
• 有内容的格子会自动带出它的模板与内容，便于直接修改；
• 双击格子：隐藏 / 恢复该格内容（打印时该格留空但保留格子框），也可在编辑面板中用按钮操作；
• 「删除该格」把格子恢复为空格，其余格子的位置不受影响。

CustomTag 自定义文字

• 每行可输入一段文字（支持换行、自动居中折行显示）；
• 每行可单独设置：字号 (mm)、颜色（黑 / 深灰 / 红 / 橙 / 蓝 / 绿）、加粗；
• 空行自动跳过不显示，也可以借此“临时停用”某一行；
• 添加 / 删除行随时进行（最多 20 行）。

打印

• 可设置打印数量（批量添加用）与 上下 / 左右边距 (cm)；
• 点「打印」按设置动态注入 @page 边距并调用 window.print()；若运行环境提供 window.electronAPI.silentPrint 则走静默打印；
• 打印时只输出标签版面：工具栏、面板、序号角标、空格边框均不打印。

---

使用步骤

1. 安装依赖

   npm install
   

2. 启动开发服务器

   npm run dev
   

   浏览器打开终端提示的地址（默认 http://localhost:5173）。

3. 批量排版同类标签

   • 顶部“批量模板”下拉选择模板（如 HardDisk）；
   • 在左侧「① 批量填充设置」中修改字段（可先点「保存模板配置」）；
   • 顶栏输入“数量”，点「批量添加」，标签会依次填入空格。

4. 单独排版某一张标签

   • 单击目标格子，左侧出现「② 编辑第 N 格」；
   • 选择“该格使用模板”，填写内容；
   • 空格点「填入该格」，已有内容点「保存到该格」；
   • 需要跳过该格打印：双击格子或点「隐藏(不打印)」。

5. 自定义文字标签（CustomTag）

   • 模板选 CustomTag（批量或单格均可）；
   • 逐行输入文字，设置字号 / 颜色 / 加粗，用「＋ 添加一行」增行；
   • 保存并添加后，格子内按行居中显示对应颜色与字号的文字。

6. 调整打印边距并打印

   • 顶栏修改“上下边距 / 左右边距”（cm）；
   • 点「打印」，在打印预览中确认后输出。

7. 清空版面

   • 点「清空全部」一次性恢复全部 44 格为空。

---

生产构建

npm run build   # 产物输出到 dist/
npm run preview # 本地预览构建产物

---

目录结构

src/
├─ main.js / App.vue / style.css      # 入口与全局样式
└─ components/
   ├─ Main.vue                        # 主页面：44 格模型、批量填充、单格编辑
   ├─ LabelCell.vue                   # 单个标签格外壳（角标/选中/占位/隐藏/打印）
   ├─ DynamicForm.vue                 # 通用动态表单（input/select/textarea/lines）
   ├─ Input/  Select/                 # 自绘输入框与下拉选择
   ├─ CustomTag.vue                   # 自定义文字模板（行数/字号/颜色/加粗）
   ├─ Error.vue …                     # 各规格标签内容模板（config 驱动）
   └─ (LabelShell.vue 已废弃移除)

技术要点

• 每个格子是固定 44 个 LabelCell，与真实标签纸物理位置一一对应，打印时仅输出有内容的区域；
• 模板通过“模板注册表”（templates 数组）统一注册，新增模板只需在 Main.vue 中加一项；
• 数据一律深拷贝快照，保证批量与逐格之间互不干扰；
• 打印样式使用 @page margin + @media print 控制，屏幕上的一切编辑辅助元素均不进入打印。