feat: add loading back

next.config.ts

@@ -249,11 +249,11 @@ const nextConfig: NextConfig = {
     //   permanent: true,
     //   source: '/settings',
     // },
-    {
-      destination: '/chat',
-      permanent: false,
-      source: '/',
-    },
+    // {
+    //   destination: '/chat',
+    //   permanent: false,
+    //   source: '/',
+    // },
     {
       destination: '/chat',
       permanent: true,

package.json

@@ -397,4 +397,4 @@
       "@vercel/speed-insights"
     ]
   }
-}
+}

scripts/prebuild.mts

@@ -13,7 +13,7 @@ const partialBuildPages = [
   {
     name: 'changelog',
     disabled: isDesktop,
-    paths: ['src/app/[variants]/@modal/(.)changelog', 'src/app/[variants]/(main)/changelog'],
+    paths: ['src/app/[variants]/(main)/changelog'],
   },
   {
     name: 'auth',

src/app/(backend)/trpc/desktop/[trpc]/route.ts

@@ -17,12 +17,12 @@ const handler = (req: NextRequest) => {
      */
     createContext: () => createLambdaContext(req),
 
-    endpoint: '/trpc/desktop',
+        endpoint: '/trpc/desktop',
 
-    onError: ({ error, path, type }) => {
-      pino.info(`Error in tRPC handler (desktop) on path: ${path}, type: ${type}`);
-      console.error(error);
-    },
+        onError: ({ error, path, type }) => {
+            pino.info(`Error in tRPC handler (desktop) on path: ${path}, type: ${type}`);
+            console.error(error);
+        },
 
     req: preparedReq,
     responseMeta({ ctx }) {
@@ -34,4 +34,4 @@ const handler = (req: NextRequest) => {
   });
 };
 
-export { handler as GET, handler as POST };
+export { handler as GET, handler as POST };

src/app/[variants]/(main)/(mobile)/me/(home)/__tests__/UserBanner.test.tsx

@@ -6,10 +6,12 @@ import { useUserStore } from '@/store/user';
 import UserBanner from '../features/UserBanner';
 
 // Mock dependencies
-vi.mock('next/navigation', () => ({
-  useRouter: vi.fn(() => ({
-    push: vi.fn(),
-  })),
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', () => ({
+  Link: ({ to, children }: { to: string; children: React.ReactNode }) => (
+    <a href={to}>{children}</a>
+  ),
+  useNavigate: () => mockNavigate,
 }));
 
 vi.mock('@/features/User/UserInfo', () => ({
@@ -45,6 +47,7 @@ vi.mock('@/const/auth', () => ({
 
 afterEach(() => {
   enableAuth = true;
+  mockNavigate.mockReset();
 });
 
 describe('UserBanner', () => {

src/app/[variants]/(main)/(mobile)/me/(home)/__tests__/useCategory.test.tsx

@@ -11,10 +11,9 @@ const wrapper: React.JSXElementConstructor<{ children: React.ReactNode }> = ({ c
 );
 
 // Mock dependencies
-vi.mock('next/navigation', () => ({
-  useRouter: vi.fn(() => ({
-    push: vi.fn(),
-  })),
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', () => ({
+  useNavigate: () => mockNavigate,
 }));
 
 vi.mock('react-i18next', () => ({
@@ -48,6 +47,7 @@ vi.mock('@/const/version', async (importOriginal) => {
 afterEach(() => {
   enableAuth = true;
   enableClerk = true;
+  mockNavigate.mockReset();
 });
 
 describe('useCategory', () => {

src/app/[variants]/(main)/(mobile)/me/(home)/features/UserBanner.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 import { Flexbox } from 'react-layout-kit';
 
 import { enableAuth, enableNextAuth } from '@/const/auth';
@@ -13,7 +12,7 @@ import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';
 
 const UserBanner = memo(() => {
-  const router = useRouter();
+  const navigate = useNavigate();
   const isLoginWithAuth = useUserStore(authSelectors.isLoginWithAuth);
   const [signIn] = useUserStore((s) => [s.openLogin]);
 
@@ -21,10 +20,10 @@ const UserBanner = memo(() => {
     <Flexbox gap={12} paddingBlock={8}>
       {!enableAuth || (enableAuth && isLoginWithAuth) ? (
         <>
-          <Link href={'/profile'} style={{ color: 'inherit' }}>
+          <Link style={{ color: 'inherit' }} to="/profile">
             <UserInfo />
           </Link>
-          <Link href={'/profile/stats'} style={{ color: 'inherit' }}>
+          <Link style={{ color: 'inherit' }} to="/profile/stats">
             <DataStatistics paddingInline={12} />
           </Link>
         </>
@@ -36,7 +35,7 @@ const UserBanner = memo(() => {
               signIn();
               return;
             }
-            router.push('/login');
+            navigate('/login');
           }}
         />
       )}

src/app/[variants]/(main)/(mobile)/me/(home)/features/useCategory.tsx

@@ -8,8 +8,8 @@ import {
   FileClockIcon,
   Settings2,
 } from 'lucide-react';
-import { useRouter } from 'next/navigation';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 import { CellProps } from '@/components/Cell';
 import { usePWAInstall } from '@/hooks/usePWAInstall';
@@ -18,7 +18,7 @@ import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';
 
 export const useCategory = () => {
-  const router = useRouter();
+  const navigate = useNavigate();
   const { canInstall, install } = usePWAInstall();
   const { t } = useTranslation(['common', 'setting', 'auth']);
   const { showCloudPromotion, hideDocs } = useServerConfigStore(featureFlagsSelectors);
@@ -29,7 +29,7 @@ export const useCategory = () => {
       icon: CircleUserRound,
       key: 'profile',
       label: t('userPanel.profile'),
-      onClick: () => router.push('/me/profile'),
+      onClick: () => navigate('/me/profile'),
     },
   ];
 
@@ -38,7 +38,7 @@ export const useCategory = () => {
       icon: Settings2,
       key: 'setting',
       label: t('userPanel.setting'),
-      onClick: () => router.push('/me/settings'),
+      onClick: () => navigate('/me/settings'),
     },
     {
       type: 'divider',
@@ -58,9 +58,6 @@ export const useCategory = () => {
   ];
 
   /* ↓ cloud slot ↓ */
-
-  /* ↑ cloud slot ↑ */
-
   const helps: CellProps[] = [
     showCloudPromotion && {
       icon: Cloudy,
@@ -84,7 +81,7 @@ export const useCategory = () => {
       icon: FileClockIcon,
       key: 'changelog',
       label: t('changelog'),
-      onClick: () => router.push('/changelog'),
+      onClick: () => navigate('/changelog'),
     },
   ].filter(Boolean) as CellProps[];
 

src/app/[variants]/(main)/(mobile)/me/(home)/index.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+import BrandWatermark from '@/components/BrandWatermark';
+
+import Category from './features/Category';
+import UserBanner from './features/UserBanner';
+
+const MeHomePage = memo(() => {
+  return (
+    <>
+      <UserBanner />
+      <Category />
+      <Center padding={16}>
+        <BrandWatermark />
+      </Center>
+    </>
+  );
+});
+
+MeHomePage.displayName = 'MeHomePage';
+
+export default MeHomePage;

src/app/[variants]/(main)/(mobile)/me/(home)/layout.tsx

@@ -1,18 +1,15 @@
-import { PropsWithChildren, Suspense } from 'react';
+import MobileContentLayout from "@/components/server/MobileNavLayout";
+import Loading from "@/components/Loading/BrandTextLoading";
+import { Outlet } from "react-router-dom";
+import Header from "./features/Header";
+import { Suspense } from "react";
 
-import Loading from '@/components/Loading/BrandTextLoading';
-import MobileContentLayout from '@/components/server/MobileNavLayout';
-
-import Header from './features/Header';
-
-const Layout = ({ children }: PropsWithChildren) => {
-  return (
-    <MobileContentLayout header={<Header />} withNav>
-      <Suspense fallback={<Loading />}>{children}</Suspense>
+const Layout = () => {
+    return <MobileContentLayout header={<Header />} withNav>
+        <Suspense fallback={<Loading />}>
+            <Outlet />
+        </Suspense>
     </MobileContentLayout>
-  );
-};
+}
 
-Layout.displayName = 'MeLayout';
-
-export default Layout;
+export default Layout;

src/app/[variants]/(main)/(mobile)/me/(home)/loading.tsx

@@ -1,38 +0,0 @@
-'use client';
-
-import { Skeleton } from 'antd';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import Divider from '@/components/Cell/Divider';
-import SkeletonLoading from '@/components/Loading/SkeletonLoading';
-
-const Loading = memo(() => {
-  return (
-    <>
-      <Flexbox align={'center'} gap={12} horizontal paddingBlock={12} paddingInline={12}>
-        <Skeleton.Avatar active shape={'circle'} size={48} />
-        <Skeleton.Button active block />
-      </Flexbox>
-      <Flexbox gap={4} horizontal paddingBlock={12} paddingInline={16}>
-        <Skeleton.Button active block />
-        <Skeleton.Button active block />
-        <Skeleton.Button active block />
-      </Flexbox>
-      <Divider />
-      <SkeletonLoading
-        active
-        paragraph={{ rows: 6, style: { marginBottom: 0 }, width: '100%' }}
-        title={false}
-      />
-      <Divider />
-      <SkeletonLoading
-        active
-        paragraph={{ rows: 3, style: { marginBottom: 0 }, width: '100%' }}
-        title={false}
-      />
-    </>
-  );
-});
-
-export default Loading;

src/app/[variants]/(main)/(mobile)/me/(home)/page.tsx

@@ -1,40 +0,0 @@
-import { redirect } from 'next/navigation';
-import { Center } from 'react-layout-kit';
-
-import BrandWatermark from '@/components/BrandWatermark';
-import { metadataModule } from '@/server/metadata';
-import { translation } from '@/server/translation';
-import { DynamicLayoutProps } from '@/types/next';
-import { RouteVariants } from '@/utils/server/routeVariants';
-
-import Category from './features/Category';
-import UserBanner from './features/UserBanner';
-
-export const generateMetadata = async (props: DynamicLayoutProps) => {
-  const locale = await RouteVariants.getLocale(props);
-  const { t } = await translation('common', locale);
-  return metadataModule.generate({
-    title: t('tab.me'),
-    url: '/me',
-  });
-};
-
-const Page = async (props: DynamicLayoutProps) => {
-  const isMobile = await RouteVariants.getIsMobile(props);
-
-  if (!isMobile) return redirect('/chat');
-
-  return (
-    <>
-      <UserBanner />
-      <Category />
-      <Center padding={16}>
-        <BrandWatermark />
-      </Center>
-    </>
-  );
-};
-
-Page.displayName = 'Me';
-
-export default Page;

src/app/[variants]/(main)/(mobile)/me/profile/features/Category.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import { ChartColumnBigIcon, LogOut, ShieldCheck, UserCircle } from 'lucide-react';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 import Cell, { CellProps } from '@/components/Cell';
 import { ProfileTabs } from '@/store/global/initialState';
@@ -16,26 +16,26 @@ const Category = memo(() => {
     authSelectors.isLoginWithClerk(s),
     s.logout,
   ]);
-  const router = useRouter();
+  const navigate = useNavigate();
   const { t } = useTranslation('auth');
   const items: CellProps[] = [
     {
       icon: UserCircle,
       key: ProfileTabs.Profile,
       label: t('tab.profile'),
-      onClick: () => router.push('/profile'),
+      onClick: () => navigate('/profile'),
     },
     isLoginWithClerk && {
       icon: ShieldCheck,
       key: ProfileTabs.Security,
       label: t('tab.security'),
-      onClick: () => router.push('/profile/security'),
+      onClick: () => navigate('/profile/security'),
     },
     {
       icon: ChartColumnBigIcon,
       key: ProfileTabs.Stats,
       label: t('tab.stats'),
-      onClick: () => router.push('/profile/stats'),
+      onClick: () => navigate('/profile/stats'),
     },
     isLogin && {
       type: 'divider',
@@ -46,7 +46,7 @@ const Category = memo(() => {
       label: t('signout', { ns: 'auth' }),
       onClick: () => {
         signOut();
-        router.push('/login');
+        navigate('/login');
       },
     },
   ].filter(Boolean) as CellProps[];

src/app/[variants]/(main)/(mobile)/me/profile/features/Header.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import { ChatHeader } from '@lobehub/ui/mobile';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 import { Flexbox } from 'react-layout-kit';
 
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
@@ -11,7 +11,7 @@ import { mobileHeaderSticky } from '@/styles/mobileHeader';
 const Header = memo(() => {
   const { t } = useTranslation('common');
 
-  const router = useRouter();
+  const navigate = useNavigate();
   return (
     <ChatHeader
       center={
@@ -23,7 +23,7 @@ const Header = memo(() => {
           }
         />
       }
-      onBackClick={() => router.push('/me')}
+      onBackClick={() => navigate('/me')}
       showBackButton
       style={mobileHeaderSticky}
     />

src/app/[variants]/(main)/(mobile)/me/profile/index.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { memo } from 'react';
+
+
+import Category from './features/Category';
+
+const MeProfilePage = memo(() => {
+  return (
+    <Category />
+  );
+});
+
+MeProfilePage.displayName = 'MeProfilePage';
+
+export default MeProfilePage;

src/app/[variants]/(main)/(mobile)/me/profile/layout.tsx

@@ -1,13 +1,11 @@
-import { PropsWithChildren } from 'react';
+import MobileContentLayout from "@/components/server/MobileNavLayout";
+import { Outlet } from "react-router-dom";
+import Header from "./features/Header";
 
-import MobileContentLayout from '@/components/server/MobileNavLayout';
+const Layout = () => {
+    return <MobileContentLayout header={<Header />}>
+        <Outlet />
+    </MobileContentLayout>
+}
 
-import Header from './features/Header';
-
-const Layout = ({ children }: PropsWithChildren) => {
-  return <MobileContentLayout header={<Header />}>{children}</MobileContentLayout>;
-};
-
-Layout.displayName = 'MeProfileLayout';
-
-export default Layout;
+export default Layout;

src/app/[variants]/(main)/(mobile)/me/profile/loading.tsx

@@ -1,5 +0,0 @@
-import SkeletonLoading from '@/components/Loading/SkeletonLoading';
-
-export default () => {
-  return <SkeletonLoading paragraph={{ rows: 8 }} />;
-};

src/app/[variants]/(main)/(mobile)/me/profile/page.tsx

@@ -1,30 +0,0 @@
-import { redirect } from 'next/navigation';
-
-import { metadataModule } from '@/server/metadata';
-import { translation } from '@/server/translation';
-import { DynamicLayoutProps } from '@/types/next';
-import { RouteVariants } from '@/utils/server/routeVariants';
-
-import Category from './features/Category';
-
-export const generateMetadata = async (props: DynamicLayoutProps) => {
-  const locale = await RouteVariants.getLocale(props);
-  const { t } = await translation('auth', locale);
-  return metadataModule.generate({
-    description: t('header.desc'),
-    title: t('header.title'),
-    url: '/me/profile',
-  });
-};
-
-const Page = async (props: DynamicLayoutProps) => {
-  const isMobile = await RouteVariants.getIsMobile(props);
-
-  if (!isMobile) return redirect('/profile');
-
-  return <Category />;
-};
-
-Page.displayName = 'MeProfile';
-
-export default Page;

src/app/[variants]/(main)/(mobile)/me/settings/features/Header.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import { ChatHeader } from '@lobehub/ui/mobile';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 import { Flexbox } from 'react-layout-kit';
 
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
@@ -11,7 +11,7 @@ import { mobileHeaderSticky } from '@/styles/mobileHeader';
 const Header = memo(() => {
   const { t } = useTranslation('common');
 
-  const router = useRouter();
+  const navigate = useNavigate();
   return (
     <ChatHeader
       center={
@@ -23,7 +23,7 @@ const Header = memo(() => {
           }
         />
       }
-      onBackClick={() => router.push('/me')}
+      onBackClick={() => navigate('/me')}
       showBackButton
       style={mobileHeaderSticky}
     />

src/app/[variants]/(main)/(mobile)/me/settings/features/useCategory.tsx

@@ -1,12 +1,11 @@
 import { Bot, Brain, Info, Mic2, Settings2, Sparkles } from 'lucide-react';
-import { useRouter } from 'next/navigation';
 import { useTranslation } from 'react-i18next';
-
+import { useNavigate } from 'react-router-dom';
 import { CellProps } from '@/components/Cell';
 import { SettingsTabs } from '@/store/global/initialState';
 
 export const useCategory = () => {
-  const router = useRouter();
+  const navigate = useNavigate();
   const { t } = useTranslation('setting');
 
   const items: CellProps[] = [
@@ -40,6 +39,6 @@ export const useCategory = () => {
 
   return items.map((item) => ({
     ...item,
-    onClick: () => router.push(`/settings?active=${item.key}`),
+    onClick: () => navigate(`/settings?active=${item.key}`),
   }));
 };

src/app/[variants]/(main)/(mobile)/me/settings/index.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { memo } from 'react';
+
+
+import Category from './features/Category';
+
+const MeSettingsPage = memo(() => {
+  return (
+    <Category />
+  );
+});
+
+MeSettingsPage.displayName = 'MeSettingsPage';
+
+export default MeSettingsPage;

src/app/[variants]/(main)/(mobile)/me/settings/layout.tsx

@@ -1,13 +1,15 @@
-import { PropsWithChildren } from 'react';
+import MobileContentLayout from "@/components/server/MobileNavLayout";
+import Loading from "@/components/Loading/BrandTextLoading";
+import { Outlet } from "react-router-dom";
+import Header from "./features/Header";
+import { Suspense } from "react";
 
-import MobileContentLayout from '@/components/server/MobileNavLayout';
+const Layout = () => {
+    return <MobileContentLayout header={<Header />} withNav>
+        <Suspense fallback={<Loading />}>
+            <Outlet />
+        </Suspense>
+    </MobileContentLayout>
+}
 
-import Header from './features/Header';
-
-const Layout = ({ children }: PropsWithChildren) => {
-  return <MobileContentLayout header={<Header />}>{children}</MobileContentLayout>;
-};
-
-Layout.displayName = 'MeSettingsLayout';
-
-export default Layout;
+export default Layout;

src/app/[variants]/(main)/(mobile)/me/settings/loading.tsx

@@ -1,5 +0,0 @@
-import SkeletonLoading from '@/components/Loading/SkeletonLoading';
-
-export default () => {
-  return <SkeletonLoading paragraph={{ rows: 8 }} />;
-};

src/app/[variants]/(main)/(mobile)/me/settings/page.tsx

@@ -1,30 +0,0 @@
-import { redirect } from 'next/navigation';
-
-import { metadataModule } from '@/server/metadata';
-import { translation } from '@/server/translation';
-import { DynamicLayoutProps } from '@/types/next';
-import { RouteVariants } from '@/utils/server/routeVariants';
-
-import Category from './features/Category';
-
-export const generateMetadata = async (props: DynamicLayoutProps) => {
-  const locale = await RouteVariants.getLocale(props);
-  const { t } = await translation('setting', locale);
-  return metadataModule.generate({
-    description: t('header.desc'),
-    title: t('header.title'),
-    url: '/me/settings',
-  });
-};
-
-const Page = async (props: DynamicLayoutProps) => {
-  const isMobile = await RouteVariants.getIsMobile(props);
-
-  if (!isMobile) return redirect('/settings');
-
-  return <Category />;
-};
-
-Page.displayName = 'MeSettings';
-
-export default Page;

src/app/[variants]/(main)/_layout/Desktop/SideBar/TopActions.tsx

@@ -1,106 +0,0 @@
-import { ActionIcon, ActionIconProps, Hotkey } from '@lobehub/ui';
-import { Compass, FolderClosed, MessageSquare, Palette } from 'lucide-react';
-import Link from 'next/link';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useGlobalStore } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
-import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
-import { useSessionStore } from '@/store/session';
-import { useUserStore } from '@/store/user';
-import { settingsSelectors } from '@/store/user/selectors';
-import { HotkeyEnum } from '@/types/hotkey';
-
-const ICON_SIZE: ActionIconProps['size'] = {
-  blockSize: 40,
-  size: 24,
-  strokeWidth: 2,
-};
-
-export interface TopActionProps {
-  isPinned?: boolean | null;
-  tab?: SidebarTabKey;
-}
-
-//  TODO Change icons
-const TopActions = memo<TopActionProps>(({ tab, isPinned }) => {
-  const { t } = useTranslation('common');
-  const switchBackToChat = useGlobalStore((s) => s.switchBackToChat);
-  const { showMarket, enableKnowledgeBase, showAiImage } =
-    useServerConfigStore(featureFlagsSelectors);
-  const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.NavigateToChat));
-
-  const isChatActive = tab === SidebarTabKey.Chat && !isPinned;
-  const isFilesActive = tab === SidebarTabKey.Files;
-  const isDiscoverActive = tab === SidebarTabKey.Discover;
-  const isImageActive = tab === SidebarTabKey.Image;
-
-  return (
-    <Flexbox gap={8}>
-      <Link
-        aria-label={t('tab.chat')}
-        href={'/chat'}
-        onClick={(e) => {
-          // If Cmd key is pressed, let the default link behavior happen (open in new tab)
-          if (e.metaKey || e.ctrlKey) {
-            return;
-          }
-
-          // Otherwise, prevent default and switch session within the current tab
-          e.preventDefault();
-          switchBackToChat(useSessionStore.getState().activeId);
-        }}
-      >
-        <ActionIcon
-          active={isChatActive}
-          icon={MessageSquare}
-          size={ICON_SIZE}
-          title={
-            <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
-              <span>{t('tab.chat')}</span>
-              <Hotkey inverseTheme keys={hotkey} />
-            </Flexbox>
-          }
-          tooltipProps={{ placement: 'right' }}
-        />
-      </Link>
-      {enableKnowledgeBase && (
-        <Link aria-label={t('tab.knowledgeBase')} href={'/knowledge'}>
-          <ActionIcon
-            active={isFilesActive}
-            icon={FolderClosed}
-            size={ICON_SIZE}
-            title={t('tab.knowledgeBase')}
-            tooltipProps={{ placement: 'right' }}
-          />
-        </Link>
-      )}
-      {showAiImage && (
-        <Link aria-label={t('tab.aiImage')} href={'/image'}>
-          <ActionIcon
-            active={isImageActive}
-            icon={Palette}
-            size={ICON_SIZE}
-            title={t('tab.aiImage')}
-            tooltipProps={{ placement: 'right' }}
-          />
-        </Link>
-      )}
-      {showMarket && (
-        <Link aria-label={t('tab.discover')} href={'/discover'}>
-          <ActionIcon
-            active={isDiscoverActive}
-            icon={Compass}
-            size={ICON_SIZE}
-            title={t('tab.discover')}
-            tooltipProps={{ placement: 'right' }}
-          />
-        </Link>
-      )}
-    </Flexbox>
-  );
-});
-
-export default TopActions;

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

@@ -1,15 +1,16 @@
-import { ReactNode } from 'react';
+import { Outlet } from 'react-router-dom';
+
+import { Locales } from '@/locales/resources';
 
 import Hero from '../../features/Hero';
 import Container from './Container';
 
-type Props = { children: ReactNode };
-
-const Layout = ({ children }: Props) => {
+const Layout = (props: { locale: Locales }) => {
+  const { locale } = props;
   return (
     <Container>
       <Hero />
-      {children}
+      <Outlet context={{ locale }} />
     </Container>
   );
 };

src/app/[variants]/(main)/changelog/_layout/Mobile/Header.tsx

@@ -1,17 +1,17 @@
 'use client';
 
 import { ChatHeader } from '@lobehub/ui/mobile';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { useNavigate } from 'react-router-dom';
 
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
 
 const Header = memo(() => {
   const { t } = useTranslation('changelog');
 
-  const router = useRouter();
+  const navigate = useNavigate();
   return (
     <ChatHeader
       center={
@@ -23,7 +23,7 @@ const Header = memo(() => {
           }
         />
       }
-      onBackClick={() => router.back()}
+      onBackClick={() => navigate(-1)}
       showBackButton
       style={mobileHeaderSticky}
     />

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

@@ -1,17 +1,17 @@
-import { ReactNode } from 'react';
+import { Outlet } from 'react-router-dom';
 
 import MobileContentLayout from '@/components/server/MobileNavLayout';
+import { Locales } from '@/locales/resources';
 
 import Hero from '../../features/Hero';
 import Header from './Header';
 
-type Props = { children: ReactNode };
-
-const Layout = ({ children }: Props) => {
+const Layout = (props: { locale: Locales }) => {
+  const { locale } = props;
   return (
     <MobileContentLayout header={<Header />} padding={16}>
       <Hero />
-      {children}
+      <Outlet context={{ locale }} />
     </MobileContentLayout>
   );
 };

src/app/[variants]/(main)/changelog/features/Post.tsx

@@ -1,10 +1,11 @@
 import { Typography } from '@lobehub/ui';
+import { Image } from '@lobehub/ui/mdx';
 import { Divider } from 'antd';
 import Link from 'next/link';
+import useSWR from 'swr';
 import urlJoin from 'url-join';
 
 import { CustomMDX } from '@/components/mdx';
-import Image from '@/components/mdx/Image';
 import { OFFICIAL_SITE } from '@/const/url';
 import { Locales } from '@/locales/resources';
 import { ChangelogService } from '@/server/services/changelog';
@@ -14,14 +15,16 @@ import GridLayout from './GridLayout';
 import PublishedTime from './PublishedTime';
 import VersionTag from './VersionTag';
 
-const Post = async ({
+const Post = ({
   id,
   mobile,
   versionRange,
   locale,
 }: ChangelogIndexItem & { branch?: string; locale: Locales; mobile?: boolean }) => {
-  const changelogService = new ChangelogService();
-  const data = await changelogService.getPostById(id, { locale });
+  const { data } = useSWR([`changelog-post-${id}`, locale], async () => {
+    const changelogService = new ChangelogService();
+    return await changelogService.getPostById(id, { locale });
+  });
 
   if (!data || !data.title) return null;
 

src/app/[variants]/(main)/changelog/index.tsx

@@ -0,0 +1,55 @@
+import { Fragment } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { useOutletContext } from 'react-router-dom';
+import useSWR from 'swr';
+
+import NotFound from '@/components/404';
+import { Locales } from '@/locales/resources';
+import { ChangelogService } from '@/server/services/changelog';
+import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
+
+import GridLayout from './features/GridLayout';
+import Pagination from './features/Pagination';
+import Post from './features/Post';
+import UpdateChangelogStatus from './features/UpdateChangelogStatus';
+
+const Page = (props: { isMobile: boolean }) => {
+  const { locale } = useOutletContext<{ locale: Locales }>();
+  const { isMobile } = props;
+  const { hideDocs } = useServerConfigStore(featureFlagsSelectors);
+
+  const { data } = useSWR('changelog-index', async () => {
+    const changelogService = new ChangelogService();
+    return await changelogService.getChangelogIndex();
+  });
+
+  if (hideDocs) return <NotFound />;
+
+  if (!data) return <NotFound />;
+
+  return (
+    <>
+      <Flexbox gap={isMobile ? 16 : 48}>
+        {data?.map((item) => (
+          <Fragment key={item.id}>
+            <Post locale={locale} mobile={isMobile} {...item} />
+          </Fragment>
+        ))}
+      </Flexbox>
+      <GridLayout>
+        <Pagination />
+      </GridLayout>
+      <UpdateChangelogStatus currentId={data[0]?.id} />
+    </>
+  );
+};
+
+const DesktopPage = () => {
+  return <Page isMobile={false} />;
+};
+
+const MobilePage = () => {
+  return <Page isMobile={true} />;
+};
+
+export { DesktopPage, MobilePage };

src/app/[variants]/(main)/changelog/layout.tsx

@@ -1,10 +0,0 @@
-import ServerLayout from '@/components/server/ServerLayout';
-
-import Desktop from './_layout/Desktop';
-import Mobile from './_layout/Mobile';
-
-const MainLayout = ServerLayout({ Desktop, Mobile });
-
-MainLayout.displayName = 'ChangelogLayout';
-
-export default MainLayout;

src/app/[variants]/(main)/changelog/modal/page.tsx

@@ -1,23 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-
-import { useQueryRoute } from '@/hooks/useQueryRoute';
-
-/**
- * @description: Changelog Modal (intercepting routes fallback when hard refresh)
- * @example: /changelog/modal => /changelog
- * @refs: https://github.com/lobehub/lobe-chat/discussions/2295#discussioncomment-9290942
- */
-
-const ChangelogModal = () => {
-  const router = useQueryRoute();
-
-  useEffect(() => {
-    router.replace('/changelog');
-  }, []);
-
-  return null;
-};
-
-export default ChangelogModal;

src/app/[variants]/(main)/changelog/page.tsx

@@ -1,78 +0,0 @@
-import { Divider, Skeleton } from 'antd';
-import { notFound } from 'next/navigation';
-import { Fragment, Suspense } from 'react';
-import { Flexbox } from 'react-layout-kit';
-import urlJoin from 'url-join';
-
-import Pagination from '@/app/[variants]/@modal/(.)changelog/modal/features/Pagination';
-import UpdateChangelogStatus from '@/app/[variants]/@modal/(.)changelog/modal/features/UpdateChangelogStatus';
-import StructuredData from '@/components/StructuredData';
-import { serverFeatureFlags } from '@/config/featureFlags';
-import { BRANDING_NAME } from '@/const/branding';
-import { OFFICIAL_SITE } from '@/const/url';
-import { ldModule } from '@/server/ld';
-import { metadataModule } from '@/server/metadata';
-import { ChangelogService } from '@/server/services/changelog';
-import { translation } from '@/server/translation';
-import { DynamicLayoutProps } from '@/types/next';
-import { RouteVariants } from '@/utils/server/routeVariants';
-
-import GridLayout from './features/GridLayout';
-import Post from './features/Post';
-
-export const generateMetadata = async (props: DynamicLayoutProps) => {
-  const locale = await RouteVariants.getLocale(props);
-  const { t } = await translation('metadata', locale);
-  return metadataModule.generate({
-    canonical: urlJoin(OFFICIAL_SITE, 'changelog'),
-    description: t('changelog.description', { appName: BRANDING_NAME }),
-    title: t('changelog.title'),
-    url: '/changelog',
-  });
-};
-
-const Page = async (props: DynamicLayoutProps) => {
-  const hideDocs = serverFeatureFlags().hideDocs;
-  if (hideDocs) return notFound();
-
-  const { isMobile, locale } = await RouteVariants.getVariantsFromProps(props);
-  const { t } = await translation('metadata', locale);
-  const changelogService = new ChangelogService();
-  const data = await changelogService.getChangelogIndex();
-
-  if (!data) return notFound();
-
-  const ld = ldModule.generate({
-    description: t('changelog.description', { appName: BRANDING_NAME }),
-    title: t('changelog.title', { appName: BRANDING_NAME }),
-    url: '/changelog',
-  });
-
-  return (
-    <>
-      <StructuredData ld={ld} />
-      <Flexbox gap={isMobile ? 16 : 48}>
-        {data?.map((item) => (
-          <Fragment key={item.id}>
-            <Suspense
-              fallback={
-                <GridLayout>
-                  <Divider />
-                  <Skeleton active paragraph={{ rows: 5 }} />
-                </GridLayout>
-              }
-            >
-              <Post locale={locale} mobile={isMobile} {...item} />
-            </Suspense>
-          </Fragment>
-        ))}
-      </Flexbox>
-      <GridLayout>
-        <Pagination />
-      </GridLayout>
-      <UpdateChangelogStatus currentId={data[0]?.id} />
-    </>
-  );
-};
-
-export default Page;

src/app/[variants]/(main)/chat/ChatRouter.tsx

@@ -1,83 +0,0 @@
-'use client';
-
-import { memo, useEffect } from 'react';
-import { useMediaQuery } from 'react-responsive';
-import { MemoryRouter, Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
-
-import MainChatPage from './components/MainChatPage';
-import SettingsPage from './components/SettingsPage';
-
-// Get initial path from URL
-const getInitialPath = () => {
-  if (typeof window === 'undefined') return '/';
-  const fullPath = window.location.pathname;
-  const searchParams = window.location.search;
-  const chatIndex = fullPath.indexOf('/chat');
-
-  if (chatIndex !== -1) {
-    const pathAfterChat = fullPath.slice(chatIndex + '/chat'.length) || '/';
-    return pathAfterChat + searchParams;
-  }
-  return '/';
-};
-
-// Helper component to sync URL with MemoryRouter
-const UrlSynchronizer = () => {
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  // Sync initial URL
-  useEffect(() => {
-    const fullPath = window.location.pathname;
-    const searchParams = window.location.search;
-    const chatIndex = fullPath.indexOf('/chat');
-
-    if (chatIndex !== -1) {
-      const pathAfterChat = fullPath.slice(chatIndex + '/chat'.length) || '/';
-      const targetPath = pathAfterChat + searchParams;
-
-      if (location.pathname + location.search !== targetPath) {
-        navigate(targetPath, { replace: true });
-      }
-    }
-  }, []);
-
-  // Update browser URL when location changes
-  useEffect(() => {
-    const normalizedPath = location.pathname === '/' ? '' : location.pathname;
-    const newUrl = `/chat${normalizedPath}${location.search}`;
-    if (window.location.pathname + window.location.search !== newUrl) {
-      window.history.replaceState({}, '', newUrl);
-    }
-  }, [location.pathname, location.search]);
-
-  return null;
-};
-
-const ChatRouter = memo(() => {
-  const mobile = useMediaQuery({ maxWidth: 768 });
-  const routes = (
-    <Routes>
-      <Route element={<MainChatPage mobile={true} />} path="/" />
-      <Route element={<SettingsPage mobile={true} />} path="/settings" />
-      <Route element={<Navigate replace to="/" />} path="*" />
-    </Routes>
-  );
-
-  return (
-    <MemoryRouter initialEntries={[getInitialPath()]} initialIndex={0}>
-      <UrlSynchronizer />
-      {mobile ? (
-        // Mobile Layout
-        routes
-      ) : (
-        // Desktop Layout
-        <MainChatPage mobile={false} />
-      )}
-    </MemoryRouter>
-  );
-});
-
-ChatRouter.displayName = 'ChatRouter';
-
-export default ChatRouter;

src/app/[variants]/(main)/chat/_layout/ChatLayout.tsx

@@ -1,22 +0,0 @@
-'use client';
-
-import { PropsWithChildren, memo } from 'react';
-
-import Desktop from './Desktop';
-import Mobile from './Mobile';
-
-interface ChatLayoutProps extends PropsWithChildren {
-  mobile?: boolean;
-}
-
-const ChatLayout = memo<ChatLayoutProps>(({ children, mobile }) => {
-  if (mobile) {
-    return <Mobile>{children}</Mobile>;
-  }
-
-  return <Desktop>{children}</Desktop>;
-});
-
-ChatLayout.displayName = 'ChatLayout';
-
-export default ChatLayout;

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

@@ -1,15 +1,14 @@
-import { Suspense } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import { Outlet } from 'react-router-dom';
 
 import { isDesktop } from '@/const/version';
 import ProtocolUrlHandler from '@/features/ProtocolUrlHandler';
 
-import { LayoutProps } from '../type';
 import RegisterHotkeys from './RegisterHotkeys';
 import SessionPanel from './SessionPanel';
 import Workspace from './Workspace';
 
-const Layout = ({ children }: LayoutProps) => {
+const Layout = () => {
   return (
     <>
       <Flexbox
@@ -19,14 +18,14 @@ const Layout = ({ children }: LayoutProps) => {
         width={'100%'}
       >
         <SessionPanel />
-        <Workspace>{children}</Workspace>
+        <Workspace>
+          <Outlet />
+        </Workspace>
       </Flexbox>
       {/* ↓ cloud slot ↓ */}
 
       {/* ↑ cloud slot ↑ */}
-      <Suspense>
-        <RegisterHotkeys />
-      </Suspense>
+      <RegisterHotkeys />
       {isDesktop && <ProtocolUrlHandler />}
     </>
   );

src/app/[variants]/(main)/chat/_layout/Mobile.tsx

@@ -8,7 +8,7 @@ import { withSuspense } from '@/components/withSuspense';
 import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 
 import SessionPanelContent from '../components/SessionPanel';
-import { LayoutProps } from './type';
+import { Outlet } from 'react-router-dom';
 
 const useStyles = createStyles(({ css, token }) => ({
   main: css`
@@ -18,7 +18,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const Layout = memo<LayoutProps>(({ children }) => {
+const Layout = memo(( ) => {
   const showMobileWorkspace = useShowMobileWorkspace();
   const { styles } = useStyles();
 
@@ -38,7 +38,7 @@ const Layout = memo<LayoutProps>(({ children }) => {
         style={showMobileWorkspace ? undefined : { display: 'none' }}
         width="100%"
       >
-        {children}
+        <Outlet />
       </Flexbox>
     </>
   );

src/app/[variants]/(main)/chat/components/MainChatPage.tsx

@@ -1,25 +0,0 @@
-'use client';
-
-import { memo } from 'react';
-
-import TelemetryNotification from '../components/features/TelemetryNotification';
-import PageTitle from '../features/PageTitle';
-import WorkspaceLayout from './WorkspaceLayout';
-
-interface MainChatPageProps {
-  mobile?: boolean;
-}
-
-const MainChatPage = memo<MainChatPageProps>(({ mobile }) => {
-  return (
-    <>
-      <PageTitle />
-      <WorkspaceLayout mobile={mobile} />
-      <TelemetryNotification mobile={mobile} />
-    </>
-  );
-});
-
-MainChatPage.displayName = 'MainChatPage';
-
-export default MainChatPage;

src/app/[variants]/(main)/chat/components/WorkspaceLayout.tsx

@@ -14,9 +14,6 @@ import ConversationArea from './ConversationArea';
 import PortalPanel from './PortalPanel';
 import TopicSidebar from './TopicSidebar';
 
-interface WorkspaceLayoutProps {
-  mobile?: boolean;
-}
 
 const DesktopWorkspace = memo(() => (
   <>
@@ -60,14 +57,4 @@ const MobileWorkspace = memo(() => (
 
 MobileWorkspace.displayName = 'MobileWorkspace';
 
-const WorkspaceLayout = memo<WorkspaceLayoutProps>(({ mobile }) => {
-  if (mobile) {
-    return <MobileWorkspace />;
-  }
-
-  return <DesktopWorkspace />;
-});
-
-WorkspaceLayout.displayName = 'WorkspaceLayout';
-
-export default WorkspaceLayout;
+export { DesktopWorkspace, MobileWorkspace };

src/app/[variants]/(main)/chat/components/conversation/features/ChatHydration/index.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { useQueryState } from 'nuqs';
 import { memo, useLayoutEffect } from 'react';
 import { createStoreUpdater } from 'zustand-utils';
 
+import { useQueryState } from '@/hooks/useQueryParam';
 import { useChatStore } from '@/store/chat';
 
 // sync outside state to useChatStore
@@ -34,7 +34,7 @@ const ChatHydration = memo(() => {
       unsubscribeTopic();
       unsubscribeThread();
     };
-  }, []);
+  }, [setTopic, setThread]); // ✅ 现在 setValue 是稳定的，可以安全地添加到依赖数组
 
   return null;
 });

src/app/[variants]/(main)/chat/components/conversation/features/ChatInput/Desktop/MessageFromUrl.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useSearchParams } from 'next/navigation';
 import { useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 import { useChatStore } from '@/store/chat';
 
@@ -10,21 +10,19 @@ import { useSend } from '../useSend';
 const MessageFromUrl = () => {
   const updateMessageInput = useChatStore((s) => s.updateMessageInput);
   const { send: sendMessage } = useSend();
-  const searchParams = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
 
   useEffect(() => {
     const message = searchParams.get('message');
-    if (message) {
-      // Remove message from URL
-      const params = new URLSearchParams(searchParams.toString());
-      params.delete('message');
-      const newUrl = `${window.location.pathname}?${params.toString()}`;
-      window.history.replaceState({}, '', newUrl);
+    if (!message) return;
 
-      updateMessageInput(message);
-      sendMessage();
-    }
-  }, [searchParams, updateMessageInput, sendMessage]);
+    const params = new URLSearchParams(searchParams.toString());
+    params.delete('message');
+    setSearchParams(params, { replace: true });
+
+    updateMessageInput(message);
+    sendMessage();
+  }, [searchParams, setSearchParams, updateMessageInput, sendMessage]);
 
   return null;
 };

src/app/[variants]/(main)/chat/components/conversation/features/ChatInput/Desktop/index.tsx

@@ -10,7 +10,6 @@ import GroupChatInput from './GroupChat';
 
 const Desktop = memo((props: { targetMemberId?: string }) => {
   const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
-
   return isGroupSession ? <GroupChatInput {...props} /> : <ClassicChatInput />;
 });
 

src/app/[variants]/(main)/chat/components/conversation/features/ThreadHydration.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { useQueryState } from 'nuqs';
 import { memo, useEffect, useLayoutEffect } from 'react';
 import { createStoreUpdater } from 'zustand-utils';
 
 import { useFetchThreads } from '@/hooks/useFetchThreads';
+import { useQueryState } from '@/hooks/useQueryParam';
 import { useChatStore } from '@/store/chat';
 
 // sync outside state to useChatStore
@@ -26,7 +26,7 @@ const ThreadHydration = memo(() => {
     return () => {
       unsubscribe();
     };
-  }, []);
+  }, [setThread]); // ✅ 现在 setValue 是稳定的，可以安全地添加到依赖数组
 
   // should open portal automatically when portalThread is set
   useEffect(() => {

src/app/[variants]/(main)/chat/error.tsx

@@ -1,3 +0,0 @@
-'use client';
-
-export { default } from '@/components/Error';

src/app/[variants]/(main)/chat/features/PageTitle/index.tsx

@@ -3,7 +3,6 @@
 import { memo } from 'react';
 
 import PageTitle from '@/components/PageTitle';
-import { withSuspense } from '@/components/withSuspense';
 import { useChatStore } from '@/store/chat';
 import { topicSelectors } from '@/store/chat/selectors';
 import { useSessionStore } from '@/store/session';
@@ -16,4 +15,4 @@ const Title = memo(() => {
   return <PageTitle title={[topicTitle, agentTitle].filter(Boolean).join(' · ')} />;
 });
 
-export default withSuspense(Title);
+export default Title;

src/app/[variants]/(main)/chat/index.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { memo } from 'react';
+
+import { DesktopWorkspace, MobileWorkspace } from './components/WorkspaceLayout';
+import TelemetryNotification from './components/features/TelemetryNotification';
+import PageTitle from './features/PageTitle';
+
+const MobileChatPage = memo(() => {
+  return (
+    <>
+      <PageTitle />
+      <MobileWorkspace />
+      <TelemetryNotification mobile={true} />
+    </>
+  );
+});
+
+const DesktopChatPage = memo(() => {
+  return (
+    <>
+      <PageTitle />
+      <DesktopWorkspace />
+      <TelemetryNotification mobile={false} />
+    </>
+  );
+});
+
+export { DesktopChatPage, MobileChatPage };

src/app/[variants]/(main)/chat/layout.tsx

@@ -1,10 +0,0 @@
-import ServerLayout from '@/components/server/ServerLayout';
-import Desktop from './_layout/Desktop';
-import Mobile from './_layout/Mobile';
-import { LayoutProps } from './_layout/type';
-
-const Layout = ServerLayout<LayoutProps>({ Desktop, Mobile });
-
-Layout.displayName = 'ChatLayout';
-
-export default Layout;

src/app/[variants]/(main)/chat/loading.tsx

@@ -1,3 +0,0 @@
-import Loading from '@/components/Loading/BrandTextLoading';
-
-export default () => <Loading />;

src/app/[variants]/(main)/chat/not-found.tsx

@@ -1 +0,0 @@
-export { default } from '@/components/404';

src/app/[variants]/(main)/chat/page.tsx

@@ -1,12 +0,0 @@
-'use client';
-
-import dynamic from 'next/dynamic';
-
-import { BrandTextLoading } from '@/components/Loading';
-
-const ChatRouter = dynamic(() => import('./ChatRouter'), {
-  loading: BrandTextLoading,
-  ssr: false,
-});
-
-export default ChatRouter;

src/app/[variants]/(main)/chat/session/features/SessionHydration.tsx

@@ -1,14 +1,15 @@
 'use client';
 
-import { useQueryState } from 'nuqs';
-import { parseAsString } from 'nuqs/server';
 import { memo, useEffect } from 'react';
 import { createStoreUpdater } from 'zustand-utils';
 
+import { parseAsString, useQueryParam } from '@/hooks/useQueryParam';
 import { useAgentStore } from '@/store/agent';
 import { useChatStore } from '@/store/chat';
 import { useSessionStore } from '@/store/session';
 
+const THROTTLE_DELAY = 50;
+
 // sync outside state to useSessionStore
 const SessionHydration = memo(() => {
   const useStoreUpdater = createStoreUpdater(useSessionStore);
@@ -17,10 +18,11 @@ const SessionHydration = memo(() => {
   const [switchTopic] = useChatStore((s) => [s.switchTopic]);
 
   // two-way bindings the url and session store
-  const [session, setSession] = useQueryState(
-    'session',
-    parseAsString.withDefault('inbox').withOptions({ history: 'replace', throttleMs: 50 }),
-  );
+  const [session, setSession] = useQueryParam('session', parseAsString.withDefault('inbox'), {
+    history: 'replace',
+    throttleMs: THROTTLE_DELAY,
+  });
+
   useStoreUpdater('activeId', session);
   useAgentStoreUpdater('activeId', session);
   useChatStoreUpdater('activeId', session);

src/app/[variants]/(main)/chat/session/features/SessionListContent/Inbox/index.tsx

@@ -1,6 +1,6 @@
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 
 import { DEFAULT_INBOX_AVATAR } from '@/const/meta';
 import { INBOX_SESSION_ID } from '@/const/session';
@@ -24,15 +24,12 @@ const Inbox = memo(() => {
   return (
     <Link
       aria-label={t('inbox.title')}
-      href={SESSION_CHAT_URL(INBOX_SESSION_ID, mobile)}
       onClick={async (e) => {
         e.preventDefault();
-
         if (activeId === INBOX_SESSION_ID && !mobile) {
           // If user tap the inbox again, open a new topic.
           // Only for desktop.
           const inboxMessages = chatSelectors.inboxActiveTopicMessages(getChatStoreState());
-
           if (inboxMessages.length > 0) {
             await openNewTopicOrSaveTopic();
           }
@@ -40,6 +37,7 @@ const Inbox = memo(() => {
           switchSession(INBOX_SESSION_ID);
         }
       }}
+      to={SESSION_CHAT_URL(INBOX_SESSION_ID, mobile)}
     >
       <ListItem
         active={activeId === INBOX_SESSION_ID}

src/app/[variants]/(main)/chat/session/features/SessionListContent/List/index.tsx

@@ -9,8 +9,8 @@ import LazyLoad from 'react-lazy-load';
 
 import { SESSION_CHAT_URL } from '@/const/url';
 import { useSwitchSession } from '@/hooks/useSwitchSession';
+import { useSessionStore, getSessionStoreState } from '@/store/session';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
-import { getSessionStoreState, useSessionStore } from '@/store/session';
 import { sessionGroupSelectors, sessionSelectors } from '@/store/session/selectors';
 import { getUserStoreState } from '@/store/user';
 import { userProfileSelectors } from '@/store/user/selectors';

src/app/[variants]/(main)/chat/session/layout/Mobile/SessionHeader.tsx

@@ -3,8 +3,8 @@
 import { ActionIcon } from '@lobehub/ui';
 import { ChatHeader } from '@lobehub/ui/mobile';
 import { MessageSquarePlus } from 'lucide-react';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { Flexbox } from 'react-layout-kit';
 
 import { ProductLogo } from '@/components/Branding';
@@ -16,14 +16,14 @@ import { mobileHeaderSticky } from '@/styles/mobileHeader';
 
 const Header = memo(() => {
   const [createSession] = useSessionStore((s) => [s.createSession]);
-  const router = useRouter();
+  const navigate = useNavigate();
   const { showCreateSession } = useServerConfigStore(featureFlagsSelectors);
 
   return (
     <ChatHeader
       left={
         <Flexbox align={'center'} gap={8} horizontal style={{ marginLeft: 8 }}>
-          <UserAvatar onClick={() => router.push('/me')} size={32} />
+          <UserAvatar onClick={() => navigate('/me')} size={32} />
           <ProductLogo type={'text'} />
         </Flexbox>
       }

src/app/[variants]/(main)/chat/settings/_layout/Desktop/Header.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import { ChatHeader, ChatHeaderTitle } from '@lobehub/ui/chat';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 import { pathString } from '@/utils/url';
 
@@ -11,12 +11,12 @@ import HeaderContent from '../../features/HeaderContent';
 
 const Header = memo(() => {
   const { t } = useTranslation('setting');
-  const router = useRouter();
+  const navigate = useNavigate();
 
   return (
     <ChatHeader
       left={<ChatHeaderTitle title={t('header.session')} />}
-      onBackClick={() => router.push(pathString('/chat', { search: location.search }))}
+      onBackClick={() => navigate(pathString('/chat', { search: location.search }))}
       right={<HeaderContent />}
       showBackButton
     />

src/app/[variants]/(main)/chat/settings/_layout/Mobile/Header.tsx

@@ -3,20 +3,20 @@
 import { ChatHeader } from '@lobehub/ui/mobile';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
-import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
 
 import HeaderContent from '../../features/HeaderContent';
 
 const Header = memo(() => {
   const { t } = useTranslation('setting');
-  const router = useQueryRoute();
+  const navigate = useNavigate();
 
   return (
     <ChatHeader
       center={<ChatHeader.Title title={t('header.session')} />}
-      onBackClick={() => router.push('/chat')}
+      onBackClick={() => navigate(-1)}
       right={<HeaderContent />}
       showBackButton
       style={mobileHeaderSticky}

src/app/[variants]/(main)/chat/settings/error.tsx

@@ -1,3 +0,0 @@
-'use client';
-
-export { default } from '@/components/Error';

src/app/[variants]/(main)/chat/settings/features/PublishResultModal/index.tsx

@@ -2,9 +2,9 @@
 
 import { CheckCircleOutlined } from '@ant-design/icons';
 import { Button, Modal, Space } from 'antd';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 interface PublishResultModalProps {
   identifier?: string;
@@ -13,13 +13,13 @@ interface PublishResultModalProps {
 }
 
 const PublishResultModal = memo<PublishResultModalProps>(({ identifier, onCancel, open }) => {
-  const router = useRouter();
+  const navigate = useNavigate();
   const { t } = useTranslation('setting');
   const { t: tCommon } = useTranslation('common');
 
   const handleGoToMarket = () => {
     if (identifier) {
-      router.push(`/discover/assistant/${identifier}`);
+      navigate(`/discover/assistant/${identifier}`);
     }
     onCancel();
   };

src/app/[variants]/(main)/chat/settings/index.tsx

@@ -8,12 +8,9 @@ import { useTranslation } from 'react-i18next';
 
 import MobileContentLayout from '@/components/server/MobileNavLayout';
 import PageTitle from '@/components/PageTitle';
-import SafeSpacing from '@/components/SafeSpacing';
-import { HEADER_HEIGHT } from '@/const/layoutTokens';
 import { useCategory } from '@/features/AgentSetting/AgentCategory/useCategory';
 import AgentSettings from '@/features/AgentSetting/AgentSettings';
 import Footer from '@/features/Setting/Footer';
-import SettingContainer from '@/features/Setting/SettingContainer';
 import { useInitAgentConfig } from '@/hooks/useInitAgentConfig';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
@@ -21,14 +18,9 @@ import { ChatSettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors } from '@/store/session/selectors';
 
-import DesktopHeader from '../settings/_layout/Desktop/Header';
-import MobileHeader from '../settings/_layout/Mobile/Header';
+import MobileHeader from './_layout/Mobile/Header';
 
-interface SettingsPageProps {
-  mobile?: boolean;
-}
-
-const SettingsPage = memo<SettingsPageProps>(({ mobile = false }) => {
+export default memo(() => {
   const { t } = useTranslation('setting');
   const [tab, setTab] = useState(ChatSettingsTabs.Prompt);
   const theme = useTheme();
@@ -46,8 +38,8 @@ const SettingsPage = memo<SettingsPageProps>(({ mobile = false }) => {
 
   const { isLoading } = useInitAgentConfig();
 
-  const content = (
-    <>
+  return (
+    <MobileContentLayout header={<MobileHeader />}>
       <PageTitle title={t('header.sessionWithName', { name: title })} />
       <Tabs
         activeKey={tab}
@@ -67,28 +59,7 @@ const SettingsPage = memo<SettingsPageProps>(({ mobile = false }) => {
         onMetaChange={updateAgentMeta}
         tab={tab}
       />
-    </>
-  );
-
-  if (mobile) {
-    return (
-      <MobileContentLayout header={<MobileHeader />}>
-        {content}
-        <Footer />
-      </MobileContentLayout>
-    );
-  }
-
-  return (
-    <>
-      <DesktopHeader />
-      <SettingContainer addonAfter={<Footer />} addonBefore={<SafeSpacing height={HEADER_HEIGHT} />}>
-        {content}
-      </SettingContainer>
-    </>
+      <Footer />
+    </MobileContentLayout>
   );
 });
-
-SettingsPage.displayName = 'SettingsPage';
-
-export default SettingsPage;

src/app/[variants]/(main)/chat/settings/loading.tsx

@@ -1,3 +0,0 @@
-import SkeletonLoading from '@/components/Loading/SkeletonLoading';
-
-export default () => <SkeletonLoading paragraph={{ rows: 8 }} />;

src/app/[variants]/(main)/chat/settings/not-found.tsx

@@ -1 +0,0 @@
-export { default } from '@/components/404';

src/app/[variants]/(main)/components/Link.tsx

@@ -0,0 +1,21 @@
+import React, { memo } from 'react';
+import { Link as ReactRouterLink, LinkProps as ReactRouterLinkProps } from 'react-router-dom';
+
+interface LinkProps extends Omit<ReactRouterLinkProps, 'to'> {
+  children?: React.ReactNode;
+  href?: string;
+  to?: string;
+}
+
+/**
+ * Link component for React Router
+ * Provides a Next.js-like API (href prop) while using React Router internally
+ */
+const Link = memo<LinkProps>(({ href, to, ...props }) => {
+  const linkTo = href || to || '/';
+  return <ReactRouterLink {...props} to={linkTo} />;
+});
+
+Link.displayName = 'Link';
+
+export default Link;

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

@@ -1,12 +1,19 @@
-import { PropsWithChildren } from 'react';
+'use client';
+
+import { memo } from 'react';
+import { Outlet } from 'react-router-dom';
 import { Flexbox } from 'react-layout-kit';
 
-import { SCROLL_PARENT_ID } from '@/app/[variants]/(main)/discover/features/const';
+import { SCROLL_PARENT_ID } from '../../../features/const';
 import Footer from '@/features/Setting/Footer';
 
 const MAX_WIDTH = 1440;
 
-const Layout = ({ children }: PropsWithChildren) => {
+/**
+ * Desktop Discover Detail Layout
+ * Layout for detail pages (assistant, model, provider, mcp details)
+ */
+const DesktopDiscoverDetailLayout = memo(() => {
   return (
     <Flexbox
       align={'center'}
@@ -17,14 +24,15 @@ const Layout = ({ children }: PropsWithChildren) => {
       width={'100%'}
     >
       <Flexbox gap={24} style={{ maxWidth: MAX_WIDTH, minHeight: '100%' }} width={'100%'}>
-        {children}
+        <Outlet />
         <div />
         <Footer />
       </Flexbox>
     </Flexbox>
   );
-};
+});
 
-Layout.displayName = 'DesktopDiscoverDetailLayout';
+DesktopDiscoverDetailLayout.displayName = 'DesktopDiscoverDetailLayout';
 
-export default Layout;
+
+export default DesktopDiscoverDetailLayout;

src/app/[variants]/(main)/discover/(detail)/_layout/DetailLayout.tsx

@@ -1,22 +0,0 @@
-'use client';
-
-import { PropsWithChildren, memo } from 'react';
-
-import Desktop from './Desktop';
-import Mobile from './Mobile';
-
-interface DetailLayoutProps extends PropsWithChildren {
-  mobile?: boolean;
-}
-
-const DetailLayout = memo<DetailLayoutProps>(({ children, mobile }) => {
-  if (mobile) {
-    return <Mobile>{children}</Mobile>;
-  }
-
-  return <Desktop>{children}</Desktop>;
-});
-
-DetailLayout.displayName = 'DetailLayout';
-
-export default DetailLayout;

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

@@ -1,15 +1,15 @@
-import { PropsWithChildren } from 'react';
 
 import { SCROLL_PARENT_ID } from '@/app/[variants]/(main)/discover/features/const';
 import MobileContentLayout from '@/components/server/MobileNavLayout';
 import Footer from '@/features/Setting/Footer';
 
 import Header from './Header';
+import { Outlet } from 'react-router-dom';
 
-const Layout = ({ children }: PropsWithChildren) => {
+const Layout = () => {
   return (
     <MobileContentLayout gap={16} header={<Header />} id={SCROLL_PARENT_ID} padding={16}>
-      {children}
+      <Outlet />
       <div />
       <Footer />
     </MobileContentLayout>

src/app/[variants]/(main)/discover/(detail)/assistant/[...slugs]/Client.tsx

@@ -1,51 +0,0 @@
-'use client';
-
-import { notFound } from 'next/navigation';
-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 { AssistantMarketSource } from '@/types/discover';
-
-import { TocProvider } from '../../features/Toc/useToc';
-import { DetailProvider } from './features/DetailProvider';
-import Details from './features/Details';
-import Header from './features/Header';
-import StatusPage from './features/StatusPage';
-import Loading from './loading';
-
-interface ClientProps {
-  identifier: string;
-  mobile?: boolean;
-}
-
-const Client = memo<ClientProps>(({ identifier, mobile }) => {
-  const { version, source } = useQuery() as { source?: AssistantMarketSource; version?: string };
-  const marketSource = source as AssistantMarketSource | undefined;
-  const useAssistantDetail = useDiscoverStore((s) => s.useAssistantDetail);
-  const { data, isLoading } = useAssistantDetail({ identifier, source: marketSource, version });
-
-  if (isLoading) return <Loading />;
-  if (!data) return notFound();
-
-  // 检查助手状态
-  const status = (data as any)?.status;
-  if (status === 'unpublished' || status === 'archived' || status === 'deprecated') {
-    return <StatusPage status={status} />;
-  }
-
-  return (
-    <TocProvider>
-      <DetailProvider config={data}>
-        <Flexbox gap={16}>
-          <Header mobile={mobile} />
-          <Details mobile={mobile} />
-        </Flexbox>
-      </DetailProvider>
-    </TocProvider>
-  );
-});
-
-export default withSuspense(Client);

src/app/[variants]/(main)/discover/(detail)/assistant/features/Details/Capabilities/Block.tsx

@@ -2,7 +2,7 @@ import { Tag } from '@lobehub/ui';
 import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import Title from '../../../../../../features/Title';
+import Title from '../../../../../features/Title';
 
 interface BlockProps {
   children?: ReactNode;

src/app/[variants]/(main)/discover/(detail)/assistant/features/Details/Overview/index.tsx

@@ -10,7 +10,7 @@ import { DEFAULT_USER_AVATAR_URL } from '@/const/meta';
 import { useUserStore } from '@/store/user';
 import { authSelectors, userProfileSelectors } from '@/store/user/selectors';
 
-import Title from '../../../../../../features/Title';
+import Title from '../../../../../features/Title';
 import { useDetailContext } from '../../DetailProvider';
 
 const Overview = memo(() => {

src/app/[variants]/(main)/discover/(detail)/assistant/features/Details/Related/index.tsx

@@ -6,8 +6,8 @@ import { Flexbox } from 'react-layout-kit';
 import { useQuery } from '@/hooks/useQuery';
 import { AssistantMarketSource } from '@/types/discover';
 
-import McpList from '../../../../../../(list)/assistant/features/List';
-import Title from '../../../../../../features/Title';
+import McpList from '../../../../../(list)/assistant/features/List';
+import Title from '../../../../../features/Title';
 import { useDetailContext } from '../../DetailProvider';
 
 const Related = memo(() => {

src/app/[variants]/(main)/discover/(detail)/assistant/features/Details/SystemRole/index.tsx

@@ -5,9 +5,9 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import TokenTag from '../../../../../../(list)/assistant/features/List/TokenTag';
-import Title from '../../../../../../features/Title';
-import MarkdownRender from '../../../../../features/MakedownRender';
+import TokenTag from '../../../../../(list)/assistant/features/List/TokenTag';
+import Title from '../../../../../features/Title';
+import MarkdownRender from '../../../../features/MakedownRender';
 import { useDetailContext } from '../../DetailProvider';
 import TagList from './TagList';
 

src/app/[variants]/(main)/discover/(detail)/assistant/features/Details/Versions/index.tsx

@@ -1,19 +1,19 @@
 import { Block, Icon, Tag } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import { CheckIcon, MinusIcon } from 'lucide-react';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
 import qs from 'query-string';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import Link from '@/app/[variants]/(main)/components/Link';
+import { usePathname } from '@/app/[variants]/(main)/hooks/usePathname';
+import { useQuery } from '@/app/[variants]/(main)/hooks/useQuery';
 import InlineTable from '@/components/InlineTable';
 import PublishedTime from '@/components/PublishedTime';
-import { useQuery } from '@/hooks/useQuery';
 import { AssistantMarketSource, AssistantNavKey } from '@/types/discover';
 
-import Title from '../../../../../../features/Title';
+import Title from '../../../../../features/Title';
 import { useDetailContext } from '../../DetailProvider';
 
 const Versions = memo(() => {

src/app/[variants]/(main)/discover/(detail)/assistant/features/Details/index.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { useResponsive } from 'antd-style';
-import { useQueryState } from 'nuqs';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { useQueryState } from '@/hooks/useQueryParam';
 import { AssistantNavKey } from '@/types/discover';
 
 import Sidebar from '../Sidebar';

src/app/[variants]/(main)/discover/(detail)/assistant/features/Header.tsx

@@ -13,8 +13,8 @@ import urlJoin from 'url-join';
 
 import { formatIntergerNumber } from '@/utils/format';
 
-import { useCategory } from '../../../../(list)/assistant/features/Category/useCategory';
-import PublishedTime from '../../../../../../../../components/PublishedTime';
+import { useCategory } from '../../../(list)/assistant/features/Category/useCategory';
+import PublishedTime from '../../../../../../../components/PublishedTime';
 import { useDetailContext } from './DetailProvider';
 
 const useStyles = createStyles(({ css, token }) => {

src/app/[variants]/(main)/discover/(detail)/assistant/features/Sidebar/ActionButton/AddAgent.tsx

@@ -4,9 +4,9 @@ import { Icon } from '@lobehub/ui';
 import { App, Dropdown } from 'antd';
 import { createStyles } from 'antd-style';
 import { ChevronDownIcon } from 'lucide-react';
-import { useRouter } from 'nextjs-toploader/app';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 import { SESSION_CHAT_URL } from '@/const/url';
 import { useSessionStore } from '@/store/session';
@@ -70,7 +70,7 @@ const AddAgent = memo<{ mobile?: boolean }>(({ mobile }) => {
   const createSession = useSessionStore((s) => s.createSession);
   const sessions = useSessionStore((s) => s.sessions);
   const { message, modal } = App.useApp();
-  const router = useRouter();
+  const navigate = useNavigate();
   const { t } = useTranslation('discover');
 
   const meta = {
@@ -114,7 +114,7 @@ const AddAgent = memo<{ mobile?: boolean }>(({ mobile }) => {
     try {
       const session = await createSessionWithMarketIdentifier(true);
       message.success(t('assistants.addAgentSuccess'));
-      router.push(SESSION_CHAT_URL(session, mobile));
+      navigate(SESSION_CHAT_URL(session, mobile));
     } finally {
       setIsLoading(false);
     }

src/app/[variants]/(main)/discover/(detail)/assistant/features/Sidebar/ActionButton/index.tsx

@@ -6,7 +6,7 @@ import urlJoin from 'url-join';
 
 import { OFFICIAL_URL } from '@/const/url';
 
-import ShareButton from '../../../../../features/ShareButton';
+import ShareButton from '../../../../features/ShareButton';
 import { useDetailContext } from '../../DetailProvider';
 import AddAgent from './AddAgent';
 

src/app/[variants]/(main)/discover/(detail)/assistant/features/Sidebar/Related/index.tsx

@@ -5,7 +5,7 @@ import { Flexbox } from 'react-layout-kit';
 import { Link } from 'react-router-dom';
 import urlJoin from 'url-join';
 
-import Title from '../../../../../../features/Title';
+import Title from '../../../../../features/Title';
 import { useQuery } from '@/hooks/useQuery';
 import { AssistantMarketSource } from '@/types/discover';
 import { useDetailContext } from '../../DetailProvider';

src/app/[variants]/(main)/discover/(detail)/assistant/features/Sidebar/TocList/index.tsx

@@ -9,8 +9,8 @@ import { useToc } from '@/app/[variants]/(main)/discover/(detail)/features/Toc/u
 import { useQuery } from '@/hooks/useQuery';
 import { AssistantNavKey } from '@/types/discover';
 
-import Title from '../../../../../../features/Title';
-import Toc from '../../../../../features/Toc';
+import Title from '../../../../../features/Title';
+import Toc from '../../../../features/Toc';
 
 const TocList = memo(() => {
   const { t } = useTranslation('discover');

src/app/[variants]/(main)/discover/(detail)/assistant/features/StatusPage/index.tsx

@@ -6,20 +6,20 @@ import {
   FolderOpenOutlined,
 } from '@ant-design/icons';
 import { Button, Result } from 'antd';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 interface StatusPageProps {
   status: 'unpublished' | 'archived' | 'deprecated';
 }
 
 const StatusPage = memo<StatusPageProps>(({ status }) => {
-  const router = useRouter();
+  const navigate = useNavigate();
   const { t } = useTranslation('discover');
 
   const handleBackToMarket = () => {
-    router.push('/discover/assistant');
+    navigate('/discover/assistant');
   };
 
   // 审核中状态

src/app/[variants]/(main)/discover/(detail)/assistant/index.tsx

@@ -2,9 +2,9 @@
 
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { useParams } from 'react-router-dom';
+import { useLoaderData } from 'react-router-dom';
 
-import { withSuspense } from '@/components/withSuspense';
+import type { SlugParams } from '@/app/[variants]/loaders/routeParams';
 import { useQuery } from '@/hooks/useQuery';
 import { useDiscoverStore } from '@/store/discover';
 import { AssistantMarketSource, DiscoverTab } from '@/types/discover';
@@ -12,20 +12,19 @@ import { AssistantMarketSource, DiscoverTab } from '@/types/discover';
 import NotFound from '../components/NotFound';
 import Breadcrumb from '../features/Breadcrumb';
 import { TocProvider } from '../features/Toc/useToc';
-import { DetailProvider } from './[...slugs]/features/DetailProvider';
-import Details from './[...slugs]/features/Details';
-import Header from './[...slugs]/features/Header';
-import StatusPage from './[...slugs]/features/StatusPage';
-import Loading from './[...slugs]/loading';
+import { DetailProvider } from './features/DetailProvider';
+import Details from './features/Details';
+import Header from './features/Header';
+import StatusPage from './features/StatusPage';
+import Loading from './loading';
 
 interface AssistantDetailPageProps {
   mobile?: boolean;
 }
 
 const AssistantDetailPage = memo<AssistantDetailPageProps>(({ mobile }) => {
-  const params = useParams();
-  const slugs = params['*']?.split('/') || [];
-  const identifier = decodeURIComponent(slugs.join('/'));
+  const { slug } = useLoaderData() as SlugParams;
+  const identifier = decodeURIComponent(slug);
   const { version, source } = useQuery() as { source?: AssistantMarketSource; version?: string };
 
   const useAssistantDetail = useDiscoverStore((s) => s.useAssistantDetail);
@@ -53,4 +52,12 @@ const AssistantDetailPage = memo<AssistantDetailPageProps>(({ mobile }) => {
   );
 });
 
-export default withSuspense(AssistantDetailPage);
+const DesktopDiscoverAssistantDetailPage = memo<{ mobile?: boolean }>(() => {
+  return <AssistantDetailPage mobile={false} />;
+});
+
+const MobileDiscoverAssistantDetailPage = memo<{ mobile?: boolean }>(() => {
+  return <AssistantDetailPage mobile={true} />;
+});
+
+export { DesktopDiscoverAssistantDetailPage, MobileDiscoverAssistantDetailPage };

src/app/[variants]/(main)/discover/(detail)/features/Breadcrumb.tsx

@@ -3,12 +3,12 @@
 import { CopyButton } from '@lobehub/ui';
 import { Breadcrumb as AntdBreadcrumb } from 'antd';
 import { useTheme } from 'antd-style';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
+import Link from '@/app/[variants]/(main)/components/Link';
 import { DiscoverTab } from '@/types/discover';
 
 const Breadcrumb = memo<{ identifier: string; tab: DiscoverTab }>(({ tab, identifier }) => {

src/app/[variants]/(main)/discover/(detail)/mcp/[slug]/Client.tsx

@@ -1,43 +0,0 @@
-'use client';
-
-import { notFound } from 'next/navigation';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import { withSuspense } from '@/components/withSuspense';
-import { DetailProvider } from '@/features/MCPPluginDetail/DetailProvider';
-import Header from '@/features/MCPPluginDetail/Header';
-import { useFetchInstalledPlugins } from '@/hooks/useFetchInstalledPlugins';
-import { useQuery } from '@/hooks/useQuery';
-import { useDiscoverStore } from '@/store/discover';
-import { DiscoverTab } from '@/types/discover';
-
-import Breadcrumb from '../../features/Breadcrumb';
-import { TocProvider } from '../../features/Toc/useToc';
-import Details from './features/Details';
-import Loading from './loading';
-
-const Client = memo<{ identifier: string; mobile?: boolean }>(({ identifier, mobile }) => {
-  const { version } = useQuery() as { version?: string };
-  const useMcpDetail = useDiscoverStore((s) => s.useFetchMcpDetail);
-  const { data, isLoading } = useMcpDetail({ identifier, version });
-
-  useFetchInstalledPlugins();
-
-  if (isLoading) return <Loading />;
-  if (!data) return notFound();
-
-  return (
-    <TocProvider>
-      <DetailProvider config={data}>
-        {!mobile && <Breadcrumb identifier={identifier} tab={DiscoverTab.Mcp} />}
-        <Flexbox gap={16}>
-          <Header mobile={mobile} />
-          <Details mobile={mobile} />
-        </Flexbox>
-      </DetailProvider>
-    </TocProvider>
-  );
-});
-
-export default withSuspense(Client);

src/app/[variants]/(main)/discover/(detail)/mcp/[slug]/loading.tsx

@@ -1 +0,0 @@
-export { DetailsLoading as default } from '../../../components/ListLoading';

src/app/[variants]/(main)/discover/(detail)/mcp/features/Details/Related/index.tsx

@@ -5,8 +5,8 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useDetailContext } from '@/features/MCPPluginDetail/DetailProvider';
 
-import McpList from '../../../../../../(list)/mcp/features/List';
-import Title from '../../../../../../features/Title';
+import McpList from '../../../../../(list)/mcp/features/List';
+import Title from '../../../../../features/Title';
 
 const Related = memo(() => {
   const { t } = useTranslation('discover');

src/app/[variants]/(main)/discover/(detail)/mcp/features/Details/Versions/index.tsx

@@ -1,18 +1,18 @@
 import { Block, Icon, Tag } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import { CheckIcon, MinusIcon } from 'lucide-react';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
 import qs from 'query-string';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import Link from '@/app/[variants]/(main)/components/Link';
+import { usePathname } from '@/app/[variants]/(main)/hooks/usePathname';
 import InlineTable from '@/components/InlineTable';
 
-import PublishedTime from '../../../../../../../../../../components/PublishedTime';
-import { useDetailContext } from '../../../../../../../../../../features/MCPPluginDetail/DetailProvider';
-import Title from '../../../../../../features/Title';
+import PublishedTime from '../../../../../../../../../components/PublishedTime';
+import { useDetailContext } from '../../../../../../../../../features/MCPPluginDetail/DetailProvider';
+import Title from '../../../../../features/Title';
 
 const Versions = memo(() => {
   const theme = useTheme();

src/app/[variants]/(main)/discover/(detail)/mcp/features/Details/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useResponsive } from 'antd-style';
-import { useQueryState } from 'nuqs';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -10,6 +9,7 @@ import Nav from '@/features/MCPPluginDetail/Nav';
 import Overview from '@/features/MCPPluginDetail/Overview';
 import Schema from '@/features/MCPPluginDetail/Schema';
 import Score from '@/features/MCPPluginDetail/Score';
+import { useQueryState } from '@/hooks/useQueryParam';
 import { McpNavKey } from '@/types/discover';
 
 import Sidebar from '../Sidebar';