Resources 常用模式

# 常用模式 用于表单、身份验证、DataGrid、对话框和其他常见 UI 元素的常用模式。 --- ## 使用 useAuth 进行身份验证 ### 获取当前用户 typescript import { useAuth } from '@/hooks/useAuth'; export const MyComponent: React.FC = () => { const { user } = useAuth(); // 可用属性： // - user.id: string // - user.email: string // - user.username: string // - user.roles: string[] return ( ); }; **永远不要直接调用身份验证 API** - 始终使用 `useAuth` hook。 --- ## 使用 React Hook Form 处理表单 ### 基础表单 typescript import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import { z } from 'zod'; import { TextField, Button } from '@mui/material'; import { useMuiSnackbar } from '@/hooks/useMuiSnackbar'; // 用于验证的 Zod 模式 const formSchema = z.object({ username: z.string().min(3, '用户名至少需要 3 个字符'), email: z.string().email('无效的电子邮件地址'), age: z.number().min(18, '必须年满 18 岁'), }); type FormData = z.infer; export const MyForm: React.FC = () => { const { showSuccess, showError } = useMuiSnackbar(); const { register, handleSubmit, formState: { errors } } = useForm({ resolver: zodResolver(formSchema), defaultValues: { username: '', email: '', age: 18, }, }); const onSubmit = async (data: FormData) => { try { await api.submitForm(data); showSuccess('表单提交成功'); } catch (error) { showError('表单提交失败'); } }; return ( <TextField {...register('age', { valueAsNumber: true })}