From 08075c90e2a065b8cde03c7fbedada0029ab9c21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=85=B3=E7=BE=BD?= <关羽@gentronhealth.com>
Date: Mon, 11 May 2026 13:49:08 +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 accordion 模式下快速切换分类时，连续的折叠/展开动画重叠，
   Element Plus 在动画过程中重新计算面板高度，导致高度跳变和白屏闪烁
2. 折叠容器缺少 overflow:hidden，动画过渡期间内容溢出造成闪烁

修复方案：
1. 添加 isAnimating 防抖标志，handleCollapseChange 中 300ms 内忽略后续点击
   （与 CSS 过渡时长一致），让当前动画完整执行后再响应下一次切换
2. .collapse-scroll 添加 overflow-x:hidden，防止水平方向溢出
3. :deep(.el-collapse-item__wrap) 添加 overflow:hidden 替代 will-change:height，
   避免强制 GPU 合成层带来的性能开销

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../examination/examinationApplication.vue          | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 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 7c763f07..1ee2188d 100755
--- a/openhis-ui-vue3/src/views/doctorstation/components/examination/examinationApplication.vue
+++ b/openhis-ui-vue3/src/views/doctorstation/components/examination/examinationApplication.vue
@@ -522,6 +522,7 @@ const categoryList = ref([]);   // 原始分类+项目数据
 const dictSearchKey = ref('');
 const activeNames = ref('');    // 当前展开的折叠项
 const categoryLoadingSet = ref(new Set());  // Bug #500: 正在加载方法的分类集合
+const isAnimating = ref(false);  // Bug #500: 防止快速切换时折叠动画重叠导致抖动
 
 const allMethods = ref([]);
 
@@ -669,8 +670,13 @@ async function handleCategoryExpand(cat) {
     categoryLoadingSet.value.delete(cat.typeId);
   }
 }
-// Bug #500: 改为非 async 函数，避免 el-collapse 的 @change 等待异步完成导致抖动
+// Bug #500: 添加防抖逻辑，快速切换时跳过中间状态的动画，避免高度跳变和白屏闪烁
 function handleCollapseChange(activeName) {
+  if (isAnimating.value) return;  // 动画进行中，忽略后续点击
+
+  isAnimating.value = true;
+  setTimeout(() => { isAnimating.value = false; }, 300);  // 与 CSS 过渡时长一致
+
   if (activeName) {
     const cat = filteredCategoryList.value.find(c => c.typeId == activeName);
     if (cat && (!cat.methods || cat.methods.length === 0)) {
@@ -1307,6 +1313,7 @@ defineExpose({ getList });
 .collapse-scroll {
   flex: 1;
   overflow-y: auto;
+  overflow-x: hidden;  /* Bug #500: 防止切换时水平方向溢出导致抖动 */
 }
 .empty-hint {
   color: #909399;
@@ -1479,10 +1486,10 @@ defineExpose({ getList });
   padding-bottom: 4px;
   transition: all 0.3s ease;
 }
-/* Bug #500: 折叠面板展开/收起动画使用 will-change 优化性能 */
+/* Bug #500: 折叠面板动画容器，添加 overflow:hidden 防止展开时内容溢出导致闪烁 */
 :deep(.el-collapse-item__wrap) {
   border: none;
-  will-change: height;
+  overflow: hidden;
 }
 :deep(.el-collapse-item) {
   transition: margin 0.2s ease;