From 0e4012c623b3104763001734d4f38653084bacd7 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 17 May 2026 23:07:56 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=88=E5=85=A8=E5=B1=80=EF=BC=89?=
 =?UTF-8?q?=EF=BC=9A=E5=A2=9E=E5=8A=A0=20barcode=20=E4=BA=8C=E7=BB=B4?=
 =?UTF-8?q?=E7=A0=81=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/effects/common-ui/package.json       |   1 +
 .../src/components/barcode/barcode.vue        | 131 ++++++++++++++++++
 .../common-ui/src/components/barcode/index.ts |   2 +
 .../common-ui/src/components/barcode/types.ts |  18 +++
 .../effects/common-ui/src/components/index.ts |   1 +
 pnpm-lock.yaml                                |  11 ++
 pnpm-workspace.yaml                           |   1 +
 7 files changed, 165 insertions(+)
 create mode 100644 packages/effects/common-ui/src/components/barcode/barcode.vue
 create mode 100644 packages/effects/common-ui/src/components/barcode/index.ts
 create mode 100644 packages/effects/common-ui/src/components/barcode/types.ts

diff --git a/packages/effects/common-ui/package.json b/packages/effects/common-ui/package.json
index 542b6a979..3a7cc70f5 100644
--- a/packages/effects/common-ui/package.json
+++ b/packages/effects/common-ui/package.json
@@ -41,6 +41,7 @@
     "@vben/types": "workspace:*",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
+    "jsbarcode": "catalog:",
     "json-bigint": "catalog:",
     "qrcode": "catalog:",
     "tippy.js": "catalog:",
diff --git a/packages/effects/common-ui/src/components/barcode/barcode.vue b/packages/effects/common-ui/src/components/barcode/barcode.vue
new file mode 100644
index 000000000..f8fe1cf6f
--- /dev/null
+++ b/packages/effects/common-ui/src/components/barcode/barcode.vue
@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import type { QRCodeRenderersOptions } from 'qrcode';
+
+import type { BarcodeFormat } from './types';
+
+import { computed, nextTick, ref, unref, watch } from 'vue';
+
+import JsBarcode from 'jsbarcode';
+import QRCode from 'qrcode';
+
+import { BARCODE_FORMAT_MAP, BarcodeFormatEnum } from './types';
+
+defineOptions({ name: 'Barcode' });
+
+const props = withDefaults(
+  defineProps<{
+    content?: string;
+    displayValue?: boolean;
+    format?: BarcodeFormat;
+    height?: number;
+    width?: number;
+  }>(),
+  {
+    content: '',
+    displayValue: true,
+    format: BarcodeFormatEnum.QR_CODE,
+    height: 100,
+    width: 200,
+  },
+);
+
+const emit = defineEmits<{
+  done: [base64: string];
+}>();
+
+const loading = ref(true);
+const canvasRef = ref<HTMLCanvasElement>();
+const imgRef = ref<HTMLImageElement>();
+const isQRCode = computed(() => props.format === BarcodeFormatEnum.QR_CODE);
+
+const wrapStyle = computed(() => {
+  if (isQRCode.value) {
+    return {
+      height: `${props.width}px`,
+      width: `${props.width}px`,
+    };
+  }
+  return {
+    width: `${props.width}px`,
+  };
+});
+
+async function generateQRCode() {
+  const canvas = unref(canvasRef);
+  if (!canvas) {
+    return;
+  }
+  const options: QRCodeRenderersOptions = {
+    errorCorrectionLevel: 'M',
+    width: props.width,
+  };
+  await QRCode.toCanvas(canvas, props.content, options);
+  emit('done', canvas.toDataURL());
+}
+
+function generateOneDimensionalBarcode() {
+  const img = unref(imgRef);
+  if (!img) {
+    return;
+  }
+  JsBarcode(img, props.content, {
+    displayValue: props.displayValue,
+    format: BARCODE_FORMAT_MAP[props.format] || 'CODE39',
+    height: props.height,
+    margin: 10,
+    width: 2,
+  });
+  emit('done', img.src);
+}
+
+async function generateBarcode() {
+  if (!props.content) {
+    loading.value = false;
+    return;
+  }
+
+  loading.value = true;
+  await nextTick();
+  try {
+    if (isQRCode.value) {
+      await generateQRCode();
+      return;
+    }
+    generateOneDimensionalBarcode();
+  } catch (error) {
+    console.error('生成条码失败:', error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(
+  () => [
+    props.content,
+    props.displayValue,
+    props.format,
+    props.height,
+    props.width,
+  ],
+  () => {
+    generateBarcode();
+  },
+  { immediate: true },
+);
+
+function getImageBase64() {
+  if (isQRCode.value) {
+    return unref(canvasRef)?.toDataURL() || '';
+  }
+  return unref(imgRef)?.src || '';
+}
+
+defineExpose({ getImageBase64 });
+</script>
+
+<template>
+  <div :aria-busy="loading" class="inline-block" :style="wrapStyle">
+    <canvas v-if="isQRCode" ref="canvasRef" class="block max-w-full"></canvas>
+    <img v-else ref="imgRef" alt="barcode" class="block max-w-full" />
+  </div>
+</template>
diff --git a/packages/effects/common-ui/src/components/barcode/index.ts b/packages/effects/common-ui/src/components/barcode/index.ts
new file mode 100644
index 000000000..3091e0401
--- /dev/null
+++ b/packages/effects/common-ui/src/components/barcode/index.ts
@@ -0,0 +1,2 @@
+export { default as Barcode } from './barcode.vue';
+export * from './types';
diff --git a/packages/effects/common-ui/src/components/barcode/types.ts b/packages/effects/common-ui/src/components/barcode/types.ts
new file mode 100644
index 000000000..6d31e665b
--- /dev/null
+++ b/packages/effects/common-ui/src/components/barcode/types.ts
@@ -0,0 +1,18 @@
+/** 条码格式枚举 */
+export const BarcodeFormatEnum = {
+  QR_CODE: 1,
+  EAN13: 2,
+  CODE39: 3,
+  UPC_A: 4,
+} as const;
+
+export type BarcodeFormat =
+  (typeof BarcodeFormatEnum)[keyof typeof BarcodeFormatEnum];
+
+/** 条码格式映射表（枚举值 -> JsBarcode 格式名） */
+export const BARCODE_FORMAT_MAP: Record<BarcodeFormat, string> = {
+  [BarcodeFormatEnum.QR_CODE]: 'QR_CODE',
+  [BarcodeFormatEnum.EAN13]: 'EAN13',
+  [BarcodeFormatEnum.CODE39]: 'CODE39',
+  [BarcodeFormatEnum.UPC_A]: 'UPC_A',
+};
diff --git a/packages/effects/common-ui/src/components/index.ts b/packages/effects/common-ui/src/components/index.ts
index f2c4faea8..82e729384 100644
--- a/packages/effects/common-ui/src/components/index.ts
+++ b/packages/effects/common-ui/src/components/index.ts
@@ -1,4 +1,5 @@
 export * from './api-component';
+export * from './barcode';
 export * from './captcha';
 export * from './card/comparison-card';
 export * from './card/statistic-card';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a8d9c629b..7d4dd8716 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -357,6 +357,9 @@ catalogs:
     is-ci:
       specifier: ^4.1.0
       version: 4.1.0
+    jsbarcode:
+      specifier: ^3.12.3
+      version: 3.12.3
     jsencrypt:
       specifier: ^3.5.4
       version: 3.5.4
@@ -1955,6 +1958,9 @@ importers:
       '@vueuse/integrations':
         specifier: 'catalog:'
         version: 14.2.1(async-validator@4.2.5)(axios@1.15.0)(change-case@5.4.4)(focus-trap@8.0.1)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.7)(vue@3.5.32(typescript@6.0.2))
+      jsbarcode:
+        specifier: 'catalog:'
+        version: 3.12.3
       json-bigint:
         specifier: 'catalog:'
         version: 1.0.0
@@ -9196,6 +9202,9 @@ packages:
     resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
     hasBin: true
 
+  jsbarcode@3.12.3:
+    resolution: {integrity: sha512-CuHU9hC6dPsHF5oVFMo8NW76uQVjH4L22CsP4hW+dNnGywJHC/B0ThA1CTDVLnxKLrrpYdicBLnd2xsgTfRnvg==}
+
   jsdoc-type-pratt-parser@7.1.1:
     resolution: {integrity: sha512-/2uqY7x6bsrpi3i9LVU6J89352C0rpMk0as8trXxCtvd4kPk1ke/Eyif6wqfSLvoNJqcDG9Vk4UsXgygzCt2xA==}
     engines: {node: '>=20.0.0'}
@@ -19810,6 +19819,8 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
+  jsbarcode@3.12.3: {}
+
   jsdoc-type-pratt-parser@7.1.1: {}
 
   jsencrypt@3.5.4: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index ce284cee7..ad9a84d14 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -138,6 +138,7 @@ catalog:
   highlight.js: ^11.11.1
   html-minifier-terser: ^7.2.0
   is-ci: ^4.1.0
+  jsbarcode: ^3.12.3
   jsencrypt: ^3.5.4
   json-bigint: ^1.0.0
   lefthook: ^2.1.5