Browse Source

♻️ refactor(ui): optimize input component and form bindings

- 移除Users.tsx中未使用的zod导入
- 优化Input组件类型定义,支持更多value类型
- 修复Input组件null值处理问题,避免不必要的空字符串转换
- 移除表单字段中冗余的value={field.value || ''}绑定,简化代码
yourname 4 months ago
parent
commit
3ab37705dc
2 changed files with 13 additions and 11 deletions
  1. 9 10
      src/client/admin-shadcn/pages/Users.tsx
  2. 4 1
      src/client/components/ui/input.tsx

+ 9 - 10
src/client/admin-shadcn/pages/Users.tsx

@@ -13,7 +13,6 @@ import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, D
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/client/components/ui/form';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
 import { toast } from 'sonner';
 import { Skeleton } from '@/client/components/ui/skeleton';
 import { Switch } from '@/client/components/ui/switch';
@@ -387,7 +386,7 @@ export const UsersPage = () => {
                     <FormItem>
                       <FormLabel>昵称</FormLabel>
                       <FormControl>
-                        <Input placeholder="请输入昵称" {...field} value={field.value || ''} />
+                        <Input placeholder="请输入昵称" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -401,7 +400,7 @@ export const UsersPage = () => {
                     <FormItem>
                       <FormLabel>邮箱</FormLabel>
                       <FormControl>
-                        <Input type="email" placeholder="请输入邮箱" {...field} value={field.value || ''} />
+                        <Input type="email" placeholder="请输入邮箱" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -415,7 +414,7 @@ export const UsersPage = () => {
                     <FormItem>
                       <FormLabel>手机号</FormLabel>
                       <FormControl>
-                        <Input placeholder="请输入手机号" {...field} value={field.value || ''} />
+                        <Input placeholder="请输入手机号" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -429,7 +428,7 @@ export const UsersPage = () => {
                     <FormItem>
                       <FormLabel>真实姓名</FormLabel>
                       <FormControl>
-                        <Input placeholder="请输入真实姓名" {...field} value={field.value || ''} />
+                        <Input placeholder="请输入真实姓名" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -491,7 +490,7 @@ export const UsersPage = () => {
                     <FormItem>
                       <FormLabel>用户名</FormLabel>
                       <FormControl>
-                        <Input placeholder="请输入用户名" {...field} value={field.value || ''} />
+                        <Input placeholder="请输入用户名" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -505,7 +504,7 @@ export const UsersPage = () => {
                     <FormItem>
                       <FormLabel>昵称</FormLabel>
                       <FormControl>
-                        <Input placeholder="请输入昵称" {...field} value={field.value || ''} />
+                        <Input placeholder="请输入昵称" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -519,7 +518,7 @@ export const UsersPage = () => {
                     <FormItem>
                       <FormLabel>邮箱</FormLabel>
                       <FormControl>
-                        <Input type="email" placeholder="请输入邮箱" {...field} value={field.value || ''} />
+                        <Input type="email" placeholder="请输入邮箱" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -533,7 +532,7 @@ export const UsersPage = () => {
                     <FormItem>
                       <FormLabel>手机号</FormLabel>
                       <FormControl>
-                        <Input placeholder="请输入手机号" {...field} value={field.value || ''} />
+                        <Input placeholder="请输入手机号" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -547,7 +546,7 @@ export const UsersPage = () => {
                     <FormItem>
                       <FormLabel>真实姓名</FormLabel>
                       <FormControl>
-                        <Input placeholder="请输入真实姓名" {...field} value={field.value || ''} />
+                        <Input placeholder="请输入真实姓名" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>

+ 4 - 1
src/client/components/ui/input.tsx

@@ -2,11 +2,14 @@ import * as React from "react"
 
 import { cn } from "@/client/lib/utils"
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+export type InputProps = Omit<React.ComponentProps<"input">, 'value'> & { value?: string | number | readonly string[] | null }
+
+function Input({ className, type, value, ...props }: InputProps) {
   return (
     <input
       type={type}
       data-slot="input"
+      value={value === null ? undefined : value}
       className={cn(
         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",