@lobehub/lobehub 2.0.0-next.71 → 2.0.0-next.73

package/src/app/[variants]/(main)/profile/stats/index.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { memo } from 'react';
+
+import StatsClient from './Client';
+
+const MobileProfileStatsPage = memo(() => {
+  const mobile = true;
+  return <StatsClient mobile={mobile} />;
+});
+
+MobileProfileStatsPage.displayName = 'MobileProfileStatsPage';
+
+
+const DesktopProfileStatsPage = memo(() => {
+  const mobile = false;
+  return <StatsClient mobile={mobile} />;
+});
+
+export { DesktopProfileStatsPage,MobileProfileStatsPage };

package/src/app/[variants]/(main)/profile/usage/features/UsageTable.tsx

@@ -2,11 +2,11 @@ import { ProviderIcon } from '@lobehub/icons';
 import { Tag } from '@lobehub/ui';
 import { Table, TableColumnType, Typography } from 'antd';
 import { useTheme } from 'antd-style';
-import { parseAsInteger, useQueryState } from 'nuqs';
 import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { parseAsInteger, useQueryParam } from '@/hooks/useQueryParam';
 import { useClientDataSWR } from '@/libs/swr';
 import { usageService } from '@/services/usage';
 import { formatDate, formatNumber } from '@/utils/format';
@@ -21,14 +21,12 @@ const UsageTable = memo<UsageChartProps>(({ dateStrings }) => {
     usageService.findByMonth(dateStrings),
   );
 
-  const [currentPage, setCurrentPage] = useQueryState(
-    'current',
-    parseAsInteger.withDefault(1).withOptions({ clearOnDefault: true }),
-  );
-  const [pageSize, setPageSize] = useQueryState(
-    'pageSize',
-    parseAsInteger.withDefault(5).withOptions({ clearOnDefault: true }),
-  );
+  const [currentPage, setCurrentPage] = useQueryParam('current', parseAsInteger.withDefault(1), {
+    clearOnDefault: true,
+  });
+  const [pageSize, setPageSize] = useQueryParam('pageSize', parseAsInteger.withDefault(5), {
+    clearOnDefault: true,
+  });
 
   useEffect(() => {
     if (dateStrings) {

package/src/app/[variants]/(main)/profile/usage/index.tsx

@@ -0,0 +1,13 @@
+
+import Client from './Client';
+
+
+const MobileProfileUsagePage = async () => {
+  return <Client mobile={true} />;
+};
+
+const DesktopProfileUsagePage = async () => {
+  return <Client mobile={false} />;
+};
+
+export { DesktopProfileUsagePage,MobileProfileUsagePage };

package/src/app/[variants]/(main)/settings/_layout/Desktop/Header.tsx

@@ -5,10 +5,10 @@ import { ChatHeader } from '@lobehub/ui/chat';
 import { Drawer, type DrawerProps } from 'antd';
 import { createStyles } from 'antd-style';
 import { Menu } from 'lucide-react';
-import { useSearchParams } from 'next/navigation';
 import { ReactNode, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { useSearchParams } from 'react-router-dom';
 
 import BrandWatermark from '@/components/BrandWatermark';
 import { useActiveSettingsKey } from '@/hooks/useActiveTabKey';
@@ -40,7 +40,7 @@ const Header = memo<HeaderProps>(({ children, getContainer, title }) => {
   const activeKey = useActiveSettingsKey();
   const providerName = useProviderName(activeKey);
 
-  const search = useSearchParams();
+  const [search] = useSearchParams();
   const active = search.get('active');
   const { t } = useTranslation('setting');
 

package/src/app/[variants]/(main)/settings/_layout/Desktop/index.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import { useResponsive, useTheme } from 'antd-style';
-import { parseAsStringEnum, useQueryState } from 'nuqs';
 import { memo, useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import SettingContainer from '@/features/Setting/SettingContainer';
+import { parseAsStringEnum, useQueryParam } from '@/hooks/useQueryParam';
 import { SettingsTabs } from '@/store/global/initialState';
 
 import CategoryContent from '../CategoryContent';
@@ -19,7 +19,7 @@ const Layout = memo<LayoutProps>(() => {
   const { md = true } = useResponsive();
   const theme = useTheme();
 
-  const [activeTab, setActiveTab] = useQueryState(
+  const [activeTab, setActiveTab] = useQueryParam(
     'active',
     parseAsStringEnum(Object.values(SettingsTabs)).withDefault(SettingsTabs.Common),
   );

package/src/app/[variants]/(main)/settings/_layout/DesktopWrapper.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { memo } from 'react';
+import { Outlet } from 'react-router-dom';
+
+import SettingsContextProvider from './ContextProvider';
+
+const DesktopSettingsWrapper = memo(() => {
+  return (
+    <SettingsContextProvider
+      value={{
+        showOpenAIApiKey: true,
+        showOpenAIProxyUrl: true,
+      }}
+    >
+      <Outlet />
+    </SettingsContextProvider>
+  );
+});
+
+DesktopSettingsWrapper.displayName = 'DesktopSettingsWrapper';
+
+export default DesktopSettingsWrapper;

package/src/app/[variants]/(main)/settings/_layout/Mobile/Header.tsx

@@ -1,23 +1,22 @@
 'use client';
 
 import { ChatHeader } from '@lobehub/ui/mobile';
-import { useQueryState } from 'nuqs';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { enableAuth } from '@/const/auth';
-import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { useQueryState } from '@/hooks/useQueryParam';
 import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 import { SettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
+import { useNavigate } from 'react-router-dom';
 
 const Header = memo(() => {
   const { t } = useTranslation('setting');
-  const router = useQueryRoute();
   const showMobileWorkspace = useShowMobileWorkspace();
-
+  const navigate = useNavigate();
   const [activeSettingsKey, setActiveSettingsKey] = useQueryState('active');
   const [providerName, setProviderName] = useQueryState('provider');
 
@@ -25,13 +24,15 @@ const Header = memo(() => {
   const isProvider = providerName ? true : false;
 
   const handleBackClick = () => {
+    console.log('gobackclick', isSessionActive, showMobileWorkspace, activeSettingsKey, providerName);
     if (isSessionActive && showMobileWorkspace) {
-      router.push('/chat');
-    } else if (activeSettingsKey === 'provider' && providerName !== null) {
+      navigate('/chat');
+    } else if (activeSettingsKey === 'provider' && providerName) {
       setProviderName(null);
       setActiveSettingsKey('provider');
+      navigate(-1);
     } else {
-      router.push(enableAuth ? '/me/settings' : '/me');
+      navigate(enableAuth ? '/me/settings' : '/me');
     }
   };
 

package/src/app/[variants]/(main)/settings/_layout/Mobile/index.tsx

@@ -1,18 +1,15 @@
 'use client';
 
-import { useQueryState } from 'nuqs';
-
 import MobileContentLayout from '@/components/server/MobileNavLayout';
 import Footer from '@/features/Setting/Footer';
+import { parseAsString, useQueryState } from '@/hooks/useQueryParam';
 import { SettingsTabs } from '@/store/global/initialState';
 
 import SettingsContent from '../SettingsContent';
 import Header from './Header';
 
 const Layout = () => {
-  const [activeTab] = useQueryState('active', {
-    defaultValue: SettingsTabs.Common,
-  });
+  const [activeTab] = useQueryState('active', parseAsString.withDefault(SettingsTabs.Common));
 
   return (
     <MobileContentLayout header={<Header />}>

package/src/app/[variants]/(main)/settings/_layout/MobileWrapper.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { memo } from 'react';
+import { Outlet } from 'react-router-dom';
+
+import SettingsContextProvider from './ContextProvider';
+
+const MobileSettingsWrapper = memo(() => {
+  return (
+    <SettingsContextProvider
+      value={{
+        showOpenAIApiKey: true,
+        showOpenAIProxyUrl: true,
+      }}
+    >
+      <Outlet />
+    </SettingsContextProvider>
+  );
+});
+
+MobileSettingsWrapper.displayName = 'MobileSettingsWrapper';
+
+export default MobileSettingsWrapper;

package/src/app/[variants]/(main)/settings/agent/AgentMenu/Menu.tsx

@@ -1,15 +1,13 @@
 'use client';
 
-import { useQueryState } from 'nuqs';
 import { memo } from 'react';
 
 import { AgentCategory } from '@/features/AgentSetting';
+import { parseAsString, useQueryState } from '@/hooks/useQueryParam';
 import { ChatSettingsTabs } from '@/store/global/initialState';
 
 const Menu = memo(() => {
-  const [tab, setTab] = useQueryState('tab', {
-    defaultValue: ChatSettingsTabs.Prompt,
-  });
+  const [tab, setTab] = useQueryState('tab', parseAsString.withDefault(ChatSettingsTabs.Prompt));
 
   return <AgentCategory setTab={setTab} tab={tab} />;
 });

package/src/app/[variants]/(main)/settings/agent/index.tsx

@@ -4,12 +4,12 @@ import { Tabs } from '@lobehub/ui';
 import { Skeleton } from 'antd';
 import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { useQueryState } from 'nuqs';
 import { memo } from 'react';
 
 import { INBOX_SESSION_ID } from '@/const/session';
 import { AgentSettings } from '@/features/AgentSetting';
 import { useCategory } from '@/features/AgentSetting/AgentCategory/useCategory';
+import { parseAsString, useQueryState } from '@/hooks/useQueryParam';
 import { ChatSettingsTabs } from '@/store/global/initialState';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
@@ -24,9 +24,7 @@ type AgentPageType = {
 const Page = memo((props: AgentPageType) => {
   const { mobile } = props;
   const cateItems = useCategory();
-  const [tab, setTab] = useQueryState('tab', {
-    defaultValue: ChatSettingsTabs.Prompt,
-  });
+  const [tab, setTab] = useQueryState('tab', parseAsString.withDefault(ChatSettingsTabs.Prompt));
   const config = useUserStore(settingsSelectors.defaultAgentConfig, isEqual);
   const meta = useUserStore(settingsSelectors.defaultAgentMeta, isEqual);
   const [updateAgent, isUserStateInit] = useUserStore((s) => [

package/src/app/[variants]/(main)/settings/provider/(list)/index.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { parseAsString, useQueryState } from 'nuqs';
-
 import { isCustomBranding } from '@/const/version';
+import { parseAsString, useQueryParam } from '@/hooks/useQueryParam';
 
 import DesktopLayout from '../_layout/Desktop';
 import MobileLayout from '../_layout/Mobile';
@@ -10,7 +9,7 @@ import ProviderDetailPage from '../detail';
 import Footer from './Footer';
 
 const Page = (props: { mobile?: boolean }) => {
-  const [Provider, setProvider] = useQueryState('provider', parseAsString.withDefault('all'));
+  const [Provider, setProvider] = useQueryParam('provider', parseAsString.withDefault('all'));
   const { mobile } = props;
   const ProviderLayout = mobile ? MobileLayout : DesktopLayout;
   return (

package/src/app/[variants]/(main)/settings/provider/ProviderMenu/All.tsx

@@ -1,9 +1,9 @@
 import { Icon } from '@lobehub/ui';
 import { WalletCards } from 'lucide-react';
-import { useSearchParams } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
+import { useSearchParams } from 'react-router-dom';
 
 import { useStyles } from './Item';
 
@@ -13,7 +13,7 @@ const All = memo((props: { onClick: (activeTab: string) => void }) => {
   const { onClick } = props;
   const { t } = useTranslation('modelProvider');
   const { styles, cx } = useStyles();
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
   const activeKey = searchParams.get('provider');
 
   return (

package/src/app/[variants]/(main)/settings/provider/ProviderMenu/Item.tsx

@@ -2,9 +2,9 @@ import { ProviderIcon } from '@lobehub/icons';
 import { Avatar } from '@lobehub/ui';
 import { Badge } from 'antd';
 import { createStyles } from 'antd-style';
-import { useSearchParams } from 'next/navigation';
 import { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
+import { useSearchParams } from 'react-router-dom';
 
 import { AiProviderListItem, AiProviderSourceEnum } from '@/types/aiProvider';
 
@@ -42,43 +42,44 @@ interface ProviderItemProps extends AiProviderListItem {
 const ProviderItem = memo<ProviderItemProps>(
   ({ id, name, source, enabled, logo, onClick = () => {} }) => {
     const { styles, cx } = useStyles();
-    const searchParams = useSearchParams();
+    const [searchParams] = useSearchParams();
 
-  const activeKey = searchParams.get('provider');
+    const activeKey = searchParams.get('provider');
 
-  const isCustom = source === AiProviderSourceEnum.Custom;
-  return (
-    <div
-      className={cx(styles.container, activeKey === id && styles.active)}
-      onClick={() => {
-        onClick(id);
-      }}
-    >
-      <Flexbox gap={8} horizontal>
-        {isCustom && logo ? (
-          <Avatar
-            alt={name || id}
-            avatar={logo}
-            shape={'square'}
-            size={24}
-            style={{ borderRadius: 6 }}
-          />
-        ) : (
-          <ProviderIcon provider={id} size={24} style={{ borderRadius: 6 }} type={'avatar'} />
-        )}
-        {name}
-      </Flexbox>
-      <Flexbox horizontal>
-        {enabled && (
-          <Center width={24}>
-            <Badge status="success" />
-          </Center>
-        )}
-        {/* cloud slot */}
+    const isCustom = source === AiProviderSourceEnum.Custom;
+    return (
+      <div
+        className={cx(styles.container, activeKey === id && styles.active)}
+        onClick={() => {
+          onClick(id);
+        }}
+      >
+        <Flexbox gap={8} horizontal>
+          {isCustom && logo ? (
+            <Avatar
+              alt={name || id}
+              avatar={logo}
+              shape={'square'}
+              size={24}
+              style={{ borderRadius: 6 }}
+            />
+          ) : (
+            <ProviderIcon provider={id} size={24} style={{ borderRadius: 6 }} type={'avatar'} />
+          )}
+          {name}
+        </Flexbox>
+        <Flexbox horizontal>
+          {enabled && (
+            <Center width={24}>
+              <Badge status="success" />
+            </Center>
+          )}
+          {/* cloud slot */}
 
-        {/* cloud slot */}
-      </Flexbox>
-    </div>
-  );
-});
+          {/* cloud slot */}
+        </Flexbox>
+      </div>
+    );
+  },
+);
 export default ProviderItem;

package/src/app/[variants]/(main)/settings/provider/_layout/Mobile.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useSearchParams } from 'next/navigation';
 import { PropsWithChildren } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 import ProviderMenu from '../ProviderMenu';
 
@@ -10,7 +10,7 @@ interface LayoutProps extends PropsWithChildren {
 }
 
 const Layout = ({ children, onProviderSelect }: LayoutProps) => {
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
   const provider = searchParams.get('provider');
   return provider === 'all' || !provider ? (
     <ProviderMenu mobile={true} onProviderSelect={onProviderSelect} />

package/src/app/[variants]/(main)/settings/provider/features/CreateNewProvider/index.tsx

@@ -10,10 +10,10 @@ import {
 } from '@lobehub/ui';
 import { App } from 'antd';
 import { BrainIcon } from 'lucide-react';
-import { useRouter } from 'next/navigation';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { useNavigate } from 'react-router-dom';
 
 import { useAiInfraStore } from '@/store/aiInfra/store';
 import { CreateAiProviderParams } from '@/types/aiProvider';
@@ -31,7 +31,7 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open }) => {
   const [loading, setLoading] = useState(false);
   const createNewAiProvider = useAiInfraStore((s) => s.createNewAiProvider);
   const { message } = App.useApp();
-  const router = useRouter();
+  const navigate = useNavigate();
   const onFinish = async (values: CreateAiProviderParams) => {
     setLoading(true);
 
@@ -44,7 +44,7 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open }) => {
 
       await createNewAiProvider(finalValues);
       setLoading(false);
-      router.push(`/settings?active=provider&provider=${values.id}`);
+      navigate(`/settings?active=provider&provider=${values.id}`);
       message.success(t('createNewAiProvider.createSuccess'));
       onClose?.();
     } catch (e) {

package/src/app/[variants]/(main)/settings/provider/features/ProviderConfig/UpdateProviderInfo/SettingModal.tsx

@@ -2,10 +2,10 @@ import { ProviderIcon } from '@lobehub/icons';
 import { Button, type FormItemProps, FormModal, Icon, Input, Select, TextArea } from '@lobehub/ui';
 import { App } from 'antd';
 import { BrainIcon } from 'lucide-react';
-import { useRouter } from 'next/navigation';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { useNavigate } from 'react-router-dom';
 
 import { useAiInfraStore } from '@/store/aiInfra/store';
 import { AiProviderDetailItem, UpdateAiProviderParams } from '@/types/aiProvider';
@@ -28,7 +28,7 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open, initial
   ]);
 
   const { message, modal } = App.useApp();
-  const router = useRouter();
+  const navigate = useNavigate();
 
   const onFinish = async (values: UpdateAiProviderParams) => {
     setLoading(true);
@@ -117,7 +117,7 @@ const CreateNewProvider = memo<CreateNewProviderProps>(({ onClose, open, initial
                 okText: t('delete', { ns: 'common' }),
                 onOk: async () => {
                   await deleteAiProvider(id);
-                  router.push('/settings?active=provider');
+                  navigate('/settings?active=provider');
 
                   onClose?.();
                   message.success(t('updateAiProvider.deleteSuccess'));

package/src/app/[variants]/DesktopRouter.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { memo, useMemo } from 'react';
+import { RouterProvider } from 'react-router-dom';
+
+import BootErrorBoundary from '@/components/BootErrorBoundary';
+import Loading from '@/components/Loading/BrandTextLoading';
+import type { Locales } from '@/types/locale';
+
+import { createDesktopRouter } from './desktopRouter.config';
+
+interface ClientRouterProps {
+  locale: Locales;
+}
+
+const ClientRouter = memo<ClientRouterProps>(({ locale }) => {
+  const router = useMemo(() => createDesktopRouter(locale), [locale]);
+  return (
+    <BootErrorBoundary fallback={<Loading />}>
+      <RouterProvider router={router} />
+    </BootErrorBoundary>
+  );
+});
+
+ClientRouter.displayName = 'ClientRouter';
+
+const DesktopRouterClient = dynamic(() => Promise.resolve(ClientRouter), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+interface DesktopRouterProps {
+  locale: Locales;
+}
+
+const DesktopRouter = ({ locale }: DesktopRouterProps) => {
+  return <DesktopRouterClient locale={locale} />;
+};
+
+export default DesktopRouter;

package/src/app/[variants]/MobileRouter.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { memo, useMemo } from 'react';
+import { RouterProvider } from 'react-router-dom';
+
+import BootErrorBoundary from '@/components/BootErrorBoundary';
+import Loading from '@/components/Loading/BrandTextLoading';
+import type { Locales } from '@/types/locale';
+
+import { createMobileRouter } from './mobileRouter.config';
+
+interface ClientRouterProps {
+  locale: Locales;
+}
+
+const ClientRouter = memo<ClientRouterProps>(({ locale }) => {
+  const router = useMemo(() => createMobileRouter(locale), [locale]);
+
+  return (
+    <BootErrorBoundary fallback={<Loading />}>
+      <RouterProvider router={router} />
+    </BootErrorBoundary>
+  );
+});
+
+ClientRouter.displayName = 'ClientRouter';
+
+const MobileRouterClient = dynamic(() => Promise.resolve(ClientRouter), {
+  loading: () => <Loading />,
+  ssr: false,
+});
+interface MobileRouterProps {
+  locale: Locales;
+}
+
+const MobileRouter = ({ locale }: MobileRouterProps) => {
+  return <MobileRouterClient locale={locale} />;
+};
+
+export default MobileRouter;