tcjlj/MeBox
1
0
Fork 0
mirror of https://github.com/truewhile/MeBox.git synced 2026-10-02 12:26:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化缩略图

Browse Source
This commit is contained in:
truewhile
2026-09-20 14:13:49 +08:00
parent 9b2b592003
commit c24ebe181d
14 changed files with 119 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/LayoutHeaderSections.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import { ArrowLeft, Film, LoaderCircle, Menu, Search, Star, X } from 'lucide-react'
import { imageURL } from '../api/client'
import { ARTWORK, imageURL } from '../api/client'
import { mediaAPI } from '../api/library'
import type { Media, PlayProfile, User } from '../types'
import { favouriteMediaLink } from '../utils/mediaNavigation'
@@ -368,7 +368,7 @@ function LayoutHeaderSearch() {
<div className="relative h-12 w-9 shrink-0 overflow-hidden rounded-lg bg-[var(--app-panel-soft)]">
{item.poster_url ? (
<img
src={imageURL(item.poster_url, item.updated_at)}
src={imageURL(item.poster_url, item.updated_at, ARTWORK.posterCard)}
alt=""
className="h-full w-full object-cover"
loading="lazy"
web/src/components/ManualScrapeDialogSections.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { Check, LoaderCircle, Search, Sparkles, X } from 'lucide-react'
import { imageURL } from '../api/client'
import { ARTWORK, imageURL } from '../api/client'
import type { ManualScrapeCandidate } from '../api/library'
import {
candidateIDText,
@@ -202,7 +202,7 @@ function ManualScrapeCandidateRow({
<div className="flex min-w-0 max-w-full flex-col gap-4 overflow-hidden rounded-xl border border-sand-200 bg-white p-3 shadow-sm sm:flex-row">
<div className="h-28 w-20 shrink-0 overflow-hidden rounded-lg bg-sand-100">
{item.poster_url ? (
<img src={imageURL(item.poster_url)} alt={item.title} loading="lazy" decoding="async" className="h-full w-full object-cover" referrerPolicy="no-referrer" />
<img src={imageURL(item.poster_url, undefined, ARTWORK.posterCard)} alt={item.title} loading="lazy" decoding="async" className="h-full w-full object-cover" referrerPolicy="no-referrer" />
) : (
<div className="flex h-full items-center justify-center text-xs text-sand-500">无海报</div>
)}
web/src/components/MediaCard.tsx
+4 -7
View File
@@ -1,7 +1,7 @@
import { memo, useEffect, useRef, useState, type ReactNode } from 'react'
import { Link } from 'react-router-dom'
import { Film, Play, Layers, Star } from 'lucide-react'
import { imageURL } from '../api/client'
import { ARTWORK, imageURL } from '../api/client'
import type { Media } from '../types'
const ACTION_OVERLAY_CLASS =
@@ -26,12 +26,9 @@ export const MediaCard = memo(function MediaCard({
const ref = useRef<HTMLDivElement>(null)
const href = linkTo ?? `/media/${media.id}`
const [posterFit, setPosterFit] = useState<'cover' | 'contain'>('cover')
const posterSrc = imageURL(media.poster_url, media.updated_at, {
maxWidth: compact ? 320 : 480,
maxHeight: compact ? 480 : 600,
quality: 82,
})
const blurredPosterSrc = imageURL(media.poster_url, media.updated_at, { maxWidth: 160, quality: 60 })
// 固定档位而不是在调用点拼尺寸：紧凑布局与普通卡片共用同一份缩略图缓存。
const posterSrc = imageURL(media.poster_url, media.updated_at, ARTWORK.posterCard)
const blurredPosterSrc = imageURL(media.poster_url, media.updated_at, ARTWORK.posterTiny)
const displayRating = rating ?? media.rating
const versionCount = media.versions?.length ?? 0
// renderActions 延迟到卡片自身渲染时才调用，保证 memo 生效