fix: 返回列表后未读邮件状态不更新（BFCache 静默同步）

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

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

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}}