🐛 fix: Fix intercepting-routes on mobile

src/app/(main)/(mobile)/me/features/Cate.tsx

@@ -1,18 +1,19 @@
 'use client';
 
 import { useTheme } from 'antd-style';
+import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
 import { useCategory } from '@/app/(main)/settings//hooks/useCategory';
 import Cell from '@/components/Cell';
 import Divider from '@/components/Cell/Divider';
-import redirectHard from '@/server/redirectHard';
 
 const SettingCate = memo(() => {
   const theme = useTheme();
   const settingItems = useCategory({ mobile: true });
+  const router = useRouter();
 
   return (
     <Flexbox style={{ background: theme.colorBgContainer }} width={'100%'}>
@@ -23,7 +24,7 @@ const SettingCate = memo(() => {
             icon={icon}
             key={key}
             label={label}
-            onClick={() => redirectHard(urlJoin('/settings', key))}
+            onClick={() => router.replace(urlJoin('/settings', key))}
           />
         );
       })}

src/app/(main)/chat/features/SettingButton.tsx

@@ -1,23 +1,19 @@
 import { ActionIcon } from '@lobehub/ui';
 import { AlignJustify } from 'lucide-react';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
-import redirectHard from '@/server/redirectHard';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { useGlobalStore } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
-import { pathString } from '@/utils/url';
 
 const SettingButton = memo<{ mobile?: boolean }>(({ mobile }) => {
   const isInbox = useSessionStore(sessionSelectors.isInboxSession);
   const { t } = useTranslation('common');
-  const router = useRouter();
-
-  const push = mobile ? redirectHard : router.push;
+  const router = useQueryRoute();
 
   return (
     <ActionIcon
@@ -27,9 +23,9 @@ const SettingButton = memo<{ mobile?: boolean }>(({ mobile }) => {
           useGlobalStore.setState({
             sidebarKey: SidebarTabKey.Setting,
           });
-          push('/settings/agent');
+          router.push(mobile ? '/settings/agent' : '/settings/m', mobile ? {} : { tab: 'agent' });
         } else {
-          push(pathString('/chat/settings', { search: location.search }));
+          router.push(mobile ? '/chat/settings' : '/chat/settings/m');
         }
       }}
       size={mobile ? MOBILE_HEADER_ICON_SIZE : DESKTOP_HEADER_ICON_SIZE}

src/app/(main)/chat/settings/m/page.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { useLayoutEffect } from 'react';
+
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+
+export default () => {
+  const router = useQueryRoute();
+
+  useLayoutEffect(() => {
+    router.replace('/chat/settings');
+  }, []);
+
+  return null;
+};

src/app/(main)/settings/@category/features/CategoryContent.tsx

@@ -5,28 +5,30 @@ import urlJoin from 'url-join';
 
 import Menu from '@/components/Menu';
 import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
+import { useQuery } from '@/hooks/useQuery';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { SettingsTabs } from '@/store/global/initialState';
 
 import { useCategory } from '../../hooks/useCategory';
 
 const CategoryContent = memo<{ modal?: boolean }>(({ modal }) => {
   const activeTab = useActiveSettingsKey();
+  const { tab = SettingsTabs.Common } = useQuery();
   const cateItems = useCategory();
   const router = useQueryRoute();
 
   return (
     <Menu
       items={cateItems}
       onClick={({ key }) => {
-        const path = urlJoin('/settings', key);
         if (modal) {
-          router.replace(path);
+          router.replace('/settings/m', { tab: key });
         } else {
-          router.push(path);
+          router.push(urlJoin('/settings', key));
         }
       }}
       selectable
-      selectedKeys={[activeTab as any]}
+      selectedKeys={[modal ? tab : (activeTab as any)]}
       variant={'compact'}
     />
   );

src/app/(main)/settings/about/index.tsx

@@ -0,0 +1,35 @@
+import { Logo, Tag } from '@lobehub/ui';
+import { Flexbox } from 'react-layout-kit';
+
+import Follow from '@//features/Follow';
+import AboutList from '@/app/(main)/settings//about/features/AboutList';
+import Analytics from '@/app/(main)/settings/about/features/Analytics';
+import { getServerConfig } from '@/config/server';
+import { CURRENT_VERSION } from '@/const/version';
+
+const enabledTelemetryChat = getServerConfig().ENABLE_LANGFUSE;
+
+const COPYRIGHT = `© 2023-${new Date().getFullYear()} LobeHub, LLC`;
+
+const Page = ({ mobile }: { mobile?: boolean }) => {
+  return (
+    <Flexbox align={'center'} gap={12} paddingBlock={36} width={'100%'}>
+      <Logo size={mobile ? 100 : 120} />
+      <h1 style={{ fontSize: mobile ? 32 : 36, fontWeight: 900, lineHeight: 1, marginBottom: 0 }}>
+        LobeChat
+      </h1>
+      <Tag>v{CURRENT_VERSION}</Tag>
+      <Flexbox gap={24} style={{ marginBlock: 48 }} width={'100%'}>
+        <AboutList />
+        {enabledTelemetryChat && <Analytics />}
+      </Flexbox>
+      <Follow />
+      <div>Empowering your AI dreams by LobeHub</div>
+      <div style={{ fontWeight: 400, opacity: 0.33 }}>{COPYRIGHT}</div>
+    </Flexbox>
+  );
+};
+
+Page.displayName = 'AboutSetting';
+
+export default Page;

src/app/(main)/settings/about/page.tsx

@@ -1,12 +1,7 @@
-import { Flexbox } from 'react-layout-kit';
-
-import Follow from '@//features/Follow';
-import AboutList from '@/app/(main)/settings//about/features/AboutList';
-import Analytics from '@/app/(main)/settings/about/features/Analytics';
-import { getServerConfig } from '@/config/server';
 import { translation } from '@/server/translation';
+import { isMobileDevice } from '@/utils/responsive';
 
-const enabledTelemetryChat = getServerConfig().ENABLE_LANGFUSE;
+import Page from './index';
 
 export const generateMetadata = async () => {
   const { t } = await translation('setting');
@@ -15,18 +10,8 @@ export const generateMetadata = async () => {
   };
 };
 
-const Page = () => {
-  return (
-    <>
-      <Flexbox gap={24} style={{ marginBlock: 48 }} width={'100%'}>
-        <AboutList />
-        {enabledTelemetryChat && <Analytics />}
-      </Flexbox>
-      <Follow />
-    </>
-  );
-};
-
-Page.displayName = 'AboutSetting';
+export default () => {
+  const isMobile = isMobileDevice();
 
-export default Page;
+  return <Page mobile={isMobile} />;
+};

src/app/(main)/settings/agent/layout.tsx → src/app/(main)/settings/agent/index.tsx

@@ -1,15 +1,21 @@
 'use client';
 
 import isEqual from 'fast-deep-equal';
-import { PropsWithChildren, memo } from 'react';
+import { memo } from 'react';
 
 import { INBOX_SESSION_ID } from '@/const/session';
+import AgentChat from '@/features/AgentSetting/AgentChat';
+import AgentMeta from '@/features/AgentSetting/AgentMeta';
+import AgentModal from '@/features/AgentSetting/AgentModal';
+import AgentPlugin from '@/features/AgentSetting/AgentPlugin';
+import AgentPrompt from '@/features/AgentSetting/AgentPrompt';
+import AgentTTS from '@/features/AgentSetting/AgentTTS';
 import StoreUpdater from '@/features/AgentSetting/StoreUpdater';
 import { Provider, createStore } from '@/features/AgentSetting/store';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 
-const Layout = memo(({ children }: PropsWithChildren) => {
+const Page = memo(() => {
   const config = useUserStore(settingsSelectors.defaultAgentConfig, isEqual);
   const meta = useUserStore(settingsSelectors.defaultAgentMeta, isEqual);
   const [updateAgent] = useUserStore((s) => [s.updateDefaultAgent]);
@@ -27,9 +33,16 @@ const Layout = memo(({ children }: PropsWithChildren) => {
           updateAgent({ meta });
         }}
       />
-      {children}
+      <AgentPrompt />
+      <AgentMeta />
+      <AgentChat />
+      <AgentModal />
+      <AgentTTS />
+      <AgentPlugin />
     </Provider>
   );
 });
 
-export default Layout;
+Page.displayName = 'AgentSetting';
+
+export default Page;

src/app/(main)/settings/agent/page.tsx

@@ -1,9 +1,3 @@
-import AgentChat from '@/features/AgentSetting/AgentChat';
-import AgentMeta from '@/features/AgentSetting/AgentMeta';
-import AgentModal from '@/features/AgentSetting/AgentModal';
-import AgentPlugin from '@/features/AgentSetting/AgentPlugin';
-import AgentPrompt from '@/features/AgentSetting/AgentPrompt';
-import AgentTTS from '@/features/AgentSetting/AgentTTS';
 import { translation } from '@/server/translation';
 
 export const generateMetadata = async () => {
@@ -13,19 +7,4 @@ export const generateMetadata = async () => {
   };
 };
 
-const Page = () => {
-  return (
-    <>
-      <AgentPrompt />
-      <AgentMeta />
-      <AgentChat />
-      <AgentModal />
-      <AgentTTS />
-      <AgentPlugin />
-    </>
-  );
-};
-
-Page.displayName = 'AgentSetting';
-
-export default Page;
+export { default } from './index';

src/app/(main)/settings/common/index.tsx

@@ -0,0 +1,19 @@
+import { getServerConfig } from '@/config/server';
+
+import Common from './features/Common';
+import Theme from './features/Theme';
+
+const { SHOW_ACCESS_CODE_CONFIG, ENABLE_OAUTH_SSO } = getServerConfig();
+
+const Page = () => {
+  return (
+    <>
+      <Theme />
+      <Common showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} showOAuthLogin={ENABLE_OAUTH_SSO} />
+    </>
+  );
+};
+
+Page.displayName = 'CommonSetting';
+
+export default Page;

src/app/(main)/settings/common/page.tsx

@@ -1,26 +1,10 @@
-import { getServerConfig } from '@/config/server';
 import { translation } from '@/server/translation';
 
-import Common from './features/Common';
-import Theme from './features/Theme';
-
 export const generateMetadata = async () => {
   const { t } = await translation('setting');
   return {
     title: t('tab.common'),
   };
 };
 
-const Page = () => {
-  const { SHOW_ACCESS_CODE_CONFIG, ENABLE_OAUTH_SSO } = getServerConfig();
-  return (
-    <>
-      <Theme />
-      <Common showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} showOAuthLogin={ENABLE_OAUTH_SSO} />
-    </>
-  );
-};
-
-Page.displayName = 'CommonSetting';
-
-export default Page;
+export { default } from './index';