更新用户信息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>

View File

@@ -238,14 +238,14 @@ export function createUserRoutes(withAuth: WithAuth) {
})
// 获取当前用户信息
usersRoutes.get('/me', withAuth, async (c) => {
usersRoutes.get('/me/profile', withAuth, async (c) => {
try {
const user = c.get('user')!
const apiClient = c.get('apiClient')
const userData = await apiClient.database.table('users')
.where('id', user.id)
.select('id', 'username', 'nickname', 'email', 'phone', 'role', 'created_at')
.select('id', 'username', 'nickname', 'email', 'phone', 'created_at')
.first()
if (!user) {
@@ -253,7 +253,7 @@ export function createUserRoutes(withAuth: WithAuth) {
}
return c.json({
data: user,
data: userData,
message: '获取用户详情成功'
})
} catch (error) {
@@ -263,7 +263,7 @@ export function createUserRoutes(withAuth: WithAuth) {
})
// 更新当前用户信息
usersRoutes.put('/me', withAuth, async (c) => {
usersRoutes.put('/me/profile', withAuth, async (c) => {
try {
const user = c.get('user')!
const apiClient = c.get('apiClient')
@@ -294,7 +294,7 @@ export function createUserRoutes(withAuth: WithAuth) {
const updatedUser = await apiClient.database.table('users')
.where('id', user.id)
.select('id', 'username', 'nickname', 'email', 'phone', 'role', 'created_at')
.select('id', 'username', 'nickname', 'email', 'phone', 'created_at')
.first()
return c.json({