@lobehub/chat 0.157.2 → 0.158.0

package/src/app/(main)/(mobile)/me/settings/page.tsx

@@ -0,0 +1,17 @@
+import { redirect } from 'next/navigation';
+
+import { isMobileDevice } from '@/utils/responsive';
+
+import Category from './features/Category';
+
+const Page = () => {
+  const mobile = isMobileDevice();
+
+  if (!mobile) return redirect('/settings/common');
+
+  return <Category />;
+};
+
+Page.displayName = 'MeSettings';
+
+export default Page;

package/src/app/(main)/_layout/Mobile.tsx

@@ -1,24 +1,25 @@
 'use client';
 
 import { usePathname } from 'next/navigation';
+import qs from 'query-string';
 import { memo } from 'react';
 
 import { useQuery } from '@/hooks/useQuery';
 
 import { LayoutProps } from './type';
 
-const MOBILE_IGNORE_NAV_ROUTES = ['/settings/', '/chat/'];
+const MOBILE_NAV_ROUTES = new Set(['/chat', '/market', '/me']);
 
 const Layout = memo(({ children, nav }: LayoutProps) => {
   const { showMobileWorkspace } = useQuery();
   const pathname = usePathname();
-  const hideNav =
-    showMobileWorkspace || MOBILE_IGNORE_NAV_ROUTES.some((path) => pathname.startsWith(path));
+  const { url } = qs.parseUrl(pathname);
+  const showNav = !showMobileWorkspace && MOBILE_NAV_ROUTES.has(url);
 
   return (
     <>
       {children}
-      {!hideNav && nav}
+      {showNav && nav}
     </>
   );
 });

package/src/app/(main)/profile/[[...slugs]]/Client.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { UserProfile } from '@clerk/nextjs';
+import { ElementsConfig } from '@clerk/types';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+export const useStyles = createStyles(
+  ({ css, token, cx }, mobile: boolean) =>
+    ({
+      cardBox: css`
+        width: 100%;
+        max-width: unset;
+        height: 100%;
+
+        border: unset;
+        border-radius: unset;
+        box-shadow: unset;
+      `,
+      footer: cx(
+        mobile &&
+          css`
+            display: none;
+          `,
+      ),
+      navbar: css`
+        flex: none;
+
+        width: 280px;
+        max-width: unset;
+        margin-right: 0;
+        padding: 24px 12px 16px;
+
+        background: ${token.colorBgContainer};
+        border-right: 1px solid ${token.colorSplit};
+      `,
+      navbarMobileMenuRow: cx(
+        mobile &&
+          css`
+            display: none;
+          `,
+      ),
+      pageScrollBox: css`
+        align-self: center;
+        width: 100%;
+        max-width: 1024px;
+      `,
+      rootBox: css`
+        width: 100%;
+        height: 100%;
+      `,
+      scrollBox: css`
+        background: ${token.colorBgLayout};
+        border: unset;
+        border-radius: unset;
+      `,
+    }) as Partial<{
+      [k in keyof ElementsConfig]: any;
+    }>,
+);
+
+const Client = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const { styles } = useStyles(mobile);
+
+  return (
+    <UserProfile
+      appearance={{
+        elements: styles,
+      }}
+    />
+  );
+});
+
+export default Client;

package/src/app/(main)/profile/[[...slugs]]/page.tsx

@@ -0,0 +1,18 @@
+import { translation } from '@/server/translation';
+import { isMobileDevice } from '@/utils/responsive';
+
+import Client from './Client';
+
+export const generateMetadata = async () => {
+  const { t } = await translation('common');
+  return {
+    title: t('userButton.profile'),
+  };
+};
+
+const Page = () => {
+  const mobile = isMobileDevice();
+  return <Client mobile={mobile} />;
+};
+
+export default Page;

package/src/app/(main)/profile/_layout/Mobile/Header.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
+import { usePathname, useRouter } from 'next/navigation';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { mobileHeaderSticky } from '@/styles/mobileHeader';
+
+const Header = memo(() => {
+  const { t } = useTranslation('auth');
+
+  const router = useRouter();
+  const pathname = usePathname();
+  const isSecurity = pathname.startsWith('/prifile/security');
+  return (
+    <MobileNavBar
+      center={<MobileNavBarTitle title={t(isSecurity ? 'security' : 'profile')} />}
+      onBackClick={() => router.push('/me/profile')}
+      showBackButton
+      style={mobileHeaderSticky}
+    />
+  );
+});
+
+export default Header;

package/src/app/(main)/profile/_layout/Mobile/index.tsx

@@ -0,0 +1,16 @@
+import { PropsWithChildren } from 'react';
+
+import Header from './Header';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <>
+      <Header />
+      {children}
+    </>
+  );
+};
+
+Layout.displayName = 'ProfileMobileLayout';
+
+export default Layout;

package/src/app/(main)/profile/layout.tsx

@@ -0,0 +1,20 @@
+import { notFound } from 'next/navigation';
+import { PropsWithChildren } from 'react';
+
+import { enableClerk } from '@/const/auth';
+import { isMobileDevice } from '@/utils/responsive';
+
+import MobileLayout from './_layout/Mobile';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  if (!enableClerk) return notFound();
+
+  const mobile = isMobileDevice();
+  if (mobile) return <MobileLayout>{children}</MobileLayout>;
+
+  return children;
+};
+
+Layout.displayName = 'ProfileLayout';
+
+export default Layout;

package/src/app/(main)/profile/loading.tsx

@@ -0,0 +1,23 @@
+import { Flexbox } from 'react-layout-kit';
+
+import SkeletonLoading from '@/components/SkeletonLoading';
+import { isMobileDevice } from '@/utils/responsive';
+
+const Loading = () => {
+  const mobile = isMobileDevice();
+  if (mobile) return <SkeletonLoading paragraph={{ rows: 8 }} />;
+  return (
+    <Flexbox horizontal style={{ position: 'relative' }} width={'100%'}>
+      <Flexbox padding={24} width={256}>
+        <SkeletonLoading paragraph={{ rows: 8 }} />;
+      </Flexbox>
+      <Flexbox align={'center'} flex={1}>
+        <Flexbox padding={24} style={{ maxWidth: 1024 }} width={'100%'}>
+          <SkeletonLoading paragraph={{ rows: 8 }} />;
+        </Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+export default Loading;

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

@@ -7,6 +7,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { enableAuth } from '@/const/auth';
 import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
 import { SettingsTabs } from '@/store/global/initialState';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
@@ -32,7 +33,7 @@ const Header = memo(() => {
           }
         />
       }
-      onBackClick={() => router.push('/me')}
+      onBackClick={() => router.push(enableAuth ? '/me/settings' : '/me')}
       showBackButton
       style={mobileHeaderSticky}
     />

package/src/app/(main)/settings/hooks/useCategory.tsx

@@ -9,26 +9,20 @@ import type { MenuProps } from '@/components/Menu';
 import { SettingsTabs } from '@/store/global/initialState';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
-interface UseCategoryOptions {
-  mobile?: boolean;
-}
-
-export const useCategory = ({ mobile }: UseCategoryOptions = {}) => {
+export const useCategory = () => {
   const { t } = useTranslation('setting');
   const { enableWebrtc, showLLM } = useServerConfigStore(featureFlagsSelectors);
 
-  const iconSize = mobile ? { fontSize: 20 } : undefined;
-
   const cateItems: MenuProps['items'] = useMemo(
     () =>
       [
         {
-          icon: <Icon icon={Settings2} size={iconSize} />,
+          icon: <Icon icon={Settings2} />,
           key: SettingsTabs.Common,
           label: t('tab.common'),
         },
         enableWebrtc && {
-          icon: <Icon icon={Cloudy} size={iconSize} />,
+          icon: <Icon icon={Cloudy} />,
           key: SettingsTabs.Sync,
           label: (
             <Flexbox align={'center'} gap={8} horizontal>
@@ -40,18 +34,18 @@ export const useCategory = ({ mobile }: UseCategoryOptions = {}) => {
           ),
         },
         showLLM && {
-          icon: <Icon icon={Brain} size={iconSize} />,
+          icon: <Icon icon={Brain} />,
           key: SettingsTabs.LLM,
           label: t('tab.llm'),
         },
-        { icon: <Icon icon={Mic2} size={iconSize} />, key: SettingsTabs.TTS, label: t('tab.tts') },
+        { icon: <Icon icon={Mic2} />, key: SettingsTabs.TTS, label: t('tab.tts') },
         {
-          icon: <Icon icon={Bot} size={iconSize} />,
+          icon: <Icon icon={Bot} />,
           key: SettingsTabs.Agent,
           label: t('tab.agent'),
         },
         {
-          icon: <Icon icon={Info} size={iconSize} />,
+          icon: <Icon icon={Info} />,
           key: SettingsTabs.About,
           label: t('tab.about'),
         },

package/src/app/@modal/layout.tsx

@@ -1,12 +1,14 @@
 'use client';
 
 import { Modal } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
 import { useRouter } from 'next/navigation';
 import { PropsWithChildren, memo, useState } from 'react';
 
 const SessionSettingsModal = memo<PropsWithChildren>(({ children }) => {
   const [open, setOpen] = useState(true);
   const router = useRouter();
+  const theme = useTheme();
 
   return (
     <Modal
@@ -18,6 +20,7 @@ const SessionSettingsModal = memo<PropsWithChildren>(({ children }) => {
       open={open}
       styles={{
         body: { display: 'flex', minHeight: 'min(75vh, 750px)', overflow: 'hidden', padding: 0 },
+        content: { border: 'none', boxShadow: `0 0 0 1px ${theme.colorBorderSecondary}` },
       }}
       title={false}
       width={1024}

package/src/components/Cell/Divider.tsx

@@ -1,14 +1,15 @@
 'use client';
 
 import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
 import { memo } from 'react';
 
 const useStyles = createStyles(
-  ({ css, token }) => css`
+  ({ css, token, isDarkMode }) => css`
     flex: none;
     width: 100%;
     height: 6px;
-    background: ${token.colorFillTertiary};
+    background: ${isDarkMode ? rgba(token.colorFillTertiary, 0.04) : token.colorFillTertiary};
   `,
 );
 

package/src/components/Cell/index.tsx

@@ -1,42 +1,52 @@
-import { Icon, List } from '@lobehub/ui';
+import { Icon, IconProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { ChevronRight } from 'lucide-react';
 import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 
-const { Item } = List;
+import Divider from './Divider';
 
 const useStyles = createStyles(({ css, token }) => ({
   container: css`
     position: relative;
-
-    gap: 12px;
-
-    padding: 16px !important;
-
-    background: ${token.colorBgLayout};
+    font-size: 15px;
     border-radius: 0;
+
+    &:active {
+      background: ${token.colorFillTertiary};
+    }
   `,
 }));
 
 export interface CellProps {
-  icon: ReactNode;
-  label: string | ReactNode;
+  icon?: IconProps['icon'];
+  key?: string | number;
+  label?: string | ReactNode;
   onClick?: () => void;
+  type?: 'divider';
 }
 
-const Cell = memo<CellProps>(({ label, icon, onClick }) => {
-  const { cx, styles } = useStyles();
+const Cell = memo<CellProps>(({ label, icon, onClick, type }) => {
+  const { cx, styles, theme } = useStyles();
+
+  if (type === 'divider') return <Divider />;
 
   return (
-    <Item
-      active={false}
-      avatar={icon}
+    <Flexbox
+      align={'center'}
       className={cx(styles.container)}
+      gap={12}
+      horizontal
+      justify={'space-between'}
       onClick={onClick}
-      title={label as string}
+      padding={16}
     >
-      <Icon icon={ChevronRight} size={{ fontSize: 16 }} />
-    </Item>
+      <Flexbox align={'center'} gap={12} horizontal>
+        {icon && <Icon color={theme.colorPrimaryBorder} icon={icon} size={{ fontSize: 20 }} />}
+        {label}
+      </Flexbox>
+      <Icon color={theme.colorBorder} icon={ChevronRight} size={{ fontSize: 16 }} />
+    </Flexbox>
   );
 });
 

package/src/features/User/DataStatistics.tsx

@@ -13,6 +13,7 @@ import useSWR from 'swr';
 import { messageService } from '@/services/message';
 import { sessionService } from '@/services/session';
 import { topicService } from '@/services/topic';
+import { useServerConfigStore } from '@/store/serverConfig';
 
 const useStyles = createStyles(({ css, token }) => ({
   card: css`
@@ -53,6 +54,7 @@ const formatNumber = (num: any) => {
 };
 
 const DataStatistics = memo<Omit<FlexboxProps, 'children'>>(({ style, ...rest }) => {
+  const mobile = useServerConfigStore((s) => s.isMobile);
   // sessions
   const { data: sessions, isLoading: sessionsLoading } = useSWR(
     'count-sessions',
@@ -111,7 +113,7 @@ const DataStatistics = memo<Omit<FlexboxProps, 'children'>>(({ style, ...rest })
             <Flexbox
               align={'center'}
               className={styles.card}
-              flex={showBadge ? 2 : 1}
+              flex={showBadge && !mobile ? 2 : 1}
               gap={4}
               horizontal
               justify={'space-between'}

package/src/features/User/UserLoginOrSignup.tsx

@@ -3,7 +3,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import UserInfo from '@/features/User/UserInfo';
+import UserInfo from './UserInfo';
 
 const UserLoginOrSignup = memo<{ onClick: () => void }>(({ onClick }) => {
   const { t } = useTranslation('auth');
@@ -11,7 +11,7 @@ const UserLoginOrSignup = memo<{ onClick: () => void }>(({ onClick }) => {
   return (
     <>
       <UserInfo />
-      <Flexbox paddingBlock={'0 12px'} paddingInline={16} width={'100%'}>
+      <Flexbox paddingBlock={12} paddingInline={16} width={'100%'}>
         <Button block onClick={onClick} type={'primary'}>
           {t('loginOrSignup')}
         </Button>

package/src/features/User/UserPanel/PanelContent.tsx

@@ -45,13 +45,19 @@ const PanelContent = memo<{ closePopover: () => void }>(({ closePopover }) => {
   return (
     <Flexbox gap={2} style={{ minWidth: 300 }}>
       {!enableAuth ? (
-        <UserInfo />
+        <>
+          <UserInfo />
+          <DataStatistics />
+        </>
       ) : isLoginWithAuth ? (
-        <UserInfo onClick={handleOpenProfile} />
+        <>
+          <UserInfo onClick={handleOpenProfile} />
+          <DataStatistics />
+        </>
       ) : (
         <UserLoginOrSignup onClick={handleSignIn} />
       )}
-      <DataStatistics />
+
       <Menu items={mainItems} onClick={closePopover} />
       <Flexbox
         align={'center'}

package/src/features/User/UserPanel/useMenu.tsx

@@ -57,7 +57,21 @@ export const useMenu = () => {
   const hasNewVersion = useNewVersion();
   const openSettings = useOpenSettings();
   const { t } = useTranslation(['common', 'setting', 'auth']);
-  const isSignedIn = useUserStore(authSelectors.isLoginWithAuth);
+  const [isLogin, isLoginWithAuth, isLoginWithClerk, openUserProfile] = useUserStore((s) => [
+    authSelectors.isLogin(s),
+    authSelectors.isLoginWithAuth(s),
+    authSelectors.isLoginWithClerk(s),
+    s.openUserProfile,
+  ]);
+
+  const profile: MenuProps['items'] = [
+    {
+      icon: <Icon icon={CircleUserRound} />,
+      key: 'profile',
+      label: t('userPanel.profile'),
+      onClick: () => openUserProfile(),
+    },
+  ];
 
   const settings: MenuProps['items'] = [
     {
@@ -82,7 +96,7 @@ export const useMenu = () => {
     },
   ];
 
-  const exports: MenuProps['items'] = [
+  const data: MenuProps['items'] = [
     {
       icon: <Icon icon={HardDriveUpload} />,
       key: 'import',
@@ -123,22 +137,6 @@ export const useMenu = () => {
     },
   ];
 
-  const openUserProfile = useUserStore((s) => s.openUserProfile);
-
-  const planAndBilling: MenuProps['items'] = [
-    {
-      icon: <Icon icon={CircleUserRound} />,
-      key: 'profile',
-      label: t('userPanel.profile'),
-      onClick: () => {
-        openUserProfile();
-      },
-    },
-    {
-      type: 'divider',
-    },
-  ];
-
   const helps: MenuProps['items'] = [
     {
       icon: <Icon icon={DiscordIcon} />,
@@ -192,19 +190,21 @@ export const useMenu = () => {
     {
       type: 'divider',
     },
-    ...settings,
-    ...(isSignedIn ? planAndBilling : []),
-    ...exports,
+    ...(isLoginWithClerk ? profile : []),
+    ...(isLogin ? settings : []),
+    ...(isLogin ? data : []),
     ...helps,
   ].filter(Boolean) as MenuProps['items'];
 
-  const logoutItems: MenuProps['items'] = [
-    {
-      icon: <Icon icon={LogOut} />,
-      key: 'logout',
-      label: <span>{t('signout', { ns: 'auth' })}</span>,
-    },
-  ];
+  const logoutItems: MenuProps['items'] = isLoginWithAuth
+    ? [
+        {
+          icon: <Icon icon={LogOut} />,
+          key: 'logout',
+          label: <span>{t('signout', { ns: 'auth' })}</span>,
+        },
+      ]
+    : [];
 
   return { logoutItems, mainItems };
-};
+};

package/src/features/User/__tests__/PanelContent.test.tsx

@@ -57,6 +57,10 @@ vi.mock('../UserLoginOrSignup', () => ({
   )),
 }));
 
+vi.mock('../DataStatistics', () => ({
+  default: vi.fn(() => <div>Mocked DataStatistics</div>),
+}));
+
 // 定义一个变量来存储 enableAuth 的值
 let enableAuth = true;
 
@@ -83,6 +87,7 @@ describe('PanelContent', () => {
       render(<PanelContent closePopover={closePopover} />);
 
       expect(screen.getByText('Mocked UserInfo')).toBeInTheDocument();
+      expect(screen.getByText('Mocked DataStatistics')).toBeInTheDocument();
       expect(screen.queryByText('Mocked SignInBlock')).not.toBeInTheDocument();
     });
 
@@ -94,6 +99,7 @@ describe('PanelContent', () => {
       render(<PanelContent closePopover={closePopover} />);
 
       expect(screen.getByText('Mocked SignInBlock')).toBeInTheDocument();
+      expect(screen.queryByText('Mocked DataStatistics')).not.toBeInTheDocument();
       expect(screen.queryByText('Mocked UserInfo')).not.toBeInTheDocument();
     });
 
@@ -127,6 +133,7 @@ describe('PanelContent', () => {
       render(<PanelContent closePopover={closePopover} />);
 
       expect(screen.getByText('Mocked UserInfo')).toBeInTheDocument();
+      expect(screen.getByText('Mocked DataStatistics')).toBeInTheDocument();
       expect(screen.queryByText('Mocked SignInBlock')).not.toBeInTheDocument();
     });