修复：部署无法到达已打开的页面（新增构建版本标记 + 陈旧页面自动重载） (#39)

public/js/ui/connBanner.js

@@ -1,8 +1,9 @@
 // Connection banner (global chrome, mounted once by main.js): reconnecting / closed / rejected-hello states with
-// the matching action, and "正在同步同盟状态…" while a resumed session waits for its room/match state. Outside a
-// match it sits at the bottom centre; in a match (html.sp-in-match, set by the match screen) it moves under the top bar
-// so it never covers the combat view switcher or the shop bar. While it shows, html.sp-conn moves the toasts below it
-// (classes instead of CSS :has(), which Firefox ESR / Safari < 15.4 lack).
+// the matching action, "正在同步同盟状态…" while a resumed session waits for its room/match state, and "服务器已更新"
+// while a match still runs on a page the server has moved past (ui/buildGuard.js sets ui.buildStale). Outside a
+// match the banner sits at the bottom centre; in a match (html.sp-in-match, set by the match screen) it moves under the
+// top bar so it never covers the combat view switcher or the shop bar. While it shows, html.sp-conn moves the toasts
+// below it (classes instead of CSS :has(), which Firefox ESR / Safari < 15.4 lack).
 
 import { html, Button, Icon, useTicker } from './components.js';
 import { net, CLIENT_ERR_TEXT } from '../net.js';
@@ -10,9 +11,9 @@ import { useStore, shallowEqual } from '../store.js';
 import { useDocClass } from './device.js';
 
 /** Whether the banner shows for this connection state (mirrors the early returns below). */
-export function bannerVisible(conn, entered, restoring) {
+export function bannerVisible(conn, entered, restoring, buildStale = false) {
   if (!entered || !conn) return false;
-  if (conn.status === 'online') return !!restoring;
+  if (conn.status === 'online') return !!restoring || !!buildStale;
   if (!conn.everOnline && (conn.status === 'connecting' || conn.status === 'handshaking' || conn.status === 'idle')) return false;
   return true;
 }
@@ -21,13 +22,23 @@ export function ConnectionBanner() {
   const conn = useStore((s) => s.connection, shallowEqual);
   const entered = useStore((s) => s.session.entered);
   const restoring = useStore((s) => s.ui.restoring);
+  const buildStale = useStore((s) => !!s.ui.buildStale);
   useTicker(conn.status === 'reconnecting' ? 500 : 0);
-  useDocClass('sp-conn', bannerVisible(conn, entered, restoring));
+  useDocClass('sp-conn', bannerVisible(conn, entered, restoring, buildStale));
   if (!entered) return null;
-  if (conn.status === 'online' && !restoring) return null;
+  if (conn.status === 'online' && !restoring && !buildStale) return null;
   if (conn.status === 'online' && restoring) {
     return html`<div class="conn-banner" role="status"><${Icon} name="refresh" /><span>正在同步同盟状态…</span></div>`;
   }
+  if (conn.status === 'online' && buildStale) {
+    // the server has a newer build than this page: the guard reloads by itself once the match is over, the button is
+    // for a player who would rather do it now
+    return html`<div class="conn-banner" role="alert">
+      <${Icon} name="refresh" />
+      <span>服务器已更新，本局结束后刷新</span>
+      <${Button} size="sm" variant="secondary" icon="refresh" onClick=${() => location.reload()}>刷新页面<//>
+    </div>`;
+  }
   if (!conn.everOnline && (conn.status === 'connecting' || conn.status === 'handshaking' || conn.status === 'idle')) return null;
   const secs = conn.retryAt ? Math.max(0, Math.ceil((conn.retryAt - Date.now()) / 1000)) : 0;
   const replaced = conn.status === 'closed' && conn.lastError?.code === 'REPLACED';