117 lines
5.5 KiB
Markdown
117 lines
5.5 KiB
Markdown
# 标签打印系统（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` 控制，屏幕上的一切编辑辅助元素均不进入打印。
|