From bf283ba5fce1d49cb08395b583c09d3bf3df4392 Mon Sep 17 00:00:00 2001
From: dsh <dsh@lmve.net>
Date: Mon, 17 Aug 2026 23:08:15 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=BF=94=E5=9B=9E=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E5=90=8E=E6=9C=AA=E8=AF=BB=E9=82=AE=E4=BB=B6=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E4=B8=8D=E6=9B=B4=E6=96=B0=EF=BC=88BFCache=20=E9=9D=99?=
 =?UTF-8?q?=E9=BB=98=E5=90=8C=E6=AD=A5=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题：打开未读邮件（阅读页已自动标记已读）后返回列表，浏览器从 BFCache
恢复旧 DOM，列表仍显示未读，需手动刷新。

修复：
- 三个列表页的交互脚本提取为公共模板 listjs（base.html），行为一致
- pageshow(persisted=true) 时静默 fetch 最新列表并局部更新行状态
  （未读类/圆点/已删除行/未读角标/总数），不整页刷新、保留滚动
- visibilitychange 兜底：标签页重新可见时也同步一次（离线失败静默忽略，
  仅 BFCache 场景失败才整页刷新）
- 验证：合成 pageshow 事件驱动同步，未读->已读局部更新 PASS；
  桌面/移动/平板布局回归无异常
---
 internal/web/templates/base.html   | 124 +++++++++++++++++++++++++++++
 internal/web/templates/drafts.html |  63 +--------------
 internal/web/templates/inbox.html  |  70 +---------------
 internal/web/templates/sent.html   |  63 +--------------
 4 files changed, 127 insertions(+), 193 deletions(-)

diff --git a/internal/web/templates/base.html b/internal/web/templates/base.html
index 9f64282..a0ff8d2 100644
--- a/internal/web/templates/base.html
+++ b/internal/web/templates/base.html
@@ -489,3 +489,127 @@
     </div>
 </aside>
 {{end}}
+
+{{define "listjs"}}
+<script>
+(function () {
+    var searchInput = document.getElementById('mail-search');
+    var rows = Array.prototype.slice.call(document.querySelectorAll('.mail-row'));
+    var selectAll = document.getElementById('select-all');
+    var btnDelete = document.getElementById('btn-delete');
+
+    // 行点击跳转（复选框 / 行内删除按钮除外）
+    rows.forEach(function (row) {
+        row.addEventListener('click', function (e) {
+            if (e.target.closest('.cell-check') || e.target.closest('.row-del')) return;
+            var link = row.querySelector('.cell-subject');
+            if (link) window.location.href = link.getAttribute('href');
+        });
+    });
+
+    // 全选
+    selectAll && selectAll.addEventListener('change', function () {
+        rows.forEach(function (row) {
+            var cb = row.querySelector('.row-check');
+            cb.checked = selectAll.checked;
+            row.classList.toggle('selected', cb.checked);
+        });
+        updateDeleteState();
+    });
+    rows.forEach(function (row) {
+        var cb = row.querySelector('.row-check');
+        cb.addEventListener('change', function () {
+            row.classList.toggle('selected', cb.checked);
+            if (!cb.checked && selectAll) selectAll.checked = false;
+            updateDeleteState();
+        });
+    });
+
+    function updateDeleteState() {
+        if (!btnDelete) return;
+        var n = rows.filter(function (r) { return r.isConnected && r.querySelector('.row-check').checked; }).length;
+        btnDelete.disabled = n === 0;
+    }
+
+    // 批量删除
+    btnDelete && btnDelete.addEventListener('click', function () {
+        var ids = rows.filter(function (r) { return r.isConnected && r.querySelector('.row-check').checked; })
+                      .map(function (r) { return r.dataset.id; });
+        if (!ids.length) return;
+        if (!confirm('确定要删除选中的 ' + ids.length + ' 封邮件吗？')) return;
+        var done = 0;
+        ids.forEach(function (id) {
+            fetch('/mail/delete/' + id, { method: 'POST', body: new FormData() })
+                .then(function () { if (++done === ids.length) window.location.reload(); })
+                .catch(function () { if (++done === ids.length) window.location.reload(); });
+        });
+    });
+
+    // 刷新
+    var btnRefresh = document.getElementById('btn-refresh');
+    btnRefresh && btnRefresh.addEventListener('click', function () { window.location.reload(); });
+
+    // 搜索过滤（发件人 / 主题 / 摘要）
+    searchInput && searchInput.addEventListener('input', function () {
+        var q = searchInput.value.trim().toLowerCase();
+        rows.forEach(function (row) {
+            if (!row.isConnected) return;
+            var text = row.textContent.toLowerCase();
+            row.style.display = (!q || text.indexOf(q) !== -1) ? '' : 'none';
+        });
+    });
+
+    // 从 BFCache（往返缓存）恢复时静默同步最新列表状态：
+    // 阅读页已把邮件标记为已读/删除，恢复的旧 DOM 需要与服务端对齐，
+    // 避免“返回后仍是未读/已删邮件仍显示”。
+    // 真实浏览器在 BFCache 恢复时会触发 pageshow(persisted=true)；
+    // visibilitychange 作为兜底（页面重新可见时也同步一次）。
+    var syncing = false;
+    function syncFromServer(forceReloadOnError) {
+        if (syncing) return;
+        syncing = true;
+        fetch(window.location.href, { headers: { 'Accept': 'text/html' }, credentials: 'same-origin' })
+            .then(function (r) { return r.text(); })
+            .then(function (html) {
+                var doc = new DOMParser().parseFromString(html, 'text/html');
+                var fresh = {};
+                doc.querySelectorAll('.mail-row').forEach(function (r) { fresh[r.dataset.id] = r.classList.contains('unread'); });
+                rows.forEach(function (row) {
+                    var id = row.dataset.id;
+                    if (!(id in fresh)) { row.remove(); return; } // 已被删除
+                    row.classList.toggle('unread', fresh[id]);
+                    var wrap = row.querySelector('.cell-subject-wrap');
+                    var dot = row.querySelector('.unread-dot');
+                    if (fresh[id] && !dot && wrap) {
+                        var s = document.createElement('span');
+                        s.className = 'unread-dot';
+                        wrap.insertBefore(s, wrap.firstChild);
+                    } else if (!fresh[id] && dot) {
+                        dot.remove();
+                    }
+                });
+                // 同步“共 N 封”与侧栏未读角标
+                var total = doc.querySelector('.page-info');
+                var curTotal = document.querySelector('.page-info');
+                if (total && curTotal) curTotal.textContent = total.textContent;
+                var badge = doc.querySelector('.folder.active .badge');
+                var curBadge = document.querySelector('.folder.active .badge');
+                if (badge && curBadge) curBadge.textContent = badge.textContent;
+                else if (!badge && curBadge) curBadge.remove();
+            })
+            .catch(function () {
+                // BFCache 恢复时 DOM 是旧的，同步失败只能整页刷新兜底；
+                // 标签页切回触发的同步失败则静默忽略（可能只是离线）。
+                if (forceReloadOnError) window.location.reload();
+            })
+            .then(function () { syncing = false; });
+    }
+    window.addEventListener('pageshow', function (e) {
+        if (e.persisted) syncFromServer(true);
+    });
+    document.addEventListener('visibilitychange', function () {
+        if (document.visibilityState === 'visible') syncFromServer(false);
+    });
+})();
+</script>
+{{end}}
diff --git a/internal/web/templates/drafts.html b/internal/web/templates/drafts.html
index 92a15dc..bf19bc3 100644
--- a/internal/web/templates/drafts.html
+++ b/internal/web/templates/drafts.html
@@ -87,68 +87,7 @@
             </div>
         </main>
     </div>
-    <script>
-    (function () {
-        var searchInput = document.getElementById('mail-search');
-        var rows = Array.prototype.slice.call(document.querySelectorAll('.mail-row'));
-        var selectAll = document.getElementById('select-all');
-        var btnDelete = document.getElementById('btn-delete');
-
-        rows.forEach(function (row) {
-            row.addEventListener('click', function (e) {
-                if (e.target.closest('.cell-check') || e.target.closest('.row-del')) return;
-                window.location.href = row.querySelector('.cell-subject').getAttribute('href');
-            });
-        });
-
-        selectAll && selectAll.addEventListener('change', function () {
-            rows.forEach(function (row) {
-                var cb = row.querySelector('.row-check');
-                cb.checked = selectAll.checked;
-                row.classList.toggle('selected', cb.checked);
-            });
-            updateDeleteState();
-        });
-        rows.forEach(function (row) {
-            var cb = row.querySelector('.row-check');
-            cb.addEventListener('change', function () {
-                row.classList.toggle('selected', cb.checked);
-                if (!cb.checked && selectAll) selectAll.checked = false;
-                updateDeleteState();
-            });
-        });
-
-        function updateDeleteState() {
-            if (!btnDelete) return;
-            var n = rows.filter(function (r) { return r.querySelector('.row-check').checked; }).length;
-            btnDelete.disabled = n === 0;
-        }
-
-        btnDelete && btnDelete.addEventListener('click', function () {
-            var ids = rows.filter(function (r) { return r.querySelector('.row-check').checked; })
-                          .map(function (r) { return r.dataset.id; });
-            if (!ids.length) return;
-            if (!confirm('确定要删除选中的 ' + ids.length + ' 封邮件吗？')) return;
-            var done = 0;
-            ids.forEach(function (id) {
-                fetch('/mail/delete/' + id, { method: 'POST', body: new FormData() })
-                    .then(function () { if (++done === ids.length) window.location.reload(); })
-                    .catch(function () { if (++done === ids.length) window.location.reload(); });
-            });
-        });
-
-        var btnRefresh = document.getElementById('btn-refresh');
-        btnRefresh && btnRefresh.addEventListener('click', function () { window.location.reload(); });
-
-        searchInput && searchInput.addEventListener('input', function () {
-            var q = searchInput.value.trim().toLowerCase();
-            rows.forEach(function (row) {
-                var text = row.textContent.toLowerCase();
-                row.style.display = (!q || text.indexOf(q) !== -1) ? '' : 'none';
-            });
-        });
-    })();
-    </script>
+    {{template "listjs" .}}
 </body>
 </html>
 {{end}}
diff --git a/internal/web/templates/inbox.html b/internal/web/templates/inbox.html
index 6099935..bd53937 100644
--- a/internal/web/templates/inbox.html
+++ b/internal/web/templates/inbox.html
@@ -82,75 +82,7 @@
             </div>
         </main>
     </div>
-    <script>
-    (function () {
-        var searchInput = document.getElementById('mail-search');
-        var rows = Array.prototype.slice.call(document.querySelectorAll('.mail-row'));
-        var selectAll = document.getElementById('select-all');
-        var btnDelete = document.getElementById('btn-delete');
-
-        // 行点击跳转（复选框除外）
-        rows.forEach(function (row) {
-            row.addEventListener('click', function (e) {
-                if (e.target.closest('.cell-check')) return;
-                window.location.href = row.querySelector('.cell-subject').getAttribute('href');
-            });
-        });
-
-        // 全选
-        selectAll && selectAll.addEventListener('change', function () {
-            rows.forEach(function (row) {
-                var cb = row.querySelector('.row-check');
-                cb.checked = selectAll.checked;
-                row.classList.toggle('selected', cb.checked);
-            });
-            updateDeleteState();
-        });
-        rows.forEach(function (row) {
-            var cb = row.querySelector('.row-check');
-            cb.addEventListener('change', function () {
-                row.classList.toggle('selected', cb.checked);
-                if (!cb.checked && selectAll) selectAll.checked = false;
-                updateDeleteState();
-            });
-        });
-
-        function updateDeleteState() {
-            if (!btnDelete) return;
-            var n = rows.filter(function (r) { return r.querySelector('.row-check').checked; }).length;
-            btnDelete.disabled = n === 0;
-        }
-
-        // 批量删除
-        btnDelete && btnDelete.addEventListener('click', function () {
-            var ids = rows.filter(function (r) { return r.querySelector('.row-check').checked; })
-                          .map(function (r) { return r.dataset.id; });
-            if (!ids.length) return;
-            if (!confirm('确定要删除选中的 ' + ids.length + ' 封邮件吗？')) return;
-            var done = 0;
-            ids.forEach(function (id) {
-                var fd = new FormData();
-                fd.append('_method', 'DELETE');
-                fetch('/mail/delete/' + id, { method: 'POST', body: fd })
-                    .then(function () { if (++done === ids.length) window.location.reload(); })
-                    .catch(function () { if (++done === ids.length) window.location.reload(); });
-            });
-        });
-
-        // 刷新
-        var btnRefresh = document.getElementById('btn-refresh');
-        btnRefresh && btnRefresh.addEventListener('click', function () { window.location.reload(); });
-
-        // 搜索过滤（发件人 / 主题 / 摘要）
-        searchInput && searchInput.addEventListener('input', function () {
-            var q = searchInput.value.trim().toLowerCase();
-            rows.forEach(function (row) {
-                var text = row.textContent.toLowerCase();
-                row.style.display = (!q || text.indexOf(q) !== -1) ? '' : 'none';
-            });
-        });
-    })();
-    </script>
+    {{template "listjs" .}}
 </body>
 </html>
 {{end}}
diff --git a/internal/web/templates/sent.html b/internal/web/templates/sent.html
index 3c8151d..66dff0f 100644
--- a/internal/web/templates/sent.html
+++ b/internal/web/templates/sent.html
@@ -87,68 +87,7 @@
             </div>
         </main>
     </div>
-    <script>
-    (function () {
-        var searchInput = document.getElementById('mail-search');
-        var rows = Array.prototype.slice.call(document.querySelectorAll('.mail-row'));
-        var selectAll = document.getElementById('select-all');
-        var btnDelete = document.getElementById('btn-delete');
-
-        rows.forEach(function (row) {
-            row.addEventListener('click', function (e) {
-                if (e.target.closest('.cell-check') || e.target.closest('.row-del')) return;
-                window.location.href = row.querySelector('.cell-subject').getAttribute('href');
-            });
-        });
-
-        selectAll && selectAll.addEventListener('change', function () {
-            rows.forEach(function (row) {
-                var cb = row.querySelector('.row-check');
-                cb.checked = selectAll.checked;
-                row.classList.toggle('selected', cb.checked);
-            });
-            updateDeleteState();
-        });
-        rows.forEach(function (row) {
-            var cb = row.querySelector('.row-check');
-            cb.addEventListener('change', function () {
-                row.classList.toggle('selected', cb.checked);
-                if (!cb.checked && selectAll) selectAll.checked = false;
-                updateDeleteState();
-            });
-        });
-
-        function updateDeleteState() {
-            if (!btnDelete) return;
-            var n = rows.filter(function (r) { return r.querySelector('.row-check').checked; }).length;
-            btnDelete.disabled = n === 0;
-        }
-
-        btnDelete && btnDelete.addEventListener('click', function () {
-            var ids = rows.filter(function (r) { return r.querySelector('.row-check').checked; })
-                          .map(function (r) { return r.dataset.id; });
-            if (!ids.length) return;
-            if (!confirm('确定要删除选中的 ' + ids.length + ' 封邮件吗？')) return;
-            var done = 0;
-            ids.forEach(function (id) {
-                fetch('/mail/delete/' + id, { method: 'POST', body: new FormData() })
-                    .then(function () { if (++done === ids.length) window.location.reload(); })
-                    .catch(function () { if (++done === ids.length) window.location.reload(); });
-            });
-        });
-
-        var btnRefresh = document.getElementById('btn-refresh');
-        btnRefresh && btnRefresh.addEventListener('click', function () { window.location.reload(); });
-
-        searchInput && searchInput.addEventListener('input', function () {
-            var q = searchInput.value.trim().toLowerCase();
-            rows.forEach(function (row) {
-                var text = row.textContent.toLowerCase();
-                row.style.display = (!q || text.indexOf(q) !== -1) ? '' : 'none';
-            });
-        });
-    })();
-    </script>
+    {{template "listjs" .}}
 </body>
 </html>
 {{end}}
-- 
2.47.3