diff --git a/dev.log b/dev.log index 91c196a..11dbf1e 100644 Binary files a/dev.log and b/dev.log differ diff --git a/src/components/AuthModal.astro b/src/components/AuthModal.astro index 6766498..d5fe972 100644 --- a/src/components/AuthModal.astro +++ b/src/components/AuthModal.astro @@ -88,6 +88,9 @@ const fullLoginLabel = t('go to full login') }, close() { + // 未打开时直接返回：本函数的 ESC 监听挂在 window 上，页面里任何一次 ESC 都会调到它。 + // 若无条件清掉 body 滚动锁，会把别的浮层（图片灯箱等）的滚动锁一起抢掉。 + if (!this.isOpen) return this.isOpen = false this.pending = null this.error = "" diff --git a/src/components/BrandModal.astro b/src/components/BrandModal.astro index 27d3375..0150ebb 100644 --- a/src/components/BrandModal.astro +++ b/src/components/BrandModal.astro @@ -52,7 +52,6 @@ @@ -142,18 +141,12 @@ .showsmodal-name { @apply flex-1 truncate; } - .showsmodal-ct { - @apply text-[#999] text-[10px] ml-auto; - } .showsmodal-empty { @apply py-6 text-center text-[#999] text-[13px]; } .showsmodal-foot { @apply flex items-center justify-between px-4 py-3 border-t border-black/5 shrink-0 text-[11px] text-[#888]; } - .showsmodal-counter { - @apply tracking-[0.06em]; - } .showsmodal-ok { @apply appearance-none bg-black text-white border border-black px-4 py-1.5 cursor-pointer text-[12px] tracking-[0.1em] transition-colors hover:bg-black/85; } diff --git a/src/components/Breadcrumb.astro b/src/components/Breadcrumb.astro index 6b24684..109ec8b 100644 --- a/src/components/Breadcrumb.astro +++ b/src/components/Breadcrumb.astro @@ -1,5 +1,5 @@ --- -import { useTranslations, DEFAULT_LOCALE, type Locale, getI18n } from "@/i18n/utils"; +import { getI18n } from "@/i18n/utils"; interface Crumb { /** i18n key：英文原文，如 'Home' / 'Runway Archive'；中文环境自动取字典翻译 */ diff --git a/src/components/Index.astro b/src/components/Index.astro index ca7d91d..d67f5de 100644 --- a/src/components/Index.astro +++ b/src/components/Index.astro @@ -70,14 +70,6 @@ const streetItems: { src: string; loc: string; event: string; id: string }[] = s > Social Media - @@ -140,11 +132,6 @@ const streetItems: { src: string; loc: string; event: string; id: string }[] = s } - -
- -
-
@@ -203,13 +190,6 @@ const streetItems: { src: string; loc: string; event: string; id: string }[] = s /* 防闪烁标签 */ [x-cloak] { display: none !important; } - /* 区块标题 */ - .sec-head { @apply flex items-end justify-between mt-2 mb-6 pb-4 border-b border-[#ececec]; } - .sec-title { @apply font-serif text-[28px] leading-none font-extrabold text-[#111]; } - .sec-sub { @apply mt-2 text-[12px] uppercase tracking-[.14em] text-[#999] font-mono; } - .sec-more { @apply text-[12px] uppercase tracking-[.14em] font-bold no-underline text-[#111] transition-opacity duration-200; } - .sec-more:hover { @apply opacity-60; } - /* 横向画廊样式 */ .hs-section { @apply mb-9; } .hs-stage { @apply relative; } diff --git a/src/components/Item.astro b/src/components/Item.astro index 36931aa..d531f5c 100644 --- a/src/components/Item.astro +++ b/src/components/Item.astro @@ -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() +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}`, - }) -} ---
{ article ? (
- {/* - - {article.title} - - */} -

{article.title}

{previewImages.length > 0 && (
+ {/* 每行张数切换（应对图集图片很多的情况）：2/3/4/5 列，移动端固定 2 列 */} +
+ + {(imageTotal || images.length)} LOOKS + +
+ + {/* 每行张数切换：只有「3 张 / 5 张」两档，用竖条图标直观表达列数（避免文字数字按钮）。 + density 只影响 md+；移动端固定 2 列（5 列在手机上不可用）。 */} + + +
+
- {previewImages.map((im, i) => ( + {previewImages.map((im, i) => { + const dc = detailsByLook.get(im.lookIndex) || 0 + return (
{/* 单图收藏：hover 显示，已收藏常驻实心 */} @@ -125,13 +166,26 @@ if (article?.brand_id) { - {im.name && ( -
- {im.name} -
+ {/* 细节图数量角标：有细节图的主图在左下角标注「张数」（图层图标 + 数字）， + 点它直接开细节灯箱。纯主图（无细节图）不显示任何角标，保持网格干净。 */} + {dc > 0 && ( + )}
- ) )} + ) + })} {/* 未登录预览占位遮罩：补满「剩余 N 张」空图，提示用户登录后可见， 避免误以为图集只有预览上限那几张。已登录（x-show false）自动隐藏，由 extraImages 真实图替补。 */} @@ -144,7 +198,7 @@ if (article?.brand_id) { class="relative bg-[#f2f2f2] cursor-pointer group overflow-hidden" > {/* 与真实图片等高的 3:4 图位：锁图标 + 提示，点击跳登录 */} -
+
@@ -153,9 +207,9 @@ if (article?.brand_id) { {t('login to view')}
- {/* 与真实图 figcaption 同高的 caption 行（正常图显示 look01 等小字）： - 占位显示 +N photos，保证遮罩格子与真实图片格子总高一致 */} -
+{lockedCount} {t('photos')}
+ {/* 真实图已无 look 序号 caption，占位格也改为绝对定位的 +N photos， + 不撑高格子，保证遮罩格与真实图片格总高一致 */} + +{lockedCount} {t('photos')} )) } @@ -164,6 +218,7 @@ if (article?.brand_id) {
@@ -229,15 +296,16 @@ if (article?.brand_id) { @@ -305,7 +371,7 @@ if (article?.brand_id) {
{t('Click image to zoom · Scroll to view · Esc to close')}
+ + {/* 当前 look 的细节图：右下角一小簇缩略图（竖版主图右下角本就是空白，不遮挡主图）。 + 主图放大（lbZoomed）时整簇隐藏——放大态要专注当前大图；点其中一张进细节灯箱看大图。 + 单个 look 最多 4 张细节图（多数 1~2 张），一排横放即可，不设滚动条。 */} +
+ Details +
+ +
+
+
+ )} + + {/* ===== 细节图灯箱：点大图灯箱里的细节缩略图打开，单张细节图放大查看 ===== */} + {article && previewImages.length > 0 && ( + )}