更新用户信息API路由,调整为'/me/profile',并在设置页面中整合用户信息获取逻辑,优化加载状态处理,提升用户体验和代码可维护性。

This commit is contained in:
zyh
2025-04-10 14:16:54 +00:00
parent 21ee486676
commit 8d74bdbe79
3 changed files with 39 additions and 11 deletions

View File

@@ -152,7 +152,7 @@ interface UsersResponse {
};
}
interface UserResponse {
export interface UserResponse {
data: User;
message?: string;
}
@@ -227,7 +227,7 @@ export const UserAPI = {
// 获取当前用户信息
getCurrentUser: async (): Promise<UserResponse> => {
try {
const response = await axios.get(`${API_BASE_URL}/users/me`);
const response = await axios.get(`${API_BASE_URL}/users/me/profile`);
return response.data;
} catch (error) {
throw error;
@@ -237,7 +237,7 @@ export const UserAPI = {
// 更新当前用户信息
updateCurrentUser: async (userData: Partial<User>): Promise<UserUpdateResponse> => {
try {
const response = await axios.put(`${API_BASE_URL}/users/me`, userData);
const response = await axios.put(`${API_BASE_URL}/users/me/profile`, userData);
return response.data;
} catch (error) {
throw error;

View File

@@ -1,11 +1,18 @@
import React from 'react'
import { useForm } from 'react-hook-form'
import { useMutation } from '@tanstack/react-query'
import { useMutation, useQuery } from '@tanstack/react-query'
import { UserAPI } from './api.ts'
import { useAuth } from './hooks.tsx'
import type { User } from '../share/types.ts'
import type { UserResponse } from './api.ts'
export default function SettingsPage() {
const { register, handleSubmit, formState: { errors } } = useForm<{
const { data: userResponse, isLoading } = useQuery<UserResponse, Error, User>({
queryKey: ['currentUser'],
queryFn: () => UserAPI.getCurrentUser(),
select: (response) => response.data
})
const { register, handleSubmit, formState: { errors }, reset } = useForm<{
nickname: string
email: string
phone?: string
@@ -42,6 +49,27 @@ export default function SettingsPage() {
updateUser(data)
}
React.useEffect(() => {
if (userResponse) {
reset({
nickname: userResponse.nickname || '',
email: userResponse.email || '',
phone: userResponse.phone || ''
})
}
}, [userResponse, reset])
if (isLoading) {
return (
<div className="p-4">
<h1 className="text-2xl font-bold mb-4"></h1>
<div className="bg-white rounded-lg shadow p-4">
<p>...</p>
</div>
</div>
)
}
return (
<div className="p-4">
<h1 className="text-2xl font-bold mb-4"></h1>