From a9d6794cb7107e1220cbefcf2297c54e91305b43 Mon Sep 17 00:00:00 2001 From: zyh Date: Thu, 10 Apr 2025 13:31:12 +0000 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E7=94=A8=E6=88=B7=E4=B8=AA?= =?UTF-8?q?=E4=BA=BA=E4=BF=A1=E6=81=AF=E9=A1=B5=E9=9D=A2=EF=BC=8C=E5=B0=86?= =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AF=E7=BB=84=E4=BB=B6=E7=A7=BB?= =?UTF-8?q?=E8=87=B3=E7=8B=AC=E7=AB=8B=E6=96=87=E4=BB=B6=EF=BC=8C=E6=95=B4?= =?UTF-8?q?=E5=90=88=E7=94=A8=E6=88=B7=E4=BF=A1=E6=81=AF=E8=8E=B7=E5=8F=96?= =?UTF-8?q?=E4=B8=8E=E6=9B=B4=E6=96=B0=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E8=A1=A8=E5=8D=95=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91?= =?UTF-8?q?=EF=BC=8C=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?= =?UTF-8?q?=E5=92=8C=E4=BB=A3=E7=A0=81=E5=8F=AF=E7=BB=B4=E6=8A=A4=E6=80=A7?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/mobile/mobile_app.tsx | 67 +------------ client/mobile/pages_profile.tsx | 171 ++++++++++++++++++++++++-------- 2 files changed, 128 insertions(+), 110 deletions(-) diff --git a/client/mobile/mobile_app.tsx b/client/mobile/mobile_app.tsx index 8430e30..8f3b4ce 100644 --- a/client/mobile/mobile_app.tsx +++ b/client/mobile/mobile_app.tsx @@ -191,72 +191,7 @@ const ErrorPage = () => { ); }; -// 添加个人页面组件 -const ProfilePage = () => { - const { logout, user } = useAuth(); - const navigate = useNavigate(); - - const handleLogout = async () => { - if (confirm('确定要退出登录吗？')) { - await logout(); - navigate('/mobile/login'); - } - }; - - return ( -
-

我的

-
-
-
- {user?.avatar ? ( - {user?.nickname - ) : ( - 用户 - )} -
-
-

{user?.nickname || user?.username || '未登录用户'}

-

个人信息

-
-
-
-
-
- 设置 -
-
-
- 账号安全 - › -
-
- 通知设置 - › -
-
- 隐私 - › -
-
- 关于 - › -
-
-
- -
- ); -}; +import ProfilePage from './pages_profile.tsx' // 移动端布局组件 - 包含底部导航 const MobileLayout = () => { diff --git a/client/mobile/pages_profile.tsx b/client/mobile/pages_profile.tsx index 6fc9456..0ed74c4 100644 --- a/client/mobile/pages_profile.tsx +++ b/client/mobile/pages_profile.tsx @@ -1,63 +1,114 @@ import React from 'react' import { useNavigate } from 'react-router' import { useForm } from 'react-hook-form' +import { useQuery, useMutation } from '@tanstack/react-query' import { UserAPI } from './api.ts' import type { User } from '../share/types.ts' +import { useAuth } from './hooks.tsx' export default function ProfilePage() { const navigate = useNavigate() - const { register, handleSubmit, formState: { errors }, setValue } = useForm & { password?: string }>() - const [loading, setLoading] = React.useState(false) - const [user, setUser] = React.useState(null) + const { register, handleSubmit, formState: { errors }, setValue } = useForm<{ + username: string + nickname: string + email: string + phone?: string + password?: string + }>() // 获取当前用户信息 - React.useEffect(() => { - const fetchUser = async () => { - try { - const res = await UserAPI.getUsers({ limit: 1 }) - if (res.data?.length > 0) { - const userData = res.data[0] - setUser(userData) - setValue('username', userData.username) - setValue('nickname', userData.nickname) - setValue('email', userData.email) - setValue('phone', userData.phone) - } - } catch (error) { - console.error('获取用户信息失败:', error) + const { data: user } = useQuery({ + queryKey: ['currentUser'], + queryFn: async () => { + const res = await UserAPI.getUsers({ limit: 1 }) + if (res.data?.length > 0) { + const userData = res.data[0] + setValue('username', userData.username) + setValue('nickname', userData.nickname || '') + setValue('email', userData.email || '') + setValue('phone', userData.phone || '') + return userData } + return null } - fetchUser() - }, [setValue]) + }) - // 提交表单更新用户信息 - const onSubmit = async (data: User) => { - try { - setLoading(true) - if (!user?.id) return - - const updatedUser = await UserAPI.updateUser(user.id, { - nickname: data.nickname, - email: data.email, - phone: data.phone, - ...(data.password ? { password: data.password } : {}) - }) - - setUser(updatedUser.data) - alert('更新成功') - } catch (error) { - console.error('更新失败:', error) - alert('更新失败') - } finally { - setLoading(false) + + // 更新用户信息 + const { mutate: updateUser, isPending } = useMutation({ + mutationFn: async (data: { + nickname: string + email: string + phone?: string + password?: string + }) => { + if (!user?.id) throw new Error('用户ID不存在') + return UserAPI.updateUser(user.id, { + nickname: data.nickname, + email: data.email, + phone: data.phone, + ...(data.password ? { password: data.password } : {}) + }) + }, + onSuccess: (updatedUser) => { + alert('更新成功') + }, + onError: (error) => { + console.error('更新失败:', error) + alert('更新失败') + } + }) + + const onSubmit = (data: { + username: string + nickname: string + email: string + phone?: string + password?: string + }) => { + updateUser({ + nickname: data.nickname, + email: data.email, + phone: data.phone, + password: data.password + }) + } + + const { logout } = useAuth() + + const handleLogout = async () => { + if (confirm('确定要退出登录吗？')) { + await logout() + navigate('/mobile/login') } } return ( -
-

个人信息

+
+

我的

+
+
+
+ {user?.avatar ? ( + {user?.nickname + ) : ( + 用户 + )} +
+
+

{user?.nickname || user?.username || '未登录用户'}

+

个人信息

+
+
+
-
+
+

编辑信息

+
+
+ +
+
+ 设置 +
+
+
+ 账号安全 + › +
+
+ 通知设置 + › +
+
+ 隐私 + › +
+
+ 关于 + › +
+
+
+ +
) } \ No newline at end of file