修复条码图片导出被裁切

frontend/src/components/BarcodePrint.vue

@@ -6,6 +6,7 @@
         v-for="equipment in equipmentList"
         :key="equipment.equipment_code"
         class="qrcode-card"
+        :data-export-id="equipment.id"
       >
         <!-- 顶部公司名称 -->
         <div class="qrcode-header">
@@ -113,7 +114,7 @@ const generateQRCodes = async () => {
     if (canvasElement) {
       try {
         await QRCode.toCanvas(canvasElement, equipment.equipment_code, {
-          width: 160,
+          width: 176,
           margin: 1,
           color: {
             dark: '#000000',
@@ -137,11 +138,21 @@ const generateImages = async (): Promise<string[]> => {
     const cardElement = cardElements[i] as HTMLElement
     if (cardElement) {
       const canvas = await html2canvas(cardElement, {
-        scale: 4,
+        scale: Math.max(window.devicePixelRatio || 1, 3),
         backgroundColor: '#ffffff',
         useCORS: true,
         logging: false,
-        allowTaint: false
+        allowTaint: false,
+        width: 500,
+        height: 300,
+        onclone: (clonedDocument) => {
+          const clonedCard = clonedDocument.querySelector(
+            `[data-export-id="${equipmentList.value[i].id}"]`
+          ) as HTMLElement | null
+          if (clonedCard) {
+            clonedCard.classList.add('qrcode-card--export')
+          }
+        }
       })
       images.push(canvas.toDataURL('image/png', 1.0))
     }
@@ -256,11 +267,11 @@ onMounted(() => {
 
 <style scoped>
 .qrcode-card {
-  width: 5cm;
-  height: 3cm;
+  width: 500px;
+  height: 300px;
   background-color: #ffffff;
   border-radius: 0;
-  padding: 0.12cm;
+  padding: 12px;
   box-sizing: border-box;
   position: relative;
   margin: 0 auto;
@@ -268,19 +279,27 @@ onMounted(() => {
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  gap: 8px;
   font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
 }
 
+.qrcode-card--export {
+  width: 500px !important;
+  height: 300px !important;
+}
+
 /* 顶部公司名称 */
 .qrcode-header {
   width: 100%;
-  padding: 0.08cm 0.05cm;
-  border-bottom: 1px solid #000;
-  margin-bottom: 0.08cm;
+  min-height: 54px;
+  padding: 8px 6px 10px;
+  border-bottom: 2px solid #000;
+  box-sizing: border-box;
 }
 
 .header-title {
-  font-size: 0.3cm;
+  font-size: 24px;
+  line-height: 1.3;
   font-weight: 700;
   color: #000;
   display: block;
@@ -295,8 +314,9 @@ onMounted(() => {
   flex: 1;
   display: flex;
   flex-direction: row;
-  gap: 0.15cm;
+  gap: 16px;
   min-height: 0;
+  align-items: stretch;
 }
 
 /* 左侧信息区 */
@@ -305,16 +325,17 @@ onMounted(() => {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
-  padding: 0.03cm 0;
+  justify-content: space-between;
+  padding: 4px 0;
 }
 
 .info-row {
   margin: 0;
-  font-size: 0.22cm;
+  min-height: 28px;
+  font-size: 20px;
   font-weight: 500;
   color: #000;
-  line-height: 1.25;
+  line-height: 1.4;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -323,12 +344,13 @@ onMounted(() => {
 /* 右侧二维码 */
 .qrcode-canvas {
   flex-shrink: 0;
-  width: 2cm;
-  height: 2cm;
+  width: 176px;
+  height: 176px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #fff;
+  align-self: center;
 }
 
 .qrcode-canvas canvas {