💄 style(settings): broadcast locale changes and update switchLocale action (#9620)

chore(locale): broadcast locale changes and update switchLocale action

apps/desktop/src/main/controllers/SystemCtr.ts

@@ -77,6 +77,7 @@ export default class SystemController extends ControllerModule {
 
     // 更新i18n实例的语言
     await this.app.i18n.changeLanguage(locale === 'auto' ? app.getLocale() : locale);
+    this.app.browserManager.broadcastToAllWindows('localeChanged', { locale });
 
     return { success: true };
   }

packages/electron-client-ipc/src/events/system.ts

@@ -18,6 +18,7 @@ export interface SystemDispatchEvents {
 }
 
 export interface SystemBroadcastEvents {
+  localeChanged: (data: { locale: string }) => void;
   systemThemeChanged: (data: { themeMode: ThemeAppearance }) => void;
   themeChanged: (data: { themeMode: ThemeMode }) => void;
 }

src/app/[variants]/(main)/settings/common/features/Common/Common.tsx

@@ -17,6 +17,7 @@ import { useServerConfigStore } from '@/store/serverConfig';
 import { serverConfigSelectors } from '@/store/serverConfig/selectors';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
+import { LocaleMode } from '@/types/locale';
 
 const Common = memo(() => {
   const { t } = useTranslation('setting');
@@ -33,6 +34,10 @@ const Common = memo(() => {
   ]);
   const [loading, setLoading] = useState(false);
 
+  const handleLangChange = (value: LocaleMode) => {
+    switchLocale(value);
+  };
+
   if (!(isStatusInit && isUserStateInit))
     return <Skeleton active paragraph={{ rows: 5 }} title={false} />;
 
@@ -75,7 +80,7 @@ const Common = memo(() => {
         children: (
           <Select
             defaultValue={language}
-            onChange={switchLocale}
+            onChange={handleLangChange}
             options={[{ label: t('settingCommon.lang.autoMode'), value: 'auto' }, ...localeOptions]}
           />
         ),
@@ -142,4 +147,4 @@ const Common = memo(() => {
   );
 });
 
-export default Common;
+export default Common;

src/features/ElectronTitlebar/hooks/useWatchThemeUpdate.ts

@@ -15,7 +15,10 @@ export const useWatchThemeUpdate = () => {
       s.appState.isMac,
     ],
   );
-  const switchThemeMode = useGlobalStore((s) => s.switchThemeMode);
+  const [switchThemeMode, switchLocale] = useGlobalStore((s) => [
+    s.switchThemeMode,
+    s.switchLocale,
+  ]);
 
   const theme = useTheme();
 
@@ -23,6 +26,10 @@ export const useWatchThemeUpdate = () => {
     switchThemeMode(themeMode, { skipBroadcast: true });
   });
 
+  useWatchBroadcast('localeChanged', ({ locale }) => {
+    switchLocale(locale as any, { skipBroadcast: true });
+  });
+
   useWatchBroadcast('systemThemeChanged', ({ themeMode }) => {
     updateElectronAppState({ systemAppearance: themeMode });
   });

src/store/global/actions/general.ts

@@ -22,7 +22,7 @@ const n = setNamespace('g');
 export interface GlobalGeneralAction {
   openSessionInNewWindow: (sessionId: string) => Promise<void>;
   openTopicInNewWindow: (sessionId: string, topicId: string) => Promise<void>;
-  switchLocale: (locale: LocaleMode) => void;
+  switchLocale: (locale: LocaleMode, params?: { skipBroadcast?: boolean }) => void;
   switchThemeMode: (themeMode: ThemeMode, params?: { skipBroadcast?: boolean }) => void;
   updateSystemStatus: (status: Partial<SystemStatus>, action?: any) => void;
   useCheckLatestVersion: (enabledCheck?: boolean) => SWRResponse<string>;
@@ -79,12 +79,12 @@ export const generalActionSlice: StateCreator<
     }
   },
 
-  switchLocale: (locale) => {
+  switchLocale: (locale, { skipBroadcast } = {}) => {
     get().updateSystemStatus({ language: locale });
 
     switchLang(locale);
 
-    if (isDesktop) {
+    if (isDesktop && !skipBroadcast) {
       (async () => {
         try {
           const { dispatch } = await import('@lobechat/electron-client-ipc');