♻️ refactor: 将 useSettings 更名为 useGlobalStore

src/features/AvatarWithUpload/index.tsx

@@ -2,8 +2,8 @@ import { Avatar, Logo } from '@lobehub/ui';
 import { Upload } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
-import { useSettings } from 'src/store/global';
 
+import { useGlobalStore } from '@/store/global';
 import { createUploadImageHandler } from '@/utils/uploadFIle';
 
 const useStyle = createStyles(
@@ -27,7 +27,7 @@ interface AvatarWithUploadProps {
 }
 
 const AvatarWithUpload = memo<AvatarWithUploadProps>(({ size = 40 }) => {
-  const [avatar, setSettings] = useSettings((st) => [st.settings.avatar, st.setSettings]);
+  const [avatar, setSettings] = useGlobalStore((st) => [st.settings.avatar, st.setSettings]);
   const { styles } = useStyle();
 
   const handleUploadAvatar = createUploadImageHandler((avatar) => {

src/features/FolderPanel/index.tsx

@@ -2,9 +2,9 @@ import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { PropsWithChildren, memo, useState } from 'react';
-import { useSettings } from 'src/store/global';
 
 import { FOLDER_WIDTH } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
 
 export const useStyles = createStyles(({ css, token }) => ({
   panel: css`
@@ -16,7 +16,7 @@ export const useStyles = createStyles(({ css, token }) => ({
 
 const FolderPanel = memo<PropsWithChildren>(({ children }) => {
   const { styles } = useStyles();
-  const [sessionsWidth, sessionExpandable] = useSettings((s) => [
+  const [sessionsWidth, sessionExpandable] = useGlobalStore((s) => [
     s.sessionsWidth,
     s.sessionExpandable,
   ]);
@@ -31,7 +31,7 @@ const FolderPanel = memo<PropsWithChildren>(({ children }) => {
       maxWidth={400}
       minWidth={FOLDER_WIDTH}
       onExpandChange={(expand) => {
-        useSettings.setState({
+        useGlobalStore.setState({
           sessionExpandable: expand,
           sessionsWidth: expand ? 320 : 0,
         });
@@ -44,7 +44,7 @@ const FolderPanel = memo<PropsWithChildren>(({ children }) => {
         if (isEqual(nextWidth, sessionsWidth)) return;
 
         setWidth(nextWidth);
-        useSettings.setState({ sessionsWidth: nextWidth });
+        useGlobalStore.setState({ sessionsWidth: nextWidth });
       }}
       placement="left"
       size={{ height: '100vh', width: sessionsWidth }}

src/features/SideBar/BottomActions.tsx

@@ -13,16 +13,16 @@ import {
 import Router from 'next/router';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { SettingsStore } from 'src/store/global';
 
 import DiscordIcon from '@/components/DiscordIcon';
 import { ABOUT, CHANGELOG, DISCORD, FEEDBACK, GITHUB } from '@/const/url';
 import { useExportConfig } from '@/hooks/useExportConfig';
 import { useImportConfig } from '@/hooks/useImportConfig';
+import { GlobalStore } from '@/store/global';
 
 export interface BottomActionProps {
-  setTab: SettingsStore['switchSideBar'];
-  tab: SettingsStore['sidebarKey'];
+  setTab: GlobalStore['switchSideBar'];
+  tab: GlobalStore['sidebarKey'];
 }
 
 const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {

src/features/SideBar/TopActions.tsx

@@ -3,11 +3,12 @@ import { MessageSquare, Sticker } from 'lucide-react';
 import Router from 'next/router';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { SettingsStore } from 'src/store/global';
+
+import { GlobalStore } from '@/store/global';
 
 export interface TopActionProps {
-  setTab: SettingsStore['switchSideBar'];
-  tab: SettingsStore['sidebarKey'];
+  setTab: GlobalStore['switchSideBar'];
+  tab: GlobalStore['sidebarKey'];
 }
 
 const TopActions = memo<TopActionProps>(({ tab, setTab }) => {

src/features/SideBar/index.tsx

@@ -1,14 +1,14 @@
 import { SideNav } from '@lobehub/ui';
 import { memo } from 'react';
-import { useSettings } from 'src/store/global';
 
 import AvatarWithUpload from '@/features/AvatarWithUpload';
+import { useGlobalStore } from '@/store/global';
 
 import BottomActions from './BottomActions';
 import TopActions from './TopActions';
 
 export default memo(() => {
-  const [tab, setTab] = useSettings((s) => [s.sidebarKey, s.switchSideBar]);
+  const [tab, setTab] = useGlobalStore((s) => [s.sidebarKey, s.switchSideBar]);
 
   return (
     <SideNav

src/helpers/export.ts

@@ -1,5 +1,4 @@
-import { settingsSelectors, useSettings } from 'src/store/global';
-
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 import { sessionSelectors, useSessionStore } from '@/store/session';
 import { createConfigFile, exportConfigFile } from '@/utils/config';
 
@@ -9,7 +8,7 @@ const getAgent = (id: string) => sessionSelectors.getExportAgent(id)(useSessionS
 const getSessions = () => sessionSelectors.exportSessions(useSessionStore.getState());
 const getSession = (id: string) => sessionSelectors.getSessionById(id)(useSessionStore.getState());
 
-const getSettings = () => settingsSelectors.exportSettings(useSettings.getState());
+const getSettings = () => settingsSelectors.exportSettings(useGlobalStore.getState());
 
 export const exportAgents = () => {
   const sessions = getAgents();

src/hooks/useImportConfig.ts

@@ -1,12 +1,12 @@
 import { useMemo } from 'react';
-import { useSettings } from 'src/store/global';
 
+import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { importConfigFile } from '@/utils/config';
 
 export const useImportConfig = () => {
   const importSessions = useSessionStore((s) => s.importSessions);
-  const importAppSettings = useSettings((s) => s.importAppSettings);
+  const importAppSettings = useGlobalStore((s) => s.importAppSettings);
 
   const importConfig = (info: any) => {
     importConfigFile(info, (config) => {

src/layout/index.tsx

@@ -4,8 +4,8 @@ import { useThemeMode } from 'antd-style';
 import 'antd/dist/reset.css';
 import Zh_CN from 'antd/locale/zh_CN';
 import { PropsWithChildren, useCallback, useEffect } from 'react';
-import { useSettings } from 'src/store/global';
 
+import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { GlobalStyle } from '@/styles';
 
@@ -28,8 +28,8 @@ const Layout = ({ children }: PropsWithChildren) => {
 };
 
 export default ({ children }: PropsWithChildren) => {
-  const themeMode = useSettings((s) => s.settings.themeMode);
-  const [primaryColor, neutralColor] = useSettings((s) => [
+  const themeMode = useGlobalStore((s) => s.settings.themeMode);
+  const [primaryColor, neutralColor] = useGlobalStore((s) => [
     s.settings.primaryColor,
     s.settings.neutralColor,
   ]);
@@ -40,7 +40,7 @@ export default ({ children }: PropsWithChildren) => {
   useEffect(() => {
     // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
     useSessionStore.persist.rehydrate();
-    useSettings.persist.rehydrate();
+    useGlobalStore.persist.rehydrate();
   }, []);
 
   const genCustomToken: any = useCallback(

src/pages/chat/SessionList/List/SessionItem.tsx

@@ -5,10 +5,10 @@ import { FolderOutput, MoreVertical, Pin, PinOff, Trash } from 'lucide-react';
 import { FC, memo, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import { useSettings } from 'src/store/global';
 import { shallow } from 'zustand/shallow';
 
 import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
+import { useGlobalStore } from '@/store/global';
 import { agentSelectors, chatSelectors, sessionSelectors, useSessionStore } from '@/store/session';
 
 import { useStyles } from './style';
@@ -29,7 +29,7 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
   const { t } = useTranslation('common');
 
   const { styles } = useStyles();
-  const [defaultModel] = useSettings((s) => [s.settings.defaultAgent.config?.model]);
+  const [defaultModel] = useGlobalStore((s) => [s.settings.defaultAgent.config?.model]);
 
   const [
     pin,

src/pages/chat/[id]/Conversation/ChatList/Error/ApiKeyForm.tsx

@@ -3,14 +3,15 @@ import { Button, Input } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
-import { useSettings } from 'src/store/global';
+
+import { useGlobalStore } from '@/store/global';
 
 import { useStyles } from './style';
 
 const APIKeyForm = memo<{ onConfirm?: () => void }>(({ onConfirm }) => {
   const { t } = useTranslation('error');
   const { styles, theme } = useStyles();
-  const [apiKey, setSettings] = useSettings((s) => [s.settings.OPENAI_API_KEY, s.setSettings]);
+  const [apiKey, setSettings] = useGlobalStore((s) => [s.settings.OPENAI_API_KEY, s.setSettings]);
 
   return (
     <Center gap={16} style={{ maxWidth: 300 }}>

src/pages/chat/[id]/Conversation/ChatList/Error/InvalidAccess.tsx

@@ -4,8 +4,8 @@ import { KeySquare, SquareAsterisk } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import { useSettings } from 'src/store/global';
 
+import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 
 import OtpInput from '../OTPInput';
@@ -15,7 +15,7 @@ import { ErrorActionContainer, FormAction } from './style';
 const InvalidAccess = memo<{ id: string }>(({ id }) => {
   const { t } = useTranslation('error');
   const [mode, setMode] = useState('password');
-  const [password, setSettings] = useSettings((s) => [s.settings.password, s.setSettings]);
+  const [password, setSettings] = useGlobalStore((s) => [s.settings.password, s.setSettings]);
   const [resend, deleteMessage] = useSessionStore((s) => [s.resendMessage, s.deleteMessage]);
 
   return (

src/pages/chat/[id]/Conversation/Input/index.tsx

@@ -3,9 +3,9 @@ import { Button } from 'antd';
 import { LucideGalleryVerticalEnd } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSettings } from 'src/store/global';
 
 import { CHAT_TEXTAREA_HEIGHT, HEADER_HEIGHT } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 
 import InputActions from './Action';
@@ -17,7 +17,7 @@ const ChatInput = () => {
   const [expand, setExpand] = useState<boolean>(false);
   const [text, setText] = useState('');
 
-  const [inputHeight] = useSettings((s) => [s.inputHeight]);
+  const [inputHeight] = useGlobalStore((s) => [s.inputHeight]);
   const [sendMessage, hasTopic, saveToTopic] = useSessionStore((s) => [
     s.createOrSendMsg,
     !!s.activeTopicId,
@@ -38,7 +38,7 @@ const ChatInput = () => {
       minHeight={CHAT_TEXTAREA_HEIGHT}
       onSizeChange={(_, size) => {
         if (!size) return;
-        useSettings.setState({
+        useGlobalStore.setState({
           inputHeight: typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
         });
       }}

src/pages/chat/[id]/Header/index.tsx

@@ -6,10 +6,10 @@ import Router from 'next/router';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import { useSettings } from 'src/store/global';
 
 import HeaderTitle from '@/components/HeaderTitle';
 import Tag from '@/components/Tag';
+import { useGlobalStore } from '@/store/global';
 import { agentSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
 
 import PluginTag from './PluginTag';
@@ -28,7 +28,7 @@ const Header = memo(() => {
     agentSelectors.currentAgentPlugins(s),
   ]);
 
-  const [showAgentSettings, toggleConfig] = useSettings((s) => [
+  const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.showAgentConfig,
     s.toggleAgentPanel,
   ]);

src/pages/chat/[id]/Sidebar/Topic/index.tsx

@@ -2,9 +2,9 @@ import { useThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import { useSettings } from 'src/store/global';
 
 import Empty from '@/components/Empty';
+import { useGlobalStore } from '@/store/global';
 import { topicSelectors, useSessionStore } from '@/store/session';
 
 import TopicItem from './TopicItem';
@@ -15,7 +15,7 @@ export const Topic = () => {
   const [activeTopicId] = useSessionStore((s) => [s.activeTopicId]);
   const { t } = useTranslation('empty');
 
-  const [visible, updateGuideState] = useSettings((s) => [s.guide?.topic, s.updateGuideState]);
+  const [visible, updateGuideState] = useGlobalStore((s) => [s.guide?.topic, s.updateGuideState]);
 
   return (
     <Flexbox gap={2}>

src/pages/chat/[id]/Sidebar/index.tsx

@@ -1,10 +1,10 @@
 import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
-import { useSettings } from 'src/store/global';
 
 import HeaderSpacing from '@/components/HeaderSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
 
 import Inner from './Inner';
 
@@ -22,7 +22,7 @@ const useStyles = createStyles(({ cx, css, token, stylish }) => ({
 
 const Config = () => {
   const { styles } = useStyles();
-  const [showAgentSettings, toggleConfig] = useSettings((s) => [
+  const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.showAgentConfig,
     s.toggleAgentPanel,
   ]);

src/pages/chat/[id]/layout.tsx

@@ -1,10 +1,10 @@
 import { useRouter } from 'next/router';
 import { PropsWithChildren, memo, useEffect } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { useSettings } from 'src/store/global';
 import { shallow } from 'zustand/shallow';
 
 import AppLayout from '@/layout/AppLayout';
+import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 
 import { Sessions } from '../SessionList';
@@ -32,9 +32,9 @@ const ChatLayout = memo<PropsWithChildren>(({ children }) => {
   }, [id]);
 
   useEffect(() => {
-    const hasRehydrated = useSettings.persist.hasHydrated();
+    const hasRehydrated = useGlobalStore.persist.hasHydrated();
     if (hasRehydrated) {
-      useSettings.setState({ sidebarKey: 'chat' });
+      useGlobalStore.setState({ sidebarKey: 'chat' });
     }
   }, []);
 

src/pages/settings/Settings/Agent.tsx

@@ -1,13 +1,13 @@
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
-import { settingsSelectors, useSettings } from 'src/store/global';
 
 import { AgentConfig, AgentMeta, AgentPlugin, AgentPrompt } from '@/features/AgentSetting';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 
 const Agent = memo(() => {
-  const config = useSettings(settingsSelectors.currentAgentConfig, isEqual);
-  const meta = useSettings(settingsSelectors.currentAgentMeta, isEqual);
-  const [setAgentConfig, setAgentMeta, toggleAgentPlugin] = useSettings((s) => [
+  const config = useGlobalStore(settingsSelectors.currentAgentConfig, isEqual);
+  const meta = useGlobalStore(settingsSelectors.currentAgentMeta, isEqual);
+  const [setAgentConfig, setAgentMeta, toggleAgentPlugin] = useGlobalStore((s) => [
     s.setAgentConfig,
     s.setAgentMeta,
     s.toggleAgentPlugin,

src/pages/settings/Settings/Common.tsx

@@ -6,12 +6,12 @@ import { AppWindow, Palette, Webhook } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import SliderWithInput from 'src/components/SliderWithInput';
-import { settingsSelectors, useSettings } from 'src/store/global';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_SETTINGS } from '@/const/settings';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { options } from '@/locales/options';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { ConfigKeys } from '@/types/settings';
 
@@ -27,8 +27,8 @@ const Common = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = AntForm.useForm();
   const clearSessions = useSessionStore((s) => s.clearSessions);
-  const settings = useSettings(settingsSelectors.currentSettings, isEqual);
-  const [setThemeMode, setSettings, resetSettings] = useSettings((s) => [
+  const settings = useGlobalStore(settingsSelectors.currentSettings, isEqual);
+  const [setThemeMode, setSettings, resetSettings] = useGlobalStore((s) => [
     s.setThemeMode,
     s.setSettings,
     s.resetSettings,