@lobehub/chat 0.127.1 → 0.127.2

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.127.2](https://github.com/lobehub/lobe-chat/compare/v0.127.1...v0.127.2)
+
+<sup>Released on **2024-02-14**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor the sidebar to fix first render state.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor the sidebar to fix first render state, closes [#1301](https://github.com/lobehub/lobe-chat/issues/1301) ([c477491](https://github.com/lobehub/lobe-chat/commit/c477491))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.127.1](https://github.com/lobehub/lobe-chat/compare/v0.127.0...v0.127.1)
 
 <sup>Released on **2024-02-14**</sup>

package/README.md

@@ -225,14 +225,14 @@ Our marketplace is not just a showcase platform but also a collaborative space.
 
 <!-- AGENT LIST -->
 
-| Recent Submits                                                                                                                                                                 | Description                                                                                                                                                                  |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Product Review](https://chat-preview.lobehub.com/market?agent=product-reviews)<br/><sup>By **[pllz7](https://github.com/pllz7)** on **2024-02-11**</sup>                      | Expert in creating persuasive product testimonials highlighting the benefits and value proposition of \[your product/service].<br/>`ecommerce`                               |
-| [Tarot Reader](https://chat-preview.lobehub.com/market?agent=augur)<br/><sup>By **[CLOT-LIU](https://github.com/CLOT-LIU)** on **2024-02-10**</sup>                            | Specializes in tarot reading and interpreting tarot cards<br/>`tarot-reading` `interpretation` `advice`                                                                      |
-| [Happy Loong Year](https://chat-preview.lobehub.com/market?agent=happy-loong-year)<br/><sup>By **[canisminor1990](https://github.com/canisminor1990)** on **2024-02-10**</sup> | Loong Year's Assistant combines traditional and modern elements to create interesting New Year blessings.<br/>`new-years-greetings` `creativity` `copywriting` `dragon-year` |
-| [Vocabulary Wizard](https://chat-preview.lobehub.com/market?agent=awl-vocab-wizard)<br/><sup>By **[bentwnghk](https://github.com/bentwnghk)** on **2024-02-09**</sup>          | Expert in generating vocabulary lists and MCQ tests<br/>`vocabulary` `academic-word-list` `language-learning` `testing`                                                      |
-
-> 📊 Total agents: [<kbd>**173**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+| Recent Submits                                                                                                                                                              | Description                                                                                                                                                                                                                                                                          |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [Product Copywriting](https://chat-preview.lobehub.com/market?agent=copywriting)<br/><sup>By **[pllz7](https://github.com/pllz7)** on **2024-02-14**</sup>                  | Expert in persuasive copywriting and consumer psychology<br/>`ecommerce`                                                                                                                                                                                                             |
+| [Private Domain Operations Expert](https://chat-preview.lobehub.com/market?agent=gl-syyy)<br/><sup>By **[guling-io](https://github.com/guling-io)** on **2024-02-14**</sup> | Specializing in private domain operations, traffic acquisition, user retention, conversion, and content planning. Familiar with marketing theories and related classic works.<br/>`private-domain-operations` `traffic-acquisition` `user-retention` `conversion` `content-planning` |
+| [Self-Media Operation Expert](https://chat-preview.lobehub.com/market?agent=gl-zmtyy)<br/><sup>By **[guling-io](https://github.com/guling-io)** on **2024-02-14**</sup>     | Specialized in self-media operation and content creation<br/>`self-media-operation` `social-media` `content-creation` `fan-growth` `brand-promotion`                                                                                                                                 |
+| [Product Description](https://chat-preview.lobehub.com/market?agent=product-description)<br/><sup>By **[pllz7](https://github.com/pllz7)** on **2024-02-14**</sup>          | Craft compelling product descriptions that boost e-commerce sales<br/>`ecommerce`                                                                                                                                                                                                    |
+
+> 📊 Total agents: [<kbd>**177**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/README.zh-CN.md

@@ -205,14 +205,14 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
 
 <!-- AGENT LIST -->
 
-| 最近新增                                                                                                                                                               | 助手说明                                                                                       |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
-| [产品评价](https://chat-preview.lobehub.com/market?agent=product-reviews)<br/><sup>By **[pllz7](https://github.com/pllz7)** on **2024-02-11**</sup>                    | 擅长撰写有说服力的产品推荐，突出 \[您的产品 / 服务] 的优势和价值主张。<br/>`电子商务`          |
-| [塔罗占卜师](https://chat-preview.lobehub.com/market?agent=augur)<br/><sup>By **[CLOT-LIU](https://github.com/CLOT-LIU)** on **2024-02-10**</sup>                      | 擅长塔罗占卜，会对塔罗牌进行解读<br/>`塔罗占卜` `解读` `建议`                                  |
-| [新年快乐](https://chat-preview.lobehub.com/market?agent=happy-loong-year)<br/><sup>By **[canisminor1990](https://github.com/canisminor1990)** on **2024-02-10**</sup> | 龙年拜年小助手，结合传统与现代元素，创造有趣的龙年祝福语。<br/>`拜年祝福` `创意` `文案` `龙年` |
-| [词汇大师](https://chat-preview.lobehub.com/market?agent=awl-vocab-wizard)<br/><sup>By **[bentwnghk](https://github.com/bentwnghk)** on **2024-02-09**</sup>           | 擅长生成词汇列表和多项选择测试<br/>`词汇` `学术词汇表` `语言学习` `测试`                       |
-
-> 📊 Total agents: [<kbd>**173**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+| 最近新增                                                                                                                                                   | 助手说明                                                                                                              |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| [产品文案撰写](https://chat-preview.lobehub.com/market?agent=copywriting)<br/><sup>By **[pllz7](https://github.com/pllz7)** on **2024-02-14**</sup>        | 精通有说服力的文案撰写和消费者心理学<br/>`电子商务`                                                                   |
+| [私域运营专家](https://chat-preview.lobehub.com/market?agent=gl-syyy)<br/><sup>By **[guling-io](https://github.com/guling-io)** on **2024-02-14**</sup>    | 擅长私域运营、引流、承接、转化和内容策划，熟悉营销理论和相关经典著作。<br/>`私域运营` `引流` `承接` `转化` `内容策划` |
+| [自媒体运营专家](https://chat-preview.lobehub.com/market?agent=gl-zmtyy)<br/><sup>By **[guling-io](https://github.com/guling-io)** on **2024-02-14**</sup> | 擅长自媒体运营与内容创作<br/>`自媒体运营` `社交媒体` `内容创作` `粉丝增长` `品牌推广`                                 |
+| [产品描述](https://chat-preview.lobehub.com/market?agent=product-description)<br/><sup>By **[pllz7](https://github.com/pllz7)** on **2024-02-14**</sup>    | 打造引人入胜的产品描述，提升电子商务销售业绩<br/>`电子商务`                                                           |
+
+> 📊 Total agents: [<kbd>**177**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.127.1",
+  "version": "0.127.2",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/chat/(desktop)/layout.desktop.tsx

@@ -4,15 +4,13 @@ import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AppLayoutDesktop from '@/layout/AppLayout.desktop';
-import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
 import ResponsiveSessionList from './features/SessionList';
 
 export default memo(({ children }: PropsWithChildren) => {
-  useSwitchSideBarOnInit(SidebarTabKey.Chat);
   return (
-    <AppLayoutDesktop>
+    <AppLayoutDesktop sidebarKey={SidebarTabKey.Chat}>
       <ResponsiveSessionList />
       <Flexbox
         flex={1}

package/src/app/chat/(mobile)/index.tsx

@@ -4,16 +4,13 @@ import { useRouter } from 'next/navigation';
 import { memo, useEffect } from 'react';
 
 import AppLayoutMobile from '@/layout/AppLayout.mobile';
-import { useSwitchSideBarOnInit } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/slices/common/initialState';
+import { SidebarTabKey } from '@/store/global/initialState';
 
 import PageTitle from '../features/PageTitle';
 import SessionHeader from './features/SessionHeader';
 import SessionList from './features/SessionList';
 
 const ChatMobilePage = memo(() => {
-  useSwitchSideBarOnInit(SidebarTabKey.Chat);
-
   const router = useRouter();
   useEffect(() => {
     router.prefetch('/chat/mobile');
@@ -21,7 +18,7 @@ const ChatMobilePage = memo(() => {
   }, []);
 
   return (
-    <AppLayoutMobile navBar={<SessionHeader />} showTabBar>
+    <AppLayoutMobile navBar={<SessionHeader />} showTabBar tabBarKey={SidebarTabKey.Chat}>
       <PageTitle />
       <SessionList />
     </AppLayoutMobile>

package/src/app/chat/features/ChatHeader/SettingButton.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/slices/common/initialState';
+import { SidebarTabKey } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';

package/src/app/home/Redirect.tsx

@@ -5,8 +5,6 @@ import { memo, useEffect } from 'react';
 
 import { messageService } from '@/services/message';
 import { sessionService } from '@/services/session';
-import { useGlobalStore } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 
 const checkHasConversation = async () => {
@@ -21,8 +19,6 @@ const Redirect = memo(() => {
 
   useEffect(() => {
     checkHasConversation().then((hasData) => {
-      useGlobalStore.getState().switchSideBar(SidebarTabKey.Chat);
-
       if (hasData) {
         router.replace('/chat');
 

package/src/app/market/(desktop)/layout.desktop.tsx

@@ -7,7 +7,6 @@ import { Center, Flexbox } from 'react-layout-kit';
 import SafeSpacing from '@/components/SafeSpacing';
 import { MAX_WIDTH } from '@/const/layoutTokens';
 import AppLayoutDesktop from '@/layout/AppLayout.desktop';
-import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
 import Header from './features/Header';
@@ -30,10 +29,8 @@ const useStyles = createStyles(({ css }) => ({
 const MarketLayout = memo<PropsWithChildren>(({ children }) => {
   const { theme, styles } = useStyles();
 
-  useSwitchSideBarOnInit(SidebarTabKey.Market);
-
   return (
-    <AppLayoutDesktop>
+    <AppLayoutDesktop sidebarKey={SidebarTabKey.Market}>
       <Flexbox
         flex={1}
         height={'100%'}

package/src/app/market/(mobile)/layout.mobile.tsx

@@ -5,7 +5,6 @@ import { PropsWithChildren } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AppLayoutMobile from '@/layout/AppLayout.mobile';
-import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
 import Header from './features/Header';
@@ -13,10 +12,8 @@ import Header from './features/Header';
 const DetailModal = dynamic(() => import('./features/AgentDetail'));
 
 const MarketLayout = ({ children }: PropsWithChildren) => {
-  useSwitchSideBarOnInit(SidebarTabKey.Market);
-
   return (
-    <AppLayoutMobile navBar={<Header />} showTabBar>
+    <AppLayoutMobile navBar={<Header />} showTabBar tabBarKey={SidebarTabKey.Market}>
       <Flexbox flex={1} gap={16} style={{ padding: 16 }}>
         {children}
       </Flexbox>

package/src/app/market/features/AgentDetailContent/AgentInfo/Header.tsx

@@ -5,8 +5,6 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center } from 'react-layout-kit';
 
-import { useGlobalStore } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
 import { useSessionStore } from '@/store/session';
 
@@ -18,7 +16,6 @@ const Header = memo(() => {
   const { t } = useTranslation('market');
   const { styles, theme } = useStyles();
   const createSession = useSessionStore((s) => s.createSession);
-  const switchSideBar = useGlobalStore((s) => s.switchSideBar);
   const agentItem = useMarketStore(agentMarketSelectors.currentAgentItem);
   const { message } = App.useApp();
 
@@ -56,7 +53,6 @@ const Header = memo(() => {
           if (!agentItem) return;
 
           createSession({ config, meta });
-          switchSideBar(SidebarTabKey.Chat);
         }}
         type={'primary'}
       >

package/src/app/settings/(desktop)/layout.desktop.tsx

@@ -5,7 +5,6 @@ import { Center, Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import AppLayoutDesktop from '@/layout/AppLayout.desktop';
-import { useSwitchSideBarOnInit } from '@/store/global';
 import { SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
 
 import Header from './features/Header';
@@ -17,10 +16,8 @@ export interface DesktopLayoutProps {
 }
 
 const DesktopLayout = memo<DesktopLayoutProps>(({ children, activeTab }) => {
-  useSwitchSideBarOnInit(SidebarTabKey.Setting);
-
   return (
-    <AppLayoutDesktop>
+    <AppLayoutDesktop sidebarKey={SidebarTabKey.Setting}>
       <SideBar activeTab={activeTab} />
       <Flexbox flex={1} height={'100%'} style={{ position: 'relative' }}>
         <Header activeTab={activeTab} />

package/src/app/settings/(mobile)/layout.mobile.tsx

@@ -4,7 +4,6 @@ import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AppLayoutMobile from '@/layout/AppLayout.mobile';
-import { useSwitchSideBarOnInit } from '@/store/global';
 import { SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
 
 import Header from './features/Header';
@@ -14,9 +13,8 @@ export interface SettingLayoutProps {
   children: ReactNode;
 }
 export default memo(({ children, activeTab }: SettingLayoutProps) => {
-  useSwitchSideBarOnInit(SidebarTabKey.Setting);
   return (
-    <AppLayoutMobile navBar={<Header activeTab={activeTab} />}>
+    <AppLayoutMobile navBar={<Header activeTab={activeTab} />} tabBarKey={SidebarTabKey.Setting}>
       <Flexbox style={{ overflow: 'auto' }}>{children}</Flexbox>
     </AppLayoutMobile>
   );

package/src/features/MobileTabBar/index.tsx

@@ -6,7 +6,6 @@ import { rgba } from 'polished';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useGlobalStore } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
 const useStyles = createStyles(({ css, token }) => ({
@@ -17,8 +16,12 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-export default memo<{ className?: string }>(({ className }) => {
-  const [tab, setTab] = useGlobalStore((s) => [s.sidebarKey, s.switchSideBar]);
+interface Props {
+  className?: string;
+  tabBarKey?: SidebarTabKey;
+}
+
+export default memo<Props>(({ className, tabBarKey }) => {
   const { t } = useTranslation('common');
   const { styles } = useStyles();
   const router = useRouter();
@@ -30,7 +33,6 @@ export default memo<{ className?: string }>(({ className }) => {
         ),
         key: SidebarTabKey.Chat,
         onClick: () => {
-          setTab(SidebarTabKey.Chat);
           router.push('/chat');
         },
         title: t('tab.chat'),
@@ -39,7 +41,6 @@ export default memo<{ className?: string }>(({ className }) => {
         icon: (active) => <Icon className={active ? styles.active : undefined} icon={Bot} />,
         key: SidebarTabKey.Market,
         onClick: () => {
-          setTab(SidebarTabKey.Market);
           router.push('/market');
         },
         title: t('tab.market'),
@@ -48,7 +49,6 @@ export default memo<{ className?: string }>(({ className }) => {
         icon: (active) => <Icon className={active ? styles.active : undefined} icon={User} />,
         key: SidebarTabKey.Setting,
         onClick: () => {
-          setTab(SidebarTabKey.Setting);
           router.push('/settings');
         },
         title: t('tab.setting'),
@@ -56,12 +56,5 @@ export default memo<{ className?: string }>(({ className }) => {
     ],
     [t],
   );
-  return (
-    <MobileTabBar
-      activeKey={tab}
-      className={className}
-      items={items}
-      onChange={(key) => setTab(key as any)}
-    />
-  );
+  return <MobileTabBar activeKey={tabBarKey} className={className} items={items} />;
 });

package/src/features/SideBar/BottomActions.tsx

@@ -23,11 +23,10 @@ import { GlobalStore, useGlobalStore } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
 export interface BottomActionProps {
-  setTab: GlobalStore['switchSideBar'];
-  tab: GlobalStore['sidebarKey'];
+  tab?: GlobalStore['sidebarKey'];
 }
 
-const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
+const BottomActions = memo<BottomActionProps>(({ tab }) => {
   const router = useRouter();
   const { t } = useTranslation('common');
 
@@ -113,10 +112,6 @@ const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
         </Flexbox>
       ),
       onClick: () => {
-        setTab(SidebarTabKey.Setting);
-        useGlobalStore.setState({
-          sidebarKey: SidebarTabKey.Setting,
-        });
         router.push('/settings/common');
       },
     },

package/src/features/SideBar/TopActions.tsx

@@ -9,11 +9,10 @@ import { SidebarTabKey } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 
 export interface TopActionProps {
-  setTab: GlobalStore['switchSideBar'];
-  tab: GlobalStore['sidebarKey'];
+  tab?: GlobalStore['sidebarKey'];
 }
 
-const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
+const TopActions = memo<TopActionProps>(({ tab }) => {
   const { t } = useTranslation('common');
   const switchBackToChat = useGlobalStore((s) => s.switchBackToChat);
 
@@ -24,7 +23,6 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
         onClick={(e) => {
           e.preventDefault();
           switchBackToChat(useSessionStore.getState().activeId);
-          setTab(SidebarTabKey.Chat);
         }}
       >
         <ActionIcon
@@ -39,9 +37,6 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
         <ActionIcon
           active={tab === SidebarTabKey.Market}
           icon={Compass}
-          onClick={() => {
-            setTab(SidebarTabKey.Market);
-          }}
           placement={'right'}
           size="large"
           title={t('tab.market')}

package/src/features/SideBar/index.tsx

@@ -2,20 +2,22 @@ import { SideNav } from '@lobehub/ui';
 import { memo } from 'react';
 
 import AvatarWithUpload from '@/features/AvatarWithUpload';
-import { useGlobalStore } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
 
 import BottomActions from './BottomActions';
 import TopActions from './TopActions';
 
-export default memo(() => {
-  const [tab, setTab] = useGlobalStore((s) => [s.sidebarKey, s.switchSideBar]);
+interface Props {
+  sidebarKey?: SidebarTabKey;
+}
 
+export default memo<Props>(({ sidebarKey }) => {
   return (
     <SideNav
       avatar={<AvatarWithUpload id={'avatar'} />}
-      bottomActions={<BottomActions setTab={setTab} tab={tab} />}
+      bottomActions={<BottomActions tab={sidebarKey} />}
       style={{ height: '100%' }}
-      topActions={<TopActions setTab={setTab} tab={tab} />}
+      topActions={<TopActions tab={sidebarKey} />}
     />
   );
 });

package/src/layout/AppLayout.desktop.tsx

@@ -1,11 +1,16 @@
 import { useTheme } from 'antd-style';
-import { PropsWithChildren, memo } from 'react';
+import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import SideBar from '@/features/SideBar';
 import { useIsPWA } from '@/hooks/useIsPWA';
+import { SidebarTabKey } from '@/store/global/initialState';
 
-const AppLayoutDesktop = memo<PropsWithChildren>(({ children }) => {
+interface AppLayoutDesktopProps {
+  children: ReactNode;
+  sidebarKey?: SidebarTabKey;
+}
+const AppLayoutDesktop = memo<AppLayoutDesktopProps>(({ children, sidebarKey }) => {
   const isPWA = useIsPWA();
   const theme = useTheme();
 
@@ -16,7 +21,7 @@ const AppLayoutDesktop = memo<PropsWithChildren>(({ children }) => {
       style={isPWA ? { borderTop: `1px solid ${theme.colorBorder}` } : {}}
       width={'100%'}
     >
-      <SideBar />
+      <SideBar sidebarKey={sidebarKey} />
       {children}
     </Flexbox>
   );

package/src/layout/AppLayout.mobile.tsx

@@ -5,6 +5,7 @@ import { CSSProperties, PropsWithChildren, ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
+import { SidebarTabKey } from '@/store/global/slices/common/initialState';
 
 const MobileTabBar = dynamic(() => import('@/features/MobileTabBar'));
 
@@ -39,11 +40,12 @@ interface AppMobileLayoutProps extends PropsWithChildren {
   navBar?: ReactNode;
   showTabBar?: boolean;
   style?: CSSProperties;
+  tabBarKey?: SidebarTabKey;
   title?: MobileNavBarTitleProps;
 }
 
 const AppLayoutMobile = memo<AppMobileLayoutProps>(
-  ({ children, showTabBar, navBar, style, className }) => {
+  ({ children, showTabBar, tabBarKey, navBar, style, className }) => {
     const { styles, cx } = useStyles();
 
     return (
@@ -58,7 +60,7 @@ const AppLayoutMobile = memo<AppMobileLayoutProps>(
         {showTabBar && (
           <>
             <SafeSpacing mobile position={'bottom'} />
-            <MobileTabBar className={styles.mobileTabBar} />
+            <MobileTabBar className={styles.mobileTabBar} tabBarKey={tabBarKey} />
           </>
         )}
       </Flexbox>

package/src/store/global/hooks/index.ts

@@ -1,3 +1,3 @@
 export * from './useEffectAfterHydrated';
 export * from './useOnFinishHydrationGlobal';
-export * from './useSwitchSideBarOnInit';
+

package/src/store/global/slices/common/action.test.ts

@@ -38,16 +38,4 @@ describe('createCommonSlice', () => {
       expect(router.push).toHaveBeenCalledWith('/chat?session=session-id');
     });
   });
-
-  describe('switchSideBar', () => {
-    it('should switch sidebar', () => {
-      const { result } = renderHook(() => useGlobalStore());
-
-      act(() => {
-        result.current.switchSideBar(SidebarTabKey.Market);
-      });
-
-      expect(result.current.sidebarKey).toEqual(SidebarTabKey.Market);
-    });
-  });
 });

package/src/store/global/slices/common/action.ts

@@ -13,8 +13,6 @@ import type { GlobalServerConfig, GlobalSettings } from '@/types/settings';
 import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
 
-import type { SidebarTabKey } from './initialState';
-
 const n = setNamespace('common');
 
 /**
@@ -23,7 +21,6 @@ const n = setNamespace('common');
 export interface CommonAction {
   refreshUserConfig: () => Promise<void>;
   switchBackToChat: (sessionId?: string) => void;
-  switchSideBar: (key: SidebarTabKey) => void;
   updateAvatar: (avatar: string) => Promise<void>;
   useCheckLatestVersion: () => SWRResponse<string>;
   useFetchServerConfig: () => SWRResponse;
@@ -44,9 +41,7 @@ export const createCommonSlice: StateCreator<
   switchBackToChat: (sessionId) => {
     get().router?.push(SESSION_CHAT_URL(sessionId || INBOX_SESSION_ID, get().isMobile));
   },
-  switchSideBar: (key) => {
-    set({ sidebarKey: key }, false, n('switchSideBar', key));
-  },
+
   updateAvatar: async (avatar) => {
     await userService.updateAvatar(avatar);
     await get().refreshUserConfig();

package/src/store/global/hooks/useSwitchSideBarOnInit.ts

@@ -1,13 +0,0 @@
-import { SidebarTabKey } from '../initialState';
-import { useGlobalStore } from '../store';
-import { useOnFinishHydrationGlobal } from './useOnFinishHydrationGlobal';
-
-/**
- * 切换侧边栏选项
- * @desc 只会在应用初始化时（且水合后）执行一次
- */
-export const useSwitchSideBarOnInit = (key: SidebarTabKey) => {
-  useOnFinishHydrationGlobal(() => {
-    useGlobalStore.getState().switchSideBar(key);
-  });
-};