🐛 fix: Fix mobile safearea (fix lobehub#211)

bentwnghk · Oct 10, 2023 · 68775b8 · 68775b8
1 parent caf8ba0
commit 68775b8
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 18 deletions.
diff --git a/src/app/welcome/features/Banner/index.tsx b/src/app/welcome/features/Banner/index.tsx
@@ -4,12 +4,10 @@ import { Icon } from '@lobehub/ui';
 import { useSize } from 'ahooks';
 import { Button, Upload } from 'antd';
 import { SendHorizonal } from 'lucide-react';
-import Link from 'next/link';
 import { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { SESSION_CHAT_URL } from '@/const/url';
 import { useImportConfig } from '@/hooks/useImportConfig';
 import { useSessionStore } from '@/store/session';
 
@@ -23,8 +21,12 @@ const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
   const width = domSize?.width || 1024;
   const { t } = useTranslation('welcome');
   const { styles } = useStyles();
-
-  const switchSession = useSessionStore((s) => s.switchSession);
+  const [switchSession, switchBackToChat, router, isMobile] = useSessionStore((s) => [
+    s.switchSession,
+    s.switchBackToChat,
+    s.router,
+    s.isMobile,
+  ]);
   const handleImport = useCallback((e: any) => {
     importConfig(e);
     switchSession();
@@ -47,20 +49,17 @@ const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
             {t('button.import')}
           </Button>
         </Upload>
-        <Link
-          href={SESSION_CHAT_URL()}
-          onClick={(e) => {
-            e.preventDefault();
-            switchSession();
-          }}
+        <Button
+          block={mobile}
+          onClick={() => (isMobile ? router?.push('/chat') : switchBackToChat())}
+          size={'large'}
+          type={'primary'}
         >
-          <Button block={mobile} size={'large'} type={'primary'}>
-            <Flexbox align={'center'} gap={4} horizontal justify={'center'}>
-              {t('button.start')}
-              <Icon icon={SendHorizonal} />
-            </Flexbox>
-          </Button>
-        </Link>
+          <Flexbox align={'center'} gap={4} horizontal justify={'center'}>
+            {t('button.start')}
+            <Icon icon={SendHorizonal} />
+          </Flexbox>
+        </Button>
       </Flexbox>
     </>
   );

diff --git a/src/const/layoutTokens.ts b/src/const/layoutTokens.ts
@@ -2,7 +2,7 @@ import type { FormProps } from '@lobehub/ui';
 
 export const HEADER_HEIGHT = 64;
 export const MOBILE_NABBAR_HEIGHT = 44;
-export const MOBILE_TABBAR_HEIGHT = 48;
+export const MOBILE_TABBAR_HEIGHT = 60;
 export const CHAT_TEXTAREA_HEIGHT = 200;
 export const CHAT_TEXTAREA_HEIGHT_MOBILE = 120;
 export const CHAT_SIDEBAR_WIDTH = 280;

diff --git a/src/layout/AppLayout.mobile.tsx b/src/layout/AppLayout.mobile.tsx
@@ -62,6 +62,7 @@ const AppLayoutMobile = memo<AppMobileLayoutProps>(
             <MobileTabBar className={styles.mobileTabBar} />
           </>
         )}
+        <SafeSpacing mobile position={'bottom'} />
       </Flexbox>
     );
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -62,6 +62,7 @@ const AppLayoutMobile = memo<AppMobileLayoutProps>( @@
                 <MobileTabBar className={styles.mobileTabBar} />
               </>
             )}
+            <SafeSpacing mobile position={'bottom'} />
           </Flexbox>
         );
       },
@@ Expand Down @@