import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ThemeProvider } from "next-themes";
import { useState } from "react";
import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
import { GlassTooltip } from "~/components/glass-tooltip.tsx";
import { Toaster } from "~/components/ui/sonner.tsx";
import { initInputModality } from "~/lib/input-modality.ts";
import type { Route } from "./+types/root";
import "@fontsource-variable/inter-tight";
import "@fontsource-variable/space-grotesk";
import "./app.css";
// 触屏 / 鼠标判断要在首屏渲染前定下来(写到 ),见 input-modality.ts
if (typeof window !== "undefined") initInputModality();
export const meta: Route.MetaFunction = () => [{ title: "UHD 媒体自动化控制台" }];
export function Layout({ children }: { children: React.ReactNode }) {
return (
{children}
{/* 玻璃提示条不叠放(叠起来后面的字会透出来):展开排列、间隔 8px;状态色只在图标上,不开 richColors */}
);
}
export default function App() {
const [queryClient] = useState(
() =>
new QueryClient({
defaultOptions: {
queries: { staleTime: 30_000, refetchOnWindowFocus: false },
},
}),
);
return (
);
}
export function HydrateFallback() {
return null;
}
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
let message = "出错了";
let details = "发生了未预期的错误。";
let stack: string | undefined;
if (isRouteErrorResponse(error)) {
message = error.status === 404 ? "404" : "错误";
details = error.status === 404 ? "页面不存在。" : error.statusText || details;
} else if (import.meta.env.DEV && error instanceof Error) {
details = error.message;
stack = error.stack;
}
return (
{message}
{details}
{stack && (
{stack}
)}
);
}