标签打印系统（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 则走静默打印；
打印时只输出标签版面：工具栏、面板、序号角标、空格边框均不打印。

使用步骤

安装依赖
```
npm install
```
启动开发服务器
```
npm run dev
```
浏览器打开终端提示的地址（默认 http://localhost:5173）。
批量排版同类标签
- 顶部“批量模板”下拉选择模板（如 HardDisk）；
- 在左侧「① 批量填充设置」中修改字段（可先点「保存模板配置」）；
- 顶栏输入“数量”，点「批量添加」，标签会依次填入空格。
单独排版某一张标签
- 单击目标格子，左侧出现「② 编辑第 N 格」；
- 选择“该格使用模板”，填写内容；
- 空格点「填入该格」，已有内容点「保存到该格」；
- 需要跳过该格打印：双击格子或点「隐藏(不打印)」。
自定义文字标签（CustomTag）
- 模板选 CustomTag（批量或单格均可）；
- 逐行输入文字，设置字号 / 颜色 / 加粗，用「＋添加一行」增行；
- 保存并添加后，格子内按行居中显示对应颜色与字号的文字。
调整打印边距并打印
- 顶栏修改“上下边距 / 左右边距”（cm）；
- 点「打印」，在打印预览中确认后输出。
清空版面
- 点「清空全部」一次性恢复全部 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 控制，屏幕上的一切编辑辅助元素均不进入打印。

5.5 KiB Raw Permalink Blame History Unescape Escape

标签打印系统（Label Print System）

功能简介

标签版面

内置标签模板

批量填充

逐格自定义编辑

CustomTag 自定义文字

打印

使用步骤

生产构建

目录结构

技术要点

5.5 KiB

Raw Permalink Blame History