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

package/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>

package/src/app/[variants]/(main)/discover/(detail)/assistant/{[...slugs]/features → 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;

package/src/app/[variants]/(main)/discover/(detail)/assistant/{[...slugs]/features → 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(() => {

package/src/app/[variants]/(main)/discover/(detail)/assistant/{[...slugs]/features → 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(() => {

package/src/app/[variants]/(main)/discover/(detail)/assistant/{[...slugs]/features → 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';
 

package/src/app/[variants]/(main)/discover/(detail)/assistant/{[...slugs]/features → 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(() => {

package/src/app/[variants]/(main)/discover/(detail)/assistant/{[...slugs]/features → 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';

package/src/app/[variants]/(main)/discover/(detail)/assistant/{[...slugs]/features → 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 }) => {

package/src/app/[variants]/(main)/discover/(detail)/assistant/{[...slugs]/features → 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);
     }

package/src/app/[variants]/(main)/discover/(detail)/assistant/{[...slugs]/features → 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';
 

package/src/app/[variants]/(main)/discover/(detail)/assistant/{[...slugs]/features → 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';

package/src/app/[variants]/(main)/discover/(detail)/assistant/{[...slugs]/features → 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');

package/src/app/[variants]/(main)/discover/(detail)/assistant/{[...slugs]/features → 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');
   };
 
   // 审核中状态

package/src/app/[variants]/(main)/discover/(detail)/assistant/{AssistantDetailPage.tsx → 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 };

package/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 }) => {

package/src/app/[variants]/(main)/discover/(detail)/mcp/{[slug]/features → 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');

package/src/app/[variants]/(main)/discover/(detail)/mcp/{[slug]/features → 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();

package/src/app/[variants]/(main)/discover/(detail)/mcp/{[slug]/features → 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';

package/src/app/[variants]/(main)/discover/(detail)/mcp/{[slug]/features → features}/Sidebar/Related/index.tsx

@@ -7,7 +7,7 @@ import urlJoin from 'url-join';
 
 import { useDetailContext } from '@/features/MCPPluginDetail/DetailProvider';
 
-import Title from '../../../../../../features/Title';
+import Title from '../../../../../features/Title';
 import Item from './Item';
 
 const Related = memo(() => {
@@ -29,7 +29,7 @@ const Related = memo(() => {
       </Title>
       <Flexbox gap={8}>
         {related?.map((item, index) => {
-          const link = urlJoin('/mcp', item.identifier);
+          const link = urlJoin('/discover/mcp', item.identifier);
           return (
             <Link key={index} style={{ color: 'inherit', overflow: 'hidden' }} to={link}>
               <Item {...item} />

package/src/app/[variants]/(main)/discover/(detail)/mcp/{[slug]/features → features}/Sidebar/ServerConfig.tsx

@@ -1,24 +1,24 @@
-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 { useLocation } from 'react-router-dom';
 
 import { getRecommendedDeployment } from '@/features/MCP/utils';
 import Platform from '@/features/MCPPluginDetail/Deployment/Platform';
 import { useDetailContext } from '@/features/MCPPluginDetail/DetailProvider';
 import { McpNavKey } from '@/types/discover';
 
-import Title from '../../../../../features/Title';
+import Title from '../../../../features/Title';
 
 const ServerConfig = memo(() => {
   const { t } = useTranslation('discover');
-  const pathName = usePathname();
+  const { pathname } = useLocation();
   const installLink = qs.stringifyUrl({
     query: {
       activeTab: McpNavKey.Deployment,
     },
-    url: pathName,
+    url: pathname,
   });
   const { deploymentOptions = [], identifier } = useDetailContext();
   const recommendedDeployment = getRecommendedDeployment(deploymentOptions);

package/src/app/[variants]/(main)/discover/(detail)/mcp/{[slug]/features → features}/Sidebar/TocList/index.tsx

@@ -11,8 +11,8 @@ import { useDetailContext } from '@/features/MCPPluginDetail/DetailProvider';
 import { useQuery } from '@/hooks/useQuery';
 import { McpNavKey } 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');

package/src/app/[variants]/(main)/discover/(detail)/mcp/{McpDetailPage.tsx → 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 { DetailProvider } from '@/features/MCPPluginDetail/DetailProvider';
 import Header from '@/features/MCPPluginDetail/Header';
 import { useFetchInstalledPlugins } from '@/hooks/useFetchInstalledPlugins';
@@ -15,16 +15,16 @@ import { DiscoverTab } from '@/types/discover';
 import NotFound from '../components/NotFound';
 import Breadcrumb from '../features/Breadcrumb';
 import { TocProvider } from '../features/Toc/useToc';
-import Details from './[slug]/features/Details';
-import Loading from './[slug]/loading';
+import Details from './features/Details';
+import Loading from './loading';
 
 interface McpDetailPageProps {
   mobile?: boolean;
 }
 
 const McpDetailPage = memo<McpDetailPageProps>(({ mobile }) => {
-  const params = useParams();
-  const identifier = params['*'] || params.slug || '';
+  const { slug } = useLoaderData() as SlugParams;
+  const identifier = slug;
 
   const { version } = useQuery() as { version?: string };
   const useMcpDetail = useDiscoverStore((s) => s.useFetchMcpDetail);
@@ -48,4 +48,12 @@ const McpDetailPage = memo<McpDetailPageProps>(({ mobile }) => {
   );
 });
 
-export default withSuspense(McpDetailPage);
+const DesktopMcpPage = memo<{ mobile?: boolean }>(() => {
+  return <McpDetailPage mobile={false} />;
+});
+
+const MobileMcpPage = memo<{ mobile?: boolean }>(() => {
+  return <McpDetailPage mobile={true} />;
+});
+
+export { DesktopMcpPage, MobileMcpPage };

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

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

package/src/app/[variants]/(main)/discover/(detail)/model/{[...slugs]/features → features}/Details/Overview/index.tsx

@@ -3,7 +3,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import Title from '../../../../../../features/Title';
+import Title from '../../../../../features/Title';
 import { useDetailContext } from '../../DetailProvider';
 import ProviderList from './ProviderList';
 

package/src/app/[variants]/(main)/discover/(detail)/model/{[...slugs]/features → features}/Details/Parameter/ParameterItem.tsx

@@ -5,7 +5,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import Statistic from '../../../../../../components/Statistic';
+import Statistic from '../../../../../components/Statistic';
 
 const DEFAULT_DOC_URL = 'https://lobehub.com/docs/usage/agents/model';
 

package/src/app/[variants]/(main)/discover/(detail)/model/{[...slugs]/features → features}/Details/Related/index.tsx

@@ -3,8 +3,8 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import List from '../../../../../../(list)/model/features/List';
-import Title from '../../../../../../features/Title';
+import List from '../../../../../(list)/model/features/List';
+import Title from '../../../../../features/Title';
 import { useDetailContext } from '../../DetailProvider';
 
 const Related = memo(() => {

package/src/app/[variants]/(main)/discover/(detail)/model/{[...slugs]/features → 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 { ModelNavKey } from '@/types/discover';
 
 import Sidebar from '../Sidebar';

package/src/app/[variants]/(main)/discover/(detail)/model/{[...slugs]/features → features}/Header.tsx

@@ -11,7 +11,7 @@ import { Flexbox } from 'react-layout-kit';
 import ModelTypeIcon from '@/app/[variants]/(main)/discover/(list)/model/features/List/ModelTypeIcon';
 import { ModelInfoTags } from '@/components/ModelSelect';
 
-import PublishedTime from '../../../../../../../../components/PublishedTime';
+import PublishedTime from '../../../../../../../components/PublishedTime';
 import { useDetailContext } from './DetailProvider';
 
 const useStyles = createStyles(({ css, token }) => {

package/src/app/[variants]/(main)/discover/(detail)/model/{[...slugs]/features → features}/Sidebar/ActionButton/ChatWithModel.tsx

@@ -6,9 +6,9 @@ import { Dropdown } from 'antd';
 import { createStyles } from 'antd-style';
 import { ChevronDownIcon } from 'lucide-react';
 import Link from 'next/link';
-import { useRouter } from 'nextjs-toploader/app';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 import urlJoin from 'url-join';
 
 import { useDetailContext } from '../../DetailProvider';
@@ -26,7 +26,7 @@ const ChatWithModel = memo(() => {
   const { t } = useTranslation('discover');
   const { providers = [] } = useDetailContext();
   const includeLobeHub = providers.some((item) => item.id === 'lobehub');
-  const route = useRouter();
+  const navigate = useNavigate();
   const list = providers.filter((provider) => provider.id !== 'lobehub');
 
   const items = list.map((item) => ({
@@ -40,7 +40,7 @@ const ChatWithModel = memo(() => {
   }));
 
   const handleLobeHubChat = () => {
-    route.push('/chat');
+    navigate('/chat');
   };
 
   if (includeLobeHub)

package/src/app/[variants]/(main)/discover/(detail)/model/{[...slugs]/features → features}/Sidebar/ActionButton/index.tsx

@@ -7,7 +7,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 ChatWithModel from './ChatWithModel';
 

package/src/app/[variants]/(main)/discover/(detail)/model/{[...slugs]/features → 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 { useDetailContext } from '../../DetailProvider';
 import Item from './Item';
 
@@ -28,7 +28,7 @@ const Related = memo(() => {
       </Title>
       <Flexbox gap={8}>
         {related?.map((item, index) => {
-          const link = urlJoin('/model', item.identifier);
+          const link = urlJoin('/discover/model', item.identifier);
           return (
             <Link key={index} style={{ color: 'inherit', overflow: 'hidden' }} to={link}>
               <Item {...item} />

package/src/app/[variants]/(main)/discover/(detail)/model/{[...slugs]/features → features}/Sidebar/RelatedProviders/index.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import Title from '../../../../../../features/Title';
+import Title from '../../../../../features/Title';
 import { useDetailContext } from '../../DetailProvider';
 import Item from './Item';
 

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

@@ -2,27 +2,26 @@
 
 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 { useDiscoverStore } from '@/store/discover';
 import { DiscoverTab } from '@/types/discover';
 
 import NotFound from '../components/NotFound';
 import Breadcrumb from '../features/Breadcrumb';
-import { DetailProvider } from './[...slugs]/features/DetailProvider';
-import Details from './[...slugs]/features/Details';
-import Header from './[...slugs]/features/Header';
-import Loading from './[...slugs]/loading';
+import { DetailProvider } from './features/DetailProvider';
+import Details from './features/Details';
+import Header from './features/Header';
+import Loading from './loading';
 
 interface ModelDetailPageProps {
   mobile?: boolean;
 }
 
 const ModelDetailPage = memo<ModelDetailPageProps>(({ mobile }) => {
-  const params = useParams();
-  const slugs = params['*']?.split('/') || [];
-  const identifier = decodeURIComponent(slugs.join('/'));
+  const { slug } = useLoaderData() as SlugParams;
+  const identifier = decodeURIComponent(slug);
 
   const useModelDetail = useDiscoverStore((s) => s.useModelDetail);
   const { data, isLoading } = useModelDetail({ identifier });
@@ -41,4 +40,12 @@ const ModelDetailPage = memo<ModelDetailPageProps>(({ mobile }) => {
   );
 });
 
-export default withSuspense(ModelDetailPage);
+const DesktopModelPage = memo<{ mobile?: boolean }>(() => {
+  return <ModelDetailPage mobile={false} />;
+});
+
+const MobileModelPage = memo<{ mobile?: boolean }>(() => {
+  return <ModelDetailPage mobile={true} />;
+});
+
+export { DesktopModelPage, MobileModelPage };

package/src/app/[variants]/(main)/discover/(detail)/model/loading.tsx

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

package/src/app/[variants]/(main)/discover/(detail)/provider/{[...slugs]/features → features}/Details/Related/index.tsx

@@ -2,8 +2,8 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import List from '../../../../../../(list)/provider/features/List';
-import Title from '../../../../../../features/Title';
+import List from '../../../../../(list)/provider/features/List';
+import Title from '../../../../../features/Title';
 import { useDetailContext } from '../../DetailProvider';
 
 const Related = memo(() => {