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

package/src/app/[variants]/(main)/discover/(list)/_layout/Mobile/Nav.tsx

@@ -9,7 +9,6 @@ import { Flexbox } from 'react-layout-kit';
 import { useNavigate } from 'react-router-dom';
 
 import Menu from '@/components/Menu';
-import { withSuspense } from '@/components/withSuspense';
 import { DiscoverTab } from '@/types/discover';
 
 import { useNav } from '../../../features/useNav';
@@ -78,9 +77,9 @@ const Nav = memo(() => {
           items={items}
           onClick={({ key }) => {
             if (key === DiscoverTab.Home) {
-              navigate('/');
+              navigate('/discover');
             } else {
-              navigate(`/${key}`);
+              navigate(`/discover/${key}`);
             }
           }}
           selectable
@@ -91,4 +90,4 @@ const Nav = memo(() => {
   );
 });
 
-export default withSuspense(Nav);
+export default Nav;

package/src/app/[variants]/(main)/discover/(list)/_layout/Mobile/index.tsx

@@ -1,12 +1,13 @@
-import { PropsWithChildren } from 'react';
 
 import MobileContentLayout from '@/components/server/MobileNavLayout';
 import Footer from '@/features/Setting/Footer';
 
 import { SCROLL_PARENT_ID } from '../../../features/const';
 import Header from './Header';
+import { Outlet } from 'react-router-dom';
 
-const Layout = ({ children }: PropsWithChildren) => {
+
+const Layout = () => {
   return (
     <MobileContentLayout
       gap={16}
@@ -15,7 +16,7 @@ const Layout = ({ children }: PropsWithChildren) => {
       style={{ paddingInline: 16, paddingTop: 8 }}
       withNav
     >
-      {children}
+      <Outlet />
       <div />
       <Footer />
     </MobileContentLayout>

package/src/app/[variants]/(main)/discover/(list)/assistant/_layout/Desktop.tsx

@@ -1,17 +1,16 @@
-import { PropsWithChildren } from 'react';
 import { Flexbox } from 'react-layout-kit';
-
+import { Outlet } from 'react-router-dom';
 import CategoryContainer from '../../../components/CategoryContainer';
 import Category from '../features/Category';
 
-const Layout = ({ children }: PropsWithChildren) => {
+const Layout = () => {
   return (
     <Flexbox gap={24} horizontal style={{ position: 'relative' }} width={'100%'}>
       <CategoryContainer>
         <Category />
       </CategoryContainer>
       <Flexbox flex={1} gap={16}>
-        {children}
+        <Outlet />
       </Flexbox>
     </Flexbox>
   );

package/src/app/[variants]/(main)/discover/(list)/assistant/_layout/Mobile.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren } from 'react';
+import { Outlet } from 'react-router-dom';
 
-const Layout = ({ children }: PropsWithChildren) => {
-  return children;
+const Layout = () => {
+  return <Outlet />;
 };
 
 Layout.displayName = 'MobileDiscoverAssistantsLayout';

package/src/app/[variants]/(main)/discover/(list)/assistant/features/List/Item.tsx

@@ -64,17 +64,17 @@ const AssistantItem = memo<DiscoverAssistantItem>(
     backgroundColor,
   }) => {
 
-    console.log("author",author)
     const { styles, theme } = useStyles();
     const navigate = useNavigate();
     const { source } = useQuery() as { source?: AssistantMarketSource };
     const link = qs.stringifyUrl(
       {
         query: { source },
-        url: urlJoin('/assistant', identifier),
+        url: urlJoin('/discover/assistant', identifier),
       },
       { skipNull: true },
     );
+
     const { t } = useTranslation('discover');
 
     return (

package/src/app/[variants]/(main)/discover/(list)/assistant/{AssistantPage.tsx → index.tsx}

@@ -3,7 +3,6 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { withSuspense } from '@/components/withSuspense';
 import { useQuery } from '@/hooks/useQuery';
 import { useDiscoverStore } from '@/store/discover';
 import { AssistantQueryParams, DiscoverTab } from '@/types/discover';
@@ -25,8 +24,6 @@ const AssistantPage = memo<{ mobile?: boolean }>(() => {
     source,
   });
 
-  console.log("data",data)
-
   if (isLoading || !data) return <Loading />;
 
   const { items, currentPage, pageSize, totalCount } = data;
@@ -44,4 +41,21 @@ const AssistantPage = memo<{ mobile?: boolean }>(() => {
   );
 });
 
-export default withSuspense(AssistantPage);
+const MobileAssistantPage = memo<{ mobile?: boolean }>(() => {
+  return (
+    <AssistantPage mobile={true} />
+  );
+});
+
+const DesktopAssistantPage = memo<{ mobile?: boolean }>(() => {
+  return (
+    <AssistantPage mobile={false} />
+  );
+});
+
+MobileAssistantPage.displayName = 'MobileAssistantPage';
+
+DesktopAssistantPage.displayName = 'DesktopAssistantPage';
+
+export { DesktopAssistantPage, MobileAssistantPage };
+export default AssistantPage;

package/src/app/[variants]/(main)/discover/(list)/features/SortButton/index.tsx

@@ -1,11 +1,11 @@
 import { Dropdown, DropdownMenuItemType, Icon } from '@lobehub/ui';
 import { Button } from 'antd';
 import { ArrowDownWideNarrow, ChevronDown } from 'lucide-react';
-import { usePathname } from 'next/navigation';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useQuery } from '@/hooks/useQuery';
+import { usePathname } from '@/app/[variants]/(main)/hooks/usePathname';
+import { useQuery } from '@/app/[variants]/(main)/hooks/useQuery';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { useMarketAuth } from '@/layout/AuthProvider/MarketAuth';
 import {

package/src/app/[variants]/(main)/discover/(list)/mcp/_layout/Desktop.tsx

@@ -1,17 +1,17 @@
-import { PropsWithChildren } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import CategoryContainer from '../../../components/CategoryContainer';
 import Category from '../features/Category';
+import { Outlet } from 'react-router-dom';
 
-const Layout = ({ children }: PropsWithChildren) => {
+const Layout = () => {
   return (
     <Flexbox gap={24} horizontal style={{ position: 'relative' }} width={'100%'}>
       <CategoryContainer>
         <Category />
       </CategoryContainer>
       <Flexbox flex={1} gap={16}>
-        {children}
+        <Outlet />
       </Flexbox>
     </Flexbox>
   );

package/src/app/[variants]/(main)/discover/(list)/mcp/_layout/Mobile.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren } from 'react';
+import { Outlet } from 'react-router-dom';
 
-const Layout = ({ children }: PropsWithChildren) => {
-  return children;
+const Layout = () => {
+  return <Outlet />;
 };
 
 Layout.displayName = 'MobileDiscoverToolsLayout';

package/src/app/[variants]/(main)/discover/(list)/mcp/features/List/Item.tsx

@@ -78,7 +78,7 @@ const McpItem = memo<DiscoverMcpItem>(
     const { t } = useTranslation('discover');
     const { styles, theme } = useStyles();
     const navigate = useNavigate();
-    const link = urlJoin('/mcp', identifier);
+    const link = urlJoin('/discover/mcp', identifier);
     return (
       <Block
         clickable

package/src/app/[variants]/(main)/discover/(list)/mcp/{McpPage.tsx → index.tsx}

@@ -3,7 +3,6 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { withSuspense } from '@/components/withSuspense';
 import { useQuery } from '@/hooks/useQuery';
 import { useDiscoverStore } from '@/store/discover';
 import { DiscoverTab, McpQueryParams } from '@/types/discover';
@@ -41,4 +40,12 @@ const McpPage = memo<{ mobile?: boolean }>(() => {
   );
 });
 
-export default withSuspense(McpPage);
+const DesktopMcpPage = memo<{ mobile?: boolean }>(() => {
+  return <McpPage mobile={false} />;
+});
+
+const MobileMcpPage = memo<{ mobile?: boolean }>(() => {
+  return <McpPage mobile={true} />;
+});
+
+export { DesktopMcpPage, MobileMcpPage };

package/src/app/[variants]/(main)/discover/(list)/model/_layout/Desktop.tsx

@@ -1,17 +1,17 @@
-import { PropsWithChildren } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import { Outlet } from 'react-router-dom';
 
 import CategoryContainer from '../../../components/CategoryContainer';
 import Category from '../features/Category';
 
-const Layout = ({ children }: PropsWithChildren) => {
+const Layout = () => {
   return (
     <Flexbox gap={24} horizontal style={{ position: 'relative' }} width={'100%'}>
       <CategoryContainer>
         <Category />
       </CategoryContainer>
       <Flexbox flex={1} gap={16}>
-        {children}
+        {<Outlet />}
       </Flexbox>
     </Flexbox>
   );

package/src/app/[variants]/(main)/discover/(list)/model/_layout/Mobile.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren } from 'react';
+import { Outlet } from 'react-router-dom';
 
-const Layout = ({ children }: PropsWithChildren) => {
-  return children;
+const Layout = () => {
+  return <Outlet />;
 };
 
 Layout.displayName = 'MobileDiscoverModelsLayout';

package/src/app/[variants]/(main)/discover/(list)/model/features/List/Item.tsx

@@ -57,7 +57,7 @@ const ModelItem = memo<DiscoverModelItem>(
     const { t } = useTranslation(['models', 'discover']);
     const { styles } = useStyles();
     const navigate = useNavigate();
-    const link = urlJoin('/model', identifier);
+    const link = urlJoin('/discover/model', identifier);
     return (
       <Block
         clickable

package/src/app/[variants]/(main)/discover/(list)/model/{ModelPage.tsx → index.tsx}

@@ -3,7 +3,6 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { withSuspense } from '@/components/withSuspense';
 import { useQuery } from '@/hooks/useQuery';
 import { useDiscoverStore } from '@/store/discover';
 import { DiscoverTab, ModelQueryParams } from '@/types/discover';
@@ -41,4 +40,12 @@ const ModelPage = memo<{ mobile?: boolean }>(() => {
   );
 });
 
-export default withSuspense(ModelPage);
+const DesktopModelPage = memo<{ mobile?: boolean }>(() => {
+  return <ModelPage mobile={false} />;
+});
+
+const MobileModelPage = memo<{ mobile?: boolean }>(() => {
+  return <ModelPage mobile={true} />;
+});
+
+export { DesktopModelPage, MobileModelPage };

package/src/app/[variants]/(main)/discover/(list)/provider/features/List/Item.tsx

@@ -48,7 +48,7 @@ const ProviderItem = memo<DiscoverProviderItem>(
   ({ url, name, description, identifier, models }) => {
     const { styles, theme } = useStyles();
     const navigate = useNavigate();
-    const link = urlJoin('/provider', identifier);
+    const link = urlJoin('/discover/provider', identifier);
     const { t } = useTranslation(['discover', 'providers']);
 
     return (

package/src/app/[variants]/(main)/discover/(list)/provider/{Client.tsx → index.tsx}

@@ -3,7 +3,6 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { withSuspense } from '@/components/withSuspense';
 import { useQuery } from '@/hooks/useQuery';
 import { useDiscoverStore } from '@/store/discover';
 import { DiscoverTab, ProviderQueryParams } from '@/types/discover';
@@ -40,4 +39,12 @@ const Client = memo<{ mobile?: boolean }>(() => {
   );
 });
 
-export default withSuspense(Client);
+const DesktopProviderPage = memo<{ mobile?: boolean }>(() => {
+  return <Client mobile={false} />;
+});
+
+const MobileProviderPage = memo<{ mobile?: boolean }>(() => {
+  return <Client mobile={true} />;
+});
+
+export { DesktopProviderPage, MobileProviderPage };

package/src/app/[variants]/(main)/discover/_layout/Desktop/index.tsx

@@ -1,17 +1,17 @@
-import { PropsWithChildren } from 'react';
 
 import NProgress from '@/components/NProgress';
 
 import Container from './Container';
-import Header from './Header';
+import Header from './Header';  
+import { Outlet } from 'react-router-dom';
 
-const Layout = ({ children }: PropsWithChildren) => {
+const Layout = () => {
   return (
     <>
       <NProgress />
       <Container>
         <Header />
-        {children}
+        <Outlet />
       </Container>
       {/* ↓ cloud slot ↓ */}
 

package/src/app/[variants]/(main)/discover/_layout/Mobile/index.tsx

@@ -1,12 +1,12 @@
-import { PropsWithChildren } from 'react';
 
 import NProgress from '@/components/NProgress';
+import { Outlet } from 'react-router-dom';
 
-const Layout = ({ children }: PropsWithChildren) => {
+const Layout = () => {
   return (
     <>
       <NProgress />
-      {children}
+      <Outlet />
     </>
   );
 };

package/src/app/[variants]/(main)/discover/components/Title.tsx

@@ -59,7 +59,7 @@ const Title = memo<TitleProps>(({ tag, children, moreLink, more }) => {
         title
       )}
       {moreLink && (
-        <Link target={moreLink.startsWith('http') ? '_blank' : undefined} to={moreLink}>
+        <Link target={moreLink.startsWith('http') ? '_blank' : undefined} to={`/discover${moreLink}`}>
           <Button className={styles.more} style={{ paddingInline: 6 }} type={'text'}>
             <span>{more}</span>
             <Icon icon={ChevronRight} />

package/src/app/[variants]/(main)/discover/features/Search.tsx

@@ -2,13 +2,13 @@
 
 import { SearchBar, SearchBarProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { usePathname } from 'next/navigation';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
 
+import { usePathname } from '@/app/[variants]/(main)/hooks/usePathname';
+import { useQuery } from '@/app/[variants]/(main)/hooks/useQuery';
 import { withSuspense } from '@/components/withSuspense';
-import { useQuery } from '@/hooks/useQuery';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 
 export const useStyles = createStyles(({ css, prefixCls, token }) => ({

package/src/app/[variants]/(main)/discover/features/useNav.tsx

@@ -3,7 +3,7 @@ import { Icon } from '@lobehub/ui';
 import { Bot, Brain, BrainCircuit, House } from 'lucide-react';
 import { ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 import type { MenuProps } from '@/components/Menu';
 import { DiscoverTab } from '@/types/discover';
@@ -13,7 +13,6 @@ const ICON_SIZE = 16;
 export const useNav = () => {
   const location = useLocation();
   const { t } = useTranslation('discover');
-
   const activeKey = useMemo(() => {
     const pathname = location.pathname;
     for (const value of Object.values(DiscoverTab)) {
@@ -32,45 +31,45 @@ export const useNav = () => {
         icon: <Icon icon={House} size={ICON_SIZE} />,
         key: DiscoverTab.Home,
         label: (
-          <Link style={{ color: 'inherit' }} to={'/'}>
+          <div style={{ color: 'inherit', display: 'inline' }}>
             {t('tab.home')}
-          </Link>
+          </div>
         ),
       },
       {
         icon: <Icon icon={Bot} size={ICON_SIZE} />,
         key: DiscoverTab.Assistants,
         label: (
-          <Link style={{ color: 'inherit' }} to={`/${DiscoverTab.Assistants}`}>
+          <div style={{ color: 'inherit', display: 'inline' }} >
             {t('tab.assistant')}
-          </Link>
+          </div>
         ),
       },
       {
         icon: <MCP className={'anticon'} size={ICON_SIZE} />,
         key: DiscoverTab.Mcp,
         label: (
-          <Link style={{ color: 'inherit' }} to={`/${DiscoverTab.Mcp}`}>
+          <div style={{ color: 'inherit', display: 'inline' }} >
             {`MCP ${t('tab.plugin')}`}
-          </Link>
+          </div>
         ),
       },
       {
         icon: <Icon icon={Brain} size={ICON_SIZE} />,
         key: DiscoverTab.Models,
         label: (
-          <Link style={{ color: 'inherit' }} to={`/${DiscoverTab.Models}`}>
+          <div style={{ color: 'inherit', display: 'inline' }} >
             {t('tab.model')}
-          </Link>
+          </div>
         ),
       },
       {
         icon: <Icon icon={BrainCircuit} size={ICON_SIZE} />,
         key: DiscoverTab.Providers,
         label: (
-          <Link style={{ color: 'inherit' }} to={`/${DiscoverTab.Providers}`}>
+          <div style={{ color: 'inherit', display: 'inline' }} >
             {t('tab.provider')}
-          </Link>
+          </div>
         ),
       },
     ],

package/src/app/[variants]/(main)/hooks/useActiveTabKey.ts

@@ -0,0 +1,40 @@
+import { useLocation, useSearchParams } from 'react-router-dom';
+
+import { ProfileTabs, SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
+
+/**
+ * Returns the active tab key (chat/discover/settings/...)
+ * React Router version for (main) directory
+ */
+export const useActiveTabKey = () => {
+  const location = useLocation();
+  const pathname = location.pathname;
+
+  return pathname.split('/').find(Boolean) as SidebarTabKey;
+};
+
+/**
+ * Returns the active setting page key (?active=common/sync/agent/...)
+ * React Router version for (main) directory
+ */
+export const useActiveSettingsKey = () => {
+  const [searchParams] = useSearchParams();
+  const tabs = searchParams.get('active');
+  if (!tabs) return SettingsTabs.Common;
+  return tabs as SettingsTabs;
+};
+
+/**
+ * Returns the active profile page key (profile/security/stats/...)
+ * React Router version for (main) directory
+ */
+export const useActiveProfileKey = () => {
+  const location = useLocation();
+  const pathname = location.pathname;
+
+  const tabs = pathname.split('/').findLast(Boolean);
+
+  if (tabs === 'profile') return ProfileTabs.Profile;
+
+  return tabs as ProfileTabs;
+};

package/src/app/[variants]/(main)/hooks/usePathname.ts

@@ -0,0 +1,10 @@
+import { useLocation } from 'react-router-dom';
+
+/**
+ * Hook to get current pathname
+ * React Router version for (main) directory
+ */
+export const usePathname = () => {
+  const location = useLocation();
+  return location.pathname;
+};

package/src/app/[variants]/(main)/hooks/useQuery.ts

@@ -0,0 +1,12 @@
+import qs from 'query-string';
+import { useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+/**
+ * Hook to get query parameters
+ * React Router version for (main) directory
+ */
+export const useQuery = () => {
+  const [searchParams] = useSearchParams();
+  return useMemo(() => qs.parse(searchParams.toString()), [searchParams]);
+};

package/src/app/[variants]/(main)/hooks/useRouter.ts

@@ -0,0 +1,22 @@
+import { useNavigate } from 'react-router-dom';
+
+/**
+ * Hook to get router navigation functions
+ * React Router version for (main) directory
+ *
+ * Provides a Next.js-like API using React Router
+ */
+export const useRouter = () => {
+  const navigate = useNavigate();
+
+  return {
+    back: () => navigate(-1),
+    forward: () => navigate(1),
+    // Note: prefetch is not supported in React Router
+    prefetch: () => {},
+
+    push: (href: string) => navigate(href),
+
+    replace: (href: string) => navigate(href, { replace: true }),
+  };
+};

package/src/app/[variants]/(main)/hooks/useSearchParams.ts

@@ -0,0 +1,11 @@
+import { useSearchParams as useReactRouterSearchParams } from 'react-router-dom';
+
+/**
+ * Hook to get search params
+ * React Router version for (main) directory
+ *
+ * Returns [searchParams, setSearchParams] tuple similar to React Router
+ */
+export const useSearchParams = () => {
+  return useReactRouterSearchParams();
+};

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/ModelSelect/index.tsx

@@ -3,10 +3,10 @@ import { ActionIcon, Icon, Select, type SelectProps } from '@lobehub/ui';
 import { createStyles, useTheme } from 'antd-style';
 import { LucideArrowRight, LucideBolt } from 'lucide-react';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { useNavigate } from 'react-router-dom';
 
 import { ProviderItemRender } from '@/components/ModelSelect';
 import { useAiInfraStore } from '@/store/aiInfra';
@@ -34,7 +34,7 @@ const ModelSelect = memo(() => {
   const { styles } = useStyles();
   const { t } = useTranslation('components');
   const theme = useTheme();
-  const router = useRouter();
+  const navigate = useNavigate();
 
   const [currentModel, currentProvider] = useImageStore((s) => [
     imageGenerationConfigSelectors.model(s),
@@ -64,7 +64,7 @@ const ModelSelect = memo(() => {
               </Flexbox>
             ),
             onClick: () => {
-              router.push(`/settings?active=provider&provider=${provider.id}`);
+              navigate(`/settings?active=provider&provider=${provider.id}`);
             },
             value: `${provider.id}/empty`,
           },
@@ -86,7 +86,7 @@ const ModelSelect = memo(() => {
             </Flexbox>
           ),
           onClick: () => {
-            router.push('/settings?active=provider');
+            navigate('/settings?active=provider');
           },
           value: 'no-provider',
         },
@@ -118,7 +118,7 @@ const ModelSelect = memo(() => {
       ),
       options: getImageModels(provider),
     }));
-  }, [enabledImageModelList, t, theme.colorTextTertiary, router]);
+  }, [enabledImageModelList, t, theme.colorTextTertiary, navigate]);
 
   const labelRender: SelectProps['labelRender'] = (props) => {
     const modelInfo = enabledImageModelList

package/src/app/[variants]/(main)/image/@topic/features/Topics/TopicUrlSync.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { useQueryState } from 'nuqs';
 import { useLayoutEffect } from 'react';
 import { createStoreUpdater } from 'zustand-utils';
 
+import { useQueryState } from '@/hooks/useQueryParam';
 import { useImageStore } from '@/store/image';
 
 /**

package/src/app/[variants]/(main)/image/ComingSoon.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { memo } from 'react';
+
+const ComingSoonPage = memo(() => {
+  return (
+    <div>
+      <h2>Coming Soon!</h2>
+    </div>
+  );
+});
+
+ComingSoonPage.displayName = 'ComingSoonPage';
+
+export default ComingSoonPage;