From d890e933d0cec27ee6f67037d44df3efbd09164c Mon Sep 17 00:00:00 2001 From: canisminor1990 Date: Mon, 23 Dec 2024 18:07:25 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Update=20nextAuth=20profile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../me/(home)/features/useCategory.tsx | 2 +- src/app/(main)/profile/(home)/Client.tsx | 54 +++++++++++++++++++ .../profile/(home)/[[...slugs]]/page.tsx | 6 ++- src/app/(main)/profile/stats/Client.tsx | 25 +++++++++ src/app/(main)/profile/stats/page.tsx | 4 +- .../settings/common/features/Theme/index.tsx | 19 +------ src/features/User/UserPanel/useMenu.tsx | 2 +- src/locales/default/auth.ts | 5 ++ 8 files changed, 96 insertions(+), 21 deletions(-) create mode 100644 src/app/(main)/profile/(home)/Client.tsx create mode 100644 src/app/(main)/profile/stats/Client.tsx diff --git a/src/app/(main)/(mobile)/me/(home)/features/useCategory.tsx b/src/app/(main)/(mobile)/me/(home)/features/useCategory.tsx index 4bf8f6c28e45..c89c87fb21e0 100644 --- a/src/app/(main)/(mobile)/me/(home)/features/useCategory.tsx +++ b/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 ↑ */ diff --git a/src/app/(main)/profile/(home)/Client.tsx b/src/app/(main)/profile/(home)/Client.tsx new file mode 100644 index 000000000000..e24783696107 --- /dev/null +++ b/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 ? : , + 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 ( +
+ ); +}); + +export default Client; diff --git a/src/app/(main)/profile/(home)/[[...slugs]]/page.tsx b/src/app/(main)/profile/(home)/[[...slugs]]/page.tsx index 03bc8c658381..f47fa890a214 100644 --- a/src/app/(main)/profile/(home)/[[...slugs]]/page.tsx +++ b/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: () => (
@@ -28,7 +32,7 @@ const Page = async () => { if (enableClerk) return ; - return
TODO
; + return ; }; export default Page; diff --git a/src/app/(main)/profile/stats/Client.tsx b/src/app/(main)/profile/stats/Client.tsx new file mode 100644 index 000000000000..4a56adb84f28 --- /dev/null +++ b/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 ( + + ); +}); + +export default Client; diff --git a/src/app/(main)/profile/stats/page.tsx b/src/app/(main)/profile/stats/page.tsx index 6a02d7b8990c..2789ff7f10e8 100644 --- a/src/app/(main)/profile/stats/page.tsx +++ b/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
TODO
; + return ; }; export default Page; diff --git a/src/app/(main)/settings/common/features/Theme/index.tsx b/src/app/(main)/settings/common/features/Theme/index.tsx index 7425940697df..ea506e783f4a 100644 --- a/src/app/(main)/settings/common/features/Theme/index.tsx +++ b/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: , - hidden: enableAuth, - label: t('settingTheme.avatar.title'), - minWidth: undefined, - }, { children: ( { { type: 'divider', }, - ...(isLogin ? settings : []), ...(!enableAuth || (enableAuth && isLoginWithAuth) ? profile : []), + ...(isLogin ? settings : []), /* ↓ cloud slot ↓ */ /* ↑ cloud slot ↑ */ diff --git a/src/locales/default/auth.ts b/src/locales/default/auth.ts index a8ee5b11bfcd..7e6bea07dbdf 100644 --- a/src/locales/default/auth.ts +++ b/src/locales/default/auth.ts @@ -5,6 +5,11 @@ export default { }, login: '登录', loginOrSignup: '登录 / 注册', + profile: { + avatar: '头像', + email: '电子邮件地址', + username: '用户名', + }, signout: '退出登录', signup: '注册', tab: {