🐛 fix: 修正移动端路由问题

vincentngo · Sep 8, 2023 · ae3d2f4 · ae3d2f4
1 parent e34c6e4
commit ae3d2f4
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 19 deletions.
diff --git a/src/const/url.ts b/src/const/url.ts
@@ -10,4 +10,5 @@ export const DISCORD = 'https://discord.gg/AYFPHvv2jT';
 export const PLUGINS_INDEX_URL =
   process.env.PLUGINS_INDEX_URL ?? 'https://chat-plugins.lobehub.com';
 
-export const SESSION_CHAT_URL = (id: string = INBOX_SESSION_ID) => `/chat#session=${id}`;
+export const SESSION_CHAT_URL = (id: string = INBOX_SESSION_ID, mobile?: boolean) =>
+  mobile ? `/chat/mobile#session=${id}` : `/chat#session=${id}`;
diff --git a/src/layout/AppMobileLayout.tsx b/src/layout/AppMobileLayout.tsx
@@ -6,6 +6,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import MobileTabBar from '@/features/MobileTabBar';
+import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
 
 const useStyles = createStyles(({ css }) => ({
   container: css`
@@ -45,6 +46,10 @@ const AppMobileLayout = memo<AppMobileLayoutProps>(
   ({ children, showTabBar, navBar, style, className }) => {
     const { styles, cx } = useStyles();
 
+    useOnFinishHydrationSession(() => {
+      useSessionStore.setState({ isMobile: true });
+    }, []);
+
     return (
       <>
         <Head>

diff --git a/src/pages/chat/features/Conversation/index.tsx b/src/pages/chat/features/Conversation/index.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
+import { usePluginStore } from '@/store/plugin';
 
 import ChatList from './ChatList';
 import ChatInput from './Input';
@@ -12,6 +13,10 @@ import ChatScrollAnchor from './ScrollAnchor';
 const Conversation = memo<{ mobile?: boolean }>(({ mobile }) => {
   const ref = useRef(null);
   const { t } = useTranslation('common');
+
+  const useFetchPluginList = usePluginStore((s) => s.useFetchPluginList);
+  useFetchPluginList();
+
   return (
     <Flexbox flex={1} style={{ position: 'relative' }}>
       <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>

diff --git a/src/pages/chat/features/SessionList/Inbox.tsx b/src/pages/chat/features/SessionList/Inbox.tsx
@@ -15,7 +15,12 @@ const Inbox = memo(() => {
   const ref = useRef(null);
   const isHovering = useHover(ref);
   const { t } = useTranslation('common');
-  const [activeId, switchSession] = useSessionStore((s) => [s.activeId, s.switchSession]);
+
+  const [mobile, activeId, switchSession] = useSessionStore((s) => [
+    s.isMobile,
+    s.activeId,
+    s.switchSession,
+  ]);
 
   const avatarRender = useMemo(
     () => (
@@ -31,7 +36,7 @@ const Inbox = memo(() => {
 
   return (
     <Link
-      href={SESSION_CHAT_URL()}
+      href={SESSION_CHAT_URL(INBOX_SESSION_ID, mobile)}
       onClick={(e) => {
         e.preventDefault();
         switchSession(INBOX_SESSION_ID);

diff --git a/src/pages/chat/features/SessionList/List/index.tsx b/src/pages/chat/features/SessionList/List/index.tsx
@@ -1,3 +1,4 @@
+import { useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import Link from 'next/link';
 import { memo } from 'react';
@@ -12,20 +13,24 @@ import SkeletonList from './SkeletonList';
 
 const SessionList = memo(() => {
   const list = useSessionStore(sessionSelectors.sessionList, isEqual);
-  const activeSession = useSessionStore((s) => s.activeSession);
+  const [activeSession, switchSession] = useSessionStore((s) => [s.activeSession, s.switchSession]);
 
   const isInit = useSessionHydrated();
 
+  const { mobile } = useResponsive();
+
   return !isInit ? (
     <SkeletonList />
   ) : list.length > 0 ? (
     list.map(({ id }) => (
       <Link
-        href={SESSION_CHAT_URL(id)}
+        href={SESSION_CHAT_URL(id, mobile)}
         key={id}
         onClick={(e) => {
           e.preventDefault();
-          activeSession(id);
+
+          if (mobile) switchSession(id);
+          else activeSession(id);
         }}
       >
         <SessionItem id={id} />

diff --git a/src/pages/chat/layout.tsx b/src/pages/chat/layout.tsx
@@ -4,7 +4,6 @@ import { Flexbox } from 'react-layout-kit';
 
 import AppLayout from '@/layout/AppLayout';
 import { useSwitchSideBarOnInit } from '@/store/global';
-import { usePluginStore } from '@/store/plugin';
 
 import { Sessions } from './features/SessionList';
 
@@ -13,9 +12,6 @@ const ChatLayout = memo<PropsWithChildren>(({ children }) => {
 
   useSwitchSideBarOnInit('chat');
 
-  const useFetchPluginList = usePluginStore((s) => s.useFetchPluginList);
-  useFetchPluginList();
-
   return (
     <AppLayout>
       <Sessions />

diff --git a/src/pages/chat/mobile/index.page.tsx b/src/pages/chat/mobile/index.page.tsx
@@ -10,7 +10,6 @@ import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Conversation from '../features/Conversation';
 import SideBar from '../features/Sidebar';
-import ChatLayout from '../layout';
 
 const Chat = memo(() => {
   const [avatar, title] = useSessionStore((s) => [
@@ -26,12 +25,10 @@ const Chat = memo(() => {
         <title>{pageTitle}</title>
       </Head>
       <AppMobileLayout navBar={<Header />}>
-        <ChatLayout>
-          <Flexbox height={'calc(100vh - 44px)'} horizontal>
-            <Conversation mobile />
-            <SideBar mobile />
-          </Flexbox>
-        </ChatLayout>
+        <Flexbox height={'calc(100vh - 44px)'} horizontal>
+          <Conversation mobile />
+          <SideBar mobile />
+        </Flexbox>
       </AppMobileLayout>
     </>
   );

diff --git a/src/store/session/slices/session/action.ts b/src/store/session/slices/session/action.ts
@@ -158,13 +158,13 @@ export const createSessionSlice: StateCreator<
 
     get().activeSession(id);
 
-    Router.push(SESSION_CHAT_URL(id));
+    Router.push(SESSION_CHAT_URL(id, get().isMobile));
   },
   switchSession: (sessionId = INBOX_SESSION_ID) => {
     if (get().activeId === sessionId) return;
 
     get().activeSession(sessionId);
 
-    Router.push(SESSION_CHAT_URL(sessionId));
+    Router.push(SESSION_CHAT_URL(sessionId, get().isMobile));
   },
 });
diff --git a/src/store/session/slices/session/initialState.ts b/src/store/session/slices/session/initialState.ts
@@ -13,6 +13,7 @@ export interface SessionState {
   activeId: string | undefined;
   // 默认会话
   inbox: LobeAgentSession;
+  isMobile?: boolean;
   searchKeywords: string;
   sessions: Record<string, LobeAgentSession>;
 }
@@ -40,6 +41,7 @@ export const initInbox = merge({}, initLobeSession, {
 export const initialSessionState: SessionState = {
   activeId: undefined,
   inbox: initInbox,
+  isMobile: false,
   searchKeywords: '',
   sessions: {},
 };