diff --git a/src/views/mes/criticalComponent/CriticalComponentForm.vue b/src/views/mes/criticalComponent/CriticalComponentForm.vue
index 006ed5fc..4b0efa05 100644
--- a/src/views/mes/criticalComponent/CriticalComponentForm.vue
+++ b/src/views/mes/criticalComponent/CriticalComponentForm.vue
@@ -61,6 +61,13 @@
           </el-image>
           <div v-else class="critical-component-qrcode-error">{{ t('EquipmentManagement.EquipmentKeyItems.qrcodeEmpty') }}</div>
           <div class="critical-component-qrcode-mask">
+            <el-button
+              circle
+              :disabled="!formData.qrcodeUrl"
+              @click="handlePreviewQrcode"
+            >
+              <Icon icon="ep:zoom-in" />
+            </el-button>
             <el-button
               circle
               :loading="regenerateCodeLoading"
@@ -90,6 +97,7 @@
 
 <script setup lang="ts">
 import { CriticalComponentApi, CriticalComponentVO } from '@/api/mes/criticalComponent'
+import { createImageViewer } from '@/components/ImageViewer'
 
 defineOptions({ name: 'CriticalComponentForm' })
 
@@ -170,6 +178,14 @@ const handleRegenerateCode = async () => {
   }
 }
 
+const handlePreviewQrcode = () => {
+  if (!formData.value.qrcodeUrl) return
+  createImageViewer({
+    zIndex: 9999999,
+    urlList: [formData.value.qrcodeUrl]
+  })
+}
+
 const open = async (type: 'create' | 'update', id?: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
@@ -252,6 +268,7 @@ const submitForm = async () => {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 10px;
   background: rgba(0, 0, 0, 0.35);
   opacity: 0;
   transition: opacity 0.2s ease;
@@ -261,4 +278,3 @@ const submitForm = async () => {
   opacity: 1;
 }
 </style>
-