feat: 添加画廊布局和样式，优化图片展示效果

Signed-off-by: wangsimiao1 <wangsimiao1@xiaomi.com>

Author: WangSimiao2000

_sass/pages/_gallery.scss

@@ -0,0 +1,44 @@
+@use '../abstracts/variables' as v;
+@use '../abstracts/breakpoints' as bp;
+
+.gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 1.25rem;
+  margin-top: 1.5rem;
+
+  .g-item {
+    position: relative;
+    z-index: 1;
+    cursor: pointer;
+    border-radius: v.$radius-lg;
+    overflow: hidden;
+    background: var(--card-bg);
+    box-shadow: var(--card-shadow);
+    opacity: 0;
+    animation: card-enter 0.6s v.$ease-spring-soft forwards;
+    transition: transform 0.4s v.$ease-spring,
+      box-shadow 0.4s v.$ease-spring-soft;
+
+    @for $i from 1 through 30 {
+      &:nth-child(#{$i}) {
+        animation-delay: #{($i - 1) * 0.06}s;
+      }
+    }
+
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 8px 24px rgb(120 110 100 / 12%);
+
+      img {
+        transform: scale(1.05);
+      }
+    }
+
+    img {
+      width: 100%;
+      display: block;
+      transition: transform 0.5s v.$ease-spring;
+    }
+  }
+}

_sass/pages/_index.scss

@@ -6,3 +6,4 @@
 @forward 'archives';
 @forward 'category-tag';
 @forward 'card-grid';
+@forward 'gallery';

_tabs/gallery.md

@@ -5,8 +5,6 @@ order: 5
 ---
 
 <style>
-.g-item { margin-bottom: 12px; cursor: pointer; }
-.g-item img { width: 100%; border-radius: 6px; display: block; }
 .lb { display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.9); justify-content:center; align-items:center; }
 .lb.on { display:flex; }
 .lb img { max-width:92vw; max-height:90vh; border-radius:6px; }
@@ -19,11 +17,13 @@ order: 5
 </div>
 
 {% if site.data.gallery.size > 0 %}
+<div class="gallery-grid">
   {% for photo in site.data.gallery %}
   <div class="g-item" onclick="openLB('{{ photo.image }}')">
     <img src="{{ photo.image }}" alt="照片" loading="lazy" />
   </div>
   {% endfor %}
+</div>
 {% else %}
 <p class="text-muted text-center mt-5">📷 还没有照片</p>
 {% endif %}