feat(showcase): lightbox, checkbox per-card toggle, lazyload, fix toggle Y-align, remove navbar on public page

2026-07-06 00:24:03 +08:00
parent 2c0229b12f
commit 66ba163ef6
7 changed files with 98 additions and 28 deletions
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -7,8 +7,8 @@
    <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
+    {% block nav %}
    <nav class="navbar">
-        {% block navbar %}
        <a href="/dashboard" class="nav-brand">📮 明信片管理器</a>
        <div class="nav-links">
            {% if user is defined and user %}
@@ -17,8 +17,8 @@
            <a href="/logout" class="nav-logout">退出</a>
            {% endif %}
        </div>
-        {% endblock %}
    </nav>
+    {% endblock %}
    <main class="container">
        {% block content %}{% endblock %}
    </main>
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -68,7 +68,7 @@
            <a href="/postcards/{{ pc.id }}" class="recent-item">
                <div class="recent-img">
                    {% if pc.image_front %}
-                    <img src="{{ pc.image_front }}" alt="">
+                    <img src="{{ pc.image_front }}" alt="" loading="lazy">
                    {% else %}
                    <span>📷</span>
                    {% endif %}
--- a/app/templates/postcards.html
+++ b/app/templates/postcards.html
@@ -28,7 +28,7 @@
 <a href="/postcards/{{ pc.id }}" class="postcard-row">
    <div class="postcard-row-img">
        {% if pc.image_front %}
-        <img src="{{ pc.image_front }}" alt="正面">
+        <img src="{{ pc.image_front }}" alt="正面" loading="lazy">
        {% else %}
        <div class="thumb placeholder">📷</div>
        {% endif %}
@@ -65,7 +65,7 @@
 <a href="/postcards/{{ pc.id }}" class="postcard-row">
    <div class="postcard-row-img">
        {% if pc.image_front %}
-        <img src="{{ pc.image_front }}" alt="正面">
+        <img src="{{ pc.image_front }}" alt="正面" loading="lazy">
        {% else %}
        <div class="thumb placeholder">📷</div>
        {% endif %}
--- a/app/templates/settings.html
+++ b/app/templates/settings.html
@@ -113,11 +113,8 @@
                <span style="font-size:.78rem;color:var(--text-muted);margin-right:.5rem">发出</span>
                {% for pc in sent_cards %}
                <form method="post" action="/postcards/{{ pc.id }}/showcase-toggle" style="display:inline-flex;align-items:center;gap:.3rem;margin-right:.75rem;margin-bottom:.25rem;font-size:.85rem">
+                    <input type="checkbox" name="showcase_visible" value="1" {% if not pc.showcase_hidden %}checked{% endif %} onchange="this.form.submit()" style="margin:0">
                    <span>{{ pc.card_number }}</span>
-                    <label class="toggle-switch toggle-sm">
-                        <input type="checkbox" name="showcase_hidden" value="1" {% if pc.showcase_hidden %}checked{% endif %} onchange="this.form.submit()">
-                        <span class="toggle-slider"></span>
-                    </label>
                </form>
                {% endfor %}
            </div>
@@ -127,11 +124,8 @@
                <span style="font-size:.78rem;color:var(--text-muted);margin-right:.5rem">收到</span>
                {% for pc in received_cards %}
                <form method="post" action="/postcards/{{ pc.id }}/showcase-toggle" style="display:inline-flex;align-items:center;gap:.3rem;margin-right:.75rem;margin-bottom:.25rem;font-size:.85rem">
+                    <input type="checkbox" name="showcase_visible" value="1" {% if not pc.showcase_hidden %}checked{% endif %} onchange="this.form.submit()" style="margin:0">
                    <span>{{ pc.card_number }}</span>
-                    <label class="toggle-switch toggle-sm">
-                        <input type="checkbox" name="showcase_hidden" value="1" {% if pc.showcase_hidden %}checked{% endif %} onchange="this.form.submit()">
-                        <span class="toggle-slider"></span>
-                    </label>
                </form>
                {% endfor %}
            </div>
--- a/app/templates/showcase.html
+++ b/app/templates/showcase.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
-{% block title %}{{ profile_user.username }} 的展示页{% endblock %}
-{% block navbar %}{% endblock %}
+{% block title %}{{ profile_user.username }} 的明信片{% endblock %}
+{% block nav %}{% endblock %}
 {% block content %}
 <div class="section-header">
    <h1>📮 {{ profile_user.username }} 的明信片</h1>
@@ -22,9 +22,9 @@
 {% if mode == 'flat' %}
    <div class="showcase-grid">
    {% for pc in sent_all %}
-        <div class="showcase-card">
+        <div class="showcase-card" data-front="{{ pc.image_front or '' }}" data-number="{{ pc.card_number }}" onclick="openLightbox(this)">
            {% if pc.image_front %}
-            <img src="{{ pc.image_front }}" alt="" class="showcase-card-img">
+            <img src="{{ pc.image_front }}" alt="" class="showcase-card-img" loading="lazy">
            {% else %}
            <div class="showcase-card-img placeholder-img">📷</div>
            {% endif %}
@@ -44,9 +44,9 @@
    <h3 style="margin:1rem 0 .75rem;font-size:.95rem;color:var(--text-muted)">{{ g.profile.nickname }}</h3>
    <div class="showcase-grid">
        {% for pc in g.sent %}
-        <div class="showcase-card">
+        <div class="showcase-card" data-front="{{ pc.image_front or '' }}" data-number="{{ pc.card_number }}" onclick="openLightbox(this)">
            {% if pc.image_front %}
-            <img src="{{ pc.image_front }}" alt="" class="showcase-card-img">
+            <img src="{{ pc.image_front }}" alt="" class="showcase-card-img" loading="lazy">
            {% else %}
            <div class="showcase-card-img placeholder-img">📷</div>
            {% endif %}
@@ -69,9 +69,9 @@
 {% if mode == 'flat' %}
    <div class="showcase-grid">
    {% for pc in received_all %}
-        <div class="showcase-card">
+        <div class="showcase-card" data-front="{{ pc.image_front or '' }}" data-number="{{ pc.card_number }}" onclick="openLightbox(this)">
            {% if pc.image_front %}
-            <img src="{{ pc.image_front }}" alt="" class="showcase-card-img">
+            <img src="{{ pc.image_front }}" alt="" class="showcase-card-img" loading="lazy">
            {% else %}
            <div class="showcase-card-img placeholder-img">📷</div>
            {% endif %}
@@ -91,9 +91,9 @@
    <h3 style="margin:1rem 0 .75rem;font-size:.95rem;color:var(--text-muted)">{{ g.profile.nickname }}</h3>
    <div class="showcase-grid">
        {% for pc in g.received %}
-        <div class="showcase-card">
+        <div class="showcase-card" data-front="{{ pc.image_front or '' }}" data-number="{{ pc.card_number }}" onclick="openLightbox(this)">
            {% if pc.image_front %}
-            <img src="{{ pc.image_front }}" alt="" class="showcase-card-img">
+            <img src="{{ pc.image_front }}" alt="" class="showcase-card-img" loading="lazy">
            {% else %}
            <div class="showcase-card-img placeholder-img">📷</div>
            {% endif %}
@@ -111,6 +111,17 @@
    {% endfor %}
 {% endif %}
 </div>
+{% endif %}
+
+<div id="lightbox" class="lightbox" onclick="closeLightbox(event)">
+    <button class="lightbox-close" onclick="closeLightbox(event)">&times;</button>
+    <button class="lightbox-prev" onclick="navLightbox(-1,event)">&#10094;</button>
+    <button class="lightbox-next" onclick="navLightbox(1,event)">&#10095;</button>
+    <div class="lightbox-content" onclick="event.stopPropagation()">
+        <img id="lightbox-img" src="" alt="">
+        <div id="lightbox-caption" class="lightbox-caption"></div>
+    </div>
+</div>

 <script>
 function switchTab(name) {
@@ -119,6 +130,59 @@ function switchTab(name) {
    event.currentTarget.classList.add('active');
    document.getElementById('tab-' + name).style.display = '';
 }
+
+var lightboxItems = [];
+var lightboxIdx = 0;
+
+function buildLightboxItems() {
+    lightboxItems = [];
+    var visible = document.querySelectorAll('.tab-panel:not([style*="display:none"]) .showcase-card[data-front]');
+    visible.forEach(function(card) {
+        var front = card.getAttribute('data-front');
+        var number = card.getAttribute('data-number');
+        if (front) lightboxItems.push({src: front, number: number});
+    });
+}
+
+function openLightbox(el) {
+    buildLightboxItems();
+    var front = el.getAttribute('data-front');
+    if (!front) return;
+    var number = el.getAttribute('data-number');
+    for (var i = 0; i < lightboxItems.length; i++) {
+        if (lightboxItems[i].number === number) { lightboxIdx = i; break; }
+    }
+    showLightboxItem();
+    document.getElementById('lightbox').classList.add('active');
+    document.body.style.overflow = 'hidden';
+}
+
+function showLightboxItem() {
+    if (!lightboxItems.length) return;
+    var item = lightboxItems[lightboxIdx];
+    document.getElementById('lightbox-img').src = item.src;
+    document.getElementById('lightbox-caption').textContent = item.number + ' (' + (lightboxIdx+1) + '/' + lightboxItems.length + ')';
+}
+
+function closeLightbox(e) {
+    if (e) e.stopPropagation();
+    document.getElementById('lightbox').classList.remove('active');
+    document.body.style.overflow = '';
+}
+
+function navLightbox(dir, e) {
+    if (e) e.stopPropagation();
+    if (!lightboxItems.length) return;
+    lightboxIdx = (lightboxIdx + dir + lightboxItems.length) % lightboxItems.length;
+    showLightboxItem();
+}
+
+document.addEventListener('keydown', function(e) {
+    var lb = document.getElementById('lightbox');
+    if (!lb || !lb.classList.contains('active')) return;
+    if (e.key === 'Escape') closeLightbox();
+    else if (e.key === 'ArrowLeft') navLightbox(-1);
+    else if (e.key === 'ArrowRight') navLightbox(1);
+});
 </script>
-{% endif %}
 {% endblock %}