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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user