refactor(apps): optimize home app list loading and grid layout

1. refactor home app list loading logic: use seen set instead of map, handle deduplication with spark priority
2. add vertical scrolling for small app grid when not using virtual scroll
3. remove unnecessary overflow-y-auto from main container
This commit is contained in:
2026-07-16 10:27:18 +08:00
parent c814c4b13d
commit 387be920b1
2 changed files with 80 additions and 68 deletions
+16 -9
View File
@@ -17,18 +17,20 @@
</p>
</div>
<!-- 应用数量较少时使用普通网格 -->
<!-- 应用数量较少时使用普通网格带滚动 -->
<div
v-else-if="!loading && apps.length <= 50"
class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"
class="non-virtual-scroller"
>
<AppCard
v-for="(app, index) in apps"
:key="index"
:app="app"
:show-origin="effectiveShowOrigin"
@open-detail="$emit('open-detail', app)"
/>
<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
<AppCard
v-for="(app, index) in apps"
:key="index"
:app="app"
:show-origin="effectiveShowOrigin"
@open-detail="$emit('open-detail', app)"
/>
</div>
</div>
<!-- 应用数量较多时使用虚拟滚动 -->
@@ -180,6 +182,11 @@ const gridRows = computed(() => {
margin: -24px -16px; /* 抵消父容器的 px-4 py-6 */
}
.non-virtual-scroller {
height: calc(100vh - 140px);
overflow-y: auto;
}
@media (min-width: 1024px) {
.scroller {
margin: -24px -40px; /* 抵消父容器的 lg:px-10 */