From c7368db889dcb813c08430b1f2481a1a5c8ac697 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8D=80=E5=BD=A7?= <荀彧@gentronhealth.com>
Date: Fri, 15 May 2026 00:02:32 +0800
Subject: [PATCH] =?UTF-8?q?Fix=20Bug=20#500:=20=E3=80=90=E9=97=A8=E8=AF=8A?=
 =?UTF-8?q?=E5=8C=BB=E7=94=9F=E7=AB=99=E3=80=91=E6=A3=80=E6=9F=A5=E7=94=B3?=
 =?UTF-8?q?=E8=AF=B7=E5=8F=B3=E4=BE=A7"=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?=
 =?UTF-8?q?=EF=BC=8C=E7=95=8C=E9=9D=A2=E5=87=BA=E7=8E=B0=E6=98=8E=E6=98=BE?=
 =?UTF-8?q?=E6=8A=96=E5=8A=A8/=E9=97=AA=E7=83=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根因分析：
1. el-collapse-item__content 上的 transition: height/max-height 0.3s 与 Element Plus
   内部 accordion 动画冲突，造成"双重动画"效果，表现为切换分类时高度跳变
2. collapse-scroll 的 min-height: 120px 过小，切换内容较少的分类时容器收缩导致布局抖动
3. 分类内"加载中..."提示使用 v-if，出现/消失时引起 collapse content 高度突变

修复策略：
- 移除 el-collapse-item__content 和 el-collapse-item 的自定义 transition 属性，
  让 el-collapse 使用原生动画，消除双重动画
- 增大 collapse-scroll 的 min-height 从 120px 到 350px，确保切换时容器不收缩
- 将加载提示的 v-if 改为 v-show，避免 DOM 插入/移除引起高度跳变

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

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 11126c865..94b12491b 100755
--- a/openhis-ui-vue3/src/views/doctorstation/components/examination/examinationApplication.vue
+++ b/openhis-ui-vue3/src/views/doctorstation/components/examination/examinationApplication.vue
@@ -389,7 +389,8 @@
                     </el-checkbox>
                     <span class="item-price">¥{{ item.price }}/{{ item.unit || "次" }}</span>
                   </div>
-                  <div v-if="categoryLoadingSet.has(cat.typeId)" class="category-loading-hint">
+                  <!-- Bug #500修复: 使用 v-show + 占位符，避免加载提示出现/消失时高度跳变 -->
+                  <div v-show="categoryLoadingSet.has(cat.typeId)" class="category-loading-hint">
                     加载中...
                   </div>
                   <!-- Bug #428修复: 渲染分类联动加载的检查方法列表 -->
@@ -1804,8 +1805,8 @@ defineExpose({ getList });
 .collapse-scroll {
   flex: 1;
   overflow-y: auto;
-  overflow-x: hidden;  /* Bug #500: 防止切换时水平方向溢出导致抖动 */
-  min-height: 120px;   /* Bug #500: 固定最小高度，避免分类切换时 flex 容器高度突变 */
+  overflow-x: hidden;
+  min-height: 350px;   /* Bug #500: 增大最小高度，确保切换分类时容器高度不会收缩导致抖动 */
 }
 .empty-hint {
   color: #909399;
@@ -2119,18 +2120,18 @@ defineExpose({ getList });
   height: auto;
   line-height: 1.5;
 }
-/* Bug #500修复: 折叠内容使用明确属性过渡，避免 transition: all 导致子元素意外动画 */
+/* Bug #500修复: 折叠内容不添加额外过渡动画，避免与 el-collapse 内部动画冲突导致双重动画/闪烁 */
 :deep(.el-collapse-item__content) {
   padding-bottom: 4px;
-  transition: height 0.3s ease, max-height 0.3s ease;
 }
-/* Bug #500: 折叠面板动画容器，添加 overflow:hidden 防止展开时内容溢出导致闪烁 */
+/* Bug #500: 折叠面板容器不加 border，保持简洁 */
 :deep(.el-collapse-item__wrap) {
   border: none;
   overflow: hidden;
 }
+/* Bug #500: 分类项不加 margin 过渡，避免展开/收起时意外位移 */
 :deep(.el-collapse-item) {
-  transition: margin 0.2s ease;
+  /* 不使用 transition，依赖 el-collapse 原生动画 */
 }
 /* Bug #500: 分类加载中提示样式 */
 .category-loading-hint {