# 标签打印系统（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. **安装依赖**
   ```bash
   npm install
   ```

2. **启动开发服务器**
   ```bash
   npm run dev
   ```
   浏览器打开终端提示的地址（默认 http://localhost:5173）。

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

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

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

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

7. **清空版面**
   - 点「清空全部」一次性恢复全部 44 格为空。

---

## 生产构建

```bash
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` 控制，屏幕上的一切编辑辅助元素均不进入打印。