dachui/hfb_sys
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(listings): 优化详情页图片加载链路支持公开变体与分级秒开

Browse Source
This commit is contained in:
yml2213
2026-09-06 21:40:35 +08:00
parent 823632b608
commit 23883d4be5
7 changed files with 168 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/listings/views/ListingDetailView.vue
+9 -4
View File
@@ -40,6 +40,9 @@ import {
readAssetString,
getRatioValue,
isTopTierInsurance,
getScreenshotThumbURL,
getScreenshotMediumURL,
getScreenshotRawURL,
type ListingDisplayResource,
} from '@/shared/utils/listingDisplay'
@@ -165,7 +168,9 @@ const detailScreenshots = computed(() => {
url,
}))
})
const detailScreenshotUrls = computed(() => detailScreenshots.value.map(shot => shot.url))
const detailScreenshotRawUrls = computed(() =>
detailScreenshots.value.map(shot => getScreenshotRawURL(shot.url))
)
const activeScreenshot = computed(() => {
if (detailScreenshots.value.length === 0) return null
@@ -533,12 +538,12 @@ function goBack() {
<div class="gallery-stage">
<div v-if="activeScreenshot" class="stage-viewer">
<AuthImage
:source="activeScreenshot.url"
:source="getScreenshotMediumURL(activeScreenshot.url)"
:alt="activeScreenshot.label"
image-class="stage-image"
fallback-class="stage-image"
fit="contain"
:preview-src-list="detailScreenshotUrls"
:preview-src-list="detailScreenshotRawUrls"
:preview-initial-index="activeImageIndex"
/>
<!-- 左上角分类角标 -->
@@ -566,7 +571,7 @@ function goBack() {
@mouseenter="activeImageIndex = idx"
>
<AuthImage
:source="shot.url"
:source="getScreenshotThumbURL(shot.url)"
:alt="shot.label"
image-class="thumb-img"
fallback-class="thumb-img"
frontend/src/features/listings/views/MobileListingDetailView.vue
+9 -4
View File
@@ -37,6 +37,9 @@ import {
readAssetString,
getRatioValue,
isTopTierInsurance,
getScreenshotThumbURL,
getScreenshotMediumURL,
getScreenshotRawURL,
} from '@/shared/utils/listingDisplay'
const route = useRoute()
@@ -164,7 +167,9 @@ const detailScreenshots = computed(() => {
url,
}))
})
const detailScreenshotUrls = computed(() => detailScreenshots.value.map(shot => shot.url))
const detailScreenshotRawUrls = computed(() =>
detailScreenshots.value.map(shot => getScreenshotRawURL(shot.url))
)
const activeScreenshot = computed(() => {
if (detailScreenshots.value.length === 0) return null
@@ -505,12 +510,12 @@ function handleToggleFavorite() {
<div class="gallery-stage">
<div v-if="activeScreenshot" class="stage-viewer">
<AuthImage
:source="activeScreenshot.url"
:source="getScreenshotMediumURL(activeScreenshot.url)"
:alt="activeScreenshot.label"
image-class="stage-image"
fallback-class="stage-image"
fit="contain"
:preview-src-list="detailScreenshotUrls"
:preview-src-list="detailScreenshotRawUrls"
:preview-initial-index="activeImageIndex"
/>
<span class="stage-tag">{{ activeScreenshot.label }}</span>
@@ -535,7 +540,7 @@ function handleToggleFavorite() {
@click="activeImageIndex = idx"
>
<AuthImage
:source="shot.url"
:source="getScreenshotThumbURL(shot.url)"
:alt="shot.label"
image-class="thumb-img"
fallback-class="thumb-img"