fucheng
63 lines
2.4 KiB
TypeScript
63 lines
2.4 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 localeZhHK from "@/locales/data-zh-HK.json";
|
||
import localeEn from "@/locales/data-en.json";
|
||
|
||
type ConnectLocale = (typeof localeZh)["connect"];
|
||
|
||
function pickConnectLocale(): ConnectLocale {
|
||
const params = new URLSearchParams(window.location.search);
|
||
const lang = params.get("lang");
|
||
if (lang === "0") return localeEn.connect;
|
||
if (lang === "1") return localeZhHK.connect;
|
||
if (lang === "2") return localeZh.connect;
|
||
return localeEn.connect;
|
||
}
|
||
|
||
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 } = useDevice();
|
||
const text = useMemo(pickConnectLocale, []);
|
||
|
||
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=10.0.0.119</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">{text.failedHint}</p>
|
||
</>
|
||
)}
|
||
<BottomNav />
|
||
</div>
|
||
);
|
||
}
|