1160 lines
50 KiB
Plaintext
1160 lines
50 KiB
Plaintext
---
|
||
import type { RawArticle } from "@/lib/api"
|
||
import { getI18n } from "@/i18n/utils"
|
||
import { href, ROUTES } from '@/lib/routes'
|
||
import { ssrBase } from "@/lib/api"
|
||
|
||
interface Props {
|
||
article: RawArticle | null
|
||
error?: "missing" | "failed" | null
|
||
preview?: boolean // 后端未登录截断图片集时返回 true，渲染「剩余 N 张」占位遮罩
|
||
imageTotal?: number // 图片集真实总数（后端截断前），渲染「剩余 N 张」占位遮罩
|
||
}
|
||
|
||
const { article, error = null, preview = false, imageTotal = 0 } = Astro.props
|
||
const { locale, t } = getI18n(Astro)
|
||
|
||
const full = (u: string): string => {
|
||
if (!u) return ""
|
||
if (/^https?:\/\//i.test(u)) return u
|
||
return ssrBase().replace(/\/$/, "") + u
|
||
}
|
||
|
||
// 改造后：后端详情接口 images 仅返回主图（look 图），细节图在 details 分组，需经「细节入口」展开。
|
||
// 故此处 images 即为主图集合，默认只渲染它们；每张主图带 look_index 用于关联其细节图。
|
||
const images = (article?.images ?? [])
|
||
.map((im) => ({
|
||
id: im.id,
|
||
url: full(im.image || ""),
|
||
// 缩略图：灯箱左栏缩略图条只显示 76~118px，用后端给的 thumb（240px 样式）即可，
|
||
// 不必拿 720px 的展示图当缩略图（一场 63 个 look 能省约 1MB）。后端未返回 thumb 时回落展示图。
|
||
thumb: full(im.thumb || im.image || ""),
|
||
raw: im.image || "", // 相对路径：收藏快照存相对地址，不把宿主/端口写死进库
|
||
name: im.name || "",
|
||
lookIndex: Number(im.look_index ?? 0),
|
||
}))
|
||
.filter((im) => im.url)
|
||
|
||
// 每个主图（look_index）对应的细节图数量，用于网格卡片左下角标「该主图有几张细节图」。
|
||
// 来源与灯箱右下角细节簇一致：后端详情接口的 details 分组（按 look_index 聚合）。
|
||
// SSR 首屏图直接查这张表；登录后追加的 extraImages 由 Alpine 的 detailCount() 读同一份数据。
|
||
const detailsByLook = new Map<number, number>()
|
||
for (const d of (article?.details ?? []) as { look_index?: number; images?: unknown[] }[]) {
|
||
const li = Number(d.look_index ?? 0)
|
||
if (li) detailsByLook.set(li, (d.images ?? []).length)
|
||
}
|
||
|
||
// 未登录预览上限：详情页（图集）未登录最多展示前 PREVIEW_LIMIT 张图片；其余由登录门禁提示，
|
||
// 已登录（客户端 loadAuthedState 拉全量）或图片本就不超上限时全部展示。前 PREVIEW_LIMIT 张服务端已渲染（SEO/无 JS 友好）。
|
||
const PREVIEW_LIMIT = 5
|
||
const previewImages = images.slice(0, PREVIEW_LIMIT)
|
||
|
||
// 未登录预览占位遮罩数：补足「剩余 N 张」空图，提示登录后可见，避免误以为图集只有预览上限那几张。
|
||
// 已登录（preview=false）或图片本就不超上限时 lockedCount=0，不渲染占位。
|
||
const lockedCount = preview ? Math.max(0, (imageTotal || 0) - previewImages.length) : 0
|
||
|
||
const descParas = (article?.description || "")
|
||
.split(/\n\n+/)
|
||
.map((s) => s.trim())
|
||
.filter(Boolean)
|
||
|
||
const homeHref = href(locale, ROUTES.home)
|
||
---
|
||
|
||
<div
|
||
id="article-view"
|
||
x-data="articleView()"
|
||
data-fav-type="runway_image"
|
||
data-gallery-uid={article?.id ?? ""}
|
||
data-gallery-title={article?.title ?? ""}
|
||
data-gallery-brand={article?.brand_name ?? ""}
|
||
data-preview={preview ? "true" : "false"}
|
||
data-details={JSON.stringify(article?.details ?? [])}
|
||
class="min-h-screen bg-white text-black font-sans selection:bg-black selection:text-white"
|
||
>
|
||
{
|
||
article ? (
|
||
<article class="mx-auto max-w-[1600px] px-5 md:px-10 py-12 md:py-16">
|
||
<h1 class="font-black leading-[0.95] tracking-tight text-[10vw] md:text-[4.5rem] mt-8">
|
||
{article.title}
|
||
</h1>
|
||
|
||
{previewImages.length > 0 && (
|
||
<section class="mt-16">
|
||
{/* 每行张数切换（应对图集图片很多的情况）：2/3/4/5 列，移动端固定 2 列 */}
|
||
<div class="flex items-center justify-between mb-5 border-b border-black/10 pb-3">
|
||
<span class="text-[11px] font-mono uppercase tracking-[0.22em] text-[#999]">
|
||
{(imageTotal || images.length)} LOOKS
|
||
</span>
|
||
<div class="flex items-center gap-1" role="group" aria-label="Images per row">
|
||
<span class="text-[11px] font-mono uppercase tracking-[0.18em] text-[#999] mr-2 hidden sm:inline">PER ROW</span>
|
||
{/* 每行张数切换：只有「3 张 / 5 张」两档，用竖条图标直观表达列数（避免文字数字按钮）。
|
||
density 只影响 md+；移动端固定 2 列（5 列在手机上不可用）。 */}
|
||
<button
|
||
type="button"
|
||
@click="density = 3"
|
||
:class="density === 3 ? 'bg-black text-white' : 'bg-transparent text-black hover:bg-black/5'"
|
||
class="w-8 h-8 flex items-center justify-center border border-black/15 transition-colors cursor-pointer"
|
||
:aria-pressed="density === 3"
|
||
aria-label="3 per row"
|
||
title="3 per row"
|
||
>
|
||
<svg class="w-[18px] h-[18px]" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
||
<rect x="1.5" y="2" width="3" height="12" />
|
||
<rect x="6.5" y="2" width="3" height="12" />
|
||
<rect x="11.5" y="2" width="3" height="12" />
|
||
</svg>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
@click="density = 5"
|
||
:class="density === 5 ? 'bg-black text-white' : 'bg-transparent text-black hover:bg-black/5'"
|
||
class="w-8 h-8 flex items-center justify-center border border-black/15 transition-colors cursor-pointer"
|
||
:aria-pressed="density === 5"
|
||
aria-label="5 per row"
|
||
title="5 per row"
|
||
>
|
||
<svg class="w-[18px] h-[18px]" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
||
<rect x="1" y="2" width="2" height="12" />
|
||
<rect x="4" y="2" width="2" height="12" />
|
||
<rect x="7" y="2" width="2" height="12" />
|
||
<rect x="10" y="2" width="2" height="12" />
|
||
<rect x="13" y="2" width="2" height="12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div
|
||
id="article-gallery"
|
||
class="grid gap-4"
|
||
:class="gridClass()"
|
||
>
|
||
{previewImages.map((im, i) => {
|
||
const dc = detailsByLook.get(im.lookIndex) || 0
|
||
return (
|
||
<figure
|
||
data-image-index={i}
|
||
data-look-index={im.lookIndex}
|
||
data-image-url={im.url}
|
||
data-image-name={im.name}
|
||
data-fav-id={im.id}
|
||
data-fav-url={im.raw}
|
||
@click={`openLb(${i})`}
|
||
class="relative bg-[#f2f2f2] cursor-zoom-in group"
|
||
>
|
||
<img
|
||
src={im.url}
|
||
alt={im.name}
|
||
loading={i < 6 ? "eager" : "lazy"}
|
||
decoding="async"
|
||
class="w-full aspect-[2/3] object-cover group-hover:opacity-90 transition-opacity"
|
||
/>
|
||
|
||
{/* 单图收藏：hover 显示，已收藏常驻实心 */}
|
||
<button
|
||
login-required
|
||
type="button"
|
||
data-fav-id={im.id}
|
||
data-fav-url={im.raw}
|
||
@click.stop="toggleFav($el.dataset.favId, $el.dataset.favUrl)"
|
||
:class="isFav($el.dataset.favId) ? 'is-fav opacity-100' : 'opacity-0 group-hover:opacity-100'"
|
||
class="fav-btn absolute right-2 top-2 z-10 w-8 h-8 rounded-full border border-black/15 bg-white/80 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black/5 hover:border-black/30 transition-all cursor-pointer"
|
||
aria-label={t('save')}
|
||
>
|
||
<svg class="w-4 h-4" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 21C12 21 4 14.5 4 8.8C4 6.1 6.1 4 8.7 4C10.3 4 11.5 4.8 12 6C12.5 4.8 13.7 4 15.3 4C17.9 4 20 6.1 20 8.8C20 14.5 12 21 12 21Z"/>
|
||
</svg>
|
||
</button>
|
||
|
||
{/* 细节图数量角标：有细节图的主图在左下角标注「张数」（图层图标 + 数字），
|
||
点它直接开细节灯箱。纯主图（无细节图）不显示任何角标，保持网格干净。 */}
|
||
{dc > 0 && (
|
||
<button
|
||
type="button"
|
||
@click.stop={`openDetailLb(${im.lookIndex})`}
|
||
class="absolute left-2 bottom-2 z-10 flex items-center gap-1 px-1.5 py-1 bg-white/85 backdrop-blur-sm border border-black/15 text-[#111] text-[10px] font-mono uppercase tracking-[0.14em] cursor-pointer hover:bg-black hover:text-white transition-colors"
|
||
title={`${dc} detail${dc > 1 ? "s" : ""}`}
|
||
aria-label={`${dc} detail${dc > 1 ? "s" : ""}`}
|
||
>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<rect x="3" y="3" width="13" height="13" rx="1.5" />
|
||
<path d="M8 21h11a2 2 0 0 0 2-2V8" />
|
||
</svg>
|
||
{dc}
|
||
</button>
|
||
)}
|
||
</figure>
|
||
)
|
||
})}
|
||
|
||
{/* 未登录预览占位遮罩：补满「剩余 N 张」空图，提示用户登录后可见，
|
||
避免误以为图集只有预览上限那几张。已登录（x-show false）自动隐藏，由 extraImages 真实图替补。 */}
|
||
{lockedCount > 0 &&
|
||
Array.from({ length: lockedCount }).map(() => (
|
||
<figure
|
||
x-show="!isAuthed && preview"
|
||
x-cloak
|
||
login-redirect
|
||
class="relative bg-[#f2f2f2] cursor-pointer group overflow-hidden"
|
||
>
|
||
{/* 与真实图片等高的 3:4 图位：锁图标 + 提示，点击跳登录 */}
|
||
<div class="w-full aspect-[2/3] flex items-center justify-center text-[#c4c4c4] group-hover:text-[#9a9a9a] transition-colors pointer-events-none">
|
||
<div class="flex flex-col items-center gap-2">
|
||
<svg class="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="4.5" y="10.5" width="15" height="10" rx="2" />
|
||
<path d="M8 10.5V7a4 4 0 0 1 8 0v3.5" />
|
||
</svg>
|
||
<span class="text-[10px] font-mono uppercase tracking-[0.18em]">{t('login to view')}</span>
|
||
</div>
|
||
</div>
|
||
{/* 真实图已无 look 序号 caption，占位格也改为绝对定位的 +N photos，
|
||
不撑高格子，保证遮罩格与真实图片格总高一致 */}
|
||
<span class="absolute left-2 bottom-2 z-10 text-[10px] font-mono uppercase tracking-[0.14em] text-[#b8b8b8] pointer-events-none">+{lockedCount} {t('photos')}</span>
|
||
</figure>
|
||
))
|
||
}
|
||
|
||
{/* 登录后追加的额外图片：extraImages 由客户端 loadAuthedState() 在已登录时填充，未登录为空不渲染 */}
|
||
<template x-for="(im, i) in extraImages" :key="im.url">
|
||
<figure
|
||
:data-image-index="5 + i"
|
||
:data-look-index="im.lookIndex"
|
||
:data-image-url="im.url"
|
||
:data-image-name="im.name"
|
||
:data-fav-id="im.id"
|
||
:data-fav-url="im.raw"
|
||
@click="openLb(5 + i)"
|
||
class="relative bg-[#f2f2f2] cursor-zoom-in group"
|
||
>
|
||
<img
|
||
:src="im.url"
|
||
:alt="im.name"
|
||
loading="lazy"
|
||
decoding="async"
|
||
class="w-full aspect-[2/3] object-cover group-hover:opacity-90 transition-opacity"
|
||
/>
|
||
|
||
<button
|
||
login-required
|
||
type="button"
|
||
:data-fav-id="im.id"
|
||
:data-fav-url="im.raw"
|
||
@click.stop="toggleFav($el.dataset.favId, $el.dataset.favUrl)"
|
||
:class="isFav($el.dataset.favId) ? 'is-fav opacity-100' : 'opacity-0 group-hover:opacity-100'"
|
||
class="fav-btn absolute right-2 top-2 z-10 w-8 h-8 rounded-full border border-black/15 bg-white/80 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black/5 hover:border-black/30 transition-all cursor-pointer"
|
||
aria-label={t('save')}
|
||
>
|
||
<svg class="w-4 h-4" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 21C12 21 4 14.5 4 8.8C4 6.1 6.1 4 8.7 4C10.3 4 11.5 4.8 12 6C12.5 4.8 13.7 4 15.3 4C17.9 4 20 6.1 20 8.8C20 14.5 12 21 12 21Z"/>
|
||
</svg>
|
||
</button>
|
||
{/* 细节图数量角标：有细节图的主图左下角标「张数」，点它直接开细节灯箱（与首屏图一致） */}
|
||
<button
|
||
type="button"
|
||
x-show="detailCount(im.lookIndex) > 0"
|
||
@click.stop="openDetailLb(im.lookIndex)"
|
||
class="absolute left-2 bottom-2 z-10 flex items-center gap-1 px-1.5 py-1 bg-white/85 backdrop-blur-sm border border-black/15 text-[#111] text-[10px] font-mono uppercase tracking-[0.14em] cursor-pointer hover:bg-black hover:text-white transition-colors"
|
||
:title="`${detailCount(im.lookIndex)} detail${detailCount(im.lookIndex) > 1 ? 's' : ''}`"
|
||
>
|
||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<rect x="3" y="3" width="13" height="13" rx="1.5" />
|
||
<path d="M8 21h11a2 2 0 0 0 2-2V8" />
|
||
</svg>
|
||
<span x-text="detailCount(im.lookIndex)"></span>
|
||
</button>
|
||
</figure>
|
||
</template>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{descParas.length > 0 && (
|
||
<section class="mt-16 max-w-[720px] space-y-5 text-[15px] leading-[1.8] text-[#222]">
|
||
{descParas.map((p) => (
|
||
<p>{p}</p>
|
||
))}
|
||
</section>
|
||
)}
|
||
</article>
|
||
) : (
|
||
<div class="flex flex-col items-center justify-center min-h-[60vh] px-5 text-center">
|
||
<p class="font-mono text-sm text-[#888] uppercase tracking-widest mb-4">
|
||
{error === "missing" ? t('No article ID specified') : t('Failed to load article. Please refresh or try later.')}
|
||
</p>
|
||
|
||
<a
|
||
href={homeHref}
|
||
class="text-[12px] font-mono uppercase tracking-[0.2em] border border-black px-4 py-2 hover:bg-black hover:text-white transition-colors"
|
||
>
|
||
← {t('Back to Index')}
|
||
</a>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
{article && previewImages.length > 0 && (
|
||
<div
|
||
x-show="lbOpen"
|
||
x-cloak
|
||
@keydown.window.escape="lbOpen && closeLb()"
|
||
@keydown.window.arrow-right="lbOpen && nextLb()"
|
||
@keydown.window.arrow-left="lbOpen && prevLb()"
|
||
class="fixed inset-0 z-[100] bg-white flex flex-col select-none"
|
||
aria-hidden="true"
|
||
>
|
||
{/* 计数：mono + 0.22em 字距（全站「小标与计数」档），直角细框，不用圆角药丸 */}
|
||
<div
|
||
class="absolute top-5 left-1/2 -translate-x-1/2 z-30 border border-black/15 bg-white/90 px-3 py-1 font-mono text-[11px] tracking-[0.22em] text-[#111] backdrop-blur-md"
|
||
x-text="`${String(lbIndex + 1).padStart(2, '0')} / ${String(imageCount).padStart(2, '0')}`"
|
||
></div>
|
||
|
||
<button
|
||
login-required
|
||
type="button"
|
||
@click.stop="toggleFav(currentFavId, currentFavUrl)"
|
||
:class="isFav(currentFavId) ? 'is-fav' : ''"
|
||
class="fav-btn absolute top-5 right-[68px] z-30 w-10 h-10 border border-black/15 bg-white/90 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black hover:text-white transition-colors cursor-pointer"
|
||
aria-label={t('save')}
|
||
>
|
||
<svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 21C12 21 4 14.5 4 8.8C4 6.1 6.1 4 8.7 4C10.3 4 11.5 4.8 12 6C12.5 4.8 13.7 4 15.3 4C17.9 4 20 6.1 20 8.8C20 14.5 12 21 12 21Z"/>
|
||
</svg>
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
@click="closeLb()"
|
||
class="absolute top-5 right-5 z-30 w-10 h-10 border border-black/15 bg-white/90 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black hover:text-white transition-colors cursor-pointer"
|
||
aria-label={t('Close')}
|
||
>
|
||
<svg class="w-4 h-4" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" aria-hidden="true">
|
||
<path d="M6 6l12 12M18 6L6 18" />
|
||
</svg>
|
||
</button>
|
||
|
||
<div class="flex-1 min-h-0 flex items-stretch overflow-hidden relative">
|
||
<div
|
||
id="lb-thumbs"
|
||
class="w-[76px] sm:w-[118px] flex-none overflow-y-auto overflow-x-hidden relative scroll-smooth p-[32px_8px] sm:p-[38px_18px_38px_20px] border-r border-black/10 no-scrollbar"
|
||
>
|
||
{previewImages.map((im, i) => (
|
||
<button
|
||
type="button"
|
||
data-lb-index={i}
|
||
data-thumb-url={im.thumb}
|
||
@click={`showLb(${i})`}
|
||
class="lb-thumb relative block w-full aspect-[2/3] mb-2 overflow-hidden cursor-pointer transition-opacity duration-200 opacity-40 hover:opacity-90 bg-[#eee] bg-cover bg-center"
|
||
x-bind:class="lbIndex === Number($el.dataset.lbIndex) ? 'opacity-100 ring-1 ring-black' : ''"
|
||
aria-label={`${i + 1}`}
|
||
>
|
||
<span class="absolute left-1 top-1 z-10 bg-black/70 px-1 py-0.5 font-mono text-[8px] sm:text-[9px] tracking-[0.16em] text-white backdrop-blur-sm">
|
||
{String(i + 1).padStart(2, "0")}
|
||
</span>
|
||
</button>
|
||
))}
|
||
|
||
<template x-for="(im, i) in extraImages" :key="im.url">
|
||
<button
|
||
type="button"
|
||
:data-lb-index="5 + i"
|
||
:data-thumb-url="im.thumb"
|
||
@click="showLb(5 + i)"
|
||
class="lb-thumb relative block w-full aspect-[2/3] mb-2 overflow-hidden cursor-pointer transition-opacity duration-200 opacity-40 hover:opacity-90 bg-[#eee] bg-cover bg-center"
|
||
x-bind:class="lbIndex === Number($el.dataset.lbIndex) ? 'opacity-100 ring-1 ring-black' : ''"
|
||
:aria-label="String(5 + i + 1)"
|
||
>
|
||
<span class="absolute left-1 top-1 z-10 bg-black/70 px-1 py-0.5 font-mono text-[8px] sm:text-[9px] tracking-[0.16em] text-white backdrop-blur-sm" x-text="String(5 + i + 1).padStart(2, '0')"></span>
|
||
</button>
|
||
</template>
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
@click.stop="prevLb()"
|
||
class="absolute left-3 sm:left-5 top-2 z-20 w-[52px] sm:w-[72px] h-[30px] sm:h-[34px] border border-black/15 bg-white/90 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black hover:text-white transition-colors cursor-pointer"
|
||
aria-label={t('Previous image')}
|
||
>
|
||
<svg class="w-4 h-4 stroke-current fill-none stroke-2" viewBox="0 0 24 24">
|
||
<path d="M6 14l6-6 6 6" />
|
||
</svg>
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
@click.stop="nextLb()"
|
||
class="absolute left-3 sm:left-5 bottom-2 z-20 w-[52px] sm:w-[72px] h-[30px] sm:h-[34px] border border-black/15 bg-white/90 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black hover:text-white transition-colors cursor-pointer"
|
||
aria-label={t('Next image')}
|
||
>
|
||
<svg class="w-4 h-4 stroke-current fill-none stroke-2" viewBox="0 0 24 24">
|
||
<path d="M6 10l6 6 6-6" />
|
||
</svg>
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
@click.stop="prevLb()"
|
||
class="absolute left-[82px] sm:left-[130px] top-1/2 -translate-y-1/2 z-20 w-10 h-10 border border-black/15 bg-white/90 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black hover:text-white transition-colors cursor-pointer"
|
||
aria-label={t('Previous image')}
|
||
>
|
||
<svg class="w-5 h-5 stroke-current fill-none stroke-2" viewBox="0 0 24 24">
|
||
<path d="M15 6l-6 6 6 6" />
|
||
</svg>
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
@click.stop="nextLb()"
|
||
class="absolute right-2 sm:right-5 top-1/2 -translate-y-1/2 z-20 w-10 h-10 border border-black/15 bg-white/90 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black hover:text-white transition-colors cursor-pointer"
|
||
aria-label={t('Next image')}
|
||
>
|
||
<svg class="w-5 h-5 stroke-current fill-none stroke-2" viewBox="0 0 24 24">
|
||
<path d="M9 6l6 6-6 6" />
|
||
</svg>
|
||
</button>
|
||
|
||
<div
|
||
id="lb-main"
|
||
@click.self="closeLb()"
|
||
class="flex-1 min-w-0 min-h-0 relative flex justify-center px-4 sm:px-18"
|
||
x-bind:class="lbZoomed
|
||
? 'overflow-y-auto overflow-x-hidden items-start'
|
||
: 'items-center'"
|
||
>
|
||
<img
|
||
id="lb-image"
|
||
src=""
|
||
alt=""
|
||
@click="toggleZoom()"
|
||
decoding="async"
|
||
class="block select-none transition-opacity duration-200"
|
||
x-bind:class="lbZoomed
|
||
? 'w-full max-w-full h-auto max-h-none cursor-zoom-out'
|
||
: 'max-w-full max-h-full object-contain cursor-zoom-in'"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="absolute left-0 right-0 bottom-11 z-20 px-6 text-center font-mono text-[11px] uppercase tracking-[0.2em] text-black/60 pointer-events-none"
|
||
x-text="currentImageName"
|
||
></div>
|
||
|
||
<div
|
||
x-show="!lbZoomed"
|
||
class="absolute left-0 right-0 bottom-4 z-20 px-6 text-center font-mono text-[10px] uppercase tracking-[0.16em] text-black/40 pointer-events-none transition-opacity duration-200"
|
||
>
|
||
{t('Click image to zoom · Scroll to view · Esc to close')}
|
||
</div>
|
||
|
||
{/* 当前 look 的细节图：右下角一小簇缩略图（竖版主图右下角本就是空白，不遮挡主图）。
|
||
主图放大（lbZoomed）时整簇隐藏——放大态要专注当前大图；点其中一张进细节灯箱看大图。
|
||
单个 look 最多 4 张细节图（多数 1~2 张），一排横放即可，不设滚动条。 */}
|
||
<div
|
||
id="lb-details"
|
||
x-show="!lbZoomed && currentDetailList.length > 0"
|
||
x-cloak
|
||
class="absolute right-4 sm:right-6 bottom-[72px] z-30 flex flex-col items-end gap-2"
|
||
>
|
||
<span class="font-mono text-[10px] uppercase tracking-[0.22em] text-[#999]">Details</span>
|
||
<div class="flex max-w-[min(70vw,440px)] gap-2 overflow-x-auto no-scrollbar">
|
||
<template x-for="(d, i) in currentDetailList" :key="d.url">
|
||
<button
|
||
type="button"
|
||
@click.stop="openDetailLbAt(i)"
|
||
class="relative flex-none w-[52px] sm:w-[68px] aspect-[2/3] overflow-hidden border border-black/15 bg-[#eee] cursor-zoom-in transition-colors hover:border-black"
|
||
:aria-label="`Detail ${i + 1}`"
|
||
>
|
||
<img :src="d.thumb" :alt="d.name || ''" loading="lazy" decoding="async" class="w-full h-full object-cover" />
|
||
</button>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ===== 细节图灯箱：点大图灯箱里的细节缩略图打开，单张细节图放大查看 ===== */}
|
||
{article && previewImages.length > 0 && (
|
||
<div
|
||
x-show="detailLbOpen"
|
||
x-cloak
|
||
@keydown.window.escape="detailLbOpen && closeDetailLb()"
|
||
@keydown.window.arrow-right="detailLbOpen && nextDetailLb()"
|
||
@keydown.window.arrow-left="detailLbOpen && prevDetailLb()"
|
||
class="fixed inset-0 z-[100] bg-white flex flex-col select-none"
|
||
aria-hidden="true"
|
||
>
|
||
<div
|
||
class="absolute top-5 left-1/2 -translate-x-1/2 z-30 border border-black/15 bg-white/90 px-3 py-1 font-mono text-[11px] tracking-[0.22em] text-[#111] backdrop-blur-md"
|
||
x-text="`${String(detailLbIndex + 1).padStart(2, '0')} / ${String(detailImages.length).padStart(2, '0')}`"
|
||
></div>
|
||
|
||
<button
|
||
login-required
|
||
type="button"
|
||
@click.stop="toggleFav(currentDetailFavId, currentDetailFavUrl)"
|
||
:class="isFav(currentDetailFavId) ? 'is-fav' : ''"
|
||
class="fav-btn absolute top-5 right-[68px] z-30 w-10 h-10 border border-black/15 bg-white/90 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black hover:text-white transition-colors cursor-pointer"
|
||
aria-label={t('save')}
|
||
>
|
||
<svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 21C12 21 4 14.5 4 8.8C4 6.1 6.1 4 8.7 4C10.3 4 11.5 4.8 12 6C12.5 4.8 13.7 4 15.3 4C17.9 4 20 6.1 20 8.8C20 14.5 12 21 12 21Z"/>
|
||
</svg>
|
||
</button>
|
||
|
||
{/* 关闭 = 退回上一层（主图大图灯箱），不是直接回图集网格 —— 由 closeDetailLb() 判断来源决定。 */}
|
||
<button
|
||
type="button"
|
||
@click="closeDetailLb()"
|
||
class="absolute top-5 right-5 z-30 w-10 h-10 border border-black/15 bg-white/90 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black hover:text-white transition-colors cursor-pointer"
|
||
aria-label={t('Close')}
|
||
>
|
||
<svg class="w-4 h-4" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" aria-hidden="true">
|
||
<path d="M6 6l12 12M18 6L6 18" />
|
||
</svg>
|
||
</button>
|
||
|
||
<div class="flex-1 min-h-0 flex items-stretch overflow-hidden relative">
|
||
<div
|
||
id="detail-lb-thumbs"
|
||
class="w-[76px] sm:w-[118px] flex-none overflow-y-auto overflow-x-hidden relative scroll-smooth p-[32px_8px] sm:p-[38px_18px_38px_20px] border-r border-black/10 no-scrollbar"
|
||
>
|
||
<template x-for="(im, i) in detailImages" :key="im.url">
|
||
<button
|
||
type="button"
|
||
@click="showDetailLb(i)"
|
||
class="relative block w-full aspect-[2/3] mb-2 overflow-hidden cursor-pointer transition-opacity duration-200 opacity-40 hover:opacity-90 bg-cover bg-center"
|
||
:style="`background-image:url('${im.thumb}')`"
|
||
x-bind:class="detailLbIndex === i ? 'opacity-100 ring-1 ring-black' : ''"
|
||
:aria-label="String(i + 1)"
|
||
>
|
||
<span class="absolute left-1 top-1 z-10 bg-black/70 px-1 py-0.5 font-mono text-[8px] sm:text-[9px] tracking-[0.16em] text-white backdrop-blur-sm" x-text="String(i + 1).padStart(2, '0')"></span>
|
||
</button>
|
||
</template>
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
@click.stop="prevDetailLb()"
|
||
class="absolute left-[82px] sm:left-[130px] top-1/2 -translate-y-1/2 z-20 w-10 h-10 border border-black/15 bg-white/90 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black hover:text-white transition-colors cursor-pointer"
|
||
aria-label={t('Previous image')}
|
||
>
|
||
<svg class="w-5 h-5 stroke-current fill-none stroke-2" viewBox="0 0 24 24">
|
||
<path d="M15 6l-6 6 6 6" />
|
||
</svg>
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
@click.stop="nextDetailLb()"
|
||
class="absolute right-2 sm:right-5 top-1/2 -translate-y-1/2 z-20 w-10 h-10 border border-black/15 bg-white/90 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black hover:text-white transition-colors cursor-pointer"
|
||
aria-label={t('Next image')}
|
||
>
|
||
<svg class="w-5 h-5 stroke-current fill-none stroke-2" viewBox="0 0 24 24">
|
||
<path d="M9 6l6 6-6 6" />
|
||
</svg>
|
||
</button>
|
||
|
||
<div
|
||
id="detail-lb-main"
|
||
@click.self="closeDetailLb()"
|
||
class="flex-1 min-w-0 min-h-0 relative flex justify-center px-4 sm:px-18"
|
||
x-bind:class="detailLbZoomed
|
||
? 'overflow-y-auto overflow-x-hidden items-start'
|
||
: 'items-center'"
|
||
>
|
||
<img
|
||
id="detail-lb-image"
|
||
src=""
|
||
alt=""
|
||
@click="toggleDetailZoom()"
|
||
decoding="async"
|
||
class="block select-none transition-opacity duration-200"
|
||
x-bind:class="detailLbZoomed
|
||
? 'w-full max-w-full h-auto max-h-none cursor-zoom-out'
|
||
: 'max-w-full max-h-full object-contain cursor-zoom-in'"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="absolute left-0 right-0 bottom-4 z-20 px-6 text-center font-mono text-[11px] uppercase tracking-[0.2em] text-black/60 pointer-events-none"
|
||
x-text="currentDetailName"
|
||
></div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<script>
|
||
import { getArticleDetailAuthed, toAbs } from "@/lib/api"
|
||
import { getUser } from "@/lib/auth"
|
||
import { isFavorited, toggleImageFavorite } from "@/lib/favorites"
|
||
|
||
document.addEventListener("alpine:init", () => {
|
||
Alpine.data("articleView", () => ({
|
||
lbOpen: false,
|
||
lbIndex: 0,
|
||
lbZoomed: false,
|
||
imageCount: 0,
|
||
currentImageName: "",
|
||
currentDetailName: "",
|
||
|
||
// 单图收藏态：已收藏的图片 id 列表（本地即时 + 服务端校正）
|
||
favIds: [],
|
||
favType: "runway_image",
|
||
galleryUid: "",
|
||
galleryTitle: "",
|
||
galleryBrand: "",
|
||
|
||
// 登录态快照：用响应式属性暴露给 x-show 表达式（Alpine 表达式作用域访问不到模块 import 的 getUser，
|
||
// 故在此用 getUser() 初始化，避免 x-show="!getUser()..." 求值报错导致遮罩卡在 x-cloak 隐藏）。
|
||
isAuthed: false,
|
||
// 未登录门禁：后端截断图片集时为 true（详情页最多看 PREVIEW_LIMIT 张）
|
||
preview: false,
|
||
// 已登录态图集级（gallery，r=/s=）收藏态：由 loadAuthedState 从详情接口取回，广播给 fav-fab
|
||
galleryFav: false,
|
||
// 已登录后客户端补拉的全量图片（前 PREVIEW_LIMIT 张已由 SSR 服务端渲染）
|
||
extraImages: [] as { id: string; url: string; thumb: string; raw: string; name: string; lookIndex?: number }[],
|
||
|
||
// 每行张数（应对图集图片很多）：只有 3 / 5 两档（工具栏图标按钮切换），移动端固定 2 列。
|
||
// 默认 5 张（进入图集详情页即展示 5 列网格，紧凑浏览）。
|
||
density: 5,
|
||
|
||
// 细节图灯箱：点大图灯箱里的细节缩略图打开，展示该 look 的细节图集合。
|
||
detailLbOpen: false,
|
||
detailLbIndex: 0,
|
||
detailLbZoomed: false,
|
||
detailImages: [] as { id: string; url: string; thumb: string; raw: string; name: string }[],
|
||
// look_index -> 该主图细节图数组（init 由 data-details 解析构建），供大图灯箱右下角展示与细节灯箱使用。
|
||
detailImagesByLook: {} as Record<number, { id: string; url: string; thumb: string; raw: string; name: string }[]>,
|
||
// 细节灯箱是否由主图大图灯箱打开（true 时关闭细节灯箱要退回主图，而不是掉回图集网格）；
|
||
// lbReturnIndex 记住退回时的图片序号。
|
||
detailLbFromLb: false,
|
||
lbReturnIndex: 0,
|
||
|
||
init() {
|
||
this.favType = this.$el.dataset.favType || "runway_image"
|
||
this.galleryUid = this.$el.dataset.galleryUid || ""
|
||
this.galleryTitle = this.$el.dataset.galleryTitle || ""
|
||
this.galleryBrand = this.$el.dataset.galleryBrand || ""
|
||
this.preview = this.$el.dataset.preview === "true"
|
||
this.isAuthed = !!getUser()
|
||
|
||
// 解析后端返回的 details 分组（按 look_index 聚合细节图），供「细节入口」展开灯箱。
|
||
this.buildDetailMap()
|
||
|
||
this.imageCount = document.querySelectorAll(
|
||
"#article-gallery [data-image-index]"
|
||
).length
|
||
|
||
this.initThumbLazyLoading()
|
||
this.initImageFavs()
|
||
this.maybeLocateImageFromUrl()
|
||
|
||
// 已登录：用一次详情请求拿回完整图片集 + 收藏态（合并原三处 /me/favorites/checks 调用）
|
||
if (getUser()) this.loadAuthedState()
|
||
// 登录后（如从门禁跳登录回跳）自动补全全量 + 收藏态
|
||
window.addEventListener("auth:login", () => { this.isAuthed = true; if (getUser()) this.loadAuthedState() })
|
||
},
|
||
|
||
// 已登录：用一次详情请求拿回「完整图片集 + 收藏态」，合并原三处 /me/favorites/checks 调用。
|
||
// gallery 级（r=）收藏态广播给页面右下角 fav-fab；image 级（i=）收藏态直接重建 favIds。
|
||
async loadAuthedState() {
|
||
if (!getUser()) return
|
||
try {
|
||
const full = await getArticleDetailAuthed(this.galleryUid)
|
||
if (!full || !Array.isArray(full.images)) return
|
||
|
||
// gallery 级收藏态 → 广播给 fav-fab（去掉单篇 /me/favorites/checks 查询）
|
||
this.galleryFav = !!full.favorited
|
||
window.dispatchEvent(
|
||
new CustomEvent("fav:set", { detail: { id: this.galleryUid, fav: this.galleryFav } }),
|
||
)
|
||
|
||
// image 级收藏态：以服务端 favorited 为准重建 favIds（覆盖 initImageFavs 的本地初值）
|
||
const favIds: string[] = []
|
||
const mark = (im: any) => { if (im && im.id && im.favorited) favIds.push(im.id) }
|
||
|
||
// 超预览上限才追加第 6 张起图片（前 5 张已由 SSR 渲染，仅补收藏态）
|
||
if (this.preview) {
|
||
this.extraImages = (full.images || []).slice(5).map((im: any) => ({
|
||
id: im.id || "",
|
||
url: toAbs(im.image || ""),
|
||
thumb: toAbs(im.thumb || im.image || ""),
|
||
raw: im.image || "",
|
||
name: im.name || "",
|
||
lookIndex: Number(im.look_index ?? 0),
|
||
}))
|
||
await this.$nextTick()
|
||
this.imageCount = document.querySelectorAll(
|
||
"#article-gallery [data-image-index]"
|
||
).length
|
||
;(full.images || []).slice(5).forEach(mark)
|
||
this.initThumbLazyLoading()
|
||
this.maybeLocateImageFromUrl()
|
||
}
|
||
// 前 5 张收藏态
|
||
;(full.images || []).slice(0, 5).forEach(mark)
|
||
this.favIds = favIds
|
||
} catch {
|
||
/* 失败维持本地/截断态，门禁仍在 */
|
||
}
|
||
},
|
||
|
||
// ?img=<图片uid> 深链：个人中心点单图收藏 → 打开所属图集并滚动定位到该图。
|
||
// 默认只定位 + 短暂高亮，不弹灯箱（不打断浏览）；显式带 &lb=1 才自动开灯箱。
|
||
maybeLocateImageFromUrl() {
|
||
if (typeof window === "undefined") return
|
||
const q = new URLSearchParams(window.location.search)
|
||
const want = q.get("img")
|
||
if (!want) return
|
||
const figures = Array.from(
|
||
document.querySelectorAll<HTMLElement>("#article-gallery [data-fav-id]"),
|
||
)
|
||
const idx = figures.findIndex((el) => el.dataset.favId === want)
|
||
if (idx < 0) return
|
||
const fig = figures[idx] as HTMLElement
|
||
requestAnimationFrame(() => {
|
||
if (q.get("lb") === "1") {
|
||
this.openLb(idx)
|
||
return
|
||
}
|
||
fig.scrollIntoView({ behavior: "smooth", block: "center" })
|
||
fig.classList.add("locate-flash")
|
||
setTimeout(() => fig.classList.remove("locate-flash"), 2600)
|
||
})
|
||
},
|
||
|
||
getImageElement(index: number) {
|
||
return document.querySelector<HTMLElement>(
|
||
`#article-gallery [data-image-index="${index}"]`
|
||
)
|
||
},
|
||
|
||
getImageUrl(index: number) {
|
||
return this.getImageElement(index)?.dataset.imageUrl || ""
|
||
},
|
||
|
||
getImageName(index: number) {
|
||
return this.getImageElement(index)?.dataset.imageName || ""
|
||
},
|
||
|
||
getImageFavId(index: number) {
|
||
return this.getImageElement(index)?.dataset.favId || ""
|
||
},
|
||
|
||
// 收藏用的图地址：读 figure 上的相对路径（存库时不带宿主）
|
||
getImageFavUrl(index: number) {
|
||
return this.getImageElement(index)?.dataset.favUrl || ""
|
||
},
|
||
|
||
// 读第 index 张大图所属的主图序号（look_index），来自 figure 上的 data-look-index。
|
||
// SSR 首屏图与客户端补拉的 extraImages 都带该属性，故大图灯箱里也能定位到当前 look。
|
||
getImageLookIndex(index: number): number {
|
||
const li = Number(this.getImageElement(index)?.dataset.lookIndex ?? 0)
|
||
return Number.isFinite(li) ? li : 0
|
||
},
|
||
|
||
// 当前大图所属 look 的细节图列表：供大图灯箱右下角那一簇缩略图直接渲染。
|
||
// 依赖响应式的 lbIndex，切图/翻页时自动跟随；该 look 没有细节图时返回空数组（整簇隐藏）。
|
||
get currentDetailList(): { id: string; url: string; thumb: string; raw: string; name: string }[] {
|
||
const li = this.getImageLookIndex(this.lbIndex)
|
||
return li ? (this.detailImagesByLook[li] || []) : []
|
||
},
|
||
|
||
// 点大图灯箱里的细节缩略图：先关大图灯箱（二者同为 z-[100]，避免叠层），
|
||
// 再打开细节灯箱并定位到该 look 的第 idx 张细节图。
|
||
// 记下来源与当前位置，使细节灯箱关闭时能「退回主图」而不是直接掉回图集网格。
|
||
openDetailLbAt(idx: number) {
|
||
const li = this.getImageLookIndex(this.lbIndex)
|
||
const list = this.detailImagesByLook[li]
|
||
if (!list || !list.length) return
|
||
this.detailLbFromLb = true
|
||
this.lbReturnIndex = this.lbIndex
|
||
this.closeLb()
|
||
this.openDetailLb(li, idx, true)
|
||
},
|
||
|
||
// ===== 单图收藏 =====
|
||
// 只把「当前这篇图集的全部图片 id」发给后端问哪些已收藏，
|
||
// 复杂度与图片数成正比，与用户收藏总量无关。
|
||
allImageFavIds(): string[] {
|
||
return Array.from(
|
||
document.querySelectorAll<HTMLElement>("#article-gallery [data-fav-id]"),
|
||
)
|
||
.map((el) => el.dataset.favId || "")
|
||
.filter(Boolean)
|
||
},
|
||
|
||
// 本地即时填充收藏态（未登录态，或登录态加载服务端数据前的占位，避免爱心闪烁）。
|
||
// 登录态的服务端校正已合并进 loadAuthedState()，不再单独请求 /me/favorites/checks。
|
||
initImageFavs() {
|
||
const ids = this.allImageFavIds()
|
||
if (!ids.length) return
|
||
this.favIds = ids.filter((id) => isFavorited(id))
|
||
},
|
||
|
||
isFav(id: string) {
|
||
return !!id && this.favIds.includes(id)
|
||
},
|
||
|
||
toggleFav(id: string, url: string) {
|
||
if (!id) return
|
||
toggleImageFavorite({
|
||
imageId: id,
|
||
type: this.favType === "snap_image" ? "snap_image" : "runway_image",
|
||
imageUrl: url,
|
||
parentUid: this.galleryUid,
|
||
title: this.galleryTitle,
|
||
brand: this.galleryBrand,
|
||
})
|
||
this.favIds = this.isFav(id)
|
||
? this.favIds.filter((x: string) => x !== id)
|
||
: [...this.favIds, id]
|
||
},
|
||
|
||
// 灯箱里的收藏按钮跟随当前大图
|
||
get currentFavId() {
|
||
return this.getImageFavId(this.lbIndex)
|
||
},
|
||
|
||
get currentFavUrl() {
|
||
return this.getImageFavUrl(this.lbIndex)
|
||
},
|
||
|
||
openLb(index = 0) {
|
||
if (!this.imageCount) return
|
||
|
||
this.lbIndex = this.normalizeIndex(index)
|
||
this.lbZoomed = false
|
||
this.lbOpen = true
|
||
|
||
document.body.style.overflow = "hidden"
|
||
|
||
this.updateLightboxImage()
|
||
|
||
requestAnimationFrame(() => {
|
||
this.scrollThumbIntoView()
|
||
this.preloadAround()
|
||
})
|
||
},
|
||
|
||
closeLb() {
|
||
this.lbOpen = false
|
||
this.lbZoomed = false
|
||
document.body.style.overflow = ""
|
||
},
|
||
|
||
showLb(index: number) {
|
||
if (!this.imageCount) return
|
||
|
||
this.lbIndex = this.normalizeIndex(index)
|
||
this.lbZoomed = false
|
||
|
||
this.updateLightboxImage()
|
||
|
||
const main = document.getElementById("lb-main")
|
||
|
||
if (main) {
|
||
main.scrollTop = 0
|
||
}
|
||
|
||
requestAnimationFrame(() => {
|
||
this.scrollThumbIntoView()
|
||
this.preloadAround()
|
||
})
|
||
},
|
||
|
||
nextLb() {
|
||
this.showLb(this.lbIndex + 1)
|
||
},
|
||
|
||
prevLb() {
|
||
this.showLb(this.lbIndex - 1)
|
||
},
|
||
|
||
normalizeIndex(index: number) {
|
||
if (!this.imageCount) return 0
|
||
return ((index % this.imageCount) + this.imageCount) % this.imageCount
|
||
},
|
||
|
||
updateLightboxImage() {
|
||
const image = document.getElementById("lb-image") as HTMLImageElement | null
|
||
|
||
if (!image) return
|
||
|
||
const url = this.getImageUrl(this.lbIndex)
|
||
const name = this.getImageName(this.lbIndex)
|
||
|
||
image.src = url
|
||
image.alt = name
|
||
this.currentImageName = name
|
||
},
|
||
|
||
toggleZoom() {
|
||
this.lbZoomed = !this.lbZoomed
|
||
|
||
const main = document.getElementById("lb-main")
|
||
|
||
if (main) {
|
||
main.scrollTop = 0
|
||
}
|
||
},
|
||
|
||
scrollThumbIntoView() {
|
||
const thumbs = document.getElementById("lb-thumbs") as HTMLElement | null
|
||
|
||
if (!thumbs) return
|
||
|
||
const active = thumbs.querySelector<HTMLElement>(
|
||
`[data-lb-index="${this.lbIndex}"]`
|
||
)
|
||
|
||
if (!active) return
|
||
|
||
const target =
|
||
active.offsetTop -
|
||
(thumbs.clientHeight - active.clientHeight) / 2
|
||
|
||
thumbs.scrollTo({
|
||
top: Math.max(0, target),
|
||
behavior: "smooth",
|
||
})
|
||
},
|
||
|
||
preloadAround() {
|
||
const indexes = [
|
||
this.lbIndex,
|
||
this.normalizeIndex(this.lbIndex - 1),
|
||
this.normalizeIndex(this.lbIndex + 1),
|
||
]
|
||
|
||
indexes.forEach((index: number) => {
|
||
const url = this.getImageUrl(index)
|
||
|
||
if (!url) return
|
||
|
||
const image = new Image()
|
||
image.decoding = "async"
|
||
image.src = url
|
||
})
|
||
},
|
||
|
||
// ===== 每行张数（密度） =====
|
||
// 只有 3 / 5 两档（工具栏图标按钮切换）；移动端固定 2 列（5 列在手机上不可用）。
|
||
// 基础 grid-cols-2 与两个 md:grid-cols-* 字面量都出现在源码里，确保 Tailwind v4 JIT 能扫描到。
|
||
gridClass() {
|
||
return "grid-cols-2 " + (this.density === 5 ? "md:grid-cols-5" : "md:grid-cols-3")
|
||
},
|
||
|
||
// ===== 细节图分组 =====
|
||
// 由根节点 data-details（后端按 look_index 聚合的细节图 JSON）构建 look_index -> 图片数组映射。
|
||
buildDetailMap() {
|
||
try {
|
||
const raw = this.$el.dataset.details
|
||
const arr: any[] = raw ? JSON.parse(raw) : []
|
||
const map: Record<number, { id: string; url: string; thumb: string; raw: string; name: string }[]> = {}
|
||
for (const d of arr) {
|
||
const li = Number(d.look_index ?? 0)
|
||
if (!li) continue
|
||
map[li] = (d.images || []).map((im: any) => ({
|
||
id: im.id || "",
|
||
url: toAbs(im.image || ""),
|
||
thumb: toAbs(im.thumb || im.image || ""),
|
||
raw: im.image || "",
|
||
name: im.name || "",
|
||
}))
|
||
}
|
||
this.detailImagesByLook = map
|
||
} catch {
|
||
this.detailImagesByLook = {}
|
||
}
|
||
},
|
||
|
||
// 网格角标用：某主图（look_index）的细节图数量。无细节图返回 0。
|
||
detailCount(li: number): number {
|
||
const arr = this.detailImagesByLook[Number(li) || 0]
|
||
return arr ? arr.length : 0
|
||
},
|
||
|
||
// 打开细节灯箱，展示该 look 的细节图。startIndex 指定起始张（默认第 1 张）——
|
||
// 大图灯箱里点第 N 张细节缩略图时按 N 打开，避免总是回到第一张。
|
||
// fromLb=true 表示由大图灯箱进入（关闭时退回主图）；false 表示从网格角标直接进（关闭回网格）。
|
||
openDetailLb(li: number, startIndex = 0, fromLb = false) {
|
||
const list = this.detailImagesByLook[li]
|
||
if (!list || !list.length) return
|
||
this.detailLbFromLb = fromLb
|
||
this.detailImages = list
|
||
this.detailLbIndex = this.normalizeDetailIndex(startIndex)
|
||
this.detailLbZoomed = false
|
||
this.detailLbOpen = true
|
||
document.body.style.overflow = "hidden"
|
||
this.updateDetailImage()
|
||
requestAnimationFrame(() => {
|
||
this.scrollDetailThumbIntoView()
|
||
this.preloadDetailAround()
|
||
})
|
||
},
|
||
|
||
// 关闭细节灯箱。若它是从主图大图灯箱进来的，则「退回主图」——重新打开大图灯箱并回到原来的图片序号；
|
||
// 否则（未来若有其它入口）才是真正关闭、恢复页面滚动。
|
||
closeDetailLb() {
|
||
this.detailLbOpen = false
|
||
this.detailLbZoomed = false
|
||
if (this.detailLbFromLb) {
|
||
this.detailLbFromLb = false
|
||
this.openLb(this.lbReturnIndex)
|
||
return
|
||
}
|
||
document.body.style.overflow = ""
|
||
},
|
||
|
||
showDetailLb(index: number) {
|
||
if (!this.detailImages.length) return
|
||
this.detailLbIndex = this.normalizeDetailIndex(index)
|
||
this.detailLbZoomed = false
|
||
this.updateDetailImage()
|
||
const main = document.getElementById("detail-lb-main")
|
||
if (main) main.scrollTop = 0
|
||
requestAnimationFrame(() => {
|
||
this.scrollDetailThumbIntoView()
|
||
this.preloadDetailAround()
|
||
})
|
||
},
|
||
|
||
nextDetailLb() { this.showDetailLb(this.detailLbIndex + 1) },
|
||
prevDetailLb() { this.showDetailLb(this.detailLbIndex - 1) },
|
||
|
||
normalizeDetailIndex(index: number) {
|
||
const n = this.detailImages.length
|
||
if (!n) return 0
|
||
return ((index % n) + n) % n
|
||
},
|
||
|
||
updateDetailImage() {
|
||
const image = document.getElementById("detail-lb-image") as HTMLImageElement | null
|
||
if (!image) return
|
||
image.src = this.detailImageUrl(this.detailLbIndex)
|
||
image.alt = this.detailImageName(this.detailLbIndex)
|
||
this.currentDetailName = this.detailImageName(this.detailLbIndex)
|
||
},
|
||
|
||
detailImageUrl(index: number): string {
|
||
return this.detailImages[index]?.url || ""
|
||
},
|
||
|
||
detailImageName(index: number): string {
|
||
return this.detailImages[index]?.name || ""
|
||
},
|
||
|
||
get currentDetailFavId() { return this.detailImages[this.detailLbIndex]?.id || "" },
|
||
get currentDetailFavUrl() { return this.detailImages[this.detailLbIndex]?.raw || "" },
|
||
|
||
toggleDetailZoom() {
|
||
this.detailLbZoomed = !this.detailLbZoomed
|
||
const main = document.getElementById("detail-lb-main")
|
||
if (main) main.scrollTop = 0
|
||
},
|
||
|
||
scrollDetailThumbIntoView() {
|
||
const thumbs = document.getElementById("detail-lb-thumbs") as HTMLElement | null
|
||
if (!thumbs) return
|
||
const children = Array.from(thumbs.querySelectorAll<HTMLElement>("button"))
|
||
const el = children[this.detailLbIndex]
|
||
if (!el) return
|
||
const target = el.offsetTop - (thumbs.clientHeight - el.clientHeight) / 2
|
||
thumbs.scrollTo({ top: Math.max(0, target), behavior: "smooth" })
|
||
},
|
||
|
||
preloadDetailAround() {
|
||
const indexes = [
|
||
this.detailLbIndex,
|
||
this.normalizeDetailIndex(this.detailLbIndex - 1),
|
||
this.normalizeDetailIndex(this.detailLbIndex + 1),
|
||
]
|
||
indexes.forEach((index: number) => {
|
||
const url = this.detailImageUrl(index)
|
||
if (!url) return
|
||
const image = new Image()
|
||
image.decoding = "async"
|
||
image.src = url
|
||
})
|
||
},
|
||
|
||
// TODO 这是干啥的
|
||
initThumbLazyLoading() {
|
||
const thumbs = document.querySelectorAll<HTMLElement>(
|
||
"#lb-thumbs [data-thumb-url]"
|
||
)
|
||
|
||
if (!thumbs.length) return
|
||
|
||
if (!("IntersectionObserver" in window)) {
|
||
thumbs.forEach((thumb) => {
|
||
thumb.style.backgroundImage =
|
||
`url("${thumb.dataset.thumbUrl}")`
|
||
})
|
||
return
|
||
}
|
||
|
||
const observer = new IntersectionObserver(
|
||
(entries, obs) => {
|
||
entries.forEach((entry) => {
|
||
if (!entry.isIntersecting) return
|
||
|
||
const element = entry.target as HTMLElement
|
||
const url = element.dataset.thumbUrl
|
||
|
||
if (url) {
|
||
element.style.backgroundImage = `url("${url}")`
|
||
}
|
||
|
||
obs.unobserve(element)
|
||
})
|
||
},
|
||
{
|
||
root: document.getElementById("lb-thumbs"),
|
||
rootMargin: "300px",
|
||
}
|
||
)
|
||
|
||
thumbs.forEach((thumb) => observer.observe(thumb))
|
||
},
|
||
}))
|
||
})
|
||
</script>
|
||
|
||
<style>
|
||
[x-cloak] {
|
||
display: none !important;
|
||
}
|
||
|
||
.no-scrollbar::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.no-scrollbar {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
/* 单图收藏爱心：默认描边，已收藏实心 */
|
||
.fav-btn svg {
|
||
fill: none;
|
||
}
|
||
.fav-btn.is-fav svg {
|
||
fill: currentColor;
|
||
}
|
||
|
||
/* ?img= 深链定位提示：短暂黑色描边闪烁 */
|
||
.locate-flash {
|
||
outline: 3px solid #111;
|
||
outline-offset: 4px;
|
||
}
|
||
|
||
/* 触屏没有 hover，收藏按钮常驻显示，否则永远点不到 */
|
||
@media (hover: none) {
|
||
.fav-btn {
|
||
opacity: 1 !important;
|
||
}
|
||
}
|
||
</style> |