完成个人中心页面功能，公共组件部分调整

src/components/ui/form.tsx

@@ -48,16 +48,21 @@ function Form<T extends FieldValues>(rawProps: FormProps<T>) {
 type FormFieldProps<
   V extends FieldValues = FieldValues,
   N extends FieldPath<V> = FieldPath<V>,
-> = {
+> = Omit<ControllerProps<V, N>, 'control' | 'render'> & Omit<ComponentProps<'div'>, 'children'> & {
   label?: ReactNode
-  className?: string
+  description?: ReactNode
   children: (props: {
     id: string
     field: ControllerRenderProps<V, N>
     fieldState: ControllerFieldState
     formState: UseFormStateReturn<V>
   }) => ReactNode
-} & Omit<ControllerProps<V, N>, 'control' | 'render'>
+  classNames?: {
+    label?: string
+    description?: string
+    message?: string
+  }
+}
 
 function FormField<
   V extends FieldValues = FieldValues,
@@ -68,12 +73,15 @@ function FormField<
   return (
     <Controller<V, N> name={props.name} control={form.control} render={({field, fieldState, formState}) => (
       <div data-slot="form-field" className={merge('grid gap-2', props.className)}>
+
+        {/* label */}
         {!!props.label &&
-          <FormLabel error={fieldState.error}>
+          <FormLabel id={`${id}-label`} error={fieldState.error} className={props.classNames?.label}>
             {props.label}
           </FormLabel>
         }
 
+        {/* control */}
         <Slot
           data-slot="form-control"
           aria-invalid={!!fieldState.error}
@@ -85,8 +93,19 @@ function FormField<
           {props.children({id, field, fieldState, formState})}
         </Slot>
 
+        {/* description */}
+        {!!props.description && (
+          <FormDescription id={`${id}-description`} error={fieldState.error} className={merge(
+            `text-weak`,
+            props.classNames?.description,
+          )}>
+            {props.description}
+          </FormDescription>
+        )}
+
+        {/* message */}
         {!fieldState.error ? null : (
-          <FormMessage error={fieldState.error}/>
+          <FormMessage id={`${id}-message`} error={fieldState.error} className={props.classNames?.message}/>
         )}
       </div>
     )}/>