Fix Bug #500: 检查项目分类切换时界面抖动/闪烁修复

根因:展开分类加载检查方法时,方法列表区域初始高度为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>
This commit is contained in:
赵云
2026-05-17 15:56:16 +08:00
committed by 荀彧
parent 42f75de903
commit 6dcb7368d0

View File

@@ -414,6 +414,15 @@
<span class="method-price-tag">¥{{ method.packagePrice || method.price || 0 }}</span> <span class="method-price-tag">¥{{ method.packagePrice || method.price || 0 }}</span>
</div> </div>
</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-item>
</el-collapse> </el-collapse>
</div> </div>
@@ -1803,7 +1812,7 @@ defineExpose({ getList });
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; /* Bug #500: 防止切换时水平方向溢出导致抖动 */ overflow-x: hidden; /* Bug #500: 防止切换时水平方向溢出导致抖动 */
min-height: 120px; /* Bug #500: 固定最小高度,避免分类切换时 flex 容器高度突变 */ min-height: 300px; /* Bug #500: 增大最小高度,避免折叠动画期间容器高度突变 */
} }
.empty-hint { .empty-hint {
color: #909399; color: #909399;
@@ -1862,6 +1871,7 @@ defineExpose({ getList });
background: #f0f7ff; background: #f0f7ff;
border-radius: 4px; border-radius: 4px;
margin-top: 6px; margin-top: 6px;
min-height: 50px; /* Bug #500: 方法区域预留最小高度,减少加载完成后的高度突变 */
} }
.method-section-title { .method-section-title {
@@ -1903,6 +1913,24 @@ defineExpose({ getList });
margin-left: 6px; 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 */ /* 已选择 tags */
/* 已选择:加宽,避免套餐明细挤成一团 */ /* 已选择:加宽,避免套餐明细挤成一团 */
.selected-panel { .selected-panel {