From 6dcb7368d0bffe49be577b924cde05719086bcf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E4=BA=91?= <赵云@gentronhealth.com>
Date: Sun, 17 May 2026 15:56:16 +0800
Subject: [PATCH] =?UTF-8?q?Fix=20Bug=20#500:=20=E6=A3=80=E6=9F=A5=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E5=88=86=E7=B1=BB=E5=88=87=E6=8D=A2=E6=97=B6=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E6=8A=96=E5=8A=A8/=E9=97=AA=E7=83=81=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根因：展开分类加载检查方法时，方法列表区域初始高度为0，加载完成后突然插入导致高度跳变；
同时折叠面板动画期间容器最小高度(120px)不足，加剧了视觉闪烁。

修复：
1. 添加骨架占位div：方法列表加载中时预渲染带shimmer动画的占位区域，提前预留高度
2. 增大.collapse-scroll min-height至300px，稳定折叠动画期间的容器高度
3. .method-section添加min-height:50px，减少加载完成前后的高度差

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../examination/examinationApplication.vue    | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/openhis-ui-vue3/src/views/doctorstation/components/examination/examinationApplication.vue b/openhis-ui-vue3/src/views/doctorstation/components/examination/examinationApplication.vue
index 7928c1a08..f5e597847 100755
--- a/openhis-ui-vue3/src/views/doctorstation/components/examination/examinationApplication.vue
+++ b/openhis-ui-vue3/src/views/doctorstation/components/examination/examinationApplication.vue
@@ -414,6 +414,15 @@
                       <span class="method-price-tag">¥{{ method.packagePrice || method.price || 0 }}</span>
                     </div>
                   </div>
+                  <!-- Bug #500修复: 加载中的方法列表骨架占位，提前预留空间避免高度跳变 -->
+                  <div
+                    v-if="categoryLoadingSet.has(cat.typeId) && (!cat.methods || cat.methods.length === 0)"
+                    class="method-section method-section-skeleton"
+                  >
+                    <div class="method-section-title">检查方法</div>
+                    <div class="skeleton-method-row"></div>
+                    <div class="skeleton-method-row"></div>
+                  </div>
                 </el-collapse-item>
               </el-collapse>
             </div>
@@ -1803,7 +1812,7 @@ defineExpose({ getList });
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;  /* Bug #500: 防止切换时水平方向溢出导致抖动 */
-  min-height: 120px;   /* Bug #500: 固定最小高度，避免分类切换时 flex 容器高度突变 */
+  min-height: 300px;   /* Bug #500: 增大最小高度，避免折叠动画期间容器高度突变 */
 }
 .empty-hint {
   color: #909399;
@@ -1862,6 +1871,7 @@ defineExpose({ getList });
   background: #f0f7ff;
   border-radius: 4px;
   margin-top: 6px;
+  min-height: 50px;  /* Bug #500: 方法区域预留最小高度，减少加载完成后的高度突变 */
 }
 
 .method-section-title {
@@ -1903,6 +1913,24 @@ defineExpose({ getList });
   margin-left: 6px;
 }
 
+/* Bug #500修复: 方法列表骨架占位样式 */
+.method-section-skeleton {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.skeleton-method-row {
+  height: 22px;
+  border-radius: 3px;
+  background: linear-gradient(90deg, #e8f4ff 25%, #d0e8ff 50%, #e8f4ff 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+  margin-bottom: 4px;
+}
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
 /* 已选择 tags */
 /* 已选择：加宽，避免套餐明细挤成一团 */
 .selected-panel {