🐛 fix: Fix InterceptingRoutes in discover

lobehub · Sep 18, 2024 · 70a6a32 · 70a6a32
1 parent 8fb2bd0
commit 70a6a32
Show file tree

Hide file tree

Showing 30 changed files with 109 additions and 267 deletions.
diff --git a/package.json b/package.json
@@ -172,6 +172,7 @@
     "next-auth": "beta",
     "next-mdx-remote": "^4.4.1",
     "next-sitemap": "^4.2.3",
+    "nextjs-toploader": "^3.6.15",
     "numeral": "^2.0.6",
     "nuqs": "^1.17.8",
     "officeparser": "^4.1.1",

diff --git a/src/app/(main)/discover/(detail)/assistant/[slug]/features/InfoSidebar/index.tsx b/src/app/(main)/discover/(detail)/assistant/[slug]/features/InfoSidebar/index.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 import { Skeleton } from 'antd';
+import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverAssistantItem, DiscoverPlugintem } from '@/types/discover';
 
 import Block from '../../../../features/Block';
@@ -28,13 +28,13 @@ const InfoSidebar = memo<InfoSidebarProps>(({ pluginData, data, ...rest }) => {
       {pluginData && pluginData?.length > 0 && (
         <Block gap={12} title={t('assistants.plugins')}>
           {pluginData.map((item) => (
-            <InterceptingLink
+            <Link
               href={urlJoin('/discover/plugin', item.identifier)}
               key={item.identifier}
               style={{ color: 'inherit' }}
             >
               <ToolItem {...item} />
-            </InterceptingLink>
+            </Link>
           ))}
         </Block>
       )}
@@ -46,12 +46,9 @@ const InfoSidebar = memo<InfoSidebarProps>(({ pluginData, data, ...rest }) => {
       >
         {data?.suggestions?.length > 0 ? (
           data?.suggestions.map((item) => (
-            <InterceptingLink
-              href={urlJoin('/discover/assistant', item.identifier)}
-              key={item.identifier}
-            >
+            <Link href={urlJoin('/discover/assistant', item.identifier)} key={item.identifier}>
               <SuggestionItem {...item} />
-            </InterceptingLink>
+            </Link>
           ))
         ) : (
           <Skeleton active paragraph={{ rows: 5 }} title={false} />

diff --git a/src/app/(main)/discover/(detail)/features/Back.tsx b/src/app/(main)/discover/(detail)/features/Back.tsx
@@ -8,8 +8,6 @@ import { CSSProperties, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { useInterceptingRoutes } from '@/hooks/useInterceptingRoutes';
-
 const useStyles = createStyles(({ css, token }) => {
   return {
     back: css`
@@ -23,12 +21,9 @@ const useStyles = createStyles(({ css, token }) => {
 });
 
 const Back = memo<{ href: string; style?: CSSProperties }>(({ href, style }) => {
-  const { isIntercepted } = useInterceptingRoutes();
   const { t } = useTranslation('discover');
   const { styles } = useStyles();
 
-  if (isIntercepted) return null;
-
   return (
     <Link className={styles.back} href={href} style={{ marginBottom: 8, ...style }}>
       <Flexbox align={'center'} gap={8} horizontal>

diff --git a/src/app/(main)/discover/(detail)/features/DetailLayout.tsx b/src/app/(main)/discover/(detail)/features/DetailLayout.tsx
@@ -5,7 +5,6 @@ import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import Footer from '@/features/Setting/Footer';
-import { useInterceptingRoutes } from '@/hooks/useInterceptingRoutes';
 
 import SidebarContainer from './SidebarContainer';
 
@@ -20,10 +19,9 @@ interface DetailLayoutProps {
 
 const DetailLayout = memo<DetailLayoutProps>(
   ({ statistics, mobile, header, sidebar, children, actions }) => {
-    const { md = true, xl = true } = useResponsive();
-    const { isIntercepted } = useInterceptingRoutes();
+    const { md = true } = useResponsive();
 
-    if (mobile || !md || (isIntercepted && !xl))
+    if (mobile || !md)
       return (
         <>
           {header}
@@ -37,36 +35,6 @@ const DetailLayout = memo<DetailLayoutProps>(
         </>
       );
 
-    if (isIntercepted) {
-      return (
-        <>
-          <Flexbox flex={1} gap={24} style={{ overflow: 'hidden', position: 'relative' }}>
-            <Flexbox style={{ paddingRight: 16 }}>{header}</Flexbox>
-            <Flexbox
-              gap={24}
-              style={{
-                overflowX: 'hidden',
-                overflowY: 'auto',
-                paddingBottom: 48,
-                paddingRight: 16,
-                position: 'relative',
-              }}
-            >
-              {children}
-              <Footer />
-            </Flexbox>
-          </Flexbox>
-          <SidebarContainer style={{ position: 'sticky', top: '0' }}>
-            <Flexbox gap={16} width={'100%'}>
-              {actions}
-              {statistics}
-            </Flexbox>
-            {sidebar}
-          </SidebarContainer>
-        </>
-      );
-    }
-
     return (
       <>
         {header}

diff --git a/src/app/(main)/discover/(detail)/model/[...slugs]/features/InfoSidebar/index.tsx b/src/app/(main)/discover/(detail)/model/[...slugs]/features/InfoSidebar/index.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 import { Skeleton } from 'antd';
+import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverModelItem } from '@/types/discover';
 
 import Block from '../../../../features/Block';
@@ -31,12 +31,9 @@ const InfoSidebar = memo<InfoSidebarProps>(({ data, ...rest }) => {
       >
         {data?.suggestions?.length > 0 ? (
           data?.suggestions.map((item) => (
-            <InterceptingLink
-              href={urlJoin('/discover/model', item.identifier)}
-              key={item.identifier}
-            >
+            <Link href={urlJoin('/discover/model', item.identifier)} key={item.identifier}>
               <SuggestionItem {...item} />
-            </InterceptingLink>
+            </Link>
           ))
         ) : (
           <Skeleton active paragraph={{ rows: 5 }} title={false} />

diff --git a/src/app/(main)/discover/(detail)/model/[...slugs]/features/ProviderList/ProviderItem.tsx b/src/app/(main)/discover/(detail)/model/[...slugs]/features/ProviderList/ProviderItem.tsx
@@ -1,15 +1,14 @@
 import { ModelTag, ProviderCombine } from '@lobehub/icons';
 import { ActionIcon, Grid, Icon, Tooltip } from '@lobehub/ui';
 import { Tag } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStyles, useResponsive } from 'antd-style';
 import { BadgeCheck, BookIcon, ChevronRightIcon, KeyIcon } from 'lucide-react';
 import Link from 'next/link';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DEFAULT_MODEL_PROVIDER_LIST } from '@/config/modelProviders';
 import { BASE_PROVIDER_DOC_URL } from '@/const/url';
 import { DiscoverProviderItem } from '@/types/discover';
@@ -31,9 +30,12 @@ interface ProviderItemProps extends DiscoverProviderItem {
 
 const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) => {
   const { t } = useTranslation('discover');
+  const { xl = true } = useResponsive();
   const { styles, theme } = useStyles();
   const isLobeHub = identifier === 'lobehub';
 
+  const isMobile = mobile || !xl;
+
   const model = useMemo(() => {
     const prividerItem = DEFAULT_MODEL_PROVIDER_LIST.find((v) => v.id === identifier);
     if (!prividerItem) return;
@@ -70,13 +72,10 @@ const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) =
 
   const header = (
     <Flexbox gap={4} style={{ minWidth: 240 }}>
-      <InterceptingLink
-        href={urlJoin('/discover/provider', identifier)}
-        style={{ color: 'inherit' }}
-      >
+      <Link href={urlJoin('/discover/provider', identifier)} style={{ color: 'inherit' }}>
         <ProviderCombine provider={identifier} size={24} />
-      </InterceptingLink>
-      <Flexbox align={'center'} gap={6} horizontal>
+      </Link>
+      <Flexbox align={'center'} gap={6} horizontal wrap={'wrap'}>
         <ModelTag model={modelId} style={{ background: theme.colorFillQuaternary, margin: 0 }} />
         {isLobeHub && (
           <Tooltip title={t('models.providerInfo.officialTooltip')}>
@@ -103,9 +102,9 @@ const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) =
   );
 
   const button = (
-    <InterceptingLink href={urlJoin('/discover/provider', identifier)} style={{ color: 'inherit' }}>
+    <Link href={urlJoin('/discover/provider', identifier)} style={{ color: 'inherit' }}>
       <ActionIcon color={theme.colorTextDescription} icon={ChevronRightIcon} />
-    </InterceptingLink>
+    </Link>
   );
 
   return (
@@ -117,7 +116,7 @@ const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) =
       padding={16}
       wrap={'wrap'}
     >
-      {mobile && (
+      {isMobile && (
         <Flexbox align={'center'} horizontal justify={'space-between'}>
           {header}
           {button}
@@ -129,13 +128,13 @@ const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) =
         gap={16}
         horizontal
         maxItemWidth={100}
-        rows={mobile ? 2 : items.length + 1}
+        rows={isMobile ? 2 : items.length + 1}
         style={{ minWidth: 240 }}
       >
-        {!mobile && header}
+        {!isMobile && header}
         {items.map((item, index) => (
           <Statistic
-            align={mobile ? 'flex-start' : 'center'}
+            align={isMobile ? 'flex-start' : 'center'}
             gap={4}
             key={index}
             valuePlacement={'bottom'}
@@ -144,7 +143,7 @@ const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) =
           />
         ))}
       </Grid>
-      {!mobile && button}
+      {!isMobile && button}
     </Flexbox>
   );
 });

diff --git a/src/app/(main)/discover/(detail)/plugin/[slug]/features/InfoSidebar/index.tsx b/src/app/(main)/discover/(detail)/plugin/[slug]/features/InfoSidebar/index.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 import { Skeleton } from 'antd';
+import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverPlugintem } from '@/types/discover';
 
 import Block from '../../../../features/Block';
@@ -31,12 +31,9 @@ const InfoSidebar = memo<InfoSidebarProps>(({ data, ...rest }) => {
       >
         {data?.suggestions?.length > 0 ? (
           data?.suggestions.map((item) => (
-            <InterceptingLink
-              href={urlJoin('/discover/plugin', item.identifier)}
-              key={item.identifier}
-            >
+            <Link href={urlJoin('/discover/plugin', item.identifier)} key={item.identifier}>
               <SuggestionItem {...item} />
-            </InterceptingLink>
+            </Link>
           ))
         ) : (
           <Skeleton active paragraph={{ rows: 5 }} title={false} />

diff --git a/src/app/(main)/discover/(detail)/provider/[slug]/features/InfoSidebar/index.tsx b/src/app/(main)/discover/(detail)/provider/[slug]/features/InfoSidebar/index.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 import { Skeleton } from 'antd';
+import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverProviderItem } from '@/types/discover';
 
 import Block from '../../../../features/Block';
@@ -31,12 +31,9 @@ const InfoSidebar = memo<InfoSidebarProps>(({ data, ...rest }) => {
       >
         {data?.suggestions?.length > 0 ? (
           data?.suggestions.map((item) => (
-            <InterceptingLink
-              href={urlJoin('/discover/provider', item.identifier)}
-              key={item.identifier}
-            >
+            <Link href={urlJoin('/discover/provider', item.identifier)} key={item.identifier}>
               <SuggestionItem {...item} />
-            </InterceptingLink>
+            </Link>
           ))
         ) : (
           <Skeleton active paragraph={{ rows: 5 }} title={false} />