购买套餐页面更改字段和添加小字提示 & 添加余额管理页面

Co-authored-by: Copilot <copilot@github.com>

src/components/composites/purchase/long/center.tsx

@@ -84,9 +84,10 @@ export default function Center({skuData}: {
 
       {/* IP 时效 */}
       <FormField<Schema, 'live'>
-        className="space-y-4"
         name="live"
-        label="IP 时效">
+        label="IP 有效时间"
+        description="提取出的 IP 可用时间"
+      >
         {({id, field}) => (
           <RadioGroup
             id={id}
@@ -130,7 +131,7 @@ export default function Center({skuData}: {
 
       {/* 套餐时效 */}
       {type === '1' && (
-        <FormField className="space-y-4" name="expire" label="套餐时效">
+        <FormField name="expire" label="套餐有效时间" description="有效时间内可用于提取 IP">
           {({id, field}) => (
             <RadioGroup
               id={id}
@@ -162,14 +163,16 @@ export default function Center({skuData}: {
       {type === '1' ? (
         <NumberStepperField
           name="daily_limit"
-          label="每日提取上限"
+          label="IP 每日提取上限"
+          description="本套餐每日可提取 IP 的最大数量"
           min={currentCountMin}
           step={100}
         />
       ) : (
         <NumberStepperField
           name="quota"
-          label="IP 购买数量"
+          label="IP 总提取上限"
+          description="本套餐总计可提取 IP 的最大数量"
           min={currentCountMin}
           step={100}
         />

src/components/composites/purchase/shared/number-stepper-field.tsx

@@ -12,6 +12,7 @@ type PurchaseStepperFieldName = 'quota' | 'daily_limit'
 type NumberStepperFieldProps = {
   name: PurchaseStepperFieldName
   label: string
+  description?: string
   min: number
   step: number
 }
@@ -25,7 +26,7 @@ export function NumberStepperField(props: NumberStepperFieldProps) {
 
   return (
     <FormField<PurchaseFormValues, PurchaseStepperFieldName>
-      className="space-y-4"
+      description={props.description}
       name={props.name}
       label={props.label}
     >

src/components/composites/purchase/short/center.tsx

@@ -85,9 +85,10 @@ export default function Center({
 
       {/* IP 时效 */}
       <FormField<Schema, 'live'>
-        className="space-y-4"
         name="live"
-        label="IP 时效">
+        label="IP 有效时间"
+        description="提取出的 IP 可用时间"
+      >
         {({id, field}) => (
           <RadioGroup
             id={id}
@@ -134,7 +135,7 @@ export default function Center({
 
       {/* 套餐时效 */}
       {type === '1' && (
-        <FormField className="space-y-4" name="expire" label="套餐时效">
+        <FormField name="expire" label="套餐有效时间" description="有效时间内可用于提取 IP">
           {({id, field}) => (
             <RadioGroup
               id={id}
@@ -166,14 +167,16 @@ export default function Center({
       {type === '1' ? (
         <NumberStepperField
           name="daily_limit"
-          label="每日提取上限"
+          label="IP 每日提取上限"
+          description="本套餐每日可提取 IP 的最大数量"
           min={currentCountMin}
           step={1000}
         />
       ) : (
         <NumberStepperField
           name="quota"
-          label="IP 购买数量"
+          label="IP 总提取上限"
+          description="本套餐总计可提取 IP 的最大数量"
           min={currentCountMin}
           step={5000}
         />

src/components/ui/form.tsx

@@ -80,18 +80,6 @@ function FormField<
             )
           }
 
-          {/* control */}
-          <Slot
-            data-slot="form-control"
-            aria-invalid={!!fieldState.error}
-            aria-describedby={
-              !!fieldState.error
-                ? `${id}-description`
-                : `${id}-description ${id}-message`
-            }>
-            {props.children({id, field, fieldState, formState})}
-          </Slot>
-
           {/* description */}
           {!!props.description && (
             <FormDescription
@@ -105,6 +93,18 @@ function FormField<
             </FormDescription>
           )}
 
+          {/* control */}
+          <Slot
+            data-slot="form-control"
+            aria-invalid={!!fieldState.error}
+            aria-describedby={
+              !!fieldState.error
+                ? `${id}-description`
+                : `${id}-description ${id}-message`
+            }>
+            {props.children({id, field, fieldState, formState})}
+          </Slot>
+
           {/* message */}
           {!fieldState.error ? null : (
             <FormMessage id={`${id}-message`} error={fieldState.error} className={props.classNames?.message}/>