@lobehub/chat 0.152.7 → 0.152.8

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.152.8](https://github.com/lobehub/lobe-chat/compare/v0.152.7...v0.152.8)
+
+<sup>Released on **2024-05-03**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: User store add an auth slice.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: User store add an auth slice, closes [#2214](https://github.com/lobehub/lobe-chat/issues/2214) ([948b257](https://github.com/lobehub/lobe-chat/commit/948b257))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.152.7](https://github.com/lobehub/lobe-chat/compare/v0.152.6...v0.152.7)
 
 <sup>Released on **2024-05-02**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.152.7",
+  "version": "0.152.8",
   "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/(main)/chat/(mobile)/features/SessionHeader.tsx

@@ -10,7 +10,7 @@ import SyncStatusInspector from '@/features/SyncStatusInspector';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
 import { useUserStore } from '@/store/user';
-import { commonSelectors } from '@/store/user/selectors';
+import { userProfileSelectors } from '@/store/user/selectors';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
 
 export const useStyles = createStyles(({ css, token }) => ({
@@ -26,7 +26,7 @@ export const useStyles = createStyles(({ css, token }) => ({
 const Header = memo(() => {
   const [createSession] = useSessionStore((s) => [s.createSession]);
   const router = useRouter();
-  const avatar = useUserStore(commonSelectors.userAvatar);
+  const avatar = useUserStore(userProfileSelectors.userAvatar);
   const { showCreateSession } = useServerConfigStore(featureFlagsSelectors);
 
   return (

package/src/app/(main)/chat/features/ShareButton/ShareModal.tsx

@@ -7,7 +7,7 @@ import { Flexbox } from 'react-layout-kit';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { useChatStore } from '@/store/chat';
 import { useUserStore } from '@/store/user';
-import { commonSelectors } from '@/store/user/selectors';
+import { userProfileSelectors } from '@/store/user/selectors';
 
 import Preview from './Preview';
 import { FieldType, ImageType } from './type';
@@ -49,7 +49,7 @@ const ShareModal = memo<ModalProps>(({ onCancel, open }) => {
   const [fieldValue, setFieldValue] = useState<FieldType>(DEFAULT_FIELD_VALUE);
   const [tab, setTab] = useState<Tab>(Tab.Screenshot);
   const { t } = useTranslation('chat');
-  const avatar = useUserStore(commonSelectors.userAvatar);
+  const avatar = useUserStore(userProfileSelectors.userAvatar);
   const [shareLoading, shareToShareGPT] = useChatStore((s) => [s.shareLoading, s.shareToShareGPT]);
   const { loading, onDownload, title } = useScreenshot(fieldValue.imageType);
 

package/src/features/AvatarWithUpload/index.tsx

@@ -7,7 +7,7 @@ import { CSSProperties, memo, useCallback } from 'react';
 
 import { DEFAULT_USER_AVATAR_URL } from '@/const/meta';
 import { useUserStore } from '@/store/user';
-import { commonSelectors } from '@/store/user/selectors';
+import { userProfileSelectors } from '@/store/user/selectors';
 import { imageToBase64 } from '@/utils/imageToBase64';
 import { createUploadImageHandler } from '@/utils/uploadFIle';
 
@@ -41,7 +41,7 @@ const AvatarWithUpload = memo<AvatarWithUploadProps>(
   ({ size = 40, compressSize = 256, style, id }) => {
     const { styles } = useStyle();
     const [avatar, updateAvatar] = useUserStore((s) => [
-      commonSelectors.userAvatar(s),
+      userProfileSelectors.userAvatar(s),
       s.updateAvatar,
     ]);
 

package/src/layout/GlobalProvider/index.tsx

@@ -13,6 +13,7 @@ import {
 import { getServerGlobalConfig } from '@/server/globalConfig';
 import { ServerConfigStoreProvider } from '@/store/serverConfig';
 import { getAntdLocale } from '@/utils/locale';
+import { isMobileDevice } from '@/utils/responsive';
 
 import AppTheme from './AppTheme';
 import Locale from './Locale';
@@ -48,6 +49,7 @@ const GlobalLayout = async ({ children }: GlobalLayoutProps) => {
   // get default feature flags to use with ssr
   const serverFeatureFlags = getServerFeatureFlagsValue();
   const serverConfig = getServerGlobalConfig();
+  const isMobile = isMobileDevice();
   return (
     <StyleRegistry>
       <Locale antdLocale={antdLocale} defaultLang={defaultLang?.value}>
@@ -57,7 +59,11 @@ const GlobalLayout = async ({ children }: GlobalLayoutProps) => {
           defaultPrimaryColor={primaryColor?.value as any}
         >
           <StoreInitialization />
-          <ServerConfigStoreProvider featureFlags={serverFeatureFlags} serverConfig={serverConfig}>
+          <ServerConfigStoreProvider
+            featureFlags={serverFeatureFlags}
+            isMobile={isMobile}
+            serverConfig={serverConfig}
+          >
             {children}
           </ServerConfigStoreProvider>
           <DebugUI />

package/src/services/chat.ts

@@ -15,10 +15,10 @@ import { useToolStore } from '@/store/tool';
 import { pluginSelectors, toolSelectors } from '@/store/tool/selectors';
 import { useUserStore } from '@/store/user';
 import {
-  commonSelectors,
   modelConfigSelectors,
   modelProviderSelectors,
   preferenceSelectors,
+  userProfileSelectors,
 } from '@/store/user/selectors';
 import { ChatErrorType } from '@/types/fetch';
 import { ChatMessage } from '@/types/message';
@@ -482,7 +482,7 @@ class ChatService {
       ...trace,
       enabled: true,
       tags: [tag, ...(trace?.tags || []), ...tags].filter(Boolean) as string[],
-      userId: commonSelectors.userId(useUserStore.getState()),
+      userId: userProfileSelectors.userId(useUserStore.getState()),
     };
   }
 

package/src/store/chat/slices/message/selectors.ts

@@ -8,7 +8,7 @@ import { agentSelectors } from '@/store/agent/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors } from '@/store/session/selectors';
 import { useUserStore } from '@/store/user';
-import { commonSelectors } from '@/store/user/selectors';
+import { userProfileSelectors } from '@/store/user/selectors';
 import { ChatMessage } from '@/types/message';
 import { MetaData } from '@/types/meta';
 import { merge } from '@/utils/merge';
@@ -20,7 +20,7 @@ const getMeta = (message: ChatMessage) => {
   switch (message.role) {
     case 'user': {
       return {
-        avatar: commonSelectors.userAvatar(useUserStore.getState()) || DEFAULT_USER_AVATAR,
+        avatar: userProfileSelectors.userAvatar(useUserStore.getState()) || DEFAULT_USER_AVATAR,
       };
     }
 

package/src/store/serverConfig/Provider.tsx

@@ -10,12 +10,13 @@ import { Provider, createServerConfigStore } from './store';
 interface GlobalStoreProviderProps {
   children: ReactNode;
   featureFlags?: Partial<IFeatureFlags>;
+  isMobile?: boolean;
   serverConfig?: GlobalServerConfig;
 }
 
 export const ServerConfigStoreProvider = memo<GlobalStoreProviderProps>(
-  ({ children, featureFlags, serverConfig }) => (
-    <Provider createStore={() => createServerConfigStore({ featureFlags, serverConfig })}>
+  ({ children, featureFlags, serverConfig, isMobile }) => (
+    <Provider createStore={() => createServerConfigStore({ featureFlags, isMobile, serverConfig })}>
       {children}
     </Provider>
   ),

package/src/store/serverConfig/selectors.ts

@@ -8,4 +8,5 @@ export const featureFlagsSelectors = (s: ServerConfigStore) =>
 export const serverConfigSelectors = {
   enabledOAuthSSO: (s: ServerConfigStore) => s.serverConfig.enabledOAuthSSO,
   enabledTelemetryChat: (s: ServerConfigStore) => s.serverConfig.telemetry.langfuse || false,
+  isMobile: (s: ServerConfigStore) => s.isMobile || false,
 };

package/src/store/serverConfig/store.ts

@@ -20,6 +20,7 @@ const initialState: ServerConfigStore = {
 
 export interface ServerConfigStore {
   featureFlags: IFeatureFlags;
+  isMobile?: boolean;
   serverConfig: GlobalServerConfig;
 }
 

package/src/store/user/initialState.ts

@@ -1,11 +1,13 @@
-import { UserCommonState, initialCommonState } from './slices/common/initialState';
+import { UserAuthState, initialAuthState } from './slices/auth/initialState';
 import { UserPreferenceState, initialPreferenceState } from './slices/preference/initialState';
 import { UserSettingsState, initialSettingsState } from './slices/settings/initialState';
+import { UserSyncState, initialSyncState } from './slices/sync/initialState';
 
-export type UserState = UserCommonState & UserSettingsState & UserPreferenceState;
+export type UserState = UserSyncState & UserSettingsState & UserPreferenceState & UserAuthState;
 
 export const initialState: UserState = {
-  ...initialCommonState,
+  ...initialSyncState,
   ...initialSettingsState,
   ...initialPreferenceState,
+  ...initialAuthState,
 };

package/src/store/user/selectors.ts

@@ -1,4 +1,4 @@
-export { commonSelectors } from './slices/common/selectors';
+export { userProfileSelectors } from './slices/auth/selectors';
 export { preferenceSelectors } from './slices/preference/selectors';
 export {
   modelConfigSelectors,

package/src/store/user/slices/auth/action.test.ts

@@ -0,0 +1,118 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { mutate } from 'swr';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { withSWR } from '~test-utils';
+
+import { userService } from '@/services/user';
+import { useUserStore } from '@/store/user';
+import { switchLang } from '@/utils/client/switchLang';
+
+vi.mock('zustand/traditional');
+
+vi.mock('@/utils/client/switchLang', () => ({
+  switchLang: vi.fn(),
+}));
+
+vi.mock('swr', async (importOriginal) => {
+  const modules = await importOriginal();
+  return {
+    ...(modules as any),
+    mutate: vi.fn(),
+  };
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('createAuthSlice', () => {
+  describe('refreshUserConfig', () => {
+    it('should refresh user config', async () => {
+      const { result } = renderHook(() => useUserStore());
+
+      await act(async () => {
+        await result.current.refreshUserConfig();
+      });
+
+      expect(mutate).toHaveBeenCalledWith(['fetchUserConfig', true]);
+    });
+  });
+
+  describe('useFetchUserConfig', () => {
+    it('should not fetch user config if initServer is false', async () => {
+      const mockUserConfig: any = undefined; // 模拟未初始化服务器的情况
+      vi.spyOn(userService, 'getUserConfig').mockResolvedValueOnce(mockUserConfig);
+
+      const { result } = renderHook(() => useUserStore().useFetchUserConfig(false), {
+        wrapper: withSWR,
+      });
+
+      // 因为 initServer 为 false，所以不会触发 getUserConfig 的调用
+      expect(userService.getUserConfig).not.toHaveBeenCalled();
+      // 确保状态未改变
+      expect(result.current.data).toBeUndefined();
+    });
+
+    it('should fetch user config correctly when initServer is true', async () => {
+      const mockUserConfig: any = {
+        avatar: 'new-avatar-url',
+        settings: {
+          language: 'en',
+        },
+      };
+      vi.spyOn(userService, 'getUserConfig').mockResolvedValueOnce(mockUserConfig);
+
+      const { result } = renderHook(() => useUserStore().useFetchUserConfig(true), {
+        wrapper: withSWR,
+      });
+
+      // 等待 SWR 完成数据获取
+      await waitFor(() => expect(result.current.data).toEqual(mockUserConfig));
+
+      // 验证状态是否正确更新
+      expect(useUserStore.getState().avatar).toBe(mockUserConfig.avatar);
+      expect(useUserStore.getState().settings).toEqual(mockUserConfig.settings);
+
+      // 验证是否正确处理了语言设置
+      expect(switchLang).not.toHaveBeenCalledWith('auto');
+    });
+    it('should call switch language when language is auto', async () => {
+      const mockUserConfig: any = {
+        avatar: 'new-avatar-url',
+        settings: {
+          language: 'auto',
+        },
+      };
+      vi.spyOn(userService, 'getUserConfig').mockResolvedValueOnce(mockUserConfig);
+
+      const { result } = renderHook(() => useUserStore().useFetchUserConfig(true), {
+        wrapper: withSWR,
+      });
+
+      // 等待 SWR 完成数据获取
+      await waitFor(() => expect(result.current.data).toEqual(mockUserConfig));
+
+      // 验证状态是否正确更新
+      expect(useUserStore.getState().avatar).toBe(mockUserConfig.avatar);
+      expect(useUserStore.getState().settings).toEqual(mockUserConfig.settings);
+
+      // 验证是否正确处理了语言设置
+      expect(switchLang).toHaveBeenCalledWith('auto');
+    });
+
+    it('should handle the case when user config is null', async () => {
+      vi.spyOn(userService, 'getUserConfig').mockResolvedValueOnce(null as any);
+
+      const { result } = renderHook(() => useUserStore().useFetchUserConfig(true), {
+        wrapper: withSWR,
+      });
+
+      // 等待 SWR 完成数据获取
+      await waitFor(() => expect(result.current.data).toBeNull());
+
+      // 验证状态未被错误更新
+      expect(useUserStore.getState().avatar).toBeUndefined();
+      expect(useUserStore.getState().settings).toEqual({});
+    });
+  });
+});

package/src/store/user/slices/auth/action.ts

@@ -0,0 +1,81 @@
+import useSWR, { SWRResponse, mutate } from 'swr';
+import { StateCreator } from 'zustand/vanilla';
+
+import { UserConfig, userService } from '@/services/user';
+import { switchLang } from '@/utils/client/switchLang';
+import { setNamespace } from '@/utils/storeDebug';
+
+import { UserStore } from '../../store';
+import { settingsSelectors } from '../settings/selectors';
+
+const n = setNamespace('auth');
+const USER_CONFIG_FETCH_KEY = 'fetchUserConfig';
+
+export interface UserAuthAction {
+  getUserConfig: () => void;
+  /**
+   * universal login method
+   */
+  login: () => Promise<void>;
+  /**
+   * universal logout method
+   */
+  logout: () => Promise<void>;
+  refreshUserConfig: () => Promise<void>;
+
+  useFetchUserConfig: (initServer: boolean) => SWRResponse<UserConfig | undefined>;
+}
+
+export const createAuthSlice: StateCreator<
+  UserStore,
+  [['zustand/devtools', never]],
+  [],
+  UserAuthAction
+> = (set, get) => ({
+  getUserConfig: () => {
+    console.log(n('userconfig'));
+  },
+  login: async () => {
+    // TODO: 针对开启 next-auth 的场景，需要在这里调用登录方法
+    console.log(n('login'));
+  },
+  logout: async () => {
+    // TODO: 针对开启 next-auth 的场景，需要在这里调用登录方法
+    console.log(n('logout'));
+  },
+  refreshUserConfig: async () => {
+    await mutate([USER_CONFIG_FETCH_KEY, true]);
+
+    // when get the user config ,refresh the model provider list to the latest
+    get().refreshModelProviderList();
+  },
+
+  useFetchUserConfig: (initServer) =>
+    useSWR<UserConfig | undefined>(
+      [USER_CONFIG_FETCH_KEY, initServer],
+      async () => {
+        if (!initServer) return;
+        return userService.getUserConfig();
+      },
+      {
+        onSuccess: (data) => {
+          if (!data) return;
+
+          set(
+            { avatar: data.avatar, settings: data.settings, userId: data.uuid },
+            false,
+            n('fetchUserConfig', data),
+          );
+
+          // when get the user config ,refresh the model provider list to the latest
+          get().refreshDefaultModelProviderList({ trigger: 'fetchUserConfig' });
+
+          const { language } = settingsSelectors.currentSettings(get());
+          if (language === 'auto') {
+            switchLang('auto');
+          }
+        },
+        revalidateOnFocus: false,
+      },
+    ),
+});

package/src/store/user/slices/auth/initialState.ts

@@ -0,0 +1,20 @@
+export interface LobeUser {
+  avatar?: string;
+  firstName?: string | null;
+  fullName?: string | null;
+  id: string;
+  latestName?: string | null;
+  username?: string | null;
+}
+
+export interface UserAuthState {
+  /**
+   * @deprecated
+   */
+  avatar?: string;
+  isSignedIn?: boolean;
+  user?: LobeUser;
+  userId?: string;
+}
+
+export const initialAuthState: UserAuthState = {};

package/src/store/user/slices/auth/selectors.ts

@@ -0,0 +1,6 @@
+import { UserStore } from '@/store/user';
+
+export const userProfileSelectors = {
+  userAvatar: (s: UserStore): string => s.avatar || '',
+  userId: (s: UserStore) => s.userId,
+};

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

@@ -8,17 +8,10 @@ import { messageService } from '@/services/message';
 import { userService } from '@/services/user';
 import { useUserStore } from '@/store/user';
 import { preferenceSelectors } from '@/store/user/selectors';
-import { commonSelectors } from '@/store/user/slices/common/selectors';
-import { syncSettingsSelectors } from '@/store/user/slices/settings/selectors';
 import { GlobalServerConfig } from '@/types/serverConfig';
-import { switchLang } from '@/utils/client/switchLang';
 
 vi.mock('zustand/traditional');
 
-vi.mock('@/utils/client/switchLang', () => ({
-  switchLang: vi.fn(),
-}));
-
 vi.mock('swr', async (importOriginal) => {
   const modules = await importOriginal();
   return {
@@ -32,18 +25,6 @@ afterEach(() => {
 });
 
 describe('createCommonSlice', () => {
-  describe('refreshUserConfig', () => {
-    it('should refresh user config', async () => {
-      const { result } = renderHook(() => useUserStore());
-
-      await act(async () => {
-        await result.current.refreshUserConfig();
-      });
-
-      expect(mutate).toHaveBeenCalledWith(['fetchUserConfig', true]);
-    });
-  });
-
   describe('updateAvatar', () => {
     it('should update avatar', async () => {
       const { result } = renderHook(() => useUserStore());
@@ -76,167 +57,6 @@ describe('createCommonSlice', () => {
     });
   });
 
-  describe('useFetchUserConfig', () => {
-    it('should not fetch user config if initServer is false', async () => {
-      const mockUserConfig: any = undefined; // 模拟未初始化服务器的情况
-      vi.spyOn(userService, 'getUserConfig').mockResolvedValueOnce(mockUserConfig);
-
-      const { result } = renderHook(() => useUserStore().useFetchUserConfig(false), {
-        wrapper: withSWR,
-      });
-
-      // 因为 initServer 为 false，所以不会触发 getUserConfig 的调用
-      expect(userService.getUserConfig).not.toHaveBeenCalled();
-      // 确保状态未改变
-      expect(result.current.data).toBeUndefined();
-    });
-
-    it('should fetch user config correctly when initServer is true', async () => {
-      const mockUserConfig: any = {
-        avatar: 'new-avatar-url',
-        settings: {
-          language: 'en',
-        },
-      };
-      vi.spyOn(userService, 'getUserConfig').mockResolvedValueOnce(mockUserConfig);
-
-      const { result } = renderHook(() => useUserStore().useFetchUserConfig(true), {
-        wrapper: withSWR,
-      });
-
-      // 等待 SWR 完成数据获取
-      await waitFor(() => expect(result.current.data).toEqual(mockUserConfig));
-
-      // 验证状态是否正确更新
-      expect(useUserStore.getState().avatar).toBe(mockUserConfig.avatar);
-      expect(useUserStore.getState().settings).toEqual(mockUserConfig.settings);
-
-      // 验证是否正确处理了语言设置
-      expect(switchLang).not.toHaveBeenCalledWith('auto');
-    });
-    it('should call switch language when language is auto', async () => {
-      const mockUserConfig: any = {
-        avatar: 'new-avatar-url',
-        settings: {
-          language: 'auto',
-        },
-      };
-      vi.spyOn(userService, 'getUserConfig').mockResolvedValueOnce(mockUserConfig);
-
-      const { result } = renderHook(() => useUserStore().useFetchUserConfig(true), {
-        wrapper: withSWR,
-      });
-
-      // 等待 SWR 完成数据获取
-      await waitFor(() => expect(result.current.data).toEqual(mockUserConfig));
-
-      // 验证状态是否正确更新
-      expect(useUserStore.getState().avatar).toBe(mockUserConfig.avatar);
-      expect(useUserStore.getState().settings).toEqual(mockUserConfig.settings);
-
-      // 验证是否正确处理了语言设置
-      expect(switchLang).toHaveBeenCalledWith('auto');
-    });
-
-    it('should handle the case when user config is null', async () => {
-      vi.spyOn(userService, 'getUserConfig').mockResolvedValueOnce(null as any);
-
-      const { result } = renderHook(() => useUserStore().useFetchUserConfig(true), {
-        wrapper: withSWR,
-      });
-
-      // 等待 SWR 完成数据获取
-      await waitFor(() => expect(result.current.data).toBeNull());
-
-      // 验证状态未被错误更新
-      expect(useUserStore.getState().avatar).toBeUndefined();
-      expect(useUserStore.getState().settings).toEqual({});
-    });
-  });
-
-  describe('refreshConnection', () => {
-    it('should not call triggerEnableSync when userId is empty', async () => {
-      const { result } = renderHook(() => useUserStore());
-      const onEvent = vi.fn();
-
-      vi.spyOn(commonSelectors, 'userId').mockReturnValueOnce(undefined);
-      const triggerEnableSyncSpy = vi.spyOn(result.current, 'triggerEnableSync');
-
-      await act(async () => {
-        await result.current.refreshConnection(onEvent);
-      });
-
-      expect(triggerEnableSyncSpy).not.toHaveBeenCalled();
-    });
-
-    it('should call triggerEnableSync when userId exists', async () => {
-      const { result } = renderHook(() => useUserStore());
-      const onEvent = vi.fn();
-      const userId = 'user-id';
-
-      vi.spyOn(commonSelectors, 'userId').mockReturnValueOnce(userId);
-      const triggerEnableSyncSpy = vi.spyOn(result.current, 'triggerEnableSync');
-
-      await act(async () => {
-        await result.current.refreshConnection(onEvent);
-      });
-
-      expect(triggerEnableSyncSpy).toHaveBeenCalledWith(userId, onEvent);
-    });
-  });
-
-  describe('triggerEnableSync', () => {
-    it('should return false when sync.channelName is empty', async () => {
-      const { result } = renderHook(() => useUserStore());
-      const userId = 'user-id';
-      const onEvent = vi.fn();
-
-      vi.spyOn(syncSettingsSelectors, 'webrtcConfig').mockReturnValueOnce({
-        channelName: '',
-        enabled: true,
-      });
-
-      const data = await act(async () => {
-        return result.current.triggerEnableSync(userId, onEvent);
-      });
-
-      expect(data).toBe(false);
-    });
-
-    it('should call globalService.enabledSync when sync.channelName exists', async () => {
-      const userId = 'user-id';
-      const onEvent = vi.fn();
-      const channelName = 'channel-name';
-      const channelPassword = 'channel-password';
-      const deviceName = 'device-name';
-      const signaling = 'signaling';
-
-      vi.spyOn(syncSettingsSelectors, 'webrtcConfig').mockReturnValueOnce({
-        channelName,
-        channelPassword,
-        signaling,
-        enabled: true,
-      });
-      vi.spyOn(syncSettingsSelectors, 'deviceName').mockReturnValueOnce(deviceName);
-      const enabledSyncSpy = vi.spyOn(globalService, 'enabledSync').mockResolvedValueOnce(true);
-      const { result } = renderHook(() => useUserStore());
-
-      const data = await act(async () => {
-        return result.current.triggerEnableSync(userId, onEvent);
-      });
-
-      expect(enabledSyncSpy).toHaveBeenCalledWith({
-        channel: { name: channelName, password: channelPassword },
-        onAwarenessChange: expect.any(Function),
-        onSyncEvent: onEvent,
-        onSyncStatusChange: expect.any(Function),
-        signaling,
-        user: expect.objectContaining({ id: userId, name: deviceName }),
-      });
-      expect(data).toBe(true);
-    });
-  });
-
   describe('useCheckTrace', () => {
     it('should return false when shouldFetch is false', async () => {
       const { result } = renderHook(() => useUserStore().useCheckTrace(false), {
@@ -270,47 +90,4 @@ describe('createCommonSlice', () => {
       expect(messageCountToCheckTraceSpy).toHaveBeenCalled();
     });
   });
-
-  describe('useEnabledSync', () => {
-    it('should return false when userId is empty', async () => {
-      const { result } = renderHook(() => useUserStore().useEnabledSync(true, undefined, vi.fn()), {
-        wrapper: withSWR,
-      });
-
-      await waitFor(() => expect(result.current.data).toBe(false));
-    });
-
-    it('should call globalService.disableSync when userEnableSync is false', async () => {
-      const disableSyncSpy = vi.spyOn(globalService, 'disableSync').mockResolvedValueOnce(false);
-
-      const { result } = renderHook(
-        () => useUserStore().useEnabledSync(false, 'user-id', vi.fn()),
-        { wrapper: withSWR },
-      );
-
-      await waitFor(() => expect(result.current.data).toBeUndefined());
-      expect(disableSyncSpy).toHaveBeenCalled();
-    });
-
-    it('should call triggerEnableSync when userEnableSync and userId exist', async () => {
-      const userId = 'user-id';
-      const onEvent = vi.fn();
-      const triggerEnableSyncSpy = vi.fn().mockResolvedValueOnce(true);
-
-      const { result } = renderHook(() => useUserStore());
-
-      // replace triggerEnableSync as a mock
-      result.current.triggerEnableSync = triggerEnableSyncSpy;
-
-      const { result: swrResult } = renderHook(
-        () => result.current.useEnabledSync(true, userId, onEvent),
-        {
-          wrapper: withSWR,
-        },
-      );
-
-      await waitFor(() => expect(swrResult.current.data).toBe(true));
-      expect(triggerEnableSyncSpy).toHaveBeenCalledWith(userId, onEvent);
-    });
-  });
 });

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

@@ -1,22 +1,17 @@
-import useSWR, { SWRResponse, mutate } from 'swr';
+import useSWR, { SWRResponse } from 'swr';
 import { DeepPartial } from 'utility-types';
 import type { StateCreator } from 'zustand/vanilla';
 
 import { globalService } from '@/services/global';
 import { messageService } from '@/services/message';
-import { UserConfig, userService } from '@/services/user';
+import { userService } from '@/services/user';
 import type { UserStore } from '@/store/user';
 import type { GlobalServerConfig } from '@/types/serverConfig';
 import type { GlobalSettings } from '@/types/settings';
-import { OnSyncEvent, PeerSyncStatus } from '@/types/sync';
-import { switchLang } from '@/utils/client/switchLang';
 import { merge } from '@/utils/merge';
-import { browserInfo } from '@/utils/platform';
 import { setNamespace } from '@/utils/storeDebug';
 
 import { preferenceSelectors } from '../preference/selectors';
-import { settingsSelectors, syncSettingsSelectors } from '../settings/selectors';
-import { commonSelectors } from './selectors';
 
 const n = setNamespace('common');
 
@@ -24,79 +19,22 @@ const n = setNamespace('common');
  * 设置操作
  */
 export interface CommonAction {
-  refreshConnection: (onEvent: OnSyncEvent) => Promise<void>;
-  refreshUserConfig: () => Promise<void>;
-  triggerEnableSync: (userId: string, onEvent: OnSyncEvent) => Promise<boolean>;
   updateAvatar: (avatar: string) => Promise<void>;
   useCheckTrace: (shouldFetch: boolean) => SWRResponse;
-  useEnabledSync: (
-    userEnableSync: boolean,
-    userId: string | undefined,
-    onEvent: OnSyncEvent,
-  ) => SWRResponse;
   useFetchServerConfig: () => SWRResponse;
-  useFetchUserConfig: (initServer: boolean) => SWRResponse<UserConfig | undefined>;
 }
 
-const USER_CONFIG_FETCH_KEY = 'fetchUserConfig';
-
 export const createCommonSlice: StateCreator<
   UserStore,
   [['zustand/devtools', never]],
   [],
   CommonAction
 > = (set, get) => ({
-  refreshConnection: async (onEvent) => {
-    const userId = commonSelectors.userId(get());
-
-    if (!userId) return;
-
-    await get().triggerEnableSync(userId, onEvent);
-  },
-
-  refreshUserConfig: async () => {
-    await mutate([USER_CONFIG_FETCH_KEY, true]);
-
-    // when get the user config ,refresh the model provider list to the latest
-    get().refreshModelProviderList();
-  },
-
-  triggerEnableSync: async (userId: string, onEvent: OnSyncEvent) => {
-    // double-check the sync ability
-    // if there is no channelName, don't start sync
-    const sync = syncSettingsSelectors.webrtcConfig(get());
-    if (!sync.channelName) return false;
-
-    const name = syncSettingsSelectors.deviceName(get());
-
-    const defaultUserName = `My ${browserInfo.browser} (${browserInfo.os})`;
-
-    set({ syncStatus: PeerSyncStatus.Connecting });
-    return globalService.enabledSync({
-      channel: {
-        name: sync.channelName,
-        password: sync.channelPassword,
-      },
-      onAwarenessChange(state) {
-        set({ syncAwareness: state });
-      },
-      onSyncEvent: onEvent,
-      onSyncStatusChange: (status) => {
-        set({ syncStatus: status });
-      },
-      signaling: sync.signaling,
-      user: {
-        id: userId,
-        // if user don't set the name, use default name
-        name: name || defaultUserName,
-        ...browserInfo,
-      },
-    });
-  },
   updateAvatar: async (avatar) => {
     await userService.updateAvatar(avatar);
     await get().refreshUserConfig();
   },
+
   useCheckTrace: (shouldFetch) =>
     useSWR<boolean>(
       ['checkTrace', shouldFetch],
@@ -115,25 +53,6 @@ export const createCommonSlice: StateCreator<
       },
     ),
 
-  useEnabledSync: (userEnableSync, userId, onEvent) =>
-    useSWR<boolean>(
-      ['enableSync', userEnableSync, userId],
-      async () => {
-        // if user don't enable sync or no userId ,don't start sync
-        if (!userId) return false;
-
-        // if user don't enable sync, stop sync
-        if (!userEnableSync) return globalService.disableSync();
-
-        return get().triggerEnableSync(userId, onEvent);
-      },
-      {
-        onSuccess: (syncEnabled) => {
-          set({ syncEnabled }, false, n('useEnabledSync'));
-        },
-        revalidateOnFocus: false,
-      },
-    ),
   useFetchServerConfig: () =>
     useSWR<GlobalServerConfig>('fetchGlobalConfig', globalService.getGlobalConfig, {
       onSuccess: (data) => {
@@ -152,32 +71,4 @@ export const createCommonSlice: StateCreator<
       },
       revalidateOnFocus: false,
     }),
-  useFetchUserConfig: (initServer) =>
-    useSWR<UserConfig | undefined>(
-      [USER_CONFIG_FETCH_KEY, initServer],
-      async () => {
-        if (!initServer) return;
-        return userService.getUserConfig();
-      },
-      {
-        onSuccess: (data) => {
-          if (!data) return;
-
-          set(
-            { avatar: data.avatar, settings: data.settings, userId: data.uuid },
-            false,
-            n('fetchUserConfig', data),
-          );
-
-          // when get the user config ,refresh the model provider list to the latest
-          get().refreshDefaultModelProviderList({ trigger: 'fetchUserConfig' });
-
-          const { language } = settingsSelectors.currentSettings(get());
-          if (language === 'auto') {
-            switchLang('auto');
-          }
-        },
-        revalidateOnFocus: false,
-      },
-    ),
 });

package/src/store/user/slices/settings/initialState.ts

@@ -7,14 +7,12 @@ import { GlobalServerConfig } from '@/types/serverConfig';
 import { GlobalSettings } from '@/types/settings';
 
 export interface UserSettingsState {
-  avatar?: string;
   defaultModelProviderList: ModelProviderCard[];
   defaultSettings: GlobalSettings;
   editingCustomCardModel?: { id: string; provider: string } | undefined;
   modelProviderList: ModelProviderCard[];
   serverConfig: GlobalServerConfig;
   settings: DeepPartial<GlobalSettings>;
-  userId?: string;
 }
 
 export const initialSettingsState: UserSettingsState = {

package/src/store/user/slices/sync/action.test.ts

@@ -0,0 +1,150 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { withSWR } from '~test-utils';
+
+import { globalService } from '@/services/global';
+import { useUserStore } from '@/store/user';
+import { userProfileSelectors } from '@/store/user/slices/auth/selectors';
+import { syncSettingsSelectors } from '@/store/user/slices/settings/selectors';
+
+vi.mock('zustand/traditional');
+
+vi.mock('swr', async (importOriginal) => {
+  const modules = await importOriginal();
+  return {
+    ...(modules as any),
+    mutate: vi.fn(),
+  };
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('createSyncSlice', () => {
+  describe('refreshConnection', () => {
+    it('should not call triggerEnableSync when userId is empty', async () => {
+      const { result } = renderHook(() => useUserStore());
+      const onEvent = vi.fn();
+
+      vi.spyOn(userProfileSelectors, 'userId').mockReturnValueOnce(undefined as any);
+      const triggerEnableSyncSpy = vi.spyOn(result.current, 'triggerEnableSync');
+
+      await act(async () => {
+        await result.current.refreshConnection(onEvent);
+      });
+
+      expect(triggerEnableSyncSpy).not.toHaveBeenCalled();
+    });
+
+    it('should call triggerEnableSync when userId exists', async () => {
+      const { result } = renderHook(() => useUserStore());
+      const onEvent = vi.fn();
+      const userId = 'user-id';
+
+      vi.spyOn(userProfileSelectors, 'userId').mockReturnValueOnce(userId);
+      const triggerEnableSyncSpy = vi.spyOn(result.current, 'triggerEnableSync');
+
+      await act(async () => {
+        await result.current.refreshConnection(onEvent);
+      });
+
+      expect(triggerEnableSyncSpy).toHaveBeenCalledWith(userId, onEvent);
+    });
+  });
+
+  describe('triggerEnableSync', () => {
+    it('should return false when sync.channelName is empty', async () => {
+      const { result } = renderHook(() => useUserStore());
+      const userId = 'user-id';
+      const onEvent = vi.fn();
+
+      vi.spyOn(syncSettingsSelectors, 'webrtcConfig').mockReturnValueOnce({
+        channelName: '',
+        enabled: true,
+      });
+
+      const data = await act(async () => {
+        return result.current.triggerEnableSync(userId, onEvent);
+      });
+
+      expect(data).toBe(false);
+    });
+
+    it('should call globalService.enabledSync when sync.channelName exists', async () => {
+      const userId = 'user-id';
+      const onEvent = vi.fn();
+      const channelName = 'channel-name';
+      const channelPassword = 'channel-password';
+      const deviceName = 'device-name';
+      const signaling = 'signaling';
+
+      vi.spyOn(syncSettingsSelectors, 'webrtcConfig').mockReturnValueOnce({
+        channelName,
+        channelPassword,
+        signaling,
+        enabled: true,
+      });
+      vi.spyOn(syncSettingsSelectors, 'deviceName').mockReturnValueOnce(deviceName);
+      const enabledSyncSpy = vi.spyOn(globalService, 'enabledSync').mockResolvedValueOnce(true);
+      const { result } = renderHook(() => useUserStore());
+
+      const data = await act(async () => {
+        return result.current.triggerEnableSync(userId, onEvent);
+      });
+
+      expect(enabledSyncSpy).toHaveBeenCalledWith({
+        channel: { name: channelName, password: channelPassword },
+        onAwarenessChange: expect.any(Function),
+        onSyncEvent: onEvent,
+        onSyncStatusChange: expect.any(Function),
+        signaling,
+        user: expect.objectContaining({ id: userId, name: deviceName }),
+      });
+      expect(data).toBe(true);
+    });
+  });
+
+  describe('useEnabledSync', () => {
+    it('should return false when userId is empty', async () => {
+      const { result } = renderHook(() => useUserStore().useEnabledSync(true, undefined, vi.fn()), {
+        wrapper: withSWR,
+      });
+
+      await waitFor(() => expect(result.current.data).toBe(false));
+    });
+
+    it('should call globalService.disableSync when userEnableSync is false', async () => {
+      const disableSyncSpy = vi.spyOn(globalService, 'disableSync').mockResolvedValueOnce(false);
+
+      const { result } = renderHook(
+        () => useUserStore().useEnabledSync(false, 'user-id', vi.fn()),
+        { wrapper: withSWR },
+      );
+
+      await waitFor(() => expect(result.current.data).toBeUndefined());
+      expect(disableSyncSpy).toHaveBeenCalled();
+    });
+
+    it('should call triggerEnableSync when userEnableSync and userId exist', async () => {
+      const userId = 'user-id';
+      const onEvent = vi.fn();
+      const triggerEnableSyncSpy = vi.fn().mockResolvedValueOnce(true);
+
+      const { result } = renderHook(() => useUserStore());
+
+      // replace triggerEnableSync as a mock
+      result.current.triggerEnableSync = triggerEnableSyncSpy;
+
+      const { result: swrResult } = renderHook(
+        () => result.current.useEnabledSync(true, userId, onEvent),
+        {
+          wrapper: withSWR,
+        },
+      );
+
+      await waitFor(() => expect(swrResult.current.data).toBe(true));
+      expect(triggerEnableSyncSpy).toHaveBeenCalledWith(userId, onEvent);
+    });
+  });
+});

package/src/store/user/slices/sync/action.ts

@@ -0,0 +1,94 @@
+import useSWR, { SWRResponse } from 'swr';
+import type { StateCreator } from 'zustand/vanilla';
+
+import { globalService } from '@/services/global';
+import type { UserStore } from '@/store/user';
+import { OnSyncEvent, PeerSyncStatus } from '@/types/sync';
+import { browserInfo } from '@/utils/platform';
+import { setNamespace } from '@/utils/storeDebug';
+
+import { userProfileSelectors } from '../auth/selectors';
+import { syncSettingsSelectors } from '../settings/selectors';
+
+const n = setNamespace('sync');
+
+/**
+ * 设置操作
+ */
+export interface SyncAction {
+  refreshConnection: (onEvent: OnSyncEvent) => Promise<void>;
+  triggerEnableSync: (userId: string, onEvent: OnSyncEvent) => Promise<boolean>;
+  useEnabledSync: (
+    userEnableSync: boolean,
+    userId: string | undefined,
+    onEvent: OnSyncEvent,
+  ) => SWRResponse;
+}
+
+export const createSyncSlice: StateCreator<
+  UserStore,
+  [['zustand/devtools', never]],
+  [],
+  SyncAction
+> = (set, get) => ({
+  refreshConnection: async (onEvent) => {
+    const userId = userProfileSelectors.userId(get());
+
+    if (!userId) return;
+
+    await get().triggerEnableSync(userId, onEvent);
+  },
+
+  triggerEnableSync: async (userId: string, onEvent: OnSyncEvent) => {
+    // double-check the sync ability
+    // if there is no channelName, don't start sync
+    const sync = syncSettingsSelectors.webrtcConfig(get());
+    if (!sync.channelName) return false;
+
+    const name = syncSettingsSelectors.deviceName(get());
+
+    const defaultUserName = `My ${browserInfo.browser} (${browserInfo.os})`;
+
+    set({ syncStatus: PeerSyncStatus.Connecting });
+    return globalService.enabledSync({
+      channel: {
+        name: sync.channelName,
+        password: sync.channelPassword,
+      },
+      onAwarenessChange(state) {
+        set({ syncAwareness: state });
+      },
+      onSyncEvent: onEvent,
+      onSyncStatusChange: (status) => {
+        set({ syncStatus: status });
+      },
+      signaling: sync.signaling,
+      user: {
+        id: userId,
+        // if user don't set the name, use default name
+        name: name || defaultUserName,
+        ...browserInfo,
+      },
+    });
+  },
+
+  useEnabledSync: (userEnableSync, userId, onEvent) =>
+    useSWR<boolean>(
+      ['enableSync', userEnableSync, userId],
+      async () => {
+        // if user don't enable sync or no userId ,don't start sync
+        if (!userId) return false;
+
+        // if user don't enable sync, stop sync
+        if (!userEnableSync) return globalService.disableSync();
+
+        return get().triggerEnableSync(userId, onEvent);
+      },
+      {
+        onSuccess: (syncEnabled) => {
+          set({ syncEnabled }, false, n('useEnabledSync'));
+        },
+        revalidateOnFocus: false,
+      },
+    ),
+});

package/src/store/user/slices/{common → sync}/initialState.ts

@@ -1,17 +1,12 @@
 import { PeerSyncStatus, SyncAwarenessState } from '@/types/sync';
 
-export interface Guide {
-  // Topic 引导
-  topic?: boolean;
-}
-
-export interface UserCommonState {
+export interface UserSyncState {
   syncAwareness: SyncAwarenessState[];
   syncEnabled: boolean;
   syncStatus: PeerSyncStatus;
 }
 
-export const initialCommonState: UserCommonState = {
+export const initialSyncState: UserSyncState = {
   syncAwareness: [],
   syncEnabled: false,
   syncStatus: PeerSyncStatus.Disabled,

package/src/store/user/store.ts

@@ -6,19 +6,28 @@ import { StateCreator } from 'zustand/vanilla';
 import { isDev } from '@/utils/env';
 
 import { type UserState, initialState } from './initialState';
+import { type UserAuthAction, createAuthSlice } from './slices/auth/action';
 import { type CommonAction, createCommonSlice } from './slices/common/action';
 import { type PreferenceAction, createPreferenceSlice } from './slices/preference/action';
 import { type SettingsAction, createSettingsSlice } from './slices/settings/actions';
+import { type SyncAction, createSyncSlice } from './slices/sync/action';
 
 //  ===============  聚合 createStoreFn ============ //
 
-export type UserStore = CommonAction & UserState & SettingsAction & PreferenceAction;
+export type UserStore = SyncAction &
+  UserState &
+  SettingsAction &
+  PreferenceAction &
+  UserAuthAction &
+  CommonAction;
 
 const createStore: StateCreator<UserStore, [['zustand/devtools', never]]> = (...parameters) => ({
   ...initialState,
-  ...createCommonSlice(...parameters),
+  ...createSyncSlice(...parameters),
   ...createSettingsSlice(...parameters),
   ...createPreferenceSlice(...parameters),
+  ...createAuthSlice(...parameters),
+  ...createCommonSlice(...parameters),
 });
 
 //  ===============  实装 useStore ============ //

package/src/store/user/slices/common/selectors.ts

@@ -1,6 +0,0 @@
-import { UserStore } from '@/store/user';
-
-export const commonSelectors = {
-  userAvatar: (s: UserStore) => s.avatar || '',
-  userId: (s: UserStore) => s.userId,
-};