@lobehub/chat 1.42.6 → 1.43.0

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

@@ -1,3 +1,3 @@
-import CircleLoading from '@/components/Loading/BrandTextLoading';
+import Loading from '@/components/Loading/BrandTextLoading';
 
-export default () => <CircleLoading />;
+export default () => <Loading />;

package/src/app/(main)/profile/(home)/Client.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { Form, type ItemGroup } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import AvatarWithUpload from '@/features/AvatarWithUpload';
+import UserAvatar from '@/features/User/UserAvatar';
+import { useUserStore } from '@/store/user';
+import { authSelectors, userProfileSelectors } from '@/store/user/selectors';
+
+type SettingItemGroup = ItemGroup;
+
+const Client = memo<{ mobile?: boolean }>(() => {
+  const [isLoginWithNextAuth] = useUserStore((s) => [authSelectors.isLoginWithNextAuth(s)]);
+  const [enableAuth, nickname, username, userProfile] = useUserStore((s) => [
+    s.enableAuth(),
+    userProfileSelectors.nickName(s),
+    userProfileSelectors.username(s),
+    userProfileSelectors.userProfile(s),
+  ]);
+
+  const [form] = Form.useForm();
+  const { t } = useTranslation('auth');
+
+  const profile: SettingItemGroup = {
+    children: [
+      {
+        children: enableAuth && isLoginWithNextAuth ? <UserAvatar /> : <AvatarWithUpload />,
+        label: t('profile.avatar'),
+        minWidth: undefined,
+      },
+      {
+        children: nickname || username,
+        label: t('profile.username'),
+        minWidth: undefined,
+      },
+      {
+        children: userProfile?.email || '--',
+        hidden: !isLoginWithNextAuth || !userProfile?.email,
+        label: t('profile.email'),
+        minWidth: undefined,
+      },
+    ],
+    title: t('tab.profile'),
+  };
+  return (
+    <Form form={form} items={[profile]} itemsType={'group'} variant={'pure'} {...FORM_STYLE} />
+  );
+});
+
+export default Client;

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

@@ -0,0 +1,38 @@
+import { Skeleton } from 'antd';
+import dynamic from 'next/dynamic';
+
+import { enableClerk } from '@/const/auth';
+import { metadataModule } from '@/server/metadata';
+import { translation } from '@/server/translation';
+import { isMobileDevice } from '@/utils/server/responsive';
+
+import Client from '../Client';
+
+// 为了兼容 ClerkProfile， 需要使用 [[...slug]]
+
+const ClerkProfile = dynamic(() => import('../../features/ClerkProfile'), {
+  loading: () => (
+    <div style={{ flex: 1 }}>
+      <Skeleton paragraph={{ rows: 8 }} title={false} />
+    </div>
+  ),
+});
+
+export const generateMetadata = async () => {
+  const { t } = await translation('auth');
+  return metadataModule.generate({
+    description: t('header.desc'),
+    title: t('tab.profile'),
+    url: '/profile',
+  });
+};
+
+const Page = async () => {
+  const mobile = await isMobileDevice();
+
+  if (enableClerk) return <ClerkProfile mobile={mobile} />;
+
+  return <Client mobile={mobile} />;
+};
+
+export default Page;

package/src/app/(main)/profile/@category/default.tsx

@@ -0,0 +1,9 @@
+import CategoryContent from './features/CategoryContent';
+
+const Category = () => {
+  return <CategoryContent />;
+};
+
+Category.displayName = 'SettingCategory';
+
+export default Category;

package/src/app/(main)/profile/@category/features/CategoryContent.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { memo } from 'react';
+import urlJoin from 'url-join';
+
+import Menu from '@/components/Menu';
+import { useActiveSettingsKey } from '@/hooks/useActiveTabKey';
+import { useQuery } from '@/hooks/useQuery';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { ProfileTabs, SettingsTabs } from '@/store/global/initialState';
+
+import { useCategory } from '../../hooks/useCategory';
+
+const CategoryContent = memo<{ modal?: boolean }>(({ modal }) => {
+  const activeTab = useActiveSettingsKey();
+  const { tab = SettingsTabs.Common } = useQuery();
+  const cateItems = useCategory();
+  const router = useQueryRoute();
+
+  return (
+    <Menu
+      items={cateItems}
+      onClick={({ key }) => {
+        const activeKey = key === ProfileTabs.Profile ? '/' : key;
+        if (modal) {
+          router.replace('/profile/modal', { query: { tab: activeKey } });
+        } else {
+          router.push(urlJoin('/profile', activeKey));
+        }
+      }}
+      selectable
+      selectedKeys={[modal ? tab : (activeTab as any)]}
+      variant={'compact'}
+    />
+  );
+});
+
+export default CategoryContent;

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

@@ -0,0 +1,85 @@
+'use client';
+
+import { ActionIcon, ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
+import { Drawer, type DrawerProps } from 'antd';
+import { createStyles } from 'antd-style';
+import { Menu } from 'lucide-react';
+import { ReactNode, memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import BrandWatermark from '@/components/BrandWatermark';
+
+const useStyles = createStyles(({ token, css }) => ({
+  container: css`
+    position: relative;
+    flex: none;
+    height: 54px;
+    background: ${token.colorBgContainer};
+  `,
+  title: css`
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 1.2;
+  `,
+}));
+
+interface HeaderProps extends Pick<DrawerProps, 'getContainer'> {
+  children: ReactNode;
+  title: ReactNode;
+}
+
+const Header = memo<HeaderProps>(({ children, getContainer, title }) => {
+  const [open, setOpen] = useState(false);
+  const { styles, theme } = useStyles();
+
+  return (
+    <>
+      <ChatHeader
+        className={styles.container}
+        left={
+          <ChatHeaderTitle
+            title={
+              <Flexbox align={'center'} className={styles.title} gap={4} horizontal>
+                <ActionIcon
+                  color={theme.colorText}
+                  icon={Menu}
+                  onClick={() => setOpen(true)}
+                  size={{ blockSize: 32, fontSize: 18 }}
+                />
+                {title}
+              </Flexbox>
+            }
+          />
+        }
+      />
+      <Drawer
+        bodyStyle={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 20,
+          justifyContent: 'space-between',
+          padding: 16,
+        }}
+        getContainer={getContainer}
+        headerStyle={{ display: 'none' }}
+        maskStyle={{ background: 'transparent' }}
+        onClick={() => setOpen(false)}
+        onClose={() => setOpen(false)}
+        open={open}
+        placement={'left'}
+        rootStyle={{ position: 'absolute' }}
+        style={{
+          background: theme.colorBgContainer,
+          borderRight: `1px solid ${theme.colorSplit}`,
+        }}
+        width={260}
+        zIndex={10}
+      >
+        {children}
+        <BrandWatermark paddingInline={12} />
+      </Drawer>
+    </>
+  );
+});
+
+export default Header;

package/src/app/(main)/profile/_layout/Desktop/SideBar.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { createStyles } from 'antd-style';
+import { useTranslation } from 'react-i18next';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+
+import BrandWatermark from '@/components/BrandWatermark';
+import PanelTitle from '@/components/PanelTitle';
+
+const useStyles = createStyles(({ token, css }) => ({
+  container: css`
+    padding-block: 0 16px;
+    padding-inline: 12px;
+    background: ${token.colorBgContainer};
+    border-inline-end: 1px solid ${token.colorBorder};
+  `,
+}));
+
+interface SidebarLayoutProps extends FlexboxProps {
+  desc?: string;
+  title?: string;
+}
+
+const SidebarLayout = ({ children, className, title, desc, ...rest }: SidebarLayoutProps) => {
+  const { cx, styles } = useStyles();
+  const { t } = useTranslation('auth');
+  return (
+    <Flexbox
+      className={cx(styles.container, className)}
+      flex={'none'}
+      gap={20}
+      width={280}
+      {...rest}
+    >
+      <PanelTitle desc={desc || t('header.desc')} title={title || t('header.title')} />
+      {children}
+      <BrandWatermark paddingInline={12} />
+    </Flexbox>
+  );
+};
+
+export default SidebarLayout;

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

@@ -0,0 +1,48 @@
+'use client';
+
+import { useResponsive } from 'antd-style';
+import { memo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import InitClientDB from '@/features/InitClientDB';
+import Footer from '@/features/Setting/Footer';
+import SettingContainer from '@/features/Setting/SettingContainer';
+import { useActiveProfileKey } from '@/hooks/useActiveTabKey';
+
+import { LayoutProps } from '../type';
+import Header from './Header';
+import SideBar from './SideBar';
+
+const Layout = memo<LayoutProps>(({ children, category }) => {
+  const ref = useRef<any>(null);
+  const { md = true } = useResponsive();
+  const { t } = useTranslation('auth');
+  const activeKey = useActiveProfileKey();
+
+  return (
+    <>
+      <Flexbox
+        height={'100%'}
+        horizontal={md}
+        ref={ref}
+        style={{ position: 'relative' }}
+        width={'100%'}
+      >
+        {md ? (
+          <SideBar>{category}</SideBar>
+        ) : (
+          <Header getContainer={() => ref.current} title={<>{t(`tab.${activeKey}`)}</>}>
+            {category}
+          </Header>
+        )}
+        <SettingContainer addonAfter={<Footer />}>{children}</SettingContainer>
+      </Flexbox>
+      <InitClientDB />
+    </>
+  );
+});
+
+Layout.displayName = 'DesktopProfileLayout';
+
+export default Layout;

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

@@ -1,22 +1,40 @@
 'use client';
 
 import { MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
-import { usePathname, useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
+import { useActiveProfileKey } from '@/hooks/useActiveTabKey';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
 
+import ShareButton from '../../stats/features/ShareButton';
+
 const Header = memo(() => {
   const { t } = useTranslation('auth');
 
   const router = useRouter();
-  const pathname = usePathname();
-  const isSecurity = pathname.startsWith('/prifile/security');
+  const activeSettingsKey = useActiveProfileKey();
+  const isStats = activeSettingsKey === 'stats';
+
+  const handleBackClick = () => {
+    router.push('/me/profile');
+  };
+
   return (
     <MobileNavBar
-      center={<MobileNavBarTitle title={t(isSecurity ? 'security' : 'profile')} />}
-      onBackClick={() => router.push('/me/profile')}
+      center={
+        <MobileNavBarTitle
+          title={
+            <Flexbox align={'center'} gap={8} horizontal>
+              <span style={{ lineHeight: 1.2 }}> {t(`tab.${activeSettingsKey}`)}</span>
+            </Flexbox>
+          }
+        />
+      }
+      onBackClick={handleBackClick}
+      right={isStats ? <ShareButton mobile /> : undefined}
       showBackButton
       style={mobileHeaderSticky}
     />

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

@@ -1,16 +1,23 @@
-import { PropsWithChildren } from 'react';
+import MobileContentLayout from '@/components/server/MobileNavLayout';
+import InitClientDB from '@/features/InitClientDB';
+import Footer from '@/features/Setting/Footer';
 
+import { LayoutProps } from '../type';
 import Header from './Header';
 
-const Layout = ({ children }: PropsWithChildren) => {
+const Layout = ({ children }: LayoutProps) => {
   return (
     <>
-      <Header />
-      {children}
+      <MobileContentLayout header={<Header />}>
+        {children}
+        <div style={{ flex: 1 }} />
+        <Footer />
+      </MobileContentLayout>
+      <InitClientDB />
     </>
   );
 };
 
-Layout.displayName = 'ProfileMobileLayout';
+Layout.displayName = 'MobileProfileLayout';
 
 export default Layout;

package/src/app/(main)/profile/_layout/type.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+
+export interface LayoutProps {
+  category: ReactNode;
+  children: ReactNode;
+}

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

@@ -0,0 +1,5 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/Error'));

package/src/app/(main)/profile/features/ClerkProfile.tsx

@@ -0,0 +1,72 @@
+'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, responsive, token }) =>
+    ({
+      cardBox: css`
+        width: 100%;
+        min-width: 100%;
+        background: transparent;
+      `,
+      footer: css`
+        display: none !important;
+      `,
+      headerTitle: css`
+        ${responsive.mobile} {
+          margin: 0;
+          padding: 16px;
+
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 24px;
+
+          opacity: 0.5;
+        }
+      `,
+      navbar: css`
+        display: none !important;
+      `,
+      navbarMobileMenuRow: css`
+        display: none !important;
+      `,
+      pageScrollBox: css`
+        padding: 0;
+      `,
+      profileSection: css`
+        ${responsive.mobile} {
+          padding-inline: 16px;
+          background: ${token.colorBgContainer};
+        }
+      `,
+      rootBox: css`
+        width: 100%;
+        height: 100%;
+      `,
+      scrollBox: css`
+        background: transparent;
+      `,
+    }) as Partial<{
+      // eslint-disable-next-line unused-imports/no-unused-vars
+      [k in keyof ElementsConfig]: any;
+    }>,
+);
+
+const Client = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const { styles } = useStyles(mobile);
+
+  return (
+    <UserProfile
+      appearance={{
+        elements: styles,
+      }}
+      path={'/profile'}
+    />
+  );
+});
+
+export default Client;

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

@@ -0,0 +1,51 @@
+import { Icon } from '@lobehub/ui';
+import { ChartColumnBigIcon, ShieldCheck, UserCircle } from 'lucide-react';
+import Link from 'next/link';
+import { useTranslation } from 'react-i18next';
+
+import type { MenuProps } from '@/components/Menu';
+import { isDeprecatedEdition } from '@/const/version';
+import { ProfileTabs } from '@/store/global/initialState';
+import { useUserStore } from '@/store/user';
+import { authSelectors } from '@/store/user/slices/auth/selectors';
+
+export const useCategory = () => {
+  const { t } = useTranslation('auth');
+  const [enableAuth, isLoginWithClerk] = useUserStore((s) => [
+    authSelectors.enabledAuth(s),
+    authSelectors.isLoginWithClerk(s),
+  ]);
+
+  const cateItems: MenuProps['items'] = [
+    {
+      icon: <Icon icon={UserCircle} />,
+      key: ProfileTabs.Profile,
+      label: (
+        <Link href={'/profile'} onClick={(e) => e.preventDefault()}>
+          {t('tab.profile')}
+        </Link>
+      ),
+    },
+    enableAuth &&
+      isLoginWithClerk && {
+        icon: <Icon icon={ShieldCheck} />,
+        key: ProfileTabs.Security,
+        label: (
+          <Link href={'/profile/security'} onClick={(e) => e.preventDefault()}>
+            {t('tab.security')}
+          </Link>
+        ),
+      },
+    !isDeprecatedEdition && {
+      icon: <Icon icon={ChartColumnBigIcon} />,
+      key: ProfileTabs.Stats,
+      label: (
+        <Link href={'/profile/stats'} onClick={(e) => e.preventDefault()}>
+          {t('tab.stats')}
+        </Link>
+      ),
+    },
+  ].filter(Boolean) as MenuProps['items'];
+
+  return cateItems;
+};

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

@@ -1,21 +1,11 @@
-import { notFound } from 'next/navigation';
-import { PropsWithChildren } from 'react';
+import ServerLayout from '@/components/server/ServerLayout';
 
-import { enableClerk } from '@/const/auth';
-import { isMobileDevice } from '@/utils/server/responsive';
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+import { LayoutProps } from './_layout/type';
 
-import MobileLayout from './_layout/Mobile';
+const ProfileLayout = ServerLayout<LayoutProps>({ Desktop, Mobile });
 
-const Layout = async ({ children }: PropsWithChildren) => {
-  if (!enableClerk) return notFound();
+ProfileLayout.displayName = 'ProfileLayout';
 
-  const mobile = await isMobileDevice();
-
-  if (mobile) return <MobileLayout>{children}</MobileLayout>;
-
-  return children;
-};
-
-Layout.displayName = 'ProfileLayout';
-
-export default Layout;
+export default ProfileLayout;

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

@@ -1,23 +1,3 @@
-import { Flexbox } from 'react-layout-kit';
+import Loading from '@/components/Loading/BrandTextLoading';
 
-import SkeletonLoading from '@/components/Loading/SkeletonLoading';
-import { isMobileDevice } from '@/utils/server/responsive';
-
-const Loading = async () => {
-  const mobile = await 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;
+export default () => <Loading />;

package/src/app/(main)/profile/not-found.tsx

@@ -0,0 +1,3 @@
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/404'));

package/src/app/(main)/profile/security/page.tsx

@@ -0,0 +1,34 @@
+import { Skeleton } from 'antd';
+import dynamic from 'next/dynamic';
+import { notFound } from 'next/navigation';
+
+import { enableClerk } from '@/const/auth';
+import { metadataModule } from '@/server/metadata';
+import { translation } from '@/server/translation';
+import { isMobileDevice } from '@/utils/server/responsive';
+
+const ClerkProfile = dynamic(() => import('../features/ClerkProfile'), {
+  loading: () => (
+    <div style={{ flex: 1 }}>
+      <Skeleton paragraph={{ rows: 8 }} title={false} />
+    </div>
+  ),
+});
+
+export const generateMetadata = async () => {
+  const { t } = await translation('auth');
+  return metadataModule.generate({
+    description: t('header.desc'),
+    title: t('tab.security'),
+    url: '/profile/security',
+  });
+};
+
+const Page = async () => {
+  if (!enableClerk) return notFound();
+  const mobile = await isMobileDevice();
+
+  return <ClerkProfile mobile={mobile} />;
+};
+
+export default Page;