44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useSyncExternalStore } from "react";
|
|
|
|
function subscribeToConnectivity(onStoreChange: () => void) {
|
|
const handleOnline = () => onStoreChange();
|
|
const handleOffline = () => onStoreChange();
|
|
|
|
window.addEventListener("online", handleOnline);
|
|
window.addEventListener("offline", handleOffline);
|
|
|
|
return () => {
|
|
window.removeEventListener("online", handleOnline);
|
|
window.removeEventListener("offline", handleOffline);
|
|
};
|
|
}
|
|
|
|
function getOfflineSnapshot() {
|
|
return !navigator.onLine;
|
|
}
|
|
|
|
function getServerOfflineSnapshot() {
|
|
return false;
|
|
}
|
|
|
|
export function ConnectivityBanner() {
|
|
const offline = useSyncExternalStore(
|
|
subscribeToConnectivity,
|
|
getOfflineSnapshot,
|
|
getServerOfflineSnapshot,
|
|
);
|
|
|
|
if (!offline) return null;
|
|
|
|
return (
|
|
<div className="connectivity-banner" role="status" aria-live="polite">
|
|
<strong>当前设备离线</strong>
|
|
<span>
|
|
页面内容可能已经过期。恢复网络后请重新加载；已提交的操作先核对状态，避免重复。
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|