admin/momentry_studio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Library thumbnail loading + People right-click context menu

Browse Source
This commit is contained in:
Momentry Studio
2026-06-14 22:41:38 +08:00
parent 07d9ebda29
commit 6b961612f7
2 changed files with 50 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/LibraryView.vue
View File

@@ -64,7 +64,8 @@
<div v-for="f in sortedFilteredFiles" :key="f.file_uuid" class="mp-file-card" :class="{ 'is-completed': f.isRegistered, 'is-selected': selectedFiles.includes(f.file_uuid) }" @click="toggleSelect(f)">
<div class="mp-thumb-wrap">
<div class="mp-badge-type">{{ isVideo(f) ? 'VIDEO' : (isPhoto(f) ? 'PHOTO' : 'DOC') }}</div>
<img v-if="isPhoto(f) || isVideo(f)" class="lt-thumb" :src="thumbnails[f.file_uuid]" alt="" loading="lazy" @error="handleThumbError" @vue:mounted="loadThumbnail(f.file_uuid)">
<img v-if="isPhoto(f) || isVideo(f)" v-show="thumbnails[f.file_uuid]" class="lt-thumb" :src="thumbnails[f.file_uuid]" alt="" @error="handleThumbError" @vue:mounted="loadThumbnail(f.file_uuid)">
<div v-if="(isPhoto(f) || isVideo(f)) && !thumbnails[f.file_uuid]" class="mp-thumb-loading">⟳</div>
<div v-else class="mp-doc-thumb">
<span class="mp-doc-icon">📄</span>
<span class="mp-doc-ext">{{ getFileExt(f.file_name) }}</span>
@@ -278,6 +279,8 @@ function resetFilters() {
.mp-file-card { border-radius: 14px; cursor: pointer; position: relative; }
.mp-thumb-wrap { position: relative; border-radius: 12px; overflow: hidden; background: #eef2f7; aspect-ratio: 4 / 3; border: 1px solid #e6ebf1; box-shadow: 0 0 0 2px #d9dde3 inset; }
.lt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-thumb-loading { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #9aa0a6; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mp-doc-thumb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; background: linear-gradient(180deg, #f7f9fc, #eef2f7); color: #6b7280; text-align: center; padding: 14px; }
.mp-doc-icon { font-size: 38px; line-height: 1; }
.mp-doc-ext { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #7a818c; text-transform: uppercase; }