toom1996/frontend_v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
toom1996
2026-09-13 00:49:42 +08:00
parent 19fb597bb4
commit c85c561a99
19 changed files with 552 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

573
src/components/Item.astro
View File

@ -1,6 +1,5 @@
---
import type { RawArticle } from "@/lib/api"
import Breadcrumb from "@/components/Breadcrumb.astro"
import { getI18n } from "@/i18n/utils"
import { href, ROUTES } from '@/lib/routes'
import { ssrBase } from "@/lib/api"
@ -21,15 +20,30 @@ const full = (u: string): string => {
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 张图片；其余由登录门禁提示，
// 已登录（客户端 loadFull 拉全量）或图片本就不超上限时全部展示。前 PREVIEW_LIMIT 张服务端已渲染（SEO/无 JS 友好）。
const PREVIEW_LIMIT = 5
@ -45,21 +59,6 @@ const descParas = (article?.description || "")
.filter(Boolean)
const homeHref = href(locale, ROUTES.home)
const archiveHref = href(locale, ROUTES.shows)
const crumbs: { label: string; href: string }[] = [
// {
// label: t("Runway looks"),
// href: archiveHref,
// },
]
if (article?.brand_id) {
crumbs.push({
label: article.brand_name || "Brand",
href: `${archiveHref}?brand_id=${article.brand_id}`,
})
}
---
<div
@ -70,30 +69,72 @@ if (article?.brand_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">
{/* <Breadcrumb items={crumbs}>
<span slot="current" class="max-w-[60vw] truncate">
{article.title}
</span>
</Breadcrumb> */}
<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 grid-cols-2 md:grid-cols-3 gap-4"
class="grid gap-4"
:class="gridClass()"
>
{previewImages.map((im, i) => (
{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}
@ -106,7 +147,7 @@ if (article?.brand_id) {
alt={im.name}
loading={i < 6 ? "eager" : "lazy"}
decoding="async"
class="w-full aspect-[3/4] object-cover group-hover:opacity-90 transition-opacity"
class="w-full aspect-[2/3] object-cover group-hover:opacity-90 transition-opacity"
/>
{/* 单图收藏：hover 显示，已收藏常驻实心 */}
@ -125,13 +166,26 @@ if (article?.brand_id) {
</svg>
</button>
{im.name && (
<figcaption class="text-[11px] font-mono uppercase tracking-widest text-[#999] mt-2">
{im.name}
</figcaption>
{/* 细节图数量角标：有细节图的主图在左下角标注「张数」（图层图标 + 数字），
点它直接开细节灯箱。纯主图（无细节图）不显示任何角标，保持网格干净。 */}
{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 真实图替补。 */}
@ -144,7 +198,7 @@ if (article?.brand_id) {
class="relative bg-[#f2f2f2] cursor-pointer group overflow-hidden"
>
{/* 与真实图片等高的 3:4 图位：锁图标 + 提示，点击跳登录 */}
<div class="w-full aspect-[3/4] flex items-center justify-center text-[#c4c4c4] group-hover:text-[#9a9a9a] transition-colors pointer-events-none">
<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" />
@ -153,9 +207,9 @@ if (article?.brand_id) {
<span class="text-[10px] font-mono uppercase tracking-[0.18em]">{t('login to view')}</span>
</div>
</div>
{/* 与真实图 figcaption 同高的 caption 行（正常图显示 look01 等小字）：
占位显示 +N photos，保证遮罩格子与真实图片格子总高一致 */}
<figcaption class="text-[11px] font-mono uppercase tracking-widest text-[#cfcfcf] mt-2">+{lockedCount} {t('photos')}</figcaption>
{/* 真实图已无 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>
))
}
@ -164,6 +218,7 @@ if (article?.brand_id) {
<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"
@ -176,8 +231,9 @@ if (article?.brand_id) {
:alt="im.name"
loading="lazy"
decoding="async"
class="w-full aspect-[3/4] object-cover group-hover:opacity-90 transition-opacity"
class="w-full aspect-[2/3] object-cover group-hover:opacity-90 transition-opacity"
/>
<button
login-required
type="button"
@ -192,9 +248,20 @@ if (article?.brand_id) {
<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>
<template x-if="im.name">
<figcaption class="text-[11px] font-mono uppercase tracking-widest text-[#999] mt-2" x-text="im.name"></figcaption>
</template>
{/* 细节图数量角标：有细节图的主图左下角标「张数」，点它直接开细节灯箱（与首屏图一致） */}
<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>
@ -229,15 +296,16 @@ if (article?.brand_id) {
<div
x-show="lbOpen"
x-cloak
@keydown.window.escape="closeLb()"
@keydown.window.arrow-right="nextLb()"
@keydown.window.arrow-left="prevLb()"
@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 font-mono text-[12px] font-semibold tracking-[0.14em] text-[#111] bg-white/75 border border-black/10 px-3 py-1.5 rounded-[6px] backdrop-blur-md"
x-text="`${lbIndex + 1} / ${imageCount}`"
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
@ -245,7 +313,7 @@ if (article?.brand_id) {
type="button"
@click.stop="toggleFav(currentFavId, currentFavUrl)"
:class="isFav(currentFavId) ? 'is-fav' : ''"
class="fav-btn absolute top-[18px] right-[70px] z-30 w-10 h-10 rounded-full border border-black/15 bg-white/75 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black/5 hover:border-black/30 transition-all cursor-pointer"
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">
@ -256,30 +324,30 @@ if (article?.brand_id) {
<button
type="button"
@click="closeLb()"
class="absolute top-[18px] right-[18px] z-30 w-10 h-10 rounded-full border border-black/15 bg-white/75 text-[#111] flex items-center justify-center backdrop-blur-md hover:bg-black/5 hover:border-black/30 transition-all cursor-pointer"
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 bg-gradient-to-b from-black/5 to-transparent no-scrollbar"
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.url}
data-thumb-url={im.thumb}
@click={`showLb(${i})`}
class="lb-thumb relative block w-full aspect-[3/4] mb-2 rounded-[2px] overflow-hidden cursor-pointer transition-all duration-200 opacity-40 hover:opacity-85 bg-[#eee] bg-cover bg-center"
x-bind:class="lbIndex === Number($el.dataset.lbIndex)
? 'opacity-100 scale-[1.03] ring-2 ring-[#111]'
: ''"
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 font-mono text-[8px] sm:text-[9px] font-semibold tracking-widest text-white px-1 py-0.5 rounded-[3px] bg-black/55 backdrop-blur-sm">
<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>
@ -289,15 +357,13 @@ if (article?.brand_id) {
<button
type="button"
:data-lb-index="5 + i"
:data-thumb-url="im.url"
:data-thumb-url="im.thumb"
@click="showLb(5 + i)"
class="lb-thumb relative block w-full aspect-[3/4] mb-2 rounded-[2px] overflow-hidden cursor-pointer transition-all duration-200 opacity-40 hover:opacity-85 bg-[#eee] bg-cover bg-center"
x-bind:class="lbIndex === Number($el.dataset.lbIndex)
? 'opacity-100 scale-[1.03] ring-2 ring-[#111]'
: ''"
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 font-mono text-[8px] sm:text-[9px] font-semibold tracking-widest text-white px-1 py-0.5 rounded-[3px] bg-black/55 backdrop-blur-sm" x-text="String(5 + i + 1).padStart(2, '0')"></span>
<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>
@ -305,7 +371,7 @@ if (article?.brand_id) {
<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/80 rounded-[6px] backdrop-blur-md flex items-center justify-center text-[#111] hover:bg-black/5 transition-all cursor-pointer"
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">
@ -316,7 +382,7 @@ if (article?.brand_id) {
<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/80 rounded-[6px] backdrop-blur-md flex items-center justify-center text-[#111] hover:bg-black/5 transition-all cursor-pointer"
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">
@ -327,7 +393,7 @@ if (article?.brand_id) {
<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 rounded-full border border-black/15 bg-white/75 text-[#111] flex items-center justify-center backdrop-blur-md hover:scale-105 hover:border-black/30 transition-all cursor-pointer"
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">
@ -338,11 +404,11 @@ if (article?.brand_id) {
<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 rounded-full border border-black/15 bg-white/75 text-[#111] flex items-center justify-center backdrop-blur-md hover:scale-105 hover:border-black/30 transition-all cursor-pointer"
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" />
<path d="M9 6l6 6-6 6" />
</svg>
</button>
@ -369,48 +435,156 @@ if (article?.brand_id) {
</div>
<div
class="absolute left-0 right-0 bottom-11 z-20 text-center text-black/60 font-mono text-[11px] uppercase tracking-[0.18em] pointer-events-none px-6"
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 text-center text-black/45 font-mono text-[11px] tracking-[0.14em] pointer-events-none px-6 transition-opacity duration-200"
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>
// type ArticleView = {
// lbOpen: boolean
// lbIndex: number
// lbZoomed: boolean
// touchStartX: number
// touchStartY: number
// imageCount: number
// currentImageName: string
// init(): void
// getImageElement(index: number): HTMLElement | null
// getImageUrl(index: number): string
// getImageName(index: number): string
// openLb(index?: number): void
// closeLb(): void
// showLb(index: number): void
// nextLb(): void
// prevLb(): void
// normalizeIndex(index: number): number
// updateLightboxImage(): void
// toggleZoom(): void
// scrollThumbIntoView(): void
// preloadAround(): void
// initThumbLazyLoading(): void
// handleTouchStart(event: TouchEvent): void
// handleTouchEnd(event: TouchEvent): void
// }
import { getUser, getArticleDetailAuthed, toAbs } from "@/lib/api"
import { isFavorited, toggleImageFavorite, checkFavorited } from "@/lib/favorites"
@ -419,10 +593,9 @@ if (article?.brand_id) {
lbOpen: false,
lbIndex: 0,
lbZoomed: false,
touchStartX: 0,
touchStartY: 0,
imageCount: 0,
currentImageName: "",
currentDetailName: "",
// 单图收藏态：已收藏的图片 id 列表（本地即时 + 服务端校正）
favIds: [],
@ -437,8 +610,23 @@ if (article?.brand_id) {
// 未登录门禁：后端截断图片集时为 true（详情页最多看 PREVIEW_LIMIT 张）
preview: false,
// 已登录后客户端补拉的全量图片（前 PREVIEW_LIMIT 张已由 SSR 服务端渲染）
extraImages: [] as { id: string; url: string; raw: string; name: string }[],
showAll: false,
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"
@ -448,6 +636,9 @@ if (article?.brand_id) {
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
@ -472,26 +663,14 @@ if (article?.brand_id) {
const mapped = (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),
}))
this.extraImages = mapped
this.showAll = true
// VIP：前 PREVIEW_LIMIT 张是 SSR 静态渲染的普通样式图（SSR 无用户令牌，
// 后端回落 normal）。VIP 已登录后此处把首屏图也替换为高清原图（后端对 VIP 返回 HD URL），
// 否则 VIP 仅第 6 张起看高清，首屏仍是普通图，体验不一致。
const me = getUser()
if (me && me.tier === "vip") {
const hd = (full.images || []).slice(0, 5).map((im: any) => toAbs(im.image || ""))
hd.forEach((url: string, i: number) => {
if (!url) return
const fig = document.querySelector<HTMLElement>(`#article-gallery [data-image-index="${i}"]`)
if (!fig) return
fig.dataset.imageUrl = url
const img = fig.querySelector("img")
if (img) img.setAttribute("src", url)
})
}
// 后端详情接口对所有用户统一返回 high 高清样式（付费墙已取消），首屏图即为高清，
// 无需客户端再按 VIP 替换。仅把第 6 张起的图片追加进 extraImages 渲染。
await this.$nextTick()
this.imageCount = document.querySelectorAll(
"#article-gallery [data-image-index]"
@ -551,6 +730,33 @@ if (article?.brand_id) {
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」发给后端问哪些已收藏，
// 复杂度与图片数成正比，与用户收藏总量无关。
@ -719,6 +925,147 @@ if (article?.brand_id) {
})
},
// ===== 每行张数（密度） =====
// 只有 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>(