chore(toolchain): upgrade Bun to 1.4.4 and migrate console to TanStack Router

apps/web/app/root.tsx

@@ -1,92 +1,41 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Outlet, useRouterState } from "@tanstack/react-router";
 import { ThemeProvider } from "next-themes";
-import { useState } from "react";
-import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
+import { useEffect, useState } from "react";
+import { pageTitle } from "~/components/console/nav.ts";
 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";
 
-// 触屏 / 鼠标判断要在首屏渲染前定下来(写到 <html data-input>),见 input-modality.ts
-if (typeof window !== "undefined") initInputModality();
-
-export const meta: Route.MetaFunction = () => [{ title: "UHD 媒体自动化控制台" }];
-
-export function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="zh-CN" suppressHydrationWarning>
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-        <Meta />
-        <Links />
-      </head>
-      <body suppressHydrationWarning>
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="dark"
-          themes={["light", "dark"]}
-          enableSystem={false}
-          storageKey="umt-theme"
-        >
-          {children}
-          <ScrollRestoration />
-          <Scripts />
-          {/* 玻璃提示条不叠放(叠起来后面的字会透出来):展开排列、间隔 8px;状态色只在图标上,不开 richColors */}
-          <Toaster position="top-center" duration={1500} expand gap={8} />
-          <GlassTooltip />
-        </ThemeProvider>
-      </body>
-    </html>
-  );
-}
-
 export default function App() {
+  const pathname = useRouterState({ select: (state) => state.location.pathname });
   const [queryClient] = useState(
     () =>
       new QueryClient({
-        defaultOptions: {
-          queries: { staleTime: 30_000, refetchOnWindowFocus: false },
-        },
+        defaultOptions: { queries: { staleTime: 30_000, refetchOnWindowFocus: false } },
       }),
   );
+  useEffect(() => {
+    const title = pathname === "/login" ? "登录" : pageTitle(pathname);
+    document.title = title ? `${title} · UHD 媒体自动化控制台` : "UHD 媒体自动化控制台";
+  }, [pathname]);
+  // SPA 首屏主题由 index.html 初始化;next-themes 的服务端引导脚本在客户端保持惰性。
   return (
-    <QueryClientProvider client={queryClient}>
-      <Outlet />
-    </QueryClientProvider>
-  );
-}
-
-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 (
-    <main className="container mx-auto p-4 pt-16">
-      <h1 className="text-title font-semibold">{message}</h1>
-      <p className="mt-2 text-muted-foreground">{details}</p>
-      {stack && (
-        <pre className="mt-4 w-full overflow-x-auto p-4 text-label">
-          <code>{stack}</code>
-        </pre>
-      )}
-    </main>
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="dark"
+      themes={["light", "dark"]}
+      enableSystem={false}
+      storageKey="umt-theme"
+      scriptProps={{ type: "text/plain" }}
+    >
+      <QueryClientProvider client={queryClient}>
+        <Outlet />
+        <Toaster position="top-center" duration={1500} expand gap={8} />
+        <GlassTooltip />
+      </QueryClientProvider>
+    </ThemeProvider>
   );
 }