提交

web-admin/src/views/cell-storage/protocol/ProtocolViewDialog.vue

@@ -11,20 +11,26 @@
     @update:model-value="emit('update:modelValue', $event)"
     @closed="handleClosed"
   >
-    <div v-loading="detailLoading" class="protocol-view-body">
+    <div class="protocol-view-body" :class="{ 'is-detail-loading': detailLoading && !bundle }">
       <div class="detail-tabs">
         <div
           v-for="tab in formTabs"
           :key="tab.key"
           class="detail-tab"
-          :class="{ active: activeTab === tab.key }"
+          :class="{ active: activeTab === tab.key, 'is-disabled': detailLoading && !bundle }"
           @click="scrollToSection(tab.key)"
         >
           {{ tab.label }}
         </div>
       </div>
 
-      <template v-if="bundle">
+      <DialogDetailSkeleton
+        v-if="detailLoading && !bundle"
+        variant="tabs-detail"
+        :tab-count="formTabs.length"
+      />
+
+      <template v-else-if="bundle">
         <!-- KPI 摘要条 -->
         <div class="kpi-strip">
           <div class="kpi-card">
@@ -781,6 +787,7 @@
 <script setup lang="ts">
   import { computed, nextTick, ref, watch } from 'vue'
   import { Calendar, CircleCheck, Close, Document, User } from '@element-plus/icons-vue'
+  import DialogDetailSkeleton from '@/components/business/dialog-detail-skeleton/index.vue'
   import ProtocolAttachmentReadonly from './ProtocolAttachmentReadonly.vue'
   import SampleQcInfoCards from '@/components/business/sample-qc-info-cards/index.vue'
   import {
@@ -1616,6 +1623,7 @@
   }
 
   function scrollToSection(key: string) {
+    if (detailLoading.value && !bundle.value) return
     activeTab.value = key
     nextTick(() => {
       document
@@ -1644,6 +1652,10 @@
 <style scoped lang="scss">
   .protocol-view-body {
     overflow: visible;
+
+    &.is-detail-loading {
+      min-height: min(680px, calc(100vh - 220px));
+    }
   }
 
   /* ---- Sticky Tab 导航 ---- */
@@ -1680,6 +1692,12 @@
     &:hover:not(.active) {
       color: #059669;
     }
+
+    &.is-disabled {
+      cursor: default;
+      opacity: 0.65;
+      pointer-events: none;
+    }
   }
 
   /* ---- KPI 摘要条（统一薄荷绿通栏 + 图标徽章） ---- */