update

src/components/StreetSnapCard.astro

@@ -1,6 +1,9 @@
 ---
 import type { RawStreetSnap } from "@/lib/api"
 import GalleryLightbox from "@/components/GalleryLightbox.astro"
+import DetailCountBadge from "@/components/DetailCountBadge.astro"
+import GalleryDetailLightbox from "@/components/GalleryDetailLightbox.astro"
+import LbDetailsStrip from "@/components/LbDetailsStrip.astro"
 import { getI18n } from "@/lib/i18n"
 import { href, ROUTES } from '@/lib/routes'
 import { ssrAbs } from "@/lib/request"
@@ -23,6 +26,7 @@ const images = (snap?.images ?? [])
     thumb: ssrAbs(im.thumb || im.image || ""),
     raw: im.image || "", // 相对路径：收藏快照存相对地址，不把宿主/端口写死进库
     name: im.name || "",
+    lookIndex: Number(im.look_index ?? 0),
   }))
   .filter((im) => im.url)
 
@@ -35,6 +39,12 @@ const previewImages = images.slice(0, PREVIEW_LIMIT)
 // 已登录（preview=false）或图片本就不超上限时 lockedCount=0，不渲染占位。
 const lockedCount = preview ? Math.max(0, (imageTotal || 0) - previewImages.length) : 0
 
+// 递给浏览器端 Alpine 的副图数据：只序列化「带副图的主图」投影（look_index + detail），
+// 供 lib/galleryDetail.ts 构建 look_index → 副图 映射（与登录后完整 images 同构解析）。
+const detailPayload = (snap?.images ?? [])
+  .filter((im) => (im.detail?.length ?? 0) > 0)
+  .map((im) => ({ look_index: Number(im.look_index ?? 0), detail: im.detail }))
+
 const homeHref = href(locale, ROUTES.home)
 
 // theimpression 标题含字面 \t：地点 \t 场次，列表/详情统一以 " · " 呈现
@@ -49,6 +59,7 @@ const displayTitle = (snap?.title || "").replace(/\t/g, " · ")
   data-gallery-title={displayTitle}
   data-gallery-brand=""
   data-preview={preview ? "true" : "false"}
+  data-details={JSON.stringify(detailPayload)}
   class="min-h-screen bg-white text-black font-sans selection:bg-black selection:text-white"
 >
   {
@@ -67,6 +78,7 @@ const displayTitle = (snap?.title || "").replace(/\t/g, " · ")
               {previewImages.map((im, i) => (
                 <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}
@@ -98,6 +110,9 @@ const displayTitle = (snap?.title || "").replace(/\t/g, " · ")
                     </svg>
                   </button>
 
+                  {/* 副图数量角标（共享组件）：有副图的主图左下角标「张数」，点它开副图灯箱 */}
+                  <DetailCountBadge look={String(im.lookIndex)} />
+
                   {im.name && (
                     <figcaption class="text-[11px] uppercase tracking-widest text-[var(--c-gray-600)] mt-2">
                       {im.name}
@@ -137,6 +152,7 @@ const displayTitle = (snap?.title || "").replace(/\t/g, " · ")
               <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"
@@ -165,6 +181,7 @@ const displayTitle = (snap?.title || "").replace(/\t/g, " · ")
                       <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>
+                  <DetailCountBadge look="im.lookIndex" />
                   <template x-if="im.name">
                     <figcaption class="text-[11px] uppercase tracking-widest text-[var(--c-gray-600)] mt-2" x-text="im.name"></figcaption>
                   </template>
@@ -193,33 +210,33 @@ const displayTitle = (snap?.title || "").replace(/\t/g, " · ")
   }
 
   {/* 大图灯箱：与走秀详情共用 components/GalleryLightbox.astro（标记）+ lib/gallery.ts（交互）。
-      街拍无细节图分组，故不传 details 插槽。 */}
+      当前主图的副图经 details 插槽注入（与走秀一致）。 */}
   {snap && previewImages.length > 0 && (
-    <GalleryLightbox images={previewImages} aspect="3/4" />
+    <GalleryLightbox images={previewImages} aspect="3/4">
+      <LbDetailsStrip slot="details" />
+    </GalleryLightbox>
   )}
+  {/* 副图（细节）灯箱：点大图灯箱右下角的副图缩略图打开 */}
+  {snap && previewImages.length > 0 && <GalleryDetailLightbox />}
 </div>
 
 <script>
   import { getStreetSnapDetailAuthed } from "@/lib/api"
   import { createGalleryView } from "@/lib/gallery"
+  import { createDetailGallery } from "@/lib/galleryDetail"
 
-  // 图集 + 大图灯箱的共享逻辑全在 lib/gallery.ts；街拍详情没有额外扩展，只补一个 init 调共享初始化。
-  // 回调显式标注返回类型：对象展开会让 Alpine.data 的泛型 T 退化成 {}，this.xxx 全部报错（见 RunwayLookCard.astro 说明）。
+  // 街拍详情：与走秀共用「图集 + 大图灯箱 + 细节（副图）灯箱」
+  // （lib/gallery.ts + lib/galleryDetail.ts），无额外扩展。
   document.addEventListener("alpine:init", () => {
-    Alpine.data(
-      "streetSnapView",
-      (): ReturnType<typeof createGalleryView> & { init(): void } => ({
-        ...createGalleryView({
+    Alpine.data("streetSnapView", () =>
+      createDetailGallery(
+        createGalleryView({
           rootSelector: "#street-snap-view",
           gallerySelector: "#snap-gallery",
           favType: "snap_image",
           fetchDetail: getStreetSnapDetailAuthed,
         }),
-
-        init() {
-          this.galleryInit()
-        },
-      }),
+      ),
     )
   })
 </script>