feat(backend): 商品公开页图集升级——滑动指示点 + 点击全屏灯箱

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JJ1g8XV1YhhmHRzhwWEW7o

backend/internal/handler/templates/public_product.html

@@ -39,8 +39,23 @@
     position:relative;background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;
   }
   .frame::after{content:"";position:absolute;inset:5px;border:1px solid rgba(154,107,47,.28);border-radius:3px;pointer-events:none;z-index:2;}
-  .gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
-  .gallery img{width:100%;flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;object-fit:contain;background:var(--card);display:block;}
+  .gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
+  .gallery::-webkit-scrollbar{display:none;}
+  .gallery img{width:100%;flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;object-fit:contain;background:var(--card);display:block;cursor:zoom-in;}
+  .dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;z-index:3;}
+  .dots i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:all .25s;}
+  .dots i.on{background:var(--wine);width:16px;border-radius:3px;}
+
+  /* 全屏灯箱：点图进入，滑动切换，点背景或 ✕ 退出 */
+  .lb{position:fixed;inset:0;z-index:99;background:rgba(24,18,14,.96);}
+  .lb[hidden]{display:none;}
+  .lb-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;height:100%;scrollbar-width:none;}
+  .lb-track::-webkit-scrollbar{display:none;}
+  .lb-track img{width:100vw;height:100%;flex:0 0 100vw;scroll-snap-align:center;object-fit:contain;}
+  .lb-x{position:absolute;top:16px;right:16px;z-index:2;width:38px;height:38px;border-radius:50%;
+    border:1px solid rgba(246,241,231,.4);background:rgba(24,18,14,.5);color:#F6F1E7;font-size:16px;cursor:pointer;}
+  .lb-n{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:rgba(246,241,231,.85);
+    font-size:12px;letter-spacing:.2em;font-family:ui-monospace,Menlo,monospace;}
   .placeholder{
     aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;
     gap:10px;color:var(--muted);font-size:12px;letter-spacing:.25em;
@@ -113,9 +128,10 @@
   <div class="hero">
     <div class="frame">
       {{if .Images}}
-      <div class="gallery">
+      <div class="gallery" id="gal">
         {{range $i, $img := .Images}}<img src="{{$img}}" alt="{{$.Name}}" decoding="async"{{if $i}} loading="lazy"{{end}}>{{end}}
       </div>
+      {{if gt (len .Images) 1}}<div class="dots">{{range .Images}}<i></i>{{end}}</div>{{end}}
       {{else}}
       <div class="placeholder">
         <svg viewBox="0 0 40 64" fill="none" stroke-width="1.4" stroke-linecap="round">
@@ -190,5 +206,35 @@
     <div>技术支持：<a class="brand" href="https://jiu.51yanmei.com">岩美科技</a> · <a class="icp" href="https://beian.miit.gov.cn" target="_blank" rel="noopener">京ICP备2026039814号</a></div>
   </footer>
 </div>
+{{if .Images}}
+<div class="lb" id="lb" hidden>
+  <button class="lb-x" id="lbx" aria-label="关闭">✕</button>
+  <div class="lb-track" id="lbt">
+    {{range .Images}}<img src="{{.}}" alt="" loading="lazy">{{end}}
+  </div>
+  <div class="lb-n" id="lbn"></div>
+</div>
+<script>
+(function(){
+  var gal=document.getElementById('gal'),lb=document.getElementById('lb'),
+      lbt=document.getElementById('lbt'),lbn=document.getElementById('lbn');
+  if(!gal||!lb)return;
+  var imgs=[].slice.call(gal.children),n=imgs.length,
+      dots=[].slice.call(document.querySelectorAll('.dots i'));
+  function idx(el){return Math.min(n-1,Math.round(el.scrollLeft/el.clientWidth));}
+  function paint(){var i=idx(gal);for(var k=0;k<dots.length;k++)dots[k].className=k===i?'on':'';}
+  if(dots.length){gal.addEventListener('scroll',function(){requestAnimationFrame(paint);},{passive:true});}
+  function num(){lbn.textContent=(idx(lbt)+1)+' / '+n;}
+  imgs.forEach(function(im,i){im.addEventListener('click',function(){
+    lb.hidden=false;document.body.style.overflow='hidden';
+    lbt.scrollLeft=lbt.clientWidth*i;num();
+  });});
+  lbt.addEventListener('scroll',function(){requestAnimationFrame(num);},{passive:true});
+  function close(){lb.hidden=true;document.body.style.overflow='';}
+  document.getElementById('lbx').addEventListener('click',close);
+  lb.addEventListener('click',function(e){if(e.target===lb||e.target===lbt)close();});
+})();
+</script>
+{{end}}
 </body>
 </html>