From 555b98b13e3dcef31e3235054b350def11e34795 Mon Sep 17 00:00:00 2001
From: funjia <13429193897@163.com>
Date: Sun, 17 Aug 2025 13:42:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=A1=AC=E7=9B=98?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Error.vue    |  42 +++++++-
 src/components/HardDisk.vue | 208 ++++++++++++++++++++++++++++++++++++
 src/components/Main.vue     |  11 +-
 3 files changed, 257 insertions(+), 4 deletions(-)
 create mode 100644 src/components/HardDisk.vue

diff --git a/src/components/Error.vue b/src/components/Error.vue
index ff859c8..b48c4c6 100644
--- a/src/components/Error.vue
+++ b/src/components/Error.vue
@@ -1,10 +1,15 @@
 <template>
-    <div class="print-area border">
-        <div class="item" style="display: block;">
+    <div :class="'print-area ' + (isShow ? 'border' : '')" @dblclick="onDblClick">
+        <div :class="'item ' + (isShow ? 'show' : 'hide')">
             <div class="tag">{{ config.title }}</div>
             <div class="reason" style="font-size: 4mm;margin-top: 2mm;">{{ config.reason }}</div>
             <div class="time">{{ config.time }}</div>
         </div>
+        <div class="id">
+            <span>
+                {{ id }}
+            </span>
+        </div>
     </div>
 </template>
 <script setup>
@@ -115,4 +120,37 @@ export const initialValues = {
     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>
\ No newline at end of file
diff --git a/src/components/HardDisk.vue b/src/components/HardDisk.vue
new file mode 100644
index 0000000..c4e7f29
--- /dev/null
+++ b/src/components/HardDisk.vue
@@ -0,0 +1,208 @@
+<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>
+</template>
+<script setup>
+import { reactive, ref } from 'vue';
+const isShow = ref(true);
+
+const props = defineProps(['id', 'config']);
+
+const onDblClick = () => {
+    isShow.value = !isShow.value;
+}
+</script>
+
+<script>
+export const formSchema = {
+    formItems: [
+        {
+            type: 'select',
+            label: '系统',
+            key: 'system',
+            options: [
+                { label: 'win10', value: 'win10' },
+                { label: 'win7', value: 'win7' },
+                { label: 'win11', value: 'win11' }
+            ]
+        },
+        {
+            type: 'select',
+            label: '分区',
+            key: 'partition',
+            options: [
+                { label: 'MBR', value: 'MBR' },
+                { label: 'GPT', value: 'GPT' }
+            ]
+        },
+        {
+            type: 'select',
+            label: '硬盘',
+            key: 'hardDisk',
+            options: [
+                { label: '120G', value: '120G' },
+                { label: '128G', value: '128G' },
+                { label: '256G', value: '256G' },
+                { label: '240G', value: '240G' },
+                { label: '512G', value: '512G' },
+                { label: '480G', value: '480G' },
+                { label: '1TB', value: '1TB' },
+                { label: '960G', value: '960G' }
+            ]
+        },
+        {
+            type: 'select',
+            label: '品牌',
+            key: 'brand',
+            options: [
+                { label: '泽域', value: '泽域' },
+                { label: '华鑫云', value: '华鑫云' },
+                { label: '昂达', value: '昂达' },
+                { label: '金士顿', value: '金士顿' },
+                { label: '其它', value: '其它' }
+            ]
+        }
+    ]
+};
+
+export const initialValues = {
+    system: "win10",
+    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>
\ No newline at end of file
diff --git a/src/components/Main.vue b/src/components/Main.vue
index e539b97..5292f88 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -37,6 +37,7 @@ import G3260_8G_120G, {
 } from './G3260_8G_120G.vue';
 import All_in_one_22_4G_120G, { formSchema as formSchema_22AllInOne, initialValues as initialValues_22AllInOne } from "./22寸一体机_4G_120G.vue";
 import All_in_one_24_8G_256G, { formSchema as formSchema_24AllInOne, initialValues as initialValues_24AllInOne } from "./24寸一体机_I5_3代_8G_256G.vue";
+import HardDisk, { formSchema as formSchema_HardDisk, initialValues as initialValues_HardDisk } from "./HardDisk.vue";
 
 import DynamicForm from './DynamicForm.vue';
 import Input from './Input/Index.vue';
@@ -60,12 +61,12 @@ const people = reactive([
         formData: initialValues_I59400F
     },
     {
-        label: 'I54590_8G_120G',
+        label: 'I5_4590_8G_120G',
         formSchema: formSchema_I54590,
         formData: initialValues_I54590
     },
     {
-        label: 'I34130_8G_120G',
+        label: 'I3_4130_8G_120G',
         formSchema: formSchema_I34130,
         formData: initialValues_I34130
     },
@@ -84,6 +85,11 @@ const people = reactive([
         formSchema: formSchema_22AllInOne,
         formData: initialValues_22AllInOne
     },
+    {
+        label: 'HardDisk',
+        formSchema: formSchema_HardDisk,
+        formData: initialValues_HardDisk
+    },
     {
         label: 'Error',
         formSchema: formSchema_Error,
@@ -128,6 +134,7 @@ const getComponent = (item) => {
         case '24寸一体机_I5_3代_8G_256G': return All_in_one_24_8G_256G;
         case '22寸一体机_4G_120G': return All_in_one_22_4G_120G;
         case 'Error': return Error;
+        case 'HardDisk': return HardDisk;
         default: return Error;
     }
 }