✨ feat: Update nextAuth profile

src/app/(main)/(mobile)/me/(home)/features/useCategory.tsx

@@ -122,8 +122,8 @@ export const useCategory = () => {
     {
       type: 'divider',
     },
-    ...(enableAuth ? (isLoginWithAuth ? settings : []) : settingsWithoutAuth),
     ...(!enableAuth || (enableAuth && isLoginWithAuth) ? profile : []),
+    ...(enableAuth ? (isLoginWithAuth ? settings : []) : settingsWithoutAuth),
     /* ↓ cloud slot ↓ */
 
     /* ↑ cloud slot ↑ */

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

@@ -0,0 +1,54 @@
+'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 [enableAuth, isLoginWithNextAuth] = useUserStore((s) => [
+    authSelectors.enabledAuth(s),
+    authSelectors.isLoginWithNextAuth(s),
+  ]);
+  const [nickname, username, userProfile] = useUserStore((s) => [
+    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,
+        label: t('profile.email'),
+      },
+    ],
+    title: t('tab.profile'),
+  };
+  return (
+    <Form form={form} items={[profile]} itemsType={'group'} variant={'pure'} {...FORM_STYLE} />
+  );
+});
+
+export default Client;

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

@@ -6,6 +6,10 @@ 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 }}>
@@ -28,7 +32,7 @@ const Page = async () => {
 
   if (enableClerk) return <ClerkProfile mobile={mobile} />;
 
-  return <div>TODO</div>;
+  return <Client mobile={mobile} />;
 };
 
 export default Page;

src/app/(main)/profile/stats/Client.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { Form, type ItemGroup } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+
+type SettingItemGroup = ItemGroup;
+
+const Client = memo<{ mobile?: boolean }>(() => {
+  const [form] = Form.useForm();
+  const { t } = useTranslation('auth');
+
+  const overview: SettingItemGroup = {
+    children: [],
+    title: t('tab.stats'),
+  };
+
+  return (
+    <Form form={form} items={[overview]} itemsType={'group'} variant={'pure'} {...FORM_STYLE} />
+  );
+});
+
+export default Client;

src/app/(main)/profile/stats/page.tsx

@@ -1,6 +1,8 @@
 import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
 
+import Client from './Client';
+
 export const generateMetadata = async () => {
   const { t } = await translation('auth');
   return metadataModule.generate({
@@ -11,7 +13,7 @@ export const generateMetadata = async () => {
 };
 
 const Page = async () => {
-  return <div>TODO</div>;
+  return <Client />;
 };
 
 export default Page;

src/app/(main)/settings/common/features/Theme/index.tsx

@@ -11,14 +11,9 @@ import { useTranslation } from 'react-i18next';
 import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { imageUrl } from '@/const/url';
-import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { Locales, localeOptions } from '@/locales/resources';
 import { useUserStore } from '@/store/user';
-import {
-  authSelectors,
-  settingsSelectors,
-  userGeneralSettingsSelectors,
-} from '@/store/user/selectors';
+import { settingsSelectors, userGeneralSettingsSelectors } from '@/store/user/selectors';
 import { switchLang } from '@/utils/client/switchLang';
 
 import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from './ThemeSwatches';
@@ -31,11 +26,7 @@ const Theme = memo(() => {
   const [form] = Form.useForm();
   const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
   const themeMode = useUserStore(userGeneralSettingsSelectors.currentThemeMode);
-  const [setThemeMode, setSettings, enableAuth] = useUserStore((s) => [
-    s.switchThemeMode,
-    s.setSettings,
-    authSelectors.enabledAuth(s),
-  ]);
+  const [setThemeMode, setSettings] = useUserStore((s) => [s.switchThemeMode, s.setSettings]);
 
   useSyncSettings(form);
 
@@ -46,12 +37,6 @@ const Theme = memo(() => {
 
   const theme: SettingItemGroup = {
     children: [
-      {
-        children: <AvatarWithUpload />,
-        hidden: enableAuth,
-        label: t('settingTheme.avatar.title'),
-        minWidth: undefined,
-      },
       {
         children: (
           <SelectWithImg

src/features/User/UserPanel/useMenu.tsx

@@ -236,8 +236,8 @@ export const useMenu = () => {
     {
       type: 'divider',
     },
-    ...(isLogin ? settings : []),
     ...(!enableAuth || (enableAuth && isLoginWithAuth) ? profile : []),
+    ...(isLogin ? settings : []),
     /* ↓ cloud slot ↓ */
 
     /* ↑ cloud slot ↑ */

src/locales/default/auth.ts

@@ -5,6 +5,11 @@ export default {
   },
   login: '登录',
   loginOrSignup: '登录 / 注册',
+  profile: {
+    avatar: '头像',
+    email: '电子邮件地址',
+    username: '用户名',
+  },
   signout: '退出登录',
   signup: '注册',
   tab: {