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

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

@@ -0,0 +1,412 @@
+'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 MobileChangelogLayout from './(main)/changelog/_layout/Mobile';
+import { MobileMainLayout } from './(main)/layouts/mobile';
+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: Mobile layout is provided by individual route components
+const RootLayout = (props: { locale: Locales }) => (
+  <>
+    <NavigatorRegistrar />
+    <MobileMainLayout 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 mobile router configuration
+export const createMobileRouter = (locale: Locales) =>
+  createBrowserRouter([
+    {
+      HydrateFallback: () => <Loading />,
+      children: [
+        // Chat routes
+        {
+          children: [
+            {
+              index: true,
+              lazy: () =>
+                import('./(main)/chat/index').then((m) => ({
+                  Component: m.MobileChatPage,
+                })),
+            },
+            {
+              lazy: () =>
+                import('./(main)/chat/settings').then((m) => ({
+                  Component: m.default,
+                })),
+              path: 'settings',
+            },
+          ],
+          lazy: () =>
+            import('./(main)/chat/_layout/Mobile').then((m) => ({
+              Component: m.default,
+            })),
+          path: 'chat',
+        },
+
+        // Discover routes with nested structure
+        {
+          children: [
+            // List routes (with ListLayout)
+            {
+              children: [
+                {
+                  index: true,
+                  lazy: () =>
+                    import('./(main)/discover/(list)/(home)/index').then((m) => ({
+                      Component: m.MobileHomePage,
+                    })),
+                },
+                {
+                  children: [
+                    {
+                      lazy: () =>
+                        import('./(main)/discover/(list)/assistant/index').then((m) => ({
+                          Component: m.MobileAssistantPage,
+                        })),
+                      path: 'assistant',
+                    },
+                  ],
+                  lazy: () =>
+                    import('./(main)/discover/(list)/assistant/_layout/Mobile').then((m) => ({
+                      Component: m.default,
+                    })),
+                },
+                {
+                  children: [
+                    {
+                      lazy: () =>
+                        import('./(main)/discover/(list)/model/index').then((m) => ({
+                          Component: m.MobileModelPage,
+                        })),
+                      path: 'model',
+                    },
+                  ],
+                  lazy: () =>
+                    import('./(main)/discover/(list)/model/_layout/Mobile').then((m) => ({
+                      Component: m.default,
+                    })),
+                },
+                {
+                  lazy: () =>
+                    import('./(main)/discover/(list)/provider/index').then((m) => ({
+                      Component: m.MobileProviderPage,
+                    })),
+                  path: 'provider',
+                },
+                {
+                  children: [
+                    {
+                      lazy: () =>
+                        import('./(main)/discover/(list)/mcp/index').then((m) => ({
+                          Component: m.MobileMcpPage,
+                        })),
+                      path: 'mcp',
+                    },
+                  ],
+                  lazy: () =>
+                    import('./(main)/discover/(list)/mcp/_layout/Mobile').then((m) => ({
+                      Component: m.default,
+                    })),
+                },
+              ],
+              lazy: () =>
+                import('./(main)/discover/(list)/_layout/Mobile/index').then((m) => ({
+                  Component: m.default,
+                })),
+            },
+            // Detail routes (with DetailLayout)
+            {
+              children: [
+                {
+                  lazy: () =>
+                    import('./(main)/discover/(detail)/assistant/index').then((m) => ({
+                      Component: m.MobileDiscoverAssistantDetailPage,
+                    })),
+                  loader: slugLoader,
+                  path: 'assistant/:slug',
+                },
+                {
+                  lazy: () =>
+                    import('./(main)/discover/(detail)/model/index').then((m) => ({
+                      Component: m.MobileModelPage,
+                    })),
+                  loader: slugLoader,
+                  path: 'model/:slug',
+                },
+                {
+                  lazy: () =>
+                    import('./(main)/discover/(detail)/provider/index').then((m) => ({
+                      Component: m.MobileProviderPage,
+                    })),
+                  loader: slugLoader,
+                  path: 'provider/:slug',
+                },
+                {
+                  lazy: () =>
+                    import('./(main)/discover/(detail)/mcp/index').then((m) => ({
+                      Component: m.MobileMcpPage,
+                    })),
+                  loader: slugLoader,
+                  path: 'mcp/:slug',
+                },
+              ],
+              lazy: () =>
+                import('./(main)/discover/(detail)/_layout/Mobile/index').then((m) => ({
+                  Component: m.default,
+                })),
+            },
+          ],
+          lazy: () =>
+            import('./(main)/discover/_layout/Mobile/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/_layout/Mobile').then((m) => ({
+              Component: m.default,
+            })),
+          path: 'knowledge',
+        },
+
+        // Settings routes
+        {
+          children: [
+            {
+              index: true,
+              lazy: () =>
+                import('./(main)/settings/_layout/Mobile').then((m) => ({
+                  Component: m.default,
+                })),
+            },
+          ],
+          lazy: () =>
+            import('./(main)/settings/_layout/MobileWrapper').then((m) => ({
+              Component: m.default,
+            })),
+          path: 'settings',
+        },
+
+        // Image routes
+        {
+          children: [
+            {
+              index: true,
+              lazy: () =>
+                import('./(main)/image/ComingSoon').then((m) => ({
+                  Component: m.default,
+                })),
+            },
+          ],
+          lazy: () =>
+            import('./(main)/image/_layout/Mobile').then((m) => ({
+              Component: m.default,
+            })),
+          path: 'image',
+        },
+
+        // Labs routes
+        {
+          lazy: () =>
+            import('./(main)/labs').then((m) => ({
+              Component: m.default,
+            })),
+          path: 'labs',
+        },
+
+        // Changelog routes
+        {
+          children: [
+            {
+              index: true,
+              lazy: () =>
+                import('./(main)/changelog').then((m) => ({
+                  Component: m.MobilePage,
+                })),
+            },
+          ],
+          element: <MobileChangelogLayout locale={locale} />,
+          path: 'changelog',
+        },
+
+        // Profile routes
+        {
+          children: [
+            {
+              index: true,
+              lazy: () =>
+                import('./(main)/profile/(home)').then((m) => ({
+                  Component: m.default,
+                })),
+            },
+            {
+              lazy: () =>
+                import('./(main)/profile/apikey/index').then((m) => ({
+                  Component: m.default,
+                })),
+              path: 'apikey',
+            },
+            {
+              lazy: () =>
+                import('./(main)/profile/security').then((m) => ({
+                  Component: m.MobileProfileSecurityPage,
+                })),
+              path: 'security',
+            },
+            {
+              lazy: () =>
+                import('./(main)/profile/stats').then((m) => ({
+                  Component: m.MobileProfileStatsPage,
+                })),
+              path: 'stats',
+            },
+          ],
+          lazy: () =>
+            import('./(main)/profile/_layout/Mobile').then((m) => ({
+              Component: m.default,
+            })),
+          path: 'profile',
+        },
+
+        // Me routes (mobile personal center)
+        {
+          children: [
+            {
+              children: [
+                {
+                  index: true,
+                  lazy: () =>
+                    import('./(main)/(mobile)/me/(home)').then((m) => ({
+                      Component: m.default,
+                    })),
+                },
+              ],
+              lazy: () =>
+                import('./(main)/(mobile)/me/(home)/layout').then((m) => ({
+                  Component: m.default,
+                })),
+            },
+            {
+              children: [
+                {
+                  lazy: () =>
+                    import('./(main)/(mobile)/me/profile').then((m) => ({
+                      Component: m.default,
+                    })),
+                  path: 'profile',
+                },
+              ],
+              lazy: () =>
+                import('./(main)/(mobile)/me/profile/layout').then((m) => ({
+                  Component: m.default,
+                })),
+            },
+            {
+              children: [
+                {
+                  lazy: () =>
+                    import('./(main)/(mobile)/me/settings').then((m) => ({
+                      Component: m.default,
+                    })),
+                  path: 'settings',
+                },
+              ],
+              lazy: () =>
+                import('./(main)/(mobile)/me/settings/layout').then((m) => ({
+                  Component: m.default,
+                })),
+            },
+          ],
+          path: 'me',
+        },
+
+        // 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]/page.tsx

@@ -1,9 +1,19 @@
-import { Metadata } from 'next';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
 
-import { getCanonicalUrl } from '@/server/utils/url';
+export default async function Page(props: DynamicLayoutProps) {
+  // Get isMobile from variants parameter on server side
+  const isMobile = await RouteVariants.getIsMobile(props);
+  const { locale } = await RouteVariants.getVariantsFromProps(props);
 
-export const metadata: Metadata = {
-  alternates: { canonical: getCanonicalUrl('/') },
-};
+  // Conditionally load and render based on device type
+  // Using native dynamic import ensures complete code splitting
+  // Mobile and Desktop bundles will be completely separate
+  if (isMobile) {
+    const { default: MobileRouter } = await import('./MobileRouter');
+    return <MobileRouter locale={locale} />;
+  }
 
-export { default } from './loading';
+  const { default: DesktopRouter } = await import('./DesktopRouter');
+  return <DesktopRouter locale={locale} />;
+}

package/src/app/desktop/devtools/page.tsx

@@ -86,4 +86,4 @@ const DevTools = memo(() => {
   );
 });
 
-export default DevTools;
+export default DevTools;

package/src/app/desktop/layout.tsx

@@ -28,4 +28,4 @@ const RootLayout = async ({ children }: RootLayoutProps) => {
   );
 };
 
-export default RootLayout;
+export default RootLayout;

package/src/components/BootErrorBoundary/index.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { Component, ErrorInfo, ReactNode } from 'react';
+
+interface BootErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+  /**
+   * Number of hard reload attempts we should try before giving up.
+   * Defaults to 1 to avoid reload loops.
+   */
+  maxBootReloads?: number;
+}
+
+interface BootErrorBoundaryState {
+  hasError: boolean;
+}
+
+const DEFAULT_MAX_RELOADS = 1;
+const RELOAD_SESSION_KEY = 'lobe:boot:hard-reload-attempts';
+const FORCE_RELOAD_QUERY_KEY = '__lobe_force_reload';
+
+/**
+ * BootErrorBoundary guards the SPA bootstrap process. If we hit an error before
+ * the first successful render, we force a one-time hard refresh to pull the
+ * latest assets (similar to Cmd+Shift+R) to recover from cache mismatches.
+ */
+class BootErrorBoundary extends Component<BootErrorBoundaryProps, BootErrorBoundaryState> {
+  public state: BootErrorBoundaryState = { hasError: false };
+
+  private hasBooted = false;
+
+  public componentDidMount() {
+    this.hasBooted = true;
+    this.resetReloadAttempts();
+    this.cleanForceReloadMarker();
+  }
+
+  public static getDerivedStateFromError(): BootErrorBoundaryState {
+    return { hasError: true };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // eslint-disable-next-line no-console
+    console.error('Unexpected boot error captured by BootErrorBoundary', error, errorInfo);
+
+    if (!this.hasBooted && this.tryHardReload()) {
+      return;
+    }
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return this.props.fallback ?? null;
+    }
+
+    return this.props.children;
+  }
+
+  private resetReloadAttempts() {
+    if (typeof window === 'undefined') return;
+    try {
+      window.sessionStorage.removeItem(RELOAD_SESSION_KEY);
+    } catch (error) {
+      // Access to sessionStorage can fail in restricted environments; ignore.
+      if (process.env.NODE_ENV === 'development') {
+        // eslint-disable-next-line no-console
+        console.warn('BootErrorBoundary failed to reset reload attempts', error);
+      }
+    }
+  }
+
+  private tryHardReload() {
+    if (typeof window === 'undefined') return false;
+
+    try {
+      const maxReloads = this.props.maxBootReloads ?? DEFAULT_MAX_RELOADS;
+      const attempts = Number(window.sessionStorage.getItem(RELOAD_SESSION_KEY) ?? '0');
+      const href = window.location.href;
+
+      if (attempts >= maxReloads) {
+        // eslint-disable-next-line no-console
+        console.warn('BootErrorBoundary reached max reload attempts', {
+          attempts,
+          href,
+          maxReloads,
+        });
+        return false;
+      }
+
+      // eslint-disable-next-line no-console
+      console.info('BootErrorBoundary forcing hard reload', { attempts, href, maxReloads });
+      window.sessionStorage.setItem(RELOAD_SESSION_KEY, String(attempts + 1));
+    } catch (error) {
+      // If sessionStorage is unavailable, we still attempt a reload once.
+      if (process.env.NODE_ENV === 'development') {
+        // eslint-disable-next-line no-console
+        console.warn('BootErrorBoundary failed to persist reload attempts', error);
+      }
+    }
+
+    this.forceHardReload();
+    return true;
+  }
+
+  private forceHardReload() {
+    const { location } = window;
+
+    // Append a cache-busting query parameter so the browser bypasses cached assets.
+    const url = new URL(location.href);
+    url.searchParams.set(FORCE_RELOAD_QUERY_KEY, Date.now().toString());
+
+    location.replace(url.toString());
+  }
+
+  private cleanForceReloadMarker() {
+    if (typeof window === 'undefined') return;
+    const { history, location } = window;
+
+    const url = new URL(location.href);
+
+    if (!url.searchParams.has(FORCE_RELOAD_QUERY_KEY)) return;
+
+    url.searchParams.delete(FORCE_RELOAD_QUERY_KEY);
+    history.replaceState(history.state, '', url.toString());
+  }
+}
+
+export default BootErrorBoundary;

package/src/components/mdx/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_IMAGE_WIDTH = 800;

package/src/features/ChangelogModal/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useTimeout } from 'ahooks';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { useGlobalStore } from '@/store/global';
 
@@ -11,14 +11,14 @@ const ChangelogModal = memo<{ currentId?: string }>(({ currentId }) => {
     s.status.latestChangelogId,
     s.updateSystemStatus,
   ]);
-  const router = useRouter();
+  const navigate = useNavigate();
 
   useTimeout(() => {
     if (!currentId) return;
     if (!latestChangelogId) {
       updateSystemStatus({ latestChangelogId: currentId });
     } else if (latestChangelogId !== currentId) {
-      router.push('/changelog/modal');
+      navigate('/changelog/modal');
     }
   }, 1000);
 

package/src/features/KnowledgeManager/FileExplorer/index.tsx

@@ -3,13 +3,13 @@
 import { Text } from '@lobehub/ui';
 import { VirtuosoMasonry } from '@virtuoso.dev/masonry';
 import { createStyles } from 'antd-style';
-import { useQueryState } from 'nuqs';
 import { rgba } from 'polished';
 import React, { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 import { Virtuoso } from 'react-virtuoso';
 
+import { useQueryState } from '@/hooks/useQueryParam';
 import { useFileStore } from '@/store/file';
 import { useGlobalStore } from '@/store/global';
 import { FilesTabs, SortType } from '@/types/files';
@@ -113,9 +113,9 @@ const FileExplorer = memo<FileExplorerProps>(({ knowledgeBaseId, category, onOpe
   const { data, isLoading } = useFetchKnowledgeItems({
     category,
     knowledgeBaseId,
-    q: query,
-    sortType,
-    sorter,
+    q: query ?? undefined,
+    sortType: sortType ?? undefined,
+    sorter: sorter ?? undefined,
     ...viewConfig,
   });
 

package/src/features/KnowledgeManager/Header/FilesSearchBar.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { SearchBar } from '@lobehub/ui';
-import { useQueryState } from 'nuqs';
 import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useQueryState } from '@/hooks/useQueryParam';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 import { HotkeyEnum } from '@/types/hotkey';

package/src/features/User/UserPanel/PanelContent.tsx

@@ -1,5 +1,4 @@
-import { enableNextAuth, isDesktop } from '@lobechat/const';
-import Link from 'next/link';
+import { Link } from 'react-router-dom';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -15,6 +14,8 @@ import UserLoginOrSignup from '../UserLoginOrSignup';
 import LangButton from './LangButton';
 import ThemeButton from './ThemeButton';
 import { useMenu } from './useMenu';
+import { enableNextAuth } from '@/const/auth';
+import { isDesktop } from '@/const/version';
 
 const PanelContent = memo<{ closePopover: () => void }>(({ closePopover }) => {
   const router = useRouter();
@@ -41,7 +42,7 @@ const PanelContent = memo<{ closePopover: () => void }>(({ closePopover }) => {
         <>
           <UserInfo avatarProps={{ clickable: false }} />
 
-          <Link href={'/profile/stats'} style={{ color: 'inherit' }}>
+          <Link style={{ color: 'inherit' }} to={'/profile/stats'}>
             <DataStatistics />
           </Link>
         </>