@zinghub/zing-print 0.1.0

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

package/README.md

@@ -0,0 +1,96 @@
+# @zinghub/zing-print
+
+一个基于 Vue3 + Vite + TypeScript 的组件库基础骨架，使用 Ant Design Vue 作为 UI 基础库，支持按需引入与 app.use() 安装，采用 Vite library 模式打包（ES + UMD）。
+
+本仓库同时包含一个“企业级标签打印”示例页面（PrintSetting）与标签模板（Template1/2/3），用于演示配置、预览、以及通过 QZ Tray 打印。
+
+## 安装与构建
+
+- 安装依赖
+
+```bash
+pnpm install
+```
+
+- 本地开发预览（默认入口为 PrintSetting 页面）
+
+```bash
+pnpm dev
+```
+
+- 构建输出（生成 dist/index.es.js、dist/index.umd.js、dist/index.d.ts）
+
+```bash
+pnpm build
+```
+
+## 使用方式
+
+### 作为组件库使用（发布到 npm 后）
+
+- 全局安装（app.use）
+
+```ts
+import { createApp } from 'vue'
+import ZingPrint from '@zinghub/zing-print'
+
+const app = createApp(/* root */)
+app.use(ZingPrint)
+```
+
+- 按需引入
+
+```ts
+import { PrintLabel } from '@zinghub/zing-print'
+```
+
+### 企业级标签打印示例（仓库内）
+
+示例页面位于 `src/print/pages/PrintSetting.vue`，当前 `src/App.vue` 已默认渲染该页面，直接运行 `pnpm dev` 即可使用。
+
+功能点：
+
+- 打印机管理：连接 QZ Tray、刷新打印机列表、保存默认打印机（localStorage：`default-printer`）
+- 模板设置：字体大小、行间距、条码/二维码尺寸、标签尺寸（支持 60×40 基准等比例联动）
+- 预览：使用 Ant Design Vue Modal 预览 LabelPrinter 渲染结果
+- 打印测试：生成 HTML 并通过 QZ Tray 调用打印
+
+相关模块：
+
+- `LabelPrinter`：`src/print/components/LabelPrinter.vue`（模板统一入口）
+- `Template1/2/3`：`src/print/components/Template*.vue`（模板实现，Template1 为完整示例）
+- `PrintSetting`：`src/print/pages/PrintSetting.vue`（设置页与预览/打印）
+- `QZ Tray` 工具：`src/print/utils/qz.ts`
+- 配置持久化：`src/print/utils/printConfig.ts`（localStorage：`print-config`）
+
+注意：上述 “print” 目录内容目前作为仓库内示例存在，尚未从 `src/index.ts` 对外导出；如果要作为 npm 包能力对外提供，可以后续将相关组件/工具纳入导出并补充类型定义与打包策略。
+
+## QZ Tray 使用说明
+
+本项目通过 `qz-tray`（浏览器端 SDK）连接本机 QZ Tray 服务，进行打印机枚举与打印。
+
+1. 安装并启动 QZ Tray
+   - 下载地址：https://qz.io/download/
+   - 启动后保持后台运行
+2. 连接策略
+   - 优先尝试 `wss://localhost:8182`
+   - 若失败则回退到 `ws://localhost:8182`，再回退到默认 ws 连接方式
+3. 常见注意事项
+   - 访问页面是 `https` 时，浏览器通常会阻止连接 `ws`（非安全 WebSocket）；建议优先确保 `wss` 可用
+   - 若一直提示未检测到服务：确认 QZ Tray 已启动、端口未被占用、以及浏览器/系统防火墙未拦截
+
+## 目录结构
+
+```
+src/
+  components/
+    PrintLabel/
+      PrintLabel.vue   // 空组件模板
+  print/
+    components/        // LabelPrinter + Template1/2/3
+    pages/             // PrintSetting
+    utils/             // qz.ts + printConfig.ts
+  index.ts             // 组件库入口与 install
+vite.config.ts         // library 模式配置（external: vue, ant-design-vue）
+tsconfig.json          // TS 配置
+```

package/dist/index.es.js

@@ -0,0 +1,20 @@
+import { defineComponent as r, openBlock as s, createElementBlock as a } from "vue";
+const _ = { class: "zing-print-label" }, l = /* @__PURE__ */ r({
+  __name: "PrintLabel",
+  setup(t) {
+    return (n, e) => (s(), a("div", _));
+  }
+}), i = (t, n) => {
+  const e = t.__vccOpts || t;
+  for (const [o, c] of n)
+    e[o] = c;
+  return e;
+}, p = /* @__PURE__ */ i(l, [["__scopeId", "data-v-6469415f"]]), f = {
+  install(t) {
+    t.component("PrintLabel", p);
+  }
+};
+export {
+  p as PrintLabel,
+  f as default
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e["zing-print"]={},e.Vue))})(this,function(e,t){"use strict";const c={class:"zing-print-label"},i=((n,s)=>{const o=n.__vccOpts||n;for(const[_,f]of s)o[_]=f;return o})(t.defineComponent({__name:"PrintLabel",setup(n){return(s,o)=>(t.openBlock(),t.createElementBlock("div",c))}}),[["__scopeId","data-v-6469415f"]]),r={install(n){n.component("PrintLabel",i)}};e.PrintLabel=i,e.default=r,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>zing-print</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@zinghub/zing-print",
+  "version": "0.1.0",
+  "description": "ERP 打印组件库基础骨架（Vue3 + Vite + TS + Ant Design Vue）",
+  "type": "module",
+  "private": false,
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "peerDependencies": {
+    "ant-design-vue": "^4.0.0",
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.19.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vue/tsconfig": "^0.8.1",
+    "ant-design-vue": "^4.0.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vue": "^3.3.0",
+    "vue-tsc": "^1.8.0"
+  },
+  "sideEffects": false,
+  "browser": {
+    "path": false
+  },
+  "dependencies": {
+    "@ant-design/icons-vue": "^7.0.1",
+    "jsbarcode": "^3.12.3",
+    "qrcode": "^1.5.4",
+    "qz-tray": "^2.2.4"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc -p tsconfig.decls.json",
+    "preview": "vite preview",
+    "typecheck": "tsc -p tsconfig.app.json --noEmit"
+  }
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import PrintSetting from './print/pages/PrintSetting.vue'
+</script>
+
+<template>
+  <PrintSetting />
+  </template>

package/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/components/HelloWorld.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Learn more about IDE Support for Vue in the
+    <a
+      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
+      target="_blank"
+      >Vue Docs Scaling up Guide</a
+    >.
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

package/src/components/PrintLabel/PrintLabel.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="zing-print-label">
+    <!-- 空组件模板：未来用于打印标签 -->
+  </div>
+</template>
+
+<script setup lang="ts">
+// 预留：后续可加入 props、事件与逻辑
+</script>
+
+<style scoped>
+.zing-print-label {
+}
+</style>

package/src/index.ts

@@ -0,0 +1,10 @@
+import type { App } from 'vue'
+import PrintLabel from './components/PrintLabel/PrintLabel.vue'
+
+export { PrintLabel }
+
+export default {
+  install(app: App) {
+    app.component('PrintLabel', PrintLabel)
+  }
+}

package/src/main.ts

@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import Antd from 'ant-design-vue'
+import 'ant-design-vue/dist/reset.css'
+
+const app = createApp(App)
+app.use(Antd)
+app.mount('#app')

package/src/print/components/LabelPrinter.vue

@@ -0,0 +1,58 @@
+<template>
+  <component
+    :is="current"
+    v-bind="{
+      text1, value1,
+      text2, value2,
+      text3, value3,
+      text4, value4,
+      text5, value5,
+      barcode, qrcode,
+      fontSize,
+      lineGapMm,
+      barcodeWidth,
+      barcodeHeight,
+      qrcodeWidth,
+      qrcodeHeight,
+      labelWidthMm,
+      labelHeightMm
+    }"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import Template1 from './Template1.vue'
+import Template2 from './Template2.vue'
+import Template3 from './Template3.vue'
+
+const props = defineProps<{
+  template: number
+  text1: string
+  value1: string
+  text2: string
+  value2: string
+  text3: string
+  value3: string
+  text4: string
+  value4: string
+  text5: string
+  value5: string
+  barcode: string
+  qrcode: string
+  fontSize?: number
+  lineGapMm?: number
+  barcodeWidth?: number
+  barcodeHeight?: number
+  qrcodeWidth?: number
+  qrcodeHeight?: number
+  labelWidthMm?: number
+  labelHeightMm?: number
+}>()
+
+const current = computed(() => {
+  if (props.template === 2) return Template2
+  if (props.template === 3) return Template3
+  return Template1
+})
+</script>

package/src/print/components/Template1.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="label-root" :style="rootStyle">
+    <div class="grid" :style="{ rowGap: lineGap, gridTemplateColumns: gridCols }">
+      <div class="left">
+        <div class="row"><span class="k">{{ props.text1 }}</span><span class="v">{{ props.value1 }}</span></div>
+        <div class="row"><span class="k">{{ props.text2 }}</span><span class="v">{{ props.value2 }}</span></div>
+        <div class="row"><span class="k">{{ props.text3 }}</span><span class="v">{{ props.value3 }}</span></div>
+        <div class="row"><span class="k">{{ props.text4 }}</span><span class="v">{{ props.value4 }}</span></div>
+        <div class="row"><span class="k">{{ props.text5 }}</span><span class="v">{{ props.value5 }}</span></div>
+      </div>
+      <div class="right">
+        <img v-if="qrDataUrl" :src="qrDataUrl" :style="qrStyle" />
+      </div>
+    </div>
+    <div class="barcode">
+      <img v-if="barDataUrl" :src="barDataUrl" :style="barStyle" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, watchEffect, ref } from 'vue'
+import QRCode from 'qrcode'
+import JsBarcode from 'jsbarcode'
+
+const props = defineProps<{
+  text1: string
+  value1: string
+  text2: string
+  value2: string
+  text3: string
+  value3: string
+  text4: string
+  value4: string
+  text5: string
+  value5: string
+  barcode: string
+  qrcode: string
+  fontSize?: number
+  lineGapMm?: number
+  barcodeWidth?: number
+  barcodeHeight?: number
+  qrcodeWidth?: number
+  qrcodeHeight?: number
+  labelWidthMm?: number
+  labelHeightMm?: number
+}>()
+
+const mmToPx = (mm: number) => Math.round((mm / 25.4) * 96)
+
+const qrDataUrl = ref<string>('')
+const barDataUrl = ref<string>('')
+
+watchEffect(async () => {
+  if (props.qrcode) {
+    const w = mmToPx(props.qrcodeWidth ?? 30)
+    qrDataUrl.value = await QRCode.toDataURL(props.qrcode, { margin: 0, width: w })
+  } else {
+    qrDataUrl.value = ''
+  }
+})
+
+watchEffect(async () => {
+  if (props.barcode) {
+    const canvas = document.createElement('canvas')
+    JsBarcode(canvas, props.barcode, { width: 2, height: mmToPx(props.barcodeHeight ?? 12), displayValue: false, margin: 0 })
+    barDataUrl.value = canvas.toDataURL('image/png')
+  } else {
+    barDataUrl.value = ''
+  }
+})
+
+const rootStyle = computed(() => ({
+  width: `${props.labelWidthMm ?? 60}mm`,
+  height: `${props.labelHeightMm ?? 40}mm`,
+  fontSize: `${props.fontSize ?? 12}px`,
+  padding: '4mm',
+  border: '1px solid #000'
+}))
+
+const lineGap = computed(() => `${props.lineGapMm ?? 1}mm`)
+
+const gridCols = computed(() => `1fr ${props.qrcodeWidth ?? 20}mm`)
+
+const qrStyle = computed(() => ({
+  width: `${props.qrcodeWidth ?? 20}mm`,
+  height: `${props.qrcodeHeight ?? 20}mm`
+}))
+
+const barStyle = computed(() => ({
+  width: `${props.barcodeWidth ?? 50}mm`,
+  height: `${props.barcodeHeight ?? 12}mm`
+}))
+</script>
+
+<style scoped>
+.label-root {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 3mm;
+  background: #fff;
+}
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 120px;
+  gap: 2mm;
+}
+.left {
+  display: flex;
+  flex-direction: column;
+}
+.row {
+  display: flex;
+  gap: 2mm;
+}
+.k {
+  font-weight: 600;
+}
+.v {
+  flex: 1;
+}
+.right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.barcode {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: auto;
+}
+</style>

package/src/print/components/Template2.vue

@@ -0,0 +1,30 @@
+<template>
+  <div style="width:60mm;height:40mm;display:flex;align-items:center;justify-content:center;border:1px solid #000;">
+    <div>模板2</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  text1: string
+  value1: string
+  text2: string
+  value2: string
+  text3: string
+  value3: string
+  text4: string
+  value4: string
+  text5: string
+  value5: string
+  barcode: string
+  qrcode: string
+  fontSize?: number
+  lineGapMm?: number
+  barcodeWidth?: number
+  barcodeHeight?: number
+  qrcodeWidth?: number
+  qrcodeHeight?: number
+  labelWidthMm?: number
+  labelHeightMm?: number
+}>()
+</script>

package/src/print/components/Template3.vue

@@ -0,0 +1,30 @@
+<template>
+  <div style="width:60mm;height:40mm;display:flex;align-items:center;justify-content:center;border:1px solid #000;">
+    <div>模板3</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  text1: string
+  value1: string
+  text2: string
+  value2: string
+  text3: string
+  value3: string
+  text4: string
+  value4: string
+  text5: string
+  value5: string
+  barcode: string
+  qrcode: string
+  fontSize?: number
+  lineGapMm?: number
+  barcodeWidth?: number
+  barcodeHeight?: number
+  qrcodeWidth?: number
+  qrcodeHeight?: number
+  labelWidthMm?: number
+  labelHeightMm?: number
+}>()
+</script>

package/src/print/pages/PrintSetting.vue

@@ -0,0 +1,330 @@
+<template>
+  <div style="margin:50px 30px;box-sizing:border-box">
+    <a-card :bordered="false" style="width:100%;margin-bottom:16px">
+      <div style="margin-bottom:12px;font-size:18px;font-weight:600">打印设置</div>
+      <a-space direction="vertical" style="width:100%">
+        <a-space>
+          <a-select
+            v-model:value="selectedPrinter"
+            :options="printerOptions"
+            style="min-width:420px"
+            placeholder="请选择打印机"
+            :loading="loadingPrinters"
+            allow-clear
+            show-search
+            option-filter-prop="label"
+            :filter-option="filterPrinter"
+          />
+          <a-button :loading="loadingPrinters" @click="onRefreshPrinters">刷新列表</a-button>
+          <a-button type="primary" :loading="savingPrinter" @click="onSavePrinter">保存</a-button>
+        </a-space>
+        <a-alert type="info" show-icon message="若未启动 QZ Tray，请先启动后再点击刷新列表/保存。" />
+        <a-alert v-if="savedPrinterName" type="success" show-icon :message="`已保存默认打印机：${savedPrinterName}`" />
+        <a-alert :type="qzConnected ? 'success' : 'error'" show-icon :message="qzConnected ? '🟢 打印服务已连接' : '🔴 打印服务未连接'" />
+      </a-space>
+    </a-card>
+
+    <a-card :bordered="false" title="打印模板1设置" style="width:100%">
+      <a-space direction="vertical" style="width:100%">
+        <a-space>
+          <div style="width:110px">字体大小</div>
+          <a-input-number v-model:value="model.fontSize" :min="8" :max="28" :precision="0" style="width:240px" />
+          <a-button @click="onPreview">预览</a-button>
+          <a-button :loading="testingPrint" @click="onTestPrint">打印测试</a-button>
+          <a-button type="primary" :loading="savingTemplate1" @click="onSaveTemplate1">保存</a-button>
+        </a-space>
+
+        <a-space>
+          <div style="width:110px">标签尺寸</div>
+          <a-input-number v-model:value="labelWidthMm" :min="10" :max="200" :precision="1" :step="0.1" style="width:115px" />
+          <span>×</span>
+          <a-input-number v-model:value="labelHeightMm" :min="10" :max="200" :precision="1" :step="0.1" style="width:115px" />
+          <span>mm</span>
+          <a-switch v-model:checked="model.keepLabelRatio" checked-children="等比例" un-checked-children="自由" />
+        </a-space>
+
+        <a-space>
+          <div style="width:110px">字体上下间距</div>
+          <a-input-number v-model:value="model.lineGapMm" :min="0" :max="3" :precision="1" :step="0.1" style="width:240px" />
+          <span>mm</span>
+        </a-space>
+
+        <a-space>
+          <div style="width:110px">条形码尺寸</div>
+          <a-input-number v-model:value="model.barcodeWidth" :min="10" :max="60" :precision="0" style="width:115px" />
+          <span>×</span>
+          <a-input-number v-model:value="model.barcodeHeight" :min="6" :max="20" :precision="0" style="width:115px" />
+          <span>mm</span>
+        </a-space>
+
+        <a-space>
+          <div style="width:110px">二维码尺寸</div>
+          <a-input-number v-model:value="model.qrcodeWidth" :min="10" :max="30" :precision="0" style="width:115px" />
+          <span>×</span>
+          <a-input-number v-model:value="model.qrcodeHeight" :min="10" :max="30" :precision="0" style="width:115px" />
+          <span>mm</span>
+        </a-space>
+      </a-space>
+
+      <div style="position:fixed;left:-9999px;top:-9999px">
+        <LabelPrinter
+          ref="labelPrinterRef"
+          :template="1"
+          text1="产品"
+          value1="苹果"
+          text2="批次"
+          value2="A001"
+          text3="日期"
+          value3="2024-01-01"
+          text4="规格"
+          value4="500g"
+          text5="产地"
+          value5="山东"
+          qrcode="123456789"
+          barcode="123456789"
+          :font-size="model.fontSize"
+          :lineGapMm="model.lineGapMm"
+          :barcode-width="model.barcodeWidth"
+          :barcode-height="model.barcodeHeight"
+          :qrcode-width="model.qrcodeWidth"
+          :qrcode-height="model.qrcodeHeight"
+          :label-width-mm="model.labelWidthMm"
+          :label-height-mm="model.labelHeightMm"
+        />
+      </div>
+
+      <a-modal v-model:open="previewOpen" title="标签预览" :footer="null" width="520px">
+        <div style="display:flex;justify-content:center;padding:16px">
+          <div style="display:flex;flex-direction:column;gap:12px;align-items:center">
+            <div v-if="previewItems.length === 0" style="color:rgba(0,0,0,0.45)">暂无预览</div>
+            <div
+              v-else
+              v-for="(it, idx) in previewItems"
+              :key="idx"
+              style="border:1px dashed #d9d9d9;padding:8px;background:#fff"
+            >
+              <LabelPrinter
+                :template="1"
+                :text1="it.text1"
+                :value1="it.value1"
+                :text2="it.text2"
+                :value2="it.value2"
+                :text3="it.text3"
+                :value3="it.value3"
+                :text4="it.text4"
+                :value4="it.value4"
+                :text5="it.text5"
+                :value5="it.value5"
+                :qrcode="it.qrcode"
+                :barcode="it.barcode"
+                :font-size="model.fontSize"
+                :lineGapMm="model.lineGapMm"
+                :barcode-width="model.barcodeWidth"
+                :barcode-height="model.barcodeHeight"
+                :qrcode-width="model.qrcodeWidth"
+                :qrcode-height="model.qrcodeHeight"
+                :label-width-mm="model.labelWidthMm"
+                :label-height-mm="model.labelHeightMm"
+              />
+            </div>
+          </div>
+        </div>
+      </a-modal>
+    </a-card>
+
+    <a-modal
+      v-model:open="qzModalOpen"
+      title="未检测到打印服务"
+      :footer="null"
+      :closable="false"
+      :maskClosable="false"
+      width="480px"
+    >
+      <div style="text-align:center;padding:24px 0">
+        <ExclamationCircleFilled style="font-size:48px;color:#faad14;margin-bottom:16px" />
+        <div style="font-size:16px;font-weight:500;margin-bottom:8px">无法连接 QZ Tray 打印服务</div>
+        <div style="color:#666;margin-bottom:24px">请确保 QZ Tray 已安装并启动，或者下载安装。</div>
+        <a-space size="middle">
+          <a-button type="primary" size="large" @click="tryLaunchQZ">我已安装，尝试启动</a-button>
+          <a-button size="large" @click="downloadQZ">未安装，去下载</a-button>
+        </a-space>
+        <div style="margin-top:16px">
+          <a-button type="link" @click="onRefreshPrinters">已启动，点此重试</a-button>
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { ExclamationCircleFilled } from '@ant-design/icons-vue'
+import { getConfig, saveConfig } from '../utils/printConfig'
+import { connectQZ, printHTML, detectDriver, listPrinters } from '../utils/qz'
+import LabelPrinter from '../components/LabelPrinter.vue'
+import QRCode from 'qrcode'
+import JsBarcode from 'jsbarcode'
+
+const model = ref(getConfig())
+const previewOpen = ref(false)
+const previewItems = ref([
+  { text1: '产品', value1: '苹果', text2: '批次', value2: 'A001', text3: '日期', value3: '2024-01-01', text4: '规格', value4: '500g', text5: '产地', value5: '山东', qrcode: '123456789', barcode: '123456789' }
+])
+
+const selectedPrinter = ref<string | undefined>(localStorage.getItem('default-printer') || undefined)
+const printerOptions = ref<{ label: string; value: string }[]>([])
+const loadingPrinters = ref(false)
+const savingPrinter = ref(false)
+const qzConnected = ref(false)
+const qzModalOpen = ref(false)
+const testingPrint = ref(false)
+const savingTemplate1 = ref(false)
+const labelPrinterRef = ref()
+
+const BASE_RATIO = 40 / 60
+const round1 = (n: number) => Math.round(n * 10) / 10
+
+const labelWidthMm = computed({
+  get: () => model.value.labelWidthMm,
+  set: (v) => {
+    const next = typeof v === 'number' && Number.isFinite(v) ? v : 60
+    model.value.labelWidthMm = next
+    if (model.value.keepLabelRatio) {
+      model.value.labelHeightMm = round1(next * BASE_RATIO)
+    }
+  }
+})
+
+const labelHeightMm = computed({
+  get: () => model.value.labelHeightMm,
+  set: (v) => {
+    const next = typeof v === 'number' && Number.isFinite(v) ? v : 40
+    model.value.labelHeightMm = next
+    if (model.value.keepLabelRatio) {
+      model.value.labelWidthMm = round1(next / BASE_RATIO)
+    }
+  }
+})
+
+watch(
+  () => model.value.keepLabelRatio,
+  (on) => {
+    if (on) {
+      model.value.labelHeightMm = round1(model.value.labelWidthMm * BASE_RATIO)
+    }
+  }
+)
+
+function filterPrinter(input: string, option: any) {
+  return (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+}
+
+async function onRefreshPrinters() {
+  loadingPrinters.value = true
+  try {
+    await connectQZ()
+    qzConnected.value = true
+    const list = await listPrinters()
+    printerOptions.value = list.map((n) => ({ label: n, value: n }))
+  } catch {
+    qzConnected.value = false
+    qzModalOpen.value = true
+  } finally {
+    loadingPrinters.value = false
+  }
+}
+
+function onSavePrinter() {
+  savingPrinter.value = true
+  try {
+    if (selectedPrinter.value) {
+      localStorage.setItem('default-printer', selectedPrinter.value)
+    } else {
+      localStorage.removeItem('default-printer')
+    }
+  } finally {
+    savingPrinter.value = false
+  }
+}
+
+const savedPrinterName = computed(() => localStorage.getItem('default-printer') || '')
+
+function onPreview() {
+  previewOpen.value = true
+}
+
+function onSaveTemplate1() {
+  savingTemplate1.value = true
+  try {
+    saveConfig(model.value)
+  } finally {
+    savingTemplate1.value = false
+  }
+}
+
+function mmToPx(mm: number) {
+  return Math.round((mm / 25.4) * 96)
+}
+
+async function buildHtml() {
+  const cfg = model.value
+  const qr = await QRCode.toDataURL('123456789', { margin: 0, width: mmToPx(cfg.qrcodeWidth) })
+  const canvas = document.createElement('canvas')
+  JsBarcode(canvas, '123456789', { width: 2, height: mmToPx(cfg.barcodeHeight), displayValue: false, margin: 0 })
+  const bar = canvas.toDataURL('image/png')
+  const style = `
+    <style>
+    .label { width:${cfg.labelWidthMm}mm; height:${cfg.labelHeightMm}mm; box-sizing:border-box; padding:4mm; border:1px solid #000; font-size:${cfg.fontSize}px; background:#fff; display:flex; flex-direction:column; }
+    .grid { display:grid; grid-template-columns:1fr ${cfg.qrcodeWidth}mm; gap:${cfg.lineGapMm}mm; }
+    .row { display:flex; gap:2mm; }
+    .barcode { display:flex; align-items:center; justify-content:center; margin-top:auto; }
+    </style>
+  `
+  const html = `
+    <div class="label">
+      <div class="grid">
+        <div>
+          <div class="row"><span>产品:</span><span>苹果</span></div>
+          <div class="row"><span>批次:</span><span>A001</span></div>
+          <div class="row"><span>日期:</span><span>2024-01-01</span></div>
+          <div class="row"><span>规格:</span><span>500g</span></div>
+          <div class="row"><span>产地:</span><span>山东</span></div>
+        </div>
+        <div style="display:flex;align-items:center;justify-content:center;">
+          <img src="${qr}" style="width:${cfg.qrcodeWidth}mm;height:${cfg.qrcodeHeight}mm" />
+        </div>
+      </div>
+      <div class="barcode">
+        <img src="${bar}" style="width:${cfg.barcodeWidth}mm;height:${cfg.barcodeHeight}mm" />
+      </div>
+    </div>
+  `
+  return style + html
+}
+
+async function onTestPrint() {
+  testingPrint.value = true
+  try {
+    await connectQZ()
+    const html = await buildHtml()
+    const def = localStorage.getItem('default-printer') || undefined
+    await printHTML(html, def)
+  } catch {
+    qzModalOpen.value = true
+  } finally {
+    testingPrint.value = false
+  }
+}
+
+function tryLaunchQZ() {
+  onRefreshPrinters()
+}
+
+function downloadQZ() {
+  window.open('https://qz.io/download/', '_blank')
+}
+
+onMounted(() => {
+  onRefreshPrinters()
+})
+</script>

package/src/print/utils/printConfig.ts

@@ -0,0 +1,40 @@
+export type PrintConfig = {
+  fontSize: number
+  lineGapMm: number
+  barcodeWidth: number
+  barcodeHeight: number
+  qrcodeWidth: number
+  qrcodeHeight: number
+  labelWidthMm: number
+  labelHeightMm: number
+  keepLabelRatio: boolean
+}
+
+const KEY = 'print-config'
+
+const defaultConfig: PrintConfig = {
+  fontSize: 12,
+  lineGapMm: 1,
+  barcodeWidth: 50,
+  barcodeHeight: 12,
+  qrcodeWidth: 20,
+  qrcodeHeight: 20,
+  labelWidthMm: 60,
+  labelHeightMm: 40,
+  keepLabelRatio: true
+}
+
+export function getConfig(): PrintConfig {
+  try {
+    const raw = localStorage.getItem(KEY)
+    return raw ? { ...defaultConfig, ...JSON.parse(raw) } : defaultConfig
+  } catch {
+    return defaultConfig
+  }
+}
+
+export function saveConfig(cfg: Partial<PrintConfig>) {
+  const merged = { ...getConfig(), ...cfg }
+  localStorage.setItem(KEY, JSON.stringify(merged))
+  return merged
+}

package/src/print/utils/qz.ts

@@ -0,0 +1,55 @@
+import qz from 'qz-tray'
+
+let connected = false
+let configured = false
+
+function configureQZ() {
+  if (configured) return
+  try {
+    qz.api.setPromiseType((resolver: any) => new Promise(resolver))
+  } catch {}
+  configured = true
+}
+
+export async function connectQZ() {
+  if (connected && qz.websocket.isActive()) return
+  configureQZ()
+  try {
+    await qz.websocket.connect({ host: 'localhost', usingSecure: true, port: { secure: [8182] } })
+  } catch (eSecure8182) {
+    try {
+      await qz.websocket.connect({ host: 'localhost', usingSecure: false, port: { insecure: [8182] } })
+    } catch (eInsecure8182) {
+      try {
+        await qz.websocket.connect({ host: 'localhost', usingSecure: false })
+      } catch (err) {
+        connected = false
+        throw err
+      }
+    }
+  }
+  connected = true
+}
+
+export async function listPrinters(): Promise<string[]> {
+  await connectQZ()
+  const result = await qz.printers.find()
+  if (Array.isArray(result)) return result
+  if (typeof result === 'string' && result) return [result]
+  return []
+}
+
+export async function printHTML(html: string, printer?: string) {
+  await connectQZ()
+  const p = printer || (await qz.printers.getDefault())
+  const cfg = qz.configs.create(p)
+  return qz.print(cfg, [{ type: 'html', format: 'plain', data: html }])
+}
+
+export function detectDriver() {
+  const active = qz?.websocket?.isActive?.() === true
+  if (active) return true
+  const url = 'https://qz.io/download/'
+  window.open(url, '_blank')
+  return false
+}

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/style.css

@@ -0,0 +1,82 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light;
+  color: #213547;
+  background-color: #f5f5f5;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  min-width: 320px;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: none;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #f5f5f5;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/types/jsbarcode.d.ts

@@ -0,0 +1,4 @@
+declare module 'jsbarcode' {
+  const JsBarcode: any
+  export default JsBarcode
+}

package/src/types/qrcode.d.ts

@@ -0,0 +1,4 @@
+declare module 'qrcode' {
+  const QRCode: any
+  export default QRCode
+}

package/src/types/qz-tray.d.ts

@@ -0,0 +1,4 @@
+declare module 'qz-tray' {
+  const qz: any
+  export default qz
+}

package/tsconfig.app.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

package/tsconfig.decls.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./dist",
+    "skipLibCheck": true
+  },
+  "include": ["src/index.ts", "src/components/**/*.ts", "src/components/**/*.vue", "src/shims-vue.d.ts"],
+  "exclude": ["src/main.ts", "src/App.vue", "src/components/HelloWorld.vue", "src/assets"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'zing-print',
+      fileName: (format) => `index.${format}.js`,
+      formats: ['es', 'umd']
+    },
+    rollupOptions: {
+      external: ['vue', 'ant-design-vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+          'ant-design-vue': 'antd'
+        }
+      }
+    }
+  }
+})