From c98b1d8ebeb7ba5e0dec82083fa2987d9b9ec112 Mon Sep 17 00:00:00 2001
From: kushidou <kushidou@small09.top>
Date: Sat, 18 Jul 2026 21:00:34 +0800
Subject: [PATCH] feat: add image lightbox and simplify alt option display to
 model only

---
 index.html | 70 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 67 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 3bbf9d2..b9174c2 100644
--- a/index.html
+++ b/index.html
@@ -139,6 +139,12 @@ body {
   object-fit: contain;
   background: #f5f5f5;
   border: 1px solid #eee;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.cell-img:hover {
+  transform: scale(1.05);
 }
 
 .cell-img-placeholder {
@@ -431,6 +437,47 @@ body {
 
 .import-box p { margin-bottom: 16px; color: #666; }
 
+/* Lightbox */
+.lightbox {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.85);
+  z-index: 2000;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.lightbox.active { display: flex; }
+
+.lightbox img {
+  max-width: 90vw;
+  max-height: 90vh;
+  border-radius: 8px;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
+}
+
+.lightbox-close {
+  position: absolute;
+  top: 20px;
+  right: 24px;
+  background: rgba(255,255,255,0.2);
+  border: none;
+  color: #fff;
+  font-size: 28px;
+  cursor: pointer;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s;
+}
+
+.lightbox-close:hover { background: rgba(255,255,255,0.3); }
+
 /* Responsive */
 @media (max-width: 768px) {
   .container { padding: 12px; }
@@ -570,6 +617,12 @@ body {
   </div>
 </div>
 
+<!-- Lightbox -->
+<div class="lightbox" id="lightbox" onclick="closeLightbox()">
+  <button class="lightbox-close">&times;</button>
+  <img id="lightboxImg" src="" alt="">
+</div>
+
 <script>
 // ========== State ==========
 let config = { configName: 'PC装机配置表', components: [] };
@@ -626,7 +679,7 @@ function render() {
     if (!opt) return '';
 
     const imgCell = opt.image
-      ? `<img class="cell-img" src="${opt.image}" alt="${opt.model}" onerror="this.outerHTML='<div class=\\'cell-img-placeholder\\'> </div>'">`
+      ? `<img class="cell-img" src="${opt.image}" alt="${opt.model}" onclick="openLightbox('${opt.image.replace(/'/g, "\\'")}', '${opt.model.replace(/'/g, "\\'")}')" onerror="this.outerHTML='<div class=\\'cell-img-placeholder\\'> </div>'">`
       : '<div class="cell-img-placeholder"> </div>';
 
     const linkCell = opt.link
@@ -639,7 +692,7 @@ function render() {
         <div class="alt-options">
           ${comp.options.map((o, j) => `
             <button class="alt-pill ${j === selectedIdx ? 'active' : ''}" onclick="selectAlt(${i}, ${j})">
-              ${o.brand} ${o.model} ¥${o.price}
+              ${o.model}
             </button>
           `).join('')}
         </div>
@@ -929,9 +982,20 @@ function closeConfirm() {
   document.getElementById('confirmModal').classList.remove('active');
 }
 
+// ========== Lightbox ==========
+function openLightbox(src, alt) {
+  document.getElementById('lightboxImg').src = src;
+  document.getElementById('lightboxImg').alt = alt || '';
+  document.getElementById('lightbox').classList.add('active');
+}
+
+function closeLightbox() {
+  document.getElementById('lightbox').classList.remove('active');
+}
+
 // ========== Keyboard ==========
 document.addEventListener('keydown', (e) => {
-  if (e.key === 'Escape') { closeModal(); closeImport(); closeConfirm(); }
+  if (e.key === 'Escape') { closeModal(); closeImport(); closeConfirm(); closeLightbox(); }
 });
 </script>