♻️ refactor(layout): Refactor ssc layout

lobehub · Oct 9, 2023 · 26e1c41 · 26e1c41
1 parent b3d7108
commit 26e1c41
Show file tree

Hide file tree

Showing 55 changed files with 438 additions and 424 deletions.
diff --git a/src/app/chat/(desktop)/index.tsx b/src/app/chat/(desktop)/index.tsx
@@ -3,20 +3,27 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { useSwitchSideBarOnInit } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
+
 import Conversation from '../features/Conversation';
 import PageTitle from '../features/PageTitle';
 import ChatHeader from './features/ChatHeader';
 import ChatInput from './features/ChatInput';
 import SideBar from './features/SideBar';
+import Layout from './layout.responsive';
 
-const DesktopPage = memo(() => (
-  <>
-    <PageTitle />
-    <ChatHeader />
-    <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
-      <Conversation chatInput={<ChatInput />} />
-      <SideBar />
-    </Flexbox>
-  </>
-));
+const DesktopPage = memo(() => {
+  useSwitchSideBarOnInit(SidebarTabKey.Chat);
+  return (
+    <Layout>
+      <PageTitle />
+      <ChatHeader />
+      <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
+        <Conversation chatInput={<ChatInput />} />
+        <SideBar />
+      </Flexbox>
+    </Layout>
+  );
+});
 export default DesktopPage;
diff --git a/src/app/chat/(desktop)/layout.desktop.tsx b/src/app/chat/(desktop)/layout.desktop.tsx
@@ -0,0 +1,20 @@
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import AppLayoutDesktop from '@/layout/AppLayout.desktop';
+
+import ResponsiveSessionList from './features/SessionList';
+
+export default memo(({ children }: PropsWithChildren) => (
+  <AppLayoutDesktop>
+    <ResponsiveSessionList />
+    <Flexbox
+      flex={1}
+      height={'100vh'}
+      id={'lobe-conversion-container'}
+      style={{ position: 'relative' }}
+    >
+      {children}
+    </Flexbox>
+  </AppLayoutDesktop>
+));
diff --git a/src/app/chat/(desktop)/layout.responsive.tsx b/src/app/chat/(desktop)/layout.responsive.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import { PropsWithChildren, memo } from 'react';
+
+import ResponsiveLayout from '@/components/ResponsiveLayout';
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+import Mobile from '../(mobile)/layout.mobile';
+import Desktop from './layout.desktop';
+
+export default memo(({ children }: PropsWithChildren) => (
+  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile} isMobile={useIsMobile}>
+    {children}
+  </ResponsiveLayout>
+));
diff --git a/src/app/chat/(desktop)/layout/Desktop.tsx b/src/app/chat/(desktop)/layout/Desktop.tsx
diff --git a/src/app/chat/(desktop)/layout/index.tsx b/src/app/chat/(desktop)/layout/index.tsx
diff --git a/src/app/chat/(mobile)/index.tsx b/src/app/chat/(mobile)/index.tsx
@@ -2,18 +2,20 @@
 
 import { memo } from 'react';
 
-import AppMobileLayout from '@/layout/AppMobileLayout';
+import { useSwitchSideBarOnInit } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
 
 import PageTitle from '../features/PageTitle';
-import SessionHeader from './features/SessionHeader';
 import SessionList from './features/SessionList';
+import Layout from './layout.mobile';
 
 const ChatMobilePage = memo(() => {
+  useSwitchSideBarOnInit(SidebarTabKey.Chat);
   return (
-    <AppMobileLayout navBar={<SessionHeader />} showTabBar>
+    <Layout>
       <PageTitle />
       <SessionList />
-    </AppMobileLayout>
+    </Layout>
   );
 });
 

diff --git a/src/app/chat/(mobile)/layout.mobile.tsx b/src/app/chat/(mobile)/layout.mobile.tsx
@@ -0,0 +1,10 @@
+import { PropsWithChildren, memo } from 'react';
+
+import SessionHeader from '@/app/chat/(mobile)/features/SessionHeader';
+import AppLayoutMobile from '@/layout/AppLayout.mobile';
+
+export default memo(({ children }: PropsWithChildren) => (
+  <AppLayoutMobile navBar={<SessionHeader />} showTabBar>
+    {children}
+  </AppLayoutMobile>
+));
diff --git a/src/app/chat/(mobile)/layout.tsx b/src/app/chat/(mobile)/layout.tsx
diff --git a/src/app/chat/(mobile)/mobile/layout.mobile.tsx b/src/app/chat/(mobile)/mobile/layout.mobile.tsx
@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+
+import AppLayoutMobile from '@/layout/AppLayout.mobile';
+
+import Header from '../../components/ChatHeader/Mobile';
+
+export default ({ children }: PropsWithChildren) => (
+  <AppLayoutMobile navBar={<Header />}>{children}</AppLayoutMobile>
+);
diff --git a/src/app/chat/(mobile)/mobile/page.tsx b/src/app/chat/(mobile)/mobile/page.tsx
@@ -3,19 +3,17 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import AppMobileLayout from '@/layout/AppMobileLayout';
-
 import Conversation from '../../features/Conversation';
-import Header from '../features/ChatHeader';
 import ChatInput from '../features/ChatInput';
 import Topics from '../features/Topics';
+import Layout from './layout.mobile';
 
 const Chat = memo(() => (
-  <AppMobileLayout navBar={<Header />}>
+  <Layout>
     <Flexbox height={'calc(100vh - 44px)'} horizontal>
       <Conversation chatInput={<ChatInput />} mobile />
       <Topics />
     </Flexbox>
-  </AppMobileLayout>
+  </Layout>
 ));
 export default Chat;
diff --git a/src/app/chat/components/ChatHeader/ShareButton/Preview.tsx b/src/app/chat/components/ChatHeader/ShareButton/Preview.tsx
@@ -91,7 +91,13 @@ const Preview = memo<PreviewProps>(({ withSystemRole, imageType, withBackground,
         }
       }
 
-      const dataUrl = await screenshotFn(document.querySelector('#preview') as HTMLDivElement);
+      const dataUrl = await screenshotFn(document.querySelector('#preview') as HTMLDivElement, {
+        features: {
+          // 不启用移除控制符，否则会导致 safari emoji 报错
+          removeControlCharacter: false,
+        },
+        scale: 2,
+      });
       const link = document.createElement('a');
       link.download = `LobeChat_${title}_${dayjs().format('YYYY-MM-DD')}.${imageType}`;
       link.href = dataUrl;

diff --git a/src/app/chat/components/ChatHeader/ShareButton/style.ts b/src/app/chat/components/ChatHeader/ShareButton/style.ts
@@ -1,84 +1,71 @@
 import { createStyles } from 'antd-style';
-import { rgba } from 'polished';
 
-export const useStyles = createStyles(
-  ({ css, token, stylish, cx, isDarkMode }, withBackground: boolean) => ({
-    background: css`
-      padding: 24px;
+export const useStyles = createStyles(({ css, token, stylish, cx }, withBackground: boolean) => ({
+  background: css`
+    padding: 24px;
 
-      background-color: ${token.colorBgLayout};
-      background-image: url('/images/screenshot_background.webp');
-      background-position: center;
-      background-size: 120% 120%;
-    `,
-    container: cx(
-      withBackground &&
-        css`
-          overflow: hidden;
-          border: 1px solid ${rgba(token.colorText, 0.15)};
-          border-radius: ${token.borderRadiusLG}px;
-        `,
-      isDarkMode
-        ? css`
-            box-shadow:
-              0 8px 16px -4px rgba(0, 0, 0, 75%),
-              0 8px 24px -4px rgba(0, 0, 0, 75%);
-          `
-        : css`
-            box-shadow:
-              0 8px 16px -4px rgba(0, 0, 0, 25%),
-              0 8px 24px -4px rgba(0, 0, 0, 25%);
-          `,
+    background-color: ${token.colorBgLayout};
+    background-image: url('/images/screenshot_background.webp');
+    background-position: center;
+    background-size: 120% 120%;
+  `,
+  container: cx(
+    withBackground &&
       css`
-        background: ${token.colorBgLayout};
+        overflow: hidden;
+        border: 2px solid ${token.colorBorder};
+        border-radius: ${token.borderRadiusLG}px;
       `,
-    ),
-    footer: css`
-      padding: 16px;
-      border-top: 1px solid ${token.colorBorder};
-    `,
-    header: css`
-      margin-bottom: -24px;
-      padding: 16px;
-      background: ${token.colorBgContainer};
-      border-bottom: 1px solid ${token.colorBorder};
+
+    css`
+      background: ${token.colorBgLayout};
     `,
-    preview: cx(
-      stylish.noScrollbar,
-      css`
-        overflow-x: hidden;
-        overflow-y: scroll;
+  ),
+  footer: css`
+    padding: 16px;
+    border-top: 1px solid ${token.colorBorder};
+  `,
+  header: css`
+    margin-bottom: -24px;
+    padding: 16px;
+    background: ${token.colorBgContainer};
+    border-bottom: 1px solid ${token.colorBorder};
+  `,
+  preview: cx(
+    stylish.noScrollbar,
+    css`
+      overflow-x: hidden;
+      overflow-y: scroll;
 
-        width: 100%;
-        max-height: 40vh;
+      width: 100%;
+      max-height: 40vh;
 
-        background: ${token.colorBgLayout};
-        border: 1px solid ${token.colorBorder};
-        border-radius: ${token.borderRadiusLG}px;
+      background: ${token.colorBgLayout};
+      border: 1px solid ${token.colorBorder};
+      border-radius: ${token.borderRadiusLG}px;
 
-        * {
-          pointer-events: none;
-          overflow: hidden;
+      * {
+        pointer-events: none;
+        overflow: hidden;
 
-          ::-webkit-scrollbar {
-            width: 0 !important;
-            height: 0 !important;
-          }
+        ::-webkit-scrollbar {
+          width: 0 !important;
+          height: 0 !important;
         }
-      `,
-    ),
-    role: css`
-      margin-top: 12px;
-      padding-top: 12px;
-      opacity: 0.75;
-      border-top: 1px dashed ${token.colorBorderSecondary};
-
-      * {
-        font-size: 12px !important;
       }
     `,
-    url: css`
-      color: ${token.colorTextDescription};
-    `,
-  }),
-);
+  ),
+  role: css`
+    margin-top: 12px;
+    padding-top: 12px;
+    opacity: 0.75;
+    border-top: 1px dashed ${token.colorBorderSecondary};
+
+    * {
+      font-size: 12px !important;
+    }
+  `,
+  url: css`
+    color: ${token.colorTextDescription};
+  `,
+}));