eafonyang
63 lines
2.7 KiB
TypeScript
63 lines
2.7 KiB
TypeScript
import { useMemo } from "react";
|
||
import { useDevice } from "@/contexts/DeviceContext";
|
||
import { isLikelyNetworkFetchError } from "@/lib/networkError";
|
||
import { Loader2, Wifi } from "lucide-react";
|
||
import BottomNav from "@/components/BottomNav";
|
||
import localeZh from "@/locales/data-zh.json";
|
||
import { getUiLanguageOverride, isKnownLanguage, resolveLocalePack } from "@/locales/resolveLocale";
|
||
|
||
type ConnectLocale = (typeof localeZh)["connect"];
|
||
|
||
function pickConnectLocale(effectiveLanguage: number): ConnectLocale {
|
||
// 前端语言覆盖（de/es/fr）优先；否则沿用 URL ?lang=（设备语言）；最后回退到生效语言。
|
||
const override = getUiLanguageOverride();
|
||
if (override != null) return resolveLocalePack(override).connect as ConnectLocale;
|
||
const params = new URLSearchParams(window.location.search);
|
||
const langParam = Number(params.get("lang"));
|
||
const lang = isKnownLanguage(langParam) ? langParam : effectiveLanguage;
|
||
return resolveLocalePack(lang).connect as ConnectLocale;
|
||
}
|
||
|
||
function fmt(template: string, vars: Record<string, string>): string {
|
||
let s = template;
|
||
for (const [k, v] of Object.entries(vars)) {
|
||
s = s.split(`{${k}}`).join(v);
|
||
}
|
||
return s;
|
||
}
|
||
|
||
/** 自动连接设备时的占位（替代原 ConnectScreen） */
|
||
export default function ConnectionPlaceholder() {
|
||
const { ip, isConnecting, error, ipMissing, effectiveLanguage } = useDevice();
|
||
const text = useMemo(() => pickConnectLocale(effectiveLanguage), [effectiveLanguage]);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-black flex flex-col items-center justify-center px-6 pb-24">
|
||
<div className="mb-6 flex size-[4.5rem] items-center justify-center rounded-[16px] border border-white/15">
|
||
<Wifi size={28} className="text-[#00FFF6]/80" />
|
||
</div>
|
||
{ipMissing ? (
|
||
<>
|
||
<p className="text-[15px] text-white/80 mb-2">{text.ipMissingTitle}</p>
|
||
<p className="text-[13px] text-white/45 text-center max-w-xs">{text.ipMissingDesc}</p>
|
||
<p className="text-[13px] text-[#00FFF6]/80 mt-3 font-mono">?ip=</p>
|
||
</>
|
||
) : isConnecting ? (
|
||
<>
|
||
<Loader2 size={28} className="animate-spin text-[#00FFF6] mb-3" />
|
||
<p className="text-[15px] text-white/70">{fmt(text.connecting, { ip })}</p>
|
||
</>
|
||
) : (
|
||
<>
|
||
<p className="text-[15px] text-white/80 mb-2">{text.failedTitle}</p>
|
||
<p className="text-[13px] text-white/45 text-center max-w-xs">
|
||
{error && !isLikelyNetworkFetchError(error) ? error : text.failedDesc}
|
||
</p>
|
||
<p className="text-[12px] text-white/30 mt-3 text-center max-w-xs">{fmt(text.failedHint, { ip })}</p>
|
||
</>
|
||
)}
|
||
<BottomNav />
|
||
</div>
|
||
);
|
||
}
|