@lobehub/lobehub 2.0.0-next.72 → 2.0.0-next.74

package/src/app/[variants]/(main)/settings/provider/ProviderMenu/Item.tsx

@@ -2,9 +2,9 @@ import { ProviderIcon } from '@lobehub/icons';
 import { Avatar } from '@lobehub/ui';
 import { Badge } from 'antd';
 import { createStyles } from 'antd-style';
-import { useSearchParams } from 'next/navigation';
 import { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
+import { useSearchParams } from 'react-router-dom';
 
 import { AiProviderListItem, AiProviderSourceEnum } from '@/types/aiProvider';
 
@@ -42,43 +42,44 @@ interface ProviderItemProps extends AiProviderListItem {
 const ProviderItem = memo<ProviderItemProps>(
   ({ id, name, source, enabled, logo, onClick = () => {} }) => {
     const { styles, cx } = useStyles();
-    const searchParams = useSearchParams();
+    const [searchParams] = useSearchParams();
 
-  const activeKey = searchParams.get('provider');
+    const activeKey = searchParams.get('provider');
 
-  const isCustom = source === AiProviderSourceEnum.Custom;
-  return (
-    <div
-      className={cx(styles.container, activeKey === id && styles.active)}
-      onClick={() => {
-        onClick(id);
-      }}
-    >
-      <Flexbox gap={8} horizontal>
-        {isCustom && logo ? (
-          <Avatar
-            alt={name || id}
-            avatar={logo}
-            shape={'square'}
-            size={24}
-            style={{ borderRadius: 6 }}
-          />
-        ) : (
-          <ProviderIcon provider={id} size={24} style={{ borderRadius: 6 }} type={'avatar'} />
-        )}
-        {name}
-      </Flexbox>
-      <Flexbox horizontal>
-        {enabled && (
-          <Center width={24}>
-            <Badge status="success" />
-          </Center>
-        )}
-        {/* cloud slot */}
+    const isCustom = source === AiProviderSourceEnum.Custom;
+    return (
+      <div
+        className={cx(styles.container, activeKey === id && styles.active)}
+        onClick={() => {
+          onClick(id);
+        }}
+      >
+        <Flexbox gap={8} horizontal>
+          {isCustom && logo ? (
+            <Avatar
+              alt={name || id}
+              avatar={logo}
+              shape={'square'}
+              size={24}
+              style={{ borderRadius: 6 }}
+            />
+          ) : (
+            <ProviderIcon provider={id} size={24} style={{ borderRadius: 6 }} type={'avatar'} />
+          )}
+          {name}
+        </Flexbox>
+        <Flexbox horizontal>
+          {enabled && (
+            <Center width={24}>
+              <Badge status="success" />
+            </Center>
+          )}
+          {/* cloud slot */}
 
-        {/* cloud slot */}
-      </Flexbox>
-    </div>
-  );
-});
+          {/* cloud slot */}
+        </Flexbox>
+      </div>
+    );
+  },
+);
 export default ProviderItem;

package/src/app/[variants]/(main)/settings/provider/_layout/Mobile.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useSearchParams } from 'next/navigation';
 import { PropsWithChildren } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 import ProviderMenu from '../ProviderMenu';
 
@@ -10,7 +10,7 @@ interface LayoutProps extends PropsWithChildren {
 }
 
 const Layout = ({ children, onProviderSelect }: LayoutProps) => {
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
   const provider = searchParams.get('provider');
   return provider === 'all' || !provider ? (
     <ProviderMenu mobile={true} onProviderSelect={onProviderSelect} />

package/src/app/[variants]/(main)/settings/provider/features/CreateNewProvider/index.tsx

@@ -10,10 +10,10 @@ import {
 } from '@lobehub/ui';
 import { App } from 'antd';
 import { BrainIcon } from 'lucide-react';
-import { useRouter } from 'next/navigation';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { useNavigate } from 'react-router-dom';
 
 import { useAiInfraStore } from '@/store/aiInfra/store';
 import { CreateAiProviderParams } from '@/types/aiProvider';
@@ -31,7 +31,7 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open }) => {
   const [loading, setLoading] = useState(false);
   const createNewAiProvider = useAiInfraStore((s) => s.createNewAiProvider);
   const { message } = App.useApp();
-  const router = useRouter();
+  const navigate = useNavigate();
   const onFinish = async (values: CreateAiProviderParams) => {
     setLoading(true);
 
@@ -44,7 +44,7 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open }) => {
 
       await createNewAiProvider(finalValues);
       setLoading(false);
-      router.push(`/settings?active=provider&provider=${values.id}`);
+      navigate(`/settings?active=provider&provider=${values.id}`);
       message.success(t('createNewAiProvider.createSuccess'));
       onClose?.();
     } catch (e) {

package/src/app/[variants]/(main)/settings/provider/features/ProviderConfig/UpdateProviderInfo/SettingModal.tsx

@@ -2,10 +2,10 @@ import { ProviderIcon } from '@lobehub/icons';
 import { Button, type FormItemProps, FormModal, Icon, Input, Select, TextArea } from '@lobehub/ui';
 import { App } from 'antd';
 import { BrainIcon } from 'lucide-react';
-import { useRouter } from 'next/navigation';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { useNavigate } from 'react-router-dom';
 
 import { useAiInfraStore } from '@/store/aiInfra/store';
 import { AiProviderDetailItem, UpdateAiProviderParams } from '@/types/aiProvider';
@@ -28,7 +28,7 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open, initial
   ]);
 
   const { message, modal } = App.useApp();
-  const router = useRouter();
+  const navigate = useNavigate();
 
   const onFinish = async (values: UpdateAiProviderParams) => {
     setLoading(true);
@@ -117,7 +117,7 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open, initial
                 okText: t('delete', { ns: 'common' }),
                 onOk: async () => {
                   await deleteAiProvider(id);
-                  router.push('/settings?active=provider');
+                  navigate('/settings?active=provider');
 
                   onClose?.();
                   message.success(t('updateAiProvider.deleteSuccess'));

package/src/app/[variants]/DesktopRouter.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { memo, useMemo } from 'react';
+import { RouterProvider } from 'react-router-dom';
+
+import BootErrorBoundary from '@/components/BootErrorBoundary';
+import Loading from '@/components/Loading/BrandTextLoading';
+import type { Locales } from '@/types/locale';
+
+import { createDesktopRouter } from './desktopRouter.config';
+
+interface ClientRouterProps {
+  locale: Locales;
+}
+
+const ClientRouter = memo<ClientRouterProps>(({ locale }) => {
+  const router = useMemo(() => createDesktopRouter(locale), [locale]);
+  return (
+    <BootErrorBoundary fallback={<Loading />}>
+      <RouterProvider router={router} />
+    </BootErrorBoundary>
+  );
+});
+
+ClientRouter.displayName = 'ClientRouter';
+
+const DesktopRouterClient = dynamic(() => Promise.resolve(ClientRouter), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+interface DesktopRouterProps {
+  locale: Locales;
+}
+
+const DesktopRouter = ({ locale }: DesktopRouterProps) => {
+  return <DesktopRouterClient locale={locale} />;
+};
+
+export default DesktopRouter;

package/src/app/[variants]/MobileRouter.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { memo, useMemo } from 'react';
+import { RouterProvider } from 'react-router-dom';
+
+import BootErrorBoundary from '@/components/BootErrorBoundary';
+import Loading from '@/components/Loading/BrandTextLoading';
+import type { Locales } from '@/types/locale';
+
+import { createMobileRouter } from './mobileRouter.config';
+
+interface ClientRouterProps {
+  locale: Locales;
+}
+
+const ClientRouter = memo<ClientRouterProps>(({ locale }) => {
+  const router = useMemo(() => createMobileRouter(locale), [locale]);
+
+  return (
+    <BootErrorBoundary fallback={<Loading />}>
+      <RouterProvider router={router} />
+    </BootErrorBoundary>
+  );
+});
+
+ClientRouter.displayName = 'ClientRouter';
+
+const MobileRouterClient = dynamic(() => Promise.resolve(ClientRouter), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+interface MobileRouterProps {
+  locale: Locales;
+}
+
+const MobileRouter = ({ locale }: MobileRouterProps) => {
+  return <MobileRouterClient locale={locale} />;
+};
+
+export default MobileRouter;

package/src/app/[variants]/desktopRouter.config.tsx

@@ -0,0 +1,364 @@
+'use client';
+
+import { useEffect } from 'react';
+import { type LoaderFunction, createBrowserRouter, redirect, useNavigate } from 'react-router-dom';
+
+import Loading from '@/components/Loading/BrandTextLoading';
+import { useGlobalStore } from '@/store/global';
+import type { Locales } from '@/types/locale';
+
+import DesktopMainLayout from './(main)/layouts/desktop';
+import { idLoader, slugLoader } from './loaders/routeParams';
+
+// Component to register navigate function in global store
+const NavigatorRegistrar = () => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    useGlobalStore.setState({ navigate });
+
+    return () => {
+      useGlobalStore.setState({ navigate: undefined });
+    };
+  }, [navigate]);
+
+  return null;
+};
+
+// Root layout wrapper component - just registers navigator and renders outlet
+// Note: Desktop layout is provided by individual route components
+const RootLayout = (props: { locale: Locales }) => {
+  return (
+    <>
+      <NavigatorRegistrar />
+      <DesktopMainLayout locale={props.locale} />
+    </>
+  );
+};
+
+// Hydration gate loader - waits for client state to be ready before rendering
+const hydrationGateLoader: LoaderFunction = () => {
+  const { isAppHydrated } = useGlobalStore.getState();
+
+  // 如果状态已经就绪，直接放行
+  if (isAppHydrated) {
+    return null;
+  }
+
+  // 否则，返回一个 Promise，"暂停" 渲染
+  return new Promise((resolve) => {
+    console.log('[HydrationGate] Waiting for client state...');
+    // 订阅 useGlobalStore 的变化
+    const unsubscribe = useGlobalStore.subscribe((state) => {
+      if (state.isAppHydrated) {
+        console.log('[HydrationGate] Client state ready. Gate opened!');
+        unsubscribe(); // 清理订阅
+        resolve(null); // Promise 完成，门卫放行
+      }
+    });
+  });
+};
+
+// Create desktop router configuration
+export const createDesktopRouter = (locale: Locales) =>
+  createBrowserRouter([
+    {
+      HydrateFallback: () => <Loading />,
+      children: [
+        // Chat routes
+        {
+          children: [
+            {
+              index: true,
+              lazy: () =>
+                import('./(main)/chat/index').then((m) => ({
+                  Component: m.DesktopChatPage,
+                })),
+            },
+            {
+              lazy: () =>
+                import('./(main)/chat/index').then((m) => ({
+                  Component: m.DesktopChatPage,
+                })),
+              path: '*',
+            },
+          ],
+          lazy: () =>
+            import('./(main)/chat/_layout/Desktop').then((m) => ({
+              Component: m.default,
+            })),
+          path: 'chat',
+        },
+
+        // Discover routes with nested structure
+        {
+          children: [
+            // List routes (with ListLayout)
+            {
+              children: [
+                {
+                  children: [
+                    {
+                      index: true,
+                      lazy: () =>
+                        import('./(main)/discover/(list)/assistant/index').then((m) => ({
+                          Component: m.DesktopAssistantPage,
+                        })),
+                    },
+                  ],
+                  lazy: () =>
+                    import('./(main)/discover/(list)/assistant/_layout/Desktop').then((m) => ({
+                      Component: m.default,
+                    })),
+                  path: 'assistant',
+                },
+                {
+                  children: [
+                    {
+                      index: true,
+                      lazy: () =>
+                        import('./(main)/discover/(list)/model/index').then((m) => ({
+                          Component: m.DesktopModelPage,
+                        })),
+                    },
+                  ],
+                  lazy: () =>
+                    import('./(main)/discover/(list)/model/_layout/Desktop').then((m) => ({
+                      Component: m.default,
+                    })),
+                  path: 'model',
+                },
+                {
+                  lazy: () =>
+                    import('./(main)/discover/(list)/provider/index').then((m) => ({
+                      Component: m.DesktopProviderPage,
+                    })),
+                  path: 'provider',
+                },
+                {
+                  children: [
+                    {
+                      index: true,
+                      lazy: () =>
+                        import('./(main)/discover/(list)/mcp/index').then((m) => ({
+                          Component: m.DesktopMcpPage,
+                        })),
+                    },
+                  ],
+                  lazy: () =>
+                    import('./(main)/discover/(list)/mcp/_layout/Desktop').then((m) => ({
+                      Component: m.default,
+                    })),
+                  path: 'mcp',
+                },
+                {
+                  index: true,
+                  lazy: () =>
+                    import('./(main)/discover/(list)/(home)/index').then((m) => ({
+                      Component: m.DesktopHomePage,
+                    })),
+                },
+              ],
+              lazy: () =>
+                import('./(main)/discover/(list)/_layout/Desktop/index').then((m) => ({
+                  Component: m.default,
+                })),
+            },
+            // Detail routes (with DetailLayout)
+            {
+              children: [
+                {
+                  lazy: () =>
+                    import('./(main)/discover/(detail)/assistant/index').then((m) => ({
+                      Component: m.DesktopDiscoverAssistantDetailPage,
+                    })),
+                  loader: slugLoader,
+                  path: 'assistant/:slug',
+                },
+                {
+                  lazy: () =>
+                    import('./(main)/discover/(detail)/model/index').then((m) => ({
+                      Component: m.DesktopModelPage,
+                    })),
+                  loader: slugLoader,
+                  path: 'model/:slug',
+                },
+                {
+                  lazy: () =>
+                    import('./(main)/discover/(detail)/provider/index').then((m) => ({
+                      Component: m.DesktopProviderPage,
+                    })),
+                  loader: slugLoader,
+                  path: 'provider/:slug',
+                },
+                {
+                  lazy: () =>
+                    import('./(main)/discover/(detail)/mcp/index').then((m) => ({
+                      Component: m.DesktopMcpPage,
+                    })),
+                  loader: slugLoader,
+                  path: 'mcp/:slug',
+                },
+              ],
+              lazy: () =>
+                import('./(main)/discover/(detail)/_layout/Desktop').then((m) => ({
+                  Component: m.default,
+                })),
+            },
+          ],
+          lazy: () =>
+            import('./(main)/discover/_layout/Desktop/index').then((m) => ({
+              Component: m.default,
+            })),
+          path: 'discover',
+        },
+
+        // Knowledge routes
+        {
+          children: [
+            {
+              index: true,
+              lazy: () =>
+                import('./(main)/knowledge/routes/KnowledgeHome').then((m) => ({
+                  Component: m.default,
+                })),
+            },
+            {
+              lazy: () =>
+                import('./(main)/knowledge/routes/KnowledgeBasesList').then((m) => ({
+                  Component: m.default,
+                })),
+              path: 'bases',
+            },
+            {
+              lazy: () =>
+                import('./(main)/knowledge/routes/KnowledgeBaseDetail').then((m) => ({
+                  Component: m.default,
+                })),
+              loader: idLoader,
+              path: 'bases/:id',
+            },
+            {
+              lazy: () =>
+                import('./(main)/knowledge/routes/KnowledgeBaseDetail').then((m) => ({
+                  Component: m.default,
+                })),
+              loader: idLoader,
+              path: '*',
+            },
+          ],
+          lazy: () =>
+            import('./(main)/knowledge/_layout/Desktop').then((m) => ({
+              Component: m.default,
+            })),
+          path: 'knowledge',
+        },
+
+        // Settings routes
+        {
+          children: [
+            {
+              index: true,
+              lazy: () =>
+                import('./(main)/settings/_layout/Desktop').then((m) => ({
+                  Component: m.default,
+                })),
+            },
+          ],
+          lazy: () =>
+            import('./(main)/settings/_layout/DesktopWrapper').then((m) => ({
+              Component: m.default,
+            })),
+          path: 'settings',
+        },
+
+        // Image routes
+        {
+          children: [
+            {
+              index: true,
+              lazy: () =>
+                import('./(main)/image').then((m) => ({
+                  Component: m.default,
+                })),
+            },
+          ],
+          lazy: () =>
+            import('./(main)/image/_layout/DesktopWrapper').then((m) => ({
+              Component: m.default,
+            })),
+          path: 'image',
+        },
+
+        // Labs routes
+        {
+          lazy: () =>
+            import('./(main)/labs').then((m) => ({
+              Component: m.default,
+            })),
+          path: 'labs',
+        },
+
+        // Profile routes
+        {
+          children: [
+            {
+              index: true,
+              lazy: () =>
+                import('./(main)/profile/(home)/desktop').then((m) => ({
+                  Component: m.default,
+                })),
+            },
+            {
+              lazy: () =>
+                import('./(main)/profile/apikey/index').then((m) => ({
+                  Component: m.default,
+                })),
+              path: 'apikey',
+            },
+            {
+              lazy: () =>
+                import('./(main)/profile/security/index').then((m) => ({
+                  Component: m.DesktopProfileSecurityPage,
+                })),
+              path: 'security',
+            },
+            {
+              lazy: () =>
+                import('./(main)/profile/stats/index').then((m) => ({
+                  Component: m.DesktopProfileStatsPage,
+                })),
+              path: 'stats',
+            },
+            {
+              lazy: () =>
+                import('./(main)/profile/usage/index').then((m) => ({
+                  Component: m.DesktopProfileUsagePage,
+                })),
+              path: 'usage',
+            },
+          ],
+          lazy: () =>
+            import('./(main)/profile/_layout/DesktopWrapper').then((m) => ({
+              Component: m.default,
+            })),
+          path: 'profile',
+        },
+
+        // Default route - redirect to chat
+        {
+          index: true,
+          loader: () => redirect('/chat', { status: 302 }),
+        },
+
+        // Catch-all route
+        {
+          loader: () => redirect('/chat', { status: 302 }),
+          path: '*',
+        },
+      ],
+      element: <RootLayout locale={locale} />,
+      loader: hydrationGateLoader,
+      path: '/',
+    },
+  ]);

package/src/app/[variants]/layout.tsx

@@ -19,10 +19,9 @@ const inVercel = process.env.VERCEL === '1';
 
 interface RootLayoutProps extends DynamicLayoutProps {
   children: ReactNode;
-  modal: ReactNode;
 }
 
-const RootLayout = async ({ children, params, modal }: RootLayoutProps) => {
+const RootLayout = async ({ children, params }: RootLayoutProps) => {
   const { variants } = await params;
 
   const { locale, isMobile, theme, primaryColor, neutralColor } =
@@ -50,7 +49,6 @@ const RootLayout = async ({ children, params, modal }: RootLayoutProps) => {
           >
             <AuthProvider>
               {children}
-              {!isMobile && modal}
             </AuthProvider>
             <PWAInstall />
           </GlobalProvider>

package/src/app/[variants]/loaders/routeParams.ts

@@ -0,0 +1,45 @@
+import type { LoaderFunctionArgs } from 'react-router-dom';
+
+/**
+ * Generic route params loader
+ * Extracts all params from the route and returns them
+ * Usage: loader: routeParamsLoader
+ * Access in component: const params = useLoaderData<RouteParams>();
+ */
+export interface RouteParams {
+  [key: string]: string | undefined;
+}
+
+export const routeParamsLoader = ({ params }: LoaderFunctionArgs): RouteParams => {
+  return params;
+};
+
+/**
+ * Specific loader for routes with 'slug' param
+ * Returns: { slug: string }
+ */
+export interface SlugParams {
+  slug: string;
+}
+
+export const slugLoader = ({ params }: LoaderFunctionArgs): SlugParams => {
+  if (!params.slug) {
+    throw new Error('Slug parameter is required');
+  }
+  return { slug: params.slug };
+};
+
+/**
+ * Specific loader for routes with 'id' param
+ * Returns: { id: string }
+ */
+export interface IdParams {
+  id: string;
+}
+
+export const idLoader = ({ params }: LoaderFunctionArgs): IdParams => {
+  if (!params.id) {
+    throw new Error('ID parameter is required');
+  }
+  return { id: params.id };
+};