@a2simcode/ui 0.0.55 → 0.0.57

package/docs/examples/barcode/all-types.vue

@@ -1,380 +1,380 @@
-<template>
-  <div class="barcode-types-container">
-    <h2>所有支持的条码类型</h2>
-
-    <!-- 常用零售条码 -->
-    <section class="barcode-section">
-      <h3>常用零售条码</h3>
-      <div class="barcode-grid">
-        <div class="barcode-item">
-          <h4>EAN-13</h4>
-          <j-barcode v-model="codes.ean13" bcid="ean13" :height="15" :scale="2" />
-          <p class="desc">国际商品条码，13位数字</p>
-          <p class="code">值: {{ codes.ean13 }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>EAN-8</h4>
-          <j-barcode v-model="codes.ean8" bcid="ean8" :height="15" :scale="2" />
-          <p class="desc">缩短版国际商品条码，8位数字</p>
-          <p class="code">值: {{ codes.ean8 }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>UPC-A</h4>
-          <j-barcode v-model="codes.upca" bcid="upca" :height="15" :scale="2" />
-          <p class="desc">美国产品编码，12位数字</p>
-          <p class="code">值: {{ codes.upca }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>UPC-E</h4>
-          <j-barcode v-model="codes.upce" bcid="upce" :height="15" :scale="2" />
-          <p class="desc">UPC压缩版，6位数字</p>
-          <p class="code">值: {{ codes.upce }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>ITF-14</h4>
-          <j-barcode v-model="codes.itf14" bcid="itf14" :height="15" :scale="2" />
-          <p class="desc">运输包装条码，14位数字</p>
-          <p class="code">值: {{ codes.itf14 }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>GS1-128</h4>
-          <j-barcode v-model="codes.gs1128" bcid="gs1-128" :height="15" :scale="2" />
-          <p class="desc">GS1应用标识符条码</p>
-          <p class="code">值: {{ codes.gs1128 }}</p>
-        </div>
-      </div>
-    </section>
-
-    <!-- 通用一维码 -->
-    <section class="barcode-section">
-      <h3>通用一维码</h3>
-      <div class="barcode-grid">
-        <div class="barcode-item">
-          <h4>CODE128</h4>
-          <j-barcode v-model="codes.code128" bcid="code128" :height="15" :scale="2" />
-          <p class="desc">通用格式，支持ASCII字符</p>
-          <p class="code">值: {{ codes.code128 }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>CODE39</h4>
-          <j-barcode v-model="codes.code39" bcid="code39" :height="15" :scale="2" />
-          <p class="desc">支持字母、数字和特殊字符</p>
-          <p class="code">值: {{ codes.code39 }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>CODE39扩展</h4>
-          <j-barcode v-model="codes.code39ext" bcid="code39ext" :height="15" :scale="2" />
-          <p class="desc">CODE39扩展版，支持更多字符</p>
-          <p class="code">值: {{ codes.code39ext }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>CODE93</h4>
-          <j-barcode v-model="codes.code93" bcid="code93" :height="15" :scale="2" />
-          <p class="desc">高密度条码，支持ASCII字符</p>
-          <p class="code">值: {{ codes.code93 }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>CODE93扩展</h4>
-          <j-barcode v-model="codes.code93ext" bcid="code93ext" :height="15" :scale="2" />
-          <p class="desc">CODE93扩展版</p>
-          <p class="code">值: {{ codes.code93ext }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>Interleaved 2 of 5</h4>
-          <j-barcode v-model="codes.i2of5" bcid="interleaved2of5" :height="15" :scale="2" />
-          <p class="desc">交叉二五码，仅支持数字</p>
-          <p class="code">值: {{ codes.i2of5 }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>Codabar</h4>
-          <j-barcode v-model="codes.codabar" bcid="codabar" :height="15" :scale="2" />
-          <p class="desc">库德巴码，支持数字和字母ABCD</p>
-          <p class="code">值: {{ codes.codabar }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>MSI</h4>
-          <j-barcode v-model="codes.msi" bcid="msi" :height="15" :scale="2" />
-          <p class="desc">MSI条码，仅支持数字</p>
-          <p class="code">值: {{ codes.msi }}</p>
-        </div>
-      </div>
-    </section>
-
-    <!-- 二维码 -->
-    <section class="barcode-section">
-      <h3>二维码</h3>
-      <div class="barcode-grid">
-        <div class="barcode-item">
-          <h4>QR Code</h4>
-          <j-barcode v-model="codes.qrcode" bcid="qrcode" :scale="3" />
-          <p class="desc">快速响应码，支持大量数据存储</p>
-          <p class="code">值: {{ codes.qrcode }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>Micro QR Code</h4>
-          <j-barcode v-model="codes.microqrcode" bcid="microqrcode" :scale="3" />
-          <p class="desc">微型QR码，适用于小空间</p>
-          <p class="code">值: {{ codes.microqrcode }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>Data Matrix</h4>
-          <j-barcode v-model="codes.datamatrix" bcid="datamatrix" :scale="3" />
-          <p class="desc">矩阵式二维码，适用于小空间标识</p>
-          <p class="code">值: {{ codes.datamatrix }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>Data Matrix Rectangular</h4>
-          <j-barcode v-model="codes.datamatrixrect" bcid="datamatrixrect" :scale="3" />
-          <p class="desc">矩形Data Matrix</p>
-          <p class="code">值: {{ codes.datamatrixrect }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>PDF417</h4>
-          <j-barcode v-model="codes.pdf417" bcid="pdf417" :scale="2" />
-          <p class="desc">堆叠式二维码，支持大量数据</p>
-          <p class="code">值: {{ codes.pdf417 }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>Micro PDF417</h4>
-          <j-barcode v-model="codes.micropdf417" bcid="micropdf417" :scale="2" />
-          <p class="desc">微型PDF417</p>
-          <p class="code">值: {{ codes.micropdf417 }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>Aztec Code</h4>
-          <j-barcode v-model="codes.azteccode" bcid="azteccode" :scale="3" />
-          <p class="desc">阿兹特克码，高密度二维码</p>
-          <p class="code">值: {{ codes.azteccode }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>Hanxin</h4>
-          <j-barcode v-model="codes.hanxin" bcid="hanxin" :scale="3" />
-          <p class="desc">汉信码，中国标准二维码</p>
-          <p class="code">值: {{ codes.hanxin }}</p>
-        </div>
-      </div>
-    </section>
-
-    <!-- 邮政编码 -->
-    <section class="barcode-section">
-      <h3>邮政编码</h3>
-      <div class="barcode-grid">
-        <div class="barcode-item">
-          <h4>USPS OneCode</h4>
-          <j-barcode v-model="codes.uspsonecode" bcid="uspsonecode" :height="15" :scale="2" />
-          <p class="desc">美国邮政服务条码</p>
-          <p class="code">值: {{ codes.uspsonecode }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>POSTNET</h4>
-          <j-barcode v-model="codes.postnet" bcid="postnet" :height="15" :scale="2" />
-          <p class="desc">美国邮政编码条码</p>
-          <p class="code">值: {{ codes.postnet }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>PLANET</h4>
-          <j-barcode v-model="codes.planet" bcid="planet" :height="15" :scale="2" />
-          <p class="desc">美国邮政服务PLANET条码</p>
-          <p class="code">值: {{ codes.planet }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>Royal Mail</h4>
-          <j-barcode v-model="codes.royalmail" bcid="royalmail" :height="15" :scale="2" />
-          <p class="desc">英国皇家邮政条码</p>
-          <p class="code">值: {{ codes.royalmail }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>Japan Post</h4>
-          <j-barcode v-model="codes.japanpost" bcid="japanpost" :height="15" :scale="2" />
-          <p class="desc">日本邮政条码</p>
-          <p class="code">值: {{ codes.japanpost }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>AUSPOST</h4>
-          <j-barcode v-model="codes.auspost" bcid="auspost" :height="15" :scale="2" />
-          <p class="desc">澳大利亚邮政条码</p>
-          <p class="code">值: {{ codes.auspost }}</p>
-        </div>
-      </div>
-    </section>
-
-    <!-- 医药行业 -->
-    <section class="barcode-section">
-      <h3>医药行业条码</h3>
-      <div class="barcode-grid">
-        <div class="barcode-item">
-          <h4>Pharmacode</h4>
-          <j-barcode v-model="codes.pharmacode" bcid="pharmacode" :height="15" :scale="2" />
-          <p class="desc">药用条码，仅支持数字，范围1-131070</p>
-          <p class="code">值: {{ codes.pharmacode }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>CODE32</h4>
-          <j-barcode v-model="codes.code32" bcid="code32" :height="15" :scale="2" />
-          <p class="desc">意大利医药条码</p>
-          <p class="code">值: {{ codes.code32 }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>HIBCCode128</h4>
-          <j-barcode v-model="codes.hibccode128" bcid="hibccode128" :height="15" :scale="2" />
-          <p class="desc">医疗设备标识条码</p>
-          <p class="code">值: {{ codes.hibccode128 }}</p>
-        </div>
-
-        <div class="barcode-item">
-          <h4>PZN</h4>
-          <j-barcode v-model="codes.pzn" bcid="pzn" :height="15" :scale="2" />
-          <p class="desc">德国医药产品编号</p>
-          <p class="code">值: {{ codes.pzn }}</p>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const codes = {
-  // 常用零售
-  ean13: '1234567890128',
-  ean8: '12345670',
-  upca: '123456789012',
-  upce: '01234565',
-  itf14: '12345678901231',
-  gs1128: '(01)12345678901231',
-
-  // 通用一维码
-  code128: 'ABC123456',
-  code39: 'CODE39',
-  code39ext: 'Code39Ext!',
-  code93: 'CODE93',
-  code93ext: 'Code93Ext!',
-  i2of5: '12345678',
-  codabar: 'A1234567890A',
-  msi: '123456',
-
-  // 二维码
-  qrcode: 'QR Code Demo Text',
-  microqrcode: 'MicroQR',
-  datamatrix: 'DataMatrix Demo',
-  datamatrixrect: 'DataMatrix Rect',
-  pdf417: 'PDF417 Demo Text',
-  micropdf417: 'MicroPDF417',
-  azteccode: 'Aztec Code Demo',
-  hanxin: '汉信码演示',
-
-  // 邮政编码
-  uspsonecode: '12345678901234567890',
-  postnet: '12345',
-  planet: '12345678901',
-  royalmail: 'A12345678GB',
-  japanpost: '12345678',
-  auspost: '6212345678901234567890123',
-
-  // 医药行业
-  pharmacode: '12345',
-  code32: '12345678',
-  hibccode128: '+H123PARTNO123',
-  pzn: '1234562',
-}
-</script>
-
-<style scoped>
-.barcode-types-container {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-.barcode-section {
-  margin-bottom: 50px;
-}
-
-.barcode-section h3 {
-  border-bottom: 3px solid #409eff;
-  padding-bottom: 10px;
-  margin-bottom: 25px;
-  color: #303133;
-  font-size: 20px;
-}
-
-.barcode-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 20px;
-}
-
-.barcode-item {
-  padding: 20px;
-  border: 1px solid #e4e7ed;
-  border-radius: 8px;
-  background-color: #ffffff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  transition: box-shadow 0.3s;
-}
-
-.barcode-item:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.barcode-item h4 {
-  margin: 0 0 15px 0;
-  color: #303133;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.barcode-item :deep(.j-barcode) {
-  display: flex;
-  justify-content: center;
-  margin: 15px 0;
-  padding: 10px;
-  background-color: #f5f7fa;
-  border-radius: 4px;
-}
-
-.desc {
-  margin: 10px 0 5px 0;
-  font-size: 13px;
-  color: #606266;
-  line-height: 1.5;
-}
-
-.code {
-  margin: 5px 0 0 0;
-  font-size: 12px;
-  color: #909399;
-  word-break: break-all;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  background-color: #f5f7fa;
-  padding: 4px 8px;
-  border-radius: 3px;
-}
-</style>
+<template>
+  <div class="barcode-types-container">
+    <h2>所有支持的条码类型</h2>
+
+    <!-- 常用零售条码 -->
+    <section class="barcode-section">
+      <h3>常用零售条码</h3>
+      <div class="barcode-grid">
+        <div class="barcode-item">
+          <h4>EAN-13</h4>
+          <j-barcode v-model="codes.ean13" bcid="ean13" :height="15" :scale="2" />
+          <p class="desc">国际商品条码，13位数字</p>
+          <p class="code">值: {{ codes.ean13 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>EAN-8</h4>
+          <j-barcode v-model="codes.ean8" bcid="ean8" :height="15" :scale="2" />
+          <p class="desc">缩短版国际商品条码，8位数字</p>
+          <p class="code">值: {{ codes.ean8 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>UPC-A</h4>
+          <j-barcode v-model="codes.upca" bcid="upca" :height="15" :scale="2" />
+          <p class="desc">美国产品编码，12位数字</p>
+          <p class="code">值: {{ codes.upca }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>UPC-E</h4>
+          <j-barcode v-model="codes.upce" bcid="upce" :height="15" :scale="2" />
+          <p class="desc">UPC压缩版，6位数字</p>
+          <p class="code">值: {{ codes.upce }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>ITF-14</h4>
+          <j-barcode v-model="codes.itf14" bcid="itf14" :height="15" :scale="2" />
+          <p class="desc">运输包装条码，14位数字</p>
+          <p class="code">值: {{ codes.itf14 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>GS1-128</h4>
+          <j-barcode v-model="codes.gs1128" bcid="gs1-128" :height="15" :scale="2" />
+          <p class="desc">GS1应用标识符条码</p>
+          <p class="code">值: {{ codes.gs1128 }}</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- 通用一维码 -->
+    <section class="barcode-section">
+      <h3>通用一维码</h3>
+      <div class="barcode-grid">
+        <div class="barcode-item">
+          <h4>CODE128</h4>
+          <j-barcode v-model="codes.code128" bcid="code128" :height="15" :scale="2" />
+          <p class="desc">通用格式，支持ASCII字符</p>
+          <p class="code">值: {{ codes.code128 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>CODE39</h4>
+          <j-barcode v-model="codes.code39" bcid="code39" :height="15" :scale="2" />
+          <p class="desc">支持字母、数字和特殊字符</p>
+          <p class="code">值: {{ codes.code39 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>CODE39扩展</h4>
+          <j-barcode v-model="codes.code39ext" bcid="code39ext" :height="15" :scale="2" />
+          <p class="desc">CODE39扩展版，支持更多字符</p>
+          <p class="code">值: {{ codes.code39ext }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>CODE93</h4>
+          <j-barcode v-model="codes.code93" bcid="code93" :height="15" :scale="2" />
+          <p class="desc">高密度条码，支持ASCII字符</p>
+          <p class="code">值: {{ codes.code93 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>CODE93扩展</h4>
+          <j-barcode v-model="codes.code93ext" bcid="code93ext" :height="15" :scale="2" />
+          <p class="desc">CODE93扩展版</p>
+          <p class="code">值: {{ codes.code93ext }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>Interleaved 2 of 5</h4>
+          <j-barcode v-model="codes.i2of5" bcid="interleaved2of5" :height="15" :scale="2" />
+          <p class="desc">交叉二五码，仅支持数字</p>
+          <p class="code">值: {{ codes.i2of5 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>Codabar</h4>
+          <j-barcode v-model="codes.codabar" bcid="codabar" :height="15" :scale="2" />
+          <p class="desc">库德巴码，支持数字和字母ABCD</p>
+          <p class="code">值: {{ codes.codabar }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>MSI</h4>
+          <j-barcode v-model="codes.msi" bcid="msi" :height="15" :scale="2" />
+          <p class="desc">MSI条码，仅支持数字</p>
+          <p class="code">值: {{ codes.msi }}</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- 二维码 -->
+    <section class="barcode-section">
+      <h3>二维码</h3>
+      <div class="barcode-grid">
+        <div class="barcode-item">
+          <h4>QR Code</h4>
+          <j-barcode v-model="codes.qrcode" bcid="qrcode" :scale="3" />
+          <p class="desc">快速响应码，支持大量数据存储</p>
+          <p class="code">值: {{ codes.qrcode }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>Micro QR Code</h4>
+          <j-barcode v-model="codes.microqrcode" bcid="microqrcode" :scale="3" />
+          <p class="desc">微型QR码，适用于小空间</p>
+          <p class="code">值: {{ codes.microqrcode }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>Data Matrix</h4>
+          <j-barcode v-model="codes.datamatrix" bcid="datamatrix" :scale="3" />
+          <p class="desc">矩阵式二维码，适用于小空间标识</p>
+          <p class="code">值: {{ codes.datamatrix }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>Data Matrix Rectangular</h4>
+          <j-barcode v-model="codes.datamatrixrect" bcid="datamatrixrect" :scale="3" />
+          <p class="desc">矩形Data Matrix</p>
+          <p class="code">值: {{ codes.datamatrixrect }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>PDF417</h4>
+          <j-barcode v-model="codes.pdf417" bcid="pdf417" :scale="2" />
+          <p class="desc">堆叠式二维码，支持大量数据</p>
+          <p class="code">值: {{ codes.pdf417 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>Micro PDF417</h4>
+          <j-barcode v-model="codes.micropdf417" bcid="micropdf417" :scale="2" />
+          <p class="desc">微型PDF417</p>
+          <p class="code">值: {{ codes.micropdf417 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>Aztec Code</h4>
+          <j-barcode v-model="codes.azteccode" bcid="azteccode" :scale="3" />
+          <p class="desc">阿兹特克码，高密度二维码</p>
+          <p class="code">值: {{ codes.azteccode }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>Hanxin</h4>
+          <j-barcode v-model="codes.hanxin" bcid="hanxin" :scale="3" />
+          <p class="desc">汉信码，中国标准二维码</p>
+          <p class="code">值: {{ codes.hanxin }}</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- 邮政编码 -->
+    <section class="barcode-section">
+      <h3>邮政编码</h3>
+      <div class="barcode-grid">
+        <div class="barcode-item">
+          <h4>USPS OneCode</h4>
+          <j-barcode v-model="codes.uspsonecode" bcid="uspsonecode" :height="15" :scale="2" />
+          <p class="desc">美国邮政服务条码</p>
+          <p class="code">值: {{ codes.uspsonecode }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>POSTNET</h4>
+          <j-barcode v-model="codes.postnet" bcid="postnet" :height="15" :scale="2" />
+          <p class="desc">美国邮政编码条码</p>
+          <p class="code">值: {{ codes.postnet }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>PLANET</h4>
+          <j-barcode v-model="codes.planet" bcid="planet" :height="15" :scale="2" />
+          <p class="desc">美国邮政服务PLANET条码</p>
+          <p class="code">值: {{ codes.planet }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>Royal Mail</h4>
+          <j-barcode v-model="codes.royalmail" bcid="royalmail" :height="15" :scale="2" />
+          <p class="desc">英国皇家邮政条码</p>
+          <p class="code">值: {{ codes.royalmail }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>Japan Post</h4>
+          <j-barcode v-model="codes.japanpost" bcid="japanpost" :height="15" :scale="2" />
+          <p class="desc">日本邮政条码</p>
+          <p class="code">值: {{ codes.japanpost }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>AUSPOST</h4>
+          <j-barcode v-model="codes.auspost" bcid="auspost" :height="15" :scale="2" />
+          <p class="desc">澳大利亚邮政条码</p>
+          <p class="code">值: {{ codes.auspost }}</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- 医药行业 -->
+    <section class="barcode-section">
+      <h3>医药行业条码</h3>
+      <div class="barcode-grid">
+        <div class="barcode-item">
+          <h4>Pharmacode</h4>
+          <j-barcode v-model="codes.pharmacode" bcid="pharmacode" :height="15" :scale="2" />
+          <p class="desc">药用条码，仅支持数字，范围1-131070</p>
+          <p class="code">值: {{ codes.pharmacode }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>CODE32</h4>
+          <j-barcode v-model="codes.code32" bcid="code32" :height="15" :scale="2" />
+          <p class="desc">意大利医药条码</p>
+          <p class="code">值: {{ codes.code32 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>HIBCCode128</h4>
+          <j-barcode v-model="codes.hibccode128" bcid="hibccode128" :height="15" :scale="2" />
+          <p class="desc">医疗设备标识条码</p>
+          <p class="code">值: {{ codes.hibccode128 }}</p>
+        </div>
+
+        <div class="barcode-item">
+          <h4>PZN</h4>
+          <j-barcode v-model="codes.pzn" bcid="pzn" :height="15" :scale="2" />
+          <p class="desc">德国医药产品编号</p>
+          <p class="code">值: {{ codes.pzn }}</p>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const codes = {
+  // 常用零售
+  ean13: '1234567890128',
+  ean8: '12345670',
+  upca: '123456789012',
+  upce: '01234565',
+  itf14: '12345678901231',
+  gs1128: '(01)12345678901231',
+
+  // 通用一维码
+  code128: 'ABC123456',
+  code39: 'CODE39',
+  code39ext: 'Code39Ext!',
+  code93: 'CODE93',
+  code93ext: 'Code93Ext!',
+  i2of5: '12345678',
+  codabar: 'A1234567890A',
+  msi: '123456',
+
+  // 二维码
+  qrcode: 'QR Code Demo Text',
+  microqrcode: 'MicroQR',
+  datamatrix: 'DataMatrix Demo',
+  datamatrixrect: 'DataMatrix Rect',
+  pdf417: 'PDF417 Demo Text',
+  micropdf417: 'MicroPDF417',
+  azteccode: 'Aztec Code Demo',
+  hanxin: '汉信码演示',
+
+  // 邮政编码
+  uspsonecode: '12345678901234567890',
+  postnet: '12345',
+  planet: '12345678901',
+  royalmail: 'A12345678GB',
+  japanpost: '12345678',
+  auspost: '6212345678901234567890123',
+
+  // 医药行业
+  pharmacode: '12345',
+  code32: '12345678',
+  hibccode128: '+H123PARTNO123',
+  pzn: '1234562',
+}
+</script>
+
+<style scoped>
+.barcode-types-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.barcode-section {
+  margin-bottom: 50px;
+}
+
+.barcode-section h3 {
+  border-bottom: 3px solid #409eff;
+  padding-bottom: 10px;
+  margin-bottom: 25px;
+  color: #303133;
+  font-size: 20px;
+}
+
+.barcode-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
+}
+
+.barcode-item {
+  padding: 20px;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  background-color: #ffffff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  transition: box-shadow 0.3s;
+}
+
+.barcode-item:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.barcode-item h4 {
+  margin: 0 0 15px 0;
+  color: #303133;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.barcode-item :deep(.j-barcode) {
+  display: flex;
+  justify-content: center;
+  margin: 15px 0;
+  padding: 10px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+}
+
+.desc {
+  margin: 10px 0 5px 0;
+  font-size: 13px;
+  color: #606266;
+  line-height: 1.5;
+}
+
+.code {
+  margin: 5px 0 0 0;
+  font-size: 12px;
+  color: #909399;
+  word-break: break-all;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  background-color: #f5f7fa;
+  padding: 4px 8px;
+  border-radius: 3px;
+}
+</style>