⚡ perf: remove some blur style to improve performance (lobehub#4085)

* ⚡ perf: Remove some blur style * 💄 style: improve Conversation * 💄 style: improve Conversation --------- Co-authored-by: arvinxx <[email protected]>
miku-l5225 · Sep 28, 2024 · d3f1fa6 · d3f1fa6
1 parent 6b3e430
commit d3f1fa6
Show file tree

Hide file tree

Showing 9 changed files with 10 additions and 18 deletions.
diff --git a/src/app/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/index.tsx b/src/app/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/index.tsx
@@ -3,6 +3,12 @@ import { ChatHeader } from '@lobehub/ui';
 import HeaderAction from './HeaderAction';
 import Main from './Main';
 
-const Header = () => <ChatHeader left={<Main />} right={<HeaderAction />} style={{ zIndex: 11 }} />;
+const Header = () => (
+  <ChatHeader
+    left={<Main />}
+    right={<HeaderAction />}
+    style={{ minHeight: 64, position: 'initial', zIndex: 11 }}
+  />
+);
 
 export default Header;
diff --git a/src/app/(main)/chat/(workspace)/_layout/Desktop/Portal.tsx b/src/app/(main)/chat/(workspace)/_layout/Desktop/Portal.tsx
@@ -6,7 +6,6 @@ import { rgba } from 'polished';
 import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_DOCK_TOOL_UI_WIDTH, CHAT_DOCK_WIDTH, MAX_WIDTH } from '@/const/layoutTokens';
 import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors } from '@/store/chat/slices/portal/selectors';
@@ -69,7 +68,6 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
             minWidth: CHAT_DOCK_WIDTH,
           }}
         >
-          <SafeSpacing />
           <Flexbox className={styles.panel}>{children}</Flexbox>
         </DraggablePanelContainer>
       </DraggablePanel>

diff --git a/src/app/(main)/chat/(workspace)/_layout/Desktop/TopicPanel.tsx b/src/app/(main)/chat/(workspace)/_layout/Desktop/TopicPanel.tsx
@@ -5,7 +5,6 @@ import { createStyles, useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { PropsWithChildren, memo, useEffect, useState } from 'react';
 
-import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
 import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors } from '@/store/chat/slices/portal/selectors';
@@ -71,7 +70,6 @@ const TopicPanel = memo(({ children }: PropsWithChildren) => {
             minWidth: CHAT_SIDEBAR_WIDTH,
           }}
         >
-          <SafeSpacing />
           {children}
         </DraggablePanelContainer>
       </DraggablePanel>

diff --git a/src/app/(main)/chat/@session/features/SessionListContent/Modals/ConfigGroupModal/index.tsx b/src/app/(main)/chat/@session/features/SessionListContent/Modals/ConfigGroupModal/index.tsx
@@ -13,15 +13,14 @@ import { SessionGroupItem } from '@/types/session';
 
 import GroupItem from './GroupItem';
 
-const useStyles = createStyles(({ css, token, stylish }) => ({
+const useStyles = createStyles(({ css, token }) => ({
   container: css`
     height: 36px;
     padding-inline: 8px;
     border-radius: ${token.borderRadius}px;
     transition: background 0.2s ease-in-out;
 
     &:hover {
-      ${stylish.blur};
       background: ${token.colorFillTertiary};
     }
   `,

diff --git a/src/components/DragUpload/index.tsx b/src/components/DragUpload/index.tsx
@@ -58,7 +58,6 @@ const useStyles = createStyles(({ css, token }) => {
       height: 100%;
 
       background: ${token.colorBgMask};
-      backdrop-filter: blur(4px);
 
       transition: all 0.3s ease-in-out;
     `,

diff --git a/src/components/FunctionModal/style.tsx b/src/components/FunctionModal/style.tsx
@@ -31,7 +31,6 @@ export const useStyles = createStyles(({ css, token, prefixCls, isDarkMode, resp
     `,
     wrap: css`
       overflow: hidden auto;
-      backdrop-filter: blur(2px);
     `,
   };
 });

diff --git a/src/components/GuideModal/index.tsx b/src/components/GuideModal/index.tsx
@@ -32,7 +32,6 @@ const useStyles = createStyles(({ css, token, prefixCls }) => {
     `,
     wrap: css`
       overflow: hidden auto;
-      backdrop-filter: blur(2px);
     `,
   };
 });

diff --git a/src/features/Conversation/components/VirtualizedList/index.tsx b/src/features/Conversation/components/VirtualizedList/index.tsx
@@ -43,10 +43,9 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
 
   const data = useChatStore((s) => {
     const showInboxWelcome = chatSelectors.showInboxWelcome(s);
-    const ids = showInboxWelcome
+    return showInboxWelcome
       ? [WELCOME_GUIDE_CHAT_ID]
       : chatSelectors.currentChatIDsWithGuideMessage(s);
-    return ['empty', ...ids];
   }, isEqual);
 
   useEffect(() => {
@@ -71,11 +70,7 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
     (index: number, id: string) => {
       if (id === WELCOME_GUIDE_CHAT_ID) return <InboxWelcome />;
 
-      return index === 0 ? (
-        <div style={{ height: 24 + (mobile ? 0 : 64) }} />
-      ) : (
-        <Item id={id} index={index - 1} />
-      );
+      return <Item id={id} index={index} />;
     },
     [mobile],
   );

diff --git a/src/layout/AuthProvider/Clerk/useAppearance.ts b/src/layout/AuthProvider/Clerk/useAppearance.ts
@@ -26,7 +26,6 @@ export const useStyles = createStyles(
       `,
       modalBackdrop: css`
         background: ${token.colorBgMask};
-        backdrop-filter: blur(2px);
       `,
       modalContent: css`
         &.${prefixCls}-modalContent {