GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-07-05 22:41:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: unify horizontal card virtualization

Browse Source 
Replace the remaining slide loading fallbacks with VirtualSlideView so horizontal media and person carousels use a single rendering path. Remove the now-unused SlideView component to keep the slide system smaller and easier to maintain.
This commit is contained in:
jxxghp
2026-05-09 08:48:49 +08:00
parent 090b9d735d
commit 107f70abde
4 changed files with 31 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/slide/VirtualSlideView.vue
View File

@@ -9,12 +9,14 @@ const props = withDefaults(
itemGap?: number
overscanItems?: number
getItemKey?: (item: any, index: number) => string | number
loading?: boolean
}>(),
{
itemWidth: 144,
itemGap: 16,
overscanItems: 4,
getItemKey: undefined,
loading: false,
},
)
@@ -211,23 +213,31 @@ watch(
<div class="slider-content-wrapper">
<div class="slider-content-container">
<div ref="slideContentRef" class="slider-content" tabindex="0" @scroll="handleContentScroll">
<div class="virtual-track" :style="{ width: `${totalContentWidth}px` }">
<div v-if="leadingSpaceWidth > 0" class="virtual-spacer" :style="{ width: `${leadingSpaceWidth}px` }" />
<template v-if="loading">
<slot name="loading" />
</template>
<template v-else-if="items.length > 0">
<div class="virtual-track" :style="{ width: `${totalContentWidth}px` }">
<div v-if="leadingSpaceWidth > 0" class="virtual-spacer" :style="{ width: `${leadingSpaceWidth}px` }" />
<template v-for="(item, index) in visibleItems" :key="resolveItemKey(item, index)">
<div
class="virtual-slide-item"
:style="{
marginInlineEnd: index === visibleItems.length - 1 ? '0px' : `${itemGap}px`,
width: `${itemWidth}px`,
}"
>
<slot name="item" :item="item" :index="startIndex + index" />
</div>
</template>
<template v-for="(item, index) in visibleItems" :key="resolveItemKey(item, index)">
<div
class="virtual-slide-item"
:style="{
marginInlineEnd: index === visibleItems.length - 1 ? '0px' : `${itemGap}px`,
width: `${itemWidth}px`,
}"
>
<slot name="item" :item="item" :index="startIndex + index" />
</div>
</template>
<div v-if="trailingSpaceWidth > 0" class="virtual-spacer" :style="{ width: `${trailingSpaceWidth}px` }" />
</div>
<div v-if="trailingSpaceWidth > 0" class="virtual-spacer" :style="{ width: `${trailingSpaceWidth}px` }" />
</div>
</template>
<template v-else>
<slot name="empty" />
</template>
</div>
</div>