1 files changed, 39 insertions, 8 deletions
diff --git a/packages/docs/app/root.tsx b/packages/docs/app/root.tsx
index 08b8aa8..9032c80 100644
--- a/packages/docs/app/root.tsx
+++ b/packages/docs/app/root.tsx
@@ -1,15 +1,30 @@
 import {
   isRouteErrorResponse,
+  Link,
   Links,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
+  useParams,
 } from 'react-router';
 import { RootProvider } from 'fumadocs-ui/provider/react-router';
 import type { Route } from './+types/root';
 import './app.css';
+import { defineI18nUI } from 'fumadocs-ui/i18n';
+import { i18n } from './lib/i18n';
 
+const { provider } = defineI18nUI(i18n, {
+  translations: {
+    en: {
+      displayName: 'English',
+    },
+    zh: {
+      displayName: '中文',
+      search: '查找文档',
+    },
+  },
+});
 export const links: Route.LinksFunction = () => [
   { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
   {
@@ -24,8 +39,10 @@ export const links: Route.LinksFunction = () => [
 ];
 
 export function Layout({ children }: { children: React.ReactNode }) {
+  const { lang = i18n.defaultLanguage } = useParams();
+  
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang={lang} suppressHydrationWarning>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -33,7 +50,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Links />
       </head>
       <body className="flex flex-col min-h-screen">
-        <RootProvider>{children}</RootProvider>
+        <RootProvider i18n={provider(lang)}>{children}</RootProvider>
         <ScrollRestoration />
         <Scripts />
       </body>
@@ -60,13 +77,27 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
   }
 
   return (
-    <main className="pt-16 p-4 w-full max-w-[1400px] mx-auto">
-      <h1>{message}</h1>
-      <p>{details}</p>
+    <main className="flex-1 flex flex-col items-center p-4 mt-40 text-center">
+      <h1 className="text-9xl font-black mb-4 bg-gradient-to-r from-blue-600 to-cyan-500 bg-clip-text text-transparent opacity-50">
+        {message}
+      </h1>
+      <p className="text-2xl font-semibold mb-2">{details}</p>
+      <p className="text-fd-muted-foreground mb-8 max-w-md">
+        Sorry, we couldn't find the page you're looking for. It might have been moved or deleted.
+      </p>
+      <Link
+        to="/"
+        className="bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-full px-8 py-3 shadow-lg shadow-blue-500/30 transition-all hover:scale-105 active:scale-95"
+      >
+        Return Home / 返回首页
+      </Link>
       {stack && (
-        <pre className="w-full p-4 overflow-x-auto">
-          <code>{stack}</code>
-        </pre>
+        <div className="mt-12 w-full max-w-2xl text-left">
+          <p className="text-xs font-mono text-fd-muted-foreground mb-2 uppercase tracking-widest">Error Stack</p>
+          <pre className="p-4 overflow-x-auto text-sm bg-fd-muted rounded-xl border border-fd-border font-mono whitespace-pre-wrap break-all shadow-inner">
+            <code>{stack}</code>
+          </pre>
+        </div>
       )}
     </main>
   );