fix: 同步记录弹窗改为局部刷新 (#62)

admin/static/css/app.css

@@ -290,6 +290,9 @@ tr.empty small { color: #aaa; }
 }
 .sync-history-page { color: #555; white-space: nowrap; }
 .sync-history-foot { flex-wrap: wrap; }
+.sync-history-loading { margin: 0; white-space: nowrap; }
+.sync-history-load-error { margin-top: 0; }
+.sync-history-foot [aria-disabled="true"] { opacity: .5; pointer-events: none; }
 .sync-status {
   display: inline-block;
   min-width: 52px;

admin/static/js/app.js

@@ -265,17 +265,70 @@
     });
   }
 
-  /* 同步记录继续由服务端渲染。刷新按钮带着 history=1 和当前页码重新加载，
-     返回后弹窗会自动打开；点击后先显示加载态，避免连续刷新。 */
+  /* 同步记录继续由服务端渲染，但只替换弹窗内部的 HTML 片段。
+     事件委托挂在不会被替换的 slot 上，所以刷新和翻页后不用重新绑定。 */
   function setupSybHistoryRefresh() {
-    var button = document.querySelector("[data-history-refresh-url]");
-    if (!button) return;
-    button.addEventListener("click", function () {
-      if (button.disabled) return;
-      button.disabled = true;
-      button.setAttribute("aria-busy", "true");
-      button.textContent = "刷新中…";
-      window.location.assign(button.getAttribute("data-history-refresh-url"));
+    var slot = document.querySelector("[data-syb-history-slot]");
+    if (!slot) return;
+
+    slot.addEventListener("click", function (event) {
+      var trigger = event.target.closest("[data-history-fetch-url]");
+      if (!trigger || !slot.contains(trigger)) return;
+      event.preventDefault();
+      if (slot.getAttribute("aria-busy") === "true") return;
+
+      var fetchURL = trigger.getAttribute("data-history-fetch-url");
+      var refreshButton = slot.querySelector("button[data-history-fetch-url]");
+      var loading = slot.querySelector("[data-history-loading]");
+      var previousError = slot.querySelector("[data-history-load-error]");
+      var isRefreshButton = trigger === refreshButton;
+      slot.setAttribute("aria-busy", "true");
+      slot.querySelectorAll("[data-history-fetch-url]").forEach(function (control) {
+        control.setAttribute("aria-disabled", "true");
+      });
+      if (refreshButton) refreshButton.disabled = true;
+      if (loading) loading.hidden = false;
+      if (previousError) previousError.hidden = true;
+      if (isRefreshButton) refreshButton.textContent = "刷新中…";
+
+      fetch(fetchURL, {
+        cache: "no-store",
+        headers: { "X-Requested-With": "fetch" }
+      })
+        .then(function (response) {
+          if (response.redirected) {
+            window.location.assign(response.url);
+            return null;
+          }
+          if (!response.ok) throw new Error("HTTP " + response.status);
+          return response.text();
+        })
+        .then(function (html) {
+          if (html === null) return;
+          slot.innerHTML = html;
+          slot.removeAttribute("aria-busy");
+          var nextRefreshButton = slot.querySelector("button[data-history-fetch-url]");
+          if (nextRefreshButton) nextRefreshButton.focus({ preventScroll: true });
+        })
+        .catch(function (error) {
+          slot.removeAttribute("aria-busy");
+          slot.querySelectorAll("[data-history-fetch-url]").forEach(function (control) {
+            control.removeAttribute("aria-disabled");
+          });
+          refreshButton = slot.querySelector("button[data-history-fetch-url]");
+          loading = slot.querySelector("[data-history-loading]");
+          var errorBox = slot.querySelector("[data-history-load-error]");
+          if (refreshButton) {
+            refreshButton.disabled = false;
+            refreshButton.textContent = "刷新同步记录";
+            refreshButton.focus({ preventScroll: true });
+          }
+          if (loading) loading.hidden = true;
+          if (errorBox) {
+            errorBox.textContent = "刷新同步记录失败：" + error.message + "。请重试。";
+            errorBox.hidden = false;
+          }
+        });
     });
   }