feature: 使用deepseek进行了代码和页面优化

src/components/HardDisk.vue

@@ -1,34 +1,22 @@
 <template>
-    <div :class="'print-area ' + (isShow ? 'border' : '')" @dblclick="onDblClick">
-        <div :class="'item ' + (isShow ? 'show' : 'hide')">
-            <div class='left-content'>
-                <img class='qrcode' src='\qrcode.png'>
-                <div>长沙加零</div>
-                <div>17373135368</div>
-            </div>
-            <div class="right-content">
-                <div>{{ config.system }}</div>
-                <div>{{ config.partition }}</div>
-                <div>{{ config.hardDisk }}</div>
-                <div>{{ config.brand }}</div>
-            </div>
-        </div>
-        <div class="id">
-            <span>
-                {{ id }}
-            </span>
-        </div>
+    <div class="left-content">
+        <img class="qrcode" :src="logoUrl" alt="">
+        <div>长沙加零</div>
+        <div>17373135368</div>
+    </div>
+    <div class="right-content">
+        <div>{{ config.system }}</div>
+        <div>{{ config.partition }}</div>
+        <div>{{ config.hardDisk }}</div>
+        <div>{{ config.brand }}</div>
     </div>
 </template>
+
 <script setup>
-import { reactive, ref } from 'vue';
-const isShow = ref(true);
+defineProps(['config']);
 
-const props = defineProps(['id', 'config']);
-
-const onDblClick = () => {
-    isShow.value = !isShow.value;
-}
+// 二维码图片路径：运行时拼接，避免被打包器当作模块导入
+const logoUrl = '/qrcode.png';
 </script>
 
 <script>
@@ -85,124 +73,8 @@ export const formSchema = {
 
 export const initialValues = {
     system: "win10",
-    partition:"MBR",
+    partition: "MBR",
     hardDisk: "256G",
     brand: "泽域"
 }
 </script>
-<style>
-.print-area {
-    /* border: 0.1mm dashed #87CEFA; */
-    display: flex;
-    justify-content: center;
-    align-content: flex-start;
-    margin: 0.25mm;
-    cursor: pointer;
-    user-select: none;
-    position: relative;
-}
-
-.hide {
-    visibility: hidden;
-}
-
-.show {
-    visibility: visible;
-}
-
-.border {
-    border: 0.1mm dashed #87CEFA;
-}
-
-.print-area:nth-child(41),
-.print-area:nth-child(42),
-.print-area:nth-child(43),
-.print-area:nth-child(44) {
-    padding-bottom: 4mm;
-}
-
-.print-area:nth-child(41) .qrcode,
-.print-area:nth-child(42) .qrcode,
-.print-area:nth-child(43) .qrcode,
-.print-area:nth-child(44) .qrcode {
-    height: calc(100% - 5mm);
-}
-
-.item {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.tag {
-    color: red;
-    font-size: 0.8cm;
-}
-
-.reason,
-.time {
-    font-size: 4mm;
-}
-
-/*Styling below is used just for positioning the items inside the label. */
-
-.left-content {
-    width: 24mm;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    height: inherit;
-    font-size: 3mm;
-    line-height: 3mm;
-    color: #87CEFA;
-}
-
-.right-content {
-    display: grid;
-    font-size: 4mm;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    width: auto;
-}
-
-.qrcode {
-    height: calc(100% - 6mm);
-    margin: 0;
-}
-
-.id {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 2cm;
-    pointer-events: none;
-    color: #87CEFA60;
-}
-
-.id span {
-    /* display: block;
-    margin: 0 auto; */
-}
-
-@media print {
-    .id * {
-        visibility: hidden !important;
-    }
-
-    .hide * {
-        visibility: hidden !important;
-    }
-
-    .show {
-        visibility: visible;
-    }
-}
-</style>